chore: update i18n

Author: boojack

frontend/locales/en.json

@@ -31,6 +31,7 @@
     "operating-system": "Operating System"
   },
   "shortcut": {
+    "visits": "{{count}} visits",
     "visibility": {
       "private": {
         "self": "Private",
@@ -46,6 +47,13 @@
       }
     }
   },
+  "filter": {
+    "all": "All",
+    "mine": "Mine",
+    "compact-mode": "Compact mode",
+    "order-by": "Order by",
+    "direction": "Direction"
+  },
   "user": {
     "self": "User",
     "nickname": "Nickname",

frontend/locales/zh.json

@@ -31,6 +31,7 @@
     "operating-system": "操作系统"
   },
   "shortcut": {
+    "visits": "{{count}} 次访问",
     "visibility": {
       "private": {
         "self": "私有的",
@@ -46,6 +47,13 @@
       }
     }
   },
+  "filter": {
+    "all": "所有",
+    "mine": "我的",
+    "compact-mode": "紧凑模式",
+    "order-by": "排序方式",
+    "direction": "方向"
+  },
   "user": {
     "self": "用户",
     "nickname": "昵称",

frontend/web/src/components/EditUserinfoDialog.tsx

@@ -66,11 +66,11 @@ const EditUserinfoDialog: React.FC<Props> = (props: Props) => {
         </div>
         <div>
           <div className="w-full flex flex-col justify-start items-start mb-3">
-            <span className="mb-2">Email</span>
+            <span className="mb-2">{t("common.email")}</span>
             <Input className="w-full" type="text" value={email} onChange={handleEmailChanged} />
           </div>
           <div className="w-full flex flex-col justify-start items-start mb-3">
-            <span className="mb-2">Nickname</span>
+            <span className="mb-2">{t("user.nickname")}</span>
             <Input className="w-full" type="text" value={nickname} onChange={handleNicknameChanged} />
           </div>
           <div className="w-full flex flex-row justify-end items-center space-x-2">

frontend/web/src/components/Navigator.tsx

@@ -1,9 +1,11 @@
 import classNames from "classnames";
+import { useTranslation } from "react-i18next";
 import { useAppSelector } from "../stores";
 import useViewStore from "../stores/v1/view";
 import Icon from "./Icon";
 
 const Navigator = () => {
+  const { t } = useTranslation();
   const viewStore = useViewStore();
   const { shortcutList } = useAppSelector((state) => state.shortcut);
   const tags = shortcutList.map((shortcut) => shortcut.tags).flat();
@@ -22,7 +24,7 @@ const Navigator = () => {
         onClick={() => viewStore.setFilter({ tab: "tab:all" })}
       >
         <Icon.CircleSlash className="w-4 h-auto mr-1" />
-        <span className="font-normal">All</span>
+        <span className="font-normal">{t("filter.all")}</span>
       </button>
       <button
         className={classNames(
@@ -34,7 +36,7 @@ const Navigator = () => {
         onClick={() => viewStore.setFilter({ tab: "tab:mine" })}
       >
         <Icon.User className="w-4 h-auto mr-1" />
-        <span className="font-normal">Mine</span>
+        <span className="font-normal">{t("filter.mine")}</span>
       </button>
       {Array.from(sortedTagMap.keys()).map((tag) => (
         <button

frontend/web/src/components/ShortcutCard.tsx

@@ -124,7 +124,7 @@ const ShortcutView = (props: Props) => {
               className="w-auto px-2 leading-6 flex flex-row justify-start items-center flex-nowrap whitespace-nowrap border rounded-full cursor-pointer text-gray-500 text-sm dark:border-zinc-800"
             >
               <Icon.BarChart2 className="w-4 h-auto mr-1" />
-              {shortcut.view} visits
+              {t("shortcut.visits", { count: shortcut.view })}
             </Link>
           </Tooltip>
         </div>

frontend/web/src/components/ViewSetting.tsx

@@ -1,9 +1,11 @@
 import { Divider, Option, Select, Switch } from "@mui/joy";
+import { useTranslation } from "react-i18next";
 import useViewStore from "../stores/v1/view";
 import Icon from "./Icon";
 import Dropdown from "./common/Dropdown";
 
 const ViewSetting = () => {
+  const { t } = useTranslation();
   const viewStore = useViewStore();
   const order = viewStore.getOrder();
   const { field, direction } = order;
@@ -20,7 +22,7 @@ const ViewSetting = () => {
       actions={
         <div className="w-52 p-2 gap-2 flex flex-col justify-start items-start" onClick={(e) => e.stopPropagation()}>
           <div className="w-full flex flex-row justify-between items-center">
-            <span className="text-sm shrink-0 mr-2">Compact mode</span>
+            <span className="text-sm shrink-0 mr-2">{t("filter.compact-mode")}</span>
             <Switch
               size="sm"
               checked={displayStyle === "compact"}
@@ -29,7 +31,7 @@ const ViewSetting = () => {
           </div>
           <Divider className="!my-1" />
           <div className="w-full flex flex-row justify-between items-center">
-            <span className="text-sm shrink-0 mr-2">Order by</span>
+            <span className="text-sm shrink-0 mr-2">{t("filter.order-by")}</span>
             <Select size="sm" value={field} onChange={(_, value) => viewStore.setOrder({ field: value as any })}>
               <Option value={"name"}>Name</Option>
               <Option value={"updatedTs"}>CreatedAt</Option>
@@ -38,7 +40,7 @@ const ViewSetting = () => {
             </Select>
           </div>
           <div className="w-full flex flex-row justify-between items-center">
-            <span className="text-sm shrink-0 mr-2">Direction</span>
+            <span className="text-sm shrink-0 mr-2">{t("filter.direction")}</span>
             <Select size="sm" value={direction} onChange={(_, value) => viewStore.setOrder({ direction: value as any })}>
               <Option value={"asc"}>ASC</Option>
               <Option value={"desc"}>DESC</Option>