From 23d5f3363dfb7631e47a91a8cdabb0cd5f6ffd71 Mon Sep 17 00:00:00 2001
From: Lex Moulton <lex.k.moulton@gmail.com>
Date: Fri, 10 Apr 2026 05:54:30 -0400
Subject: [PATCH] fix(rtl): fix page navigation for Arabic books (#3817)

* fix(rtl): fix page navigation for Arabic books

* fix(rtl): unified navigation handlers for rtl and ltr

---------

Co-authored-by: Huang Xin <chrox.huang@gmail.com>
---
 apps/readest-app/.claude/skills/gstack        |  2 +-
 .../components/footerbar/DesktopFooterBar.tsx | 36 +++++------------
 .../reader/components/footerbar/FooterBar.tsx |  9 ++---
 .../components/footerbar/NavigationPanel.tsx  | 40 +++++--------------
 .../src/app/reader/hooks/usePagination.ts     |  2 +-
 packages/foliate-js                           |  2 +-
 6 files changed, 28 insertions(+), 63 deletions(-)

diff --git a/apps/readest-app/.claude/skills/gstack b/apps/readest-app/.claude/skills/gstack
index 6169273d..dbd7aee5 160000
--- a/apps/readest-app/.claude/skills/gstack
+++ b/apps/readest-app/.claude/skills/gstack
@@ -1 +1 @@
-Subproject commit 6169273d16b7ab8690943241fa802e5a1ca85305
+Subproject commit dbd7aee5b6b5bb41b17ae7747568e2fda8a91d77
diff --git a/apps/readest-app/src/app/reader/components/footerbar/DesktopFooterBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/DesktopFooterBar.tsx
index cecd2e1a..24bf19d9 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/DesktopFooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/DesktopFooterBar.tsx
@@ -4,12 +4,12 @@ import { FaHeadphones } from 'react-icons/fa6';
 import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
 import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
 import { RiArrowLeftDoubleLine, RiArrowRightDoubleLine } from 'react-icons/ri';
-import { getNavigationIcon, getNavigationLabel, getNavigationHandler } from './utils';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useBookDataStore } from '@/store/bookDataStore';
-import { FooterBarChildProps } from './types';
 import { formatProgress } from '@/utils/progress';
+import { FooterBarChildProps } from './types';
+import { getNavigationIcon } from './utils';
 import Button from '@/components/Button';
 
 const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
@@ -86,23 +86,15 @@ const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
             <RiArrowLeftDoubleLine />,
             <RiArrowRightDoubleLine />,
           )}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onPrevSection,
-            navigationHandlers.onNextSection,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Previous Section'), _('Next Section'))}
+          onClick={navigationHandlers.onPrevSection}
+          label={_('Previous Section')}
         />
       )}
       {!viewSettings?.showPaginationButtons && (
         <Button
           icon={getNavigationIcon(viewSettings?.rtl, <RiArrowLeftSLine />, <RiArrowRightSLine />)}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onPrevPage,
-            navigationHandlers.onNextPage,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Previous Page'), _('Next Page'))}
+          onClick={navigationHandlers.onPrevPage}
+          label={_('Previous Page')}
         />
       )}
       <Button
@@ -144,12 +136,8 @@ const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
       {!viewSettings?.showPaginationButtons && (
         <Button
           icon={getNavigationIcon(viewSettings?.rtl, <RiArrowRightSLine />, <RiArrowLeftSLine />)}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onNextPage,
-            navigationHandlers.onPrevPage,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Next Page'), _('Previous Page'))}
+          onClick={navigationHandlers.onNextPage}
+          label={_('Next Page')}
         />
       )}
       {!viewSettings?.showPaginationButtons && (
@@ -159,12 +147,8 @@ const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
             <RiArrowRightDoubleLine />,
             <RiArrowLeftDoubleLine />,
           )}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onNextSection,
-            navigationHandlers.onPrevSection,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Next Section'), _('Previous Section'))}
+          onClick={navigationHandlers.onNextSection}
+          label={_('Next Section')}
         />
       )}
     </div>
diff --git a/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
index bf657ebc..d1eb3ffc 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
@@ -10,7 +10,6 @@ import { useDeviceControlStore } from '@/store/deviceStore';
 import { eventDispatcher } from '@/utils/event';
 import { FooterBarProps, NavigationHandlers, FooterBarChildProps } from './types';
 import { debounce } from '@/utils/debounce';
-import { viewPagination } from '../../hooks/usePagination';
 import { RSVPControl } from '../rsvp';
 import MobileFooterBar from './MobileFooterBar';
 import DesktopFooterBar from './DesktopFooterBar';
