feat: add i18n for visibility

web/src/components/CreateShortcutDialog.tsx

@@ -1,5 +1,6 @@
 import { Button, Input, Modal, ModalDialog, Radio, RadioGroup } from "@mui/joy";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { toast } from "react-hot-toast";
 import { shortcutService } from "../services";
 import useLoading from "../hooks/useLoading";
@@ -15,8 +16,11 @@ interface State {
   shortcutCreate: ShortcutCreate;
 }
 
+const visibilities: Visibility[] = ["PRIVATE", "WORKSPACE", "PUBLIC"];
+
 const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
   const { onClose, onConfirm, shortcutId } = props;
+  const { t } = useTranslation();
   const [state, setState] = useState<State>({
     shortcutCreate: {
       name: "",
@@ -172,9 +176,9 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
             </span>
             <div className="w-full flex flex-row justify-start items-center text-base">
               <RadioGroup orientation="horizontal" value={state.shortcutCreate.visibility} onChange={handleVisibilityInputChange}>
-                <Radio value="PRIVATE" label="Private" />
-                <Radio value="WORKSPACE" label="Workspace" />
-                <Radio value="PUBLIC" label="Public" />
+                {visibilities.map((visibility) => (
+                  <Radio key={visibility} value={visibility} label={t(`shortcut.visibility.${visibility.toLowerCase()}.self`)} />
+                ))}
               </RadioGroup>
             </div>
           </div>

web/src/components/EditUserinfoDialog.tsx

@@ -3,8 +3,8 @@ import { useState } from "react";
 import { toast } from "react-hot-toast";
 import useLoading from "../hooks/useLoading";
 import { userService } from "../services";
-import Icon from "./Icon";
 import { useAppSelector } from "../stores";
+import Icon from "./Icon";
 
 interface Props {
   onClose: () => void;

web/src/components/ShortcutView.tsx

@@ -1,5 +1,6 @@
 import { Tooltip } from "@mui/joy";
 import copy from "copy-to-clipboard";
+import { useTranslation } from "react-i18next";
 import toast from "react-hot-toast";
 import { shortcutService } from "../services";
 import { useAppSelector } from "../stores";
@@ -16,6 +17,7 @@ interface Props {
 
 const ShortcutView = (props: Props) => {
   const { shortcut, handleEdit } = props;
+  const { t } = useTranslation();
   const user = useAppSelector((state) => state.user.user as User);
   const havePermission = user.role === "ADMIN" || shortcut.creatorId === user.id;
 
@@ -100,10 +102,10 @@ const ShortcutView = (props: Props) => {
             {shortcut.creator.nickname}
           </div>
         </Tooltip>
-        <Tooltip title="View count" variant="solid" placement="top" arrow>
+        <Tooltip title={t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)} variant="solid" placement="top" arrow>
           <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border rounded-full text-gray-500 text-sm">
             <VisibilityIcon className="w-4 h-auto mr-1" visibility={shortcut.visibility} />
-            {shortcut.visibility}
+            {t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.self`)}
           </div>
         </Tooltip>
         <Tooltip title="View count" variant="solid" placement="top" arrow>