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 +++++++++++++---------
 1 file changed, 26 insertions(+), 17 deletions(-)

(limited to 'apps/web/components/dashboard/bookmarks/BookmarkOptions.tsx')

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>
-- 
cgit v1.2.3-70-g09d2