aiden
/
memos
mirror of https://github.com/usememos/memos
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: home layout

Browse Source
pull/4441/head^2
Johnny 3 months ago
parent 9107a941ca
commit 271a8c8c28
9 changed files with 98 additions and 200 deletions
Show Stats Download Patch File Download Diff File

39
web/src/components/ExploreSidebar/ExploreSidebar.tsx
Unescape Escape View File

@ -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;

38
web/src/components/ExploreSidebar/ExploreSidebarDrawer.tsx
Unescape Escape View File

@ -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;

4
web/src/components/ExploreSidebar/index.ts
Unescape Escape View File

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

4
web/src/components/HomeSidebar/HomeSidebar.tsx
Unescape Escape View File

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

38
web/src/layouts/HomeLayout.tsx
Unescape Escape View File

@ -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;

13
web/src/layouts/SuspenseWrapper.tsx
Unescape Escape View File

@ -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;

59
web/src/pages/Explore.tsx
Unescape Escape View File

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

67
web/src/pages/Home.tsx
Unescape Escape View File

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

36
web/src/router/index.tsx
Unescape Escape View File

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

Write Preview
Loading…
Cancel
Save