Access reader store setters directly without hook

src/features/reader/auto-scroll/hooks/useReaderAutoScroll.ts

@@ -8,20 +8,21 @@
 
 import { useEffect } from 'react';
 import { IReaderSettings } from '@/features/reader/Reader.types.ts';
+import { getReaderAutoScrollStore, useReaderAutoScrollStore } from '@/features/reader/stores/ReaderStore.ts';
+
+export const useReaderAutoScroll = (isOverlayVisible: boolean, isStaticNav: IReaderSettings['isStaticNav']): void => {
+    const { isPaused } = useReaderAutoScrollStore((state) => ({
+        isPaused: state.autoScroll.isPaused,
+    }));
 
-export const useReaderAutoScroll = (
-    isOverlayVisible: boolean,
-    isAutoScrollPaused: boolean,
-    pauseAutoScroll: () => void,
-    resumeAutoScroll: () => void,
-    isStaticNav: IReaderSettings['isStaticNav'],
-): void => {
     useEffect(() => {
+        const { pause, resume } = getReaderAutoScrollStore();
+
         if (isOverlayVisible && !isStaticNav) {
-            pauseAutoScroll();
+            pause();
             return;
         }
 
-        resumeAutoScroll();
+        resume();
-    }, [isOverlayVisible, isAutoScrollPaused, isStaticNav]);
+    }, [isOverlayVisible, isPaused, isStaticNav]);
 };

src/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx

@@ -19,7 +19,7 @@ import { plural } from '@lingui/core/macro';
 import { IReaderSettings } from '@/features/reader/Reader.types.ts';
 import { AUTO_SCROLL_SPEED } from '@/features/reader/settings/ReaderSettings.constants.tsx';
 import { coerceIn } from '@/lib/HelperFunctions.ts';
