release: version 0.9.41 (#1143)

* fix: footnote now should be hidden in srcdoc iframes

* fix: eliminate white flash on startup when using dark mode

* feat: rescale UI size with pixel density

.github/ISSUE_TEMPLATE/feature-request.md

@@ -7,13 +7,17 @@ assignees: ''
 ---
 
 **Does your feature request involve difficulty for you to complete a task? Please describe.**
-A clear and concise description of what the problem is. Ex. I think it takes too many steps to [...]
+
+> A clear and concise description of what the problem is. Ex. I think it takes too many steps to [...]
 
 **Describe the solution you'd like**
-A clear and concise description of what you'd like to happen.
+
+> A clear and concise description of what you'd like to happen.
 
 **Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
+
+> A clear and concise description of any alternative solutions or features you've considered.
 
 **Additional context**
-Add any additional context or screenshots about the feature request here.
+
+> Add any additional context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/report-bug.md

@@ -11,22 +11,16 @@ assignees: ''
 A clear and concise description of what the current behavior is.
 Please also add **screenshots** of the existing application.
 
-**Example:**
-
-```
-In DarkMode, when scrollbar are displayed (for example on Companies page, with enough companies in the list), we see a blank square in the bottom right corner
-[screenshot]
-```
+> **Example:**
+> In DarkMode, when scrollbar are displayed (for example on Companies page, with enough companies in the list), we see a blank square in the bottom right corner
+> [screenshot]
 
 ## Expected behavior
 
 A clear and concise description of what the expected behavior is.
 
-**Example:**
-
-```
-The blank square should be transparent (invisible)
-```
+> **Example:**
+> The blank square should be transparent (invisible)
 
 ## Technical inputs
 
@@ -34,11 +28,8 @@ Operating System:
 
 Readest Version:
 
-**Example:**
-
-```
-Operating System: macOS 14.3.1
-Readest Version: 0.9.0
-We are displaying custom scrollbars that disappear when the user is not scrolling. See ScrollWrapper.
-Probably fixable with CSS
-```
+> **Example:**
+> Operating System: Android 14 (WebView 135.0)
+> Readest Version: 0.9.0
+> We are displaying custom scrollbars that disappear when the user is not scrolling. See ScrollWrapper.
+> Probably fixable with CSS

.github/workflows/release.yml

@@ -67,6 +67,11 @@ jobs:
             release: linux
             arch: aarch64
             rust_target: aarch64-unknown-linux-gnu
+          - os: ubuntu-22.04-arm
+            release: linux
+            arch: armhf
+            rust_target: arm-unknown-linux-gnueabihf
+            args: '--target arm-unknown-linux-gnueabihf --bundles deb'
           - os: macos-latest
             release: macos
             arch: aarch64
@@ -133,11 +138,22 @@ jobs:
           key: ${{ matrix.config.os }}-${{ matrix.config.release }}-${{ matrix.config.arch }}-cargo
 
       - name: install dependencies (ubuntu only)
-        if: contains(matrix.config.os, 'ubuntu') && matrix.config.release != 'android'
+        if: contains(matrix.config.os, 'ubuntu') && matrix.config.release != 'android' && matrix.config.arch != 'armhf'
         run: |
           sudo apt-get update
           sudo apt-get install -y pkg-config libfontconfig-dev libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf xdg-utils
 
+      - name: install dependencies (ubuntu only - armhf specific)
+        if: contains(matrix.config.os, 'ubuntu') && matrix.config.arch == 'armhf'
+        run: |
+          sudo dpkg --add-architecture armhf
+          sudo apt-get update
+          sudo apt-get install -y pkg-config libfontconfig-dev:armhf libgtk-3-dev:armhf libwebkit2gtk-4.1-dev:armhf libappindicator3-dev:armhf librsvg2-dev:armhf gcc-arm-linux-gnueabihf g++-arm-linux-gnueabihf
+          echo 'PKG_CONFIG_ALLOW_CROSS=1' >> $GITHUB_ENV
+          echo 'PKG_CONFIG_PATH=/usr/lib/arm-linux-gnueabihf/pkgconfig:/usr/share/pkgconfig' >> $GITHUB_ENV
+          echo 'PKG_CONFIG_SYSROOT_DIR=/usr/arm-linux-gnueabihf' >> $GITHUB_ENV
+          echo 'CARGO_TARGET_ARM_UNKNOWN_LINUX_GNUEABIHF_LINKER=arm-linux-gnueabihf-gcc' >> $GITHUB_ENV
+
       - name: create .env.local file for Next.js
         run: |
           echo "NEXT_PUBLIC_POSTHOG_KEY=${{ secrets.NEXT_PUBLIC_POSTHOG_KEY }}" >> .env.local

.gitmodules

@@ -3,4 +3,4 @@
 	url = https://github.com/readest/foliate-js.git
 [submodule "packages/tauri"]
 	path = packages/tauri
-	url = https://github.com/tauri-apps/tauri.git
+	url = https://github.com/readest/tauri.git

apps/readest-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readest/readest-app",
-  "version": "0.9.38",
+  "version": "0.9.41",
   "private": true,
   "scripts": {
     "dev": "dotenv -e .env.tauri -- next dev",
@@ -42,19 +42,19 @@
     "@supabase/auth-ui-react": "^0.4.7",
     "@supabase/auth-ui-shared": "^0.1.8",
     "@supabase/supabase-js": "^2.47.7",
-    "@tauri-apps/api": "2.4.1",
+    "@tauri-apps/api": "2.5.0",
     "@tauri-apps/plugin-cli": "^2.2.0",
     "@tauri-apps/plugin-deep-link": "^2.2.1",
     "@tauri-apps/plugin-dialog": "^2.2.1",
     "@tauri-apps/plugin-fs": "^2.2.1",
     "@tauri-apps/plugin-haptics": "^2.2.4",
     "@tauri-apps/plugin-http": "^2.4.3",
-    "@tauri-apps/plugin-log": "^2.3.1",
+    "@tauri-apps/plugin-log": "^2.4.0",
     "@tauri-apps/plugin-opener": "^2.2.6",
     "@tauri-apps/plugin-os": "^2.2.1",
     "@tauri-apps/plugin-process": "^2.2.1",
     "@tauri-apps/plugin-shell": "~2.2.1",
-    "@tauri-apps/plugin-updater": "^2.7.0",
+    "@tauri-apps/plugin-updater": "^2.7.1",
     "@zip.js/zip.js": "^2.7.53",
     "aws4fetch": "^1.0.20",
     "clsx": "^2.1.1",
@@ -80,7 +80,7 @@
   },
   "devDependencies": {
     "@opennextjs/cloudflare": "^0.5.12",
-    "@tauri-apps/cli": "2.4.1",
+    "@tauri-apps/cli": "2.5.0",
     "@types/cors": "^2.8.17",
     "@types/cssbeautify": "^0.3.5",
     "@types/node": "^22.10.1",

apps/readest-app/public/locales/ar/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "تمييز",
   "Horizontal Direction": "الاتجاه الأفقي",
   "Hyphenation": "الواصلة",
-  "Identifier:": "المعرف:",
   "Import Books": "استيراد الكتب",
   "Language:": "اللغة:",
   "Layout": "التخطيط",
@@ -111,7 +110,6 @@
   "Unknown": "غير معروف",
   "Untitled": "بدون عنوان",
   "Updated:": "تم التحديث:",
-  "User avatar": "صورة المستخدم",
   "Version {{version}}": "الإصدار {{version}}",
   "Vertical Direction": "الاتجاه العمودي",
   "Welcome to your library. You can import your books here and read them anytime.": "مرحبًا بكم في مكتبتكم. يمكنكم استيراد كتبكم هنا وقراءتها في أي وقت.",
@@ -299,5 +297,15 @@
   "Link Color": "لون الرابط",
   "Volume Keys for Page Flip": "مفاتيح الصوت لتقليب الصفحات",
   "Clicks for Page Flip": "نقرات لتقليب الصفحات",
-  "Swap Clicks Area": "تبديل منطقة النقرات"
+  "Swap Clicks Area": "تبديل منطقة النقرات",
+  "Screen": "الشاشة",
+  "Orientation": "الاتجاه",
+  "Portrait": "العمودي",
+  "Landscape": "الأفقي",
+  "Open Last Book on Start": "فتح آخر كتاب عند البدء",
+  "Checking for updates...": "جارٍ التحقق من التحديثات...",
+  "Error checking for updates": "خطأ في التحقق من التحديثات",
+  "Details": "التفاصيل",
+  "Cancel Selection": "إلغاء التحديد",
+  "File Size:": "حجم الملف:"
 }

apps/readest-app/public/locales/de/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "Hervorheben",
   "Horizontal Direction": "Horizontale Richtung",
   "Hyphenation": "Silbentrennung",
-  "Identifier:": "Kennung:",
   "Import Books": "Bücher importieren",
   "Language:": "Sprache:",
   "Layout": "Layout",
@@ -111,7 +110,6 @@
   "Unknown": "Unbekannt",
   "Untitled": "Ohne Titel",
   "Updated:": "Aktualisiert:",
-  "User avatar": "Benutzer-Avatar",
   "Version {{version}}": "Version {{version}}",
   "Vertical Direction": "Vertikale Richtung",
   "Welcome to your library. You can import your books here and read them anytime.": "Willkommen in Ihrer Bibliothek. Sie können hier Ihre Bücher importieren und jederzeit lesen.",
@@ -135,7 +133,7 @@
   "Book downloaded: {{title}}": "Buch heruntergeladen: {{title}}",
   "Failed to download book: {{title}}": "Fehler beim Herunterladen des Buches: {{title}}",
   "Upload Book": "Buch hochladen",
-  "Auto Upload Books to Cloud": "Bücher automatisch in die Cloud hochladen",
+  "Auto Upload Books to Cloud": "Bücher automatisch hochladen",
   "{{percentage}}% of Cloud Storage Used.": "{{percentage}}% des Cloud-Speichers verwendet.",
   "Storage": "Speicher",
   "Book deleted: {{title}}": "Buch gelöscht: {{title}}",
@@ -299,5 +297,15 @@
   "Link Color": "Linkfarbe",
   "Volume Keys for Page Flip": "Volumen-Tasten für Seitenwechsel",
   "Clicks for Page Flip": "Tippen zum Blättern",
-  "Swap Clicks Area": "Tippbereiche tauschen"
+  "Swap Clicks Area": "Tippbereiche tauschen",
+  "Screen": "Bildschirm",
+  "Orientation": "Orientierung",
+  "Portrait": "Hochformat",
+  "Landscape": "Querformat",
+  "Open Last Book on Start": "Letztes Buch beim Start öffnen",
+  "Checking for updates...": "Auf Updates prüfen...",
+  "Error checking for updates": "Fehler beim Überprüfen auf Updates",
+  "Details": "Details",
+  "Cancel Selection": "Auswahl abbrechen",
+  "File Size:": "Dateigröße:"
 }

apps/readest-app/public/locales/el/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "Επισήμανση",
   "Horizontal Direction": "Οριζόντια κατεύθυνση",
   "Hyphenation": "Συλλαβισμός",
-  "Identifier:": "Αναγνωριστικό:",
   "Import Books": "Εισαγωγή βιβλίων",
   "Language:": "Γλώσσα:",
   "Layout": "Διάταξη",
@@ -111,7 +110,6 @@
   "Unknown": "Άγνωστο",
   "Untitled": "Χωρίς τίτλο",
   "Updated:": "Ενημερώθηκε:",
-  "User avatar": "Εικόνα χρήστη",
   "Version {{version}}": "Έκδοση {{version}}",
   "Vertical Direction": "Κάθετη κατεύθυνση",
   "Welcome to your library. You can import your books here and read them anytime.": "Καλώς ήρθατε στη βιβλιοθήκη σας. Μπορείτε να εισάγετε τα βιβλία σας εδώ και να τα διαβάσετε οποιαδήποτε στιγμή.",
@@ -135,12 +133,12 @@
   "Book downloaded: {{title}}": "Το βιβλίο με τίτλο {{title}} κατέβηκε",
   "Failed to download book: {{title}}": "Αποτυχία λήψης βιβλίου: {{title}}",
   "Upload Book": "Ανέβασμα βιβλίου",
-  "Auto Upload Books to Cloud": "Αυτόματο ανέβασμα βιβλίων στο cloud",
+  "Auto Upload Books to Cloud": "Αυτόματη αποθήκευση στο cloud",
   "{{percentage}}% of Cloud Storage Used.": "{{percentage}}% της αποθήκευσης στο cloud χρησιμοποιήθηκε.",
   "Storage": "Αποθήκευση",
   "Book deleted: {{title}}": "Το βιβλίο με τίτλο {{title}} διαγράφηκε",
   "Failed to delete book: {{title}}": "Αποτυχία διαγραφής βιβλίου: {{title}}",
-  "Check Updates on Start": "Έλεγχος ενημερώσεων κατά την εκκίνηση",
+  "Check Updates on Start": "Αυτόματος έλεγχος ενημερώσεων",
   "Insufficient storage quota": "Ανεπαρκές όριο αποθήκευσης",
   "Font Weight": "Βάρος γραμματοσειράς",
   "Line Spacing": "Διάκενο γραμμών",
@@ -297,7 +295,17 @@
   "Grid": "Πλέγμα",
   "(from 'As You Like It', Act II)": "('Όπως σας αρέσει', Πράξη II)",
   "Link Color": "Χρώμα συνδέσμου",
-  "Volume Keys for Page Flip": "Πλήκτρα έντασης για ανατροπή σελίδας",
+  "Volume Keys for Page Flip": "Ανατροπή με πλήκτρα έντασης",
   "Clicks for Page Flip": "Κλικ για ανατροπή σελίδας",
-  "Swap Clicks Area": "Ανταλλαγή περιοχής κλικ"
+  "Swap Clicks Area": "Ανταλλαγή περιοχής κλικ",
+  "Screen": "Οθόνη",
+  "Orientation": "Προσανατολισμός",
+  "Portrait": "Πορτραίτο",
+  "Landscape": "Τοπίο",
+  "Open Last Book on Start": "Άνοιγμα τελευταίου βιβλίου",
+  "Checking for updates...": "Έλεγχος για ενημερώσεις...",
+  "Error checking for updates": "Σφάλμα κατά τον έλεγχο για ενημερώσεις",
+  "Details": "Πληρ.",
+  "Cancel Selection": "Ακύρωση επιλογής",
+  "File Size:": "Μέγεθος αρχείου:"
 }

apps/readest-app/public/locales/es/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "Resaltar",
   "Horizontal Direction": "Dirección horizontal",
   "Hyphenation": "Guionización",
-  "Identifier:": "Identificador:",
   "Import Books": "Importar libros",
   "Language:": "Idioma:",
   "Layout": "Diseño",
@@ -111,7 +110,6 @@
   "Unknown": "Desconocido",
   "Untitled": "Sin título",
   "Updated:": "Actualizado:",
-  "User avatar": "Avatar del usuario",
   "Version {{version}}": "Versión {{version}}",
   "Vertical Direction": "Dirección vertical",
   "Welcome to your library. You can import your books here and read them anytime.": "Bienvenido a tu biblioteca. Puedes importar tus libros aquí y leerlos en cualquier momento.",
@@ -299,5 +297,15 @@
   "Link Color": "Color del enlace",
   "Volume Keys for Page Flip": "Botones de volumen para pasar página",
   "Clicks for Page Flip": "Toques para pasar página",
-  "Swap Clicks Area": "Invertir zonas de toque"
+  "Swap Clicks Area": "Invertir zonas de toque",
+  "Screen": "Pantalla",
+  "Orientation": "Orientación",
+  "Portrait": "Vertical",
+  "Landscape": "Horizontal",
+  "Open Last Book on Start": "Abrir último libro al iniciar",
+  "Checking for updates...": "Comprobando actualizaciones...",
+  "Error checking for updates": "Error al comprobar actualizaciones",
+  "Details": "Detalles",
+  "Cancel Selection": "Cancelar selección",
+  "File Size:": "Peso del archivo:"
 }

apps/readest-app/public/locales/fr/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "Surligner",
   "Horizontal Direction": "Direction horizontale",
   "Hyphenation": "Césure",
-  "Identifier:": "Identifiant :",
   "Import Books": "Importer des livres",
   "Language:": "Langue :",
   "Layout": "Mise en page",
@@ -111,7 +110,6 @@
   "Unknown": "Inconnu",
   "Untitled": "Sans titre",
   "Updated:": "Mis à jour :",
-  "User avatar": "Avatar de l'utilisateur",
   "Version {{version}}": "Version {{version}}",
   "Vertical Direction": "Direction verticale",
   "Welcome to your library. You can import your books here and read them anytime.": "Bienvenue dans votre bibliothèque. Vous pouvez importer vos livres ici et les lire à tout moment.",
@@ -299,5 +297,15 @@
   "Link Color": "Couleur du lien",
   "Volume Keys for Page Flip": "Boutons volume pour tourner la page",
   "Clicks for Page Flip": "Taps pour tourner la page",
-  "Swap Clicks Area": "Inverser zones de tap"
+  "Swap Clicks Area": "Inverser zones de tap",
+  "Screen": "Écran",
+  "Orientation": "Orientation",
+  "Portrait": "Portrait",
+  "Landscape": "Paysage",
+  "Open Last Book on Start": "Ouvrir le dernier livre au démarrage",
+  "Checking for updates...": "Vérification des mises à jour...",
+  "Error checking for updates": "Erreur lors de la vérification des mises à jour",
+  "Details": "Détails",
+  "Cancel Selection": "Annuler la sélection",
+  "File Size:": "Taille du fichier :"
 }

apps/readest-app/public/locales/hi/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "हाइलाइट",
   "Horizontal Direction": "क्षैतिज दिशा",
   "Hyphenation": "हाइफ़नेशन",
-  "Identifier:": "पहचानकर्ता:",
   "Import Books": "पुस्तकें आयात करें",
   "Language:": "भाषा:",
   "Layout": "लेआउट",
@@ -111,7 +110,6 @@
   "Unknown": "अज्ञात",
   "Untitled": "शीर्षकहीन",
   "Updated:": "अपडेट किया गया:",
-  "User avatar": "उपयोगकर्ता अवतार",
   "Version {{version}}": "संस्करण {{version}}",
   "Vertical Direction": "ऊर्ध्वाधर दिशा",
   "Welcome to your library. You can import your books here and read them anytime.": "आपकी लाइब्रेरी में आपका स्वागत है। आप यहां अपनी पुस्तकें आयात कर सकते हैं और कभी भी पढ़ सकते हैं।",
@@ -299,5 +297,15 @@
   "Link Color": "लिंक रंग",
   "Volume Keys for Page Flip": "पृष्ठ फ़्लिप के लिए वॉल्यूम कुंजियाँ",
   "Clicks for Page Flip": "पृष्ठ फ़्लिप के लिए क्लिक करें",
-  "Swap Clicks Area": "क्लिक क्षेत्र स्वैप करें"
+  "Swap Clicks Area": "क्लिक क्षेत्र स्वैप करें",
+  "Screen": "स्क्रीन",
+  "Orientation": "अवयव",
+  "Portrait": "पोर्ट्रेट",
+  "Landscape": "लैंडस्केप",
+  "Open Last Book on Start": "शुरू में अंतिम पुस्तक खोलें",
+  "Checking for updates...": "अपडेट की जांच कर रहा है...",
+  "Error checking for updates": "अपडेट की जांच करते समय त्रुटि",
+  "Details": "विवरण",
+  "Cancel Selection": "चयन रद्द करें",
+  "File Size:": "फ़ाइल आकार:"
 }

apps/readest-app/public/locales/id/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "Sorot",
   "Horizontal Direction": "Arah Horizontal",
   "Hyphenation": "Pemenggalan Kata",
-  "Identifier:": "Pengenal:",
   "Import Books": "Impor Buku",
   "Language:": "Bahasa:",
   "Layout": "Tata Letak",
@@ -111,7 +110,6 @@
   "Unknown": "Tidak Diketahui",
   "Untitled": "Tanpa Judul",
   "Updated:": "Diperbarui:",
-  "User avatar": "Avatar Pengguna",
   "Version {{version}}": "Versi {{version}}",
   "Vertical Direction": "Arah Vertikal",
   "Welcome to your library. You can import your books here and read them anytime.": "Selamat datang di perpustakaan Anda. Anda dapat mengimpor buku-buku Anda di sini dan membacanya kapan saja.",
@@ -299,5 +297,15 @@
   "Link Color": "Warna Tautan",
   "Volume Keys for Page Flip": "Volume Keys untuk Pembalikan Halaman",
   "Clicks for Page Flip": "Klik untuk Pembalikan Halaman",
-  "Swap Clicks Area": "Area Klik Tukar"
+  "Swap Clicks Area": "Area Klik Tukar",
+  "Screen": "Screen",
+  "Orientation": "Orientasi",
+  "Portrait": "Potret",
+  "Landscape": "Lanskap",
+  "Open Last Book on Start": "Buka Buku Terakhir saat Memulai",
+  "Checking for updates...": "Memeriksa pembaruan...",
+  "Error checking for updates": "Kesalahan saat memeriksa pembaruan",
+  "Details": "Detail",
+  "Cancel Selection": "Batalkan Pilihan",
+  "File Size:": "Ukuran File:"
 }

apps/readest-app/public/locales/it/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "Evidenzia",
   "Horizontal Direction": "Direzione orizzontale",
   "Hyphenation": "Sillabazione",
-  "Identifier:": "Identificatore:",
   "Import Books": "Importa libri",
   "Language:": "Lingua:",
   "Layout": "Layout",
@@ -111,7 +110,6 @@
   "Unknown": "Sconosciuto",
   "Untitled": "Senza titolo",
   "Updated:": "Aggiornato:",
-  "User avatar": "Avatar utente",
   "Version {{version}}": "Versione {{version}}",
   "Vertical Direction": "Direzione verticale",
   "Welcome to your library. You can import your books here and read them anytime.": "Benvenuto nella tua biblioteca. Puoi importare i tuoi libri qui e leggerli in qualsiasi momento.",
@@ -299,5 +297,15 @@
   "Link Color": "Colore link",
   "Volume Keys for Page Flip": "Tasti volume per girare pagina",
   "Clicks for Page Flip": "Clic per girare pagina",
-  "Swap Clicks Area": "Inverti area dei clic"
+  "Swap Clicks Area": "Inverti area dei clic",
+  "Screen": "Schermo",
+  "Orientation": "Orientamento",
+  "Portrait": "Ritratto",
+  "Landscape": "Paesaggio",
+  "Open Last Book on Start": "Apri ultimo libro all'avvio",
+  "Checking for updates...": "Controllo aggiornamenti...",
+  "Error checking for updates": "Errore durante il controllo degli aggiornamenti",
+  "Details": "Dettagli",
+  "Cancel Selection": "Annulla selezione",
+  "File Size:": "Dimensione file:"
 }

apps/readest-app/public/locales/ja/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "ハイライト",
   "Horizontal Direction": "横書",
   "Hyphenation": "ハイフネーション",
-  "Identifier:": "識別子：",
   "Import Books": "書籍をインポート",
   "Language:": "言語：",
   "Layout": "レイアウト",
@@ -111,7 +110,6 @@
   "Unknown": "不明",
   "Untitled": "無題",
   "Updated:": "更新日：",
-  "User avatar": "ユーザーアバター",
   "Version {{version}}": "バージョン {{version}}",
   "Vertical Direction": "縦書",
   "Welcome to your library. You can import your books here and read them anytime.": "ライブラリーへようこそ。ここに書籍をインポートして、いつでも読むことができます。",
@@ -299,5 +297,15 @@
   "Link Color": "リンクカラー",
   "Volume Keys for Page Flip": "音量キーでページめくり",
   "Clicks for Page Flip": "タップでページめくり",
-  "Swap Clicks Area": "タップ領域を入れ替え"
+  "Swap Clicks Area": "タップ領域を入れ替え",
+  "Screen": "画面",
+  "Orientation": "向き",
+  "Portrait": "縦",
+  "Landscape": "横",
+  "Open Last Book on Start": "開始時に最後の書籍を開く",
+  "Checking for updates...": "更新を確認中...",
+  "Error checking for updates": "更新の確認中にエラーが発生しました",
+  "Details": "詳細",
+  "Cancel Selection": "選択をキャンセル",
+  "File Size:": "ファイルサイズ："
 }

