chore: tweak memo detail styles

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>

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);

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} />

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"