Move reader "settings state" to "reader store"

2025-09-20 14:15:40 +02:00
parent 5177f9efdc
commit 98ec5257b9
28 changed files with 315 additions and 538 deletions
--- a/src/UtilTypes.d.ts
+++ b/src/UtilTypes.d.ts
@@ -34,10 +34,14 @@ type TupleUnion<U extends string | number | symbol, R extends any[] = []> = {
    [S in U]: Exclude<U, S> extends never ? [...R, S] : TupleUnion<Exclude<U, S>, [...R, S]>;
 }[U];

+type ValueWithDefaultFlag<T> = { value: T; isDefault: boolean };
+
 type TransformRecordToWithDefaultFlag<T extends Record<string, any>> = {
-    [K in keyof T]: { value: T[K]; isDefault: boolean };
+    [K in keyof T]: ValueWithDefaultFlag<T[K]>;
 };

+type ExtractValueWithDefaultFlag<T extends ValueWithDefaultFlag<any>> = T extends ValueWithDefaultFlag<infer V> ? V : T;
+
 type MergeObjectsArray<T extends object[]> = T extends [infer F, ...infer R]
    ? F & MergeObjectsArray<R extends object[] ? R : []>
    : {};
--- a/src/features/reader/ReaderStore.ts
+++ b/src/features/reader/ReaderStore.ts
@@ -18,9 +18,14 @@ import {
    createReaderAutoScrollStoreSlice,
    ReaderAutoScrollStoreSlice,
 } from '@/features/reader/auto-scroll/ReaderAutoScrollStore.ts';
-import { ReaderStateChapters, ReaderStatePages } from '@/features/reader/Reader.types.ts';
+import {
+    IReaderSettingsWithDefaultFlag,
+    ReaderStateChapters,
+    ReaderStatePages,
+} from '@/features/reader/Reader.types.ts';
 import { ImmerStateCreator } from '@/lib/zustand/Zustand.types.ts';
 import { READER_DEFAULT_CHAPTERS_STATE, READER_DEFAULT_PAGES_STATE } from '@/features/reader/ReaderStore.constants.ts';
+import { DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG } from '@/features/reader/settings/ReaderSettingsMetadata.ts';

 interface ReaderPagesStoreSlice {
    pages: ReaderStatePages & {
@@ -48,6 +53,9 @@ interface ReaderStore
        ySize: number;
        setYSize: (size: number) => void;
    };
+    settings: IReaderSettingsWithDefaultFlag & {
+        setSettings: (settings: IReaderSettingsWithDefaultFlag) => void;
+    };
 }

 const DEFAULT_STATE = {
@@ -139,6 +147,10 @@ export const useReaderStore = create<ReaderStore>()(
                get().autoScroll.reset();
                get().pages.reset();
                get().chapters.reset();
+                draft.settings = {
+                    ...get().settings,
+                    ...DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG,
+                };
            }),
        setManga: (manga) =>
            set((draft) => {
@@ -155,6 +167,16 @@ export const useReaderStore = create<ReaderStore>()(
                    draft.scrollbar.ySize = size;
                }),
        },
+        settings: {
+            ...DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG,
+            setSettings: (settings) =>
+                set((draft) => {
+                    draft.settings = {
+                        ...get().settings,
+                        ...settings,
+                    };
+                }),
+        },
        ...createReaderOverlayStoreSlice(set, get, store),
        ...createReaderAutoScrollStoreSlice(set, get, store),
        ...createReaderPagesStoreSlice(set, get, store),
--- a/src/features/reader/auto-scroll/ReaderAutoScroll.tsx
+++ b/src/features/reader/auto-scroll/ReaderAutoScroll.tsx
@@ -8,7 +8,7 @@

 import { memo, useCallback, useEffect } from 'react';
 import { Direction, useTheme } from '@mui/material/styles';
-import { IReaderSettings, ReaderScrollAmount, ReadingMode } from '@/features/reader/Reader.types.ts';
+import { ReaderScrollAmount, ReadingMode } from '@/features/reader/Reader.types.ts';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 import { ScrollOffset } from '@/base/Base.types.ts';
 import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
