release: version 0.9.10 (#324)

* fix: don't set window shadow below Win 11

* fix: importing fb2.zip file and CSP for embedded cover image

.github/workflows/pull-request.yml

@@ -9,7 +9,7 @@ jobs:
   rust_lint:
     runs-on: ubuntu-latest
     env:
-      RUSTFLAGS: "-C target-cpu=skylake"
+      RUSTFLAGS: '-C target-cpu=skylake'
     steps:
       - uses: actions/checkout@v4
         with:
@@ -20,7 +20,9 @@ jobs:
           toolchain: stable
           override: true
       - name: Install system dependencies
-        run: sudo apt-get install -y libglib2.0-dev libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev libsoup-3.0-dev
+        run: |
+          sudo apt-get update
+          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

.github/workflows/release.yml

@@ -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:

CONTRIBUTING.md

@@ -75,13 +75,12 @@ Now you're all setup and can start implementing your changes.
 
 ### Implement your changes
 
-This project is a monorepo. The code for the `readest-app` is in the `app/readest-app` directory. Here are some useful scripts for developing the frontend only without compiling Tauri:
+This project is a monorepo. The code for the `readest-app` is in the `apps/readest-app` directory. Here are some useful scripts for developing the frontend only without compiling Tauri:
 
-| Command                                    | Description                                        |
-| ------------------------------------------ | -------------------------------------------------- |
-| `pnpm dev-web`                             | Starts the development server for the web app only |
-| `TAURI_DEV_HOST=192.168.1.22 pnpm dev-web` | Start the dev server on a LAN address              |
-| `pnpm build-web`                           | Builds the web app                                 |
+| Command          | Description                                        |
+| ---------------- | -------------------------------------------------- |
+| `pnpm dev-web`   | Starts the development server for the web app only |
+| `pnpm build-web` | Builds the web app                                 |
 
 Recommended Visual Studio Code plugins for development:
 

README.md

@@ -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.
@@ -216,10 +228,11 @@ The following fonts are utilized in this software, either bundled within the app
 [badge-web-app]: https://img.shields.io/badge/read%20online-web.readest.com-orange
 [badge-license]: https://img.shields.io/github/license/readest/readest?color=teal
 [badge-release]: https://img.shields.io/github/release/readest/readest?color=green
-[badge-platforms]: https://img.shields.io/badge/OS-macOS%2C%20Windows%2C%20Linux%2C%20Web-green
+[badge-platforms]: https://img.shields.io/badge/platforms-macOS%2C%20Windows%2C%20Linux%2C%20Web%2C%20PWA-green
 [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

apps/readest-app/.gitignore

@@ -53,3 +53,6 @@ src-tauri/gen
 # Auto Generated PWA files
 /public/sw.js
 /public/workbox-*.js
+/public/fallback-*.js
+/public/swe-worker-*.js
+

apps/readest-app/next.config.mjs

@@ -1,17 +1,13 @@
-import withPWA from 'next-pwa';
-
-/** @type {import('next').NextConfig} */
-const isProd = process.env.NODE_ENV === 'production';
-
-const internalHost = process.env.TAURI_DEV_HOST || 'localhost';
+import withPWAInit from '@ducanh2912/next-pwa';
 
+const isDev = process.env['NODE_ENV'] === 'development';
 const appPlatform = process.env['NEXT_PUBLIC_APP_PLATFORM'];
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   // Ensure Next.js uses SSG instead of SSR
   // https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
-  output: appPlatform === 'web' ? undefined : 'export',
+  output: appPlatform === 'web' || isDev ? undefined : 'export',
   // Note: This feature is required to use the Next.js Image component in SSG mode.
   // See https://nextjs.org/docs/messages/export-image-api for different workarounds.
   images: {
@@ -21,13 +17,36 @@ const nextConfig = {
     appIsrStatus: false,
   },
   // Configure assetPrefix or else the server won't properly resolve your assets.
-  assetPrefix: isProd ? '' : `http://${internalHost}:3000`,
+  assetPrefix: '',
   reactStrictMode: true,
+  async headers() {
+    return [
+      {
+        source: '/.well-known/apple-app-site-association',
+        headers: [
+          {
+            key: 'Content-Type',
+            value: 'application/json',
+          },
+        ],
+      },
+    ];
+  },
 };
 
-export default withPWA({
+const withPWA = withPWAInit({
   dest: 'public',
-  disable: appPlatform !== 'web',
-  register: true,
-  skipWaiting: true,
-})(nextConfig);
+  disable: isDev || appPlatform !== 'web',
+  cacheOnFrontEndNav: true,
+  aggressiveFrontEndNavCaching: true,
+  reloadOnOnline: true,
+  swcMinify: true,
+  fallbacks: {
+    document: '/offline',
+  },
+  workboxOptions: {
+    disableDevLogs: true,
+  },
+});
+
+export default withPWA(nextConfig);

apps/readest-app/package.json

@@ -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",
@@ -29,22 +29,25 @@
     "release-macos-universial-appstore": "dotenv -e .env.tauri.local -e .env.apple-appstore.local -- bash scripts/release-mac-appstore.sh"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.735.0",
+    "@aws-sdk/s3-request-presigner": "^3.735.0",
+    "@ducanh2912/next-pwa": "^10.2.9",
     "@fabianlars/tauri-plugin-oauth": "2",
     "@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",
@@ -54,7 +57,8 @@
     "i18next-browser-languagedetector": "^8.0.2",
     "i18next-http-backend": "^3.0.1",
     "js-md5": "^0.8.3",
-    "next": "15.1.0",
+    "jwt-decode": "^4.0.0",
+    "next": "15.1.6",
     "posthog-js": "^1.205.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
@@ -65,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",
@@ -80,7 +84,6 @@
     "eslint-config-next": "15.0.3",
     "i18next-scanner": "^4.6.0",
     "mkdirp": "^3.0.1",
-    "next-pwa": "^5.6.0",
     "node-env-run": "^4.0.2",
     "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",

apps/readest-app/public/.well-known/apple-app-site-association

@@ -0,0 +1,17 @@
+{
+  "applinks": {
+    "details": [
+      {
+        "appIDs": [
+          "J5W48D69VR.com.bilingify.readest"
+        ],
+        "components": [
+          {
+            "/": "/auth/*",
+            "comment": "Matches any URL whose path starts with /auth/"
+          }
+        ]
+      }
+    ]
+  }
+}

apps/readest-app/public/.well-known/assetlinks.json

@@ -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"
+      ]
+    }
+  }
+]

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

@@ -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",
@@ -84,7 +83,7 @@
   "Parallel Read": "Paralleles Lesen",
   "Published:": "Veröffentlicht:",
   "Publisher:": "Verlag:",
-  "Reading progress synced": "Lesevorgang synchronisiert",
+  "Reading Progress Synced": "Lesevorgang synchronisiert",
   "Reload Page": "Seite neu laden",
   "Reveal in File Explorer": "Im Datei-Explorer anzeigen",
   "Reveal in Finder": "Im Finder anzeigen",
@@ -93,11 +92,11 @@
   "Save": "Speichern",
   "Scrolled Mode": "Scroll-Modus",
   "Search": "Suchen",
-  "Search books...": "Bücher suchen...",
+  "Search Books...": "Bücher suchen...",
   "Search...": "Suchen...",
   "Select Book": "Buch auswählen",
-  "Select books": "Bücher auswählen",
-  "Select multiple books": "Mehrere Bücher auswählen",
+  "Select Books": "Bücher auswählen",
+  "Select Multiple Books": "Mehrere Bücher auswählen",
   "Sepia": "Sepia",
   "Serif Font": "Serifenschrift",
   "Show Book Details": "Buchdetails anzeigen",
@@ -110,7 +109,6 @@
   "Speak": "Sprechen",
   "Subjects:": "Themen:",
   "System Fonts": "System-Schriftarten",
-  "Table of Contents": "Inhaltsverzeichnis",
   "TTS not supported in this device": "TTS wird auf diesem Gerät nicht unterstützt",
   "Theme Color": "Themenfarbe",
   "Theme Mode": "Themenmodus",
@@ -130,14 +128,32 @@
   "Override Book Font": "Buch-Schriftart überschreiben",
   "Vertical Margins (px)": "Vertikale Ränder (px)",
   "Horizontal Margins (%)": "Horizontale Ränder (%)",
-  "Apply to all books": "Auf alle Bücher anwenden",
-  "Apply to this book": "Auf dieses Buch anwenden",
+  "Apply to All Books": "Auf alle Bücher anwenden",
+  "Apply to This Book": "Auf dieses Buch anwenden",
   "Unable to fetch the translation. Try again later.": "Übersetzung konnte nicht abgerufen werden. Versuchen Sie es später erneut.",
   "Update Now!": "Jetzt aktualisieren!",
   "Update": "Aktualisieren",
-  "Check update": "Aktualisierung prüfen",
+  "Check Update": "Aktualisierung prüfen",
   "Already the latest version": "Bereits die neueste Version",
   "Book Details": "Buchdetails",
-  "Import books": "Bücher importieren",
-  "From local file": "Aus lokaler Datei"
+  "From Local File": "Aus lokaler Datei",
+  "TOC": "Inhaltsverzeichnis",
+  "Book uploaded: {{title}}": "Buch hochgeladen: {{title}}",
+  "Failed to upload book: {{title}}": "Fehler beim Hochladen des Buches: {{title}}",
+  "Book downloaded: {{title}}": "Buch heruntergeladen: {{title}}",
+  "Failed to download book: {{title}}": "Fehler beim Herunterladen des Buches: {{title}}",
+  "Upload Book": "Buch hochladen",
+  "Auto Upload Books to Cloud": "Bücher automatisch in die Cloud hochladen",
+  "{{percentage}}% of Cloud Storage Used.": "{{percentage}}% des Cloud-Speichers verwendet.",
+  "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",
+  "Insufficient storage quota": "Unzureichendes Speicherkontingent",
+  "Font Weight": "Schriftgewicht",
+  "Line Spacing": "Zeilenabstand",
+  "Word Spacing": "Wortabstand",
+  "Letter Spacing": "Buchstabenabstand",
+  "Text Indent": "Texteinzug",
+  "Paragraph Margin": "Absatzrand"
 }

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

@@ -57,7 +57,6 @@
   "Language:": "Γλώσσα:",
   "Layout": "Διάταξη",
   "Light Mode": "Φωτεινή λειτουργία",
-  "Line Height": "Ύψος γραμμής",
   "Loading...": "Φόρτωση...",
   "Loc. {{currentPage}} / {{totalPage}}": "Θέση {{currentPage}} / {{totalPage}}",
   "Logged in": "Συνδεδεμένος",
@@ -84,7 +83,7 @@
   "Parallel Read": "Παράλληλη ανάγνωση",
   "Published:": "Δημοσιεύτηκε:",
   "Publisher:": "Εκδότης:",
-  "Reading progress synced": "Ο συγχρονισμός προόδου ανάγνωσης ολοκληρώθηκε",
+  "Reading Progress Synced": "Ο συγχρονισμός προόδου ανάγνωσης ολοκληρώθηκε",
   "Reload Page": "Επαναφόρτωση σελίδας",
   "Reveal in File Explorer": "Εμφάνιση στον εξερευνητή αρχείων",
   "Reveal in Finder": "Εμφάνιση στον Finder",
@@ -93,11 +92,11 @@
   "Save": "Αποθήκευση",
   "Scrolled Mode": "Λειτουργία κύλισης",
   "Search": "Αναζήτηση",
-  "Search books...": "Αναζήτηση βιβλίων...",
+  "Search Books...": "Αναζήτηση βιβλίων...",
   "Search...": "Αναζήτηση...",
   "Select Book": "Επιλογή βιβλίου",
-  "Select books": "Επιλογή βιβλίων",
-  "Select multiple books": "Επιλογή πολλαπλών βιβλίων",
+  "Select Books": "Επιλογή βιβλίων",
+  "Select Multiple Books": "Επιλογή πολλαπλών βιβλίων",
   "Sepia": "Σέπια",
   "Serif Font": "Γραμματοσειρά Serif",
   "Show Book Details": "Εμφάνιση λεπτομερειών βιβλίου",
@@ -110,7 +109,6 @@
   "Speak": "Ομιλία",
   "Subjects:": "Θέματα:",
   "System Fonts": "Γραμματοσειρές συστήματος",
-  "Table of Contents": "Πίνακας περιεχομένων",
   "TTS not supported in this device": "Η μετατροπή κειμένου σε ομιλία δεν υποστηρίζεται σε αυτή τη συσκευή",
   "Theme Color": "Χρώμα θέματος",
   "Theme Mode": "Λειτουργία θέματος",
@@ -130,14 +128,32 @@
   "Override Book Font": "Παράκαμψη γραμματοσειράς βιβλίου",
   "Vertical Margins (px)": "Κάθετα περιθώρια (px)",
   "Horizontal Margins (%)": "Οριζόντια περιθώρια (%)",
-  "Apply to all books": "Εφαρμογή σε όλα τα βιβλία",
-  "Apply to this book": "Εφαρμογή σε αυτό το βιβλίο",
+  "Apply to All Books": "Εφαρμογή σε όλα τα βιβλία",
+  "Apply to This Book": "Εφαρμογή σε αυτό το βιβλίο",
   "Unable to fetch the translation. Try again later.": "Αδυναμία λήψης της μετάφρασης. Δοκιμάστε ξανά αργότερα.",
   "Update Now!": "Ενημέρωση τώρα!",
   "Update": "Ενημέρωση",
-  "Check update": "Έλεγχος ενημέρωσης",
+  "Check Update": "Έλεγχος ενημέρωσης",
   "Already the latest version": "Ήδη η τελευταία έκδοση",
   "Book Details": "Λεπτομέρειες βιβλίου",
-  "Import books": "Εισαγωγή βιβλίων",
-  "From local file": "Από τοπικό αρχείο"
+  "From Local File": "Από τοπικό αρχείο",
+  "TOC": "Πίνακας περιεχομένων",
+  "Book uploaded: {{title}}": "Το βιβλίο με τίτλο {{title}} ανέβηκε",
+  "Failed to upload book: {{title}}": "Αποτυχία ανέβασμα βιβλίου: {{title}}",
+  "Book downloaded: {{title}}": "Το βιβλίο με τίτλο {{title}} κατέβηκε",
+  "Failed to download book: {{title}}": "Αποτυχία λήψης βιβλίου: {{title}}",
+  "Upload Book": "Ανέβασμα βιβλίου",
+  "Auto Upload Books to Cloud": "Αυτόματο ανέβασμα βιβλίων στο cloud",
+  "{{percentage}}% of Cloud Storage Used.": "{{percentage}}% της αποθήκευσης στο cloud χρησιμοποιήθηκε.",
+  "Storage": "Αποθήκευση",
+  "Book deleted: {{title}}": "Το βιβλίο με τίτλο {{title}} διαγράφηκε",
+  "Failed to delete book: {{title}}": "Αποτυχία διαγραφής βιβλίου: {{title}}",
+  "Check Updates on Start": "Έλεγχος ενημερώσεων κατά την εκκίνηση",
+  "Insufficient storage quota": "Ανεπαρκές όριο αποθήκευσης",
+  "Font Weight": "Βάρος γραμματοσειράς",
+  "Line Spacing": "Διάκενο γραμμών",
+  "Word Spacing": "Διάκενο λέξεων",
+  "Letter Spacing": "Διάκενο γραμμάτων",
+  "Text Indent": "Εσοχή κειμένου",
+  "Paragraph Margin": "Περιθώριο παραγράφου"
 }

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

@@ -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",
@@ -84,7 +83,7 @@
   "Parallel Read": "Lectura paralela",
   "Published:": "Publicado:",
   "Publisher:": "Editorial:",
-  "Reading progress synced": "Progreso de lectura sincronizado",
+  "Reading Progress Synced": "Progreso de lectura sincronizado",
   "Reload Page": "Recargar página",
   "Reveal in File Explorer": "Mostrar en el Explorador de archivos",
   "Reveal in Finder": "Mostrar en Finder",
@@ -93,11 +92,11 @@
   "Save": "Guardar",
   "Scrolled Mode": "Modo desplazamiento",
   "Search": "Buscar",
-  "Search books...": "Buscar libros...",
+  "Search Books...": "Buscar libros...",
   "Search...": "Buscar...",
   "Select Book": "Seleccionar libro",
-  "Select books": "Seleccionar libros",
-  "Select multiple books": "Seleccionar varios libros",
+  "Select Books": "Seleccionar libros",
+  "Select Multiple Books": "Seleccionar varios libros",
   "Sepia": "Sepia",
   "Serif Font": "Fuente serif",
   "Show Book Details": "Mostrar detalles del libro",
@@ -110,7 +109,6 @@
   "Speak": "Leer",
   "Subjects:": "Temas:",
   "System Fonts": "Fuentes del sistema",
-  "Table of Contents": "Tabla de contenidos",
   "TTS not supported in this device": "TTS no es compatible con este dispositivo",
   "Theme Color": "Color del tema",
   "Theme Mode": "Modo del tema",
@@ -130,14 +128,32 @@
   "Override Book Font": "Sobrescribir fuente del libro",
   "Vertical Margins (px)": "Márgenes verticales (px)",
   "Horizontal Margins (%)": "Márgenes horizontales (%)",
