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

1 files changed, 8 insertions, 5 deletions

diff --git a/apps/web/components/dashboard/header/ProfileOptions.tsx b/apps/web/components/dashboard/header/ProfileOptions.tsx
index ee6cac01..e715048e 100644
--- a/apps/web/components/dashboard/header/ProfileOptions.tsx
+++ b/apps/web/components/dashboard/header/ProfileOptions.tsx
@@ -11,31 +11,34 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Separator } from "@/components/ui/separator";
+import { useTranslation } from "@/lib/i18n/client";
 import { LogOut, Moon, Paintbrush, Settings, Shield, Sun } from "lucide-react";
 import { signOut, useSession } from "next-auth/react";
 import { useTheme } from "next-themes";
 
 function DarkModeToggle() {
+  const { t } = useTranslation();
   const { theme } = useTheme();
 
   if (theme == "dark") {
     return (
       <>
         <Sun className="mr-2 size-4" />
-        <span>Light Mode</span>
+        <span>{t("options.light_mode")}</span>
       </>
     );
   } else {
     return (
       <>
         <Moon className="mr-2 size-4" />
-        <span>Dark Mode</span>
+        <span>{t("options.dark_mode")}</span>
       </>
     );
   }
 }
 
 export default function SidebarProfileOptions() {
+  const { t } = useTranslation();
   const toggleTheme = useToggleTheme();
   const { data: session } = useSession();
   if (!session) return redirect("/");
@@ -64,14 +67,14 @@ export default function SidebarProfileOptions() {
         <DropdownMenuItem asChild>
           <Link href="/settings">
             <Settings className="mr-2 size-4" />
-            User Settings
+            {t("settings.user_settings")}
           </Link>
         </DropdownMenuItem>
         {session.user.role == "admin" && (
           <DropdownMenuItem asChild>
             <Link href="/dashboard/admin">
               <Shield className="mr-2 size-4" />
-              Admin Settings
+              {t("admin.admin_settings")}
             </Link>
           </DropdownMenuItem>
         )}
@@ -94,7 +97,7 @@ export default function SidebarProfileOptions() {
           }
         >
           <LogOut className="mr-2 size-4" />
-          <span>Sign Out</span>
+          <span>{t("actions.sign_out")}</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>