Move reader "scrollbar state" to "reader store"

2025-08-31 13:41:09 +02:00
parent 433dc17c35
commit 4cc5821ead
17 changed files with 60 additions and 146 deletions
--- a/src/features/reader/Reader.types.ts
+++ b/src/features/reader/Reader.types.ts
@@ -334,7 +334,6 @@ export interface ReaderPagerProps
            | 'shouldStretchPage'
            | 'readerWidth'
        >,
-        Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'>,
        Pick<NavbarContextType, 'readerNavBarWidth'> {
    onLoad?: (pagesIndex: number, url: string, isPrimary?: boolean) => void;
    onError?: (pageIndex: number, url: string) => void;
@@ -370,13 +369,6 @@ export interface ReaderOpenChapterLocationState {
    updateInitialChapter?: boolean;
 }

-export type TReaderScrollbarContext = {
-    scrollbarXSize: number;
-    setScrollbarXSize: (size: number) => void;
-    scrollbarYSize: number;
-    setScrollbarYSize: (size: number) => void;
-};
-
 export type TReaderStateSettingsContext = {
    settings: IReaderSettingsWithDefaultFlag;
    setSettings: (settings: IReaderSettingsWithDefaultFlag) => void;
--- a/src/features/reader/ReaderStore.ts
+++ b/src/features/reader/ReaderStore.ts
@@ -8,12 +8,19 @@

 import { create } from 'zustand';
 import { immer } from 'zustand/middleware/immer';
+import { useShallow } from 'zustand/react/shallow';
 import { TMangaReader } from '@/features/manga/Manga.types.ts';

 interface ReaderStore {
    reset: () => void;
    manga: TMangaReader | undefined;
    setManga: (manga: TMangaReader | undefined) => void;
+    scrollbar: {
+        scrollbarXSize: number;
+        setScrollbarXSize: (size: number) => void;
+        scrollbarYSize: number;
+        setScrollbarYSize: (size: number) => void;
+    };
 }

 const DEFAULT_STATE = {
@@ -31,5 +38,20 @@ export const useReaderStore = create<ReaderStore>()(
            set((draft) => {
                draft.manga = manga;
            }),
+        scrollbar: {
+            scrollbarXSize: 0,
+            setScrollbarXSize: (size) =>
+                set((draft) => {
+                    draft.scrollbar.scrollbarXSize = size;
+                }),
+            scrollbarYSize: 0,
+            setScrollbarYSize: (size) =>
+                set((draft) => {
+                    draft.scrollbar.scrollbarYSize = size;
+                }),
+        },
    })),
 );
+export const useReaderStoreShallow = <T>(selector: (state: ReaderStore) => T): T =>
+    useReaderStore(useShallow(selector));
+export const getReaderStore = () => useReaderStore.getState();
--- a/src/features/reader/contexts/ReaderContextProvider.tsx
+++ b/src/features/reader/contexts/ReaderContextProvider.tsx
@@ -8,7 +8,6 @@

 import { ReactNode } from 'react';
 import { ReaderStateContextProvider } from '@/features/reader/contexts/state/ReaderStateContextProvider.tsx';
-import { ReaderScrollbarContextProvider } from '@/features/reader/contexts/ReaderScrollbarContext.tsx';
 import { ReaderAutoScrollContextProvider } from '@/features/reader/auto-scroll/ReaderAutoScrollContext.tsx';
 import { ReaderOverlayContextProvider } from '@/features/reader/overlay/ReaderOverlayContext.tsx';
 import { ReaderProgressBarContextProvider } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx';
@@ -19,9 +18,7 @@ export const ReaderContextProvider = ({ children }: { children?: ReactNode }) =>
        <ReaderTapZoneContextProvider>
            <ReaderOverlayContextProvider>
                <ReaderProgressBarContextProvider>
-                    <ReaderScrollbarContextProvider>
-                        <ReaderAutoScrollContextProvider>{children}</ReaderAutoScrollContextProvider>
-                    </ReaderScrollbarContextProvider>
+                    <ReaderAutoScrollContextProvider>{children}</ReaderAutoScrollContextProvider>
                </ReaderProgressBarContextProvider>
            </ReaderOverlayContextProvider>
        </ReaderTapZoneContextProvider>
