refactor list scroll persistence to use store instead of browser state

src/renderer/components/item-list/helpers/use-item-list-scroll-persist.ts

@@ -1,26 +1,29 @@
 import { useCallback, useMemo } from 'react';
-import { useSearchParams } from 'react-router';
+import { useLocation, useNavigationType } from 'react-router';
 
-import { parseIntParam, setSearchParam } from '/@/renderer/utils/query-params';
+import { useScrollStore } from '/@/renderer/store/scroll.store';
 
 interface UseItemListScrollPersistProps {
     enabled: boolean;
 }
 
 export const useItemListScrollPersist = ({ enabled }: UseItemListScrollPersistProps) => {
-    const [searchParams, setSearchParams] = useSearchParams();
+    const location = useLocation();
+    const navigationType = useNavigationType();
+    const setOffset = useScrollStore((s) => s.setOffset);
+    const getOffset = useScrollStore((s) => s.getOffset);
 
-    const scrollOffset = useMemo(() => parseIntParam(searchParams, 'scrollOffset'), [searchParams]);
+    const scrollOffset = useMemo(() => {
+        if (navigationType !== 'POP') return undefined;
+        return getOffset(location.key);
+    }, [getOffset, location.key, navigationType]);
 
     const handleOnScrollEnd = useCallback(
         (offset: number) => {
             if (!enabled) return;
-
+            setOffset(location.key, offset);
-            setSearchParams((prev) => setSearchParam(prev, 'scrollOffset', offset), {
-                replace: true,
-            });
         },
-        [enabled, setSearchParams],
+        [enabled, location.key, setOffset],
     );
 
     return { handleOnScrollEnd, scrollOffset };

src/renderer/store/index.ts

@@ -2,5 +2,6 @@ export * from './app.store';
 export * from './auth.store';
 export * from './full-screen-player.store';
 export * from './player.store';
+export * from './scroll.store';
 export * from './settings.store';
 export * from './timestamp.store';

src/renderer/store/scroll.store.ts

@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+
+type ScrollState = {
+    getOffset: (key: string) => number | undefined;
+    offsets: Record<string, number>;
+    setOffset: (key: string, offset: number) => void;
+};
+
+export const useScrollStore = create<ScrollState>((set, get) => ({
+    getOffset: (key) => get().offsets[key],
+    offsets: {},
+    setOffset: (key, offset) =>
+        set((s) => ({
+            offsets: { ...s.offsets, [key]: offset },
+        })),
+}));