refactor: home layout

web/src/components/ExploreSidebar/ExploreSidebar.tsx

@@ -1,39 +0,0 @@
-import useDebounce from "react-use/lib/useDebounce";
-import SearchBar from "@/components/SearchBar";
-import { useUserStatsStore } from "@/store/v1";
-import { cn } from "@/utils";
-import TagsSection from "../HomeSidebar/TagsSection";
-import MemoFilters from "../MemoFilters";
-import StatisticsView from "../StatisticsView";
-
-interface Props {
-  className?: string;
-}
-
-const ExploreSidebar = (props: Props) => {
-  const userStatsStore = useUserStatsStore();
-
-  useDebounce(
-    async () => {
-      await userStatsStore.listUserStats();
-    },
-    300,
-    [userStatsStore.stateId],
-  );
-
-  return (
-    <aside
-      className={cn(
-        "relative w-full h-auto max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start",
-        props.className,
-      )}
-    >
-      <SearchBar />
-      <MemoFilters />
-      <StatisticsView />
-      <TagsSection readonly={true} />
-    </aside>
-  );
-};
-
-export default ExploreSidebar;

web/src/components/ExploreSidebar/ExploreSidebarDrawer.tsx

@@ -1,38 +0,0 @@
-import { Drawer } from "@mui/joy";
-import { Button } from "@usememos/mui";
-import { SearchIcon } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useLocation } from "react-router-dom";
-import ExploreSidebar from "./ExploreSidebar";
-
-const ExploreSidebarDrawer = () => {
-  const location = useLocation();
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => {
-    setOpen(false);
-  }, [location.pathname]);
-
-  const toggleDrawer = (inOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
-    if (event.type === "keydown" && ((event as React.KeyboardEvent).key === "Tab" || (event as React.KeyboardEvent).key === "Shift")) {
-      return;
-    }
-
-    setOpen(inOpen);
-  };
-
-  return (
-    <>
-      <Button variant="plain" className="!bg-transparent px-2" onClick={toggleDrawer(true)}>
-        <SearchIcon className="w-5 h-auto dark:text-gray-400" />
-      </Button>
-      <Drawer anchor="right" size="sm" open={open} onClose={toggleDrawer(false)}>
-        <div className="w-full h-full px-4 bg-zinc-100 dark:bg-zinc-900">
-          <ExploreSidebar className="py-4" />
-        </div>
-      </Drawer>
-    </>
-  );
-};
-
-export default ExploreSidebarDrawer;

web/src/components/ExploreSidebar/index.ts

@@ -1,4 +0,0 @@
-import ExploreSidebar from "./ExploreSidebar";
-import ExploreSidebarDrawer from "./ExploreSidebarDrawer";
-
-export { ExploreSidebar, ExploreSidebarDrawer };

web/src/components/HomeSidebar/HomeSidebar.tsx

@@ -1,10 +1,10 @@
 import useDebounce from "react-use/lib/useDebounce";
 import SearchBar from "@/components/SearchBar";
-import StatisticsView from "@/components/StatisticsView";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { useMemoList, useUserStatsStore } from "@/store/v1";
 import { cn } from "@/utils";
 import MemoFilters from "../MemoFilters";
+import StatisticsView from "../StatisticsView";
 import ShortcutsSection from "./ShortcutsSection";
 import TagsSection from "./TagsSection";
 
@@ -30,7 +30,7 @@ const HomeSidebar = (props: Props) => {
       <SearchBar />
       <MemoFilters />
       <StatisticsView />
-      <ShortcutsSection />
+      {currentUser && <ShortcutsSection />}
       <TagsSection />
     </aside>
   );

web/src/layouts/HomeLayout.tsx

@@ -0,0 +1,38 @@
+import { observer } from "mobx-react-lite";
+import { Outlet } from "react-router-dom";
+import { HomeSidebar, HomeSidebarDrawer } from "@/components/HomeSidebar";
+import MobileHeader from "@/components/MobileHeader";
+import useResponsiveWidth from "@/hooks/useResponsiveWidth";
+import { cn } from "@/utils";
+
+const HomeLayout = observer(() => {
+  const { md, lg } = useResponsiveWidth();
+
+  return (
+    <section className="@container w-full min-h-full flex flex-col justify-start items-center">
+      {!md && (
+        <MobileHeader>
+          <HomeSidebarDrawer />
+        </MobileHeader>
+      )}
+      <div className={cn("w-full min-h-full flex flex-row justify-start items-start")}>
+        {md && (
+          <div
+            className={cn(
+              "sticky top-0 left-0 shrink-0 h-[100svh] transition-all",
+              "border-r border-gray-200 dark:border-zinc-800",
+              lg ? "px-5 w-72" : "px-4 w-56",
+            )}
+          >
+            <HomeSidebar className={cn("py-6")} />
+          </div>
+        )}
+        <div className={cn("w-full mx-auto px-4 sm:px-6 sm:pt-3 md:pt-6 pb-8", md && "max-w-3xl")}>
+          <Outlet />
+        </div>
+      </div>
+    </section>
+  );
+});
+
+export default HomeLayout;

