fix: RTL layout for the bottom configuration panel, closes #849 (#850)

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

@@ -23,6 +23,7 @@ import {
   handleTouchEnd,
 } from '../utils/iframeEventHandlers';
 import { getMaxInlineSize } from '@/utils/config';
+import { getDirFromUILanguage } from '@/utils/rtl';
 import { transformContent } from '@/services/transformService';
 
 const FoliateViewer: React.FC<{
@@ -84,7 +85,11 @@ const FoliateViewer: React.FC<{
       const viewSettings = getViewSettings(bookKey)!;
       viewSettings.vertical =
         writingDir?.vertical || viewSettings.writingMode.includes('vertical') || false;
-      viewSettings.rtl = writingDir?.rtl || viewSettings.writingMode.includes('rl') || false;
+      viewSettings.rtl =
+        writingDir?.rtl ||
+        getDirFromUILanguage() === 'rtl' ||
+        viewSettings.writingMode.includes('rl') ||
+        false;
       setViewSettings(bookKey, { ...viewSettings });
 
       mountAdditionalFonts(detail.doc);

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

@@ -8,8 +8,8 @@ import { RiDashboardLine } from 'react-icons/ri';
 import { VscSymbolColor } from 'react-icons/vsc';
 import { PiDotsThreeVerticalBold } from 'react-icons/pi';
 import { IoAccessibilityOutline } from 'react-icons/io5';
-import { MdArrowBackIosNew } from 'react-icons/md';
-
+import { MdArrowBackIosNew, MdArrowForwardIos } from 'react-icons/md';
+import { getDirFromUILanguage } from '@/utils/rtl';
 import FontPanel from './FontPanel';
 import LayoutPanel from './LayoutPanel';
 import ColorPanel from './ColorPanel';
@@ -28,6 +28,7 @@ type TabConfig = {
 
 const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ bookKey }) => {
   const _ = useTranslation();
+  const [isRtl] = useState(() => getDirFromUILanguage() === 'rtl');
   const [activePanel, setActivePanel] = useState<SettingsPanelType>(
     (localStorage.getItem('lastConfigPanel') || 'Font') as SettingsPanelType,
   );
@@ -79,10 +80,10 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
               tabIndex={-1}
               onClick={handleClose}
               className={
-                'btn btn-ghost btn-circle flex h-6 min-h-6 w-6 hover:bg-transparent focus:outline-none sm:hidden'
+                'btn btn-ghost btn-circle flex h-8 min-h-8 w-8 hover:bg-transparent focus:outline-none sm:hidden'
               }
             >
-              <MdArrowBackIosNew />
+              {isRtl ? <MdArrowForwardIos /> : <MdArrowBackIosNew />}
             </button>
             <div className='dialog-tabs flex h-10 max-w-[100%] flex-grow items-center gap-2 pl-4'>
               {tabConfig.map(({ tab, icon: Icon, label }) => (

apps/readest-app/src/app/reader/components/tts/TTSPanel.tsx

@@ -249,7 +249,7 @@ const TTSPanel = ({
             tabIndex={0}
             className={clsx(
               'dropdown-content bgcolor-base-200 no-triangle menu menu-vertical rounded-box absolute right-0 z-[1] shadow',
-              'mt-4 inline max-h-96 w-[250px] overflow-y-scroll',
+              'mt-4 inline max-h-96 w-[200px] overflow-y-scroll',
             )}
           >
             {timeoutOptions.map((option, index) => (