apps/readest-app/public/locales/ko/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "하이라이트",
   "Horizontal Direction": "수평 방향",
   "Hyphenation": "하이픈 넣기",
-  "Identifier:": "식별자:",
   "Import Books": "책 가져오기",
   "Language:": "언어:",
   "Layout": "레이아웃",
@@ -111,7 +110,6 @@
   "Unknown": "알 수 없음",
   "Untitled": "제목 없음",
   "Updated:": "업데이트일:",
-  "User avatar": "사용자 아바타",
   "Version {{version}}": "버전 {{version}}",
   "Vertical Direction": "수직 방향",
   "Welcome to your library. You can import your books here and read them anytime.": "내 서재에 오신 것을 환영합니다. 여기에서 책을 가져와 언제든지 읽을 수 있습니다.",
@@ -299,5 +297,15 @@
   "Link Color": "링크 색상",
   "Volume Keys for Page Flip": "페이지 넘김을 위한 볼륨 키",
   "Clicks for Page Flip": "페이지 넘김을 위한 클릭",
-  "Swap Clicks Area": "클릭 영역 교환"
+  "Swap Clicks Area": "클릭 영역 교환",
+  "Screen": "화면",
+  "Orientation": "방향",
+  "Portrait": "세로",
+  "Landscape": "가로",
+  "Open Last Book on Start": "시작 시 마지막 책 열기",
+  "Checking for updates...": "업데이트 확인 중...",
+  "Error checking for updates": "업데이트 확인 중 오류 발생",
+  "Details": "세부정보",
+  "Cancel Selection": "선택 취소",
+  "File Size:": "파일 크기:"
 }

apps/readest-app/public/locales/pl/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "Zaznacz",
   "Horizontal Direction": "Kierunek poziomy",
   "Hyphenation": "Dzielenie wyrazów",
-  "Identifier:": "Identyfikator:",
   "Import Books": "Importuj książki",
   "Language:": "Język:",
   "Layout": "Układ",
@@ -111,7 +110,6 @@
   "Unknown": "Nieznane",
   "Untitled": "Bez tytułu",
   "Updated:": "Zaktualizowano:",
-  "User avatar": "Awatar użytkownika",
   "Version {{version}}": "Wersja {{version}}",
   "Vertical Direction": "Kierunek pionowy",
   "Welcome to your library. You can import your books here and read them anytime.": "Witaj w swojej bibliotece. Możesz tutaj zaimportować swoje książki i czytać je w dowolnym momencie.",
@@ -299,5 +297,15 @@
   "Link Color": "Kolor linku",
   "Volume Keys for Page Flip": "Klucze głośności do przewracania stron",
   "Clicks for Page Flip": "Kliknięcia do przewracania stron",
-  "Swap Clicks Area": "Zamień obszar kliknięcia"
+  "Swap Clicks Area": "Zamień obszar kliknięcia",
+  "Screen": "Ekran",
+  "Orientation": "Orientacja",
+  "Portrait": "Portret",
+  "Landscape": "Krajobraz",
+  "Open Last Book on Start": "Otwórz ostatnią książkę przy starcie",
+  "Checking for updates...": "Sprawdzanie aktualizacji...",
+  "Error checking for updates": "Błąd podczas sprawdzania aktualizacji",
+  "Details": "Szczegóły",
+  "Cancel Selection": "Anuluj zaznaczenie",
+  "File Size:": "Rozmiar pliku:"
 }

apps/readest-app/public/locales/pt/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "Destaque",
   "Horizontal Direction": "Direção Horizontal",
   "Hyphenation": "Hifenização",
-  "Identifier:": "Identificador:",
   "Import Books": "Importar Livros",
   "Language:": "Idioma:",
   "Layout": "Layout",
@@ -111,7 +110,6 @@
   "Unknown": "Desconhecido",
   "Untitled": "Sem Título",
   "Updated:": "Atualizado:",
-  "User avatar": "Avatar do usuário",
   "Version {{version}}": "Versão {{version}}",
   "Vertical Direction": "Direção Vertical",
   "Welcome to your library. You can import your books here and read them anytime.": "Bem-vindo à sua biblioteca. Você pode importar seus livros aqui e lê-los a qualquer momento.",
@@ -299,5 +297,15 @@
   "Link Color": "Cor do Link",
   "Volume Keys for Page Flip": "Teclas de Volume para Virar Página",
   "Clicks for Page Flip": "Cliques para Virar Página",
-  "Swap Clicks Area": "Trocar Área de Cliques"
+  "Swap Clicks Area": "Trocar Área de Cliques",
+  "Screen": "Tela",
+  "Orientation": "Orientação",
+  "Portrait": "Retrato",
+  "Landscape": "Paisagem",
+  "Open Last Book on Start": "Abrir o Último Livro ao Iniciar",
+  "Checking for updates...": "Verificando atualizações...",
+  "Error checking for updates": "Erro ao verificar atualizações",
+  "Details": "Detalhes",
+  "Cancel Selection": "Cancelar Seleção",
+  "File Size:": "Tamanho do arquivo:"
 }

apps/readest-app/public/locales/ru/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "Выделить",
   "Horizontal Direction": "Горизонтальное направление",
   "Hyphenation": "Перенос слов",
-  "Identifier:": "Идентификатор:",
   "Import Books": "Импорт книг",
   "Language:": "Язык:",
   "Layout": "Макет",
@@ -111,7 +110,6 @@
   "Unknown": "Неизвестно",
   "Untitled": "Без названия",
   "Updated:": "Обновлено:",
-  "User avatar": "Аватар пользователя",
   "Version {{version}}": "Версия {{version}}",
   "Vertical Direction": "Вертикальное направление",
   "Welcome to your library. You can import your books here and read them anytime.": "Добро пожаловать в вашу библиотеку. Вы можете импортировать сюда книги и читать их в любое время.",
@@ -299,5 +297,15 @@
   "Link Color": "Цвет ссылки",
   "Volume Keys for Page Flip": "Клавиши громкости для перелистывания страниц",
   "Clicks for Page Flip": "Клики для перелистывания страниц",
-  "Swap Clicks Area": "Переключить область кликов"
+  "Swap Clicks Area": "Переключить область кликов",
+  "Screen": "Экран",
+  "Orientation": "Ориентация",
+  "Portrait": "Портрет",
+  "Landscape": "Ландшафт",
+  "Open Last Book on Start": "Открыть последнюю книгу при запуске",
+  "Checking for updates...": "Проверка обновлений...",
+  "Error checking for updates": "Ошибка при проверке обновлений",
+  "Details": "Инфо",
+  "Cancel Selection": "Отменить выбор",
+  "File Size:": "Размер файла:"
 }

apps/readest-app/public/locales/tr/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "Vurgula",
   "Horizontal Direction": "Yatay Yön",
   "Hyphenation": "Heceleme",
-  "Identifier:": "Tanımlayıcı:",
   "Import Books": "Kitapları İçe Aktar",
   "Language:": "Dil:",
   "Layout": "Düzen",
@@ -111,7 +110,6 @@
   "Unknown": "Bilinmiyor",
   "Untitled": "Başlıksız",
   "Updated:": "Güncellendi:",
-  "User avatar": "Kullanıcı avatarı",
   "Version {{version}}": "Sürüm {{version}}",
   "Vertical Direction": "Dikey Yön",
   "Welcome to your library. You can import your books here and read them anytime.": "Kütüphanenize hoş geldiniz. Buradan kitaplarınızı içe aktarabilir ve istediğiniz zaman okuyabilirsiniz.",
@@ -299,5 +297,15 @@
   "Link Color": "Bağlantı Rengi",
   "Volume Keys for Page Flip": "Sayfa Çevirme için Ses Seviyesi Tuşları",
   "Clicks for Page Flip": "Sayfa Çevirme için Tıklamalar",
-  "Swap Clicks Area": "Tıklama Alanını Değiştir"
+  "Swap Clicks Area": "Tıklama Alanını Değiştir",
+  "Screen": "Ekran",
+  "Orientation": "Yönlendirme",
+  "Portrait": "Portre",
+  "Landscape": "Yatay",
+  "Open Last Book on Start": "Açılışta Son Kitabı Aç",
+  "Checking for updates...": "Yenilikler kontrol ediliyor...",
+  "Error checking for updates": "Güncellemeleri kontrol ederken hata oluştu",
+  "Details": "Detaylar",
+  "Cancel Selection": "Işaretlemeyi İptal Et",
+  "File Size:": "Dosya Boyutu:"
 }

apps/readest-app/public/locales/uk/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "Виділення",
   "Horizontal Direction": "Горизонтальний напрямок",
   "Hyphenation": "Перенесення слів",
-  "Identifier:": "Ідентифікатор:",
   "Import Books": "Імпортувати книги",
   "Language:": "Мова:",
   "Layout": "Макет",
@@ -111,7 +110,6 @@
   "Unknown": "Невідомо",
   "Untitled": "Без назви",
   "Updated:": "Оновлено:",
-  "User avatar": "Аватар користувача",
   "Version {{version}}": "Версія {{version}}",
   "Vertical Direction": "Вертикальний напрямок",
   "Welcome to your library. You can import your books here and read them anytime.": "Ласкаво просимо до вашої бібліотеки. Ви можете імпортувати сюди свої книги та читати їх будь-коли.",
@@ -299,5 +297,15 @@
   "Link Color": "Колір посилання",
   "Volume Keys for Page Flip": "Клавіші гучності для перевороту сторінки",
   "Clicks for Page Flip": "Клацання для перевороту сторінки",
-  "Swap Clicks Area": "Змінити область клацання"
+  "Swap Clicks Area": "Змінити область клацання",
+  "Screen": "Екран",
+  "Orientation": "Орієнтація",
+  "Portrait": "Портрет",
+  "Landscape": "Ландшафт",
+  "Open Last Book on Start": "Відкрити останню книгу при запуску",
+  "Checking for updates...": "Перевірка наявності оновлень...",
+  "Error checking for updates": "Помилка перевірки наявності оновлень",
+  "Details": "Деталі",
+  "Cancel Selection": "Скасувати вибір",
+  "File Size:": "Розмір файлу:"
 }

apps/readest-app/public/locales/vi/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "Đánh dấu",
   "Horizontal Direction": "Hướng ngang",
   "Hyphenation": "Gạch nối từ",
-  "Identifier:": "Định danh:",
   "Import Books": "Nhập sách",
   "Language:": "Ngôn ngữ:",
   "Layout": "Bố cục",
@@ -111,7 +110,6 @@
   "Unknown": "Không xác định",
   "Untitled": "Không có tiêu đề",
   "Updated:": "Cập nhật:",
-  "User avatar": "Ảnh đại diện",
   "Version {{version}}": "Phiên bản {{version}}",
   "Vertical Direction": "Hướng dọc",
   "Welcome to your library. You can import your books here and read them anytime.": "Chào mừng đến với thư viện của bạn. Bạn có thể nhập sách vào đây và đọc bất cứ lúc nào.",
@@ -299,5 +297,15 @@
   "Link Color": "Màu liên kết",
   "Volume Keys for Page Flip": "Phím âm lượng để lật trang",
   "Clicks for Page Flip": "Nhấp để lật trang",
-  "Swap Clicks Area": "Đổi khu vực nhấp"
+  "Swap Clicks Area": "Đổi khu vực nhấp",
+  "Screen": "Màn hình",
+  "Orientation": "Định hướng",
+  "Portrait": "Chân dung",
+  "Landscape": "Phong cảnh",
+  "Open Last Book on Start": "Mở sách cuối cùng khi khởi động",
+  "Checking for updates...": "Đang kiểm tra cập nhật...",
+  "Error checking for updates": "Lỗi khi kiểm tra cập nhật",
+  "Details": "Chi tiết",
+  "Cancel Selection": "Hủy chọn",
+  "File Size:": "Kích thước tệp:"
 }

apps/readest-app/public/locales/zh-CN/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "划线",
   "Horizontal Direction": "横排",
   "Hyphenation": "断字",
-  "Identifier:": "识别码",
   "Import Books": "导入书籍",
   "Language:": "语言",
   "Layout": "布局",
@@ -111,7 +110,6 @@
   "Unknown": "未知",
   "Untitled": "无标题",
   "Updated:": "更新日期",
-  "User avatar": "用户头像",
   "Version {{version}}": "版本 {{version}}",
   "Vertical Direction": "竖排",
   "Welcome to your library. You can import your books here and read them anytime.": "书库空空如也，您可以导入您的书籍并随时阅读。",
@@ -299,5 +297,15 @@
   "Link Color": "链接颜色",
   "Volume Keys for Page Flip": "音量键翻页",
   "Clicks for Page Flip": "点击翻页",
-  "Swap Clicks Area": "交换点击区域"
+  "Swap Clicks Area": "交换点击区域",
+  "Screen": "屏幕",
+  "Orientation": "屏幕方向",
+  "Portrait": "竖屏",
+  "Landscape": "横屏",
+  "Open Last Book on Start": "启动时打开上次阅读的书籍",
+  "Checking for updates...": "检查更新中...",
+  "Error checking for updates": "检查更新时出错",
+  "Details": "详情",
+  "Cancel Selection": "取消选择",
+  "File Size:": "文件大小"
 }

apps/readest-app/public/locales/zh-TW/translation.json

@@ -50,7 +50,6 @@
   "Highlight": "劃線",
   "Horizontal Direction": "橫排",
   "Hyphenation": "斷字",
-  "Identifier:": "識別碼",
   "Import Books": "導入書籍",
   "Language:": "語言",
   "Layout": "版面",
@@ -111,7 +110,6 @@
   "Unknown": "未知",
   "Untitled": "無標題",
   "Updated:": "更新日期",
-  "User avatar": "用戶頭像",
   "Version {{version}}": "版本 {{version}}",
   "Vertical Direction": "豎排",
   "Welcome to your library. You can import your books here and read them anytime.": "書庫空空如也，您可以導入您的書籍並隨時閱讀。",
@@ -299,5 +297,15 @@
   "Link Color": "連結顏色",
   "Volume Keys for Page Flip": "音量鍵翻頁",
   "Clicks for Page Flip": "點擊翻頁",
-  "Swap Clicks Area": "交換點擊區域"
+  "Swap Clicks Area": "交換點擊區域",
+  "Screen": "螢幕",
+  "Orientation": "螢幕方向",
+  "Portrait": "豎屏",
+  "Landscape": "橫屏",
+  "Open Last Book on Start": "啟動時打開上次閱讀的書籍",
+  "Checking for updates...": "檢查更新中...",
+  "Error checking for updates": "檢查更新時出錯",
+  "Details": "詳情",
+  "Cancel Selection": "取消選擇",
+  "File Size:": "檔案大小"
 }

apps/readest-app/release-notes.json

@@ -1,5 +1,46 @@
 {
   "releases": {
+    "0.9.41": {
+      "date": "2025-05-13",
+      "notes": [
+        "Improved UI and layout on mobile devices",
+        "Avatar images are now cached for offline use",
+        "Book file size is now displayed in the book details view",
+        "Update status is now correctly shown in the About window",
+        "TTS control positioning improved for notebook and RTL modes",
+        "TXT files are segmented by paragraph count if no chapter titles are found",
+        "Android: App now respects system auto-rotation settings",
+        "Linux: Updater is disabled on Linux when not using AppImage",
+        "Linux: Added support for Linux ARMHF builds",
+        "CSS: Resolved layout and color issues caused by hardcoded CSS"
+      ]
+    },
+    "0.9.40": {
+      "date": "2025-05-08",
+      "notes": [
+        "Prevented oversized images from causing layout issues",
+        "Resolved issue with transient navigation bar on Android 9",
+        "Action bar now closes properly when the footbar is dismissed",
+        "Smoother experience when expanding Table of Contents sections",
+        "Reverted unintended style overrides"
+      ]
+    },
+    "0.9.39": {
+      "date": "2025-05-07",
+      "notes": [
+        "Enhanced Navigation: Added location information to the table of contents",
+        "Enhanced Navigation: Larger touch targets for table of contents expansion icons",
+        "Screen Orientation Lock: You can now lock your device's screen orientation when reading",
+        "Quick Access to Recent Books: Option to automatically open your last read book when starting the app",
+        "Better Language Support: Improved handling of CJK characters in search",
+        "Enhanced Text-to-Speech: More accurate language detection for TTS",
+        "Enhanced Text-to-Speech: Text-to-Speech now maintains your position in scroll mode",
+        "Enhanced Annotations: Better handling of annotations with ruby elements in Japanese books",
+        "Smoother Scrolling: We've made continuous scrolling more reliable for a seamless reading experience",
+        "Compact View: Reading view is more compact when header and footer are hidden",
+        "TXT Parsing: More robust handling of TXT book format"
+      ]
+    },
     "0.9.38": {
       "date": "2025-04-29",
       "notes": [

apps/readest-app/src-tauri/Cargo.toml

@@ -31,9 +31,9 @@ reqwest = { version = "0.12", default-features = false, features = [
   "stream",
 ] }
 # FIXME: remove the devtools feature in production
-tauri = { version = "2.4.1", features = [ "protocol-asset", "devtools"] }
+tauri = { version = "2.5.1", features = [ "protocol-asset", "devtools"] }
 tauri-build = "2.1.1"
-tauri-plugin-log = "2.3.1"
+tauri-plugin-log = "2.4.0"
 tauri-plugin-fs = "2.2.1"
 tauri-plugin-dialog = "2.2.1"
 tauri-plugin-os = "2.2.1"

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/android/src/main/java/NativeBridgePlugin.kt

@@ -12,6 +12,7 @@ import android.view.WindowManager
 import android.view.WindowInsetsController
 import android.graphics.Color
 import android.webkit.WebView
+import android.content.pm.ActivityInfo
 import android.graphics.fonts.SystemFonts
 import android.graphics.fonts.Font
 import androidx.core.view.WindowCompat
@@ -56,6 +57,11 @@ class InterceptKeysRequestArgs {
   var backKey: Boolean? = null
 }
 
+@InvokeArg
+class LockScreenOrientationRequestArgs {
+  var orientation: String? = null
+}
+
 interface KeyDownInterceptor {
     fun interceptVolumeKeys(enabled: Boolean)
     fun interceptBackKey(enabled: Boolean)
@@ -219,7 +225,7 @@ class NativeBridgePlugin(private val activity: Activity): Plugin(activity) {
                         controller.hide(WindowInsets.Type.systemBars())
                     }
                 }
-            } else {
+            } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
                 val compatController = WindowCompat.getInsetsController(window, decorView)
                 compatController?.let {
                     it.systemBarsBehavior = WindowInsetsControllerCompat.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
@@ -234,6 +240,21 @@ class NativeBridgePlugin(private val activity: Activity): Plugin(activity) {
                         it.hide(WindowInsetsCompat.Type.systemBars())
                     }
                 }
+            } else {
+                @Suppress("DEPRECATION")
+                decorView.systemUiVisibility = when {
+                    visible && !isDarkMode -> View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR or
+                                              View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
+                                              View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
+                    visible -> View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
+                               View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
+                    else -> View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY or
+                            View.SYSTEM_UI_FLAG_LAYOUT_STABLE or
+                            View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION or
+                            View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN or
+                            View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or
+                            View.SYSTEM_UI_FLAG_FULLSCREEN
+                }
             }
             window.statusBarColor = Color.TRANSPARENT
             window.navigationBarColor = Color.TRANSPARENT
@@ -294,8 +315,13 @@ class NativeBridgePlugin(private val activity: Activity): Plugin(activity) {
                 var fontName = fileFileName
                     .replace(Regex("\\.(ttf|otf)$", RegexOption.IGNORE_CASE), "")
                     .trim()
+                fontList.add(fontName)
             }
-            ret.put("fonts", JSONArray(fontList))
+            var fontDict = JSObject()
+            for (fontName in fontList) {
+                fontDict.put(fontName, fontName)
+            }
+            ret.put("fonts", fontDict)
         } catch (e: Exception) {
             ret.put("error", e.message)
         }
@@ -321,4 +347,20 @@ class NativeBridgePlugin(private val activity: Activity): Plugin(activity) {
         }
         invoke.resolve()
     }
+
+    @Command
+    fun lock_screen_orientation(invoke: Invoke) {
+      val args = invoke.parseArgs(LockScreenOrientationRequestArgs::class.java)
+      val orientation = args.orientation ?: "auto"
+      when (orientation) {
+          "portrait" -> activity.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_PORTRAIT
+          "landscape" -> activity.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE
+          "auto" -> activity.requestedOrientation = ActivityInfo.SCREEN_ORIENTATION_USER
+          else -> {
+              invoke.reject("Invalid orientation mode")
+              return
+          }
+      }
+      invoke.resolve()
+    }
 }

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/build.rs