@@ -21,11 +21,9 @@ import { getReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderS

 const BaseReaderAutoScroll = ({
    openPage,
-    readingMode,
-    autoScroll,
    themeDirection,
    combinedDirection,
-}: Pick<IReaderSettings, 'readingMode' | 'autoScroll'> & {
+}: {
    openPage: ReturnType<typeof ReaderControls.useOpenPage>;
    themeDirection: Direction;
    combinedDirection: Direction;
@@ -34,6 +32,10 @@ const BaseReaderAutoScroll = ({
        scrollRef: state.autoScroll.scrollRef,
        direction: state.autoScroll.direction,
    }));
+    const { readingMode, autoScroll } = useReaderStoreShallow((state) => ({
+        readingMode: state.settings.readingMode.value,
+        autoScroll: state.settings.autoScroll,
+    }));

    const isScrollingInvertedBasedOnReadingDirection =
        readingMode === ReadingMode.CONTINUOUS_HORIZONTAL && themeDirection !== combinedDirection;
@@ -77,10 +79,9 @@ const BaseReaderAutoScroll = ({
 export const ReaderAutoScroll = withPropsFrom(
    memo(BaseReaderAutoScroll),
    [
-        ReaderService.useSettingsWithoutDefaultFlag,
        () => ({ openPage: ReaderControls.useOpenPage() }),
        () => ({ themeDirection: useTheme().direction }),
        () => ({ combinedDirection: ReaderService.useGetThemeDirection() }),
    ],
-    ['openPage', 'readingMode', 'themeDirection', 'combinedDirection', 'autoScroll'],
+    ['openPage', 'themeDirection', 'combinedDirection'],
 );
--- a/src/features/reader/contexts/ReaderContextProvider.tsx
+++ b/src/features/reader/contexts/ReaderContextProvider.tsx
@@ -7,14 +7,11 @@
 */

 import { ReactNode } from 'react';
-import { ReaderStateContextProvider } from '@/features/reader/contexts/state/ReaderStateContextProvider.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>
        <ReaderProgressBarContextProvider>{children}</ReaderProgressBarContextProvider>
    </ReaderTapZoneContextProvider>
-    </ReaderStateContextProvider>
 );
--- a/src/features/reader/contexts/state/ReaderStateContextProvider.tsx
+++ b/src/features/reader/contexts/state/ReaderStateContextProvider.tsx
@@ -1,14 +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 { ReactNode } from 'react';
-import { ReaderStateSettingsContextProvider } from '@/features/reader/contexts/state/ReaderStateSettingsContext.tsx';
-
-export const ReaderStateContextProvider = ({ children }: { children: ReactNode }) => (
-    <ReaderStateSettingsContextProvider>{children}</ReaderStateSettingsContextProvider>
-);
--- a/src/features/reader/contexts/state/ReaderStateSettingsContext.tsx
+++ b/src/features/reader/contexts/state/ReaderStateSettingsContext.tsx
@@ -1,28 +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, ReactNode, useContext, useMemo, useState } from 'react';
-import { TReaderStateSettingsContext } from '@/features/reader/Reader.types.ts';
-import { DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG } from '@/features/reader/settings/ReaderSettingsMetadata.ts';
-
-export const ReaderStateSettingsContext = createContext<TReaderStateSettingsContext>({
-    settings: DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG,
-    setSettings: () => undefined,
-});
-
-export const useReaderStateSettingsContext = () => useContext(ReaderStateSettingsContext);
-
-export const ReaderStateSettingsContextProvider = ({ children }: { children: ReactNode }) => {
-    const [settings, setSettings] = useState<TReaderStateSettingsContext['settings']>(
-        DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG,
-    );
-
-    const value = useMemo(() => ({ settings, setSettings }), [settings]);
-
-    return <ReaderStateSettingsContext.Provider value={value}>{children}</ReaderStateSettingsContext.Provider>;
-};
--- a/src/features/reader/filters/ReaderRGBAFilter.tsx
+++ b/src/features/reader/filters/ReaderRGBAFilter.tsx
@@ -7,21 +7,17 @@
 */

 import Box from '@mui/material/Box';
-import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
-import { IReaderSettings } from '@/features/reader/Reader.types.ts';
+import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

-const BaseReaderRGBAFilter = ({
-    readerNavBarWidth,
-    customFilter: {
-        rgba: {
+const BaseReaderRGBAFilter = ({ readerNavBarWidth }: Pick<NavbarContextType, 'readerNavBarWidth'>) => {
+    const {
        value: { red, green, blue, alpha, blendMode },
        enabled,
-        },
-    },
-}: Pick<NavbarContextType, 'readerNavBarWidth'> & Pick<IReaderSettings, 'customFilter'>) => {
+    } = useReaderStoreShallow((state) => state.settings.customFilter.rgba);
+
    if (!enabled) {
        return null;
    }
@@ -42,8 +38,4 @@ const BaseReaderRGBAFilter = ({
    );
 };

-export const ReaderRGBAFilter = withPropsFrom(
-    BaseReaderRGBAFilter,
-    [useNavBarContext, ReaderService.useSettingsWithoutDefaultFlag],
-    ['readerNavBarWidth', 'customFilter'],
-);
+export const ReaderRGBAFilter = withPropsFrom(BaseReaderRGBAFilter, [useNavBarContext], ['readerNavBarWidth']);
--- a/src/features/reader/hooks/useReaderResetStates.ts
+++ b/src/features/reader/hooks/useReaderResetStates.ts
@@ -7,16 +7,12 @@
 */

 import { useEffect } from 'react';
-import { TReaderStateSettingsContext } from '@/features/reader/Reader.types.ts';
-import { DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG } from '@/features/reader/settings/ReaderSettingsMetadata.ts';
 import { getReaderStore } from '@/features/reader/ReaderStore.ts';

-export const useReaderResetStates = (setSettings: TReaderStateSettingsContext['setSettings']) => {
+export const useReaderResetStates = () => {
    useEffect(
        () => () => {
            getReaderStore().reset();
-
-            setSettings(DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG);
        },
        [],
    );
--- a/src/features/reader/hotkeys/ReaderHotkeys.tsx
+++ b/src/features/reader/hotkeys/ReaderHotkeys.tsx
@@ -25,7 +25,7 @@ import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 import { ScrollOffset } from '@/base/Base.types.ts';
 import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
 import { useReaderTapZoneContext } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx';
-import { getReaderStore } from '@/features/reader/ReaderStore.ts';
+import { getReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 const useHotkeys = (...args: Parameters<typeof useHotKeysHook>): ReturnType<typeof useHotKeysHook> => {
    const [keys, callback, options, dependencies] = args;
@@ -63,16 +63,9 @@ export const ReaderHotkeys = ({
    const { direction: themeDirection } = useTheme();
    const readerThemeDirection = ReaderService.useGetThemeDirection();
    const { enableScope, disableScope } = useHotkeysContext();
-    const {
-        hotkeys,
-        pageScaleMode,
-        shouldStretchPage,
-        shouldOffsetDoubleSpreads,
-        readingMode,
-        readingDirection,
-        autoScroll,
-        scrollAmount,
-    } = ReaderService.useSettings();
+    const { hotkeys } = useReaderStoreShallow((state) => ({
+        hotkeys: state.settings.hotkeys,
+    }));
    const { setShowPreview } = useReaderTapZoneContext();
    const exitReader = ReaderService.useExit();

@@ -84,10 +77,13 @@ export const ReaderHotkeys = ({
    useHotkeys(
        hotkeys[ReaderHotkey.SCROLL_BACKWARD],
        () => {
-            const automaticScrolling = getReaderStore().autoScroll;
+            const {
+                autoScroll,
+                settings: { readingMode, readingDirection, scrollAmount },
+            } = getReaderStore();

-            if (automaticScrolling.isActive) {
-                automaticScrolling.setDirection(ScrollOffset.BACKWARD);
+            if (autoScroll.isActive) {
+                autoScroll.setDirection(ScrollOffset.BACKWARD);
                return;
            }

@@ -108,15 +104,18 @@ export const ReaderHotkeys = ({
            );
        },
        { preventDefault: true },
-        [readingMode.value, readingDirection.value, themeDirection, openChapter, scrollAmount],
+        [themeDirection, openChapter],
    );
    useHotkeys(
        hotkeys[ReaderHotkey.SCROLL_FORWARD],
        () => {
-            const automaticScrolling = getReaderStore().autoScroll;
+            const {
+                autoScroll,
+                settings: { readingMode, readingDirection, scrollAmount },
+            } = getReaderStore();

-            if (automaticScrolling.isActive) {
-                automaticScrolling.setDirection(ScrollOffset.FORWARD);
+            if (autoScroll.isActive) {
+                autoScroll.setDirection(ScrollOffset.FORWARD);
                return;
            }

@@ -137,7 +136,7 @@ export const ReaderHotkeys = ({
            );
        },
        { preventDefault: true },
-        [readingMode.value, readingDirection.value, themeDirection, openChapter, scrollAmount],
+        [themeDirection, openChapter],
    );
    useHotkeys(
        hotkeys[ReaderHotkey.PREVIOUS_CHAPTER],
@@ -157,70 +156,55 @@ export const ReaderHotkeys = ({
        () => {
            updateSettingCycleThrough(
                'pageScaleMode',
-                pageScaleMode.value,
+                getReaderStore().settings.pageScaleMode.value,
                READER_PAGE_SCALE_MODE_VALUES,
-                pageScaleMode.isDefault,
+                getReaderStore().settings.pageScaleMode.isDefault,
                true,
            );
        },
-        [pageScaleMode.value, pageScaleMode.isDefault],
+        [],
    );
-    useHotkeys(
-        hotkeys[ReaderHotkey.STRETCH_IMAGE],
-        () => ReaderService.updateSetting('shouldStretchPage', !shouldStretchPage.value),
-        [shouldStretchPage.value],
+    useHotkeys(hotkeys[ReaderHotkey.STRETCH_IMAGE], () =>
+        ReaderService.updateSetting('shouldStretchPage', !getReaderStore().settings.shouldStretchPage.value),
    );
-    useHotkeys(
-        hotkeys[ReaderHotkey.OFFSET_SPREAD_PAGES],
-        () => ReaderService.updateSetting('shouldOffsetDoubleSpreads', !shouldOffsetDoubleSpreads.value),
-        [shouldOffsetDoubleSpreads.value],
+    useHotkeys(hotkeys[ReaderHotkey.OFFSET_SPREAD_PAGES], () =>
+        ReaderService.updateSetting(
+            'shouldOffsetDoubleSpreads',
+            !getReaderStore().settings.shouldOffsetDoubleSpreads.value,
+        ),
    );
-    useHotkeys(
-        hotkeys[ReaderHotkey.CYCLE_READING_MODE],
-        () => {
+    useHotkeys(hotkeys[ReaderHotkey.CYCLE_READING_MODE], () => {
        updateSettingCycleThrough(
            'readingMode',
-                readingMode.value,
+            getReaderStore().settings.readingMode.value,
            READING_MODE_VALUES,
-                readingMode.isDefault,
+            getReaderStore().settings.readingMode.isDefault,
            true,
        );
-        },
-        [readingMode.value, readingMode.isDefault],
-    );
-    useHotkeys(
-        hotkeys[ReaderHotkey.CYCLE_READING_DIRECTION],
-        () => {
+    });
+    useHotkeys(hotkeys[ReaderHotkey.CYCLE_READING_DIRECTION], () => {
        updateSettingCycleThrough(
            'readingDirection',
-                readingDirection.value,
+            getReaderStore().settings.readingDirection.value,
            READING_DIRECTION_VALUES,
-                readingDirection.isDefault,
+            getReaderStore().settings.readingDirection.isDefault,
            true,
        );
-        },
-        [readingDirection.value, readingDirection.isDefault],
-    );
+    });
    useHotkeys(hotkeys[ReaderHotkey.TOGGLE_AUTO_SCROLL], () => getReaderStore().autoScroll.toggleActive(), {
        preventDefault: true,
    });
-    useHotkeys(
-        hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_DECREASE],
-        () =>
+    useHotkeys(hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_DECREASE], () =>
        ReaderService.updateSetting('autoScroll', {
-                ...autoScroll,
-                value: Math.min(AUTO_SCROLL_SPEED.max, autoScroll.value + AUTO_SCROLL_SPEED.step),
+            ...getReaderStore().settings.autoScroll,
+            value: Math.min(AUTO_SCROLL_SPEED.max, getReaderStore().settings.autoScroll.value + AUTO_SCROLL_SPEED.step),
        }),
-        [autoScroll.value],
    );
-    useHotkeys(
-        hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_INCREASE],
-        () =>
+    useHotkeys(hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_INCREASE], () =>
        ReaderService.updateSetting('autoScroll', {
-                ...autoScroll,
-                value: Math.max(AUTO_SCROLL_SPEED.min, autoScroll.value - AUTO_SCROLL_SPEED.step),
+            ...getReaderStore().settings.autoScroll,
+            value: Math.max(AUTO_SCROLL_SPEED.min, getReaderStore().settings.autoScroll.value - AUTO_SCROLL_SPEED.step),
        }),
-        [autoScroll.value],
    );
    useHotkeys(hotkeys[ReaderHotkey.EXIT_READER], exitReader, [exitReader]);

--- a/src/features/reader/infinite-scroll/ReaderInfiniteScrollUpdateChapter.tsx
+++ b/src/features/reader/infinite-scroll/ReaderInfiniteScrollUpdateChapter.tsx
@@ -9,15 +9,10 @@
 import { memo } from 'react';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useReaderInfiniteScrollUpdateChapter } from '@/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts';
-import { IReaderSettings } from '@/features/reader/Reader.types.ts';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
-import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';

 const BaseReaderInfiniteScrollUpdateChapter = ({
-    readingMode,
-    readingDirection,
-    shouldUseInfiniteScroll,
    chapterId,
    previousChapterId,
    nextChapterId,
@@ -27,9 +22,7 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
    imageWrapper,
    openChapter,
    scrollElement,
-    shouldShowTransitionPage,
-}: Pick<IReaderSettings, 'shouldShowTransitionPage'> &
-    Pick<IReaderSettings, 'readingMode' | 'readingDirection' | 'shouldUseInfiniteScroll'> & {
+}: {
    chapterId: ChapterIdInfo['id'];
    previousChapterId?: ChapterIdInfo['id'];
    nextChapterId?: ChapterIdInfo['id'];
@@ -46,13 +39,9 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
        previousChapterId,
        isCurrentChapter,
        isPreviousChapterVisible,
-        readingMode,
-        readingDirection,
-        shouldUseInfiniteScroll,
        openChapter,
        imageWrapper,
        scrollElement,
-        shouldShowTransitionPage,
    );
    useReaderInfiniteScrollUpdateChapter(
        'last',
@@ -60,13 +49,9 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
        nextChapterId,
        isCurrentChapter,
        isNextChapterVisible,
-        readingMode,
-        readingDirection,
-        shouldUseInfiniteScroll,
        openChapter,
        imageWrapper,
        scrollElement,
-        shouldShowTransitionPage,
    );

    return null;
@@ -74,6 +59,6 @@ const BaseReaderInfiniteScrollUpdateChapter = ({

 export const ReaderInfiniteScrollUpdateChapter = withPropsFrom(
    memo(BaseReaderInfiniteScrollUpdateChapter),
-    [() => ({ openChapter: ReaderControls.useOpenChapter() }), ReaderService.useSettingsWithoutDefaultFlag],
-    ['openChapter', 'shouldShowTransitionPage'],
+    [() => ({ openChapter: ReaderControls.useOpenChapter() })],
+    ['openChapter'],
 );
--- a/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts
+++ b/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts
@@ -16,7 +16,7 @@ import {
 import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx';
 import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
 import { useIntersectionObserver } from '@/base/hooks/useIntersectionObserver.tsx';
-import { getReaderStore } from '@/features/reader/ReaderStore.ts';
+import { getReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 interface ElementIntersection {
    start: boolean;
@@ -242,14 +242,19 @@ export const useReaderInfiniteScrollUpdateChapter = (
    chapterToOpenId: number | undefined,
    isCurrentChapter: boolean,
    isChapterToOpenVisible: boolean,
-    readingMode: ReadingMode,
-    readingDirection: ReadingDirection,
-    shouldUseInfiniteScroll: boolean,
    openChapter: ReturnType<typeof ReaderControls.useOpenChapter>,
    image: HTMLElement | null,
    scrollElement: HTMLElement | null,
-    shouldShowTransitionPage: boolean,
 ) => {
+    const { readingMode, readingDirection, shouldUseInfiniteScroll, shouldShowTransitionPage } = useReaderStoreShallow(
+        (state) => ({
+            readingMode: state.settings.readingMode.value,
+            readingDirection: state.settings.readingDirection.value,
+            shouldUseInfiniteScroll: state.settings.shouldUseInfiniteScroll,
+            shouldShowTransitionPage: state.settings.shouldShowTransitionPage,
+        }),
+    );
+
    useEffect(() => {
        const isContinuousReadingModeActive = isContinuousReadingMode(readingMode);
        const isContinuousVerticalReadingModeActive = isContinuousVerticalReadingMode(readingMode);
--- a/src/features/reader/overlay/components/ReaderPageNumber.tsx
+++ b/src/features/reader/overlay/components/ReaderPageNumber.tsx
@@ -11,7 +11,7 @@ import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import Box from '@mui/material/Box';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
-import { IReaderSettings, ProgressBarType, ReadingDirection } from '@/features/reader/Reader.types.ts';
+import { ProgressBarType, ReadingDirection } from '@/features/reader/Reader.types.ts';
 import { getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
 import { useReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx';
@@ -25,19 +25,20 @@ const BaseReaderPageNumber = ({
    isDesktop,
    readerNavBarWidth,
    isMaximized,
-    progressBarType,
-    shouldShowPageNumber,
-    readingDirection,
 }: Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop'> &
    Pick<NavbarContextType, 'readerNavBarWidth'> &
-    Pick<TReaderProgressBarContext, 'isMaximized'> &
-    Pick<IReaderSettings, 'progressBarType' | 'shouldShowPageNumber' | 'readingDirection'>) => {
+    Pick<TReaderProgressBarContext, 'isMaximized'>) => {
    const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
    const { currentPageIndex, pages, totalPages } = useReaderStoreShallow((state) => ({
        currentPageIndex: state.pages.currentPageIndex,
        pages: state.pages.pages,
        totalPages: state.pages.totalPages,
    }));
+    const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderStoreShallow((state) => ({
+        readingDirection: state.settings.readingDirection.value,
+        shouldShowPageNumber: state.settings.shouldShowPageNumber,
+        progressBarType: state.settings.progressBarType,
+    }));

    const pageName = useMemo(() => {
        const currentPageName = getPage(currentPageIndex, pages).name;
@@ -89,11 +90,6 @@ const BaseReaderPageNumber = ({

 export const ReaderPageNumber = withPropsFrom(
    BaseReaderPageNumber,
-    [
-        ReaderService.useOverlayMode,
-        useNavBarContext,
-        useReaderProgressBarContext,
-        ReaderService.useSettingsWithoutDefaultFlag,
-    ],
-    ['isDesktop', 'readerNavBarWidth', 'isMaximized', 'progressBarType', 'shouldShowPageNumber', 'readingDirection'],
+    [ReaderService.useOverlayMode, useNavBarContext, useReaderProgressBarContext],
+    ['isDesktop', 'readerNavBarWidth', 'isMaximized'],
 );
--- a/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
+++ b/src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx
@@ -27,10 +27,9 @@ import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholder.tsx';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
-import { IReaderSettings } from '@/features/reader/Reader.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx';
-import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
+import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => {
    const wasNavBarStaticRef = useRef(isStaticNav);
@@ -54,10 +53,7 @@ const BaseReaderNavBarDesktop = ({
    isVisible,
    openSettings,
    setReaderNavBarWidth,
-    isStaticNav,
-}: ReaderNavBarDesktopProps &
-    Pick<NavbarContextType, 'setReaderNavBarWidth'> &
-    Pick<IReaderSettings, 'isStaticNav'>) => {
+}: ReaderNavBarDesktopProps & Pick<NavbarContextType, 'setReaderNavBarWidth'>) => {
    const { t } = useTranslation();
    const manga = useReaderStoreShallow((state) => state.manga);
    const { chapters, currentChapter, previousChapter, nextChapter } = useReaderStoreShallow((state) => ({
@@ -66,6 +62,7 @@ const BaseReaderNavBarDesktop = ({
        previousChapter: state.chapters.previousChapter,
        nextChapter: state.chapters.nextChapter,
    }));
+    const isStaticNav = useReaderStore((state) => state.settings.isStaticNav);

    const [navBarElement, setNavBarElement] = useState<HTMLDivElement | null>();
    useResizeObserver(
@@ -146,6 +143,6 @@ const BaseReaderNavBarDesktop = ({

 export const ReaderNavBarDesktop = withPropsFrom(
    memo(BaseReaderNavBarDesktop),
-    [useNavBarContext, ReaderService.useSettingsWithoutDefaultFlag],
-    ['setReaderNavBarWidth', 'isStaticNav'],
+    [useNavBarContext],
+    ['setReaderNavBarWidth'],
 );
--- a/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx
+++ b/src/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopPageNavigation.tsx
@@ -16,17 +16,14 @@ import { Select } from '@/base/components/inputs/Select.tsx';
 import { getNextIndexFromPage, getPage } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 import { useGetOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
-import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { ReaderNavBarDesktopNextPreviousButton } from '@/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopNextPreviousButton.tsx';
 import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx';
-import { IReaderSettings } from '@/features/reader/Reader.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
-import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
+import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 const BaseReaderNavBarDesktopPageNavigation = ({
-    readingDirection,
    openPage,
-}: Pick<IReaderSettings, 'readingDirection'> & {
+}: {
    openPage: ReturnType<typeof ReaderControls.useOpenPage>;
 }) => {
    const { t } = useTranslation();
@@ -35,6 +32,7 @@ const BaseReaderNavBarDesktopPageNavigation = ({
        currentPageIndex: state.pages.currentPageIndex,
        pages: state.pages.pages,
    }));
+    const readingDirection = useReaderStore((state) => state.settings.readingDirection.value);

    const currentPage = useMemo(() => getPage(currentPageIndex, pages), [currentPageIndex, pages]);
    const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection];
@@ -82,6 +80,6 @@ const BaseReaderNavBarDesktopPageNavigation = ({

 export const ReaderNavBarDesktopPageNavigation = withPropsFrom(
    memo(BaseReaderNavBarDesktopPageNavigation),
-    [() => ({ openPage: ReaderControls.useOpenPage() }), ReaderService.useSettingsWithoutDefaultFlag],
-    ['readingDirection', 'openPage'],
+    [() => ({ openPage: ReaderControls.useOpenPage() })],
+    ['openPage'],
 );
--- a/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx
+++ b/src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx
@@ -10,35 +10,27 @@ import Stack from '@mui/material/Stack';
 import { useTranslation } from 'react-i18next';
 import Button from '@mui/material/Button';
 import SettingsIcon from '@mui/icons-material/Settings';
+import { memo } from 'react';
 import { ReaderNavBarDesktopPageScale } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopPageScale.tsx';
 import { ReaderNavBarDesktopReadingMode } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingMode.tsx';
 import { ReaderNavBarDesktopOffsetDoubleSpread } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopOffsetDoubleSpread.tsx';
 import { ReaderNavBarDesktopReadingDirection } from '@/features/reader/overlay/navigation/desktop/quick-settings/components/ReaderNavBarDesktopReadingDirection.tsx';
-import { IReaderSettingsWithDefaultFlag } from '@/features/reader/Reader.types.ts';
 import { ReaderNavBarDesktopProps } from '@/features/reader/overlay/ReaderOverlay.types.ts';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
-import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { ReaderNavBarDesktopAutoScroll } from '@/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx';
+import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

-const BaseReaderNavBarDesktopQuickSettings = ({
-    readingMode,
-    shouldOffsetDoubleSpreads,
-    pageScaleMode,
-    shouldStretchPage,
-    readingDirection,
-    autoScroll,
-    openSettings,
-}: Pick<ReaderNavBarDesktopProps, 'openSettings'> &
-    Pick<
-        IReaderSettingsWithDefaultFlag,
-        | 'readingMode'
-        | 'shouldOffsetDoubleSpreads'
-        | 'pageScaleMode'
-        | 'shouldStretchPage'
-        | 'readingDirection'
-        | 'autoScroll'
-    >) => {
+const BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick<ReaderNavBarDesktopProps, 'openSettings'>) => {
    const { t } = useTranslation();
+    const { readingMode, shouldOffsetDoubleSpreads, pageScaleMode, shouldStretchPage, readingDirection, autoScroll } =
+        useReaderStoreShallow((state) => ({
+            readingMode: state.settings.readingMode,
+            shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads,
+            pageScaleMode: state.settings.pageScaleMode,
+            shouldStretchPage: state.settings.shouldStretchPage,
+            readingDirection: state.settings.readingDirection,
+            autoScroll: state.settings.autoScroll,
+        }));

    return (
        <Stack sx={{ gap: 1 }}>
@@ -85,15 +77,4 @@ const BaseReaderNavBarDesktopQuickSettings = ({
    );
 };

-export const ReaderNavBarDesktopQuickSettings = withPropsFrom(
-    BaseReaderNavBarDesktopQuickSettings,
-    [ReaderService.useSettings],
-    [
-        'readingMode',
-        'shouldOffsetDoubleSpreads',
-        'pageScaleMode',
-        'shouldStretchPage',
-        'readingDirection',
-        'autoScroll',
-    ],
-);
+export const ReaderNavBarDesktopQuickSettings = memo(BaseReaderNavBarDesktopQuickSettings);
--- a/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx
+++ b/src/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx
@@ -13,22 +13,21 @@ import { ReaderSettingReadingMode } from '@/features/reader/settings/layout/comp
 import { ReaderSettingReadingDirection } from '@/features/reader/settings/layout/components/ReaderSettingReadingDirection.tsx';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { DefaultSettingFootnote } from '@/features/reader/settings/components/DefaultSettingFootnote.tsx';
-import { IReaderSettingsWithDefaultFlag } from '@/features/reader/Reader.types.ts';
-import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { ReaderSettingAutoScroll } from '@/features/reader/auto-scroll/settings/ReaderSettingAutoScroll.tsx';
 import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
 import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

-const BaseReaderBottomBarMobileQuickSettings = ({
-    readingMode,
-    readingDirection,
-    autoScroll,
-}: Pick<IReaderSettingsWithDefaultFlag, 'readingMode' | 'readingDirection' | 'autoScroll'>) => {
+const BaseReaderBottomBarMobileQuickSettings = () => {
    const { t } = useTranslation();
    const { isActive, toggleActive } = useReaderStoreShallow((state) => ({
        isActive: state.autoScroll.isActive,
        toggleActive: state.autoScroll.toggleActive,
    }));
+    const { readingMode, readingDirection, autoScroll } = useReaderStoreShallow((state) => ({
+        readingMode: state.settings.readingMode,
+        readingDirection: state.settings.readingDirection,
+        autoScroll: state.settings.autoScroll,
+    }));

    return (
        <Stack sx={{ gap: 2 }}>
@@ -58,8 +57,4 @@ const BaseReaderBottomBarMobileQuickSettings = ({
    );
 };

-export const ReaderBottomBarMobileQuickSettings = withPropsFrom(
-    memo(BaseReaderBottomBarMobileQuickSettings),
-    [ReaderService.useSettings],
-    ['readingMode', 'readingDirection', 'autoScroll'],
-);
+export const ReaderBottomBarMobileQuickSettings = memo(BaseReaderBottomBarMobileQuickSettings);
--- a/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx
+++ b/src/features/reader/overlay/progress-bar/ReaderProgressBar.tsx
@@ -35,22 +35,20 @@ import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx';
 import { ReaderProgressBarSlotWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarSlotWrapper.tsx';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
-import { IReaderSettings, ReadingMode } from '@/features/reader/Reader.types.ts';
-import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
+import { ReadingMode } from '@/features/reader/Reader.types.ts';
+import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 const BaseReaderProgressBar = ({
    slotProps,
    slots,
    createProgressBarSlot,
    progressBarPosition,
-    readingMode,
    isDragging,
    setIsDragging,
    openPage,
    direction,
    fullSegmentClicks,
 }: ReaderProgressBarProps &
-    Pick<IReaderSettings, 'readingMode'> &
    Pick<TReaderProgressBarContext, 'isDragging' | 'setIsDragging'> &
    Pick<ComponentProps<typeof ReaderProgressBarSlotWrapper>, 'createProgressBarSlot'> & {
        slotProps?: {
@@ -80,6 +78,7 @@ const BaseReaderProgressBar = ({
        totalPages: state.pages.totalPages,
        currentPageIndex: state.pages.currentPageIndex,
    }));
+    const readingMode = useReaderStore((state) => state.settings.readingMode.value);

    const progressBarRef = useRef<HTMLDivElement | null>(null);
    const draggingDetectionTimeout = useRef<NodeJS.Timeout>(undefined);
@@ -250,10 +249,6 @@ const BaseReaderProgressBar = ({

 export const ReaderProgressBar = withPropsFrom(
    memo(BaseReaderProgressBar),
-    [
-        useReaderProgressBarContext,
-        () => ({ openPage: ReaderControls.useOpenPage() }),
-        ReaderService.useSettingsWithoutDefaultFlag,
-    ],
-    ['isDragging', 'setIsDragging', 'openPage', 'readingMode'],
+    [useReaderProgressBarContext, () => ({ openPage: ReaderControls.useOpenPage() })],
+    ['isDragging', 'setIsDragging', 'openPage'],
 );
--- a/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx
+++ b/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx
@@ -10,7 +10,7 @@ import { useTheme } from '@mui/material/styles';
 import { memo, useCallback, useState } from 'react';
 import { ReaderProgressBar } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.tsx';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
-import { IReaderSettings, ProgressBarType } from '@/features/reader/Reader.types.ts';
+import { ProgressBarType } from '@/features/reader/Reader.types.ts';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { getProgressBarPositionInfo } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 import { ReaderProgressBarDirectionWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarDirectionWrapper.tsx';
@@ -29,23 +29,22 @@ const BaseStandardReaderProgressBar = ({
    isMaximized,
    setIsMaximized,
    isDragging,
-    progressBarType,
-    progressBarSize,
-    progressBarPosition,
-    progressBarPositionAutoVertical,
    readerDirection,
 }: Pick<NavbarContextType, 'readerNavBarWidth'> &
-    Pick<TReaderProgressBarContext, 'isMaximized' | 'setIsMaximized' | 'isDragging'> &
-    Pick<
-        IReaderSettings,
-        'progressBarType' | 'progressBarSize' | 'progressBarPosition' | 'progressBarPositionAutoVertical'
-    > & {
+    Pick<TReaderProgressBarContext, 'isMaximized' | 'setIsMaximized' | 'isDragging'> & {
        readerDirection: ReturnType<typeof ReaderService.useGetThemeDirection>;
    }) => {
    const theme = useTheme();

    const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
    const totalPages = useReaderStore((state) => state.pages.totalPages);
+    const { progressBarType, progressBarSize, progressBarPosition, progressBarPositionAutoVertical } =
+        useReaderStoreShallow((state) => ({
+            progressBarType: state.settings.progressBarType,
+            progressBarSize: state.settings.progressBarSize,
+            progressBarPosition: state.settings.progressBarPosition,
+            progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
+        }));

    const [, setRefreshProgressBarPosition] = useState({});
    useResizeObserver(
@@ -244,21 +243,6 @@ const BaseStandardReaderProgressBar = ({

 export const StandardReaderProgressBar = withPropsFrom(
    memo(BaseStandardReaderProgressBar),
-    [
-        useNavBarContext,
-        useReaderProgressBarContext,
-        ReaderService.useSettingsWithoutDefaultFlag,
-        () => ({ readerDirection: ReaderService.useGetThemeDirection() }),
-    ],
-    [
-        'readerNavBarWidth',
-        'isMaximized',
-        'setIsMaximized',
-        'isDragging',
-        'progressBarType',
-        'progressBarSize',
-        'progressBarPosition',
-        'progressBarPositionAutoVertical',
-        'readerDirection',
-    ],
+    [useNavBarContext, useReaderProgressBarContext, () => ({ readerDirection: ReaderService.useGetThemeDirection() })],
+    ['readerNavBarWidth', 'isMaximized', 'setIsMaximized', 'isDragging', 'readerDirection'],
 );
--- a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
+++ b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
@@ -21,7 +21,7 @@ import {
    getProgressBarPositionInfo,
 } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
-import { IReaderSettings, ProgressBarPosition } from '@/features/reader/Reader.types.ts';
+import { ProgressBarPosition } 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 { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
@@ -45,12 +45,9 @@ const BaseMobileReaderProgressBar = ({
    setIsMaximized,
    isDragging,
    direction: readerDirection,
-    progressBarPosition,
-    progressBarPositionAutoVertical,
    topOffset = 0,
    bottomOffset = 0,
-}: Pick<TReaderProgressBarContext, 'setIsMaximized' | 'isDragging'> &
-    Pick<IReaderSettings, 'progressBarPosition' | 'progressBarPositionAutoVertical'> & {
+}: Pick<TReaderProgressBarContext, 'setIsMaximized' | 'isDragging'> & {
    direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
    topOffset?: number;
    bottomOffset?: number;
@@ -66,6 +63,10 @@ const BaseMobileReaderProgressBar = ({
        previousChapter: state.chapters.previousChapter,
        nextChapter: state.chapters.nextChapter,
    }));
+    const { progressBarPosition, progressBarPositionAutoVertical } = useReaderStoreShallow((state) => ({
+        progressBarPosition: state.settings.progressBarPosition,
+        progressBarPositionAutoVertical: state.settings.progressBarPositionAutoVertical,
+    }));

    const [, setRefreshProgressBarPosition] = useState({});
    useResizeObserver(
@@ -353,10 +354,6 @@ const BaseMobileReaderProgressBar = ({

 export const MobileReaderProgressBar = withPropsFrom(
    memo(BaseMobileReaderProgressBar),
-    [
-        useReaderProgressBarContext,
-        () => ({ direction: ReaderService.useGetThemeDirection() }),
-        ReaderService.useSettingsWithoutDefaultFlag,
-    ],
-    ['setIsMaximized', 'isDragging', 'direction', 'progressBarPosition', 'progressBarPositionAutoVertical'],
+    [useReaderProgressBarContext, () => ({ direction: ReaderService.useGetThemeDirection() })],
+    ['setIsMaximized', 'isDragging', 'direction'],
 );
--- a/src/features/reader/screens/Reader.tsx
+++ b/src/features/reader/screens/Reader.tsx
@@ -22,21 +22,13 @@ import { defaultPromiseErrorHandler } from '@/lib/DefaultPromiseErrorHandler.ts'
 import { GET_CHAPTERS_READER } from '@/lib/graphql/queries/ChapterQuery.ts';
 import { TapZoneLayout } from '@/features/reader/tap-zones/TapZoneLayout.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';
-import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { READER_BACKGROUND_TO_COLOR } from '@/features/reader/settings/ReaderSettings.constants.tsx';
 import { ReaderHotkeys } from '@/features/reader/hotkeys/ReaderHotkeys.tsx';
-import {
-    IReaderSettings,
-    IReaderSettingsWithDefaultFlag,
-    TReaderStateSettingsContext,
-} from '@/features/reader/Reader.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
-import { useReaderTapZoneContext } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx';
 import { useReaderResetStates } from '@/features/reader/hooks/useReaderResetStates.ts';
 import { useReaderSetSettingsState } from '@/features/reader/hooks/useReaderSetSettingsState.ts';
 import { useReaderShowSettingPreviewOnChange } from '@/features/reader/hooks/useReaderShowSettingPreviewOnChange.ts';
@@ -50,28 +42,8 @@ import { ReaderAutoScroll } from '@/features/reader/auto-scroll/ReaderAutoScroll
 const BaseReader = ({
    setOverride,
    readerNavBarWidth,
-    shouldSkipDupChapters,
-    shouldSkipFilteredChapters,
-    backgroundColor,
-    readingMode,
-    tapZoneLayout,
-    tapZoneInvertMode,
-    shouldShowReadingModePreview,
-    shouldShowTapZoneLayoutPreview,
-    setSettings,
    setShowPreview,
-}: Pick<NavbarContextType, 'setOverride' | 'readerNavBarWidth'> &
-    Pick<TReaderStateSettingsContext, 'setSettings'> &
-    Pick<
-        IReaderSettings,
-        | 'shouldSkipDupChapters'
-        | 'shouldSkipFilteredChapters'
-        | 'backgroundColor'
-        | 'shouldShowReadingModePreview'
-        | 'shouldShowTapZoneLayoutPreview'
-    > &
-    Pick<IReaderSettingsWithDefaultFlag, 'readingMode' | 'tapZoneLayout' | 'tapZoneInvertMode'> &
-    Pick<TReaderTapZoneContext, 'setShowPreview'>) => {
+}: Pick<NavbarContextType, 'setOverride' | 'readerNavBarWidth'> & Pick<TReaderTapZoneContext, 'setShowPreview'>) => {
    const { t } = useTranslation();
    const manga = useReaderStoreShallow((state) => state.manga);
    const overlay = useReaderStoreShallow((state) => state.overlay);
@@ -83,6 +55,27 @@ const BaseReader = ({
            currentChapter: state.chapters.currentChapter,
        }),
    );
+    const {
+        shouldSkipDupChapters,
+        shouldSkipFilteredChapters,
+        backgroundColor,
+        readingMode,
+        tapZoneLayout,
+        tapZoneInvertMode,
+        shouldShowReadingModePreview,
+        shouldShowTapZoneLayoutPreview,
+        setSettings,
+    } = useReaderStoreShallow((state) => ({
+        shouldSkipDupChapters: state.settings.shouldSkipDupChapters,
+        shouldSkipFilteredChapters: state.settings.shouldSkipFilteredChapters,
+        backgroundColor: state.settings.backgroundColor,
+        readingMode: state.settings.readingMode,
+        tapZoneLayout: state.settings.tapZoneLayout,
+        tapZoneInvertMode: state.settings.tapZoneInvertMode,
+        shouldShowReadingModePreview: state.settings.shouldShowReadingModePreview,
+        shouldShowTapZoneLayoutPreview: state.settings.shouldShowTapZoneLayoutPreview,
+        setSettings: state.settings.setSettings,
+    }));

    const scrollElementRef = useRef<HTMLDivElement | null>(null);

@@ -123,7 +116,7 @@ const BaseReader = ({
        useReaderStore.getState().setManga(mangaResponse.data?.manga);
    }, [mangaResponse.data?.manga]);

-    useReaderResetStates(setSettings);
+    useReaderResetStates();
    useReaderSetSettingsState(
        mangaResponse,
        defaultSettingsResponse,
@@ -251,45 +244,4 @@ const BaseReader = ({
    );
 };

-export const Reader = withPropsFrom(
-    memo(BaseReader),
-    [
-        useNavBarContext,
-        useReaderStateSettingsContext,
-        () => {
-            const {
-                shouldSkipDupChapters,
-                shouldSkipFilteredChapters,
-                backgroundColor,
-                shouldShowReadingModePreview,
-                shouldShowTapZoneLayoutPreview,
-            } = ReaderService.useSettingsWithoutDefaultFlag();
-            return {
-                shouldSkipDupChapters,
-                shouldSkipFilteredChapters,
-                backgroundColor,
-                shouldShowReadingModePreview,
-                shouldShowTapZoneLayoutPreview,
-            };
-        },
-        () => {
-            const { readingMode, tapZoneLayout, tapZoneInvertMode } = ReaderService.useSettings();
-            return { readingMode, tapZoneLayout, tapZoneInvertMode };
-        },
-        useReaderTapZoneContext,
-    ],
-    [
-        'setOverride',
-        'readerNavBarWidth',
-        'shouldSkipDupChapters',
-        'shouldSkipFilteredChapters',
-        'backgroundColor',
-        'readingMode',
-        'tapZoneLayout',
-        'tapZoneInvertMode',
-        'shouldShowReadingModePreview',
-        'shouldShowTapZoneLayoutPreview',
-        'setSettings',
-        'setShowPreview',
-    ],
-);
+export const Reader = withPropsFrom(memo(BaseReader), [useNavBarContext], ['setOverride', 'readerNavBarWidth']);
--- a/src/features/reader/services/ReaderControls.ts
+++ b/src/features/reader/services/ReaderControls.ts
@@ -166,25 +166,26 @@ export class ReaderControls {
        scrollIntoView?: boolean,
    ) => void {
        const { t } = useTranslation();
-        const {
-            readingMode,
-            shouldInformAboutMissingChapter,
-            shouldInformAboutScanlatorChange,
-            shouldUseInfiniteScroll,
-        } = ReaderService.useSettings();

        const openChapter = ReaderService.useNavigateToChapter();

        return useCallback(
            (offset, doTransitionCheck = true, scrollIntoView = true) => {
                const {
+                    chapters: {
                        currentChapter,
                        previousChapter,
                        nextChapter,
                        chapters,
                        visibleChapters: { lastLeadingChapterSourceOrder, lastTrailingChapterSourceOrder },
                        setReaderStateChapters,
-                } = getReaderStore().chapters;
+                    },
+                    settings: {
+                        shouldInformAboutMissingChapter,
+                        shouldInformAboutScanlatorChange,
+                        shouldUseInfiniteScroll,
+                    },
+                } = getReaderStore();

                if (!currentChapter) {
                    return;
@@ -264,14 +265,7 @@ export class ReaderControls {

                doOpenChapter().catch(defaultPromiseErrorHandler('ReaderControls#useOpenChapter'));
            },
-            [
-                t,
-                openChapter,
-                readingMode.value,
-                shouldInformAboutMissingChapter,
-                shouldInformAboutScanlatorChange,
-                shouldUseInfiniteScroll,
-            ],
+            [t, openChapter],
        );
    }

@@ -341,22 +335,29 @@ export class ReaderControls {
        hideOverlay?: boolean,
    ) => void {
        const { setShowPreview } = useReaderTapZoneContext();
-        const { readingDirection, readingMode, shouldShowTransitionPage } = ReaderService.useSettings();
        const openChapter = ReaderControls.useOpenChapter();

+        return useCallback(
+            (page, forceDirection, hideOverlay: boolean = true) => {
+                const {
+                    pages: {
+                        currentPageIndex,
+                        setPageToScrollToIndex,
+                        pages,
+                        transitionPageMode,
+                        setTransitionPageMode,
+                    },
+                    settings: { readingDirection, readingMode, shouldShowTransitionPage },
+                } = getReaderStore();
+
                const direction = READING_DIRECTION_TO_THEME_DIRECTION[readingDirection.value];

-        return useCallback(
-            (page, forceDirection = direction, hideOverlay: boolean = true) => {
                const convertedPage = getOptionForDirection(
                    page,
                    page === 'previous' ? 'next' : 'previous',
-                    forceDirection,
+                    forceDirection ?? direction,
                );

-                const { currentPageIndex, setPageToScrollToIndex, pages, transitionPageMode, setTransitionPageMode } =
-                    getReaderStore().pages;
-
                const currentPage = getPage(currentPageIndex, pages);
                const previousPageIndex = getNextPageIndex('previous', currentPage.pagesIndex, pages);
                const nextPageIndex = getNextPageIndex('next', currentPage.pagesIndex, pages);
@@ -438,7 +439,7 @@ export class ReaderControls {

                setPageToScrollToIndex(isPreviousMode ? previousPageIndex : nextPageIndex);
            },
-            [direction, openChapter, shouldShowTransitionPage, readingMode.value],
+            [openChapter],
        );
    }

@@ -565,7 +566,6 @@ export class ReaderControls {
    ): (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void {
        const { direction: themeDirection } = useTheme();
        const { setShowPreview } = useReaderTapZoneContext();
-        const { readingMode, readingDirection, isStaticNav, scrollAmount } = ReaderService.useSettings();
        const openPage = ReaderControls.useOpenPage();
        const openChapter = ReaderControls.useOpenChapter();

@@ -575,6 +575,8 @@ export class ReaderControls {
                    return;
                }

+                const { readingMode, readingDirection, isStaticNav, scrollAmount } = getReaderStore().settings;
+
                const rect = e.currentTarget.getBoundingClientRect();
                const rectRelativeX = e.clientX - rect.left;
                const rectRelativeY = e.clientY - rect.top;
@@ -612,16 +614,7 @@ export class ReaderControls {
                        throw new Error(`Unexpected "TapZoneRegionType" (${action})`);
                }
            },
-            [
-                scrollElement,
-                readingMode.value,
-                openPage,
-                readingDirection.value,
-                openChapter,
-                themeDirection,
-                isStaticNav,
-                scrollAmount,
-            ],
+            [scrollElement, openPage, openChapter, themeDirection],
        );
    }

--- a/src/features/reader/services/ReaderService.ts
+++ b/src/features/reader/services/ReaderService.ts
@@ -14,7 +14,6 @@ import { ChapterIdInfo, TChapterReader } from '@/features/chapter/Chapter.types.
 import { Chapters } from '@/features/chapter/services/Chapters.ts';
 import {
    IReaderSettings,
-    IReaderSettingsWithDefaultFlag,
    ReaderExitMode,
    ReaderOpenChapterLocationState,
    ReaderOverlayMode,
@@ -22,10 +21,7 @@ import {
    ReadingDirection,
    ReadingMode,
 } from '@/features/reader/Reader.types.ts';
-import {
-    convertFromReaderSettingsWithDefaultFlag,
-    updateReaderSettings,
-} from '@/features/reader/settings/ReaderSettingsMetadata.ts';
+import { updateReaderSettings } from '@/features/reader/settings/ReaderSettingsMetadata.ts';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { MANGA_META_FIELDS } from '@/lib/graphql/fragments/MangaFragments.ts';
 import { makeToast } from '@/base/utils/Toast.ts';
@@ -34,7 +30,6 @@ import { GLOBAL_METADATA } from '@/lib/graphql/fragments/Fragments.ts';
 import { updateMetadataList } from '@/features/metadata/services/MetadataApolloCacheHandler.ts';
 import { useBackButton } from '@/base/hooks/useBackButton.ts';
 import { GLOBAL_READER_SETTING_KEYS } from '@/features/reader/settings/ReaderSettings.constants.tsx';
-import { useReaderStateSettingsContext } from '@/features/reader/contexts/state/ReaderStateSettingsContext.tsx';
 import { UpdateChapterPatchInput } from '@/lib/graphql/generated/graphql.ts';
 import { useMetadataServerSettings } from '@/features/settings/services/ServerSettingsMetadata.ts';
 import {
@@ -51,7 +46,7 @@ import { getErrorMessage } from '@/lib/HelperFunctions.ts';
 import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
 import { getMetadataKey } from '@/features/metadata/Metadata.utils.ts';
 import { DirectionOffset } from '@/base/Base.types.ts';
-import { getReaderStore } from '@/features/reader/ReaderStore.ts';
+import { getReaderStore, useReaderStore } from '@/features/reader/ReaderStore.ts';

 const DIRECTION_TO_INVERTED: Record<Direction, Direction> = {
    ltr: 'rtl',
@@ -154,7 +149,6 @@ export class ReaderService {
    }

    static useUpdateChapter(): (patch: UpdateChapterPatchInput) => void {
-        const { shouldSkipDupChapters } = ReaderService.useSettings();
        const {
            settings: { deleteChaptersWhileReading, deleteChaptersWithBookmark, updateProgressAfterReading },
        } = useMetadataServerSettings();
@@ -164,6 +158,7 @@ export class ReaderService {
                const {
                    manga,
                    chapters: { currentChapter, mangaChapters, chapters },
+                    settings: { shouldSkipDupChapters },
                } = getReaderStore();

                if (!manga || !currentChapter || !mangaChapters) {
@@ -229,23 +224,15 @@ export class ReaderService {

                ReaderService.getOrCreateChapterUpdateQueue(currentChapter.id).enqueue(`${currentChapter.id}`, update);
            },
-            [shouldSkipDupChapters, deleteChaptersWhileReading, deleteChaptersWithBookmark, updateProgressAfterReading],
+            [deleteChaptersWhileReading, deleteChaptersWithBookmark, updateProgressAfterReading],
        );
    }

-    static useSettings(): IReaderSettingsWithDefaultFlag {
-        return useReaderStateSettingsContext().settings;
-    }
-
-    static useSettingsWithoutDefaultFlag(): IReaderSettings {
-        return convertFromReaderSettingsWithDefaultFlag(ReaderService.useSettings());
-    }
-
    static useGetThemeDirection(): Direction {
        const { direction } = useTheme();
-        const { readingDirection } = ReaderService.useSettings();
+        const readingDirection = useReaderStore((state) => state.settings.readingDirection.value);

-        return DIRECTION_TO_READING_DIRECTION[direction] === readingDirection.value
+        return DIRECTION_TO_READING_DIRECTION[direction] === readingDirection
            ? direction
            : DIRECTION_TO_INVERTED[direction];
    }
@@ -352,7 +339,7 @@ export class ReaderService {

    static useOverlayMode(): { mode: ReaderOverlayMode; isDesktop: boolean; isMobile: boolean } {
        const isTouchDevice = MediaQuery.useIsTouchDevice();
-        const { overlayMode } = ReaderService.useSettings();
+        const overlayMode = useReaderStore((state) => state.settings.overlayMode);

        const isAutoModeSelected = overlayMode === ReaderOverlayMode.AUTO;
        const isDesktopModeSelected = overlayMode === ReaderOverlayMode.DESKTOP;
@@ -369,7 +356,7 @@ export class ReaderService {
    }

    static useExit(): () => void {
-        const { exitMode } = ReaderService.useSettings();
+        const exitMode = useReaderStore((state) => state.settings.exitMode);
        const handleBack = useBackButton();
        const navigate = useNavigate();

--- a/src/features/reader/settings/ReaderSettingsMetadata.ts
+++ b/src/features/reader/settings/ReaderSettingsMetadata.ts
@@ -34,14 +34,6 @@ import { DEFAULT_DEVICE, getActiveDevice } from '@/features/device/services/Devi
 import { APP_METADATA_KEY_PREFIX } from '@/features/metadata/Metadata.constants.ts';
 import { extractOriginalKey } from '@/features/metadata/Metadata.utils.ts';

-export const convertFromReaderSettingsWithDefaultFlag = (settings: IReaderSettingsWithDefaultFlag): IReaderSettings =>
-    Object.fromEntries(
-        Object.entries(settings).map(([key, value]) => [
-            key,
-            Object.hasOwn(value, 'value') && Object.hasOwn(value, 'isDefault') ? value.value : value,
-        ]),
-    ) as IReaderSettings;
-
 const convertToSettingsWithDefaultFlag = (
    type: Extract<MetadataHolderType, 'global' | 'manga'>,
    settings: IReaderSettings,
--- a/src/features/reader/settings/screens/ReaderSettings.tsx
+++ b/src/features/reader/settings/screens/ReaderSettings.tsx
@@ -15,9 +15,10 @@ import { ReaderSettingsTabs } from '@/features/reader/settings/components/Reader
 import { ReaderSettingTab } from '@/features/reader/settings/ReaderSettings.constants.tsx';
 import { useDisableAllHotkeysWhileMounted } from '@/features/hotkeys/Hotkeys.utils.ts';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
+import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () => void }) => {
-    const settings = ReaderService.useSettings();
+    const settings = useReaderStoreShallow((state) => state.settings);

    useDisableAllHotkeysWhileMounted(isOpen);

--- a/src/features/reader/tap-zones/TapZoneLayout.tsx
+++ b/src/features/reader/tap-zones/TapZoneLayout.tsx
@@ -13,24 +13,24 @@ import { useReaderTapZoneContext } from '@/features/reader/tap-zones/ReaderTapZo
 import { ReaderTapZoneService } from '@/features/reader/tap-zones/ReaderTapZoneService.ts';
 import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
-import { ReaderService } from '@/features/reader/services/ReaderService.ts';
-import { IReaderSettings, ReadingDirection } from '@/features/reader/Reader.types.ts';
+import { ReadingDirection } from '@/features/reader/Reader.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
 import { TReaderTapZoneContext } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
+import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 const CANVAS_ID = 'reader-tap-zone-layout-canvas';

 const BaseTapZoneLayout = ({
    readerNavBarWidth,
    showPreview,
-    tapZoneLayout,
-    tapZoneInvertMode,
-    readingDirection,
-}: Pick<NavbarContextType, 'readerNavBarWidth'> &
-    Pick<TReaderTapZoneContext, 'showPreview'> &
-    Pick<IReaderSettings, 'tapZoneLayout' | 'tapZoneInvertMode' | 'readingDirection'>) => {
+}: Pick<NavbarContextType, 'readerNavBarWidth'> & Pick<TReaderTapZoneContext, 'showPreview'>) => {
    const theme = useTheme();
+    const { tapZoneLayout, tapZoneInvertMode, readingDirection } = useReaderStoreShallow((state) => ({
+        tapZoneLayout: state.settings.tapZoneLayout.value,
+        tapZoneInvertMode: state.settings.tapZoneInvertMode.value,
+        readingDirection: state.settings.readingDirection.value,
+    }));

    const [width, setWidth] = useState(0);
    const [height, setHeight] = useState(0);
@@ -73,6 +73,6 @@ const BaseTapZoneLayout = ({

 export const TapZoneLayout = withPropsFrom(
    BaseTapZoneLayout,
-    [useNavBarContext, useReaderTapZoneContext, ReaderService.useSettingsWithoutDefaultFlag],
-    ['readerNavBarWidth', 'showPreview', 'tapZoneLayout', 'tapZoneInvertMode', 'readingDirection'],
+    [useNavBarContext, useReaderTapZoneContext],
+    ['readerNavBarWidth', 'showPreview'],
 );
--- a/src/features/reader/viewer/ReaderChapterViewer.tsx
+++ b/src/features/reader/viewer/ReaderChapterViewer.tsx
@@ -61,7 +61,6 @@ const BaseReaderChapterViewer = ({
    pageScaleMode,
    shouldOffsetDoubleSpreads,
    readingDirection,
-    shouldUseInfiniteScroll,
    imagePreLoadAmount,
    pageGap,
    chapterId,
@@ -103,12 +102,7 @@ const BaseReaderChapterViewer = ({
    Omit<ReaderPagerProps, 'pages' | 'totalPages' | 'pageLoadStates' | 'handleAsInitialRender' | 'resumeMode'> &
    Pick<
        IReaderSettings,
-        | 'readingMode'
-        | 'shouldOffsetDoubleSpreads'
-        | 'readingDirection'
-        | 'readerWidth'
-        | 'pageScaleMode'
-        | 'shouldUseInfiniteScroll'
+        'readingMode' | 'shouldOffsetDoubleSpreads' | 'readingDirection' | 'readerWidth' | 'pageScaleMode'
    > &
    Pick<ReaderStateChapters, 'setReaderStateChapters'> & {
        updateCurrentPageIndex: ReturnType<typeof ReaderControls.useUpdateCurrentPageIndex>;
@@ -405,9 +399,6 @@ const BaseReaderChapterViewer = ({
        >
            {!isPreloadMode && (
                <ReaderInfiniteScrollUpdateChapter
-                    readingMode={readingMode}
-                    readingDirection={readingDirection}
-                    shouldUseInfiniteScroll={shouldUseInfiniteScroll}
                    chapterId={chapterId}
                    previousChapterId={previousChapterId}
                    nextChapterId={nextChapterId}
--- a/src/features/reader/viewer/ReaderViewer.tsx
+++ b/src/features/reader/viewer/ReaderViewer.tsx
@@ -21,9 +21,7 @@ import Stack from '@mui/material/Stack';
 import { useTheme } from '@mui/material/styles';
 import { useLocation } from 'react-router-dom';
 import { useMergedRef } from '@mantine/hooks';
-import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import {
-    IReaderSettings,
    PageInViewportType,
    ReaderOpenChapterLocationState,
    ReaderResumeMode,
@@ -73,36 +71,11 @@ const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType>
 const BaseReaderViewer = forwardRef(
    (
        {
-            readingMode,
-            readingDirection,
-            shouldUseInfiniteScroll,
-            readerWidth,
-            pageScaleMode,
-            shouldOffsetDoubleSpreads,
-            imagePreLoadAmount,
-            pageGap,
-            customFilter,
-            shouldStretchPage,
-            isStaticNav,
            readerNavBarWidth,
            updateCurrentPageIndex,
            showPreview,
            setShowPreview,
-        }: Pick<
-            IReaderSettings,
-            | 'readingMode'
-            | 'readingDirection'
-            | 'shouldUseInfiniteScroll'
-            | 'readerWidth'
-            | 'pageScaleMode'
-            | 'shouldOffsetDoubleSpreads'
-            | 'imagePreLoadAmount'
-            | 'pageGap'
-            | 'customFilter'
-            | 'shouldStretchPage'
-            | 'isStaticNav'
-        > &
-            Pick<NavbarContextType, 'readerNavBarWidth'> &
+        }: Pick<NavbarContextType, 'readerNavBarWidth'> &
            TReaderTapZoneContext & {
                updateCurrentPageIndex: ReturnType<typeof ReaderControls.useUpdateCurrentPageIndex>;
            },
@@ -153,6 +126,29 @@ const BaseReaderViewer = forwardRef(
            setReaderStateChapters: state.chapters.setReaderStateChapters,
            isCurrentChapterReady: state.chapters.isCurrentChapterReady,
        }));
+        const {
+            readingMode,
+            readingDirection,
+            readerWidth,
+            pageScaleMode,
+            shouldOffsetDoubleSpreads,
+            imagePreLoadAmount,
+            pageGap,
+            customFilter,
+            shouldStretchPage,
+            isStaticNav,
+        } = useReaderStoreShallow((state) => ({
+            readingMode: state.settings.readingMode.value,
+            readingDirection: state.settings.readingDirection.value,
+            readerWidth: state.settings.readerWidth.value,
+            pageScaleMode: state.settings.pageScaleMode.value,
+            shouldOffsetDoubleSpreads: state.settings.shouldOffsetDoubleSpreads.value,
+            imagePreLoadAmount: state.settings.imagePreLoadAmount,
+            pageGap: state.settings.pageGap.value,
+            customFilter: state.settings.customFilter,
+            shouldStretchPage: state.settings.shouldStretchPage.value,
+            isStaticNav: state.settings.isStaticNav,
+        }));
        const { resumeMode = ReaderResumeMode.START } = useLocation<ReaderOpenChapterLocationState>().state ?? {
            resumeMode: ReaderResumeMode.START,
        };
@@ -408,7 +404,6 @@ const BaseReaderViewer = forwardRef(
                            pageScaleMode={pageScaleMode}
                            shouldOffsetDoubleSpreads={shouldOffsetDoubleSpreads}
                            readingDirection={readingDirection}
-                            shouldUseInfiniteScroll={shouldUseInfiniteScroll}
                            updateCurrentPageIndex={isCurrentChapter ? updateCurrentPageIndex : noOp}
                            scrollIntoView={isCurrentChapter && visibleChapters.scrollIntoView}
                            resumeMode={getReaderChapterViewResumeMode(
@@ -441,26 +436,9 @@ const BaseReaderViewer = forwardRef(
 export const ReaderViewer = withPropsFrom(
    memo(BaseReaderViewer),
    [
-        ReaderService.useSettingsWithoutDefaultFlag,
        () => ({ updateCurrentPageIndex: ReaderControls.useUpdateCurrentPageIndex() }),
        useReaderTapZoneContext,
        useNavBarContext,
    ],
-    [
-        'readingMode',
-        'readingDirection',
-        'shouldUseInfiniteScroll',
-        'readerWidth',
-        'pageScaleMode',
-        'shouldOffsetDoubleSpreads',
-        'imagePreLoadAmount',
-        'pageGap',
-        'customFilter',
-        'shouldStretchPage',
-        'isStaticNav',
-        'readerNavBarWidth',
-        'updateCurrentPageIndex',
-        'showPreview',
-        'setShowPreview',
-    ],
+    ['readerNavBarWidth', 'updateCurrentPageIndex', 'showPreview', 'setShowPreview'],
 );
--- a/src/features/reader/viewer/components/ReaderTransitionPage.tsx
+++ b/src/features/reader/viewer/components/ReaderTransitionPage.tsx
@@ -27,7 +27,6 @@ import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { getValueFromObject, noOp } from '@/lib/HelperFunctions.ts';
 import { READER_BACKGROUND_TO_COLOR } from '@/features/reader/settings/ReaderSettings.constants.tsx';
-import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
 import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
 import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
@@ -71,9 +70,6 @@ const ChapterInfo = ({

 const BaseReaderTransitionPage = ({
    type,
-    readingMode,
-    backgroundColor,
-    shouldShowTransitionPage,
    currentChapterName,
    currentChapterScanlator,
    previousChapterName,
@@ -82,8 +78,7 @@ const BaseReaderTransitionPage = ({
    nextChapterScanlator,
    readerNavBarWidth,
    handleBack,
-}: Pick<IReaderSettings, 'readingMode' | 'backgroundColor' | 'shouldShowTransitionPage'> &
-    Pick<NavbarContextType, 'readerNavBarWidth'> & {
+}: Pick<NavbarContextType, 'readerNavBarWidth'> & {
    // gets used in the "source props creators" of the "withPropsFrom" call
    // eslint-disable-next-line react/no-unused-prop-types
    chapterId: ChapterIdInfo['id'];
@@ -100,6 +95,11 @@ const BaseReaderTransitionPage = ({
    const manga = useReaderStoreShallow((state) => state.manga);
    const scrollbar = useReaderStoreShallow((state) => state.scrollbar);
    const transitionPageMode = useReaderStore((state) => state.pages.transitionPageMode);
+    const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderStoreShallow((state) => ({
+        readingMode: state.settings.readingMode.value,
+        backgroundColor: state.settings.backgroundColor,
+        shouldShowTransitionPage: state.settings.shouldShowTransitionPage,
+    }));

    const isPreviousType = type === ReaderTransitionPageMode.PREVIOUS;
    const isNextType = type === ReaderTransitionPageMode.NEXT;
@@ -244,7 +244,6 @@ export const ReaderTransitionPage = withPropsFrom(
            };
        },
        useNavBarContext,
-        ReaderService.useSettingsWithoutDefaultFlag,
        ({ chapterId, type }: Pick<ComponentProps<typeof BaseReaderTransitionPage>, 'chapterId' | 'type'>) => {
            const handleBack = useBackButton();
            const chapters = useReaderStoreShallow((state) => state.chapters.chapters);
@@ -276,9 +275,6 @@ export const ReaderTransitionPage = withPropsFrom(
        'nextChapterName',
        'nextChapterScanlator',
        'readerNavBarWidth',
-        'backgroundColor',
-        'readingMode',
        'handleBack',
-        'shouldShowTransitionPage',
    ],
 );