release: version 0.9.19 (#508 )

feat: customize foliate view styles with css, closes #167 (#507 )
compat: handle epub files without dc metadata, closes #490 (#506 )
2025-03-06 17:30:48 +01:00 · 2025-03-06 17:22:01 +01:00 · 2025-03-06 16:44:07 +01:00 · 2025-03-06 16:23:58 +01:00 · 2025-03-06 15:38:29 +01:00 · 2025-03-06 13:56:43 +01:00
101 changed files with 1964 additions and 380 deletions
@@ -94,10 +94,9 @@ Stay tuned for continuous improvements and updates! Contributions and suggestion

 The Readest app is available for download! 🥳 🚀

- macOS : Search for "Readest" on the [macOS App Store][link-macos-appstore].
- Windows / Linux: Visit [https://readest.com][link-website] or the [Releases on GitHub][link-gh-releases].
+- macOS / iOS / iPadOS : Search for "Readest" on the [App Store][link-appstore], also available on TestFlight for beta test (send your Apple ID to readestapp@gmail.com to request access).
+- Windows / Linux / Android: Visit [https://readest.com][link-website] or the [Releases on GitHub][link-gh-releases].
 - Web: Visit [https://web.readest.com][link-web-readest].
- iOS / Android: coming soon 👀

 ## Requirements

@@ -149,8 +148,9 @@ For Windows targets, “Build Tools for Visual Studio 2022” (or a higher editi
 ### 4. Build for Development

 ```bash
+# Start development for the Tauri app
 pnpm tauri dev
-# or start development for the Web version only
+# or start development for the Web app
 pnpm dev-web
 ```

@@ -241,7 +241,7 @@ The following fonts are utilized in this software, either bundled within the app
 [badge-commit-activity]: https://img.shields.io/github/commit-activity/m/readest/readest
 [badge-discord]: https://img.shields.io/discord/1314226120886976544?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
 [badge-hellogithub]: https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=8a5b6ade2aee461a8bd94e59200682a7&claim_uid=eRLUbPOy2qZtDgw&theme=small
-[link-macos-appstore]: https://apps.apple.com/app/apple-store/id6738622779?pt=127463130&ct=github&mt=8
+[link-appstore]: https://apps.apple.com/app/apple-store/id6738622779?pt=127463130&ct=github&mt=8
 [link-website]: https://readest.com?utm_source=github&utm_medium=referral&utm_campaign=readme
 [link-web-readest]: https://web.readest.com
 [link-gh-releases]: https://github.com/readest/readest/releases
@@ -4,6 +4,8 @@ NEXT_PUBLIC_POSTHOG_HOST=YOUR_POSTHOG_HOST
 NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
 NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY

+SUPABASE_ADMIN_KEY=YOUR_SUPABASE_ADMIN_KEY
+
 DEEPL_PRO_API_KEYS=YOUR_DEEPL_PRO_API_KEYS
 DEEPL_FREE_API_KEYS=YOUR_DEEPL_FREE_API_KEYS

@@ -1,6 +1,6 @@
 {
  "name": "@readest/readest-app",
-  "version": "0.9.17",
+  "version": "0.9.19",
  "private": true,
  "scripts": {
    "dev": "dotenv -e .env.tauri -- next dev",
@@ -198,5 +198,37 @@
  "Verify token": "التحقق من الرمز",
  "Sign in with Google": "تسجيل الدخول عبر Google",
  "Sign in with Apple": "تسجيل الدخول عبر Apple",
-  "Sign in with GitHub": "تسجيل الدخول عبر GitHub"
+  "Sign in with GitHub": "تسجيل الدخول عبر GitHub",
+  "Account": "الحساب",
+  "Cloud Storage": "التخزين السحابي",
+  "Failed to delete user. Please try again later.": "فشل حذف المستخدم. يرجى المحاولة مرة أخرى لاحقًا.",
+  "Unlimited Offline/Online Reading": "قراءة غير محدودة بدون اتصال/متصلة بالإنترنت",
+  "Unlimited Cloud Sync Devices": "أجهزة مزامنة سحابية غير محدودة",
+  "Essential Text-to-Speech Voices": "أصوات أساسية لتحويل النص إلى كلام",
+  "DeepL Free Access": "وصول مجاني إلى DeepL",
+  "Community Support": "دعم المجتمع",
+  "500 MB Cloud Sync Space": "مساحة مزامنة سحابية 500 ميجابايت",
+  "Includes All Free Tier Benefits": "يتضمن جميع مزايا الفئة المجانية",
+  "AI Summaries": "ملخصات الذكاء الاصطناعي",
+  "AI Translations": "ترجمات الذكاء الاصطناعي",
+  "Priority Support": "دعم ذو أولوية",
+  "DeepL Pro Access": "وصول إلى DeepL Pro",
+  "Expanded Text-to-Speech Voices": "أصوات موسعة لتحويل النص إلى كلام",
+  "2000 MB Cloud Sync Space": "مساحة مزامنة سحابية 2000 ميجابايت",
+  "Includes All Plus Tier Benefits": "يتضمن جميع مزايا فئة Plus",
+  "Unlimited AI Summaries": "ملخصات ذكاء اصطناعي غير محدودة",
+  "Unlimited AI Translations": "ترجمات ذكاء اصطناعي غير محدودة",
+  "Unlimited DeepL Pro Access": "وصول غير محدود إلى DeepL Pro",
+  "Advanced AI Tools": "أدوات ذكاء اصطناعي متقدمة",
+  "Early Feature Access": "وصول مبكر للميزات",
+  "10 GB Cloud Sync Space": "مساحة مزامنة سحابية 10 جيجابايت",
+  "Loading profile...": "جارٍ تحميل الملف الشخصي...",
+  "Features": "الميزات",
+  "Delete Account": "حذف الحساب",
+  "Delete Your Account?": "حذف حسابك؟",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "لا يمكن التراجع عن هذا الإجراء. سيتم حذف جميع بياناتك في السحابة بشكل دائم.",
+  "Delete Permanently": "حذف نهائي",
+  "Free Tier": "الفئة المجانية",
+  "Plus Tier": "فئة Plus",
+  "Pro Tier": "فئة Pro"
 }
@@ -198,5 +198,37 @@
  "Verify token": "Token überprüfen",
  "Sign in with Google": "Mit Google anmelden",
  "Sign in with Apple": "Mit Apple anmelden",
-  "Sign in with GitHub": "Mit GitHub anmelden"
+  "Sign in with GitHub": "Mit GitHub anmelden",
+  "Account": "Konto",
+  "Cloud Storage": "Cloud-Speicher",
+  "Failed to delete user. Please try again later.": "Benutzer konnte nicht gelöscht werden. Bitte versuchen Sie es später erneut.",
+  "Unlimited Offline/Online Reading": "Unbegrenztes Offline/Online Lesen",
+  "Unlimited Cloud Sync Devices": "Unbegrenzte Cloud-Synchronisierungsgeräte",
+  "Essential Text-to-Speech Voices": "Grundlegende Text-zu-Sprache-Stimmen",
+  "DeepL Free Access": "Kostenloser DeepL-Zugang",
+  "Community Support": "Community-Support",
+  "500 MB Cloud Sync Space": "500 MB Cloud-Synchronisierungsspeicher",
+  "Includes All Free Tier Benefits": "Beinhaltet alle Vorteile der kostenlosen Stufe",
+  "AI Summaries": "KI-Zusammenfassungen",
+  "AI Translations": "KI-Übersetzungen",
+  "Priority Support": "Bevorzugter Support",
+  "DeepL Pro Access": "DeepL Pro-Zugang",
+  "Expanded Text-to-Speech Voices": "Erweiterte Text-zu-Sprache-Stimmen",
+  "2000 MB Cloud Sync Space": "2000 MB Cloud-Synchronisierungsspeicher",
+  "Includes All Plus Tier Benefits": "Beinhaltet alle Vorteile der Plus-Stufe",
+  "Unlimited AI Summaries": "Unbegrenzte KI-Zusammenfassungen",
+  "Unlimited AI Translations": "Unbegrenzte KI-Übersetzungen",
+  "Unlimited DeepL Pro Access": "Unbegrenzter DeepL Pro-Zugang",
+  "Advanced AI Tools": "Fortgeschrittene KI-Tools",
+  "Early Feature Access": "Früher Zugang zu neuen Funktionen",
+  "10 GB Cloud Sync Space": "10 GB Cloud-Synchronisierungsspeicher",
+  "Loading profile...": "Profil wird geladen...",
+  "Features": "Funktionen",
+  "Delete Account": "Konto löschen",
+  "Delete Your Account?": "Ihr Konto löschen?",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "Diese Aktion kann nicht rückgängig gemacht werden. Alle Ihre Daten in der Cloud werden dauerhaft gelöscht.",
+  "Delete Permanently": "Dauerhaft löschen",
+  "Free Tier": "Kostenlose Stufe",
+  "Plus Tier": "Plus-Stufe",
+  "Pro Tier": "Pro-Stufe"
 }
@@ -198,5 +198,37 @@
  "Verify token": "Επαλήθευση κωδικού",
  "Sign in with Google": "Σύνδεση με Google",
  "Sign in with Apple": "Σύνδεση με Apple",
-  "Sign in with GitHub": "Σύνδεση με GitHub"
+  "Sign in with GitHub": "Σύνδεση με GitHub",
+  "Account": "Λογαριασμός",
+  "Cloud Storage": "Αποθηκευτικός χώρος Cloud",
+  "Failed to delete user. Please try again later.": "Αποτυχία διαγραφής χρήστη. Παρακαλώ δοκιμάστε ξανά αργότερα.",
+  "Unlimited Offline/Online Reading": "Απεριόριστη ανάγνωση εκτός/εντός σύνδεσης",
+  "Unlimited Cloud Sync Devices": "Απεριόριστες συσκευές συγχρονισμού Cloud",
+  "Essential Text-to-Speech Voices": "Βασικές φωνές μετατροπής κειμένου σε ομιλία",
+  "DeepL Free Access": "Δωρεάν πρόσβαση DeepL",
+  "Community Support": "Υποστήριξη κοινότητας",
+  "500 MB Cloud Sync Space": "500 MB χώρος συγχρονισμού Cloud",
+  "Includes All Free Tier Benefits": "Περιλαμβάνει όλα τα οφέλη της δωρεάν βαθμίδας",
+  "AI Summaries": "Περιλήψεις AI",
+  "AI Translations": "Μεταφράσεις AI",
+  "Priority Support": "Υποστήριξη προτεραιότητας",
+  "DeepL Pro Access": "Πρόσβαση DeepL Pro",
+  "Expanded Text-to-Speech Voices": "Διευρυμένες φωνές μετατροπής κειμένου σε ομιλία",
+  "2000 MB Cloud Sync Space": "2000 MB χώρος συγχρονισμού Cloud",
+  "Includes All Plus Tier Benefits": "Περιλαμβάνει όλα τα οφέλη της βαθμίδας Plus",
+  "Unlimited AI Summaries": "Απεριόριστες περιλήψεις AI",
+  "Unlimited AI Translations": "Απεριόριστες μεταφράσεις AI",
+  "Unlimited DeepL Pro Access": "Απεριόριστη πρόσβαση DeepL Pro",
+  "Advanced AI Tools": "Προηγμένα εργαλεία AI",
+  "Early Feature Access": "Πρώιμη πρόσβαση σε λειτουργίες",
+  "10 GB Cloud Sync Space": "10 GB χώρος συγχρονισμού Cloud",
+  "Loading profile...": "Φόρτωση προφίλ...",
+  "Features": "Χαρακτηριστικά",
+  "Delete Account": "Διαγραφή λογαριασμού",
+  "Delete Your Account?": "Διαγραφή του λογαριασμού σας;",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "Αυτή η ενέργεια δεν μπορεί να αναιρεθεί. Όλα τα δεδομένα σας στο cloud θα διαγραφούν μόνιμα.",
+  "Delete Permanently": "Μόνιμη διαγραφή",
+  "Free Tier": "Δωρεάν βαθμίδα",
+  "Plus Tier": "Βαθμίδα Plus",
+  "Pro Tier": "Βαθμίδα Pro"
 }
@@ -198,5 +198,37 @@
  "Verify token": "Verificar código",
  "Sign in with Google": "Iniciar sesión con Google",
  "Sign in with Apple": "Iniciar sesión con Apple",
-  "Sign in with GitHub": "Iniciar sesión con GitHub"
+  "Sign in with GitHub": "Iniciar sesión con GitHub",
+  "Account": "Cuenta",
+  "Cloud Storage": "Almacenamiento en la nube",
+  "Failed to delete user. Please try again later.": "Error al eliminar usuario. Por favor, inténtelo de nuevo más tarde.",
+  "Unlimited Offline/Online Reading": "Lectura sin límites en línea/sin conexión",
+  "Unlimited Cloud Sync Devices": "Sincronización ilimitada de dispositivos en la nube",
+  "Essential Text-to-Speech Voices": "Voces esenciales de texto a voz",
+  "DeepL Free Access": "Acceso gratuito a DeepL",
+  "Community Support": "Soporte comunitario",
+  "500 MB Cloud Sync Space": "500 MB de espacio de sincronización en la nube",
+  "Includes All Free Tier Benefits": "Incluye todos los beneficios del nivel gratuito",
+  "AI Summaries": "Resúmenes con IA",
+  "AI Translations": "Traducciones con IA",
+  "Priority Support": "Soporte prioritario",
+  "DeepL Pro Access": "Acceso a DeepL Pro",
+  "Expanded Text-to-Speech Voices": "Voces ampliadas de texto a voz",
+  "2000 MB Cloud Sync Space": "2000 MB de espacio de sincronización en la nube",
+  "Includes All Plus Tier Benefits": "Incluye todos los beneficios del nivel Plus",
+  "Unlimited AI Summaries": "Resúmenes ilimitados con IA",
+  "Unlimited AI Translations": "Traducciones ilimitadas con IA",
+  "Unlimited DeepL Pro Access": "Acceso ilimitado a DeepL Pro",
+  "Advanced AI Tools": "Herramientas avanzadas de IA",
+  "Early Feature Access": "Acceso anticipado a funciones",
+  "10 GB Cloud Sync Space": "10 GB de espacio de sincronización en la nube",
+  "Loading profile...": "Cargando perfil...",
+  "Features": "Características",
+  "Delete Account": "Eliminar cuenta",
+  "Delete Your Account?": "¿Eliminar tu cuenta?",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "Esta acción no se puede deshacer. Todos tus datos en la nube se eliminarán permanentemente.",
+  "Delete Permanently": "Eliminar permanentemente",
+  "Free Tier": "Nivel gratuito",
+  "Plus Tier": "Nivel Plus",
+  "Pro Tier": "Nivel Pro"
 }
@@ -198,5 +198,37 @@
  "Verify token": "Vérifier le code",
  "Sign in with Google": "Se connecter avec Google",
  "Sign in with Apple": "Se connecter avec Apple",
-  "Sign in with GitHub": "Se connecter avec GitHub"
+  "Sign in with GitHub": "Se connecter avec GitHub",
+  "Account": "Compte",
+  "Cloud Storage": "Stockage cloud",
+  "Failed to delete user. Please try again later.": "Échec de la suppression de l'utilisateur. Veuillez réessayer plus tard.",
+  "Unlimited Offline/Online Reading": "Lecture illimitée hors ligne/en ligne",
+  "Unlimited Cloud Sync Devices": "Synchronisation cloud sur appareils illimitée",
+  "Essential Text-to-Speech Voices": "Voix de synthèse vocale essentielles",
+  "DeepL Free Access": "Accès gratuit à DeepL",
+  "Community Support": "Support communautaire",
+  "500 MB Cloud Sync Space": "500 Mo d'espace de synchronisation cloud",
+  "Includes All Free Tier Benefits": "Inclut tous les avantages du niveau gratuit",
+  "AI Summaries": "Résumés par IA",
+  "AI Translations": "Traductions par IA",
+  "Priority Support": "Support prioritaire",
+  "DeepL Pro Access": "Accès à DeepL Pro",
+  "Expanded Text-to-Speech Voices": "Voix de synthèse vocale étendues",
+  "2000 MB Cloud Sync Space": "2000 Mo d'espace de synchronisation cloud",
+  "Includes All Plus Tier Benefits": "Inclut tous les avantages du niveau Plus",
+  "Unlimited AI Summaries": "Résumés par IA illimités",
+  "Unlimited AI Translations": "Traductions par IA illimitées",
+  "Unlimited DeepL Pro Access": "Accès illimité à DeepL Pro",
+  "Advanced AI Tools": "Outils IA avancés",
+  "Early Feature Access": "Accès anticipé aux fonctionnalités",
+  "10 GB Cloud Sync Space": "10 Go d'espace de synchronisation cloud",
+  "Loading profile...": "Chargement du profil...",
+  "Features": "Fonctionnalités",
+  "Delete Account": "Supprimer le compte",
+  "Delete Your Account?": "Supprimer votre compte ?",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "Cette action est irréversible. Toutes vos données dans le cloud seront définitivement supprimées.",
+  "Delete Permanently": "Supprimer définitivement",
+  "Free Tier": "Niveau gratuit",
+  "Plus Tier": "Niveau Plus",
+  "Pro Tier": "Niveau Pro"
 }
@@ -198,5 +198,37 @@
  "Verify token": "टोकन सत्यापित करें",
  "Sign in with Google": "Google के साथ साइन इन करें",
  "Sign in with Apple": "Apple के साथ साइन इन करें",
-  "Sign in with GitHub": "GitHub के साथ साइन इन करें"
+  "Sign in with GitHub": "GitHub के साथ साइन इन करें",
+  "Account": "खाता",
+  "Cloud Storage": "क्लाउड स्टोरेज",
+  "Failed to delete user. Please try again later.": "उपयोगकर्ता को हटाने में विफल। कृपया बाद में पुनः प्रयास करें।",
+  "Unlimited Offline/Online Reading": "असीमित ऑफलाइन/ऑनलाइन पढ़ना",
+  "Unlimited Cloud Sync Devices": "असीमित क्लाउड सिंक उपकरण",
+  "Essential Text-to-Speech Voices": "आवश्यक टेक्स्ट-टू-स्पीच आवाज़ें",
+  "DeepL Free Access": "DeepL मुफ्त पहुंच",
+  "Community Support": "सामुदायिक सहायता",
+  "500 MB Cloud Sync Space": "500 MB क्लाउड सिंक स्पेस",
+  "Includes All Free Tier Benefits": "सभी फ्री टियर लाभ शामिल हैं",
+  "AI Summaries": "AI सारांश",
+  "AI Translations": "AI अनुवाद",
+  "Priority Support": "प्राथमिकता सहायता",
+  "DeepL Pro Access": "DeepL प्रो पहुंच",
+  "Expanded Text-to-Speech Voices": "विस्तारित टेक्स्ट-टू-स्पीच आवाज़ें",
+  "2000 MB Cloud Sync Space": "2000 MB क्लाउड सिंक स्पेस",
+  "Includes All Plus Tier Benefits": "सभी प्लस टियर लाभ शामिल हैं",
+  "Unlimited AI Summaries": "असीमित AI सारांश",
+  "Unlimited AI Translations": "असीमित AI अनुवाद",
+  "Unlimited DeepL Pro Access": "असीमित DeepL प्रो पहुंच",
+  "Advanced AI Tools": "उन्नत AI टूल्स",
+  "Early Feature Access": "प्रारंभिक फीचर पहुंच",
+  "10 GB Cloud Sync Space": "10 GB क्लाउड सिंक स्पेस",
+  "Loading profile...": "प्रोफ़ाइल लोड हो रहा है...",
+  "Features": "विशेषताएं",
+  "Delete Account": "खाता हटाएं",
+  "Delete Your Account?": "अपना खाता हटाएं?",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "यह क्रिया पूर्ववत नहीं की जा सकती। क्लाउड में आपका सभी डेटा स्थायी रूप से हटा दिया जाएगा।",
+  "Delete Permanently": "स्थायी रूप से हटाएं",
+  "Free Tier": "फ्री टियर",
+  "Plus Tier": "प्लस टियर",
+  "Pro Tier": "प्रो टियर"
 }
@@ -198,5 +198,37 @@
  "Verify token": "Verifikasi token",
  "Sign in with Google": "Masuk dengan Google",
  "Sign in with Apple": "Masuk dengan Apple",
-  "Sign in with GitHub": "Masuk dengan GitHub"
+  "Sign in with GitHub": "Masuk dengan GitHub",
+  "Account": "Akun",
+  "Cloud Storage": "Penyimpanan Cloud",
+  "Failed to delete user. Please try again later.": "Gagal menghapus pengguna. Silakan coba lagi nanti.",
+  "Unlimited Offline/Online Reading": "Membaca Offline/Online Tanpa Batas",
+  "Unlimited Cloud Sync Devices": "Perangkat Sinkronisasi Cloud Tanpa Batas",
+  "Essential Text-to-Speech Voices": "Suara Text-to-Speech Esensial",
+  "DeepL Free Access": "Akses DeepL Gratis",
+  "Community Support": "Dukungan Komunitas",
+  "500 MB Cloud Sync Space": "Ruang Sinkronisasi Cloud 500 MB",
+  "Includes All Free Tier Benefits": "Termasuk Semua Manfaat Tingkat Gratis",
+  "AI Summaries": "Ringkasan AI",
+  "AI Translations": "Terjemahan AI",
+  "Priority Support": "Dukungan Prioritas",
+  "DeepL Pro Access": "Akses DeepL Pro",
+  "Expanded Text-to-Speech Voices": "Suara Text-to-Speech yang Diperluas",
+  "2000 MB Cloud Sync Space": "Ruang Sinkronisasi Cloud 2000 MB",
+  "Includes All Plus Tier Benefits": "Termasuk Semua Manfaat Tingkat Plus",
+  "Unlimited AI Summaries": "Ringkasan AI Tanpa Batas",
+  "Unlimited AI Translations": "Terjemahan AI Tanpa Batas",
+  "Unlimited DeepL Pro Access": "Akses DeepL Pro Tanpa Batas",
+  "Advanced AI Tools": "Alat AI Lanjutan",
+  "Early Feature Access": "Akses Fitur Awal",
+  "10 GB Cloud Sync Space": "Ruang Sinkronisasi Cloud 10 GB",
+  "Loading profile...": "Memuat profil...",
+  "Features": "Fitur",
+  "Delete Account": "Hapus Akun",
+  "Delete Your Account?": "Hapus Akun Anda?",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "Tindakan ini tidak dapat dibatalkan. Semua data Anda di cloud akan dihapus secara permanen.",
+  "Delete Permanently": "Hapus Secara Permanen",
+  "Free Tier": "Tingkat Gratis",
+  "Plus Tier": "Tingkat Plus",
+  "Pro Tier": "Tingkat Pro"
 }
