Release aarch64 Linux binaries (#118 )

2025-01-06 19:19:35 +01:00
131 changed files with 1300 additions and 7690 deletions
@@ -1,3 +0,0 @@
-[*.{ts,tsx}]
-indent_style = space
-indent_size = 2
@@ -1,4 +1,4 @@
-name: PR checks
+name: Build Web Application on Pull Request
 on:
  pull_request:
    branches: [main]
@@ -6,28 +6,6 @@ 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 install -y libglib2.0-dev libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev libsoup-3.0-dev
-      - name: Format
-        working-directory: apps/readest-app/src-tauri
-        run: cargo fmt --check
-      - name: Clippy Check
-        working-directory: apps/readest-app/src-tauri
-        run: cargo clippy -- -D warnings
-
  build_web_app:
    runs-on: ubuntu-latest
    steps:
@@ -59,6 +59,9 @@ jobs:
          - os: ubuntu-22.04
            arch: x86_64
            rust_target: x86_64-unknown-linux-gnu
+          - os: ubuntu-22.04
+            arch: aarch64
+            rust_target: aarch64-unknown-linux-gnu
          - os: macos-latest
            arch: aarch64
            rust_target: x86_64-apple-darwin,aarch64-apple-darwin
@@ -104,12 +107,14 @@ jobs:

      - uses: Swatinem/rust-cache@v2
        with:
-          key: ${{ matrix.config.os }}-cargo-${{ hashFiles('Cargo.lock') }}
+          key: ${{ matrix.config.os }}-cargo-${{ hashFiles('apps/readest-app/src-tauri/Cargo.lock') }}
+          workspaces: apps/readest-app/src-tauri -> target

      - 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
@@ -159,7 +164,7 @@ jobs:
            exit 1
          fi

-          exe_file="target/${{ matrix.config.rust_target }}/release/readest.exe"
+          exe_file="apps/readest-app/src-tauri/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"
@@ -180,18 +185,10 @@ jobs:
        uses: actions/github-script@v7
        env:
          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}`;
+            const body = `## Release Highlight\n${process.env.release_note}`;
            github.rest.repos.updateRelease({
              owner: context.repo.owner,
              repo: context.repo.repo,
@@ -35,6 +35,3 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
-# Rust build
-target
@@ -33,7 +33,7 @@ To get started with Readest, follow these steps to clone and build the project.
 #### 1. Clone the Repository

 ```bash
-git clone https://github.com/readest/readest.git
+git clone https://github.com/chrox/readest.git
 cd readest
 git submodule update --init --recursive
 ```
@@ -77,11 +77,10 @@ Now you're all setup and can start implementing your changes.

 This project is a monorepo. The code for the `readest-app` is in the `app/readest-app` directory. Here are some useful scripts for developing the frontend only without compiling Tauri:

-| Command                                    | Description                                        |
-| ------------------------------------------ | -------------------------------------------------- |
-| `pnpm dev-web`                             | Starts the development server for the web app only |
-| `TAURI_DEV_HOST=192.168.1.22 pnpm dev-web` | Start the dev server on a LAN address              |
-| `pnpm build-web`                           | Builds the web app                                 |
+| Command          | Description                                        |
+| ---------------- | -------------------------------------------------- |
+| `pnpm dev-web`   | Starts the development server for the web app only |
+| `pnpm build-web` | Builds the web app                                 |

 Recommended Visual Studio Code plugins for development:

@@ -1,3 +0,0 @@
-[workspace]
-members = ["apps/readest-app/src-tauri"]
-resolver = "2"
@@ -52,25 +52,25 @@
 | **Customize Font and Layout**           | Adjust font, layout, theme mode, and theme colors for a personalized experience.   | ✅         |
 | **File Association and Open With**      | Quickly open files in Readest in your file browser with one-click.                 | ✅         |
 | **Sync across Platforms**               | Synchronize reading progress, notes, and bookmarks across all supported platforms. | ✅         |
-| **Text-to-Speech (TTS) Support**        | Enable text-to-speech functionality for a more accessible reading experience.      | ✅         |

 ## 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.                                         | 🛠           |
-| **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.                         | 🔄           |
+| **Feature**                      | **Description**                                                                            | **Priority** |
+| -------------------------------- | ------------------------------------------------------------------------------------------ | ------------ |
+| **Support iOS and Android**      | Expand the APP to work on iOS and Android devices.                                         | 🛠           |
+| **Text-to-Speech (TTS) Support** | Enable text-to-speech functionality for a more accessible reading experience.              | 🛠           |
+| **Sync with Koreader**           | Synchronize reading progress, notes, and bookmarks with [Koreader][link-koreader] devices. | 🔄           |
+| **Keyboard Navigation**          | Implement vimium-style keybindings for book navigation.                                    | 🔄           |
+| **Library Management**           | Organize, sort, and manage your entire ebook library.                                      | 🔄           |
+| **Support OPDS/Calibre**         | Integrate OPDS/Calibre to access online libraries and catalogs.                            | 🔄           |
+| **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.                       | 🔄           |

 Stay tuned for continuous improvements and updates! Contributions and suggestions are always welcome—let's build the ultimate reading experience together. 😊

@@ -80,8 +80,6 @@ Stay tuned for continuous improvements and updates! Contributions and suggestion

 ![DeepL](./data/screenshots/deepl.png)

-![TTS](./data/screenshots/tts_control.png)
-
 ![Footnote](./data/screenshots/footnote_popover.png)

 ![Wikipedia](./data/screenshots/wikipedia_vertical.png)
@@ -164,18 +162,7 @@ pnpm tauri ios dev
 pnpm tauri build
 ```

-### 6. Setup dev environment with Nix
-
-If you have Nix installed, you can leverage flake to enter a development shell
-with all the necessary dependencies:
-
-```bash
-nix develop ./ops  # enter a dev shell for the web app
-nix develop ./ops#ios # enter a dev shell for the ios app
-nix develop ./ops#android # enter a dev shell for the android app
-```
-
-### 7. More information
+### 6. More information

 Please check the [wiki][link-gh-wiki] of this project for more information on development.

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

 <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" />
+    <img width="200" src="https://contrib.rocks/image?repo=readest/readest" alt="A table of avatars from the project's contributors" />
  </p>
 </a>

@@ -193,20 +180,12 @@ Readest is open-source, and contributions are welcome! Feel free to open issues,

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

-The following libraries and software are used in this software:
+The following JavaScript libraries are bundled 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/)

 ---

@@ -1,8 +0,0 @@
-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
@@ -49,7 +49,3 @@ src-tauri/gen

 # vendor
 /public/vendor
-
-# Auto Generated PWA files
-/public/sw.js
-/public/workbox-*.js
@@ -3,30 +3,12 @@ module.exports = {
  output: '.',
  options: {
    debug: false,
-    sort: false,
+    sort: true,
    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',
-    ],
+    lngs: ['de', 'ja', 'es', 'fr', 'it', 'ko', 'pt', 'ru', 'tr', 'id', 'vi', 'zh-CN', 'zh-TW'],
    ns: ['translation'],
    defaultNs: 'translation',
    defaultValue: '__STRING_NOT_TRANSLATED__',
@@ -1,17 +1,13 @@
-import withPWA from 'next-pwa';
-
 /** @type {import('next').NextConfig} */
 const isProd = process.env.NODE_ENV === 'production';

 const internalHost = process.env.TAURI_DEV_HOST || 'localhost';

-const appPlatform = process.env['NEXT_PUBLIC_APP_PLATFORM'];
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
  // Ensure Next.js uses SSG instead of SSR
  // https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
-  output: appPlatform === 'web' ? undefined : 'export',
+  output: process.env['NEXT_PUBLIC_APP_PLATFORM'] === 'web' ? 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: {
@@ -23,11 +19,14 @@ const nextConfig = {
  // Configure assetPrefix or else the server won't properly resolve your assets.
  assetPrefix: isProd ? '' : `http://${internalHost}:3000`,
  reactStrictMode: true,
+  async rewrites() {
+    return [
+      {
+        source: '/api/deepl/:path*',
+        destination: 'https://api-free.deepl.com/v2/:path*',
+      },
+    ];
+  },
 };

-export default withPWA({
-  dest: 'public',
-  disable: appPlatform !== 'web',
-  register: true,
-  skipWaiting: true,
-})(nextConfig);
+export default nextConfig;
@@ -1,6 +1,6 @@
 {
  "name": "@readest/readest-app",
-  "version": "0.9.7",
+  "version": "0.9.1",
  "private": true,
  "scripts": {
    "dev": "dotenv -e .env.tauri -- next dev",
@@ -55,12 +55,11 @@
    "i18next-http-backend": "^3.0.1",
    "js-md5": "^0.8.3",
    "next": "15.1.0",
-    "posthog-js": "^1.205.0",
+    "posthog-js": "^1.194.1",
    "react": "19.0.0",
    "react-dom": "19.0.0",
    "react-i18next": "^15.2.0",
-    "react-icons": "^5.4.0",
-    "react-responsive": "^10.0.0",
+    "react-icons": "^5.3.0",
    "tinycolor2": "^1.6.0",
    "zustand": "5.0.1"
  },
@@ -74,19 +73,18 @@
    "@types/tinycolor2": "^1.4.6",
    "autoprefixer": "^10.4.20",
    "cpx2": "^8.0.0",
-    "daisyui": "^4.12.23",
+    "daisyui": "^4.12.14",
    "dotenv-cli": "^7.4.4",
    "eslint": "^9.16.0",
    "eslint-config-next": "15.0.3",
    "i18next-scanner": "^4.6.0",
    "mkdirp": "^3.0.1",
-    "next-pwa": "^5.6.0",
    "node-env-run": "^4.0.2",
    "postcss": "^8.4.49",
    "postcss-cli": "^11.0.0",
    "postcss-nested": "^7.0.2",
    "raw-loader": "^4.0.2",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^3.4.15",
    "typescript": "^5.7.2"
  }
 }
@@ -3,7 +3,6 @@
  "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",
@@ -17,29 +16,26 @@
  "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",
+  "From Local File": "Aus lokaler Datei",
  "Full Justification": "Blocksatz",
+  "Gaps (%)": "Abstände (%)",
  "Global Settings": "Globale Einstellungen",
  "Go Back": "Zurück",
  "Go Forward": "Vorwärts",
@@ -48,7 +44,6 @@
  "Grass": "Grasgrün",
  "Gray": "Grau",
  "Gruvbox": "Gruvbox",
-  "Highlight": "Hervorheben",
  "Horizontal Direction": "Horizontale Richtung",
  "Hyphenation": "Silbentrennung",
  "Identifier:": "Kennung:",
@@ -62,6 +57,7 @@
  "Loc. {{currentPage}} / {{totalPage}}": "Pos. {{currentPage}} / {{totalPage}}",
  "Logged in": "Angemeldet",
  "Logged in as {{userDisplayName}}": "Angemeldet als {{userDisplayName}}",
+  "Margins (px)": "Ränder (px)",
  "Match Case": "Groß-/Kleinschreibung beachten",
  "Match Diacritics": "Akzente beachten",
  "Match Whole Words": "Ganze Wörter",
@@ -78,6 +74,7 @@
  "Open": "Öffnen",
  "Open Book": "Buch öffnen",
  "Original Text": "Originaltext",
+  "Override Publisher Font": "Verleger-Schriftart überschreiben",
  "Page": "Seite",
  "Paging Animation": "Blätter-Animation",
  "Paragraph": "Absatz",
@@ -92,7 +89,6 @@
  "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",
@@ -105,16 +101,11 @@
  "Sign In": "Anmelden",
  "Sign Out": "Abmelden",
  "Sky": "Himmelblau",
-  "Slow": "Langsam",
  "Solarized": "Solarisiert",
-  "Speak": "Sprechen",
  "Subjects:": "Themen:",
  "System Fonts": "System-Schriftarten",
-  "Table of Contents": "Inhaltsverzeichnis",
-  "TTS not supported in this device": "TTS wird auf diesem Gerät nicht unterstützt",
  "Theme Color": "Themenfarbe",
  "Theme Mode": "Themenmodus",
-  "Translate": "Übersetzen",
  "Translated Text": "Übersetzter Text",
  "Unknown": "Unbekannt",
  "Untitled": "Ohne Titel",
@@ -123,21 +114,6 @@
  "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",
-  "Import books": "Bücher importieren",
-  "From local file": "Aus lokaler Datei"
+  "Your Library": "Ihre Bibliothek"
 }
@@ -1,143 +0,0 @@
-{
-  "(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": "Γραμματοσειρές συστήματος",
-  "Table of Contents": "Πίνακας περιεχομένων",
-  "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": "Λεπτομέρειες βιβλίου",
-  "Import books": "Εισαγωγή βιβλίων",
-  "From local file": "Από τοπικό αρχείο"
-}
@@ -3,7 +3,6 @@
  "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",
@@ -17,29 +16,26 @@
  "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",
+  "From Local File": "Desde archivo local",
  "Full Justification": "Justificación completa",
+  "Gaps (%)": "Espacios (%)",
  "Global Settings": "Configuración global",
  "Go Back": "Volver",
  "Go Forward": "Avanzar",
@@ -48,7 +44,6 @@
  "Grass": "Hierba",
  "Gray": "Gris",
  "Gruvbox": "Gruvbox",
-  "Highlight": "Resaltar",
  "Horizontal Direction": "Dirección horizontal",
  "Hyphenation": "Guionización",
  "Identifier:": "Identificador:",
@@ -62,6 +57,7 @@
  "Loc. {{currentPage}} / {{totalPage}}": "Pos. {{currentPage}} / {{totalPage}}",
  "Logged in": "Sesión iniciada",
  "Logged in as {{userDisplayName}}": "Sesión iniciada como {{userDisplayName}}",
+  "Margins (px)": "Márgenes (px)",
  "Match Case": "Coincidir mayúsculas y minúsculas",
  "Match Diacritics": "Coincidir diacríticos",
  "Match Whole Words": "Coincidir palabras completas",
@@ -78,6 +74,7 @@
  "Open": "Abrir",
  "Open Book": "Abrir libro",
  "Original Text": "Texto original",
+  "Override Publisher Font": "Sobrescribir fuente del editor",
  "Page": "Página",
  "Paging Animation": "Animación de paginación",
  "Paragraph": "Párrafo",
@@ -92,7 +89,6 @@
  "Sans-Serif Font": "Fuente sans-serif",
  "Save": "Guardar",
  "Scrolled Mode": "Modo desplazamiento",
-  "Search": "Buscar",
  "Search books...": "Buscar libros...",
  "Search...": "Buscar...",
  "Select Book": "Seleccionar libro",
@@ -105,16 +101,11 @@
  "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",
-  "Table of Contents": "Tabla de contenidos",
-  "TTS not supported in this device": "TTS no es compatible con este dispositivo",
  "Theme Color": "Color del tema",
  "Theme Mode": "Modo del tema",
-  "Translate": "Traducir",
  "Translated Text": "Texto traducido",
  "Unknown": "Desconocido",
  "Untitled": "Sin título",
@@ -123,21 +114,6 @@
  "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",
-  "Import books": "Importar libros",
-  "From local file": "Desde archivo local"
+  "Your Library": "Tu biblioteca"
 }
@@ -3,7 +3,6 @@
  "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",
@@ -17,29 +16,26 @@
  "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",
+  "From Local File": "Depuis un fichier local",
  "Full Justification": "Justification complète",
+  "Gaps (%)": "Espaces (%)",
  "Global Settings": "Paramètres globaux",
  "Go Back": "Retour",
  "Go Forward": "Avancer",
@@ -48,7 +44,6 @@
  "Grass": "Herbe",
  "Gray": "Gris",
  "Gruvbox": "Gruvbox",
-  "Highlight": "Surligner",
  "Horizontal Direction": "Direction horizontale",
  "Hyphenation": "Césure",
  "Identifier:": "Identifiant :",
@@ -62,6 +57,7 @@
  "Loc. {{currentPage}} / {{totalPage}}": "Pos. {{currentPage}} / {{totalPage}}",
  "Logged in": "Connecté",
  "Logged in as {{userDisplayName}}": "Connecté en tant que {{userDisplayName}}",
+  "Margins (px)": "Marges (px)",
  "Match Case": "Respecter la casse",
  "Match Diacritics": "Respecter les accents",
  "Match Whole Words": "Mots entiers",
@@ -78,6 +74,7 @@
  "Open": "Ouvrir",
  "Open Book": "Ouvrir le livre",
  "Original Text": "Texte original",
+  "Override Publisher Font": "Remplacer la police de l'éditeur",
  "Page": "Page",
  "Paging Animation": "Animation de page",
  "Paragraph": "Paragraphe",
@@ -92,7 +89,6 @@
  "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",
@@ -105,16 +101,11 @@
  "Sign In": "Se connecter",
  "Sign Out": "Se déconnecter",
  "Sky": "Ciel",
-  "Slow": "Lent",
  "Solarized": "Solarisé",
-  "Speak": "Lire",
  "Subjects:": "Sujets :",
  "System Fonts": "Polices système",
-  "Table of Contents": "Table des matières",
-  "TTS not supported in this device": "La synthèse vocale n'est pas prise en charge sur cet appareil",
  "Theme Color": "Couleur du thème",
  "Theme Mode": "Mode du thème",
-  "Translate": "Traduire",
  "Translated Text": "Texte traduit",
  "Unknown": "Inconnu",
  "Untitled": "Sans titre",
@@ -123,21 +114,6 @@
  "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",
-  "Import books": "Importer des livres",
-  "From local file": "Depuis un fichier local"
+  "Your Library": "Votre bibliothèque"
 }
@@ -1,143 +0,0 @@
-{
-  "(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": "सिस्टम फ़ॉन्ट्स",
-  "Table of Contents": "विषय-सूची",
-  "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": "पुस्तक विवरण",
-  "Import books": "पुस्तकें आयात करें",
-  "From local file": "स्थानीय फ़ाइल से"
-}
@@ -3,7 +3,6 @@
  "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",
@@ -17,29 +16,26 @@
  "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",
+  "From Local File": "Dari File Lokal",
  "Full Justification": "Rata Penuh",
+  "Gaps (%)": "Jarak (%)",
  "Global Settings": "Pengaturan Global",
  "Go Back": "Kembali",
  "Go Forward": "Maju",
@@ -48,7 +44,6 @@
  "Grass": "Rumput",
  "Gray": "Abu-abu",
  "Gruvbox": "Gruvbox",
-  "Highlight": "Sorot",
  "Horizontal Direction": "Arah Horizontal",
  "Hyphenation": "Pemenggalan Kata",
  "Identifier:": "Pengenal:",
@@ -62,6 +57,7 @@
  "Loc. {{currentPage}} / {{totalPage}}": "Lok. {{currentPage}} / {{totalPage}}",
  "Logged in": "Sudah Masuk",
  "Logged in as {{userDisplayName}}": "Masuk sebagai {{userDisplayName}}",
+  "Margins (px)": "Margin (px)",
  "Match Case": "Cocokkan Huruf Besar/Kecil",
  "Match Diacritics": "Cocokkan Diakritik",
  "Match Whole Words": "Cocokkan Kata Utuh",
@@ -78,6 +74,7 @@
  "Open": "Buka",
  "Open Book": "Buka Buku",
  "Original Text": "Teks Asli",
+  "Override Publisher Font": "Ganti Font Penerbit",
  "Page": "Halaman",
  "Paging Animation": "Animasi Halaman",
  "Paragraph": "Paragraf",
@@ -92,7 +89,6 @@
  "Sans-Serif Font": "Font Sans-Serif",
  "Save": "Simpan",
  "Scrolled Mode": "Mode Gulir",
-  "Search": "Cari",
  "Search books...": "Cari buku...",
  "Search...": "Cari...",
  "Select Book": "Pilih Buku",
@@ -105,16 +101,11 @@
  "Sign In": "Masuk",
  "Sign Out": "Keluar",
  "Sky": "Langit",
-  "Slow": "Lambat",
  "Solarized": "Solarized",
-  "Speak": "Bicara",
  "Subjects:": "Subjek:",
  "System Fonts": "Font Sistem",
-  "Table of Contents": "Daftar Isi",
-  "TTS not supported in this device": "TTS tidak didukung di perangkat ini",
  "Theme Color": "Warna Tema",
  "Theme Mode": "Mode Tema",
-  "Translate": "Terjemahkan",
  "Translated Text": "Teks Terjemahan",
  "Unknown": "Tidak Diketahui",
  "Untitled": "Tanpa Judul",
@@ -123,21 +114,6 @@
  "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",
-  "Import books": "Impor buku",
-  "From local file": "Dari file lokal"
+  "Your Library": "Perpustakaan Anda"
 }
@@ -3,7 +3,6 @@
  "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",
@@ -17,29 +16,26 @@
  "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",
+  "From Local File": "Da file locale",
  "Full Justification": "Giustificazione completa",
+  "Gaps (%)": "Spaziature (%)",
  "Global Settings": "Impostazioni globali",
  "Go Back": "Indietro",
  "Go Forward": "Avanti",
@@ -48,7 +44,6 @@
  "Grass": "Erba",
  "Gray": "Grigio",
  "Gruvbox": "Gruvbox",
-  "Highlight": "Evidenzia",
  "Horizontal Direction": "Direzione orizzontale",
  "Hyphenation": "Sillabazione",
  "Identifier:": "Identificatore:",
@@ -62,6 +57,7 @@
  "Loc. {{currentPage}} / {{totalPage}}": "Pos. {{currentPage}} / {{totalPage}}",
  "Logged in": "Accesso effettuato",
  "Logged in as {{userDisplayName}}": "Accesso effettuato come {{userDisplayName}}",
+  "Margins (px)": "Margini (px)",
  "Match Case": "Maiuscole/minuscole",
  "Match Diacritics": "Corrispondenza diacritici",
  "Match Whole Words": "Parole intere",
@@ -78,6 +74,7 @@
  "Open": "Apri",
  "Open Book": "Apri libro",
  "Original Text": "Testo originale",
+  "Override Publisher Font": "Sostituisci font editore",
  "Page": "Pagina",
  "Paging Animation": "Animazione cambio pagina",
  "Paragraph": "Paragrafo",
@@ -92,7 +89,6 @@
  "Sans-Serif Font": "Font sans-serif",
  "Save": "Salva",
  "Scrolled Mode": "Modalità scorrimento",
-  "Search": "Cerca",
  "Search books...": "Cerca libri...",
  "Search...": "Cerca...",
  "Select Book": "Seleziona libro",
@@ -105,16 +101,11 @@
  "Sign In": "Accedi",
  "Sign Out": "Esci",
  "Sky": "Cielo",
-  "Slow": "Lento",
  "Solarized": "Solarizzato",
-  "Speak": "Leggi",
  "Subjects:": "Argomenti:",
  "System Fonts": "Font di sistema",
-  "Table of Contents": "Indice",
-  "TTS not supported in this device": "TTS non supportato su questo dispositivo",
  "Theme Color": "Colore tema",
  "Theme Mode": "Modalità tema",
-  "Translate": "Traduci",
  "Translated Text": "Testo tradotto",
  "Unknown": "Sconosciuto",
  "Untitled": "Senza titolo",
@@ -123,21 +114,6 @@
  "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",
-  "Import books": "Importa libri",
-  "From local file": "Da file locale"
+  "Your Library": "La tua biblioteca"
 }
@@ -3,7 +3,6 @@
  "About Readest": "Readestについて",
  "Add your notes here...": "ここにメモを追加...",
  "Animation": "アニメーション",
-  "Annotate": "注釈",
  "Apply": "適用",
  "Are you sure to delete the selected books?": "選択した書籍を削除してもよろしいですか？",
  "Auto Mode": "自動モード",
@@ -17,29 +16,26 @@
  "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": "フォントサイズ",
+  "From Local File": "ローカルファイルから",
  "Full Justification": "両端揃え",
+  "Gaps (%)": "間隔 (%)",
  "Global Settings": "全体設定",
  "Go Back": "戻る",
  "Go Forward": "進む",
@@ -48,7 +44,6 @@
  "Grass": "グリーン",
  "Gray": "グレー",
  "Gruvbox": "グルーブボックス",
-  "Highlight": "ハイライト",
  "Horizontal Direction": "横書",
  "Hyphenation": "ハイフネーション",
  "Identifier:": "識別子：",
@@ -62,6 +57,7 @@
  "Loc. {{currentPage}} / {{totalPage}}": "位置 {{currentPage}} / {{totalPage}}",
  "Logged in": "ログイン済み",
  "Logged in as {{userDisplayName}}": "{{userDisplayName}}としてログイン中",
