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/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,34 +35,31 @@ const UserProfile = () => {
   }, [params.username]);
 
   return (
-    <>
-      <section className="relative top-0 w-full min-h-full overflow-x-hidden">
-        <div className="relative w-full min-h-full mx-auto flex flex-col justify-start items-center">
-          {!loadingState.isLoading &&
-            (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="w-full flex flex-row justify-start items-start">
-                    <div className="flex-grow shrink w-full">
-                      <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} />
-                        <p className="text-3xl text-black opacity-80 dark:text-gray-200">{user?.nickname}</p>
-                      </div>
-                      <MemoList />
+    <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 ? (
+            <>
+              <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="flex-grow shrink w-full">
+                    <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} />
+                      <p className="text-3xl text-black opacity-80 dark:text-gray-200">{user?.nickname}</p>
                     </div>
+                    <MemoList />
                   </div>
                 </div>
-              </>
-            ) : (
-              <>
-                <p>Not found</p>
-              </>
-            ))}
-        </div>
-      </section>
-
-      <FloatingNavButton />
-    </>
+              </div>
+            </>
+          ) : (
+            <>
+              <p>Not found</p>
+            </>
+          ))}
+      </div>
+    </section>
   );
 };