fix: rtl for notebook, closes #451 (#535)

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

@@ -94,16 +94,16 @@ const FooterBar: React.FC<FooterBarProps> = ({
         />
       </div>
       <Button
-        icon={<RiArrowGoBackLine />}
-        onClick={handleGoBack}
-        tooltip={_('Go Back')}
-        disabled={!view?.history.canGoBack}
+        icon={viewSettings?.rtl ? <RiArrowGoForwardLine /> : <RiArrowGoBackLine />}
+        onClick={viewSettings?.rtl ? handleGoForward : handleGoBack}
+        tooltip={viewSettings?.rtl ? _('Go Forward') : _('Go Back')}
+        disabled={viewSettings?.rtl ? !view?.history.canGoForward : !view?.history.canGoBack}
       />
       <Button
-        icon={<RiArrowGoForwardLine />}
-        onClick={handleGoForward}
-        tooltip={_('Go Forward')}
-        disabled={!view?.history.canGoForward}
+        icon={viewSettings?.rtl ? <RiArrowGoBackLine /> : <RiArrowGoForwardLine />}
+        onClick={viewSettings?.rtl ? handleGoBack : handleGoForward}
+        tooltip={viewSettings?.rtl ? _('Go Back') : _('Go Forward')}
+        disabled={viewSettings?.rtl ? !view?.history.canGoBack : !view?.history.canGoForward}
       />
       <span className='mx-2 text-center text-sm'>
         {progressValid ? `${Math.round(progressFraction * 100)}%` : ''}

apps/readest-app/src/app/reader/components/notebook/Header.tsx

@@ -15,10 +15,10 @@ const NotebookHeader: React.FC<{
   const _ = useTranslation();
   const iconSize14 = useResponsiveSize(14);
   return (
-    <div className='notebook-header relative flex h-11 items-center px-3'>
+    <div className='notebook-header relative flex h-11 items-center px-3' dir='ltr'>
       <div className='absolute inset-0 flex items-center justify-center space-x-2'>
         <LuNotebookPen />
-        <div className='notebook-title text-sm font-medium'>{_('Notebook')}</div>
+        <div className='notebook-title hidden text-sm font-medium sm:flex'>{_('Notebook')}</div>
       </div>
       <div className='z-10 flex items-center gap-x-4'>
         <button

apps/readest-app/src/app/reader/components/notebook/NoteEditor.tsx

@@ -114,6 +114,7 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
               'inset-0 w-full rounded-none border-0 bg-transparent p-0',
               'content font-size-sm',
             )}
+            dir='auto'
             ref={editorRef}
             value={note}
             rows={1}
@@ -130,7 +131,7 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
           <span className='content font-size-xs inline text-gray-500'>{getAnnotationText()}</span>
         </div>
       </div>
-      <div className='flex justify-end p-2'>
+      <div className='flex justify-end p-2' dir='ltr'>
         <button
           className={clsx(
             'content btn btn-ghost font-size-sm hover:bg-transparent',

apps/readest-app/src/app/reader/components/notebook/Notebook.tsx

@@ -14,6 +14,7 @@ import { TextSelection } from '@/utils/sel';
 import { BookNote } from '@/types/book';
 import { uniqueId } from '@/utils/misc';
 import { eventDispatcher } from '@/utils/event';
+import { getBookDirFromLanguage } from '@/utils/book';
 import BooknoteItem from '../sidebar/BooknoteItem';
 import NotebookHeader from './Header';
 import NoteEditor from './NoteEditor';
@@ -29,8 +30,8 @@ const Notebook: React.FC = ({}) => {
   const { sideBarBookKey } = useSidebarStore();
   const { notebookWidth, isNotebookVisible, isNotebookPinned } = useNotebookStore();
   const { notebookNewAnnotation, notebookEditAnnotation, setNotebookPin } = useNotebookStore();
-  const { getConfig, saveConfig, updateBooknotes } = useBookDataStore();
-  const { getView } = useReaderStore();
+  const { getBookData, getConfig, saveConfig, updateBooknotes } = useBookDataStore();
+  const { getView, getViewSettings } = useReaderStore();
   const { setNotebookWidth, setNotebookVisible, toggleNotebookPin } = useNotebookStore();
   const { setNotebookNewAnnotation, setNotebookEditAnnotation } = useNotebookStore();
 
@@ -136,6 +137,14 @@ const Notebook: React.FC = ({}) => {
 
   if (!sideBarBookKey) return null;
 
+  const bookData = getBookData(sideBarBookKey);
+  const viewSettings = getViewSettings(sideBarBookKey);
+  if (!bookData || !bookData.bookDoc) {
+    return null;
+  }
+  const { bookDoc } = bookData;
+  const languageDir = getBookDirFromLanguage(bookDoc.metadata.language);
+
   const config = getConfig(sideBarBookKey);
   const { booknotes: allNotes = [] } = config || {};
   const annotationNotes = allNotes
@@ -159,6 +168,7 @@ const Notebook: React.FC = ({}) => {
           appService?.hasRoundedWindow && 'rounded-window-top-right rounded-window-bottom-right',
           !isNotebookPinned && 'shadow-2xl',
         )}
+        dir={viewSettings?.rtl && languageDir === 'rtl' ? 'rtl' : 'ltr'}
         style={{
           width: `${notebookWidth}`,
           maxWidth: `${MAX_NOTEBOOK_WIDTH * 100}%`,
@@ -183,7 +193,7 @@ const Notebook: React.FC = ({}) => {
           handleTogglePin={handleTogglePin}
         />
         <div className='max-h-[calc(100vh-44px)] overflow-y-auto px-3'>
-          <div>
+          <div dir='ltr'>
             {excerptNotes.length > 0 && (
               <p className='content font-size-base pt-1'>{_('Excerpts')}</p>
             )}
@@ -196,7 +206,7 @@ const Notebook: React.FC = ({}) => {
                   className='collapse-arrow border-base-300 bg-base-100 collapse border'
                 >
                   <div
-                    className='collapse-title font-size-sm h-9 min-h-9 p-2 pr-8 font-medium'
+                    className='collapse-title font-size-sm h-9 min-h-9 p-2 pe-8 font-medium'
                     style={
                       {
                         '--top-override': '1.2rem',
@@ -208,7 +218,7 @@ const Notebook: React.FC = ({}) => {
                   </div>
                   <div className='collapse-content font-size-xs select-text px-3 pb-0'>
                     <p className='hyphens-auto text-justify'>{item.text}</p>
-                    <div className='flex justify-end'>
+                    <div className='flex justify-end' dir='ltr'>
                       <div
                         className='font-size-xs cursor-pointer align-bottom text-red-500 hover:text-red-600'
                         onClick={handleEditNote.bind(null, item, true)}
@@ -221,7 +231,7 @@ const Notebook: React.FC = ({}) => {
               </li>
             ))}
           </ul>
-          <div>
+          <div dir='ltr'>
             {(notebookNewAnnotation || annotationNotes.length > 0) && (
               <p className='content font-size-base pt-1'>{_('Notes')}</p>
             )}

apps/readest-app/src/app/reader/components/sidebar/BooknoteItem.tsx

@@ -81,10 +81,14 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item }) => {
           } as React.CSSProperties
         }
       >
-        {item.note && <span className='content font-size-sm font-normal'>{item.note}</span>}
+        {item.note && (
+          <span className='content font-size-sm font-normal' dir='auto'>
+            {item.note}
+          </span>
+        )}
         <div className='flex items-start'>
           {item.note && (
-            <div className='my-1 mr-2 min-h-full self-stretch border-l-2 border-gray-300'></div>
+            <div className='my-1 me-2 min-h-full self-stretch border-l-2 border-gray-300'></div>
           )}
           <div className={clsx('content font-size-sm line-clamp-3', item.note && 'py-2')}>
             <span
@@ -116,7 +120,7 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item }) => {
         }
         onClick={(e) => e.stopPropagation()}
       >
-        <div className='flex justify-end space-x-3 p-2'>
+        <div className='flex justify-end space-x-3 p-2' dir='ltr'>
           {item.note && (
             <button
               className={clsx(