Move reader "overlay state" to "reader store"

2025-08-31 20:33:12 +02:00
parent 9bedec7115
commit e68cb65874
13 changed files with 76 additions and 94 deletions
--- a/src/features/reader/ReaderStore.ts
+++ b/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 =>
--- a/src/features/reader/contexts/ReaderContextProvider.tsx
+++ b/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>
 );
--- a/src/features/reader/hooks/useReaderResetStates.ts
+++ b/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();
--- a/src/features/reader/hotkeys/ReaderHotkeys.tsx
+++ b/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],
        () => {
--- a/src/features/reader/overlay/ReaderOverlay.types.ts
+++ b/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>>;
-};
--- a/src/features/reader/overlay/ReaderOverlayContext.tsx
+++ b/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>;
-};
--- a/src/features/reader/overlay/ReaderOverlayStore.ts
+++ b/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;
--- a/src/features/reader/overlay/hooks/useReaderHideOverlayOnUserScroll.ts
+++ b/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) {
--- a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
+++ b/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',
--- a/src/features/reader/screens/Reader.tsx
+++ b/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',
--- a/src/features/reader/services/ReaderControls.ts
+++ b/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,
                            );
--- a/src/features/reader/viewer/ReaderViewer.tsx
+++ b/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(
-            isOverlayVisible,
-            setIsOverlayVisible,
-            showPreview,
-            setShowPreview,
-            scrollElementRef,
-        );
+        useReaderHideOverlayOnUserScroll(isOverlayVisible, 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',
--- a/src/lib/zustand/Zustand.types.ts
+++ b/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>;