release: version 0.9.8 (#283)

This should fix #278 and fix #275

.editorconfig

@@ -0,0 +1,3 @@
+[*.{ts,tsx}]
+indent_style = space
+indent_size = 2

.github/ISSUE_TEMPLATE/feature-request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Share an idea or suggestion
+title: 'FR: [a handful of words describing the FR]'
+labels: enhancement
+assignees: ''
+---
+
+**Does your feature request involve difficulty completing a task? Please describe.**
+A clear and concise description of what the problem is. Ex. I think it takes too many steps to [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you'd like to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any additional context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/report-bug.md

@@ -1,7 +1,7 @@
 ---
 name: Report a bug
 about: Report a bug or a functional regression
-title: 'Ex: In DarkMode, a blank square appears in bottom right corner while scrolling'
+title: 'Example: In DarkMode, a blank square appears in bottom right corner while scrolling'
 labels: ['type: bug']
 assignees: ''
 ---
@@ -30,9 +30,15 @@ The blank square should be transparent (invisible)
 
 ## Technical inputs
 
+Operating System:
+
+Readest Version:
+
 **Example:**
 
 ```
-- We are displaying custom scrollbars that disappear when the user is not scrolling. See ScrollWrapper.
-- Probably fixable with CSS
+Operating System: macOS 14.3.1
+Readest Version: 0.9.0
+We are displaying custom scrollbars that disappear when the user is not scrolling. See ScrollWrapper.
+Probably fixable with CSS
 ```

.github/dependabot.yml

@@ -0,0 +1,13 @@
+# Keep GitHub Actions up to date with GitHub's Dependabot...
+# https://docs.github.com/en/code-security/dependabot/working-with-dependabot/keeping-your-actions-up-to-date-with-dependabot
+# https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file#package-ecosystem
+version: 2
+updates:
+  - package-ecosystem: github-actions
+    directory: /
+    groups:
+      github-actions:
+        patterns:
+          - "*"  # Group all Actions updates into a single larger pull request
+    schedule:
+      interval: weekly

.github/workflows/pull-request.yml

@@ -0,0 +1,59 @@
+name: PR checks
+on:
+  pull_request:
+    branches: [main]
+permissions:
+  contents: write
+  pull-requests: write
+jobs:
+  rust_lint:
+    runs-on: ubuntu-latest
+    env:
+      RUSTFLAGS: '-C target-cpu=skylake'
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: 'true'
+      - name: Install minimal stable with clippy and rustfmt
+        uses: actions-rust-lang/setup-rust-toolchain@v1
+        with:
+          toolchain: stable
+          override: true
+      - name: Install system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libglib2.0-dev libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev libsoup-3.0-dev
+      - name: Format
+        working-directory: apps/readest-app/src-tauri
+        run: cargo fmt --check
+      - name: Clippy Check
+        working-directory: apps/readest-app/src-tauri
+        run: cargo clippy -- -D warnings
+
+  build_web_app:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: 'true'
+
+      - name: setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.15.1
+
+      - name: setup node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: install Dependencies
+        working-directory: apps/readest-app
+        run: |
+          pnpm install && pnpm setup-pdfjs
+
+      - name: build the web App
+        working-directory: apps/readest-app
+        run: |
+          pnpm build-web

.github/workflows/release.yml

@@ -6,52 +6,76 @@ on:
     types: [published]
 
 jobs:
-  create-release:
+  get-release:
     permissions:
       contents: write
     runs-on: ubuntu-latest
     outputs:
-      release_id: ${{ steps.create-release.outputs.result }}
+      release_id: ${{ steps.get-release.outputs.release_id }}
+      release_tag: ${{ steps.get-release.outputs.release_tag }}
+      release_note: ${{ steps.get-release-notes.outputs.release_note }}
+      release_version: ${{ steps.get-release-notes.outputs.release_version }}
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
       - name: get version
         run: echo "PACKAGE_VERSION=$(node -p "require('./apps/readest-app/package.json').version")" >> $GITHUB_ENV
-      - name: create release
-        id: create-release
-        uses: actions/github-script@v6
+      - name: get release
+        id: get-release
+        uses: actions/github-script@v7
         with:
           script: |
             const { data } = await github.rest.repos.getLatestRelease({
               owner: context.repo.owner,
               repo: context.repo.repo,
             })
-            return data.id
+            core.setOutput('release_id', data.id);
+            core.setOutput('release_tag', data.tag_name);
+      - name: get release notes
+        id: get-release-notes
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const fs = require('fs');
+            const version = require('./apps/readest-app/package.json').version;
+            const releaseNotesFileContent = fs.readFileSync('./apps/readest-app/release-notes.json', 'utf8');
+            const releaseNotes = JSON.parse(releaseNotesFileContent).releases[version] || {};
+            const notes = releaseNotes.notes || [];
+            const releaseNote = notes.map((note, index) => `${index + 1}. ${note}`).join(' ');
+            console.log('Formatted release note:', releaseNote);
+            core.setOutput('release_version', version);
+            core.setOutput('release_note', releaseNote);
 
   build-tauri:
-    needs: create-release
+    needs: get-release
     permissions:
       contents: write
     strategy:
       fail-fast: false
       matrix:
         config:
-          - os: ubuntu-latest
+          - os: ubuntu-22.04
             arch: x86_64
             rust_target: x86_64-unknown-linux-gnu
           - os: macos-latest
             arch: aarch64
             rust_target: x86_64-apple-darwin,aarch64-apple-darwin
+            args: '--target universal-apple-darwin'
           - os: windows-latest
             arch: x86_64
             rust_target: x86_64-pc-windows-msvc
+            args: '--target x86_64-pc-windows-msvc'
+          - os: windows-latest
+            arch: aarch64
+            rust_target: aarch64-pc-windows-msvc
+            args: '--target aarch64-pc-windows-msvc --bundles nsis'
 
     runs-on: ${{ matrix.config.os }}
-    timeout-minutes: 30
+    timeout-minutes: 20
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: initialize git submodules
         run: git submodule update --init --recursive
@@ -62,14 +86,11 @@ jobs:
           version: 9.14.4
 
       - name: setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: pnpm
 
-      - name: install rimraf
-        run: npm install -g rimraf
-
       - name: install dependencies
         run: pnpm install
 
@@ -83,24 +104,21 @@ jobs:
 
       - uses: Swatinem/rust-cache@v2
         with:
-          key: ${{ matrix.config.os }}-cargo-${{ hashFiles('apps/readest-app/src-tauri/Cargo.lock') }}
-          workspaces: apps/readest-app/src-tauri -> target
+          key: ${{ matrix.config.os }}-cargo-${{ hashFiles('Cargo.lock') }}
 
       - name: create .env.local file for Next.js
         run: |
           echo "NEXT_PUBLIC_POSTHOG_KEY=${{ secrets.NEXT_PUBLIC_POSTHOG_KEY }}" >> .env.local
           echo "NEXT_PUBLIC_POSTHOG_HOST=${{ secrets.NEXT_PUBLIC_POSTHOG_HOST }}" >> .env.local
-          echo "NEXT_PUBLIC_DEEPL_API_KEY=${{ secrets.NEXT_PUBLIC_DEEPL_API_KEY }}" >> .env.local
+          echo "NEXT_PUBLIC_SUPABASE_URL=${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}" >> .env.local
+          echo "NEXT_PUBLIC_SUPABASE_ANON_KEY=${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}" >> .env.local
           echo "NEXT_PUBLIC_APP_PLATFORM=tauri" >> .env.local
 
       - name: copy .env.local to apps/readest-app
         run: cp .env.local apps/readest-app/.env.local
 
-      - name: fix dynamic route for Next.js, see https://github.com/vercel/next.js/discussions/55393
-        run: rimraf "apps/readest-app/src/app/reader/[ids]"
-
       - name: install dependencies (ubuntu only)
-        if: matrix.config.os == 'ubuntu-latest'
+        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
@@ -118,27 +136,67 @@ jobs:
           APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
         with:
           projectPath: apps/readest-app
-          releaseId: ${{ needs.create-release.outputs.release_id }}
-          args: ${{ matrix.config.os == 'macos-latest' && '--target universal-apple-darwin' || '' }}
+          releaseId: ${{ needs.get-release.outputs.release_id }}
+          releaseBody: ${{ needs.get-release.outputs.release_note }}
+          args: ${{ matrix.config.args || '' }}
 
-  publish-release:
+      - name: upload portable binaries (Windows only)
+        if: matrix.config.os == 'windows-latest'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        shell: bash
+        run: |
+          echo "Uploading Portable Binaries"
+          arch=${{ matrix.config.arch }}
+          version=${{ needs.get-release.outputs.release_version }}
+
+          if [ "$arch" = "x86_64" ]; then
+            bin_file="Readest_${version}_x64-portable.exe"
+          elif [ "$arch" = "aarch64" ]; then
+            bin_file="Readest_${version}_arm64-portable.exe"
+          else
+            echo "Unknown architecture: $arch"
+            exit 1
+          fi
+
+          exe_file="target/${{ matrix.config.rust_target }}/release/readest.exe"
+          # Browsers on Windows won't download zip files that contain exe files
+          # so upload the exe files instead. This is totally stupid.
+          # powershell.exe -Command "Compress-Archive -Path $exe_file -DestinationPath $bin_file -Force"
+          cp $exe_file $bin_file
+
+          echo "Uploading $bin_file to GitHub release"
+          gh release upload ${{ needs.get-release.outputs.release_tag }} $bin_file --clobber
+
+  update-release:
     permissions:
       contents: write
     runs-on: ubuntu-latest
-    needs: [create-release, build-tauri]
+    needs: [get-release, build-tauri]
 
     steps:
-      - name: publish release
-        id: publish-release
-        uses: actions/github-script@v6
+      - name: update release
+        id: update-release
+        uses: actions/github-script@v7
         env:
-          release_id: ${{ needs.create-release.outputs.release_id }}
+          release_id: ${{ needs.get-release.outputs.release_id }}
+          release_tag: ${{ needs.get-release.outputs.release_tag }}
+          release_note: ${{ needs.get-release.outputs.release_note }}
         with:
           script: |
+            const { data } = await github.rest.repos.generateReleaseNotes({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              tag_name: process.env.release_tag,
+            })
+            const notes = process.env.release_note.split(/(?:\d\.\s)/).filter(Boolean);
+            const formattedNotes = notes.map(note => `* ${note.trim()}`).join("\n");
+            const body = `## Release Highlight\n${formattedNotes}\n\n${data.body}`;
             github.rest.repos.updateRelease({
               owner: context.repo.owner,
               repo: context.repo.repo,
               release_id: process.env.release_id,
+              body: body,
               draft: false,
               prerelease: false
             })

.github/workflows/vercel-merge.yml

@@ -0,0 +1,23 @@
+name: Deploy to vercel on merge
+on:
+  push:
+    branches:
+      - main
+permissions:
+  contents: write
+  deployments: write
+  pull-requests: write
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: 'true'
+      - uses: amondnet/vercel-action@v25
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          vercel-args: '--prod'
+          vercel-org-id: ${{ secrets.ORG_ID}}
+          vercel-project-id: ${{ secrets.PROJECT_ID}}

.gitignore

@@ -35,3 +35,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Rust build
+target

CONTRIBUTING.md

@@ -33,7 +33,7 @@ To get started with Readest, follow these steps to clone and build the project.
 #### 1. Clone the Repository
 
 ```bash
-git clone https://github.com/chrox/readest.git
+git clone https://github.com/readest/readest.git
 cd readest
 git submodule update --init --recursive
 ```
@@ -75,13 +75,20 @@ 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 |
 | `pnpm build-web` | Builds the web app                                 |
 
+Recommended Visual Studio Code plugins for development:
+
+- JavaScript and TypeScript Nightly (ms-vscode.vscode-typescript-next)
+- VS Code ESLint extension (dbaeumer.vscode-eslint)
+- Prettier - Code formatter (esbenp.prettier-vscode)
+- rust-analyzer (rust-lang.rust-analyzer) (for Tauri development only)
+
 ### When you're done
 
 Check that your code follows the project's style guidelines by running:

Cargo.toml

@@ -0,0 +1,3 @@
+[workspace]
+members = ["apps/readest-app/src-tauri"]
+resolver = "2"

README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <a href="https://readest.com?utm_source=github&utm_medium=referral&utm_campaign=readme" target="_blank">
-    <img src="https://github.com/chrox/readest/blob/main/apps/readest-app/src-tauri/icons/icon.png?raw=true" alt="Readest Logo" width="20%" />
+    <img src="https://github.com/readest/readest/blob/main/apps/readest-app/src-tauri/icons/icon.png?raw=true" alt="Readest Logo" width="20%" />
   </a>
   <h1>Readest</h1>
   <br>
@@ -39,38 +39,38 @@
 
 <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.               | ✅         |
+| **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
 
 <div align="left">🛠 Building</div>
 <div align="left">🔄 Planned</div>
 
-| **Feature**                      | **Description**                                                                            | **Priority** |
-| -------------------------------- | ------------------------------------------------------------------------------------------ | ------------ |
-| **Support iOS and Android**      | Expand the APP to work on iOS and Android devices.                                         | 🛠           |
-| **Sync Across Platforms**        | Synchronize reading progress, notes, and bookmarks across all supported platforms.         | 🛠           |
-| **Sync with Koreader**           | Synchronize reading progress, notes, and bookmarks with [Koreader][link-koreader] devices. | 🔄           |
-| **Keyboard Navigation**          | Implement vimium-style keybindings for book navigation.                                    | 🔄           |
-| **Library Management**           | Organize, sort, and manage your entire ebook library.                                      | 🔄           |
-| **Support OPDS/Calibre**         | Integrate OPDS/Calibre to access online libraries and catalogs.                            | 🔄           |
-| **Text-to-Speech (TTS) Support** | Enable text-to-speech functionality for a more accessible reading experience.              | 🔄           |
-| **Audiobook Support**            | Extend functionality to play and manage audiobooks.                                        | 🔄           |
-| **Handwriting Annotations**      | Add support for handwriting annotations using a pen on compatible devices.                 | 🔄           |
-| **Advanced Reading Stats**       | Track reading time, pages read, and more for detailed insights.                            | 🔄           |
-| **In-Library Full-Text Search**  | Search across your entire ebook library to find topics and quotes.                         | 🔄           |
-| **AI-Powered Summarization**     | Generate summaries of books or chapters using AI for quick insights.                       | 🔄           |
+| **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. | 🔄           |
+| **Keyboard Navigation**         | Implement vimium-style keybindings for book navigation.                                    | 🔄           |
+| **Support OPDS/Calibre**        | Integrate OPDS/Calibre to access online libraries and catalogs.                            | 🔄           |
+| **Audiobook Support**           | Extend functionality to play and manage audiobooks.                                        | 🔄           |
+| **Handwriting Annotations**     | Add support for handwriting annotations using a pen on compatible devices.                 | 🔄           |
+| **Advanced Reading Stats**      | Track reading time, pages read, and more for detailed insights.                            | 🔄           |
+| **In-Library Full-Text Search** | Search across your entire ebook library to find topics and quotes.                         | 🔄           |
 
 Stay tuned for continuous improvements and updates! Contributions and suggestions are always welcome—let's build the ultimate reading experience together. 😊
 
@@ -80,11 +80,13 @@ Stay tuned for continuous improvements and updates! Contributions and suggestion
 
 ![DeepL](./data/screenshots/deepl.png)
 
+![TTS](./data/screenshots/tts_control.png)
+
 ![Footnote](./data/screenshots/footnote_popover.png)
 
 ![Wikipedia](./data/screenshots/wikipedia_vertical.png)
 
-![Dark Mode](./data/screenshots/dark_mode.png)
+![Themeing Dark Mode](./data/screenshots/theming_dark_mode.png)
 
 ---
 
@@ -118,7 +120,7 @@ To get started with Readest, follow these steps to clone and build the project.
 ### 1. Clone the Repository
 
 ```bash
-git clone https://github.com/chrox/readest.git
+git clone https://github.com/readest/readest.git
 cd readest
 git submodule update --init --recursive
 ```
@@ -150,19 +152,40 @@ For Windows targets, “Build Tools for Visual Studio 2022” (or a higher editi
 pnpm tauri dev
 ```
 
+For iOS:
+
+```bash
+pnpm tauri ios dev
+```
+
 ### 5. Build for Production
 
 ```bash
 pnpm tauri build
 ```
 
+### 6. Setup dev environment with Nix
+
+If you have Nix installed, you can leverage flake to enter a development shell
+with all the necessary dependencies:
+
+```bash
+nix develop ./ops  # enter a dev shell for the web app
+nix develop ./ops#ios # enter a dev shell for the ios app
+nix develop ./ops#android # enter a dev shell for the android app
+```
+
+### 7. More information
+
+Please check the [wiki][link-gh-wiki] of this project for more information on development.
+
 ## Contributors
 
 Readest is open-source, and contributions are welcome! Feel free to open issues, suggest features, or submit pull requests. Please **review our [contributing guidelines](CONTRIBUTING.md) before you start**. We also welcome you to join our [Discord][link-discord] community for either support or contributing guidance.
 
-<a href="https://github.com/chrox/readest/graphs/contributors">
+<a href="https://github.com/readest/readest/graphs/contributors">
   <p align="left">
-    <img width="50" src="https://contrib.rocks/image?repo=chrox/readest" alt="A table of avatars from the project's contributors" />
+    <img width="300" src="https://contrib.rocks/image?repo=readest/readest" alt="A table of avatars from the project's contributors" />
   </p>
 </a>
 
@@ -170,12 +193,20 @@ 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 JavaScript libraries are bundled in this software:
+The following libraries and software 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.
 - [fflate](https://github.com/101arrowz/fflate), which is MIT licensed.
 - [PDF.js](https://github.com/mozilla/pdf.js), which is licensed under Apache License 2.0.
+- [next.js](https://github.com/vercel/next.js), which is MIT licensed.
+- [react](https://github.com/facebook/react), which is MIT licensed.
+- [react-icons](https://github.com/react-icons/react-icons), which has various open-source licenses.
+- [tauri](https://github.com/tauri-apps/tauri), which is MIT licensed.
+
+The following fonts are utilized in this software, either bundled within the application or provided through web fonts:
+
+[Bitter](https://fonts.google.com/?query=Bitter), [Fira Code](https://fonts.google.com/?query=Fira+Code), [Literata](https://fonts.google.com/?query=Literata), [Merriweather](https://fonts.google.com/?query=Merriweather), [Noto Sans](https://fonts.google.com/?query=Noto+Sans), [Roboto](https://fonts.google.com/?query=Roboto), [LXGW WenKai](https://github.com/lxgw/LxgwWenKai), [MiSans](https://hyperos.mi.com/font/en/), [Source Han](https://github.com/adobe-fonts/source-han-sans/), [WenQuanYi Micro Hei](http://wenq.org/wqy2/)
 
 ---
 
@@ -183,18 +214,19 @@ The following JavaScript libraries are bundled in this software:
 
 [badge-website]: https://img.shields.io/badge/website-readest.com-orange
 [badge-web-app]: https://img.shields.io/badge/read%20online-web.readest.com-orange
-[badge-license]: https://img.shields.io/github/license/chrox/readest?color=teal
-[badge-release]: https://img.shields.io/github/release/chrox/readest?color=green
-[badge-platforms]: https://img.shields.io/badge/OS-macOS%2C%20Windows%2C%20Linux%2C%20Web-green
-[badge-last-commit]: https://img.shields.io/github/last-commit/chrox/readest?color=green
-[badge-commit-activity]: https://img.shields.io/github/commit-activity/m/chrox/readest
+[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/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
 [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
-[link-gh-releases]: https://github.com/chrox/readest/releases
-[link-gh-commits]: https://github.com/chrox/readest/commits/main
-[link-gh-pulse]: https://github.com/chrox/readest/pulse
-[link-discord]: https://discord.gg/jb2nzDts
+[link-gh-releases]: https://github.com/readest/readest/releases
+[link-gh-commits]: https://github.com/readest/readest/commits/main
+[link-gh-pulse]: https://github.com/readest/readest/pulse
+[link-gh-wiki]: https://github.com/readest/readest/wiki
+[link-discord]: https://discord.gg/gntyVNk3BJ
 [link-parallel-read]: https://readest.com/#parallel-read
 [link-koreader]: https://github.com/koreader/koreader

apps/readest-app/.env

@@ -1,3 +1,6 @@
 PDFJS_BUILD_PATH=../../packages/foliate-js/node_modules/pdfjs-dist/legacy/build
 PDFJS_FONTS_PATH=../../packages/foliate-js/node_modules/pdfjs-dist
 PDFJS_STYLE_PATH=../../packages/foliate-js/vendor/pdfjs
+
+NEXT_PUBLIC_DEV_SUPABASE_URL=https://gxkhxxxeapexynpouyjz.supabase.co
+NEXT_PUBLIC_DEV_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imd4a2h4eHhlYXBleHlucG91eWp6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzQ0MzAwNTksImV4cCI6MjA1MDAwNjA1OX0.jhinkQsimQoidsg_U59YD5ROw4PmMJQNKuyXbr4TiQA

apps/readest-app/.env.local.example

@@ -0,0 +1,8 @@
+NEXT_PUBLIC_POSTHOG_KEY=YOUR_POSTHOG_KEY
+NEXT_PUBLIC_POSTHOG_HOST=YOUR_POSTHOG_HOST
+
+NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
+NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
+
+DEEPL_PRO_API_KEY=YOUR_DEEPL_PRO_API_KEY
+DEEPL_FREE_API_KEY=YOUR_DEEPL_FREE_API_KEY

apps/readest-app/.gitignore

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

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

@@ -0,0 +1,49 @@
+module.exports = {
+  input: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.test.{js,jsx,ts,tsx}'],
+  output: '.',
+  options: {
+    debug: false,
+    sort: false,
+    func: {
+      list: ['_'],
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    },
+    lngs: [
+      'de',
+      'ja',
+      'es',
+      'fr',
+      'it',
+      'el',
+      'ko',
+      'uk',
+      'pl',
+      'pt',
+      'ru',
+      'tr',
+      'hi',
+      'id',
+      'vi',
+      'zh-CN',
+      'zh-TW',
+    ],
+    ns: ['translation'],
+    defaultNs: 'translation',
+    defaultValue: '__STRING_NOT_TRANSLATED__',
+    resource: {
+      loadPath: './public/locales/{{lng}}/{{ns}}.json',
+      savePath: './public/locales/{{lng}}/{{ns}}.json',
+      jsonIndent: 2,
+      lineEnding: '\n',
+    },
+    keySeparator: false,
+    nsSeparator: false,
+    interpolation: {
+      prefix: '{{',
+      suffix: '}}',
+    },
+    metadata: {},
+    allowDynamicKeys: true,
+    removeUnusedKeys: true,
+  },
+};

apps/readest-app/next.config.mjs

@@ -1,13 +1,13 @@
-/** @type {import('next').NextConfig} */
-const isProd = process.env.NODE_ENV === 'production';
+import withPWAInit from '@ducanh2912/next-pwa';
 
-const internalHost = process.env.TAURI_DEV_HOST || 'localhost';
+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: process.env['NEXT_PUBLIC_APP_PLATFORM'] === '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: {
@@ -17,16 +17,23 @@ 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 rewrites() {
-    return [
-      {
-        source: '/api/deepl/:path*',
-        destination: 'https://api-free.deepl.com/v2/:path*',
-      },
-    ];
-  },
 };
 
-export default nextConfig;
+const withPWA = withPWAInit({
+  dest: 'public',
+  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.8.3",
+  "version": "0.9.7",
   "private": true,
   "scripts": {
     "dev": "dotenv -e .env.tauri -- next dev",
@@ -9,13 +9,14 @@
     "dev-web": "dotenv -e .env.web -- next dev",
     "build-web": "dotenv -e .env.web -- next build",
     "start-web": "dotenv -e .env.web -- next start",
+    "i18n:extract": "i18next-scanner",
     "lint": "next lint",
     "tauri": "tauri",
     "prepare-public-vendor": "mkdirp ./public/vendor/pdfjs",
-    "copy-pdfjs-js": "dotenv -- cross-var cpx \"%PDFJS_BUILD_PATH%/pdf*\" ./public/vendor/pdfjs",
-    "copy-pdfjs-fonts": "dotenv -- cross-var cpx \"%PDFJS_FONTS_PATH%/{cmaps,standard_fonts}/*\" ./public/vendor/pdfjs",
-    "copy-flatten-pdfjs-annotation-layer-css": "dotenv -- cross-var npx postcss \"%PDFJS_STYLE_PATH%/annotation_layer_builder.css\" --no-map -u postcss-nested > ./public/vendor/pdfjs/annotation_layer_builder.css",
-    "copy-flatten-pdfjs-text-layer-css": "dotenv -- cross-var npx postcss \"%PDFJS_STYLE_PATH%/text_layer_builder.css\" --no-map -u postcss-nested > ./public/vendor/pdfjs/text_layer_builder.css",
+    "copy-pdfjs-js": "cpx \"../../packages/foliate-js/node_modules/pdfjs-dist/legacy/build/{pdf.worker.min.mjs,pdf.mjs,pdf.d.mts}\" ./public/vendor/pdfjs",
+    "copy-pdfjs-fonts": "cpx \"../../packages/foliate-js/node_modules/pdfjs-dist/{cmaps,standard_fonts}/*\" ./public/vendor/pdfjs",
+    "copy-flatten-pdfjs-annotation-layer-css": "npx postcss \"../../packages/foliate-js/vendor/pdfjs/annotation_layer_builder.css\" --no-map -u postcss-nested > ./public/vendor/pdfjs/annotation_layer_builder.css",
+    "copy-flatten-pdfjs-text-layer-css": "npx postcss \"../../packages/foliate-js/vendor/pdfjs/text_layer_builder.css\" --no-map -u postcss-nested > ./public/vendor/pdfjs/text_layer_builder.css",
     "copy-flatten-pdfjs-css": "pnpm copy-flatten-pdfjs-annotation-layer-css && pnpm copy-flatten-pdfjs-text-layer-css",
     "copy-pdfjs": "pnpm copy-pdfjs-js && pnpm copy-pdfjs-fonts && pnpm copy-flatten-pdfjs-css",
     "setup-pdfjs": "pnpm prepare-public-vendor && pnpm copy-pdfjs",
@@ -28,50 +29,67 @@
     "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/plugin-cli": "^2.0.0",
-    "@tauri-apps/plugin-dialog": "^2.0.1",
-    "@tauri-apps/plugin-fs": "^2.0.3",
-    "@tauri-apps/plugin-http": "^2.0.1",
-    "@tauri-apps/plugin-log": "^2.0.1",
-    "@tauri-apps/plugin-os": "^2.0.0",
-    "@tauri-apps/plugin-process": "^2.0.0",
-    "@tauri-apps/plugin-shell": "~2.0.1",
-    "@tauri-apps/plugin-updater": "^2.0.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-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",
     "@zip.js/zip.js": "^2.7.53",
     "clsx": "^2.1.1",
+    "cors": "^2.8.5",
     "cssbeautify": "^0.3.1",
-    "epubjs": "^0.3.93",
     "foliate-js": "workspace:*",
+    "i18next": "^24.2.0",
+    "i18next-browser-languagedetector": "^8.0.2",
+    "i18next-http-backend": "^3.0.1",
     "js-md5": "^0.8.3",
-    "next": "15.0.3",
-    "posthog-js": "^1.194.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-icons": "^5.3.0",
+    "jwt-decode": "^4.0.0",
+    "next": "15.1.0",
+    "posthog-js": "^1.205.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-i18next": "^15.2.0",
+    "react-icons": "^5.4.0",
+    "react-responsive": "^10.0.0",
     "tinycolor2": "^1.6.0",
     "zustand": "5.0.1"
   },
   "devDependencies": {
     "@tauri-apps/cli": "2.1.0",
+    "@types/cors": "^2.8.17",
     "@types/cssbeautify": "^0.3.5",
     "@types/node": "^22.10.1",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1",
     "@types/tinycolor2": "^1.4.6",
     "autoprefixer": "^10.4.20",
-    "cpx": "^1.5.0",
-    "cross-var": "^1.1.0",
-    "daisyui": "^4.12.14",
+    "cpx2": "^8.0.0",
+    "daisyui": "^4.12.23",
     "dotenv-cli": "^7.4.4",
     "eslint": "^9.16.0",
     "eslint-config-next": "15.0.3",
+    "i18next-scanner": "^4.6.0",
     "mkdirp": "^3.0.1",
+    "node-env-run": "^4.0.2",
     "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
     "postcss-nested": "^7.0.2",
     "raw-loader": "^4.0.2",
-    "tailwindcss": "^3.4.15",
+    "tailwindcss": "^3.4.17",
     "typescript": "^5.7.2"
   }
 }

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(erkannt)",
+  "About Readest": "Über Readest",
+  "Add your notes here...": "Fügen Sie hier Ihre Notizen hinzu...",
+  "Animation": "Animation",
+  "Annotate": "Annotieren",
+  "Apply": "Anwenden",
+  "Are you sure to delete the selected books?": "Möchten Sie die ausgewählten Bücher wirklich löschen?",
+  "Auto Mode": "Automatischer Modus",
+  "Behavior": "Verhalten",
+  "Book": "Buch",
+  "Book Cover": "Buchcover",
+  "Bookmark": "Lesezeichen",
+  "Cancel": "Abbrechen",
+  "Chapter": "Kapitel",
+  "Cherry": "Kirschrot",
+  "Color": "Farbe",
+  "Confirm": "Bestätigen",
+  "Confirm Deletion": "Löschen bestätigen",
+  "Copied to notebook": "In Notizbuch kopiert",
+  "Copy": "Kopieren",
+  "Custom CSS": "Benutzerdefiniertes CSS",
+  "Dark Mode": "Dunkelmodus",
+  "Default": "Standard",
+  "Default Font": "Standardschriftart",
+  "Default Font Size": "Standard-Schriftgröße",
+  "Delete": "Löschen",
+  "Delete Highlight": "Hervorhebung löschen",
+  "Dictionary": "Wörterbuch",
+  "Disable Click-to-Flip": "Klick zum Blättern deaktivieren",
+  "Download Readest": "Readest herunterladen",
+  "Edit": "Bearbeiten",
+  "Enter your custom CSS here...": "Geben Sie hier Ihr benutzerdefiniertes CSS ein...",
+  "Excerpts": "Auszüge",
+  "Failed to import book(s): {{filenames}}": "Fehler beim Importieren von Buch/Büchern: {{filenames}}",
+  "Fast": "Schnell",
+  "Font": "Schriftart",
+  "Font & Layout": "Schrift & Layout",
+  "Font Face": "Schriftschnitt",
+  "Font Family": "Schriftfamilie",
+  "Font Size": "Schriftgröße",
+  "Full Justification": "Blocksatz",
+  "Global Settings": "Globale Einstellungen",
+  "Go Back": "Zurück",
+  "Go Forward": "Vorwärts",
+  "Go Left": "Nach links",
+  "Go Right": "Nach rechts",
+  "Grass": "Grasgrün",
+  "Gray": "Grau",
+  "Gruvbox": "Gruvbox",
+  "Highlight": "Hervorheben",
+  "Horizontal Direction": "Horizontale Richtung",
+  "Hyphenation": "Silbentrennung",
+  "Identifier:": "Kennung:",
+  "Import Books": "Bücher importieren",
+  "Invert Colors in Dark Mode": "Farben im Dunkelmodus invertieren",
+  "Language:": "Sprache:",
+  "Layout": "Layout",
+  "Light Mode": "Hellmodus",
+  "Line Height": "Zeilenhöhe",
+  "Loading...": "Wird geladen...",
+  "Loc. {{currentPage}} / {{totalPage}}": "Pos. {{currentPage}} / {{totalPage}}",
+  "Logged in": "Angemeldet",
+  "Logged in as {{userDisplayName}}": "Angemeldet als {{userDisplayName}}",
+  "Match Case": "Groß-/Kleinschreibung beachten",
+  "Match Diacritics": "Akzente beachten",
+  "Match Whole Words": "Ganze Wörter",
+  "Maximum Block Size": "Maximale Blockgröße",
+  "Maximum Inline Size": "Maximale Zeilengröße",
+  "Maximum Number of Columns": "Maximale Spaltenanzahl",
+  "Minimum Font Size": "Minimale Schriftgröße",
+  "Misc": "Sonstiges",
+  "Monospace Font": "Monospace-Schriftart",
+  "More Info": "Weitere Informationen",
+  "Nord": "Nord",
+  "Notebook": "Notizbuch",
+  "Notes": "Notizen",
+  "Open": "Öffnen",
+  "Open Book": "Buch öffnen",
+  "Original Text": "Originaltext",
+  "Page": "Seite",
+  "Paging Animation": "Blätter-Animation",
+  "Paragraph": "Absatz",
+  "Parallel Read": "Paralleles Lesen",
+  "Published:": "Veröffentlicht:",
+  "Publisher:": "Verlag:",
+  "Reading Progress Synced": "Lesevorgang synchronisiert",
+  "Reload Page": "Seite neu laden",
+  "Reveal in File Explorer": "Im Datei-Explorer anzeigen",
+  "Reveal in Finder": "Im Finder anzeigen",
+  "Reveal in Folder": "Im Ordner anzeigen",
+  "Sans-Serif Font": "Serifenlose Schriftart",
+  "Save": "Speichern",
+  "Scrolled Mode": "Scroll-Modus",
+  "Search": "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",
+  "Sepia": "Sepia",
+  "Serif Font": "Serifenschrift",
+  "Show Book Details": "Buchdetails anzeigen",
+  "Sidebar": "Seitenleiste",
+  "Sign In": "Anmelden",
+  "Sign Out": "Abmelden",
+  "Sky": "Himmelblau",
+  "Slow": "Langsam",
+  "Solarized": "Solarisiert",
+  "Speak": "Sprechen",
+  "Subjects:": "Themen:",
+  "System Fonts": "System-Schriftarten",
+  "TTS not supported in this device": "TTS wird auf diesem Gerät nicht unterstützt",
+  "Theme Color": "Themenfarbe",
+  "Theme Mode": "Themenmodus",
+  "Translate": "Übersetzen",
+  "Translated Text": "Übersetzter Text",
+  "Unknown": "Unbekannt",
+  "Untitled": "Ohne Titel",
+  "Updated:": "Aktualisiert:",
+  "User avatar": "Benutzer-Avatar",
+  "Version {{version}}": "Version {{version}}",
+  "Vertical Direction": "Vertikale Richtung",
+  "Welcome to your library. You can import your books here and read them anytime.": "Willkommen in Ihrer Bibliothek. Sie können hier Ihre Bücher importieren und jederzeit lesen.",
+  "Wikipedia": "Wikipedia",
+  "Writing Mode": "Schreibmodus",
+  "Your Library": "Ihre Bibliothek",
+  "TTS not supported for PDF": "TTS wird für PDF nicht unterstützt",
+  "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",
+  "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",
+  "Already the latest version": "Bereits die neueste Version",
+  "Book Details": "Buchdetails",
+  "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"
+}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(εντοπίστηκε)",
+  "About Readest": "Σχετικά με το Readest",
+  "Add your notes here...": "Προσθέστε τις σημειώσεις σας εδώ...",
+  "Animation": "Κινούμενα σχέδια",
+  "Annotate": "Σχολιασμός",
+  "Apply": "Εφαρμογή",
+  "Are you sure to delete the selected books?": "Είστε βέβαιοι ότι θέλετε να διαγράψετε τα επιλεγμένα βιβλία;",
+  "Auto Mode": "Αυτόματη λειτουργία",
+  "Behavior": "Συμπεριφορά",
+  "Book": "Βιβλίο",
+  "Book Cover": "Εξώφυλλο βιβλίου",
+  "Bookmark": "Σελιδοδείκτης",
+  "Cancel": "Ακύρωση",
+  "Chapter": "Κεφάλαιο",
+  "Cherry": "Κερασί",
+  "Color": "Χρώμα",
+  "Confirm": "Επιβεβαίωση",
+  "Confirm Deletion": "Επιβεβαίωση διαγραφής",
+  "Copied to notebook": "Αντιγράφηκε στο σημειωματάριο",
+  "Copy": "Αντιγραφή",
+  "Custom CSS": "Προσαρμοσμένο CSS",
+  "Dark Mode": "Σκοτεινή λειτουργία",
+  "Default": "Προεπιλογή",
+  "Default Font": "Προεπιλεγμένη γραμματοσειρά",
+  "Default Font Size": "Προεπιλεγμένο μέγεθος γραμματοσειράς",
+  "Delete": "Διαγραφή",
+  "Delete Highlight": "Διαγραφή επισήμανσης",
+  "Dictionary": "Λεξικό",
+  "Disable Click-to-Flip": "Απενεργοποίηση κλικ για γύρισμα σελίδας",
+  "Download Readest": "Λήψη Readest",
+  "Edit": "Επεξεργασία",
+  "Enter your custom CSS here...": "Εισάγετε το προσαρμοσμένο CSS εδώ...",
+  "Excerpts": "Αποσπάσματα",
+  "Failed to import book(s): {{filenames}}": "Αποτυχία εισαγωγής βιβλίου(ων): {{filenames}}",
+  "Fast": "Γρήγορα",
+  "Font": "Γραμματοσειρά",
+  "Font & Layout": "Γραμματοσειρά & Διάταξη",
+  "Font Face": "Τύπος γραμματοσειράς",
+  "Font Family": "Οικογένεια γραμματοσειράς",
+  "Font Size": "Μέγεθος γραμματοσειράς",
+  "Full Justification": "Πλήρης στοίχιση",
+  "Global Settings": "Γενικές ρυθμίσεις",
+  "Go Back": "Πίσω",
+  "Go Forward": "Μπροστά",
+  "Go Left": "Αριστερά",
+  "Go Right": "Δεξιά",
+  "Grass": "Γρασίδι",
+  "Gray": "Γκρι",
+  "Gruvbox": "Gruvbox",
+  "Highlight": "Επισήμανση",
+  "Horizontal Direction": "Οριζόντια κατεύθυνση",
+  "Hyphenation": "Συλλαβισμός",
+  "Identifier:": "Αναγνωριστικό:",
+  "Import Books": "Εισαγωγή βιβλίων",
+  "Invert Colors in Dark Mode": "Αντιστροφή χρωμάτων στη σκοτεινή λειτουργία",
+  "Language:": "Γλώσσα:",
+  "Layout": "Διάταξη",
+  "Light Mode": "Φωτεινή λειτουργία",
+  "Line Height": "Ύψος γραμμής",
+  "Loading...": "Φόρτωση...",
+  "Loc. {{currentPage}} / {{totalPage}}": "Θέση {{currentPage}} / {{totalPage}}",
+  "Logged in": "Συνδεδεμένος",
+  "Logged in as {{userDisplayName}}": "Συνδεδεμένος ως {{userDisplayName}}",
+  "Match Case": "Ταίριασμα πεζών-κεφαλαίων",
+  "Match Diacritics": "Ταίριασμα διακριτικών σημείων",
+  "Match Whole Words": "Ταίριασμα ολόκληρων λέξεων",
+  "Maximum Block Size": "Μέγιστο μέγεθος μπλοκ",
+  "Maximum Inline Size": "Μέγιστο μέγεθος γραμμής",
+  "Maximum Number of Columns": "Μέγιστος αριθμός στηλών",
+  "Minimum Font Size": "Ελάχιστο μέγεθος γραμματοσειράς",
+  "Misc": "Διάφορα",
+  "Monospace Font": "Γραμματοσειρά σταθερού πλάτους",
+  "More Info": "Περισσότερες πληροφορίες",
+  "Nord": "Nord",
+  "Notebook": "Σημειωματάριο",
+  "Notes": "Σημειώσεις",
+  "Open": "Άνοιγμα",
+  "Open Book": "Άνοιγμα βιβλίου",
+  "Original Text": "Αρχικό κείμενο",
+  "Page": "Σελίδα",
+  "Paging Animation": "Κινούμενα σχέδια σελιδοποίησης",
+  "Paragraph": "Παράγραφος",
+  "Parallel Read": "Παράλληλη ανάγνωση",
+  "Published:": "Δημοσιεύτηκε:",
+  "Publisher:": "Εκδότης:",
+  "Reading Progress Synced": "Ο συγχρονισμός προόδου ανάγνωσης ολοκληρώθηκε",
+  "Reload Page": "Επαναφόρτωση σελίδας",
+  "Reveal in File Explorer": "Εμφάνιση στον εξερευνητή αρχείων",
+  "Reveal in Finder": "Εμφάνιση στον Finder",
+  "Reveal in Folder": "Εμφάνιση στο φάκελο",
+  "Sans-Serif Font": "Γραμματοσειρά Sans-Serif",
+  "Save": "Αποθήκευση",
+  "Scrolled Mode": "Λειτουργία κύλισης",
+  "Search": "Αναζήτηση",
+  "Search Books...": "Αναζήτηση βιβλίων...",
+  "Search...": "Αναζήτηση...",
+  "Select Book": "Επιλογή βιβλίου",
+  "Select Books": "Επιλογή βιβλίων",
+  "Select Multiple Books": "Επιλογή πολλαπλών βιβλίων",
+  "Sepia": "Σέπια",
+  "Serif Font": "Γραμματοσειρά Serif",
+  "Show Book Details": "Εμφάνιση λεπτομερειών βιβλίου",
+  "Sidebar": "Πλευρική γραμμή",
+  "Sign In": "Σύνδεση",
+  "Sign Out": "Αποσύνδεση",
+  "Sky": "Ουρανός",
+  "Slow": "Αργά",
+  "Solarized": "Solarized",
+  "Speak": "Ομιλία",
+  "Subjects:": "Θέματα:",
+  "System Fonts": "Γραμματοσειρές συστήματος",
+  "TTS not supported in this device": "Η μετατροπή κειμένου σε ομιλία δεν υποστηρίζεται σε αυτή τη συσκευή",
+  "Theme Color": "Χρώμα θέματος",
+  "Theme Mode": "Λειτουργία θέματος",
+  "Translate": "Μετάφραση",
+  "Translated Text": "Μεταφρασμένο κείμενο",
+  "Unknown": "Άγνωστο",
+  "Untitled": "Χωρίς τίτλο",
+  "Updated:": "Ενημερώθηκε:",
+  "User avatar": "Εικόνα χρήστη",
+  "Version {{version}}": "Έκδοση {{version}}",
+  "Vertical Direction": "Κάθετη κατεύθυνση",
+  "Welcome to your library. You can import your books here and read them anytime.": "Καλώς ήρθατε στη βιβλιοθήκη σας. Μπορείτε να εισάγετε τα βιβλία σας εδώ και να τα διαβάσετε οποιαδήποτε στιγμή.",
+  "Wikipedia": "Βικιπαίδεια",
+  "Writing Mode": "Λειτουργία γραφής",
+  "Your Library": "Η βιβλιοθήκη σας",
+  "TTS not supported for PDF": "Η μετατροπή κειμένου σε ομιλία δεν υποστηρίζεται για αρχεία PDF",
+  "Override Book Font": "Παράκαμψη γραμματοσειράς βιβλίου",
+  "Vertical Margins (px)": "Κάθετα περιθώρια (px)",
+  "Horizontal Margins (%)": "Οριζόντια περιθώρια (%)",
+  "Apply to All Books": "Εφαρμογή σε όλα τα βιβλία",
+  "Apply to This Book": "Εφαρμογή σε αυτό το βιβλίο",
+  "Unable to fetch the translation. Try again later.": "Αδυναμία λήψης της μετάφρασης. Δοκιμάστε ξανά αργότερα.",
+  "Update Now!": "Ενημέρωση τώρα!",
+  "Update": "Ενημέρωση",
+  "Check Update": "Έλεγχος ενημέρωσης",
+  "Already the latest version": "Ήδη η τελευταία έκδοση",
+  "Book Details": "Λεπτομέρειες βιβλίου",
+  "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": "Έλεγχος ενημερώσεων κατά την εκκίνηση"
+}

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

@@ -0,0 +1 @@
+{}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(detectado)",
+  "About Readest": "Acerca de Readest",
+  "Add your notes here...": "Añade tus notas aquí...",
+  "Animation": "Animación",
+  "Annotate": "Anotar",
+  "Apply": "Aplicar",
+  "Are you sure to delete the selected books?": "¿Estás seguro de eliminar los libros seleccionados?",
+  "Auto Mode": "Modo automático",
+  "Behavior": "Comportamiento",
+  "Book": "Libro",
+  "Book Cover": "Portada del libro",
+  "Bookmark": "Marcador",
+  "Cancel": "Cancelar",
+  "Chapter": "Capítulo",
+  "Cherry": "Cereza",
+  "Color": "Color",
+  "Confirm": "Confirmar",
+  "Confirm Deletion": "Confirmar eliminación",
+  "Copied to notebook": "Copiado al cuaderno",
+  "Copy": "Copiar",
+  "Custom CSS": "CSS personalizado",
+  "Dark Mode": "Modo oscuro",
+  "Default": "Predeterminado",
+  "Default Font": "Fuente predeterminada",
+  "Default Font Size": "Tamaño de fuente predeterminado",
+  "Delete": "Eliminar",
+  "Delete Highlight": "Eliminar resaltado",
+  "Dictionary": "Diccionario",
+  "Disable Click-to-Flip": "Desactivar clic para voltear",
+  "Download Readest": "Descargar Readest",
+  "Edit": "Editar",
+  "Enter your custom CSS here...": "Introduce tu CSS personalizado aquí...",
+  "Excerpts": "Extractos",
+  "Failed to import book(s): {{filenames}}": "Error al importar libro(s): {{filenames}}",
+  "Fast": "Rápido",
+  "Font": "Fuente",
+  "Font & Layout": "Fuente y diseño",
+  "Font Face": "Tipo de fuente",
+  "Font Family": "Familia de fuente",
+  "Font Size": "Tamaño de fuente",
+  "Full Justification": "Justificación completa",
+  "Global Settings": "Configuración global",
+  "Go Back": "Volver",
+  "Go Forward": "Avanzar",
+  "Go Left": "Ir a la izquierda",
+  "Go Right": "Ir a la derecha",
+  "Grass": "Hierba",
+  "Gray": "Gris",
+  "Gruvbox": "Gruvbox",
+  "Highlight": "Resaltar",
+  "Horizontal Direction": "Dirección horizontal",
+  "Hyphenation": "Guionización",
+  "Identifier:": "Identificador:",
+  "Import Books": "Importar libros",
+  "Invert Colors in Dark Mode": "Invertir colores en modo oscuro",
+  "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",
+  "Logged in as {{userDisplayName}}": "Sesión iniciada como {{userDisplayName}}",
+  "Match Case": "Coincidir mayúsculas y minúsculas",
+  "Match Diacritics": "Coincidir diacríticos",
+  "Match Whole Words": "Coincidir palabras completas",
+  "Maximum Block Size": "Tamaño máximo de bloque",
+  "Maximum Inline Size": "Tamaño máximo en línea",
+  "Maximum Number of Columns": "Número máximo de columnas",
+  "Minimum Font Size": "Tamaño de fuente mínimo",
+  "Misc": "Varios",
+  "Monospace Font": "Fuente monoespaciada",
+  "More Info": "Más información",
+  "Nord": "Nord",
+  "Notebook": "Cuaderno",
+  "Notes": "Notas",
+  "Open": "Abrir",
+  "Open Book": "Abrir libro",
+  "Original Text": "Texto original",
+  "Page": "Página",
+  "Paging Animation": "Animación de paginación",
+  "Paragraph": "Párrafo",
+  "Parallel Read": "Lectura paralela",
+  "Published:": "Publicado:",
+  "Publisher:": "Editorial:",
+  "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",
+  "Reveal in Folder": "Mostrar en carpeta",
+  "Sans-Serif Font": "Fuente sans-serif",
+  "Save": "Guardar",
+  "Scrolled Mode": "Modo desplazamiento",
+  "Search": "Buscar",
+  "Search Books...": "Buscar libros...",
+  "Search...": "Buscar...",
+  "Select Book": "Seleccionar libro",
+  "Select Books": "Seleccionar libros",
+  "Select Multiple Books": "Seleccionar varios libros",
+  "Sepia": "Sepia",
+  "Serif Font": "Fuente serif",
+  "Show Book Details": "Mostrar detalles del libro",
+  "Sidebar": "Barra lateral",
+  "Sign In": "Iniciar sesión",
+  "Sign Out": "Cerrar sesión",
+  "Sky": "Cielo",
+  "Slow": "Lento",
+  "Solarized": "Solarizado",
+  "Speak": "Leer",
+  "Subjects:": "Temas:",
+  "System Fonts": "Fuentes del sistema",
+  "TTS not supported in this device": "TTS no es compatible con este dispositivo",
+  "Theme Color": "Color del tema",
+  "Theme Mode": "Modo del tema",
+  "Translate": "Traducir",
+  "Translated Text": "Texto traducido",
+  "Unknown": "Desconocido",
+  "Untitled": "Sin título",
+  "Updated:": "Actualizado:",
+  "User avatar": "Avatar del usuario",
+  "Version {{version}}": "Versión {{version}}",
+  "Vertical Direction": "Dirección vertical",
+  "Welcome to your library. You can import your books here and read them anytime.": "Bienvenido a tu biblioteca. Puedes importar tus libros aquí y leerlos en cualquier momento.",
+  "Wikipedia": "Wikipedia",
+  "Writing Mode": "Modo de escritura",
+  "Your Library": "Tu biblioteca",
+  "TTS not supported for PDF": "TTS no es compatible con PDF",
+  "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",
+  "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",
+  "Already the latest version": "Ya es la última versión",
+  "Book Details": "Detalles del libro",
+  "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"
+}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(détecté)",
+  "About Readest": "À propos de Readest",
+  "Add your notes here...": "Ajoutez vos notes ici...",
+  "Animation": "Animation",
+  "Annotate": "Annoter",
+  "Apply": "Appliquer",
+  "Are you sure to delete the selected books?": "Êtes-vous sûr de vouloir supprimer les livres sélectionnés ?",
+  "Auto Mode": "Mode automatique",
+  "Behavior": "Comportement",
+  "Book": "Livre",
+  "Book Cover": "Couverture du livre",
+  "Bookmark": "Signet",
+  "Cancel": "Annuler",
+  "Chapter": "Chapitre",
+  "Cherry": "Cerise",
+  "Color": "Couleur",
+  "Confirm": "Confirmer",
+  "Confirm Deletion": "Confirmer la suppression",
+  "Copied to notebook": "Copié dans le carnet de notes",
+  "Copy": "Copier",
+  "Custom CSS": "CSS personnalisé",
+  "Dark Mode": "Mode sombre",
+  "Default": "Par défaut",
+  "Default Font": "Police par défaut",
+  "Default Font Size": "Taille de police par défaut",
+  "Delete": "Supprimer",
+  "Delete Highlight": "Supprimer le surlignage",
+  "Dictionary": "Dictionnaire",
+  "Disable Click-to-Flip": "Désactiver le clic pour tourner",
+  "Download Readest": "Télécharger Readest",
+  "Edit": "Modifier",
+  "Enter your custom CSS here...": "Saisissez votre CSS personnalisé ici...",
+  "Excerpts": "Extraits",
+  "Failed to import book(s): {{filenames}}": "Échec de l'importation du/des livre(s) : {{filenames}}",
+  "Fast": "Rapide",
+  "Font": "Police",
+  "Font & Layout": "Police et mise en page",
+  "Font Face": "Style de police",
+  "Font Family": "Famille de police",
+  "Font Size": "Taille de police",
+  "Full Justification": "Justification complète",
+  "Global Settings": "Paramètres globaux",
+  "Go Back": "Retour",
+  "Go Forward": "Avancer",
+  "Go Left": "Aller à gauche",
+  "Go Right": "Aller à droite",
+  "Grass": "Herbe",
+  "Gray": "Gris",
+  "Gruvbox": "Gruvbox",
+  "Highlight": "Surligner",
+  "Horizontal Direction": "Direction horizontale",
+  "Hyphenation": "Césure",
+  "Identifier:": "Identifiant :",
+  "Import Books": "Importer des livres",
+  "Invert Colors in Dark Mode": "Inverser les couleurs en mode sombre",
+  "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é",
+  "Logged in as {{userDisplayName}}": "Connecté en tant que {{userDisplayName}}",
+  "Match Case": "Respecter la casse",
+  "Match Diacritics": "Respecter les accents",
+  "Match Whole Words": "Mots entiers",
+  "Maximum Block Size": "Taille maximale du bloc",
+  "Maximum Inline Size": "Taille maximale en ligne",
+  "Maximum Number of Columns": "Nombre maximal de colonnes",
+  "Minimum Font Size": "Taille minimale de police",
+  "Misc": "Divers",
+  "Monospace Font": "Police monospace",
+  "More Info": "Plus d'informations",
+  "Nord": "Nord",
+  "Notebook": "Carnet de notes",
+  "Notes": "Notes",
+  "Open": "Ouvrir",
+  "Open Book": "Ouvrir le livre",
+  "Original Text": "Texte original",
+  "Page": "Page",
+  "Paging Animation": "Animation de page",
+  "Paragraph": "Paragraphe",
+  "Parallel Read": "Lecture parallèle",
+  "Published:": "Publié :",
+  "Publisher:": "Éditeur :",
+  "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",
+  "Reveal in Folder": "Afficher dans le dossier",
+  "Sans-Serif Font": "Police sans empattement",
+  "Save": "Enregistrer",
+  "Scrolled Mode": "Mode défilement",
+  "Search": "Rechercher",
+  "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",
+  "Sepia": "Sépia",
+  "Serif Font": "Police avec empattement",
+  "Show Book Details": "Afficher les détails du livre",
+  "Sidebar": "Barre latérale",
+  "Sign In": "Se connecter",
+  "Sign Out": "Se déconnecter",
+  "Sky": "Ciel",
+  "Slow": "Lent",
+  "Solarized": "Solarisé",
+  "Speak": "Lire",
+  "Subjects:": "Sujets :",
+  "System Fonts": "Polices système",
+  "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",
+  "Translate": "Traduire",
+  "Translated Text": "Texte traduit",
+  "Unknown": "Inconnu",
+  "Untitled": "Sans titre",
+  "Updated:": "Mis à jour :",
+  "User avatar": "Avatar de l'utilisateur",
+  "Version {{version}}": "Version {{version}}",
+  "Vertical Direction": "Direction verticale",
+  "Welcome to your library. You can import your books here and read them anytime.": "Bienvenue dans votre bibliothèque. Vous pouvez importer vos livres ici et les lire à tout moment.",
+  "Wikipedia": "Wikipédia",
+  "Writing Mode": "Mode écriture",
+  "Your Library": "Votre bibliothèque",
+  "TTS not supported for PDF": "La synthèse vocale n'est pas prise en charge pour les fichiers PDF",
+  "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",
+  "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",
+  "Already the latest version": "Déjà la dernière version",
+  "Book Details": "Détails du livre",
+  "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"
+}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(पता लगाया)",
+  "About Readest": "Readest के बारे में",
+  "Add your notes here...": "अपनी टिप्पणियां यहां जोड़ें...",
+  "Animation": "एनीमेशन",
+  "Annotate": "टिप्पणी",
+  "Apply": "लागू करें",
+  "Are you sure to delete the selected books?": "क्या आप चयनित पुस्तकों को हटाना चाहते हैं?",
+  "Auto Mode": "स्वचालित मोड",
+  "Behavior": "व्यवहार",
+  "Book": "पुस्तक",
+  "Book Cover": "पुस्तक का कवर",
+  "Bookmark": "बुकमार्क",
+  "Cancel": "रद्द करें",
+  "Chapter": "अध्याय",
+  "Cherry": "चेरी",
+  "Color": "रंग",
+  "Confirm": "पुष्टि करें",
+  "Confirm Deletion": "हटाने की पुष्टि करें",
+  "Copied to notebook": "नोटबुक में कॉपी किया गया",
+  "Copy": "कॉपी",
+  "Custom CSS": "कस्टम CSS",
+  "Dark Mode": "डार्क मोड",
+  "Default": "डिफ़ॉल्ट",
+  "Default Font": "डिफ़ॉल्ट फ़ॉन्ट",
+  "Default Font Size": "डिफ़ॉल्ट फ़ॉन्ट साइज़",
+  "Delete": "हटाएं",
+  "Delete Highlight": "हाइलाइट हटाएं",
+  "Dictionary": "शब्दकोश",
+  "Disable Click-to-Flip": "क्लिक-टू-फ्लिप अक्षम करें",
+  "Download Readest": "Readest डाउनलोड करें",
+  "Edit": "संपादित करें",
+  "Enter your custom CSS here...": "अपना कस्टम CSS यहां दर्ज करें...",
+  "Excerpts": "अंश",
+  "Failed to import book(s): {{filenames}}": "पुस्तक(ें) आयात करने में विफल: {{filenames}}",
+  "Fast": "तेज़",
+  "Font": "फ़ॉन्ट",
+  "Font & Layout": "फ़ॉन्ट और लेआउट",
+  "Font Face": "फ़ॉन्ट फेस",
+  "Font Family": "फ़ॉन्ट परिवार",
+  "Font Size": "फ़ॉन्ट साइज़",
+  "Full Justification": "पूर्ण जस्टिफिकेशन",
+  "Global Settings": "वैश्विक सेटिंग्स",
+  "Go Back": "वापस जाएं",
+  "Go Forward": "आगे जाएं",
+  "Go Left": "बाएं जाएं",
+  "Go Right": "दाएं जाएं",
+  "Grass": "घास",
+  "Gray": "ग्रे",
+  "Gruvbox": "ग्रूवबॉक्स",
+  "Highlight": "हाइलाइट",
+  "Horizontal Direction": "क्षैतिज दिशा",
+  "Hyphenation": "हाइफ़नेशन",
+  "Identifier:": "पहचानकर्ता:",
+  "Import Books": "पुस्तकें आयात करें",
+  "Invert Colors in Dark Mode": "डार्क मोड में रंग उलटें",
+  "Language:": "भाषा:",
+  "Layout": "लेआउट",
+  "Light Mode": "लाइट मोड",
+  "Line Height": "लाइन हाइट",
+  "Loading...": "लोड हो रहा है...",
+  "Loc. {{currentPage}} / {{totalPage}}": "स्थान {{currentPage}} / {{totalPage}}",
+  "Logged in": "लॉग इन किया",
+  "Logged in as {{userDisplayName}}": "{{userDisplayName}} के रूप में लॉग इन किया",
+  "Match Case": "केस मैच करें",
+  "Match Diacritics": "डायाक्रिटिक्स मैच करें",
+  "Match Whole Words": "पूरे शब्द मैच करें",
+  "Maximum Block Size": "अधिकतम ब्लॉक साइज़",
+  "Maximum Inline Size": "अधिकतम इनलाइन साइज़",
+  "Maximum Number of Columns": "कॉलम की अधिकतम संख्या",
+  "Minimum Font Size": "न्यूनतम फ़ॉन्ट साइज़",
+  "Misc": "विविध",
+  "Monospace Font": "मोनोस्पेस फ़ॉन्ट",
+  "More Info": "अधिक जानकारी",
+  "Nord": "नॉर्ड",
+  "Notebook": "नोटबुक",
+  "Notes": "नोट्स",
+  "Open": "खोलें",
+  "Open Book": "पुस्तक खोलें",
+  "Original Text": "मूल पाठ",
+  "Page": "पृष्ठ",
+  "Paging Animation": "पेजिंग एनीमेशन",
+  "Paragraph": "पैराग्राफ",
+  "Parallel Read": "समानांतर पढ़ें",
+  "Published:": "प्रकाशित:",
+  "Publisher:": "प्रकाशक:",
+  "Reading Progress Synced": "पढ़ने की प्रगति सिंक की गई",
+  "Reload Page": "पृष्ठ रीलोड करें",
+  "Reveal in File Explorer": "फ़ाइल एक्सप्लोरर में दिखाएं",
+  "Reveal in Finder": "फाइंडर में दिखाएं",
+  "Reveal in Folder": "फ़ोल्डर में दिखाएं",
+  "Sans-Serif Font": "सैन्स-सेरिफ फ़ॉन्ट",
+  "Save": "सहेजें",
+  "Scrolled Mode": "स्क्रॉल मोड",
+  "Search": "खोजें",
+  "Search Books...": "पुस्तकें खोजें...",
+  "Search...": "खोजें...",
+  "Select Book": "पुस्तक चुनें",
+  "Select Books": "पुस्तकें चुनें",
+  "Select Multiple Books": "कई पुस्तकें चुनें",
+  "Sepia": "सेपिया",
+  "Serif Font": "सेरिफ फ़ॉन्ट",
+  "Show Book Details": "पुस्तक विवरण दिखाएं",
+  "Sidebar": "साइडबार",
+  "Sign In": "साइन इन करें",
+  "Sign Out": "साइन आउट करें",
+  "Sky": "आकाश",
+  "Slow": "धीमा",
+  "Solarized": "सोलराइज्ड",
+  "Speak": "बोलें",
+  "Subjects:": "विषय:",
+  "System Fonts": "सिस्टम फ़ॉन्ट्स",
+  "TTS not supported in this device": "यह डिवाइस TTS का समर्थन नहीं करता",
+  "Theme Color": "थीम रंग",
+  "Theme Mode": "थीम मोड",
+  "Translate": "अनुवाद करें",
+  "Translated Text": "अनुवादित पाठ",
+  "Unknown": "अज्ञात",
+  "Untitled": "शीर्षकहीन",
+  "Updated:": "अपडेट किया गया:",
+  "User avatar": "उपयोगकर्ता अवतार",
+  "Version {{version}}": "संस्करण {{version}}",
+  "Vertical Direction": "ऊर्ध्वाधर दिशा",
+  "Welcome to your library. You can import your books here and read them anytime.": "आपकी लाइब्रेरी में आपका स्वागत है। आप यहां अपनी पुस्तकें आयात कर सकते हैं और कभी भी पढ़ सकते हैं।",
+  "Wikipedia": "विकिपीडिया",
+  "Writing Mode": "लेखन मोड",
+  "Your Library": "आपकी लाइब्रेरी",
+  "TTS not supported for PDF": "PDF के लिए TTS समर्थित नहीं है",
+  "Override Book Font": "पुस्तक फ़ॉन्ट ओवरराइड करें",
+  "Vertical Margins (px)": "ऊर्ध्वाधर मार्जिन (px)",
+  "Horizontal Margins (%)": "क्षैतिज मार्जिन (%)",
+  "Apply to All Books": "सभी पुस्तकों पर लागू करें",
+  "Apply to This Book": "इस पुस्तक पर लागू करें",
+  "Unable to fetch the translation. Try again later.": "अनुवाद प्राप्त करने में असमर्थ। बाद में पुनः प्रयास करें।",
+  "Update Now!": "अभी अपडेट करें!",
+  "Update": "अपडेट करें",
+  "Check Update": "अपडेट जांचें",
+  "Already the latest version": "पहले से ही नवीनतम संस्करण",
+  "Book Details": "पुस्तक विवरण",
+  "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": "शुरू में अपडेट जांचें"
+}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(terdeteksi)",
+  "About Readest": "Tentang Readest",
+  "Add your notes here...": "Tambahkan catatan Anda di sini...",
+  "Animation": "Animasi",
+  "Annotate": "Anotasi",
+  "Apply": "Terapkan",
+  "Are you sure to delete the selected books?": "Apakah Anda yakin ingin menghapus buku yang dipilih?",
+  "Auto Mode": "Mode Otomatis",
+  "Behavior": "Perilaku",
+  "Book": "Buku",
+  "Book Cover": "Sampul Buku",
+  "Bookmark": "Penanda",
+  "Cancel": "Batal",
+  "Chapter": "Bab",
+  "Cherry": "Ceri",
+  "Color": "Warna",
+  "Confirm": "Konfirmasi",
+  "Confirm Deletion": "Konfirmasi Penghapusan",
+  "Copied to notebook": "Disalin ke buku catatan",
+  "Copy": "Salin",
+  "Custom CSS": "CSS Kustom",
+  "Dark Mode": "Mode Gelap",
+  "Default": "Default",
+  "Default Font": "Font Default",
+  "Default Font Size": "Ukuran Font Default",
+  "Delete": "Hapus",
+  "Delete Highlight": "Hapus Sorotan",
+  "Dictionary": "Kamus",
+  "Disable Click-to-Flip": "Nonaktifkan Klik untuk Membalik",
+  "Download Readest": "Unduh Readest",
+  "Edit": "Edit",
+  "Enter your custom CSS here...": "Masukkan CSS kustom Anda di sini...",
+  "Excerpts": "Kutipan",
+  "Failed to import book(s): {{filenames}}": "Gagal mengimpor buku: {{filenames}}",
+  "Fast": "Cepat",
+  "Font": "Font",
+  "Font & Layout": "Font & Tata Letak",
+  "Font Face": "Jenis Font",
+  "Font Family": "Keluarga Font",
+  "Font Size": "Ukuran Font",
+  "Full Justification": "Rata Penuh",
+  "Global Settings": "Pengaturan Global",
+  "Go Back": "Kembali",
+  "Go Forward": "Maju",
+  "Go Left": "Ke Kiri",
+  "Go Right": "Ke Kanan",
+  "Grass": "Rumput",
+  "Gray": "Abu-abu",
+  "Gruvbox": "Gruvbox",
+  "Highlight": "Sorot",
+  "Horizontal Direction": "Arah Horizontal",
+  "Hyphenation": "Pemenggalan Kata",
+  "Identifier:": "Pengenal:",
+  "Import Books": "Impor Buku",
+  "Invert Colors in Dark Mode": "Balik Warna di Mode Gelap",
+  "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",
+  "Logged in as {{userDisplayName}}": "Masuk sebagai {{userDisplayName}}",
+  "Match Case": "Cocokkan Huruf Besar/Kecil",
+  "Match Diacritics": "Cocokkan Diakritik",
+  "Match Whole Words": "Cocokkan Kata Utuh",
+  "Maximum Block Size": "Ukuran Blok Maksimum",
+  "Maximum Inline Size": "Ukuran Sebaris Maksimum",
+  "Maximum Number of Columns": "Jumlah Kolom Maksimum",
+  "Minimum Font Size": "Ukuran Font Minimum",
+  "Misc": "Lain-lain",
+  "Monospace Font": "Font Monospace",
+  "More Info": "Info Lebih Lanjut",
+  "Nord": "Nord",
+  "Notebook": "Buku Catatan",
+  "Notes": "Catatan",
+  "Open": "Buka",
+  "Open Book": "Buka Buku",
+  "Original Text": "Teks Asli",
+  "Page": "Halaman",
+  "Paging Animation": "Animasi Halaman",
+  "Paragraph": "Paragraf",
+  "Parallel Read": "Baca Paralel",
+  "Published:": "Diterbitkan:",
+  "Publisher:": "Penerbit:",
+  "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",
+  "Reveal in Folder": "Tampilkan di Folder",
+  "Sans-Serif Font": "Font Sans-Serif",
+  "Save": "Simpan",
+  "Scrolled Mode": "Mode Gulir",
+  "Search": "Cari",
+  "Search Books...": "Cari buku...",
+  "Search...": "Cari...",
+  "Select Book": "Pilih Buku",
+  "Select Books": "Pilih buku",
+  "Select Multiple Books": "Pilih beberapa buku",
+  "Sepia": "Sepia",
+  "Serif Font": "Font Serif",
+  "Show Book Details": "Tampilkan Detail Buku",
+  "Sidebar": "Bilah Samping",
+  "Sign In": "Masuk",
+  "Sign Out": "Keluar",
+  "Sky": "Langit",
+  "Slow": "Lambat",
+  "Solarized": "Solarized",
+  "Speak": "Bicara",
+  "Subjects:": "Subjek:",
+  "System Fonts": "Font Sistem",
+  "TTS not supported in this device": "TTS tidak didukung di perangkat ini",
+  "Theme Color": "Warna Tema",
+  "Theme Mode": "Mode Tema",
+  "Translate": "Terjemahkan",
+  "Translated Text": "Teks Terjemahan",
+  "Unknown": "Tidak Diketahui",
+  "Untitled": "Tanpa Judul",
+  "Updated:": "Diperbarui:",
+  "User avatar": "Avatar Pengguna",
+  "Version {{version}}": "Versi {{version}}",
+  "Vertical Direction": "Arah Vertikal",
+  "Welcome to your library. You can import your books here and read them anytime.": "Selamat datang di perpustakaan Anda. Anda dapat mengimpor buku-buku Anda di sini dan membacanya kapan saja.",
+  "Wikipedia": "Wikipedia",
+  "Writing Mode": "Mode Menulis",
+  "Your Library": "Perpustakaan Anda",
+  "TTS not supported for PDF": "TTS tidak didukung untuk PDF",
+  "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",
+  "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",
+  "Already the latest version": "Sudah versi terbaru",
+  "Book Details": "Detail Buku",
+  "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"
+}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(rilevato)",
+  "About Readest": "Informazioni su Readest",
+  "Add your notes here...": "Aggiungi qui le tue note...",
+  "Animation": "Animazione",
+  "Annotate": "Annota",
+  "Apply": "Applica",
+  "Are you sure to delete the selected books?": "Sei sicuro di voler eliminare i libri selezionati?",
+  "Auto Mode": "Modalità automatica",
+  "Behavior": "Comportamento",
+  "Book": "Libro",
+  "Book Cover": "Copertina",
+  "Bookmark": "Segnalibro",
+  "Cancel": "Annulla",
+  "Chapter": "Capitolo",
+  "Cherry": "Ciliegia",
+  "Color": "Colore",
+  "Confirm": "Conferma",
+  "Confirm Deletion": "Conferma eliminazione",
+  "Copied to notebook": "Copiato nel quaderno",
+  "Copy": "Copia",
+  "Custom CSS": "CSS personalizzato",
+  "Dark Mode": "Modalità scura",
+  "Default": "Predefinito",
+  "Default Font": "Font predefinito",
+  "Default Font Size": "Dimensione font predefinita",
+  "Delete": "Elimina",
+  "Delete Highlight": "Elimina evidenziazione",
+  "Dictionary": "Dizionario",
+  "Disable Click-to-Flip": "Disattiva click per voltare pagina",
+  "Download Readest": "Scarica Readest",
+  "Edit": "Modifica",
+  "Enter your custom CSS here...": "Inserisci qui il tuo CSS personalizzato...",
+  "Excerpts": "Estratti",
+  "Failed to import book(s): {{filenames}}": "Impossibile importare il/i libro/i: {{filenames}}",
+  "Fast": "Veloce",
+  "Font": "Font",
+  "Font & Layout": "Font e Layout",
+  "Font Face": "Tipo di carattere",
+  "Font Family": "Famiglia di caratteri",
+  "Font Size": "Dimensione carattere",
+  "Full Justification": "Giustificazione completa",
+  "Global Settings": "Impostazioni globali",
+  "Go Back": "Indietro",
+  "Go Forward": "Avanti",
+  "Go Left": "Vai a sinistra",
+  "Go Right": "Vai a destra",
+  "Grass": "Erba",
+  "Gray": "Grigio",
+  "Gruvbox": "Gruvbox",
+  "Highlight": "Evidenzia",
+  "Horizontal Direction": "Direzione orizzontale",
+  "Hyphenation": "Sillabazione",
+  "Identifier:": "Identificatore:",
+  "Import Books": "Importa libri",
+  "Invert Colors in Dark Mode": "Inverti colori in modalità scura",
+  "Language:": "Lingua:",
+  "Layout": "Layout",
+  "Light Mode": "Modalità chiara",
+  "Line Height": "Altezza riga",
+  "Loading...": "Caricamento...",
+  "Loc. {{currentPage}} / {{totalPage}}": "Pos. {{currentPage}} / {{totalPage}}",
+  "Logged in": "Accesso effettuato",
+  "Logged in as {{userDisplayName}}": "Accesso effettuato come {{userDisplayName}}",
+  "Match Case": "Maiuscole/minuscole",
+  "Match Diacritics": "Corrispondenza diacritici",
+  "Match Whole Words": "Parole intere",
+  "Maximum Block Size": "Dimensione massima blocco",
+  "Maximum Inline Size": "Dimensione massima in linea",
+  "Maximum Number of Columns": "Numero massimo di colonne",
+  "Minimum Font Size": "Dimensione minima font",
+  "Misc": "Varie",
+  "Monospace Font": "Font monospazio",
+  "More Info": "Maggiori informazioni",
+  "Nord": "Nord",
+  "Notebook": "Quaderno",
+  "Notes": "Note",
+  "Open": "Apri",
+  "Open Book": "Apri libro",
+  "Original Text": "Testo originale",
+  "Page": "Pagina",
+  "Paging Animation": "Animazione cambio pagina",
+  "Paragraph": "Paragrafo",
+  "Parallel Read": "Lettura parallela",
+  "Published:": "Pubblicato:",
+  "Publisher:": "Editore:",
+  "Reading Progress Synced": "Progresso lettura sincronizzato",
+  "Reload Page": "Ricarica pagina",
+  "Reveal in File Explorer": "Mostra in Esplora file",
+  "Reveal in Finder": "Mostra nel Finder",
+  "Reveal in Folder": "Mostra nella cartella",
+  "Sans-Serif Font": "Font sans-serif",
+  "Save": "Salva",
+  "Scrolled Mode": "Modalità scorrimento",
+  "Search": "Cerca",
+  "Search Books...": "Cerca libri...",
+  "Search...": "Cerca...",
+  "Select Book": "Seleziona libro",
+  "Select Books": "Seleziona libri",
+  "Select Multiple Books": "Seleziona più libri",
+  "Sepia": "Seppia",
+  "Serif Font": "Font serif",
+  "Show Book Details": "Mostra dettagli libro",
+  "Sidebar": "Barra laterale",
+  "Sign In": "Accedi",
+  "Sign Out": "Esci",
+  "Sky": "Cielo",
+  "Slow": "Lento",
+  "Solarized": "Solarizzato",
+  "Speak": "Leggi",
+  "Subjects:": "Argomenti:",
+  "System Fonts": "Font di sistema",
+  "TTS not supported in this device": "TTS non supportato su questo dispositivo",
+  "Theme Color": "Colore tema",
+  "Theme Mode": "Modalità tema",
+  "Translate": "Traduci",
+  "Translated Text": "Testo tradotto",
+  "Unknown": "Sconosciuto",
+  "Untitled": "Senza titolo",
+  "Updated:": "Aggiornato:",
+  "User avatar": "Avatar utente",
+  "Version {{version}}": "Versione {{version}}",
+  "Vertical Direction": "Direzione verticale",
+  "Welcome to your library. You can import your books here and read them anytime.": "Benvenuto nella tua biblioteca. Puoi importare i tuoi libri qui e leggerli in qualsiasi momento.",
+  "Wikipedia": "Wikipedia",
+  "Writing Mode": "Modalità scrittura",
+  "Your Library": "La tua biblioteca",
+  "TTS not supported for PDF": "TTS non supportato per PDF",
+  "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",
+  "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",
+  "Already the latest version": "Già l'ultima versione",
+  "Book Details": "Dettagli libro",
+  "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"
+}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(検出)",
+  "About Readest": "Readestについて",
+  "Add your notes here...": "ここにメモを追加...",
+  "Animation": "アニメーション",
+  "Annotate": "注釈",
+  "Apply": "適用",
+  "Are you sure to delete the selected books?": "選択した書籍を削除してもよろしいですか？",
+  "Auto Mode": "自動モード",
+  "Behavior": "動作",
+  "Book": "書籍",
+  "Book Cover": "表紙",
+  "Bookmark": "ブックマーク",
+  "Cancel": "キャンセル",
+  "Chapter": "章",
+  "Cherry": "チェリー",
+  "Color": "色",
+  "Confirm": "確認",
+  "Confirm Deletion": "削除の確認",
+  "Copied to notebook": "ノートブックにコピー",
+  "Copy": "コピー",
+  "Custom CSS": "カスタムCSS",
+  "Dark Mode": "ダークモード",
+  "Default": "デフォルト",
+  "Default Font": "デフォルトフォント",
+  "Default Font Size": "デフォルトフォントサイズ",
+  "Delete": "削除",
+  "Delete Highlight": "ハイライトを削除",
+  "Dictionary": "辞書",
+  "Disable Click-to-Flip": "クリックめくりを無効化",
+  "Download Readest": "Readestをダウンロード",
+  "Edit": "編集",
+  "Enter your custom CSS here...": "ここにカスタムCSSを入力...",
+  "Excerpts": "抜粋",
+  "Failed to import book(s): {{filenames}}": "書籍のインポートに失敗しました：{{filenames}}",
+  "Fast": "高速",
+  "Font": "フォント",
+  "Font & Layout": "フォントとレイアウト",
+  "Font Face": "書体",
+  "Font Family": "フォントファミリー",
+  "Font Size": "フォントサイズ",
+  "Full Justification": "両端揃え",
+  "Global Settings": "全体設定",
+  "Go Back": "戻る",
+  "Go Forward": "進む",
+  "Go Left": "左へ",
+  "Go Right": "右へ",
+  "Grass": "グリーン",
+  "Gray": "グレー",
+  "Gruvbox": "グルーブボックス",
+  "Highlight": "ハイライト",
+  "Horizontal Direction": "横書",
+  "Hyphenation": "ハイフネーション",
+  "Identifier:": "識別子：",
+  "Import Books": "書籍をインポート",
+  "Invert Colors in Dark Mode": "ダークモードで色を反転",
+  "Language:": "言語：",
+  "Layout": "レイアウト",
+  "Light Mode": "ライトモード",
+  "Line Height": "行間",
+  "Loading...": "読み込み中...",
+  "Loc. {{currentPage}} / {{totalPage}}": "位置 {{currentPage}} / {{totalPage}}",
+  "Logged in": "ログイン済み",
+  "Logged in as {{userDisplayName}}": "{{userDisplayName}}としてログイン中",
+  "Match Case": "大文字・小文字を区別",
+  "Match Diacritics": "アクセント記号を区別",
+  "Match Whole Words": "単語全体を一致",
+  "Maximum Block Size": "最大ブロックサイズ",
+  "Maximum Inline Size": "最大インラインサイズ",
+  "Maximum Number of Columns": "最大列数",
+  "Minimum Font Size": "最小フォントサイズ",
+  "Misc": "その他",
+  "Monospace Font": "等幅フォント",
+  "More Info": "詳細情報",
+  "Nord": "ノルド",
+  "Notebook": "ノート",
+  "Notes": "メモ",
+  "Open": "開く",
+  "Open Book": "書籍を開く",
+  "Original Text": "原文",
+  "Page": "ページ",
+  "Paging Animation": "ページめくりアニメーション",
+  "Paragraph": "段落",
+  "Parallel Read": "並列読書",
+  "Published:": "出版日：",
+  "Publisher:": "出版社：",
+  "Reading Progress Synced": "読書進捗が同期されました",
+  "Reload Page": "ページを再読み込み",
+  "Reveal in File Explorer": "エクスプローラーで表示",
+  "Reveal in Finder": "Finderで表示",
+  "Reveal in Folder": "フォルダーで表示",
+  "Sans-Serif Font": "ゴシック体",
+  "Save": "保存",
+  "Scrolled Mode": "スクロールモード",
+  "Search": "検索",
+  "Search Books...": "書籍を検索...",
+  "Search...": "検索...",
+  "Select Book": "書籍を選択",
+  "Select Books": "書籍を選択",
+  "Select Multiple Books": "複数の書籍を選択",
+  "Sepia": "セピア",
+  "Serif Font": "明朝体",
+  "Show Book Details": "書籍の詳細を表示",
+  "Sidebar": "サイドバー",
+  "Sign In": "サインイン",
+  "Sign Out": "サインアウト",
+  "Sky": "スカイ",
+  "Slow": "低速",
+  "Solarized": "ソーラライズド",
+  "Speak": "読み上げ",
+  "Subjects:": "主題：",
+  "System Fonts": "システムフォント",
+  "TTS not supported in this device": "このデバイスではTTSがサポートされていません",
+  "Theme Color": "テーマカラー",
+  "Theme Mode": "テーマモード",
+  "Translate": "翻訳",
+  "Translated Text": "翻訳されたテキスト",
+  "Unknown": "不明",
+  "Untitled": "無題",
+  "Updated:": "更新日：",
+  "User avatar": "ユーザーアバター",
+  "Version {{version}}": "バージョン {{version}}",
+  "Vertical Direction": "縦書",
+  "Welcome to your library. You can import your books here and read them anytime.": "ライブラリーへようこそ。ここに書籍をインポートして、いつでも読むことができます。",
+  "Wikipedia": "ウィキペディア",
+  "Writing Mode": "書き込みモード",
+  "Your Library": "ライブラリー",
+  "TTS not supported for PDF": "PDFではTTSがサポートされていません",
+  "Override Book Font": "書籍フォントを上書き",
+  "Vertical Margins (px)": "縦マージン（px）",
+  "Horizontal Margins (%)": "横マージン（%）",
+  "Apply to All Books": "すべての書籍に適用",
+  "Apply to This Book": "この書籍に適用",
+  "Unable to fetch the translation. Try again later.": "翻訳を取得できません。後で再試行してください。",
+  "Update Now!": "今すぐ更新！",
+  "Update": "更新",
+  "Check Update": "更新を確認",
+  "Already the latest version": "すでに最新バージョン",
+  "Book Details": "書籍の詳細",
+  "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": "開始時に更新を確認"
+}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(감지됨)",
+  "About Readest": "Readest 정보",
+  "Add your notes here...": "여기에 메모를 추가하세요...",
+  "Animation": "애니메이션",
+  "Annotate": "주석",
+  "Apply": "적용",
+  "Are you sure to delete the selected books?": "선택한 책을 삭제하시겠습니까?",
+  "Auto Mode": "자동 모드",
+  "Behavior": "동작",
+  "Book": "책",
+  "Book Cover": "책 표지",
+  "Bookmark": "북마크",
+  "Cancel": "취소",
+  "Chapter": "챕터",
+  "Cherry": "벚꽃색",
+  "Color": "색상",
+  "Confirm": "확인",
+  "Confirm Deletion": "삭제 확인",
+  "Copied to notebook": "노트북에 복사됨",
+  "Copy": "복사",
+  "Custom CSS": "사용자 정의 CSS",
+  "Dark Mode": "다크 모드",
+  "Default": "기본값",
+  "Default Font": "기본 글꼴",
+  "Default Font Size": "기본 글꼴 크기",
+  "Delete": "삭제",
+  "Delete Highlight": "하이라이트 삭제",
+  "Dictionary": "사전",
+  "Disable Click-to-Flip": "클릭 넘기기 비활성화",
+  "Download Readest": "Readest 다운로드",
+  "Edit": "편집",
+  "Enter your custom CSS here...": "여기에 사용자 정의 CSS를 입력하세요...",
+  "Excerpts": "발췌",
+  "Failed to import book(s): {{filenames}}": "책 가져오기 실패: {{filenames}}",
+  "Fast": "빠름",
+  "Font": "글꼴",
+  "Font & Layout": "글꼴 및 레이아웃",
+  "Font Face": "글꼴 스타일",
+  "Font Family": "글꼴 패밀리",
+  "Font Size": "글꼴 크기",
+  "Full Justification": "양쪽 정렬",
+  "Global Settings": "전역 설정",
+  "Go Back": "뒤로",
+  "Go Forward": "앞으로",
+  "Go Left": "왼쪽으로",
+  "Go Right": "오른쪽으로",
+  "Grass": "잔디색",
+  "Gray": "회색",
+  "Gruvbox": "그러브박스",
+  "Highlight": "하이라이트",
+  "Horizontal Direction": "수평 방향",
+  "Hyphenation": "하이픈 넣기",
+  "Identifier:": "식별자:",
+  "Import Books": "책 가져오기",
+  "Invert Colors in Dark Mode": "다크 모드에서 색상 반전",
+  "Language:": "언어:",
+  "Layout": "레이아웃",
+  "Light Mode": "라이트 모드",
+  "Line Height": "줄 간격",
+  "Loading...": "로딩 중...",
+  "Loc. {{currentPage}} / {{totalPage}}": "위치 {{currentPage}} / {{totalPage}}",
+  "Logged in": "로그인됨",
+  "Logged in as {{userDisplayName}}": "{{userDisplayName}}(으)로 로그인됨",
+  "Match Case": "대소문자 구분",
+  "Match Diacritics": "발음 구별 부호 구분",
+  "Match Whole Words": "전체 단어 일치",
+  "Maximum Block Size": "최대 블록 크기",
+  "Maximum Inline Size": "최대 인라인 크기",
+  "Maximum Number of Columns": "최대 열 수",
+  "Minimum Font Size": "최소 글꼴 크기",
+  "Misc": "기타",
+  "Monospace Font": "고정폭 글꼴",
+  "More Info": "추가 정보",
+  "Nord": "노드",
+  "Notebook": "노트북",
+  "Notes": "메모",
+  "Open": "열기",
+  "Open Book": "책 열기",
+  "Original Text": "원본 텍스트",
+  "Page": "페이지",
+  "Paging Animation": "페이지 넘김 애니메이션",
+  "Paragraph": "단락",
+  "Parallel Read": "병렬 읽기",
+  "Published:": "출판일:",
+  "Publisher:": "출판사:",
+  "Reading Progress Synced": "읽기 진행 상황 동기화됨",
+  "Reload Page": "페이지 새로고침",
+  "Reveal in File Explorer": "파일 탐색기에서 표시",
+  "Reveal in Finder": "Finder에서 표시",
+  "Reveal in Folder": "폴더에서 표시",
+  "Sans-Serif Font": "산세리프체",
+  "Save": "저장",
+  "Scrolled Mode": "스크롤 모드",
+  "Search": "검색",
+  "Search Books...": "책 검색...",
+  "Search...": "검색...",
+  "Select Book": "책 선택",
+  "Select Books": "책 선택",
+  "Select Multiple Books": "여러 책 선택",
+  "Sepia": "세피아",
+  "Serif Font": "세리프체",
+  "Show Book Details": "책 세부 정보 표시",
+  "Sidebar": "사이드바",
+  "Sign In": "로그인",
+  "Sign Out": "로그아웃",
+  "Sky": "하늘색",
+  "Slow": "느림",
+  "Solarized": "솔라라이즈드",
+  "Speak": "말하기",
+  "Subjects:": "주제:",
+  "System Fonts": "시스템 글꼴",
+  "TTS not supported in this device": "이 장치에서 TTS가 지원되지 않음",
+  "Theme Color": "테마 색상",
+  "Theme Mode": "테마 모드",
+  "Translate": "번역",
+  "Translated Text": "번역된 텍스트",
+  "Unknown": "알 수 없음",
+  "Untitled": "제목 없음",
+  "Updated:": "업데이트일:",
+  "User avatar": "사용자 아바타",
+  "Version {{version}}": "버전 {{version}}",
+  "Vertical Direction": "수직 방향",
+  "Welcome to your library. You can import your books here and read them anytime.": "내 서재에 오신 것을 환영합니다. 여기에서 책을 가져와 언제든지 읽을 수 있습니다.",
+  "Wikipedia": "위키피디아",
+  "Writing Mode": "글쓰기 모드",
+  "Your Library": "내 서재",
+  "TTS not supported for PDF": "PDF에서 TTS가 지원되지 않음",
+  "Override Book Font": "책 글꼴 덮어쓰기",
+  "Vertical Margins (px)": "수직 여백 (px)",
+  "Horizontal Margins (%)": "수평 여백 (%)",
+  "Apply to All Books": "모든 책에 적용",
+  "Apply to This Book": "이 책에 적용",
+  "Unable to fetch the translation. Try again later.": "번역을 가져올 수 없습니다. 나중에 다시 시도하세요.",
+  "Update Now!": "지금 업데이트!",
+  "Update": "업데이트",
+  "Check Update": "업데이트 확인",
+  "Already the latest version": "이미 최신 버전",
+  "Book Details": "책 세부 정보",
+  "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": "시작 시 업데이트 확인"
+}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(wykryto)",
+  "About Readest": "O Readest",
+  "Add your notes here...": "Dodaj swoje notatki tutaj...",
+  "Animation": "Animacja",
+  "Annotate": "Adnotacja",
+  "Apply": "Zastosuj",
+  "Are you sure to delete the selected books?": "Czy na pewno chcesz usunąć wybrane książki?",
+  "Auto Mode": "Tryb automatyczny",
+  "Behavior": "Zachowanie",
+  "Book": "Książka",
+  "Book Cover": "Okładka książki",
+  "Bookmark": "Zakładka",
+  "Cancel": "Anuluj",
+  "Chapter": "Rozdział",
+  "Cherry": "Wiśniowy",
+  "Color": "Kolor",
+  "Confirm": "Potwierdź",
+  "Confirm Deletion": "Potwierdź usunięcie",
+  "Copied to notebook": "Skopiowano do notatnika",
+  "Copy": "Kopiuj",
+  "Custom CSS": "Własny CSS",
+  "Dark Mode": "Tryb ciemny",
+  "Default": "Domyślne",
+  "Default Font": "Domyślna czcionka",
+  "Default Font Size": "Domyślny rozmiar czcionki",
+  "Delete": "Usuń",
+  "Delete Highlight": "Usuń zaznaczenie",
+  "Dictionary": "Słownik",
+  "Disable Click-to-Flip": "Wyłącz przewracanie kliknięciem",
+  "Download Readest": "Pobierz Readest",
+  "Edit": "Edytuj",
+  "Enter your custom CSS here...": "Wprowadź własny CSS tutaj...",
+  "Excerpts": "Fragmenty",
+  "Failed to import book(s): {{filenames}}": "Nie udało się zaimportować książek: {{filenames}}",
+  "Fast": "Szybko",
+  "Font": "Czcionka",
+  "Font & Layout": "Czcionka i układ",
+  "Font Face": "Krój czcionki",
+  "Font Family": "Rodzina czcionek",
+  "Font Size": "Rozmiar czcionki",
+  "Full Justification": "Pełne justowanie",
+  "Global Settings": "Ustawienia globalne",
+  "Go Back": "Wstecz",
+  "Go Forward": "Dalej",
+  "Go Left": "W lewo",
+  "Go Right": "W prawo",
+  "Grass": "Trawiasty",
+  "Gray": "Szary",
+  "Gruvbox": "Ciepły pomarańczowy",
+  "Highlight": "Zaznacz",
+  "Horizontal Direction": "Kierunek poziomy",
+  "Hyphenation": "Dzielenie wyrazów",
+  "Identifier:": "Identyfikator:",
+  "Import Books": "Importuj książki",
+  "Invert Colors in Dark Mode": "Odwróć kolory w trybie ciemnym",
+  "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",
+  "Logged in as {{userDisplayName}}": "Zalogowano jako {{userDisplayName}}",
+  "Match Case": "Uwzględnij wielkość liter",
+  "Match Diacritics": "Uwzględnij znaki diakrytyczne",
+  "Match Whole Words": "Uwzględnij całe słowa",
+  "Maximum Block Size": "Maksymalny rozmiar bloku",
+  "Maximum Inline Size": "Maksymalny rozmiar linii",
+  "Maximum Number of Columns": "Maksymalna liczba kolumn",
+  "Minimum Font Size": "Minimalny rozmiar czcionki",
+  "Misc": "Różne",
+  "Monospace Font": "Czcionka o stałej szerokości",
+  "More Info": "Więcej informacji",
+  "Nord": "Północny",
+  "Notebook": "Notatnik",
+  "Notes": "Notatki",
+  "Open": "Otwórz",
+  "Open Book": "Otwórz książkę",
+  "Original Text": "Tekst oryginalny",
+  "Page": "Strona",
+  "Paging Animation": "Animacja przewracania stron",
+  "Paragraph": "Akapit",
+  "Parallel Read": "Czytanie równoległe",
+  "Published:": "Opublikowano:",
+  "Publisher:": "Wydawca:",
+  "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",
+  "Reveal in Folder": "Pokaż w folderze",
+  "Sans-Serif Font": "Czcionka bezszeryfowa",
+  "Save": "Zapisz",
+  "Scrolled Mode": "Tryb przewijania",
+  "Search": "Szukaj",
+  "Search Books...": "Szukaj książek...",
+  "Search...": "Szukaj...",
+  "Select Book": "Wybierz książkę",
+  "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",
+  "Sidebar": "Panel boczny",
+  "Sign In": "Zaloguj się",
+  "Sign Out": "Wyloguj się",
+  "Sky": "Niebieski",
+  "Slow": "Wolno",
+  "Solarized": "Słoneczny",
+  "Speak": "Czytaj",
+  "Subjects:": "Tematy:",
+  "System Fonts": "Czcionki systemowe",
+  "TTS not supported in this device": "TTS nie jest obsługiwane na tym urządzeniu",
+  "Theme Color": "Kolor motywu",
+  "Theme Mode": "Tryb motywu",
+  "Translate": "Tłumacz",
+  "Translated Text": "Przetłumaczony tekst",
+  "Unknown": "Nieznane",
+  "Untitled": "Bez tytułu",
+  "Updated:": "Zaktualizowano:",
+  "User avatar": "Awatar użytkownika",
+  "Version {{version}}": "Wersja {{version}}",
+  "Vertical Direction": "Kierunek pionowy",
+  "Welcome to your library. You can import your books here and read them anytime.": "Witaj w swojej bibliotece. Możesz tutaj zaimportować swoje książki i czytać je w dowolnym momencie.",
+  "Wikipedia": "Wikipedia",
+  "Writing Mode": "Tryb pisania",
+  "Your Library": "Twoja biblioteka",
+  "TTS not supported for PDF": "TTS nie jest obsługiwane dla plików PDF",
+  "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",
+  "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ę",
+  "Already the latest version": "Już najnowsza wersja",
+  "Book Details": "Szczegóły książki",
+  "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"
+}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(detectado)",
+  "About Readest": "Sobre o Readest",
+  "Add your notes here...": "Adicione suas notas aqui...",
+  "Animation": "Animação",
+  "Annotate": "Anotar",
+  "Apply": "Aplicar",
+  "Are you sure to delete the selected books?": "Tem certeza de que deseja excluir os livros selecionados?",
+  "Auto Mode": "Modo Automático",
+  "Behavior": "Comportamento",
+  "Book": "Livro",
+  "Book Cover": "Capa do Livro",
+  "Bookmark": "Marcador",
+  "Cancel": "Cancelar",
+  "Chapter": "Capítulo",
+  "Cherry": "Cereja",
+  "Color": "Cor",
+  "Confirm": "Confirmar",
+  "Confirm Deletion": "Confirmar Exclusão",
+  "Copied to notebook": "Copiado para o caderno",
+  "Copy": "Copiar",
+  "Custom CSS": "CSS Personalizado",
+  "Dark Mode": "Modo Escuro",
+  "Default": "Padrão",
+  "Default Font": "Fonte Padrão",
+  "Default Font Size": "Tamanho da Fonte Padrão",
+  "Delete": "Excluir",
+  "Delete Highlight": "Excluir Destaque",
+  "Dictionary": "Dicionário",
+  "Disable Click-to-Flip": "Desativar Clique para Virar",
+  "Download Readest": "Baixar Readest",
+  "Edit": "Editar",
+  "Enter your custom CSS here...": "Insira seu CSS personalizado aqui...",
+  "Excerpts": "Trechos",
+  "Failed to import book(s): {{filenames}}": "Falha ao importar livro(s): {{filenames}}",
+  "Fast": "Rápido",
+  "Font": "Fonte",
+  "Font & Layout": "Fonte e Layout",
+  "Font Face": "Estilo da Fonte",
+  "Font Family": "Família da Fonte",
+  "Font Size": "Tamanho da Fonte",
+  "Full Justification": "Justificação Completa",
+  "Global Settings": "Configurações Globais",
+  "Go Back": "Voltar",
+  "Go Forward": "Avançar",
+  "Go Left": "Ir para Esquerda",
+  "Go Right": "Ir para Direita",
+  "Grass": "Grama",
+  "Gray": "Cinza",
+  "Gruvbox": "Gruvbox",
+  "Highlight": "Destaque",
+  "Horizontal Direction": "Direção Horizontal",
+  "Hyphenation": "Hifenização",
+  "Identifier:": "Identificador:",
+  "Import Books": "Importar Livros",
+  "Invert Colors in Dark Mode": "Inverter Cores no Modo Escuro",
+  "Language:": "Idioma:",
+  "Layout": "Layout",
+  "Light Mode": "Modo Claro",
+  "Line Height": "Altura da Linha",
+  "Loading...": "Carregando...",
+  "Loc. {{currentPage}} / {{totalPage}}": "Loc. {{currentPage}} / {{totalPage}}",
+  "Logged in": "Conectado",
+  "Logged in as {{userDisplayName}}": "Conectado como {{userDisplayName}}",
+  "Match Case": "Diferenciar Maiúsculas e Minúsculas",
+  "Match Diacritics": "Corresponder Acentos",
+  "Match Whole Words": "Corresponder Palavras Inteiras",
+  "Maximum Block Size": "Tamanho Máximo do Bloco",
+  "Maximum Inline Size": "Tamanho Máximo em Linha",
+  "Maximum Number of Columns": "Número Máximo de Colunas",
+  "Minimum Font Size": "Tamanho Mínimo da Fonte",
+  "Misc": "Diversos",
+  "Monospace Font": "Fonte Monoespaçada",
+  "More Info": "Mais Informações",
+  "Nord": "Nord",
+  "Notebook": "Caderno",
+  "Notes": "Notas",
+  "Open": "Abrir",
+  "Open Book": "Abrir Livro",
+  "Original Text": "Texto Original",
+  "Page": "Página",
+  "Paging Animation": "Animação de Página",
+  "Paragraph": "Parágrafo",
+  "Parallel Read": "Leitura Paralela",
+  "Published:": "Publicado:",
+  "Publisher:": "Editora:",
+  "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",
+  "Reveal in Folder": "Mostrar na Pasta",
+  "Sans-Serif Font": "Fonte Sans-Serif",
+  "Save": "Salvar",
+  "Scrolled Mode": "Modo de Rolagem",
+  "Search": "Buscar",
+  "Search Books...": "Procurar livros...",
+  "Search...": "Pesquisar...",
+  "Select Book": "Selecionar Livro",
+  "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",
+  "Sidebar": "Barra Lateral",
+  "Sign In": "Entrar",
+  "Sign Out": "Sair",
+  "Sky": "Céu",
+  "Slow": "Lento",
+  "Solarized": "Solarizado",
+  "Speak": "Falar",
+  "Subjects:": "Assuntos:",
+  "System Fonts": "Fontes do Sistema",
+  "TTS not supported in this device": "TTS não suportado neste dispositivo",
+  "Theme Color": "Cor do Tema",
+  "Theme Mode": "Modo do Tema",
+  "Translate": "Traduzir",
+  "Translated Text": "Texto Traduzido",
+  "Unknown": "Desconhecido",
+  "Untitled": "Sem Título",
+  "Updated:": "Atualizado:",
+  "User avatar": "Avatar do usuário",
+  "Version {{version}}": "Versão {{version}}",
+  "Vertical Direction": "Direção Vertical",
+  "Welcome to your library. You can import your books here and read them anytime.": "Bem-vindo à sua biblioteca. Você pode importar seus livros aqui e lê-los a qualquer momento.",
+  "Wikipedia": "Wikipédia",
+  "Writing Mode": "Modo de Escrita",
+  "Your Library": "Sua Biblioteca",
+  "TTS not supported for PDF": "TTS não suportado para PDF",
+  "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",
+  "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",
+  "Already the latest version": "Já é a versão mais recente",
+  "Book Details": "Detalhes do Livro",
+  "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"
+}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(обнаружено)",
+  "About Readest": "О Readest",
+  "Add your notes here...": "Добавьте свои заметки здесь...",
+  "Animation": "Анимация",
+  "Annotate": "Аннотация",
+  "Apply": "Применить",
+  "Are you sure to delete the selected books?": "Вы уверены, что хотите удалить выбранные книги?",
+  "Auto Mode": "Автоматический режим",
+  "Behavior": "Поведение",
+  "Book": "Книга",
+  "Book Cover": "Обложка книги",
+  "Bookmark": "Закладка",
+  "Cancel": "Отмена",
+  "Chapter": "Глава",
+  "Cherry": "Вишня",
+  "Color": "Цвет",
+  "Confirm": "Подтвердить",
+  "Confirm Deletion": "Подтвердить удаление",
+  "Copied to notebook": "Скопировано в блокнот",
+  "Copy": "Копировать",
+  "Custom CSS": "Пользовательский CSS",
+  "Dark Mode": "Тёмная тема",
+  "Default": "По умолчанию",
+  "Default Font": "Шрифт по умолчанию",
+  "Default Font Size": "Размер шрифта по умолчанию",
+  "Delete": "Удалить",
+  "Delete Highlight": "Удалить выделение",
+  "Dictionary": "Словарь",
+  "Disable Click-to-Flip": "Отключить переворот по клику",
+  "Download Readest": "Скачать Readest",
+  "Edit": "Редактировать",
+  "Enter your custom CSS here...": "Введите ваш пользовательский CSS здесь...",
+  "Excerpts": "Отрывки",
+  "Failed to import book(s): {{filenames}}": "Не удалось импортировать книгу(и): {{filenames}}",
+  "Fast": "Быстро",
+  "Font": "Шрифт",
+  "Font & Layout": "Шрифт и макет",
+  "Font Face": "Начертание шрифта",
+  "Font Family": "Семейство шрифтов",
+  "Font Size": "Размер шрифта",
+  "Full Justification": "Полное выравнивание",
+  "Global Settings": "Общие настройки",
+  "Go Back": "Назад",
+  "Go Forward": "Вперёд",
+  "Go Left": "Влево",
+  "Go Right": "Вправо",
+  "Grass": "Трава",
+  "Gray": "Серый",
+  "Gruvbox": "Gruvbox",
+  "Highlight": "Выделить",
+  "Horizontal Direction": "Горизонтальное направление",
+  "Hyphenation": "Перенос слов",
+  "Identifier:": "Идентификатор:",
+  "Import Books": "Импорт книг",
+  "Invert Colors in Dark Mode": "Инвертировать цвета в тёмной теме",
+  "Language:": "Язык:",
+  "Layout": "Макет",
+  "Light Mode": "Светлая тема",
+  "Line Height": "Межстрочный интервал",
+  "Loading...": "Загрузка...",
+  "Loc. {{currentPage}} / {{totalPage}}": "Поз. {{currentPage}} / {{totalPage}}",
+  "Logged in": "Выполнен вход",
+  "Logged in as {{userDisplayName}}": "Вход выполнен как {{userDisplayName}}",
+  "Match Case": "Учитывать регистр",
+  "Match Diacritics": "Учитывать диакритические знаки",
+  "Match Whole Words": "Только целые слова",
+  "Maximum Block Size": "Максимальный размер блока",
+  "Maximum Inline Size": "Максимальный размер строки",
+  "Maximum Number of Columns": "Максимальное количество колонок",
+  "Minimum Font Size": "Минимальный размер шрифта",
+  "Misc": "Разное",
+  "Monospace Font": "Моноширинный шрифт",
+  "More Info": "Подробнее",
+  "Nord": "Nord",
+  "Notebook": "Блокнот",
+  "Notes": "Заметки",
+  "Open": "Открыть",
+  "Open Book": "Открыть книгу",
+  "Original Text": "Оригинальный текст",
+  "Page": "Страница",
+  "Paging Animation": "Анимация перелистывания",
+  "Paragraph": "Абзац",
+  "Parallel Read": "Параллельное чтение",
+  "Published:": "Опубликовано:",
+  "Publisher:": "Издатель:",
+  "Reading Progress Synced": "Синхронизирован прогресс чтения",
+  "Reload Page": "Перезагрузить страницу",
+  "Reveal in File Explorer": "Показать в проводнике",
+  "Reveal in Finder": "Показать в Finder",
+  "Reveal in Folder": "Показать в папке",
+  "Sans-Serif Font": "Шрифт без засечек",
+  "Save": "Сохранить",
+  "Scrolled Mode": "Режим прокрутки",
+  "Search": "Поиск",
+  "Search Books...": "Поиск книг...",
+  "Search...": "Поиск...",
+  "Select Book": "Выбрать книгу",
+  "Select Books": "Выбрать книги",
+  "Select Multiple Books": "Выбрать несколько книг",
+  "Sepia": "Сепия",
+  "Serif Font": "Шрифт с засечками",
+  "Show Book Details": "Показать детали книги",
+  "Sidebar": "Боковая панель",
+  "Sign In": "Войти",
+  "Sign Out": "Выйти",
+  "Sky": "Небесный",
+  "Slow": "Медленно",
+  "Solarized": "Солнечный",
+  "Speak": "Произнести",
+  "Subjects:": "Темы:",
+  "System Fonts": "Системные шрифты",
+  "TTS not supported in this device": "TTS не поддерживается на этом устройстве",
+  "Theme Color": "Цвет темы",
+  "Theme Mode": "Режим темы",
+  "Translate": "Перевести",
+  "Translated Text": "Переведённый текст",
+  "Unknown": "Неизвестно",
+  "Untitled": "Без названия",
+  "Updated:": "Обновлено:",
+  "User avatar": "Аватар пользователя",
+  "Version {{version}}": "Версия {{version}}",
+  "Vertical Direction": "Вертикальное направление",
+  "Welcome to your library. You can import your books here and read them anytime.": "Добро пожаловать в вашу библиотеку. Вы можете импортировать сюда книги и читать их в любое время.",
+  "Wikipedia": "Википедия",
+  "Writing Mode": "Режим записи",
+  "Your Library": "Ваша библиотека",
+  "TTS not supported for PDF": "TTS не поддерживается для PDF",
+  "Override Book Font": "Переопределить шрифт книги",
+  "Vertical Margins (px)": "Вертикальные поля (px)",
+  "Horizontal Margins (%)": "Горизонтальные поля (%)",
+  "Apply to All Books": "Применить ко всем книгам",
+  "Apply to This Book": "Применить к этой книге",
+  "Unable to fetch the translation. Try again later.": "Не удалось получить перевод. Попробуйте позже.",
+  "Update Now!": "Обновить сейчас!",
+  "Update": "Обновить",
+  "Check Update": "Проверить обновление",
+  "Already the latest version": "Уже последняя версия",
+  "Book Details": "Детали книги",
+  "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": "Проверять обновления при запуске"
+}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(algılandı)",
+  "About Readest": "Readest Hakkında",
+  "Add your notes here...": "Notlarınızı buraya ekleyin...",
+  "Animation": "Animasyon",
+  "Annotate": "Not Ekle",
+  "Apply": "Uygula",
+  "Are you sure to delete the selected books?": "Seçili kitapları silmek istediğinizden emin misiniz?",
+  "Auto Mode": "Otomatik Mod",
+  "Behavior": "Davranış",
+  "Book": "Kitap",
+  "Book Cover": "Kitap Kapağı",
+  "Bookmark": "Yer İmi",
+  "Cancel": "İptal",
+  "Chapter": "Bölüm",
+  "Cherry": "Kiraz",
+  "Color": "Renk",
+  "Confirm": "Onayla",
+  "Confirm Deletion": "Silmeyi Onayla",
+  "Copied to notebook": "Not defterine kopyalandı",
+  "Copy": "Kopyala",
+  "Custom CSS": "Özel CSS",
+  "Dark Mode": "Karanlık Mod",
+  "Default": "Varsayılan",
+  "Default Font": "Varsayılan Yazı Tipi",
+  "Default Font Size": "Varsayılan Yazı Boyutu",
+  "Delete": "Sil",
+  "Delete Highlight": "Vurguyu Sil",
+  "Dictionary": "Sözlük",
+  "Disable Click-to-Flip": "Tıkla-Çevir'i Devre Dışı Bırak",
+  "Download Readest": "Readest'i İndir",
+  "Edit": "Düzenle",
+  "Enter your custom CSS here...": "Özel CSS'nizi buraya girin...",
+  "Excerpts": "Alıntılar",
+  "Failed to import book(s): {{filenames}}": "Kitap(lar) içe aktarılamadı: {{filenames}}",
+  "Fast": "Hızlı",
+  "Font": "Yazı Tipi",
+  "Font & Layout": "Yazı Tipi ve Düzen",
+  "Font Face": "Yazı Tipi Yüzü",
+  "Font Family": "Yazı Tipi Ailesi",
+  "Font Size": "Yazı Boyutu",
+  "Full Justification": "Tam Hizalama",
+  "Global Settings": "Genel Ayarlar",
+  "Go Back": "Geri Git",
+  "Go Forward": "İleri Git",
+  "Go Left": "Sola Git",
+  "Go Right": "Sağa Git",
+  "Grass": "Çimen",
+  "Gray": "Gri",
+  "Gruvbox": "Gruvbox",
+  "Highlight": "Vurgula",
+  "Horizontal Direction": "Yatay Yön",
+  "Hyphenation": "Heceleme",
+  "Identifier:": "Tanımlayıcı:",
+  "Import Books": "Kitapları İçe Aktar",
+  "Invert Colors in Dark Mode": "Karanlık Modda Renkleri Ters Çevir",
+  "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ı",
+  "Logged in as {{userDisplayName}}": "{{userDisplayName}} olarak giriş yapıldı",
+  "Match Case": "Büyük/Küçük Harf Eşleştir",
+  "Match Diacritics": "Aksan İşaretlerini Eşleştir",
+  "Match Whole Words": "Tam Kelimeleri Eşleştir",
+  "Maximum Block Size": "Maksimum Blok Boyutu",
+  "Maximum Inline Size": "Maksimum Satır İçi Boyut",
+  "Maximum Number of Columns": "Maksimum Sütun Sayısı",
+  "Minimum Font Size": "Minimum Yazı Boyutu",
+  "Misc": "Diğer",
+  "Monospace Font": "Eş Aralıklı Yazı Tipi",
+  "More Info": "Daha Fazla Bilgi",
+  "Nord": "Nord",
+  "Notebook": "Not Defteri",
+  "Notes": "Notlar",
+  "Open": "Aç",
+  "Open Book": "Kitabı Aç",
+  "Original Text": "Orijinal Metin",
+  "Page": "Sayfa",
+  "Paging Animation": "Sayfa Çevirme Animasyonu",
+  "Paragraph": "Paragraf",
+  "Parallel Read": "Paralel Okuma",
+  "Published:": "Yayınlanma:",
+  "Publisher:": "Yayıncı:",
+  "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",
+  "Reveal in Folder": "Klasörde Göster",
+  "Sans-Serif Font": "Sans-Serif Yazı Tipi",
+  "Save": "Kaydet",
+  "Scrolled Mode": "Kaydırma Modu",
+  "Search": "Ara",
+  "Search Books...": "Kitap ara...",
+  "Search...": "Ara...",
+  "Select Book": "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",
+  "Sidebar": "Kenar Çubuğu",
+  "Sign In": "Giriş Yap",
+  "Sign Out": "Çıkış Yap",
+  "Sky": "Gökyüzü",
+  "Slow": "Yavaş",
+  "Solarized": "Solarized",
+  "Speak": "Konuş",
+  "Subjects:": "Konular:",
+  "System Fonts": "Sistem Yazı Tipleri",
+  "TTS not supported in this device": "Bu cihazda TTS desteklenmiyor",
+  "Theme Color": "Tema Rengi",
+  "Theme Mode": "Tema Modu",
+  "Translate": "Çevir",
+  "Translated Text": "Çevrilen Metin",
+  "Unknown": "Bilinmiyor",
+  "Untitled": "Başlıksız",
+  "Updated:": "Güncellendi:",
+  "User avatar": "Kullanıcı avatarı",
+  "Version {{version}}": "Sürüm {{version}}",
+  "Vertical Direction": "Dikey Yön",
+  "Welcome to your library. You can import your books here and read them anytime.": "Kütüphanenize hoş geldiniz. Buradan kitaplarınızı içe aktarabilir ve istediğiniz zaman okuyabilirsiniz.",
+  "Wikipedia": "Vikipedi",
+  "Writing Mode": "Yazma Modu",
+  "Your Library": "Kütüphaneniz",
+  "TTS not supported for PDF": "PDF için TTS desteklenmiyor",
+  "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",
+  "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",
+  "Already the latest version": "Zaten en son sürüm",
+  "Book Details": "Kitap Detayları",
+  "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"
+}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(виявлено)",
+  "About Readest": "Про Readest",
+  "Add your notes here...": "Додайте свої нотатки тут...",
+  "Animation": "Анімація",
+  "Annotate": "Анотація",
+  "Apply": "Застосувати",
+  "Are you sure to delete the selected books?": "Ви впевнені, що хочете видалити вибрані книги?",
+  "Auto Mode": "Автоматичний режим",
+  "Behavior": "Поведінка",
+  "Book": "Книга",
+  "Book Cover": "Обкладинка книги",
+  "Bookmark": "Закладка",
+  "Cancel": "Скасувати",
+  "Chapter": "Розділ",
+  "Cherry": "Вишневий",
+  "Color": "Колір",
+  "Confirm": "Підтвердити",
+  "Confirm Deletion": "Підтвердити видалення",
+  "Copied to notebook": "Скопійовано до нотатника",
+  "Copy": "Копіювати",
+  "Custom CSS": "Користувацький CSS",
+  "Dark Mode": "Темний режим",
+  "Default": "За замовчуванням",
+  "Default Font": "Шрифт за замовчуванням",
+  "Default Font Size": "Розмір шрифту за замовчуванням",
+  "Delete": "Видалити",
+  "Delete Highlight": "Видалити виділення",
+  "Dictionary": "Словник",
+  "Disable Click-to-Flip": "Вимкнути гортання кліком",
+  "Download Readest": "Завантажити Readest",
+  "Edit": "Редагувати",
+  "Enter your custom CSS here...": "Введіть ваш користувацький CSS тут...",
+  "Excerpts": "Уривки",
+  "Failed to import book(s): {{filenames}}": "Не вдалося імпортувати книгу(и): {{filenames}}",
+  "Fast": "Швидко",
+  "Font": "Шрифт",
+  "Font & Layout": "Шрифт та макет",
+  "Font Face": "Накреслення шрифту",
+  "Font Family": "Сімейство шрифтів",
+  "Font Size": "Розмір шрифту",
+  "Full Justification": "Повне вирівнювання",
+  "Global Settings": "Глобальні налаштування",
+  "Go Back": "Назад",
+  "Go Forward": "Вперед",
+  "Go Left": "Вліво",
+  "Go Right": "Вправо",
+  "Grass": "Трав'яний",
+  "Gray": "Сірий",
+  "Gruvbox": "Теплий помаранчевий",
+  "Highlight": "Виділення",
+  "Horizontal Direction": "Горизонтальний напрямок",
+  "Hyphenation": "Перенесення слів",
+  "Identifier:": "Ідентифікатор:",
+  "Import Books": "Імпортувати книги",
+  "Invert Colors in Dark Mode": "Інвертувати кольори в темному режимі",
+  "Language:": "Мова:",
+  "Layout": "Макет",
+  "Light Mode": "Світлий режим",
+  "Line Height": "Висота рядка",
+  "Loading...": "Завантаження...",
+  "Loc. {{currentPage}} / {{totalPage}}": "Поз. {{currentPage}} / {{totalPage}}",
+  "Logged in": "Увійшли",
+  "Logged in as {{userDisplayName}}": "Увійшли як {{userDisplayName}}",
+  "Match Case": "Враховувати регістр",
+  "Match Diacritics": "Враховувати діакритичні знаки",
+  "Match Whole Words": "Шукати цілі слова",
+  "Maximum Block Size": "Максимальний розмір блоку",
+  "Maximum Inline Size": "Максимальний розмір рядка",
+  "Maximum Number of Columns": "Максимальна кількість колонок",
+  "Minimum Font Size": "Мінімальний розмір шрифту",
+  "Misc": "Різне",
+  "Monospace Font": "Моноширинний шрифт",
+  "More Info": "Більше інформації",
+  "Nord": "Північний",
+  "Notebook": "Нотатник",
+  "Notes": "Нотатки",
+  "Open": "Відкрити",
+  "Open Book": "Відкрити книгу",
+  "Original Text": "Оригінальний текст",
+  "Page": "Сторінка",
+  "Paging Animation": "Анімація гортання",
+  "Paragraph": "Абзац",
+  "Parallel Read": "Паралельне читання",
+  "Published:": "Опубліковано:",
+  "Publisher:": "Видавець:",
+  "Reading Progress Synced": "Прогрес читання синхронізовано",
+  "Reload Page": "Перезавантажити сторінку",
+  "Reveal in File Explorer": "Показати у провіднику",
+  "Reveal in Finder": "Показати у Finder",
+  "Reveal in Folder": "Показати в папці",
+  "Sans-Serif Font": "Шрифт без засічок",
+  "Save": "Зберегти",
+  "Scrolled Mode": "Режим прокрутки",
+  "Search": "Пошук",
+  "Search Books...": "Шукати книги...",
+  "Search...": "Пошук...",
+  "Select Book": "Вибрати книгу",
+  "Select Books": "Вибрати книги",
+  "Select Multiple Books": "Вибрати кілька книг",
+  "Sepia": "Сепія",
+  "Serif Font": "Шрифт із засічками",
+  "Show Book Details": "Показати деталі книги",
+  "Sidebar": "Бічна панель",
+  "Sign In": "Увійти",
+  "Sign Out": "Вийти",
+  "Sky": "Небесний",
+  "Slow": "Повільно",
+  "Solarized": "Сонячний",
+  "Speak": "Озвучити",
+  "Subjects:": "Теми:",
+  "System Fonts": "Системні шрифти",
+  "TTS not supported in this device": "TTS не підтримується на цьому пристрої",
+  "Theme Color": "Колір теми",
+  "Theme Mode": "Режим теми",
+  "Translate": "Перекласти",
+  "Translated Text": "Перекладений текст",
+  "Unknown": "Невідомо",
+  "Untitled": "Без назви",
+  "Updated:": "Оновлено:",
+  "User avatar": "Аватар користувача",
+  "Version {{version}}": "Версія {{version}}",
+  "Vertical Direction": "Вертикальний напрямок",
+  "Welcome to your library. You can import your books here and read them anytime.": "Ласкаво просимо до вашої бібліотеки. Ви можете імпортувати сюди свої книги та читати їх будь-коли.",
+  "Wikipedia": "Вікіпедія",
+  "Writing Mode": "Режим письма",
+  "Your Library": "Ваша бібліотека",
+  "TTS not supported for PDF": "TTS не підтримується для PDF",
+  "Override Book Font": "Перевизначити шрифт книги",
+  "Vertical Margins (px)": "Вертикальні відступи (px)",
+  "Horizontal Margins (%)": "Горизонтальні відступи (%)",
+  "Apply to All Books": "Застосувати до всіх книг",
+  "Apply to This Book": "Застосувати до цієї книги",
+  "Unable to fetch the translation. Try again later.": "Не вдалося отримати переклад. Спробуйте пізніше.",
+  "Update Now!": "Оновити зараз!",
+  "Update": "Оновити",
+  "Check Update": "Перевірити оновлення",
+  "Already the latest version": "Вже остання версія",
+  "Book Details": "Деталі книги",
+  "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": "Перевіряти оновлення при запуску"
+}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(đã phát hiện)",
+  "About Readest": "Về Readest",
+  "Add your notes here...": "Thêm ghi chú của bạn vào đây...",
+  "Animation": "Hiệu ứng động",
+  "Annotate": "Chú thích",
+  "Apply": "Áp dụng",
+  "Are you sure to delete the selected books?": "Bạn có chắc chắn muốn xóa các sách đã chọn?",
+  "Auto Mode": "Chế độ tự động",
+  "Behavior": "Hành vi",
+  "Book": "Sách",
+  "Book Cover": "Bìa sách",
+  "Bookmark": "Đánh dấu",
+  "Cancel": "Hủy",
+  "Chapter": "Chương",
+  "Cherry": "Đỏ anh đào",
+  "Color": "Màu sắc",
+  "Confirm": "Xác nhận",
+  "Confirm Deletion": "Xác nhận xóa",
+  "Copied to notebook": "Đã sao chép vào sổ ghi chú",
+  "Copy": "Sao chép",
+  "Custom CSS": "CSS tùy chỉnh",
+  "Dark Mode": "Chế độ tối",
+  "Default": "Mặc định",
+  "Default Font": "Phông chữ mặc định",
+  "Default Font Size": "Cỡ chữ mặc định",
+  "Delete": "Xóa",
+  "Delete Highlight": "Xóa văn bản được đánh dấu",
+  "Dictionary": "Từ điển",
+  "Disable Click-to-Flip": "Tắt tính năng nhấp để lật trang",
+  "Download Readest": "Tải Readest",
+  "Edit": "Chỉnh sửa",
+  "Enter your custom CSS here...": "Nhập CSS tùy chỉnh của bạn vào đây...",
+  "Excerpts": "Trích dẫn",
+  "Failed to import book(s): {{filenames}}": "Không thể nhập sách: {{filenames}}",
+  "Fast": "Nhanh",
+  "Font": "Phông chữ",
+  "Font & Layout": "Phông chữ & Bố cục",
+  "Font Face": "Kiểu chữ",
+  "Font Family": "Họ phông chữ",
+  "Font Size": "Cỡ chữ",
+  "Full Justification": "Căn đều hai bên",
+  "Global Settings": "Cài đặt chung",
+  "Go Back": "Quay lại",
+  "Go Forward": "Tiến tới",
+  "Go Left": "Sang trái",
+  "Go Right": "Sang phải",
+  "Grass": "Xanh cỏ",
+  "Gray": "Xám",
+  "Gruvbox": "Gruvbox",
+  "Highlight": "Đánh dấu",
+  "Horizontal Direction": "Hướng ngang",
+  "Hyphenation": "Gạch nối từ",
+  "Identifier:": "Định danh:",
+  "Import Books": "Nhập sách",
+  "Invert Colors in Dark Mode": "Đảo màu trong chế độ tối",
+  "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",
+  "Logged in as {{userDisplayName}}": "Đăng nhập với tên {{userDisplayName}}",
+  "Match Case": "Phân biệt chữ hoa/thường",
+  "Match Diacritics": "Phân biệt dấu",
+  "Match Whole Words": "Khớp toàn bộ từ",
+  "Maximum Block Size": "Kích thước khối tối đa",
+  "Maximum Inline Size": "Kích thước nội tuyến tối đa",
+  "Maximum Number of Columns": "Số cột tối đa",
+  "Minimum Font Size": "Cỡ chữ tối thiểu",
+  "Misc": "Khác",
+  "Monospace Font": "Phông chữ đơn cách",
+  "More Info": "Thông tin thêm",
+  "Nord": "Nord",
+  "Notebook": "Sổ ghi chép",
+  "Notes": "Ghi chú",
+  "Open": "Mở",
+  "Open Book": "Mở sách",
+  "Original Text": "Văn bản gốc",
+  "Page": "Trang",
+  "Paging Animation": "Hiệu ứng lật trang",
+  "Paragraph": "Đoạn văn",
+  "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ộ",
+  "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",
+  "Reveal in Folder": "Hiển thị trong thư mục",
+  "Sans-Serif Font": "Phông chữ không chân",
+  "Save": "Lưu",
+  "Scrolled Mode": "Chế độ cuộn",
+  "Search": "Tìm kiếm",
+  "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",
+  "Sepia": "Nâu cổ",
+  "Serif Font": "Phông chữ có chân",
+  "Show Book Details": "Hiển thị chi tiết sách",
+  "Sidebar": "Thanh bên",
+  "Sign In": "Đăng nhập",
+  "Sign Out": "Đăng xuất",
+  "Sky": "Xanh trời",
+  "Slow": "Chậm",
+  "Solarized": "Solarized",
+  "Speak": "Đọc",
+  "Subjects:": "Chủ đề:",
+  "System Fonts": "Phông chữ hệ thống",
+  "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ủ đề",
+  "Translate": "Dịch",
+  "Translated Text": "Văn bản dịch",
+  "Unknown": "Không xác định",
+  "Untitled": "Không có tiêu đề",
+  "Updated:": "Cập nhật:",
+  "User avatar": "Ảnh đại diện",
+  "Version {{version}}": "Phiên bản {{version}}",
+  "Vertical Direction": "Hướng dọc",
+  "Welcome to your library. You can import your books here and read them anytime.": "Chào mừng đến với thư viện của bạn. Bạn có thể nhập sách vào đây và đọc bất cứ lúc nào.",
+  "Wikipedia": "Wikipedia",
+  "Writing Mode": "Chế độ viết",
+  "Your Library": "Thư viện của bạn",
+  "TTS not supported for PDF": "TTS không được hỗ trợ cho PDF",
+  "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",
+  "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",
+  "Already the latest version": "Đã là phiên bản mới nhất",
+  "Book Details": "Chi tiết sách",
+  "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"
+}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(检测到)",
+  "About Readest": "关于 Readest",
+  "Add your notes here...": "在这里添加您的笔记...",
+  "Animation": "动画",
+  "Annotate": "笔记",
+  "Apply": "应用",
+  "Are you sure to delete the selected books?": "您确定要删除所选书籍吗？",
+  "Auto Mode": "自动主题",
+  "Behavior": "行为",
+  "Book": "书籍",
+  "Book Cover": "书籍封面",
+  "Bookmark": "书签",
+  "Cancel": "取消",
+  "Chapter": "章节",
+  "Cherry": "樱粉",
+  "Color": "颜色",
+  "Confirm": "确认",
+  "Confirm Deletion": "确认删除",
+  "Copied to notebook": "已复制到笔记本",
+  "Copy": "复制",
+  "Custom CSS": "自定义 CSS",
+  "Dark Mode": "深色主题",
+  "Default": "默认",
+  "Default Font": "默认字体",
+  "Default Font Size": "默认字号",
+  "Delete": "删除",
+  "Delete Highlight": "删除划线",
+  "Dictionary": "词典",
+  "Disable Click-to-Flip": "禁用点击翻页",
+  "Download Readest": "下载 Readest",
+  "Edit": "编辑",
+  "Enter your custom CSS here...": "在此处输入您的自定义 CSS...",
+  "Excerpts": "摘录",
+  "Failed to import book(s): {{filenames}}": "导入书籍失败：{{filenames}}",
+  "Fast": "快",
+  "Font": "字体",
+  "Font & Layout": "字体和布局",
+  "Font Face": "字型",
+  "Font Family": "字族",
+  "Font Size": "字号",
+  "Full Justification": "两端对齐",
+  "Global Settings": "全局设置",
+  "Go Back": "返回",
+  "Go Forward": "前进",
+  "Go Left": "向左",
+  "Go Right": "向右",
+  "Grass": "青草",
+  "Gray": "素雅",
+  "Gruvbox": "暖橘",
+  "Highlight": "划线",
+  "Horizontal Direction": "横排",
+  "Hyphenation": "断字",
+  "Identifier:": "识别码",
+  "Import Books": "导入书籍",
+  "Invert Colors in Dark Mode": "深色主题下反色",
+  "Language:": "语言",
+  "Layout": "布局",
+  "Light Mode": "浅色主题",
+  "Line Height": "行高",
+  "Loading...": "加载中...",
+  "Loc. {{currentPage}} / {{totalPage}}": "位置 {{currentPage}} / {{totalPage}}",
+  "Logged in": "已登录",
+  "Logged in as {{userDisplayName}}": "{{userDisplayName}} 已登录",
+  "Match Case": "匹配大小写",
+  "Match Diacritics": "匹配重音符号",
+  "Match Whole Words": "匹配整个单词",
+  "Maximum Block Size": "内容最大宽度",
+  "Maximum Inline Size": "每栏最大宽度",
+  "Maximum Number of Columns": "分栏数",
+  "Minimum Font Size": "最小字号",
+  "Misc": "杂项",
+  "Monospace Font": "等宽字体",
+  "More Info": "更多信息",
+  "Nord": "极光",
+  "Notebook": "笔记本",
+  "Notes": "笔记",
+  "Open": "打开",
+  "Open Book": "打开书籍",
+  "Original Text": "原文",
+  "Page": "页面",
+  "Paging Animation": "翻页动画",
+  "Paragraph": "段落",
+  "Parallel Read": "并排阅读",
+  "Published:": "出版日期",
+  "Publisher:": "出版商",
+  "Reading Progress Synced": "阅读进度已同步",
+  "Reload Page": "重新加载页面",
+  "Reveal in File Explorer": "在文件管理器中显示",
+  "Reveal in Finder": "在访达中显示",
+  "Reveal in Folder": "在文件夹中显示",
+  "Sans-Serif Font": "无衬线字体",
+  "Save": "保存",
+  "Scrolled Mode": "滚动模式",
+  "Search": "搜索",
+  "Search Books...": "搜索书籍...",
+  "Search...": "搜索...",
+  "Select Book": "选择书籍",
+  "Select Books": "选择书籍",
+  "Select Multiple Books": "选择多本书籍",
+  "Sepia": "旧韵",
+  "Serif Font": "衬线字体",
+  "Show Book Details": "显示书籍详情",
+  "Sidebar": "侧边栏",
+  "Sign In": "登录",
+  "Sign Out": "登出",
+  "Sky": "天青",
+  "Slow": "慢",
+  "Solarized": "日晖",
+  "Speak": "朗读",
+  "Subjects:": "主题",
+  "System Fonts": "系统字体",
+  "TTS not supported in this device": "此设备不支持 TTS",
+  "Theme Color": "主题颜色",
+  "Theme Mode": "主题模式",
+  "Translate": "翻译",
+  "Translated Text": "译文",
+  "Unknown": "未知",
+  "Untitled": "无标题",
+  "Updated:": "更新日期",
+  "User avatar": "用户头像",
+  "Version {{version}}": "版本 {{version}}",
+  "Vertical Direction": "竖排",
+  "Welcome to your library. You can import your books here and read them anytime.": "书库空空如也，您可以导入您的书籍并随时阅读。",
+  "Wikipedia": "维基百科",
+  "Writing Mode": "排版模式",
+  "Your Library": "书库",
+  "TTS not supported for PDF": "PDF 文档暂不支持 TTS",
+  "Override Book Font": "覆盖书籍字体",
+  "Vertical Margins (px)": "垂直边距（px）",
+  "Horizontal Margins (%)": "水平边距（%）",
+  "Apply to All Books": "应用于所有书籍",
+  "Apply to This Book": "应用于此书籍",
+  "Unable to fetch the translation. Try again later.": "无法获取翻译，请稍后重试。",
+  "Update Now!": "立即更新！",
+  "Update": "更新",
+  "Check Update": "检查更新",
+  "Already the latest version": "已经是最新版本",
+  "Book Details": "书籍详情",
+  "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": "启动时检查更新"
+}

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

@@ -0,0 +1,153 @@
+{
+  "(detected)": "(檢測到)",
+  "About Readest": "關於 Readest",
+  "Add your notes here...": "在這裡添加您的筆記...",
+  "Animation": "動畫",
+  "Annotate": "筆記",
+  "Apply": "應用",
+  "Are you sure to delete the selected books?": "您確定要刪除所選書籍嗎？",
+  "Auto Mode": "自動主題",
+  "Behavior": "行為",
+  "Book": "書籍",
+  "Book Cover": "書籍封面",
+  "Bookmark": "書籤",
+  "Cancel": "取消",
+  "Chapter": "章節",
+  "Cherry": "櫻粉",
+  "Color": "顏色",
+  "Confirm": "確認",
+  "Confirm Deletion": "確認刪除",
+  "Copied to notebook": "已複製到筆記本",
+  "Copy": "複製",
+  "Custom CSS": "自定義 CSS",
+  "Dark Mode": "深色主題",
+  "Default": "預設",
+  "Default Font": "預設字體",
+  "Default Font Size": "預設字號",
+  "Delete": "刪除",
+  "Delete Highlight": "刪除劃線",
+  "Dictionary": "詞典",
+  "Disable Click-to-Flip": "禁用點擊翻頁",
+  "Download Readest": "下載 Readest",
+  "Edit": "編輯",
+  "Enter your custom CSS here...": "在此處輸入您的自定義 CSS...",
+  "Excerpts": "摘錄",
+  "Failed to import book(s): {{filenames}}": "導入書籍失敗：{{filenames}}",
+  "Fast": "快",
+  "Font": "字體",
+  "Font & Layout": "字體和版面",
+  "Font Face": "字型",
+  "Font Family": "字族",
+  "Font Size": "字號",
+  "Full Justification": "兩端對齊",
+  "Global Settings": "全局設置",
+  "Go Back": "返回",
+  "Go Forward": "前進",
+  "Go Left": "向左",
+  "Go Right": "向右",
+  "Grass": "青草",
+  "Gray": "素雅",
+  "Gruvbox": "暖橘",
+  "Highlight": "劃線",
+  "Horizontal Direction": "橫排",
+  "Hyphenation": "斷字",
+  "Identifier:": "識別碼",
+  "Import Books": "導入書籍",
+  "Invert Colors in Dark Mode": "深色主題下反色",
+  "Language:": "語言",
+  "Layout": "版面",
+  "Light Mode": "淺色主題",
+  "Line Height": "行高",
+  "Loading...": "載入中...",
+  "Loc. {{currentPage}} / {{totalPage}}": "位置 {{currentPage}} / {{totalPage}}",
+  "Logged in": "已登入",
+  "Logged in as {{userDisplayName}}": "{{userDisplayName}} 已登入",
+  "Match Case": "匹配大小寫",
+  "Match Diacritics": "匹配重音符號",
+  "Match Whole Words": "匹配整個單詞",
+  "Maximum Block Size": "內容最大寬度",
+  "Maximum Inline Size": "每欄最大寬度",
+  "Maximum Number of Columns": "分欄數",
+  "Minimum Font Size": "最小字號",
+  "Misc": "雜項",
+  "Monospace Font": "等寬字體",
+  "More Info": "更多信息",
+  "Nord": "極光",
+  "Notebook": "筆記本",
+  "Notes": "筆記",
+  "Open": "打開",
+  "Open Book": "打開書籍",
+  "Original Text": "原文",
+  "Page": "頁面",
+  "Paging Animation": "翻頁動畫",
+  "Paragraph": "段落",
+  "Parallel Read": "並排閱讀",
+  "Published:": "出版日期",
+  "Publisher:": "出版商",
+  "Reading Progress Synced": "閱讀進度已同步",
+  "Reload Page": "重新載入頁面",
+  "Reveal in File Explorer": "在檔案管理器中顯示",
+  "Reveal in Finder": "在訪達中顯示",
+  "Reveal in Folder": "在資料夾中顯示",
+  "Sans-Serif Font": "無襯線字體",
+  "Save": "保存",
+  "Scrolled Mode": "滾動模式",
+  "Search": "搜索",
+  "Search Books...": "搜索書籍...",
+  "Search...": "搜索...",
+  "Select Book": "選擇書籍",
+  "Select Books": "選擇書籍",
+  "Select Multiple Books": "選擇多本書籍",
+  "Sepia": "舊韻",
+  "Serif Font": "襯線字體",
+  "Show Book Details": "顯示書籍詳情",
+  "Sidebar": "側邊欄",
+  "Sign In": "登入",
+  "Sign Out": "登出",
+  "Sky": "天青",
+  "Slow": "慢",
+  "Solarized": "日暉",
+  "Speak": "朗讀",
+  "Subjects:": "主題",
+  "System Fonts": "系統字體",
+  "TTS not supported in this device": "此設備不支持 TTS",
+  "Theme Color": "主題顏色",
+  "Theme Mode": "主題模式",
+  "Translate": "翻譯",
+  "Translated Text": "譯文",
+  "Unknown": "未知",
+  "Untitled": "無標題",
+  "Updated:": "更新日期",
+  "User avatar": "用戶頭像",
+  "Version {{version}}": "版本 {{version}}",
+  "Vertical Direction": "豎排",
+  "Welcome to your library. You can import your books here and read them anytime.": "書庫空空如也，您可以導入您的書籍並隨時閱讀。",
+  "Wikipedia": "維基百科",
+  "Writing Mode": "排版模式",
+  "Your Library": "書庫",
+  "TTS not supported for PDF": "PDF 文檔暫不支持 TTS",
+  "Override Book Font": "覆蓋書籍字體",
+  "Vertical Margins (px)": "垂直邊距（px）",
+  "Horizontal Margins (%)": "水平邊距（%）",
+  "Apply to All Books": "應用於所有書籍",
+  "Apply to This Book": "應用於此書籍",
+  "Unable to fetch the translation. Try again later.": "無法獲取翻譯，請稍後再試。",
+  "Update Now!": "立即更新！",
+  "Update": "更新",
+  "Check Update": "檢查更新",
+  "Already the latest version": "已經是最新版本",
+  "Book Details": "書籍詳情",
+  "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": "啟動時檢查更新"
+}

apps/readest-app/public/manifest.json

@@ -0,0 +1,26 @@
+{
+  "name": "Readest",
+  "short_name": "Readest",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "description": "Readest is an open-source eBook reader supporting EPUB, PDF, and sync across devices.",
+  "icons": [
+    {
+      "src": "/icon.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "/icon.png",
+      "type": "image/png",
+      "sizes": "256x256"
+    },
+    {
+      "src": "/icon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "splash_pages": null
+}

apps/readest-app/release-notes.json

@@ -0,0 +1,124 @@
+{
+  "releases": {
+    "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": [
+        "Support PWA for the web version",
+        "Swipe up to toggle header/footer",
+        "Various fixes and enhancements on updater, header bar and tts"
+      ]
+    },
+    "0.9.6": {
+      "date": "2025-01-18",
+      "notes": ["Various enhancements for mobile platforms", "Fix DeepL translation API"]
+    },
+    "0.9.5": {
+      "date": "2025-01-15",
+      "notes": [
+        "Various TTS related UX enhancements",
+        "Add more system fonts as custom fonts",
+        "Show reading progress in bookshelf"
+      ]
+    },
+    "0.9.3": {
+      "date": "2025-01-11",
+      "notes": [
+        "Hotfix occasionally current speak not stopped when changing voice or rate",
+        "Inherit tts rate when changing tts engine"
+      ]
+    },
+    "0.9.2": {
+      "date": "2025-01-10",
+      "notes": [
+        "Support Text-to-Speech with Edge TTS and Web Speech API.",
+        "Various fixes and enhancements."
+      ]
+    },
+    "0.9.1": {
+      "date": "2025-01-06",
+      "notes": [
+        "Restore window position and size when reopening app.",
+        "Swap font when downloading online fonts.",
+        "Fix layout issues on Windows and Linux."
+      ]
+    },
+    "0.9.0": {
+      "date": "2025-01-04",
+      "notes": [
+        "Better Custom CSS editor and OAuth process.",
+        "Add vertical/horizontal switch for CJK books.",
+        "Fix dropdown close overlay not working on Windows/Linux."
+      ]
+    },
+    "0.8.9": {
+      "date": "2025-01-02",
+      "notes": [
+        "Context menu on bookshelf for quick actions.",
+        "Add more system fonts as custom fonts.",
+        "Fix google and github login for native apps."
+      ]
+    },
+    "0.8.8": {
+      "date": "2024-12-29",
+      "notes": [
+        "Use readest binary name for better CLI interface.",
+        "Some CSS tweaks to better support dark mode and embedded fonts."
+      ]
+    },
+    "0.8.7": {
+      "date": "2024-12-27",
+      "notes": [
+        "Support i18n/l10n with popular languages.",
+        "Support information modal for book details.",
+        "Various fixes and enhancements."
+      ]
+    },
+    "0.8.6": {
+      "date": "2024-12-25",
+      "notes": [
+        "Support back navigation in login page.",
+        "Support context menu on book cover for desktop version.",
+        "Resolve the issue with restoring footnotes and bookmarks after deletion."
+      ]
+    },
+    "0.8.5": {
+      "date": "2024-12-24",
+      "notes": [
+        "Support progress and notes sync across devices.",
+        "Support for Non-ASCII characters in custom CSS.",
+        "Support to disable click-to-flip."
+      ]
+    },
+    "0.8.3": {
+      "date": "2024-12-12",
+      "notes": [
+        "Support popover footnotes.",
+        "Support left / right popover on vertical writing documents.",
+        "Support loading additional fonts."
+      ]
+    },
+    "0.8.2": {
+      "date": "2024-12-06",
+      "notes": [
+        "Support file associations for one-click open with Readest.",
+        "Support APP auto updater.",
+        "Support online web version."
+      ]
+    },
+    "0.7.9": {
+      "date": "2024-12-01",
+      "notes": [
+        "Initial release with full functionality for ePub rendering.",
+        "Support multi-book reading with Parallel Read."
+      ]
+    }
+  }
+}

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

@@ -1,12 +1,12 @@
 [package]
 name = "Readest"
-version = "0.2.0"
+version = "0.2.1"
 description = "Your online library"
 authors = ["Bilingify LLC"]
 license = ""
 repository = ""
 edition = "2021"
-rust-version = "1.71"
+rust-version = "1.77.2"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
@@ -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"
@@ -32,6 +41,9 @@ tauri-plugin-http = "2.0.3"
 tauri-plugin-devtools = "2.0.0"
 tauri-plugin-shell = "2"
 tauri-plugin-process = "2"
+tauri-plugin-oauth = "2"
+tauri-plugin-opener = "2.2.2"
+tauri-plugin-deep-link = "2"
 [patch.crates-io]
 tauri = { path = "../../../packages/tauri/crates/tauri" }
 
@@ -42,4 +54,6 @@ rand = "0.8"
 
 [target.'cfg(any(target_os = "macos", windows, target_os = "linux"))'.dependencies]
 tauri-plugin-cli = "2"
+tauri-plugin-single-instance = "2.2.0"
 tauri-plugin-updater = "2"
+tauri-plugin-window-state = "2.2.0"

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

@@ -44,6 +44,9 @@
       "allow": [
         {
           "url": "https://*.deepl.com"
+        },
+        {
+          "url": "https://*.cloudflarestorage.com"
         }
       ]
     },
@@ -51,13 +54,21 @@
     "os:default",
     "core:window:default",
     "core:window:allow-close",
+    "core:window:allow-center",
     "core:window:allow-minimize",
+    "core:window:allow-maximize",
+    "core:window:allow-set-size",
+    "core:window:allow-set-focus",
+    "core:window:allow-is-maximized",
     "core:window:allow-start-dragging",
     "core:window:allow-toggle-maximize",
     "shell:default",
-    "updater:default",
     "process:default",
+    "process:allow-exit",
     "process:allow-restart",
-    "cli:default"
+    "oauth:allow-start",
+    "oauth:allow-cancel",
+    "opener:default",
+    "deep-link:default"
   ]
 }

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

@@ -0,0 +1,10 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "desktop-capability",
+  "windows": ["main"],
+  "platforms": ["linux", "macOS", "windows"],
+  "permissions": [
+    "updater:default",
+    "cli:default"
+   ]
+}

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

@@ -9,16 +9,20 @@ extern crate objc;
 #[cfg(target_os = "macos")]
 mod menu;
 #[cfg(target_os = "macos")]
-mod tauri_traffic_light_positioner_plugin;
+mod traffic_light_plugin;
+
+mod transfer_file;
+use transfer_file::{download_file, upload_file};
 
 #[cfg(target_os = "macos")]
 use tauri::TitleBarStyle;
 
 use std::path::PathBuf;
+use tauri::{command, Window};
 use tauri::{AppHandle, Emitter, Manager, Url};
 use tauri::{WebviewUrl, WebviewWindowBuilder};
-use tauri_plugin_dialog;
 use tauri_plugin_fs::FsExt;
+use tauri_plugin_oauth::start;
 
 #[cfg(desktop)]
 use tauri::Listener;
@@ -28,12 +32,12 @@ fn allow_file_in_scopes(app: &AppHandle, files: Vec<PathBuf>) {
     let fs_scope = app.fs_scope();
     let asset_protocol_scope = app.asset_protocol_scope();
     for file in &files {
-        if let Err(e) = fs_scope.allow_file(&file) {
+        if let Err(e) = fs_scope.allow_file(file) {
             eprintln!("Failed to allow file in fs_scope: {}", e);
         } else {
             println!("Allowed file in fs_scope: {:?}", file);
         }
-        if let Err(e) = asset_protocol_scope.allow_file(&file) {
+        if let Err(e) = asset_protocol_scope.allow_file(file) {
             eprintln!("Failed to allow file in asset_protocol_scope: {}", e);
         } else {
             println!("Allowed file in asset_protocol_scope: {:?}", file);
@@ -58,18 +62,59 @@ fn set_window_open_with_files(app: &AppHandle, files: Vec<PathBuf>) {
     }
 }
 
+#[command]
+async fn start_server(window: Window) -> Result<u16, String> {
+    start(move |url| {
+        // Because of the unprotected localhost port, you must verify the URL here.
+        // Preferebly send back only the token, or nothing at all if you can handle everything else in Rust.
+        let _ = window.emit("redirect_uri", url);
+    })
+    .map_err(|err| err.to_string())
+}
+
+#[derive(Clone, serde::Serialize)]
+struct Payload {
+    args: Vec<String>,
+    cwd: String,
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     let builder = tauri::Builder::default()
-        .plugin(tauri_plugin_updater::Builder::new().build())
+        .plugin(tauri_plugin_process::init())
+        .plugin(tauri_plugin_oauth::init())
+        .invoke_handler(tauri::generate_handler![
+            start_server,
+            download_file,
+            upload_file
+        ])
         .plugin(tauri_plugin_shell::init())
+        .plugin(tauri_plugin_opener::init())
         .plugin(tauri_plugin_http::init())
         .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_fs::init());
 
+    #[cfg(desktop)]
+    let builder = builder.plugin(tauri_plugin_single_instance::init(|app, argv, cwd| {
+        let _ = app
+            .get_webview_window("main")
+            .expect("no main window")
+            .set_focus();
+        app.emit("single-instance", Payload { args: argv, cwd })
+            .unwrap();
+    }));
+
+    let builder = builder.plugin(tauri_plugin_deep_link::init());
+
+    #[cfg(desktop)]
+    let builder = builder.plugin(tauri_plugin_updater::Builder::new().build());
+
+    #[cfg(desktop)]
+    let builder = builder.plugin(tauri_plugin_window_state::Builder::default().build());
+
     #[cfg(target_os = "macos")]
-    let builder = builder.plugin(tauri_traffic_light_positioner_plugin::init());
+    let builder = builder.plugin(traffic_light_plugin::init());
 
     builder
         .setup(|#[allow(unused_variables)] app| {
@@ -78,7 +123,7 @@ pub fn run() {
                 let mut files = Vec::new();
                 // NOTICE: `args` may include URL protocol (`your-app-protocol://`)
                 // or arguments (`--`) if your app supports them.
-                // files may aslo be passed as `file://path/to/file`
+                // files may also be passed as `file://path/to/file`
                 for maybe_file in std::env::args().skip(1) {
                     // skip flags like -f or --flag
                     if maybe_file.starts_with("-") {
@@ -104,8 +149,25 @@ pub fn run() {
                     });
                 }
             }
+
             #[cfg(desktop)]
-            app.handle().plugin(tauri_plugin_cli::init())?;
+            {
+                app.handle().plugin(tauri_plugin_cli::init())?;
+
+                let app_handle = app.handle().clone();
+                app.listen("window-ready", move |_| {
+                    app_handle.get_webview_window("main").unwrap()
+                        .eval("window.__READEST_CLI_ACCESS = true; window.__READEST_UPDATER_ACCESS = true;")
+                        .expect("Failed to set cli access config");
+                });
+            }
+
+            #[cfg(any(windows, target_os = "linux"))]
+            {
+                use tauri_plugin_deep_link::DeepLinkExt;
+                app.deep_link().register_all()?;
+            }
+
             #[cfg(desktop)]
             if cfg!(debug_assertions) {
                 app.handle().plugin(
@@ -114,28 +176,36 @@ pub fn run() {
                         .build(),
                 )?;
             }
-            let win_builder = WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
-                .title("")
+
+            let win_builder = WebviewWindowBuilder::new(app, "main", WebviewUrl::default());
+
+            #[cfg(desktop)]
+            let win_builder = win_builder
                 .inner_size(800.0, 600.0)
-                .resizable(true)
-                .maximized(true);
+                .resizable(true);
 
             #[cfg(target_os = "macos")]
             let win_builder = win_builder
                 .decorations(true)
-                .title_bar_style(TitleBarStyle::Overlay);
+                .title_bar_style(TitleBarStyle::Overlay)
+                .title("");
 
-            #[cfg(not(target_os = "macos"))]
-            let win_builder = win_builder.decorations(false).transparent(true);
+            #[cfg(all(not(target_os = "macos"), desktop))]
+            let win_builder = win_builder
+                .decorations(false)
+                .transparent(true)
+                .visible(false)
+                .shadow(true)
+                .title("Readest");
 
             win_builder.build().unwrap();
             // let win = win_builder.build().unwrap();
             // win.open_devtools();
 
             #[cfg(target_os = "macos")]
-            menu::setup_macos_menu(&app.handle())?;
+            menu::setup_macos_menu(app.handle())?;
 
-            app.handle().emit("window-ready", {}).unwrap();
+            app.handle().emit("window-ready", ()).unwrap();
 
             Ok(())
         })
@@ -144,7 +214,7 @@ pub fn run() {
         .run(
             #[allow(unused_variables)]
             |app_handle, event| {
-                #[cfg(any(target_os = "macos", target_os = "ios"))]
+                #[cfg(target_os = "macos")]
                 if let tauri::RunEvent::Opened { urls } = event {
                     let files = urls
                         .into_iter()
@@ -152,7 +222,7 @@ pub fn run() {
                         .collect::<Vec<_>>();
 
                     let app_handler_clone = app_handle.clone();
-                    allow_file_in_scopes(&app_handle, files.clone());
+                    allow_file_in_scopes(app_handle, files.clone());
                     app_handle.listen("window-ready", move |_| {
                         println!("Window is ready, proceeding to handle files.");
                         set_window_open_with_files(&app_handler_clone, files.clone());

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

@@ -1,7 +1,7 @@
 use tauri::menu::MenuEvent;
 use tauri::menu::{SubmenuBuilder, HELP_SUBMENU_ID};
 use tauri::AppHandle;
-use tauri_plugin_shell::ShellExt;
+use tauri_plugin_opener::OpenerExt;
 
 pub fn setup_macos_menu(app: &AppHandle) -> tauri::Result<()> {
     let global_menu = app.menu().unwrap();
@@ -27,17 +27,12 @@ pub fn setup_macos_menu(app: &AppHandle) -> tauri::Result<()> {
 }
 
 pub fn handle_menu_event(app: &AppHandle, event: &MenuEvent) {
+    let opener = app.opener();
     if event.id() == "privacy_policy" {
-        if let Err(e) = app.shell().open("https://readest.com/privacy-policy", None) {
-            eprintln!("Failed to open privacy policy: {}", e);
-        }
+        let _ = opener.open_url("https://readest.com/privacy-policy", None::<&str>);
     } else if event.id() == "report_issue" {
-        if let Err(e) = app.shell().open("mailto:support@bilingify.com", None) {
-            eprintln!("Failed to open mail client: {}", e);
-        }
+        let _ = opener.open_url("https://github.com/readest/readest/issues", None::<&str>);
     } else if event.id() == "readest_help" {
-        if let Err(e) = app.shell().open("https://readest.com/support", None) {
-            eprintln!("Failed to open support page: {}", e);
-        }
+        let _ = opener.open_url("https://readest.com/support", None::<&str>);
     }
 }

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

@@ -25,7 +25,6 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
                     setup_traffic_light_positioner(window);
                 }
             });
-            return;
         })
         .build()
 }
@@ -118,7 +117,7 @@ pub fn setup_traffic_light_positioner<R: Runtime>(window: Window<R>) {
         }
         extern "C" fn on_window_did_resize<R: Runtime>(this: &Object, _cmd: Sel, notification: id) {
             unsafe {
-                with_window_state(&*this, |state: &mut WindowState<R>| {
+                with_window_state(this, |state: &mut WindowState<R>| {
                     let id = state
                         .window
                         .ns_window()
@@ -216,7 +215,7 @@ pub fn setup_traffic_light_positioner<R: Runtime>(window: Window<R>) {
             notification: id,
         ) {
             unsafe {
-                with_window_state(&*this, |state: &mut WindowState<R>| {
+                with_window_state(this, |state: &mut WindowState<R>| {
                     state
                         .window
                         .emit("did-enter-fullscreen", ())
@@ -233,7 +232,7 @@ pub fn setup_traffic_light_positioner<R: Runtime>(window: Window<R>) {
             notification: id,
         ) {
             unsafe {
-                with_window_state(&*this, |state: &mut WindowState<R>| {
+                with_window_state(this, |state: &mut WindowState<R>| {
                     state
                         .window
                         .emit("will-enter-fullscreen", ())
@@ -250,7 +249,7 @@ pub fn setup_traffic_light_positioner<R: Runtime>(window: Window<R>) {
             notification: id,
         ) {
             unsafe {
-                with_window_state(&*this, |state: &mut WindowState<R>| {
+                with_window_state(this, |state: &mut WindowState<R>| {
                     state
                         .window
                         .emit("did-exit-fullscreen", ())
@@ -274,7 +273,7 @@ pub fn setup_traffic_light_positioner<R: Runtime>(window: Window<R>) {
             notification: id,
         ) {
             unsafe {
-                with_window_state(&*this, |state: &mut WindowState<R>| {
+                with_window_state(this, |state: &mut WindowState<R>| {
                     state
                         .window
                         .emit("will-exit-fullscreen", ())

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

@@ -1,8 +1,9 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Readest",
-  "version": "../package.json",
+  "mainBinaryName": "readest",
   "identifier": "com.bilingify.readest",
+  "version": "../package.json",
   "build": {
     "frontendDist": "../out",
     "devUrl": "http://localhost:3000",
@@ -13,17 +14,18 @@
     "windows": [],
     "security": {
       "csp": {
-        "default-src": "'self' 'unsafe-inline' blob: customprotocol: asset: http://asset.localhost ipc: http://ipc.localhost https://fonts.gstatic.com https://db.onlinewebfonts.com",
-        "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",
-        "img-src": "'self' blob: data: asset: http://asset.localhost",
-        "style-src": "'self' 'unsafe-inline' blob: asset: http://asset.localhost",
+        "default-src": "'self' 'unsafe-inline' blob: customprotocol: asset: http://asset.localhost ipc: http://ipc.localhost",
+        "connect-src": "'self' blob: asset: http://asset.localhost ipc: http://ipc.localhost https://*.sentry.io https://*.posthog.com https://*.deepl.com https://*.wikipedia.org https://*.wiktionary.org https://*.supabase.co https://*.readest.com wss://speech.platform.bing.com https://*.cloudflarestorage.com",
+        "img-src": "'self' blob: data: asset: http://asset.localhost https://*",
+        "style-src": "'self' 'unsafe-inline' blob: asset: http://asset.localhost https://cdn.jsdelivr.net https://fonts.googleapis.com",
+        "font-src": "'self' data: asset: http://asset.localhost tauri: https://fonts.gstatic.com https://db.onlinewebfonts.com https://cdn.jsdelivr.net",
         "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"
       },
       "assetProtocol": {
         "enable": true,
         "scope": {
-          "allow": ["$RESOURCE/**", "$DOCUMENT/**/*", "$APPDATA/**/*", "$TEMP/**/*"],
+          "allow": ["$RESOURCE/**", "$APPDATA/**/*", "$TEMP/**/*"],
           "deny": []
         }
       }
@@ -49,6 +51,11 @@
     "macOS": {
       "minimumSystemVersion": "12.0"
     },
+    "linux": {
+      "deb": {
+        "section": "text"
+      }
+    },
     "fileAssociations": [
       {
         "name": "epub",
@@ -124,9 +131,15 @@
         }
       ]
     },
+    "deep-link": {
+      "mobile": [{ "host": "web.readest.com" }],
+      "desktop": {
+        "schemes": ["readest"]
+      }
+    },
     "updater": {
-      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEU0OTAxMURGQkUzQjFENTQKUldSVUhUdSszeEdRNUExdmFkWnlvYWNYNG5wamkxMmUxRk5SejlMOTJVd28yNXlVTDh6Wld4OC8K",
-      "endpoints": ["https://github.com/chrox/readest/releases/latest/download/latest.json"]
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEJFMEQ1QjE2OEU1NEIzNTEKUldSUnMxU09GbHNOdmpEaWFMT1crRFpEV2VORzQ2MklxaFc0M1R0ci9xY2c1bENXS0xhM1R1L2sK",
+      "endpoints": ["https://github.com/readest/readest/releases/latest/download/latest.json"]
     }
   }
 }

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

@@ -0,0 +1,24 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { handleAuthCallback } from '@/helpers/auth';
+import { useAuth } from '@/context/AuthContext';
+
+export default function AuthCallback() {
+  const router = useRouter();
+  const { login } = useAuth();
+
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  const hash = window.location.hash || '';
+  const params = new URLSearchParams(hash.slice(1));
+
+  const accessToken = params.get('access_token');
+  const refreshToken = params.get('refresh_token');
+  const next = params.get('next') ?? '/';
+
+  handleAuthCallback({ accessToken, refreshToken, next, login, navigate: router.push });
+
+  return null;
+}

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

@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useTheme } from '@/hooks/useTheme';
+
+export default function AuthErrorPage() {
+  const router = useRouter();
+  useTheme();
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      router.push('/auth');
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  }, [router]);
+
+  return (
+    <div className='bg-base-200/50 text-base-content hero h-screen items-center justify-center'>
+      <div className='hero-content text-neutral-content text-center'>
+        <div className='max-w-md'>
+          <h1 className='mb-5 text-5xl font-bold'>Authentication Error</h1>
+          <p className='mb-5'>
+            Something went wrong during the authentication process. Please try again.
+          </p>
+          <p className='mb-5'>You will be redirected to the login page shortly...</p>
+          <button className='btn btn-primary rounded-xl' onClick={() => router.push('/auth')}>
+            Go to Login
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,254 @@
+'use client';
+import clsx from 'clsx';
+import { useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+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';
+
+import { useAuth } from '@/context/AuthContext';
+import { supabase } from '@/utils/supabase';
+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 { start, cancel, onUrl, onInvalidUrl } from '@fabianlars/tauri-plugin-oauth';
+import { openUrl } from '@tauri-apps/plugin-opener';
+import { handleAuthCallback } from '@/helpers/auth';
+
+type OAuthProvider = 'google' | 'apple' | 'azure' | 'github';
+
+interface SingleInstancePayload {
+  args: string[];
+  cwd: string;
+}
+
+interface ProviderLoginProp {
+  provider: OAuthProvider;
+  handleSignIn: (provider: OAuthProvider) => void;
+  Icon: React.ElementType;
+  label: string;
+}
+
+const ProviderLogin: React.FC<ProviderLoginProp> = ({ provider, handleSignIn, Icon, label }) => {
+  return (
+    <button
+      onClick={() => handleSignIn(provider)}
+      className={clsx(
+        'mb-2 flex w-64 items-center justify-center rounded border p-2.5',
+        'bg-base-100 border-gray-300 shadow-sm transition hover:bg-gray-50',
+      )}
+    >
+      <Icon />
+      <span className='text-neutral-content/70 px-2 text-sm'>{label}</span>
+    </button>
+  );
+};
+
+export default function AuthPage() {
+  const router = useRouter();
+  const { login } = useAuth();
+  const { envConfig } = useEnv();
+  const { isDarkMode } = useTheme();
+  const { settings, setSettings, saveSettings } = useSettingsStore();
+  const [port, setPort] = useState<number | null>(null);
+  const isOAuthServerRunning = useRef(false);
+  const [isMounted, setIsMounted] = useState(false);
+
+  const signIn = async (provider: OAuthProvider) => {
+    if (!supabase) {
+      throw new Error('No backend connected');
+    }
+    supabase.auth.signOut();
+    const { data, error } = await supabase.auth.signInWithOAuth({
+      provider,
+      options: {
+        skipBrowserRedirect: true,
+        redirectTo:
+          process.env.NODE_ENV === 'production'
+            ? 'readest://auth/callback'
+            : `http://localhost:${port}`,
+      },
+    });
+
+    if (error) {
+      console.error('Authentication error:', error);
+      return;
+    }
+    openUrl(data.url);
+  };
+
+  const handleOAuthUrl = async (url: string) => {
+    console.log('Received OAuth URL:', url);
+    const hashMatch = url.match(/#(.*)/);
+    if (hashMatch) {
+      const hash = hashMatch[1];
+      const params = new URLSearchParams(hash);
+      const accessToken = params.get('access_token');
+      const refreshToken = params.get('refresh_token');
+      const next = params.get('next') ?? '/';
+      if (accessToken) {
+        handleAuthCallback({ accessToken, refreshToken, next, login, navigate: router.push });
+      }
+    }
+  };
+
+  const startTauriOAuth = async () => {
+    try {
+      if (process.env.NODE_ENV === 'production') {
+        const { getCurrentWindow } = await import('@tauri-apps/api/window');
+        const currentWindow = getCurrentWindow();
+        currentWindow.listen('single-instance', ({ event, payload }) => {
+          console.log('Received deep link:', event, payload);
+          const { args } = payload as SingleInstancePayload;
+          if (args?.[1]) {
+            handleOAuthUrl(args[1]);
+          }
+        });
+        await onOpenUrl((urls) => {
+          urls.forEach((url) => {
+            handleOAuthUrl(url);
+          });
+        });
+      } else {
+        const port = await start();
+        setPort(port);
+        console.log(`OAuth server started on port ${port}`);
+
+        await onUrl(handleOAuthUrl);
+        await onInvalidUrl((url) => {
+          console.log('Received invalid OAuth URL:', url);
+        });
+      }
+    } catch (error) {
+      console.error('Error starting OAuth server:', error);
+    }
+  };
+
+  const stopTauriOAuth = async () => {
+    try {
+      if (port) {
+        await cancel(port);
+        console.log('OAuth server stopped');
+      }
+    } catch (error) {
+      console.error('Error stopping OAuth server:', error);
+    }
+  };
+
+  const handleGoBack = () => {
+    // Keep login false to avoid infinite loop to redirect to the login page
+    settings.keepLogin = false;
+    setSettings(settings);
+    saveSettings(envConfig, settings);
+    router.back();
+  };
+
+  useEffect(() => {
+    if (!isTauriAppPlatform()) return;
+    if (isOAuthServerRunning.current) return;
+    isOAuthServerRunning.current = true;
+
+    startTauriOAuth();
+    return () => {
+      isOAuthServerRunning.current = false;
+      stopTauriOAuth();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const { data: subscription } = supabase.auth.onAuthStateChange((_event, session) => {
+      if (session?.access_token && session.user) {
+        login(session.access_token, session.user);
+        const redirectTo = new URLSearchParams(window.location.search).get('redirect');
+        router.push(redirectTo ?? '/library');
+      }
+    });
+
+    return () => {
+      subscription?.subscription.unsubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router]);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return null;
+  }
+
+  // For tauri app development, use a custom OAuth server to handle the OAuth callback
+  // For tauri app production, use deeplink to handle the OAuth callback
+  // For web app, use the built-in OAuth callback page /auth/callback
+  return isTauriAppPlatform() ? (
+    <div className='flex pt-11'>
+      <button
+        onClick={handleGoBack}
+        className='btn btn-ghost fixed left-3 top-11 h-8 min-h-8 w-8 p-0'
+      >
+        <IoArrowBack className='text-base-content' />
+      </button>
+      <div style={{ maxWidth: '420px', margin: 'auto', padding: '2rem' }}>
+        <ProviderLogin
+          provider='google'
+          handleSignIn={signIn}
+          Icon={FcGoogle}
+          label='Sign in with Google'
+        />
+        <ProviderLogin
+          provider='apple'
+          handleSignIn={signIn}
+          Icon={FaApple}
+          label='Sign in with Apple'
+        />
+        <ProviderLogin
+          provider='azure'
+          handleSignIn={signIn}
+          Icon={VscAzure}
+          label='Sign in with Azure'
+        />
+        <ProviderLogin
+          provider='github'
+          handleSignIn={signIn}
+          Icon={FaGithub}
+          label='Sign in with GitHub'
+        />
+        <hr className='my-3 mt-6 w-64 border-t border-gray-200' />
+        <Auth
+          supabaseClient={supabase}
+          appearance={{ theme: ThemeSupa }}
+          theme={isDarkMode ? 'dark' : 'light'}
+          magicLink={true}
+          providers={[]}
+          redirectTo={`http://localhost:${port}`}
+        />
+      </div>
+    </div>
+  ) : (
+    <div style={{ maxWidth: '420px', margin: 'auto', padding: '2rem', paddingTop: '4rem' }}>
+      <button
+        onClick={handleGoBack}
+        className='btn btn-ghost fixed left-10 top-6 h-8 min-h-8 w-8 p-0'
+      >
+        <IoArrowBack className='text-base-content' />
+      </button>
+      <Auth
+        supabaseClient={supabase}
+        appearance={{ theme: ThemeSupa }}
+        theme={isDarkMode ? 'dark' : 'light'}
+        magicLink={true}
+        providers={['google', 'apple', 'azure', 'github']}
+        redirectTo='/auth/callback'
+      />
+    </div>
+  );
+}

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

@@ -1,26 +1,61 @@
 import * as React from 'react';
-import { AuthProvider } from '@/context/AuthContext';
-import { EnvProvider } from '@/context/EnvContext';
-import { CSPostHogProvider } from '@/context/PHContext';
+import Providers from '@/components/Providers';
 
 import '../styles/globals.css';
 import '../styles/fonts.css';
 
 const url = 'https://web.readest.com/';
 const title = 'Readest — Where You Read, Digest and Get Insight';
-const description = 'Readest brings your entire library to your fingertips.';
+const description =
+  'Discover Readest, the ultimate online ebook reader for immersive and organized reading. ' +
+  'Enjoy seamless access to your digital library, powerful tools for highlighting, bookmarking, ' +
+  'and note-taking, and support for multiple book views. ' +
+  'Perfect for deep reading, analysis, and understanding. Explore now!';
 const previewImage = 'https://cdn.readest.com/images/open_graph_preview_read_now.png';
 
+export const metadata = {
+  title,
+  description,
+  generator: 'Next.js',
+  manifest: '/manifest.json',
+  keywords: ['epub', 'pdf', 'ebook', 'reader', 'readest', 'pwa'],
+  authors: [
+    {
+      name: 'readest',
+      url: 'https://github.com/readest/readest',
+    },
+  ],
+  icons: [
+    { rel: 'apple-touch-icon', url: '/apple-touch-icon.png' },
+    { rel: 'icon', url: '/icon.png' },
+  ],
+};
+
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  viewportFit: 'cover',
+  themeColor: 'white',
+};
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang='en'>
+    <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' />
         <meta name='description' content={description} />
         <meta property='og:url' content={url} />
         <meta property='og:type' content='website' />
@@ -34,13 +69,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <meta name='twitter:description' content={description} />
         <meta name='twitter:image' content={previewImage} />
       </head>
-      <CSPostHogProvider>
-        <body>
-          <EnvProvider>
-            <AuthProvider>{children}</AuthProvider>
-          </EnvProvider>
-        </body>
-      </CSPostHogProvider>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }

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

@@ -0,0 +1,138 @@
+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 { useResponsiveSize } from '@/hooks/useResponsiveSize';
+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);
+
+  return (
+    <div
+      className='book-item 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'>{book.title}</span>
+            </div>
+            <div className='h-1/6'></div>
+            <div className='flex h-1/3 items-center justify-center'>
+              <span className='text-neutral-content/50 line-clamp-1 text-base'>{book.author}</span>
+            </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,19 +1,27 @@
 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 { 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';
 import { useEnv } from '@/context/EnvContext';
 import { useLibraryStore } from '@/store/libraryStore';
+import { useSettingsStore } from '@/store/settingsStore';
+import { useTranslation } from '@/hooks/useTranslation';
 import { navigateToReader } from '@/utils/nav';
+import { getOSPlatform } from '@/utils/misc';
+import { getFilename } from '@/utils/book';
+import { FILE_REVEAL_LABELS, FILE_REVEAL_PLATFORMS } from '@/utils/os';
+import { isTauriAppPlatform } from '@/services/environment';
+
 import Alert from '@/components/Alert';
 import Spinner from '@/components/Spinner';
+import BookDetailModal from '@/components/BookDetailModal';
+import BookItem from './BookItem';
+import GroupItem from './GroupItem';
 
 type BookshelfItem = Book | BooksGroup;
 
@@ -21,43 +29,83 @@ 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)];
     if (booksGroup) {
       booksGroup.books.push(book);
-      booksGroup.lastUpdated = Math.max(acc[groupIndex]!.lastUpdated, book.lastUpdated);
+      booksGroup.updatedAt = Math.max(acc[groupIndex]!.updatedAt, book.updatedAt);
     } else {
       acc.push({
         name: book.group,
         books: [book],
-        lastUpdated: book.lastUpdated,
+        updatedAt: book.updatedAt,
       });
     }
     return acc;
   }, []);
   const ungroupedBooks: Book[] = groups.find((group) => group.name === UNGROUPED_NAME)?.books || [];
   const groupedBooks: BooksGroup[] = groups.filter((group) => group.name !== UNGROUPED_NAME);
-  return [...ungroupedBooks, ...groupedBooks].sort((a, b) => b.lastUpdated - a.lastUpdated);
+  return [...ungroupedBooks, ...groupedBooks].sort((a, b) => b.updatedAt - a.updatedAt);
 };
 
 interface BookshelfProps {
   libraryBooks: Book[];
   isSelectMode: boolean;
-  onImportBooks: () => void;
+  handleImportBooks: () => void;
+  handleBookUpload: (book: Book) => void;
+  handleBookDownload: (book: Book) => void;
+  handleBookDelete: (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,
+  booksTransferProgress,
+}) => {
+  const _ = useTranslation();
   const router = useRouter();
   const searchParams = useSearchParams();
   const { envConfig, appService } = useEnv();
-  const { deleteBook } = useLibraryStore();
+  const { settings } = useSettingsStore();
+  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 [importBookUrl] = useState(searchParams?.get('url') || '');
   const isImportingBook = useRef(false);
+  const [showDetailsBook, setShowDetailsBook] = useState<Book | null>(null);
+
+  const makeBookAvailable = async (book: Book) => {
+    if (book.uploadedAt && !book.downloadedAt) {
+      let available = false;
+      try {
+        await handleBookDownload(book);
+        updateBook(envConfig, book);
+        available = true;
+      } finally {
+        return available;
+      }
+    }
+    return true;
+  };
+
+  const showBookDetailsModal = async (book: Book) => {
+    if (await makeBookAvailable(book)) {
+      setShowDetailsBook(book);
+    }
+  };
+
+  const dismissBookDetailsModal = () => {
+    setShowDetailsBook(null);
+  };
 
   const { setLibrary } = useLibraryStore();
 
@@ -86,14 +134,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]);
     }
   };
 
@@ -108,11 +158,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([]);
@@ -123,106 +173,105 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
     setShowDeleteAlert(true);
   };
 
+  const bookContextMenuHandler = async (book: Book, e: React.MouseEvent) => {
+    if (!isTauriAppPlatform()) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const osPlatform = getOSPlatform();
+    const fileRevealLabel =
+      FILE_REVEAL_LABELS[osPlatform as FILE_REVEAL_PLATFORMS] || FILE_REVEAL_LABELS.default;
+    const openBookMenuItem = await MenuItem.new({
+      text: isSelectMode ? _('Select Book') : _('Open Book'),
+      action: async () => {
+        handleBookClick(book);
+      },
+    });
+    const showBookInFinderMenuItem = await MenuItem.new({
+      text: _(fileRevealLabel),
+      action: async () => {
+        const folder = `${settings.localBooksDir}/${getFilename(book)}`;
+        revealItemInDir(folder);
+      },
+    });
+    const showBookDetailsMenuItem = await MenuItem.new({
+      text: _('Show Book Details'),
+      action: async () => {
+        showBookDetailsModal(book);
+      },
+    });
+    const uploadBookMenuItem = await MenuItem.new({
+      text: _('Upload Book'),
+      action: async () => {
+        handleBookUpload(book);
+      },
+    });
+    const deleteBookMenuItem = await MenuItem.new({
+      text: _('Delete'),
+      action: async () => {
+        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();
+  };
+
   return (
     <div className='bookshelf'>
       <div className='grid grid-cols-3 gap-0 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8'>
         {bookshelfItems.map((item, index) => (
           <div
             key={`library-item-${index}`}
-            className='hover:bg-base-300/50 flex h-full flex-col p-4'
+            className='hover:bg-base-300/50 group flex h-full flex-col p-4'
           >
             <div className='flex-grow'>
               {'format' in item ? (
-                <div
-                  className='book-item cursor-pointer'
-                  onClick={() => handleBookClick(item.hash)}
-                >
-                  <div key={(item as Book).hash} className='bg-base-100 shadow-md'>
-                    <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 size={20} className='fill-blue-500' />
-                          ) : (
-                            <MdCheckCircleOutline
-                              size={20}
-                              className='fill-gray-300 drop-shadow-sm'
-                            />
-                          )}
-                        </div>
-                      )}
-                    </div>
-                  </div>
-                  <div className='card-body p-0 pt-2'>
-                    <h4 className='card-title line-clamp-1 text-[0.6em] text-xs font-semibold'>
-                      {(item as Book).title}
-                    </h4>
-                  </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>
-                  ))}
-                  <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>
+            <span>{_('Open')}</span>
           </button>
           <button onClick={deleteSelectedBooks} className='flex items-center space-x-2'>
             <MdDelete className='fill-red-500' />
-            <span className='text-red-500'>Delete</span>
+            <span className='text-red-500'>{_('Delete')}</span>
           </button>
         </div>
       )}
@@ -233,12 +282,19 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
       )}
       {showDeleteAlert && (
         <Alert
-          title='Confirm Deletion'
-          message='Are you sure to delete the selected books?'
+          title={_('Confirm Deletion')}
+          message={_('Are you sure to delete the selected books?')}
           onClickCancel={() => setShowDeleteAlert(false)}
           onClickConfirm={confirmDelete}
         />
       )}
+      {showDetailsBook && (
+        <BookDetailModal
+          isOpen={!!showDetailsBook}
+          book={showDetailsBook}
+          onClose={dismissBookDetailsModal}
+        />
+      )}
     </div>
   );
 };

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

@@ -0,0 +1,35 @@
+import Image from 'next/image';
+import { BooksGroup } from '@/types/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'>{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'>{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

@@ -3,10 +3,16 @@ import React, { useEffect, useRef } from 'react';
 import { FaSearch } from 'react-icons/fa';
 import { PiPlus } from 'react-icons/pi';
 import { PiSelectionAllDuotone } from 'react-icons/pi';
+import { MdOutlineMenu } from 'react-icons/md';
 
 import { useEnv } from '@/context/EnvContext';
+import { useTranslation } from '@/hooks/useTranslation';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 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;
@@ -19,9 +25,11 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
   onImportBooks,
   onToggleSelectMode,
 }) => {
+  const _ = useTranslation();
   const { appService } = useEnv();
   const { isTrafficLightVisible } = useTrafficLight();
   const headerRef = useRef<HTMLDivElement>(null);
+  const iconSize16 = useResponsiveSize(16);
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -43,14 +51,14 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
         isTrafficLightVisible ? 'pl-16' : 'pl-2',
       )}
     >
-      <div className='flex items-center justify-between space-x-6'>
-        <div className='exclude-title-bar-mousedown sm:w relative flex w-full items-center pl-4'>
+      <div className='flex items-center justify-between 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',
@@ -59,24 +67,27 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
             )}
           />
           <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='Add books'>
-                <PiPlus tabIndex={-1} className='h-5 w-5' />
-              </div>
-              <ul
-                tabIndex={-1}
-                className='dropdown-content dropdown-center menu rounded-box z-[1] mt-3 w-52 p-2 shadow'
+            <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')}
+              className='h-6'
+            >
+              <div
+                className='lg:tooltip lg:tooltip-bottom cursor-pointer'
+                data-tip={_('Select Books')}
               >
-                <li>
-                  <button className='text-base-content' onClick={onImportBooks}>
-                    From Local File
-                  </button>
-                </li>
-              </ul>
-            </div>
-            <button onClick={onToggleSelectMode} aria-label='Select Multiple Books' className='h-6'>
-              <div className='lg:tooltip lg:tooltip-bottom cursor-pointer' data-tip='Select books'>
                 <PiSelectionAllDuotone
                   role='button'
                   className={`h-6 w-6 ${isSelectMode ? 'fill-gray-400' : 'fill-gray-500'}`}
@@ -85,12 +96,23 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
             </button>
           </div>
         </div>
-        <WindowButtons
-          headerRef={headerRef}
-          showMinimize={!isTrafficLightVisible && appService?.appPlatform !== 'web'}
-          showMaximize={!isTrafficLightVisible && appService?.appPlatform !== 'web'}
-          showClose={!isTrafficLightVisible && appService?.appPlatform !== 'web'}
-        />
+        <div className='flex h-full items-center gap-x-4'>
+          <Dropdown
+            className='exclude-title-bar-mousedown dropdown-bottom dropdown-end'
+            buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
+            toggleButton={<MdOutlineMenu size={iconSize16} />}
+          >
+            <SettingsMenu />
+          </Dropdown>
+          {!isTrafficLightVisible && appService?.appPlatform !== 'web' && (
+            <WindowButtons
+              headerRef={headerRef}
+              showMinimize={true}
+              showMaximize={true}
+              showClose={true}
+            />
+          )}
+        </div>
       </div>
     </div>
   );

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

@@ -0,0 +1,43 @@
+import type React from 'react';
+import { memo, useMemo } from 'react';
+import type { Book } from '@/types/book';
+
+interface ReadingProgressProps {
+  book: Book;
+}
+
+const getProgressPercentage = (book: Book) => {
+  if (!book.progress || !book.progress[1]) {
+    return null;
+  }
+  if (book.progress && book.progress[1] === 1) {
+    return 100;
+  }
+  return Math.round((book.progress[0] / book.progress[1]) * 100);
+};
+
+const ReadingProgress: React.FC<ReadingProgressProps> = memo(
+  ({ book }) => {
+    const progressPercentage = useMemo(() => getProgressPercentage(book), [book]);
+
+    if (progressPercentage === null) {
+      return null;
+    }
+
+    return (
+      <div className='text-neutral-content/70 flex justify-between text-xs'>
+        <span>{progressPercentage}%</span>
+      </div>
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.book.hash === nextProps.book.hash &&
+      prevProps.book.updatedAt === nextProps.book.updatedAt
+    );
+  },
+);
+
+ReadingProgress.displayName = 'ReadingProgress';
+
+export default ReadingProgress;

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

@@ -0,0 +1,158 @@
+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 { 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;
+}
+
+const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
+  const _ = useTranslation();
+  const router = useRouter();
+  const { envConfig } = useEnv();
+  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);
+    setIsDropdownOpen?.(false);
+  };
+  const downloadReadest = () => {
+    window.open(DOWNLOAD_READEST_URL, '_blank');
+    setIsDropdownOpen?.(false);
+  };
+
+  const handleUserLogin = () => {
+    navigateToLogin(router);
+    setIsDropdownOpen?.(false);
+  };
+
+  const handleUserLogout = () => {
+    logout();
+    settings.keepLogin = false;
+    setSettings(settings);
+    saveSettings(envConfig, settings);
+    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'];
+  const userDisplayName = userFullName ? userFullName.split(' ')[0] : null;
+
+  return (
+    <div
+      tabIndex={0}
+      className='settings-menu dropdown-content no-triangle border-base-100 z-20 mt-3 w-72 shadow-2xl'
+    >
+      {user ? (
+        <MenuItem
+          label={
+            userDisplayName
+              ? _('Logged in as {{userDisplayName}}', { userDisplayName })
+              : _('Logged in')
+          }
+          labelClass='!max-w-40'
+          icon={
+            avatarUrl ? (
+              <Image
+                src={avatarUrl}
+                alt={_('User avatar')}
+                className='h-5 w-5 rounded-full'
+                referrerPolicy='no-referrer'
+                width={20}
+                height={20}
+              />
+            ) : (
+              <PiUserCircleCheck />
+            )
+          }
+        >
+          <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} />
+    </div>
+  );
+};
+
+export default SettingsMenu;

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

@@ -0,0 +1,114 @@
+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 const useBooksSync = () => {
+  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 {
+            updatedLibrary.push(newBook);
+            await appService?.downloadBook(newBook, true);
+            newBook.coverImageUrl = await appService?.generateCoverImageUrl(newBook);
+          } catch {
+            console.error('Failed to download book:', newBook);
+          }
+        }
+      }
+    };
+    await Promise.all(syncedBooks.map(processNewBook));
+    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/hooks/useDemoBooks.ts

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useEnv } from '@/context/EnvContext';
 import { Book } from '@/types/book';
 import { getUserLang } from '@/utils/misc';
+import { isWebAppPlatform } from '@/services/environment';
 
 import libraryEn from '@/data/demo/library.en.json';
 import libraryZh from '@/data/demo/library.zh.json';
@@ -40,7 +41,7 @@ export const useDemoBooks = () => {
     };
 
     const demoBooksFetchedFlag = localStorage.getItem('demoBooksFetched');
-    if (!demoBooksFetchedFlag) {
+    if (isWebAppPlatform() && !demoBooksFetchedFlag) {
       fetchDemoBooks();
       localStorage.setItem('demoBooksFetched', 'true');
     }

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

@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import * as React from 'react';
 import { useState, useRef, useEffect, Suspense } from 'react';
 import { useRouter } from 'next/navigation';
@@ -7,54 +8,86 @@ import { useRouter } from 'next/navigation';
 import { Book } from '@/types/book';
 import { AppService } from '@/types/system';
 import { navigateToReader } from '@/utils/nav';
+import { getBaseFilename, listFormater } from '@/utils/book';
+import { eventDispatcher } from '@/utils/event';
 import { parseOpenWithFiles } from '@/helpers/cli';
-import { isTauriAppPlatform } from '@/services/environment';
+import { isTauriAppPlatform, hasUpdater } from '@/services/environment';
 import { checkForAppUpdates } from '@/helpers/updater';
 import { FILE_ACCEPT_FORMATS, SUPPORTED_FILE_EXTS } from '@/services/constants';
 
 import { useEnv } from '@/context/EnvContext';
+import { useAuth } from '@/context/AuthContext';
 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 { ProgressPayload } from '@/utils/transfer';
+import { throttle } from '@/utils/throttle';
 
 const LibraryPage = () => {
   const router = useRouter();
   const { envConfig, appService } = useEnv();
+  const { token, user } = useAuth();
   const {
     library: libraryBooks,
+    updateBook,
     setLibrary,
     checkOpenWithBooks,
     clearOpenWithBooks,
   } = useLibraryStore();
-  useTheme();
-  const { setSettings } = useSettingsStore();
+  const _ = useTranslation();
+  const { updateAppTheme } = useTheme();
+  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 [booksTransferProgress, setBooksTransferProgress] = useState<{
+    [key: string]: number | null;
+  }>({});
   const demoBooks = useDemoBooks();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const { pullLibrary, pushLibrary } = useBooksSync();
+
+  usePullToRefresh(containerRef, pullLibrary);
 
   useEffect(() => {
-    const doAppUpdates = async () => {
-      if (isTauriAppPlatform()) {
-        await checkForAppUpdates();
+    updateAppTheme('base-200');
+    // 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[]) => {
       const bookIds: string[] = [];
       for (const file of openWithFiles) {
-        const book = await appService.importBook(file, libraryBooks);
-        if (book) {
-          bookIds.push(book.hash);
+        console.log('Open with book:', file);
+        try {
+          const book = await appService.importBook(file, libraryBooks);
+          if (book) {
+            bookIds.push(book.hash);
+          }
+        } catch (error) {
+          console.log('Failed to import book:', file, error);
         }
       }
       setLibrary(libraryBooks);
@@ -73,6 +106,20 @@ const LibraryPage = () => {
     if (isInitiating.current) return;
     isInitiating.current = true;
 
+    const initLogin = async () => {
+      const appService = await envConfig.getAppService();
+      const settings = await appService.loadSettings();
+      if (token && user) {
+        if (!settings.keepLogin) {
+          settings.keepLogin = true;
+          setSettings(settings);
+          saveSettings(envConfig, settings);
+        }
+      } else if (settings.keepLogin) {
+        router.push('/auth');
+      }
+    };
+
     const loadingTimeout = setTimeout(() => setLoading(true), 300);
     const initLibrary = async () => {
       const appService = await envConfig.getAppService();
@@ -103,6 +150,7 @@ const LibraryPage = () => {
       }
     };
 
+    initLogin();
     initLibrary();
     return () => {
       clearOpenWithBooks();
@@ -129,9 +177,27 @@ const LibraryPage = () => {
 
   const importBooks = async (files: [string | File]) => {
     setLoading(true);
+    const failedFiles = [];
     for (const file of files) {
-      await appService?.importBook(file, libraryBooks);
-      setLibrary(libraryBooks);
+      try {
+        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);
+        failedFiles.push(baseFilename);
+        eventDispatcher.dispatch('toast', {
+          message: _('Failed to import book(s): {{filenames}}', {
+            filenames: listFormater(false).format(failedFiles),
+          }),
+          type: 'error',
+        });
+        console.error('Failed to import book:', filename, error);
+      }
     }
     appService?.saveLibraryBooks(libraryBooks);
     setLoading(false);
@@ -155,6 +221,84 @@ 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 {
+      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;
@@ -191,7 +335,12 @@ const LibraryPage = () => {
   }
 
   return (
-    <div className='library-page rounded-window bg-base-200/50 text-base-content flex h-full min-h-screen select-none flex-col overflow-hidden'>
+    <div
+      className={clsx(
+        'library-page bg-base-200 text-base-content flex h-dvh select-none flex-col overflow-hidden',
+        isTauriAppPlatform() && 'rounded-window',
+      )}
+    >
       <div className='fixed top-0 z-40 w-full'>
         <LibraryHeader
           isSelectMode={isSelectMode}
@@ -206,12 +355,16 @@ const LibraryPage = () => {
       )}
       {libraryLoaded &&
         (libraryBooks.length > 0 ? (
-          <div className='mt-12 flex-grow overflow-auto px-2'>
+          <div ref={containerRef} className='mt-12 flex-grow overflow-auto px-2'>
             <Suspense>
               <Bookshelf
                 libraryBooks={libraryBooks}
                 isSelectMode={isSelectMode}
-                onImportBooks={handleImportBooks}
+                handleImportBooks={handleImportBooks}
+                handleBookUpload={handleBookUpload}
+                handleBookDownload={handleBookDownload}
+                handleBookDelete={handleBookDelete}
+                booksTransferProgress={booksTransferProgress}
               />
             </Suspense>
           </div>
@@ -219,17 +372,21 @@ const LibraryPage = () => {
           <div className='hero h-screen items-center justify-center'>
             <div className='hero-content text-neutral-content text-center'>
               <div className='max-w-md'>
-                <h1 className='mb-5 text-5xl font-bold'>Your Library</h1>
+                <h1 className='mb-5 text-5xl font-bold'>{_('Your Library')}</h1>
                 <p className='mb-5'>
-                  Welcome to your library. You can import your books here and read them anytime.
+                  {_(
+                    'Welcome to your library. You can import your books here and read them anytime.',
+                  )}
                 </p>
                 <button className='btn btn-primary rounded-xl' onClick={handleImportBooks}>
-                  Import Books
+                  {_('Import Books')}
                 </button>
               </div>
             </div>
           </div>
         ))}
+      <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/[ids]/page.tsx

@@ -1,6 +0,0 @@
-import Reader from '../components/Reader';
-
-export default async function Page({ params }: { params: Promise<{ ids: string }> }) {
-  const ids = decodeURIComponent((await params).ids);
-  return <Reader ids={ids} />;
-}

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

@@ -5,28 +5,32 @@ import * as CFI from 'foliate-js/epubcfi.js';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { useReaderStore } from '@/store/readerStore';
+import { useTranslation } from '@/hooks/useTranslation';
 import { useEnv } from '@/context/EnvContext';
 import { BookNote } from '@/types/book';
 import { uniqueId } from '@/utils/misc';
 import Button from '@/components/Button';
+import { getCurrentPage } from '@/utils/book';
 
 interface BookmarkTogglerProps {
   bookKey: string;
 }
 
 const BookmarkToggler: React.FC<BookmarkTogglerProps> = ({ bookKey }) => {
+  const _ = useTranslation();
   const { envConfig } = useEnv();
   const { settings } = useSettingsStore();
-  const { getConfig, saveConfig, updateBooknotes } = useBookDataStore();
+  const { getConfig, saveConfig, getBookData, updateBooknotes } = useBookDataStore();
   const { getProgress, setBookmarkRibbonVisibility } = useReaderStore();
   const config = getConfig(bookKey)!;
   const progress = getProgress(bookKey)!;
+  const bookData = getBookData(bookKey)!;
 
   const [isBookmarked, setIsBookmarked] = useState(false);
 
   const toggleBookmark = () => {
     const { booknotes: bookmarks = [] } = config;
-    const { location: cfi, sectionHref: href, range } = progress;
+    const { location: cfi, range } = progress;
     if (!cfi) return;
     if (!isBookmarked) {
       setIsBookmarked(true);
@@ -36,12 +40,21 @@ const BookmarkToggler: React.FC<BookmarkTogglerProps> = ({ bookKey }) => {
         id: uniqueId(),
         type: 'bookmark',
         cfi,
-        href,
-        text: truncatedText,
+        text: truncatedText ? truncatedText : `${getCurrentPage(bookData.book!, progress)}`,
         note: '',
-        created: Date.now(),
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
       };
-      bookmarks.push(bookmark);
+      const existingBookmark = bookmarks.find(
+        (item) => item.type === 'bookmark' && item.cfi === cfi,
+      );
+      if (existingBookmark) {
+        existingBookmark.deletedAt = null;
+        existingBookmark.updatedAt = Date.now();
+        existingBookmark.text = bookmark.text;
+      } else {
+        bookmarks.push(bookmark);
+      }
       const updatedConfig = updateBooknotes(bookKey, bookmarks);
       if (updatedConfig) {
         saveConfig(envConfig, bookKey, updatedConfig, settings);
@@ -50,14 +63,15 @@ const BookmarkToggler: React.FC<BookmarkTogglerProps> = ({ bookKey }) => {
       setIsBookmarked(false);
       const start = CFI.collapse(cfi);
       const end = CFI.collapse(cfi, true);
-      const updatedConfig = updateBooknotes(
-        bookKey,
-        bookmarks.filter(
-          (item) =>
-            item.type !== 'bookmark' ||
-            CFI.compare(start, item.cfi) * CFI.compare(end, item.cfi) > 0,
-        ),
-      );
+      bookmarks.forEach((item) => {
+        if (
+          item.type === 'bookmark' &&
+          CFI.compare(start, item.cfi) * CFI.compare(end, item.cfi) <= 0
+        ) {
+          item.deletedAt = Date.now();
+        }
+      });
+      const updatedConfig = updateBooknotes(bookKey, bookmarks);
       if (updatedConfig) {
         saveConfig(envConfig, bookKey, updatedConfig, settings);
       }
@@ -72,7 +86,7 @@ const BookmarkToggler: React.FC<BookmarkTogglerProps> = ({ bookKey }) => {
     const start = CFI.collapse(cfi);
     const end = CFI.collapse(cfi, true);
     const locationBookmarked = booknotes
-      .filter((booknote) => booknote.type === 'bookmark')
+      .filter((booknote) => booknote.type === 'bookmark' && !booknote.deletedAt)
       .some((item) => CFI.compare(start, item.cfi) * CFI.compare(end, item.cfi) <= 0);
     setIsBookmarked(locationBookmarked);
     setBookmarkRibbonVisibility(bookKey, locationBookmarked);
@@ -83,13 +97,13 @@ const BookmarkToggler: React.FC<BookmarkTogglerProps> = ({ bookKey }) => {
     <Button
       icon={
         isBookmarked ? (
-          <MdOutlineBookmark size={20} className='text-base-content' />
+          <MdOutlineBookmark className='text-base-content' />
         ) : (
-          <MdOutlineBookmarkAdd size={20} className='text-base-content' />
+          <MdOutlineBookmarkAdd className='text-base-content' />
         )
       }
       onClick={toggleBookmark}
-      tooltip='Bookmark'
+      tooltip={_('Bookmark')}
       tooltipDirection='bottom'
     ></Button>
   );

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

@@ -1,7 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 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';
@@ -11,8 +14,8 @@ import PageInfoView from './PageInfo';
 import Ribbon from './Ribbon';
 import SettingsDialog from './settings/SettingsDialog';
 import Annotator from './annotator/Annotator';
-import { useBookDataStore } from '@/store/bookDataStore';
 import FootnotePopup from './FootnotePopup';
+import HintInfo from './HintInfo';
 
 interface BooksGridProps {
   bookKeys: string[];
@@ -22,9 +25,18 @@ interface BooksGridProps {
 const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
   const { getConfig, getBookData } = useBookDataStore();
   const { getProgress, getViewState, getViewSettings } = useReaderStore();
+  const { sideBarBookKey } = useSidebarStore();
   const { isFontLayoutSettingsDialogOpen, setFontLayoutSettingsDialogOpen } = useSettingsStore();
   const gridTemplate = getGridTemplate(bookKeys.length, window.innerWidth / window.innerHeight);
 
+  useEffect(() => {
+    if (!sideBarBookKey) return;
+    const bookData = getBookData(sideBarBookKey);
+    if (!bookData || !bookData.book) return;
+    document.title = bookData.book.title;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sideBarBookKey]);
+
   return (
     <div
       className='grid h-full flex-grow'
@@ -49,7 +61,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
           <div
             id={`gridcell-${bookKey}`}
             key={bookKey}
-            className='relative h-full w-full overflow-hidden'
+            className={`${isTauriAppPlatform() ? 'rounded-window' : ''} relative h-full w-full overflow-hidden`}
           >
             {isBookmarked && <Ribbon width={marginGap} />}
             <HeaderBar
@@ -65,6 +77,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

@@ -1,10 +1,13 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { BookDoc, getDirection } from '@/libs/document';
-import { BookConfig, BookNote, BookSearchConfig, BookSearchResult } from '@/types/book';
+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/useIframeEvents';
 import { useFoliateEvents } from '../hooks/useFoliateEvents';
-import { getOSPlatform } from '@/utils/misc';
+import { useProgressSync } from '../hooks/useProgressSync';
+import { useAutoHideScrollbar } from '../hooks/useAutoHideScrollbar';
 import { getStyles, mountAdditionalFonts } from '@/utils/style';
 import { useTheme } from '@/hooks/useTheme';
 import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
@@ -14,58 +17,10 @@ import {
   handleMouseup,
   handleClick,
   handleWheel,
+  handleTouchStart,
+  handleTouchMove,
+  handleTouchEnd,
 } from '../utils/iframeEventHandlers';
-import { eventDispatcher } from '@/utils/event';
-
-export interface FoliateView extends HTMLElement {
-  open: (book: BookDoc) => Promise<void>;
-  close: () => void;
-  init: (options: { lastLocation: string }) => void;
-  goTo: (href: string) => void;
-  goToFraction: (fraction: number) => void;
-  prev: (distance: number) => void;
-  next: (distance: number) => void;
-  goLeft: () => void;
-  goRight: () => void;
-  getCFI: (index: number, range: Range) => string;
-  addAnnotation: (note: BookNote, remove?: boolean) => { index: number; label: string };
-  search: (config: BookSearchConfig) => AsyncGenerator<BookSearchResult | string, void, void>;
-  clearSearch: () => void;
-  select: (target: string | number | { fraction: number }) => void;
-  deselect: () => void;
-  history: {
-    canGoBack: boolean;
-    canGoForward: boolean;
-    back: () => void;
-    forward: () => void;
-    clear: () => void;
-  };
-  renderer: {
-    scrolled?: boolean;
-    viewSize: number;
-    setAttribute: (name: string, value: string | number) => void;
-    removeAttribute: (name: string) => void;
-    next: () => Promise<void>;
-    prev: () => Promise<void>;
-    goTo?: (params: { index: number; anchor: number }) => void;
-    setStyles?: (css: string) => void;
-    addEventListener: (type: string, listener: EventListener) => void;
-    removeEventListener: (type: string, listener: EventListener) => void;
-  };
-}
-
-const wrappedFoliateView = (originalView: FoliateView): FoliateView => {
-  const originalAddAnnotation = originalView.addAnnotation.bind(originalView);
-  originalView.addAnnotation = (note: BookNote, remove = false) => {
-    // transform BookNote to foliate annotation
-    const annotation = {
-      value: note.cfi,
-      ...note,
-    };
-    return originalAddAnnotation(annotation, remove);
-  };
-  return originalView;
-};
 
 const FoliateViewer: React.FC<{
   bookKey: string;
@@ -75,47 +30,25 @@ const FoliateViewer: React.FC<{
   const containerRef = useRef<HTMLDivElement>(null);
   const viewRef = useRef<FoliateView | null>(null);
   const isViewCreated = useRef(false);
-  const { getView, setView: setFoliateView, setProgress, getViewSettings } = useReaderStore();
-  const { hoveredBookKey, setHoveredBookKey, setViewSettings } = useReaderStore();
+  const { getView, setView: setFoliateView, setProgress } = useReaderStore();
+  const { getViewSettings, setViewSettings } = useReaderStore();
   const { getParallels } = useParallelViewStore();
   const { themeCode } = useTheme();
 
-  const shouldAutoHideScrollbar = ['macos', 'ios'].includes(getOSPlatform());
+  const [toastMessage, setToastMessage] = useState('');
+  useEffect(() => {
+    const timer = setTimeout(() => setToastMessage(''), 2000);
+    return () => clearTimeout(timer);
+  }, [toastMessage]);
+
+  useProgressSync(bookKey);
 
   const progressRelocateHandler = (event: Event) => {
     const detail = (event as CustomEvent).detail;
-    // console.log('relocate:', detail);
     setProgress(bookKey, detail.cfi, detail.tocItem, detail.section, detail.location, detail.range);
   };
 
-  const handleScrollbarAutoHide = (doc: Document) => {
-    if (doc && doc.defaultView && doc.defaultView.frameElement) {
-      const iframe = doc.defaultView.frameElement as HTMLIFrameElement;
-      const container = iframe.parentElement?.parentElement;
-      if (!container) return;
-
-      let hideScrollbarTimeout: ReturnType<typeof setTimeout>;
-      const showScrollbar = () => {
-        container.style.overflow = 'auto';
-        container.style.scrollbarWidth = 'thin';
-      };
-
-      const hideScrollbar = () => {
-        container.style.overflow = 'hidden';
-        container.style.scrollbarWidth = 'none';
-        requestAnimationFrame(() => {
-          container.style.overflow = 'auto';
-        });
-      };
-      container.addEventListener('scroll', () => {
-        showScrollbar();
-        clearTimeout(hideScrollbarTimeout);
-        hideScrollbarTimeout = setTimeout(hideScrollbar, 1000);
-      });
-      hideScrollbar();
-    }
-  };
-
+  const { shouldAutoHideScrollbar, handleScrollbarAutoHide } = useAutoHideScrollbar();
   const docLoadHandler = (event: Event) => {
     const detail = (event as CustomEvent).detail;
     console.log('doc loaded:', detail);
@@ -137,6 +70,9 @@ const FoliateViewer: React.FC<{
         detail.doc.addEventListener('mouseup', handleMouseup.bind(null, bookKey));
         detail.doc.addEventListener('click', handleClick.bind(null, bookKey));
         detail.doc.addEventListener('wheel', handleWheel.bind(null, bookKey));
+        detail.doc.addEventListener('touchstart', handleTouchStart.bind(null, bookKey));
+        detail.doc.addEventListener('touchmove', handleTouchMove.bind(null, bookKey));
+        detail.doc.addEventListener('touchend', handleTouchEnd.bind(null, bookKey));
       }
     }
   };
@@ -144,6 +80,17 @@ 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);
+        } else if (renderer.end >= renderer.viewSize) {
+          viewRef.current?.next(1);
+        }
+      }
+    }
     const parallelViews = getParallels(bookKey);
     if (parallelViews && parallelViews.size > 0) {
       parallelViews.forEach((key) => {
@@ -157,68 +104,8 @@ const FoliateViewer: React.FC<{
     }
   };
 
-  const handleTurnPage = (msg: MessageEvent | React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    if (msg instanceof MessageEvent) {
-      if (msg.data && msg.data.bookKey === bookKey) {
-        const viewSettings = getViewSettings(bookKey)!;
-        if (msg.data.type === 'iframe-single-click') {
-          const viewElement = containerRef.current;
-          if (viewElement) {
-            const rect = viewElement.getBoundingClientRect();
-            const { screenX, screenY } = msg.data;
-            const consumed = eventDispatcher.dispatchSync('iframe-single-click', {
-              screenX,
-              screenY,
-            });
-            if (!consumed) {
-              const centerStartX = rect.left + rect.width * 0.375;
-              const centerEndX = rect.left + rect.width * 0.625;
-              const centerStartY = rect.top + rect.height * 0.375;
-              const centerEndY = rect.top + rect.height * 0.625;
-              if (
-                screenX >= centerStartX &&
-                screenX <= centerEndX &&
-                screenY >= centerStartY &&
-                screenY <= centerEndY
-              ) {
-                // toggle visibility of the header bar and the footer bar
-                setHoveredBookKey(hoveredBookKey ? '' : bookKey);
-              } else if (screenX >= rect.left + rect.width / 2) {
-                viewRef.current?.goRight();
-              } else if (screenX < rect.left + rect.width / 2) {
-                viewRef.current?.goLeft();
-              }
-            }
-          }
-        } else if (msg.data.type === 'iframe-wheel' && !viewSettings.scrolled) {
-          const { deltaY } = msg.data;
-          if (deltaY > 0) {
-            viewRef.current?.next(1);
-          } else if (deltaY < 0) {
-            viewRef.current?.prev(1);
-          }
-        }
-      }
-    } else {
-      const { clientX } = msg;
-      const width = window.innerWidth;
-      const leftThreshold = width * 0.5;
-      const rightThreshold = width * 0.5;
-      if (clientX < leftThreshold) {
-        viewRef.current?.goLeft();
-      } else if (clientX > rightThreshold) {
-        viewRef.current?.goRight();
-      }
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener('message', handleTurnPage);
-    return () => {
-      window.removeEventListener('message', handleTurnPage);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hoveredBookKey, viewRef]);
+  useTouchEvent(bookKey, viewRef);
+  const { handleTurnPage } = useClickEvent(bookKey, viewRef, containerRef);
 
   useFoliateEvents(viewRef.current, {
     onLoad: docLoadHandler,
@@ -288,11 +175,13 @@ const FoliateViewer: React.FC<{
   }, []);
 
   return (
-    <div
-      className='foliate-viewer h-[100%] w-[100%]'
-      onClick={(event) => handleTurnPage(event)}
-      ref={containerRef}
-    />
+    <>
+      <div
+        className='foliate-viewer h-[100%] w-[100%]'
+        onClick={(event) => handleTurnPage(event)}
+        ref={containerRef}
+      />
+    </>
   );
 };
 

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

@@ -2,9 +2,13 @@ import React from 'react';
 import clsx from 'clsx';
 import { RiArrowLeftWideLine, RiArrowRightWideLine } from 'react-icons/ri';
 import { RiArrowGoBackLine, RiArrowGoForwardLine } from 'react-icons/ri';
+import { FaHeadphones } from 'react-icons/fa6';
 
 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 {
@@ -14,9 +18,11 @@ interface FooterBarProps {
 }
 
 const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim }) => {
-  const { hoveredBookKey, setHoveredBookKey, getView } = useReaderStore();
+  const _ = useTranslation();
+  const { hoveredBookKey, setHoveredBookKey, getView, getProgress } = useReaderStore();
   const { isSideBarVisible } = useSidebarStore();
   const view = getView(bookKey);
+  const progress = getProgress(bookKey);
 
   const handleProgressChange = (event: React.ChangeEvent) => {
     const newProgress = parseInt((event.target as HTMLInputElement).value, 10);
@@ -39,31 +45,45 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
     view?.history.forward();
   };
 
+  const handleSpeakText = async () => {
+    if (!view || !progress) return;
+    const { range } = progress;
+    if (eventDispatcher.dispatchSync('tts-is-speaking')) {
+      eventDispatcher.dispatch('tts-stop', { bookKey });
+    } else {
+      eventDispatcher.dispatch('tts-speak', { bookKey, range });
+    }
+  };
+
   const pageinfoValid = pageinfo && pageinfo.total > 0 && pageinfo.current >= 0;
   const progressFraction = pageinfoValid ? pageinfo.current / pageinfo.total : 0;
   return (
     <div
       className={clsx(
-        'footer-bar absolute bottom-0 z-10 flex h-12 w-full items-center px-4',
-        'shadow-xs bg-base-100 rounded-window-bottom-right transition-opacity duration-300',
-        !isSideBarVisible && 'rounded-window-bottom-left',
+        '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',
         isHoveredAnim && 'hover-bar-anim',
         hoveredBookKey === bookKey ? `opacity-100` : `opacity-0`,
       )}
       onMouseEnter={() => setHoveredBookKey(bookKey)}
       onMouseLeave={() => setHoveredBookKey('')}
     >
-      <Button icon={<RiArrowLeftWideLine size={20} />} onClick={handleGoPrev} tooltip='Go Left' />
+      <div className='hidden sm:flex'>
+        <Button icon={<RiArrowLeftWideLine />} onClick={handleGoPrev} tooltip={_('Go Left')} />
+      </div>
       <Button
-        icon={<RiArrowGoBackLine size={20} />}
+        icon={<RiArrowGoBackLine />}
         onClick={handleGoBack}
-        tooltip='Go Back'
+        tooltip={_('Go Back')}
         disabled={!view?.history.canGoBack}
       />
       <Button
-        icon={<RiArrowGoForwardLine size={20} />}
+        icon={<RiArrowGoForwardLine />}
         onClick={handleGoForward}
-        tooltip='Go Forward'
+        tooltip={_('Go Forward')}
         disabled={!view?.history.canGoForward}
       />
       <span className='mx-2 text-center text-sm'>
@@ -77,7 +97,10 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
         value={pageinfoValid ? progressFraction * 100 : 0}
         onChange={(e) => handleProgressChange(e)}
       />
-      <Button icon={<RiArrowRightWideLine size={20} />} onClick={handleGoNext} tooltip='Go Right' />
+      <Button icon={<FaHeadphones />} onClick={handleSpeakText} tooltip={_('Speak')} />
+      <div className='hidden sm:flex'>
+        <Button icon={<RiArrowRightWideLine />} onClick={handleGoNext} tooltip={_('Go Right')} />
+      </div>
     </div>
   );
 };

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

@@ -6,7 +6,7 @@ import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { useTheme } from '@/hooks/useTheme';
 import { getStyles } from '@/utils/style';
 import { getPopupPosition, getPosition, Position } from '@/utils/sel';
-import { FoliateView } from './FoliateViewer';
+import { FoliateView } from '@/types/view';
 import { FootnoteHandler } from 'foliate-js/footnotes.js';
 import Popup from '@/components/Popup';
 
@@ -28,6 +28,7 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
   const { getView, getViewSettings } = useReaderStore();
   const { themeCode } = useTheme();
   const view = getView(bookKey);
+  const viewSettings = getViewSettings(bookKey)!;
   const footnoteHandler = new FootnoteHandler();
 
   useEffect(() => {
@@ -41,7 +42,13 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
       renderer.setAttribute('margin', '0px');
       renderer.setAttribute('gap', '5%');
       const viewSettings = getViewSettings(bookKey)!;
-      renderer.setStyles?.(getStyles(viewSettings, themeCode));
+      const popupTheme = { ...themeCode };
+      const popupContainer = document.getElementById('popup-container');
+      if (popupContainer) {
+        const backgroundColor = getComputedStyle(popupContainer).backgroundColor;
+        popupTheme.bg = backgroundColor;
+      }
+      renderer.setStyles?.(getStyles(viewSettings, popupTheme));
     };
 
     const handleRender = (e: Event) => {
@@ -57,7 +64,7 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
       footnoteHandler.removeEventListener('render', handleRender);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [view]);
+  }, [view, themeCode]);
 
   const docLinkHandler = async (event: Event) => {
     const detail = (event as CustomEvent).detail;
@@ -67,7 +74,13 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
     const rect = gridFrame.getBoundingClientRect();
     const viewSettings = getViewSettings(bookKey)!;
     const triangPos = getPosition(detail.a, rect, viewSettings.vertical);
-    const popupPos = getPopupPosition(triangPos, rect, popupWidth, popupHeight, popupPadding);
+    const popupPos = getPopupPosition(
+      triangPos,
+      rect,
+      viewSettings.vertical ? popupHeight : popupWidth,
+      viewSettings.vertical ? popupWidth : popupHeight,
+      popupPadding,
+    );
     setTrianglePosition(triangPos);
     setPopupPosition(popupPos);
 
@@ -101,6 +114,9 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
     }
   }, [footnoteRef]);
 
+  const width = viewSettings.vertical ? popupHeight : popupWidth;
+  const height = viewSettings.vertical ? popupWidth : popupHeight;
+
   return (
     <div>
       {showPopup && (
@@ -111,8 +127,8 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
         />
       )}
       <Popup
-        width={popupWidth}
-        height={popupHeight}
+        width={width}
+        height={height}
         position={showPopup ? popupPosition! : undefined}
         trianglePosition={showPopup ? trianglePosition! : undefined}
         className='select-text overflow-y-auto'
@@ -121,8 +137,8 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
           className=''
           ref={footnoteRef}
           style={{
-            width: `${popupWidth}px`,
-            height: `${popupHeight}px`,
+            width: `${width}px`,
+            height: `${height}px`,
           }}
         ></div>
       </Popup>

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

@@ -5,12 +5,15 @@ 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';
 import Dropdown from '@/components/Dropdown';
 import SidebarToggler from './SidebarToggler';
 import BookmarkToggler from './BookmarkToggler';
 import NotebookToggler from './NotebookToggler';
+import SettingsToggler from './SettingsToggler';
 import ViewMenu from './ViewMenu';
 
 interface HeaderBarProps {
@@ -36,6 +39,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const { hoveredBookKey, setHoveredBookKey, bookKeys } = useReaderStore();
   const { isSideBarVisible } = useSidebarStore();
+  const iconSize16 = useResponsiveSize(16);
 
   const handleToggleDropdown = (isOpen: boolean) => {
     setIsDropdownOpen(isOpen);
@@ -48,8 +52,9 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
       className={clsx(
         `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 rounded-window-top-right transition-opacity duration-300`,
-        !isSideBarVisible && 'rounded-window-top-left',
+        `shadow-xs bg-base-100 transition-opacity duration-300`,
+        isTauriAppPlatform() && 'rounded-window-top-right',
+        !isSideBarVisible && isTauriAppPlatform() && 'rounded-window-top-left',
         isHoveredAnim && 'hover-bar-anim',
         hoveredBookKey === bookKey || isDropdownOpen ? `visible` : `opacity-0`,
         isDropdownOpen && 'header-bar-pinned',
@@ -57,21 +62,22 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
       onMouseEnter={() => setHoveredBookKey(bookKey)}
       onMouseLeave={() => setHoveredBookKey('')}
     >
-      <div className='sidebar-bookmark-toggler flex h-full items-center'>
+      <div className='sidebar-bookmark-toggler bg-base-100 z-20 flex h-full items-center space-x-4'>
         <SidebarToggler bookKey={bookKey} />
         <BookmarkToggler bookKey={bookKey} />
       </div>
 
-      <div className='header-title flex flex-1 items-center justify-center'>
-        <h2 className='line-clamp-1 max-w-[80%] text-center text-xs font-semibold'>{bookTitle}</h2>
+      <div className='header-title z-15 pointer-events-none absolute inset-0 hidden items-center justify-center sm:flex'>
+        <h2 className='line-clamp-1 max-w-[50%] text-center text-xs font-semibold'>{bookTitle}</h2>
       </div>
 
-      <div className='flex h-full items-center space-x-2'>
+      <div className='bg-base-100 z-20 ml-auto flex h-full items-center space-x-4'>
+        <SettingsToggler />
         <NotebookToggler bookKey={bookKey} />
         <Dropdown
           className='exclude-title-bar-mousedown dropdown-bottom dropdown-end'
           buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
-          toggleButton={<PiDotsThreeVerticalBold size={16} />}
+          toggleButton={<PiDotsThreeVerticalBold size={iconSize16} />}
           onToggle={handleToggleDropdown}
         >
           <ViewMenu bookKey={bookKey} onSetSettingsDialogOpen={onSetSettingsDialogOpen} />
@@ -80,8 +86,12 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
         <WindowButtons
           className='window-buttons flex h-full items-center'
           headerRef={headerRef}
-          showMinimize={bookKeys.length == 1 && appService?.appPlatform !== 'web'}
-          showMaximize={bookKeys.length == 1 && appService?.appPlatform !== 'web'}
+          showMinimize={
+            bookKeys.length == 1 && !isTrafficLightVisible && appService?.appPlatform !== 'web'
+          }
+          showMaximize={
+            bookKeys.length == 1 && !isTrafficLightVisible && appService?.appPlatform !== 'web'
+          }
           onClose={() => onCloseBook(bookKey)}
         />
       </div>

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/NotebookToggler.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import { TbLayoutSidebarRight, TbLayoutSidebarRightFilled } from 'react-icons/tb';
+import { LuNotebookPen } from 'react-icons/lu';
 
 import { useSidebarStore } from '@/store/sidebarStore';
 import { useNotebookStore } from '@/store/notebookStore';
+import { useTranslation } from '@/hooks/useTranslation';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import Button from '@/components/Button';
 
 interface NotebookTogglerProps {
@@ -10,8 +12,11 @@ interface NotebookTogglerProps {
 }
 
 const NotebookToggler: React.FC<NotebookTogglerProps> = ({ bookKey }) => {
+  const _ = useTranslation();
   const { sideBarBookKey, setSideBarBookKey } = useSidebarStore();
   const { isNotebookVisible, toggleNotebook } = useNotebookStore();
+  const iconSize16 = useResponsiveSize(16);
+
   const handleToggleSidebar = () => {
     if (sideBarBookKey === bookKey) {
       toggleNotebook();
@@ -24,13 +29,13 @@ const NotebookToggler: React.FC<NotebookTogglerProps> = ({ bookKey }) => {
     <Button
       icon={
         sideBarBookKey == bookKey && isNotebookVisible ? (
-          <TbLayoutSidebarRightFilled size={20} className='text-base-content' />
+          <LuNotebookPen size={iconSize16} className='text-base-content' />
         ) : (
-          <TbLayoutSidebarRight size={20} className='text-base-content' />
+          <LuNotebookPen size={iconSize16} className='text-base-content' />
         )
       }
       onClick={handleToggleSidebar}
-      tooltip='Notebook'
+      tooltip={_('Notebook')}
       tooltipDirection='bottom'
     ></Button>
   );

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

@@ -1,5 +1,6 @@
-import { PageInfo } from '@/types/book';
 import React from 'react';
+import { useTranslation } from '@/hooks/useTranslation';
+import { PageInfo } from '@/types/book';
 
 interface PageInfoProps {
   bookFormat: string;
@@ -9,13 +10,17 @@ interface PageInfoProps {
 }
 
 const PageInfoView: React.FC<PageInfoProps> = ({ bookFormat, section, pageinfo, gapRight }) => {
+  const _ = useTranslation();
   const pageInfo =
     bookFormat === 'PDF'
       ? section
         ? `${section.current + 1} / ${section.total}`
         : ''
       : pageinfo
-        ? `Loc. ${pageinfo.current + 1} / ${pageinfo.total}`
+        ? _('Loc. {{currentPage}} / {{totalPage}}', {
+            currentPage: pageinfo.current + 1,
+            totalPage: pageinfo.total,
+          })
         : '';
 
   return (

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

@@ -1,14 +1,17 @@
 'use client';
 
+import clsx from 'clsx';
 import * as React from 'react';
 import { useEffect, Suspense, useRef } from 'react';
 
 import { useEnv } from '@/context/EnvContext';
+import { useTheme } from '@/hooks/useTheme';
 import { useLibraryStore } from '@/store/libraryStore';
-
-import ReaderContent from './ReaderContent';
-import { AboutWindow } from '@/components/AboutWindow';
 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();
@@ -16,7 +19,10 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
   const { library, setLibrary } = useLibraryStore();
   const isInitiating = useRef(false);
 
+  const { updateAppTheme } = useTheme();
+
   useEffect(() => {
+    updateAppTheme('base-100');
     if (isInitiating.current) return;
     isInitiating.current = true;
     const initLibrary = async () => {
@@ -33,10 +39,16 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
   return (
     library.length > 0 &&
     settings.globalReadSettings && (
-      <div className='reader-page bg-base-100 text-base-content min-h-screen select-none'>
+      <div
+        className={clsx(
+          `reader-page bg-base-100 text-base-content select-none`,
+          isTauriAppPlatform() && 'rounded-window',
+        )}
+      >
         <Suspense>
           <ReaderContent ids={ids} settings={settings} />
           <AboutWindow />
+          <Toast />
         </Suspense>
       </div>
     )

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

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 
 import { useEnv } from '@/context/EnvContext';
@@ -9,19 +9,24 @@ import { useSettingsStore } from '@/store/settingsStore';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
+import { Book } from '@/types/book';
 import { SystemSettings } from '@/types/settings';
 import { parseOpenWithFiles } from '@/helpers/cli';
-import { tauriHandleClose } from '@/utils/window';
+import { tauriHandleClose, tauriHandleOnCloseWindow } from '@/utils/window';
+import { isTauriAppPlatform } from '@/services/environment';
 import { uniqueId } from '@/utils/misc';
+import { eventDispatcher } from '@/utils/event';
 import { navigateToLibrary } from '@/utils/nav';
 import { BOOK_IDS_SEPARATOR } from '@/services/constants';
 
 import useBooksManager from '../hooks/useBooksManager';
 import useBookShortcuts from '../hooks/useBookShortcuts';
+import BookDetailModal from '@/components/BookDetailModal';
 import Spinner from '@/components/Spinner';
 import SideBar from './sidebar/SideBar';
 import Notebook from './notebook/Notebook';
 import BooksGrid from './BooksGrid';
+import TTSControl from './tts/TTSControl';
 
 const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ ids, settings }) => {
   const router = useRouter();
@@ -33,16 +38,17 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
   const { getConfig, getBookData, saveConfig } = useBookDataStore();
   const { getView, setBookKeys } = useReaderStore();
   const { initViewState, getViewState, clearViewState } = useReaderStore();
+  const [showDetailsBook, setShowDetailsBook] = useState<Book | null>(null);
   const isInitiating = useRef(false);
   const [loading, setLoading] = useState(false);
 
   useBookShortcuts({ sideBarBookKey, bookKeys });
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isInitiating.current) return;
     isInitiating.current = true;
 
-    const bookIds = ids || searchParams.get('ids') || '';
+    const bookIds = ids || searchParams?.get('ids') || '';
     const initialIds = bookIds.split(BOOK_IDS_SEPARATOR).filter(Boolean);
     const initialBookKeys = initialIds.map((id) => `${id}-${uniqueId()}`);
     setBookKeys(initialBookKeys);
@@ -53,23 +59,54 @@ 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);
       }
     });
+
+    const handleShowBookDetails = (event: CustomEvent) => {
+      const book = event.detail as Book;
+      setShowDetailsBook(book);
+      return true;
+    };
+    eventDispatcher.onSync('show-book-details', handleShowBookDetails);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const saveConfigAndCloseBook = (bookKey: string) => {
-    console.log('Closing book', bookKey);
-    getView(bookKey)?.close();
-    getView(bookKey)?.remove();
+  useEffect(() => {
+    if (isTauriAppPlatform()) tauriHandleOnCloseWindow(handleCloseBooks);
+    window.addEventListener('beforeunload', handleCloseBooks);
+    eventDispatcher.on('quit-app', handleCloseBooks);
+    return () => {
+      window.removeEventListener('beforeunload', handleCloseBooks);
+      eventDispatcher.off('quit-app', handleCloseBooks);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bookKeys]);
+
+  const saveBookConfig = async (bookKey: string) => {
     const config = getConfig(bookKey);
     const { book } = getBookData(bookKey) || {};
     const { isPrimary } = getViewState(bookKey) || {};
     if (isPrimary && book && config) {
-      saveConfig(envConfig, bookKey, config, settings);
+      eventDispatcher.dispatch('sync-book-progress', { bookKey });
+      const settings = useSettingsStore.getState().settings;
+      await saveConfig(envConfig, bookKey, config, settings);
     }
+  };
+
+  const saveConfigAndCloseBook = async (bookKey: string) => {
+    console.log('Closing book', bookKey);
+    try {
+      getView(bookKey)?.close();
+      getView(bookKey)?.remove();
+    } catch {
+      console.info('Error closing book', bookKey);
+    }
+    eventDispatcher.dispatch('tts-stop', { bookKey });
+    await saveBookConfig(bookKey);
     clearViewState(bookKey);
   };
 
@@ -78,11 +115,15 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
     navigateToLibrary(router);
   };
 
-  const handleCloseBooks = () => {
-    bookKeys.forEach((key) => {
-      saveConfigAndCloseBook(key);
-    });
-    saveSettingsAndGoToLibrary();
+  const handleCloseBooks = async () => {
+    const settings = useSettingsStore.getState().settings;
+    await Promise.all(bookKeys.map((key) => saveConfigAndCloseBook(key)));
+    await saveSettings(envConfig, settings);
+  };
+
+  const handleCloseBooksToLibrary = () => {
+    handleCloseBooks();
+    navigateToLibrary(router);
   };
 
   const handleCloseBook = async (bookKey: string) => {
@@ -107,7 +148,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
     setTimeout(() => setLoading(true), 300);
     return (
       loading && (
-        <div className={'hero hero-content min-h-screen'}>
+        <div className={'hero hero-content h-dvh'}>
           <Spinner loading={true} />
         </div>
       )
@@ -115,10 +156,18 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
   }
 
   return (
-    <div className='flex h-screen'>
-      <SideBar onGoToLibrary={handleCloseBooks} />
+    <div className='flex h-dvh'>
+      <SideBar onGoToLibrary={handleCloseBooksToLibrary} />
       <BooksGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
+      <TTSControl />
       <Notebook />
+      {showDetailsBook && (
+        <BookDetailModal
+          isOpen={!!showDetailsBook}
+          book={showDetailsBook}
+          onClose={() => setShowDetailsBook(null)}
+        />
+      )}
     </div>
   );
 };

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/SettingsToggler.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { RiFontSize } from 'react-icons/ri';
+
+import { useTranslation } from '@/hooks/useTranslation';
+import { useSettingsStore } from '@/store/settingsStore';
+import Button from '@/components/Button';
+
+const SettingsToggler = () => {
+  const _ = useTranslation();
+  const { isFontLayoutSettingsDialogOpen, setFontLayoutSettingsDialogOpen } = useSettingsStore();
+  const handleToggleSettings = () => {
+    setFontLayoutSettingsDialogOpen(!isFontLayoutSettingsDialogOpen);
+  };
+  return (
+    <Button
+      icon={<RiFontSize className='text-base-content' />}
+      onClick={handleToggleSettings}
+      tooltip={_('Font & Layout')}
+      tooltipDirection='bottom'
+    ></Button>
+  );
+};
+
+export default SettingsToggler;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { TbLayoutSidebar, TbLayoutSidebarFilled } from 'react-icons/tb';
 
 import { useSidebarStore } from '@/store/sidebarStore';
+import { useTranslation } from '@/hooks/useTranslation';
 import Button from '@/components/Button';
 
 interface SidebarTogglerProps {
@@ -9,6 +10,7 @@ interface SidebarTogglerProps {
 }
 
 const SidebarToggler: React.FC<SidebarTogglerProps> = ({ bookKey }) => {
+  const _ = useTranslation();
   const { sideBarBookKey, isSideBarVisible, setSideBarBookKey, toggleSideBar } = useSidebarStore();
   const handleToggleSidebar = () => {
     if (sideBarBookKey === bookKey) {
@@ -22,13 +24,13 @@ const SidebarToggler: React.FC<SidebarTogglerProps> = ({ bookKey }) => {
     <Button
       icon={
         sideBarBookKey === bookKey && isSideBarVisible ? (
-          <TbLayoutSidebarFilled size={20} className='text-base-content' />
+          <TbLayoutSidebarFilled className='text-base-content' />
         ) : (
-          <TbLayoutSidebar size={20} className='text-base-content' />
+          <TbLayoutSidebar className='text-base-content' />
         )
       }
       onClick={handleToggleSidebar}
-      tooltip='Sidebar'
+      tooltip={_('Sidebar')}
       tooltipDirection='bottom'
     />
   );

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

@@ -5,9 +5,10 @@ import { BiMoon, BiSun } from 'react-icons/bi';
 import { TbSunMoon } from 'react-icons/tb';
 import { MdZoomOut, MdZoomIn, MdCheck } from 'react-icons/md';
 
-import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
+import { MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL, ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
 import MenuItem from '@/components/MenuItem';
 import { useReaderStore } from '@/store/readerStore';
+import { useTranslation } from '@/hooks/useTranslation';
 import { useTheme, ThemeMode } from '@/hooks/useTheme';
 import { getStyles } from '@/utils/style';
 
@@ -22,6 +23,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
   setIsDropdownOpen,
   onSetSettingsDialogOpen,
 }) => {
+  const _ = useTranslation();
   const { getView, getViews, getViewSettings, setViewSettings } = useReaderStore();
   const viewSettings = getViewSettings(bookKey)!;
 
@@ -30,8 +32,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 + 10, 200));
-  const zoomOut = () => setZoomLevel((prev) => Math.max(prev - 10, 50));
+  const zoomIn = () => setZoomLevel((prev) => Math.min(prev + 1, MAX_ZOOM_LEVEL));
+  const zoomOut = () => setZoomLevel((prev) => Math.max(prev - 1, MIN_ZOOM_LEVEL));
   const resetZoom = () => setZoomLevel(100);
   const toggleScrolledMode = () => setScrolledMode(!isScrolledMode);
   const toggleInvertedColors = () => setInvertedColors(!isInvertedColors);
@@ -75,86 +77,73 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
   useEffect(() => {
     const view = getView(bookKey);
     if (!view) return;
-    // FIXME: zoom level is not working in paginated mode
-    if (viewSettings?.scrolled) {
-      view.renderer.setStyles?.(getStyles(viewSettings!, themeCode));
-    }
     viewSettings!.zoomLevel = zoomLevel;
     setViewSettings(bookKey, viewSettings!);
+    view.renderer.setStyles?.(getStyles(viewSettings!, themeCode));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [zoomLevel]);
 
   return (
     <div
       tabIndex={0}
-      className='view-menu dropdown-content dropdown-right no-triangle border-base-100 z-20 mt-1 w-72 border shadow-2xl'
+      className='view-menu dropdown-content bgcolor-base-200 dropdown-right no-triangle border-base-200 z-20 mt-1 w-72 border shadow-2xl'
     >
-      <div
-        className={clsx(
-          'flex items-center justify-between rounded-md',
-          !isScrolledMode && 'text-gray-400',
-        )}
-      >
+      <div className={clsx('flex items-center justify-between rounded-md')}>
         <button
           onClick={zoomOut}
           className={clsx(
-            'hover:bg-base-200 text-base-content rounded-full p-2',
-            !isScrolledMode && 'btn-disabled text-gray-400',
+            'hover:bg-base-300 text-base-content rounded-full p-2',
+            zoomLevel <= MIN_ZOOM_LEVEL && 'btn-disabled text-gray-400',
           )}
         >
-          <MdZoomOut size={20} />
+          <MdZoomOut />
         </button>
         <button
           className={clsx(
-            'hover:bg-base-200 text-base-content h-8 min-h-8 w-[50%] rounded-md p-1 text-center',
-            !isScrolledMode && 'btn-disabled text-gray-400',
+            'hover:bg-base-300 text-base-content h-8 min-h-8 w-[50%] rounded-md p-1 text-center',
           )}
           onClick={resetZoom}
         >
-          {zoomLevel}%
+          {100 - (100 - zoomLevel) * 10}%
         </button>
         <button
           onClick={zoomIn}
           className={clsx(
-            'hover:bg-base-200 text-base-content rounded-full p-2',
-            !isScrolledMode && 'btn-disabled text-gray-400',
+            'hover:bg-base-300 text-base-content rounded-full p-2',
+            zoomLevel >= MAX_ZOOM_LEVEL && 'btn-disabled text-gray-400',
           )}
         >
-          <MdZoomIn size={20} />
+          <MdZoomIn />
         </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} />
+      <MenuItem label={_('Font & Layout')} shortcut='Shift+F' onClick={openFontLayoutMenu} />
 
       <MenuItem
-        label='Scrolled Mode'
+        label={_('Scrolled Mode')}
         shortcut='Shift+J'
-        icon={isScrolledMode ? <MdCheck size={20} /> : undefined}
+        icon={isScrolledMode ? <MdCheck /> : undefined}
         onClick={toggleScrolledMode}
       />
 
-      <hr className='border-base-200 my-1' />
+      <hr className='border-base-300 my-1' />
 
       <MenuItem
         label={
-          themeMode === 'dark' ? 'Dark Mode' : themeMode === 'light' ? 'Light Mode' : 'Auto Mode'
-        }
-        icon={
-          themeMode === 'dark' ? (
-            <BiMoon size={20} />
-          ) : themeMode === 'light' ? (
-            <BiSun size={20} />
-          ) : (
-            <TbSunMoon size={20} />
-          )
+          themeMode === 'dark'
+            ? _('Dark Mode')
+            : themeMode === 'light'
+              ? _('Light Mode')
+              : _('Auto Mode')
         }
+        icon={themeMode === 'dark' ? <BiMoon /> : themeMode === 'light' ? <BiSun /> : <TbSunMoon />}
         onClick={cycleThemeMode}
       />
       <MenuItem
-        label='Invert Colors in Dark Mode'
-        icon={isInvertedColors ? <MdCheck size={20} className='text-base-content' /> : undefined}
+        label={_('Invert Colors in Dark Mode')}
+        icon={isInvertedColors ? <MdCheck className='text-base-content' /> : undefined}
         onClick={toggleInvertedColors}
         disabled={!isDarkMode}
       />

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

@@ -6,33 +6,40 @@ import { FaWikipediaW } from 'react-icons/fa';
 import { BsPencilSquare } from 'react-icons/bs';
 import { RiDeleteBinLine } from 'react-icons/ri';
 import { BsTranslate } from 'react-icons/bs';
-import { SiDeepl } from 'react-icons/si';
+import { TbHexagonLetterD } from 'react-icons/tb';
+import { FaHeadphones } from 'react-icons/fa6';
 
 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';
 import { eventDispatcher } from '@/utils/event';
-import Toast from '@/components/Toast';
 import AnnotationPopup from './AnnotationPopup';
 import WiktionaryPopup from './WiktionaryPopup';
 import WikipediaPopup from './WikipediaPopup';
 import DeepLPopup from './DeepLPopup';
-import { useBookDataStore } from '@/store/bookDataStore';
 
 const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
+  const _ = useTranslation();
   const { envConfig } = useEnv();
   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)!;
@@ -41,6 +48,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   const isShowingPopup = useRef(false);
   const isTextSelected = useRef(false);
+  const isUpToShowPopup = useRef(false);
   const [selection, setSelection] = useState<TextSelection | null>();
   const [showAnnotPopup, setShowAnnotPopup] = useState(false);
   const [showWiktionaryPopup, setShowWiktionaryPopup] = useState(false);
@@ -50,7 +58,6 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [annotPopupPosition, setAnnotPopupPosition] = useState<Position>();
   const [dictPopupPosition, setDictPopupPosition] = useState<Position>();
   const [translatorPopupPosition, setTranslatorPopupPosition] = useState<Position>();
-  const [toastMessage, setToastMessage] = useState('');
   const [highlightOptionsVisible, setHighlightOptionsVisible] = useState(false);
 
   const [selectedStyle, setSelectedStyle] = useState<HighlightStyle>(
@@ -60,25 +67,79 @@ 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 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 handlePointerup = () => {
+      // Available on iOS and Desktop, fired when release the long press
+      // Note that on Android, pointerup event is fired for any tap but not for long press
       const sel = doc.getSelection();
-      if (sel && sel.toString().trim().length > 0 && sel.rangeCount > 0) {
-        isTextSelected.current = true;
-        setSelection({ key: bookKey, text: sel.toString(), range: sel.getRangeAt(0), index });
+      if (isValidSelection(sel)) {
+        makeSelection(sel, true);
       }
     };
-    detail.doc?.addEventListener('pointerup', handlePointerup);
+    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') {
+          makeSelection(sel, false);
+        }
+      } else if (!isUpToShowPopup.current) {
+        isTextSelected.current = false;
+        setShowAnnotPopup(false);
+        setShowWiktionaryPopup(false);
+        setShowWikipediaPopup(false);
+        setShowDeepLPopup(false);
+      }
+    };
+    const handleTouchmove = () => {
+      // Available on iOS
+      // To make the popup not to follow the selection
+      setShowAnnotPopup(false);
+    };
+    if (bookData.book?.format !== 'PDF') {
+      detail.doc?.addEventListener('pointerup', handlePointerup);
+      detail.doc?.addEventListener('touchmove', handleTouchmove);
+      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;
+        });
+      }
+    }
   };
 
   const onDrawAnnotation = (event: Event) => {
@@ -99,11 +160,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 annotations = booknotes.filter((booknote) => booknote.type === 'annotation');
+    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);
@@ -128,12 +192,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;
@@ -160,6 +228,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,
@@ -185,11 +257,6 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selection, bookKey]);
 
-  useEffect(() => {
-    const timer = setTimeout(() => setToastMessage(''), 2000);
-    return () => clearTimeout(timer);
-  }, [toastMessage]);
-
   useEffect(() => {
     if (!progress) return;
     const { location } = progress;
@@ -198,6 +265,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     const { booknotes = [] } = config;
     const annotations = booknotes.filter(
       (item) =>
+        !item.deletedAt &&
         item.type === 'annotation' &&
         item.style &&
         CFI.compare(item.cfi, start) >= 0 &&
@@ -213,25 +281,30 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
 
   const handleCopy = () => {
     if (!selection || !selection.text) return;
-    setToastMessage('Copied to notebook');
+    eventDispatcher.dispatch('toast', {
+      type: 'info',
+      message: _('Copied to notebook'),
+      className: 'whitespace-nowrap',
+      timeout: 2000,
+    });
 
     const { booknotes: annotations = [] } = config;
-    if (selection) navigator.clipboard.writeText(selection.text);
-    const { sectionHref: href } = progress;
+    if (selection) navigator.clipboard?.writeText(selection.text);
     const cfi = view?.getCFI(selection.index, selection.range);
     if (!cfi) return;
     const annotation: BookNote = {
       id: uniqueId(),
       type: 'excerpt',
       cfi,
-      href,
       text: selection.text,
       note: '',
-      created: Date.now(),
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
     };
 
     const existingIndex = annotations.findIndex(
-      (annotation) => annotation.cfi === cfi && annotation.type === 'excerpt',
+      (annotation) =>
+        annotation.cfi === cfi && annotation.type === 'excerpt' && !annotation.deletedAt,
     );
     if (existingIndex !== -1) {
       annotations[existingIndex] = annotation;
@@ -250,7 +323,6 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     if (!selection || !selection.text) return;
     setHighlightOptionsVisible(true);
     const { booknotes: annotations = [] } = config;
-    const { sectionHref: href } = progress;
     const cfi = view?.getCFI(selection.index, selection.range);
     if (!cfi) return;
     const style = settings.globalReadSettings.highlightStyle;
@@ -259,15 +331,16 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       id: uniqueId(),
       type: 'annotation',
       cfi,
-      href,
       style,
       color,
       text: selection.text,
       note: '',
-      created: Date.now(),
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
     };
     const existingIndex = annotations.findIndex(
-      (annotation) => annotation.cfi === cfi && annotation.type === 'annotation',
+      (annotation) =>
+        annotation.cfi === cfi && annotation.type === 'annotation' && !annotation.deletedAt,
     );
     const views = getViewsById(bookKey.split('-')[0]!);
     if (existingIndex !== -1) {
@@ -276,7 +349,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         annotations[existingIndex] = annotation;
         views.forEach((view) => view?.addAnnotation(annotation));
       } else {
-        annotations.splice(existingIndex, 1);
+        annotations[existingIndex]!.deletedAt = Date.now();
         setShowAnnotPopup(false);
       }
     } else {
@@ -295,6 +368,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     if (!selection || !selection.text) return;
     const { sectionHref: href } = progress;
     selection.href = href;
+    setShowAnnotPopup(false);
     setHighlightOptionsVisible(false);
     setNotebookVisible(true);
     setNotebookNewAnnotation(selection);
@@ -325,31 +399,30 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     setShowDeepLPopup(true);
   };
 
+  const handleSpeakText = async () => {
+    if (!selection || !selection.text) return;
+    setShowAnnotPopup(false);
+    eventDispatcher.dispatch('tts-speak', { bookKey, range: selection.range });
+  };
+
   const selectionAnnotated = selection?.annotated;
   const buttons = [
-    { tooltipText: 'Copy', Icon: FiCopy, onClick: handleCopy },
+    { tooltipText: _('Copy'), Icon: FiCopy, onClick: handleCopy },
     {
-      tooltipText: selectionAnnotated ? 'Delete Highlight' : 'Highlight',
+      tooltipText: selectionAnnotated ? _('Delete Highlight') : _('Highlight'),
       Icon: selectionAnnotated ? RiDeleteBinLine : PiHighlighterFill,
       onClick: handleHighlight,
     },
-    { tooltipText: 'Annotate', Icon: BsPencilSquare, onClick: handleAnnotate },
-    { tooltipText: 'Search', Icon: FiSearch, onClick: handleSearch },
-    { tooltipText: 'Dictionary', Icon: BsTranslate, onClick: handleDictionary },
-    { tooltipText: 'Translate', Icon: SiDeepl, onClick: handleTranslation },
-    { tooltipText: 'Wikipedia', Icon: FaWikipediaW, onClick: handleWikipedia },
+    { tooltipText: _('Annotate'), Icon: BsPencilSquare, onClick: handleAnnotate },
+    { tooltipText: _('Search'), Icon: FiSearch, onClick: handleSearch },
+    { tooltipText: _('Dictionary'), Icon: TbHexagonLetterD, onClick: handleDictionary },
+    { tooltipText: _('Wikipedia'), Icon: FaWikipediaW, onClick: handleWikipedia },
+    { tooltipText: _('Translate'), Icon: BsTranslate, onClick: handleTranslation },
+    { tooltipText: _('Speak'), Icon: FaHeadphones, onClick: handleSpeakText },
   ];
 
   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}
@@ -392,8 +465,6 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
           onHighlight={handleHighlight}
         />
       )}
-
-      {toastMessage && <Toast message={toastMessage} />}
     </div>
   );
 };

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

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import Popup from '@/components/Popup';
 import { Position } from '@/utils/sel';
+import { getAPIBaseUrl } from '@/services/environment';
 import { useSettingsStore } from '@/store/settingsStore';
-import { isWebAppPlatform } from '@/services/environment';
+import { useTranslation } from '@/hooks/useTranslation';
+import { useAuth } from '@/context/AuthContext';
 
 const LANGUAGES = {
   AUTO: 'Auto Detect',
@@ -22,6 +24,8 @@ const LANGUAGES = {
   'ZH-HANT': 'Chinese (Traditional)',
 };
 
+const DEEPL_API_ENDPOINT = getAPIBaseUrl() + '/deepl/translate';
+
 interface DeepLPopupProps {
   text: string;
   position: Position;
@@ -37,6 +41,8 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
   popupWidth,
   popupHeight,
 }) => {
+  const _ = useTranslation();
+  const { token } = useAuth();
   const { settings, setSettings } = useSettingsStore();
   const [sourceLang, setSourceLang] = useState('AUTO');
   const [targetLang, setTargetLang] = useState(settings.globalReadSettings.translateTargetLang);
@@ -61,23 +67,12 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
       setError(null);
       setTranslation(null);
 
-      if (!process.env['NEXT_PUBLIC_DEEPL_API_KEY']) {
-        console.error('DeepL API key not found. Set NEXT_PUBLIC_DEEPL_API_KEY in .env.local');
-      }
-
-      const { fetch, url } = isWebAppPlatform()
-        ? { fetch: window.fetch, url: '/api/deepl/translate' }
-        : {
-            fetch: (await import('@tauri-apps/plugin-http')).fetch,
-            url: 'https://api-free.deepl.com/v2/translate',
-          };
-
       try {
-        const response = await fetch(url, {
+        const response = await fetch(DEEPL_API_ENDPOINT, {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
-            Authorization: `DeepL-Auth-Key ${process.env['NEXT_PUBLIC_DEEPL_API_KEY']}`,
+            Authorization: `Bearer ${token ?? ''}`,
           },
           body: JSON.stringify({
             text: [text],
@@ -104,14 +99,15 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
         setTranslation(translatedText);
       } catch (err) {
         console.error(err);
-        setError('Unable to fetch the translation. Try again later.');
+        setError(_('Unable to fetch the translation. Try again later.'));
       } finally {
         setLoading(false);
       }
     };
 
     fetchTranslation();
-  }, [text, sourceLang, targetLang]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [text, token, sourceLang, targetLang]);
 
   return (
     <div>
@@ -124,7 +120,7 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
       >
         <div className='text-neutral-content relative h-[50%] overflow-y-auto border-b border-neutral-400/75 p-4 font-sans'>
           <div className='mb-2 flex items-center justify-between'>
-            <h1 className='text-base font-semibold'>Original Text</h1>
+            <h1 className='text-base font-semibold'>{_('Original Text')}</h1>
             <select
               value={sourceLang}
               onChange={handleSourceLangChange}
@@ -134,7 +130,7 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
                 return (
                   <option key={code} value={code}>
                     {detectedSourceLang && sourceLang === 'AUTO' && code === 'AUTO'
-                      ? `${LANGUAGES[detectedSourceLang] || detectedSourceLang} (detected)`
+                      ? `${LANGUAGES[detectedSourceLang] || detectedSourceLang} ` + _('(detected)')
                       : name}
                   </option>
                 );
@@ -146,7 +142,7 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
 
         <div className='text-neutral-content relative h-[50%] overflow-y-auto p-4 font-sans'>
           <div className='mb-2 flex items-center justify-between'>
-            <h2 className='text-base font-semibold'>Translated Text</h2>
+            <h2 className='text-base font-semibold'>{_('Translated Text')}</h2>
             <select
               value={targetLang}
               onChange={handleTargetLangChange}
@@ -163,7 +159,7 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
           </div>
 
           {loading ? (
-            <p className='text-base italic text-gray-500'>Loading...</p>
+            <p className='text-base italic text-gray-500'>{_('Loading...')}</p>
           ) : error ? (
             <p className='text-base text-red-600'>{error}</p>
           ) : (

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

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import React from 'react';
-
-import { useSettingsStore } from '@/store/settingsStore';
-import { HighlightColor, HighlightStyle } from '@/types/book';
 import { FaCheckCircle } from 'react-icons/fa';
+import { HighlightColor, HighlightStyle } from '@/types/book';
+import { useSettingsStore } from '@/store/settingsStore';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 
 const styles = ['highlight', 'underline', 'squiggly'] as HighlightStyle[];
 const colors = ['red', 'violet', 'blue', 'green', 'yellow'] as HighlightColor[];
@@ -25,6 +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 size16 = useResponsiveSize(16);
+  const size18 = useResponsiveSize(18);
+  const size28 = useResponsiveSize(28);
 
   const handleSelectStyle = (style: HighlightStyle) => {
     globalReadSettings.highlightStyle = style;
@@ -41,17 +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(
-                'h-4 w-4 p-0 text-center leading-none',
+                'w-4 p-0 text-center leading-none',
                 style === 'highlight' &&
                   (selectedStyle === 'highlight' ? `bg-${selectedColor}-400` : `bg-gray-300`),
                 (style === 'underline' || style === 'squiggly') &&
@@ -72,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={16} className={clsx(`fill-${color}-400`)} />
+              <FaCheckCircle size={size16} className={clsx(`fill-${color}-400`)} />
             )}
           </button>
         ))}

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

@@ -15,14 +15,14 @@ const PopupButton: React.FC<PopupButtonProps> = ({ showTooltip, tooltipText, Ico
   };
   return (
     <div
-      className='tooltip tooltip-bottom'
+      className='lg:tooltip lg:tooltip-bottom'
       data-tip={!buttonClicked && showTooltip ? tooltipText : null}
     >
       <button
         onClick={handleClick}
         className='my-2 flex h-8 min-h-8 w-8 items-center justify-center p-0'
       >
-        <Icon size={20} />
+        <Icon />
       </button>
     </div>
   );

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

@@ -1,28 +1,47 @@
+import clsx from 'clsx';
 import React from 'react';
 
 import { FiSearch } from 'react-icons/fi';
-import { MdOutlinePushPin, MdPushPin } from 'react-icons/md';
+import { LuNotebookPen } from 'react-icons/lu';
+import { MdArrowBackIosNew, MdOutlinePushPin, MdPushPin } from 'react-icons/md';
+import { useTranslation } from '@/hooks/useTranslation';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 
 const NotebookHeader: React.FC<{
   isPinned: boolean;
+  handleClose: () => void;
   handleTogglePin: () => void;
-}> = ({ isPinned, handleTogglePin }) => (
-  <div className='notebook-header relative flex h-11 items-center px-3'>
-    <div className='absolute inset-0 flex items-center justify-center'>
-      <div className='notebook-title text-sm font-medium'>Notebook</div>
+}> = ({ isPinned, handleClose, handleTogglePin }) => {
+  const _ = useTranslation();
+  const iconSize14 = useResponsiveSize(14);
+  return (
+    <div className='notebook-header relative flex h-11 items-center px-3'>
+      <div className='absolute inset-0 flex items-center justify-center space-x-2'>
+        <LuNotebookPen />
+        <div className='notebook-title text-sm font-medium'>{_('Notebook')}</div>
+      </div>
+      <div className='z-10 flex items-center gap-x-4'>
+        <button
+          onClick={handleTogglePin}
+          className={clsx(
+            'btn btn-ghost btn-circle hidden h-6 min-h-6 w-6 sm:flex',
+            isPinned ? 'bg-base-300' : 'bg-base-300/65',
+          )}
+        >
+          {isPinned ? <MdPushPin size={iconSize14} /> : <MdOutlinePushPin size={iconSize14} />}
+        </button>
+        <button
+          onClick={handleClose}
+          className={'btn btn-ghost btn-circle flex h-6 min-h-6 w-6 hover:bg-transparent sm:hidden'}
+        >
+          <MdArrowBackIosNew />
+        </button>
+        <button className='btn btn-ghost left-0 h-8 min-h-8 w-8 p-0'>
+          <FiSearch />
+        </button>
+      </div>
     </div>
-    <div className='z-10 flex items-center space-x-3'>
-      <button
-        onClick={handleTogglePin}
-        className={`${isPinned ? 'bg-base-300' : 'bg-base-300/65'} btn btn-ghost btn-circle h-6 min-h-6 w-6`}
-      >
-        {isPinned ? <MdPushPin size={14} /> : <MdOutlinePushPin size={14} />}
-      </button>
-      <button className='btn btn-ghost left-0 h-8 min-h-8 w-8 p-0'>
-        <FiSearch size={18} />
-      </button>
-    </div>
-  </div>
-);
+  );
+};
 
 export default NotebookHeader;