fix(layout): scrollable book view and about window, closes #2090 (#2098)

2025-09-22 19:44:54 +08:00
parent b0640ba55b
commit 98b4026990
32 changed files with 113 additions and 61 deletions
@@ -579,5 +579,7 @@
  "Toggle Translation": "تبديل الترجمة",
  "Translation Disabled": "تم تعطيل الترجمة",
  "Minimize": "تصغير",
-  "Maximize or Restore": "تكبير أو استعادة"
+  "Maximize or Restore": "تكبير أو استعادة",
+  "Exit Parallel Read": "الخروج من القراءة المتزامنة",
+  "Enter Parallel Read": "الدخول في القراءة المتزامنة"
 }
@@ -563,5 +563,7 @@
  "Toggle Translation": "অনুবাদ টগল করুন",
  "Translation Disabled": "অনুবাদ অক্ষম",
  "Minimize": "সঙ্কুচিত করুন",
-  "Maximize or Restore": "বৃহৎ করুন বা পুনরুদ্ধার করুন"
+  "Maximize or Restore": "বৃহৎ করুন বা পুনরুদ্ধার করুন",
+  "Exit Parallel Read": "সমান্তরাল পড়া থেকে বেরিয়ে আসুন",
+  "Enter Parallel Read": "সমান্তরাল পড়ায় প্রবেশ করুন"
 }
@@ -539,25 +539,27 @@
  "OFF": "བརྗེ་བ",
  "Reading Progress": "ཀློག་པའི་ཡར་འཕེལ།",
  "Page Margin": "ཤོག་གདོང་།",
-  "Remove Bookmark": "བརྗེ་བའི་སྒྲིག་འདེམས་པ།",
-  "Add Bookmark": "བརྗེ་བའི་སྒྲིག་འདེམས་པ།",
-  "Books Content": "དེབ་ཀྱི་དོན་ཚན",
-  "Jump to Location": "གནས་སྟངས་འདེམས་པ།",
-  "Unpin Notebook": "དེབ་སྣོད་འདེམས་པ།",
-  "Pin Notebook": "དེབ་སྣོད་འདེམས་པ།",
-  "Hide Search Bar": "འཚོལ་བའི་སྒྲིག་འདེམས་པ།",
-  "Show Search Bar": "འཚོལ་བའི་སྒྲིག་འདེམས་པ།",
-  "On {{current}} of {{total}} page": "ཤོག་ {{current}} དང་ {{total}}",
-  "Section Title": "དོན་ཚན་གྱི་མགོ་སྒམ།",
-  "Decrease": "བཏང་བ།",
-  "Increase": "བཀྲ་ཤིས་བཏང་བ།",
-  "Settings Panels": "སྒྲིག་སྟངས་མ་ལག",
-  "Settings": "སྒྲིག་སྟངས",
-  "Unpin Sidebar": "གཡས་སྒོ་འདེམས་པ།",
-  "Pin Sidebar": "གཡས་སྒོ་འདེམས་པ།",
-  "Toggle Sidebar": "གཡས་སྒོ་འདེམས་པ།",
-  "Toggle Translation": "བརྗེ་བའི་སྒྲིག་འདེམས་པ།",
-  "Translation Disabled": "བརྗེ་བའི་སྒྲིག་འདེམས་པ།",
-  "Minimize": "སྐར་མ་འཇོག",
-  "Maximize or Restore": "བཀྲ་ཤིས་བཏང་བ།"
+  "Remove Bookmark": "དེབ་གྲངས་འདོར་བ།",
+  "Add Bookmark": "དེབ་གྲངས་སྣོན་པ།",
+  "Books Content": "དེབ་ཀྱི་ནང་དོན།",
+  "Jump to Location": "གནས་ས་ལ་འགྲོ།",
+  "Unpin Notebook": "དེབ་སྣོད་བཤོལ་བ།",
+  "Pin Notebook": "དེབ་སྣོད་བཀར་བ།",
+  "Hide Search Bar": "འཚོལ་བཤེར་སྒོ་སྦེད།",
+  "Show Search Bar": "འཚོལ་བཤེར་སྒོ་སྟོན།",
+  "On {{current}} of {{total}} page": "ཤོག་ངོས་ {{total}} ནས་ {{current}} ལ།",
+  "Section Title": "དོན་ཚན་མགོ་མིང་།",
+  "Decrease": "མར་འབེབས།",
+  "Increase": "ཡར་འཕར།",
+  "Settings Panels": "སྒྲིག་སྟངས་གནས་སྟོན།",
+  "Settings": "སྒྲིག་སྟངས།",
+  "Unpin Sidebar": "ཟུར་སྒོ་བཤོལ་བ།",
+  "Pin Sidebar": "ཟུར་སྒོ་བཀར་བ།",
+  "Toggle Sidebar": "ཟུར་སྒོ་སྤོ་བ།",
+  "Toggle Translation": "ཡིག་སྒྱུར་སྤོ་བ།",
+  "Translation Disabled": "ཡིག་སྒྱུར་མེད།",
+  "Minimize": "ཆུང་དུ་བསྡུ།",
+  "Maximize or Restore": "ཆེན་པོ་བཟོ/གསོག།",
+  "Exit Parallel Read": "མཉམ་དུ་ཀློག་ཕྱིར་འཐེན།",
+  "Enter Parallel Read": "མཉམ་དུ་ཀློག་འཛུལ།"
 }
