chore: localization improvements (#3213)

* localization improvements

* typo fix

* fix linting error

web/src/components/ActivityCalendar.tsx

@@ -1,6 +1,7 @@
 import { Tooltip } from "@mui/joy";
 import classNames from "classnames";
 import { getNormalizedDateString, getDateWithOffset } from "@/helpers/datetime";
+import { useTranslate } from "@/utils/i18n";
 
 interface Props {
   // Format: 2021-1
@@ -25,6 +26,7 @@ const getCellAdditionalStyles = (count: number, maxCount: number) => {
 };
 
 const ActivityCalendar = (props: Props) => {
+  const t = useTranslate();
   const { month: monthStr, data, onClick } = props;
   const year = new Date(monthStr).getUTCFullYear();
   const month = new Date(monthStr).getUTCMonth() + 1;
@@ -52,7 +54,7 @@ const ActivityCalendar = (props: Props) => {
         );
         const count = data[date] || 0;
         const isToday = new Date().toDateString() === new Date(date).toDateString();
-        const tooltipText = count ? `${count} memos in ${date}` : date;
+        const tooltipText = count ? t("memo.count-memos-in-date", { count: count, date: date }) : date;
         return day ? (
           <Tooltip className="shrink-0" key={`${date}-${index}`} title={tooltipText} placement="top" arrow>
             <div

web/src/components/HomeSidebar/TagsSection.tsx

@@ -93,7 +93,7 @@ const TagsSection = () => {
         <div className="p-2 border rounded-md flex flex-row justify-start items-start gap-1 text-gray-400 dark:text-gray-500">
           <Icon.ThumbsUp />
           <p className="mt-0.5 text-sm leading-snug italic">
-            You can create tags by inputting <code>`#tag`</code>.
+          {t("tag.create-tags-guide")}
           </p>
         </div>
       )}
@@ -130,8 +130,8 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
 
   const handleDeleteTag = async () => {
     showCommonDialog({
-      title: "Delete Tag",
+      title: t("tag.delete-tag"),
-      content: "Are you sure to delete this tag?",
+      content: t("tag.delete-confirm"),
       style: "danger",
       dialogName: "delete-tag-dialog",
       onConfirm: async () => {

web/src/components/Inbox/MemoCommentMessage.tsx

@@ -69,7 +69,7 @@ const MemoCommentMessage = ({ inbox }: Props) => {
       ["status"],
     );
     if (!silence) {
-      toast.success("Archived");
+      toast.success(t("message.archived-successfully"));
     }
   };
 

web/src/components/Inbox/VersionUpdateMessage.tsx

@@ -55,7 +55,7 @@ const VersionUpdateMessage = ({ inbox }: Props) => {
       ["status"],
     );
     if (!silence) {
-      toast.success("Archived");
+      toast.success(t("message.archived-successfully"));
     }
   };
 

web/src/components/MemoActionMenu.tsx

@@ -97,7 +97,7 @@ const MemoActionMenu = (props: Props) => {
       dialogName: "delete-memo-dialog",
       onConfirm: async () => {
         await memoStore.deleteMemo(memo.name);
-        toast.success("Deleted successfully");
+        toast.success(t("message.deleted-successfully"));
         if (isInMemoDetailPage) {
           navigateTo("/");
         }

web/src/components/MemoEditor/ActionButton/AddMemoRelationButton.tsx

@@ -5,6 +5,7 @@ import toast from "react-hot-toast";
 import showCreateMemoRelationDialog from "@/components/CreateMemoRelationDialog";
 import Icon from "@/components/Icon";
 import { MemoRelation_Type } from "@/types/proto/api/v2/memo_relation_service";
+import { useTranslate } from "@/utils/i18n";
 import { EditorRefActions } from "../Editor";
 import { MemoEditorContext } from "../types";
 
@@ -15,6 +16,7 @@ interface Props {
 const AddMemoRelationButton = (props: Props) => {
   const { editorRef } = props;
   const context = useContext(MemoEditorContext);
+  const t = useTranslate();
 
   const handleAddMemoRelationBtnClick = () => {
     showCreateMemoRelationDialog({
@@ -22,7 +24,7 @@ const AddMemoRelationButton = (props: Props) => {
         // If embedded mode is enabled, embed the memo instead of creating a relation.
         if (embedded) {
           if (!editorRef.current) {
-            toast.error("Failed to embed memo");
+            toast.error(t("message.failed-to-embed-memo"));
             return;
           }
 

web/src/components/MemoEditor/ActionButton/TagSelector.tsx

@@ -4,6 +4,7 @@ import useClickAway from "react-use/lib/useClickAway";
 import Icon from "@/components/Icon";
 import OverflowTip from "@/components/kit/OverflowTip";
 import { useTagStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
 import { EditorRefActions } from "../Editor";
 
 interface Props {
@@ -11,6 +12,7 @@ interface Props {
 }
 
 const TagSelector = (props: Props) => {
+  const t = useTranslate();
   const { editorRef } = props;
   const tagStore = useTagStore();
   const [open, setOpen] = useState(false);
@@ -74,7 +76,7 @@ const TagSelector = (props: Props) => {
             </div>
           ) : (
             <p className="italic mx-2" onClick={(e) => e.stopPropagation()}>
-              No tag found
+              {t("tag.no-tag-found")}
             </p>
           )}
         </div>

web/src/components/MemoView.tsx

@@ -138,7 +138,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
             </Link>
           )}
           {props.showPinned && memo.pinned && (
-            <Tooltip title={"Pinned"} placement="top">
+            <Tooltip title={t("common.pinned")} placement="top">
               <Icon.Bookmark className="w-4 h-auto text-amber-500" />
             </Tooltip>
           )}

web/src/locales/en.json

@@ -21,6 +21,7 @@
     "language": "Language",
     "version": "Version",
     "pin": "Pin",
+    "pinned": "Pinned",
     "unpin": "Unpin",
     "edit": "Edit",
     "restore": "Restore",
@@ -106,7 +107,8 @@
       "no-comment": "No comment"
     },
     "show-more": "Show more",
-    "wrapping": "Wrapping"
+    "wrapping": "Wrapping",
+    "count-memos-in-date": "{{count}} memos in {{date}}"
   },
   "reference": {
     "add-references": "Add references",
@@ -153,13 +155,17 @@
   "tag": {
     "tip-text": "Input `#tag` to create",
     "create-tag": "Create Tag",
+    "delete-tag": "Delete Tag",
+    "delete-confirm": "Are you sure to delete this tag?",
     "all-tags": "All Tags",
     "tag-name": "TAG_NAME",
     "invalid-tag-name": "Invalid tag name",
     "tag-suggestions": "Tag suggestions",
+    "no-tag-found": "No tag found",
     "show": "Show",
     "hide": "Hide",
-    "save-all": "Save all"
+    "save-all": "Save all",
+    "create-tags-guide": "You can create tags by inputting `#tag`."
   },
   "timeline": {
     "title": "Timeline"
@@ -318,11 +324,13 @@
     "memos-ready": "all memos are ready",
     "resource-ready": "all resource are ready",
     "archived-successfully": "Archived successfully",
+    "deleted-successfully": "Deleted successfully",
     "restored-successfully": "Restored successfully",
     "memo-updated-datetime": "Memo created datetime changed.",
     "invalid-created-datetime": "Invalid created datetime.",
     "change-memo-created-time": "Change memo created time",
     "memo-not-found": "Memo not found.",
+    "failed-to-embed-memo": "Failed to embed memo",
     "fill-all": "Please fill in all fields.",
     "password-not-match": "Passwords do not match.",
     "new-password-not-match": "New passwords do not match.",