Titles and navigation

src/app/groups/[groupId]/balances/page.tsx

@@ -9,8 +9,13 @@ import {
 } from '@/components/ui/card'
 import { getGroup, getGroupExpenses } from '@/lib/api'
 import { getBalances, getSuggestedReimbursements } from '@/lib/balances'
+import { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 
+export const metadata: Metadata = {
+  title: 'Balances',
+}
+
 export default async function GroupPage({
   params: { groupId },
 }: {

src/app/groups/[groupId]/edit/page.tsx

@@ -1,8 +1,13 @@
 import { GroupForm } from '@/components/group-form'
 import { getGroup, updateGroup } from '@/lib/api'
 import { groupFormSchema } from '@/lib/schemas'
+import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
 
+export const metadata: Metadata = {
+  title: 'Settings',
+}
+
 export default async function EditGroupPage({
   params: { groupId },
 }: {

src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx

@@ -1,8 +1,13 @@
 import { ExpenseForm } from '@/components/expense-form'
 import { deleteExpense, getExpense, getGroup, updateExpense } from '@/lib/api'
 import { expenseFormSchema } from '@/lib/schemas'
+import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
 
+export const metadata: Metadata = {
+  title: 'Edit expense',
+}
+
 export default async function EditExpensePage({
   params: { groupId, expenseId },
 }: {

src/app/groups/[groupId]/expenses/create/page.tsx

@@ -1,8 +1,13 @@
 import { ExpenseForm } from '@/components/expense-form'
 import { createExpense, getGroup } from '@/lib/api'
 import { expenseFormSchema } from '@/lib/schemas'
+import { Metadata } from 'next'
 import { notFound, redirect } from 'next/navigation'
 
+export const metadata: Metadata = {
+  title: 'Create expense',
+}
+
 export default async function ExpensePage({
   params: { groupId },
 }: {

src/app/groups/[groupId]/expenses/expense-list.tsx

@@ -66,7 +66,7 @@ export function ExpenseList({
   ) : (
     <p className="px-6 text-sm py-6">
       Your group doesn’t contain any expense yet.{' '}
-      <Button variant="link" asChild className="-m-3">
+      <Button variant="link" asChild className="-m-4">
         <Link href={`/groups/${groupId}/expenses/create`}>
           Create the first one
         </Link>

src/app/groups/[groupId]/expenses/page.tsx

@@ -9,9 +9,14 @@ import {
 } from '@/components/ui/card'
 import { getGroup, getGroupExpenses } from '@/lib/api'
 import { Plus } from 'lucide-react'
+import { Metadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
 
+export const metadata: Metadata = {
+  title: 'Expenses',
+}
+
 export default async function GroupExpensesPage({
   params: { groupId },
 }: {

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>

src/app/groups/create/page.tsx

@@ -1,9 +1,6 @@
 import { GroupForm } from '@/components/group-form'
-import { Button } from '@/components/ui/button'
 import { createGroup } from '@/lib/api'
 import { groupFormSchema } from '@/lib/schemas'
-import { ChevronLeft } from 'lucide-react'
-import Link from 'next/link'
 import { redirect } from 'next/navigation'
 
 export default function CreateGroupPage() {
@@ -14,16 +11,5 @@ export default function CreateGroupPage() {
     redirect(`/groups/${group.id}`)
   }
 
-  return (
-    <main>
-      <div className="mb-4">
-        <Button variant="ghost" asChild>
-          <Link href="/groups">
-            <ChevronLeft className="w-4 h-4 mr-2" /> Back to recent groups
-          </Link>
-        </Button>
-      </div>
-      <GroupForm onSubmit={createGroupAction} />
-    </main>
-  )
+  return <GroupForm onSubmit={createGroupAction} />
 }

src/app/groups/not-found.tsx

@@ -0,0 +1,15 @@
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-col gap-2">
+      <p>This group does not exist.</p>
+      <p>
+        <Button asChild variant="secondary">
+          <Link href="/groups">Go to recently visited groups</Link>
+        </Button>
+      </p>
+    </div>
+  )
+}

src/app/groups/page.tsx

@@ -1,10 +1,18 @@
 import { RecentGroupList } from '@/app/groups/recent-group-list'
 import { Button } from '@/components/ui/button'
+import { Metadata } from 'next'
 import Link from 'next/link'
 
+export const metadata: Metadata = {
+  title: 'Recently visited groups',
+}
+
 export default async function GroupsPage() {
   return (
     <main>
+      <h1 className="font-bold text-2xl mb-4">
+        <Link href="/groups">Recently visited groups</Link>
+      </h1>
       <Button asChild>
         <Link href="/groups/create">New group</Link>
       </Button>