@@ -198,5 +198,37 @@
  "Verify token": "Verifica token",
  "Sign in with Google": "Accedi con Google",
  "Sign in with Apple": "Accedi con Apple",
-  "Sign in with GitHub": "Accedi con GitHub"
+  "Sign in with GitHub": "Accedi con GitHub",
+  "Account": "Account",
+  "Cloud Storage": "Archiviazione Cloud",
+  "Failed to delete user. Please try again later.": "Impossibile eliminare l'utente. Riprova più tardi.",
+  "Unlimited Offline/Online Reading": "Lettura offline/online illimitata",
+  "Unlimited Cloud Sync Devices": "Sincronizzazione cloud su dispositivi illimitati",
+  "Essential Text-to-Speech Voices": "Voci essenziali di sintesi vocale",
+  "DeepL Free Access": "Accesso gratuito a DeepL",
+  "Community Support": "Supporto della community",
+  "500 MB Cloud Sync Space": "500 MB di spazio di sincronizzazione cloud",
+  "Includes All Free Tier Benefits": "Include tutti i vantaggi del piano gratuito",
+  "AI Summaries": "Riassunti AI",
+  "AI Translations": "Traduzioni AI",
+  "Priority Support": "Supporto prioritario",
+  "DeepL Pro Access": "Accesso a DeepL Pro",
+  "Expanded Text-to-Speech Voices": "Voci di sintesi vocale ampliate",
+  "2000 MB Cloud Sync Space": "2000 MB di spazio di sincronizzazione cloud",
+  "Includes All Plus Tier Benefits": "Include tutti i vantaggi del piano Plus",
+  "Unlimited AI Summaries": "Riassunti AI illimitati",
+  "Unlimited AI Translations": "Traduzioni AI illimitate",
+  "Unlimited DeepL Pro Access": "Accesso illimitato a DeepL Pro",
+  "Advanced AI Tools": "Strumenti AI avanzati",
+  "Early Feature Access": "Accesso anticipato alle funzionalità",
+  "10 GB Cloud Sync Space": "10 GB di spazio di sincronizzazione cloud",
+  "Loading profile...": "Caricamento profilo...",
+  "Features": "Funzionalità",
+  "Delete Account": "Elimina account",
+  "Delete Your Account?": "Eliminare il tuo account?",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "Questa azione non può essere annullata. Tutti i tuoi dati nel cloud verranno eliminati definitivamente.",
+  "Delete Permanently": "Elimina definitivamente",
+  "Free Tier": "Piano gratuito",
+  "Plus Tier": "Piano Plus",
+  "Pro Tier": "Piano Pro"
 }
@@ -198,5 +198,37 @@
  "Verify token": "トークンを確認",
  "Sign in with Google": "Googleでサインイン",
  "Sign in with Apple": "Appleでサインイン",
-  "Sign in with GitHub": "GitHubでサインイン"
+  "Sign in with GitHub": "GitHubでサインイン",
+  "Account": "アカウント",
+  "Cloud Storage": "クラウドストレージ",
+  "Failed to delete user. Please try again later.": "ユーザーの削除に失敗しました。後ほど再試行してください。",
+  "Unlimited Offline/Online Reading": "無制限のオフライン/オンライン読書",
+  "Unlimited Cloud Sync Devices": "無制限のクラウド同期デバイス",
+  "Essential Text-to-Speech Voices": "基本的な音声合成ボイス",
+  "DeepL Free Access": "DeepL無料アクセス",
+  "Community Support": "コミュニティサポート",
+  "500 MB Cloud Sync Space": "500 MBのクラウド同期スペース",
+  "Includes All Free Tier Benefits": "無料プランの全特典を含む",
+  "AI Summaries": "AI要約",
+  "AI Translations": "AI翻訳",
+  "Priority Support": "優先サポート",
+  "DeepL Pro Access": "DeepL Proアクセス",
+  "Expanded Text-to-Speech Voices": "拡張された音声合成ボイス",
+  "2000 MB Cloud Sync Space": "2000 MBのクラウド同期スペース",
+  "Includes All Plus Tier Benefits": "Plusプランの全特典を含む",
+  "Unlimited AI Summaries": "無制限のAI要約",
+  "Unlimited AI Translations": "無制限のAI翻訳",
+  "Unlimited DeepL Pro Access": "無制限のDeepL Proアクセス",
+  "Advanced AI Tools": "高度なAIツール",
+  "Early Feature Access": "新機能への早期アクセス",
+  "10 GB Cloud Sync Space": "10 GBのクラウド同期スペース",
+  "Loading profile...": "プロフィール読み込み中...",
+  "Features": "機能",
+  "Delete Account": "アカウント削除",
+  "Delete Your Account?": "アカウントを削除しますか？",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "この操作は元に戻せません。クラウド上のすべてのデータが完全に削除されます。",
+  "Delete Permanently": "完全に削除",
+  "Free Tier": "無料プラン",
+  "Plus Tier": "Plusプラン",
+  "Pro Tier": "Proプラン"
 }
@@ -198,5 +198,37 @@
  "Verify token": "토큰 확인",
  "Sign in with Google": "Google로 로그인",
  "Sign in with Apple": "Apple로 로그인",
-  "Sign in with GitHub": "GitHub로 로그인"
+  "Sign in with GitHub": "GitHub로 로그인",
+  "Account": "계정",
+  "Cloud Storage": "클라우드 스토리지",
+  "Failed to delete user. Please try again later.": "사용자 삭제에 실패했습니다. 나중에 다시 시도해 주세요.",
+  "Unlimited Offline/Online Reading": "무제한 오프라인/온라인 읽기",
+  "Unlimited Cloud Sync Devices": "무제한 클라우드 동기화 기기",
+  "Essential Text-to-Speech Voices": "필수 텍스트 음성 변환 목소리",
+  "DeepL Free Access": "DeepL 무료 접근",
+  "Community Support": "커뮤니티 지원",
+  "500 MB Cloud Sync Space": "500 MB 클라우드 동기화 공간",
+  "Includes All Free Tier Benefits": "무료 등급의 모든 혜택 포함",
+  "AI Summaries": "AI 요약",
+  "AI Translations": "AI 번역",
+  "Priority Support": "우선 지원",
+  "DeepL Pro Access": "DeepL 프로 접근",
+  "Expanded Text-to-Speech Voices": "확장된 텍스트 음성 변환 목소리",
+  "2000 MB Cloud Sync Space": "2000 MB 클라우드 동기화 공간",
+  "Includes All Plus Tier Benefits": "플러스 등급의 모든 혜택 포함",
+  "Unlimited AI Summaries": "무제한 AI 요약",
+  "Unlimited AI Translations": "무제한 AI 번역",
+  "Unlimited DeepL Pro Access": "무제한 DeepL 프로 접근",
+  "Advanced AI Tools": "고급 AI 도구",
+  "Early Feature Access": "신기능 조기 접근",
+  "10 GB Cloud Sync Space": "10 GB 클라우드 동기화 공간",
+  "Loading profile...": "프로필 로딩 중...",
+  "Features": "기능",
+  "Delete Account": "계정 삭제",
+  "Delete Your Account?": "계정을 삭제하시겠습니까?",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "이 작업은 취소할 수 없습니다. 클라우드에 있는 모든 데이터가 영구적으로 삭제됩니다.",
+  "Delete Permanently": "영구 삭제",
+  "Free Tier": "무료 등급",
+  "Plus Tier": "플러스 등급",
+  "Pro Tier": "프로 등급"
 }
@@ -198,5 +198,37 @@
  "Verify token": "Weryfikacja tokena",
  "Sign in with Google": "Zaloguj się za pomocą Google",
  "Sign in with Apple": "Zaloguj się za pomocą Apple",
-  "Sign in with GitHub": "Zaloguj się za pomocą GitHub"
+  "Sign in with GitHub": "Zaloguj się za pomocą GitHub",
+  "Account": "Konto",
+  "Cloud Storage": "Przestrzeń w chmurze",
+  "Failed to delete user. Please try again later.": "Nie udało się usunąć użytkownika. Spróbuj ponownie później.",
+  "Unlimited Offline/Online Reading": "Nieograniczone czytanie offline/online",
+  "Unlimited Cloud Sync Devices": "Nieograniczona liczba urządzeń synchronizowanych w chmurze",
+  "Essential Text-to-Speech Voices": "Podstawowe głosy zamiany tekstu na mowę",
+  "DeepL Free Access": "Darmowy dostęp do DeepL",
+  "Community Support": "Wsparcie społeczności",
+  "500 MB Cloud Sync Space": "500 MB przestrzeni synchronizacji w chmurze",
+  "Includes All Free Tier Benefits": "Zawiera wszystkie korzyści darmowego planu",
+  "AI Summaries": "Podsumowania AI",
+  "AI Translations": "Tłumaczenia AI",
+  "Priority Support": "Priorytetowe wsparcie",
+  "DeepL Pro Access": "Dostęp do DeepL Pro",
+  "Expanded Text-to-Speech Voices": "Rozszerzone głosy zamiany tekstu na mowę",
+  "2000 MB Cloud Sync Space": "2000 MB przestrzeni synchronizacji w chmurze",
+  "Includes All Plus Tier Benefits": "Zawiera wszystkie korzyści planu Plus",
+  "Unlimited AI Summaries": "Nieograniczone podsumowania AI",
+  "Unlimited AI Translations": "Nieograniczone tłumaczenia AI",
+  "Unlimited DeepL Pro Access": "Nieograniczony dostęp do DeepL Pro",
+  "Advanced AI Tools": "Zaawansowane narzędzia AI",
+  "Early Feature Access": "Wczesny dostęp do nowych funkcji",
+  "10 GB Cloud Sync Space": "10 GB przestrzeni synchronizacji w chmurze",
+  "Loading profile...": "Ładowanie profilu...",
+  "Features": "Funkcje",
+  "Delete Account": "Usuń konto",
+  "Delete Your Account?": "Usunąć Twoje konto?",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "Tej operacji nie można cofnąć. Wszystkie Twoje dane w chmurze zostaną trwale usunięte.",
+  "Delete Permanently": "Usuń trwale",
+  "Free Tier": "Plan darmowy",
+  "Plus Tier": "Plan Plus",
+  "Pro Tier": "Plan Pro"
 }
@@ -198,5 +198,37 @@
  "Verify token": "Verificar token",
  "Sign in with Google": "Entrar com o Google",
  "Sign in with Apple": "Entrar com o Apple",
-  "Sign in with GitHub": "Entrar com o GitHub"
+  "Sign in with GitHub": "Entrar com o GitHub",
+  "Account": "Conta",
+  "Cloud Storage": "Armazenamento na nuvem",
+  "Failed to delete user. Please try again later.": "Falha ao excluir usuário. Por favor, tente novamente mais tarde.",
+  "Unlimited Offline/Online Reading": "Leitura offline/online ilimitada",
+  "Unlimited Cloud Sync Devices": "Sincronização ilimitada de dispositivos na nuvem",
+  "Essential Text-to-Speech Voices": "Vozes essenciais de texto para fala",
+  "DeepL Free Access": "Acesso gratuito ao DeepL",
+  "Community Support": "Suporte da comunidade",
+  "500 MB Cloud Sync Space": "500 MB de espaço de sincronização na nuvem",
+  "Includes All Free Tier Benefits": "Inclui todos os benefícios do plano gratuito",
+  "AI Summaries": "Resumos de IA",
+  "AI Translations": "Traduções de IA",
+  "Priority Support": "Suporte prioritário",
+  "DeepL Pro Access": "Acesso ao DeepL Pro",
+  "Expanded Text-to-Speech Voices": "Vozes ampliadas de texto para fala",
+  "2000 MB Cloud Sync Space": "2000 MB de espaço de sincronização na nuvem",
+  "Includes All Plus Tier Benefits": "Inclui todos os benefícios do plano Plus",
+  "Unlimited AI Summaries": "Resumos de IA ilimitados",
+  "Unlimited AI Translations": "Traduções de IA ilimitadas",
+  "Unlimited DeepL Pro Access": "Acesso ilimitado ao DeepL Pro",
+  "Advanced AI Tools": "Ferramentas avançadas de IA",
+  "Early Feature Access": "Acesso antecipado a recursos",
+  "10 GB Cloud Sync Space": "10 GB de espaço de sincronização na nuvem",
+  "Loading profile...": "Carregando perfil...",
+  "Features": "Recursos",
+  "Delete Account": "Excluir conta",
+  "Delete Your Account?": "Excluir sua conta?",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "Esta ação não pode ser desfeita. Todos os seus dados na nuvem serão excluídos permanentemente.",
+  "Delete Permanently": "Excluir permanentemente",
+  "Free Tier": "Plano gratuito",
+  "Plus Tier": "Plano Plus",
+  "Pro Tier": "Plano Pro"
 }
@@ -198,5 +198,37 @@
  "Verify token": "Проверить токен",
  "Sign in with Google": "Войти через Google",
  "Sign in with Apple": "Войти через Apple",
-  "Sign in with GitHub": "Войти через GitHub"
+  "Sign in with GitHub": "Войти через GitHub",
+  "Account": "Аккаунт",
+  "Cloud Storage": "Облачное хранилище",
+  "Failed to delete user. Please try again later.": "Не удалось удалить пользователя. Пожалуйста, повторите попытку позже.",
+  "Unlimited Offline/Online Reading": "Безлимитное чтение офлайн/онлайн",
+  "Unlimited Cloud Sync Devices": "Неограниченное количество устройств для облачной синхронизации",
+  "Essential Text-to-Speech Voices": "Основные голоса для преобразования текста в речь",
+  "DeepL Free Access": "Бесплатный доступ к DeepL",
+  "Community Support": "Поддержка сообщества",
+  "500 MB Cloud Sync Space": "500 МБ облачного пространства для синхронизации",
+  "Includes All Free Tier Benefits": "Включает все преимущества бесплатного тарифа",
+  "AI Summaries": "AI-резюме",
+  "AI Translations": "AI-переводы",
+  "Priority Support": "Приоритетная поддержка",
+  "DeepL Pro Access": "Доступ к DeepL Pro",
+  "Expanded Text-to-Speech Voices": "Расширенный набор голосов для преобразования текста в речь",
+  "2000 MB Cloud Sync Space": "2000 МБ облачного пространства для синхронизации",
+  "Includes All Plus Tier Benefits": "Включает все преимущества тарифа Plus",
+  "Unlimited AI Summaries": "Безлимитные AI-резюме",
+  "Unlimited AI Translations": "Безлимитные AI-переводы",
+  "Unlimited DeepL Pro Access": "Неограниченный доступ к DeepL Pro",
+  "Advanced AI Tools": "Продвинутые AI-инструменты",
+  "Early Feature Access": "Ранний доступ к новым функциям",
+  "10 GB Cloud Sync Space": "10 ГБ облачного пространства для синхронизации",
+  "Loading profile...": "Загрузка профиля...",
+  "Features": "Функции",
+  "Delete Account": "Удалить аккаунт",
+  "Delete Your Account?": "Удалить ваш аккаунт?",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "Это действие нельзя отменить. Все ваши данные в облаке будут удалены безвозвратно.",
+  "Delete Permanently": "Удалить навсегда",
+  "Free Tier": "Бесплатный тариф",
+  "Plus Tier": "Тариф Plus",
+  "Pro Tier": "Тариф Pro"
 }
@@ -198,5 +198,37 @@
  "Verify token": "Token'ı doğrula",
  "Sign in with Google": "Google ile giriş yap",
  "Sign in with Apple": "Apple ile giriş yap",
-  "Sign in with GitHub": "GitHub ile giriş yap"
+  "Sign in with GitHub": "GitHub ile giriş yap",
+  "Account": "Hesap",
+  "Cloud Storage": "Bulut Depolama",
+  "Failed to delete user. Please try again later.": "Kullanıcı silinemedi. Lütfen daha sonra tekrar deneyin.",
+  "Unlimited Offline/Online Reading": "Sınırsız Çevrimdışı/Çevrimiçi Okuma",
+  "Unlimited Cloud Sync Devices": "Sınırsız Bulut Senkronizasyon Cihazları",
+  "Essential Text-to-Speech Voices": "Temel Metinden Sese Dönüştürme Sesleri",
+  "DeepL Free Access": "DeepL Ücretsiz Erişim",
+  "Community Support": "Topluluk Desteği",
+  "500 MB Cloud Sync Space": "500 MB Bulut Senkronizasyon Alanı",
+  "Includes All Free Tier Benefits": "Tüm Ücretsiz Paket Avantajlarını İçerir",
+  "AI Summaries": "Yapay Zeka Özetleri",
+  "AI Translations": "Yapay Zeka Çevirileri",
+  "Priority Support": "Öncelikli Destek",
+  "DeepL Pro Access": "DeepL Pro Erişimi",
+  "Expanded Text-to-Speech Voices": "Genişletilmiş Metinden Sese Dönüştürme Sesleri",
+  "2000 MB Cloud Sync Space": "2000 MB Bulut Senkronizasyon Alanı",
+  "Includes All Plus Tier Benefits": "Tüm Plus Paket Avantajlarını İçerir",
+  "Unlimited AI Summaries": "Sınırsız Yapay Zeka Özetleri",
+  "Unlimited AI Translations": "Sınırsız Yapay Zeka Çevirileri",
+  "Unlimited DeepL Pro Access": "Sınırsız DeepL Pro Erişimi",
+  "Advanced AI Tools": "Gelişmiş Yapay Zeka Araçları",
+  "Early Feature Access": "Erken Özellik Erişimi",
+  "10 GB Cloud Sync Space": "10 GB Bulut Senkronizasyon Alanı",
+  "Loading profile...": "Profil yükleniyor...",
+  "Features": "Özellikler",
+  "Delete Account": "Hesabı Sil",
+  "Delete Your Account?": "Hesabınızı Silmek İstiyor musunuz?",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "Bu işlem geri alınamaz. Buluttaki tüm verileriniz kalıcı olarak silinecektir.",
+  "Delete Permanently": "Kalıcı Olarak Sil",
+  "Free Tier": "Ücretsiz Paket",
+  "Plus Tier": "Plus Paket",
+  "Pro Tier": "Pro Paket"
 }
@@ -198,5 +198,37 @@
  "Verify token": "Перевірити токен",
  "Sign in with Google": "Увійти через Google",
  "Sign in with Apple": "Увійти через Apple",
