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, 19 insertions, 12 deletions

diff --git a/apps/web/components/dashboard/lists/AllListsView.tsx b/apps/web/components/dashboard/lists/AllListsView.tsx
index 308af5db..ab6e31d3 100644
--- a/apps/web/components/dashboard/lists/AllListsView.tsx
+++ b/apps/web/components/dashboard/lists/AllListsView.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { EditListModal } from "@/components/dashboard/lists/EditListModal";
 import { Button } from "@/components/ui/button";
 import { CollapsibleTriggerChevron } from "@/components/ui/collapsible";
+import { useTranslation } from "@/lib/i18n/client";
 import { MoreHorizontal, Plus } from "lucide-react";
 
 import type { ZBookmarkList } from "@hoarder/shared/types/lists";
@@ -62,23 +63,24 @@ export default function AllListsView({
 }: {
   initialData: ZBookmarkList[];
 }) {
+  const { t } = useTranslation();
   return (
     <ul>
       <EditListModal>
         <Button className="mb-2 flex h-full w-full items-center">
           <Plus />
-          <span>New List</span>
+          <span>{t("lists.new_list")}</span>
         </Button>
       </EditListModal>
       <ListItem
         collapsible={false}
-        name="Favourites"
+        name={t("lists.favourites")}
         icon="⭐️"
         path={`/dashboard/favourites`}
       />
       <ListItem
         collapsible={false}
-        name="Archive"
+        name={t("common.archive")}
         icon="🗄️"
         path={`/dashboard/archive`}
       />
diff --git a/apps/web/components/dashboard/lists/EditListModal.tsx b/apps/web/components/dashboard/lists/EditListModal.tsx
index cba1a0e6..d66d7096 100644
--- a/apps/web/components/dashboard/lists/EditListModal.tsx
+++ b/apps/web/components/dashboard/lists/EditListModal.tsx
@@ -26,6 +26,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { toast } from "@/components/ui/use-toast";
+import { useTranslation } from "@/lib/i18n/client";
 import data from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -54,6 +55,7 @@ export function EditListModal({
   parent?: ZBookmarkList;
   children?: React.ReactNode;
 }) {
+  const { t } = useTranslation();
   const router = useRouter();
   if (
     (userOpen !== undefined && !userSetOpen) ||
@@ -91,7 +93,7 @@ export function EditListModal({
   const { mutate: createList, isPending: isCreating } = useCreateBookmarkList({
     onSuccess: (resp) => {
       toast({
-        description: "List has been created!",
+        description: t("toasts.lists.created"),
       });
       setOpen(false);
       router.push(`/dashboard/lists/${resp.id}`);
@@ -115,7 +117,7 @@ export function EditListModal({
       } else {
         toast({
           variant: "destructive",
-          title: "Something went wrong",
+          title: t("common.something_went_wrong"),
         });
       }
     },
@@ -124,7 +126,7 @@ export function EditListModal({
   const { mutate: editList, isPending: isEditing } = useEditBookmarkList({
     onSuccess: () => {
       toast({
-        description: "List has been updated!",
+        description: t("toasts.lists.updated"),
       });
       setOpen(false);
       form.reset();
@@ -147,7 +149,7 @@ export function EditListModal({
       } else {
         toast({
           variant: "destructive",
-          title: "Something went wrong",
+          title: t("common.something_went_wrong"),
         });
       }
     },
@@ -259,7 +261,7 @@ export function EditListModal({
             <DialogFooter className="sm:justify-end">
               <DialogClose asChild>
                 <Button type="button" variant="secondary">
-                  Close
+                  {t("actions.close")}
                 </Button>
               </DialogClose>
               <ActionButton
@@ -267,7 +269,7 @@ export function EditListModal({
                 onClick={onSubmit}
                 loading={isPending}
               >
-                {list ? "Save" : "Create"}
+                {list ? t("actions.save") : t("actions.create")}
               </ActionButton>
             </DialogFooter>
           </form>
diff --git a/apps/web/components/dashboard/lists/ListOptions.tsx b/apps/web/components/dashboard/lists/ListOptions.tsx
index b44d8a23..e663a2e0 100644
--- a/apps/web/components/dashboard/lists/ListOptions.tsx
+++ b/apps/web/components/dashboard/lists/ListOptions.tsx
@@ -7,6 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { useTranslation } from "@/lib/i18n/client";
 import { Pencil, Plus, Trash2 } from "lucide-react";
 
 import { ZBookmarkList } from "@hoarder/shared/types/lists";
@@ -21,6 +22,8 @@ export function ListOptions({
   list: ZBookmarkList;
   children?: React.ReactNode;
 }) {
+  const { t } = useTranslation();
+
   const [deleteListDialogOpen, setDeleteListDialogOpen] = useState(false);
   const [newNestedListModalOpen, setNewNestedListModalOpen] = useState(false);
   const [editModalOpen, setEditModalOpen] = useState(false);
@@ -49,21 +52,21 @@ export function ListOptions({
           onClick={() => setEditModalOpen(true)}
         >
           <Pencil className="size-4" />
-          <span>Edit</span>
+          <span>{t("actions.edit")}</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           className="flex gap-2"
           onClick={() => setNewNestedListModalOpen(true)}
         >
           <Plus className="size-4" />
-          <span>New nested list</span>
+          <span>{t("lists.new_nested_list")}</span>
         </DropdownMenuItem>
         <DropdownMenuItem
           className="flex gap-2"
           onClick={() => setDeleteListDialogOpen(true)}
         >
           <Trash2 className="size-4" />
-          <span>Delete</span>
+          <span>{t("actions.delete")}</span>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>