@@ -563,5 +563,7 @@
  "Toggle Translation": "Übersetzung umschalten",
  "Translation Disabled": "Übersetzung deaktiviert",
  "Minimize": "Minimieren",
-  "Maximize or Restore": "Maximieren oder Wiederherstellen"
+  "Maximize or Restore": "Maximieren oder Wiederherstellen",
+  "Exit Parallel Read": "Parallel Read beenden",
+  "Enter Parallel Read": "Parallel Read starten"
 }
@@ -563,5 +563,7 @@
  "Toggle Translation": "Εναλλαγή μετάφρασης",
  "Translation Disabled": "Η μετάφραση είναι απενεργοποιημένη",
  "Minimize": "Ελαχιστοποίηση",
-  "Maximize or Restore": "Μεγιστοποίηση ή Επαναφορά"
+  "Maximize or Restore": "Μεγιστοποίηση ή Επαναφορά",
+  "Exit Parallel Read": "Έξοδος από την παράλληλη ανάγνωση",
+  "Enter Parallel Read": "Είσοδος στην παράλληλη ανάγνωση"
 }
@@ -567,5 +567,7 @@
  "Toggle Translation": "Alternar Traducción",
  "Translation Disabled": "Traducción Deshabilitada",
  "Minimize": "Minimizar",
-  "Maximize or Restore": "Maximizar o Restaurar"
+  "Maximize or Restore": "Maximizar o Restaurar",
+  "Exit Parallel Read": "Salir de Lectura Paralela",
+  "Enter Parallel Read": "Entrar en Lectura Paralela"
 }
@@ -567,5 +567,7 @@
  "Toggle Translation": "Alternar Traduction",
  "Translation Disabled": "Traduction Désactivée",
  "Minimize": "Minimiser",
-  "Maximize or Restore": "Maximiser ou Restaurer"
+  "Maximize or Restore": "Maximiser ou Restaurer",
+  "Exit Parallel Read": "Quitter la Lecture Parallèle",
+  "Enter Parallel Read": "Entrer dans la Lecture Parallèle"
 }
@@ -563,5 +563,7 @@
  "Toggle Translation": "अनुवाद टॉगल करें",
  "Translation Disabled": "अनुवाद अक्षम",
  "Minimize": "न्यूनतम करें",
-  "Maximize or Restore": "अधिकतम या पुनर्स्थापित करें"
+  "Maximize or Restore": "अधिकतम या पुनर्स्थापित करें",
+  "Exit Parallel Read": "पैरालल रीड से बाहर निकलें",
+  "Enter Parallel Read": "पैरालल रीड में प्रवेश करें"
 }
@@ -559,5 +559,7 @@
  "Toggle Translation": "Toggel Terjemahan",
  "Translation Disabled": "Terjemahan Dinonaktifkan",
  "Minimize": "Minimalkan",
-  "Maximize or Restore": "Maksimalkan atau Pulihkan"
+  "Maximize or Restore": "Maksimalkan atau Pulihkan",
+  "Exit Parallel Read": "Keluar dari Baca Paralel",
+  "Enter Parallel Read": "Masuk ke Baca Paralel"
 }
@@ -567,5 +567,7 @@
  "Toggle Translation": "Toggel Terjemahan",
  "Translation Disabled": "Terjemahan Dinonaktifkan",
  "Minimize": "Minimalkan",