-import { useReaderAutoScrollStore } from '@/features/reader/stores/ReaderStore.ts';
+import { getReaderAutoScrollStore, useReaderAutoScrollStore } from '@/features/reader/stores/ReaderStore.ts';
 
 export const ReaderNavBarDesktopAutoScroll = ({
     autoScroll,
@@ -28,10 +28,7 @@ export const ReaderNavBarDesktopAutoScroll = ({
     setAutoScroll: (newAutoScroll: IReaderSettings['autoScroll'], commit: boolean) => void;
 }) => {
     const { t } = useLingui();
-    const { isActive, toggleActive } = useReaderAutoScrollStore((state) => ({
+    const isActive = useReaderAutoScrollStore((state) => state.autoScroll.isActive);
-        isActive: state.autoScroll.isActive,
-        toggleActive: state.autoScroll.toggleActive,
-    }));
 
     const updateTimeout = useRef<NodeJS.Timeout>(undefined);
 
@@ -40,7 +37,7 @@ export const ReaderNavBarDesktopAutoScroll = ({
             <Button
                 sx={{ justifyContent: 'start', textTransform: 'unset', flexGrow: 1 }}
                 size="large"
-                onClick={toggleActive}
+                onClick={() => getReaderAutoScrollStore().toggleActive()}
                 color={isActive ? 'secondary' : 'primary'}
                 variant="contained"
                 startIcon={isActive ? <PauseCircleFilledIcon /> : <PlayCircleFilledIcon />}

src/features/reader/hooks/useReaderSetSettingsState.ts

@@ -13,16 +13,16 @@ import {
     useDefaultReaderSettings,
 } from '@/features/reader/settings/ReaderSettingsMetadata.ts';
 import { isAutoWebtoonMode } from '@/features/reader/settings/ReaderSettings.utils.tsx';
-import { ReadingMode, TReaderStateSettingsContext } from '@/features/reader/Reader.types.ts';
+import { ReadingMode } from '@/features/reader/Reader.types.ts';
 import { GetMangaReaderQuery } from '@/lib/graphql/generated/graphql.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { getReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
 
 export const useReaderSetSettingsState = (
     mangaResponse: ReturnType<typeof requestManager.useGetManga<GetMangaReaderQuery>>,
     defaultSettingsResponse: ReturnType<typeof useDefaultReaderSettings>['request'],
     defaultSettings: ReturnType<typeof useDefaultReaderSettings>['settings'],
     defaultSettingsMetadata: ReturnType<typeof useDefaultReaderSettings>['metadata'],
-    setSettings: TReaderStateSettingsContext['setSettings'],
     setAreSettingsSet: (areSet: boolean) => void,
 ) => {
     useEffect(() => {
@@ -56,7 +56,7 @@ export const useReaderSetSettingsState = (
         );
 
         const finalSettings = getReaderSettingsFor(mangaFromResponse, profileSettings);
-        setSettings(finalSettings);
+        getReaderSettingsStore().setSettings(finalSettings);
         setAreSettingsSet(true);
     }, [mangaResponse.data?.manga, defaultSettings]);
 };

src/features/reader/hooks/useReaderShowSettingPreviewOnChange.ts

@@ -13,7 +13,7 @@ import { useLingui } from '@lingui/react/macro';
 import { IReaderSettings, IReaderSettingsWithDefaultFlag } from '@/features/reader/Reader.types.ts';
 import { makeToast } from '@/base/utils/Toast.ts';
 import { READING_MODE_VALUE_TO_DISPLAY_DATA } from '@/features/reader/settings/ReaderSettings.constants.tsx';
-import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+import { getReaderTapZoneStore } from '@/features/reader/stores/ReaderStore.ts';
 
 const HIDE_PREVIEW_TIMEOUT = d(5).seconds.inWholeMilliseconds;
 
@@ -26,7 +26,6 @@ export const useReaderShowSettingPreviewOnChange = (
     tapZoneInvertMode: IReaderSettingsWithDefaultFlag['tapZoneInvertMode'],
     shouldShowReadingModePreview: IReaderSettings['shouldShowReadingModePreview'],
     shouldShowTapZoneLayoutPreview: IReaderSettings['shouldShowTapZoneLayoutPreview'],
-    setShowPreview: TReaderTapZoneContext['setShowPreview'],
 ) => {
     const { t } = useLingui();
 
@@ -55,9 +54,9 @@ export const useReaderShowSettingPreviewOnChange = (
             JSON.stringify(tapZoneInvertMode) !== JSON.stringify(previousTapZoneInvertMode.current);
         const showTapZoneLayoutPreview = shouldShowTapZoneLayoutPreview && didTapZoneLayoutChange;
         if (showTapZoneLayoutPreview) {
-            setShowPreview(true);
+            getReaderTapZoneStore().setShowPreview(true);
             if (isInitialPreview.current) {
-                setTimeout(() => setShowPreview(false), HIDE_PREVIEW_TIMEOUT);
+                setTimeout(() => getReaderTapZoneStore().setShowPreview(false), HIDE_PREVIEW_TIMEOUT);
             }
         }
         previousTapZoneLayout.current = tapZoneLayout;

src/features/reader/hotkeys/ReaderHotkeys.tsx

@@ -27,7 +27,6 @@ import {
     getReaderAutoScrollStore,
     getReaderOverlayStore,
     getReaderSettingsStore,
-    getReaderTapZoneStore,
     useReaderSettingsStore,
 } from '@/features/reader/stores/ReaderStore.ts';
 
@@ -92,7 +91,6 @@ export const ReaderHotkeys = ({
             readingMode.value,
             readingDirection.value,
             scrollElementRef.current,
-            getReaderTapZoneStore().setShowPreview,
             scrollAmount,
         );
     });
@@ -115,7 +113,6 @@ export const ReaderHotkeys = ({
             readingMode.value,
             readingDirection.value,
             scrollElementRef.current,
-            getReaderTapZoneStore().setShowPreview,
             scrollAmount,
         );
     });

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

@@ -7,15 +7,20 @@
  */
 
 import { MutableRefObject, useEffect } from 'react';
-import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+import {
-import { getReaderOverlayStore } from '@/features/reader/stores/ReaderStore.ts';
+    getReaderOverlayStore,
+    getReaderTapZoneStore,
+    useReaderTapZoneStore,
+} from '@/features/reader/stores/ReaderStore.ts';
 
 export const useReaderHideOverlayOnUserScroll = (
     isOverlayVisible: boolean,
-    showPreview: TReaderTapZoneContext['showPreview'],
-    setShowPreview: TReaderTapZoneContext['setShowPreview'],
     scrollElementRef: MutableRefObject<HTMLDivElement | null>,
 ) => {
+    const { showPreview } = useReaderTapZoneStore((state) => ({
+        showPreview: state.tapZone.showPreview,
+    }));
+
     useEffect(() => {
         const handleScroll = () => {
             if (isOverlayVisible) {
@@ -23,7 +28,7 @@ export const useReaderHideOverlayOnUserScroll = (
             }
 
             if (showPreview) {
-                setShowPreview(false);
+                getReaderTapZoneStore().setShowPreview(false);
             }
         };
 

src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx

@@ -22,7 +22,11 @@ import { CHAPTER_ACTION_TO_TRANSLATION, FALLBACK_CHAPTER } from '@/features/chap
 import { IconBrowser } from '@/assets/icons/IconBrowser.tsx';
 import { IconWebView } from '@/assets/icons/IconWebView.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
-import { useReaderChaptersStore, useReaderPagesStore } from '@/features/reader/stores/ReaderStore.ts';
+import {
+    getReaderPagesStore,
+    useReaderChaptersStore,
+    useReaderPagesStore,
+} from '@/features/reader/stores/ReaderStore.ts';
 import { ChapterDownloadInfo, ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
 
 const DownloadButton = ({ id = -1, isDownloaded }: ChapterIdInfo & ChapterDownloadInfo) => {
@@ -68,11 +72,7 @@ export const ReaderNavBarDesktopActions = memo(() => {
     }));
 
     const { t } = useLingui();
-    const { pageLoadStates, setPageLoadStates, setRetryFailedPagesKeyPrefix } = useReaderPagesStore((state) => ({
+    const pageLoadStates = useReaderPagesStore((state) => state.pages.pageLoadStates);
-        pageLoadStates: state.pages.pageLoadStates,
-        setPageLoadStates: state.pages.setPageLoadStates,
-        setRetryFailedPagesKeyPrefix: state.pages.setRetryFailedPagesKeyPrefix,
-    }));
 
     const pageRetryKeyPrefix = useRef<number>(0);
 
@@ -88,13 +88,13 @@ export const ReaderNavBarDesktopActions = memo(() => {
             <CustomTooltip title={t`Retry errored pages`} disabled={!haveSomePagesFailedToLoad}>
                 <IconButton
                     onClick={() => {
-                        setPageLoadStates((statePageLoadStates) =>
+                        getReaderPagesStore().setPageLoadStates((statePageLoadStates) =>
                             statePageLoadStates.map((pageLoadState) => ({
                                 url: pageLoadState.url,
                                 loaded: pageLoadState.loaded,
                             })),
                         );
-                        setRetryFailedPagesKeyPrefix(`${pageRetryKeyPrefix.current}`);
+                        getReaderPagesStore().setRetryFailedPagesKeyPrefix(`${pageRetryKeyPrefix.current}`);
                         pageRetryKeyPrefix.current = (pageRetryKeyPrefix.current + 1) % 1000;
                     }}
                     disabled={!haveSomePagesFailedToLoad}

src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx

@@ -15,14 +15,15 @@ import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { DefaultSettingFootnote } from '@/features/reader/settings/components/DefaultSettingFootnote.tsx';
 import { ReaderSettingAutoScroll } from '@/features/reader/auto-scroll/settings/ReaderSettingAutoScroll.tsx';
 import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
-import { useReaderAutoScrollStore, useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
+import {
+    getReaderAutoScrollStore,
+    useReaderAutoScrollStore,
+    useReaderSettingsStore,
+} from '@/features/reader/stores/ReaderStore.ts';
 
 const BaseReaderBottomBarMobileQuickSettings = () => {
     const { t } = useLingui();
-    const { isActive, toggleActive } = useReaderAutoScrollStore((state) => ({
+    const isActive = useReaderAutoScrollStore((state) => state.autoScroll.isActive);
-        isActive: state.autoScroll.isActive,
-        toggleActive: state.autoScroll.toggleActive,
-    }));
     const { readingMode, readingDirection, autoScroll } = useReaderSettingsStore((state) => ({
         readingMode: state.settings.readingMode,
         readingDirection: state.settings.readingDirection,
@@ -44,7 +45,11 @@ const BaseReaderBottomBarMobileQuickSettings = () => {
                 isDefaultable
                 onDefault={() => ReaderService.deleteSetting('readingDirection')}
             />
-            <CheckboxInput label={t`Auto scroll`} checked={isActive} onChange={() => toggleActive()} />
+            <CheckboxInput
+                label={t`Auto scroll`}
+                checked={isActive}
+                onChange={() => getReaderAutoScrollStore().toggleActive()}
+            />
             <ReaderSettingAutoScroll
                 autoScroll={autoScroll}
                 setAutoScroll={(...args) => ReaderService.updateSetting('autoScroll', ...args)}

src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx

@@ -32,6 +32,7 @@ import { ReaderProgressBarSlotWrapper } from '@/features/reader/overlay/progress
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { ReadingMode } from '@/features/reader/Reader.types.ts';
 import {
+    getReaderProgressBarStore,
     useReaderPagesStore,
     useReaderProgressBarStore,
     useReaderSettingsStore,
@@ -73,10 +74,7 @@ const BaseReaderProgressBar = ({
         currentPageIndex: state.pages.currentPageIndex,
     }));
     const readingMode = useReaderSettingsStore((state) => state.settings.readingMode.value);
-    const { isDragging, setIsDragging } = useReaderProgressBarStore((state) => ({
+    const isDragging = useReaderProgressBarStore((state) => state.progressBar.isDragging);
-        isDragging: state.progressBar.isDragging,
-        setIsDragging: state.progressBar.setIsDragging,
-    }));
 
     const progressBarRef = useRef<HTMLDivElement | null>(null);
     const draggingDetectionTimeout = useRef<NodeJS.Timeout>(undefined);
@@ -147,11 +145,11 @@ const BaseReaderProgressBar = ({
         );
 
         clearTimeout(draggingDetectionTimeout.current);
-        draggingDetectionTimeout.current = setTimeout(() => setIsDragging(true), 250);
+        draggingDetectionTimeout.current = setTimeout(() => getReaderProgressBarStore().setIsDragging(true), 250);
     };
 
     const handleMouseUp = () => {
-        setIsDragging(false);
+        getReaderProgressBarStore().setIsDragging(false);
         clearTimeout(draggingDetectionTimeout.current);
     };
 
@@ -174,7 +172,7 @@ const BaseReaderProgressBar = ({
                 >
                     {currentPage.name}
                 </ReaderProgressBarPageNumber>
-                <ClickAwayListener onClickAway={() => setIsDragging(false)}>
+                <ClickAwayListener onClickAway={() => getReaderProgressBarStore().setIsDragging(false)}>
                     <ReaderProgressBarSlotsActionArea
                         {...slotProps?.progressBarSlotsActionArea}
                         onMouseDown={handleMouseDown}

src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx

@@ -25,6 +25,7 @@ import {
     useReaderProgressBarStore,
     useReaderScrollbarStore,
     useReaderSettingsStore,
+    getReaderProgressBarStore,
 } from '@/features/reader/stores/ReaderStore.ts';
 
 const BaseStandardReaderProgressBar = ({
@@ -44,9 +45,8 @@ const BaseStandardReaderProgressBar = ({
             progressBarPosition: state.settings.progressBarPosition,
             progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
         }));
-    const { isMaximized, setIsMaximized, isDragging } = useReaderProgressBarStore((state) => ({
+    const { isMaximized, isDragging } = useReaderProgressBarStore((state) => ({
         isMaximized: state.progressBar.isMaximized,
-        setIsMaximized: state.progressBar.setIsMaximized,
         isDragging: state.progressBar.isDragging,
     }));
 
@@ -151,8 +151,8 @@ const BaseStandardReaderProgressBar = ({
                                 pointerEvents: 'none',
                             }),
                         },
-                        onMouseEnter: () => setIsMaximized(true),
+                        onMouseEnter: () => getReaderProgressBarStore().setIsMaximized(true),
-                        onMouseLeave: () => setIsMaximized(false),
+                        onMouseLeave: () => getReaderProgressBarStore().setIsMaximized(false),
                     },
                     progressBarRoot: {
                         sx: {

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

@@ -35,6 +35,7 @@ import {
     useReaderProgressBarStore,
     useReaderScrollbarStore,
     useReaderSettingsStore,
+    getReaderProgressBarStore,
 } from '@/features/reader/stores/ReaderStore.ts';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 
@@ -69,10 +70,7 @@ const BaseMobileReaderProgressBar = ({
         progressBarPosition: state.settings.progressBarPosition,
         progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
     }));
-    const { setIsMaximized, isDragging } = useReaderProgressBarStore((state) => ({
+    const isDragging = useReaderProgressBarStore((state) => state.progressBar.isDragging);
-        setIsMaximized: state.progressBar.setIsMaximized,
-        isDragging: state.progressBar.isDragging,
-    }));
 
     const [, setRefreshProgressBarPosition] = useState({});
     useResizeObserver(
@@ -218,9 +216,9 @@ const BaseMobileReaderProgressBar = ({
     );
 
     useLayoutEffect(() => {
-        setIsMaximized(isVisible);
+        getReaderProgressBarStore().setIsMaximized(isVisible);
 
-        return () => setIsMaximized(false);
+        return () => getReaderProgressBarStore().setIsMaximized(false);
     }, [isVisible]);
 
     return (

src/features/reader/screens/Reader.tsx

@@ -41,7 +41,6 @@ import {
     useReaderChaptersStore,
     useReaderSettingsStore,
     useReaderStore,
-    useReaderTapZoneStore,
 } from '@/features/reader/stores/ReaderStore.ts';
 import { ReaderAutoScroll } from '@/features/reader/auto-scroll/ReaderAutoScroll.tsx';
 
@@ -68,7 +67,6 @@ const BaseReader = ({
         tapZoneInvertMode,
         shouldShowReadingModePreview,
         shouldShowTapZoneLayoutPreview,
-        setSettings,
     } = useReaderSettingsStore((state) => ({
         shouldSkipDupChapters: state.settings.shouldSkipDupChapters,
         shouldSkipFilteredChapters: state.settings.shouldSkipFilteredChapters,
@@ -78,9 +76,7 @@ const BaseReader = ({
         tapZoneInvertMode: state.settings.tapZoneInvertMode,
         shouldShowReadingModePreview: state.settings.shouldShowReadingModePreview,
         shouldShowTapZoneLayoutPreview: state.settings.shouldShowTapZoneLayoutPreview,
-        setSettings: state.settings.setSettings,
     }));
-    const setShowPreview = useReaderTapZoneStore((state) => state.tapZone.setShowPreview);
 
     const scrollElementRef = useRef<HTMLDivElement | null>(null);
 
@@ -127,7 +123,6 @@ const BaseReader = ({
         defaultSettingsResponse,
         defaultSettings,
         defaultSettingsMetadata,
-        setSettings,
         setAreSettingsSet,
     );
     useReaderShowSettingPreviewOnChange(
@@ -139,7 +134,6 @@ const BaseReader = ({
         tapZoneInvertMode,
         shouldShowReadingModePreview,
         shouldShowTapZoneLayoutPreview,
-        setShowPreview,
     );
     useReaderSetChaptersState(
         chaptersResponse,

src/features/reader/services/ReaderControls.ts

@@ -36,7 +36,7 @@ import {
     isEndOfPageInViewport,
     isPageInViewport,
 } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
-import { TapZoneRegionType, TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+import { TapZoneRegionType } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
 import { ReaderTapZoneService } from '@/features/reader/tap-zones/ReaderTapZoneService.ts';
 import { isContinuousReadingMode } from '@/features/reader/settings/ReaderSettings.utils.tsx';
 import {
@@ -100,7 +100,6 @@ export class ReaderControls {
         readingMode: ReadingMode,
         readingDirection: ReadingDirection,
         element: HTMLElement,
-        setShowPreview: TReaderTapZoneContext['setShowPreview'],
         scrollAmountPercentage: number = ReaderScrollAmount.LARGE,
     ): void {
         if (!element) {
@@ -129,7 +128,7 @@ export class ReaderControls {
             currentPos + elementSize * scrollAmount * scrollDirection;
 
         getReaderOverlayStore().setIsVisible(false);
-        setShowPreview(false);
+        getReaderTapZoneStore().setShowPreview(false);
 
         const doScroll = (
             isAtStartForDirection: boolean,
@@ -432,14 +431,8 @@ export class ReaderControls {
         return useCallback(
             (pageIndex, debounceChapterUpdate = true, endReached = false) => {
                 const { currentPageIndex, setCurrentPageIndex } = getReaderPagesStore();
-                const {
+                const { currentChapter, chapters, previousChapter, nextChapter, visibleChapters } =
-                    currentChapter,
+                    getReaderChaptersStore();
-                    chapters,
-                    previousChapter,
-                    nextChapter,
-                    visibleChapters,
-                    setReaderStateChapters,
-                } = getReaderChaptersStore();
 
                 if (pageIndex === currentPageIndex && !endReached) {
                     return;
@@ -464,7 +457,6 @@ export class ReaderControls {
                     direction === DirectionOffset.NEXT ? nextChapter : previousChapter,
                     visibleChapters.lastLeadingChapterSourceOrder,
                     visibleChapters.lastTrailingChapterSourceOrder,
-                    setReaderStateChapters,
                     direction,
                 );
 
@@ -581,7 +573,6 @@ export class ReaderControls {
                         readingMode.value,
                         readingDirection.value,
                         scrollElement,
-                        getReaderTapZoneStore().setShowPreview,
                         scrollAmount,
                     );
                 } else {

src/features/reader/services/ReaderService.ts

@@ -53,7 +53,6 @@ import {
     useReaderSettingsStore,
 } from '@/features/reader/stores/ReaderStore.ts';
 import { ReactRouter } from '@/lib/react-router/ReactRouter.ts';
-import { ReaderChaptersStoreSlice } from '@/features/reader/stores/ReaderChaptersStore.ts';
 import { getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 
 const DIRECTION_TO_INVERTED: Record<Direction, Direction> = {
@@ -122,7 +121,6 @@ export class ReaderService {
         chapter: TChapterReader | undefined | null,
         lastLeadingChapterSourceOrder: number,
         lastTrailingChapterSourceOrder: number,
-        setReaderStateChapters: ReaderChaptersStoreSlice['chapters']['setReaderStateChapters'],
         direction: DirectionOffset,
     ): void {
         if (!chapter) {
@@ -140,7 +138,7 @@ export class ReaderService {
             return;
         }
 
-        setReaderStateChapters((state) =>
+        getReaderChaptersStore().setReaderStateChapters((state) =>
             updateReaderStateVisibleChapters(
                 isPreviousChapter,
                 state,

src/features/reader/settings/components/ReaderSettingsTabs.tsx

@@ -23,7 +23,6 @@ import { ReaderBehaviourSettings } from '@/features/reader/settings/behaviour/Re
 import { ReaderDefaultLayoutSettings } from '@/features/reader/settings/layout/ReaderDefaultLayoutSettings.tsx';
 import { ReaderHotkeysSettings } from '@/features/reader/hotkeys/settings/ReaderHotkeysSettings.tsx';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
-import { useReaderTapZoneStore } from '@/features/reader/stores/ReaderStore.ts';
 
 const BaseReaderSettingsTabs = ({
     activeTab,
@@ -45,7 +44,6 @@ const BaseReaderSettingsTabs = ({
 }) => {
     const { t } = useLingui();
     const isTouchDevice = MediaQuery.useIsTouchDevice();
-    const setShowPreview = useReaderTapZoneStore((state) => state.tapZone.setShowPreview);
 
     return (
         <>
@@ -99,7 +97,6 @@ const BaseReaderSettingsTabs = ({
                                     <ReaderLayoutSettings
                                         settings={settings}
                                         updateSetting={(...args) => updateSetting(...args)}
-                                        setShowPreview={setShowPreview!}
                                         isDefaultable={!areDefaultSettings}
                                         onDefault={(...args) => deleteSetting?.(...args)}
                                         isSeriesMode

src/features/reader/settings/layout/ReaderLayoutSettings.tsx

@@ -20,11 +20,10 @@ import { ReaderSettingsTypeProps } from '@/features/reader/Reader.types.ts';
 import { ReaderSettingPageGap } from '@/features/reader/settings/layout/components/ReaderSettingPageGap.tsx';
 import { ReaderSettingWidth } from '@/features/reader/settings/layout/components/ReaderSettingWidth.tsx';
 import { DefaultSettingFootnote } from '@/features/reader/settings/components/DefaultSettingFootnote.tsx';
-import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+import { getReaderTapZoneStore } from '@/features/reader/stores/ReaderStore.ts';
 import { ReaderDefaultLayoutSettings } from '@/features/reader/settings/layout/ReaderDefaultLayoutSettings.tsx';
 
 export const ReaderLayoutSettings = ({
-    setShowPreview,
     settings,
     updateSetting,
     isDefaultable,
@@ -32,7 +31,6 @@ export const ReaderLayoutSettings = ({
     isSeriesMode,
     setTransparent,
 }: ReaderSettingsTypeProps & {
-    setShowPreview: TReaderTapZoneContext['setShowPreview'];
     isSeriesMode?: boolean;
 }) => {
     const { t } = useLingui();
@@ -67,24 +65,24 @@ export const ReaderLayoutSettings = ({
             <ReaderSettingTapZoneLayout
                 tapZoneLayout={settings.tapZoneLayout}
                 setTapZoneLayout={(value) => {
-                    setShowPreview(true);
+                    getReaderTapZoneStore().setShowPreview(true);
                     updateSetting('tapZoneLayout', value);
                 }}
                 isDefaultable={isDefaultable}
                 onDefault={() => {
-                    setShowPreview(true);
+                    getReaderTapZoneStore().setShowPreview(true);
                     onDefault?.('tapZoneLayout');
                 }}
             />
             <ReaderSettingTapZoneInvertMode
                 tapZoneInvertMode={settings.tapZoneInvertMode}
                 setTapZoneInvertMode={(value) => {
-                    setShowPreview(true);
+                    getReaderTapZoneStore().setShowPreview(true);
                     updateSetting('tapZoneInvertMode', value);
                 }}
                 isDefaultable={isDefaultable}
                 onDefault={() => {
-                    setShowPreview(true);
+                    getReaderTapZoneStore().setShowPreview(true);
                     onDefault?.('tapZoneInvertMode');
                 }}
             />

src/features/reader/settings/layout/components/ReaderSettingProfileSettings.tsx

@@ -49,7 +49,6 @@ export const ReaderSettingProfileSettings = ({
             <Stack sx={{ px: Number(!isSeriesMode) * 2 }}>
                 <ReaderLayoutSettings
                     {...props}
-                    setShowPreview={() => {}}
                     settings={adjustedSettings}
                     updateSetting={(setting, value, commit) => updateSetting(setting, value, commit, true, profile)}
                 />

src/features/reader/viewer/ReaderChapterViewer.tsx

@@ -44,21 +44,13 @@ import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
 import { READER_DEFAULT_PAGES_STATE } from '@/features/reader/stores/ReaderPagesStore.ts';
 
-import { getReaderChaptersStore } from '@/features/reader/stores/ReaderStore.ts';
+import { getReaderChaptersStore, getReaderPagesStore } from '@/features/reader/stores/ReaderStore.ts';
 
 const BaseReaderChapterViewer = ({
     currentPageIndex,
-    setPages: setContextPages,
-    setPageUrls: setContextPageUrls,
-    setPageSpreadStates: setContextPageSpreadStates,
-    setPageLoadStates: setContextPageLoadStates,
-    setTotalPages: setContextTotalPages,
-    setCurrentPageIndex: setContextCurrentPageIndex,
     updateCurrentPageIndex,
-    setPageToScrollToIndex,
     transitionPageMode,
     retryFailedPagesKeyPrefix,
-    setTransitionPageMode,
     readingMode,
     readerWidth,
     pageScaleMode,
@@ -89,20 +81,7 @@ const BaseReaderChapterViewer = ({
     minWidth,
     minHeight,
     scrollElement,
-}: Pick<
+}: Pick<ReaderStatePages, 'currentPageIndex' | 'transitionPageMode' | 'retryFailedPagesKeyPrefix'> &
-    ReaderStatePages,
-    | 'currentPageIndex'
-    | 'setPages'
-    | 'setPageUrls'
-    | 'setPageSpreadStates'
-    | 'setPageLoadStates'
-    | 'setTotalPages'
-    | 'setCurrentPageIndex'
-    | 'setPageToScrollToIndex'
-    | 'transitionPageMode'
-    | 'retryFailedPagesKeyPrefix'
-    | 'setTransitionPageMode'
-> &
     Omit<ReaderPagerProps, 'pages' | 'totalPages' | 'pageLoadStates' | 'handleAsInitialRender' | 'resumeMode'> &
     Pick<
         IReaderSettings,
@@ -205,14 +184,14 @@ const BaseReaderChapterViewer = ({
                 actualPages,
                 (value) => {
                     if (isCurrentChapterRef.current) {
-                        setContextPageSpreadStates(value);
+                        getReaderPagesStore().setPageSpreadStates(value);
                     }
 
                     setPagesToSpreadState(value);
                 },
                 (value) => {
                     if (isCurrentChapterRef.current) {
-                        setContextPageLoadStates(value);
+                        getReaderPagesStore().setPageLoadStates(value);
                     }
 
                     setPageLoadStates(value);
@@ -226,7 +205,7 @@ const BaseReaderChapterViewer = ({
         () =>
             createHandleReaderPageLoadError((value) => {
                 if (isCurrentChapterRef.current) {
-                    setContextPageLoadStates(value);
+                    getReaderPagesStore().setPageLoadStates(value);
                 }
 
                 setPageLoadStates(value);
@@ -274,29 +253,35 @@ const BaseReaderChapterViewer = ({
         arePagesFetched,
         setArePagesFetched,
         (value) => updateState(value, noOp, getReaderChaptersStore().setReaderStateChapters),
-        (value) => updateState(value, setTotalPages, setContextTotalPages),
+        (value) => updateState(value, setTotalPages, getReaderPagesStore().setTotalPages.bind(getReaderPagesStore())),
-        (value) => updateState(value, setPages, setContextPages),
+        (value) => updateState(value, setPages, getReaderPagesStore().setPages.bind(getReaderPagesStore())),
-        (value) => updateState(value, setPageUrls, setContextPageUrls),
+        (value) => updateState(value, setPageUrls, getReaderPagesStore().setPageUrls.bind(getReaderPagesStore())),
-        (value) => updateState(value, setPageLoadStates, setContextPageLoadStates),
+        (value) =>
-        (value) => updateState(value, setPagesToSpreadState, setContextPageSpreadStates),
+            updateState(value, setPageLoadStates, getReaderPagesStore().setPageLoadStates.bind(getReaderPagesStore())),
-        (value) => updateState(value, noOp, setContextCurrentPageIndex),
+        (value) =>
+            updateState(
+                value,
+                setPagesToSpreadState,
+                getReaderPagesStore().setPageSpreadStates.bind(getReaderPagesStore()),
+            ),
+        (value) => updateState(value, noOp, getReaderPagesStore().setCurrentPageIndex.bind(getReaderPagesStore())),
         (value) => {
             if ((isInitialChapter && !arePagesFetched) || scrollIntoView) {
-                setPageToScrollToIndex(value);
+                getReaderPagesStore().setPageToScrollToIndex(value);
                 getReaderChaptersStore().setReaderStateChapters((prevState) => ({
                     ...prevState,
                     visibleChapters: { ...prevState.visibleChapters, scrollIntoView: false, resumeMode: undefined },
                 }));
             }
         },
-        (value) => updateState(value, noOp, setTransitionPageMode),
+        (value) => updateState(value, noOp, getReaderPagesStore().setTransitionPageMode.bind(getReaderPagesStore())),
     );
 
     useReaderConvertPagesForReadingMode(
         currentPageIndex,
         actualPages,
         pageUrls,
-        (value) => updateState(value, setPages, setContextPages, true),
+        (value) => updateState(value, setPages, getReaderPagesStore().setPages.bind(getReaderPagesStore()), true),
         (value) => updateState(value, setPagesToSpreadState, noOp, true),
         (value) => updateState(value, noOp, updateCurrentPageIndex),
         readingMode,

src/features/reader/viewer/ReaderViewer.tsx

@@ -47,13 +47,12 @@ import { useReaderPreserveScrollPosition } from '@/features/reader/viewer/hooks/
 
 import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
 import {
+    getReaderAutoScrollStore,
     getReaderStore,
-    useReaderAutoScrollStore,
     useReaderChaptersStore,
     useReaderOverlayStore,
     useReaderPagesStore,
     useReaderSettingsStore,
-    useReaderTapZoneStore,
 } from '@/features/reader/stores/ReaderStore.ts';
 
 const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
@@ -74,44 +73,21 @@ const BaseReaderViewer = ({
 }) => {
     const { direction: themeDirection } = useTheme();
     const isOverlayVisible = useReaderOverlayStore((state) => state.overlay.isVisible);
-    const {
+    const { currentPageIndex, pageToScrollToIndex, pages, totalPages, transitionPageMode, retryFailedPagesKeyPrefix } =
-        currentPageIndex,
+        useReaderPagesStore((state) => ({
-        pageToScrollToIndex,
+            currentPageIndex: state.pages.currentPageIndex,
-        setPageToScrollToIndex,
+            pageToScrollToIndex: state.pages.pageToScrollToIndex,
-        pages,
+            pages: state.pages.pages,
-        totalPages,
+            totalPages: state.pages.totalPages,
-        setPages,
+            transitionPageMode: state.pages.transitionPageMode,
-        setPageUrls,
+            retryFailedPagesKeyPrefix: state.pages.retryFailedPagesKeyPrefix,
-        setPageSpreadStates,
+        }));
-        setPageLoadStates,
-        setTotalPages,
-        setCurrentPageIndex,
-        transitionPageMode,
-        retryFailedPagesKeyPrefix,
-        setTransitionPageMode,
-    } = useReaderPagesStore((state) => ({
-        currentPageIndex: state.pages.currentPageIndex,
-        pageToScrollToIndex: state.pages.pageToScrollToIndex,
-        setPageToScrollToIndex: state.pages.setPageToScrollToIndex,
-        pages: state.pages.pages,
-        totalPages: state.pages.totalPages,
-        setPages: state.pages.setPages,
-        setPageUrls: state.pages.setPageUrls,
-        setPageSpreadStates: state.pages.setPageSpreadStates,
-        setPageLoadStates: state.pages.setPageLoadStates,
-        setTotalPages: state.pages.setTotalPages,
-        setCurrentPageIndex: state.pages.setCurrentPageIndex,
-        transitionPageMode: state.pages.transitionPageMode,
-        retryFailedPagesKeyPrefix: state.pages.retryFailedPagesKeyPrefix,
-        setTransitionPageMode: state.pages.setTransitionPageMode,
-    }));
     const { initialChapter, currentChapter, chapters, visibleChapters, isCurrentChapterReady } = useReaderChaptersStore(
         (state) => ({
             initialChapter: state.chapters.initialChapter,
             currentChapter: state.chapters.currentChapter,
             chapters: state.chapters.chapters,
             visibleChapters: state.chapters.visibleChapters,
-            setReaderStateChapters: state.chapters.setReaderStateChapters,
             isCurrentChapterReady: state.chapters.isCurrentChapterReady,
         }),
     );
@@ -138,10 +114,6 @@ const BaseReaderViewer = ({
         shouldStretchPage: state.settings.shouldStretchPage.value,
         isStaticNav: state.settings.isStaticNav,
     }));
-    const { showPreview, setShowPreview } = useReaderTapZoneStore((state) => ({
-        showPreview: state.tapZone.showPreview,
-        setShowPreview: state.tapZone.setShowPreview,
-    }));
     const { resumeMode = ReaderResumeMode.START } = useLocation<ReaderOpenChapterLocationState>().state ?? {
         resumeMode: ReaderResumeMode.START,
     };
@@ -153,13 +125,7 @@ const BaseReaderViewer = ({
     const isContinuousReadingModeActive = isContinuousReadingMode(readingMode);
     const isDragging = useMouseDragScroll(scrollElementRef);
 
-    const automaticScrolling = useReaderAutoScrollStore((state) => ({
+    useEffect(() => getReaderAutoScrollStore().setScrollRef(scrollElementRef.current), []);
-        isPaused: state.autoScroll.isPaused,
-        pause: state.autoScroll.pause,
-        resume: state.autoScroll.resume,
-        setScrollRef: state.autoScroll.setScrollRef,
-    }));
-    useEffect(() => automaticScrolling.setScrollRef(scrollElementRef.current), []);
 
     const scrollbarXSize = MediaQuery.useGetScrollbarSize('width', scrollElementRef.current);
     const scrollbarYSize = MediaQuery.useGetScrollbarSize('height', scrollElementRef.current);
@@ -240,7 +206,6 @@ const BaseReaderViewer = ({
         pageToScrollToIndex,
         pages,
         totalPages,
-        setPageToScrollToIndex,
         updateCurrentPageIndex,
         isContinuousReadingModeActive,
         imageRefs,
@@ -256,14 +221,8 @@ const BaseReaderViewer = ({
     );
     useReaderHideCursorOnInactivity(scrollElementRef);
     useReaderHorizontalModeRevampScrolling(readingMode, readingDirection, scrollElementRef);
-    useReaderHideOverlayOnUserScroll(isOverlayVisible, showPreview, setShowPreview, scrollElementRef);
+    useReaderHideOverlayOnUserScroll(isOverlayVisible, scrollElementRef);
-    useReaderAutoScroll(
+    useReaderAutoScroll(isOverlayVisible, isStaticNav);
-        isOverlayVisible,
-        automaticScrolling.isPaused,
-        automaticScrolling.pause,
-        automaticScrolling.resume,
-        isStaticNav,
-    );
     useReaderPreserveScrollPosition(
         scrollElementRef,
         currentChapter?.id,
@@ -273,7 +232,6 @@ const BaseReaderViewer = ({
         visibleChapters,
         readingMode,
         readingDirection,
-        setPageToScrollToIndex,
         pageScaleMode,
         shouldStretchPage,
         readerWidth,
@@ -381,13 +339,6 @@ const BaseReaderViewer = ({
                         isTrailingChapter={isTrailingChapter}
                         isPreloadMode={isPreloadMode}
                         imageRefs={imageRefs}
-                        setPages={setPages}
-                        setPageUrls={setPageUrls}
-                        setPageSpreadStates={setPageSpreadStates}
-                        setPageLoadStates={setPageLoadStates}
-                        setTotalPages={setTotalPages}
-                        setCurrentPageIndex={setCurrentPageIndex}
-                        setPageToScrollToIndex={setPageToScrollToIndex}
                         transitionPageMode={transitionPageMode}
                         retryFailedPagesKeyPrefix={retryFailedPagesKeyPrefix}
                         readingMode={readingMode}
@@ -405,7 +356,6 @@ const BaseReaderViewer = ({
                             visibleChapters.resumeMode,
                             resumeMode,
                         )}
-                        setTransitionPageMode={setTransitionPageMode}
                         pageGap={pageGap}
                         imagePreLoadAmount={imagePreLoadAmount}
                         customFilter={customFilter}

src/features/reader/viewer/hooks/useReaderHandlePageSelection.ts

@@ -12,12 +12,12 @@ import { ReaderStatePages, ReadingDirection } from '@/features/reader/Reader.typ
 import { getIndexOfPage, getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 import { getScrollIntoViewInlineOption } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
+import { getReaderPagesStore } from '@/features/reader/stores/ReaderStore.ts';
 
 export const useReaderHandlePageSelection = (
     pageToScrollToIndex: ReaderStatePages['pageToScrollToIndex'],
     pages: ReaderStatePages['pages'],
     totalPages: number,
-    setPageToScrollToIndex: ReaderStatePages['setPageToScrollToIndex'],
     updateCurrentPageIndex: ReturnType<typeof ReaderControls.useUpdateCurrentPageIndex>,
     isContinuousReadingModeActive: boolean,
     imageRefs: MutableRefObject<(HTMLElement | null)[]>,
@@ -43,7 +43,7 @@ export const useReaderHandlePageSelection = (
         const newPageIndex = getIndexOfPage(pageToScrollTo);
         const isLastPage = newPageIndex === totalPages - 1;
 
-        setPageToScrollToIndex(null);
+        getReaderPagesStore().setPageToScrollToIndex(null);
         updateCurrentPageIndex(newPageIndex, !isLastPage, isLastPage);
     }, [pageToScrollToIndex]);
 };

src/features/reader/viewer/hooks/useReaderPreserveScrollPosition.ts

@@ -12,7 +12,6 @@ import {
     IReaderSettingsManga,
     ReaderPageScaleMode,
     ReaderStateChapters,
-    ReaderStatePages,
     ReadingDirection,
     ReadingMode,
 } from '@/features/reader/Reader.types.ts';
@@ -24,6 +23,7 @@ import {
 } from '@/features/reader/settings/ReaderSettings.utils.tsx';
 import { getPreviousNextChapterVisibility } from '@/features/reader/Reader.utils.ts';
 import { ChapterIdInfo, TChapterReader } from '@/features/chapter/Chapter.types.ts';
+import { getReaderPagesStore } from '@/features/reader/stores/ReaderStore.ts';
 
 const shouldPreserveOnResizeChange = (
     readingMode: ReadingMode,
@@ -47,22 +47,13 @@ const shouldPreserveOnResizeChange = (
     return handleWidthChange || handleHeightChange;
 };
 
-const usePreserveOnValueChange = (
+const usePreserveOnValueChange = (value: unknown, currentPageIndex: number) => {
-    value: unknown,
-    currentPageIndex: number,
-    setPageToScrollToIndex: ReaderStatePages['setPageToScrollToIndex'],
-) => {
     useLayoutEffect(() => {
-        setPageToScrollToIndex(currentPageIndex);
+        getReaderPagesStore().setPageToScrollToIndex(currentPageIndex);
     }, [value]);
 };
 
-const usePreserveOnWindowResize = (
+const usePreserveOnWindowResize = (readingMode: ReadingMode, pageScaleMode: ReaderPageScaleMode, pageIndex: number) => {
-    readingMode: ReadingMode,
-    pageScaleMode: ReaderPageScaleMode,
-    setPageToScrollToIndex: (index: number | null) => void,
-    pageIndex: number,
-) => {
     const previousDimensionsRef = useRef({ width: window.innerWidth, height: window.innerHeight });
     const isResizeInProgressRef = useRef(false);
     const activeResizeTimeoutRef = useRef<NodeJS.Timeout>(undefined);
@@ -81,7 +72,7 @@ const usePreserveOnWindowResize = (
             return;
         }
 
-        setPageToScrollToIndex(pageIndexOnResizeStartRef.current);
+        getReaderPagesStore().setPageToScrollToIndex(pageIndexOnResizeStartRef.current);
 
         clearTimeout(activeResizeTimeoutRef.current);
         activeResizeTimeoutRef.current = setTimeout(() => {
@@ -357,7 +348,6 @@ export const useReaderPreserveScrollPosition = (
     visibleChapters: ReaderStateChapters['visibleChapters'],
     readingMode: ReadingMode,
     readingDirection: ReadingDirection,
-    setPageToScrollToIndex: ReaderStatePages['setPageToScrollToIndex'],
     pageScaleMode: ReaderPageScaleMode,
     shouldStretchPage: boolean,
     readerWidth: IReaderSettingsManga['readerWidth'],
@@ -372,10 +362,10 @@ export const useReaderPreserveScrollPosition = (
         isContinuousReadingMode(readingMode),
     );
     usePreserveOnLeadingPageRender(scrollElementRef, readingMode);
-    usePreserveOnWindowResize(readingMode, pageScaleMode, setPageToScrollToIndex, currentPageIndex);
+    usePreserveOnWindowResize(readingMode, pageScaleMode, currentPageIndex);
-    usePreserveOnValueChange(readingDirection, currentPageIndex, setPageToScrollToIndex);
+    usePreserveOnValueChange(readingDirection, currentPageIndex);
-    usePreserveOnValueChange(readingMode, currentPageIndex, setPageToScrollToIndex);
+    usePreserveOnValueChange(readingMode, currentPageIndex);
-    usePreserveOnValueChange(pageScaleMode, currentPageIndex, setPageToScrollToIndex);
+    usePreserveOnValueChange(pageScaleMode, currentPageIndex);
-    usePreserveOnValueChange(shouldStretchPage, currentPageIndex, setPageToScrollToIndex);
+    usePreserveOnValueChange(shouldStretchPage, currentPageIndex);
-    usePreserveOnValueChange(`${readerWidth.value}_${readerWidth.enabled}`, currentPageIndex, setPageToScrollToIndex);
+    usePreserveOnValueChange(`${readerWidth.value}_${readerWidth.enabled}`, currentPageIndex);
 };