Move reader "settings state" to "reader store"

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 : []>
     : {};

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

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'],
 );

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>
 );

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>
-);

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>;
-};

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 = ({
+const BaseReaderRGBAFilter = ({ readerNavBarWidth }: Pick<NavbarContextType, 'readerNavBarWidth'>) => {
-    readerNavBarWidth,
+    const {
-    customFilter: {
-        rgba: {
         value: { red, green, blue, alpha, blendMode },
         enabled,
-        },
+    } = useReaderStoreShallow((state) => state.settings.customFilter.rgba);
-    },
+
-}: Pick<NavbarContextType, 'readerNavBarWidth'> & Pick<IReaderSettings, 'customFilter'>) => {
     if (!enabled) {
         return null;
     }
@@ -42,8 +38,4 @@ const BaseReaderRGBAFilter = ({
     );
 };
 
-export const ReaderRGBAFilter = withPropsFrom(
+export const ReaderRGBAFilter = withPropsFrom(BaseReaderRGBAFilter, [useNavBarContext], ['readerNavBarWidth']);
-    BaseReaderRGBAFilter,
-    [useNavBarContext, ReaderService.useSettingsWithoutDefaultFlag],
-    ['readerNavBarWidth', 'customFilter'],
-);

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);
         },
         [],
     );

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 {
+    const { hotkeys } = useReaderStoreShallow((state) => ({
-        hotkeys,
+        hotkeys: state.settings.hotkeys,
-        pageScaleMode,
+    }));
-        shouldStretchPage,
-        shouldOffsetDoubleSpreads,
-        readingMode,
-        readingDirection,
-        autoScroll,
-        scrollAmount,
-    } = ReaderService.useSettings();
     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) {
+            if (autoScroll.isActive) {
-                automaticScrolling.setDirection(ScrollOffset.BACKWARD);
+                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) {
+            if (autoScroll.isActive) {
-                automaticScrolling.setDirection(ScrollOffset.FORWARD);
+                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(
+    useHotkeys(hotkeys[ReaderHotkey.STRETCH_IMAGE], () =>
-        hotkeys[ReaderHotkey.STRETCH_IMAGE],
+        ReaderService.updateSetting('shouldStretchPage', !getReaderStore().settings.shouldStretchPage.value),
-        () => ReaderService.updateSetting('shouldStretchPage', !shouldStretchPage.value),
-        [shouldStretchPage.value],
     );
-    useHotkeys(
+    useHotkeys(hotkeys[ReaderHotkey.OFFSET_SPREAD_PAGES], () =>
-        hotkeys[ReaderHotkey.OFFSET_SPREAD_PAGES],
+        ReaderService.updateSetting(
-        () => ReaderService.updateSetting('shouldOffsetDoubleSpreads', !shouldOffsetDoubleSpreads.value),
+            'shouldOffsetDoubleSpreads',
-        [shouldOffsetDoubleSpreads.value],
+            !getReaderStore().settings.shouldOffsetDoubleSpreads.value,
+        ),
     );
-    useHotkeys(
+    useHotkeys(hotkeys[ReaderHotkey.CYCLE_READING_MODE], () => {
-        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(
+    useHotkeys(hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_DECREASE], () =>
-        hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_DECREASE],
-        () =>
         ReaderService.updateSetting('autoScroll', {
-                ...autoScroll,
+            ...getReaderStore().settings.autoScroll,
-                value: Math.min(AUTO_SCROLL_SPEED.max, autoScroll.value + AUTO_SCROLL_SPEED.step),
+            value: Math.min(AUTO_SCROLL_SPEED.max, getReaderStore().settings.autoScroll.value + AUTO_SCROLL_SPEED.step),
         }),
-        [autoScroll.value],
     );
-    useHotkeys(
+    useHotkeys(hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_INCREASE], () =>
-        hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_INCREASE],
-        () =>
         ReaderService.updateSetting('autoScroll', {
-                ...autoScroll,
+            ...getReaderStore().settings.autoScroll,
-                value: Math.max(AUTO_SCROLL_SPEED.min, autoScroll.value - AUTO_SCROLL_SPEED.step),
+            value: Math.max(AUTO_SCROLL_SPEED.min, getReaderStore().settings.autoScroll.value - AUTO_SCROLL_SPEED.step),
         }),
-        [autoScroll.value],
     );
     useHotkeys(hotkeys[ReaderHotkey.EXIT_READER], exitReader, [exitReader]);
 

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: ReaderControls.useOpenChapter() })],
-    ['openChapter', 'shouldShowTransitionPage'],
+    ['openChapter'],
 );

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);

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<TReaderProgressBarContext, 'isMaximized'>) => {
-    Pick<IReaderSettings, 'progressBarType' | 'shouldShowPageNumber' | 'readingDirection'>) => {
     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.useOverlayMode,
+    ['isDesktop', 'readerNavBarWidth', 'isMaximized'],
-        useNavBarContext,
-        useReaderProgressBarContext,
-        ReaderService.useSettingsWithoutDefaultFlag,
-    ],
-    ['isDesktop', 'readerNavBarWidth', 'isMaximized', 'progressBarType', 'shouldShowPageNumber', 'readingDirection'],
 );

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'>) => {
-}: ReaderNavBarDesktopProps &
-    Pick<NavbarContextType, 'setReaderNavBarWidth'> &
-    Pick<IReaderSettings, 'isStaticNav'>) => {
     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],
