chore: add mobile header

web/src/components/FloatingNavButton.tsx

@@ -1,53 +0,0 @@
-import { Dropdown, IconButton, Menu, MenuButton } from "@mui/joy";
-import { useEffect } from "react";
-import useNavigateTo from "@/hooks/useNavigateTo";
-import { useTranslate } from "@/utils/i18n";
-import Icon from "./Icon";
-
-const FloatingNavButton = () => {
-  const t = useTranslate();
-  const navigateTo = useNavigateTo();
-
-  useEffect(() => {
-    handleScrollToTop();
-  }, []);
-
-  const handleScrollToTop = () => {
-    document.body.querySelector("#root")?.scrollTo({ top: 0, behavior: "smooth" });
-  };
-
-  return (
-    <>
-      <Dropdown>
-        <div className="fixed bottom-6 right-6">
-          <MenuButton
-            slots={{ root: IconButton }}
-            slotProps={{
-              root: { className: "!bg-white dark:!bg-zinc-900 drop-shadow", size: "sm", variant: "outlined", color: "neutral" },
-            }}
-          >
-            <Icon.MoreVertical className="w-4 h-auto" />
-          </MenuButton>
-        </div>
-        <Menu placement="top-end">
-          <button
-            className="w-full text-left text-sm flex flex-row justify-start items-center whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
-            onClick={handleScrollToTop}
-          >
-            <Icon.ArrowUpToLine className="w-4 h-auto mr-1 opacity-70" />
-            {t("router.back-to-top")}
-          </button>
-          <button
-            className="w-full text-left text-sm flex flex-row justify-start items-center whitespace-nowrap leading-6 py-1 px-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-zinc-600"
-            onClick={() => navigateTo("/")}
-          >
-            <Icon.Home className="w-4 h-auto mr-1 opacity-70" />
-            {t("router.go-to-home")}
-          </button>
-        </Menu>
-      </Dropdown>
-    </>
-  );
-};
-
-export default FloatingNavButton;

web/src/pages/Archived.tsx

@@ -2,10 +2,9 @@ import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
 import ArchivedMemo from "@/components/ArchivedMemo";
 import Empty from "@/components/Empty";
-import MemoFilter from "@/components/MemoFilter";
 import MobileHeader from "@/components/MobileHeader";
 import useLoading from "@/hooks/useLoading";