-  "Maximize or Restore": "Maksimalkan atau Pulihkan"
+  "Maximize or Restore": "Maksimalkan atau Pulihkan",
+  "Exit Parallel Read": "Esci dalla lettura parallela",
+  "Enter Parallel Read": "Entra nella lettura parallela"
 }
@@ -559,5 +559,7 @@
  "Toggle Translation": "翻訳の切り替え",
  "Translation Disabled": "翻訳が無効化されました",
  "Minimize": "最小化",
-  "Maximize or Restore": "最大化または復元"
+  "Maximize or Restore": "最大化または復元",
+  "Exit Parallel Read": "並行読書を終了",
+  "Enter Parallel Read": "並行読書に入る"
 }
@@ -559,5 +559,7 @@
  "Toggle Translation": "번역 전환",
  "Translation Disabled": "번역 비활성화",
  "Minimize": "최소화",
-  "Maximize or Restore": "최대화 또는 복원"
+  "Maximize or Restore": "최대화 또는 복원",
+  "Exit Parallel Read": "병렬 읽기 종료",
+  "Enter Parallel Read": "병렬 읽기 시작"
 }
@@ -563,5 +563,7 @@
  "Toggle Translation": "Vertaling Wisselen",
  "Translation Disabled": "Vertaling Uitgeschakeld",
  "Minimize": "Minimaliseren",
-  "Maximize or Restore": "Maximaliseren of Herstellen"
+  "Maximize or Restore": "Maximaliseren of Herstellen",
+  "Exit Parallel Read": "Parallel Lezen Afsluiten",
+  "Enter Parallel Read": "Parallel Lezen Starten"
 }
@@ -571,5 +571,7 @@
  "Toggle Translation": "Włącz/Wyłącz tłumaczenie",
  "Translation Disabled": "Tłumaczenie wyłączone",
  "Minimize": "Minimalizuj",
-  "Maximize or Restore": "Maksymalizuj lub Przywróć"
+  "Maximize or Restore": "Maksymalizuj lub Przywróć",
+  "Exit Parallel Read": "Wyjdź z czytania równoległego",
+  "Enter Parallel Read": "Wejdź w czytanie równoległe"
 }
@@ -567,5 +567,7 @@
  "Toggle Translation": "Alternar Tradução",
  "Translation Disabled": "Tradução Desativada",
  "Minimize": "Minimizar",
-  "Maximize or Restore": "Maximizar ou Restaurar"
+  "Maximize or Restore": "Maximizar ou Restaurar",
+  "Exit Parallel Read": "Sair da Leitura Paralela",
+  "Enter Parallel Read": "Entrar na Leitura Paralela"
 }
@@ -571,5 +571,7 @@
  "Toggle Translation": "Переключить перевод",
  "Translation Disabled": "Перевод отключен",
  "Minimize": "Свернуть",
-  "Maximize or Restore": "Максимизировать или восстановить"
+  "Maximize or Restore": "Максимизировать или восстановить",
+  "Exit Parallel Read": "Выйти из параллельного чтения",
+  "Enter Parallel Read": "Войти в параллельное чтение"
 }
@@ -563,5 +563,7 @@
  "Toggle Translation": "පරිවර්තනය ස්ථානය වෙනස් කරන්න",
  "Translation Disabled": "පරිවර්තනය අක්‍රීය කර ඇත",
  "Minimize": "අඩු කරන්න",
-  "Maximize or Restore": "ඉහළ නැංවීම හෝ ප්‍රතිසංස්කරණය"
+  "Maximize or Restore": "ඉහළ නැංවීම හෝ ප්‍රතිසංස්කරණය",
+  "Exit Parallel Read": "සමාන්තර කියවීමෙන් පිටවන්න",
+  "Enter Parallel Read": "සමාන්තර කියවීමේදී පිවිසෙන්න"
 }
@@ -563,5 +563,7 @@
  "Toggle Translation": "மொழிபெயர்ப்பை மாற்றவும்",
  "Translation Disabled": "மொழிபெயர்ப்பு முடக்கப்பட்டுள்ளது",
  "Minimize": "சிறிது செய்யவும்",
-  "Maximize or Restore": "அதிகரிக்கவும் அல்லது மீட்டமைக்கவும்"
+  "Maximize or Restore": "அதிகரிக்கவும் அல்லது மீட்டமைக்கவும்",
+  "Exit Parallel Read": "இணை வாசிப்பை வெளியேறு",
+  "Enter Parallel Read": "இணை வாசிப்பில் நுழையவும்"
 }
