From 9a8a1d017e06afe289362fd3b3515abcb5a522fa Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 2 Mar 2024 11:29:21 +0800
Subject: [PATCH] chore: add comments icon

---
 web/src/components/MemoActionMenu.tsx |  4 +++-
 web/src/components/MemoView.tsx       | 20 ++++++++++++++++----
 web/src/pages/MemoDetail.tsx          |  3 ++-
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/web/src/components/MemoActionMenu.tsx b/web/src/components/MemoActionMenu.tsx
index dc3313148..c91e8f050 100644
--- a/web/src/components/MemoActionMenu.tsx
+++ b/web/src/components/MemoActionMenu.tsx
@@ -1,4 +1,5 @@
 import { Divider, Dropdown, Menu, MenuButton, MenuItem } from "@mui/joy";
+import classNames from "classnames";
 import copy from "copy-to-clipboard";
 import toast from "react-hot-toast";
 import Icon from "@/components/Icon";
@@ -12,6 +13,7 @@ import showShareMemoDialog from "./ShareMemoDialog";
 
 interface Props {
   memo: Memo;
+  className?: string;
   hiddenActions?: ("edit" | "archive" | "delete" | "share" | "pin")[];
   onArchived?: () => void;
   onDeleted?: () => void;
@@ -94,7 +96,7 @@ const MemoActionMenu = (props: Props) => {
   return (
     <Dropdown>
       <MenuButton slots={{ root: "div" }}>
-        <span className="h-7 w-7 flex justify-center items-center rounded-full hover:opacity-70">
+        <span className={classNames("flex justify-center items-center rounded-full hover:opacity-70", props.className)}>
           <Icon.MoreVertical className="w-4 h-4 mx-auto text-gray-500 dark:text-gray-400" />
         </span>
       </MenuButton>
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index 1fedb2ee0..a046fb8f7 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -42,7 +42,8 @@ const MemoView: React.FC<Props> = (props: Props) => {
   const [displayTime, setDisplayTime] = useState<string>(getRelativeTimeString(getTimeStampByDate(memo.displayTime)));
   const [creator, setCreator] = useState(userStore.getUserByUsername(extractUsernameFromName(memo.creator)));
   const memoContainerRef = useRef<HTMLDivElement>(null);
-  const referenceRelations = memo.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
+  const referencedMemos = memo.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
+  const commentAmount = memo.relations.filter((relation) => relation.type === MemoRelation_Type.COMMENT).length;
   const readonly = memo.creator !== user?.name;
 
   useEffect(() => {
@@ -124,8 +125,8 @@ const MemoView: React.FC<Props> = (props: Props) => {
             </>
           )}
         </div>
-        <div className="flex flex-row justify-end items-center select-none">
-          <div className="w-auto invisible group-hover:visible flex flex-row justify-between items-center">
+        <div className="flex flex-row justify-end items-center select-none gap-1">
+          <div className="w-auto invisible group-hover:visible flex flex-row justify-between items-center gap-1">
             {props.showVisibility && memo.visibility !== Visibility.PRIVATE && (
               <Tooltip title={t(`memo.visibility.${convertVisibilityToString(memo.visibility).toLowerCase()}` as any)} placement="top">
                 <span className="h-7 w-7 flex justify-center items-center hover:opacity-70">
@@ -135,6 +136,17 @@ const MemoView: React.FC<Props> = (props: Props) => {
             )}
             {currentUser && <ReactionSelector className="border-none" memo={memo} />}
           </div>
+          <Link
+            className={classNames(
+              "flex flex-row justify-start items-center hover:opacity-70",
+              commentAmount === 0 && "invisible group-hover:visible",
+            )}
+            to={`/m/${memo.name}`}
+            unstable_viewTransition
+          >
+            <Icon.MessageCircleMore className="w-4 h-4 mx-auto text-gray-500 dark:text-gray-400" />
+            {commentAmount > 0 && <span className="text-xs text-gray-500 dark:text-gray-400">{commentAmount}</span>}
+          </Link>
           {!readonly && <MemoActionMenu memo={memo} hiddenActions={props.showPinned ? [] : ["pin"]} />}
         </div>
       </div>
@@ -146,7 +158,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
         onClick={handleMemoContentClick}
       />
       <MemoResourceListView resources={memo.resources} />
-      <MemoRelationListView memo={memo} relations={referenceRelations} />
+      <MemoRelationListView memo={memo} relations={referencedMemos} />
       <MemoReactionistView memo={memo} reactions={memo.reactions} />
     </div>
   );
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index 77bedf3bb..ad73605c2 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -155,7 +155,7 @@ const MemoDetail = () => {
           <MemoContent key={`${memo.id}-${memo.updateTime}`} memoId={memo.id} content={memo.content} readonly={readonly} />
           <MemoResourceListView resources={memo.resources} />
           <MemoRelationListView memo={memo} relations={referenceRelations} />
-          <div className="w-full mt-3 flex flex-row justify-between items-center gap-2">
+          <div className="w-full mt-3 select-none flex flex-row justify-between items-center gap-2">
             <div className="flex flex-row justify-start items-center">
               {!readonly && (
                 <Select
@@ -197,6 +197,7 @@ const MemoDetail = () => {
               </Tooltip>
               {!readonly && (
                 <MemoActionMenu
+                  className="ml-1"
                   memo={memo}
                   hiddenActions={["pin", "edit", "share"]}
                   onArchived={handleMemoArchived}