+  "Margins (px)": "余白 (px)",
  "Match Case": "大文字・小文字を区別",
  "Match Diacritics": "アクセント記号を区別",
  "Match Whole Words": "単語全体を一致",
@@ -78,6 +74,7 @@
  "Open": "開く",
  "Open Book": "書籍を開く",
  "Original Text": "原文",
+  "Override Publisher Font": "出版社フォントを上書き",
  "Page": "ページ",
  "Paging Animation": "ページめくりアニメーション",
  "Paragraph": "段落",
@@ -92,7 +89,6 @@
  "Sans-Serif Font": "ゴシック体",
  "Save": "保存",
  "Scrolled Mode": "スクロールモード",
-  "Search": "検索",
  "Search books...": "書籍を検索...",
  "Search...": "検索...",
  "Select Book": "書籍を選択",
@@ -105,16 +101,11 @@
  "Sign In": "サインイン",
  "Sign Out": "サインアウト",
  "Sky": "スカイ",
-  "Slow": "低速",
  "Solarized": "ソーラライズド",
-  "Speak": "読み上げ",
  "Subjects:": "主題：",
  "System Fonts": "システムフォント",
-  "Table of Contents": "目次",
-  "TTS not supported in this device": "このデバイスではTTSがサポートされていません",
  "Theme Color": "テーマカラー",
  "Theme Mode": "テーマモード",
-  "Translate": "翻訳",
  "Translated Text": "翻訳されたテキスト",
  "Unknown": "不明",
  "Untitled": "無題",
@@ -123,21 +114,6 @@
  "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": "書籍の詳細",
-  "Import books": "書籍をインポート",
-  "From local file": "ローカルファイルから"
+  "Your Library": "ライブラリー"
 }
@@ -3,7 +3,6 @@
  "About Readest": "Readest 정보",
  "Add your notes here...": "여기에 메모를 추가하세요...",
  "Animation": "애니메이션",
-  "Annotate": "주석",
  "Apply": "적용",
  "Are you sure to delete the selected books?": "선택한 책을 삭제하시겠습니까?",
  "Auto Mode": "자동 모드",
@@ -17,29 +16,26 @@
  "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": "글꼴 크기",
+  "From Local File": "로컬 파일에서",
  "Full Justification": "양쪽 정렬",
+  "Gaps (%)": "간격 (%)",
  "Global Settings": "전역 설정",
  "Go Back": "뒤로",
  "Go Forward": "앞으로",
@@ -48,7 +44,6 @@
  "Grass": "잔디색",
  "Gray": "회색",
  "Gruvbox": "그러브박스",
-  "Highlight": "하이라이트",
  "Horizontal Direction": "수평 방향",
  "Hyphenation": "하이픈 넣기",
  "Identifier:": "식별자:",
@@ -62,6 +57,7 @@
  "Loc. {{currentPage}} / {{totalPage}}": "위치 {{currentPage}} / {{totalPage}}",
  "Logged in": "로그인됨",
  "Logged in as {{userDisplayName}}": "{{userDisplayName}}(으)로 로그인됨",
+  "Margins (px)": "여백 (px)",
  "Match Case": "대소문자 구분",
  "Match Diacritics": "발음 구별 부호 구분",
  "Match Whole Words": "전체 단어 일치",
@@ -78,6 +74,7 @@
  "Open": "열기",
  "Open Book": "책 열기",
  "Original Text": "원본 텍스트",
+  "Override Publisher Font": "출판사 글꼴 재정의",
  "Page": "페이지",
  "Paging Animation": "페이지 넘김 애니메이션",
  "Paragraph": "단락",
@@ -92,7 +89,6 @@
  "Sans-Serif Font": "산세리프체",
  "Save": "저장",
  "Scrolled Mode": "스크롤 모드",
-  "Search": "검색",
  "Search books...": "책 검색...",
  "Search...": "검색...",
  "Select Book": "책 선택",
@@ -105,16 +101,11 @@
  "Sign In": "로그인",
  "Sign Out": "로그아웃",
  "Sky": "하늘색",
-  "Slow": "느림",
  "Solarized": "솔라라이즈드",
-  "Speak": "말하기",
  "Subjects:": "주제:",
  "System Fonts": "시스템 글꼴",
-  "Table of Contents": "목차",
-  "TTS not supported in this device": "이 장치에서 TTS가 지원되지 않음",
  "Theme Color": "테마 색상",
  "Theme Mode": "테마 모드",
-  "Translate": "번역",
  "Translated Text": "번역된 텍스트",
  "Unknown": "알 수 없음",
  "Untitled": "제목 없음",
@@ -123,21 +114,6 @@
  "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": "책 세부 정보",
-  "Import books": "책 가져오기",
-  "From local file": "로컬 파일에서"
+  "Your Library": "내 서재"
 }
@@ -1,143 +0,0 @@
-{
-  "(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",
-  "Table of Contents": "Spis treści",
-  "TTS not supported in this device": "TTS nie jest obsługiwane na tym urządzeniu",
-  "Theme Color": "Kolor motywu",
-  "Theme Mode": "Tryb motywu",
-  "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",
-  "Import books": "Importuj książki",
-  "From local file": "Z pliku lokalnego"
-}
@@ -3,7 +3,6 @@
  "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",
@@ -17,29 +16,26 @@
  "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",
+  "From Local File": "Do Arquivo Local",
  "Full Justification": "Justificação Completa",
+  "Gaps (%)": "Espaçamentos (%)",
  "Global Settings": "Configurações Globais",
  "Go Back": "Voltar",
  "Go Forward": "Avançar",
@@ -48,7 +44,6 @@
  "Grass": "Grama",
  "Gray": "Cinza",
  "Gruvbox": "Gruvbox",
-  "Highlight": "Destaque",
  "Horizontal Direction": "Direção Horizontal",
  "Hyphenation": "Hifenização",
  "Identifier:": "Identificador:",
@@ -62,6 +57,7 @@
  "Loc. {{currentPage}} / {{totalPage}}": "Loc. {{currentPage}} / {{totalPage}}",
  "Logged in": "Conectado",
  "Logged in as {{userDisplayName}}": "Conectado como {{userDisplayName}}",
+  "Margins (px)": "Margens (px)",
  "Match Case": "Diferenciar Maiúsculas e Minúsculas",
  "Match Diacritics": "Corresponder Acentos",
  "Match Whole Words": "Corresponder Palavras Inteiras",
@@ -78,6 +74,7 @@
  "Open": "Abrir",
  "Open Book": "Abrir Livro",
  "Original Text": "Texto Original",
+  "Override Publisher Font": "Substituir Fonte do Editor",
  "Page": "Página",
  "Paging Animation": "Animação de Página",
  "Paragraph": "Parágrafo",
@@ -92,7 +89,6 @@
  "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",
@@ -105,16 +101,11 @@
  "Sign In": "Entrar",
  "Sign Out": "Sair",
  "Sky": "Céu",
-  "Slow": "Lento",
  "Solarized": "Solarizado",
-  "Speak": "Falar",
  "Subjects:": "Assuntos:",
  "System Fonts": "Fontes do Sistema",
-  "Table of Contents": "Índice",
-  "TTS not supported in this device": "TTS não suportado neste dispositivo",
  "Theme Color": "Cor do Tema",
  "Theme Mode": "Modo do Tema",
-  "Translate": "Traduzir",
  "Translated Text": "Texto Traduzido",
  "Unknown": "Desconhecido",
  "Untitled": "Sem Título",
@@ -123,21 +114,6 @@
  "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",
-  "Import books": "Importar livros",
-  "From local file": "Do arquivo local"
+  "Your Library": "Sua Biblioteca"
 }
@@ -3,7 +3,6 @@
  "About Readest": "О Readest",
  "Add your notes here...": "Добавьте свои заметки здесь...",
  "Animation": "Анимация",
-  "Annotate": "Аннотация",
  "Apply": "Применить",
  "Are you sure to delete the selected books?": "Вы уверены, что хотите удалить выбранные книги?",
  "Auto Mode": "Автоматический режим",
@@ -17,29 +16,26 @@
  "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": "Размер шрифта",
+  "From Local File": "Из локального файла",
  "Full Justification": "Полное выравнивание",
+  "Gaps (%)": "Промежутки (%)",
  "Global Settings": "Общие настройки",
  "Go Back": "Назад",
  "Go Forward": "Вперёд",
@@ -48,7 +44,6 @@
  "Grass": "Трава",
  "Gray": "Серый",
  "Gruvbox": "Gruvbox",
-  "Highlight": "Выделить",
  "Horizontal Direction": "Горизонтальное направление",
  "Hyphenation": "Перенос слов",
  "Identifier:": "Идентификатор:",
@@ -62,6 +57,7 @@
  "Loc. {{currentPage}} / {{totalPage}}": "Поз. {{currentPage}} / {{totalPage}}",
  "Logged in": "Выполнен вход",
  "Logged in as {{userDisplayName}}": "Вход выполнен как {{userDisplayName}}",
+  "Margins (px)": "Отступы (px)",
  "Match Case": "Учитывать регистр",
  "Match Diacritics": "Учитывать диакритические знаки",
  "Match Whole Words": "Только целые слова",
@@ -78,6 +74,7 @@
  "Open": "Открыть",
  "Open Book": "Открыть книгу",
  "Original Text": "Оригинальный текст",
+  "Override Publisher Font": "Переопределить шрифт издателя",
  "Page": "Страница",
  "Paging Animation": "Анимация перелистывания",
  "Paragraph": "Абзац",
@@ -92,7 +89,6 @@
  "Sans-Serif Font": "Шрифт без засечек",
  "Save": "Сохранить",
  "Scrolled Mode": "Режим прокрутки",
-  "Search": "Поиск",
  "Search books...": "Поиск книг...",
  "Search...": "Поиск...",
  "Select Book": "Выбрать книгу",
@@ -105,16 +101,11 @@
  "Sign In": "Войти",
  "Sign Out": "Выйти",
  "Sky": "Небесный",
-  "Slow": "Медленно",
  "Solarized": "Солнечный",
-  "Speak": "Произнести",
  "Subjects:": "Темы:",
  "System Fonts": "Системные шрифты",
-  "Table of Contents": "Содержание",
-  "TTS not supported in this device": "TTS не поддерживается на этом устройстве",
  "Theme Color": "Цвет темы",
  "Theme Mode": "Режим темы",
-  "Translate": "Перевести",
  "Translated Text": "Переведённый текст",
  "Unknown": "Неизвестно",
  "Untitled": "Без названия",
@@ -123,21 +114,6 @@
  "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": "Детали книги",
-  "Import books": "Импортировать книги",
-  "From local file": "Из локального файла"
+  "Your Library": "Ваша библиотека"
 }
@@ -3,7 +3,6 @@
  "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",
@@ -17,29 +16,26 @@
  "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",
+  "From Local File": "Yerel Dosyadan",
  "Full Justification": "Tam Hizalama",
+  "Gaps (%)": "Boşluklar (%)",
  "Global Settings": "Genel Ayarlar",
  "Go Back": "Geri Git",
  "Go Forward": "İleri Git",
@@ -48,7 +44,6 @@
  "Grass": "Çimen",
  "Gray": "Gri",
  "Gruvbox": "Gruvbox",
-  "Highlight": "Vurgula",
  "Horizontal Direction": "Yatay Yön",
  "Hyphenation": "Heceleme",
  "Identifier:": "Tanımlayıcı:",
@@ -62,6 +57,7 @@
  "Loc. {{currentPage}} / {{totalPage}}": "Konum {{currentPage}} / {{totalPage}}",
  "Logged in": "Giriş Yapıldı",
  "Logged in as {{userDisplayName}}": "{{userDisplayName}} olarak giriş yapıldı",
+  "Margins (px)": "Kenar Boşlukları (px)",
  "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",
@@ -78,6 +74,7 @@
  "Open": "Aç",
  "Open Book": "Kitabı Aç",
  "Original Text": "Orijinal Metin",
+  "Override Publisher Font": "Yayıncı Yazı Tipini Geçersiz Kıl",
  "Page": "Sayfa",
  "Paging Animation": "Sayfa Çevirme Animasyonu",
  "Paragraph": "Paragraf",
@@ -92,7 +89,6 @@
  "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ç",
@@ -105,16 +101,11 @@
  "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",
-  "Table of Contents": "İçindekiler",
-  "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",
@@ -123,21 +114,6 @@
  "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ı",
-  "Import books": "Kitapları içe aktar",
-  "From local file": "Yerel dosyadan"
+  "Your Library": "Kütüphaneniz"
 }
@@ -1,143 +0,0 @@
-{
-  "(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": "Системні шрифти",
-  "Table of Contents": "Зміст",
-  "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": "Деталі книги",
-  "Import books": "Імпортувати книги",
-  "From local file": "З локального файлу"
-}
@@ -3,7 +3,6 @@
  "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",
@@ -17,29 +16,26 @@
  "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ữ",
+  "From Local File": "Từ tệp cục bộ",
  "Full Justification": "Căn đều hai bên",
+  "Gaps (%)": "Khoảng cách (%)",
  "Global Settings": "Cài đặt chung",
  "Go Back": "Quay lại",
  "Go Forward": "Tiến tới",
@@ -48,7 +44,6 @@
  "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:",
@@ -62,6 +57,7 @@
  "Loc. {{currentPage}} / {{totalPage}}": "Vị trí {{currentPage}} / {{totalPage}}",
  "Logged in": "Đã đăng nhập",
  "Logged in as {{userDisplayName}}": "Đăng nhập với tên {{userDisplayName}}",
+  "Margins (px)": "Lề (px)",
  "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ừ",
@@ -78,6 +74,7 @@
  "Open": "Mở",
  "Open Book": "Mở sách",
  "Original Text": "Văn bản gốc",
+  "Override Publisher Font": "Ghi đè phông chữ của nhà xuất bản",
  "Page": "Trang",
  "Paging Animation": "Hiệu ứng lật trang",
  "Paragraph": "Đoạn văn",
@@ -92,7 +89,6 @@
  "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",
@@ -105,16 +101,11 @@
  "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",
-  "Table of Contents": "Mục lục",
-  "TTS not supported in this device": "TTS không được hỗ trợ trên thiết bị này",
  "Theme Color": "Màu chủ đề",
  "Theme Mode": "Chế độ chủ đề",
-  "Translate": "Dịch",
  "Translated Text": "Văn bản dịch",
  "Unknown": "Không xác định",
  "Untitled": "Không có tiêu đề",
@@ -123,21 +114,6 @@
  "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",
-  "Import books": "Nhập sách",
-  "From local file": "Từ tệp địa phương"
+  "Your Library": "Thư viện của bạn"
 }
@@ -3,7 +3,6 @@
  "About Readest": "关于 Readest",
  "Add your notes here...": "在这里添加您的笔记...",
  "Animation": "动画",
-  "Annotate": "笔记",
  "Apply": "应用",
  "Are you sure to delete the selected books?": "您确定要删除所选书籍吗？",
  "Auto Mode": "自动主题",
@@ -17,29 +16,26 @@
  "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": "字号",
+  "From Local File": "从本地文件导入",
  "Full Justification": "两端对齐",
+  "Gaps (%)": "间距 (%)",
  "Global Settings": "全局设置",
  "Go Back": "返回",
  "Go Forward": "前进",
@@ -48,7 +44,6 @@
  "Grass": "青草",
  "Gray": "素雅",
  "Gruvbox": "暖橘",
-  "Highlight": "划线",
  "Horizontal Direction": "横排",
  "Hyphenation": "断字",
  "Identifier:": "识别码",
@@ -62,6 +57,7 @@
  "Loc. {{currentPage}} / {{totalPage}}": "位置 {{currentPage}} / {{totalPage}}",
  "Logged in": "已登录",
  "Logged in as {{userDisplayName}}": "{{userDisplayName}} 已登录",
+  "Margins (px)": "页边距 (px)",
  "Match Case": "匹配大小写",
  "Match Diacritics": "匹配重音符号",
  "Match Whole Words": "匹配整个单词",
@@ -78,6 +74,7 @@
  "Open": "打开",
  "Open Book": "打开书籍",
  "Original Text": "原文",
+  "Override Publisher Font": "覆盖内置字体",
  "Page": "页面",
  "Paging Animation": "翻页动画",
  "Paragraph": "段落",
@@ -92,7 +89,6 @@
  "Sans-Serif Font": "无衬线字体",
  "Save": "保存",
  "Scrolled Mode": "滚动模式",
-  "Search": "搜索",
  "Search books...": "搜索书籍...",
  "Search...": "搜索...",
  "Select Book": "选择书籍",
@@ -105,16 +101,11 @@
  "Sign In": "登录",
  "Sign Out": "登出",
  "Sky": "天青",
-  "Slow": "慢",
  "Solarized": "日晖",
-  "Speak": "朗读",
  "Subjects:": "主题",
  "System Fonts": "系统字体",
-  "Table of Contents": "目录",
-  "TTS not supported in this device": "此设备不支持 TTS",
  "Theme Color": "主题颜色",
  "Theme Mode": "主题模式",
-  "Translate": "翻译",
  "Translated Text": "译文",
  "Unknown": "未知",
  "Untitled": "无标题",
@@ -123,21 +114,6 @@
  "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": "书籍详情",
-  "Import books": "导入书籍",
-  "From local file": "从本地文件导入"
+  "Your Library": "书库"
 }
@@ -3,7 +3,6 @@
  "About Readest": "關於 Readest",
  "Add your notes here...": "在這裡添加您的筆記...",
  "Animation": "動畫",
-  "Annotate": "筆記",
  "Apply": "應用",
  "Are you sure to delete the selected books?": "您確定要刪除所選書籍嗎？",
  "Auto Mode": "自動主題",
@@ -17,29 +16,26 @@
  "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": "字號",
+  "From Local File": "從本地檔案導入",
  "Full Justification": "兩端對齊",
+  "Gaps (%)": "間距 (%)",
  "Global Settings": "全局設置",
  "Go Back": "返回",
  "Go Forward": "前進",
@@ -48,7 +44,6 @@
  "Grass": "青草",
  "Gray": "素雅",
  "Gruvbox": "暖橘",
-  "Highlight": "劃線",
  "Horizontal Direction": "橫排",
  "Hyphenation": "斷字",
  "Identifier:": "識別碼",
@@ -62,6 +57,7 @@
  "Loc. {{currentPage}} / {{totalPage}}": "位置 {{currentPage}} / {{totalPage}}",
  "Logged in": "已登入",
  "Logged in as {{userDisplayName}}": "{{userDisplayName}} 已登入",
+  "Margins (px)": "頁邊距 (px)",
  "Match Case": "匹配大小寫",
  "Match Diacritics": "匹配重音符號",
  "Match Whole Words": "匹配整個單詞",
@@ -78,6 +74,7 @@
  "Open": "打開",
  "Open Book": "打開書籍",
  "Original Text": "原文",
+  "Override Publisher Font": "覆蓋內置字體",
  "Page": "頁面",
  "Paging Animation": "翻頁動畫",
  "Paragraph": "段落",
@@ -92,7 +89,6 @@
  "Sans-Serif Font": "無襯線字體",
  "Save": "保存",
  "Scrolled Mode": "滾動模式",
-  "Search": "搜索",
  "Search books...": "搜索書籍...",
  "Search...": "搜索...",
  "Select Book": "選擇書籍",
@@ -105,16 +101,11 @@
  "Sign In": "登入",
  "Sign Out": "登出",
  "Sky": "天青",
-  "Slow": "慢",
  "Solarized": "日暉",
-  "Speak": "朗讀",
  "Subjects:": "主題",
  "System Fonts": "系統字體",
-  "Table of Contents": "目錄",
-  "TTS not supported in this device": "此設備不支持 TTS",
  "Theme Color": "主題顏色",
  "Theme Mode": "主題模式",
-  "Translate": "翻譯",
  "Translated Text": "譯文",
  "Unknown": "未知",
  "Untitled": "無標題",
@@ -123,21 +114,6 @@
  "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": "書籍詳情",
-  "Import books": "導入書籍",
-  "From local file": "從本地文件導入"
+  "Your Library": "書庫"
 }
@@ -1,26 +0,0 @@
-{
-  "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
-}
@@ -1,39 +1,5 @@
 {
  "releases": {
-    "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": [
@@ -18,6 +18,7 @@ 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;

@@ -29,12 +30,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);
@@ -196,9 +197,9 @@ pub fn run() {
            // 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(())
        })
@@ -215,7 +216,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());
@@ -25,6 +25,7 @@ pub fn init<R: Runtime>() -> TauriPlugin<R> {
                    setup_traffic_light_positioner(window);
                }
            });
+            return;
        })
        .build()
 }
@@ -117,7 +118,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()
@@ -215,7 +216,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", ())
@@ -232,7 +233,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", ())
@@ -249,7 +250,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", ())
@@ -273,7 +274,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", ())
@@ -14,11 +14,10 @@
    "windows": [],
    "security": {
      "csp": {
-        "default-src": "'self' 'unsafe-inline' blob: customprotocol: asset: http://asset.localhost ipc: http://ipc.localhost",
-        "connect-src": "'self' blob: asset: http://asset.localhost ipc: http://ipc.localhost https://*.sentry.io https://*.posthog.com https://*.deepl.com https://*.wikipedia.org https://*.wiktionary.org https://*.supabase.co https://*.readest.com wss://speech.platform.bing.com",
+        "default-src": "'self' 'unsafe-inline' blob: customprotocol: asset: http://asset.localhost ipc: http://ipc.localhost https://fonts.gstatic.com https://db.onlinewebfonts.com",
+        "connect-src": "'self' blob: asset: http://asset.localhost ipc: http://ipc.localhost https://*.sentry.io https://*.posthog.com https://*.deepl.com https://*.wikipedia.org https://*.wiktionary.org https://*.supabase.co https://*.readest.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",
-        "font-src": "'self' data: asset: http://asset.localhost tauri: https://fonts.gstatic.com https://db.onlinewebfonts.com https://cdn.jsdelivr.net",
+        "style-src": "'self' 'unsafe-inline' blob: asset: http://asset.localhost",
        "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"
      },
@@ -45,7 +45,7 @@ const ProviderLogin: React.FC<ProviderLoginProp> = ({ provider, handleSignIn, Ic
        'bg-base-100 border-gray-300 shadow-sm transition hover:bg-gray-50',
      )}
    >
-      <Icon />
+      <Icon size={20} />
      <span className='text-neutral-content/70 px-2 text-sm'>{label}</span>
    </button>
  );
