feature: Add i18n support. Fixes #57 (#635)

* feature(web): Add basic scaffolding for i18n

* refactor: Switch most of the app's strings to use i18n strings

* fix: Remove unused i18next-resources-for-ts command

* Add user setting

* More translations

* Drop the german translation for now

5 files changed, 17 insertions, 17 deletions

diff --git a/apps/web/app/dashboard/cleanups/page.tsx b/apps/web/app/dashboard/cleanups/page.tsx
index ca9187ee..1974d2a7 100644
--- a/apps/web/app/dashboard/cleanups/page.tsx
+++ b/apps/web/app/dashboard/cleanups/page.tsx
@@ -1,18 +1,21 @@
 import { TagDuplicationDetection } from "@/components/dashboard/cleanups/TagDuplicationDetention";
 import { Separator } from "@/components/ui/separator";
+import { useTranslation } from "@/lib/i18n/server";
 import { Paintbrush, Tags } from "lucide-react";
 
-export default function Cleanups() {
+export default async function Cleanups() {
+  const { t } = await useTranslation();
+
   return (
     <div className="flex flex-col gap-y-4 rounded-md border bg-background p-4">
       <span className="flex items-center gap-1 text-2xl">
         <Paintbrush />
-        Cleanups
+        {t("cleanups.cleanups")}
       </span>
       <Separator />
       <span className="flex items-center gap-1 text-xl">
         <Tags />
-        Duplicate Tags
+        {t("cleanups.duplicate_tags.title")}
       </span>
       <Separator />
       <TagDuplicationDetection />
diff --git a/apps/web/app/dashboard/lists/page.tsx b/apps/web/app/dashboard/lists/page.tsx
index 1c22ac32..36eb8b7a 100644
--- a/apps/web/app/dashboard/lists/page.tsx
+++ b/apps/web/app/dashboard/lists/page.tsx
@@ -1,13 +1,15 @@
 import AllListsView from "@/components/dashboard/lists/AllListsView";
 import { Separator } from "@/components/ui/separator";
+import { useTranslation } from "@/lib/i18n/server";
 import { api } from "@/server/api/client";
 
 export default async function ListsPage() {
+  const { t } = await useTranslation();
   const lists = await api.lists.list();
 
   return (
     <div className="flex flex-col gap-3 rounded-md border bg-background p-4">
-      <p className="text-2xl">📋 All Lists</p>
+      <p className="text-2xl">📋 {t("lists.all_lists")}</p>
       <Separator />
       <AllListsView initialData={lists.lists} />
     </div>
diff --git a/apps/web/app/dashboard/tags/page.tsx b/apps/web/app/dashboard/tags/page.tsx
index 6caea513..1639e4c5 100644
--- a/apps/web/app/dashboard/tags/page.tsx
+++ b/apps/web/app/dashboard/tags/page.tsx
@@ -1,13 +1,15 @@
 import AllTagsView from "@/components/dashboard/tags/AllTagsView";
 import { Separator } from "@/components/ui/separator";
+import { useTranslation } from "@/lib/i18n/server";
 import { api } from "@/server/api/client";
 
 export default async function TagsPage() {
+  const { t } = await useTranslation();
   const allTags = (await api.tags.list()).tags;
 
   return (
     <div className="space-y-4 rounded-md border bg-background p-4">
-      <span className="text-2xl">All Tags</span>
+      <span className="text-2xl">{t("tags.all_tags")}</span>
       <Separator />
       <AllTagsView initialData={allTags} />
     </div>
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 6d8b10ed..7d3858eb 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -5,14 +5,9 @@ import "@hoarder/tailwind-config/globals.css";
 
 import type { Viewport } from "next";
 import React from "react";
-import { cookies } from "next/headers";
 import { Toaster } from "@/components/ui/toaster";
 import Providers from "@/lib/providers";
-import {
-  defaultUserLocalSettings,
-  parseUserLocalSettings,
-  USER_LOCAL_SETTINGS_COOKIE_NAME,
-} from "@/lib/userLocalSettings/types";
+import { getUserLocalSettings } from "@/lib/userLocalSettings/userLocalSettings";
 import { getServerAuthSession } from "@/server/auth";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
@@ -57,11 +52,7 @@ export default async function RootLayout({
         <Providers
           session={session}
           clientConfig={clientConfig}
-          userLocalSettings={
-            parseUserLocalSettings(
-              cookies().get(USER_LOCAL_SETTINGS_COOKIE_NAME)?.value,
-            ) ?? defaultUserLocalSettings()
-          }
+          userLocalSettings={await getUserLocalSettings()}
         >
           {children}
           <ReactQueryDevtools initialIsOpen={false} />
diff --git a/apps/web/app/settings/info/page.tsx b/apps/web/app/settings/info/page.tsx
index 8027b09f..c7d8f808 100644
--- a/apps/web/app/settings/info/page.tsx
+++ b/apps/web/app/settings/info/page.tsx
@@ -1,11 +1,13 @@
 import { ChangePassword } from "@/components/settings/ChangePassword";
 import UserDetails from "@/components/settings/UserDetails";
+import { UserOptions } from "@/components/settings/UserOptions";
 
 export default async function InfoPage() {
   return (
-    <div className="rounded-md border bg-background p-4">
+    <div className="flex flex-col gap-8 rounded-md border bg-background p-4">
       <UserDetails />
       <ChangePassword />
+      <UserOptions />
     </div>
   );
 }