From 9ee4b75bbd16ad21f5e0bcb48ba61957ccc1e2d0 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Wed, 27 Dec 2023 23:25:02 +0800
Subject: [PATCH] chore: tweak memo detail styles

---
 web/src/components/AboutSiteDialog.tsx        |  8 +--
 .../components/Inbox/VersionUpdateMessage.tsx |  1 +
 web/src/components/MemoView.tsx               | 54 +++-----------
 web/src/components/UserBanner.tsx             | 10 +--
 web/src/pages/MemoDetail.tsx                  | 72 +++++++++----------
 web/src/pages/Resources.tsx                   |  1 -
 6 files changed, 51 insertions(+), 95 deletions(-)

diff --git a/web/src/components/AboutSiteDialog.tsx b/web/src/components/AboutSiteDialog.tsx
index bff26dbf..2e323c1e 100644
--- a/web/src/components/AboutSiteDialog.tsx
+++ b/web/src/components/AboutSiteDialog.tsx
@@ -1,4 +1,4 @@
-import { Divider } from "@mui/joy";
+import { Divider, IconButton } from "@mui/joy";
 import { useGlobalStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
@@ -22,9 +22,9 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
         <p className="title-text flex items-center">
           {t("common.about")} {customizedProfile.name}
         </p>
-        <button className="btn close-btn" onClick={handleCloseBtnClick}>
-          <Icon.X />
-        </button>
+        <IconButton size="sm" onClick={handleCloseBtnClick}>
+          <Icon.X className="opacity-70" />
+        </IconButton>
       </div>
       <div className="flex flex-col justify-start items-start max-w-full w-96">
         <p className="text-xs">{t("about.memos-description")}</p>
diff --git a/web/src/components/Inbox/VersionUpdateMessage.tsx b/web/src/components/Inbox/VersionUpdateMessage.tsx
index dcf0a41d..f8baaee9 100644
--- a/web/src/components/Inbox/VersionUpdateMessage.tsx
+++ b/web/src/components/Inbox/VersionUpdateMessage.tsx
@@ -36,6 +36,7 @@ const VersionUpdateMessage = ({ inbox }: Props) => {
     if (!activity?.payload?.versionUpdate?.version) {
       return;
     }
+
     window.open(`https://github.com/usememos/memos/releases/tag/v${activity?.payload?.versionUpdate?.version}`);
     if (inbox.status === Inbox_Status.UNREAD) {
       handleArchiveMessage(true);
diff --git a/web/src/components/MemoView.tsx b/web/src/components/MemoView.tsx
index 129be935..7ee3f206 100644
--- a/web/src/components/MemoView.tsx
+++ b/web/src/components/MemoView.tsx
@@ -46,7 +46,6 @@ const MemoView: React.FC<Props> = (props: Props) => {
   const user = useCurrentUser();
   const [displayTime, setDisplayTime] = useState<string>(getRelativeTimeString(getTimeStampByDate(memo.displayTime)));
   const [creator, setCreator] = useState(userStore.getUserByUsername(extractUsernameFromName(memo.creator)));
-  const [parentMemo, setParentMemo] = useState<Memo | undefined>(undefined);
   const memoContainerRef = useRef<HTMLDivElement>(null);
   const referenceRelations = memo.relations.filter((relation) => relation.type === MemoRelation_Type.REFERENCE);
   const readonly = memo.creator !== user?.name;
@@ -56,15 +55,6 @@ const MemoView: React.FC<Props> = (props: Props) => {
       const user = await userStore.getOrFetchUserByUsername(extractUsernameFromName(memo.creator));
       setCreator(user);
     })();
-
-    const parentMemoId = memo.relations.find(
-      (relation) => relation.memoId === memo.id && relation.type === MemoRelation_Type.COMMENT
-    )?.relatedMemoId;
-    if (parentMemoId) {
-      memoStore.getOrFetchMemoById(parentMemoId, { skipStore: true }).then((memo: Memo) => {
-        setParentMemo(memo);
-      });
-    }
   }, []);
 
   // Update display time string.
@@ -210,16 +200,11 @@ const MemoView: React.FC<Props> = (props: Props) => {
               </Tooltip>
             </>
           )}
+        </div>
+        <div className="btns-container space-x-2">
           <div className="w-auto hidden group-hover:flex flex-row justify-between items-center">