@@ -8,6 +8,7 @@ const COMMANDS: &[&str] = &[
     "get_status_bar_height",
     "get_sys_fonts_list",
     "intercept_keys",
+    "lock_screen_orientation",
 ];
 
 fn main() {

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/ios/Package.swift

@@ -4,29 +4,29 @@
 import PackageDescription
 
 let package = Package(
-    name: "tauri-plugin-native-bridge",
-    platforms: [
-        .macOS(.v10_13),
-        .iOS(.v13),
-    ],
-    products: [
-        // Products define the executables and libraries a package produces, and make them visible to other packages.
-        .library(
-            name: "tauri-plugin-native-bridge",
-            type: .static,
-            targets: ["tauri-plugin-native-bridge"]),
-    ],
-    dependencies: [
-        .package(name: "Tauri", path: "../.tauri/tauri-api")
-    ],
-    targets: [
-        // Targets are the basic building blocks of a package. A target can define a module or a test suite.
-        // Targets can depend on other targets in this package, and on products in packages this package depends on.
-        .target(
-            name: "tauri-plugin-native-bridge",
-            dependencies: [
-                .byName(name: "Tauri")
-            ],
-            path: "Sources")
-    ]
+  name: "tauri-plugin-native-bridge",
+  platforms: [
+    .macOS(.v10_13),
+    .iOS(.v14),
+  ],
+  products: [
+    // Products define the executables and libraries a package produces, and make them visible to other packages.
+    .library(
+      name: "tauri-plugin-native-bridge",
+      type: .static,
+      targets: ["tauri-plugin-native-bridge"])
+  ],
+  dependencies: [
+    .package(name: "Tauri", path: "../.tauri/tauri-api")
+  ],
+  targets: [
+    // Targets are the basic building blocks of a package. A target can define a module or a test suite.
+    // Targets can depend on other targets in this package, and on products in packages this package depends on.
+    .target(
+      name: "tauri-plugin-native-bridge",
+      dependencies: [
+        .byName(name: "Tauri")
+      ],
+      path: "Sources")
+  ]
 )

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/ios/Sources/NativeBridgePlugin.swift

@@ -7,6 +7,9 @@ import SwiftRs
 import Tauri
 import UIKit
 import WebKit
+import os
+
+private let logger = Logger(subsystem: Bundle.main.bundleIdentifier!, category: "NativeBridge")
 
 func getLocalizedDisplayName(familyName: String) -> String? {
   let fontDescriptor = CTFontDescriptorCreateWithAttributes(
@@ -41,33 +44,53 @@ class InterceptKeysRequestArgs: Decodable {
   let volumeKeys: Bool?
 }
 
+class LockScreenOrientationRequestArgs: Decodable {
+  let orientation: String?
+}
+
 class VolumeKeyHandler: NSObject {
   private var audioSession: AVAudioSession?
   private var originalVolume: Float = 0.0
+  private var referenceVolume: Float = 0.5
+  private var previousVolume: Float = 0.5
   private var volumeView: MPVolumeView?
-  private var isIntercepting = false
+  private(set) var isIntercepting = false
   private var webView: WKWebView?
   private var volumeSlider: UISlider?
 
   func startInterception(webView: WKWebView) {
     if isIntercepting {
-      return
+      stopInterception()
     }
 
+    logger.log("Starting volume key interception")
     self.webView = webView
     isIntercepting = true
 
     audioSession = AVAudioSession.sharedInstance()
     do {
+      try audioSession?.setCategory(.playback, mode: .default, options: [.mixWithOthers])
       try audioSession?.setActive(true)
     } catch {
-      print("Failed to activate audio session: \(error)")
+      logger.error("Failed to activate audio session: \(error)")
     }
 
-    originalVolume = audioSession?.outputVolume ?? 0.1
-
-    DispatchQueue.main.async { [weak self] in
-      self?.setupHiddenVolumeView()
+    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self] in
+      guard let self = self else { return }
+      self.originalVolume = self.audioSession?.outputVolume ?? 0.1
+      if self.originalVolume > 0.9 {
+        self.referenceVolume = 0.9
+      } else if self.originalVolume < 0.1 {
+        self.referenceVolume = 0.1
+      } else {
+        self.referenceVolume = self.originalVolume
+      }
+      logger.log("Reference volume set to \(self.referenceVolume)")
+      self.previousVolume = self.referenceVolume
+      self.setSessionVolume(self.referenceVolume)
+      self.setupHiddenVolumeView()
+      self.audioSession?.addObserver(
+        self, forKeyPath: "outputVolume", options: [.new], context: nil)
     }
 
     audioSession?.addObserver(self, forKeyPath: "outputVolume", options: [.new], context: nil)
@@ -78,23 +101,18 @@ class VolumeKeyHandler: NSObject {
       return
     }
 
+    logger.log("Stopping volume key interception")
     isIntercepting = false
     audioSession?.removeObserver(self, forKeyPath: "outputVolume")
     DispatchQueue.main.async { [weak self] in
-      self?.setSystemVolume(self?.originalVolume ?? 0.1)
+      self?.setSessionVolume(self?.originalVolume ?? 0.1)
       self?.volumeView?.removeFromSuperview()
       self?.volumeView = nil
       self?.volumeSlider = nil
     }
-
-    do {
-      try audioSession?.setActive(false)
-    } catch {
-      print("Failed to deactivate audio session: \(error)")
-    }
   }
 
-  private func setSystemVolume(_ volume: Float) {
+  private func setSessionVolume(_ volume: Float) {
     DispatchQueue.main.async { [weak self] in
       self?.volumeSlider?.value = volume
     }
@@ -102,14 +120,12 @@ class VolumeKeyHandler: NSObject {
 
   private func setupHiddenVolumeView() {
     assert(Thread.isMainThread, "setupHiddenVolumeView must be called on main thread")
-
     let frame = CGRect(x: -1000, y: -1000, width: 1, height: 1)
     volumeView = MPVolumeView(frame: frame)
     volumeSlider = volumeView?.subviews.first(where: { $0 is UISlider }) as? UISlider
     if let window = UIApplication.shared.windows.first {
       window.addSubview(volumeView!)
     }
-    setSystemVolume(originalVolume)
   }
 
   override func observeValue(
@@ -118,31 +134,80 @@ class VolumeKeyHandler: NSObject {
   ) {
     if keyPath == "outputVolume", let audioSession = self.audioSession, isIntercepting {
       let currentVolume = audioSession.outputVolume
-
-      if currentVolume > originalVolume {
+      if currentVolume > self.previousVolume {
         DispatchQueue.main.async { [weak self] in
           self?.webView?.evaluateJavaScript(
             "window.onNativeKeyDown('VolumeUp');", completionHandler: nil)
-          self?.setSystemVolume(self?.originalVolume ?? 0.1)
         }
-      } else if currentVolume < originalVolume {
+      } else if currentVolume < self.previousVolume {
         DispatchQueue.main.async { [weak self] in
           self?.webView?.evaluateJavaScript(
             "window.onNativeKeyDown('VolumeDown');", completionHandler: nil)
-          self?.setSystemVolume(self?.originalVolume ?? 0.1)
         }
       }
+      self.previousVolume = currentVolume
+      self.setSessionVolume(self.referenceVolume)
     }
   }
 }
 
 class NativeBridgePlugin: Plugin {
-  private var authSession: ASWebAuthenticationSession?
   private var webView: WKWebView?
+  private var authSession: ASWebAuthenticationSession?
+  private var isOrientationLocked = false
+  private var currentOrientationMask: UIInterfaceOrientationMask = .all
+  private var orientationObserver: NSObjectProtocol?
 
   @objc public override func load(webview: WKWebView) {
     self.webView = webview
-    print("NativeBridgePlugin loaded")
+    logger.log("NativeBridgePlugin loaded")
+
+    NotificationCenter.default.addObserver(
+      self,
+      selector: #selector(appDidBecomeActive),
+      name: UIApplication.didBecomeActiveNotification,
+      object: nil
+    )
+
+    NotificationCenter.default.addObserver(
+      self,
+      selector: #selector(appDidEnterBackground),
+      name: UIApplication.didEnterBackgroundNotification,
+      object: nil
+    )
+  }
+
+  @objc func appDidBecomeActive() {
+    if volumeKeyHandler != nil {
+      activateVolumeKeyInterception()
+    }
+
+    if orientationObserver != nil {
+      self.setupOrientationObserver()
+    }
+  }
+
+  @objc func appDidEnterBackground() {
+    if let handler = volumeKeyHandler, handler.isIntercepting {
+      handler.stopInterception()
+    }
+  }
+
+  func activateVolumeKeyInterception() {
+    if volumeKeyHandler == nil {
+      volumeKeyHandler = VolumeKeyHandler()
+    }
+
+    if let webView = self.webView {
+      volumeKeyHandler?.stopInterception()
+      volumeKeyHandler?.startInterception(webView: webView)
+    } else {
+      logger.warning("Cannot activate volume key interception: webView is nil")
+    }
+  }
+
+  deinit {
+    NotificationCenter.default.removeObserver(self)
   }
 
   private struct AssociatedKeys {
@@ -179,15 +244,15 @@ class NativeBridgePlugin: Plugin {
       if enabled {
         try session.setCategory(.playback, mode: .default, options: [.mixWithOthers])
         try session.setActive(true)
-        print("AVAudioSession activated")
+        logger.log("AVAudioSession activated")
       } else {
         try session.setActive(false)
         MPNowPlayingInfoCenter.default().nowPlayingInfo = nil
-        print("AVAudioSession deactivated")
+        logger.log("AVAudioSession deactivated")
       }
       invoke.resolve()
     } catch {
-      print("Failed to set up audio session:", error)
+      logger.error("Failed to set up audio session: \(error)")
     }
   }
 
@@ -200,13 +265,12 @@ class NativeBridgePlugin: Plugin {
       guard let strongSelf = self else { return }
 
       if let error = error {
-        Logger.error("Auth session error: \(error.localizedDescription)")
+        logger.error("Auth session error: \(error.localizedDescription)")
         invoke.reject(error.localizedDescription)
         return
       }
 
       if let callbackURL = callbackURL {
-        Logger.info("Auth session callback URL: \(callbackURL.absoluteString)")
         strongSelf.authSession?.cancel()
         strongSelf.authSession = nil
         invoke.resolve(["redirectUrl": callbackURL.absoluteString])
@@ -218,7 +282,7 @@ class NativeBridgePlugin: Plugin {
     }
 
     let started = authSession?.start() ?? false
-    Logger.info("Auth session start result: \(started)")
+    logger.log("Auth session start result: \(started)")
   }
 
   @objc public func set_system_ui_visibility(_ invoke: Invoke) throws {
@@ -239,45 +303,31 @@ class NativeBridgePlugin: Plugin {
         keyWindow.overrideUserInterfaceStyle = darkMode ? .dark : .light
         keyWindow.layoutIfNeeded()
       } else {
-        print("No key window found")
+        logger.error("No key window found")
       }
     }
     invoke.resolve(["success": true])
   }
 
   @objc public func get_sys_fonts_list(_ invoke: Invoke) throws {
-    var fontList: [String] = []
+    var fontDict: [String: String] = [:]
 
     for family in UIFont.familyNames.sorted() {
       if let localized = getLocalizedDisplayName(familyName: family) {
-        fontList.append(localized)
+        fontDict[family] = localized
       } else {
         let fontNames = UIFont.fontNames(forFamilyName: family)
         if fontNames.isEmpty {
-          fontList.append(family)
+          fontDict[family] = family
         } else {
-          fontList.append(contentsOf: fontNames)
+          for fontName in fontNames {
+            fontDict[fontName] = family
+          }
         }
       }
     }
 
-    invoke.resolve(["fonts": fontList])
-  }
-
-  private func interceptVolumeKeys(_ intercept: Bool) {
-    interceptingVolumeKeys = intercept
-
-    if intercept {
-      if volumeKeyHandler == nil {
-        volumeKeyHandler = VolumeKeyHandler()
-      }
-
-      if let webView = self.webView {
-        volumeKeyHandler?.startInterception(webView: webView)
-      }
-    } else {
-      volumeKeyHandler?.stopInterception()
-    }
+    invoke.resolve(["fonts": fontDict])
   }
 
   @objc public func intercept_keys(_ invoke: Invoke) {
@@ -285,16 +335,89 @@ class NativeBridgePlugin: Plugin {
       let args = try invoke.parseArgs(InterceptKeysRequestArgs.self)
 
       if let volumeKeys = args.volumeKeys {
-        DispatchQueue.main.async { [weak self] in
-          self?.interceptVolumeKeys(volumeKeys)
+        if volumeKeys {
+          self.activateVolumeKeyInterception()
+        } else {
+          self.volumeKeyHandler?.stopInterception()
+          DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self] in
+            self?.volumeKeyHandler = nil
+          }
         }
       }
-
       invoke.resolve()
     } catch {
       invoke.reject(error.localizedDescription)
     }
   }
+
+  @objc public func lock_screen_orientation(_ invoke: Invoke) throws {
+    guard let args = try? invoke.parseArgs(LockScreenOrientationRequestArgs.self) else {
+      return invoke.reject("Invalid arguments")
+    }
+
+    DispatchQueue.main.async {
+      UIDevice.current.beginGeneratingDeviceOrientationNotifications()
+      let orientation = args.orientation ?? "auto"
+      switch orientation.lowercased() {
+      case "portrait":
+        self.isOrientationLocked = true
+        self.currentOrientationMask = .portrait
+        self.forceOrientation(.portrait)
+        self.setupOrientationObserver()
+      case "landscape":
+        self.isOrientationLocked = true
+        self.currentOrientationMask = .landscape
+        self.forceOrientation(.landscapeRight)
+        self.setupOrientationObserver()
+      case "auto":
+        self.isOrientationLocked = false
+        self.currentOrientationMask = .all
+      default:
+        invoke.reject("Invalid orientation mode")
+        return
+      }
+
+      invoke.resolve()
+    }
+  }
+
+  private func forceOrientation(_ orientation: UIInterfaceOrientation) {
+    if #available(iOS 16.0, *) {
+      if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene {
+        let orientationMask: UIInterfaceOrientationMask =
+          orientation.isPortrait ? .portrait : .landscape
+
+        for window in windowScene.windows {
+          if let rootVC = window.rootViewController {
+            rootVC.setNeedsUpdateOfSupportedInterfaceOrientations()
+          }
+        }
+
+        windowScene.requestGeometryUpdate(.iOS(interfaceOrientations: orientationMask)) { error in
+          print("Orientation update error: \(error.localizedDescription)")
+        }
+      }
+    } else {
+      UIDevice.current.setValue(orientation.rawValue, forKey: "orientation")
+      UIViewController.attemptRotationToDeviceOrientation()
+    }
+  }
+
+  private func setupOrientationObserver() {
+    orientationObserver = NotificationCenter.default.addObserver(
+      forName: UIDevice.orientationDidChangeNotification,
+      object: nil,
+      queue: .main
+    ) { [weak self] _ in
+      guard let self = self, self.isOrientationLocked else { return }
+
+      if self.currentOrientationMask == .portrait {
+        self.forceOrientation(.portrait)
+      } else if self.currentOrientationMask == .landscape {
+        self.forceOrientation(.landscapeRight)
+      }
+    }
+  }
 }
 
 @_cdecl("init_plugin_native_bridge")

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/permissions/autogenerated/commands/lock_screen_orientation.toml

@@ -0,0 +1,13 @@
+# Automatically generated - DO NOT EDIT!
+
+"$schema" = "../../schemas/schema.json"
+
+[[permission]]
+identifier = "allow-lock-screen-orientation"
+description = "Enables the lock_screen_orientation command without any pre-configured scope."
+commands.allow = ["lock_screen_orientation"]
+
+[[permission]]
+identifier = "deny-lock-screen-orientation"
+description = "Denies the lock_screen_orientation command without any pre-configured scope."
+commands.deny = ["lock_screen_orientation"]

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/permissions/autogenerated/reference.md

@@ -13,6 +13,7 @@ Default permissions for the plugin
 - `allow-get-status-bar-height`
 - `allow-get-sys-fonts-list`
 - `allow-intercept-keys`
+- `allow-lock-screen-orientation`
 
 ## Permission Table
 
@@ -208,6 +209,32 @@ Denies the intercept_keys command without any pre-configured scope.
 <tr>
 <td>
 
+`native-bridge:allow-lock-screen-orientation`
+
+</td>
+<td>
+
+Enables the lock_screen_orientation command without any pre-configured scope.
+
+</td>
+</tr>
+
+<tr>
+<td>
+
+`native-bridge:deny-lock-screen-orientation`
+
+</td>
+<td>
+
+Denies the lock_screen_orientation command without any pre-configured scope.
+
+</td>
+</tr>
+
+<tr>
+<td>
+
 `native-bridge:allow-set-system-ui-visibility`
 
 </td>

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/permissions/default.toml

@@ -10,4 +10,5 @@ permissions = [
   "allow-get-status-bar-height",
   "allow-get-sys-fonts-list",
   "allow-intercept-keys",
+  "allow-lock-screen-orientation",
 ]

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/permissions/schemas/schema.json

@@ -378,6 +378,18 @@
           "const": "deny-intercept-keys",
           "markdownDescription": "Denies the intercept_keys command without any pre-configured scope."
         },
+        {
+          "description": "Enables the lock_screen_orientation command without any pre-configured scope.",
+          "type": "string",
+          "const": "allow-lock-screen-orientation",
+          "markdownDescription": "Enables the lock_screen_orientation command without any pre-configured scope."
+        },
+        {
+          "description": "Denies the lock_screen_orientation command without any pre-configured scope.",
+          "type": "string",
+          "const": "deny-lock-screen-orientation",
+          "markdownDescription": "Denies the lock_screen_orientation command without any pre-configured scope."
+        },
         {
           "description": "Enables the set_system_ui_visibility command without any pre-configured scope.",
           "type": "string",
@@ -403,10 +415,10 @@
           "markdownDescription": "Denies the use_background_audio command without any pre-configured scope."
         },
         {
-          "description": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-auth-with-safari`\n- `allow-auth-with-custom-tab`\n- `allow-copy-uri-to-path`\n- `allow-use-background-audio`\n- `allow-install-package`\n- `allow-set-system-ui-visibility`\n- `allow-get-status-bar-height`\n- `allow-get-sys-fonts-list`\n- `allow-intercept-keys`",
+          "description": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-auth-with-safari`\n- `allow-auth-with-custom-tab`\n- `allow-copy-uri-to-path`\n- `allow-use-background-audio`\n- `allow-install-package`\n- `allow-set-system-ui-visibility`\n- `allow-get-status-bar-height`\n- `allow-get-sys-fonts-list`\n- `allow-intercept-keys`\n- `allow-lock-screen-orientation`",
           "type": "string",
           "const": "default",
-          "markdownDescription": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-auth-with-safari`\n- `allow-auth-with-custom-tab`\n- `allow-copy-uri-to-path`\n- `allow-use-background-audio`\n- `allow-install-package`\n- `allow-set-system-ui-visibility`\n- `allow-get-status-bar-height`\n- `allow-get-sys-fonts-list`\n- `allow-intercept-keys`"
+          "markdownDescription": "Default permissions for the plugin\n#### This default permission set includes:\n\n- `allow-auth-with-safari`\n- `allow-auth-with-custom-tab`\n- `allow-copy-uri-to-path`\n- `allow-use-background-audio`\n- `allow-install-package`\n- `allow-set-system-ui-visibility`\n- `allow-get-status-bar-height`\n- `allow-get-sys-fonts-list`\n- `allow-intercept-keys`\n- `allow-lock-screen-orientation`"
         }
       ]
     }

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/src/commands.rs

@@ -73,3 +73,11 @@ pub(crate) async fn intercept_keys<R: Runtime>(
 ) -> Result<()> {
     app.native_bridge().intercept_keys(payload)
 }
+
+#[command]
+pub(crate) async fn lock_screen_orientation<R: Runtime>(
+    app: AppHandle<R>,
+    payload: LockScreenOrientationRequest,
+) -> Result<()> {
+    app.native_bridge().lock_screen_orientation(payload)
+}

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/src/desktop.rs

@@ -1,4 +1,5 @@
 use serde::de::DeserializeOwned;
+use std::collections::HashMap;
 use tauri::{plugin::PluginApi, AppHandle, Runtime};
 
 use crate::models::*;
@@ -50,9 +51,14 @@ impl<R: Runtime> NativeBridge<R> {
 
     pub fn get_sys_fonts_list(&self) -> crate::Result<GetSysFontsListResponse> {
         let font_collection = font_enumeration::Collection::new().unwrap();
-        let mut fonts = Vec::new();
+        let mut fonts = HashMap::new();
         for font in font_collection.all() {
-            fonts.push(font.font_name.clone());
+            if cfg!(target_os = "windows") {
+                // FIXME: temporarily disable font name with style for windows
+                fonts.insert(font.family_name.clone(), font.family_name.clone());
+            } else {
+                fonts.insert(font.font_name.clone(), font.family_name.clone());
+            }
         }
         Ok(GetSysFontsListResponse { fonts, error: None })
     }
@@ -60,4 +66,11 @@ impl<R: Runtime> NativeBridge<R> {
     pub fn intercept_keys(&self, _payload: InterceptKeysRequest) -> crate::Result<()> {
         Err(crate::Error::UnsupportedPlatformError)
     }
+
+    pub fn lock_screen_orientation(
+        &self,
+        _payload: LockScreenOrientationRequest,
+    ) -> crate::Result<()> {
+        Err(crate::Error::UnsupportedPlatformError)
+    }
 }

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/src/lib.rs

@@ -46,6 +46,7 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
             commands::get_status_bar_height,
             commands::get_sys_fonts_list,
             commands::intercept_keys,
+            commands::lock_screen_orientation,
         ])
         .setup(|app, api| {
             #[cfg(mobile)]

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/src/mobile.rs

@@ -101,3 +101,14 @@ impl<R: Runtime> NativeBridge<R> {
             .map_err(Into::into)
     }
 }
+
+impl<R: Runtime> NativeBridge<R> {
+    pub fn lock_screen_orientation(
+        &self,
+        payload: LockScreenOrientationRequest,
+    ) -> crate::Result<()> {
+        self.0
+            .run_mobile_plugin("lock_screen_orientation", payload)
+            .map_err(Into::into)
+    }
+}

apps/readest-app/src-tauri/plugins/tauri-plugin-native-bridge/src/models.rs

@@ -1,4 +1,5 @@
 use serde::{Deserialize, Serialize};
+use std::collections::HashMap;
 
 #[derive(Debug, Deserialize, Serialize)]
 #[serde(rename_all = "camelCase")]
@@ -69,7 +70,7 @@ pub struct GetStatusBarHeightResponse {
 #[derive(Debug, Deserialize, Serialize)]
 #[serde(rename_all = "camelCase")]
 pub struct GetSysFontsListResponse {
-    pub fonts: Vec<String>,
+    pub fonts: HashMap<String, String>,
     pub error: Option<String>,
 }
 
@@ -79,3 +80,9 @@ pub struct InterceptKeysRequest {
     pub volume_keys: Option<bool>,
     pub back_key: Option<bool>,
 }
+
+#[derive(Debug, Deserialize, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct LockScreenOrientationRequest {
+    pub orientation: String,
+}

apps/readest-app/src-tauri/src/lib.rs

@@ -191,9 +191,8 @@ pub fn run() {
 
                 let app_handle = app.handle().clone();
                 app.listen("window-ready", move |_| {
-                    app_handle
-                        .get_webview_window("main")
-                        .unwrap()
+                    let webview = app_handle.get_webview_window("main").unwrap();
+                    webview
                         .eval("window.__READEST_CLI_ACCESS = true;")
                         .expect("Failed to set cli access config");
 
@@ -204,6 +203,19 @@ pub fn run() {
                     {
                         set_rounded_window(&app_handle, false);
                     }
+                    #[cfg(target_os = "linux")]
+                    {
+                        let is_appimage = std::env::var("APPIMAGE").is_ok()
+                            || std::env::current_exe()
+                                .map(|path| path.to_string_lossy().contains("/tmp/.mount_"))
+                                .unwrap_or(false);
+
+                        let script =
+                            format!("window.__READEST_UPDATER_DISABLED = {};", !is_appimage);
+                        webview
+                            .eval(&script)
+                            .expect("Failed to set updater disabled config");
+                    }
                 });
             }
 

apps/readest-app/src-tauri/tauri.conf.json

@@ -65,7 +65,8 @@
       "minSdkVersion": 26
     },
     "iOS": {
-      "developmentTeam": "J5W48D69VR"
+      "developmentTeam": "J5W48D69VR",
+      "minimumSystemVersion": "14.0"
     },
     "fileAssociations": [
       {

apps/readest-app/src/app/auth/page.tsx

@@ -78,8 +78,8 @@ export default function AuthPage() {
   useTheme({ systemUIVisible: false });
 
   const getTauriRedirectTo = (isOAuth: boolean) => {
-    if (process.env.NODE_ENV === 'production' || appService?.isMobile || USE_APPLE_SIGN_IN) {
-      if (appService?.isMobile) {
+    if (process.env.NODE_ENV === 'production' || appService?.isMobileApp || USE_APPLE_SIGN_IN) {
+      if (appService?.isMobileApp) {
         return isOAuth ? DEEPLINK_CALLBACK : WEB_AUTH_CALLBACK;
       }
       return DEEPLINK_CALLBACK;
@@ -172,7 +172,7 @@ export default function AuthPage() {
 
   const startTauriOAuth = async () => {
     try {
-      if (process.env.NODE_ENV === 'production' || appService?.isMobile || USE_APPLE_SIGN_IN) {
+      if (process.env.NODE_ENV === 'production' || appService?.isMobileApp || USE_APPLE_SIGN_IN) {
         const { getCurrentWindow } = await import('@tauri-apps/api/window');
         const currentWindow = getCurrentWindow();
         currentWindow.listen('single-instance', ({ event, payload }) => {

apps/readest-app/src/app/library/components/BookItem.tsx

@@ -9,7 +9,7 @@ import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { LibraryViewModeType } from '@/types/settings';
 import { formatAuthors } from '@/utils/book';
 import ReadingProgress from './ReadingProgress';
-import BookCover from './BookCover';
+import BookCover from '@/components/BookCover';
 
 interface BookItemProps {
   mode: LibraryViewModeType;
@@ -100,7 +100,7 @@ const BookItem: React.FC<BookItemProps> = ({
             {transferProgress !== null ? (
               transferProgress === 100 ? null : (
                 <div
-                  className='radial-progress opacity-0 group-hover:opacity-100'
+                  className='radial-progress sm:opacity-0 sm:group-hover:opacity-100'
                   style={
                     {
                       '--value': transferProgress,
@@ -113,7 +113,7 @@ const BookItem: React.FC<BookItemProps> = ({
               )
             ) : (
               <button
-                className='show-detail-button opacity-0 group-hover:opacity-100'
+                className='show-detail-button -m-2 p-2 sm:opacity-0 sm:group-hover:opacity-100'
                 onPointerDown={(e) => stopEvent(e)}
                 onPointerUp={(e) => stopEvent(e)}
                 onPointerMove={(e) => stopEvent(e)}
@@ -133,17 +133,19 @@ const BookItem: React.FC<BookItemProps> = ({
                 )}
               </button>
             )}
-            <button
-              className='show-detail-button opacity-0 group-hover:opacity-100'
-              onPointerDown={(e) => stopEvent(e)}
-              onPointerUp={(e) => stopEvent(e)}
-              onPointerMove={(e) => stopEvent(e)}
-              onPointerCancel={(e) => stopEvent(e)}
-              onPointerLeave={(e) => stopEvent(e)}
-              onClick={() => showBookDetailsModal(book)}
-            >
-              <CiCircleMore size={iconSize15} />
-            </button>
+            {!appService?.isMobile && (
+              <button
+                className='show-detail-button -m-2 p-2 sm:opacity-0 sm:group-hover:opacity-100'
+                onPointerDown={(e) => stopEvent(e)}
+                onPointerUp={(e) => stopEvent(e)}
+                onPointerMove={(e) => stopEvent(e)}
+                onPointerCancel={(e) => stopEvent(e)}
+                onPointerLeave={(e) => stopEvent(e)}
+                onClick={() => showBookDetailsModal(book)}
+              >
+                <CiCircleMore size={iconSize15} />
+              </button>
+            )}
           </div>
         </div>
       </div>

apps/readest-app/src/app/library/components/Bookshelf.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import * as React from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
-import { MdDelete, MdOpenInNew, MdOutlineCancel } from 'react-icons/md';
+import { MdDelete, MdOpenInNew, MdOutlineCancel, MdInfoOutline } from 'react-icons/md';
 import { LuFolderPlus } from 'react-icons/lu';
 import { PiPlus } from 'react-icons/pi';
 import { Book, BooksGroup } from '@/types/book';
@@ -162,6 +162,13 @@ const Bookshelf: React.FC<BookshelfProps> = ({
     navigateToReader(router, selectedBooks);
   };
 
+  const openBookDetails = () => {
+    const book = libraryBooks.find((book) => book.hash === selectedBooks[0]);
+    if (book) {
+      handleShowDetailsBook(book);
+    }
+  };
+
   const confirmDelete = async () => {
     selectedBooks.forEach((id) => {
       for (const book of libraryBooks.filter((book) => book.hash === id || book.groupId === id)) {
@@ -290,14 +297,14 @@ const Bookshelf: React.FC<BookshelfProps> = ({
           <div
             className={clsx(
               'flex items-center justify-center shadow-lg',
-              'text-base-content bg-base-300 text-sm',
+              'bg-gray-600 text-xs text-white',
               'mx-auto w-fit space-x-6 rounded-lg p-4',
             )}
           >
             <button
               onClick={openSelectedBooks}
               className={clsx(
-                'flex flex-col items-center justify-center',
+                'flex flex-col items-center justify-center gap-1',
                 (!selectedBooks.length || !selectedBooks.every((id) => isMd5(id))) &&
                   'btn-disabled opacity-50',
               )}
@@ -308,30 +315,43 @@ const Bookshelf: React.FC<BookshelfProps> = ({
             <button
               onClick={groupSelectedBooks}
               className={clsx(
-                'flex flex-col items-center justify-center',
+                'flex flex-col items-center justify-center gap-1',
                 !selectedBooks.length && 'btn-disabled opacity-50',
               )}
             >
               <LuFolderPlus />
               <div>{_('Group')}</div>
             </button>
+            <button
+              onClick={openBookDetails}
+              className={clsx(
+                'flex flex-col items-center justify-center gap-1',
+                (selectedBooks.length !== 1 || !selectedBooks.every((id) => isMd5(id))) &&
+                  'btn-disabled opacity-50',
+              )}
+            >
+              <MdInfoOutline />
+              <div>{_('Details')}</div>
+            </button>
             <button
               onClick={deleteSelectedBooks}
               className={clsx(
-                'flex flex-col items-center justify-center',
+                'flex flex-col items-center justify-center gap-1',
                 !selectedBooks.length && 'btn-disabled opacity-50',
               )}
             >
               <MdDelete className='fill-red-500' />
               <div className='text-red-500'>{_('Delete')}</div>
             </button>
-            <button
-              onClick={() => handleSetSelectMode(false)}
-              className={clsx('flex flex-col items-center justify-center')}
-            >
-              <MdOutlineCancel />
-              <div>{_('Cancel')}</div>
-            </button>
+            {!appService?.isMobile && (
+              <button
+                onClick={() => handleSetSelectMode(false)}
+                className={clsx('flex flex-col items-center justify-center gap-1')}
+              >
+                <MdOutlineCancel />
+                <div>{_('Cancel')}</div>
+              </button>
+            )}
           </div>
         )}
       </div>

apps/readest-app/src/app/library/components/GroupItem.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import { MdCheckCircle, MdCheckCircleOutline } from 'react-icons/md';
 import { useEnv } from '@/context/EnvContext';
 import { BooksGroup } from '@/types/book';
-import BookCover from './BookCover';
+import BookCover from '@/components/BookCover';
 
 interface GroupItemProps {
   group: BooksGroup;

apps/readest-app/src/app/library/components/ImportMenu.tsx

@@ -1,3 +1,5 @@
+import clsx from 'clsx';
+import { useEnv } from '@/context/EnvContext';
 import { useTranslation } from '@/hooks/useTranslation';
 import MenuItem from '@/components/MenuItem';
 
@@ -8,6 +10,7 @@ interface ImportMenuProps {
 
 const ImportMenu: React.FC<ImportMenuProps> = ({ setIsDropdownOpen, onImportBooks }) => {
   const _ = useTranslation();
+  const { appService } = useEnv();
 
   const handleImportBooks = () => {
     onImportBooks();
@@ -17,7 +20,10 @@ const ImportMenu: React.FC<ImportMenuProps> = ({ setIsDropdownOpen, onImportBook
   return (
     <ul
       tabIndex={-1}
-      className='dropdown-content dropdown-center bg-base-100 menu rounded-box z-[1] mt-3 w-52 p-2 shadow'
+      className={clsx(
+        'dropdown-content bg-base-100 menu rounded-box z-[1] mt-3 w-52 p-2 shadow',
+        appService?.isMobile ? 'no-triangle' : 'dropdown-center',
+      )}
     >
       <MenuItem label={_('From Local File')} onClick={handleImportBooks} />
     </ul>

apps/readest-app/src/app/library/components/LibraryHeader.tsx

@@ -142,7 +142,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
                   setSearchQuery('');
                   throttledUpdateQueryParam('');
                 }}
-                className='text-gray-400 hover:text-gray-600'
+                className='pe-1 text-gray-400 hover:text-gray-600'
                 aria-label={_('Clear Search')}
               >
                 <IoMdCloseCircle className='h-4 w-4' />
@@ -150,7 +150,10 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
             )}
             <span className='bg-base-content/50 mx-2 h-4 w-[0.5px]'></span>
             <Dropdown
-              className='exclude-title-bar-mousedown dropdown-bottom flex h-6 cursor-pointer justify-center'
+              className={clsx(
+                'exclude-title-bar-mousedown dropdown-bottom flex h-6 cursor-pointer justify-center',
+                appService?.isMobile ? 'dropdown-end' : 'dropdown-center',
+              )}
               buttonClassName='p-0 h-6 min-h-6 w-6 flex items-center justify-center'
               toggleButton={
                 <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Import Books')}>
@@ -160,47 +163,61 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
             >
               <ImportMenu onImportBooks={onImportBooks} />
             </Dropdown>
-            <button
-              onClick={onToggleSelectMode}
-              aria-label={_('Select Multiple Books')}
-              className='h-6'
-            >
-              <div
-                className='lg:tooltip lg:tooltip-bottom cursor-pointer'
-                data-tip={_('Select Books')}
+            {appService?.isMobile ? null : (
+              <button
+                onClick={onToggleSelectMode}
+                aria-label={_('Select Multiple Books')}
+                className='h-6'
               >
-                <PiSelectionAllDuotone
-                  role='button'
-                  className={`h-6 w-6 ${isSelectMode ? 'fill-gray-400' : 'fill-gray-500'}`}
-                />
-              </div>
-            </button>
+                <div
+                  className='lg:tooltip lg:tooltip-bottom cursor-pointer'
+                  data-tip={_('Select Books')}
+                >
+                  <PiSelectionAllDuotone
+                    role='button'
+                    className={`h-6 w-6 ${isSelectMode ? 'fill-gray-400' : 'fill-gray-500'}`}
+                  />
+                </div>
+              </button>
+            )}
           </div>
         </div>
-        <div className='flex h-full items-center gap-x-2 sm:gap-x-4'>
-          <Dropdown
-            className='exclude-title-bar-mousedown dropdown-bottom dropdown-end'
-            buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
-            toggleButton={<PiDotsThreeCircle size={iconSize18} />}
-          >
-            <SortMenu />
-          </Dropdown>
-          <Dropdown
-            className='exclude-title-bar-mousedown dropdown-bottom dropdown-end'
-            buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
-            toggleButton={<MdOutlineMenu size={iconSize18} />}
-          >
-            <SettingsMenu />
-          </Dropdown>
-          {appService?.hasWindowBar && (
-            <WindowButtons
-              headerRef={headerRef}
-              showMinimize={windowButtonVisible}
-              showMaximize={windowButtonVisible}
-              showClose={windowButtonVisible}
-            />
-          )}
-        </div>
+        {appService?.isMobile && isSelectMode ? (
+          <div className='w-max-[72px] w-min-[72px] flex h-full items-center'>
+            <button
+              onClick={onToggleSelectMode}
+              className='btn btn-ghost text-base-content/85 h-8 min-h-8 w-[72px] p-0'
+              aria-label={_('Cancel Selection')}
+            >
+              {_('Cancel')}
+            </button>
+          </div>
+        ) : (
+          <div className='flex h-full items-center gap-x-2 sm:gap-x-4'>
+            <Dropdown
+              className='exclude-title-bar-mousedown dropdown-bottom dropdown-end'
+              buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
+              toggleButton={<PiDotsThreeCircle size={iconSize18} />}
+            >
+              <SortMenu />
+            </Dropdown>
+            <Dropdown
+              className='exclude-title-bar-mousedown dropdown-bottom dropdown-end'
+              buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
+              toggleButton={<MdOutlineMenu size={iconSize18} />}
+            >
+              <SettingsMenu />
+            </Dropdown>
+            {appService?.hasWindowBar && (
+              <WindowButtons
+                headerRef={headerRef}
+                showMinimize={windowButtonVisible}
+                showMaximize={windowButtonVisible}
+                showClose={windowButtonVisible}
+              />
+            )}
+          </div>
+        )}
       </div>
     </div>
   );

apps/readest-app/src/app/library/components/SettingsMenu.tsx

@@ -1,5 +1,5 @@
+import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
-import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { PiUserCircle } from 'react-icons/pi';
 import { PiUserCircleCheck } from 'react-icons/pi';
@@ -17,6 +17,7 @@ import { getStoragePlanData } from '@/utils/access';
 import { navigateToLogin, navigateToProfile } from '@/utils/nav';
 import { tauriHandleSetAlwaysOnTop, tauriHandleToggleFullScreen } from '@/utils/window';
 import { QuotaType } from '@/types/user';
+import UserAvatar from '@/components/UserAvatar';
 import MenuItem from '@/components/MenuItem';
 import Quota from '@/components/Quota';
 
@@ -35,6 +36,7 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
   const [isAutoCheckUpdates, setIsAutoCheckUpdates] = useState(settings.autoCheckUpdates);
   const [isAlwaysOnTop, setIsAlwaysOnTop] = useState(settings.alwaysOnTop);
   const [isScreenWakeLock, setIsScreenWakeLock] = useState(settings.screenWakeLock);
+  const [isOpenLastBooks, setIsOpenLastBooks] = useState(settings.openLastBooks);
   const [isAutoImportBooksOnOpen, setIsAutoImportBooksOnOpen] = useState(
     settings.autoImportBooksOnOpen,
   );
@@ -110,6 +112,13 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
     setIsScreenWakeLock(settings.screenWakeLock);
   };
 
+  const toggleOpenLastBooks = () => {
+    settings.openLastBooks = !settings.openLastBooks;
+    setSettings(settings);
+    saveSettings(envConfig, settings);
+    setIsOpenLastBooks(settings.openLastBooks);
+  };
+
   useEffect(() => {
     if (!user || !token) return;
     const storagPlan = getStoragePlanData(token);
@@ -126,7 +135,6 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [token]);
 
-  const isWebApp = isWebAppPlatform();
   const avatarUrl = user?.user_metadata?.['picture'] || user?.user_metadata?.['avatar_url'];
   const userFullName = user?.user_metadata?.['full_name'];
   const userDisplayName = userFullName ? userFullName.split(' ')[0] : null;
@@ -134,7 +142,10 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
   return (
     <div
       tabIndex={0}
-      className='settings-menu dropdown-content no-triangle border-base-100 z-20 mt-2 shadow-2xl'
+      className={clsx(
+        'settings-menu dropdown-content no-triangle border-base-100',
+        'z-20 mt-2 max-w-[90vw] shadow-2xl',
+      )}
     >
       {user ? (
         <MenuItem
@@ -146,14 +157,7 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
           labelClass='!max-w-40'
           Icon={
             avatarUrl ? (
-              <Image
-                src={avatarUrl}
-                alt={_('User avatar')}
-                className='rounded-full'
-                referrerPolicy='no-referrer'
-                width={iconSize}
-                height={iconSize}
-              />
+              <UserAvatar url={avatarUrl} size={iconSize} DefaultIcon={PiUserCircleCheck} />
             ) : (
               PiUserCircleCheck
             )
@@ -179,6 +183,13 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
           onClick={toggleAutoImportBooksOnOpen}
         />
       )}
+      {isTauriAppPlatform() && (
+        <MenuItem
+          label={_('Open Last Book on Start')}
+          Icon={isOpenLastBooks ? MdCheck : undefined}
+          onClick={toggleOpenLastBooks}
+        />
+      )}
       {appService?.hasUpdater && (
         <MenuItem
           label={_('Check Updates on Start')}
@@ -202,7 +213,7 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
       />
       <MenuItem label={_('Reload Page')} onClick={handleReloadPage} />
       <hr className='border-base-200 my-1' />
-      {isWebApp && <MenuItem label={_('Download Readest')} onClick={downloadReadest} />}
+      {isWebAppPlatform() && <MenuItem label={_('Download Readest')} onClick={downloadReadest} />}
       <MenuItem label={_('About Readest')} onClick={showAboutReadest} />
     </div>
   );

apps/readest-app/src/app/library/page.tsx

@@ -31,6 +31,7 @@ import { useBooksSync } from './hooks/useBooksSync';
 import { useThemeStore } from '@/store/themeStore';
 import { useScreenWakeLock } from '@/hooks/useScreenWakeLock';
 import { useOpenWithBooks } from '@/hooks/useOpenWithBooks';
+import { lockScreenOrientation } from '@/utils/bridge';
 import {
   tauriHandleSetAlwaysOnTop,
   tauriHandleToggleFullScreen,
@@ -61,7 +62,9 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
     updateBook,
     setLibrary,
     checkOpenWithBooks,
+    checkLastOpenBooks,
     setCheckOpenWithBooks,
+    setCheckLastOpenBooks,
   } = useLibraryStore();
   const _ = useTranslation();
   useTheme({ systemUIVisible: true, appThemeColor: 'base-200' });
@@ -75,6 +78,7 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
   const [booksTransferProgress, setBooksTransferProgress] = useState<{
     [key: string]: number | null;
   }>({});
+  const [pendingNavigationBookIds, setPendingNavigationBookIds] = useState<string[] | null>(null);
   const [isDragging, setIsDragging] = useState(false);
   const demoBooks = useDemoBooks();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -116,6 +120,12 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settings]);
 
+  useEffect(() => {
+    if (appService?.isMobileApp) {
+      lockScreenOrientation({ orientation: 'auto' });
+    }
+  }, [appService]);
+
   const handleDropedFiles = async (files: File[] | string[]) => {
     if (files.length === 0) return;
     const supportedFiles = files.filter((file) => {
@@ -222,15 +232,46 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
 
       console.log('Opening books:', bookIds);
       if (bookIds.length > 0) {
-        setTimeout(() => {
-          navigateToReader(router, bookIds);
-        }, 0);
+        setPendingNavigationBookIds(bookIds);
+        return true;
       }
+      return false;
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
   );
 
+  const handleOpenLastBooks = async (
+    appService: AppService,
+    lastBookIds: string[],
+    libraryBooks: Book[],
+  ) => {
+    if (lastBookIds.length === 0) return false;
+    const bookIds: string[] = [];
+    for (const bookId of lastBookIds) {
+      const book = libraryBooks.find((b) => b.hash === bookId);
+      if (book && (await appService.isBookAvailable(book))) {
+        bookIds.push(book.hash);
+      }
+    }
+    console.log('Opening last books:', bookIds);
+    if (bookIds.length > 0) {
+      setPendingNavigationBookIds(bookIds);
+      return true;
+    }
+    return false;
+  };
+
+  useEffect(() => {
+    if (pendingNavigationBookIds) {
+      const bookIds = pendingNavigationBookIds;
+      setPendingNavigationBookIds(null);
+      if (bookIds.length > 0) {
+        navigateToReader(router, bookIds);
+      }
+    }
+  }, [pendingNavigationBookIds, router]);
+
   useEffect(() => {
     if (isInitiating.current) return;
     isInitiating.current = true;
@@ -255,34 +296,35 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
       const settings = await appService.loadSettings();
       setSettings(settings);
 
-      const libraryBooks = await appService.loadLibraryBooks();
-      if (checkOpenWithBooks && isTauriAppPlatform()) {
-        await handleOpenWithBooks(appService, libraryBooks);
-      } else {
-        setCheckOpenWithBooks(false);
-        setLibrary(libraryBooks);
-      }
+      // Reuse the library from the store when we return from the reader
+      const library = libraryBooks.length > 0 ? libraryBooks : await appService.loadLibraryBooks();
+      setCheckOpenWithBooks(checkOpenWithBooks && (await handleOpenWithBooks(appService, library)));
+      setCheckLastOpenBooks(
+        checkLastOpenBooks &&
+          settings.openLastBooks &&
+          (await handleOpenLastBooks(appService, settings.lastOpenBooks, library)),
+      );
 
+      setLibrary(library);
       setLibraryLoaded(true);
       if (loadingTimeout) clearTimeout(loadingTimeout);
       setLoading(false);
     };
 
-    const handleOpenWithBooks = async (appService: AppService, libraryBooks: Book[]) => {
+    const handleOpenWithBooks = async (appService: AppService, library: Book[]) => {
       const openWithFiles = (await parseOpenWithFiles()) || [];
 
       if (openWithFiles.length > 0) {
-        await processOpenWithFiles(appService, openWithFiles, libraryBooks);
-      } else {
-        setCheckOpenWithBooks(false);
-        setLibrary(libraryBooks);
+        return await processOpenWithFiles(appService, openWithFiles, library);
       }
+      return false;
     };
 
     initLogin();
     initLibrary();
     return () => {
       setCheckOpenWithBooks(false);
+      setCheckLastOpenBooks(false);
       isInitiating.current = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -501,7 +543,7 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
     return null;
   }
 
-  if (checkOpenWithBooks) {
+  if (checkOpenWithBooks || checkLastOpenBooks) {
     return (
       loading && (
         <div className='fixed inset-0 z-50 flex items-center justify-center'>

apps/readest-app/src/app/page.tsx

@@ -1,7 +1,14 @@
-import { redirectToLibrary } from '@/utils/nav';
+'use client';
 
-const HomePage = () => {
-  redirectToLibrary();
-};
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
 
-export default HomePage;
+export default function HomePage() {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.replace('/library');
+  }, [router]);
+
+  return null;
+}

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

@@ -18,6 +18,7 @@ import Annotator from './annotator/Annotator';
 import FootnotePopup from './FootnotePopup';
 import HintInfo from './HintInfo';
 import DoubleBorder from './DoubleBorder';
+import TTSControl from './tts/TTSControl';
 
 interface BooksGridProps {
   bookKeys: string[];
@@ -42,7 +43,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
 
   return (
     <div
-      className={clsx('grid h-full flex-grow')}
+      className={clsx('relative grid h-full flex-grow')}
       style={{
         gridTemplateColumns: gridTemplate.columns,
         gridTemplateRows: gridTemplate.rows,
@@ -161,6 +162,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
           </div>
         );
       })}
+      <TTSControl />
     </div>
   );
 };

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

@@ -2,11 +2,12 @@ import React, { useEffect, useRef, useState } from 'react';
 import { BookDoc, getDirection } from '@/libs/document';
 import { BookConfig } from '@/types/book';
 import { FoliateView, wrappedFoliateView } from '@/types/view';
+import { useEnv } from '@/context/EnvContext';
 import { useThemeStore } from '@/store/themeStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useParallelViewStore } from '@/store/parallelViewStore';
-import { useClickEvent, useTouchEvent } from '../hooks/useIframeEvents';
-import { usePageFlip } from '../hooks/usePageFlip';
+import { useMouseEvent, useTouchEvent } from '../hooks/useIframeEvents';
+import { usePagination } from '../hooks/usePagination';
 import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { useProgressSync } from '../hooks/useProgressSync';
 import { useProgressAutoSave } from '../hooks/useProgressAutoSave';
@@ -26,12 +27,14 @@ import {
 import { getMaxInlineSize } from '@/utils/config';
 import { getDirFromUILanguage } from '@/utils/rtl';
 import { transformContent } from '@/services/transformService';
+import { lockScreenOrientation } from '@/utils/bridge';
 
 const FoliateViewer: React.FC<{
   bookKey: string;
   bookDoc: BookDoc;
   config: BookConfig;
 }> = ({ bookKey, bookDoc, config }) => {
+  const { appService } = useEnv();
   const containerRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<FoliateView | null>(null);
   const isViewCreated = useRef(false);
@@ -39,7 +42,6 @@ const FoliateViewer: React.FC<{
   const { getViewSettings, setViewSettings } = useReaderStore();
   const { getParallels } = useParallelViewStore();
   const { themeCode, isDarkMode } = useThemeStore();
-  const viewSettings = getViewSettings(bookKey)!;
 
   const [toastMessage, setToastMessage] = useState('');
   useEffect(() => {
@@ -47,7 +49,7 @@ const FoliateViewer: React.FC<{
     return () => clearTimeout(timer);
   }, [toastMessage]);
 
-  useUICSS(bookKey, viewSettings);
+  useUICSS(bookKey);
   useProgressSync(bookKey);
   useProgressAutoSave(bookKey);
 
@@ -56,27 +58,30 @@ const FoliateViewer: React.FC<{
     setProgress(bookKey, detail.cfi, detail.tocItem, detail.section, detail.location, detail.range);
   };
 
-  const docTransformHandler = (event: Event) => {
-    const { detail } = event as CustomEvent;
-    detail.data = Promise.resolve(detail.data)
-      .then((data) => {
-        const viewSettings = getViewSettings(bookKey);
-        if (detail.type === 'text/css') return transformStylesheet(data);
-        if (viewSettings && detail.type === 'application/xhtml+xml') {
-          const ctx = {
-            bookKey,
-            viewSettings,
-            content: data,
-            transformers: ['punctuation'],
-          };
-          return Promise.resolve(transformContent(ctx));
-        }
-        return data;
-      })
-      .catch((e) => {
-        console.error(new Error(`Failed to load ${detail.name}`, { cause: e }));
-        return '';
-      });
+  const getDocTransformHandler = ({ width, height }: { width: number; height: number }) => {
+    return (event: Event) => {
+      const { detail } = event as CustomEvent;
+      detail.data = Promise.resolve(detail.data)
+        .then((data) => {
+          const viewSettings = getViewSettings(bookKey);
+          if (viewSettings && detail.type === 'text/css')
+            return transformStylesheet(viewSettings, width, height, data);
+          if (viewSettings && detail.type === 'application/xhtml+xml') {
+            const ctx = {
+              bookKey,
+              viewSettings,
+              content: data,
+              transformers: ['punctuation', 'footnote'],
+            };
+            return Promise.resolve(transformContent(ctx));
+          }
+          return data;
+        })
+        .catch((e) => {
+          console.error(new Error(`Failed to load ${detail.name}`, { cause: e }));
+          return '';
+        });
+    };
   };
 
   const docLoadHandler = (event: Event) => {
@@ -97,6 +102,9 @@ const FoliateViewer: React.FC<{
       mountAdditionalFonts(detail.doc);
 
       if (!detail.doc.isEventListenersAdded) {
+        // listened events in iframes are posted to the main window
+        // and then used by useMouseEvent and useTouchEvent
+        // and more gesture events can be detected in the iframeEventHandlers
         detail.doc.isEventListenersAdded = true;
         detail.doc.addEventListener('keydown', handleKeydown.bind(null, bookKey));
         detail.doc.addEventListener('mousedown', handleMousedown.bind(null, bookKey));
@@ -114,18 +122,6 @@ const FoliateViewer: React.FC<{
     const detail = (event as CustomEvent).detail;
     if (detail.reason !== 'scroll' && detail.reason !== 'page') return;
 
-    if (detail.reason === 'scroll') {
-      const renderer = viewRef.current?.renderer;
-      const viewSettings = getViewSettings(bookKey)!;
-      if (renderer && viewSettings.continuousScroll) {
-        if (renderer.start <= 0) {
-          viewRef.current?.prev(1);
-          // sometimes viewSize has subpixel value that the end never reaches
-        } else if (renderer.end + 1 >= renderer.viewSize) {
-          viewRef.current?.next(1);
-        }
-      }
-    }
     const parallelViews = getParallels(bookKey);
     if (parallelViews && parallelViews.size > 0) {
       parallelViews.forEach((key) => {
@@ -139,9 +135,9 @@ const FoliateViewer: React.FC<{
     }
   };
 
-  const { handlePageFlip } = usePageFlip(bookKey, viewRef, containerRef);
-  useTouchEvent(bookKey, viewRef);
-  useClickEvent(bookKey, handlePageFlip);
+  const { handlePageFlip, handleContinuousScroll } = usePagination(bookKey, viewRef, containerRef);
+  const mouseHandlers = useMouseEvent(bookKey, handlePageFlip, handleContinuousScroll);
+  const touchHandlers = useTouchEvent(bookKey, handleContinuousScroll);
 
   useFoliateEvents(viewRef.current, {
     onLoad: docLoadHandler,
@@ -169,6 +165,11 @@ const FoliateViewer: React.FC<{
       document.body.append(view);
       containerRef.current?.appendChild(view);
 
+      const containerRect = containerRef.current?.getBoundingClientRect();
+      const width = containerRect?.width || window.innerWidth;
+      const height = containerRect?.height || window.innerHeight;
+
+      const viewSettings = getViewSettings(bookKey)!;
       const writingMode = viewSettings.writingMode;
       if (writingMode) {
         const settingsDir = getBookDirFromWritingMode(writingMode);
@@ -187,16 +188,23 @@ const FoliateViewer: React.FC<{
 
       const { book } = view;
 
-      book.transformTarget?.addEventListener('data', docTransformHandler);
+      book.transformTarget?.addEventListener('data', getDocTransformHandler({ width, height }));
       view.renderer.setStyles?.(getStyles(viewSettings));
 
       const isScrolled = viewSettings.scrolled!;
-      const marginPx = viewSettings.marginPx!;
-      const gapPercent = viewSettings.gapPercent!;
+      const showHeader = viewSettings.showHeader!;
+      const showFooter = viewSettings.showFooter!;
+      const isCompact = !showHeader && !showFooter;
+      const marginPx = isCompact ? viewSettings.compactMarginPx : viewSettings.marginPx;
+      const gapPercent = isCompact ? viewSettings.compactGapPercent : viewSettings.gapPercent;
       const animated = viewSettings.animated!;
       const maxColumnCount = viewSettings.maxColumnCount!;
       const maxInlineSize = getMaxInlineSize(viewSettings);
       const maxBlockSize = viewSettings.maxBlockSize!;
+      const screenOrientation = viewSettings.screenOrientation!;
+      if (appService?.isMobileApp) {
+        await lockScreenOrientation({ orientation: screenOrientation });
+      }
       if (animated) {
         view.renderer.setAttribute('animated', '');
       } else {
@@ -224,9 +232,10 @@ const FoliateViewer: React.FC<{
   return (
     <>
       <div
-        className='foliate-viewer h-[100%] w-[100%]'
-        onClick={(event) => handlePageFlip(event)}
         ref={containerRef}
+        className='foliate-viewer h-[100%] w-[100%]'
+        {...mouseHandlers}
+        {...touchHandlers}
       />
     </>
   );

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import clsx from 'clsx';
 import { RiArrowLeftWideLine, RiArrowRightWideLine } from 'react-icons/ri';
 import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
@@ -122,6 +122,12 @@ const FooterBar: React.FC<FooterBarProps> = ({
     }
   };
 
+  useEffect(() => {
+    if (hoveredBookKey !== bookKey) {
+      setActionTab('');
+    }
+  }, [hoveredBookKey, bookKey]);
+
   const getMarginProgressValue = (marginPx: number, gapPercent: number) => {
     return (marginPx / 88 + gapPercent / 10) * 50;
   };
@@ -131,7 +137,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
   const progressValid = !!progressInfo;
   const progressFraction =
     progressValid && progressInfo?.total > 0
-      ? ((progressInfo!.next ?? progressInfo!.current) + 1) / progressInfo!.total || 0
+      ? (progressInfo!.current + 1) / progressInfo!.total || 0
       : 0;
 
   return (

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

@@ -35,7 +35,7 @@ const PageInfoView: React.FC<PageInfoProps> = ({
       : ''
     : pageinfo
       ? _(isVertical ? '{{currentPage}} · {{totalPage}}' : 'Loc. {{currentPage}} / {{totalPage}}', {
-          currentPage: (pageinfo.next ?? pageinfo.current) + 1,
+          currentPage: pageinfo.current + 1,
           totalPage: pageinfo.total,
         })
       : '';

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

@@ -94,7 +94,7 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
   }, []);
 
   useEffect(() => {
-    if (!appService?.isMobile) return;
+    if (!appService?.isMobileApp) return;
     const systemUIVisible = !!hoveredBookKey;
     setSystemUIVisibility({ visible: systemUIVisible, darkMode: isDarkMode });
     if (systemUIVisible) {

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

@@ -27,7 +27,6 @@ import Spinner from '@/components/Spinner';
 import SideBar from './sidebar/SideBar';
 import Notebook from './notebook/Notebook';
 import BooksGrid from './BooksGrid';
-import TTSControl from './tts/TTSControl';
 
 const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ ids, settings }) => {
   const router = useRouter();
@@ -77,6 +76,12 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
   }, []);
 
   useEffect(() => {
+    if (bookKeys && bookKeys.length > 0) {
+      const settings = useSettingsStore.getState().settings;
+      settings.lastOpenBooks = bookKeys.map((key) => key.split('-')[0]!);
+      saveSettings(envConfig, settings);
+    }
+
     if (isTauriAppPlatform()) tauriHandleOnCloseWindow(handleCloseBooks);
     window.addEventListener('beforeunload', handleCloseBooks);
     eventDispatcher.on('quit-app', handleCloseBooks);
@@ -160,7 +165,6 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
     <div className={clsx('flex', appService?.isIOSApp ? 'h-[100vh]' : 'h-dvh')}>
       <SideBar onGoToLibrary={handleCloseBooksToLibrary} />
       <BooksGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
-      <TTSControl />
       <Notebook />
       {showDetailsBook && (
         <BookDetailModal

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

@@ -1,14 +1,17 @@
 import React from 'react';
 import { RiFontSize } from 'react-icons/ri';
 
+import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useSettingsStore } from '@/store/settingsStore';
 import Button from '@/components/Button';
 
 const SettingsToggler = () => {
   const _ = useTranslation();
+  const { setHoveredBookKey } = useReaderStore();
   const { isFontLayoutSettingsDialogOpen, setFontLayoutSettingsDialogOpen } = useSettingsStore();
   const handleToggleSettings = () => {
+    setHoveredBookKey('');
     setFontLayoutSettingsDialogOpen(!isFontLayoutSettingsDialogOpen);
   };
   return (

apps/readest-app/src/app/reader/components/annotator/Annotator.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { FiSearch } from 'react-icons/fi';
 import { FiCopy } from 'react-icons/fi';
 import { PiHighlighterFill } from 'react-icons/pi';
@@ -22,10 +22,10 @@ import { useTranslation } from '@/hooks/useTranslation';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { useFoliateEvents } from '../../hooks/useFoliateEvents';
 import { useNotesSync } from '../../hooks/useNotesSync';
+import { useTextSelector } from '../../hooks/useTextSelector';
 import { getPopupPosition, getPosition, Position, TextSelection } from '@/utils/sel';
 import { eventDispatcher } from '@/utils/event';
 import { findTocItemBS } from '@/utils/toc';
-import { transformContent } from '@/services/transformService';
 import { HIGHLIGHT_COLOR_HEX } from '@/services/constants';
 import AnnotationPopup from './AnnotationPopup';
 import WiktionaryPopup from './WiktionaryPopup';
@@ -49,13 +49,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const view = getView(bookKey);
   const viewSettings = getViewSettings(bookKey)!;
 
-  const isShowingPopup = useRef(false);
-  const isTextSelected = useRef(false);
-  const isUpToShowPopup = useRef(false);
-  const isTouchstarted = useRef(false);
-  const selectionStartRef = useRef<number | null>(null);
-  const selectionAnchorRef = useRef<{ node: Node; offset: number } | null>(null);
-  const [selection, setSelection] = useState<TextSelection | null>();
+  const [selection, setSelection] = useState<TextSelection | null>(null);
   const [showAnnotPopup, setShowAnnotPopup] = useState(false);
   const [showWiktionaryPopup, setShowWiktionaryPopup] = useState(false);
   const [showWikipediaPopup, setShowWikipediaPopup] = useState(false);
@@ -84,134 +78,41 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const annotPopupHeight = useResponsiveSize(44);
   const androidSelectionHandlerHeight = 0;
 
+  const handleDismissPopup = () => {
+    setSelection(null);
+    setShowAnnotPopup(false);
+    setShowWiktionaryPopup(false);
+    setShowWikipediaPopup(false);
+    setShowDeepLPopup(false);
+  };
+
+  const handleDismissPopupAndSelection = () => {
+    handleDismissPopup();
+    view?.deselect();
+  };
+
+  const {
+    handleScroll,
+    handlePointerup,
+    handleSelectionchange,
+    handleAnnotPopup,
+    handleShowAnnotation,
+  } = useTextSelector(bookKey, setSelection, handleDismissPopup);
+
   const onLoad = (event: Event) => {
     const detail = (event as CustomEvent).detail;
     const { doc, index } = detail;
 
-    const isValidSelection = (sel: Selection) => {
-      return sel && sel.toString().trim().length > 0 && sel.rangeCount > 0;
-    };
-    const transformCtx = {
-      bookKey,
-      viewSettings: getViewSettings(bookKey)!,
-      content: '',
-      transformers: ['punctuation'],
-      reversePunctuationTransform: true,
-    };
-    const makeSelection = async (sel: Selection, rebuildRange = false) => {
-      isTextSelected.current = true;
-      const range = sel.getRangeAt(0);
-      if (rebuildRange) {
-        sel.removeAllRanges();
-        sel.addRange(range);
-      }
-      transformCtx['content'] = sel.toString();
-      setSelection({ key: bookKey, text: await transformContent(transformCtx), range, index });
-    };
-    // FIXME: extremely hacky way to dismiss system selection tools on iOS
-    const makeSelectionOnIOS = async (sel: Selection) => {
-      isTextSelected.current = true;
-      const range = sel.getRangeAt(0);
-      setTimeout(() => {
-        sel.removeAllRanges();
-        setTimeout(async () => {
-          if (!isTextSelected.current) return;
-          sel.addRange(range);
-          transformCtx['content'] = range.toString();
-          setSelection({ key: bookKey, text: await transformContent(transformCtx), range, index });
-        }, 40);
-      }, 0);
-    };
-    const handleSelectstart = () => {
-      selectionAnchorRef.current = null;
-    };
-    const handleSelectionchange = () => {
-      // Available on iOS, Android and Desktop, fired when the selection is changed
-      // Ideally the popup only shows when the selection is done,
-      // but on Android no proper events are fired to notify selection done or I didn't find it,
-      // we make the popup show when the selection is changed
-      if (osPlatform === 'ios' || appService?.isIOSApp) return;
-
-      const sel = doc.getSelection();
-      if (isValidSelection(sel)) {
-        if (osPlatform === 'android' && isTouchstarted.current) {
-          if (!selectionAnchorRef.current) {
-            const range = sel.getRangeAt(0);
-            selectionAnchorRef.current = {
-              node: range.startContainer,
-              offset: range.startOffset,
-            };
-          }
-          if (selectionAnchorRef.current) {
-            const currentRange = sel.getRangeAt(0);
-            if (
-              currentRange.startContainer !== selectionAnchorRef.current.node ||
-              currentRange.startOffset !== selectionAnchorRef.current.offset
-            ) {
-              const newRange = doc.createRange();
-              newRange.setStart(selectionAnchorRef.current.node, selectionAnchorRef.current.offset);
-              newRange.setEnd(currentRange.endContainer, currentRange.endOffset);
-
-              sel.removeAllRanges();
-              sel.addRange(newRange);
-            }
-          }
-          makeSelection(sel, false);
-        }
-      } else if (!isUpToShowPopup.current) {
-        isTextSelected.current = false;
-        setShowAnnotPopup(false);
-        setShowWiktionaryPopup(false);
-        setShowWikipediaPopup(false);
-        setShowDeepLPopup(false);
-      }
-    };
-    const handlePointerup = () => {
-      // Available on iOS and Desktop, fired when release the long press
-      // Note that on Android, pointerup event is fired after an additional touch event
-      const sel = doc.getSelection();
-      if (isValidSelection(sel)) {
-        if (osPlatform === 'ios' || appService?.isIOSApp) {
-          makeSelectionOnIOS(sel);
-        } else {
-          makeSelection(sel, true);
-        }
-      }
-    };
-    const handleTouchstart = () => {
-      // Available on iOS and Android for the initial touch event
-      isTouchstarted.current = true;
-    };
     const handleTouchmove = () => {
       // Available on iOS, on Android not fired
       // To make the popup not to follow the selection
       setShowAnnotPopup(false);
     };
-    const handleTouchend = () => {
-      // Available on iOS, on Android fired after an additional touch event
-      isTouchstarted.current = false;
-    };
-    const handleScroll = () => {
-      // Prevent the container from scrolling when text is selected in paginated mode
-      // This is a workaround for the issue #873
-      // TODO: support text selection across pages
-      if (
-        !viewSettings?.scrolled &&
-        isTextSelected.current &&
-        view?.renderer?.containerPosition &&
-        selectionStartRef.current
-      ) {
-        view.renderer.containerPosition = selectionStartRef.current;
-      }
-    };
     if (bookData.book?.format !== 'PDF') {
       view?.renderer?.addEventListener('scroll', handleScroll);
-      detail.doc?.addEventListener('pointerup', handlePointerup);
-      detail.doc?.addEventListener('touchstart', handleTouchstart);
       detail.doc?.addEventListener('touchmove', handleTouchmove);
-      detail.doc?.addEventListener('touchend', handleTouchend);
-      detail.doc?.addEventListener('selectstart', handleSelectstart);
-      detail.doc?.addEventListener('selectionchange', handleSelectionchange);
+      detail.doc?.addEventListener('pointerup', () => handlePointerup(doc, index));
+      detail.doc?.addEventListener('selectionchange', () => handleSelectionchange(doc, index));
 
       // Disable the default context menu on mobile devices,
       // although it should but doesn't work on iOS
@@ -259,60 +160,22 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     const annotation = annotations.find((annotation) => annotation.cfi === cfi);
     if (!annotation) return;
     const selection = { key: bookKey, annotated: true, text: annotation.text ?? '', range, index };
-    isUpToShowPopup.current = true;
     setSelectedStyle(annotation.style!);
     setSelectedColor(annotation.color!);
     setSelection(selection);
+    handleShowAnnotation();
   };
 
   useFoliateEvents(view, { onLoad, onDrawAnnotation, onShowAnnotation });
 
-  const handleDismissPopup = () => {
-    setSelection(null);
-    setShowAnnotPopup(false);
-    setShowWiktionaryPopup(false);
-    setShowWikipediaPopup(false);
-    setShowDeepLPopup(false);
-    isShowingPopup.current = false;
-  };
-
-  const handleDismissPopupAndSelection = () => {
-    handleDismissPopup();
-    view?.deselect();
-    isTextSelected.current = false;
-  };
-
   useEffect(() => {
-    if (isTextSelected.current && !selectionStartRef.current) {
-      selectionStartRef.current = view?.renderer?.start || null;
-    } else if (!isTextSelected.current) {
-      selectionStartRef.current = null;
-      selectionAnchorRef.current = null;
-    }
+    handleAnnotPopup(showAnnotPopup);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isTextSelected.current]);
+  }, [showAnnotPopup]);
 
   useEffect(() => {
-    const handleSingleClick = (): boolean => {
-      if (isUpToShowPopup.current) {
-        isUpToShowPopup.current = false;
-        return true;
-      }
-      if (isTextSelected.current) {
-        handleDismissPopupAndSelection();
-        return true;
-      }
-      if (showAnnotPopup || isShowingPopup.current) {
-        handleDismissPopup();
-        return true;
-      }
-      return false;
-    };
-
-    eventDispatcher.onSync('iframe-single-click', handleSingleClick);
     eventDispatcher.on('export-annotations', handleExportMarkdown);
     return () => {
-      eventDispatcher.offSync('iframe-single-click', handleSingleClick);
       eventDispatcher.off('export-annotations', handleExportMarkdown);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -332,7 +195,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         viewSettings.vertical ? annotPopupWidth : annotPopupHeight,
         popupPadding,
       );
-      if (isTextSelected.current && annotPopupPos.dir === 'down' && osPlatform === 'android') {
+      if (annotPopupPos.dir === 'down' && osPlatform === 'android') {
         triangPos.point.y += androidSelectionHandlerHeight;
         annotPopupPos.point.y += androidSelectionHandlerHeight;
       }
@@ -356,7 +219,6 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       setDictPopupPosition(dictPopupPos);
       setTranslatorPopupPosition(transPopupPos);
       setTrianglePosition(triangPos);
-      isShowingPopup.current = true;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selection, bookKey]);

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

@@ -16,11 +16,11 @@ const NotebookHeader: React.FC<{
   const iconSize14 = useResponsiveSize(14);
   return (
     <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'>
+      <div className='absolute inset-0 z-[-1] flex items-center justify-center space-x-2'>
         <LuNotebookPen />
         <div className='notebook-title hidden text-sm font-medium sm:flex'>{_('Notebook')}</div>
       </div>
-      <div className='z-10 flex items-center gap-x-4'>
+      <div className='flex w-full items-center gap-x-4'>
         <button
           onClick={handleTogglePin}
           className={clsx(
@@ -36,6 +36,8 @@ const NotebookHeader: React.FC<{
         >
           <MdArrowBackIosNew />
         </button>
+      </div>
+      <div className='flex items-center justify-end gap-x-4'>
         <button className='btn btn-ghost left-0 h-8 min-h-8 w-8 p-0'>
           <FiSearch />
         </button>

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

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 import { FiChevronUp, FiChevronLeft } from 'react-icons/fi';
 import { MdCheck } from 'react-icons/md';
+import { useEnv } from '@/context/EnvContext';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 
@@ -23,6 +24,7 @@ const FontDropdown: React.FC<DropdownProps> = ({
   onGetFontFamily,
 }) => {
   const _ = useTranslation();
+  const { appService } = useEnv();
   const iconSize16 = useResponsiveSize(16);
   const allOptions = [...options, ...(moreOptions ?? [])];
   const selectedOption = allOptions.find((option) => option.option === selected) ?? allOptions[0]!;
@@ -88,7 +90,13 @@ const FontDropdown: React.FC<DropdownProps> = ({
                         <MdCheck className='text-base-content' size={iconSize16} />
                       )}
                     </span>
-                    <span style={{ fontFamily: onGetFontFamily(option.option, family ?? '') }}>
+                    <span
+                      style={
+                        !appService?.isLinuxApp
+                          ? { fontFamily: onGetFontFamily(option.option, family ?? '') }
+                          : {}
+                      }
+                    >
                       {option.label || option.option}
                     </span>
                   </div>

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

@@ -12,6 +12,7 @@ import {
   LINUX_FONTS,
   MACOS_FONTS,
   MONOSPACE_FONTS,
+  NON_FREE_FONTS,
   SANS_SERIF_FONTS,
   SERIF_FONTS,
   WINDOWS_FONTS,
@@ -49,6 +50,10 @@ const handleFontFaceFont = (option: string, family: string) => {
   return `'${option}', ${family}`;
 };
 
+const filterNonFreeFonts = (font: string) => {
+  return !['android', 'linux'].includes(getOSPlatform()) || !NON_FREE_FONTS.includes(font);
+};
+
 const FontFace = ({
   className,
   family,
@@ -137,12 +142,26 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   useEffect(() => {
     if (isTauriAppPlatform()) {
       getSysFontsList().then((res) => {
-        if (res.error) {
+        if (res.error || Object.keys(res.fonts).length === 0) {
           console.error('Failed to get system fonts list:', res.error);
           return;
         }
-        const fonts = res.fonts.filter((font) => font && !isSymbolicFontName(font));
-        setSysFonts([...new Set(fonts)].sort((a, b) => a.localeCompare(b)));
+        const processedFonts: string[] = [];
+        Object.entries(res.fonts).forEach(([fontName, fontFamily]) => {
+          if (!fontName || isSymbolicFontName(fontName)) return;
+
+          const fontsInFamily = Object.entries(res.fonts).filter(
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            ([_, family]) => family === fontFamily,
+          );
+
+          if (fontsInFamily.length === 1) {
+            processedFonts.push(fontFamily);
+          } else {
+            processedFonts.push(fontName);
+          }
+        });
+        setSysFonts([...new Set(processedFonts)].sort((a, b) => a.localeCompare(b)));
       });
     }
   }, []);
@@ -291,7 +310,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               className='config-item-top'
               family='serif'
               label={_('Serif Font')}
-              options={[...SERIF_FONTS, ...CJK_SERIF_FONTS]}
+              options={[...SERIF_FONTS.filter(filterNonFreeFonts), ...CJK_SERIF_FONTS]}
               moreOptions={sysFonts}
               selected={serifFont}
               onSelect={setSerifFont}
@@ -299,7 +318,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
             <FontFace
               family='sans-serif'
               label={_('Sans-Serif Font')}
-              options={[...SANS_SERIF_FONTS, ...CJK_SANS_SERIF_FONTS]}
+              options={[...SANS_SERIF_FONTS.filter(filterNonFreeFonts), ...CJK_SANS_SERIF_FONTS]}
               moreOptions={sysFonts}
               selected={sansSerifFont}
               onSelect={setSansSerifFont}

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

@@ -33,6 +33,8 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [hyphenation, setHyphenation] = useState(viewSettings.hyphenation!);
   const [marginPx, setMarginPx] = useState(viewSettings.marginPx!);
   const [gapPercent, setGapPercent] = useState(viewSettings.gapPercent!);
+  const [compactMarginPx, setCompactMarginPx] = useState(viewSettings.compactMarginPx!);
+  const [compactGapPercent, setCompactGapPercent] = useState(viewSettings.compactGapPercent!);
   const [maxColumnCount, setMaxColumnCount] = useState(viewSettings.maxColumnCount!);
   const [maxInlineSize, setMaxInlineSize] = useState(viewSettings.maxInlineSize!);
   const [maxBlockSize, setMaxBlockSize] = useState(viewSettings.maxBlockSize!);
@@ -87,6 +89,13 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [marginPx]);
 
+  useEffect(() => {
+    if (compactMarginPx === viewSettings.compactMarginPx) return;
+    saveViewSettings(envConfig, bookKey, 'compactMarginPx', compactMarginPx, false, false);
+    view?.renderer.setAttribute('margin', `${compactMarginPx}px`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [compactMarginPx]);
+
   useEffect(() => {
     if (gapPercent === viewSettings.gapPercent) return;
     saveViewSettings(envConfig, bookKey, 'gapPercent', gapPercent, false, false);
@@ -97,6 +106,16 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [gapPercent]);
 
+  useEffect(() => {
+    if (compactGapPercent === viewSettings.compactGapPercent) return;
+    saveViewSettings(envConfig, bookKey, 'compactGapPercent', compactGapPercent, false, false);
+    view?.renderer.setAttribute('gap', `${compactGapPercent}%`);
+    if (viewSettings.scrolled) {
+      view?.renderer.setAttribute('flow', 'scrolled');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [compactGapPercent]);
+
   useEffect(() => {
     if (maxColumnCount === viewSettings.maxColumnCount) return;
     saveViewSettings(envConfig, bookKey, 'maxColumnCount', maxColumnCount, false, false);
@@ -179,6 +198,22 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [borderColor]);
 
+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'showBarsOnScroll', showBarsOnScroll, false, false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showBarsOnScroll]);
+
+  const applyMarginAndGap = () => {
+    const isCompact = !showHeader && !showFooter;
+    const marginPx = isCompact ? viewSettings.compactMarginPx : viewSettings.marginPx;
+    const gapPercent = isCompact ? viewSettings.compactGapPercent : viewSettings.gapPercent;
+    view?.renderer.setAttribute('margin', `${marginPx}px`);
+    view?.renderer.setAttribute('gap', `${gapPercent}%`);
+    if (viewSettings.scrolled) {
+      view?.renderer.setAttribute('flow', 'scrolled');
+    }
+  };
+
   useEffect(() => {
     if (showHeader === viewSettings.showHeader) return;
     if (showHeader && !viewSettings.vertical) {
@@ -194,14 +229,11 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       setViewSettings(bookKey, viewSettings);
     }
     saveViewSettings(envConfig, bookKey, 'showHeader', showHeader, false, false);
+
+    applyMarginAndGap();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showHeader]);
 
-  useEffect(() => {
-    saveViewSettings(envConfig, bookKey, 'showBarsOnScroll', showBarsOnScroll, false, false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showBarsOnScroll]);
-
   useEffect(() => {
     if (showFooter === viewSettings.showFooter) return;
     if (showFooter && !viewSettings.vertical) {
@@ -217,6 +249,8 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       setViewSettings(bookKey, viewSettings);
     }
     saveViewSettings(envConfig, bookKey, 'showFooter', showFooter, false, false);
+
+    applyMarginAndGap();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [showFooter]);
 
@@ -326,7 +360,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               onChange={setParagraphMargin}
               min={0}
               max={4}
-              step={0.5}
+              step={0.2}
             />
             <NumberInput
               label={_('Line Spacing')}
@@ -399,16 +433,16 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
           <div className='divide-base-200 divide-y'>
             <NumberInput
               label={_('Vertical Margins (px)')}
-              value={marginPx}
-              onChange={setMarginPx}
+              value={showFooter || showHeader ? marginPx : compactMarginPx}
+              onChange={showFooter || showHeader ? setMarginPx : setCompactMarginPx}
               min={!viewSettings.vertical && (showFooter || showHeader) ? 44 : 0}
               max={88}
               step={4}
             />
             <NumberInput
               label={_('Horizontal Margins (%)')}
-              value={gapPercent}
-              onChange={setGapPercent}
+              value={showFooter || showHeader ? gapPercent : compactGapPercent}
+              onChange={showFooter || showHeader ? setGapPercent : setCompactGapPercent}
               min={
                 viewSettings.vertical && (showFooter || showHeader)
                   ? Math.ceil(4800 / window.innerWidth)

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

@@ -1,12 +1,15 @@
 import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import i18n from 'i18next';
+import { IoPhoneLandscapeOutline, IoPhonePortraitOutline } from 'react-icons/io5';
+import { MdOutlineScreenRotation } from 'react-icons/md';
 import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useDeviceControlStore } from '@/store/deviceStore';
 import { getStyles } from '@/utils/style';
+import { lockScreenOrientation } from '@/utils/bridge';
 import { saveViewSettings } from '../../utils/viewSettingsHelper';
 import { TRANSLATED_LANGS } from '@/services/constants';
 import cssbeautify from 'cssbeautify';
@@ -28,6 +31,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [isContinuousScroll, setIsContinuousScroll] = useState(viewSettings.continuousScroll!);
   const [draftStylesheet, setDraftStylesheet] = useState(viewSettings.userStylesheet!);
   const [draftStylesheetSaved, setDraftStylesheetSaved] = useState(true);
+  const [screenOrientation, setScreenOrientation] = useState(viewSettings.screenOrientation!);
   const [error, setError] = useState<string | null>(null);
 
   const [inputFocusInAndroid, setInputFocusInAndroid] = useState(false);
@@ -160,6 +164,14 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isContinuousScroll]);
 
+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'screenOrientation', screenOrientation, false, false);
+    if (appService?.isMobileApp) {
+      lockScreenOrientation({ orientation: screenOrientation });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [screenOrientation]);
+
   return (
     <div
       className={clsx(
@@ -200,6 +212,47 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         </div>
       </div>
 
+      {appService?.isMobileApp && (
+        <div className='w-full'>
+          <h2 className='mb-2 font-medium'>{_('Screen')}</h2>
+          <div className='card border-base-200 bg-base-100 border shadow'>
+            <div className='divide-base-200 divide-y'>
+              <div className='config-item'>
+                <span className=''>{_('Orientation')}</span>
+                <div className='flex gap-4'>
+                  <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Auto')}>
+                    <button
+                      className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'auto' ? 'btn-active bg-base-300' : ''}`}
+                      onClick={() => setScreenOrientation('auto')}
+                    >
+                      <MdOutlineScreenRotation />
+                    </button>
+                  </div>
+
+                  <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Portrait')}>
+                    <button
+                      className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'portrait' ? 'btn-active bg-base-300' : ''}`}
+                      onClick={() => setScreenOrientation('portrait')}
+                    >
+                      <IoPhonePortraitOutline />
+                    </button>
+                  </div>
+
+                  <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Landscape')}>
+                    <button
+                      className={`btn btn-ghost btn-circle btn-sm ${screenOrientation === 'landscape' ? 'btn-active bg-base-300' : ''}`}
+                      onClick={() => setScreenOrientation('landscape')}
+                    >
+                      <IoPhoneLandscapeOutline />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       <div className='w-full'>
         <h2 className='mb-2 font-medium'>{_('Behavior')}</h2>
         <div className='card border-base-200 bg-base-100 border shadow'>

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

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { BookConfig } from '@/types/book';
+import { useEnv } from '@/context/EnvContext';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { RiFontSize } from 'react-icons/ri';
@@ -28,7 +29,10 @@ type TabConfig = {
 
 const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ bookKey }) => {
   const _ = useTranslation();
+  const { appService } = useEnv();
   const [isRtl] = useState(() => getDirFromUILanguage() === 'rtl');
+  const tabsRef = useRef<HTMLDivElement | null>(null);
+  const [showTabLabels, setShowTabLabels] = useState(false);
   const [activePanel, setActivePanel] = useState<SettingsPanelType>(
     (localStorage.getItem('lastConfigPanel') || 'Font') as SettingsPanelType,
   );
@@ -66,14 +70,56 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
     setFontLayoutSettingsDialogOpen(false);
   };
 
+  useEffect(() => {
+    const container = tabsRef.current;
+    if (!container) return;
+
+    const checkButtonWidths = () => {
+      const threshold = (container.clientWidth - 64) * 0.3;
+      const hideLabel = Array.from(container.querySelectorAll('button')).some((button) => {
+        const labelSpan = button.querySelector('span');
+        const labelText = labelSpan?.textContent || '';
+        const clone = button.cloneNode(true) as HTMLButtonElement;
+        clone.style.position = 'absolute';
+        clone.style.visibility = 'hidden';
+        clone.style.width = 'auto';
+        const cloneSpan = clone.querySelector('span');
+        if (cloneSpan) {
+          cloneSpan.classList.remove('hidden');
+          cloneSpan.textContent = labelText;
+        }
+        document.body.appendChild(clone);
+        const fullWidth = clone.scrollWidth;
+        document.body.removeChild(clone);
+        return fullWidth > threshold;
+      });
+      setShowTabLabels(!hideLabel);
+    };
+
+    checkButtonWidths();
+
+    const resizeObserver = new ResizeObserver(checkButtonWidths);
+    resizeObserver.observe(container);
+    const mutationObserver = new MutationObserver(checkButtonWidths);
+    mutationObserver.observe(container, {
+      subtree: true,
+      characterData: true,
+    });
+
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, []);
+
   return (
     <>
       <Dialog
         isOpen={true}
         onClose={handleClose}
         className='modal-open'
-        boxClassName='sm:min-w-[520px]'
-        snapHeight={window.innerWidth < 640 ? 0.7 : undefined}
+        boxClassName={clsx('sm:min-w-[520px]', appService?.isMobile && 'sm:max-w-[90%] sm:w-3/4')}
+        snapHeight={appService?.isMobile ? 0.7 : undefined}
         header={
           <div className='flex w-full items-center justify-between'>
             <button
@@ -85,10 +131,17 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
             >
               {isRtl ? <MdArrowForwardIos /> : <MdArrowBackIosNew />}
             </button>
-            <div className='dialog-tabs flex h-10 max-w-[100%] flex-grow items-center gap-2 pl-4'>
+            <div
+              ref={tabsRef}
+              className={clsx(
+                'dialog-tabs flex h-10 w-full items-center',
+                showTabLabels ? 'gap-2 sm:gap-1' : 'gap-4',
+              )}
+            >
               {tabConfig.map(({ tab, icon: Icon, label }) => (
                 <button
                   key={tab}
+                  data-tab={tab}
                   className={clsx(
                     'btn btn-ghost text-base-content btn-sm',
                     activePanel === tab ? 'btn-active' : '',
@@ -96,21 +149,23 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
                   onClick={() => handleSetActivePanel(tab)}
                 >
                   <Icon className='mr-0' />
-                  {window.innerWidth >= 500 ? label : ''}
+                  <span className={clsx('label', !showTabLabels && 'hidden')}>{label}</span>
                 </button>
               ))}
             </div>
             <div className='flex h-full items-center justify-end gap-x-2'>
               <Dropdown
                 className='dropdown-bottom dropdown-end'
-                buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
+                buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0 flex items-center justify-center'
                 toggleButton={<PiDotsThreeVerticalBold />}
               >
                 <DialogMenu />
               </Dropdown>
               <button
                 onClick={handleClose}
-                className={'bg-base-300/65 btn btn-ghost btn-circle hidden h-6 min-h-6 w-6 sm:flex'}
+                className={
+                  'bg-base-300/65 btn btn-ghost btn-circle hidden h-6 min-h-6 w-6 p-0 sm:flex'
+                }
               >
                 <svg
                   xmlns='http://www.w3.org/2000/svg'

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

@@ -9,6 +9,7 @@ import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { BookSearchConfig, BookSearchResult } from '@/types/book';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
+import { isCJKStr } from '@/utils/lang';
 import Dropdown from '@/components/Dropdown';
 import SearchOptions from './SearchOptions';
 
@@ -31,6 +32,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
   const _ = useTranslation();
   const { envConfig } = useEnv();
   const { settings } = useSettingsStore();
+  const { getBookData } = useBookDataStore();
   const { getConfig, saveConfig } = useBookDataStore();
   const { getView, getProgress } = useReaderStore();
   const [searchTerm, setSearchTerm] = useState(term);
@@ -38,7 +40,9 @@ const SearchBar: React.FC<SearchBarProps> = ({
 
   const view = getView(bookKey)!;
   const config = getConfig(bookKey)!;
+  const bookData = getBookData(bookKey)!;
   const progress = getProgress(bookKey)!;
+  const primaryLang = bookData.book?.primaryLanguage || 'en';
   const searchConfig = config.searchConfig! as BookSearchConfig;
 
   const queuedSearchTerm = useRef('');
@@ -104,8 +108,9 @@ const SearchBar: React.FC<SearchBarProps> = ({
   };
 
   const exceedMinSearchTermLength = (searchTerm: string) => {
-    const isCJK = /[\u4e00-\u9fa5\u3040-\u30ff\uac00-\ud7af]/.test(searchTerm);
-    const minLength = isCJK ? MINIMUM_SEARCH_TERM_LENGTH_CJK : MINIMUM_SEARCH_TERM_LENGTH_DEFAULT;
+    const minLength = isCJKStr(searchTerm)
+      ? MINIMUM_SEARCH_TERM_LENGTH_CJK
+      : MINIMUM_SEARCH_TERM_LENGTH_DEFAULT;
 
     return searchTerm.length >= minLength;
   };
@@ -118,12 +123,30 @@ const SearchBar: React.FC<SearchBarProps> = ({
     }
   };
 
+  const createAcceptNode = ({ withRT = true } = {}) => {
+    return (node: Node): number => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const name = (node as Element).tagName.toLowerCase();
+        if (name === 'script' || name === 'style' || (!withRT && name === 'rt')) {
+          return NodeFilter.FILTER_REJECT;
+        }
+        return NodeFilter.FILTER_SKIP;
+      }
+      return NodeFilter.FILTER_ACCEPT;
+    };
+  };
+
   const handleSearch = async (term: string) => {
     console.log('searching for:', term);
     isSearchPending.current = true;
     const { section } = progress;
     const index = searchConfig.scope === 'section' ? section.current : undefined;
-    const generator = await view.search({ ...searchConfig, query: term, index });
+    const generator = await view.search({
+      ...searchConfig,
+      index,
+      query: term,
+      acceptNode: createAcceptNode({ withRT: !primaryLang.startsWith('ja') }),
+    });
     const results: BookSearchResult[] = [];
     for await (const result of generator) {
       if (typeof result === 'string') {

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

@@ -32,7 +32,7 @@ const SearchResultItem: React.FC<SearchResultItemProps> = ({
     >
       <div className='line-clamp-3'>
         <span className=''>{excerpt.pre}</span>
-        <span className='font-semibold'>{excerpt.match}</span>
+        <span className='font-bold text-red-500'>{excerpt.match}</span>
         <span className=''>{excerpt.post}</span>
       </div>
     </li>

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

@@ -58,7 +58,7 @@ const TOCItemView: React.FC<{
   }, [expandedItems, item.href]);
 
   return (
-    <li className='w-full' style={{ paddingTop: '1px' }}>
+    <li className='border-base-300 w-full border-b sm:border-none sm:pt-[1px]'>
       <span
         role='treeitem'
         tabIndex={-1}
@@ -67,17 +67,26 @@ const TOCItemView: React.FC<{
         aria-expanded={isExpanded ? 'true' : 'false'}
         aria-selected={isActive ? 'true' : 'false'}
         data-href={item.href ? getContentMd5(item.href) : undefined}
-        className={`flex w-full cursor-pointer items-center rounded-md py-2 ${
-          isActive ? 'bg-base-300/85 hover:bg-base-300' : 'sm:hover:bg-base-300/85'
+        className={`flex w-full cursor-pointer items-center rounded-md py-4 sm:py-2 ${
+          isActive
+            ? 'sm:bg-base-300/85 sm:hover:bg-base-300 sm:text-base-content text-blue-500'
+            : 'sm:hover:bg-base-300/85'
         }`}
       >
         {item.subitems && (
-          <span onClick={handleToggleExpand} className='inline-block cursor-pointer'>
+          <span
+            onClick={handleToggleExpand}
+            className='inline-block cursor-pointer'
+            style={{
+              padding: '12px',
+              margin: '-12px',
+            }}
+          >
             {createExpanderIcon(isExpanded)}
           </span>
         )}
         <span
-          className='ml-2 truncate text-ellipsis'
+          className='ms-2 truncate text-ellipsis'
           style={{
             maxWidth: 'calc(100% - 24px)',
             whiteSpace: 'nowrap',
@@ -86,6 +95,11 @@ const TOCItemView: React.FC<{
         >
           {item.label}
         </span>
+        {item.location && (
+          <span className='text-base-content/50 ms-auto ps-1 text-xs sm:pe-1'>
+            {item.location.current + 1}
+          </span>
+        )}
       </span>
       {item.subitems && isExpanded && (
         <ol role='group'>
@@ -109,7 +123,7 @@ const TOCView: React.FC<{
   toc: TOCItem[];
 }> = ({ bookKey, toc }) => {
   const { getProgress } = useReaderStore();
-  const { sideBarBookKey } = useSidebarStore();
+  const { sideBarBookKey, isSideBarVisible } = useSidebarStore();
   const progress = getProgress(bookKey);
 
   const [expandedItems, setExpandedItems] = useState<string[]>([]);
@@ -132,9 +146,6 @@ const TOCView: React.FC<{
       }
       (currentItem as HTMLElement).setAttribute('aria-current', 'page');
     }
-    if (currentHref) {
-      expandParents(toc, currentHref);
-    }
   };
 
   useEffect(() => {
@@ -151,17 +162,23 @@ const TOCView: React.FC<{
     }
     return () => observer.disconnect();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [viewRef]);
+  }, [viewRef.current]);
 
   useEffect(() => {
     if (!progress || eventDispatcher.dispatchSync('tts-is-speaking')) return;
+    if (sideBarBookKey !== bookKey) return;
+    if (!isSideBarVisible) return;
+    const { sectionHref: currentHref } = progress;
+    if (currentHref) {
+      expandParents(toc, currentHref);
+    }
     scrollToProgress(progress);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [toc, progress, sideBarBookKey]);
+  }, [toc, progress, sideBarBookKey, isSideBarVisible]);
 
   return (
     <div className='rounded pt-2'>
-      <ul role='tree' ref={viewRef} className='px-2'>
+      <ul role='tree' ref={viewRef} className='pe-4 ps-2 sm:pe-2'>
         {toc &&
           toc.map((item, index) => (
             <TOCItemView

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

@@ -38,6 +38,7 @@ const TTSControl = () => {
   const [timeoutTimestamp, setTimeoutTimestamp] = useState(0);
   const [timeoutFunc, setTimeoutFunc] = useState<ReturnType<typeof setTimeout> | null>(null);
 
+  const viewSettings = getViewSettings(bookKey);
   const popupPadding = useResponsiveSize(POPUP_PADDING);
   const maxWidth = window.innerWidth - 2 * popupPadding;
   const popupWidth = Math.min(maxWidth, useResponsiveSize(POPUP_WIDTH));
@@ -153,7 +154,9 @@ const TTSControl = () => {
   };
 
   const handleTTSStop = async () => {
-    handleStop();
+    if (ttsControllerRef.current) {
+      handleStop();
+    }
   };
 
   const handleQueryIsSpeaking = () => {
@@ -284,16 +287,18 @@ const TTSControl = () => {
   const updatePanelPosition = () => {
     if (iconRef.current) {
       const rect = iconRef.current.getBoundingClientRect();
-      const windowRect = document.documentElement.getBoundingClientRect();
+      const parentRect =
+        iconRef.current.parentElement?.getBoundingClientRect() ||
+        document.documentElement.getBoundingClientRect();
 
       const trianglePos = {
         dir: 'up',
-        point: { x: rect.left + rect.width / 2, y: rect.top - 12 },
+        point: { x: rect.left + rect.width / 2 - parentRect.left, y: rect.top - 12 },
       } as Position;
 
       const popupPos = getPopupPosition(
         trianglePos,
-        windowRect,
+        parentRect,
         popupWidth,
         popupHeight,
         popupPadding,
@@ -313,8 +318,23 @@ const TTSControl = () => {
     setShowPanel(false);
   };
 
+  useEffect(() => {
+    if (!iconRef.current || !showPanel) return;
+    const parentElement = iconRef.current.parentElement;
+    if (!parentElement) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      updatePanelPosition();
+    });
+    resizeObserver.observe(parentElement);
+    return () => {
+      resizeObserver.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showPanel]);
+
   return (
-    <div>
+    <>
       {showPanel && (
         <div
           className='fixed inset-0'
@@ -326,7 +346,8 @@ const TTSControl = () => {
         <div
           ref={iconRef}
           className={clsx(
-            'fixed right-6 h-12 w-12',
+            'absolute h-12 w-12',
+            viewSettings?.rtl ? 'left-6' : 'right-6',
             appService?.hasSafeAreaInset
               ? 'bottom-[calc(env(safe-area-inset-bottom)+70px)]'
               : 'bottom-[70px] sm:bottom-14',
@@ -341,7 +362,7 @@ const TTSControl = () => {
           height={popupHeight}
           position={panelPosition}
           trianglePosition={trianglePosition}
-          className='bg-base-200 absolute flex shadow-lg'
+          className='bg-base-200 flex shadow-lg'
         >
           <TTSPanel
             bookKey={bookKey}
@@ -360,7 +381,7 @@ const TTSControl = () => {
           />
         </Popup>
       )}
-    </div>
+    </>
   );
 };
 

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

@@ -232,7 +232,10 @@ const TTSPanel = ({
           <MdFastForward size={iconSize32} />
         </button>
         <div className='dropdown dropdown-top'>
-          <button className='flex flex-col items-center justify-center rounded-full p-1'>
+          <button
+            tabIndex={0}
+            className='flex flex-col items-center justify-center rounded-full p-1'
+          >
             <MdAlarm size={iconSize32} />
             {timeoutCountdown && (
               <span

apps/readest-app/src/app/reader/hooks/useIframeEvents.ts

@@ -1,16 +1,45 @@
 import { useEffect } from 'react';
-import { FoliateView } from '@/types/view';
 import { useReaderStore } from '@/store/readerStore';
+import { throttle } from '@/utils/throttle';
+import { ScrollSource } from './usePagination';
 
-export const useClickEvent = (bookKey: string, handlePageFlip: (msg: MessageEvent) => void) => {
+export const useMouseEvent = (
+  bookKey: string,
+  handlePageFlip: (msg: MessageEvent | React.MouseEvent<HTMLDivElement, MouseEvent>) => void,
+  handleContinuousScroll: (source: ScrollSource, delta: number, threshold: number) => void,
+) => {
   const { hoveredBookKey } = useReaderStore();
+  const throttledScroll = throttle(handleContinuousScroll, 500, {
+    emitLast: false,
+  });
+  const handleMouseEvent = (msg: MessageEvent | React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (msg instanceof MessageEvent) {
+      if (msg.data && msg.data.bookKey === bookKey) {
+        if (msg.data.type === 'iframe-wheel') {
+          throttledScroll('mouse', -msg.data.deltaY, 0);
+        }
+        handlePageFlip(msg);
+      }
+    } else if (msg.type === 'wheel') {
+      const event = msg as React.WheelEvent<HTMLDivElement>;
+      throttledScroll('mouse', -event.deltaY, 0);
+    } else {
+      handlePageFlip(msg);
+    }
+  };
 
   useEffect(() => {
-    window.addEventListener('message', handlePageFlip);
+    window.addEventListener('message', handleMouseEvent);
     return () => {
-      window.removeEventListener('message', handlePageFlip);
+      window.removeEventListener('message', handleMouseEvent);
     };
-  }, [bookKey, hoveredBookKey, handlePageFlip]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bookKey, hoveredBookKey]);
+
+  return {
+    onClick: handlePageFlip,
+    onWheel: handleMouseEvent,
+  };
 };
 
 interface IframeTouch {
@@ -26,28 +55,28 @@ interface IframeTouchEvent {
 
 export const useTouchEvent = (
   bookKey: string,
-  viewRef: React.MutableRefObject<FoliateView | null>,
+  handleContinuousScroll: (source: ScrollSource, delta: number, threshold: number) => void,
 ) => {
   const { hoveredBookKey, setHoveredBookKey, getViewSettings } = useReaderStore();
-  const viewSettings = getViewSettings(bookKey)!;
 
   let touchStart: IframeTouch | null = null;
   let touchEnd: IframeTouch | null = null;
 
-  const onTouchStart = (e: IframeTouchEvent) => {
+  const onTouchStart = (e: IframeTouchEvent | React.TouchEvent<HTMLDivElement>) => {
     touchEnd = null;
     const touch = e.targetTouches[0];
     if (!touch) return;
     touchStart = touch;
   };
 
-  const onTouchMove = (e: IframeTouchEvent) => {
+  const onTouchMove = (e: IframeTouchEvent | React.TouchEvent<HTMLDivElement>) => {
     if (!touchStart) return;
     const touch = e.targetTouches[0];
     if (touch) {
       touchEnd = touch;
     }
     if (hoveredBookKey && touchEnd) {
+      const viewSettings = getViewSettings(bookKey)!;
       const deltaY = touchEnd.screenY - touchStart.screenY;
       const deltaX = touchEnd.screenX - touchStart.screenX;
       if (!viewSettings!.scrolled && !viewSettings!.vertical) {
@@ -60,7 +89,7 @@ export const useTouchEvent = (
     }
   };
 
-  const onTouchEnd = (e: IframeTouchEvent) => {
+  const onTouchEnd = (e: IframeTouchEvent | React.TouchEvent<HTMLDivElement>) => {
     if (!touchStart) return;
 
     const touch = e.targetTouches[0];
@@ -70,6 +99,7 @@ export const useTouchEvent = (
 
     const windowWidth = window.innerWidth;
     if (touchEnd) {
+      const viewSettings = getViewSettings(bookKey)!;
       const deltaY = touchEnd.screenY - touchStart.screenY;
       const deltaX = touchEnd.screenX - touchStart.screenX;
       // also check for deltaX to prevent swipe page turn from triggering the toggle
@@ -87,6 +117,7 @@ export const useTouchEvent = (
           setHoveredBookKey(null);
         }
       }
+      handleContinuousScroll('touch', deltaY, 30);
     }
 
     touchStart = null;
@@ -111,5 +142,11 @@ export const useTouchEvent = (
       window.removeEventListener('message', handleTouch);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hoveredBookKey, viewRef.current]);
+  }, [hoveredBookKey]);
+
+  return {
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+  };
 };

apps/readest-app/src/app/reader/hooks/usePagination.ts

@@ -7,7 +7,9 @@ import { eventDispatcher } from '@/utils/event';
 import { isTauriAppPlatform } from '@/services/environment';
 import { tauriGetWindowLogicalPosition } from '@/utils/window';
 
-export const usePageFlip = (
+export type ScrollSource = 'touch' | 'mouse';
+
+export const usePagination = (
   bookKey: string,
   viewRef: React.MutableRefObject<FoliateView | null>,
   containerRef: React.RefObject<HTMLDivElement>,
@@ -16,6 +18,7 @@ export const usePageFlip = (
   const { getViewSettings } = useReaderStore();
   const { hoveredBookKey, setHoveredBookKey } = useReaderStore();
   const { acquireVolumeKeyInterception, releaseVolumeKeyInterception } = useDeviceControlStore();
+
   const handlePageFlip = async (
     msg: MessageEvent | CustomEvent | React.MouseEvent<HTMLDivElement, MouseEvent>,
   ) => {
@@ -103,14 +106,51 @@ export const usePageFlip = (
         }
       }
     } else {
-      const { clientX } = msg;
-      const width = window.innerWidth;
-      const leftThreshold = width * 0.5;
-      const rightThreshold = width * 0.5;
-      if (clientX < leftThreshold) {
-        viewRef.current?.goLeft();
-      } else if (clientX > rightThreshold) {
-        viewRef.current?.goRight();
+      if (msg.type === 'click') {
+        const { clientX } = msg;
+        const width = window.innerWidth;
+        const leftThreshold = width * 0.5;
+        const rightThreshold = width * 0.5;
+        if (clientX < leftThreshold) {
+          viewRef.current?.goLeft();
+        } else if (clientX > rightThreshold) {
+          viewRef.current?.goRight();
+        }
+      }
+    }
+  };
+
+  const handleContinuousScroll = (mode: ScrollSource, scrollDelta: number, threshold: number) => {
+    const renderer = viewRef.current?.renderer;
+    const viewSettings = getViewSettings(bookKey)!;
+    if (renderer && viewSettings.scrolled && viewSettings.continuousScroll) {
+      const doScroll = () => {
+        // may have overscroll where the start is greater than 0
+        if (renderer.start <= scrollDelta && scrollDelta > threshold) {
+          setTimeout(() => {
+            viewRef.current?.prev(renderer.start + 1);
+          }, 100);
+          // sometimes viewSize has subpixel value that the end never reaches
+        } else if (
+          Math.ceil(renderer.end) - scrollDelta >= renderer.viewSize &&
+          scrollDelta < -threshold
+        ) {
+          setTimeout(() => {
+            viewRef.current?.next(renderer.viewSize - Math.floor(renderer.end) + 1);
+          }, 100);
+        }
+      };
+      if (mode === 'mouse') {
+        // we can always get mouse wheel events
+        doScroll();
+      } else if (mode === 'touch') {
+        // when the document height is less than the viewport height, we can't get the relocate event
+        if (renderer.size >= renderer.viewSize) {
+          doScroll();
+        } else {
+          // scroll after the relocate event
+          renderer.addEventListener('relocate', () => doScroll(), { once: true });
+        }
       }
     }
   };
@@ -135,5 +175,6 @@ export const usePageFlip = (
 
   return {
     handlePageFlip,
+    handleContinuousScroll,
   };
 };

apps/readest-app/src/app/reader/hooks/useTextSelector.ts

@@ -0,0 +1,158 @@
+import { useEffect, useRef } from 'react';
+import { useReaderStore } from '@/store/readerStore';
+import { useBookDataStore } from '@/store/bookDataStore';
+import { getOSPlatform } from '@/utils/misc';
+import { eventDispatcher } from '@/utils/event';
+import { getTextFromRange, TextSelection } from '@/utils/sel';
+import { transformContent } from '@/services/transformService';
+
+export const useTextSelector = (
+  bookKey: string,
+  setSelection: React.Dispatch<React.SetStateAction<TextSelection | null>>,
+  handleDismissPopup: () => void,
+) => {
+  const { getBookData } = useBookDataStore();
+  const { getView, getViewSettings } = useReaderStore();
+  const view = getView(bookKey);
+  const viewSettings = getViewSettings(bookKey)!;
+  const bookData = getBookData(bookKey)!;
+  const primaryLang = bookData.book?.primaryLanguage || 'en';
+  const osPlatform = getOSPlatform();
+
+  const isTextSelected = useRef(false);
+  const isAnnotPopuped = useRef(false);
+  const isAnnotUpToPopup = useRef(false);
+  const selectionPosition = useRef<number | null>(null);
+
+  const isValidSelection = (sel: Selection) => {
+    return sel && sel.toString().trim().length > 0 && sel.rangeCount > 0;
+  };
+
+  const transformCtx = {
+    bookKey,
+    viewSettings: getViewSettings(bookKey)!,
+    content: '',
+    transformers: ['punctuation'],
+    reversePunctuationTransform: true,
+  };
+  const getAnnotationText = async (range: Range) => {
+    transformCtx['content'] = getTextFromRange(range, primaryLang.startsWith('ja') ? ['rt'] : []);
+    return await transformContent(transformCtx);
+  };
+  const makeSelection = async (sel: Selection, index: number, rebuildRange = false) => {
+    isTextSelected.current = true;
+    const range = sel.getRangeAt(0);
+    if (rebuildRange) {
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
+    setSelection({ key: bookKey, text: await getAnnotationText(range), range, index });
+  };
+  // FIXME: extremely hacky way to dismiss system selection tools on iOS
+  const makeSelectionOnIOS = async (sel: Selection, index: number) => {
+    isTextSelected.current = true;
+    const range = sel.getRangeAt(0);
+    setTimeout(() => {
+      sel.removeAllRanges();
+      setTimeout(async () => {
+        if (!isTextSelected.current) return;
+        sel.addRange(range);
+        setSelection({ key: bookKey, text: await getAnnotationText(range), range, index });
+      }, 40);
+    }, 0);
+  };
+  const handleSelectionchange = (doc: Document, index: number) => {
+    // Available on iOS, Android and Desktop, fired when the selection is changed
+    // Ideally the popup only shows when the selection is done,
+    const sel = doc.getSelection() as Selection;
+    if (osPlatform === 'ios') return;
+    if (!isValidSelection(sel)) {
+      if (!isAnnotUpToPopup.current) {
+        handleDismissPopup();
+        isTextSelected.current = false;
+      }
+      return;
+    }
+
+    // On Android no proper events are fired to notify selection done,
+    // we make the popup show when the selection is changed
+    if (osPlatform === 'android') {
+      makeSelection(sel, index, false);
+    }
+  };
+  const handlePointerup = (doc: Document, index: number) => {
+    // Available on iOS and Desktop, fired at touchend or mouseup
+    // Note that on Android, pointerup event is fired after an additional touch event
+    const sel = doc.getSelection() as Selection;
+    if (isValidSelection(sel)) {
+      if (osPlatform === 'ios') {
+        makeSelectionOnIOS(sel, index);
+      } else {
+        makeSelection(sel, index, true);
+      }
+    }
+  };
+  const handleScroll = () => {
+    // Prevent the container from scrolling when text is selected in paginated mode
+    // This is a workaround for the issue #873
+    // TODO: support text selection across pages
+    if (!viewSettings?.scrolled && view?.renderer?.containerPosition && selectionPosition.current) {
+      view.renderer.containerPosition = selectionPosition.current;
+    }
+  };
+
+  const handleAnnotPopup = (showAnnotPopup: boolean) => {
+    setTimeout(
+      () => {
+        isAnnotPopuped.current = showAnnotPopup;
+      },
+      ['android', 'ios'].includes(osPlatform) ? 0 : 500,
+    );
+  };
+
+  const handleShowAnnotation = () => {
+    isAnnotUpToPopup.current = true;
+  };
+
+  useEffect(() => {
+    if (isTextSelected.current && !selectionPosition.current) {
+      selectionPosition.current = view?.renderer?.start || null;
+    } else if (!isTextSelected.current) {
+      selectionPosition.current = null;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isTextSelected.current]);
+
+  useEffect(() => {
+    const handleSingleClick = (): boolean => {
+      if (isAnnotUpToPopup.current) {
+        isAnnotUpToPopup.current = false;
+        return true;
+      }
+      if (isTextSelected.current) {
+        handleDismissPopup();
+        isTextSelected.current = false;
+        return true;
+      }
+      if (isAnnotPopuped.current) {
+        handleDismissPopup();
+        return true;
+      }
+      return false;
+    };
+
+    eventDispatcher.onSync('iframe-single-click', handleSingleClick);
+    return () => {
+      eventDispatcher.offSync('iframe-single-click', handleSingleClick);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return {
+    handleScroll,
+    handlePointerup,
+    handleSelectionchange,
+    handleAnnotPopup,
+    handleShowAnnotation,
+  };
+};

apps/readest-app/src/app/user/page.tsx

@@ -2,7 +2,6 @@
 
 import clsx from 'clsx';
 import React, { useState, useEffect, useRef } from 'react';
-import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { IoArrowBack } from 'react-icons/io5';
 import { PiUserCircle } from 'react-icons/pi';
@@ -20,6 +19,7 @@ import { eventDispatcher } from '@/utils/event';
 import { Toast } from '@/components/Toast';
 import WindowButtons from '@/components/WindowButtons';
 import Quota from '@/components/Quota';
+import UserAvatar from '@/components/UserAvatar';
 
 const ProfilePage = () => {
   const _ = useTranslation();
@@ -191,14 +191,12 @@ const ProfilePage = () => {
             <div className='mb-8 flex flex-col items-center gap-x-6 gap-y-4 md:flex-row md:items-start'>
               <div className='flex-shrink-0'>
                 {avatarUrl ? (
-                  <Image
-                    src={avatarUrl}
-                    alt={_('User avatar')}
-                    className='border-base-100 h-16 w-16 rounded-full border-4 md:h-24 md:w-24'
-                    referrerPolicy='no-referrer'
-                    width={128}
-                    height={128}
-                    priority
+                  <UserAvatar
+                    url={avatarUrl}
+                    size={128}
+                    DefaultIcon={PiUserCircle}
+                    className='h-16 w-16 md:h-24 md:w-24'
+                    borderClassName='border-base-100 border-4'
                   />
                 ) : (
                   <PiUserCircle className='h-16 w-16 md:h-24 md:w-24' />

apps/readest-app/src/components/AboutWindow.tsx

@@ -18,10 +18,12 @@ export const setAboutDialogVisible = (visible: boolean) => {
   }
 };
 
+type UpdateStatus = 'checking' | 'updating' | 'updated' | 'error';
+
 export const AboutWindow = () => {
   const _ = useTranslation();
   const { appService } = useEnv();
-  const [isUpdated, setIsUpdated] = useState(false);
+  const [updateStatus, setUpdateStatus] = useState<UpdateStatus | null>(null);
   const [browserInfo, setBrowserInfo] = useState('');
   const [isOpen, setIsOpen] = useState(false);
 
@@ -46,46 +48,63 @@ export const AboutWindow = () => {
   }, []);
 
   const handleCheckUpdate = async () => {
-    const update = await checkForAppUpdates(_, false);
-    if (update) {
-      setIsOpen(false);
-    } else {
-      setIsUpdated(true);
+    setUpdateStatus('checking');
+    try {
+      const update = await checkForAppUpdates(_, false);
+      if (update) {
+        setIsOpen(false);
+      } else {
+        setUpdateStatus('updated');
+      }
+    } catch (error) {
+      console.info('Error checking for updates:', error);
+      setUpdateStatus('error');
     }
   };
 
+  const handleClose = () => {
+    setIsOpen(false);
+    setUpdateStatus(null);
+  };
+
   return (
     <Dialog
       id='about_window'
       isOpen={isOpen}
       title={_('About Readest')}
-      onClose={() => setIsOpen(false)}
+      onClose={handleClose}
       boxClassName='sm:!w-96 sm:h-auto'
     >
       <div className='about-content flex h-full flex-col items-center justify-center'>
-        <div className='flex flex-col items-center px-8'>
-          <div className='mb-3'>
-            <Image src='/icon.png' alt='App Logo' className='h-24 w-24' width={64} height={64} />
+        <div className='flex flex-col items-center gap-2 px-8'>
+          <div className='mb-2 mt-8'>
+            <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'>
-            <h2 className='text-2xl font-bold'>Readest</h2>
+            <h2 className='mb-2 text-2xl font-bold'>Readest</h2>
             <p className='text-neutral-content text-center text-sm'>
               {_('Version {{version}}', { version: packageJson.version })} {`(${browserInfo})`}
             </p>
           </div>
           <div className='h-5'>
-            {appService?.hasUpdater && !isUpdated && (
-              <span className='badge badge-primary mt-2 cursor-pointer' onClick={handleCheckUpdate}>
+            {appService?.hasUpdater && !updateStatus && (
+              <span className='badge badge-primary cursor-pointer p-1' onClick={handleCheckUpdate}>
                 {_('Check Update')}
               </span>
             )}
-            {isUpdated && (
+            {updateStatus === 'updated' && (
               <p className='text-neutral-content mt-2 text-xs'>{_('Already the latest version')}</p>
             )}
+            {updateStatus === 'checking' && (
+              <p className='text-neutral-content mt-2 text-xs'>{_('Checking for updates...')}</p>
+            )}
+            {updateStatus === 'error' && (
+              <p className='text-error mt-2 text-xs'>{_('Error checking for updates')}</p>
+            )}
           </div>
         </div>
 
-        <div className='divider py-12 sm:py-2'></div>
+        <div className='divider py-16 sm:py-2'></div>
 
         <div className='flex flex-col items-center px-4 text-center' dir='ltr'>
           <p className='text-neutral-content text-sm'>

apps/readest-app/src/components/BookCover.tsx

@@ -12,7 +12,7 @@ interface BookCoverProps {
 
 const BookCover: React.FC<BookCoverProps> = ({ mode = 'grid', book, isPreview }) => {
   return (
-    <div className='relative flex h-full w-full'>
+    <div className={clsx('relative flex h-full w-full')}>
       <Image
         src={book.coverImageUrl!}
         alt={book.title}

apps/readest-app/src/components/BookDetailModal.tsx

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
-import Image from 'next/image';
 import { MdDelete, MdCloudDownload, MdCloudUpload } from 'react-icons/md';
 
 import { Book } from '@/types/book';
@@ -11,14 +10,16 @@ import { useTranslation } from '@/hooks/useTranslation';
 import {
   formatAuthors,
   formatDate,
+  formatFileSize,
   formatLanguage,
   formatPublisher,
   formatSubject,
   formatTitle,
 } from '@/utils/book';
 import Alert from '@/components/Alert';
-import Spinner from './Spinner';
 import Dialog from './Dialog';
+import Spinner from './Spinner';
+import BookCover from './BookCover';
 
 interface BookDetailModalProps {
   book: Book;
@@ -41,6 +42,7 @@ const BookDetailModal = ({
   const [loading, setLoading] = useState(false);
   const [showDeleteAlert, setShowDeleteAlert] = useState(false);
   const [bookMeta, setBookMeta] = useState<BookDoc['metadata'] | null>(null);
+  const [fileSize, setFileSize] = useState<number | null>(null);
   const { envConfig } = useEnv();
   const { settings } = useSettingsStore();
 
@@ -50,7 +52,9 @@ const BookDetailModal = ({
       const appService = await envConfig.getAppService();
       try {
         const details = await appService.fetchBookDetails(book, settings);
+        const size = await appService.getBookFileSize(book);
         setBookMeta(details);
+        setFileSize(size);
       } finally {
         if (loadingTimeout) clearTimeout(loadingTimeout);
         setLoading(false);
@@ -113,29 +117,9 @@ const BookDetailModal = ({
         <div className='flex w-full select-text items-center justify-center'>
           <div className='relative w-full rounded-lg'>
             <div className='mb-6 me-4 flex h-32 items-start'>
-              <div className='book-cover relative mr-10 aspect-[28/41] h-32 items-end shadow-lg'>
-                <Image
-                  src={book.coverImageUrl!}
-                  alt={formatTitle(book.title)}
-                  fill={true}
-                  className='w-10 object-cover'
-                  onError={(e) => {
-                    (e.target as HTMLImageElement).style.display = 'none';
-                    (e.target as HTMLImageElement).nextElementSibling?.classList.remove(
-                      'invisible',
-                    );
-                  }}
-                />
-                <div
-                  className={clsx(
-                    'invisible absolute inset-0 flex items-center justify-center p-1',
-                    'text-neutral-content rounded-none text-center font-serif text-base font-medium',
-                  )}
-                >
-                  {formatTitle(book.title)}
-                </div>
+              <div className='me-10 aspect-[28/41] h-32 shadow-lg'>
+                <BookCover mode='list' book={book} />
               </div>
-
               <div className='title-author flex h-32 flex-col justify-between'>
                 <div>
                   <p className='text-base-content mb-2 line-clamp-2 break-all text-lg font-bold'>
@@ -193,12 +177,6 @@ const BookDetailModal = ({
                     {formatLanguage(bookMeta.language) || _('Unknown')}
                   </p>
                 </div>
-                <div className='overflow-hidden'>
-                  <span className='font-bold'>{_('Identifier:')}</span>
-                  <p className='text-neutral-content line-clamp-1 text-sm'>
-                    {bookMeta.identifier || 'N/A'}
-                  </p>
-                </div>
                 <div className='overflow-hidden'>
                   <span className='font-bold'>{_('Subjects:')}</span>
                   <p className='text-neutral-content line-clamp-1 text-sm'>
@@ -211,6 +189,12 @@ const BookDetailModal = ({
                     {book.format || _('Unknown')}
                   </p>
                 </div>
+                <div className='overflow-hidden'>
+                  <span className='font-bold'>{_('File Size:')}</span>
+                  <p className='text-neutral-content line-clamp-1 text-sm'>
+                    {formatFileSize(fileSize) || _('Unknown')}
+                  </p>
+                </div>
               </div>
               <div>
                 <span className='font-bold'>{_('Description:')}</span>

apps/readest-app/src/components/Button.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
 import clsx from 'clsx';
+import React from 'react';
+import { useEnv } from '@/context/EnvContext';
 
 interface ButtonProps {
   icon: React.ReactNode;
@@ -18,6 +19,7 @@ const Button: React.FC<ButtonProps> = ({
   tooltipDirection = 'top',
   className,
 }) => {
+  const { appService } = useEnv();
   return (
     <div
       className={clsx(
@@ -32,6 +34,7 @@ const Button: React.FC<ButtonProps> = ({
       <button
         className={clsx(
           'btn btn-ghost h-8 min-h-8 w-8 p-0',
+          appService?.isMobileApp && 'hover:bg-transparent',
           disabled && 'btn-disabled !bg-transparent',
           className,
         )}

apps/readest-app/src/components/Dialog.tsx

@@ -3,6 +3,7 @@ import React, { ReactNode, useEffect, useState } from 'react';
 import { MdArrowBackIosNew, MdArrowForwardIos } from 'react-icons/md';
 import { useEnv } from '@/context/EnvContext';
 import { useDrag } from '@/hooks/useDrag';
+import { useThemeStore } from '@/store/themeStore';
 import { useDeviceControlStore } from '@/store/deviceStore';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { impactFeedback } from '@tauri-apps/plugin-haptics';
@@ -40,8 +41,9 @@ const Dialog: React.FC<DialogProps> = ({
   onClose,
 }) => {
   const { appService } = useEnv();
+  const { systemUIVisible, statusBarHeight } = useThemeStore();
   const { acquireBackKeyInterception, releaseBackKeyInterception } = useDeviceControlStore();
-  const [isFullHeightInMobile, setIsFullHeightInMobile] = React.useState(!snapHeight);
+  const [isFullHeightInMobile, setIsFullHeightInMobile] = useState(!snapHeight);
   const [isRtl] = useState(() => getDirFromUILanguage() === 'rtl');
   const iconSize22 = useResponsiveSize(22);
   const isMobile = window.innerWidth < 640;
@@ -60,6 +62,7 @@ const Dialog: React.FC<DialogProps> = ({
 
   useEffect(() => {
     if (!isOpen) return;
+    setIsFullHeightInMobile(!snapHeight);
     window.addEventListener('keydown', handleKeyDown);
     if (appService?.isAndroidApp) {
       acquireBackKeyInterception();
@@ -105,41 +108,39 @@ const Dialog: React.FC<DialogProps> = ({
       data.velocity > VELOCITY_THRESHOLD ||
       (data.velocity >= 0 && data.clientY >= window.innerHeight * snapLower)
     ) {
+      // dialog is dismissed
       const transitionDuration = 0.15 / Math.max(data.velocity, 0.5);
       modal.style.height = '100%';
       modal.style.transition = `transform ${transitionDuration}s ease-out`;
       modal.style.transform = 'translateY(100%)';
       overlay.style.transition = `opacity ${transitionDuration}s ease-out`;
       overlay.style.opacity = '0';
+      onClose();
       setTimeout(() => {
-        onClose();
         modal.style.transform = 'translateY(0%)';
       }, 300);
-      if (appService?.hasHaptics) {
-        impactFeedback('medium');
-      }
     } else if (
       snapHeight &&
       data.clientY > window.innerHeight * snapUpper &&
       data.clientY < window.innerHeight * snapLower
     ) {
+      // dialog is snapped
+      overlay.style.transition = `opacity 0.3s ease-out`;
+      overlay.style.opacity = `${1 - snapHeight}`;
+      modal.style.height = `${snapHeight * 100}%`;
+      modal.style.bottom = '0';
       modal.style.transition = `transform 0.3s ease-out`;
-      modal.style.transform = `translateY(${(1 - snapHeight) * window.innerHeight}px)`;
-      setTimeout(() => {
-        modal.style.height = `${snapHeight * 100}%`;
-      }, 100);
-      if (appService?.hasHaptics) {
-        impactFeedback('medium');
-      }
+      modal.style.transform = '';
     } else {
+      // dialog is opened without snap
       setIsFullHeightInMobile(true);
       modal.style.height = '100%';
       modal.style.transition = `transform 0.3s ease-out`;
       modal.style.transform = `translateY(0%)`;
       overlay.style.opacity = '0';
-      if (appService?.hasHaptics) {
-        impactFeedback('medium');
-      }
+    }
+    if (appService?.hasHaptics) {
+      impactFeedback('medium');
     }
   };
 
@@ -161,34 +162,33 @@ const Dialog: React.FC<DialogProps> = ({
       />
       <div
         className={clsx(
-          'modal-box settings-content z-20 flex flex-col rounded-none rounded-tl-2xl rounded-tr-2xl p-0 sm:rounded-2xl',
+          'modal-box settings-content absolute z-20 flex flex-col rounded-none rounded-tl-2xl rounded-tr-2xl p-0 sm:rounded-2xl',
           'h-full max-h-full w-full max-w-full',
           window.innerWidth < window.innerHeight
             ? 'sm:h-[50%] sm:w-3/4'
             : 'sm:h-[65%] sm:w-1/2 sm:max-w-[600px]',
-          appService?.hasSafeAreaInset &&
-            isFullHeightInMobile &&
-            'pt-[env(safe-area-inset-top)] sm:pt-0',
           boxClassName,
         )}
-        style={
-          snapHeight
-            ? {
-                height: `${snapHeight * 100}%`,
-                transform: `translateY(${(1 - snapHeight) * window.innerHeight}px)`,
-              }
-            : {}
-        }
+        style={{
+          paddingTop:
+            appService?.hasSafeAreaInset && isFullHeightInMobile
+              ? `max(env(safe-area-inset-top), ${systemUIVisible ? statusBarHeight : 0}px)`
+              : '0px',
+          ...(appService?.isMobile
+            ? { height: snapHeight ? `${snapHeight * 100}%` : '100%', bottom: 0 }
+            : {}),
+        }}
       >
-        {window.innerWidth < 640 && (
-          <div
-            className='drag-handle flex h-10 max-h-10 min-h-10 w-full cursor-row-resize items-center justify-center'
-            onMouseDown={handleDragStart}
-            onTouchStart={handleDragStart}
-          >
-            <div className='bg-base-content/50 h-1 w-10 rounded-full'></div>
-          </div>
-        )}
+        <div
+          className={clsx(
+            'drag-handle h-10 max-h-10 min-h-10 w-full cursor-row-resize items-center justify-center',
+            'transition-padding-top flex duration-300 ease-out sm:hidden',
+          )}
+          onMouseDown={handleDragStart}
+          onTouchStart={handleDragStart}
+        >
+          <div className='bg-base-content/50 h-1 w-10 rounded-full'></div>
+        </div>
         <div className='dialog-header bg-base-100 sticky top-1 z-10 flex items-center justify-between px-4'>
           {header ? (
             header

apps/readest-app/src/components/Slider.tsx

@@ -75,7 +75,10 @@ const Slider: React.FC<SliderProps> = ({
         <div
           className='bg-base-300 absolute h-full rounded-full'
           style={{
-            width: percentage > 0 ? `calc(${percentage}% + ${heightPx / 2}px)` : '0px',
+            width:
+              percentage > 0
+                ? `max(calc(${percentage}% + ${heightPx / 2}px), ${heightPx}px)`
+                : '0px',
             [isRtl ? 'right' : 'left']: 0,
           }}
         ></div>
@@ -94,7 +97,7 @@ const Slider: React.FC<SliderProps> = ({
           }}
         >
           <div
-            className={`bg-base-200 flex h-full items-center justify-center rounded-full text-sm shadow-md ${bubbleClassName}`}
+            className={`bg-base-200 flex h-full items-center justify-center rounded-full text-xs shadow-md ${bubbleClassName}`}
             style={{ width: `${heightPx}px` }}
           >
             {bubbleElement || bubbleLabel}

apps/readest-app/src/components/UserAvatar.tsx

@@ -0,0 +1,86 @@
+import clsx from 'clsx';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import { IconType } from 'react-icons';
+
+interface UserAvatarProps {
+  url: string;
+  size: number;
+  DefaultIcon: IconType;
+  className?: string;
+  borderClassName?: string;
+}
+
+const UserAvatar: React.FC<UserAvatarProps> = ({
+  url,
+  size,
+  className,
+  borderClassName,
+  DefaultIcon,
+}) => {
+  const [cachedImageUrl, setCachedImageUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!url) return;
+
+    const storageKey = `avatar_${btoa(url).replace(/[^a-zA-Z0-9]/g, '')}`;
+    const cached = localStorage.getItem(storageKey);
+    if (cached) {
+      setCachedImageUrl(cached);
+      return;
+    }
+
+    const cacheImage = async () => {
+      try {
+        const response = await fetch(url, { referrerPolicy: 'no-referrer' });
+        const blob = await response.blob();
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          const base64data = reader.result as string;
+          try {
+            localStorage.setItem(storageKey, base64data);
+            setCachedImageUrl(base64data);
+          } catch (e) {
+            console.warn('Failed to cache avatar in localStorage:', e);
+          }
+        };
+        reader.readAsDataURL(blob);
+      } catch (error) {
+        console.error('Failed to cache avatar:', error);
+      }
+    };
+
+    cacheImage();
+  }, [url]);
+
+  return (
+    <div
+      className='relative flex h-full w-full items-center justify-center rounded-full'
+      style={{ width: size, height: size }}
+    >
+      {url ? (
+        <div>
+          <Image
+            src={cachedImageUrl || url}
+            alt='User Avatar'
+            className={clsx('rounded-full', className, borderClassName)}
+            referrerPolicy='no-referrer'
+            width={size}
+            height={size}
+            onError={(e) => {
+              (e.target as HTMLImageElement).style.display = 'none';
+              (e.target as HTMLImageElement).nextElementSibling?.classList.remove('invisible');
+            }}
+          />
+          <div className='invisible absolute inset-0 flex items-center justify-center'>
+            <DefaultIcon className={clsx('text-neutral-content', className)} />
+          </div>
+        </div>
+      ) : (
+        <DefaultIcon className='text-neutral-content' size={size} />
+      )}
+    </div>
+  );
+};
+
+export default UserAvatar;

apps/readest-app/src/helpers/updater.ts

@@ -47,7 +47,7 @@ export const checkForAppUpdates = async (
     return !!update;
   } else if (OS_TYPE === 'android') {
     try {
-      const response = await fetch(READEST_UPDATER_FILE);
+      const response = await fetch(READEST_UPDATER_FILE, { connectTimeout: 5000 });
       const data = await response.json();
       const isNewer = semver.gt(data.version, packageJson.version);
       if (isNewer && ('android-arm64' in data.platforms || 'android-universal' in data.platforms)) {
@@ -56,7 +56,7 @@ export const checkForAppUpdates = async (
       return isNewer;
     } catch (err) {
       console.warn('Failed to fetch Android update info', err);
-      return false;
+      throw new Error('Failed to fetch Android update info');
     }
   }
 

apps/readest-app/src/hooks/useDrag.ts

@@ -20,7 +20,6 @@ export const useDrag = (
 
   const handleDragStart = useCallback(
     (e: React.MouseEvent | React.TouchEvent) => {
-      e.preventDefault();
       isDragging.current = true;
 
       if ('touches' in e) {

apps/readest-app/src/hooks/useResponsiveSize.ts

@@ -1,11 +1,17 @@
+import { getOSPlatform } from '@/utils/misc';
 import { useMediaQuery } from 'react-responsive';
 
 // use desktop size as base size
 export const useResponsiveSize = (baseSize: number) => {
   const isPhone = useMediaQuery({ maxWidth: 480 });
   const isTablet = useMediaQuery({ minWidth: 481, maxWidth: 1024 });
-  if (isPhone) return baseSize * 1.25;
-  if (isTablet) return baseSize * 1.15;
+  if (typeof window === 'undefined') {
+    return baseSize;
+  }
+  const pixelRatio = window.devicePixelRatio || 2.4;
+  const isMobile = ['android', 'ios'].includes(getOSPlatform());
+  if (isPhone && isMobile) return baseSize * (pixelRatio / 3) * 1.25;
+  if (isTablet && isMobile) return baseSize * (pixelRatio / 3) * 1.25;
   return baseSize;
 };
 

apps/readest-app/src/hooks/useTheme.ts

@@ -16,11 +16,23 @@ export const useTheme = ({
 }: UseThemeProps = {}) => {
   const { appService } = useEnv();
   const { settings } = useSettingsStore();
-  const { themeColor, isDarkMode, updateAppTheme, setStatusBarHeight } = useThemeStore();
+  const {
+    themeColor,
+    isDarkMode,
+    showSystemUI,
+    dismissSystemUI,
+    updateAppTheme,
+    setStatusBarHeight,
+  } = useThemeStore();
 
   useEffect(() => {
     updateAppTheme(appThemeColor);
-    if (appService?.isMobile) {
+    if (appService?.isMobileApp) {
+      if (systemUIVisible) {
+        showSystemUI();
+      } else {
+        dismissSystemUI();
+      }
       setSystemUIVisibility({ visible: systemUIVisible, darkMode: isDarkMode });
     }
     if (appService?.isAndroidApp) {

apps/readest-app/src/hooks/useUICSS.ts

@@ -1,9 +1,11 @@
-import { ViewSettings } from '@/types/book';
 import { useEffect, useState } from 'react';
+import { useReaderStore } from '@/store/readerStore';
 
 // This hook allows you to inject custom CSS into the reader UI.
 // Note that the book content is rendered in an iframe, so UI CSS won't affect book rendering.
-export const useUICSS = (bookKey: string, viewSettings: ViewSettings) => {
+export const useUICSS = (bookKey: string) => {
+  const { getViewSettings } = useReaderStore();
+  const viewSettings = getViewSettings(bookKey);
   const [styleElement, setStyleElement] = useState<HTMLStyleElement | null>(null);
 
   useEffect(() => {

apps/readest-app/src/libs/document.ts

@@ -36,11 +36,18 @@ export const CFI = epubcfi;
 
 export type DocumentFile = File;
 
+export type Location = {
+  current: number;
+  next: number;
+  total: number;
+};
+
 export interface TOCItem {
   id: number;
   label: string;
   href: string;
   cfi?: string;
+  location?: Location;
   subitems?: TOCItem[];
 }
 
@@ -48,6 +55,8 @@ export interface SectionItem {
   id: string;
   cfi: string;
   size: number;
+  linear: string;
+  location?: Location;
 }
 
 export interface BookDoc {

apps/readest-app/src/services/appService.ts

@@ -33,6 +33,7 @@ import {
   DEFAULT_SYSTEM_SETTINGS,
   DEFAULT_CJK_VIEW_SETTINGS,
   DEFAULT_MOBILE_READSETTINGS,
+  DEFAULT_SCREEN_CONFIG,
 } from './constants';
 import { getOSPlatform, isCJKEnv, isContentURI, isValidURL } from '@/utils/misc';
 import { deserializeConfig, serializeConfig } from '@/utils/serializer';
@@ -48,6 +49,7 @@ export abstract class BaseAppService implements AppService {
   localBooksDir = '';
   isMobile = false;
   isMacOSApp = false;
+  isLinuxApp = false;
   isAppDataSandbox = false;
   isAndroidApp = false;
   isIOSApp = false;
@@ -94,6 +96,7 @@ export abstract class BaseAppService implements AppService {
         ...(isCJKEnv() ? DEFAULT_CJK_VIEW_SETTINGS : {}),
         ...DEFAULT_VIEW_CONFIG,
         ...DEFAULT_TTS_CONFIG,
+        ...DEFAULT_SCREEN_CONFIG,
         ...settings.globalViewSettings,
       };
     } catch {
@@ -113,6 +116,7 @@ export abstract class BaseAppService implements AppService {
           ...(isCJKEnv() ? DEFAULT_CJK_VIEW_SETTINGS : {}),
           ...DEFAULT_VIEW_CONFIG,
           ...DEFAULT_TTS_CONFIG,
+          ...DEFAULT_SCREEN_CONFIG,
         },
       } as SystemSettings;
 
@@ -410,6 +414,34 @@ export abstract class BaseAppService implements AppService {
     }
   }
 
+  async isBookAvailable(book: Book): Promise<boolean> {
+    const fp = getLocalBookFilename(book);
+    if (await this.fs.exists(fp, 'Books')) {
+      return true;
+    }
+    if (book.filePath) {
+      return await this.fs.exists(book.filePath, 'None');
+    }
+    if (book.url) {
+      return isValidURL(book.url);
+    }
+    return false;
+  }
+
+  async getBookFileSize(book: Book): Promise<number | null> {
+    const fp = getLocalBookFilename(book);
+    if (await this.fs.exists(fp, 'Books')) {
+      const file = await this.fs.openFile(fp, 'Books');
+      const size = file.size;
+      const f = file as ClosableFile;
+      if (f && f.close) {
+        await f.close();
+      }
+      return size;
+    }
+    return null;
+  }
+
   async loadBookContent(book: Book, settings: SystemSettings): Promise<BookContent> {
     let file: File;
     const fp = getLocalBookFilename(book);

apps/readest-app/src/services/constants.ts

@@ -4,6 +4,7 @@ import {
   BookSearchConfig,
   BookStyle,
   HighlightColor,
+  ScreenConfig,
   TTSConfig,
   ViewConfig,
   ViewSettings,
@@ -37,6 +38,8 @@ export const DEFAULT_SYSTEM_SETTINGS: Partial<SystemSettings> = {
   alwaysOnTop: false,
   autoCheckUpdates: true,
   screenWakeLock: true,
+  openLastBooks: false,
+  lastOpenBooks: [],
   autoImportBooksOnOpen: false,
   libraryViewMode: 'grid',
   librarySortBy: 'updated',
@@ -83,6 +86,8 @@ export const DEFAULT_BOOK_FONT: BookFont = {
 export const DEFAULT_BOOK_LAYOUT: BookLayout = {
   marginPx: 44,
   gapPercent: 5,
+  compactMarginPx: 0,
+  compactGapPercent: 0,
   scrolled: false,
   disableClick: false,
   swapClickArea: false,
@@ -114,7 +119,7 @@ export const DEFAULT_BOOK_STYLE: BookStyle = {
   invert: false,
   theme: 'light',
   overrideFont: false,
-  overrideLayout: true,
+  overrideLayout: false,
   userStylesheet: '',
 };
 
@@ -139,6 +144,10 @@ export const DEFAULT_TTS_CONFIG: TTSConfig = {
   ttsVoice: '',
 };
 
+export const DEFAULT_SCREEN_CONFIG: ScreenConfig = {
+  screenOrientation: 'auto',
+};
+
 export const DEFAULT_BOOK_SEARCH_CONFIG: BookSearchConfig = {
   scope: 'book',
   matchCase: false,
@@ -157,6 +166,8 @@ export const SERIF_FONTS = [
   'Times New Roman',
 ];
 
+export const NON_FREE_FONTS = ['Georgia', 'Times New Roman'];
+
 export const CJK_SERIF_FONTS = [
   _('LXGW WenKai GB Screen'),
   _('LXGW WenKai TC'),

apps/readest-app/src/services/nativeAppService.ts

@@ -30,6 +30,7 @@ import { LOCAL_BOOKS_SUBDIR } from './constants';
 declare global {
   interface Window {
     IS_ROUNDED?: boolean;
+    __READEST_UPDATER_DISABLED?: boolean;
   }
 }
 
@@ -213,6 +214,7 @@ export class NativeAppService extends BaseAppService {
   override isAndroidApp = OS_TYPE === 'android';
   override isIOSApp = OS_TYPE === 'ios';
   override isMacOSApp = OS_TYPE === 'macos';
+  override isLinuxApp = OS_TYPE === 'linux';
   override isMobileApp = ['android', 'ios'].includes(OS_TYPE);
   override hasTrafficLight = OS_TYPE === 'macos';
   override hasWindow = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
@@ -221,7 +223,10 @@ export class NativeAppService extends BaseAppService {
   override hasRoundedWindow = !(OS_TYPE === 'ios' || OS_TYPE === 'android') && !!window.IS_ROUNDED;
   override hasSafeAreaInset = OS_TYPE === 'ios' || OS_TYPE === 'android';
   override hasHaptics = OS_TYPE === 'ios' || OS_TYPE === 'android';
-  override hasUpdater = OS_TYPE !== 'ios' && !process.env['NEXT_PUBLIC_DISABLE_UPDATER'];
+  override hasUpdater =
+    OS_TYPE !== 'ios' &&
+    !process.env['NEXT_PUBLIC_DISABLE_UPDATER'] &&
+    !window.__READEST_UPDATER_DISABLED;
 
   override resolvePath(fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string } {
     return resolvePath(fp, base);

apps/readest-app/src/services/transformers/footnote.ts

@@ -0,0 +1,14 @@
+import type { Transformer } from './types';
+
+export const footnoteTransformer: Transformer = {
+  name: 'footnote',
+
+  transform: async (ctx) => {
+    let result = ctx.content;
+    result = result.replace(
+      /<aside\s+epub:type\s*=\s*["'](footnote|endnote|note|rearnote)["']([^>]*)>/gi,
+      '<aside class="epubtype-footnote" epub:type="$1"$2>',
+    );
+    return result;
+  },
+};

apps/readest-app/src/services/transformers/index.ts

@@ -1,9 +1,11 @@
 import type { Transformer } from './types';
+import { footnoteTransformer } from './footnote';
 import { translateTransformer } from './translate';
 import { punctuationTransformer } from './punctuation';
 
 export const availableTransformers: Transformer[] = [
   punctuationTransformer,
   translateTransformer,
+  footnoteTransformer,
   // Add more transformers here
 ];

apps/readest-app/src/services/tts/WebSpeechClient.ts

@@ -2,6 +2,7 @@ import { getUserLocale } from '@/utils/misc';
 import { TTSClient, TTSMessageEvent, TTSVoice } from './TTSClient';
 import { AsyncQueue } from '@/utils/queue';
 import { findSSMLMark, parseSSMLLang, parseSSMLMarks } from '@/utils/ssml';
+import { isCJKStr } from '@/utils/lang';
 import { TTSGranularity } from '@/types/view';
 import { TTSUtils } from './TTSUtils';
 
@@ -123,7 +124,7 @@ async function* speakWithMarks(
   const isCJK = (lang: string | null) => {
     const cjkLangs = ['zh', 'ja', 'kr'];
     if (lang && cjkLangs.some((cjk) => lang.startsWith(cjk))) return true;
-    return /[\u4e00-\u9fff\u3040-\u30ff\uac00-\ud7af]/.test(plainText);
+    return isCJKStr(plainText);
   };
 
   if (!isCJK(lang)) {

apps/readest-app/src/store/libraryStore.ts

@@ -1,21 +1,25 @@
 import { create } from 'zustand';
 import { Book } from '@/types/book';
-import { EnvConfigType } from '@/services/environment';
+import { EnvConfigType, isTauriAppPlatform } from '@/services/environment';
 
 interface LibraryState {
   library: Book[]; // might contain deleted books
   checkOpenWithBooks: boolean;
+  checkLastOpenBooks: boolean;
   getVisibleLibrary: () => Book[];
   setCheckOpenWithBooks: (check: boolean) => void;
+  setCheckLastOpenBooks: (check: boolean) => void;
   setLibrary: (books: Book[]) => void;
   updateBook: (envConfig: EnvConfigType, book: Book) => void;
 }
 
 export const useLibraryStore = create<LibraryState>((set, get) => ({
   library: [],
-  checkOpenWithBooks: true,
+  checkOpenWithBooks: isTauriAppPlatform(),
+  checkLastOpenBooks: isTauriAppPlatform(),
   getVisibleLibrary: () => get().library.filter((book) => !book.deletedAt),
   setCheckOpenWithBooks: (check) => set({ checkOpenWithBooks: check }),
+  setCheckLastOpenBooks: (check) => set({ checkLastOpenBooks: check }),
   setLibrary: (books) => set({ library: books }),
   updateBook: async (envConfig: EnvConfigType, book: Book) => {
     const appService = await envConfig.getAppService();

apps/readest-app/src/store/readerStore.ts

@@ -3,8 +3,8 @@ import { create } from 'zustand';
 import { BookContent, BookConfig, PageInfo, BookProgress, ViewSettings } from '@/types/book';
 import { EnvConfigType } from '@/services/environment';
 import { FoliateView } from '@/types/view';
-import { BookDoc, DocumentLoader, SectionItem, TOCItem } from '@/libs/document';
-import { updateTocCFI, updateTocID } from '@/utils/toc';
+import { BookDoc, DocumentLoader, TOCItem } from '@/libs/document';
+import { updateToc } from '@/utils/toc';
 import { useSettingsStore } from './settingsStore';
 import { useBookDataStore } from './bookDataStore';
 import { useLibraryStore } from './libraryStore';
@@ -122,12 +122,7 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
         const { book: loadedBookDoc } = await new DocumentLoader(file).open();
         const bookDoc = loadedBookDoc as BookDoc;
         if (bookDoc.toc?.length && bookDoc.sections?.length) {
-          updateTocID(bookDoc.toc);
-          const sections = bookDoc.sections.reduce((map: Record<string, SectionItem>, section) => {
-            map[section.id] = section;
-            return map;
-          }, {});
-          updateTocCFI(bookDoc, bookDoc.toc, sections);
+          updateToc(bookDoc, bookDoc.toc, bookDoc.sections);
         }
         // Set the book's language for formerly imported books, newly imported books have this field set
         book.primaryLanguage =

apps/readest-app/src/styles/globals.css

@@ -3,8 +3,6 @@
 @tailwind utilities;
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
   border-radius: 10px;
   scrollbar-gutter: auto !important;
   overscroll-behavior: none;
@@ -23,15 +21,8 @@
   scrollbar-gutter: unset !important;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #222222;
-    --foreground: #e0e0e0;
-  }
-}
-
 html[data-page='default'] {
-  background: #ffffff;
+  background: theme('colors.base-100');
 }
 
 html[data-page='library'] {
@@ -43,8 +34,6 @@ html[data-page='reader'] {
 }
 
 body {
-  color: var(--foreground);
-  background: var(--background);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
     sans-serif;
   border-radius: 10px;

apps/readest-app/src/types/book.ts

@@ -68,6 +68,8 @@ export type WritingMode = 'auto' | 'horizontal-tb' | 'horizontal-rl' | 'vertical
 export interface BookLayout {
   marginPx: number;
   gapPercent: number;
+  compactMarginPx: number;
+  compactGapPercent: number;
   scrolled: boolean;
   disableClick: boolean;
   swapClickArea: boolean;
@@ -124,7 +126,17 @@ export interface TTSConfig {
   ttsVoice: string;
 }
 
-export interface ViewSettings extends BookLayout, BookStyle, BookFont, ViewConfig, TTSConfig {}
+export interface ScreenConfig {
+  screenOrientation: 'auto' | 'portrait' | 'landscape';
+}
+
+export interface ViewSettings
+  extends BookLayout,
+    BookStyle,
+    BookFont,
+    ViewConfig,
+    TTSConfig,
+    ScreenConfig {}
 
 export interface BookProgress {
   location: string;
@@ -143,6 +155,7 @@ export interface BookSearchConfig {
   matchDiacritics: boolean;
   index?: number;
   query?: string;
+  acceptNode?: (node: Node) => number;
 }
 
 export interface SearchExcerpt {

apps/readest-app/src/types/settings.ts

@@ -27,6 +27,8 @@ export interface SystemSettings {
   alwaysOnTop: boolean;
   autoCheckUpdates: boolean;
   screenWakeLock: boolean;
+  openLastBooks: boolean;
+  lastOpenBooks: string[];
   autoImportBooksOnOpen: boolean;
   libraryViewMode: LibraryViewModeType;
   librarySortBy: LibrarySortByType;

apps/readest-app/src/types/system.ts

@@ -40,6 +40,7 @@ export interface AppService {
   isAndroidApp: boolean;
   isIOSApp: boolean;
   isMacOSApp: boolean;
+  isLinuxApp: boolean;
 
   selectDirectory(): Promise<string>;
   selectFiles(name: string, extensions: string[]): Promise<string[]>;
@@ -56,6 +57,8 @@ export interface AppService {
   deleteBook(book: Book, includingUploaded?: boolean): Promise<void>;
   uploadBook(book: Book, onProgress?: ProgressHandler): Promise<void>;
   downloadBook(book: Book, onlyCover?: boolean, onProgress?: ProgressHandler): Promise<void>;
+  isBookAvailable(book: Book): Promise<boolean>;
+  getBookFileSize(book: Book): Promise<number | null>;
   loadBookConfig(book: Book, settings: SystemSettings): Promise<BookConfig>;
   fetchBookDetails(book: Book, settings: SystemSettings): Promise<BookDoc['metadata']>;
   saveBookConfig(book: Book, config: BookConfig, settings?: SystemSettings): Promise<void>;

apps/readest-app/src/types/view.ts

@@ -48,7 +48,11 @@ export interface FoliateView extends HTMLElement {
     goTo?: (params: { index: number; anchor: number }) => void;
     setStyles?: (css: string) => void;
     getContents: () => { doc: Document; index?: number }[];
-    addEventListener: (type: string, listener: EventListener) => void;
+    addEventListener: (
+      type: string,
+      listener: EventListener,
+      option?: AddEventListenerOptions,
+    ) => void;
     removeEventListener: (type: string, listener: EventListener) => void;
   };
 }

apps/readest-app/src/utils/book.ts

@@ -47,6 +47,7 @@ export const getBaseFilename = (filename: string) => {
   const baseName = normalizedPath.split('/').pop()?.split('.').slice(0, -1).join('.') || '';
   return baseName;
 };
+
 export const INIT_BOOK_CONFIG: BookConfig = {
   updatedAt: 0,
 };
@@ -141,6 +142,18 @@ export const formatSubject = (subject: string | string[] | undefined) => {
   return Array.isArray(subject) ? subject.join(', ') : subject;
 };
 
+export const formatFileSize = (size: number | null) => {
+  if (size === null) return '';
+  const formatter = new Intl.NumberFormat('en', {
+    style: 'unit',
+    unit: 'byte',
+    unitDisplay: 'narrow',
+    notation: 'compact',
+    compactDisplay: 'short',
+  });
+  return formatter.format(size);
+};
+
 export const getCurrentPage = (book: Book, progress: BookProgress) => {
   const bookFormat = book.format;
   const { section, pageinfo } = progress;