chore: update memo editor dialog

web/src/components/CreateMemoRelationDialog.tsx

@@ -75,7 +75,7 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
   return (
     <>
       <div className="dialog-header-container">
-        <p className="title-text">{"Relations"}</p>
+        <p className="title-text">{"Add references"}</p>
         <button className="btn close-btn" onClick={() => destroy()}>
           <Icon.X />
         </button>
@@ -84,24 +84,25 @@ const CreateMemoRelationDialog: React.FC<Props> = (props: Props) => {
         <Input
           className="mb-2"
           size="md"
-          placeholder={"Memo ID. e.g. 286"}
+          placeholder={"Input memo ID. e.g. 26"}
           value={memoId}
           onChange={handleMemoIdChanged}
           onKeyDown={handleMemoIdInputKeyDown}
           fullWidth
-          endDecorator={<Icon.Check onClick={handleSaveBtnClick} className="w-4 h-auto cursor-pointer hover:opacity-80" />}
+          endDecorator={<Icon.PlusCircle onClick={handleSaveBtnClick} className="w-4 h-auto cursor-pointer hover:opacity-80" />}
         />
         {memoList.length > 0 && (
           <>
-            <div className="w-full flex flex-row justify-start items-start flex-wrap gap-x-2 gap-y-1">
+            <div className="w-full flex flex-row justify-start items-start flex-wrap gap-2 mt-1">
               {memoList.map((memo) => (
                 <div
-                  className="max-w-[120px] text-sm mr-2 mt-1 cursor-pointer truncate opacity-80 dark:text-gray-300 hover:opacity-60 hover:line-through"
+                  className="max-w-[50%] text-sm px-3 py-1 flex flex-row justify-start items-center border rounded-full cursor-pointer truncate opacity-80 dark:text-gray-300 hover:opacity-60 hover:line-through"
                   key={memo.id}
                   onClick={() => handleDeleteMemoRelation(memo)}
                 >
-                  <span className="font-mono mr-1">#{memo.id}</span>
+                  <span className="opacity-60 shrink-0">#{memo.id}</span>
-                  <span className="opacity-80">{memo.content}</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" />
                 </div>
               ))}
             </div>

web/src/components/MemoEditor/MemoEditorDialog.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from "react";
-import { useTagStore } from "@/store/module";
+import { useGlobalStore, useTagStore } from "@/store/module";
-import { useTranslate } from "@/utils/i18n";
 import MemoEditor from ".";
 import { generateDialog } from "../Dialog";
 import Icon from "../Icon";
@@ -11,8 +10,9 @@ interface Props extends DialogProps {
 }
 
 const MemoEditorDialog: React.FC<Props> = ({ memoId, relationList, destroy }: Props) => {
-  const t = useTranslate();
+  const globalStore = useGlobalStore();
   const tagStore = useTagStore();
+  const { systemStatus } = globalStore.state;
 
   useEffect(() => {
     tagStore.fetchTags();
@@ -25,7 +25,10 @@ const MemoEditorDialog: React.FC<Props> = ({ memoId, relationList, destroy }: Pr
   return (
     <>
       <div className="dialog-header-container">
-        <p className="title-text flex items-center">{t("amount-text.memo")}</p>
+        <div className="flex flex-row justify-start items-center">
+          <img className="w-5 h-auto rounded-full shadow" src={systemStatus.customizedProfile.logoUrl} alt="" />
+          <p className="ml-1 text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
+        </div>
         <button className="btn close-btn" onClick={handleCloseBtnClick}>
           <Icon.X />
         </button>

web/src/components/MemoEditor/index.tsx

@@ -24,6 +24,7 @@ const emptyOlReg = /^(\d+)\. $/;
 
 interface Props {
   className?: string;
+  editorClassName?: string;
   cacheKey?: string;
   memoId?: MemoId;
   relationList?: MemoRelation[];
@@ -39,7 +40,7 @@ interface State {
 }
 
 const MemoEditor = (props: Props) => {
-  const { className, cacheKey, memoId, onConfirm } = props;
+  const { className, editorClassName, cacheKey, memoId, onConfirm } = props;
   const { i18n } = useTranslation();
   const t = useTranslate();
   const [contentCache, setContentCache] = useLocalStorage<string>(`memo-editor-${cacheKey}`, "");
@@ -396,7 +397,7 @@ const MemoEditor = (props: Props) => {
 
   const editorConfig = useMemo(
     () => ({
-      className: "",
+      className: editorClassName ?? "",
       initialContent: "",
       placeholder: t("editor.placeholder"),
       onContentChange: handleContentChange,

web/src/components/MemoRelationListView.tsx

@@ -35,11 +35,7 @@ const MemoRelationListView = (props: Props) => {
   return (
     <>
       {referencingMemoList.length > 0 && (
-        <div className="w-full mt-2 flex flex-row justify-start items-start">
+        <div className="w-full mt-2 flex flex-row justify-start items-center flex-wrap gap-2">
-          <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%]">
@@ -47,21 +43,19 @@ const MemoRelationListView = (props: Props) => {
                   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>
+                  <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>
                 </Link>
               </div>
             );
           })}
         </div>
-        </div>
       )}
       {referencedMemoList.length > 0 && (
-        <div className="w-full mt-2 flex flex-row justify-start items-start">
+        <div className="w-full mt-2 flex flex-row justify-start items-center flex-wrap gap-2">
-          <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%]">
@@ -69,14 +63,16 @@ const MemoRelationListView = (props: Props) => {
                   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>
+                  <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>
                 </Link>
               </div>
             );
           })}
         </div>
-        </div>
       )}
     </>
   );