hotfix: fix window cannot be dragged when light traffic widget is shown on macOS (#304)

* fix: fix window cannot be dragged when light traffic widget is shown on macOS

* fix: detecting tauri focus event for deeplink redirect in oauth

* release: version 0.9.9

.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 pkg-config libfontconfig-dev libglib2.0-dev libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev libsoup-3.0-dev
+      - name: Format
+        working-directory: apps/readest-app/src-tauri
+        run: cargo fmt --check
+      - 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,63 +6,87 @@ 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
 
-      - name: Setup pnpm
+      - name: setup pnpm
         uses: pnpm/action-setup@v4
         with:
           version: 9.14.4
 
-      - name: Setup node
-        uses: actions/setup-node@v3
+      - name: setup node
+        uses: actions/setup-node@v4
         with:
           node-version: 22
           cache: pnpm
@@ -80,23 +104,24 @@ 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
+      - 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
+      - name: copy .env.local to apps/readest-app
         run: cp .env.local apps/readest-app/.env.local
 
       - 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
+          sudo apt-get install -y pkg-config libfontconfig-dev libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
 
       - uses: tauri-apps/tauri-action@v0
         env:
@@ -111,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

@@ -0,0 +1,104 @@
+# Contribution Guidelines
+
+When contributing to `Readest`, whether on GitHub or in other community spaces:
+
+- Be respectful, civil, and open-minded.
+- Before opening a new pull request, try searching through the [issue tracker](https://github.com/chrox/readest/issues) for known issues or fixes.
+- If you want to make code changes based on your personal opinion(s), make sure you open an issue first describing the changes you want to make, and open a pull request only when your suggestions get approved by maintainers.
+
+## How to Contribute
+
+### Prerequisites
+
+In order to not waste your time implementing a change that has already been declined, or is generally not needed, start by [opening an issue](https://github.com/chrox/readest/issues/new/choose) describing the problem you would like to solve.
+
+For the best experience to build Readest for yourself, use a recent version of Node.js and Rust. Refer to the [Tauri documentation](https://v2.tauri.app/start/prerequisites/) for details on setting up the development environment prerequisites on different platforms.
+
+Basically you need to install or update the following development tools:
+
+- **Node.js** and **pnpm** for Next.js development
+- **Rust** and **Cargo** for Tauri development
+
+```bash
+nvm install v22
+nvm use v22
+npm install -g pnpm
+rustup update
+```
+
+### Getting Started
+
+To get started with Readest, follow these steps to clone and build the project.
+
+#### 1. Clone the Repository
+
+```bash
+git clone https://github.com/readest/readest.git
+cd readest
+git submodule update --init --recursive
+```
+
+#### 2. Install Dependencies
+
+```bash
+# might need to rerun this when code is updated
+pnpm install
+# copy pdfjs-dist to Next.js public directory
+pnpm --filter @readest/readest-app setup-pdfjs
+```
+
+#### 3. Verify Dependencies Installation
+
+To confirm that all dependencies are correctly installed, run the following command:
+
+```bash
+pnpm tauri info
+```
+
+This command will display information about the installed Tauri dependencies and configuration on your platform. Note that the output may vary depending on the operating system and environment setup. Please review the output specific to your platform for any potential issues.
+
+For Windows targets, “Build Tools for Visual Studio 2022” (or a higher edition of Visual Studio) and the “Desktop development with C++” workflow must be installed. For Windows ARM64 targets, the “VS 2022 C++ ARM64 build tools” and "C++ Clang Compiler for Windows" components must be installed. And make sure `clang` can be found in the path by adding `C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools\VC\Tools\Llvm\x64\bin` for example in the environment variable `Path`.
+
+#### 4. Build for Development
+
+```bash
+pnpm tauri dev
+```
+
+#### 5. Build for Production
+
+```bash
+pnpm tauri build
+```
+
+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 `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:
+
+```bash
+pnpm build
+```
+
+Please also make a manual, functional test of your changes. When all that's done, it's time to file a pull request to upstream and fill out the title and body appropriately.
+
+## Credits
+
+This documented was inspired by the contributing guidelines for [cloudflare/wrangler2](https://github.com/cloudflare/wrangler2/blob/main/CONTRIBUTING.md).

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>
@@ -8,10 +8,12 @@
 [Readest][link-website] is an open-source ebook reader designed for immersive and deep reading experiences. Built as a modern rewrite of [Foliate](https://github.com/johnfactotum/foliate), it leverages [Next.js 15](https://github.com/vercel/next.js) and [Tauri v2](https://github.com/tauri-apps/tauri) to offer a seamless cross-platform experience on macOS, Windows, Linux and Web, with support for mobile platforms coming soon.
 
 [![Website][badge-website]][link-website]
-[![AGPL Licence][badge-license]](LICENSE)
+[![Web App][badge-web-app]][link-web-readest]
 [![OS][badge-platforms]][link-website]
+[![][badge-hellogithub]][link-hellogithub]
 [![][badge-discord]][link-discord]
 <br>
+[![AGPL Licence][badge-license]](LICENSE)
 [![Latest release][badge-release]][link-gh-releases]
 [![Last commit][badge-last-commit]][link-gh-commits]
 [![Commits][badge-commit-activity]][link-gh-pulse]
@@ -24,13 +26,13 @@
   <a href="#screenshots">Screenshots</a> •
   <a href="#downloads">Downloads</a> •
   <a href="#getting-started">Getting Started</a> •
-  <a href="#contributing">Contributing</a> •
+  <a href="#contributors">Contributors</a> •
   <a href="#license">License</a>
 </p>
 
 <div align="center">
   <a href="https://readest.com" target="_blank">
-    <img src="./data/screenshots/readest_landing_preview.png" alt="Readest Banner" width="100%" />
+    <img src="./data/screenshots/landing_preview.png" alt="Readest Banner" width="100%" />
   </a>
 </div>
 
@@ -38,49 +40,54 @@
 
 <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. | 🔄           |
-| **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. 😊
 
 ## Screenshots
 
-![Annotations](./data/screenshots/annotations.jpeg)
+![Annotations](./data/screenshots/annotations.png)
 
-![Wikipedia](./data/screenshots/wikipedia.jpeg)
+![DeepL](./data/screenshots/deepl.png)
 
-![DeepL](./data/screenshots/deepl.jpeg)
+![TTS](./data/screenshots/tts_control.png)
 
-![Dark Mode](./data/screenshots/dark_mode.jpeg)
+![Footnote](./data/screenshots/footnote_popover.png)
+
+![Wikipedia](./data/screenshots/wikipedia_vertical.png)
+
+![Themeing Dark Mode](./data/screenshots/theming_dark_mode.png)
 
 ---
 
@@ -96,7 +103,7 @@ The Readest app is available for download! 🥳 🚀
 ## Requirements
 
 - **Node.js** and **pnpm** for Next.js development
-- **Rust and Cargo** for Tauri development
+- **Rust** and **Cargo** for Tauri development
 
 For the best experience to build Readest for yourself, use a recent version of Node.js and Rust. Refer to the [Tauri documentation](https://v2.tauri.app/start/prerequisites/) for details on setting up the development environment prerequisites on different platforms.
 
@@ -114,7 +121,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
 ```
@@ -146,49 +153,83 @@ 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
 ```
 
-## Contributing
+### 6. Setup dev environment with Nix
 
-Readest is open-source, and contributions are welcome! Feel free to open issues, suggest features, or submit pull requests. Please review our contributing guidelines before you start.
+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
 
-<!---
-npx contributor-faces --exclude "*bot*" --limit 100"
---->
+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.
 
-[//]: contributor-faces
-
-<a href="https://github.com/chrox"><img src="https://avatars.githubusercontent.com/u/751535?v=4" title="chrox" width="50" height="50"></a>
-
-[//]: contributor-faces
+<a href="https://github.com/readest/readest/graphs/contributors">
+  <p align="left">
+    <img width="300" src="https://contrib.rocks/image?repo=readest/readest" alt="A table of avatars from the project's contributors" />
+  </p>
+</a>
 
 ## License
 
-Readest is distributed under the AGPL-3.0 License. See the [LICENSE](<(LICENSE)>) file for details.
+Readest is free software: you can redistribute it and/or modify it under the terms of the [GNU Affero General Public License](https://www.gnu.org/licenses/agpl-3.0.html) as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. See the [LICENSE](LICENSE) file for details.
+
+The following libraries and frameworks are used in this software:
+
+- [foliate-js](https://github.com/johnfactotum/foliate-js), which is MIT licensed.
+- [zip.js](https://github.com/gildas-lormeau/zip.js), which is licensed under the BSD-3-Clause license.
+- [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/)
 
 ---
 
 <div align="center" style="color: gray;">Happy reading with Readest!</div>
 
 [badge-website]: https://img.shields.io/badge/website-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-web-app]: https://img.shields.io/badge/read%20online-web.readest.com-orange
+[badge-license]: https://img.shields.io/github/license/readest/readest?color=teal
+[badge-release]: https://img.shields.io/github/release/readest/readest?color=green
+[badge-platforms]: https://img.shields.io/badge/platforms-macOS%2C%20Windows%2C%20Linux%2C%20Web%2C%20PWA-green
+[badge-last-commit]: https://img.shields.io/github/last-commit/readest/readest?color=green
+[badge-commit-activity]: https://img.shields.io/github/commit-activity/m/readest/readest
 [badge-discord]: https://img.shields.io/discord/1314226120886976544?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
+[badge-hellogithub]: https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=8a5b6ade2aee461a8bd94e59200682a7&claim_uid=eRLUbPOy2qZtDgw&theme=small
 [link-macos-appstore]: https://apps.apple.com/app/apple-store/id6738622779?pt=127463130&ct=github&mt=8
 [link-website]: https://readest.com?utm_source=github&utm_medium=referral&utm_campaign=readme
 [link-web-readest]: https://web.readest.com
-[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
+[link-hellogithub]: https://hellogithub.com/repository/8a5b6ade2aee461a8bd94e59200682a7

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 : 'output',
+  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.2",
+  "version": "0.9.9",
   "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": {
-    "@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",
+    "@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.2.0",
+    "@tauri-apps/plugin-cli": "^2.2.0",
+    "@tauri-apps/plugin-deep-link": "^2.2.0",
+    "@tauri-apps/plugin-dialog": "^2.2.0",
+    "@tauri-apps/plugin-fs": "^2.2.0",
+    "@tauri-apps/plugin-http": "^2.3.0",
+    "@tauri-apps/plugin-log": "^2.2.1",
+    "@tauri-apps/plugin-opener": "^2.2.5",
+    "@tauri-apps/plugin-os": "^2.2.0",
+    "@tauri-apps/plugin-process": "^2.2.0",
+    "@tauri-apps/plugin-shell": "~2.2.0",
+    "@tauri-apps/plugin-updater": "^2.4.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.6",
+    "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",
+    "@tauri-apps/cli": "2.2.7",
+    "@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/.well-known/apple-app-site-association

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

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

@@ -0,0 +1,12 @@
+[
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "com.bilingify.readest",
+      "sha256_cert_fingerprints": [
+        "65:2D:11:67:76:12:29:14:18:42:CB:3D:18:50:B6:E4:7E:46:E1:2F:4B:E4:7F:5A:6C:14:B6:D7:12:74:1E:82"
+      ]
+    }
+  }
+]

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

@@ -0,0 +1,154 @@
+{
+  "(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",
+  "Insufficient storage quota": "Unzureichendes Speicherkontingent"
+}

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

@@ -0,0 +1,154 @@
+{
+  "(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": "Έλεγχος ενημερώσεων κατά την εκκίνηση",
+  "Insufficient storage quota": "Ανεπαρκές όριο αποθήκευσης"
+}

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

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

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

@@ -0,0 +1,154 @@
+{
+  "(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",
+  "Insufficient storage quota": "Cuota de almacenamiento insuficiente"
+}

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

@@ -0,0 +1,154 @@
+{
+  "(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",
+  "Insufficient storage quota": "Quota de stockage insuffisant"
+}

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

@@ -0,0 +1,154 @@
+{
+  "(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": "शुरू में अपडेट जांचें",
+  "Insufficient storage quota": "अपर्याप्त स्टोरेज कोटा"
+}

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

@@ -0,0 +1,154 @@
+{
+  "(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",
+  "Insufficient storage quota": "Kuota penyimpanan tidak mencukupi"
+}

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

@@ -0,0 +1,154 @@
+{
+  "(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",
+  "Insufficient storage quota": "Quota di archiviazione insufficiente"
+}

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

@@ -0,0 +1,154 @@
+{
+  "(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": "開始時に更新を確認",
+  "Insufficient storage quota": "ストレージクォータが不足しています"
+}

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

@@ -0,0 +1,154 @@
+{
+  "(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": "시작 시 업데이트 확인",
+  "Insufficient storage quota": "저장소 할당량 부족"
+}

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

@@ -0,0 +1,154 @@
+{
+  "(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",
+  "Insufficient storage quota": "Niewystarczająca kwota przechowywania"
+}

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

@@ -0,0 +1,154 @@
+{
+  "(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",
+  "Insufficient storage quota": "Cota de armazenamento insuficiente"
+}

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

@@ -0,0 +1,154 @@
+{
+  "(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": "Проверять обновления при запуске",
+  "Insufficient storage quota": "Недостаточно квоты хранилища"
+}

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

@@ -0,0 +1,154 @@
+{
+  "(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",
+  "Insufficient storage quota": "Yetersiz depolama kotası"
+}

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

@@ -0,0 +1,154 @@
+{
+  "(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": "Перевіряти оновлення при запуску",
+  "Insufficient storage quota": "Недостатньо квоти сховища"
+}

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

@@ -0,0 +1,154 @@
+{
+  "(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",
+  "Insufficient storage quota": "Không đủ lượng lưu trữ"
+}

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

@@ -0,0 +1,154 @@
+{
+  "(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": "启动时检查更新",
+  "Insufficient storage quota": "云存储空间不足"
+}

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

@@ -0,0 +1,154 @@
+{
+  "(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": "啟動時檢查更新",
+  "Insufficient storage quota": "雲存儲空間不足"
+}

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,133 @@
+{
+  "releases": {
+    "0.9.9": {
+      "date": "2025-02-06",
+      "notes": [
+        "Load system fonts list at runtime on desktop",
+        "Incrementally load new books in synchronization",
+        "Change voice language dynamically by detecting text language",
+        "Various fixes and enhancements on sync, fonts and highlighting"
+      ]
+    },
+    "0.9.8": {
+      "date": "2025-02-01",
+      "notes": [
+        "Support cloud sync for book files",
+        "Use larger font size on mobile devices for better reading experience",
+        "Various fixes and enhancements on sync, rendering and settings"
+      ]
+    },
+    "0.9.7": {
+      "date": "2025-01-23",
+      "notes": [
+        "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/scripts/release-mac-appstore.sh

@@ -1,6 +1,6 @@
 pnpm run build-macos-universial-appstore
 
-BUNDLE_DIR=src-tauri/target/universal-apple-darwin/release/bundle/macos
+BUNDLE_DIR=../../target/universal-apple-darwin/release/bundle/macos
 APP_BUNDLE=$BUNDLE_DIR/Readest.app
 INSTALLER_BUNDLE=$BUNDLE_DIR/Readest.pkg
 

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

@@ -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,7 @@ 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"
+font-enumeration = "0.9.0"

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

@@ -44,6 +44,9 @@
       "allow": [
         {
           "url": "https://*.deepl.com"
+        },
+        {
+          "url": "https://*.cloudflarestorage.com"
         }
       ]
     },
@@ -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,72 @@ 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())
+}
+
+#[cfg(desktop)]
+#[command]
+async fn list_fonts() -> Result<Vec<String>, String> {
+    let font_collection = font_enumeration::Collection::new().unwrap();
+    let mut fonts = Vec::new();
+    for font in font_collection.all() {
+        fonts.push(font.font_name.clone());
+    }
+    Ok(fonts)
+}
+
+#[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,
+            #[cfg(desktop)]
+            list_fonts
+        ])
         .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 +136,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 +162,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 +189,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 +227,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 +235,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",
-        "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,14 @@
     "macOS": {
       "minimumSystemVersion": "12.0"
     },
+    "linux": {
+      "deb": {
+        "section": "text"
+      }
+    },
+    "android": {
+      "minSdkVersion": 26
+    },
     "fileAssociations": [
       {
         "name": "epub",
@@ -124,9 +134,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,270 @@
+'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 { 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, getCurrent } from '@tauri-apps/plugin-deep-link';
+import { start, cancel, onUrl, onInvalidUrl } from '@fabianlars/tauri-plugin-oauth';
+import { openUrl } from '@tauri-apps/plugin-opener';
+import { tauriHandleOnWindowFocus } from '@/utils/window';
+import { handleAuthCallback } from '@/helpers/auth';
+import { getOSPlatform } from '@/utils/misc';
+
+type OAuthProvider = 'google' | 'apple' | 'azure' | 'github';
+
+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 osPlatform = getOSPlatform();
+
+  const getTauriRedirectTo = () => {
+    return process.env.NODE_ENV === 'production'
+      ? ['android', 'ios'].includes(osPlatform)
+        ? 'https://web.readest.com/auth/callback'
+        : 'readest://auth/callback'
+      : `http://localhost:${port}`;
+  };
+
+  const tauriSignIn = async (provider: OAuthProvider) => {
+    if (!supabase) {
+      throw new Error('No backend connected');
+    }
+    supabase.auth.signOut();
+    const { data, error } = await supabase.auth.signInWithOAuth({
+      provider,
+      options: {
+        skipBrowserRedirect: true,
+        redirectTo: getTauriRedirectTo(),
+      },
+    });
+
+    if (error) {
+      console.error('Authentication error:', error);
+      return;
+    }
+    openUrl(data.url);
+
+    // FIXME: For Android we need a better way to trigger the deeplink redirect
+    if (isTauriAppPlatform() && osPlatform === 'android') {
+      tauriHandleOnWindowFocus(async () => {
+        const urls = await getCurrent();
+        if (urls && urls.length > 0) {
+          urls.forEach((url) => {
+            handleOAuthUrl(url);
+          });
+        }
+      });
+      setTimeout(() => {
+        router.back();
+      }, 5000);
+    }
+  };
+
+  const handleOAuthUrl = async (url: string) => {
+    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={tauriSignIn}
+          Icon={FcGoogle}
+          label='Sign in with Google'
+        />
+        <ProviderLogin
+          provider='apple'
+          handleSignIn={tauriSignIn}
+          Icon={FaApple}
+          label='Sign in with Apple'
+        />
+        <ProviderLogin
+          provider='github'
+          handleSignIn={tauriSignIn}
+          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={getTauriRedirectTo()}
+        />
+      </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', 'github']}
+        redirectTo='/auth/callback'
+      />
+    </div>
+  );
+}

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

@@ -1,24 +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='width=device-width, initial-scale=1, maximum-scale=1' />
+        <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='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' />
@@ -32,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,140 @@
+import clsx from 'clsx';
+import Image from 'next/image';
+import { MdCheckCircle, MdCheckCircleOutline } from 'react-icons/md';
+import { CiCircleMore } from 'react-icons/ci';
+import { LiaCloudUploadAltSolid, LiaCloudDownloadAltSolid } from 'react-icons/lia';
+
+import { Book } from '@/types/book';
+import { useEnv } from '@/context/EnvContext';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
+import ReadingProgress from './ReadingProgress';
+
+interface BookItemProps {
+  book: Book;
+  isSelectMode: boolean;
+  selectedBooks: string[];
+  clickedBookHash: string | null;
+  transferProgress: number | null;
+  handleBookClick: (book: Book) => void;
+  handleBookUpload: (book: Book) => void;
+  handleBookDownload: (book: Book) => void;
+  showBookDetailsModal: (book: Book) => void;
+  bookContextMenuHandler: (book: Book, e: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+const BookItem: React.FC<BookItemProps> = ({
+  book,
+  isSelectMode,
+  selectedBooks,
+  clickedBookHash,
+  transferProgress,
+  handleBookClick,
+  handleBookUpload,
+  handleBookDownload,
+  showBookDetailsModal,
+  bookContextMenuHandler,
+}) => {
+  const iconSize15 = useResponsiveSize(15);
+  const { appService } = useEnv();
+
+  return (
+    <div
+      className={clsx('book-item', appService?.hasContextMenu ? 'cursor-pointer' : '')}
+      onContextMenu={bookContextMenuHandler.bind(null, book)}
+    >
+      <div className='bg-base-100 shadow-md' onClick={() => handleBookClick(book)}>
+        <div className='relative aspect-[28/41]'>
+          <Image
+            src={book.coverImageUrl!}
+            alt={book.title}
+            fill={true}
+            className='object-cover'
+            onError={(e) => {
+              (e.target as HTMLImageElement).style.display = 'none';
+              (e.target as HTMLImageElement).nextElementSibling?.classList.remove('invisible');
+            }}
+          />
+          <div
+            className={clsx(
+              'invisible absolute inset-0 rounded-none p-2',
+              'text-neutral-content text-center font-serif font-medium',
+            )}
+          >
+            <div className='flex h-1/2 items-center justify-center'>
+              <span className='line-clamp-3 text-lg'>{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,26 @@
 import clsx from 'clsx';
 import * as React from 'react';
-import { useState } from 'react';
-import { PiPlus } from 'react-icons/pi';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
 import { MdDelete, MdOpenInNew } from 'react-icons/md';
-import { MdCheckCircle, MdCheckCircleOutline } from 'react-icons/md';
-
-import { useRouter } from 'next/navigation';
-import Image from 'next/image';
-
+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 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,55 +28,121 @@ 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 { envConfig } = useEnv();
-  const { deleteBook } = useLibraryStore();
+  const searchParams = useSearchParams();
+  const { envConfig, appService } = useEnv();
+  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 isImportingBook = useRef(false);
+  const [showDetailsBook, setShowDetailsBook] = useState<Book | null>(null);
 
-  React.useEffect(() => {
+  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();
+
+  useEffect(() => {
     setSelectedBooks([]);
   }, [isSelectMode]);
 
+  useEffect(() => {
+    if (isImportingBook.current) return;
+    isImportingBook.current = true;
+
+    if (importBookUrl && appService) {
+      const importBook = async () => {
+        console.log('Importing book from URL:', importBookUrl);
+        const book = await appService.importBook(importBookUrl, libraryBooks);
+        if (book) {
+          setLibrary(libraryBooks);
+          appService.saveLibraryBooks(libraryBooks);
+          navigateToReader(router, [book.hash]);
+        }
+      };
+      importBook();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importBookUrl, appService]);
+
   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]);
     }
   };
 
@@ -84,11 +157,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([]);
@@ -99,106 +172,105 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
     setShowDeleteAlert(true);
   };
 
+  const bookContextMenuHandler = async (book: Book, e: React.MouseEvent) => {
+    if (!appService?.hasContextMenu) 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>
       )}
@@ -209,12 +281,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) => {
@@ -35,6 +43,8 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
     };
   }, [onToggleSelectMode]);
 
+  const windowButtonVisible = appService?.appPlatform !== 'web' && !isTrafficLightVisible;
+
   return (
     <div
       ref={headerRef}
@@ -43,14 +53,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 +69,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 +98,21 @@ 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>
+          <WindowButtons
+            headerRef={headerRef}
+            showMinimize={windowButtonVisible}
+            showMaximize={windowButtonVisible}
+            showClose={windowButtonVisible}
+          />
+        </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,126 @@
+import { useEffect, useRef } from 'react';
+import { useAuth } from '@/context/AuthContext';
+import { useEnv } from '@/context/EnvContext';
+import { useSync } from '@/hooks/useSync';
+import { useLibraryStore } from '@/store/libraryStore';
+import { SYNC_BOOKS_INTERVAL_SEC } from '@/services/constants';
+import { Book } from '@/types/book';
+
+export interface UseBooksSyncProps {
+  onSyncStart?: () => void;
+  onSyncEnd?: () => void;
+}
+
+export const useBooksSync = ({ onSyncStart, onSyncEnd }: UseBooksSyncProps) => {
+  const { user } = useAuth();
+  const { appService } = useEnv();
+  const { library, setLibrary } = useLibraryStore();
+  const { syncedBooks, syncBooks, lastSyncedAtBooks } = useSync();
+  const syncBooksPullingRef = useRef(false);
+
+  const pullLibrary = async () => {
+    if (!user) return;
+    syncBooks([], 'pull');
+  };
+
+  const pushLibrary = async () => {
+    if (!user) return;
+    const newBooks = getNewBooks();
+    syncBooks(newBooks, 'push');
+  };
+
+  useEffect(() => {
+    if (!user) return;
+    if (syncBooksPullingRef.current) return;
+    syncBooksPullingRef.current = true;
+
+    pullLibrary();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const lastSyncTime = useRef<number>(0);
+  const syncTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const getNewBooks = () => {
+    if (!user) return [];
+    const newBooks = library.filter(
+      (book) => lastSyncedAtBooks < book.updatedAt || lastSyncedAtBooks < (book.deletedAt ?? 0),
+    );
+    return newBooks;
+  };
+
+  useEffect(() => {
+    if (!user) return;
+    const now = Date.now();
+    const timeSinceLastSync = now - lastSyncTime.current;
+    if (timeSinceLastSync > SYNC_BOOKS_INTERVAL_SEC * 1000) {
+      lastSyncTime.current = now;
+      const newBooks = getNewBooks();
+      syncBooks(newBooks, 'both');
+    } else {
+      if (syncTimeoutRef.current) clearTimeout(syncTimeoutRef.current);
+      syncTimeoutRef.current = setTimeout(
+        () => {
+          lastSyncTime.current = Date.now();
+          const newBooks = getNewBooks();
+          syncBooks(newBooks, 'both');
+          syncTimeoutRef.current = null;
+        },
+        SYNC_BOOKS_INTERVAL_SEC * 1000 - timeSinceLastSync,
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [library]);
+
+  const updateLibrary = async () => {
+    if (!syncedBooks?.length) return;
+
+    const processOldBook = async (oldBook: Book) => {
+      const matchingBook = syncedBooks.find((newBook) => newBook.hash === oldBook.hash);
+      if (matchingBook) {
+        if (!matchingBook.deletedAt && matchingBook.uploadedAt && !oldBook.downloadedAt) {
+          await appService?.downloadBook(oldBook, true);
+        }
+        const mergedBook =
+          matchingBook.updatedAt > oldBook.updatedAt
+            ? { ...oldBook, ...matchingBook, updatedAt: oldBook.updatedAt }
+            : { ...matchingBook, ...oldBook, updatedAt: oldBook.updatedAt };
+        mergedBook.progress = matchingBook.progress ?? oldBook.progress;
+        return mergedBook;
+      }
+      return oldBook;
+    };
+
+    const updatedLibrary = await Promise.all(library.map(processOldBook));
+    const processNewBook = async (newBook: Book) => {
+      if (!updatedLibrary.some((oldBook) => oldBook.hash === newBook.hash)) {
+        if (newBook.uploadedAt && !newBook.deletedAt) {
+          try {
+            await appService?.downloadBook(newBook, true);
+            newBook.coverImageUrl = await appService?.generateCoverImageUrl(newBook);
+            updatedLibrary.push(newBook);
+            setLibrary(updatedLibrary);
+          } catch {
+            console.error('Failed to download book:', newBook);
+          }
+        }
+      }
+    };
+    onSyncStart?.();
+    const batchSize = 3;
+    for (let i = 0; i < syncedBooks.length; i += batchSize) {
+      const batch = syncedBooks.slice(i, i + batchSize);
+      await Promise.all(batch.map(processNewBook));
+    }
+    onSyncEnd?.();
+    setLibrary(updatedLibrary);
+    appService?.saveLibraryBooks(updatedLibrary);
+  };
+
+  useEffect(() => {
+    updateLibrary();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [syncedBooks]);
+
+  return { pullLibrary, pushLibrary };
+};

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

@@ -0,0 +1,52 @@
+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';
+
+const libraries = {
+  en: libraryEn,
+  zh: libraryZh,
+};
+
+interface DemoBooks {
+  library: string[];
+}
+
+export const useDemoBooks = () => {
+  const { envConfig } = useEnv();
+  const userLang = getUserLang() as keyof typeof libraries;
+  const [books, setBooks] = useState<Book[]>([]);
+  const isLoading = useRef(false);
+
+  useEffect(() => {
+    if (isLoading.current) return;
+    isLoading.current = true;
+
+    const fetchDemoBooks = async () => {
+      try {
+        const appService = await envConfig.getAppService();
+        const demoBooks = libraries[userLang] || (libraries.en as DemoBooks);
+        const books = await Promise.all(
+          demoBooks.library.map((url) => appService.importBook(url, [], false, true)),
+        );
+        setBooks(books.filter((book) => book !== null) as Book[]);
+      } catch (error) {
+        console.error('Failed to import demo books:', error);
+      }
+    };
+
+    const demoBooksFetchedFlag = localStorage.getItem('demoBooksFetched');
+    if (isWebAppPlatform() && !demoBooksFetchedFlag) {
+      fetchDemoBooks();
+      localStorage.setItem('demoBooksFetched', 'true');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return books;
+};

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

@@ -1,58 +1,96 @@
 'use client';
 
+import clsx from 'clsx';
 import * as React from 'react';
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect, Suspense } from 'react';
 import { useRouter } from 'next/navigation';
 
 import { Book } from '@/types/book';
 import { AppService } from '@/types/system';
-import { navigateToReader } from '@/utils/nav';
+import { navigateToLogin, navigateToReader } from '@/utils/nav';
+import { getBaseFilename, listFormater } from '@/utils/book';
+import { eventDispatcher } from '@/utils/event';
 import { 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 '@/app/library/components/LibraryHeader';
-import Bookshelf from '@/app/library/components/Bookshelf';
+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);
 
-  React.useEffect(() => {
-    const doAppUpdates = async () => {
-      if (isTauriAppPlatform()) {
-        await checkForAppUpdates();
+  const { pullLibrary, pushLibrary } = useBooksSync({
+    onSyncStart: () => setLoading(true),
+    onSyncEnd: () => setLoading(false),
+  });
+
+  usePullToRefresh(containerRef, pullLibrary);
+
+  useEffect(() => {
+    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);
@@ -67,10 +105,24 @@ const LibraryPage = () => {
     [],
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     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();
@@ -101,6 +153,7 @@ const LibraryPage = () => {
       }
     };
 
+    initLogin();
     initLibrary();
     return () => {
       clearOpenWithBooks();
@@ -108,11 +161,46 @@ const LibraryPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (demoBooks.length > 0 && libraryLoaded) {
+      const newLibrary = [...libraryBooks];
+      for (const book of demoBooks) {
+        const idx = newLibrary.findIndex((b) => b.hash === book.hash);
+        if (idx === -1) {
+          newLibrary.push(book);
+        } else {
+          newLibrary[idx] = book;
+        }
+      }
+      setLibrary(newLibrary);
+      appService?.saveLibraryBooks(newLibrary);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [demoBooks, libraryLoaded]);
+
   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);
@@ -136,6 +224,96 @@ const LibraryPage = () => {
     });
   };
 
+  const updateBookTransferProgress = throttle((bookHash: string, progress: ProgressPayload) => {
+    if (progress.total === 0) return;
+    const progressPct = (progress.progress / progress.total) * 100;
+    setBooksTransferProgress((prev) => ({
+      ...prev,
+      [bookHash]: progressPct,
+    }));
+  }, 500);
+
+  const handleBookUpload = async (book: Book) => {
+    try {
+      await appService?.uploadBook(book, (progress) => {
+        updateBookTransferProgress(book.hash, progress);
+      });
+      await updateBook(envConfig, book);
+      pushLibrary();
+      eventDispatcher.dispatch('toast', {
+        type: 'info',
+        timeout: 2000,
+        message: _('Book uploaded: {{title}}', {
+          title: book.title,
+        }),
+      });
+    } catch (err) {
+      if (err instanceof Error) {
+        if (err.message.includes('Not authenticated')) {
+          navigateToLogin(router);
+          return;
+        } else if (err.message.includes('Insufficient storage quota')) {
+          eventDispatcher.dispatch('toast', {
+            type: 'error',
+            message: _('Insufficient storage quota'),
+          });
+          return;
+        }
+      }
+      eventDispatcher.dispatch('toast', {
+        type: 'error',
+        message: _('Failed to upload book: {{title}}', {
+          title: book.title,
+        }),
+      });
+    }
+  };
+
+  const handleBookDownload = async (book: Book) => {
+    try {
+      await appService?.downloadBook(book, false, (progress) => {
+        updateBookTransferProgress(book.hash, progress);
+      });
+      await updateBook(envConfig, book);
+      eventDispatcher.dispatch('toast', {
+        type: 'info',
+        timeout: 2000,
+        message: _('Book downloaded: {{title}}', {
+          title: book.title,
+        }),
+      });
+    } catch {
+      eventDispatcher.dispatch('toast', {
+        message: _('Failed to download book: {{title}}', {
+          title: book.title,
+        }),
+        type: 'error',
+      });
+    }
+  };
+
+  const handleBookDelete = async (book: Book) => {
+    try {
+      await appService?.deleteBook(book, !!book.uploadedAt);
+      await updateBook(envConfig, book);
+      pushLibrary();
+      eventDispatcher.dispatch('toast', {
+        type: 'info',
+        timeout: 2000,
+        message: _('Book deleted: {{title}}', {
+          title: book.title,
+        }),
+      });
+    } catch {
+      eventDispatcher.dispatch('toast', {
+        message: _('Failed to delete book: {{title}}', {
+          title: book.title,
+        }),
+        type: 'error',
+      });
+    }
+  };
+
   const handleImportBooks = async () => {
     console.log('Importing books...');
     let files;
@@ -172,7 +350,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}
@@ -187,28 +370,38 @@ const LibraryPage = () => {
       )}
       {libraryLoaded &&
         (libraryBooks.length > 0 ? (
-          <div className='mt-12 flex-grow overflow-auto px-2'>
-            <Bookshelf
-              libraryBooks={libraryBooks}
-              isSelectMode={isSelectMode}
-              onImportBooks={handleImportBooks}
-            />
+          <div ref={containerRef} className='mt-12 flex-grow overflow-auto px-2'>
+            <Suspense>
+              <Bookshelf
+                libraryBooks={libraryBooks}
+                isSelectMode={isSelectMode}
+                handleImportBooks={handleImportBooks}
+                handleBookUpload={handleBookUpload}
+                handleBookDownload={handleBookDownload}
+                handleBookDelete={handleBookDelete}
+                booksTransferProgress={booksTransferProgress}
+              />
+            </Suspense>
           </div>
         ) : (
           <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,7 +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[];
@@ -21,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'
@@ -48,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
@@ -60,9 +73,11 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
               onSetSettingsDialogOpen={setFontLayoutSettingsDialogOpen}
             />
             <FoliateViewer bookKey={bookKey} bookDoc={bookDoc} config={config} />
+            <FootnotePopup bookKey={bookKey} bookDoc={bookDoc} />
             {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,11 +1,15 @@
-import React, { useEffect, useRef } from 'react';
-import { useFoliateEvents } from '../hooks/useFoliateEvents';
-import { BookDoc } from '@/libs/document';
-import { BookConfig, BookNote, BookSearchConfig, BookSearchResult } from '@/types/book';
+import React, { useEffect, useRef, useState } from 'react';
+import { BookDoc, getDirection } from '@/libs/document';
+import { BookConfig } from '@/types/book';
+import { FoliateView, wrappedFoliateView } from '@/types/view';
 import { useReaderStore } from '@/store/readerStore';
 import { useParallelViewStore } from '@/store/parallelViewStore';
-import { getOSPlatform } from '@/utils/misc';
-import { getStyles } from '@/utils/style';
+import { useClickEvent, useTouchEvent } from '../hooks/useIframeEvents';
+import { useFoliateEvents } from '../hooks/useFoliateEvents';
+import { useProgressSync } from '../hooks/useProgressSync';
+import { useAutoHideScrollbar } from '../hooks/useAutoHideScrollbar';
+import { getStyles, mountAdditionalFonts } from '@/utils/style';
+import { getBookDirFromWritingMode } from '@/utils/book';
 import { useTheme } from '@/hooks/useTheme';
 import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
 import {
@@ -14,58 +18,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,54 +31,39 @@ 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 } = 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);
     if (detail.doc) {
+      const writingDir = viewRef.current?.renderer.setStyles && getDirection(detail.doc);
       const viewSettings = getViewSettings(bookKey)!;
+      viewSettings.vertical = writingDir?.vertical || false;
+      setViewSettings(bookKey, viewSettings);
       if (viewSettings.scrolled && shouldAutoHideScrollbar) {
         handleScrollbarAutoHide(detail.doc);
       }
+
+      mountAdditionalFonts(detail.doc);
+
       if (!detail.doc.isEventListenersAdded) {
         detail.doc.isEventListenersAdded = true;
         detail.doc.addEventListener('keydown', handleKeydown.bind(null, bookKey));
@@ -130,6 +71,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));
       }
     }
   };
@@ -137,6 +81,18 @@ const FoliateViewer: React.FC<{
   const docRelocateHandler = (event: Event) => {
     const detail = (event as CustomEvent).detail;
     if (detail.reason !== 'scroll' && detail.reason !== 'page') return;
+
+    if (detail.reason === 'scroll') {
+      const renderer = viewRef.current?.renderer;
+      if (renderer) {
+        if (renderer.start <= 0) {
+          viewRef.current?.prev(1);
+          // sometimes viewSize has subpixel value that the end never reaches
+        } else if (renderer.end + 1 >= renderer.viewSize) {
+          viewRef.current?.next(1);
+        }
+      }
+    }
     const parallelViews = getParallels(bookKey);
     if (parallelViews && parallelViews.size > 0) {
       parallelViews.forEach((key) => {
@@ -150,68 +106,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,
@@ -237,14 +133,20 @@ const FoliateViewer: React.FC<{
       const view = wrappedFoliateView(document.createElement('foliate-view') as FoliateView);
       document.body.append(view);
       containerRef.current?.appendChild(view);
-      setFoliateView(bookKey, view);
 
       await view.open(bookDoc);
       // make sure we can listen renderer events after opening book
       viewRef.current = view;
+      setFoliateView(bookKey, view);
+
       const viewSettings = getViewSettings(bookKey)!;
       view.renderer.setStyles?.(getStyles(viewSettings, themeCode));
 
+      const writingMode = viewSettings.writingMode;
+      if (writingMode) {
+        view.book.dir = getBookDirFromWritingMode(writingMode);
+      }
+
       const isScrolled = viewSettings.scrolled!;
       const marginPx = viewSettings.marginPx!;
       const gapPercent = viewSettings.gapPercent!;
@@ -280,11 +182,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

@@ -0,0 +1,149 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import { BookDoc } from '@/libs/document';
+import { useReaderStore } from '@/store/readerStore';
+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 '@/types/view';
+import { FootnoteHandler } from 'foliate-js/footnotes.js';
+import Popup from '@/components/Popup';
+
+interface FootnotePopupProps {
+  bookKey: string;
+  bookDoc: BookDoc;
+}
+
+const popupWidth = 360;
+const popupHeight = 88;
+const popupPadding = 10;
+
+const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
+  const footnoteRef = useRef<HTMLDivElement>(null);
+  const footnoteViewRef = useRef<FoliateView | null>(null);
+  const [trianglePosition, setTrianglePosition] = useState<Position | null>();
+  const [popupPosition, setPopupPosition] = useState<Position | null>();
+  const [showPopup, setShowPopup] = useState(false);
+  const { getView, getViewSettings } = useReaderStore();
+  const { themeCode } = useTheme();
+  const view = getView(bookKey);
+  const viewSettings = getViewSettings(bookKey)!;
+  const footnoteHandler = new FootnoteHandler();
+
+  useEffect(() => {
+    const handleBeforeRender = (e: Event) => {
+      const detail = (e as CustomEvent).detail;
+      const { view } = detail;
+      footnoteViewRef.current = view;
+      footnoteRef.current?.replaceChildren(view);
+      const { renderer } = view;
+      renderer.setAttribute('flow', 'scrolled');
+      renderer.setAttribute('margin', '0px');
+      renderer.setAttribute('gap', '5%');
+      const viewSettings = getViewSettings(bookKey)!;
+      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) => {
+      const detail = (e as CustomEvent).detail;
+      console.log('render footnote', detail);
+      setShowPopup(true);
+    };
+
+    footnoteHandler.addEventListener('before-render', handleBeforeRender);
+    footnoteHandler.addEventListener('render', handleRender);
+    return () => {
+      footnoteHandler.removeEventListener('before-render', handleBeforeRender);
+      footnoteHandler.removeEventListener('render', handleRender);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [view, themeCode]);
+
+  const docLinkHandler = async (event: Event) => {
+    const detail = (event as CustomEvent).detail;
+    console.log('doc link click', detail);
+    const gridFrame = document.querySelector(`#gridcell-${bookKey}`);
+    if (!gridFrame) return;
+    const rect = gridFrame.getBoundingClientRect();
+    const viewSettings = getViewSettings(bookKey)!;
+    const triangPos = getPosition(detail.a, rect, viewSettings.vertical);
+    const popupPos = getPopupPosition(
+      triangPos,
+      rect,
+      viewSettings.vertical ? popupHeight : popupWidth,
+      viewSettings.vertical ? popupWidth : popupHeight,
+      popupPadding,
+    );
+    setTrianglePosition(triangPos);
+    setPopupPosition(popupPos);
+
+    footnoteHandler.handle(bookDoc, event)?.catch((err) => {
+      console.warn(err);
+      const detail = (event as CustomEvent).detail;
+      view?.goTo(detail.href);
+    });
+  };
+
+  const closePopup = () => {
+    const view = footnoteRef.current?.querySelector('foliate-view') as FoliateView;
+    view?.close();
+    view?.remove();
+  };
+
+  const handleDismissPopup = () => {
+    closePopup();
+    setPopupPosition(null);
+    setTrianglePosition(null);
+    setShowPopup(false);
+  };
+
+  useFoliateEvents(view, {
+    onLinkClick: docLinkHandler,
+  });
+
+  useEffect(() => {
+    if (footnoteViewRef.current) {
+      footnoteRef.current?.replaceChildren(footnoteViewRef.current);
+    }
+  }, [footnoteRef]);
+
+  const width = viewSettings.vertical ? popupHeight : popupWidth;
+  const height = viewSettings.vertical ? popupWidth : popupHeight;
+
+  return (
+    <div>
+      {showPopup && (
+        <div
+          className='fixed inset-0'
+          onClick={handleDismissPopup}
+          onContextMenu={handleDismissPopup}
+        />
+      )}
+      <Popup
+        width={width}
+        height={height}
+        position={showPopup ? popupPosition! : undefined}
+        trianglePosition={showPopup ? trianglePosition! : undefined}
+        className='select-text overflow-y-auto'
+      >
+        <div
+          className=''
+          ref={footnoteRef}
+          style={{
+            width: `${width}px`,
+            height: `${height}px`,
+          }}
+        ></div>
+      </Popup>
+    </div>
+  );
+};
+
+export default FootnotePopup;

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,15 @@ 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,
+  ZOOM_STEP,
+} from '@/services/constants';
 import MenuItem from '@/components/MenuItem';
 import { useReaderStore } from '@/store/readerStore';
+import { useTranslation } from '@/hooks/useTranslation';
 import { useTheme, ThemeMode } from '@/hooks/useTheme';
 import { getStyles } from '@/utils/style';
 
@@ -22,6 +28,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
   setIsDropdownOpen,
   onSetSettingsDialogOpen,
 }) => {
+  const _ = useTranslation();
   const { getView, getViews, getViewSettings, setViewSettings } = useReaderStore();
   const viewSettings = getViewSettings(bookKey)!;
 
@@ -30,8 +37,8 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
   const [isInvertedColors, setInvertedColors] = useState(viewSettings!.invert);
   const [zoomLevel, setZoomLevel] = useState(viewSettings!.zoomLevel!);
 
-  const zoomIn = () => setZoomLevel((prev) => Math.min(prev + 10, 200));
-  const zoomOut = () => setZoomLevel((prev) => Math.max(prev - 10, 50));
+  const zoomIn = () => setZoomLevel((prev) => Math.min(prev + ZOOM_STEP, MAX_ZOOM_LEVEL));
+  const zoomOut = () => setZoomLevel((prev) => Math.max(prev - ZOOM_STEP, MIN_ZOOM_LEVEL));
   const resetZoom = () => setZoomLevel(100);
   const toggleScrolledMode = () => setScrolledMode(!isScrolledMode);
   const toggleInvertedColors = () => setInvertedColors(!isInvertedColors);
@@ -75,39 +82,30 @@ 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}
         >
@@ -116,45 +114,41 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
         <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,40 +6,49 @@ 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 } = useReaderStore();
-  const { isNotebookPinned, isNotebookVisible } = useNotebookStore();
+  const { getProgress, getView, getViewsById, getViewSettings } = useReaderStore();
   const { setNotebookVisible, setNotebookNewAnnotation } = useNotebookStore();
+
+  useNotesSync(bookKey);
+
+  const osPlatform = getOSPlatform();
   const config = getConfig(bookKey)!;
   const progress = getProgress(bookKey)!;
   const bookData = getBookData(bookKey)!;
   const view = getView(bookKey);
+  const viewSettings = getViewSettings(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);
@@ -48,7 +57,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [trianglePosition, setTrianglePosition] = useState<Position>();
   const [annotPopupPosition, setAnnotPopupPosition] = useState<Position>();
   const [dictPopupPosition, setDictPopupPosition] = useState<Position>();
-  const [toastMessage, setToastMessage] = useState('');
+  const [translatorPopupPosition, setTranslatorPopupPosition] = useState<Position>();
   const [highlightOptionsVisible, setHighlightOptionsVisible] = useState(false);
 
   const [selectedStyle, setSelectedStyle] = useState<HighlightStyle>(
@@ -58,23 +67,79 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     settings.globalReadSettings.highlightStyles[selectedStyle],
   );
 
-  const dictPopupWidth = 480;
-  const dictPopupHeight = 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) => {
@@ -95,17 +160,20 @@ 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);
   };
 
-  useFoliateEvents(view, { onLoad, onDrawAnnotation, onShowAnnotation }, [config]);
+  useFoliateEvents(view, { onLoad, onDrawAnnotation, onShowAnnotation });
 
   const handleDismissPopup = () => {
     setSelection(null);
@@ -124,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;
@@ -148,7 +220,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       const gridFrame = document.querySelector(`#gridcell-${bookKey}`);
       if (!gridFrame) return;
       const rect = gridFrame.getBoundingClientRect();
-      const triangPos = getPosition(selection.range, rect);
+      const triangPos = getPosition(selection.range, rect, viewSettings.vertical);
       const annotPopupPos = getPopupPosition(
         triangPos,
         rect,
@@ -156,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,
@@ -163,20 +239,24 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
         dictPopupHeight,
         popupPadding,
       );
+      const transPopupPos = getPopupPosition(
+        triangPos,
+        rect,
+        transPopupWidth,
+        transPopupHeight,
+        popupPadding,
+      );
       if (triangPos.point.x == 0 || triangPos.point.y == 0) return;
       setShowAnnotPopup(true);
       setAnnotPopupPosition(annotPopupPos);
       setDictPopupPosition(dictPopupPos);
+      setTranslatorPopupPosition(transPopupPos);
       setTrianglePosition(triangPos);
       isShowingPopup.current = true;
     }
+    // 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;
@@ -185,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 &&
@@ -200,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;
@@ -237,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;
@@ -246,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) {
@@ -263,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 {
@@ -282,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);
@@ -312,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}
@@ -357,13 +443,13 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
           popupHeight={dictPopupHeight}
         />
       )}
-      {showDeepLPopup && trianglePosition && dictPopupPosition && (
+      {showDeepLPopup && trianglePosition && translatorPopupPosition && (
         <DeepLPopup
           text={selection?.text as string}
-          position={dictPopupPosition}
+          position={translatorPopupPosition}
           trianglePosition={trianglePosition}
-          popupWidth={dictPopupWidth}
-          popupHeight={dictPopupHeight}
+          popupWidth={transPopupWidth}
+          popupHeight={transPopupHeight}
         />
       )}
       {showAnnotPopup && trianglePosition && annotPopupPosition && (
@@ -379,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>
@@ -120,12 +116,11 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
         width={popupWidth}
         height={popupHeight}
         position={position}
-        className='bg-neutral select-text'
-        triangleClassName='text-neutral'
+        className='select-text'
       >
         <div className='text-neutral-content relative h-[50%] overflow-y-auto border-b border-neutral-400/75 p-4 font-sans'>
           <div className='mb-2 flex items-center justify-between'>
-            <h1 className='text-base font-semibold'>Original Text</h1>
+            <h1 className='text-base font-semibold'>{_('Original Text')}</h1>
             <select
               value={sourceLang}
               onChange={handleSourceLangChange}
@@ -135,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>
                 );
@@ -147,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}
@@ -164,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/annotator/WikipediaPopup.tsx

@@ -96,7 +96,8 @@ const WikipediaPopup: React.FC<WikipediaPopupProps> = ({
       }
     };
 
-    const langCode = typeof lang === 'string' ? lang : lang?.[0];
+    const bookLang = typeof lang === 'string' ? lang : lang?.[0];
+    const langCode = bookLang ? bookLang.split('-')[0]! : 'en';
     fetchSummary(text, langCode);
   }, [text, lang]);
 
@@ -107,8 +108,7 @@ const WikipediaPopup: React.FC<WikipediaPopupProps> = ({
         height={popupHeight}
         position={position}
         trianglePosition={trianglePosition}
-        className='bg-neutral select-text overflow-y-auto'
-        triangleClassName='text-neutral'
+        className='select-text overflow-y-auto'
       >
         <main className='p-2 font-sans'></main>
         <footer className='hidden data-[state=loaded]:block data-[state=error]:hidden data-[state=loading]:hidden'>

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

@@ -163,8 +163,7 @@ const WiktionaryPopup: React.FC<WiktionaryPopupProps> = ({
         width={popupWidth}
         height={popupHeight}
         position={position}
-        className='bg-neutral select-text overflow-y-auto'
-        triangleClassName='text-neutral'
+        className='select-text overflow-y-auto'
       >
         <main className='p-4 font-sans' />
         <footer className='hidden data-[state=loaded]:block data-[state=error]:hidden data-[state=loading]:hidden'>

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;

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

@@ -1,15 +1,17 @@
 import clsx from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { useNotebookStore } from '@/store/notebookStore';
+import { useTranslation } from '@/hooks/useTranslation';
 import { TextSelection } from '@/utils/sel';
 import { BookNote } from '@/types/book';
 
 interface NoteEditorProps {
-  onSave: (selction: TextSelection, note: string) => void;
+  onSave: (selection: TextSelection, note: string) => void;
   onEdit: (annotation: BookNote) => void;
 }
 
 const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
+  const _ = useTranslation();
   const { notebookNewAnnotation, notebookEditAnnotation } = useNotebookStore();
   const editorRef = useRef<HTMLTextAreaElement>(null);
   const [note, setNote] = React.useState('');
@@ -55,25 +57,25 @@ const NoteEditor: React.FC<NoteEditorProps> = ({ onSave, onEdit }) => {
             className={clsx(
               'note-editor textarea textarea-ghost min-h-[1em] resize-none !outline-none',
               'inset-0 w-full rounded-none border-0 bg-transparent p-0 leading-normal',
-              'text-base',
+              'text-sm',
             )}
             ref={editorRef}
             value={note}
             rows={1}
             spellCheck={false}
             onChange={handleChange}
-            placeholder='Add your notes here...'
+            placeholder={_('Add your notes here...')}
           ></textarea>
         </div>
         <button
           className={clsx(
             'btn btn-ghost settings-content hover:bg-transparent',
-            'flex h-[1.5em] min-h-[1.5em] items-end p-0',
+            'flex h-[1.3em] min-h-[1.3em] items-end p-0',
             editorRef.current && editorRef.current.value ? '' : 'btn-disabled !bg-opacity-0',
           )}
           onClick={handleSaveNote}
         >
-          <div className='pr-1 align-bottom text-xs text-blue-400'>Save</div>
+          <div className='pr-1 align-bottom text-xs text-blue-400'>{_('Save')}</div>
         </button>
       </div>
       <div className='flex items-start pt-2'>

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

@@ -6,19 +6,25 @@ import { useBookDataStore } from '@/store/bookDataStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { useNotebookStore } from '@/store/notebookStore';
+import { useTranslation } from '@/hooks/useTranslation';
+import { useTheme } from '@/hooks/useTheme';
 import { useEnv } from '@/context/EnvContext';
-import useDragBar from '../../hooks/useDragBar';
-import NotebookHeader from './Header';
-import NoteEditor from './NoteEditor';
 import { TextSelection } from '@/utils/sel';
 import { BookNote } from '@/types/book';
 import { uniqueId } from '@/utils/misc';
+import { eventDispatcher } from '@/utils/event';
+import { isTauriAppPlatform } from '@/services/environment';
+import useDragBar from '../../hooks/useDragBar';
 import BooknoteItem from '../sidebar/BooknoteItem';
+import NotebookHeader from './Header';
+import NoteEditor from './NoteEditor';
 
 const MIN_NOTEBOOK_WIDTH = 0.15;
 const MAX_NOTEBOOK_WIDTH = 0.45;
 
 const Notebook: React.FC = ({}) => {
+  const _ = useTranslation();
+  const { updateAppTheme } = useTheme();
   const { envConfig } = useEnv();
   const { settings } = useSettingsStore();
   const { sideBarBookKey } = useSidebarStore();
@@ -29,10 +35,32 @@ const Notebook: React.FC = ({}) => {
   const { setNotebookWidth, setNotebookVisible, toggleNotebookPin } = useNotebookStore();
   const { setNotebookNewAnnotation, setNotebookEditAnnotation } = useNotebookStore();
 
+  const onNavigateEvent = async () => {
+    const pinButton = document.querySelector('.sidebar-pin-btn');
+    const isPinButtonHidden = !pinButton || window.getComputedStyle(pinButton).display === 'none';
+    if (isPinButtonHidden) {
+      setNotebookVisible(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isNotebookVisible) {
+      updateAppTheme('base-200');
+    } else {
+      updateAppTheme('base-100');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isNotebookVisible]);
+
   useEffect(() => {
     setNotebookWidth(settings.globalReadSettings.notebookWidth);
     setNotebookPin(settings.globalReadSettings.isNotebookPinned);
     setNotebookVisible(settings.globalReadSettings.isNotebookPinned);
+
+    eventDispatcher.on('navigate', onNavigateEvent);
+    return () => {
+      eventDispatcher.off('navigate', onNavigateEvent);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -72,9 +100,9 @@ const Notebook: React.FC = ({}) => {
       type: 'annotation',
       cfi,
       note,
-      href: selection.href || '',
       text: selection.text,
-      created: Date.now(),
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
     };
     annotations.push(annotation);
     const updatedConfig = updateBooknotes(sideBarBookKey, annotations);
@@ -84,14 +112,18 @@ const Notebook: React.FC = ({}) => {
     setNotebookNewAnnotation(null);
   };
 
-  const handleEditNote = (annotation: BookNote) => {
+  const handleEditNote = (note: BookNote, isDelete: boolean) => {
     if (!sideBarBookKey) return;
     const config = getConfig(sideBarBookKey)!;
     const { booknotes: annotations = [] } = config;
-    const existingIndex = annotations.findIndex((item) => item.id === annotation.id);
+    const existingIndex = annotations.findIndex((item) => item.id === note.id);
     if (existingIndex === -1) return;
-    annotation.modified = Date.now();
-    annotations[existingIndex] = annotation;
+    if (isDelete) {
+      note.deletedAt = Date.now();
+    } else {
+      note.updatedAt = Date.now();
+    }
+    annotations[existingIndex] = note;
     const updatedConfig = updateBooknotes(sideBarBookKey, annotations);
     if (updatedConfig) {
       saveConfig(envConfig, sideBarBookKey, updatedConfig, settings);
@@ -100,28 +132,17 @@ const Notebook: React.FC = ({}) => {
   };
 
   const { handleMouseDown } = useDragBar(handleDragMove);
-  const deleteNote = (note: BookNote) => {
-    if (!sideBarBookKey) return;
-    const config = getConfig(sideBarBookKey);
-    if (!config) return;
-    const { booknotes = [] } = config;
-    const updatedNotes = booknotes.filter((item) => item.id !== note.id);
-    const updatedConfig = updateBooknotes(sideBarBookKey, updatedNotes);
-    if (updatedConfig) {
-      saveConfig(envConfig, sideBarBookKey, updatedConfig, settings);
-    }
-  };
 
   if (!sideBarBookKey) return null;
 
   const config = getConfig(sideBarBookKey);
   const { booknotes: allNotes = [] } = config || {};
   const annotationNotes = allNotes
-    .filter((note) => note.type === 'annotation' && note.note)
-    .sort((a, b) => b.created - a.created);
+    .filter((note) => note.type === 'annotation' && note.note && !note.deletedAt)
+    .sort((a, b) => b.createdAt - a.createdAt);
   const excerptNotes = allNotes
-    .filter((note) => note.type === 'excerpt')
-    .sort((a, b) => a.created - b.created);
+    .filter((note) => note.type === 'excerpt' && note.text && !note.deletedAt)
+    .sort((a, b) => a.createdAt - b.createdAt);
 
   return isNotebookVisible ? (
     <>
@@ -131,7 +152,7 @@ const Notebook: React.FC = ({}) => {
       <div
         className={clsx(
           'notebook-container bg-base-200 right-0 z-20 h-full min-w-60 select-none',
-          'rounded-window-top-right rounded-window-bottom-right',
+          isTauriAppPlatform() && 'rounded-window-top-right rounded-window-bottom-right',
           !isNotebookPinned && 'shadow-2xl',
         )}
         style={{
@@ -140,13 +161,25 @@ const Notebook: React.FC = ({}) => {
           position: isNotebookPinned ? 'relative' : 'absolute',
         }}
       >
+        <style jsx>{`
+          @media (max-width: 640px) {
+            .notebook-container {
+              width: 100%;
+              min-width: 100%;
+            }
+          }
+        `}</style>
         <div
           className='drag-bar absolute left-0 top-0 h-full w-0.5 cursor-col-resize'
           onMouseDown={handleMouseDown}
         />
-        <NotebookHeader isPinned={isNotebookPinned} handleTogglePin={handleTogglePin} />
+        <NotebookHeader
+          isPinned={isNotebookPinned}
+          handleClose={() => setNotebookVisible(false)}
+          handleTogglePin={handleTogglePin}
+        />
         <div className='max-h-[calc(100vh-44px)] overflow-y-auto px-3'>
-          <div>{excerptNotes.length > 0 && <p className='pt-1 text-sm'>Excerpts</p>}</div>
+          <div>{excerptNotes.length > 0 && <p className='pt-1 text-sm'>{_('Excerpts')}</p>}</div>
           <ul className=''>
             {excerptNotes.map((item, index) => (
               <li key={`${index}-${item.id}`} className='my-2'>
@@ -165,21 +198,15 @@ const Notebook: React.FC = ({}) => {
                   >
                     <p className='line-clamp-1'>{item.text || `Excerpt ${index + 1}`}</p>
                   </div>
-                  <div
-                    className='collapse-content select-text px-3 pb-0 text-xs'
-                    onClick={(e) => e.stopPropagation()}
-                  >
+                  <div className='collapse-content select-text px-3 pb-0 text-xs'>
                     <p className='hyphens-auto text-justify'>{item.text}</p>
                     <div className='flex justify-end'>
-                      <button
-                        className={clsx(
-                          'btn btn-ghost settings-content hover:bg-transparent',
-                          'flex h-[1em] min-h-[1em] items-end p-0',
-                        )}
-                        onClick={deleteNote.bind(null, item)}
+                      <div
+                        className='cursor-pointer align-bottom text-xs text-red-400'
+                        onClick={handleEditNote.bind(null, item, true)}
                       >
-                        <div className='align-bottom text-xs text-red-400'>Delete</div>
-                      </button>
+                        {_('Delete')}
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -188,20 +215,15 @@ const Notebook: React.FC = ({}) => {
           </ul>
           <div>
             {(notebookNewAnnotation || annotationNotes.length > 0) && (
-              <p className='pt-1 text-sm'>Notes</p>
+              <p className='pt-1 text-sm'>{_('Notes')}</p>
             )}
           </div>
           {(notebookNewAnnotation || notebookEditAnnotation) && (
-            <NoteEditor onSave={handleSaveNote} onEdit={handleEditNote} />
+            <NoteEditor onSave={handleSaveNote} onEdit={(item) => handleEditNote(item, false)} />
           )}
           <ul className=''>
             {annotationNotes.map((item, index) => (
-              <BooknoteItem
-                key={`${index}-${item.cfi}`}
-                bookKey={sideBarBookKey}
-                item={item}
-                editable={true}
-              />
+              <BooknoteItem key={`${index}-${item.cfi}`} bookKey={sideBarBookKey} item={item} />
             ))}
           </ul>
         </div>

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

@@ -5,14 +5,18 @@ import { TbSunMoon } from 'react-icons/tb';
 
 import { useTheme } from '@/hooks/useTheme';
 import { themes } from '@/styles/themes';
-import { useReaderStore } from '@/store/readerStore';
 import { getStyles } from '@/utils/style';
+import { useReaderStore } from '@/store/readerStore';
+import { useTranslation } from '@/hooks/useTranslation';
+import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 
 const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
+  const _ = useTranslation();
   const { themeMode, themeColor, themeCode, isDarkMode, updateThemeMode, updateThemeColor } =
     useTheme();
   const { getViews, getViewSettings } = useReaderStore();
   const viewSettings = getViewSettings(bookKey)!;
+  const iconSize24 = useResponsiveSize(24);
 
   useEffect(() => {
     getViews().forEach((view) => {
@@ -24,39 +28,39 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   return (
     <div className='my-4 w-full space-y-6'>
       <div className='flex items-center justify-between'>
-        <h2 className='font-medium'>Theme Mode</h2>
+        <h2 className='font-medium'>{_('Theme Mode')}</h2>
         <div className='flex gap-2'>
-          <div className='tooltip tooltip-bottom' data-tip='Auto Mode'>
+          <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Auto Mode')}>
             <button
               className={`btn btn-ghost btn-circle ${themeMode === 'auto' ? 'btn-active bg-base-300' : ''}`}
               onClick={() => updateThemeMode('auto')}
             >
-              <TbSunMoon size={20} />
+              <TbSunMoon />
             </button>
           </div>
 
-          <div className='tooltip tooltip-bottom' data-tip='Light Mode'>
+          <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Light Mode')}>
             <button
               className={`btn btn-ghost btn-circle ${themeMode === 'light' ? 'btn-active bg-base-300' : ''}`}
               onClick={() => updateThemeMode('light')}
             >
-              <MdOutlineLightMode size={20} />
+              <MdOutlineLightMode />
             </button>
           </div>
 
-          <div className='tooltip tooltip-bottom' data-tip='Dark Mode'>
+          <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Dark Mode')}>
             <button
               className={`btn btn-ghost btn-circle ${themeMode === 'dark' ? 'btn-active bg-base-300' : ''}`}
               onClick={() => updateThemeMode('dark')}
             >
-              <MdOutlineDarkMode size={20} />
+              <MdOutlineDarkMode />
             </button>
           </div>
         </div>
       </div>
 
       <div>
-        <h2 className='mb-2 font-medium'>Theme Color</h2>
+        <h2 className='mb-2 font-medium'>{_('Theme Color')}</h2>
         <div className='grid grid-cols-3 gap-4'>
           {themes.map(({ name, label, colors }) => (
             <label
@@ -78,11 +82,11 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
                 className='hidden'
               />
               {themeColor === name ? (
-                <MdRadioButtonChecked size={24} />
+                <MdRadioButtonChecked size={iconSize24} />
               ) : (
-                <MdRadioButtonUnchecked size={24} />
+                <MdRadioButtonUnchecked size={iconSize24} />
               )}
-              <span>{label}</span>
+              <span>{_(label)}</span>
             </label>
           ))}
         </div>

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

@@ -1,12 +1,16 @@
 import React from 'react';
 import { MdCheck } from 'react-icons/md';
 import { useSettingsStore } from '@/store/settingsStore';
+import { useTranslation } from '@/hooks/useTranslation';
+import { useDefaultIconSize } from '@/hooks/useResponsiveSize';
 
 interface DialogMenuProps {
   toggleDropdown?: () => void;
 }
 
 const DialogMenu: React.FC<DialogMenuProps> = ({ toggleDropdown }) => {
+  const _ = useTranslation();
+  const iconSize = useDefaultIconSize();
   const { isFontLayoutSettingsGlobal, setFontLayoutSettingsGlobal } = useSettingsStore();
 
   const handleToggleGlobal = () => {
@@ -24,11 +28,16 @@ const DialogMenu: React.FC<DialogMenuProps> = ({ toggleDropdown }) => {
         onClick={handleToggleGlobal}
       >
         <div className='flex items-center'>
-          <span style={{ minWidth: '20px' }}>
-            {isFontLayoutSettingsGlobal && <MdCheck size={20} className='text-base-content' />}
+          <span style={{ minWidth: `${iconSize}px` }}>
+            {isFontLayoutSettingsGlobal && <MdCheck className='text-base-content' />}
           </span>
-          <div className='tooltip' data-tip='Uncheck for current book settings'>
-            <span className='ml-2'>Global Settings</span>
+          <div
+            className='lg:tooltip'
+            data-tip={
+              isFontLayoutSettingsGlobal ? _('Apply to All Books') : _('Apply to This Book')
+            }
+          >
+            <span className='ml-2'>{_('Global Settings')}</span>
           </div>
         </div>
       </button>

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

@@ -1,11 +1,15 @@
+import clsx from 'clsx';
 import React from 'react';
-import { FiChevronDown } from 'react-icons/fi';
+import { FiChevronUp, FiChevronLeft } from 'react-icons/fi';
 import { MdCheck } from 'react-icons/md';
+import { useTranslation } from '@/hooks/useTranslation';
+import { useDefaultIconSize, useResponsiveSize } from '@/hooks/useResponsiveSize';
 
 interface DropdownProps {
   family?: string;
   selected: string;
-  options: string[];
+  options: { option: string; label: string }[];
+  moreOptions?: string[];
   onSelect: (option: string) => void;
   onGetFontFamily: (option: string, family: string) => string;
 }
@@ -14,32 +18,71 @@ const FontDropdown: React.FC<DropdownProps> = ({
   family,
   selected,
   options,
+  moreOptions,
   onSelect,
   onGetFontFamily,
 }) => {
+  const _ = useTranslation();
+  const iconSize16 = useResponsiveSize(16);
+  const defaultIconSize = useDefaultIconSize();
+  const selectedOption = options.find((option) => option.option === selected)!;
   return (
-    <div className='dropdown dropdown-end'>
+    <div className='dropdown dropdown-top'>
       <button
         tabIndex={0}
         className='btn btn-sm flex items-center gap-1 px-[20px] font-normal normal-case'
       >
-        <span style={{ fontFamily: onGetFontFamily(selected, family ?? '') }}>{selected}</span>
-        <FiChevronDown className='h-4 w-4' />
+        <span style={{ fontFamily: onGetFontFamily(selectedOption.option, family ?? '') }}>
+          {selectedOption.label}
+        </span>
+        <FiChevronUp size={iconSize16} />
       </button>
       <ul
         tabIndex={0}
-        className='dropdown-content dropdown-right menu bg-base-100 rounded-box z-[1] mt-4 w-44 shadow'
+        className='dropdown-content bgcolor-base-200 no-triangle menu rounded-box absolute right-[-32px] z-[1] mt-4 w-44 shadow sm:right-0'
       >
-        {options.map((option) => (
+        {options.map(({ option, label }) => (
           <li key={option} onClick={() => onSelect(option)}>
             <div className='flex items-center px-0'>
-              <span style={{ minWidth: '20px' }}>
-                {selected === option && <MdCheck size={20} className='text-base-content' />}
+              <span style={{ minWidth: `${defaultIconSize}px` }}>
+                {selected === option && <MdCheck className='text-base-content' />}
+              </span>
+              <span style={{ fontFamily: onGetFontFamily(option, family ?? '') }}>
+                {label || option}
               </span>
-              <span style={{ fontFamily: onGetFontFamily(option, family ?? '') }}>{option}</span>
             </div>
           </li>
         ))}
+        {moreOptions && moreOptions.length > 0 && (
+          <li className='dropdown dropdown-left dropdown-top'>
+            <div className='flex items-center px-0'>
+              <span style={{ minWidth: `${defaultIconSize}px` }}>
+                <FiChevronLeft size={iconSize16} />
+              </span>
+              <span>{_('System Fonts')}</span>
+            </div>
+            <ul
+              tabIndex={0}
+              className={clsx(
+                'dropdown-content bgcolor-base-200 menu rounded-box relative z-[1] overflow-y-scroll shadow',
+                '!mr-5 mb-[-46px] inline max-h-80 w-[200px] overflow-y-scroll',
+              )}
+            >
+              {moreOptions.map((option) => (
+                <li key={option} onClick={() => onSelect(option)}>
+                  <div className='flex items-center px-2'>
+                    <span style={{ minWidth: `${defaultIconSize}px` }}>
+                      {selected === option && <MdCheck className='text-base-content' />}
+                    </span>
+                    <span style={{ fontFamily: onGetFontFamily(option, family ?? '') }}>
+                      {option}
+                    </span>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </li>
+        )}
       </ul>
     </div>
   );

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

@@ -3,33 +3,54 @@ import React, { useEffect, useState } from 'react';
 
 import NumberInput from './NumberInput';
 import FontDropdown from './FontDropDown';
-import { MONOSPACE_FONTS, SANS_SERIF_FONTS, SERIF_FONTS } from '@/services/constants';
+import {
+  ANDROID_FONTS,
+  IOS_FONTS,
+  LINUX_FONTS,
+  MACOS_FONTS,
+  MONOSPACE_FONTS,
+  SANS_SERIF_FONTS,
+  SERIF_FONTS,
+  WINDOWS_FONTS,
+} from '@/services/constants';
 import { useReaderStore } from '@/store/readerStore';
 import { useSettingsStore } from '@/store/settingsStore';
-import { getStyles } from '@/utils/style';
+import { useTranslation } from '@/hooks/useTranslation';
 import { useTheme } from '@/hooks/useTheme';
+import { getStyles } from '@/utils/style';
+import { getOSPlatform } from '@/utils/misc';
+import { FONT_ENUM_SUPPORTED_OS_PLATFORMS, getSysFontsList } from '@/utils/font';
+import { isTauriAppPlatform } from '@/services/environment';
 
 interface FontFaceProps {
   className?: string;
   family: string;
   label: string;
   options: string[];
+  moreOptions?: string[];
   selected: string;
   onSelect: (option: string) => void;
 }
 
-const fontFamilyOptions = ['Serif', 'Sans-serif'];
-
 const handleFontFaceFont = (option: string, family: string) => {
   return `'${option}', ${family}`;
 };
 
-const FontFace = ({ className, family, label, options, selected, onSelect }: FontFaceProps) => (
+const FontFace = ({
+  className,
+  family,
+  label,
+  options,
+  moreOptions,
+  selected,
+  onSelect,
+}: FontFaceProps) => (
   <div className={clsx('config-item', className)}>
     <span className=''>{label}</span>
     <FontDropdown
       family={family}
-      options={options}
+      options={options.map((option) => ({ option, label: option }))}
+      moreOptions={moreOptions}
       selected={selected}
       onSelect={onSelect}
       onGetFontFamily={handleFontFaceFont}
@@ -38,12 +59,46 @@ const FontFace = ({ className, family, label, options, selected, onSelect }: Fon
 );
 
 const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
+  const _ = useTranslation();
   const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
   const { getView, getViewSettings, setViewSettings } = useReaderStore();
   const view = getView(bookKey);
   const viewSettings = getViewSettings(bookKey)!;
   const { themeCode } = useTheme();
 
+  const fontFamilyOptions = [
+    {
+      option: 'Serif',
+      label: _('Serif Font'),
+    },
+    {
+      option: 'Sans-serif',
+      label: _('Sans-Serif Font'),
+    },
+  ];
+
+  const osPlatform = getOSPlatform();
+  let defaultSysFonts: string[] = [];
+  switch (osPlatform) {
+    case 'macos':
+      defaultSysFonts = MACOS_FONTS;
+      break;
+    case 'windows':
+      defaultSysFonts = WINDOWS_FONTS;
+      break;
+    case 'linux':
+      defaultSysFonts = LINUX_FONTS;
+      break;
+    case 'ios':
+      defaultSysFonts = IOS_FONTS;
+      break;
+    case 'android':
+      defaultSysFonts = ANDROID_FONTS;
+      break;
+    default:
+      break;
+  }
+  const [sysFonts, setSysFonts] = useState<string[]>(defaultSysFonts);
   const [defaultFontSize, setDefaultFontSize] = useState(viewSettings.defaultFontSize!);
   const [minFontSize, setMinFontSize] = useState(viewSettings.minimumFontSize!);
   const [overrideFont, setOverrideFont] = useState(viewSettings.overrideFont!);
@@ -52,6 +107,15 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [sansSerifFont, setSansSerifFont] = useState(viewSettings.sansSerifFont!);
   const [monospaceFont, setMonospaceFont] = useState(viewSettings.monospaceFont!);
 
+  useEffect(() => {
+    if (isTauriAppPlatform() && FONT_ENUM_SUPPORTED_OS_PLATFORMS.includes(osPlatform)) {
+      getSysFontsList().then((fonts) => {
+        setSysFonts(fonts);
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     viewSettings.defaultFont = defaultFont;
     setViewSettings(bookKey, viewSettings);
@@ -145,12 +209,12 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   return (
     <div className='my-4 w-full space-y-6'>
       <div className='w-full'>
-        <h2 className='mb-2 font-medium'>Font Size</h2>
+        <h2 className='mb-2 font-medium'>{_('Font Size')}</h2>
         <div className='card border-base-200 border shadow'>
           <div className='divide-base-200 divide-y'>
             <NumberInput
               className='config-item-top'
-              label='Default Font Size'
+              label={_('Default Font Size')}
               value={defaultFontSize}
               onChange={setDefaultFontSize}
               min={minFontSize}
@@ -158,7 +222,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
             />
             <NumberInput
               className='config-item-bottom'
-              label='Minimum Font Size'
+              label={_('Minimum Font Size')}
               value={minFontSize}
               onChange={setMinFontSize}
               min={1}
@@ -169,11 +233,11 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       </div>
 
       <div className='w-full'>
-        <h2 className='mb-2 font-medium'>Font Family</h2>
+        <h2 className='mb-2 font-medium'>{_('Font Family')}</h2>
         <div className='card border-base-200 border shadow'>
           <div className='divide-base-200 divide-y'>
             <div className='config-item config-item-top'>
-              <span className=''>Default Font</span>
+              <span className=''>{_('Default Font')}</span>
               <FontDropdown
                 options={fontFamilyOptions}
                 selected={defaultFont}
@@ -183,7 +247,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
             </div>
 
             <div className='config-item config-item-bottom'>
-              <span className=''>Override Publisher Font</span>
+              <span className=''>{_('Override Book Font')}</span>
               <input
                 type='checkbox'
                 className='toggle'
@@ -196,29 +260,32 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       </div>
 
       <div className='w-full'>
-        <h2 className='mb-2 font-medium'>Font Face</h2>
+        <h2 className='mb-2 font-medium'>{_('Font Face')}</h2>
         <div className='card border-base-200 border shadow'>
           <div className='divide-base-200 divide-y'>
             <FontFace
               className='config-item-top'
               family='serif'
-              label='Serif Font'
+              label={_('Serif Font')}
               options={SERIF_FONTS}
+              moreOptions={sysFonts}
               selected={serifFont}
               onSelect={setSerifFont}
             />
             <FontFace
               family='sans-serif'
-              label='Sans-Serif Font'
+              label={_('Sans-Serif Font')}
               options={SANS_SERIF_FONTS}
+              moreOptions={sysFonts}
               selected={sansSerifFont}
               onSelect={setSansSerifFont}
             />
             <FontFace
               className='config-item-bottom'
               family='monospace'
-              label='Monospace Font'
+              label={_('Monospace Font')}
               options={MONOSPACE_FONTS}
+              moreOptions={sysFonts}
               selected={monospaceFont}
               onSelect={setMonospaceFont}
             />

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

@@ -1,15 +1,24 @@
 import React, { useEffect, useState } from 'react';
+import { MdOutlineAutoMode } from 'react-icons/md';
+import { MdOutlineTextRotationDown, MdOutlineTextRotationNone } from 'react-icons/md';
+
+import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useReaderStore } from '@/store/readerStore';
-import { getStyles } from '@/utils/style';
-import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
-import NumberInput from './NumberInput';
+import { useBookDataStore } from '@/store/bookDataStore';
+import { useTranslation } from '@/hooks/useTranslation';
 import { useTheme } from '@/hooks/useTheme';
+import { getStyles } from '@/utils/style';
+import { getBookDirFromWritingMode, getBookLangCode } from '@/utils/book';
+import NumberInput from './NumberInput';
 
 const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
+  const _ = useTranslation();
   const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
   const { getView, getViewSettings, setViewSettings } = useReaderStore();
+  const { getBookData } = useBookDataStore();
   const view = getView(bookKey);
+  const bookData = getBookData(bookKey)!;
   const viewSettings = getViewSettings(bookKey)!;
   const { themeCode } = useTheme();
 
@@ -21,6 +30,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [maxColumnCount, setMaxColumnCount] = useState(viewSettings.maxColumnCount!);
   const [maxInlineSize, setMaxInlineSize] = useState(viewSettings.maxInlineSize!);
   const [maxBlockSize, setMaxBlockSize] = useState(viewSettings.maxBlockSize!);
+  const [writingMode, setWritingMode] = useState(viewSettings.writingMode!);
 
   useEffect(() => {
     viewSettings.lineHeight = lineHeight;
@@ -109,15 +119,76 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxInlineSize]);
 
+  useEffect(() => {
+    viewSettings.maxBlockSize = maxBlockSize;
+    setViewSettings(bookKey, viewSettings);
+    if (isFontLayoutSettingsGlobal) {
+      settings.globalViewSettings.maxBlockSize = maxBlockSize;
+      setSettings(settings);
+    }
+    view?.renderer.setAttribute('max-block-size', `${maxBlockSize}px`);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [maxBlockSize]);
+
+  useEffect(() => {
+    // global settings are not supported for writing mode
+    viewSettings.writingMode = writingMode;
+    setViewSettings(bookKey, viewSettings);
+    if (view) {
+      view.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+      view.book.dir = getBookDirFromWritingMode(writingMode);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [writingMode]);
+
+  const langCode = getBookLangCode(bookData.bookDoc?.metadata?.language);
+  const isCJKBook = langCode === 'zh' || langCode === 'ja' || langCode === 'ko';
+
   return (
     <div className='my-4 w-full space-y-6'>
+      {isCJKBook && (
+        <div className='w-full'>
+          <div className='flex items-center justify-between'>
+            <h2 className='font-medium'>{_('Writing Mode')}</h2>
+            <div className='flex gap-2'>
+              <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Default')}>
+                <button
+                  className={`btn btn-ghost btn-circle ${writingMode === 'auto' ? 'btn-active bg-base-300' : ''}`}
+                  onClick={() => setWritingMode('auto')}
+                >
+                  <MdOutlineAutoMode />
+                </button>
+              </div>
+
+              <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Horizontal Direction')}>
+                <button
+                  className={`btn btn-ghost btn-circle ${writingMode === 'horizontal-tb' ? 'btn-active bg-base-300' : ''}`}
+                  onClick={() => setWritingMode('horizontal-tb')}
+                >
+                  <MdOutlineTextRotationNone />
+                </button>
+              </div>
+
+              <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Vertical Direction')}>
+                <button
+                  className={`btn btn-ghost btn-circle ${writingMode === 'vertical-rl' ? 'btn-active bg-base-300' : ''}`}
+                  onClick={() => setWritingMode('vertical-rl')}
+                >
+                  <MdOutlineTextRotationDown />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       <div className='w-full'>
-        <h2 className='mb-2 font-medium'>Paragraph</h2>
+        <h2 className='mb-2 font-medium'>{_('Paragraph')}</h2>
         <div className='card bg-base-100 border-base-200 border shadow'>
           <div className='divide-base-200 divide-y'>
             <NumberInput
               className='config-item-top'
-              label='Line Height'
+              label={_('Line Height')}
               value={lineHeight}
               onChange={setLineHeight}
               min={1.0}
@@ -125,7 +196,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               step={0.1}
             />
             <div className='config-item config-item-bottom'>
-              <span className=''>Full Justification</span>
+              <span className=''>{_('Full Justification')}</span>
               <input
                 type='checkbox'
                 className='toggle'
@@ -134,7 +205,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               />
             </div>
             <div className='config-item config-item-bottom'>
-              <span className=''>Hyphenation</span>
+              <span className=''>{_('Hyphenation')}</span>
               <input
                 type='checkbox'
                 className='toggle'
@@ -147,12 +218,12 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       </div>
 
       <div className='w-full'>
-        <h2 className='mb-2 font-medium'>Page</h2>
+        <h2 className='mb-2 font-medium'>{_('Page')}</h2>
         <div className='card bg-base-100 border-base-200 border shadow'>
           <div className='divide-base-200 divide-y'>
             <NumberInput
               className='config-item-top'
-              label='Margins (px)'
+              label={_('Vertical Margins (px)')}
               value={marginPx}
               onChange={setMarginPx}
               min={0}
@@ -160,21 +231,21 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               step={4}
             />
             <NumberInput
-              label='Gaps (%)'
+              label={_('Horizontal Margins (%)')}
               value={gapPercent}
               onChange={setGapPercent}
               min={0}
               max={30}
             />
             <NumberInput
-              label='Maximum Number of Columns'
+              label={_('Maximum Number of Columns')}
               value={maxColumnCount}
               onChange={setMaxColumnCount}
               min={1}
-              max={2}
+              max={4}
             />
             <NumberInput
-              label='Maximum Inline Size'
+              label={_('Maximum Inline Size')}
               value={maxInlineSize}
               onChange={setMaxInlineSize}
               min={500}
@@ -182,7 +253,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               step={100}
             />
             <NumberInput
-              label='Maximum Block Size'
+              label={_('Maximum Block Size')}
               value={maxBlockSize}
               onChange={setMaxBlockSize}
               min={500}

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

@@ -1,58 +1,67 @@
+import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { useReaderStore } from '@/store/readerStore';
 import { useSettingsStore } from '@/store/settingsStore';
-import cssbeautify from 'cssbeautify';
+import { useTranslation } from '@/hooks/useTranslation';
 import { getStyles } from '@/utils/style';
 import { useTheme } from '@/hooks/useTheme';
-
-const cssRegex =
-  /((?:\s*)([\w#.@*,:\-.:>+~\[\]\"=(),*\s]+)\s*{(?:[\s]*)((?:[A-Za-z\- \s]+[:]\s*['"0-9\w .,\/\()\-!#%]+;?)*)*\s*}(?:\s*))/gim;
+import cssbeautify from 'cssbeautify';
+import cssValidate from '@/utils/css';
 
 const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
+  const _ = useTranslation();
   const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
   const { getView, getViewSettings, setViewSettings } = useReaderStore();
   const viewSettings = getViewSettings(bookKey)!;
   const { themeCode } = useTheme();
 
   const [animated, setAnimated] = useState(viewSettings.animated!);
-  const [userStylesheet, setUserStylesheet] = useState(viewSettings.userStylesheet!);
+  const [isDisableClick, setIsDisableClick] = useState(viewSettings.disableClick!);
+  const [draftStylesheet, setDraftStylesheet] = useState(viewSettings.userStylesheet!);
+  const [draftStylesheetSaved, setDraftStylesheetSaved] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  let cssInput = userStylesheet;
-
-  const validateCSS = (css: string) => {
-    return cssRegex.test(css);
-  };
-
   const handleUserStylesheetChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    cssInput = e.target.value;
+    const cssInput = e.target.value;
+    setDraftStylesheet(cssInput);
+    setDraftStylesheetSaved(false);
 
     try {
-      const formattedCSS = cssbeautify(cssInput, {
-        indent: '  ',
-        openbrace: 'end-of-line',
-        autosemicolon: true,
-      });
-      setUserStylesheet(formattedCSS);
-
-      if (cssInput && !validateCSS(cssInput)) {
-        throw new Error('Invalid CSS');
+      const { isValid, error } = cssValidate(cssInput);
+      if (cssInput && !isValid) {
+        throw new Error(error || 'Invalid CSS');
       }
       setError(null);
-
-      viewSettings.userStylesheet = formattedCSS;
-      setViewSettings(bookKey, viewSettings);
-      if (isFontLayoutSettingsGlobal) {
-        settings.globalViewSettings.userStylesheet = formattedCSS;
-        setSettings(settings);
+    } catch (err: unknown) {
+      if (err instanceof Error) {
+        setError(err.message);
+      } else {
+        setError('Invalid CSS: Please check your input.');
       }
-      getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
-    } catch (err) {
-      setError('Invalid CSS: Please check your input.');
       console.log('CSS Error:', err);
     }
   };
 
+  const applyStyles = () => {
+    const formattedCSS = cssbeautify(draftStylesheet, {
+      indent: '  ',
+      openbrace: 'end-of-line',
+      autosemicolon: true,
+    });
+
+    setDraftStylesheet(formattedCSS);
+    setDraftStylesheetSaved(true);
+    viewSettings.userStylesheet = formattedCSS;
+    setViewSettings(bookKey, viewSettings);
+
+    if (isFontLayoutSettingsGlobal) {
+      settings.globalViewSettings.userStylesheet = formattedCSS;
+      setSettings(settings);
+    }
+
+    getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings, themeCode));
+  };
+
   const handleInput = (e: React.FormEvent<HTMLTextAreaElement>) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
@@ -73,14 +82,24 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [animated]);
 
+  useEffect(() => {
+    viewSettings.disableClick = isDisableClick;
+    setViewSettings(bookKey, viewSettings);
+    if (isFontLayoutSettingsGlobal) {
+      settings.globalViewSettings.disableClick = isDisableClick;
+      setSettings(settings);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDisableClick]);
+
   return (
     <div className='my-4 w-full space-y-6'>
       <div className='w-full'>
-        <h2 className='mb-2 font-medium'>Animation</h2>
-        <div className='card bg-base-100 border shadow'>
+        <h2 className='mb-2 font-medium'>{_('Animation')}</h2>
+        <div className='card border-base-200 bg-base-100 border shadow'>
           <div className='divide-y'>
             <div className='config-item config-item-top config-item-bottom'>
-              <span className='text-gray-700'>Paging Animation</span>
+              <span className=''>{_('Paging Animation')}</span>
               <input
                 type='checkbox'
                 className='toggle'
@@ -93,24 +112,53 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       </div>
 
       <div className='w-full'>
-        <h2 className='mb-2 font-medium'>Custom CSS</h2>
-        <div className={`card bg-base-100 border shadow ${error ? 'border-red-500' : ''}`}>
+        <h2 className='mb-2 font-medium'>{_('Behavior')}</h2>
+        <div className='card border-base-200 bg-base-100 border shadow'>
           <div className='divide-y'>
-            <div className='css-text-area config-item-top config-item-bottom p-1'>
-              <textarea
-                className='textarea textarea-ghost h-48 w-full border-0 p-3 !outline-none'
-                placeholder='Enter your custom CSS here...'
-                spellCheck='false'
-                value={cssInput}
-                onInput={handleInput}
-                onKeyDown={handleInput}
-                onKeyUp={handleInput}
-                onChange={handleUserStylesheetChange}
+            <div className='config-item config-item-top config-item-bottom'>
+              <span className=''>{_('Disable Click-to-Flip')}</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={isDisableClick}
+                onChange={() => setIsDisableClick(!isDisableClick)}
               />
             </div>
           </div>
         </div>
       </div>
+
+      <div className='w-full'>
+        <h2 className='mb-2 font-medium'>{_('Custom CSS')}</h2>
+        <div
+          className={`card border-base-200 bg-base-100 border shadow ${error ? 'border-red-500' : ''}`}
+        >
+          <div className='relative p-1'>
+            <textarea
+              className='textarea textarea-ghost h-48 w-full border-0 p-3 text-base !outline-none sm:text-sm'
+              placeholder={_('Enter your custom CSS here...')}
+              spellCheck='false'
+              value={draftStylesheet}
+              onInput={handleInput}
+              onKeyDown={handleInput}
+              onKeyUp={handleInput}
+              onChange={handleUserStylesheetChange}
+            />
+            <button
+              className={clsx(
+                'btn btn-ghost bg-base-200 absolute bottom-2 right-4 h-8 min-h-8 px-4 py-2',
+                draftStylesheetSaved ? 'hidden' : '',
+                error ? 'btn-disabled' : '',
+              )}
+              onClick={applyStyles}
+              disabled={!!error}
+            >
+              {_('Apply')}
+            </button>
+          </div>
+        </div>
+        {error && <p className='mt-1 text-sm text-red-500'>{error}</p>}
+      </div>
     </div>
   );
 };