release: version 0.9.51 (#1296)

Closes #1288

.github/workflows/release.yml

@@ -81,7 +81,7 @@ jobs:
             release: windows
             arch: x86_64
             rust_target: x86_64-pc-windows-msvc
-            args: '--target x86_64-pc-windows-msvc'
+            args: '--target x86_64-pc-windows-msvc --bundles nsis'
           - os: windows-latest
             release: windows
             arch: aarch64

README.md

@@ -48,12 +48,12 @@
 | **Annotations and Highlighting**        | Add highlights, bookmarks, and notes to enhance your reading experience.                       | ✅         |
 | **Excerpt Text for Note-Taking**        | Easily excerpt text from books for detailed notes and analysis.                                | ✅         |
 | **Dictionary/Wikipedia Lookup**         | Instantly look up words and terms when reading.                                                | ✅         |
-| **Translate with DeepL**                | Translate selected text instantly using DeepL for accurate translations.                       | ✅         |
 | **[Parallel Read][link-parallel-read]** | Read two books or documents simultaneously in a split-screen view.                             | ✅         |
 | **Customize Font and Layout**           | Adjust font, layout, theme mode, and theme colors for a personalized experience.               | ✅         |
 | **File Association and Open With**      | Quickly open files in Readest in your file browser with one-click.                             | ✅         |
 | **Sync across Platforms**               | Synchronize book files, reading progress, notes, and bookmarks across all supported platforms. | ✅         |
-| **Text-to-Speech (TTS) Support**        | Enable text-to-speech functionality for a more accessible reading experience.                  | ✅         |
+| **Translate with DeepL**                | From a single sentence to the entire book—translate instantly with DeepL.                      | ✅         |
+| **Text-to-Speech (TTS) Support**        | Enjoy smooth, multilingual narration—even within a single book.                                | ✅         |
 | **Library Management**                  | Organize, sort, and manage your entire ebook library.                                          | ✅         |
 
 ## Planned Features
@@ -78,10 +78,10 @@ Stay tuned for continuous improvements and updates! Contributions and suggestion
 
 ![Annotations](./data/screenshots/annotations.png)
 
-![DeepL](./data/screenshots/deepl.png)
-
 ![TTS](./data/screenshots/tts_speak_aloud.png)
 
+![DeepL](./data/screenshots/deepl.png)
+
 ![Footnote](./data/screenshots/footnote_popover.png)
 
 ![Wikipedia](./data/screenshots/wikipedia_vertical.png)

apps/readest-app/i18next-scanner.config.js

@@ -17,6 +17,7 @@ module.exports = {
       'el',
       'ko',
       'uk',
+      'nl',
       'pl',
       'pt',
       'ru',

apps/readest-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readest/readest-app",
-  "version": "0.9.41",
+  "version": "0.9.51",
   "private": true,
   "scripts": {
     "dev": "dotenv -e .env.tauri -- next dev",
@@ -32,6 +32,7 @@
     "release-ios-appstore": "dotenv -e .env.ios-appstore.local -- bash scripts/release-ios-appstore.sh",
     "preview": "NEXT_PUBLIC_APP_PLATFORM=web opennextjs-cloudflare && wrangler dev",
     "deploy": "NEXT_PUBLIC_APP_PLATFORM=web opennextjs-cloudflare && wrangler deploy",
+    "config-wrangler": "sed -i \"s/\\${TRANSLATIONS_KV_ID}/$TRANSLATIONS_KV_ID/g\" wrangler.toml",
     "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
   },
   "dependencies": {
@@ -67,7 +68,7 @@
     "js-md5": "^0.8.3",
     "jwt-decode": "^4.0.0",
     "next": "15.2.4",
-    "posthog-js": "^1.205.0",
+    "posthog-js": "^1.246.0",
     "react": "19.0.0",
     "react-color": "^2.19.3",
     "react-dom": "19.0.0",

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

@@ -5,7 +5,6 @@
   "Animation": "الرسوم المتحركة",
   "Annotate": "إضافة ملاحظة",
   "Apply": "تطبيق",
-  "Are you sure to delete the selected books?": "هل أنت متأكد من رغبتك في حذف الكتب المحددة؟",
   "Auto Mode": "الوضع التلقائي",
   "Behavior": "السلوك",
   "Book": "الكتاب",
@@ -42,8 +41,6 @@
   "Global Settings": "الإعدادات العامة",
   "Go Back": "العودة",
   "Go Forward": "التقدم",
-  "Go Left": "الذهاب لليسار",
-  "Go Right": "الذهاب لليمين",
   "Grass": "عشبي",
   "Gray": "رمادي",
   "Gruvbox": "چروفبوكس",
@@ -62,7 +59,6 @@
   "Match Whole Words": "مطابقة الكلمات الكاملة",
   "Maximum Number of Columns": "العدد الأقصى للأعمدة",
   "Minimum Font Size": "الحد الأدنى لحجم الخط",
-  "Misc": "أخرى",
   "Monospace Font": "خط أحادي المسافة (Monospace)",
   "More Info": "مزيد من المعلومات",
   "Nord": "نورد",
@@ -306,6 +302,40 @@
   "Checking for updates...": "جارٍ التحقق من التحديثات...",
   "Error checking for updates": "خطأ في التحقق من التحديثات",
   "Details": "التفاصيل",
-  "Cancel Selection": "إلغاء التحديد",
-  "File Size:": "حجم الملف:"
+  "File Size:": "حجم الملف:",
+  "Auto Detect": "الكشف التلقائي",
+  "Next Section": "القسم التالي",
+  "Previous Section": "القسم السابق",
+  "Next Page": "الصفحة التالية",
+  "Previous Page": "الصفحة السابقة",
+  "Are you sure to delete {{count}} selected book(s)?_zero": "هل أنت متأكد من حذف الكتب المحددة؟",
+  "Are you sure to delete {{count}} selected book(s)?_one": "هل أنت متأكد من حذف الكتاب المحدد؟",
+  "Are you sure to delete {{count}} selected book(s)?_two": "هل أنت متأكد من حذف الكتابين المحددين؟",
+  "Are you sure to delete {{count}} selected book(s)?_few": "هل أنت متأكد من حذف {{count}} كتب محددة؟",
+  "Are you sure to delete {{count}} selected book(s)?_many": "هل أنت متأكد من حذف {{count}} كتابًا محددًا؟",
+  "Are you sure to delete {{count}} selected book(s)?_other": "هل أنت متأكد من حذف {{count}} من الكتب المحددة؟",
+  "Are you sure to delete the selected book?": "هل أنت متأكد من حذف الكتاب المحدد؟",
+  "Deselect": "إلغاء",
+  "Select All": "الكل",
+  "No translation available.": "لا توجد ترجمة متاحة.",
+  "Translated by {{provider}}.": "ترجم بواسطة {{provider}}.",
+  "DeepL": "ديب إل",
+  "Google Translate": "ترجمة جوجل",
+  "Azure Translator": "مترجم أزور",
+  "Invert Image In Dark Mode": "عكس الصورة في الوضع المظلم",
+  "Help improve Readest": "ساعد في تحسين ريديست",
+  "Sharing anonymized statistics": "مشاركة إحصائيات مجهولة الهوية",
+  "Interface Language": "لغة الواجهة",
+  "Translation": "الترجمة",
+  "Enable Translation": "تمكين الترجمة",
+  "Translation Service": "خدمة الترجمة",
+  "Translate To": "ترجمة إلى",
+  "Disable Translation": "تعطيل الترجمة",
+  "Scroll": "تمرير",
+  "Overlap Pixels": "تداخل البكسلات",
+  "Click": "نقر",
+  "System Language": "لغة النظام",
+  "Security": "الأمان",
+  "Allow JavaScript": "السماح بـ JavaScript",
+  "Enable only if you trust the file.": "تمكين فقط إذا كنت تثق في الملف."
 }

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

@@ -5,7 +5,6 @@
   "Animation": "Animation",
   "Annotate": "Annotieren",
   "Apply": "Anwenden",
-  "Are you sure to delete the selected books?": "Möchten Sie die ausgewählten Bücher wirklich löschen?",
   "Auto Mode": "Automatischer Modus",
   "Behavior": "Verhalten",
   "Book": "Buch",
@@ -42,8 +41,6 @@
   "Global Settings": "Globale Einstellungen",
   "Go Back": "Zurück",
   "Go Forward": "Vorwärts",
-  "Go Left": "Nach links",
-  "Go Right": "Nach rechts",
   "Grass": "Grasgrün",
   "Gray": "Grau",
   "Gruvbox": "Gruvbox",
@@ -62,7 +59,6 @@
   "Match Whole Words": "Ganze Wörter",
   "Maximum Number of Columns": "Maximale Spaltenanzahl",
   "Minimum Font Size": "Minimale Schriftgröße",
-  "Misc": "Sonstiges",
   "Monospace Font": "Monospace-Schriftart",
   "More Info": "Weitere Informationen",
   "Nord": "Nord",
@@ -306,6 +302,36 @@
   "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:"
+  "File Size:": "Dateigröße:",
+  "Auto Detect": "Automatisch erkennen",
+  "Next Section": "Nächster Abschnitt",
+  "Previous Section": "Vorheriger Abschnitt",
+  "Next Page": "Nächste Seite",
+  "Previous Page": "Vorherige Seite",
+  "Are you sure to delete {{count}} selected book(s)?_one": "Möchtest du das ausgewählte Buch wirklich löschen?",
+  "Are you sure to delete {{count}} selected book(s)?_other": "Möchtest du die {{count}} ausgewählten Bücher wirklich löschen?",
+  "Are you sure to delete the selected book?": "Möchtest du das ausgewählte Buch wirklich löschen?",
+  "Deselect": "Aufheben",
+  "Select All": "Alle",
+  "No translation available.": "Keine Übersetzung verfügbar.",
+  "Translated by {{provider}}.": "Übersetzt von {{provider}}.",
+  "DeepL": "DeepL",
+  "Google Translate": "Google Übersetzer",
+  "Azure Translator": "Azure Übersetzer",
+  "Invert Image In Dark Mode": "Invertiere Bild im Dunkeln",
+  "Help improve Readest": "Readest verbessern helfen",
+  "Sharing anonymized statistics": "Anonymisierte Statistiken teilen",
+  "Interface Language": "Benutzeroberflächensprache",
+  "Translation": "Übersetzung",
+  "Enable Translation": "Übersetzung aktivieren",
+  "Translation Service": "Übersetzungsdienst",
+  "Translate To": "Übersetzen nach",
+  "Disable Translation": "Übersetzung deaktivieren",
+  "Scroll": "Scrollen",
+  "Overlap Pixels": "Überlappungspixel",
+  "Click": "Tippen",
+  "System Language": "Systemsprache",
+  "Security": "Sicherheit",
+  "Allow JavaScript": "JavaScript zulassen",
+  "Enable only if you trust the file.": "Nur aktivieren, wenn Sie der Datei vertrauen."
 }

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

@@ -5,7 +5,6 @@
   "Animation": "Κινούμενα σχέδια",
   "Annotate": "Σχολιασμός",
   "Apply": "Εφαρμογή",
-  "Are you sure to delete the selected books?": "Είστε βέβαιοι ότι θέλετε να διαγράψετε τα επιλεγμένα βιβλία;",
   "Auto Mode": "Αυτόματη λειτουργία",
   "Behavior": "Συμπεριφορά",
   "Book": "Βιβλίο",
@@ -42,8 +41,6 @@
   "Global Settings": "Γενικές ρυθμίσεις",
   "Go Back": "Πίσω",
   "Go Forward": "Μπροστά",
-  "Go Left": "Αριστερά",
-  "Go Right": "Δεξιά",
   "Grass": "Γρασίδι",
   "Gray": "Γκρι",
   "Gruvbox": "Gruvbox",
@@ -62,7 +59,6 @@
   "Match Whole Words": "Ταίριασμα ολόκληρων λέξεων",
   "Maximum Number of Columns": "Μέγιστος αριθμός στηλών",
   "Minimum Font Size": "Ελάχιστο μέγεθος γραμματοσειράς",
-  "Misc": "Διάφορα",
   "Monospace Font": "Γραμματοσειρά σταθερού πλάτους",
   "More Info": "Περισσότερες πληροφορίες",
   "Nord": "Nord",
@@ -306,6 +302,36 @@
   "Checking for updates...": "Έλεγχος για ενημερώσεις...",
   "Error checking for updates": "Σφάλμα κατά τον έλεγχο για ενημερώσεις",
   "Details": "Πληρ.",
-  "Cancel Selection": "Ακύρωση επιλογής",
-  "File Size:": "Μέγεθος αρχείου:"
+  "File Size:": "Μέγεθος αρχείου:",
+  "Auto Detect": "Αυτόματη ανίχνευση",
+  "Next Section": "Επόμενη ενότητα",
+  "Previous Section": "Προηγούμενη ενότητα",
+  "Next Page": "Επόμενη σελίδα",
+  "Previous Page": "Προηγούμενη σελίδα",
+  "Are you sure to delete {{count}} selected book(s)?_one": "Είστε σίγουροι ότι θέλετε να διαγράψετε το επιλεγμένο βιβλίο;",
+  "Are you sure to delete {{count}} selected book(s)?_other": "Είστε σίγουροι ότι θέλετε να διαγράψετε τα {{count}} επιλεγμένα βιβλία;",
+  "Are you sure to delete the selected book?": "Είστε σίγουροι ότι θέλετε να διαγράψετε το επιλεγμένο βιβλίο;",
+  "Deselect": "Άρση",
+  "Select All": "Όλα",
+  "No translation available.": "Δεν είναι διαθέσιμη καμία μετάφραση.",
+  "Translated by {{provider}}.": "Μεταφρασμένο από {{provider}}.",
+  "DeepL": "DeepL",
+  "Google Translate": "Μετάφραση Google",
+  "Azure Translator": "Μεταφραστής Azure",
+  "Invert Image In Dark Mode": "Αντιστροφή σε σκούρο",
+  "Help improve Readest": "Βοηθήστε στη βελτίωση του Readest",
+  "Sharing anonymized statistics": "Μοιράζομαι ανώνυμες στατιστικές",
+  "Interface Language": "Γλώσσα διεπαφής",
+  "Translation": "Μετάφραση",
+  "Enable Translation": "Ενεργοποίηση μετάφρασης",
+  "Translation Service": "Υπηρεσία μετάφρασης",
+  "Translate To": "Μετάφραση σε",
+  "Disable Translation": "Απενεργοποίηση μετάφρασης",
+  "Scroll": "Κύλιση",
+  "Overlap Pixels": "Επικάλυψη εικονοστοιχείων",
+  "Click": "Κλικ",
+  "System Language": "Γλώσσα συστήματος",
+  "Security": "Ασφάλεια",
+  "Allow JavaScript": "Επιτρέψτε JavaScript",
+  "Enable only if you trust the file.": "Ενεργοποιήστε μόνο εάν εμπιστεύεστε το αρχείο."
 }

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

@@ -5,7 +5,6 @@
   "Animation": "Animación",
   "Annotate": "Anotar",
   "Apply": "Aplicar",
-  "Are you sure to delete the selected books?": "¿Estás seguro de eliminar los libros seleccionados?",
   "Auto Mode": "Modo automático",
   "Behavior": "Comportamiento",
   "Book": "Libro",
@@ -42,8 +41,6 @@
   "Global Settings": "Configuración global",
   "Go Back": "Volver",
   "Go Forward": "Avanzar",
-  "Go Left": "Ir a la izquierda",
-  "Go Right": "Ir a la derecha",
   "Grass": "Hierba",
   "Gray": "Gris",
   "Gruvbox": "Gruvbox",
@@ -62,7 +59,6 @@
   "Match Whole Words": "Coincidir palabras completas",
   "Maximum Number of Columns": "Número máximo de columnas",
   "Minimum Font Size": "Tamaño de fuente mínimo",
-  "Misc": "Varios",
   "Monospace Font": "Fuente monoespaciada",
   "More Info": "Más información",
   "Nord": "Nord",
@@ -306,6 +302,37 @@
   "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:"
+  "File Size:": "Peso del archivo:",
+  "Auto Detect": "Detección automática",
+  "Next Section": "Siguiente sección",
+  "Previous Section": "Sección anterior",
+  "Next Page": "Página siguiente",
+  "Previous Page": "Página anterior",
+  "Are you sure to delete {{count}} selected book(s)?_one": "¿Seguro que quieres eliminar el libro seleccionado?",
+  "Are you sure to delete {{count}} selected book(s)?_many": "¿Seguro que quieres eliminar los {{count}} libros seleccionados?",
+  "Are you sure to delete {{count}} selected book(s)?_other": "¿Seguro que quieres eliminar los {{count}} libros seleccionados?",
+  "Are you sure to delete the selected book?": "¿Seguro que quieres eliminar el libro seleccionado?",
+  "Deselect": "Quitar",
+  "Select All": "Todo",
+  "No translation available.": "No hay traducción disponible.",
+  "Translated by {{provider}}.": "Traducido por {{provider}}.",
+  "DeepL": "DeepL",
+  "Google Translate": "Google Translate",
+  "Azure Translator": "Azure Translator",
+  "Invert Image In Dark Mode": "Invertir imagen en oscuro",
+  "Help improve Readest": "Ayuda a mejorar Readest",
+  "Sharing anonymized statistics": "Compartiendo estadísticas anónimas",
+  "Interface Language": "Idioma de la interfaz",
+  "Translation": "Traducción",
+  "Enable Translation": "Habilitar traducción",
+  "Translation Service": "Servicio de traducción",
+  "Translate To": "Traducir a",
+  "Disable Translation": "Deshabilitar traducción",
+  "Scroll": "Desplazar",
+  "Overlap Pixels": "Superponer píxeles",
+  "Click": "Click",
+  "System Language": "Idioma del sistema",
+  "Security": "Seguridad",
+  "Allow JavaScript": "Permitir JavaScript",
+  "Enable only if you trust the file.": "Permitir solo si confías en el archivo."
 }

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

@@ -5,7 +5,6 @@
   "Animation": "Animation",
   "Annotate": "Annoter",
   "Apply": "Appliquer",
-  "Are you sure to delete the selected books?": "Êtes-vous sûr de vouloir supprimer les livres sélectionnés ?",
   "Auto Mode": "Mode automatique",
   "Behavior": "Comportement",
   "Book": "Livre",
@@ -42,8 +41,6 @@
   "Global Settings": "Paramètres globaux",
   "Go Back": "Retour",
   "Go Forward": "Avancer",
-  "Go Left": "Aller à gauche",
-  "Go Right": "Aller à droite",
   "Grass": "Herbe",
   "Gray": "Gris",
   "Gruvbox": "Gruvbox",
@@ -62,7 +59,6 @@
   "Match Whole Words": "Mots entiers",
   "Maximum Number of Columns": "Nombre maximal de colonnes",
   "Minimum Font Size": "Taille minimale de police",
-  "Misc": "Divers",
   "Monospace Font": "Police monospace",
   "More Info": "Plus d'informations",
   "Nord": "Nord",
@@ -306,6 +302,37 @@
   "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 :"
+  "File Size:": "Taille du fichier :",
+  "Auto Detect": "Détection automatique",
+  "Next Section": "Section suivante",
+  "Previous Section": "Section précédente",
+  "Next Page": "Page suivante",
+  "Previous Page": "Page précédente",
+  "Are you sure to delete {{count}} selected book(s)?_one": "Supprimer le livre sélectionné ?",
+  "Are you sure to delete {{count}} selected book(s)?_many": "Supprimer les {{count}} livres sélectionnés ?",
+  "Are you sure to delete {{count}} selected book(s)?_other": "Supprimer les {{count}} livres sélectionnés ?",
+  "Are you sure to delete the selected book?": "Supprimer le livre sélectionné ?",
+  "Deselect": "Annuler",
+  "Select All": "Tous",
+  "No translation available.": "Aucune traduction disponible.",
+  "Translated by {{provider}}.": "Traduit par {{provider}}.",
+  "DeepL": "DeepL",
+  "Google Translate": "Google Traduction",
+  "Azure Translator": "Traducteur Azure",
+  "Invert Image In Dark Mode": "Inverser l'image en mode sombre",
+  "Help improve Readest": "Contribuer à améliorer Readest",
+  "Sharing anonymized statistics": "Partage de statistiques anonymisées",
+  "Interface Language": "Langue de l'interface",
+  "Translation": "Traduction",
+  "Enable Translation": "Activer la traduction",
+  "Translation Service": "Service de traduction",
+  "Translate To": "Traduire vers",
+  "Disable Translation": " désactiver la traduction",
+  "Scroll": "Défilement",
+  "Overlap Pixels": "Pixels de chevauchement",
+  "Click": "Cliquer",
+  "System Language": "Langue du système",
+  "Security": "Sécurité",
+  "Allow JavaScript": "Autoriser JavaScript",
+  "Enable only if you trust the file.": "Activer uniquement si vous faites confiance au fichier."
 }

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

@@ -5,7 +5,6 @@
   "Animation": "एनीमेशन",
   "Annotate": "टिप्पणी",
   "Apply": "लागू करें",
-  "Are you sure to delete the selected books?": "क्या आप चयनित पुस्तकों को हटाना चाहते हैं?",
   "Auto Mode": "स्वचालित मोड",
   "Behavior": "व्यवहार",
   "Book": "पुस्तक",
@@ -42,8 +41,6 @@
   "Global Settings": "वैश्विक सेटिंग्स",
   "Go Back": "वापस जाएं",
   "Go Forward": "आगे जाएं",
-  "Go Left": "बाएं जाएं",
-  "Go Right": "दाएं जाएं",
   "Grass": "घास",
   "Gray": "ग्रे",
   "Gruvbox": "ग्रूवबॉक्स",
@@ -62,7 +59,6 @@
   "Match Whole Words": "पूरे शब्द मैच करें",
   "Maximum Number of Columns": "कॉलम की अधिकतम संख्या",
   "Minimum Font Size": "न्यूनतम फ़ॉन्ट साइज़",
-  "Misc": "विविध",
   "Monospace Font": "मोनोस्पेस फ़ॉन्ट",
   "More Info": "अधिक जानकारी",
   "Nord": "नॉर्ड",
@@ -306,6 +302,36 @@
   "Checking for updates...": "अपडेट की जांच कर रहा है...",
   "Error checking for updates": "अपडेट की जांच करते समय त्रुटि",
   "Details": "विवरण",
-  "Cancel Selection": "चयन रद्द करें",
-  "File Size:": "फ़ाइल आकार:"
+  "File Size:": "फ़ाइल आकार:",
+  "Auto Detect": "स्वचालित पहचान",
+  "Next Section": "अगला अनुभाग",
+  "Previous Section": "पिछला अनुभाग",
+  "Next Page": "अगला पृष्ठ",
+  "Previous Page": "पिछला पृष्ठ",
+  "Are you sure to delete {{count}} selected book(s)?_one": "क्या आप चयनित पुस्तक हटाना चाहते हैं?",
+  "Are you sure to delete {{count}} selected book(s)?_other": "क्या आप चयनित {{count}} पुस्तकें हटाना चाहते हैं?",
+  "Are you sure to delete the selected book?": "क्या आप चयनित पुस्तक हटाना चाहते हैं?",
+  "Deselect": "रद्द करें",
+  "Select All": "सब चुनें",
+  "No translation available.": "कोई अनुवाद उपलब्ध नहीं है।",
+  "Translated by {{provider}}.": "{{provider}} द्वारा अनुवादित।",
+  "DeepL": "डीपएल",
+  "Google Translate": "गूगल अनुवाद",
+  "Azure Translator": "एज़्योर अनुवादक",
+  "Invert Image In Dark Mode": "अंधेरे में छवि को उलटें",
+  "Help improve Readest": "Readest में सुधार करने में मदद करें",
+  "Sharing anonymized statistics": "सांख्यिकी साझा करना",
+  "Interface Language": "इंटरफ़ेस भाषा",
+  "Translation": "अनुवाद",
+  "Enable Translation": "अनुवाद सक्षम करें",
+  "Translation Service": "अनुवाद सेवा",
+  "Translate To": "अनुवाद करें",
+  "Disable Translation": "अनुवाद अक्षम करें",
+  "Scroll": "स्क्रॉल",
+  "Overlap Pixels": "ओवरलैप पिक्सेल",
+  "Click": "क्लिक करें",
+  "System Language": "सिस्टम भाषा",
+  "Security": "सुरक्षा",
+  "Allow JavaScript": "जावास्क्रिप्ट की अनुमति दें",
+  "Enable only if you trust the file.": "केवल तभी सक्षम करें जब आप फ़ाइल पर भरोसा करते हों।"
 }

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

@@ -5,7 +5,6 @@
   "Animation": "Animasi",
   "Annotate": "Anotasi",
   "Apply": "Terapkan",
-  "Are you sure to delete the selected books?": "Apakah Anda yakin ingin menghapus buku yang dipilih?",
   "Auto Mode": "Mode Otomatis",
   "Behavior": "Perilaku",
   "Book": "Buku",
@@ -42,8 +41,6 @@
   "Global Settings": "Pengaturan Global",
   "Go Back": "Kembali",
   "Go Forward": "Maju",
-  "Go Left": "Ke Kiri",
-  "Go Right": "Ke Kanan",
   "Grass": "Rumput",
   "Gray": "Abu-abu",
   "Gruvbox": "Gruvbox",
@@ -62,7 +59,6 @@
   "Match Whole Words": "Cocokkan Kata Utuh",
   "Maximum Number of Columns": "Jumlah Kolom Maksimum",
   "Minimum Font Size": "Ukuran Font Minimum",
-  "Misc": "Lain-lain",
   "Monospace Font": "Font Monospace",
   "More Info": "Info Lebih Lanjut",
   "Nord": "Nord",
@@ -306,6 +302,35 @@
   "Checking for updates...": "Memeriksa pembaruan...",
   "Error checking for updates": "Kesalahan saat memeriksa pembaruan",
   "Details": "Detail",
-  "Cancel Selection": "Batalkan Pilihan",
-  "File Size:": "Ukuran File:"
+  "File Size:": "Ukuran File:",
+  "Auto Detect": "Deteksi Otomatis",
+  "Next Section": "Bagian Selanjutnya",
+  "Previous Section": "Bagian Sebelumnya",
+  "Next Page": "Halaman Berikutnya",
+  "Previous Page": "Halaman Sebelumnya",
+  "Are you sure to delete {{count}} selected book(s)?_other": "Apakah Anda yakin ingin menghapus {{count}} buku yang dipilih?",
+  "Are you sure to delete the selected book?": "Apakah Anda yakin ingin menghapus buku yang dipilih?",
+  "Deselect": "Batal",
+  "Select All": "Pilih Semua",
+  "No translation available.": "Tidak ada terjemahan yang tersedia.",
+  "Translated by {{provider}}.": "Terjemahan oleh {{provider}}.",
+  "DeepL": "DeepL",
+  "Google Translate": "Google Translate",
+  "Azure Translator": "Azure Translator",
+  "Invert Image In Dark Mode": "Inversi Gambar di Gelap",
+  "Help improve Readest": "Bantu tingkatkan Readest",
+  "Sharing anonymized statistics": "Berbagi statistik anonim",
+  "Interface Language": "Bahasa Antarmuka",
+  "Translation": "Terjemahan",
+  "Enable Translation": "Aktifkan Terjemahan",
+  "Translation Service": "Layanan Terjemahan",
+  "Translate To": "Terjemahkan Ke",
+  "Disable Translation": "Nonaktifkan Terjemahan",
+  "Scroll": "Scroll",
+  "Overlap Pixels": "Overlap Piksel",
+  "Click": "Klik",
+  "System Language": "Bahasa Sistem",
+  "Security": "Keamanan",
+  "Allow JavaScript": "Izinkan JavaScript",
+  "Enable only if you trust the file.": "Aktifkan hanya jika Anda mempercayai file tersebut."
 }

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

@@ -5,7 +5,6 @@
   "Animation": "Animazione",
   "Annotate": "Annota",
   "Apply": "Applica",
-  "Are you sure to delete the selected books?": "Sei sicuro di voler eliminare i libri selezionati?",
   "Auto Mode": "Modalità automatica",
   "Behavior": "Comportamento",
   "Book": "Libro",
@@ -42,8 +41,6 @@
   "Global Settings": "Impostazioni globali",
   "Go Back": "Indietro",
   "Go Forward": "Avanti",
-  "Go Left": "Vai a sinistra",
-  "Go Right": "Vai a destra",
   "Grass": "Erba",
   "Gray": "Grigio",
   "Gruvbox": "Gruvbox",
@@ -62,7 +59,6 @@
   "Match Whole Words": "Parole intere",
   "Maximum Number of Columns": "Numero massimo di colonne",
   "Minimum Font Size": "Dimensione minima font",
-  "Misc": "Varie",
   "Monospace Font": "Font monospazio",
   "More Info": "Maggiori informazioni",
   "Nord": "Nord",
@@ -306,6 +302,37 @@
   "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:"
+  "File Size:": "Dimensione file:",
+  "Auto Detect": "Rilevamento automatico",
+  "Next Section": "Sezione successiva",
+  "Previous Section": "Sezione precedente",
+  "Next Page": "Pagina successiva",
+  "Previous Page": "Pagina precedente",
+  "Are you sure to delete {{count}} selected book(s)?_one": "Sei sicuro di voler eliminare {{count}} libro selezionato?",
+  "Are you sure to delete {{count}} selected book(s)?_many": "Sei sicuro di voler eliminare {{count}} libri selezionati?",
+  "Are you sure to delete {{count}} selected book(s)?_other": "Sei sicuro di voler eliminare {{count}} libri selezionati?",
+  "Are you sure to delete the selected book?": "Sei sicuro di voler eliminare il libro selezionato?",
+  "Deselect": "Annulla",
+  "Select All": "Tutti",
+  "No translation available.": "Nessuna traduzione disponibile.",
+  "Translated by {{provider}}.": "Tradotto da {{provider}}.",
+  "DeepL": "DeepL",
+  "Google Translate": "Google Translate",
+  "Azure Translator": "Traduttore Azure",
+  "Invert Image In Dark Mode": "Inverti immagine in scuro",
+  "Help improve Readest": "Aiuta a migliorare Readest",
+  "Sharing anonymized statistics": "Condivisione di statistiche anonime",
+  "Interface Language": "Lingua dell'interfaccia",
+  "Translation": "Traduzione",
+  "Enable Translation": "Abilita traduzione",
+  "Translation Service": "Servizio di traduzione",
+  "Translate To": "Traduci in",
+  "Disable Translation": "Disabilita traduzione",
+  "Scroll": "Scorri",
+  "Overlap Pixels": "Pixel di sovrapposizione",
+  "Click": "Fai clic",
+  "System Language": "Lingua di sistema",
+  "Security": "Security",
+  "Allow JavaScript": "Consenti JavaScript",
+  "Enable only if you trust the file.": "Abilita solo se ti fidi del file."
 }

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

@@ -5,7 +5,6 @@
   "Animation": "アニメーション",
   "Annotate": "注釈",
   "Apply": "適用",
-  "Are you sure to delete the selected books?": "選択した書籍を削除してもよろしいですか？",
   "Auto Mode": "自動モード",
   "Behavior": "動作",
   "Book": "書籍",
@@ -42,8 +41,6 @@
   "Global Settings": "全体設定",
   "Go Back": "戻る",
   "Go Forward": "進む",
-  "Go Left": "左へ",
-  "Go Right": "右へ",
   "Grass": "グリーン",
   "Gray": "グレー",
   "Gruvbox": "グルーブボックス",
@@ -62,7 +59,6 @@
   "Match Whole Words": "単語全体を一致",
   "Maximum Number of Columns": "最大列数",
   "Minimum Font Size": "最小フォントサイズ",
-  "Misc": "その他",
   "Monospace Font": "等幅フォント",
   "More Info": "詳細情報",
   "Nord": "ノルド",
@@ -306,6 +302,35 @@
   "Checking for updates...": "更新を確認中...",
   "Error checking for updates": "更新の確認中にエラーが発生しました",
   "Details": "詳細",
-  "Cancel Selection": "選択をキャンセル",
-  "File Size:": "ファイルサイズ："
+  "File Size:": "ファイルサイズ：",
+  "Auto Detect": "自動検出",
+  "Next Section": "次のセクション",
+  "Previous Section": "前のセクション",
+  "Next Page": "次のページ",
+  "Previous Page": "前のページ",
+  "Are you sure to delete {{count}} selected book(s)?_other": "選択した{{count}}冊の本を削除してもよろしいですか？",
+  "Are you sure to delete the selected book?": "選択した本を削除してもよろしいですか？",
+  "Deselect": "解除",
+  "Select All": "全選択",
+  "No translation available.": "翻訳はありません。",
+  "Translated by {{provider}}.": "{{provider}}によって翻訳されました。",
+  "DeepL": "DeepL",
+  "Google Translate": "Google翻訳",
+  "Azure Translator": "Azure翻訳",
+  "Invert Image In Dark Mode": "ダークモードで画像を反転",
+  "Help improve Readest": "Readestを改善する手助け",
+  "Sharing anonymized statistics": "匿名化された統計情報を共有",
+  "Interface Language": "インターフェースの言語",
+  "Translation": "翻訳",
+  "Enable Translation": "翻訳を有効にする",
+  "Translation Service": "翻訳サービス",
+  "Translate To": "翻訳先",
+  "Disable Translation": "翻訳を無効にする",
+  "Scroll": "スクロール",
+  "Overlap Pixels": "重なりピクセル",
+  "Click": "クリック",
+  "System Language": "システム言語",
+  "Security": "セキュリティ",
+  "Allow JavaScript": "JavaScriptを許可",
+  "Enable only if you trust the file.": "ファイルを信頼する場合にのみ有効にしてください。"
 }

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

@@ -5,7 +5,6 @@
   "Animation": "애니메이션",
   "Annotate": "주석",
   "Apply": "적용",
-  "Are you sure to delete the selected books?": "선택한 책을 삭제하시겠습니까?",
   "Auto Mode": "자동 모드",
   "Behavior": "동작",
   "Book": "책",
@@ -42,8 +41,6 @@
   "Global Settings": "전역 설정",
   "Go Back": "뒤로",
   "Go Forward": "앞으로",
-  "Go Left": "왼쪽으로",
-  "Go Right": "오른쪽으로",
   "Grass": "잔디색",
   "Gray": "회색",
   "Gruvbox": "그러브박스",
@@ -62,7 +59,6 @@
   "Match Whole Words": "전체 단어 일치",
   "Maximum Number of Columns": "최대 열 수",
   "Minimum Font Size": "최소 글꼴 크기",
-  "Misc": "기타",
   "Monospace Font": "고정폭 글꼴",
   "More Info": "추가 정보",
   "Nord": "노드",
@@ -306,6 +302,35 @@
   "Checking for updates...": "업데이트 확인 중...",
   "Error checking for updates": "업데이트 확인 중 오류 발생",
   "Details": "세부정보",
-  "Cancel Selection": "선택 취소",
-  "File Size:": "파일 크기:"
+  "File Size:": "파일 크기:",
+  "Auto Detect": "자동 감지",
+  "Next Section": "다음 섹션",
+  "Previous Section": "이전 섹션",
+  "Next Page": "다음 페이지",
+  "Previous Page": "이전 페이지",
+  "Are you sure to delete {{count}} selected book(s)?_other": "선택한 {{count}}권의 책을 삭제하시겠습니까?",
+  "Are you sure to delete the selected book?": "선택한 책을 삭제하시겠습니까?",
+  "Deselect": "해제",
+  "Select All": "전체선택",
+  "No translation available.": "번역이 없습니다.",
+  "Translated by {{provider}}.": "{{provider}}에 의해 번역됨.",
+  "DeepL": "DeepL",
+  "Google Translate": "구글 번역",
+  "Azure Translator": "Azure 번역기",
+  "Invert Image In Dark Mode": "어두운 곳에서 이미지 반전",
+  "Help improve Readest": "Readest 개선에 도움을 주세요",
+  "Sharing anonymized statistics": "익명화된 통계 공유",
+  "Interface Language": "인터페이스 언어",
+  "Translation": "번역",
+  "Enable Translation": "번역 활성화",
+  "Translation Service": "번역 서비스",
+  "Translate To": "번역 대상 언어",
+  "Disable Translation": "번역 비활성화",
+  "Scroll": "스크롤",
+  "Overlap Pixels": "겹치는 픽셀",
+  "Click": "클릭",
+  "System Language": "시스템 언어",
+  "Security": "보안",
+  "Allow JavaScript": "JavaScript 허용",
+  "Enable only if you trust the file.": "파일을 신뢰하는 경우에만 활성화하세요."
 }

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

