From 7928e0faf3c6bba88ee2e5faab22e2be2201195c Mon Sep 17 00:00:00 2001 From: Innei Date: Wed, 19 Jun 2024 13:10:19 +0800 Subject: [PATCH] init Signed-off-by: Innei --- icons/mgc/line_cute_re.svg | 1 + src/renderer/src/lib/route-builder.test.ts | 4 +- src/renderer/src/lib/route-builder.ts | 2 +- src/renderer/src/modules/feed-column/item.tsx | 3 + .../feed/{[:id] => [id]}/index.tsx | 0 .../feed/{[:id] => [id]}/layout.tsx | 0 .../src/pages/(main)/(context)/layout.tsx | 17 ----- .../(subview)}/discover/index.tsx | 0 .../(subview)}/discover/layout.tsx | 0 .../(subview)}/layout.tsx | 0 .../(subview)}/profile/index.tsx | 0 .../(subview)}/profile/layout.tsx | 0 .../feeds/[feedId]}/index.tsx | 8 +-- .../src/pages/(main)/(layer)/layout.tsx | 1 + src/renderer/src/pages/(main)/index.tsx | 70 +++++++++++++++++++ src/renderer/src/pages/(main)/layout.tsx | 33 ++++----- src/renderer/src/router.tsx | 1 - 17 files changed, 94 insertions(+), 46 deletions(-) create mode 100644 icons/mgc/line_cute_re.svg rename src/renderer/src/pages/(external)/(with-layout)/feed/{[:id] => [id]}/index.tsx (100%) rename src/renderer/src/pages/(external)/(with-layout)/feed/{[:id] => [id]}/layout.tsx (100%) delete mode 100644 src/renderer/src/pages/(main)/(context)/layout.tsx rename src/renderer/src/pages/(main)/{(context)/(nonhome) => (layer)/(subview)}/discover/index.tsx (100%) rename src/renderer/src/pages/(main)/{(context)/(nonhome) => (layer)/(subview)}/discover/layout.tsx (100%) rename src/renderer/src/pages/(main)/{(context)/(nonhome) => (layer)/(subview)}/layout.tsx (100%) rename src/renderer/src/pages/(main)/{(context)/(nonhome) => (layer)/(subview)}/profile/index.tsx (100%) rename src/renderer/src/pages/(main)/{(context)/(nonhome) => (layer)/(subview)}/profile/layout.tsx (100%) rename src/renderer/src/pages/(main)/{(context) => (layer)/feeds/[feedId]}/index.tsx (91%) create mode 100644 src/renderer/src/pages/(main)/(layer)/layout.tsx create mode 100644 src/renderer/src/pages/(main)/index.tsx diff --git a/icons/mgc/line_cute_re.svg b/icons/mgc/line_cute_re.svg new file mode 100644 index 000000000..1878e76c1 --- /dev/null +++ b/icons/mgc/line_cute_re.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/renderer/src/lib/route-builder.test.ts b/src/renderer/src/lib/route-builder.test.ts index b3c61a373..875c4129a 100644 --- a/src/renderer/src/lib/route-builder.test.ts +++ b/src/renderer/src/lib/route-builder.test.ts @@ -10,8 +10,8 @@ describe("test route builder", () => { "./pages/(external)/layout.tsx": fakePromise, "./pages/(external)/(with-layout)/index.tsx": fakePromise, "./pages/(external)/(with-layout)/layout.tsx": fakePromise, - "./pages/(external)/(with-layout)/feed/[:id]/index.tsx": fakePromise, - "./pages/(external)/(with-layout)/feed/[:id]/layout.tsx": fakePromise, + "./pages/(external)/(with-layout)/feed/[id]/index.tsx": fakePromise, + "./pages/(external)/(with-layout)/feed/[id]/layout.tsx": fakePromise, "./pages/(main)/layout.tsx": fakePromise, "./pages/(main)/(context)/layout.tsx": fakePromise, diff --git a/src/renderer/src/lib/route-builder.ts b/src/renderer/src/lib/route-builder.ts index 659893e14..4595f3677 100644 --- a/src/renderer/src/lib/route-builder.ts +++ b/src/renderer/src/lib/route-builder.ts @@ -189,7 +189,7 @@ const normalizePathKey = (key: string) => { return "" } - if (key.startsWith("[:") && key.endsWith("]")) { + if (key.startsWith("[") && key.endsWith("]")) { return `:${key.slice(2, -1)}` } return key diff --git a/src/renderer/src/modules/feed-column/item.tsx b/src/renderer/src/modules/feed-column/item.tsx index 5e1392473..04bb8de5c 100644 --- a/src/renderer/src/modules/feed-column/item.tsx +++ b/src/renderer/src/modules/feed-column/item.tsx @@ -21,6 +21,7 @@ import { useUnreadStore, } from "@renderer/store" import { useMutation } from "@tanstack/react-query" +import { useNavigate } from "react-router-dom" import { toast } from "sonner" import { FeedForm } from "../discover/feed-form" @@ -97,6 +98,7 @@ export function FeedItem({ const feedUnread = useUnreadStore((state) => state.data[feed.feedId] || 0) const { present } = useModalStack() + const navigate = useNavigate() return (
{ e.stopPropagation() setFeedActive(feed) + navigate(`/feeds/${feed.feedId}`) }} onDoubleClick={() => { window.open( diff --git a/src/renderer/src/pages/(external)/(with-layout)/feed/[:id]/index.tsx b/src/renderer/src/pages/(external)/(with-layout)/feed/[id]/index.tsx similarity index 100% rename from src/renderer/src/pages/(external)/(with-layout)/feed/[:id]/index.tsx rename to src/renderer/src/pages/(external)/(with-layout)/feed/[id]/index.tsx diff --git a/src/renderer/src/pages/(external)/(with-layout)/feed/[:id]/layout.tsx b/src/renderer/src/pages/(external)/(with-layout)/feed/[id]/layout.tsx similarity index 100% rename from src/renderer/src/pages/(external)/(with-layout)/feed/[:id]/layout.tsx rename to src/renderer/src/pages/(external)/(with-layout)/feed/[id]/layout.tsx diff --git a/src/renderer/src/pages/(main)/(context)/layout.tsx b/src/renderer/src/pages/(main)/(context)/layout.tsx deleted file mode 100644 index 0341d292e..000000000 --- a/src/renderer/src/pages/(main)/(context)/layout.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { setMainContainerElement } from "@renderer/atoms" -import { FeedColumn } from "@renderer/modules/feed-column" -import { Outlet } from "react-router-dom" - -export function Component() { - return ( -
-
- -
- {/* NOTE: tabIndex for main element can get by `document.activeElement` */} -
- -
-
- ) -} diff --git a/src/renderer/src/pages/(main)/(context)/(nonhome)/discover/index.tsx b/src/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx similarity index 100% rename from src/renderer/src/pages/(main)/(context)/(nonhome)/discover/index.tsx rename to src/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx diff --git a/src/renderer/src/pages/(main)/(context)/(nonhome)/discover/layout.tsx b/src/renderer/src/pages/(main)/(layer)/(subview)/discover/layout.tsx similarity index 100% rename from src/renderer/src/pages/(main)/(context)/(nonhome)/discover/layout.tsx rename to src/renderer/src/pages/(main)/(layer)/(subview)/discover/layout.tsx diff --git a/src/renderer/src/pages/(main)/(context)/(nonhome)/layout.tsx b/src/renderer/src/pages/(main)/(layer)/(subview)/layout.tsx similarity index 100% rename from src/renderer/src/pages/(main)/(context)/(nonhome)/layout.tsx rename to src/renderer/src/pages/(main)/(layer)/(subview)/layout.tsx diff --git a/src/renderer/src/pages/(main)/(context)/(nonhome)/profile/index.tsx b/src/renderer/src/pages/(main)/(layer)/(subview)/profile/index.tsx similarity index 100% rename from src/renderer/src/pages/(main)/(context)/(nonhome)/profile/index.tsx rename to src/renderer/src/pages/(main)/(layer)/(subview)/profile/index.tsx diff --git a/src/renderer/src/pages/(main)/(context)/(nonhome)/profile/layout.tsx b/src/renderer/src/pages/(main)/(layer)/(subview)/profile/layout.tsx similarity index 100% rename from src/renderer/src/pages/(main)/(context)/(nonhome)/profile/layout.tsx rename to src/renderer/src/pages/(main)/(layer)/(subview)/profile/layout.tsx diff --git a/src/renderer/src/pages/(main)/(context)/index.tsx b/src/renderer/src/pages/(main)/(layer)/feeds/[feedId]/index.tsx similarity index 91% rename from src/renderer/src/pages/(main)/(context)/index.tsx rename to src/renderer/src/pages/(main)/(layer)/feeds/[feedId]/index.tsx index 33298a4e8..ab859c9c1 100644 --- a/src/renderer/src/pages/(main)/(context)/index.tsx +++ b/src/renderer/src/pages/(main)/(layer)/feeds/[feedId]/index.tsx @@ -3,13 +3,12 @@ import { cn } from "@renderer/lib/utils" import { EntryColumn } from "@renderer/modules/entry-column" import { EntryContent } from "@renderer/modules/entry-content" import { - feedActions, uiActions, useFeedStore, useUIStore, } from "@renderer/store" import { AnimatePresence } from "framer-motion" -import { useEffect, useMemo, useRef } from "react" +import { useMemo, useRef } from "react" import { useResizable } from "react-resizable-layout" import { useShallow } from "zustand/react/shallow" @@ -20,10 +19,7 @@ export function Component() { activeEntry: state.activeEntryId, })), ) - const { setActiveEntry } = feedActions - useEffect(() => { - setActiveEntry(null) - }, [activeList?.id]) + const containerRef = useRef(null) // Memo this initial value to avoid re-render diff --git a/src/renderer/src/pages/(main)/(layer)/layout.tsx b/src/renderer/src/pages/(main)/(layer)/layout.tsx new file mode 100644 index 000000000..0cb99dba7 --- /dev/null +++ b/src/renderer/src/pages/(main)/(layer)/layout.tsx @@ -0,0 +1 @@ +export { Outlet as Component } from "react-router-dom" diff --git a/src/renderer/src/pages/(main)/index.tsx b/src/renderer/src/pages/(main)/index.tsx new file mode 100644 index 000000000..ab859c9c1 --- /dev/null +++ b/src/renderer/src/pages/(main)/index.tsx @@ -0,0 +1,70 @@ +import { views } from "@renderer/lib/constants" +import { cn } from "@renderer/lib/utils" +import { EntryColumn } from "@renderer/modules/entry-column" +import { EntryContent } from "@renderer/modules/entry-content" +import { + uiActions, + useFeedStore, + useUIStore, +} from "@renderer/store" +import { AnimatePresence } from "framer-motion" +import { useMemo, useRef } from "react" +import { useResizable } from "react-resizable-layout" +import { useShallow } from "zustand/react/shallow" + +export function Component() { + const { activeEntry, activeList } = useFeedStore( + useShallow((state) => ({ + activeList: state.activeList, + activeEntry: state.activeEntryId, + })), + ) + + const containerRef = useRef(null) + + // Memo this initial value to avoid re-render + // eslint-disable-next-line react-compiler/react-compiler + const entryColWidth = useMemo(() => useUIStore.getState().entryColWidth, []) + + const { position, separatorProps } = useResizable({ + axis: "x", + min: 300, + max: 450, + initial: entryColWidth, + containerRef, + onResizeEnd({ position }) { + uiActions.setEntryColWidth(position) + }, + }) + + const inWideMode = activeList && views[activeList.view].wideMode + return ( +
+
+ +
+ {!inWideMode && ( +
+ )} + + {!inWideMode && ( +
+ +
+ )} + +
+ ) +} diff --git a/src/renderer/src/pages/(main)/layout.tsx b/src/renderer/src/pages/(main)/layout.tsx index 6702108cd..0341d292e 100644 --- a/src/renderer/src/pages/(main)/layout.tsx +++ b/src/renderer/src/pages/(main)/layout.tsx @@ -1,22 +1,17 @@ -import { feedActions, useFeedStore } from "@renderer/store" -import { useEffect } from "react" -import { Outlet, useNavigate } from "react-router-dom" +import { setMainContainerElement } from "@renderer/atoms" +import { FeedColumn } from "@renderer/modules/feed-column" +import { Outlet } from "react-router-dom" -function MainLayout() { - const navigate = useNavigate() - - const changed = useFeedStore( - (state) => `${state.activeList?.view}-${state.activeList?.id}`, +export function Component() { + return ( +
+
+ +
+ {/* NOTE: tabIndex for main element can get by `document.activeElement` */} +
+ +
+
) - - useEffect(() => { - feedActions.setActiveEntry(null) - if (changed) { - navigate("/") - } - }, [changed]) - - return } - -export { MainLayout as Component } diff --git a/src/renderer/src/router.tsx b/src/renderer/src/router.tsx index 23e7f7386..ed417bc4d 100644 --- a/src/renderer/src/router.tsx +++ b/src/renderer/src/router.tsx @@ -5,7 +5,6 @@ import { buildGlobRoutes } from "./lib/route-builder" const globTree = import.meta.glob("./pages/**/*.tsx") const tree = buildGlobRoutes(globTree) -// console.log(tree) export const router = createBrowserRouter([ {