-import { useFilterStore, useMemoStore } from "@/store/module";
+import { useMemoStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 
 const Archived = () => {
@@ -14,16 +13,12 @@ const Archived = () => {
   const loadingState = useLoading();
   const [archivedMemos, setArchivedMemos] = useState<Memo[]>([]);
   const memos = memoStore.state.memos;
-  const filterStore = useFilterStore();
-  const filter = filterStore.state;
-  const { text: textQuery } = filter;
 
   useEffect(() => {
     memoStore
       .fetchArchivedMemos()
       .then((result) => {
-        const filteredMemos = textQuery ? result.filter((memo) => memo.content.toLowerCase().includes(textQuery.toLowerCase())) : result;
+        setArchivedMemos(result);
-        setArchivedMemos(filteredMemos);
       })
       .catch((error) => {
         console.error(error);
@@ -32,12 +27,11 @@ const Archived = () => {
       .finally(() => {
         loadingState.setFinish();
       });
-  }, [memos, textQuery]);
+  }, [memos]);
 
   return (
     <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-start px-4 sm:px-2 sm:pt-4 pb-8">
       <MobileHeader />
-      <MemoFilter />
       {loadingState.isLoading ? (
         <div className="w-full h-32 flex flex-col justify-center items-center">
           <p className="opacity-70">{t("memo.fetching-data")}</p>

web/src/pages/Home.tsx

@@ -7,6 +7,7 @@ import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 
 const Home = () => {
   const { md } = useResponsiveWidth();
+
   return (
     <div className="w-full flex flex-row justify-center items-start">
       <div className="w-full px-4 max-w-3xl sm:px-2 sm:pt-4">

web/src/pages/MemoDetail.tsx

@@ -3,7 +3,6 @@ import copy from "copy-to-clipboard";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { Link, useParams } from "react-router-dom";
-import FloatingNavButton from "@/components/FloatingNavButton";
 import Icon from "@/components/Icon";
 import Memo from "@/components/Memo";
 import MemoContentV1 from "@/components/MemoContentV1";
@@ -11,6 +10,7 @@ import MemoEditor from "@/components/MemoEditor";
 import showMemoEditorDialog from "@/components/MemoEditor/MemoEditorDialog";
 import MemoRelationListView from "@/components/MemoRelationListView";
 import MemoResourceListView from "@/components/MemoResourceListView";
+import MobileHeader from "@/components/MobileHeader";
 import showShareMemoDialog from "@/components/ShareMemoDialog";
 import UserAvatar from "@/components/UserAvatar";
 import VisibilityIcon from "@/components/VisibilityIcon";
@@ -110,120 +110,117 @@ const MemoDetail = () => {
   };
 
   return (
-    <>
+    <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8">
-      <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8">
+      <MobileHeader />
-        <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="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">
-          {memo.parent && (
+        {memo.parent && (
-            <div className="w-auto mb-2">
+          <div className="w-auto mb-2">
-              <Link
+            <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-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"
-                to={`/m/${memo.parent.id}`}
+              to={`/m/${memo.parent.id}`}
-              >
+            >
-                <Icon.ArrowUpLeftFromCircle className="w-4 h-auto shrink-0 opacity-60" />
+              <Icon.ArrowUpLeftFromCircle className="w-4 h-auto shrink-0 opacity-60" />
-                <span className="mx-1 opacity-60">#{memo.parent.id}</span>
+              <span className="mx-1 opacity-60">#{memo.parent.id}</span>
-                <span className="truncate">{memo.parent.content}</span>
+              <span className="truncate">{memo.parent.content}</span>
-              </Link>
+            </Link>
-            </div>
-          )}
-          <div className="w-full mb-2 flex flex-row justify-start items-center">
-            <span className="text-gray-400 select-none">{getDateTimeString(memo.displayTs)}</span>
-          </div>
-          <MemoContentV1 content={memo.content} />
-          <MemoResourceListView resourceList={memo.resourceList} />
-          <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="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.creatorUsername)}`}>
-                <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_SELECTOR_ITEMS.map((item) => (
-                      <Option key={item} value={item} className="whitespace-nowrap" disabled={disableOption(item)}>
-                        {t(`memo.visibility.${item.toLowerCase() as Lowercase<typeof item>}`)}
-                      </Option>
-                    ))}
-                  </Select>
-                </>
-              )}
-            </div>
-            <div className="flex flex-row sm:justify-end items-center">
-              {allowEdit && (
-                <Tooltip title={"Edit"} placement="top">
-                  <IconButton size="sm" onClick={handleEditMemoClick}>
-                    <Icon.Edit3 className="w-4 h-auto text-gray-600 dark:text-gray-400" />
-                  </IconButton>
-                </Tooltip>
-              )}
-              <Tooltip title={"Copy link"} placement="top">
-                <IconButton size="sm" onClick={handleCopyLinkBtnClick}>
-                  <Icon.Link className="w-4 h-auto text-gray-600 dark:text-gray-400" />
-                </IconButton>
-              </Tooltip>
-              <Tooltip title={"Share"} placement="top">
-                <IconButton size="sm" onClick={() => showShareMemoDialog(memo)}>
-                  <Icon.Share className="w-4 h-auto text-gray-600 dark:text-gray-400" />
-                </IconButton>
-              </Tooltip>
-            </div>
           </div>
+        )}
+        <div className="w-full mb-2 flex flex-row justify-start items-center">
+          <span className="text-gray-400 select-none">{getDateTimeString(memo.displayTs)}</span>
         </div>
-        <div className="pt-8 pb-16 w-full">
+        <MemoContentV1 content={memo.content} />
-          <div className="relative mx-auto flex-grow w-full min-h-full flex flex-col justify-start items-start gap-y-1">
+        <MemoResourceListView resourceList={memo.resourceList} />
-            {comments.length === 0 ? (
+        <MemoRelationListView memo={memo} relationList={referenceRelations} />
-              <div className="w-full flex flex-col justify-center items-center py-6 mb-2">
+        <div className="w-full mt-4 flex flex-col sm:flex-row justify-start sm:justify-between sm:items-center gap-2">
-                <Icon.MessageCircle strokeWidth={1} className="w-8 h-auto text-gray-400" />
+          <div className="flex flex-row justify-start items-center">
-                <p className="text-gray-400 italic text-sm">{t("memo.comment.no-comment")}</p>
+            <Tooltip title={"Identifier"} placement="top">
-              </div>
+              <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.creatorUsername)}`}>
+              <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 && (
               <>
-                <div className="w-full flex flex-row justify-start items-center pl-3 mb-3">
+                <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
-                  <Icon.MessageCircle className="w-5 h-auto text-gray-400 mr-1" />
+                <Select
-                  <span className="text-gray-400 text-sm">{t("memo.comment.self")}</span>
+                  className="w-auto text-sm"
-                  <span className="text-gray-400 text-sm ml-0.5">({comments.length})</span>
+                  variant="plain"
-                </div>
+                  value={memo.visibility}
-                {comments.map((comment) => (
+                  startDecorator={<VisibilityIcon visibility={memo.visibility} />}
-                  <Memo key={comment.id} memo={comment} showCreator />
+                  onChange={(_, visibility) => {
-                ))}
+                    if (visibility) {
+                      handleMemoVisibilityOptionChanged(visibility);
+                    }
+                  }}
+                >
+                  {VISIBILITY_SELECTOR_ITEMS.map((item) => (
+                    <Option key={item} value={item} className="whitespace-nowrap" disabled={disableOption(item)}>
+                      {t(`memo.visibility.${item.toLowerCase() as Lowercase<typeof item>}`)}
+                    </Option>
+                  ))}
+                </Select>
               </>
             )}
-
+          </div>
-            {/* Only show comment editor when user login */}
+          <div className="flex flex-row sm:justify-end items-center">
-            {currentUser && (
+            {allowEdit && (
-              <MemoEditor
+              <Tooltip title={"Edit"} placement="top">
-                key={memo.id}
+                <IconButton size="sm" onClick={handleEditMemoClick}>
-                cacheKey={`comment-editor-${memo.id}`}
+                  <Icon.Edit3 className="w-4 h-auto text-gray-600 dark:text-gray-400" />
-                relationList={[{ memoId: UNKNOWN_ID, relatedMemoId: memo.id, type: "COMMENT" }]}
+                </IconButton>
-                onConfirm={handleCommentCreated}
+              </Tooltip>
-              />
             )}
+            <Tooltip title={"Copy link"} placement="top">
+              <IconButton size="sm" onClick={handleCopyLinkBtnClick}>
+                <Icon.Link className="w-4 h-auto text-gray-600 dark:text-gray-400" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title={"Share"} placement="top">
+              <IconButton size="sm" onClick={() => showShareMemoDialog(memo)}>
+                <Icon.Share className="w-4 h-auto text-gray-600 dark:text-gray-400" />
+              </IconButton>
+            </Tooltip>
           </div>
         </div>
-      </section>
+      </div>
+      <div className="pt-8 pb-16 w-full">
+        <div className="relative mx-auto flex-grow w-full min-h-full flex flex-col justify-start items-start gap-y-1">
+          {comments.length === 0 ? (
+            <div className="w-full flex flex-col justify-center items-center py-6 mb-2">
+              <Icon.MessageCircle strokeWidth={1} className="w-8 h-auto text-gray-400" />
+              <p className="text-gray-400 italic text-sm">{t("memo.comment.no-comment")}</p>
+            </div>
+          ) : (
+            <>
+              <div className="w-full flex flex-row justify-start items-center pl-3 mb-3">
+                <Icon.MessageCircle className="w-5 h-auto text-gray-400 mr-1" />
+                <span className="text-gray-400 text-sm">{t("memo.comment.self")}</span>
+                <span className="text-gray-400 text-sm ml-0.5">({comments.length})</span>
+              </div>
+              {comments.map((comment) => (
+                <Memo key={comment.id} memo={comment} showCreator />
+              ))}
+            </>
+          )}
 
-      <FloatingNavButton />
+          {/* Only show comment editor when user login */}
-    </>
+          {currentUser && (
+            <MemoEditor
+              key={memo.id}
+              cacheKey={`comment-editor-${memo.id}`}
+              relationList={[{ memoId: UNKNOWN_ID, relatedMemoId: memo.id, type: "COMMENT" }]}
+              onConfirm={handleCommentCreated}
+            />
+          )}
+        </div>
+      </div>
+    </section>
   );
 };
 

web/src/pages/UserProfile.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import { useParams } from "react-router-dom";
-import FloatingNavButton from "@/components/FloatingNavButton";
 import MemoList from "@/components/MemoList";
+import MobileHeader from "@/components/MobileHeader";
 import UserAvatar from "@/components/UserAvatar";
 import useLoading from "@/hooks/useLoading";
 import { useUserV1Store } from "@/store/v1";
@@ -35,34 +35,31 @@ const UserProfile = () => {
   }, [params.username]);
 
   return (
-    <>
+    <section className="relative top-0 w-full min-h-full overflow-x-hidden">
-      <section className="relative top-0 w-full min-h-full overflow-x-hidden">
+      <MobileHeader />
-        <div className="relative w-full min-h-full mx-auto flex flex-col justify-start items-center">
+      <div className="relative w-full min-h-full mx-auto flex flex-col justify-start items-center">
-          {!loadingState.isLoading &&
+        {!loadingState.isLoading &&
-            (user ? (
+          (user ? (
-              <>
+            <>
-                <div className="relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4">
+              <div className="relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4">
-                  <div className="w-full flex flex-row justify-start items-start">
+                <div className="w-full flex flex-row justify-start items-start">
-                    <div className="flex-grow shrink w-full">
+                  <div className="flex-grow shrink w-full">
-                      <div className="w-full flex flex-col justify-start items-center py-8">
+                    <div className="w-full flex flex-col justify-start items-center py-8">
-                        <UserAvatar className="!w-20 !h-20 mb-2 drop-shadow" avatarUrl={user?.avatarUrl} />
+                      <UserAvatar className="!w-20 !h-20 mb-2 drop-shadow" avatarUrl={user?.avatarUrl} />
-                        <p className="text-3xl text-black opacity-80 dark:text-gray-200">{user?.nickname}</p>
+                      <p className="text-3xl text-black opacity-80 dark:text-gray-200">{user?.nickname}</p>
-                      </div>
-                      <MemoList />
                     </div>
+                    <MemoList />
                   </div>
                 </div>
-              </>
+              </div>
-            ) : (
+            </>
-              <>
+          ) : (
-                <p>Not found</p>
+            <>
-              </>
+              <p>Not found</p>
-            ))}
+            </>
-        </div>
+          ))}
-      </section>
+      </div>
-
+    </section>
-      <FloatingNavButton />
-    </>
   );
 };