-  "Apply to all books": "Aplicar a todos los libros",
-  "Apply to this book": "Aplicar a este libro",
+  "Apply to All Books": "Aplicar a todos los libros",
+  "Apply to This Book": "Aplicar a este libro",
   "Unable to fetch the translation. Try again later.": "No se puede obtener la traducción. Inténtalo de nuevo más tarde.",
   "Update Now!": "¡Actualizar ahora!",
   "Update": "Actualizar",
-  "Check update": "Comprobar actualización",
+  "Check Update": "Comprobar actualización",
   "Already the latest version": "Ya es la última versión",
   "Book Details": "Detalles del libro",
-  "Import books": "Importar libros",
-  "From local file": "Desde archivo local"
+  "From Local File": "Desde archivo local",
+  "TOC": "Índice",
+  "Book uploaded: {{title}}": "Libro subido: {{title}}",
+  "Failed to upload book: {{title}}": "Error al subir libro: {{title}}",
+  "Book downloaded: {{title}}": "Libro descargado: {{title}}",
+  "Failed to download book: {{title}}": "Error al descargar libro: {{title}}",
+  "Upload Book": "Subir libro",
+  "Auto Upload Books to Cloud": "Subir libros automáticamente a la nube",
+  "{{percentage}}% of Cloud Storage Used.": "{{percentage}}% del almacenamiento en la nube utilizado.",
+  "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",
+  "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"
 }

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

@@ -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é",
@@ -84,7 +83,7 @@
   "Parallel Read": "Lecture parallèle",
   "Published:": "Publié :",
   "Publisher:": "Éditeur :",
-  "Reading progress synced": "Progression de lecture synchronisée",
+  "Reading Progress Synced": "Progression de lecture synchronisée",
   "Reload Page": "Recharger la page",
   "Reveal in File Explorer": "Afficher dans l'explorateur de fichiers",
   "Reveal in Finder": "Afficher dans le Finder",
@@ -93,11 +92,11 @@
   "Save": "Enregistrer",
   "Scrolled Mode": "Mode défilement",
   "Search": "Rechercher",
-  "Search books...": "Rechercher des livres...",
+  "Search Books...": "Rechercher des livres...",
   "Search...": "Rechercher...",
   "Select Book": "Sélectionner un livre",
-  "Select books": "Sélectionner des livres",
-  "Select multiple books": "Sélectionner plusieurs livres",
+  "Select Books": "Sélectionner des livres",
+  "Select Multiple Books": "Sélectionner plusieurs livres",
   "Sepia": "Sépia",
   "Serif Font": "Police avec empattement",
   "Show Book Details": "Afficher les détails du livre",
@@ -110,7 +109,6 @@
   "Speak": "Lire",
   "Subjects:": "Sujets :",
   "System Fonts": "Polices système",
-  "Table of Contents": "Table des matières",
   "TTS not supported in this device": "La synthèse vocale n'est pas prise en charge sur cet appareil",
   "Theme Color": "Couleur du thème",
   "Theme Mode": "Mode du thème",
@@ -130,14 +128,32 @@
   "Override Book Font": "Remplacer la police du livre",
   "Vertical Margins (px)": "Marges verticales (px)",
   "Horizontal Margins (%)": "Marges horizontales (%)",
-  "Apply to all books": "Appliquer à tous les livres",
-  "Apply to this book": "Appliquer à ce livre",
+  "Apply to All Books": "Appliquer à tous les livres",
+  "Apply to This Book": "Appliquer à ce livre",
   "Unable to fetch the translation. Try again later.": "Impossible de récupérer la traduction. Réessayez plus tard.",
   "Update Now!": "Mettre à jour maintenant !",
   "Update": "Mettre à jour",
-  "Check update": "Vérifier la mise à jour",
+  "Check Update": "Vérifier la mise à jour",
   "Already the latest version": "Déjà la dernière version",
   "Book Details": "Détails du livre",
-  "Import books": "Importer des livres",
-  "From local file": "Depuis un fichier local"
+  "From Local File": "Depuis un fichier local",
+  "TOC": "Table des matières",
+  "Book uploaded: {{title}}": "Livre téléchargé : {{title}}",
+  "Failed to upload book: {{title}}": "Échec du téléchargement du livre : {{title}}",
+  "Book downloaded: {{title}}": "Livre téléchargé : {{title}}",
+  "Failed to download book: {{title}}": "Échec du téléchargement du livre : {{title}}",
+  "Upload Book": "Télécharger un livre",
+  "Auto Upload Books to Cloud": "Télécharger automatiquement les livres dans le cloud",
+  "{{percentage}}% of Cloud Storage Used.": "{{percentage}}% de l'espace de stockage dans le cloud utilisé.",
+  "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",
+  "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"
 }

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

@@ -57,7 +57,6 @@
   "Language:": "भाषा:",
   "Layout": "लेआउट",
   "Light Mode": "लाइट मोड",
-  "Line Height": "लाइन हाइट",
   "Loading...": "लोड हो रहा है...",
   "Loc. {{currentPage}} / {{totalPage}}": "स्थान {{currentPage}} / {{totalPage}}",
   "Logged in": "लॉग इन किया",
@@ -84,7 +83,7 @@
   "Parallel Read": "समानांतर पढ़ें",
   "Published:": "प्रकाशित:",
   "Publisher:": "प्रकाशक:",
-  "Reading progress synced": "पढ़ने की प्रगति सिंक की गई",
+  "Reading Progress Synced": "पढ़ने की प्रगति सिंक की गई",
   "Reload Page": "पृष्ठ रीलोड करें",
   "Reveal in File Explorer": "फ़ाइल एक्सप्लोरर में दिखाएं",
   "Reveal in Finder": "फाइंडर में दिखाएं",
@@ -93,11 +92,11 @@
   "Save": "सहेजें",
   "Scrolled Mode": "स्क्रॉल मोड",
   "Search": "खोजें",
-  "Search books...": "पुस्तकें खोजें...",
+  "Search Books...": "पुस्तकें खोजें...",
   "Search...": "खोजें...",
   "Select Book": "पुस्तक चुनें",
-  "Select books": "पुस्तकें चुनें",
-  "Select multiple books": "कई पुस्तकें चुनें",
+  "Select Books": "पुस्तकें चुनें",
+  "Select Multiple Books": "कई पुस्तकें चुनें",
   "Sepia": "सेपिया",
   "Serif Font": "सेरिफ फ़ॉन्ट",
   "Show Book Details": "पुस्तक विवरण दिखाएं",
@@ -110,7 +109,6 @@
   "Speak": "बोलें",
   "Subjects:": "विषय:",
   "System Fonts": "सिस्टम फ़ॉन्ट्स",
-  "Table of Contents": "विषय-सूची",
   "TTS not supported in this device": "यह डिवाइस TTS का समर्थन नहीं करता",
   "Theme Color": "थीम रंग",
   "Theme Mode": "थीम मोड",
@@ -130,14 +128,32 @@
   "Override Book Font": "पुस्तक फ़ॉन्ट ओवरराइड करें",
   "Vertical Margins (px)": "ऊर्ध्वाधर मार्जिन (px)",
   "Horizontal Margins (%)": "क्षैतिज मार्जिन (%)",
-  "Apply to all books": "सभी पुस्तकों पर लागू करें",
-  "Apply to this book": "इस पुस्तक पर लागू करें",
+  "Apply to All Books": "सभी पुस्तकों पर लागू करें",
+  "Apply to This Book": "इस पुस्तक पर लागू करें",
   "Unable to fetch the translation. Try again later.": "अनुवाद प्राप्त करने में असमर्थ। बाद में पुनः प्रयास करें।",
   "Update Now!": "अभी अपडेट करें!",
   "Update": "अपडेट करें",
-  "Check update": "अपडेट जांचें",
+  "Check Update": "अपडेट जांचें",
   "Already the latest version": "पहले से ही नवीनतम संस्करण",
   "Book Details": "पुस्तक विवरण",
-  "Import books": "पुस्तकें आयात करें",
-  "From local file": "स्थानीय फ़ाइल से"
+  "From Local File": "स्थानीय फ़ाइल से",
+  "TOC": "सामग्री",
+  "Book uploaded: {{title}}": "पुस्तक अपलोड की गई: {{title}}",
+  "Failed to upload book: {{title}}": "पुस्तक अपलोड करने में विफल: {{title}}",
+  "Book downloaded: {{title}}": "पुस्तक डाउनलोड की गई: {{title}}",
+  "Failed to download book: {{title}}": "पुस्तक डाउनलोड करने में विफल: {{title}}",
+  "Upload Book": "पुस्तक अपलोड करें",
+  "Auto Upload Books to Cloud": "पुस्तकें बादल में स्वचालित रूप से अपलोड करें",
+  "{{percentage}}% of Cloud Storage Used.": "{{percentage}}% क्लाउड स्टोरेज का उपयोग किया गया है।",
+  "Storage": "स्टोरेज",
+  "Book deleted: {{title}}": "पुस्तक हटाई गई: {{title}}",
+  "Failed to delete book: {{title}}": "पुस्तक हटाने में विफल: {{title}}",
+  "Check Updates on Start": "शुरू में अपडेट जांचें",
+  "Insufficient storage quota": "अपर्याप्त स्टोरेज कोटा",
+  "Font Weight": "फ़ॉन्ट वजन",
+  "Line Spacing": "लाइन स्पेसिंग",
+  "Word Spacing": "शब्द स्पेसिंग",
+  "Letter Spacing": "अक्षर स्पेसिंग",
+  "Text Indent": "टेक्स्ट इंडेंट",
+  "Paragraph Margin": "पैराग्राफ मार्जिन"
 }

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

@@ -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",
@@ -84,7 +83,7 @@
   "Parallel Read": "Baca Paralel",
   "Published:": "Diterbitkan:",
   "Publisher:": "Penerbit:",
-  "Reading progress synced": "Progres membaca disinkronkan",
+  "Reading Progress Synced": "Progres membaca disinkronkan",
   "Reload Page": "Muat Ulang Halaman",
   "Reveal in File Explorer": "Tampilkan di File Explorer",
   "Reveal in Finder": "Tampilkan di Finder",
@@ -93,11 +92,11 @@
   "Save": "Simpan",
   "Scrolled Mode": "Mode Gulir",
   "Search": "Cari",
-  "Search books...": "Cari buku...",
+  "Search Books...": "Cari buku...",
   "Search...": "Cari...",
   "Select Book": "Pilih Buku",
-  "Select books": "Pilih buku",
-  "Select multiple books": "Pilih beberapa buku",
+  "Select Books": "Pilih buku",
+  "Select Multiple Books": "Pilih beberapa buku",
   "Sepia": "Sepia",
   "Serif Font": "Font Serif",
   "Show Book Details": "Tampilkan Detail Buku",
@@ -110,7 +109,6 @@
   "Speak": "Bicara",
   "Subjects:": "Subjek:",
   "System Fonts": "Font Sistem",
-  "Table of Contents": "Daftar Isi",
   "TTS not supported in this device": "TTS tidak didukung di perangkat ini",
   "Theme Color": "Warna Tema",
   "Theme Mode": "Mode Tema",
@@ -130,14 +128,32 @@
   "Override Book Font": "Ganti Font Buku",
   "Vertical Margins (px)": "Margin Vertikal (px)",
   "Horizontal Margins (%)": "Margin Horizontal (%)",
-  "Apply to all books": "Terapkan ke semua buku",
-  "Apply to this book": "Terapkan ke buku ini",
+  "Apply to All Books": "Terapkan ke semua buku",
+  "Apply to This Book": "Terapkan ke buku ini",
   "Unable to fetch the translation. Try again later.": "Tidak dapat mengambil terjemahan. Coba lagi nanti.",
   "Update Now!": "Perbarui Sekarang!",
   "Update": "Perbarui",
-  "Check update": "Periksa pembaruan",
+  "Check Update": "Periksa pembaruan",
   "Already the latest version": "Sudah versi terbaru",
   "Book Details": "Detail Buku",
-  "Import books": "Impor buku",
-  "From local file": "Dari file lokal"
+  "From Local File": "Dari file lokal",
+  "TOC": "Daftar Isi",
+  "Book uploaded: {{title}}": "Buku diunggah: {{title}}",
+  "Failed to upload book: {{title}}": "Gagal mengunggah buku: {{title}}",
+  "Book downloaded: {{title}}": "Buku diunduh: {{title}}",
+  "Failed to download book: {{title}}": "Gagal mengunduh buku: {{title}}",
+  "Upload Book": "Unggah Buku",
+  "Auto Upload Books to Cloud": "Unggah Buku Otomatis ke Cloud",
+  "{{percentage}}% of Cloud Storage Used.": "{{percentage}}% dari Penyimpanan Cloud Digunakan.",
+  "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",
+  "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"
 }

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

@@ -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",
@@ -84,7 +83,7 @@
   "Parallel Read": "Lettura parallela",
   "Published:": "Pubblicato:",
   "Publisher:": "Editore:",
-  "Reading progress synced": "Progresso lettura sincronizzato",
+  "Reading Progress Synced": "Progresso lettura sincronizzato",
   "Reload Page": "Ricarica pagina",
   "Reveal in File Explorer": "Mostra in Esplora file",
   "Reveal in Finder": "Mostra nel Finder",
@@ -93,11 +92,11 @@
   "Save": "Salva",
   "Scrolled Mode": "Modalità scorrimento",
   "Search": "Cerca",
-  "Search books...": "Cerca libri...",
+  "Search Books...": "Cerca libri...",
   "Search...": "Cerca...",
   "Select Book": "Seleziona libro",
-  "Select books": "Seleziona libri",
-  "Select multiple books": "Seleziona più libri",
+  "Select Books": "Seleziona libri",
+  "Select Multiple Books": "Seleziona più libri",
   "Sepia": "Seppia",
   "Serif Font": "Font serif",
   "Show Book Details": "Mostra dettagli libro",
@@ -110,7 +109,6 @@
   "Speak": "Leggi",
   "Subjects:": "Argomenti:",
   "System Fonts": "Font di sistema",
-  "Table of Contents": "Indice",
   "TTS not supported in this device": "TTS non supportato su questo dispositivo",
   "Theme Color": "Colore tema",
   "Theme Mode": "Modalità tema",
@@ -130,14 +128,32 @@
   "Override Book Font": "Sovrascrivi font libro",
   "Vertical Margins (px)": "Margini verticali (px)",
   "Horizontal Margins (%)": "Margini orizzontali (%)",
-  "Apply to all books": "Applica a tutti i libri",
-  "Apply to this book": "Applica a questo libro",
+  "Apply to All Books": "Applica a tutti i libri",
+  "Apply to This Book": "Applica a questo libro",
   "Unable to fetch the translation. Try again later.": "Impossibile recuperare la traduzione. Riprova più tardi.",
   "Update Now!": "Aggiorna ora!",
   "Update": "Aggiorna",
-  "Check update": "Controlla aggiornamento",
+  "Check Update": "Controlla aggiornamento",
   "Already the latest version": "Già l'ultima versione",
   "Book Details": "Dettagli libro",
-  "Import books": "Importa libri",
-  "From local file": "Da file locale"
+  "From Local File": "Da file locale",
+  "TOC": "Sommario",
+  "Book uploaded: {{title}}": "Libro caricato: {{title}}",
+  "Failed to upload book: {{title}}": "Caricamento libro non riuscito: {{title}}",
+  "Book downloaded: {{title}}": "Libro scaricato: {{title}}",
+  "Failed to download book: {{title}}": "Download libro non riuscito: {{title}}",
+  "Upload Book": "Carica libro",
+  "Auto Upload Books to Cloud": "Carica libri automaticamente su cloud",
+  "{{percentage}}% of Cloud Storage Used.": "{{percentage}}% dello spazio di archiviazione cloud utilizzato.",
+  "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",
+  "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"
 }

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

@@ -57,7 +57,6 @@
   "Language:": "言語：",
   "Layout": "レイアウト",
   "Light Mode": "ライトモード",
-  "Line Height": "行間",
   "Loading...": "読み込み中...",
   "Loc. {{currentPage}} / {{totalPage}}": "位置 {{currentPage}} / {{totalPage}}",
   "Logged in": "ログイン済み",
@@ -84,7 +83,7 @@
   "Parallel Read": "並列読書",
   "Published:": "出版日：",
   "Publisher:": "出版社：",
-  "Reading progress synced": "読書進捗が同期されました",
+  "Reading Progress Synced": "読書進捗が同期されました",
   "Reload Page": "ページを再読み込み",
   "Reveal in File Explorer": "エクスプローラーで表示",
   "Reveal in Finder": "Finderで表示",
@@ -93,13 +92,13 @@
   "Save": "保存",
   "Scrolled Mode": "スクロールモード",
   "Search": "検索",
-  "Search books...": "書籍を検索...",
+  "Search Books...": "書籍を検索...",
   "Search...": "検索...",
   "Select Book": "書籍を選択",
-  "Select books": "書籍を選択",
-  "Select multiple books": "複数の書籍を選択",
+  "Select Books": "書籍を選択",
+  "Select Multiple Books": "複数の書籍を選択",
   "Sepia": "セピア",