--- a/src/features/reader/contexts/ReaderScrollbarContext.tsx
+++ b/src/features/reader/contexts/ReaderScrollbarContext.tsx
@@ -1,31 +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 { TReaderScrollbarContext } from '@/features/reader/Reader.types.ts';
-
-export const ReaderScrollbarContext = createContext<TReaderScrollbarContext>({
-    scrollbarXSize: 0,
-    setScrollbarXSize: () => undefined,
-    scrollbarYSize: 0,
-    setScrollbarYSize: () => undefined,
-});
-
-export const useReaderScrollbarContext = () => useContext(ReaderScrollbarContext);
-
-export const ReaderScrollbarContextProvider = ({ children }: { children: ReactNode }) => {
-    const [scrollbarXSize, setScrollbarXSize] = useState(0);
-    const [scrollbarYSize, setScrollbarYSize] = useState(0);
-
-    const value = useMemo(
-        () => ({ scrollbarXSize, setScrollbarXSize, scrollbarYSize, setScrollbarYSize }),
-        [scrollbarXSize, scrollbarYSize],
-    );
-
-    return <ReaderScrollbarContext.Provider value={value}>{children}</ReaderScrollbarContext.Provider>;
-};
--- a/src/features/reader/infinite-scroll/ReaderInfiniteScrollUpdateChapter.tsx
+++ b/src/features/reader/infinite-scroll/ReaderInfiniteScrollUpdateChapter.tsx
@@ -9,7 +9,7 @@
 import { memo } from 'react';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useReaderInfiniteScrollUpdateChapter } from '@/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts';
-import { IReaderSettings, TReaderScrollbarContext } from '@/features/reader/Reader.types.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';
@@ -26,12 +26,9 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
    isNextChapterVisible,
    imageWrapper,
    openChapter,
-    scrollbarXSize,
-    scrollbarYSize,
    scrollElement,
    shouldShowTransitionPage,
 }: Pick<IReaderSettings, 'shouldShowTransitionPage'> &
-    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> &
    Pick<IReaderSettings, 'readingMode' | 'readingDirection' | 'shouldUseInfiniteScroll'> & {
        chapterId: ChapterIdInfo['id'];
        previousChapterId?: ChapterIdInfo['id'];
@@ -54,8 +51,6 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
        shouldUseInfiniteScroll,
        openChapter,
        imageWrapper,
-        scrollbarXSize,
-        scrollbarYSize,
        scrollElement,
        shouldShowTransitionPage,
    );
