Bump update of tauri and plugins

Update features list in README
Support book notes synchronization
2024-12-24 23:56:47 +01:00 · 2024-12-24 23:13:58 +01:00 · 2024-12-24 23:09:15 +01:00 · 2024-12-24 20:09:25 +01:00 · 2024-12-24 19:25:42 +01:00 · 2024-12-24 18:02:39 +01:00
110 changed files with 5187 additions and 3256 deletions
@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Share an idea or suggestion
+title: 'FR: [a handful of words describing the FR]'
+labels: enhancement
+assignees: ''
+---
+
+**Does your feature request involve difficulty completing a task? Please describe.**
+A clear and concise description of what the problem is. Ex. I think it takes too many steps to [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you'd like to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any additional context or screenshots about the feature request here.
@@ -0,0 +1,38 @@
+---
+name: Report a bug
+about: Report a bug or a functional regression
+title: 'Ex: In DarkMode, a blank square appears in bottom right corner while scrolling'
+labels: ['type: bug']
+assignees: ''
+---
+
+## Bug Description
+
+A clear and concise description of what the current behavior is.
+Please also add **screenshots** of the existing application.
+
+**Example:**
+
+```
+In DarkMode, when scrollbar are displayed (for example on Companies page, with enough companies in the list), we see a blank square in the bottom right corner
+[screenshot]
+```
+
+## Expected behavior
+
+A clear and concise description of what the expected behavior is.
+
+**Example:**
+
+```
+The blank square should be transparent (invisible)
+```
+
+## Technical inputs
+
+**Example:**
+
+```
+- We are displaying custom scrollbars that disappear when the user is not scrolling. See ScrollWrapper.
+- Probably fixable with CSS
+```
@@ -0,0 +1,141 @@
+name: Release Readest
+
+on:
+  workflow_dispatch:
+  release:
+    types: [published]
+
+jobs:
+  create-release:
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    outputs:
+      release_id: ${{ steps.create-release.outputs.result }}
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: setup node
+        uses: actions/setup-node@v3
+      - name: get version
+        run: echo "PACKAGE_VERSION=$(node -p "require('./apps/readest-app/package.json').version")" >> $GITHUB_ENV
+      - name: create release
+        id: create-release
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const { data } = await github.rest.repos.getLatestRelease({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+            })
+            return data.id
+
+  build-tauri:
+    needs: create-release
+    permissions:
+      contents: write
+    strategy:
+      fail-fast: false
+      matrix:
+        config:
+          - os: ubuntu-latest
+            arch: x86_64
+            rust_target: x86_64-unknown-linux-gnu
+          - os: macos-latest
+            arch: aarch64
+            rust_target: x86_64-apple-darwin,aarch64-apple-darwin
+          - os: windows-latest
+            arch: x86_64
+            rust_target: x86_64-pc-windows-msvc
+
+    runs-on: ${{ matrix.config.os }}
+    timeout-minutes: 30
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: initialize git submodules
+        run: git submodule update --init --recursive
+
+      - name: setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.14.4
+
+      - name: setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: install rimraf
+        run: npm install -g rimraf
+
+      - name: install dependencies
+        run: pnpm install
+
+      - name: copy pdfjs-dist to public directory
+        run: pnpm --filter @readest/readest-app setup-pdfjs
+
+      - name: install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          targets: ${{ matrix.config.rust_target }}
+
+      - uses: Swatinem/rust-cache@v2
+        with:
+          key: ${{ matrix.config.os }}-cargo-${{ hashFiles('apps/readest-app/src-tauri/Cargo.lock') }}
+          workspaces: apps/readest-app/src-tauri -> target
+
+      - 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_APP_PLATFORM=tauri" >> .env.local
+
+      - name: copy .env.local to apps/readest-app
+        run: cp .env.local apps/readest-app/.env.local
+
+      - name: install dependencies (ubuntu only)
+        if: matrix.config.os == 'ubuntu-latest'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libgtk-3-dev libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf
+
+      - uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAURI_SIGNING_PRIVATE_KEY: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY }}
+          TAURI_SIGNING_PRIVATE_KEY_PASSWORD: ${{ secrets.TAURI_SIGNING_PRIVATE_KEY_PASSWORD }}
+          APPLE_CERTIFICATE: ${{ secrets.APPLE_CERTIFICATE }}
+          APPLE_CERTIFICATE_PASSWORD: ${{ secrets.APPLE_CERTIFICATE_PASSWORD }}
+          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY }}
+          APPLE_ID: ${{ secrets.APPLE_ID }}
+          APPLE_PASSWORD: ${{ secrets.APPLE_PASSWORD }}
+          APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
+        with:
+          projectPath: apps/readest-app
+          releaseId: ${{ needs.create-release.outputs.release_id }}
+          args: ${{ matrix.config.os == 'macos-latest' && '--target universal-apple-darwin' || '' }}
+
+  publish-release:
+    permissions:
+      contents: write
+    runs-on: ubuntu-latest
+    needs: [create-release, build-tauri]
+
+    steps:
+      - name: publish release
+        id: publish-release
+        uses: actions/github-script@v6
+        env:
+          release_id: ${{ needs.create-release.outputs.release_id }}
+        with:
+          script: |
+            github.rest.repos.updateRelease({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              release_id: process.env.release_id,
+              draft: false,
+              prerelease: false
+            })
@@ -0,0 +1,23 @@
+name: Deploy to vercel on merge
+on:
+  push:
+    branches:
+      - main
+permissions:
+  contents: write
+  deployments: write
+  pull-requests: write
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: 'true'
+      - uses: amondnet/vercel-action@v25
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          vercel-args: '--prod'
+          vercel-org-id: ${{ secrets.ORG_ID}}
+          vercel-project-id: ${{ secrets.PROJECT_ID}}
@@ -0,0 +1,25 @@
+name: Create vercel preview URL on pull request
+on:
+  pull_request:
+    branches: [main, master]
+permissions:
+  contents: write
+  deployments: write
+  pull-requests: write
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: 'true'
+      - uses: amondnet/vercel-action@v25
+        id: vercel-deploy
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          vercel-org-id: ${{ secrets.ORG_ID}}
+          vercel-project-id: ${{ secrets.PROJECT_ID}}
+      - name: preview-url
+        run: |
+          echo ${{ steps.vercel-deploy.outputs.preview-url }}
@@ -1,6 +1,6 @@
 [submodule "packages/foliate-js"]
 	path = packages/foliate-js
-	url = git@github.com:johnfactotum/foliate-js.git
+	url = https://github.com/chrox/foliate-js.git
 [submodule "packages/tauri"]
 	path = packages/tauri
