feat: Add translation for pages' titles

src/app/groups/[groupId]/activity/page.client.tsx

@@ -6,11 +6,15 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card'
-import { Metadata } from 'next'
 import { useTranslations } from 'next-intl'
+import { getTranslations } from 'next-intl/server'
 
-export const metadata: Metadata = {
-  title: 'Activity',
+export async function generateMetadata() {
+  const t = await getTranslations('Activity')
+
+  return {
+    title: t('title'),
+  };
 }
 
 export function ActivityPageClient() {

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

@@ -1,8 +1,12 @@
 import { ActivityPageClient } from '@/app/groups/[groupId]/activity/page.client'
-import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
 
-export const metadata: Metadata = {
-  title: 'Activity',
+export async function generateMetadata() {
+  const t = await getTranslations('Activity')
+
+  return {
+    title: t('title'),
+  };
 }
 
 export default async function ActivityPage() {

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

@@ -1,8 +1,12 @@
 import BalancesAndReimbursements from '@/app/groups/[groupId]/balances/balances-and-reimbursements'
-import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
 
-export const metadata: Metadata = {
-  title: 'Balances',
+export async function generateMetadata() {
+  const t = await getTranslations('Balances')
+
+  return {
+    title: t('title'),
+  };
 }
 
 export default async function GroupPage() {

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

@@ -1,8 +1,12 @@
 import { EditGroup } from '@/app/groups/[groupId]/edit/edit-group'
-import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
 
-export const metadata: Metadata = {
-  title: 'Settings',
+export async function generateMetadata() {
+  const t = await getTranslations('Settings')
+
+  return {
+    title: t('title'),
+  };
 }
 
 export default async function EditGroupPage() {

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

@@ -1,9 +1,13 @@
 import { EditExpenseForm } from '@/app/groups/[groupId]/expenses/edit-expense-form'
 import { getRuntimeFeatureFlags } from '@/lib/featureFlags'
-import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
 
-export const metadata: Metadata = {
-  title: 'Edit Expense',
+export async function generateMetadata() {
+  const t = await getTranslations('ExpenseForm')
+
+  return {
+    title: t('Expense.edit'),
+  };
 }
 
 export default async function EditExpensePage({

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

@@ -1,9 +1,13 @@
 import { CreateExpenseForm } from '@/app/groups/[groupId]/expenses/create-expense-form'
 import { getRuntimeFeatureFlags } from '@/lib/featureFlags'
-import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
 
-export const metadata: Metadata = {
-  title: 'Create Expense',
+export async function generateMetadata() {
+  const t = await getTranslations('ExpenseForm')
+
+  return {
+    title: t('Expense.create'),
+  };
 }
 
 export default async function ExpensePage({

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

@@ -13,15 +13,19 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { Plus } from 'lucide-react'
-import { Metadata } from 'next'
 import { useTranslations } from 'next-intl'
+import { getTranslations } from 'next-intl/server'
 import Link from 'next/link'
 import { useCurrentGroup } from '../current-group-context'
 
 export const revalidate = 3600
 
-export const metadata: Metadata = {
-  title: 'Expenses',
+export async function generateMetadata() {
+  const t = await getTranslations('Expenses')
+
+  return {
+    title: t('title'),
+  };
 }
 
 export default function GroupExpensesPageClient({

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

@@ -1,11 +1,15 @@
 import GroupExpensesPageClient from '@/app/groups/[groupId]/expenses/page.client'
 import { env } from '@/lib/env'
-import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
 
 export const revalidate = 3600
 
-export const metadata: Metadata = {
-  title: 'Expenses',
+export async function generateMetadata() {
+  const t = await getTranslations('Expenses')
+
+  return {
+    title: t('title'),
+  };
 }
 
 export default async function GroupExpensesPage() {

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

@@ -1,8 +1,12 @@
 import GroupInformation from '@/app/groups/[groupId]/information/group-information'
-import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
 
-export const metadata: Metadata = {
-  title: 'Group Information',
+export async function generateMetadata() {
+  const t = await getTranslations('GroupForm')
+
+  return {
+    title: t('title'),
+  };
 }
 
 export default async function InformationPage({

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

@@ -1,8 +1,12 @@
 import { TotalsPageClient } from '@/app/groups/[groupId]/stats/page.client'
-import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
 
-export const metadata: Metadata = {
-  title: 'Totals',
+export async function generateMetadata() {
+  const t = await getTranslations('Stats')
+
+  return {
+    title: t('Totals.title'),
+  };
 }
 
 export default async function TotalsPage() {

src/app/groups/create/page.tsx

@@ -1,8 +1,12 @@
 import { CreateGroup } from '@/app/groups/create/create-group'
-import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
 
-export const metadata: Metadata = {
-  title: 'Create Group',
+export async function generateMetadata() {
+  const t = await getTranslations('Groups')
+
+  return {
+    title: t('NoRecent.create'),
+  };
 }
 
 export default function CreateGroupPage() {

src/app/groups/page.tsx

@@ -1,8 +1,12 @@
 import { RecentGroupList } from '@/app/groups/recent-group-list'
-import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
 
-export const metadata: Metadata = {
-  title: 'Recently visited groups',
+export async function generateMetadata() {
+  const t = await getTranslations('Groups')
+
+  return {
+    title: t('recent'),
+  };
 }
 
 export default async function GroupsPage() {

src/app/layout.tsx

@@ -9,54 +9,58 @@ import { env } from '@/lib/env'
 import { TRPCProvider } from '@/trpc/client'
 import type { Metadata, Viewport } from 'next'
 import { NextIntlClientProvider, useTranslations } from 'next-intl'
-import { getLocale, getMessages } from 'next-intl/server'
+import { getLocale, getMessages, getTranslations } from 'next-intl/server'
 import Image from 'next/image'
 import Link from 'next/link'
 import { Suspense } from 'react'
 import './globals.css'
 
-export const metadata: Metadata = {
-  metadataBase: new URL(env.NEXT_PUBLIC_BASE_URL),
-  title: {
-    default: 'Spliit · Share Expenses with Friends & Family',
-    template: '%s · Spliit',
-  },
-  description:
-    'Spliit is a minimalist web application to share expenses with friends and family. No ads, no account, no problem.',
-  openGraph: {
-    title: 'Spliit · Share Expenses with Friends & Family',
-    description:
-      'Spliit is a minimalist web application to share expenses with friends and family. No ads, no account, no problem.',
-    images: `/banner.png`,
-    type: 'website',
-    url: '/',
-  },
-  twitter: {
-    card: 'summary_large_image',
-    creator: '@scastiel',
-    site: '@scastiel',
-    images: `/banner.png`,
-    title: 'Spliit · Share Expenses with Friends & Family',
+export async function generateMetadata() {
+  const t = await getTranslations('Homepage')
+
+  return {
+    metadataBase: new URL(env.NEXT_PUBLIC_BASE_URL),
+    title: {
+      default: t('title'),
+      template: '%s · Spliit',
+    },
     description:
       'Spliit is a minimalist web application to share expenses with friends and family. No ads, no account, no problem.',
-  },
-  appleWebApp: {
-    capable: true,
-    title: 'Spliit',
-  },
-  applicationName: 'Spliit',
-  icons: [
-    {
-      url: '/android-chrome-192x192.png',
-      sizes: '192x192',
-      type: 'image/png',
+    openGraph: {
+      title: t('title'),
+      description:
+        'Spliit is a minimalist web application to share expenses with friends and family. No ads, no account, no problem.',
+      images: `/banner.png`,
+      type: 'website',
+      url: '/',
+    },
+    twitter: {
+      card: 'summary_large_image',
+      creator: '@scastiel',
+      site: '@scastiel',
+      images: `/banner.png`,
+      title: t('title'),
+      description:
+        'Spliit is a minimalist web application to share expenses with friends and family. No ads, no account, no problem.',
     },
-    {
-      url: '/android-chrome-512x512.png',
-      sizes: '512x512',
-      type: 'image/png',
+    appleWebApp: {
+      capable: true,
+      title: 'Spliit',
     },
-  ],
+    applicationName: 'Spliit',
+    icons: [
+      {
+        url: '/android-chrome-192x192.png',
+        sizes: '192x192',
+        type: 'image/png',
+      },
+      {
+        url: '/android-chrome-512x512.png',
+        sizes: '512x512',
+        type: 'image/png',
+      },
+    ],
+  };
 }
 
 export const viewport: Viewport = {