From 3bec89c85d85657b09b47ea799dfd8f01d8acec1 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Tue, 17 Mar 2026 16:18:39 +0800
Subject: [PATCH] fix(progress): show remaining pages for current section
 instead of all loaded sections (#3550)

---
 .../src/app/reader/components/ProgressBar.tsx | 48 +++++++++----------
 apps/readest-app/src/types/view.ts            |  6 ++-
 packages/foliate-js                           |  2 +-
 3 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/ProgressBar.tsx b/apps/readest-app/src/app/reader/components/ProgressBar.tsx
index 6122e64e..a93748ef 100644
--- a/apps/readest-app/src/app/reader/components/ProgressBar.tsx
+++ b/apps/readest-app/src/app/reader/components/ProgressBar.tsx
@@ -53,32 +53,30 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
   const pageInfo = bookData?.isFixedLayout ? section : pageinfo;
   const progressInfo = formatProgress(pageInfo?.current, pageInfo?.total, template, localize, lang);
 
-  const { page = 0, pages = 0 } = view?.renderer || {};
-  const current = page;
-  const total = pages;
-  const pagesLeft = Math.max(total - current - 1, 0);
-  const timeLeftStr =
-    total - 1 > current
-      ? _('{{time}} min left in chapter', {
-          time: formatNumber(
-            Math.round((pagesLeft * SIZE_PER_LOC) / SIZE_PER_TIME_UNIT),
-            localize,
-            lang,
-          ),
+  const { sectionPage: current = 0, sectionPages: total = 0 } = view?.renderer || {};
+  const pagesLeft = Math.min(
+    Math.max(total - current, 1),
+    pageInfo ? pageInfo.total - pageInfo.current : total,
+  );
+  const showPagesLeft = total > 0;
+  const timeLeftStr = showPagesLeft
+    ? _('{{time}} min left in chapter', {
+        time: formatNumber(
+          Math.round((pagesLeft * SIZE_PER_LOC) / SIZE_PER_TIME_UNIT),
+          localize,
+          lang,
+        ),
+      })
+    : '';
+  const pagesLeftStr = showPagesLeft
+    ? localize
+      ? _('{{number}} pages left in chapter', {
+          number: formatNumber(pagesLeft, localize, lang),
         })
-      : '';
-  const pagesLeftStr =
-    total - 1 > current
-      ? localize
-        ? _('{{number}} pages left in chapter', {
-            number: formatNumber(pagesLeft, localize, lang),
-          })
-        : _('{{count}} pages left in chapter', {
-            count: pagesLeft,
-          })
-      : '';
-
-  const showPagesLeft = total - 1 > current;
+      : _('{{count}} pages left in chapter', {
+          count: pagesLeft,
+        })
+    : '';
 
   const [progressBarMode, setProgressBarMode] = useState<string>(viewSettings.progressInfoMode);
 
diff --git a/apps/readest-app/src/types/view.ts b/apps/readest-app/src/types/view.ts
index d19ddf2d..e835d5e4 100644
--- a/apps/readest-app/src/types/view.ts
+++ b/apps/readest-app/src/types/view.ts
@@ -66,8 +66,10 @@ export interface FoliateView extends HTMLElement {
     viewSize: number; // whole document view height
     start: number;
     end: number;
-    page: number;
-    pages: number;
+    page: number; // rendered page index (0-based)
+    pages: number; // rendered page count
+    sectionPage: number; // current page index in the current section
+    sectionPages: number; // page count in the current section
     atStart: boolean;
     atEnd: boolean;
     containerPosition: number;
diff --git a/packages/foliate-js b/packages/foliate-js
index e925e9d9..d81d1d42 160000
--- a/packages/foliate-js
+++ b/packages/foliate-js
@@ -1 +1 @@
-Subproject commit e925e9d95ed08e6da75a4b1d55e1be778aadd00e
+Subproject commit d81d1d42657580ce15a68c522ab46c77232fbb76