+    [useNavBarContext],
-    ['setReaderNavBarWidth', 'isStaticNav'],
+    ['setReaderNavBarWidth'],
 );

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],
+    [() => ({ openPage: ReaderControls.useOpenPage() })],
-    ['readingDirection', 'openPage'],
+    ['openPage'],
 );

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 = ({
+const BaseReaderNavBarDesktopQuickSettings = ({ openSettings }: Pick<ReaderNavBarDesktopProps, 'openSettings'>) => {
-    readingMode,
-    shouldOffsetDoubleSpreads,
-    pageScaleMode,
-    shouldStretchPage,
-    readingDirection,
-    autoScroll,
-    openSettings,
-}: Pick<ReaderNavBarDesktopProps, 'openSettings'> &
-    Pick<
-        IReaderSettingsWithDefaultFlag,
-        | 'readingMode'
-        | 'shouldOffsetDoubleSpreads'
-        | 'pageScaleMode'
-        | 'shouldStretchPage'
-        | 'readingDirection'
-        | 'autoScroll'
-    >) => {
     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(
+export const ReaderNavBarDesktopQuickSettings = memo(BaseReaderNavBarDesktopQuickSettings);
-    BaseReaderNavBarDesktopQuickSettings,
-    [ReaderService.useSettings],
-    [
-        'readingMode',
-        'shouldOffsetDoubleSpreads',
-        'pageScaleMode',
-        'shouldStretchPage',
-        'readingDirection',
-        'autoScroll',
-    ],
-);

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 = ({
+const BaseReaderBottomBarMobileQuickSettings = () => {
-    readingMode,
-    readingDirection,
-    autoScroll,
-}: Pick<IReaderSettingsWithDefaultFlag, 'readingMode' | 'readingDirection' | 'autoScroll'>) => {
     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(
+export const ReaderBottomBarMobileQuickSettings = memo(BaseReaderBottomBarMobileQuickSettings);
-    memo(BaseReaderBottomBarMobileQuickSettings),
-    [ReaderService.useSettings],
-    ['readingMode', 'readingDirection', 'autoScroll'],
-);

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 { ReadingMode } from '@/features/reader/Reader.types.ts';
-import { useReaderStoreShallow } from '@/features/reader/ReaderStore.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() })],
-        useReaderProgressBarContext,
+    ['isDragging', 'setIsDragging', 'openPage'],
-        () => ({ openPage: ReaderControls.useOpenPage() }),
-        ReaderService.useSettingsWithoutDefaultFlag,
-    ],
-    ['isDragging', 'setIsDragging', 'openPage', 'readingMode'],
 );

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<TReaderProgressBarContext, 'isMaximized' | 'setIsMaximized' | 'isDragging'> & {
-    Pick<
-        IReaderSettings,
-        'progressBarType' | 'progressBarSize' | 'progressBarPosition' | 'progressBarPositionAutoVertical'
-    > & {
         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, () => ({ readerDirection: ReaderService.useGetThemeDirection() })],
-        useNavBarContext,
+    ['readerNavBarWidth', 'isMaximized', 'setIsMaximized', 'isDragging', 'readerDirection'],
-        useReaderProgressBarContext,
-        ReaderService.useSettingsWithoutDefaultFlag,
-        () => ({ readerDirection: ReaderService.useGetThemeDirection() }),
-    ],
-    [
-        'readerNavBarWidth',
-        'isMaximized',
-        'setIsMaximized',
-        'isDragging',
-        'progressBarType',
-        'progressBarSize',
-        'progressBarPosition',
-        'progressBarPositionAutoVertical',
-        'readerDirection',
-    ],
 );

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<TReaderProgressBarContext, 'setIsMaximized' | 'isDragging'> & {
-    Pick<IReaderSettings, 'progressBarPosition' | 'progressBarPositionAutoVertical'> & {
     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() })],
