Titles and navigation

src/app/groups/[groupId]/layout.tsx

@@ -1,31 +1,39 @@
 import { GroupTabs } from '@/app/groups/[groupId]/group-tabs'
 import { SaveGroupLocally } from '@/app/groups/[groupId]/save-recent-group'
-import { Button } from '@/components/ui/button'
 import { getGroup } from '@/lib/api'
-import { ChevronLeft } from 'lucide-react'
+import { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 import { PropsWithChildren } from 'react'
 
+type Props = {
+  params: {
+    groupId: string
+  }
+}
+
+export async function generateMetadata({
+  params: { groupId },
+}: Props): Promise<Metadata> {
+  const group = await getGroup(groupId)
+
+  return {
+    title: {
+      default: group?.name ?? '',
+      template: `%s · ${group?.name} · Spliit`,
+    },
+  }
+}
+
 export default async function GroupLayout({
   children,
   params: { groupId },
-}: PropsWithChildren<{
-  params: { groupId: string }
-}>) {
+}: PropsWithChildren<Props>) {
   const group = await getGroup(groupId)
   if (!group) notFound()
 
   return (
     <>
-      <div className="mb-4 flex justify-between">
-        <Button variant="ghost" asChild>
-          <Link href="/groups">
-            <ChevronLeft className="w-4 h-4 mr-2" /> Back to recent groups
-          </Link>
-        </Button>
-      </div>
-
       <h1 className="font-bold text-2xl mb-4">
         <Link href={`/groups/${groupId}`}>{group.name}</Link>
       </h1>