chore: add memo relation list

web/src/components/Memo.tsx

@@ -44,9 +44,7 @@ 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 referenceRelations = memo.relationList.filter((relation) => relation.type === "REFERENCE");
   const commentRelations = memo.relationList.filter((relation) => relation.relatedMemoId === memo.id && relation.type === "COMMENT");
 
   // Prepare memo creator.
@@ -286,7 +284,7 @@ const Memo: React.FC<Props> = (props: Props) => {
           onMemoContentDoubleClick={handleMemoContentDoubleClick}
         />
         <MemoResourceListView resourceList={memo.resourceList} />
-        <MemoRelationListView relationList={referenceRelations} />
+        <MemoRelationListView memo={memo} 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 && (

web/src/components/MemoEditor/RelationListView.tsx

@@ -7,51 +7,44 @@ interface Props {
   setRelationList: (relationList: MemoRelation[]) => void;
 }
 
-interface FormatedMemoRelation extends MemoRelation {
-  relatedMemo: Memo;
-}
-
 const RelationListView = (props: Props) => {
   const { relationList, setRelationList } = props;
   const memoCacheStore = useMemoCacheStore();
-  const [formatedMemoRelationList, setFormatedMemoRelationList] = useState<FormatedMemoRelation[]>([]);
+  const [referencingMemoList, setReferencingMemoList] = useState<Memo[]>([]);
 
   useEffect(() => {
     (async () => {
       const requests = relationList
         .filter((relation) => relation.type === "REFERENCE")
         .map(async (relation) => {
-          const relatedMemo = await memoCacheStore.getOrFetchMemoById(relation.relatedMemoId);
-          return {
-            ...relation,
-            relatedMemo,
-          };
+          return await memoCacheStore.getOrFetchMemoById(relation.relatedMemoId);
         });
       const list = await Promise.all(requests);
-      setFormatedMemoRelationList(list);
+      setReferencingMemoList(list);
     })();
   }, [relationList]);
 
-  const handleDeleteRelation = async (memoRelation: FormatedMemoRelation) => {
-    const newRelationList = relationList.filter((relation) => relation.relatedMemoId !== memoRelation.relatedMemoId);
-    setRelationList(newRelationList);
+  const handleDeleteRelation = async (memo: Memo) => {
+    setRelationList(relationList.filter((relation) => relation.relatedMemoId !== memo.id));
   };
 
+  console.log("referencingMemoList", referencingMemoList);
+
   return (
     <>
-      {formatedMemoRelationList.length > 0 && (
+      {referencingMemoList.length > 0 && (
         <div className="w-full flex flex-row gap-2 mt-2 flex-wrap">
-          {formatedMemoRelationList.map((memoRelation) => {
+          {referencingMemoList.map((memo) => {
             return (
               <div
-                key={memoRelation.relatedMemoId}
-                className="w-auto max-w-[50%] overflow-hidden flex flex-row justify-start items-center bg-gray-100 dark:bg-zinc-800 hover:opacity-80 rounded text-sm p-1 px-2 text-gray-500 cursor-pointer"
+                key={memo.id}
+                className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-gray-100 dark:bg-zinc-800 hover:opacity-80 rounded text-sm p-1 px-2 text-gray-500 cursor-pointer hover:line-through"
+                onClick={() => handleDeleteRelation(memo)}
               >
-                <Icon.Link className="w-4 h-auto shrink-0" />
-                <span className="mx-1 max-w-full text-ellipsis font-mono whitespace-nowrap overflow-hidden">
-                  {memoRelation.relatedMemo.content}
-                </span>
-                <Icon.X className="w-4 h-auto hover:opacity-80 shrink-0" onClick={() => handleDeleteRelation(memoRelation)} />
+                <Icon.Link className="w-4 h-auto shrink-0 opacity-80" />
+                <span className="px-1 shrink-0 opacity-80">#{memo.id}</span>
+                <span className="max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span>
+                <Icon.X className="w-4 h-auto hover:opacity-80 shrink-0 ml-1" />
               </div>
             );
           })}

web/src/components/MemoRelationListView.tsx

@@ -1,44 +1,81 @@
+import { Tooltip } from "@mui/joy";
 import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import { useMemoCacheStore } from "@/store/v1";
 import Icon from "./Icon";
 
 interface Props {
+  memo: Memo;
   relationList: MemoRelation[];
 }
 
 const MemoRelationListView = (props: Props) => {
+  const { memo, relationList } = props;
   const memoCacheStore = useMemoCacheStore();
-  const [relatedMemoList, setRelatedMemoList] = useState<Memo[]>([]);
+  const [referencingMemoList, setReferencingMemoList] = useState<Memo[]>([]);
+  const [referencedMemoList, setReferencedMemoList] = useState<Memo[]>([]);
 
   useEffect(() => {
     (async () => {
-      const memoList = await Promise.all(props.relationList.map((relation) => memoCacheStore.getOrFetchMemoById(relation.relatedMemoId)));
-      setRelatedMemoList(memoList);
+      const referencingMemoList = await Promise.all(
+        relationList
+          .filter((relation) => relation.memoId === memo.id && relation.relatedMemoId !== memo.id)
+          .map((relation) => memoCacheStore.getOrFetchMemoById(relation.relatedMemoId))
+      );
+      setReferencingMemoList(referencingMemoList);
+      const referencedMemoList = await Promise.all(
+        relationList
+          .filter((relation) => relation.memoId !== memo.id && relation.relatedMemoId === memo.id)
+          .map((relation) => memoCacheStore.getOrFetchMemoById(relation.memoId))
+      );
+      setReferencedMemoList(referencedMemoList);
     })();
-  }, [props.relationList]);
-
-  const handleGotoMemoDetail = (memo: Memo) => {
-    window.open(`/m/${memo.id}`, "_blank");
-  };
+  }, [memo, relationList]);
 
   return (
     <>
-      {relatedMemoList.length > 0 && (
-        <div className="w-full max-w-full overflow-hidden grid grid-cols-1 gap-1 mt-2">
-          {relatedMemoList.map((memo) => {
-            return (
-              <div
-                key={memo.id}
-                className="w-auto flex flex-row justify-start items-center hover:bg-gray-100 dark:hover:bg-zinc-800 rounded text-sm p-1 text-gray-500 dark:text-gray-400 cursor-pointer"
-                onClick={() => handleGotoMemoDetail(memo)}
-              >
-                <div className="w-5 h-5 flex justify-center items-center shrink-0 bg-gray-100 dark:bg-zinc-800 rounded-full">
-                  <Icon.Link className="w-3 h-auto" />
+      {referencingMemoList.length > 0 && (
+        <div className="w-full mt-2 flex flex-row justify-start items-start">
+          <Tooltip title="References" placement="top">
+            <Icon.Link className="w-4 h-auto shrink-0 opacity-70 mt-1.5 mr-1" />
+          </Tooltip>
+          <div className="w-auto max-w-[calc(100%-2rem)] flex flex-row justify-start items-center flex-wrap gap-2">
+            {referencingMemoList.map((memo) => {
+              return (
+                <div key={memo.id} className="block w-auto max-w-[50%]">
+                  <Link
+                    className="px-2 border rounded-full w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80"
+                    to={`/m/${memo.id}`}
+                  >
+                    <span className="opacity-70 mr-1">#{memo.id}</span>
+                    <span className="truncate">{memo.content}</span>
+                  </Link>
                 </div>
-                <span className="mx-1 w-auto truncate">{memo.content}</span>
-              </div>
-            );
-          })}
+              );
+            })}
+          </div>
+        </div>
+      )}
+      {referencedMemoList.length > 0 && (
+        <div className="w-full mt-2 flex flex-row justify-start items-start">
+          <Tooltip title="Referenced" placement="top">
+            <Icon.Milestone className="w-4 h-auto shrink-0 opacity-70 mt-1.5 mr-1" />
+          </Tooltip>
+          <div className="grow w-auto max-w-[calc(100%-2rem)] flex flex-row justify-start items-center flex-wrap gap-2">
+            {referencedMemoList.map((memo) => {
+              return (
+                <div key={memo.id} className="block w-auto max-w-[50%]">
+                  <Link
+                    className="px-2 border rounded-full w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-300 dark:border-gray-600 hover:shadow hover:opacity-80"
+                    to={`/m/${memo.id}`}
+                  >
+                    <span className="opacity-70 mr-1">#{memo.id}</span>
+                    <span className="truncate">{memo.content}</span>
+                  </Link>
+                </div>
+              );
+            })}
+          </div>
         </div>
       )}
     </>

web/src/components/MemoResourceListView.tsx

@@ -78,7 +78,7 @@ const MemoResourceListView: React.FC<Props> = (props: Props) => {
 
       <div className={`w-full flex flex-col justify-start items-start ${className || ""}`}>
         {videoResourceList.length > 0 && (
-          <div className="w-full grid grid-cols-2 sm:grid-cols-3 gap-2 mt-2wrapper">
+          <div className="w-full grid grid-cols-2 sm:grid-cols-3 gap-2 mt-2">
             {videoResourceList.map((resource) => {
               const url = getResourceUrl(resource);
               return (

web/src/pages/MemoDetail.tsx

@@ -36,10 +36,7 @@ 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"
-    ) || [];
+  const referenceRelations = memo?.relationList.filter((relation) => relation.type === "REFERENCE") || [];
   const commentRelations = memo?.relationList.filter((relation) => relation.relatedMemoId === memo.id && relation.type === "COMMENT") || [];
   const comments = commentRelations
     .map((relation) => memoStore.state.memos.find((memo) => memo.id === relation.memoId))
@@ -113,9 +110,9 @@ const MemoDetail = () => {
           </div>
           <div className="relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 pb-6">
             {memo.parent && (
-              <div className="w-full mb-4">
+              <div className="w-auto mb-4">
                 <Link
-                  className="px-3 py-1 border rounded-full max-w-xs w-full text-sm flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-gray-500 hover:shadow hover:opacity-80"
+                  className="px-3 py-1 border rounded-full max-w-xs w-auto text-sm flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-gray-500 hover:shadow hover:opacity-80"
                   to={`/m/${memo.parent.id}`}
                 >
                   <Icon.ArrowUpLeftFromCircle className="w-4 h-auto shrink-0 opacity-60" />
@@ -129,7 +126,7 @@ const MemoDetail = () => {
             </div>
             <MemoContent content={memo.content} />
             <MemoResourceListView resourceList={memo.resourceList} />
-            <MemoRelationListView relationList={referenceRelations} />
+            <MemoRelationListView memo={memo} 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={"Identifier"} placement="top">