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
---
 apps/web/components/dashboard/lists/ListOptions.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

(limited to 'apps/web/components/dashboard/lists/ListOptions.tsx')

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