@@ -0,0 +1,337 @@
+{
+  "Email address": "E-mailadres",
+  "Your Password": "Uw wachtwoord",
+  "Your email address": "Uw e-mailadres",
+  "Your password": "Uw wachtwoord",
+  "Sign in": "Inloggen",
+  "Signing in...": "Bezig met inloggen...",
+  "Sign in with {{provider}}": "Inloggen met {{provider}}",
+  "Already have an account? Sign in": "Heeft u al een account? Log in",
+  "Create a Password": "Maak een wachtwoord aan",
+  "Sign up": "Registreren",
+  "Signing up...": "Bezig met registreren...",
+  "Check your email for the confirmation link": "Controleer uw e-mail voor de bevestigingslink",
+  "Signing in ...": "Bezig met inloggen ...",
+  "Send a magic link email": "Stuur een magic link e-mail",
+  "Check your email for the magic link": "Controleer uw e-mail voor de magic link",
+  "Send reset password instructions": "Stuur instructies voor wachtwoordherstel",
+  "Sending reset instructions ...": "Bezig met versturen van herstelinstructies ...",
+  "Forgot your password?": "Wachtwoord vergeten?",
+  "Check your email for the password reset link": "Controleer uw e-mail voor de link om uw wachtwoord te herstellen",
+  "Phone number": "Telefoonnummer",
+  "Your phone number": "Uw telefoonnummer",
+  "Token": "Token",
+  "Your OTP token": "Uw OTP-token",
+  "Verify token": "Token verifiëren",
+  "Sign in with Google": "Inloggen met Google",
+  "Sign in with Apple": "Inloggen met Apple",
+  "Sign in with GitHub": "Inloggen met GitHub",
+  "New Password": "Nieuw wachtwoord",
+  "Your new password": "Uw nieuwe wachtwoord",
+  "Update password": "Wachtwoord bijwerken",
+  "Updating password ...": "Wachtwoord bijwerken ...",
+  "Your password has been updated": "Uw wachtwoord is bijgewerkt",
+  "Open": "Openen",
+  "Group": "Groep",
+  "Details": "Details",
+  "Delete": "Verwijderen",
+  "Cancel": "Annuleren",
+  "Confirm Deletion": "Verwijdering bevestigen",
+  "Deselect Book": "Boek deselecteren",
+  "Select Book": "Boek selecteren",
+  "Show Book Details": "Boekdetails weergeven",
+  "Download Book": "Boek downloaden",
+  "Upload Book": "Boek uploaden",
+  "Deselect Group": "Groep deselecteren",
+  "Select Group": "Groep selecteren",
+  "Untitled Group": "Groep zonder titel",
+  "Group Books": "Boeken groeperen",
+  "Remove From Group": "Uit groep verwijderen",
+  "Create New Group": "Nieuwe groep maken",
+  "Save": "Opslaan",
+  "Confirm": "Bevestigen",
+  "From Local File": "Van lokaal bestand",
+  "Go Back": "Terug",
+  "Search Books...": "Boeken zoeken...",
+  "Clear Search": "Zoekopdracht wissen",
+  "Import Books": "Boeken importeren",
+  "Select Multiple Books": "Meerdere boeken selecteren",
+  "Select Books": "Boeken selecteren",
+  "Storage": "Opslag",
+  "{{percentage}}% of Cloud Storage Used.": "{{percentage}}% van cloudopslag gebruikt.",
+  "Logged in as {{userDisplayName}}": "Ingelogd als {{userDisplayName}}",
+  "Logged in": "Ingelogd",
+  "Account": "Account",
+  "Sign In": "Inloggen",
+  "Auto Upload Books to Cloud": "Boeken automatisch uploaden naar cloud",
+  "Auto Import on File Open": "Automatisch importeren bij bestand openen",
+  "Open Last Book on Start": "Open laatste boek bij opstarten",
+  "Check Updates on Start": "Controleer updates bij opstarten",
+  "Fullscreen": "Volledig scherm",
+  "Always on Top": "Altijd bovenaan",
+  "Keep Screen Awake": "Scherm wakker houden",
+  "Reload Page": "Pagina herladen",
+  "Download Readest": "Readest downloaden",
+  "About Readest": "Over Readest",
+  "List": "Lijst",
+  "Grid": "Raster",
+  "Title": "Titel",
+  "Author": "Auteur",
+  "Format": "Formaat",
+  "Date Read": "Datum gelezen",
+  "Date Added": "Datum toegevoegd",
+  "Ascending": "Oplopend",
+  "Descending": "Aflopend",
+  "Sort by...": "Sorteren op...",
+  "No supported files found. Supported formats: {{formats}}": "Geen ondersteunde bestanden gevonden. Ondersteunde formaten: {{formats}}",
+  "No chapters detected.": "Geen hoofdstukken gedetecteerd.",
+  "Failed to parse the EPUB file.": "EPUB-bestand kon niet worden verwerkt.",
+  "This book format is not supported.": "Dit boekformaat wordt niet ondersteund.",
+  "Failed to import book(s): {{filenames}}": "Importeren van boek(en) mislukt: {{filenames}}",
+  "Book uploaded: {{title}}": "Boek geüpload: {{title}}",
+  "Insufficient storage quota": "Onvoldoende opslagruimte",
+  "Failed to upload book: {{title}}": "Uploaden van boek mislukt: {{title}}",
+  "Book downloaded: {{title}}": "Boek gedownload: {{title}}",
+  "Failed to download book: {{title}}": "Downloaden van boek mislukt: {{title}}",
+  "Book deleted: {{title}}": "Boek verwijderd: {{title}}",
+  "Failed to delete book: {{title}}": "Verwijderen van boek mislukt: {{title}}",
+  "Your Library": "Uw bibliotheek",
+  "Welcome to your library. You can import your books here and read them anytime.": "Welkom bij uw bibliotheek. U kunt hier uw boeken importeren en ze op elk moment lezen.",
+  "Copied to notebook": "Gekopieerd naar notitieblok",
+  "No annotations to export": "Geen annotaties om te exporteren",
+  "Exported from Readest": "Geëxporteerd uit Readest",
+  "Highlights & Annotations": "Markeringen & annotaties",
+  "Untitled": "Zonder titel",
+  "Note": "Notitie",
+  "Copied to clipboard": "Gekopieerd naar klembord",
+  "Copy": "Kopiëren",
+  "Delete Highlight": "Markering verwijderen",
+  "Highlight": "Markeren",
+  "Annotate": "Annoteren",
+  "Search": "Zoeken",
+  "Dictionary": "Woordenboek",
+  "Wikipedia": "Wikipedia",
+  "Translate": "Vertalen",
+  "Speak": "Voorlezen",
+  "Unable to fetch the translation. Please log in first and try again.": "Kan de vertaling niet ophalen. Log eerst in en probeer het opnieuw.",
+  "Unable to fetch the translation. Try again later.": "Kan de vertaling niet ophalen. Probeer het later opnieuw.",
+  "Original Text": "Originele tekst",
+  "Auto Detect": "Automatisch detecteren",
+  "(detected)": "(gedetecteerd)",
+  "Translated Text": "Vertaalde tekst",
+  "Loading...": "Laden...",
+  "Bookmark": "Bladwijzer",
+  "Go Forward": "Vooruit",
+  "Small": "Klein",
+  "Large": "Groot",
+  "Notebook": "Notitieblok",
+  "Excerpts": "Fragmenten",
+  "Notes": "Notities",
+  "Add your notes here...": "Voeg hier uw notities toe...",
+  "Theme Mode": "Thema modus",
+  "Auto Mode": "Automatische modus",
+  "Light Mode": "Lichte modus",
+  "Dark Mode": "Donkere modus",
+  "Theme Color": "Themakleur",
+  "Custom": "Aangepast",
+  "Apply to All Books": "Toepassen op alle boeken",
+  "Apply to This Book": "Toepassen op dit boek",
+  "Global Settings": "Algemene instellingen",
+  "System Fonts": "Systeemlettertypen",
+  "Serif Font": "Serif lettertype",
+  "Sans-Serif Font": "Sans-serif lettertype",
+  "Font Size": "Lettergrootte",
+  "Default Font Size": "Standaard lettergrootte",
+  "Minimum Font Size": "Minimale lettergrootte",
+  "Font Weight": "Letterdikte",
+  "Font Family": "Lettertypefamilie",
+  "Default Font": "Standaard lettertype",
+  "CJK Font": "CJK lettertype",
+  "Override Book Font": "Boek lettertype overschrijven",
+  "Font Face": "Lettertype",
+  "Monospace Font": "Monospace lettertype",
+  "Scrolled Mode": "Scroll-modus",
+  "Writing Mode": "Schrijfmodus",
+  "Default": "Standaard",
+  "Horizontal Direction": "Horizontale richting",
+  "Vertical Direction": "Verticale richting",
+  "RTL Direction": "RTL-richting",
+  "Border Frame": "Randkader",
+  "Double Border": "Dubbele rand",
+  "Border Color": "Randkleur",
+  "Paragraph": "Alinea",
+  "Paragraph Margin": "Alinea marge",
+  "Line Spacing": "Regelafstand",
+  "Word Spacing": "Woordafstand",
+  "Letter Spacing": "Letterafstand",
+  "Text Indent": "Tekstinspringing",
+  "Full Justification": "Volledig uitvullen",
+  "Hyphenation": "Woordafbreking",
+  "Override Book Layout": "Boekopmaak overschrijven",
+  "Page": "Pagina",
+  "Vertical Margins (px)": "Verticale marges (px)",
+  "Horizontal Margins (%)": "Horizontale marges (%)",
+  "Maximum Number of Columns": "Maximum aantal kolommen",
+  "Maximum Column Height": "Maximale kolomhoogte",
+  "Maximum Column Width": "Maximale kolombreedte",
+  "Header & Footer": "Koptekst & voettekst",
+  "Show Header": "Koptekst weergeven",
+  "Show Footer": "Voettekst weergeven",
+  "Apply also in Scrolled Mode": "Ook toepassen in scroll-modus",
+  "Auto": "Automatisch",
+  "Language": "Taal",
+  "Animation": "Animatie",
+  "Paging Animation": "Paginering animatie",
+  "Screen": "Scherm",
+  "Orientation": "Oriëntatie",
+  "Portrait": "Portret",
+  "Landscape": "Landschap",
+  "Behavior": "Gedrag",
+  "Continuous Scroll": "Doorlopend scrollen",
+  "Volume Keys for Page Flip": "Volumetoetsen voor pagina omslaan",
+  "Clicks for Page Flip": "Klikken voor pagina omslaan",
+  "Swap Clicks Area": "Klikgebieden omwisselen",
+  "Custom CSS": "Aangepaste CSS",
+  "Enter your custom CSS here...": "Voer hier uw aangepaste CSS in...",
+  "Apply": "Toepassen",
+  "Font": "Lettertype",
+  "Layout": "Opmaak",
+  "Color": "Kleur",
+  "(from 'As You Like It', Act II)": "(uit 'As You Like It', Akte II)",
+  "Custom Theme": "Aangepast thema",
+  "Theme Name": "Themanaam",
+  "Text Color": "Tekstkleur",
+  "Background Color": "Achtergrondkleur",
+  "Link Color": "Linkkleur",
+  "Preview": "Voorbeeld",
+  "Font & Layout": "Lettertype & opmaak",
+  "Book Cover": "Boekomslag",
+  "More Info": "Meer informatie",
+  "Parallel Read": "Parallel lezen",
+  "Export Annotations": "Annotaties exporteren",
+  "Edit": "Bewerken",
+  "Search...": "Zoeken...",
+  "Book": "Boek",
+  "Chapter": "Hoofdstuk",
+  "Match Case": "Hoofdlettergevoelig",
+  "Match Whole Words": "Hele woorden",
+  "Match Diacritics": "Diakritische tekens",
+  "TOC": "Inhoudsopgave",
+  "Sidebar": "Zijbalk",
+  "TTS not supported for PDF": "TTS niet ondersteund voor PDF",
+  "TTS not supported in this device": "TTS niet ondersteund op dit apparaat",
+  "No Timeout": "Geen time-out",
+  "{{value}} minute": "{{value}} minuut",
+  "{{value}} minutes": "{{value}} minuten",
+  "{{value}} hour": "{{value}} uur",
+  "{{value}} hours": "{{value}} uren",
+  "Slow": "Langzaam",
+  "Fast": "Snel",
+  "Reading Progress Synced": "Leesvoortgang gesynchroniseerd",
+  "Cloud Storage": "Cloudopslag",
+  "Failed to delete user. Please try again later.": "Gebruiker verwijderen mislukt. Probeer het later opnieuw.",
+  "Free Tier": "Gratis niveau",
+  "Community Support": "Community-ondersteuning",
+  "DeepL Free Access": "DeepL gratis toegang",
+  "Essential Text-to-Speech Voices": "Essentiële tekst-naar-spraak stemmen",
+  "Unlimited Offline/Online Reading": "Onbeperkt offline/online lezen",
+  "Unlimited Cloud Sync Devices": "Onbeperkt aantal cloud-synchronisatie apparaten",
+  "500 MB Cloud Sync Space": "500 MB cloud-synchronisatieruimte",
+  "Plus Tier": "Plus niveau",
+  "Includes All Free Tier Benefits": "Inclusief alle voordelen van het gratis niveau",
+  "Priority Support": "Prioriteitsondersteuning",
+  "AI Summaries": "AI-samenvattingen",
+  "AI Translations": "AI-vertalingen",
+  "DeepL Pro Access": "DeepL Pro toegang",
+  "Expanded Text-to-Speech Voices": "Uitgebreide tekst-naar-spraak stemmen",
+  "2000 MB Cloud Sync Space": "2000 MB cloud-synchronisatieruimte",
+  "Pro Tier": "Pro niveau",
+  "Includes All Plus Tier Benefits": "Inclusief alle voordelen van het Plus niveau",
+  "Unlimited AI Summaries": "Onbeperkte AI-samenvattingen",
+  "Unlimited AI Translations": "Onbeperkte AI-vertalingen",
+  "Unlimited DeepL Pro Access": "Onbeperkte DeepL Pro toegang",
+  "Advanced AI Tools": "Geavanceerde AI-tools",
+  "Early Feature Access": "Vroege toegang tot functies",
+  "10 GB Cloud Sync Space": "10 GB cloud-synchronisatieruimte",
+  "Loading profile...": "Profiel laden...",
+  "Features": "Functies",
+  "Sign Out": "Uitloggen",
+  "Delete Account": "Account verwijderen",
+  "Delete Your Account?": "Uw account verwijderen?",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "Deze actie kan niet ongedaan worden gemaakt. Al uw gegevens in de cloud worden permanent verwijderd.",
+  "Delete Permanently": "Permanent verwijderen",
+  "Version {{version}}": "Versie {{version}}",
+  "Check Update": "Update controleren",
+  "Already the latest version": "Reeds de nieuwste versie",
+  "Checking for updates...": "Controleren op updates...",
+  "Error checking for updates": "Fout bij controleren op updates",
+  "Book Details": "Boekdetails",
+  "Unknown": "Onbekend",
+  "Publisher:": "Uitgever:",
+  "Published:": "Gepubliceerd:",
+  "Updated:": "Bijgewerkt:",
+  "Added:": "Toegevoegd:",
+  "Language:": "Taal:",
+  "Subjects:": "Onderwerpen:",
+  "Format:": "Formaat:",
+  "File Size:": "Bestandsgrootte:",
+  "Description:": "Beschrijving:",
+  "No description available": "Geen beschrijving beschikbaar",
+  "Drop to Import Books": "Sleep om boeken te importeren",
+  "A new version of Readest is Available!": "Een nieuwe versie van Readest is beschikbaar!",
+  "Readest {{newVersion}} is available (installed version {{currentVersion}}).": "Readest {{newVersion}} is beschikbaar (geïnstalleerde versie {{currentVersion}}).",
+  "Download and install now?": "Nu downloaden en installeren?",
+  "Downloading {{downloaded}} of {{contentLength}}": "Downloaden {{downloaded}} van {{contentLength}}",
+  "Download finished": "Download voltooid",
+  "DOWNLOAD & INSTALL": "DOWNLOADEN & INSTALLEREN",
+  "Changelog:": "Wijzigingslogboek:",
+  "Software Update": "Software-update",
+  "LXGW WenKai GB Screen": "LXGW WenKai GB Scherm",
+  "LXGW WenKai TC": "LXGW WenKai TC",
+  "GuanKiapTsingKhai-T": "GuanKiapTsingKhai-T",
+  "Gray": "Grijs",
+  "Sepia": "Sepia",
+  "Grass": "Gras",
+  "Cherry": "Kers",
+  "Sky": "Hemel",
+  "Solarized": "Gesolariseerd",
+  "Gruvbox": "Gruvbox",
+  "Nord": "Noord",
+  "Contrast": "Contrast",
+  "Sunset": "Zonsondergang",
+  "Reveal in Finder": "Tonen in Finder",
+  "Reveal in File Explorer": "Tonen in Verkenner",
+  "Reveal in Folder": "Tonen in map",
+  "Don’t have an account? Sign up": "Nog geen account? Registreer u",
+  "All the world's a stage,\nAnd all the men and women merely players;\nThey have their exits and their entrances,\nAnd one man in his time plays many parts,\nHis acts being seven ages.\n\n— William Shakespeare": "De hele wereld is een toneel,\nEn alle mannen en vrouwen slechts spelers;\nZij hebben hun uitgangen en hun entrees,\nEn één man speelt in zijn tijd vele rollen,\nZijn daden zijnde zeven leeftijden.\n\n— William Shakespeare",
+  "Next Section": "Volgende sectie",
+  "Previous Section": "Vorige sectie",
+  "Next Page": "Volgende pagina",
+  "Previous Page": "Vorige pagina",
+  "Are you sure to delete {{count}} selected book(s)?_one": "Weet je zeker dat je {{count}} geselecteerd boek wilt verwijderen?",
+  "Are you sure to delete {{count}} selected book(s)?_other": "Weet je zeker dat je {{count}} geselecteerde boeken wilt verwijderen?",
+  "Are you sure to delete the selected book?": "Weet je zeker dat je het geselecteerde boek wilt verwijderen?",
+  "Deselect": "Deselecteer",
+  "Select All": "Alles",
+  "No translation available.": "Geen vertaling beschikbaar.",
+  "Translated by {{provider}}.": "Vertaald door {{provider}}.",
+  "DeepL": "DeepL",
+  "Google Translate": "Google Vertalen",
+  "Azure Translator": "Azure Vertaler",
+  "Invert Image In Dark Mode": "Inverteer afbeelding in het donker",
+  "Help improve Readest": "Help Readest verbeteren",
+  "Sharing anonymized statistics": "Anonieme statistieken delen",
+  "Interface Language": "Interface-taal",
+  "Translation": "Vertaling",
+  "Enable Translation": "Vertaling inschakelen",
+  "Translation Service": "Vertaalservice",
+  "Translate To": "Vertalen naar",
+  "Disable Translation": "Vertaling uitschakelen",
+  "Scroll": "Scrollen",
+  "Overlap Pixels": "Overlap pixels",
+  "Click": "Klik",
+  "System Language": "Systemtaal",
+  "Security": "Beveiliging",
+  "Allow JavaScript": "JavaScript toestaan",
+  "Enable only if you trust the file.": "Schakel alleen in als u het bestand vertrouwt."
+}

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

@@ -5,7 +5,6 @@
   "Animation": "Animacja",
   "Annotate": "Adnotacja",
   "Apply": "Zastosuj",
-  "Are you sure to delete the selected books?": "Czy na pewno chcesz usunąć wybrane książki?",
   "Auto Mode": "Tryb automatyczny",
   "Behavior": "Zachowanie",
   "Book": "Książka",
@@ -42,8 +41,6 @@
   "Global Settings": "Ustawienia globalne",
   "Go Back": "Wstecz",
   "Go Forward": "Dalej",
-  "Go Left": "W lewo",
-  "Go Right": "W prawo",
   "Grass": "Trawiasty",
   "Gray": "Szary",
   "Gruvbox": "Ciepły pomarańczowy",
@@ -62,7 +59,6 @@
   "Match Whole Words": "Uwzględnij całe słowa",
   "Maximum Number of Columns": "Maksymalna liczba kolumn",
   "Minimum Font Size": "Minimalny rozmiar czcionki",
-  "Misc": "Różne",
   "Monospace Font": "Czcionka o stałej szerokości",
   "More Info": "Więcej informacji",
   "Nord": "Północny",
@@ -306,6 +302,38 @@
   "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:"
+  "File Size:": "Rozmiar pliku:",
+  "Auto Detect": "Automatyczne wykrywanie",
+  "Next Section": "Następna sekcja",
+  "Previous Section": "Poprzednia sekcja",
+  "Next Page": "Następna strona",
+  "Previous Page": "Poprzednia strona",
+  "Are you sure to delete {{count}} selected book(s)?_one": "Czy na pewno chcesz usunąć {{count}} wybraną książkę?",
+  "Are you sure to delete {{count}} selected book(s)?_few": "Czy na pewno chcesz usunąć {{count}} wybrane książki?",
+  "Are you sure to delete {{count}} selected book(s)?_many": "Czy na pewno chcesz usunąć {{count}} wybranych książek?",
+  "Are you sure to delete {{count}} selected book(s)?_other": "Czy na pewno chcesz usunąć {{count}} wybranych książek?",
+  "Are you sure to delete the selected book?": "Czy na pewno chcesz usunąć wybraną książkę?",
+  "Deselect": "Odznacz",
+  "Select All": "Zaznacz",
+  "No translation available.": "Brak dostępnego tłumaczenia.",
+  "Translated by {{provider}}.": "Przetłumaczone przez {{provider}}.",
+  "DeepL": "DeepL",
+  "Google Translate": "Tłumacz Google",
+  "Azure Translator": "Azure Translator",
+  "Invert Image In Dark Mode": "Odwróć obraz w ciemności",
+  "Help improve Readest": "Pomóż ulepszyć Readest",
+  "Sharing anonymized statistics": "Udostępnianie zanonimizowanych statystyk",
+  "Interface Language": "Język interfejsu",
+  "Translation": "Tłumaczenie",
+  "Enable Translation": "Włącz tłumaczenie",
+  "Translation Service": "Usługa tłumaczenia",
+  "Translate To": "Przetłumacz na",
+  "Disable Translation": "Wyłącz tłumaczenie",
+  "Scroll": "Przewijaj",
+  "Overlap Pixels": "Przesunięcie pikseli",
+  "Click": "Kliknij",
+  "System Language": "Język systemu",
+  "Security": "Bezpieczeństwo",
+  "Allow JavaScript": "Zezwól na JavaScript",
+  "Enable only if you trust the file.": "Zezwól tylko wtedy, gdy ufasz plikowi."
 }

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

@@ -5,7 +5,6 @@
   "Animation": "Animação",
   "Annotate": "Anotar",
   "Apply": "Aplicar",
-  "Are you sure to delete the selected books?": "Tem certeza de que deseja excluir os livros selecionados?",
   "Auto Mode": "Modo Automático",
   "Behavior": "Comportamento",
   "Book": "Livro",
@@ -42,8 +41,6 @@
   "Global Settings": "Configurações Globais",
   "Go Back": "Voltar",
   "Go Forward": "Avançar",
-  "Go Left": "Ir para Esquerda",
-  "Go Right": "Ir para Direita",
   "Grass": "Grama",
   "Gray": "Cinza",
   "Gruvbox": "Gruvbox",
@@ -62,7 +59,6 @@
   "Match Whole Words": "Corresponder Palavras Inteiras",
   "Maximum Number of Columns": "Número Máximo de Colunas",
   "Minimum Font Size": "Tamanho Mínimo da Fonte",
-  "Misc": "Diversos",
   "Monospace Font": "Fonte Monoespaçada",
   "More Info": "Mais Informações",
   "Nord": "Nord",
@@ -306,6 +302,37 @@
   "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:"
+  "File Size:": "Tamanho do arquivo:",
+  "Auto Detect": "Detectar Automaticamente",
+  "Next Section": "Próxima seção",
+  "Previous Section": "Seção anterior",
+  "Next Page": "Próxima página",
+  "Previous Page": "Página anterior",
+  "Are you sure to delete {{count}} selected book(s)?_one": "Tem certeza que deseja excluir {{count}} livro selecionado?",
+  "Are you sure to delete {{count}} selected book(s)?_many": "Tem certeza que deseja excluir {{count}} livros selecionados?",
+  "Are you sure to delete {{count}} selected book(s)?_other": "Tem certeza que deseja excluir {{count}} livros selecionados?",
+  "Are you sure to delete the selected book?": "Tem certeza que deseja excluir o livro selecionado?",
+  "Deselect": "Desmarcar",
+  "Select All": "Marcar tudo",
+  "No translation available.": "Sem tradução disponível.",
+  "Translated by {{provider}}.": "Traduzido por {{provider}}.",
+  "DeepL": "DeepL",
+  "Google Translate": "Google Tradutor",
+  "Azure Translator": "Tradutor Azure",
+  "Invert Image In Dark Mode": "Inverter Imagem no Escuro",
+  "Help improve Readest": "Ajude a melhorar o Readest",
+  "Sharing anonymized statistics": "Compartilhando estatísticas anonimizadas",
+  "Interface Language": "Idioma da interface",
+  "Translation": "Tradução",
+  "Enable Translation": "Ativar tradução",
+  "Translation Service": "Serviço de tradução",
+  "Translate To": "Traduzir para",
+  "Disable Translation": "Desativar tradução",
+  "Scroll": "Rolar",
+  "Overlap Pixels": "Sobreposição de Pixels",
+  "Click": "Clique",
+  "System Language": "Idioma do Sistema",
+  "Security": "Segurança",
+  "Allow JavaScript": "Permitir JavaScript",
+  "Enable only if you trust the file.": "Ativar apenas se você confiar no arquivo."
 }

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

@@ -5,7 +5,6 @@
   "Animation": "Анимация",
   "Annotate": "Аннотация",
   "Apply": "Применить",
-  "Are you sure to delete the selected books?": "Вы уверены, что хотите удалить выбранные книги?",
   "Auto Mode": "Автоматический режим",
   "Behavior": "Поведение",
   "Book": "Книга",
@@ -42,8 +41,6 @@
   "Global Settings": "Общие настройки",
   "Go Back": "Назад",
   "Go Forward": "Вперёд",
-  "Go Left": "Влево",
-  "Go Right": "Вправо",
   "Grass": "Трава",
   "Gray": "Серый",
   "Gruvbox": "Gruvbox",
@@ -62,7 +59,6 @@
   "Match Whole Words": "Только целые слова",
   "Maximum Number of Columns": "Максимальное количество колонок",
   "Minimum Font Size": "Минимальный размер шрифта",
-  "Misc": "Разное",
   "Monospace Font": "Моноширинный шрифт",
   "More Info": "Подробнее",
   "Nord": "Nord",
@@ -306,6 +302,38 @@
   "Checking for updates...": "Проверка обновлений...",
   "Error checking for updates": "Ошибка при проверке обновлений",
   "Details": "Инфо",
-  "Cancel Selection": "Отменить выбор",
-  "File Size:": "Размер файла:"
+  "File Size:": "Размер файла:",
+  "Auto Detect": "Автоопределение",
+  "Next Section": "Следующий раздел",
+  "Previous Section": "Предыдущий раздел",
+  "Next Page": "Следующая страница",
+  "Previous Page": "Предыдущая страница",
+  "Are you sure to delete {{count}} selected book(s)?_one": "Вы уверены, что хотите удалить {{count}} выбранную книгу?",
+  "Are you sure to delete {{count}} selected book(s)?_few": "Вы уверены, что хотите удалить {{count}} выбранные книги?",
+  "Are you sure to delete {{count}} selected book(s)?_many": "Вы уверены, что хотите удалить {{count}} выбранных книг?",
+  "Are you sure to delete {{count}} selected book(s)?_other": "Вы уверены, что хотите удалить {{count}} выбранных книг?",
+  "Are you sure to delete the selected book?": "Вы уверены, что хотите удалить выбранную книгу?",
+  "Deselect": "Снять",
+  "Select All": "Выбрать все",
+  "No translation available.": "Нет доступного перевода.",
+  "Translated by {{provider}}.": "Переведено {{provider}}.",
+  "DeepL": "DeepL",
+  "Google Translate": "Google Translate",
+  "Azure Translator": "Azure Translator",
+  "Invert Image In Dark Mode": "Инвертировать в тёмной теме",
+  "Help improve Readest": "Помогите улучшить Readest",
+  "Sharing anonymized statistics": "Отправка анонимной статистики",
+  "Interface Language": "Язык интерфейса",
+  "Translation": "Перевод",
+  "Enable Translation": "Включить перевод",
+  "Translation Service": "Сервис перевода",
+  "Translate To": "Перевести на",
+  "Disable Translation": "Отключить перевод",
+  "Scroll": "Прокрутка",
+  "Overlap Pixels": "Перекрывающиеся пиксели",
+  "Click": "Клик",
+  "System Language": "Системный язык",
+  "Security": "Безопасность",
+  "Allow JavaScript": "Разрешить JavaScript",
+  "Enable only if you trust the file.": "Включите только если доверяете файлу."
 }

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

@@ -5,7 +5,6 @@
   "Animation": "Animasyon",
   "Annotate": "Not Ekle",
   "Apply": "Uygula",
-  "Are you sure to delete the selected books?": "Seçili kitapları silmek istediğinizden emin misiniz?",
   "Auto Mode": "Otomatik Mod",
   "Behavior": "Davranış",
   "Book": "Kitap",
@@ -42,8 +41,6 @@
   "Global Settings": "Genel Ayarlar",
   "Go Back": "Geri Git",
   "Go Forward": "İleri Git",
-  "Go Left": "Sola Git",
-  "Go Right": "Sağa Git",
   "Grass": "Çimen",
   "Gray": "Gri",
   "Gruvbox": "Gruvbox",
@@ -62,7 +59,6 @@
   "Match Whole Words": "Tam Kelimeleri Eşleştir",
   "Maximum Number of Columns": "Maksimum Sütun Sayısı",
   "Minimum Font Size": "Minimum Yazı Boyutu",
-  "Misc": "Diğer",
   "Monospace Font": "Eş Aralıklı Yazı Tipi",
   "More Info": "Daha Fazla Bilgi",
   "Nord": "Nord",
@@ -306,6 +302,36 @@
   "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:"
+  "File Size:": "Dosya Boyutu:",
+  "Auto Detect": "Algıla",
+  "Next Section": "Sonraki Bölüm",
+  "Previous Section": "Önceki Bölüm",
+  "Next Page": "Sonraki Sayfa",
+  "Previous Page": "Önceki Sayfa",
+  "Are you sure to delete {{count}} selected book(s)?_one": "{{count}} seçili kitabı silmek istediğinize emin misiniz?",
+  "Are you sure to delete {{count}} selected book(s)?_other": "{{count}} seçili kitabı silmek istediğinize emin misiniz?",
+  "Are you sure to delete the selected book?": "Seçili kitabı silmek istediğinize emin misiniz?",
+  "Deselect": "Kaldır",
+  "Select All": "Hepsi",
+  "No translation available.": "Çeviri mevcut değil.",
+  "Translated by {{provider}}.": "{{provider}} tarafından çevrildi.",
+  "DeepL": "DeepL",
+  "Google Translate": "Google Çeviri",
+  "Azure Translator": "Azure Çevirmen",
+  "Invert Image In Dark Mode": "Karartılmış Görüntüyü Ters Çevir",
+  "Help improve Readest": "Readest’i geliştirin",
+  "Sharing anonymized statistics": "Anonim verileri paylaş",
+  "Interface Language": "Arayüz Dili",
+  "Translation": "Çeviri",
+  "Enable Translation": "Çeviriyi Etkinleştir",
+  "Translation Service": "Çeviri Hizmeti",
+  "Translate To": "Şuna Çevir",
+  "Disable Translation": "Çeviriyi Devre Dışı Bırak",
+  "Scroll": "Kaydır",
+  "Overlap Pixels": "Örtüşen Pikseller",
+  "Click": "Klik",
+  "System Language": "System Dili",
+  "Security": "Security",
+  "Allow JavaScript": "JavaScript'e İzin Ver",
+  "Enable only if you trust the file.": "Yalnızca dosyaya güveniyorsanız etkinleştirin."
 }

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

@@ -5,7 +5,6 @@
   "Animation": "Анімація",
   "Annotate": "Анотація",
   "Apply": "Застосувати",
-  "Are you sure to delete the selected books?": "Ви впевнені, що хочете видалити вибрані книги?",
   "Auto Mode": "Автоматичний режим",
   "Behavior": "Поведінка",
   "Book": "Книга",
@@ -42,8 +41,6 @@
   "Global Settings": "Глобальні налаштування",
   "Go Back": "Назад",
   "Go Forward": "Вперед",
-  "Go Left": "Вліво",
-  "Go Right": "Вправо",
   "Grass": "Трав'яний",
   "Gray": "Сірий",
   "Gruvbox": "Теплий помаранчевий",
@@ -62,7 +59,6 @@
   "Match Whole Words": "Шукати цілі слова",
   "Maximum Number of Columns": "Максимальна кількість колонок",
   "Minimum Font Size": "Мінімальний розмір шрифту",
-  "Misc": "Різне",
   "Monospace Font": "Моноширинний шрифт",
   "More Info": "Більше інформації",
   "Nord": "Північний",
@@ -306,6 +302,38 @@
   "Checking for updates...": "Перевірка наявності оновлень...",
   "Error checking for updates": "Помилка перевірки наявності оновлень",
   "Details": "Деталі",
-  "Cancel Selection": "Скасувати вибір",
-  "File Size:": "Розмір файлу:"
+  "File Size:": "Розмір файлу:",
+  "Auto Detect": "Авто виявлення",
+  "Next Section": "Наступний розділ",
+  "Previous Section": "Попередній розділ",
+  "Next Page": "Наступна сторінка",
+  "Previous Page": "Попередня сторінка",
+  "Are you sure to delete {{count}} selected book(s)?_one": "Ви впевнені, що хочете видалити {{count}} вибрану книгу?",
+  "Are you sure to delete {{count}} selected book(s)?_few": "Ви впевнені, що хочете видалити {{count}} вибрані книги?",
+  "Are you sure to delete {{count}} selected book(s)?_many": "Ви впевнені, що хочете видалити {{count}} вибраних книг?",
+  "Are you sure to delete {{count}} selected book(s)?_other": "Ви впевнені, що хочете видалити {{count}} вибраних книг?",
+  "Are you sure to delete the selected book?": "Ви впевнені, що хочете видалити вибрану книгу?",
+  "Deselect": "Зняти",
+  "Select All": "Усі",
+  "No translation available.": "Переклад недоступний.",
+  "Translated by {{provider}}.": "Перекладено {{provider}}.",
+  "DeepL": "DeepL",
+  "Google Translate": "Google Translate",
+  "Azure Translator": "Azure Translator",
+  "Invert Image In Dark Mode": "Інвертувати зображення в темряві",
+  "Help improve Readest": "Допоможіть покращити Readest",
+  "Sharing anonymized statistics": "Поділ анонімною статистикою",
+  "Interface Language": "Мова інтерфейсу",
+  "Translation": "Переклад",
+  "Enable Translation": "Увімкнути переклад",
+  "Translation Service": "Служба перекладу",
+  "Translate To": "Перекласти на",
+  "Disable Translation": "Вимкнути переклад",
+  "Scroll": "Прокрутка",
+  "Overlap Pixels": "Пікселі перекриття",
+  "Click": "Клацнути",
+  "System Language": "Системна мова",
+  "Security": "Безпека",
+  "Allow JavaScript": "Дозволити JavaScript",
+  "Enable only if you trust the file.": "Увімкніть лише якщо довіряєте файлу."
 }

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

@@ -5,7 +5,6 @@
   "Animation": "Hiệu ứng động",
   "Annotate": "Chú thích",
   "Apply": "Áp dụng",
-  "Are you sure to delete the selected books?": "Bạn có chắc chắn muốn xóa các sách đã chọn?",
   "Auto Mode": "Chế độ tự động",
   "Behavior": "Hành vi",
   "Book": "Sách",
@@ -42,8 +41,6 @@
   "Global Settings": "Cài đặt chung",
   "Go Back": "Quay lại",
   "Go Forward": "Tiến tới",
-  "Go Left": "Sang trái",
-  "Go Right": "Sang phải",
   "Grass": "Xanh cỏ",
   "Gray": "Xám",
   "Gruvbox": "Gruvbox",
@@ -62,7 +59,6 @@
   "Match Whole Words": "Khớp toàn bộ từ",
   "Maximum Number of Columns": "Số cột tối đa",
   "Minimum Font Size": "Cỡ chữ tối thiểu",
