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

3 files changed, 17 insertions, 10 deletions

diff --git a/apps/web/components/settings/sidebar/ModileSidebar.tsx b/apps/web/components/settings/sidebar/ModileSidebar.tsx
index 2016c931..cbed9ef9 100644
--- a/apps/web/components/settings/sidebar/ModileSidebar.tsx
+++ b/apps/web/components/settings/sidebar/ModileSidebar.tsx
@@ -1,12 +1,14 @@
 import MobileSidebarItem from "@/components/shared/sidebar/ModileSidebarItem";
+import { useTranslation } from "@/lib/i18n/server";
 
 import { settingsSidebarItems } from "./items";
 
 export default async function MobileSidebar() {
+  const { t } = await useTranslation();
   return (
     <aside className="w-full">
       <ul className="flex justify-between space-x-2 border-b-black px-5 py-2 pt-5">
-        {settingsSidebarItems.map((item) => (
+        {settingsSidebarItems(t).map((item) => (
           <MobileSidebarItem
             key={item.name}
             logo={item.icon}
diff --git a/apps/web/components/settings/sidebar/Sidebar.tsx b/apps/web/components/settings/sidebar/Sidebar.tsx
index 247e0916..a1b61e98 100644
--- a/apps/web/components/settings/sidebar/Sidebar.tsx
+++ b/apps/web/components/settings/sidebar/Sidebar.tsx
@@ -1,5 +1,6 @@
 import { redirect } from "next/navigation";
 import SidebarItem from "@/components/shared/sidebar/SidebarItem";
+import { useTranslation } from "@/lib/i18n/server";
 import { getServerAuthSession } from "@/server/auth";
 
 import serverConfig from "@hoarder/shared/config";
@@ -7,6 +8,7 @@ import serverConfig from "@hoarder/shared/config";
 import { settingsSidebarItems } from "./items";
 
 export default async function Sidebar() {
+  const { t } = await useTranslation();
   const session = await getServerAuthSession();
   if (!session) {
     redirect("/");
@@ -16,7 +18,7 @@ export default async function Sidebar() {
     <aside className="flex h-[calc(100vh-64px)] w-60 flex-col gap-5 border-r p-4 ">
       <div>
         <ul className="space-y-2 text-sm font-medium">
-          {settingsSidebarItems.map((item) => (
+          {settingsSidebarItems(t).map((item) => (
             <SidebarItem
               key={item.name}
               logo={item.icon}
diff --git a/apps/web/components/settings/sidebar/items.tsx b/apps/web/components/settings/sidebar/items.tsx
index 047ee233..43dfabdd 100644
--- a/apps/web/components/settings/sidebar/items.tsx
+++ b/apps/web/components/settings/sidebar/items.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { TFunction } from "i18next";
 import {
   ArrowLeft,
   Download,
@@ -8,38 +9,40 @@ import {
   User,
 } from "lucide-react";
 
-export const settingsSidebarItems: {
+export const settingsSidebarItems = (
+  t: TFunction,
+): {
   name: string;
   icon: JSX.Element;
   path: string;
-}[] = [
+}[] => [
   {
-    name: "Back To App",
+    name: t("settings.back_to_app"),
     icon: <ArrowLeft size={18} />,
     path: "/dashboard/bookmarks",
   },
   {
-    name: "User Info",
+    name: t("settings.info.user_info"),
     icon: <User size={18} />,
     path: "/settings/info",
   },
   {
-    name: "AI Settings",
+    name: t("settings.ai.ai_settings"),
     icon: <Sparkles size={18} />,
     path: "/settings/ai",
   },
   {
-    name: "RSS Subscriptions",
+    name: t("settings.feeds.rss_subscriptions"),
     icon: <Rss size={18} />,
     path: "/settings/feeds",
   },
   {
-    name: "Import / Export",
+    name: t("settings.import.import_export"),
     icon: <Download size={18} />,
     path: "/settings/import",
   },
   {
-    name: "API Keys",
+    name: t("settings.api_keys.api_keys"),
     icon: <KeyRound size={18} />,
     path: "/settings/api-keys",
   },