@@ -70,8 +65,6 @@ const BaseReaderInfiniteScrollUpdateChapter = ({
        shouldUseInfiniteScroll,
        openChapter,
        imageWrapper,
-        scrollbarXSize,
-        scrollbarYSize,
        scrollElement,
        shouldShowTransitionPage,
    );
--- a/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts
+++ b/src/features/reader/infinite-scroll/useReaderInfiniteScrollUpdateChapter.ts
@@ -16,6 +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';

 interface ElementIntersection {
    start: boolean;
@@ -246,8 +247,6 @@ export const useReaderInfiniteScrollUpdateChapter = (
    shouldUseInfiniteScroll: boolean,
    openChapter: ReturnType<typeof ReaderControls.useOpenChapter>,
    image: HTMLElement | null,
-    scrollbarXSize: number,
-    scrollbarYSize: number,
    scrollElement: HTMLElement | null,
    shouldShowTransitionPage: boolean,
 ) => {
@@ -321,8 +320,8 @@ export const useReaderInfiniteScrollUpdateChapter = (
                const elementIntersectionInfo = getElementIntersectionInfo(
                    readingDirection,
                    entry.target.getBoundingClientRect(),
-                    scrollbarXSize,
-                    scrollbarYSize,
+                    getReaderStore().scrollbar.scrollbarXSize,
+                    getReaderStore().scrollbar.scrollbarYSize,
                );
                const { start: isStartIntersecting, end: isEndIntersecting } = getElementIntersection(
                    elementIntersectionInfo,
@@ -362,8 +361,6 @@ export const useReaderInfiniteScrollUpdateChapter = (
                shouldUseInfiniteScroll,
                shouldShowTransitionPage,
                openChapter,
-                scrollbarXSize,
-                scrollbarYSize,
            ],
        ),
        useMemo(
--- a/src/features/reader/overlay/components/ReaderPageNumber.tsx
+++ b/src/features/reader/overlay/components/ReaderPageNumber.tsx
@@ -16,21 +16,19 @@ import {
    ProgressBarType,
    ReaderStatePages,
    ReadingDirection,
-    TReaderScrollbarContext,
 } from '@/features/reader/Reader.types.ts';
 import { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
 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';
-import { useReaderScrollbarContext } from '@/features/reader/contexts/ReaderScrollbarContext.tsx';
 import { reverseString } from '@/base/utils/Strings.ts';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
 import { TReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
+import { useReaderStore } from '@/features/reader/ReaderStore.ts';

 const BaseReaderPageNumber = ({
    isDesktop,
-    scrollbarXSize,
    readerNavBarWidth,
    isMaximized,
    currentPageIndex,
@@ -39,12 +37,13 @@ const BaseReaderPageNumber = ({
    progressBarType,
    shouldShowPageNumber,
    readingDirection,
-}: Pick<TReaderScrollbarContext, 'scrollbarXSize'> &
-    Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop'> &
+}: Pick<ReturnType<typeof ReaderService.useOverlayMode>, 'isDesktop'> &
    Pick<NavbarContextType, 'readerNavBarWidth'> &
    Pick<TReaderProgressBarContext, 'isMaximized'> &
    Pick<ReaderStatePages, 'currentPageIndex' | 'pages' | 'totalPages'> &
    Pick<IReaderSettings, 'progressBarType' | 'shouldShowPageNumber' | 'readingDirection'>) => {
+    const scrollbarXSize = useReaderStore((state) => state.scrollbar.scrollbarXSize);
+
    const pageName = useMemo(() => {
        const currentPageName = getPage(currentPageIndex, pages).name;
        const SEPARATOR = '/';
@@ -97,7 +96,6 @@ export const ReaderPageNumber = withPropsFrom(
    BaseReaderPageNumber,
    [
        ReaderService.useOverlayMode,
-        useReaderScrollbarContext,
        useNavBarContext,
        useReaderProgressBarContext,
        userReaderStatePagesContext,
@@ -105,7 +103,6 @@ export const ReaderPageNumber = withPropsFrom(
    ],
    [
        'isDesktop',
-        'scrollbarXSize',
        'readerNavBarWidth',
        'isMaximized',
        'currentPageIndex',
--- a/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx
+++ b/src/features/reader/overlay/mobile/ReaderOverlayHeaderMobile.tsx
@@ -24,28 +24,28 @@ 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 { ReaderStateChapters, TReaderScrollbarContext } from '@/features/reader/Reader.types.ts';
+import { ReaderStateChapters } from '@/features/reader/Reader.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.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';
 import { ReaderBookmarkButton } from '@/features/reader/overlay/navigation/components/ReaderBookmarkButton.tsx';
 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';
+import { useReaderStore, useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 const DEFAULT_MANGA = { ...FALLBACK_MANGA, title: '' };

 const BaseReaderOverlayHeaderMobile = forwardRef<
    HTMLDivElement,
-    MobileHeaderProps & Pick<ReaderStateChapters, 'currentChapter'> & Pick<TReaderScrollbarContext, 'scrollbarYSize'>
->(({ isVisible, currentChapter, scrollbarYSize }, ref) => {
+    MobileHeaderProps & Pick<ReaderStateChapters, 'currentChapter'>
+>(({ isVisible, currentChapter }, ref) => {
    const { t } = useTranslation();
    const popupState = usePopupState({ popupId: 'reader-overlay-more-menu', variant: 'popover' });

    const manga = useReaderStoreShallow((state) => state.manga);
+    const scrollbarYSize = useReaderStore((state) => state.scrollbar.scrollbarYSize);

    const { id: mangaId, title } = manga ?? DEFAULT_MANGA;
    const { id: chapterId, name, realUrl, isBookmarked } = currentChapter ?? FALLBACK_CHAPTER;
@@ -131,6 +131,6 @@ const BaseReaderOverlayHeaderMobile = forwardRef<

 export const ReaderOverlayHeaderMobile = withPropsFrom(
    memo(BaseReaderOverlayHeaderMobile),
-    [useReaderStateChaptersContext, useReaderScrollbarContext],
-    ['currentChapter', 'scrollbarYSize'],
+    [useReaderStateChaptersContext],
+    ['currentChapter'],
 );
--- a/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
+++ b/src/features/reader/overlay/navigation/mobile/ReaderBottomBarMobile.tsx
@@ -24,26 +24,23 @@ import { MobileReaderProgressBar } from '@/features/reader/overlay/progress-bar/
 import { ReaderChapterList } from '@/features/reader/overlay/navigation/components/ReaderChapterList.tsx';
 import { ReaderBottomBarMobileQuickSettings } from '@/features/reader/overlay/navigation/mobile/quick-settings/ReaderBottomBarMobileQuickSettings.tsx';
 import { useReaderStateChaptersContext } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
-import { useReaderScrollbarContext } from '@/features/reader/contexts/ReaderScrollbarContext.tsx';
-import { ReaderStateChapters, TReaderScrollbarContext } from '@/features/reader/Reader.types.ts';
+import { ReaderStateChapters } from '@/features/reader/Reader.types.ts';
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
+import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 const BaseReaderBottomBarMobile = ({
    openSettings,
    isVisible,
    currentChapter,
    chapters,
-    scrollbarXSize,
-    scrollbarYSize,
    topOffset = 0,
-}: ReaderBottomBarMobileProps &
-    Pick<ReaderStateChapters, 'currentChapter' | 'chapters'> &
-    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> & { topOffset?: number }) => {
+}: ReaderBottomBarMobileProps & Pick<ReaderStateChapters, 'currentChapter' | 'chapters'> & { topOffset?: number }) => {
    const { t } = useTranslation();

    const chapterListPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-chapter-list-dialog' });
    const quickSettingsPopupState = usePopupState({ variant: 'dialog', popupId: 'reader-quick-settings-dialog' });
+    const { scrollbarXSize, scrollbarYSize } = useReaderStoreShallow((state) => state.scrollbar);

    const [bottomBarRefHeight, setBottomBarRefHeight] = useState(0);
    const bottomBarRef = useRef<HTMLDivElement>(null);
@@ -135,6 +132,6 @@ const BaseReaderBottomBarMobile = ({

 export const ReaderBottomBarMobile = withPropsFrom(
    memo(BaseReaderBottomBarMobile),
-    [useReaderStateChaptersContext, useReaderScrollbarContext],
-    ['currentChapter', 'chapters', 'scrollbarXSize', 'scrollbarYSize'],
+    [useReaderStateChaptersContext],
+    ['currentChapter', 'chapters'],
 );
--- a/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx
+++ b/src/features/reader/overlay/progress-bar/desktop/StandardReaderProgressBar.tsx
@@ -11,7 +11,7 @@ import { memo, useCallback, useState } from 'react';
 import { ReaderProgressBar } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.tsx';
 import { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
 import { ReaderService } from '@/features/reader/services/ReaderService.ts';
-import { IReaderSettings, ProgressBarType, TReaderScrollbarContext } from '@/features/reader/Reader.types.ts';
+import { IReaderSettings, 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';
@@ -23,10 +23,10 @@ import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types
 import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
 import { useNavBarContext } from '@/features/navigation-bar/NavbarContext.tsx';
 import { useReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx';
-import { useReaderScrollbarContext } from '@/features/reader/contexts/ReaderScrollbarContext.tsx';
 import { ReaderProgressBarSlotDesktop } from '@/features/reader/overlay/progress-bar/desktop/components/ReaderProgressBarSlotDesktop.tsx';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx';
+import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 const BaseStandardReaderProgressBar = ({
    readerNavBarWidth,
@@ -38,8 +38,6 @@ const BaseStandardReaderProgressBar = ({
    progressBarPosition,
    progressBarPositionAutoVertical,
    readerDirection,
-    scrollbarXSize,
-    scrollbarYSize,
    totalPages,
 }: Pick<NavbarContextType, 'readerNavBarWidth'> &
    Pick<TReaderProgressBarContext, 'isMaximized' | 'setIsMaximized' | 'isDragging'> &
@@ -47,12 +45,13 @@ const BaseStandardReaderProgressBar = ({
        IReaderSettings,
        'progressBarType' | 'progressBarSize' | 'progressBarPosition' | 'progressBarPositionAutoVertical'
    > &
-    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> &
    Pick<ReaderProgressBarProps, 'totalPages'> & {
        readerDirection: ReturnType<typeof ReaderService.useGetThemeDirection>;
    }) => {
    const theme = useTheme();

+    const { scrollbarXSize, scrollbarYSize } = useReaderStoreShallow((state) => state.scrollbar);
+
    const [, setRefreshProgressBarPosition] = useState({});
    useResizeObserver(
        window.document.documentElement,
@@ -255,7 +254,6 @@ export const StandardReaderProgressBar = withPropsFrom(
        useReaderProgressBarContext,
        ReaderService.useSettingsWithoutDefaultFlag,
        () => ({ readerDirection: ReaderService.useGetThemeDirection() }),
-        useReaderScrollbarContext,
        userReaderStatePagesContext,
    ],
    [
@@ -268,8 +266,6 @@ export const StandardReaderProgressBar = withPropsFrom(
        'progressBarPosition',
        'progressBarPositionAutoVertical',
        'readerDirection',
-        'scrollbarXSize',
-        'scrollbarYSize',
        'totalPages',
    ],
 );
--- a/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
+++ b/src/features/reader/overlay/progress-bar/mobile/MobileReaderProgressBar.tsx
@@ -22,12 +22,7 @@ import {
    getProgressBarPositionInfo,
 } from '@/features/reader/overlay/progress-bar/ReaderProgressBar.utils.tsx';
 import { getOptionForDirection } from '@/features/theme/services/ThemeCreator.ts';
-import {
-    IReaderSettings,
-    ProgressBarPosition,
-    ReaderStateChapters,
-    TReaderScrollbarContext,
-} from '@/features/reader/Reader.types.ts';
+import { IReaderSettings, ProgressBarPosition, ReaderStateChapters } from '@/features/reader/Reader.types.ts';
 import { ReaderProgressBarDirectionWrapper } from '@/features/reader/overlay/progress-bar/components/ReaderProgressBarDirectionWrapper.tsx';
 import { useReaderProgressBarContext } from '@/features/reader/overlay/progress-bar/ReaderProgressBarContext.tsx';
 import { useReaderOverlayContext } from '@/features/reader/overlay/ReaderOverlayContext.tsx';
@@ -42,8 +37,8 @@ import { userReaderStatePagesContext } from '@/features/reader/contexts/state/Re
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { useResizeObserver } from '@/base/hooks/useResizeObserver.tsx';
 import { getProgressBarPosition } from '@/features/reader/settings/ReaderSettings.utils.tsx';
-import { useReaderScrollbarContext } from '@/features/reader/contexts/ReaderScrollbarContext.tsx';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
+import { useReaderStore } from '@/features/reader/ReaderStore.ts';

 const PROGRESS_BAR_POSITION_TO_SLIDE_DIRECTION: Record<ProgressBarPosition, SlideProps['direction']> = {
    [ProgressBarPosition.BOTTOM]: 'up',
@@ -66,18 +61,17 @@ const BaseMobileReaderProgressBar = ({
    progressBarPositionAutoVertical,
    topOffset = 0,
    bottomOffset = 0,
-    scrollbarXSize,
 }: Pick<ReaderStateChapters, 'previousChapter' | 'nextChapter'> &
    Pick<TReaderOverlayContext, 'isVisible'> &
    Pick<TReaderProgressBarContext, 'setIsMaximized' | 'isDragging'> &
    Pick<ReaderProgressBarProps, 'currentPageIndex' | 'pages'> &
-    Pick<IReaderSettings, 'progressBarPosition' | 'progressBarPositionAutoVertical'> &
-    Pick<TReaderScrollbarContext, 'scrollbarXSize'> & {
+    Pick<IReaderSettings, 'progressBarPosition' | 'progressBarPositionAutoVertical'> & {
        direction: ReturnType<typeof ReaderService.useGetThemeDirection>;
        topOffset?: number;
        bottomOffset?: number;
    }) => {
    const openChapter = ReaderControls.useOpenChapter();
+    const scrollbarXSize = useReaderStore((state) => state.scrollbar.scrollbarXSize);

    const [, setRefreshProgressBarPosition] = useState({});
    useResizeObserver(
@@ -372,7 +366,6 @@ export const MobileReaderProgressBar = withPropsFrom(
        userReaderStatePagesContext,
        () => ({ direction: ReaderService.useGetThemeDirection() }),
        ReaderService.useSettingsWithoutDefaultFlag,
-        useReaderScrollbarContext,
    ],
    [
        'previousChapter',
@@ -385,6 +378,5 @@ export const MobileReaderProgressBar = withPropsFrom(
        'direction',
        'progressBarPosition',
        'progressBarPositionAutoVertical',
-        'scrollbarXSize',
    ],
 );
--- a/src/features/reader/viewer/ReaderChapterViewer.tsx
+++ b/src/features/reader/viewer/ReaderChapterViewer.tsx
@@ -83,8 +83,6 @@ const BaseReaderChapterViewer = ({
    resumeMode,
    customFilter,
    shouldStretchPage,
-    scrollbarXSize,
-    scrollbarYSize,
    readerNavBarWidth,
    onSizeChange,
    minWidth,
@@ -419,8 +417,6 @@ const BaseReaderChapterViewer = ({
                    isPreviousChapterVisible={isPreviousChapterVisible}
                    isNextChapterVisible={isNextChapterVisible}
                    imageWrapper={pagerRef.current}
-                    scrollbarXSize={scrollbarXSize}
-                    scrollbarYSize={scrollbarYSize}
                    scrollElement={scrollElement}
                />
            )}
@@ -449,8 +445,6 @@ const BaseReaderChapterViewer = ({
                customFilter={customFilter}
                shouldStretchPage={shouldStretchPage}
                readerWidth={readerWidth}
-                scrollbarXSize={scrollbarXSize}
-                scrollbarYSize={scrollbarYSize}
                readerNavBarWidth={readerNavBarWidth}
                isPreloadMode={isPreloadMode}
                resumeMode={resumeMode}
--- a/src/features/reader/viewer/ReaderViewer.tsx
+++ b/src/features/reader/viewer/ReaderViewer.tsx
@@ -31,10 +31,8 @@ import {
    ReaderStatePages,
    ReadingDirection,
    ReadingMode,
-    TReaderScrollbarContext,
 } from '@/features/reader/Reader.types.ts';
 import { userReaderStatePagesContext } from '@/features/reader/contexts/state/ReaderStatePagesContext.tsx';
-import { useReaderScrollbarContext } from '@/features/reader/contexts/ReaderScrollbarContext.tsx';
 import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 import {
@@ -69,6 +67,7 @@ import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types
 import { useReaderPreserveScrollPosition } from '@/features/reader/viewer/hooks/useReaderPreserveScrollPosition.ts';

 import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
+import { getReaderStore } from '@/features/reader/ReaderStore.ts';

 const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
    [ReadingMode.SINGLE_PAGE]: PageInViewportType.X,
@@ -105,8 +104,6 @@ const BaseReaderViewer = forwardRef(
            shouldStretchPage,
            isStaticNav,
            readerNavBarWidth,
-            setScrollbarXSize,
-            setScrollbarYSize,
            isVisible: isOverlayVisible,
            setIsVisible: setIsOverlayVisible,
            updateCurrentPageIndex,
@@ -147,7 +144,6 @@ const BaseReaderViewer = forwardRef(
                | 'shouldStretchPage'
                | 'isStaticNav'
            > &
-            Pick<TReaderScrollbarContext, 'setScrollbarXSize' | 'setScrollbarYSize'> &
            Pick<NavbarContextType, 'readerNavBarWidth'> &
            Pick<TReaderOverlayContext, 'isVisible' | 'setIsVisible'> &
            Pick<
@@ -183,8 +179,9 @@ const BaseReaderViewer = forwardRef(
        const scrollbarXSize = MediaQuery.useGetScrollbarSize('width', scrollElementRef.current);
        const scrollbarYSize = MediaQuery.useGetScrollbarSize('height', scrollElementRef.current);
        useLayoutEffect(() => {
-            setScrollbarXSize(scrollbarXSize);
-            setScrollbarYSize(scrollbarYSize);
+            const { scrollbar } = getReaderStore();
+            scrollbar.setScrollbarXSize(scrollbarXSize);
+            scrollbar.setScrollbarYSize(scrollbarYSize);
        }, [scrollbarXSize, scrollbarYSize]);

        const handleClick = ReaderControls.useHandleClick(scrollElementRef.current);
@@ -432,8 +429,6 @@ const BaseReaderViewer = forwardRef(
                            imagePreLoadAmount={imagePreLoadAmount}
                            customFilter={customFilter}
                            shouldStretchPage={shouldStretchPage}
-                            scrollbarXSize={scrollbarXSize}
-                            scrollbarYSize={scrollbarYSize}
                            readerNavBarWidth={readerNavBarWidth}
                            onSizeChange={onChapterViewSizeChange}
                            minWidth={isChapterSizeSourceChapter ? 0 : minChapterViewWidth}
@@ -452,7 +447,6 @@ export const ReaderViewer = withPropsFrom(
    [
        userReaderStatePagesContext,
        ReaderService.useSettingsWithoutDefaultFlag,
-        useReaderScrollbarContext,
        useReaderOverlayContext,
        () => ({ updateCurrentPageIndex: ReaderControls.useUpdateCurrentPageIndex() }),
        useReaderTapZoneContext,
@@ -484,8 +478,6 @@ export const ReaderViewer = withPropsFrom(
        'isStaticNav',
        'readerNavBarWidth',
        'transitionPageMode',
-        'setScrollbarXSize',
-        'setScrollbarYSize',
        'isVisible',
        'setIsVisible',
        'updateCurrentPageIndex',
--- a/src/features/reader/viewer/components/ReaderPage.tsx
+++ b/src/features/reader/viewer/components/ReaderPage.tsx
@@ -8,12 +8,7 @@

 import { memo, useCallback } from 'react';
 import { SpinnerImage, SpinnerImageProps } from '@/base/components/SpinnerImage.tsx';
-import {
-    IReaderSettings,
-    ReaderCustomFilter,
-    ReaderPagerProps,
-    TReaderScrollbarContext,
-} from '@/features/reader/Reader.types.ts';
+import { IReaderSettings, ReaderCustomFilter, ReaderPagerProps } from '@/features/reader/Reader.types.ts';
 import {
    getImageMarginStyling,
    getImagePlaceholderStyling,
@@ -22,6 +17,7 @@ import {
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
 import { NavbarContextType } from '@/features/navigation-bar/NavigationBar.types.ts';
+import { useReaderStoreShallow } from '@/features/reader/ReaderStore.ts';

 const getCustomFilterString = (customFilter: ReaderCustomFilter): string =>
    Object.keys(customFilter)
@@ -66,8 +62,6 @@ const BaseReaderPage = ({
    pageScaleMode,
    shouldStretchPage,
    readerWidth,
-    scrollbarXSize,
-    scrollbarYSize,
    onLoad,
    onError,
    setRef,
@@ -76,7 +70,6 @@ const BaseReaderPage = ({
    ...props
 }: Omit<SpinnerImageProps, 'spinnerStyle' | 'imgStyle' | 'onLoad' | 'onError'> &
    Pick<IReaderSettings, 'readingMode' | 'customFilter' | 'pageScaleMode' | 'shouldStretchPage' | 'readerWidth'> &
-    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> &
    Pick<NavbarContextType, 'readerNavBarWidth'> & {
        pageIndex: number;
        pagesIndex: number;
@@ -93,6 +86,7 @@ const BaseReaderPage = ({
    const { src } = props;

    const isTabletWidth = MediaQuery.useIsTabletWidth();
+    const { scrollbarXSize, scrollbarYSize } = useReaderStoreShallow((state) => state.scrollbar);

    const handleLoad = useCallback(
        () => onLoad?.(pagesIndex, src, isPrimaryPage),
--- a/src/features/reader/viewer/components/ReaderTransitionPage.tsx
+++ b/src/features/reader/viewer/components/ReaderTransitionPage.tsx
@@ -13,14 +13,12 @@ import Button from '@mui/material/Button';
 import { Link } from 'react-router-dom';
 import { ComponentProps, memo, useMemo } from 'react';
 import { alpha, useTheme } from '@mui/material/styles';
-import { useReaderScrollbarContext } from '@/features/reader/contexts/ReaderScrollbarContext.tsx';
 import { useReaderStateChaptersContext } from '@/features/reader/contexts/state/ReaderStateChaptersContext.tsx';
 import {
    IReaderSettings,
    ReaderStatePages,
    ReaderTransitionPageMode,
    ReadingMode,
-    TReaderScrollbarContext,
 } from '@/features/reader/Reader.types.ts';
 import { isTransitionPageVisible } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
 import { useBackButton } from '@/base/hooks/useBackButton.ts';
@@ -90,12 +88,9 @@ const BaseReaderTransitionPage = ({
    previousChapterScanlator,
    nextChapterName,
    nextChapterScanlator,
-    scrollbarXSize,
-    scrollbarYSize,
    readerNavBarWidth,
    handleBack,
 }: Pick<IReaderSettings, 'readingMode' | 'backgroundColor' | 'shouldShowTransitionPage'> &
-    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> &
    Pick<ReaderStatePages, 'transitionPageMode'> &
    Pick<NavbarContextType, 'readerNavBarWidth'> & {
        // gets used in the "source props creators" of the "withPropsFrom" call
@@ -112,6 +107,7 @@ const BaseReaderTransitionPage = ({
    }) => {
    const { t } = useTranslation();
    const manga = useReaderStoreShallow((state) => state.manga);
+    const { scrollbarXSize, scrollbarYSize } = useReaderStoreShallow((state) => state.scrollbar);

    const isPreviousType = type === ReaderTransitionPageMode.PREVIOUS;
    const isNextType = type === ReaderTransitionPageMode.NEXT;
@@ -255,7 +251,6 @@ export const ReaderTransitionPage = withPropsFrom(
                nextChapterScanlator: nextChapter?.scanlator,
            };
        },
-        useReaderScrollbarContext,
        useNavBarContext,
        userReaderStatePagesContext,
        ReaderService.useSettingsWithoutDefaultFlag,
@@ -289,8 +284,6 @@ export const ReaderTransitionPage = withPropsFrom(
        'previousChapterScanlator',
        'nextChapterName',
        'nextChapterScanlator',
-        'scrollbarXSize',
-        'scrollbarYSize',
        'readerNavBarWidth',
        'backgroundColor',
        'transitionPageMode',
--- a/src/features/reader/viewer/pager/ReaderPager.utils.tsx
+++ b/src/features/reader/viewer/pager/ReaderPager.utils.tsx
@@ -17,7 +17,6 @@ import {
    ReaderTransitionPageMode,
    ReadingDirection,
    ReadingMode,
-    TReaderScrollbarContext,
 } from '@/features/reader/Reader.types.ts';
 import { applyStyles } from '@/base/utils/ApplyStyles.ts';
 import {
@@ -295,8 +294,6 @@ export const createReaderPage = (
    pageScaleMode: IReaderSettings['pageScaleMode'],
    shouldStretchPage: IReaderSettings['shouldStretchPage'],
    readerWidth: IReaderSettings['readerWidth'],
-    scrollbarXSize: TReaderScrollbarContext['scrollbarXSize'],
-    scrollbarYSize: TReaderScrollbarContext['scrollbarYSize'],
    readerNavBarWidth: NavbarContextType['readerNavBarWidth'],
    retryKeyPrefix?: string,
    position?: 'left' | 'right',
@@ -327,8 +324,6 @@ export const createReaderPage = (
        pageScaleMode={pageScaleMode}
        shouldStretchPage={shouldStretchPage}
        readerWidth={readerWidth}
-        scrollbarXSize={scrollbarXSize}
-        scrollbarYSize={scrollbarYSize}
        readerNavBarWidth={readerNavBarWidth}
    />
 );
--- a/src/features/reader/viewer/pager/components/BasePager.tsx
+++ b/src/features/reader/viewer/pager/components/BasePager.tsx
@@ -37,8 +37,6 @@ const BaseBasePager = forwardRef<
                pageScaleMode: ReaderPagerProps['pageScaleMode'],
                shouldStretchPage: ReaderPagerProps['shouldStretchPage'],
                readerWidth: ReaderPagerProps['readerWidth'],
-                scrollbarXSize: ReaderPagerProps['scrollbarXSize'],
-                scrollbarYSize: ReaderPagerProps['scrollbarYSize'],
                readerNavBarWidth: ReaderPagerProps['readerNavBarWidth'],
            ) => ReactNode;
            slots?: { boxProps?: BoxProps };
@@ -61,8 +59,6 @@ const BaseBasePager = forwardRef<
            pageScaleMode,
            shouldStretchPage,
            readerWidth,
-            scrollbarXSize,
-            scrollbarYSize,
            readerNavBarWidth,
            resumeMode,
            handleAsInitialRender,
@@ -147,8 +143,6 @@ const BaseBasePager = forwardRef<
                        pageScaleMode,
                        shouldStretchPage,
                        readerWidth,
-                        scrollbarXSize,
-                        scrollbarYSize,
                        readerNavBarWidth,
                    ),
                )}