web/src/layouts/SuspenseWrapper.tsx

@@ -1,13 +0,0 @@
-import { Suspense } from "react";
-import { Outlet } from "react-router-dom";
-import Loading from "@/pages/Loading";
-
-const SuspenseWrapper = () => {
-  return (
-    <Suspense fallback={<Loading />}>
-      <Outlet />
-    </Suspense>
-  );
-};
-
-export default SuspenseWrapper;

web/src/pages/Explore.tsx

@@ -1,18 +1,13 @@
 import dayjs from "dayjs";
 import { useMemo } from "react";
-import { ExploreSidebar, ExploreSidebarDrawer } from "@/components/ExploreSidebar";
 import MemoView from "@/components/MemoView";
-import MobileHeader from "@/components/MobileHeader";
 import PagedMemoList from "@/components/PagedMemoList";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 import { useMemoFilterStore } from "@/store/v1";
 import { Direction, State } from "@/types/proto/api/v1/common";
 import { Memo } from "@/types/proto/api/v1/memo_service";
-import { cn } from "@/utils";
 
 const Explore = () => {
-  const { md, lg } = useResponsiveWidth();
   const user = useCurrentUser();
   const memoFilterStore = useMemoFilterStore();
 
@@ -49,44 +44,24 @@ const Explore = () => {
   }, [user, memoFilterStore.filters, memoFilterStore.orderByTimeAsc]);
 
   return (
-    <section className="@container w-full min-h-full flex flex-col justify-start items-center">
-      {!md && (
-        <MobileHeader>
-          <ExploreSidebarDrawer />
-        </MobileHeader>
-      )}
-      <div className={cn("w-full min-h-full flex flex-row justify-start items-start")}>
-        {md && (
-          <div
-            className={cn(
-              "sticky top-0 left-0 shrink-0 h-[100svh] transition-all",
-              "border-r border-gray-200 dark:border-zinc-800",
-              lg ? "px-5 w-72" : "px-4 w-56",
-            )}
-          >
-            <ExploreSidebar className={cn("py-6")} />
-          </div>
-        )}
-        <div className={cn("w-full mx-auto px-4 sm:px-6 sm:pt-3 md:pt-6 pb-8", md && "max-w-3xl")}>
-          <div className="flex flex-col justify-start items-start w-full max-w-full">
-            <PagedMemoList
-              renderer={(memo: Memo) => <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showCreator showVisibility compact />}
-              listSort={(memos: Memo[]) =>
-                memos
-                  .filter((memo) => memo.state === State.NORMAL)
-                  .sort((a, b) =>
-                    memoFilterStore.orderByTimeAsc
-                      ? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix()
-                      : dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(),
-                  )
-              }
-              direction={memoFilterStore.orderByTimeAsc ? Direction.ASC : Direction.DESC}
-              oldFilter={memoListFilter}
-            />
-          </div>
-        </div>
+    <>
+      <div className="flex flex-col justify-start items-start w-full max-w-full">
+        <PagedMemoList
+          renderer={(memo: Memo) => <MemoView key={`${memo.name}-${memo.updateTime}`} memo={memo} showCreator showVisibility compact />}
+          listSort={(memos: Memo[]) =>
+            memos
+              .filter((memo) => memo.state === State.NORMAL)
+              .sort((a, b) =>
+                memoFilterStore.orderByTimeAsc
+                  ? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix()
+                  : dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(),
+              )
+          }
+          direction={memoFilterStore.orderByTimeAsc ? Direction.ASC : Direction.DESC}
+          oldFilter={memoListFilter}
+        />
       </div>
-    </section>
+    </>
   );
 };
 

web/src/pages/Home.tsx

@@ -1,21 +1,16 @@
 import dayjs from "dayjs";
 import { observer } from "mobx-react-lite";
 import { useMemo } from "react";
-import { HomeSidebar, HomeSidebarDrawer } from "@/components/HomeSidebar";
 import MemoEditor from "@/components/MemoEditor";
 import MemoView from "@/components/MemoView";
-import MobileHeader from "@/components/MobileHeader";
 import PagedMemoList from "@/components/PagedMemoList";
 import useCurrentUser from "@/hooks/useCurrentUser";
-import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 import { useMemoFilterStore } from "@/store/v1";
 import { userStore } from "@/store/v2";
 import { Direction, State } from "@/types/proto/api/v1/common";
 import { Memo } from "@/types/proto/api/v1/memo_service";
