Add page gap between chapters with disabled transition page

closes #1116

CHANGELOG.md

@@ -58,6 +58,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - (**Reader**) Fix chapter not getting marked as read in continuous reading mode in case the last page is not big enough to get marked as the current page
 - (**Reader**) Fix infinite scrolling sometimes not opening previous/next chapter
 - (**Reader**) Fix preserving scroll position with RTL reading direction and a language that is read RTL
+- (**Reader**) Fix missing gap between chapters in continuous vertical and horizontal reading modes with disabled transition page
 - (**Browse**) Fix showing only nsfw sources in the browse source page when the "show nsfw" setting is disabled
 - (**Manga/Library**) Fix mark as read/unread option not being disabled for manga without any chapters
 - (**Manga/Library**) Fix delete/download option not being disabled for manga without any chapters

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

@@ -50,6 +50,15 @@ export const getSetReaderWidth = (
     return readerWidth?.value;
 };
 
+export const getPageGap = (
+    pageGap: IReaderSettings['pageGap'],
+    readingMode: IReaderSettings['readingMode'],
+): IReaderSettings['pageGap'] => {
+    const isWebtoonMode = readingMode === ReadingMode.WEBTOON;
+
+    return isWebtoonMode ? 0 : pageGap;
+};
+
 export const isContinuousReadingMode = (readingMode: IReaderSettings['readingMode']): boolean =>
     [ReadingMode.CONTINUOUS_VERTICAL, ReadingMode.CONTINUOUS_HORIZONTAL, ReadingMode.WEBTOON].includes(readingMode);
 

src/features/reader/viewer/ReaderViewer.tsx

@@ -17,6 +17,7 @@ import { PageInViewportType, ReaderResumeMode, ReadingDirection, ReadingMode } f
 import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
 import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
 import {
+    getPageGap,
     isContinuousReadingMode,
     isContinuousVerticalReadingMode,
     shouldApplyReaderWidth,
@@ -98,6 +99,7 @@ const BaseReaderViewer = ({
         customFilter,
         shouldStretchPage,
         isStaticNav,
+        shouldShowTransitionPage,
     } = useReaderSettingsStore((state) => ({
         readingMode: state.readingMode.value,
         readingDirection: state.readingDirection.value,
@@ -109,6 +111,7 @@ const BaseReaderViewer = ({
         customFilter: state.customFilter,
         shouldStretchPage: state.shouldStretchPage.value,
         isStaticNav: state.isStaticNav,
+        shouldShowTransitionPage: state.shouldShowTransitionPage,
     }));
     const safeAreaInset = useReaderSettingsStore('safeAreaInset');
     const { resumeMode = ReaderResumeMode.START } = useLocation<RouteStateReader>().state ?? STABLE_EMPTY_OBJECT;
@@ -254,6 +257,9 @@ const BaseReaderViewer = ({
                 height: '100%',
                 overflow: 'auto',
                 flexWrap: 'nowrap',
+                ...applyStyles(isContinuousReadingModeActive && !shouldShowTransitionPage, {
+                    gap: `${getPageGap(pageGap, readingMode)}px`,
+                }),
                 ...applyStyles(
                     isContinuousVerticalReadingModeActive && shouldApplyReaderWidth(readerWidth, pageScaleMode),
                     { alignItems: 'center' },

src/features/reader/viewer/pager/components/ReaderVerticalPager.tsx

@@ -9,8 +9,8 @@
 import { memo } from 'react';
 import { BasePager } from '@/features/reader/viewer/pager/components/BasePager.tsx';
 import type { ReaderPagerProps } from '@/features/reader/Reader.types.ts';
-import { ReadingMode } from '@/features/reader/Reader.types.ts';
 import { createReaderPage } from '@/features/reader/viewer/pager/ReaderPager.utils.tsx';
+import { getPageGap } from '@/features/reader/settings/ReaderSettings.utils.tsx';
 
 const BaseReaderVerticalPager = ({
     onLoad,
@@ -22,9 +22,6 @@ const BaseReaderVerticalPager = ({
 }: ReaderPagerProps) => {
     const { currentPageIndex, totalPages, readingMode, pageGap } = props;
 
-    const isWebtoonMode = readingMode === ReadingMode.WEBTOON;
-    const actualPageGap = isWebtoonMode ? 0 : pageGap;
-
     return (
         <BasePager
             {...props}
@@ -45,7 +42,7 @@ const BaseReaderVerticalPager = ({
                     pageLoadStates[page.primary.index].error ? retryFailedPagesKeyPrefix : undefined,
                     undefined,
                     undefined,
-                    page.primary.index !== 0 ? actualPageGap : 0,
+                    page.primary.index !== 0 ? getPageGap(pageGap, readingMode) : 0,
                     setRef,
                 )
             }