fix: feed column view initial status in reduce motion mode

Signed-off-by: Innei <i@innei.in>
RSSNext · Jul 12, 2024 · 5e846b9 · 5e846b9
1 parent 19796d9
commit 5e846b9
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 8 deletions.
diff --git a/src/renderer/src/atoms/sidebar.ts b/src/renderer/src/atoms/sidebar.ts
@@ -1,15 +1,17 @@
-import { FeedViewType } from "@renderer/lib/enum"
+import { getRouteParams } from "@renderer/hooks/biz/useRouteParams"
+import type { FeedViewType } from "@renderer/lib/enum"
 import { createAtomHooks } from "@renderer/lib/jotai"
 import { atom } from "jotai"
 
+const viewAtom = atom<FeedViewType | -1>(-1)
 const [
   ,
   useSidebarActiveView,
   useSidebarActiveViewValue,
   useSetSidebarActiveView,
   getSidebarActiveView,
   setSidebarActiveView,
-] = createAtomHooks(atom(FeedViewType.Articles))
+] = createAtomHooks(viewAtom)
 
 export {
   getSidebarActiveView,
@@ -18,3 +20,10 @@ export {
   useSidebarActiveView,
   useSidebarActiveViewValue,
 }
+
+viewAtom.onMount = () => {
+  const { view } = getRouteParams()
+  if (view !== undefined) {
+    setSidebarActiveView(view)
+  }
+}
diff --git a/src/renderer/src/modules/feed-column/index.tsx b/src/renderer/src/modules/feed-column/index.tsx
@@ -12,6 +12,7 @@ import { Routes } from "@renderer/lib/enum"
 import { shortcuts } from "@renderer/lib/shortcuts"
 import { clamp, cn } from "@renderer/lib/utils"
 import { useWheel } from "@use-gesture/react"
+import type { MotionValue } from "framer-motion"
 import { m, useSpring } from "framer-motion"
 import { Lethargy } from "lethargy"
 import { useCallback, useLayoutEffect, useRef } from "react"
@@ -60,6 +61,7 @@ export function FeedColumn() {
     },
     [active, navigateBackHome, spring],
   )
+
   useLayoutEffect(() => {
     const { view } = getRouteParams()
     if (view !== undefined) {
@@ -115,7 +117,6 @@ export function FeedColumn() {
   const normalStyle =
     !window.electron || window.electron.process.platform !== "darwin"
 
-  const reduceMotion = useReduceMotion()
   return (
     <Vibrancy
       className="relative flex h-full flex-col gap-3 pt-2.5"
@@ -178,10 +179,7 @@ export function FeedColumn() {
         ))}
       </div>
       <div className="size-full overflow-hidden" ref={carouselRef}>
-        <m.div
-          className="flex h-full"
-          style={{ x: reduceMotion ? -active * 256 : spring }}
-        >
+        <SwipeWrapper active={active} spring={spring}>
           {views.map((item, index) => (
             <section
               key={item.name}
@@ -195,7 +193,7 @@ export function FeedColumn() {
               )}
             </section>
           ))}
-        </m.div>
+        </SwipeWrapper>
       </div>
       {APP_VERSION?.[0] === "0" && (
         <div className="pointer-events-none absolute bottom-3 w-full text-center text-xs opacity-20">
@@ -208,3 +206,33 @@ export function FeedColumn() {
     </Vibrancy>
   )
 }
+
+const SwipeWrapper: Component<{
+  active: number
+  spring: MotionValue<number>
+}> = ({ children, active, spring }) => {
+  const reduceMotion = useReduceMotion()
+
+  if (reduceMotion) {
+    return (
+      <div
+        className="flex h-full"
+        style={{
+          transform: `translateX(${-active * 256}px)`,
+        }}
+      >
+        {children}
+      </div>
+    )
+  }
+  return (
+    <m.div
+      className="flex h-full"
+      style={{
+        x: spring,
+      }}
+    >
+      {children}
+    </m.div>
+  )
+}