chore: add mobile header

web/src/components/FloatingNavButton.tsx

-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(filteredMemos);
+        setArchivedMemos(result);
       })
       .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,8 +110,8 @@ 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">
+      <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">
         {memo.parent && (
           <div className="w-auto mb-2">
@@ -221,9 +221,6 @@ const MemoDetail = () => {
         </div>
       </div>
     </section>
-
-      <FloatingNavButton />
-    </>
   );
 };
 

web/src/pages/UserProfile.tsx

 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,8 +35,8 @@ const UserProfile = () => {
   }, [params.username]);
 
   return (
-    <>
     <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">
         {!loadingState.isLoading &&
           (user ? (
@@ -60,9 +60,6 @@ const UserProfile = () => {
           ))}
       </div>
     </section>
-
-      <FloatingNavButton />
-    </>
   );
 };