-  "Serif Font": "明朝体",
+  "Serif Font": "セリフ体",
   "Show Book Details": "書籍の詳細を表示",
   "Sidebar": "サイドバー",
   "Sign In": "サインイン",
@@ -110,7 +109,6 @@
   "Speak": "読み上げ",
   "Subjects:": "主題：",
   "System Fonts": "システムフォント",
-  "Table of Contents": "目次",
   "TTS not supported in this device": "このデバイスではTTSがサポートされていません",
   "Theme Color": "テーマカラー",
   "Theme Mode": "テーマモード",
@@ -130,14 +128,32 @@
   "Override Book Font": "書籍フォントを上書き",
   "Vertical Margins (px)": "縦マージン（px）",
   "Horizontal Margins (%)": "横マージン（%）",
-  "Apply to all books": "すべての書籍に適用",
-  "Apply to this book": "この書籍に適用",
+  "Apply to All Books": "すべての書籍に適用",
+  "Apply to This Book": "この書籍に適用",
   "Unable to fetch the translation. Try again later.": "翻訳を取得できません。後で再試行してください。",
   "Update Now!": "今すぐ更新！",
   "Update": "更新",
-  "Check update": "更新を確認",
+  "Check Update": "更新を確認",
   "Already the latest version": "すでに最新バージョン",
   "Book Details": "書籍の詳細",
-  "Import books": "書籍をインポート",
-  "From local file": "ローカルファイルから"
+  "From Local File": "ローカルファイルから",
+  "TOC": "目次",
+  "Book uploaded: {{title}}": "書籍がアップロードされました：{{title}}",
+  "Failed to upload book: {{title}}": "書籍のアップロードに失敗しました：{{title}}",
+  "Book downloaded: {{title}}": "書籍がダウンロードされました：{{title}}",
+  "Failed to download book: {{title}}": "書籍のダウンロードに失敗しました：{{title}}",
+  "Upload Book": "書籍をアップロード",
+  "Auto Upload Books to Cloud": "書籍を自動的にクラウドにアップロード",
+  "{{percentage}}% of Cloud Storage Used.": "クラウドストレージの{{percentage}}%が使用されています。",
+  "Storage": "ストレージ",
+  "Book deleted: {{title}}": "書籍が削除されました：{{title}}",
+  "Failed to delete book: {{title}}": "書籍の削除に失敗しました：{{title}}",
+  "Check Updates on Start": "開始時に更新を確認",
+  "Insufficient storage quota": "ストレージクォータが不足しています",
+  "Font Weight": "フォントウェイト",
+  "Line Spacing": "行間",
+  "Word Spacing": "単語間隔",
+  "Letter Spacing": "文字間隔",
+  "Text Indent": "テキストインデント",
+  "Paragraph Margin": "段落マージン"
 }

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

@@ -57,7 +57,6 @@
   "Language:": "언어:",
   "Layout": "레이아웃",
   "Light Mode": "라이트 모드",
-  "Line Height": "줄 간격",
   "Loading...": "로딩 중...",
   "Loc. {{currentPage}} / {{totalPage}}": "위치 {{currentPage}} / {{totalPage}}",
   "Logged in": "로그인됨",
@@ -84,7 +83,7 @@
   "Parallel Read": "병렬 읽기",
   "Published:": "출판일:",
   "Publisher:": "출판사:",
-  "Reading progress synced": "읽기 진행 상황 동기화됨",
+  "Reading Progress Synced": "읽기 진행 상황 동기화됨",
   "Reload Page": "페이지 새로고침",
   "Reveal in File Explorer": "파일 탐색기에서 표시",
   "Reveal in Finder": "Finder에서 표시",
@@ -93,11 +92,11 @@
   "Save": "저장",
   "Scrolled Mode": "스크롤 모드",
   "Search": "검색",
-  "Search books...": "책 검색...",
+  "Search Books...": "책 검색...",
   "Search...": "검색...",
   "Select Book": "책 선택",
-  "Select books": "책 선택",
-  "Select multiple books": "여러 책 선택",
+  "Select Books": "책 선택",
+  "Select Multiple Books": "여러 책 선택",
   "Sepia": "세피아",
   "Serif Font": "세리프체",
   "Show Book Details": "책 세부 정보 표시",
@@ -110,7 +109,6 @@
   "Speak": "말하기",
   "Subjects:": "주제:",
   "System Fonts": "시스템 글꼴",
-  "Table of Contents": "목차",
   "TTS not supported in this device": "이 장치에서 TTS가 지원되지 않음",
   "Theme Color": "테마 색상",
   "Theme Mode": "테마 모드",
@@ -130,14 +128,32 @@
   "Override Book Font": "책 글꼴 덮어쓰기",
   "Vertical Margins (px)": "수직 여백 (px)",
   "Horizontal Margins (%)": "수평 여백 (%)",
-  "Apply to all books": "모든 책에 적용",
-  "Apply to this book": "이 책에 적용",
+  "Apply to All Books": "모든 책에 적용",
+  "Apply to This Book": "이 책에 적용",
   "Unable to fetch the translation. Try again later.": "번역을 가져올 수 없습니다. 나중에 다시 시도하세요.",
   "Update Now!": "지금 업데이트!",
   "Update": "업데이트",
-  "Check update": "업데이트 확인",
+  "Check Update": "업데이트 확인",
   "Already the latest version": "이미 최신 버전",
   "Book Details": "책 세부 정보",
-  "Import books": "책 가져오기",
-  "From local file": "로컬 파일에서"
+  "From Local File": "로컬 파일에서",
+  "TOC": "목차",
+  "Book uploaded: {{title}}": "책 업로드됨: {{title}}",
+  "Failed to upload book: {{title}}": "책 업로드 실패: {{title}}",
+  "Book downloaded: {{title}}": "책 다운로드됨: {{title}}",
+  "Failed to download book: {{title}}": "책 다운로드 실패: {{title}}",
+  "Upload Book": "책 업로드",
+  "Auto Upload Books to Cloud": "책 자동으로 클라우드에 업로드",
+  "{{percentage}}% of Cloud Storage Used.": "클라우드 저장소 사용량 {{percentage}}%.",
+  "Storage": "저장소",
+  "Book deleted: {{title}}": "책 삭제됨: {{title}}",
+  "Failed to delete book: {{title}}": "책 삭제 실패: {{title}}",
+  "Check Updates on Start": "시작 시 업데이트 확인",
+  "Insufficient storage quota": "저장소 할당량 부족",
+  "Font Weight": "글꼴 두께",
+  "Line Spacing": "줄 간격",
+  "Word Spacing": "단어 간격",
+  "Letter Spacing": "글자 간격",
+  "Text Indent": "들여쓰기",
+  "Paragraph Margin": "단락 여백"
 }

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

@@ -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",
@@ -84,7 +83,7 @@
   "Parallel Read": "Czytanie równoległe",
   "Published:": "Opublikowano:",
   "Publisher:": "Wydawca:",
-  "Reading progress synced": "Zsynchronizowano postęp czytania",
+  "Reading Progress Synced": "Zsynchronizowano postęp czytania",
   "Reload Page": "Odśwież stronę",
   "Reveal in File Explorer": "Pokaż w Eksploratorze plików",
   "Reveal in Finder": "Pokaż w Finderze",
@@ -93,11 +92,11 @@
   "Save": "Zapisz",
   "Scrolled Mode": "Tryb przewijania",
   "Search": "Szukaj",
-  "Search books...": "Szukaj książek...",
+  "Search Books...": "Szukaj książek...",
   "Search...": "Szukaj...",
   "Select Book": "Wybierz książkę",
-  "Select books": "Wybierz książki",
-  "Select multiple books": "Wybierz wiele książek",
+  "Select Books": "Wybierz książki",
+  "Select Multiple Books": "Wybierz wiele książek",
   "Sepia": "Sepia",
   "Serif Font": "Czcionka szeryfowa",
   "Show Book Details": "Pokaż szczegóły książki",
@@ -110,7 +109,6 @@
   "Speak": "Czytaj",
   "Subjects:": "Tematy:",
   "System Fonts": "Czcionki systemowe",
-  "Table of Contents": "Spis treści",
   "TTS not supported in this device": "TTS nie jest obsługiwane na tym urządzeniu",
   "Theme Color": "Kolor motywu",
   "Theme Mode": "Tryb motywu",
@@ -130,14 +128,32 @@
   "Override Book Font": "Nadpisz czcionkę książki",
   "Vertical Margins (px)": "Marginesy pionowe (px)",
   "Horizontal Margins (%)": "Marginesy poziome (%)",
-  "Apply to all books": "Zastosuj do wszystkich książek",
-  "Apply to this book": "Zastosuj do tej książki",
+  "Apply to All Books": "Zastosuj do wszystkich książek",
+  "Apply to This Book": "Zastosuj do tej książki",
   "Unable to fetch the translation. Try again later.": "Nie udało się pobrać tłumaczenia. Spróbuj ponownie później.",
   "Update Now!": "Zaktualizuj teraz!",
   "Update": "Zaktualizuj",
-  "Check update": "Sprawdź aktualizację",
+  "Check Update": "Sprawdź aktualizację",
   "Already the latest version": "Już najnowsza wersja",
   "Book Details": "Szczegóły książki",
-  "Import books": "Importuj książki",
-  "From local file": "Z pliku lokalnego"
+  "From Local File": "Z pliku lokalnego",
+  "TOC": "Spis treści",
+  "Book uploaded: {{title}}": "Książka przesłana: {{title}}",
+  "Failed to upload book: {{title}}": "Nie udało się przesłać książki: {{title}}",
+  "Book downloaded: {{title}}": "Książka pobrana: {{title}}",
+  "Failed to download book: {{title}}": "Nie udało się pobrać książki: {{title}}",
+  "Upload Book": "Prześlij książkę",
+  "Auto Upload Books to Cloud": "Automatycznie przesyłaj książki do chmury",
+  "{{percentage}}% of Cloud Storage Used.": "{{percentage}}% przestrzeni dyskowej w chmurze użytej.",
+  "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",
+  "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"
 }

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

@@ -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",
@@ -84,7 +83,7 @@
   "Parallel Read": "Leitura Paralela",
   "Published:": "Publicado:",
   "Publisher:": "Editora:",
-  "Reading progress synced": "Progresso de leitura sincronizado",
+  "Reading Progress Synced": "Progresso de leitura sincronizado",
   "Reload Page": "Recarregar Página",
   "Reveal in File Explorer": "Mostrar no Explorador de Arquivos",
   "Reveal in Finder": "Mostrar no Finder",
@@ -93,11 +92,11 @@
   "Save": "Salvar",
   "Scrolled Mode": "Modo de Rolagem",
   "Search": "Buscar",
-  "Search books...": "Procurar livros...",
+  "Search Books...": "Procurar livros...",
   "Search...": "Pesquisar...",
   "Select Book": "Selecionar Livro",
-  "Select books": "Selecionar livros",
-  "Select multiple books": "Selecionar múltiplos livros",
+  "Select Books": "Selecionar livros",
+  "Select Multiple Books": "Selecionar múltiplos livros",
   "Sepia": "Sépia",
   "Serif Font": "Fonte Serif",
   "Show Book Details": "Mostrar Detalhes do Livro",
@@ -110,7 +109,6 @@
   "Speak": "Falar",
   "Subjects:": "Assuntos:",
   "System Fonts": "Fontes do Sistema",
-  "Table of Contents": "Índice",
   "TTS not supported in this device": "TTS não suportado neste dispositivo",
   "Theme Color": "Cor do Tema",
   "Theme Mode": "Modo do Tema",
@@ -130,14 +128,32 @@
   "Override Book Font": "Sobrescrever Fonte do Livro",
   "Vertical Margins (px)": "Margens Verticais (px)",
   "Horizontal Margins (%)": "Margens Horizontais (%)",
-  "Apply to all books": "Aplicar a todos os livros",
-  "Apply to this book": "Aplicar a este livro",
+  "Apply to All Books": "Aplicar a todos os livros",
+  "Apply to This Book": "Aplicar a este livro",
   "Unable to fetch the translation. Try again later.": "Não foi possível buscar a tradução. Tente novamente mais tarde.",
   "Update Now!": "Atualizar Agora!",
   "Update": "Atualizar",
-  "Check update": "Verificar atualização",
+  "Check Update": "Verificar atualização",
   "Already the latest version": "Já é a versão mais recente",
   "Book Details": "Detalhes do Livro",
-  "Import books": "Importar livros",
-  "From local file": "Do arquivo local"
+  "From Local File": "Do arquivo local",
+  "TOC": "Índice",
+  "Book uploaded: {{title}}": "Livro enviado: {{title}}",
+  "Failed to upload book: {{title}}": "Falha ao enviar livro: {{title}}",
+  "Book downloaded: {{title}}": "Livro baixado: {{title}}",
+  "Failed to download book: {{title}}": "Falha ao baixar livro: {{title}}",
+  "Upload Book": "Enviar Livro",
+  "Auto Upload Books to Cloud": "Enviar Livros para a Nuvem Automaticamente",
+  "{{percentage}}% of Cloud Storage Used.": "{{percentage}}% do Armazenamento na Nuvem Usado.",
+  "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",
+  "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"
 }

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

@@ -57,7 +57,6 @@
   "Language:": "Язык:",
   "Layout": "Макет",
   "Light Mode": "Светлая тема",
-  "Line Height": "Межстрочный интервал",
   "Loading...": "Загрузка...",
   "Loc. {{currentPage}} / {{totalPage}}": "Поз. {{currentPage}} / {{totalPage}}",
   "Logged in": "Выполнен вход",
@@ -84,7 +83,7 @@
   "Parallel Read": "Параллельное чтение",
   "Published:": "Опубликовано:",
   "Publisher:": "Издатель:",
-  "Reading progress synced": "Синхронизирован прогресс чтения",
+  "Reading Progress Synced": "Синхронизирован прогресс чтения",
   "Reload Page": "Перезагрузить страницу",
   "Reveal in File Explorer": "Показать в проводнике",
   "Reveal in Finder": "Показать в Finder",
@@ -93,11 +92,11 @@
   "Save": "Сохранить",
   "Scrolled Mode": "Режим прокрутки",
   "Search": "Поиск",
-  "Search books...": "Поиск книг...",
+  "Search Books...": "Поиск книг...",
   "Search...": "Поиск...",
   "Select Book": "Выбрать книгу",
-  "Select books": "Выбрать книги",
-  "Select multiple books": "Выбрать несколько книг",
+  "Select Books": "Выбрать книги",
+  "Select Multiple Books": "Выбрать несколько книг",
   "Sepia": "Сепия",
   "Serif Font": "Шрифт с засечками",
   "Show Book Details": "Показать детали книги",
@@ -110,7 +109,6 @@
   "Speak": "Произнести",
   "Subjects:": "Темы:",
   "System Fonts": "Системные шрифты",
-  "Table of Contents": "Содержание",
   "TTS not supported in this device": "TTS не поддерживается на этом устройстве",
   "Theme Color": "Цвет темы",
   "Theme Mode": "Режим темы",
@@ -130,14 +128,32 @@
   "Override Book Font": "Переопределить шрифт книги",
   "Vertical Margins (px)": "Вертикальные поля (px)",
   "Horizontal Margins (%)": "Горизонтальные поля (%)",
-  "Apply to all books": "Применить ко всем книгам",
-  "Apply to this book": "Применить к этой книге",
+  "Apply to All Books": "Применить ко всем книгам",
+  "Apply to This Book": "Применить к этой книге",
   "Unable to fetch the translation. Try again later.": "Не удалось получить перевод. Попробуйте позже.",
   "Update Now!": "Обновить сейчас!",
   "Update": "Обновить",
-  "Check update": "Проверить обновление",
+  "Check Update": "Проверить обновление",
   "Already the latest version": "Уже последняя версия",
   "Book Details": "Детали книги",
-  "Import books": "Импортировать книги",
-  "From local file": "Из локального файла"
+  "From Local File": "Из локального файла",
+  "TOC": "Содержание",
+  "Book uploaded: {{title}}": "Книга загружена: {{title}}",
+  "Failed to upload book: {{title}}": "Не удалось загрузить книгу: {{title}}",
+  "Book downloaded: {{title}}": "Книга скачана: {{title}}",
+  "Failed to download book: {{title}}": "Не удалось скачать книгу: {{title}}",
+  "Upload Book": "Загрузить книгу",
+  "Auto Upload Books to Cloud": "Автоматическая загрузка книг в облако",
+  "{{percentage}}% of Cloud Storage Used.": "{{percentage}}% использовано облачного хранилища.",
+  "Storage": "Хранилище",
+  "Book deleted: {{title}}": "Книга удалена: {{title}}",
+  "Failed to delete book: {{title}}": "Не удалось удалить книгу: {{title}}",
+  "Check Updates on Start": "Проверять обновления при запуске",
+  "Insufficient storage quota": "Недостаточно квоты хранилища",
+  "Font Weight": "Насыщенность шрифта",
+  "Line Spacing": "Межстрочный интервал",
+  "Word Spacing": "Межсловный интервал",
+  "Letter Spacing": "Межбуквенный интервал",
+  "Text Indent": "Отступ текста",
+  "Paragraph Margin": "Отступ абзаца"
 }

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

