Internationalization + Finnish language (#181)

* I18n with next-intl

* package-lock

* Finnish translations

* Development fix

* Use locale for positioning currency symbol

* Translations: Expenses.ActiveUserModal

* Translations: group 404

* Better translation for ExpenseCard

* Apply translations in CategorySelect search

* Fix for Finnish translation

* Translations for ExpenseDocumentsInput

* Translations for CreateFromReceipt

* Fix for Finnish translation

* Translations for schema errors

* Fix for Finnish translation

* Fixes for Finnish translations

* Prettier

---------

Co-authored-by: Sebastien Castiel <sebastien@castiel.me>

src/app/groups/[groupId]/activity/activity-item.tsx

@@ -4,6 +4,7 @@ import { getGroupExpenses } from '@/lib/api'
 import { DateTimeStyle, cn, formatDate } from '@/lib/utils'
 import { Activity, ActivityType, Participant } from '@prisma/client'
 import { ChevronRight } from 'lucide-react'
+import { useLocale, useTranslations } from 'next-intl'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 
@@ -15,36 +16,27 @@ type Props = {
   dateStyle: DateTimeStyle
 }
 
-function getSummary(activity: Activity, participantName?: string) {
-  const participant = participantName ?? 'Someone'
+function useSummary(activity: Activity, participantName?: string) {
+  const t = useTranslations('Activity')
+  const participant = participantName ?? t('someone')
   const expense = activity.data ?? ''
+
+  const tr = (key: string) =>
+    t.rich(key, {
+      expense,
+      participant,
+      em: (chunks) => <em>&ldquo;{chunks}&rdquo;</em>,
+      strong: (chunks) => <strong>{chunks}</strong>,
+    })
+
   if (activity.activityType == ActivityType.UPDATE_GROUP) {
-    return (
-      <>
-        Group settings were modified by <strong>{participant}</strong>
-      </>
-    )
+    return <>{tr('settingsModified')}</>
   } else if (activity.activityType == ActivityType.CREATE_EXPENSE) {
-    return (
-      <>
-        Expense <em>&ldquo;{expense}&rdquo;</em> created by{' '}
-        <strong>{participant}</strong>.
-      </>
-    )
+    return <>{tr('expenseCreated')}</>
   } else if (activity.activityType == ActivityType.UPDATE_EXPENSE) {
-    return (
-      <>
-        Expense <em>&ldquo;{expense}&rdquo;</em> updated by{' '}
-        <strong>{participant}</strong>.
-      </>
-    )
+    return <>{tr('expenseUpdated')}</>
   } else if (activity.activityType == ActivityType.DELETE_EXPENSE) {
-    return (
-      <>
-        Expense <em>&ldquo;{expense}&rdquo;</em> deleted by{' '}
-        <strong>{participant}</strong>.
-      </>
-    )
+    return <>{tr('expenseDeleted')}</>
   }
 }
 
@@ -56,9 +48,10 @@ export function ActivityItem({
   dateStyle,
 }: Props) {
   const router = useRouter()
+  const locale = useLocale()
 
   const expenseExists = expense !== undefined
-  const summary = getSummary(activity, participant?.name)
+  const summary = useSummary(activity, participant?.name)
 
   return (
     <div
@@ -75,11 +68,11 @@ export function ActivityItem({
       <div className="flex flex-col justify-between items-start">
         {dateStyle !== undefined && (
           <div className="mt-1 text-xs/5 text-muted-foreground">
-            {formatDate(activity.time, { dateStyle })}
+            {formatDate(activity.time, locale, { dateStyle })}
           </div>
         )}
         <div className="my-1 text-xs/5 text-muted-foreground">
-          {formatDate(activity.time, { timeStyle: 'short' })}
+          {formatDate(activity.time, locale, { timeStyle: 'short' })}
         </div>
       </div>
       <div className="flex-1">

src/app/groups/[groupId]/activity/activity-list.tsx

@@ -2,6 +2,7 @@ import { ActivityItem } from '@/app/groups/[groupId]/activity/activity-item'
 import { getGroupExpenses } from '@/lib/api'
 import { Activity, Participant } from '@prisma/client'
 import dayjs, { type Dayjs } from 'dayjs'
+import { useTranslations } from 'next-intl'
 
 type Props = {
   groupId: string
@@ -11,15 +12,15 @@ type Props = {
 }
 
 const DATE_GROUPS = {
-  TODAY: 'Today',
-  YESTERDAY: 'Yesterday',
-  EARLIER_THIS_WEEK: 'Earlier this week',
-  LAST_WEEK: 'Last week',
-  EARLIER_THIS_MONTH: 'Earlier this month',
-  LAST_MONTH: 'Last month',
-  EARLIER_THIS_YEAR: 'Earlier this year',
-  LAST_YEAR: 'Last year',
-  OLDER: 'Older',
+  TODAY: 'today',
+  YESTERDAY: 'yesterday',
+  EARLIER_THIS_WEEK: 'earlierThisWeek',
+  LAST_WEEK: 'lastWeek',
+  EARLIER_THIS_MONTH: 'earlierThisMonth',
+  LAST_MONTH: 'lastMonth',
+  EARLIER_THIS_YEAR: 'earlierThisYear',
+  LAST_YEAR: 'lastYear',
+  OLDER: 'older',
 }
 
 function getDateGroup(date: Dayjs, today: Dayjs) {
@@ -63,6 +64,7 @@ export function ActivityList({
   expenses,
   activities,
 }: Props) {
+  const t = useTranslations('Activity')
   const groupedActivitiesByDate = getGroupedActivitiesByDate(activities)
 
   return activities.length > 0 ? (
@@ -82,7 +84,7 @@ export function ActivityList({
                 'text-muted-foreground text-xs py-1 font-semibold sticky top-16 bg-white dark:bg-[#1b1917]'
               }
             >
-              {dateGroup}
+              {t(`Groups.${dateGroup}`)}
             </div>
             {groupActivities.map((activity: Activity) => {
               const participant =
@@ -105,8 +107,6 @@ export function ActivityList({
       })}
     </>
   ) : (
-    <p className="px-6 text-sm py-6">
-      There is not yet any activity in your group.
-    </p>
+    <p className="px-6 text-sm py-6">{t('noActivity')}</p>
   )
 }

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

@@ -9,6 +9,7 @@ import {
 } from '@/components/ui/card'
 import { getActivities, getGroupExpenses } from '@/lib/api'
 import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
 import { notFound } from 'next/navigation'
 
 export const metadata: Metadata = {
@@ -20,6 +21,7 @@ export default async function ActivityPage({
 }: {
   params: { groupId: string }
 }) {
+  const t = await getTranslations('Activity')
   const group = await cached.getGroup(groupId)
   if (!group) notFound()
 
@@ -30,10 +32,8 @@ export default async function ActivityPage({
     <>
       <Card className="mb-4">
         <CardHeader>
-          <CardTitle>Activity</CardTitle>
-          <CardDescription>
-            Overview of all activity in this group.
-          </CardDescription>
+          <CardTitle>{t('title')}</CardTitle>
+          <CardDescription>{t('description')}</CardDescription>
         </CardHeader>
         <CardContent className="flex flex-col space-y-4">
           <ActivityList