@@ -68,12 +67,12 @@ const FooterBar: React.FC<FooterBarProps> = ({
   );
 
   const handleGoPrevPage = useCallback(() => {
-    viewPagination(view, viewSettings, 'left', 'page');
-  }, [view, viewSettings]);
+    view?.renderer.prev();
+  }, [view]);
 
   const handleGoNextPage = useCallback(() => {
-    viewPagination(view, viewSettings, 'right', 'page');
-  }, [view, viewSettings]);
+    view?.renderer.next();
+  }, [view]);
 
   const handleGoPrevSection = useCallback(() => {
     view?.renderer.prevSection?.();
diff --git a/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx b/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
index 23d0d38a..dd432bd1 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/NavigationPanel.tsx
@@ -3,12 +3,11 @@ import React, { useCallback, useEffect } from 'react';
 import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
 import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
 import { RiArrowLeftDoubleLine, RiArrowRightDoubleLine } from 'react-icons/ri';
-import { getNavigationIcon, getNavigationLabel, getNavigationHandler } from './utils';
 import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
-import { ViewSettings } from '@/types/book';
 import { NavigationHandlers } from './types';
+import { getNavigationIcon } from './utils';
 import Button from '@/components/Button';
 import Slider from '@/components/Slider';
 
@@ -18,7 +17,6 @@ interface NavigationPanelProps {
   progressFraction: number;
   progressValid: boolean;
   navigationHandlers: NavigationHandlers;
-  viewSettings?: ViewSettings;
   bottomOffset: string;
   sliderHeight: number;
   forceMobileLayout: boolean;
@@ -30,15 +28,15 @@ export const NavigationPanel: React.FC<NavigationPanelProps> = ({
   progressFraction,
   progressValid,
   navigationHandlers,
-  viewSettings,
   bottomOffset,
   sliderHeight,
   forceMobileLayout,
 }) => {
   const _ = useTranslation();
   const { appService } = useEnv();
-  const { getView } = useReaderStore();
+  const { getView, getViewSettings } = useReaderStore();
   const view = getView(bookKey);
+  const viewSettings = getViewSettings(bookKey);
 
   const [progressValue, setProgressValue] = React.useState(
     progressValid ? progressFraction * 100 : 0,
@@ -92,21 +90,13 @@ export const NavigationPanel: React.FC<NavigationPanelProps> = ({
             <RiArrowLeftDoubleLine />,
             <RiArrowRightDoubleLine />,
           )}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onPrevSection,
-            navigationHandlers.onNextSection,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Previous Section'), _('Next Section'))}
+          onClick={navigationHandlers.onPrevSection}
+          label={_('Previous Section')}
         />
         <Button
           icon={getNavigationIcon(viewSettings?.rtl, <RiArrowLeftSLine />, <RiArrowRightSLine />)}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onPrevPage,
-            navigationHandlers.onNextPage,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Previous Page'), _('Next Page'))}
+          onClick={navigationHandlers.onPrevPage}
+          label={_('Previous Page')}
         />
         <Button
           icon={getNavigationIcon(
@@ -130,12 +120,8 @@ export const NavigationPanel: React.FC<NavigationPanelProps> = ({
         />
         <Button
           icon={getNavigationIcon(viewSettings?.rtl, <RiArrowRightSLine />, <RiArrowLeftSLine />)}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onNextPage,
-            navigationHandlers.onPrevPage,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Next Page'), _('Previous Page'))}
+          onClick={navigationHandlers.onNextPage}
+          label={_('Next Page')}
         />
         <Button
           icon={getNavigationIcon(
@@ -143,12 +129,8 @@ export const NavigationPanel: React.FC<NavigationPanelProps> = ({
             <RiArrowRightDoubleLine />,
             <RiArrowLeftDoubleLine />,
           )}
-          onClick={getNavigationHandler(
-            viewSettings?.rtl,
-            navigationHandlers.onNextSection,
-            navigationHandlers.onPrevSection,
-          )}
-          label={getNavigationLabel(viewSettings?.rtl, _('Next Section'), _('Previous Section'))}
+          onClick={navigationHandlers.onNextSection}
+          label={_('Next Section')}
         />
       </div>
     </div>
diff --git a/apps/readest-app/src/app/reader/hooks/usePagination.ts b/apps/readest-app/src/app/reader/hooks/usePagination.ts
index bf4f1fd7..9c7214dc 100644
--- a/apps/readest-app/src/app/reader/hooks/usePagination.ts
+++ b/apps/readest-app/src/app/reader/hooks/usePagination.ts
@@ -55,7 +55,7 @@ export const viewPagination = (
 ) => {
   if (!view || !viewSettings) return;
   const renderer = view.renderer;
-  if (view.book.dir === 'rtl') {
+  if (viewSettings.rtl) {
     side = swapLeftRight(side);
   }
   if (renderer.scrolled) {
diff --git a/packages/foliate-js b/packages/foliate-js
index ec7e16aa..183f296a 160000
--- a/packages/foliate-js
+++ b/packages/foliate-js
@@ -1 +1 @@
-Subproject commit ec7e16aa483429701c7f4f19ab909ecae79dfd58
+Subproject commit 183f296aaf1484e143edd6c3eb55fb77673df3de