fix: swap paging keys when writing direction is set in config (#295)

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -9,6 +9,7 @@ import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { useProgressSync } from '../hooks/useProgressSync';
 import { useAutoHideScrollbar } from '../hooks/useAutoHideScrollbar';
 import { getStyles, mountAdditionalFonts } from '@/utils/style';
+import { getBookDirFromWritingMode } from '@/utils/book';
 import { useTheme } from '@/hooks/useTheme';
 import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
 import {
@@ -141,6 +142,11 @@ const FoliateViewer: React.FC<{
       const viewSettings = getViewSettings(bookKey)!;
       view.renderer.setStyles?.(getStyles(viewSettings, themeCode));
 
+      const writingMode = viewSettings.writingMode;
+      if (writingMode) {
+        view.book.dir = getBookDirFromWritingMode(writingMode);
+      }
+
       const isScrolled = viewSettings.scrolled!;
       const marginPx = viewSettings.marginPx!;
       const gapPercent = viewSettings.gapPercent!;

apps/readest-app/src/app/reader/components/settings/FontPanel.tsx

@@ -20,6 +20,7 @@ import { useTheme } from '@/hooks/useTheme';
 import { getStyles } from '@/utils/style';
 import { getOSPlatform } from '@/utils/misc';
 import { FONT_ENUM_SUPPORTED_OS_PLATFORMS, getSysFontsList } from '@/utils/font';
+import { isTauriAppPlatform } from '@/services/environment';
 
 interface FontFaceProps {
   className?: string;
@@ -98,7 +99,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [monospaceFont, setMonospaceFont] = useState(viewSettings.monospaceFont!);
 
   useEffect(() => {
-    if (FONT_ENUM_SUPPORTED_OS_PLATFORMS.includes(osPlatform)) {
+    if (isTauriAppPlatform() && FONT_ENUM_SUPPORTED_OS_PLATFORMS.includes(osPlatform)) {
       getSysFontsList().then((fonts) => {
         setSysFonts(fonts);
       });

apps/readest-app/src/app/reader/components/settings/LayoutPanel.tsx

@@ -9,7 +9,7 @@ import { useBookDataStore } from '@/store/bookDataStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useTheme } from '@/hooks/useTheme';
 import { getStyles } from '@/utils/style';
-import { getBookLangCode } from '@/utils/book';
+import { getBookDirFromWritingMode, getBookLangCode } from '@/utils/book';
 import NumberInput from './NumberInput';
 
 const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
@@ -134,7 +134,10 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // global settings are not supported for writing mode
     viewSettings.writingMode = writingMode;
     setViewSettings(bookKey, viewSettings);
-    view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    if (view) {
+      view.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+      view.book.dir = getBookDirFromWritingMode(writingMode);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [writingMode]);