-	url = git@github.com:chrox/tauri.git
+	url = https://github.com/chrox/tauri.git
@@ -0,0 +1,97 @@
+# Contribution Guidelines
+
+When contributing to `Readest`, whether on GitHub or in other community spaces:
+
+- Be respectful, civil, and open-minded.
+- Before opening a new pull request, try searching through the [issue tracker](https://github.com/chrox/readest/issues) for known issues or fixes.
+- If you want to make code changes based on your personal opinion(s), make sure you open an issue first describing the changes you want to make, and open a pull request only when your suggestions get approved by maintainers.
+
+## How to Contribute
+
+### Prerequisites
+
+In order to not waste your time implementing a change that has already been declined, or is generally not needed, start by [opening an issue](https://github.com/chrox/readest/issues/new/choose) describing the problem you would like to solve.
+
+For the best experience to build Readest for yourself, use a recent version of Node.js and Rust. Refer to the [Tauri documentation](https://v2.tauri.app/start/prerequisites/) for details on setting up the development environment prerequisites on different platforms.
+
+Basically you need to install or update the following development tools:
+
+- **Node.js** and **pnpm** for Next.js development
+- **Rust** and **Cargo** for Tauri development
+
+```bash
+nvm install v22
+nvm use v22
+npm install -g pnpm
+rustup update
+```
+
+### Getting Started
+
+To get started with Readest, follow these steps to clone and build the project.
+
+#### 1. Clone the Repository
+
+```bash
+git clone https://github.com/chrox/readest.git
+cd readest
+git submodule update --init --recursive
+```
+
+#### 2. Install Dependencies
+
+```bash
+# might need to rerun this when code is updated
+pnpm install
+# copy pdfjs-dist to Next.js public directory
+pnpm --filter @readest/readest-app setup-pdfjs
+```
+
+#### 3. Verify Dependencies Installation
+
+To confirm that all dependencies are correctly installed, run the following command:
+
+```bash
+pnpm tauri info
+```
+
+This command will display information about the installed Tauri dependencies and configuration on your platform. Note that the output may vary depending on the operating system and environment setup. Please review the output specific to your platform for any potential issues.
+
+For Windows targets, “Build Tools for Visual Studio 2022” (or a higher edition of Visual Studio) and the “Desktop development with C++” workflow must be installed. For Windows ARM64 targets, the “VS 2022 C++ ARM64 build tools” and "C++ Clang Compiler for Windows" components must be installed. And make sure `clang` can be found in the path by adding `C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools\VC\Tools\Llvm\x64\bin` for example in the environment variable `Path`.
+
+#### 4. Build for Development
+
+```bash
+pnpm tauri dev
+```
+
+#### 5. Build for Production
+
+```bash
+pnpm tauri build
+```
+
+Now you're all setup and can start implementing your changes.
+
+### Implement your changes
+
+This project is a monorepo. The code for the `readest-app` is in the `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 |
+| `pnpm build-web` | Builds the web app                                 |
+
+### When you're done
+
+Check that your code follows the project's style guidelines by running:
+
+```bash
+pnpm build
+```
+
+Please also make a manual, functional test of your changes. When all that's done, it's time to file a pull request to upstream and fill out the title and body appropriately.
+
+## Credits
+
+This documented was inspired by the contributing guidelines for [cloudflare/wrangler2](https://github.com/cloudflare/wrangler2/blob/main/CONTRIBUTING.md).
@@ -1,27 +1,113 @@
-# Readest
+<div align="center">
+  <a href="https://readest.com?utm_source=github&utm_medium=referral&utm_campaign=readme" target="_blank">
+    <img src="https://github.com/chrox/readest/blob/main/apps/readest-app/src-tauri/icons/icon.png?raw=true" alt="Readest Logo" width="20%" />
+  </a>
+  <h1>Readest</h1>
+  <br>

-Readest is an open-source ebook reading software designed for immersive and deep reading experiences. It supports EPUB and PDF document formats, and with Tauri v2, Readest is cross-platform, running seamlessly on macOS, Windows, and Linux.
+[Readest][link-website] is an open-source ebook reader designed for immersive and deep reading experiences. Built as a modern rewrite of [Foliate](https://github.com/johnfactotum/foliate), it leverages [Next.js 15](https://github.com/vercel/next.js) and [Tauri v2](https://github.com/tauri-apps/tauri) to offer a seamless cross-platform experience on macOS, Windows, Linux and Web, with support for mobile platforms coming soon.
+
+[![Website][badge-website]][link-website]
+[![Web App][badge-web-app]][link-web-readest]
+[![OS][badge-platforms]][link-website]
+[![][badge-discord]][link-discord]
+<br>
+[![AGPL Licence][badge-license]](LICENSE)
+[![Latest release][badge-release]][link-gh-releases]
+[![Last commit][badge-last-commit]][link-gh-commits]
+[![Commits][badge-commit-activity]][link-gh-pulse]
+
+</div>
+
+<p align="center">
+  <a href="#features">Features</a> •
+  <a href="#planned-features">Planned Features</a> •
+  <a href="#screenshots">Screenshots</a> •
+  <a href="#downloads">Downloads</a> •
+  <a href="#getting-started">Getting Started</a> •
+  <a href="#contributors">Contributors</a> •
+  <a href="#license">License</a>
+</p>
+
+<div align="center">
+  <a href="https://readest.com" target="_blank">
+    <img src="./data/screenshots/landing_preview.png" alt="Readest Banner" width="100%" />
+  </a>
+</div>

 ## Features

- **EPUB and PDF Support**: Enjoy both EPUB and PDF formats, making Readest versatile for all your reading needs.
- **Cross-Platform Compatibility**: Runs on macOS, Windows, and Linux with Tauri v2.
- **Immersive Reading Experience**: Supports advanced reading features like note-taking, highlighting, and progress syncing.
- **Optimized Performance**: Readest is lightweight, ensuring smooth performance even with large files.
- **Customizable Interface**: Built with daisyUI for a modern and user-friendly UI.
+<div align="left">✅ Implemented</div>
+
+| **Feature**                             | **Description**                                                                    | **Status** |
+| --------------------------------------- | ---------------------------------------------------------------------------------- | ---------- |
+| **Multi-Format Support**                | Support EPUB, MOBI, KF8 (AZW3), FB2, CBZ, PDF (experimental)                       | ✅         |
+| **Scroll/Page View Modes**              | Switch between scrolling or paginated reading modes.                               | ✅         |
+| **Full-Text Search**                    | Search across the entire book to find relevant sections.                           | ✅         |
+| **Annotations and Highlighting**        | Add highlights, bookmarks, and notes to enhance your reading experience.           | ✅         |
+| **Excerpt Text for Note-Taking**        | Easily excerpt text from books for detailed notes and analysis.                    | ✅         |
+| **Dictionary/Wikipedia Lookup**         | Instantly look up words and terms when reading.                                    | ✅         |
+| **Translate with DeepL**                | Translate selected text instantly using DeepL for accurate translations.           | ✅         |
+| **[Parallel Read][link-parallel-read]** | Read two books or documents simultaneously in a split-screen view.                 | ✅         |
+| **Customize Font and Layout**           | Adjust font, layout, theme mode, and theme colors for a personalized experience.   | ✅         |
+| **File Association and Open With**      | Quickly open files in Readest in your file browser with one-click.                 | ✅         |
+| **Sync across Platforms**               | Synchronize reading progress, notes, and bookmarks across all supported platforms. | ✅         |
+
+## 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.                                         | 🛠           |
+| **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. 😊

 ## Screenshots

+![Annotations](./data/screenshots/annotations.png)
+
+![DeepL](./data/screenshots/deepl.png)
+
+![Footnote](./data/screenshots/footnote_popover.png)
+
+![Wikipedia](./data/screenshots/wikipedia_vertical.png)
+
+![Dark Mode](./data/screenshots/dark_mode.png)
+
+---
+
+## Downloads
+
+The Readest app is available for download! 🥳 🚀
+
+- macOS : Search for "Readest" on the [macOS App Store][link-macos-appstore].
+- Windows / Linux: Visit [https://readest.com][link-website] or the [Releases on GitHub][link-gh-releases].
+- Web: Visit [https://web.readest.com][link-web-readest].
+- iOS / Android: coming soon 👀
+
 ## Requirements

 - **Node.js** and **pnpm** for Next.js development
- **Rust and Cargo** for Tauri development
+- **Rust** and **Cargo** for Tauri development

-For the best experience, use a recent version of Node.js and Rust. Refer to the [Tauri documentation](https://v2.tauri.app/start/prerequisites/) for details on setting up the development environment prerequisites on different platforms.
+For the best experience to build Readest for yourself, use a recent version of Node.js and Rust. Refer to the [Tauri documentation](https://v2.tauri.app/start/prerequisites/) for details on setting up the development environment prerequisites on different platforms.

 ```bash
 nvm install v22
 nvm use v22
+npm install -g pnpm
 rustup update
 ```

@@ -40,7 +126,7 @@ git submodule update --init --recursive
 ### 2. Install Dependencies

 ```bash
-npm install -g pnpm
+# might need to rerun this when code is updated
 pnpm install
 # copy pdfjs-dist to Next.js public directory
 pnpm --filter @readest/readest-app setup-pdfjs
@@ -58,7 +144,7 @@ This command will display information about the installed Tauri dependencies and

 For Windows targets, “Build Tools for Visual Studio 2022” (or a higher edition of Visual Studio) and the “Desktop development with C++” workflow must be installed. For Windows ARM64 targets, the “VS 2022 C++ ARM64 build tools” and "C++ Clang Compiler for Windows" components must be installed. And make sure `clang` can be found in the path by adding `C:\Program Files (x86)\Microsoft Visual Studio\2022\BuildTools\VC\Tools\Llvm\x64\bin` for example in the environment variable `Path`.

-### 4. Build the Development
+### 4. Build for Development

 ```bash
 pnpm tauri dev
@@ -70,14 +156,45 @@ pnpm tauri dev
 pnpm tauri build
 ```

-## Contributing
+## Contributors

-Readest is open-source, and contributions are welcome! Feel free to open issues, suggest features, or submit pull requests. Please review our contributing guidelines before you start.
+Readest is open-source, and contributions are welcome! Feel free to open issues, suggest features, or submit pull requests. Please **review our [contributing guidelines](CONTRIBUTING.md) before you start**. We also welcome you to join our [Discord][link-discord] community for either support or contributing guidance.
+
+<a href="https://github.com/chrox/readest/graphs/contributors">
+  <p align="left">
+    <img width="100" src="https://contrib.rocks/image?repo=chrox/readest" alt="A table of avatars from the project's contributors" />
+  </p>
+</a>

 ## License

-This project is licensed under the AGPL V3 License. See the LICENSE file for details.
+Readest is free software: you can redistribute it and/or modify it under the terms of the [GNU Affero General Public License](https://www.gnu.org/licenses/agpl-3.0.html) as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. See the [LICENSE](LICENSE) file for details.
+
+The following 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.

 ---

-Happy reading with Readest!
+<div align="center" style="color: gray;">Happy reading with Readest!</div>
+
+[badge-website]: https://img.shields.io/badge/website-readest.com-orange
+[badge-web-app]: https://img.shields.io/badge/read%20online-web.readest.com-orange
+[badge-license]: https://img.shields.io/github/license/chrox/readest?color=teal
+[badge-release]: https://img.shields.io/github/release/chrox/readest?color=green
+[badge-platforms]: https://img.shields.io/badge/OS-macOS%2C%20Windows%2C%20Linux%2C%20Web-green
+[badge-last-commit]: https://img.shields.io/github/last-commit/chrox/readest?color=green
+[badge-commit-activity]: https://img.shields.io/github/commit-activity/m/chrox/readest
+[badge-discord]: https://img.shields.io/discord/1314226120886976544?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
+[link-macos-appstore]: https://apps.apple.com/app/apple-store/id6738622779?pt=127463130&ct=github&mt=8
+[link-website]: https://readest.com?utm_source=github&utm_medium=referral&utm_campaign=readme
+[link-web-readest]: https://web.readest.com
+[link-gh-releases]: https://github.com/chrox/readest/releases
+[link-gh-commits]: https://github.com/chrox/readest/commits/main
+[link-gh-pulse]: https://github.com/chrox/readest/pulse
+[link-discord]: https://discord.gg/gntyVNk3BJ
+[link-parallel-read]: https://readest.com/#parallel-read
+[link-koreader]: https://github.com/koreader/koreader
@@ -1,3 +1,6 @@
 PDFJS_BUILD_PATH=../../packages/foliate-js/node_modules/pdfjs-dist/legacy/build
 PDFJS_FONTS_PATH=../../packages/foliate-js/node_modules/pdfjs-dist
 PDFJS_STYLE_PATH=../../packages/foliate-js/vendor/pdfjs
+
+NEXT_PUBLIC_DEV_SUPABASE_URL=https://gxkhxxxeapexynpouyjz.supabase.co
+NEXT_PUBLIC_DEV_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imd4a2h4eHhlYXBleHlucG91eWp6Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzQ0MzAwNTksImV4cCI6MjA1MDAwNjA1OX0.jhinkQsimQoidsg_U59YD5ROw4PmMJQNKuyXbr4TiQA
@@ -0,0 +1 @@
+NEXT_PUBLIC_APP_PLATFORM=tauri
@@ -0,0 +1 @@
+NEXT_PUBLIC_APP_PLATFORM=web
@@ -7,7 +7,7 @@ const internalHost = process.env.TAURI_DEV_HOST || 'localhost';
 const nextConfig = {
  // Ensure Next.js uses SSG instead of SSR
  // https://nextjs.org/docs/pages/building-your-application/deploying/static-exports
-  output: '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: {
@@ -19,6 +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 nextConfig;
@@ -1,66 +1,80 @@
 {
  "name": "@readest/readest-app",
-  "version": "0.7.9",
+  "version": "0.8.5",
  "private": true,
  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "dotenv -e .env.tauri -- next dev",
+    "build": "dotenv -e .env.tauri -- next build",
+    "start": "dotenv -e .env.tauri -- next start",
+    "dev-web": "dotenv -e .env.web -- next dev",
+    "build-web": "dotenv -e .env.web -- next build",
+    "start-web": "dotenv -e .env.web -- next start",
    "lint": "next lint",
    "tauri": "tauri",
    "prepare-public-vendor": "mkdirp ./public/vendor/pdfjs",
-    "copy-pdfjs-js": "dotenv -- cross-var cpx \"%PDFJS_BUILD_PATH%/pdf*\" ./public/vendor/pdfjs",
-    "copy-pdfjs-fonts": "dotenv -- cross-var cpx \"%PDFJS_FONTS_PATH%/{cmaps,standard_fonts}/*\" ./public/vendor/pdfjs",
-    "copy-pdfjs-css": "dotenv -- cross-var cpx \"%PDFJS_STYLE_PATH%/{annotation_layer_builder,text_layer_builder}.css\" ./public/vendor/pdfjs",
-    "copy-pdfjs": "pnpm copy-pdfjs-js && pnpm copy-pdfjs-fonts && pnpm copy-pdfjs-css",
+    "copy-pdfjs-js": "cpx \"../../packages/foliate-js/node_modules/pdfjs-dist/legacy/build/{pdf.worker.min.mjs,pdf.mjs,pdf.d.mts}\" ./public/vendor/pdfjs",
+    "copy-pdfjs-fonts": "cpx \"../../packages/foliate-js/node_modules/pdfjs-dist/{cmaps,standard_fonts}/*\" ./public/vendor/pdfjs",
+    "copy-flatten-pdfjs-annotation-layer-css": "npx postcss \"../../packages/foliate-js/vendor/pdfjs/annotation_layer_builder.css\" --no-map -u postcss-nested > ./public/vendor/pdfjs/annotation_layer_builder.css",
+    "copy-flatten-pdfjs-text-layer-css": "npx postcss \"../../packages/foliate-js/vendor/pdfjs/text_layer_builder.css\" --no-map -u postcss-nested > ./public/vendor/pdfjs/text_layer_builder.css",
+    "copy-flatten-pdfjs-css": "pnpm copy-flatten-pdfjs-annotation-layer-css && pnpm copy-flatten-pdfjs-text-layer-css",
+    "copy-pdfjs": "pnpm copy-pdfjs-js && pnpm copy-pdfjs-fonts && pnpm copy-flatten-pdfjs-css",
    "setup-pdfjs": "pnpm prepare-public-vendor && pnpm copy-pdfjs",
-    "build-win-x64": "tauri build --target i686-pc-windows-msvc --bundles nsis",
-    "build-win-arm64": "tauri build --target aarch64-pc-windows-msvc --bundles nsis",
-    "build-linux-x64": "tauri build --target x86_64-unknown-linux-gnu --bundles appimage",
-    "build-macos-universial": "dotenv -e .env.apple-nonstore.local -- tauri build -t universal-apple-darwin --bundles dmg",
-    "build-macos-universial-appstore": "dotenv -e .env.apple-appstore.local -- tauri build -t universal-apple-darwin --bundles app --config src-tauri/tauri.appstore.conf.json",
-    "build-macos-universial-appstore-dev": "dotenv -e .env.apple-appstore-dev.local -- tauri build -t universal-apple-darwin --bundles app --config src-tauri/tauri.appstore-dev.conf.json",
-    "release-macos-universial-appstore": "dotenv -e .env.apple-appstore.local -- bash scripts/release-mac-appstore.sh"
+    "build-win-x64": "dotenv -e .env.tauri.local -- tauri build --target i686-pc-windows-msvc --bundles nsis",
+    "build-win-arm64": "dotenv -e .env.tauri.local -- tauri build --target aarch64-pc-windows-msvc --bundles nsis",
+    "build-linux-x64": "dotenv -e .env.tauri.local -- tauri build --target x86_64-unknown-linux-gnu --bundles appimage",
+    "build-macos-universial": "dotenv -e .env.tauri.local -e .env.apple-nonstore.local -- tauri build -t universal-apple-darwin --bundles dmg",
+    "build-macos-universial-appstore": "dotenv -e .env.tauri.local -e .env.apple-appstore.local -- tauri build -t universal-apple-darwin --bundles app --config src-tauri/tauri.appstore.conf.json",
+    "build-macos-universial-appstore-dev": "dotenv -e .env.tauri.local -e .env.apple-appstore-dev.local -- tauri build -t universal-apple-darwin --bundles app --config src-tauri/tauri.appstore-dev.conf.json",
+    "release-macos-universial-appstore": "dotenv -e .env.tauri.local -e .env.apple-appstore.local -- bash scripts/release-mac-appstore.sh"
  },
  "dependencies": {
+    "@fabianlars/tauri-plugin-oauth": "2",
+    "@supabase/auth-ui-react": "^0.4.7",
+    "@supabase/auth-ui-shared": "^0.1.8",
+    "@supabase/supabase-js": "^2.47.7",
    "@tauri-apps/api": "2.1.1",
-    "@tauri-apps/plugin-dialog": "^2.0.1",
-    "@tauri-apps/plugin-fs": "^2.0.2",
-    "@tauri-apps/plugin-http": "^2.0.1",
-    "@tauri-apps/plugin-log": "^2.0.0",
-    "@tauri-apps/plugin-os": "^2.0.0",
-    "@tauri-apps/plugin-shell": "~2.0.1",
-    "@tauri-apps/plugin-updater": "^2.0.0",
+    "@tauri-apps/plugin-cli": "^2.2.0",
+    "@tauri-apps/plugin-dialog": "^2.2.0",
+    "@tauri-apps/plugin-fs": "^2.2.0",
+    "@tauri-apps/plugin-http": "^2.2.0",
+    "@tauri-apps/plugin-log": "^2.2.0",
+    "@tauri-apps/plugin-os": "^2.2.0",
+    "@tauri-apps/plugin-process": "^2.2.0",
+    "@tauri-apps/plugin-shell": "~2.2.0",
+    "@tauri-apps/plugin-updater": "^2.3.0",
    "@zip.js/zip.js": "^2.7.53",
    "clsx": "^2.1.1",
+    "cors": "^2.8.5",
    "cssbeautify": "^0.3.1",
-    "epubjs": "^0.3.93",
    "foliate-js": "workspace:*",
    "js-md5": "^0.8.3",
-    "next": "15.0.3",
+    "next": "15.1.0",
    "posthog-js": "^1.194.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
    "react-icons": "^5.3.0",
    "tinycolor2": "^1.6.0",
    "zustand": "5.0.1"
  },
  "devDependencies": {
    "@tauri-apps/cli": "2.1.0",
+    "@types/cors": "^2.8.17",
    "@types/cssbeautify": "^0.3.5",
    "@types/node": "^22.10.1",
    "@types/react": "18.3.12",
    "@types/react-dom": "18.3.1",
    "@types/tinycolor2": "^1.4.6",
    "autoprefixer": "^10.4.20",
-    "cpx": "^1.5.0",
-    "cross-var": "^1.1.0",
+    "cpx2": "^8.0.0",
    "daisyui": "^4.12.14",
    "dotenv-cli": "^7.4.4",
    "eslint": "^9.16.0",
    "eslint-config-next": "15.0.3",
    "mkdirp": "^3.0.1",
+    "node-env-run": "^4.0.2",
    "postcss": "^8.4.49",
+    "postcss-cli": "^11.0.0",
+    "postcss-nested": "^7.0.2",
    "raw-loader": "^4.0.2",
    "tailwindcss": "^3.4.15",
    "typescript": "^5.7.2"
@@ -31,6 +31,8 @@ tauri-plugin-os = "2.0.1"
 tauri-plugin-http = "2.0.3"
 tauri-plugin-devtools = "2.0.0"
 tauri-plugin-shell = "2"
+tauri-plugin-process = "2"
+tauri-plugin-oauth = "2"
 [patch.crates-io]
 tauri = { path = "../../../packages/tauri/crates/tauri" }

@@ -39,8 +41,6 @@ cocoa = "0.25"
 objc = "0.2.7"
 rand = "0.8"

-[target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
-tauri-plugin-updater = "2"
-
 [target.'cfg(any(target_os = "macos", windows, target_os = "linux"))'.dependencies]
+tauri-plugin-cli = "2"
 tauri-plugin-updater = "2"
@@ -54,6 +54,12 @@
    "core:window:allow-minimize",
    "core:window:allow-start-dragging",
    "core:window:allow-toggle-maximize",
-    "shell:default"
+    "shell:default",
+    "updater:default",
+    "process:default",
+    "process:allow-restart",
+    "cli:default",
+    "oauth:allow-start",
+    "oauth:allow-cancel"
  ]
 }
@@ -6,37 +6,76 @@ extern crate cocoa;
 #[macro_use]
 extern crate objc;

+#[cfg(target_os = "macos")]
+mod menu;
 #[cfg(target_os = "macos")]
 mod tauri_traffic_light_positioner_plugin;

 #[cfg(target_os = "macos")]
-use {
-    tauri::menu::{SubmenuBuilder, HELP_SUBMENU_ID},
-    tauri::TitleBarStyle,
-    tauri_plugin_shell::ShellExt,
-};
+use tauri::TitleBarStyle;

+use std::path::PathBuf;
+use tauri::{command, Window};
+use tauri::{AppHandle, Emitter, Manager, Url};
 use tauri::{WebviewUrl, WebviewWindowBuilder};
+use tauri_plugin_dialog;
+use tauri_plugin_fs::FsExt;
+use tauri_plugin_oauth::start;

-fn handle_menu_event(app: &tauri::AppHandle, event: &tauri::menu::MenuEvent) {
-    if event.id() == "privacy_policy" {
-        if let Err(e) = app.shell().open("https://readest.com/privacy-policy", None) {
-            eprintln!("Failed to open privacy policy: {}", e);
+#[cfg(desktop)]
+use tauri::Listener;
+
+#[cfg(desktop)]
+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) {
+            eprintln!("Failed to allow file in fs_scope: {}", e);
+        } else {
+            println!("Allowed file in fs_scope: {:?}", file);
        }
-    } else if event.id() == "report_issue" {
-        if let Err(e) = app.shell().open("mailto:support@bilingify.com", None) {
-            eprintln!("Failed to open mail client: {}", e);
-        }
-    } else if event.id() == "readest_help" {
-        if let Err(e) = app.shell().open("https://readest.com/support", None) {
-            eprintln!("Failed to open support page: {}", e);
+        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);
        }
    }
 }

+#[cfg(desktop)]
+fn set_window_open_with_files(app: &AppHandle, files: Vec<PathBuf>) {
+    let files = files
+        .into_iter()
+        .map(|f| {
+            let file = f.to_string_lossy().replace("\\", "\\\\");
+            format!("\"{file}\"",)
+        })
+        .collect::<Vec<_>>()
+        .join(",");
+    let window = app.get_webview_window("main").unwrap();
+    let script = format!("window.OPEN_WITH_FILES = [{}];", files);
+    if let Err(e) = window.eval(&script) {
+        eprintln!("Failed to set open files variable: {}", e);
+    }
+}
+
+#[command]
+async fn start_server(window: Window) -> Result<u16, String> {
+    start(move |url| {
+        // Because of the unprotected localhost port, you must verify the URL here.
+        // Preferebly send back only the token, or nothing at all if you can handle everything else in Rust.
+        let _ = window.emit("redirect_uri", url);
+    })
+    .map_err(|err| err.to_string())
+}
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
    let builder = tauri::Builder::default()
+        .plugin(tauri_plugin_updater::Builder::new().build())
+        .plugin(tauri_plugin_oauth::init())
+        .invoke_handler(tauri::generate_handler![start_server])
        .plugin(tauri_plugin_shell::init())
        .plugin(tauri_plugin_http::init())
        .plugin(tauri_plugin_os::init())
@@ -47,10 +86,41 @@ pub fn run() {
    let builder = builder.plugin(tauri_traffic_light_positioner_plugin::init());

    builder
-        .setup(|app| {
+        .setup(|#[allow(unused_variables)] app| {
+            #[cfg(desktop)]
+            {
+                let mut files = Vec::new();
+                // NOTICE: `args` may include URL protocol (`your-app-protocol://`)
+                // or arguments (`--`) if your app supports them.
+                // files may aslo be passed as `file://path/to/file`
+                for maybe_file in std::env::args().skip(1) {
+                    // skip flags like -f or --flag
+                    if maybe_file.starts_with("-") {
+                        continue;
+                    }
+                    // handle `file://` path urls and skip other urls
+                    if let Ok(url) = Url::parse(&maybe_file) {
+                        if let Ok(path) = url.to_file_path() {
+                            files.push(path);
+                        } else {
+                            files.push(PathBuf::from(maybe_file))
+                        }
+                    } else {
+                        files.push(PathBuf::from(maybe_file))
+                    }
+                }
+                if !files.is_empty() {
+                    let app_handle = app.handle().clone();
+                    allow_file_in_scopes(&app_handle, files.clone());
+                    app.listen("window-ready", move |_| {
+                        println!("Window is ready, proceeding to handle files.");
+                        set_window_open_with_files(&app_handle, files.clone());
+                    });
+                }
+            }
+            #[cfg(desktop)]
+            app.handle().plugin(tauri_plugin_cli::init())?;
            #[cfg(desktop)]
-            app.handle()
-                .plugin(tauri_plugin_updater::Builder::new().build())?;
            if cfg!(debug_assertions) {
                app.handle().plugin(
                    tauri_plugin_log::Builder::default()
@@ -59,7 +129,6 @@ pub fn run() {
                )?;
            }
            let win_builder = WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
-                .title("")
                .inner_size(800.0, 600.0)
                .resizable(true)
                .maximized(true);
@@ -67,35 +136,41 @@ pub fn run() {
            #[cfg(target_os = "macos")]
            let win_builder = win_builder
                .decorations(true)
-                .title_bar_style(TitleBarStyle::Overlay);
+                .title_bar_style(TitleBarStyle::Overlay).title("");

            #[cfg(not(target_os = "macos"))]
-            let win_builder = win_builder.decorations(false).transparent(true);
+            let win_builder = win_builder.decorations(false).transparent(true).title("Readest");

            win_builder.build().unwrap();
+            // let win = win_builder.build().unwrap();
+            // win.open_devtools();

            #[cfg(target_os = "macos")]
-            {
-                let global_menu = app.menu().unwrap();
-                if let Some(item) = global_menu.get(HELP_SUBMENU_ID) {
-                    global_menu.remove(&item)?;
-                }
-                global_menu.append(
-                    &SubmenuBuilder::new(app, "Help")
-                        .text("privacy_policy", "Privacy Policy")
-                        .separator()
-                        .text("report_issue", "Report An Issue...")
-                        .text("readest_help", "Readest Help")
-                        .build()?,
-                )?;
+            menu::setup_macos_menu(&app.handle())?;

-                app.on_menu_event(move |app, event| {
-                    handle_menu_event(app, &event);
-                });
-            }
+            app.handle().emit("window-ready", {}).unwrap();

            Ok(())
        })
-        .run(tauri::generate_context!())
-        .expect("error while running tauri application");
+        .build(tauri::generate_context!())
+        .expect("error while running tauri application")
+        .run(
+            #[allow(unused_variables)]
+            |app_handle, event| {
+                #[cfg(any(target_os = "macos", target_os = "ios"))]
+                if let tauri::RunEvent::Opened { urls } = event {
+                    let files = urls
+                        .into_iter()
+                        .filter_map(|url| url.to_file_path().ok())
+                        .collect::<Vec<_>>();
+
+                    let app_handler_clone = app_handle.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());
+                    });
+                }
+            },
+        );
 }
@@ -0,0 +1,43 @@
+use tauri::menu::MenuEvent;
+use tauri::menu::{SubmenuBuilder, HELP_SUBMENU_ID};
+use tauri::AppHandle;
+use tauri_plugin_shell::ShellExt;
+
+pub fn setup_macos_menu(app: &AppHandle) -> tauri::Result<()> {
+    let global_menu = app.menu().unwrap();
+
+    if let Some(item) = global_menu.get(HELP_SUBMENU_ID) {
+        global_menu.remove(&item)?;
+    }
+
+    global_menu.append(
+        &SubmenuBuilder::new(app, "Help")
+            .text("privacy_policy", "Privacy Policy")
+            .separator()
+            .text("report_issue", "Report An Issue...")
+            .text("readest_help", "Readest Help")
+            .build()?,
+    )?;
+
+    app.on_menu_event(|app, event| {
+        handle_menu_event(app, &event);
+    });
+
+    Ok(())
+}
+
+pub fn handle_menu_event(app: &AppHandle, event: &MenuEvent) {
+    if event.id() == "privacy_policy" {
+        if let Err(e) = app.shell().open("https://readest.com/privacy-policy", None) {
+            eprintln!("Failed to open privacy policy: {}", e);
+        }
+    } else if event.id() == "report_issue" {
+        if let Err(e) = app.shell().open("mailto:support@bilingify.com", None) {
+            eprintln!("Failed to open mail client: {}", e);
+        }
+    } else if event.id() == "readest_help" {
+        if let Err(e) = app.shell().open("https://readest.com/support", None) {
+            eprintln!("Failed to open support page: {}", e);
+        }
+    }
+}
@@ -13,9 +13,9 @@
    "windows": [],
    "security": {
      "csp": {
-        "default-src": "'self' 'unsafe-inline' blob: customprotocol: asset: http://asset.localhost ipc: http://ipc.localhost https://fonts.gstatic.com",
-        "connect-src": "'self' blob: asset: http://asset.localhost ipc: http://ipc.localhost https://*.sentry.io https://*.posthog.com https://*.deepl.com https://*.wikipedia.org https://*.wiktionary.org",
-        "img-src": "'self' blob: data: asset: http://asset.localhost",
+        "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",
        "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"
@@ -23,7 +23,7 @@
      "assetProtocol": {
        "enable": true,
        "scope": {
-          "allow": ["$RESOURCE/**", "$DOCUMENT/**/*", "$APPDATA/**/*", "$TEMP/**/*"],
+          "allow": ["$RESOURCE/**", "$APPDATA/**/*", "$TEMP/**/*"],
          "deny": []
        }
      }
@@ -49,14 +49,83 @@
    "macOS": {
      "minimumSystemVersion": "12.0"
    },
+    "fileAssociations": [
+      {
+        "name": "epub",
+        "ext": ["epub"],
+        "description": "EPUB file",
+        "mimeType": "application/epub+zip",
+        "role": "Viewer"
+      },
+      {
+        "name": "mobi",
+        "ext": ["mobi"],
+        "description": "MOBI file",
+        "mimeType": "application/x-mobipocket-ebook",
+        "role": "Viewer"
+      },
+      {
+        "name": "azw",
+        "ext": ["azw", "azw3"],
+        "description": "AZW file",
+        "mimeType": "application/vnd.amazon.ebook",
+        "role": "Viewer"
+      },
+      {
+        "name": "fb2",
+        "ext": ["fb2"],
+        "description": "FB2 file",
+        "mimeType": "application/x-fictionbook+xml",
+        "role": "Viewer"
+      },
+      {
+        "name": "cbz",
+        "ext": ["cbz"],
+        "description": "CBZ file",
+        "mimeType": "application/vnd.comicbook+zip",
+        "role": "Viewer"
+      },
+      {
+        "name": "pdf",
+        "ext": ["pdf"],
+        "description": "PDF file",
+        "mimeType": "application/pdf",
+        "role": "Viewer"
+      }
+    ],
    "createUpdaterArtifacts": true
  },
  "plugins": {
    "fs": {
      "requireLiteralLeadingDot": false
    },
+    "cli": {
+      "description": "Readest CLI",
+      "args": [
+        {
+          "name": "file1",
+          "index": 1,
+          "takesValue": true
+        },
+        {
+          "name": "file2",
+          "index": 2,
+          "takesValue": true
+        },
+        {
+          "name": "file3",
+          "index": 3,
+          "takesValue": true
+        },
+        {
+          "name": "file4",
+          "index": 4,
+          "takesValue": true
+        }
+      ]
+    },
    "updater": {
-      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDNDMDdERDIyMTQ1QzE5NUQKUldSZEdWd1VJdDBIUE50UXVDeHZtUXVyb1lnNUtVUFVKS0Fva2FDRVc0K0NubWpmajlxY2I1bCsK",
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEU0OTAxMURGQkUzQjFENTQKUldSVUhUdSszeEdRNUExdmFkWnlvYWNYNG5wamkxMmUxRk5SejlMOTJVd28yNXlVTDh6Wld4OC8K",
      "endpoints": ["https://github.com/chrox/readest/releases/latest/download/latest.json"]
    }
  }
@@ -0,0 +1,24 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { handleAuthCallback } from '@/helpers/auth';
+import { useAuth } from '@/context/AuthContext';
+
+export default function AuthCallback() {
+  const router = useRouter();
+  const { login } = useAuth();
+
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  const hash = window.location.hash || '';
+  const params = new URLSearchParams(hash.slice(1));
+
+  const accessToken = params.get('access_token');
+  const refreshToken = params.get('refresh_token');
+  const next = params.get('next') ?? '/';
+
+  handleAuthCallback({ accessToken, refreshToken, next, login, navigate: router.push });
+
+  return null;
+}
@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useTheme } from '@/hooks/useTheme';
+
+export default function AuthErrorPage() {
+  const router = useRouter();
+  useTheme();
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      router.push('/auth');
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  }, [router]);
+
+  return (
+    <div className='bg-base-200/50 text-base-content hero h-screen items-center justify-center'>
+      <div className='hero-content text-neutral-content text-center'>
+        <div className='max-w-md'>
+          <h1 className='mb-5 text-5xl font-bold'>Authentication Error</h1>
+          <p className='mb-5'>
+            Something went wrong during the authentication process. Please try again.
+          </p>
+          <p className='mb-5'>You will be redirected to the login page shortly...</p>
+          <button className='btn btn-primary rounded-xl' onClick={() => router.push('/auth')}>
+            Go to Login
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,187 @@
+'use client';
+import clsx from 'clsx';
+import { useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+
+import { Auth } from '@supabase/auth-ui-react';
+import { ThemeSupa } from '@supabase/auth-ui-shared';
+import { FcGoogle } from 'react-icons/fc';
+import { FaApple } from 'react-icons/fa';
+import { VscAzure } from 'react-icons/vsc';
+import { FaGithub } from 'react-icons/fa';
+
+import { useAuth } from '@/context/AuthContext';
+import { supabase } from '@/utils/supabase';
+import { useTheme } from '@/hooks/useTheme';
+import { isTauriAppPlatform } from '@/services/environment';
+import { open } from '@tauri-apps/plugin-shell';
+import { start, cancel, onUrl, onInvalidUrl } from '@fabianlars/tauri-plugin-oauth';
+import { handleAuthCallback } from '@/helpers/auth';
+
+type OAuthProvider = 'google' | 'apple' | 'azure' | 'github';
+
+interface ProviderLoginProp {
+  provider: OAuthProvider;
+  handleSignIn: (provider: OAuthProvider) => void;
+  Icon: React.ElementType;
+  label: string;
+}
+
+const ProviderLogin: React.FC<ProviderLoginProp> = ({ provider, handleSignIn, Icon, label }) => {
+  return (
+    <button
+      onClick={() => handleSignIn(provider)}
+      className={clsx(
+        'mb-2 flex w-64 items-center justify-center rounded border p-2.5',
+        'bg-base-100 border-gray-300 shadow-sm transition hover:bg-gray-50',
+      )}
+    >
+      <Icon size={20} />
+      <span className='text-neutral-content/70 px-2 text-sm'>{label}</span>
+    </button>
+  );
+};
+
+export default function AuthPage() {
+  const router = useRouter();
+  const { login } = useAuth();
+  const { isDarkMode } = useTheme();
+  const [port, setPort] = useState<number | null>(null);
+  const isOAuthServerRunning = useRef(false);
+
+  const signIn = async (provider: OAuthProvider) => {
+    if (!supabase) {
+      throw new Error('No backend connected');
+    }
+    supabase.auth.signOut();
+    const { data, error } = await supabase.auth.signInWithOAuth({
+      provider,
+      options: {
+        skipBrowserRedirect: true,
+        redirectTo: `http://localhost:${port}`,
+      },
+    });
+
+    if (error) {
+      console.error('Authentication error:', error);
+      return;
+    }
+    open(data.url);
+  };
+
+  const startOAuthServer = async () => {
+    try {
+      const port = await start();
+      setPort(port);
+      console.log(`OAuth server started on port ${port}`);
+
+      await onUrl((url) => {
+        console.log('Received OAuth URL:', url);
+        const hashMatch = url.match(/#(.*)/);
+        if (hashMatch) {
+          const hash = hashMatch[1];
+          const params = new URLSearchParams(hash);
+          const accessToken = params.get('access_token');
+          const refreshToken = params.get('refresh_token');
+          const next = params.get('next') ?? '/';
+          handleAuthCallback({ accessToken, refreshToken, next, login, navigate: router.push });
+        }
+      });
+
+      await onInvalidUrl((url) => {
+        console.log('Received invalid OAuth URL:', url);
+      });
+    } catch (error) {
+      console.error('Error starting OAuth server:', error);
+    }
+  };
+
+  const stopOAuthServer = async () => {
+    try {
+      if (port) {
+        await cancel(port);
+        console.log('OAuth server stopped');
+      }
+    } catch (error) {
+      console.error('Error stopping OAuth server:', error);
+    }
+  };
+
+  useEffect(() => {
+    if (!isTauriAppPlatform()) return;
+    if (isOAuthServerRunning.current) return;
+    isOAuthServerRunning.current = true;
+
+    startOAuthServer();
+    return () => {
+      isOAuthServerRunning.current = false;
+      stopOAuthServer();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    const { data: subscription } = supabase.auth.onAuthStateChange((_event, session) => {
+      if (session?.access_token && session.user) {
+        login(session.access_token, session.user);
+        router.push('/library');
+      }
+    });
+
+    return () => {
+      subscription?.subscription.unsubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [router]);
+
+  return isTauriAppPlatform() ? (
+    <div className='flex pt-11'>
+      <div style={{ maxWidth: '420px', margin: 'auto', padding: '2rem' }}>
+        <ProviderLogin
+          provider='google'
+          handleSignIn={signIn}
+          Icon={FcGoogle}
+          label='Sign in with Google'
+        />
+        <ProviderLogin
+          provider='apple'
+          handleSignIn={signIn}
+          Icon={FaApple}
+          label='Sign in with Apple'
+        />
+        <ProviderLogin
+          provider='azure'
+          handleSignIn={signIn}
+          Icon={VscAzure}
+          label='Sign in with Azure'
+        />
+        <ProviderLogin
+          provider='github'
+          handleSignIn={signIn}
+          Icon={FaGithub}
+          label='Sign in with GitHub'
+        />
+        <hr className='my-3 mt-6 w-64 border-t border-gray-200' />
+        <Auth
+          supabaseClient={supabase}
+          appearance={{ theme: ThemeSupa }}
+          theme={isDarkMode ? 'dark' : 'light'}
+          magicLink={true}
+          providers={[]}
+          redirectTo={`http://localhost:${port}`}
+        />
+      </div>
+    </div>
+  ) : (
+    <div style={{ maxWidth: '420px', margin: 'auto', padding: '2rem' }}>
+      <Auth
+        supabaseClient={supabase}
+        appearance={{ theme: ThemeSupa }}
+        theme={isDarkMode ? 'dark' : 'light'}
+        magicLink={true}
+        providers={['google', 'apple', 'azure', 'github']}
+        redirectTo='/auth/callback'
+      />
+    </div>
+  );
+}
@@ -1,42 +1,44 @@
-'use client';
-
 import * as React from 'react';
-import { usePathname } from 'next/navigation';
-import { AuthProvider } from '@/context/AuthContext';
-import { EnvProvider } from '@/context/EnvContext';
-import { CSPostHogProvider } from '@/context/PHContext';
-import { useTheme } from '@/hooks/useTheme';
+import Providers from '@/components/Providers';
+
 import '../styles/globals.css';
 import '../styles/fonts.css';

+const url = 'https://web.readest.com/';
+const title = 'Readest — Where You Read, Digest and Get Insight';
+const description =
+  'Discover Readest, the ultimate online ebook reader for immersive and organized reading. ' +
+  'Enjoy seamless access to your digital library, powerful tools for highlighting, bookmarking, ' +
+  'and note-taking, and support for multiple book views. ' +
+  'Perfect for deep reading, analysis, and understanding. Explore now!';
+const previewImage = 'https://cdn.readest.com/images/open_graph_preview_read_now.png';
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
-  useTheme();
-  const pathname = usePathname();
-  React.useEffect(() => {
-    document.documentElement.setAttribute('data-page', pathname.replace('/', '') || 'default');
-  }, [pathname]);
-
-  React.useEffect(() => {
-    // TODO: disabled for now
-    // if (process.env['NODE_ENV'] === 'production') {
-    //   document.oncontextmenu = (event) => {
-    //     event.preventDefault();
-    //   };
-    // }
-  }, []);
-
  return (
    <html lang='en'>
      <head>
+        <title>{title}</title>
+        <meta name='mobile-web-app-capable' content='yes' />
+        <meta name='apple-mobile-web-app-status-bar-style' content='default' />
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1' />
+        <link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
+        <link rel='icon' href='/favicon.ico' />
+        <meta name='description' content={description} />
+        <meta property='og:url' content={url} />
+        <meta property='og:type' content='website' />
+        <meta property='og:title' content={title} />
+        <meta property='og:description' content={description} />
+        <meta property='og:image' content={previewImage} />
+        <meta name='twitter:card' content='summary_large_image' />
+        <meta property='twitter:domain' content='web.readest.com' />
+        <meta property='twitter:url' content={url} />
+        <meta name='twitter:title' content={title} />
+        <meta name='twitter:description' content={description} />
+        <meta name='twitter:image' content={previewImage} />
      </head>
-      <CSPostHogProvider>
-        <body>
-          <EnvProvider>
-            <AuthProvider>{children}</AuthProvider>
-          </EnvProvider>
-        </body>
-      </CSPostHogProvider>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
    </html>
  );
 }
@@ -1,16 +1,17 @@
 import clsx from 'clsx';
 import * as React from 'react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { PiPlus } from 'react-icons/pi';
 import { MdDelete, MdOpenInNew } from 'react-icons/md';
 import { MdCheckCircle, MdCheckCircleOutline } from 'react-icons/md';

-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import Image from 'next/image';

 import { Book, BooksGroup } from '@/types/book';
 import { useEnv } from '@/context/EnvContext';
 import { useLibraryStore } from '@/store/libraryStore';
+import { navigateToReader } from '@/utils/nav';
 import Alert from '@/components/Alert';
 import Spinner from '@/components/Spinner';

@@ -25,19 +26,19 @@ const generateBookshelfItems = (books: Book[]): BookshelfItem[] => {
    const booksGroup = acc[acc.findIndex((group) => group.name === book.group)];
    if (booksGroup) {
      booksGroup.books.push(book);
-      booksGroup.lastUpdated = Math.max(acc[groupIndex]!.lastUpdated, book.lastUpdated);
+      booksGroup.updatedAt = Math.max(acc[groupIndex]!.updatedAt, book.updatedAt);
    } else {
      acc.push({
        name: book.group,
        books: [book],
-        lastUpdated: book.lastUpdated,
+        updatedAt: book.updatedAt,
      });
    }
    return acc;
  }, []);
  const ungroupedBooks: Book[] = groups.find((group) => group.name === UNGROUPED_NAME)?.books || [];
  const groupedBooks: BooksGroup[] = groups.filter((group) => group.name !== UNGROUPED_NAME);
-  return [...ungroupedBooks, ...groupedBooks].sort((a, b) => b.lastUpdated - a.lastUpdated);
+  return [...ungroupedBooks, ...groupedBooks].sort((a, b) => b.updatedAt - a.updatedAt);
 };

 interface BookshelfProps {
@@ -48,17 +49,41 @@ interface BookshelfProps {

 const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImportBooks }) => {
  const router = useRouter();
-  const { envConfig } = useEnv();
+  const searchParams = useSearchParams();
+  const { envConfig, appService } = useEnv();
  const { deleteBook } = useLibraryStore();
  const [loading, setLoading] = useState(false);
  const [selectedBooks, setSelectedBooks] = useState<string[]>([]);
  const [showDeleteAlert, setShowDeleteAlert] = useState(false);
  const [clickedImage, setClickedImage] = useState<string | null>(null);
+  const [importBookUrl] = useState(searchParams?.get('url') || '');
+  const isImportingBook = useRef(false);

-  React.useEffect(() => {
+  const { setLibrary } = useLibraryStore();
+
+  useEffect(() => {
    setSelectedBooks([]);
  }, [isSelectMode]);

+  useEffect(() => {
+    if (isImportingBook.current) return;
+    isImportingBook.current = true;
+
+    if (importBookUrl && appService) {
+      const importBook = async () => {
+        console.log('Importing book from URL:', importBookUrl);
+        const book = await appService.importBook(importBookUrl, libraryBooks);
+        if (book) {
+          setLibrary(libraryBooks);
+          appService.saveLibraryBooks(libraryBooks);
+          navigateToReader(router, [book.hash]);
+        }
+      };
+      importBook();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importBookUrl, appService]);
+
  const bookshelfItems = generateBookshelfItems(libraryBooks);

  const handleBookClick = (id: string) => {
@@ -68,7 +93,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp
      setClickedImage(id);
      setTimeout(() => setClickedImage(null), 300);
      setTimeout(() => setLoading(true), 200);
-      router.push(`/reader?ids=${id}`);
+      navigateToReader(router, [id]);
    }
  };

@@ -80,7 +105,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({ libraryBooks, isSelectMode, onImp

  const openSelectedBooks = () => {
    setTimeout(() => setLoading(true), 200);
-    router.push(`/reader?ids=${selectedBooks.join(',')}`);
+    navigateToReader(router, selectedBooks);
  };

  const confirmDelete = () => {
@@ -4,8 +4,12 @@ import { FaSearch } from 'react-icons/fa';
 import { PiPlus } from 'react-icons/pi';
 import { PiSelectionAllDuotone } from 'react-icons/pi';

+import { useEnv } from '@/context/EnvContext';
 import useTrafficLight from '@/hooks/useTrafficLight';
 import WindowButtons from '@/components/WindowButtons';
+import Dropdown from '@/components/Dropdown';
+import { MdOutlineMenu } from 'react-icons/md';
+import SettingsMenu from './SettingsMenu';

 interface LibraryHeaderProps {
  isSelectMode: boolean;
@@ -18,6 +22,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
  onImportBooks,
  onToggleSelectMode,
 }) => {
+  const { appService } = useEnv();
  const { isTrafficLightVisible } = useTrafficLight();
  const headerRef = useRef<HTMLDivElement>(null);

@@ -33,21 +38,6 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
    };
  }, [onToggleSelectMode]);

-  const handleMinimize = async () => {
-    const { getCurrentWindow } = await import('@tauri-apps/api/window');
-    getCurrentWindow().minimize();
-  };
-
-  const handleToggleMaximize = async () => {
-    const { getCurrentWindow } = await import('@tauri-apps/api/window');
-    getCurrentWindow().toggleMaximize();
-  };
-
-  const handleClose = async () => {
-    const { getCurrentWindow } = await import('@tauri-apps/api/window');
-    getCurrentWindow().close();
-  };
-
  return (
    <div
      ref={headerRef}
@@ -57,7 +47,7 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
      )}
    >
      <div className='flex items-center justify-between space-x-6'>
-        <div className='sm:w relative flex w-full items-center pl-4'>
+        <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>
@@ -98,15 +88,21 @@ const LibraryHeader: React.FC<LibraryHeaderProps> = ({
            </button>
          </div>
        </div>
-        <WindowButtons
-          headerRef={headerRef}
-          showMinimize={!isTrafficLightVisible}
-          showMaximize={!isTrafficLightVisible}
-          showClose={!isTrafficLightVisible}
-          onMinimize={handleMinimize}
-          onToggleMaximize={handleToggleMaximize}
-          onClose={handleClose}
-        />
+        <div className='flex h-full items-center'>
+          <Dropdown
+            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={16} />}
+          >
+            <SettingsMenu />
+          </Dropdown>
+          <WindowButtons
+            headerRef={headerRef}
+            showMinimize={!isTrafficLightVisible && appService?.appPlatform !== 'web'}
+            showMaximize={!isTrafficLightVisible && appService?.appPlatform !== 'web'}
+            showClose={!isTrafficLightVisible && appService?.appPlatform !== 'web'}
+          />
+        </div>
      </div>
    </div>
  );
@@ -0,0 +1,94 @@
+import React from 'react';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { PiUserCircle } from 'react-icons/pi';
+import { PiUserCircleCheck } from 'react-icons/pi';
+
+import { setAboutDialogVisible } from '@/components/AboutWindow';
+import { isWebAppPlatform } from '@/services/environment';
+import { DOWNLOAD_READEST_URL } from '@/services/constants';
+import { useAuth } from '@/context/AuthContext';
+import { useEnv } from '@/context/EnvContext';
+import { useSettingsStore } from '@/store/settingsStore';
+import MenuItem from '@/components/MenuItem';
+
+interface BookMenuProps {
+  setIsDropdownOpen?: (isOpen: boolean) => void;
+}
+
+const SettingsMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
+  const router = useRouter();
+  const { envConfig } = useEnv();
+  const { user, logout } = useAuth();
+  const { settings, setSettings, saveSettings } = useSettingsStore();
+
+  const showAboutReadest = () => {
+    setAboutDialogVisible(true);
+    setIsDropdownOpen?.(false);
+  };
+  const downloadReadest = () => {
+    window.open(DOWNLOAD_READEST_URL, '_blank');
+    setIsDropdownOpen?.(false);
+  };
+
+  const handleUserLogin = () => {
+    router.push('/auth');
+    setIsDropdownOpen?.(false);
+  };
+
+  const handleUserLogout = () => {
+    logout();
+    settings.keepLogin = false;
+    setSettings(settings);
+    saveSettings(envConfig, settings);
+    setIsDropdownOpen?.(false);
+  };
+
+  const isWebApp = isWebAppPlatform();
+  const avatarUrl = user?.user_metadata?.['picture'] || user?.user_metadata?.['avatar_url'];
+  const userFullName = user?.user_metadata?.['full_name'];
+  const userDisplayName = userFullName ? userFullName.split(' ')[0] : null;
+
+  return (
+    <div
+      tabIndex={0}
+      className='settings-menu dropdown-content no-triangle border-base-100 z-20 mt-3 w-60 shadow-2xl'
+    >
+      {user ? (
+        <MenuItem
+          label={userDisplayName ? `Logged in as ${userDisplayName}` : 'Logged in'}
+          labelClass='!max-w-40'
+          icon={
+            avatarUrl ? (
+              <Image
+                src={avatarUrl}
+                alt='User Avatar'
+                className='h-5 w-5 rounded-full'
+                referrerPolicy='no-referrer'
+                width={20}
+                height={20}
+              />
+            ) : (
+              <PiUserCircleCheck size={20} />
+            )
+          }
+        >
+          <ul>
+            <MenuItem label='Sign Out' noIcon onClick={handleUserLogout} />
+          </ul>
+        </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} />}
+      <MenuItem label='About Readest' onClick={showAboutReadest} />
+    </div>
+  );
+};
+
+export default SettingsMenu;
@@ -0,0 +1,52 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { useEnv } from '@/context/EnvContext';
+import { Book } from '@/types/book';
+import { getUserLang } from '@/utils/misc';
+import { isWebAppPlatform } from '@/services/environment';
+
+import libraryEn from '@/data/demo/library.en.json';
+import libraryZh from '@/data/demo/library.zh.json';
+
+const libraries = {
+  en: libraryEn,
+  zh: libraryZh,
+};
+
+interface DemoBooks {
+  library: string[];
+}
+
+export const useDemoBooks = () => {
+  const { envConfig } = useEnv();
+  const userLang = getUserLang() as keyof typeof libraries;
+  const [books, setBooks] = useState<Book[]>([]);
+  const isLoading = useRef(false);
+
+  useEffect(() => {
+    if (isLoading.current) return;
+    isLoading.current = true;
+
+    const fetchDemoBooks = async () => {
+      try {
+        const appService = await envConfig.getAppService();
+        const demoBooks = libraries[userLang] || (libraries.en as DemoBooks);
+        const books = await Promise.all(
+          demoBooks.library.map((url) => appService.importBook(url, [], false, true)),
+        );
+        setBooks(books.filter((book) => book !== null) as Book[]);
+      } catch (error) {
+        console.error('Failed to import demo books:', error);
+      }
+    };
+
+    const demoBooksFetchedFlag = localStorage.getItem('demoBooksFetched');
+    if (isWebAppPlatform() && !demoBooksFetchedFlag) {
+      fetchDemoBooks();
+      localStorage.setItem('demoBooksFetched', 'true');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return books;
+};
@@ -1,36 +1,150 @@
 'use client';

 import * as React from 'react';
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect, Suspense } from 'react';
+import { useRouter } from 'next/navigation';
+
+import { Book } from '@/types/book';
+import { AppService } from '@/types/system';
+import { navigateToReader } from '@/utils/nav';
+import { parseOpenWithFiles } from '@/helpers/cli';
+import { isTauriAppPlatform } from '@/services/environment';
+import { checkForAppUpdates } from '@/helpers/updater';
+import { FILE_ACCEPT_FORMATS, SUPPORTED_FILE_EXTS } from '@/services/constants';

 import { useEnv } from '@/context/EnvContext';
+import { useAuth } from '@/context/AuthContext';
+import { useTheme } from '@/hooks/useTheme';
 import { useLibraryStore } from '@/store/libraryStore';
+import { useSettingsStore } from '@/store/settingsStore';
+import { useDemoBooks } from './hooks/useDemoBooks';

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

 const LibraryPage = () => {
+  const router = useRouter();
  const { envConfig, appService } = useEnv();
-  const { library: libraryBooks, setLibrary } = useLibraryStore();
+  const { token, user } = useAuth();
+  const {
+    library: libraryBooks,
+    setLibrary,
+    checkOpenWithBooks,
+    clearOpenWithBooks,
+  } = useLibraryStore();
+  useTheme();
+  const { setSettings, saveSettings } = useSettingsStore();
  const [loading, setLoading] = useState(false);
  const isInitiating = useRef(false);
+  const [libraryLoaded, setLibraryLoaded] = useState(false);
  const [isSelectMode, setIsSelectMode] = useState(false);
+  const demoBooks = useDemoBooks();

-  React.useEffect(() => {
+  useEffect(() => {
+    const doAppUpdates = async () => {
+      if (isTauriAppPlatform()) {
+        await checkForAppUpdates();
+      }
+    };
+    doAppUpdates();
+  }, []);
+
+  const processOpenWithFiles = React.useCallback(
+    async (appService: AppService, openWithFiles: string[], libraryBooks: Book[]) => {
+      const bookIds: string[] = [];
+      for (const file of openWithFiles) {
+        const book = await appService.importBook(file, libraryBooks);
+        if (book) {
+          bookIds.push(book.hash);
+        }
+      }
+      setLibrary(libraryBooks);
+      appService.saveLibraryBooks(libraryBooks);
+
+      console.log('Opening books:', bookIds);
+      if (bookIds.length > 0) {
+        navigateToReader(router, bookIds);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [],
+  );
+
+  useEffect(() => {
    if (isInitiating.current) return;
    isInitiating.current = true;

-    const loadingTimeout = setTimeout(() => setLoading(true), 200);
-    envConfig.getAppService().then(async (appService) => {
-      console.log('Loading library books...');
-      setLibrary(await appService.loadLibraryBooks());
+    const initLogin = async () => {
+      const appService = await envConfig.getAppService();
+      const settings = await appService.loadSettings();
+      if (token && user) {
+        if (!settings.keepLogin) {
+          settings.keepLogin = true;
+          setSettings(settings);
+          saveSettings(envConfig, settings);
+        }
+      } else if (settings.keepLogin) {
+        router.push('/auth');
+      }
+    };
+
+    const loadingTimeout = setTimeout(() => setLoading(true), 300);
+    const initLibrary = async () => {
+      const appService = await envConfig.getAppService();
+      const settings = await appService.loadSettings();
+      setSettings(settings);
+
+      const libraryBooks = await appService.loadLibraryBooks();
+      if (checkOpenWithBooks && isTauriAppPlatform()) {
+        await handleOpenWithBooks(appService, libraryBooks);
+      } else {
+        clearOpenWithBooks();
+        setLibrary(libraryBooks);
+      }
+
+      setLibraryLoaded(true);
      if (loadingTimeout) clearTimeout(loadingTimeout);
      setLoading(false);
-    });
+    };
+
+    const handleOpenWithBooks = async (appService: AppService, libraryBooks: Book[]) => {
+      const openWithFiles = (await parseOpenWithFiles()) || [];
+
+      if (openWithFiles.length > 0) {
+        await processOpenWithFiles(appService, openWithFiles, libraryBooks);
+      } else {
+        clearOpenWithBooks();
+        setLibrary(libraryBooks);
+      }
+    };
+
+    initLogin();
+    initLibrary();
+    return () => {
+      clearOpenWithBooks();
+    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

+  useEffect(() => {
+    if (demoBooks.length > 0 && libraryLoaded) {
+      const newLibrary = [...libraryBooks];
+      for (const book of demoBooks) {
+        const idx = newLibrary.findIndex((b) => b.hash === book.hash);
+        if (idx === -1) {
+          newLibrary.push(book);
+        } else {
+          newLibrary[idx] = book;
+        }
+      }
+      setLibrary(newLibrary);
+      appService?.saveLibraryBooks(newLibrary);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [demoBooks, libraryLoaded]);
+
  const importBooks = async (files: [string | File]) => {
    setLoading(true);
    for (const file of files) {
@@ -42,14 +156,14 @@ const LibraryPage = () => {
  };

  const selectFilesTauri = async () => {
-    return appService?.selectFiles('Select Books', ['epub', 'pdf']);
+    return appService?.selectFiles('Select Books', SUPPORTED_FILE_EXTS);
  };

  const selectFilesWeb = () => {
    return new Promise((resolve) => {
      const fileInput = document.createElement('input');
      fileInput.type = 'file';
-      fileInput.accept = '.epub, .pdf';
+      fileInput.accept = FILE_ACCEPT_FORMATS;
      fileInput.multiple = true;
      fileInput.click();

@@ -61,12 +175,17 @@ const LibraryPage = () => {

  const handleImportBooks = async () => {
    console.log('Importing books...');
-    const { type } = await import('@tauri-apps/plugin-os');
    let files;
-    if (['android', 'ios'].includes(type())) {
-      files = (await selectFilesWeb()) as [File];
+
+    if (isTauriAppPlatform()) {
+      const { type } = await import('@tauri-apps/plugin-os');
+      if (['android', 'ios'].includes(type())) {
+        files = (await selectFilesWeb()) as [File];
+      } else {
+        files = (await selectFilesTauri()) as [string];
+      }
    } else {
-      files = (await selectFilesTauri()) as [string];
+      files = (await selectFilesWeb()) as [File];
    }
    importBooks(files);
  };
@@ -79,6 +198,16 @@ const LibraryPage = () => {
    return null;
  }

+  if (checkOpenWithBooks) {
+    return (
+      loading && (
+        <div className='fixed inset-0 z-50 flex items-center justify-center'>
+          <Spinner loading />
+        </div>
+      )
+    );
+  }
+
  return (
    <div className='library-page rounded-window bg-base-200/50 text-base-content flex h-full min-h-screen select-none flex-col overflow-hidden'>
      <div className='fixed top-0 z-40 w-full'>
@@ -93,29 +222,33 @@ const LibraryPage = () => {
          <Spinner loading />
        </div>
      )}
-      {libraryBooks.length > 0 ? (
-        <div className='mt-12 flex-grow overflow-auto px-2'>
-          <Bookshelf
-            libraryBooks={libraryBooks}
-            isSelectMode={isSelectMode}
-            onImportBooks={handleImportBooks}
-          />
-        </div>
-      ) : (
-        <div className='hero h-screen items-center justify-center'>
-          <div className='hero-content text-neutral-content text-center'>
-            <div className='max-w-md'>
-              <h1 className='mb-5 text-5xl font-bold'>Your Library</h1>
-              <p className='mb-5'>
-                Welcome to your library. You can import your books here and read them anytime.
-              </p>
-              <button className='btn btn-primary rounded-xl' onClick={handleImportBooks}>
-                Import Books
-              </button>
+      {libraryLoaded &&
+        (libraryBooks.length > 0 ? (
+          <div className='mt-12 flex-grow overflow-auto px-2'>
+            <Suspense>
+              <Bookshelf
+                libraryBooks={libraryBooks}
+                isSelectMode={isSelectMode}
+                onImportBooks={handleImportBooks}
+              />
+            </Suspense>
+          </div>
+        ) : (
+          <div className='hero h-screen items-center justify-center'>
+            <div className='hero-content text-neutral-content text-center'>
+              <div className='max-w-md'>
+                <h1 className='mb-5 text-5xl font-bold'>Your Library</h1>
+                <p className='mb-5'>
+                  Welcome to your library. You can import your books here and read them anytime.
+                </p>
+                <button className='btn btn-primary rounded-xl' onClick={handleImportBooks}>
+                  Import Books
+                </button>
+              </div>
            </div>
          </div>
-        </div>
-      )}
+        ))}
+      <AboutWindow />
    </div>
  );
 };
@@ -2,6 +2,7 @@

 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
+import { navigateToLibrary } from '@/utils/nav';

 import Spinner from '@/components/Spinner';

@@ -9,7 +10,7 @@ const HomePage = () => {
  const router = useRouter();

  useEffect(() => {
-    router.push('/library');
+    navigateToLibrary(router);
  }, [router]);

  return <Spinner loading={true} />;
@@ -26,7 +26,7 @@ const BookmarkToggler: React.FC<BookmarkTogglerProps> = ({ bookKey }) => {

  const toggleBookmark = () => {
    const { booknotes: bookmarks = [] } = config;
-    const { location: cfi, sectionHref: href, range } = progress;
+    const { location: cfi, range } = progress;
    if (!cfi) return;
    if (!isBookmarked) {
      setIsBookmarked(true);
@@ -36,10 +36,10 @@ const BookmarkToggler: React.FC<BookmarkTogglerProps> = ({ bookKey }) => {
        id: uniqueId(),
        type: 'bookmark',
        cfi,
-        href,
        text: truncatedText,
        note: '',
-        created: Date.now(),
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
      };
      bookmarks.push(bookmark);
      const updatedConfig = updateBooknotes(bookKey, bookmarks);
@@ -12,6 +12,7 @@ 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 {
  bookKeys: string[];
@@ -60,6 +61,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
              onSetSettingsDialogOpen={setFontLayoutSettingsDialogOpen}
            />
            <FoliateViewer bookKey={bookKey} bookDoc={bookDoc} config={config} />
+            <FootnotePopup bookKey={bookKey} bookDoc={bookDoc} />
            {viewSettings.scrolled ? null : (
              <>
                <SectionInfo section={sectionLabel} gapLeft={marginGap} />
@@ -1,69 +1,24 @@
-import React, { useEffect, useRef } from 'react';
-import { useFoliateEvents } from '../hooks/useFoliateEvents';
-import { BookDoc } from '@/libs/document';
-import { BookConfig, BookNote, BookSearchConfig, BookSearchResult } from '@/types/book';
+import React, { useEffect, useRef, useState } from 'react';
+import { BookDoc, getDirection } from '@/libs/document';
+import { BookConfig } from '@/types/book';
+import { FoliateView, wrappedFoliateView } from '@/types/view';
 import { useReaderStore } from '@/store/readerStore';
 import { useParallelViewStore } from '@/store/parallelViewStore';
-import { getStyles } from '@/utils/style';
+import { useClickEvent } from '../hooks/useClickEvent';
+import { useFoliateEvents } from '../hooks/useFoliateEvents';
+import { useProgressSync } from '../hooks/useProgressSync';
+import { useAutoHideScrollbar } from '../hooks/useAutoHideScrollbar';
+import { getStyles, mountAdditionalFonts } from '@/utils/style';
 import { useTheme } from '@/hooks/useTheme';
 import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
 import {
  handleKeydown,
  handleMousedown,
-  handleClick,
  handleMouseup,
+  handleClick,
+  handleWheel,
 } from '../utils/iframeEventHandlers';
-import { eventDispatcher } from '@/utils/event';
-
-export interface FoliateView extends HTMLElement {
-  open: (book: BookDoc) => Promise<void>;
-  close: () => void;
-  init: (options: { lastLocation: string }) => void;
-  goTo: (href: string) => void;
-  goToFraction: (fraction: number) => void;
-  prev: (distance: number) => void;
-  next: (distance: number) => void;
-  goLeft: () => void;
-  goRight: () => void;
-  getCFI: (index: number, range: Range) => string;
-  addAnnotation: (note: BookNote, remove?: boolean) => { index: number; label: string };
-  search: (config: BookSearchConfig) => AsyncGenerator<BookSearchResult | string, void, void>;
-  clearSearch: () => void;
-  select: (target: string | number | { fraction: number }) => void;
-  deselect: () => void;
-  history: {
-    canGoBack: boolean;
-    canGoForward: boolean;
-    back: () => void;
-    forward: () => void;
-    clear: () => void;
-  };
-  renderer: {
-    scrolled?: boolean;
-    viewSize: number;
-    setAttribute: (name: string, value: string | number) => void;
-    removeAttribute: (name: string) => void;
-    next: () => Promise<void>;
-    prev: () => Promise<void>;
-    scrollTo?: (offset: number, reason: string, smooth: boolean) => void;
-    setStyles?: (css: string) => void;
-    addEventListener: (type: string, listener: EventListener) => void;
-    removeEventListener: (type: string, listener: EventListener) => void;
-  };
-}
-
-const wrappedFoliateView = (originalView: FoliateView): FoliateView => {
-  const originalAddAnnotation = originalView.addAnnotation.bind(originalView);
-  originalView.addAnnotation = (note: BookNote, remove = false) => {
-    // transform BookNote to foliate annotation
-    const annotation = {
-      value: note.cfi,
-      ...note,
-    };
-    return originalAddAnnotation(annotation, remove);
-  };
-  return originalView;
-};
+import Toast from '@/components/Toast';

 const FoliateViewer: React.FC<{
  bookKey: string;
@@ -73,90 +28,72 @@ const FoliateViewer: React.FC<{
  const containerRef = useRef<HTMLDivElement>(null);
  const viewRef = useRef<FoliateView | null>(null);
  const isViewCreated = useRef(false);
-  const isScrolling = useRef(false);
-  const { getView, setView: setFoliateView, setProgress, getViewSettings } = useReaderStore();
+  const { getView, setView: setFoliateView, setProgress } = useReaderStore();
+  const { getViewSettings, setViewSettings } = useReaderStore();
  const { getParallels } = useParallelViewStore();
  const { themeCode } = useTheme();

+  const [toastMessage, setToastMessage] = useState('');
+  useEffect(() => {
+    const timer = setTimeout(() => setToastMessage(''), 2000);
+    return () => clearTimeout(timer);
+  }, [toastMessage]);
+
+  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);
  };

+  const { shouldAutoHideScrollbar, handleScrollbarAutoHide } = useAutoHideScrollbar();
  const docLoadHandler = (event: Event) => {
    const detail = (event as CustomEvent).detail;
+    console.log('doc loaded:', detail);
    if (detail.doc) {
+      const writingDir = viewRef.current?.renderer.setStyles && getDirection(detail.doc);
+      const viewSettings = getViewSettings(bookKey)!;
+      viewSettings.vertical = writingDir?.vertical || false;
+      setViewSettings(bookKey, viewSettings);
+      if (viewSettings.scrolled && shouldAutoHideScrollbar) {
+        handleScrollbarAutoHide(detail.doc);
+      }
+
+      mountAdditionalFonts(detail.doc);
+
      if (!detail.doc.isEventListenersAdded) {
        detail.doc.isEventListenersAdded = true;
        detail.doc.addEventListener('keydown', handleKeydown.bind(null, bookKey));
        detail.doc.addEventListener('mousedown', handleMousedown.bind(null, bookKey));
        detail.doc.addEventListener('mouseup', handleMouseup.bind(null, bookKey));
        detail.doc.addEventListener('click', handleClick.bind(null, bookKey));
+        detail.doc.addEventListener('wheel', handleWheel.bind(null, bookKey));
      }
    }
  };

-  const docScrollHandler = (event: Event) => {
-    setTimeout(() => {
-      isScrolling.current = false;
-    }, 300);
-    if (isScrolling.current) return;
-    isScrolling.current = true;
-
+  const docRelocateHandler = (event: Event) => {
    const detail = (event as CustomEvent).detail;
-    if (detail.reason !== 'scroll') return;
-    if (!viewRef.current!.renderer.scrolled) return;
+    if (detail.reason !== 'scroll' && detail.reason !== 'page') return;
    const parallelViews = getParallels(bookKey);
    if (parallelViews && parallelViews.size > 0) {
      parallelViews.forEach((key) => {
        if (key !== bookKey) {
          const target = getView(key)?.renderer;
-          if (target && target.scrolled && target.viewSize) {
-            target.scrollTo?.(detail.fraction * target.viewSize, 'follow-scroll', true);
+          if (target) {
+            target.goTo?.({ index: detail.index, anchor: detail.fraction });
          }
        }
      });
    }
  };

-  const handleClickTurnPage = (
-    msg: MessageEvent | React.MouseEvent<HTMLDivElement, MouseEvent>,
-  ) => {
-    if (msg instanceof MessageEvent) {
-      if (msg.data && msg.data.type === 'iframe-single-click' && msg.data.bookKey === bookKey) {
-        const viewElement = containerRef.current;
-        if (viewElement) {
-          const rect = viewElement.getBoundingClientRect();
-          const { screenX } = msg.data;
-
-          const eventConsumed = eventDispatcher.dispatchSync('iframe-single-click', { screenX });
-          if (!eventConsumed) {
-            if (screenX >= rect.left + rect.width / 2) {
-              viewRef.current?.goRight();
-            } else if (screenX < rect.left + rect.width / 2) {
-              viewRef.current?.goLeft();
-            }
-          }
-        }
-      }
-    } else {
-      const { clientX } = msg;
-      const width = window.innerWidth;
-      const leftThreshold = width * 0.5;
-      const rightThreshold = width * 0.5;
-      if (clientX < leftThreshold) {
-        viewRef.current?.goLeft();
-      } else if (clientX > rightThreshold) {
-        viewRef.current?.goRight();
-      }
-    }
-  };
-
+  const { handleTurnPage } = useClickEvent(bookKey, viewRef, containerRef);
  useFoliateEvents(viewRef.current, {
    onLoad: docLoadHandler,
    onRelocate: progressRelocateHandler,
-    onRendererRelocate: docScrollHandler,
+    onRendererRelocate: docRelocateHandler,
  });

  useEffect(() => {
@@ -177,11 +114,12 @@ const FoliateViewer: React.FC<{
      const view = wrappedFoliateView(document.createElement('foliate-view') as FoliateView);
      document.body.append(view);
      containerRef.current?.appendChild(view);
-      setFoliateView(bookKey, view);

      await view.open(bookDoc);
      // make sure we can listen renderer events after opening book
      viewRef.current = view;
+      setFoliateView(bookKey, view);
+
      const viewSettings = getViewSettings(bookKey)!;
      view.renderer.setStyles?.(getStyles(viewSettings, themeCode));

@@ -213,8 +151,6 @@ const FoliateViewer: React.FC<{
      } else {
        await view.goToFraction(0);
      }
-
-      window.addEventListener('message', handleClickTurnPage);
    };

    openBook();
@@ -222,11 +158,16 @@ const FoliateViewer: React.FC<{
  }, []);

  return (
-    <div
-      className='foliate-viewer h-[100%] w-[100%]'
-      onClick={(event) => handleClickTurnPage(event)}
-      ref={containerRef}
-    />
+    <>
+      <div
+        className='foliate-viewer h-[100%] w-[100%]'
+        onClick={(event) => handleTurnPage(event)}
+        ref={containerRef}
+      />
+      {toastMessage && (
+        <Toast message={toastMessage} toastClass='toast-top toast-end' alertClass='alert-success' />
+      )}
+    </>
  );
 };

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

+import { useEnv } from '@/context/EnvContext';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import useTrafficLight from '@/hooks/useTrafficLight';
@@ -29,10 +30,11 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
  onCloseBook,
  onSetSettingsDialogOpen,
 }) => {
+  const { appService } = useEnv();
  const headerRef = useRef<HTMLDivElement>(null);
  const { isTrafficLightVisible } = useTrafficLight();
  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const { hoveredBookKey, setHoveredBookKey } = useReaderStore();
+  const { hoveredBookKey, setHoveredBookKey, bookKeys } = useReaderStore();
  const { isSideBarVisible } = useSidebarStore();

  const handleToggleDropdown = (isOpen: boolean) => {
@@ -67,7 +69,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
      <div className='flex h-full items-center space-x-2'>
        <NotebookToggler bookKey={bookKey} />
        <Dropdown
-          className='dropdown-bottom dropdown-end'
+          className='exclude-title-bar-mousedown dropdown-bottom dropdown-end'
          buttonClassName='btn btn-ghost h-8 min-h-8 w-8 p-0'
          toggleButton={<PiDotsThreeVerticalBold size={16} />}
          onToggle={handleToggleDropdown}
@@ -78,8 +80,8 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
        <WindowButtons
          className='window-buttons flex h-full items-center'
          headerRef={headerRef}
-          showMinimize={false}
-          showMaximize={false}
+          showMinimize={bookKeys.length == 1 && appService?.appPlatform !== 'web'}
+          showMaximize={bookKeys.length == 1 && appService?.appPlatform !== 'web'}
          onClose={() => onCloseBook(bookKey)}
        />
      </div>
@@ -0,0 +1,46 @@
+'use client';
+
+import * as React from 'react';
+import { useEffect, Suspense, useRef } from 'react';
+
+import { useEnv } from '@/context/EnvContext';
+import { useLibraryStore } from '@/store/libraryStore';
+
+import ReaderContent from './ReaderContent';
+import { AboutWindow } from '@/components/AboutWindow';
+import { useSettingsStore } from '@/store/settingsStore';
+
+const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
+  const { envConfig } = useEnv();
+  const { settings, setSettings } = useSettingsStore();
+  const { library, setLibrary } = useLibraryStore();
+  const isInitiating = useRef(false);
+
+  useEffect(() => {
+    if (isInitiating.current) return;
+    isInitiating.current = true;
+    const initLibrary = async () => {
+      const appService = await envConfig.getAppService();
+      const settings = await appService.loadSettings();
+      setSettings(settings);
+      setLibrary(await appService.loadLibraryBooks());
+    };
+
+    initLibrary();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    library.length > 0 &&
+    settings.globalReadSettings && (
+      <div className='reader-page bg-base-100 text-base-content min-h-screen select-none'>
+        <Suspense>
+          <ReaderContent ids={ids} settings={settings} />
+          <AboutWindow />
+        </Suspense>
+      </div>
+    )
+  );
+};
+
+export default Reader;
@@ -1,7 +1,7 @@
 'use client';

 import * as React from 'react';
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';

 import { useEnv } from '@/context/EnvContext';
@@ -10,7 +10,11 @@ import { useBookDataStore } from '@/store/bookDataStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { SystemSettings } from '@/types/settings';
+import { parseOpenWithFiles } from '@/helpers/cli';
+import { tauriHandleClose } from '@/utils/window';
 import { uniqueId } from '@/utils/misc';
+import { navigateToLibrary } from '@/utils/nav';
+import { BOOK_IDS_SEPARATOR } from '@/services/constants';

 import useBooksManager from '../hooks/useBooksManager';
 import useBookShortcuts from '../hooks/useBookShortcuts';
@@ -19,7 +23,7 @@ import SideBar from './sidebar/SideBar';
 import Notebook from './notebook/Notebook';
 import BooksGrid from './BooksGrid';

-const ReaderContent: React.FC<{ settings: SystemSettings }> = ({ settings }) => {
+const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ ids, settings }) => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { envConfig } = useEnv();
@@ -34,11 +38,12 @@ const ReaderContent: React.FC<{ settings: SystemSettings }> = ({ settings }) =>

  useBookShortcuts({ sideBarBookKey, bookKeys });

-  React.useEffect(() => {
+  useEffect(() => {
    if (isInitiating.current) return;
    isInitiating.current = true;

-    const initialIds = (searchParams.get('ids') || '').split(',').filter(Boolean);
+    const bookIds = ids || searchParams?.get('ids') || '';
+    const initialIds = bookIds.split(BOOK_IDS_SEPARATOR).filter(Boolean);
    const initialBookKeys = initialIds.map((id) => `${id}-${uniqueId()}`);
    setBookKeys(initialBookKeys);
    const uniqueIds = new Set<string>();
@@ -55,46 +60,68 @@ const ReaderContent: React.FC<{ settings: SystemSettings }> = ({ settings }) =>
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

-  const saveConfigAndCloseBook = (bookKey: string) => {
-    console.log('Closing book', bookKey);
-    getView(bookKey)?.close();
-    getView(bookKey)?.remove();
+  useEffect(() => {
+    window.addEventListener('beforeunload', handleCloseBooks);
+    return () => {
+      window.removeEventListener('beforeunload', handleCloseBooks);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bookKeys]);
+
+  const saveBookConfig = (bookKey: string) => {
    const config = getConfig(bookKey);
    const { book } = getBookData(bookKey) || {};
    const { isPrimary } = getViewState(bookKey) || {};
    if (isPrimary && book && config) {
      saveConfig(envConfig, bookKey, config, settings);
    }
+  };
+
+  const saveConfigAndCloseBook = async (bookKey: string) => {
+    console.log('Closing book', bookKey);
+    getView(bookKey)?.close();
+    getView(bookKey)?.remove();
+    saveBookConfig(bookKey);
    clearViewState(bookKey);
  };

  const saveSettingsAndGoToLibrary = () => {
    saveSettings(envConfig, settings);
-    router.replace('/library');
+    navigateToLibrary(router);
  };

  const handleCloseBooks = () => {
    bookKeys.forEach((key) => {
      saveConfigAndCloseBook(key);
    });
-    saveSettingsAndGoToLibrary();
+    saveSettings(envConfig, settings);
  };

-  const handleCloseBook = (bookKey: string) => {
+  const handleCloseBooksToLibrary = () => {
+    handleCloseBooks();
+    navigateToLibrary(router);
+  };
+
+  const handleCloseBook = async (bookKey: string) => {
    saveConfigAndCloseBook(bookKey);
    if (sideBarBookKey === bookKey) {
      setSideBarBookKey(getNextBookKey(sideBarBookKey));
    }
    dismissBook(bookKey);
    if (bookKeys.filter((key) => key !== bookKey).length == 0) {
-      saveSettingsAndGoToLibrary();
+      const openWithFiles = (await parseOpenWithFiles()) || [];
+      if (openWithFiles.length > 0) {
+        tauriHandleClose();
+      } else {
+        saveSettingsAndGoToLibrary();
+      }
    }
  };

  if (!bookKeys || bookKeys.length === 0) return null;
  const bookData = getBookData(bookKeys[0]!);
  if (!bookData || !bookData.book || !bookData.bookDoc) {
-    setTimeout(() => setLoading(true), 200);
+    setTimeout(() => setLoading(true), 300);
    return (
      loading && (
        <div className={'hero hero-content min-h-screen'}>
@@ -106,7 +133,7 @@ const ReaderContent: React.FC<{ settings: SystemSettings }> = ({ settings }) =>

  return (
    <div className='flex h-screen'>
-      <SideBar onGoToLibrary={handleCloseBooks} />
+      <SideBar onGoToLibrary={handleCloseBooksToLibrary} />
      <BooksGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
      <Notebook />
    </div>
@@ -5,6 +5,7 @@ import { BiMoon, BiSun } from 'react-icons/bi';
 import { TbSunMoon } from 'react-icons/tb';
 import { MdZoomOut, MdZoomIn, MdCheck } from 'react-icons/md';

+import { ONE_COLUMN_MAX_INLINE_SIZE } from '@/services/constants';
 import MenuItem from '@/components/MenuItem';
 import { useReaderStore } from '@/store/readerStore';
 import { useTheme, ThemeMode } from '@/hooks/useTheme';
@@ -22,7 +23,7 @@ const ViewMenu: React.FC<ViewMenuProps> = ({
  onSetSettingsDialogOpen,
 }) => {
  const { getView, getViews, getViewSettings, setViewSettings } = useReaderStore();
-  const viewSettings = getViewSettings(bookKey);
+  const viewSettings = getViewSettings(bookKey)!;

  const { themeMode, isDarkMode, themeCode, updateThemeMode } = useTheme();
  const [isScrolledMode, setScrolledMode] = useState(viewSettings!.scrolled);
@@ -55,6 +56,11 @@ const ViewMenu: React.FC<ViewMenuProps> = ({

  useEffect(() => {
    getView(bookKey)?.renderer.setAttribute('flow', isScrolledMode ? 'scrolled' : 'paginated');
+    getView(bookKey)?.renderer.setAttribute(
+      'max-inline-size',
+      `${viewSettings.maxColumnCount === 1 || isScrolledMode ? ONE_COLUMN_MAX_INLINE_SIZE : viewSettings.maxInlineSize}px`,
+    );
+    getView(bookKey)?.renderer.setStyles?.(getStyles(viewSettings!, themeCode));
    viewSettings!.scrolled = isScrolledMode;
    setViewSettings(bookKey, viewSettings!);
    // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -80,7 +86,6 @@ const ViewMenu: React.FC<ViewMenuProps> = ({

  return (
    <div
-      id='exclude-title-bar-mousedown'
      tabIndex={0}
      className='view-menu dropdown-content dropdown-right no-triangle border-base-100 z-20 mt-1 w-72 border shadow-2xl'
    >
@@ -13,10 +13,12 @@ import { Overlayer } from 'foliate-js/overlayer.js';
 import { useEnv } from '@/context/EnvContext';
 import { BookNote, HighlightColor, HighlightStyle } from '@/types/book';
 import { uniqueId } from '@/utils/misc';
+import { useBookDataStore } from '@/store/bookDataStore';
 import { useSettingsStore } from '@/store/settingsStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useNotebookStore } from '@/store/notebookStore';
 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';
@@ -24,19 +26,22 @@ import AnnotationPopup from './AnnotationPopup';
 import WiktionaryPopup from './WiktionaryPopup';
 import WikipediaPopup from './WikipediaPopup';
 import DeepLPopup from './DeepLPopup';
-import { useBookDataStore } from '@/store/bookDataStore';

 const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const { envConfig } = useEnv();
  const { settings } = useSettingsStore();
  const { getConfig, saveConfig, getBookData, updateBooknotes } = useBookDataStore();
-  const { getProgress, getView, getViewsById } = useReaderStore();
+  const { getProgress, getView, getViewsById, getViewSettings } = useReaderStore();
  const { isNotebookPinned, isNotebookVisible } = useNotebookStore();
  const { setNotebookVisible, setNotebookNewAnnotation } = useNotebookStore();
+
+  useNotesSync(bookKey);
+
  const config = getConfig(bookKey)!;
  const progress = getProgress(bookKey)!;
  const bookData = getBookData(bookKey)!;
  const view = getView(bookKey);
+  const viewSettings = getViewSettings(bookKey)!;

  const isShowingPopup = useRef(false);
  const isTextSelected = useRef(false);
@@ -48,6 +53,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const [trianglePosition, setTrianglePosition] = useState<Position>();
  const [annotPopupPosition, setAnnotPopupPosition] = useState<Position>();
  const [dictPopupPosition, setDictPopupPosition] = useState<Position>();
+  const [translatorPopupPosition, setTranslatorPopupPosition] = useState<Position>();
  const [toastMessage, setToastMessage] = useState('');
  const [highlightOptionsVisible, setHighlightOptionsVisible] = useState(false);

@@ -58,8 +64,10 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    settings.globalReadSettings.highlightStyles[selectedStyle],
  );

-  const dictPopupWidth = 400;
+  const dictPopupWidth = 480;
  const dictPopupHeight = 300;
+  const transPopupWidth = 480;
+  const transPopupHeight = 360;
  const annotPopupWidth = 280;
  const annotPopupHeight = 44;
  const popupPadding = 10;
@@ -105,7 +113,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    setSelection(selection);
  };

-  useFoliateEvents(view, { onLoad, onDrawAnnotation, onShowAnnotation }, [config]);
+  useFoliateEvents(view, { onLoad, onDrawAnnotation, onShowAnnotation });

  const handleDismissPopup = () => {
    setSelection(null);
@@ -148,7 +156,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
      const gridFrame = document.querySelector(`#gridcell-${bookKey}`);
      if (!gridFrame) return;
      const rect = gridFrame.getBoundingClientRect();
-      const triangPos = getPosition(selection.range, rect);
+      const triangPos = getPosition(selection.range, rect, viewSettings.vertical);
      const annotPopupPos = getPopupPosition(
        triangPos,
        rect,
@@ -163,13 +171,22 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
        dictPopupHeight,
        popupPadding,
      );
+      const transPopupPos = getPopupPosition(
+        triangPos,
+        rect,
+        transPopupWidth,
+        transPopupHeight,
+        popupPadding,
+      );
      if (triangPos.point.x == 0 || triangPos.point.y == 0) return;
      setShowAnnotPopup(true);
      setAnnotPopupPosition(annotPopupPos);
      setDictPopupPosition(dictPopupPos);
+      setTranslatorPopupPosition(transPopupPos);
      setTrianglePosition(triangPos);
      isShowingPopup.current = true;
    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [selection, bookKey]);

  useEffect(() => {
@@ -185,6 +202,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    const { booknotes = [] } = config;
    const annotations = booknotes.filter(
      (item) =>
+        !item.deletedAt &&
        item.type === 'annotation' &&
        item.style &&
        CFI.compare(item.cfi, start) >= 0 &&
@@ -204,17 +222,16 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {

    const { booknotes: annotations = [] } = config;
    if (selection) navigator.clipboard.writeText(selection.text);
-    const { sectionHref: href } = progress;
    const cfi = view?.getCFI(selection.index, selection.range);
    if (!cfi) return;
    const annotation: BookNote = {
      id: uniqueId(),
      type: 'excerpt',
      cfi,
-      href,
      text: selection.text,
      note: '',
-      created: Date.now(),
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
    };

    const existingIndex = annotations.findIndex(
@@ -237,7 +254,6 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    if (!selection || !selection.text) return;
    setHighlightOptionsVisible(true);
    const { booknotes: annotations = [] } = config;
-    const { sectionHref: href } = progress;
    const cfi = view?.getCFI(selection.index, selection.range);
    if (!cfi) return;
    const style = settings.globalReadSettings.highlightStyle;
@@ -246,12 +262,12 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
      id: uniqueId(),
      type: 'annotation',
      cfi,
-      href,
      style,
      color,
      text: selection.text,
      note: '',
-      created: Date.now(),
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
    };
    const existingIndex = annotations.findIndex(
      (annotation) => annotation.cfi === cfi && annotation.type === 'annotation',
@@ -263,7 +279,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
        annotations[existingIndex] = annotation;
        views.forEach((view) => view?.addAnnotation(annotation));
      } else {
-        annotations.splice(existingIndex, 1);
+        annotations[existingIndex]!.deletedAt = Date.now();
        setShowAnnotPopup(false);
      }
    } else {
@@ -357,13 +373,13 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
          popupHeight={dictPopupHeight}
        />
      )}
-      {showDeepLPopup && trianglePosition && dictPopupPosition && (
+      {showDeepLPopup && trianglePosition && translatorPopupPosition && (
        <DeepLPopup
          text={selection?.text as string}
-          position={dictPopupPosition}
+          position={translatorPopupPosition}
          trianglePosition={trianglePosition}
-          popupWidth={dictPopupWidth}
-          popupHeight={dictPopupHeight}
+          popupWidth={transPopupWidth}
+          popupHeight={transPopupHeight}
        />
      )}
      {showAnnotPopup && trianglePosition && annotPopupPosition && (
@@ -380,7 +396,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
        />
      )}

-      {toastMessage && <Toast message={toastMessage} />}
+      {toastMessage && <Toast message={toastMessage} alertClass='bg-neutual text-content' />}
    </div>
  );
 };
@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from 'react';
 import Popup from '@/components/Popup';
 import { Position } from '@/utils/sel';
-import { fetch } from '@tauri-apps/plugin-http';
 import { useSettingsStore } from '@/store/settingsStore';
+import { isWebAppPlatform } from '@/services/environment';

 const LANGUAGES = {
  AUTO: 'Auto Detect',
@@ -61,8 +61,19 @@ 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('https://api-free.deepl.com/v2/translate', {
+        const response = await fetch(url, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
@@ -78,7 +89,6 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
        if (!response.ok) {
          throw new Error('Failed to fetch translation');
        }
-
        const data = await response.json();
        const translatedText = data.translations[0]?.text;
        const detectedSource = data.translations[0]?.detected_source_language;
@@ -110,8 +120,7 @@ const DeepLPopup: React.FC<DeepLPopupProps> = ({
        width={popupWidth}
        height={popupHeight}
        position={position}
-        className='bg-neutral select-text'
-        triangleClassName='text-neutral'
+        className='select-text'
      >
        <div className='text-neutral-content relative h-[50%] overflow-y-auto border-b border-neutral-400/75 p-4 font-sans'>
          <div className='mb-2 flex items-center justify-between'>
@@ -96,7 +96,8 @@ const WikipediaPopup: React.FC<WikipediaPopupProps> = ({
      }
    };

-    const langCode = typeof lang === 'string' ? lang : lang?.[0];
+    const bookLang = typeof lang === 'string' ? lang : lang?.[0];
+    const langCode = bookLang ? bookLang.split('-')[0]! : 'en';
    fetchSummary(text, langCode);
  }, [text, lang]);

@@ -107,8 +108,7 @@ const WikipediaPopup: React.FC<WikipediaPopupProps> = ({
        height={popupHeight}
        position={position}
        trianglePosition={trianglePosition}
-        className='bg-neutral select-text overflow-y-auto'
-        triangleClassName='text-neutral'
+        className='select-text overflow-y-auto'
      >
        <main className='p-2 font-sans'></main>
        <footer className='hidden data-[state=loaded]:block data-[state=error]:hidden data-[state=loading]:hidden'>
@@ -163,8 +163,7 @@ const WiktionaryPopup: React.FC<WiktionaryPopupProps> = ({
        width={popupWidth}
        height={popupHeight}
        position={position}
-        className='bg-neutral select-text overflow-y-auto'
-        triangleClassName='text-neutral'
+        className='select-text overflow-y-auto'
      >
        <main className='p-4 font-sans' />
        <footer className='hidden data-[state=loaded]:block data-[state=error]:hidden data-[state=loading]:hidden'>
@@ -72,9 +72,9 @@ const Notebook: React.FC = ({}) => {
      type: 'annotation',
      cfi,
      note,
-      href: selection.href || '',
      text: selection.text,
-      created: Date.now(),
+      createdAt: Date.now(),
+      updatedAt: Date.now(),
    };
    annotations.push(annotation);
    const updatedConfig = updateBooknotes(sideBarBookKey, annotations);
@@ -90,7 +90,7 @@ const Notebook: React.FC = ({}) => {
    const { booknotes: annotations = [] } = config;
    const existingIndex = annotations.findIndex((item) => item.id === annotation.id);
    if (existingIndex === -1) return;
-    annotation.modified = Date.now();
+    annotation.updatedAt = Date.now();
    annotations[existingIndex] = annotation;
    const updatedConfig = updateBooknotes(sideBarBookKey, annotations);
    if (updatedConfig) {
@@ -118,10 +118,10 @@ const Notebook: React.FC = ({}) => {
  const { booknotes: allNotes = [] } = config || {};
  const annotationNotes = allNotes
    .filter((note) => note.type === 'annotation' && note.note)
-    .sort((a, b) => b.created - a.created);
+    .sort((a, b) => b.createdAt - a.createdAt);
  const excerptNotes = allNotes
    .filter((note) => note.type === 'excerpt')
-    .sort((a, b) => a.created - b.created);
+    .sort((a, b) => a.createdAt - b.createdAt);

  return isNotebookVisible ? (
    <>
@@ -6,7 +6,7 @@ import { getStyles } from '@/utils/style';
 import { useTheme } from '@/hooks/useTheme';

 const cssRegex =
-  /((?:\s*)([\w#.@*,:\-.:>+~\[\]\"=(),*\s]+)\s*{(?:[\s]*)((?:[A-Za-z\- \s]+[:]\s*['"0-9\w .,\/\()\-!#%]+;?)*)*\s*}(?:\s*))/gim;
+  /((?:\s*)([\w#.@*,:\-.:>+~$$$$\"=(),*\s]+)\s*{(?:[\s]*)((?:[^\}]+[:][^\}]+;?)*)*\s*}(?:\s*))/gim;

 const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const { settings, isFontLayoutSettingsGlobal, setSettings } = useSettingsStore();
@@ -15,6 +15,7 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
  const { themeCode } = useTheme();

  const [animated, setAnimated] = useState(viewSettings.animated!);
+  const [isDisableClick, setIsDisableClick] = useState(viewSettings.disableClick!);
  const [userStylesheet, setUserStylesheet] = useState(viewSettings.userStylesheet!);
  const [error, setError] = useState<string | null>(null);

@@ -73,6 +74,16 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [animated]);

+  useEffect(() => {
+    viewSettings.disableClick = isDisableClick;
+    setViewSettings(bookKey, viewSettings);
+    if (isFontLayoutSettingsGlobal) {
+      settings.globalViewSettings.disableClick = isDisableClick;
+      setSettings(settings);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDisableClick]);
+
  return (
    <div className='my-4 w-full space-y-6'>
      <div className='w-full'>
@@ -92,6 +103,23 @@ const MiscPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
        </div>
      </div>

+      <div className='w-full'>
+        <h2 className='mb-2 font-medium'>Behavior</h2>
+        <div className='card bg-base-100 border shadow'>
+          <div className='divide-y'>
+            <div className='config-item config-item-top config-item-bottom'>
+              <span className='text-gray-700'>Disable Click-to-Flip</span>
+              <input
+                type='checkbox'
+                className='toggle'
+                checked={isDisableClick}
+                onChange={() => setIsDisableClick(!isDisableClick)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+
      <div className='w-full'>
        <h2 className='mb-2 font-medium'>Custom CSS</h2>
        <div className={`card bg-base-100 border shadow ${error ? 'border-red-500' : ''}`}>
@@ -1,7 +1,6 @@
 import React from 'react';
 import Image from 'next/image';
 import { MdInfoOutline } from 'react-icons/md';
-import { formatAuthors } from '@/utils/book';

 interface BookCardProps {
  cover: string;
@@ -24,7 +23,7 @@ const BookCard: React.FC<BookCardProps> = ({ cover, title, author }) => {
      />
      <div className='min-w-0 flex-1'>
        <h4 className='line-clamp-2 w-[90%] text-sm font-semibold'>{title}</h4>
-        <p className='text-neutral-content truncate text-xs'>{formatAuthors(author)}</p>
+        <p className='text-neutral-content truncate text-xs'>{author}</p>
      </div>
      <button
        className='btn btn-ghost hover:bg-base-300 h-6 min-h-6 w-6 rounded-full p-0 transition-colors'
@@ -3,8 +3,10 @@ import Image from 'next/image';

 import MenuItem from '@/components/MenuItem';
 import { setAboutDialogVisible } from '@/components/AboutWindow';
-import useBooksManager from '../../hooks/useBooksManager';
 import { useLibraryStore } from '@/store/libraryStore';
+import { isWebAppPlatform } from '@/services/environment';
+import { DOWNLOAD_READEST_URL } from '@/services/constants';
+import useBooksManager from '../../hooks/useBooksManager';

 interface BookMenuProps {
  setIsDropdownOpen?: (isOpen: boolean) => void;
@@ -25,6 +27,12 @@ const BookMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
    setAboutDialogVisible(true);
    setIsDropdownOpen?.(false);
  };
+  const downloadReadest = () => {
+    window.open(DOWNLOAD_READEST_URL, '_blank');
+    setIsDropdownOpen?.(false);
+  };
+
+  const isWebApp = isWebAppPlatform();

  return (
    <div
@@ -56,6 +64,7 @@ const BookMenu: React.FC<BookMenuProps> = ({ setIsDropdownOpen }) => {
      </MenuItem>
      <MenuItem label='Reload Page' noIcon shortcut='Shift+R' onClick={handleReloadPage} />
      <hr className='border-base-200 my-1' />
+      {isWebApp && <MenuItem label='Download Readest' noIcon onClick={downloadReadest} />}
      <MenuItem label='About Readest' noIcon onClick={showAboutReadest} />
    </div>
  );
@@ -2,7 +2,7 @@ import React from 'react';

 import * as CFI from 'foliate-js/epubcfi.js';
 import { useBookDataStore } from '@/store/bookDataStore';
-import { findParentPath } from '@/utils/toc';
+import { findTocItemBS } from '@/utils/toc';
 import { TOCItem } from '@/libs/document';
 import { BookNote, BookNoteType } from '@/types/book';
 import BooknoteItem from './BooknoteItem';
@@ -26,17 +26,14 @@ const BooknoteView: React.FC<{

  const booknoteGroups: { [href: string]: BooknoteGroup } = {};
  for (const booknote of booknotes) {
-    const parentPath = findParentPath(toc, booknote.href);
-    if (parentPath.length > 0) {
-      const href = parentPath[0]!.href || '';
-      const label = parentPath[0]!.label || '';
-      const id = toc.findIndex((item) => item.href === href) || Infinity;
-      booknote.href = href;
-      if (!booknoteGroups[href]) {
-        booknoteGroups[href] = { id, href, label, booknotes: [] };
-      }
-      booknoteGroups[href].booknotes.push(booknote);
+    const tocItem = findTocItemBS(toc, booknote.cfi);
+    const href = tocItem?.href || '';
+    const label = tocItem?.label || '';
+    const id = tocItem?.id || 0;
+    if (!booknoteGroups[href]) {
+      booknoteGroups[href] = { id, href, label, booknotes: [] };
    }
+    booknoteGroups[href].booknotes.push(booknote);
  }

  Object.values(booknoteGroups).forEach((group) => {
@@ -34,7 +34,7 @@ const SearchBar: React.FC<SearchBarProps> = ({
  const view = getView(bookKey)!;
  const config = getConfig(bookKey)!;
  const progress = getProgress(bookKey)!;
-  const searchConfig = config.searchConfig!;
+  const searchConfig = config.searchConfig! as BookSearchConfig;

  const queuedSearchTerm = useRef('');
  const isSearchPending = useRef(false);
@@ -0,0 +1,34 @@
+import { getOSPlatform } from '@/utils/misc';
+
+export const useAutoHideScrollbar = () => {
+  const shouldAutoHideScrollbar = ['macos', 'ios'].includes(getOSPlatform());
+  const handleScrollbarAutoHide = (doc: Document) => {
+    if (doc && doc.defaultView && doc.defaultView.frameElement) {
+      const iframe = doc.defaultView.frameElement as HTMLIFrameElement;
+      const container = iframe.parentElement?.parentElement;
+      if (!container) return;
+
+      let hideScrollbarTimeout: ReturnType<typeof setTimeout>;
+      const showScrollbar = () => {
+        container.style.overflow = 'auto';
+        container.style.scrollbarWidth = 'thin';
+      };
+
+      const hideScrollbar = () => {
+        container.style.overflow = 'hidden';
+        container.style.scrollbarWidth = 'none';
+        requestAnimationFrame(() => {
+          container.style.overflow = 'auto';
+        });
+      };
+      container.addEventListener('scroll', () => {
+        showScrollbar();
+        clearTimeout(hideScrollbarTimeout);
+        hideScrollbarTimeout = setTimeout(hideScrollbar, 1000);
+      });
+      hideScrollbar();
+    }
+  };
+
+  return { shouldAutoHideScrollbar, handleScrollbarAutoHide };
+};
@@ -5,6 +5,7 @@ import { useReaderStore } from '@/store/readerStore';
 import { useSidebarStore } from '@/store/sidebarStore';
 import { uniqueId } from '@/utils/misc';
 import { useParallelViewStore } from '@/store/parallelViewStore';
+import { navigateToReader } from '@/utils/nav';

 const useBooksManager = () => {
  const router = useRouter();
@@ -18,11 +19,9 @@ const useBooksManager = () => {

  useEffect(() => {
    if (shouldUpdateSearchParams) {
-      const ids = bookKeys.map((key) => key.split('-')[0]).join(',');
+      const ids = bookKeys.map((key) => key.split('-')[0]!);
      if (ids) {
-        const params = new URLSearchParams(searchParams.toString());
-        params.set('ids', ids);
-        router.replace(`?${params.toString()}`, { scroll: false });
+        navigateToReader(router, ids, searchParams?.toString() || '', { scroll: false });
      }
      setShouldUpdateSearchParams(false);
    }
@@ -0,0 +1,82 @@
+import { useEffect } from 'react';
+import { FoliateView } from '@/types/view';
+import { useReaderStore } from '@/store/readerStore';
+import { eventDispatcher } from '@/utils/event';
+
+export const useClickEvent = (
+  bookKey: string,
+  viewRef: React.MutableRefObject<FoliateView | null>,
+  containerRef: React.RefObject<HTMLDivElement>,
+) => {
+  const { getViewSettings } = useReaderStore();
+  const { hoveredBookKey, setHoveredBookKey } = useReaderStore();
+  const handleTurnPage = (msg: MessageEvent | React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (msg instanceof MessageEvent) {
+      if (msg.data && msg.data.bookKey === bookKey) {
+        const viewSettings = getViewSettings(bookKey)!;
+        if (msg.data.type === 'iframe-single-click') {
+          if (viewSettings.disableClick!) {
+            return;
+          }
+          const viewElement = containerRef.current;
+          if (viewElement) {
+            const rect = viewElement.getBoundingClientRect();
+            const { screenX, screenY } = msg.data;
+            const consumed = eventDispatcher.dispatchSync('iframe-single-click', {
+              screenX,
+              screenY,
+            });
+            if (!consumed) {
+              const centerStartX = rect.left + rect.width * 0.375;
+              const centerEndX = rect.left + rect.width * 0.625;
+              const centerStartY = rect.top + rect.height * 0.375;
+              const centerEndY = rect.top + rect.height * 0.625;
+              if (
+                screenX >= centerStartX &&
+                screenX <= centerEndX &&
+                screenY >= centerStartY &&
+                screenY <= centerEndY
+              ) {
+                // toggle visibility of the header bar and the footer bar
+                setHoveredBookKey(hoveredBookKey ? '' : bookKey);
+              } else if (screenX >= rect.left + rect.width / 2) {
+                viewRef.current?.goRight();
+              } else if (screenX < rect.left + rect.width / 2) {
+                viewRef.current?.goLeft();
+              }
+            }
+          }
+        } else if (msg.data.type === 'iframe-wheel' && !viewSettings.scrolled) {
+          const { deltaY } = msg.data;
+          if (deltaY > 0) {
+            viewRef.current?.next(1);
+          } else if (deltaY < 0) {
+            viewRef.current?.prev(1);
+          }
+        }
+      }
+    } else {
+      const { clientX } = msg;
+      const width = window.innerWidth;
+      const leftThreshold = width * 0.5;
+      const rightThreshold = width * 0.5;
+      if (clientX < leftThreshold) {
+        viewRef.current?.goLeft();
+      } else if (clientX > rightThreshold) {
+        viewRef.current?.goRight();
+      }
+    }
+  };
+
+  useEffect(() => {
+    window.addEventListener('message', handleTurnPage);
+    return () => {
+      window.removeEventListener('message', handleTurnPage);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hoveredBookKey, viewRef]);
+
+  return {
+    handleTurnPage,
+  };
+};
@@ -1,21 +1,19 @@
 import { useEffect } from 'react';
-import { FoliateView } from '@/app/reader/components/FoliateViewer';
+import { FoliateView } from '@/types/view';

 type FoliateEventHandler = {
  onLoad?: (event: Event) => void;
  onRelocate?: (event: Event) => void;
+  onLinkClick?: (event: Event) => void;
  onRendererRelocate?: (event: Event) => void;
  onDrawAnnotation?: (event: Event) => void;
  onShowAnnotation?: (event: Event) => void;
 };

-export const useFoliateEvents = (
-  view: FoliateView | null,
-  handlers?: FoliateEventHandler,
-  dependencies: React.DependencyList = [],
-) => {
+export const useFoliateEvents = (view: FoliateView | null, handlers?: FoliateEventHandler) => {
  const onLoad = handlers?.onLoad;
  const onRelocate = handlers?.onRelocate;
+  const onLinkClick = handlers?.onLinkClick;
  const onRendererRelocate = handlers?.onRendererRelocate;
  const onDrawAnnotation = handlers?.onDrawAnnotation;
  const onShowAnnotation = handlers?.onShowAnnotation;
@@ -24,6 +22,7 @@ export const useFoliateEvents = (
    if (!view) return;
    if (onLoad) view.addEventListener('load', onLoad);
    if (onRelocate) view.addEventListener('relocate', onRelocate);
+    if (onLinkClick) view.addEventListener('link', onLinkClick);
    if (onRendererRelocate) view.renderer.addEventListener('relocate', onRendererRelocate);
    if (onDrawAnnotation) view.addEventListener('draw-annotation', onDrawAnnotation);
    if (onShowAnnotation) view.addEventListener('show-annotation', onShowAnnotation);
@@ -31,10 +30,11 @@ export const useFoliateEvents = (
    return () => {
      if (onLoad) view.removeEventListener('load', onLoad);
      if (onRelocate) view.removeEventListener('relocate', onRelocate);
+      if (onLinkClick) view.removeEventListener('link', onLinkClick);
      if (onRendererRelocate) view.renderer.removeEventListener('relocate', onRendererRelocate);
      if (onDrawAnnotation) view.removeEventListener('draw-annotation', onDrawAnnotation);
      if (onShowAnnotation) view.removeEventListener('show-annotation', onShowAnnotation);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [view, ...dependencies]);
+  }, [view]);
 };
@@ -0,0 +1,64 @@
+import { useEffect, useRef } from 'react';
+import { useAuth } from '@/context/AuthContext';
+import { useSync } from '@/hooks/useSync';
+import { useBookDataStore } from '@/store/bookDataStore';
+import { SYNC_NOTES_INTERVAL_SEC } from '@/services/constants';
+
+export const useNotesSync = (bookKey: string) => {
+  const { user } = useAuth();
+  const { syncedNotes, syncNotes, lastSyncedAtNotes } = useSync(bookKey);
+  const { getConfig, setConfig } = useBookDataStore();
+
+  const config = getConfig(bookKey);
+  const bookHash = bookKey.split('-')[0]!;
+
+  useEffect(() => {
+    if (!config || !user) return;
+    syncNotes([], bookHash, 'pull');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const lastSyncTime = useRef<number>(0);
+  const syncTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (!config || !user) return;
+    const bookNotes = config.booknotes ?? [];
+    const newNotes = bookNotes.filter(
+      (note) => lastSyncedAtNotes < note.updatedAt || lastSyncedAtNotes < (note.deletedAt ?? 0),
+    );
+    newNotes.forEach((note) => {
+      note.bookHash = bookHash;
+    });
+    const now = Date.now();
+    const timeSinceLastSync = now - lastSyncTime.current;
+    if (timeSinceLastSync > SYNC_NOTES_INTERVAL_SEC * 1000) {
+      lastSyncTime.current = now;
+      syncNotes(newNotes, bookHash, 'both');
+    } else {
+      if (syncTimeoutRef.current) clearTimeout(syncTimeoutRef.current);
+      syncTimeoutRef.current = setTimeout(
+        () => {
+          lastSyncTime.current = Date.now();
+          syncNotes(newNotes, bookHash, 'both');
+          syncTimeoutRef.current = null;
+        },
+        SYNC_NOTES_INTERVAL_SEC * 1000 - timeSinceLastSync,
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config]);
+
+  useEffect(() => {
+    if (syncedNotes?.length && config) {
+      const newNotes = syncedNotes.filter((note) => note.bookHash === bookHash);
+      if (!newNotes.length) return;
+      const oldNotes = config.booknotes ?? [];
+      const mergedNotes = [
+        ...oldNotes.filter((oldNote) => !newNotes.some((newNote) => newNote.id === oldNote.id)),
+        ...newNotes,
+      ];
+      setConfig(bookKey, { ...config, booknotes: mergedNotes });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [syncedNotes]);
+};
@@ -0,0 +1,91 @@
+import { useEffect, useRef } from 'react';
+import { useAuth } from '@/context/AuthContext';
+import { useSync } from '@/hooks/useSync';
+import { BookConfig } from '@/types/book';
+import { useBookDataStore } from '@/store/bookDataStore';
+import { useReaderStore } from '@/store/readerStore';
+import { useSettingsStore } from '@/store/settingsStore';
+import { deserializeConfig, serializeConfig } from '@/utils/serializer';
+import { DEFAULT_BOOK_SEARCH_CONFIG, SYNC_PROGRESS_INTERVAL_SEC } from '@/services/constants';
+
+export const useProgressSync = (
+  bookKey: string,
+  setToastMessage?: React.Dispatch<React.SetStateAction<string>>,
+) => {
+  const { getConfig, setConfig } = useBookDataStore();
+  const { getView } = useReaderStore();
+  const { settings } = useSettingsStore();
+  const { syncedConfigs, syncConfigs } = useSync(bookKey);
+  const { user } = useAuth();
+  const view = getView(bookKey);
+  const config = getConfig(bookKey);
+
+  const pushConfig = (bookKey: string, config: BookConfig | null) => {
+    if (!config || !user) return;
+    const bookHash = bookKey.split('-')[0]!;
+    const newConfig = { bookHash, ...config };
+    const compressedConfig = JSON.parse(
+      serializeConfig(newConfig, settings.globalViewSettings, DEFAULT_BOOK_SEARCH_CONFIG),
+    );
+    syncConfigs([compressedConfig], bookHash, 'push');
+  };
+
+  useEffect(() => {
+    if (!config || !user) return;
+    const bookHash = bookKey.split('-')[0]!;
+    syncConfigs([], bookHash, 'pull');
+    return () => {
+      pushConfig(bookKey, config);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const lastProgressSyncTime = useRef<number>(0);
+  const syncTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (!config || !user) return;
+    const now = Date.now();
+    const timeSinceLastSync = now - lastProgressSyncTime.current;
+    if (configSynced.current && timeSinceLastSync > SYNC_PROGRESS_INTERVAL_SEC * 1000) {
+      lastProgressSyncTime.current = now;
+      pushConfig(bookKey, config);
+    } else {
+      if (syncTimeoutRef.current) clearTimeout(syncTimeoutRef.current);
+      syncTimeoutRef.current = setTimeout(
+        () => {
+          lastProgressSyncTime.current = Date.now();
+          pushConfig(bookKey, config);
+          syncTimeoutRef.current = null;
+        },
+        SYNC_PROGRESS_INTERVAL_SEC * 1000 - timeSinceLastSync,
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [config]);
+
+  // sync progress once when the book is opened
+  const configSynced = useRef(false);
+  useEffect(() => {
+    if (!configSynced.current && syncedConfigs?.length > 0) {
+      const syncedConfig = syncedConfigs.filter((c) => c.bookHash === bookKey.split('-')[0])[0];
+      if (syncedConfig) {
+        const newConfig = deserializeConfig(
+          JSON.stringify(syncedConfig),
+          settings.globalViewSettings,
+          DEFAULT_BOOK_SEARCH_CONFIG,
+        );
+        setConfig(bookKey, { ...config, ...newConfig });
+        configSynced.current = true;
+        if ((syncedConfig.progress?.[1] ?? 0) > 0 && (config?.progress?.[1] ?? 0) > 0) {
+          const syncedFraction = syncedConfig.progress![0] / syncedConfig.progress![1];
+          const configFraction = config!.progress![0] / config!.progress![1];
+          if (syncedFraction > configFraction) {
+            view?.goToFraction(syncedFraction);
+            setToastMessage?.('Progress synced');
+          }
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [syncedConfigs]);
+};
@@ -1,47 +1,21 @@
 'use client';

-import * as React from 'react';
-import { useEffect, Suspense, useRef } from 'react';
-
-import { useEnv } from '@/context/EnvContext';
-import { useLibraryStore } from '@/store/libraryStore';
-
-import ReaderContent from './components/ReaderContent';
-import { AboutWindow } from '@/components/AboutWindow';
-import { useSettingsStore } from '@/store/settingsStore';
-
-const ReaderPage = () => {
-  const { envConfig } = useEnv();
-  const { settings, setSettings } = useSettingsStore();
-  const { library, setLibrary } = useLibraryStore();
-  const isInitiating = useRef(false);
+import { useEffect } from 'react';
+import { useTheme } from '@/hooks/useTheme';
+import { isTauriAppPlatform } from '@/services/environment';
+import { checkForAppUpdates } from '@/helpers/updater';
+import Reader from './components/Reader';

+export default function Page() {
+  useTheme();
  useEffect(() => {
-    if (isInitiating.current) return;
-    isInitiating.current = true;
-    const initLibrary = async () => {
-      const appService = await envConfig.getAppService();
-      const settings = await appService.loadSettings();
-      setSettings(settings);
-      console.log('initializing library in reader');
-      setLibrary(await appService.loadLibraryBooks());
+    const doAppUpdates = async () => {
+      if (isTauriAppPlatform()) {
+        await checkForAppUpdates();
+      }
    };
-
-    initLibrary();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    doAppUpdates();
  }, []);

-  return (
-    library.length > 0 &&
-    settings.globalReadSettings && (
-      <div className='reader-page bg-base-100 text-base-content min-h-screen select-none'>
-        <Suspense>
-          <ReaderContent settings={settings} />
-          <AboutWindow />
-        </Suspense>
-      </div>
-    )
-  );
-};
-
-export default ReaderPage;
+  return <Reader />;
+}
@@ -57,6 +57,26 @@ export const handleMouseup = (bookKey: string, event: MouseEvent) => {
  );
 };

+export const handleWheel = (bookKey: string, event: WheelEvent) => {
+  window.postMessage(
+    {
+      type: 'iframe-wheel',
+      bookKey,
+      deltaMode: event.deltaMode,
+      deltaX: event.deltaX,
+      deltaY: event.deltaY,
+      deltaZ: event.deltaZ,
+      screenX: event.screenX,
+      screenY: event.screenY,
+      clientX: event.clientX,
+      clientY: event.clientY,
+      offsetX: event.offsetX,
+      offsetY: event.offsetY,
+    },
+    '*',
+  );
+};
+
 export const handleClick = (bookKey: string, event: MouseEvent) => {
  const now = Date.now();

@@ -84,7 +104,7 @@ export const handleClick = (bookKey: string, event: MouseEvent) => {
    if (Date.now() - lastClickTime >= doubleClickThreshold) {
      let element: HTMLElement | null = event.target as HTMLElement;
      while (element) {
-        if (element.tagName.toLowerCase() === 'a') {
+        if (['sup', 'a', 'audio', 'video'].includes(element.tagName.toLowerCase())) {
          return;
        }
        element = element.parentElement;
@@ -3,6 +3,7 @@ import React from 'react';

 interface MenuItemProps {
  label: string;
+  labelClass?: string;
  shortcut?: string;
  disabled?: boolean;
  noIcon?: boolean;
@@ -13,6 +14,7 @@ interface MenuItemProps {

 const MenuItem: React.FC<MenuItemProps> = ({
  label,
+  labelClass,
  shortcut,
  disabled,
  noIcon = false,
@@ -31,7 +33,7 @@ const MenuItem: React.FC<MenuItemProps> = ({
    >
      <div className='flex items-center'>
        {!noIcon && <span style={{ minWidth: '20px' }}>{icon}</span>}
-        <span className='ml-2 max-w-32 truncate'>{label}</span>
+        <span className={clsx('ml-2 max-w-32 truncate', labelClass)}>{label}</span>
      </div>
      {shortcut && <span className='text-neutral-content text-sm'>{shortcut}</span>}
    </button>
@@ -12,8 +12,8 @@ const Popup = ({
 }: {
  width: number;
  height: number;
-  position: Position;
-  trianglePosition: Position;
+  position?: Position;
+  trianglePosition?: Position;
  children: React.ReactNode;
  className?: string;
  triangleClassName?: string;
@@ -21,24 +21,58 @@ const Popup = ({
 }) => (
  <div>
    <div
-      className={`triangle absolute z-10 ${triangleClassName}`}
+      className={`triangle text-base-200 absolute z-10 ${triangleClassName}`}
      style={{
-        left: `${trianglePosition.point.x}px`,
-        top: `${trianglePosition.point.y}px`,
-        borderLeft: '6px solid transparent',
-        borderRight: '6px solid transparent',
-        borderBottom: trianglePosition.dir === 'up' ? 'none' : `6px solid`,
-        borderTop: trianglePosition.dir === 'up' ? `6px solid` : 'none',
-        transform: 'translateX(-50%)',
+        left:
+          trianglePosition?.dir === 'left'
+            ? `${trianglePosition.point.x}px`
+            : trianglePosition?.dir === 'right'
+              ? `${trianglePosition.point.x}px`
+              : `${trianglePosition ? trianglePosition.point.x : -999}px`,
+        top:
+          trianglePosition?.dir === 'up'
+            ? `${trianglePosition.point.y}px`
+            : trianglePosition?.dir === 'down'
+              ? `${trianglePosition.point.y}px`
+              : `${trianglePosition ? trianglePosition.point.y : -999}px`,
+        borderLeft:
+          trianglePosition?.dir === 'right'
+            ? 'none'
+            : trianglePosition?.dir === 'left'
+              ? `6px solid`
+              : '6px solid transparent',
+        borderRight:
+          trianglePosition?.dir === 'left'
+            ? 'none'
+            : trianglePosition?.dir === 'right'
+              ? `6px solid`
+              : '6px solid transparent',
+        borderTop:
+          trianglePosition?.dir === 'down'
+            ? 'none'
+            : trianglePosition?.dir === 'up'
+              ? `6px solid`
+              : '6px solid transparent',
+        borderBottom:
+          trianglePosition?.dir === 'up'
+            ? 'none'
+            : trianglePosition?.dir === 'down'
+              ? `6px solid`
+              : '6px solid transparent',
+        transform:
+          trianglePosition?.dir === 'left' || trianglePosition?.dir === 'right'
+            ? 'translateY(-50%)'
+            : 'translateX(-50%)',
      }}
    />
    <div
-      className={`absolute rounded-lg font-sans shadow-lg ${className}`}
+      id='popup-container'
+      className={`bg-base-200 absolute rounded-lg font-sans shadow-xl ${className}`}
      style={{
        width: `${width}px`,
        height: `${height}px`,
-        left: `${position.point.x}px`,
-        top: `${position.point.y}px`,
+        left: `${position ? position.point.x : -999}px`,
+        top: `${position ? position.point.y : -999}px`,
        ...additionalStyle,
      }}
    >
@@ -0,0 +1,16 @@
+import { AuthProvider } from '@/context/AuthContext';
+import { EnvProvider } from '@/context/EnvContext';
+import { CSPostHogProvider } from '@/context/PHContext';
+import { SyncProvider } from '@/context/SyncContext';
+
+const Providers = ({ children }: { children: React.ReactNode }) => (
+  <CSPostHogProvider>
+    <EnvProvider>
+      <AuthProvider>
+        <SyncProvider>{children}</SyncProvider>
+      </AuthProvider>
+    </EnvProvider>
+  </CSPostHogProvider>
+);
+
+export default Providers;
@@ -1,8 +1,13 @@
+import clsx from 'clsx';
 import React from 'react';

-const Toast: React.FC<{ message: string }> = ({ message }) => (
-  <div className='toast toast-center toast-middle'>
-    <div className='alert flex items-center justify-center border-0 bg-gray-600 text-white'>
+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>{message}</span>
    </div>
  </div>
@@ -1,6 +1,9 @@
 import clsx from 'clsx';
 import React, { useEffect, useRef } from 'react';

+import { tauriHandleMinimize, tauriHandleToggleMaximize, tauriHandleClose } from '@/utils/window';
+import { isTauriAppPlatform } from '@/services/environment';
+
 interface WindowButtonsProps {
  className?: string;
  headerRef?: React.RefObject<HTMLDivElement>;
@@ -12,6 +15,24 @@ interface WindowButtonsProps {
  onClose?: () => void;
 }

+interface WindowButtonProps {
+  id: string;
+  onClick: () => void;
+  ariaLabel: string;
+  children: React.ReactNode;
+}
+
+const WindowButton: React.FC<WindowButtonProps> = ({ onClick, ariaLabel, id, children }) => (
+  <button
+    id={id}
+    onClick={onClick}
+    className='window-button text-base-content/85 hover:text-base-content'
+    aria-label={ariaLabel}
+  >
+    {children}
+  </button>
+);
+
 const WindowButtons: React.FC<WindowButtonsProps> = ({
  className,
  headerRef,
@@ -27,11 +48,11 @@ const WindowButtons: React.FC<WindowButtonsProps> = ({
  const handleMouseDown = async (e: MouseEvent) => {
    const target = e.target as HTMLElement;

-    if (target !== e.currentTarget) {
-      return;
-    }
-
-    if (target.closest('#exclude-title-bar-mousedown')) {
+    if (
+      target.closest('.btn') ||
+      target.closest('.window-button') ||
+      target.closest('.exclude-title-bar-mousedown')
+    ) {
      return;
    }

@@ -46,6 +67,7 @@ const WindowButtons: React.FC<WindowButtonsProps> = ({
  };

  useEffect(() => {
+    if (!isTauriAppPlatform()) return;
    const headerElement = headerRef?.current;
    headerElement?.addEventListener('mousedown', handleMouseDown);

@@ -58,18 +80,24 @@ const WindowButtons: React.FC<WindowButtonsProps> = ({
  const handleMinimize = async () => {
    if (onMinimize) {
      onMinimize();
+    } else {
+      tauriHandleMinimize();
    }
  };

  const handleMaximize = async () => {
    if (onToggleMaximize) {
      onToggleMaximize();
+    } else {
+      tauriHandleToggleMaximize();
    }
  };

  const handleClose = async () => {
    if (onClose) {
      onClose();
+    } else {
+      tauriHandleClose();
    }
  };

@@ -83,45 +111,30 @@ const WindowButtons: React.FC<WindowButtonsProps> = ({
      )}
    >
      {showMinimize && (
-        <button
-          onClick={handleMinimize}
-          className='window-button text-base-content'
-          aria-label='Minimize'
-          id='titlebar-minimize'
-        >
+        <WindowButton onClick={handleMinimize} ariaLabel='Minimize' id='titlebar-minimize'>
          <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'>
            <path fill='currentColor' d='M20 14H4v-2h16' />
          </svg>
-        </button>
+        </WindowButton>
      )}

      {showMaximize && (
-        <button
-          onClick={handleMaximize}
-          className='window-button text-base-content'
-          aria-label='Maximize/Restore'
-          id='titlebar-maximize'
-        >
+        <WindowButton onClick={handleMaximize} ariaLabel='Maximize/Restore' id='titlebar-maximize'>
          <svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'>
            <path fill='currentColor' d='M4 4h16v16H4zm2 4v10h12V8z' />
          </svg>
-        </button>
+        </WindowButton>
      )}

      {showClose && (
-        <button
-          onClick={handleClose}
-          className='window-button text-base-content'
-          aria-label='Close'
-          id='titlebar-close'
-        >
+        <WindowButton onClick={handleClose} ariaLabel='Close' id='titlebar-close'>
          <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>
+        </WindowButton>
      )}
    </div>
  );
@@ -1,22 +1,76 @@
 'use client';

-import React, { createContext, useState, useContext, ReactNode } from 'react';
+import React, { createContext, useState, useContext, ReactNode, useEffect } from 'react';
+import { User } from '@supabase/supabase-js';
+import { supabase } from '@/utils/supabase';

 interface AuthContextType {
  token: string | null;
-  login: (token: string) => void;
+  user: User | null;
+  login: (token: string, user: User) => void;
  logout: () => void;
 }

 const AuthContext = createContext<AuthContextType | undefined>(undefined);

 export const AuthProvider = ({ children }: { children: ReactNode }) => {
-  const [token, setToken] = useState<string | null>(null);
+  const [token, setToken] = useState<string | null>(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('token');
+    }
+    return null;
+  });
+  const [user, setUser] = useState<User | null>(() => {
+    if (typeof window !== 'undefined') {
+      const userJson = localStorage.getItem('user');
+      return userJson ? JSON.parse(userJson) : null;
+    }
+    return null;
+  });

-  const login = (newToken: string) => setToken(newToken);
-  const logout = () => setToken(null);
+  useEffect(() => {
+    const fetchSession = async () => {
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+      if (session) {
+        const { access_token, user } = session;
+        setToken(access_token);
+        setUser(user);
+        localStorage.setItem('token', access_token);
+        localStorage.setItem('user', JSON.stringify(user));
+      } else {
+        localStorage.removeItem('token');
+        localStorage.removeItem('user');
+        setToken(null);
+        setUser(null);
+      }
+    };

-  return <AuthContext.Provider value={{ token, login, logout }}>{children}</AuthContext.Provider>;
+    console.log('Fetching session');
+    fetchSession();
+  }, [token]);
+
+  const login = (newToken: string, newUser: User) => {
+    console.log('Logging in');
+    setToken(newToken);
+    setUser(newUser);
+    localStorage.setItem('token', newToken);
+    localStorage.setItem('user', JSON.stringify(newUser));
+  };
+
+  const logout = () => {
+    console.log('Logging out');
+    setToken(null);
+    setUser(null);
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    supabase.auth.signOut();
+  };
+
+  return (
+    <AuthContext.Provider value={{ token, user, login, logout }}>{children}</AuthContext.Provider>
+  );
 };

 export const useAuth = (): AuthContextType => {
@@ -0,0 +1,18 @@
+'use client';
+
+import React, { createContext, useContext } from 'react';
+import { SyncClient } from '@/libs/sync';
+
+const syncClient = new SyncClient();
+
+interface SyncContextType {
+  syncClient: SyncClient;
+}
+
+const SyncContext = createContext<SyncContextType>({ syncClient });
+
+export const SyncProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <SyncContext.Provider value={{ syncClient }}>{children}</SyncContext.Provider>;
+};
+
+export const useSyncContext = () => useContext(SyncContext);
@@ -0,0 +1,10 @@
+{
+  "library": [
+    "https://cdn.readest.com/books/a-room-of-one-s-own.epub",
+    "https://cdn.readest.com/books/hamlet.epub",
+    "https://cdn.readest.com/books/meditations.epub",
+    "https://cdn.readest.com/books/the-great-gatsby.epub",
+    "https://cdn.readest.com/books/the-scarlet-letter.epub",
+    "https://cdn.readest.com/books/this-side-of-paradise.epub"
+  ]
+}
@@ -0,0 +1,6 @@
+{
+  "library": [
+    "https://cdn.readest.com/books/four-great-classics.epub",
+    "https://cdn.readest.com/books/journey-to-the-west.epub"
+  ]
+}
@@ -0,0 +1,50 @@
+import { User } from '@supabase/supabase-js';
+import { supabase } from '@/utils/supabase';
+
+interface UseAuthCallbackOptions {
+  accessToken?: string | null;
+  refreshToken?: string | null;
+  login: (accessToken: string, user: User) => void;
+  navigate: (path: string) => void;
+  next?: string;
+}
+
+export function handleAuthCallback({
+  accessToken,
+  refreshToken,
+  login,
+  navigate,
+  next = '/',
+}: UseAuthCallbackOptions) {
+  async function finalizeSession() {
+    if (!accessToken || !refreshToken) {
+      console.error('No access token or refresh token');
+      navigate('/auth/error');
+      return;
+    }
+
+    const { error } = await supabase.auth.setSession({
+      access_token: accessToken,
+      refresh_token: refreshToken,
+    });
+
+    if (error) {
+      console.error('Error setting session:', error);
+      navigate('/auth/error');
+      return;
+    }
+
+    const {
+      data: { user },
+    } = await supabase.auth.getUser();
+    if (user) {
+      login(accessToken, user);
+      navigate(next);
+    } else {
+      console.error('Error fetching user data');
+      navigate('/auth/error');
+    }
+  }
+
+  finalizeSession();
+}
@@ -0,0 +1,43 @@
+import { isWebAppPlatform } from '@/services/environment';
+
+declare global {
+  interface Window {
+    OPEN_WITH_FILES?: string[];
+  }
+}
+
+interface CliArgument {
+  value: string;
+  occurrences: number;
+}
+
+const parseWindowOpenWithFiles = () => {
+  return window.OPEN_WITH_FILES;
+};
+
+const parseCLIOpenWithFiles = async () => {
+  const { getMatches } = await import('@tauri-apps/plugin-cli');
+  const matches = await getMatches();
+  const args = matches?.args;
+  const files: string[] = [];
+  if (args) {
+    for (const name of ['file1', 'file2', 'file3', 'file4']) {
+      const arg = args[name] as CliArgument;
+      if (arg && arg.occurrences > 0) {
+        files.push(arg.value);
+      }
+    }
+  }
+
+  return files;
+};
+
+export const parseOpenWithFiles = async () => {
+  if (isWebAppPlatform()) return [];
+
+  let files = parseWindowOpenWithFiles();
+  if (!files) {
+    files = await parseCLIOpenWithFiles();
+  }
+  return files;
+};
@@ -0,0 +1,44 @@
+import { check } from '@tauri-apps/plugin-updater';
+import { ask } from '@tauri-apps/plugin-dialog';
+import { relaunch } from '@tauri-apps/plugin-process';
+
+export const checkForAppUpdates = async () => {
+  const update = await check();
+  if (update) {
+    const yes = await ask(
+      `
+      Update to ${update.version} is available!
+      Release notes: ${update.body}
+      `,
+      {
+        title: 'Update Now!',
+        kind: 'info',
+        okLabel: 'Update',
+        cancelLabel: 'Cancel',
+      },
+    );
+
+    if (yes) {
+      console.log(`found update ${update.version} from ${update.date} with notes ${update.body}`);
+      let downloaded = 0;
+      let contentLength = 0;
+      await update.downloadAndInstall((event) => {
+        switch (event.event) {
+          case 'Started':
+            contentLength = event.data.contentLength!;
+            console.log(`started downloading ${event.data.contentLength} bytes`);
+            break;
+          case 'Progress':
+            downloaded += event.data.chunkLength;
+            console.log(`downloaded ${downloaded} from ${contentLength}`);
+            break;
+          case 'Finished':
+            console.log('download finished');
+            break;
+        }
+      });
+      console.log('update installed');
+      await relaunch();
+    }
+  }
+};
@@ -0,0 +1,201 @@
+import { useEffect, useState } from 'react';
+import { useSyncContext } from '@/context/SyncContext';
+import { SyncData, SyncOp, SyncResult, SyncType } from '@/libs/sync';
+import { useSettingsStore } from '@/store/settingsStore';
+import { useBookDataStore } from '@/store/bookDataStore';
+import { transformBookConfigFromDB } from '@/utils/transform';
+import { transformBookNoteFromDB } from '@/utils/transform';
+import { transformBookFromDB } from '@/utils/transform';
+import { DBBook, DBBookConfig, DBBookNote } from '@/types/records';
+import { Book, BookConfig, BookDataRecord, BookNote } from '@/types/book';
+
+const transformsFromDB = {
+  books: transformBookFromDB,
+  notes: transformBookNoteFromDB,
+  configs: transformBookConfigFromDB,
+};
+
+const computeMaxTimestamp = (records: BookDataRecord[]): number => {
+  let maxTime = 0;
+  for (const rec of records) {
+    if (rec.updated_at) {
+      const updatedTime = new Date(rec.updated_at).getTime();
+      maxTime = Math.max(maxTime, updatedTime);
+    }
+    if (rec.deleted_at) {
+      const deletedTime = new Date(rec.deleted_at).getTime();
+      maxTime = Math.max(maxTime, deletedTime);
+    }
+  }
+  return maxTime;
+};
+
+export function useSync(bookKey?: string) {
+  const { settings } = useSettingsStore();
+  const { getConfig, setConfig } = useBookDataStore();
+  const config = bookKey ? getConfig(bookKey) : null;
+
+  const [syncingBooks, setSyncingBooks] = useState(false);
+  const [syncingConfigs, setSyncingConfigs] = useState(false);
+  const [syncingNotes, setSyncingNotes] = useState(false);
+
+  const [syncError, setSyncError] = useState<string | null>(null);
+  const [lastSyncedAtBooks, setLastSyncedAtBooks] = useState<number>(
+    settings.lastSyncedAtBooks ?? 0,
+  );
+  const [lastSyncedAtConfigs, setLastSyncedAtConfigs] = useState<number>(
+    config?.lastSyncedAtConfig ?? settings.lastSyncedAtConfigs ?? 0,
+  );
+  const [lastSyncedAtNotes, setLastSyncedAtNotes] = useState<number>(
+    config?.lastSyncedAtNotes ?? settings.lastSyncedAtNotes ?? 0,
+  );
+
+  const [syncing, setSyncing] = useState(false);
+  const [syncResult, setSyncResult] = useState<SyncResult>({
+    books: [],
+    configs: [],
+    notes: [],
+  });
+  const [syncedBooks, setSyncedBooks] = useState<Book[]>([]);
+  const [syncedConfigs, setSyncedConfigs] = useState<BookConfig[]>([]);
+  const [syncedNotes, setSyncedNotes] = useState<BookNote[]>([]);
+
+  const { syncClient } = useSyncContext();
+
+  // bookId is for configs and notes only, if bookId is provided, only pull changes for that book
+  // and update the lastSyncedAt for that book in the book config
+  const pullChanges = async (
+    type: SyncType,
+    since: number,
+    setLastSyncedAt: React.Dispatch<React.SetStateAction<number>>,
+    setSyncing: React.Dispatch<React.SetStateAction<boolean>>,
+    bookId?: string,
+  ) => {
+    setSyncing(true);
+    setSyncError(null);
+
+    try {
+      const result = await syncClient.pullChanges(since, type, bookId);
+      const records = result[type];
+      if (!records.length) return;
+      const maxTime = computeMaxTimestamp(result[type]);
+      setLastSyncedAt(maxTime);
+      setSyncResult(result);
+      switch (type) {
+        case 'books':
+          settings.lastSyncedAtBooks = maxTime;
+          break;
+        case 'configs':
+          if (!bookId) {
+            settings.lastSyncedAtConfigs = maxTime;
+          } else if (bookKey && config) {
+            config.lastSyncedAtConfig = maxTime;
+            setConfig(bookKey, config);
+          }
+          break;
+        case 'notes':
+          if (!bookId) {
+            settings.lastSyncedAtNotes = maxTime;
+          } else if (bookKey && config) {
+            config.lastSyncedAtNotes = maxTime;
+            setConfig(bookKey, config);
+          }
+          break;
+      }
+    } catch (err: unknown) {
+      console.error(err);
+      if (err instanceof Error) {
+        setSyncError(err.message || `Error pulling ${type}`);
+      } else {
+        setSyncError(`Error pulling ${type}`);
+      }
+    } finally {
+      setSyncing(false);
+    }
+  };
+
+  const pushChanges = async (payload: SyncData) => {
+    setSyncing(true);
+    setSyncError(null);
+
+    try {
+      const result = await syncClient.pushChanges(payload);
+      setSyncResult(result);
+    } catch (err: unknown) {
+      console.error(err);
+      if (err instanceof Error) {
+        setSyncError(err.message || 'Error pushing changes');
+      } else {
+        setSyncError('Error pushing changes');
+      }
+    } finally {
+      setSyncing(false);
+    }
+  };
+
+  const syncBooks = async (books?: Book[], op: SyncOp = 'both') => {
+    if ((op === 'push' || op === 'both') && books?.length) {
+      await pushChanges({ books });
+    }
+    if (op === 'pull' || op === 'both') {
+      await pullChanges('books', lastSyncedAtBooks, setLastSyncedAtBooks, setSyncingBooks);
+    }
+  };
+
+  const syncConfigs = async (bookConfigs?: BookConfig[], bookId?: string, op: SyncOp = 'both') => {
+    if ((op === 'push' || op === 'both') && bookConfigs?.length) {
+      await pushChanges({ configs: bookConfigs });
+    }
+    if (op === 'pull' || op === 'both') {
+      await pullChanges(
+        'configs',
+        lastSyncedAtConfigs,
+        setLastSyncedAtConfigs,
+        setSyncingConfigs,
+        bookId,
+      );
+    }
+  };
+
+  const syncNotes = async (bookNotes?: BookNote[], bookId?: string, op: SyncOp = 'both') => {
+    if ((op === 'push' || op === 'both') && bookNotes?.length) {
+      await pushChanges({ notes: bookNotes });
+    }
+    if (op === 'pull' || op === 'both') {
+      await pullChanges('notes', lastSyncedAtNotes, setLastSyncedAtNotes, setSyncingNotes, bookId);
+    }
+  };
+
+  useEffect(() => {
+    if (!syncing && syncResult) {
+      const { books: dbBooks, configs: dbBookConfigs, notes: dbBookNotes } = syncResult;
+      const books = dbBooks.map((dbBook) => transformsFromDB['books'](dbBook as unknown as DBBook));
+      const configs = dbBookConfigs.map((dbBookConfig) =>
+        transformsFromDB['configs'](dbBookConfig as unknown as DBBookConfig),
+      );
+      const notes = dbBookNotes.map((dbBookNote) =>
+        transformsFromDB['notes'](dbBookNote as unknown as DBBookNote),
+      );
+      if (books.length) setSyncedBooks(books);
+      if (configs.length) setSyncedConfigs(configs);
+      if (notes.length) setSyncedNotes(notes);
+    }
+  }, [syncResult, syncing]);
+
+  return {
+    syncing: syncingBooks || syncingConfigs || syncingNotes,
+    syncError,
+    syncResult,
+    syncedBooks,
+    syncedConfigs,
+    syncedNotes,
+    lastSyncedAtBooks,
+    lastSyncedAtNotes,
+    lastSyncedAtConfigs,
+    pullChanges,
+    pushChanges,
+    syncBooks,
+    syncConfigs,
+    syncNotes,
+  };
+}
@@ -30,7 +30,10 @@ const useTrafficLight = () => {
  };

  useEffect(() => {
+    if (!appService?.hasTrafficLight) return;
+
    handleSwitchFullScreen();
+
    return () => {
      unlistenEnterFullScreen?.();
      unlistenExitFullScreen?.();
@@ -1,4 +1,5 @@
 import { BookFormat } from '@/types/book';
+import * as epubcfi from 'foliate-js/epubcfi.js';

 // A groupBy polyfill for foliate-js
 Object.groupBy ??= (iterable, callbackfn) => {
@@ -30,15 +31,24 @@ Map.groupBy ??= (iterable, callbackfn) => {
  return map;
 };

+export const CFI = epubcfi;
+
 export type DocumentFile = File;

 export interface TOCItem {
  id: number;
  label: string;
  href: string;
+  cfi?: string;
  subitems?: TOCItem[];
 }

+export interface SectionItem {
+  id: string;
+  cfi: string;
+  size: number;
+}
+
 export interface BookDoc {
  metadata: {
    title: string;
@@ -48,6 +58,8 @@ export interface BookDoc {
    publisher?: string;
  };
  toc: Array<TOCItem>;
+  sections: Array<SectionItem>;
+  splitTOCHref(href: string): Array<string | number>;
  getCover(): Promise<Blob | null>;
 }

@@ -166,3 +178,11 @@ export class DocumentLoader {
    return { book, format } as { book: BookDoc; format: BookFormat };
  }
 }
+
+export const getDirection = (doc: Document) => {
+  const { defaultView } = doc;
+  const { writingMode, direction } = defaultView!.getComputedStyle(doc.body);
+  const vertical = writingMode === 'vertical-rl' || writingMode === 'vertical-lr';
+  const rtl = doc.body.dir === 'rtl' || direction === 'rtl' || doc.documentElement.dir === 'rtl';
+  return { vertical, rtl };
+};
@@ -0,0 +1,79 @@
+import { supabase } from '@/utils/supabase';
+import { Book, BookConfig, BookNote, BookDataRecord } from '@/types/book';
+import { READEST_WEB_BASE_URL } from '@/services/constants';
+
+const BASE_URL = process.env['NODE_ENV'] === 'production' ? READEST_WEB_BASE_URL : '';
+
+export type SyncType = 'books' | 'configs' | 'notes';
+export type SyncOp = 'push' | 'pull' | 'both';
+
+interface BookRecord extends BookDataRecord, Book {}
+interface BookConfigRecord extends BookDataRecord, BookConfig {}
+interface BookNoteRecord extends BookDataRecord, BookNote {}
+
+export interface SyncResult {
+  books: BookRecord[];
+  notes: BookNoteRecord[];
+  configs: BookConfigRecord[];
+}
+
+export interface SyncData {
+  books?: Partial<BookRecord>[];
+  notes?: Partial<BookNoteRecord>[];
+  configs?: Partial<BookConfigRecord>[];
+}
+
+export class SyncClient {
+  /**
+   * Pull incremental changes since a given timestamp (in ms).
+   * Returns updated or deleted records since that time.
+   */
+  async pullChanges(since: number, type?: SyncType, book?: string): Promise<SyncResult> {
+    const token = await this.getAccessToken();
+    if (!token) throw new Error('Not authenticated');
+
+    const url = `${BASE_URL}/api/sync?since=${encodeURIComponent(since)}&type=${type ?? ''}&book=${book ?? ''}`;
+    const res = await fetch(url, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+
+    if (!res.ok) {
+      const error = await res.json();
+      throw new Error(`Failed to pull changes: ${error.error || res.statusText}`);
+    }
+
+    return res.json();
+  }
+
+  /**
+   * Push local changes to the server.
+   * Uses last-writer-wins logic as implemented on the server side.
+   */
+  async pushChanges(payload: SyncData): Promise<SyncResult> {
+    const token = await this.getAccessToken();
+    if (!token) throw new Error('Not authenticated');
+
+    const res = await fetch(`${BASE_URL}/api/sync`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`,
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (!res.ok) {
+      const error = await res.json();
+      throw new Error(`Failed to push changes: ${error.error || res.statusText}`);
+    }
+
+    return res.json();
+  }
+
+  private async getAccessToken(): Promise<string | null> {
+    const { data } = await supabase.auth.getSession();
+    return data?.session?.access_token ?? null;
+  }
+}
@@ -0,0 +1,15 @@
+import { AppProps } from 'next/app';
+import Providers from '@/components/Providers';
+
+import '../styles/globals.css';
+import '../styles/fonts.css';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <Providers>
+      <Component {...pageProps} />
+    </Providers>
+  );
+}
+
+export default MyApp;
@@ -0,0 +1,281 @@
+import Cors from 'cors';
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { NextRequest, NextResponse } from 'next/server';
+import { PostgrestError } from '@supabase/supabase-js';
+import { supabase, createSupabaseClient } from '@/utils/supabase';
+import { BookDataRecord } from '@/types/book';
+import { transformBookConfigToDB } from '@/utils/transform';
+import { transformBookNoteToDB } from '@/utils/transform';
+import { transformBookToDB } from '@/utils/transform';
+import { SyncData, SyncResult, SyncType } from '@/libs/sync';
+
+const transformsToDB = {
+  books: transformBookToDB,
+  book_notes: transformBookNoteToDB,
+  book_configs: transformBookConfigToDB,
+};
+
+const DBSyncTypeMap = {
+  books: 'books',
+  book_notes: 'notes',
+  book_configs: 'configs',
+};
+
+type TableName = keyof typeof transformsToDB;
+
+type DBError = { table: TableName; error: PostgrestError };
+
+const getUserAndToken = async (req: NextRequest) => {
+  const authHeader = req.headers.get('authorization');
+  if (!authHeader) return {};
+
+  const token = authHeader.replace('Bearer ', '');
+  const {
+    data: { user },
+    error,
+  } = await supabase.auth.getUser(token);
+
+  if (error || !user) return {};
+  return { user, token };
+};
+
+export async function GET(req: NextRequest) {
+  const { user, token } = await getUserAndToken(req);
+  if (!user || !token) {
+    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+  }
+  const supabase = createSupabaseClient(token);
+
+  const { searchParams } = new URL(req.url);
+  const sinceParam = searchParams.get('since');
+  const typeParam = searchParams.get('type') as SyncType | undefined;
+  const bookParam = searchParams.get('book');
+
+  if (!sinceParam) {
+    return NextResponse.json({ error: '"since" query parameter is required' }, { status: 400 });
+  }
+
+  const since = new Date(Number(sinceParam));
+  if (isNaN(since.getTime())) {
+    return NextResponse.json({ error: 'Invalid "since" timestamp' }, { status: 400 });
+  }
+
+  const sinceIso = since.toISOString();
+
+  try {
+    const results: SyncResult = { books: [], configs: [], notes: [] };
+    const errors: Record<TableName, DBError | null> = {
+      books: null,
+      book_notes: null,
+      book_configs: null,
+    };
+
+    const queryTables = async (table: TableName) => {
+      let query = supabase.from(table).select('*').eq('user_id', user.id);
+      if (bookParam) {
+        query.eq('book_hash', bookParam);
+      }
+      query = query.or(`updated_at.gt.${sinceIso},deleted_at.gt.${sinceIso}`);
+      console.log('Querying table:', table, 'since:', sinceIso);
+      const { data, error } = await query;
+      if (error) throw { table, error } as DBError;
+      results[DBSyncTypeMap[table] as SyncType] = data || [];
+    };
+
+    if (!typeParam || typeParam === 'books') {
+      await queryTables('books').catch((err) => (errors['books'] = err));
+    }
+    if (!typeParam || typeParam === 'configs') {
+      await queryTables('book_configs').catch((err) => (errors['book_configs'] = err));
+    }
+    if (!typeParam || typeParam === 'notes') {
+      await queryTables('book_notes').catch((err) => (errors['book_notes'] = err));
+    }
+
+    const dbErrors = Object.values(errors).filter((err) => err !== null);
+    if (dbErrors.length > 0) {
+      console.error('Errors occurred:', dbErrors);
+      const errorMsg = dbErrors
+        .map((err) => `${err.table}: ${err.error.message || 'Unknown error'}`)
+        .join('; ');
+      return NextResponse.json({ error: errorMsg }, { status: 500 });
+    }
+
+    return NextResponse.json(results, { status: 200 });
+  } catch (error: unknown) {
+    console.error(error);
+    const errorMessage = (error as PostgrestError).message || 'Unknown error';
+    return NextResponse.json({ error: errorMessage }, { status: 500 });
+  }
+}
+
+export async function POST(req: NextRequest) {
+  const { user, token } = await getUserAndToken(req);
+  if (!user || !token) {
+    return NextResponse.json({ error: 'Not authenticated' }, { status: 401 });
+  }
+  const supabase = createSupabaseClient(token);
+
+  const body = await req.json();
+  const { books = [], configs = [], notes = [] } = body as SyncData;
+
+  const upsertRecords = async (
+    table: TableName,
+    primaryKeys: (keyof BookDataRecord)[],
+    records: BookDataRecord[],
+  ) => {
+    const authoritativeRecords: BookDataRecord[] = [];
+
+    for (const rec of records) {
+      const dbRec = transformsToDB[table](rec, user.id);
+      rec.user_id = user.id;
+      rec.book_hash = dbRec.book_hash;
+      const matchConditions: Record<string, string | number> = { user_id: user.id };
+      for (const pk of primaryKeys) {
+        matchConditions[pk] = rec[pk]!;
+      }
+
+      const { data: serverData, error: fetchError } = await supabase
+        .from(table)
+        .select()
+        .match(matchConditions)
+        .single();
+
+      if (fetchError && fetchError.code !== 'PGRST116') {
+        return { error: fetchError.message };
+      }
+
+      if (!serverData) {
+        const { data: inserted, error: insertError } = await supabase
+          .from(table)
+          .insert(dbRec)
+          .select()
+          .single();
+        console.log('Inserted record:', inserted);
+        if (insertError) return { error: insertError.message };
+        authoritativeRecords.push(inserted);
+      } else {
+        const clientUpdatedAt = dbRec.updated_at ? new Date(dbRec.updated_at).getTime() : 0;
+        const serverUpdatedAt = serverData.updated_at
+          ? new Date(serverData.updated_at).getTime()
+          : 0;
+        const clientDeletedAt = dbRec.deleted_at ? new Date(dbRec.deleted_at).getTime() : 0;
+        const serverDeletedAt = serverData.deleted_at
+          ? new Date(serverData.deleted_at).getTime()
+          : 0;
+        const clientIsNewer =
+          clientDeletedAt > serverDeletedAt || clientUpdatedAt > serverUpdatedAt;
+
+        if (clientIsNewer) {
+          const { data: updated, error: updateError } = await supabase
+            .from(table)
+            .update(dbRec)
+            .match(matchConditions)
+            .select()
+            .single();
+          console.log('Updated record:', updated);
+          if (updateError) return { error: updateError.message };
+          authoritativeRecords.push(updated);
+        } else {
+          authoritativeRecords.push(serverData);
+        }
+      }
+    }
+
+    return { data: authoritativeRecords };
+  };
+
+  try {
+    const [booksResult, configsResult, notesResult] = await Promise.all([
+      upsertRecords('books', ['book_hash'], books as BookDataRecord[]),
+      upsertRecords('book_configs', ['book_hash'], configs as BookDataRecord[]),
+      upsertRecords('book_notes', ['book_hash', 'id'], notes as BookDataRecord[]),
+    ]);
+
+    if (booksResult?.error) throw new Error(booksResult.error);
+    if (configsResult?.error) throw new Error(configsResult.error);
+    if (notesResult?.error) throw new Error(notesResult.error);
+
+    return NextResponse.json(
+      {
+        books: booksResult?.data || [],
+        configs: configsResult?.data || [],
+        notes: notesResult?.data || [],
+      },
+      { status: 200 },
+    );
+  } catch (error: unknown) {
+    console.error(error);
+    const errorMessage = (error as PostgrestError).message || 'Unknown error';
+    return NextResponse.json({ error: errorMessage }, { status: 500 });
+  }
+}
+
+// Helper method to wait for a middleware to execute before continuing
+// And to throw an error when an error happens in a middleware
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+function runMiddleware(req: NextApiRequest, res: NextApiResponse, fn: Function) {
+  return new Promise((resolve, reject) => {
+    fn(req, res, (result: unknown) => {
+      if (result instanceof Error) {
+        return reject(result);
+      }
+
+      return resolve(result);
+    });
+  });
+}
+
+const cors = Cors({
+  methods: ['POST', 'GET', 'HEAD'],
+});
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (!req.url) {
+    return res.status(400).json({ error: 'Invalid request URL' });
+  }
+
+  const protocol = process.env['PROTOCOL'] || 'http';
+  const host = process.env['HOST'] || 'localhost:3000';
+  const url = new URL(req.url, `${protocol}://${host}`);
+
+  await runMiddleware(req, res, cors);
+
+  try {
+    let response: Response;
+
+    if (req.method === 'GET') {
+      const nextReq = new NextRequest(url.toString(), {
+        headers: new Headers(req.headers as Record<string, string>),
+        method: 'GET',
+      });
+      response = await GET(nextReq);
+    } else if (req.method === 'POST') {
+      const nextReq = new NextRequest(url.toString(), {
+        headers: new Headers(req.headers as Record<string, string>),
+        method: 'POST',
+        body: JSON.stringify(req.body), // Ensure the body is a string
+      });
+      response = await POST(nextReq);
+    } else {
+      res.setHeader('Allow', ['GET', 'POST']);
+      return res.status(405).end(`Method ${req.method} Not Allowed`);
+    }
+
+    res.status(response.status);
+
+    response.headers.forEach((value, key) => {
+      res.setHeader(key, value);
+    });
+
+    const arrayBuffer = await response.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+
+    res.send(buffer);
+  } catch (error) {
+    console.error('Error processing request:', error);
+    res.status(500).json({ error: 'Internal Server Error' });
+  }
+};
+
+export default handler;
@@ -0,0 +1,22 @@
+import { useRouter } from 'next/router';
+import { AuthProvider } from '@/context/AuthContext';
+import { EnvProvider } from '@/context/EnvContext';
+import { CSPostHogProvider } from '@/context/PHContext';
+import { SyncProvider } from '@/context/SyncContext';
+import Reader from '@/app/reader/components/Reader';
+
+export default function Page() {
+  const router = useRouter();
+  const ids = router.query['ids'] as string;
+  return (
+    <CSPostHogProvider>
+      <EnvProvider>
+        <AuthProvider>
+          <SyncProvider>
+            <Reader ids={ids} />
+          </SyncProvider>
+        </AuthProvider>
+      </EnvProvider>
+    </CSPostHogProvider>
+  );
+}
@@ -1,8 +1,8 @@
-import { AppService, ToastType } from '@/types/system';
+import { AppPlatform, AppService, ToastType } from '@/types/system';

 import { SystemSettings } from '@/types/settings';
 import { FileSystem, BaseDir } from '@/types/system';
-import { Book, BookConfig, BookContent, BookFormat, ViewSettings } from '@/types/book';
+import { Book, BookConfig, BookContent, BookFormat } from '@/types/book';
 import {
  getDir,
  getFilename,
@@ -11,6 +11,8 @@ import {
  getConfigFilename,
  getLibraryFilename,
  INIT_BOOK_CONFIG,
+  formatTitle,
+  formatAuthors,
 } from '@/utils/book';
 import { RemoteFile } from '@/utils/file';
 import { partialMD5 } from '@/utils/md5';
@@ -23,17 +25,20 @@ import {
  SYSTEM_SETTINGS_VERSION,
  DEFAULT_BOOK_SEARCH_CONFIG,
 } from './constants';
+import { isValidURL } from '@/utils/misc';
+import { deserializeConfig, serializeConfig } from '@/utils/serializer';

 export abstract class BaseAppService implements AppService {
  localBooksDir: string = '';
+  abstract fs: FileSystem;
+  abstract appPlatform: AppPlatform;
  abstract isAppDataSandbox: boolean;
  abstract hasTrafficLight: boolean;
-  abstract fs: FileSystem;

  abstract resolvePath(fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string };
  abstract getCoverImageUrl(book: Book): string;
+  abstract getCoverImageBlobUrl(book: Book): Promise<string>;
  abstract getInitBooksDir(): Promise<string>;
-  abstract selectDirectory(title: string): Promise<string>;
  abstract selectFiles(name: string, extensions: string[]): Promise<string[]>;
  abstract showMessage(
    msg: string,
@@ -66,6 +71,10 @@ export abstract class BaseAppService implements AppService {
      settings = {
        version: SYSTEM_SETTINGS_VERSION,
        localBooksDir: await this.getInitBooksDir(),
+        lastSyncedAtBooks: 0,
+        lastSyncedAtConfigs: 0,
+        lastSyncedAtNotes: 0,
+        keepLogin: false,
        globalReadSettings: DEFAULT_READSETTINGS,
        globalViewSettings: {
          ...DEFAULT_BOOK_LAYOUT,
@@ -92,8 +101,10 @@ export abstract class BaseAppService implements AppService {
  async importBook(
    file: string | File,
    books: Book[],
+    saveBook: boolean = true,
+    saveCover: boolean = true,
    overwrite: boolean = false,
-  ): Promise<Book[]> {
+  ): Promise<Book | null> {
    try {
      let loadedBook: BookDoc;
      let format: BookFormat;
@@ -120,32 +131,31 @@ export abstract class BaseAppService implements AppService {
      const hash = await partialMD5(fileobj);
      const existingBook = books.filter((b) => b.hash === hash)[0];
      if (existingBook) {
-        if (existingBook.isRemoved) {
-          delete existingBook.isRemoved;
+        if (existingBook.deletedAt) {
+          delete existingBook.deletedAt;
        }
-        existingBook.lastUpdated = Date.now();
+        existingBook.updatedAt = Date.now();
      }

      const book: Book = {
        hash,
        format,
-        title: loadedBook.metadata.title,
-        author: loadedBook.metadata.author,
-        lastUpdated: Date.now(),
+        title: formatTitle(loadedBook.metadata.title),
+        author: formatAuthors(loadedBook.metadata.language, loadedBook.metadata.author),
+        createdAt: existingBook ? existingBook.createdAt : Date.now(),
+        updatedAt: Date.now(),
      };
-      book.coverImageUrl = this.getCoverImageUrl(book);
-
      if (!(await this.fs.exists(getDir(book), 'Books'))) {
        await this.fs.createDir(getDir(book), 'Books');
      }
-      if (!(await this.fs.exists(getFilename(book), 'Books')) || overwrite) {
-        if (typeof file === 'string') {
+      if (saveBook && (!(await this.fs.exists(getFilename(book), 'Books')) || overwrite)) {
+        if (typeof file === 'string' && !isValidURL(file)) {
          await this.fs.copyFile(file, getFilename(book), 'Books');
        } else {
-          await this.fs.writeFile(getFilename(book), 'Books', await file.arrayBuffer());
+          await this.fs.writeFile(getFilename(book), 'Books', await fileobj.arrayBuffer());
        }
      }
-      if (!(await this.fs.exists(getCoverFilename(book), 'Books')) || overwrite) {
+      if (saveCover && (!(await this.fs.exists(getCoverFilename(book), 'Books')) || overwrite)) {
        const cover = await loadedBook.getCover();
        if (cover) {
          await this.fs.writeFile(getCoverFilename(book), 'Books', await cover.arrayBuffer());
@@ -156,11 +166,21 @@ export abstract class BaseAppService implements AppService {
        await this.saveBookConfig(book, INIT_BOOK_CONFIG);
        books.splice(0, 0, book);
      }
+
+      if (typeof file === 'string' && isValidURL(file)) {
+        book.url = file;
+      }
+      if (this.appPlatform === 'web') {
+        book.coverImageUrl = await this.getCoverImageBlobUrl(book);
+      } else {
+        book.coverImageUrl = this.getCoverImageUrl(book);
+      }
+
+      return book;
    } catch (error) {
      throw error;
    }
-
-    return books;
+    return null;
  }

  async deleteBook(book: Book): Promise<void> {
@@ -172,44 +192,46 @@ export abstract class BaseAppService implements AppService {
  }

  async loadBookContent(book: Book, settings: SystemSettings): Promise<BookContent> {
+    let file: File;
    const fp = getFilename(book);
-    const file = await new RemoteFile(this.fs.getURL(`${this.localBooksDir}/${fp}`), fp).open();
+    if (await this.fs.exists(fp, 'Books')) {
+      if (this.appPlatform === 'web') {
+        const content = await this.fs.readFile(fp, 'Books', 'binary');
+        file = new File([content], fp);
+      } else {
+        file = await new RemoteFile(this.fs.getURL(`${this.localBooksDir}/${fp}`), fp).open();
+      }
+    } else if (book.url) {
+      file = await new RemoteFile(book.url).open();
+    } else {
+      throw new Error('Book file not found');
+    }
    return { book, file, config: await this.loadBookConfig(book, settings) };
  }

  async loadBookConfig(book: Book, settings: SystemSettings): Promise<BookConfig> {
    try {
      const str = await this.fs.readFile(getConfigFilename(book), 'Books', 'text');
-      const config = JSON.parse(str as string) as BookConfig;
      const { globalViewSettings } = settings;
-      const { viewSettings } = config;
-      config.viewSettings = { ...globalViewSettings, ...viewSettings };
-      config.searchConfig ??= DEFAULT_BOOK_SEARCH_CONFIG;
-      return config;
+      return deserializeConfig(str as string, globalViewSettings, DEFAULT_BOOK_SEARCH_CONFIG);
    } catch {
      return INIT_BOOK_CONFIG;
    }
  }

  async saveBookConfig(book: Book, config: BookConfig, settings?: SystemSettings) {
+    let serializedConfig: string;
    if (settings) {
-      config = JSON.parse(JSON.stringify(config));
-      const globalViewSettings = settings.globalViewSettings as ViewSettings;
-      const viewSettings = config.viewSettings as Partial<ViewSettings>;
-      config.viewSettings = Object.entries(viewSettings).reduce(
-        (acc: Partial<Record<keyof ViewSettings, unknown>>, [key, value]) => {
-          if (globalViewSettings[key as keyof ViewSettings] !== value) {
-            acc[key as keyof ViewSettings] = value;
-          }
-          return acc;
-        },
-        {} as Partial<Record<keyof ViewSettings, unknown>>,
-      ) as Partial<ViewSettings>;
+      const { globalViewSettings } = settings;
+      serializedConfig = serializeConfig(config, globalViewSettings, DEFAULT_BOOK_SEARCH_CONFIG);
+    } else {
+      serializedConfig = JSON.stringify(config);
    }
-    await this.fs.writeFile(getConfigFilename(book), 'Books', JSON.stringify(config));
+    await this.fs.writeFile(getConfigFilename(book), 'Books', serializedConfig);
  }

  async loadLibraryBooks(): Promise<Book[]> {
+    console.log('Loading library books...');
    let books: Book[] = [];
    const libraryFilename = getLibraryFilename();

@@ -221,9 +243,17 @@ export abstract class BaseAppService implements AppService {
      await this.fs.writeFile(libraryFilename, 'Books', '[]');
    }

-    books.forEach((book) => {
-      book.coverImageUrl = this.getCoverImageUrl(book);
-    });
+    await Promise.all(
+      books.map(async (book) => {
+        if (this.appPlatform === 'web') {
+          book.coverImageUrl = await this.getCoverImageBlobUrl(book);
+        } else {
+          book.coverImageUrl = this.getCoverImageUrl(book);
+        }
+        book.updatedAt ??= book.lastUpdated || Date.now();
+        return book;
+      }),
+    );

    return books;
  }
@@ -4,6 +4,9 @@ import { ReadSettings } from '@/types/settings';
 export const LOCAL_BOOKS_SUBDIR = 'Readest/Books';
 export const CLOUD_BOOKS_SUBDIR = 'Readest/Books';

+export const SUPPORTED_FILE_EXTS = ['epub', 'mobi', 'azw', 'azw3', 'fb2', 'cbz', 'pdf'];
+export const FILE_ACCEPT_FORMATS = SUPPORTED_FILE_EXTS.map((ext) => `.${ext}`).join(', ');
+
 export const DEFAULT_READSETTINGS: ReadSettings = {
  sideBarWidth: '25%',
  isSideBarPinned: true,
@@ -35,10 +38,12 @@ export const DEFAULT_BOOK_LAYOUT: BookLayout = {
  marginPx: 44,
  gapPercent: 5,
  scrolled: false,
+  disableClick: false,
  maxColumnCount: 2,
  maxInlineSize: 720,
  maxBlockSize: 1440,
  animated: false,
+  vertical: false,
 };

 export const DEFAULT_BOOK_STYLE: BookStyle = {
@@ -75,3 +80,12 @@ export const SANS_SERIF_FONTS = ['Roboto', 'Noto Sans', 'Open Sans', 'Helvetica'
 export const MONOSPACE_FONTS = ['Fira Code', 'Lucida Console', 'Consolas', 'Courier New'];

 export const ONE_COLUMN_MAX_INLINE_SIZE = 9999;
+
+export const BOOK_IDS_SEPARATOR = '+';
+
+export const DOWNLOAD_READEST_URL = 'https://readest.com?utm_source=readest_web';
+
+export const READEST_WEB_BASE_URL = 'https://web.readest.com';
+
+export const SYNC_PROGRESS_INTERVAL_SEC = 60;
+export const SYNC_NOTES_INTERVAL_SEC = 60;
@@ -1,19 +1,39 @@
 import { AppService } from '@/types/system';

-let appService: AppService | null = null;
+export const isTauriAppPlatform = () => process.env['NEXT_PUBLIC_APP_PLATFORM'] === 'tauri';
+export const isWebAppPlatform = () => process.env['NEXT_PUBLIC_APP_PLATFORM'] === 'web';

 export interface EnvConfigType {
  getAppService: () => Promise<AppService>;
 }

+let nativeAppService: AppService | null = null;
+const getNativeAppService = async () => {
+  if (!nativeAppService) {
+    const { NativeAppService } = await import('@/services/nativeAppService');
+    nativeAppService = new NativeAppService();
+    await nativeAppService.loadSettings();
+  }
+  return nativeAppService;
+};
+
+let webAppService: AppService | null = null;
+const getWebAppService = async () => {
+  if (!webAppService) {
+    const { WebAppService } = await import('@/services/webAppService');
+    webAppService = new WebAppService();
+    await webAppService.loadSettings();
+  }
+  return webAppService;
+};
+
 const environmentConfig: EnvConfigType = {
  getAppService: async () => {
-    if (!appService) {
-      const { NativeAppService } = await import('@/services/nativeAppService');
-      appService = new NativeAppService();
-      await appService.loadSettings();
+    if (isTauriAppPlatform()) {
+      return getNativeAppService();
+    } else {
+      return getWebAppService();
    }
-    return appService;
  },
 };

@@ -16,18 +16,16 @@ import { join, appDataDir } from '@tauri-apps/api/path';
 import { type as osType } from '@tauri-apps/plugin-os';

 import { Book } from '@/types/book';
-import { ToastType, FileSystem, BaseDir } from '@/types/system';
+import { ToastType, FileSystem, BaseDir, AppPlatform } from '@/types/system';
 import { getCoverFilename } from '@/utils/book';
+import { isValidURL } from '@/utils/misc';

 import { BaseAppService } from './appService';
 import { LOCAL_BOOKS_SUBDIR } from './constants';

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

-export const resolvePath = (
-  fp: string,
-  base: BaseDir,
-): { baseDir: number; base: BaseDir; fp: string } => {
+const resolvePath = (fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string } => {
  switch (base) {
    case 'Settings':
      return { baseDir: BaseDirectory.AppConfig, fp, base };
@@ -54,7 +52,11 @@ export const resolvePath = (

 export const nativeFileSystem: FileSystem = {
  getURL(path: string) {
-    return convertFileSrc(path);
+    return isValidURL(path) ? path : convertFileSrc(path);
+  },
+  async getBlobURL(path: string, base: BaseDir) {
+    const content = await this.readFile(path, base, 'binary');
+    return URL.createObjectURL(new Blob([content]));
  },
  async copyFile(srcPath: string, dstPath: string, base: BaseDir) {
    const { fp, baseDir } = resolvePath(dstPath, base);
@@ -114,6 +116,7 @@ export const nativeFileSystem: FileSystem = {

 export class NativeAppService extends BaseAppService {
  fs = nativeFileSystem;
+  appPlatform = 'tauri' as AppPlatform;
  isAppDataSandbox = isMobile;
  hasTrafficLight = osType() === 'macos';

@@ -125,14 +128,6 @@ export class NativeAppService extends BaseAppService {
    return join(await appDataDir(), LOCAL_BOOKS_SUBDIR);
  }

-  async selectDirectory(title: string): Promise<string> {
-    const selected = await open({
-      title,
-      directory: true,
-    });
-    return selected as string;
-  }
-
  async selectFiles(name: string, extensions: string[]): Promise<string[]> {
    const selected = await open({
      multiple: true,
@@ -153,4 +148,8 @@ export class NativeAppService extends BaseAppService {
  getCoverImageUrl = (book: Book): string => {
    return this.fs.getURL(`${this.localBooksDir}/${getCoverFilename(book)}`);
  };
+
+  getCoverImageBlobUrl = async (book: Book): Promise<string> => {
+    return this.fs.getBlobURL(`${this.localBooksDir}/${getCoverFilename(book)}`, 'None');
+  };
 }
@@ -0,0 +1,211 @@
+import { Book } from '@/types/book';
+import { ToastType, FileSystem, BaseDir, AppPlatform } from '@/types/system';
+import { getCoverFilename } from '@/utils/book';
+import { isValidURL } from '@/utils/misc';
+
+import { BaseAppService } from './appService';
+import { LOCAL_BOOKS_SUBDIR } from './constants';
+
+const resolvePath = (fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string } => {
+  switch (base) {
+    case 'Books':
+      return { baseDir: 0, fp: `${LOCAL_BOOKS_SUBDIR}/${fp}`, base };
+    case 'None':
+      return { baseDir: 0, fp, base };
+    default:
+      return { baseDir: 0, fp: `${base}/${fp}`, base };
+  }
+};
+
+const dbName = 'AppFileSystem';
+const dbVersion = 1;
+
+async function openIndexedDB(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(dbName, dbVersion);
+
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains('files')) {
+        db.createObjectStore('files', { keyPath: 'path' });
+      }
+    };
+
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+const indexedDBFileSystem: FileSystem = {
+  getURL(path: string) {
+    if (isValidURL(path)) {
+      return path;
+    } else {
+      return URL.createObjectURL(new Blob([path]));
+    }
+  },
+  async getBlobURL(path: string, base: BaseDir) {
+    try {
+      const content = await this.readFile(path, base, 'binary');
+      return URL.createObjectURL(new Blob([content]));
+    } catch {
+      return path;
+    }
+  },
+  async copyFile(srcPath: string, dstPath: string, base: BaseDir) {
+    const { fp } = resolvePath(dstPath, base);
+    const db = await openIndexedDB();
+
+    return new Promise<void>((resolve, reject) => {
+      const transaction = db.transaction('files', 'readwrite');
+      const store = transaction.objectStore('files');
+      const getRequest = store.get(srcPath);
+
+      getRequest.onsuccess = () => {
+        const data = getRequest.result;
+        if (data) {
+          store.put({ path: fp, content: data.content });
+          resolve();
+        } else {
+          reject(new Error(`File not found: ${srcPath}`));
+        }
+      };
+
+      getRequest.onerror = () => reject(getRequest.error);
+    });
+  },
+  async readFile(path: string, base: BaseDir, mode: 'text' | 'binary') {
+    const { fp } = resolvePath(path, base);
+    const db = await openIndexedDB();
+
+    return new Promise<string | ArrayBuffer>((resolve, reject) => {
+      const transaction = db.transaction('files', 'readonly');
+      const store = transaction.objectStore('files');
+      const request = store.get(fp);
+
+      request.onsuccess = async () => {
+        if (request.result) {
+          const content = request.result.content;
+          if (mode === 'text') resolve(content);
+          else {
+            if (content instanceof Blob) {
+              const arrayBuffer = await content.arrayBuffer();
+              resolve(arrayBuffer);
+            } else if (content instanceof ArrayBuffer) {
+              resolve(content);
+            } else if (typeof content === 'string') {
+              resolve(new TextEncoder().encode(content).buffer as ArrayBuffer);
+            } else {
+              reject(new Error('Unsupported content type in IndexedDB'));
+            }
+          }
+        } else {
+          reject(new Error(`File not found: ${fp}`));
+        }
+      };
+
+      request.onerror = () => reject(request.error);
+    });
+  },
+  async writeFile(path: string, base: BaseDir, content: string | ArrayBuffer) {
+    const { fp } = resolvePath(path, base);
+    const db = await openIndexedDB();
+
+    return new Promise<void>((resolve, reject) => {
+      const transaction = db.transaction('files', 'readwrite');
+      const store = transaction.objectStore('files');
+
+      store.put({ path: fp, content });
+
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  },
+  async removeFile(path: string, base: BaseDir) {
+    const { fp } = resolvePath(path, base);
+    const db = await openIndexedDB();
+
+    return new Promise<void>((resolve, reject) => {
+      const transaction = db.transaction('files', 'readwrite');
+      const store = transaction.objectStore('files');
+
+      store.delete(fp);
+
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  },
+  async createDir() {
+    // Directories are virtual in IndexedDB; no-op
+  },
+  async removeDir() {
+    // Directories are virtual in IndexedDB; no-op
+  },
+  async readDir(path: string) {
+    const db = await openIndexedDB();
+    return new Promise<{ path: string; isDir: boolean }[]>((resolve, reject) => {
+      const transaction = db.transaction('files', 'readonly');
+      const store = transaction.objectStore('files');
+      const request = store.getAll();
+
+      request.onsuccess = () => {
+        const files = request.result as { path: string }[];
+        resolve(
+          files
+            .filter((file) => file.path.startsWith(path))
+            .map((file) => ({ path: file.path, isDir: false })),
+        );
+      };
+
+      request.onerror = () => reject(request.error);
+    });
+  },
+  async exists(path: string, base: BaseDir) {
+    const { fp } = resolvePath(path, base);
+    const db = await openIndexedDB();
+
+    return new Promise<boolean>((resolve, reject) => {
+      const transaction = db.transaction('files', 'readonly');
+      const store = transaction.objectStore('files');
+      const request = store.get(fp);
+
+      request.onsuccess = () => resolve(!!request.result);
+      request.onerror = () => reject(request.error);
+    });
+  },
+};
+
+export class WebAppService extends BaseAppService {
+  fs = indexedDBFileSystem;
+  appPlatform = 'web' as AppPlatform;
+  isAppDataSandbox = false;
+  hasTrafficLight = false;
+
+  override resolvePath(fp: string, base: BaseDir): { baseDir: number; base: BaseDir; fp: string } {
+    return resolvePath(fp, base);
+  }
+
+  async getInitBooksDir(): Promise<string> {
+    return LOCAL_BOOKS_SUBDIR;
+  }
+
+  async selectDirectory(): Promise<string> {
+    throw new Error('selectDirectory is not supported in browser');
+  }
+
+  async selectFiles(): Promise<string[]> {
+    throw new Error('selectFiles is not supported in browser');
+  }
+
+  async showMessage(msg: string, kind: ToastType = 'info'): Promise<void> {
+    alert(`${kind.toUpperCase()}: ${msg}`);
+  }
+
+  getCoverImageUrl = (book: Book): string => {
+    return this.fs.getURL(`${LOCAL_BOOKS_SUBDIR}/${getCoverFilename(book)}`);
+  };
+
+  getCoverImageBlobUrl = async (book: Book): Promise<string> => {
+    return this.fs.getBlobURL(`${LOCAL_BOOKS_SUBDIR}/${getCoverFilename(book)}`, 'None');
+  };
+}
@@ -17,6 +17,7 @@ interface BookData {
 interface BookDataState {
  booksData: { [id: string]: BookData };
  getConfig: (key: string | null) => BookConfig | null;
+  setConfig: (key: string, config: BookConfig) => void;
  saveConfig: (
    envConfig: EnvConfigType,
    bookKey: string,
@@ -38,6 +39,20 @@ export const useBookDataStore = create<BookDataState>((set, get) => ({
    const id = key.split('-')[0]!;
    return get().booksData[id]?.config || null;
  },
+  setConfig: (key: string, config: BookConfig) => {
+    set((state: BookDataState) => {
+      const id = key.split('-')[0]!;
+      return {
+        booksData: {
+          ...state.booksData,
+          [id]: {
+            ...state.booksData[id]!,
+            config,
+          },
+        },
+      };
+    });
+  },
  saveConfig: async (
    envConfig: EnvConfigType,
    bookKey: string,
@@ -49,10 +64,10 @@ export const useBookDataStore = create<BookDataState>((set, get) => ({
    const bookIndex = library.findIndex((b) => b.hash === bookKey.split('-')[0]);
    if (bookIndex == -1) return;
    const book = library.splice(bookIndex, 1)[0]!;
-    book.lastUpdated = Date.now();
+    book.updatedAt = Date.now();
    library.unshift(book);
    setLibrary(library);
-    config.lastUpdated = Date.now();
+    config.updatedAt = Date.now();
    appService.saveBookConfig(book, config, settings);
    appService.saveLibraryBooks(library);
  },
@@ -67,7 +82,7 @@ export const useBookDataStore = create<BookDataState>((set, get) => ({
      );
      updatedConfig = {
        ...book.config,
-        lastUpdated: Date.now(),
+        updatedAt: Date.now(),
        booknotes: dedupedBooknotes,
      };
      return {
@@ -77,7 +92,7 @@ export const useBookDataStore = create<BookDataState>((set, get) => ({
            ...book,
            config: {
              ...book.config,
-              lastUpdated: Date.now(),
+              updatedAt: Date.now(),
              booknotes: dedupedBooknotes,
            },
          },
@@ -4,12 +4,16 @@ import { EnvConfigType } from '@/services/environment';

 interface LibraryState {
  library: Book[];
+  checkOpenWithBooks: boolean;
+  clearOpenWithBooks: () => void;
  setLibrary: (books: Book[]) => void;
  deleteBook: (envConfig: EnvConfigType, book: Book) => void;
 }

 export const useLibraryStore = create<LibraryState>((set, get) => ({
  library: [],
+  checkOpenWithBooks: true,
+  clearOpenWithBooks: () => set({ checkOpenWithBooks: false }),
  setLibrary: (books) => set({ library: books }),
  deleteBook: async (envConfig: EnvConfigType, book: Book) => {
    const appService = await envConfig.getAppService();
@@ -2,9 +2,9 @@ import { create } from 'zustand';

 import { BookContent, BookConfig, PageInfo, BookProgress, ViewSettings } from '@/types/book';
 import { EnvConfigType } from '@/services/environment';
-import { FoliateView } from '@/app/reader/components/FoliateViewer';
-import { BookDoc, DocumentLoader, TOCItem } from '@/libs/document';
-import { updateTocID } from '@/utils/toc';
+import { FoliateView } from '@/types/view';
+import { BookDoc, DocumentLoader, SectionItem, TOCItem } from '@/libs/document';
+import { updateTocCFI, updateTocID } from '@/utils/toc';
 import { useSettingsStore } from './settingsStore';
 import { useBookDataStore } from './bookDataStore';
 import { useLibraryStore } from './libraryStore';
@@ -114,8 +114,13 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
        console.log('Loading book', key);
        const { book: loadedBookDoc } = await new DocumentLoader(file).open();
        const bookDoc = loadedBookDoc as BookDoc;
-        if (bookDoc.toc) {
+        if (bookDoc.toc?.length > 0 && bookDoc.sections?.length > 0) {
          updateTocID(bookDoc.toc);
+          const sections = bookDoc.sections.reduce((map: Record<string, SectionItem>, section) => {
+            map[section.id] = section;
+            return map;
+          }, {});
+          updateTocCFI(bookDoc, bookDoc.toc, sections);
        }
        useBookDataStore.setState((state) => ({
          booksData: {
@@ -177,7 +182,7 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
            ...bookData,
            config: {
              ...bookData.config,
-              lastUpdated: Date.now(),
+              updatedAt: Date.now(),
              viewSettings,
            },
          },
@@ -211,7 +216,7 @@ export const useReaderStore = create<ReaderStore>((set, get) => ({
      const oldConfig = bookData.config;
      const newConfig = {
        ...bookData.config,
-        lastUpdated: Date.now(),
+        updatedAt: Date.now(),
        progress: [pageinfo.current, pageinfo.total] as [number, number],
        location,
      };
@@ -4,15 +4,21 @@ export type HighlightStyle = 'highlight' | 'underline' | 'squiggly';
 export type HighlightColor = 'red' | 'yellow' | 'green' | 'blue' | 'violet';

 export interface Book {
+  // if Book is a remote book we just lazy load the book content
+  url?: string;
  hash: string;
  format: BookFormat;
  title: string;
  author: string;
  group?: string;
  tags?: string[];
-  lastUpdated: number;
-  isRemoved?: boolean;
  coverImageUrl?: string | null;
+
+  createdAt: number;
+  updatedAt: number;
+  deletedAt?: number;
+
+  lastUpdated?: number; // deprecated in favor of updatedAt
 }

 export interface PageInfo {
@@ -22,26 +28,30 @@ export interface PageInfo {
 }

 export interface BookNote {
+  bookHash?: string;
  id: string;
  type: BookNoteType;
  cfi: string;
-  href: string;
  text?: string;
  style?: HighlightStyle;
  color?: HighlightColor;
  note: string;
-  created: number;
-  modified?: number;
+
+  createdAt: number;
+  updatedAt: number;
+  deletedAt?: number;
 }

 export interface BookLayout {
  marginPx: number;
  gapPercent: number;
  scrolled: boolean;
+  disableClick: boolean;
  maxColumnCount: number;
  maxInlineSize: number;
  maxBlockSize: number;
  animated: boolean;
+  vertical: boolean;
 }

 export interface BookStyle {
@@ -104,21 +114,32 @@ export interface BookSearchResult {
 }

 export interface BookConfig {
-  lastUpdated: number;
+  bookHash?: string;
  progress?: [number, number];
  location?: string;
-
  booknotes?: BookNote[];
-  removedNotesTimestamps?: Record<string, number>;
-
-  searchConfig?: BookSearchConfig;
+  searchConfig?: Partial<BookSearchConfig>;
  viewSettings?: Partial<ViewSettings>;
+
+  lastSyncedAtConfig?: number;
+  lastSyncedAtNotes?: number;
+
+  updatedAt: number;
+}
+
+export interface BookDataRecord {
+  id: string;
+  book_hash: string;
+  user_id: string;
+  updated_at: number | null;
+  deleted_at: number | null;
 }

 export interface BooksGroup {
  name: string;
  books: Book[];
-  lastUpdated: number;
+
+  updatedAt: number;
 }
 export interface BookContent {
  book: Book;
@@ -0,0 +1,42 @@
+export interface DBBook {
+  user_id: string;
+  book_hash: string;
+  format: string;
+  title: string;
+  author: string;
+  group?: string;
+  tags?: string;
+
+  created_at?: string;
+  updated_at?: string;
+  deleted_at?: string | null;
+}
+
+export interface DBBookConfig {
+  user_id: string;
+  book_hash: string;
+  location?: string;
+  progress?: string;
+  search_config?: string;
+  view_settings?: string;
+
+  created_at?: string;
+  updated_at?: string;
+  deleted_at?: string | null;
+}
+
+export interface DBBookNote {
+  user_id: string;
+  book_hash: string;
+  id: string;
+  type: string;
+  cfi: string;
+  text?: string;
+  style?: string;
+  color?: string;
+  note: string;
+
+  created_at?: string;
+  updated_at?: string;
+  deleted_at?: string | null;
+}
@@ -18,6 +18,11 @@ export interface ReadSettings {
 export interface SystemSettings {
  version: number;
  localBooksDir: string;
+  keepLogin: boolean;
+
+  lastSyncedAtBooks: number;
+  lastSyncedAtConfigs: number;
+  lastSyncedAtNotes: number;

  globalReadSettings: ReadSettings;
  globalViewSettings: ViewSettings;
@@ -1,11 +1,13 @@
 import { SystemSettings } from './settings';
 import { Book, BookConfig, BookContent } from './book';

+export type AppPlatform = 'web' | 'tauri';
 export type BaseDir = 'Books' | 'Settings' | 'Data' | 'Log' | 'Cache' | 'None';
 export type ToastType = 'info' | 'warning' | 'error';

 export interface FileSystem {
  getURL(path: string): string;
+  getBlobURL(path: string, base: BaseDir): Promise<string>;
  copyFile(srcPath: string, dstPath: string, base: BaseDir): Promise<void>;
  readFile(path: string, base: BaseDir, mode: 'text' | 'binary'): Promise<string | ArrayBuffer>;
  writeFile(path: string, base: BaseDir, content: string | ArrayBuffer): Promise<void>;
@@ -18,16 +20,22 @@ export interface FileSystem {

 export interface AppService {
  fs: FileSystem;
+  appPlatform: AppPlatform;
  hasTrafficLight: boolean;
  isAppDataSandbox: boolean;

-  selectDirectory(title: string): Promise<string>;
  selectFiles(name: string, extensions: string[]): Promise<string[]>;
  showMessage(msg: string, kind?: ToastType, title?: string, okLabel?: string): Promise<void>;

  loadSettings(): Promise<SystemSettings>;
  saveSettings(settings: SystemSettings): Promise<void>;
-  importBook(file: string | File, books: Book[], overwrite?: boolean): Promise<Book[]>;
+  importBook(
+    file: string | File,
+    books: Book[],
+    saveBook?: boolean,
+    saveCover?: boolean,
+    overwrite?: boolean,
+  ): Promise<Book | null>;
  deleteBook(book: Book): Promise<void>;
  loadBookConfig(book: Book, settings: SystemSettings): Promise<BookConfig>;
  saveBookConfig(book: Book, config: BookConfig, settings?: SystemSettings): Promise<void>;
@@ -35,4 +43,5 @@ export interface AppService {
  loadLibraryBooks(): Promise<Book[]>;
  saveLibraryBooks(books: Book[]): Promise<void>;
  getCoverImageUrl(book: Book): string;
+  getCoverImageBlobUrl(book: Book): Promise<string>;
 }
@@ -0,0 +1,52 @@
+import { BookDoc } from '@/libs/document';
+import { BookNote, BookSearchConfig, BookSearchResult } from '@/types/book';
+
+export interface FoliateView extends HTMLElement {
+  open: (book: BookDoc) => Promise<void>;
+  close: () => void;
+  init: (options: { lastLocation: string }) => void;
+  goTo: (href: string) => void;
+  goToFraction: (fraction: number) => void;
+  prev: (distance: number) => void;
+  next: (distance: number) => void;
+  goLeft: () => void;
+  goRight: () => void;
+  getCFI: (index: number, range: Range) => string;
+  addAnnotation: (note: BookNote, remove?: boolean) => { index: number; label: string };
+  search: (config: BookSearchConfig) => AsyncGenerator<BookSearchResult | string, void, void>;
+  clearSearch: () => void;
+  select: (target: string | number | { fraction: number }) => void;
+  deselect: () => void;
+  history: {
+    canGoBack: boolean;
+    canGoForward: boolean;
+    back: () => void;
+    forward: () => void;
+    clear: () => void;
+  };
+  renderer: {
+    scrolled?: boolean;
+    viewSize: number;
+    setAttribute: (name: string, value: string | number) => void;
+    removeAttribute: (name: string) => void;
+    next: () => Promise<void>;
+    prev: () => Promise<void>;
+    goTo?: (params: { index: number; anchor: number }) => void;
+    setStyles?: (css: string) => void;
+    addEventListener: (type: string, listener: EventListener) => void;
+    removeEventListener: (type: string, listener: EventListener) => void;
+  };
+}
+
+export const wrappedFoliateView = (originalView: FoliateView): FoliateView => {
+  const originalAddAnnotation = originalView.addAnnotation.bind(originalView);
+  originalView.addAnnotation = (note: BookNote, remove = false) => {
+    // transform BookNote to foliate annotation
+    const annotation = {
+      value: note.cfi,
+      ...note,
+    };
+    return originalAddAnnotation(annotation, remove);
+  };
+  return originalView;
+};
@@ -1,6 +1,6 @@
 import { EXTS } from '@/libs/document';
 import { Book, BookConfig } from '@/types/book';
-import { makeSafeFilename } from './misc';
+import { getUserLang, makeSafeFilename } from './misc';

 export const getDir = (book: Book) => {
  return `${book.hash}`;
@@ -26,7 +26,7 @@ export const getBaseFilename = (filename: string) => {
  return baseName;
 };
 export const INIT_BOOK_CONFIG: BookConfig = {
-  lastUpdated: 0,
+  updatedAt: 0,
 };

 interface LanguageMap {
@@ -37,18 +37,38 @@ interface Contributor {
  name: LanguageMap;
 }

+const userLang = getUserLang();
+
 const formatLanguageMap = (x: string | LanguageMap): string => {
  if (!x) return '';
  if (typeof x === 'string') return x;
  const keys = Object.keys(x);
-  return x[keys[0]!]!;
+  return x[userLang] || x[keys[0]!]!;
 };

-const listFormat = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
+const listFormat = (lang: string) => {
+  if (lang === 'zh') {
+    return new Intl.ListFormat('en', { style: 'narrow', type: 'unit' });
+  } else {
+    return new Intl.ListFormat(lang, { style: 'long', type: 'conjunction' });
+  }
+};

-export const formatAuthors = (contributors: string | Contributor | [string | Contributor]) =>
+const getBookLangCode = (lang: string | string[] | undefined) => {
+  try {
+    const bookLang = typeof lang === 'string' ? lang : lang?.[0];
+    return bookLang ? bookLang.split('-')[0]! : 'en';
+  } catch {
+    return 'en';
+  }
+};
+
+export const formatAuthors = (
+  bookLang: string | string[] | undefined,
+  contributors: string | Contributor | [string | Contributor],
+) =>
  Array.isArray(contributors)
-    ? listFormat.format(
+    ? listFormat(getBookLangCode(bookLang)).format(
        contributors.map((contributor) =>
          typeof contributor === 'string' ? contributor : formatLanguageMap(contributor?.name),
        ),
@@ -56,3 +76,7 @@ export const formatAuthors = (contributors: string | Contributor | [string | Con
    : typeof contributors === 'string'
      ? contributors
      : formatLanguageMap(contributors?.name);
+
+export const formatTitle = (title: string | LanguageMap) => {
+  return typeof title === 'string' ? title : formatLanguageMap(title);
+};
@@ -22,3 +22,26 @@ export const makeSafeFilename = (filename: string, replacement = '_') => {

  return safeName.trim();
 };
+
+export const getUserLang = () => navigator?.language.split('-')[0] || 'en';
+
+export const getOSPlatform = () => {
+  const userAgent = navigator.userAgent.toLowerCase();
+
+  if (userAgent.includes('macintosh') || userAgent.includes('mac os x')) return 'macos';
+  if (userAgent.includes('windows nt')) return 'windows';
+  if (userAgent.includes('linux')) return 'linux';
+  if (/iphone|ipad|ipod/.test(userAgent)) return 'ios';
+  if (userAgent.includes('android')) return 'android';
+
+  return '';
+};
+
+export const isValidURL = (url: string, allowedSchemes: string[] = ['http', 'https']) => {
+  try {
+    const { protocol } = new URL(url);
+    return allowedSchemes.some((scheme) => `${scheme}:` === protocol);
+  } catch {
+    return false;
+  }
+};
@@ -0,0 +1,23 @@
+import { useRouter } from 'next/navigation';
+import { isWebAppPlatform } from '@/services/environment';
+import { BOOK_IDS_SEPARATOR } from '@/services/constants';
+
+export const navigateToReader = (
+  router: ReturnType<typeof useRouter>,
+  bookIds: string[],
+  queryParams?: string,
+  navOptions?: { scroll?: boolean },
+) => {
+  const ids = bookIds.join(BOOK_IDS_SEPARATOR);
+  if (isWebAppPlatform()) {
+    router.push(`/reader/${ids}${queryParams ? `?${queryParams}` : ''}`, navOptions);
+  } else {
+    const params = new URLSearchParams(queryParams || '');
+    params.set('ids', ids);
+    router.push(`/reader?${params.toString()}`, navOptions);
+  }
+};
+
+export const navigateToLibrary = (router: ReturnType<typeof useRouter>) => {
+  router.push('/library');
+};
@@ -15,7 +15,7 @@ export interface Point {
  y: number;
 }

-export type PositionDir = 'up' | 'down';
+export type PositionDir = 'up' | 'down' | 'left' | 'right';

 export interface Position {
  point: Point;
@@ -42,9 +42,15 @@ const frameRect = (frame: Frame, rect: Rect, sx = 1, sy = 1) => {
 const pointIsInView = ({ x, y }: Point) =>
  x > 0 && y > 0 && x < window.innerWidth && y < window.innerHeight;

-const getIframeElement = (range: Range): HTMLIFrameElement | null => {
-  let node: Node | null = range.commonAncestorContainer;
-
+const getIframeElement = (nodeElement: Range | Element): HTMLIFrameElement | null => {
+  let node: Node | null;
+  if (nodeElement && typeof nodeElement === 'object' && 'tagName' in nodeElement) {
+    node = nodeElement as Element;
+  } else if (nodeElement && typeof nodeElement === 'object' && 'collapse' in nodeElement) {
+    node = nodeElement.commonAncestorContainer;
+  } else {
+    node = nodeElement;
+  }
  while (node) {
    if (node.nodeType === Node.DOCUMENT_NODE) {
      const doc = node as Document;
@@ -58,8 +64,7 @@ const getIframeElement = (range: Range): HTMLIFrameElement | null => {
  return null;
 };

-export const getPosition = (target: Range, rect: Rect) => {
-  // TODO: vertical text
+export const getPosition = (target: Range | Element, rect: Rect, isVertical: boolean = false) => {
  const frameElement = getIframeElement(target);
  const transform = frameElement ? getComputedStyle(frameElement).transform : '';
  const match = transform.match(/matrix\((.+)\)/);
@@ -69,6 +74,22 @@ export const getPosition = (target: Range, rect: Rect) => {
  const rects = Array.from(target.getClientRects());
  const first = frameRect(frame, rects[0] as Rect, sx, sy);
  const last = frameRect(frame, rects.at(-1) as Rect, sx, sy);
+
+  if (isVertical) {
+    const leftSpace = first.left - rect.left;
+    const rightSpace = rect.right - first.right;
+    const dir = leftSpace > rightSpace ? 'left' : 'right';
+    const position = {
+      point: {
+        x: dir === 'left' ? first.left - rect.left - 6 : first.right - rect.left + 6,
+        y: (first.top + first.bottom) / 2 - rect.top,
+      },
+      dir,
+    } as Position;
+    const inView = pointIsInView(position.point);
+    return inView ? position : ({ point: { x: 0, y: 0 }, dir } as Position);
+  }
+
  const start = {
    point: { x: (first.left + first.right) / 2 - rect.left, y: first.top - rect.top - 12 },
    dir: 'up',
@@ -92,10 +113,20 @@ export const getPopupPosition = (
  popupHeightPx: number,
  popupPaddingPx: number,
 ) => {
-  const popupPoint = {
-    x: position.point.x - popupWidthPx / 2,
-    y: position.dir === 'up' ? position.point.y - popupHeightPx : position.point.y + 6,
-  };
+  const popupPoint = { x: 0, y: 0 };
+  if (position.dir === 'up') {
+    popupPoint.x = position.point.x - popupWidthPx / 2;
+    popupPoint.y = position.point.y - popupHeightPx;
+  } else if (position.dir === 'down') {
+    popupPoint.x = position.point.x - popupWidthPx / 2;
+    popupPoint.y = position.point.y + 6;
+  } else if (position.dir === 'left') {
+    popupPoint.x = position.point.x - popupWidthPx;
+    popupPoint.y = position.point.y - popupHeightPx / 2;
+  } else if (position.dir === 'right') {
+    popupPoint.x = position.point.x + 6;
+    popupPoint.y = position.point.y - popupHeightPx / 2;
+  }

  if (popupPoint.x < popupPaddingPx) {
    popupPoint.x = popupPaddingPx;
@@ -0,0 +1,52 @@
+import { BookConfig, BookSearchConfig, ViewSettings } from '@/types/book';
+
+export const serializeConfig = (
+  config: BookConfig,
+  globalViewSettings: ViewSettings,
+  defaultSearchConfig: BookSearchConfig,
+): string => {
+  config = JSON.parse(JSON.stringify(config));
+  const viewSettings = config.viewSettings as Partial<ViewSettings>;
+  const searchConfig = config.searchConfig as Partial<BookSearchConfig>;
+  config.viewSettings = Object.entries(viewSettings).reduce(
+    (acc: Partial<Record<keyof ViewSettings, unknown>>, [key, value]) => {
+      if (globalViewSettings[key as keyof ViewSettings] !== value) {
+        acc[key as keyof ViewSettings] = value;
+      }
+      return acc;
+    },
+    {} as Partial<Record<keyof ViewSettings, unknown>>,
+  ) as Partial<ViewSettings>;
+  config.searchConfig = Object.entries(searchConfig).reduce(
+    (acc: Partial<Record<keyof BookSearchConfig, unknown>>, [key, value]) => {
+      if (defaultSearchConfig[key as keyof BookSearchConfig] !== value) {
+        acc[key as keyof BookSearchConfig] = value;
+      }
+      return acc;
+    },
+    {} as Partial<BookSearchConfig>,
+  ) as Partial<BookSearchConfig>;
+
+  return JSON.stringify(config);
+};
+
+export const deserializeConfig = (
+  str: string,
+  globalViewSettings: ViewSettings,
+  defaultSearchConfig: BookSearchConfig,
+): BookConfig => {
+  const config = JSON.parse(str) as BookConfig;
+  const { viewSettings, searchConfig } = config;
+  config.viewSettings = { ...globalViewSettings, ...viewSettings };
+  config.searchConfig = { ...defaultSearchConfig, ...searchConfig };
+  config.updatedAt ??= Date.now();
+  return config;
+};
+
+export const compressConfig = (
+  config: BookConfig,
+  globalViewSettings: ViewSettings,
+  defaultSearchConfig: BookSearchConfig,
+): string => {
+  return JSON.parse(serializeConfig(config, globalViewSettings, defaultSearchConfig));
+};
@@ -29,6 +29,36 @@ const getFontStyles = (
  return fontStyles;
 };

+const getAdditionalFontFaces = () => `
+  @font-face {
+    font-family: "FangSong";
+    src: url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.eot");
+    src: url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.eot?#iefix") format("embedded-opentype"),
+    url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.woff2") format("woff2"),
+    url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.woff") format("woff"),
+    url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.ttf") format("truetype"),
+    url("https://db.onlinewebfonts.com/t/2ecbfe1d9bfc191c6f15c0ccc23cbd43.svg#FangSong") format("svg");
+  }
+  @font-face {
+    font-family: "Kaiti";
+    src: url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.eot");
+    src: url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.eot?#iefix")format("embedded-opentype"),
+    url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.woff2")format("woff2"),
+    url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.woff")format("woff"),
+    url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.ttf")format("truetype"),
+    url("https://db.onlinewebfonts.com/t/1ee9941f1b8c128110ca4307dda59917.svg#STKaiti")format("svg");
+  }
+  @font-face {
+    font-family: "Heiti";
+    src: url("https://db.onlinewebfonts.com/t/a4948b9d43a91468825a5251df1ec58d.eot");
+    src: url("https://db.onlinewebfonts.com/t/a4948b9d43a91468825a5251df1ec58d.eot?#iefix")format("embedded-opentype"),
+    url("https://db.onlinewebfonts.com/t/a4948b9d43a91468825a5251df1ec58d.woff2")format("woff2"),
+    url("https://db.onlinewebfonts.com/t/a4948b9d43a91468825a5251df1ec58d.woff")format("woff"),
+    url("https://db.onlinewebfonts.com/t/a4948b9d43a91468825a5251df1ec58d.ttf")format("truetype"),
+    url("https://db.onlinewebfonts.com/t/a4948b9d43a91468825a5251df1ec58d.svg#WenQuanYi Micro Hei")format("svg");
+  }
+`;
+
 const getLayoutStyles = (
  spacing: number,
  justify: boolean,
@@ -74,13 +104,17 @@ const getLayoutStyles = (
      white-space: pre-wrap !important;
      tab-size: 2;
  }
-  body {
+  html, body {
+    color: ${fg};
    zoom: ${zoomLevel}%; 
-    background-color: ${bg} !important;
+  }
+  body *:not(a):not(#b1):not(#b1 *):not(#b2):not(#b2 *):not(.bg):not(.bg *):not(.vol):not(.vol *):not(.background):not(.background *) {
+    border-color: currentColor !important;
+    ${bg === '#ffffff' ? '' : `color: inherit;`}
+    ${bg === '#ffffff' ? '' : `background-color: ${bg} !important;`}
  }
  svg, img {
    background-color: transparent !important;
-    mix-blend-mode: multiply;
  }
  p, li, blockquote, dd {
    text-align: ${justify ? 'justify' : 'start'};
@@ -107,6 +141,11 @@ const getLayoutStyles = (
  aside[epub|type~="rearnote"] {
    display: none;
  }
+
+  .duokan-footnote-content,
+  .duokan-footnote-item {
+    display: none;
+  }
 `;

 export interface ThemeCode {
@@ -137,3 +176,9 @@ export const getStyles = (viewSettings: ViewSettings, themeCode: ThemeCode) => {
  const userStylesheet = viewSettings.userStylesheet!;
  return `${layoutStyles}\n${fontStyles}\n${fontfacesCSS}\n${userStylesheet}`;
 };
+
+export const mountAdditionalFonts = (document: Document) => {
+  const style = document.createElement('style');
+  style.textContent = getAdditionalFontFaces();
+  document.head.appendChild(style);
+};
@@ -0,0 +1,20 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl =
+  process.env['NEXT_PUBLIC_SUPABASE_URL'] || process.env['NEXT_PUBLIC_DEV_SUPABASE_URL']!;
+const supabaseAnonKey =
+  process.env['NEXT_PUBLIC_SUPABASE_ANON_KEY'] || process.env['NEXT_PUBLIC_DEV_SUPABASE_ANON_KEY']!;
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey);
+
+export const createSupabaseClient = (accessToken?: string) => {
+  return createClient(supabaseUrl, supabaseAnonKey, {
+    global: {
+      headers: accessToken
+        ? {
+            Authorization: `Bearer ${accessToken}`,
+          }
+        : {},
+    },
+  });
+};
@@ -1,4 +1,4 @@
-import { TOCItem } from '@/libs/document';
+import { SectionItem, TOCItem, CFI, BookDoc } from '@/libs/document';

 export const findParentPath = (toc: TOCItem[], href: string): TOCItem[] => {
  for (const item of toc) {
@@ -15,6 +15,28 @@ export const findParentPath = (toc: TOCItem[], href: string): TOCItem[] => {
  return [];
 };

+export const findTocItemBS = (toc: TOCItem[], cfi: string): TOCItem | null => {
+  let left = 0;
+  let right = toc.length - 1;
+  let result: TOCItem | null = null;
+
+  while (left <= right) {
+    const mid = Math.floor((left + right) / 2);
+    const currentCfi = toc[mid]!.cfi || '';
+    const comparison = CFI.compare(currentCfi, cfi);
+    if (comparison === 0) {
+      return toc[mid]!;
+    } else if (comparison < 0) {
+      result = toc[mid]!;
+      left = mid + 1;
+    } else {
+      right = mid - 1;
+    }
+  }
+
+  return result;
+};
+
 export const updateTocID = (items: TOCItem[], index = 0): number => {
  items.forEach((item) => {
    item.id ??= index++;
@@ -24,3 +46,22 @@ export const updateTocID = (items: TOCItem[], index = 0): number => {
  });
  return index;
 };
+
+export const updateTocCFI = (
+  bookDoc: BookDoc,
+  items: TOCItem[],
+  sections: { [id: string]: SectionItem },
+): void => {
+  items.forEach((item) => {
+    if (item.href) {
+      const id = bookDoc.splitTOCHref(item.href)[0]!;
+      const section = sections[id];
+      if (section) {
+        item.cfi = section.cfi;
+      }
+    }
+    if (item.subitems) {
+      updateTocCFI(bookDoc, item.subitems, sections);
+    }
+  });
+};
@@ -0,0 +1,111 @@
+import {
+  Book,
+  BookConfig,
+  BookFormat,
+  BookNote,
+  BookNoteType,
+  HighlightColor,
+  HighlightStyle,
+} from '@/types/book';
+import { DBBookConfig, DBBook, DBBookNote } from '@/types/records';
+
+export const transformBookConfigToDB = (bookConfig: unknown, userId: string): DBBookConfig => {
+  const { bookHash, progress, location, searchConfig, viewSettings, updatedAt } =
+    bookConfig as BookConfig;
+
+  return {
+    user_id: userId,
+    book_hash: bookHash!,
+    location: location,
+    progress: progress && JSON.stringify(progress),
+    search_config: searchConfig && JSON.stringify(searchConfig),
+    view_settings: viewSettings && JSON.stringify(viewSettings),
+    updated_at: new Date(updatedAt).toISOString(),
+  };
+};
+
+export const transformBookConfigFromDB = (dbBookConfig: DBBookConfig): BookConfig => {
+  const { book_hash, progress, location, search_config, view_settings, updated_at } = dbBookConfig;
+  return {
+    bookHash: book_hash,
+    location,
+    progress: progress && JSON.parse(progress),
+    searchConfig: search_config && JSON.parse(search_config),
+    viewSettings: view_settings && JSON.parse(view_settings),
+    updatedAt: new Date(updated_at!).getTime(),
+  } as BookConfig;
+};
+
+export const transformBookToDB = (book: unknown, userId: string): DBBook => {
+  const { hash, format, title, author, group, tags, createdAt, updatedAt, deletedAt } =
+    book as Book;
+
+  return {
+    user_id: userId,
+    book_hash: hash,
+    format,
+    title,
+    author,
+    group,
+    tags: tags && JSON.stringify(tags),
+    created_at: new Date(createdAt).toISOString(),
+    updated_at: new Date(updatedAt).toISOString(),
+    deleted_at: deletedAt ? new Date(deletedAt).toISOString() : undefined,
+  };
+};
+
+export const transformBookFromDB = (dbBook: DBBook): Book => {
+  const { book_hash, format, title, author, group, tags, created_at, updated_at, deleted_at } =
+    dbBook;
+
+  return {
+    hash: book_hash,
+    format: format as BookFormat,
+    title,
+    author,
+    group,
+    tags: tags && JSON.parse(tags),
+    createdAt: new Date(created_at!).getTime(),
+    updatedAt: new Date(updated_at!).getTime(),
+    deletedAt: deleted_at ? new Date(deleted_at!).getTime() : undefined,
+  };
+};
+
+export const transformBookNoteToDB = (bookNote: unknown, userId: string): DBBookNote => {
+  const { bookHash, id, type, cfi, text, style, color, note, createdAt, updatedAt, deletedAt } =
+    bookNote as BookNote;
+
+  return {
+    user_id: userId,
+    book_hash: bookHash!,
+    id,
+    type,
+    cfi,
+    text,
+    style,
+    color,
+    note,
+    created_at: new Date(createdAt).toISOString(),
+    updated_at: new Date(updatedAt).toISOString(),
+    deleted_at: deletedAt ? new Date(deletedAt).toISOString() : undefined,
+  };
+};
+
+export const transformBookNoteFromDB = (dbBookNote: DBBookNote): BookNote => {
+  const { book_hash, id, type, cfi, text, style, color, note, created_at, updated_at, deleted_at } =
+    dbBookNote;
+
+  return {
+    bookHash: book_hash,
+    id,
+    type: type as BookNoteType,
+    cfi,
+    text,
+    style: style as HighlightStyle,
+    color: color as HighlightColor,
+    note,
+    createdAt: new Date(created_at!).getTime(),
+    updatedAt: new Date(updated_at!).getTime(),
+    deletedAt: deleted_at ? new Date(deleted_at!).getTime() : undefined,
+  };
+};
@@ -0,0 +1,14 @@
+export const tauriHandleMinimize = async () => {
+  const { getCurrentWindow } = await import('@tauri-apps/api/window');
+  getCurrentWindow().minimize();
+};
+
+export const tauriHandleToggleMaximize = async () => {
+  const { getCurrentWindow } = await import('@tauri-apps/api/window');
+  getCurrentWindow().toggleMaximize();
+};
+
+export const tauriHandleClose = async () => {
+  const { getCurrentWindow } = await import('@tauri-apps/api/window');
+  getCurrentWindow().close();
+};
@@ -1,6 +1,7 @@
 {
  "extends": "@sindresorhus/tsconfig",
  "compilerOptions": {
+    "target": "ES2022",
    "lib": [
      "dom",
      "dom.iterable",
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
chrox	f385c2bf02	Bump update of tauri and plugins	2024-12-24 23:56:47 +01:00
chrox	2c6535450e	Update features list in README	2024-12-24 23:13:58 +01:00
chrox	83cb7166fb	Support book notes synchronization	2024-12-24 23:09:15 +01:00
chrox	b40654a671	Sync progress once per minute	2024-12-24 20:09:25 +01:00
chrox	116b831102	Hide window title only on macOS	2024-12-24 19:25:42 +01:00
chrox	17336d7ac9	Add CORS for the sync API	2024-12-24 18:02:39 +01:00
chrox	447eb09272	Add vercel deploy workflows for readest org	2024-12-24 14:31:02 +01:00
chrox	a074542e96	Remove unnecessary favicon and add description for better SEO	2024-12-24 12:37:52 +01:00
Huang Xin	9be9bc8a34	Support reading progress synchronization across platforms (#34 )	2024-12-24 12:31:02 +01:00
chrox	d7ccbbcaa2	Use splitTOCHref to support other ebook formats as discussed in foliate-js#45	2024-12-20 22:44:35 +01:00
chrox	b581251b58	Add referrerpolicy to show avatar images properly	2024-12-18 12:43:07 +01:00
chrox	f63ecba5fe	Add Readest title in taskbar on Windows, closes #26	2024-12-18 12:04:32 +01:00
chrox	bd549d2a0f	Get rid of unnecessary data fields in BookConfig	2024-12-17 22:33:18 +01:00
chrox	419db86a4d	Package only the minified pdf worker	2024-12-17 15:00:30 +01:00
chrox	54e8798468	Remove obsolete packages	2024-12-17 12:53:36 +01:00
chrox	69276b6beb	Add a supabase instance for dev	2024-12-17 11:19:20 +01:00
chrox	ed177530ac	Add basic user auth	2024-12-17 10:50:52 +01:00
Jiucheng(Oliver)	3be4a26b14	Add 'Disable Click' feature to view settings (#23 ) * Add 'Disable Click' feature to view settings * Add 'Disable Page Turn on Click' option to MiscPanel and update view settings * Rename 'Control' section to 'Behavior' and update 'Disable Page Turn on Click' label to 'Disable Click-to-Flip' * Update view settings to include disableClick functionality * Refactor disableClick handling in MiscPanel to separate useEffect for improved clarity * Remove unused 'use' import from MiscPanel for cleaner code	2024-12-15 19:11:45 +01:00
chrox	3dbb41fca0	Add feature request template	2024-12-15 17:17:59 +01:00
chrox	ace59fb34c	Skip titlebar drag events for web platform	2024-12-13 21:53:00 +01:00
chrox	61067dba93	Update next.js to v15.1	2024-12-13 21:51:13 +01:00
caiwenchao	97a0592a43	Custom CSS Add Non-ASCII characters Supporting	2024-12-13 18:19:36 +08:00
chrox	d15e661038	Save book configs and settings before page is reloaded, closes #18	2024-12-13 09:02:20 +01:00
chrox	c69d58a270	Update discord invite link, closes #17	2024-12-13 06:54:11 +01:00
chrox	960a56cc6f	Update demo library	2024-12-12 23:16:32 +01:00
chrox	eb346b46b2	Fix background color of popover footnotes and some corner cases for dark mode bg colors	2024-12-12 16:33:48 +01:00
chrox	beaa9e42ce	Load demo library books only in web app	2024-12-12 09:49:50 +01:00
chrox	bad45a72ba	Fix following link after page flipping on macOS, closes #12	2024-12-12 08:49:27 +01:00
chrox	852d16daf3	Fix body element color	2024-12-11 22:10:27 +01:00
chrox	410d57e6f1	Import books from URLs in library page with url parameter	2024-12-11 20:31:41 +01:00
chrox	89c6c4d971	Fix formating authors	2024-12-11 19:29:58 +01:00
chrox	3f4a274412	Add demo library (books from Feedbooks)	2024-12-11 18:57:39 +01:00
chrox	9dd7e6de5e	Avoid overriding some background colors	2024-12-11 18:16:02 +01:00
chrox	902a230095	Fix background image color and font server csp	2024-12-11 03:45:51 +01:00
chrox	5a521b6e6f	Mount additional fonts when loading documents	2024-12-11 02:31:39 +01:00
chrox	fb31212005	Hide some footnotes elements and handle background image in two columns	2024-12-10 23:30:43 +01:00
chrox	b57fd8bd3d	Support left / right popover on vertical writing documents	2024-12-10 17:57:51 +01:00
chrox	811f377dc0	Update README for more screenshots	2024-12-10 15:23:40 +01:00
chrox	0cbb950c37	Add support of popover footnotes	2024-12-10 14:14:34 +01:00
chrox	6efdbb78e5	Format title and authors when importing books	2024-12-10 14:14:06 +01:00
chrox	d940fb8d06	Fix click to page flip not responsive occasionally	2024-12-09 14:40:58 +01:00
chrox	515a133731	Add download readest menu item for readest web	2024-12-08 23:49:38 +01:00
chrox	eb90854f69	Fix CSS for background image and background color	2024-12-08 23:15:14 +01:00
chrox	76667fa2f6	Click on media overlay should not trigger a page flip	2024-12-08 23:13:52 +01:00
chrox	7b2bd8a3f8	Add contributing guidelines in README	2024-12-07 19:10:13 +01:00
chrox	8bdcb65883	Fix dynamic route for Next.js see https://github.com/vercel/next.js/discussions/55393	2024-12-06 23:38:56 +01:00
chrox	b985c2664e	Add NEXT_PUBLIC_APP_PLATFORM env variable in github workflow	2024-12-06 23:06:04 +01:00
chrox	bdf619f2e6	Update open graph metadata for Readest WebApp	2024-12-06 22:44:57 +01:00
chrox	53db2777af	Update preview banner	2024-12-06 18:16:27 +01:00
chrox	a10bde2254	Add Downloads section	2024-12-06 15:18:21 +01:00
chrox	cf7390915b	Toggle visibility of the header/footer bar when tap on the center 25% of the page	2024-12-06 14:14:29 +01:00
chrox	b694203d26	Fix DeepL on Web Readest and avoid cli parsing for Web	2024-12-06 13:36:38 +01:00
chrox	242fbf6743	Use bookID in path in Web version	2024-12-06 11:36:24 +01:00
chrox	f21f3a3fc0	Update README for roadmap	2024-12-05 19:45:34 +01:00
chrox	aa16bc09f1	Support running Readest in modern browsers Now we support Web platform	2024-12-05 18:57:16 +01:00
chrox	23eb2514bc	Refactor readme	2024-12-05 17:03:30 +01:00
chrox	9eacf7e203	Don't auto hide scrollbar in platform other than macOS and iOS, closes #9	2024-12-05 12:02:52 +01:00
chrox	32ffaa0e05	Close window when document is closed with 'open with Readest'	2024-12-04 18:58:05 +01:00
chrox	999e4828db	Fix open with Readest on Windows	2024-12-04 18:38:36 +01:00
chrox	626dd2fbd7	Fix headerbar start-dragging events	2024-12-04 13:20:08 +01:00
chrox	ec1ec2265d	Skip all buttons in headerbar when start dragging, closes #8	2024-12-04 12:00:32 +01:00
chrox	1429f111bc	Add file associations to support system "open with Readest" function, closes #1 Support passing files as command line args to Readest	2024-12-03 22:16:51 +01:00
chrox	5ed74fe9c5	Add app auto updater and bump update of tauri	2024-12-03 17:41:10 +01:00
chrox	abb3ace57e	Fix import books button occasionally shown when refreshing library page	2024-12-03 17:10:47 +01:00
chrox	f897067683	Refactoring WindowButtons handlers	2024-12-03 15:53:59 +01:00
chrox	a189cd6d4f	Hide max/min window buttons in reader page when there are more than one documents opened, closes #6	2024-12-03 15:43:48 +01:00
chrox	0076bab4e3	Flatten css fron pdfjs to support older browser below WebKit 17615.1	2024-12-03 15:24:38 +01:00
chrox	433f707455	Show bookshelf or import books button only when library is loaded	2024-12-03 15:20:49 +01:00
chrox	dbb8347554	Fix max-inline-size not changed according to scroll mode	2024-12-02 22:06:30 +01:00
chrox	f1a31b9590	Fix scrollbar auto hide on macOS	2024-12-02 21:37:00 +01:00
chrox	22fb45e54b	Bump update of foliate-js	2024-12-02 17:37:46 +01:00
chrox	3d09eb761c	Make sure settings are loaded before loading library, closes #2	2024-12-02 17:36:54 +01:00
chrox	0d50edbff1	Add wheel page turning in non-scrolled mode, closes #3	2024-12-02 12:41:45 +01:00
chrox	96fd2752ff	Fix title bar hard to drag-and-move, closes #1	2024-12-02 11:56:04 +01:00
chrox	4c4f067857	Update readme	2024-12-01 23:19:39 +01:00
chrox	d6bfbbc0b6	Fix fg color in darkmode and larger annotator popup	2024-12-01 18:24:07 +01:00
chrox	e851582264	Update readme	2024-12-01 18:23:00 +01:00
chrox	c02d63367a	Update github workflow of release	2024-12-01 12:55:12 +01:00