Move reader "overlay state" to "reader store"

src/features/reader/overlay/ReaderOverlay.types.ts

@@ -19,8 +19,3 @@ interface ReaderNavBarBaseProps extends BaseReaderOverlayProps {
 export interface ReaderBottomBarMobileProps extends ReaderNavBarBaseProps {}
 
 export interface ReaderNavBarDesktopProps extends ReaderNavBarBaseProps {}
-
-export type TReaderOverlayContext = {
-    isVisible: boolean;
-    setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;
-};

src/features/reader/overlay/ReaderOverlayContext.tsx

@@ -1,25 +0,0 @@
-/*
- * Copyright (C) Contributors to the Suwayomi project
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
-import { createContext, useContext, ReactNode, useMemo, useState } from 'react';
-import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts';
-
-export const ReaderOverlayContext = createContext<TReaderOverlayContext>({
-    isVisible: false,
-    setIsVisible: () => {},
-});
-
-export const useReaderOverlayContext = () => useContext(ReaderOverlayContext);
-
-export const ReaderOverlayContextProvider = ({ children }: { children: ReactNode }) => {
-    const [isVisible, setIsVisible] = useState(false);
-
-    const value = useMemo(() => ({ isVisible, setIsVisible }), [isVisible]);
-
-    return <ReaderOverlayContext.Provider value={value}>{children}</ReaderOverlayContext.Provider>;
-};

src/features/reader/overlay/ReaderOverlayStore.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { ImmerStateCreator } from '@/lib/zustand/Zustand.types.ts';
+
+export interface ReaderOverlayStoreSlice {
+    overlay: {
+        isVisible: boolean;
+        setIsVisible: (visible: boolean) => void;
+        reset: () => void;
+    };
+}
+
+const DEFAULT_STATE = {
+    isVisible: false,
+} satisfies Pick<ReaderOverlayStoreSlice['overlay'], 'isVisible'>;
+
+export const createReaderOverlayStoreSlice = <T extends ReaderOverlayStoreSlice>(
+    ...[set, get]: Parameters<ImmerStateCreator<T>>
+): ReaderOverlayStoreSlice =>
+    ({
+        overlay: {
+            isVisible: DEFAULT_STATE.isVisible,
+            setIsVisible: (visible) =>
+                set((draft) => {
+                    draft.overlay.isVisible = visible;
+                }),
+            reset: () => set(() => ({ overlay: { ...get().overlay, ...DEFAULT_STATE } })),
+        },
+    }) as T;

src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts

@@ -7,12 +7,11 @@
  */
 
 import { MutableRefObject, useEffect } from 'react';
-import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts';
 import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+import { getReaderStore } from '@/features/reader/ReaderStore.ts';
 
 export const useReaderHideOverlayOnUserScroll = (
     isOverlayVisible: boolean,
-    setIsOverlayVisible: TReaderOverlayContext['setIsVisible'],
     showPreview: TReaderTapZoneContext['showPreview'],
     setShowPreview: TReaderTapZoneContext['setShowPreview'],
     scrollElementRef: MutableRefObject<HTMLDivElement | null>,
@@ -20,7 +19,7 @@ export const useReaderHideOverlayOnUserScroll = (
     useEffect(() => {
         const handleScroll = () => {
             if (isOverlayVisible) {
-                setIsOverlayVisible(false);
+                getReaderStore().overlay.setIsVisible(false);
             }
 
             if (showPreview) {

src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx

@@ -25,9 +25,7 @@ import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts
 import { IReaderSettings, ProgressBarPosition, ReaderStateChapters } from '@/features/reader/Reader.types.ts';
 import { ReaderProgressBarDirectionWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarDirectionWrapper.tsx';
 import { useReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx';
-import { useReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlayContext.tsx';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
-import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts';
 import {
     ReaderProgressBarProps,
     TReaderProgressBarContext,
@@ -38,7 +36,7 @@ import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
-import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
+import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
 
 const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record<ProgressBarPosition, SlideProps['direction']> = {
     [ProgressBarPosition.BOTTOM]: 'up',
@@ -51,7 +49,6 @@ const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record<ProgressBarPosition, Slid
 const BaseMobileReaderProgressBar = ({
     previousChapter,
     nextChapter,
-    isVisible,
     setIsMaximized,
     isDragging,
     currentPageIndex,
@@ -62,7 +59,6 @@ const BaseMobileReaderProgressBar = ({
     topOffset = 0,
     bottomOffset = 0,
 }: Pick<ReaderStateChapters, 'previousChapter' | 'nextChapter'> &
-    Pick<TReaderOverlayContext, 'isVisible'> &
     Pick<TReaderProgressBarContext, 'setIsMaximized' | 'isDragging'> &
     Pick<ReaderProgressBarProps, 'currentPageIndex' | 'pages'> &
     Pick<IReaderSettings, 'progressBarPosition' | 'progressBarPositionAutoVertical'> & {
@@ -72,6 +68,7 @@ const BaseMobileReaderProgressBar = ({
     }) => {
     const openChapter = ReaderControls.useOpenChapter();
     const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
+    const isVisible = useReaderStore((state) => state.overlay.isVisible);
 
     const [, setRefreshProgressBarPosition] = useState({});
     useResizeObserver(
@@ -361,7 +358,6 @@ export const MobileReaderProgressBar = withPropsFrom(
     memo(BaseMobileReaderProgressBar),
     [
         useReaderStateChaptersContext,
-        useReaderOverlayContext,
         useReaderProgressBarContext,
         userReaderStatePagesContext,
         () => ({ direction: ReaderService.useGetThemeDirection() }),
@@ -370,7 +366,6 @@ export const MobileReaderProgressBar = withPropsFrom(
     [
         'previousChapter',
         'nextChapter',
-        'isVisible',
         'setIsMaximized',
         'isDragging',
         'currentPageIndex',