-        useReaderProgressBarContext,
+    ['setIsMaximized', 'isDragging', 'direction'],
-        () => ({ direction: ReaderService.useGetThemeDirection() }),
-        ReaderService.useSettingsWithoutDefaultFlag,
-    ],
-    ['setIsMaximized', 'isDragging', 'direction', 'progressBarPosition', 'progressBarPositionAutoVertical'],
 );

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<NavbarContextType, 'setOverride' | 'readerNavBarWidth'> & Pick<TReaderTapZoneContext, 'setShowPreview'>) => {
-    Pick<TReaderStateSettingsContext, 'setSettings'> &
-    Pick<
-        IReaderSettings,
-        | 'shouldSkipDupChapters'
-        | 'shouldSkipFilteredChapters'
-        | 'backgroundColor'
-        | 'shouldShowReadingModePreview'
-        | 'shouldShowTapZoneLayoutPreview'
-    > &
-    Pick<IReaderSettingsWithDefaultFlag, 'readingMode' | 'tapZoneLayout' | 'tapZoneInvertMode'> &
-    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(
+export const Reader = withPropsFrom(memo(BaseReader), [useNavBarContext], ['setOverride', 'readerNavBarWidth']);
-    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',
-    ],
-);

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],
-                t,
-                openChapter,
-                readingMode.value,
-                shouldInformAboutMissingChapter,
-                shouldInformAboutScanlatorChange,
-                shouldUseInfiniteScroll,
-            ],
         );
     }
 
@@ -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, openPage, openChapter, themeDirection],
-                scrollElement,
-                readingMode.value,
-                openPage,
-                readingDirection.value,
-                openChapter,
-                themeDirection,
-                isStaticNav,
-                scrollAmount,
-            ],
         );
     }
 

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 {
+import { updateReaderSettings } from '@/features/reader/settings/ReaderSettingsMetadata.ts';
-    convertFromReaderSettingsWithDefaultFlag,
-    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();
 

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,

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);
 

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 { ReadingDirection } from '@/features/reader/Reader.types.ts';
-import { IReaderSettings, 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,
+}: Pick<NavbarContextType, 'readerNavBarWidth'> & Pick<TReaderTapZoneContext, 'showPreview'>) => {
-    tapZoneInvertMode,
-    readingDirection,
-}: Pick<NavbarContextType, 'readerNavBarWidth'> &
-    Pick<TReaderTapZoneContext, 'showPreview'> &
-    Pick<IReaderSettings, 'tapZoneLayout' | 'tapZoneInvertMode' | 'readingDirection'>) => {
     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],
+    [useNavBarContext, useReaderTapZoneContext],
-    ['readerNavBarWidth', 'showPreview', 'tapZoneLayout', 'tapZoneInvertMode', 'readingDirection'],
+    ['readerNavBarWidth', 'showPreview'],
 );

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'
+        'readingMode' | 'shouldOffsetDoubleSpreads' | 'readingDirection' | 'readerWidth' | 'pageScaleMode'
-        | 'shouldOffsetDoubleSpreads'
-        | 'readingDirection'
-        | 'readerWidth'
-        | 'pageScaleMode'
-        | 'shouldUseInfiniteScroll'
     > &
     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}

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<
+        }: Pick<NavbarContextType, 'readerNavBarWidth'> &
-            IReaderSettings,
-            | 'readingMode'
-            | 'readingDirection'
-            | 'shouldUseInfiniteScroll'
-            | 'readerWidth'
-            | 'pageScaleMode'
-            | 'shouldOffsetDoubleSpreads'
-            | 'imagePreLoadAmount'
-            | 'pageGap'
-            | 'customFilter'
-            | 'shouldStretchPage'
-            | 'isStaticNav'
-        > &
-            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,
     ],
-    [
+    ['readerNavBarWidth', 'updateCurrentPageIndex', 'showPreview', 'setShowPreview'],
-        'readingMode',
-        'readingDirection',
-        'shouldUseInfiniteScroll',
-        'readerWidth',
-        'pageScaleMode',
-        'shouldOffsetDoubleSpreads',
-        'imagePreLoadAmount',
-        'pageGap',
-        'customFilter',
-        'shouldStretchPage',
-        'isStaticNav',
-        'readerNavBarWidth',
-        'updateCurrentPageIndex',
-        'showPreview',
-        'setShowPreview',
-    ],
 );

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',
     ],
 );