Move reader "scrollbar state" to "reader store"

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;

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

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>
-                        <ReaderAutoScrollContextProvider>{children}</ReaderAutoScrollContextProvider>
-                    </ReaderScrollbarContextProvider>
                 </ReaderProgressBarContextProvider>
             </ReaderOverlayContextProvider>
         </ReaderTapZoneContextProvider>

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

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

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,
+                    getReaderStore().scrollbar.scrollbarXSize,
-                    scrollbarYSize,
+                    getReaderStore().scrollbar.scrollbarYSize,
                 );
                 const { start: isStartIntersecting, end: isEndIntersecting } = getElementIntersection(
                     elementIntersectionInfo,
@@ -362,8 +361,6 @@ export const useReaderInfiniteScrollUpdateChapter = (
                 shouldUseInfiniteScroll,
                 shouldShowTransitionPage,
                 openChapter,
-                scrollbarXSize,
-                scrollbarYSize,
             ],
         ),
         useMemo(

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

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'>
+    MobileHeaderProps & Pick<ReaderStateChapters, 'currentChapter'>
->(({ isVisible, currentChapter, scrollbarYSize }, ref) => {
+>(({ 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],
+    [useReaderStateChaptersContext],
-    ['currentChapter', 'scrollbarYSize'],
+    ['currentChapter'],
 );

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 } from '@/features/reader/Reader.types.ts';
-import { ReaderStateChapters, TReaderScrollbarContext } 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 &
+}: ReaderBottomBarMobileProps & Pick<ReaderStateChapters, 'currentChapter' | 'chapters'> & { topOffset?: number }) => {
-    Pick<ReaderStateChapters, 'currentChapter' | 'chapters'> &
-    Pick<TReaderScrollbarContext, 'scrollbarXSize' | 'scrollbarYSize'> & { 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],
+    [useReaderStateChaptersContext],
-    ['currentChapter', 'chapters', 'scrollbarXSize', 'scrollbarYSize'],
+    ['currentChapter', 'chapters'],
 );

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

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 {
+import { IReaderSettings, ProgressBarPosition, ReaderStateChapters } from '@/features/reader/Reader.types.ts';
-    IReaderSettings,
-    ProgressBarPosition,
-    ReaderStateChapters,
-    TReaderScrollbarContext,
-} 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<IReaderSettings, 'progressBarPosition' | 'progressBarPositionAutoVertical'> & {
-    Pick<TReaderScrollbarContext, 'scrollbarXSize'> & {
         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',
     ],
 );

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}

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);
+            const { scrollbar } = getReaderStore();
-            setScrollbarYSize(scrollbarYSize);
+            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',

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 {
+import { IReaderSettings, ReaderCustomFilter, ReaderPagerProps } from '@/features/reader/Reader.types.ts';
-    IReaderSettings,
-    ReaderCustomFilter,
-    ReaderPagerProps,
-    TReaderScrollbarContext,
-} 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),

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

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

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