From a6fcdfce05e7caaaefeb061506e41da5790d4c3a Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 28 Oct 2023 11:39:10 +0800
Subject: [PATCH] chore: update memo comment i18n

---
 web/src/components/Header.tsx                   | 8 ++++++--
 web/src/components/Inbox/MemoCommentMessage.tsx | 8 +++++++-
 web/src/locales/en.json                         | 3 +++
 web/src/pages/DailyReview.tsx                   | 6 ++++--
 web/src/store/v1/user.ts                        | 4 ++++
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 8032d87e..eb410d19 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -50,8 +50,12 @@ const Header = () => {
         layoutStore.setHeaderStatus(true);
       }
     };
-    window.addEventListener("resize", handleWindowResize);
     handleWindowResize();
+    window.addEventListener("resize", handleWindowResize);
+
+    return () => {
+      window.removeEventListener("resize", handleWindowResize);
+    };
   }, [location]);
 
   const homeNavLink: NavLinkItem = {
@@ -111,7 +115,7 @@ const Header = () => {
   };
 
   const navLinks: NavLinkItem[] = user
-    ? [homeNavLink, dailyReviewNavLink, resourcesNavLink, inboxNavLink, exploreNavLink, archivedNavLink, settingNavLink]
+    ? [homeNavLink, dailyReviewNavLink, resourcesNavLink, exploreNavLink, inboxNavLink, archivedNavLink, settingNavLink]
     : [exploreNavLink, signInNavLink];
 
   return (
diff --git a/web/src/components/Inbox/MemoCommentMessage.tsx b/web/src/components/Inbox/MemoCommentMessage.tsx
index 88f8ec36..2d5c9633 100644
--- a/web/src/components/Inbox/MemoCommentMessage.tsx
+++ b/web/src/components/Inbox/MemoCommentMessage.tsx
@@ -5,8 +5,10 @@ import toast from "react-hot-toast";
 import { activityServiceClient } from "@/grpcweb";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import useInboxStore from "@/store/v1/inbox";
+import { extractUsernameFromName } from "@/store/v1/user";
 import { Activity } from "@/types/proto/api/v2/activity_service";
 import { Inbox, Inbox_Status } from "@/types/proto/api/v2/inbox_service";
+import { useTranslate } from "@/utils/i18n";
 import Icon from "../Icon";
 
 interface Props {
@@ -14,6 +16,7 @@ interface Props {
 }
 
 const MemoCommentMessage = ({ inbox }: Props) => {
+  const t = useTranslate();
   const navigateTo = useNavigateTo();
   const inboxStore = useInboxStore();
   const [activity, setActivity] = useState<Activity | undefined>(undefined);
@@ -90,7 +93,10 @@ const MemoCommentMessage = ({ inbox }: Props) => {
           className="text-base leading-tight cursor-pointer text-gray-500 dark:text-gray-400 hover:underline hover:text-blue-600"
           onClick={handleNavigateToMemo}
         >
-          {inbox.sender} has a comment in your memo #{activity?.payload?.memoComment?.relatedMemoId}.
+          {t("inbox.memo-comment", {
+            user: extractUsernameFromName(inbox.sender),
+            memo: `memo#${activity?.payload?.memoComment?.relatedMemoId}`,
+          })}
         </p>
       </div>
     </div>
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
index ad0762fc..a6656eca 100644
--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -369,5 +369,8 @@
     "file-exceeds-upload-limit-of": "File {{file}} exceeds upload limit of {{size}} MiB",
     "updating-setting-failed": "Updating setting failed",
     "password-login-disabled": "Can't remove last identity provider when password login is disabled"
+  },
+  "inbox": {
+    "memo-comment": "{{user}} has a comment on your {{memo}}."
   }
 }
diff --git a/web/src/pages/DailyReview.tsx b/web/src/pages/DailyReview.tsx
index 458a280e..2df1f36f 100644
--- a/web/src/pages/DailyReview.tsx
+++ b/web/src/pages/DailyReview.tsx
@@ -116,10 +116,12 @@ const DailyReview = () => {
                 <MemoResourceListView resourceList={memo.resourceList} />
                 <MemoRelationListView memo={memo} relationList={memo.relationList.filter((relation) => relation.type === "REFERENCE")} />
                 <div className="absolute left-1 sm:left-2 top-3 h-full">
-                  <Icon.Circle className="w-4 h-auto bg-gray-400 text-gray-400 dark:bg-gray-500 dark:text-gray-500 rounded-full" />
                   {index !== dailyMemos.length - 1 && (
-                    <div className="absolute top-2 left-1.5 h-full w-1 bg-gray-400 dark:bg-gray-500 block"></div>
+                    <div className="absolute top-2 left-[7px] h-full w-0.5 bg-gray-400 dark:bg-gray-500 block"></div>
                   )}
+                  <div className="border-4 rounded-full border-white relative dark:border-zinc-700">
+                    <Icon.Circle className="w-2 h-auto bg-gray-400 text-gray-400 dark:bg-gray-500 dark:text-gray-500 rounded-full" />
+                  </div>
                 </div>
               </div>
             ))}
diff --git a/web/src/store/v1/user.ts b/web/src/store/v1/user.ts
index 980890c9..6e04a555 100644
--- a/web/src/store/v1/user.ts
+++ b/web/src/store/v1/user.ts
@@ -57,4 +57,8 @@ const useUserV1Store = create<UserV1Store>()((set, get) => ({
   },
 }));
 
+export const extractUsernameFromName = (name: string) => {
+  return name.split("/")[1];
+};
+
 export default useUserV1Store;