feat: update memo detail page

web/src/components/FloatingNavButton.tsx

@@ -1,10 +1,10 @@
 import { Dropdown, IconButton, Menu, MenuButton } from "@mui/joy";
-import { useNavigate } from "react-router-dom";
+import useNavigateTo from "@/hooks/useNavigateTo";
 import { useTranslate } from "@/utils/i18n";
 import Icon from "./Icon";
 
 const FloatingNavButton = () => {
-  const navigate = useNavigate();
+  const navigateTo = useNavigateTo();
   const t = useTranslate();
 
   return (
@@ -23,7 +23,7 @@ const FloatingNavButton = () => {
         <Menu placement="top-end">
           <button
             className="w-full text-left text-sm whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
-            onClick={() => navigate("/")}
+            onClick={() => navigateTo("/")}
           >
             {t("router.back-to-home")}
           </button>

web/src/components/Memo.tsx

@@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
 import { UNKNOWN_ID } from "@/helpers/consts";
 import { getRelativeTimeString } from "@/helpers/datetime";
 import useCurrentUser from "@/hooks/useCurrentUser";
+import useNavigateTo from "@/hooks/useNavigateTo";
 import { useFilterStore, useMemoStore, useUserStore } from "@/store/module";
 import { useUserV1Store } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
@@ -17,7 +18,6 @@ import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
 import MemoRelationListView from "./MemoRelationListView";
 import MemoResourceListView from "./MemoResourceListView";
 import showPreviewImageDialog from "./PreviewImageDialog";
-import showShareMemo from "./ShareMemoDialog";
 import UserAvatar from "./UserAvatar";
 import "@/less/memo.less";
 
@@ -30,6 +30,7 @@ interface Props {
 const Memo: React.FC<Props> = (props: Props) => {
   const { memo, lazyRendering } = props;
   const t = useTranslate();
+  const navigateTo = useNavigateTo();
   const { i18n } = useTranslation();
   const filterStore = useFilterStore();
   const userStore = useUserStore();
@@ -89,6 +90,14 @@ const Memo: React.FC<Props> = (props: Props) => {
     return <div className={`memo-wrapper min-h-[128px] ${"memos-" + memo.id}`} ref={memoContainerRef}></div>;
   }
 
+  const handleGotoMemoDetailPage = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (event.altKey) {
+      showChangeMemoCreatedTsDialog(memo.id);
+    } else {
+      navigateTo(`/m/${memo.id}`);
+    }
+  };
+
   const handleTogglePinMemoBtnClick = async () => {
     try {
       if (memo.pinned) {
@@ -143,10 +152,6 @@ const Memo: React.FC<Props> = (props: Props) => {
     });
   };
 
-  const handleGenerateMemoImageBtnClick = () => {
-    showShareMemo(memo);
-  };
-
   const handleMemoContentClick = async (e: React.MouseEvent) => {
     const targetEl = e.target as HTMLElement;
 
@@ -217,11 +222,6 @@ const Memo: React.FC<Props> = (props: Props) => {
     handleEditMemoClick();
   };
 
-  const handleMemoCreatedTimeClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    showChangeMemoCreatedTsDialog(memo.id);
-  };
-
   return (
     <>
       <div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned && !readonly ? "pinned" : ""}`} ref={memoContainerRef}>
@@ -236,7 +236,7 @@ const Memo: React.FC<Props> = (props: Props) => {
                 <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
               </>
             )}
-            <span className="text-sm text-gray-400 select-none" onDoubleClick={handleMemoCreatedTimeClick}>
+            <span className="text-sm text-gray-400 select-none" onClick={handleGotoMemoDetailPage}>
               {displayTime}
             </span>
           </div>
@@ -256,10 +256,6 @@ const Memo: React.FC<Props> = (props: Props) => {
                       <Icon.Edit3 className="w-4 h-auto mr-2" />
                       {t("common.edit")}
                     </span>
-                    <span className="btn" onClick={handleGenerateMemoImageBtnClick}>
-                      <Icon.Share className="w-4 h-auto mr-2" />
-                      {t("common.share")}
-                    </span>
                     <span className="btn" onClick={handleMarkMemoClick}>
                       <Icon.Link className="w-4 h-auto mr-2" />
                       {t("common.mark")}

web/src/components/ShareMemoDialog.tsx

@@ -1,84 +1,55 @@
-import { Option, Select } from "@mui/joy";
+import { Button } from "@mui/joy";
 import copy from "copy-to-clipboard";
-import { toLower } from "lodash-es";
 import { QRCodeSVG } from "qrcode.react";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import { toast } from "react-hot-toast";
-import { getMemoStats } from "@/helpers/api";
+import { getDateTimeString } from "@/helpers/datetime";
-import { VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
-import { getDateTimeString, getTimeStampByDate } from "@/helpers/datetime";
 import useLoading from "@/hooks/useLoading";
 import toImage from "@/labs/html2image";
-import { useMemoStore, useUserStore } from "@/store/module";
+import { useUserV1Store } from "@/store/v1";
 import { useTranslate } from "@/utils/i18n";
 import { generateDialog } from "./Dialog";
 import showEmbedMemoDialog from "./EmbedMemoDialog";
 import Icon from "./Icon";
 import MemoContent from "./MemoContent";
 import MemoResourceListView from "./MemoResourceListView";
+import UserAvatar from "./UserAvatar";
 import "@/less/share-memo-dialog.less";
 
 interface Props extends DialogProps {
   memo: Memo;
 }
 
-interface State {
-  memoAmount: number;
-  memoVisibility: Visibility;
-  showQRCode: boolean;
-}
-
 const ShareMemoDialog: React.FC<Props> = (props: Props) => {
   const { memo: propsMemo, destroy } = props;
   const t = useTranslate();
-  const userStore = useUserStore();
+  const userV1Store = useUserV1Store();
-  const memoStore = useMemoStore();
+  const downloadingImageState = useLoading(false);
-  const user = userStore.state.user as User;
-  const [state, setState] = useState<State>({
-    memoAmount: 0,
-    memoVisibility: propsMemo.visibility,
-    showQRCode: true,
-  });
-  const createLoadingState = useLoading(false);
   const loadingState = useLoading();
   const memoElRef = useRef<HTMLDivElement>(null);
   const memo = {
     ...propsMemo,
     displayTsStr: getDateTimeString(propsMemo.displayTs),
   };
-  const createdDays = Math.ceil((Date.now() - getTimeStampByDate(user.createdTs)) / 1000 / 3600 / 24);
+  const user = userV1Store.getUserByUsername(memo.creatorUsername);
 
   useEffect(() => {
-    getMemoStats(user.username)
+    (async () => {
-      .then(({ data }) => {
+      await userV1Store.getOrFetchUserByUsername(memo.creatorUsername);
-        setPartialState({
-          memoAmount: data.length,
-        });
       loadingState.setFinish();
-      })
+    })();
-      .catch((error) => {
-        console.error(error);
-      });
   }, []);
 
-  const setPartialState = (partialState: Partial<State>) => {
-    setState({
-      ...state,
-      ...partialState,
-    });
-  };
-
   const handleCloseBtnClick = () => {
     destroy();
   };
 
-  const handleDownloadBtnClick = () => {
+  const handleDownloadImageBtnClick = () => {
     if (!memoElRef.current) {
       return;
     }
 
-    createLoadingState.setLoading();
+    downloadingImageState.setLoading();
-
     toImage(memoElRef.current, {
       pixelRatio: window.devicePixelRatio * 2,
     })
@@ -88,7 +59,7 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
         a.download = `memos-${getDateTimeString(Date.now())}.png`;
         a.click();
 
-        createLoadingState.setFinish();
+        downloadingImageState.setFinish();
       })
       .catch((err) => {
         console.error(err);
@@ -104,23 +75,9 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
     toast.success(t("message.succeed-copy-link"));
   };
 
-  const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
+  if (loadingState.isLoading) {
-    return {
+    return null;
-      value: item.value,
+  }
-      text: t(`memo.visibility.${toLower(item.value) as Lowercase<typeof item.value>}`),
-    };
-  });
-
-  const handleMemoVisibilityOptionChanged = async (value: string) => {
-    const visibilityValue = value as Visibility;
-    setPartialState({
-      memoVisibility: visibilityValue,
-    });
-    await memoStore.patchMemo({
-      id: memo.id,
-      visibility: visibilityValue,
-    });
-  };
 
   return (
     <>
@@ -131,41 +88,23 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
         </button>
       </div>
       <div className="dialog-content-container w-full flex flex-col justify-start items-start relative">
-        <div className="px-4 pb-3 w-full flex flex-row justify-start items-center">
-          <span className="text-sm mr-2">{t("common.visibility")}:</span>
-          <Select
-            className="!min-w-[10rem] w-auto text-sm"
-            value={state.memoVisibility}
-            onChange={(_, visibility) => {
-              if (visibility) {
-                handleMemoVisibilityOptionChanged(visibility);
-              }
-            }}
-          >
-            {memoVisibilityOptionSelectorItems.map((item) => (
-              <Option key={item.value} value={item.value} className="whitespace-nowrap">
-                {item.text}
-              </Option>
-            ))}
-          </Select>
-        </div>
         <div className="px-4 pb-3 w-full flex flex-row justify-start items-center space-x-2">
-          <button disabled={createLoadingState.isLoading} className="btn-normal h-8" onClick={handleDownloadBtnClick}>
+          <Button color="neutral" variant="outlined" disabled={downloadingImageState.isLoading} onClick={handleDownloadImageBtnClick}>
-            {createLoadingState.isLoading ? (
+            {downloadingImageState.isLoading ? (
               <Icon.Loader className="w-4 h-auto mr-1 animate-spin" />
             ) : (
               <Icon.Download className="w-4 h-auto mr-1" />
             )}
             {t("common.image")}
-          </button>
+          </Button>
-          <button className="btn-normal h-8" onClick={handleShowEmbedMemoDialog}>
+          <Button color="neutral" variant="outlined" onClick={handleShowEmbedMemoDialog}>
             <Icon.Code className="w-4 h-auto mr-1" />
             {t("memo.embed")}
-          </button>
+          </Button>
-          <button className="btn-normal h-8" onClick={handleCopyLinkBtnClick}>
+          <Button color="neutral" variant="outlined" onClick={handleCopyLinkBtnClick}>
             <Icon.Link className="w-4 h-auto mr-1" />
             {t("common.link")}
-          </button>
+          </Button>
         </div>
         <div className="w-full rounded-lg border-t overflow-clip">
           <div
@@ -178,18 +117,13 @@ const ShareMemoDialog: React.FC<Props> = (props: Props) => {
               <MemoResourceListView className="!grid-cols-2" resourceList={memo.resourceList} />
             </div>
             <div className="flex flex-row justify-between items-center w-full bg-gray-100 dark:bg-zinc-700 py-4 px-6">
-              <div className="mr-2">
+              <UserAvatar className="mr-2" avatarUrl={user.avatarUrl} />
-                <img className="h-10 w-auto rounded-lg" src={`${user.avatarUrl || "/logo.webp"}`} alt="" />
-              </div>
               <div className="w-auto grow truncate flex mr-2 flex-col justify-center items-start">
                 <span className="w-full text-sm truncate font-bold text-gray-600 dark:text-gray-300">{user.nickname || user.username}</span>
-                <span className="text-xs text-gray-400">
-                  {state.memoAmount} MEMOS / {createdDays} DAYS
-                </span>
               </div>
               <QRCodeSVG
                 value={`${window.location.origin}/m/${memo.id}`}
-                size={40}
+                size={28}
                 bgColor={"#F3F4F6"}
                 fgColor={"#4B5563"}
                 includeMargin={false}

web/src/components/UserBanner.tsx

@@ -1,5 +1,5 @@
-import { useNavigate } from "react-router-dom";
 import useCurrentUser from "@/hooks/useCurrentUser";
+import useNavigateTo from "@/hooks/useNavigateTo";
 import { useGlobalStore, useUserStore } from "@/store/module";
 import { User_Role } from "@/types/proto/api/v2/user_service";
 import { useTranslate } from "@/utils/i18n";
@@ -10,7 +10,7 @@ import Dropdown from "./kit/Dropdown";
 
 const UserBanner = () => {
   const t = useTranslate();
-  const navigate = useNavigate();
+  const navigateTo = useNavigateTo();
   const globalStore = useGlobalStore();
   const userStore = useUserStore();
   const { systemStatus } = globalStore.state;
@@ -18,7 +18,7 @@ const UserBanner = () => {
   const title = user ? user.nickname : systemStatus.customizedProfile.name || "memos";
 
   const handleMyAccountClick = () => {
-    navigate(`/u/${encodeURIComponent(user.username)}`);
+    navigateTo(`/u/${encodeURIComponent(user.username)}`);
   };
 
   const handleAboutBtnClick = () => {

web/src/hooks/index.ts

@@ -1 +1,3 @@
 export * from "./useLoading";
+export * from "./useCurrentUser";
+export * from "./useNavigateTo";

web/src/hooks/useNavigateTo.ts

@@ -0,0 +1,20 @@
+import { useNavigate } from "react-router-dom";
+
+const useNavigateTo = () => {
+  const navigateTo = useNavigate();
+
+  const navigateToWithViewTransition = (to: string) => {
+    const document = window.document as any;
+    if (!document.startViewTransition) {
+      navigateTo(to);
+    } else {
+      document.startViewTransition(() => {
+        navigateTo(to);
+      });
+    }
+  };
+
+  return navigateToWithViewTransition;
+};
+
+export default useNavigateTo;

web/src/pages/MemoDetail.tsx

@@ -1,19 +1,30 @@
+import { Divider, Select, Tooltip, Option, IconButton } from "@mui/joy";
+import copy from "copy-to-clipboard";
+import { toLower } from "lodash-es";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useParams } from "react-router-dom";
 import FloatingNavButton from "@/components/FloatingNavButton";
-import Memo from "@/components/Memo";
+import Icon from "@/components/Icon";
+import MemoContent from "@/components/MemoContent";
+import MemoRelationListView from "@/components/MemoRelationListView";
+import MemoResourceListView from "@/components/MemoResourceListView";
+import showShareMemoDialog from "@/components/ShareMemoDialog";
 import UserAvatar from "@/components/UserAvatar";
-import useLoading from "@/hooks/useLoading";
+import { VISIBILITY_SELECTOR_ITEMS } from "@/helpers/consts";
+import { getDateTimeString } from "@/helpers/datetime";
+import useNavigateTo from "@/hooks/useNavigateTo";
 import { useMemoStore } from "@/store/module";
 import { useUserV1Store } from "@/store/v1";
 import { User } from "@/types/proto/api/v2/user_service";
+import { useTranslate } from "@/utils/i18n";
 
 const MemoDetail = () => {
   const params = useParams();
+  const navigateTo = useNavigateTo();
+  const t = useTranslate();
   const memoStore = useMemoStore();
   const userV1Store = useUserV1Store();
-  const loadingState = useLoading();
   const [user, setUser] = useState<User>();
   const memoId = Number(params.memoId);
   const memo = memoStore.state.memos.find((memo) => memo.id === memoId);
@@ -25,18 +36,43 @@ const MemoDetail = () => {
         .then(async (memo) => {
           const user = await userV1Store.getOrFetchUserByUsername(memo.creatorUsername);
           setUser(user);
-          loadingState.setFinish();
         })
         .catch((error) => {
           console.error(error);
           toast.error(error.response.data.message);
         });
+    } else {
+      navigateTo("/404");
     }
   }, [memoId]);
 
+  if (!memo) {
+    return null;
+  }
+
+  const memoVisibilityOptionSelectorItems = VISIBILITY_SELECTOR_ITEMS.map((item) => {
+    return {
+      value: item.value,
+      text: t(`memo.visibility.${toLower(item.value) as Lowercase<typeof item.value>}`),
+    };
+  });
+
+  const handleMemoVisibilityOptionChanged = async (value: string) => {
+    const visibilityValue = value as Visibility;
+    await memoStore.patchMemo({
+      id: memo.id,
+      visibility: visibilityValue,
+    });
+  };
+
+  const handleCopyLinkBtnClick = () => {
+    copy(`${window.location.origin}/m/${memo.id}`);
+    toast.success(t("message.succeed-copy-link"));
+  };
+
   return (
     <>
-      <section className="relative top-0 w-full min-h-full overflow-x-hidden bg-zinc-100 dark:bg-zinc-800">
+      <section className="relative top-0 w-full min-h-full overflow-x-hidden bg-white dark:bg-zinc-800">
         <div className="relative w-full min-h-full mx-auto flex flex-col justify-start items-center pb-6">
           <div className="w-full flex flex-col justify-start items-center py-8">
             <UserAvatar className="!w-20 h-auto mb-4 drop-shadow" avatarUrl={user?.avatarUrl} />
@@ -44,18 +80,48 @@ const MemoDetail = () => {
               <p className="text-2xl font-bold text-gray-700 dark:text-gray-300">{user?.nickname}</p>
             </div>
           </div>
-          {!loadingState.isLoading &&
-            (memo ? (
-              <>
           <div className="relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4">
-                  <Memo memo={memo} />
+            <MemoContent content={memo.content} />
-                </div>
+            <MemoResourceListView resourceList={memo.resourceList} />
-              </>
+            <MemoRelationListView relationList={memo.relationList} />
-            ) : (
+            <Divider className="!my-6" />
-              <>
+            <div className="w-full flex flex-col sm:flex-row justify-start sm:justify-between sm:items-center gap-2">
-                <p>Not found</p>
+              <div className="flex flex-row justify-start items-center">
-              </>
+                <span className="text-sm text-gray-500 dark:text-gray-400">{getDateTimeString(memo.displayTs)}</span>
+                <span className="mx-1 font-mono opacity-80 text-gray-400">·</span>
+                <Tooltip title={"The identifier of memo"} placement="top">
+                  <span className="text-sm text-gray-500 dark:text-gray-400">#{memo.id}</span>
+                </Tooltip>
+                <span className="mx-1 font-mono opacity-80 text-gray-400">·</span>
+                <Tooltip title={"The visibility of memo"} placement="top">
+                  <Select
+                    className="w-auto text-sm"
+                    variant="plain"
+                    value={memo.visibility}
+                    onChange={(_, visibility) => {
+                      if (visibility) {
+                        handleMemoVisibilityOptionChanged(visibility);
+                      }
+                    }}
+                  >
+                    {memoVisibilityOptionSelectorItems.map((item) => (
+                      <Option key={item.value} value={item.value} className="whitespace-nowrap">
+                        {item.text}
+                      </Option>
                     ))}
+                  </Select>
+                </Tooltip>
+              </div>
+              <div className="flex flex-row sm:justify-end items-center">
+                <IconButton size="sm" onClick={handleCopyLinkBtnClick}>
+                  <Icon.Link className="w-4 h-auto text-gray-600" />
+                </IconButton>
+                <IconButton size="sm" onClick={() => showShareMemoDialog(memo)}>
+                  <Icon.Share className="w-4 h-auto text-gray-600" />
+                </IconButton>
+              </div>
+            </div>
+          </div>
         </div>
       </section>