Move reader "overlay state" to "reader store"

src/features/reader/ReaderStore.ts

@@ -10,8 +10,12 @@ import { create } from 'zustand';
 import { immer } from 'zustand/middleware/immer';
 import { useShallow } from 'zustand/react/shallow';
 import { TMangaReader } from '@/features/manga/Manga.types.ts';
+import {
+    createReaderOverlayStoreSlice,
+    ReaderOverlayStoreSlice,
+} from '@/features/reader/overlay/ReaderOverlayStore.ts';
 
-interface ReaderStore {
+interface ReaderStore extends ReaderOverlayStoreSlice {
     reset: () => void;
     manga: TMangaReader | undefined;
     setManga: (manga: TMangaReader | undefined) => void;
@@ -32,12 +36,13 @@ const DEFAULT_STATE = {
 } satisfies Pick<ReaderStore, 'manga'> & { scrollbar: Pick<ReaderStore['scrollbar'], 'xSize' | 'ySize'> };
 
 export const useReaderStore = create<ReaderStore>()(
-    immer((set, get) => ({
+    immer((set, get, store) => ({
         ...DEFAULT_STATE,
         reset: () =>
             set((draft) => {
                 draft.manga = DEFAULT_STATE.manga;
                 draft.scrollbar = { ...get().scrollbar, ...DEFAULT_STATE.scrollbar };
+                get().overlay.reset();
             }),
         setManga: (manga) =>
             set((draft) => {
@@ -54,6 +59,7 @@ export const useReaderStore = create<ReaderStore>()(
                     draft.scrollbar.ySize = size;
                 }),
         },
+        ...createReaderOverlayStoreSlice(set, get, store),
     })),
 );
 export const useReaderStoreShallow = <T>(selector: (state: ReaderStore) => T): T =>

src/features/reader/contexts/ReaderContextProvider.tsx

@@ -9,18 +9,15 @@
 import { ReactNode } from 'react';
 import { ReaderStateContextProvider } from '@/features/reader/contexts/state/ReaderStateContextProvider.tsx';
 import { ReaderAutoScrollContextProvider } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx';
-import { ReaderOverlayContextProvider } from '@/features/reader/overlay/ReaderOverlayContext.tsx';
 import { ReaderProgressBarContextProvider } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx';
 import { ReaderTapZoneContextProvider } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx';
 
 export const ReaderContextProvider = ({ children }: { children?: ReactNode }) => (
     <ReaderStateContextProvider>
         <ReaderTapZoneContextProvider>
-            <ReaderOverlayContextProvider>
             <ReaderProgressBarContextProvider>
                 <ReaderAutoScrollContextProvider>{children}</ReaderAutoScrollContextProvider>
             </ReaderProgressBarContextProvider>
-            </ReaderOverlayContextProvider>
         </ReaderTapZoneContextProvider>
     </ReaderStateContextProvider>
 );

src/features/reader/hooks/useReaderResetStates.ts

@@ -16,7 +16,6 @@ import {
     TReaderStateSettingsContext,
 } from '@/features/reader/Reader.types.ts';
 import { DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG } from '@/features/reader/settings/ReaderSettingsMetadata.ts';
-import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts';
 import { READER_STATE_CHAPTERS_DEFAULTS } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { getReaderStore } from '@/features/reader/ReaderStore.ts';
 
@@ -29,7 +28,6 @@ export const useReaderResetStates = (
     setPageUrls: ReaderStatePages['setPageUrls'],
     setPageLoadStates: ReaderStatePages['setPageLoadStates'],
     setTransitionPageMode: ReaderStatePages['setTransitionPageMode'],
-    setIsOverlayVisible: TReaderOverlayContext['setIsVisible'],
     setSettings: TReaderStateSettingsContext['setSettings'],
     cancelAutoScroll: TReaderAutoScrollContext['cancel'],
 ) => {
@@ -46,8 +44,6 @@ export const useReaderResetStates = (
             setPageLoadStates([{ url: '', loaded: false }]);
             setTransitionPageMode(ReaderTransitionPageMode.NONE);
 
-            setIsOverlayVisible(false);
-
             setSettings(DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG);
 
             cancelAutoScroll();

src/features/reader/hotkeys/ReaderHotkeys.tsx

@@ -12,7 +12,6 @@ import { useTheme } from '@mui/material/styles';
 import { HOTKEY_SCOPES } from '@/features/hotkeys/Hotkeys.constants.ts';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { IReaderSettings, ReaderHotkey } from '@/features/reader/Reader.types.ts';
-import { useReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlayContext.tsx';
 import { getNextRotationValue } from '@/base/utils/ValueRotationButton.utils.ts';
 import {
     AUTO_SCROLL_SPEED,
@@ -27,6 +26,7 @@ import { ScrollOffset } from '@/base/Base.types.ts';
 import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
 import { useReaderAutoScrollContext } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx';
 import { useReaderTapZoneContext } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx';
+import { getReaderStore } from '@/features/reader/ReaderStore.ts';
 
 const useHotkeys = (...args: Parameters<typeof useHotKeysHook>): ReturnType<typeof useHotKeysHook> => {
     const [keys, callback, options, dependencies] = args;
@@ -64,7 +64,6 @@ export const ReaderHotkeys = ({
     const { direction: themeDirection } = useTheme();
     const readerThemeDirection = ReaderService.useGetThemeDirection();
     const { enableScope, disableScope } = useHotkeysContext();
-    const { isVisible, setIsVisible: setIsOverlayVisible } = useReaderOverlayContext();
     const {
         hotkeys,
         pageScaleMode,
@@ -104,7 +103,6 @@ export const ReaderHotkeys = ({
                 themeDirection,
                 scrollElementRef.current,
                 openChapter,
-                setIsOverlayVisible,
                 setShowPreview,
                 scrollAmount,
             );
@@ -139,7 +137,6 @@ export const ReaderHotkeys = ({
                 themeDirection,
                 scrollElementRef.current,
                 openChapter,
-                setIsOverlayVisible,
                 setShowPreview,
                 scrollAmount,
             );
@@ -164,7 +161,9 @@ export const ReaderHotkeys = ({
         () => openChapter(getOptionForDirection('next', 'previous', readerThemeDirection)),
         [openChapter, readerThemeDirection],
     );
-    useHotkeys(hotkeys[ReaderHotkey.TOGGLE_MENU], () => setIsOverlayVisible(!isVisible), [isVisible]);
+    useHotkeys(hotkeys[ReaderHotkey.TOGGLE_MENU], () =>
+        getReaderStore().overlay.setIsVisible(!getReaderStore().overlay.isVisible),
+    );
     useHotkeys(
         hotkeys[ReaderHotkey.CYCLE_SCALE_TYPE],
         () => {

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',

src/features/reader/screens/Reader.tsx

@@ -22,7 +22,6 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'
 import { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { GET_CHAPTERS_READER } from '@/lib/graphql/queries/ChapterQuery.ts';
 import { TapZoneLayout } from '@/features/reader/tap-zones/TapZoneLayout.tsx';
-import { useReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlayContext.tsx';
 import { ReaderRGBAFilter } from '@/features/reader/filters/ReaderRGBAFilter.tsx';
 import { useReaderStateSettingsContext } from '@/features/reader/contexts/state/ReaderStateSettingsContext.tsx';
 import { ReaderViewer } from '@/features/reader/viewer/ReaderViewer.tsx';
@@ -39,7 +38,6 @@ import {
 } from '@/features/reader/Reader.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
-import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useReaderStateChaptersContext } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { useReaderAutoScrollContext } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx';
@@ -57,8 +55,6 @@ import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderS
 const BaseReader = ({
     setOverride,
     readerNavBarWidth,
-    isVisible: isOverlayVisible,
-    setIsVisible: setIsOverlayVisible,
     shouldSkipDupChapters,
     shouldSkipFilteredChapters,
     backgroundColor,
@@ -83,7 +79,6 @@ const BaseReader = ({
     cancelAutoScroll,
     setShowPreview,
 }: Pick<NavbarContextType, 'setOverride' | 'readerNavBarWidth'> &
-    Pick<TReaderOverlayContext, 'isVisible' | 'setIsVisible'> &
     Pick<TReaderStateSettingsContext, 'setSettings'> &
     Pick<
         IReaderSettings,
@@ -117,6 +112,7 @@ const BaseReader = ({
     }) => {
     const { t } = useTranslation();
     const manga = useReaderStoreShallow((state) => state.manga);
+    const overlay = useReaderStoreShallow((state) => state.overlay);
 
     const scrollElementRef = useRef<HTMLDivElement | null>(null);
 
@@ -166,7 +162,6 @@ const BaseReader = ({
         setPageUrls,
         setPageLoadStates,
         setTransitionPageMode,
-        setIsOverlayVisible,
         setSettings,
         cancelAutoScroll,
     );
@@ -207,10 +202,10 @@ const BaseReader = ({
             value: (
                 <Box sx={{ position: 'absolute' }}>
                     <ReaderHotkeys scrollElementRef={scrollElementRef} />
-                    <ReaderOverlay isVisible={isOverlayVisible} />
+                    <ReaderOverlay isVisible={overlay.isVisible} />
                     {!scrollElementRef.current && (
                         <Box
-                            onClick={() => setIsOverlayVisible(!isOverlayVisible)}
+                            onClick={() => overlay.setIsVisible(!overlay.isVisible)}
                             sx={{
                                 position: 'fixed',
                                 top: 0,
@@ -226,7 +221,7 @@ const BaseReader = ({
         });
 
         return () => setOverride({ status: false, value: null });
-    }, [isOverlayVisible, setIsOverlayVisible, scrollElementRef.current]);
+    }, [overlay.isVisible, scrollElementRef.current]);
 
     if (error) {
         return (
@@ -301,7 +296,6 @@ export const Reader = withPropsFrom(
     memo(BaseReader),
     [
         useNavBarContext,
-        useReaderOverlayContext,
         useReaderStateChaptersContext,
         useReaderStateSettingsContext,
         () => {
@@ -331,8 +325,6 @@ export const Reader = withPropsFrom(
     [
         'setOverride',
         'readerNavBarWidth',
-        'isVisible',
-        'setIsVisible',
         'shouldSkipDupChapters',
         'shouldSkipFilteredChapters',
         'backgroundColor',

src/features/reader/services/ReaderControls.ts

@@ -36,7 +36,6 @@ import {
     isEndOfPageInViewport,
     isPageInViewport,
 } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
-import { useReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlayContext.tsx';
 import { useReaderTapZoneContext } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx';
 import { TapZoneRegionType, TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
 import { ReaderTapZoneService } from '@/features/reader/tap-zones/ReaderTapZoneService.ts';
@@ -51,11 +50,11 @@ import { useMetadataServerSettings } from '@/features/settings/services/ServerSe
 import { ChapterIdInfo, TChapterReader } from '@/features/chapter/Chapter.types.ts';
 import { awaitConfirmation } from '@/base/utils/AwaitableDialog.tsx';
 import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts';
-import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts';
 import {
     ReaderProgressBarProps,
     TReaderProgressCurrentPage,
 } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
+import { getReaderStore } from '@/features/reader/ReaderStore.ts';
 
 const getScrollDirectionInvert = (
     scrollDirection: ScrollDirection,
@@ -99,7 +98,6 @@ export class ReaderControls {
         themeDirection: Direction,
         element: HTMLElement,
         openChapter: ReturnType<(typeof ReaderControls)['useOpenChapter']>,
-        setIsOverlayVisible: TReaderOverlayContext['setIsVisible'],
         setShowPreview: TReaderTapZoneContext['setShowPreview'],
         scrollAmountPercentage: number = ReaderScrollAmount.LARGE,
     ): void {
@@ -128,7 +126,7 @@ export class ReaderControls {
         const getNewScrollPosition = (currentPos: number, elementSize: number) =>
             currentPos + elementSize * scrollAmount * scrollDirection;
 
-        setIsOverlayVisible(false);
+        getReaderStore().overlay.setIsVisible(false);
         setShowPreview(false);
 
         const doScroll = (
@@ -351,7 +349,6 @@ export class ReaderControls {
         const { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode } =
             userReaderStatePagesContext();
         const { previousChapter, nextChapter } = useReaderStateChaptersContext();
-        const { setIsVisible: setIsOverlayVisible } = useReaderOverlayContext();
         const { setShowPreview } = useReaderTapZoneContext();
         const { readingDirection, readingMode, shouldShowTransitionPage } = ReaderService.useSettings();
         const openChapter = ReaderControls.useOpenChapter();
@@ -383,7 +380,7 @@ export class ReaderControls {
                 );
 
                 if (hideOverlay) {
-                    setIsOverlayVisible(false);
+                    getReaderStore().overlay.setIsVisible(false);
                     setShowPreview(false);
                 }
 
@@ -598,7 +595,6 @@ export class ReaderControls {
         scrollElement: HTMLElement | null,
     ): (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void {
         const { direction: themeDirection } = useTheme();
-        const { setIsVisible: setIsOverlayVisible } = useReaderOverlayContext();
         const { currentPageIndex, pages } = userReaderStatePagesContext();
         const { setShowPreview } = useReaderTapZoneContext();
         const { readingMode, readingDirection, isStaticNav, scrollAmount } = ReaderService.useSettings();
@@ -624,7 +620,7 @@ export class ReaderControls {
 
                 switch (action) {
                     case TapZoneRegionType.MENU:
-                        setIsOverlayVisible((isVisible) => isStaticNav || !isVisible);
+                        getReaderStore().overlay.setIsVisible(isStaticNav || !getReaderStore().overlay.isVisible);
                         break;
                     case TapZoneRegionType.PREVIOUS:
                     case TapZoneRegionType.NEXT:
@@ -637,7 +633,6 @@ export class ReaderControls {
                                 themeDirection,
                                 scrollElement,
                                 openChapter,
-                                setIsOverlayVisible,
                                 setShowPreview,
                                 scrollAmount,
                             );

src/features/reader/viewer/ReaderViewer.tsx

@@ -41,9 +41,7 @@ import {
     shouldApplyReaderWidth,
 } from '@/features/reader/settings/ReaderSettings.utils.tsx';
 import { useMouseDragScroll } from '@/base/hooks/useMouseDragScroll.tsx';
-import { useReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlayContext.tsx';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
-import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useReaderAutoScrollContext } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx';
 import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
@@ -67,7 +65,7 @@ import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types
 import { useReaderPreserveScrollPosition } from '@/features/reader/viewer/hooks/useReaderPreserveScrollPosition.ts';
 
 import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
-import { getReaderStore } from '@/features/reader/ReaderStore.ts';
+import { getReaderStore, useReaderStore } from '@/features/reader/ReaderStore.ts';
 
 const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
     [ReadingMode.SINGLE_PAGE]: PageInViewportType.X,
@@ -104,8 +102,6 @@ const BaseReaderViewer = forwardRef(
             shouldStretchPage,
             isStaticNav,
             readerNavBarWidth,
-            isVisible: isOverlayVisible,
-            setIsVisible: setIsOverlayVisible,
             updateCurrentPageIndex,
             showPreview,
             setShowPreview,
@@ -145,7 +141,6 @@ const BaseReaderViewer = forwardRef(
                 | 'isStaticNav'
             > &
             Pick<NavbarContextType, 'readerNavBarWidth'> &
-            Pick<TReaderOverlayContext, 'isVisible' | 'setIsVisible'> &
             Pick<
                 ReaderStateChapters,
                 | 'initialChapter'
@@ -162,6 +157,7 @@ const BaseReaderViewer = forwardRef(
         ref: ForwardedRef<HTMLDivElement | null>,
     ) => {
         const { direction: themeDirection } = useTheme();
+        const isOverlayVisible = useReaderStore((state) => state.overlay.isVisible);
         const { resumeMode = ReaderResumeMode.START } = useLocation<ReaderOpenChapterLocationState>().state ?? {
             resumeMode: ReaderResumeMode.START,
         };
@@ -274,13 +270,7 @@ const BaseReaderViewer = forwardRef(
         );
         useReaderHideCursorOnInactivity(scrollElementRef);
         useReaderHorizontalModeInvertXYScrolling(readingMode, readingDirection, scrollElementRef);
-        useReaderHideOverlayOnUserScroll(
+        useReaderHideOverlayOnUserScroll(isOverlayVisible, showPreview, setShowPreview, scrollElementRef);
-            isOverlayVisible,
-            setIsOverlayVisible,
-            showPreview,
-            setShowPreview,
-            scrollElementRef,
-        );
         useReaderAutoScroll(isOverlayVisible, automaticScrolling, isStaticNav);
         useReaderPreserveScrollPosition(
             scrollElementRef,
@@ -447,7 +437,6 @@ export const ReaderViewer = withPropsFrom(
     [
         userReaderStatePagesContext,
         ReaderService.useSettingsWithoutDefaultFlag,
-        useReaderOverlayContext,
         () => ({ updateCurrentPageIndex: ReaderControls.useUpdateCurrentPageIndex() }),
         useReaderTapZoneContext,
         useReaderStateChaptersContext,
@@ -478,8 +467,6 @@ export const ReaderViewer = withPropsFrom(
         'isStaticNav',
         'readerNavBarWidth',
         'transitionPageMode',
-        'isVisible',
-        'setIsVisible',
         'updateCurrentPageIndex',
         'showPreview',
         'setShowPreview',

src/lib/zustand/Zustand.types.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 { StateCreator } from 'zustand';
+
+export type ImmerStateCreator<T> = StateCreator<T, [['zustand/immer', never], never], [], T>;