release: version 0.9.10 (#324 )

mobile: fix TTS icon position on iOS (#322 )
mobile: fix layout of book detail modal and refresh indicator (#321 )
2025-02-08 18:53:50 +01:00 · 2025-02-08 18:21:47 +01:00 · 2025-02-08 17:57:49 +01:00 · 2025-02-08 16:19:54 +01:00 · 2025-02-08 13:32:15 +01:00 · 2025-02-08 03:38:17 +01:00
117 changed files with 1411 additions and 531 deletions
@@ -22,7 +22,7 @@ jobs:
      - name: Install system dependencies
        run: |
          sudo apt-get update
-          sudo apt-get install -y libglib2.0-dev libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev libsoup-3.0-dev
+          sudo apt-get install -y pkg-config libfontconfig-dev libglib2.0-dev libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev libsoup-3.0-dev
      - name: Format
        working-directory: apps/readest-app/src-tauri
        run: cargo fmt --check
@@ -121,7 +121,7 @@ jobs:
        if: matrix.config.os == 'ubuntu-22.04'
        run: |
          sudo apt-get update
-          sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+          sudo apt-get install -y pkg-config libfontconfig-dev libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf

      - uses: tauri-apps/tauri-action@v0
        env:
@@ -5,11 +5,12 @@
  <h1>Readest</h1>
  <br>

-[Readest][link-website] is an open-source ebook reader designed for immersive and deep reading experiences. Built as a modern rewrite of [Foliate](https://github.com/johnfactotum/foliate), it leverages [Next.js 15](https://github.com/vercel/next.js) and [Tauri v2](https://github.com/tauri-apps/tauri) to offer a seamless cross-platform experience on macOS, Windows, Linux and Web, with support for mobile platforms coming soon.
+[Readest][link-website] is an open-source ebook reader designed for immersive and deep reading experiences. Built as a modern rewrite of [Foliate](https://github.com/johnfactotum/foliate), it leverages [Next.js 15](https://github.com/vercel/next.js) and [Tauri v2](https://github.com/tauri-apps/tauri) to deliver a smooth, cross-platform experience across macOS, Windows, Linux, Android, iOS, and the Web.

 [![Website][badge-website]][link-website]
 [![Web App][badge-web-app]][link-web-readest]
 [![OS][badge-platforms]][link-website]
+[![][badge-hellogithub]][link-hellogithub]
 [![][badge-discord]][link-discord]
 <br>
 [![AGPL Licence][badge-license]](LICENSE)
@@ -39,20 +40,20 @@

 <div align="left">✅ Implemented</div>

-| **Feature**                             | **Description**                                                                    | **Status** |
-| --------------------------------------- | ---------------------------------------------------------------------------------- | ---------- |
-| **Multi-Format Support**                | Support EPUB, MOBI, KF8 (AZW3), FB2, CBZ, PDF (experimental)                       | ✅         |
-| **Scroll/Page View Modes**              | Switch between scrolling or paginated reading modes.                               | ✅         |
-| **Full-Text Search**                    | Search across the entire book to find relevant sections.                           | ✅         |
-| **Annotations and Highlighting**        | Add highlights, bookmarks, and notes to enhance your reading experience.           | ✅         |
-| **Excerpt Text for Note-Taking**        | Easily excerpt text from books for detailed notes and analysis.                    | ✅         |
-| **Dictionary/Wikipedia Lookup**         | Instantly look up words and terms when reading.                                    | ✅         |
-| **Translate with DeepL**                | Translate selected text instantly using DeepL for accurate translations.           | ✅         |
-| **[Parallel Read][link-parallel-read]** | Read two books or documents simultaneously in a split-screen view.                 | ✅         |
-| **Customize Font and Layout**           | Adjust font, layout, theme mode, and theme colors for a personalized experience.   | ✅         |
-| **File Association and Open With**      | Quickly open files in Readest in your file browser with one-click.                 | ✅         |
-| **Sync across Platforms**               | Synchronize reading progress, notes, and bookmarks across all supported platforms. | ✅         |
-| **Text-to-Speech (TTS) Support**        | Enable text-to-speech functionality for a more accessible reading experience.      | ✅         |
+| **Feature**                             | **Description**                                                                                | **Status** |
+| --------------------------------------- | ---------------------------------------------------------------------------------------------- | ---------- |
+| **Multi-Format Support**                | Support EPUB, MOBI, KF8 (AZW3), FB2, CBZ, PDF (experimental)                                   | ✅         |
+| **Scroll/Page View Modes**              | Switch between scrolling or paginated reading modes.                                           | ✅         |
+| **Full-Text Search**                    | Search across the entire book to find relevant sections.                                       | ✅         |
+| **Annotations and Highlighting**        | Add highlights, bookmarks, and notes to enhance your reading experience.                       | ✅         |
+| **Excerpt Text for Note-Taking**        | Easily excerpt text from books for detailed notes and analysis.                                | ✅         |
+| **Dictionary/Wikipedia Lookup**         | Instantly look up words and terms when reading.                                                | ✅         |
+| **Translate with DeepL**                | Translate selected text instantly using DeepL for accurate translations.                       | ✅         |
+| **[Parallel Read][link-parallel-read]** | Read two books or documents simultaneously in a split-screen view.                             | ✅         |
+| **Customize Font and Layout**           | Adjust font, layout, theme mode, and theme colors for a personalized experience.               | ✅         |
+| **File Association and Open With**      | Quickly open files in Readest in your file browser with one-click.                             | ✅         |
+| **Sync across Platforms**               | Synchronize book files, reading progress, notes, and bookmarks across all supported platforms. | ✅         |
+| **Text-to-Speech (TTS) Support**        | Enable text-to-speech functionality for a more accessible reading experience.                  | ✅         |

 ## Planned Features

@@ -61,7 +62,6 @@

 | **Feature**                     | **Description**                                                                            | **Priority** |
 | ------------------------------- | ------------------------------------------------------------------------------------------ | ------------ |
-| **Support iOS and Android**     | Expand the APP to work on iOS and Android devices.                                         | 🛠           |
 | **Library Management**          | Organize, sort, and manage your entire ebook library.                                      | 🛠           |
 | **AI-Powered Summarization**    | Generate summaries of books or chapters using AI for quick insights.                       | 🔄           |
 | **Sync with Koreader**          | Synchronize reading progress, notes, and bookmarks with [Koreader][link-koreader] devices. | 🔄           |
@@ -152,9 +152,21 @@ For Windows targets, “Build Tools for Visual Studio 2022” (or a higher editi
 pnpm tauri dev
 ```

+For Android:
+
+```bash
+# Initialize the Android environment (run once)
+pnpm tauri android init
+
+pnpm tauri android dev
+```
+
 For iOS:

 ```bash
+# Set up the iOS environment (run once)
+pnpm tauri ios init
+
 pnpm tauri ios dev
 ```

@@ -193,7 +205,7 @@ Readest is open-source, and contributions are welcome! Feel free to open issues,

 Readest is free software: you can redistribute it and/or modify it under the terms of the [GNU Affero General Public License](https://www.gnu.org/licenses/agpl-3.0.html) as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. See the [LICENSE](LICENSE) file for details.

-The following libraries and software are used in this software:
+The following libraries and frameworks are used in this software:

 - [foliate-js](https://github.com/johnfactotum/foliate-js), which is MIT licensed.
 - [zip.js](https://github.com/gildas-lormeau/zip.js), which is licensed under the BSD-3-Clause license.
@@ -220,6 +232,7 @@ The following fonts are utilized in this software, either bundled within the app
 [badge-last-commit]: https://img.shields.io/github/last-commit/readest/readest?color=green
 [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-website]: https://readest.com?utm_source=github&utm_medium=referral&utm_campaign=readme
 [link-web-readest]: https://web.readest.com
@@ -230,3 +243,4 @@ The following fonts are utilized in this software, either bundled within the app
 [link-discord]: https://discord.gg/gntyVNk3BJ
 [link-parallel-read]: https://readest.com/#parallel-read
 [link-koreader]: https://github.com/koreader/koreader
+[link-hellogithub]: https://hellogithub.com/repository/8a5b6ade2aee461a8bd94e59200682a7
@@ -19,6 +19,19 @@ const nextConfig = {
  // Configure assetPrefix or else the server won't properly resolve your assets.
  assetPrefix: '',
  reactStrictMode: true,
+  async headers() {
+    return [
+      {
+        source: '/.well-known/apple-app-site-association',
+        headers: [
+          {
+            key: 'Content-Type',
+            value: 'application/json',
+          },
+        ],
+      },
+    ];
+  },
 };

 const withPWA = withPWAInit({
@@ -1,6 +1,6 @@
 {
  "name": "@readest/readest-app",
-  "version": "0.9.7",
+  "version": "0.9.10",
  "private": true,
  "scripts": {
    "dev": "dotenv -e .env.tauri -- next dev",
@@ -36,18 +36,18 @@
    "@supabase/auth-ui-react": "^0.4.7",
    "@supabase/auth-ui-shared": "^0.1.8",
    "@supabase/supabase-js": "^2.47.7",
-    "@tauri-apps/api": "2.1.1",
+    "@tauri-apps/api": "2.2.0",
    "@tauri-apps/plugin-cli": "^2.2.0",
    "@tauri-apps/plugin-deep-link": "^2.2.0",
    "@tauri-apps/plugin-dialog": "^2.2.0",
    "@tauri-apps/plugin-fs": "^2.2.0",
-    "@tauri-apps/plugin-http": "^2.2.0",
-    "@tauri-apps/plugin-log": "^2.2.0",
-    "@tauri-apps/plugin-opener": "^2.2.2",
+    "@tauri-apps/plugin-http": "^2.3.0",
+    "@tauri-apps/plugin-log": "^2.2.1",
+    "@tauri-apps/plugin-opener": "^2.2.5",
    "@tauri-apps/plugin-os": "^2.2.0",
    "@tauri-apps/plugin-process": "^2.2.0",
    "@tauri-apps/plugin-shell": "~2.2.0",
-    "@tauri-apps/plugin-updater": "^2.3.0",
+    "@tauri-apps/plugin-updater": "^2.4.0",
    "@zip.js/zip.js": "^2.7.53",
    "clsx": "^2.1.1",
    "cors": "^2.8.5",
@@ -58,7 +58,7 @@
    "i18next-http-backend": "^3.0.1",
    "js-md5": "^0.8.3",
    "jwt-decode": "^4.0.0",
-    "next": "15.1.0",
+    "next": "15.1.6",
    "posthog-js": "^1.205.0",
    "react": "19.0.0",
    "react-dom": "19.0.0",
@@ -69,7 +69,7 @@
    "zustand": "5.0.1"
  },
  "devDependencies": {
-    "@tauri-apps/cli": "2.1.0",
+    "@tauri-apps/cli": "2.2.7",
    "@types/cors": "^2.8.17",
    "@types/cssbeautify": "^0.3.5",
    "@types/node": "^22.10.1",
@@ -0,0 +1,17 @@
+{
+  "applinks": {
+    "details": [
+      {
+        "appIDs": [
+          "J5W48D69VR.com.bilingify.readest"
+        ],
+        "components": [
+          {
+            "/": "/auth/*",
+            "comment": "Matches any URL whose path starts with /auth/"
+          }
+        ]
+      }
+    ]
+  }
+}
@@ -0,0 +1,12 @@
+[
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "com.bilingify.readest",
+      "sha256_cert_fingerprints": [
+        "65:2D:11:67:76:12:29:14:18:42:CB:3D:18:50:B6:E4:7E:46:E1:2F:4B:E4:7F:5A:6C:14:B6:D7:12:74:1E:82"
+      ]
+    }
+  }
+]
@@ -57,7 +57,6 @@
  "Language:": "Sprache:",
  "Layout": "Layout",
  "Light Mode": "Hellmodus",
-  "Line Height": "Zeilenhöhe",
  "Loading...": "Wird geladen...",
  "Loc. {{currentPage}} / {{totalPage}}": "Pos. {{currentPage}} / {{totalPage}}",
  "Logged in": "Angemeldet",
@@ -149,5 +148,12 @@
  "Storage": "Speicher",
  "Book deleted: {{title}}": "Buch gelöscht: {{title}}",
  "Failed to delete book: {{title}}": "Fehler beim Löschen des Buches: {{title}}",
-  "Check Updates on Start": "Aktualisierungen beim Start prüfen"
+  "Check Updates on Start": "Aktualisierungen beim Start prüfen",
+  "Insufficient storage quota": "Unzureichendes Speicherkontingent",
+  "Font Weight": "Schriftgewicht",
+  "Line Spacing": "Zeilenabstand",
+  "Word Spacing": "Wortabstand",
+  "Letter Spacing": "Buchstabenabstand",
+  "Text Indent": "Texteinzug",
+  "Paragraph Margin": "Absatzrand"
 }
@@ -57,7 +57,6 @@
  "Language:": "Γλώσσα:",
  "Layout": "Διάταξη",
  "Light Mode": "Φωτεινή λειτουργία",
-  "Line Height": "Ύψος γραμμής",
  "Loading...": "Φόρτωση...",
  "Loc. {{currentPage}} / {{totalPage}}": "Θέση {{currentPage}} / {{totalPage}}",
  "Logged in": "Συνδεδεμένος",
@@ -149,5 +148,12 @@
  "Storage": "Αποθήκευση",
  "Book deleted: {{title}}": "Το βιβλίο με τίτλο {{title}} διαγράφηκε",
  "Failed to delete book: {{title}}": "Αποτυχία διαγραφής βιβλίου: {{title}}",
-  "Check Updates on Start": "Έλεγχος ενημερώσεων κατά την εκκίνηση"
+  "Check Updates on Start": "Έλεγχος ενημερώσεων κατά την εκκίνηση",
+  "Insufficient storage quota": "Ανεπαρκές όριο αποθήκευσης",
+  "Font Weight": "Βάρος γραμματοσειράς",
+  "Line Spacing": "Διάκενο γραμμών",
+  "Word Spacing": "Διάκενο λέξεων",
+  "Letter Spacing": "Διάκενο γραμμάτων",
+  "Text Indent": "Εσοχή κειμένου",
+  "Paragraph Margin": "Περιθώριο παραγράφου"
 }
@@ -57,7 +57,6 @@
  "Language:": "Idioma:",
  "Layout": "Diseño",
  "Light Mode": "Modo claro",
-  "Line Height": "Altura de línea",
  "Loading...": "Cargando...",
  "Loc. {{currentPage}} / {{totalPage}}": "Pos. {{currentPage}} / {{totalPage}}",
  "Logged in": "Sesión iniciada",
@@ -149,5 +148,12 @@
  "Storage": "Almacenamiento",
  "Book deleted: {{title}}": "Libro eliminado: {{title}}",
  "Failed to delete book: {{title}}": "Error al eliminar libro: {{title}}",
-  "Check Updates on Start": "Comprobar actualizaciones al iniciar"
+  "Check Updates on Start": "Comprobar actualizaciones al iniciar",
+  "Insufficient storage quota": "Cuota de almacenamiento insuficiente",
+  "Font Weight": "Peso de la fuente",
+  "Line Spacing": "Espaciado de línea",
+  "Word Spacing": "Espaciado de palabras",
+  "Letter Spacing": "Espaciado de letras",
+  "Text Indent": "Sangría de texto",
+  "Paragraph Margin": "Margen de párrafo"
 }
@@ -57,7 +57,6 @@
  "Language:": "Langue :",
  "Layout": "Mise en page",
  "Light Mode": "Mode clair",
-  "Line Height": "Hauteur de ligne",
  "Loading...": "Chargement...",
  "Loc. {{currentPage}} / {{totalPage}}": "Pos. {{currentPage}} / {{totalPage}}",
  "Logged in": "Connecté",
@@ -149,5 +148,12 @@
  "Storage": "Stockage",
  "Book deleted: {{title}}": "Livre supprimé : {{title}}",
  "Failed to delete book: {{title}}": "Échec de la suppression du livre : {{title}}",
-  "Check Updates on Start": "Vérifier les mises à jour au démarrage"
+  "Check Updates on Start": "Vérifier les mises à jour au démarrage",
+  "Insufficient storage quota": "Quota de stockage insuffisant",
+  "Font Weight": "Poids de la police",
+  "Line Spacing": "Interligne",
+  "Word Spacing": "Espacement des mots",
+  "Letter Spacing": "Espacement des lettres",
+  "Text Indent": "Retrait du texte",
+  "Paragraph Margin": "Marge de paragraphe"
 }
@@ -57,7 +57,6 @@
  "Language:": "भाषा:",
  "Layout": "लेआउट",
  "Light Mode": "लाइट मोड",
-  "Line Height": "लाइन हाइट",
  "Loading...": "लोड हो रहा है...",
  "Loc. {{currentPage}} / {{totalPage}}": "स्थान {{currentPage}} / {{totalPage}}",
  "Logged in": "लॉग इन किया",
@@ -149,5 +148,12 @@
  "Storage": "स्टोरेज",
  "Book deleted: {{title}}": "पुस्तक हटाई गई: {{title}}",
  "Failed to delete book: {{title}}": "पुस्तक हटाने में विफल: {{title}}",
-  "Check Updates on Start": "शुरू में अपडेट जांचें"
+  "Check Updates on Start": "शुरू में अपडेट जांचें",
+  "Insufficient storage quota": "अपर्याप्त स्टोरेज कोटा",
+  "Font Weight": "फ़ॉन्ट वजन",
+  "Line Spacing": "लाइन स्पेसिंग",
+  "Word Spacing": "शब्द स्पेसिंग",
+  "Letter Spacing": "अक्षर स्पेसिंग",
+  "Text Indent": "टेक्स्ट इंडेंट",
+  "Paragraph Margin": "पैराग्राफ मार्जिन"
 }
@@ -57,7 +57,6 @@
  "Language:": "Bahasa:",
  "Layout": "Tata Letak",
  "Light Mode": "Mode Terang",
-  "Line Height": "Tinggi Baris",
  "Loading...": "Memuat...",
  "Loc. {{currentPage}} / {{totalPage}}": "Lok. {{currentPage}} / {{totalPage}}",
  "Logged in": "Sudah Masuk",
@@ -149,5 +148,12 @@
  "Storage": "Penyimpanan",
  "Book deleted: {{title}}": "Buku dihapus: {{title}}",
  "Failed to delete book: {{title}}": "Gagal menghapus buku: {{title}}",
-  "Check Updates on Start": "Periksa Pembaruan saat Memulai"
+  "Check Updates on Start": "Periksa Pembaruan saat Memulai",
+  "Insufficient storage quota": "Kuota penyimpanan tidak mencukupi",
+  "Font Weight": "Berat Font",
+  "Line Spacing": "Spasi Baris",
+  "Word Spacing": "Spasi Kata",
+  "Letter Spacing": "Spasi Huruf",
+  "Text Indent": "Indentasi Teks",
+  "Paragraph Margin": "Margin Paragraf"
 }
@@ -57,7 +57,6 @@
  "Language:": "Lingua:",
  "Layout": "Layout",
  "Light Mode": "Modalità chiara",
-  "Line Height": "Altezza riga",
  "Loading...": "Caricamento...",
  "Loc. {{currentPage}} / {{totalPage}}": "Pos. {{currentPage}} / {{totalPage}}",
  "Logged in": "Accesso effettuato",
@@ -149,5 +148,12 @@
  "Storage": "Archiviazione",
  "Book deleted: {{title}}": "Libro eliminato: {{title}}",
  "Failed to delete book: {{title}}": "Eliminazione libro non riuscita: {{title}}",
-  "Check Updates on Start": "Controlla aggiornamenti all'avvio"
+  "Check Updates on Start": "Controlla aggiornamenti all'avvio",
+  "Insufficient storage quota": "Quota di archiviazione insufficiente",
+  "Font Weight": "Peso font",
+  "Line Spacing": "Interlinea",
+  "Word Spacing": "Spaziatura parole",
+  "Letter Spacing": "Spaziatura lettere",
+  "Text Indent": "Rientro testo",
+  "Paragraph Margin": "Margine paragrafo"
 }
@@ -57,7 +57,6 @@
  "Language:": "言語：",
  "Layout": "レイアウト",
  "Light Mode": "ライトモード",
-  "Line Height": "行間",
  "Loading...": "読み込み中...",
  "Loc. {{currentPage}} / {{totalPage}}": "位置 {{currentPage}} / {{totalPage}}",
  "Logged in": "ログイン済み",
@@ -99,7 +98,7 @@
  "Select Books": "書籍を選択",
  "Select Multiple Books": "複数の書籍を選択",
  "Sepia": "セピア",
-  "Serif Font": "明朝体",
+  "Serif Font": "セリフ体",
  "Show Book Details": "書籍の詳細を表示",
  "Sidebar": "サイドバー",
  "Sign In": "サインイン",
@@ -149,5 +148,12 @@
  "Storage": "ストレージ",
  "Book deleted: {{title}}": "書籍が削除されました：{{title}}",
  "Failed to delete book: {{title}}": "書籍の削除に失敗しました：{{title}}",
-  "Check Updates on Start": "開始時に更新を確認"
+  "Check Updates on Start": "開始時に更新を確認",
+  "Insufficient storage quota": "ストレージクォータが不足しています",
+  "Font Weight": "フォントウェイト",
+  "Line Spacing": "行間",
+  "Word Spacing": "単語間隔",
+  "Letter Spacing": "文字間隔",
+  "Text Indent": "テキストインデント",
+  "Paragraph Margin": "段落マージン"
 }
@@ -57,7 +57,6 @@
  "Language:": "언어:",
  "Layout": "레이아웃",
  "Light Mode": "라이트 모드",
-  "Line Height": "줄 간격",
  "Loading...": "로딩 중...",
  "Loc. {{currentPage}} / {{totalPage}}": "위치 {{currentPage}} / {{totalPage}}",
  "Logged in": "로그인됨",
@@ -149,5 +148,12 @@
  "Storage": "저장소",
  "Book deleted: {{title}}": "책 삭제됨: {{title}}",
  "Failed to delete book: {{title}}": "책 삭제 실패: {{title}}",
-  "Check Updates on Start": "시작 시 업데이트 확인"
+  "Check Updates on Start": "시작 시 업데이트 확인",
+  "Insufficient storage quota": "저장소 할당량 부족",
+  "Font Weight": "글꼴 두께",
+  "Line Spacing": "줄 간격",
+  "Word Spacing": "단어 간격",
+  "Letter Spacing": "글자 간격",
+  "Text Indent": "들여쓰기",
+  "Paragraph Margin": "단락 여백"
 }
@@ -57,7 +57,6 @@
  "Language:": "Język:",
  "Layout": "Układ",
  "Light Mode": "Tryb jasny",
-  "Line Height": "Wysokość linii",
  "Loading...": "Ładowanie...",
  "Loc. {{currentPage}} / {{totalPage}}": "Poz. {{currentPage}} / {{totalPage}}",
  "Logged in": "Zalogowano",
@@ -149,5 +148,12 @@
  "Storage": "Przechowywanie",
  "Book deleted: {{title}}": "Książka usunięta: {{title}}",
  "Failed to delete book: {{title}}": "Nie udało się usunąć książki: {{title}}",
-  "Check Updates on Start": "Sprawdź aktualizacje przy starcie"
+  "Check Updates on Start": "Sprawdź aktualizacje przy starcie",
+  "Insufficient storage quota": "Niewystarczająca kwota przechowywania",
+  "Font Weight": "Grubość czcionki",
+  "Line Spacing": "Interlinia",
+  "Word Spacing": "Odstęp między wyrazami",
+  "Letter Spacing": "Odstęp między literami",
+  "Text Indent": "Wcięcie tekstu",
+  "Paragraph Margin": "Margines akapitu"
 }
@@ -57,7 +57,6 @@
  "Language:": "Idioma:",
  "Layout": "Layout",
  "Light Mode": "Modo Claro",
-  "Line Height": "Altura da Linha",
  "Loading...": "Carregando...",
  "Loc. {{currentPage}} / {{totalPage}}": "Loc. {{currentPage}} / {{totalPage}}",
  "Logged in": "Conectado",
@@ -149,5 +148,12 @@
  "Storage": "Armazenamento",
  "Book deleted: {{title}}": "Livro excluído: {{title}}",
  "Failed to delete book: {{title}}": "Falha ao excluir livro: {{title}}",
-  "Check Updates on Start": "Verificar Atualizações ao Iniciar"
+  "Check Updates on Start": "Verificar Atualizações ao Iniciar",
+  "Insufficient storage quota": "Cota de armazenamento insuficiente",
+  "Font Weight": "Peso da Fonte",
+  "Line Spacing": "Espaçamento de Linha",
+  "Word Spacing": "Espaçamento de Palavra",
+  "Letter Spacing": "Espaçamento de Letra",
+  "Text Indent": "Recuo de Texto",
+  "Paragraph Margin": "Margem de Parágrafo"
 }
@@ -57,7 +57,6 @@
  "Language:": "Язык:",
  "Layout": "Макет",
  "Light Mode": "Светлая тема",
-  "Line Height": "Межстрочный интервал",
  "Loading...": "Загрузка...",
  "Loc. {{currentPage}} / {{totalPage}}": "Поз. {{currentPage}} / {{totalPage}}",
  "Logged in": "Выполнен вход",
@@ -149,5 +148,12 @@
  "Storage": "Хранилище",
  "Book deleted: {{title}}": "Книга удалена: {{title}}",
  "Failed to delete book: {{title}}": "Не удалось удалить книгу: {{title}}",
-  "Check Updates on Start": "Проверять обновления при запуске"
+  "Check Updates on Start": "Проверять обновления при запуске",
+  "Insufficient storage quota": "Недостаточно квоты хранилища",
+  "Font Weight": "Насыщенность шрифта",
+  "Line Spacing": "Межстрочный интервал",
+  "Word Spacing": "Межсловный интервал",
+  "Letter Spacing": "Межбуквенный интервал",
+  "Text Indent": "Отступ текста",
+  "Paragraph Margin": "Отступ абзаца"
 }
@@ -57,7 +57,6 @@
  "Language:": "Dil:",
  "Layout": "Düzen",
  "Light Mode": "Aydınlık Mod",
-  "Line Height": "Satır Yüksekliği",
  "Loading...": "Yükleniyor...",
  "Loc. {{currentPage}} / {{totalPage}}": "Konum {{currentPage}} / {{totalPage}}",
  "Logged in": "Giriş Yapıldı",
@@ -149,5 +148,12 @@
  "Storage": "Depolama",
  "Book deleted: {{title}}": "Kitap silindi: {{title}}",
  "Failed to delete book: {{title}}": "Kitap silinemedi: {{title}}",
-  "Check Updates on Start": "Başlangıçta Güncellemeleri Kontrol Et"
+  "Check Updates on Start": "Başlangıçta Güncellemeleri Kontrol Et",
+  "Insufficient storage quota": "Yetersiz depolama kotası",
+  "Font Weight": "Yazı Tipi Ağırlığı",
+  "Line Spacing": "Satır Aralığı",
+  "Word Spacing": "Kelime Aralığı",
+  "Letter Spacing": "Harf Aralığı",
+  "Text Indent": "Metin Girintisi",
+  "Paragraph Margin": "Paragraf Kenarı"
 }
@@ -57,7 +57,6 @@
  "Language:": "Мова:",
  "Layout": "Макет",
  "Light Mode": "Світлий режим",
-  "Line Height": "Висота рядка",
  "Loading...": "Завантаження...",
  "Loc. {{currentPage}} / {{totalPage}}": "Поз. {{currentPage}} / {{totalPage}}",
  "Logged in": "Увійшли",
@@ -149,5 +148,12 @@
  "Storage": "Сховище",
  "Book deleted: {{title}}": "Книгу видалено: {{title}}",
  "Failed to delete book: {{title}}": "Не вдалося видалити книгу: {{title}}",
-  "Check Updates on Start": "Перевіряти оновлення при запуску"
+  "Check Updates on Start": "Перевіряти оновлення при запуску",
+  "Insufficient storage quota": "Недостатньо квоти сховища",
+  "Font Weight": "Насиченість шрифту",
+  "Line Spacing": "Міжрядковий інтервал",
+  "Word Spacing": "Міжслівний інтервал",
+  "Letter Spacing": "Міжбуквений інтервал",
+  "Text Indent": "Відступ тексту",
+  "Paragraph Margin": "Відступ абзацу"
 }
@@ -57,7 +57,6 @@
  "Language:": "Ngôn ngữ:",
  "Layout": "Bố cục",
  "Light Mode": "Chế độ sáng",
-  "Line Height": "Độ cao dòng",
  "Loading...": "Đang tải...",
  "Loc. {{currentPage}} / {{totalPage}}": "Vị trí {{currentPage}} / {{totalPage}}",
  "Logged in": "Đã đăng nhập",
@@ -149,5 +148,12 @@
  "Storage": "Lưu trữ",
  "Book deleted: {{title}}": "Sách đã xóa: {{title}}",
  "Failed to delete book: {{title}}": "Không thể xóa sách: {{title}}",
-  "Check Updates on Start": "Kiểm tra cập nhật khi khởi động"
+  "Check Updates on Start": "Kiểm tra cập nhật khi khởi động",
+  "Insufficient storage quota": "Không đủ lượng lưu trữ",
+  "Font Weight": "Độ đậm của phông chữ",
+  "Line Spacing": "Khoảng cách dòng",
+  "Word Spacing": "Khoảng cách từ",
+  "Letter Spacing": "Khoảng cách chữ",
+  "Text Indent": "Thụt lề",
+  "Paragraph Margin": "Lề đoạn"
 }
@@ -57,7 +57,6 @@
  "Language:": "语言",
  "Layout": "布局",
  "Light Mode": "浅色主题",
-  "Line Height": "行高",
  "Loading...": "加载中...",
  "Loc. {{currentPage}} / {{totalPage}}": "位置 {{currentPage}} / {{totalPage}}",
  "Logged in": "已登录",
@@ -149,5 +148,12 @@
  "Storage": "存储空间",
  "Book deleted: {{title}}": "书籍已删除：{{title}}",
  "Failed to delete book: {{title}}": "删除书籍失败：{{title}}",
-  "Check Updates on Start": "启动时检查更新"
+  "Check Updates on Start": "启动时检查更新",
+  "Insufficient storage quota": "云存储空间不足",
+  "Font Weight": "字重",
+  "Line Spacing": "行间距",
+  "Word Spacing": "词间距",
+  "Letter Spacing": "字间距",
+  "Text Indent": "首行缩进",
+  "Paragraph Margin": "段间距"
 }
@@ -57,7 +57,6 @@
  "Language:": "語言",
  "Layout": "版面",
  "Light Mode": "淺色主題",
-  "Line Height": "行高",
  "Loading...": "載入中...",
  "Loc. {{currentPage}} / {{totalPage}}": "位置 {{currentPage}} / {{totalPage}}",
  "Logged in": "已登入",
@@ -149,5 +148,12 @@
  "Storage": "存儲空間",
  "Book deleted: {{title}}": "書籍已刪除：{{title}}",
  "Failed to delete book: {{title}}": "書籍刪除失敗：{{title}}",
-  "Check Updates on Start": "啟動時檢查更新"
+  "Check Updates on Start": "啟動時檢查更新",
+  "Insufficient storage quota": "雲存儲空間不足",
+  "Font Weight": "字重",
+  "Line Spacing": "行間距",
+  "Word Spacing": "字間距",
+  "Letter Spacing": "字間距",
+  "Text Indent": "首行縮進",
+  "Paragraph Margin": "段間距"
 }
@@ -1,5 +1,29 @@
 {
  "releases": {
+    "0.9.10": {
+      "date": "2025-02-08",
+      "notes": [
+        "Add options to adjust paragraph margin, word spacing, letter spacing, text indent and font weight",
+        "Alpha release for Android and iOS platforms"
+      ]
+    },
+    "0.9.9": {
+      "date": "2025-02-06",
+      "notes": [
+        "Load system fonts list at runtime on desktop",
+        "Incrementally load new books in synchronization",
+        "Change voice language dynamically by detecting text language",
+        "Various fixes and enhancements on sync, fonts and highlighting"
+      ]
+    },
+    "0.9.8": {
+      "date": "2025-02-01",
+      "notes": [
+        "Support cloud sync for book files",
+        "Use larger font size on mobile devices for better reading experience",
+        "Various fixes and enhancements on sync, rendering and settings"
+      ]
+    },
    "0.9.7": {
      "date": "2025-01-23",
      "notes": [
@@ -1,6 +1,6 @@
 pnpm run build-macos-universial-appstore

-BUNDLE_DIR=src-tauri/target/universal-apple-darwin/release/bundle/macos
+BUNDLE_DIR=../../target/universal-apple-darwin/release/bundle/macos
 APP_BUNDLE=$BUNDLE_DIR/Readest.app
 INSTALLER_BUNDLE=$BUNDLE_DIR/Readest.pkg

@@ -57,3 +57,4 @@ tauri-plugin-cli = "2"
 tauri-plugin-single-instance = "2.2.0"
 tauri-plugin-updater = "2"
 tauri-plugin-window-state = "2.2.0"
+font-enumeration = "0.9.0"
@@ -0,0 +1,80 @@
+import java.util.Properties
+import java.io.FileInputStream
+
+plugins {
+    id("com.android.application")
+    id("org.jetbrains.kotlin.android")
+    id("rust")
+}
+
+val tauriProperties = Properties().apply {
+    val propFile = file("tauri.properties")
+    if (propFile.exists()) {
+        propFile.inputStream().use { load(it) }
+    }
+}
+
+android {
+    compileSdk = 34
+    namespace = "com.bilingify.readest"
+    defaultConfig {
+        manifestPlaceholders["usesCleartextTraffic"] = "false"
+        applicationId = "com.bilingify.readest"
+        minSdk = 26
+        targetSdk = 34
+        versionCode = tauriProperties.getProperty("tauri.android.versionCode", "1").toInt()
+        versionName = tauriProperties.getProperty("tauri.android.versionName", "1.0")
+    }
+    signingConfigs {
+        create("release") {
+            val keystorePropertiesFile = rootProject.file("keystore.properties")
+            val keystoreProperties = Properties()
+            if (keystorePropertiesFile.exists()) {
+                keystoreProperties.load(FileInputStream(keystorePropertiesFile))
+            }
+
+            keyAlias = keystoreProperties["keyAlias"] as String
+            keyPassword = keystoreProperties["password"] as String
+            storeFile = file(keystoreProperties["storeFile"] as String)
+            storePassword = keystoreProperties["password"] as String
+        }
+    }
+    buildTypes {
+        getByName("debug") {
+            manifestPlaceholders["usesCleartextTraffic"] = "true"
+            isDebuggable = true
+            isJniDebuggable = true
+            isMinifyEnabled = false
+            packaging {                jniLibs.keepDebugSymbols.add("*/arm64-v8a/*.so")
+                jniLibs.keepDebugSymbols.add("*/armeabi-v7a/*.so")
+                jniLibs.keepDebugSymbols.add("*/x86/*.so")
+                jniLibs.keepDebugSymbols.add("*/x86_64/*.so")
+            }
+        }
+        getByName("release") {
+            signingConfig = signingConfigs.getByName("release")
+        }
+    }
+    kotlinOptions {
+        jvmTarget = "1.8"
+    }
+    buildFeatures {
+        buildConfig = true
+    }
+}
+
+rust {
+    rootDirRel = "../../../"
+}
+
+dependencies {
+    implementation("androidx.webkit:webkit:1.6.1")
+    implementation("androidx.appcompat:appcompat:1.6.1")
+    implementation("androidx.activity:activity-ktx:1.9.3")
+    implementation("com.google.android.material:material:1.8.0")
+    testImplementation("junit:junit:4.13.2")
+    androidTestImplementation("androidx.test.ext:junit:1.1.4")
+    androidTestImplementation("androidx.test.espresso:espresso-core:3.5.0")
+}
+
+apply(from = "tauri.build.gradle.kts")
@@ -0,0 +1,23 @@
+package com.bilingify.readest
+
+import android.os.Bundle
+import android.view.View
+import android.view.WindowInsets
+import android.view.WindowInsetsController
+import androidx.activity.enableEdgeToEdge
+
+class MainActivity : TauriActivity() {
+    override fun onCreate(savedInstanceState: Bundle?) {
+        enableEdgeToEdge()
+        super.onCreate(savedInstanceState)
+	
+	hideSystemUI()
+    }
+
+    private fun hideSystemUI() {
+        window.decorView.windowInsetsController?.let { controller ->
+            controller.hide(WindowInsets.Type.systemBars())
+            controller.systemBarsBehavior = WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
+        }
+    }
+}
@@ -11,21 +11,20 @@ mod menu;
 #[cfg(target_os = "macos")]
 mod traffic_light_plugin;

-mod transfer_file;
-use transfer_file::{download_file, upload_file};
-
 #[cfg(target_os = "macos")]
 use tauri::TitleBarStyle;

-use std::path::PathBuf;
-use tauri::{command, Window};
-use tauri::{AppHandle, Emitter, Manager, Url};
-use tauri::{WebviewUrl, WebviewWindowBuilder};
-use tauri_plugin_fs::FsExt;
-use tauri_plugin_oauth::start;
-
 #[cfg(desktop)]
-use tauri::Listener;
+use std::path::PathBuf;
+#[cfg(desktop)]
+use tauri::{AppHandle, Listener, Manager, Url};
+#[cfg(desktop)]
+use tauri_plugin_fs::FsExt;
+
+mod transfer_file;
+use tauri::{command, Emitter, WebviewUrl, WebviewWindowBuilder, Window};
+use tauri_plugin_oauth::start;
+use transfer_file::{download_file, upload_file};

 #[cfg(desktop)]
 fn allow_file_in_scopes(app: &AppHandle, files: Vec<PathBuf>) {
@@ -72,7 +71,19 @@ async fn start_server(window: Window) -> Result<u16, String> {
    .map_err(|err| err.to_string())
 }

+#[cfg(desktop)]
+#[command]
+async fn list_fonts() -> Result<Vec<String>, String> {
+    let font_collection = font_enumeration::Collection::new().unwrap();
+    let mut fonts = Vec::new();
+    for font in font_collection.all() {
+        fonts.push(font.family_name.clone());
+    }
+    Ok(fonts)
+}
+
 #[derive(Clone, serde::Serialize)]
+#[allow(dead_code)]
 struct Payload {
    args: Vec<String>,
    cwd: String,
@@ -86,7 +97,9 @@ pub fn run() {
        .invoke_handler(tauri::generate_handler![
            start_server,
            download_file,
-            upload_file
+            upload_file,
+            #[cfg(desktop)]
+            list_fonts
        ])
        .plugin(tauri_plugin_shell::init())
        .plugin(tauri_plugin_opener::init())
@@ -191,12 +204,26 @@ pub fn run() {
                .title("");

            #[cfg(all(not(target_os = "macos"), desktop))]
-            let win_builder = win_builder
-                .decorations(false)
-                .transparent(true)
-                .visible(false)
-                .shadow(true)
-                .title("Readest");
+            let win_builder = {
+                let mut win_builder = win_builder
+                    .decorations(false)
+                    .transparent(true)
+                    .visible(false)
+                    .title("Readest");
+
+                if cfg!(target_os = "windows") {
+                    let version = tauri_plugin_os::version();
+                    if version <= tauri_plugin_os::Version::from_string("10.0.19045") {
+                        win_builder = win_builder.shadow(false);
+                    } else {
+                        win_builder = win_builder.shadow(true);
+                    }
+                } else {
+                    win_builder = win_builder.shadow(true);
+                }
+
+                win_builder
+            };

            win_builder.build().unwrap();
            // let win = win_builder.build().unwrap();
@@ -14,8 +14,8 @@
    "windows": [],
    "security": {
      "csp": {
-        "default-src": "'self' 'unsafe-inline' blob: customprotocol: asset: http://asset.localhost ipc: http://ipc.localhost",
-        "connect-src": "'self' blob: asset: http://asset.localhost ipc: http://ipc.localhost https://*.sentry.io https://*.posthog.com https://*.deepl.com https://*.wikipedia.org https://*.wiktionary.org https://*.supabase.co https://*.readest.com wss://speech.platform.bing.com https://*.cloudflarestorage.com",
+        "default-src": "'self' 'unsafe-inline' blob: data: customprotocol: asset: http://asset.localhost ipc: http://ipc.localhost",
+        "connect-src": "'self' blob: data: asset: http://asset.localhost ipc: http://ipc.localhost https://*.sentry.io https://*.posthog.com https://*.deepl.com https://*.wikipedia.org https://*.wiktionary.org https://*.supabase.co https://*.readest.com wss://speech.platform.bing.com https://*.cloudflarestorage.com",
        "img-src": "'self' blob: data: asset: http://asset.localhost https://*",
        "style-src": "'self' 'unsafe-inline' blob: asset: http://asset.localhost https://cdn.jsdelivr.net https://fonts.googleapis.com",
        "font-src": "'self' data: asset: http://asset.localhost tauri: https://fonts.gstatic.com https://db.onlinewebfonts.com https://cdn.jsdelivr.net",
@@ -56,6 +56,12 @@
        "section": "text"
      }
    },
+    "android": {
+      "minSdkVersion": 26
+    },
+    "iOS": {
+      "developmentTeam": "J5W48D69VR"
+    },
    "fileAssociations": [
      {
        "name": "epub",
@@ -7,7 +7,6 @@ import { Auth } from '@supabase/auth-ui-react';
 import { ThemeSupa } from '@supabase/auth-ui-shared';
 import { FcGoogle } from 'react-icons/fc';
 import { FaApple } from 'react-icons/fa';
-import { VscAzure } from 'react-icons/vsc';
 import { FaGithub } from 'react-icons/fa';
 import { IoArrowBack } from 'react-icons/io5';

@@ -17,10 +16,12 @@ import { useTheme } from '@/hooks/useTheme';
 import { useEnv } from '@/context/EnvContext';
 import { useSettingsStore } from '@/store/settingsStore';
 import { isTauriAppPlatform } from '@/services/environment';
-import { onOpenUrl } from '@tauri-apps/plugin-deep-link';
+import { onOpenUrl, getCurrent } from '@tauri-apps/plugin-deep-link';
 import { start, cancel, onUrl, onInvalidUrl } from '@fabianlars/tauri-plugin-oauth';
 import { openUrl } from '@tauri-apps/plugin-opener';
+import { tauriHandleOnWindowFocus } from '@/utils/window';
 import { handleAuthCallback } from '@/helpers/auth';
+import { getOSPlatform } from '@/utils/misc';

 type OAuthProvider = 'google' | 'apple' | 'azure' | 'github';

@@ -60,8 +61,17 @@ export default function AuthPage() {
  const [port, setPort] = useState<number | null>(null);
  const isOAuthServerRunning = useRef(false);
  const [isMounted, setIsMounted] = useState(false);
+  const osPlatform = getOSPlatform();

-  const signIn = async (provider: OAuthProvider) => {
+  const getTauriRedirectTo = () => {
+    return process.env.NODE_ENV === 'production'
+      ? ['android', 'ios'].includes(osPlatform)
+        ? 'https://web.readest.com/auth/callback'
+        : 'readest://auth/callback'
+      : `http://localhost:${port}`;
+  };
+
+  const tauriSignIn = async (provider: OAuthProvider) => {
    if (!supabase) {
      throw new Error('No backend connected');
    }
@@ -70,10 +80,7 @@ export default function AuthPage() {
      provider,
      options: {
        skipBrowserRedirect: true,
-        redirectTo:
-          process.env.NODE_ENV === 'production'
-            ? 'readest://auth/callback'
-            : `http://localhost:${port}`,
+        redirectTo: getTauriRedirectTo(),
      },
    });

@@ -82,6 +89,21 @@ export default function AuthPage() {
      return;
    }
    openUrl(data.url);
+
+    // FIXME: For Android we need a better way to trigger the deeplink redirect
+    if (isTauriAppPlatform() && osPlatform === 'android') {
+      tauriHandleOnWindowFocus(async () => {
+        const urls = await getCurrent();
+        if (urls && urls.length > 0) {
+          urls.forEach((url) => {
+            handleOAuthUrl(url);
+          });
+        }
+      });
+      setTimeout(() => {
+        router.back();
+      }, 5000);
+    }
  };

  const handleOAuthUrl = async (url: string) => {
@@ -200,25 +222,19 @@ export default function AuthPage() {
      <div style={{ maxWidth: '420px', margin: 'auto', padding: '2rem' }}>
        <ProviderLogin
          provider='google'
-          handleSignIn={signIn}
+          handleSignIn={tauriSignIn}
          Icon={FcGoogle}
          label='Sign in with Google'
        />
        <ProviderLogin
          provider='apple'
-          handleSignIn={signIn}
+          handleSignIn={tauriSignIn}
          Icon={FaApple}
          label='Sign in with Apple'
        />
-        <ProviderLogin
-          provider='azure'
-          handleSignIn={signIn}
-          Icon={VscAzure}
-          label='Sign in with Azure'
-        />
        <ProviderLogin
          provider='github'
-          handleSignIn={signIn}
+          handleSignIn={tauriSignIn}
          Icon={FaGithub}
          label='Sign in with GitHub'
        />
@@ -229,7 +245,7 @@ export default function AuthPage() {
          theme={isDarkMode ? 'dark' : 'light'}
          magicLink={true}
          providers={[]}
-          redirectTo={`http://localhost:${port}`}
+          redirectTo={getTauriRedirectTo()}
        />
      </div>
    </div>
@@ -246,7 +262,7 @@ export default function AuthPage() {
        appearance={{ theme: ThemeSupa }}
        theme={isDarkMode ? 'dark' : 'light'}
        magicLink={true}
-        providers={['google', 'apple', 'azure', 'github']}
+        providers={['google', 'apple', 'github']}
        redirectTo='/auth/callback'
      />
    </div>
@@ -5,7 +5,9 @@ import { CiCircleMore } from 'react-icons/ci';
 import { LiaCloudUploadAltSolid, LiaCloudDownloadAltSolid } from 'react-icons/lia';

 import { Book } from '@/types/book';
+import { useEnv } from '@/context/EnvContext';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
+import { formatAuthors, formatTitle } from '@/utils/book';
 import ReadingProgress from './ReadingProgress';

 interface BookItemProps {
@@ -34,10 +36,11 @@ const BookItem: React.FC<BookItemProps> = ({
  bookContextMenuHandler,
 }) => {
  const iconSize15 = useResponsiveSize(15);
+  const { appService } = useEnv();

  return (
    <div
-      className='book-item cursor-pointer'
+      className={clsx('book-item', appService?.hasContextMenu ? 'cursor-pointer' : '')}
      onContextMenu={bookContextMenuHandler.bind(null, book)}
    >
      <div className='bg-base-100 shadow-md' onClick={() => handleBookClick(book)}>
@@ -59,11 +62,13 @@ const BookItem: React.FC<BookItemProps> = ({
            )}
          >
            <div className='flex h-1/2 items-center justify-center'>
-              <span className='line-clamp-3 text-lg'>{book.title}</span>
+              <span className='line-clamp-3 text-lg'>{formatTitle(book.title)}</span>
            </div>
            <div className='h-1/6'></div>
            <div className='flex h-1/3 items-center justify-center'>
-              <span className='text-neutral-content/50 line-clamp-1 text-base'>{book.author}</span>
+              <span className='text-neutral-content/50 line-clamp-1 text-base'>
+                {formatAuthors(book.author)}
+              </span>
            </div>
          </div>
          {(selectedBooks.includes(book.hash) || clickedBookHash === book.hash) && (
@@ -15,11 +15,9 @@ import { navigateToReader } from '@/utils/nav';
 import { getOSPlatform } from '@/utils/misc';
 import { getFilename } from '@/utils/book';
 import { FILE_REVEAL_LABELS, FILE_REVEAL_PLATFORMS } from '@/utils/os';
-import { isTauriAppPlatform } from '@/services/environment';

 import Alert from '@/components/Alert';
 import Spinner from '@/components/Spinner';
-import BookDetailModal from '@/components/BookDetailModal';
 import BookItem from './BookItem';
 import GroupItem from './GroupItem';

@@ -57,6 +55,7 @@ interface BookshelfProps {
  handleBookUpload: (book: Book) => void;
  handleBookDownload: (book: Book) => void;
  handleBookDelete: (book: Book) => void;
+  handleShowDetailsBook: (book: Book) => void;
  booksTransferProgress: { [key: string]: number | null };
 }

@@ -67,6 +66,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
  handleBookUpload,
  handleBookDownload,
  handleBookDelete,
+  handleShowDetailsBook,
  booksTransferProgress,
 }) => {
  const _ = useTranslation();
@@ -81,7 +81,6 @@ const Bookshelf: React.FC<BookshelfProps> = ({
  const [clickedImage, setClickedImage] = useState<string | null>(null);
  const [importBookUrl] = useState(searchParams?.get('url') || '');
  const isImportingBook = useRef(false);
-  const [showDetailsBook, setShowDetailsBook] = useState<Book | null>(null);

  const makeBookAvailable = async (book: Book) => {
    if (book.uploadedAt && !book.downloadedAt) {
@@ -99,14 +98,10 @@ const Bookshelf: React.FC<BookshelfProps> = ({

  const showBookDetailsModal = async (book: Book) => {
    if (await makeBookAvailable(book)) {
-      setShowDetailsBook(book);
+      handleShowDetailsBook(book);
    }
  };

-  const dismissBookDetailsModal = () => {
-    setShowDetailsBook(null);
-  };
-
  const { setLibrary } = useLibraryStore();

  useEffect(() => {
@@ -174,7 +169,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
  };

  const bookContextMenuHandler = async (book: Book, e: React.MouseEvent) => {
-    if (!isTauriAppPlatform()) return;
+    if (!appService?.hasContextMenu) return;
    e.preventDefault();
    e.stopPropagation();
    const osPlatform = getOSPlatform();
@@ -288,13 +283,6 @@ const Bookshelf: React.FC<BookshelfProps> = ({
          onClickConfirm={confirmDelete}
        />
      )}
-      {showDetailsBook && (
-        <BookDetailModal
-          isOpen={!!showDetailsBook}
-          book={showDetailsBook}
-          onClose={dismissBookDetailsModal}
-        />
-      )}
    </div>
  );
 };
@@ -1,5 +1,6 @@
 import Image from 'next/image';
 import { BooksGroup } from '@/types/book';
+import { formatAuthors, formatTitle } from '@/utils/book';
 import ReadingProgress from './ReadingProgress';

 interface GroupItemProps {
@@ -21,8 +22,10 @@ const GroupItem: React.FC<GroupItemProps> = ({ group }) => {
            />
          </figure>
          <div className='card-body p-4'>
-            <h3 className='card-title line-clamp-2 text-sm'>{book.title}</h3>
-            <p className='text-neutral-content line-clamp-1 text-xs'>{book.author}</p>
+            <h3 className='card-title line-clamp-2 text-sm'>{formatTitle(book.title)}</h3>
+            <p className='text-neutral-content line-clamp-1 text-xs'>
+              {formatAuthors(book.author)}
+            </p>
            <ReadingProgress book={book} />
          </div>
        </div>
@@ -43,15 +43,18 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
    };
  }, [onToggleSelectMode]);

+  const windowButtonVisible = appService?.appPlatform !== 'web' && !isTrafficLightVisible;
+
  return (
    <div
      ref={headerRef}
      className={clsx(
        'titlebar z-10 h-11 w-full py-2 pr-6',
+        appService?.hasSafeAreaInset && 'mt-[env(safe-area-inset-top)]',
        isTrafficLightVisible ? 'pl-16' : 'pl-2',
      )}
    >
-      <div className='flex items-center justify-between space-x-12'>
+      <div className='flex items-center justify-between space-x-6 sm:space-x-12'>
        <div className='exclude-title-bar-mousedown relative flex w-full items-center pl-4'>
          <span className='absolute left-8 text-gray-500'>
            <FaSearch className='h-4 w-4' />
@@ -66,7 +69,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
              'border-none focus:outline-none focus:ring-0',
            )}
          />
-          <div className='absolute right-4 flex items-center space-x-4 text-gray-500'>
+          <div className='absolute right-4 flex items-center space-x-2 text-gray-500 sm:space-x-4'>
            <span className='mx-2 h-6 w-[1px] bg-gray-400'></span>
            <Dropdown
              className='exclude-title-bar-mousedown dropdown-bottom flex h-6 cursor-pointer justify-center'
@@ -96,7 +99,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
            </button>
          </div>
        </div>
-        <div className='flex h-full items-center gap-x-4'>
+        <div className='flex h-full items-center gap-x-2 sm:gap-x-4'>
          <Dropdown
            className='exclude-title-bar-mousedown dropdown-bottom dropdown-end'
            buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
@@ -104,14 +107,12 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
          >
            <SettingsMenu />
          </Dropdown>
-          {!isTrafficLightVisible && appService?.appPlatform !== 'web' && (
-            <WindowButtons
-              headerRef={headerRef}
-              showMinimize={true}
-              showMaximize={true}
-              showClose={true}
-            />
-          )}
+          <WindowButtons
+            headerRef={headerRef}
+            showMinimize={windowButtonVisible}
+            showMaximize={windowButtonVisible}
+            showClose={windowButtonVisible}
+          />
        </div>
      </div>
    </div>
@@ -6,7 +6,12 @@ import { useLibraryStore } from '@/store/libraryStore';
 import { SYNC_BOOKS_INTERVAL_SEC } from '@/services/constants';
 import { Book } from '@/types/book';

-export const useBooksSync = () => {
+export interface UseBooksSyncProps {
+  onSyncStart?: () => void;
+  onSyncEnd?: () => void;
+}
+
+export const useBooksSync = ({ onSyncStart, onSyncEnd }: UseBooksSyncProps) => {
  const { user } = useAuth();
  const { appService } = useEnv();
  const { library, setLibrary } = useLibraryStore();
@@ -91,16 +96,23 @@ export const useBooksSync = () => {
      if (!updatedLibrary.some((oldBook) => oldBook.hash === newBook.hash)) {
        if (newBook.uploadedAt && !newBook.deletedAt) {
          try {
-            updatedLibrary.push(newBook);
            await appService?.downloadBook(newBook, true);
            newBook.coverImageUrl = await appService?.generateCoverImageUrl(newBook);
+            updatedLibrary.push(newBook);
+            setLibrary(updatedLibrary);
          } catch {
            console.error('Failed to download book:', newBook);
          }
        }
      }
    };
-    await Promise.all(syncedBooks.map(processNewBook));
+    onSyncStart?.();
+    const batchSize = 3;
+    for (let i = 0; i < syncedBooks.length; i += batchSize) {
+      const batch = syncedBooks.slice(i, i + batchSize);
+      await Promise.all(batch.map(processNewBook));
+    }
+    onSyncEnd?.();
    setLibrary(updatedLibrary);
    appService?.saveLibraryBooks(updatedLibrary);
  };
@@ -7,9 +7,11 @@ import { useRouter } from 'next/navigation';

 import { Book } from '@/types/book';
 import { AppService } from '@/types/system';
-import { navigateToReader } from '@/utils/nav';
+import { navigateToLogin, navigateToReader } from '@/utils/nav';
 import { getBaseFilename, listFormater } from '@/utils/book';
 import { eventDispatcher } from '@/utils/event';
+import { ProgressPayload } from '@/utils/transfer';
+import { throttle } from '@/utils/throttle';
 import { parseOpenWithFiles } from '@/helpers/cli';
 import { isTauriAppPlatform, hasUpdater } from '@/services/environment';
 import { checkForAppUpdates } from '@/helpers/updater';
@@ -30,8 +32,7 @@ import { Toast } from '@/components/Toast';
 import Spinner from '@/components/Spinner';
 import LibraryHeader from './components/LibraryHeader';
 import Bookshelf from './components/Bookshelf';
-import { ProgressPayload } from '@/utils/transfer';
-import { throttle } from '@/utils/throttle';
+import BookDetailModal from '@/components/BookDetailModal';

 const LibraryPage = () => {
  const router = useRouter();
@@ -51,13 +52,17 @@ const LibraryPage = () => {
  const isInitiating = useRef(false);
  const [libraryLoaded, setLibraryLoaded] = useState(false);
  const [isSelectMode, setIsSelectMode] = useState(false);
+  const [showDetailsBook, setShowDetailsBook] = useState<Book | null>(null);
  const [booksTransferProgress, setBooksTransferProgress] = useState<{
    [key: string]: number | null;
  }>({});
  const demoBooks = useDemoBooks();
  const containerRef = useRef<HTMLDivElement>(null);

-  const { pullLibrary, pushLibrary } = useBooksSync();
+  const { pullLibrary, pushLibrary } = useBooksSync({
+    onSyncStart: () => setLoading(true),
+    onSyncEnd: () => setLoading(false),
+  });

  usePullToRefresh(containerRef, pullLibrary);

@@ -244,7 +249,19 @@ const LibraryPage = () => {
          title: book.title,
        }),
      });
-    } catch {
+    } catch (err) {
+      if (err instanceof Error) {
+        if (err.message.includes('Not authenticated')) {
+          navigateToLogin(router);
+          return;
+        } else if (err.message.includes('Insufficient storage quota')) {
+          eventDispatcher.dispatch('toast', {
+            type: 'error',
+            message: _('Insufficient storage quota'),
+          });
+          return;
+        }
+      }
      eventDispatcher.dispatch('toast', {
        type: 'error',
        message: _('Failed to upload book: {{title}}', {
@@ -320,6 +337,10 @@ const LibraryPage = () => {
    setIsSelectMode(!isSelectMode);
  };

+  const handleShowDetailsBook = (book: Book) => {
+    setShowDetailsBook(book);
+  };
+
  if (!appService) {
    return null;
  }
@@ -337,8 +358,9 @@ const LibraryPage = () => {
  return (
    <div
      className={clsx(
-        'library-page bg-base-200 text-base-content flex h-dvh select-none flex-col overflow-hidden',
-        isTauriAppPlatform() && 'rounded-window',
+        'library-page bg-base-200 text-base-content flex select-none flex-col overflow-hidden',
+        appService?.isIOSApp ? 'h-[100vh]' : 'h-dvh',
+        appService?.hasRoundedWindow && 'rounded-window',
      )}
    >
      <div className='fixed top-0 z-40 w-full'>
@@ -355,7 +377,13 @@ const LibraryPage = () => {
      )}
      {libraryLoaded &&
        (libraryBooks.length > 0 ? (
-          <div ref={containerRef} className='mt-12 flex-grow overflow-auto px-2'>
+          <div
+            ref={containerRef}
+            className={clsx(
+              'mt-12 flex-grow overflow-auto px-2',
+              appService?.hasSafeAreaInset && 'mt-[calc(48px+env(safe-area-inset-top))]',
+            )}
+          >
            <Suspense>
              <Bookshelf
                libraryBooks={libraryBooks}
@@ -364,6 +392,7 @@ const LibraryPage = () => {
                handleBookUpload={handleBookUpload}
                handleBookDownload={handleBookDownload}
                handleBookDelete={handleBookDelete}
+                handleShowDetailsBook={handleShowDetailsBook}
                booksTransferProgress={booksTransferProgress}
              />
            </Suspense>
@@ -385,6 +414,13 @@ const LibraryPage = () => {
            </div>
          </div>
        ))}
+      {showDetailsBook && (
+        <BookDetailModal
+          isOpen={!!showDetailsBook}
+          book={showDetailsBook}
+          onClose={() => setShowDetailsBook(null)}
+        />
+      )}
      <AboutWindow />
      <Toast />
    </div>
@@ -1,10 +1,11 @@
+import clsx from 'clsx';
 import React, { useEffect } from 'react';

+import { useEnv } from '@/context/EnvContext';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { useSidebarStore } from '@/store/sidebarStore';
-import { isTauriAppPlatform } from '@/services/environment';
 import FoliateViewer from './FoliateViewer';
 import getGridTemplate from '@/utils/grid';
 import SectionInfo from './SectionInfo';
@@ -23,6 +24,7 @@ interface BooksGridProps {
 }

 const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
+  const { appService } = useEnv();
  const { getConfig, getBookData } = useBookDataStore();
  const { getProgress, getViewState, getViewSettings } = useReaderStore();
  const { sideBarBookKey } = useSidebarStore();
@@ -39,7 +41,10 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {

  return (
    <div
-      className='grid h-full flex-grow'
+      className={clsx(
+        'grid h-full flex-grow',
+        appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
+      )}
      style={{
        gridTemplateColumns: gridTemplate.columns,
        gridTemplateRows: gridTemplate.rows,
@@ -61,7 +66,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
          <div
            id={`gridcell-${bookKey}`}
            key={bookKey}
-            className={`${isTauriAppPlatform() ? 'rounded-window' : ''} relative h-full w-full overflow-hidden`}
+            className={`${appService?.hasRoundedWindow ? 'rounded-window' : ''} relative h-full w-full overflow-hidden`}
          >
            {isBookmarked && <Ribbon width={marginGap} />}
            <HeaderBar
@@ -7,8 +7,10 @@ import { useParallelViewStore } from '@/store/parallelViewStore';
 import { useClickEvent, useTouchEvent } from '../hooks/useIframeEvents';
 import { useFoliateEvents } from '../hooks/useFoliateEvents';
 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 { useTheme } from '@/hooks/useTheme';
 import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
 import {
@@ -42,6 +44,7 @@ const FoliateViewer: React.FC<{
  }, [toastMessage]);

  useProgressSync(bookKey);
+  useProgressAutoSave(bookKey);

  const progressRelocateHandler = (event: Event) => {
    const detail = (event as CustomEvent).detail;
@@ -86,7 +89,8 @@ const FoliateViewer: React.FC<{
      if (renderer) {
        if (renderer.start <= 0) {
          viewRef.current?.prev(1);
-        } else if (renderer.end >= renderer.viewSize) {
+          // sometimes viewSize has subpixel value that the end never reaches
+        } else if (renderer.end + 1 >= renderer.viewSize) {
          viewRef.current?.next(1);
        }
      }
@@ -140,6 +144,11 @@ const FoliateViewer: React.FC<{
      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!;
@@ -4,11 +4,11 @@ import { RiArrowLeftWideLine, RiArrowRightWideLine } from 'react-icons/ri';
 import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
 import { FaHeadphones } from 'react-icons/fa6';

+import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { eventDispatcher } from '@/utils/event';
-import { isPWA, isTauriAppPlatform } from '@/services/environment';
 import Button from '@/components/Button';

 interface FooterBarProps {
@@ -19,6 +19,7 @@ interface FooterBarProps {

 const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim }) => {
  const _ = useTranslation();
+  const { appService } = useEnv();
  const { hoveredBookKey, setHoveredBookKey, getView, getProgress } = useReaderStore();
  const { isSideBarVisible } = useSidebarStore();
  const view = getView(bookKey);
@@ -62,9 +63,9 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
      className={clsx(
        'footer-bar absolute bottom-0 z-10 flex h-12 w-full items-center gap-x-4 px-4',
        'shadow-xs bg-base-100 transition-opacity duration-300',
-        isPWA() ? 'pb-[env(safe-area-inset-bottom)]' : '',
-        isTauriAppPlatform() && 'rounded-window-bottom-right',
-        !isSideBarVisible && isTauriAppPlatform() && 'rounded-window-bottom-left',
+        appService?.hasSafeAreaInset && 'pb-[env(safe-area-inset-bottom)]',
+        appService?.hasRoundedWindow && 'rounded-window-bottom-right',
+        !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window-bottom-left',
        isHoveredAnim && 'hover-bar-anim',
        hoveredBookKey === bookKey ? `opacity-100` : `opacity-0`,
      )}
@@ -5,7 +5,6 @@ import { PiDotsThreeVerticalBold } from 'react-icons/pi';
 import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
-import { isTauriAppPlatform } from '@/services/environment';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import useTrafficLight from '@/hooks/useTrafficLight';
 import WindowButtons from '@/components/WindowButtons';
@@ -53,8 +52,8 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
        `header-bar absolute top-0 z-10 flex h-11 w-full items-center pr-4`,
        isTrafficLightVisible && isTopLeft && !isSideBarVisible ? 'pl-16' : 'pl-4',
        `shadow-xs bg-base-100 transition-opacity duration-300`,
-        isTauriAppPlatform() && 'rounded-window-top-right',
-        !isSideBarVisible && isTauriAppPlatform() && 'rounded-window-top-left',
+        appService?.hasRoundedWindow && 'rounded-window-top-right',
+        !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window-top-left',
        isHoveredAnim && 'hover-bar-anim',
        hoveredBookKey === bookKey || isDropdownOpen ? `visible` : `opacity-0`,
        isDropdownOpen && 'header-bar-pinned',
@@ -8,13 +8,12 @@ import { useEnv } from '@/context/EnvContext';
 import { useTheme } from '@/hooks/useTheme';
 import { useLibraryStore } from '@/store/libraryStore';
 import { useSettingsStore } from '@/store/settingsStore';
-import { isTauriAppPlatform } from '@/services/environment';
 import { AboutWindow } from '@/components/AboutWindow';
 import { Toast } from '@/components/Toast';
 import ReaderContent from './ReaderContent';

 const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
-  const { envConfig } = useEnv();
+  const { envConfig, appService } = useEnv();
  const { settings, setSettings } = useSettingsStore();
  const { library, setLibrary } = useLibraryStore();
  const isInitiating = useRef(false);
@@ -42,7 +41,7 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
      <div
        className={clsx(
          `reader-page bg-base-100 text-base-content select-none`,
-          isTauriAppPlatform() && 'rounded-window',
+          appService?.hasRoundedWindow && 'rounded-window',
        )}
      >
        <Suspense>
@@ -1,5 +1,6 @@
 'use client';

+import clsx from 'clsx';
 import * as React from 'react';
 import { useState, useRef, useEffect } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
@@ -31,7 +32,7 @@ import TTSControl from './tts/TTSControl';
 const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ ids, settings }) => {
  const router = useRouter();
  const searchParams = useSearchParams();
-  const { envConfig } = useEnv();
+  const { envConfig, appService } = useEnv();
  const { bookKeys, dismissBook, getNextBookKey } = useBooksManager();
  const { sideBarBookKey, setSideBarBookKey } = useSidebarStore();
  const { saveSettings } = useSettingsStore();
@@ -148,7 +149,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
    setTimeout(() => setLoading(true), 300);
    return (
      loading && (
-        <div className={'hero hero-content h-dvh'}>
+        <div className={clsx('hero hero-content', appService?.isIOSApp ? 'h-[100vh]' : 'h-dvh')}>
          <Spinner loading={true} />
        </div>
      )
@@ -156,7 +157,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
  }

  return (
-    <div className='flex h-dvh'>
+    <div className={clsx('flex', appService?.isIOSApp ? 'h-[100vh]' : 'h-dvh')}>
      <SideBar onGoToLibrary={handleCloseBooksToLibrary} />
      <BooksGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
      <TTSControl />
@@ -5,7 +5,12 @@ 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 } from '@/services/constants';
+import {
+  MAX_ZOOM_LEVEL,
+  MIN_ZOOM_LEVEL,
+  ONE_COLUMN_MAX_INLINE_SIZE,
+  ZOOM_STEP,
+} from '@/services/constants';
 import MenuItem from '@/components/MenuItem';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
@@ -32,8 +37,8 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
  const [isInvertedColors, setInvertedColors] = useState(viewSettings!.invert);
  const [zoomLevel, setZoomLevel] = useState(viewSettings!.zoomLevel!);

-  const zoomIn = () => setZoomLevel((prev) => Math.min(prev + 1, MAX_ZOOM_LEVEL));
-  const zoomOut = () => setZoomLevel((prev) => Math.max(prev - 1, MIN_ZOOM_LEVEL));
+  const zoomIn = () => setZoomLevel((prev) => Math.min(prev + ZOOM_STEP, MAX_ZOOM_LEVEL));
+  const zoomOut = () => setZoomLevel((prev) => Math.max(prev - ZOOM_STEP, MIN_ZOOM_LEVEL));
  const resetZoom = () => setZoomLevel(100);
  const toggleScrolledMode = () => setScrolledMode(!isScrolledMode);
  const toggleInvertedColors = () => setInvertedColors(!isInvertedColors);
@@ -104,7 +109,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
          )}
          onClick={resetZoom}
        >
-          {100 - (100 - zoomLevel) * 10}%
+          {zoomLevel}%
        </button>
        <button
          onClick={zoomIn}
@@ -49,6 +49,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const isShowingPopup = useRef(false);
  const isTextSelected = useRef(false);
  const isUpToShowPopup = useRef(false);
+  const isTouchstarted = useRef(false);
  const [selection, setSelection] = useState<TextSelection | null>();
  const [showAnnotPopup, setShowAnnotPopup] = useState(false);
  const [showWiktionaryPopup, setShowWiktionaryPopup] = useState(false);
@@ -94,14 +95,6 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
      }
      setSelection({ key: bookKey, text: sel.toString(), range, index });
    };
-    const handlePointerup = () => {
-      // Available on iOS and Desktop, fired when release the long press
-      // Note that on Android, pointerup event is fired for any tap but not for long press
-      const sel = doc.getSelection();
-      if (isValidSelection(sel)) {
-        makeSelection(sel, true);
-      }
-    };
    const handleSelectionchange = () => {
      // Available on iOS, Android and Desktop, fired when the selection is changed
      // Ideally the popup only shows when the selection is done,
@@ -109,7 +102,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
      // we make the popup show when the selection is changed
      const sel = doc.getSelection();
      if (isValidSelection(sel)) {
-        if (osPlatform === 'android') {
+        if (osPlatform === 'android' && isTouchstarted.current) {
          makeSelection(sel, false);
        }
      } else if (!isUpToShowPopup.current) {
@@ -120,14 +113,32 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
        setShowDeepLPopup(false);
      }
    };
+    const handlePointerup = () => {
+      // Available on iOS and Desktop, fired when release the long press
+      // Note that on Android, pointerup event is fired after an additional touch event
+      const sel = doc.getSelection();
+      if (isValidSelection(sel)) {
+        makeSelection(sel, true);
+      }
+    };
+    const handleTouchstart = () => {
+      // Available on iOS and Android for the initial touch event
+      isTouchstarted.current = true;
+    };
    const handleTouchmove = () => {
-      // Available on iOS
+      // Available on iOS, on Android not fired
      // To make the popup not to follow the selection
      setShowAnnotPopup(false);
    };
+    const handleTouchend = () => {
+      // Available on iOS, on Android fired after an additional touch event
+      isTouchstarted.current = false;
+    };
    if (bookData.book?.format !== 'PDF') {
      detail.doc?.addEventListener('pointerup', handlePointerup);
+      detail.doc?.addEventListener('touchstart', handleTouchstart);
      detail.doc?.addEventListener('touchmove', handleTouchmove);
+      detail.doc?.addEventListener('touchend', handleTouchend);
      detail.doc?.addEventListener('selectionchange', handleSelectionchange);

      // Disable the default context menu on mobile devices,
@@ -13,7 +13,6 @@ import { TextSelection } from '@/utils/sel';
 import { BookNote } from '@/types/book';
 import { uniqueId } from '@/utils/misc';
 import { eventDispatcher } from '@/utils/event';
-import { isTauriAppPlatform } from '@/services/environment';
 import useDragBar from '../../hooks/useDragBar';
 import BooknoteItem from '../sidebar/BooknoteItem';
 import NotebookHeader from './Header';
@@ -25,7 +24,7 @@ const MAX_NOTEBOOK_WIDTH = 0.45;
 const Notebook: React.FC = ({}) => {
  const _ = useTranslation();
  const { updateAppTheme } = useTheme();
-  const { envConfig } = useEnv();
+  const { envConfig, appService } = useEnv();
  const { settings } = useSettingsStore();
  const { sideBarBookKey } = useSidebarStore();
  const { notebookWidth, isNotebookVisible, isNotebookPinned } = useNotebookStore();
@@ -152,7 +151,7 @@ const Notebook: React.FC = ({}) => {
      <div
        className={clsx(
          'notebook-container bg-base-200 right-0 z-20 h-full min-w-60 select-none',
-          isTauriAppPlatform() && 'rounded-window-top-right rounded-window-bottom-right',
+          appService?.hasRoundedWindow && 'rounded-window-top-right rounded-window-bottom-right',
          !isNotebookPinned && 'shadow-2xl',
        )}
        style={{
@@ -8,8 +8,8 @@ import { useDefaultIconSize, useResponsiveSize } from '@/hooks/useResponsiveSize
 interface DropdownProps {
  family?: string;
  selected: string;
-  options: string[];
-  moreOptions?: string[];
+  options: { option: string; label?: string }[];
+  moreOptions?: { option: string; label?: string }[];
  onSelect: (option: string) => void;
  onGetFontFamily: (option: string, family: string) => string;
 }
@@ -25,26 +25,32 @@ const FontDropdown: React.FC<DropdownProps> = ({
  const _ = useTranslation();
  const iconSize16 = useResponsiveSize(16);
  const defaultIconSize = useDefaultIconSize();
+  const allOptions = [...options, ...(moreOptions ?? [])];
+  const selectedOption = allOptions.find((option) => option.option === selected) ?? allOptions[0]!;
  return (
    <div className='dropdown dropdown-top'>
      <button
        tabIndex={0}
        className='btn btn-sm flex items-center gap-1 px-[20px] font-normal normal-case'
      >
-        <span style={{ fontFamily: onGetFontFamily(selected, family ?? '') }}>{selected}</span>
+        <span style={{ fontFamily: onGetFontFamily(selectedOption.option, family ?? '') }}>
+          {selectedOption.label}
+        </span>
        <FiChevronUp size={iconSize16} />
      </button>
      <ul
        tabIndex={0}
        className='dropdown-content bgcolor-base-200 no-triangle menu rounded-box absolute right-[-32px] z-[1] mt-4 w-44 shadow sm:right-0'
      >
-        {options.map((option) => (
+        {options.map(({ option, label }) => (
          <li key={option} onClick={() => onSelect(option)}>
            <div className='flex items-center px-0'>
              <span style={{ minWidth: `${defaultIconSize}px` }}>
                {selected === option && <MdCheck className='text-base-content' />}
              </span>
-              <span style={{ fontFamily: onGetFontFamily(option, family ?? '') }}>{option}</span>
+              <span style={{ fontFamily: onGetFontFamily(option, family ?? '') }}>
+                {label || option}
+              </span>
            </div>
          </li>
        ))}
@@ -63,14 +69,14 @@ const FontDropdown: React.FC<DropdownProps> = ({
                '!mr-5 mb-[-46px] inline max-h-80 w-[200px] overflow-y-scroll',
              )}
            >
-              {moreOptions.map((option) => (
-                <li key={option} onClick={() => onSelect(option)}>
+              {moreOptions.map((option, index) => (
+                <li key={`${index}-${option.option}`} onClick={() => onSelect(option.option)}>
                  <div className='flex items-center px-2'>
                    <span style={{ minWidth: `${defaultIconSize}px` }}>
-                      {selected === option && <MdCheck className='text-base-content' />}
+                      {selected === option.option && <MdCheck className='text-base-content' />}
                    </span>
-                    <span style={{ fontFamily: onGetFontFamily(option, family ?? '') }}>
-                      {option}
+                    <span style={{ fontFamily: onGetFontFamily(option.option, family ?? '') }}>
+                      {option.label || option.option}
                    </span>
                  </div>
                </li>
@@ -19,6 +19,8 @@ import { useTranslation } from '@/hooks/useTranslation';
 import { useTheme } from '@/hooks/useTheme';
 import { getStyles } from '@/utils/style';
 import { getOSPlatform } from '@/utils/misc';
+import { FONT_ENUM_SUPPORTED_OS_PLATFORMS, getSysFontsList } from '@/utils/font';
+import { isTauriAppPlatform } from '@/services/environment';

 interface FontFaceProps {
  className?: string;
@@ -30,8 +32,6 @@ interface FontFaceProps {
  onSelect: (option: string) => void;
 }

-const fontFamilyOptions = ['Serif', 'Sans-serif'];
-
 const handleFontFaceFont = (option: string, family: string) => {
  return `'${option}', ${family}`;
 };
@@ -49,8 +49,8 @@ const FontFace = ({
    <span className=''>{label}</span>
    <FontDropdown
      family={family}
-      options={options}
-      moreOptions={moreOptions}
+      options={options.map((option) => ({ option, label: option }))}
+      moreOptions={moreOptions?.map((option) => ({ option, label: option })) ?? []}
      selected={selected}
      onSelect={onSelect}
      onGetFontFamily={handleFontFaceFont}
@@ -66,27 +66,39 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const viewSettings = getViewSettings(bookKey)!;
  const { themeCode } = useTheme();

+  const fontFamilyOptions = [
+    {
+      option: 'Serif',
+      label: _('Serif Font'),
+    },
+    {
+      option: 'Sans-serif',
+      label: _('Sans-Serif Font'),
+    },
+  ];
+
  const osPlatform = getOSPlatform();
-  let moreFonts: string[] = [];
+  let defaultSysFonts: string[] = [];
  switch (osPlatform) {
    case 'macos':
-      moreFonts = MACOS_FONTS;
+      defaultSysFonts = MACOS_FONTS;
      break;
    case 'windows':
-      moreFonts = WINDOWS_FONTS;
+      defaultSysFonts = WINDOWS_FONTS;
      break;
    case 'linux':
-      moreFonts = LINUX_FONTS;
+      defaultSysFonts = LINUX_FONTS;
      break;
    case 'ios':
-      moreFonts = IOS_FONTS;
+      defaultSysFonts = IOS_FONTS;
      break;
    case 'android':
-      moreFonts = ANDROID_FONTS;
+      defaultSysFonts = ANDROID_FONTS;
      break;
    default:
      break;
  }
+  const [sysFonts, setSysFonts] = useState<string[]>(defaultSysFonts);
  const [defaultFontSize, setDefaultFontSize] = useState(viewSettings.defaultFontSize!);
  const [minFontSize, setMinFontSize] = useState(viewSettings.minimumFontSize!);
  const [overrideFont, setOverrideFont] = useState(viewSettings.overrideFont!);
@@ -94,6 +106,16 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const [serifFont, setSerifFont] = useState(viewSettings.serifFont!);
  const [sansSerifFont, setSansSerifFont] = useState(viewSettings.sansSerifFont!);
  const [monospaceFont, setMonospaceFont] = useState(viewSettings.monospaceFont!);
+  const [fontWeight, setFontWeight] = useState(viewSettings.fontWeight!);
+
+  useEffect(() => {
+    if (isTauriAppPlatform() && FONT_ENUM_SUPPORTED_OS_PLATFORMS.includes(osPlatform)) {
+      getSysFontsList().then((fonts) => {
+        setSysFonts(fonts);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);

  useEffect(() => {
    viewSettings.defaultFont = defaultFont;
@@ -128,6 +150,17 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [minFontSize]);

+  useEffect(() => {
+    viewSettings.fontWeight = fontWeight;
+    setViewSettings(bookKey, viewSettings);
+    if (isFontLayoutSettingsGlobal) {
+      settings.globalViewSettings.fontWeight = fontWeight;
+      setSettings(settings);
+    }
+    view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fontWeight]);
+
  useEffect(() => {
    viewSettings.serifFont = serifFont;
    setViewSettings(bookKey, viewSettings);
@@ -211,6 +244,23 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
        </div>
      </div>

+      <div className='w-full'>
+        <h2 className='mb-2 font-medium'>{_('Font Weight')}</h2>
+        <div className='card border-base-200 border shadow'>
+          <div className='divide-base-200 divide-y'>
+            <NumberInput
+              className='config-item-top'
+              label={_('Font Weight')}
+              value={fontWeight}
+              onChange={setFontWeight}
+              min={100}
+              max={900}
+              step={100}
+            />
+          </div>
+        </div>
+      </div>
+
      <div className='w-full'>
        <h2 className='mb-2 font-medium'>{_('Font Family')}</h2>
        <div className='card border-base-200 border shadow'>
@@ -247,7 +297,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
              family='serif'
              label={_('Serif Font')}
              options={SERIF_FONTS}
-              moreOptions={moreFonts}
+              moreOptions={sysFonts}
              selected={serifFont}
              onSelect={setSerifFont}
            />
@@ -255,7 +305,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
              family='sans-serif'
              label={_('Sans-Serif Font')}
              options={SANS_SERIF_FONTS}
-              moreOptions={moreFonts}
+              moreOptions={sysFonts}
              selected={sansSerifFont}
              onSelect={setSansSerifFont}
            />
@@ -264,7 +314,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
              family='monospace'
              label={_('Monospace Font')}
              options={MONOSPACE_FONTS}
-              moreOptions={moreFonts}
+              moreOptions={sysFonts}
              selected={monospaceFont}
              onSelect={setMonospaceFont}
            />
@@ -9,7 +9,7 @@ import { useBookDataStore } from '@/store/bookDataStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useTheme } from '@/hooks/useTheme';
 import { getStyles } from '@/utils/style';
-import { getBookLangCode } from '@/utils/book';
+import { getBookDirFromWritingMode, getBookLangCode } from '@/utils/book';
 import NumberInput from './NumberInput';

 const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
@@ -22,7 +22,11 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const viewSettings = getViewSettings(bookKey)!;
  const { themeCode } = useTheme();

+  const [paragraphMargin, setParagraphMargin] = useState(viewSettings.paragraphMargin!);
  const [lineHeight, setLineHeight] = useState(viewSettings.lineHeight!);
+  const [wordSpacing, setWordSpacing] = useState(viewSettings.wordSpacing!);
+  const [letterSpacing, setLetterSpacing] = useState(viewSettings.letterSpacing!);
+  const [textIndent, setTextIndent] = useState(viewSettings.textIndent!);
  const [fullJustification, setFullJustification] = useState(viewSettings.fullJustification!);
  const [hyphenation, setHyphenation] = useState(viewSettings.hyphenation!);
  const [marginPx, setMarginPx] = useState(viewSettings.marginPx!);
@@ -32,6 +36,17 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const [maxBlockSize, setMaxBlockSize] = useState(viewSettings.maxBlockSize!);
  const [writingMode, setWritingMode] = useState(viewSettings.writingMode!);

+  useEffect(() => {
+    viewSettings.paragraphMargin = paragraphMargin;
+    setViewSettings(bookKey, viewSettings);
+    if (isFontLayoutSettingsGlobal) {
+      settings.globalViewSettings.paragraphMargin = paragraphMargin;
+      setSettings(settings);
+    }
+    view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [paragraphMargin]);
+
  useEffect(() => {
    viewSettings.lineHeight = lineHeight;
    setViewSettings(bookKey, viewSettings);
@@ -43,6 +58,39 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [lineHeight]);

+  useEffect(() => {
+    viewSettings.wordSpacing = wordSpacing;
+    setViewSettings(bookKey, viewSettings);
+    if (isFontLayoutSettingsGlobal) {
+      settings.globalViewSettings.wordSpacing = wordSpacing;
+      setSettings(settings);
+    }
+    view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [wordSpacing]);
+
+  useEffect(() => {
+    viewSettings.letterSpacing = letterSpacing;
+    setViewSettings(bookKey, viewSettings);
+    if (isFontLayoutSettingsGlobal) {
+      settings.globalViewSettings.letterSpacing = letterSpacing;
+      setSettings(settings);
+    }
+    view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [letterSpacing]);
+
+  useEffect(() => {
+    viewSettings.textIndent = textIndent;
+    setViewSettings(bookKey, viewSettings);
+    if (isFontLayoutSettingsGlobal) {
+      settings.globalViewSettings.textIndent = textIndent;
+      setSettings(settings);
+    }
+    view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [textIndent]);
+
  useEffect(() => {
    viewSettings.fullJustification = fullJustification;
    setViewSettings(bookKey, viewSettings);
@@ -134,7 +182,10 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    // global settings are not supported for writing mode
    viewSettings.writingMode = writingMode;
    setViewSettings(bookKey, viewSettings);
-    view?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+    if (view) {
+      view.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+      view.book.dir = getBookDirFromWritingMode(writingMode);
+    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [writingMode]);

@@ -185,13 +236,49 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
          <div className='divide-base-200 divide-y'>
            <NumberInput
              className='config-item-top'
-              label={_('Line Height')}
+              label={_('Paragraph Margin')}
+              value={paragraphMargin}
+              onChange={setParagraphMargin}
+              min={0}
+              max={4}
+              step={0.5}
+            />
+            <NumberInput
+              className='config-item-top'
+              label={_('Line Spacing')}
              value={lineHeight}
              onChange={setLineHeight}
              min={1.0}
              max={3.0}
              step={0.1}
            />
+            <NumberInput
+              className='config-item-top'
+              label={_('Word Spacing')}
+              value={wordSpacing}
+              onChange={setWordSpacing}
+              min={-4}
+              max={8}
+              step={0.5}
+            />
+            <NumberInput
+              className='config-item-top'
+              label={_('Letter Spacing')}
+              value={letterSpacing}
+              onChange={setLetterSpacing}
+              min={-2}
+              max={4}
+              step={0.1}
+            />
+            <NumberInput
+              className='config-item-top'
+              label={_('Text Indent')}
+              value={textIndent}
+              onChange={setTextIndent}
+              min={-2}
+              max={4}
+              step={1}
+            />
            <div className='config-item config-item-bottom'>
              <span className=''>{_('Full Justification')}</span>
              <input
@@ -30,7 +30,7 @@ const BookCard = ({ book }: { book: Book }) => {
      />
      <div className='min-w-0 flex-1'>
        <h4 className='line-clamp-2 w-[90%] text-sm font-semibold'>{formatTitle(title)}</h4>
-        <p className='text-neutral-content truncate text-xs'>{formatAuthors(undefined, author)}</p>
+        <p className='text-neutral-content truncate text-xs'>{formatAuthors(author)}</p>
      </div>
      <button
        className='btn btn-ghost hover:bg-base-300 h-6 min-h-6 w-6 rounded-full p-0 transition-colors'
@@ -2,16 +2,17 @@ import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';

 import { BookDoc } from '@/libs/document';
+import { useEnv } from '@/context/EnvContext';
 import { useBookDataStore } from '@/store/bookDataStore';
 import TOCView from './TOCView';
 import BooknoteView from './BooknoteView';
 import TabNavigation from './TabNavigation';
-import { isPWA } from '@/services/environment';

 const SidebarContent: React.FC<{
  bookDoc: BookDoc;
  sideBarBookKey: string;
 }> = ({ bookDoc, sideBarBookKey }) => {
+  const { appService } = useEnv();
  const scrollContainerRef = useRef<HTMLDivElement>(null);
  const { getConfig, setConfig } = useBookDataStore();
  const config = getConfig(sideBarBookKey);
@@ -92,7 +93,10 @@ const SidebarContent: React.FC<{
        </div>
      </div>
      <div
-        className={clsx('flex-shrink-0', isPWA() ? 'pb-[calc(env(safe-area-inset-bottom)/2)]' : '')}
+        className={clsx(
+          'flex-shrink-0',
+          appService?.hasSafeAreaInset && 'pb-[calc(env(safe-area-inset-bottom)/2)]',
+        )}
      >
        <TabNavigation activeTab={activeTab} onTabChange={handleTabChange} />
      </div>
@@ -7,7 +7,7 @@ import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { BookSearchResult } from '@/types/book';
 import { eventDispatcher } from '@/utils/event';
-import { isTauriAppPlatform } from '@/services/environment';
+import { useEnv } from '@/context/EnvContext';
 import { useTheme } from '@/hooks/useTheme';
 import SidebarHeader from './Header';
 import SidebarContent from './Content';
@@ -24,6 +24,7 @@ const MAX_SIDEBAR_WIDTH = 0.45;
 const SideBar: React.FC<{
  onGoToLibrary: () => void;
 }> = ({ onGoToLibrary }) => {
+  const { appService } = useEnv();
  const { updateAppTheme } = useTheme();
  const { settings } = useSettingsStore();
  const { sideBarBookKey } = useSidebarStore();
@@ -117,8 +118,10 @@ const SideBar: React.FC<{
    <>
      <div
        className={clsx(
-          'sidebar-container bg-base-200 z-20 flex h-full min-w-60 select-none flex-col',
-          isTauriAppPlatform() && 'rounded-window-top-left rounded-window-bottom-left',
+          'sidebar-container bg-base-200 z-20 flex min-w-60 select-none flex-col',
+          appService?.isIOSApp ? 'h-[100vh]' : 'h-full',
+          appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
+          appService?.hasRoundedWindow && 'rounded-window-top-left rounded-window-bottom-left',
          !isSideBarPinned && 'shadow-2xl',
        )}
        style={{
@@ -120,7 +120,7 @@ const TOCView: React.FC<{
  };

  useEffect(() => {
-    if (!progress) return;
+    if (!progress || eventDispatcher.dispatchSync('tts-is-speaking')) return;
    const { sectionHref: currentHref } = progress;
    const hrefMd5 = currentHref ? getContentMd5(currentHref) : '';
    const currentItem = viewRef.current?.querySelector(`[data-href="${hrefMd5}"]`);
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { useEnv } from '@/context/EnvContext';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
@@ -10,7 +11,6 @@ import { eventDispatcher } from '@/utils/event';
 import { parseSSMLLang } from '@/utils/ssml';
 import { getOSPlatform } from '@/utils/misc';
 import { throttle } from '@/utils/throttle';
-import { isPWA } from '@/services/environment';
 import Popup from '@/components/Popup';
 import TTSPanel from './TTSPanel';
 import TTSIcon from './TTSIcon';
@@ -21,6 +21,7 @@ const POPUP_PADDING = 10;

 const TTSControl = () => {
  const _ = useTranslation();
+  const { appService } = useEnv();
  const { getBookData } = useBookDataStore();
  const { getView, getViewSettings } = useReaderStore();
  const [bookKey, setBookKey] = useState<string>('');
@@ -273,8 +274,10 @@ const TTSControl = () => {
        <div
          ref={iconRef}
          className={clsx(
-            'absolute right-6 h-12 w-12',
-            isPWA() ? 'bottom-[calc(env(safe-area-inset-bottom)+48px)]' : 'bottom-12',
+            'fixed right-6 h-12 w-12',
+            appService?.hasSafeAreaInset
+              ? 'bottom-[calc(env(safe-area-inset-bottom)+48px)]'
+              : 'bottom-12',
          )}
        >
          <TTSIcon isPlaying={isPlaying} onClick={togglePopup} />
@@ -8,7 +8,7 @@ import { useSettingsStore } from '@/store/settingsStore';
 import { useTheme } from '@/hooks/useTheme';
 import { getStyles } from '@/utils/style';
 import { eventDispatcher } from '@/utils/event';
-import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL } from '@/services/constants';
+import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL, ZOOM_STEP } from '@/services/constants';

 interface UseBookShortcutsProps {
  sideBarBookKey: string | null;
@@ -83,7 +83,7 @@ const useBookShortcuts = ({ sideBarBookKey, bookKeys }: UseBookShortcutsProps) =
    const view = getView(sideBarBookKey);
    if (!view?.renderer?.setStyles) return;
    const viewSettings = getViewSettings(sideBarBookKey)!;
-    const zoomLevel = viewSettings!.zoomLevel + 1;
+    const zoomLevel = viewSettings!.zoomLevel + ZOOM_STEP;
    viewSettings!.zoomLevel = Math.min(zoomLevel, MAX_ZOOM_LEVEL);
    setViewSettings(sideBarBookKey, viewSettings!);
    view?.renderer.setStyles?.(getStyles(viewSettings!, themeCode));
@@ -94,7 +94,7 @@ const useBookShortcuts = ({ sideBarBookKey, bookKeys }: UseBookShortcutsProps) =
    const view = getView(sideBarBookKey);
    if (!view?.renderer?.setStyles) return;
    const viewSettings = getViewSettings(sideBarBookKey)!;
-    const zoomLevel = viewSettings!.zoomLevel - 1;
+    const zoomLevel = viewSettings!.zoomLevel - ZOOM_STEP;
    viewSettings!.zoomLevel = Math.max(zoomLevel, MIN_ZOOM_LEVEL);
    setViewSettings(sideBarBookKey, viewSettings!);
    view?.renderer.setStyles?.(getStyles(viewSettings!, themeCode));
@@ -0,0 +1,31 @@
+import { useCallback, useEffect } from 'react';
+import { useEnv } from '@/context/EnvContext';
+import { useBookDataStore } from '@/store/bookDataStore';
+import { useReaderStore } from '@/store/readerStore';
+import { useSettingsStore } from '@/store/settingsStore';
+import { throttle } from '@/utils/throttle';
+
+export const useProgressAutoSave = (bookKey: string) => {
+  const { envConfig, appService } = useEnv();
+  const { getConfig, saveConfig } = useBookDataStore();
+  const { getProgress } = useReaderStore();
+  const progress = getProgress(bookKey);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const saveBookConfig = useCallback(
+    throttle(async () => {
+      const config = getConfig(bookKey)!;
+      const settings = useSettingsStore.getState().settings;
+      await saveConfig(envConfig, bookKey, config, settings);
+    }, 10000),
+    [],
+  );
+
+  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]);
+};
@@ -74,7 +74,7 @@ const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
    );

  return (
-    <>
+    <div className='fixed inset-0 z-50 flex items-center justify-center'>
      <Dialog
        title={_('Book Details')}
        isOpen={isOpen}
@@ -83,7 +83,7 @@ const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
        boxClassName='sm:min-w-[480px]'
        contentClassName='!px-6 !py-2'
      >
-        <div className='z-50 flex w-full select-text items-center justify-center'>
+        <div className='flex w-full select-text items-center justify-center'>
          <div className='relative w-full rounded-lg'>
            <div className='mb-10 flex h-40 items-start'>
              <div className='book-cover relative mr-10 aspect-[28/41] h-40 items-end shadow-lg'>
@@ -115,7 +115,7 @@ const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
                    {formatTitle(book.title) || _('Untitled')}
                  </p>
                  <p className='text-neutral-content line-clamp-1'>
-                    {formatAuthors(bookMeta.language, book.author) || _('Unknown')}
+                    {formatAuthors(book.author, bookMeta.language) || _('Unknown')}
                  </p>
                </div>
                {window.innerWidth >= 400 && (
@@ -202,7 +202,7 @@ const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
          onClickConfirm={confirmDelete}
        />
      )}
-    </>
+    </div>
  );
 };

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React, { ReactNode, useEffect } from 'react';
 import { MdArrowBackIosNew } from 'react-icons/md';
+import { useEnv } from '@/context/EnvContext';
 import { useResponsiveSize } from '@/hooks/useResponsiveSize';

 interface DialogProps {
@@ -26,6 +27,7 @@ const Dialog: React.FC<DialogProps> = ({
  contentClassName,
  onClose,
 }) => {
+  const { appService } = useEnv();
  const iconSize22 = useResponsiveSize(22);
  const handleKeyDown = (event: KeyboardEvent) => {
    if (event.key === 'Escape') {
@@ -54,6 +56,7 @@ const Dialog: React.FC<DialogProps> = ({
        className={clsx(
          'modal-box settings-content flex h-full max-h-full w-full max-w-full flex-col rounded-none p-0 sm:rounded-2xl',
          'sm:h-[60%] sm:w-[65%] sm:max-w-[600px]',
+          appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
          boxClassName,
        )}
      >
@@ -63,6 +63,7 @@ export interface BookDoc {
    subject?: string[];
    identifier?: string;
  };
+  dir: string;
  toc?: Array<TOCItem>;
  sections?: Array<SectionItem>;
  splitTOCHref(href: string): Array<string | number>;
@@ -82,6 +82,9 @@ export const uploadFile = async (
    }
  } catch (error) {
    console.error('File upload failed:', error);
+    if (error instanceof Error) {
+      throw error;
+    }
    throw new Error('File upload failed');
  }
 };
@@ -37,13 +37,19 @@ import { downloadFile, uploadFile, deleteFile, createProgressHandler } from '@/l
 import { ProgressHandler } from '@/utils/transfer';

 export abstract class BaseAppService implements AppService {
+  osPlatform: string = getOSPlatform();
  isMobile: boolean = ['android', 'ios'].includes(getOSPlatform());
  localBooksDir: string = '';
  abstract fs: FileSystem;
  abstract appPlatform: AppPlatform;
  abstract isAppDataSandbox: boolean;
+  abstract isAndroidApp: boolean;
+  abstract isIOSApp: boolean;
  abstract hasTrafficLight: boolean;
  abstract hasWindowBar: boolean;
+  abstract hasContextMenu: boolean;
+  abstract hasRoundedWindow: boolean;
+  abstract hasSafeAreaInset: boolean;

  abstract resolvePath(fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string };
  abstract getCoverImageUrl(book: Book): string;
@@ -155,7 +161,7 @@ export abstract class BaseAppService implements AppService {
        hash,
        format,
        title: formatTitle(loadedBook.metadata.title),
-        author: formatAuthors(loadedBook.metadata.language, loadedBook.metadata.author),
+        author: formatAuthors(loadedBook.metadata.author, loadedBook.metadata.language),
        createdAt: existingBook ? existingBook.createdAt : Date.now(),
        uploadedAt: existingBook ? existingBook.uploadedAt : null,
        downloadedAt: Date.now(),
@@ -319,7 +325,8 @@ export abstract class BaseAppService implements AppService {
    let file: File;
    const fp = getFilename(book);
    if (await this.fs.exists(fp, 'Books')) {
-      if (this.appPlatform === 'web') {
+      // TODO: fix random access for android
+      if (this.appPlatform === 'web' || getOSPlatform() === 'android') {
        const content = await this.fs.readFile(fp, 'Books', 'binary');
        file = new File([content], fp);
      } else {
@@ -13,12 +13,12 @@ import { UserStorageQuota } from '@/types/user';
 export const LOCAL_BOOKS_SUBDIR = 'Readest/Books';
 export const CLOUD_BOOKS_SUBDIR = 'Readest/Books';

-export const SUPPORTED_FILE_EXTS = ['epub', 'mobi', 'azw', 'azw3', 'fb2', 'cbz', 'pdf'];
+export const SUPPORTED_FILE_EXTS = ['epub', 'mobi', 'azw', 'azw3', 'fb2', 'zip', 'cbz', 'pdf'];
 export const FILE_ACCEPT_FORMATS = SUPPORTED_FILE_EXTS.map((ext) => `.${ext}`).join(', ');

 export const DEFAULT_SYSTEM_SETTINGS: Partial<SystemSettings> = {
  keepLogin: false,
-  autoUpload: false,
+  autoUpload: true,
  autoCheckUpdates: true,

  lastSyncedAtBooks: 0,
@@ -67,7 +67,11 @@ export const DEFAULT_BOOK_LAYOUT: BookLayout = {

 export const DEFAULT_BOOK_STYLE: BookStyle = {
  zoomLevel: 100,
+  paragraphMargin: 1,
  lineHeight: 1.6,
+  wordSpacing: 0,
+  letterSpacing: 0,
+  textIndent: 0,
  fullJustification: true,
  hyphenation: true,
  invert: false,
@@ -175,13 +179,10 @@ export const WINDOWS_FONTS = [
  'SimSun-ExtB',
  'Sitka',
  'Sylfaen',
-  'Symbol',
  'Tahoma',
  'Times New Roman',
  'Trebuchet MS',
  'Verdana',
-  'Webdings',
-  'Wingdings',
  'XiHeiti',
  'Yu Gothic',
  'Yu Mincho',
@@ -309,11 +310,9 @@ export const LINUX_FONTS = [
  'Sazanami Mincho',
  'Source Han Sans',
  'Source Han Serif',
-  'Symbola',
  'Times New Roman',
  'Ubuntu',
  'Ubuntu Mono',
-  'Wingdings',
  'WenQuanYi Micro Hei',
  'WenQuanYi Zen Hei',
  'XiHeiti',
@@ -384,8 +383,9 @@ export const SYNC_NOTES_INTERVAL_SEC = 10;
 export const SYNC_BOOKS_INTERVAL_SEC = 10;
 export const CHECK_UPDATE_INTERVAL_SEC = 24 * 60 * 60;

-export const MAX_ZOOM_LEVEL = 140;
-export const MIN_ZOOM_LEVEL = 95;
+export const MAX_ZOOM_LEVEL = 500;
+export const MIN_ZOOM_LEVEL = 50;
+export const ZOOM_STEP = 10;

 export const DEFAULT_STORAGE_QUOTA: UserStorageQuota = {
  free: 500 * 1024 * 1024,
@@ -23,7 +23,7 @@ import { isValidURL } from '@/utils/misc';
 import { BaseAppService } from './appService';
 import { LOCAL_BOOKS_SUBDIR } from './constants';

-export const isMobile = ['android', 'ios'].includes(osType());
+const OS_TYPE = osType();

 const resolvePath = (fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string } => {
  switch (base) {
@@ -117,9 +117,14 @@ export const nativeFileSystem: FileSystem = {
 export class NativeAppService extends BaseAppService {
  fs = nativeFileSystem;
  appPlatform = 'tauri' as AppPlatform;
-  isAppDataSandbox = isMobile;
-  hasTrafficLight = osType() === 'macos';
-  hasWindowBar = !(osType() === 'ios' || osType() === 'android');
+  isAppDataSandbox = ['android', 'ios'].includes(OS_TYPE);
+  isAndroidApp = OS_TYPE === 'android';
+  isIOSApp = OS_TYPE === 'ios';
+  hasTrafficLight = OS_TYPE === 'macos';
+  hasWindowBar = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
+  hasContextMenu = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
+  hasRoundedWindow = !(OS_TYPE === 'ios' || OS_TYPE === 'android');
+  hasSafeAreaInset = OS_TYPE === 'ios' || OS_TYPE === 'android';

  override resolvePath(fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string } {
    return resolvePath(fp, base);
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Huang Xin	8b80c52c54	release: version 0.9.10 (#324 )	2025-02-08 18:53:50 +01:00
Huang Xin	d3d496b583	mobile: fix TTS icon position on iOS (#322 )	2025-02-08 18:21:47 +01:00
Huang Xin	ad1365fa23	mobile: fix layout of book detail modal and refresh indicator (#321 )	2025-02-08 17:57:49 +01:00
Huang Xin	0ba3b510ce	fix: importing fb2.zip file and CSP for embedded cover image (#319 ) * fix: don't set window shadow below Win 11 * fix: importing fb2.zip file and CSP for embedded cover image	2025-02-08 16:19:54 +01:00
Huang Xin	1da0817145	mobile: fix sidebar height on iOS (#318 ) * mobile: fix sidebar height on iOS * fix: tts should not resume playing when closing book	2025-02-08 13:32:15 +01:00
Huang Xin	151509b84c	mobile: fix iOS safe area insets (#317 )	2025-02-08 03:38:17 +01:00
Huang Xin	282b129bf5	mobile: save book config when progress changes on Android (#315 )	2025-02-07 23:22:55 +01:00
Huang Xin	7dfd7b9ca2	mobile: fix hasSafeAreaInset as PWA is only for WebAppService (#314 )	2025-02-07 22:35:24 +01:00
Huang Xin	ce00c3e923	mobile: immersive UI for android (#313 )	2025-02-07 22:23:42 +01:00
Huang Xin	e2e3418412	mobile: support safe area insets for mobile platforms (#312 )	2025-02-07 22:15:18 +01:00
Huang Xin	c79657a1ee	fix: don't autoscroll to current item in TOC when TTS is on (#311 )	2025-02-07 19:08:50 +01:00
Huang Xin	dee1e28a61	feat: add options to adjust paragraph margin, word spacing, letter spacing, text indent and font weight (#310 )	2025-02-07 18:23:12 +01:00
Huang Xin	adfdb10d8e	fix: compatibility fix for some formerly imported corrupted metadata (#307 ) * fix: compatibility fix for some formerly imported corrupted metadata * fix: use font family names of sys fonts	2025-02-07 02:54:29 +01:00
Huang Xin	023ba663e3	fix: stop showing annotator popup when speaking with TTS on Android (#306 ) * fix: stop showing annotator popup when speaking with TTS on Android * chore: get rid of the warning complains of rustc	2025-02-07 01:20:25 +01:00
Huang Xin	b2ef55832c	hotfix: fix window cannot be dragged when light traffic widget is shown on macOS (#304 ) * fix: fix window cannot be dragged when light traffic widget is shown on macOS * fix: detecting tauri focus event for deeplink redirect in oauth * release: version 0.9.9	2025-02-06 20:54:39 +01:00
Huang Xin	b879184dc6	ux: incrementally loading new books after synchronization (#303 ) * auth: workaround to get deeplink data when completing oauth on Android * ux: incrementally loading new books after synchronization	2025-02-06 19:07:48 +01:00
Huang Xin	8bd9e18381	auth: add applinks for auth on android and ios (#302 )	2025-02-06 16:16:15 +01:00
Huang Xin	4121195fd3	fix: remove symbolic fonts in default sys fonts list (#301 ) * chore: fix script for appstore release * fix: remove symbolic fonts in default sys fonts list	2025-02-06 11:32:56 +01:00
Huang Xin	cebe8812d3	i18n: translate Sans-serif and Serif font labels (#300 )	2025-02-05 16:57:53 +01:00
Huang Xin	0a13f36e33	sync: add toast error for failed uploading when the cloud quota is insufficient (#299 )	2025-02-05 15:48:59 +01:00
Huang Xin	ded6053134	fix: UA detection of Safari with AppleWebKit (#298 ) * fix: UA detection of Safari with AppleWebKit * readme: add hello-github badge	2025-02-05 11:24:16 +01:00
Huang Xin	1c6cc2bca0	tts: change voice language at speak time when the book language is not accurate (#296 )	2025-02-04 23:44:59 +01:00
Huang Xin	6ca96be917	fix: swap paging keys when writing direction is set in config (#295 )	2025-02-04 23:03:20 +01:00
Huang Xin	a057af7881	fix: avoid over-highlighting on some blank space when selecting multiple paragraphs, closes #238 (#294 )	2025-02-04 22:09:13 +01:00
Huang Xin	279504395d	fix: handle zoomed text rect on Safari when highlighting, closes #67 (#293 )	2025-02-04 19:59:21 +01:00
Huang Xin	cfd5d5d106	mobile: several fixes for Android build (#292 )	2025-02-04 00:07:55 +01:00
Huang Xin	93eacf91a0	feat: load system fonts list at runtime on desktop, closes #287 #237 (#290 )	2025-02-03 00:41:30 +01:00
Huang Xin	dc6cbd2029	chore: bump update of next.js (#289 )	2025-02-02 22:30:38 +01:00
Huang Xin	643fdd24a9	chore: bump update of tauri (#288 )	2025-02-02 22:19:49 +01:00
Huang Xin	5c55233c5c	fix: occasionally the scroll end does not reach to the last subpixel (#284 )	2025-02-01 17:54:11 +01:00
Huang Xin	4d7db3592f	release: version 0.9.8	2025-02-01 16:53:04 +01:00