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/ChangeLayout.tsx b/apps/web/components/dashboard/ChangeLayout.tsx
index 6ec38245..c7f44a73 100644
--- a/apps/web/components/dashboard/ChangeLayout.tsx
+++ b/apps/web/components/dashboard/ChangeLayout.tsx
@@ -8,6 +8,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { useTranslation } from "@/lib/i18n/client";
 import { useBookmarkLayout } from "@/lib/userLocalSettings/bookmarksLayout";
 import { updateBookmarksLayout } from "@/lib/userLocalSettings/userLocalSettings";
 import {
@@ -16,11 +17,12 @@ import {
   LayoutGrid,
   LayoutList,
   List,
+  LucideIcon,
 } from "lucide-react";
 
-type LayoutType = "masonry" | "grid" | "list";
+type LayoutType = "masonry" | "grid" | "list" | "compact";
 
-const iconMap = {
+const iconMap: Record<LayoutType, LucideIcon> = {
   masonry: LayoutDashboard,
   grid: LayoutGrid,
   list: LayoutList,
@@ -28,13 +30,14 @@ const iconMap = {
 };
 
 export default function ChangeLayout() {
+  const { t } = useTranslation();
   const layout = useBookmarkLayout();
 
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <ButtonWithTooltip
-          tooltip="Change layout"
+          tooltip={t("actions.change_layout")}
           delayDuration={100}
           variant="ghost"
         >
@@ -42,7 +45,7 @@ export default function ChangeLayout() {
         </ButtonWithTooltip>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-fit">
-        {Object.keys(iconMap).map((key) => (
+        {(Object.keys(iconMap) as LayoutType[]).map((key) => (
           <DropdownMenuItem
             key={key}
             className="cursor-pointer justify-between"
@@ -50,7 +53,7 @@ export default function ChangeLayout() {
           >
             <div className="flex items-center gap-2">
               {React.createElement(iconMap[key as LayoutType], { size: 18 })}
-              <span className="capitalize">{key}</span>
+              <span>{t(`layouts.${key}`)}</span>
             </div>
             {layout == key && <Check className="ml-2 size-4" />}
           </DropdownMenuItem>