Show page number with standard desktop progress bar

CHANGELOG.md

@@ -39,6 +39,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 - (**Reader**) Simplify changing settings in desktop sidebar
 - (**Reader**) Ignore tap zone clicks while window does not have focus
 - (**Reader**) Improve preloading pages from the previous/next chapter
+- (**Reader**) Show page number with the standard desktop progress bar selected
 - (**Category**) Require confirmation before deleting a category
 - (**Download**) Respect manga chapter filters on bulk manga download in the library
 - (**History**) Show only the last read chapter per manga

src/features/reader/overlay/components/ReaderPageNumber.tsx

@@ -31,11 +31,15 @@ const BaseReaderPageNumber = ({
     Pick<NavbarContextType, 'readerNavBarWidth'>) => {
     const scrollbar = useReaderScrollbarStore((state) => state);
     const { currentPageIndex, pages, totalPages } = useReaderPagesStore('currentPageIndex', 'pages', 'totalPages');
-    const { readingDirection, shouldShowPageNumber, progressBarType } = useReaderSettingsStore((state) => ({
+    const { readingDirection, shouldShowPageNumber, progressBarType, progressBarSize } = useReaderSettingsStore(
+        (state) => ({
             readingDirection: state.readingDirection.value,
             shouldShowPageNumber: state.shouldShowPageNumber,
             progressBarType: state.progressBarType,
-    }));
+            progressBarSize: state.progressBarSize,
+        }),
+    );
+    const progressBarSizeInset = isDesktop && progressBarType === ProgressBarType.STANDARD ? progressBarSize : 0;
     const safeAreaInset = useReaderSettingsStore((state) => state.safeAreaInset);
     const isMaximized = useReaderProgressBarStore('isMaximized');
 
@@ -55,14 +59,6 @@ const BaseReaderPageNumber = ({
         return null;
     }
 
-    if (isDesktop && progressBarType === ProgressBarType.STANDARD) {
-        return null;
-    }
-
-    if (isMaximized && progressBarType === ProgressBarType.HIDDEN) {
-        return null;
-    }
-
     return (
         <Stack
             sx={{
@@ -70,7 +66,7 @@ const BaseReaderPageNumber = ({
                 left: readerNavBarWidth,
                 right: 0,
                 bottom: (theme) =>
-                    `calc(${theme.spacing(1)} + max(${scrollbar.xSize}px, ${safeAreaInset.bottom ? 'env(safe-area-inset-bottom)' : '0px'}))`,
+                    `calc(${theme.spacing(1)} + ${progressBarSizeInset}px + max(${scrollbar.xSize}px, ${safeAreaInset.bottom ? 'env(safe-area-inset-bottom)' : '0px'}))`,
                 alignItems: 'center',
                 transition: (theme) => `left 0.${theme.transitions.duration.shortest}s`,
             }}

src/features/reader/settings/general/ReaderGeneralSettings.tsx

@@ -12,7 +12,6 @@ import { ReaderSettingProgressBarType } from '@/features/reader/overlay/progress
 import { ReaderSettingProgressBarSize } from '@/features/reader/overlay/progress-bar/settings/components/ReaderSettingProgressBarSize.tsx';
 import { ReaderSettingProgressBarPosition } from '@/features/reader/overlay/progress-bar/settings/components/ReaderSettingProgressBarPosition.tsx';
 import type { IReaderSettings, ReaderSettingsTypeProps } from '@/features/reader/Reader.types.ts';
-import { ProgressBarType, ReaderOverlayMode } from '@/features/reader/Reader.types.ts';
 import { ReaderSettingOverlayMode } from '@/features/reader/overlay/settings/ReaderSettingOverlayMode.tsx';
 import { CheckboxInput } from '@/base/components/inputs/CheckboxInput.tsx';
 import { ReaderSettingBackgroundColor } from '@/features/reader/settings/general/components/ReaderSettingBackgroundColor.tsx';
@@ -53,13 +52,11 @@ export const ReaderGeneralSettings = ({
                 progressBarPositionAutoVertical={settings.progressBarPositionAutoVertical}
                 updateSetting={updateSetting}
             />
-            {(settings.progressBarType === ProgressBarType.HIDDEN || overlayMode === ReaderOverlayMode.MOBILE) && (
             <CheckboxInput
                 label={t`Show page number`}
                 checked={settings.shouldShowPageNumber}
                 onChange={(_, checked) => updateSetting('shouldShowPageNumber', checked)}
             />
-            )}
             <ReaderSettingSafeAreaInset
                 safeAreaInset={settings.safeAreaInset}
                 updateSetting={(value) => updateSetting('safeAreaInset', value)}