@@ -194,7 +194,7 @@ export default function AuthPage() {
        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' />
+        <IoArrowBack size={20} />
      </button>
      <div style={{ maxWidth: '420px', margin: 'auto', padding: '2rem' }}>
        <ProviderLogin
@@ -238,7 +238,7 @@ export default function AuthPage() {
        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' />
+        <IoArrowBack size={20} />
      </button>
      <Auth
        supabaseClient={supabase}
@@ -13,32 +13,6 @@ const description =
  '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,
-  themeColor: 'white',
-};
-
 export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
@@ -49,7 +23,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1' />
        <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' />
@@ -16,7 +16,6 @@ import { useEnv } from '@/context/EnvContext';
 import { useLibraryStore } from '@/store/libraryStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
-import { useResponsiveSize } from '@/hooks/useResponsiveSize';
 import { navigateToReader } from '@/utils/nav';
 import { getOSPlatform } from '@/utils/misc';
 import { getFilename } from '@/utils/book';
@@ -26,7 +25,6 @@ import { isTauriAppPlatform, isWebAppPlatform } from '@/services/environment';
 import Alert from '@/components/Alert';
 import Spinner from '@/components/Spinner';
 import BookDetailModal from '@/components/BookDetailModal';
-import ReadingProgress from './ReadingProgress';

 type BookshelfItem = Book | BooksGroup;

@@ -74,7 +72,6 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
  const [importBookUrl] = useState(searchParams?.get('url') || '');
  const isImportingBook = useRef(false);
  const [showDetailsBook, setShowDetailsBook] = useState<Book | null>(null);
-  const iconSize15 = useResponsiveSize(15);

  const showBookDetailsModal = (book: Book) => {
    setShowDetailsBook(book);
@@ -234,58 +231,28 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
                      {isSelectMode && (
                        <div className='absolute bottom-1 right-1'>
                          {selectedBooks.includes(item.hash) ? (
-                            <MdCheckCircle className='fill-blue-500' />
+                            <MdCheckCircle size={20} className='fill-blue-500' />
                          ) : (
-                            <MdCheckCircleOutline className='fill-gray-300 drop-shadow-sm' />
+                            <MdCheckCircleOutline
+                              size={20}
+                              className='fill-gray-300 drop-shadow-sm'
+                            />
                          )}
                        </div>
                      )}
                    </div>
                  </div>
-                  <div
-                    className={clsx(
-                      'flex w-full p-0 pt-2',
-                      isWebAppPlatform() ? 'flex-col' : 'flex-row justify-between',
-                    )}
-                  >
-                    <div className='min-w-0 flex-1'>
-                      <h4 className='block overflow-hidden text-ellipsis whitespace-nowrap text-[0.6em] text-xs font-semibold'>
-                        {(item as Book).title}
-                      </h4>
-                    </div>
-                    {item.progress && (
-                      <div className={'flex items-center justify-between'}>
-                        <ReadingProgress book={item as Book} />
-                        {isWebAppPlatform() && (
-                          <button
-                            type='button'
-                            className='show-detail-button opacity-0 group-hover:opacity-100'
-                            onClick={showBookDetailsModal.bind(null, item as Book)}
-                            onKeyUp={(e) => {
-                              if (e.key === 'Enter' || e.key === ' ') {
-                                showBookDetailsModal(item as Book);
-                              }
-                            }}
-                          >
-                            <CiCircleMore size={iconSize15} />
-                          </button>
-                        )}
-                      </div>
-                    )}
-                    {!item.progress && isWebAppPlatform() && (
-                      <div className={'flex items-center justify-end'}>
-                        <button
-                          type='button'
-                          className='show-detail-button opacity-0 group-hover:opacity-100'
-                          onClick={showBookDetailsModal.bind(null, item as Book)}
-                          onKeyUp={(e) => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              showBookDetailsModal(item as Book);
-                            }
-                          }}
-                        >
-                          <CiCircleMore size={iconSize15} />
-                        </button>
+                  <div className='flex flex-row items-center justify-between p-0 pt-2'>
+                    <h4 className='card-title line-clamp-1 text-[0.6em] text-xs font-semibold'>
+                      {(item as Book).title}
+                    </h4>
+                    {isWebAppPlatform() && (
+                      <div
+                        className='show-detail-button self-start opacity-0 group-hover:opacity-100'
+                        role='button'
+                        onClick={showBookDetailsModal.bind(null, item as Book)}
+                      >
+                        <CiCircleMore size={15} />
                      </div>
                    )}
                  </div>
@@ -303,11 +270,6 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
                          className='h-48 w-full object-cover'
                        />
                      </figure>
-                      <div className='card-body p-4'>
-                        <h3 className='card-title line-clamp-2 text-sm'>{book.title}</h3>
-                        <p className='text-neutral-content line-clamp-1 text-xs'>{book.author}</p>
-                        <ReadingProgress book={book} />
-                      </div>
                    </div>
                  ))}
                  <h2 className='mb-2 text-lg font-bold'>{(item as BooksGroup).name}</h2>
@@ -7,7 +7,6 @@ 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';
@@ -28,7 +27,6 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
  const { appService } = useEnv();
  const { isTrafficLightVisible } = useTrafficLight();
  const headerRef = useRef<HTMLDivElement>(null);
-  const iconSize16 = useResponsiveSize(16);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
@@ -50,8 +48,8 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
        isTrafficLightVisible ? 'pl-16' : 'pl-2',
      )}
    >
-      <div className='flex items-center justify-between space-x-12'>
-        <div className='exclude-title-bar-mousedown relative flex w-full items-center pl-4'>
+      <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'>
          <span className='absolute left-8 text-gray-500'>
            <FaSearch className='h-4 w-4' />
          </span>
@@ -68,7 +66,7 @@ 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={_('Import books')}>
+              <div className='lg:tooltip lg:tooltip-bottom' data-tip='Add books'>
                <PiPlus tabIndex={-1} className='h-5 w-5' />
              </div>
              <ul
@@ -77,7 +75,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
              >
                <li>
                  <button className='text-base-content' onClick={onImportBooks}>
-                    {_('From local file')}
+                    {_('From Local File')}
                  </button>
                </li>
              </ul>
@@ -99,22 +97,20 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
            </button>
          </div>
        </div>
-        <div className='flex h-full items-center gap-x-4'>
+        <div className='flex h-full items-center'>
          <Dropdown
-            className='exclude-title-bar-mousedown dropdown-bottom dropdown-end'
+            className='exclude-title-bar-mousedown dropdown-bottom dropdown-end mr-2'
            buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
-            toggleButton={<MdOutlineMenu size={iconSize16} />}
+            toggleButton={<MdOutlineMenu size={16} />}
          >
            <SettingsMenu />
          </Dropdown>
-          {!isTrafficLightVisible && appService?.appPlatform !== 'web' && (
-            <WindowButtons
-              headerRef={headerRef}
-              showMinimize={true}
-              showMaximize={true}
-              showClose={true}
-            />
-          )}
+          <WindowButtons
+            headerRef={headerRef}
+            showMinimize={!isTrafficLightVisible && appService?.appPlatform !== 'web'}
+            showMaximize={!isTrafficLightVisible && appService?.appPlatform !== 'web'}
+            showClose={!isTrafficLightVisible && appService?.appPlatform !== 'web'}
+          />
        </div>
      </div>
    </div>
@@ -1,43 +0,0 @@
-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;
@@ -75,7 +75,7 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
                height={20}
              />
            ) : (
-              <PiUserCircleCheck />
+              <PiUserCircleCheck size={20} />
            )
          }
        >
@@ -84,7 +84,11 @@ const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
          </ul>
        </MenuItem>
      ) : (
-        <MenuItem label={_('Sign In')} icon={<PiUserCircle />} onClick={handleUserLogin}></MenuItem>
+        <MenuItem
+          label={_('Sign In')}
+          icon={<PiUserCircle size={20} />}
+          onClick={handleUserLogin}
+        ></MenuItem>
      )}
      <hr className='border-base-200 my-1' />
      {isWebApp && <MenuItem label={_('Download Readest')} onClick={downloadReadest} />}
@@ -1,6 +1,5 @@
 'use client';

-import clsx from 'clsx';
 import * as React from 'react';
 import { useState, useRef, useEffect, Suspense } from 'react';
 import { useRouter } from 'next/navigation';
@@ -9,7 +8,6 @@ import { Book } from '@/types/book';
 import { AppService } from '@/types/system';
 import { navigateToReader } from '@/utils/nav';
 import { getBaseFilename, listFormater } from '@/utils/book';
-import { eventDispatcher } from '@/utils/event';
 import { parseOpenWithFiles } from '@/helpers/cli';
 import { isTauriAppPlatform, hasUpdater } from '@/services/environment';
 import { checkForAppUpdates } from '@/helpers/updater';
@@ -23,11 +21,11 @@ import { useLibraryStore } from '@/store/libraryStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useDemoBooks } from './hooks/useDemoBooks';

-import { AboutWindow } from '@/components/AboutWindow';
-import { Toast } from '@/components/Toast';
 import Spinner from '@/components/Spinner';
 import LibraryHeader from './components/LibraryHeader';
 import Bookshelf from './components/Bookshelf';
+import { AboutWindow } from '@/components/AboutWindow';
+import Toast from '@/components/Toast';

 const LibraryPage = () => {
  const router = useRouter();
@@ -39,8 +37,8 @@ const LibraryPage = () => {
    checkOpenWithBooks,
    clearOpenWithBooks,
  } = useLibraryStore();
+  useTheme();
  const _ = useTranslation();
-  const { updateAppTheme } = useTheme();
  const { setSettings, saveSettings } = useSettingsStore();
  const [loading, setLoading] = useState(false);
  const isInitiating = useRef(false);
@@ -48,15 +46,23 @@ const LibraryPage = () => {
  const [isSelectMode, setIsSelectMode] = useState(false);
  const demoBooks = useDemoBooks();

+  const [toastMessage, setToastMessage] = useState('');
+  const toastDismissTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (toastDismissTimeout.current) clearTimeout(toastDismissTimeout.current);
+    toastDismissTimeout.current = setTimeout(() => setToastMessage(''), 5000);
+    return () => {
+      if (toastDismissTimeout.current) clearTimeout(toastDismissTimeout.current);
+    };
+  }, [toastMessage]);
+
  useEffect(() => {
-    updateAppTheme('base-200');
    const doAppUpdates = async () => {
      if (hasUpdater()) {
-        await checkForAppUpdates(_);
+        await checkForAppUpdates();
      }
    };
    doAppUpdates();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const processOpenWithFiles = React.useCallback(
@@ -169,12 +175,11 @@ const LibraryPage = () => {
        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}}', {
+        setToastMessage(
+          _('Failed to import book(s): {{filenames}}', {
            filenames: listFormater(false).format(failedFiles),
          }),
-          type: 'error',
-        });
+        );
        console.error('Failed to import book:', filename, error);
      }
    }
@@ -236,12 +241,7 @@ const LibraryPage = () => {
  }

  return (
-    <div
-      className={clsx(
-        'library-page bg-base-200 text-base-content flex h-dvh select-none flex-col overflow-hidden',
-        isTauriAppPlatform() && 'rounded-window',
-      )}
-    >
+    <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='fixed top-0 z-40 w-full'>
        <LibraryHeader
          isSelectMode={isSelectMode}
@@ -283,7 +283,13 @@ const LibraryPage = () => {
          </div>
        ))}
      <AboutWindow />
-      <Toast />
+      {toastMessage && (
+        <Toast
+          message={toastMessage}
+          toastClass='toast-top toast-end pt-11'
+          alertClass='alert-error max-w-80'
+        />
+      )}
    </div>
  );
 };
@@ -97,9 +97,9 @@ const BookmarkToggler: React.FC<BookmarkTogglerProps> = ({ bookKey }) => {
    <Button
      icon={
        isBookmarked ? (
-          <MdOutlineBookmark className='text-base-content' />
+          <MdOutlineBookmark size={20} className='text-base-content' />
        ) : (
-          <MdOutlineBookmarkAdd className='text-base-content' />
+          <MdOutlineBookmarkAdd size={20} className='text-base-content' />
        )
      }
      onClick={toggleBookmark}
@@ -1,10 +1,7 @@
-import React, { useEffect } from 'react';
+import React 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';
@@ -14,6 +11,7 @@ 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';

 interface BooksGridProps {
@@ -24,18 +22,9 @@ 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'
@@ -60,7 +49,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
          <div
            id={`gridcell-${bookKey}`}
            key={bookKey}
-            className={`${isTauriAppPlatform() ? 'rounded-window' : ''} relative h-full w-full overflow-hidden`}
+            className='relative h-full w-full rounded-window overflow-hidden'
          >
            {isBookmarked && <Ribbon width={marginGap} />}
            <HeaderBar
@@ -4,7 +4,7 @@ import { BookConfig } from '@/types/book';
 import { FoliateView, wrappedFoliateView } from '@/types/view';
 import { useReaderStore } from '@/store/readerStore';
 import { useParallelViewStore } from '@/store/parallelViewStore';
-import { useClickEvent, useTouchEvent } from '../hooks/useClickEvent';
+import { useClickEvent } from '../hooks/useClickEvent';
 import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { useProgressSync } from '../hooks/useProgressSync';
 import { useAutoHideScrollbar } from '../hooks/useAutoHideScrollbar';
@@ -17,10 +17,8 @@ import {
  handleMouseup,
  handleClick,
  handleWheel,
-  handleTouchStart,
-  handleTouchMove,
-  handleTouchEnd,
 } from '../utils/iframeEventHandlers';
+import Toast from '@/components/Toast';

 const FoliateViewer: React.FC<{
  bookKey: string;
@@ -41,10 +39,11 @@ const FoliateViewer: React.FC<{
    return () => clearTimeout(timer);
  }, [toastMessage]);

-  useProgressSync(bookKey);
+  useProgressSync(bookKey, setToastMessage);

  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);
  };

@@ -70,9 +69,6 @@ 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));
      }
    }
  };
@@ -93,7 +89,6 @@ const FoliateViewer: React.FC<{
    }
  };

-  useTouchEvent(bookKey, viewRef);
  const { handleTurnPage } = useClickEvent(bookKey, viewRef, containerRef);
  useFoliateEvents(viewRef.current, {
    onLoad: docLoadHandler,
@@ -169,6 +164,9 @@ const FoliateViewer: React.FC<{
        onClick={(event) => handleTurnPage(event)}
        ref={containerRef}
      />
+      {toastMessage && (
+        <Toast message={toastMessage} toastClass='toast-top toast-end' alertClass='alert-success' />
+      )}
    </>
  );
 };
@@ -2,13 +2,10 @@ 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 {
@@ -19,10 +16,9 @@ interface FooterBarProps {

 const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim }) => {
  const _ = useTranslation();
-  const { hoveredBookKey, setHoveredBookKey, getView, getProgress } = useReaderStore();
+  const { hoveredBookKey, setHoveredBookKey, getView } = 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);
@@ -45,43 +41,33 @@ 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 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',
+        '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',
        isHoveredAnim && 'hover-bar-anim',
        hoveredBookKey === bookKey ? `opacity-100` : `opacity-0`,
      )}
      onMouseEnter={() => setHoveredBookKey(bookKey)}
      onMouseLeave={() => setHoveredBookKey('')}
    >
-      <div className='hidden sm:flex'>
-        <Button icon={<RiArrowLeftWideLine />} onClick={handleGoPrev} tooltip={_('Go Left')} />
-      </div>
      <Button
-        icon={<RiArrowGoBackLine />}
+        icon={<RiArrowLeftWideLine size={20} />}
+        onClick={handleGoPrev}
+        tooltip={_('Go Left')}
+      />
+      <Button
+        icon={<RiArrowGoBackLine size={20} />}
        onClick={handleGoBack}
        tooltip={_('Go Back')}
        disabled={!view?.history.canGoBack}
      />
      <Button
-        icon={<RiArrowGoForwardLine />}
+        icon={<RiArrowGoForwardLine size={20} />}
        onClick={handleGoForward}
        tooltip={_('Go Forward')}
        disabled={!view?.history.canGoForward}
@@ -97,10 +83,11 @@ const FooterBar: React.FC<FooterBarProps> = ({ bookKey, pageinfo, isHoveredAnim
        value={pageinfoValid ? progressFraction * 100 : 0}
        onChange={(e) => handleProgressChange(e)}
      />
-      <Button icon={<FaHeadphones />} onClick={handleSpeakText} tooltip={_('Speak')} />
-      <div className='hidden sm:flex'>
-        <Button icon={<RiArrowRightWideLine />} onClick={handleGoNext} tooltip={_('Go Right')} />
-      </div>
+      <Button
+        icon={<RiArrowRightWideLine size={20} />}
+        onClick={handleGoNext}
+        tooltip={_('Go Right')}
+      />
    </div>
  );
 };
