Titles and navigation

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 },
 }: {