-  "Sign in with GitHub": "Увійти через GitHub"
+  "Sign in with GitHub": "Увійти через GitHub",
+  "Account": "Обліковий запис",
+  "Cloud Storage": "Хмарне сховище",
+  "Failed to delete user. Please try again later.": "Не вдалося видалити користувача. Будь ласка, спробуйте пізніше.",
+  "Unlimited Offline/Online Reading": "Необмежене читання офлайн/онлайн",
+  "Unlimited Cloud Sync Devices": "Необмежена кількість пристроїв для хмарної синхронізації",
+  "Essential Text-to-Speech Voices": "Основні голоси для перетворення тексту в мовлення",
+  "DeepL Free Access": "Безкоштовний доступ до DeepL",
+  "Community Support": "Підтримка спільноти",
+  "500 MB Cloud Sync Space": "500 МБ простору для хмарної синхронізації",
+  "Includes All Free Tier Benefits": "Включає всі переваги безкоштовного тарифу",
+  "AI Summaries": "AI-резюме",
+  "AI Translations": "AI-переклади",
+  "Priority Support": "Пріоритетна підтримка",
+  "DeepL Pro Access": "Доступ до DeepL Pro",
+  "Expanded Text-to-Speech Voices": "Розширений набір голосів для перетворення тексту в мовлення",
+  "2000 MB Cloud Sync Space": "2000 МБ простору для хмарної синхронізації",
+  "Includes All Plus Tier Benefits": "Включає всі переваги тарифу Plus",
+  "Unlimited AI Summaries": "Необмежені AI-резюме",
+  "Unlimited AI Translations": "Необмежені AI-переклади",
+  "Unlimited DeepL Pro Access": "Необмежений доступ до DeepL Pro",
+  "Advanced AI Tools": "Розширені AI-інструменти",
+  "Early Feature Access": "Ранній доступ до нових функцій",
+  "10 GB Cloud Sync Space": "10 ГБ простору для хмарної синхронізації",
+  "Loading profile...": "Завантаження профілю...",
+  "Features": "Функції",
+  "Delete Account": "Видалити обліковий запис",
+  "Delete Your Account?": "Видалити ваш обліковий запис?",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "Цю дію неможливо скасувати. Всі ваші дані в хмарі будуть повністю видалені.",
+  "Delete Permanently": "Видалити назавжди",
+  "Free Tier": "Безкоштовний тариф",
+  "Plus Tier": "Тариф Plus",
+  "Pro Tier": "Тариф Pro"
 }
@@ -198,5 +198,37 @@
  "Verify token": "Xác minh mã token",
  "Sign in with Google": "Đăng nhập với Google",
  "Sign in with Apple": "Đăng nhập với Apple",
-  "Sign in with GitHub": "Đăng nhập với GitHub"
+  "Sign in with GitHub": "Đăng nhập với GitHub",
+  "Account": "Tài khoản",
+  "Cloud Storage": "Lưu trữ đám mây",
+  "Failed to delete user. Please try again later.": "Không thể xóa người dùng. Vui lòng thử lại sau.",
+  "Unlimited Offline/Online Reading": "Đọc ngoại tuyến/trực tuyến không giới hạn",
+  "Unlimited Cloud Sync Devices": "Đồng bộ hóa thiết bị đám mây không giới hạn",
+  "Essential Text-to-Speech Voices": "Giọng nói chuyển văn bản thành giọng nói cơ bản",
+  "DeepL Free Access": "Truy cập DeepL miễn phí",
+  "Community Support": "Hỗ trợ cộng đồng",
+  "500 MB Cloud Sync Space": "500 MB không gian đồng bộ hóa đám mây",
+  "Includes All Free Tier Benefits": "Bao gồm tất cả lợi ích của gói miễn phí",
+  "AI Summaries": "Tóm tắt AI",
+  "AI Translations": "Dịch thuật AI",
+  "Priority Support": "Hỗ trợ ưu tiên",
+  "DeepL Pro Access": "Truy cập DeepL Pro",
+  "Expanded Text-to-Speech Voices": "Giọng nói chuyển văn bản thành giọng nói mở rộng",
+  "2000 MB Cloud Sync Space": "2000 MB không gian đồng bộ hóa đám mây",
+  "Includes All Plus Tier Benefits": "Bao gồm tất cả lợi ích của gói Plus",
+  "Unlimited AI Summaries": "Tóm tắt AI không giới hạn",
+  "Unlimited AI Translations": "Dịch thuật AI không giới hạn",
+  "Unlimited DeepL Pro Access": "Truy cập DeepL Pro không giới hạn",
+  "Advanced AI Tools": "Công cụ AI nâng cao",
+  "Early Feature Access": "Truy cập tính năng sớm",
+  "10 GB Cloud Sync Space": "10 GB không gian đồng bộ hóa đám mây",
+  "Loading profile...": "Đang tải hồ sơ...",
+  "Features": "Tính năng",
+  "Delete Account": "Xóa tài khoản",
+  "Delete Your Account?": "Xóa tài khoản của bạn?",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "Hành động này không thể hoàn tác. Tất cả dữ liệu của bạn trên đám mây sẽ bị xóa vĩnh viễn.",
+  "Delete Permanently": "Xóa vĩnh viễn",
+  "Free Tier": "Gói miễn phí",
+  "Plus Tier": "Gói Plus",
+  "Pro Tier": "Gói Pro"
 }
@@ -64,7 +64,7 @@
  "Match Case": "匹配大小写",
  "Match Diacritics": "匹配重音符号",
  "Match Whole Words": "匹配整个单词",
-  "Maximum Block Size": "内容最大宽度",
+  "Maximum Block Size": "内容最大高度",
  "Maximum Inline Size": "每栏最大宽度",
  "Maximum Number of Columns": "分栏数",
  "Minimum Font Size": "最小字号",
@@ -198,5 +198,37 @@
  "Verify token": "验证令牌",
  "Sign in with Google": "使用 Google 登录",
  "Sign in with Apple": "使用 Apple 登录",
-  "Sign in with GitHub": "使用 GitHub 登录"
+  "Sign in with GitHub": "使用 GitHub 登录",
+  "Account": "账户",
+  "Cloud Storage": "云存储",
+  "Failed to delete user. Please try again later.": "删除用户失败。请稍后重试。",
+  "Unlimited Offline/Online Reading": "无限离线和在线阅读",
+  "Unlimited Cloud Sync Devices": "无限云同步设备个数",
+  "Essential Text-to-Speech Voices": "基础 TTS 语音包",
+  "DeepL Free Access": "免费版 DeepL 翻译",
+  "Community Support": "社区支持",
+  "500 MB Cloud Sync Space": "500 MB 云同步空间",
+  "Includes All Free Tier Benefits": "包含所有免费版权益",
+  "AI Summaries": "AI 摘要",
+  "AI Translations": "AI 翻译",
+  "Priority Support": "优先支持",
+  "DeepL Pro Access": "专业版 DeepL 翻译",
+  "Expanded Text-to-Speech Voices": "更多文本转语音声音",
+  "2000 MB Cloud Sync Space": "2000 MB 云同步空间",
+  "Includes All Plus Tier Benefits": "包含所有增强版权益",
+  "Unlimited AI Summaries": "无限使用 AI 摘要",
+  "Unlimited AI Translations": "无限使用 AI 翻译",
+  "Unlimited DeepL Pro Access": "无限使用专业版 DeepL 翻译",
+  "Advanced AI Tools": "高级 AI 工具",
+  "Early Feature Access": "抢先体验新功能",
+  "10 GB Cloud Sync Space": "10 GB 云同步空间",
+  "Loading profile...": "加载个人资料中...",
+  "Features": "功能特性",
+  "Delete Account": "删除账户",
+  "Delete Your Account?": "删除您的账户？",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "此操作无法撤销。您在云端的所有数据将被永久删除。",
+  "Delete Permanently": "永久删除",
+  "Free Tier": "免费版",
+  "Plus Tier": "增强版",
+  "Pro Tier": "专业版"
 }
@@ -64,7 +64,7 @@
  "Match Case": "匹配大小寫",
  "Match Diacritics": "匹配重音符號",
  "Match Whole Words": "匹配整個單詞",
-  "Maximum Block Size": "內容最大寬度",
+  "Maximum Block Size": "內容最大高度",
  "Maximum Inline Size": "每欄最大寬度",
  "Maximum Number of Columns": "分欄數",
  "Minimum Font Size": "最小字號",
@@ -198,5 +198,37 @@
  "Verify token": "驗證令牌",
  "Sign in with Google": "使用 Google 登入",
  "Sign in with Apple": "使用 Apple 登入",
-  "Sign in with GitHub": "使用 GitHub 登入"
+  "Sign in with GitHub": "使用 GitHub 登入",
+  "Account": "帳戶",
+  "Cloud Storage": "雲端儲存空間",
+  "Failed to delete user. Please try again later.": "刪除使用者失敗。請稍後再試。",
+  "Unlimited Offline/Online Reading": "無限離線/線上閱讀",
+  "Unlimited Cloud Sync Devices": "無限雲端同步裝置",
+  "Essential Text-to-Speech Voices": "基本文字轉語音聲音",
+  "DeepL Free Access": "DeepL免費存取",
+  "Community Support": "社群支援",
+  "500 MB Cloud Sync Space": "500 MB雲端同步空間",
+  "Includes All Free Tier Benefits": "包含所有免費方案權益",
+  "AI Summaries": "AI摘要",
+  "AI Translations": "AI翻譯",
+  "Priority Support": "優先支援",
+  "DeepL Pro Access": "DeepL專業版存取",
+  "Expanded Text-to-Speech Voices": "擴展文字轉語音聲音",
+  "2000 MB Cloud Sync Space": "2000 MB雲端同步空間",
+  "Includes All Plus Tier Benefits": "包含所有Plus方案權益",
+  "Unlimited AI Summaries": "無限AI摘要",
+  "Unlimited AI Translations": "無限AI翻譯",
+  "Unlimited DeepL Pro Access": "無限DeepL專業版存取",
+  "Advanced AI Tools": "進階AI工具",
+  "Early Feature Access": "搶先體驗新功能",
+  "10 GB Cloud Sync Space": "10 GB雲端同步空間",
+  "Loading profile...": "載入個人資料中...",
+  "Features": "功能",
+  "Delete Account": "刪除帳戶",
+  "Delete Your Account?": "刪除您的帳戶？",
+  "This action cannot be undone. All your data in the cloud will be permanently deleted.": "此操作無法撤銷。您在雲端的所有資料將被永久刪除。",
+  "Delete Permanently": "永久刪除",
+  "Free Tier": "免費方案",
+  "Plus Tier": "Plus方案",
+  "Pro Tier": "專業方案"
 }