@@ -5,15 +5,12 @@ 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 {
@@ -39,7 +36,6 @@ 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);
@@ -52,9 +48,8 @@ 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 transition-opacity duration-300`,
-        isTauriAppPlatform() && 'rounded-window-top-right',
-        !isSideBarVisible && isTauriAppPlatform() && 'rounded-window-top-left',
+        `shadow-xs bg-base-100 rounded-window-top-right transition-opacity duration-300`,
+        !isSideBarVisible && 'rounded-window-top-left',
        isHoveredAnim && 'hover-bar-anim',
        hoveredBookKey === bookKey || isDropdownOpen ? `visible` : `opacity-0`,
        isDropdownOpen && 'header-bar-pinned',
@@ -62,22 +57,21 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
      onMouseEnter={() => setHoveredBookKey(bookKey)}
      onMouseLeave={() => setHoveredBookKey('')}
    >
-      <div className='sidebar-bookmark-toggler bg-base-100 z-20 flex h-full items-center space-x-4'>
+      <div className='sidebar-bookmark-toggler flex h-full items-center'>
        <SidebarToggler bookKey={bookKey} />
        <BookmarkToggler bookKey={bookKey} />
      </div>

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

-      <div className='bg-base-100 z-20 ml-auto flex h-full items-center space-x-4'>
-        <SettingsToggler />
+      <div className='flex h-full items-center space-x-2'>
        <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={iconSize16} />}
+          toggleButton={<PiDotsThreeVerticalBold size={16} />}
          onToggle={handleToggleDropdown}
        >
          <ViewMenu bookKey={bookKey} onSetSettingsDialogOpen={onSetSettingsDialogOpen} />
@@ -86,12 +80,8 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
        <WindowButtons
          className='window-buttons flex h-full items-center'
          headerRef={headerRef}
-          showMinimize={
-            bookKeys.length == 1 && !isTrafficLightVisible && appService?.appPlatform !== 'web'
-          }
-          showMaximize={
-            bookKeys.length == 1 && !isTrafficLightVisible && appService?.appPlatform !== 'web'
-          }
+          showMinimize={bookKeys.length == 1 && appService?.appPlatform !== 'web'}
+          showMaximize={bookKeys.length == 1 && appService?.appPlatform !== 'web'}
          onClose={() => onCloseBook(bookKey)}
        />
      </div>
@@ -1,10 +1,9 @@
 import React from 'react';
-import { LuNotebookPen } from 'react-icons/lu';
+import { TbLayoutSidebarRight, TbLayoutSidebarRightFilled } from 'react-icons/tb';

 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 {
@@ -15,8 +14,6 @@ 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();
@@ -29,9 +26,9 @@ const NotebookToggler: React.FC<NotebookTogglerProps> = ({ bookKey }) => {
    <Button
      icon={
        sideBarBookKey == bookKey && isNotebookVisible ? (
-          <LuNotebookPen size={iconSize16} className='text-base-content' />
+          <TbLayoutSidebarRightFilled size={20} className='text-base-content' />
        ) : (
-          <LuNotebookPen size={iconSize16} className='text-base-content' />
+          <TbLayoutSidebarRight size={20} className='text-base-content' />
        )
      }
      onClick={handleToggleSidebar}
@@ -1,17 +1,14 @@
 '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 { useSettingsStore } from '@/store/settingsStore';
-import { isTauriAppPlatform } from '@/services/environment';
-import { AboutWindow } from '@/components/AboutWindow';
-import { Toast } from '@/components/Toast';
+
 import ReaderContent from './ReaderContent';
+import { AboutWindow } from '@/components/AboutWindow';
+import { useSettingsStore } from '@/store/settingsStore';

 const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
  const { envConfig } = useEnv();
@@ -19,10 +16,7 @@ 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 () => {
@@ -39,16 +33,10 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
  return (
    library.length > 0 &&
    settings.globalReadSettings && (
-      <div
-        className={clsx(
-          `reader-page bg-base-100 text-base-content select-none`,
-          isTauriAppPlatform() && 'rounded-window',
-        )}
-      >
+      <div className='reader-page rounded-window bg-base-100 text-base-content min-h-screen select-none'>
        <Suspense>
          <ReaderContent ids={ids} settings={settings} />
          <AboutWindow />
-          <Toast />
        </Suspense>
      </div>
    )
@@ -26,7 +26,6 @@ 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();
@@ -102,7 +101,6 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
    } catch {
      console.info('Error closing book', bookKey);
    }
-    eventDispatcher.dispatch('tts-stop', { bookKey });
    await saveBookConfig(bookKey);
    clearViewState(bookKey);
  };
@@ -145,7 +143,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
    setTimeout(() => setLoading(true), 300);
    return (
      loading && (
-        <div className={'hero hero-content h-dvh'}>
+        <div className={'hero hero-content min-h-screen'}>
          <Spinner loading={true} />
        </div>
      )
@@ -153,10 +151,9 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
  }

  return (
-    <div className='flex h-dvh'>
+    <div className='flex h-screen'>
      <SideBar onGoToLibrary={handleCloseBooksToLibrary} />
      <BooksGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
-      <TTSControl />
      <Notebook />
      {showDetailsBook && (
        <BookDetailModal
@@ -1,24 +0,0 @@
-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;
@@ -24,9 +24,9 @@ const SidebarToggler: React.FC<SidebarTogglerProps> = ({ bookKey }) => {
    <Button
      icon={
        sideBarBookKey === bookKey && isSideBarVisible ? (
-          <TbLayoutSidebarFilled className='text-base-content' />
+          <TbLayoutSidebarFilled size={20} className='text-base-content' />
        ) : (
-          <TbLayoutSidebar className='text-base-content' />
+          <TbLayoutSidebar size={20} className='text-base-content' />
        )
      }
      onClick={handleToggleSidebar}
@@ -92,15 +92,15 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
        <button
          onClick={zoomOut}
          className={clsx(
-            'hover:bg-base-300 text-base-content rounded-full p-2',
+            'hover:bg-base-200 text-base-content rounded-full p-2',
            zoomLevel <= MIN_ZOOM_LEVEL && 'btn-disabled text-gray-400',
          )}
        >
-          <MdZoomOut />
+          <MdZoomOut size={20} />
        </button>
        <button
          className={clsx(
-            'hover:bg-base-300 text-base-content h-8 min-h-8 w-[50%] rounded-md p-1 text-center',
+            'hover:bg-base-200 text-base-content h-8 min-h-8 w-[50%] rounded-md p-1 text-center',
          )}
          onClick={resetZoom}
        >
@@ -109,11 +109,11 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
        <button
          onClick={zoomIn}
          className={clsx(
-            'hover:bg-base-300 text-base-content rounded-full p-2',
+            'hover:bg-base-200 text-base-content rounded-full p-2',
            zoomLevel >= MAX_ZOOM_LEVEL && 'btn-disabled text-gray-400',
          )}
        >
-          <MdZoomIn />
+          <MdZoomIn size={20} />
        </button>
      </div>

@@ -124,7 +124,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
      <MenuItem
        label={_('Scrolled Mode')}
        shortcut='Shift+J'
-        icon={isScrolledMode ? <MdCheck /> : undefined}
+        icon={isScrolledMode ? <MdCheck size={20} /> : undefined}
        onClick={toggleScrolledMode}
      />

@@ -138,12 +138,20 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
              ? _('Light Mode')
              : _('Auto Mode')
        }
-        icon={themeMode === 'dark' ? <BiMoon /> : themeMode === 'light' ? <BiSun /> : <TbSunMoon />}
+        icon={
+          themeMode === 'dark' ? (
+            <BiMoon size={20} />
+          ) : themeMode === 'light' ? (
+            <BiSun size={20} />
+          ) : (
+            <TbSunMoon size={20} />
+          )
+        }
        onClick={cycleThemeMode}
      />
      <MenuItem
        label={_('Invert Colors in Dark Mode')}
-        icon={isInvertedColors ? <MdCheck className='text-base-content' /> : undefined}
+        icon={isInvertedColors ? <MdCheck size={20} className='text-base-content' /> : undefined}
        onClick={toggleInvertedColors}
        disabled={!isDarkMode}
      />
@@ -6,8 +6,7 @@ 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 { TbHexagonLetterD } from 'react-icons/tb';
-import { FaHeadphones } from 'react-icons/fa6';
+import { SiDeepl } from 'react-icons/si';

 import * as CFI from 'foliate-js/epubcfi.js';
 import { Overlayer } from 'foliate-js/overlayer.js';
@@ -18,18 +17,17 @@ 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 { 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';

 const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
-  const _ = useTranslation();
  const { envConfig } = useEnv();
  const { settings } = useSettingsStore();
  const { getConfig, saveConfig, getBookData, updateBooknotes } = useBookDataStore();
@@ -56,6 +54,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const [annotPopupPosition, setAnnotPopupPosition] = useState<Position>();
  const [dictPopupPosition, setDictPopupPosition] = useState<Position>();
  const [translatorPopupPosition, setTranslatorPopupPosition] = useState<Position>();
+  const [toastMessage, setToastMessage] = useState('');
  const [highlightOptionsVisible, setHighlightOptionsVisible] = useState(false);

  const [selectedStyle, setSelectedStyle] = useState<HighlightStyle>(
@@ -194,6 +193,11 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selection, bookKey]);

+  useEffect(() => {
+    const timer = setTimeout(() => setToastMessage(''), 2000);
+    return () => clearTimeout(timer);
+  }, [toastMessage]);
+
  useEffect(() => {
    if (!progress) return;
    const { location } = progress;
@@ -218,12 +222,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {

  const handleCopy = () => {
    if (!selection || !selection.text) return;
-    eventDispatcher.dispatch('toast', {
-      type: 'info',
-      message: _('Copied to notebook'),
-      className: 'whitespace-nowrap',
-      timeout: 2000,
-    });
+    setToastMessage('Copied to notebook');

    const { booknotes: annotations = [] } = config;
    if (selection) navigator.clipboard.writeText(selection.text);
@@ -305,7 +304,6 @@ 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);
@@ -336,26 +334,19 @@ 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: TbHexagonLetterD, onClick: handleDictionary },
-    { tooltipText: _('Wikipedia'), Icon: FaWikipediaW, onClick: handleWikipedia },
-    { tooltipText: _('Translate'), Icon: BsTranslate, onClick: handleTranslation },
-    { tooltipText: _('Speak'), Icon: FaHeadphones, onClick: handleSpeakText },
+    { 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 },
  ];

  return (
@@ -410,6 +401,8 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
          onHighlight={handleHighlight}
        />
      )}
+
+      {toastMessage && <Toast message={toastMessage} alertClass='bg-neutual text-content' />}
    </div>
  );
 };
@@ -1,10 +1,9 @@
 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 { useTranslation } from '@/hooks/useTranslation';
-import { useAuth } from '@/context/AuthContext';
+import { isWebAppPlatform } from '@/services/environment';

 const LANGUAGES = {
  AUTO: 'Auto Detect',
@@ -24,8 +23,6 @@ const LANGUAGES = {
  'ZH-HANT': 'Chinese (Traditional)',
 };

-const DEEPL_API_ENDPOINT = getAPIBaseUrl() + '/deepl/translate';
-
 interface DeepLPopupProps {
  text: string;
  position: Position;
@@ -42,7 +39,6 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
  popupHeight,
 }) => {
  const _ = useTranslation();
-  const { token } = useAuth();
  const { settings, setSettings } = useSettingsStore();
  const [sourceLang, setSourceLang] = useState('AUTO');
  const [targetLang, setTargetLang] = useState(settings.globalReadSettings.translateTargetLang);
@@ -67,12 +63,23 @@ 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(DEEPL_API_ENDPOINT, {
+        const response = await fetch(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
-            Authorization: `Bearer ${token ?? ''}`,
+            Authorization: `DeepL-Auth-Key ${process.env['NEXT_PUBLIC_DEEPL_API_KEY']}`,
          },
          body: JSON.stringify({
            text: [text],
@@ -99,15 +106,14 @@ 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();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [text, token, sourceLang, targetLang]);
+  }, [text, sourceLang, targetLang]);

  return (
    <div>
@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import React from 'react';
-import { FaCheckCircle } from 'react-icons/fa';
-import { HighlightColor, HighlightStyle } from '@/types/book';
+
 import { useSettingsStore } from '@/store/settingsStore';
-import { useResponsiveSize } from '@/hooks/useResponsiveSize';
+import { HighlightColor, HighlightStyle } from '@/types/book';
+import { FaCheckCircle } from 'react-icons/fa';

 const styles = ['highlight', 'underline', 'squiggly'] as HighlightStyle[];
 const colors = ['red', 'violet', 'blue', 'green', 'yellow'] as HighlightColor[];
@@ -25,7 +25,6 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
  const globalReadSettings = settings.globalReadSettings;
  const [selectedStyle, setSelectedStyle] = React.useState<HighlightStyle>(_selectedStyle);
  const [selectedColor, setSelectedColor] = React.useState<HighlightColor>(_selectedColor);
-  const iconSize16 = useResponsiveSize(16);

  const handleSelectStyle = (style: HighlightStyle) => {
    globalReadSettings.highlightStyle = style;
@@ -52,8 +51,7 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
          >
            <div
              className={clsx(
-                'w-4 p-0 text-center leading-none',
-                style === 'highlight' ? 'h-4' : 'h-5',
+                'h-4 w-4 p-0 text-center leading-none',
                style === 'highlight' &&
                  (selectedStyle === 'highlight' ? `bg-${selectedColor}-400` : `bg-gray-300`),
                (style === 'underline' || style === 'squiggly') &&
@@ -85,7 +83,7 @@ const HighlightOptions: React.FC<HighlightOptionsProps> = ({
            )}
          >
            {selectedColor === color && (
-              <FaCheckCircle size={iconSize16} className={clsx(`fill-${color}-400`)} />
+              <FaCheckCircle size={16} className={clsx(`fill-${color}-400`)} />
            )}
          </button>
        ))}
@@ -15,14 +15,14 @@ const PopupButton: React.FC<PopupButtonProps> = ({ showTooltip, tooltipText, Ico
  };
  return (
    <div
-      className='lg:tooltip lg:tooltip-bottom'
+      className='tooltip 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 />
+        <Icon size={20} />
      </button>
    </div>
  );
@@ -1,43 +1,28 @@
-import clsx from 'clsx';
 import React from 'react';

 import { FiSearch } from 'react-icons/fi';
-import { LuNotebookPen } from 'react-icons/lu';
-import { MdArrowBackIosNew, MdOutlinePushPin, MdPushPin } from 'react-icons/md';
+import { 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, handleClose, handleTogglePin }) => {
+}> = ({ isPinned, 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='absolute inset-0 flex items-center justify-center'>
        <div className='notebook-title text-sm font-medium'>{_('Notebook')}</div>
      </div>
-      <div className='z-10 flex items-center gap-x-4'>
+      <div className='z-10 flex items-center space-x-3'>
        <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',
-          )}
+          className={`${isPinned ? 'bg-base-300' : 'bg-base-300/65'} btn btn-ghost btn-circle h-6 min-h-6 w-6`}
        >
-          {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 />
+          {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 />
+          <FiSearch size={18} />
        </button>
      </div>
    </div>
@@ -7,24 +7,20 @@ 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();
@@ -35,32 +31,10 @@ 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
  }, []);

@@ -152,7 +126,7 @@ const Notebook: React.FC = ({}) => {
      <div
        className={clsx(
          'notebook-container bg-base-200 right-0 z-20 h-full min-w-60 select-none',
-          isTauriAppPlatform() && 'rounded-window-top-right rounded-window-bottom-right',
+          'rounded-window-top-right rounded-window-bottom-right',
          !isNotebookPinned && 'shadow-2xl',
        )}
        style={{
@@ -161,23 +135,11 @@ 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}
-          handleClose={() => setNotebookVisible(false)}
-          handleTogglePin={handleTogglePin}
-        />
+        <NotebookHeader isPinned={isNotebookPinned} 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>
          <ul className=''>
@@ -5,10 +5,9 @@ import { TbSunMoon } from 'react-icons/tb';

 import { useTheme } from '@/hooks/useTheme';
 import { themes } from '@/styles/themes';
-import { getStyles } from '@/utils/style';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
-import { useResponsiveSize } from '@/hooks/useResponsiveSize';
+import { getStyles } from '@/utils/style';

 const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const _ = useTranslation();
@@ -16,7 +15,6 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    useTheme();
  const { getViews, getViewSettings } = useReaderStore();
  const viewSettings = getViewSettings(bookKey)!;
-  const iconSize24 = useResponsiveSize(24);

  useEffect(() => {
    getViews().forEach((view) => {
@@ -30,30 +28,30 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
      <div className='flex items-center justify-between'>
        <h2 className='font-medium'>{_('Theme Mode')}</h2>
        <div className='flex gap-2'>
-          <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Auto Mode')}>
+          <div className='tooltip tooltip-bottom' data-tip={_('Auto Mode')}>
            <button
              className={`btn btn-ghost btn-circle ${themeMode === 'auto' ? 'btn-active bg-base-300' : ''}`}
              onClick={() => updateThemeMode('auto')}
            >
-              <TbSunMoon />
+              <TbSunMoon size={20} />
            </button>
          </div>

-          <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Light Mode')}>
+          <div className='tooltip tooltip-bottom' data-tip={_('Light Mode')}>
            <button
              className={`btn btn-ghost btn-circle ${themeMode === 'light' ? 'btn-active bg-base-300' : ''}`}
              onClick={() => updateThemeMode('light')}
            >
-              <MdOutlineLightMode />
+              <MdOutlineLightMode size={20} />
            </button>
          </div>

-          <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Dark Mode')}>
+          <div className='tooltip tooltip-bottom' data-tip={_('Dark Mode')}>
            <button
              className={`btn btn-ghost btn-circle ${themeMode === 'dark' ? 'btn-active bg-base-300' : ''}`}
              onClick={() => updateThemeMode('dark')}
            >
-              <MdOutlineDarkMode />
+              <MdOutlineDarkMode size={20} />
            </button>
          </div>
        </div>
@@ -82,9 +80,9 @@ const ColorPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
                className='hidden'
              />
              {themeColor === name ? (
-                <MdRadioButtonChecked size={iconSize24} />
+                <MdRadioButtonChecked size={24} />
              ) : (
-                <MdRadioButtonUnchecked size={iconSize24} />
+                <MdRadioButtonUnchecked size={24} />
              )}
              <span>{_(label)}</span>
            </label>
@@ -2,7 +2,6 @@ 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;
@@ -10,7 +9,6 @@ interface DialogMenuProps {

 const DialogMenu: React.FC<DialogMenuProps> = ({ toggleDropdown }) => {
  const _ = useTranslation();
-  const iconSize = useDefaultIconSize();
  const { isFontLayoutSettingsGlobal, setFontLayoutSettingsGlobal } = useSettingsStore();

  const handleToggleGlobal = () => {
@@ -28,15 +26,10 @@ const DialogMenu: React.FC<DialogMenuProps> = ({ toggleDropdown }) => {
        onClick={handleToggleGlobal}
      >
        <div className='flex items-center'>
-          <span style={{ minWidth: `${iconSize}px` }}>
-            {isFontLayoutSettingsGlobal && <MdCheck className='text-base-content' />}
+          <span style={{ minWidth: '20px' }}>
+            {isFontLayoutSettingsGlobal && <MdCheck size={20} className='text-base-content' />}
          </span>
-          <div
-            className='lg:tooltip'
-            data-tip={
-              isFontLayoutSettingsGlobal ? _('Apply to all books') : _('Apply to this book')
-            }
-          >
+          <div className='tooltip' data-tip='Uncheck for current book settings'>
            <span className='ml-2'>{_('Global Settings')}</span>
          </div>
        </div>
@@ -3,7 +3,6 @@ import React from 'react';
 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;
@@ -23,8 +22,6 @@ const FontDropdown: React.FC<DropdownProps> = ({
  onGetFontFamily,
 }) => {
  const _ = useTranslation();
-  const iconSize16 = useResponsiveSize(16);
-  const defaultIconSize = useDefaultIconSize();
  return (
    <div className='dropdown dropdown-top'>
      <button
@@ -32,7 +29,7 @@ const FontDropdown: React.FC<DropdownProps> = ({
        className='btn btn-sm flex items-center gap-1 px-[20px] font-normal normal-case'
      >
        <span style={{ fontFamily: onGetFontFamily(selected, family ?? '') }}>{selected}</span>
-        <FiChevronUp size={iconSize16} />
+        <FiChevronUp className='h-4 w-4' />
      </button>
      <ul
        tabIndex={0}
@@ -41,8 +38,8 @@ const FontDropdown: React.FC<DropdownProps> = ({
        {options.map((option) => (
          <li key={option} onClick={() => onSelect(option)}>
            <div className='flex items-center px-0'>
-              <span style={{ minWidth: `${defaultIconSize}px` }}>
-                {selected === option && <MdCheck className='text-base-content' />}
+              <span style={{ minWidth: '20px' }}>
+                {selected === option && <MdCheck size={20} className='text-base-content' />}
              </span>
              <span style={{ fontFamily: onGetFontFamily(option, family ?? '') }}>{option}</span>
            </div>
@@ -51,8 +48,8 @@ const FontDropdown: React.FC<DropdownProps> = ({
        {moreOptions && moreOptions.length > 0 && (
          <li className='dropdown dropdown-left dropdown-top'>
            <div className='flex items-center px-0'>
-              <span style={{ minWidth: `${iconSize16}px` }}>
-                <FiChevronLeft size={iconSize16} />
+              <span style={{ minWidth: '20px' }}>
+                <FiChevronLeft className='h-4 w-4' />
              </span>
              <span>{_('System Fonts')}</span>
            </div>
@@ -60,14 +57,14 @@ const FontDropdown: React.FC<DropdownProps> = ({
              tabIndex={0}
              className={clsx(
                'dropdown-content bgcolor-base-200 menu rounded-box relative z-[1] overflow-y-scroll shadow',
-                '!mr-5 mb-[-46px] inline max-h-80 w-[220px] overflow-y-scroll',
+                '!mr-5 mb-[-46px] max-h-80 w-[292px]',
              )}
            >
              {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' />}
+                  <div className='flex items-center px-0'>
+                    <span style={{ minWidth: '20px' }}>
+                      {selected === option && <MdCheck size={20} className='text-base-content' />}
                    </span>
                    <span style={{ fontFamily: onGetFontFamily(option, family ?? '') }}>
                      {option}
@@ -218,7 +218,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
            </div>

            <div className='config-item config-item-bottom'>
-              <span className=''>{_('Override Book Font')}</span>
+              <span className=''>{_('Override Publisher Font')}</span>
              <input
                type='checkbox'
                className='toggle'
@@ -119,17 +119,6 @@ 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;
@@ -148,30 +137,30 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
          <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')}>
+              <div className='tooltip tooltip-bottom' data-tip={_('Default')}>
                <button
                  className={`btn btn-ghost btn-circle ${writingMode === 'auto' ? 'btn-active bg-base-300' : ''}`}
                  onClick={() => setWritingMode('auto')}
                >
-                  <MdOutlineAutoMode />
+                  <MdOutlineAutoMode size={20} />
                </button>
              </div>

-              <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Horizontal Direction')}>
+              <div className='tooltip 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 />
+                  <MdOutlineTextRotationNone size={20} />
                </button>
              </div>

-              <div className='lg:tooltip lg:tooltip-bottom' data-tip={_('Vertical Direction')}>
+              <div className='tooltip 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 />
+                  <MdOutlineTextRotationDown size={20} />
                </button>
              </div>
            </div>
@@ -220,7 +209,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
          <div className='divide-base-200 divide-y'>
            <NumberInput
              className='config-item-top'
-              label={_('Vertical Margins (px)')}
+              label={_('Margins (px)')}
              value={marginPx}
              onChange={setMarginPx}
              min={0}
@@ -228,7 +217,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
              step={4}
            />
            <NumberInput
-              label={_('Horizontal Margins (%)')}
+              label={_('Gaps (%)')}
              value={gapPercent}
              onChange={setGapPercent}
              min={0}
@@ -239,7 +228,7 @@ const LayoutPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
              value={maxColumnCount}
              onChange={setMaxColumnCount}
              min={1}
-              max={4}
+              max={2}
            />
            <NumberInput
              label={_('Maximum Inline Size')}
@@ -99,7 +99,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
        <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=''>{_('Paging Animation')}</span>
+              <span className='text-gray-700'>{_('Paging Animation')}</span>
              <input
                type='checkbox'
                className='toggle'
@@ -116,7 +116,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
        <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=''>{_('Disable Click-to-Flip')}</span>
+              <span className='text-gray-700'>{_('Disable Click-to-Flip')}</span>
              <input
                type='checkbox'
                className='toggle'
@@ -135,7 +135,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
        >
          <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'
+              className='textarea textarea-ghost h-48 w-full border-0 p-3 !outline-none'
              placeholder={_('Enter your custom CSS here...')}
              spellCheck='false'
              value={draftStylesheet}
@@ -25,17 +25,11 @@ const NumberInput: React.FC<NumberInputProps> = ({
  const numberStep = step || 1;

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const value = e.target.value;
-
-    // Allow empty string or valid numbers without leading zeros
-    if (value === '' || /^[1-9]\d*\.?\d*$|^0?\.?\d*$/.test(value)) {
-      const newValue = value === '' ? 0 : parseFloat(value);
-      setLocalValue(newValue);
-
-      if (!isNaN(newValue)) {
-        const roundedValue = Math.round(newValue * 10) / 10;
-        onChange(Math.max(min, Math.min(max, roundedValue)));
-      }
+    const newValue = e.target.value === '' ? 0 : parseFloat(e.target.value);
+    setLocalValue(newValue);
+    if (!isNaN(newValue)) {
+      const roundedValue = Math.round(newValue * 10) / 10;
+      onChange(Math.max(min, Math.min(max, roundedValue)));
    }
  };

@@ -65,7 +59,6 @@ const NumberInput: React.FC<NumberInputProps> = ({
      <div className='text-base-content flex items-center gap-2'>
        <input
          type='text'
-          inputMode='decimal'
          value={localValue}
          onChange={handleChange}
          onBlur={handleOnBlur}
@@ -1,5 +1,4 @@
-import clsx from 'clsx';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { BookConfig } from '@/types/book';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
@@ -8,123 +7,95 @@ import { RiDashboardLine } from 'react-icons/ri';
 import { VscSymbolColor } from 'react-icons/vsc';
 import { PiDotsThreeVerticalBold } from 'react-icons/pi';
 import { IoAccessibilityOutline } from 'react-icons/io5';
-import { MdArrowBackIosNew } from 'react-icons/md';

 import FontPanel from './FontPanel';
 import LayoutPanel from './LayoutPanel';
 import ColorPanel from './ColorPanel';
+import WindowButtons from '@/components/WindowButtons';
 import Dropdown from '@/components/Dropdown';
-import Dialog from '@/components/Dialog';
 import DialogMenu from './DialogMenu';
 import MiscPanel from './MiscPanel';

 type SettingsPanelType = 'Font' | 'Layout' | 'Color' | 'Misc';

-type TabConfig = {
-  tab: SettingsPanelType;
-  icon: React.ElementType;
-  label: string;
-};
-
 const SettingsDialog: React.FC<{ bookKey: string; config: BookConfig }> = ({ bookKey }) => {
  const _ = useTranslation();
  const [activePanel, setActivePanel] = useState<SettingsPanelType>('Font');
  const { setFontLayoutSettingsDialogOpen } = useSettingsStore();

-  const tabConfig = [
-    {
-      tab: 'Font',
-      icon: RiFontSize,
-      label: _('Font'),
-    },
-    {
-      tab: 'Layout',
-      icon: RiDashboardLine,
-      label: _('Layout'),
-    },
-    {
-      tab: 'Color',
-      icon: VscSymbolColor,
-      label: _('Color'),
-    },
-    {
-      tab: 'Misc',
-      icon: IoAccessibilityOutline,
-      label: _('Misc'),
-    },
-  ] as TabConfig[];
-
-  const handleClose = () => {
-    setFontLayoutSettingsDialogOpen(false);
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      setFontLayoutSettingsDialogOpen(false);
+    }
  };

+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
  return (
-    <>
-      <Dialog
-        isOpen={true}
-        onClose={handleClose}
-        className='modal-open'
-        boxClassName='sm:w-1/2 sm:min-w-[480px]'
-        header={
-          <div className='flex w-full items-center justify-between'>
+    <dialog className='modal modal-open min-w-90 w-full !bg-[rgba(0,0,0,0.2)]'>
+      <div className='modal-box settings-content flex h-[65%] w-1/2 min-w-[540px] max-w-full flex-col p-0'>
+        <div className='dialog-header bg-base-100 sticky top-0 z-10 flex items-center justify-center px-4 pt-2'>
+          <div className='dialog-tabs flex h-10 max-w-[80%] flex-grow items-center justify-around'>
            <button
-              tabIndex={-1}
-              onClick={handleClose}
-              className={
-                'btn btn-ghost btn-circle flex h-6 min-h-6 w-6 hover:bg-transparent focus:outline-none sm:hidden'
-              }
+              className={`btn btn-ghost text-base-content h-8 min-h-8 px-4 ${activePanel === 'Font' ? 'btn-active' : ''}`}
+              onClick={() => setActivePanel('Font')}
            >
-              <MdArrowBackIosNew />
+              <RiFontSize size={20} className='mr-0' />
+              {_('Font')}
+            </button>
+            <button
+              className={`btn btn-ghost text-base-content h-8 min-h-8 px-4 ${activePanel === 'Layout' ? 'btn-active' : ''}`}
+              onClick={() => setActivePanel('Layout')}
+            >
+              <RiDashboardLine size={20} className='mr-0' />
+              {_('Layout')}
+            </button>
+            <button
+              className={`btn btn-ghost text-base-content h-8 min-h-8 px-4 ${activePanel === 'Color' ? 'btn-active' : ''}`}
+              onClick={() => setActivePanel('Color')}
+            >
+              <VscSymbolColor size={20} className='mr-0' />
+              {_('Color')}
+            </button>
+            <button
+              className={`btn btn-ghost text-base-content h-8 min-h-8 px-4 ${activePanel === 'Misc' ? 'btn-active' : ''}`}
+              onClick={() => setActivePanel('Misc')}
+            >
+              <IoAccessibilityOutline size={20} className='mr-0' />
+              {_('Misc')}
            </button>
-            <div className='dialog-tabs flex h-10 max-w-[100%] flex-grow items-center justify-around pl-4'>
-              {tabConfig.map(({ tab, icon: Icon, label }) => (
-                <button
-                  key={tab}
-                  className={clsx(
-                    'btn btn-ghost text-base-content h-8 min-h-8',
-                    activePanel === tab ? 'btn-active' : '',
-                  )}
-                  onClick={() => setActivePanel(tab)}
-                >
-                  <Icon className='mr-0' />
-                  {window.innerWidth >= 500 ? label : ''}
-                </button>
-              ))}
-            </div>
-            <div className='flex h-full items-center justify-end gap-x-2'>
-              <Dropdown
-                className='dropdown-bottom dropdown-end'
-                buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
-                toggleButton={<PiDotsThreeVerticalBold />}
-              >
-                <DialogMenu />
-              </Dropdown>
-              <button
-                onClick={handleClose}
-                className={'bg-base-300/65 btn btn-ghost btn-circle hidden h-6 min-h-6 w-6 sm:flex'}
-              >
-                <svg
-                  xmlns='http://www.w3.org/2000/svg'
-                  width='1em'
-                  height='1em'
-                  viewBox='0 0 24 24'
-                >
-                  <path
-                    fill='currentColor'
-                    d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'
-                  />
-                </svg>
-              </button>
-            </div>
          </div>
-        }
-      >
-        {activePanel === 'Font' && <FontPanel bookKey={bookKey} />}
-        {activePanel === 'Layout' && <LayoutPanel bookKey={bookKey} />}
-        {activePanel === 'Color' && <ColorPanel bookKey={bookKey} />}
-        {activePanel === 'Misc' && <MiscPanel bookKey={bookKey} />}
-      </Dialog>
-    </>
+          <div className='flex h-full items-center justify-end'>
+            <Dropdown
+              className='dropdown-bottom dropdown-end'
+              buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
+              toggleButton={<PiDotsThreeVerticalBold size={16} />}
+            >
+              <DialogMenu />
+            </Dropdown>
+            <WindowButtons
+              className='window-buttons absolute right-4 !ml-2 flex h-full items-center'
+              showMinimize={false}
+              showMaximize={false}
+              onClose={() => setFontLayoutSettingsDialogOpen(false)}
+            />
+          </div>
+        </div>
+
+        <div className='text-base-content mt-2 flex-grow overflow-y-auto px-[10%]'>
+          {activePanel === 'Font' && <FontPanel bookKey={bookKey} />}
+          {activePanel === 'Layout' && <LayoutPanel bookKey={bookKey} />}
+          {activePanel === 'Color' && <ColorPanel bookKey={bookKey} />}
+          {activePanel === 'Misc' && <MiscPanel bookKey={bookKey} />}
+        </div>
+      </div>
+    </dialog>
  );
 };

@@ -4,12 +4,10 @@ import { MdInfoOutline } from 'react-icons/md';
 import { Book } from '@/types/book';
 import { useTranslation } from '@/hooks/useTranslation';
 import { eventDispatcher } from '@/utils/event';
-import { useResponsiveSize } from '@/hooks/useResponsiveSize';

 const BookCard = ({ book }: { book: Book }) => {
  const { coverImageUrl, title, author } = book;
  const _ = useTranslation();
-  const iconSize18 = useResponsiveSize(18);

  const showBookDetails = () => {
    eventDispatcher.dispatchSync('show-book-details', book);
@@ -22,7 +20,7 @@ const BookCard = ({ book }: { book: Book }) => {
        alt={_('Book Cover')}
        width={56}
        height={80}
-        className='mr-4 aspect-auto max-h-16 w-[15%] max-w-12 rounded-sm object-cover shadow-md'
+        className='mr-4 aspect-auto max-h-20 w-[15%] max-w-14 rounded-sm object-cover shadow-md'
        onError={(e) => {
          (e.target as HTMLImageElement).style.display = 'none';
        }}
@@ -35,7 +33,7 @@ const BookCard = ({ book }: { book: Book }) => {
        className='btn btn-ghost hover:bg-base-300 h-6 min-h-6 w-6 rounded-full p-0 transition-colors'
        aria-label={_('More Info')}
      >
-        <MdInfoOutline size={iconSize18} className='fill-base-content' onClick={showBookDetails} />
+        <MdInfoOutline size={18} className='fill-base-content' onClick={showBookDetails} />
      </button>
    </div>
  );
@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import React from 'react';
 import Image from 'next/image';

@@ -11,11 +10,10 @@ import { DOWNLOAD_READEST_URL } from '@/services/constants';
 import useBooksManager from '../../hooks/useBooksManager';

 interface BookMenuProps {
-  menuClassName?: string;
  setIsDropdownOpen?: (isOpen: boolean) => void;
 }

-const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen }) => {
+const BookMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
  const _ = useTranslation();
  const { library } = useLibraryStore();
  const { openParallelView } = useBooksManager();
@@ -41,10 +39,7 @@ const BookMenu: React.FC<BookMenuProps> = ({ menuClassName, setIsDropdownOpen })
  return (
    <div
      tabIndex={0}
-      className={clsx(
-        'book-menu dropdown-content border-base-100 z-20 w-60 shadow-2xl',
-        menuClassName,
-      )}
+      className='book-menu dropdown-content dropdown-center border-base-100 z-20 mt-3 w-60 shadow-2xl'
    >
      <MenuItem label={_('Parallel Read')} noIcon>
        <ul className='max-h-60 overflow-y-auto'>
@@ -9,7 +9,6 @@ import { useNotebookStore } from '@/store/notebookStore';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import useScrollToItem from '../../hooks/useScrollToItem';
-import { eventDispatcher } from '@/utils/event';

 interface BooknoteItemProps {
  bookKey: string;
@@ -30,8 +29,6 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item }) => {

  const handleClickItem = (event: React.MouseEvent) => {
    event.preventDefault();
-    eventDispatcher.dispatch('navigate', { bookKey, cfi });
-
    getView(bookKey)?.goTo(cfi);
    if (note) {
      setNotebookVisible(true);
@@ -125,16 +122,7 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item }) => {
              )}
              onClick={editNote.bind(null, item)}
            >
-              <div
-                className={clsx(
-                  'align-bottom text-blue-400',
-                  'transition duration-300 ease-in-out',
-                  'opacity-0 group-hover:opacity-100',
-                  'hover:text-blue-600',
-                )}
-              >
-                {_('Edit')}
-              </div>
+              <div className='align-bottom text-blue-400'>{_('Edit')}</div>
            </button>
          )}
          <button
@@ -144,16 +132,7 @@ const BooknoteItem: React.FC<BooknoteItemProps> = ({ bookKey, item }) => {
            )}
            onClick={deleteNote.bind(null, item)}
          >
-            <div
-              className={clsx(
-                'align-bottom text-red-400',
-                'transition duration-300 ease-in-out',
-                'opacity-0 group-hover:opacity-100',
-                'hover:text-red-600',
-              )}
-            >
-              {_('Delete')}
-            </div>
+            <div className='align-bottom text-red-400'>{_('Delete')}</div>
          </button>
        </div>
      </div>
@@ -15,8 +15,6 @@ const SidebarContent: React.FC<{
  const { getConfig, setConfig } = useBookDataStore();
  const config = getConfig(sideBarBookKey);
  const [activeTab, setActiveTab] = useState(config?.viewSettings?.sideBarTab || 'toc');
-  const [fade, setFade] = useState(false);
-  const [targetTab, setTargetTab] = useState(activeTab);

  useEffect(() => {
    const container = scrollContainerRef.current;
@@ -51,41 +49,28 @@ const SidebarContent: React.FC<{
  }, [sideBarBookKey]);

  const handleTabChange = (tab: string) => {
-    setFade(true);
-    const timeout = setTimeout(() => {
-      setFade(false);
-      setTargetTab(tab);
-      setConfig(sideBarBookKey!, config);
-      clearTimeout(timeout);
-    }, 300);
-
    setActiveTab(tab);
    const config = getConfig(sideBarBookKey!)!;
    config.viewSettings!.sideBarTab = tab;
+    setConfig(sideBarBookKey!, config);
  };

  return (
    <>
      <div
        className={clsx(
-          'sidebar-content flex min-h-0 flex-grow flex-col shadow-inner',
-          'font-sans text-base font-normal sm:text-sm',
+          'sidebar-content flex min-h-0 flex-grow flex-col',
+          'font-sans text-sm font-normal shadow-inner',
        )}
      >
-        <div
-          ref={scrollContainerRef}
-          className={clsx(
-            'scroll-container overflow-y-auto transition-opacity duration-300 ease-in-out',
-            { 'opacity-0': fade, 'opacity-100': !fade },
-          )}
-        >
-          {targetTab === 'toc' && bookDoc.toc && (
+        <div ref={scrollContainerRef} className='scroll-container overflow-y-auto'>
+          {activeTab === 'toc' && bookDoc.toc && (
            <TOCView toc={bookDoc.toc} bookKey={sideBarBookKey} />
          )}
-          {targetTab === 'annotations' && (
+          {activeTab === 'annotations' && (
            <BooknoteView type='annotation' toc={bookDoc.toc ?? []} bookKey={sideBarBookKey} />
          )}
-          {targetTab === 'bookmarks' && (
+          {activeTab === 'bookmarks' && (
            <BooknoteView type='bookmark' toc={bookDoc.toc ?? []} bookKey={sideBarBookKey} />
          )}
        </div>
@@ -3,10 +3,8 @@ import React from 'react';
 import { GiBookshelf } from 'react-icons/gi';
 import { FiSearch } from 'react-icons/fi';
 import { MdOutlineMenu, MdOutlinePushPin, MdPushPin } from 'react-icons/md';
-import { MdArrowBackIosNew } from 'react-icons/md';

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

@@ -14,14 +12,10 @@ const SidebarHeader: React.FC<{
  isPinned: boolean;
  isSearchBarVisible: boolean;
  onGoToLibrary: () => void;
-  onClose: () => void;
  onTogglePin: () => void;
  onToggleSearchBar: () => void;
-}> = ({ isPinned, isSearchBarVisible, onGoToLibrary, onClose, onTogglePin, onToggleSearchBar }) => {
+}> = ({ isPinned, isSearchBarVisible, onGoToLibrary, onTogglePin, onToggleSearchBar }) => {
  const { isTrafficLightVisible } = useTrafficLight();
-  const iconSize14 = useResponsiveSize(14);
-  const iconSize18 = useResponsiveSize(18);
-  const iconSize22 = useResponsiveSize(22);
  return (
    <div
      className={clsx(
@@ -29,18 +23,12 @@ const SidebarHeader: React.FC<{
        isTrafficLightVisible ? 'pl-20' : 'pl-1.5',
      )}
    >
-      <div className='flex items-center gap-x-8'>
-        <button
-          onClick={onClose}
-          className={'btn btn-ghost btn-circle flex h-6 min-h-6 w-6 hover:bg-transparent sm:hidden'}
-        >
-          <MdArrowBackIosNew size={iconSize22} />
-        </button>
+      <div className='flex items-center'>
        <button className='btn btn-ghost h-8 min-h-8 w-8 p-0' onClick={onGoToLibrary}>
-          <GiBookshelf className='fill-base-content' />
+          <GiBookshelf size={20} className='fill-base-content' />
        </button>
      </div>
-      <div className='flex min-w-24 max-w-32 items-center justify-between sm:size-[70%]'>
+      <div className='flex size-[70%] min-w-24 max-w-32 items-center justify-between'>
        <button
          onClick={onToggleSearchBar}
          className={clsx(
@@ -48,28 +36,21 @@ const SidebarHeader: React.FC<{
            isSearchBarVisible ? 'bg-base-300' : '',
          )}
        >
-          <FiSearch size={iconSize18} className='text-base-content' />
+          <FiSearch size={18} className='text-base-content' />
        </button>
        <Dropdown
-          className={clsx(
-            window.innerWidth < 640 && 'dropdown-end',
-            'dropdown-bottom flex justify-center',
-          )}
-          menuClassName={window.innerWidth < 640 ? 'no-triangle mt-1' : 'dropdown-center mt-3'}
+          className='dropdown-bottom flex justify-center'
          buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
-          toggleButton={<MdOutlineMenu className='fill-base-content' />}
+          toggleButton={<MdOutlineMenu size={20} className='fill-base-content' />}
        >
          <BookMenu />
        </Dropdown>
-        <div className='right-0 hidden h-8 w-8 items-center justify-center sm:flex'>
+        <div className='right-0 flex h-8 w-8 items-center justify-center'>
          <button
            onClick={onTogglePin}
-            className={clsx(
-              'sidebar-pin-btn btn btn-ghost btn-circle hidden h-6 min-h-6 w-6 sm:flex',
-              isPinned ? 'bg-base-300' : 'bg-base-300/65',
-            )}
+            className={`${isPinned ? 'bg-base-300' : 'bg-base-300/65'} btn btn-ghost btn-circle h-6 min-h-6 w-6`}
          >
-            {isPinned ? <MdPushPin size={iconSize14} /> : <MdOutlinePushPin size={iconSize14} />}
+            {isPinned ? <MdPushPin size={14} /> : <MdOutlinePushPin size={14} />}
          </button>
        </div>
      </div>
@@ -9,7 +9,6 @@ import { useTranslation } from '@/hooks/useTranslation';
 import { BookSearchConfig, BookSearchResult } from '@/types/book';
 import Dropdown from '@/components/Dropdown';
 import SearchOptions from './SearchOptions';
-import { useResponsiveSize } from '@/hooks/useResponsiveSize';

 const MINIMUM_SEARCH_TERM_LENGTH_DEFAULT = 2;
 const MINIMUM_SEARCH_TERM_LENGTH_CJK = 1;
@@ -44,9 +43,6 @@ const SearchBar: React.FC<SearchBarProps> = ({
  const isSearchPending = useRef(false);
  const searchTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);

-  const iconSize12 = useResponsiveSize(12);
-  const iconSize16 = useResponsiveSize(16);
-
  useEffect(() => {
    handleSearchTermChange(searchTerm);
    // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -157,7 +153,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
    <div className='relative p-2'>
      <div className='bg-base-100 flex h-8 items-center rounded-lg'>
        <div className='pl-3'>
-          <FaSearch size={iconSize16} className='text-gray-500' />
+          <FaSearch className='text-gray-500' />
        </div>

        <input
@@ -170,11 +166,11 @@ const SearchBar: React.FC<SearchBarProps> = ({
          className='w-full bg-transparent p-2 font-sans text-sm font-light focus:outline-none'
        />

-        <div className='bg-base-300 flex h-8 w-8 items-center rounded-r-lg'>
+        <div className='flex h-8 w-8 items-center rounded-r-lg bg-gray-300'>
          <Dropdown
            className='dropdown-bottom flex justify-center'
            buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0 rounded-none rounded-r-lg'
-            toggleButton={<FaChevronDown size={iconSize12} className='text-gray-500' />}
+            toggleButton={<FaChevronDown size={12} className='text-gray-500' />}
          >
            <SearchOptions
              searchConfig={searchConfig}
@@ -2,7 +2,6 @@ import React from 'react';
 import { MdCheck } from 'react-icons/md';
 import { BookSearchConfig } from '@/types/book';
 import { useTranslation } from '@/hooks/useTranslation';
-import { useDefaultIconSize } from '@/hooks/useResponsiveSize';

 interface SearchOptionsProps {
  searchConfig: BookSearchConfig;
@@ -10,68 +9,100 @@ interface SearchOptionsProps {
  setIsDropdownOpen?: (isOpen: boolean) => void;
 }

-interface OptionProps {
-  label: string;
-  isActive: boolean;
-  onClick: () => void;
-}
-
-const Option: React.FC<OptionProps> = ({ label, isActive, onClick }) => (
-  <button
-    className='hover:bg-base-300 flex w-full items-center justify-between rounded-md p-2'
-    onClick={onClick}
-  >
-    <div className='flex items-center'>
-      <span style={{ minWidth: `${useDefaultIconSize()}px` }}>
-        {isActive && <MdCheck className='text-base-content' />}
-      </span>
-      <span className='ml-2'>{label}</span>
-    </div>
-  </button>
-);
-
 const SearchOptions: React.FC<SearchOptionsProps> = ({
  searchConfig,
  onSearchConfigChanged,
  setIsDropdownOpen,
 }) => {
  const _ = useTranslation();
-  const updateConfig = (key: keyof BookSearchConfig, value: boolean | string) => {
-    onSearchConfigChanged({ ...searchConfig, [key]: value });
+  const handleSetScope = () => {
+    onSearchConfigChanged({
+      ...searchConfig,
+      scope: searchConfig.scope === 'book' ? 'section' : 'book',
+    });
+    setIsDropdownOpen?.(false);
+  };
+  const handleSetMatchCase = () => {
+    onSearchConfigChanged({ ...searchConfig, matchCase: !searchConfig.matchCase });
+    setIsDropdownOpen?.(false);
+  };
+  const handleSetMatchWholeWords = () => {
+    onSearchConfigChanged({ ...searchConfig, matchWholeWords: !searchConfig.matchWholeWords });
+    setIsDropdownOpen?.(false);
+  };
+  const handleSetMatchDiacritics = () => {
+    onSearchConfigChanged({ ...searchConfig, matchDiacritics: !searchConfig.matchDiacritics });
    setIsDropdownOpen?.(false);
  };

  return (
    <div
      tabIndex={0}
-      className='book-menu dropdown-content dropdown-center border-base-200 z-20 mt-3 w-56 border shadow-2xl'
+      className='book-menu dropdown-content dropdown-center z-20 mt-3 w-56 border bg-white shadow-2xl'
    >
-      <Option
-        label={_('Book')}
-        isActive={searchConfig.scope === 'book'}
-        onClick={() => updateConfig('scope', 'book')}
-      />
-      <Option
-        label={_('Chapter')}
-        isActive={searchConfig.scope === 'section'}
-        onClick={() => updateConfig('scope', 'section')}
-      />
-      <hr className='border-base-200 my-1' />
-      <Option
-        label={_('Match Case')}
-        isActive={searchConfig.matchCase}
-        onClick={() => updateConfig('matchCase', !searchConfig.matchCase)}
-      />
-      <Option
-        label={_('Match Whole Words')}
-        isActive={searchConfig.matchWholeWords}
-        onClick={() => updateConfig('matchWholeWords', !searchConfig.matchWholeWords)}
-      />
-      <Option
-        label={_('Match Diacritics')}
-        isActive={searchConfig.matchDiacritics}
-        onClick={() => updateConfig('matchDiacritics', !searchConfig.matchDiacritics)}
-      />
+      <button
+        className='flex w-full items-center justify-between rounded-md p-2 hover:bg-gray-100'
+        onClick={handleSetScope}
+      >
+        <div className='flex items-center'>
+          <span style={{ minWidth: '20px' }}>
+            {searchConfig.scope === 'book' && <MdCheck size={20} className='text-base-content' />}
+          </span>
+          <span className='ml-2'>{_('Book')}</span>
+        </div>
+      </button>
+
+      <button
+        className='flex w-full items-center justify-between rounded-md p-2 hover:bg-gray-100'
+        onClick={handleSetScope}
+      >
+        <div className='flex items-center'>
+          <span style={{ minWidth: '20px' }}>
+            {searchConfig.scope === 'section' && (
+              <MdCheck size={20} className='text-base-content' />
+            )}
+          </span>
+          <span className='ml-2'>{_('Chapter')}</span>
+        </div>
+      </button>
+
+      <hr className='my-1' />
+
+      <button
+        className='flex w-full items-center justify-between rounded-md p-2 hover:bg-gray-100'
+        onClick={handleSetMatchCase}
+      >
+        <div className='flex items-center'>
+          <span style={{ minWidth: '20px' }}>
+            {searchConfig.matchCase && <MdCheck size={20} className='text-base-content' />}
+          </span>
+          <span className='ml-2'>{_('Match Case')}</span>
+        </div>
+      </button>
+
+      <button
+        className='flex w-full items-center justify-between rounded-md p-2 hover:bg-gray-100'
+        onClick={handleSetMatchWholeWords}
+      >
+        <div className='flex items-center'>
+          <span style={{ minWidth: '20px' }}>
+            {searchConfig.matchWholeWords && <MdCheck size={20} className='text-base-content' />}
+          </span>
+          <span className='ml-2'>{_('Match Whole Words')}</span>
+        </div>
+      </button>
+
+      <button
+        className='flex w-full items-center justify-between rounded-md p-2 hover:bg-gray-100'
+        onClick={handleSetMatchDiacritics}
+      >
+        <div className='flex items-center'>
+          <span style={{ minWidth: '20px' }}>
+            {searchConfig.matchDiacritics && <MdCheck size={20} className='text-base-content' />}
+          </span>
+          <span className='ml-2'>{_('Match Diacritics')}</span>
+        </div>
+      </button>
    </div>
  );
 };
@@ -7,8 +7,6 @@ import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { BookSearchResult } from '@/types/book';
 import { eventDispatcher } from '@/utils/event';
-import { isTauriAppPlatform } from '@/services/environment';
-import { useTheme } from '@/hooks/useTheme';
 import SidebarHeader from './Header';
 import SidebarContent from './Content';
 import BookCard from './BookCard';
@@ -24,7 +22,6 @@ const MAX_SIDEBAR_WIDTH = 0.45;
 const SideBar: React.FC<{
  onGoToLibrary: () => void;
 }> = ({ onGoToLibrary }) => {
-  const { updateAppTheme } = useTheme();
  const { settings } = useSettingsStore();
  const { sideBarBookKey } = useSidebarStore();
  const { getBookData } = useBookDataStore();
@@ -41,7 +38,7 @@ const SideBar: React.FC<{
    handleSideBarTogglePin,
  } = useSidebar(
    settings.globalReadSettings.sideBarWidth,
-    window.innerWidth >= 640 ? settings.globalReadSettings.isSideBarPinned : false,
+    settings.globalReadSettings.isSideBarPinned,
  );

  const onSearchEvent = async (event: CustomEvent) => {
@@ -51,29 +48,10 @@ const SideBar: React.FC<{
    setSearchTerm(term);
  };

-  const onNavigateEvent = async () => {
-    const pinButton = document.querySelector('.sidebar-pin-btn');
-    const isPinButtonHidden = !pinButton || window.getComputedStyle(pinButton).display === 'none';
-    if (isPinButtonHidden) {
-      setSideBarVisible(false);
-    }
-  };
-
-  useEffect(() => {
-    if (isSideBarVisible) {
-      updateAppTheme('base-200');
-    } else {
-      updateAppTheme('base-100');
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSideBarVisible]);
-
  useEffect(() => {
    eventDispatcher.on('search', onSearchEvent);
-    eventDispatcher.on('navigate', onNavigateEvent);
    return () => {
      eventDispatcher.off('search', onSearchEvent);
-      eventDispatcher.off('navigate', onNavigateEvent);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
@@ -101,7 +79,6 @@ const SideBar: React.FC<{
  useShortcuts({ onToggleSearchBar: handleToggleSearchBar }, [sideBarBookKey]);

  const handleSearchResultClick = (cfi: string) => {
-    onNavigateEvent();
    getView(sideBarBookKey)?.goTo(cfi);
  };

@@ -117,8 +94,8 @@ const SideBar: React.FC<{
    <>
      <div
        className={clsx(
-          'sidebar-container bg-base-200 z-20 flex h-full min-w-60 select-none flex-col',
-          isTauriAppPlatform() && 'rounded-window-top-left rounded-window-bottom-left',
+          'sidebar-container bg-base-200 z-20 flex h-full min-w-60 flex-col',
+          'rounded-window-top-left rounded-window-bottom-left select-none',
          !isSideBarPinned && 'shadow-2xl',
        )}
        style={{
@@ -127,20 +104,11 @@ const SideBar: React.FC<{
          position: isSideBarPinned ? 'relative' : 'absolute',
        }}
      >
-        <style jsx>{`
-          @media (max-width: 640px) {
-            .sidebar-container {
-              width: 100%;
-              min-width: 100%;
-            }
-          }
-        `}</style>
        <div className='flex-shrink-0'>
          <SidebarHeader
            isPinned={isSideBarPinned}
            isSearchBarVisible={isSearchBarVisible}
            onGoToLibrary={onGoToLibrary}
-            onClose={() => setSideBarVisible(false)}
            onTogglePin={handleSideBarTogglePin}
            onToggleSearchBar={handleToggleSearchBar}
          />
@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';

 import { TOCItem } from '@/libs/document';
@@ -6,7 +5,7 @@ import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { findParentPath } from '@/utils/toc';
 import { getContentMd5 } from '@/utils/misc';
-import { eventDispatcher } from '@/utils/event';
+import clsx from 'clsx';

 const createExpanderIcon = (isExpanded: boolean) => {
  return (
@@ -44,7 +43,6 @@ const TOCItemView: React.FC<{

  const handleClickItem = (event: React.MouseEvent) => {
    event.preventDefault();
-    eventDispatcher.dispatch('navigate', { bookKey, href: item.href });
    if (item.href) {
      getView(bookKey)?.goTo(item.href);
    }
@@ -128,7 +126,7 @@ const TOCView: React.FC<{
      const rect = currentItem.getBoundingClientRect();
      const isVisible = rect.top >= 0 && rect.bottom <= window.innerHeight;
      if (!isVisible) {
-        (currentItem as HTMLElement).scrollIntoView({ behavior: 'instant', block: 'center' });
+        (currentItem as HTMLElement).scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
      (currentItem as HTMLElement).setAttribute('aria-current', 'page');
    }
@@ -1,59 +1,23 @@
-import clsx from 'clsx';
 import React from 'react';
 import { MdToc, MdEditNote, MdBookmarkBorder } from 'react-icons/md';

-import { useTranslation } from '@/hooks/useTranslation';
-import { isPWA } from '@/services/environment';
-
 const TabNavigation: React.FC<{
  activeTab: string;
  onTabChange: (tab: string) => void;
-}> = ({ activeTab, onTabChange }) => {
-  const _ = useTranslation();
-
-  const tabs = ['toc', 'annotations', 'bookmarks'];
-
-  return (
-    <div
-      className={clsx(
-        'bottom-tab border-base-300/50 relative flex w-full border-t',
-        isPWA() ? 'bottom-[calc(env(safe-area-inset-bottom)_/_2)]' : '',
-      )}
-    >
-      <div
-        className={clsx(
-          'bg-base-300 absolute bottom-1.5 left-1 -z-10 h-[calc(100%-12px)] w-[calc(33.3%-8px)] rounded-lg',
-          'transform transition-transform duration-300',
-          activeTab === 'toc' && 'translate-x-0',
-          activeTab === 'annotations' && 'translate-x-[calc(100%+8px)]',
-          activeTab === 'bookmarks' && 'translate-x-[calc(200%+16px)]',
-        )}
-      />
-      {tabs.map((tab) => (
-        <div
-          key={tab}
-          className='lg:tooltip lg:tooltip-top z-50 m-1.5 flex-1 cursor-pointer rounded-md p-2'
-          data-tip={
-            tab === 'toc'
-              ? _('Table of Contents')
-              : tab === 'annotations'
-                ? _('Annotate')
-                : _('Bookmark')
-          }
-        >
-          <div className={clsx('')} onClick={() => onTabChange(tab)}>
-            {tab === 'toc' ? (
-              <MdToc className='mx-auto' />
-            ) : tab === 'annotations' ? (
-              <MdEditNote className='mx-auto' />
-            ) : (
-              <MdBookmarkBorder className='mx-auto' />
-            )}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
+}> = ({ activeTab, onTabChange }) => (
+  <div className='bottom-tab border-base-300/50 flex w-full border-t'>
+    {['toc', 'annotations', 'bookmarks'].map((tab) => (
+      <button
+        key={tab}
+        className={`m-1.5 flex-1 rounded-md p-2 ${activeTab === tab ? 'bg-base-300' : ''}`}
+        onClick={() => onTabChange(tab)}
+      >
+        {tab === 'toc' && <MdToc size={20} className='mx-auto' />}
+        {tab === 'annotations' && <MdEditNote size={20} className='mx-auto' />}
+        {tab === 'bookmarks' && <MdBookmarkBorder size={20} className='mx-auto' />}
+      </button>
+    ))}
+  </div>
+);

 export default TabNavigation;
@@ -1,310 +0,0 @@
-import clsx from 'clsx';
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { useBookDataStore } from '@/store/bookDataStore';
-import { useReaderStore } from '@/store/readerStore';
-import { useTranslation } from '@/hooks/useTranslation';
-import { useResponsiveSize } from '@/hooks/useResponsiveSize';
-import { TTSController, SILENCE_DATA } from '@/services/tts';
-import { getPopupPosition, Position } from '@/utils/sel';
-import { eventDispatcher } from '@/utils/event';
-import { parseSSMLLang } from '@/utils/ssml';
-import { getOSPlatform } from '@/utils/misc';
-import { throttle } from '@/utils/ui';
-import { isPWA } from '@/services/environment';
-import Popup from '@/components/Popup';
-import TTSPanel from './TTSPanel';
-import TTSIcon from './TTSIcon';
-
-const POPUP_WIDTH = 282;
-const POPUP_HEIGHT = 160;
-const POPUP_PADDING = 10;
-
-const TTSControl = () => {
-  const _ = useTranslation();
-  const { getBookData } = useBookDataStore();
-  const { getView, getViewSettings } = useReaderStore();
-  const [bookKey, setBookKey] = useState<string>('');
-  const [ttsLang, setTtsLang] = useState<string>('en');
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [isPaused, setIsPaused] = useState(false);
-  const [showIndicator, setShowIndicator] = useState(false);
-  const [showPanel, setShowPanel] = useState(false);
-  const [panelPosition, setPanelPosition] = useState<Position>();
-  const [trianglePosition, setTrianglePosition] = useState<Position>();
-
-  const popupWidth = useResponsiveSize(POPUP_WIDTH);
-  const popupHeight = useResponsiveSize(POPUP_HEIGHT);
-  const popupPadding = useResponsiveSize(POPUP_PADDING);
-
-  const iconRef = useRef<HTMLDivElement>(null);
-  const ttsControllerRef = useRef<TTSController | null>(null);
-
-  // this enables WebAudio to play even when the mute toggle switch is ON
-  const unblockAudio = () => {
-    const audio = document.createElement('audio');
-    audio.setAttribute('x-webkit-airplay', 'deny');
-    audio.preload = 'auto';
-    audio.loop = true;
-    audio.src = SILENCE_DATA;
-    audio.play();
-  };
-
-  useEffect(() => {
-    return () => {
-      if (ttsControllerRef.current) {
-        ttsControllerRef.current.kill();
-        ttsControllerRef.current = null;
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    eventDispatcher.on('tts-speak', handleTTSSpeak);
-    eventDispatcher.on('tts-stop', handleTTSStop);
-    eventDispatcher.onSync('tts-is-speaking', handleQueryIsSpeaking);
-    return () => {
-      eventDispatcher.off('tts-speak', handleTTSSpeak);
-      eventDispatcher.off('tts-stop', handleTTSStop);
-      eventDispatcher.offSync('tts-is-speaking', handleQueryIsSpeaking);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleTTSSpeak = async (event: CustomEvent) => {
-    const { bookKey, range } = event.detail;
-    const view = getView(bookKey);
-    const viewSettings = getViewSettings(bookKey);
-    const bookData = getBookData(bookKey);
-    if (!view || !viewSettings || !bookData) return;
-    if (bookData.book?.format === 'PDF') {
-      eventDispatcher.dispatch('toast', {
-        message: _('TTS not supported for PDF'),
-        type: 'warning',
-      });
-      return;
-    }
-
-    setBookKey(bookKey);
-
-    if (ttsControllerRef.current) {
-      ttsControllerRef.current.stop();
-      ttsControllerRef.current = null;
-    }
-    setShowIndicator(true);
-
-    try {
-      if (getOSPlatform() === 'ios') {
-        unblockAudio();
-      }
-      const ttsController = new TTSController(view);
-      await ttsController.init();
-      await ttsController.initViewTTS();
-      const ssml = view.tts?.from(range);
-      if (ssml) {
-        ttsController.setRate(viewSettings.ttsRate);
-        ttsController.setVoice(viewSettings.ttsVoice);
-        ttsController.speak(ssml);
-        ttsControllerRef.current = ttsController;
-
-        const lang = parseSSMLLang(ssml) || 'en';
-        setTtsLang(lang);
-        setIsPlaying(true);
-      }
-    } catch (error) {
-      eventDispatcher.dispatch('toast', {
-        message: _('TTS not supported in this device'),
-        type: 'error',
-      });
-      console.error(error);
-    }
-  };
-
-  const handleTTSStop = async (event: CustomEvent) => {
-    const { bookKey: stopBookKey } = event.detail;
-    if (bookKey === stopBookKey) {
-      handleStop();
-    }
-  };
-
-  const handleQueryIsSpeaking = () => {
-    return !!ttsControllerRef.current;
-  };
-
-  const handleTogglePlay = async () => {
-    const ttsController = ttsControllerRef.current;
-    if (!ttsController) return;
-
-    if (isPlaying) {
-      setIsPlaying(false);
-      setIsPaused(true);
-      await ttsController.pause();
-    } else if (isPaused) {
-      setIsPlaying(true);
-      setIsPaused(false);
-      // start for forward/backward/setvoice-paused
-      // set rate don't pause the tts
-      if (ttsController.state === 'paused') {
-        await ttsController.resume();
-      } else {
-        await ttsController.start();
-      }
-    }
-  };
-
-  const handleBackward = async () => {
-    const ttsController = ttsControllerRef.current;
-    if (ttsController) {
-      await ttsController.backward();
-    }
-  };
-
-  const handleForward = async () => {
-    const ttsController = ttsControllerRef.current;
-    if (ttsController) {
-      await ttsController.forward();
-    }
-  };
-
-  const handleStop = async () => {
-    const ttsController = ttsControllerRef.current;
-    if (ttsController) {
-      await ttsController.stop();
-      ttsControllerRef.current = null;
-      getView(bookKey)?.deselect();
-      setIsPlaying(false);
-      setShowPanel(false);
-      setShowIndicator(false);
-    }
-  };
-
-  // rate range: 0.5 - 3, 1.0 is normal speed
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const handleSetRate = useCallback(
-    throttle(async (rate: number) => {
-      const ttsController = ttsControllerRef.current;
-      if (ttsController) {
-        if (ttsController.state === 'playing') {
-          await ttsController.stop();
-          await ttsController.setRate(rate);
-          await ttsController.start();
-        } else {
-          await ttsController.setRate(rate);
-        }
-      }
-    }, 3000),
-    [],
-  );
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const handleSetVoice = useCallback(
-    throttle(async (voice: string) => {
-      const ttsController = ttsControllerRef.current;
-      if (ttsController) {
-        if (ttsController.state === 'playing') {
-          await ttsController.stop();
-          await ttsController.setVoice(voice);
-          await ttsController.start();
-        } else {
-          await ttsController.setVoice(voice);
-        }
-      }
-    }, 3000),
-    [],
-  );
-
-  const handleGetVoices = async (lang: string) => {
-    const ttsController = ttsControllerRef.current;
-    if (ttsController) {
-      return ttsController.getVoices(lang);
-    }
-    return [];
-  };
-
-  const handleGetVoiceId = () => {
-    const ttsController = ttsControllerRef.current;
-    if (ttsController) {
-      return ttsController.getVoiceId();
-    }
-    return '';
-  };
-
-  const updatePanelPosition = () => {
-    if (iconRef.current) {
-      const rect = iconRef.current.getBoundingClientRect();
-      const windowRect = document.documentElement.getBoundingClientRect();
-
-      const trianglePos = {
-        dir: 'up',
-        point: { x: rect.left + rect.width / 2, y: rect.top - 12 },
-      } as Position;
-
-      const popupPos = getPopupPosition(
-        trianglePos,
-        windowRect,
-        popupWidth,
-        popupHeight,
-        popupPadding,
-      );
-
-      setPanelPosition(popupPos);
-      setTrianglePosition(trianglePos);
-    }
-  };
-
-  const togglePopup = () => {
-    updatePanelPosition();
-    setShowPanel((prev) => !prev);
-  };
-
-  const handleDismissPopup = () => {
-    setShowPanel(false);
-  };
-
-  return (
-    <div>
-      {showPanel && (
-        <div
-          className='fixed inset-0'
-          onClick={handleDismissPopup}
-          onContextMenu={handleDismissPopup}
-        />
-      )}
-      {showIndicator && (
-        <div
-          ref={iconRef}
-          className={clsx(
-            'absolute right-6 h-12 w-12',
-            isPWA() ? 'bottom-[calc(env(safe-area-inset-bottom)+48px)]' : 'bottom-12',
-          )}
-        >
-          <TTSIcon isPlaying={isPlaying} onClick={togglePopup} />
-        </div>
-      )}
-      {showPanel && panelPosition && trianglePosition && (
-        <Popup
-          width={popupWidth}
-          height={popupHeight}
-          position={panelPosition}
-          trianglePosition={trianglePosition}
-          className='bg-base-200 absolute flex shadow-lg'
-        >
-          <TTSPanel
-            bookKey={bookKey}
-            ttsLang={ttsLang}
-            isPlaying={isPlaying}
-            onTogglePlay={handleTogglePlay}
-            onBackward={handleBackward}
-            onForward={handleForward}
-            onStop={handleStop}
-            onSetRate={handleSetRate}
-            onGetVoices={handleGetVoices}
-            onSetVoice={handleSetVoice}
-            onGetVoiceId={handleGetVoiceId}
-          />
-        </Popup>
-      )}
-    </div>
-  );
-};
-
-export default TTSControl;
@@ -1,54 +0,0 @@
-import React from 'react';
-
-type TTSIconProps = {
-  isPlaying: boolean;
-  onClick: () => void;
-};
-
-const TTSIcon: React.FC<TTSIconProps> = ({ isPlaying, onClick }) => {
-  const bars = [1, 2, 3, 4];
-
-  return (
-    <div className='relative h-full w-full cursor-pointer' onClick={onClick}>
-      <div className='absolute inset-0 overflow-hidden rounded-full bg-gradient-to-r from-blue-500 via-emerald-500 to-violet-500'>
-        <div
-          className='absolute -inset-full bg-gradient-to-r from-blue-500 via-emerald-500 to-violet-500'
-          style={{
-            animation: isPlaying ? 'moveGradient 2s alternate infinite' : 'none',
-          }}
-        />
-      </div>
-
-      <div className='absolute inset-0 flex items-center justify-center'>
-        <style>{`
-          @keyframes moveGradient {
-            0% { transform: translate(0, 0); }
-            100% { transform: translate(25%, 25%); }
-          }
-          @keyframes bounce {
-            0%, 100% { transform: scaleY(1); }
-            50% { transform: scaleY(0.6); }
-          }
-        `}</style>
-        <div className='flex items-end space-x-1'>
-          {bars.map((bar) => (
-            <div
-              key={bar}
-              className='w-1 rounded-t bg-white'
-              style={{
-                height: '16px',
-                animationName: isPlaying ? 'bounce' : 'none',
-                animationDuration: isPlaying ? `${1 + bar * 0.1}s` : '0s',
-                animationTimingFunction: 'ease-in-out',
-                animationIterationCount: 'infinite',
-                animationDelay: `${bar * 0.1}s`,
-              }}
-            />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TTSIcon;
@@ -1,164 +0,0 @@
-import clsx from 'clsx';
-import React, { useState, ChangeEvent, useEffect } from 'react';
-import { useReaderStore } from '@/store/readerStore';
-import { useTranslation } from '@/hooks/useTranslation';
-import { MdPlayCircle, MdPauseCircle, MdFastRewind, MdFastForward, MdStop } from 'react-icons/md';
-import { RiVoiceAiFill } from 'react-icons/ri';
-import { MdCheck } from 'react-icons/md';
-import { TTSVoice } from '@/services/tts';
-import { useDefaultIconSize, useResponsiveSize } from '@/hooks/useResponsiveSize';
-
-type TTSPanelProps = {
-  bookKey: string;
-  ttsLang: string;
-  isPlaying: boolean;
-  onTogglePlay: () => void;
-  onBackward: () => void;
-  onForward: () => void;
-  onStop: () => void;
-  onSetRate: (rate: number) => void;
-  onGetVoices: (lang: string) => Promise<TTSVoice[]>;
-  onSetVoice: (voice: string) => void;
-  onGetVoiceId: () => string;
-};
-
-const TTSPanel = ({
-  bookKey,
-  ttsLang,
-  isPlaying,
-  onTogglePlay,
-  onBackward,
-  onForward,
-  onStop,
-  onSetRate,
-  onGetVoices,
-  onSetVoice,
-  onGetVoiceId,
-}: TTSPanelProps) => {
-  const _ = useTranslation();
-  const { getViewSettings, setViewSettings } = useReaderStore();
-  const viewSettings = getViewSettings(bookKey);
-
-  const [voices, setVoices] = useState<TTSVoice[]>([]);
-  const [rate, setRate] = useState(viewSettings?.ttsRate ?? 1.0);
-  const [selectedVoice, setSelectedVoice] = useState(viewSettings?.ttsVoice ?? '');
-
-  const defaultIconSize = useDefaultIconSize();
-  const iconSize32 = useResponsiveSize(32);
-  const iconSize48 = useResponsiveSize(48);
-
-  const handleSetRate = (e: ChangeEvent<HTMLInputElement>) => {
-    let newRate = parseFloat(e.target.value);
-    newRate = Math.max(0.2, Math.min(3.0, newRate));
-    setRate(newRate);
-    onSetRate(newRate);
-    const viewSettings = getViewSettings(bookKey)!;
-    viewSettings.ttsRate = newRate;
-    setViewSettings(bookKey, viewSettings);
-  };
-
-  const handleSelectVoice = (voice: string) => {
-    onSetVoice(voice);
-    setSelectedVoice(voice);
-    const viewSettings = getViewSettings(bookKey)!;
-    viewSettings.ttsVoice = voice;
-    setViewSettings(bookKey, viewSettings);
-  };
-
-  useEffect(() => {
-    const voiceId = onGetVoiceId();
-    setSelectedVoice(voiceId);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    const fetchVoices = async () => {
-      const voices = await onGetVoices(ttsLang);
-      setVoices(voices);
-    };
-    fetchVoices();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ttsLang]);
-
-  return (
-    <div className='flex w-full flex-col items-center justify-center gap-2 rounded-2xl p-4'>
-      <div className='flex w-full flex-col items-center gap-0.5'>
-        <input
-          className='range'
-          type='range'
-          min={0.0}
-          max={3.0}
-          step='0.1'
-          value={rate}
-          onChange={handleSetRate}
-        />
-        <div className='grid w-full grid-cols-7 text-xs'>
-          <span className='text-center'>|</span>
-          <span className='text-center'>|</span>
-          <span className='text-center'>|</span>
-          <span className='text-center'>|</span>
-          <span className='text-center'>|</span>
-          <span className='text-center'>|</span>
-          <span className='text-center'>|</span>
-        </div>
-        <div className='grid w-full grid-cols-7 text-xs'>
-          <span className='text-center'>{_('Slow')}</span>
-          <span className='text-center'></span>
-          <span className='text-center'>1.0</span>
-          <span className='text-center'>1.5</span>
-          <span className='text-center'>2.0</span>
-          <span className='text-center'></span>
-          <span className='text-center'>{_('Fast')}</span>
-        </div>
-      </div>
-      <div className='flex items-center justify-between space-x-2'>
-        <button onClick={onBackward} className='hover:bg-base-200/75 rounded-full p-1'>
-          <MdFastRewind size={iconSize32} />
-        </button>
-        <button onClick={onTogglePlay} className='hover:bg-base-200/75 rounded-full p-1'>
-          {isPlaying ? (
-            <MdPauseCircle size={iconSize48} className='fill-primary' />
-          ) : (
-            <MdPlayCircle size={iconSize48} className='fill-primary' />
-          )}
-        </button>
-        <button onClick={onForward} className='hover:bg-base-200/75 rounded-full p-1'>
-          <MdFastForward size={iconSize32} />
-        </button>
-        <button onClick={onStop} className='hover:bg-base-200/75 rounded-full p-1'>
-          <MdStop size={iconSize32} />
-        </button>
-        <div className='dropdown dropdown-top'>
-          <button tabIndex={0} className='hover:bg-base-200/75 rounded-full p-1'>
-            <RiVoiceAiFill size={iconSize32} />
-          </button>
-          <ul
-            tabIndex={0}
-            className={clsx(
-              'dropdown-content bgcolor-base-200 no-triangle menu menu-vertical rounded-box absolute right-0 z-[1] shadow',
-              'mt-4 inline max-h-96 w-[250px] overflow-y-scroll',
-            )}
-          >
-            {voices.map((voice, index) => (
-              <li
-                key={`${index}-${voice.id}`}
-                onClick={() => !voice.disabled && handleSelectVoice(voice.id)}
-              >
-                <div className='flex items-center px-2'>
-                  <span style={{ minWidth: `${defaultIconSize}px` }}>
-                    {selectedVoice === voice.id && <MdCheck className='text-base-content' />}
-                  </span>
-                  <span className={clsx('text-base sm:text-sm', voice.disabled && 'text-gray-400')}>
-                    {voice.name}
-                  </span>
-                </div>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default TTSPanel;
@@ -29,9 +29,16 @@ export const useClickEvent = (
            if (!consumed) {
              const centerStartX = rect.left + rect.width * 0.375;
              const centerEndX = rect.left + rect.width * 0.625;
-              if (screenX >= centerStartX && screenX <= centerEndX) {
+              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 ? null : bookKey);
+                setHoveredBookKey(hoveredBookKey ? '' : bookKey);
              } else if (screenX >= rect.left + rect.width / 2) {
                viewRef.current?.goRight();
              } else if (screenX < rect.left + rect.width / 2) {
@@ -46,12 +53,6 @@ export const useClickEvent = (
          } else if (deltaY < 0) {
            viewRef.current?.prev(1);
          }
-        } else if (msg.data.type === 'iframe-mouseup') {
-          if (msg.data.button === 3) {
-            viewRef.current?.history.back();
-          } else if (msg.data.button === 4) {
-            viewRef.current?.history.forward();
-          }
        }
      }
    } else {
@@ -79,92 +80,3 @@ export const useClickEvent = (
    handleTurnPage,
  };
 };
-
-interface IframeTouch {
-  clientX: number;
-  clientY: number;
-  screenX: number;
-  screenY: number;
-}
-
-interface IframeTouchEvent {
-  targetTouches: IframeTouch[];
-}
-
-export const useTouchEvent = (
-  bookKey: string,
-  viewRef: React.MutableRefObject<FoliateView | null>,
-) => {
-  const { hoveredBookKey, setHoveredBookKey, getViewSettings } = useReaderStore();
-  const viewSettings = getViewSettings(bookKey)!;
-
-  let touchStart: IframeTouch | null = null;
-  let touchEnd: IframeTouch | null = null;
-
-  const onTouchStart = (e: IframeTouchEvent) => {
-    touchEnd = null;
-    const touch = e.targetTouches[0];
-    if (!touch) return;
-    touchStart = touch;
-  };
-
-  const onTouchMove = (e: IframeTouchEvent) => {
-    if (!touchStart) return;
-    const touch = e.targetTouches[0];
-    if (touch) {
-      touchEnd = touch;
-    }
-  };
-
-  const onTouchEnd = (e: IframeTouchEvent) => {
-    if (!touchStart) return;
-
-    const touch = e.targetTouches[0];
-    if (touch) {
-      touchEnd = touch;
-    }
-
-    const windowWidth = window.innerWidth;
-    if (touchEnd) {
-      const deltaY = touchEnd.screenY - touchStart.screenY;
-      const deltaX = touchEnd.screenX - touchStart.screenX;
-      // also check for deltaX to prevent swipe page turn from triggering the toggle
-      if (
-        deltaY < -10 &&
-        Math.abs(deltaY) > Math.abs(deltaX) &&
-        Math.abs(deltaX) < windowWidth * 0.3
-      ) {
-        // swipe up to toggle the header bar and the footer bar
-        setHoveredBookKey(hoveredBookKey ? null : bookKey);
-      }
-    }
-
-    touchStart = null;
-    touchEnd = null;
-  };
-
-  const handleTouch = (msg: MessageEvent) => {
-    if (msg.data && msg.data.bookKey === bookKey) {
-      if (msg.data.type === 'iframe-touchstart') {
-        onTouchStart(msg.data);
-      } else if (msg.data.type === 'iframe-touchmove') {
-        onTouchMove(msg.data);
-      } else if (msg.data.type === 'iframe-touchend') {
-        onTouchEnd(msg.data);
-      }
-    }
-  };
-
-  useEffect(() => {
-    // swipe touch is not compatible with scrolled mode, so only enable it in page mode
-    if (!viewSettings!.scrolled) {
-      window.addEventListener('message', handleTouch);
-      return () => {
-        window.removeEventListener('message', handleTouch);
-      };
-    } else {
-      return () => {};
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hoveredBookKey, viewRef]);
-};
@@ -7,10 +7,12 @@ import { useReaderStore } from '@/store/readerStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { deserializeConfig, serializeConfig } from '@/utils/serializer';
-import { eventDispatcher } from '@/utils/event';
 import { DEFAULT_BOOK_SEARCH_CONFIG, SYNC_PROGRESS_INTERVAL_SEC } from '@/services/constants';

-export const useProgressSync = (bookKey: string) => {
+export const useProgressSync = (
+  bookKey: string,
+  setToastMessage?: React.Dispatch<React.SetStateAction<string>>,
+) => {
  const _ = useTranslation();
  const { getConfig, setConfig } = useBookDataStore();
  const { getView } = useReaderStore();
@@ -29,7 +31,6 @@ export const useProgressSync = (bookKey: string) => {
    const compressedConfig = JSON.parse(
      serializeConfig(newConfig, settings.globalViewSettings, DEFAULT_BOOK_SEARCH_CONFIG),
    );
-    delete compressedConfig.booknotes;
    syncConfigs([compressedConfig], bookHash, 'push');
  };
  const pullConfig = (bookKey: string) => {
@@ -41,20 +42,18 @@ export const useProgressSync = (bookKey: string) => {
    if (!configSynced.current) {
      pullConfig(bookKey);
    } else {
-      if (config && config.progress && config.progress[0] > 0) {
-        pushConfig(bookKey, config);
-      }
+      pushConfig(bookKey, config);
    }
  };

  useEffect(() => {
    if (!user) return;
    pullConfig(bookKey);
-    // return () => {
-    //   if (configSynced.current) {
-    //     pushConfig(bookKey, config);
-    //   }
-    // };
+    return () => {
+      if (configSynced.current) {
+        pushConfig(bookKey, config);
+      }
+    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

@@ -99,10 +98,7 @@ export const useProgressSync = (bookKey: string) => {
          const configFraction = config!.progress![0] / config!.progress![1];
          if (syncedFraction > configFraction) {
            view?.goToFraction(syncedFraction);
-            eventDispatcher.dispatch('toast', {
-              type: 'success',
-              message: _('Reading progress synced'),
-            });
+            setToastMessage?.(_('Reading progress synced'));
          }
        }
      }
@@ -4,20 +4,17 @@ import { useEffect } from 'react';
 import { useTheme } from '@/hooks/useTheme';
 import { hasUpdater } from '@/services/environment';
 import { checkForAppUpdates } from '@/helpers/updater';
-import { useTranslation } from '@/hooks/useTranslation';
 import Reader from './components/Reader';

 export default function Page() {
-  const _ = useTranslation();
  useTheme();
  useEffect(() => {
    const doAppUpdates = async () => {
      if (hasUpdater()) {
-        await checkForAppUpdates(_);
+        await checkForAppUpdates();
      }
    };
    doAppUpdates();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return <Reader />;
@@ -30,7 +30,6 @@ export const handleMousedown = (bookKey: string, event: MouseEvent) => {
    {
      type: 'iframe-mousedown',
      bookKey,
-      button: event.button,
      screenX: event.screenX,
      screenY: event.screenY,
      clientX: event.clientX,
@@ -43,15 +42,10 @@ export const handleMousedown = (bookKey: string, event: MouseEvent) => {
 };

 export const handleMouseup = (bookKey: string, event: MouseEvent) => {
-  // we will handle mouse back and forward buttons ourselves
-  if ([3, 4].includes(event.button)) {
-    event.preventDefault();
-  }
  window.postMessage(
    {
      type: 'iframe-mouseup',
      bookKey,
-      button: event.button,
      screenX: event.screenX,
      screenY: event.screenY,
      clientX: event.clientX,
@@ -136,36 +130,3 @@ export const handleClick = (bookKey: string, event: MouseEvent) => {
    }
  }, doubleClickThreshold);
 };
-
-const handleTouchEv = (bookKey: string, event: TouchEvent, type: string) => {
-  const touch = event.targetTouches[0];
-  const touches = [];
-  if (touch) {
-    touches.push({
-      clientX: touch.clientX,
-      clientY: touch.clientY,
-      screenX: touch.screenX,
-      screenY: touch.screenY,
-    });
-  }
-  window.postMessage(
-    {
-      type: type,
-      bookKey,
-      targetTouches: touches,
-    },
-    '*',
-  );
-};
-
-export const handleTouchStart = (bookKey: string, event: TouchEvent) => {
-  handleTouchEv(bookKey, event, 'iframe-touchstart');
-};
-
-export const handleTouchMove = (bookKey: string, event: TouchEvent) => {
-  handleTouchEv(bookKey, event, 'iframe-touchmove');
-};
-
-export const handleTouchEnd = (bookKey: string, event: TouchEvent) => {
-  handleTouchEv(bookKey, event, 'iframe-touchend');
-};
@@ -1,10 +1,8 @@
 import React from 'react';
 import Image from 'next/image';
 import packageJson from '../../package.json';
+import WindowButtons from './WindowButtons';
 import { useTranslation } from '@/hooks/useTranslation';
-import { hasUpdater } from '@/services/environment';
-import { checkForAppUpdates } from '@/helpers/updater';
-import Dialog from './Dialog';

 export const setAboutDialogVisible = (visible: boolean) => {
  const dialog = document.getElementById('about_window');
@@ -17,77 +15,61 @@ export const setAboutDialogVisible = (visible: boolean) => {

 export const AboutWindow = () => {
  const _ = useTranslation();
-  const [isUpdated, setIsUpdated] = React.useState(false);
-
-  const handleCheckUpdate = async () => {
-    const update = await checkForAppUpdates(_);
-    if (!update) {
-      setIsUpdated(true);
-    }
-  };
-
  return (
-    <>
-      <Dialog
-        id='about_window'
-        isOpen={false}
-        title={_('About Readest')}
-        onClose={() => setAboutDialogVisible(false)}
-        boxClassName='sm:!w-96'
-      >
-        <div className='about-content flex h-full flex-col items-center justify-center'>
-          <div className='flex flex-col items-center px-8'>
-            <div className='mb-4'>
-              <Image src='/icon.png' alt='App Logo' className='h-24 w-24' width={64} height={64} />
-            </div>
-            <h2 className='text-2xl font-bold'>Readest</h2>
-            <p className='text-neutral-content text-sm'>
-              {_('Version {{version}}', { version: packageJson.version })}
-            </p>
-            {hasUpdater() && !isUpdated && (
-              <span className='badge badge-primary mt-2 cursor-pointer' onClick={handleCheckUpdate}>
-                {_('Check update')}
-              </span>
-            )}
-            {isUpdated && (
-              <p className='text-neutral-content mt-2 text-xs'>{_('Already the latest version')}</p>
-            )}
-          </div>
-
-          <div className='divider py-12 sm:py-2'></div>
-
-          <div className='flex flex-col items-center px-4 text-center'>
-            <p className='text-neutral-content text-sm'>
-              © {new Date().getFullYear()} Bilingify LLC. All rights reserved.
-            </p>
-            <p className='text-neutral-content mt-2 text-xs'>
-              This software is licensed under the{' '}
-              <a
-                href='https://www.gnu.org/licenses/agpl-3.0.html'
-                target='_blank'
-                rel='noopener noreferrer'
-                className='text-blue-500 underline'
-              >
-                GNU Affero General Public License v3.0
-              </a>
-              . You are free to use, modify, and distribute this software under the terms of the
-              AGPL v3 license. Please see the license for more details.
-            </p>
-            <p className='text-neutral-content mt-2 text-xs'>
-              Source code is available at{' '}
-              <a
-                href='https://github.com/readest/readest'
-                target='_blank'
-                rel='noopener noreferrer'
-                className='text-blue-500 underline'
-              >
-                GitHub
-              </a>
-              .
-            </p>
-          </div>
+    <dialog id='about_window' className='modal'>
+      <form method='dialog' className='modal-box w-96 max-w-lg p-4'>
+        <div className='dialog-header bg-base-100 sticky top-0 z-10 flex items-center justify-center p-2'>
+          <WindowButtons
+            className='window-buttons absolute right-0 flex h-full items-center'
+            showMinimize={false}
+            showMaximize={false}
+            onClose={() => setAboutDialogVisible(false)}
+          />
        </div>
-      </Dialog>
-    </>
+        <div className='flex flex-col items-center px-8'>
+          <div className='mb-4'>
+            <Image src='/icon.png' alt='App Logo' className='h-24 w-24' width={64} height={64} />
+          </div>
+          <h2 className='text-2xl font-bold'>Readest</h2>
+          <p className='text-neutral-content text-sm'>Bilingify LLC</p>
+          <span className='badge badge-primary mt-2'>
+            {_('Version {{version}}', { version: packageJson.version })}
+          </span>
+        </div>
+
+        <div className='divider'></div>
+
+        <div className='flex flex-col items-center px-4 text-center'>
+          <p className='text-neutral-content text-sm'>
+            © {new Date().getFullYear()} Bilingify LLC. All rights reserved.
+          </p>
+          <p className='text-neutral-content mt-2 text-xs'>
+            This software is licensed under the{' '}
+            <a
+              href='https://www.gnu.org/licenses/agpl-3.0.html'
+              target='_blank'
+              rel='noopener noreferrer'
+              className='text-blue-500 underline'
+            >
+              GNU Affero General Public License v3.0
+            </a>
+            . You are free to use, modify, and distribute this software under the terms of the AGPL
+            v3 license. Please see the license for more details.
+          </p>
+          <p className='text-neutral-content mt-2 text-xs'>
+            Source code is available at{' '}
+            <a
+              href='https://github.com/readest/readest'
+              target='_blank'
+              rel='noopener noreferrer'
+              className='text-blue-500 underline'
+            >
+              GitHub
+            </a>
+            .
+          </p>
+        </div>
+      </form>
+    </dialog>
  );
 };
@@ -13,7 +13,7 @@ const Alert: React.FC<{
    <div
      role='alert'
      className={clsx(
-        'alert fixed bottom-4 left-1/2 z-[100] flex -translate-x-1/2 transform items-center justify-between',
+        'alert fixed bottom-4 left-1/2 flex -translate-x-1/2 transform items-center justify-between',
        'rounded-lg bg-gray-100 p-4 shadow-2xl',
        'w-full max-w-[90vw] sm:max-w-[70vw] md:max-w-[50vw] lg:max-w-[40vw] xl:max-w-[40vw]',
      )}
@@ -3,15 +3,13 @@ import React, { useEffect, useState } from 'react';
 import Image from 'next/image';

 import { Book } from '@/types/book';
-import { BookDoc } from '@/libs/document';
 import { useEnv } from '@/context/EnvContext';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useTranslation } from '@/hooks/useTranslation';
-import { useLibraryStore } from '@/store/libraryStore';
-import { formatDate, formatLanguage, formatPublisher, formatSubject } from '@/utils/book';
-import Alert from '@/components/Alert';
+import { formatDate, formatSubject } from '@/utils/book';
+import WindowButtons from '@/components/WindowButtons';
 import Spinner from './Spinner';
-import Dialog from './Dialog';
+import { BookDoc } from '@/libs/document';

 interface BookDetailModalProps {
  book: Book;
@@ -22,11 +20,24 @@ interface BookDetailModalProps {
 const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
  const _ = useTranslation();
  const [loading, setLoading] = useState(false);
-  const [showDeleteAlert, setShowDeleteAlert] = useState(false);
  const [bookMeta, setBookMeta] = useState<BookDoc['metadata'] | null>(null);
  const { envConfig } = useEnv();
  const { settings } = useSettingsStore();
-  const { deleteBook } = useLibraryStore();
+
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isOpen, onClose]);

  useEffect(() => {
    const loadingTimeout = setTimeout(() => setLoading(true), 300);
@@ -46,15 +57,7 @@ const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
    onClose();
  };

-  const handleDelete = () => {
-    setShowDeleteAlert(true);
-  };
-
-  const confirmDelete = () => {
-    deleteBook(envConfig, book);
-    handleClose();
-    setShowDeleteAlert(false);
-  };
+  if (!isOpen) return null;

  if (!bookMeta)
    return (
@@ -66,132 +69,97 @@ const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
    );

  return (
-    <>
-      <Dialog
-        title={_('Book Details')}
-        isOpen={isOpen}
-        onClose={handleClose}
-        boxClassName='sm:min-w-[480px]'
-        contentClassName='!p-6'
-      >
-        <div className='z-50 flex w-full select-text items-center justify-center'>
-          <div className='relative w-full rounded-lg'>
-            <div className='mb-10 flex h-40 items-start'>
-              <div className='book-cover relative mr-10 aspect-[28/41] h-40 items-end shadow-lg'>
-                <Image
-                  src={book.coverImageUrl!}
-                  alt={book.title}
-                  fill={true}
-                  className='w-10 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',
-                  )}
-                >
-                  {book.title}
-                </div>
-              </div>
+    <div className='fixed inset-0 z-50 flex w-full select-text items-center justify-center'>
+      <div className='min-w-[480px] max-w-md'>
+        <div className='fixed inset-0 bg-gray-800 bg-opacity-70' onClick={handleClose} />

-              <div className='title-author flex h-40 flex-col justify-between'>
-                <div>
-                  <p className='text-base-content mb-2 line-clamp-2 break-all text-2xl font-bold'>
-                    {book.title || _('Untitled')}
-                  </p>
-                  <p className='text-neutral-content line-clamp-1'>{book.author || _('Unknown')}</p>
-                </div>
-                {window.innerWidth >= 400 && (
-                  <div className='flex flex-wrap items-center gap-x-4 gap-y-2 py-2'>
-                    <button
-                      className='btn rounded-xl bg-red-600 px-4 text-white hover:bg-red-700'
-                      onClick={handleDelete}
-                    >
-                      {_('Delete')}
-                    </button>
-                    <button className='btn btn-disabled bg-primary/25 hover:bg-primary/85 rounded-xl px-4 text-white'>
-                      {_('More Info')}
-                    </button>
-                  </div>
+        <div className='bg-base-200 relative z-50 w-full rounded-lg p-6 shadow-xl'>
+          <div className='absolute right-4 top-4 flex space-x-2'>
+            <WindowButtons
+              className='window-buttons flex'
+              showMinimize={false}
+              showMaximize={false}
+              onClose={handleClose}
+            />
+          </div>
+
+          <div className='mb-6 flex h-40 items-start'>
+            <div className='book-cover relative mr-10 aspect-[28/41] h-40 items-end shadow-lg'>
+              <Image
+                src={book.coverImageUrl!}
+                alt={book.title}
+                fill={true}
+                className='w-10 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',
                )}
+              >
+                {book.title}
              </div>
            </div>

-            {window.innerWidth < 400 && (
-              <div className='flex flex-wrap items-center gap-x-4 gap-y-2 py-2'>
-                <button
-                  className='btn rounded bg-red-600 text-white hover:bg-red-700'
-                  onClick={handleDelete}
-                >
-                  {_('Delete')}
-                </button>
-                <button className='btn btn-disabled bg-primary/25 hover:bg-primary/85 rounded px-4 text-white'>
-                  {_('More Info')}
-                </button>
+            <div className='title-author flex h-40 max-w-[60%] flex-col justify-between pr-4'>
+              <div>
+                <h2 className='text-base-content mb-2 line-clamp-2 break-all text-2xl font-bold'>
+                  {book.title || _('Untitled')}
+                </h2>
+                <p className='text-neutral-content line-clamp-1'>{book.author || _('Unknown')}</p>
              </div>
-            )}
+              <button className='btn-disabled bg-primary/25 hover:bg-primary/85 w-36 rounded px-4 py-2 text-white'>
+                {_('More Info')}
+              </button>
+            </div>
+          </div>

-            <div className='text-base-content my-4'>
-              <div className='mb-4 grid grid-cols-2 gap-4 sm:grid-cols-3'>
-                <div className='overflow-hidden'>
-                  <span className='font-bold'>{_('Publisher:')}</span>
-                  <p className='text-neutral-content line-clamp-1 text-sm'>
-                    {formatPublisher(bookMeta.publisher || '') || _('Unknown')}
-                  </p>
-                </div>
-                <div className='overflow-hidden'>
-                  <span className='font-bold'>{_('Published:')}</span>
-                  <p className='text-neutral-content max-w-28 text-ellipsis text-sm'>
-                    {formatDate(bookMeta.published) || _('Unknown')}
-                  </p>
-                </div>
-                <div className='overflow-hidden'>
-                  <span className='font-bold'>{_('Updated:')}</span>
-                  <p className='text-neutral-content text-sm'>
-                    {formatDate(book.lastUpdated) || ''}
-                  </p>
-                </div>
+          <div className='text-base-content mb-4'>
+            <div className='mb-4 grid grid-cols-3 gap-4'>
+              <div className='overflow-hidden'>
+                <span className='font-bold'>{_('Publisher:')}</span>
+                <p className='text-neutral-content line-clamp-1 text-sm'>
+                  {bookMeta.publisher || _('Unknown')}
+                </p>
+              </div>
+              <div className='overflow-hidden'>
+                <span className='font-bold'>{_('Published:')}</span>
+                <p className='text-neutral-content max-w-28 text-ellipsis text-sm'>
+                  {formatDate(bookMeta.published) || _('Unknown')}
+                </p>
+              </div>
+              <div className='overflow-hidden'>
+                <span className='font-bold'>{_('Updated:')}</span>
+                <p className='text-neutral-content text-sm'>{formatDate(book.lastUpdated) || ''}</p>
+              </div>
+            </div>

-                <div className='overflow-hidden'>
-                  <span className='font-bold'>{_('Language:')}</span>
-                  <p className='text-neutral-content text-sm'>
-                    {formatLanguage(bookMeta.language) || _('Unknown')}
-                  </p>
-                </div>
-                <div className='overflow-hidden'>
-                  <span className='font-bold'>{_('Identifier:')}</span>
-                  <p className='text-neutral-content line-clamp-1 text-sm'>
-                    {bookMeta.identifier || 'N/A'}
-                  </p>
-                </div>
-                <div className='overflow-hidden'>
-                  <span className='font-bold'>{_('Subjects:')}</span>
-                  <p className='text-neutral-content line-clamp-1 text-sm'>
-                    {formatSubject(bookMeta.subject) || _('Unknown')}
-                  </p>
-                </div>
+            <div className='grid grid-cols-3 gap-4'>
+              <div className='overflow-hidden'>
+                <span className='font-bold'>{_('Language:')}</span>
+                <p className='text-neutral-content text-sm'>{bookMeta.language || _('Unknown')}</p>
+              </div>
+              <div className='overflow-hidden'>
+                <span className='font-bold'>{_('Identifier:')}</span>
+                <p className='text-neutral-content line-clamp-1 text-sm'>
+                  {bookMeta.identifier || 'N/A'}
+                </p>
+              </div>
+              <div className='overflow-hidden'>
+                <span className='font-bold'>{_('Subjects:')}</span>
+                <p className='text-neutral-content line-clamp-1 text-sm'>
+                  {formatSubject(bookMeta.subject) || _('Unknown')}
+                </p>
              </div>
            </div>
          </div>
        </div>
-      </Dialog>
-      {showDeleteAlert && (
-        <Alert
-          title={_('Confirm Deletion')}
-          message={_('Are you sure to delete the selected books?')}
-          onClickCancel={() => {
-            setShowDeleteAlert(false);
-          }}
-          onClickConfirm={confirmDelete}
-        />
-      )}
-    </>
+      </div>
+    </div>
  );
 };

@@ -20,18 +20,14 @@ const Button: React.FC<ButtonProps> = ({
 }) => {
  return (
    <div
-      className={clsx(
-        'lg:tooltip z-50 h-8 min-h-8 w-8',
-        tooltip && `lg:tooltip-${tooltipDirection}`,
-        {
-          'tooltip-hidden': !tooltip,
-        },
-      )}
+      className={clsx('tooltip z-50', tooltip && `tooltip-${tooltipDirection}`, {
+        'tooltip-hidden': !tooltip,
+      })}
      data-tip={tooltip}
    >
      <button
        className={clsx(
-          'btn btn-ghost h-8 min-h-8 w-8 p-0',
+          'btn btn-ghost mx-2 h-8 min-h-8 w-8 p-0',
          disabled && 'btn-disabled !bg-transparent',
          className,
        )}
@@ -1,113 +0,0 @@
-import clsx from 'clsx';
-import React, { ReactNode, useEffect } from 'react';
-import { MdArrowBackIosNew } from 'react-icons/md';
-import { useResponsiveSize } from '@/hooks/useResponsiveSize';
-
-interface DialogProps {
-  id?: string;
-  isOpen: boolean;
-  children: ReactNode;
-  header?: ReactNode;
-  title?: string;
-  className?: string;
-  boxClassName?: string;
-  contentClassName?: string;
-  onClose: () => void;
-}
-
-const Dialog: React.FC<DialogProps> = ({
-  id,
-  isOpen,
-  children,
-  header,
-  title,
-  className,
-  boxClassName,
-  contentClassName,
-  onClose,
-}) => {
-  const iconSize22 = useResponsiveSize(22);
-  const handleKeyDown = (event: KeyboardEvent) => {
-    if (event.key === 'Escape') {
-      onClose();
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener('keydown', handleKeyDown);
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <dialog
-      id={id ?? 'dialog'}
-      open={isOpen}
-      className={clsx(
-        'modal sm:min-w-90 z-50 h-full w-full !bg-[rgba(0,0,0,0.2)] sm:w-full',
-        className,
-      )}
-    >
-      <div
-        className={clsx(
-          'modal-box settings-content flex h-full max-h-full w-full max-w-full flex-col rounded-none p-0 sm:rounded-2xl',
-          'sm:h-[60%] sm:w-[65%] sm:max-w-[600px]',
-          boxClassName,
-        )}
-      >
-        <div className='dialog-header bg-base-100 sticky top-2 z-10 flex items-center justify-between px-4'>
-          {header ? (
-            header
-          ) : (
-            <div className='flex h-11 w-full items-center justify-between'>
-              <button
-                tabIndex={-1}
-                onClick={onClose}
-                className={
-                  'btn btn-ghost btn-circle flex h-6 min-h-6 w-6 hover:bg-transparent focus:outline-none sm:hidden'
-                }
-              >
-                <MdArrowBackIosNew size={iconSize22} />
-              </button>
-              <div className='z-15 pointer-events-none absolute inset-0 flex h-11 items-center justify-center'>
-                <span className='line-clamp-1 text-center font-bold'>{title ?? ''}</span>
-              </div>
-              <button
-                tabIndex={-1}
-                onClick={onClose}
-                className={
-                  'bg-base-300/65 btn btn-ghost btn-circle ml-auto hidden h-6 min-h-6 w-6 focus:outline-none sm:flex'
-                }
-              >
-                <svg
-                  xmlns='http://www.w3.org/2000/svg'
-                  width='1em'
-                  height='1em'
-                  viewBox='0 0 24 24'
-                >
-                  <path
-                    fill='currentColor'
-                    d='M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z'
-                  />
-                </svg>
-              </button>
-            </div>
-          )}
-        </div>
-
-        <div
-          className={clsx(
-            'text-base-content my-2 flex-grow overflow-y-auto px-[10%]',
-            contentClassName,
-          )}
-        >
-          {children}
-        </div>
-      </div>
-    </dialog>
-  );
-};
-
-export default Dialog;
@@ -3,16 +3,14 @@ import React, { useState, isValidElement, ReactElement } from 'react';

 interface DropdownProps {
  className?: string;
-  menuClassName?: string;
  buttonClassName?: string;
  toggleButton: React.ReactNode;
-  children: ReactElement<{ setIsDropdownOpen: (isOpen: boolean) => void; menuClassName?: string }>;
+  children: ReactElement<{ setIsDropdownOpen: (isOpen: boolean) => void }>;
  onToggle?: (isOpen: boolean) => void;
 }

 const Dropdown: React.FC<DropdownProps> = ({
  className,
-  menuClassName,
  buttonClassName,
  toggleButton,
  children,
@@ -32,7 +30,7 @@ const Dropdown: React.FC<DropdownProps> = ({
  };

  const childrenWithToggle = isValidElement(children)
-    ? React.cloneElement(children, { setIsDropdownOpen, menuClassName })
+    ? React.cloneElement(children, { setIsDropdownOpen })
    : children;

  return (
@@ -44,7 +42,7 @@ const Dropdown: React.FC<DropdownProps> = ({
        <div
          tabIndex={-1}
          onClick={toggleDropdown}
-          className={clsx('dropdown-toggle', buttonClassName, isOpen && 'bg-base-300/50')}
+          className={clsx('dropdown-toggle', buttonClassName, isOpen && 'bg-base-200')}
        >
          {toggleButton}
        </div>
@@ -1,6 +1,5 @@
 import clsx from 'clsx';
 import React from 'react';
-import { useDefaultIconSize } from '@/hooks/useResponsiveSize';

 interface MenuItemProps {
  label: string;
@@ -23,21 +22,20 @@ const MenuItem: React.FC<MenuItemProps> = ({
  children,
  onClick,
 }) => {
-  const iconSize = useDefaultIconSize();
  const menuButton = (
    <button
      className={clsx(
-        'hover:bg-base-300 text-base-content flex h-10 w-full items-center justify-between rounded-md p-2',
+        'hover:bg-neutral text-base-content flex h-10 w-full items-center justify-between rounded-md p-2',
        disabled && 'btn-disabled text-gray-400',
      )}
      onClick={onClick}
      disabled={disabled}
    >
      <div className='flex items-center'>
-        {!noIcon && <span style={{ minWidth: `${iconSize}px` }}>{icon}</span>}
+        {!noIcon && <span style={{ minWidth: '20px' }}>{icon}</span>}
        <span className={clsx('ml-2 max-w-32 truncate', labelClass)}>{label}</span>
      </div>
-      {shortcut && <span className='text-neutral-content hidden text-sm sm:flex'>{shortcut}</span>}
+      {shortcut && <span className='text-neutral-content text-sm'>{shortcut}</span>}
    </button>
  );

@@ -46,7 +44,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
      <ul className='menu rounded-box m-0 p-0'>
        <li>
          <details>
-            <summary className='hover:bg-base-300 p-0 pr-3'>{menuButton}</summary>
+            <summary className='hover:bg-neutral p-0 pr-3'>{menuButton}</summary>
            {children}
          </details>
        </li>
@@ -1,25 +1,16 @@
-'use client';
-
 import { AuthProvider } from '@/context/AuthContext';
 import { EnvProvider } from '@/context/EnvContext';
 import { CSPostHogProvider } from '@/context/PHContext';
 import { SyncProvider } from '@/context/SyncContext';
-import { IconContext } from 'react-icons';
-import { useDefaultIconSize } from '@/hooks/useResponsiveSize';

-const Providers = ({ children }: { children: React.ReactNode }) => {
-  const iconSize = useDefaultIconSize();
-  return (
-    <CSPostHogProvider>
-      <EnvProvider>
-        <AuthProvider>
-          <IconContext.Provider value={{ size: `${iconSize}px` }}>
-            <SyncProvider>{children}</SyncProvider>
-          </IconContext.Provider>
-        </AuthProvider>
-      </EnvProvider>
-    </CSPostHogProvider>
-  );
-};
+const Providers = ({ children }: { children: React.ReactNode }) => (
+  <CSPostHogProvider>
+    <EnvProvider>
+      <AuthProvider>
+        <SyncProvider>{children}</SyncProvider>
+      </AuthProvider>
+    </EnvProvider>
+  </CSPostHogProvider>
+);

 export default Providers;
@@ -1,65 +1,16 @@
-import { eventDispatcher } from '@/utils/event';
 import clsx from 'clsx';
-import React, { useEffect, useRef, useState } from 'react';
+import React from 'react';

-export type ToastType = 'info' | 'success' | 'warning' | 'error';
+const Toast: React.FC<{ message: string; toastClass?: string; alertClass?: string }> = ({
+  message,
+  toastClass,
+  alertClass,
+}) => (
+  <div className={clsx('toast toast-center toast-middle', toastClass)}>
+    <div className={clsx('alert flex items-center justify-center border-0', alertClass)}>
+      <span className='whitespace-normal break-words'>{message}</span>
+    </div>
+  </div>
+);

-export const Toast = () => {
-  const [toastMessage, setToastMessage] = useState('');
-  const toastType = useRef<ToastType>('info');
-  const toastTimeout = useRef(5000);
-  const messageClass = useRef('');
-  const toastDismissTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const toastClassMap = {
-    info: 'toast-info toast-center toast-middle',
-    success: 'toast-success toast-top toast-end pt-11',
-    warning: 'toast-warning toast-top toast-end pt-11',
-    error: 'toast-error toast-top toast-end pt-11',
-  };
-  const alertClassMap = {
-    info: 'alert-primary',
-    success: 'alert-success',
-    warning: 'alert-warning',
-    error: 'alert-error',
-  };
-
-  useEffect(() => {
-    if (toastDismissTimeout.current) clearTimeout(toastDismissTimeout.current);
-    toastDismissTimeout.current = setTimeout(() => setToastMessage(''), toastTimeout.current);
-    return () => {
-      if (toastDismissTimeout.current) clearTimeout(toastDismissTimeout.current);
-    };
-  }, [toastMessage]);
-
-  const handleShowToast = async (event: CustomEvent) => {
-    const { message, type = 'info', timeout = 5000, className = '' } = event.detail;
-    setToastMessage(message);
-    toastType.current = type;
-    toastTimeout.current = timeout;
-    messageClass.current = className;
-  };
-
-  useEffect(() => {
-    eventDispatcher.on('toast', handleShowToast);
-    return () => {
-      eventDispatcher.off('toast', handleShowToast);
-    };
-  }, []);
-
-  return (
-    toastMessage && (
-      <div className={clsx('toast toast-center toast-middle', toastClassMap[toastType.current])}>
-        <div
-          className={clsx(
-            'alert flex max-w-80 items-center justify-center border-0',
-            alertClassMap[toastType.current],
-          )}
-        >
-          <span className={clsx('whitespace-normal break-words', messageClass.current)}>
-            {toastMessage}
-          </span>
-        </div>
-      </div>
-    )
-  );
-};
+export default Toast;
@@ -29,39 +29,31 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
  });

  useEffect(() => {
-    const syncSession = (
-      session: { access_token: string; refresh_token: string; user: User } | null,
-    ) => {
+    const syncSession = (session: { access_token: string; user: User } | null) => {
+      console.log('Syncing session');
      if (session) {
-        console.log('Syncing session');
-        const { access_token, refresh_token, user } = session;
-        localStorage.setItem('token', access_token);
-        localStorage.setItem('refresh_token', refresh_token);
-        localStorage.setItem('user', JSON.stringify(user));
+        const { access_token, user } = session;
        setToken(access_token);
        setUser(user);
+        localStorage.setItem('token', access_token);
+        localStorage.setItem('user', JSON.stringify(user));
      } else {
-        console.log('Clearing session');
        localStorage.removeItem('token');
-        localStorage.removeItem('refresh_token');
        localStorage.removeItem('user');
        setToken(null);
        setUser(null);
      }
    };
-    const refreshSession = async () => {
-      try {
-        await supabase.auth.refreshSession();
-      } catch {
-        syncSession(null);
-      }
+    const fetchSession = async () => {
+      const { data } = await supabase.auth.getSession();
+      syncSession(data.session);
    };

+    fetchSession();
    const { data: subscription } = supabase.auth.onAuthStateChange((_, session) => {
      syncSession(session);
    });

-    refreshSession();
    return () => {
      subscription?.subscription.unsubscribe();
    };
@@ -77,16 +69,12 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {

  const logout = async () => {
    console.log('Logging out');
-    try {
-      await supabase.auth.refreshSession();
-    } catch {
-    } finally {
-      await supabase.auth.signOut();
-      localStorage.removeItem('token');
-      localStorage.removeItem('user');
-      setToken(null);
-      setUser(null);
-    }
+    await supabase.auth.refreshSession();
+    await supabase.auth.signOut();
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    setToken(null);
+    setUser(null);
  };

  return (
@@ -2,11 +2,10 @@ import { check } from '@tauri-apps/plugin-updater';
 import { ask } from '@tauri-apps/plugin-dialog';
 import { relaunch } from '@tauri-apps/plugin-process';
 import { CHECK_UPDATE_INTERVAL_SEC } from '@/services/constants';
-import { TranslationFunc } from '@/hooks/useTranslation';

 const LAST_CHECK_KEY = 'lastAppUpdateCheck';

-export const checkForAppUpdates = async (_: TranslationFunc) => {
+export const checkForAppUpdates = async () => {
  const lastCheck = localStorage.getItem(LAST_CHECK_KEY);
  const now = Date.now();
  if (lastCheck && now - parseInt(lastCheck, 10) < CHECK_UPDATE_INTERVAL_SEC * 1000) return;
@@ -21,10 +20,10 @@ export const checkForAppUpdates = async (_: TranslationFunc) => {
      Release notes: ${update.body}
      `,
      {
-        title: _('Update Now!'),
+        title: 'Update Now!',
        kind: 'info',
-        okLabel: _('Update'),
-        cancelLabel: _('Cancel'),
+        okLabel: 'Update',
+        cancelLabel: 'Cancel',
      },
    );

