From 79ac2c3d27e04d2a0d0790a9de0c29178de9a171 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Wed, 15 Jul 2026 14:28:15 +0200
Subject: [PATCH] Show page number with standard desktop progress bar

---
 CHANGELOG.md                                  |  1 +
 .../overlay/components/ReaderPageNumber.tsx   | 24 ++++++++-----------
 .../general/ReaderGeneralSettings.tsx         | 13 ++++------
 3 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 039729ed..6dbb325f 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/src/features/reader/overlay/components/ReaderPageNumber.tsx b/src/features/reader/overlay/components/ReaderPageNumber.tsx
index f8359b6b..afd7c3a6 100644
--- a/src/features/reader/overlay/components/ReaderPageNumber.tsx
+++ b/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) => ({
-        readingDirection: state.readingDirection.value,
-        shouldShowPageNumber: state.shouldShowPageNumber,
-        progressBarType: state.progressBarType,
-    }));
+    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`,
             }}
diff --git a/src/features/reader/settings/general/ReaderGeneralSettings.tsx b/src/features/reader/settings/general/ReaderGeneralSettings.tsx
index 7e99ea23..15f25289 100644
--- a/src/features/reader/settings/general/ReaderGeneralSettings.tsx
+++ b/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)}
-                />
-            )}
+            <CheckboxInput
+                label={t`Show page number`}
+                checked={settings.shouldShowPageNumber}
+                onChange={(_, checked) => updateSetting('shouldShowPageNumber', checked)}
+            />
             <ReaderSettingSafeAreaInset
                 safeAreaInset={settings.safeAreaInset}
                 updateSetting={(value) => updateSetting('safeAreaInset', value)}