@@ -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ı",
@@ -84,7 +83,7 @@
   "Parallel Read": "Paralel Okuma",
   "Published:": "Yayınlanma:",
   "Publisher:": "Yayıncı:",
-  "Reading progress synced": "Okuma ilerlemesi senkronize edildi",
+  "Reading Progress Synced": "Okuma ilerlemesi senkronize edildi",
   "Reload Page": "Sayfayı Yenile",
   "Reveal in File Explorer": "Dosya Gezgininde Göster",
   "Reveal in Finder": "Finder'da Göster",
@@ -93,11 +92,11 @@
   "Save": "Kaydet",
   "Scrolled Mode": "Kaydırma Modu",
   "Search": "Ara",
-  "Search books...": "Kitap ara...",
+  "Search Books...": "Kitap ara...",
   "Search...": "Ara...",
   "Select Book": "Kitap Seç",
-  "Select books": "Kitapları seç",
-  "Select multiple books": "Birden fazla kitap seç",
+  "Select Books": "Kitapları seç",
+  "Select Multiple Books": "Birden fazla kitap seç",
   "Sepia": "Sepya",
   "Serif Font": "Serif Yazı Tipi",
   "Show Book Details": "Kitap Detaylarını Göster",
@@ -110,7 +109,6 @@
   "Speak": "Konuş",
   "Subjects:": "Konular:",
   "System Fonts": "Sistem Yazı Tipleri",
-  "Table of Contents": "İçindekiler",
   "TTS not supported in this device": "Bu cihazda TTS desteklenmiyor",
   "Theme Color": "Tema Rengi",
   "Theme Mode": "Tema Modu",
@@ -130,14 +128,32 @@
   "Override Book Font": "Kitap Yazı Tipini Geçersiz Kıl",
   "Vertical Margins (px)": "Dikey Kenar Boşlukları (px)",
   "Horizontal Margins (%)": "Yatay Kenar Boşlukları (%)",
-  "Apply to all books": "Tüm kitaplara uygula",
-  "Apply to this book": "Bu kitaba uygula",
+  "Apply to All Books": "Tüm kitaplara uygula",
+  "Apply to This Book": "Bu kitaba uygula",
   "Unable to fetch the translation. Try again later.": "Çeviri alınamıyor. Daha sonra tekrar deneyin.",
   "Update Now!": "Şimdi Güncelle!",
   "Update": "Güncelle",
-  "Check update": "Güncellemeyi kontrol et",
+  "Check Update": "Güncellemeyi kontrol et",
   "Already the latest version": "Zaten en son sürüm",
   "Book Details": "Kitap Detayları",
-  "Import books": "Kitapları içe aktar",
-  "From local file": "Yerel dosyadan"
+  "From Local File": "Yerel dosyadan",
+  "TOC": "İçindekiler",
+  "Book uploaded: {{title}}": "Kitap yüklendi: {{title}}",
+  "Failed to upload book: {{title}}": "Kitap yüklenemedi: {{title}}",
+  "Book downloaded: {{title}}": "Kitap indirildi: {{title}}",
+  "Failed to download book: {{title}}": "Kitap indirilemedi: {{title}}",
+  "Upload Book": "Kitap Yükle",
+  "Auto Upload Books to Cloud": "Kitapları Otomatik Olarak Buluta Yükle",
+  "{{percentage}}% of Cloud Storage Used.": "Bulut Depolamanın %{{percentage}}'si kullanıldı.",
+  "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",
+  "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ı"
 }

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

@@ -57,7 +57,6 @@
   "Language:": "Мова:",
   "Layout": "Макет",
   "Light Mode": "Світлий режим",
-  "Line Height": "Висота рядка",
   "Loading...": "Завантаження...",
   "Loc. {{currentPage}} / {{totalPage}}": "Поз. {{currentPage}} / {{totalPage}}",
   "Logged in": "Увійшли",
@@ -84,7 +83,7 @@
   "Parallel Read": "Паралельне читання",
   "Published:": "Опубліковано:",
   "Publisher:": "Видавець:",
-  "Reading progress synced": "Прогрес читання синхронізовано",
+  "Reading Progress Synced": "Прогрес читання синхронізовано",
   "Reload Page": "Перезавантажити сторінку",
   "Reveal in File Explorer": "Показати у провіднику",
   "Reveal in Finder": "Показати у Finder",
@@ -93,11 +92,11 @@
   "Save": "Зберегти",
   "Scrolled Mode": "Режим прокрутки",
   "Search": "Пошук",
-  "Search books...": "Шукати книги...",
+  "Search Books...": "Шукати книги...",
   "Search...": "Пошук...",
   "Select Book": "Вибрати книгу",
-  "Select books": "Вибрати книги",
-  "Select multiple books": "Вибрати кілька книг",
+  "Select Books": "Вибрати книги",
+  "Select Multiple Books": "Вибрати кілька книг",
   "Sepia": "Сепія",
   "Serif Font": "Шрифт із засічками",
   "Show Book Details": "Показати деталі книги",
@@ -110,7 +109,6 @@
   "Speak": "Озвучити",
   "Subjects:": "Теми:",
   "System Fonts": "Системні шрифти",
-  "Table of Contents": "Зміст",
   "TTS not supported in this device": "TTS не підтримується на цьому пристрої",
   "Theme Color": "Колір теми",
   "Theme Mode": "Режим теми",
@@ -130,14 +128,32 @@
   "Override Book Font": "Перевизначити шрифт книги",
   "Vertical Margins (px)": "Вертикальні відступи (px)",
   "Horizontal Margins (%)": "Горизонтальні відступи (%)",
-  "Apply to all books": "Застосувати до всіх книг",
-  "Apply to this book": "Застосувати до цієї книги",
+  "Apply to All Books": "Застосувати до всіх книг",
+  "Apply to This Book": "Застосувати до цієї книги",
   "Unable to fetch the translation. Try again later.": "Не вдалося отримати переклад. Спробуйте пізніше.",
   "Update Now!": "Оновити зараз!",
   "Update": "Оновити",
-  "Check update": "Перевірити оновлення",
+  "Check Update": "Перевірити оновлення",
   "Already the latest version": "Вже остання версія",
   "Book Details": "Деталі книги",
-  "Import books": "Імпортувати книги",
-  "From local file": "З локального файлу"
+  "From Local File": "З локального файлу",
+  "TOC": "Зміст",
+  "Book uploaded: {{title}}": "Книгу завантажено: {{title}}",
+  "Failed to upload book: {{title}}": "Не вдалося завантажити книгу: {{title}}",
+  "Book downloaded: {{title}}": "Книгу завантажено: {{title}}",
+  "Failed to download book: {{title}}": "Не вдалося завантажити книгу: {{title}}",
+  "Upload Book": "Завантажити книгу",
+  "Auto Upload Books to Cloud": "Автоматично завантажувати книги в хмару",
+  "{{percentage}}% of Cloud Storage Used.": "{{percentage}}% використано хмарного сховища.",
+  "Storage": "Сховище",
+  "Book deleted: {{title}}": "Книгу видалено: {{title}}",
+  "Failed to delete book: {{title}}": "Не вдалося видалити книгу: {{title}}",
+  "Check Updates on Start": "Перевіряти оновлення при запуску",
+  "Insufficient storage quota": "Недостатньо квоти сховища",
+  "Font Weight": "Насиченість шрифту",
+  "Line Spacing": "Міжрядковий інтервал",
+  "Word Spacing": "Міжслівний інтервал",
+  "Letter Spacing": "Міжбуквений інтервал",
+  "Text Indent": "Відступ тексту",
+  "Paragraph Margin": "Відступ абзацу"
 }

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

@@ -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",
@@ -84,7 +83,7 @@
   "Parallel Read": "Đọc song song",
   "Published:": "Xuất bản:",
   "Publisher:": "Nhà xuất bản:",
-  "Reading progress synced": "Tiến độ đọc đã được đồng bộ",
+  "Reading Progress Synced": "Tiến độ đọc đã được đồng bộ",
   "Reload Page": "Tải lại trang",
   "Reveal in File Explorer": "Hiển thị trong File Explorer",
   "Reveal in Finder": "Hiển thị trong Finder",
@@ -93,11 +92,11 @@
   "Save": "Lưu",
   "Scrolled Mode": "Chế độ cuộn",
   "Search": "Tìm kiếm",
-  "Search books...": "Tìm kiếm sách...",
+  "Search Books...": "Tìm kiếm sách...",
   "Search...": "Tìm kiếm...",
   "Select Book": "Chọn sách",
-  "Select books": "Chọn sách",
-  "Select multiple books": "Chọn nhiều sách",
+  "Select Books": "Chọn sách",
+  "Select Multiple Books": "Chọn nhiều sách",
   "Sepia": "Nâu cổ",
   "Serif Font": "Phông chữ có chân",
   "Show Book Details": "Hiển thị chi tiết sách",
@@ -110,7 +109,6 @@
   "Speak": "Đọc",
   "Subjects:": "Chủ đề:",
   "System Fonts": "Phông chữ hệ thống",
-  "Table of Contents": "Mục lục",
   "TTS not supported in this device": "TTS không được hỗ trợ trên thiết bị này",
   "Theme Color": "Màu chủ đề",
   "Theme Mode": "Chế độ chủ đề",
@@ -130,14 +128,32 @@
   "Override Book Font": "Ghi đè phông chữ sách",
   "Vertical Margins (px)": "Lề dọc (px)",
   "Horizontal Margins (%)": "Lề ngang (%)",
-  "Apply to all books": "Áp dụng cho tất cả sách",
-  "Apply to this book": "Áp dụng cho sách này",
+  "Apply to All Books": "Áp dụng cho tất cả sách",
+  "Apply to This Book": "Áp dụng cho sách này",
   "Unable to fetch the translation. Try again later.": "Không thể tải dịch vụ. Vui lòng thử lại sau.",
   "Update Now!": "Cập nhật ngay!",
   "Update": "Cập nhật",
-  "Check update": "Kiểm tra cập nhật",
+  "Check Update": "Kiểm tra cập nhật",
   "Already the latest version": "Đã là phiên bản mới nhất",
   "Book Details": "Chi tiết sách",
-  "Import books": "Nhập sách",
-  "From local file": "Từ tệp địa phương"
+  "From Local File": "Từ tệp địa phương",
+  "TOC": "Mục lục",
+  "Book uploaded: {{title}}": "Sách đã tải lên: {{title}}",
+  "Failed to upload book: {{title}}": "Không thể tải lên sách: {{title}}",
+  "Book downloaded: {{title}}": "Sách đã tải về: {{title}}",
+  "Failed to download book: {{title}}": "Không thể tải về sách: {{title}}",
+  "Upload Book": "Tải lên sách",
+  "Auto Upload Books to Cloud": "Tự động tải sách lên đám mây",
+  "{{percentage}}% of Cloud Storage Used.": "{{percentage}}% dung lượng lưu trữ đám mây đã sử dụng.",
+  "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",
+  "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"
 }

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

@@ -57,7 +57,6 @@
   "Language:": "语言",
   "Layout": "布局",
   "Light Mode": "浅色主题",
-  "Line Height": "行高",
   "Loading...": "加载中...",
   "Loc. {{currentPage}} / {{totalPage}}": "位置 {{currentPage}} / {{totalPage}}",
   "Logged in": "已登录",
@@ -84,7 +83,7 @@
   "Parallel Read": "并排阅读",
   "Published:": "出版日期",
   "Publisher:": "出版商",
-  "Reading progress synced": "阅读进度已同步",
+  "Reading Progress Synced": "阅读进度已同步",
   "Reload Page": "重新加载页面",
   "Reveal in File Explorer": "在文件管理器中显示",
   "Reveal in Finder": "在访达中显示",
@@ -93,11 +92,11 @@
   "Save": "保存",
   "Scrolled Mode": "滚动模式",
   "Search": "搜索",
-  "Search books...": "搜索书籍...",
+  "Search Books...": "搜索书籍...",
   "Search...": "搜索...",
   "Select Book": "选择书籍",
-  "Select books": "选择书籍",
-  "Select multiple books": "选择多本书籍",
+  "Select Books": "选择书籍",
+  "Select Multiple Books": "选择多本书籍",
   "Sepia": "旧韵",
   "Serif Font": "衬线字体",
   "Show Book Details": "显示书籍详情",
@@ -110,7 +109,6 @@
   "Speak": "朗读",
   "Subjects:": "主题",
   "System Fonts": "系统字体",
-  "Table of Contents": "目录",
   "TTS not supported in this device": "此设备不支持 TTS",
   "Theme Color": "主题颜色",
   "Theme Mode": "主题模式",
@@ -130,14 +128,32 @@
   "Override Book Font": "覆盖书籍字体",
   "Vertical Margins (px)": "垂直边距（px）",
   "Horizontal Margins (%)": "水平边距（%）",
-  "Apply to all books": "应用于所有书籍",
-  "Apply to this book": "应用于此书籍",
+  "Apply to All Books": "应用于所有书籍",
+  "Apply to This Book": "应用于此书籍",
   "Unable to fetch the translation. Try again later.": "无法获取翻译，请稍后重试。",
   "Update Now!": "立即更新！",
   "Update": "更新",
-  "Check update": "检查更新",
+  "Check Update": "检查更新",
   "Already the latest version": "已经是最新版本",
   "Book Details": "书籍详情",
-  "Import books": "导入书籍",
-  "From local file": "从本地文件导入"
+  "From Local File": "从本地文件导入",
+  "TOC": "目录",
+  "Book uploaded: {{title}}": "书籍已上传：{{title}}",
+  "Failed to upload book: {{title}}": "上传书籍失败：{{title}}",
+  "Book downloaded: {{title}}": "书籍已下载：{{title}}",
+  "Failed to download book: {{title}}": "下载书籍失败：{{title}}",
+  "Upload Book": "上传书籍",
+  "Auto Upload Books to Cloud": "自动上传书籍到云端",
+  "{{percentage}}% of Cloud Storage Used.": "已使用 {{percentage}}% 云存储空间",
+  "Storage": "存储空间",
+  "Book deleted: {{title}}": "书籍已删除：{{title}}",
+  "Failed to delete book: {{title}}": "删除书籍失败：{{title}}",
+  "Check Updates on Start": "启动时检查更新",
+  "Insufficient storage quota": "云存储空间不足",
+  "Font Weight": "字重",
+  "Line Spacing": "行间距",
+  "Word Spacing": "词间距",
+  "Letter Spacing": "字间距",
+  "Text Indent": "首行缩进",
+  "Paragraph Margin": "段间距"
 }

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

@@ -57,7 +57,6 @@
   "Language:": "語言",
   "Layout": "版面",
   "Light Mode": "淺色主題",
-  "Line Height": "行高",
   "Loading...": "載入中...",
   "Loc. {{currentPage}} / {{totalPage}}": "位置 {{currentPage}} / {{totalPage}}",
   "Logged in": "已登入",
@@ -84,7 +83,7 @@
   "Parallel Read": "並排閱讀",
   "Published:": "出版日期",
   "Publisher:": "出版商",
-  "Reading progress synced": "閱讀進度已同步",
+  "Reading Progress Synced": "閱讀進度已同步",
   "Reload Page": "重新載入頁面",
   "Reveal in File Explorer": "在檔案管理器中顯示",
   "Reveal in Finder": "在訪達中顯示",
@@ -93,11 +92,11 @@
   "Save": "保存",
   "Scrolled Mode": "滾動模式",
   "Search": "搜索",
-  "Search books...": "搜索書籍...",
+  "Search Books...": "搜索書籍...",
   "Search...": "搜索...",
   "Select Book": "選擇書籍",
-  "Select books": "選擇書籍",
-  "Select multiple books": "選擇多本書籍",
+  "Select Books": "選擇書籍",
+  "Select Multiple Books": "選擇多本書籍",
   "Sepia": "舊韻",
   "Serif Font": "襯線字體",
   "Show Book Details": "顯示書籍詳情",
@@ -110,7 +109,6 @@
   "Speak": "朗讀",
   "Subjects:": "主題",
   "System Fonts": "系統字體",
-  "Table of Contents": "目錄",
   "TTS not supported in this device": "此設備不支持 TTS",
   "Theme Color": "主題顏色",
   "Theme Mode": "主題模式",
@@ -130,14 +128,32 @@
   "Override Book Font": "覆蓋書籍字體",
   "Vertical Margins (px)": "垂直邊距（px）",
   "Horizontal Margins (%)": "水平邊距（%）",
-  "Apply to all books": "應用於所有書籍",
-  "Apply to this book": "應用於此書籍",
+  "Apply to All Books": "應用於所有書籍",
+  "Apply to This Book": "應用於此書籍",
   "Unable to fetch the translation. Try again later.": "無法獲取翻譯，請稍後再試。",
   "Update Now!": "立即更新！",
   "Update": "更新",
-  "Check update": "檢查更新",
+  "Check Update": "檢查更新",
   "Already the latest version": "已經是最新版本",
   "Book Details": "書籍詳情",
