chore: update memo relations view

web/src/components/Memo.tsx

@@ -44,6 +44,10 @@ const Memo: React.FC<Props> = (props: Props) => {
   const memoContainerRef = useRef<HTMLDivElement>(null);
   const readonly = memo.creatorUsername !== user?.username;
   const creator = userV1Store.getUserByUsername(memo.creatorUsername);
+  const referenceRelations = memo.relationList.filter(
+    (relation) => relation.memoId === memo.id && relation.relatedMemoId !== memo.id && relation.type === "REFERENCE"
+  );
+  const commentRelations = memo.relationList.filter((relation) => relation.relatedMemoId === memo.id && relation.type === "COMMENT");
 
   // Prepare memo creator.
   useEffect(() => {
@@ -89,7 +93,7 @@ const Memo: React.FC<Props> = (props: Props) => {
 
   if (!shouldRender) {
     // Render a placeholder to occupy the space.
-    return <div className={`memo-wrapper min-h-[128px] ${"memos-" + memo.id}`} ref={memoContainerRef}></div>;
+    return <div className={`w-full h-32 !bg-transparent ${"memos-" + memo.id}`} ref={memoContainerRef}></div>;
   }
 
   const handleGotoMemoDetailPage = (event: React.MouseEvent<HTMLDivElement>) => {
@@ -271,7 +275,7 @@ const Memo: React.FC<Props> = (props: Props) => {
         {memo.parent && props.showCommentEntry && (
           <div>
             <Link to={`/m/${memo.parent.id}`}>
-              <span className="text-xs text-gray-400 opacity-80 dark:text-gray-500">This is a comment of #{memo.parent.id}</span>
+              <span className="text-xs text-gray-400 opacity-80">This is a comment of #{memo.parent.id}</span>
             </Link>
           </div>
         )}
@@ -281,7 +285,7 @@ const Memo: React.FC<Props> = (props: Props) => {
           onMemoContentDoubleClick={handleMemoContentDoubleClick}
         />
         <MemoResourceListView resourceList={memo.resourceList} />
-        <MemoRelationListView relationList={memo.relationList} />
+        <MemoRelationListView relationList={referenceRelations} />
         <div className="mt-4 w-full flex flex-row justify-between items-center gap-2">
           <div className="flex flex-row justify-start items-center">
             {creator && (
@@ -306,6 +310,11 @@ const Memo: React.FC<Props> = (props: Props) => {
                     </Tooltip>
                   </>
                 )}
+                <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
+                <Link className="flex flex-row justify-start items-center" to={`/m/${memo.id}#comments`}>
+                  <Icon.MessageCircle className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
+                  <span className="text-sm text-gray-500 dark:text-gray-400 ml-1">{commentRelations.length}</span>
+                </Link>
               </>
             )}
           </div>

web/src/components/MemoEditor/index.tsx

@@ -61,6 +61,11 @@ const MemoEditor = (props: Props) => {
   const editorRef = useRef<EditorRefActions>(null);
   const user = userStore.state.user as User;
   const setting = user.setting;
+  const referenceRelations = memoId
+    ? state.relationList.filter(
+        (relation) => relation.memoId === memoId && relation.relatedMemoId !== memoId && relation.type === "REFERENCE"
+      )
+    : state.relationList.filter((relation) => relation.type === "REFERENCE");
 
   useEffect(() => {
     editorRef.current?.setContent(contentCache || "");
@@ -406,7 +411,7 @@ const MemoEditor = (props: Props) => {
         </div>
       </div>
       <ResourceListView resourceList={state.resourceList} setResourceList={handleSetResourceList} />
-      <RelationListView relationList={state.relationList} setRelationList={handleSetRelationList} />
+      <RelationListView relationList={referenceRelations} setRelationList={handleSetRelationList} />
       <div className="editor-footer-container">
         <MemoVisibilitySelector value={state.memoVisibility} onChange={handleMemoVisibilityChange} />
         <div className="buttons-container">

web/src/components/MemoRelationListView.tsx

@@ -12,9 +12,7 @@ const MemoRelationListView = (props: Props) => {
 
   useEffect(() => {
     (async () => {
-      // Only show reference relations.
+      const memoList = await Promise.all(props.relationList.map((relation) => memoCacheStore.getOrFetchMemoById(relation.relatedMemoId)));
-      const relationList = props.relationList.filter((relation) => relation.type === "REFERENCE");
-      const memoList = await Promise.all(relationList.map((relation) => memoCacheStore.getOrFetchMemoById(relation.relatedMemoId)));
       setRelatedMemoList(memoList);
     })();
   }, [props.relationList]);

web/src/pages/MemoDetail.tsx

@@ -38,6 +38,10 @@ const MemoDetail = () => {
   const memoId = Number(params.memoId);
   const memo = memoStore.state.memos.find((memo) => memo.id === memoId);
   const allowEdit = memo?.creatorUsername === currentUser?.username;
+  const referenceRelations =
+    memo?.relationList.filter(
+      (relation) => relation.memoId === memo?.id && relation.relatedMemoId !== memo?.id && relation.type === "REFERENCE"
+    ) || [];
 
   // Prepare memo.
   useEffect(() => {
@@ -114,9 +118,16 @@ const MemoDetail = () => {
             <div className="w-full mb-4 flex flex-row justify-start items-center mr-1">
               <span className="text-gray-400 select-none">{getDateTimeString(memo.displayTs)}</span>
             </div>
+            {memo.parent && (
+              <div className="mb-2">
+                <Link to={`/m/${memo.parent.id}`}>
+                  <span className="text-xs text-gray-400 opacity-80">This is a comment of #{memo.parent.id}</span>
+                </Link>
+              </div>
+            )}
             <MemoContent content={memo.content} />
             <MemoResourceListView resourceList={memo.resourceList} />
-            <MemoRelationListView relationList={memo.relationList} />
+            <MemoRelationListView relationList={referenceRelations} />
             <div className="w-full mt-4 flex flex-col sm:flex-row justify-start sm:justify-between sm:items-center gap-2">
               <div className="flex flex-row justify-start items-center">
                 <Tooltip title={"The identifier of memo"} placement="top">
@@ -174,15 +185,24 @@ const MemoDetail = () => {
         </div>
         <div className="py-6 w-full border-t dark:border-t-zinc-700">
           <div className="relative mx-auto flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 gap-y-1">
-            {comments.map((comment) => (
+            {comments.length === 0 ? (
-              <Memo key={comment.id} memo={comment} />
-            ))}
-            {comments.length === 0 && (
               <div className="w-full flex flex-col justify-center items-center py-6">
                 <Icon.MessageCircle strokeWidth={1} className="w-8 h-auto text-gray-400" />
                 <p className="text-gray-400 italic text-sm">No comments</p>
               </div>
+            ) : (
+              <>
+                <div className="w-full flex flex-row justify-start items-center mb-2">
+                  <Icon.MessageCircle strokeWidth={1} className="w-5 h-auto text-gray-400 mr-1" />
+                  <span className="text-gray-400 text-sm">Comments</span>
+                  <span className="text-gray-400 text-sm">({comments.length})</span>
+                </div>
+                {comments.map((comment) => (
+                  <Memo key={comment.id} memo={comment} />
+                ))}
+              </>
             )}
+
             {/* Only show comment editor when user login */}
             {currentUser && (
               <>