From 4354ee7ba1c6ac9a9567944ae6169b1664e0ea8a Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sun, 17 Nov 2024 00:33:28 +0000
Subject: 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
---
 .../dashboard/bookmarks/BookmarkOptions.tsx        | 43 +++++++++++++---------
 .../components/dashboard/bookmarks/EditorCard.tsx  | 26 ++++++-------
 .../dashboard/bookmarks/ManageListsModal.tsx       | 16 ++++----
 .../dashboard/bookmarks/SummarizeBookmarkArea.tsx  |  4 +-
 .../components/dashboard/bookmarks/TagModal.tsx    |  6 ++-
 5 files changed, 54 insertions(+), 41 deletions(-)

(limited to 'apps/web/components/dashboard/bookmarks')

diff --git a/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx b/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx
index c09d2e50..8dfb96fd 100644
--- a/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx
+++ b/apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx
@@ -10,6 +10,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { useToast } from "@/components/ui/use-toast";
 import { useClientConfig } from "@/lib/clientConfig";
+import { useTranslation } from "@/lib/i18n/client";
 import {
   FileDown,
   Link,
@@ -41,6 +42,7 @@ import { useManageListsModal } from "./ManageListsModal";
 import { useTagModel } from "./TagModal";
 
 export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
+  const { t } = useTranslation();
   const { toast } = useToast();
   const linkId = bookmark.id;
 
@@ -58,14 +60,13 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
   const onError = () => {
     toast({
       variant: "destructive",
-      title: "Something went wrong",
-      description: "There was a problem with your request.",
+      title: t("common.something_went_wrong"),
     });
   };
   const deleteBookmarkMutator = useDeleteBookmark({
     onSuccess: () => {
       toast({
-        description: "The bookmark has been deleted!",
+        description: t("toasts.bookmarks.deleted"),
       });
     },
     onError,
@@ -74,7 +75,7 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
   const updateBookmarkMutator = useUpdateBookmark({
     onSuccess: () => {
       toast({
-        description: "The bookmark has been updated!",
+        description: t("toasts.bookmarks.updated"),
       });
     },
     onError,
@@ -83,7 +84,7 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
   const crawlBookmarkMutator = useRecrawlBookmark({
     onSuccess: () => {
       toast({
-        description: "Re-fetch has been enqueued!",
+        description: t("toasts.bookmarks.refetch"),
       });
     },
     onError,
@@ -92,7 +93,7 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
   const fullPageArchiveBookmarkMutator = useRecrawlBookmark({
     onSuccess: () => {
       toast({
-        description: "Full Page Archive creation has been triggered",
+        description: t("toasts.bookmarks.full_page_archive"),
       });
     },
     onError,
@@ -101,7 +102,7 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
   const removeFromListMutator = useRemoveBookmarkFromList({
     onSuccess: () => {
       toast({
-        description: "The bookmark has been deleted from the list",
+        description: t("toasts.bookmarks.delete_from_list"),
       });
     },
     onError,
@@ -145,7 +146,11 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
               className="mr-2 size-4"
               favourited={bookmark.favourited}
             />
-            <span>{bookmark.favourited ? "Un-favourite" : "Favourite"}</span>
+            <span>
+              {bookmark.favourited
+                ? t("actions.unfavorite")
+                : t("actions.favorite")}
+            </span>
           </DropdownMenuItem>
           <DropdownMenuItem
             disabled={demoMode}
@@ -160,7 +165,11 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
               className="mr-2 size-4"
               archived={bookmark.archived}
             />
-            <span>{bookmark.archived ? "Un-archive" : "Archive"}</span>
+            <span>
+              {bookmark.archived
+                ? t("actions.unarchive")
+                : t("actions.archive")}
+            </span>
           </DropdownMenuItem>
 
           {bookmark.content.type === BookmarkTypes.LINK && (
@@ -173,7 +182,7 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
               }}
             >
               <FileDown className="mr-2 size-4" />
-              <span>Download Full Page Archive</span>
+              <span>{t("actions.download_full_page_archive")}</span>
             </DropdownMenuItem>
           )}
 
@@ -184,22 +193,22 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
                   (bookmark.content as ZBookmarkedLink).url,
                 );
                 toast({
-                  description: "Link was added to your clipboard!",
+                  description: t("toasts.bookmarks.clipboard_copied"),
                 });
               }}
             >
               <Link className="mr-2 size-4" />
-              <span>Copy Link</span>
+              <span>{t("actions.copy_link")}</span>
             </DropdownMenuItem>
           )}
           <DropdownMenuItem onClick={() => setTagModalIsOpen(true)}>
             <Tags className="mr-2 size-4" />
-            <span>Edit Tags</span>
+            <span>{t("actions.edit_tags")}</span>
           </DropdownMenuItem>
 
           <DropdownMenuItem onClick={() => setManageListsModalOpen(true)}>
             <List className="mr-2 size-4" />
-            <span>Manage Lists</span>
+            <span>{t("actions.manage_lists")}</span>
           </DropdownMenuItem>
 
           {listId && (
@@ -213,7 +222,7 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
               }
             >
               <ListX className="mr-2 size-4" />
-              <span>Remove from List</span>
+              <span>{t("actions.remove_from_list")}</span>
             </DropdownMenuItem>
           )}
 
@@ -225,7 +234,7 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
               }
             >
               <RotateCw className="mr-2 size-4" />
-              <span>Refresh</span>
+              <span>{t("actions.refresh")}</span>
             </DropdownMenuItem>
           )}
           <DropdownMenuItem