-  "Misc": "Khác",
   "Monospace Font": "Phông chữ đơn cách",
   "More Info": "Thông tin thêm",
   "Nord": "Nord",
@@ -306,6 +302,35 @@
   "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:"
+  "File Size:": "Kích thước tệp:",
+  "Auto Detect": "Phát hiện tự động",
+  "Next Section": "Phần tiếp theo",
+  "Previous Section": "Phần trước",
+  "Next Page": "Trang tiếp theo",
+  "Previous Page": "Trang trước",
+  "Are you sure to delete {{count}} selected book(s)?_other": "Bạn có chắc muốn xóa {{count}} cuốn sách đã chọn không?",
+  "Are you sure to delete the selected book?": "Bạn có chắc muốn xóa cuốn sách đã chọn không?",
+  "Deselect": "Bỏ chọn",
+  "Select All": "Chọn tất",
+  "No translation available.": "Không có bản dịch nào.",
+  "Translated by {{provider}}.": "Được dịch bởi {{provider}}.",
+  "DeepL": "DeepL",
+  "Google Translate": "Google Dịch",
+  "Azure Translator": "Azure Translator",
+  "Invert Image In Dark Mode": "Đảo ảnh chế độ tối",
+  "Help improve Readest": "Giúp cải thiện Readest",
+  "Sharing anonymized statistics": "Chia sẻ thống kê ẩn danh",
+  "Interface Language": "Ngôn ngữ giao diện",
+  "Translation": "Dịch",
+  "Enable Translation": "Bật dịch",
+  "Translation Service": "Dịch vụ dịch thuật",
+  "Translate To": "Dịch sang",
+  "Disable Translation": "Tắt dịch",
+  "Scroll": "Cuộn",
+  "Overlap Pixels": "Chồng lấn pixel",
+  "Click": "Nhấp",
+  "System Language": "Ngôn ngữ hệ thống",
+  "Security": "An ninh",
+  "Allow JavaScript": "Cho phép JavaScript",
+  "Enable only if you trust the file.": "Chỉ bật nếu bạn tin tưởng tệp."
 }

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

@@ -5,7 +5,6 @@
   "Animation": "动画",
   "Annotate": "笔记",
   "Apply": "应用",
-  "Are you sure to delete the selected books?": "您确定要删除所选书籍吗？",
   "Auto Mode": "自动主题",
   "Behavior": "行为",
   "Book": "书籍",
@@ -42,8 +41,6 @@
   "Global Settings": "全局设置",
   "Go Back": "返回",
   "Go Forward": "前进",
-  "Go Left": "向左",
-  "Go Right": "向右",
   "Grass": "青草",
   "Gray": "素雅",
   "Gruvbox": "暖橘",
@@ -62,7 +59,6 @@
   "Match Whole Words": "匹配整个单词",
   "Maximum Number of Columns": "分栏数",
   "Minimum Font Size": "最小字号",
-  "Misc": "杂项",
   "Monospace Font": "等宽字体",
   "More Info": "更多信息",
   "Nord": "极光",
@@ -306,6 +302,35 @@
   "Checking for updates...": "检查更新中...",
   "Error checking for updates": "检查更新时出错",
   "Details": "详情",
-  "Cancel Selection": "取消选择",
-  "File Size:": "文件大小"
+  "File Size:": "文件大小",
+  "Auto Detect": "自动检测",
+  "Next Section": "下一章",
+  "Previous Section": "上一章",
+  "Next Page": "下一页",
+  "Previous Page": "上一页",
+  "Are you sure to delete {{count}} selected book(s)?_other": "您确定要删除 {{count}} 本选中的书籍吗？",
+  "Are you sure to delete the selected book?": "您确定要删除选中的书籍吗？",
+  "Deselect": "取消选择",
+  "Select All": "全选",
+  "No translation available.": "暂无可用的翻译",
+  "Translated by {{provider}}.": "由 {{provider}} 提供翻译",
+  "DeepL": "DeepL",
+  "Google Translate": "Google Translate",
+  "Azure Translator": "Azure Translator",
+  "Invert Image In Dark Mode": "深色主题下图片反色",
+  "Help improve Readest": "帮助改进 Readest",
+  "Sharing anonymized statistics": "分享匿名统计数据",
+  "Interface Language": "界面语言",
+  "Translation": "翻译",
+  "Enable Translation": "启用翻译",
+  "Translation Service": "翻译服务",
+  "Translate To": "翻译到",
+  "Disable Translation": "禁用翻译",
+  "Scroll": "滚动",
+  "Overlap Pixels": "重叠像素",
+  "Click": "点击",
+  "System Language": "系统语言",
+  "Security": "安全",
+  "Allow JavaScript": "允许 JavaScript",
+  "Enable only if you trust the file.": "建議僅在您信任該檔案時啟用"
 }

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

@@ -5,7 +5,6 @@
   "Animation": "動畫",
   "Annotate": "筆記",
   "Apply": "應用",
-  "Are you sure to delete the selected books?": "您確定要刪除所選書籍嗎？",
   "Auto Mode": "自動主題",
   "Behavior": "行為",
   "Book": "書籍",
@@ -42,8 +41,6 @@
   "Global Settings": "全局設置",
   "Go Back": "返回",
   "Go Forward": "前進",
-  "Go Left": "向左",
-  "Go Right": "向右",
   "Grass": "青草",
   "Gray": "素雅",
   "Gruvbox": "暖橘",
@@ -62,7 +59,6 @@
   "Match Whole Words": "匹配整個單詞",
   "Maximum Number of Columns": "分欄數",
   "Minimum Font Size": "最小字號",
-  "Misc": "雜項",
   "Monospace Font": "等寬字體",
   "More Info": "更多信息",
   "Nord": "極光",
@@ -306,6 +302,35 @@
   "Checking for updates...": "檢查更新中...",
   "Error checking for updates": "檢查更新時出錯",
   "Details": "詳情",
-  "Cancel Selection": "取消選擇",
-  "File Size:": "檔案大小"
+  "File Size:": "檔案大小",
+  "Auto Detect": "自動檢測",
+  "Next Section": "下一章",
+  "Previous Section": "上一章",
+  "Next Page": "下一頁",
+  "Previous Page": "上一頁",
+  "Are you sure to delete {{count}} selected book(s)?_other": "確定要刪除已選擇的 {{count}} 本書嗎？",
+  "Are you sure to delete the selected book?": "確定要刪除已選擇的書籍嗎？",
+  "Deselect": "取消選取",
+  "Select All": "全選",
+  "No translation available.": "暫無翻譯",
+  "Translated by {{provider}}.": "由 {{provider}} 提供翻譯",
+  "DeepL": "DeepL",
+  "Google Translate": "Google Translate",
+  "Azure Translator": "Azure Translator",
+  "Invert Image In Dark Mode": "深色主題下圖片反相",
+  "Help improve Readest": "幫助改進 Readest",
+  "Sharing anonymized statistics": "分享匿名統計數據",
+  "Interface Language": "介面語言",
+  "Translation": "翻譯",
+  "Enable Translation": "啟用翻譯",
+  "Translation Service": "翻譯服務",
+  "Translate To": "翻譯至",
+  "Disable Translation": "停用翻譯",
+  "Scroll": "滾動",
+  "Overlap Pixels": "重疊像素",
+  "Click": "點擊",
+  "System Language": "系統語言",
+  "Security": "安全",
+  "Allow JavaScript": "允許 JavaScript",
+  "Enable only if you trust the file.": "僅在您信任該文件時啟用"
 }

apps/readest-app/release-notes.json

@@ -1,5 +1,47 @@
 {
   "releases": {
+    "0.9.51": {
+      "date": "2025-06-01",
+      "notes": [
+        "Translator: Table of contents is now included in translations",
+        "Library Theme: Added light, dark, and system theme options to the library page",
+        "TTS: Now shows the current sentence and chapter in the media session",
+        "TTS: Text-to-speech continues from the last read sentence",
+        "Pagination Fix: Taking notes no longer breaks page turning",
+        "EPUB Scripts: Added a setting to allow JavaScript in EPUB files"
+      ]
+    },
+    "0.9.50": {
+      "date": "2025-05-28",
+      "notes": [
+        "Bilingual TTS: You can now choose voices for each language in bilingual text-to-speech mode",
+        "Settings Layout: Improved header layout in the settings dialog for different screen sizes",
+        "CSS Fixes: Corrected anchor text color and fixed image dimensions within paragraphs"
+      ]
+    },
+    "0.9.49": {
+      "date": "2025-05-27",
+      "notes": [
+        "Select All in Library: You can now select all books at once when in selection mode",
+        "More Translation Options: Added support for Azure and Google Translate services",
+        "Dark Mode Enhancement: New option to invert image colors for better visibility in dark mode",
+        "Bilingual TTS: Enjoy bilingual text-to-speech for books with content in two languages",
+        "Full Book Translation: Translate books in any language into bilingual ebooks",
+        "Privacy Settings: Added a new option to opt-out of telemetry"
+      ]
+    },
+    "0.9.43": {
+      "date": "2025-05-19",
+      "notes": [
+        "Enhanced compatibility with Gutenberg and Feedbooks ebooks for better styling",
+        "Reduced sensitivity of trackpad and mouse during page flips",
+        "Cloud backup status is now visible for each book on mobile and desktop",
+        "New option to control scroll overlap when paginating in scroll mode",
+        "Added Dutch language translations",
+        "Added more font weight options for built-in fonts",
+        "Added previous and next section buttons in the footer bar for easier navigation"
+      ]
+    },
     "0.9.41": {
       "date": "2025-05-13",
       "notes": [

apps/readest-app/scripts/release-mac-appstore.sh

@@ -1,3 +1,22 @@
+#!/bin/bash
+set -e
+
+echo "Updating bundleVersion in tauri.appstore.conf.json..."
+
+CONFIG_FILE="src-tauri/tauri.appstore.conf.json"
+CURRENT_DATE=$(date "+%Y%m%d.%H%M%S")
+
+if [ ! -f "$CONFIG_FILE" ]; then
+  echo "Error: Config file $CONFIG_FILE not found!"
+  exit 1
+fi
+
+TMP_FILE=$(mktemp)
+cat "$CONFIG_FILE" | jq --arg version "$CURRENT_DATE" '.bundle.macOS.bundleVersion = $version' > "$TMP_FILE"
+mv "$TMP_FILE" "$CONFIG_FILE"
+echo "Updated bundleVersion to $CURRENT_DATE"
+
+echo "Building macOS universal app for App Store..."
 pnpm run build-macos-universial-appstore
 
 BUNDLE_DIR=../../target/universal-apple-darwin/release/bundle/macos

apps/readest-app/src-tauri/capabilities/default.json

@@ -61,6 +61,15 @@
         },
         {
           "url": "https://*.cloudflarestorage.com"
+        },
+        {
+          "url": "https://edge.microsoft.com"
+        },
+        {
+          "url": "https://*.microsofttranslator.com"
+        },
+        {
+          "url": "https://translate.googleapis.com"
         }
       ]
     },

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

@@ -221,6 +221,7 @@ class NativeBridgePlugin(private val activity: Activity): Plugin(activity) {
                     }
                     if (visible) {
                         controller.show(WindowInsets.Type.statusBars())
+                        controller.hide(WindowInsets.Type.navigationBars())
                     } else {
                         controller.hide(WindowInsets.Type.systemBars())
                     }
@@ -236,25 +237,27 @@ class NativeBridgePlugin(private val activity: Activity): Plugin(activity) {
                     }
                     if (visible) {
                         it.show(WindowInsetsCompat.Type.statusBars())
+                        it.hide(WindowInsetsCompat.Type.navigationBars())
                     } else {
                         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
-                }
+                decorView.systemUiVisibility = buildList {
+                    add(View.SYSTEM_UI_FLAG_LAYOUT_STABLE)
+                    add(View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION)
+                    add(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION)
+                    add(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)
+                    add(View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY)
+
+                    if (!visible) {
+                        add(View.SYSTEM_UI_FLAG_FULLSCREEN)
+                    }
+                    if (visible && !isDarkMode) {
+                        add(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR)
+                    }
+                }.reduce { acc, flag -> acc or flag }
             }
             window.statusBarColor = Color.TRANSPARENT
             window.navigationBarColor = Color.TRANSPARENT

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