@@ -559,5 +559,7 @@
  "Toggle Translation": "เปลี่ยนการแปล",
  "Translation Disabled": "การแปลถูกปิดใช้งาน",
  "Minimize": "ย่อ",
-  "Maximize or Restore": "ขยายหรือคืนค่า"
+  "Maximize or Restore": "ขยายหรือคืนค่า",
+  "Exit Parallel Read": "ออกจากการอ่านคู่ขนาน",
+  "Enter Parallel Read": "เริ่มการอ่านคู่ขนาน"
 }
@@ -563,5 +563,7 @@
  "Toggle Translation": "Çeviriyi Değiştir",
  "Translation Disabled": "Çeviri Devre Dışı",
  "Minimize": "Küçült",
-  "Maximize or Restore": "Büyüt veya Geri Yükle"
+  "Maximize or Restore": "Büyüt veya Geri Yükle",
+  "Exit Parallel Read": "Paralel Okumadan Çık",
+  "Enter Parallel Read": "Paralel Okumaya Gir"
 }
@@ -571,5 +571,7 @@
  "Toggle Translation": "Перемкнути переклад",
  "Translation Disabled": "Переклад вимкнено",
  "Minimize": "Згорнути",
-  "Maximize or Restore": "Збільшити або відновити"
+  "Maximize or Restore": "Збільшити або відновити",
+  "Exit Parallel Read": "Вийти з паралельного читання",
+  "Enter Parallel Read": "Войти в параллельное чтение"
 }
@@ -559,5 +559,7 @@
  "Toggle Translation": "Chuyển đổi dịch thuật",
  "Translation Disabled": "Dịch thuật đã tắt",
  "Minimize": "Thu nhỏ",
-  "Maximize or Restore": "Tối đa hóa hoặc Khôi phục"
+  "Maximize or Restore": "Tối đa hóa hoặc Khôi phục",
+  "Exit Parallel Read": "Thoát Đọc Song Song",
+  "Enter Parallel Read": "Vào Đọc Song Song"
 }
@@ -559,5 +559,7 @@
  "Toggle Translation": "切换翻译",
  "Translation Disabled": "翻译已禁用",
  "Minimize": "最小化",
-  "Maximize or Restore": "最大化或还原"
+  "Maximize or Restore": "最大化或还原",
+  "Exit Parallel Read": "退出并排阅读",
+  "Enter Parallel Read": "进入并排阅读"
 }
@@ -559,5 +559,7 @@
  "Toggle Translation": "切換翻譯",
  "Translation Disabled": "翻譯已禁用",
  "Minimize": "最小化",
-  "Maximize or Restore": "最大化或還原"
+  "Maximize or Restore": "最大化或還原",
+  "Exit Parallel Read": "退出並排閱讀",
+  "Enter Parallel Read": "進入並排閱讀"
 }
