From 0b27f90fb76a2492c17a958b6dd807e6fbbf8030 Mon Sep 17 00:00:00 2001
From: Sebastien Castiel <sebastien@castiel.me>
Date: Thu, 7 Dec 2023 16:44:01 -0500
Subject: Titles and navigation

---
 src/app/groups/[groupId]/balances/page.tsx         |  5 ++++
 src/app/groups/[groupId]/edit/page.tsx             |  5 ++++
 .../[groupId]/expenses/[expenseId]/edit/page.tsx   |  5 ++++
 src/app/groups/[groupId]/expenses/create/page.tsx  |  5 ++++
 src/app/groups/[groupId]/expenses/expense-list.tsx |  2 +-
 src/app/groups/[groupId]/expenses/page.tsx         |  5 ++++
 src/app/groups/[groupId]/layout.tsx                | 34 +++++++++++++---------
 src/app/groups/create/page.tsx                     | 16 +---------
 src/app/groups/not-found.tsx                       | 15 ++++++++++
 src/app/groups/page.tsx                            |  8 +++++
 10 files changed, 71 insertions(+), 29 deletions(-)
 create mode 100644 src/app/groups/not-found.tsx

(limited to 'src/app/groups')

diff --git a/src/app/groups/[groupId]/balances/page.tsx b/src/app/groups/[groupId]/balances/page.tsx
index ab2c582..31dbf63 100644
--- a/src/app/groups/[groupId]/balances/page.tsx
+++ b/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 },
 }: {
diff --git a/src/app/groups/[groupId]/edit/page.tsx b/src/app/groups/[groupId]/edit/page.tsx
index f902428..1fcf225 100644
--- a/src/app/groups/[groupId]/edit/page.tsx
+++ b/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 },
 }: {
diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
index 0623f50..188d08f 100644
--- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx
+++ b/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 },
 }: {
diff --git a/src/app/groups/[groupId]/expenses/create/page.tsx b/src/app/groups/[groupId]/expenses/create/page.tsx
index 3a730d5..e603e59 100644
--- a/src/app/groups/[groupId]/expenses/create/page.tsx
+++ b/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 },
 }: {
diff --git a/src/app/groups/[groupId]/expenses/expense-list.tsx b/src/app/groups/[groupId]/expenses/expense-list.tsx
index 1ba7df7..907a37a 100644
--- a/src/app/groups/[groupId]/expenses/expense-list.tsx
+++ b/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>
diff --git a/src/app/groups/[groupId]/expenses/page.tsx b/src/app/groups/[groupId]/expenses/page.tsx
index 48f355b..0ec5086 100644
--- a/src/app/groups/[groupId]/expenses/page.tsx
+++ b/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 },
 }: {
diff --git a/src/app/groups/[groupId]/layout.tsx b/src/app/groups/[groupId]/layout.tsx
index 5b99dd2..5fbd7cb 100644
--- a/src/app/groups/[groupId]/layout.tsx
+++ b/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>
diff --git a/src/app/groups/create/page.tsx b/src/app/groups/create/page.tsx
index 4f220d2..82047a5 100644
--- a/src/app/groups/create/page.tsx
+++ b/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} />
 }
diff --git a/src/app/groups/not-found.tsx b/src/app/groups/not-found.tsx
new file mode 100644
index 0000000..d4532e1
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/app/groups/page.tsx b/src/app/groups/page.tsx
index 7e4f484..86c63ac 100644
--- a/src/app/groups/page.tsx
+++ b/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>
-- 
cgit v1.3