feature: Add i18n support. Fixes #57

apps/web/@types/i18next.d.ts

@@ -0,0 +1,13 @@
+import "i18next";
+
+import translation from "../lib/i18n/locales/en/translation.json";
+
+declare module "i18next" {
+  // Extend CustomTypeOptions
+  interface CustomTypeOptions {
+    defaultNS: "translation";
+    resources: {
+      translation: typeof translation;
+    };
+  }
+}

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 />

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>

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>

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} />

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>
   );
 }

apps/web/components/dashboard/BulkBookmarksAction.tsx

@@ -9,6 +9,7 @@ import {
 import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
 import { useToast } from "@/components/ui/use-toast";
 import useBulkActionsStore from "@/lib/bulkActions";
+import { useTranslation } from "@/lib/i18n/client";
 import {
   CheckCheck,
   FileDown,
@@ -33,6 +34,7 @@ import BulkTagModal from "./bookmarks/BulkTagModal";
 import { ArchivedActionIcon, FavouritedActionIcon } from "./bookmarks/icons";
 
 export default function BulkBookmarksAction() {
+  const { t } = useTranslation();
   const { selectedBookmarks, isBulkEditEnabled } = useBulkActionsStore();
   const setIsBulkEditEnabled = useBulkActionsStore(
     (state) => state.setIsBulkEditEnabled,
@@ -179,63 +181,65 @@ export default function BulkBookmarksAction() {
   const actionList = [
     {
       name: isClipboardAvailable()
-        ? "Copy Links"
+        ? t("actions.copy_link")
         : "Copying is only available over https",
       icon: <Link size={18} />,
       action: () => copyLinks(),
       isPending: false,
       hidden: !isBulkEditEnabled,
     },
     {
-      name: "Add to List",
+      name: t("actions.add_to_list"),
       icon: <List size={18} />,
       action: () => setManageListsModalOpen(true),
       isPending: false,
       hidden: !isBulkEditEnabled,
     },
     {
-      name: "Edit Tags",
+      name: t("actions.edit_tags"),
       icon: <Hash size={18} />,
       action: () => setBulkTagModalOpen(true),
       isPending: false,
       hidden: !isBulkEditEnabled,
     },
     {
-      name: alreadyFavourited ? "Unfavourite" : "Favourite",
+      name: alreadyFavourited ? t("actions.unfavorite") : t("actions.favorite"),
       icon: <FavouritedActionIcon favourited={!!alreadyFavourited} size={18} />,
       action: () => updateBookmarks({ favourited: !alreadyFavourited }),
       isPending: updateBookmarkMutator.isPending,
       hidden: !isBulkEditEnabled,
     },
     {
-      name: alreadyArchived ? "Un-archive" : "Archive",
+      name: alreadyArchived ? t("actions.unarchive") : t("actions.archive"),
       icon: <ArchivedActionIcon size={18} archived={!!alreadyArchived} />,
       action: () => updateBookmarks({ archived: !alreadyArchived }),
       isPending: updateBookmarkMutator.isPending,
       hidden: !isBulkEditEnabled,
     },
     {
-      name: "Download Full Page Archive",
+      name: t("actions.download_full_page_archive"),
       icon: <FileDown size={18} />,
       action: () => recrawlBookmarks(true),
       isPending: recrawlBookmarkMutator.isPending,
       hidden: !isBulkEditEnabled,
     },
     {
-      name: "Refresh",
+      name: t("actions.refresh"),
       icon: <RotateCw size={18} />,
       action: () => recrawlBookmarks(false),
       isPending: recrawlBookmarkMutator.isPending,
       hidden: !isBulkEditEnabled,
     },
     {
-      name: "Delete",
+      name: t("actions.delete"),
       icon: <Trash2 size={18} color="red" />,
       action: () => setIsDeleteDialogOpen(true),
       hidden: !isBulkEditEnabled,
     },
     {
-      name: isEverythingSelected() ? "Unselect All" : "Select All",
+      name: isEverythingSelected()
+        ? t("actions.unselect_all")
+        : t("actions.select_all"),
       icon: (
         <p className="flex items-center gap-2">
           ( <CheckCheck size={18} /> {selectedBookmarks.length} )
@@ -247,14 +251,14 @@ export default function BulkBookmarksAction() {
       hidden: !isBulkEditEnabled,
     },
     {
-      name: "Close bulk edit",
+      name: t("actions.close_bulk_edit"),
       icon: <X size={18} />,
       action: () => setIsBulkEditEnabled(false),
       alwaysEnable: true,
       hidden: !isBulkEditEnabled,
     },
     {
-      name: "Bulk Edit",
+      name: t("actions.bulk_edit"),
       icon: <Pencil size={18} />,
       action: () => setIsBulkEditEnabled(true),
       alwaysEnable: true,
@@ -276,7 +280,7 @@ export default function BulkBookmarksAction() {
             loading={deleteBookmarkMutator.isPending}
             onClick={() => deleteBookmarks()}
           >
-            Delete
+            {t("actions.delete")}
           </ActionButton>
         )}
       />

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,41 +17,43 @@ 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,
   compact: List,
 };
 
 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"
         >
           {React.createElement(iconMap[layout], { size: 18 })}
         </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"
             onClick={async () => await updateBookmarksLayout(key as LayoutType)}
           >
             <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>

apps/web/components/dashboard/EditableText.tsx

@@ -7,6 +7,7 @@ import {
   TooltipPortal,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useTranslation } from "@/lib/i18n/client";
 import { Check, Pencil, X } from "lucide-react";
 
 interface Props {
@@ -26,6 +27,7 @@ function EditMode({
   originalText,
   setEditable,
 }: Props) {
+  const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -63,7 +65,7 @@ function EditMode({
         }}
       />
       <ActionButtonWithTooltip
-        tooltip="Save"
+        tooltip={t("actions.save")}
         delayDuration={500}
         size="none"
         variant="ghost"
@@ -74,7 +76,7 @@ function EditMode({
         <Check className="size-4" />
       </ActionButtonWithTooltip>
       <ButtonWithTooltip
-        tooltip="Cancel"
+        tooltip={t("actions.cancel")}
         delayDuration={500}
         size="none"
         variant="ghost"
@@ -95,6 +97,7 @@ function ViewMode({
   viewClassName,
   untitledClassName,
 }: Props) {
+  const { t } = useTranslation();
   return (
     <Tooltip delayDuration={500}>
       <div className="flex max-w-full items-center gap-3">
@@ -107,7 +110,7 @@ function ViewMode({
         </TooltipTrigger>
         <ButtonWithTooltip
           delayDuration={500}
-          tooltip="Edit title"
+          tooltip={t("actions.edit_title")}
           size="none"
           variant="ghost"
           className="align-middle text-gray-400"