@@ -20,7 +20,6 @@ const ImportMenu: React.FC<ImportMenuProps> = ({ setIsDropdownOpen, onImportBook

  return (
    <Menu
-      label={_('Import Books')}
      className={clsx(
        'dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow',
        appService?.isMobile ? 'no-triangle' : 'dropdown-center',
@@ -174,7 +174,6 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {

  return (
    <Menu
-      label={_('Settings Menu')}
      className={clsx(
        'settings-menu dropdown-content no-triangle border-base-100',
        'z-20 mt-2 max-w-[90vw] shadow-2xl',
@@ -92,10 +92,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({ setIsDropdownOpen }) => {
  };

  return (
-    <Menu
-      label={_('View Menu')}
-      className='view-menu dropdown-content no-triangle border-base-100 z-20 mt-2 shadow-2xl'
-    >
+    <Menu className='view-menu dropdown-content no-triangle border-base-100 z-20 mt-2 shadow-2xl'>
      {viewOptions.map((option) => (
        <MenuItem
          key={option.value}
@@ -24,6 +24,7 @@ import { getMaxInlineSize } from '@/utils/config';
 import { tauriHandleToggleFullScreen } from '@/utils/window';
 import { saveViewSettings } from '../utils/viewSettingsHelper';
 import MenuItem from '@/components/MenuItem';
+import Menu from '@/components/Menu';

 interface ViewMenuProps {
  bookKey: string;
@@ -146,7 +147,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
  const lastSyncTime = Math.max(config?.lastSyncedAtConfig || 0, config?.lastSyncedAtNotes || 0);

  return (
-    <div
+    <Menu
      className={clsx(
        'view-menu dropdown-content dropdown-right no-triangle z-20 mt-1 border',
        'bgcolor-base-200 border-base-200 shadow-2xl',
@@ -284,7 +285,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
        Icon={invertImgColorInDark ? MdCheck : undefined}
        onClick={() => setInvertImgColorInDark(!invertImgColorInDark)}
      />
-    </div>
+    </Menu>
  );
 };

@@ -17,6 +17,7 @@ import { setKOSyncSettingsWindowVisible } from '@/app/reader/components/KOSyncSe
 import { FIXED_LAYOUT_FORMATS } from '@/types/book';
 import useBooksManager from '../../hooks/useBooksManager';
 import MenuItem from '@/components/MenuItem';
+import Menu from '@/components/Menu';

 interface BookMenuProps {
  menuClassName?: string;
@@ -87,7 +88,7 @@ const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen })
  };

  return (
-    <div
+    <Menu
      className={clsx('book-menu dropdown-content border-base-100 z-20 shadow-2xl', menuClassName)}
    >
      <MenuItem
@@ -130,6 +131,12 @@ const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen })
            ))}
        </ul>
      </MenuItem>
+      {bookKeys.length > 1 &&
+        (parallelViews.length > 0 ? (
+          <MenuItem label={_('Exit Parallel Read')} onClick={handleUnsetParallel} />
+        ) : (
+          <MenuItem label={_('Enter Parallel Read')} onClick={handleSetParallel} />
+        ))}
      <hr className='border-base-200 my-1' />
      <MenuItem label={_('KOReader Sync')} onClick={showKoSyncSettingsWindow} />
      {settings.kosync.enabled && (
@@ -149,7 +156,7 @@ const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen })
      <hr className='border-base-200 my-1' />
      {isWebAppPlatform() && <MenuItem label={_('Download Readest')} onClick={downloadReadest} />}
      <MenuItem label={_('About Readest')} onClick={showAboutReadest} />
-    </div>
+    </Menu>
  );
 };

@@ -38,7 +38,7 @@ const TabNavigation: React.FC<{
          key={tab}
          tabIndex={0}
          role='button'
-          className='z-20 m-1.5 flex-1 cursor-pointer rounded-md p-2'
+          className='z-[11] m-1.5 flex-1 cursor-pointer rounded-md p-2'
          onClick={() => onTabChange(tab)}
          onKeyDown={(e) => {
            if (e.key === 'Enter' || e.key === ' ') {
@@ -87,9 +87,9 @@ export const AboutWindow = () => {
      boxClassName='sm:!w-[480px] sm:!max-w-screen-sm sm:h-auto'
    >
      {isOpen && (
-        <div className='about-content flex h-full flex-col items-center justify-center'>
-          <div className='flex flex-col items-center gap-2 px-8'>
-            <div className='mb-2 mt-8'>
+        <div className='about-content flex flex-col items-center justify-center'>
+          <div className='flex flex-col items-center gap-2 px-8 py-2'>
+            <div className='mb-2 mt-6'>
              <Image src='/icon.png' alt='App Logo' className='h-20 w-20' width={64} height={64} />
            </div>
            <div className='flex select-text flex-col items-center'>
@@ -121,7 +121,7 @@ export const AboutWindow = () => {
            </div>
          </div>

-          <div className='divider py-16 sm:py-2'></div>
+          <div className='divider py-12 sm:py-2'></div>

          <div className='flex flex-col items-center gap-2 px-4 text-center' dir='ltr'>
            <p className='text-neutral-content text-sm'>
@@ -3,11 +3,11 @@ import React, { useEffect, useRef } from 'react';

 interface MenuProps {
  children: React.ReactNode;
-  label: string;
  className?: string;
+  style?: React.CSSProperties;
 }

-const Menu: React.FC<MenuProps> = ({ children, className }) => {
+const Menu: React.FC<MenuProps> = ({ children, className, style }) => {
  const menuRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
@@ -26,6 +26,7 @@ const Menu: React.FC<MenuProps> = ({ children, className }) => {
      ref={menuRef}
      role='none'
      className={clsx('max-h-[calc(100vh-96px)] overflow-y-auto', className)}
+      style={style}
    >
      {children}
    </div>