-import { cn } from "@/utils";
 
 const Home = observer(() => {
-  const { md, lg } = useResponsiveWidth();
   const user = useCurrentUser();
   const memoFilterStore = useMemoFilterStore();
   const selectedShortcut = userStore.state.shortcuts.find((shortcut) => shortcut.id === memoFilterStore.shortcut);
@@ -53,48 +48,28 @@ const Home = observer(() => {
   }, [user, memoFilterStore.filters, memoFilterStore.orderByTimeAsc]);
 
   return (
-    <section className="@container w-full min-h-full flex flex-col justify-start items-center">
-      {!md && (
-        <MobileHeader>
-          <HomeSidebarDrawer />
-        </MobileHeader>
-      )}
-      <div className={cn("w-full min-h-full flex flex-row justify-start items-start")}>
-        {md && (
-          <div
-            className={cn(
-              "sticky top-0 left-0 shrink-0 h-[100svh] transition-all",
-              "border-r border-gray-200 dark:border-zinc-800",
-              lg ? "px-5 w-72" : "px-4 w-56",
-            )}
-          >
-            <HomeSidebar className={cn("py-6")} />
-          </div>
-        )}
-        <div className={cn("w-full mx-auto px-4 sm:px-6 sm:pt-3 md:pt-6 pb-8", md && "max-w-3xl")}>
-          <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
-          <div className="flex flex-col justify-start items-start w-full max-w-full">
-            <PagedMemoList
-              renderer={(memo: Memo) => <MemoView key={`${memo.name}-${memo.displayTime}`} memo={memo} showVisibility showPinned compact />}
-              listSort={(memos: Memo[]) =>
-                memos
-                  .filter((memo) => memo.state === State.NORMAL)
-                  .sort((a, b) =>
-                    memoFilterStore.orderByTimeAsc
-                      ? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix()
-                      : dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(),
-                  )
-                  .sort((a, b) => Number(b.pinned) - Number(a.pinned))
-              }
-              owner={user.name}
-              direction={memoFilterStore.orderByTimeAsc ? Direction.ASC : Direction.DESC}
-              filter={selectedShortcut?.filter || ""}
-              oldFilter={memoListFilter}
-            />
-          </div>
-        </div>
+    <>
+      <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
+      <div className="flex flex-col justify-start items-start w-full max-w-full">
+        <PagedMemoList
+          renderer={(memo: Memo) => <MemoView key={`${memo.name}-${memo.displayTime}`} memo={memo} showVisibility showPinned compact />}
+          listSort={(memos: Memo[]) =>
+            memos
+              .filter((memo) => memo.state === State.NORMAL)
+              .sort((a, b) =>
+                memoFilterStore.orderByTimeAsc
+                  ? dayjs(a.displayTime).unix() - dayjs(b.displayTime).unix()
+                  : dayjs(b.displayTime).unix() - dayjs(a.displayTime).unix(),
+              )
+              .sort((a, b) => Number(b.pinned) - Number(a.pinned))
+          }
+          owner={user.name}
+          direction={memoFilterStore.orderByTimeAsc ? Direction.ASC : Direction.DESC}
+          filter={selectedShortcut?.filter || ""}
+          oldFilter={memoListFilter}
+        />
       </div>
-    </section>
+    </>
   );
 });
 

web/src/router/index.tsx

@@ -1,7 +1,7 @@
 import { createBrowserRouter } from "react-router-dom";
 import App from "@/App";
+import HomeLayout from "@/layouts/HomeLayout";
 import RootLayout from "@/layouts/RootLayout";
-import SuspenseWrapper from "@/layouts/SuspenseWrapper";
 import About from "@/pages/About";
 import AdminSignIn from "@/pages/AdminSignIn";
 import Archived from "@/pages/Archived";
@@ -37,7 +37,6 @@ const router = createBrowserRouter([
     children: [
       {
         path: Routes.AUTH,
-        element: <SuspenseWrapper />,
         children: [
           {
             path: "",
@@ -62,8 +61,25 @@ const router = createBrowserRouter([
         element: <RootLayout />,
         children: [
           {
-            path: "",
-            element: <Home />,
+            element: <HomeLayout />,
+            children: [
+              {
+                path: "",
+                element: <Home />,
+              },
+              {
+                path: Routes.EXPLORE,
+                element: <Explore />,
+              },
+              {
+                path: Routes.ARCHIVED,
+                element: <Archived />,
+              },
+              {
+                path: "u/:username",
+                element: <UserProfile />,
+              },
+            ],
           },
           {
             path: Routes.RESOURCES,
@@ -73,26 +89,14 @@ const router = createBrowserRouter([
             path: Routes.INBOX,
             element: <Inboxes />,
           },
-          {
-            path: Routes.ARCHIVED,
-            element: <Archived />,
-          },
           {
             path: Routes.SETTING,
             element: <Setting />,
           },
-          {
-            path: Routes.EXPLORE,
-            element: <Explore />,
-          },
           {
             path: "memos/:uid",
             element: <MemoDetail />,
           },
-          {
-            path: "u/:username",
-            element: <UserProfile />,
-          },
           {
             path: Routes.ABOUT,
             element: <About />,