-            <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}`} unstable_viewTransition>
-              <Tooltip title={"Identifier"} placement="top">
-                <span className="text-sm text-gray-500 dark:text-gray-400">#{memo.id}</span>
-              </Tooltip>
-            </Link>
             {props.showVisibility && memo.visibility !== Visibility.PRIVATE && (
               <>
-                <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
                 <Tooltip title={t(`memo.visibility.${convertVisibilityToString(memo.visibility)}` as any)} placement="top">
                   <span>
                     <VisibilityIcon visibility={memo.visibility} />
@@ -228,8 +213,6 @@ const MemoView: React.FC<Props> = (props: Props) => {
               </>
             )}
           </div>
-        </div>
-        <div className="btns-container space-x-2">
           {!readonly && (
             <>
               <span className="btn more-action-btn">
@@ -237,22 +220,18 @@ const MemoView: React.FC<Props> = (props: Props) => {
               </span>
               <div className="more-action-btns-wrapper">
                 <div className="more-action-btns-container min-w-[6em]">
-                  {!parentMemo && (
-                    <span className="btn" onClick={handleTogglePinMemoBtnClick}>
-                      {memo.pinned ? <Icon.BookmarkMinus className="w-4 h-auto mr-2" /> : <Icon.BookmarkPlus className="w-4 h-auto mr-2" />}
-                      {memo.pinned ? t("common.unpin") : t("common.pin")}
-                    </span>
-                  )}
+                  <span className="btn" onClick={handleTogglePinMemoBtnClick}>
+                    {memo.pinned ? <Icon.BookmarkMinus className="w-4 h-auto mr-2" /> : <Icon.BookmarkPlus className="w-4 h-auto mr-2" />}
+                    {memo.pinned ? t("common.unpin") : t("common.pin")}
+                  </span>
                   <span className="btn" onClick={handleEditMemoClick}>
                     <Icon.Edit3 className="w-4 h-auto mr-2" />
                     {t("common.edit")}
                   </span>
-                  {!parentMemo && (
-                    <span className="btn" onClick={handleMarkMemoClick}>
-                      <Icon.Link className="w-4 h-auto mr-2" />
-                      {t("common.mark")}
-                    </span>
-                  )}
+                  <span className="btn" onClick={handleMarkMemoClick}>
+                    <Icon.Link className="w-4 h-auto mr-2" />
+                    {t("common.mark")}
+                  </span>
                   <span className="btn" onClick={() => showShareMemoDialog(memo)}>
                     <Icon.Share className="w-4 h-auto mr-2" />
                     {t("common.share")}
@@ -272,19 +251,6 @@ const MemoView: React.FC<Props> = (props: Props) => {
           )}
         </div>
       </div>
-      {props.showParent && parentMemo && (
-        <div className="w-auto max-w-full mb-1">
-          <Link
-            className="px-2 py-0.5 border rounded-full max-w-xs w-auto text-xs 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/${parentMemo.id}`}
-            unstable_viewTransition
-          >
-            <Icon.ArrowUpRightFromCircle className="w-3 h-auto shrink-0 opacity-60" />
-            <span className="mx-1 opacity-60">#{parentMemo.id}</span>
-            <span className="truncate">{parentMemo.content}</span>
-          </Link>
-        </div>
-      )}
       <MemoContent content={memo.content} nodes={memo.nodes} onMemoContentClick={handleMemoContentClick} />
       <MemoResourceListView resourceList={memo.resources} />
       <MemoRelationListView memo={memo} relationList={referenceRelations} />
diff --git a/web/src/components/UserBanner.tsx b/web/src/components/UserBanner.tsx
index b1a88c51..efb06eb6 100644
--- a/web/src/components/UserBanner.tsx
+++ b/web/src/components/UserBanner.tsx
@@ -2,7 +2,6 @@ import * as api from "@/helpers/api";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import { useGlobalStore } from "@/store/module";
-import { User_Role } from "@/types/proto/api/v2/user_service";
 import { useTranslate } from "@/utils/i18n";
 import showAboutSiteDialog from "./AboutSiteDialog";
 import Icon from "./Icon";
@@ -36,12 +35,9 @@ const UserBanner = () => {
       <Dropdown
         className="w-auto"
         trigger={
-          <div className="px-4 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-2xl hover:shadow hover:bg-white dark:hover:bg-zinc-700">
-            <UserAvatar className="shadow shrink-0" avatarUrl={user?.avatarUrl} />
-            <span className="px-1 text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>
-            {user?.role === User_Role.HOST ? (
-              <span className="text-xs px-1 bg-blue-600 dark:bg-blue-800 rounded text-white dark:text-gray-200 shadow">MOD</span>
-            ) : null}
+          <div className="px-3 py-2 max-w-full flex flex-row justify-start items-center cursor-pointer rounded-2xl hover:shadow hover:bg-white dark:hover:bg-zinc-700">
+            <UserAvatar className="shadow shrink-0 mr-2" avatarUrl={user?.avatarUrl} />
+            <span className="text-lg font-medium text-slate-800 dark:text-gray-200 shrink truncate">{title}</span>
           </div>
         }
         actionsClassName="min-w-[128px] max-w-full"
diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx
index 3b455249..15cae66f 100644
--- a/web/src/pages/MemoDetail.tsx
+++ b/web/src/pages/MemoDetail.tsx
@@ -74,6 +74,8 @@ const MemoDetail = () => {
         memoStore.getOrFetchMemoById(parentMemoId).then((memo: Memo) => {
           setParentMemo(memo);
         });
+      } else {
+        setParentMemo(undefined);
       }
       await Promise.all(commentRelations.map((relation) => memoStore.getOrFetchMemoById(relation.memoId)));
     })();
