Move reader "manga state" to "reader store"

.eslintrc.cjs

@@ -15,6 +15,8 @@ module.exports = {
         {
             files: ['*'],
             rules: {
+                'no-param-reassign': ['error', { props: true, ignorePropertyModificationsForRegex: ["^draft"] }],
+
                 'unused-imports/no-unused-imports': 'error',
 
                 'import/prefer-default-export': 'off',

src/features/manga/components/cards/MangaCard.tsx

@@ -99,6 +99,7 @@ export const MangaCard = memo((props: MangaCardProps) => {
     const longPressBind = useLongPress(
         useCallback(
             (e: any, { context }: any) => {
+                // eslint-disable-next-line no-param-reassign
                 e.shiftKey = true;
                 handleClick(e, context as () => {});
             },

src/features/reader/Reader.types.ts

@@ -10,7 +10,6 @@ import { MutableRefObject } from 'react';
 import { TapZoneInvertMode, TapZoneLayouts } from '@/features/reader/tap-zones/TapZoneLayout.types.ts';
 import { TChapterReader } from '@/features/chapter/Chapter.types.ts';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
-import { TMangaReader } from '@/features/manga/Manga.types.ts';
 import { useAutomaticScrolling } from '@/base/hooks/useAutomaticScrolling.ts';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
 import { ScrollOffset } from '@/base/Base.types.ts';
@@ -243,7 +242,7 @@ export interface ReaderStateChapters {
 interface ReaderSettingsTypeBaseProps {
     settings: IReaderSettingsWithDefaultFlag;
     updateSetting: (
-        ...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>
+        ...args: Parameters<typeof ReaderService.updateSetting>
     ) => ReturnType<typeof ReaderService.updateSetting>;
 }
 
@@ -378,11 +377,6 @@ export type TReaderScrollbarContext = {
     setScrollbarYSize: (size: number) => void;
 };
 
-export type TReaderStateMangaContext = {
-    manga: TMangaReader | undefined;
-    setManga: (manga: TMangaReader | undefined) => void;
-};
-
 export type TReaderStateSettingsContext = {
     settings: IReaderSettingsWithDefaultFlag;
     setSettings: (settings: IReaderSettingsWithDefaultFlag) => void;

src/features/reader/ReaderStore.ts

@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+import { create } from 'zustand';
+import { immer } from 'zustand/middleware/immer';
+import { TMangaReader } from '@/features/manga/Manga.types.ts';
+
+interface ReaderStore {
+    reset: () => void;
+    manga: TMangaReader | undefined;
+    setManga: (manga: TMangaReader | undefined) => void;
+}
+
+const DEFAULT_STATE = {
+    manga: undefined,
+} satisfies Pick<ReaderStore, 'manga'>;
+
+export const useReaderStore = create<ReaderStore>()(
+    immer((set) => ({
+        ...DEFAULT_STATE,
+        reset: () =>
+            set((draft) => {
+                draft.manga = DEFAULT_STATE.manga;
+            }),
+        setManga: (manga) =>
+            set((draft) => {
+                draft.manga = manga;
+            }),
+    })),
+);

src/features/reader/contexts/state/ReaderStateContextProvider.tsx

@@ -8,16 +8,13 @@
 
 import { ReactNode } from 'react';
 import { ReaderStateChaptersContextProvider } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
-import { ReaderStateMangaContextProvider } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx';
 import { ReaderStatePagesContextProvider } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { ReaderStateSettingsContextProvider } from '@/features/reader/contexts/state/ReaderStateSettingsContext.tsx';
 
 export const ReaderStateContextProvider = ({ children }: { children: ReactNode }) => (
-    <ReaderStateMangaContextProvider>
     <ReaderStateChaptersContextProvider>
         <ReaderStateSettingsContextProvider>
             <ReaderStatePagesContextProvider>{children}</ReaderStatePagesContextProvider>
         </ReaderStateSettingsContextProvider>
     </ReaderStateChaptersContextProvider>
-    </ReaderStateMangaContextProvider>
 );

src/features/reader/contexts/state/ReaderStateMangaContext.tsx

@@ -1,25 +0,0 @@
-/*
- * Copyright (C) Contributors to the Suwayomi project
- *
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
-import { createContext, ReactNode, useContext, useMemo, useState } from 'react';
-import { TReaderStateMangaContext } from '@/features/reader/Reader.types.ts';
-
-export const ReaderStateMangaContext = createContext<TReaderStateMangaContext>({
-    manga: undefined,
-    setManga: () => undefined,
-});
-
-export const useReaderStateMangaContext = () => useContext(ReaderStateMangaContext);
-
-export const ReaderStateMangaContextProvider = ({ children }: { children: ReactNode }) => {
-    const [manga, setManga] = useState<TReaderStateMangaContext['manga']>();
-
-    const value = useMemo(() => ({ manga, setManga }), [manga]);
-
-    return <ReaderStateMangaContext.Provider value={value}>{children}</ReaderStateMangaContext.Provider>;
-};

src/features/reader/hooks/useReaderResetStates.ts

@@ -13,15 +13,14 @@ import {
     ReaderStatePages,
     ReaderTransitionPageMode,
     TReaderAutoScrollContext,
-    TReaderStateMangaContext,
     TReaderStateSettingsContext,
 } from '@/features/reader/Reader.types.ts';
 import { DEFAULT_READER_SETTINGS_WITH_DEFAULT_FLAG } from '@/features/reader/settings/ReaderSettingsMetadata.ts';
 import { TReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlay.types.ts';
 import { READER_STATE_CHAPTERS_DEFAULTS } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
+import { getReaderStore } from '@/features/reader/ReaderStore.ts';
 
 export const useReaderResetStates = (
-    setManga: TReaderStateMangaContext['setManga'],
     setReaderStateChapters: ReaderStateChapters['setReaderStateChapters'],
     setCurrentPageIndex: ReaderStatePages['setCurrentPageIndex'],
     setPageToScrollToIndex: ReaderStatePages['setPageToScrollToIndex'],
@@ -36,7 +35,7 @@ export const useReaderResetStates = (
 ) => {
     useEffect(
         () => () => {
-            setManga(undefined);
+            getReaderStore().reset();
             setReaderStateChapters(READER_STATE_CHAPTERS_DEFAULTS);
 
             setCurrentPageIndex(0);

src/features/reader/hotkeys/ReaderHotkeys.tsx

@@ -21,12 +21,10 @@ import {
     READING_DIRECTION_VALUES,
     READING_MODE_VALUES,
 } from '@/features/reader/settings/ReaderSettings.constants.tsx';
-import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx';
 import { HotkeyScope } from '@/features/hotkeys/Hotkeys.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';
-import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
 import { useReaderAutoScrollContext } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx';
 import { useReaderTapZoneContext } from '@/features/reader/tap-zones/ReaderTapZoneContext.tsx';
 
@@ -36,8 +34,6 @@ const useHotkeys = (...args: Parameters<typeof useHotKeysHook>): ReturnType<type
 };
 
 const updateSettingCycleThrough = <Setting extends keyof IReaderSettings>(
-    updateSetting: ReturnType<typeof ReaderService.useCreateUpdateSetting>,
-    deleteSetting: ReturnType<typeof ReaderService.useCreateDeleteSetting>,
     setting: Setting,
     value: IReaderSettings[Setting],
     values: IReaderSettings[Setting][],
@@ -45,7 +41,7 @@ const updateSettingCycleThrough = <Setting extends keyof IReaderSettings>(
     isDefaultable: boolean,
 ) => {
     if (isDefault) {
-        updateSetting(setting, values[0]);
+        ReaderService.updateSetting(setting, values[0]);
         return;
     }
 
@@ -53,11 +49,11 @@ const updateSettingCycleThrough = <Setting extends keyof IReaderSettings>(
 
     const isDefaultNextValue = nextValue === undefined;
     if (isDefaultNextValue) {
-        deleteSetting(setting);
+        ReaderService.deleteSetting(setting);
         return;
     }
 
-    updateSetting(setting, nextValue);
+    ReaderService.updateSetting(setting, nextValue);
 };
 
 export const ReaderHotkeys = ({
@@ -68,7 +64,6 @@ export const ReaderHotkeys = ({
     const { direction: themeDirection } = useTheme();
     const readerThemeDirection = ReaderService.useGetThemeDirection();
     const { enableScope, disableScope } = useHotkeysContext();
-    const { manga } = useReaderStateMangaContext();
     const { isVisible, setIsVisible: setIsOverlayVisible } = useReaderOverlayContext();
     const {
         hotkeys,
@@ -87,9 +82,6 @@ export const ReaderHotkeys = ({
     const openChapter = ReaderControls.useOpenChapter();
     const openPage = ReaderControls.useOpenPage();
 
-    const updateSetting = ReaderService.useCreateUpdateSetting(manga ?? FALLBACK_MANGA);
-    const deleteSetting = ReaderService.useCreateDeleteSetting(manga ?? FALLBACK_MANGA);
-
     useHotkeys(hotkeys[ReaderHotkey.PREVIOUS_PAGE], () => openPage('previous'), [openPage]);
     useHotkeys(hotkeys[ReaderHotkey.NEXT_PAGE], () => openPage('next'), [openPage]);
     useHotkeys(
@@ -177,8 +169,6 @@ export const ReaderHotkeys = ({
         hotkeys[ReaderHotkey.CYCLE_SCALE_TYPE],
         () => {
             updateSettingCycleThrough(
-                updateSetting,
-                deleteSetting,
                 'pageScaleMode',
                 pageScaleMode.value,
                 READER_PAGE_SCALE_MODE_VALUES,
@@ -186,24 +176,22 @@ export const ReaderHotkeys = ({
                 true,
             );
         },
-        [updateSetting, deleteSetting, pageScaleMode.value, pageScaleMode.isDefault],
+        [pageScaleMode.value, pageScaleMode.isDefault],
     );
     useHotkeys(
         hotkeys[ReaderHotkey.STRETCH_IMAGE],
-        () => updateSetting('shouldStretchPage', !shouldStretchPage.value),
+        () => ReaderService.updateSetting('shouldStretchPage', !shouldStretchPage.value),
-        [updateSetting, shouldStretchPage.value],
+        [shouldStretchPage.value],
     );
     useHotkeys(
         hotkeys[ReaderHotkey.OFFSET_SPREAD_PAGES],
-        () => updateSetting('shouldOffsetDoubleSpreads', !shouldOffsetDoubleSpreads.value),
+        () => ReaderService.updateSetting('shouldOffsetDoubleSpreads', !shouldOffsetDoubleSpreads.value),
-        [updateSetting, shouldOffsetDoubleSpreads.value],
+        [shouldOffsetDoubleSpreads.value],
     );
     useHotkeys(
         hotkeys[ReaderHotkey.CYCLE_READING_MODE],
         () => {
             updateSettingCycleThrough(
-                updateSetting,
-                deleteSetting,
                 'readingMode',
                 readingMode.value,
                 READING_MODE_VALUES,
@@ -211,14 +199,12 @@ export const ReaderHotkeys = ({
                 true,
             );
         },
-        [updateSetting, deleteSetting, readingMode.value, readingMode.isDefault],
+        [readingMode.value, readingMode.isDefault],
     );
     useHotkeys(
         hotkeys[ReaderHotkey.CYCLE_READING_DIRECTION],
         () => {
             updateSettingCycleThrough(
-                updateSetting,
-                deleteSetting,
                 'readingDirection',
                 readingDirection.value,
                 READING_DIRECTION_VALUES,
@@ -226,7 +212,7 @@ export const ReaderHotkeys = ({
                 true,
             );
         },
-        [updateSetting, deleteSetting, readingDirection.value, readingDirection.isDefault],
+        [readingDirection.value, readingDirection.isDefault],
     );
     useHotkeys(hotkeys[ReaderHotkey.TOGGLE_AUTO_SCROLL], automaticScrolling.toggleActive, { preventDefault: true }, [
         automaticScrolling.toggleActive,
@@ -234,20 +220,20 @@ export const ReaderHotkeys = ({
     useHotkeys(
         hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_DECREASE],
         () =>
-            updateSetting('autoScroll', {
+            ReaderService.updateSetting('autoScroll', {
                 ...autoScroll,
                 value: Math.min(AUTO_SCROLL_SPEED.max, autoScroll.value + AUTO_SCROLL_SPEED.step),
             }),
-        [updateSetting, autoScroll.value],
+        [autoScroll.value],
     );
     useHotkeys(
         hotkeys[ReaderHotkey.AUTO_SCROLL_SPEED_INCREASE],
         () =>
-            updateSetting('autoScroll', {
+            ReaderService.updateSetting('autoScroll', {
                 ...autoScroll,
                 value: Math.max(AUTO_SCROLL_SPEED.min, autoScroll.value - AUTO_SCROLL_SPEED.step),
             }),
-        [updateSetting, autoScroll.value],
+        [autoScroll.value],
     );
     useHotkeys(hotkeys[ReaderHotkey.EXIT_READER], exitReader, [exitReader]);
 

src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx

@@ -24,13 +24,8 @@ import { makeToast } from '@/base/utils/Toast.ts';
 import { MobileHeaderProps } from '@/features/reader/overlay/ReaderOverlay.types.ts';
 import { LoadingPlaceholder } from '@/base/components/feedback/LoadingPlaceholder.tsx';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
-import {
+import { ReaderStateChapters, TReaderScrollbarContext } from '@/features/reader/Reader.types.ts';
-    ReaderStateChapters,
-    TReaderScrollbarContext,
-    TReaderStateMangaContext,
-} from '@/features/reader/Reader.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
-import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx';
 import { useReaderStateChaptersContext } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import { useReaderScrollbarContext } from '@/features/reader/contexts/ReaderScrollbarContext.tsx';
 import { ReaderLibraryButton } from '@/features/reader/overlay/navigation/components/ReaderLibraryButton.tsx';
@@ -39,19 +34,19 @@ import { FALLBACK_CHAPTER } from '@/features/chapter/Chapter.constants.ts';
 import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
 import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
+import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
 
 const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' };
 
 const BaseReaderOverlayHeaderMobile = forwardRef<
     HTMLDivElement,
-    MobileHeaderProps &
+    MobileHeaderProps & Pick<ReaderStateChapters, 'currentChapter'> & Pick<TReaderScrollbarContext, 'scrollbarYSize'>
-        Pick<TReaderStateMangaContext, 'manga'> &
+>(({ isVisible, currentChapter, scrollbarYSize }, ref) => {
-        Pick<ReaderStateChapters, 'currentChapter'> &
-        Pick<TReaderScrollbarContext, 'scrollbarYSize'>
->(({ isVisible, manga, currentChapter, scrollbarYSize }, ref) => {
     const { t } = useTranslation();
     const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' });
 
+    const manga = useReaderStoreShallow((state) => state.manga);
+
     const { id: mangaId, title } = manga ?? DEFAULT_MANGA;
     const { id: chapterId, name, realUrl, isBookmarked } = currentChapter ?? FALLBACK_CHAPTER;
 
@@ -136,6 +131,6 @@ const BaseReaderOverlayHeaderMobile = forwardRef<
 
 export const ReaderOverlayHeaderMobile = withPropsFrom(
     memo(BaseReaderOverlayHeaderMobile),
-    [useReaderStateMangaContext, useReaderStateChaptersContext, useReaderScrollbarContext],
+    [useReaderStateChaptersContext, useReaderScrollbarContext],
-    ['manga', 'currentChapter', 'scrollbarYSize'],
+    ['currentChapter', 'scrollbarYSize'],
 );

src/features/reader/overlay/navigation/components/ReaderLibraryButton.tsx

@@ -14,9 +14,7 @@ import { memo } from 'react';
 import { CustomTooltip } from '@/base/components/CustomTooltip.tsx';
 import { useManageMangaLibraryState } from '@/features/manga/hooks/useManageMangaLibraryState.tsx';
 import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
-import { TReaderStateMangaContext } from '@/features/reader/Reader.types.ts';
+import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
-import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
-import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx';
 
 const ACTION_FALLBACK_MANGA = {
     ...FALLBACK_MANGA,
@@ -24,7 +22,9 @@ const ACTION_FALLBACK_MANGA = {
     inLibrary: false,
 };
 
-const BaseReaderLibraryButton = ({ manga }: Pick<TReaderStateMangaContext, 'manga'>) => {
+export const ReaderLibraryButton = memo(() => {
+    const manga = useReaderStoreShallow((state) => state.manga);
+
     const { inLibrary } = manga ?? ACTION_FALLBACK_MANGA;
 
     const { t } = useTranslation();
@@ -46,10 +46,4 @@ const BaseReaderLibraryButton = ({ manga }: Pick<TReaderStateMangaContext, 'mang
             {CategorySelectComponent}
         </>
     );
-};
+});
-
-export const ReaderLibraryButton = withPropsFrom(
-    memo(BaseReaderLibraryButton),
-    [useReaderStateMangaContext],
-    ['manga'],
-);

src/features/reader/overlay/navigation/desktop/ReaderNavBarDesktop.tsx

@@ -24,16 +24,15 @@ import { ReaderNavBarDesktopQuickSettings } from '@/features/reader/overlay/navi
 import { ReaderNavBarDesktopActions } from '@/features/reader/overlay/navigation/desktop/components/ReaderNavBarDesktopActions.tsx';
 import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
-import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx';
 import { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { useReaderStateChaptersContext } from '@/features/reader/contexts/state/ReaderStateChaptersContext.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, ReaderStateChapters, TReaderStateMangaContext } from '@/features/reader/Reader.types.ts';
+import { IReaderSettings, ReaderStateChapters } from '@/features/reader/Reader.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
-import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
 import { ReaderExitButton } from '@/features/reader/overlay/navigation/components/ReaderExitButton.tsx';
+import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
 
 const useGetPreviousNavBarStaticValue = (isVisible: boolean, isStaticNav: boolean) => {
     const wasNavBarStaticRef = useRef(isStaticNav);
@@ -57,7 +56,6 @@ const BaseReaderNavBarDesktop = ({
     isVisible,
     openSettings,
     setReaderNavBarWidth,
-    manga,
     chapters,
     currentChapter,
     previousChapter,
@@ -65,12 +63,10 @@ const BaseReaderNavBarDesktop = ({
     isStaticNav,
 }: ReaderNavBarDesktopProps &
     Pick<NavbarContextType, 'setReaderNavBarWidth'> &
-    Pick<TReaderStateMangaContext, 'manga'> &
     Pick<ReaderStateChapters, 'currentChapter' | 'previousChapter' | 'nextChapter' | 'chapters'> &
     Pick<IReaderSettings, 'isStaticNav'>) => {
     const { t } = useTranslation();
-
+    const manga = useReaderStoreShallow((state) => state.manga);
-    const updateReaderSettings = ReaderService.useCreateUpdateSetting(manga ?? FALLBACK_MANGA);
 
     const [navBarElement, setNavBarElement] = useState<HTMLDivElement | null>();
     useResizeObserver(
@@ -109,7 +105,7 @@ const BaseReaderNavBarDesktop = ({
                             <IconButton
                                 onClick={() => {
                                     setReaderNavBarWidth(0);
-                                    updateReaderSettings('isStaticNav', !isStaticNav);
+                                    ReaderService.updateSetting('isStaticNav', !isStaticNav);
                                 }}
                                 color={isStaticNav ? 'primary' : 'inherit'}
                             >
@@ -153,10 +149,9 @@ export const ReaderNavBarDesktop = withPropsFrom(
     memo(BaseReaderNavBarDesktop),
     [
         useNavBarContext,
-        useReaderStateMangaContext,
         useReaderStateChaptersContext,
         userReaderStatePagesContext,
         ReaderService.useSettingsWithoutDefaultFlag,
     ],
-    ['setReaderNavBarWidth', 'manga', 'chapters', 'currentChapter', 'previousChapter', 'nextChapter', 'isStaticNav'],
+    ['setReaderNavBarWidth', 'chapters', 'currentChapter', 'previousChapter', 'nextChapter', 'isStaticNav'],
 );

src/features/reader/overlay/navigation/desktop/quick-settings/ReaderNavBarDesktopQuickSettings.tsx

@@ -14,16 +14,13 @@ import { ReaderNavBarDesktopPageScale } from '@/features/reader/overlay/navigati
 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, TReaderStateMangaContext } from '@/features/reader/Reader.types.ts';
+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 { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx';
-import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
 import { ReaderNavBarDesktopAutoScroll } from '@/features/reader/auto-scroll/settings/quick-setting/ReaderNavBarDesktopAutoScroll.tsx';
 
 const BaseReaderNavBarDesktopQuickSettings = ({
-    manga,
     readingMode,
     shouldOffsetDoubleSpreads,
     pageScaleMode,
@@ -31,8 +28,7 @@ const BaseReaderNavBarDesktopQuickSettings = ({
     readingDirection,
     autoScroll,
     openSettings,
-}: Pick<TReaderStateMangaContext, 'manga'> &
+}: Pick<ReaderNavBarDesktopProps, 'openSettings'> &
-    Pick<ReaderNavBarDesktopProps, 'openSettings'> &
     Pick<
         IReaderSettingsWithDefaultFlag,
         | 'readingMode'
@@ -44,38 +40,37 @@ const BaseReaderNavBarDesktopQuickSettings = ({
     >) => {
     const { t } = useTranslation();
 
-    const updateSetting = ReaderService.useCreateUpdateSetting(manga ?? FALLBACK_MANGA);
-    const deleteSetting = ReaderService.useCreateDeleteSetting(manga ?? FALLBACK_MANGA);
-
     return (
         <Stack sx={{ gap: 1 }}>
             <ReaderNavBarDesktopReadingMode
                 readingMode={readingMode}
-                setReadingMode={(value) => updateSetting('readingMode', value)}
+                setReadingMode={(value) => ReaderService.updateSetting('readingMode', value)}
                 isDefaultable
-                onDefault={() => deleteSetting('readingMode')}
+                onDefault={() => ReaderService.deleteSetting('readingMode')}
             />
             <ReaderNavBarDesktopOffsetDoubleSpread
                 readingMode={readingMode.value}
                 shouldOffsetDoubleSpreads={shouldOffsetDoubleSpreads.value}
-                setShouldOffsetDoubleSpreads={(value) => updateSetting('shouldOffsetDoubleSpreads', value)}
+                setShouldOffsetDoubleSpreads={(value) =>
+                    ReaderService.updateSetting('shouldOffsetDoubleSpreads', value)
+                }
             />
             <ReaderNavBarDesktopPageScale
                 pageScaleMode={pageScaleMode}
                 shouldStretchPage={shouldStretchPage}
-                updateSetting={updateSetting}
+                updateSetting={ReaderService.updateSetting}
                 isDefaultable
-                onDefault={() => deleteSetting('pageScaleMode')}
+                onDefault={() => ReaderService.deleteSetting('pageScaleMode')}
             />
             <ReaderNavBarDesktopReadingDirection
                 readingDirection={readingDirection}
-                setReadingDirection={(value) => updateSetting('readingDirection', value)}
+                setReadingDirection={(value) => ReaderService.updateSetting('readingDirection', value)}
                 isDefaultable
-                onDefault={() => deleteSetting('readingDirection')}
+                onDefault={() => ReaderService.deleteSetting('readingDirection')}
             />
             <ReaderNavBarDesktopAutoScroll
                 autoScroll={autoScroll}
-                setAutoScroll={(...args) => updateSetting('autoScroll', ...args)}
+                setAutoScroll={(...args) => ReaderService.updateSetting('autoScroll', ...args)}
             />
             <Button
                 onClick={() => openSettings()}
@@ -92,9 +87,8 @@ const BaseReaderNavBarDesktopQuickSettings = ({
 
 export const ReaderNavBarDesktopQuickSettings = withPropsFrom(
     BaseReaderNavBarDesktopQuickSettings,
-    [useReaderStateMangaContext, ReaderService.useSettings],
+    [ReaderService.useSettings],
     [
-        'manga',
         'readingMode',
         'shouldOffsetDoubleSpreads',
         'pageScaleMode',

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

@@ -12,50 +12,37 @@ import { useTranslation } from 'react-i18next';
 import { ReaderSettingReadingMode } from '@/features/reader/settings/layout/components/ReaderSettingReadingMode.tsx';
 import { ReaderSettingReadingDirection } from '@/features/reader/settings/layout/components/ReaderSettingReadingDirection.tsx';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
-import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx';
 import { DefaultSettingFootnote } from '@/features/reader/settings/components/DefaultSettingFootnote.tsx';
-import {
+import { IReaderSettingsWithDefaultFlag, TReaderAutoScrollContext } from '@/features/reader/Reader.types.ts';
-    IReaderSettingsWithDefaultFlag,
-    TReaderAutoScrollContext,
-    TReaderStateMangaContext,
-} from '@/features/reader/Reader.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
-import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
 import { ReaderSettingAutoScroll } from '@/features/reader/auto-scroll/settings/ReaderSettingAutoScroll.tsx';
 import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
 import { useReaderAutoScrollContext } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx';
 
 const BaseReaderBottomBarMobileQuickSettings = ({
-    manga,
     readingMode,
     readingDirection,
     autoScroll,
     isActive,
     toggleActive,
-}: Pick<TReaderStateMangaContext, 'manga'> &
+}: Pick<IReaderSettingsWithDefaultFlag, 'readingMode' | 'readingDirection' | 'autoScroll'> &
-    Pick<IReaderSettingsWithDefaultFlag, 'readingMode' | 'readingDirection' | 'autoScroll'> &
     Pick<TReaderAutoScrollContext, 'isActive' | 'toggleActive'>) => {
     const { t } = useTranslation();
-    const deleteSetting = ReaderService.useCreateDeleteSetting(manga ?? FALLBACK_MANGA);
-
-    if (!manga) {
-        return null;
-    }
 
     return (
         <Stack sx={{ gap: 2 }}>
             <DefaultSettingFootnote />
             <ReaderSettingReadingMode
                 readingMode={readingMode}
-                setReadingMode={(value) => ReaderService.updateSetting(manga, 'readingMode', value)}
+                setReadingMode={(value) => ReaderService.updateSetting('readingMode', value)}
                 isDefaultable
-                onDefault={() => deleteSetting('readingMode')}
+                onDefault={() => ReaderService.deleteSetting('readingMode')}
             />
             <ReaderSettingReadingDirection
                 readingDirection={readingDirection}
-                setReadingDirection={(value) => ReaderService.updateSetting(manga, 'readingDirection', value)}
+                setReadingDirection={(value) => ReaderService.updateSetting('readingDirection', value)}
                 isDefaultable
-                onDefault={() => deleteSetting('readingDirection')}
+                onDefault={() => ReaderService.deleteSetting('readingDirection')}
             />
             <CheckboxInput
                 label={t('reader.settings.auto_scroll.title')}
@@ -64,7 +51,7 @@ const BaseReaderBottomBarMobileQuickSettings = ({
             />
             <ReaderSettingAutoScroll
                 autoScroll={autoScroll}
-                setAutoScroll={(...args) => ReaderService.updateSetting(manga, 'autoScroll', ...args)}
+                setAutoScroll={(...args) => ReaderService.updateSetting('autoScroll', ...args)}
             />
         </Stack>
     );
@@ -72,6 +59,6 @@ const BaseReaderBottomBarMobileQuickSettings = ({
 
 export const ReaderBottomBarMobileQuickSettings = withPropsFrom(
     memo(BaseReaderBottomBarMobileQuickSettings),
-    [useReaderStateMangaContext, ReaderService.useSettings, useReaderAutoScrollContext],
+    [ReaderService.useSettings, useReaderAutoScrollContext],
-    ['manga', 'readingMode', 'readingDirection', 'autoScroll', 'isActive', 'toggleActive'],
+    ['readingMode', 'readingDirection', 'autoScroll', 'isActive', 'toggleActive'],
 );

src/features/reader/screens/Reader.tsx

@@ -25,7 +25,6 @@ import { TapZoneLayout } from '@/features/reader/tap-zones/TapZoneLayout.tsx';
 import { useReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlayContext.tsx';
 import { ReaderRGBAFilter } from '@/features/reader/filters/ReaderRGBAFilter.tsx';
 import { useReaderStateSettingsContext } from '@/features/reader/contexts/state/ReaderStateSettingsContext.tsx';
-import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.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';
@@ -36,7 +35,6 @@ import {
     ReaderStateChapters,
     ReaderStatePages,
     TReaderAutoScrollContext,
-    TReaderStateMangaContext,
     TReaderStateSettingsContext,
 } from '@/features/reader/Reader.types.ts';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
@@ -54,14 +52,13 @@ import { useReaderSetChaptersState } from '@/features/reader/hooks/useReaderSetC
 import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
 import { useChapterListOptions } from '@/features/chapter/utils/ChapterList.util.tsx';
 import { FALLBACK_MANGA } from '@/features/manga/Manga.constants.ts';
+import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
 
 const BaseReader = ({
     setOverride,
     readerNavBarWidth,
     isVisible: isOverlayVisible,
     setIsVisible: setIsOverlayVisible,
-    manga,
-    setManga,
     shouldSkipDupChapters,
     shouldSkipFilteredChapters,
     backgroundColor,
@@ -87,7 +84,6 @@ const BaseReader = ({
     setShowPreview,
 }: Pick<NavbarContextType, 'setOverride' | 'readerNavBarWidth'> &
     Pick<TReaderOverlayContext, 'isVisible' | 'setIsVisible'> &
-    Pick<TReaderStateMangaContext, 'manga' | 'setManga'> &
     Pick<TReaderStateSettingsContext, 'setSettings'> &
     Pick<
         IReaderSettings,
@@ -120,6 +116,7 @@ const BaseReader = ({
         cancelAutoScroll: TReaderAutoScrollContext['cancel'];
     }) => {
     const { t } = useTranslation();
+    const manga = useReaderStoreShallow((state) => state.manga);
 
     const scrollElementRef = useRef<HTMLDivElement | null>(null);
 
@@ -157,11 +154,10 @@ const BaseReader = ({
     const error = mangaResponse.error ?? chaptersResponse.error ?? defaultSettingsResponse.error;
 
     useEffect(() => {
-        setManga(mangaResponse.data?.manga);
+        useReaderStore.getState().setManga(mangaResponse.data?.manga);
     }, [mangaResponse.data?.manga]);
 
     useReaderResetStates(
-        setManga,
         setReaderStateChapters,
         setCurrentPageIndex,
         setPageToScrollToIndex,
@@ -306,7 +302,6 @@ export const Reader = withPropsFrom(
     [
         useNavBarContext,
         useReaderOverlayContext,
-        useReaderStateMangaContext,
         useReaderStateChaptersContext,
         useReaderStateSettingsContext,
         () => {
@@ -338,8 +333,6 @@ export const Reader = withPropsFrom(
         'readerNavBarWidth',
         'isVisible',
         'setIsVisible',
-        'manga',
-        'setManga',
         'shouldSkipDupChapters',
         'shouldSkipFilteredChapters',
         'backgroundColor',

src/features/reader/services/ReaderService.ts

@@ -22,12 +22,10 @@ import {
     ReadingDirection,
     ReadingMode,
 } from '@/features/reader/Reader.types.ts';
-import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx';
 import {
     convertFromReaderSettingsWithDefaultFlag,
     updateReaderSettings,
 } from '@/features/reader/settings/ReaderSettingsMetadata.ts';
-import { MangaIdInfo } from '@/features/manga/Manga.types.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';
@@ -54,6 +52,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';
 
 const DIRECTION_TO_INVERTED: Record<Direction, Direction> = {
     ltr: 'rtl',
@@ -156,7 +155,6 @@ export class ReaderService {
     }
 
     static useUpdateChapter(): (patch: UpdateChapterPatchInput) => void {
-        const { manga } = useReaderStateMangaContext();
         const { currentChapter, mangaChapters, chapters } = useReaderStateChaptersContext();
         const { shouldSkipDupChapters } = ReaderService.useSettings();
         const {
@@ -175,6 +173,8 @@ export class ReaderService {
 
         return useCallback(
             (patch) => {
+                const { manga } = getReaderStore();
+
                 if (!manga || !currentChapter || !mangaChapters) {
                     return;
                 }
@@ -235,7 +235,6 @@ export class ReaderService {
                 ReaderService.getOrCreateChapterUpdateQueue(currentChapter.id).enqueue(`${currentChapter.id}`, update);
             },
             [
-                manga?.id,
                 currentChapter?.id,
                 mangaChapters,
                 previousChapters,
@@ -268,13 +267,14 @@ export class ReaderService {
      * Writes the change immediately to the cache and sends a mutation in case "commit" is true.
      */
     static updateSetting<Setting extends keyof IReaderSettings>(
-        manga: MangaIdInfo,
         setting: Setting,
         value: IReaderSettings[Setting],
         commit: boolean = true,
         isGlobal: boolean = false,
         profile?: ReadingMode,
     ): void {
+        const { manga } = getReaderStore();
+
         if (!manga || manga.id === FALLBACK_MANGA.id) {
             return;
         }
@@ -334,11 +334,12 @@ export class ReaderService {
     }
 
     static deleteSetting<Setting extends keyof IReaderSettings>(
-        manga: MangaIdInfo,
         setting: Setting,
         isGlobal: boolean = false,
         profile?: string,
     ): void {
+        const { manga } = getReaderStore();
+
         if (!manga || manga.id === FALLBACK_MANGA.id) {
             return;
         }
@@ -362,31 +363,6 @@ export class ReaderService {
         );
     }
 
-    static useCreateUpdateSetting<Setting extends keyof IReaderSettings>(
-        manga: MangaIdInfo,
-        profile?: ReadingMode,
-    ): (
-        ...args: OmitFirst<Parameters<typeof ReaderService.updateSetting<Setting>>>
-    ) => ReturnType<typeof ReaderService.updateSetting<Setting>> {
-        return useCallback(
-            (setting, value, commit, isGlobal) =>
-                ReaderService.updateSetting<Setting>(manga, setting, value, commit, isGlobal, profile),
-            [manga, profile],
-        );
-    }
-
-    static useCreateDeleteSetting<Setting extends keyof IReaderSettings>(
-        manga: MangaIdInfo,
-        profile?: ReadingMode,
-    ): (
-        ...args: OmitFirst<Parameters<typeof ReaderService.deleteSetting<Setting>>>
-    ) => ReturnType<typeof ReaderService.deleteSetting<Setting>> {
-        return useCallback(
-            (setting, isGlobal) => ReaderService.deleteSetting<Setting>(manga, setting, isGlobal, profile?.toString()),
-            [manga, profile],
-        );
-    }
-
     static useOverlayMode(): { mode: ReaderOverlayMode; isDesktop: boolean; isMobile: boolean } {
         const isTouchDevice = MediaQuery.useIsTouchDevice();
         const { overlayMode } = ReaderService.useSettings();
@@ -406,18 +382,19 @@ export class ReaderService {
     }
 
     static useExit(): () => void {
-        const { manga } = useReaderStateMangaContext();
         const { exitMode } = ReaderService.useSettings();
         const handleBack = useBackButton();
         const navigate = useNavigate();
 
         const openMangaPage = useCallback(() => {
+            const { manga } = getReaderStore();
+
             if (!manga) {
                 return () => {};
             }
 
             return navigate(AppRoutes.manga.path(manga.id));
-        }, [manga]);
+        }, []);
 
         switch (exitMode) {
             case ReaderExitMode.PREVIOUS:

src/features/reader/settings/behaviour/ReaderBehaviourSettings.tsx

@@ -31,7 +31,7 @@ export const ReaderBehaviourSettings = ({
 }: {
     settings: IReaderSettingsWithDefaultFlag;
     updateSetting: (
-        ...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>
+        ...args: Parameters<typeof ReaderService.updateSetting>
     ) => ReturnType<typeof ReaderService.updateSetting>;
 } & ReaderSettingsTypeProps) => {
     const { t } = useTranslation();

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

@@ -41,7 +41,7 @@ const BaseReaderSettingsTabs = ({
         activeTab: number;
         setActiveTab: (tab: number) => void;
         settings: IReaderSettingsWithDefaultFlag;
-        updateSetting: (...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>) => void;
+        updateSetting: (...args: Parameters<typeof ReaderService.updateSetting>) => void;
         areDefaultSettings?: boolean;
         deleteSetting: (setting: keyof IReaderSettings) => void;
         setTransparent?: (transparent: boolean) => void;

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

@@ -26,7 +26,7 @@ export const ReaderSettingWidth = ({
     setTransparent,
 }: Pick<IReaderSettings, 'readerWidth' | 'pageScaleMode'> &
     Pick<MultiValueButtonDefaultableProps<IReaderSettings['readerWidth']['value']>, 'isDefaultable' | 'onDefault'> & {
-        updateSetting: (...args: OmitFirst<Parameters<typeof ReaderService.updateSetting>>) => void;
+        updateSetting: (...args: Parameters<typeof ReaderService.updateSetting>) => void;
         setTransparent?: (transparent: boolean) => void;
     }) => {
     const { t } = useTranslation();

src/features/reader/settings/screens/GlobalReaderSettings.tsx

@@ -16,7 +16,6 @@ import { IReaderSettings, ReadingMode } from '@/features/reader/Reader.types.ts'
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { ReaderSettingsTabs } from '@/features/reader/settings/components/ReaderSettingsTabs.tsx';
 import { getErrorMessage } from '@/lib/HelperFunctions.ts';
-import { GLOBAL_READER_SETTINGS_MANGA } from '@/features/manga/Manga.constants.ts';
 import { useAppTitle } from '@/features/navigation-bar/hooks/useAppTitle.ts';
 
 export const GlobalReaderSettings = () => {
@@ -37,7 +36,7 @@ export const GlobalReaderSettings = () => {
         commit?: boolean,
         profile?: ReadingMode,
     ) => {
-        ReaderService.updateSetting(GLOBAL_READER_SETTINGS_MANGA, key, value, commit, true, profile);
+        ReaderService.updateSetting(key, value, commit, true, profile);
     };
 
     if (loading) {
@@ -61,7 +60,7 @@ export const GlobalReaderSettings = () => {
             areDefaultSettings
             settings={settings}
             updateSetting={(setting, value, commit, _, profile) => updateSetting(setting, value, commit, profile)}
-            deleteSetting={(setting) => ReaderService.deleteSetting(GLOBAL_READER_SETTINGS_MANGA, setting, true)}
+            deleteSetting={(setting) => ReaderService.deleteSetting(setting, true)}
         />
     );
 };

src/features/reader/settings/screens/ReaderSettings.tsx

@@ -10,7 +10,6 @@ import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 
 import { useState } from 'react';
-import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.tsx';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
 import { ReaderSettingsTabs } from '@/features/reader/settings/components/ReaderSettingsTabs.tsx';
 import { ReaderSettingTab } from '@/features/reader/settings/ReaderSettings.constants.tsx';
@@ -18,7 +17,6 @@ import { useDisableAllHotkeysWhileMounted } from '@/features/hotkeys/Hotkeys.uti
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 
 export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () => void }) => {
-    const { manga } = useReaderStateMangaContext();
     const settings = ReaderService.useSettings();
 
     useDisableAllHotkeysWhileMounted(isOpen);
@@ -26,10 +24,6 @@ export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () =
     const [activeTab, setActiveTab] = useState(0);
     const [isTransparent, setIsTransparent] = useState(false);
 
-    if (!manga) {
-        return null;
-    }
-
     if (!isOpen) {
         return null;
     }
@@ -52,8 +46,8 @@ export const ReaderSettings = ({ isOpen, close }: { isOpen: boolean; close: () =
                     activeTab={activeTab}
                     setActiveTab={setActiveTab}
                     settings={settings}
-                    updateSetting={(...args) => ReaderService.updateSetting(manga, ...args)}
+                    updateSetting={(...args) => ReaderService.updateSetting(...args)}
-                    deleteSetting={(...args) => ReaderService.deleteSetting(manga, ...args)}
+                    deleteSetting={(...args) => ReaderService.deleteSetting(...args)}
                     setTransparent={setIsTransparent}
                 />
             </DialogContent>

src/features/reader/tap-zones/ReaderTapZoneService.ts

@@ -119,6 +119,7 @@ export class ReaderTapZoneService {
 
             context.beginPath();
 
+            /* eslint-disable no-param-reassign */
             context.rect(x, y, width, height);
             context.fillStyle = color;
             context.strokeStyle = color;
@@ -139,6 +140,7 @@ export class ReaderTapZoneService {
             context.lineWidth = 1;
             context.fillStyle = 'white';
             context.fillText(text, rectCenterX, rectCenterY);
+            /* eslint-enable no-param-reassign */
         });
     }
 

src/features/reader/viewer/components/ReaderTransitionPage.tsx

@@ -21,7 +21,6 @@ import {
     ReaderTransitionPageMode,
     ReadingMode,
     TReaderScrollbarContext,
-    TReaderStateMangaContext,
 } from '@/features/reader/Reader.types.ts';
 import { isTransitionPageVisible } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
 import { useBackButton } from '@/base/hooks/useBackButton.ts';
@@ -34,13 +33,13 @@ import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
-import { useReaderStateMangaContext } from '@/features/reader/contexts/state/ReaderStateMangaContext.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 { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
 import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
+import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';
 
 const ChapterInfo = ({
     title,
@@ -85,7 +84,6 @@ const BaseReaderTransitionPage = ({
     readingMode,
     backgroundColor,
     shouldShowTransitionPage,
-    manga,
     currentChapterName,
     currentChapterScanlator,
     previousChapterName,
@@ -97,7 +95,6 @@ const BaseReaderTransitionPage = ({
     readerNavBarWidth,
     handleBack,
 }: Pick<IReaderSettings, 'readingMode' | 'backgroundColor' | 'shouldShowTransitionPage'> &
-    Pick<TReaderStateMangaContext, 'manga'> &
     Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> &
     Pick<ReaderStatePages, 'transitionPageMode'> &
     Pick<NavbarContextType, 'readerNavBarWidth'> & {
@@ -114,6 +111,7 @@ const BaseReaderTransitionPage = ({
         handleBack: () => void;
     }) => {
     const { t } = useTranslation();
+    const manga = useReaderStoreShallow((state) => state.manga);
 
     const isPreviousType = type === ReaderTransitionPageMode.PREVIOUS;
     const isNextType = type === ReaderTransitionPageMode.NEXT;
@@ -236,7 +234,6 @@ const BaseReaderTransitionPage = ({
 export const ReaderTransitionPage = withPropsFrom(
     memo(BaseReaderTransitionPage) as typeof BaseReaderTransitionPage,
     [
-        useReaderStateMangaContext,
         ({ chapterId }: Pick<ComponentProps<typeof BaseReaderTransitionPage>, 'chapterId'>) => {
             const { chapters } = useReaderStateChaptersContext();
 
@@ -286,7 +283,6 @@ export const ReaderTransitionPage = withPropsFrom(
         },
     ],
     [
-        'manga',
         'currentChapterName',
         'currentChapterScanlator',
         'previousChapterName',