Add dedicated store access util functions

Makes it easier to find the specific store slice usage

src/features/reader/viewer/ReaderViewer.tsx

@@ -56,7 +56,15 @@ 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, useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
+import {
+    getReaderStore,
+    useReaderAutoScrollStore,
+    useReaderChaptersStore,
+    useReaderOverlayStore,
+    useReaderPagesStore,
+    useReaderSettingsStore,
+    useReaderTapZoneStore,
+} from '@/features/reader/stores/ReaderStore.ts';
 
 const READING_MODE_TO_IN_VIEWPORT_TYPE: Record<ReadingMode, PageInViewportType> = {
     [ReadingMode.SINGLE_PAGE]: PageInViewportType.X,
@@ -78,7 +86,7 @@ const BaseReaderViewer = forwardRef(
         ref: ForwardedRef<HTMLDivElement | null>,
     ) => {
         const { direction: themeDirection } = useTheme();
-        const isOverlayVisible = useReaderStore((state) => state.overlay.isVisible);
+        const isOverlayVisible = useReaderOverlayStore((state) => state.overlay.isVisible);
         const {
             currentPageIndex,
             pageToScrollToIndex,
@@ -92,7 +100,7 @@ const BaseReaderViewer = forwardRef(
             transitionPageMode,
             retryFailedPagesKeyPrefix,
             setTransitionPageMode,
-        } = useReaderStore((state) => ({
+        } = useReaderPagesStore((state) => ({
             currentPageIndex: state.pages.currentPageIndex,
             pageToScrollToIndex: state.pages.pageToScrollToIndex,
             setPageToScrollToIndex: state.pages.setPageToScrollToIndex,
@@ -113,7 +121,7 @@ const BaseReaderViewer = forwardRef(
             visibleChapters,
             setReaderStateChapters,
             isCurrentChapterReady,
-        } = useReaderStore((state) => ({
+        } = useReaderChaptersStore((state) => ({
             initialChapter: state.chapters.initialChapter,
             currentChapter: state.chapters.currentChapter,
             chapters: state.chapters.chapters,
@@ -132,7 +140,7 @@ const BaseReaderViewer = forwardRef(
             customFilter,
             shouldStretchPage,
             isStaticNav,
-        } = useReaderStore((state) => ({
+        } = useReaderSettingsStore((state) => ({
             readingMode: state.settings.readingMode.value,
             readingDirection: state.settings.readingDirection.value,
             readerWidth: state.settings.readerWidth.value,
@@ -144,7 +152,7 @@ const BaseReaderViewer = forwardRef(
             shouldStretchPage: state.settings.shouldStretchPage.value,
             isStaticNav: state.settings.isStaticNav,
         }));
-        const { showPreview, setShowPreview } = useReaderStore((state) => ({
+        const { showPreview, setShowPreview } = useReaderTapZoneStore((state) => ({
             showPreview: state.tapZone.showPreview,
             setShowPreview: state.tapZone.setShowPreview,
         }));
@@ -159,7 +167,7 @@ const BaseReaderViewer = forwardRef(
         const isContinuousReadingModeActive = isContinuousReadingMode(readingMode);
         const isDragging = useMouseDragScroll(scrollElementRef);
 
-        const automaticScrolling = useReaderStore((state) => ({
+        const automaticScrolling = useReaderAutoScrollStore((state) => ({
             isPaused: state.autoScroll.isPaused,
             pause: state.autoScroll.pause,
             resume: state.autoScroll.resume,

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

@@ -17,7 +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 { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
+import { useReaderScrollbarStore } from '@/features/reader/stores/ReaderStore.ts';
 
 const getCustomFilterString = (customFilter: ReaderCustomFilter): string =>
     Object.keys(customFilter)
@@ -86,7 +86,7 @@ const BaseReaderPage = ({
     const { src } = props;
 
     const isTabletWidth = MediaQuery.useIsTabletWidth();
-    const scrollbar = useReaderStore((state) => state.scrollbar);
+    const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
 
     const handleLoad = useCallback(
         () => onLoad?.(pagesIndex, src, isPrimaryPage),

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

@@ -29,7 +29,13 @@ import { getValueFromObject, noOp } from '@/lib/HelperFunctions.ts';
 import { READER_BACKGROUND_TO_COLOR } from '@/features/reader/settings/ReaderSettings.constants.tsx';
 import { ChapterType } from '@/lib/graphql/generated/graphql.ts';
 import { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
-import { useReaderStore } from '@/features/reader/stores/ReaderStore.ts';
+import {
+    useReaderChaptersStore,
+    useReaderPagesStore,
+    useReaderScrollbarStore,
+    useReaderSettingsStore,
+    useReaderStore,
+} from '@/features/reader/stores/ReaderStore.ts';
 
 const ChapterInfo = ({
     title,
@@ -93,9 +99,9 @@ const BaseReaderTransitionPage = ({
 }) => {
     const { t } = useTranslation();
     const manga = useReaderStore((state) => state.manga);
-    const scrollbar = useReaderStore((state) => state.scrollbar);
-    const transitionPageMode = useReaderStore((state) => state.pages.transitionPageMode);
-    const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderStore((state) => ({
+    const scrollbar = useReaderScrollbarStore((state) => state.scrollbar);
+    const transitionPageMode = useReaderPagesStore((state) => state.pages.transitionPageMode);
+    const { readingMode, backgroundColor, shouldShowTransitionPage } = useReaderSettingsStore((state) => ({
         readingMode: state.settings.readingMode.value,
         backgroundColor: state.settings.backgroundColor,
         shouldShowTransitionPage: state.settings.shouldShowTransitionPage,
@@ -223,7 +229,7 @@ export const ReaderTransitionPage = withPropsFrom(
     memo(BaseReaderTransitionPage) as typeof BaseReaderTransitionPage,
     [
         ({ chapterId }: Pick<ComponentProps<typeof BaseReaderTransitionPage>, 'chapterId'>) => {
-            const chapters = useReaderStore((state) => state.chapters.chapters);
+            const chapters = useReaderChaptersStore((state) => state.chapters.chapters);
 
             const currentChapterIndex = useMemo(
                 () => chapters.findIndex((chapter) => chapter.id === chapterId),
@@ -246,7 +252,7 @@ export const ReaderTransitionPage = withPropsFrom(
         useNavBarContext,
         ({ chapterId, type }: Pick<ComponentProps<typeof BaseReaderTransitionPage>, 'chapterId' | 'type'>) => {
             const handleBack = useBackButton();
-            const chapters = useReaderStore((state) => state.chapters.chapters);
+            const chapters = useReaderChaptersStore((state) => state.chapters.chapters);
 
             const currentChapterIndex = useMemo(
                 () => chapters.findIndex((chapter) => chapter.id === chapterId),