@@ -114,60 +116,52 @@ const MemoDetail = () => {
       <MobileHeader />
       <div className="w-full px-4 sm:px-6">
         <div className="relative flex-grow w-full min-h-full flex flex-col justify-start items-start border dark:border-zinc-700 bg-white dark:bg-zinc-700 shadow hover:shadow-xl transition-all p-4 pb-3 rounded-lg">
+          <div className="mb-3">
+            <Link to={`/u/${encodeURIComponent(extractUsernameFromName(memo.creator))}`} unstable_viewTransition>
+              <span className="w-full flex flex-row justify-start items-center">
+                <UserAvatar className="!w-10 !h-10 mr-2" avatarUrl={creator?.avatarUrl} />
+                <div className="flex flex-col justify-start items-start gap-1">
+                  <span className="text-lg leading-none text-gray-600 max-w-[8em] truncate dark:text-gray-400">{creator?.nickname}</span>
+                  <span className="text-sm leading-none text-gray-400 select-none">{getDateTimeString(memo.displayTime)}</span>
+                </div>
+              </span>
+            </Link>
+          </div>
           {parentMemo && (
             <div className="w-auto mb-2">
               <Link
-                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"
+                className="px-3 py-1 border rounded-lg 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/${parentMemo.id}`}
                 unstable_viewTransition
               >
-                <Icon.ArrowUpLeftFromCircle className="w-4 h-auto shrink-0 opacity-60" />
-                <span className="mx-1 opacity-60">#{parentMemo.id}</span>
+                <Icon.ArrowUpLeftFromCircle className="w-4 h-auto shrink-0 opacity-60 mr-2" />
                 <span className="truncate">{parentMemo.content}</span>
               </Link>
             </div>
           )}
-          <div className="w-full mb-2 flex flex-row justify-start items-center">
-            <span className="text-gray-400 select-none">{getDateTimeString(memo.displayTime)}</span>
-          </div>
           <MemoContent content={memo.content} />
           <MemoResourceListView resourceList={memo.resources} />
           <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="w-full mt-3 flex flex-row justify-between items-center gap-2">
             <div className="flex flex-row justify-start items-center">
-              <Tooltip title={"Identifier"} placement="top">
-                <span className="text-sm text-gray-500 dark:text-gray-400">#{memo.id}</span>
-              </Tooltip>
-              <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
-              <Link to={`/u/${encodeURIComponent(memo.creator)}`} unstable_viewTransition>
-                <Tooltip title={"Creator"} placement="top">
-                  <span className="flex flex-row justify-start items-center">
-                    <UserAvatar className="!w-5 !h-5 mr-1" avatarUrl={creator?.avatarUrl} />
-                    <span className="text-sm text-gray-600 max-w-[8em] truncate dark:text-gray-400">{creator?.nickname}</span>
-                  </span>
-                </Tooltip>
-              </Link>
               {allowEdit && (
-                <>
-                  <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
-                  <Select
-                    className="w-auto text-sm"
-                    variant="plain"
-                    value={memo.visibility}
-                    startDecorator={<VisibilityIcon visibility={memo.visibility} />}
-                    onChange={(_, visibility) => {
-                      if (visibility) {
-                        handleMemoVisibilityOptionChanged(visibility);
-                      }
-                    }}
-                  >
-                    {[Visibility.PRIVATE, Visibility.PROTECTED, Visibility.PUBLIC].map((item) => (
-                      <Option key={item} value={item} className="whitespace-nowrap">
-                        {t(`memo.visibility.${convertVisibilityToString(item).toLowerCase()}` as any)}
-                      </Option>
-                    ))}
-                  </Select>
-                </>
+                <Select
+                  className="w-auto text-sm"
+                  variant="plain"
+                  value={memo.visibility}
+                  startDecorator={<VisibilityIcon visibility={memo.visibility} />}
+                  onChange={(_, visibility) => {
+                    if (visibility) {
+                      handleMemoVisibilityOptionChanged(visibility);
+                    }
+                  }}
+                >
+                  {[Visibility.PRIVATE, Visibility.PROTECTED, Visibility.PUBLIC].map((item) => (
+                    <Option key={item} value={item} className="whitespace-nowrap">
+                      {t(`memo.visibility.${convertVisibilityToString(item).toLowerCase()}` as any)}
+                    </Option>
+                  ))}
+                </Select>
               )}
             </div>
             <div className="flex flex-row sm:justify-end items-center">
diff --git a/web/src/pages/Resources.tsx b/web/src/pages/Resources.tsx
index 422e3ab5..910ca6d7 100644
--- a/web/src/pages/Resources.tsx
+++ b/web/src/pages/Resources.tsx
@@ -77,7 +77,6 @@ const Resources = () => {
             <div>
               <Input
                 className="max-w-[8rem]"
-                variant="plain"
                 placeholder={t("common.search")}
                 startDecorator={<Icon.Search className="w-4 h-auto" />}
                 value={state.searchQuery}