@@ -1,5 +1,22 @@
 {
  "releases": {
+    "0.9.19": {
+      "date": "2025-03-07",
+      "notes": [
+        "Support custom CSS for Reader UI",
+        "Initial support of RTL layout for Arabic and Hebrew books",
+        "Various fixes and enhancements on layout and sync"
+      ]
+    },
+    "0.9.18": {
+      "date": "2025-02-26",
+      "notes": [
+        "Add user profile page and option to delete account in the cloud",
+        "Fix TTS failed to start with invalid book language",
+        "Enhancements on iOS with modals and annotation tools",
+        "UX enhancements with modern highlights colors"
+      ]
+    },
    "0.9.17": {
      "date": "2025-02-24",
      "notes": [
@@ -0,0 +1,2 @@
+/build
+/.tauri
@@ -0,0 +1,44 @@
+plugins {
+    id("com.android.library")
+    id("org.jetbrains.kotlin.android")
+}
+
+android {
+    namespace = "com.plugin.safari_auth"
+    compileSdk = 34
+
+    defaultConfig {
+        minSdk = 21
+
+        testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
+        consumerProguardFiles("consumer-rules.pro")
+    }
+
+    buildTypes {
+        release {
+            isMinifyEnabled = false
+            proguardFiles(
+                getDefaultProguardFile("proguard-android-optimize.txt"),
+                "proguard-rules.pro"
+            )
+        }
+    }
+    compileOptions {
+        sourceCompatibility = JavaVersion.VERSION_1_8
+        targetCompatibility = JavaVersion.VERSION_1_8
+    }
+    kotlinOptions {
+        jvmTarget = "1.8"
+    }
+}
+
+dependencies {
+
+    implementation("androidx.core:core-ktx:1.9.0")
+    implementation("androidx.appcompat:appcompat:1.6.0")
+    implementation("com.google.android.material:material:1.7.0")
+    testImplementation("junit:junit:4.13.2")
+    androidTestImplementation("androidx.test.ext:junit:1.1.5")
+    androidTestImplementation("androidx.test.espresso:espresso-core:3.5.1")
+    implementation(project(":tauri-android"))
+}
@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile
@@ -0,0 +1,31 @@
+pluginManagement {
+    repositories {
+        mavenCentral()
+        gradlePluginPortal()
+        google()
+    }
+    resolutionStrategy {
+        eachPlugin {
+            switch (requested.id.id) {
+                case "com.android.library":
+                    useVersion("8.0.2")
+                    break
+                case "org.jetbrains.kotlin.android":
+                    useVersion("1.8.20")
+                    break
+            }
+        }
+    }
+}
+
+dependencyResolutionManagement {
+    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
+    repositories {
+        mavenCentral()
+        google()
+
+    }
+}
+
+include ':tauri-android'
+project(':tauri-android').projectDir = new File('./.tauri/tauri-api')
@@ -0,0 +1,24 @@
+package com.plugin.safari_auth
+
+import androidx.test.platform.app.InstrumentationRegistry
+import androidx.test.ext.junit.runners.AndroidJUnit4
+
+import org.junit.Test
+import org.junit.runner.RunWith
+
+import org.junit.Assert.*
+
+/**
+ * Instrumented test, which will execute on an Android device.
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+@RunWith(AndroidJUnit4::class)
+class ExampleInstrumentedTest {
+    @Test
+    fun useAppContext() {
+        // Context of the app under test.
+        val appContext = InstrumentationRegistry.getInstrumentation().targetContext
+        assertEquals("com.plugin.safari_auth", appContext.packageName)
+    }
+}
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>
@@ -0,0 +1,10 @@
+package com.plugin.safari_auth
+
+import android.util.Log
+
+class Example {
+    fun pong(value: String): String {
+        Log.i("Pong", value)
+        return value
+    }
+}
@@ -0,0 +1,28 @@
+package com.plugin.safari_auth
+
+import android.app.Activity
+import app.tauri.annotation.Command
+import app.tauri.annotation.InvokeArg
+import app.tauri.annotation.TauriPlugin
+import app.tauri.plugin.JSObject
+import app.tauri.plugin.Plugin
+import app.tauri.plugin.Invoke
+
+@InvokeArg
+class PingArgs {
+  var value: String? = null
+}
+
+@TauriPlugin
+class ExamplePlugin(private val activity: Activity): Plugin(activity) {
+    private val implementation = Example()
+
+    @Command
+    fun ping(invoke: Invoke) {
+        val args = invoke.parseArgs(PingArgs::class.java)
+
+        val ret = JSObject()
+        ret.put("value", implementation.pong(args.value ?: "default value :("))
+        invoke.resolve(ret)
+    }
+}
@@ -0,0 +1,17 @@
+package com.plugin.safari_auth
+
+import org.junit.Test
+
+import org.junit.Assert.*
+
+/**
+ * Example local unit test, which will execute on the development machine (host).
+ *
+ * See [testing documentation](http://d.android.com/tools/testing).
+ */
+class ExampleUnitTest {
+    @Test
+    fun addition_isCorrect() {
+        assertEquals(4, 2 + 2)
+    }
+}
@@ -14,8 +14,11 @@ pub fn init<R: Runtime, C: DeserializeOwned>(
    _app: &AppHandle<R>,
    api: PluginApi<R, C>,
 ) -> crate::Result<SafariAuth<R>> {
+    #[cfg(target_os = "android")]
+    let handle = api.register_android_plugin("com.bilingify.safari_auth", "ExamplePlugin")?;
    #[cfg(target_os = "ios")]
    let handle = api.register_ios_plugin(init_plugin_safari_auth)?;
+
    Ok(SafariAuth(handle))
 }

@@ -10,6 +10,8 @@ extern crate objc;
 mod menu;
 #[cfg(target_os = "macos")]
 mod traffic_light;
+#[cfg(target_os = "macos")]
+use traffic_light::set_traffic_lights;

 #[cfg(target_os = "macos")]
 use tauri::TitleBarStyle;
@@ -98,6 +100,8 @@ pub fn run() {
            start_server,
            download_file,
            upload_file,
+            #[cfg(target_os = "macos")]
+            set_traffic_lights,
            #[cfg(desktop)]
            list_fonts
        ])
@@ -106,8 +110,7 @@ pub fn run() {
        .plugin(tauri_plugin_http::init())
        .plugin(tauri_plugin_os::init())
        .plugin(tauri_plugin_dialog::init())
-        .plugin(tauri_plugin_fs::init())
-        .plugin(tauri_plugin_safari_auth::init());
+        .plugin(tauri_plugin_fs::init());

    #[cfg(desktop)]
    let builder = builder.plugin(tauri_plugin_single_instance::init(|app, argv, cwd| {
@@ -133,6 +136,9 @@ pub fn run() {
    #[cfg(target_os = "ios")]
    let builder = builder.plugin(tauri_plugin_sign_in_with_apple::init());

+    #[cfg(target_os = "ios")]
+    let builder = builder.plugin(tauri_plugin_safari_auth::init());
+
    #[cfg(any(target_os = "ios", target_os = "android"))]
    let builder = builder.plugin(tauri_plugin_haptics::init());

@@ -1,13 +1,14 @@
 use objc::{msg_send, sel, sel_impl};
 use rand::{distributions::Alphanumeric, Rng};
-use tauri::Emitter;
 use tauri::{
+    command,
    plugin::{Builder, TauriPlugin},
-    Runtime, Window,
-}; // 0.8
+    Emitter, Runtime, Window,
+};

-const WINDOW_CONTROL_PAD_X: f64 = 10.0;
-const WINDOW_CONTROL_PAD_Y: f64 = 22.0;
+static mut WINDOW_CONTROL_PAD_X: f64 = 10.0;
+static mut WINDOW_CONTROL_PAD_Y: f64 = 22.0;
+static mut TRAFFIC_LIGHTS_VISIBLE: bool = true;

 struct UnsafeWindowHandle(*mut std::ffi::c_void);
 unsafe impl Send for UnsafeWindowHandle {}
@@ -30,7 +31,24 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
 }

 #[cfg(target_os = "macos")]
-fn position_traffic_lights(ns_window_handle: UnsafeWindowHandle, x: f64, y: f64) {
+#[command]
+pub fn set_traffic_lights(window: Window, visible: bool, x: f64, y: f64) {
+    unsafe {
+        TRAFFIC_LIGHTS_VISIBLE = visible;
+        WINDOW_CONTROL_PAD_X = x;
+        WINDOW_CONTROL_PAD_Y = y;
+
+        position_traffic_lights(
+            UnsafeWindowHandle(window.ns_window().expect("Failed to create window handle")),
+            TRAFFIC_LIGHTS_VISIBLE,
+            WINDOW_CONTROL_PAD_X,
+            WINDOW_CONTROL_PAD_Y,
+        );
+    }
+}
+
+#[cfg(target_os = "macos")]
+fn position_traffic_lights(ns_window_handle: UnsafeWindowHandle, visible: bool, x: f64, y: f64) {
    use cocoa::appkit::{NSView, NSWindow, NSWindowButton};
    use cocoa::foundation::NSRect;
    let ns_window = ns_window_handle.0 as cocoa::base::id;
@@ -45,7 +63,10 @@ fn position_traffic_lights(ns_window_handle: UnsafeWindowHandle, x: f64, y: f64)
        let close_rect: NSRect = msg_send![close, frame];
        let button_height = close_rect.size.height;

-        let title_bar_frame_height = button_height + y;
+        let mut title_bar_frame_height = button_height + y;
+        if !visible {
+            title_bar_frame_height = 0.0;
+        }
        let mut title_bar_rect = NSView::frame(title_bar_container_view);
        title_bar_rect.size.height = title_bar_frame_height;
        title_bar_rect.origin.y = NSView::frame(ns_window).size.height - title_bar_frame_height;
@@ -77,11 +98,14 @@ pub fn setup_traffic_light_positioner<R: Runtime>(window: Window<R>) {
    use std::ffi::c_void;

    // Do the initial positioning
-    position_traffic_lights(
-        UnsafeWindowHandle(window.ns_window().expect("Failed to create window handle")),
-        WINDOW_CONTROL_PAD_X,
-        WINDOW_CONTROL_PAD_Y,
-    );
+    unsafe {
+        position_traffic_lights(
+            UnsafeWindowHandle(window.ns_window().expect("Failed to create window handle")),
+            TRAFFIC_LIGHTS_VISIBLE,
+            WINDOW_CONTROL_PAD_X,
+            WINDOW_CONTROL_PAD_Y,
+        );
+    }

    // Ensure they stay in place while resizing the window.
    fn with_window_state<R: Runtime, F: FnOnce(&mut WindowState<R>) -> T, T>(
@@ -127,6 +151,7 @@ pub fn setup_traffic_light_positioner<R: Runtime>(window: Window<R>) {
                    #[cfg(target_os = "macos")]
                    position_traffic_lights(
                        UnsafeWindowHandle(id as *mut std::ffi::c_void),
+                        TRAFFIC_LIGHTS_VISIBLE,
                        WINDOW_CONTROL_PAD_X,
                        WINDOW_CONTROL_PAD_Y,
                    );
@@ -258,6 +283,7 @@ pub fn setup_traffic_light_positioner<R: Runtime>(window: Window<R>) {
                    let id = state.window.ns_window().expect("Failed to emit event") as id;
                    position_traffic_lights(
                        UnsafeWindowHandle(id as *mut std::ffi::c_void),
+                        TRAFFIC_LIGHTS_VISIBLE,
                        WINDOW_CONTROL_PAD_X,
                        WINDOW_CONTROL_PAD_Y,
                    );
@@ -11,7 +11,7 @@ export default function AuthErrorPage() {
  useEffect(() => {
    const timer = setTimeout(() => {
      router.push('/auth');
-    }, 5000);
+    }, 3000);

    return () => clearTimeout(timer);
  }, [router]);
@@ -20,10 +20,6 @@ export default function AuthErrorPage() {
    <div className='bg-base-200/50 text-base-content hero h-screen items-center justify-center'>
      <div className='hero-content text-neutral-content text-center'>
        <div className='max-w-md'>
-          <h1 className='mb-5 text-5xl font-bold'>Authentication Error</h1>
-          <p className='mb-5'>
-            Something went wrong during the authentication process. Please try again.
-          </p>
          <p className='mb-5'>You will be redirected to the login page shortly...</p>
          <button className='btn btn-primary rounded-xl' onClick={() => router.push('/auth')}>
            Go to Login
@@ -129,7 +129,7 @@ export default function AuthPage() {
  };

  const handleOAuthUrl = async (url: string) => {
-    console.log('Received OAuth URL:', url);
+    console.log('Handle OAuth URL:', url);
    const hashMatch = url.match(/#(.*)/);
    if (hashMatch) {
      const hash = hashMatch[1];
@@ -332,20 +332,16 @@ export default function AuthPage() {
          Icon={FaGithub}
          label={_('Sign in with GitHub')}
        />
-        {!appService?.isIOSApp && (
-          <div>
-            <hr className='my-3 mt-6 w-64 border-t border-gray-200' />
-            <Auth
-              supabaseClient={supabase}
-              appearance={{ theme: ThemeSupa }}
-              theme={isDarkMode ? 'dark' : 'light'}
-              magicLink={true}
-              providers={[]}
-              redirectTo={getTauriRedirectTo(false)}
-              localization={getAuthLocalization()}
-            />
-          </div>
-        )}
+        <hr className='my-3 mt-6 w-64 border-t border-gray-200' />
+        <Auth
+          supabaseClient={supabase}
+          appearance={{ theme: ThemeSupa }}
+          theme={isDarkMode ? 'dark' : 'light'}
+          magicLink={true}
+          providers={[]}
+          redirectTo={getTauriRedirectTo(false)}
+          localization={getAuthLocalization()}
+        />
      </div>
    </div>
  ) : (
@@ -143,7 +143,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
      <div
        className={clsx(
          'transform-wrapper grid flex-1 gap-x-4 sm:gap-x-0',
-          'grid-cols-3 sm:grid-cols-4 md:grid-cols-6 xl:grid-cols-8',
+          'grid-cols-3 sm:grid-cols-4 md:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-12',
        )}
      >
        {currentBookshelfItems.map((item, index) => (
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { FaSearch } from 'react-icons/fa';
 import { PiPlus } from 'react-icons/pi';
@@ -10,8 +10,8 @@ import { MdArrowBackIosNew } from 'react-icons/md';
 import { useEnv } from '@/context/EnvContext';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
+import { useTrafficLightStore } from '@/store/trafficLightStore';
 import { navigateToLibrary } from '@/utils/nav';
-import useTrafficLight from '@/hooks/useTrafficLight';
 import WindowButtons from '@/components/WindowButtons';
 import Dropdown from '@/components/Dropdown';
 import SettingsMenu from './SettingsMenu';
@@ -33,7 +33,13 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
  const router = useRouter();
  const searchParams = useSearchParams();
  const { appService } = useEnv();
-  const { isTrafficLightVisible } = useTrafficLight();
+  const {
+    isTrafficLightVisible,
+    initializeTrafficLightStore,
+    initializeTrafficLightListeners,
+    cleanupTrafficLightListeners,
+  } = useTrafficLightStore();
+
  const headerRef = useRef<HTMLDivElement>(null);
  const iconSize16 = useResponsiveSize(16);
  const iconSize20 = useResponsiveSize(20);
@@ -42,6 +48,17 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
    onToggleSelectMode,
  });

+  useEffect(() => {
+    if (!appService?.hasTrafficLight) return;
+
+    initializeTrafficLightStore(appService);
+    initializeTrafficLightListeners();
+    return () => {
+      cleanupTrafficLightListeners();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
  const windowButtonVisible = appService?.hasWindowBar && !isTrafficLightVisible;
  const isInGroupView = !!searchParams?.get('group');

@@ -13,7 +13,7 @@ import { useEnv } from '@/context/EnvContext';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { getStoragePlanData } from '@/utils/access';
-import { navigateToLogin } from '@/utils/nav';
+import { navigateToLogin, navigateToProfile } from '@/utils/nav';
 import { QuotaType } from '@/types/user';
 import MenuItem from '@/components/MenuItem';
 import Quota from '@/components/Quota';
@@ -26,7 +26,7 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
  const _ = useTranslation();
  const router = useRouter();
  const { envConfig } = useEnv();
-  const { token, user, logout } = useAuth();
+  const { token, user } = useAuth();
  const { settings, setSettings, saveSettings } = useSettingsStore();
  const [quotas, setQuotas] = React.useState<QuotaType[]>([]);
  const [isAutoUpload, setIsAutoUpload] = useState(settings.autoUpload);
@@ -47,11 +47,8 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
    setIsDropdownOpen?.(false);
  };

-  const handleUserLogout = () => {
-    logout();
-    settings.keepLogin = false;
-    setSettings(settings);
-    saveSettings(envConfig, settings);
+  const handleUserProfile = () => {
+    navigateToProfile(router);
    setIsDropdownOpen?.(false);
  };

@@ -135,8 +132,8 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
          }
        >
          <ul>
-            <Quota quotas={quotas} />
-            <MenuItem label={_('Sign Out')} noIcon onClick={handleUserLogout} />
+            <Quota quotas={quotas} className='h-10 pl-4 pr-2' />
+            <MenuItem label={_('Account')} noIcon onClick={handleUserProfile} />
          </ul>
        </MenuItem>
      ) : (
@@ -2,8 +2,8 @@

 import clsx from 'clsx';
 import * as React from 'react';
-import { useState, useRef, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
+import { useState, useRef, useEffect, Suspense } from 'react';
+import { ReadonlyURLSearchParams, useRouter, useSearchParams } from 'next/navigation';

 import { Book } from '@/types/book';
 import { AppService } from '@/types/system';
@@ -28,6 +28,7 @@ import { usePullToRefresh } from '@/hooks/usePullToRefresh';
 import { useDemoBooks } from './hooks/useDemoBooks';
 import { useBooksSync } from './hooks/useBooksSync';
 import { useScreenWakeLock } from '@/hooks/useScreenWakeLock';
+import { useOpenWithBooks } from '@/hooks/useOpenWithBooks';
 import { tauriQuitApp } from '@/utils/window';

 import { AboutWindow } from '@/components/AboutWindow';
@@ -38,7 +39,12 @@ import Bookshelf from './components/Bookshelf';
 import BookDetailModal from '@/components/BookDetailModal';
 import useShortcuts from '@/hooks/useShortcuts';

-const LibraryPage = () => {
+const LibraryPageWithSearchParams = () => {
+  const searchParams = useSearchParams();
+  return <LibraryPageContent searchParams={searchParams} />;
+};
+
+const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchParams | null }) => {
  const router = useRouter();
  const { envConfig, appService } = useEnv();
  const { token, user } = useAuth();
@@ -47,7 +53,7 @@ const LibraryPage = () => {
    updateBook,
    setLibrary,
    checkOpenWithBooks,
-    clearOpenWithBooks,
+    setCheckOpenWithBooks,
  } = useLibraryStore();
  const _ = useTranslation();
  const { updateAppTheme } = useTheme();
@@ -63,6 +69,8 @@ const LibraryPage = () => {
  const demoBooks = useDemoBooks();
  const containerRef = useRef<HTMLDivElement>(null);

+  useOpenWithBooks();
+
  const { pullLibrary, pushLibrary } = useBooksSync({
    onSyncStart: () => setLoading(true),
    onSyncEnd: () => setLoading(false),
@@ -113,7 +121,9 @@ const LibraryPage = () => {

      console.log('Opening books:', bookIds);
      if (bookIds.length > 0) {
-        navigateToReader(router, bookIds);
+        setTimeout(() => {
+          navigateToReader(router, bookIds);
+        }, 0);
      }
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -148,7 +158,7 @@ const LibraryPage = () => {
      if (checkOpenWithBooks && isTauriAppPlatform()) {
        await handleOpenWithBooks(appService, libraryBooks);
      } else {
-        clearOpenWithBooks();
+        setCheckOpenWithBooks(false);
        setLibrary(libraryBooks);
      }

@@ -163,7 +173,7 @@ const LibraryPage = () => {
      if (openWithFiles.length > 0) {
        await processOpenWithFiles(appService, openWithFiles, libraryBooks);
      } else {
-        clearOpenWithBooks();
+        setCheckOpenWithBooks(false);
        setLibrary(libraryBooks);
      }
    };
@@ -171,10 +181,11 @@ const LibraryPage = () => {
    initLogin();
    initLibrary();
    return () => {
-      clearOpenWithBooks();
+      setCheckOpenWithBooks(false);
+      isInitiating.current = false;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [searchParams]);

  useEffect(() => {
    if (demoBooks.length > 0 && libraryLoaded) {
@@ -449,4 +460,18 @@ const LibraryPage = () => {
  );
 };

+const LibraryPage = () => {
+  return (
+    <Suspense
+      fallback={
+        <div className='fixed inset-0 z-50 flex items-center justify-center'>
+          <Spinner loading />
+        </div>
+      }
+    >
+      <LibraryPageWithSearchParams />
+    </Suspense>
+  );
+};
+
 export default LibraryPage;
@@ -85,14 +85,20 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
                <HintInfo bookKey={bookKey} gapRight={marginGap} />
                <PageInfoView
                  bookFormat={book.format}
-                  section={section ?? null}
-                  pageinfo={pageinfo ?? null}
+                  section={section}
+                  pageinfo={pageinfo}
                  gapRight={marginGap}
                />
              </>
            )}
            <Annotator bookKey={bookKey} />
-            <FooterBar bookKey={bookKey} pageinfo={pageinfo} isHoveredAnim={false} />
+            <FooterBar
+              bookKey={bookKey}
+              bookFormat={book.format}
+              section={section}
+              pageinfo={pageinfo}
+              isHoveredAnim={false}
+            />
            {isFontLayoutSettingsDialogOpen && <SettingsDialog bookKey={bookKey} config={config} />}
          </div>
        );
@@ -10,9 +10,9 @@ import { useProgressSync } from '../hooks/useProgressSync';
 import { useProgressAutoSave } from '../hooks/useProgressAutoSave';
 import { useAutoHideScrollbar } from '../hooks/useAutoHideScrollbar';
 import { getStyles, mountAdditionalFonts } from '@/utils/style';
-import { getBookDirFromWritingMode } from '@/utils/book';
+import { getBookDirFromLanguage, getBookDirFromWritingMode } from '@/utils/book';
 import { useTheme } from '@/hooks/useTheme';
-import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
+import { useUICSS } from '@/hooks/useUICSS';
 import {
  handleKeydown,
  handleMousedown,
@@ -23,6 +23,7 @@ import {
  handleTouchMove,
  handleTouchEnd,
 } from '../utils/iframeEventHandlers';
+import { getMaxInlineSize } from '@/utils/config';

 const FoliateViewer: React.FC<{
  bookKey: string;
@@ -36,6 +37,7 @@ const FoliateViewer: React.FC<{
  const { getViewSettings, setViewSettings } = useReaderStore();
  const { getParallels } = useParallelViewStore();
  const { themeCode } = useTheme();
+  const viewSettings = getViewSettings(bookKey)!;

  const [toastMessage, setToastMessage] = useState('');
  useEffect(() => {
@@ -43,6 +45,7 @@ const FoliateViewer: React.FC<{
    return () => clearTimeout(timer);
  }, [toastMessage]);

+  useUICSS(bookKey, viewSettings);
  useProgressSync(bookKey);
  useProgressAutoSave(bookKey);

@@ -58,7 +61,9 @@ const FoliateViewer: React.FC<{
    if (detail.doc) {
      const writingDir = viewRef.current?.renderer.setStyles && getDirection(detail.doc);
      const viewSettings = getViewSettings(bookKey)!;
-      viewSettings.vertical = writingDir?.vertical || false;
+      viewSettings.vertical =
+        writingDir?.vertical || viewSettings.writingMode.includes('vertical') || false;
+      viewSettings.rtl = writingDir?.rtl || viewSettings.writingMode.includes('rl') || false;
      setViewSettings(bookKey, viewSettings);
      if (viewSettings.scrolled && shouldAutoHideScrollbar) {
        handleScrollbarAutoHide(detail.doc);
@@ -133,31 +138,34 @@ const FoliateViewer: React.FC<{
      console.log('Opening book', bookKey);
      await import('foliate-js/view.js');
      const view = wrappedFoliateView(document.createElement('foliate-view') as FoliateView);
+      view.id = `foliate-view-${bookKey}`;
      document.body.append(view);
      containerRef.current?.appendChild(view);

+      const writingMode = viewSettings.writingMode;
+      if (writingMode) {
+        const settingsDir = getBookDirFromWritingMode(writingMode);
+        const languageDir = getBookDirFromLanguage(bookDoc.metadata.language);
+        if (settingsDir !== 'auto') {
+          bookDoc.dir = settingsDir;
+        } else if (languageDir !== 'auto') {
+          bookDoc.dir = languageDir;
+        }
+      }
+
      await view.open(bookDoc);
      // make sure we can listen renderer events after opening book
      viewRef.current = view;
      setFoliateView(bookKey, view);

-      const viewSettings = getViewSettings(bookKey)!;
      view.renderer.setStyles?.(getStyles(viewSettings, themeCode));

-      const writingMode = viewSettings.writingMode;
-      if (writingMode) {
-        view.book.dir = getBookDirFromWritingMode(writingMode);
-      }
-
      const isScrolled = viewSettings.scrolled!;
      const marginPx = viewSettings.marginPx!;
      const gapPercent = viewSettings.gapPercent!;
      const animated = viewSettings.animated!;
      const maxColumnCount = viewSettings.maxColumnCount!;
-      const maxInlineSize =
-        maxColumnCount === 1 || isScrolled
-          ? ONE_COLUMN_MAX_INLINE_SIZE
-          : viewSettings.maxInlineSize!;
+      const maxInlineSize = getMaxInlineSize(viewSettings);
      const maxBlockSize = viewSettings.maxBlockSize!;
      if (animated) {
        view.renderer.setAttribute('animated', '');
@@ -9,21 +9,32 @@ import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { eventDispatcher } from '@/utils/event';
+import { PageInfo } from '@/types/book';
 import Button from '@/components/Button';

 interface FooterBarProps {
  bookKey: string;
-  pageinfo: { current: number; total: number } | undefined;
+  bookFormat: string;
+  section?: PageInfo;
+  pageinfo?: PageInfo;
  isHoveredAnim: boolean;
 }

-const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim }) => {
+const FooterBar: React.FC<FooterBarProps> = ({
+  bookKey,
+  bookFormat,
+  section,
+  pageinfo,
+  isHoveredAnim,
+}) => {
  const _ = useTranslation();
  const { appService } = useEnv();
-  const { hoveredBookKey, setHoveredBookKey, getView, getProgress } = useReaderStore();
+  const { hoveredBookKey, setHoveredBookKey, getView, getProgress, getViewSettings } =
+    useReaderStore();
  const { isSideBarVisible } = useSidebarStore();
  const view = getView(bookKey);
  const progress = getProgress(bookKey);
+  const viewSettings = getViewSettings(bookKey);

  const handleProgressChange = (event: React.ChangeEvent) => {
    const newProgress = parseInt((event.target as HTMLInputElement).value, 10);
@@ -56,8 +67,9 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
    }
  };

-  const pageinfoValid = pageinfo && pageinfo.total > 0 && pageinfo.current >= 0;
-  const progressFraction = pageinfoValid ? pageinfo.current / pageinfo.total : 0;
+  const progressInfo = bookFormat === 'PDF' ? section : pageinfo;
+  const progressValid = !!progressInfo;
+  const progressFraction = progressValid ? (progressInfo!.current + 1) / progressInfo!.total : 0;
  return (
    <div
      className={clsx(
@@ -69,11 +81,16 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
        isHoveredAnim && 'hover-bar-anim',
        hoveredBookKey === bookKey ? `opacity-100` : `opacity-0`,
      )}
+      dir={viewSettings?.rtl ? 'rtl' : 'ltr'}
      onMouseEnter={() => setHoveredBookKey(bookKey)}
      onMouseLeave={() => setHoveredBookKey('')}
    >
      <div className='hidden sm:flex'>
-        <Button icon={<RiArrowLeftWideLine />} onClick={handleGoPrev} tooltip={_('Go Left')} />
+        <Button
+          icon={viewSettings?.rtl ? <RiArrowRightWideLine /> : <RiArrowLeftWideLine />}
+          onClick={viewSettings?.rtl ? handleGoNext : handleGoPrev}
+          tooltip={viewSettings?.rtl ? _('Go Right') : _('Go Left')}
+        />
      </div>
      <Button
        icon={<RiArrowGoBackLine />}
@@ -88,19 +105,23 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
        disabled={!view?.history.canGoForward}
      />
      <span className='mx-2 text-center text-sm'>
-        {pageinfoValid ? `${Math.round(progressFraction * 100)}%` : ''}
+        {progressValid ? `${Math.round(progressFraction * 100)}%` : ''}
      </span>
      <input
        type='range'
        className='text-base-content mx-2 w-full'
        min={0}
        max={100}
-        value={pageinfoValid ? progressFraction * 100 : 0}
+        value={progressValid ? progressFraction * 100 : 0}
        onChange={(e) => handleProgressChange(e)}
      />
      <Button icon={<FaHeadphones />} onClick={handleSpeakText} tooltip={_('Speak')} />
      <div className='hidden sm:flex'>
-        <Button icon={<RiArrowRightWideLine />} onClick={handleGoNext} tooltip={_('Go Right')} />
+        <Button
+          icon={viewSettings?.rtl ? <RiArrowLeftWideLine /> : <RiArrowRightWideLine />}
+          onClick={viewSettings?.rtl ? handleGoPrev : handleGoNext}
+          tooltip={viewSettings?.rtl ? _('Go Left') : _('Go Right')}
+        />
      </div>
    </div>
  );
@@ -76,7 +76,7 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
    if (!gridFrame) return;
    const rect = gridFrame.getBoundingClientRect();
    const viewSettings = getViewSettings(bookKey)!;
-    const triangPos = getPosition(detail.a, rect, viewSettings.vertical);
+    const triangPos = getPosition(detail.a, rect, popupPadding, viewSettings.vertical);
    const popupPos = getPopupPosition(
      triangPos,
      rect,
@@ -113,7 +113,7 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
    if (!gridFrame) return;
    const rect = gridFrame.getBoundingClientRect();
    const viewSettings = getViewSettings(bookKey)!;
-    const triangPos = getPosition(element, rect, viewSettings.vertical);
+    const triangPos = getPosition(element, rect, popupPadding, viewSettings.vertical);
    const popupPos = getPopupPosition(
      triangPos,
      rect,
@@ -1,12 +1,12 @@
 import clsx from 'clsx';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { PiDotsThreeVerticalBold } from 'react-icons/pi';

 import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
+import { useTrafficLightStore } from '@/store/trafficLightStore';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
-import useTrafficLight from '@/hooks/useTrafficLight';
 import WindowButtons from '@/components/WindowButtons';
 import Dropdown from '@/components/Dropdown';
 import SidebarToggler from './SidebarToggler';
@@ -34,7 +34,13 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
 }) => {
  const { appService } = useEnv();
  const headerRef = useRef<HTMLDivElement>(null);
-  const { isTrafficLightVisible } = useTrafficLight();
+  const {
+    isTrafficLightVisible,
+    setTrafficLightVisibility,
+    initializeTrafficLightStore,
+    initializeTrafficLightListeners,
+    cleanupTrafficLightListeners,
+  } = useTrafficLightStore();
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
  const { hoveredBookKey, setHoveredBookKey, bookKeys } = useReaderStore();
  const { isSideBarVisible } = useSidebarStore();
@@ -45,6 +51,18 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
    if (!isOpen) setHoveredBookKey('');
  };

+  useEffect(() => {
+    if (!appService?.hasTrafficLight) return;
+
+    initializeTrafficLightStore(appService);
+    initializeTrafficLightListeners();
+    setTrafficLightVisibility(isSideBarVisible);
+    return () => {
+      cleanupTrafficLightListeners();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isSideBarVisible]);
+
  return (
    <div
      ref={headerRef}
@@ -1,8 +1,8 @@
 import clsx from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { useSidebarStore } from '@/store/sidebarStore';
+import { useTrafficLightStore } from '@/store/trafficLightStore';
 import { eventDispatcher } from '@/utils/event';
-import useTrafficLight from '@/hooks/useTrafficLight';

 interface SectionInfoProps {
  bookKey: string;
@@ -11,7 +11,7 @@ interface SectionInfoProps {

 const HintInfo: React.FC<SectionInfoProps> = ({ bookKey, gapRight }) => {
  const { isSideBarVisible } = useSidebarStore();
-  const { isTrafficLightVisible } = useTrafficLight();
+  const { isTrafficLightVisible } = useTrafficLightStore();
  const [hintMessage, setHintMessage] = React.useState<string | null>(null);
  const hintTimeout = useRef(2000);
  const dismissTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -4,8 +4,8 @@ import { PageInfo } from '@/types/book';

 interface PageInfoProps {
  bookFormat: string;
-  section: PageInfo | null;
-  pageinfo: PageInfo | null;
+  section?: PageInfo;
+  pageinfo?: PageInfo;
  gapRight: string;
 }

@@ -16,7 +16,7 @@ import ReaderContent from './ReaderContent';
 const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
  const { envConfig, appService } = useEnv();
  const { settings, setSettings } = useSettingsStore();
-  const { library, setLibrary } = useLibraryStore();
+  const { getVisibleLibrary, setLibrary } = useLibraryStore();
  const isInitiating = useRef(false);

  const { updateAppTheme } = useTheme();
@@ -38,7 +38,7 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
  }, []);

  return (
-    library.length > 0 &&
+    getVisibleLibrary().length > 0 &&
    settings.globalReadSettings && (
      <div
        className={clsx(
@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';

 import { useSidebarStore } from '@/store/sidebarStore';
-import useTrafficLight from '@/hooks/useTrafficLight';
+import { useTrafficLightStore } from '@/store/trafficLightStore';

 interface SectionInfoProps {
  section?: string;
@@ -11,7 +11,7 @@ interface SectionInfoProps {

 const SectionInfo: React.FC<SectionInfoProps> = ({ section, gapLeft }) => {
  const { isSideBarVisible } = useSidebarStore();
-  const { isTrafficLightVisible } = useTrafficLight();
+  const { isTrafficLightVisible } = useTrafficLightStore();
  return (
    <div
      className={clsx(
@@ -5,17 +5,13 @@ import { BiMoon, BiSun } from 'react-icons/bi';
 import { TbSunMoon } from 'react-icons/tb';
 import { MdZoomOut, MdZoomIn, MdCheck } from 'react-icons/md';

-import {
-  MAX_ZOOM_LEVEL,
-  MIN_ZOOM_LEVEL,
-  ONE_COLUMN_MAX_INLINE_SIZE,
-  ZOOM_STEP,
-} from '@/services/constants';
+import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL, ZOOM_STEP } from '@/services/constants';
 import MenuItem from '@/components/MenuItem';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useTheme, ThemeMode } from '@/hooks/useTheme';
 import { getStyles } from '@/utils/style';
+import { getMaxInlineSize } from '@/utils/config';

 interface ViewMenuProps {
  bookKey: string;
@@ -65,7 +61,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
    getView(bookKey)?.renderer.setAttribute('flow', isScrolledMode ? 'scrolled' : 'paginated');
    getView(bookKey)?.renderer.setAttribute(
      'max-inline-size',
-      `${viewSettings.maxColumnCount === 1 || isScrolledMode ? ONE_COLUMN_MAX_INLINE_SIZE : viewSettings.maxInlineSize}px`,
+      `${getMaxInlineSize(viewSettings)}px`,
    );
    getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!, themeCode));
    viewSettings!.scrolled = isScrolledMode;
@@ -7,6 +7,7 @@ import { HighlightColor, HighlightStyle } from '@/types/book';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';

 interface AnnotationPopupProps {
+  dir: 'ltr' | 'rtl';
  buttons: Array<{ tooltipText: string; Icon: React.ElementType; onClick: () => void }>;
  position: Position;
  trianglePosition: Position;
@@ -22,6 +23,7 @@ const OPTIONS_HEIGHT_PIX = 28;
 const OPTIONS_PADDING_PIX = 16;

 const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
+  dir,
  buttons,
  position,
  trianglePosition,
@@ -35,7 +37,7 @@ const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
  const highlightOptionsHeightPx = useResponsiveSize(OPTIONS_HEIGHT_PIX);
  const highlightOptionsPaddingPx = useResponsiveSize(OPTIONS_PADDING_PIX);
  return (
-    <div>
+    <div dir={dir}>
      <Popup
        width={popupWidth}
        height={popupHeight}
@@ -24,6 +24,7 @@ import { useFoliateEvents } from '../../hooks/useFoliateEvents';
 import { useNotesSync } from '../../hooks/useNotesSync';
 import { getPopupPosition, getPosition, Position, TextSelection } from '@/utils/sel';
 import { eventDispatcher } from '@/utils/event';
+import { HIGHLIGHT_COLOR_HEX } from '@/services/constants';
 import AnnotationPopup from './AnnotationPopup';
 import WiktionaryPopup from './WiktionaryPopup';
 import WikipediaPopup from './WikipediaPopup';
@@ -75,7 +76,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const dictPopupHeight = Math.min(300, maxHeight);
  const transPopupWidth = Math.min(480, maxWidth);
  const transPopupHeight = Math.min(360, maxHeight);
-  const annotPopupWidth = useResponsiveSize(280);
+  const annotPopupWidth = useResponsiveSize(300);
  const annotPopupHeight = useResponsiveSize(44);
  const androidSelectionHandlerHeight = 8;

@@ -95,11 +96,26 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
      }
      setSelection({ key: bookKey, text: sel.toString(), range, index });
    };
+    // FIXME: extremely hacky way to dismiss system selection tools on iOS
+    const makeSelectionOnIOS = (sel: Selection) => {
+      isTextSelected.current = true;
+      const range = sel.getRangeAt(0);
+      setTimeout(() => {
+        sel.removeAllRanges();
+        setTimeout(() => {
+          if (!isTextSelected.current) return;
+          sel.addRange(range);
+          setSelection({ key: bookKey, text: range.toString(), range, index });
+        }, 40);
+      }, 0);
+    };
    const handleSelectionchange = () => {
      // Available on iOS, Android and Desktop, fired when the selection is changed
      // Ideally the popup only shows when the selection is done,
      // but on Android no proper events are fired to notify selection done or I didn't find it,
      // we make the popup show when the selection is changed
+      if (osPlatform === 'ios' || appService?.isIOSApp) return;
+
      const sel = doc.getSelection();
      if (isValidSelection(sel)) {
        if (osPlatform === 'android' && isTouchstarted.current) {
@@ -118,7 +134,11 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
      // Note that on Android, pointerup event is fired after an additional touch event
      const sel = doc.getSelection();
      if (isValidSelection(sel)) {
-        makeSelection(sel, true);
+        if (osPlatform === 'ios' || appService?.isIOSApp) {
+          makeSelectionOnIOS(sel);
+        } else {
+          makeSelection(sel, true);
+        }
      }
    };
    const handleTouchstart = () => {
@@ -157,14 +177,15 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    const detail = (event as CustomEvent).detail;
    const { draw, annotation, doc, range } = detail;
    const { style, color } = annotation as BookNote;
+    const hexColor = color ? HIGHLIGHT_COLOR_HEX[color] : color;
    if (style === 'highlight') {
-      draw(Overlayer.highlight, { color });
+      draw(Overlayer.highlight, { color: hexColor });
    } else if (['underline', 'squiggly'].includes(style as string)) {
      const { defaultView } = doc;
      const node = range.startContainer;
      const el = node.nodeType === 1 ? node : node.parentElement;
      const { writingMode } = defaultView.getComputedStyle(el);
-      draw(Overlayer[style as keyof typeof Overlayer], { writingMode, color });
+      draw(Overlayer[style as keyof typeof Overlayer], { writingMode, color: hexColor });
    }
  };

@@ -231,7 +252,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
      const gridFrame = document.querySelector(`#gridcell-${bookKey}`);
      if (!gridFrame) return;
      const rect = gridFrame.getBoundingClientRect();
-      const triangPos = getPosition(selection.range, rect, viewSettings.vertical);
+      const triangPos = getPosition(selection.range, rect, popupPadding, viewSettings.vertical);
      const annotPopupPos = getPopupPosition(
        triangPos,
        rect,
@@ -466,6 +487,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
      )}
      {showAnnotPopup && trianglePosition && annotPopupPosition && (
        <AnnotationPopup
+          dir={viewSettings.rtl ? 'rtl' : 'ltr'}
          buttons={buttons}
          position={annotPopupPosition}
          trianglePosition={trianglePosition}
@@ -108,18 +108,20 @@ const WikipediaPopup: React.FC<WikipediaPopupProps> = ({
        height={popupHeight}
        position={position}
        trianglePosition={trianglePosition}
-        className='select-text overflow-y-auto'
+        className='select-text'
      >
-        <main className='p-2 font-sans'></main>
-        <footer className='hidden data-[state=loaded]:block data-[state=error]:hidden data-[state=loading]:hidden'>
-          <div className='p-4 text-sm opacity-60'>
-            From <a id='link'>Wikipedia</a>, released under the{' '}
-            <a href='https://en.wikipedia.org/wiki/Wikipedia:Text_of_the_Creative_Commons_Attribution-ShareAlike_4.0_International_License'>
-              CC BY-SA License
-            </a>
-            .
-          </div>
-        </footer>
+        <div className='text-base-content flex h-full flex-col pt-2'>
+          <main className='flex-grow overflow-y-auto px-2 font-sans'></main>
+          <footer className='mt-auto hidden data-[state=loaded]:block data-[state=error]:hidden data-[state=loading]:hidden'>
+            <div className='flex items-center px-4 py-2 text-sm opacity-60'>
+              From <a id='link'>Wikipedia</a>, released under the{' '}
+              <a href='https://en.wikipedia.org/wiki/Wikipedia:Text_of_the_Creative_Commons_Attribution-ShareAlike_4.0_International_License'>
+                CC BY-SA License
+              </a>
+              .
+            </div>
+          </footer>
+        </div>
      </Popup>
    </div>
  );
@@ -163,15 +163,17 @@ const WiktionaryPopup: React.FC<WiktionaryPopupProps> = ({
        width={popupWidth}
        height={popupHeight}
        position={position}
-        className='select-text overflow-y-auto'
+        className='select-text'
      >
-        <main className='p-4 font-sans' />
-        <footer className='hidden data-[state=loaded]:block data-[state=error]:hidden data-[state=loading]:hidden'>
-          <div className='p-4 text-sm opacity-60'>
-            From <a id='link'>Wiktionary</a>, released under the{' '}
-            <a href='https://creativecommons.org/licenses/by-sa/4.0/'>CC BY-SA License</a>.
-          </div>
-        </footer>
+        <div className='flex h-full flex-col'>
+          <main className='flex-grow overflow-y-auto p-4 font-sans' />
+          <footer className='mt-auto hidden data-[state=loaded]:block data-[state=error]:hidden data-[state=loading]:hidden'>
+            <div className='flex items-center px-4 py-2 text-sm opacity-60'>
+              From <a id='link'>Wiktionary</a>, released under the{' '}
+              <a href='https://creativecommons.org/licenses/by-sa/4.0/'>CC BY-SA License</a>.
+            </div>
+          </footer>
+        </div>
      </Popup>
    </div>
  );
@@ -17,9 +17,10 @@ import { useReaderStore } from '@/store/readerStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useTheme } from '@/hooks/useTheme';
+import { useEnv } from '@/context/EnvContext';
 import { getStyles } from '@/utils/style';
 import { getOSPlatform } from '@/utils/misc';
-import { FONT_ENUM_SUPPORTED_OS_PLATFORMS, getSysFontsList } from '@/utils/font';
+import { getSysFontsList } from '@/utils/font';
 import { isTauriAppPlatform } from '@/services/environment';

 interface FontFaceProps {
@@ -60,6 +61,7 @@ const FontFace = ({

 const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const _ = useTranslation();
+  const { appService } = useEnv();
  const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
  const { getView, getViewSettings, setViewSettings } = useReaderStore();
  const view = getView(bookKey);
@@ -109,7 +111,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const [fontWeight, setFontWeight] = useState(viewSettings.fontWeight!);

  useEffect(() => {
-    if (isTauriAppPlatform() && FONT_ENUM_SUPPORTED_OS_PLATFORMS.includes(osPlatform)) {
+    if (isTauriAppPlatform() && appService?.hasSysFontsList) {
      getSysFontsList().then((fonts) => {
        setSysFonts(fonts);
      });
@@ -1,14 +1,15 @@
 import React, { useEffect, useState } from 'react';
 import { MdOutlineAutoMode } from 'react-icons/md';
-import { MdOutlineTextRotationDown, MdOutlineTextRotationNone } from 'react-icons/md';
+import { MdOutlineTextRotationNone, MdTextRotateVertical } from 'react-icons/md';
+import { TbTextDirectionRtl } from 'react-icons/tb';

-import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useTheme } from '@/hooks/useTheme';
 import { getStyles } from '@/utils/style';
+import { getMaxInlineSize } from '@/utils/config';
 import { getBookDirFromWritingMode, getBookLangCode } from '@/utils/book';
 import NumberInput from './NumberInput';

@@ -147,10 +148,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
      setSettings(settings);
    }
    view?.renderer.setAttribute('max-column-count', maxColumnCount);
-    view?.renderer.setAttribute(
-      'max-inline-size',
-      `${maxColumnCount === 1 || viewSettings.scrolled ? ONE_COLUMN_MAX_INLINE_SIZE : maxInlineSize}px`,
-    );
+    view?.renderer.setAttribute('max-inline-size', `${getMaxInlineSize(viewSettings)}px`);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [maxColumnCount]);

@@ -161,10 +159,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
      settings.globalViewSettings.maxInlineSize = maxInlineSize;
      setSettings(settings);
    }
-    view?.renderer.setAttribute(
-      'max-inline-size',
-      `${maxColumnCount === 1 || viewSettings.scrolled ? ONE_COLUMN_MAX_INLINE_SIZE : maxInlineSize}px`,
-    );
+    view?.renderer.setAttribute('max-inline-size', `${getMaxInlineSize(viewSettings)}px`);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [maxInlineSize]);

@@ -181,12 +176,19 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {

  useEffect(() => {
    // global settings are not supported for writing mode
+    const prevWritingMode = viewSettings.writingMode;
    viewSettings.writingMode = writingMode;
    setViewSettings(bookKey, viewSettings);
    if (view) {
      view.renderer.setStyles?.(getStyles(viewSettings, themeCode));
      view.book.dir = getBookDirFromWritingMode(writingMode);
    }
+    if (
+      prevWritingMode !== writingMode &&
+      (writingMode === 'horizontal-rl' || prevWritingMode === 'horizontal-rl')
+    ) {
+      setTimeout(() => window.location.reload(), 100);
+    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [writingMode]);

@@ -202,11 +204,12 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  }, [overrideLayout]);

  const langCode = getBookLangCode(bookData.bookDoc?.metadata?.language);
-  const isCJKBook = langCode === 'zh' || langCode === 'ja' || langCode === 'ko';
+  const mightBeRTLBook =
+    langCode === 'zh' || langCode === 'ja' || langCode === 'ko' || langCode === '';

  return (
    <div className='my-4 w-full space-y-6'>
-      {isCJKBook && (
+      {mightBeRTLBook && (
        <div className='w-full'>
          <div className='flex items-center justify-between'>
            <h2 className='font-medium'>{_('Writing Mode')}</h2>
@@ -234,7 +237,16 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
                  className={`btn btn-ghost btn-circle ${writingMode === 'vertical-rl' ? 'btn-active bg-base-300' : ''}`}
                  onClick={() => setWritingMode('vertical-rl')}
                >
-                  <MdOutlineTextRotationDown />
+                  <MdTextRotateVertical />
+                </button>
+              </div>
+
+              <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('RTL Direction')}>
+                <button
+                  className={`btn btn-ghost btn-circle ${writingMode === 'horizontal-rl' ? 'btn-active bg-base-300' : ''}`}
+                  onClick={() => setWritingMode('horizontal-rl')}
+                >
+                  <TbTextDirectionRtl />
                </button>
              </div>
            </div>
@@ -256,7 +268,6 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
              step={0.5}
            />
            <NumberInput
-              className='config-item-top'
              label={_('Line Spacing')}
              value={lineHeight}
              onChange={setLineHeight}
@@ -265,7 +276,6 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
              step={0.1}
            />
            <NumberInput
-              className='config-item-top'
              label={_('Word Spacing')}
              value={wordSpacing}
              onChange={setWordSpacing}
@@ -274,7 +284,6 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
              step={0.5}
            />
            <NumberInput
-              className='config-item-top'
              label={_('Letter Spacing')}
              value={letterSpacing}
              onChange={setLetterSpacing}
@@ -283,7 +292,6 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
              step={0.1}
            />
            <NumberInput
-              className='config-item-top'
              label={_('Text Indent')}
              value={textIndent}
              onChange={setTextIndent}
@@ -353,6 +361,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
              label={_('Maximum Inline Size')}
              value={maxInlineSize}
              onChange={setMaxInlineSize}
+              disabled={maxColumnCount === 1 || viewSettings.scrolled}
              min={500}
              max={9999}
              step={100}
@@ -52,7 +52,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    setDraftStylesheet(formattedCSS);
    setDraftStylesheetSaved(true);
    viewSettings.userStylesheet = formattedCSS;
-    setViewSettings(bookKey, viewSettings);
+    setViewSettings(bookKey, { ...viewSettings });

    if (isFontLayoutSettingsGlobal) {
      settings.globalViewSettings.userStylesheet = formattedCSS;
@@ -9,6 +9,7 @@ interface NumberInputProps {
  min: number;
  max: number;
  step?: number;
+  disabled?: boolean;
  onChange: (value: number) => void;
 }

@@ -20,6 +21,7 @@ const NumberInput: React.FC<NumberInputProps> = ({
  min,
  max,
  step,
+  disabled,
 }) => {
  const [localValue, setLocalValue] = useState(value);
  const numberStep = step || 1;
@@ -74,13 +76,13 @@ const NumberInput: React.FC<NumberInputProps> = ({
        />
        <button
          onClick={decrement}
-          className={`btn btn-circle btn-sm ${value === min ? 'btn-disabled !bg-opacity-5' : ''}`}
+          className={`btn btn-circle btn-sm ${value <= min || disabled ? 'btn-disabled !bg-opacity-5' : ''}`}
        >
          <FiMinus className='h-4 w-4' />
        </button>
        <button
          onClick={increment}
-          className={`btn btn-circle btn-sm ${value === max ? 'btn-disabled !bg-opacity-5' : ''}`}
+          className={`btn btn-circle btn-sm ${value >= max || disabled ? 'btn-disabled !bg-opacity-5' : ''}`}
        >
          <FiPlus className='h-4 w-4' />
        </button>
@@ -64,7 +64,7 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
        isOpen={true}
        onClose={handleClose}
        className='modal-open'
-        boxClassName='sm:w-1/2 sm:min-w-[480px] sm:h-[65%]'
+        boxClassName='sm:min-w-[520px]'
        header={
          <div className='flex w-full items-center justify-between'>
            <button
@@ -76,12 +76,12 @@ const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ boo
            >
              <MdArrowBackIosNew />
            </button>
-            <div className='dialog-tabs flex h-10 max-w-[100%] flex-grow items-center justify-around pl-4'>
+            <div className='dialog-tabs flex h-10 max-w-[100%] flex-grow items-center pl-4 gap-2'>
              {tabConfig.map(({ tab, icon: Icon, label }) => (
                <button
                  key={tab}
                  className={clsx(
-                    'btn btn-ghost text-base-content h-8 min-h-8',
+                    'btn btn-ghost text-base-content btn-sm',
                    activePanel === tab ? 'btn-active' : '',
                  )}
                  onClick={() => setActivePanel(tab)}
@@ -23,7 +23,7 @@ const BookCard = ({ book }: { book: Book }) => {
        alt={_('Book Cover')}
        width={56}
        height={80}
-        className='mr-4 aspect-auto max-h-16 w-[15%] max-w-12 rounded-sm object-cover shadow-md'
+        className='me-4 aspect-auto max-h-16 w-[15%] max-w-12 rounded-sm object-cover shadow-md'
        onError={(e) => {
          (e.target as HTMLImageElement).style.display = 'none';
        }}
@@ -17,7 +17,7 @@ interface BookMenuProps {

 const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen }) => {
  const _ = useTranslation();
-  const { library } = useLibraryStore();
+  const { getVisibleLibrary } = useLibraryStore();
  const { openParallelView } = useBooksManager();
  const handleParallelView = (id: string) => {
    openParallelView(id);
@@ -48,26 +48,28 @@ const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen })
    >
      <MenuItem label={_('Parallel Read')} noIcon>
        <ul className='max-h-60 overflow-y-auto'>
-          {library.slice(0, 20).map((book) => (
-            <MenuItem
-              key={book.hash}
-              icon={
-                <Image
-                  src={book.coverImageUrl!}
-                  alt={book.title}
-                  width={56}
-                  height={80}
-                  className='aspect-auto max-h-8 max-w-6 rounded-sm shadow-md'
-                  onError={(e) => {
-                    (e.target as HTMLImageElement).style.display = 'none';
-                  }}
-                />
-              }
-              label={book.title}
-              labelClass='max-w-36'
-              onClick={() => handleParallelView(book.hash)}
-            />
-          ))}
+          {getVisibleLibrary()
+            .slice(0, 20)
+            .map((book) => (
+              <MenuItem
+                key={book.hash}
+                icon={
+                  <Image
+                    src={book.coverImageUrl!}
+                    alt={book.title}
+                    width={56}
+                    height={80}
+                    className='aspect-auto max-h-8 max-w-6 rounded-sm shadow-md'
+                    onError={(e) => {
+                      (e.target as HTMLImageElement).style.display = 'none';
+                    }}
+                  />
+                }
+                label={book.title}
+                labelClass='max-w-36'
+                onClick={() => handleParallelView(book.hash)}
+              />
+            ))}
        </ul>
      </MenuItem>
      <MenuItem label={_('Reload Page')} noIcon shortcut='Shift+R' onClick={handleReloadPage} />
@@ -5,8 +5,8 @@ import { FiSearch } from 'react-icons/fi';
 import { MdOutlineMenu, MdOutlinePushPin, MdPushPin } from 'react-icons/md';
 import { MdArrowBackIosNew } from 'react-icons/md';

-import useTrafficLight from '@/hooks/useTrafficLight';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
+import { useTrafficLightStore } from '@/store/trafficLightStore';
 import Dropdown from '@/components/Dropdown';
 import BookMenu from './BookMenu';

@@ -18,16 +18,18 @@ const SidebarHeader: React.FC<{
  onTogglePin: () => void;
  onToggleSearchBar: () => void;
 }> = ({ isPinned, isSearchBarVisible, onGoToLibrary, onClose, onTogglePin, onToggleSearchBar }) => {
-  const { isTrafficLightVisible } = useTrafficLight();
+  const { isTrafficLightVisible } = useTrafficLightStore();
  const iconSize14 = useResponsiveSize(14);
  const iconSize18 = useResponsiveSize(18);
  const iconSize22 = useResponsiveSize(22);
+
  return (
    <div
      className={clsx(
-        'sidebar-header flex h-11 items-center justify-between pr-2',
-        isTrafficLightVisible ? 'pl-20' : 'pl-1.5',
+        'sidebar-header flex h-11 items-center justify-between pe-2',
+        isTrafficLightVisible ? 'pl-20' : 'ps-1.5',
      )}
+      dir='ltr'
    >
      <div className='flex items-center gap-x-8'>
        <button
@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';

+import { impactFeedback } from '@tauri-apps/plugin-haptics';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { useReaderStore } from '@/store/readerStore';
@@ -21,6 +22,8 @@ import useShortcuts from '@/hooks/useShortcuts';
 const MIN_SIDEBAR_WIDTH = 0.05;
 const MAX_SIDEBAR_WIDTH = 0.45;

+const VELOCITY_THRESHOLD = 0.5;
+
 const SideBar: React.FC<{
  onGoToLibrary: () => void;
 }> = ({ onGoToLibrary }) => {
@@ -29,7 +32,7 @@ const SideBar: React.FC<{
  const { settings } = useSettingsStore();
  const { sideBarBookKey } = useSidebarStore();
  const { getBookData } = useBookDataStore();
-  const { getView } = useReaderStore();
+  const { getView, getViewSettings } = useReaderStore();
  const [isSearchBarVisible, setIsSearchBarVisible] = useState(false);
  const [searchResults, setSearchResults] = useState<BookSearchResult[] | null>(null);
  const [searchTerm, setSearchTerm] = useState('');
@@ -95,23 +98,33 @@ const SideBar: React.FC<{
    }
  };

-  const handleVerticalDragEnd = (velocity: number) => {
+  const handleVerticalDragEnd = (data: { velocity: number; clientY: number }) => {
    const sidebar = document.querySelector('.sidebar-container') as HTMLElement;
    const overlay = document.querySelector('.overlay') as HTMLElement;

    if (!sidebar || !overlay) return;

-    if (velocity > 0.5) {
-      sidebar.style.transition = `top ${0.15 / velocity}s ease-out`;
+    if (
+      data.velocity > VELOCITY_THRESHOLD ||
+      (data.velocity >= 0 && data.clientY >= window.innerHeight * 0.5)
+    ) {
+      const transitionDuration = 0.15 / Math.max(data.velocity, 0.5);
+      sidebar.style.transition = `top ${transitionDuration}s ease-out`;
      sidebar.style.top = '100%';
-      overlay.style.transition = `opacity ${0.15 / velocity}s ease-out`;
+      overlay.style.transition = `opacity ${transitionDuration}s ease-out`;
      overlay.style.opacity = '0';
      setTimeout(() => setSideBarVisible(false), 300);
+      if (appService?.hasHaptics) {
+        impactFeedback('medium');
+      }
    } else {
      sidebar.style.transition = 'top 0.3s ease-out';
      sidebar.style.top = '0%';
      overlay.style.transition = 'opacity 0.3s ease-out';
      overlay.style.opacity = '0.8';
+      if (appService?.hasHaptics) {
+        impactFeedback('medium');
+      }
    }
  };

@@ -149,6 +162,7 @@ const SideBar: React.FC<{

  if (!sideBarBookKey) return null;

+  const viewSettings = getViewSettings(sideBarBookKey);
  const bookData = getBookData(sideBarBookKey);
  if (!bookData || !bookData.book || !bookData.bookDoc) {
    return null;
@@ -165,6 +179,7 @@ const SideBar: React.FC<{
          appService?.hasRoundedWindow && 'rounded-window-top-left rounded-window-bottom-left',
          !isSideBarPinned && 'shadow-2xl',
        )}
+        dir={viewSettings?.rtl ? 'rtl' : 'ltr'}
        style={{
          width: `${sideBarWidth}`,
          maxWidth: `${MAX_SIDEBAR_WIDTH * 100}%`,
@@ -15,10 +15,11 @@ const TabNavigation: React.FC<{
  return (
    <div
      className={clsx('bottom-tab border-base-300/50 bg-base-200 relative flex w-full border-t')}
+      dir='ltr'
    >
      <div
        className={clsx(
-          'bg-base-300 absolute bottom-1.5 left-1 h-[calc(100%-12px)] w-[calc(33.3%-8px)] rounded-lg',
+          'bg-base-300 absolute bottom-1.5 start-1 h-[calc(100%-12px)] w-[calc(33.3%-8px)] rounded-lg',
          'transform transition-transform duration-300',
          activeTab === 'toc' && 'translate-x-0',
          activeTab === 'annotations' && 'translate-x-[calc(100%+8px)]',
@@ -112,24 +112,24 @@ const TTSPanel = ({
        </div>
      </div>
      <div className='flex items-center justify-between space-x-2'>
-        <button onClick={onBackward} className='hover:bg-base-200/75 rounded-full p-1'>
+        <button onClick={onBackward} className='rounded-full p-1'>
          <MdFastRewind size={iconSize32} />
        </button>
-        <button onClick={onTogglePlay} className='hover:bg-base-200/75 rounded-full p-1'>
+        <button onClick={onTogglePlay} className='rounded-full p-1'>
          {isPlaying ? (
            <MdPauseCircle size={iconSize48} className='fill-primary' />
          ) : (
            <MdPlayCircle size={iconSize48} className='fill-primary' />
          )}
        </button>
-        <button onClick={onForward} className='hover:bg-base-200/75 rounded-full p-1'>
+        <button onClick={onForward} className='rounded-full p-1'>
          <MdFastForward size={iconSize32} />
        </button>
-        <button onClick={onStop} className='hover:bg-base-200/75 rounded-full p-1'>
+        <button onClick={onStop} className='rounded-full p-1'>
          <MdStop size={iconSize32} />
        </button>
        <div className='dropdown dropdown-top'>
-          <button tabIndex={0} className='hover:bg-base-200/75 rounded-full p-1'>
+          <button tabIndex={0} className='rounded-full p-1'>
            <RiVoiceAiFill size={iconSize32} />
          </button>
          <ul
@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { useAuth } from '@/context/AuthContext';
 import { useSync } from '@/hooks/useSync';
+import { BookNote } from '@/types/book';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { SYNC_NOTES_INTERVAL_SEC } from '@/services/constants';

@@ -12,12 +13,6 @@ export const useNotesSync = (bookKey: string) => {
  const config = getConfig(bookKey);
  const bookHash = bookKey.split('-')[0]!;

-  useEffect(() => {
-    if (!user) return;
-    syncNotes([], bookHash, 'pull');
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
  const lastSyncTime = useRef<number>(0);
  const syncTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);

@@ -57,13 +52,25 @@ export const useNotesSync = (bookKey: string) => {
  }, [config]);

  useEffect(() => {
-    if (syncedNotes?.length && config?.location) {
+    const processNewNote = (note: BookNote) => {
+      const oldNotes = config?.booknotes ?? [];
+      const existingNote = oldNotes.find((oldNote) => oldNote.id === note.id);
+      if (existingNote) {
+        if (existingNote.updatedAt < note.updatedAt) {
+          return { ...existingNote, ...note };
+        } else {
+          return { ...note, ...existingNote };
+        }
+      }
+      return note;
+    };
+    if (syncedNotes?.length && config) {
      const newNotes = syncedNotes.filter((note) => note.bookHash === bookHash);
      if (!newNotes.length) return;
      const oldNotes = config.booknotes ?? [];
      const mergedNotes = [
        ...oldNotes.filter((oldNote) => !newNotes.some((newNote) => newNote.id === oldNote.id)),
-        ...newNotes,
+        ...newNotes.map(processNewNote),
      ];
      setConfig(bookKey, { ...config, booknotes: mergedNotes });
    }
@@ -6,7 +6,7 @@ import { useSettingsStore } from '@/store/settingsStore';
 import { throttle } from '@/utils/throttle';

 export const useProgressAutoSave = (bookKey: string) => {
-  const { envConfig, appService } = useEnv();
+  const { envConfig } = useEnv();
  const { getConfig, saveConfig } = useBookDataStore();
  const { getProgress } = useReaderStore();
  const progress = getProgress(bookKey);
@@ -22,9 +22,6 @@ export const useProgressAutoSave = (bookKey: string) => {
  );

  useEffect(() => {
-    // FIXME: Save book config when progress changes on Android
-    // until we can hook into the lifecycle of the Android app
-    if (!appService?.isAndroidApp || !progress) return;
    saveBookConfig();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [progress, bookKey]);
@@ -5,6 +5,7 @@ import { useTheme } from '@/hooks/useTheme';
 import { hasUpdater } from '@/services/environment';
 import { checkForAppUpdates } from '@/helpers/updater';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useOpenWithBooks } from '@/hooks/useOpenWithBooks';
 import { useSettingsStore } from '@/store/settingsStore';
 import Reader from './components/Reader';

@@ -13,6 +14,7 @@ export default function Page() {
  const { settings } = useSettingsStore();

  useTheme();
+  useOpenWithBooks();

  useEffect(() => {
    const doCheckAppUpdates = async () => {
@@ -0,0 +1,288 @@
+'use client';
+
+import clsx from 'clsx';
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { IoArrowBack } from 'react-icons/io5';
+import { PiUserCircle } from 'react-icons/pi';
+import { useEnv } from '@/context/EnvContext';
+import { useAuth } from '@/context/AuthContext';
+import { useTheme } from '@/hooks/useTheme';
+import { useTranslation } from '@/hooks/useTranslation';
+import { useSettingsStore } from '@/store/settingsStore';
+import { QuotaType, UserPlan } from '@/types/user';
+import { getStoragePlanData, getUserPlan } from '@/utils/access';
+import { navigateToLibrary } from '@/utils/nav';
+import { deleteUser } from '@/libs/user';
+import { eventDispatcher } from '@/utils/event';
+import { Toast } from '@/components/Toast';
+import Quota from '@/components/Quota';
+
+const ProfilePage = () => {
+  const _ = useTranslation();
+  const router = useRouter();
+  const { envConfig, appService } = useEnv();
+  const { token, user, logout } = useAuth();
+  const { settings, setSettings, saveSettings } = useSettingsStore();
+  const [userPlan, setUserPlan] = useState<UserPlan>('free');
+  const [quotas, setQuotas] = React.useState<QuotaType[]>([]);
+  const [showConfirmDelete, setShowConfirmDelete] = useState(false);
+
+  useTheme();
+
+  useEffect(() => {
+    if (!user || !token) return;
+
+    try {
+      const userPlan = getUserPlan(token);
+      const storagePlan = getStoragePlanData(token);
+      const storageQuota = {
+        name: _('Cloud Storage'),
+        tooltip: _('{{percentage}}% of Cloud Storage Used.', {
+          percentage: Math.round((storagePlan.usage / storagePlan.quota) * 100),
+        }),
+        used: Math.round(storagePlan.usage / 1024 / 1024),
+        total: Math.round(storagePlan.quota / 1024 / 1024),
+        unit: 'MB',
+      };
+      setUserPlan(userPlan);
+      setQuotas([storageQuota]);
+    } catch (error) {
+      console.error('Error loading user plan data:', error);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
+  const handleGoBack = () => {
+    navigateToLibrary(router);
+  };
+
+  const handleLogout = () => {
+    logout();
+    settings.keepLogin = false;
+    setSettings(settings);
+    saveSettings(envConfig, settings);
+    navigateToLibrary(router);
+  };
+
+  const handleDeleteRequest = () => {
+    setShowConfirmDelete(true);
+  };
+
+  const handleCancelDelete = () => {
+    setShowConfirmDelete(false);
+  };
+
+  const handleConfirmDelete = async () => {
+    try {
+      await deleteUser();
+      handleLogout();
+    } catch (error) {
+      console.error('Error deleting user:', error);
+      eventDispatcher.dispatch('toast', {
+        type: 'error',
+        message: _('Failed to delete user. Please try again later.'),
+      });
+    }
+    setShowConfirmDelete(false);
+  };
+
+  const getPlanDetails = (userPlan: UserPlan) => {
+    switch (userPlan) {
+      case 'free':
+        return {
+          name: _('Free Tier'),
+          color: 'bg-gray-200 text-gray-800',
+          features: [
+            _('Community Support'),
+            _('DeepL Free Access'),
+            _('Essential Text-to-Speech Voices'),
+            _('Unlimited Offline/Online Reading'),
+            _('Unlimited Cloud Sync Devices'),
+            _('500 MB Cloud Sync Space'),
+          ],
+        };
+      case 'plus':
+        return {
+          name: _('Plus Tier'),
+          color: 'bg-blue-200 text-blue-800',
+          features: [
+            _('Includes All Free Tier Benefits'),
+            _('Priority Support'),
+            _('AI Summaries'),
+            _('AI Translations'),
+            _('DeepL Pro Access'),
+            _('Expanded Text-to-Speech Voices'),
+            _('2000 MB Cloud Sync Space'),
+          ],
+        };
+      case 'pro':
+        return {
+          name: _('Pro Tier'),
+          color: 'bg-purple-200 text-purple-800',
+          features: [
+            _('Includes All Plus Tier Benefits'),
+            _('Unlimited AI Summaries'),
+            _('Unlimited AI Translations'),
+            _('Unlimited DeepL Pro Access'),
+            _('Advanced AI Tools'),
+            _('Early Feature Access'),
+            _('10 GB Cloud Sync Space'),
+          ],
+        };
+    }
+  };
+
+  if (!user || !token) {
+    return (
+      <div className='mx-auto max-w-4xl px-4 py-8'>
+        <div className='overflow-hidden rounded-lg shadow-md'>
+          <div className='flex min-h-[300px] items-center justify-center p-6'>
+            <div className='text-base-content animate-pulse'>{_('Loading profile...')}</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const avatarUrl = user?.user_metadata?.['picture'] || user?.user_metadata?.['avatar_url'];
+  const userFullName = user?.user_metadata?.['full_name'] || '-';
+  const userEmail = user?.email || '';
+  const planDetails = getPlanDetails(userPlan) || getPlanDetails('free');
+
+  return (
+    <div
+      className={clsx(
+        'mt-6 flex justify-center',
+        appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
+        appService?.hasTrafficLight && 'pt-11',
+      )}
+    >
+      <button
+        onClick={handleGoBack}
+        className={clsx(
+          'btn btn-ghost fixed left-4 h-8 min-h-8 w-8 p-0',
+          appService?.hasSafeAreaInset && 'top-[calc(env(safe-area-inset-top)+16px)]',
+          appService?.hasTrafficLight && 'top-11',
+        )}
+      >
+        <IoArrowBack className='text-base-content' />
+      </button>
+      <div className='w-full max-w-4xl px-6 py-10'>
+        <div className='bg-base-200 overflow-hidden rounded-lg p-2 shadow-md sm:p-6'>
+          <div className='p-6'>
+            <div className='mb-8 flex flex-col items-center gap-x-6 gap-y-4 md:flex-row md:items-start'>
+              <div className='flex-shrink-0'>
+                {avatarUrl ? (
+                  <Image
+                    src={avatarUrl}
+                    alt={_('User avatar')}
+                    className='border-base-100 h-16 w-16 rounded-full border-4 md:h-24 md:w-24'
+                    referrerPolicy='no-referrer'
+                    width={128}
+                    height={128}
+                    priority
+                  />
+                ) : (
+                  <PiUserCircle className='h-16 w-16 md:h-24 md:w-24' />
+                )}
+              </div>
+
+              <div className='flex-grow text-center md:text-left'>
+                <h2 className='text-base-content text-xl font-bold md:text-2xl'>{userFullName}</h2>
+                <p className='text-base-content/60'>{userEmail}</p>
+                <div className='mt-3'>
+                  <span
+                    className={`inline-block rounded-full px-3 py-1 text-sm font-medium ${planDetails.color}`}
+                  >
+                    {planDetails.name}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className='bg-base-100 mb-8 rounded-lg p-6'>
+              <h3 className='text-base-content mb-2 text-lg font-semibold'>{_('Features')}</h3>
+              <div className='mt-6'>
+                <ul className='text-base-content/60 grid grid-cols-1 gap-2 md:grid-cols-2'>
+                  {planDetails.features.map((feature, index) => (
+                    <li key={index} className='flex items-center'>
+                      <svg
+                        className='mr-2 h-4 w-4 text-green-500'
+                        fill='currentColor'
+                        viewBox='0 0 20 20'
+                      >
+                        <path
+                          fillRule='evenodd'
+                          d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
+                          clipRule='evenodd'
+                        />
+                      </svg>
+                      {feature}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+
+            <div className='bg-base-300 mb-8 rounded-lg'>
+              <div className='p-0'>
+                {quotas && quotas.length > 0 ? (
+                  <Quota quotas={quotas} showProgress className='h-10 pl-4 pr-2' />
+                ) : (
+                  <div className='h-10 animate-pulse'></div>
+                )}
+              </div>
+            </div>
+
+            <div className='flex flex-col gap-4 md:flex-row'>
+              <button
+                onClick={handleLogout}
+                className='w-full rounded-lg bg-gray-200 px-6 py-3 font-medium text-gray-800 transition-colors hover:bg-gray-300 md:w-auto'
+              >
+                {_('Sign Out')}
+              </button>
+              <button
+                onClick={handleDeleteRequest}
+                className='w-full rounded-lg bg-red-100 px-6 py-3 font-medium text-red-600 transition-colors hover:bg-red-200 md:w-auto'
+              >
+                {_('Delete Account')}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {showConfirmDelete && (
+          <div className='fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4'>
+            <div className='w-full max-w-md rounded-2xl bg-white p-6'>
+              <h3 className='mb-4 text-xl font-bold text-gray-800'>{_('Delete Your Account?')}</h3>
+              <p className='mb-6 text-gray-600'>
+                {_(
+                  'This action cannot be undone. All your data in the cloud will be permanently deleted.',
+                )}
+              </p>
+              <div className='flex flex-col gap-3 sm:flex-row'>
+                <button
+                  onClick={handleCancelDelete}
+                  className='flex-1 rounded-lg bg-gray-300 px-4 py-2 font-medium text-gray-800 hover:bg-gray-400'
+                >
+                  {_('Cancel')}
+                </button>
+                <button
+                  onClick={handleConfirmDelete}
+                  className='flex-1 rounded-lg bg-red-500 px-4 py-2 font-medium text-white hover:bg-red-600'
+                >
+                  {_('Delete Permanently')}
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+      <Toast />
+    </div>
+  );
+};
+
+export default ProfilePage;
@@ -82,7 +82,7 @@ const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
        title={_('Book Details')}
        isOpen={isOpen}
        onClose={handleClose}
-        className='!bg-[rgba(0,0,0,0.5)]'
+        bgClassName='sm:bg-black/50'
        boxClassName='sm:min-w-[480px] sm:h-auto'
        contentClassName='!px-6 !py-2'
      >
@@ -1,12 +1,11 @@
 import clsx from 'clsx';
-import React, { ReactNode, useEffect, useState } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import { MdArrowBackIosNew } from 'react-icons/md';
 import { useEnv } from '@/context/EnvContext';
 import { useDrag } from '@/hooks/useDrag';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { impactFeedback } from '@tauri-apps/plugin-haptics';

-const DISMISS_THRESHOLD = 100;
 const VELOCITY_THRESHOLD = 0.5;

 interface DialogProps {
@@ -16,6 +15,7 @@ interface DialogProps {
  header?: ReactNode;
  title?: string;
  className?: string;
+  bgClassName?: string;
  boxClassName?: string;
  contentClassName?: string;
  onClose: () => void;
@@ -28,12 +28,12 @@ const Dialog: React.FC<DialogProps> = ({
  header,
  title,
  className,
+  bgClassName,
  boxClassName,
  contentClassName,
  onClose,
 }) => {
  const { appService } = useEnv();
-  const [translateY, setTranslateY] = useState(0);
  const iconSize22 = useResponsiveSize(22);
  const isMobile = window.innerWidth < 640;

@@ -56,27 +56,42 @@ const Dialog: React.FC<DialogProps> = ({

    const modal = document.querySelector('.modal-box') as HTMLElement;
    const overlay = document.querySelector('.overlay') as HTMLElement;
+
+    const heightFraction = data.clientY / window.innerHeight;
+    const newTop = Math.max(0.0, Math.min(1, heightFraction));
+
    if (modal && overlay) {
      modal.style.transition = '';
-      overlay.style.opacity = `${1 - data.clientY / window.innerHeight}`;
+      modal.style.transform = `translateY(${newTop * 100}%)`;
+      overlay.style.opacity = `${1 - heightFraction}`;
    }
-    setTranslateY((prev) => Math.max(prev + data.deltaY, 0));
  };

-  const handleDragEnd = (velocity: number) => {
+  const handleDragEnd = (data: { velocity: number; clientY: number }) => {
    const modal = document.querySelector('.modal-box') as HTMLElement;
-    if (!modal) return;
+    const overlay = document.querySelector('.overlay') as HTMLElement;
+    if (!modal || !overlay) return;

-    if (translateY > DISMISS_THRESHOLD || velocity > VELOCITY_THRESHOLD) {
-      modal.style.transition = `transform ${0.15 / velocity}s ease-out`;
-      onClose();
-      setTimeout(() => setTranslateY(0), 300);
+    if (
+      data.velocity > VELOCITY_THRESHOLD ||
+      (data.velocity >= 0 && data.clientY >= window.innerHeight * 0.5)
+    ) {
+      const transitionDuration = 0.15 / Math.max(data.velocity, 0.5);
+      modal.style.transition = `transform ${transitionDuration}s ease-out`;
+      modal.style.transform = 'translateY(100%)';
+      overlay.style.transition = `opacity ${transitionDuration}s ease-out`;
+      overlay.style.opacity = '0';
+      setTimeout(() => {
+        onClose();
+        modal.style.transform = 'translateY(0%)';
+      }, 300);
      if (appService?.hasHaptics) {
        impactFeedback('medium');
      }
    } else {
      modal.style.transition = `transform 0.3s ease-out`;
-      setTranslateY(0);
+      modal.style.transform = `translateY(0%)`;
+      overlay.style.opacity = '0';
      if (appService?.hasHaptics) {
        impactFeedback('medium');
      }
@@ -89,19 +104,19 @@ const Dialog: React.FC<DialogProps> = ({
    <dialog
      id={id ?? 'dialog'}
      open={isOpen}
-      className={clsx('modal sm:min-w-90 z-50 h-full w-full sm:w-full', className)}
+      className={clsx('modal sm:min-w-90 z-50 h-full w-full !bg-transparent sm:w-full', className)}
    >
-      <div className='overlay fixed inset-0 z-10 bg-black/30 sm:bg-black/20' />
+      <div className={clsx('overlay fixed inset-0 z-10 bg-black/50 sm:bg-black/20', bgClassName)} />
      <div
        className={clsx(
          'modal-box settings-content z-20 flex flex-col rounded-none rounded-tl-2xl rounded-tr-2xl p-0 sm:rounded-2xl',
-          'h-full max-h-full w-full max-w-full sm:w-[65%] sm:max-w-[600px]',
+          'h-full max-h-full w-full max-w-full',
+          window.innerWidth < window.innerHeight
+            ? 'sm:h-[50%] sm:w-3/4'
+            : 'sm:h-[65%] sm:w-1/2 sm:max-w-[600px]',
          appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)] sm:pt-0',
          boxClassName,
        )}
-        style={{
-          transform: `translateY(${translateY}px)`,
-        }}
      >
        {window.innerWidth < 640 && (
          <div
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React from 'react';

 type QuotaProps = {
@@ -8,26 +9,48 @@ type QuotaProps = {
    total: number;
    unit: string;
  }[];
+  className?: string;
+  showProgress?: boolean;
 };

-const Quota: React.FC<QuotaProps> = ({ quotas }) => {
+const Quota: React.FC<QuotaProps> = ({ quotas, showProgress, className }) => {
  return (
-    <div className='w-full max-w-lg rounded-md pl-4 pr-2 text-base sm:text-sm'>
-      <div>
-        {quotas.map((quota) => (
-          <div key={quota.name} className='flex h-10 items-center justify-between'>
-            <div className='lg:tooltip lg:tooltip-bottom' data-tip={quota.tooltip}>
-              <div className='flex max-w-28 items-center gap-x-2'>
+    <div className={clsx('text-base-content w-full space-y-2 rounded-md text-base sm:text-sm')}>
+      {quotas.map((quota) => {
+        const usagePercentage = (quota.used / quota.total) * 100;
+        let bgColor = 'bg-green-500';
+        if (usagePercentage > 80) {
+          bgColor = 'bg-red-500';
+        } else if (usagePercentage > 50) {
+          bgColor = 'bg-yellow-500';
+        }
+
+        return (
+          <div
+            key={quota.name}
+            className={clsx(
+              'relative w-full overflow-hidden rounded-md',
+              showProgress && 'border-base-300 border',
+            )}
+          >
+            {showProgress && (
+              <div
+                className={`absolute left-0 top-0 h-full ${bgColor}`}
+                style={{ width: `${usagePercentage}%` }}
+              ></div>
+            )}
+
+            <div className={clsx('relative flex items-center justify-between p-2', className)}>
+              <div className='lg:tooltip lg:tooltip-bottom' data-tip={quota.tooltip}>
                <span className='truncate'>{quota.name}</span>
              </div>
-            </div>
-
-            <div className='py-3 text-right text-xs'>
-              {quota.used} / {quota.total} {quota.unit}
+              <div className='text-right text-xs'>
+                {quota.used} / {quota.total} {quota.unit}
+              </div>
            </div>
          </div>
-        ))}
-      </div>
+        );
+      })}
    </div>
  );
 };
@@ -2,7 +2,14 @@ import { useCallback, useRef } from 'react';

 export const useDrag = (
  onDragMove: (data: { clientX: number; clientY: number; deltaX: number; deltaY: number }) => void,
-  onDragEnd?: (velocity: number) => void,
+  onDragEnd?: (data: {
+    velocity: number;
+    deltaT: number;
+    clientX: number;
+    clientY: number;
+    deltaX: number;
+    deltaY: number;
+  }) => void,
 ) => {
  const isDragging = useRef(false);
  const startX = useRef(0);
@@ -52,17 +59,28 @@ export const useDrag = (

      const handleEnd = (event: MouseEvent | TouchEvent) => {
        isDragging.current = false;
+        let deltaX = 0;
+        let deltaY = 0;
+        let clientX = 0;
+        let clientY = 0;
        const endTime = performance.now();
        const deltaT = endTime - startTime.current;

-        const distanceY =
-          'touches' in event
-            ? event.changedTouches[0]!.clientY - startY.current
-            : event.clientY - startY.current;
-        const velocity = distanceY / deltaT;
+        if ('touches' in event) {
+          const currentTouch = event.changedTouches[0]!;
+          clientX = currentTouch.clientX;
+          clientY = currentTouch.clientY;
+        } else {
+          const evt = event as MouseEvent;
+          clientX = evt.clientX;
+          clientY = evt.clientY;
+        }
+        deltaX = clientX - startX.current;
+        deltaY = clientY - startY.current;
+        const velocity = deltaY / deltaT;

        if (onDragEnd) {
-          onDragEnd(velocity);
+          onDragEnd({ velocity, deltaT, clientX, clientY, deltaX, deltaY });
        }

        window.removeEventListener('mousemove', handleMove);
@@ -0,0 +1,44 @@
+import { useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { onOpenUrl } from '@tauri-apps/plugin-deep-link';
+import { isTauriAppPlatform } from '@/services/environment';
+import { useLibraryStore } from '@/store/libraryStore';
+import { navigateToLibrary } from '@/utils/nav';
+
+export function useOpenWithBooks() {
+  const router = useRouter();
+  const { setCheckOpenWithBooks } = useLibraryStore();
+  const listenedOpenWithBooks = useRef(false);
+
+  const handleOpenWithFileUrl = (url: string) => {
+    let filePath = url;
+    if (filePath.startsWith('file://')) {
+      filePath = decodeURI(filePath.replace('file://', ''));
+    }
+    if (filePath.startsWith('/')) {
+      window.OPEN_WITH_FILES = [filePath];
+      setCheckOpenWithBooks(true);
+      navigateToLibrary(router, `reload=${Date.now()}`);
+    }
+  };
+
+  useEffect(() => {
+    if (!isTauriAppPlatform()) return;
+    if (listenedOpenWithBooks.current) return;
+    listenedOpenWithBooks.current = true;
+
+    const listenOpenWithFiles = async () => {
+      return await onOpenUrl((urls) => {
+        urls.forEach((url) => {
+          handleOpenWithFileUrl(url);
+        });
+      });
+    };
+
+    const unlisten = listenOpenWithFiles();
+    return () => {
+      unlisten.then((f) => f());
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}
@@ -1,7 +1,10 @@
 import { useEffect, useRef } from 'react';
+import { getCurrentWindow } from '@tauri-apps/api/window';
+import { isTauriAppPlatform, isWebAppPlatform } from '@/services/environment';

 export const useScreenWakeLock = (lock: boolean) => {
  const wakeLockRef = useRef<WakeLockSentinel | null>(null);
+  const unlistenOnFocusChangedRef = useRef<Promise<() => void> | null>(null);

  useEffect(() => {
    const requestWakeLock = async () => {
@@ -20,20 +23,50 @@ export const useScreenWakeLock = (lock: boolean) => {
      }
    };

-    if (lock) {
-      requestWakeLock();
-    } else if (wakeLockRef.current) {
-      wakeLockRef.current.release();
-      wakeLockRef.current = null;
-      console.log('Wake lock released');
-    }
-
-    return () => {
+    const releaseWakeLock = () => {
      if (wakeLockRef.current) {
        wakeLockRef.current.release();
        wakeLockRef.current = null;
        console.log('Wake lock released');
      }
    };
+
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        releaseWakeLock();
+      } else {
+        requestWakeLock();
+      }
+    };
+
+    if (lock) {
+      requestWakeLock();
+    } else if (wakeLockRef.current) {
+      releaseWakeLock();
+    }
+
+    if (isWebAppPlatform() && lock) {
+      document.addEventListener('visibilitychange', handleVisibilityChange);
+    } else if (isTauriAppPlatform() && lock) {
+      unlistenOnFocusChangedRef.current = getCurrentWindow().onFocusChanged(
+        ({ payload: focused }) => {
+          if (focused) {
+            requestWakeLock();
+          } else {
+            releaseWakeLock();
+          }
+        },
+      );
+    }
+
+    return () => {
+      releaseWakeLock();
+      if (isWebAppPlatform() && lock) {
+        document.removeEventListener('visibilitychange', handleVisibilityChange);
+      }
+      if (unlistenOnFocusChangedRef.current) {
+        unlistenOnFocusChangedRef.current.then((f) => f());
+      }
+    };
  }, [lock]);
 };
@@ -1,47 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useEnv } from '@/context/EnvContext';
-
-/**
- * Custom hook to get the visibility of the traffic light (window control buttons on macOS)
- * based on the fullscreen state of the application window.
- *
- * @returns {Object} An object containing:
- * - `isTrafficLightVisible` (boolean): A state indicating whether the traffic light is visible.
- */
-const useTrafficLight = () => {
-  const { appService } = useEnv();
-  const [isTrafficLightVisible, setVisible] = useState(appService?.hasTrafficLight ?? false);
-  let unlistenEnterFullScreen: () => void;
-  let unlistenExitFullScreen: () => void;
-
-  const handleSwitchFullScreen = async () => {
-    const { getCurrentWindow } = await import('@tauri-apps/api/window');
-    const currentWindow = getCurrentWindow();
-    const isFullscreen = await currentWindow.isFullscreen();
-    if (appService?.hasTrafficLight) setVisible(!isFullscreen);
-
-    unlistenEnterFullScreen = await currentWindow.listen('will-enter-fullscreen', () => {
-      if (appService?.hasTrafficLight) setVisible(false);
-    });
-
-    unlistenExitFullScreen = await currentWindow.listen('will-exit-fullscreen', () => {
-      if (appService?.hasTrafficLight) setVisible(true);
-    });
-  };
-
-  useEffect(() => {
-    if (!appService?.hasTrafficLight) return;
-
-    handleSwitchFullScreen();
-
-    return () => {
-      unlistenEnterFullScreen?.();
-      unlistenExitFullScreen?.();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return { isTrafficLightVisible };
-};
-
-export default useTrafficLight;
@@ -0,0 +1,26 @@
+import { ViewSettings } from '@/types/book';
+import { useEffect, useState } from 'react';
+
+// This hook allows you to inject custom CSS into the reader UI.
+// Note that the book content is rendered in an iframe, so UI CSS won't affect book rendering.
+export const useUICSS = (bookKey: string, viewSettings: ViewSettings) => {
+  const [styleElement, setStyleElement] = useState<HTMLStyleElement | null>(null);
+
+  useEffect(() => {
+    if (!viewSettings) return;
+    if (styleElement) {
+      styleElement.remove();
+    }
+
+    const rawCSS = viewSettings.userStylesheet;
+    const newStyleEl = document.createElement('style');
+    newStyleEl.textContent = rawCSS.replace('foliate-view', `#foliate-view-${bookKey}`);
+    document.head.appendChild(newStyleEl);
+    setStyleElement(newStyleEl);
+
+    return () => {
+      newStyleEl.remove();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [viewSettings]);
+};
@@ -1,5 +1,6 @@
 import { getAPIBaseUrl, isWebAppPlatform } from '@/services/environment';
-import { getAccessToken, getUserID } from '@/utils/access';
+import { getUserID } from '@/utils/access';
+import { fetchWithAuth } from '@/utils/fetch';
 import {
  tauriUpload,
  tauriDownload,
@@ -15,27 +16,6 @@ const API_ENDPOINTS = {
  delete: getAPIBaseUrl() + '/storage/delete',
 };

-const fetchWithAuth = async (url: string, options: RequestInit) => {
-  const token = await getAccessToken();
-  if (!token) {
-    throw new Error('Not authenticated');
-  }
-  const headers = {
-    ...options.headers,
-    Authorization: `Bearer ${token}`,
-  };
-
-  const response = await fetch(url, { ...options, headers });
-
-  if (!response.ok) {
-    const errorData = await response.json();
-    console.error('Error:', errorData.error || response.statusText);
-    throw new Error(errorData.error || 'Request failed');
-  }
-
-  return response;
-};
-
 export const createProgressHandler = (
  totalFiles: number,
  completedFilesRef: { count: number },
@@ -0,0 +1,21 @@
+import { getAPIBaseUrl } from '@/services/environment';
+import { getUserID } from '@/utils/access';
+import { fetchWithAuth } from '@/utils/fetch';
+
+const API_ENDPOINT = getAPIBaseUrl() + '/user/delete';
+
+export const deleteUser = async () => {
+  try {
+    const userId = await getUserID();
+    if (!userId) {
+      throw new Error('Not authenticated');
+    }
+
+    await fetchWithAuth(API_ENDPOINT, {
+      method: 'DELETE',
+    });
+  } catch (error) {
+    console.error('User deletion failed:', error);
+    throw new Error('User deletion failed');
+  }
+};
@@ -28,7 +28,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  const { user, token } = await getUserAndToken(req.headers['authorization']);
  let deeplApiUrl = DEEPL_FREE_API;
  if (user && token) {
-    const userPlan = await getUserPlan(token);
+    const userPlan = getUserPlan(token);
    if (userPlan !== 'free') deeplApiUrl = DEEPL_PRO_API;
  }
  const deeplAuthKey =
@@ -30,19 +30,26 @@ const getUserAndToken = async (req: NextRequest) => {
  if (!authHeader) return {};

  const token = authHeader.replace('Bearer ', '');
-  const {
-    data: { user },
-    error,
-  } = await supabase.auth.getUser(token);
-
-  if (error || !user) return {};
-  return { user, token };
+  try {
+    const {
+      data: { user },
+      error,
+    } = await supabase.auth.getUser(token);
+    if (error?.message === 'fetch failed') {
+      return { error: 'Network error' };
+    } else if (error || !user) {
+      return { error: 'Not authenticated' };
+    }
+    return { user, token };
+  } catch {
+    return { error: 'Network error' };
+  }
 };

 export async function GET(req: NextRequest) {
-  const { user, token } = await getUserAndToken(req);
-  if (!user || !token) {
-    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+  const { user, token, error } = await getUserAndToken(req);
+  if (!user || !token || error) {
+    return NextResponse.json({ error: error || 'Unknown error' }, { status: 401 });
  }
  const supabase = createSupabaseClient(token);

@@ -114,9 +121,9 @@ export async function GET(req: NextRequest) {
 }

 export async function POST(req: NextRequest) {
-  const { user, token } = await getUserAndToken(req);
-  if (!user || !token) {
-    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+  const { user, token, error } = await getUserAndToken(req);
+  if (!user || !token || error) {
+    return NextResponse.json({ error: error || 'Unknown error' }, { status: 401 });
  }
  const supabase = createSupabaseClient(token);

@@ -173,8 +180,6 @@ export async function POST(req: NextRequest) {
          clientDeletedAt > serverDeletedAt || clientUpdatedAt > serverUpdatedAt;

        if (clientIsNewer) {
-          // use server updated_at for updated records
-          dbRec.updated_at = new Date().toISOString();
          const { data: updated, error: updateError } = await supabase
            .from(table)
            .update(dbRec)
@@ -0,0 +1,30 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { corsAllMethods, runMiddleware } from '@/utils/cors';
+import { createSupabaseAdminClient } from '@/utils/supabase';
+import { validateUserAndToken } from '@/utils/access';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  await runMiddleware(req, res, corsAllMethods);
+
+  if (req.method !== 'DELETE') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    const { user, token } = await validateUserAndToken(req.headers['authorization']);
+    if (!user || !token) {
+      return res.status(403).json({ error: 'Not authenticated' });
+    }
+
+    const supabaseAdmin = createSupabaseAdminClient();
+    const { error } = await supabaseAdmin.auth.admin.deleteUser(user.id);
+    if (error) {
+      return res.status(500).json({ error: error.message });
+    }
+
+    res.status(200).json({ message: 'User deleted successfully' });
+  } catch (error) {
+    console.error(error);
+    return res.status(500).json({ error: 'Something went wrong' });
+  }
+}
@@ -53,6 +53,7 @@ export abstract class BaseAppService implements AppService {
  abstract hasRoundedWindow: boolean;
  abstract hasSafeAreaInset: boolean;
  abstract hasHaptics: boolean;
+  abstract hasSysFontsList: boolean;

  abstract resolvePath(fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string };
  abstract getCoverImageUrl(book: Book): string;
@@ -3,12 +3,14 @@ import {
  BookLayout,
  BookSearchConfig,
  BookStyle,
+  HighlightColor,
  TTSConfig,
  ViewConfig,
  ViewSettings,
 } from '@/types/book';
 import { ReadSettings, SystemSettings } from '@/types/settings';
 import { UserStorageQuota } from '@/types/user';
+import { getDefaultMaxBlockSize, getDefaultMaxInlineSize } from '@/utils/config';

 export const LOCAL_BOOKS_SUBDIR = 'Readest/Books';
 export const CLOUD_BOOKS_SUBDIR = 'Readest/Books';
@@ -61,11 +63,12 @@ export const DEFAULT_BOOK_LAYOUT: BookLayout = {
  scrolled: false,
  disableClick: false,
  maxColumnCount: 2,
-  maxInlineSize: 720,
-  maxBlockSize: 1440,
+  maxInlineSize: getDefaultMaxInlineSize(),
+  maxBlockSize: getDefaultMaxBlockSize(),
  animated: false,
  writingMode: 'auto',
  vertical: false,
+  rtl: false,
 };

 export const DEFAULT_BOOK_STYLE: BookStyle = {
@@ -380,8 +383,6 @@ export const ANDROID_FONTS = [
  'XiHeiti',
 ];

-export const ONE_COLUMN_MAX_INLINE_SIZE = 9999;
-
 export const BOOK_IDS_SEPARATOR = '+';

 export const DOWNLOAD_READEST_URL = 'https://readest.com?utm_source=readest_web';
@@ -406,3 +407,11 @@ export const DEFAULT_STORAGE_QUOTA: UserStorageQuota = {
 export const DOUBLE_CLICK_INTERVAL_THRESHOLD_MS = 250;
 export const DISABLE_DOUBLE_CLICK_ON_MOBILE = true;
 export const LONG_HOLD_THRESHOLD = 500;
+
+export const HIGHLIGHT_COLOR_HEX: Record<HighlightColor, string> = {
+  red: '#f87171', // red-400
+  yellow: '#facc15', // yellow-400
+  green: '#4ade80', // green-400
+  blue: '#60a5fa', // blue-400
+  violet: '#a78bfa', // violet-400
+};
@@ -127,6 +127,7 @@ export class NativeAppService extends BaseAppService {
  hasRoundedWindow = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
  hasSafeAreaInset = OS_TYPE === 'ios' || OS_TYPE === 'android';
  hasHaptics = OS_TYPE === 'ios' || OS_TYPE === 'android';
+  hasSysFontsList = !(OS_TYPE === 'ios' || OS_TYPE === 'android');

  override resolvePath(fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string } {
    return resolvePath(fp, base);
@@ -189,6 +189,7 @@ export class WebAppService extends BaseAppService {
  hasRoundedWindow = false;
  hasSafeAreaInset = isPWA();
  hasHaptics = false;
+  hasSysFontsList = false;

  override resolvePath(fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string } {
    return resolvePath(fp, base);
@@ -3,9 +3,10 @@ import { Book } from '@/types/book';
 import { EnvConfigType } from '@/services/environment';

 interface LibraryState {
-  library: Book[];
+  library: Book[]; // might contain deleted books
  checkOpenWithBooks: boolean;
-  clearOpenWithBooks: () => void;
+  getVisibleLibrary: () => Book[];
+  setCheckOpenWithBooks: (check: boolean) => void;
  setLibrary: (books: Book[]) => void;
  updateBook: (envConfig: EnvConfigType, book: Book) => void;
 }
@@ -13,7 +14,8 @@ interface LibraryState {
 export const useLibraryStore = create<LibraryState>((set, get) => ({
  library: [],
  checkOpenWithBooks: true,
-  clearOpenWithBooks: () => set({ checkOpenWithBooks: false }),
+  getVisibleLibrary: () => get().library.filter((book) => !book.deletedAt),
+  setCheckOpenWithBooks: (check) => set({ checkOpenWithBooks: check }),
  setLibrary: (books) => set({ library: books }),
  updateBook: async (envConfig: EnvConfigType, book: Book) => {
    const appService = await envConfig.getAppService();
@@ -0,0 +1,69 @@
+import { create } from 'zustand';
+import { invoke } from '@tauri-apps/api/core';
+import { AppService } from '@/types/system';
+
+const WINDOW_CONTROL_PAD_X = 10.0;
+const WINDOW_CONTROL_PAD_Y = 22.0;
+
+interface TrafficLightState {
+  appService?: AppService;
+  isTrafficLightVisible: boolean;
+  shouldShowTrafficLight: boolean;
+  initializeTrafficLightStore: (appService: AppService) => void;
+  setTrafficLightVisibility: (visible: boolean) => void;
+  initializeTrafficLightListeners: () => Promise<void>;
+  cleanupTrafficLightListeners: () => void;
+  unlistenEnterFullScreen?: () => void;
+  unlistenExitFullScreen?: () => void;
+}
+
+export const useTrafficLightStore = create<TrafficLightState>((set, get) => {
+  return {
+    appService: undefined,
+    isTrafficLightVisible: false,
+    shouldShowTrafficLight: false,
+
+    initializeTrafficLightStore: (appService: AppService) => {
+      set({
+        appService,
+        isTrafficLightVisible: appService.hasTrafficLight,
+        shouldShowTrafficLight: appService.hasTrafficLight,
+      });
+    },
+
+    setTrafficLightVisibility: async (visible: boolean) => {
+      const { getCurrentWindow } = await import('@tauri-apps/api/window');
+      const currentWindow = getCurrentWindow();
+      const isFullscreen = await currentWindow.isFullscreen();
+      set({ isTrafficLightVisible: !isFullscreen && visible, shouldShowTrafficLight: visible });
+      invoke('set_traffic_lights', {
+        visible: visible,
+        x: WINDOW_CONTROL_PAD_X,
+        y: WINDOW_CONTROL_PAD_Y,
+      });
+    },
+
+    initializeTrafficLightListeners: async () => {
+      const { getCurrentWindow } = await import('@tauri-apps/api/window');
+      const currentWindow = getCurrentWindow();
+
+      const unlistenEnterFullScreen = await currentWindow.listen('will-enter-fullscreen', () => {
+        set({ isTrafficLightVisible: false });
+      });
+
+      const unlistenExitFullScreen = await currentWindow.listen('will-exit-fullscreen', () => {
+        const { shouldShowTrafficLight } = get();
+        set({ isTrafficLightVisible: shouldShowTrafficLight });
+      });
+
+      set({ unlistenEnterFullScreen, unlistenExitFullScreen });
+    },
+
+    cleanupTrafficLightListeners: () => {
+      const { unlistenEnterFullScreen, unlistenExitFullScreen } = get();
+      if (unlistenEnterFullScreen) unlistenEnterFullScreen();
+      if (unlistenExitFullScreen) unlistenExitFullScreen();
+      set({ unlistenEnterFullScreen: undefined, unlistenExitFullScreen: undefined });
+    },
+  };
+});
@@ -7,6 +7,7 @@
  --foreground: #171717;
  border-radius: 10px;
  scrollbar-gutter: auto !important;
+  overscroll-behavior: none;
 }

@media (prefers-color-scheme: dark) {
@@ -35,6 +36,7 @@ body {
    sans-serif;
  border-radius: 10px;
  background-color: transparent;
+  cursor: default;
 }

@layer utilities {
@@ -262,3 +264,7 @@ foliate-view {
  font-size: 0.75em !important;
  line-height: 1em !important;
 }
+
+.direction-rtl {
+  direction: rtl;
+}
@@ -66,6 +66,7 @@ export interface BookLayout {
  animated: boolean;
  writingMode: WritingMode;
  vertical: boolean;
+  rtl: boolean;
 }

 export interface BookStyle {
@@ -30,6 +30,7 @@ export interface AppService {
  hasRoundedWindow: boolean;
  hasSafeAreaInset: boolean;
  hasHaptics: boolean;
+  hasSysFontsList: boolean;
  isMobile: boolean;
  isAppDataSandbox: boolean;
  isAndroidApp: boolean;
@@ -10,7 +10,7 @@ interface Token {
  [key: string]: string | number;
 }

-export const getUserPlan = async (token: string): Promise<UserPlan> => {
+export const getUserPlan = (token: string): UserPlan => {
  const data = jwtDecode<Token>(token) || {};
  return data['plan'] || 'free';
 };
@@ -57,9 +57,9 @@ export const listFormater = (narrow = false, lang = userLang) => {
 export const getBookLangCode = (lang: string | string[] | undefined) => {
  try {
    const bookLang = typeof lang === 'string' ? lang : lang?.[0];
-    return bookLang ? bookLang.split('-')[0]! : 'en';
+    return bookLang ? bookLang.split('-')[0]! : '';
  } catch {
-    return 'en';
+    return '';
  }
 };

@@ -67,7 +67,7 @@ export const formatAuthors = (
  contributors: string | Contributor | [string | Contributor],
  bookLang?: string | string[],
 ) => {
-  const langCode = getBookLangCode(bookLang);
+  const langCode = getBookLangCode(bookLang) || 'en';
  return Array.isArray(contributors)
    ? listFormater(langCode === 'zh', langCode).format(
        contributors.map((contributor) =>
@@ -90,6 +90,10 @@ export const formatLanguage = (lang: string | string[] | undefined) => {
  return Array.isArray(lang) ? lang.join(', ') : lang;
 };

+export const primaryLanguage = (lang: string | string[] | undefined) => {
+  return Array.isArray(lang) ? lang[0] : lang;
+};
+
 export const formatDate = (date: string | number | Date | undefined) => {
  if (!date) return;
  try {
@@ -131,3 +135,11 @@ export const getBookDirFromWritingMode = (writingMode: WritingMode) => {
      return 'auto';
  }
 };
+
+export const getBookDirFromLanguage = (language: string | string[] | undefined) => {
+  const lang = primaryLanguage(language);
+  if (!lang) return 'auto';
+  const rtlLanguages = new Set(['ar', 'he', 'fa', 'ur', 'dv', 'ps', 'sd', 'yi']);
+  const primaryLang = lang.split('-')[0]!.toLowerCase();
+  return rtlLanguages.has(primaryLang) ? 'rtl' : 'auto';
+};
@@ -0,0 +1,25 @@
+import { ViewSettings } from '@/types/book';
+
+export const getMaxInlineSize = (viewSettings: ViewSettings) => {
+  const isScrolled = viewSettings.scrolled!;
+  const maxColumnCount = viewSettings.maxColumnCount!;
+  const screenWidth = window.innerWidth;
+
+  return maxColumnCount === 1 || isScrolled ? screenWidth : viewSettings.maxInlineSize!;
+};
+
+export const getDefaultMaxInlineSize = () => {
+  if (typeof window === 'undefined') return 720;
+
+  const screenWidth = window.innerWidth;
+  const screenHeight = window.innerHeight;
+  return screenWidth < screenHeight ? Math.max(screenWidth, 720) : 720;
+};
+
+export const getDefaultMaxBlockSize = () => {
+  if (typeof window === 'undefined') return 1440;
+
+  const screenWidth = window.innerWidth;
+  const screenHeight = window.innerHeight;
+  return Math.max(screenWidth, screenHeight, 1440);
+};
@@ -0,0 +1,22 @@
+import { getAccessToken } from './access';
+
+export const fetchWithAuth = async (url: string, options: RequestInit) => {
+  const token = await getAccessToken();
+  if (!token) {
+    throw new Error('Not authenticated');
+  }
+  const headers = {
+    ...options.headers,
+    Authorization: `Bearer ${token}`,
+  };
+
+  const response = await fetch(url, { ...options, headers });
+
+  if (!response.ok) {
+    const errorData = await response.json();
+    console.error('Error:', errorData.error || response.statusText);
+    throw new Error(errorData.error || 'Request failed');
+  }
+
+  return response;
+};
@@ -25,6 +25,10 @@ export const navigateToLogin = (router: ReturnType<typeof useRouter>) => {
  router.push(`/auth?redirect=${encodeURIComponent(currentPath)}`);
 };

+export const navigateToProfile = (router: ReturnType<typeof useRouter>) => {
+  router.push('/user');
+};
+
 export const navigateToLibrary = (
  router: ReturnType<typeof useRouter>,
  queryParams?: string,
@@ -64,7 +64,19 @@ const getIframeElement = (nodeElement: Range | Element): HTMLIFrameElement | nul
  return null;
 };

-export const getPosition = (target: Range | Element, rect: Rect, isVertical: boolean = false) => {
+const constrainPointWithinRect = (point: Point, rect: Rect, padding: number) => {
+  return {
+    x: Math.max(padding, Math.min(point.x, rect.right - padding)),
+    y: Math.max(padding, Math.min(point.y, rect.bottom - padding)),
+  };
+};
+
+export const getPosition = (
+  target: Range | Element,
+  rect: Rect,
+  paddingPx: number,
+  isVertical: boolean = false,
+) => {
  const frameElement = getIframeElement(target);
  const transform = frameElement ? getComputedStyle(frameElement).transform : '';
  const match = transform.match(/matrix\((.+)\)/);
@@ -80,10 +92,14 @@ export const getPosition = (target: Range | Element, rect: Rect, isVertical: boo
    const rightSpace = rect.right - first.right;
    const dir = leftSpace > rightSpace ? 'left' : 'right';
    const position = {
-      point: {
-        x: dir === 'left' ? first.left - rect.left - 6 : first.right - rect.left + 6,
-        y: (first.top + first.bottom) / 2 - rect.top,
-      },
+      point: constrainPointWithinRect(
+        {
+          x: dir === 'left' ? first.left - rect.left - 6 : first.right - rect.left + 6,
+          y: (first.top + first.bottom) / 2 - rect.top,
+        },
+        rect,
+        paddingPx,
+      ),
      dir,
    } as Position;
    const inView = pointIsInView(position.point);
@@ -119,12 +135,12 @@ export const getPopupPosition = (
    popupPoint.y = position.point.y - popupHeightPx;
  } else if (position.dir === 'down') {
    popupPoint.x = position.point.x - popupWidthPx / 2;
-    popupPoint.y = position.point.y + 5;
+    popupPoint.y = position.point.y + 6;
  } else if (position.dir === 'left') {
    popupPoint.x = position.point.x - popupWidthPx;
    popupPoint.y = position.point.y - popupHeightPx / 2;
  } else if (position.dir === 'right') {
-    popupPoint.x = position.point.x + 5;
+    popupPoint.x = position.point.x + 6;
    popupPoint.y = position.point.y - popupHeightPx / 2;
  }

@@ -58,5 +58,11 @@ export const findSSMLMark = (charIndex: number, marks: TTSMark[]) => {

 export const parseSSMLLang = (ssml: string): string | null => {
  const match = ssml.match(/xml:lang\s*=\s*"([^"]+)"/);
-  return match ? match[1]! : null;
+  if (match && match[1]) {
+    const parts = match[1].split('-');
+    return parts.length > 1
+      ? `${parts[0]!.toLowerCase()}-${parts[1]!.toUpperCase()}`
+      : parts[0]!.toLowerCase();
+  }
+  return null;
 };
@@ -178,11 +178,11 @@ const getLayoutStyles = (
    background: var(--background-set, none);
  }
  body *:not(a):not(#b1):not(#b1 *):not(#b2):not(#b2 *):not(.bg):not(.bg *):not(.vol):not(.vol *):not(.background):not(.background *) {
-    border-color: currentColor !important;
    ${bg === '#ffffff' ? '' : `color: inherit;`}
    ${bg === '#ffffff' ? '' : `background-color: ${bg} !important;`}
  }
  body {
+    overflow: unset;
    zoom: ${zoomLevel};
  }
  svg, img {
@@ -227,6 +227,10 @@ const getLayoutStyles = (
  .calibre {
    color: unset;
  }
+
+  .chapterHeader {
+    border-color: unset;
+  }
 `;

 export const getFootnoteStyles = () => `
@@ -4,6 +4,7 @@ const supabaseUrl =
  process.env['NEXT_PUBLIC_SUPABASE_URL'] || process.env['NEXT_PUBLIC_DEV_SUPABASE_URL']!;
 const supabaseAnonKey =
  process.env['NEXT_PUBLIC_SUPABASE_ANON_KEY'] || process.env['NEXT_PUBLIC_DEV_SUPABASE_ANON_KEY']!;
+const supabaseAdminKey = process.env['SUPABASE_ADMIN_KEY'] || '';

 export const supabase = createClient(supabaseUrl, supabaseAnonKey);

@@ -18,3 +19,13 @@ export const createSupabaseClient = (accessToken?: string) => {
    },
  });
 };
+
+export const createSupabaseAdminClient = () => {
+  return createClient(supabaseUrl, supabaseAdminKey, {
+    auth: {
+      persistSession: false,
+      autoRefreshToken: false,
+      detectSessionInUrl: false,
+    },
+  });
+};
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Huang Xin	93d1fe6946	release: version 0.9.19 (#508 )	2025-03-06 17:30:48 +01:00
Huang Xin	3c52a9e0cb	feat: customize foliate view styles with css, closes #167 (#507 )	2025-03-06 17:22:01 +01:00
Huang Xin	3056a29860	compat: handle epub files without dc metadata, closes #490 (#506 )	2025-03-06 16:44:07 +01:00
Huang Xin	bd6738e54c	fix: release wakelock when window or tab lost focus, closes #502 (#505 )	2025-03-06 16:23:58 +01:00
Huang Xin	8c3f49de25	rtl: support rtl for more widgets in sidebar (#504 )	2025-03-06 15:38:29 +01:00
Huang Xin	0f44fff7cd	feat: support styled reader UI via custom CSS, closes #240 (#503 )	2025-03-06 13:56:43 +01:00
Huang Xin	77bba7bd0c	fix: use section info for PDF progress bar, closes #158 (#501 )	2025-03-06 11:22:06 +01:00
Huang Xin	d30d1c17ae	rtl: rtl page layout from settings and book language, closes #359 (#500 )	2025-03-06 10:58:32 +01:00
nnecec	088c7d2c49	fix: various tweaks on style and layout (#499 )	2025-03-06 10:51:06 +01:00
Huang Xin	d0e6f3ad50	fix: ensure the progress bar direction is consistent with the book’s writing direction, closes #451 (#498 )	2025-03-06 09:14:33 +01:00
Huang Xin	8a83389164	fix: hide traffic lights when sidebar is invisible on macOS, closes #297 (#497 )	2025-03-06 07:14:23 +01:00
Huang Xin	04d07856f5	fix: use client timestamp for updated records, closes #468 (#488 )	2025-03-04 14:26:30 +01:00
Huang Xin	cc8d0ea457	fix: filter deleted books in parallel read menu, closes #476 (#487 )	2025-03-04 07:18:54 +01:00
Huang Xin	29e6af7768	fix: handle hardcoded border color of chapter header for Feedbooks, closes #470 (#485 )	2025-03-04 06:02:18 +01:00
Huang Xin	bc70d07749	fix: support footnotes with links inside of the lists, closes #472 (#479 )	2025-03-03 16:27:03 +01:00
Huang Xin	2db83b8569	ui: responsive dialog size for portrait screens (#473 ) * fix: handle network error in sync API * fix: reasonable default column width for iPad * ui: responsive dialog size for portrait screens	2025-03-01 17:57:29 +01:00
Huang Xin	2f29295c6c	fix: open with new files from file browsers when there is already an instance running, closes #208 (#466 )	2025-02-28 08:42:49 +01:00
Huang Xin	cab757257e	release: version 0.9.18 (#458 )	2025-02-26 19:42:11 +01:00
Huang Xin	fc8c9546b6	fix: normalize language code for TTS (#457 )	2025-02-26 19:30:22 +01:00
Huang Xin	3cc41b7b71	auth: redirect to auth page when callback page has no token (#454 )	2025-02-26 01:31:50 +01:00
Huang Xin	e65380aaf5	ui: use less saturated and modern colors when drawing highlights (#453 )	2025-02-26 00:45:33 +01:00
Huang Xin	24b68ac046	feat: add user profile page and option to delete account in the cloud (#452 )	2025-02-26 00:16:42 +01:00
Huang Xin	e0591ce41c	ui: style tweaks on Popup and Dialog (#448 )	2025-02-25 15:49:27 +01:00
Huang Xin	7be6c07344	ux: enhancements on iOS with modals and annotation tools (#447 ) * mobile: auto save progress also for iOS * ux: enhancements on pull-down to dismiss modals * doc: update reademe * ux: tricks to dismiss system selection tools on iOS	2025-02-25 13:07:44 +01:00
Huang Xin	f8ea7fc463	chore: add stub android plugin for safari-auth (#443 )	2025-02-24 11:41:26 +01:00