@@ -32,7 +31,6 @@ export const checkForAppUpdates = async (_: TranslationFunc) => {
      console.log(`found update ${update.version} from ${update.date} with notes ${update.body}`);
      let downloaded = 0;
      let contentLength = 0;
-      let lastLogged = 0;
      await update.downloadAndInstall((event) => {
        switch (event.event) {
          case 'Started':
@@ -41,10 +39,7 @@ export const checkForAppUpdates = async (_: TranslationFunc) => {
            break;
          case 'Progress':
            downloaded += event.data.chunkLength;
-            if (downloaded - lastLogged >= 1 * 1024 * 1024) {
-              console.log(`downloaded ${downloaded} bytes from ${contentLength}`);
-              lastLogged = downloaded;
-            }
+            console.log(`downloaded ${downloaded} from ${contentLength}`);
            break;
          case 'Finished':
            console.log('download finished');
@@ -55,5 +50,4 @@ export const checkForAppUpdates = async (_: TranslationFunc) => {
      await relaunch();
    }
  }
-  return update;
 };
@@ -1,14 +0,0 @@
-import { useMediaQuery } from 'react-responsive';
-
-// use desktop size as base size
-export const useResponsiveSize = (baseSize: number) => {
-  const isPhone = useMediaQuery({ maxWidth: 480 });
-  const isTablet = useMediaQuery({ minWidth: 481, maxWidth: 1024 });
-  if (isPhone) return baseSize * 1.25;
-  if (isTablet) return baseSize * 1.15;
-  return baseSize;
-};
-
-export const useDefaultIconSize = () => {
-  return useResponsiveSize(20);
-};
@@ -30,8 +30,6 @@ const computeMaxTimestamp = (records: BookDataRecord[]): number => {
  return maxTime;
 };

-const SEVEN_DAYS_IN_MS = 7 * 24 * 60 * 60 * 1000;
-
 export function useSync(bookKey?: string) {
  const { settings } = useSettingsStore();
  const { getConfig, setConfig } = useBookDataStore();
@@ -42,19 +40,14 @@ export function useSync(bookKey?: string) {
  const [syncingNotes, setSyncingNotes] = useState(false);

  const [syncError, setSyncError] = useState<string | null>(null);
-
-  const lastSyncedBooksAt = settings.lastSyncedAtBooks ?? 0;
-  const lastSyncedConfigsAt = config?.lastSyncedAtConfig ?? settings.lastSyncedAtConfigs ?? 0;
-  const lastSyncedNotesAt = config?.lastSyncedAtNotes ?? settings.lastSyncedAtNotes ?? 0;
-
  const [lastSyncedAtBooks, setLastSyncedAtBooks] = useState<number>(
-    lastSyncedBooksAt > 0 ? lastSyncedBooksAt - SEVEN_DAYS_IN_MS : 0,
+    settings.lastSyncedAtBooks ?? 0,
  );
  const [lastSyncedAtConfigs, setLastSyncedAtConfigs] = useState<number>(
-    lastSyncedConfigsAt > 0 ? lastSyncedConfigsAt - SEVEN_DAYS_IN_MS : 0,
+    config?.lastSyncedAtConfig ?? settings.lastSyncedAtConfigs ?? 0,
  );
  const [lastSyncedAtNotes, setLastSyncedAtNotes] = useState<number>(
-    lastSyncedNotesAt > 0 ? lastSyncedNotesAt - SEVEN_DAYS_IN_MS : 0,
+    config?.lastSyncedAtNotes ?? settings.lastSyncedAtNotes ?? 0,
  );

  const [syncing, setSyncing] = useState(false);
@@ -2,8 +2,7 @@

 import { useEffect, useState } from 'react';
 import { ThemeCode } from '@/utils/style';
-import { themes, Palette } from '@/styles/themes';
-import { isWebAppPlatform } from '@/services/environment';
+import { themes } from '@/styles/themes';

 export type ThemeMode = 'auto' | 'light' | 'dark';

@@ -46,7 +45,6 @@ export const useTheme = () => {
      bg: defaultPalette['base-100'],
      fg: defaultPalette['base-content'],
      primary: defaultPalette.primary,
-      palette: defaultPalette,
    };
  });

@@ -78,24 +76,16 @@ export const useTheme = () => {
    const isDarkMode = themeMode === 'dark' || (themeMode === 'auto' && systemIsDarkMode);
    const theme = themes.find((t) => t.name === themeColor);
    const palette = isDarkMode ? theme!.colors.dark : theme!.colors.light;
-    const bg = palette['base-100'];
-    const fg = palette['base-content'];
-    const primary = palette.primary;
-    if (isWebAppPlatform()) {
-      document.querySelector('meta[name="theme-color"]')?.setAttribute('content', bg);
-    }
-    setThemeCode({ bg, fg, primary, palette });
+    setThemeCode({
+      bg: palette['base-100'],
+      fg: palette['base-content'],
+      primary: palette.primary,
+    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [themeMode, themeColor, isDarkMode]);

  const updateThemeMode = (mode: ThemeMode) => setThemeMode(mode);
  const updateThemeColor = (color: string) => setThemeColor(color);
-  const updateAppTheme = (color: keyof Palette) => {
-    if (isWebAppPlatform()) {
-      const { palette } = themeCode;
-      document.querySelector('meta[name="theme-color"]')?.setAttribute('content', palette[color]);
-    }
-  };

  return {
    themeMode,
@@ -104,6 +94,5 @@ export const useTheme = () => {
    isDarkMode,
    updateThemeMode,
    updateThemeColor,
-    updateAppTheme,
  };
 };
@@ -1,8 +1,6 @@
 import '@/i18n/i18n';
 import { useTranslation as _useTranslation } from 'react-i18next';

-export type TranslationFunc = (key: string, options?: Record<string, number | string>) => string;
-
 export const useTranslation = (namespace: string = 'translation') => {
  const { t } = _useTranslation(namespace);

@@ -1,285 +0,0 @@
-import { md5 } from 'js-md5';
-import { randomMd5 } from '@/utils/misc';
-import { LRUCache } from '@/utils/lru';
-
-const EDGE_SPEECH_URL =
-  'wss://speech.platform.bing.com/consumer/speech/synthesize/readaloud/edge/v1';
-const EDGE_API_TOKEN = '6A5AA1D4EAFF4E9FB37E23D68491D6F4';
-const EDGE_TTS_VOICES = {
-  'af-ZA': ['af-ZA-AdriNeural', 'af-ZA-WillemNeural'],
-  'am-ET': ['am-ET-AmehaNeural', 'am-ET-MekdesNeural'],
-  'ar-AE': ['ar-AE-FatimaNeural', 'ar-AE-HamdanNeural'],
-  'ar-BH': ['ar-BH-AliNeural', 'ar-BH-LailaNeural'],
-  'ar-DZ': ['ar-DZ-AminaNeural', 'ar-DZ-IsmaelNeural'],
-  'ar-EG': ['ar-EG-SalmaNeural', 'ar-EG-ShakirNeural'],
-  'ar-IQ': ['ar-IQ-BasselNeural', 'ar-IQ-RanaNeural'],
-  'ar-JO': ['ar-JO-SanaNeural', 'ar-JO-TaimNeural'],
-  'ar-KW': ['ar-KW-FahedNeural', 'ar-KW-NouraNeural'],
-  'ar-LB': ['ar-LB-LaylaNeural', 'ar-LB-RamiNeural'],
-  'ar-LY': ['ar-LY-ImanNeural', 'ar-LY-OmarNeural'],
-  'ar-MA': ['ar-MA-JamalNeural', 'ar-MA-MounaNeural'],
-  'ar-OM': ['ar-OM-AbdullahNeural', 'ar-OM-AyshaNeural'],
-  'ar-QA': ['ar-QA-AmalNeural', 'ar-QA-MoazNeural'],
-  'ar-SA': ['ar-SA-HamedNeural', 'ar-SA-ZariyahNeural'],
-  'ar-SY': ['ar-SY-AmanyNeural', 'ar-SY-LaithNeural'],
-  'ar-TN': ['ar-TN-HediNeural', 'ar-TN-ReemNeural'],
-  'ar-YE': ['ar-YE-MaryamNeural', 'ar-YE-SalehNeural'],
-  'az-AZ': ['az-AZ-BabekNeural', 'az-AZ-BanuNeural'],
-  'bg-BG': ['bg-BG-BorislavNeural', 'bg-BG-KalinaNeural'],
-  'bn-BD': ['bn-BD-NabanitaNeural', 'bn-BD-PradeepNeural'],
-  'bn-IN': ['bn-IN-BashkarNeural', 'bn-IN-TanishaaNeural'],
-  'bs-BA': ['bs-BA-GoranNeural', 'bs-BA-VesnaNeural'],
-  'ca-ES': ['ca-ES-EnricNeural', 'ca-ES-JoanaNeural'],
-  'cs-CZ': ['cs-CZ-AntoninNeural', 'cs-CZ-VlastaNeural'],
-  'cy-GB': ['cy-GB-AledNeural', 'cy-GB-NiaNeural'],
-  'da-DK': ['da-DK-ChristelNeural', 'da-DK-JeppeNeural'],
-  'de-AT': ['de-AT-IngridNeural', 'de-AT-JonasNeural'],
-  'de-CH': ['de-CH-JanNeural', 'de-CH-LeniNeural'],
-  'de-DE': [
-    'de-DE-AmalaNeural',
-    'de-DE-ConradNeural',
-    'de-DE-FlorianMultilingualNeural',
-    'de-DE-KatjaNeural',
-    'de-DE-KillianNeural',
-    'de-DE-SeraphinaMultilingualNeural',
-  ],
-  'el-GR': ['el-GR-AthinaNeural', 'el-GR-NestorasNeural'],
-  'en-AU': ['en-AU-NatashaNeural', 'en-AU-WilliamNeural'],
-  'en-CA': ['en-CA-ClaraNeural', 'en-CA-LiamNeural'],
-  'en-GB': [
-    'en-GB-LibbyNeural',
-    'en-GB-MaisieNeural',
-    'en-GB-RyanNeural',
-    'en-GB-SoniaNeural',
-    'en-GB-ThomasNeural',
-  ],
-  'en-HK': ['en-HK-SamNeural', 'en-HK-YanNeural'],
-  'en-IE': ['en-IE-ConnorNeural', 'en-IE-EmilyNeural'],
-  'en-IN': ['en-IN-NeerjaExpressiveNeural', 'en-IN-NeerjaNeural', 'en-IN-PrabhatNeural'],
-  'en-KE': ['en-KE-AsiliaNeural', 'en-KE-ChilembaNeural'],
-  'en-NG': ['en-NG-AbeoNeural', 'en-NG-EzinneNeural'],
-  'en-NZ': ['en-NZ-MitchellNeural', 'en-NZ-MollyNeural'],
-  'en-PH': ['en-PH-JamesNeural', 'en-PH-RosaNeural'],
-  'en-SG': ['en-SG-LunaNeural', 'en-SG-WayneNeural'],
-  'en-TZ': ['en-TZ-ElimuNeural', 'en-TZ-ImaniNeural'],
-  'en-US': [
-    'en-US-AnaNeural',
-    'en-US-AndrewMultilingualNeural',
-    'en-US-AndrewNeural',
-    'en-US-AriaNeural',
-    'en-US-AvaMultilingualNeural',
-    'en-US-AvaNeural',
-    'en-US-BrianMultilingualNeural',
-    'en-US-BrianNeural',
-    'en-US-ChristopherNeural',
-    'en-US-EmmaMultilingualNeural',
-    'en-US-EmmaNeural',
-    'en-US-EricNeural',
-    'en-US-GuyNeural',
-    'en-US-JennyNeural',
-    'en-US-MichelleNeural',
-    'en-US-RogerNeural',
-    'en-US-SteffanNeural',
-  ],
-  'es-AR': ['es-AR-ElenaNeural', 'es-AR-TomasNeural'],
-  'es-BO': ['es-BO-MarceloNeural', 'es-BO-SofiaNeural'],
-  'es-CL': ['es-CL-CatalinaNeural', 'es-CL-LorenzoNeural'],
-  'es-CO': ['es-CO-GonzaloNeural', 'es-CO-SalomeNeural'],
-  'es-CR': ['es-CR-JuanNeural', 'es-CR-MariaNeural'],
-  'es-CU': ['es-CU-BelkysNeural', 'es-CU-ManuelNeural'],
-  'es-DO': ['es-DO-EmilioNeural', 'es-DO-RamonaNeural'],
-  'es-EC': ['es-EC-AndreaNeural', 'es-EC-LuisNeural'],
-  'es-ES': ['es-ES-AlvaroNeural', 'es-ES-ElviraNeural', 'es-ES-XimenaNeural'],
-  'es-US': ['es-US-AlonsoNeural', 'es-US-PalomaNeural'],
-  'fr-BE': ['fr-BE-CharlineNeural', 'fr-BE-GerardNeural'],
-  'fr-CA': ['fr-CA-AntoineNeural', 'fr-CA-JeanNeural', 'fr-CA-SylvieNeural', 'fr-CA-ThierryNeural'],
-  'fr-CH': ['fr-CH-ArianeNeural', 'fr-CH-FabriceNeural'],
-  'fr-FR': [
-    'fr-FR-DeniseNeural',
-    'fr-FR-EloiseNeural',
-    'fr-FR-HenriNeural',
-    'fr-FR-RemyMultilingualNeural',
-    'fr-FR-VivienneMultilingualNeural',
-  ],
-  'ja-JP': ['ja-JP-KeitaNeural', 'ja-JP-NanamiNeural'],
-  'ko-KR': ['ko-KR-HyunsuMultilingualNeural', 'ko-KR-InJoonNeural', 'ko-KR-SunHiNeural'],
-  'pt-BR': ['pt-BR-AntonioNeural', 'pt-BR-FranciscaNeural', 'pt-BR-ThalitaMultilingualNeural'],
-  'pt-PT': ['pt-PT-DuarteNeural', 'pt-PT-RaquelNeural'],
-  'zh-CN': [
-    'zh-CN-XiaoxiaoNeural',
-    'zh-CN-XiaoyiNeural',
-    'zh-CN-YunjianNeural',
-    'zh-CN-YunxiNeural',
-    'zh-CN-YunxiaNeural',
-    'zh-CN-YunyangNeural',
-    'zh-CN-liaoning-XiaobeiNeural',
-    'zh-CN-shaanxi-XiaoniNeural',
-  ],
-  'zh-HK': ['zh-HK-HiuGaaiNeural', 'zh-HK-HiuMaanNeural', 'zh-HK-WanLungNeural'],
-  'zh-TW': ['zh-TW-HsiaoChenNeural', 'zh-TW-HsiaoYuNeural', 'zh-TW-YunJheNeural'],
-};
-
-const genVoiceList = (voices: Record<string, string[]>) => {
-  return Object.entries(voices).flatMap(([lang, voices]) => {
-    return voices.map((id) => {
-      const name = id.replace(`${lang}-`, '').replace('Neural', '');
-      return { name, id, lang };
-    });
-  });
-};
-
-export interface EdgeTTSPayload {
-  lang: string;
-  text: string;
-  voice: string;
-  rate: number;
-  pitch: number;
-}
-
-const hashPayload = (payload: EdgeTTSPayload): string => {
-  const base = JSON.stringify(payload);
-  return md5(base);
-};
-
-export class EdgeSpeechTTS {
-  static voices = genVoiceList(EDGE_TTS_VOICES);
-  private static audioCache = new LRUCache<string, AudioBuffer>(200);
-  private audioContext = new AudioContext();
-
-  constructor() {}
-
-  async #fetchEdgeSpeechWs({ lang, text, voice, rate }: EdgeTTSPayload): Promise<Response> {
-    const connectId = randomMd5();
-    const url = `${EDGE_SPEECH_URL}?ConnectionId=${connectId}&TrustedClientToken=${EDGE_API_TOKEN}`;
-    const date = new Date().toString();
-    const configHeaders = {
-      'Content-Type': 'application/json; charset=utf-8',
-      Path: 'speech.config',
-      'X-Timestamp': date,
-    };
-    const contentHeaders = {
-      'Content-Type': 'application/ssml+xml',
-      Path: 'ssml',
-      'X-RequestId': connectId,
-      'X-Timestamp': date,
-    };
-    const configContent = JSON.stringify({
-      context: {
-        synthesis: {
-          audio: {
-            metadataoptions: { sentenceBoundaryEnabled: false, wordBoundaryEnabled: true },
-            outputFormat: 'audio-24khz-48kbitrate-mono-mp3',
-          },
-        },
-      },
-    });
-
-    const genSSML = (lang: string, text: string, voice: string, rate: number) => {
-      return `
-        <speak version="1.0" xml:lang="${lang}">
-          <voice name="${voice}">
-            <prosody rate="${rate}">
-              ${text}
-            </prosody>
-          </voice>
-        </speak>
-      `;
-    };
-
-    const genSendContent = (headerObj: Record<string, string>, content: string) => {
-      let header = '';
-      for (const key of Object.keys(headerObj)) {
-        header += `${key}: ${headerObj[key]}\r\n`;
-      }
-      return `${header}\r\n${content}`;
-    };
-
-    const getHeadersAndData = (message: string) => {
-      const lines = message.split('\n');
-      const headers: Record<string, string> = {};
-      let body = '';
-      let lineIdx = 0;
-
-      for (lineIdx = 0; lineIdx < lines.length; lineIdx++) {
-        const line = lines[lineIdx]!.trim();
-        if (!line) break;
-        const separatorIndex = line.indexOf(':');
-        if (separatorIndex === -1) continue;
-        const key = line.slice(0, separatorIndex).trim();
-        const value = line.slice(separatorIndex + 1).trim();
-        headers[key] = value;
-      }
-
-      for (lineIdx = lineIdx + 1; lineIdx < lines.length; lineIdx++) {
-        body += lines[lineIdx] + '\n';
-      }
-
-      return { headers, body };
-    };
-
-    const ssml = genSSML(lang, text, voice, rate);
-    const content = genSendContent(contentHeaders, ssml);
-    const config = genSendContent(configHeaders, configContent);
-
-    return new Promise((resolve, reject) => {
-      const ws = new WebSocket(url);
-      ws.binaryType = 'arraybuffer';
-
-      let audioData = new ArrayBuffer(0);
-
-      ws.addEventListener('open', () => {
-        ws.send(config);
-        ws.send(content);
-      });
-
-      ws.addEventListener('message', (event: MessageEvent) => {
-        if (typeof event.data === 'string') {
-          const { headers } = getHeadersAndData(event.data);
-          if (headers['Path'] === 'turn.end') {
-            ws.close();
-            if (!audioData.byteLength) {
-              return reject(new Error('No audio data received.'));
-            }
-            const res = new Response(audioData);
-            resolve(res);
-          }
-        } else if (event.data instanceof ArrayBuffer) {
-          const dataView = new DataView(event.data);
-          const headerLength = dataView.getInt16(0);
-          if (event.data.byteLength > headerLength + 2) {
-            const newBody = event.data.slice(2 + headerLength);
-            const merged = new Uint8Array(audioData.byteLength + newBody.byteLength);
-            merged.set(new Uint8Array(audioData), 0);
-            merged.set(new Uint8Array(newBody), audioData.byteLength);
-            audioData = merged.buffer;
-          }
-        }
-      });
-
-      ws.addEventListener('error', () => {
-        ws.close();
-        reject(new Error('WebSocket error occurred.'));
-      });
-    });
-  }
-
-  async create(payload: EdgeTTSPayload): Promise<Response> {
-    return this.#fetchEdgeSpeechWs(payload);
-  }
-
-  async createAudio(payload: EdgeTTSPayload): Promise<AudioBuffer> {
-    const cacheKey = hashPayload(payload);
-    if (EdgeSpeechTTS.audioCache.has(cacheKey)) {
-      return EdgeSpeechTTS.audioCache.get(cacheKey)!;
-    }
-    try {
-      const res = await this.create(payload);
-      const arrayBuffer = await res.arrayBuffer();
-      const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer.slice(0));
-      EdgeSpeechTTS.audioCache.set(cacheKey, audioBuffer);
-      return audioBuffer;
-    } catch (error) {
-      throw error;
-    }
-  }
-}
--- a/Show More
+++ b/Show More