@@ -236,7 +245,7 @@ export default function BookmarkOptions({ bookmark }: { bookmark: ZBookmark }) {
             }
           >
             <Trash2 className="mr-2 size-4" />
-            <span>Delete</span>
+            <span>{t("actions.delete")}</span>
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
index 4d851d1c..cb4bfdce 100644
--- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx
+++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx
@@ -9,6 +9,7 @@ import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/use-toast";
 import BookmarkAlreadyExistsToast from "@/components/utils/BookmarkAlreadyExistsToast";
 import { useClientConfig } from "@/lib/clientConfig";
+import { useTranslation } from "@/lib/i18n/client";
 import {
   useBookmarkLayout,
   useBookmarkLayoutSwitch,
@@ -48,6 +49,7 @@ interface MultiUrlImportState {
 }
 
 export default function EditorCard({ className }: { className?: string }) {
+  const { t } = useTranslation();
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
   const [multiUrlImportState, setMultiUrlImportState] =
@@ -181,11 +183,9 @@ export default function EditorCard({ className }: { className?: string }) {
         onSubmit={form.handleSubmit(onSubmit, onError)}
       >
         <div className="flex justify-between">
-          <p className="text-sm">NEW ITEM</p>
+          <p className="text-sm">{t("editor.new_item")}</p>
           <InfoTooltip size={15}>
-            <p className="text-center">
-              You can quickly focus on this field by pressing ⌘ + E
-            </p>
+            <p className="text-center">{t("editor.quickly_focus")}</p>
           </InfoTooltip>
         </div>
         <Separator />
@@ -198,9 +198,7 @@ export default function EditorCard({ className }: { className?: string }) {
                 "h-full w-full border-none p-0 text-lg focus-visible:ring-0",
                 { "resize-none": bookmarkLayout !== "list" },
               )}
-              placeholder={
-                "Paste a link or an image, write a note or drag and drop an image in here ..."
-              }
+              placeholder={t("editor.placeholder")}
               onKeyDown={(e) => {
                 if (demoMode) {
                   return;
@@ -223,16 +221,16 @@ export default function EditorCard({ className }: { className?: string }) {
         <ActionButton loading={isPending} type="submit" variant="default">
           {form.formState.dirtyFields.text
             ? demoMode
-              ? "Submissions are disabled"
-              : `Save (${OS === "macos" ? "⌘" : "Ctrl"} + Enter)`
-            : "Save"}
+              ? t("editor.disabled_submissions")
+              : `${t("actions.save")} (${OS === "macos" ? "⌘" : "Ctrl"} + Enter)`
+            : t("actions.save")}
         </ActionButton>
 
         {multiUrlImportState && (
           <MultipleChoiceDialog
             open={true}
-            title={`Import URLs as separate Bookmarks?`}
-            description={`The input contains multiple URLs on separate lines. Do you want to import them as separate bookmarks?`}
+            title={t("editor.multiple_urls_dialog_title")}
+            description={t("editor.multiple_urls_dialog_desc")}
             onOpenChange={(open) => {
               if (!open) {
                 setMultiUrlImportState(null);
@@ -252,7 +250,7 @@ export default function EditorCard({ className }: { className?: string }) {
                     setMultiUrlImportState(null);
                   }}
                 >
-                  Import as Text Bookmark
+                  {t("editor.import_as_text")}
                 </ActionButton>
               ),
               () => (
@@ -267,7 +265,7 @@ export default function EditorCard({ className }: { className?: string }) {
                     setMultiUrlImportState(null);
                   }}
                 >
-                  Import as separate Bookmarks
+                  {t("editor.import_as_separate_bookmarks")}
                 </ActionButton>
               ),
             ]}
diff --git a/apps/web/components/dashboard/bookmarks/ManageListsModal.tsx b/apps/web/components/dashboard/bookmarks/ManageListsModal.tsx
index c1a75a43..dfbd6d45 100644
--- a/apps/web/components/dashboard/bookmarks/ManageListsModal.tsx
+++ b/apps/web/components/dashboard/bookmarks/ManageListsModal.tsx
@@ -18,6 +18,7 @@ import {
 } from "@/components/ui/form";
 import LoadingSpinner from "@/components/ui/spinner";
 import { toast } from "@/components/ui/use-toast";
+import { useTranslation } from "@/lib/i18n/client";
 import { api } from "@/lib/trpc";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Archive, X } from "lucide-react";
@@ -42,6 +43,7 @@ export default function ManageListsModal({
   open: boolean;
   setOpen: (open: boolean) => void;
 }) {
+  const { t } = useTranslation();
   const formSchema = z.object({
     listId: z.string({
       required_error: "Please select a list",
@@ -73,7 +75,7 @@ export default function ManageListsModal({
     useAddBookmarkToList({
       onSuccess: () => {
         toast({
-          description: "List has been updated!",
+          description: t("toasts.lists.updated"),
         });
         form.resetField("listId");
       },
@@ -86,7 +88,7 @@ export default function ManageListsModal({
         } else {
           toast({
             variant: "destructive",
-            title: "Something went wrong",
+            title: t("common.something_went_wrong"),
           });
         }
       },
@@ -96,7 +98,7 @@ export default function ManageListsModal({
     useRemoveBookmarkFromList({
       onSuccess: () => {
         toast({
-          description: "List has been updated!",
+          description: t("toasts.lists.updated"),
         });
         form.resetField("listId");
       },
@@ -109,7 +111,7 @@ export default function ManageListsModal({
         } else {
           toast({
             variant: "destructive",
-            title: "Something went wrong",
+            title: t("common.something_went_wrong"),
           });
         }
       },
@@ -188,7 +190,7 @@ export default function ManageListsModal({
             <DialogFooter className="sm:justify-end">
               <DialogClose asChild>
                 <Button type="button" variant="secondary">
-                  Close
+                  {t("actions.close")}
                 </Button>
               </DialogClose>
               <ArchiveBookmarkButton
@@ -196,14 +198,14 @@ export default function ManageListsModal({
                 bookmarkId={bookmarkId}
                 onDone={() => setOpen(false)}
               >
-                <Archive className="mr-2 size-4" /> Archive
+                <Archive className="mr-2 size-4" /> {t("actions.archive")}
               </ArchiveBookmarkButton>
               <ActionButton
                 type="submit"
                 loading={isAddingToListPending}
                 disabled={isAddingToListPending}
               >
-                Add
+                {t("actions.add")}
               </ActionButton>
             </DialogFooter>
           </form>
diff --git a/apps/web/components/dashboard/bookmarks/SummarizeBookmarkArea.tsx b/apps/web/components/dashboard/bookmarks/SummarizeBookmarkArea.tsx
index 5dfa3166..21554556 100644
--- a/apps/web/components/dashboard/bookmarks/SummarizeBookmarkArea.tsx
+++ b/apps/web/components/dashboard/bookmarks/SummarizeBookmarkArea.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { ActionButton } from "@/components/ui/action-button";
 import LoadingSpinner from "@/components/ui/spinner";
 import { toast } from "@/components/ui/use-toast";
+import { useTranslation } from "@/lib/i18n/client";
 import { cn } from "@/lib/utils";
 import { ChevronUp, RefreshCw, Sparkles, Trash2 } from "lucide-react";
 
@@ -99,6 +100,7 @@ export default function SummarizeBookmarkArea({
 }: {
   bookmark: ZBookmark;
 }) {
+  const { t } = useTranslation();
   const { mutate, isPending } = useSummarizeBookmark({
     onError: () => {
       toast({
@@ -132,7 +134,7 @@ export default function SummarizeBookmarkArea({
             </div>
           )}
           <span className="relative z-10 flex items-center gap-1.5">
-            Summarize with AI
+            {t("actions.summarize_with_ai")}
             <Sparkles className="size-4" />
           </span>
         </ActionButton>
diff --git a/apps/web/components/dashboard/bookmarks/TagModal.tsx b/apps/web/components/dashboard/bookmarks/TagModal.tsx
index c2f081be..61f462b1 100644
--- a/apps/web/components/dashboard/bookmarks/TagModal.tsx
+++ b/apps/web/components/dashboard/bookmarks/TagModal.tsx
@@ -8,6 +8,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
+import { useTranslation } from "@/lib/i18n/client";
 
 import type { ZBookmark } from "@hoarder/shared/types/bookmarks";
 
@@ -22,17 +23,18 @@ export default function TagModal({
   open: boolean;
   setOpen: (open: boolean) => void;
 }) {
+  const { t } = useTranslation();
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Edit Tags</DialogTitle>
+          <DialogTitle>{t("actions.edit_tags")}</DialogTitle>
         </DialogHeader>
         <BookmarkTagsEditor bookmark={bookmark} />
         <DialogFooter className="sm:justify-end">
           <DialogClose asChild>
             <Button type="button" variant="secondary">
-              Close
+              {t("actions.close")}
             </Button>
           </DialogClose>
         </DialogFooter>
-- 
cgit v1.2.3-70-g09d2