chore: update memo relation style

web/src/components/CreateMemoRelationDialog.tsx

@@ -96,13 +96,12 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
             <div className="w-full flex flex-row justify-start items-start flex-wrap gap-2 mt-1">
               {memoList.map((memo) => (
                 <div
-                  className="max-w-[50%] text-sm px-3 py-1 flex flex-row justify-start items-center border rounded-md cursor-pointer truncate opacity-80 dark:text-gray-300 dark:border-zinc-700 hover:opacity-60 hover:line-through"
-                  key={memo.id}
+                  className="max-w-[50%] text-sm px-2 py-1 flex flex-row justify-start items-center border rounded-md cursor-pointer truncate opacity-80 text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:opacity-60 hover:line-through"
+                  key={memo.name}
                   onClick={() => handleDeleteMemoRelation(memo)}
                 >
-                  <span className="opacity-60 shrink-0">#{memo.id}</span>
-                  <span className="mx-1 max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span>
-                  <Icon.X className="opacity-80 w-4 h-auto shrink-0 ml-1" />
+                  <span className="max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span>
+                  <Icon.X className="opacity-60 w-4 h-auto shrink-0 ml-1" />
                 </div>
               ))}
             </div>

web/src/components/MemoEditor/RelationListView.tsx

@@ -37,13 +37,12 @@ const RelationListView = (props: Props) => {
           {referencingMemoList.map((memo) => {
             return (
               <div
-                key={memo.id}
+                key={memo.name}
                 className="w-auto max-w-xs overflow-hidden flex flex-row justify-start items-center bg-zinc-100 dark:bg-zinc-900 hover:opacity-80 rounded-md text-sm p-1 px-2 text-gray-500 dark:text-gray-400 cursor-pointer hover:line-through"
                 onClick={() => handleDeleteRelation(memo)}
               >
                 <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>
+                <span className="mx-1 max-w-full text-ellipsis whitespace-nowrap overflow-hidden">{memo.content}</span>
                 <Icon.X className="w-4 h-auto cursor-pointer opacity-60 hover:opacity-100" />
               </div>
             );

web/src/components/MemoRelationListView.tsx

@@ -40,7 +40,7 @@ const MemoRelationListView = (props: Props) => {
         <div className="w-full mt-2 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%]">
+              <div key={memo.name} className="block w-auto max-w-[50%]">
                 <Link
                   className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:shadow hover:opacity-80"
                   to={`/m/${memo.name}`}
@@ -49,8 +49,7 @@ const MemoRelationListView = (props: Props) => {
                   <Tooltip title="Reference" placement="top">
                     <Icon.Link className="w-4 h-auto shrink-0 opacity-70" />
                   </Tooltip>
-                  <span className="opacity-70 mx-1">#{memo.id}</span>
-                  <span className="truncate">{memo.content}</span>
+                  <span className="truncate ml-1">{memo.content}</span>
                 </Link>
               </div>
             );
@@ -61,17 +60,16 @@ const MemoRelationListView = (props: Props) => {
         <div className="w-full mt-2 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%]">
+              <div key={memo.name} className="block w-auto max-w-[50%]">
                 <Link
-                  className="px-2 border rounded-md 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"
+                  className="px-2 border rounded-md w-auto text-sm leading-6 flex flex-row justify-start items-center flex-nowrap text-gray-600 dark:text-gray-400 dark:border-zinc-700 dark:bg-zinc-900 hover:shadow hover:opacity-80"
                   to={`/m/${memo.name}`}
                   unstable_viewTransition
                 >
                   <Tooltip title="Backlink" placement="top">
                     <Icon.Milestone className="w-4 h-auto shrink-0 opacity-70" />
                   </Tooltip>
-                  <span className="opacity-70 mx-1">#{memo.id}</span>
-                  <span className="truncate">{memo.content}</span>
+                  <span className="truncate ml-1">{memo.content}</span>
                 </Link>
               </div>
             );

web/src/components/MemoView.tsx

@@ -150,7 +150,7 @@ const MemoView: React.FC<Props> = (props: Props) => {
   };
 
   const handleCopyMemoId = () => {
-    copy(String(memo.id));
+    copy(memo.name);
     toast.success("Copied to clipboard!");
   };
 
@@ -246,10 +246,10 @@ const MemoView: React.FC<Props> = (props: Props) => {
                     {t("common.delete")}
                   </span>
                   <Divider className="!my-1" />
-                  <div className="w-full px-3 text-xs text-gray-400">
-                    <span className="cursor-pointer" onClick={handleCopyMemoId}>
-                      ID: <span className="font-mono">{memo.id}</span>
-                    </span>
+                  <div className="w-full pl-3 pr-2 text-xs text-gray-400">
+                    <div className="font-mono max-w-20 cursor-pointer truncate" onClick={handleCopyMemoId}>
+                      ID: {memo.name}
+                    </div>
                   </div>
                 </div>
               </div>