-  "Import books": "導入書籍",
-  "From local file": "從本地文件導入"
+  "From Local File": "從本地文件導入",
+  "TOC": "目錄",
+  "Book uploaded: {{title}}": "書籍已上傳：{{title}}",
+  "Failed to upload book: {{title}}": "書籍上傳失敗：{{title}}",
+  "Book downloaded: {{title}}": "書籍已下載：{{title}}",
+  "Failed to download book: {{title}}": "書籍下載失敗：{{title}}",
+  "Upload Book": "上傳書籍",
+  "Auto Upload Books to Cloud": "自動上傳書籍到雲端",
+  "{{percentage}}% of Cloud Storage Used.": "已使用 {{percentage}}% 雲存儲空間",
+  "Storage": "存儲空間",
+  "Book deleted: {{title}}": "書籍已刪除：{{title}}",
+  "Failed to delete book: {{title}}": "書籍刪除失敗：{{title}}",
+  "Check Updates on Start": "啟動時檢查更新",
+  "Insufficient storage quota": "雲存儲空間不足",
+  "Font Weight": "字重",
+  "Line Spacing": "行間距",
+  "Word Spacing": "字間距",
+  "Letter Spacing": "字間距",
+  "Text Indent": "首行縮進",
+  "Paragraph Margin": "段間距"
 }

apps/readest-app/release-notes.json

@@ -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": [

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

@@ -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
 

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

@@ -21,6 +21,15 @@ tauri-build = { version = "2.0.3", features = [] }
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 log = "0.4"
+thiserror = "2"
+tokio = { version = "1", features = ["fs"] }
+tokio-util = { version = "0.7", features = ["codec"] }
+futures-util = "0.3"
+read-progress-stream = "1.0.0"
+reqwest = { version = "0.12", default-features = false, features = [
+  "json",
+  "stream",
+] }
 # FIXME: remove the devtools feature in production
 tauri = { version = "2.1.1", features = [ "protocol-asset", "devtools"] }
 tauri-build = "2.0.3"
@@ -48,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"

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

@@ -44,6 +44,9 @@
       "allow": [
         {
           "url": "https://*.deepl.com"
+        },
+        {
+          "url": "https://*.cloudflarestorage.com"
         }
       ]
     },

apps/readest-app/src-tauri/gen/android/app/build.gradle.kts

@@ -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")

apps/readest-app/src-tauri/gen/android/app/src/main/java/com/bilingify/readest/MainActivity.kt

@@ -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
+        }
+    }
+}

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

@@ -14,15 +14,17 @@ mod traffic_light_plugin;
 #[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>) {
@@ -69,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,
@@ -80,7 +94,13 @@ pub fn run() {
     let builder = tauri::Builder::default()
         .plugin(tauri_plugin_process::init())
         .plugin(tauri_plugin_oauth::init())
-        .invoke_handler(tauri::generate_handler![start_server])
+        .invoke_handler(tauri::generate_handler![
+            start_server,
+            download_file,
+            upload_file,
+            #[cfg(desktop)]
+            list_fonts
+        ])
         .plugin(tauri_plugin_shell::init())
         .plugin(tauri_plugin_opener::init())
         .plugin(tauri_plugin_http::init())
@@ -184,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();

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

@@ -0,0 +1,203 @@
+// Copyright 2019-2023 Tauri Programme within The Commons Conservancy
+// SPDX-License-Identifier: Apache-2.0
+// SPDX-License-Identifier: MIT
+
+//! Upload files from disk to a remote server over HTTP.
+//!
+//! Download files from a remote HTTP server to disk.
+
+use futures_util::TryStreamExt;
+use serde::{ser::Serializer, Serialize};
+use tauri::{command, ipc::Channel};
+use tokio::{
+    fs::File,
+    io::{AsyncWriteExt, BufWriter},
+};
+use tokio_util::codec::{BytesCodec, FramedRead};
+
+use read_progress_stream::ReadProgressStream;
+
+use std::collections::HashMap;
+use std::time::Instant;
+
+type Result<T> = std::result::Result<T, Error>;
+
+// The TransferStats struct tracks both transfer speed and cumulative transfer progress.
+pub struct TransferStats {
+    accumulated_chunk_len: usize, // Total length of chunks transferred in the current period
+    accumulated_time: u128,       // Total time taken for the transfers in the current period
+    pub transfer_speed: u64,      // Calculated transfer speed in bytes per second
+    pub total_transferred: u64,   // Cumulative total of all transferred data
+    start_time: Instant,          // Time when the current period started
+    granularity: u32, // Time period (in milliseconds) over which the transfer speed is calculated
+}
+
+impl TransferStats {
+    // Initializes a new TransferStats instance with the specified granularity.
+    pub fn start(granularity: u32) -> Self {
+        Self {
+            accumulated_chunk_len: 0,
+            accumulated_time: 0,
+            transfer_speed: 0,
+            total_transferred: 0,
+            start_time: Instant::now(),
+            granularity,
+        }
+    }
+    // Records the transfer of a data chunk and updates both transfer speed and total progress.
+    pub fn record_chunk_transfer(&mut self, chunk_len: usize) {
+        let now = Instant::now();
+        let it_took = now.duration_since(self.start_time).as_millis();
+        self.accumulated_chunk_len += chunk_len;
+        self.total_transferred += chunk_len as u64;
+        self.accumulated_time += it_took;
+
+        // Calculate transfer speed if accumulated time exceeds granularity.
+        if self.accumulated_time >= self.granularity as u128 {
+            self.transfer_speed =
+                (self.accumulated_chunk_len as u128 / self.accumulated_time * 1024) as u64;
+            self.accumulated_chunk_len = 0;
+            self.accumulated_time = 0;
+        }
+
+        // Reset the start time for the next period.
+        self.start_time = now;
+    }
+}
+
+// Provides a default implementation for TransferStats with a granularity of 500 milliseconds.
+impl Default for TransferStats {
+    fn default() -> Self {
+        Self::start(500) // Default granularity is 500 ms
+    }
+}
+
+#[derive(Debug, thiserror::Error)]
+pub enum Error {
+    #[error(transparent)]
+    Io(#[from] std::io::Error),
+    #[error(transparent)]
+    Request(#[from] reqwest::Error),
+    #[error("{0}")]
+    ContentLength(String),
+    #[error("request failed with status code {0}: {1}")]
+    HttpErrorCode(u16, String),
+}
+
+impl Serialize for Error {
+    fn serialize<S>(&self, serializer: S) -> std::result::Result<S::Ok, S::Error>
+    where
+        S: Serializer,
+    {
+        serializer.serialize_str(self.to_string().as_ref())
+    }
+}
+
+#[derive(Clone, Serialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ProgressPayload {
+    progress: u64,
+    total: u64,
+    transfer_speed: u64,
+}
+
+#[command]
+pub async fn download_file(
+    url: &str,
+    file_path: &str,
+    headers: HashMap<String, String>,
+    body: Option<String>,
+    on_progress: Channel<ProgressPayload>,
+) -> Result<()> {
+    let client = reqwest::Client::new();
+    let mut request = if let Some(body) = body {
+        client.post(url).body(body)
+    } else {
+        client.get(url)
+    };
+    // Loop trought the headers keys and values
+    // and add them to the request object.
+    for (key, value) in headers {
+        request = request.header(&key, value);
+    }
+
+    let response = request.send().await?;
+    if !response.status().is_success() {
+        return Err(Error::HttpErrorCode(
+            response.status().as_u16(),
+            response.text().await.unwrap_or_default(),
+        ));
+    }
+    let total = response.content_length().unwrap_or(0);
+
+    let mut file = BufWriter::new(File::create(file_path).await?);
+    let mut stream = response.bytes_stream();
+
+    let mut stats = TransferStats::default();
+    while let Some(chunk) = stream.try_next().await? {
+        file.write_all(&chunk).await?;
+        stats.record_chunk_transfer(chunk.len());
+        let _ = on_progress.send(ProgressPayload {
+            progress: stats.total_transferred,
+            total,
+            transfer_speed: stats.transfer_speed,
+        });
+    }
+    file.flush().await?;
+
+    Ok(())
+}
+
+#[command]
+pub async fn upload_file(
+    url: &str,
+    file_path: &str,
+    method: &str,
+    headers: HashMap<String, String>,
+    on_progress: Channel<ProgressPayload>,
+) -> Result<String> {
+    let file = File::open(file_path).await?;
+    let file_len = file.metadata().await.unwrap().len();
+
+    let client = reqwest::Client::new();
+    let mut request = match method.to_uppercase().as_str() {
+        "POST" => client.post(url),
+        "PUT" => client.put(url),
+        _ => return Err(Error::ContentLength("Invalid HTTP method".into())),
+    };
+
+    request = request
+        .header(reqwest::header::CONTENT_LENGTH, file_len)
+        .body(file_to_body(on_progress.clone(), file, file_len));
+
+    for (key, value) in headers {
+        request = request.header(&key, value);
+    }
+
+    let response = request.send().await?;
+    if response.status().is_success() {
+        response.text().await.map_err(Into::into)
+    } else {
+        Err(Error::HttpErrorCode(
+            response.status().as_u16(),
+            response.text().await.unwrap_or_default(),
+        ))
+    }
+}
+
+fn file_to_body(channel: Channel<ProgressPayload>, file: File, file_len: u64) -> reqwest::Body {
+    let stream = FramedRead::new(file, BytesCodec::new()).map_ok(|r| r.freeze());
+
+    let mut stats = TransferStats::default();
+    reqwest::Body::wrap_stream(ReadProgressStream::new(
+        stream,
+        Box::new(move |progress_chunk, _progress_total| {
+            stats.record_chunk_transfer(progress_chunk as usize);
+            let _ = channel.send(ProgressPayload {
+                progress: stats.total_transferred,
+                total: file_len,
+                transfer_speed: stats.transfer_speed,
+            });
+        }),
+    ))
+}

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

@@ -14,10 +14,10 @@
     "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",
+        "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",
+        "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",
         "frame-src": "'self' blob: asset: http://asset.localhost",
         "script-src": "'self' 'unsafe-inline' 'unsafe-eval' blob: asset: http://asset.localhost https://*.sentry.io https://*.posthog.com"
@@ -56,6 +56,12 @@
         "section": "text"
       }
     },