@@ -15,7 +15,7 @@
     "security": {
       "csp": {
         "default-src": "'self' 'unsafe-inline' blob: data: customprotocol: asset: http://asset.localhost ipc: http://ipc.localhost",
-        "connect-src": "'self' blob: data: asset: http://asset.localhost ipc: http://ipc.localhost https://*.sentry.io https://*.posthog.com https://*.deepl.com https://*.wikipedia.org https://*.wiktionary.org https://*.supabase.co https://*.readest.com wss://speech.platform.bing.com https://*.cloudflarestorage.com",
+        "connect-src": "'self' blob: data: asset: http://asset.localhost ipc: http://ipc.localhost https://*.sentry.io https://*.posthog.com https://*.deepl.com https://*.wikipedia.org https://*.wiktionary.org https://*.supabase.co https://*.readest.com wss://speech.platform.bing.com https://*.cloudflarestorage.com https://translate.googleapis.com https://*.microsofttranslator.com https://edge.microsoft.com",
         "img-src": "'self' blob: data: asset: http://asset.localhost https://*",
         "style-src": "'self' 'unsafe-inline' blob: asset: http://asset.localhost https://cdn.jsdelivr.net https://fonts.googleapis.com https://fontsapi.zeoseven.com",
         "font-src": "'self' blob: data: asset: http://asset.localhost tauri: https://db.onlinewebfonts.com https://cdn.jsdelivr.net https://fonts.gstatic.com https://fontsapi.zeoseven.com",

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import Providers from '@/components/Providers';
 
 import '../styles/globals.css';
-import '../styles/fonts.css';
 
 const url = 'https://web.readest.com/';
 const title = 'Readest — Where You Read, Digest and Get Insight';

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

@@ -1,12 +1,18 @@
 import clsx from 'clsx';
 import { MdCheckCircle, MdCheckCircleOutline } from 'react-icons/md';
-import { CiCircleMore } from 'react-icons/ci';
-import { LiaCloudUploadAltSolid, LiaCloudDownloadAltSolid } from 'react-icons/lia';
+import {
+  LiaCloudUploadAltSolid,
+  LiaCloudDownloadAltSolid,
+  LiaInfoCircleSolid,
+} from 'react-icons/lia';
 
 import { Book } from '@/types/book';
 import { useEnv } from '@/context/EnvContext';
+import { useAuth } from '@/context/AuthContext';
+import { useRouter } from 'next/navigation';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { LibraryViewModeType } from '@/types/settings';
+import { navigateToLogin } from '@/utils/nav';
 import { formatAuthors } from '@/utils/book';
 import ReadingProgress from './ReadingProgress';
 import BookCover from '@/components/BookCover';
@@ -32,8 +38,10 @@ const BookItem: React.FC<BookItemProps> = ({
   handleBookDownload,
   showBookDetailsModal,
 }) => {
-  const iconSize15 = useResponsiveSize(15);
+  const router = useRouter();
+  const { user } = useAuth();
   const { appService } = useEnv();
+  const iconSize15 = useResponsiveSize(15);
 
   const stopEvent = (e: React.MouseEvent | React.TouchEvent) => {
     e.preventDefault();
@@ -96,11 +104,26 @@ const BookItem: React.FC<BookItemProps> = ({
           className={clsx('flex items-center', book.progress ? 'justify-between' : 'justify-end')}
         >
           {book.progress && <ReadingProgress book={book} />}
-          <div className='flex items-center gap-x-1'>
+          <div className='flex items-center justify-center gap-x-2'>
+            {!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)}
+              >
+                <div className='pt-[1px]'>
+                  <LiaInfoCircleSolid size={iconSize15} />
+                </div>
+              </button>
+            )}
             {transferProgress !== null ? (
               transferProgress === 100 ? null : (
                 <div
-                  className='radial-progress sm:opacity-0 sm:group-hover:opacity-100'
+                  className='radial-progress'
                   style={
                     {
                       '--value': transferProgress,
@@ -112,39 +135,32 @@ const BookItem: React.FC<BookItemProps> = ({
                 ></div>
               )
             ) : (
-              <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={() => {
-                  if (!book.uploadedAt) {
-                    handleBookUpload(book);
-                  } else if (!book.downloadedAt) {
-                    handleBookDownload(book);
-                  }
-                }}
-              >
-                {!book.uploadedAt && <LiaCloudUploadAltSolid size={iconSize15} />}
-                {book.uploadedAt && !book.downloadedAt && (
-                  <LiaCloudDownloadAltSolid 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>
+              (!book.uploadedAt || (book.uploadedAt && !book.downloadedAt)) && (
+                <button
+                  className='show-cloud-button -m-2 p-2'
+                  onPointerDown={(e) => stopEvent(e)}
+                  onPointerUp={(e) => stopEvent(e)}
+                  onPointerMove={(e) => stopEvent(e)}
+                  onPointerCancel={(e) => stopEvent(e)}
+                  onPointerLeave={(e) => stopEvent(e)}
+                  onClick={() => {
+                    if (!user) {
+                      navigateToLogin(router);
+                      return;
+                    }
+                    if (!book.uploadedAt) {
+                      handleBookUpload(book);
+                    } else if (!book.downloadedAt) {
+                      handleBookDownload(book);
+                    }
+                  }}
+                >
+                  {!book.uploadedAt && <LiaCloudUploadAltSolid size={iconSize15} />}
+                  {book.uploadedAt && !book.downloadedAt && (
+                    <LiaCloudDownloadAltSolid size={iconSize15} />
+                  )}
+                </button>
+              )
             )}
           </div>
         </div>

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

@@ -17,12 +17,15 @@ import { isMd5 } from '@/utils/md5';
 
 import Alert from '@/components/Alert';
 import Spinner from '@/components/Spinner';
+import ModalPortal from '@/components/ModalPortal';
 import BookshelfItem, { generateGridItems, generateListItems } from './BookshelfItem';
 import GroupingModal from './GroupingModal';
 
 interface BookshelfProps {
   libraryBooks: Book[];
   isSelectMode: boolean;
+  isSelectAll: boolean;
+  isSelectNone: boolean;
   handleImportBooks: () => void;
   handleBookUpload: (book: Book) => Promise<boolean>;
   handleBookDownload: (book: Book) => Promise<boolean>;
@@ -35,6 +38,8 @@ interface BookshelfProps {
 const Bookshelf: React.FC<BookshelfProps> = ({
   libraryBooks,
   isSelectMode,
+  isSelectAll,
+  isSelectNone,
   handleImportBooks,
   handleBookUpload,
   handleBookDownload,
@@ -67,14 +72,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
   const allBookshelfItems =
     viewMode === 'grid' ? generateGridItems(libraryBooks) : generateListItems(libraryBooks);
 
-  useEffect(() => {
-    if (isSelectMode) {
-      setShowSelectModeActions(true);
-    } else {
-      setSelectedBooks([]);
-      setShowSelectModeActions(false);
-    }
-  }, [isSelectMode]);
+  const currentBookshelfItems = navBooksGroup ? navBooksGroup.books : allBookshelfItems;
 
   useEffect(() => {
     if (isImportingBook.current) return;
@@ -169,14 +167,22 @@ const Bookshelf: React.FC<BookshelfProps> = ({
     }
   };
 
-  const confirmDelete = async () => {
+  const getBooksToDelete = () => {
+    const booksToDelete: Book[] = [];
     selectedBooks.forEach((id) => {
       for (const book of libraryBooks.filter((book) => book.hash === id || book.groupId === id)) {
         if (book && !book.deletedAt) {
-          handleBookDelete(book);
+          booksToDelete.push(book);
         }
       }
     });
+    return booksToDelete;
+  };
+
+  const confirmDelete = async () => {
+    for (const book of getBooksToDelete()) {
+      handleBookDelete(book);
+    }
     setSelectedBooks([]);
     setShowDeleteAlert(false);
     setShowSelectModeActions(true);
@@ -192,7 +198,6 @@ const Bookshelf: React.FC<BookshelfProps> = ({
     setShowGroupingModal(true);
   };
 
-  const currentBookshelfItems = navBooksGroup ? navBooksGroup.books : allBookshelfItems;
   const bookFilter = (item: Book, queryTerm: string) => {
     if (item.deletedAt) return false;
     const searchTerm = new RegExp(queryTerm, 'i');
@@ -245,6 +250,23 @@ const Bookshelf: React.FC<BookshelfProps> = ({
       }
     });
 
+  useEffect(() => {
+    if (isSelectMode) {
+      setShowSelectModeActions(true);
+      if (isSelectAll) {
+        setSelectedBooks(
+          filteredBookshelfItems.map((item) => ('hash' in item ? item.hash : item.id)),
+        );
+      } else if (isSelectNone) {
+        setSelectedBooks([]);
+      }
+    } else {
+      setSelectedBooks([]);
+      setShowSelectModeActions(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSelectMode, isSelectAll, isSelectNone]);
+
   return (
     <div className='bookshelf'>
       <div
@@ -343,20 +365,18 @@ const Bookshelf: React.FC<BookshelfProps> = ({
               <MdDelete className='fill-red-500' />
               <div className='text-red-500'>{_('Delete')}</div>
             </button>
-            {!appService?.isMobile && (
-              <button
-                onClick={() => handleSetSelectMode(false)}
-                className={clsx('flex flex-col items-center justify-center gap-1')}
-              >
-                <MdOutlineCancel />
-                <div>{_('Cancel')}</div>
-              </button>
-            )}
+            <button
+              onClick={() => handleSetSelectMode(false)}
+              className={clsx('flex flex-col items-center justify-center gap-1')}
+            >
+              <MdOutlineCancel />
+              <div>{_('Cancel')}</div>
+            </button>
           </div>
         )}
       </div>
       {showGroupingModal && (
-        <div>
+        <ModalPortal>
           <GroupingModal
             libraryBooks={libraryBooks}
             selectedBooks={selectedBooks}
@@ -369,7 +389,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
               handleSetSelectMode(false);
             }}
           />
-        </div>
+        </ModalPortal>
       )}
       {showDeleteAlert && (
         <div
@@ -380,7 +400,9 @@ const Bookshelf: React.FC<BookshelfProps> = ({
         >
           <Alert
             title={_('Confirm Deletion')}
-            message={_('Are you sure to delete the selected books?')}
+            message={_('Are you sure to delete {{count}} selected book(s)?', {
+              count: getBooksToDelete().length,
+            })}
             onCancel={() => {
               setShowDeleteAlert(false);
               setShowSelectModeActions(true);

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

@@ -140,7 +140,7 @@ const GroupingModal: React.FC<GroupingModalProps> = ({
   }, [selectedBooks]);
 
   return (
-    <div className='fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50'>
+    <div className='fixed inset-0 flex items-center justify-center'>
       <div
         className={clsx(
           'modal-box bg-base-100 overflow-y-auto rounded-2xl shadow-xl',

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

@@ -24,14 +24,20 @@ import SortMenu from './SortMenu';
 
 interface LibraryHeaderProps {
   isSelectMode: boolean;
+  isSelectAll: boolean;
   onImportBooks: () => void;
   onToggleSelectMode: () => void;
+  onSelectAll: () => void;
+  onDeselectAll: () => void;
 }
 
 const LibraryHeader: React.FC<LibraryHeaderProps> = ({
   isSelectMode,
+  isSelectAll,
   onImportBooks,
   onToggleSelectMode,
+  onSelectAll,
+  onDeselectAll,
 }) => {
   const _ = useTranslation();
   const router = useRouter();
@@ -182,14 +188,21 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
             )}
           </div>
         </div>
-        {appService?.isMobile && isSelectMode ? (
-          <div className='w-max-[72px] w-min-[72px] flex h-full items-center'>
+        {isSelectMode ? (
+          <div
+            className={clsx(
+              'flex h-full items-center',
+              'w-max-[72px] w-min-[72px] sm:w-max-[80px] sm:w-min-[80px]',
+            )}
+          >
             <button
-              onClick={onToggleSelectMode}
-              className='btn btn-ghost text-base-content/85 h-8 min-h-8 w-[72px] p-0'
-              aria-label={_('Cancel Selection')}
+              onClick={isSelectAll ? onDeselectAll : onSelectAll}
+              className='btn btn-ghost text-base-content/85 h-8 min-h-8 w-[72px] p-0 sm:w-[80px]'
+              aria-label={isSelectAll ? _('Deselect') : _('Select All')}
             >
-              {_('Cancel')}
+              <span className='font-sans text-base font-normal sm:text-sm'>
+                {isSelectAll ? _('Deselect') : _('Select All')}
+              </span>
             </button>
           </div>
         ) : (

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

@@ -4,18 +4,22 @@ import { useRouter } from 'next/navigation';
 import { PiUserCircle } from 'react-icons/pi';
 import { PiUserCircleCheck } from 'react-icons/pi';
 import { MdCheck } from 'react-icons/md';
+import { TbSunMoon } from 'react-icons/tb';
+import { BiMoon, BiSun } from 'react-icons/bi';
 
 import { setAboutDialogVisible } from '@/components/AboutWindow';
 import { isTauriAppPlatform, isWebAppPlatform } from '@/services/environment';
 import { DOWNLOAD_READEST_URL } from '@/services/constants';
 import { useAuth } from '@/context/AuthContext';
 import { useEnv } from '@/context/EnvContext';
+import { useThemeStore } from '@/store/themeStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { getStoragePlanData } from '@/utils/access';
 import { navigateToLogin, navigateToProfile } from '@/utils/nav';
 import { tauriHandleSetAlwaysOnTop, tauriHandleToggleFullScreen } from '@/utils/window';
+import { optInTelemetry, optOutTelemetry } from '@/utils/telemetry';
 import { QuotaType } from '@/types/user';
 import UserAvatar from '@/components/UserAvatar';
 import MenuItem from '@/components/MenuItem';
@@ -30,6 +34,7 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
   const router = useRouter();
   const { envConfig, appService } = useEnv();
   const { token, user } = useAuth();
+  const { themeMode, setThemeMode } = useThemeStore();
   const { settings, setSettings, saveSettings } = useSettingsStore();
   const [quotas, setQuotas] = React.useState<QuotaType[]>([]);
   const [isAutoUpload, setIsAutoUpload] = useState(settings.autoUpload);
@@ -40,12 +45,14 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
   const [isAutoImportBooksOnOpen, setIsAutoImportBooksOnOpen] = useState(
     settings.autoImportBooksOnOpen,
   );
+  const [isTelemetryEnabled, setIsTelemetryEnabled] = useState(settings.telemetryEnabled);
   const iconSize = useResponsiveSize(16);
 
   const showAboutReadest = () => {
     setAboutDialogVisible(true);
     setIsDropdownOpen?.(false);
   };
+
   const downloadReadest = () => {
     window.open(DOWNLOAD_READEST_URL, '_blank');
     setIsDropdownOpen?.(false);
@@ -61,6 +68,11 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
     setIsDropdownOpen?.(false);
   };
 
+  const cycleThemeMode = () => {
+    const nextMode = themeMode === 'auto' ? 'light' : themeMode === 'light' ? 'dark' : 'auto';
+    setThemeMode(nextMode);
+  };
+
   const handleReloadPage = () => {
     window.location.reload();
     setIsDropdownOpen?.(false);
@@ -119,6 +131,18 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
     setIsOpenLastBooks(settings.openLastBooks);
   };
 
+  const toggleTelemetry = () => {
+    settings.telemetryEnabled = !settings.telemetryEnabled;
+    if (settings.telemetryEnabled) {
+      optInTelemetry();
+    } else {
+      optOutTelemetry();
+    }
+    setSettings(settings);
+    saveSettings(envConfig, settings);
+    setIsTelemetryEnabled(settings.telemetryEnabled);
+  };
+
   useEffect(() => {
     if (!user || !token) return;
     const storagPlan = getStoragePlanData(token);
@@ -212,9 +236,26 @@ const SettingsMenu: React.FC<SettingsMenuProps> = ({ setIsDropdownOpen }) => {
         onClick={toggleScreenWakeLock}
       />
       <MenuItem label={_('Reload Page')} onClick={handleReloadPage} />
+      <MenuItem
+        label={
+          themeMode === 'dark'
+            ? _('Dark Mode')
+            : themeMode === 'light'
+              ? _('Light Mode')
+              : _('Auto Mode')
+        }
+        Icon={themeMode === 'dark' ? BiMoon : themeMode === 'light' ? BiSun : TbSunMoon}
+        onClick={cycleThemeMode}
+      />
       <hr className='border-base-200 my-1' />
       {isWebAppPlatform() && <MenuItem label={_('Download Readest')} onClick={downloadReadest} />}
       <MenuItem label={_('About Readest')} onClick={showAboutReadest} />
+      <MenuItem
+        label={_('Help improve Readest')}
+        description={isTelemetryEnabled ? _('Sharing anonymized statistics') : ''}
+        Icon={isTelemetryEnabled ? MdCheck : undefined}
+        onClick={toggleTelemetry}
+      />
     </div>
   );
 };

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

@@ -32,6 +32,7 @@ import { useThemeStore } from '@/store/themeStore';
 import { useScreenWakeLock } from '@/hooks/useScreenWakeLock';
 import { useOpenWithBooks } from '@/hooks/useOpenWithBooks';
 import { lockScreenOrientation } from '@/utils/bridge';
+import { mountAdditionalFonts } from '@/utils/style';
 import {
   tauriHandleSetAlwaysOnTop,
   tauriHandleToggleFullScreen,
@@ -74,6 +75,8 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
   const isInitiating = useRef(false);
   const [libraryLoaded, setLibraryLoaded] = useState(false);
   const [isSelectMode, setIsSelectMode] = useState(false);
+  const [isSelectAll, setIsSelectAll] = useState(false);
+  const [isSelectNone, setIsSelectNone] = useState(false);
   const [showDetailsBook, setShowDetailsBook] = useState<Book | null>(null);
   const [booksTransferProgress, setBooksTransferProgress] = useState<{
     [key: string]: number | null;
@@ -107,6 +110,10 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
     },
   });
 
+  useEffect(() => {
+    mountAdditionalFonts(document);
+  }, []);
+
   useEffect(() => {
     const doCheckAppUpdates = async () => {
       if (appService?.hasUpdater && settings.autoCheckUpdates) {
@@ -355,10 +362,11 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
       ['Failed to parse EPUB.', _('Failed to parse the EPUB file.')],
       ['Unsupported format.', _('This book format is not supported.')],
     ];
+    const { library } = useLibraryStore.getState();
     for (const file of files) {
       try {
-        const book = await appService?.importBook(file, libraryBooks);
-        setLibrary(libraryBooks);
+        const book = await appService?.importBook(file, library);
+        setLibrary(library);
         if (user && book && !book.uploadedAt && settings.autoUpload) {
           console.log('Uploading book:', book.title);
           handleBookUpload(book);
@@ -381,7 +389,7 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
         console.error('Failed to import book:', filename, error);
       }
     }
-    appService?.saveLibraryBooks(libraryBooks);
+    appService?.saveLibraryBooks(library);
     setLoading(false);
   };
 
@@ -521,18 +529,23 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
     importBooks(files);
   };
 
-  const handleToggleSelectMode = () => {
-    if (!isSelectMode && appService?.hasHaptics) {
-      impactFeedback('medium');
-    }
-    setIsSelectMode((pre) => !pre);
-  };
-
   const handleSetSelectMode = (selectMode: boolean) => {
     if (selectMode && appService?.hasHaptics) {
       impactFeedback('medium');
     }
     setIsSelectMode(selectMode);
+    setIsSelectAll(false);
+    setIsSelectNone(false);
+  };
+
+  const handleSelectAll = () => {
+    setIsSelectAll(true);
+    setIsSelectNone(false);
+  };
+
+  const handleDeselectAll = () => {
+    setIsSelectNone(true);
+    setIsSelectAll(false);
   };
 
   const handleShowDetailsBook = (book: Book) => {
@@ -565,8 +578,11 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
       <div className='fixed top-0 z-40 w-full'>
         <LibraryHeader
           isSelectMode={isSelectMode}
+          isSelectAll={isSelectAll}
           onImportBooks={handleImportBooks}
-          onToggleSelectMode={handleToggleSelectMode}
+          onToggleSelectMode={() => handleSetSelectMode(!isSelectMode)}
+          onSelectAll={handleSelectAll}
+          onDeselectAll={handleDeselectAll}
         />
       </div>
       {loading && (
@@ -594,6 +610,8 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
             <Bookshelf
               libraryBooks={libraryBooks}
               isSelectMode={isSelectMode}
+              isSelectAll={isSelectAll}
+              isSelectNone={isSelectNone}
               handleImportBooks={handleImportBooks}
               handleBookUpload={handleBookUpload}
               handleBookDownload={handleBookDownload}

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

@@ -133,6 +133,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
             <HintInfo
               bookKey={bookKey}
               showDoubleBorder={viewSettings.vertical && viewSettings.doubleBorder}
+              isScrolled={viewSettings.scrolled}
               isVertical={viewSettings.vertical}
               horizontalGap={horizontalGapPercent}
               verticalMargin={verticalMarginPixels}

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

@@ -28,6 +28,7 @@ import { getMaxInlineSize } from '@/utils/config';
 import { getDirFromUILanguage } from '@/utils/rtl';
 import { transformContent } from '@/services/transformService';
 import { lockScreenOrientation } from '@/utils/bridge';
+import { useTextTranslation } from '../hooks/useTextTranslation';
 
 const FoliateViewer: React.FC<{
   bookKey: string;
@@ -52,6 +53,7 @@ const FoliateViewer: React.FC<{
   useUICSS(bookKey);
   useProgressSync(bookKey);
   useProgressAutoSave(bookKey);
+  useTextTranslation(bookKey, viewRef.current);
 
   const progressRelocateHandler = (event: Event) => {
     const detail = (event as CustomEvent).detail;

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

@@ -1,7 +1,8 @@
 import React, { useEffect } from 'react';
 import clsx from 'clsx';
-import { RiArrowLeftWideLine, RiArrowRightWideLine } from 'react-icons/ri';
+import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
 import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
+import { RiArrowLeftDoubleLine, RiArrowRightDoubleLine } from 'react-icons/ri';
 import { FaHeadphones } from 'react-icons/fa6';
 import { IoIosList as TOCIcon } from 'react-icons/io';
 import { PiNotePencil as NoteIcon } from 'react-icons/pi';
@@ -17,6 +18,7 @@ import { useSidebarStore } from '@/store/sidebarStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { eventDispatcher } from '@/utils/event';
+import { viewPagination } from '../hooks/usePagination';
 import { saveViewSettings } from '../utils/viewSettingsHelper';
 import { PageInfo } from '@/types/book';
 import Button from '@/components/Button';
@@ -39,8 +41,8 @@ const FooterBar: React.FC<FooterBarProps> = ({
 }) => {
   const _ = useTranslation();
   const { envConfig, appService } = useEnv();
-  const { hoveredBookKey, setHoveredBookKey, getView, getProgress, getViewSettings } =
-    useReaderStore();
+  const { hoveredBookKey, setHoveredBookKey } = useReaderStore();
+  const { getView, getViewState, getProgress, getViewSettings } = useReaderStore();
   const { isSideBarVisible, setSideBarVisible } = useSidebarStore();
   const [actionTab, setActionTab] = React.useState('');
   const sliderHeight = useResponsiveSize(28);
@@ -51,6 +53,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
   const view = getView(bookKey);
   const progress = getProgress(bookKey);
   const viewSettings = getViewSettings(bookKey);
+  const viewState = getViewState(bookKey);
 
   const handleProgressChange = (value: number) => {
     view?.goToFraction(value / 100.0);
@@ -76,12 +79,24 @@ const FooterBar: React.FC<FooterBarProps> = ({
     saveViewSettings(envConfig, bookKey, 'lineHeight', value / 10);
   };
 
-  const handleGoPrev = () => {
-    view?.goLeft();
+  const handleGoPrevPage = () => {
+    viewPagination(view, viewSettings, 'left');
   };
 
-  const handleGoNext = () => {
-    view?.goRight();
+  const handleGoNextPage = () => {
+    viewPagination(view, viewSettings, 'right');
+  };
+
+  const handleGoPrevSection = () => {
+    if (view?.renderer.prevSection) {
+      view?.renderer.prevSection();
+    }
+  };
+
+  const handleGoNextSection = () => {
+    if (view?.renderer.nextSection) {
+      view?.renderer.nextSection();
+    }
   };
 
   const handleGoBack = () => {
@@ -94,11 +109,10 @@ const FooterBar: React.FC<FooterBarProps> = ({
 
   const handleSpeakText = async () => {
     if (!view || !progress) return;
-    const { range } = progress;
     if (eventDispatcher.dispatchSync('tts-is-speaking')) {
       eventDispatcher.dispatch('tts-stop', { bookKey });
     } else {
-      eventDispatcher.dispatch('tts-speak', { bookKey, range });
+      eventDispatcher.dispatch('tts-speak', { bookKey });
     }
   };
 
@@ -133,6 +147,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
   };
 
   const isVisible = hoveredBookKey === bookKey;
+  const ttsEnabled = viewState?.ttsEnabled;
   const progressInfo = bookFormat === 'PDF' ? section : pageinfo;
   const progressValid = !!progressInfo;
   const progressFraction =
@@ -173,7 +188,7 @@ const FooterBar: React.FC<FooterBarProps> = ({
         {/* Mobile footer bar */}
         <div
           className={clsx(
-            'bg-base-200 absolute bottom-16 flex w-full items-center gap-x-2 px-4 transition-all sm:hidden',
+            'bg-base-200 absolute bottom-16 flex w-full flex-col items-center gap-y-8 px-4 transition-all sm:hidden',
             actionTab === 'progress'
               ? 'pointer-events-auto translate-y-0 pb-4 pt-8 ease-out'
               : 'pointer-events-none invisible translate-y-full overflow-hidden pb-0 pt-0 ease-in',
@@ -184,34 +199,48 @@ const FooterBar: React.FC<FooterBarProps> = ({
               : '64px',
           }}
         >
-          <Button
-            icon={viewSettings?.rtl ? <RiArrowRightWideLine /> : <RiArrowLeftWideLine />}
-            onClick={viewSettings?.rtl ? handleGoNext : handleGoPrev}
-            tooltip={viewSettings?.rtl ? _('Go Right') : _('Go Left')}
-          />
-          <Button
-            icon={viewSettings?.rtl ? <RiArrowGoForwardLine /> : <RiArrowGoBackLine />}
-            onClick={handleGoBack}
-            tooltip={_('Go Back')}
-            disabled={!view?.history.canGoBack}
-          />
-          <Button
-            icon={viewSettings?.rtl ? <RiArrowGoBackLine /> : <RiArrowGoForwardLine />}
-            onClick={handleGoForward}
-            tooltip={_('Go Forward')}
-            disabled={!view?.history.canGoForward}
-          />
-          <Slider
-            heightPx={sliderHeight}
-            bubbleLabel={`${Math.round(progressFraction * 100)}%`}
-            initialValue={progressValid ? progressFraction * 100 : 0}
-            onChange={(e) => handleProgressChange(e)}
-          />
-          <Button
-            icon={viewSettings?.rtl ? <RiArrowLeftWideLine /> : <RiArrowRightWideLine />}
-            onClick={viewSettings?.rtl ? handleGoPrev : handleGoNext}
-            tooltip={viewSettings?.rtl ? _('Go Left') : _('Go Right')}
-          />
+          <div className='flex w-full items-center justify-between gap-x-6'>
+            <Slider
+              heightPx={sliderHeight}
+              bubbleLabel={`${Math.round(progressFraction * 100)}%`}
+              initialValue={progressValid ? progressFraction * 100 : 0}
+              onChange={(e) => handleProgressChange(e)}
+            />
+          </div>
+          <div className='flex w-full items-center justify-between gap-x-6'>
+            <Button
+              icon={viewSettings?.rtl ? <RiArrowRightDoubleLine /> : <RiArrowLeftDoubleLine />}
+              onClick={viewSettings?.rtl ? handleGoNextSection : handleGoPrevSection}
+              tooltip={viewSettings?.rtl ? _('Next Section') : _('Previous Section')}
+            />
+            <Button
+              icon={viewSettings?.rtl ? <RiArrowRightSLine /> : <RiArrowLeftSLine />}
+              onClick={viewSettings?.rtl ? handleGoNextPage : handleGoPrevPage}
+              tooltip={viewSettings?.rtl ? _('Next Page') : _('Previous Page')}
+            />
+            <Button
+              icon={viewSettings?.rtl ? <RiArrowGoForwardLine /> : <RiArrowGoBackLine />}
+              onClick={handleGoBack}
+              tooltip={_('Go Back')}
+              disabled={!view?.history.canGoBack}
+            />
+            <Button
+              icon={viewSettings?.rtl ? <RiArrowGoBackLine /> : <RiArrowGoForwardLine />}
+              onClick={handleGoForward}
+              tooltip={_('Go Forward')}
+              disabled={!view?.history.canGoForward}
+            />
+            <Button
+              icon={viewSettings?.rtl ? <RiArrowLeftSLine /> : <RiArrowRightSLine />}
+              onClick={viewSettings?.rtl ? handleGoPrevPage : handleGoNextPage}
+              tooltip={viewSettings?.rtl ? _('Previous Page') : _('Next Page')}
+            />
+            <Button
+              icon={viewSettings?.rtl ? <RiArrowLeftDoubleLine /> : <RiArrowRightDoubleLine />}
+              onClick={viewSettings?.rtl ? handleGoPrevSection : handleGoNextSection}
+              tooltip={viewSettings?.rtl ? _('Previous Section') : _('Next Section')}
+            />
+          </div>
         </div>
         <div
           className={clsx(
@@ -284,14 +313,22 @@ const FooterBar: React.FC<FooterBarProps> = ({
             }
             onClick={() => handleSetActionTab('font')}
           />
-          <Button icon={<TTSIcon className='' />} onClick={() => handleSetActionTab('tts')} />
+          <Button
+            icon={<TTSIcon className={ttsEnabled ? 'text-blue-500' : ''} />}
+            onClick={() => handleSetActionTab('tts')}
+          />
         </div>
         {/* Desktop footer bar */}
         <div className='hidden w-full items-center gap-x-4 px-4 sm:flex'>
           <Button
-            icon={viewSettings?.rtl ? <RiArrowRightWideLine /> : <RiArrowLeftWideLine />}
-            onClick={viewSettings?.rtl ? handleGoNext : handleGoPrev}
-            tooltip={viewSettings?.rtl ? _('Go Right') : _('Go Left')}
+            icon={viewSettings?.rtl ? <RiArrowRightDoubleLine /> : <RiArrowLeftDoubleLine />}
+            onClick={viewSettings?.rtl ? handleGoNextSection : handleGoPrevSection}
+            tooltip={viewSettings?.rtl ? _('Next Section') : _('Previous Section')}
+          />
+          <Button
+            icon={viewSettings?.rtl ? <RiArrowRightSLine /> : <RiArrowLeftSLine />}
+            onClick={viewSettings?.rtl ? handleGoNextPage : handleGoPrevPage}
+            tooltip={viewSettings?.rtl ? _('Next Page') : _('Previous Page')}
           />
           <Button
             icon={viewSettings?.rtl ? <RiArrowGoForwardLine /> : <RiArrowGoBackLine />}
@@ -318,11 +355,20 @@ const FooterBar: React.FC<FooterBarProps> = ({
               handleProgressChange(parseInt((e.target as HTMLInputElement).value, 10))
             }
           />
-          <Button icon={<FaHeadphones />} onClick={handleSpeakText} tooltip={_('Speak')} />
           <Button
-            icon={viewSettings?.rtl ? <RiArrowLeftWideLine /> : <RiArrowRightWideLine />}
-            onClick={viewSettings?.rtl ? handleGoPrev : handleGoNext}
-            tooltip={viewSettings?.rtl ? _('Go Left') : _('Go Right')}
+            icon={<FaHeadphones className={ttsEnabled ? 'text-blue-500' : ''} />}
+            onClick={handleSpeakText}
+            tooltip={_('Speak')}
+          />
+          <Button
+            icon={viewSettings?.rtl ? <RiArrowLeftSLine /> : <RiArrowRightSLine />}
+            onClick={viewSettings?.rtl ? handleGoPrevPage : handleGoNextPage}
+            tooltip={viewSettings?.rtl ? _('Previous Page') : _('Next Page')}
+          />
+          <Button
+            icon={viewSettings?.rtl ? <RiArrowLeftDoubleLine /> : <RiArrowRightDoubleLine />}
+            onClick={viewSettings?.rtl ? handleGoPrevSection : handleGoNextSection}
+            tooltip={viewSettings?.rtl ? _('Previous Section') : _('Next Section')}
           />
         </div>
       </div>

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

@@ -14,6 +14,7 @@ import SidebarToggler from './SidebarToggler';
 import BookmarkToggler from './BookmarkToggler';
 import NotebookToggler from './NotebookToggler';
 import SettingsToggler from './SettingsToggler';
+import TranslationToggler from './TranslationToggler';
 import ViewMenu from './ViewMenu';
 
 interface HeaderBarProps {
@@ -119,6 +120,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
             <SidebarToggler bookKey={bookKey} />
           </div>
           <BookmarkToggler bookKey={bookKey} />
+          <TranslationToggler bookKey={bookKey} />
         </div>
 
         <div className='header-title z-15 bg-base-100 pointer-events-none absolute inset-0 hidden items-center justify-center sm:flex'>

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

@@ -5,6 +5,7 @@ import { eventDispatcher } from '@/utils/event';
 interface SectionInfoProps {
   bookKey: string;
   showDoubleBorder: boolean;
+  isScrolled: boolean;
   isVertical: boolean;
   horizontalGap: number;
   verticalMargin: number;
@@ -13,6 +14,7 @@ interface SectionInfoProps {
 const HintInfo: React.FC<SectionInfoProps> = ({
   bookKey,
   showDoubleBorder,
+  isScrolled,
   isVertical,
   horizontalGap,
   verticalMargin,
@@ -57,7 +59,14 @@ const HintInfo: React.FC<SectionInfoProps> = ({
           'hintinfo absolute flex items-center justify-end overflow-hidden ps-2',
           'mt-[env(safe-area-inset-top)]',
           hintMessage ? 'bg-base-100' : 'bg-transparent',
-          isVertical ? 'writing-vertical-rl max-h-[50%]' : 'top-0 h-[44px] max-w-[50%]',
+          isVertical ? 'writing-vertical-rl' : 'top-0 h-[44px]',
+          isScrolled
+            ? isVertical
+              ? 'h-full'
+              : 'w-full'
+            : isVertical
+              ? 'max-h-[50%]'
+              : 'max-w-[50%]',
         )}
         style={
           isVertical

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

@@ -15,6 +15,8 @@ import { useSettingsStore } from '@/store/settingsStore';
 import { useDeviceControlStore } from '@/store/deviceStore';
 import { useScreenWakeLock } from '@/hooks/useScreenWakeLock';
 import { eventDispatcher } from '@/utils/event';
+import { interceptGlobalOpen } from '@/utils/open';
+import { mountAdditionalFonts } from '@/utils/style';
 import { setSystemUIVisibility } from '@/utils/bridge';
 import { AboutWindow } from '@/components/AboutWindow';
 import { UpdaterWindow } from '@/components/UpdaterWindow';
@@ -36,6 +38,11 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
   useTheme({ systemUIVisible: false, appThemeColor: 'base-100' });
   useScreenWakeLock(settings.screenWakeLock);
 
+  useEffect(() => {
+    mountAdditionalFonts(document);
+    interceptGlobalOpen();
+  }, []);
+
   useEffect(() => {
     const handleVisibilityChange = () => {
       if (appService?.isMobileApp && !document.hidden) {

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

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import { RiTranslateAi } from 'react-icons/ri';
+
+import { useEnv } from '@/context/EnvContext';
+import { useReaderStore } from '@/store/readerStore';
+import { useTranslation } from '@/hooks/useTranslation';
+import { useBookDataStore } from '@/store/bookDataStore';
+import { saveViewSettings } from '../utils/viewSettingsHelper';
+import { isSameLang } from '@/utils/lang';
+import Button from '@/components/Button';
+import { getLocale } from '@/utils/misc';
+
+const TranslationToggler = ({ bookKey }: { bookKey: string }) => {
+  const _ = useTranslation();
+  const { envConfig, appService } = useEnv();
+  const { getBookData } = useBookDataStore();
+  const { getViewSettings, setViewSettings, setHoveredBookKey } = useReaderStore();
+
+  const bookData = getBookData(bookKey);
+  const viewSettings = getViewSettings(bookKey)!;
+  const [translationEnabled, setTranslationEnabled] = useState(viewSettings.translationEnabled!);
+
+  const primaryLanguage = bookData?.book?.primaryLanguage;
+  const targetLanguage = viewSettings.translateTargetLang;
+
+  useEffect(() => {
+    if (translationEnabled === viewSettings.translationEnabled) return;
+    if (appService?.isMobile) {
+      setHoveredBookKey('');
+    }
+    saveViewSettings(envConfig, bookKey, 'translationEnabled', translationEnabled, true, false);
+    viewSettings.translationEnabled = translationEnabled;
+    setViewSettings(bookKey, { ...viewSettings });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [translationEnabled]);
+
+  return (
+    <Button
+      icon={
+        <RiTranslateAi className={translationEnabled ? 'text-blue-500' : 'text-base-content'} />
+      }
+      disabled={
+        !bookData ||
+        bookData.book?.format === 'PDF' ||
+        isSameLang(primaryLanguage, targetLanguage) ||
+        (!targetLanguage && isSameLang(primaryLanguage, getLocale()))
+      }
+      onClick={() => setTranslationEnabled(!translationEnabled)}
+      tooltip={translationEnabled ? _('Disable Translation') : _('Enable Translation')}
+      tooltipDirection='bottom'
+    ></Button>
+  );
+};
+
+export default TranslationToggler;

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

@@ -10,7 +10,6 @@ import { useEnv } from '@/context/EnvContext';
 import { useThemeStore } from '@/store/themeStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
-import { ThemeMode } from '@/styles/themes';
 import { getStyles } from '@/utils/style';
 import { getMaxInlineSize } from '@/utils/config';
 import { tauriHandleToggleFullScreen } from '@/utils/window';
@@ -33,9 +32,12 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
   const { getView, getViewSettings, setViewSettings } = useReaderStore();
   const viewSettings = getViewSettings(bookKey)!;
 
-  const { themeMode, setThemeMode } = useThemeStore();
+  const { themeMode, isDarkMode, setThemeMode } = useThemeStore();
   const [isScrolledMode, setScrolledMode] = useState(viewSettings!.scrolled);
   const [zoomLevel, setZoomLevel] = useState(viewSettings!.zoomLevel!);
+  const [invertImgColorInDark, setInvertImgColorInDark] = useState(
+    viewSettings!.invertImgColorInDark,
+  );
 
   const zoomIn = () => setZoomLevel((prev) => Math.min(prev + ZOOM_STEP, MAX_ZOOM_LEVEL));
   const zoomOut = () => setZoomLevel((prev) => Math.max(prev - ZOOM_STEP, MIN_ZOOM_LEVEL));
@@ -48,8 +50,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
   };
 
   const cycleThemeMode = () => {
-    const nextMode: ThemeMode =
-      themeMode === 'auto' ? 'light' : themeMode === 'light' ? 'dark' : 'auto';
+    const nextMode = themeMode === 'auto' ? 'light' : themeMode === 'light' ? 'dark' : 'auto';
     setThemeMode(nextMode);
   };
 
@@ -76,6 +77,12 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [zoomLevel]);
 
+  useEffect(() => {
+    if (invertImgColorInDark === viewSettings.invertImgColorInDark) return;
+    saveViewSettings(envConfig, bookKey, 'invertImgColorInDark', invertImgColorInDark, true, true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [invertImgColorInDark]);
+
   return (
     <div
       tabIndex={0}
@@ -135,6 +142,12 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
         Icon={themeMode === 'dark' ? BiMoon : themeMode === 'light' ? BiSun : TbSunMoon}
         onClick={cycleThemeMode}
       />
+      <MenuItem
+        label={_('Invert Image In Dark Mode')}
+        disabled={!isDarkMode}
+        Icon={invertImgColorInDark ? MdCheck : undefined}
+        onClick={() => setInvertImgColorInDark(!invertImgColorInDark)}
+      />
     </div>
   );
 };

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

@@ -30,7 +30,7 @@ import { HIGHLIGHT_COLOR_HEX } from '@/services/constants';
 import AnnotationPopup from './AnnotationPopup';
 import WiktionaryPopup from './WiktionaryPopup';
 import WikipediaPopup from './WikipediaPopup';
-import DeepLPopup from './DeepLPopup';
+import TranslatorPopup from './TranslatorPopup';
 
 const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const _ = useTranslation();
@@ -73,7 +73,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const dictPopupWidth = Math.min(480, maxWidth);
   const dictPopupHeight = Math.min(300, maxHeight);
   const transPopupWidth = Math.min(480, maxWidth);
-  const transPopupHeight = Math.min(360, maxHeight);
+  const transPopupHeight = Math.min(265, maxHeight);
   const annotPopupWidth = Math.min(useResponsiveSize(300), maxWidth);
   const annotPopupHeight = useResponsiveSize(44);
   const androidSelectionHandlerHeight = 0;
@@ -93,10 +93,12 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   const {
     handleScroll,
+    handleTouchStart,
+    handleTouchEnd,
     handlePointerup,
     handleSelectionchange,
-    handleAnnotPopup,
-    handleShowAnnotation,
+    handleShowPopup,
+    handleUpToPopup,
   } = useTextSelector(bookKey, setSelection, handleDismissPopup);
 
   const onLoad = (event: Event) => {
@@ -110,7 +112,9 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     };
     if (bookData.book?.format !== 'PDF') {
       view?.renderer?.addEventListener('scroll', handleScroll);
+      detail.doc?.addEventListener('touchstart', handleTouchStart);
       detail.doc?.addEventListener('touchmove', handleTouchmove);
+      detail.doc?.addEventListener('touchend', handleTouchEnd);
       detail.doc?.addEventListener('pointerup', () => handlePointerup(doc, index));
       detail.doc?.addEventListener('selectionchange', () => handleSelectionchange(doc, index));
 
@@ -163,15 +167,15 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     setSelectedStyle(annotation.style!);
     setSelectedColor(annotation.color!);
     setSelection(selection);
-    handleShowAnnotation();
+    handleUpToPopup();
   };
 
   useFoliateEvents(view, { onLoad, onDrawAnnotation, onShowAnnotation });
 
   useEffect(() => {
-    handleAnnotPopup(showAnnotPopup);
+    handleShowPopup(showAnnotPopup || showWiktionaryPopup || showWikipediaPopup || showDeepLPopup);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showAnnotPopup]);
+  }, [showAnnotPopup, showWiktionaryPopup, showWikipediaPopup, showDeepLPopup]);
 
   useEffect(() => {
     eventDispatcher.on('export-annotations', handleExportMarkdown);
@@ -214,11 +218,11 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         popupPadding,
       );
       if (triangPos.point.x == 0 || triangPos.point.y == 0) return;
-      setShowAnnotPopup(true);
       setAnnotPopupPosition(annotPopupPos);
       setDictPopupPosition(dictPopupPos);
       setTranslatorPopupPosition(transPopupPos);
       setTrianglePosition(triangPos);
+      handleShowAnnotPopup();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selection, bookKey]);
@@ -245,6 +249,13 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [progress]);
 
+  const handleShowAnnotPopup = () => {
+    setShowAnnotPopup(true);
+    setShowDeepLPopup(false);
+    setShowWiktionaryPopup(false);
+    setShowWikipediaPopup(false);
+  };
+
   const handleCopy = () => {
     if (!selection || !selection.text) return;
     eventDispatcher.dispatch('toast', {
@@ -497,7 +508,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         />
       )}
       {showDeepLPopup && trianglePosition && translatorPopupPosition && (
-        <DeepLPopup
+        <TranslatorPopup
           text={selection?.text as string}
           position={translatorPopupPosition}
           trianglePosition={trianglePosition}

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

@@ -1,185 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import Popup from '@/components/Popup';
-import { Position } from '@/utils/sel';
-import { getAPIBaseUrl } from '@/services/environment';
-import { useSettingsStore } from '@/store/settingsStore';
-import { useTranslation } from '@/hooks/useTranslation';
-import { useAuth } from '@/context/AuthContext';
-
-const LANGUAGES = {
-  AUTO: 'Auto Detect',
-  EN: 'English',
-  DE: 'German',
-  FR: 'French',
-  ES: 'Spanish',
-  IT: 'Italian',
-  EL: 'Greek',
-  PT: 'Portuguese',
-  NL: 'Dutch',
-  PL: 'Polish',
-  UK: 'Ukrainian',
-  RU: 'Russian',
-  AR: 'Arabic',
-  TR: 'Turkish',
-  ID: 'Indonesian',
-  KO: 'Korean',
-  JA: 'Japanese',
-  'ZH-HANS': 'Chinese (Simplified)',
-  'ZH-HANT': 'Chinese (Traditional)',
-};
-
-const DEEPL_API_ENDPOINT = getAPIBaseUrl() + '/deepl/translate';
-
-interface DeepLPopupProps {
-  text: string;
-  position: Position;
-  trianglePosition: Position;
-  popupWidth: number;
-  popupHeight: number;
-}
-
-const DeepLPopup: React.FC<DeepLPopupProps> = ({
-  text,
-  position,
-  trianglePosition,
-  popupWidth,
-  popupHeight,
-}) => {
-  const _ = useTranslation();
-  const { token } = useAuth();
-  const { settings, setSettings } = useSettingsStore();
-  const [sourceLang, setSourceLang] = useState('AUTO');
-  const [targetLang, setTargetLang] = useState(settings.globalReadSettings.translateTargetLang);
-  const [translation, setTranslation] = useState<string | null>(null);
-  const [detectedSourceLang, setDetectedSourceLang] = useState<keyof typeof LANGUAGES | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleSourceLangChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSourceLang(event.target.value);
-  };
-
-  const handleTargetLangChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    settings.globalReadSettings.translateTargetLang = event.target.value;
-    setSettings(settings);
-    setTargetLang(event.target.value);
-  };
-
-  useEffect(() => {
-    const fetchTranslation = async () => {
-      setLoading(true);
-      setError(null);
-      setTranslation(null);
-
-      try {
-        const response = await fetch(DEEPL_API_ENDPOINT, {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token ?? ''}`,
-          },
-          body: JSON.stringify({
-            text: [text],
-            target_lang: targetLang.toUpperCase(),
-            source_lang: sourceLang === 'AUTO' ? undefined : sourceLang.toUpperCase(),
-          }),
-        });
-
-        if (!response.ok) {
-          throw new Error('Failed to fetch translation');
-        }
-        const data = await response.json();
-        const translatedText = data.translations[0]?.text;
-        const detectedSource = data.translations[0]?.detected_source_language;
-
-        if (!translatedText) {
-          throw new Error('No translation found');
-        }
-
-        if (sourceLang === 'AUTO' && detectedSource) {
-          setDetectedSourceLang(detectedSource);
-        }
-
-        setTranslation(translatedText);
-      } catch (err) {
-        console.error(err);
-        if (!token) {
-          setError(_('Unable to fetch the translation. Please log in first and try again.'));
-        } else {
-          setError(_('Unable to fetch the translation. Try again later.'));
-        }
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchTranslation();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [text, token, sourceLang, targetLang]);
-
-  return (
-    <div>
-      <Popup
-        trianglePosition={trianglePosition}
-        width={popupWidth}
-        height={popupHeight}
-        position={position}
-        className='select-text'
-      >
-        <div className='text-neutral-content relative h-[50%] overflow-y-auto border-b border-neutral-400/75 p-4 font-sans'>
-          <div className='mb-2 flex items-center justify-between'>
-            <h1 className='text-base font-semibold'>{_('Original Text')}</h1>
-            <select
-              value={sourceLang}
-              onChange={handleSourceLangChange}
-              className='select text-neutral-content h-8 min-h-8 rounded-md border-none bg-neutral-200/50 text-sm focus:outline-none focus:ring-0'
-            >
-              {Object.entries(LANGUAGES).map(([code, name]) => {
-                return (
-                  <option key={code} value={code}>
-                    {detectedSourceLang && sourceLang === 'AUTO' && code === 'AUTO'
-                      ? `${LANGUAGES[detectedSourceLang] || detectedSourceLang} ` + _('(detected)')
-                      : name}
-                  </option>
-                );
-              })}
-            </select>
-          </div>
-          <p className='text-base'>{text}</p>
-        </div>
-
-        <div className='text-neutral-content relative h-[50%] overflow-y-auto p-4 font-sans'>
-          <div className='mb-2 flex items-center justify-between'>
-            <h2 className='text-base font-semibold'>{_('Translated Text')}</h2>
-            <select
-              value={targetLang}
-              onChange={handleTargetLangChange}
-              className='select text-neutral-content h-8 min-h-8 rounded-md border-none bg-neutral-200/50 text-sm focus:outline-none focus:ring-0'
-            >
-              {Object.entries(LANGUAGES)
-                .filter(([code]) => code !== 'AUTO')
-                .map(([code, name]) => (
-                  <option key={code} value={code}>
-                    {name}
-                  </option>
-                ))}
-            </select>
-          </div>
-
-          {loading ? (
-            <p className='text-base italic text-gray-500'>{_('Loading...')}</p>
-          ) : error ? (
-            <p className='text-base text-red-600'>{error}</p>
-          ) : (
-            <div>
-              <p className='text-base'>{translation || 'No translation available.'}</p>
-              <div className='pt-4 text-sm opacity-60'>Translated by DeepL.</div>
-            </div>
-          )}
-        </div>
-      </Popup>
-    </div>
-  );
-};
-
-export default DeepLPopup;

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

@@ -0,0 +1,215 @@
+import React, { useEffect, useState } from 'react';
+import Popup from '@/components/Popup';
+import { Position } from '@/utils/sel';
+import { useAuth } from '@/context/AuthContext';
+import { useSettingsStore } from '@/store/settingsStore';
+import { useTranslation } from '@/hooks/useTranslation';
+import { useTranslator } from '@/hooks/useTranslator';
+import { TRANSLATED_LANGS } from '@/services/constants';
+import { UseTranslatorOptions } from '@/services/translators';
+import { localeToLang } from '@/utils/lang';
+import Select from '@/components/Select';
+
+const notSupportedLangs = ['hi', 'vi'];
+
+const generateTranslatorLangs = () => {
+  const langs = { ...TRANSLATED_LANGS };
+  const result: Record<string, string> = {};
+  for (const [code, name] of Object.entries(langs)) {
+    if (notSupportedLangs.includes(code)) continue;
+    const newCode = localeToLang(code).toUpperCase();
+    result[newCode] = name;
+  }
+  return result;
+};
+
+const TRANSLATOR_LANGS = generateTranslatorLangs();
+
+interface TranslatorPopupProps {
+  text: string;
+  position: Position;
+  trianglePosition: Position;
+  popupWidth: number;
+  popupHeight: number;
+}
+
+interface TranslatorType {
+  name: string;
+  label: string;
+}
+
+const TranslatorPopup: React.FC<TranslatorPopupProps> = ({
+  text,
+  position,
+  trianglePosition,
+  popupWidth,
+  popupHeight,
+}) => {
+  const _ = useTranslation();
+  const { token } = useAuth();
+  const { settings, setSettings } = useSettingsStore();
+  const [providers, setProviders] = useState<TranslatorType[]>([]);
+  const [sourceLang, setSourceLang] = useState('AUTO');
+  const [targetLang, setTargetLang] = useState(settings.globalReadSettings.translateTargetLang);
+  const [provider, setProvider] = useState(settings.globalReadSettings.translationProvider);
+  const [translation, setTranslation] = useState<string | null>(null);
+  const [detectedSourceLang, setDetectedSourceLang] = useState<
+    keyof typeof TRANSLATOR_LANGS | null
+  >(null);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { translate, translators } = useTranslator({
+    provider,
+    sourceLang,
+    targetLang,
+  } as UseTranslatorOptions);
+
+  const handleSourceLangChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    setSourceLang(event.target.value);
+  };
+
+  const handleTargetLangChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    settings.globalReadSettings.translateTargetLang = event.target.value;
+    setSettings(settings);
+    setTargetLang(event.target.value);
+  };
+
+  const handleProviderChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedTranslator = translators.find((t) => t.name === event.target.value);
+    if (selectedTranslator) {
+      settings.globalReadSettings.translationProvider = selectedTranslator.name;
+      setSettings(settings);
+      setProvider(selectedTranslator.name);
+    }
+  };
+
+  useEffect(() => {
+    const availableProviders = translators.map((t) => {
+      return { name: t.name, label: t.label };
+    });
+    setProviders(availableProviders);
+  }, [translators]);
+
+  useEffect(() => {
+    setLoading(true);
+    const fetchTranslation = async () => {
+      setError(null);
+      setTranslation(null);
+
+      try {
+        const input = text.replaceAll('\n', '').trim();
+        const result = await translate([input]);
+        const translatedText = result[0];
+        const detectedSource = null;
+
+        if (!translatedText) {
+          throw new Error('No translation found');
+        }
+
+        setTranslation(translatedText);
+        if (sourceLang === 'AUTO' && detectedSource) {
+          setDetectedSourceLang(detectedSource);
+        }
+      } catch (err) {
+        console.error(err);
+        if (!token) {
+          setError(_('Unable to fetch the translation. Please log in first and try again.'));
+        } else {
+          setError(_('Unable to fetch the translation. Try again later.'));
+        }
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchTranslation();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [text, token, sourceLang, targetLang, provider]);
+
+  return (
+    <div>
+      <Popup
+        trianglePosition={trianglePosition}
+        width={popupWidth}
+        minHeight={popupHeight}
+        maxHeight={720}
+        position={position}
+        className='grid h-full select-text grid-rows-[1fr,auto,1fr] bg-gray-600 text-white'
+        triangleClassName='text-gray-600'
+      >
+        <div className='overflow-y-auto p-4 font-sans'>
+          <div className='mb-2 flex items-center justify-between'>
+            <h1 className='text-sm font-normal'>{_('Original Text')}</h1>
+            <Select
+              value={sourceLang}
+              onChange={handleSourceLangChange}
+              options={[
+                { value: 'AUTO', label: _('Auto Detect') },
+                ...Object.entries(TRANSLATOR_LANGS)
+                  .sort((a, b) => a[1].localeCompare(b[1]))
+                  .map(([code, name]) => {
+                    const label =
+                      detectedSourceLang && sourceLang === 'AUTO' && code === 'AUTO'
+                        ? `${TRANSLATOR_LANGS[detectedSourceLang] || detectedSourceLang} ` +
+                          _('(detected)')
+                        : name;
+                    return { value: code, label };
+                  }),
+              ]}
+            />
+          </div>
+          <p className='text-base text-white/90'>{text}</p>
+        </div>
+
+        <div className='mx-4 flex-shrink-0 border-t border-gray-500/30'></div>
+
+        <div className='overflow-y-auto px-4 pb-8 pt-4 font-sans'>
+          <div className='mb-2 flex items-center justify-between'>
+            <h2 className='text-sm font-normal'>{_('Translated Text')}</h2>
+            <Select
+              value={targetLang}
+              onChange={handleTargetLangChange}
+              options={Object.entries(TRANSLATOR_LANGS)
+                .sort((a, b) => a[1].localeCompare(b[1]))
+                .map(([code, name]) => ({ value: code, label: name }))}
+            />
+          </div>
+          {loading ? (
+            <p className='text-base italic text-gray-500'>{_('Loading...')}</p>
+          ) : (
+            <div>
+              {error ? (
+                <p className='text-base text-red-600'>{error}</p>
+              ) : (
+                <p className='text-base text-white/90'>
+                  {translation || _('No translation available.')}
+                </p>
+              )}
+            </div>
+          )}
+        </div>
+        <div className='absolute bottom-0 flex h-8 w-full items-center justify-between bg-gray-600 px-4'>
+          {provider && !loading && (
+            <div className='text-xs opacity-60'>
+              {error
+                ? ''
+                : _('Translated by {{provider}}.', {
+                    provider: providers.find((p) => p.name === provider)?.label,
+                  })}
+            </div>
+          )}
+          <div className='ml-auto'>
+            <Select
+              value={provider}
+              onChange={handleProviderChange}
+              options={providers.map(({ name: value, label }) => ({ value, label }))}
+            />
+          </div>
+        </div>
+      </Popup>
+    </div>
+  );
+};
+
+export default TranslatorPopup;

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

@@ -42,6 +42,7 @@ const ColorInput: React.FC<ColorInputProps> = ({ label, value, onChange }) => {
         <input
           type='text'
           value={value}
+          spellCheck={false}
           onChange={(e) => onChange(e.target.value)}
           className='bg-base-100 text-base-content border-base-200 min-w-4 max-w-36 flex-1 rounded border p-1 font-mono text-sm'
         />

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

@@ -13,24 +13,38 @@ import {
   themes,
 } from '@/styles/themes';
 import { useEnv } from '@/context/EnvContext';
-import { useSettingsStore } from '@/store/settingsStore';
 import { useThemeStore } from '@/store/themeStore';
+import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useSettingsStore } from '@/store/settingsStore';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
+import { saveViewSettings } from '../../utils/viewSettingsHelper';
 import ThemeEditor from './ThemeEditor';
 
-const ColorPanel: React.FC<{ bookKey: string }> = ({}) => {
+const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const _ = useTranslation();
   const { themeMode, themeColor, isDarkMode, setThemeMode, setThemeColor, saveCustomTheme } =
     useThemeStore();
   const { envConfig } = useEnv();
   const { settings, setSettings } = useSettingsStore();
+  const { getViewSettings } = useReaderStore();
+  const viewSettings = getViewSettings(bookKey)!;
+  const [invertImgColorInDark, setInvertImgColorInDark] = useState(
+    viewSettings.invertImgColorInDark,
+  );
+
   const iconSize16 = useResponsiveSize(16);
   const iconSize24 = useResponsiveSize(24);
   const [editTheme, setEditTheme] = useState<CustomTheme | null>(null);
   const [customThems, setCustomThemes] = useState<Theme[]>([]);
   const [showCustomThemeEditor, setShowCustomThemeEditor] = useState(false);
 
+  useEffect(() => {
+    if (invertImgColorInDark === viewSettings.invertImgColorInDark) return;
+    saveViewSettings(envConfig, bookKey, 'invertImgColorInDark', invertImgColorInDark);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [invertImgColorInDark]);
+
   useEffect(() => {
     const customThemes = settings.globalReadSettings.customThemes ?? [];
     setCustomThemes(
@@ -112,6 +126,17 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({}) => {
             </div>
           </div>
 
+          <div className='flex items-center justify-between'>
+            <h2 className='font-medium'>{_('Invert Image In Dark Mode')}</h2>
+            <input
+              type='checkbox'
+              className='toggle'
+              checked={invertImgColorInDark}
+              disabled={!isDarkMode}
+              onChange={() => setInvertImgColorInDark(!invertImgColorInDark)}
+            />
+          </div>
+
           <div>
             <h2 className='mb-2 font-medium'>{_('Theme Color')}</h2>
             <div className='grid grid-cols-3 gap-4'>

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

@@ -0,0 +1,208 @@
+import React, { useEffect, useState } from 'react';
+import { useEnv } from '@/context/EnvContext';
+import { useReaderStore } from '@/store/readerStore';
+import { useDeviceControlStore } from '@/store/deviceStore';
+import { useTranslation } from '@/hooks/useTranslation';
+import { useBookDataStore } from '@/store/bookDataStore';
+import { getStyles } from '@/utils/style';
+import { getMaxInlineSize } from '@/utils/config';
+import { saveViewSettings } from '../../utils/viewSettingsHelper';
+import NumberInput from './NumberInput';
+
+const ControlPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
+  const _ = useTranslation();
+  const { envConfig, appService } = useEnv();
+  const { getView, getViewSettings } = useReaderStore();
+  const { getBookData } = useBookDataStore();
+  const { acquireVolumeKeyInterception, releaseVolumeKeyInterception } = useDeviceControlStore();
+  const bookData = getBookData(bookKey)!;
+  const viewSettings = getViewSettings(bookKey)!;
+
+  const [isScrolledMode, setScrolledMode] = useState(viewSettings.scrolled!);
+  const [isContinuousScroll, setIsContinuousScroll] = useState(viewSettings.continuousScroll!);
+  const [scrollingOverlap, setScrollingOverlap] = useState(viewSettings.scrollingOverlap!);
+  const [volumeKeysToFlip, setVolumeKeysToFlip] = useState(viewSettings.volumeKeysToFlip!);
+  const [isDisableClick, setIsDisableClick] = useState(viewSettings.disableClick!);
+  const [swapClickArea, setSwapClickArea] = useState(viewSettings.swapClickArea!);
+  const [animated, setAnimated] = useState(viewSettings.animated!);
+  const [allowScript, setAllowScript] = useState(viewSettings.allowScript!);
+
+  useEffect(() => {
+    if (isScrolledMode === viewSettings.scrolled) return;
+    saveViewSettings(envConfig, bookKey, 'scrolled', isScrolledMode);
+    getView(bookKey)?.renderer.setAttribute('flow', isScrolledMode ? 'scrolled' : 'paginated');
+    getView(bookKey)?.renderer.setAttribute(
+      'max-inline-size',
+      `${getMaxInlineSize(viewSettings)}px`,
+    );
+    getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isScrolledMode]);
+
+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'continuousScroll', isContinuousScroll, false, false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isContinuousScroll]);
+
+  useEffect(() => {
+    if (scrollingOverlap === viewSettings.scrollingOverlap) return;
+    saveViewSettings(envConfig, bookKey, 'scrollingOverlap', scrollingOverlap, false, false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollingOverlap]);
+
+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'volumeKeysToFlip', volumeKeysToFlip, false, false);
+    if (appService?.isMobileApp) {
+      if (volumeKeysToFlip) {
+        acquireVolumeKeyInterception();
+      } else {
+        releaseVolumeKeyInterception();
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [volumeKeysToFlip]);
+
+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'disableClick', isDisableClick, false, false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDisableClick]);
+
+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'swapClickArea', swapClickArea, false, false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [swapClickArea]);
+
+  useEffect(() => {
+    saveViewSettings(envConfig, bookKey, 'animated', animated, false, false);
+    if (animated) {
+      getView(bookKey)?.renderer.setAttribute('animated', '');
+    } else {
+      getView(bookKey)?.renderer.removeAttribute('animated');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [animated]);
+
+  useEffect(() => {
+    if (viewSettings.allowScript === allowScript) return;
+    saveViewSettings(envConfig, bookKey, 'allowScript', allowScript, true, false);
+    setTimeout(() => window.location.reload(), 100);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [allowScript]);
+
+  return (
+    <div className='my-4 w-full space-y-6'>
+      <div className='w-full'>
+        <h2 className='mb-2 font-medium'>{_('Scroll')}</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=''>{_('Scrolled Mode')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={isScrolledMode}
+                onChange={() => setScrolledMode(!isScrolledMode)}
+              />
+            </div>
+            <div className='config-item'>
+              <span className=''>{_('Continuous Scroll')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={isContinuousScroll}
+                onChange={() => setIsContinuousScroll(!isContinuousScroll)}
+              />
+            </div>
+            <NumberInput
+              label={_('Overlap Pixels')}
+              value={scrollingOverlap}
+              onChange={setScrollingOverlap}
+              disabled={!viewSettings.scrolled}
+              min={0}
+              max={200}
+              step={10}
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className='w-full'>
+        <h2 className='mb-2 font-medium'>{_('Click')}</h2>
+        <div className='card border-base-200 bg-base-100 border shadow'>
+          <div className='divide-base-200'>
+            <div className='config-item'>
+              <span className=''>{_('Clicks for Page Flip')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={!isDisableClick}
+                onChange={() => setIsDisableClick(!isDisableClick)}
+              />
+            </div>
+            <div className='config-item'>
+              <span className=''>{_('Swap Clicks Area')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={swapClickArea}
+                disabled={isDisableClick}
+                onChange={() => setSwapClickArea(!swapClickArea)}
+              />
+            </div>
+            {appService?.isMobileApp && (
+              <div className='config-item'>
+                <span className=''>{_('Volume Keys for Page Flip')}</span>
+                <input
+                  type='checkbox'
+                  className='toggle'
+                  checked={volumeKeysToFlip}
+                  onChange={() => setVolumeKeysToFlip(!volumeKeysToFlip)}
+                />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className='w-full'>
+        <h2 className='mb-2 font-medium'>{_('Animation')}</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=''>{_('Paging Animation')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={animated}
+                onChange={() => setAnimated(!animated)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className='w-full'>
+        <h2 className='mb-2 font-medium'>{_('Security')}</h2>
+        <div className='card border-base-200 bg-base-100 border shadow'>
+          <div className='divide-base-200 divide-y'>
+            <div className='config-item !h-16'>
+              <div className='flex flex-col gap-1'>
+                <span className=''>{_('Allow JavaScript')}</span>
+                <span className='text-xs'>{_('Enable only if you trust the file.')}</span>
+              </div>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={allowScript}
+                disabled={bookData.book?.format !== 'EPUB'}
+                onChange={() => setAllowScript(!allowScript)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ControlPanel;

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

@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React from 'react';
 import { MdCheck } from 'react-icons/md';
 import { useSettingsStore } from '@/store/settingsStore';
@@ -21,10 +22,13 @@ const DialogMenu: React.FC<DialogMenuProps> = ({ toggleDropdown }) => {
   return (
     <div
       tabIndex={0}
-      className='dropdown-content dropdown-right no-triangle border-base-200 z-20 mt-1 border shadow-2xl'
+      className={clsx(
+        'dropdown-content dropdown-right no-triangle border-base-200 z-20 mt-1 border shadow-2xl',
+        'text-base sm:text-sm',
+      )}
     >
       <button
-        className='hover:bg-base-200 text-base-content flex w-full items-center justify-between rounded-md p-2'
+        className='hover:bg-base-200 text-base-content flex w-full items-center justify-between rounded-md p-1'
         onClick={handleToggleGlobal}
       >
         <div className='flex items-center'>

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

@@ -8,17 +8,30 @@ interface DropDownProps {
   selected: { option: string; label: string };
   options: { option: string; label: string }[];
   onSelect: (option: string) => void;
+  disabled?: boolean;
+  className?: string;
+  listClassName?: string;
 }
 
-const DropDown: React.FC<DropDownProps> = ({ selected, options, onSelect }) => {
+const DropDown: React.FC<DropDownProps> = ({
+  selected,
+  options,
+  onSelect,
+  className,
+  listClassName,
+  disabled = false,
+}) => {
   const iconSize16 = useResponsiveSize(16);
   const defaultIconSize = useDefaultIconSize();
 
   return (
-    <div className='dropdown dropdown-bottom'>
+    <div className={clsx('dropdown dropdown-bottom', className)}>
       <button
         tabIndex={0}
-        className='btn btn-sm flex items-center gap-1 px-[20px] font-normal normal-case'
+        className={clsx(
+          'btn btn-sm flex items-center gap-1 px-[20px] font-normal normal-case',
+          disabled && 'btn-disabled',
+        )}
         onClick={(e) => e.currentTarget.focus()}
       >
         <span>{selected.label}</span>
@@ -29,6 +42,7 @@ const DropDown: React.FC<DropDownProps> = ({ selected, options, onSelect }) => {
         className={clsx(
           'dropdown-content bgcolor-base-200 no-triangle menu rounded-box absolute z-[1] shadow',
           'menu-vertical right-[-32px] mt-2 inline max-h-80 w-44 overflow-y-scroll sm:right-0',
+          listClassName,
         )}
       >
         {options.map(({ option, label }) => (

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

@@ -226,6 +226,16 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   return (
     <div className='my-4 w-full space-y-6'>
+      <div className='flex items-center justify-between'>
+        <h2 className=''>{_('Override Book Font')}</h2>
+        <input
+          type='checkbox'
+          className='toggle'
+          checked={overrideFont}
+          onChange={() => setOverrideFont(!overrideFont)}
+        />
+      </div>
+
       <div className='w-full'>
         <h2 className='mb-2 font-medium'>{_('Font Size')}</h2>
         <div className='card border-base-200 border shadow'>
@@ -288,16 +298,6 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
                 onSelect={setDefaultCJKFont}
               />
             )}
-
-            <div className='config-item'>
-              <span className=''>{_('Override Book Font')}</span>
-              <input
-                type='checkbox'
-                className='toggle'
-                checked={overrideFont}
-                onChange={() => setOverrideFont(!overrideFont)}
-              />
-            </div>
           </div>
         </div>
       </div>

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

@@ -0,0 +1,151 @@
+import clsx from 'clsx';
+import i18n from 'i18next';
+import React, { useEffect, useState } from 'react';
+import { useEnv } from '@/context/EnvContext';
+import { useReaderStore } from '@/store/readerStore';
+import { useTranslation } from '@/hooks/useTranslation';
+import { saveViewSettings } from '../../utils/viewSettingsHelper';
+import { getTranslators } from '@/services/translators';
+import { TRANSLATED_LANGS } from '@/services/constants';
+import DropDown from './DropDown';
+
+const LangPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
+  const _ = useTranslation();
+  const { envConfig } = useEnv();
+  const { getViewSettings, setViewSettings } = useReaderStore();
+  const viewSettings = getViewSettings(bookKey)!;
+
+  const [translationEnabled, setTranslationEnabled] = useState(viewSettings.translationEnabled!);
+  const [translationProvider, setTranslationProvider] = useState(viewSettings.translationProvider!);
+  const [translateTargetLang, setTranslateTargetLang] = useState(viewSettings.translateTargetLang!);
+
+  const getCurrentUILangOption = () => {
+    const uiLanguage = viewSettings.uiLanguage;
+    return {
+      option: uiLanguage,
+      label:
+        uiLanguage === ''
+          ? _('Auto')
+          : TRANSLATED_LANGS[uiLanguage as keyof typeof TRANSLATED_LANGS],
+    };
+  };
+
+  const getLangOptions = () => {
+    const langs = TRANSLATED_LANGS as Record<string, string>;
+    const options = Object.entries(langs).map(([option, label]) => ({ option, label }));
+    options.sort((a, b) => a.label.localeCompare(b.label));
+    options.unshift({ option: '', label: _('System Language') });
+    return options;
+  };
+
+  const handleSelectUILang = (option: string) => {
+    saveViewSettings(envConfig, bookKey, 'uiLanguage', option, false, false);
+    i18n.changeLanguage(option ? option : navigator.language);
+  };
+
+  const getTranslationProviderOptions = () => {
+    const translators = getTranslators();
+    const availableProviders = translators.map((t) => {
+      return { option: t.name, label: t.label };
+    });
+    return availableProviders;
+  };
+
+  const getCurrentTranslationProviderOption = () => {
+    const option = translationProvider;
+    const availableProviders = getTranslationProviderOptions();
+    return availableProviders.find((p) => p.option === option) || availableProviders[0]!;
+  };
+
+  const handleSelectTranslationProvider = (option: string) => {
+    setTranslationProvider(option);
+    saveViewSettings(envConfig, bookKey, 'translationProvider', option, false, false);
+    viewSettings.translationProvider = option;
+    setViewSettings(bookKey, { ...viewSettings });
+  };
+
+  const getCurrentTargetLangOption = () => {
+    const option = translateTargetLang;
+    const availableOptions = getLangOptions();
+    return availableOptions.find((o) => o.option === option) || availableOptions[0]!;
+  };
+
+  const handleSelectTargetLang = (option: string) => {
+    setTranslateTargetLang(option);
+    saveViewSettings(envConfig, bookKey, 'translateTargetLang', option, false, false);
+    viewSettings.translateTargetLang = option;
+    setViewSettings(bookKey, { ...viewSettings });
+  };
+
+  useEffect(() => {
+    if (translationEnabled === viewSettings.translationEnabled) return;
+    saveViewSettings(envConfig, bookKey, 'translationEnabled', translationEnabled, true, false);
+    viewSettings.translationEnabled = translationEnabled;
+    setViewSettings(bookKey, { ...viewSettings });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [translationEnabled]);
+
+  return (
+    <div className={clsx('my-4 w-full space-y-6')}>
+      <div className='w-full'>
+        <h2 className='mb-2 font-medium'>{_('Language')}</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=''>{_('Interface Language')}</span>
+              <DropDown
+                options={getLangOptions()}
+                selected={getCurrentUILangOption()}
+                onSelect={handleSelectUILang}
+                className='dropdown-bottom'
+                listClassName='!max-h-60'
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className='w-full'>
+        <h2 className='mb-2 font-medium'>{_('Translation')}</h2>
+        <div className='card border-base-200 bg-base-100 border shadow'>
+          <div className='divide-base-200'>
+            <div className='config-item'>
+              <span className=''>{_('Enable Translation')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={translationEnabled}
+                onChange={() => setTranslationEnabled(!translationEnabled)}
+              />
+            </div>
+
+            <div className='config-item'>
+              <span className=''>{_('Translation Service')}</span>
+              <DropDown
+                selected={getCurrentTranslationProviderOption()}
+                options={getTranslationProviderOptions()}
+                onSelect={handleSelectTranslationProvider}
+                disabled={!translationEnabled}
+                className='dropdown-top'
+              />
+            </div>
+
+            <div className='config-item'>
+              <span className=''>{_('Translate To')}</span>
+              <DropDown
+                options={getLangOptions()}
+                selected={getCurrentTargetLangOption()}
+                onSelect={handleSelectTargetLang}
+                disabled={!translationEnabled}
+                className='dropdown-top'
+                listClassName='!max-h-60'
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LangPanel;

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

@@ -40,7 +40,6 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [maxBlockSize, setMaxBlockSize] = useState(viewSettings.maxBlockSize!);
   const [writingMode, setWritingMode] = useState(viewSettings.writingMode!);
   const [overrideLayout, setOverrideLayout] = useState(viewSettings.overrideLayout!);
-  const [isScrolledMode, setScrolledMode] = useState(viewSettings.scrolled!);
   const [doubleBorder, setDoubleBorder] = useState(viewSettings.doubleBorder!);
   const [borderColor, setBorderColor] = useState(viewSettings.borderColor!);
   const [showHeader, setShowHeader] = useState(viewSettings.showHeader!);
@@ -163,22 +162,11 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   }, [writingMode]);
 
   useEffect(() => {
+    if (overrideLayout === viewSettings.overrideLayout) return;
     saveViewSettings(envConfig, bookKey, 'overrideLayout', overrideLayout);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [overrideLayout]);
 
-  useEffect(() => {
-    if (isScrolledMode === viewSettings.scrolled) return;
-    saveViewSettings(envConfig, bookKey, 'scrolled', isScrolledMode);
-    getView(bookKey)?.renderer.setAttribute('flow', isScrolledMode ? 'scrolled' : 'paginated');
-    getView(bookKey)?.renderer.setAttribute(
-      'max-inline-size',
-      `${getMaxInlineSize(viewSettings)}px`,
-    );
-    getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isScrolledMode]);
-
   useEffect(() => {
     if (doubleBorder === viewSettings.doubleBorder) return;
     if (doubleBorder && viewSettings.vertical) {
@@ -259,58 +247,53 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   return (
     <div className='my-4 w-full space-y-6'>
-      <div className='w-full'>
-        <div className='flex items-center justify-between'>
-          <h2 className='font-medium'>{_('Scrolled Mode')}</h2>
-          <input
-            type='checkbox'
-            className='toggle'
-            checked={isScrolledMode}
-            onChange={() => setScrolledMode(!isScrolledMode)}
-          />
-        </div>
+      <div className='flex items-center justify-between'>
+        <h2 className=''>{_('Override Book Layout')}</h2>
+        <input
+          type='checkbox'
+          className='toggle'
+          checked={overrideLayout}
+          onChange={() => setOverrideLayout(!overrideLayout)}
+        />
       </div>
-
       {mightBeRTLBook && (
-        <div className='w-full'>
-          <div className='flex items-center justify-between'>
-            <h2 className='font-medium'>{_('Writing Mode')}</h2>
-            <div className='flex gap-4'>
-              <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Default')}>
-                <button
-                  className={`btn btn-ghost btn-circle btn-sm ${writingMode === 'auto' ? 'btn-active bg-base-300' : ''}`}
-                  onClick={() => setWritingMode('auto')}
-                >
-                  <MdOutlineAutoMode />
-                </button>
-              </div>
+        <div className='flex items-center justify-between'>
+          <h2 className='font-medium'>{_('Writing Mode')}</h2>
+          <div className='flex gap-4'>
+            <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Default')}>
+              <button
+                className={`btn btn-ghost btn-circle btn-sm ${writingMode === 'auto' ? 'btn-active bg-base-300' : ''}`}
+                onClick={() => setWritingMode('auto')}
+              >
+                <MdOutlineAutoMode />
+              </button>
+            </div>
 
-              <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Horizontal Direction')}>
-                <button
-                  className={`btn btn-ghost btn-circle btn-sm ${writingMode === 'horizontal-tb' ? 'btn-active bg-base-300' : ''}`}
-                  onClick={() => setWritingMode('horizontal-tb')}
-                >
-                  <MdOutlineTextRotationNone />
-                </button>
-              </div>
+            <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Horizontal Direction')}>
+              <button
+                className={`btn btn-ghost btn-circle btn-sm ${writingMode === 'horizontal-tb' ? 'btn-active bg-base-300' : ''}`}
+                onClick={() => setWritingMode('horizontal-tb')}
+              >
+                <MdOutlineTextRotationNone />
+              </button>
+            </div>
 
-              <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Vertical Direction')}>
-                <button
-                  className={`btn btn-ghost btn-circle btn-sm ${writingMode === 'vertical-rl' ? 'btn-active bg-base-300' : ''}`}
-                  onClick={() => setWritingMode('vertical-rl')}
-                >
-                  <MdTextRotateVertical />
-                </button>
-              </div>
+            <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Vertical Direction')}>
+              <button
+                className={`btn btn-ghost btn-circle btn-sm ${writingMode === 'vertical-rl' ? 'btn-active bg-base-300' : ''}`}
+                onClick={() => setWritingMode('vertical-rl')}
+              >
+                <MdTextRotateVertical />
+              </button>
+            </div>
 
-              <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('RTL Direction')}>
-                <button
-                  className={`btn btn-ghost btn-circle btn-sm ${writingMode === 'horizontal-rl' ? 'btn-active bg-base-300' : ''}`}
-                  onClick={() => setWritingMode('horizontal-rl')}
-                >
-                  <TbTextDirectionRtl />
-                </button>
-              </div>
+            <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('RTL Direction')}>
+              <button
+                className={`btn btn-ghost btn-circle btn-sm ${writingMode === 'horizontal-rl' ? 'btn-active bg-base-300' : ''}`}
+                onClick={() => setWritingMode('horizontal-rl')}
+              >
+                <TbTextDirectionRtl />
+              </button>
             </div>
           </div>
         </div>
@@ -414,15 +397,6 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
                 onChange={() => setHyphenation(!hyphenation)}
               />
             </div>
-            <div className='config-item'>
-              <span className=''>{_('Override Book Layout')}</span>
-              <input
-                type='checkbox'
-                className='toggle'
-                checked={overrideLayout}
-                onChange={() => setOverrideLayout(!overrideLayout)}
-              />
-            </div>
           </div>
         </div>
       </div>

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

@@ -1,39 +1,29 @@
 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';
 import cssValidate from '@/utils/css';
-import DropDown from './DropDown';
 
 const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const _ = useTranslation();
   const { envConfig, appService } = useEnv();
   const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
-  const { acquireVolumeKeyInterception, releaseVolumeKeyInterception } = useDeviceControlStore();
   const { getView, getViewSettings, setViewSettings } = useReaderStore();
   const viewSettings = getViewSettings(bookKey)!;
 
-  const [animated, setAnimated] = useState(viewSettings.animated!);
-  const [isDisableClick, setIsDisableClick] = useState(viewSettings.disableClick!);
-  const [swapClickArea, setSwapClickArea] = useState(viewSettings.swapClickArea!);
-  const [volumeKeysToFlip, setVolumeKeysToFlip] = useState(viewSettings.volumeKeysToFlip!);
-  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 [error, setError] = useState<string | null>(null);
   const [inputFocusInAndroid, setInputFocusInAndroid] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
@@ -103,67 +93,6 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     }
   };
 
-  const getCurrentUILangOption = () => {
-    const uiLanguage = viewSettings.uiLanguage;
-    return {
-      option: uiLanguage,
-      label:
-        uiLanguage === ''
-          ? _('Auto')
-          : TRANSLATED_LANGS[uiLanguage as keyof typeof TRANSLATED_LANGS],
-    };
-  };
-
-  const getUILangOptions = () => {
-    const langs = TRANSLATED_LANGS as Record<string, string>;
-    const options = Object.entries(langs).map(([option, label]) => ({ option, label }));
-    options.sort((a, b) => a.label.localeCompare(b.label));
-    options.unshift({ option: '', label: _('Auto') });
-    return options;
-  };
-
-  const handleSelectUILang = (option: string) => {
-    saveViewSettings(envConfig, bookKey, 'uiLanguage', option, false, false);
-    i18n.changeLanguage(option ? option : navigator.language);
-  };
-
-  useEffect(() => {
-    saveViewSettings(envConfig, bookKey, 'animated', animated, false, false);
-    if (animated) {
-      getView(bookKey)?.renderer.setAttribute('animated', '');
-    } else {
-      getView(bookKey)?.renderer.removeAttribute('animated');
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [animated]);
-
-  useEffect(() => {
-    saveViewSettings(envConfig, bookKey, 'disableClick', isDisableClick, false, false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isDisableClick]);
-
-  useEffect(() => {
-    saveViewSettings(envConfig, bookKey, 'swapClickArea', swapClickArea, false, false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [swapClickArea]);
-
-  useEffect(() => {
-    saveViewSettings(envConfig, bookKey, 'volumeKeysToFlip', volumeKeysToFlip, false, false);
-    if (appService?.isMobileApp) {
-      if (volumeKeysToFlip) {
-        acquireVolumeKeyInterception();
-      } else {
-        releaseVolumeKeyInterception();
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [volumeKeysToFlip]);
-
-  useEffect(() => {
-    saveViewSettings(envConfig, bookKey, 'continuousScroll', isContinuousScroll, false, false);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isContinuousScroll]);
-
   useEffect(() => {
     saveViewSettings(envConfig, bookKey, 'screenOrientation', screenOrientation, false, false);
     if (appService?.isMobileApp) {
@@ -179,39 +108,6 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         inputFocusInAndroid && 'h-[50%] overflow-y-auto pb-[200px]',
       )}
     >
-      <div className='w-full'>
-        <h2 className='mb-2 font-medium'>{_('Language')}</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=''>{_('Language')}</span>
-              <DropDown
-                selected={getCurrentUILangOption()}
-                options={getUILangOptions()}
-                onSelect={handleSelectUILang}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className='w-full'>
-        <h2 className='mb-2 font-medium'>{_('Animation')}</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=''>{_('Paging Animation')}</span>
-              <input
-                type='checkbox'
-                className='toggle'
-                checked={animated}
-                onChange={() => setAnimated(!animated)}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
       {appService?.isMobileApp && (
         <div className='w-full'>
           <h2 className='mb-2 font-medium'>{_('Screen')}</h2>
@@ -253,53 +149,6 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         </div>
       )}
 
-      <div className='w-full'>
-        <h2 className='mb-2 font-medium'>{_('Behavior')}</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=''>{_('Continuous Scroll')}</span>
-              <input
-                type='checkbox'
-                className='toggle'
-                checked={isContinuousScroll}
-                onChange={() => setIsContinuousScroll(!isContinuousScroll)}
-              />
-            </div>
-            {appService?.isMobileApp && (
-              <div className='config-item'>
-                <span className=''>{_('Volume Keys for Page Flip')}</span>
-                <input
-                  type='checkbox'
-                  className='toggle'
-                  checked={volumeKeysToFlip}
-                  onChange={() => setVolumeKeysToFlip(!volumeKeysToFlip)}
-                />
-              </div>
-            )}
-            <div className='config-item'>
-              <span className=''>{_('Clicks for Page Flip')}</span>
-              <input
-                type='checkbox'
-                className='toggle'
-                checked={!isDisableClick}
-                onChange={() => setIsDisableClick(!isDisableClick)}
-              />
-            </div>
-            <div className='config-item'>
-              <span className=''>{_('Swap Clicks Area')}</span>
-              <input
-                type='checkbox'
-                className='toggle'
-                checked={swapClickArea}
-                disabled={isDisableClick}
-                onChange={() => setSwapClickArea(!swapClickArea)}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
       <div className='w-full'>
         <h2 className='mb-2 font-medium'>{_('Custom CSS')}</h2>
         <div

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

@@ -5,9 +5,10 @@ import { useEnv } from '@/context/EnvContext';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { RiFontSize } from 'react-icons/ri';
-import { RiDashboardLine } from 'react-icons/ri';
+import { RiDashboardLine, RiTranslate } from 'react-icons/ri';
 import { VscSymbolColor } from 'react-icons/vsc';
 import { PiDotsThreeVerticalBold } from 'react-icons/pi';
+import { LiaHandPointerSolid } from 'react-icons/lia';
 import { IoAccessibilityOutline } from 'react-icons/io5';
 import { MdArrowBackIosNew, MdArrowForwardIos } from 'react-icons/md';
 import { getDirFromUILanguage } from '@/utils/rtl';
@@ -17,9 +18,11 @@ import ColorPanel from './ColorPanel';
 import Dropdown from '@/components/Dropdown';
 import Dialog from '@/components/Dialog';
 import DialogMenu from './DialogMenu';
+import ControlPanel from './ControlPanel';
+import LangPanel from './LangPanel';
 import MiscPanel from './MiscPanel';
 
-type SettingsPanelType = 'Font' | 'Layout' | 'Color' | 'Misc';
+type SettingsPanelType = 'Font' | 'Layout' | 'Color' | 'Control' | 'Language' | 'Custom';
 
 type TabConfig = {
   tab: SettingsPanelType;
@@ -32,10 +35,7 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
   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,
-  );
+  const [showAllTabLabels, setShowAllTabLabels] = useState(false);
   const { setFontLayoutSettingsDialogOpen } = useSettingsStore();
 
   const tabConfig = [
@@ -55,12 +55,30 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
       label: _('Color'),
     },
     {
-      tab: 'Misc',
+      tab: 'Control',
+      icon: LiaHandPointerSolid,
+      label: _('Behavior'),
+    },
+    {
+      tab: 'Language',
+      icon: RiTranslate,
+      label: _('Language'),
+    },
+    {
+      tab: 'Custom',
       icon: IoAccessibilityOutline,
-      label: _('Misc'),
+      label: _('Custom'),
     },
   ] as TabConfig[];
 
+  const [activePanel, setActivePanel] = useState<SettingsPanelType>(() => {
+    const lastPanel = localStorage.getItem('lastConfigPanel');
+    if (lastPanel && tabConfig.some((tab) => tab.tab === lastPanel)) {
+      return lastPanel as SettingsPanelType;
+    }
+    return 'Font' as SettingsPanelType;
+  });
+
   const handleSetActivePanel = (tab: SettingsPanelType) => {
     setActivePanel(tab);
     localStorage.setItem('lastConfigPanel', tab);
@@ -75,7 +93,7 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
     if (!container) return;
 
     const checkButtonWidths = () => {
-      const threshold = (container.clientWidth - 64) * 0.3;
+      const threshold = (container.clientWidth - 64) * 0.22;
       const hideLabel = Array.from(container.querySelectorAll('button')).some((button) => {
         const labelSpan = button.querySelector('span');
         const labelText = labelSpan?.textContent || '';
@@ -93,7 +111,7 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
         document.body.removeChild(clone);
         return fullWidth > threshold;
       });
-      setShowTabLabels(!hideLabel);
+      setShowAllTabLabels(!hideLabel);
     };
 
     checkButtonWidths();
@@ -113,15 +131,18 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
   }, []);
 
   return (
-    <>
-      <Dialog
-        isOpen={true}
-        onClose={handleClose}
-        className='modal-open'
-        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'>
+    <Dialog
+      isOpen={true}
+      onClose={handleClose}
+      className='modal-open'
+      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 flex-col items-center'>
+          <div className='tab-title flex pb-2 text-base font-semibold sm:hidden'>
+            {tabConfig.find((tab) => tab.tab === activePanel)?.label || ''}
+          </div>
+          <div className='flex w-full flex-row items-center justify-between'>
             <button
               tabIndex={-1}
               onClick={handleClose}
@@ -133,23 +154,27 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
             </button>
             <div
               ref={tabsRef}
-              className={clsx(
-                'dialog-tabs flex h-10 w-full items-center',
-                showTabLabels ? 'gap-2 sm:gap-1' : 'gap-4',
-              )}
+              className={clsx('dialog-tabs ms-1 flex h-10 w-full items-center gap-1 sm:ms-0')}
             >
               {tabConfig.map(({ tab, icon: Icon, label }) => (
                 <button
                   key={tab}
                   data-tab={tab}
                   className={clsx(
-                    'btn btn-ghost text-base-content btn-sm',
+                    'btn btn-ghost text-base-content btn-sm gap-1 px-2',
                     activePanel === tab ? 'btn-active' : '',
                   )}
                   onClick={() => handleSetActivePanel(tab)}
                 >
                   <Icon className='mr-0' />
-                  <span className={clsx('label', !showTabLabels && 'hidden')}>{label}</span>
+                  <span
+                    className={clsx(
+                      window.innerWidth < 640 && 'hidden',
+                      !(showAllTabLabels || activePanel === tab) && 'hidden',
+                    )}
+                  >
+                    {label}
+                  </span>
                 </button>
               ))}
             </div>
@@ -181,14 +206,16 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
               </button>
             </div>
           </div>
-        }
-      >
-        {activePanel === 'Font' && <FontPanel bookKey={bookKey} />}
-        {activePanel === 'Layout' && <LayoutPanel bookKey={bookKey} />}
-        {activePanel === 'Color' && <ColorPanel bookKey={bookKey} />}
-        {activePanel === 'Misc' && <MiscPanel bookKey={bookKey} />}
-      </Dialog>
-    </>
+        </div>
+      }
+    >
+      {activePanel === 'Font' && <FontPanel bookKey={bookKey} />}
+      {activePanel === 'Layout' && <LayoutPanel bookKey={bookKey} />}
+      {activePanel === 'Color' && <ColorPanel bookKey={bookKey} />}
+      {activePanel === 'Control' && <ControlPanel bookKey={bookKey} />}
+      {activePanel === 'Language' && <LangPanel bookKey={bookKey} />}
+      {activePanel === 'Custom' && <MiscPanel bookKey={bookKey} />}
+    </Dialog>
   );
 };
 

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

@@ -59,14 +59,15 @@ const ThemeEditor: React.FC<ThemeEditorProps> = ({ customTheme, onSave, onDelete
           {_(
             "All the world's a stage,\nAnd all the men and women merely players;\nThey have their exits and their entrances,\nAnd one man in his time plays many parts,\nHis acts being seven ages.\n\n— William Shakespeare",
           )}
-          <p
+          {'\n\n'}
+          <span
             className='mt-4 cursor-pointer italic'
             style={{
               color: primaryColor,
             }}
           >
             {_("(from 'As You Like It', Act II)")}
-          </p>
+          </span>
         </p>
       </div>
     </div>

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

@@ -8,6 +8,7 @@ import { findParentPath } from '@/utils/toc';
 import { getContentMd5 } from '@/utils/misc';
 import { eventDispatcher } from '@/utils/event';
 import { BookProgress } from '@/types/book';
+import { useTextTranslation } from '../../hooks/useTextTranslation';
 
 const createExpanderIcon = (isExpanded: boolean) => {
   return (
@@ -129,6 +130,8 @@ const TOCView: React.FC<{
   const [expandedItems, setExpandedItems] = useState<string[]>([]);
   const viewRef = useRef<HTMLUListElement | null>(null);
 
+  useTextTranslation(bookKey, viewRef.current);
+
   const expandParents = (toc: TOCItem[], href: string) => {
     const parentPath = findParentPath(toc, href).map((item) => item.href);
     setExpandedItems(parentPath.filter(Boolean) as string[]);

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

@@ -5,13 +5,14 @@ import { useBookDataStore } from '@/store/bookDataStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
-import { TTSController, SILENCE_DATA } from '@/services/tts';
+import { TTSController, SILENCE_DATA, TTSMark } from '@/services/tts';
 import { getPopupPosition, Position } from '@/utils/sel';
 import { eventDispatcher } from '@/utils/event';
 import { parseSSMLLang } from '@/utils/ssml';
 import { getOSPlatform } from '@/utils/misc';
 import { throttle } from '@/utils/throttle';
 import { invokeUseBackgroundAudio } from '@/utils/bridge';
+import { CFI } from '@/libs/document';
 import Popup from '@/components/Popup';
 import TTSPanel from './TTSPanel';
 import TTSIcon from './TTSIcon';
@@ -24,7 +25,8 @@ const TTSControl = () => {
   const _ = useTranslation();
   const { appService } = useEnv();
   const { getBookData } = useBookDataStore();
-  const { getView, getViewSettings } = useReaderStore();
+  const { getView, getProgress, getViewSettings } = useReaderStore();
+  const { setViewSettings, setTTSEnabled } = useReaderStore();
   const [bookKey, setBookKey] = useState<string>('');
   const [ttsLang, setTtsLang] = useState<string>('en');
   const [isPlaying, setIsPlaying] = useState(false);
@@ -45,8 +47,10 @@ const TTSControl = () => {
   const popupHeight = useResponsiveSize(POPUP_HEIGHT);
 
   const iconRef = useRef<HTMLDivElement>(null);
-  const ttsControllerRef = useRef<TTSController | null>(null);
   const unblockerAudioRef = useRef<HTMLAudioElement | null>(null);
+  const ttsControllerRef = useRef<TTSController | null>(null);
+  const [ttsController, setTtsController] = useState<TTSController | null>(null);
+  const [ttsClientsInited, setTtsClientsInitialized] = useState(false);
 
   // this enables WebAudio to play even when the mute toggle switch is ON
   const unblockAudio = () => {
@@ -95,12 +99,58 @@ const TTSControl = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (!ttsController || !bookKey) return;
+    const bookData = getBookData(bookKey);
+    if (!bookData || !bookData.book) return;
+    const { title, author, coverImageUrl } = bookData.book;
+
+    const handleSpeakMark = (e: Event) => {
+      const progress = getProgress(bookKey);
+      const { sectionLabel } = progress || {};
+      const mark = (e as CustomEvent<TTSMark>).detail;
+      if (appService?.isMobileApp && 'mediaSession' in navigator) {
+        navigator.mediaSession.metadata = new MediaMetadata({
+          title: mark.text,
+          artist: sectionLabel || title,
+          album: author,
+          artwork: [{ src: coverImageUrl || '/icon.png', sizes: '512x512', type: 'image/png' }],
+        });
+      }
+    };
+
+    const handleHighlightMark = (e: Event) => {
+      const range = (e as CustomEvent<Range>).detail;
+      const view = getView(bookKey);
+      const progress = getProgress(bookKey);
+      const viewSettings = getViewSettings(bookKey);
+      if (!range || !view || !progress || !viewSettings) return;
+
+      const { location } = progress;
+      const { index } = view.resolveCFI(location);
+      const cfi = view?.getCFI(index, range);
+      if (cfi) {
+        viewSettings.ttsLocation = cfi || '';
+        setViewSettings(bookKey, viewSettings);
+      }
+    };
+
+    ttsController.addEventListener('tts-speak-mark', handleSpeakMark);
+    ttsController.addEventListener('tts-highlight-mark', handleHighlightMark);
+    return () => {
+      ttsController.removeEventListener('tts-speak-mark', handleSpeakMark);
+      ttsController.removeEventListener('tts-highlight-mark', handleHighlightMark);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ttsController, bookKey]);
+
   const handleTTSSpeak = async (event: CustomEvent) => {
     const { bookKey, range } = event.detail;
     const view = getView(bookKey);
+    const progress = getProgress(bookKey);
     const viewSettings = getViewSettings(bookKey);
     const bookData = getBookData(bookKey);
-    if (!view || !viewSettings || !bookData || !bookData.book) return;
+    if (!view || !progress || !viewSettings || !bookData || !bookData.book) return;
     if (bookData.book?.format === 'PDF') {
       eventDispatcher.dispatch('toast', {
         message: _('TTS not supported for PDF'),
@@ -109,6 +159,21 @@ const TTSControl = () => {
       return;
     }
 
+    let ttsFromRange = range || progress.range;
+    if (viewSettings.ttsLocation) {
+      const { location } = progress;
+      const ttsCfi = viewSettings.ttsLocation;
+      const start = CFI.collapse(location);
+      const end = CFI.collapse(location, true);
+      if (CFI.compare(start, ttsCfi) * CFI.compare(end, ttsCfi) <= 0) {
+        const { index, anchor } = view.resolveCFI(ttsCfi);
+        const { doc } = view.renderer.getContents().find((x) => (x.index = index)) || {};
+        if (doc) {
+          ttsFromRange = anchor(doc) || ttsFromRange;
+        }
+      }
+    }
+
     const primaryLang = bookData.book.primaryLanguage;
     setBookKey(bookKey);
 
@@ -116,6 +181,8 @@ const TTSControl = () => {
       ttsControllerRef.current.stop();
       ttsControllerRef.current = null;
     }
+
+    setTTSEnabled(bookKey, true);
     setShowIndicator(true);
 
     try {
@@ -125,10 +192,11 @@ const TTSControl = () => {
       if (getOSPlatform() === 'ios' || appService?.isIOSApp) {
         unblockAudio();
       }
+      setTtsClientsInitialized(false);
       const ttsController = new TTSController(view);
       await ttsController.init();
       await ttsController.initViewTTS();
-      const ssml = view.tts?.from(range);
+      const ssml = view.tts?.from(ttsFromRange);
       if (ssml) {
         let lang = parseSSMLLang(ssml) || 'en';
         // We will not trust 'en' language from ssml, as it may be a fallback or hardcoded value
@@ -140,10 +208,11 @@ const TTSControl = () => {
 
         ttsController.setLang(lang);
         ttsController.setRate(viewSettings.ttsRate);
-        ttsController.setVoice(viewSettings.ttsVoice);
         ttsController.speak(ssml);
         ttsControllerRef.current = ttsController;
+        setTtsController(ttsController);
       }
+      setTtsClientsInitialized(true);
     } catch (error) {
       eventDispatcher.dispatch('toast', {
         message: _('TTS not supported in this device'),
@@ -153,9 +222,10 @@ const TTSControl = () => {
     }
   };
 
-  const handleTTSStop = async () => {
+  const handleTTSStop = async (event: CustomEvent) => {
+    const { bookKey } = event.detail;
     if (ttsControllerRef.current) {
-      handleStop();
+      handleStop(bookKey);
     }
   };
 
@@ -198,11 +268,12 @@ const TTSControl = () => {
     }
   };
 
-  const handleStop = async () => {
+  const handleStop = async (bookKey: string) => {
     const ttsController = ttsControllerRef.current;
     if (ttsController) {
       await ttsController.stop();
       ttsControllerRef.current = null;
+      setTtsController(null);
       getView(bookKey)?.deselect();
       setIsPlaying(false);
       setShowPanel(false);
@@ -214,6 +285,7 @@ const TTSControl = () => {
     if (getOSPlatform() === 'ios' || appService?.isIOSApp) {
       releaseUnblockAudio();
     }
+    setTTSEnabled(bookKey, false);
   };
 
   // rate range: 0.5 - 3, 1.0 is normal speed
@@ -236,15 +308,15 @@ const TTSControl = () => {
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const handleSetVoice = useCallback(
-    throttle(async (voice: string) => {
+    throttle(async (voice: string, lang: string) => {
       const ttsController = ttsControllerRef.current;
       if (ttsController) {
         if (ttsController.state === 'playing') {
           await ttsController.stop();
-          await ttsController.setVoice(voice);
+          await ttsController.setVoice(voice, lang);
           await ttsController.start();
         } else {
-          await ttsController.setVoice(voice);
+          await ttsController.setVoice(voice, lang);
         }
       }
     }, 3000),
@@ -267,7 +339,7 @@ const TTSControl = () => {
     return '';
   };
 
-  const handleSelectTimeout = (value: number) => {
+  const handleSelectTimeout = (bookKey: string, value: number) => {
     setTimeoutOption(value);
     if (timeoutFunc) {
       clearTimeout(timeoutFunc);
@@ -275,7 +347,7 @@ const TTSControl = () => {
     if (value > 0) {
       setTimeoutFunc(
         setTimeout(() => {
-          handleStop();
+          handleStop(bookKey);
         }, value * 1000),
       );
       setTimeoutTimestamp(Date.now() + value * 1000);
@@ -311,6 +383,10 @@ const TTSControl = () => {
 
   const togglePopup = () => {
     updatePanelPosition();
+    if (!showPanel && ttsControllerRef.current) {
+      const speakingLang = ttsControllerRef.current.getSpeakingLang() || ttsLang;
+      setTtsLang(speakingLang);
+    }
     setShowPanel((prev) => !prev);
   };
 
@@ -353,10 +429,10 @@ const TTSControl = () => {
               : 'bottom-[70px] sm:bottom-14',
           )}
         >
-          <TTSIcon isPlaying={isPlaying} onClick={togglePopup} />
+          <TTSIcon isPlaying={isPlaying} ttsInited={ttsClientsInited} onClick={togglePopup} />
         </div>
       )}
-      {showPanel && panelPosition && trianglePosition && (
+      {showPanel && panelPosition && trianglePosition && ttsClientsInited && (
         <Popup
           width={popupWidth}
           height={popupHeight}

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

@@ -1,20 +1,28 @@
+import clsx from 'clsx';
 import React from 'react';
 
 type TTSIconProps = {
   isPlaying: boolean;
+  ttsInited: boolean;
   onClick: () => void;
 };
 
-const TTSIcon: React.FC<TTSIconProps> = ({ isPlaying, onClick }) => {
+const TTSIcon: React.FC<TTSIconProps> = ({ isPlaying, ttsInited, onClick }) => {
   const bars = [1, 2, 3, 4];
 
   return (
-    <div className='relative h-full w-full cursor-pointer' onClick={onClick}>
+    <div
+      className={clsx(
+        'relative h-full w-full',
+        ttsInited ? 'cursor-pointer' : 'cursor-not-allowed',
+      )}
+      onClick={onClick}
+    >
       <div className='absolute inset-0 overflow-hidden rounded-full bg-gradient-to-r from-blue-500 via-emerald-500 to-violet-500'>
         <div
           className='absolute -inset-full bg-gradient-to-r from-blue-500 via-emerald-500 to-violet-500'
           style={{
-            animation: isPlaying ? 'moveGradient 2s alternate infinite' : 'none',
+            animation: isPlaying && ttsInited ? 'moveGradient 2s alternate infinite' : 'none',
           }}
         />
       </div>

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

@@ -21,9 +21,9 @@ type TTSPanelProps = {
   onForward: () => void;
   onSetRate: (rate: number) => void;
   onGetVoices: (lang: string) => Promise<TTSVoice[]>;
-  onSetVoice: (voice: string) => void;
+  onSetVoice: (voice: string, lang: string) => void;
   onGetVoiceId: () => string;
-  onSelectTimeout: (value: number) => void;
+  onSelectTimeout: (bookKey: string, value: number) => void;
 };
 
 const getTTSTimeoutOptions = (_: TranslationFunc) => {
@@ -144,8 +144,8 @@ const TTSPanel = ({
     saveSettings(envConfig, settings);
   };
 
-  const handleSelectVoice = (voice: string) => {
-    onSetVoice(voice);
+  const handleSelectVoice = (voice: string, lang: string) => {
+    onSetVoice(voice, lang);
     setSelectedVoice(voice);
     const viewSettings = getViewSettings(bookKey)!;
     viewSettings.ttsVoice = voice;
@@ -155,7 +155,7 @@ const TTSPanel = ({
   const updateTimeout = (timeout: number) => {
     const now = Date.now();
     if (timeout > 0 && timeout < now) {
-      onSelectTimeout(0);
+      onSelectTimeout(bookKey, 0);
       setTimeoutCountdown('');
     } else if (timeout > 0) {
       setTimeoutCountdown(getCountdownTime(timeout));
@@ -256,7 +256,10 @@ const TTSPanel = ({
             )}
           >
             {timeoutOptions.map((option, index) => (
-              <li key={`${index}-${option.value}`} onClick={() => onSelectTimeout(option.value)}>
+              <li
+                key={`${index}-${option.value}`}
+                onClick={() => onSelectTimeout(bookKey, option.value)}
+              >
                 <div className='flex items-center px-2'>
                   <span style={{ minWidth: `${defaultIconSize}px` }}>
                     {timeoutOption === option.value && <MdCheck className='text-base-content' />}
@@ -282,7 +285,7 @@ const TTSPanel = ({
             {voices.map((voice, index) => (
               <li
                 key={`${index}-${voice.id}`}
-                onClick={() => !voice.disabled && handleSelectVoice(voice.id)}
+                onClick={() => !voice.disabled && handleSelectVoice(voice.id, voice.lang)}
               >
                 <div className='flex items-center px-2'>
                   <span style={{ minWidth: `${defaultIconSize}px` }}>

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

@@ -9,6 +9,7 @@ import { getStyles } from '@/utils/style';
 import { tauriHandleToggleFullScreen, tauriQuitApp } from '@/utils/window';
 import { eventDispatcher } from '@/utils/event';
 import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL, ZOOM_STEP } from '@/services/constants';
+import { viewPagination } from './usePagination';
 
 interface UseBookShortcutsProps {
   sideBarBookKey: string | null;
@@ -41,11 +42,13 @@ const useBookShortcuts = ({ sideBarBookKey, bookKeys }: UseBookShortcutsProps) =
   };
 
   const goLeft = () => {
-    getView(sideBarBookKey)?.goLeft();
+    const viewSettings = getViewSettings(sideBarBookKey ?? '');
+    viewPagination(getView(sideBarBookKey), viewSettings, 'left');
   };
 
   const goRight = () => {
-    getView(sideBarBookKey)?.goRight();
+    const viewSettings = getViewSettings(sideBarBookKey ?? '');
+    viewPagination(getView(sideBarBookKey), viewSettings, 'right');
   };
 
   const goPrev = () => {

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

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useReaderStore } from '@/store/readerStore';
-import { throttle } from '@/utils/throttle';
+import { debounce } from '@/utils/debounce';
 import { ScrollSource } from './usePagination';
 
 export const useMouseEvent = (
@@ -9,20 +9,23 @@ export const useMouseEvent = (
   handleContinuousScroll: (source: ScrollSource, delta: number, threshold: number) => void,
 ) => {
   const { hoveredBookKey } = useReaderStore();
-  const throttledScroll = throttle(handleContinuousScroll, 500, {
-    emitLast: false,
-  });
+  const debounceScroll = debounce(handleContinuousScroll, 500);
+  const debounceFlip = debounce(handlePageFlip, 100);
   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);
+          debounceScroll('mouse', -msg.data.deltaY, 0);
+        }
+        if (msg.data.type === 'iframe-wheel') {
+          debounceFlip(msg);
+        } else {
+          handlePageFlip(msg);
         }
-        handlePageFlip(msg);
       }
     } else if (msg.type === 'wheel') {
       const event = msg as React.WheelEvent<HTMLDivElement>;
-      throttledScroll('mouse', -event.deltaY, 0);
+      debounceScroll('mouse', -event.deltaY, 0);
     } else {
       handlePageFlip(msg);
     }

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

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useEnv } from '@/context/EnvContext';
 import { FoliateView } from '@/types/view';
+import { ViewSettings } from '@/types/book';
 import { useReaderStore } from '@/store/readerStore';
 import { useDeviceControlStore } from '@/store/deviceStore';
 import { eventDispatcher } from '@/utils/event';
@@ -9,6 +10,28 @@ import { tauriGetWindowLogicalPosition } from '@/utils/window';
 
 export type ScrollSource = 'touch' | 'mouse';
 
+export const viewPagination = (
+  view: FoliateView | null,
+  viewSettings: ViewSettings | null | undefined,
+  side: 'left' | 'right',
+) => {
+  if (!view || !viewSettings) return;
+  const renderer = view.renderer;
+  if (renderer.scrolled) {
+    if (view.book.dir === 'rtl') {
+      side = side === 'left' ? 'right' : 'left';
+    }
+    const { size } = renderer;
+    const showHeader = viewSettings.showHeader && viewSettings.showBarsOnScroll;
+    const showFooter = viewSettings.showFooter && viewSettings.showBarsOnScroll;
+    const scrollingOverlap = viewSettings.scrollingOverlap;
+    const distance = size - scrollingOverlap - (showHeader ? 44 : 0) - (showFooter ? 44 : 0);
+    return side === 'left' ? view.prev(distance) : view.next(distance);
+  } else {
+    return side === 'left' ? view.goLeft() : view.goRight();
+  }
+};
+
 export const usePagination = (
   bookKey: string,
   viewRef: React.MutableRefObject<FoliateView | null>,
@@ -64,15 +87,15 @@ export const usePagination = (
                 }
                 if (!viewSettings.disableClick! && screenX >= viewCenterX) {
                   if (viewSettings.swapClickArea) {
-                    viewRef.current?.goLeft();
+                    viewPagination(viewRef.current, viewSettings, 'left');
                   } else {
-                    viewRef.current?.goRight();
+                    viewPagination(viewRef.current, viewSettings, 'right');
                   }
                 } else if (!viewSettings.disableClick! && screenX < viewCenterX) {
                   if (viewSettings.swapClickArea) {
-                    viewRef.current?.goRight();
+                    viewPagination(viewRef.current, viewSettings, 'right');
                   } else {
-                    viewRef.current?.goLeft();
+                    viewPagination(viewRef.current, viewSettings, 'left');
                   }
                 }
               }
@@ -100,9 +123,9 @@ export const usePagination = (
       if (viewSettings?.volumeKeysToFlip) {
         setHoveredBookKey('');
         if (keyName === 'VolumeUp') {
-          viewRef.current?.goLeft();
+          viewPagination(viewRef.current, viewSettings, 'left');
         } else if (keyName === 'VolumeDown') {
-          viewRef.current?.goRight();
+          viewPagination(viewRef.current, viewSettings, 'right');
         }
       }
     } else {
@@ -111,10 +134,11 @@ export const usePagination = (
         const width = window.innerWidth;
         const leftThreshold = width * 0.5;
         const rightThreshold = width * 0.5;
+        const viewSettings = getViewSettings(bookKey);
         if (clientX < leftThreshold) {
-          viewRef.current?.goLeft();
+          viewPagination(viewRef.current, viewSettings, 'left');
         } else if (clientX > rightThreshold) {
-          viewRef.current?.goRight();
+          viewPagination(viewRef.current, viewSettings, 'right');
         }
       }
     }

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useReaderStore } from '@/store/readerStore';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { getOSPlatform } from '@/utils/misc';
@@ -14,15 +14,16 @@ export const useTextSelector = (
   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 isPopuped = useRef(false);
+  const isUpToPopup = useRef(false);
   const isTextSelected = useRef(false);
-  const isAnnotPopuped = useRef(false);
-  const isAnnotUpToPopup = useRef(false);
+  const isTouchStarted = useRef(false);
   const selectionPosition = useRef<number | null>(null);
+  const [textSelected, setTextSelected] = useState(false);
 
   const isValidSelection = (sel: Selection) => {
     return sel && sel.toString().trim().length > 0 && sel.rangeCount > 0;
@@ -41,6 +42,7 @@ export const useTextSelector = (
   };
   const makeSelection = async (sel: Selection, index: number, rebuildRange = false) => {
     isTextSelected.current = true;
+    setTextSelected(true);
     const range = sel.getRangeAt(0);
     if (rebuildRange) {
       sel.removeAllRanges();
@@ -51,6 +53,7 @@ export const useTextSelector = (
   // FIXME: extremely hacky way to dismiss system selection tools on iOS
   const makeSelectionOnIOS = async (sel: Selection, index: number) => {
     isTextSelected.current = true;
+    setTextSelected(true);
     const range = sel.getRangeAt(0);
     setTimeout(() => {
       sel.removeAllRanges();
@@ -67,18 +70,24 @@ export const useTextSelector = (
     const sel = doc.getSelection() as Selection;
     if (osPlatform === 'ios') return;
     if (!isValidSelection(sel)) {
-      if (!isAnnotUpToPopup.current) {
+      if (!isUpToPopup.current) {
         handleDismissPopup();
         isTextSelected.current = false;
+        setTextSelected(false);
+      }
+      if (isPopuped.current) {
+        isUpToPopup.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') {
+    // note that selection may be initiated by a tts speak
+    if (isTouchStarted.current && osPlatform === 'android') {
       makeSelection(sel, index, false);
     }
+    isUpToPopup.current = true;
   };
   const handlePointerup = (doc: Document, index: number) => {
     // Available on iOS and Desktop, fired at touchend or mouseup
@@ -92,26 +101,37 @@ export const useTextSelector = (
       }
     }
   };
+  const handleTouchStart = () => {
+    isTouchStarted.current = true;
+  };
+  const handleTouchEnd = () => {
+    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
+    const viewSettings = getViewSettings(bookKey);
     if (!viewSettings?.scrolled && view?.renderer?.containerPosition && selectionPosition.current) {
+      console.warn('Keep container position', selectionPosition.current);
       view.renderer.containerPosition = selectionPosition.current;
     }
   };
 
-  const handleAnnotPopup = (showAnnotPopup: boolean) => {
+  const handleShowPopup = (showPopup: boolean) => {
     setTimeout(
       () => {
-        isAnnotPopuped.current = showAnnotPopup;
+        if (showPopup && !isPopuped.current) {
+          isUpToPopup.current = false;
+        }
+        isPopuped.current = showPopup;
       },
       ['android', 'ios'].includes(osPlatform) ? 0 : 500,
     );
   };
 
-  const handleShowAnnotation = () => {
-    isAnnotUpToPopup.current = true;
+  const handleUpToPopup = () => {
+    isUpToPopup.current = true;
   };
 
   useEffect(() => {
@@ -121,20 +141,22 @@ export const useTextSelector = (
       selectionPosition.current = null;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isTextSelected.current]);
+  }, [textSelected]);
 
   useEffect(() => {
     const handleSingleClick = (): boolean => {
-      if (isAnnotUpToPopup.current) {
-        isAnnotUpToPopup.current = false;
+      if (isUpToPopup.current) {
+        isUpToPopup.current = false;
         return true;
       }
       if (isTextSelected.current) {
         handleDismissPopup();
         isTextSelected.current = false;
+        setTextSelected(false);
+        view?.deselect();
         return true;
       }
-      if (isAnnotPopuped.current) {
+      if (isPopuped.current) {
         handleDismissPopup();
         return true;
       }
@@ -150,9 +172,11 @@ export const useTextSelector = (
 
   return {
     handleScroll,
+    handleTouchStart,
+    handleTouchEnd,
     handlePointerup,
     handleSelectionchange,
-    handleAnnotPopup,
-    handleShowAnnotation,
+    handleShowPopup,
+    handleUpToPopup,
   };
 };

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

@@ -0,0 +1,206 @@
+import { useEffect, useRef, useState } from 'react';
+import { FoliateView } from '@/types/view';
+import { UseTranslatorOptions } from '@/services/translators';
+import { useReaderStore } from '@/store/readerStore';
+import { useTranslator } from '@/hooks/useTranslator';
+import { walkTextNodes } from '@/utils/walk';
+import { localeToLang } from '@/utils/lang';
+import { getLocale } from '@/utils/misc';
+
+export function useTextTranslation(bookKey: string, view: FoliateView | HTMLElement | null) {
+  const { getViewSettings } = useReaderStore();
+  const viewSettings = getViewSettings(bookKey);
+
+  const enabled = useRef(viewSettings?.translationEnabled);
+  const [provider, setProvider] = useState(viewSettings?.translationProvider);
+  const [targetLang, setTargetLang] = useState(viewSettings?.translateTargetLang);
+
+  const { translate } = useTranslator({
+    provider,
+    targetLang: localeToLang(targetLang || getLocale()),
+  } as UseTranslatorOptions);
+
+  const translateRef = useRef(translate);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const translatedElements = useRef<HTMLElement[]>([]);
+  const allTextNodes = useRef<HTMLElement[]>([]);
+
+  const toggleTranslationVisibility = (visible: boolean) => {
+    translatedElements.current.forEach((element) => {
+      const translationTargets = element.querySelectorAll('.translation-target');
+      translationTargets.forEach((target) => {
+        if (visible) {
+          target.classList.remove('hidden');
+        } else {
+          target.classList.add('hidden');
+        }
+      });
+    });
+  };
+
+  useEffect(() => {
+    translateRef.current = translate;
+  }, [translate]);
+
+  const observeTextNodes = () => {
+    if (!view || !enabled.current) return;
+    const observer = createTranslationObserver();
+    observerRef.current = observer;
+    const nodes = walkTextNodes(view);
+    console.log('Observing text nodes for translation:', nodes.length);
+    allTextNodes.current = nodes;
+    nodes.forEach((el) => observer.observe(el));
+  };
+
+  const updateTranslation = () => {
+    translatedElements.current.forEach((element) => {
+      const translationTargets = element.querySelectorAll('.translation-target');
+      translationTargets.forEach((target) => target.remove());
+    });
+
+    translatedElements.current = [];
+    if (viewSettings?.translationEnabled && view) {
+      recreateTranslationObserver();
+    }
+  };
+
+  const createTranslationObserver = () => {
+    return new IntersectionObserver(
+      (entries) => {
+        let beforeIntersectedElement: HTMLElement | null = null;
+        let lastIntersectedElement: HTMLElement | null = null;
+        for (const entry of entries) {
+          if (!entry.isIntersecting) {
+            if (!lastIntersectedElement) {
+              beforeIntersectedElement = entry.target as HTMLElement;
+            }
+            continue;
+          }
+          const currentElement = entry.target as HTMLElement;
+          translateElement(currentElement);
+          lastIntersectedElement = currentElement;
+        }
+        if (beforeIntersectedElement) {
+          translateElement(beforeIntersectedElement);
+        }
+        if (lastIntersectedElement) {
+          preTranslateNextElements(lastIntersectedElement, 2);
+        }
+      },
+      {
+        rootMargin: '1280px',
+        threshold: 0,
+      },
+    );
+  };
+
+  const preTranslateNextElements = (currentElement: HTMLElement, count: number) => {
+    if (!allTextNodes.current || count <= 0) return;
+    const currentIndex = allTextNodes.current.indexOf(currentElement);
+    if (currentIndex === -1) {
+      return;
+    }
+
+    const nextElements = allTextNodes.current.slice(currentIndex + 1, currentIndex + 1 + count);
+    nextElements.forEach((element, index) => {
+      setTimeout(() => {
+        translateElement(element);
+      }, index * 500);
+    });
+  };
+
+  const recreateTranslationObserver = () => {
+    const observer = createTranslationObserver();
+    observerRef.current?.disconnect();
+    observerRef.current = observer;
+    allTextNodes.current.forEach((el) => observer.observe(el));
+  };
+
+  const translateElement = async (el: HTMLElement) => {
+    if (!enabled.current) return;
+    const text = el.textContent?.trim();
+    if (!text) return;
+
+    if (el.querySelector('.translation-target')) {
+      return;
+    }
+
+    try {
+      const translated = await translateRef.current([text]);
+      const translatedText = translated[0];
+      if (!translatedText || text === translatedText) return;
+
+      const wrapper = document.createElement('font');
+      wrapper.className = `translation-target ${!enabled.current ? 'hidden' : ''}`;
+      wrapper.setAttribute('translation-element-mark', '1');
+      wrapper.setAttribute('lang', targetLang || getLocale());
+      wrapper.appendChild(document.createElement('br'));
+
+      const blockWrapper = document.createElement('font');
+      blockWrapper.className = 'translation-target translation-block-wrapper';
+
+      const inner = document.createElement('font');
+      inner.className = 'translation-target target-inner target-inner-theme-none';
+      inner.textContent = translatedText;
+
+      blockWrapper.appendChild(inner);
+      wrapper.appendChild(blockWrapper);
+
+      if (el.querySelector('.translation-target')) {
+        return;
+      }
+      el.appendChild(wrapper);
+      translatedElements.current.push(el);
+    } catch (err) {
+      console.warn('Translation failed:', err);
+    }
+  };
+
+  useEffect(() => {
+    if (!viewSettings) return;
+
+    const enabledChanged = enabled.current !== viewSettings.translationEnabled;
+    const providerChanged = provider !== viewSettings.translationProvider;
+    const targetLangChanged = targetLang !== viewSettings.translateTargetLang;
+
+    if (enabledChanged) {
+      enabled.current = viewSettings.translationEnabled;
+    }
+
+    if (providerChanged) {
+      setProvider(viewSettings.translationProvider);
+    }
+
+    if (targetLangChanged) {
+      setTargetLang(viewSettings.translateTargetLang);
+    }
+
+    if (enabledChanged) {
+      toggleTranslationVisibility(viewSettings.translationEnabled);
+      if (enabled.current) {
+        observeTextNodes();
+      }
+    } else if (providerChanged || targetLangChanged) {
+      updateTranslation();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bookKey, viewSettings, provider, targetLang]);
+
+  useEffect(() => {
+    if (!view || !enabled.current) return;
+
+    if ('renderer' in view) {
+      view.addEventListener('load', observeTextNodes);
+    } else {
+      observeTextNodes();
+    }
+    return () => {
+      if ('renderer' in view) {
+        view.removeEventListener('load', observeTextNodes);
+      }
+      observerRef.current?.disconnect();
+      translatedElements.current = [];
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [view]);
+}

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

@@ -8,6 +8,7 @@ import { useSettingsStore } from '@/store/settingsStore';
 import { checkForAppUpdates } from '@/helpers/updater';
 import Reader from './components/Reader';
 
+// This is only used for the Tauri app in the app router
 export default function Page() {
   const _ = useTranslation();
   const { appService } = useEnv();

apps/readest-app/src/app/reader/utils/iframeEventHandlers.ts

@@ -122,11 +122,15 @@ export const handleClick = (bookKey: string, event: MouseEvent) => {
       if (['sup', 'a', 'audio', 'video'].includes(element.tagName.toLowerCase())) {
         return;
       }
-      if (element.classList.contains('js_readerFooterNote')) {
+      if (
+        element.classList.contains('js_readerFooterNote') ||
+        element.classList.contains('zhangyue-footnote')
+      ) {
         eventDispatcher.dispatch('footnote-popup', {
           bookKey,
           element,
-          footnote: element.getAttribute('data-wr-footernote') || '',
+          footnote:
+            element.getAttribute('data-wr-footernote') || element.getAttribute('zy-footnote') || '',
         });
         return;
       }

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

@@ -20,7 +20,7 @@ const Alert: React.FC<{
           'min-w-[70vw] flex-col sm:min-w-[40vw] sm:flex-row',
         )}
       >
-        <div className='flex items-center space-x-2 self-start'>
+        <div className='labels flex items-center space-x-2 self-start sm:space-x-4 sm:self-center'>
           <svg
             xmlns='http://www.w3.org/2000/svg'
             fill='none'
@@ -34,12 +34,12 @@ const Alert: React.FC<{
               d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
             ></path>
           </svg>
-          <div className=''>
-            <h3 className='font-sm text-start text-base sm:text-center'>{title}</h3>
-            <div className='text-xs'>{message}</div>
+          <div className='flex flex-col gap-y-2'>
+            <h3 className='text-start text-sm sm:text-center'>{title}</h3>
+            <div className='text-start text-xs sm:text-center'>{message}</div>
           </div>
         </div>
-        <div className='flex flex-wrap items-center gap-2 self-end sm:max-w-[20vw]'>
+        <div className='buttons flex flex-wrap items-center justify-end gap-2 self-end sm:max-w-[20vw] sm:self-center'>
           <button className='btn btn-sm btn-neutral' onClick={onCancel}>
             {_('Cancel')}
           </button>

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

@@ -153,13 +153,13 @@ const BookDetailModal = ({
               <div className='mb-4 grid grid-cols-2 gap-4 sm:grid-cols-3'>
                 <div className='overflow-hidden'>
                   <span className='font-bold'>{_('Publisher:')}</span>
-                  <p className='text-neutral-content line-clamp-1 text-sm'>
+                  <p className='text-neutral-content text-sm'>
                     {formatPublisher(bookMeta.publisher || '') || _('Unknown')}
                   </p>
                 </div>
                 <div className='overflow-hidden'>
                   <span className='font-bold'>{_('Published:')}</span>
-                  <p className='text-neutral-content max-w-28 text-ellipsis text-sm'>
+                  <p className='text-neutral-content text-sm'>
                     {formatDate(bookMeta.published) || _('Unknown')}
                   </p>
                 </div>
@@ -179,19 +179,17 @@ const BookDetailModal = ({
                 </div>
                 <div className='overflow-hidden'>
                   <span className='font-bold'>{_('Subjects:')}</span>
-                  <p className='text-neutral-content line-clamp-1 text-sm'>
+                  <p className='text-neutral-content line-clamp-3 text-sm'>
                     {formatSubject(bookMeta.subject) || _('Unknown')}
                   </p>
                 </div>
                 <div className='overflow-hidden'>
                   <span className='font-bold'>{_('Format:')}</span>
-                  <p className='text-neutral-content line-clamp-1 text-sm'>
-                    {book.format || _('Unknown')}
-                  </p>
+                  <p className='text-neutral-content text-sm'>{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'>
+                  <p className='text-neutral-content text-sm'>
                     {formatFileSize(fileSize) || _('Unknown')}
                   </p>
                 </div>
@@ -215,7 +213,7 @@ const BookDetailModal = ({
         >
           <Alert
             title={_('Confirm Deletion')}
-            message={_('Are you sure to delete the selected books?')}
+            message={_('Are you sure to delete the selected book?')}
             onCancel={() => {
               setShowDeleteAlert(false);
             }}

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

@@ -35,7 +35,7 @@ const Button: React.FC<ButtonProps> = ({
         className={clsx(
           'btn btn-ghost h-8 min-h-8 w-8 p-0',
           appService?.isMobileApp && 'hover:bg-transparent',
-          disabled && 'btn-disabled !bg-transparent',
+          disabled && 'btn-disabled !bg-transparent opacity-50',
           className,
         )}
         onClick={disabled ? undefined : onClick}

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

@@ -5,6 +5,7 @@ import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 
 interface MenuItemProps {
   label: string;
+  description?: string;
   buttonClass?: string;
   labelClass?: string;
   shortcut?: string;
@@ -17,6 +18,7 @@ interface MenuItemProps {
 
 const MenuItem: React.FC<MenuItemProps> = ({
   label,
+  description,
   buttonClass,
   labelClass,
   shortcut,
@@ -30,40 +32,52 @@ const MenuItem: React.FC<MenuItemProps> = ({
   const menuButton = (
     <button
       className={clsx(
-        'hover:bg-base-300 text-base-content flex h-10 w-full items-center justify-between rounded-md p-1',
+        'hover:bg-base-300 text-base-content flex w-full flex-col items-center justify-center rounded-md p-1 py-[10px]',
         disabled && 'btn-disabled text-gray-400',
         buttonClass,
       )}
       onClick={onClick}
       disabled={disabled}
     >
-      <div className='flex min-w-0 items-center'>
-        {!noIcon && (
-          <span style={{ minWidth: `${iconSize}px` }}>
-            {typeof Icon === 'function' ? (
-              <Icon className='text-base-content' size={iconSize} />
-            ) : (
-              Icon
+      <div className='flex w-full items-center justify-between'>
+        <div className='flex min-w-0 items-center'>
+          {!noIcon && (
+            <span style={{ minWidth: `${iconSize}px` }}>
+              {typeof Icon === 'function' ? (
+                <Icon className='text-base-content' size={iconSize} />
+              ) : (
+                Icon
+              )}
+            </span>
+          )}
+          <span
+            className={clsx('mx-2 flex-1 truncate text-base sm:text-sm', labelClass)}
+            style={{ minWidth: 0 }}
+          >
+            {label}
+          </span>
+        </div>
+        {shortcut && (
+          <kbd
+            className={clsx(
+              'border-base-300/40 bg-base-300/75 text-neutral-content hidden rounded-md border shadow-sm sm:flex',
+              'shrink-0 px-1.5 py-0.5 text-xs font-medium',
             )}
+          >
+            {shortcut}
+          </kbd>
+        )}
+      </div>
+      <div className='flex w-full'>
+        {description && (
+          <span
+            className='mt-1 truncate text-start text-xs text-gray-500'
+            style={{ minWidth: 0, paddingInlineStart: noIcon ? '0' : `${iconSize + 8}px` }}
+          >
+            {description}
           </span>
         )}
-        <span
-          className={clsx('mx-2 flex-1 truncate text-base sm:text-sm', labelClass)}
-          style={{ minWidth: 0 }}
-        >
-          {label}
-        </span>
       </div>
-      {shortcut && (
-        <kbd
-          className={clsx(
-            'border-base-300/40 bg-base-300/75 text-neutral-content hidden rounded-md border shadow-sm sm:flex',
-            'shrink-0 px-1.5 py-0.5 text-xs font-medium',
-          )}
-        >
-          {shortcut}
-        </kbd>
-      )}
     </button>
   );
 

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

@@ -0,0 +1,25 @@
+import clsx from 'clsx';
+import React, { ReactNode } from 'react';
+import ReactDOM from 'react-dom';
+
+interface ModalPortalProps {
+  children: ReactNode;
+  showOverlay?: boolean;
+}
+
+const ModalPortal: React.FC<ModalPortalProps> = ({ children, showOverlay = true }) => {
+  return ReactDOM.createPortal(
+    <div
+      className={clsx(
+        'fixed inset-0 isolate z-50 flex items-center justify-center',
+        showOverlay && 'bg-black bg-opacity-50',
+      )}
+      style={{ transform: 'translateZ(0)' }}
+    >
+      {children}
+    </div>,
+    document.body,
+  );
+};
+
+export default ModalPortal;

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

@@ -1,8 +1,13 @@
+import clsx from 'clsx';
 import { Position } from '@/utils/sel';
+import { useEffect, useRef, useState } from 'react';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 
 const Popup = ({
   width,
   height,
+  minHeight,
+  maxHeight,
   position,
   trianglePosition,
   children,
@@ -11,74 +16,133 @@ const Popup = ({
   additionalStyle = {},
 }: {
   width: number;
-  height: number;
+  height?: number;
+  minHeight?: number;
+  maxHeight?: number;
   position?: Position;
   trianglePosition?: Position;
   children: React.ReactNode;
   className?: string;
   triangleClassName?: string;
   additionalStyle?: React.CSSProperties;
-}) => (
-  <div>
-    <div
-      id='popup-container'
-      className={`bg-base-300 absolute rounded-lg font-sans shadow-xl ${className}`}
-      style={{
-        width: `${width}px`,
-        height: `${height}px`,
-        left: `${position ? position.point.x : -999}px`,
-        top: `${position ? position.point.y : -999}px`,
-        ...additionalStyle,
-      }}
-    >
-      {children}
-    </div>
-    <div
-      className={`triangle text-base-300 absolute ${triangleClassName}`}
-      style={{
-        left:
-          trianglePosition?.dir === 'left'
-            ? `${trianglePosition.point.x}px`
-            : trianglePosition?.dir === 'right'
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [adjustedPosition, setAdjustedPosition] = useState(position);
+  const [childrenHeight, setChildrenHeight] = useState(height || minHeight || 0);
+
+  const popupPadding = useResponsiveSize(10);
+  let availableHeight = window.innerHeight - 2 * popupPadding;
+  if (trianglePosition?.dir === 'up') {
+    availableHeight = trianglePosition.point.y - popupPadding;
+  } else if (trianglePosition?.dir === 'down') {
+    availableHeight = window.innerHeight - trianglePosition.point.y - popupPadding;
+  }
+  maxHeight = Math.min(maxHeight || availableHeight, availableHeight);
+  if (minHeight) {
+    minHeight = Math.min(minHeight, availableHeight);
+  }
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newHeight = entry.contentRect.height;
+        if (newHeight !== childrenHeight) {
+          setChildrenHeight(newHeight);
+          return;
+        }
+      }
+    });
+
+    resizeObserver.observe(containerRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    if (!position || !trianglePosition || position.dir !== 'up') {
+      setAdjustedPosition(position);
+      return;
+    }
+    const containerHeight = childrenHeight || containerRef.current.offsetHeight;
+    const newPosition = {
+      ...position,
+      point: {
+        ...position.point,
+        y: trianglePosition.point.y - containerHeight,
+      },
+    };
+    setAdjustedPosition(newPosition);
+  }, [position, trianglePosition, childrenHeight]);
+
+  return (
+    <div>
+      <div
+        id='popup-container'
+        ref={containerRef}
+        className={clsx('bg-base-300 absolute rounded-lg font-sans shadow-xl', className)}
+        style={{
+          width: `${width}px`,
+          height: height ? `${height}px` : 'auto',
+          minHeight: minHeight ? `${minHeight}px` : 'none',
+          maxHeight: maxHeight ? `${maxHeight}px` : 'none',
+          left: `${adjustedPosition ? adjustedPosition.point.x : -999}px`,
+          top: `${adjustedPosition ? adjustedPosition.point.y : -999}px`,
+          ...additionalStyle,
+        }}
+      >
+        {children}
+      </div>
+      <div
+        className={`triangle text-base-300 absolute ${triangleClassName}`}
+        style={{
+          left:
+            trianglePosition?.dir === 'left'
               ? `${trianglePosition.point.x}px`
-              : `${trianglePosition ? trianglePosition.point.x : -999}px`,
-        top:
-          trianglePosition?.dir === 'up'
-            ? `${trianglePosition.point.y}px`
-            : trianglePosition?.dir === 'down'
+              : trianglePosition?.dir === 'right'
+                ? `${trianglePosition.point.x}px`
+                : `${trianglePosition ? trianglePosition.point.x : -999}px`,
+          top:
+            trianglePosition?.dir === 'up'
               ? `${trianglePosition.point.y}px`
-              : `${trianglePosition ? trianglePosition.point.y : -999}px`,
-        borderLeft:
-          trianglePosition?.dir === 'right'
-            ? 'none'
-            : trianglePosition?.dir === 'left'
-              ? `6px solid`
-              : '6px solid transparent',
-        borderRight:
-          trianglePosition?.dir === 'left'
-            ? 'none'
-            : trianglePosition?.dir === 'right'
-              ? `6px solid`
-              : '6px solid transparent',
-        borderTop:
-          trianglePosition?.dir === 'down'
-            ? 'none'
-            : trianglePosition?.dir === 'up'
-              ? `6px solid`
-              : '6px solid transparent',
-        borderBottom:
-          trianglePosition?.dir === 'up'
-            ? 'none'
-            : trianglePosition?.dir === 'down'
-              ? `6px solid`
-              : '6px solid transparent',
-        transform:
-          trianglePosition?.dir === 'left' || trianglePosition?.dir === 'right'
-            ? 'translateY(-50%)'
-            : 'translateX(-50%)',
-      }}
-    />
-  </div>
-);
+              : trianglePosition?.dir === 'down'
+                ? `${trianglePosition.point.y}px`
+                : `${trianglePosition ? trianglePosition.point.y : -999}px`,
+          borderLeft:
+            trianglePosition?.dir === 'right'
+              ? 'none'
+              : trianglePosition?.dir === 'left'
+                ? `6px solid`
+                : '6px solid transparent',
+          borderRight:
+            trianglePosition?.dir === 'left'
+              ? 'none'
+              : trianglePosition?.dir === 'right'
+                ? `6px solid`
+                : '6px solid transparent',
+          borderTop:
+            trianglePosition?.dir === 'down'
+              ? 'none'
+              : trianglePosition?.dir === 'up'
+                ? `6px solid`
+                : '6px solid transparent',
+          borderBottom:
+            trianglePosition?.dir === 'up'
+              ? 'none'
+              : trianglePosition?.dir === 'down'
+                ? `6px solid`
+                : '6px solid transparent',
+          transform:
+            trianglePosition?.dir === 'left' || trianglePosition?.dir === 'right'
+              ? 'translateY(-50%)'
+              : 'translateX(-50%)',
+        }}
+      />
+    </div>
+  );
+};
 
 export default Popup;

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

@@ -0,0 +1,37 @@
+import clsx from 'clsx';
+import React from 'react';
+
+type Option = {
+  value: string;
+  label: string;
+};
+
+type SelectProps = {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  options: Option[];
+  className?: string;
+};
+
+export default function Select({ value, onChange, options, className }: SelectProps) {
+  return (
+    <select
+      value={value}
+      onChange={onChange}
+      className={clsx(
+        'select h-8 min-h-8 rounded-md border-none text-end text-sm',
+        'bg-gray-600 text-white/75 focus:outline-none focus:ring-0',
+        className,
+      )}
+      style={{
+        textAlignLast: 'end',
+      }}
+    >
+      {options.map(({ value, label }) => (
+        <option key={value} value={value}>
+          {label}
+        </option>
+      ))}
+    </select>
+  );
+}

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

@@ -65,7 +65,7 @@ const Slider: React.FC<SliderProps> = ({
   return (
     <div
       ref={sliderRef}
-      className={`slider bg-base-200 mx-auto w-full max-w-md rounded-xl ${className}`}
+      className={`slider bg-base-200 mx-auto w-full rounded-xl ${className}`}
       dir={isRtl ? 'rtl' : undefined}
     >
       <div className='relative' style={{ height: `${heightPx}px` }}>

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

@@ -7,10 +7,12 @@ import { type as osType, arch as osArch } from '@tauri-apps/plugin-os';
 import { check, Update } from '@tauri-apps/plugin-updater';
 import { relaunch } from '@tauri-apps/plugin-process';
 import { fetch } from '@tauri-apps/plugin-http';
+import { useTranslator } from '@/hooks/useTranslator';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useSearchParams } from 'next/navigation';
 import { tauriDownload } from '@/utils/transfer';
 import { installPackage } from '@/utils/bridge';
+import { getLocale } from '@/utils/misc';
 import { READEST_UPDATER_FILE, READEST_CHANGELOG_FILE } from '@/services/constants';
 import packageJson from '../../package.json';
 import Dialog from '@/components/Dialog';
@@ -58,6 +60,11 @@ interface GenericUpdate {
 
 export const UpdaterContent = ({ version }: { version?: string }) => {
   const _ = useTranslation();
+  const [targetLang, setTargetLang] = useState('EN');
+  const { translate } = useTranslator({
+    sourceLang: 'AUTO',
+    targetLang,
+  });
   const { appService } = useEnv();
   const searchParams = useSearchParams();
   const currentVersion = packageJson.version;
@@ -71,6 +78,17 @@ export const UpdaterContent = ({ version }: { version?: string }) => {
   const [isDownloading, setIsDownloading] = useState(false);
   const [downloaded, setDownloaded] = useState<number | null>(null);
 
+  useEffect(() => {
+    const locale = getLocale();
+    let userLang = locale.split('-')[0] || 'en';
+    if (locale === 'zh-CN') {
+      userLang = 'zh-Hans';
+    } else if (locale.startsWith('zh')) {
+      userLang = 'zh-Hant';
+    }
+    setTargetLang(userLang.toUpperCase());
+  }, []);
+
   useEffect(() => {
     const checkDesktopUpdate = async () => {
       const update = await check();
@@ -181,18 +199,25 @@ export const UpdaterContent = ({ version }: { version?: string }) => {
     };
     const updateChangelogs = async (update: GenericUpdate) => {
       setNewVersion(update.version);
-      const changelogs = await fetchChangelogs(currentVersion, update.version);
-      if (changelogs.length > 0) {
-        setChangelogs(changelogs);
-      } else {
-        setChangelogs([
+      let changelogs = await fetchChangelogs(currentVersion, update.version);
+      if (changelogs.length === 0) {
+        changelogs = [
           {
             version: update.version,
             date: new Date(update.date!).toDateString(),
             notes: parseNumberedList(update.body ?? ''),
           },
-        ]);
+        ];
       }
+      for (const entry of changelogs) {
+        try {
+          entry.notes = await translate(entry.notes, { useCache: true });
+        } catch (error) {
+          console.log('Failed to translate changelog:', error);
+        }
+      }
+
+      setChangelogs(changelogs);
     };
     if (update) {
       updateChangelogs(update);

apps/readest-app/src/context/PHContext.tsx

@@ -1,7 +1,13 @@
 'use client';
-import { ReactNode } from 'react';
 import posthog from 'posthog-js';
+import { ReactNode } from 'react';
 import { PostHogProvider } from 'posthog-js/react';
+import { TELEMETRY_OPT_OUT_KEY } from '@/utils/telemetry';
+
+const shouldDisablePostHog = () => {
+  if (typeof window === 'undefined') return false;
+  return localStorage.getItem(TELEMETRY_OPT_OUT_KEY) === 'true';
+};
 
 if (
   typeof window !== 'undefined' &&
@@ -12,6 +18,9 @@ if (
     api_host: process.env['NEXT_PUBLIC_POSTHOG_HOST'],
     person_profiles: 'always',
   });
+  if (shouldDisablePostHog()) {
+    posthog.opt_out_capturing();
+  }
 }
 export const CSPostHogProvider = ({ children }: { children: ReactNode }) => {
   return <PostHogProvider client={posthog}>{children}</PostHogProvider>;

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

@@ -0,0 +1,141 @@
+import { useState, useCallback, useEffect } from 'react';
+import { useAuth } from '@/context/AuthContext';
+import { getTranslator, getTranslators } from '@/services/translators';
+import { getFromCache, storeInCache, polish, UseTranslatorOptions } from '@/services/translators';
+
+export function useTranslator({
+  provider = 'deepl',
+  sourceLang = 'AUTO',
+  targetLang = 'EN',
+  enablePolishing = true,
+}: UseTranslatorOptions = {}) {
+  const { token } = useAuth();
+  const [loading, setLoading] = useState(false);
+  const [translator, setTransltor] = useState(() => getTranslator(provider));
+  const [translators] = useState(() => getTranslators());
+
+  useEffect(() => {
+    setLoading(false);
+  }, [provider, sourceLang, targetLang]);
+
+  useEffect(() => {
+    setTransltor(getTranslator(provider));
+  }, [provider]);
+
+  const translate = useCallback(
+    async (
+      input: string[],
+      options?: { source?: string; target?: string; useCache?: boolean },
+    ): Promise<string[]> => {
+      const sourceLanguage = options?.source || sourceLang;
+      const targetLanguage = options?.target || targetLang;
+      const useCache = options?.useCache ?? false;
+      const textsToTranslate = input;
+
+      if (textsToTranslate.length === 0 || textsToTranslate.every((t) => !t?.trim())) {
+        return textsToTranslate;
+      }
+
+      const textsNeedingTranslation: string[] = [];
+      const indicesNeedingTranslation: number[] = [];
+
+      await Promise.all(
+        textsToTranslate.map(async (text, index) => {
+          if (!text?.trim()) return;
+
+          const cachedTranslation = await getFromCache(
+            text,
+            sourceLanguage,
+            targetLanguage,
+            provider,
+          );
+          if (cachedTranslation) return;
+
+          textsNeedingTranslation.push(text);
+          indicesNeedingTranslation.push(index);
+        }),
+      );
+
+      if (textsNeedingTranslation.length === 0) {
+        const results = await Promise.all(
+          textsToTranslate.map((text) =>
+            getFromCache(text, sourceLanguage, targetLanguage, provider).then(
+              (cached) => cached || text,
+            ),
+          ),
+        );
+
+        return enablePolishing ? polish(results, targetLanguage) : results;
+      }
+
+      setLoading(true);
+
+      try {
+        const translator = translators.find((t) => t.name === provider);
+        if (!translator) {
+          throw new Error(`No translator found for provider: ${provider}`);
+        }
+        const translatedTexts = await translator.translate(
+          textsNeedingTranslation,
+          sourceLanguage,
+          targetLanguage,
+          token,
+          useCache,
+        );
+
+        await Promise.all(
+          textsNeedingTranslation.map(async (text, index) => {
+            return storeInCache(
+              text,
+              translatedTexts[index] || '',
+              sourceLanguage,
+              targetLanguage,
+              provider,
+            );
+          }),
+        );
+
+        const results = [...textsToTranslate];
+        indicesNeedingTranslation.forEach((originalIndex, translationIndex) => {
+          results[originalIndex] = translatedTexts[translationIndex] || '';
+        });
+
+        await Promise.all(
+          results.map(async (_, index) => {
+            if (!indicesNeedingTranslation.includes(index)) {
+              const originalText = textsToTranslate[index];
+              if (!originalText?.trim()) return;
+
+              const cachedTranslation = await getFromCache(
+                originalText,
+                sourceLanguage,
+                targetLanguage,
+                provider,
+              );
+
+              if (cachedTranslation) {
+                results[index] = cachedTranslation;
+              }
+            }
+          }),
+        );
+
+        setLoading(false);
+        return enablePolishing ? polish(results, targetLanguage) : results;
+      } catch (err) {
+        console.error('Translation error:', err);
+        setLoading(false);
+        throw err instanceof Error ? err : new Error(String(err));
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [provider, sourceLang, targetLang, translator, token],
+  );
+
+  return {
+    translate,
+    translator,
+    translators,
+    loading,
+  };
+}

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

@@ -178,7 +178,7 @@ export class DocumentLoader {
     );
   }
 
-  public async open(): Promise<{ book: BookDoc; format: BookFormat }> {
+  public async open({ allowScript = false } = {}): Promise<{ book: BookDoc; format: BookFormat }> {
     let book = null;
     let format: BookFormat = 'EPUB';
     if (!this.file.size) {
@@ -200,7 +200,7 @@ export class DocumentLoader {
         format = 'FBZ';
       } else {
         const { EPUB } = await import('foliate-js/epub.js');
-        book = await new EPUB(loader).init();
+        book = await new EPUB(loader).init({ allowScript });
         format = 'EPUB';
       }
     } else if (await this.isPDF()) {

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

@@ -174,11 +174,12 @@ export class EdgeSpeechTTS {
     });
 
     const genSSML = (lang: string, text: string, voice: string, rate: number) => {
+      const cleanedText = text.replace(/^<break\b[^>]*>/i, '');
       return `
         <speak version="1.0" xml:lang="${lang}">
           <voice name="${voice}">
             <prosody rate="${rate}">
-              ${text}
+              ${cleanedText}
             </prosody>
           </voice>
         </speak>
@@ -255,6 +256,12 @@ export class EdgeSpeechTTS {
         }
       });
 
+      ws.addEventListener('close', () => {
+        if (!audioData.byteLength) {
+          reject(new Error('No audio data received.'));
+        }
+      });
+
       ws.addEventListener('error', () => {
         ws.close();
         reject(new Error('WebSocket error occurred.'));

apps/readest-app/src/pages/_app.tsx

@@ -3,7 +3,6 @@ import Head from 'next/head';
 import Providers from '@/components/Providers';
 
 import '../styles/globals.css';
-import '../styles/fonts.css';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (

apps/readest-app/src/pages/api/deepl/translate.ts

@@ -1,12 +1,29 @@
+import crypto from 'crypto';
 import { NextApiRequest, NextApiResponse } from 'next';
 import { corsAllMethods, runMiddleware } from '@/utils/cors';
 import { supabase } from '@/utils/supabase';
-import { getUserPlan } from '@/utils/access';
-import { query as deeplQuery } from '@/utils/deepl';
+import { getDailyTranslationPlanData, getUserPlan } from '@/utils/access';
 
 const DEFAULT_DEEPL_FREE_API = 'https://api-free.deepl.com/v2/translate';
 const DEFAULT_DEEPL_PRO_API = 'https://api.deepl.com/v2/translate';
 
+const ErrorCodes = {
+  UNAUTHORIZED: 'Unauthorized',
+  DEEPL_API_ERROR: 'DeepL API Error',
+  DAILY_QUOTA_EXCEEDED: 'Daily Quota Exceeded',
+  INTERNAL_SERVER_ERROR: 'Internal Server Error',
+};
+
+interface KVNamespace {
+  get(key: string): Promise<string | null>;
+  put(key: string, value: string, options?: { expirationTtl?: number }): Promise<void>;
+  delete(key: string): Promise<void>;
+}
+
+interface CloudflareEnv {
+  TRANSLATIONS_KV?: KVNamespace;
+}
+
 const getUserAndToken = async (authHeader: string | undefined) => {
   if (!authHeader) return {};
 
@@ -27,7 +44,13 @@ const LANG_V2_V1_MAP: Record<string, string> = {
 
 const getDeepLAPIKey = (keys: string | undefined) => {
   const keyArray = keys?.split(',') ?? [];
-  return keyArray.length ? keyArray[Math.floor(Math.random() * keyArray.length)] : '';
+  return keyArray.length ? keyArray[Math.floor(Math.random() * keyArray.length)]! : '';
+};
+
+const generateCacheKey = (text: string, sourceLang: string, targetLang: string): string => {
+  const inputString = `${sourceLang}:${targetLang}:${text}`;
+  const hash = crypto.createHash('sha1').update(inputString).digest('hex');
+  return `tr:${hash}`;
 };
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
@@ -37,6 +60,9 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     return res.status(405).json({ error: 'Method not allowed' });
   }
 
+  const env = (req.env || {}) as CloudflareEnv;
+  const hasKVCache = !!env['TRANSLATIONS_KV'];
+
   const { user, token } = await getUserAndToken(req.headers['authorization']);
   const { DEEPL_PRO_API, DEEPL_FREE_API } = process.env;
   const deepFreeApiUrl = DEEPL_FREE_API || DEFAULT_DEEPL_FREE_API;
@@ -47,8 +73,6 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   if (user && token) {
     userPlan = getUserPlan(token);
     if (userPlan === 'pro') deeplApiUrl = deeplProApiUrl;
-  } else {
-    res.status(403).json({ error: 'Not authenticated' });
   }
   const deeplAuthKey =
     deeplApiUrl === deeplProApiUrl
@@ -59,46 +83,144 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     text,
     source_lang: sourceLang = 'AUTO',
     target_lang: targetLang = 'EN',
-  }: { text: string[]; source_lang: string; target_lang: string } = req.body;
+    use_cache: useCache = false,
+  }: { text: string[]; source_lang: string; target_lang: string; use_cache: boolean } = req.body;
+
   try {
-    if (user && token) {
-      const isV2Api = deeplApiUrl.endsWith('/v2/translate');
-      const requestBody = {
-        text: isV2Api ? text : (text[0] ?? ''),
-        source_lang: isV2Api ? sourceLang : (LANG_V2_V1_MAP[sourceLang] ?? sourceLang),
-        target_lang: isV2Api ? targetLang : (LANG_V2_V1_MAP[targetLang] ?? targetLang),
-      };
-      const response = await fetch(deeplApiUrl, {
-        method: 'POST',
-        headers: {
-          Authorization: `DeepL-Auth-Key ${deeplAuthKey}`,
-          'x-fingerprint': process.env['DEEPL_X_FINGERPRINT'] || '',
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(requestBody),
-      });
-      const data = await response.json();
-      const result = {
-        ...data,
-        translations: data.translations || [
-          {
-            text: data.data,
-          },
-        ],
-      };
-      res.status(response.status).json(result);
-    } else {
-      const result = await deeplQuery({
-        text: text[0] ?? '',
-        sourceLang,
-        targetLang,
-      });
-      res.status(200).json(result);
-    }
+    const translations = await Promise.all(
+      text.map(async (singleText) => {
+        if (!singleText?.trim()) {
+          return { text: '' };
+        }
+        if (useCache && hasKVCache) {
+          try {
+            const cacheKey = generateCacheKey(singleText, sourceLang, targetLang);
+            const cachedTranslation = await env['TRANSLATIONS_KV']!.get(cacheKey);
+
+            if (cachedTranslation) {
+              return {
+                text: cachedTranslation,
+                detected_source_language: sourceLang,
+              };
+            }
+          } catch (cacheError) {
+            console.error('Cache retrieval error:', cacheError);
+          }
+        }
+
+        // if (!user || !token) return res.status(401).json({ error: ErrorCodes.UNAUTHORIZED });
+
+        return await callDeepLAPI(
+          user?.id,
+          token,
+          singleText,
+          sourceLang,
+          targetLang,
+          deeplApiUrl,
+          deeplAuthKey,
+          env['TRANSLATIONS_KV'],
+          useCache,
+        );
+      }),
+    );
+    return res.status(200).json({ translations });
   } catch (error) {
     console.error('Error proxying DeepL request:', error);
-    res.status(500).json({ error: 'Internal Server Error' });
+    if (error instanceof Error && error.message.includes(ErrorCodes.DAILY_QUOTA_EXCEEDED)) {
+      return res.status(429).json({ error: ErrorCodes.DAILY_QUOTA_EXCEEDED });
+    }
+    return res.status(500).json({ error: ErrorCodes.INTERNAL_SERVER_ERROR });
   }
 };
 
+async function callDeepLAPI(
+  userId: string | undefined,
+  token: string | undefined,
+  text: string,
+  sourceLang: string,
+  targetLang: string,
+  apiUrl: string,
+  authKey: string,
+  translationsKV: KVNamespace | undefined,
+  useCache: boolean,
+) {
+  let dailyUsageKey = '';
+  if (userId && token) {
+    const { quota: dailyQuota } = getDailyTranslationPlanData(token);
+    const currentDate = new Date().toISOString().split('T')[0]!;
+    dailyUsageKey = `daily_usage:${currentDate}:${userId}`;
+    const dailyUsage = (await translationsKV?.get(dailyUsageKey)) || '0';
+    if (dailyQuota <= parseInt(dailyUsage) + text.length) {
+      throw new Error(ErrorCodes.DAILY_QUOTA_EXCEEDED);
+    }
+  }
+
+  const isV2Api = apiUrl.endsWith('/v2/translate');
+
+  // TODO: this should be processed in the client, but for now, we need to do it here
+  // please remove this when most clients are updated
+  const input = text.replaceAll('\n', '').trim();
+  const requestBody = {
+    text: isV2Api ? [input] : input,
+    source_lang: isV2Api ? sourceLang : (LANG_V2_V1_MAP[sourceLang] ?? sourceLang),
+    target_lang: isV2Api ? targetLang : (LANG_V2_V1_MAP[targetLang] ?? targetLang),
+  };
+
+  const response = await fetch(apiUrl, {
+    method: 'POST',
+    headers: {
+      Authorization: `DeepL-Auth-Key ${authKey}`,
+      'x-fingerprint': process.env['DEEPL_X_FINGERPRINT'] || '',
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(requestBody),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`DeepL API error (${response.status}): ${errorText}`);
+  }
+
+  const data = await response.json();
+
+  let translatedText = '';
+  let detectedSourceLanguage = '';
+
+  if (data.translations && data.translations.length > 0) {
+    translatedText = data.translations[0].text;
+    detectedSourceLanguage = data.translations[0].detected_source_language || '';
+  } else if (data.data) {
+    translatedText = data.data;
+  }
+
+  let newDailyUsage = 0;
+  if (dailyUsageKey && translationsKV) {
+    try {
+      const usage = translatedText.length + text.length;
+      const dailyUsage = (await translationsKV.get(dailyUsageKey)) || '0';
+      newDailyUsage = parseInt(dailyUsage) + usage;
+      await translationsKV.put(dailyUsageKey, newDailyUsage.toString(), {
+        expirationTtl: 86400 * 30,
+      });
+    } catch (cacheError) {
+      console.error('Cache storage error:', cacheError);
+    }
+  }
+
+  if (useCache && translationsKV && translatedText) {
+    try {
+      const cacheKey = generateCacheKey(text, sourceLang, targetLang);
+      await translationsKV.put(cacheKey, translatedText, { expirationTtl: 86400 * 90 });
+    } catch (cacheError) {
+      console.error('Cache storage error:', cacheError);
+    }
+  }
+
+  return {
+    text: translatedText,
+    daily_usage: newDailyUsage,
+    detected_source_language: detectedSourceLanguage,
+  };
+}
+
 export default handler;

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

@@ -34,8 +34,9 @@ import {
   DEFAULT_CJK_VIEW_SETTINGS,
   DEFAULT_MOBILE_READSETTINGS,
   DEFAULT_SCREEN_CONFIG,
+  DEFAULT_TRANSLATOR_CONFIG,
 } from './constants';
-import { getOSPlatform, isCJKEnv, isContentURI, isValidURL } from '@/utils/misc';
+import { getOSPlatform, getTargetLang, isCJKEnv, isContentURI, isValidURL } from '@/utils/misc';
 import { deserializeConfig, serializeConfig } from '@/utils/serializer';
 import { downloadFile, uploadFile, deleteFile, createProgressHandler } from '@/libs/storage';
 import { ClosableFile } from '@/utils/file';
@@ -97,6 +98,7 @@ export abstract class BaseAppService implements AppService {
         ...DEFAULT_VIEW_CONFIG,
         ...DEFAULT_TTS_CONFIG,
         ...DEFAULT_SCREEN_CONFIG,
+        ...{ ...DEFAULT_TRANSLATOR_CONFIG, translateTargetLang: getTargetLang() },
         ...settings.globalViewSettings,
       };
     } catch {
@@ -117,6 +119,7 @@ export abstract class BaseAppService implements AppService {
           ...DEFAULT_VIEW_CONFIG,
           ...DEFAULT_TTS_CONFIG,
           ...DEFAULT_SCREEN_CONFIG,
+          ...{ ...DEFAULT_TRANSLATOR_CONFIG, translateTargetLang: getTargetLang() },
         },
       } as SystemSettings;
 
@@ -195,6 +198,7 @@ export abstract class BaseAppService implements AppService {
         if (!transient) {
           existingBook.deletedAt = null;
         }
+        existingBook.createdAt = Date.now();
         existingBook.updatedAt = Date.now();
       }
 
@@ -397,7 +401,7 @@ export abstract class BaseAppService implements AppService {
       }
     } catch (error) {
       // don't throw error here since some books may not have cover images at all
-      console.log('Failed to download cover file:', error);
+      console.log(`Failed to download cover file for book: '${book.title}'`, error);
     }
 
     if (needDownBook) {

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

@@ -5,12 +5,13 @@ import {
   BookStyle,
   HighlightColor,
   ScreenConfig,
+  TranslatorConfig,
   TTSConfig,
   ViewConfig,
   ViewSettings,
 } from '@/types/book';
 import { ReadSettings, SystemSettings } from '@/types/settings';
-import { UserStorageQuota } from '@/types/user';
+import { UserStorageQuota, UserDailyTranslationQuota } from '@/types/user';
 import { getDefaultMaxBlockSize, getDefaultMaxInlineSize } from '@/utils/config';
 import { stubTranslation as _ } from '@/utils/misc';
 
@@ -37,10 +38,11 @@ export const DEFAULT_SYSTEM_SETTINGS: Partial<SystemSettings> = {
   autoUpload: true,
   alwaysOnTop: false,
   autoCheckUpdates: true,
-  screenWakeLock: true,
+  screenWakeLock: false,
   openLastBooks: false,
   lastOpenBooks: [],
   autoImportBooksOnOpen: false,
+  telemetryEnabled: true,
   libraryViewMode: 'grid',
   librarySortBy: 'updated',
   librarySortAscending: false,
@@ -56,6 +58,7 @@ export const DEFAULT_READSETTINGS: ReadSettings = {
   notebookWidth: '25%',
   isNotebookPinned: false,
   autohideCursor: true,
+  translationProvider: 'deepl',
   translateTargetLang: 'EN',
 
   customThemes: [],
@@ -87,7 +90,7 @@ export const DEFAULT_BOOK_LAYOUT: BookLayout = {
   marginPx: 44,
   gapPercent: 5,
   compactMarginPx: 0,
-  compactGapPercent: 0,
+  compactGapPercent: 5,
   scrolled: false,
   disableClick: false,
   swapClickArea: false,
@@ -105,6 +108,8 @@ export const DEFAULT_BOOK_LAYOUT: BookLayout = {
   showHeader: true,
   showFooter: true,
   showBarsOnScroll: false,
+  scrollingOverlap: 0,
+  allowScript: false,
 };
 
 export const DEFAULT_BOOK_STYLE: BookStyle = {
@@ -116,7 +121,7 @@ export const DEFAULT_BOOK_STYLE: BookStyle = {
   textIndent: 0,
   fullJustification: true,
   hyphenation: true,
-  invert: false,
+  invertImgColorInDark: false,
   theme: 'light',
   overrideFont: false,
   overrideLayout: false,
@@ -142,6 +147,13 @@ export const DEFAULT_VIEW_CONFIG: ViewConfig = {
 export const DEFAULT_TTS_CONFIG: TTSConfig = {
   ttsRate: 1.3,
   ttsVoice: '',
+  ttsLocation: '',
+};
+
+export const DEFAULT_TRANSLATOR_CONFIG: TranslatorConfig = {
+  translationEnabled: false,
+  translationProvider: 'deepl',
+  translateTargetLang: '',
 };
 
 export const DEFAULT_SCREEN_CONFIG: ScreenConfig = {
@@ -517,6 +529,12 @@ export const DEFAULT_STORAGE_QUOTA: UserStorageQuota = {
   pro: 10 * 1024 * 1024 * 1024,
 };
 
+export const DEFAULT_DAILY_TRANSLATION_QUOTA: UserDailyTranslationQuota = {
+  free: 100 * 1024,
+  plus: 1 * 1024 * 1024,
+  pro: 10 * 1024 * 1024,
+};
+
 export const DOUBLE_CLICK_INTERVAL_THRESHOLD_MS = 250;
 export const DISABLE_DOUBLE_CLICK_ON_MOBILE = true;
 export const LONG_HOLD_THRESHOLD = 500;
@@ -587,6 +605,7 @@ export const TRANSLATED_LANGS = {
   en: 'English',
   fr: 'Français',
   de: 'Deutsch',
+  nl: 'Nederlands',
   it: 'Italiano',
   ja: '日本語',
   ko: '한국어',

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

@@ -1,11 +1,9 @@
 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/transformers/translate.ts

@@ -1,9 +0,0 @@
-import type { Transformer } from './types';
-
-export const translateTransformer: Transformer = {
-  name: 'translate',
-
-  transform: async (ctx) => {
-    return ctx.content;
-  },
-};

apps/readest-app/src/services/translators/cache.ts

@@ -0,0 +1,593 @@
+import { TranslationCache } from './types';
+
+const DB_NAME = 'TranslationCache';
+const DB_VERSION = 1;
+const STORE_NAME = 'translations';
+
+interface CacheEntry {
+  key: string;
+  translation: string;
+  timestamp: number;
+  provider: string;
+  sourceLang: string;
+  targetLang: string;
+  originalText: string;
+}
+
+const memoryCache: TranslationCache = {};
+const memoryTimestamps: Record<string, number> = {};
+
+const openDatabase = (): Promise<IDBDatabase> => {
+  return new Promise((resolve, reject) => {
+    if (!window.indexedDB) {
+      console.warn('IndexedDB not supported. Using in-memory cache only.');
+      reject(new Error('IndexedDB not supported'));
+      return;
+    }
+
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+
+    request.onerror = (event) => {
+      console.error('IndexedDB error:', event);
+      reject(new Error('Could not open IndexedDB'));
+    };
+
+    request.onsuccess = (event) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+      resolve(db);
+    };
+
+    request.onupgradeneeded = (event) => {
+      const db = (event.target as IDBOpenDBRequest).result;
+
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        const store = db.createObjectStore(STORE_NAME, { keyPath: 'key' });
+        store.createIndex('provider', 'provider', { unique: false });
+        store.createIndex('timestamp', 'timestamp', { unique: false });
+      }
+    };
+  });
+};
+
+export const loadCacheFromDB = async (
+  options: {
+    maxAge?: number;
+    maxEntries?: number;
+    onlyLoadProviders?: string[];
+    onlyLoadLanguages?: { source?: string[]; target?: string[] };
+  } = {},
+): Promise<void> => {
+  try {
+    const db = await openDatabase();
+    const transaction = db.transaction(STORE_NAME, 'readonly');
+    const store = transaction.objectStore(STORE_NAME);
+
+    let request: IDBRequest;
+    if (options.onlyLoadProviders && options.onlyLoadProviders.length > 0) {
+      const providerPromises = options.onlyLoadProviders.map((provider) => {
+        return new Promise<CacheEntry[]>((resolve) => {
+          const providerIndex = store.index('provider');
+          const request = providerIndex.getAll(provider);
+
+          request.onsuccess = () => {
+            resolve(request.result);
+          };
+
+          request.onerror = () => {
+            resolve([]);
+          };
+        });
+      });
+
+      const allEntries = (await Promise.all(providerPromises)).flat();
+      processLoadedEntries(allEntries, options);
+    } else {
+      request = store.getAll();
+
+      request.onsuccess = () => {
+        const entries = request.result as CacheEntry[];
+        processLoadedEntries(entries, options);
+      };
+
+      request.onerror = (event) => {
+        console.error('Error loading cache from IndexedDB:', event);
+      };
+    }
+
+    transaction.oncomplete = () => {
+      db.close();
+    };
+  } catch (error) {
+    console.error('Failed to load cache from IndexedDB:', error);
+  }
+};
+
+const processLoadedEntries = (
+  entries: CacheEntry[],
+  options: {
+    maxAge?: number;
+    maxEntries?: number;
+    onlyLoadLanguages?: { source?: string[]; target?: string[] };
+  },
+): void => {
+  let filteredEntries = entries;
+
+  if (options.maxAge) {
+    const cutoff = Date.now() - options.maxAge;
+    filteredEntries = filteredEntries.filter((entry) => entry.timestamp >= cutoff);
+  }
+
+  if (options.onlyLoadLanguages) {
+    if (options.onlyLoadLanguages.source && options.onlyLoadLanguages.source.length > 0) {
+      filteredEntries = filteredEntries.filter((entry) =>
+        options.onlyLoadLanguages!.source!.includes(entry.sourceLang),
+      );
+    }
+
+    if (options.onlyLoadLanguages.target && options.onlyLoadLanguages.target.length > 0) {
+      filteredEntries = filteredEntries.filter((entry) =>
+        options.onlyLoadLanguages!.target!.includes(entry.targetLang),
+      );
+    }
+  }
+
+  if (options.maxEntries && filteredEntries.length > options.maxEntries) {
+    filteredEntries.sort((a, b) => b.timestamp - a.timestamp);
+    filteredEntries = filteredEntries.slice(0, options.maxEntries);
+  }
+
+  filteredEntries.forEach((entry) => {
+    memoryCache[entry.key] = entry.translation;
+    memoryTimestamps[entry.key] = entry.timestamp;
+  });
+
+  // console.log(`Loaded ${filteredEntries.length} translations into memory cache`);
+};
+
+export const getCacheKey = (
+  text: string,
+  sourceLang: string,
+  targetLang: string,
+  provider: string,
+): string => {
+  return `${provider}:${sourceLang}:${targetLang}:${text}`;
+};
+
+export const getFromCache = async (
+  text: string,
+  sourceLang: string,
+  targetLang: string,
+  provider: string,
+): Promise<string | null> => {
+  if (!text?.trim()) return null;
+
+  const key = getCacheKey(text, sourceLang, targetLang, provider);
+
+  if (memoryCache[key]) {
+    return memoryCache[key];
+  }
+
+  try {
+    const db = await openDatabase();
+    const transaction = db.transaction(STORE_NAME, 'readonly');
+    const store = transaction.objectStore(STORE_NAME);
+    const request = store.get(key);
+
+    return new Promise((resolve) => {
+      request.onsuccess = () => {
+        const entry = request.result as CacheEntry;
+        if (entry) {
+          memoryCache[key] = entry.translation;
+          memoryTimestamps[key] = entry.timestamp;
+          resolve(entry.translation);
+        } else {
+          resolve(null);
+        }
+      };
+
+      request.onerror = () => {
+        resolve(null);
+      };
+
+      transaction.oncomplete = () => {
+        db.close();
+      };
+    });
+  } catch (error) {
+    console.error('Error accessing IndexedDB:', error);
+    return null;
+  }
+};
+
+export const storeInCache = async (
+  text: string,
+  translation: string,
+  sourceLang: string,
+  targetLang: string,
+  provider: string,
+): Promise<void> => {
+  if (!text?.trim() || !translation) return;
+
+  const key = getCacheKey(text, sourceLang, targetLang, provider);
+  const timestamp = Date.now();
+
+  memoryCache[key] = translation;
+  memoryTimestamps[key] = timestamp;
+
+  try {
+    const db = await openDatabase();
+    const transaction = db.transaction(STORE_NAME, 'readwrite');
+    const store = transaction.objectStore(STORE_NAME);
+
+    const entry: CacheEntry = {
+      key,
+      translation,
+      timestamp,
+      provider,
+      sourceLang,
+      targetLang,
+      originalText: text,
+    };
+
+    store.put(entry);
+
+    return new Promise((resolve, reject) => {
+      transaction.oncomplete = () => {
+        db.close();
+        resolve();
+      };
+
+      transaction.onerror = (event) => {
+        console.error('Error storing in IndexedDB:', event);
+        reject(new Error('Failed to store in IndexedDB'));
+      };
+    });
+  } catch (error) {
+    console.error('Error accessing IndexedDB:', error);
+  }
+};
+
+export interface CacheFilterOptions {
+  provider?: string;
+  maxAge?: number;
+}
+
+export const clearCache = async (filter?: CacheFilterOptions): Promise<number> => {
+  let deletedCount = 0;
+
+  if (!filter) {
+    const count = Object.keys(memoryCache).length;
+    Object.keys(memoryCache).forEach((key) => {
+      delete memoryCache[key];
+      delete memoryTimestamps[key];
+    });
+    deletedCount = count;
+  } else {
+    const keysToDelete: string[] = [];
+
+    Object.keys(memoryCache).forEach((key) => {
+      let shouldDelete = true;
+
+      if (filter.provider) {
+        const parts = key.split(':');
+        const provider = parts[0];
+
+        if (filter.provider && provider !== filter.provider) {
+          shouldDelete = false;
+        }
+      }
+
+      if (shouldDelete && filter.maxAge && memoryTimestamps[key]) {
+        const timestamp = memoryTimestamps[key];
+        if (Date.now() - timestamp < filter.maxAge) {
+          shouldDelete = false;
+        }
+      }
+
+      if (shouldDelete) {
+        keysToDelete.push(key);
+      }
+    });
+
+    keysToDelete.forEach((key) => {
+      delete memoryCache[key];
+      delete memoryTimestamps[key];
+    });
+
+    deletedCount = keysToDelete.length;
+  }
+
+  try {
+    const db = await openDatabase();
+    const transaction = db.transaction(STORE_NAME, 'readwrite');
+    const store = transaction.objectStore(STORE_NAME);
+
+    if (!filter) {
+      store.clear();
+    } else {
+      const request = store.getAll();
+
+      request.onsuccess = () => {
+        const entries = request.result as CacheEntry[];
+        const filteredEntries = entries.filter((entry) => {
+          if (filter.provider && entry.provider !== filter.provider) {
+            return false;
+          }
+
+          if (filter.maxAge && Date.now() - entry.timestamp >= filter.maxAge) {
+            return true;
+          }
+
+          return true;
+        });
+
+        filteredEntries.forEach((entry) => {
+          store.delete(entry.key);
+        });
+      };
+    }
+
+    return new Promise((resolve) => {
+      transaction.oncomplete = () => {
+        db.close();
+        resolve(deletedCount);
+      };
+
+      transaction.onerror = () => {
+        db.close();
+        resolve(deletedCount);
+      };
+    });
+  } catch (error) {
+    console.error('Error clearing IndexedDB cache:', error);
+    return deletedCount;
+  }
+};
+
+export const getCacheStats = async (
+  includeDB: boolean = false,
+): Promise<{
+  memoryCacheEntries: number;
+  memoryCacheSizeInBytes: number;
+  dbCacheEntries?: number;
+  dbCacheSizeInBytes?: number;
+  totalEntries?: number;
+  totalSizeInBytes?: number;
+}> => {
+  const memoryCacheEntries = Object.keys(memoryCache).length;
+
+  let memoryCacheSizeInBytes = 0;
+  for (const key in memoryCache) {
+    memoryCacheSizeInBytes += key.length;
+
+    const value = memoryCache[key] || '';
+    memoryCacheSizeInBytes += value.length;
+  }
+
+  if (!includeDB) {
+    return { memoryCacheEntries, memoryCacheSizeInBytes };
+  }
+
+  try {
+    const db = await openDatabase();
+    const transaction = db.transaction(STORE_NAME, 'readonly');
+    const store = transaction.objectStore(STORE_NAME);
+    const countRequest = store.count();
+
+    return new Promise((resolve) => {
+      countRequest.onsuccess = () => {
+        const dbCacheEntries = countRequest.result;
+
+        const getAllRequest = store.getAll();
+
+        getAllRequest.onsuccess = () => {
+          const entries = getAllRequest.result as CacheEntry[];
+
+          let dbCacheSizeInBytes = 0;
+          entries.forEach((entry) => {
+            const entryString = JSON.stringify(entry);
+            dbCacheSizeInBytes += entryString.length;
+          });
+
+          const totalEntries =
+            memoryCacheEntries + dbCacheEntries - Math.min(memoryCacheEntries, dbCacheEntries);
+
+          const totalSizeInBytes = memoryCacheSizeInBytes + dbCacheSizeInBytes;
+
+          resolve({
+            memoryCacheEntries,
+            memoryCacheSizeInBytes,
+            dbCacheEntries,
+            dbCacheSizeInBytes,
+            totalEntries,
+            totalSizeInBytes,
+          });
+        };
+      };
+
+      transaction.oncomplete = () => {
+        db.close();
+      };
+
+      transaction.onerror = () => {
+        db.close();
+        resolve({
+          memoryCacheEntries,
+          memoryCacheSizeInBytes,
+        });
+      };
+    });
+  } catch (error) {
+    console.error('Error getting IndexedDB stats:', error);
+    return { memoryCacheEntries, memoryCacheSizeInBytes };
+  }
+};
+
+export const pruneCache = async (
+  options: {
+    maxAge?: number;
+    maxEntries?: number;
+    maxSizeInBytes?: number;
+    dryRun?: boolean;
+  } = {},
+): Promise<number> => {
+  const { maxAge, maxEntries, maxSizeInBytes, dryRun = false } = options;
+
+  if (!maxAge && !maxEntries && !maxSizeInBytes) {
+    return 0;
+  }
+
+  try {
+    const db = await openDatabase();
+    const transaction = db.transaction(STORE_NAME, dryRun ? 'readonly' : 'readwrite');
+    const store = transaction.objectStore(STORE_NAME);
+    const getAllRequest = store.getAll();
+
+    return new Promise((resolve) => {
+      getAllRequest.onsuccess = () => {
+        const entries = getAllRequest.result as CacheEntry[];
+        const entriesToPrune: CacheEntry[] = [];
+
+        if (maxAge) {
+          const cutoffTime = Date.now() - maxAge;
+          const agedEntries = entries.filter((entry) => entry.timestamp < cutoffTime);
+          entriesToPrune.push(...agedEntries);
+        }
+
+        if (maxEntries && entries.length > maxEntries) {
+          const sortedEntries = [...entries].sort((a, b) => a.timestamp - b.timestamp);
+          const excessEntries = sortedEntries.slice(0, entries.length - maxEntries);
+
+          const prunedKeys = new Set(entriesToPrune.map((e) => e.key));
+          excessEntries.forEach((entry) => {
+            if (!prunedKeys.has(entry.key)) {
+              entriesToPrune.push(entry);
+            }
+          });
+        }
+
+        if (maxSizeInBytes) {
+          let currentSize = 0;
+          entries.forEach((entry) => {
+            const entryString = JSON.stringify(entry);
+            currentSize += entryString.length;
+          });
+
+          if (currentSize > maxSizeInBytes) {
+            const remainingEntries = entries
+              .filter((entry) => !entriesToPrune.some((e) => e.key === entry.key))
+              .sort((a, b) => a.timestamp - b.timestamp);
+
+            let sizeToRemove = currentSize - maxSizeInBytes;
+            const prunedKeys = new Set(entriesToPrune.map((e) => e.key));
+
+            for (const entry of remainingEntries) {
+              if (sizeToRemove <= 0) break;
+
+              if (!prunedKeys.has(entry.key)) {
+                const entryString = JSON.stringify(entry);
+                const entrySize = entryString.length * 2;
+
+                entriesToPrune.push(entry);
+                prunedKeys.add(entry.key);
+                sizeToRemove -= entrySize;
+              }
+            }
+          }
+        }
+
+        const pruneCount = entriesToPrune.length;
+
+        if (!dryRun && pruneCount > 0) {
+          entriesToPrune.forEach((entry) => {
+            store.delete(entry.key);
+
+            delete memoryCache[entry.key];
+            delete memoryTimestamps[entry.key];
+          });
+        }
+
+        resolve(pruneCount);
+      };
+
+      getAllRequest.onerror = () => {
+        resolve(0);
+      };
+
+      transaction.oncomplete = () => {
+        db.close();
+      };
+    });
+  } catch (error) {
+    console.error('Error pruning cache:', error);
+    return 0;
+  }
+};
+
+export const initCache = async (
+  options: {
+    preload?: boolean;
+    preloadOptions?: {
+      maxAge?: number;
+      maxEntries?: number;
+      onlyLoadProviders?: string[];
+      onlyLoadLanguages?: { source?: string[]; target?: string[] };
+    };
+    autoPrune?: boolean;
+    pruneInterval?: number;
+    pruneOptions?: {
+      maxAge?: number;
+      maxEntries?: number;
+      maxSizeInBytes?: number;
+    };
+  } = {},
+): Promise<() => void> => {
+  const {
+    preload = true,
+    preloadOptions = {
+      maxAge: 7 * 24 * 60 * 60 * 1000,
+      maxEntries: 1000,
+    },
+    autoPrune = true,
+    pruneInterval = 60 * 60 * 1000,
+    pruneOptions = {
+      maxAge: 30 * 24 * 60 * 60 * 1000,
+      maxEntries: 10000,
+      maxSizeInBytes: 10 * 1024 * 1024,
+    },
+  } = options;
+
+  if (preload) {
+    await loadCacheFromDB(preloadOptions);
+  }
+
+  let intervalId: number | null = null;
+
+  if (autoPrune) {
+    await pruneCache(pruneOptions);
+
+    intervalId = window.setInterval(async () => {
+      await pruneCache(pruneOptions);
+    }, pruneInterval);
+  }
+
+  return () => {
+    if (intervalId !== null) {
+      clearInterval(intervalId);
+    }
+  };
+};
+
+let cleanupFunction: (() => void) | null = null;
+
+if (typeof window !== 'undefined') {
+  initCache().then((cleanup) => {
+    cleanupFunction = cleanup;
+  });
+
+  window.addEventListener('beforeunload', () => {
+    if (cleanupFunction) {
+      cleanupFunction();
+    }
+  });
+}

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

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './cache';
+export * from './polish';
+export * from './providers';

apps/readest-app/src/services/translators/polish.ts

@@ -0,0 +1,47 @@
+export type Polisher = (text: string) => string;
+
+const languagePolishers: Record<string, Polisher> = {
+  // Chinese - fix punctuation spacing
+  zh: (text: string) =>
+    text
+      .replace(/--/g, '⸺')
+      .replace(/\s+([。、！？])/g, '$1')
+      .replace(/([。、！？])\s+/g, '$1'),
+
+  // Spanish - fix punctuation spacing
+  es: (text: string) =>
+    text.replace(/\?([A-ZÁÉÍÓÚÑÜ])/g, '? $1').replace(/\!([A-ZÁÉÍÓÚÑÜ])/g, '! $1'),
+
+  // French - fix punctuation spacing
+  fr: (text: string) => text.replace(/\s+([!?:;])/g, ' $1').replace(/([!?:;])\s+/g, '$1 '),
+
+  // Japanese - fix punctuation spacing
+  ja: (text: string) => text.replace(/\s+([。、！？])/g, '$1').replace(/([。、！？])\s+/g, '$1'),
+};
+
+export const basicPolish: Polisher = (text: string) => {
+  return text
+    .replace(/\s+/g, ' ') // Multiple spaces to single space
+    .replace(/\s+([.,!?;:])/g, '$1') // Remove space before punctuation
+    .trim();
+};
+
+export function getPolisher(targetLang: string): Polisher {
+  const langCode = targetLang.split('-')[0]!.toLowerCase();
+  const languagePolisher = languagePolishers[langCode];
+
+  if (languagePolisher) {
+    return (text: string) => {
+      const basicPolished = basicPolish(text);
+      const polished = languagePolisher(basicPolished);
+      return polished;
+    };
+  }
+
+  return basicPolish;
+}
+
+export function polish(texts: string[], targetLang: string): string[] {
+  const polisher = getPolisher(targetLang);
+  return texts.map(polisher);
+}

apps/readest-app/src/services/translators/providers/azure.ts

@@ -0,0 +1,102 @@
+import { stubTranslation as _ } from '@/utils/misc';
+import { fetch as tauriFetch } from '@tauri-apps/plugin-http';
+import { isTauriAppPlatform } from '@/services/environment';
+import { TranslationProvider } from '../types';
+import { langToDefaultLocale } from '@/utils/lang';
+
+interface TokenCache {
+  token: string;
+  expiresAt: number;
+}
+
+let tokenCache: TokenCache | null = null;
+
+const getAuthToken = async (): Promise<string> => {
+  const now = Date.now();
+
+  if (tokenCache && tokenCache.expiresAt > now) {
+    return tokenCache.token;
+  }
+
+  try {
+    const fetch = isTauriAppPlatform() ? tauriFetch : window.fetch;
+    const tokenResponse = await fetch('https://edge.microsoft.com/translate/auth', {
+      method: 'GET',
+      headers: {
+        'User-Agent': 'Mozilla/5.0',
+      },
+    });
+
+    if (!tokenResponse.ok) {
+      throw new Error(`Failed to get auth token: ${tokenResponse.status}`);
+    }
+
+    const token = await tokenResponse.text();
+    const expiresAt = now + 8 * 60 * 1000;
+
+    tokenCache = {
+      token,
+      expiresAt,
+    };
+
+    return token;
+  } catch (error) {
+    console.error('Error getting Microsoft translation auth token:', error);
+    throw error;
+  }
+};
+
+export const azureProvider: TranslationProvider = {
+  name: 'azure',
+  label: _('Azure Translator'),
+  translate: async (text: string[], sourceLang: string, targetLang: string): Promise<string[]> => {
+    if (!text.length) return [];
+
+    const results: string[] = [];
+    const msSourceLang = sourceLang ? langToDefaultLocale(sourceLang.toLowerCase()) : '';
+    const msTargetLang = langToDefaultLocale(targetLang.toLowerCase());
+
+    const translationPromises = text.map(async (line, index) => {
+      if (!line?.trim().length) {
+        results[index] = line;
+        return;
+      }
+
+      const url = 'https://api-edge.cognitive.microsofttranslator.com/translate';
+      const params = new URLSearchParams({
+        to: msTargetLang,
+        'api-version': '3.0',
+      });
+      if (msSourceLang && msSourceLang !== 'auto') {
+        params.append('from', msSourceLang);
+      }
+
+      const token = await getAuthToken();
+      const fetch = isTauriAppPlatform() ? tauriFetch : window.fetch;
+      const response = await fetch(`${url}?${params.toString()}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify([{ Text: line }]),
+      });
+
+      if (!response.ok) {
+        throw new Error(`Translation failed with status ${response.status}`);
+      }
+
+      const data = await response.json();
+
+      if (Array.isArray(data) && data.length > 0 && data[0].translations) {
+        results[index] = data[0].translations[0].text || line;
+      } else {
+        results[index] = line;
+      }
+    });
+
+    await Promise.all(translationPromises);
+
+    return results;
+  },
+};

apps/readest-app/src/services/translators/providers/deepl.ts

@@ -0,0 +1,50 @@
+import { getAPIBaseUrl } from '@/services/environment';
+import { stubTranslation as _ } from '@/utils/misc';
+import { TranslationProvider } from '../types';
+
+const DEEPL_API_ENDPOINT = getAPIBaseUrl() + '/deepl/translate';
+
+export const deeplProvider: TranslationProvider = {
+  name: 'deepl',
+  label: _('DeepL'),
+  translate: async (
+    text: string[],
+    sourceLang: string,
+    targetLang: string,
+    token?: string | null,
+    useCache: boolean = false,
+  ): Promise<string[]> => {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+
+    if (token) {
+      headers['Authorization'] = `Bearer ${token}`;
+    }
+
+    const body = JSON.stringify({
+      text: text,
+      source_lang: sourceLang.toUpperCase(),
+      target_lang: targetLang.toUpperCase(),
+      use_cache: useCache,
+    });
+
+    const response = await fetch(DEEPL_API_ENDPOINT, { method: 'POST', headers, body });
+
+    if (!response.ok) {
+      throw new Error(`Translation failed with status ${response.status}`);
+    }
+
+    const data = await response.json();
+    if (!data || !data.translations) {
+      throw new Error('Invalid response from translation service');
+    }
+
+    return text.map((line, i) => {
+      if (!line?.trim().length) {
+        return line;
+      }
+      return data.translations?.[i]?.text || line;
+    });
+  },
+};

apps/readest-app/src/services/translators/providers/google.ts

@@ -0,0 +1,51 @@
+import { stubTranslation as _ } from '@/utils/misc';
+import { fetch as tauriFetch } from '@tauri-apps/plugin-http';
+import { isTauriAppPlatform } from '@/services/environment';
+import { TranslationProvider } from '../types';
+
+export const googleProvider: TranslationProvider = {
+  name: 'google',
+  label: _('Google Translate'),
+  translate: async (text: string[], sourceLang: string, targetLang: string): Promise<string[]> => {
+    if (!text.length) return [];
+
+    const results: string[] = [];
+
+    const translationPromises = text.map(async (line, index) => {
+      if (!line?.trim().length) {
+        results[index] = line;
+        return;
+      }
+
+      const url = new URL('https://translate.googleapis.com/translate_a/single');
+      url.searchParams.append('client', 'gtx');
+      url.searchParams.append('dt', 't');
+      url.searchParams.append('sl', sourceLang.toLowerCase() || 'auto');
+      url.searchParams.append('tl', targetLang.toLowerCase());
+      url.searchParams.append('q', line);
+
+      const fetch = isTauriAppPlatform() ? tauriFetch : window.fetch;
+      const response = await fetch(url.toString());
+
+      if (!response.ok) {
+        throw new Error(`Translation failed with status ${response.status}`);
+      }
+
+      const data = await response.json();
+      if (Array.isArray(data) && Array.isArray(data[0])) {
+        const translatedText = data[0]
+          .filter((segment) => Array.isArray(segment) && segment[0])
+          .map((segment) => segment[0])
+          .join('');
+
+        results[index] = translatedText || line;
+      } else {
+        results[index] = line;
+      }
+    });
+
+    await Promise.all(translationPromises);
+
+    return results;
+  },
+};

apps/readest-app/src/services/translators/providers/index.ts

@@ -0,0 +1,37 @@
+import { TranslationProvider } from '../types';
+import { deeplProvider } from './deepl';
+import { azureProvider } from './azure';
+import { googleProvider } from './google';
+
+function createTranslator<T extends string>(
+  name: T,
+  implementation: TranslationProvider,
+): TranslationProvider & { name: T } {
+  if (name !== implementation.name) {
+    throw Error(
+      `Translator name "${name}" does not match implementation name "${implementation.name}"`,
+    );
+  }
+  return { ...implementation, name };
+}
+
+const deeplTranslator = createTranslator('deepl', deeplProvider);
+const azureTranslator = createTranslator('azure', azureProvider);
+const googleTranslator = createTranslator('google', googleProvider);
+
+const availableTranslators = [
+  deeplTranslator,
+  azureTranslator,
+  googleTranslator,
+  // Add more translators here
+];
+
+export type TranslatorName = (typeof availableTranslators)[number]['name'];
+
+export const getTranslator = (name: TranslatorName): TranslationProvider | undefined => {
+  return availableTranslators.find((translator) => translator.name === name);
+};
+
+export const getTranslators = (): TranslationProvider[] => {
+  return availableTranslators;
+};

apps/readest-app/src/services/translators/types.ts

@@ -0,0 +1,24 @@
+import { TranslatorName } from './providers';
+
+export interface TranslationProvider {
+  name: string;
+  label: string;
+  translate: (
+    texts: string[],
+    sourceLang: string,
+    targetLang: string,
+    token?: string | null,
+    useCache?: boolean,
+  ) => Promise<string[]>;
+}
+
+export interface TranslationCache {
+  [key: string]: string;
+}
+
+export interface UseTranslatorOptions {
+  provider?: TranslatorName;
+  sourceLang?: string;
+  targetLang?: string;
+  enablePolishing?: boolean;
+}

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

@@ -3,14 +3,16 @@ import { TTSClient, TTSMessageEvent, TTSVoice } from './TTSClient';
 import { EdgeSpeechTTS, EdgeTTSPayload } from '@/libs/edgeTTS';
 import { parseSSMLLang, parseSSMLMarks } from '@/utils/ssml';
 import { TTSGranularity } from '@/types/view';
+import { TTSController } from './TTSController';
 import { TTSUtils } from './TTSUtils';
 
 export class EdgeTTSClient implements TTSClient {
+  controller?: TTSController;
   #primaryLang = 'en';
+  #speakingLang = '';
   #rate = 1.0;
   #pitch = 1.0;
   #voice: TTSVoice | null = null;
-  #currentVoiceLang = '';
   #voices: TTSVoice[] = [];
   #edgeTTS: EdgeSpeechTTS;
 
@@ -20,7 +22,8 @@ export class EdgeTTSClient implements TTSClient {
   #startedAt = 0;
   available = true;
 
-  constructor() {
+  constructor(controller?: TTSController) {
+    this.controller = controller;
     this.#edgeTTS = new EdgeSpeechTTS();
   }
 
@@ -45,25 +48,26 @@ export class EdgeTTSClient implements TTSClient {
     return { lang, text, voice: voiceId, rate: this.#rate, pitch: this.#pitch } as EdgeTTSPayload;
   };
 
+  getVoiceIdFromLang = async (lang: string) => {
+    let voiceId = 'en-US-AriaNeural';
+    const preferredVoiceId = TTSUtils.getPreferredVoice('edge-tts', lang);
+    const preferredVoice = this.#voices.find((v) => v.id === preferredVoiceId);
+    this.#voice = preferredVoice ? preferredVoice : (await this.getVoices(lang))[0] || null;
+    if (this.#voice) {
+      voiceId = this.#voice.id;
+    }
+    return voiceId;
+  };
+
   async *speak(
     ssml: string,
     signal: AbortSignal,
     preload = false,
   ): AsyncGenerator<TTSMessageEvent> {
     const { marks } = parseSSMLMarks(ssml);
-    let lang = parseSSMLLang(ssml) || 'en';
-    if (lang === 'en' && this.#primaryLang && this.#primaryLang !== 'en') {
-      lang = this.#primaryLang;
-    }
-    let voiceId = 'en-US-AriaNeural';
-    if (!this.#voice || this.#currentVoiceLang !== lang) {
-      const preferredVoiceId = TTSUtils.getPreferredVoice('edge-tts', lang);
-      const preferredVoice = this.#voices.find((v) => v.id === preferredVoiceId);
-      this.#voice = preferredVoice ? preferredVoice : (await this.getVoices(lang))[0] || null;
-      this.#currentVoiceLang = lang;
-    }
-    if (this.#voice) {
-      voiceId = this.#voice.id;
+    let defaultLang = parseSSMLLang(ssml) || 'en';
+    if (defaultLang === 'en' && this.#primaryLang && this.#primaryLang !== 'en') {
+      defaultLang = this.#primaryLang;
     }
 
     if (preload) {
@@ -71,16 +75,24 @@ export class EdgeTTSClient implements TTSClient {
       const maxImmediate = 2;
       for (let i = 0; i < Math.min(maxImmediate, marks.length); i++) {
         const mark = marks[i]!;
-        await this.#edgeTTS.createAudio(this.getPayload(lang, mark.text, voiceId)).catch((err) => {
-          console.warn('Error preloading mark', i, err);
-        });
+        const { language } = mark;
+        const voiceLang = language || defaultLang;
+        const voiceId = await this.getVoiceIdFromLang(voiceLang);
+        await this.#edgeTTS
+          .createAudio(this.getPayload(voiceLang, mark.text, voiceId))
+          .catch((err) => {
+            console.warn('Error preloading mark', i, err);
+          });
       }
       if (marks.length > maxImmediate) {
         (async () => {
           for (let i = maxImmediate; i < marks.length; i++) {
             const mark = marks[i]!;
             try {
-              await this.#edgeTTS.createAudio(this.getPayload(lang, mark.text, voiceId));
+              const { language } = mark;
+              const voiceLang = language || defaultLang;
+              const voiceId = await this.getVoiceIdFromLang(voiceLang);
+              await this.#edgeTTS.createAudio(this.getPayload(voiceLang, mark.text, voiceId));
             } catch (err) {
               console.warn('Error preloading mark (bg)', i, err);
             }
@@ -107,13 +119,21 @@ export class EdgeTTSClient implements TTSClient {
         break;
       }
       try {
-        const blob = await this.#edgeTTS.createAudio(this.getPayload(lang, mark.text, voiceId));
+        const { language } = mark;
+        const voiceLang = language || defaultLang;
+        const voiceId = await this.getVoiceIdFromLang(voiceLang);
+        this.#speakingLang = voiceLang;
+        const blob = await this.#edgeTTS.createAudio(
+          this.getPayload(voiceLang, mark.text, voiceId),
+        );
         const url = URL.createObjectURL(blob);
         this.#audioElement = new Audio(url);
         const audio = this.#audioElement;
         audio.setAttribute('x-webkit-airplay', 'deny');
         audio.preload = 'auto';
 
+        this.controller?.dispatchSpeakMark(mark);
+
         yield {
           code: 'boundary',
           message: `Start chunk: ${mark.name}`,
@@ -240,9 +260,6 @@ export class EdgeTTSClient implements TTSClient {
   }
 
   async getVoices(lang: string): Promise<TTSVoice[]> {
-    if (this.#currentVoiceLang) {
-      lang = this.#currentVoiceLang;
-    }
     const locale = lang === 'en' ? getUserLocale(lang) || lang : lang;
     const voices = await this.getAllVoices();
     return voices
@@ -276,4 +293,8 @@ export class EdgeTTSClient implements TTSClient {
   getVoiceId(): string {
     return this.#voice?.id || '';
   }
+
+  getSpeakingLang(): string {
+    return this.#speakingLang;
+  }
 }

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

@@ -29,4 +29,5 @@ export interface TTSClient {
   getVoices(lang: string): Promise<TTSVoice[]>;
   getGranularities(): TTSGranularity[];
   getVoiceId(): string;
+  getSpeakingLang(): string;
 }

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

@@ -1,8 +1,10 @@
 import { FoliateView, TTSGranularity } from '@/types/view';
 import { TTSClient, TTSMessageCode, TTSVoice } from './TTSClient';
+import { parseSSMLMarks } from '@/utils/ssml';
 import { WebSpeechClient } from './WebSpeechClient';
 import { EdgeTTSClient } from './EdgeTTSClient';
 import { TTSUtils } from './TTSUtils';
+import { TTSMark } from './types';
 
 type TTSState =
   | 'stopped'
@@ -30,8 +32,8 @@ export class TTSController extends EventTarget {
 
   constructor(view: FoliateView) {
     super();
-    this.ttsWebClient = new WebSpeechClient();
-    this.ttsEdgeClient = new EdgeTTSClient();
+    this.ttsWebClient = new WebSpeechClient(this);
+    this.ttsEdgeClient = new EdgeTTSClient(this);
     this.ttsClient = this.ttsWebClient;
     this.view = view;
   }
@@ -81,9 +83,12 @@ export class TTSController extends EventTarget {
   #preprocessSSML(ssml?: string) {
     if (!ssml) return;
     ssml = ssml
+      .replace(/<emphasis[^>]*>([^<]+)<\/emphasis>/g, '$1')
       .replace(/[–—]/g, ',')
-      .replace(/\.{3,}/g, '<break time="400ms"/>')
-      .replace(/·/g, '<break time="200ms"/>');
+      .replace('<break/>', ' ')
+      .replace(/\.{3,}/g, '   ')
+      .replace(/……/g, '  ')
+      .replace(/·/g, ' ');
 
     return ssml;
   }
@@ -104,7 +109,7 @@ export class TTSController extends EventTarget {
           // FIXME: in case we are at the end of the book, need a better way to handle this
           if (this.#nossmlCnt < 10 && this.state === 'playing') {
             resolve();
-            await this.view.next(1);
+            await this.view.next();
             await this.forward();
           }
           return;
@@ -112,6 +117,11 @@ export class TTSController extends EventTarget {
           this.#nossmlCnt = 0;
         }
 
+        const { plainText, marks } = parseSSMLMarks(ssml);
+        if (!plainText || marks.length === 0) {
+          resolve();
+          return await this.forward();
+        }
         const iter = await this.ttsClient.speak(ssml, signal);
         let lastCode: TTSMessageCode = 'boundary';
         for await (const { code, mark } of iter) {
@@ -120,7 +130,8 @@ export class TTSController extends EventTarget {
             return;
           }
           if (mark && this.state === 'playing') {
-            this.view.tts?.setMark(mark);
+            const range = this.view.tts?.setMark(mark);
+            this.dispatchEvent(new CustomEvent('tts-highlight-mark', { detail: range }));
           }
           lastCode = code;
         }
@@ -239,7 +250,7 @@ export class TTSController extends EventTarget {
     return [...ttsEdgeVoices, ...ttsWebVoices];
   }
 
-  async setVoice(voiceId: string) {
+  async setVoice(voiceId: string, lang: string) {
     this.state = 'setvoice-paused';
     const useEdgeTTS = !!this.ttsEdgeVoices.find(
       (voice) => (voiceId === '' || voice.id === voiceId) && !voice.disabled,
@@ -247,11 +258,11 @@ export class TTSController extends EventTarget {
     if (useEdgeTTS) {
       this.ttsClient = this.ttsEdgeClient;
       await this.ttsClient.setRate(this.ttsRate);
-      TTSUtils.setPreferredVoice('edge-tts', this.ttsLang, voiceId);
+      TTSUtils.setPreferredVoice('edge-tts', lang, voiceId);
     } else {
       this.ttsClient = this.ttsWebClient;
       await this.ttsClient.setRate(this.ttsRate);
-      TTSUtils.setPreferredVoice('web-speech', this.ttsLang, voiceId);
+      TTSUtils.setPreferredVoice('web-speech', lang, voiceId);
     }
     await this.ttsClient.setVoice(voiceId);
   }
@@ -260,6 +271,14 @@ export class TTSController extends EventTarget {
     return this.ttsClient.getVoiceId();
   }
 
+  getSpeakingLang() {
+    return this.ttsClient.getSpeakingLang();
+  }
+
+  dispatchSpeakMark(mark: TTSMark) {
+    this.dispatchEvent(new CustomEvent('tts-speak-mark', { detail: mark }));
+  }
+
   error(e: unknown) {
     console.error(e);
     this.state = 'stopped';

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

@@ -1,10 +1,10 @@
 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 { parseSSMLLang, parseSSMLMarks } from '@/utils/ssml';
 import { TTSGranularity } from '@/types/view';
+import { TTSController } from './TTSController';
 import { TTSUtils } from './TTSUtils';
+import { TTSMark } from './types';
 
 const BLACKLISTED_VOICES = [
   'Albert',
@@ -46,105 +46,34 @@ interface TTSBoundaryEvent {
   error?: string;
 }
 
-async function* speakWithBoundary(
-  ssml: string,
-  getRate: () => number,
-  getPitch: () => number,
-  getVoice: () => SpeechSynthesisVoice | null,
-) {
-  const lang = parseSSMLLang(ssml);
-  const { plainText, marks } = parseSSMLMarks(ssml);
-  // console.log('ssml', ssml, marks);
-  // console.log('text', plainText);
-
-  const synth = window.speechSynthesis;
-  const utterance = new SpeechSynthesisUtterance(plainText);
-
-  utterance.rate = getRate();
-  utterance.pitch = getPitch();
-  const voice = getVoice();
-  if (voice) {
-    utterance.voice = voice;
-  }
-  if (lang) {
-    utterance.lang = lang;
-  }
-
-  const queue = new AsyncQueue<TTSBoundaryEvent>();
-
-  utterance.onboundary = (event: SpeechSynthesisEvent) => {
-    utterance.rate = getRate();
-    utterance.pitch = getPitch();
-    const voice = getVoice();
-    if (voice) {
-      utterance.voice = voice;
-    }
-    const mark = findSSMLMark(event.charIndex, marks);
-    // console.log('boundary', event.charIndex, mark);
-    queue.enqueue({
-      type: 'boundary',
-      speaking: true,
-      name: event.name,
-      mark: mark?.name ?? '',
-      charIndex: event.charIndex,
-      charLength: event.charLength,
-    });
-  };
-
-  utterance.onend = () => {
-    queue.enqueue({ type: 'end', speaking: false });
-    queue.finish();
-  };
-
-  utterance.onerror = (event) => {
-    queue.enqueue({ type: 'error', speaking: false, error: event.error });
-    queue.finish();
-  };
-
-  synth.speak(utterance);
-
-  while (true) {
-    const ev = await queue.dequeue();
-    if (ev === null) {
-      break;
-    }
-    yield ev;
-  }
-}
-
 async function* speakWithMarks(
   ssml: string,
+  defaultLang: string,
   getRate: () => number,
   getPitch: () => number,
-  getVoice: () => SpeechSynthesisVoice | null,
+  getVoice: (lang: string) => Promise<SpeechSynthesisVoice | null>,
+  setSpeakingLang: (lang: string) => void,
+  dispatchSpeakMark: (mark: TTSMark) => void,
 ) {
-  const { plainText, marks } = parseSSMLMarks(ssml);
-  const lang = parseSSMLLang(ssml);
-
-  const isCJK = (lang: string | null) => {
-    const cjkLangs = ['zh', 'ja', 'kr'];
-    if (lang && cjkLangs.some((cjk) => lang.startsWith(cjk))) return true;
-    return isCJKStr(plainText);
-  };
-
-  if (!isCJK(lang)) {
-    yield* speakWithBoundary(ssml, getRate, getPitch, getVoice);
-    return;
-  }
+  const { marks } = parseSSMLMarks(ssml);
 
   const synth = window.speechSynthesis;
 
   const utterance = new SpeechSynthesisUtterance();
   for (const mark of marks) {
+    const { language } = mark;
+    const voiceLang = language || defaultLang;
+    setSpeakingLang(voiceLang);
+    dispatchSpeakMark(mark);
     utterance.text = mark.text;
     utterance.rate = getRate();
     utterance.pitch = getPitch();
-    const voice = getVoice();
+    const voice = await getVoice(voiceLang);
     if (voice) {
       utterance.voice = voice;
     }
-    if (lang) {
-      utterance.lang = lang;
+    if (voiceLang) {
+      utterance.lang = voiceLang;
     }
 
     yield {
@@ -174,15 +103,20 @@ async function* speakWithMarks(
 }
 
 export class WebSpeechClient implements TTSClient {
+  controller?: TTSController;
   #primaryLang = 'en';
+  #speakingLang = '';
   #rate = 1.0;
   #pitch = 1.0;
   #voice: SpeechSynthesisVoice | null = null;
-  #currentVoiceLang = '';
   #voices: SpeechSynthesisVoice[] = [];
   #synth = window.speechSynthesis;
   available = true;
 
+  constructor(controller?: TTSController) {
+    this.controller = controller;
+  }
+
   async init() {
     if (!this.#synth) {
       this.available = false;
@@ -209,6 +143,18 @@ export class WebSpeechClient implements TTSClient {
     return this.available;
   }
 
+  getVoiceFromLang = async (lang: string) => {
+    const preferredVoiceId = TTSUtils.getPreferredVoice('web-speech', lang);
+    const preferredVoice = this.#voices.find((v) => v.voiceURI === preferredVoiceId);
+    if (preferredVoice) {
+      this.#voice = preferredVoice;
+    } else {
+      const voiceId = (await this.getVoices(lang))[0]?.id ?? '';
+      this.#voice = this.#voices.find((v) => v.voiceURI === voiceId) || null;
+    }
+    return this.#voice;
+  };
+
   async *speak(
     ssml: string,
     signal: AbortSignal,
@@ -217,24 +163,19 @@ export class WebSpeechClient implements TTSClient {
     // no need to preload for web speech
     if (preload) return;
 
-    let lang = parseSSMLLang(ssml) || 'en';
-    if (lang === 'en' && this.#primaryLang && this.#primaryLang !== 'en') {
-      lang = this.#primaryLang;
-    }
-    if (!this.#voice || this.#currentVoiceLang !== lang) {
-      const preferredVoiceId = TTSUtils.getPreferredVoice('web-speech', lang);
-      const preferredVoice = this.#voices.find((v) => v.voiceURI === preferredVoiceId);
-      const voiceId = (await this.getVoices(lang))[0]?.id ?? '';
-      this.#voice = preferredVoice
-        ? preferredVoice
-        : this.#voices.find((v) => v.voiceURI === voiceId) || null;
-      this.#currentVoiceLang = lang;
+    let defaultLang = parseSSMLLang(ssml) || 'en';
+    if (defaultLang === 'en' && this.#primaryLang && this.#primaryLang !== 'en') {
+      defaultLang = this.#primaryLang;
     }
+
     for await (const ev of speakWithMarks(
       ssml,
+      defaultLang,
       () => this.#rate,
       () => this.#pitch,
-      () => this.#voice,
+      this.getVoiceFromLang,
+      (lang) => (this.#speakingLang = lang),
+      (mark) => this.controller?.dispatchSpeakMark(mark),
     )) {
       if (signal.aborted) {
         console.log('TTS aborted');
@@ -301,9 +242,6 @@ export class WebSpeechClient implements TTSClient {
   }
 
   async getVoices(lang: string) {
-    if (this.#currentVoiceLang) {
-      lang = this.#currentVoiceLang;
-    }
     const locale = lang === 'en' ? getUserLocale(lang) || lang : lang;
     const isValidVoice = (id: string) => {
       return !id.includes('com.apple') || id.includes('com.apple.voice.compact');
@@ -351,4 +289,8 @@ export class WebSpeechClient implements TTSClient {
   getVoiceId(): string {
     return this.#voice?.voiceURI ?? '';
   }
+
+  getSpeakingLang(): string {
+    return this.#speakingLang;
+  }
 }