+    "android": {
+      "minSdkVersion": 26
+    },
+    "iOS": {
+      "developmentTeam": "J5W48D69VR"
+    },
     "fileAssociations": [
       {
         "name": "epub",

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

@@ -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) => {
@@ -167,7 +189,8 @@ export default function AuthPage() {
     const { data: subscription } = supabase.auth.onAuthStateChange((_event, session) => {
       if (session?.access_token && session.user) {
         login(session.access_token, session.user);
-        router.push('/library');
+        const redirectTo = new URLSearchParams(window.location.search).get('redirect');
+        router.push(redirectTo ?? '/library');
       }
     });
 
@@ -199,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'
         />
@@ -228,7 +245,7 @@ export default function AuthPage() {
           theme={isDarkMode ? 'dark' : 'light'}
           magicLink={true}
           providers={[]}
-          redirectTo={`http://localhost:${port}`}
+          redirectTo={getTauriRedirectTo()}
         />
       </div>
     </div>
@@ -245,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>

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

@@ -36,6 +36,7 @@ export const viewport = {
   initialScale: 1,
   maximumScale: 1,
   userScalable: false,
+  viewportFit: 'cover',
   themeColor: 'white',
 };
 
@@ -44,9 +45,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     <html>
       <head>
         <title>{title}</title>
+        <meta
+          name='viewport'
+          content='minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover'
+        />
         <meta name='mobile-web-app-capable' content='yes' />
+        <meta name='apple-mobile-web-app-capable' content='yes' />
         <meta name='apple-mobile-web-app-status-bar-style' content='default' />
-        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1' />
+        <meta name='apple-mobile-web-app-title' content='Readest' />
         <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
         <link rel='icon' href='/favicon.ico' />
         <link rel='manifest' href='/manifest.json' />

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

@@ -0,0 +1,143 @@
+import clsx from 'clsx';
+import Image from 'next/image';
+import { MdCheckCircle, MdCheckCircleOutline } from 'react-icons/md';
+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 {
+  book: Book;
+  isSelectMode: boolean;
+  selectedBooks: string[];
+  clickedBookHash: string | null;
+  transferProgress: number | null;
+  handleBookClick: (book: Book) => void;
+  handleBookUpload: (book: Book) => void;
+  handleBookDownload: (book: Book) => void;
+  showBookDetailsModal: (book: Book) => void;
+  bookContextMenuHandler: (book: Book, e: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+const BookItem: React.FC<BookItemProps> = ({
+  book,
+  isSelectMode,
+  selectedBooks,
+  clickedBookHash,
+  transferProgress,
+  handleBookClick,
+  handleBookUpload,
+  handleBookDownload,
+  showBookDetailsModal,
+  bookContextMenuHandler,
+}) => {
+  const iconSize15 = useResponsiveSize(15);
+  const { appService } = useEnv();
+
+  return (
+    <div
+      className={clsx('book-item', appService?.hasContextMenu ? 'cursor-pointer' : '')}
+      onContextMenu={bookContextMenuHandler.bind(null, book)}
+    >
+      <div className='bg-base-100 shadow-md' onClick={() => handleBookClick(book)}>
+        <div className='relative aspect-[28/41]'>
+          <Image
+            src={book.coverImageUrl!}
+            alt={book.title}
+            fill={true}
+            className='object-cover'
+            onError={(e) => {
+              (e.target as HTMLImageElement).style.display = 'none';
+              (e.target as HTMLImageElement).nextElementSibling?.classList.remove('invisible');
+            }}
+          />
+          <div
+            className={clsx(
+              'invisible absolute inset-0 rounded-none p-2',
+              'text-neutral-content text-center font-serif font-medium',
+            )}
+          >
+            <div className='flex h-1/2 items-center justify-center'>
+              <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'>
+                {formatAuthors(book.author)}
+              </span>
+            </div>
+          </div>
+          {(selectedBooks.includes(book.hash) || clickedBookHash === book.hash) && (
+            <div className='absolute inset-0 bg-black opacity-30 transition-opacity duration-300'></div>
+          )}
+          {isSelectMode && (
+            <div className='absolute bottom-1 right-1'>
+              {selectedBooks.includes(book.hash) ? (
+                <MdCheckCircle className='fill-blue-500' />
+              ) : (
+                <MdCheckCircleOutline className='fill-gray-300 drop-shadow-sm' />
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+      <div className={clsx('flex w-full flex-col p-0 pt-2')}>
+        <div className='min-w-0 flex-1'>
+          <h4 className='block overflow-hidden text-ellipsis whitespace-nowrap text-[0.6em] text-xs font-semibold'>
+            {book.title}
+          </h4>
+        </div>
+        <div
+          className={clsx('flex items-center', book.progress ? 'justify-between' : 'justify-end')}
+        >
+          {book.progress && <ReadingProgress book={book} />}
+          <div className='flex items-center gap-x-1'>
+            {transferProgress !== null ? (
+              transferProgress === 100 ? null : (
+                <div
+                  className='radial-progress opacity-0 group-hover:opacity-100'
+                  style={
+                    {
+                      '--value': transferProgress,
+                      '--size': `${iconSize15}px`,
+                      '--thickness': '2px',
+                    } as React.CSSProperties
+                  }
+                  role='progressbar'
+                ></div>
+              )
+            ) : (
+              <button
+                className='show-detail-button opacity-0 group-hover:opacity-100'
+                onClick={() => {
+                  if (!book.uploadedAt) {
+                    handleBookUpload(book);
+                  } else if (!book.downloadedAt) {
+                    handleBookDownload(book);
+                  }
+                }}
+              >
+                {!book.uploadedAt && <LiaCloudUploadAltSolid size={iconSize15} />}
+                {book.uploadedAt && !book.downloadedAt && (
+                  <LiaCloudDownloadAltSolid size={iconSize15} />
+                )}
+              </button>
+            )}
+            <button
+              className='show-detail-button opacity-0 group-hover:opacity-100'
+              onClick={() => showBookDetailsModal(book)}
+            >
+              <CiCircleMore size={iconSize15} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BookItem;

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

@@ -1,14 +1,9 @@
 import clsx from 'clsx';
 import * as React from 'react';
-import { useEffect, useRef, useState } from 'react';
-import { PiPlus } from 'react-icons/pi';
-import { MdDelete, MdOpenInNew } from 'react-icons/md';
-import { MdCheckCircle, MdCheckCircleOutline } from 'react-icons/md';
-import { CiCircleMore } from 'react-icons/ci';
-
 import { useRouter, useSearchParams } from 'next/navigation';
-import Image from 'next/image';
-
+import { useEffect, useRef, useState } from 'react';
+import { MdDelete, MdOpenInNew } from 'react-icons/md';
+import { PiPlus } from 'react-icons/pi';
 import { Menu, MenuItem } from '@tauri-apps/api/menu';
 import { revealItemInDir } from '@tauri-apps/plugin-opener';
 import { Book, BooksGroup } from '@/types/book';
@@ -16,17 +11,15 @@ import { useEnv } from '@/context/EnvContext';
 import { useLibraryStore } from '@/store/libraryStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
-import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 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, isWebAppPlatform } from '@/services/environment';
 
 import Alert from '@/components/Alert';
 import Spinner from '@/components/Spinner';
-import BookDetailModal from '@/components/BookDetailModal';
-import ReadingProgress from './ReadingProgress';
+import BookItem from './BookItem';
+import GroupItem from './GroupItem';
 
 type BookshelfItem = Book | BooksGroup;
 
@@ -34,6 +27,7 @@ const UNGROUPED_NAME = 'ungrouped';
 
 const generateBookshelfItems = (books: Book[]): BookshelfItem[] => {
   const groups: BooksGroup[] = books.reduce((acc: BooksGroup[], book: Book) => {
+    if (book.deletedAt) return acc;
     book.group = book.group || UNGROUPED_NAME;
     const groupIndex = acc.findIndex((group) => group.name === book.group);
     const booksGroup = acc[acc.findIndex((group) => group.name === book.group)];
@@ -57,31 +51,55 @@ const generateBookshelfItems = (books: Book[]): BookshelfItem[] => {
 interface BookshelfProps {
   libraryBooks: Book[];
   isSelectMode: boolean;
-  onImportBooks: () => void;
+  handleImportBooks: () => void;
+  handleBookUpload: (book: Book) => void;
+  handleBookDownload: (book: Book) => void;
+  handleBookDelete: (book: Book) => void;
+  handleShowDetailsBook: (book: Book) => void;
+  booksTransferProgress: { [key: string]: number | null };
 }
 
-const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImportBooks }) => {
+const Bookshelf: React.FC<BookshelfProps> = ({
+  libraryBooks,
+  isSelectMode,
+  handleImportBooks,
+  handleBookUpload,
+  handleBookDownload,
+  handleBookDelete,
+  handleShowDetailsBook,
+  booksTransferProgress,
+}) => {
   const _ = useTranslation();
   const router = useRouter();
   const searchParams = useSearchParams();
   const { envConfig, appService } = useEnv();
   const { settings } = useSettingsStore();
-  const { deleteBook } = useLibraryStore();
+  const { updateBook } = useLibraryStore();
   const [loading, setLoading] = useState(false);
   const [selectedBooks, setSelectedBooks] = useState<string[]>([]);
   const [showDeleteAlert, setShowDeleteAlert] = useState(false);
   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 iconSize15 = useResponsiveSize(15);
 
-  const showBookDetailsModal = (book: Book) => {
-    setShowDetailsBook(book);
+  const makeBookAvailable = async (book: Book) => {
+    if (book.uploadedAt && !book.downloadedAt) {
+      let available = false;
+      try {
+        await handleBookDownload(book);
+        updateBook(envConfig, book);
+        available = true;
+      } finally {
+        return available;
+      }
+    }
+    return true;
   };
 
-  const dismissBookDetailsModal = () => {
-    setShowDetailsBook(null);
+  const showBookDetailsModal = async (book: Book) => {
+    if (await makeBookAvailable(book)) {
+      handleShowDetailsBook(book);
+    }
   };
 
   const { setLibrary } = useLibraryStore();
@@ -111,14 +129,16 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
 
   const bookshelfItems = generateBookshelfItems(libraryBooks);
 
-  const handleBookClick = (id: string) => {
+  const handleBookClick = async (book: Book) => {
+    if (!(await makeBookAvailable(book))) return;
+
     if (isSelectMode) {
-      toggleSelection(id);
+      toggleSelection(book.hash);
     } else {
-      setClickedImage(id);
+      setClickedImage(book.hash);
       setTimeout(() => setClickedImage(null), 300);
       setTimeout(() => setLoading(true), 200);
-      navigateToReader(router, [id]);
+      navigateToReader(router, [book.hash]);
     }
   };
 
@@ -133,11 +153,11 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
     navigateToReader(router, selectedBooks);
   };
 
-  const confirmDelete = () => {
+  const confirmDelete = async () => {
     for (const selectedBook of selectedBooks) {
       const book = libraryBooks.find((b) => b.hash === selectedBook);
       if (book) {
-        deleteBook(envConfig, book);
+        await handleBookDelete(book);
       }
     }
     setSelectedBooks([]);
@@ -149,7 +169,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
   };
 
   const bookContextMenuHandler = async (book: Book, e: React.MouseEvent) => {
-    if (!isTauriAppPlatform()) return;
+    if (!appService?.hasContextMenu) return;
     e.preventDefault();
     e.stopPropagation();
     const osPlatform = getOSPlatform();
@@ -158,7 +178,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
     const openBookMenuItem = await MenuItem.new({
       text: isSelectMode ? _('Select Book') : _('Open Book'),
       action: async () => {
-        handleBookClick(book.hash);
+        handleBookClick(book);
       },
     });
     const showBookInFinderMenuItem = await MenuItem.new({
@@ -174,16 +194,23 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
         showBookDetailsModal(book);
       },
     });
+    const uploadBookMenuItem = await MenuItem.new({
+      text: _('Upload Book'),
+      action: async () => {
+        handleBookUpload(book);
+      },
+    });
     const deleteBookMenuItem = await MenuItem.new({
       text: _('Delete'),
       action: async () => {
-        deleteBook(envConfig, book);
+        await handleBookDelete(book);
       },
     });
     const menu = await Menu.new();
     menu.append(openBookMenuItem);
     menu.append(showBookDetailsMenuItem);
     menu.append(showBookInFinderMenuItem);
+    menu.append(uploadBookMenuItem);
     menu.append(deleteBookMenuItem);
     menu.popup();
   };
@@ -198,137 +225,41 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
           >
             <div className='flex-grow'>
               {'format' in item ? (
-                <div
-                  className='book-item cursor-pointer'
-                  onContextMenu={bookContextMenuHandler.bind(null, item as Book)}
-                >
-                  <div
-                    key={(item as Book).hash}
-                    className='bg-base-100 shadow-md'
-                    onClick={() => handleBookClick(item.hash)}
-                  >
-                    <div className='relative aspect-[28/41]'>
-                      <Image
-                        src={item.coverImageUrl!}
-                        alt={item.title}
-                        fill={true}
-                        className='object-cover'
-                        onError={(e) => {
-                          (e.target as HTMLImageElement).style.display = 'none';
-                          (e.target as HTMLImageElement).nextElementSibling?.classList.remove(
-                            'invisible',
-                          );
-                        }}
-                      />
-                      <div
-                        className={clsx(
-                          'invisible absolute inset-0 flex items-center justify-center p-1',
-                          'text-neutral-content rounded-none text-center font-serif text-base font-medium',
-                        )}
-                      >
-                        {item.title}
-                      </div>
-                      {(selectedBooks.includes(item.hash) || clickedImage === item.hash) && (
-                        <div className='absolute inset-0 bg-black opacity-30 transition-opacity duration-300'></div>
-                      )}
-                      {isSelectMode && (
-                        <div className='absolute bottom-1 right-1'>
-                          {selectedBooks.includes(item.hash) ? (
-                            <MdCheckCircle className='fill-blue-500' />
-                          ) : (
-                            <MdCheckCircleOutline className='fill-gray-300 drop-shadow-sm' />
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  <div
-                    className={clsx(
-                      'flex w-full p-0 pt-2',
-                      isWebAppPlatform() ? 'flex-col' : 'flex-row justify-between',
-                    )}
-                  >
-                    <div className='min-w-0 flex-1'>
-                      <h4 className='block overflow-hidden text-ellipsis whitespace-nowrap text-[0.6em] text-xs font-semibold'>
-                        {(item as Book).title}
-                      </h4>
-                    </div>
-                    {item.progress && (
-                      <div className={'flex items-center justify-between'}>
-                        <ReadingProgress book={item as Book} />
-                        {isWebAppPlatform() && (
-                          <button
-                            type='button'
-                            className='show-detail-button opacity-0 group-hover:opacity-100'
-                            onClick={showBookDetailsModal.bind(null, item as Book)}
-                            onKeyUp={(e) => {
-                              if (e.key === 'Enter' || e.key === ' ') {
-                                showBookDetailsModal(item as Book);
-                              }
-                            }}
-                          >
-                            <CiCircleMore size={iconSize15} />
-                          </button>
-                        )}
-                      </div>
-                    )}
-                    {!item.progress && isWebAppPlatform() && (
-                      <div className={'flex items-center justify-end'}>
-                        <button
-                          type='button'
-                          className='show-detail-button opacity-0 group-hover:opacity-100'
-                          onClick={showBookDetailsModal.bind(null, item as Book)}
-                          onKeyUp={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              showBookDetailsModal(item as Book);
-                            }
-                          }}
-                        >
-                          <CiCircleMore size={iconSize15} />
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                </div>
+                <BookItem
+                  book={item}
+                  isSelectMode={isSelectMode}
+                  selectedBooks={selectedBooks}
+                  clickedBookHash={clickedImage}
+                  handleBookClick={handleBookClick}
+                  handleBookUpload={handleBookUpload}
+                  handleBookDownload={handleBookDownload}
+                  showBookDetailsModal={showBookDetailsModal}
+                  bookContextMenuHandler={bookContextMenuHandler}
+                  transferProgress={booksTransferProgress[item.hash] || null}
+                />
               ) : (
-                <div>
-                  {(item as BooksGroup).books.map((book) => (
-                    <div key={book.hash} className='card bg-base-100 w-full shadow-md'>
-                      <figure>
-                        <Image
-                          width={10}
-                          height={10}
-                          src={book.coverImageUrl!}
-                          alt={book.title || ''}
-                          className='h-48 w-full object-cover'
-                        />
-                      </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>
-                        <ReadingProgress book={book} />
-                      </div>
-                    </div>
-                  ))}
-                  <h2 className='mb-2 text-lg font-bold'>{(item as BooksGroup).name}</h2>
-                </div>
+                <GroupItem group={item} />
               )}
             </div>
           </div>
         ))}
-
         {bookshelfItems.length > 0 && (
           <div
             className='border-1 bg-base-100 hover:bg-base-300/50 m-4 flex aspect-[28/41] items-center justify-center'
             role='button'
-            onClick={onImportBooks}
+            onClick={handleImportBooks}
           >
             <PiPlus className='size-10' color='gray' />
           </div>
         )}
       </div>
       {selectedBooks.length > 0 && (
-        <div className='text-base-content bg-base-300 fixed bottom-4 left-1/2 flex -translate-x-1/2 transform space-x-4 rounded-lg p-4 shadow-lg'>
+        <div
+          className={clsx(
+            'text-base-content bg-base-300 fixed bottom-4 left-1/2 flex',
+            '-translate-x-1/2 transform space-x-4 rounded-lg p-4 shadow-lg',
+          )}
+        >
           <button onClick={openSelectedBooks} className='flex items-center space-x-2'>
             <MdOpenInNew />
             <span>{_('Open')}</span>
@@ -352,14 +283,6 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
           onClickConfirm={confirmDelete}
         />
       )}
-
-      {showDetailsBook && (
-        <BookDetailModal
-          isOpen={!!showDetailsBook}
-          book={showDetailsBook}
-          onClose={dismissBookDetailsModal}
-        />
-      )}
     </div>
   );
 };

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

@@ -0,0 +1,38 @@
+import Image from 'next/image';
+import { BooksGroup } from '@/types/book';
+import { formatAuthors, formatTitle } from '@/utils/book';
+import ReadingProgress from './ReadingProgress';
+
+interface GroupItemProps {
+  group: BooksGroup;
+}
+
+const GroupItem: React.FC<GroupItemProps> = ({ group }) => {
+  return (
+    <div>
+      {group.books.map((book) => (
+        <div key={book.hash} className='card bg-base-100 w-full shadow-md'>
+          <figure>
+            <Image
+              width={10}
+              height={10}
+              src={book.coverImageUrl!}
+              alt={book.title || ''}
+              className='h-48 w-full object-cover'
+            />
+          </figure>
+          <div className='card-body p-4'>
+            <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>
+      ))}
+      <h2 className='mb-2 text-lg font-bold'>{group.name}</h2>
+    </div>
+  );
+};
+
+export default GroupItem;

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

@@ -0,0 +1,27 @@
+import { useTranslation } from '@/hooks/useTranslation';
+import MenuItem from '@/components/MenuItem';
+
+interface ImportMenuProps {
+  setIsDropdownOpen?: (open: boolean) => void;
+  onImportBooks: () => void;
+}
+
+const ImportMenu: React.FC<ImportMenuProps> = ({ setIsDropdownOpen, onImportBooks }) => {
+  const _ = useTranslation();
+
+  const handleImportBooks = () => {
+    onImportBooks();
+    setIsDropdownOpen?.(false);
+  };
+
+  return (
+    <ul
+      tabIndex={-1}
+      className='dropdown-content dropdown-center bg-base-100 menu rounded-box z-[1] mt-3 w-52 p-2 shadow'
+    >
+      <MenuItem label={_('From Local File')} onClick={handleImportBooks} />
+    </ul>
+  );
+};
+
+export default ImportMenu;

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

@@ -12,6 +12,7 @@ import useTrafficLight from '@/hooks/useTrafficLight';
 import WindowButtons from '@/components/WindowButtons';
 import Dropdown from '@/components/Dropdown';
 import SettingsMenu from './SettingsMenu';
+import ImportMenu from './ImportMenu';
 
 interface LibraryHeaderProps {
   isSelectMode: boolean;
@@ -42,22 +43,25 @@ 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' />
           </span>
           <input
             type='text'
-            placeholder={_('Search books...')}
+            placeholder={_('Search Books...')}
             spellCheck='false'
             className={clsx(
               'input rounded-badge bg-base-300/50 h-7 w-full pl-10 pr-10',
@@ -65,31 +69,27 @@ 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'>
-            <span className='mx-2 h-5 w-[1px] bg-gray-400'></span>
-            <div className='dropdown dropdown-bottom flex h-5 cursor-pointer justify-center'>
-              <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Import books')}>
-                <PiPlus tabIndex={-1} className='h-5 w-5' />
-              </div>
-              <ul
-                tabIndex={-1}
-                className='dropdown-content dropdown-center bg-base-100 menu rounded-box z-[1] mt-3 w-52 p-2 shadow'
-              >
-                <li>
-                  <button className='text-base-content' onClick={onImportBooks}>
-                    {_('From local file')}
-                  </button>
-                </li>
-              </ul>
-            </div>
+          <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'
+              buttonClassName='p-0 h-6 min-h-6 w-6 flex items-center justify-center'
+              toggleButton={
+                <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Import Books')}>
+                  <PiPlus className='m-0.5 h-5 w-5' />
+                </div>
+              }
+            >
+              <ImportMenu onImportBooks={onImportBooks} />
+            </Dropdown>
             <button
               onClick={onToggleSelectMode}
-              aria-label={_('Select multiple books')}
+              aria-label={_('Select Multiple Books')}
               className='h-6'
             >
               <div
                 className='lg:tooltip lg:tooltip-bottom cursor-pointer'
-                data-tip={_('Select books')}
+                data-tip={_('Select Books')}
               >
                 <PiSelectionAllDuotone
                   role='button'
@@ -99,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'
@@ -107,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>

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

@@ -1,17 +1,22 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { PiUserCircle } from 'react-icons/pi';
 import { PiUserCircleCheck } from 'react-icons/pi';
+import { MdCheck } from 'react-icons/md';
 
 import { setAboutDialogVisible } from '@/components/AboutWindow';
-import { isWebAppPlatform } from '@/services/environment';
+import { hasUpdater, isWebAppPlatform } from '@/services/environment';
 import { DOWNLOAD_READEST_URL } from '@/services/constants';
 import { useAuth } from '@/context/AuthContext';
 import { useEnv } from '@/context/EnvContext';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
+import { getStoragePlanData } from '@/utils/access';
+import { navigateToLogin } from '@/utils/nav';
+import { QuotaType } from '@/types/user';
 import MenuItem from '@/components/MenuItem';
+import Quota from '@/components/Quota';
 
 interface BookMenuProps {
   setIsDropdownOpen?: (isOpen: boolean) => void;
@@ -21,8 +26,11 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
   const _ = useTranslation();
   const router = useRouter();
   const { envConfig } = useEnv();
-  const { user, logout } = useAuth();
+  const { token, user, logout } = useAuth();
   const { settings, setSettings, saveSettings } = useSettingsStore();
+  const [quotas, setQuotas] = React.useState<QuotaType[]>([]);
+  const [isAutoUpload, setIsAutoUpload] = useState(settings.autoUpload);
+  const [isAutoCheckUpdates, setIsAutoCheckUpdates] = useState(settings.autoCheckUpdates);
 
   const showAboutReadest = () => {
     setAboutDialogVisible(true);
@@ -34,7 +42,7 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
   };
 
   const handleUserLogin = () => {
-    router.push('/auth');
+    navigateToLogin(router);
     setIsDropdownOpen?.(false);
   };
 
@@ -46,6 +54,45 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
     setIsDropdownOpen?.(false);
   };
 
+  const handleReloadPage = () => {
+    window.location.reload();
+    setIsDropdownOpen?.(false);
+  };
+
+  const toggleAutoUploadBooks = () => {
+    settings.autoUpload = !settings.autoUpload;
+    setSettings(settings);
+    saveSettings(envConfig, settings);
+    setIsAutoUpload(settings.autoUpload);
+
+    if (settings.autoUpload && !user) {
+      navigateToLogin(router);
+    }
+  };
+
+  const toggleAutoCheckUpdates = () => {
+    settings.autoCheckUpdates = !settings.autoCheckUpdates;
+    setSettings(settings);
+    saveSettings(envConfig, settings);
+    setIsAutoCheckUpdates(settings.autoCheckUpdates);
+  };
+
+  useEffect(() => {
+    if (!user || !token) return;
+    const storagPlan = getStoragePlanData(token);
+    const storageQuota: QuotaType = {
+      name: _('Storage'),
+      tooltip: _('{{percentage}}% of Cloud Storage Used.', {
+        percentage: Math.round((storagPlan.usage / storagPlan.quota) * 100),
+      }),
+      used: Math.round(storagPlan.usage / 1024 / 1024),
+      total: Math.round(storagPlan.quota / 1024 / 1024),
+      unit: 'MB',
+    };
+    setQuotas([storageQuota]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [token]);
+
   const isWebApp = isWebAppPlatform();
   const avatarUrl = user?.user_metadata?.['picture'] || user?.user_metadata?.['avatar_url'];
   const userFullName = user?.user_metadata?.['full_name'];
@@ -54,7 +101,7 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
   return (
     <div
       tabIndex={0}
-      className='settings-menu dropdown-content no-triangle border-base-100 z-20 mt-3 w-60 shadow-2xl'
+      className='settings-menu dropdown-content no-triangle border-base-100 z-20 mt-3 w-72 shadow-2xl'
     >
       {user ? (
         <MenuItem
@@ -80,12 +127,27 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
           }
         >
           <ul>
+            <Quota quotas={quotas} />
             <MenuItem label={_('Sign Out')} noIcon onClick={handleUserLogout} />
           </ul>
         </MenuItem>
       ) : (
         <MenuItem label={_('Sign In')} icon={<PiUserCircle />} onClick={handleUserLogin}></MenuItem>
       )}
+      <MenuItem
+        label={_('Auto Upload Books to Cloud')}
+        icon={isAutoUpload ? <MdCheck className='text-base-content' /> : undefined}
+        onClick={toggleAutoUploadBooks}
+      />
+      {hasUpdater() && (
+        <MenuItem
+          label={_('Check Updates on Start')}
+          icon={isAutoCheckUpdates ? <MdCheck className='text-base-content' /> : undefined}
+          onClick={toggleAutoCheckUpdates}
+        />
+      )}
+      <hr className='border-base-200 my-1' />
+      <MenuItem label={_('Reload Page')} onClick={handleReloadPage} />
       <hr className='border-base-200 my-1' />
       {isWebApp && <MenuItem label={_('Download Readest')} onClick={downloadReadest} />}
       <MenuItem label={_('About Readest')} onClick={showAboutReadest} />

apps/readest-app/src/app/library/hooks/useBooksSync.ts

@@ -0,0 +1,126 @@
+import { useEffect, useRef } from 'react';
+import { useAuth } from '@/context/AuthContext';
+import { useEnv } from '@/context/EnvContext';
+import { useSync } from '@/hooks/useSync';
+import { useLibraryStore } from '@/store/libraryStore';
+import { SYNC_BOOKS_INTERVAL_SEC } from '@/services/constants';
+import { Book } from '@/types/book';
+
+export interface UseBooksSyncProps {
+  onSyncStart?: () => void;
+  onSyncEnd?: () => void;
+}
+
+export const useBooksSync = ({ onSyncStart, onSyncEnd }: UseBooksSyncProps) => {
+  const { user } = useAuth();
+  const { appService } = useEnv();
+  const { library, setLibrary } = useLibraryStore();
+  const { syncedBooks, syncBooks, lastSyncedAtBooks } = useSync();
+  const syncBooksPullingRef = useRef(false);
+
+  const pullLibrary = async () => {
+    if (!user) return;
+    syncBooks([], 'pull');
+  };
+
+  const pushLibrary = async () => {
+    if (!user) return;
+    const newBooks = getNewBooks();
+    syncBooks(newBooks, 'push');
+  };
+
+  useEffect(() => {
+    if (!user) return;
+    if (syncBooksPullingRef.current) return;
+    syncBooksPullingRef.current = true;
+
+    pullLibrary();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const lastSyncTime = useRef<number>(0);
+  const syncTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const getNewBooks = () => {
+    if (!user) return [];
+    const newBooks = library.filter(
+      (book) => lastSyncedAtBooks < book.updatedAt || lastSyncedAtBooks < (book.deletedAt ?? 0),
+    );
+    return newBooks;
+  };
+
+  useEffect(() => {
+    if (!user) return;
+    const now = Date.now();
+    const timeSinceLastSync = now - lastSyncTime.current;
+    if (timeSinceLastSync > SYNC_BOOKS_INTERVAL_SEC * 1000) {
+      lastSyncTime.current = now;
+      const newBooks = getNewBooks();
+      syncBooks(newBooks, 'both');
+    } else {
+      if (syncTimeoutRef.current) clearTimeout(syncTimeoutRef.current);
+      syncTimeoutRef.current = setTimeout(
+        () => {
+          lastSyncTime.current = Date.now();
+          const newBooks = getNewBooks();
+          syncBooks(newBooks, 'both');
+          syncTimeoutRef.current = null;
+        },
+        SYNC_BOOKS_INTERVAL_SEC * 1000 - timeSinceLastSync,
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [library]);
+
+  const updateLibrary = async () => {
+    if (!syncedBooks?.length) return;
+
+    const processOldBook = async (oldBook: Book) => {
+      const matchingBook = syncedBooks.find((newBook) => newBook.hash === oldBook.hash);
+      if (matchingBook) {
+        if (!matchingBook.deletedAt && matchingBook.uploadedAt && !oldBook.downloadedAt) {
+          await appService?.downloadBook(oldBook, true);
+        }
+        const mergedBook =
+          matchingBook.updatedAt > oldBook.updatedAt
+            ? { ...oldBook, ...matchingBook, updatedAt: oldBook.updatedAt }
+            : { ...matchingBook, ...oldBook, updatedAt: oldBook.updatedAt };
+        mergedBook.progress = matchingBook.progress ?? oldBook.progress;
+        return mergedBook;
+      }
+      return oldBook;
+    };
+
+    const updatedLibrary = await Promise.all(library.map(processOldBook));
+    const processNewBook = async (newBook: Book) => {
+      if (!updatedLibrary.some((oldBook) => oldBook.hash === newBook.hash)) {
+        if (newBook.uploadedAt && !newBook.deletedAt) {
+          try {
+            await appService?.downloadBook(newBook, true);
+            newBook.coverImageUrl = await appService?.generateCoverImageUrl(newBook);
+            updatedLibrary.push(newBook);
+            setLibrary(updatedLibrary);
+          } catch {
+            console.error('Failed to download book:', newBook);
+          }
+        }
+      }
+    };
+    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);
+  };
+
+  useEffect(() => {
+    updateLibrary();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [syncedBooks]);
+
+  return { pullLibrary, pushLibrary };
+};

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

@@ -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';
@@ -21,13 +23,16 @@ import { useTheme } from '@/hooks/useTheme';
 import { useTranslation } from '@/hooks/useTranslation';
 import { useLibraryStore } from '@/store/libraryStore';
 import { useSettingsStore } from '@/store/settingsStore';
+import { usePullToRefresh } from '@/hooks/usePullToRefresh';
 import { useDemoBooks } from './hooks/useDemoBooks';
+import { useBooksSync } from './hooks/useBooksSync';
 
 import { AboutWindow } from '@/components/AboutWindow';
 import { Toast } from '@/components/Toast';
 import Spinner from '@/components/Spinner';
 import LibraryHeader from './components/LibraryHeader';
 import Bookshelf from './components/Bookshelf';
+import BookDetailModal from '@/components/BookDetailModal';
 
 const LibraryPage = () => {
   const router = useRouter();
@@ -35,29 +40,46 @@ const LibraryPage = () => {
   const { token, user } = useAuth();
   const {
     library: libraryBooks,
+    updateBook,
     setLibrary,
     checkOpenWithBooks,
     clearOpenWithBooks,
   } = useLibraryStore();
   const _ = useTranslation();
   const { updateAppTheme } = useTheme();
-  const { setSettings, saveSettings } = useSettingsStore();
+  const { settings, setSettings, saveSettings } = useSettingsStore();
   const [loading, setLoading] = useState(false);
   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({
+    onSyncStart: () => setLoading(true),
+    onSyncEnd: () => setLoading(false),
+  });
+
+  usePullToRefresh(containerRef, pullLibrary);
 
   useEffect(() => {
     updateAppTheme('base-200');
-    const doAppUpdates = async () => {
-      if (hasUpdater()) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const doCheckAppUpdates = async () => {
+      if (hasUpdater() && settings.autoCheckUpdates) {
         await checkForAppUpdates(_);
       }
     };
-    doAppUpdates();
+    doCheckAppUpdates();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [settings]);
 
   const processOpenWithFiles = React.useCallback(
     async (appService: AppService, openWithFiles: string[], libraryBooks: Book[]) => {
@@ -163,8 +185,12 @@ const LibraryPage = () => {
     const failedFiles = [];
     for (const file of files) {
       try {
-        await appService?.importBook(file, libraryBooks);
+        const book = await appService?.importBook(file, libraryBooks);
         setLibrary(libraryBooks);
+        if (user && book && !book.uploadedAt && settings.autoUpload) {
+          console.log('Uploading book:', book.title);
+          handleBookUpload(book);
+        }
       } catch (error) {
         const filename = typeof file === 'string' ? file : file.name;
         const baseFilename = getBaseFilename(filename);
@@ -200,6 +226,96 @@ const LibraryPage = () => {
     });
   };
 
+  const updateBookTransferProgress = throttle((bookHash: string, progress: ProgressPayload) => {
+    if (progress.total === 0) return;
+    const progressPct = (progress.progress / progress.total) * 100;
+    setBooksTransferProgress((prev) => ({
+      ...prev,
+      [bookHash]: progressPct,
+    }));
+  }, 500);
+
+  const handleBookUpload = async (book: Book) => {
+    try {
+      await appService?.uploadBook(book, (progress) => {
+        updateBookTransferProgress(book.hash, progress);
+      });
+      await updateBook(envConfig, book);
+      pushLibrary();
+      eventDispatcher.dispatch('toast', {
+        type: 'info',
+        timeout: 2000,
+        message: _('Book uploaded: {{title}}', {
+          title: book.title,
+        }),
+      });
+    } 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}}', {
+          title: book.title,
+        }),
+      });
+    }
+  };
+
+  const handleBookDownload = async (book: Book) => {
+    try {
+      await appService?.downloadBook(book, false, (progress) => {
+        updateBookTransferProgress(book.hash, progress);
+      });
+      await updateBook(envConfig, book);
+      eventDispatcher.dispatch('toast', {
+        type: 'info',
+        timeout: 2000,
+        message: _('Book downloaded: {{title}}', {
+          title: book.title,
+        }),
+      });
+    } catch {
+      eventDispatcher.dispatch('toast', {
+        message: _('Failed to download book: {{title}}', {
+          title: book.title,
+        }),
+        type: 'error',
+      });
+    }
+  };
+
+  const handleBookDelete = async (book: Book) => {
+    try {
+      await appService?.deleteBook(book, !!book.uploadedAt);
+      await updateBook(envConfig, book);
+      pushLibrary();
+      eventDispatcher.dispatch('toast', {
+        type: 'info',
+        timeout: 2000,
+        message: _('Book deleted: {{title}}', {
+          title: book.title,
+        }),
+      });
+    } catch {
+      eventDispatcher.dispatch('toast', {
+        message: _('Failed to delete book: {{title}}', {
+          title: book.title,
+        }),
+        type: 'error',
+      });
+    }
+  };
+
   const handleImportBooks = async () => {
     console.log('Importing books...');
     let files;
@@ -221,6 +337,10 @@ const LibraryPage = () => {
     setIsSelectMode(!isSelectMode);
   };
 
+  const handleShowDetailsBook = (book: Book) => {
+    setShowDetailsBook(book);
+  };
+
   if (!appService) {
     return null;
   }
@@ -238,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'>
@@ -256,12 +377,23 @@ const LibraryPage = () => {
       )}
       {libraryLoaded &&
         (libraryBooks.length > 0 ? (
-          <div 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}
                 isSelectMode={isSelectMode}
-                onImportBooks={handleImportBooks}
+                handleImportBooks={handleImportBooks}
+                handleBookUpload={handleBookUpload}
+                handleBookDownload={handleBookDownload}
+                handleBookDelete={handleBookDelete}
+                handleShowDetailsBook={handleShowDetailsBook}
+                booksTransferProgress={booksTransferProgress}
               />
             </Suspense>
           </div>
@@ -282,6 +414,13 @@ const LibraryPage = () => {
             </div>
           </div>
         ))}
+      {showDetailsBook && (
+        <BookDetailModal
+          isOpen={!!showDetailsBook}
+          book={showDetailsBook}
+          onClose={() => setShowDetailsBook(null)}
+        />
+      )}
       <AboutWindow />
       <Toast />
     </div>

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

@@ -0,0 +1,17 @@
+import Image from 'next/image';
+
+export default function Offline() {
+  return (
+    <div className='flex min-h-screen flex-col items-center justify-center bg-gray-100 text-center'>
+      <div className='mb-4'>
+        <Image src='/icon.png' alt='App Icon' width={100} height={100} className='rounded-lg' />
+      </div>
+
+      <h1 className='text-2xl font-bold text-gray-800'>Readest</h1>
+
+      <p className='mt-2 text-gray-600'>
+        It seems you&apos;re offline. Please check your internet connection and try again.
+      </p>
+    </div>
+  );
+}

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

@@ -1,19 +1,7 @@
-'use client';
-
-import { useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { navigateToLibrary } from '@/utils/nav';
-
-import Spinner from '@/components/Spinner';
+import { redirectToLibrary } from '@/utils/nav';
 
 const HomePage = () => {
-  const router = useRouter();
-
-  useEffect(() => {
-    navigateToLibrary(router);
-  }, [router]);
-
-  return <Spinner loading={true} />;
+  redirectToLibrary();
 };
 
 export default HomePage;

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

@@ -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';
@@ -15,6 +16,7 @@ import Ribbon from './Ribbon';
 import SettingsDialog from './settings/SettingsDialog';
 import Annotator from './annotator/Annotator';
 import FootnotePopup from './FootnotePopup';
+import HintInfo from './HintInfo';
 
 interface BooksGridProps {
   bookKeys: string[];
@@ -22,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();
@@ -38,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,
@@ -60,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
@@ -76,6 +82,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
             {viewSettings.scrolled ? null : (
               <>
                 <SectionInfo section={sectionLabel} gapLeft={marginGap} />
+                <HintInfo bookKey={bookKey} gapRight={marginGap} />
                 <PageInfoView
                   bookFormat={book.format}
                   section={section ?? null}

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

@@ -4,11 +4,13 @@ import { BookConfig } from '@/types/book';
 import { FoliateView, wrappedFoliateView } from '@/types/view';
 import { useReaderStore } from '@/store/readerStore';
 import { useParallelViewStore } from '@/store/parallelViewStore';
-import { useClickEvent, useTouchEvent } from '../hooks/useClickEvent';
+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;
@@ -80,6 +83,18 @@ const FoliateViewer: React.FC<{
   const docRelocateHandler = (event: Event) => {
     const detail = (event as CustomEvent).detail;
     if (detail.reason !== 'scroll' && detail.reason !== 'page') return;
+
+    if (detail.reason === 'scroll') {
+      const renderer = viewRef.current?.renderer;
+      if (renderer) {
+        if (renderer.start <= 0) {
+          viewRef.current?.prev(1);
+          // sometimes viewSize has subpixel value that the end never reaches
+        } else if (renderer.end + 1 >= renderer.viewSize) {
+          viewRef.current?.next(1);
+        }
+      }
+    }
     const parallelViews = getParallels(bookKey);
     if (parallelViews && parallelViews.size > 0) {
       parallelViews.forEach((key) => {
@@ -95,6 +110,7 @@ const FoliateViewer: React.FC<{
 
   useTouchEvent(bookKey, viewRef);
   const { handleTurnPage } = useClickEvent(bookKey, viewRef, containerRef);
+
   useFoliateEvents(viewRef.current, {
     onLoad: docLoadHandler,
     onRelocate: progressRelocateHandler,
@@ -128,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!;

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

@@ -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`,
       )}

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

@@ -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',

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

@@ -0,0 +1,58 @@
+import clsx from 'clsx';
+import React, { useEffect, useRef } from 'react';
+import { useSidebarStore } from '@/store/sidebarStore';
+import { eventDispatcher } from '@/utils/event';
+import useTrafficLight from '@/hooks/useTrafficLight';
+
+interface SectionInfoProps {
+  bookKey: string;
+  gapRight: string;
+}
+
+const HintInfo: React.FC<SectionInfoProps> = ({ bookKey, gapRight }) => {
+  const { isSideBarVisible } = useSidebarStore();
+  const { isTrafficLightVisible } = useTrafficLight();
+  const [hintMessage, setHintMessage] = React.useState<string | null>(null);
+  const hintTimeout = useRef(2000);
+  const dismissTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleShowHint = (event: CustomEvent) => {
+    const { message, bookKey: hintBookKey, timeout = 2000 } = event.detail;
+    if (hintBookKey !== bookKey) return;
+    setHintMessage(message);
+    hintTimeout.current = timeout;
+  };
+
+  useEffect(() => {
+    eventDispatcher.on('hint', handleShowHint);
+    return () => {
+      eventDispatcher.off('hint', handleShowHint);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (dismissTimeout.current) clearTimeout(dismissTimeout.current);
+    dismissTimeout.current = setTimeout(() => setHintMessage(''), hintTimeout.current);
+    return () => {
+      if (dismissTimeout.current) clearTimeout(dismissTimeout.current);
+    };
+  }, [hintMessage]);
+
+  return (
+    <div
+      className={clsx(
+        'pageinfo absolute right-0 top-0 flex max-w-[50%] items-end',
+        isTrafficLightVisible && !isSideBarVisible ? 'h-[44px]' : 'h-[30px]',
+        hintMessage ? '' : '',
+      )}
+      style={{ right: gapRight }}
+    >
+      <h2 className='text-neutral-content line-clamp-1 text-center font-sans text-xs font-light'>
+        {hintMessage || ''}
+      </h2>
+    </div>
+  );
+};
+
+export default HintInfo;

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

@@ -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>

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

@@ -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();
@@ -59,7 +60,9 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
       const isPrimary = !uniqueIds.has(id);
       uniqueIds.add(id);
       if (!getViewState(key)) {
-        initViewState(envConfig, id, key, isPrimary);
+        initViewState(envConfig, id, key, isPrimary).catch((error) => {
+          console.log('Error initializing book', key, error);
+        });
         if (index === 0) setSideBarBookKey(key);
       }
     });
@@ -89,6 +92,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
     const { book } = getBookData(bookKey) || {};
     const { isPrimary } = getViewState(bookKey) || {};
     if (isPrimary && book && config) {
+      eventDispatcher.dispatch('sync-book-progress', { bookKey });
       const settings = useSettingsStore.getState().settings;
       await saveConfig(envConfig, bookKey, config, settings);
     }
@@ -145,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>
       )
@@ -153,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 />

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

@@ -15,12 +15,12 @@ const SectionInfo: React.FC<SectionInfoProps> = ({ section, gapLeft }) => {
   return (
     <div
       className={clsx(
-        'pageinfo absolute right-0 top-0 flex items-end',
+        'pageinfo absolute right-0 top-0 flex max-w-[50%] items-end',
         isTrafficLightVisible && !isSideBarVisible ? 'h-[44px]' : 'h-[30px]',
       )}
       style={{ left: gapLeft }}
     >
-      <h2 className='text-neutral-content text-center font-sans text-xs font-light'>
+      <h2 className='text-neutral-content line-clamp-1 text-center font-sans text-xs font-light'>
         {section || ''}
       </h2>
     </div>

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

@@ -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}
@@ -117,7 +122,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
         </button>
       </div>
 
-      <hr className='border-base-200 my-1' />
+      <hr className='border-base-300 my-1' />
 
       <MenuItem label={_('Font & Layout')} shortcut='Shift+F' onClick={openFontLayoutMenu} />
 
@@ -128,7 +133,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
         onClick={toggleScrolledMode}
       />
 
-      <hr className='border-base-200 my-1' />
+      <hr className='border-base-300 my-1' />
 
       <MenuItem
         label={

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

@@ -4,6 +4,7 @@ import PopupButton from './PopupButton';
 import HighlightOptions from './HighlightOptions';
 import { Position } from '@/utils/sel';
 import { HighlightColor, HighlightStyle } from '@/types/book';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 
 interface AnnotationPopupProps {
   buttons: Array<{ tooltipText: string; Icon: React.ElementType; onClick: () => void }>;
@@ -17,8 +18,8 @@ interface AnnotationPopupProps {
   onHighlight: (update?: boolean) => void;
 }
 
-const highlightOptionsHeightPx = 28;
-const highlightOptionsPaddingPx = 16;
+const OPTIONS_HEIGHT_PIX = 28;
+const OPTIONS_PADDING_PIX = 16;
 
 const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
   buttons,
@@ -31,6 +32,8 @@ const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
   popupHeight,
   onHighlight,
 }) => {
+  const highlightOptionsHeightPx = useResponsiveSize(OPTIONS_HEIGHT_PIX);
+  const highlightOptionsPaddingPx = useResponsiveSize(OPTIONS_PADDING_PIX);
   return (
     <div>
       <Popup
@@ -41,7 +44,12 @@ const AnnotationPopup: React.FC<AnnotationPopupProps> = ({
         className='selection-popup bg-gray-600 px-4 text-white'
         triangleClassName='text-gray-600'
       >
-        <div className='selection-buttons flex h-11 items-center justify-between'>
+        <div
+          className='selection-buttons flex items-center justify-between'
+          style={{
+            height: popupHeight,
+          }}
+        >
           {buttons.map((button, index) => (
             <PopupButton
               key={index}

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

@@ -13,12 +13,13 @@ import * as CFI from 'foliate-js/epubcfi.js';
 import { Overlayer } from 'foliate-js/overlayer.js';
 import { useEnv } from '@/context/EnvContext';
 import { BookNote, HighlightColor, HighlightStyle } from '@/types/book';
-import { uniqueId } from '@/utils/misc';
+import { getOSPlatform, uniqueId } from '@/utils/misc';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useNotebookStore } from '@/store/notebookStore';
 import { useTranslation } from '@/hooks/useTranslation';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { useFoliateEvents } from '../../hooks/useFoliateEvents';
 import { useNotesSync } from '../../hooks/useNotesSync';
 import { getPopupPosition, getPosition, Position, TextSelection } from '@/utils/sel';
@@ -34,11 +35,11 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const { settings } = useSettingsStore();
   const { getConfig, saveConfig, getBookData, updateBooknotes } = useBookDataStore();
   const { getProgress, getView, getViewsById, getViewSettings } = useReaderStore();
-  const { isNotebookPinned, isNotebookVisible } = useNotebookStore();
   const { setNotebookVisible, setNotebookNewAnnotation } = useNotebookStore();
 
   useNotesSync(bookKey);
 
+  const osPlatform = getOSPlatform();
   const config = getConfig(bookKey)!;
   const progress = getProgress(bookKey)!;
   const bookData = getBookData(bookKey)!;
@@ -47,6 +48,8 @@ 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);
@@ -65,26 +68,88 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     settings.globalReadSettings.highlightStyles[selectedStyle],
   );
 
-  const dictPopupWidth = 480;
-  const dictPopupHeight = 300;
-  const transPopupWidth = 480;
-  const transPopupHeight = 360;
-  const annotPopupWidth = 280;
-  const annotPopupHeight = 44;
-  const popupPadding = 10;
+  const popupPadding = useResponsiveSize(10);
+  const maxWidth = window.innerWidth - 2 * popupPadding;
+  const maxHeight = window.innerHeight - 2 * popupPadding;
+  const dictPopupWidth = Math.min(480, maxWidth);
+  const dictPopupHeight = Math.min(300, maxHeight);
+  const transPopupWidth = Math.min(480, maxWidth);
+  const transPopupHeight = Math.min(360, maxHeight);
+  const annotPopupWidth = useResponsiveSize(280);
+  const annotPopupHeight = useResponsiveSize(44);
+  const androidSelectionHandlerHeight = 8;
 
   const onLoad = (event: Event) => {
     const detail = (event as CustomEvent).detail;
     const { doc, index } = detail;
-    const handlePointerup = () => {
-      const sel = doc.getSelection();
-      if (sel && sel.toString().trim().length > 0 && sel.rangeCount > 0) {
-        isTextSelected.current = true;
-        setSelection({ key: bookKey, text: sel.toString(), range: sel.getRangeAt(0), index });
+
+    const isValidSelection = (sel: Selection) => {
+      return sel && sel.toString().trim().length > 0 && sel.rangeCount > 0;
+    };
+    const makeSelection = (sel: Selection, rebuildRange = false) => {
+      isTextSelected.current = true;
+      const range = sel.getRangeAt(0);
+      if (rebuildRange) {
+        sel.removeAllRanges();
+        sel.addRange(range);
       }
+      setSelection({ key: bookKey, text: sel.toString(), range, index });
+    };
+    const handleSelectionchange = () => {
+      // Available on iOS, Android and Desktop, fired when the selection is changed
+      // Ideally the popup only shows when the selection is done,
+      // but on Android no proper events are fired to notify selection done or I didn't find it,
+      // we make the popup show when the selection is changed
+      const sel = doc.getSelection();
+      if (isValidSelection(sel)) {
+        if (osPlatform === 'android' && isTouchstarted.current) {
+          makeSelection(sel, false);
+        }
+      } else if (!isUpToShowPopup.current) {
+        isTextSelected.current = false;
+        setShowAnnotPopup(false);
+        setShowWiktionaryPopup(false);
+        setShowWikipediaPopup(false);
+        setShowDeepLPopup(false);
+      }
+    };
+    const handlePointerup = () => {
+      // Available on iOS and Desktop, fired when release the long press
+      // Note that on Android, pointerup event is fired after an additional touch event
+      const sel = doc.getSelection();
+      if (isValidSelection(sel)) {
+        makeSelection(sel, true);
+      }
+    };
+    const handleTouchstart = () => {
+      // Available on iOS and Android for the initial touch event
+      isTouchstarted.current = true;
+    };
+    const handleTouchmove = () => {
+      // Available on iOS, on Android not fired
+      // To make the popup not to follow the selection
+      setShowAnnotPopup(false);
+    };
+    const handleTouchend = () => {
+      // Available on iOS, on Android fired after an additional touch event
+      isTouchstarted.current = false;
     };
     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,
+      // although it should but doesn't work on iOS
+      if (osPlatform === 'android' || osPlatform === 'ios') {
+        detail.doc?.addEventListener('contextmenu', (event: Event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          return false;
+        });
+      }
     }
   };
 
@@ -106,13 +171,14 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const onShowAnnotation = (event: Event) => {
     const detail = (event as CustomEvent).detail;
     const { value: cfi, index, range } = detail;
-    const { booknotes = [] } = config;
+    const { booknotes = [] } = getConfig(bookKey)!;
     const annotations = booknotes.filter(
       (booknote) => booknote.type === 'annotation' && !booknote.deletedAt,
     );
     const annotation = annotations.find((annotation) => annotation.cfi === cfi);
     if (!annotation) return;
     const selection = { key: bookKey, annotated: true, text: annotation.text ?? '', range, index };
+    isUpToShowPopup.current = true;
     setSelectedStyle(annotation.style!);
     setSelectedColor(annotation.color!);
     setSelection(selection);
@@ -137,12 +203,16 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   useEffect(() => {
     const handleSingleClick = (): boolean => {
+      if (isUpToShowPopup.current) {
+        isUpToShowPopup.current = false;
+        return true;
+      }
       if (isTextSelected.current) {
-        view?.deselect();
-        isTextSelected.current = false;
+        handleDismissPopupAndSelection();
         return true;
       }
       if (showAnnotPopup || isShowingPopup.current) {
+        handleDismissPopup();
         return true;
       }
       return false;
@@ -169,6 +239,10 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         annotPopupHeight,
         popupPadding,
       );
+      if (isTextSelected.current && annotPopupPos.dir === 'down' && osPlatform === 'android') {
+        triangPos.point.y += androidSelectionHandlerHeight;
+        annotPopupPos.point.y += androidSelectionHandlerHeight;
+      }
       const dictPopupPos = getPopupPosition(
         triangPos,
         rect,
@@ -226,7 +300,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     });
 
     const { booknotes: annotations = [] } = config;
-    if (selection) navigator.clipboard.writeText(selection.text);
+    if (selection) navigator.clipboard?.writeText(selection.text);
     const cfi = view?.getCFI(selection.index, selection.range);
     if (!cfi) return;
     const annotation: BookNote = {
@@ -360,14 +434,6 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   return (
     <div>
-      {(showAnnotPopup || showWiktionaryPopup || showWikipediaPopup || showDeepLPopup) &&
-        (!isNotebookVisible || isNotebookPinned) && (
-          <div
-            className='fixed inset-0'
-            onClick={handleDismissPopupAndSelection}
-            onContextMenu={handleDismissPopup}
-          />
-        )}
       {showWiktionaryPopup && trianglePosition && dictPopupPosition && (
         <WiktionaryPopup
           word={selection?.text as string}

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

@@ -25,7 +25,9 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
   const globalReadSettings = settings.globalReadSettings;
   const [selectedStyle, setSelectedStyle] = React.useState<HighlightStyle>(_selectedStyle);
   const [selectedColor, setSelectedColor] = React.useState<HighlightColor>(_selectedColor);
-  const iconSize16 = useResponsiveSize(16);
+  const size16 = useResponsiveSize(16);
+  const size18 = useResponsiveSize(18);
+  const size28 = useResponsiveSize(28);
 
   const handleSelectStyle = (style: HighlightStyle) => {
     globalReadSettings.highlightStyle = style;
@@ -42,18 +44,19 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
     onHandleHighlight(true);
   };
   return (
-    <div className='highlight-options absolute flex h-7 items-center justify-between' style={style}>
-      <div className='flex h-7 gap-2'>
+    <div className='highlight-options absolute flex items-center justify-between' style={style}>
+      <div className='flex gap-2' style={{ height: size28 }}>
         {styles.map((style) => (
           <button
             key={style}
             onClick={() => handleSelectStyle(style)}
-            className={`flex h-7 min-h-7 w-7 items-center justify-center rounded-full bg-gray-700 p-0`}
+            className={`flex items-center justify-center rounded-full bg-gray-700 p-0`}
+            style={{ width: size28, height: size28, minHeight: size28 }}
           >
             <div
+              style={{ width: size16, height: style === 'squiggly' ? size18 : size16 }}
               className={clsx(
                 'w-4 p-0 text-center leading-none',
-                style === 'highlight' ? 'h-4' : 'h-5',
                 style === 'highlight' &&
                   (selectedStyle === 'highlight' ? `bg-${selectedColor}-400` : `bg-gray-300`),
                 (style === 'underline' || style === 'squiggly') &&
@@ -74,18 +77,19 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
         ))}
       </div>
 
-      <div className='flex h-7 items-center justify-center gap-2 rounded-3xl bg-gray-700 px-2'>
+      <div
+        className='flex items-center justify-center gap-2 rounded-3xl bg-gray-700 px-2'
+        style={{ height: size28 }}
+      >
         {colors.map((color) => (
           <button
             key={color}
             onClick={() => handleSelectColor(color)}
-            className={clsx(
-              `h-4 w-4 rounded-full p-0`,
-              selectedColor !== color && `bg-${color}-400`,
-            )}
+            style={{ width: size16, height: size16 }}
+            className={clsx(`rounded-full p-0`, selectedColor !== color && `bg-${color}-400`)}
           >
             {selectedColor === color && (
-              <FaCheckCircle size={iconSize16} className={clsx(`fill-${color}-400`)} />
+              <FaCheckCircle size={size16} className={clsx(`fill-${color}-400`)} />
             )}
           </button>
         ))}

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

@@ -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={{

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

@@ -34,7 +34,7 @@ const DialogMenu: React.FC<DialogMenuProps> = ({ toggleDropdown }) => {
           <div
             className='lg:tooltip'
             data-tip={
-              isFontLayoutSettingsGlobal ? _('Apply to all books') : _('Apply to this book')
+              isFontLayoutSettingsGlobal ? _('Apply to All Books') : _('Apply to This Book')
             }
           >
             <span className='ml-2'>{_('Global Settings')}</span>

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

@@ -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,33 +25,39 @@ 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-0 z-[1] mt-4 w-44 shadow'
+        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>
         ))}
         {moreOptions && moreOptions.length > 0 && (
           <li className='dropdown dropdown-left dropdown-top'>
             <div className='flex items-center px-0'>
-              <span style={{ minWidth: `${iconSize16}px` }}>
+              <span style={{ minWidth: `${defaultIconSize}px` }}>
                 <FiChevronLeft size={iconSize16} />
               </span>
               <span>{_('System Fonts')}</span>
@@ -60,17 +66,17 @@ const FontDropdown: React.FC<DropdownProps> = ({
               tabIndex={0}
               className={clsx(
                 'dropdown-content bgcolor-base-200 menu rounded-box relative z-[1] overflow-y-scroll shadow',
-                '!mr-5 mb-[-46px] inline max-h-80 w-[220px] overflow-y-scroll',
+                '!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>

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

@@ -4,6 +4,8 @@ import React, { useEffect, useState } from 'react';
 import NumberInput from './NumberInput';
 import FontDropdown from './FontDropDown';
 import {
+  ANDROID_FONTS,
+  IOS_FONTS,
   LINUX_FONTS,
   MACOS_FONTS,
   MONOSPACE_FONTS,
@@ -17,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;
@@ -28,8 +32,6 @@ interface FontFaceProps {
   onSelect: (option: string) => void;
 }
 
-const fontFamilyOptions = ['Serif', 'Sans-serif'];
-
 const handleFontFaceFont = (option: string, family: string) => {
   return `'${option}', ${family}`;
 };
@@ -47,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}
@@ -64,21 +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':
+      defaultSysFonts = IOS_FONTS;
+      break;
+    case 'android':
+      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!);
@@ -86,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;
@@ -120,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);
@@ -203,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'>
@@ -239,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}
             />
@@ -247,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}
             />
@@ -256,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}
             />

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

@@ -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