Feat: Chapter Organization

.github/workflows/build-macos.yml

@@ -4,7 +4,7 @@ on:
   workflow_dispatch:
     inputs:
       version:
-        description: "Version to build (e.g. 0.3.0)"
+        description: "Version to build (e.g. 0.4.0)"
         required: true
 
 jobs:
@@ -100,149 +100,86 @@ jobs:
         run: |
           mkdir -p src-tauri/binaries
 
-          find_launcher() {
+          stage_arch() {
-            local dir="$1"
+            local srcdir="$1"
-            # v2.1.1867 macOS tarball ships "Suwayomi Launcher.command" (space, .command)
+            local arch="$2"
-            find "$dir" -maxdepth 1 -type f -name "*.command" | head -1
+            local sidecar="src-tauri/binaries/suwayomi-server-${arch}"
-          }
+            local bundle_dest="src-tauri/binaries/suwayomi-bundle-${arch}"
 
-          ARM_LAUNCHER=$(find_launcher suwayomi-arm64)
+            JAR=$(find "$srcdir" -name "Suwayomi-Server.jar" | head -1)
-          X64_LAUNCHER=$(find_launcher suwayomi-x64)
+            JAVA=$(find "$srcdir" -path "*/jre/bin/java" | head -1)
 
-          if [ -z "$ARM_LAUNCHER" ] || [ -z "$X64_LAUNCHER" ]; then
+            if [ -z "$JAR" ]; then
-            echo "ERROR: could not find launchers — tarball contents:"
+              echo "ERROR: Suwayomi-Server.jar not found in $srcdir"
-            ls -lR suwayomi-arm64 suwayomi-x64
+              find "$srcdir" -type f | head -30
+              exit 1
+            fi
+            if [ -z "$JAVA" ]; then
+              echo "ERROR: jre/bin/java not found in $srcdir"
+              find "$srcdir" -type f | head -30
               exit 1
             fi
 
-          echo "arm64 launcher: $ARM_LAUNCHER"
+            echo "${arch}: jar=${JAR}  java=${JAVA}"
-          echo "x64   launcher: $X64_LAUNCHER"
 
-          cp "$ARM_LAUNCHER" src-tauri/binaries/suwayomi-server-aarch64-apple-darwin
+            cp -r "$srcdir" "$bundle_dest"
-          cp "$X64_LAUNCHER" src-tauri/binaries/suwayomi-server-x86_64-apple-darwin
-          chmod +x src-tauri/binaries/suwayomi-server-aarch64-apple-darwin
-          chmod +x src-tauri/binaries/suwayomi-server-x86_64-apple-darwin
 
-          # tauri.conf.json expects exactly "binaries/suwayomi-bundle".
+            # The launcher script is committed at src-tauri/binaries/suwayomi-launcher.sh
-          # We stage both arch bundles and swap the symlink before each build.
+            # to avoid embedding a heredoc in YAML (which breaks GitHub Actions parsing).
-          cp -r suwayomi-arm64 src-tauri/binaries/suwayomi-bundle-arm64
+            cp src-tauri/binaries/suwayomi-launcher.sh "$sidecar"
-          cp -r suwayomi-x64   src-tauri/binaries/suwayomi-bundle-x64
+            chmod +x "$sidecar"
+            echo "Staged sidecar: $sidecar"
+          }
+
+          stage_arch suwayomi-arm64 aarch64-apple-darwin
+          stage_arch suwayomi-x64   x86_64-apple-darwin
 
       - name: Patch tauri.conf.json for CI
         run: |
-          # dist/ is already built by the frontend job — suppress the rebuild.
-          # We patch in-place rather than using --config to avoid Tauri schema issues.
           sed -i '' 's/"beforeBuildCommand": "pnpm build"/"beforeBuildCommand": ""/' src-tauri/tauri.conf.json
 
+      # ── aarch64 build ──────────────────────────────────────────────────────
       - name: Swap bundle for aarch64
         run: |
           rm -rf src-tauri/binaries/suwayomi-bundle
-          cp -r src-tauri/binaries/suwayomi-bundle-arm64 src-tauri/binaries/suwayomi-bundle
+          cp -r src-tauri/binaries/suwayomi-bundle-aarch64-apple-darwin \
+                src-tauri/binaries/suwayomi-bundle
 
       - name: Build Tauri app (aarch64)
-        uses: tauri-apps/tauri-action@v0
+        run: pnpm tauri build --target aarch64-apple-darwin --config src-tauri/tauri.macos.conf.json
         env:
-          GITHUB_TOKEN:           ${{ secrets.GITHUB_TOKEN }}
+          # Ad-hoc signing ("-") ships without a Developer ID.
-          # Ad-hoc signing by default ("-"); override by setting APPLE_SIGNING_IDENTITY secret.
+          # Gatekeeper will quarantine the app on other Macs — users must run:
-          # Only set APPLE_CERTIFICATE/APPLE_ID/etc when you have a real Developer ID cert.
+          #   xattr -rd com.apple.quarantine Moku.app
+          # To fix this properly, set APPLE_SIGNING_IDENTITY to your
+          # "Developer ID Application: ..." cert name and add
+          # APPLE_CERTIFICATE / APPLE_CERTIFICATE_PASSWORD / APPLE_ID /
+          # APPLE_TEAM_ID / APPLE_APP_SPECIFIC_PASSWORD secrets for notarisation.
           APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY || '-' }}
-        with:
-          args: --target aarch64-apple-darwin
 
+      # ── x86_64 build ───────────────────────────────────────────────────────
       - name: Swap bundle for x86_64
         run: |
           rm -rf src-tauri/binaries/suwayomi-bundle
-          cp -r src-tauri/binaries/suwayomi-bundle-x64 src-tauri/binaries/suwayomi-bundle
+          cp -r src-tauri/binaries/suwayomi-bundle-x86_64-apple-darwin \
+                src-tauri/binaries/suwayomi-bundle
 
       - name: Build Tauri app (x86_64)
-        uses: tauri-apps/tauri-action@v0
+        run: pnpm tauri build --target x86_64-apple-darwin --config src-tauri/tauri.macos.conf.json
         env:
-          GITHUB_TOKEN:           ${{ secrets.GITHUB_TOKEN }}
-          # Ad-hoc signing by default ("-"); override by setting APPLE_SIGNING_IDENTITY secret.
-          # Only set APPLE_CERTIFICATE/APPLE_ID/etc when you have a real Developer ID cert.
           APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY || '-' }}
-        with:
-          args: --target x86_64-apple-darwin
 
+      # ── upload artifacts ───────────────────────────────────────────────────
       - name: Upload arm64 .dmg
         uses: actions/upload-artifact@v4
         with:
-          name: moku-aarch64
+          name: moku-macos-arm64-${{ github.event.inputs.version }}
           path: src-tauri/target/aarch64-apple-darwin/release/bundle/dmg/*.dmg
           retention-days: 7
 
       - name: Upload x64 .dmg
         uses: actions/upload-artifact@v4
         with:
-          name: moku-x86_64
+          name: moku-macos-x64-${{ github.event.inputs.version }}
           path: src-tauri/target/x86_64-apple-darwin/release/bundle/dmg/*.dmg
           retention-days: 7
-
-      - name: Upload arm64 .app (for universal job)
-        uses: actions/upload-artifact@v4
-        with:
-          name: app-aarch64-apple-darwin
-          path: src-tauri/target/aarch64-apple-darwin/release/bundle/macos/
-          retention-days: 1
-
-      - name: Upload x64 .app (for universal job)
-        uses: actions/upload-artifact@v4
-        with:
-          name: app-x86_64-apple-darwin
-          path: src-tauri/target/x86_64-apple-darwin/release/bundle/macos/
-          retention-days: 1
-
-  universal:
-    name: Universal .dmg
-    needs: tauri
-    runs-on: macos-latest
-
-    steps:
-      - name: Download arm64 .app
-        uses: actions/download-artifact@v4
-        with:
-          name: app-aarch64-apple-darwin
-          path: apps/arm64/
-
-      - name: Download x64 .app
-        uses: actions/download-artifact@v4
-        with:
-          name: app-x86_64-apple-darwin
-          path: apps/x64/
-
-      - name: lipo into universal binary
-        run: |
-          ARM_APP=$(find apps/arm64 -name "*.app" -maxdepth 1 | head -1)
-          X64_APP=$(find apps/x64  -name "*.app" -maxdepth 1 | head -1)
-          APP_NAME=$(basename "$ARM_APP")
-
-          mkdir -p universal
-          cp -r "$ARM_APP" "universal/${APP_NAME}"
-
-          find "universal/${APP_NAME}" -type f | while read -r f; do
-            if file "$f" | grep -q "Mach-O"; then
-              X64_EQUIV="${X64_APP}${f#universal/${APP_NAME}}"
-              if [ -f "$X64_EQUIV" ]; then
-                lipo -create -output "$f" "$f" "$X64_EQUIV" 2>/dev/null || true
-              fi
-            fi
-          done
-
-      - name: Package universal .dmg
-        run: |
-          APP_NAME=$(find universal -name "*.app" -maxdepth 1 | head -1 | xargs basename)
-          mkdir dmg-stage
-          cp -r "universal/${APP_NAME}" dmg-stage/
-          ln -s /Applications dmg-stage/Applications
-          hdiutil create \
-            -volname "Moku" \
-            -srcfolder dmg-stage \
-            -ov -format UDZO \
-            "moku-universal.dmg"
-
-      - name: Upload universal .dmg
-        uses: actions/upload-artifact@v4
-        with:
-          name: moku-universal
-          path: moku-universal.dmg
-          retention-days: 7

.github/workflows/build-windows.yml

@@ -7,6 +7,9 @@ on:
         description: "Version to build (e.g. 0.4.0)"
         required: true
 
+permissions:
+  contents: write
+
 jobs:
   frontend:
     name: Build frontend
@@ -93,8 +96,6 @@ jobs:
           else
             cp -r suwayomi-raw/. suwayomi-extracted/
           fi
-          echo "Extracted bundle contents (top-level):"
-          ls -la suwayomi-extracted/
 
       - name: Stage Suwayomi bundle
         shell: bash
@@ -103,17 +104,15 @@ jobs:
           JAVA=$(find suwayomi-extracted -path "*/jre/bin/java.exe" | head -1)
           JAR=$(find suwayomi-extracted -name "Suwayomi-Server.jar" | head -1)
           if [ -z "$JAVA" ]; then
-            echo "ERROR: jre/bin/java.exe not found. Bundle contents:"
+            echo "ERROR: jre/bin/java.exe not found"
             find suwayomi-extracted -type f | head -50
             exit 1
           fi
           if [ -z "$JAR" ]; then
-            echo "ERROR: Suwayomi-Server.jar not found. Bundle contents:"
+            echo "ERROR: Suwayomi-Server.jar not found"
             find suwayomi-extracted -type f | head -50
             exit 1
           fi
-          echo "Found java: $JAVA"
-          echo "Found jar:  $JAR"
           cp -r suwayomi-extracted src-tauri/binaries/suwayomi-bundle
 
       - name: Validate staging
@@ -129,19 +128,35 @@ jobs:
         shell: bash
         run: |
           sed -i 's/"beforeBuildCommand": "pnpm build"/"beforeBuildCommand": ""/' src-tauri/tauri.conf.json
-          echo "tauri.conf.json patched:"
-          cat src-tauri/tauri.conf.json
 
-      - name: Build Tauri app (Windows x64)
+      - name: Delete existing draft release if present
+        shell: bash
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          RELEASE_ID=$(curl -s -H "Authorization: Bearer $GITHUB_TOKEN"             "https://api.github.com/repos/Youwes09/Moku/releases"             | jq -r '.[] | select(.tag_name == "v${{ github.event.inputs.version }}" and .draft == true) | .id')
+          if [ -n "$RELEASE_ID" ]; then
+            echo "Deleting existing draft release $RELEASE_ID"
+            curl -s -X DELETE -H "Authorization: Bearer $GITHUB_TOKEN"               "https://api.github.com/repos/Youwes09/Moku/releases/$RELEASE_ID"
+            # Also delete the tag so tauri-action can recreate it
+            curl -s -X DELETE -H "Authorization: Bearer $GITHUB_TOKEN"               "https://api.github.com/repos/Youwes09/Moku/git/refs/tags/v${{ github.event.inputs.version }}"
+            echo "Deleted draft release and tag"
+          else
+            echo "No existing draft release found"
+          fi
+
+      - name: Build Tauri app + create draft release
         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 }}
         with:
+          tagName: v${{ github.event.inputs.version }}
+          releaseName: Moku v${{ github.event.inputs.version }}
+          releaseBody: |
+            Windows installer for Moku v${{ github.event.inputs.version }}.
+            Download the `.exe` file below to install or update.
+          releaseDraft: true
+          prerelease: false
           args: --target x86_64-pc-windows-msvc --config src-tauri/tauri.windows.conf.json
-
-      - name: Upload Windows installer
-        uses: actions/upload-artifact@v4
-        with:
-          name: moku-windows-x64
-          path: src-tauri/target/x86_64-pc-windows-msvc/release/bundle/nsis/*.exe
-          retention-days: 7

.gitignore

@@ -37,5 +37,7 @@ src-tauri/gen/
 # --- Flatpak build artifacts ---
 build-dir/
 repo/
+dist/
+packaging/frontend-dist.tar.gz
 *.flatpak
 .flatpak-builder/\n# --- Staged sidecar binaries (platform-specific, never commit) ---\nsrc-tauri/binaries/

README.md

@@ -1,46 +1,113 @@
 <div align="center">
-  <img src="src/assets/moku-icon-rounded.svg" width="96" />
+  <img src="docs/banner.svg" width="100%" alt="Moku" />
-  <h1>Moku</h1>
+</div>
-  <p>A fast, minimal manga reader for <a href="https://github.com/Suwayomi/Suwayomi-Server">Suwayomi-Server</a>.<br/>Built with Tauri v2 and Svelte.</p>
+
+<div align="center">
+
+[![release](https://img.shields.io/github/v/release/Youwes09/Moku?style=flat&color=a8c4a8&labelColor=151515)](https://github.com/Youwes09/Moku/releases/latest)
+[![downloads](https://img.shields.io/github/downloads/Youwes09/Moku/total?style=flat&color=a8c4a8&labelColor=151515)](https://github.com/Youwes09/Moku/releases/latest)
+[![license](https://img.shields.io/github/license/Youwes09/Moku?style=flat&color=a8c4a8&labelColor=151515)](./LICENSE)
+[![discord](https://img.shields.io/discord/1485151759511978077?style=flat&color=a8c4a8&labelColor=151515&label=discord)](https://discord.gg/cfncTbJ2)
+
+</div>
+
+<br/>
+
+Moku is a fast, minimal manga reader frontend for [Suwayomi-Server](https://github.com/Suwayomi/Suwayomi-Server). It wraps Suwayomi's GraphQL API in a lightweight Tauri app — no Electron overhead.
+
+---
+
+## Screenshots
+
+<div align="center">
+  <img src="docs/screenshots/Moku-Home.png" width="49%" alt="Home" />
+  <img src="docs/screenshots/Moku-Discover.png" width="49%" alt="Discover" />
+  <img src="docs/screenshots/Moku-Reader.png" width="49%" alt="Reader" />
+  <img src="docs/screenshots/Moku-Preview.png" width="49%" alt="Preview" />
+  <img src="docs/screenshots/Moku-Tracker.png" width="49%" alt="Tracker" />
+  <img src="docs/screenshots/Moku-Settings.png" width="49%" alt="Settings" />
+</div>
+
+<div align="center">
+  <a href="docs/screenshots">View all screenshots →</a>
 </div>
 
 ---
 
-## Requirements
+## Features
 
-[Suwayomi-Server](https://github.com/Suwayomi/Suwayomi-Server) must be running. By default Moku expects it at `http://127.0.0.1:4567`.
+- **Library management** — organize manga into folders, track unread counts, filter by genre
-
+- **Built-in reader** — single page, long strip, configurable fit modes, customizable keybinds
-> Moku will attempt to launch the server automatically on startup if the `suwayomi-server` binary is on your `PATH`.
+- **Extension support** — install and manage Suwayomi extensions directly from the app
+- **Download management** — queue and monitor chapter downloads with progress toasts
+- **Tracker integration** — sync reading progress with AniList, MyAnimeList, Kitsu, and more
+- **Auto-start server** — optionally launch Suwayomi in the background on startup
+- **Multiple themes** — Dark, Light, Midnight, Warm, High Contrast, and more
+- **Auto-updates** — in-app update checker with silent background notifications
 
 ---
 
 ## Installation
 
-**Nix (recommended)**
+### Flatpak (Linux, recommended)
+
+Suwayomi-Server and a bundled JRE are included — no separate install needed.
 
 ```bash
-nix run github:Youwes09/moku
+flatpak install moku.flatpak
+flatpak run dev.moku.app
+```
+
+Download the latest `moku.flatpak` from the [releases page](https://github.com/Youwes09/Moku/releases/latest).
+
+### Nix
+
+```bash
+nix run github:Youwes09/Moku
 ```
 
 Add to your flake:
 
 ```nix
-inputs.moku.url = "github:Youwes09/moku";
+inputs.moku.url = "github:Youwes09/Moku";
 ```
 
-**From source**
+### Windows
 
-```bash
+Download the `.exe` installer from the [releases page](https://github.com/Youwes09/Moku/releases/latest). Suwayomi-Server and a JRE are bundled.
-git clone https://github.com/Youwes09/moku
+
-cd moku
+### macOS
-nix build
+
-./result/bin/moku
+Download the `.dmg` from the [releases page](https://github.com/Youwes09/Moku/releases/latest).
-```
+
+> **Note:** Builds are ad-hoc signed. On first launch you may need to run:
+> ```bash
+> xattr -rd com.apple.quarantine /Applications/Moku.app
+> ```
+
+---
+
+## Requirements
+
+If you're not using the bundled Flatpak or Windows installer, [Suwayomi-Server](https://github.com/Suwayomi/Suwayomi-Server) must be running separately. By default Moku connects to `http://127.0.0.1:4567`.
+
+You can point Moku at any Suwayomi instance — local or remote — via **Settings → General → Server URL**.
 
 ---
 
 ## Development
 
+**Prerequisites:** [Rust](https://rustup.rs), [Node.js](https://nodejs.org), [pnpm](https://pnpm.io), and [Tauri v2 prerequisites](https://tauri.app/start/prerequisites/).
+
+```bash
+git clone https://github.com/Youwes09/Moku
+cd Moku
+pnpm install
+pnpm tauri:dev
+```
+
+Or with Nix:
+
 ```bash
 nix develop
 pnpm install
@@ -54,12 +121,20 @@ pnpm tauri:dev
 | | |
 |---|---|
 | [Tauri v2](https://tauri.app) | Native app shell |
-| [Svelte](https://svelte.dev) + [TypeScript](https://www.typescriptlang.org) | UI |
+| [Svelte 5](https://svelte.dev) + [TypeScript](https://www.typescriptlang.org) | UI |
 | [Vite](https://vitejs.dev) | Frontend bundler |
 | [Crane](https://github.com/ipetkov/crane) | Nix Rust builds |
 
 ---
 
+## Community
+
+Questions, feedback, or just want to hang out — join the Discord.
+
+[![Discord](https://img.shields.io/discord/1485151759511978077?style=for-the-badge&color=a8c4a8&labelColor=151515&label=Join+the+Discord)](https://discord.gg/cfncTbJ2)
+
+---
+
 ## License
 
 Distributed under the [Apache 2.0 License](./LICENSE).

Todo

@@ -1,104 +1,42 @@
-Todo:
+Major Revisions:
-3. Explore Manga Upscaler & Other Image Processing
+ - Moku + Crossplatform Support (MacOS Remaining)
-4. Font Weird on Flatpak, Investigate and Fix
+ - Contemplate Anime Support, Add Novel Support (Consumet API)
-5. Investigate "egl:failed to create dri2 screen" & more GPU Issues
+ - Enable Cloudflare Bypass (Suwayomi Config)
-
+ - Moku-Share to Easily Migrate/Share Manga (Investigate Usecase/Feasibility)
-
+ - Adjustment in Settings for Theme Editor:
-Bugs:
+   - Allow User to Edit/Create Themes
-
+   - Allow For Command-Line IPC for Temporary (Apply Once) & Permanent Themes OR External Methodology for Matugen Colors
-- Add Back after Search & Clear on Search
-- Fix Tag-Based Search to Allow for Finding New Manga Rather than PURE-DB
-- Add Download Location Change, Moku-Migration, Flatpak & Normal Installation Directory Checks
-
-
-- Fix Infinite Scroll Hitting Button Non-reactive to Chapter State, hence Resulting in Error. (Doesn't work on single or double digit, but works on select chapters?) (doesnt work 1 - 2 qnd 51 - 52?) Cause unknow
-- - Reader appears to be adding integers? Marks chapters incorrectly, need to stablize and patch. User is able to
-skip chapters,  etc
-- Mark as Read no longer working on select chapters, choose more robust methodology.
-- Reset to top when user clicks next chapter in reader.
-
-
-- Fix Downloaded in Library (Tags Broken) & All
-- Using Delete All Crashes App (But Works)
-- Fix Folder Display in Library 
-- Add Version Tags (To Find Version)
-- Sidebar Icon Highlighted
-- Introduce Deduplication into Library & Search
-
-
-Features:
-- Add PDF Textbook Support
-- Consider what to do empty space in sidebar (Maybe Daily Reading Time Brainstorm)
-- Migration Features
-- Multi-Page Long Screenshot
-- Add Consumet Api (Anime & Light Novel Support)
-
-
-Big Revisions:
-0. Expand into fully-fledged reader, with modular manga support
-1. Anime & Novel Support
-2. Tracker Support
-3. Cloudflare Bypass Enable Support
-4. macOS Support (feasible)
-
-
-
-Testing:
-
-- Fix the Infinite Append/Scroll on Downloaded Manga, (Unable to Transfer Between Downloaded and Internet Based Manga Providing, hence resulting in feature breaking till toggled and retoggled)
-- Fix the Mark as Read (Glitched)
-
-
-Completed:
-8. Fix Polling on Download Manager (Instantanous Response)
-19. Debounce Time on Reader to improve lag (Toggle Setting)
-10. Download Manager Pause and Cancel All Not Working + Download Lag on Series Detail Side
-17. Change Library Text change to "No manga saved to library, browse sources to add some."
-9. Fix CSS issue on Sidebar (Weird Green Overlay on Button)
-7. Fix Scaling (100 = 125% and so forth)
-2. Expand Criteria on Series Detail (Tags, Summaries) Make more Compact
-14. Right-Click should have (Remove Library & Delete All) + Make New Folder (Context Menu)
-15. Explorer Right-Click New Context Menu with Add to Library, Add to Folder, etc
-11. Reader & UI needs download and other Notifications
-- Fix Mark all Above as Read to Mark all Below as Read (Should be visual based) also add Unread Option, Sidebar Category for mark all above as read and mark all below as unread. (Series Detail)
-- Add Refresh Details on Series Details.
-- Patch GenreDrill & Integrate into Explore Folder
-18. Disable NSFW Extensions option in settings
-- Filtering by Genre (Accessed by Clicking tags on Manga)
-- Remove Series Detail Mark Read & Unread
-20. Expand History (Total Time Read, etc)
-12. Delete all Downloads should also cancel all download queues
-13. Cancel Download along with Queue & Download Timeout Feature
-- Fix Initial Async Loading (Shows Suwayomi Not Loaded Till Refresh)
-- Allow to move back from a window and return to previous state, not completely reset (Whole UI Issue)
-- Opening Explore first time loads nothing, going to different page then going back loads everything relatively instantly? (Explore Page Bug)
-- Extensions Page no Longer Loading efficiently
-- Map out MangaPreview tags to GenreDrill
-- GenreDrill & GenreFilter pages do not populate completely.
-16. Contrast Adjustment Option in Settings for Users (UI FOCUSED)
-- Fix Zoom in Reader changing Pages (Zoom Out Threshold in Reader causes Break)
-- Clean up Migrate Model to be more initutive
-6. Fix laggy renderer on single page (same cache as longscroll) & set default longstrip
-5. Lock reader on valid chapters to avoid bugs, etc.
-1. Cache issue when opening manga series detail first time (Loading screen addition) & Async Load
-- Fix Grid View for Large Amounts of Chapter (Check Initial D) (Series Detail)
-- Properly Kill Tachidesk-Server
-- Fix scaling on splash screen
-- Idle Screen Test Uses Animations, but Reality still uses old system with Mouse Movement = Dismiss + No Fade Out
-- Idle Screen is Super laggy, needs minimum of 60 fps hence needs more optimization
-- Add Scroll Wheel Compatibility to Explore, etc (Explore Page Bug)
 
+Minor Revisions:
+ - Improve Deduplication Algorithm with Advanced Option Settings (Implement Chapter & Author-based Comparisons, Resource Intensive)
+ - Integrate Download Directory Changes (Settings)
+ - Investigate feasibility of Multi-Page Screenshot (Reader)
+ - Add Hover Info on Library (Make sure doesn't conflict with additional clicks)
 
+Priority Bugs:
+ - Cache ALL Cover Pictures & Details for Manga in Library
+ - MacOS Full-Screen & UI Compatability (TitleBar)
 
+General/Misc Bugs:
+ - Fix Highlightable Elements
+ - Investigate "egl:failed to create dri2 screen"
+ - Check Fonts/Design on Flatpak
+ - Fix Delete-All Crash (Deletes All but Cripples App)
+ - Investigate Prod vs. Dev Directory Change/Data Load (Caused by Library Algorithm Revision?)
 
+In-Progress:`
+ - Fix Reader Chapter Shifts (Glitched Sentinel)
+   - Still Shifts Down after reading ~8+ Chapters?
+   - Identify When Chapters are Unloaded, How to Preserve Structure
 
 
 Important Commands:
-cd ~/Projects/Manga/Moku
+  cd ~/Projects/Manga/Moku
-pnpm build
+  pnpm build
-tar -czf packaging/frontend-dist.tar.gz -C dist .
+  tar -czf packaging/frontend-dist.tar.gz -C dist .
-sha256sum packaging/frontend-dist.tar.gz | awk '{print $1}'
+  sha256sum packaging/frontend-dist.tar.gz | awk '{print $1}'
 
-1. nix-shell -p "python311.withPackages(ps: [ ps.aiohttp ps.tomlkit ])" --run "python3 packaging/flatpak-cargo-generator.py src-tauri/Cargo.lock -o packaging/cargo-sources.json"
+
-2. nix shell nixpkgs#appstream nixpkgs#flatpak-builder --command flatpak-builder --repo=repo --force-clean build-dir dev.moku.app.yml
+  nix-shell -p "python311.withPackages(ps: [ ps.aiohttp ps.tomlkit ])" --run "python3 packaging/flatpak-cargo-generator.py src-tauri/Cargo.lock -o packaging/cargo-sources.json"
-3. flatpak build-bundle repo moku.flatpak dev.moku.app
+  nix shell nixpkgs#appstream nixpkgs#flatpak-builder --command flatpak-builder --repo=repo --force-clean build-dir dev.moku.app.yml
+  flatpak build-bundle repo moku.flatpak dev.moku.app

dev.moku.app.yml

@@ -181,7 +181,7 @@ modules:
         path: .
       - type: file
         path: packaging/frontend-dist.tar.gz
-        sha256: c78a3f002f898011c4e70e1af781b37dac0fd995b5623170256d88339c90ca74
+        sha256: cb2f65bad39db8d7411b15383965812fdd02c02697431e4eb3f3f05281eac49d
       - packaging/cargo-sources.json
       - type: inline
         dest: src-tauri/.cargo

docs/banner.svg

@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 320" width="1280" height="320">
+  <defs>
+
+    <linearGradient id="leafHero" x1="0.3" y1="0" x2="0.7" y2="1">
+      <stop offset="0%"   stop-color="#52b888"/>
+      <stop offset="100%" stop-color="#1e5840"/>
+    </linearGradient>
+
+    <clipPath id="roundedBounds">
+      <rect width="1280" height="320" rx="18" ry="18"/>
+    </clipPath>
+
+  </defs>
+
+  <g clip-path="url(#roundedBounds)">
+
+    <rect width="1280" height="320" fill="#070e09"/>
+
+    <!-- Icon — rotate(7) from moku-icon-splash.svg -->
+    <g transform="translate(640, 148) rotate(7) scale(0.065,-0.065) translate(-5000,-4800)"
+       fill="url(#leafHero)" opacity="0.97">
+      <path d="M4908 6615 c-597 -629 -935 -1264 -934 -1755 0 -508 195 -778 790
+      -1098 l194 -104 22 -114 c33 -164 76 -271 140 -347 80 -94 106 -62 77 94 -47
+      255 43 443 294 613 797 539 714 1392 -250 2551 -230 278 -224 275 -333 160z
+      m52 -945 c0 -472 -8 -850 -17 -850 -36 0 -693 703 -692 740 2 48 167 321 309
+      509 175 233 359 451 380 451 13 0 20 -304 20 -850z m183 775 c120 -126 357
+      -447 356 -482 0 -18 -47 -83 -105 -144 -57 -61 -151 -163 -208 -225 -151 -166
+      -146 -180 -146 406 0 286 7 520 16 520 9 0 48 -34 87 -75z m541 -750 c86 -150
+      196 -391 196 -430 0 -8 -25 -42 -55 -75 -31 -33 -149 -163 -264 -290 -339
+      -374 -480 -520 -501 -520 -13 0 -20 167 -20 465 l1 465 151 170 c83 94 193
+      217 244 275 122 138 137 135 248 -60z m-1098 -633 l374 -378 0 -462 c0 -254
+      -5 -462 -11 -462 -6 0 -55 23 -110 50 l-99 51 0 208 c0 259 -11 288 -176 457
+      -196 200 -188 199 -326 62 l-117 -116 -35 79 c-71 161 -39 569 64 816 42 100
+      20 116 436 -305z m1349 23 c109 -390 -87 -848 -475 -1111 -207 -139 -305 -262
+      -338 -420 -7 -31 -21 -56 -32 -56 -36 -1 -46 86 -48 405 l-2 313 123 137 c68
+      75 214 236 325 357 454 493 421 466 447 375z m-1292 -785 c12 -29 15 -118 7
+      -215 l-14 -166 -73 44 c-174 104 -403 341 -403 416 0 15 47 70 105 123 l104
+      98 127 -125 c70 -69 136 -147 147 -175z"/>
+    </g>
+
+    <!-- Stack text pinned to bottom -->
+    <text
+      x="640" y="300"
+      text-anchor="middle"
+      font-family="'SF Mono', 'JetBrains Mono', 'Fira Code', monospace"
+      font-size="14"
+      letter-spacing="5"
+      fill="#a8c4a8"
+      opacity="0.32">TAURI v2  ·  SVELTE 5  ·  TYPESCRIPT</text>
+
+  </g>
+</svg>

flake.nix

@@ -18,7 +18,7 @@
 
       perSystem = { system, lib, ... }:
         let
-          version = "0.4.0";
+          version = "0.4.1";
 
           pkgs = import inputs.nixpkgs {
             inherit system;
@@ -71,7 +71,7 @@
               inherit version;
               src            = frontendSrc;
               fetcherVersion = 1;
-              hash           = "sha256-FsZTHeBS9qQ9KYgiwDX1vam6uJXK8OjLe5U6Jfu33lc=";
+              hash           = "sha256-4QUSgWgMu7FGn44+TGmACheokPhaBdHvA/055SqUs0Q=";
             };
 
             buildPhase   = "pnpm build";

package.json

@@ -11,6 +11,8 @@
   },
   "dependencies": {
     "@tauri-apps/api": "^2.0.0",
+    "@tauri-apps/plugin-os": "^2.3.2",
+    "@tauri-apps/plugin-shell": "^2.3.5",
     "clsx": "^2.1.1",
     "phosphor-svelte": "^3.1.0",
     "svelte-spa-router": "^4.0.1"

pnpm-lock.yaml

@@ -11,6 +11,12 @@ importers:
       '@tauri-apps/api':
         specifier: ^2.0.0
         version: 2.10.1
+      '@tauri-apps/plugin-os':
+        specifier: ^2.3.2
+        version: 2.3.2
+      '@tauri-apps/plugin-shell':
+        specifier: ^2.3.5
+        version: 2.3.5
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -433,6 +439,12 @@ packages:
     engines: {node: '>= 10'}
     hasBin: true
 
+  '@tauri-apps/plugin-os@2.3.2':
+    resolution: {integrity: sha512-n+nXWeuSeF9wcEsSPmRnBEGrRgOy6jjkSU+UVCOV8YUGKb2erhDOxis7IqRXiRVHhY8XMKks00BJ0OAdkpf6+A==}
+
+  '@tauri-apps/plugin-shell@2.3.5':
+    resolution: {integrity: sha512-jewtULhiQ7lI7+owCKAjc8tYLJr92U16bPOeAa472LHJdgaibLP83NcfAF2e+wkEcA53FxKQAZ7byDzs2eeizg==}
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
@@ -1026,6 +1038,14 @@ snapshots:
       '@tauri-apps/cli-win32-ia32-msvc': 2.10.1
       '@tauri-apps/cli-win32-x64-msvc': 2.10.1
 
+  '@tauri-apps/plugin-os@2.3.2':
+    dependencies:
+      '@tauri-apps/api': 2.10.1
+
+  '@tauri-apps/plugin-shell@2.3.5':
+    dependencies:
+      '@tauri-apps/api': 2.10.1
+
   '@types/estree@1.0.8': {}
 
   '@types/pug@2.0.10': {}

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "moku"
-version = "0.4.0"
+version = "0.4.1"
 edition = "2021"
 
 [lib]
@@ -17,11 +17,15 @@ tauri-build = { version = "2.0", features = [] }
 [dependencies]
 tauri = { version = "2.0", features = [] }
 tauri-plugin-shell    = "2"
+tauri-plugin-updater  = "2"
+tauri-plugin-process  = "2"
+tauri-plugin-http     = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 walkdir = "2"
 sysinfo = "0.32"
 dirs = "5"
+tauri-plugin-os = "2.3.2"
 
 [profile.release]
 codegen-units = 1

src-tauri/binaries/suwayomi-launcher.sh

@@ -0,0 +1,66 @@
+#!/bin/sh
+# Moku — Suwayomi launcher sidecar for macOS.
+# Tauri calls this script directly as a sidecar (Contents/MacOS/suwayomi-server-{arch}).
+# The Suwayomi bundle is placed by Tauri into Contents/Resources/suwayomi-bundle/.
+set -e
+
+# Resolve the real directory of this script, following symlinks.
+SELF="$0"
+while [ -L "$SELF" ]; do
+  SELF="$(readlink "$SELF")"
+done
+DIR="$(cd "$(dirname "$SELF")" && pwd)"
+
+# ── Locate the bundle ─────────────────────────────────────────────────────────
+# Inside .app:  sidecar = Contents/MacOS/suwayomi-server-{arch}
+#               bundle  = Contents/Resources/suwayomi-bundle/
+# Dev / flat layout: bundle sits next to the sidecar, or one level up.
+find_bundle() {
+  local base="$1"
+  for candidate in \
+    "${base}/../Resources/suwayomi-bundle" \
+    "${base}/suwayomi-bundle" \
+    "${base}/../suwayomi-bundle"
+  do
+    # The jar lives at <bundle>/bin/Suwayomi-Server.jar
+    if [ -f "${candidate}/bin/Suwayomi-Server.jar" ]; then
+      # Canonicalise (no readlink -f on older macOS sh, use cd trick)
+      echo "$(cd "$candidate" && pwd)"
+      return 0
+    fi
+  done
+  return 1
+}
+
+BUNDLE=$(find_bundle "$DIR") || {
+  echo "[sidecar] ERROR: cannot locate suwayomi-bundle relative to $DIR" >&2
+  echo "[sidecar] Tried:" >&2
+  echo "  $DIR/../Resources/suwayomi-bundle" >&2
+  echo "  $DIR/suwayomi-bundle" >&2
+  echo "  $DIR/../suwayomi-bundle" >&2
+  exit 1
+}
+
+JAVA="${BUNDLE}/jre/bin/java"
+JAR="${BUNDLE}/bin/Suwayomi-Server.jar"
+
+echo "[sidecar] BUNDLE=$BUNDLE" >&2
+echo "[sidecar] JAVA=$JAVA" >&2
+echo "[sidecar] JAR=$JAR" >&2
+
+if [ ! -x "$JAVA" ]; then
+  echo "[sidecar] ERROR: java not executable at $JAVA" >&2
+  exit 1
+fi
+if [ ! -f "$JAR" ]; then
+  echo "[sidecar] ERROR: jar not found at $JAR" >&2
+  exit 1
+fi
+
+# "$@" will contain the -Dsuwayomi.tachidesk.config.server.rootDir=... flag
+# prepended by spawn_server in lib.rs, followed by -jar <path>.
+# We call java directly so all JVM flags reach it properly.
+exec "$JAVA" \
+  -Djava.awt.headless=true \
+  "$@" \
+  -jar "$JAR"

src-tauri/capabilities/default.json

@@ -25,6 +25,13 @@
     "core:window:allow-outer-size",
     "core:window:allow-inner-position",
     "core:window:allow-outer-position",
-    "core:window:allow-scale-factor"
+    "core:window:allow-scale-factor",
+    "updater:default",
+    "updater:allow-check",
+    "updater:allow-download-and-install",
+    "process:default",
+    "process:allow-restart",
+    "http:default",
+    "http:allow-fetch"
   ]
 }

src-tauri/src/lib.rs

@@ -4,6 +4,8 @@ use std::io::Write;
 use sysinfo::Disks;
 use serde::Serialize;
 use tauri::{Manager, WindowEvent};
+#[cfg(target_os = "windows")]
+use tauri::Emitter;
 use tauri_plugin_shell::{ShellExt, process::CommandChild};
 use walkdir::WalkDir;
 
@@ -24,6 +26,26 @@ pub enum SpawnError {
     SpawnFailed(String),
 }
 
+// ── Update types ──────────────────────────────────────────────────────────────
+
+/// A single GitHub release returned to the frontend.
+#[derive(Serialize, Clone)]
+pub struct ReleaseInfo {
+    pub tag_name:     String,
+    pub name:         String,
+    pub body:         String,
+    pub published_at: String,
+    pub html_url:     String,
+}
+
+/// Progress event emitted during download — matches what the frontend listens for.
+#[derive(Clone, serde::Serialize)]
+#[cfg_attr(not(target_os = "windows"), allow(dead_code))]
+struct UpdateProgress {
+    downloaded: u64,
+    total:      Option<u64>,
+}
+
 /// Strip the \\?\ extended-length path prefix that Windows adds to long paths.
 /// Java and many other tools do not accept this prefix and will fail silently.
 fn strip_unc(path: PathBuf) -> PathBuf {
@@ -203,6 +225,7 @@ struct ServerInvocation {
     working_dir: Option<PathBuf>,
 }
 
+#[cfg(not(target_os = "macos"))]
 fn find_java_in_bundle(bundle_dir: &PathBuf, log: &mut Option<std::fs::File>) -> Option<PathBuf> {
     #[cfg(target_os = "windows")]
     let java = bundle_dir.join("jre").join("bin").join("java.exe");
@@ -287,16 +310,33 @@ fn resolve_server_binary(
 
     #[cfg(target_os = "macos")]
     {
+        // Tauri places externalBin sidecars next to the main binary in
+        // Contents/MacOS/, not in Contents/Resources/.  Derive that path
+        // from resource_dir (Contents/Resources → Contents/MacOS).
+        let macos_dir = resource_dir.join("../MacOS")
+            .canonicalize()
+            .unwrap_or_else(|_| resource_dir.join("../MacOS"));
+
+        do_log(log, &format!("[resolve] macOS macos_dir = {:?}", macos_dir));
+
+        // Tauri strips the target triple when installing externalBin sidecars
+        // into Contents/MacOS/, so the binary is always just "suwayomi-server"
+        // at runtime. The triple-suffixed names are only needed on disk at
+        // build time for Tauri to pick the right arch during bundling.
         let candidates = [
+            "suwayomi-server",
             "suwayomi-server-aarch64-apple-darwin",
             "suwayomi-server-x86_64-apple-darwin",
-            "suwayomi-server",
         ];
+
+        // Search MacOS/ first (correct location), then Resources/ as fallback
+        // for flat dev layouts where the script sits next to resources.
+        for search_dir in &[&macos_dir, &resource_dir] {
             for name in &candidates {
-            let p = resource_dir.join(name);
+                let p = search_dir.join(name);
                 do_log(log, &format!("[resolve] macOS candidate: {:?} exists={}", p, p.exists()));
                 if p.exists() {
-                do_log(log, &format!("[resolve] using macOS candidate: {:?}", p));
+                    do_log(log, &format!("[resolve] using macOS sidecar: {:?}", p));
                     return Ok(ServerInvocation {
                         bin:         p.to_string_lossy().into_owned(),
                         args:        vec![],
@@ -305,6 +345,7 @@ fn resolve_server_binary(
                 }
             }
         }
+    }
 
     do_log(log, "[resolve] trying PATH fallback");
     for name in &["suwayomi-server", "tachidesk-server"] {
@@ -415,16 +456,114 @@ fn kill_server(app: tauri::AppHandle) -> Result<(), String> {
     Ok(())
 }
 
+// ── Update commands ───────────────────────────────────────────────────────────
+
+/// Fetch the list of all GitHub releases so the frontend can show a version picker.
+/// Uses tauri-plugin-http so it goes through Tauri's permission system.
+#[tauri::command]
+async fn list_releases() -> Result<Vec<ReleaseInfo>, String> {
+    use tauri_plugin_http::reqwest;
+
+    let client = reqwest::Client::builder()
+        .user_agent("Moku")
+        .build()
+        .map_err(|e| e.to_string())?;
+
+    let resp = client
+        .get("https://api.github.com/repos/Youwes09/Moku/releases?per_page=30")
+        .send()
+        .await
+        .map_err(|e| e.to_string())?;
+
+    if !resp.status().is_success() {
+        return Err(format!("GitHub API returned {}", resp.status()));
+    }
+
+    #[derive(serde::Deserialize)]
+    struct GhRelease {
+        tag_name:     String,
+        name:         Option<String>,
+        body:         Option<String>,
+        published_at: Option<String>,
+        html_url:     String,
+    }
+
+    let body = resp.text().await.map_err(|e| e.to_string())?;
+    let releases: Vec<GhRelease> = serde_json::from_str(&body).map_err(|e| e.to_string())?;
+
+    Ok(releases
+        .into_iter()
+        .map(|r| ReleaseInfo {
+            tag_name:     r.tag_name.clone(),
+            name:         r.name.unwrap_or_else(|| r.tag_name.clone()),
+            body:         r.body.unwrap_or_default(),
+            published_at: r.published_at.unwrap_or_default(),
+            html_url:     r.html_url,
+        })
+        .collect())
+}
+
+/// Download and install the latest update using tauri-plugin-updater.
+/// Emits `update-progress` events with `{ downloaded, total }` while downloading.
+/// On Windows the installer runs in passive (silent) mode; the frontend prompts restart.
+/// On other platforms this command is a no-op — the frontend opens the GitHub page instead.
+#[tauri::command]
+#[allow(unused_variables)]
+async fn download_and_install_update(app: tauri::AppHandle) -> Result<(), String> {
+    #[cfg(not(target_os = "windows"))]
+    return Err("Native install is Windows-only; open the GitHub release page instead.".into());
+
+    #[cfg(target_os = "windows")]
+    {
+        use tauri_plugin_updater::UpdaterExt;
+
+        let updater = app.updater().map_err(|e| e.to_string())?;
+        let update  = updater.check().await.map_err(|e| e.to_string())?;
+
+        let Some(update) = update else {
+            return Err("No update available from the updater endpoint.".into());
+        };
+
+        let app_clone = app.clone();
+        update
+            .download_and_install(
+                move |downloaded, total| {
+                    let _ = app_clone.emit("update-progress", UpdateProgress { downloaded: downloaded as u64, total });
+                },
+                || {},
+            )
+            .await
+            .map_err(|e| e.to_string())?;
+
+        Ok(())
+    }
+}
+
+/// Restart the app after a successful update install.
+#[tauri::command]
+fn restart_app(app: tauri::AppHandle) {
+    tauri::process::restart(&app.env());
+}
+
+// ── App entry point ───────────────────────────────────────────────────────────
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
     tauri::Builder::default()
+        .plugin(tauri_plugin_os::init())
         .plugin(tauri_plugin_shell::init())
+        .plugin(tauri_plugin_http::init())
+        .plugin(tauri_plugin_process::init())
+        .plugin(tauri_plugin_updater::Builder::new().build())
         .manage(ServerState(Mutex::new(None)))
         .invoke_handler(tauri::generate_handler![
             get_storage_info,
             spawn_server,
             kill_server,
             get_platform_ui_scale,
+            list_releases,
+            download_and_install_update,
+            restart_app,
         ])
         .setup(|_app| Ok(()))
         .on_window_event(|window, event| {

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Moku",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "identifier": "dev.moku.app",
   "build": {
     "frontendDist": "../dist",
@@ -49,6 +49,10 @@
   "plugins": {
     "shell": {
       "open": true
+    },
+    "updater": {
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDM2NEQzNDdFRjlDNUVEN0MKUldSODdjWDVmalJOTml1b0xzMDU3ZE1sNWJLZUhqUDN5cmJUdkdpeFlEVGNoQVN3UjhCc3AxV3QK",
+      "endpoints": []
     }
   }
 }

src-tauri/tauri.macos.conf.json

@@ -0,0 +1,25 @@
+{
+  "app": {
+    "windows": [
+      {
+        "decorations": true,
+        "titleBarStyle": "Overlay",
+        "hiddenTitle": true
+      }
+    ]
+  },
+  "bundle": {
+    "targets": ["dmg"],
+    "externalBin": [
+      "binaries/suwayomi-server"
+    ],
+    "resources": {
+      "binaries/suwayomi-bundle": "suwayomi-bundle"
+    },
+    "macOS": {
+      "minimumSystemVersion": "11.0",
+      "exceptionDomain": "localhost",
+      "frameworks": []
+    }
+  }
+}

src-tauri/tauri.windows.conf.json

@@ -1,8 +1,20 @@
 {
   "bundle": {
+    "createUpdaterArtifacts": true,
     "resources": [
       "binaries/suwayomi-bundle/bin/Suwayomi-Server.jar",
       "binaries/suwayomi-bundle/jre/**/*"
     ]
+  },
+  "plugins": {
+    "updater": {
+      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDM2NEQzNDdFRjlDNUVEN0MKUldSODdjWDVmalJOTml1b0xzMDU3ZE1sNWJLZUhqUDN5cmJUdkdpeFlEVGNoQVN3UjhCc3AxV3QK",
+      "endpoints": [
+        "https://github.com/Youwes09/Moku/releases/latest/download/latest.json"
+      ],
+      "windows": {
+        "installMode": "passive"
+      }
+    }
   }
 }

src/App.svelte

@@ -2,22 +2,74 @@
   import { onMount } from "svelte";
   import { invoke } from "@tauri-apps/api/core";
   import { listen } from "@tauri-apps/api/event";
+  import { getVersion } from "@tauri-apps/api/app";
+  import { getCurrentWindow } from "@tauri-apps/api/window";
   import { gql } from "./lib/client";
   import { GET_DOWNLOAD_STATUS } from "./lib/queries";
-  import { store, addToast, setActiveDownloads } from "./store/state.svelte";
+  import { store, addToast, setActiveDownloads, setSettingsOpen } from "./store/state.svelte";
   import type { DownloadStatus, DownloadQueueItem } from "./lib/types";
   import Layout       from "./components/layout/Layout.svelte";
   import Reader       from "./components/reader/Reader.svelte";
   import Settings     from "./components/settings/Settings.svelte";
+  import ThemeEditor  from "./components/settings/ThemeEditor.svelte";
   import TitleBar     from "./components/layout/TitleBar.svelte";
   import Toaster      from "./components/layout/Toaster.svelte";
   import SplashScreen from "./components/layout/SplashScreen.svelte";
   import MangaPreview from "./components/shared/MangaPreview.svelte";
 
-  const MAX_ATTEMPTS = 60;
+  let themeStyleEl: HTMLStyleElement | null = null;
 
-  let serverProbeOk   = $state(!store.settings.autoStartServer);
+  $effect(() => {
-  let appReady        = $state(!store.settings.autoStartServer);
+    const themeId  = store.settings.theme ?? "dark";
+    const isCustom = themeId.startsWith("custom:");
+
+    if (!isCustom) {
+      themeStyleEl?.remove();
+      themeStyleEl = null;
+      document.documentElement.setAttribute("data-theme", themeId);
+      return;
+    }
+
+    const custom = store.settings.customThemes?.find(t => t.id === themeId);
+    if (!custom) {
+      themeStyleEl?.remove();
+      themeStyleEl = null;
+      document.documentElement.setAttribute("data-theme", "dark");
+      return;
+    }
+
+    const vars = Object.entries(custom.tokens)
+      .map(([k, v]) => `  --${k}: ${v};`)
+      .join("\n");
+    const css = `[data-theme="custom"] {\n${vars}\n}`;
+
+    if (!themeStyleEl) {
+      themeStyleEl = document.createElement("style");
+      themeStyleEl.id = "moku-custom-theme";
+      document.head.appendChild(themeStyleEl);
+    }
+    themeStyleEl.textContent = css;
+    document.documentElement.setAttribute("data-theme", "custom");
+  });
+
+  let themeEditorOpen   = $state(false);
+  let themeEditorEditId = $state<string | null>(null);
+
+  function openThemeEditor(id?: string | null) {
+    themeEditorEditId = id ?? null;
+    themeEditorOpen   = true;
+  }
+
+  function closeThemeEditor() {
+    themeEditorOpen   = false;
+    themeEditorEditId = null;
+  }
+
+  const MAX_ATTEMPTS = 10;
+  const win = getCurrentWindow();
+
+  let serverProbeOk = $state(false);
+  let appReady      = $state(false);
   let failed        = $state(false);
   let notConfigured = $state(false);
   let idle          = $state(false);
@@ -57,8 +109,8 @@
   }
 
   function resetIdle() {
-    if (idle) return;
     if (idleTimer) clearTimeout(idleTimer);
+    if (idle) return;
     const ms = (store.settings.idleTimeoutMin ?? 5) * 60 * 1000;
     if (ms === 0) return;
     idleTimer = setTimeout(() => idle = true, ms);
@@ -74,15 +126,10 @@
   });
 
   $effect(() => {
-    // Re-runs whenever uiScale or platformScale changes.
     store.settings.uiScale; platformScale;
     applyZoom();
   });
 
-  $effect(() => {
-    document.documentElement.setAttribute("data-theme", store.settings.theme ?? "dark");
-  });
-
   $effect(() => {
     if (!appReady) return;
     const poll = () => gql<{ downloadStatus: DownloadStatus }>(GET_DOWNLOAD_STATUS)
@@ -92,14 +139,89 @@
     return () => clearInterval(pollInterval);
   });
 
+  async function checkForUpdateSilently() {
+    try {
+      const [currentVersion, releases] = await Promise.all([
+        getVersion(),
+        invoke<Array<{ tag_name: string; html_url: string }>>("list_releases"),
+      ]);
+
+      const valid = releases.filter(r => typeof r.tag_name === "string" && r.tag_name.trim());
+      if (!valid.length) return;
+
+      const parse = (tag: string): number[] =>
+        tag.replace(/^v/, "").split(".").map(Number);
+
+      const compare = (a: number[], b: number[]): number => {
+        for (let i = 0; i < 3; i++) {
+          if ((a[i] ?? 0) !== (b[i] ?? 0)) return (b[i] ?? 0) - (a[i] ?? 0);
+        }
+        return 0;
+      };
+
+      const latestTag = valid
+        .map(r => r.tag_name)
+        .sort((a, b) => compare(parse(a), parse(b)))[0]
+        .replace(/^v/, "");
+
+      const isNewer = compare(parse(latestTag), parse(currentVersion)) < 0;
+      if (isNewer) {
+        addToast({
+          kind: "info",
+          title: `Update available — v${latestTag}`,
+          body: "Open Settings → About to install.",
+          duration: 8000,
+        });
+      }
+    } catch {}
+  }
+
+  let cancelProbe = false;
+
+  function startProbe() {
+    cancelProbe = false;
+    failed      = false;
+    let tries   = 0;
+
+    async function probe() {
+      if (cancelProbe) return;
+      tries++;
+      try {
+        const rawUrl = store.settings.serverUrl;
+        const base   = typeof rawUrl === "string" && rawUrl.trim()
+          ? rawUrl.replace(/\/$/, "")
+          : "http://127.0.0.1:4567";
+        const s      = store.settings;
+        const auth: Record<string, string> = s.serverAuthEnabled && s.serverAuthUser && s.serverAuthPass
+          ? { Authorization: `Basic ${btoa(`${s.serverAuthUser.trim()}:${s.serverAuthPass.trim()}`)}` }
+          : {};
+        const res = await fetch(`${base}/api/graphql`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json", ...auth },
+          body: JSON.stringify({ query: "{ __typename }" }),
+          signal: AbortSignal.timeout(2000),
+        });
+        if (res.ok && !cancelProbe) { serverProbeOk = true; return; }
+      } catch {}
+      if (tries >= MAX_ATTEMPTS && !cancelProbe) { failed = true; return; }
+      if (!cancelProbe) setTimeout(probe, 750);
+    }
+
+    setTimeout(probe, 800);
+  }
+
   onMount(async () => {
     document.addEventListener("contextmenu", e => e.preventDefault());
     (window as any).__mokuShowSplash = () => devSplash = true;
 
-    // Fetch the platform scale factor then immediately re-apply zoom.
     platformScale = await invoke<number>("get_platform_ui_scale").catch(() => 1);
     applyZoom();
 
+    store.isFullscreen = await win.isFullscreen();
+    const unlistenResize = await win.onResized(async () => {
+      store.isFullscreen = await win.isFullscreen();
+    });
+
     if (store.settings.autoStartServer) {
       invoke<void>("spawn_server", { binary: store.settings.serverBinary }).catch((err: any) => {
         if (err?.kind === "NotConfigured") {
@@ -110,30 +232,14 @@
       });
     }
 
-    if (!serverProbeOk) {
+    startProbe();
-      let cancelled = false, tries = 0;
-      async function probe() {
-        if (cancelled) return;
-        tries++;
-        try {
-          const res = await fetch(`${store.settings.serverUrl}/api/graphql`, {
-            method: "POST", headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ query: "{ __typename }" }),
-            signal: AbortSignal.timeout(2000),
-          });
-          if (res.ok && !cancelled) { serverProbeOk = true; return; }
-        } catch {}
-        if (tries >= MAX_ATTEMPTS && !cancelled) { failed = true; return; }
-        if (!cancelled) setTimeout(probe, 500);
-      }
-      setTimeout(probe, 800);
-    }
 
     type P = { chapterId: number; mangaId: number; progress: number }[];
     unlistenDownload = await listen<P>("download-progress", e => { setActiveDownloads(e.payload); });
 
     return () => {
-      cancelled = true;
+      cancelProbe = true;
+      unlistenResize();
       if (store.settings.autoStartServer) invoke("kill_server").catch(() => {});
       if (idleTimer) clearTimeout(idleTimer);
       if (pollInterval) clearInterval(pollInterval);
@@ -142,7 +248,24 @@
     };
   });
 
-  function handleRetry() { failed = false; notConfigured = false; serverProbeOk = false; }
+  $effect(() => {
+    if (!appReady) return;
+    const timer = setTimeout(checkForUpdateSilently, 5_000);
+    return () => clearTimeout(timer);
+  });
+
+  function handleRetry() {
+    failed        = false;
+    notConfigured = false;
+    serverProbeOk = false;
+    startProbe();
+  }
+
+  function handleBypass() {
+    cancelProbe   = true;
+    serverProbeOk = true;
+    appReady      = true;
+  }
 </script>
 
 {#if devSplash}
@@ -152,18 +275,25 @@
   <SplashScreen mode="loading" ringFull={serverProbeOk} {failed} {notConfigured}
     showCards={store.settings.splashCards ?? true}
     onReady={() => appReady = true}
-    onRetry={handleRetry} />
+    onRetry={handleRetry}
+    onBypass={handleBypass} />
 {:else}
   <div class="root">
     {#if idle && !store.activeChapter}
       <SplashScreen mode="idle" showCards={store.settings.splashCards ?? true}
-        onDismiss={() => setTimeout(() => idle = false, 340)} />
+        onDismiss={() => { idle = false; resetIdle(); }} />
     {/if}
-    {#if !store.activeChapter}<TitleBar />{/if}
+    {#if !store.activeChapter && !store.isFullscreen}<TitleBar />{/if}
     <div class="content">
       {#if store.activeChapter}<Reader />{:else}<Layout />{/if}
     </div>
-    {#if store.settingsOpen}<Settings />{/if}
+    {#if store.settingsOpen}<Settings onOpenThemeEditor={openThemeEditor} />{/if}
+    {#if themeEditorOpen}
+      <ThemeEditor
+        bind:editingId={themeEditorEditId}
+        onClose={closeThemeEditor}
+      />
+    {/if}
     <MangaPreview />
     <Toaster />
   </div>

src/components/layout/Layout.svelte

@@ -4,12 +4,13 @@
   import Home           from "../pages/Home.svelte";
   import Library        from "../pages/Library.svelte";
   import SeriesDetail   from "../pages/SeriesDetail.svelte";
-  import History        from "../pages/History.svelte";
+  import RecentActivity from "./RecentActivity.svelte";
   import Search         from "../pages/Search.svelte";
   import Discover       from "../pages/Discover.svelte";
   import GenreDrillPage from "../pages/GenreDrillPage.svelte";
   import Downloads      from "../pages/Downloads.svelte";
   import Extensions     from "../pages/Extensions.svelte";
+  import Tracking       from "../pages/Tracking.svelte";
 </script>
 
 <div class="root">
@@ -24,7 +25,7 @@
     {:else if store.navPage === "search"}
       <Search />
     {:else if store.navPage === "history"}
-      <History />
+      <RecentActivity />
     {:else if (store.navPage === "explore" || store.navPage === "sources") && store.genreFilter}
       <GenreDrillPage />
     {:else if store.navPage === "explore" || store.navPage === "sources"}
@@ -33,6 +34,8 @@
       <Downloads />
     {:else if store.navPage === "extensions"}
       <Extensions />
+    {:else if store.navPage === "tracking"}
+      <Tracking />
     {:else}
       <Home />
     {/if}

src/components/layout/RecentActivity.svelte

@@ -79,11 +79,11 @@
   }
 
   const filtered = $derived(search.trim()
-    ? store..filter((e) =>
+    ? store.history.filter((e) =>
         e.mangaTitle.toLowerCase().includes(search.toLowerCase()) ||
         e.chapterName.toLowerCase().includes(search.toLowerCase())
       )
-    : store.);
+    : store.history);
 
   const sessions = $derived(buildSessions(filtered));
 
@@ -97,10 +97,16 @@
     return Array.from(map.entries()).map(([label, items]) => ({ label, items }));
   });
 
+  // Resume: navigate to the manga's SeriesDetail (which will pick up from
+  // activeChapterList once chapters load). We can't hold a stale chapter list
+  // here — SeriesDetail fetches fresh chapters itself.
   function resume(session: Session) {
-    const ch = store..find((c) => c.id === session.latestChapterId);
+    setActiveManga({
-    if (ch && store..length > 0) openReader(ch, );
+      id:           session.mangaId,
-    else setActiveManga({ id: session.mangaId, title: session.mangaTitle, thumbnailUrl: session.thumbnailUrl } as any);
+      title:        session.mangaTitle,
+      thumbnailUrl: session.thumbnailUrl,
+      inLibrary:    false,
+    } as any);
   }
 
   function handleClear() {
@@ -111,17 +117,17 @@
 
 <div class="root">
 
-  <div class="page-header">
+  <div class="header">
     <span class="heading">History</span>
     <div class="header-right">
       <div class="search-wrap">
         <MagnifyingGlass size={12} class="search-icon" weight="light" />
-        <input class="search" placeholder="Search store.…" bind:value={search} />
+        <input class="search" placeholder="Search history…" bind:value={search} />
         {#if search}<button class="search-clear" onclick={() => search = ""}>×</button>{/if}
       </div>
-      {#if store..length > 0}
+      {#if store.history.length > 0}
         <button class="clear-btn" class:confirm={confirmClear} onclick={handleClear}
-          title={confirmClear ? "Click again to confirm" : "Clear store. feed"}>
+          title={confirmClear ? "Click again to confirm" : "Clear history"}>
           <Trash size={14} weight="light" />
           {#if confirmClear}<span class="clear-label">Confirm?</span>{/if}
         </button>
@@ -129,44 +135,44 @@
     </div>
   </div>
 
-  {#if store..totalChaptersRead > 0}
+  {#if store.readingStats.totalChaptersRead > 0}
     <div class="stats-bar">
       <div class="stat-group">
         <Fire size={13} weight="fill" class="stat-fire" />
-        <span class="stat-val accent">{store..currentStreakDays}</span>
+        <span class="stat-val accent">{store.readingStats.currentStreakDays}</span>
         <span class="stat-label">day streak</span>
       </div>
       <div class="stat-sep"></div>
       <div class="stat-group">
         <BookOpen size={13} weight="light" class="stat-icon-neutral" />
-        <span class="stat-val">{store..totalChaptersRead}</span>
+        <span class="stat-val">{store.readingStats.totalChaptersRead}</span>
         <span class="stat-label">chapters</span>
       </div>
       <div class="stat-sep"></div>
       <div class="stat-group">
         <Clock size={13} weight="light" class="stat-icon-neutral" />
-        <span class="stat-val">{formatReadTime(store..totalMinutesRead)}</span>
+        <span class="stat-val">{formatReadTime(store.readingStats.totalMinutesRead)}</span>
         <span class="stat-label">read time</span>
       </div>
       <div class="stat-sep"></div>
       <div class="stat-group">
         <TrendUp size={13} weight="light" class="stat-icon-neutral" />
-        <span class="stat-val">{store..totalMangaRead}</span>
+        <span class="stat-val">{store.readingStats.totalMangaRead}</span>
         <span class="stat-label">series</span>
       </div>
       <div class="stat-sep"></div>
       <div class="stat-group">
-        <span class="stat-val muted">{store..longestStreakDays}d</span>
+        <span class="stat-val muted">{store.readingStats.longestStreakDays}d</span>
         <span class="stat-label">best streak</span>
       </div>
       <span class="stats-note">Stats are preserved when you clear the feed</span>
     </div>
   {/if}
 
-  {#if store..length === 0}
+  {#if store.history.length === 0}
     <div class="empty">
       <ClockCounterClockwise size={32} weight="light" class="empty-icon" />
-      <p class="empty-text">No reading store.</p>
+      <p class="empty-text">No reading history yet</p>
       <p class="empty-hint">Chapters you read will appear here</p>
     </div>
   {:else if sessions.length === 0}
@@ -223,16 +229,16 @@
 <style>
   .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
 
-  .page-header {
+  .header {
     display: flex; align-items: center; justify-content: space-between;
     padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
   }
-  .heading { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
+  .heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
   .header-right { display: flex; align-items: center; gap: var(--sp-2); }
 
   .search-wrap { position: relative; display: flex; align-items: center; }
   .search-wrap :global(.search-icon) { position: absolute; left: 9px; color: var(--text-faint); pointer-events: none; }
-  .search { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 5px 26px 5px 26px; color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none; transition: border-color var(--t-base); }
+  .search { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 5px 26px; color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none; transition: border-color var(--t-base); }
   .search::placeholder { color: var(--text-faint); }
   .search:focus { border-color: var(--border-strong); }
   .search-clear { position: absolute; right: 7px; color: var(--text-faint); font-size: 14px; line-height: 1; background: none; border: none; cursor: pointer; padding: 2px; transition: color var(--t-base); }

src/components/layout/Sidebar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { House, Books, MagnifyingGlass, ClockCounterClockwise, Compass, DownloadSimple, PuzzlePiece, GearSix } from "phosphor-svelte";
+  import { House, Books, MagnifyingGlass, ClockCounterClockwise, Compass, DownloadSimple, PuzzlePiece, GearSix, ChartLineUp } from "phosphor-svelte";
   import { store, setNavPage, setActiveManga, setActiveSource, setLibraryFilter, setGenreFilter, setSettingsOpen } from "../../store/state.svelte";
   import type { NavPage } from "../../store/state.svelte";
 
@@ -11,6 +11,7 @@
     { id: "explore",    label: "Discover",   icon: Compass },
     { id: "downloads",  label: "Downloads",  icon: DownloadSimple },
     { id: "extensions", label: "Extensions", icon: PuzzlePiece },
+    { id: "tracking",   label: "Tracking",   icon: ChartLineUp },
   ];
 
   function navigate(id: NavPage) {

src/components/layout/SplashScreen.svelte

@@ -13,18 +13,47 @@
     showFps?:       boolean;
     onReady?:       () => void;
     onRetry?:       () => void;
+    onBypass?:      () => void;
     onDismiss?:     () => void;
   }
 
   let { mode = "loading", ringFull = false, failed = false, notConfigured = false,
-        showCards = true, showFps = false, onReady, onRetry, onDismiss }: Props = $props();
+        showCards = true, showFps = false, onReady, onRetry, onBypass, onDismiss }: Props = $props();
+
+  const lockEnabled = $derived(
+    store.settings.appLockEnabled && (store.settings.appLockPin?.length ?? 0) >= 4
+  );
+
+  let pinEntry    = $state("");
+  let pinShake    = $state(false);
+  let pinUnlocked = $state(false);
+  let pinVisible  = $state(false);
+
+  function submitPin() {
+    if (pinEntry === store.settings.appLockPin) {
+      pinUnlocked = true;
+      pinEntry    = "";
+      if (mode === "idle") triggerExit(onDismiss);
+    } else {
+      pinShake = true;
+      pinEntry  = "";
+      setTimeout(() => pinShake = false, 500);
+    }
+  }
+
+  function onPinKey(e: KeyboardEvent) {
+    if (e.key === "Enter") { submitPin(); return; }
+    if (e.key === "Backspace") { pinEntry = pinEntry.slice(0, -1); return; }
+    if (/^\d$/.test(e.key)) {
+      pinEntry = (pinEntry + e.key).slice(0, 8);
+      if (pinEntry.length >= (store.settings.appLockPin?.length ?? 4)) submitPin();
+    }
+  }
+
+  function handleRetry()  { onRetry?.();  }
+  function handleBypass() { onBypass?.(); }
 
   const EXIT_MS = 320;
-  // Server typically takes 8-20s to boot. We animate the ring through three
-  // phases so it always feels like something is happening:
-  //   0 → 0.75  over ~12s  (eased crawl while server starts)
-  //   0.75 → 0.92 over ~8s  (slow down near the end, implying "almost there")
-  //   jumps to 1.0 the moment the probe succeeds
   const PHASE1_TARGET = 0.85;
   const PHASE1_MS     = 3000;
   const PHASE2_TARGET = 0.95;
@@ -44,7 +73,6 @@
     setTimeout(() => cb?.(), EXIT_MS);
   }
 
-  // Animate ring progress with easing so it never stalls visually
   let animFrame: number;
   let animStart: number | null = null;
   let animPhase = 1;
@@ -56,7 +84,6 @@
 
     if (animPhase === 1) {
       const t = Math.min(elapsed / PHASE1_MS, 1);
-      // ease-out cubic so it starts fast and slows down
       const eased = 1 - Math.pow(1 - t, 3);
       ringProg = 0.025 + eased * (PHASE1_TARGET - 0.025);
       if (t >= 1) { animPhase = 2; animStart = ts; }
@@ -64,7 +91,6 @@
       const t = Math.min(elapsed / PHASE2_MS, 1);
       const eased = 1 - Math.pow(1 - t, 4);
       ringProg = PHASE1_TARGET + eased * (PHASE2_TARGET - PHASE1_TARGET);
-      // Phase 2 never completes on its own — only ringFull triggers completion
     }
 
     animFrame = requestAnimationFrame(animateRing);
@@ -81,8 +107,12 @@
     if (ringFull) {
       cancelAnimationFrame(animFrame);
       ringProg = 1;
+      if (lockEnabled && !pinUnlocked) {
+        setTimeout(() => { pinVisible = true; }, 400);
+      } else {
         setTimeout(() => triggerExit(onReady), 650);
       }
+    }
   });
 
   const dotsInterval = setInterval(() => {
@@ -91,6 +121,9 @@
 
   onMount(() => {
     if (mode === "idle" && onDismiss) {
+      if (lockEnabled) {
+        return () => clearInterval(dotsInterval);
+      }
       const handler = () => triggerExit(onDismiss);
       const t = setTimeout(() => {
         window.addEventListener("keydown",    handler, { once: true });
@@ -271,6 +304,21 @@
     return () => { cancelAnimationFrame(raf); ro.disconnect(); };
   }
 
+  $effect(() => {
+    const needsPin =
+      (mode === "idle" && lockEnabled) ||
+      (mode === "loading" && lockEnabled && ringFull && !pinUnlocked);
+    if (!needsPin) return;
+    window.addEventListener("keydown", onPinKey);
+    return () => window.removeEventListener("keydown", onPinKey);
+  });
+
+  $effect(() => {
+    if (pinUnlocked && mode !== "idle") {
+      triggerExit(onReady);
+    }
+  });
+
   const ringR    = $derived(70);
   const ringPad  = $derived(12);
   const ringSize = $derived((ringR + ringPad) * 2);
@@ -281,7 +329,7 @@
   const ringLeft = $derived(-((ringSize - 140) / 2));
 </script>
 
-<div class="splash" class:exiting style="cursor: {mode === 'idle' ? 'pointer' : 'default'}">
+<div class="splash" class:exiting style="cursor: {mode === 'idle' && !lockEnabled ? 'pointer' : 'default'}">
   {#if showCards}
     <canvas style="position:absolute;inset:0;pointer-events:none;width:100%;height:100%" use:mountCanvas></canvas>
     {#if showFps}
@@ -289,7 +337,23 @@
     {/if}
   {/if}
 
-  {#if mode === "idle"}
+  {#if mode === "idle" && lockEnabled}
+    <div style="z-index:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-6)">
+      <div style="position:relative;width:96px;height:96px">
+        <div class="logo-glow"></div>
+        <img src={logoUrl} alt="Moku" class="logo-breathe" style="width:96px;height:96px;border-radius:22px;display:block;position:relative" />
+      </div>
+      <div class="pin-block">
+        <div class="pin-dots" class:pin-shake={pinShake}>
+          {#each Array(store.settings.appLockPin?.length ?? 4) as _, i}
+            <div class="pin-dot" class:pin-dot-filled={i < pinEntry.length}></div>
+          {/each}
+        </div>
+        <button class="pin-submit-btn" onclick={submitPin} tabindex="-1" aria-label="Submit PIN">Unlock</button>
+      </div>
+    </div>
+
+  {:else if mode === "idle"}
     <div style="z-index:1;display:flex;flex-direction:column;align-items:center">
       <div style="position:relative;width:128px;height:128px;margin-bottom:32px">
         <div class="logo-glow"></div>
@@ -297,37 +361,52 @@
       </div>
       <p class="hint">press any key to continue</p>
     </div>
+
   {:else}
     <div style="position:relative;width:140px;height:140px;margin-bottom:20px;z-index:1">
       {#if !failed && !notConfigured}
-        <svg width={ringSize} height={ringSize} style="position:absolute;pointer-events:none;top:{ringTop}px;left:{ringLeft}px">
+        <svg width={ringSize} height={ringSize}
+          class="loading-ring"
+          class:ring-hide={lockEnabled && pinVisible}
+          style="position:absolute;pointer-events:none;top:{ringTop}px;left:{ringLeft}px">
           <circle cx={ringC} cy={ringC} r={ringR} fill="none" stroke="var(--border-base)" stroke-width="2" />
-          <circle cx={ringC} cy={ringC} r={ringR} fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-dasharray="{ringArc} {ringCirc}" transform="rotate(-90 {ringC} {ringC})" style="transition: stroke-dasharray 0.4s cubic-bezier(0.4,0,0.2,1)" />
+          <circle cx={ringC} cy={ringC} r={ringR} fill="none" stroke="var(--accent)" stroke-width="2"
+            stroke-linecap="round"
+            stroke-dasharray="{ringArc} {ringCirc}"
+            transform="rotate(-90 {ringC} {ringC})"
+            style="transition: stroke-dasharray 0.4s cubic-bezier(0.4,0,0.2,1)" />
         </svg>
       {/if}
       <img src={logoUrl} alt="Moku" style="width:140px;height:140px;border-radius:32px;display:block" />
     </div>
     <p class="title-label">moku</p>
-    <div style="z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px">
+
-      {#if notConfigured}
+    <div class="bottom-area" style="z-index:1">
+      <div class="status-slot" class:status-slot-hide={lockEnabled && pinVisible}>
+        {#if failed || notConfigured}
           <div class="error-box">
-          <p class="error-title">Server not configured</p>
+            <p class="error-label">
-          <p class="error-body">Set the server path in Settings, then retry</p>
+              {failed ? "Could not reach server" : "Server not configured"}
-          <div style="display:flex;gap:8px;margin-top:8px">
+            </p>
-            <button class="retry-btn" onclick={() => { store.settingsOpen = true; }}>Settings</button>
+            <div class="error-actions">
-            <button class="retry-btn" onclick={onRetry}>Retry</button>
+              <button class="err-btn" onclick={handleRetry}>Retry</button>
+              <button class="err-btn err-btn--primary" onclick={handleBypass}>Enter app</button>
             </div>
           </div>
-      {:else if failed}
-        <div class="error-box error-box--danger">
-          <p class="error-title" style="color:var(--color-error)">Could not reach Suwayomi</p>
-          <p class="error-body">Make sure tachidesk-server is on your PATH</p>
-          <button class="retry-btn" style="margin-top:8px" onclick={onRetry}>Retry</button>
-        </div>
         {:else}
-        <p style="font-family:var(--font-ui);font-size:10px;color:var(--text-faint);letter-spacing:0.12em;margin:0;min-width:160px;text-align:center">
+          <p class="status-text">{ringFull ? "" : `Initializing server${dots}`}</p>
-          {ringFull ? "Ready" : `Initializing server${dots}`}
+        {/if}
-        </p>
+      </div>
+
+      {#if lockEnabled}
+        <div class="pin-slot" class:pin-slot-visible={pinVisible}>
+          <div class="pin-dots" class:pin-shake={pinShake}>
+            {#each Array(store.settings.appLockPin?.length ?? 4) as _, i}
+              <div class="pin-dot" class:pin-dot-filled={i < pinEntry.length}></div>
+            {/each}
+          </div>
+          <button class="pin-submit-btn" onclick={submitPin} tabindex="-1" aria-label="Submit PIN">Unlock</button>
+        </div>
       {/if}
     </div>
   {/if}
@@ -344,10 +423,28 @@
   .logo-breathe { animation: logoBreathe 4s ease-in-out infinite; }
   .hint { font-family: var(--font-ui); font-size: 10px; color: var(--text-faint); letter-spacing: 0.22em; text-transform: uppercase; margin: 0; user-select: none; animation: hintFade 3.5s ease-in-out infinite; }
   .title-label { font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 8px; z-index: 1; user-select: none; }
-  .retry-btn { margin-top: 4px; padding: 5px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); background: var(--bg-raised); color: var(--text-muted); cursor: pointer; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.08em; }
+  .error-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--radius-lg); background: var(--bg-surface); border: 1px solid var(--border-base); min-width: 200px; text-align: center; animation: errIn 0.25s cubic-bezier(0,0,0.2,1) both; }
-  .retry-btn:hover { border-color: var(--border-strong); color: var(--text-secondary); }
+  @keyframes errIn { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:translateY(0) } }
-  .error-box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 20px; border-radius: var(--radius-lg); background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.12); max-width: 260px; text-align: center; backdrop-filter: blur(4px); }
+  .error-label { font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.06em; margin: 0; }
-  .error-box--danger { border-color: rgba(220,50,50,0.5); }
+  .error-actions { display: flex; gap: 6px; }
-  .error-title { font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.1em; margin: 0; }
+  .err-btn { padding: 5px 14px; border-radius: var(--radius-md); border: 1px solid var(--border-base); background: transparent; color: var(--text-muted); cursor: pointer; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.04em; transition: border-color 0.15s, color 0.15s; }
-  .error-body { font-family: var(--font-ui); font-size: 10px; color: var(--text-faint); letter-spacing: 0.05em; margin: 0; line-height: 1.6; }
+  .err-btn:hover { border-color: var(--border-strong); color: var(--text-secondary); }
+  .err-btn--primary { border-color: var(--accent-dim); color: var(--accent-fg); background: var(--accent-muted); }
+  .err-btn--primary:hover { border-color: var(--accent); color: var(--accent-bright); }
+
+  .bottom-area { display: flex; align-items: center; justify-content: center; min-height: 48px; position: relative; }
+  .status-slot { display: flex; align-items: center; justify-content: center; transition: opacity 0.35s ease; position: absolute; }
+  .status-slot-hide { opacity: 0; pointer-events: none; }
+  .status-text { font-family: var(--font-ui); font-size: 10px; color: var(--text-faint); letter-spacing: 0.12em; margin: 0; min-width: 160px; text-align: center; }
+  .loading-ring { transition: opacity 0.5s ease; }
+  .ring-hide { opacity: 0; }
+  .pin-slot { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); position: absolute; opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease, transform 0.4s ease; pointer-events: none; }
+  .pin-slot-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
+  .pin-block { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); position: relative; }
+  .pin-dots { display: flex; gap: 12px; align-items: center; }
+  .pin-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; transition: background 0.12s, border-color 0.12s; }
+  .pin-dot-filled { background: var(--accent); border-color: var(--accent); }
+  @keyframes pinShake { 0%,100% { transform:translateX(0) } 20%,60% { transform:translateX(-6px) } 40%,80% { transform:translateX(6px) } }
+  .pin-shake { animation: pinShake 0.42s ease; }
+  .pin-submit-btn { opacity: 0; width: 1px; height: 1px; overflow: hidden; padding: 0; border: none; background: none; cursor: pointer; pointer-events: auto; position: absolute; }
 </style>

src/components/layout/TitleBar.svelte

@@ -1,10 +1,27 @@
 <script lang="ts">
+  import { onMount } from "svelte";
   import { getCurrentWindow } from "@tauri-apps/api/window";
+  import { platform } from "@tauri-apps/plugin-os";
+
   const win   = getCurrentWindow();
+  const isMac = platform() === "macos";
+
+  let isFullscreen = $state(false);
+
+  onMount(async () => {
+    isFullscreen = await win.isFullscreen();
+    const unlisten = await win.onResized(async () => {
+      isFullscreen = await win.isFullscreen();
+    });
+    return unlisten;
+  });
 </script>
 
+{#if !isFullscreen}
 <div class="bar" data-tauri-drag-region>
+  {#if isMac}<div class="mac-spacer"></div>{/if}
   <span class="title" data-tauri-drag-region>Moku</span>
+  {#if !isMac}
   <div class="controls">
     <button onclick={() => win.minimize()} title="Minimize" aria-label="Minimize">
       <svg width="10" height="1" viewBox="0 0 10 1">
@@ -23,7 +40,9 @@
       </svg>
     </button>
   </div>
+  {/if}
 </div>
+{/if}
 
 <style>
   .bar {
@@ -38,6 +57,12 @@
     user-select: none;
     -webkit-app-region: drag;
   }
+  /* Spacer to clear the native macOS traffic lights (~70px) */
+  .mac-spacer {
+    width: 70px;
+    flex-shrink: 0;
+    -webkit-app-region: drag;
+  }
   .title {
     font-family: var(--font-ui);
     font-size: var(--text-2xs);

src/components/pages/Discover.svelte

@@ -1,22 +1,22 @@
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
+  import { onDestroy } from "svelte";
-  import { BookmarkSimple, FolderSimplePlus, Folder, Sparkle } from "phosphor-svelte";
+  import { BookmarkSimple, FolderSimplePlus, Folder, Sparkle, ArrowsClockwise } from "phosphor-svelte";
   import { gql, thumbUrl } from "../../lib/client";
   import { GET_SOURCES, FETCH_SOURCE_MANGA, UPDATE_MANGA } from "../../lib/queries";
   import { cache, CACHE_KEYS } from "../../lib/cache";
   import { dedupeSources, dedupeMangaByTitle, dedupeMangaById } from "../../lib/util";
-  import { store, addFolder, assignMangaToFolder, setPreviewManga } from "../../store/state.svelte";
+  import { store, addFolder, assignMangaToFolder, setPreviewManga, clearDiscoverCache } from "../../store/state.svelte";
   import type { Manga, Source } from "../../lib/types";
   import ContextMenu from "../shared/ContextMenu.svelte";
   import type { MenuEntry } from "../shared/ContextMenu.svelte";
   import SourceBrowse from "../shared/SourceBrowse.svelte";
 
-  // ── Config ────────────────────────────────────────────────────────────────────
+  // ── Constants ─────────────────────────────────────────────────────────────
   const GENRE_TABS  = ["All", "Action", "Romance", "Fantasy", "Comedy", "Drama", "Horror", "Sci-Fi", "Adventure", "Thriller"];
-  const GRID_LIMIT      = 60;    // max rendered per tab
+  const GRID_LIMIT  = 200;
-  const LOCAL_THRESHOLD = 20;    // fan out to sources if local results below this
+  const CONCURRENCY = 6;
-  const CONCURRENCY     = 4;     // parallel source requests — kept conservative to not saturate connections
+  const PAGES_INIT  = 3;  // pages per source on All tab
-  const BATCH_INTERVAL  = 400;   // ms between DOM updates during background source fan-out
+  const PAGES_GENRE = 2;  // pages per source on genre tabs
 
   const EXPLORE_ALL_MANGA = `
     query ExploreAllManga {
@@ -27,46 +27,48 @@
   `;
   const MANGAS_BY_GENRE = `
     query MangasByGenre($genre: String!, $first: Int) {
-      mangas(
+      mangas(filter: { genre: { includesInsensitive: $genre } }, first: $first, orderBy: IN_LIBRARY_AT, orderByType: DESC) {
-        filter: { genre: { includesInsensitive: $genre } }
+        nodes { id title thumbnailUrl inLibrary genre status source { id displayName } }
-        first: $first orderBy: IN_LIBRARY_AT orderByType: DESC
+      }
-      ) { nodes { id title thumbnailUrl inLibrary genre status source { id displayName } } }
     }
   `;
 
-  // ── State ─────────────────────────────────────────────────────────────────────
+  function dKey(srcId: string, type: string, genre: string, page: number) {
-  let allManga:    Manga[]  = $state([]);  // local library — loaded once, never triggers lag
+    return `${srcId}|${type}|${genre}:p${page}`;
-  let allSources:  Source[] = $state([]);  // all deduped sources — loaded once
+  }
+
+  // ── Local component state ─────────────────────────────────────────────────
+  let allSources:  Source[]  = $state([]);
   let loadingLib             = $state(true);
   let loadError              = $state(false);
-
-  // Per-genre result map. Keyed by genre string.
-  // "All" key → local library deduped by title
-  // Each tab key → local + background source results, deduped id+title
-  let genreResults  = $state(new Map<string, Manga[]>());
-  let genreLoading  = $state(false);  // true only during the initial local fetch for a new tab
   let currentGenre           = $state("All");
-  let genreAbort: AbortController | null = null;
+  let genreResults           = $state(new Map<string, Manga[]>());
+  let genreLoading           = $state(false);
+  let refreshing             = $state(false);
 
-  // batch timer handle for background source fan-out
+  let activeCtrl: AbortController | null = null;
-  let batchTimer: ReturnType<typeof setInterval> | null = null;
-  // accumulator: source results collected between batches
-  let batchAccum   = new Map<string, Manga[]>(); // genre → pending mangas
-
-  // Context menu
   let ctx: { x: number; y: number; manga: Manga } | null = $state(null);
-  let isLoading = $state(false);
 
-  // ── Derived ───────────────────────────────────────────────────────────────────
+  const isLoading   = $derived(genreLoading || refreshing || (currentGenre === "All" && loadingLib));
   const visibleGrid = $derived(genreResults.get(currentGenre) ?? []);
-  $effect(() => { isLoading   = genreLoading || (currentGenre === "All" && loadingLib); });
 
-  // ── Dedup helper — always apply id first then title ───────────────────────────
+  // ── Helpers ───────────────────────────────────────────────────────────────
   function dedup(items: Manga[]): Manga[] {
     return dedupeMangaByTitle(dedupeMangaById(items), store.settings.mangaLinks);
   }
 
-  // ── Concurrent fan-out — conservative concurrency keeps connections free ──────
+  function filterOut(mangas: Manga[]): Manga[] {
+    return dedup(mangas.filter(m => !m.inLibrary && !store.discoverLibraryIds.has(m.id)));
+  }
+
+  function rotatedSources(): Source[] {
+    const lang = store.settings.preferredExtensionLang || "en";
+    const srcs = dedupeSources(allSources.filter(s => s.id !== "0"), lang);
+    if (!srcs.length) return [];
+    const off = store.discoverSrcOffset % srcs.length;
+    return [...srcs.slice(off), ...srcs.slice(0, off)];
+  }
+
   async function runConcurrent<T>(items: T[], fn: (i: T) => Promise<void>, signal: AbortSignal) {
     let i = 0;
     const worker = async () => {
@@ -78,139 +80,191 @@
     await Promise.all(Array.from({ length: Math.min(CONCURRENCY, items.length) }, worker));
   }
 
-  // ── Batched DOM flush ─────────────────────────────────────────────────────────
+  // Push results into the reactive grid immediately — no batch delay.
-  // Source fan-out collects results in batchAccum. A timer fires every BATCH_INTERVAL
+  function pushToGrid(genre: string, incoming: Manga[]) {
-  // ms and flushes them into genreResults in one shot — preventing a Svelte re-render
+    const filtered = filterOut(incoming);
-  // per-source and keeping the grid smooth.
+    if (!filtered.length) return;
-  function startBatchFlush() {
+    const cur = genreResults.get(genre) ?? [];
-    if (batchTimer) return;
+    genreResults.set(genre, dedup([...cur, ...filtered]).slice(0, GRID_LIMIT));
-    batchTimer = setInterval(() => {
-      if (batchAccum.size === 0) return;
-      for (const [genre, incoming] of batchAccum) {
-        const current = genreResults.get(genre) ?? [];
-        genreResults.set(genre, dedup([...current, ...incoming]).slice(0, GRID_LIMIT));
-      }
-      batchAccum.clear();
-      genreResults = new Map(genreResults);
-    }, BATCH_INTERVAL);
-  }
-
-  function stopBatchFlush() {
-    if (batchTimer) { clearInterval(batchTimer); batchTimer = null; }
-    // Final flush of anything remaining
-    if (batchAccum.size > 0) {
-      for (const [genre, incoming] of batchAccum) {
-        const current = genreResults.get(genre) ?? [];
-        genreResults.set(genre, dedup([...current, ...incoming]).slice(0, GRID_LIMIT));
-      }
-      batchAccum.clear();
     genreResults = new Map(genreResults);
   }
-  }
 
-  // Push source results into the accumulator (never touches the DOM directly)
+  // ── Source fan-out ────────────────────────────────────────────────────────
-  function accumulate(genre: string, mangas: Manga[]) {
+  async function fanOut(genre: string, ctrl: AbortController) {
-    const existing = batchAccum.get(genre) ?? [];
+    const srcs     = rotatedSources();
-    batchAccum.set(genre, [...existing, ...mangas]);
+    if (!srcs.length) return;
-  }
 
-  // ── Background source fan-out for a genre ────────────────────────────────────
+    const isAll    = genre === "All";
-  // Runs entirely in the background. Results appear in batches via batchAccum.
+    const type     = isAll ? "POPULAR" : "SEARCH";
-  // Does NOT set genreLoading = true — the local result is already showing.
+    const query    = isAll ? null : genre;
-  async function fanOutSources(genre: string, ctrl: AbortController) {
+    const maxPages = isAll ? PAGES_INIT : PAGES_GENRE;
-    if (!allSources.length) return;
-    const lang = store.settings.preferredExtensionLang || "en";
-    const srcs = dedupeSources(allSources, lang);
-
-    startBatchFlush();
 
     await runConcurrent(srcs, async src => {
+      for (let page = 1; page <= maxPages; page++) {
         if (ctrl.signal.aborted) return;
-      const pageKey = CACHE_KEYS.sourceMangaPage(src.id, "SEARCH", 1, [genre]);
+
-      const result  = await cache.get<{ mangas: Manga[]; hasNextPage: boolean }>(
+        const key = dKey(src.id, type, genre, page);
-        pageKey,
+        let mangas: Manga[];
-        () => gql<{ fetchSourceManga: { mangas: Manga[]; hasNextPage: boolean } }>(
+        let hasNextPage = false;
-          FETCH_SOURCE_MANGA, { source: src.id, type: "SEARCH", page: 1, query: genre }, ctrl.signal
+
-        ).then(d => d.fetchSourceManga),
+        if (store.discoverCache.has(key)) {
-        5 * 60 * 1000, // 5-min TTL — results are stable enough to cache
+          // Cache hit — no network call needed
-      ).catch(() => null);
+          mangas = store.discoverCache.get(key)!;
+        } else {
+          const result = await gql<{ fetchSourceManga: { mangas: Manga[]; hasNextPage: boolean } }>(
+            FETCH_SOURCE_MANGA,
+            { source: src.id, type, page, query },
+            ctrl.signal
+          ).then(d => d.fetchSourceManga).catch(() => null);
 
           if (!result || ctrl.signal.aborted) return;
-
+          mangas      = result.mangas;
-      // Only accumulate results that actually match the genre (client-side AND check)
+          hasNextPage = result.hasNextPage;
-      const matching = result.mangas.filter(m =>
+          store.discoverCache.set(key, mangas);
-        (m.genre ?? []).some(g => g.toLowerCase() === genre.toLowerCase())
-          || result.mangas.length <= 5 // source returns few results, trust them
-      );
-
-      accumulate(genre, matching.length > 0 ? matching : result.mangas);
-    }, ctrl.signal);
-
-    if (!ctrl.signal.aborted) stopBatchFlush();
         }
 
-  // ── Tab switch ───────────────────────────────────────────────────────────────
+        if (ctrl.signal.aborted) return;
-  // 1. Show local results immediately (no spinner if already cached)
+
-  // 2. If local < LOCAL_THRESHOLD, kick off background fan-out silently
+        if (isAll) {
+          pushToGrid("All", mangas);
+        } else {
+          const matching = mangas.filter(m =>
+            (m.genre ?? []).some(g => g.toLowerCase() === genre.toLowerCase())
+          );
+          pushToGrid(genre, matching.length ? matching : mangas);
+        }
+
+        // Stop paging early if source is exhausted
+        if (!hasNextPage) return;
+      }
+    }, ctrl.signal);
+  }
+
+  // ── Tab switch ────────────────────────────────────────────────────────────
   async function switchGenre(genre: string) {
     if (currentGenre === genre) return;
 
-    // Abort any in-flight fan-out for the previous tab
+    activeCtrl?.abort();
-    genreAbort?.abort();
-    stopBatchFlush();
-
     currentGenre = genre;
 
+    const ctrl = new AbortController();
+    activeCtrl  = ctrl;
+
     if (genre === "All") {
-      // "All" is just the deduped local library — no network needed
+      // Already have results from this session — show instantly, re-fan in background
-      genreResults.set("All", dedup(allManga).slice(0, GRID_LIMIT));
+      if ((genreResults.get("All") ?? []).length > 0) {
+        genreLoading = false;
+        fanOut("All", ctrl).catch(() => {});
+        return;
+      }
+      genreResults.set("All", []);
       genreResults = new Map(genreResults);
+      genreLoading = true;
+      await fanOut("All", ctrl);
+      if (!ctrl.signal.aborted) genreLoading = false;
       return;
     }
 
-    // If we already have a fully-populated cache for this genre, show it instantly
+    // Genre tab: serve cached local results instantly, always fan out too
-    const cached = genreResults.get(genre);
+    const localKey = `local|${genre}`;
-    if (cached && cached.length >= LOCAL_THRESHOLD) return;
+    if (store.discoverCache.has(localKey)) {
+      genreResults.set(genre, store.discoverCache.get(localKey)!);
+      genreResults = new Map(genreResults);
+      fanOut(genre, ctrl).catch(() => {});
+      return;
+    }
 
-    // Fetch local results (fast — single DB query)
     genreLoading = true;
-    const ctrl = new AbortController();
-    genreAbort = ctrl;
-
     try {
-      const localData = await cache.get(CACHE_KEYS.GENRE(genre), () =>
+      const d = await gql<{ mangas: { nodes: Manga[] } }>(
-        gql<{ mangas: { nodes: Manga[] } }>(MANGAS_BY_GENRE, { genre, first: GRID_LIMIT }, ctrl.signal)
+        MANGAS_BY_GENRE, { genre, first: GRID_LIMIT }, ctrl.signal
-          .then(d => d.mangas.nodes)
       );
       if (ctrl.signal.aborted) return;
 
-      const local = dedup(localData);
+      const local = dedup(d.mangas.nodes);
+      store.discoverCache.set(localKey, local);
       genreResults.set(genre, local.slice(0, GRID_LIMIT));
       genreResults = new Map(genreResults);
       genreLoading = false;
 
-      // If sparse, fan out to sources in the background — no loading state shown
+      fanOut(genre, ctrl).catch(() => {});
-      if (local.length < LOCAL_THRESHOLD) {
-        fanOutSources(genre, ctrl).catch(() => {}); // fully detached background task
-      }
     } catch (e: any) {
       if (e?.name !== "AbortError") console.error(e);
       if (!ctrl.signal.aborted) genreLoading = false;
     }
   }
 
-  // ── Context menu ──────────────────────────────────────────────────────────────
+  // ── Refresh ───────────────────────────────────────────────────────────────
+  async function refresh() {
+    activeCtrl?.abort();
+    clearDiscoverCache();   // wipes store.discoverCache + bumps discoverSrcOffset
+    genreResults  = new Map();
+    refreshing    = true;
+    genreLoading  = true;
+    const genre   = currentGenre;
+    currentGenre  = "";
+    await new Promise(r => setTimeout(r, 20));
+    await switchGenre(genre);
+    refreshing = false;
+  }
+
+  // ── Initial load ──────────────────────────────────────────────────────────
+  function loadAll() {
+    loadingLib = true;
+    loadError  = false;
+
+    // Already have a session grid — show it immediately
+    if ((genreResults.get("All") ?? []).length > 0) {
+      loadingLib = false;
+    }
+
+    // Refresh library ID set so newly-added manga get filtered out
+    cache.get(CACHE_KEYS.DISCOVER, () =>
+      gql<{ mangas: { nodes: Manga[] } }>(EXPLORE_ALL_MANGA).then(d => d.mangas.nodes)
+    ).then(m => {
+      store.discoverLibraryIds = new Set(
+        dedupeMangaById(m).filter(x => x.inLibrary).map(x => x.id)
+      );
+    }).catch(e => { console.error(e); loadError = true; })
+      .finally(() => { loadingLib = false; });
+
+    // Load sources then kick off All tab fan-out (only if grid is empty)
+    gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
+      .then(d => {
+        allSources = d.sources.nodes;
+        if ((currentGenre === "All" || currentGenre === "") &&
+            (genreResults.get("All") ?? []).length === 0) {
+          const ctrl   = new AbortController();
+          activeCtrl   = ctrl;
+          genreLoading = true;
+          fanOut("All", ctrl).then(() => {
+            if (!ctrl.signal.aborted) genreLoading = false;
+          }).catch(() => {});
+        }
+      })
+      .catch(console.error);
+  }
+
+  onDestroy(() => { activeCtrl?.abort(); });
+
+  loadAll();
+
+  // ── Context menu ──────────────────────────────────────────────────────────
   function openCtx(e: MouseEvent, m: Manga) {
     e.preventDefault(); e.stopPropagation();
     ctx = { x: e.clientX, y: e.clientY, manga: m };
   }
+
   function buildCtxItems(m: Manga): MenuEntry[] {
     return [
       {
         label: m.inLibrary ? "In Library" : "Add to library",
         icon: BookmarkSimple, disabled: m.inLibrary,
         onClick: () => gql(UPDATE_MANGA, { id: m.id, inLibrary: true })
-          .then(() => cache.clear(CACHE_KEYS.LIBRARY)).catch(console.error),
+          .then(() => {
+            cache.clear(CACHE_KEYS.LIBRARY);
+            store.discoverLibraryIds = new Set([...store.discoverLibraryIds, m.id]);
+          }).catch(console.error),
       },
       ...(store.settings.folders.length > 0 ? [
         { separator: true } as MenuEntry,
@@ -230,49 +284,13 @@
       },
     ];
   }
-
-  // ── Initial load ──────────────────────────────────────────────────────────────
-  // 1. Load local library → populate "All" tab immediately
-  // 2. Load source list in background (needed for genre fan-out, not needed for initial render)
-  function loadAll() {
-    loadingLib = true; loadError = false;
-    const lang = store.settings.preferredExtensionLang || "en";
-
-    // Local library — populates "All" tab
-    cache.get(CACHE_KEYS.DISCOVER, () =>
-      gql<{ mangas: { nodes: Manga[] } }>(EXPLORE_ALL_MANGA).then(d => d.mangas.nodes)
-    ).then(m => {
-      allManga = dedupeMangaById(m);
-      genreResults.set("All", dedup(allManga).slice(0, GRID_LIMIT));
-      genreResults = new Map(genreResults);
-    }).catch(e => { console.error(e); loadError = true; })
-      .finally(() => { loadingLib = false; });
-
-    // Source list — loaded silently in background, cached for the session
-    // Not awaited — the grid doesn't depend on this for the initial render
-    cache.get(CACHE_KEYS.SOURCES, () =>
-      gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
-        .then(d => dedupeSources(d.sources.nodes, lang)),
-      Infinity, // pin for session — source list is stable
-    ).then(srcs => {
-      allSources = srcs;
-    }).catch(console.error);
-  }
-
-  onMount(loadAll);
-  onDestroy(() => {
-    genreAbort?.abort();
-    stopBatchFlush();
-  });
 </script>
 
-<!-- ── Source browse passthrough ─────────────────────────────────────────────── -->
 {#if store.activeSource}
   <SourceBrowse />
 {:else}
   <div class="root">
 
-    <!-- ── Header: page label + genre pill tabs ──────────────────────────────── -->
     <div class="header">
       <span class="heading">Discover</span>
       <div class="tab-strip">
@@ -287,13 +305,13 @@
           </button>
         {/each}
       </div>
+      <button class="refresh-btn" class:spinning={refreshing} onclick={refresh} title="Refresh results" disabled={refreshing}>
+        <ArrowsClockwise size={13} weight="bold" />
+      </button>
     </div>
 
-    <!-- ── Body ──────────────────────────────────────────────────────────────── -->
     <div class="body">
-
+      {#if isLoading && visibleGrid.length === 0}
-      {#if isLoading}
-        <!-- Skeleton — shown only during first local fetch, never during bg fan-out -->
         <div class="manga-grid">
           {#each Array(24) as _, i (i)}
             <div class="card-skeleton"><div class="skeleton cover-area"></div></div>
@@ -318,25 +336,20 @@
               oncontextmenu={(e) => openCtx(e, m)}
             >
               <div class="cover-wrap">
-                <img
+                <img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="cover" loading="lazy" decoding="async" />
-                  src={thumbUrl(m.thumbnailUrl)} alt={m.title}
-                  class="cover" loading="lazy" decoding="async"
-                />
                 <div class="cover-gradient"></div>
                 {#if m.inLibrary}<span class="lib-badge">Saved</span>{/if}
                 <div class="card-footer">
                   <p class="card-title">{m.title}</p>
-                  {#if m.source?.displayName}
+                  {#if m.source?.displayName}<p class="card-source">{m.source.displayName}</p>{/if}
-                    <p class="card-source">{m.source.displayName}</p>
-                  {/if}
                 </div>
               </div>
             </button>
           {/each}
         </div>
       {/if}
-
     </div>
+
   </div>
 {/if}
 
@@ -346,117 +359,36 @@
 
 <style>
   .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
-
+  .header { display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 0; padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--border-dim); overflow-x: auto; scrollbar-width: none; }
-  /* ── Header ──────────────────────────────────────────────────────────────── */
-  .header {
-    display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 0;
-    padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--border-dim);
-    overflow-x: auto; scrollbar-width: none;
-  }
   .header::-webkit-scrollbar { display: none; }
-  .heading {
+  .heading { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; flex-shrink: 0; }
-    font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint);
-    letter-spacing: var(--tracking-wider); text-transform: uppercase; flex-shrink: 0;
-  }
-
-  /* Genre pill tabs */
   .tab-strip { display: flex; gap: var(--sp-1); flex-shrink: 0; }
-  .genre-tab {
+  .genre-tab { display: flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); padding: 4px 12px; border-radius: var(--radius-full); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; white-space: nowrap; transition: background var(--t-base), color var(--t-base), border-color var(--t-base); }
-    display: flex; align-items: center; gap: 5px;
-    font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
-    padding: 4px 12px; border-radius: var(--radius-full);
-    border: 1px solid var(--border-dim); background: none; color: var(--text-faint);
-    cursor: pointer; white-space: nowrap;
-    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
-  }
   .genre-tab:hover { color: var(--text-muted); border-color: var(--border-strong); background: var(--bg-raised); }
   .genre-tab.active { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
-
+  .refresh-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: none; border: none; color: var(--text-faint); cursor: pointer; flex-shrink: 0; margin-left: auto; transition: color var(--t-base), background var(--t-base); }
-  /* ── Body ────────────────────────────────────────────────────────────────── */
+  .refresh-btn:hover { color: var(--text-muted); background: var(--bg-raised); }
-  .body {
+  .body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5) var(--sp-6); will-change: scroll-position; -webkit-overflow-scrolling: touch; contain: layout style; }
-    flex: 1; overflow-y: auto;
+  .manga-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(90px, 11vw, 130px), 1fr)); gap: var(--sp-2); align-content: start; contain: layout style; }
-    padding: var(--sp-4) var(--sp-5) var(--sp-6);
+  .manga-card { background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
-    /* GPU-accelerated scroll — does NOT promote every card, only the scroll container */
-    will-change: scroll-position;
-    -webkit-overflow-scrolling: touch;
-    contain: layout style;
-  }
-
-  /* ── Grid ────────────────────────────────────────────────────────────────── */
-  .manga-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(clamp(90px, 11vw, 130px), 1fr));
-    gap: var(--sp-2);
-    align-content: start;
-    /* Isolate the grid from the rest of the layout — prevents full-page reflow on update */
-    contain: layout style;
-  }
-
-  /* ── Card ────────────────────────────────────────────────────────────────── */
-  .manga-card {
-    background: none; border: none; padding: 0; cursor: pointer; text-align: left;
-    /* NO will-change here — only promote on actual hover to avoid 60+ simultaneous GPU layers */
-  }
   .manga-card:hover .cover { filter: brightness(1.08) saturate(1.05); transform: scale(1.02); }
   .manga-card:hover .card-title { color: #fff; }
-  /* Promote only the hovered card to its own GPU layer */
   .manga-card:hover { will-change: transform; }
-
+  .cover-wrap { position: relative; aspect-ratio: 2/3; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-raised); border: 1px solid var(--border-dim); box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
-  .cover-wrap {
+  .cover { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.15s ease, transform 0.15s ease; }
-    position: relative; aspect-ratio: 2/3; overflow: hidden;
+  .cover-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.15) 50%, transparent 72%); pointer-events: none; }
-    border-radius: var(--radius-md); background: var(--bg-raised);
+  .lib-badge { position: absolute; top: var(--sp-1); right: var(--sp-1); font-family: var(--font-ui); font-size: 9px; letter-spacing: var(--tracking-wide); text-transform: uppercase; background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); padding: 1px 5px; border-radius: var(--radius-sm); }
-    border: 1px solid var(--border-dim);
+  .card-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--sp-2); pointer-events: none; }
-    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+  .card-title { font-size: var(--text-xs); font-weight: var(--weight-medium); color: rgba(255,255,255,0.92); line-height: var(--leading-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 4px rgba(0,0,0,0.7); transition: color var(--t-base); }
-  }
+  .card-source { font-family: var(--font-ui); font-size: 9px; color: rgba(255,255,255,0.45); letter-spacing: var(--tracking-wide); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .cover {
-    width: 100%; height: 100%; object-fit: cover; display: block;
-    transition: filter 0.15s ease, transform 0.15s ease;
-    /* will-change removed — only the parent card gets it on hover */
-  }
-  .cover-gradient {
-    position: absolute; inset: 0;
-    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.15) 50%, transparent 72%);
-    pointer-events: none;
-  }
-  .lib-badge {
-    position: absolute; top: var(--sp-1); right: var(--sp-1);
-    font-family: var(--font-ui); font-size: 9px; letter-spacing: var(--tracking-wide);
-    text-transform: uppercase; background: var(--accent-muted); color: var(--accent-fg);
-    border: 1px solid var(--accent-dim); padding: 1px 5px; border-radius: var(--radius-sm);
-  }
-  .card-footer {
-    position: absolute; bottom: 0; left: 0; right: 0;
-    padding: var(--sp-2); pointer-events: none;
-  }
-  .card-title {
-    font-size: var(--text-xs); font-weight: var(--weight-medium);
-    color: rgba(255,255,255,0.92); line-height: var(--leading-snug);
-    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
-    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
-    transition: color var(--t-base);
-  }
-  .card-source {
-    font-family: var(--font-ui); font-size: 9px; color: rgba(255,255,255,0.45);
-    letter-spacing: var(--tracking-wide); margin-top: 1px;
-    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-  }
-
-  /* ── Skeleton ────────────────────────────────────────────────────────────── */
   .card-skeleton { padding: 0; }
   .cover-area { aspect-ratio: 2/3; border-radius: var(--radius-md); }
-
+  .skeleton { background: var(--bg-raised); border-radius: var(--radius-sm); animation: pulse 1.6s ease-in-out infinite; }
-  /* ── Empty / error ───────────────────────────────────────────────────────── */
+  @keyframes pulse { 0%, 100% { opacity: 0.4 } 50% { opacity: 0.85 } }
-  .empty {
+  .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-10) var(--sp-6); color: var(--text-faint); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
-    display: flex; flex-direction: column; align-items: center; justify-content: center;
+  .retry-btn { padding: 6px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); background: var(--bg-raised); color: var(--text-muted); cursor: pointer; font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
-    gap: var(--sp-3); padding: var(--sp-10) var(--sp-6);
+  .refresh-btn.spinning { opacity: 0.5; cursor: default; }
-    color: var(--text-faint); font-family: var(--font-ui); font-size: var(--text-xs);
+  .refresh-btn.spinning :global(svg) { animation: spin 0.8s linear infinite; }
-    letter-spacing: var(--tracking-wide);
+  @keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
-  }
-  .retry-btn {
-    padding: 6px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-dim);
-    background: var(--bg-raised); color: var(--text-muted); cursor: pointer;
-    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
-  }
-
   @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
 </style>

src/components/pages/Downloads.svelte

@@ -74,6 +74,7 @@
 <div class="root">
   <div class="header">
     <h1 class="heading">Downloads</h1>
+
     <div class="header-actions">
       <button class="icon-btn" class:loading={togglingPlay} onclick={togglePlay}
         disabled={togglingPlay || (queue.length === 0 && !isRunning)} title={isRunning ? "Pause" : "Resume"}>
@@ -89,6 +90,7 @@
     </div>
   </div>
 
+  <div class="content">
   <div class="status-bar">
     <div class="status-dot" class:active={isRunning}></div>
     <span class="status-text">
@@ -139,18 +141,20 @@
       {/each}
     </div>
   {/if}
+  </div><!-- .content -->
 </div>
 
 <style>
-  .root { padding: var(--sp-6); overflow-y: auto; height: 100%; animation: fadeIn 0.14s ease both; }
+  .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
-  .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
+  .header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
   .heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
   .header-actions { display: flex; gap: var(--sp-2); }
+  .content { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-6) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
   .icon-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); color: var(--text-muted); transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
   .icon-btn:hover:not(:disabled) { color: var(--text-secondary); border-color: var(--border-strong); background: var(--bg-raised); }
   .icon-btn:disabled { opacity: 0.3; cursor: default; }
   .icon-btn.loading { border-color: var(--accent-dim); color: var(--accent-fg); background: var(--accent-muted); }
-  .status-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); margin-bottom: var(--sp-4); }
+  .status-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); }
   .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0; transition: background var(--t-base); }
   .status-dot.active { background: var(--accent); animation: pulse 1.6s ease infinite; }
   @keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }

src/components/pages/Explore.svelte

@@ -1,372 +0,0 @@
-<script lang="ts">
-  import { onDestroy } from "svelte";
-  import { ArrowRight, Compass, List, BookOpen, Star, Fire, BookmarkSimple, FolderSimplePlus, Folder } from "phosphor-svelte";
-  import { gql, thumbUrl } from "../../lib/client";
-  import { UPDATE_MANGA, GET_SOURCES, FETCH_SOURCE_MANGA } from "../../lib/queries";
-  import { cache, CACHE_KEYS, getTopSources } from "../../lib/cache";
-  import { dedupeSources, dedupeMangaByTitle } from "../../lib/util";
-  import { settings, activeSource, genreFilter, previewManga, history, addFolder, assignMangaToFolder } from "../../store";
-  import type { Manga, Source } from "../../lib/types";
-  import ContextMenu, { type MenuEntry } from "../shared/ContextMenu.svelte";
-  import SourceList    from "../sources/SourceList.svelte";
-  import SourceBrowse  from "../sources/SourceBrowse.svelte";
-  import GenreDrillPage from "./GenreDrillPage.svelte";
-
-  type ExploreMode = "explore" | "sources";
-  let mode: ExploreMode = "explore";
-
-  const EXPLORE_ALL_MANGA = `
-    query ExploreAllManga {
-      mangas(orderBy: IN_LIBRARY_AT, orderByType: DESC) {
-        nodes { id title thumbnailUrl inLibrary genre status source { id displayName } }
-      }
-    }
-  `;
-  const MANGAS_BY_GENRE_EXPLORE = `
-    query MangasByGenreExplore($genre: String!, $first: Int) {
-      mangas(filter: { genre: { includesInsensitive: $genre } }, first: $first, orderBy: IN_LIBRARY_AT, orderByType: DESC) {
-        nodes { id title thumbnailUrl inLibrary genre }
-      }
-    }
-  `;
-
-  const FOUNDATIONAL_GENRES = ["Action", "Romance", "Fantasy", "Adventure", "Comedy", "Drama"];
-  const ROW_CAP = 25;
-  const GHOST_COUNT = 3;
-
-  let allManga: Manga[]            = [];
-  let popularManga: Manga[]        = [];
-  let sources: Source[]            = [];
-  let genreResultsMap              = new Map<string, Manga[]>();
-  let loadingLib                   = true;
-  let loadingPopular               = true;
-  let loadingGenres                = false;
-  let loadError                    = false;
-  let retryCount                   = 0;
-  let ctx: { x: number; y: number; manga: Manga } | null = null;
-  let abortCtrl: AbortController | null = null;
-  let fetchedGenresKey             = "";
-
-  function frecencyScore(readAt: number, count: number): number {
-    return count / Math.log((Date.now() - readAt) / 3_600_000 + 2);
-  }
-
-  $: frecencyGenres = (() => {
-    const mangaScores = new Map<number, number>();
-    const mangaReadAt = new Map<number, number>();
-    for (const e of $history) {
-      mangaScores.set(e.mangaId, (mangaScores.get(e.mangaId) ?? 0) + 1);
-      if (e.readAt > (mangaReadAt.get(e.mangaId) ?? 0)) mangaReadAt.set(e.mangaId, e.readAt);
-    }
-    const genreWeights = new Map<string, number>();
-    const mangaMap = new Map(allManga.map((m) => [m.id, m]));
-    for (const [mangaId, count] of mangaScores.entries()) {
-      const score = frecencyScore(mangaReadAt.get(mangaId) ?? 0, count);
-      for (const g of mangaMap.get(mangaId)?.genre ?? []) genreWeights.set(g, (genreWeights.get(g) ?? 0) + score);
-    }
-    if (genreWeights.size === 0) allManga.filter((m) => m.inLibrary).forEach((m) => (m.genre ?? []).forEach((g) => genreWeights.set(g, (genreWeights.get(g) ?? 0) + 1)));
-    if (genreWeights.size === 0) return FOUNDATIONAL_GENRES.slice(0, 3);
-    return Array.from(genreWeights.entries()).sort((a, b) => b[1] - a[1]).slice(0, 3).map(([g]) => g);
-  })();
-
-  $: continueReading = (() => {
-    const mangaMap = new Map(allManga.map((m) => [m.id, m]));
-    const seen = new Set<number>();
-    const result: { manga: Manga; chapterName: string; progress: number }[] = [];
-    for (const e of $history) {
-      if (seen.has(e.mangaId)) continue;
-      seen.add(e.mangaId);
-      const manga = mangaMap.get(e.mangaId);
-      if (!manga) continue;
-      result.push({ manga, chapterName: e.chapterName, progress: e.pageNumber > 0 ? Math.min(e.pageNumber / 20, 1) : 0 });
-      if (result.length >= 12) break;
-    }
-    return result;
-  })();
-
-  $: recommended = allManga.length && frecencyGenres.length ? (() => {
-    const continueIds = new Set(continueReading.map((r) => r.manga.id));
-    return allManga.filter((m) => m.inLibrary && !continueIds.has(m.id) && frecencyGenres.some((g) => (m.genre ?? []).includes(g))).slice(0, 20);
-  })() : [];
-
-  $: if (frecencyGenres.length && allManga.length) loadGenreRows();
-
-  async function loadGenreRows() {
-    const key = frecencyGenres.join(",");
-    if (fetchedGenresKey === key) return;
-    fetchedGenresKey = key;
-    loadingGenres = true;
-    abortCtrl?.abort();
-    const ctrl = new AbortController();
-    abortCtrl = ctrl;
-    const streamMap = new Map<string, Manga[]>();
-    await Promise.allSettled(
-      frecencyGenres.map((genre) =>
-        cache.get(CACHE_KEYS.GENRE(genre), () =>
-          gql<{ mangas: { nodes: Manga[] } }>(MANGAS_BY_GENRE_EXPLORE, { genre, first: 25 }, ctrl.signal)
-            .then((d) => d.mangas.nodes)
-        ).then((mangas) => {
-          if (ctrl.signal.aborted) return;
-          streamMap.set(genre, mangas);
-          genreResultsMap = new Map(streamMap);
-        })
-      )
-    ).catch(() => {});
-    if (!ctrl.signal.aborted) loadingGenres = false;
-  }
-
-  $: if (retryCount >= 0) loadData();
-
-  async function loadData() {
-    if (allManga.length > 0 && retryCount === 0) return;
-    loadingLib = true; loadingPopular = true; loadError = false;
-    const preferredLang = $settings.preferredExtensionLang || "en";
-    if (retryCount > 0) { cache.clear(CACHE_KEYS.LIBRARY); cache.clear(CACHE_KEYS.SOURCES); fetchedGenresKey = ""; }
-
-    cache.get(CACHE_KEYS.LIBRARY, () =>
-      gql<{ mangas: { nodes: Manga[] } }>(EXPLORE_ALL_MANGA).then((d) => d.mangas.nodes)
-    ).then((m) => { allManga = m; }).catch((e) => { console.error(e); loadError = true; }).finally(() => loadingLib = false);
-
-    cache.get(CACHE_KEYS.SOURCES, () =>
-      gql<{ sources: { nodes: Source[] } }>(GET_SOURCES).then((d) => dedupeSources(d.sources.nodes, preferredLang))
-    ).then(async (allSources) => {
-      if (!allSources.length) { loadingPopular = false; return; }
-      const top = getTopSources(allSources).slice(0, 2);
-      sources = allSources;
-      cache.get(CACHE_KEYS.POPULAR, () =>
-        Promise.allSettled(top.map((src) =>
-          gql<{ fetchSourceManga: { mangas: Manga[] } }>(FETCH_SOURCE_MANGA, { source: src.id, type: "POPULAR", page: 1, query: null })
-            .then((d) => d.fetchSourceManga.mangas)
-        )).then((results) => {
-          const merged: Manga[] = [];
-          for (const r of results) if (r.status === "fulfilled") merged.push(...r.value);
-          return dedupeMangaByTitle(merged).slice(0, 30);
-        })
-      ).then((m) => popularManga = m).catch(console.error).finally(() => loadingPopular = false);
-    }).catch((e) => { console.error(e); loadError = true; loadingPopular = false; });
-  }
-
-  function buildCtxItems(m: Manga): MenuEntry[] {
-    return [
-      { label: m.inLibrary ? "In Library" : "Add to library", icon: BookmarkSimple, disabled: m.inLibrary,
-        onClick: () => gql(UPDATE_MANGA, { id: m.id, inLibrary: true }).then(() => cache.clear(CACHE_KEYS.LIBRARY)).catch(console.error) },
-      ...($settings.folders.length > 0 ? [
-        { separator: true } as MenuEntry,
-        ...$settings.folders.map((f): MenuEntry => ({
-          label: f.mangaIds.includes(m.id) ? `✓ ${f.name}` : f.name, icon: Folder,
-          onClick: () => assignMangaToFolder(f.id, m.id),
-        })),
-      ] : []),
-      { separator: true },
-      { label: "New folder & add", icon: FolderSimplePlus, onClick: () => { const name = prompt("Folder name:"); if (name?.trim()) { const id = addFolder(name.trim()); assignMangaToFolder(id, m.id); } } },
-    ];
-  }
-
-  function rowWheel(e: WheelEvent) {
-    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
-    const el = e.currentTarget as HTMLDivElement;
-    if (el.scrollLeft <= 0 && el.scrollLeft >= el.scrollWidth - el.clientWidth - 1) return;
-    e.stopPropagation();
-    el.scrollLeft += e.deltaY;
-  }
-
-  onDestroy(() => abortCtrl?.abort());
-</script>
-
-{#if $activeSource}
-  <SourceBrowse />
-{:else if $genreFilter}
-  <GenreDrillPage />
-{:else}
-  <div class="root">
-    <div class="header">
-      <div class="header-left">
-        <h1 class="heading">Explore</h1>
-        <div class="tabs">
-          <button class="tab" class:active={mode === "explore"} on:click={() => mode = "explore"}>
-            <Compass size={11} weight="bold" /> Explore
-          </button>
-          <button class="tab" class:active={mode === "sources"} on:click={() => mode = "sources"}>
-            <List size={11} weight="bold" /> Sources
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div style="display:{mode === 'explore' ? 'contents' : 'none'}">
-      <div class="body">
-
-        {#if continueReading.length > 0 || loadingLib}
-          <div class="section">
-            <div class="section-header">
-              <span class="section-title"><BookOpen size={11} weight="bold" /> Continue Reading</span>
-            </div>
-            {#if loadingLib}
-              <div class="skeleton-row">{#each Array(8) as _}<div class="card-skeleton"><div class="cover-skeleton skeleton"></div><div class="title-skeleton skeleton"></div></div>{/each}</div>
-            {:else}
-              <div class="row" on:wheel={rowWheel}>
-                {#each continueReading.slice(0, ROW_CAP) as { manga, chapterName, progress }}
-                  <button class="card" on:click={() => previewManga.set(manga)} on:contextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, manga }; }}>
-                    <div class="cover-wrap">
-                      <img src={thumbUrl(manga.thumbnailUrl)} alt={manga.title} class="cover" loading="lazy" decoding="async" />
-                      {#if manga.inLibrary}<span class="in-library-badge">Saved</span>{/if}
-                      {#if progress > 0}<div class="progress-bar"><div class="progress-fill" style="width:{progress * 100}%"></div></div>{/if}
-                    </div>
-                    <p class="title">{manga.title}</p>
-                    {#if chapterName}<p class="subtitle">{chapterName}</p>{/if}
-                  </button>
-                {/each}
-                {#each Array(GHOST_COUNT) as _}<div class="ghost-card" aria-hidden></div>{/each}
-              </div>
-            {/if}
-          </div>
-        {/if}
-
-        {#if recommended.length > 0 || loadingLib}
-          <div class="section">
-            <div class="section-header">
-              <span class="section-title"><Star size={11} weight="bold" /> Recommended for You</span>
-            </div>
-            {#if loadingLib}
-              <div class="skeleton-row">{#each Array(8) as _}<div class="card-skeleton"><div class="cover-skeleton skeleton"></div><div class="title-skeleton skeleton"></div></div>{/each}</div>
-            {:else}
-              <div class="row" on:wheel={rowWheel}>
-                {#each recommended.slice(0, ROW_CAP) as m}
-                  <button class="card" on:click={() => previewManga.set(m)} on:contextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, manga: m }; }}>
-                    <div class="cover-wrap"><img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="cover" loading="lazy" decoding="async" />{#if m.inLibrary}<span class="in-library-badge">Saved</span>{/if}</div>
-                    <p class="title">{m.title}</p>
-                  </button>
-                {/each}
-                {#each Array(GHOST_COUNT) as _}<div class="ghost-card" aria-hidden></div>{/each}
-              </div>
-            {/if}
-          </div>
-        {/if}
-
-        {#if popularManga.length > 0 || loadingPopular}
-          <div class="section">
-            <div class="section-header">
-              <span class="section-title">
-                <Fire size={11} weight="bold" />
-                {sources.length === 1 ? `Popular on ${sources[0].displayName}` : sources.length > 1 ? `Popular across ${sources.length} sources` : "Popular"}
-              </span>
-            </div>
-            {#if loadingPopular}
-              <div class="skeleton-row">{#each Array(8) as _}<div class="card-skeleton"><div class="cover-skeleton skeleton"></div><div class="title-skeleton skeleton"></div></div>{/each}</div>
-            {:else if sources.length === 0}
-              <div class="no-source">No sources installed. Add extensions first.</div>
-            {:else}
-              <div class="row" on:wheel={rowWheel}>
-                {#each popularManga.slice(0, ROW_CAP) as m}
-                  <button class="card" on:click={() => previewManga.set(m)} on:contextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, manga: m }; }}>
-                    <div class="cover-wrap"><img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="cover" loading="lazy" decoding="async" />{#if m.inLibrary}<span class="in-library-badge">Saved</span>{/if}</div>
-                    <p class="title">{m.title}</p>
-                  </button>
-                {/each}
-                {#each Array(GHOST_COUNT) as _}<div class="ghost-card" aria-hidden></div>{/each}
-              </div>
-            {/if}
-          </div>
-        {/if}
-
-        {#each frecencyGenres as genre}
-          {@const items = genreResultsMap.get(genre) ?? []}
-          {@const isLoading = loadingGenres && items.length === 0}
-          {#if isLoading || items.length > 0}
-            <div class="section">
-              <div class="section-header">
-                <span class="section-title">{genre}</span>
-                <button class="see-all" on:click={() => genreFilter.set(genre)}>See all <ArrowRight size={11} weight="light" /></button>
-              </div>
-              {#if isLoading}
-                <div class="skeleton-row">{#each Array(8) as _}<div class="card-skeleton"><div class="cover-skeleton skeleton"></div><div class="title-skeleton skeleton"></div></div>{/each}</div>
-              {:else}
-                <div class="row" on:wheel={rowWheel}>
-                  {#each items.slice(0, ROW_CAP) as m}
-                    <button class="card" on:click={() => previewManga.set(m)} on:contextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, manga: m }; }}>
-                      <div class="cover-wrap"><img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="cover" loading="lazy" decoding="async" />{#if m.inLibrary}<span class="in-library-badge">Saved</span>{/if}</div>
-                      <p class="title">{m.title}</p>
-                    </button>
-                  {/each}
-                  {#if items.length >= ROW_CAP}
-                    <button class="explore-more-card" on:click={() => genreFilter.set(genre)}>
-                      <div class="explore-more-inner">
-                        <ArrowRight size={20} weight="light" class="explore-more-icon" />
-                        <span class="explore-more-label">Explore more</span>
-                        <span class="explore-more-genre">{genre}</span>
-                      </div>
-                    </button>
-                  {/if}
-                  {#each Array(GHOST_COUNT) as _}<div class="ghost-card" aria-hidden></div>{/each}
-                </div>
-              {/if}
-            </div>
-          {/if}
-        {/each}
-
-        {#if !loadingLib && !loadingPopular && !loadingGenres && continueReading.length === 0 && recommended.length === 0 && popularManga.length === 0 && frecencyGenres.every((g) => !genreResultsMap.get(g)?.length)}
-          <div class="empty">
-            {#if loadError}
-              <span>Could not reach Suwayomi</span>
-              <span class="empty-hint">Make sure the server is running, then try again.</span>
-              <button class="retry-btn" on:click={() => { loadingLib = true; loadingPopular = true; retryCount++; }}>Retry</button>
-            {:else}
-              <span>Nothing to explore yet</span>
-              <span class="empty-hint">Add manga to your library or install sources to get started.</span>
-            {/if}
-          </div>
-        {/if}
-      </div>
-    </div>
-
-    {#if mode === "sources"}<SourceList />{/if}
-  </div>
-{/if}
-
-{#if ctx}
-  <ContextMenu x={ctx.x} y={ctx.y} items={buildCtxItems(ctx.manga)} onClose={() => ctx = null} />
-{/if}
-
-<style>
-  .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
-  .header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; gap: var(--sp-4); }
-  .header-left { display: flex; align-items: center; gap: var(--sp-4); }
-  .heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; flex-shrink: 0; }
-  .tabs { display: flex; gap: 2px; background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 2px; }
-  .tab { display: flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-sm); color: var(--text-faint); transition: background var(--t-base), color var(--t-base); white-space: nowrap; }
-  .tab:hover { color: var(--text-muted); }
-  .tab.active { background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); }
-  .body { flex: 1; overflow-y: auto; padding: var(--sp-5) 0 var(--sp-6); will-change: scroll-position; -webkit-overflow-scrolling: touch; }
-  .section { margin-bottom: var(--sp-6); }
-  .section-header { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-6) var(--sp-3); }
-  .section-title { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
-  .see-all { display: flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); background: none; border: none; cursor: pointer; padding: 2px 0; transition: color var(--t-base); }
-  .see-all:hover { color: var(--accent-fg); }
-  .row { display: flex; gap: var(--sp-3); padding: 0 var(--sp-6); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
-  .row::-webkit-scrollbar { display: none; }
-  .card { flex-shrink: 0; width: 110px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
-  .card:hover .cover { filter: brightness(1.06); }
-  .card:hover .title { color: var(--text-primary); }
-  .cover-wrap { position: relative; aspect-ratio: 2/3; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-raised); border: 1px solid var(--border-dim); transform: translateZ(0); }
-  .cover { width: 100%; height: 100%; object-fit: cover; transition: filter var(--t-base); will-change: filter; }
-  .in-library-badge { position: absolute; bottom: var(--sp-1); left: var(--sp-1); font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); padding: 2px 5px; border-radius: var(--radius-sm); }
-  .progress-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--bg-overlay); }
-  .progress-fill { height: 100%; background: var(--accent-fg); border-radius: 0 2px 0 0; transition: width 0.2s ease; }
-  .title { margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--t-base); }
-  .subtitle { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); margin-top: 2px; letter-spacing: var(--tracking-wide); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .ghost-card { flex-shrink: 0; width: 110px; aspect-ratio: 2/3; pointer-events: none; visibility: hidden; }
-  .skeleton-row { display: flex; gap: var(--sp-3); padding: 0 var(--sp-6); overflow: hidden; }
-  .card-skeleton { flex-shrink: 0; width: 110px; }
-  .cover-skeleton { aspect-ratio: 2/3; border-radius: var(--radius-md); }
-  .title-skeleton { height: 11px; margin-top: var(--sp-2); width: 80%; }
-  .explore-more-card { flex-shrink: 0; width: 110px; aspect-ratio: 2/3; border-radius: var(--radius-md); border: 1px dashed var(--border-strong); background: var(--bg-raised); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color var(--t-base), background var(--t-base); padding: 0; }
-  .explore-more-card:hover { border-color: var(--accent); background: var(--accent-muted); }
-  .explore-more-inner { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-3); pointer-events: none; }
-  :global(.explore-more-icon) { color: var(--text-faint); transition: color var(--t-base); }
-  .explore-more-label { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); text-align: center; }
-  .explore-more-genre { font-size: var(--text-2xs); color: var(--text-faint); opacity: 0.6; text-align: center; font-family: var(--font-ui); letter-spacing: var(--tracking-wide); }
-  .no-source { display: flex; align-items: center; justify-content: center; padding: var(--sp-4) var(--sp-6); color: var(--text-faint); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
-  .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-6); color: var(--text-faint); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); gap: var(--sp-2); text-align: center; }
-  .empty-hint { font-size: var(--text-2xs); color: var(--text-faint); opacity: 0.6; }
-  .retry-btn { margin-top: var(--sp-3); padding: 6px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); background: var(--bg-raised); color: var(--text-muted); cursor: pointer; font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
-</style>

src/components/pages/Extensions.svelte

@@ -130,7 +130,18 @@
 <div class="root">
   <div class="header">
     <h1 class="heading">Extensions</h1>
-    <div class="header-actions">
+    <div class="tabs">
+      {#each FILTERS as f}
+        <button class="tab" class:active={filter === f.id} onclick={() => filter = f.id}>
+          {f.id === "updates" && updateCount > 0 ? `Updates (${updateCount})` : f.label}
+        </button>
+      {/each}
+    </div>
+    <div class="header-right">
+      <div class="search-wrap">
+        <MagnifyingGlass size={12} class="search-icon" weight="light" />
+        <input class="search" placeholder="Search" bind:value={search} />
+      </div>
       <button class="icon-btn" class:active={panel === "repos"} onclick={() => openPanel("repos")} title="Manage repos">
         <GitBranch size={14} weight="light" />
       </button>
@@ -153,7 +164,7 @@
         <input class="ext-input" class:error={installError} placeholder="https://example.com/extension.apk"
           bind:value={externalUrl} disabled={installing}
           oninput={() => installError = null}
-          onkeydown={(e) => e.key === "Enter" && !installing && installExternal()} autofocus />
+          onkeydown={(e) => e.key === "Enter" && !installing && installExternal()} use:focusOnMount />
         <button class="install-btn" class:success={installSuccess} onclick={installExternal} disabled={installing || !externalUrl.trim()}>
           {#if installing}<CircleNotch size={13} weight="light" class="anim-spin" />
           {:else if installSuccess}<Check size={13} weight="bold" /> Done
@@ -201,19 +212,7 @@
     </div>
   {/if}
 
-  <div class="controls">
+
-    <div class="tabs">
-      {#each FILTERS as f}
-        <button class="tab" class:active={filter === f.id} onclick={() => filter = f.id}>
-          {f.id === "updates" && updateCount > 0 ? `Updates (${updateCount})` : f.label}
-        </button>
-      {/each}
-    </div>
-    <div class="search-wrap">
-      <MagnifyingGlass size={12} class="search-icon" weight="light" />
-      <input class="search" placeholder="Search" bind:value={search} />
-    </div>
-  </div>
 
   {#if loading}
     <div class="empty"><CircleNotch size={16} weight="light" class="anim-spin" style="color:var(--text-faint)" /></div>
@@ -282,7 +281,8 @@
 
 <style>
   .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
-  .header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-6) var(--sp-3); flex-shrink: 0; }
+  .header { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
+  .header-right { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
   .heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
   .header-actions { display: flex; gap: var(--sp-1); }
   .icon-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--text-muted); transition: color var(--t-base), background var(--t-base); }
@@ -309,11 +309,11 @@
   .repo-url { flex: 1; font-size: var(--text-2xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .repo-remove { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-sm); color: var(--text-faint); flex-shrink: 0; transition: color var(--t-base), background var(--t-base); }
   .repo-remove:hover:not(:disabled) { color: var(--color-error); background: var(--bg-overlay); }
-  .controls { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-6) var(--sp-3); gap: var(--sp-3); flex-shrink: 0; }
+
-  .tabs { display: flex; gap: 2px; }
+  .tabs { display: flex; gap: 2px; background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 2px; }
-  .tab { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 10px; border-radius: var(--radius-md); border: none; background: none; color: var(--text-muted); cursor: pointer; transition: background var(--t-base), color var(--t-base); }
+  .tab { display: flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-sm); color: var(--text-faint); white-space: nowrap; transition: background var(--t-base), color var(--t-base); }
-  .tab:hover { background: var(--bg-raised); color: var(--text-secondary); }
+  .tab:hover { color: var(--text-muted); }
-  .tab.active { background: var(--accent-muted); color: var(--accent-fg); }
+  .tab.active { background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); }
   .search-wrap { position: relative; display: flex; align-items: center; }
   .search-wrap :global(.search-icon) { position: absolute; left: 9px; color: var(--text-faint); pointer-events: none; }
   .search { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 5px 10px 5px 26px; color: var(--text-primary); font-size: var(--text-sm); width: 160px; outline: none; transition: border-color var(--t-base); }
@@ -328,7 +328,6 @@
   .name { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .meta { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
   .lang-tag { background: var(--bg-overlay); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); padding: 1px 5px; font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-muted); letter-spacing: var(--tracking-wider); }
-  .update-badge { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); border-radius: var(--radius-sm); padding: 2px 6px; flex-shrink: 0; }
   .update-badge-small { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--accent-fg); flex-shrink: 0; }
   .row-actions { display: flex; gap: var(--sp-1); flex-shrink: 0; }
   .action-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 10px; border-radius: var(--radius-md); background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); cursor: pointer; flex-shrink: 0; transition: filter var(--t-base); }
@@ -346,3 +345,7 @@
   .variant-actions { flex-shrink: 0; }
   .empty { display: flex; align-items: center; justify-content: center; flex: 1; color: var(--text-faint); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
 </style>
+
+<script module>
+  function focusOnMount(node: HTMLElement) { node.focus(); }
+</script>

src/components/pages/GenreDrillPage.svelte

@@ -35,9 +35,9 @@
 
   let libraryManga: Manga[]  = $state([]);
   let sourceManga: Manga[]   = $state([]);
-  let loadingInitial         = true;
+  let loadingInitial         = $state(true);
-  let loadingMore            = false;
+  let loadingMore            = $state(false);
-  let visibleCount           = PAGE_SIZE;
+  let visibleCount           = $state(PAGE_SIZE);
   let ctx: { x: number; y: number; manga: Manga } | null = $state(null);
 
   const nextPageMap = new Map<string, number>();

src/components/pages/History.svelte

@@ -1,250 +0,0 @@
-<script lang="ts">
-  import { ClockCounterClockwise, Trash, MagnifyingGlass, Play, Books, X as XIcon } from "phosphor-svelte";
-  import { thumbUrl, gql } from "../../lib/client";
-  import { GET_CHAPTERS } from "../../lib/queries";
-  import { store, openReader, clearHistory, clearHistoryForManga } from "../../store/state.svelte";
-  import type { HistoryEntry } from "../../store/state.svelte";
-
-  let search         = $state("");
-  let confirmClearAll = $state(false);
-
-  function timeAgo(ts: number): string {
-    const diff = Date.now() - ts, m = Math.floor(diff / 60000);
-    if (m < 1)  return "Just now";
-    if (m < 60) return `${m}m ago`;
-    const h = Math.floor(m / 60);
-    if (h < 24) return `${h}h ago`;
-    const d = Math.floor(h / 24);
-    if (d < 7)  return `${d}d ago`;
-    return new Date(ts).toLocaleDateString("en-US", { month: "short", day: "numeric" });
-  }
-
-  function dayLabel(ts: number): string {
-    const d = new Date(ts), now = new Date();
-    if (d.toDateString() === now.toDateString()) return "Today";
-    const yest = new Date(now); yest.setDate(now.getDate() - 1);
-    if (d.toDateString() === yest.toDateString()) return "Yesterday";
-    const weekAgo = new Date(now); weekAgo.setDate(now.getDate() - 7);
-    if (d > weekAgo) return d.toLocaleDateString("en-US", { weekday: "long" });
-    return d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: d.getFullYear() !== now.getFullYear() ? "numeric" : undefined });
-  }
-
-  function formatReadTime(mins: number): string {
-    if (mins < 1)  return `${Math.round(mins * 60)}s`;
-    if (mins < 60) return `${Math.round(mins)}m`;
-    const h = Math.floor(mins / 60), r = mins % 60;
-    if (h < 24) return r === 0 ? `${h}h` : `${h}h ${r}m`;
-    const d = Math.floor(h / 24), rh = h % 24;
-    return rh === 0 ? `${d}d` : `${d}d ${rh}h`;
-  }
-
-  const SESSION_GAP_MS = 30 * 60 * 1000;
-
-  interface Session {
-    mangaId: number; mangaTitle: string; thumbnailUrl: string;
-    latestChapterId: number; latestChapterName: string; latestPageNumber: number;
-    firstChapterName: string; chapterCount: number; readAt: number;
-  }
-
-  function buildSessions(entries: HistoryEntry[]): Session[] {
-    if (!entries.length) return [];
-    const sessions: Session[] = [];
-    let i = 0;
-    while (i < entries.length) {
-      const anchor = entries[i];
-      const group: HistoryEntry[] = [anchor];
-      let j = i + 1;
-      while (j < entries.length) {
-        const next = entries[j];
-        if (next.mangaId === anchor.mangaId && anchor.readAt - next.readAt <= SESSION_GAP_MS) { group.push(next); j++; }
-        else break;
-      }
-      const latest = group[0], oldest = group[group.length - 1];
-      sessions.push({ mangaId: latest.mangaId, mangaTitle: latest.mangaTitle, thumbnailUrl: latest.thumbnailUrl, latestChapterId: latest.chapterId, latestChapterName: latest.chapterName, latestPageNumber: latest.pageNumber, firstChapterName: oldest.chapterName, chapterCount: group.length, readAt: latest.readAt });
-      i = j;
-    }
-    return sessions;
-  }
-
-  const filtered = $derived(search.trim()
-    ? store.history.filter(e => e.mangaTitle.toLowerCase().includes(search.toLowerCase()) || e.chapterName.toLowerCase().includes(search.toLowerCase()))
-    : store.history);
-
-  const sessions = $derived(buildSessions(filtered));
-
-  const groups = $derived((() => {
-    const map = new Map<string, Session[]>();
-    for (const s of sessions) {
-      const l = dayLabel(s.readAt);
-      if (!map.has(l)) map.set(l, []);
-      map.get(l)!.push(s);
-    }
-    return Array.from(map.entries()).map(([label, items]) => ({ label, items }));
-  })());
-
-  const stats = $derived({
-    uniqueChapters: new Set(store.history.map(e => e.chapterId)).size,
-    uniqueManga: new Set(store.history.map(e => e.mangaId)).size,
-    estimatedMinutes: Math.round(new Set(store.history.map(e => e.chapterId)).size * 4.5),
-  });
-
-  function doConfirmClear() { clearHistory(); confirmClearAll = false; }
-
-  async function resume(session: Session) {
-    try {
-      const d = await gql<{ chapters: { nodes: any[] } }>(GET_CHAPTERS, { mangaId: session.mangaId });
-      const chapters = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
-      const ch = chapters.find(c => c.id === session.latestChapterId) ?? chapters[0];
-      if (ch) openReader(ch, chapters);
-    } catch {}
-  }
-</script>
-
-<div class="root">
-  <div class="header">
-    <h1 class="heading">History</h1>
-    <div class="header-right">
-      <div class="search-wrap">
-        <MagnifyingGlass size={12} class="search-icon" weight="light" />
-        <input class="search" placeholder="Search store.history…" bind:value={search} />
-        {#if search}
-          <button class="search-clear" onclick={() => search = ""}>
-            <XIcon size={10} weight="bold" />
-          </button>
-        {/if}
-      </div>
-      {#if store.history.length > 0}
-        {#if confirmClearAll}
-          <div class="confirm-row">
-            <span class="confirm-label">Clear all activity?</span>
-            <button class="confirm-yes" onclick={doConfirmClear}>Clear</button>
-            <button class="confirm-no" onclick={() => confirmClearAll = false}>Cancel</button>
-          </div>
-        {:else}
-          <button class="clear-btn" onclick={() => confirmClearAll = true} title="Clear all activity">
-            <Trash size={13} weight="light" />
-          </button>
-        {/if}
-      {/if}
-    </div>
-  </div>
-
-  <div class="stats-bar">
-    <span class="stat-item"><span class="stat-val">{stats.uniqueChapters}</span><span class="stat-label">chapters</span></span>
-    <span class="stat-sep"></span>
-    <span class="stat-item"><span class="stat-val">{stats.uniqueManga}</span><span class="stat-label">series</span></span>
-    <span class="stat-sep"></span>
-    <span class="stat-item"><span class="stat-val">{formatReadTime(stats.estimatedMinutes)}</span><span class="stat-label">est. time</span></span>
-    {#if store.readingStats.currentStreakDays > 0}
-      <span class="stat-sep"></span>
-      <span class="stat-item"><span class="stat-val">{store.readingStats.currentStreakDays}d</span><span class="stat-label">streak</span></span>
-    {/if}
-  </div>
-
-  {#if store.history.length === 0}
-    <div class="empty">
-      <ClockCounterClockwise size={32} weight="light" class="empty-icon" />
-      <p class="empty-text">No reading history yet</p>
-      <p class="empty-hint">Chapters you read will appear here</p>
-    </div>
-  {:else if sessions.length === 0}
-    <div class="empty">
-      <Books size={28} weight="light" class="empty-icon" />
-      <p class="empty-text">No results for "{search}"</p>
-    </div>
-  {:else}
-    <div class="list">
-      {#each groups as { label, items } (label)}
-        <div class="group">
-          <p class="group-label">
-            <span>{label}</span>
-            <span class="group-count">{items.length}</span>
-          </p>
-          {#each items as session (session.latestChapterId + ":" + session.readAt)}
-            <div class="row-wrap">
-              <button class="row" onclick={() => resume(session)}>
-                <div class="thumb-wrap">
-                  <img src={thumbUrl(session.thumbnailUrl)} alt={session.mangaTitle} class="thumb" loading="lazy" decoding="async" />
-                  {#if session.chapterCount > 1}
-                    <span class="session-badge">{session.chapterCount}</span>
-                  {/if}
-                </div>
-                <div class="info">
-                  <span class="manga-title">{session.mangaTitle}</span>
-                  <span class="chapter-name">
-                    {#if session.chapterCount > 1}
-                      <span class="chapter-range">{session.firstChapterName}<span class="range-sep">→</span>{session.latestChapterName}</span>
-                    {:else}
-                      {session.latestChapterName}
-                      {#if session.latestPageNumber > 1}<span class="page-badge">p.{session.latestPageNumber}</span>{/if}
-                    {/if}
-                  </span>
-                </div>
-                <span class="time">{timeAgo(session.readAt)}</span>
-                <Play size={11} weight="fill" class="play-icon" />
-              </button>
-              <button class="row-delete" onclick={() => clearHistoryForManga(session.mangaId)} title="Remove {session.mangaTitle} from store.history" aria-label="Remove from store.history">
-                <XIcon size={9} weight="bold" />
-              </button>
-            </div>
-          {/each}
-        </div>
-      {/each}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
-  .header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-6) var(--sp-3); flex-shrink: 0; }
-  .heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
-  .header-right { display: flex; align-items: center; gap: var(--sp-2); }
-  .search-wrap { position: relative; display: flex; align-items: center; }
-  .search-wrap :global(.search-icon) { position: absolute; left: 9px; color: var(--text-faint); pointer-events: none; }
-  .search { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 5px 28px 5px 26px; color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none; transition: border-color var(--t-base); }
-  .search::placeholder { color: var(--text-faint); }
-  .search:focus { border-color: var(--border-strong); }
-  .search-clear { position: absolute; right: 7px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); background: none; border: none; cursor: pointer; padding: 2px; transition: color var(--t-base); }
-  .search-clear:hover { color: var(--text-muted); }
-  .confirm-row { display: flex; align-items: center; gap: var(--sp-2); }
-  .confirm-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
-  .confirm-yes { font-family: var(--font-ui); font-size: var(--text-xs); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--color-error); background: var(--color-error-bg); color: var(--color-error); cursor: pointer; transition: filter var(--t-base); }
-  .confirm-yes:hover { filter: brightness(1.15); }
-  .confirm-no { font-family: var(--font-ui); font-size: var(--text-xs); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; transition: background var(--t-base); }
-  .confirm-no:hover { background: var(--bg-raised); color: var(--text-muted); }
-  .clear-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; cursor: pointer; transition: color var(--t-base), background var(--t-base); }
-  .clear-btn:hover { color: var(--color-error); background: var(--color-error-bg); }
-  .stats-bar { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-6) var(--sp-3); flex-shrink: 0; }
-  .stat-item { display: flex; align-items: baseline; gap: 4px; }
-  .stat-val { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
-  .stat-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
-  .stat-sep { width: 1px; height: 10px; background: var(--border-dim); flex-shrink: 0; }
-  .list { flex: 1; overflow-y: auto; padding: 0 var(--sp-4) var(--sp-6); scrollbar-width: none; }
-  .list::-webkit-scrollbar { display: none; }
-  .group { margin-bottom: var(--sp-4); }
-  .group-label { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding: var(--sp-1) var(--sp-2) var(--sp-2); }
-  .group-count { font-family: var(--font-ui); font-size: 9px; color: var(--text-faint); background: var(--bg-raised); border: 1px solid var(--border-dim); padding: 1px 5px; border-radius: var(--radius-full); letter-spacing: 0; text-transform: none; }
-  .row-wrap { display: flex; align-items: center; border-radius: var(--radius-md); transition: background var(--t-fast); }
-  .row-wrap:hover { background: var(--bg-raised); }
-  .row-wrap:hover .row-delete { opacity: 1; }
-  .row { flex: 1; display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-2); border-radius: var(--radius-md); border: none; background: none; text-align: left; cursor: pointer; min-width: 0; }
-  .row:hover :global(.play-icon) { opacity: 1; }
-  .row-delete { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-sm); border: none; background: none; color: var(--text-faint); cursor: pointer; opacity: 0; transition: opacity var(--t-base), color var(--t-base), background var(--t-base); margin-right: var(--sp-1); }
-  .row-delete:hover { color: var(--color-error); background: var(--color-error-bg); }
-  .thumb-wrap { position: relative; flex-shrink: 0; }
-  .thumb { width: 36px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; display: block; background: var(--bg-raised); border: 1px solid var(--border-dim); }
-  .session-badge { position: absolute; bottom: -4px; right: -6px; background: var(--accent-muted); border: 1px solid var(--accent-dim); color: var(--accent-fg); font-family: var(--font-ui); font-size: 9px; font-weight: 600; padding: 1px 4px; border-radius: 6px; line-height: 1.4; pointer-events: none; }
-  .info { flex: 1; display: flex; flex-direction: column; gap: 3px; overflow: hidden; min-width: 0; }
-  .manga-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .chapter-name { font-size: var(--text-sm); color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
-  .chapter-range { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }
-  .range-sep { color: var(--text-faint); font-size: 10px; flex-shrink: 0; }
-  .page-badge { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); flex-shrink: 0; }
-  .time { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); flex-shrink: 0; white-space: nowrap; }
-  :global(.play-icon) { color: var(--text-faint); flex-shrink: 0; opacity: 0; transition: opacity var(--t-base); }
-  .empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); }
-  :global(.empty-icon) { color: var(--text-faint); }
-  .empty-text { font-size: var(--text-base); color: var(--text-muted); }
-  .empty-hint { font-size: var(--text-sm); color: var(--text-faint); }
-  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
-</style>

src/components/pages/Home.svelte

@@ -22,7 +22,7 @@
   function formatReadTime(mins: number): string {
     if (mins < 1)   return `${Math.round(mins * 60)}s`;
     if (mins < 60)  return `${Math.round(mins)}m`;
-    const h = Math.floor(mins / 60), r = mins % 60;
+    const h = Math.floor(mins / 60), r = Math.round(mins % 60);
     if (h < 24) return r === 0 ? `${h}h` : `${h}h ${r}m`;
     const d = Math.floor(h / 24), rh = h % 24;
     return rh === 0 ? `${d}d` : `${d}d ${rh}h`;
@@ -35,11 +35,28 @@
   let loadingLibrary: boolean  = $state(true);
 
   onMount(() => {
+    loadLibrary();
+  });
+
+  function loadLibrary() {
     cache.get(CACHE_KEYS.LIBRARY, () =>
       gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY).then(d => d.mangas.nodes)
     ).then(m => { libraryManga = m; fetchExtraCompleted(m); })
      .catch(console.error)
      .finally(() => loadingLibrary = false);
+  }
+
+  // Re-fetch library and reset hero chapters whenever the reader closes,
+  // so the hero reflects the latest-read chapter immediately.
+  $effect(() => {
+    const sessionId = store.readerSessionId;
+    if (sessionId === 0) return; // skip initial mount — onMount handles that
+    cache.clear(CACHE_KEYS.LIBRARY);
+    loadingLibrary = true;
+    heroChapters    = [];
+    heroAllChapters = [];
+    heroChaptersFor = null;
+    loadLibrary();
   });
 
   async function fetchExtraCompleted(library: Manga[]) {
@@ -92,9 +109,9 @@
   const heroEntry   = $derived(activeSlot?.kind === "continue" ? activeSlot.entry : null);
   const heroMangaId = $derived(heroEntry?.mangaId ?? heroManga?.id ?? null);
 
-  function cycleNext() { activeIdx = (activeIdx + 1) % TOTAL_SLOTS; heroChapters = []; }
+  function cycleNext() { activeIdx = (activeIdx + 1) % TOTAL_SLOTS; heroChapters = []; heroAllChapters = []; }
-  function cyclePrev() { activeIdx = (activeIdx - 1 + TOTAL_SLOTS) % TOTAL_SLOTS; heroChapters = []; }
+  function cyclePrev() { activeIdx = (activeIdx - 1 + TOTAL_SLOTS) % TOTAL_SLOTS; heroChapters = []; heroAllChapters = []; }
-  function goToSlot(i: number) { if (i !== activeIdx) { activeIdx = i; heroChapters = []; } }
+  function goToSlot(i: number) { if (i !== activeIdx) { activeIdx = i; heroChapters = []; heroAllChapters = []; } }
 
   function onKey(e: KeyboardEvent) {
     if (e.target !== document.body && !(e.target instanceof HTMLElement && e.target.closest(".hero-stage"))) return;
@@ -108,6 +125,7 @@
 
   let heroStageH = $state(300);
   let heroChapters:    Chapter[] = $state([]);
+  let heroAllChapters: Chapter[] = $state([]);
   let loadingHeroChapters = $state(false);
   let heroChaptersFor: number | null = null;
 
@@ -120,14 +138,16 @@
     heroChaptersFor = mangaId;
     loadingHeroChapters = true;
     heroChapters = [];
+    heroAllChapters = [];
     try {
       const d = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId });
       if (heroChaptersFor !== mangaId) return;
       const all = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
+      heroAllChapters = all;
       const lastReadIdx = heroEntry ? all.findIndex(c => c.id === heroEntry!.chapterId) : all.findLastIndex(c => c.isRead);
       const startIdx = Math.max(0, lastReadIdx);
       heroChapters = all.slice(startIdx, startIdx + 5);
-    } catch { heroChapters = []; }
+    } catch { heroChapters = []; heroAllChapters = []; }
     finally { loadingHeroChapters = false; }
   }
 
@@ -137,7 +157,7 @@
     if (!heroMangaId) return;
     resuming = true;
     try {
-      let all = heroChapters;
+      let all = heroAllChapters;
       if (!all.length) {
         const d = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: heroMangaId });
         all = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
@@ -150,8 +170,8 @@
   async function resumeActive() {
     if (!heroEntry && heroManga) { store.activeManga = heroManga; return; }
     if (!heroEntry) return;
-    const target = heroChapters.find(c => c.id === heroEntry!.chapterId) ?? heroChapters[0];
+    const target = heroAllChapters.find(c => c.id === heroEntry!.chapterId) ?? heroAllChapters[0];
-    if (target && heroChapters.length) { await openChapter(target); return; }
+    if (target && heroAllChapters.length) { await openChapter(target); return; }
     resuming = true;
     try {
       const d = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: heroEntry.mangaId });
@@ -189,7 +209,7 @@
   const completedIds   = $derived(store.settings.folders.find(f => f.id === COMPLETED_FOLDER_ID)?.mangaIds ?? []);
   const completedPool  = $derived([...libraryManga, ...extraManga.filter(m => !libraryManga.some(l => l.id === m.id))]);
   const completedManga = $derived(completedIds.length > 0 ? completedPool.filter(m => completedIds.includes(m.id)).slice(0, 20) : []);
-  const recentHistory  = $derived(store.history.slice(0, 8));
+  const recentHistory  = $derived(store.history.slice(0, 6));
   const stats          = $derived(store.readingStats);
 
   function handleRowWheel(e: WheelEvent) {
@@ -428,7 +448,9 @@
 </div>
 
 {#if pickerOpen}
-  <div class="picker-backdrop" onclick={(e) => { if (e.target === e.currentTarget) closePicker(); }}>
+  <div class="picker-backdrop" role="presentation"
+    onclick={(e) => { if (e.target === e.currentTarget) closePicker(); }}
+    onkeydown={(e) => { if (e.key === "Escape") closePicker(); }}>
     <div class="picker-modal">
       <div class="picker-header">
         <span class="picker-title">Pin manga — slot {(pickerSlotIndex ?? 0) + 1}</span>

src/components/pages/Library.svelte

@@ -238,6 +238,7 @@
       </div>
     </div>
 
+    <div class="content">
     {#if loading}
       <div class="grid">
         {#each Array(12) as _}
@@ -275,6 +276,7 @@
         </div>
       {/if}
     {/if}
+    </div><!-- .content -->
   {/if}
 </div>
 
@@ -286,11 +288,12 @@
 {/if}
 
 <style>
-  .root { position: relative; padding: var(--sp-5) var(--sp-6); overflow-y: auto; height: 100%; animation: fadeIn 0.14s ease both; will-change: scroll-position; -webkit-overflow-scrolling: touch; }
+  .root { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
+  .content { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-6) var(--sp-6); will-change: scroll-position; -webkit-overflow-scrolling: touch; }
   .branches { position: absolute; top: 0; right: 0; width: 400px; height: 600px; pointer-events: none; z-index: 0; }
   .branches :global(.anim-branch) { stroke-dasharray: 60; stroke-dashoffset: 60; animation: branchGrow 2.4s ease forwards; }
   @keyframes branchGrow { to { stroke-dashoffset: 0; } }
-  .header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); gap: var(--sp-4); flex-wrap: wrap; }
+  .header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); gap: var(--sp-4); flex-wrap: wrap; flex-shrink: 0; }
   .header-left { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
   .heading { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; flex-shrink: 0; }
   .tabs { display: flex; gap: 2px; background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 2px; }

src/components/pages/MigrateModal.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { X, MagnifyingGlass, CircleNotch, ArrowRight, Check, Warning, Sparkle } from "phosphor-svelte";
+  import { untrack } from "svelte";
   import { gql, thumbUrl } from "../../lib/client";
   import { GET_SOURCES, FETCH_SOURCE_MANGA, FETCH_CHAPTERS, UPDATE_MANGA, UPDATE_CHAPTERS_PROGRESS } from "../../lib/queries";
   import type { Manga, Source, Chapter } from "../../lib/types";
@@ -36,8 +37,7 @@
   let sources: Source[]     = $state([]);
   let loadingSources        = $state(true);
   let selectedSource: Source | null = $state(null);
-  const _initialTitle               = manga.title;
+  let query                         = $state(untrack(() => manga.title));
-  let query                         = $state(_initialTitle);
   let results: { manga: Manga; similarity: number }[] = $state([]);
   let searching             = $state(false);
   let selectedMatch: Match | null = $state(null);
@@ -222,7 +222,7 @@
               <MagnifyingGlass size={13} weight="light" class="search-icon" />
                 <input class="search-input" bind:value={query}
                 onkeydown={(e) => e.key === "Enter" && selectedSource && searchSource(selectedSource, query)}
-                placeholder="Search title…" autofocus />
+                placeholder="Search title…" use:focusOnMount />
             </div>
             <button class="search-btn"
               onclick={() => selectedSource && searchSource(selectedSource, query)}
@@ -471,3 +471,7 @@
 
   @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
 </style>
+
+<script module>
+  function focusOnMount(node: HTMLElement) { node.focus(); }
+</script>

src/components/pages/Search.svelte

@@ -83,13 +83,8 @@
   });
 
   loadingSources = true;
-  cache.get(
+  gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
-    CACHE_KEYS.SOURCES,
+    .then((d) => { allSources = d.sources.nodes.filter((src: Source) => src.id !== "0"); })
-    () => gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
-             .then((d) => d.sources.nodes.filter((src: Source) => src.id !== "0")),
-    Infinity,
-  )
-    .then((srcs: Source[]) => { allSources = srcs; })
     .catch(console.error)
     .finally(() => { loadingSources = false; });
 
@@ -383,11 +378,40 @@
   let src_hasNextPage                  = $state(false);
   let src_currentPage                  = $state(1);
   let src_abortCtrl: AbortController | null = null;
+  let src_langPocketOpen = $state(true);
+  let src_expandedGroups: Set<string> = $state(new Set());
+
+  // Group sources by displayName — sources with same name but different langs get grouped
+  interface SourceGroup {
+    name:     string;
+    iconUrl:  string;
+    sources:  Source[];
+    isNsfw:   boolean;
+  }
 
   const src_visibleSources = $derived(src_selectedLang === "all"
     ? allSources
     : allSources.filter((s) => s.lang === src_selectedLang));
 
+  const src_groupedSources = $derived.by(() => {
+    const filtered = src_visibleSources;
+    const map = new Map<string, SourceGroup>();
+    for (const src of filtered) {
+      const key = src.displayName;
+      if (!map.has(key)) {
+        map.set(key, { name: src.displayName, iconUrl: src.iconUrl, sources: [], isNsfw: src.isNsfw });
+      }
+      map.get(key)!.sources.push(src);
+    }
+    return Array.from(map.values());
+  });
+
+  function srcToggleGroup(name: string) {
+    const next = new Set(src_expandedGroups);
+    if (next.has(name)) next.delete(name); else next.add(name);
+    src_expandedGroups = next;
+  }
+
   async function srcFetchBrowse(src: Source, type: "POPULAR" | "SEARCH", q?: string, page = 1) {
     src_abortCtrl?.abort();
     const ctrl = new AbortController();
@@ -485,7 +509,7 @@
         <input
           bind:this={kw_inputEl}
           bind:value={kw_query}
-          autofocus
+          use:focusOnMount
           class="searchInput"
           placeholder="Search across sources…"
           onkeydown={(e) => e.key === "Enter" && kwDoSearch(kw_query)}
@@ -843,8 +867,16 @@
     <div class="splitRoot">
       
       <div class="splitSidebar">
-        {#if hasMultipleLangs}
+        <button class="langPocketToggle" onclick={() => (src_langPocketOpen = !src_langPocketOpen)}>
-          <div class="langFilterRow">
+            <span class="langPocketLabel">Languages</span>
+            <svg width="9" height="9" viewBox="0 0 256 256" fill="currentColor"
+              style="transition: transform 0.2s ease; transform: rotate({src_langPocketOpen ? 180 : 0}deg)"
+              aria-hidden="true">
+              <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/>
+            </svg>
+          </button>
+          {#if src_langPocketOpen}
+            <div class="langPocket">
               {#each ["all", ...availableLangs] as lang (lang)}
                 <button
                   class="langChip"
@@ -865,23 +897,52 @@
           </div>
         {:else}
           <div class="splitList">
-            {#each src_visibleSources as src (src.id)}
+            {#each src_groupedSources as group (group.name)}
+              {#if group.sources.length === 1}
                 <button
                   class="splitItem splitItemSource"
+                  class:splitItemActive={src_activeSource?.id === group.sources[0].id}
+                  onclick={() => srcSelectSource(group.sources[0])}
+                >
+                  <img src={thumbUrl(group.iconUrl)} alt="" class="splitSourceIcon"
+                    onerror={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
+                  <span class="splitItemLabel">{group.name}</span>
+                  <span class="sourceLang" style="margin-left:auto;margin-right:4px">{group.sources[0].lang.toUpperCase()}</span>
+                  {#if group.isNsfw}<span class="nsfwBadge">18+</span>{/if}
+                </button>
+              {:else}
+                <button
+                  class="splitItem splitItemSource splitItemGroup"
+                  class:splitItemGroupOpen={src_expandedGroups.has(group.name)}
+                  onclick={() => srcToggleGroup(group.name)}
+                >
+                  <img src={thumbUrl(group.iconUrl)} alt="" class="splitSourceIcon"
+                    onerror={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
+                  <span class="splitItemLabel">{group.name}</span>
+                  <span class="groupLangCount">{group.sources.length}</span>
+                  <svg width="8" height="8" viewBox="0 0 256 256" fill="currentColor"
+                    class="groupChevron"
+                    style="transform: rotate({src_expandedGroups.has(group.name) ? 180 : 0}deg)"
+                    aria-hidden="true">
+                    <path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/>
+                  </svg>
+                </button>
+                {#if src_expandedGroups.has(group.name)}
+                  {#each group.sources as src (src.id)}
+                    <button
+                      class="splitItem splitItemSource splitItemLangOption"
                       class:splitItemActive={src_activeSource?.id === src.id}
                       onclick={() => srcSelectSource(src)}
                     >
-                <img
+                      <span class="langOptionDot"></span>
-                  src={thumbUrl(src.iconUrl)}
+                      <span class="splitItemLabel">{src.lang.toUpperCase()}</span>
-                  alt=""
-                  class="splitSourceIcon"
-                  onerror={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
-                />
-                <span class="splitItemLabel">{src.displayName}</span>
                       {#if src.isNsfw}<span class="nsfwBadge">18+</span>{/if}
                     </button>
                   {/each}
-            {#if src_visibleSources.length === 0}
+                {/if}
+              {/if}
+            {/each}
+            {#if src_groupedSources.length === 0}
               <p class="splitEmpty">No sources for this language</p>
             {/if}
           </div>
@@ -1016,7 +1077,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--sp-5) var(--sp-6) var(--sp-3);
+    padding: var(--sp-4) var(--sp-6);
     flex-shrink: 0;
     border-bottom: 1px solid var(--border-dim);
   }
@@ -1761,15 +1822,6 @@
 
   /* ── Source tab: lang filter + browse bar ──────────────────────────────── */
 
-  .langFilterRow {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--sp-1);
-    padding: var(--sp-2) var(--sp-3);
-    border-bottom: 1px solid var(--border-dim);
-    flex-shrink: 0;
-  }
-
   .sourceBrowseBar {
     display: flex;
     align-items: center;
@@ -1793,4 +1845,83 @@
     margin-left: auto;
     flex-shrink: 0;
   }
+
+  /* ── Language pocket ───────────────────────────────────────────────────── */
+
+  .langPocketToggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--sp-2) var(--sp-3);
+    border-bottom: 1px solid var(--border-dim);
+    border-top: none;
+    border-left: none;
+    border-right: none;
+    background: none;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background var(--t-fast);
+  }
+  .langPocketToggle:hover { background: var(--bg-raised); }
+
+  .langPocketLabel {
+    font-family: var(--font-ui);
+    font-size: var(--text-2xs);
+    color: var(--text-faint);
+    letter-spacing: var(--tracking-wider);
+    text-transform: uppercase;
+  }
+
+  .langPocket {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--sp-1);
+    padding: var(--sp-2) var(--sp-3);
+    border-bottom: 1px solid var(--border-dim);
+    flex-shrink: 0;
+    animation: fadeIn 0.1s ease both;
+  }
+
+  /* ── Source group (multi-lang) ─────────────────────────────────────────── */
+
+  .splitItemGroup { }
+  .splitItemGroupOpen { background: var(--bg-raised); }
+
+  .groupLangCount {
+    font-family: var(--font-ui);
+    font-size: var(--text-2xs);
+    color: var(--text-faint);
+    background: var(--bg-overlay);
+    border: 1px solid var(--border-dim);
+    border-radius: var(--radius-sm);
+    padding: 0px 5px;
+    flex-shrink: 0;
+    letter-spacing: var(--tracking-wide);
+  }
+
+  .groupChevron {
+    color: var(--text-faint);
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+  }
+
+  .splitItemLangOption {
+    padding-left: var(--sp-5);
+    background: var(--bg-overlay);
+  }
+  .splitItemLangOption:hover { background: var(--bg-raised); }
+
+  .langOptionDot {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--border-strong);
+    flex-shrink: 0;
+  }
+  .splitItemActive .langOptionDot { background: var(--accent-fg); }
 </style>
+
+<script module>
+  function focusOnMount(node: HTMLElement) { node.focus(); }
+</script>

src/components/pages/SeriesDetail.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { onMount, untrack } from "svelte";
-  import { ArrowLeft, BookmarkSimple, Download, CheckCircle, Circle, ArrowSquareOut, CircleNotch, Play, SortAscending, SortDescending, CaretDown, ArrowsClockwise, List, SquaresFour, FolderSimplePlus, Trash, DownloadSimple, X } from "phosphor-svelte";
+  import { ArrowLeft, BookmarkSimple, Download, CheckCircle, Circle, ArrowSquareOut, CircleNotch, Play, SortAscending, SortDescending, CaretDown, ArrowsClockwise, List, SquaresFour, FolderSimplePlus, Trash, DownloadSimple, X, LinkSimpleHorizontalBreak, ChartLineUp } from "phosphor-svelte";
   import { gql, thumbUrl } from "../../lib/client";
-  import { GET_MANGA, GET_CHAPTERS, FETCH_CHAPTERS, ENQUEUE_DOWNLOAD, UPDATE_MANGA, MARK_CHAPTER_READ, MARK_CHAPTERS_READ, DELETE_DOWNLOADED_CHAPTERS, ENQUEUE_CHAPTERS_DOWNLOAD } from "../../lib/queries";
+  import { GET_MANGA, GET_CHAPTERS, FETCH_CHAPTERS, ENQUEUE_DOWNLOAD, UPDATE_MANGA, MARK_CHAPTER_READ, MARK_CHAPTERS_READ, DELETE_DOWNLOADED_CHAPTERS, ENQUEUE_CHAPTERS_DOWNLOAD, GET_ALL_MANGA } from "../../lib/queries";
   import { cache, CACHE_KEYS, recordSourceAccess } from "../../lib/cache";
-  import { store, addToast, updateSettings, addFolder, assignMangaToFolder, removeMangaFromFolder, getMangaFolders, openReader, checkAndMarkCompleted, setActiveManga, setGenreFilter, setNavPage} from "../../store/state.svelte";
+  import { store, addToast, updateSettings, addFolder, assignMangaToFolder, removeMangaFromFolder, getMangaFolders, openReader, checkAndMarkCompleted, setActiveManga, setGenreFilter, setNavPage, linkManga, unlinkManga } from "../../store/state.svelte";
   import type { Manga, Chapter } from "../../lib/types";
   import ContextMenu, { type MenuEntry } from "../shared/ContextMenu.svelte";
   import MigrateModal from "./MigrateModal.svelte";
+  import TrackingPanel from "../shared/TrackingPanel.svelte";
 
   const CHAPTERS_PER_PAGE = 25;
   const MANGA_TTL_MS      = 5 * 60 * 1000;
@@ -31,7 +32,6 @@
   let viewMode: "list" | "grid"         = $state("list");
   let deletingAll:     boolean          = $state(false);
   let refreshing:      boolean          = $state(false);
-  let descExpanded:   boolean          = $state(false);
   let genresExpanded:  boolean          = $state(false);
   let folderPickerOpen: boolean         = $state(false);
   let folderCreating:  boolean          = $state(false);
@@ -43,6 +43,15 @@
   let dlDropRef:       HTMLDivElement | undefined = $state();
   let folderPickerRef: HTMLDivElement | undefined = $state();
 
+  // Series link state
+  let linkPickerOpen:   boolean   = $state(false);
+  let linkSearch:       string    = $state("");
+  let allMangaForLink:  Manga[]   = $state([]);
+  let loadingLinkList:  boolean   = $state(false);
+
+  // Tracking modal
+  let trackingOpen: boolean = $state(false);
+
   let mangaAbort:  AbortController | null = null;
   let chapterAbort: AbortController | null = null;
   let loadingFor:  number | null = null;
@@ -60,7 +69,20 @@
   }
 
   const sortDir        = $derived(store.settings.chapterSortDir);
-  const sortedChapters = $derived(sortDir === "desc" ? [...chapters].reverse() : [...chapters]);
+  const sortMode       = $derived(store.settings.chapterSortMode ?? "source");
+  let sortMenuOpen     = $state(false);
+
+  const sortedChapters = $derived.by(() => {
+    const base = [...chapters];
+    if (sortMode === "chapterNumber") {
+      base.sort((a, b) => a.chapterNumber - b.chapterNumber);
+    } else if (sortMode === "uploadDate") {
+      base.sort((a, b) => Number(a.uploadDate ?? 0) - Number(b.uploadDate ?? 0));
+    } else {
+      base.sort((a, b) => a.sourceOrder - b.sourceOrder);
+    }
+    return sortDir === "desc" ? base.reverse() : base;
+  });
   const totalPages     = $derived(Math.ceil(sortedChapters.length / CHAPTERS_PER_PAGE));
   const pageChapters   = $derived(sortedChapters.slice((chapterPage - 1) * CHAPTERS_PER_PAGE, chapterPage * CHAPTERS_PER_PAGE));
   const readCount      = $derived(chapters.filter(c => c.isRead).length);
@@ -239,8 +261,8 @@
     return [
       { label: ch.isRead ? "Mark as unread" : "Mark as read", icon: ch.isRead ? Circle : CheckCircle, onClick: () => markRead(ch.id, !ch.isRead) },
       { separator: true },
-      { label: "Mark above as read",   icon: CheckCircle, onClick: () => markAboveRead(idx),   disabled: idx === 0    || above.filter(c => !c.isRead).length === 0 },
+      { label: "Mark above as read",   icon: CheckCircle, onClick: () => markAboveRead(idx),   disabled: above.filter(c => !c.isRead).length === 0 },
-      { label: "Mark above as unread", icon: Circle,      onClick: () => markAboveUnread(idx), disabled: idx === 0    || above.filter(c => c.isRead).length === 0 },
+      { label: "Mark above as unread", icon: Circle,      onClick: () => markAboveUnread(idx), disabled: above.filter(c => c.isRead).length === 0 },
       { separator: true },
       { label: "Mark below as read",   icon: CheckCircle, onClick: () => markBelowRead(idx),   disabled: idx === last || below.filter(c => !c.isRead).length === 0 },
       { label: "Mark below as unread", icon: Circle,      onClick: () => markBelowUnread(idx), disabled: idx === last || below.filter(c => c.isRead).length === 0 },
@@ -287,20 +309,57 @@
   }
 
   onMount(() => () => { mangaAbort?.abort(); chapterAbort?.abort(); });
+
+  // ── Series link ────────────────────────────────────────────────────────────
+
+  const linkedIds = $derived(
+    store.activeManga ? (store.settings.mangaLinks?.[store.activeManga.id] ?? []) : []
+  );
+
+  const linkPickerResults = $derived.by(() => {
+    const id       = store.activeManga?.id;
+    const others   = allMangaForLink.filter(m => m.id !== id);
+    const q        = linkSearch.trim().toLowerCase();
+    const filtered = q ? others.filter(m => m.title.toLowerCase().includes(q)) : others;
+    const linked   = filtered.filter(m => linkedIds.includes(m.id));
+    const rest     = filtered.filter(m => !linkedIds.includes(m.id)).slice(0, 30);
+    return [...linked, ...rest];
+  });
+
+  async function openLinkPicker() {
+    linkPickerOpen = true; linkSearch = "";
+    if (allMangaForLink.length) return;
+    loadingLinkList = true;
+    gql<{ mangas: { nodes: Manga[] } }>(GET_ALL_MANGA)
+      .then(d => { allMangaForLink = d.mangas.nodes; })
+      .catch(console.error)
+      .finally(() => { loadingLinkList = false; });
+  }
+
+  function closeLinkPicker() { linkPickerOpen = false; linkSearch = ""; }
+
+  function handleLink(other: Manga) {
+    if (!store.activeManga) return;
+    if (linkedIds.includes(other.id)) unlinkManga(store.activeManga.id, other.id);
+    else linkManga(store.activeManga.id, other.id);
+  }
 </script>
 
 {#if store.activeManga}
 <div class="root" role="presentation" oncontextmenu={(e) => e.preventDefault()}>
 
+  <!-- ── Sidebar ────────────────────────────────────────────────────────── -->
   <div class="sidebar">
     <button class="back" onclick={() => setActiveManga(null)}>
       <ArrowLeft size={13} weight="light" /> Back
     </button>
 
+    <!-- Zone 1: Cover -->
     <div class="cover-wrap">
       <img src={thumbUrl(store.activeManga.thumbnailUrl)} alt={store.activeManga.title} class="cover" />
     </div>
 
+    <!-- Zone 2: Meta -->
     {#if loadingManga}
       <div class="meta-skeleton">
         <div class="skeleton sk-line" style="width:90%;height:14px"></div>
@@ -317,37 +376,32 @@
         {/if}
         {#if manga?.genre?.length}
           <div class="genres">
-            {#each (genresExpanded ? manga.genre : manga.genre.slice(0, 5)) as g}
+            {#each (genresExpanded ? manga.genre : manga.genre.slice(0, 3)) as g}
               <button class="genre" onclick={() => { setGenreFilter(g); setNavPage("explore"); setActiveManga(null); }}>{g}</button>
             {/each}
-            {#if manga.genre.length > 5}
+            {#if manga.genre.length > 3}
               <button class="genre-toggle" onclick={() => genresExpanded = !genresExpanded}>
-                {genresExpanded ? "less" : `+${manga.genre.length - 5}`}
+                {genresExpanded ? "less" : `+${manga.genre.length - 3}`}
               </button>
             {/if}
           </div>
         {/if}
         {#if manga?.description}
-          <div class="desc-wrap">
+          <p class="desc">{manga.description}</p>
-            <p class="desc" class:expanded={descExpanded}>{manga.description}</p>
-            {#if manga.description.length > 120}
-              <button class="desc-toggle" onclick={() => descExpanded = !descExpanded}>{descExpanded ? "Less" : "More"}</button>
-            {/if}
-          </div>
         {/if}
       </div>
     {/if}
 
-    {#if totalCount > 0}
+    <!-- Zone 3: Primary CTA + library action -->
-      <div class="progress-section">
+    <div class="cta-section">
-        <div class="progress-header">
+      {#if continueChapter}
-          <span class="progress-label">{readCount} / {totalCount} read</span>
+        <button class="read-btn" onclick={() => openReader(continueChapter!.chapter, sortedChapters)}>
-          <span class="progress-pct">{Math.round(progressPct)}%</span>
+          <Play size={12} weight="fill" />
-        </div>
+          {continueChapter.type === "continue"
-        <div class="progress-track"><div class="progress-fill" style="width:{progressPct}%"></div></div>
+            ? `Continue · Ch.${continueChapter.chapter.chapterNumber}${(continueChapter.chapter.lastPageRead ?? 0) > 0 ? ` p.${continueChapter.chapter.lastPageRead}` : ""}`
-      </div>
+            : continueChapter.type === "reread" ? "Read again" : "Start reading"}
+        </button>
       {/if}
-
       <div class="actions">
         <button class="library-btn" class:active={manga?.inLibrary} onclick={toggleLibrary} disabled={togglingLibrary || loadingManga}>
           <BookmarkSimple size={13} weight={manga?.inLibrary ? "fill" : "light"} />
@@ -359,18 +413,20 @@
           </a>
         {/if}
       </div>
+    </div>
 
-    {#if continueChapter}
+    <!-- Zone 4: Progress -->
-      <button class="read-btn" onclick={() => openReader(continueChapter!.chapter, sortedChapters)}>
+    {#if totalCount > 0}
-        <Play size={12} weight="fill" />
+      <div class="progress-section">
-        {continueChapter.type === "continue"
+        <div class="progress-header">
-          ? `Continue · Ch.${continueChapter.chapter.chapterNumber}${(continueChapter.chapter.lastPageRead ?? 0) > 0 ? ` p.${continueChapter.chapter.lastPageRead}` : ""}`
+          <span class="progress-label">{readCount} / {totalCount} read</span>
-          : continueChapter.type === "reread" ? "Read again" : "Start reading"}
+          <span class="progress-pct">{Math.round(progressPct)}%</span>
-      </button>
+        </div>
+        <div class="progress-track"><div class="progress-fill" style="width:{progressPct}%"></div></div>
+      </div>
     {/if}
 
-    <p class="chapter-count">{totalCount} {totalCount === 1 ? "chapter" : "chapters"}{readCount > 0 ? ` · ${readCount} read` : ""}</p>
+    <!-- Zone 5: Details accordion (source info + all secondary actions) -->
-
     {#if !loadingManga && manga?.source}
       <div class="details-section">
         <button class="details-toggle" onclick={() => detailsOpen = !detailsOpen}>
@@ -383,28 +439,64 @@
             {#if manga.status}<div class="detail-row"><span class="detail-key">Status</span><span class="detail-val">{statusLabel}</span></div>{/if}
             {#if manga.author}<div class="detail-row"><span class="detail-key">Author</span><span class="detail-val">{manga.author}</span></div>{/if}
             {#if manga.artist && manga.artist !== manga.author}<div class="detail-row"><span class="detail-key">Artist</span><span class="detail-val">{manga.artist}</span></div>{/if}
-            <button class="migrate-btn" onclick={() => migrateOpen = true}>
+
-              <ArrowsClockwise size={12} weight="light" /> Switch source
+            <div class="detail-actions">
+              <button class="detail-action-btn" onclick={() => migrateOpen = true}>
+                <ArrowsClockwise size={12} weight="light" /> Switch Source
+              </button>
+              <button
+                class="detail-action-btn"
+                class:detail-action-active={linkedIds.length > 0}
+                onclick={openLinkPicker}
+              >
+                <LinkSimpleHorizontalBreak size={12} weight={linkedIds.length > 0 ? "fill" : "light"} />
+                Series Link{linkedIds.length > 0 ? ` (${linkedIds.length})` : ""}
+              </button>
+              <button
+                class="detail-action-btn"
+                onclick={() => trackingOpen = true}
+              >
+                <ChartLineUp size={12} weight="light" /> Tracking
               </button>
               {#if downloadedCount > 0}
-              <button class="delete-all-btn" onclick={deleteAllDownloads} disabled={deletingAll}>
+                <button class="detail-action-btn detail-action-danger" onclick={deleteAllDownloads} disabled={deletingAll}>
-                <Trash size={12} weight="light" /> {deletingAll ? "Deleting…" : `Delete downloads (${downloadedCount})`}
+                  <Trash size={12} weight="light" /> {deletingAll ? "Deleting…" : `Delete Downloads (${downloadedCount})`}
                 </button>
               {/if}
             </div>
+          </div>
         {/if}
       </div>
     {/if}
   </div>
 
+  <!-- ── Chapter list ───────────────────────────────────────────────────── -->
   <div class="list-wrap">
     <div class="list-header">
       <div class="list-header-left">
-        <button class="sort-btn" onclick={() => { updateSettings({ chapterSortDir: sortDir === "desc" ? "asc" : "desc" }); chapterPage = 1; }}>
+        <div class="sort-wrap">
+          <button class="sort-btn" onclick={() => sortMenuOpen = !sortMenuOpen}>
             {#if sortDir === "desc"}<SortDescending size={14} weight="light" />{:else}<SortAscending size={14} weight="light" />{/if}
-          {sortDir === "desc" ? "Newest first" : "Oldest first"}
+            {{ source: "Source order", chapterNumber: "Ch. number", uploadDate: "Upload date" }[sortMode]}
+            <CaretDown size={10} weight="light" />
           </button>
-        <button class="icon-btn" class:active={viewMode === "grid"} onclick={() => viewMode = viewMode === "list" ? "grid" : "list"}>
+          {#if sortMenuOpen}
+            <div class="sort-menu" role="presentation" onmouseleave={() => sortMenuOpen = false}>
+              {#each [["source","Source order"],["chapterNumber","Chapter number"],["uploadDate","Upload date"]] as [val, label]}
+                <button class="sort-option" class:active={sortMode === val}
+                  onclick={() => { updateSettings({ chapterSortMode: val as any }); chapterPage = 1; sortMenuOpen = false; }}>
+                  {label}
+                </button>
+              {/each}
+              <div class="sort-divider"></div>
+              <button class="sort-option" onclick={() => { updateSettings({ chapterSortDir: sortDir === "desc" ? "asc" : "desc" }); chapterPage = 1; sortMenuOpen = false; }}>
+                {sortDir === "desc" ? "↑ Ascending" : "↓ Descending"}
+              </button>
+            </div>
+          {/if}
+        </div>
+        <!-- View toggle: icon reflects current state -->
+        <button class="icon-btn" class:active={viewMode === "grid"} onclick={() => viewMode = viewMode === "list" ? "grid" : "list"} title={viewMode === "list" ? "Grid view" : "List view"}>
           {#if viewMode === "list"}<SquaresFour size={14} weight="light" />{:else}<List size={14} weight="light" />{/if}
         </button>
       </div>
@@ -413,6 +505,7 @@
           <ArrowsClockwise size={14} weight="light" class={refreshing ? "anim-spin" : ""} />
         </button>
 
+        <!-- Folder picker -->
         <div class="fp-wrap" bind:this={folderPickerRef}>
           <button class="icon-btn" class:active={hasFolders} onclick={() => folderPickerOpen = !folderPickerOpen}>
             <FolderSimplePlus size={14} weight={hasFolders ? "fill" : "light"} />
@@ -433,7 +526,7 @@
               {#if folderCreating}
                 <div class="fp-create">
                   <input class="fp-input" placeholder="Folder name…" bind:value={folderNewName}
-                    onkeydown={(e) => { if (e.key === "Enter") createFolder(); if (e.key === "Escape") { folderCreating = false; folderNewName = ""; } }} autofocus />
+                    onkeydown={(e) => { if (e.key === "Enter") createFolder(); if (e.key === "Escape") { folderCreating = false; folderNewName = ""; } }} use:focusOnMount />
                   <button class="fp-confirm" onclick={createFolder} disabled={!folderNewName.trim()}>Add</button>
                   <button class="fp-cancel" onclick={() => { folderCreating = false; folderNewName = ""; }}>
                     <X size={12} weight="light" />
@@ -446,32 +539,7 @@
           {/if}
         </div>
 
-        {#if chapters.length > 1}
+        <!-- Download dropdown -->
-          <div class="jump-wrap">
-            {#if !jumpOpen}
-              <button class="jump-toggle" onclick={() => { jumpOpen = true; jumpInput = ""; }}>Go to…</button>
-            {:else}
-              <div class="jump-row">
-                <input class="jump-input" type="text" placeholder="Ch. #" bind:value={jumpInput} autofocus
-                  onkeydown={(e) => {
-                    if (e.key === "Escape") { jumpOpen = false; return; }
-                    if (e.key === "Enter") {
-                      const num = parseFloat(jumpInput);
-                      if (!isNaN(num)) {
-                        const target = sortedChapters.find(c => c.chapterNumber === num)
-                          ?? sortedChapters.reduce((best, c) => Math.abs(c.chapterNumber - num) < Math.abs(best.chapterNumber - num) ? c : best, sortedChapters[0]);
-                        if (target) openReader(target, sortedChapters);
-                      }
-                      jumpOpen = false;
-                    }
-                  }}
-                />
-                <button class="jump-cancel" onclick={() => jumpOpen = false}>✕</button>
-              </div>
-            {/if}
-          </div>
-        {/if}
-
         {#if chapters.length > 0}
           <div class="dl-wrap" bind:this={dlDropRef}>
             <button class="icon-btn" onclick={() => dlOpen = !dlOpen}>
@@ -501,7 +569,7 @@
                 {:else}
                   <div class="dl-range-row">
                     <button class="dl-range-back" onclick={() => showRange = false}>‹</button>
-                    <input class="dl-range-input" placeholder="From" bind:value={rangeFrom} onkeydown={(e) => e.key === "Enter" && enqueueRange()} autofocus />
+                    <input class="dl-range-input" placeholder="From" bind:value={rangeFrom} onkeydown={(e) => e.key === "Enter" && enqueueRange()} use:focusOnMount />
                     <span class="dl-range-sep">–</span>
                     <input class="dl-range-input" placeholder="To" bind:value={rangeTo} onkeydown={(e) => e.key === "Enter" && enqueueRange()} />
                     <button class="dl-range-go" disabled={!rangeFrom.trim() || !rangeTo.trim()} onclick={enqueueRange}>Go</button>
@@ -546,7 +614,7 @@
       {:else if viewMode === "grid"}
         {#each sortedChapters as ch, i}
           {@const inProgress = !ch.isRead && (ch.lastPageRead ?? 0) > 0}
-          <button class="grid-cell" class:read={ch.isRead} class:in-progress={inProgress} class:bookmarked={ch.isBookmarked}
+          <button class="grid-cell" class:read={ch.isRead} class:in-progress={inProgress}
             onclick={() => openReader(ch, sortedChapters)}
             oncontextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: i }; }}
             title={ch.name}>
@@ -607,16 +675,69 @@
     onMigrated={(newManga) => { setActiveManga(newManga); migrateOpen = false; cache.clear(CACHE_KEYS.LIBRARY); }}
   />
 {/if}
+
+{#if trackingOpen && store.activeManga}
+  <TrackingPanel
+    mangaId={store.activeManga.id}
+    mangaTitle={store.activeManga.title}
+    onClose={() => trackingOpen = false}
+  />
+{/if}
+
+{#if linkPickerOpen}
+  <div
+    class="link-backdrop"
+    role="presentation"
+    onclick={(e) => { if (e.target === e.currentTarget) closeLinkPicker(); }}
+    onkeydown={(e) => e.key === "Escape" && closeLinkPicker()}
+  >
+    <div class="link-modal">
+      <div class="link-header">
+        <span class="link-title">Link as same series</span>
+        <button class="link-close" onclick={closeLinkPicker}><X size={14} weight="light" /></button>
+      </div>
+      <p class="link-hint">Mark two manga as the same series so duplicates are merged in search and discover. Click a linked entry again to unlink.</p>
+      <div class="link-search-wrap">
+        <input class="link-search" placeholder="Search your library…" bind:value={linkSearch} use:focusOnMount />
+      </div>
+      <div class="link-list">
+        {#if loadingLinkList}
+          <p class="link-empty">Loading…</p>
+        {:else if linkPickerResults.length === 0}
+          <p class="link-empty">No results</p>
+        {:else}
+          {#each linkPickerResults as m (m.id)}
+            {@const isLinked = linkedIds.includes(m.id)}
+            <button class="link-row" class:link-row-linked={isLinked} onclick={() => handleLink(m)}>
+              <img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="link-thumb" loading="lazy" decoding="async" />
+              <div class="link-info">
+                <span class="link-manga-title">{m.title}</span>
+                {#if m.source?.displayName}<span class="link-source">{m.source.displayName}</span>{/if}
+              </div>
+              <span class="link-status">{isLinked ? "✓ Linked" : "Link"}</span>
+            </button>
+          {/each}
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
 {/if}
 
 
 <style>
   .root { display: flex; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
-  .sidebar { width: 200px; flex-shrink: 0; padding: var(--sp-5); border-right: 1px solid var(--border-dim); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-4); background: var(--bg-base); }
+
+  /* ── Sidebar ─────────────────────────────────────────────────────────────── */
+  .sidebar { width: 240px; flex-shrink: 0; padding: var(--sp-5); border-right: 1px solid var(--border-dim); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-4); background: var(--bg-base); }
   .back { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide); text-transform: uppercase; transition: color var(--t-base); }
   .back:hover { color: var(--text-secondary); }
+
+  /* Zone 1: Cover */
   .cover-wrap { width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border-dim); flex-shrink: 0; }
   .cover { width: 100%; height: 100%; object-fit: cover; }
+
+  /* Zone 2: Meta */
   .meta-skeleton { display: flex; flex-direction: column; gap: var(--sp-2); }
   .sk-line { border-radius: var(--radius-sm); }
   .meta { display: flex; flex-direction: column; gap: var(--sp-3); }
@@ -630,27 +751,30 @@
   .genre:hover { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
   .genre-toggle { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); padding: 1px 6px; letter-spacing: var(--tracking-wide); cursor: pointer; transition: color var(--t-base), border-color var(--t-base); }
   .genre-toggle:hover { color: var(--accent-fg); border-color: var(--accent-dim); }
-  .desc-wrap { display: flex; flex-direction: column; gap: 2px; }
+  /* Description clamped — no expand in 240px sidebar */
-  .desc { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-base); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+  .desc { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-base); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
-  .desc.expanded { -webkit-line-clamp: unset; display: block; overflow: visible; }
+
-  .desc-toggle { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--accent-fg); letter-spacing: var(--tracking-wide); background: none; border: none; padding: 0; cursor: pointer; opacity: 0.7; transition: opacity var(--t-base); }
+  /* Zone 3: CTA */
-  .desc-toggle:hover { opacity: 1; }
+  .cta-section { display: flex; flex-direction: column; gap: var(--sp-2); }
+  .read-btn { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; padding: 9px var(--sp-3); border-radius: var(--radius-md); background: var(--accent); border: 1px solid var(--accent); color: var(--accent-contrast, #fff); font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide); cursor: pointer; transition: opacity var(--t-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .read-btn:hover { opacity: 0.88; }
+  .actions { display: flex; align-items: center; gap: var(--sp-2); }
+  .library-btn { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide); padding: 5px 10px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); color: var(--text-muted); background: var(--bg-raised); transition: border-color var(--t-base), color var(--t-base), background var(--t-base); flex: 1; }
+  .library-btn:hover { border-color: var(--accent); color: var(--accent-fg); }
+  .library-btn.active { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
+  .library-btn:disabled { opacity: 0.4; cursor: default; }
+  .external-link { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); color: var(--text-faint); flex-shrink: 0; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
+  .external-link:hover { color: var(--text-muted); border-color: var(--border-strong); }
+
+  /* Zone 4: Progress */
   .progress-section { display: flex; flex-direction: column; gap: var(--sp-1); }
   .progress-header { display: flex; justify-content: space-between; align-items: center; }
   .progress-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
   .progress-pct { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--accent-fg); letter-spacing: var(--tracking-wide); }
   .progress-track { height: 3px; background: var(--border-base); border-radius: var(--radius-full); overflow: hidden; }
   .progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width 0.4s ease; }
-  .actions { display: flex; align-items: center; gap: var(--sp-2); }
+
-  .library-btn { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide); padding: 5px 10px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); color: var(--text-muted); background: var(--bg-raised); transition: border-color var(--t-base), color var(--t-base), background var(--t-base); flex: 1; }
+  /* Zone 5: Details accordion */
-  .library-btn:hover { border-color: var(--accent); color: var(--accent-fg); }
-  .library-btn.active { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
-  .library-btn:disabled { opacity: 0.4; cursor: default; }
-  .external-link { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); color: var(--text-faint); flex-shrink: 0; transition: color var(--t-base), border-color var(--t-base); }
-  .external-link:hover { color: var(--text-muted); border-color: var(--border-strong); }
-  .read-btn { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; padding: 8px var(--sp-3); border-radius: var(--radius-md); background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent-fg); font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide); cursor: pointer; transition: background var(--t-base), border-color var(--t-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .read-btn:hover { background: var(--accent-muted); border-color: var(--accent-bright); }
-  .chapter-count { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
   .details-section { display: flex; flex-direction: column; gap: 2px; }
   .details-toggle { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); padding: 4px 0; transition: color var(--t-base); }
   .details-toggle:hover { color: var(--text-muted); }
@@ -658,19 +782,57 @@
   .detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); }
   .detail-key { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
   .detail-val { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-secondary); letter-spacing: var(--tracking-wide); text-align: right; }
-  .migrate-btn { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 5px var(--sp-2); border-radius: var(--radius-md); border: 1px solid var(--accent-dim); background: var(--accent-muted); color: var(--accent-fg); cursor: pointer; }
+  .detail-actions { display: flex; flex-direction: column; gap: var(--sp-1); padding-top: var(--sp-1); }
-  .delete-all-btn { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 6px var(--sp-2); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); background: none; border: 1px solid var(--border-dim); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
+  .detail-action-btn { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 6px var(--sp-2); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); background: none; border: 1px solid var(--border-dim); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
-  .delete-all-btn:hover:not(:disabled) { color: var(--color-error); border-color: var(--color-error); background: var(--color-error-bg); }
+  .detail-action-btn:hover { color: var(--text-muted); border-color: var(--border-strong); background: var(--bg-raised); }
-  .delete-all-btn:disabled { opacity: 0.4; cursor: default; }
+  .detail-action-active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
+  .detail-action-active:hover { color: var(--accent-fg); border-color: var(--accent); }
+  .detail-action-danger { color: var(--color-error); }
+  .detail-action-danger:hover:not(:disabled) { background: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error); }
+  .detail-action-danger:disabled { opacity: 0.4; cursor: default; }
+
+  /* ── Series link modal ───────────────────────────────────────────────────── */
+  .link-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: var(--z-settings); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadeIn 0.12s ease both; }
+  .link-modal { width: min(460px, calc(100vw - 48px)); max-height: 70vh; display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-base); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.6); animation: scaleIn 0.14s ease both; }
+  .link-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
+  .link-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
+  .link-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--text-faint); background: none; border: none; cursor: pointer; transition: color var(--t-base), background var(--t-base); }
+  .link-close:hover { color: var(--text-muted); background: var(--bg-raised); }
+  .link-hint { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); line-height: var(--leading-snug); padding: var(--sp-3) var(--sp-5) 0; flex-shrink: 0; }
+  .link-search-wrap { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
+  .link-search { width: 100%; background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 6px 10px; color: var(--text-primary); font-size: var(--text-sm); outline: none; transition: border-color var(--t-base); }
+  .link-search:focus { border-color: var(--border-strong); }
+  .link-list { flex: 1; overflow-y: auto; padding: var(--sp-2); scrollbar-width: none; }
+  .link-list::-webkit-scrollbar { display: none; }
+  .link-empty { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); padding: var(--sp-4) var(--sp-3); text-align: center; letter-spacing: var(--tracking-wide); }
+  .link-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 8px var(--sp-3); border-radius: var(--radius-md); border: none; background: none; text-align: left; cursor: pointer; transition: background var(--t-fast); }
+  .link-row:hover { background: var(--bg-raised); }
+  .link-row-linked { background: var(--accent-muted) !important; }
+  .link-thumb { width: 34px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-dim); }
+  .link-info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-width: 0; }
+  .link-manga-title { font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .link-source { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .link-status { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); flex-shrink: 0; padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); }
+  .link-row-linked .link-status { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
+
+  /* ── Chapter list ────────────────────────────────────────────────────────── */
   .list-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
   .list-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; gap: var(--sp-2); flex-wrap: wrap; }
   .list-header-left, .list-header-right { display: flex; align-items: center; gap: var(--sp-1); }
   .sort-btn { display: flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px var(--sp-2); border-radius: var(--radius-sm); color: var(--text-muted); transition: color var(--t-base), background var(--t-base); }
   .sort-btn:hover { color: var(--text-secondary); background: var(--bg-raised); }
+  .sort-wrap { position: relative; }
+  .sort-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 160px; background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-md); padding: var(--sp-1); z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.5); animation: scaleIn 0.1s ease both; transform-origin: top left; }
+  .sort-option { display: block; width: 100%; padding: 6px var(--sp-3); border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-secondary); background: none; border: none; cursor: pointer; text-align: left; transition: background var(--t-fast), color var(--t-fast); }
+  .sort-option:hover { background: var(--bg-overlay); color: var(--text-primary); }
+  .sort-option.active { color: var(--accent-fg); }
+  .sort-divider { height: 1px; background: var(--border-dim); margin: var(--sp-1) var(--sp-2); }
   .icon-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); color: var(--text-muted); background: none; cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
   .icon-btn:hover:not(:disabled) { color: var(--text-secondary); border-color: var(--border-strong); background: var(--bg-raised); }
   .icon-btn.active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
   .icon-btn:disabled { opacity: 0.3; cursor: default; }
+
+  /* ── Folder picker ───────────────────────────────────────────────────────── */
   .fp-wrap { position: relative; }
   .fp-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 180px; background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-md); padding: var(--sp-1); z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.5); animation: scaleIn 0.1s ease both; transform-origin: top right; }
   .fp-empty { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); color: var(--text-faint); }
@@ -688,14 +850,8 @@
   .fp-cancel:hover { color: var(--text-muted); border-color: var(--border-dim); }
   .fp-new { width: 100%; padding: 6px var(--sp-3); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--text-faint); background: none; border: none; cursor: pointer; text-align: left; transition: color var(--t-fast), background var(--t-fast); }
   .fp-new:hover { color: var(--text-secondary); background: var(--bg-overlay); }
-  .jump-wrap { position: relative; }
+
-  .jump-toggle { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); color: var(--text-faint); background: none; cursor: pointer; transition: color var(--t-base), border-color var(--t-base); }
+  /* ── Download dropdown ───────────────────────────────────────────────────── */
-  .jump-toggle:hover { color: var(--text-muted); border-color: var(--border-strong); }
-  .jump-row { display: flex; align-items: center; gap: 4px; }
-  .jump-input { width: 64px; background: var(--bg-overlay); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 4px 8px; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-secondary); outline: none; }
-  .jump-input:focus { border-color: var(--border-focus); }
-  .jump-cancel { font-size: 12px; color: var(--text-faint); padding: 2px 4px; border-radius: var(--radius-sm); transition: color var(--t-base); }
-  .jump-cancel:hover { color: var(--text-muted); }
   .dl-wrap { position: relative; }
   .dl-dropdown { position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px; background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: var(--sp-1); z-index: 200; box-shadow: 0 8px 32px rgba(0,0,0,0.5); animation: scaleIn 0.1s ease both; transform-origin: top right; }
   .dl-section-label { padding: 6px var(--sp-3) 4px; font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
@@ -719,12 +875,16 @@
   .dl-range-sep { color: var(--text-faint); font-size: var(--text-xs); }
   .dl-range-go { padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--accent-dim); background: var(--accent-muted); color: var(--accent-fg); font-family: var(--font-ui); font-size: var(--text-xs); cursor: pointer; }
   .dl-range-go:disabled { opacity: 0.3; cursor: default; }
+
+  /* ── Pagination ──────────────────────────────────────────────────────────── */
   .pagination, .pagination-bottom { display: flex; align-items: center; gap: var(--sp-2); }
   .pagination-bottom { justify-content: center; padding: var(--sp-3); border-top: 1px solid var(--border-dim); flex-shrink: 0; }
   .page-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); color: var(--text-faint); background: none; cursor: pointer; transition: color var(--t-base), border-color var(--t-base); }
   .page-btn:hover:not(:disabled) { color: var(--text-muted); border-color: var(--border-strong); }
   .page-btn:disabled { opacity: 0.3; cursor: default; }
   .page-num { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+
+  /* ── Chapter rows ────────────────────────────────────────────────────────── */
   .ch-list { flex: 1; overflow-y: auto; }
   .ch-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; padding: var(--sp-3); align-content: start; }
   .ch-row { display: flex; align-items: center; padding: 10px var(--sp-4); border-bottom: 1px solid var(--border-dim); cursor: pointer; transition: background var(--t-fast); gap: var(--sp-3); }
@@ -749,6 +909,11 @@
   .grid-cell-dot { position: absolute; bottom: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); }
   .grid-cell-spinner { position: absolute; top: 2px; right: 2px; }
   .grid-cell-skeleton { aspect-ratio: 1; border-radius: var(--radius-sm); }
+
   @keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
   @keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
 </style>
+
+<script module>
+  function focusOnMount(node: HTMLElement) { node.focus(); }
+</script>

src/components/pages/Tracking.svelte

@@ -0,0 +1,628 @@
+<script lang="ts">
+  import { CircleNotch, ArrowSquareOut, ArrowsClockwise, X, Lock, MagnifyingGlass, Funnel } from "phosphor-svelte";
+  import { gql, thumbUrl } from "../../lib/client";
+  import {
+    GET_ALL_TRACKER_RECORDS,
+    UPDATE_TRACK,
+    UNBIND_TRACK,
+    FETCH_TRACK,
+  } from "../../lib/queries";
+  import { addToast, setActiveManga, setNavPage } from "../../store/state.svelte";
+  import type { Tracker, TrackRecord } from "../../lib/types";
+
+  // ── Types ──────────────────────────────────────────────────────────────────
+
+  interface TrackerWithRecords extends Tracker {
+    trackRecords: { nodes: TrackRecord[] };
+  }
+
+  interface FlatRecord extends TrackRecord {
+    tracker: Tracker;
+  }
+
+  // ── State ──────────────────────────────────────────────────────────────────
+
+  let trackers:   TrackerWithRecords[] = $state([]);
+  let loading:    boolean              = $state(true);
+  let error:      string | null        = $state(null);
+
+  // Filter/view state
+  let activeTrackerId: number | "all" = $state("all");
+  let statusFilter:    number | "all" = $state("all");
+  let searchQuery:     string         = $state("");
+  let sortBy:          "title" | "status" | "score" | "progress" = $state("title");
+
+  // Mutation state
+  let updatingId: number | null = $state(null);
+  let syncingId:  number | null = $state(null);
+  // Chapter editing: recordId → draft value
+  let editingChapter: number | null = $state(null);
+  let chapterDraft:   number        = $state(0);
+
+  // ── Load ───────────────────────────────────────────────────────────────────
+
+  async function load() {
+    loading = true; error = null;
+    try {
+      const res = await gql<{ trackers: { nodes: TrackerWithRecords[] } }>(GET_ALL_TRACKER_RECORDS);
+      trackers = res.trackers.nodes;
+    } catch (e: any) {
+      error = e?.message ?? "Failed to load tracking data";
+    } finally {
+      loading = false;
+    }
+  }
+
+  $effect(() => { load(); });
+
+  // ── Derived data ───────────────────────────────────────────────────────────
+
+  const loggedInTrackers = $derived(trackers.filter(t => t.isLoggedIn));
+
+  const allRecords: FlatRecord[] = $derived(
+    loggedInTrackers.flatMap(t =>
+      t.trackRecords.nodes.map(r => ({
+        ...r,
+        trackerId: r.trackerId ?? t.id, // fallback in case field is missing
+        tracker: t as Tracker,
+      }))
+    )
+  );
+
+  const totalCount  = $derived(allRecords.length);
+
+  // Status options across active tracker
+  const statusOptions = $derived.by(() => {
+    if (activeTrackerId === "all") {
+      // Merge all statuses, dedupe by value+name
+      const seen = new Map<string, { value: number; name: string }>();
+      for (const t of loggedInTrackers) {
+        for (const s of t.statuses ?? []) seen.set(`${s.value}:${s.name}`, s);
+      }
+      return [...seen.values()];
+    }
+    return loggedInTrackers.find(t => t.id === activeTrackerId)?.statuses ?? [];
+  });
+
+  const filtered = $derived.by(() => {
+    let list = activeTrackerId === "all"
+      ? allRecords
+      : allRecords.filter(r => Number(r.trackerId) === Number(activeTrackerId));
+
+    if (statusFilter !== "all")
+      list = list.filter(r => Number(r.status) === Number(statusFilter));
+
+    if (searchQuery.trim())
+      list = list.filter(r =>
+        r.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        r.manga?.title?.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+
+    return [...list].sort((a, b) => {
+      if (sortBy === "title")    return a.title.localeCompare(b.title);
+      if (sortBy === "status")   return a.status - b.status;
+      if (sortBy === "score")    return parseFloat(b.displayScore ?? "0") - parseFloat(a.displayScore ?? "0");
+      if (sortBy === "progress") {
+        const ap = a.totalChapters > 0 ? a.lastChapterRead / a.totalChapters : 0;
+        const bp = b.totalChapters > 0 ? b.lastChapterRead / b.totalChapters : 0;
+        return bp - ap;
+      }
+      return 0;
+    });
+  });
+
+  // ── Mutations ──────────────────────────────────────────────────────────────
+
+  async function updateStatus(record: FlatRecord, status: number) {
+    updatingId = record.id;
+    try {
+      const res = await gql<{ updateTrack: { trackRecord: TrackRecord } }>(
+        UPDATE_TRACK, { recordId: record.id, status }
+      );
+      patchRecord(record.trackerId, res.updateTrack.trackRecord);
+    } catch (e: any) {
+      addToast({ kind: "error", title: "Update failed", body: e?.message });
+    } finally {
+      updatingId = null;
+    }
+  }
+
+  async function updateScore(record: FlatRecord, scoreString: string) {
+    updatingId = record.id;
+    try {
+      const res = await gql<{ updateTrack: { trackRecord: TrackRecord } }>(
+        UPDATE_TRACK, { recordId: record.id, scoreString }
+      );
+      patchRecord(record.trackerId, res.updateTrack.trackRecord);
+    } catch (e: any) {
+      addToast({ kind: "error", title: "Update failed", body: e?.message });
+    } finally {
+      updatingId = null;
+    }
+  }
+
+  async function syncRecord(record: FlatRecord) {
+    syncingId = record.id;
+    try {
+      const res = await gql<{ fetchTrack: { trackRecord: TrackRecord } }>(
+        FETCH_TRACK, { recordId: record.id }
+      );
+      patchRecord(record.trackerId, res.fetchTrack.trackRecord);
+      addToast({ kind: "success", title: "Synced from tracker" });
+    } catch (e: any) {
+      addToast({ kind: "error", title: "Sync failed", body: e?.message });
+    } finally {
+      syncingId = null;
+    }
+  }
+
+  async function unbind(record: FlatRecord) {
+    updatingId = record.id;
+    try {
+      await gql(UNBIND_TRACK, { recordId: record.id });
+      trackers = trackers.map(t =>
+        t.id !== record.trackerId ? t : {
+          ...t,
+          trackRecords: { nodes: t.trackRecords.nodes.filter(r => r.id !== record.id) }
+        }
+      );
+      addToast({ kind: "info", title: "Unlinked from " + record.tracker.name });
+    } catch (e: any) {
+      addToast({ kind: "error", title: "Unbind failed", body: e?.message });
+    } finally {
+      updatingId = null;
+    }
+  }
+
+  function patchRecord(trackerId: number, updated: Partial<TrackRecord> & { id: number }) {
+    trackers = trackers.map(t =>
+      t.id !== trackerId ? t : {
+        ...t,
+        trackRecords: {
+          nodes: t.trackRecords.nodes.map(r => r.id === updated.id ? { ...r, ...updated } : r)
+        }
+      }
+    );
+  }
+
+  function openManga(record: FlatRecord) {
+    if (!record.manga) return;
+    setActiveManga(record.manga as any);
+    setNavPage("library");
+  }
+
+  function openChapterEditor(record: FlatRecord) {
+    editingChapter = record.id;
+    chapterDraft   = record.lastChapterRead;
+  }
+
+  function cancelChapterEditor() {
+    editingChapter = null;
+  }
+
+  async function submitChapter(record: FlatRecord) {
+    const val = Math.max(0, chapterDraft);
+    editingChapter = null;
+    if (val === record.lastChapterRead) return;
+    updatingId = record.id;
+    try {
+      const res = await gql<{ updateTrack: { trackRecord: TrackRecord } }>(
+        UPDATE_TRACK, { recordId: record.id, lastChapterRead: val }
+      );
+      patchRecord(record.trackerId, res.updateTrack.trackRecord);
+    } catch (e: any) {
+      addToast({ kind: "error", title: "Update failed", body: e?.message });
+    } finally {
+      updatingId = null;
+    }
+  }
+</script>
+
+<div class="page">
+
+  <!-- ── Header ──────────────────────────────────────────────────────────── -->
+  <div class="header">
+    <div class="header-top">
+      <h1 class="heading">Tracking</h1>
+      <div class="header-actions">
+        <button class="icon-btn" onclick={load} disabled={loading} title="Refresh all">
+          <ArrowsClockwise size={14} weight="light" class={loading ? "anim-spin" : ""} />
+        </button>
+      </div>
+    </div>
+
+    <!-- Tracker filter tabs -->
+    {#if !loading && loggedInTrackers.length > 0}
+      <div class="tracker-tabs">
+        <button
+          class="tracker-tab"
+          class:tab-active={activeTrackerId === "all"}
+          onclick={() => { activeTrackerId = "all"; statusFilter = "all"; }}
+        >
+          All
+          <span class="tab-count">{totalCount}</span>
+        </button>
+        {#each loggedInTrackers as t}
+          {@const count = t.trackRecords.nodes.length}
+          <button
+            class="tracker-tab"
+            class:tab-active={activeTrackerId === t.id}
+            onclick={() => { activeTrackerId = Number(t.id); statusFilter = "all"; }}
+          >
+            <img src={thumbUrl(t.icon)} alt={t.name} class="tab-tracker-icon" />
+            {t.name}
+            <span class="tab-count">{count}</span>
+          </button>
+        {/each}
+      </div>
+
+      <!-- Filter + sort bar -->
+      <div class="filter-bar">
+        <div class="search-wrap">
+          <MagnifyingGlass size={12} weight="light" class="search-ico" />
+          <input
+            class="filter-search"
+            placeholder="Search titles…"
+            bind:value={searchQuery}
+          />
+        </div>
+
+        <div class="filter-right">
+          <Funnel size={12} weight="light" style="color:var(--text-faint);flex-shrink:0" />
+          <select class="filter-select" bind:value={statusFilter}
+            onchange={(e) => {
+              const v = (e.target as HTMLSelectElement).value;
+              statusFilter = v === "all" ? "all" : parseInt(v);
+            }}>
+            <option value="all">All statuses</option>
+            {#each statusOptions as s}
+              <option value={s.value}>{s.name}</option>
+            {/each}
+          </select>
+
+          <select class="filter-select" bind:value={sortBy}>
+            <option value="title">Sort: Title</option>
+            <option value="status">Sort: Status</option>
+            <option value="score">Sort: Score</option>
+            <option value="progress">Sort: Progress</option>
+          </select>
+        </div>
+      </div>
+    {/if}
+  </div>
+
+  <!-- ── Body ────────────────────────────────────────────────────────────── -->
+  <div class="page-body">
+
+    {#if loading}
+      <div class="state-center">
+        <CircleNotch size={22} weight="light" class="anim-spin" style="color:var(--text-faint)" />
+        <span class="state-label">Loading tracking data…</span>
+      </div>
+
+    {:else if error}
+      <div class="state-center">
+        <p class="state-error">{error}</p>
+        <button class="retry-btn" onclick={load}>Retry</button>
+      </div>
+
+    {:else if loggedInTrackers.length === 0}
+      <div class="state-center">
+        <p class="state-text">No trackers connected.</p>
+        <p class="state-hint">Go to Settings → Tracking to log in to AniList, MAL, or others.</p>
+      </div>
+
+    {:else if filtered.length === 0}
+      <div class="state-center">
+        <p class="state-text">{searchQuery || statusFilter !== "all" ? "No results match your filters." : "Nothing tracked yet."}</p>
+        {#if searchQuery || statusFilter !== "all"}
+          <button class="retry-btn" onclick={() => { searchQuery = ""; statusFilter = "all"; }}>Clear filters</button>
+        {/if}
+      </div>
+
+    {:else}
+      <div class="records-list">
+        {#each filtered as record (record.tracker.id + ":" + record.id)}
+          {@const tracker  = record.tracker}
+          {@const isBusy   = updatingId === record.id}
+          {@const isSyncing = syncingId === record.id}
+          {@const progress = record.totalChapters > 0
+            ? Math.min(100, (record.lastChapterRead / record.totalChapters) * 100)
+            : null}
+
+          <div class="record-card" class:record-busy={isBusy}>
+
+            <!-- Cover -->
+            <div class="record-cover-wrap" role="button" tabindex="0"
+              onclick={() => openManga(record)}
+              onkeydown={(e) => e.key === "Enter" && openManga(record)}
+            >
+              {#if record.manga?.thumbnailUrl}
+                <img src={thumbUrl(record.manga.thumbnailUrl)} alt={record.title} class="record-cover" loading="lazy" />
+              {:else}
+                <div class="record-cover record-cover-empty"></div>
+              {/if}
+              <!-- Tracker badge -->
+              <img src={thumbUrl(tracker.icon)} alt={tracker.name} class="record-tracker-badge" />
+            </div>
+
+            <!-- Info -->
+            <div class="record-body">
+              <div class="record-top">
+                <div class="record-titles" role="button" tabindex="0"
+                  onclick={() => openManga(record)}
+                  onkeydown={(e) => e.key === "Enter" && openManga(record)}
+                >
+                  <span class="record-title">{record.title}</span>
+                  {#if record.manga?.title && record.manga.title !== record.title}
+                    <span class="record-local-title">{record.manga.title}</span>
+                  {/if}
+                </div>
+                <div class="record-header-actions">
+                  {#if activeTrackerId === "all"}
+                    <span class="record-tracker-label">
+                      <img src={thumbUrl(record.tracker.icon)} alt={record.tracker.name} class="record-tracker-label-icon" />
+                      {record.tracker.name}
+                    </span>
+                  {/if}
+                  {#if isSyncing}
+                    <CircleNotch size={12} weight="light" class="anim-spin" style="color:var(--text-faint)" />
+                  {:else}
+                    <button class="card-icon-btn" title="Sync from tracker" onclick={() => syncRecord(record)}>
+                      <ArrowsClockwise size={12} weight="light" />
+                    </button>
+                  {/if}
+                  {#if record.remoteUrl}
+                    <a href={record.remoteUrl} target="_blank" rel="noreferrer" class="card-icon-btn" title="Open on {record.tracker.name}">
+                      <ArrowSquareOut size={12} weight="light" />
+                    </a>
+                  {/if}
+                  <button class="card-icon-btn danger" title="Unlink" onclick={() => unbind(record)} disabled={isBusy}>
+                    <X size={12} weight="bold" />
+                  </button>
+                </div>
+              </div>
+
+              <!-- Controls row -->
+              <div class="record-controls">
+                <select
+                  class="record-select"
+                  value={record.status}
+                  disabled={isBusy}
+                  onchange={(e) => updateStatus(record, parseInt((e.target as HTMLSelectElement).value))}
+                >
+                  {#each (tracker.statuses ?? []) as s}
+                    <option value={s.value}>{s.name}</option>
+                  {/each}
+                </select>
+
+                <select
+                  class="record-select record-select-score"
+                  value={record.displayScore}
+                  disabled={isBusy}
+                  onchange={(e) => updateScore(record, (e.target as HTMLSelectElement).value)}
+                >
+                  {#each (tracker.scores ?? []) as s}
+                    <option value={s}>★ {s}</option>
+                  {/each}
+                </select>
+
+                {#if record.private}
+                  <span class="private-badge" title="Private"><Lock size={10} weight="fill" /></span>
+                {/if}
+              </div>
+
+              <!-- Progress / Chapter editor -->
+              {#if editingChapter === record.id}
+                <div class="chapter-editor">
+                  <div class="chapter-editor-top">
+                    <span class="chapter-editor-label">Chapter read</span>
+                    <div class="chapter-input-wrap">
+                      <input
+                        type="number"
+                        class="chapter-input"
+                        min="0"
+                        max={record.totalChapters > 0 ? record.totalChapters : undefined}
+                        step="0.5"
+                        bind:value={chapterDraft}
+                        onkeydown={(e) => {
+                          if (e.key === "Enter") submitChapter(record);
+                          if (e.key === "Escape") cancelChapterEditor();
+                        }}
+                        use:focusEl
+                      />
+                      {#if record.totalChapters > 0}
+                        <span class="chapter-total">/ {record.totalChapters}</span>
+                      {/if}
+                    </div>
+                  </div>
+                  {#if record.totalChapters > 0}
+                    <input
+                      type="range"
+                      class="chapter-slider"
+                      min="0"
+                      max={record.totalChapters}
+                      step="1"
+                      bind:value={chapterDraft}
+                    />
+                  {/if}
+                  <div class="chapter-editor-actions">
+                    <button class="chapter-save-btn" onclick={() => submitChapter(record)}>Save</button>
+                    <button class="chapter-cancel-btn" onclick={cancelChapterEditor}>Cancel</button>
+                  </div>
+                </div>
+              {:else if progress !== null}
+                <div class="record-progress clickable" role="button" tabindex="0"
+                  onclick={() => openChapterEditor(record)}
+                  onkeydown={(e) => e.key === "Enter" && openChapterEditor(record)}
+                  title="Click to edit"
+                >
+                  <div class="progress-track">
+                    <div class="progress-fill" style="width:{progress}%"></div>
+                  </div>
+                  <span class="progress-label">Ch. {record.lastChapterRead} / {record.totalChapters}</span>
+                  <span class="progress-edit-hint">✎</span>
+                </div>
+              {:else}
+                <div class="record-progress clickable no-total" role="button" tabindex="0"
+                  onclick={() => openChapterEditor(record)}
+                  onkeydown={(e) => e.key === "Enter" && openChapterEditor(record)}
+                  title="Click to set chapter"
+                >
+                  <span class="progress-label">
+                    {record.lastChapterRead > 0 ? `Ch. ${record.lastChapterRead} read` : "Set chapter…"}
+                  </span>
+                  <span class="progress-edit-hint">✎</span>
+                </div>
+              {/if}
+
+            </div>
+          </div>
+        {/each}
+      </div>
+    {/if}
+
+  </div>
+</div>
+
+<style>
+  .page { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
+
+  /* ── Header ─────────────────────────────────────────────────────────────── */
+  .header { flex-shrink: 0; border-bottom: 1px solid var(--border-dim); background: var(--bg-base); }
+  .header-top { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6) var(--sp-3); }
+  .heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
+  .header-actions { display: flex; align-items: center; gap: var(--sp-2); }
+  .icon-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); color: var(--text-muted); background: none; cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
+  .icon-btn:hover:not(:disabled) { color: var(--text-secondary); border-color: var(--border-strong); background: var(--bg-raised); }
+  .icon-btn:disabled { opacity: 0.3; cursor: default; }
+
+  /* ── Tracker tabs ───────────────────────────────────────────────────────── */
+  .tracker-tabs { display: flex; align-items: center; gap: 2px; padding: var(--sp-2) var(--sp-4); overflow-x: auto; scrollbar-width: none; }
+  .tracker-tabs::-webkit-scrollbar { display: none; }
+  .tracker-tab { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 10px; font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); background: none; border: none; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; transition: color var(--t-base), background var(--t-base); }
+  .tracker-tab:hover { color: var(--text-muted); }
+  .tab-active { background: var(--accent-muted); color: var(--accent-fg) !important; border: 1px solid var(--accent-dim); }
+  .tab-tracker-icon { width: 14px; height: 14px; border-radius: 2px; object-fit: contain; }
+  .tab-count { font-size: 10px; padding: 1px 5px; border-radius: var(--radius-full); background: var(--bg-overlay); color: var(--text-faint); min-width: 18px; text-align: center; }
+
+  /* ── Filter bar ─────────────────────────────────────────────────────────── */
+  .filter-bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-5); border-top: 1px solid var(--border-dim); }
+  .search-wrap { display: flex; align-items: center; gap: var(--sp-2); flex: 1; background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 5px 10px; }
+  :global(.search-ico) { color: var(--text-faint); flex-shrink: 0; }
+  .filter-search { flex: 1; background: none; border: none; outline: none; font-size: var(--text-sm); color: var(--text-primary); min-width: 0; }
+  .filter-search::placeholder { color: var(--text-faint); }
+  .filter-right { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
+  .filter-select {
+    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
+    padding: 5px 28px 5px 10px; border-radius: var(--radius-md);
+    border: 1px solid var(--border-dim); background: var(--bg-raised);
+    color: var(--text-muted); outline: none; cursor: pointer;
+    appearance: none; -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 8px center;
+    transition: border-color var(--t-base), color var(--t-base);
+  }
+  .filter-select:hover { border-color: var(--border-strong); color: var(--text-secondary); }
+  .filter-select option { background: var(--bg-surface); color: var(--text-secondary); }
+
+  /* ── Body ───────────────────────────────────────────────────────────────── */
+  .page-body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
+
+  /* ── States ─────────────────────────────────────────────────────────────── */
+  .state-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); height: 100%; padding: var(--sp-10); text-align: center; }
+  .state-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .state-text  { font-size: var(--text-sm); color: var(--text-muted); }
+  .state-hint  { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .state-error { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-error); letter-spacing: var(--tracking-wide); }
+  .retry-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 6px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); background: none; color: var(--text-muted); cursor: pointer; transition: color var(--t-base), border-color var(--t-base); }
+  .retry-btn:hover { color: var(--accent-fg); border-color: var(--accent-dim); }
+
+  /* ── Records list ───────────────────────────────────────────────────────── */
+  .records-list { display: flex; flex-direction: column; gap: var(--sp-2); }
+
+  .record-card {
+    display: flex; align-items: flex-start; gap: var(--sp-4);
+    padding: var(--sp-3) var(--sp-4);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--border-dim);
+    background: var(--bg-raised);
+    transition: border-color var(--t-base), opacity var(--t-base);
+  }
+  .record-card:hover { border-color: var(--border-strong); }
+  .record-busy { opacity: 0.5; pointer-events: none; }
+
+  /* Cover */
+  .record-cover-wrap { position: relative; flex-shrink: 0; cursor: pointer; }
+  .record-cover { width: 48px; height: 68px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); display: block; }
+  .record-cover-empty { background: var(--bg-overlay); }
+  .record-cover-wrap:hover .record-cover { opacity: 0.8; }
+  .record-tracker-badge { position: absolute; bottom: -4px; right: -4px; width: 16px; height: 16px; border-radius: 3px; border: 1px solid var(--bg-raised); object-fit: contain; background: var(--bg-raised); }
+
+  /* Body */
+  .record-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
+  .record-top  { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
+  .record-titles { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; cursor: pointer; }
+  .record-title { font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--t-base); }
+  .record-titles:hover .record-title { color: var(--accent-fg); }
+  .record-local-title { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .record-header-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
+  .record-tracker-label { display: flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: var(--bg-overlay); margin-right: var(--sp-1); }
+  .record-tracker-label-icon { width: 12px; height: 12px; border-radius: 2px; object-fit: contain; }
+  .card-icon-btn { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: var(--radius-sm); color: var(--text-faint); background: none; border: none; cursor: pointer; text-decoration: none; transition: color var(--t-base), background var(--t-base); }
+  .card-icon-btn:hover { color: var(--text-muted); background: var(--bg-overlay); }
+  .card-icon-btn.danger:hover { color: var(--color-error); background: var(--color-error-bg); }
+  .card-icon-btn:disabled { opacity: 0.3; cursor: default; }
+
+  /* Controls */
+  .record-controls { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
+  .record-select {
+    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
+    padding: 3px 26px 3px 8px; border-radius: var(--radius-sm);
+    border: 1px solid var(--border-strong); background: var(--bg-overlay);
+    color: var(--text-secondary); outline: none; cursor: pointer;
+    appearance: none; -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 7px center;
+    transition: border-color var(--t-base);
+  }
+  .record-select:hover:not(:disabled) { border-color: var(--accent-dim); }
+  .record-select:disabled { opacity: 0.4; cursor: default; }
+  .record-select option { background: var(--bg-surface); color: var(--text-secondary); }
+  .record-select-score { max-width: 90px; }
+  .private-badge { display: flex; align-items: center; color: var(--text-faint); padding: 2px 4px; }
+
+  /* Progress */
+  .record-progress { display: flex; align-items: center; gap: var(--sp-3); }
+  .progress-track { flex: 1; height: 3px; background: var(--border-base); border-radius: var(--radius-full); overflow: hidden; max-width: 160px; }
+  .progress-fill  { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width 0.3s ease; }
+  .progress-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); white-space: nowrap; }
+  .record-progress.clickable { cursor: pointer; border-radius: var(--radius-sm); padding: 2px 4px; margin: -2px -4px; transition: background var(--t-fast); }
+  .record-progress.clickable:hover { background: var(--bg-overlay); }
+  .record-progress.clickable:hover .progress-label { color: var(--text-muted); }
+  .progress-edit-hint { font-size: 10px; color: var(--text-faint); opacity: 0; transition: opacity var(--t-fast); }
+  .record-progress.clickable:hover .progress-edit-hint { opacity: 1; }
+
+  /* Chapter editor */
+  .chapter-editor { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--radius-md); border: 1px solid var(--accent-dim); background: var(--bg-overlay); }
+  .chapter-editor-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
+  .chapter-editor-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .chapter-input-wrap { display: flex; align-items: center; gap: var(--sp-2); }
+  .chapter-input { width: 72px; background: var(--bg-raised); border: 1px solid var(--accent-dim); border-radius: var(--radius-sm); padding: 4px 8px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-primary); outline: none; text-align: center; appearance: none; -webkit-appearance: none; -moz-appearance: textfield; }
+  .chapter-input:focus { border-color: var(--accent); }
+  .chapter-input::-webkit-outer-spin-button,
+  .chapter-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
+  .chapter-total { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .chapter-slider { width: 100%; accent-color: var(--accent); cursor: pointer; height: 4px; }
+  .chapter-editor-actions { display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end; }
+  .chapter-save-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 14px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent-muted); color: var(--accent-fg); cursor: pointer; transition: filter var(--t-base); }
+  .chapter-save-btn:hover { filter: brightness(1.15); }
+  .chapter-cancel-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; transition: color var(--t-base), border-color var(--t-base); }
+  .chapter-cancel-btn:hover { color: var(--text-muted); border-color: var(--border-strong); }
+
+  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
+</style>
+
+<script module>
+  function focusEl(node: HTMLElement) { setTimeout(() => node.focus(), 0); }
+</script>

src/components/reader/Reader.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount, tick, untrack } from "svelte";
+  import { onMount, untrack } from "svelte";
   import { X, CaretLeft, CaretRight, ArrowLeft, ArrowRight, Square, Rows, Download, ArrowsLeftRight, ArrowsIn, ArrowsOut, ArrowsVertical, CircleNotch } from "phosphor-svelte";
   import { gql, thumbUrl } from "../../lib/client";
   import { FETCH_CHAPTER_PAGES, MARK_CHAPTER_READ, ENQUEUE_DOWNLOAD, ENQUEUE_CHAPTERS_DOWNLOAD } from "../../lib/queries";
@@ -7,10 +7,17 @@
   import { matchesKeybind, toggleFullscreen, DEFAULT_KEYBINDS } from "../../lib/keybinds";
   import type { FitMode } from "../../store/state.svelte";
 
+  // ─── Constants ────────────────────────────────────────────────────────────────
+
+  const AVG_MIN_PER_PAGE = 0.33;
+  const MAX_CACHED       = 10;
+  const READ_LINE_PCT    = 0.20;
+
+  // ─── Page cache ───────────────────────────────────────────────────────────────
+
   const pageCache  = new Map<number, string[]>();
   const inflight   = new Map<number, Promise<string[]>>();
   const cacheOrder: number[] = [];
-  const MAX_CACHED = 10;
 
   function cacheTouch(id: number) {
     const i = cacheOrder.indexOf(id);
@@ -21,7 +28,7 @@
   function cacheEvict(keep: Set<number>) {
     while (pageCache.size > MAX_CACHED) {
       const victim = cacheOrder.find(id => !keep.has(id));
-      if (!victim) break;
+      if (victim === undefined) break;
       cacheOrder.splice(cacheOrder.indexOf(victim), 1);
       pageCache.delete(victim);
     }
@@ -33,7 +40,12 @@
     if (signal?.aborted) return Promise.reject(new DOMException("Aborted", "AbortError"));
     if (!inflight.has(chapterId)) {
       const p = gql<{ fetchChapterPages: { pages: string[] } }>(FETCH_CHAPTER_PAGES, { chapterId })
-        .then(d => { const urls = d.fetchChapterPages.pages.map(thumbUrl); pageCache.set(chapterId, urls); cacheTouch(chapterId); return urls; })
+        .then(d => {
+          const urls = d.fetchChapterPages.pages.map(thumbUrl);
+          pageCache.set(chapterId, urls);
+          cacheTouch(chapterId);
+          return urls;
+        })
         .finally(() => inflight.delete(chapterId));
       inflight.set(chapterId, p);
     }
@@ -45,6 +57,8 @@
     });
   }
 
+  // ─── Image helpers ────────────────────────────────────────────────────────────
+
   const aspectCache = new Map<string, number>();
   function preloadImage(url: string) { new Image().src = url; }
 
@@ -61,17 +75,25 @@
     if (aspectCache.has(url)) return Promise.resolve(aspectCache.get(url)!);
     return new Promise(res => {
       const img = new Image();
-      img.onload  = () => { const r = img.naturalHeight > 0 ? img.naturalWidth / img.naturalHeight : 0.67; aspectCache.set(url, r); res(r); };
+      img.onload  = () => {
+        const r = img.naturalHeight > 0 ? img.naturalWidth / img.naturalHeight : 0.67;
+        aspectCache.set(url, r);
+        res(r);
+      };
       img.onerror = () => res(0.67);
       img.src = url;
     });
   }
 
-  interface StripChapter { chapterId: number; chapterName: string; urls: string[]; startGlobalIdx: number; }
+  // ─── Types ────────────────────────────────────────────────────────────────────
+
+  interface StripChapter { chapterId: number; chapterName: string; urls: string[]; }
+
+  // ─── DOM refs ─────────────────────────────────────────────────────────────────
 
   let containerEl: HTMLDivElement;
-  let sentinelEl:  HTMLDivElement;
+
-  let hideTimer:   ReturnType<typeof setTimeout> | null = null;
+  // ─── UI state ─────────────────────────────────────────────────────────────────
 
   let loading          = $state(true);
   let error: string | null = $state(null);
@@ -84,13 +106,20 @@
   let visibleChapterId: number | null = $state(null);
   let nextN            = $state(5);
   let dlBusy           = $state(false);
+  let hideTimer:       ReturnType<typeof setTimeout> | null = null;
+
+  // ─── Non-reactive bookkeeping ─────────────────────────────────────────────────
+
   let markedRead  = new Set<number>();
-  let appended     = new Set<number>();
   let appending   = false;
   let abortCtrl:  AbortController | null = null;
   let loadingId:  number | null = null;
-  let scrollAnchor: { scrollTop: number; scrollHeight: number } | null = null;
+  let navToken    = 0;
+  // Only write history after the user has genuinely moved past the opening page.
+  // Prevents the "started on page 1" entry being saved as last position on close.
+  let hasNavigated = false;
 
+  // ─── Derived ──────────────────────────────────────────────────────────────────
 
   const rtl        = $derived(store.settings.readingDirection === "rtl");
   const fit        = $derived((store.settings.fitMode ?? "width") as FitMode);
@@ -98,13 +127,16 @@
   const maxW       = $derived(store.settings.maxPageWidth ?? 900);
   const autoNext   = $derived(store.settings.autoNextChapter ?? false);
   const markOnNext = $derived(store.settings.markReadOnNext ?? true);
+  const overlayBars = $derived(store.settings.overlayBars ?? false);
   const lastPage   = $derived(store.pageUrls.length);
 
-  const displayChapter = $derived((style === "longstrip" && autoNext && visibleChapterId)
+  const displayChapter = $derived(
+    style === "longstrip" && autoNext && visibleChapterId
       ? (store.activeChapterList.find(c => c.id === visibleChapterId) ?? store.activeChapter)
-    : store.activeChapter);
+      : store.activeChapter
+  );
 
-  const adjacent = $derived((() => {
+  const adjacent = $derived.by(() => {
     const ref = displayChapter ?? store.activeChapter;
     if (!ref || !store.activeChapterList.length) return { prev: null, next: null, remaining: [] };
     const idx = store.activeChapterList.findIndex(c => c.id === ref.id);
@@ -113,14 +145,14 @@
       next:      idx < store.activeChapterList.length - 1 ? store.activeChapterList[idx + 1] : null,
       remaining: store.activeChapterList.slice(idx + 1),
     };
-  })());
+  });
 
-  const visibleChunkLastPage = $derived((() => {
+  const visibleChunkLastPage = $derived.by(() => {
     if (style !== "longstrip" || !autoNext) return lastPage;
     const chId  = visibleChapterId ?? store.activeChapter?.id;
     const chunk = stripChapters.find(c => c.chapterId === chId);
     return chunk?.urls.length ?? lastPage;
-  })());
+  });
 
   const imgCls = $derived([
     "img",
@@ -132,27 +164,22 @@
   ].filter(Boolean).join(" "));
 
   const fitLabel = $derived({ width: "Fit W", height: "Fit H", screen: "Fit Screen", original: "1:1" }[fit]);
-  const styleLabel = $derived(style);
 
-  function maybeMarkCurrentRead() {
+  const stripToRender = $derived(
-    const ch = store.activeChapter;
+    style === "longstrip"
-    if (!ch || !markOnNext || markedRead.has(ch.id)) return;
+      ? (autoNext && stripChapters.length > 0
-    markedRead.add(ch.id);
+          ? stripChapters
-    gql(MARK_CHAPTER_READ, { id: ch.id, isRead: true })
+          : [{ chapterId: store.activeChapter?.id ?? 0, chapterName: store.activeChapter?.name ?? "", urls: store.pageUrls }])
-      .then(() => {
+      : []
-        if (store.activeManga) {
+  );
-          const updated = store.activeChapterList.map(c => c.id === ch.id ? { ...c, isRead: true } : c);
-          checkAndMarkCompleted(store.activeManga.id, updated);
-        }
-      })
-      .catch(e => { markedRead.delete(ch.id); console.error(e); });
-  }
 
-  function showUi() {
+  const currentGroup = $derived(
-    uiVisible = true;
+    style === "double" && pageGroups.length
-    if (hideTimer) clearTimeout(hideTimer);
+      ? (pageGroups.find(g => g.includes(store.pageNumber)) ?? [store.pageNumber])
-    hideTimer = setTimeout(() => uiVisible = false, 3000);
+      : [store.pageNumber]
-  }
+  );
+
+  // ─── Chapter loading ──────────────────────────────────────────────────────────
 
   $effect(() => {
     const ch = store.activeChapter;
@@ -164,10 +191,10 @@
     const ctrl = new AbortController();
     abortCtrl  = ctrl;
     loadingId  = id;
-    appended   = new Set([id]);
+    navToken++;
     appending    = false;
     markedRead   = new Set();
-    aspectCache.clear();
+    hasNavigated = false;
     loading      = true;
     error      = null;
     pageGroups = [];
@@ -181,10 +208,6 @@
       if (ctrl.signal.aborted) return;
       store.pageUrls = urls;
       pageReady      = true;
-      if (style === "longstrip" && autoNext) {
-        stripChapters    = [{ chapterId: id, chapterName: store.activeChapter?.name ?? "", urls, startGlobalIdx: 0 }];
-        visibleChapterId = id;
-      }
       loading        = false;
     } catch (e: any) {
       if (ctrl.signal.aborted) return;
@@ -193,157 +216,157 @@
     }
   }
 
+  // ─── Strip initialisation ─────────────────────────────────────────────────────
+  // Runs when a chapter finishes loading in longstrip mode.
+  // Starts the strip with just the current chapter; appendNextChapter adds more
+  // as the user scrolls. Nothing is ever removed from the DOM mid-read.
+
+  $effect(() => {
+    if (style === "longstrip" && store.pageUrls.length && store.activeChapter) {
+      const ch   = store.activeChapter;
+      const urls = store.pageUrls;
+      appending = false;
+      if (autoNext) {
+        stripChapters    = [{ chapterId: ch.id, chapterName: ch.name, urls }];
+        visibleChapterId = ch.id;
+      } else {
+        stripChapters    = [];
+        visibleChapterId = null;
+      }
+      if (containerEl) containerEl.scrollTop = 0;
+    }
+  });
+
+  $effect(() => { if (style !== "longstrip" && containerEl) containerEl.scrollTop = 0; });
+
+  // ─── Forward append only ──────────────────────────────────────────────────────
+  // Appends the next chapter to the bottom when the user scrolls past 80%.
+  // No eviction, no prepend, no sliding window — chapters accumulate forward.
+
   function appendNextChapter() {
-    if (appending) return;
+    if (appending || !stripChapters.length) return;
     const lastChunk = stripChapters[stripChapters.length - 1];
-    if (!lastChunk) return;
     const list      = store.activeChapterList;
     const lastIdx   = list.findIndex(c => c.id === lastChunk.chapterId);
     if (lastIdx < 0 || lastIdx >= list.length - 1) return;
     const next = list[lastIdx + 1];
-    if (!next || appended.has(next.id)) return;
+    if (!next || stripChapters.some(c => c.chapterId === next.id)) return;
-    appended.add(next.id);
     appending = true;
+
     fetchPages(next.id)
-      .then(urls => { urls.forEach(url => measureAspect(url).catch(() => {})); urls.slice(0, 6).forEach(preloadImage); return urls; })
       .then(urls => {
-        if (stripChapters.some(c => c.chapterId === next.id)) return;
+        urls.forEach(url => measureAspect(url).catch(() => {}));
-        const last  = stripChapters[stripChapters.length - 1];
+        urls.slice(0, 6).forEach(preloadImage);
-        const start = last ? last.startGlobalIdx + last.urls.length : 0;
+        return urls;
-        const MAX_STRIP = 8;
+      })
-        if (stripChapters.length >= MAX_STRIP && containerEl) {
+      .then(urls => {
-          scrollAnchor = { scrollTop: containerEl.scrollTop, scrollHeight: containerEl.scrollHeight };
+        if (stripChapters.some(c => c.chapterId === next.id)) { appending = false; return; }
-          stripChapters = [...stripChapters.slice(1), { chapterId: next.id, chapterName: next.name, urls, startGlobalIdx: start }];
+        stripChapters = [...stripChapters, { chapterId: next.id, chapterName: next.name, urls }];
-          tick().then(() => {
-            if (!scrollAnchor || !containerEl) return;
-            const gained = containerEl.scrollHeight - scrollAnchor.scrollHeight;
-            if (gained < 0) containerEl.scrollTop = Math.max(0, scrollAnchor.scrollTop + gained);
-            scrollAnchor = null;
-          });
-        } else {
-          stripChapters = [...stripChapters, { chapterId: next.id, chapterName: next.name, urls, startGlobalIdx: start }];
-        }
         appending = false;
       })
       .catch(() => { appending = false; });
   }
 
-  function setupScrollTracking() {
+  // ─── Scroll tracking ──────────────────────────────────────────────────────────
-    if (!containerEl || style !== "longstrip") return;
+
-    const READ_LINE_PCT = 0.20;
+  let stripChaptersRef: StripChapter[] = [];
+  $effect(() => { stripChaptersRef = stripChapters; });
+
+  let autoNextRef = false;
+  $effect(() => { autoNextRef = autoNext; });
+
+  function setupScrollTracking(): () => void {
+    if (!containerEl || style !== "longstrip") return () => {};
+
     function onScroll() {
+      const imgs = containerEl.querySelectorAll<HTMLElement>("img[data-local-page]");
+      if (!imgs.length) return;
+
       const containerTop = containerEl.getBoundingClientRect().top;
       const readLineY    = containerTop + containerEl.clientHeight * READ_LINE_PCT;
-      const imgs = containerEl.querySelectorAll<HTMLElement>("img[data-local-page]");
+      let activePage: number | null = null;
-      let activeLocalPage: number | null = null;
       let activeChId: number | null = null;
+
       for (const img of imgs) {
-        const rect = img.getBoundingClientRect();
+        if (img.getBoundingClientRect().top <= readLineY) {
-        if (rect.top <= readLineY) { activeLocalPage = Number(img.dataset.localPage); activeChId = Number(img.dataset.chapter); }
+          activePage = Number(img.dataset.localPage);
-        else break;
+          activeChId = Number(img.dataset.chapter);
+        } else break;
       }
-      if (activeLocalPage === null && imgs.length > 0) { activeLocalPage = Number(imgs[0].dataset.localPage); activeChId = Number(imgs[0].dataset.chapter); }
+
-      if (activeLocalPage !== null) store.pageNumber = activeLocalPage;
+      if (activePage === null) {
+        activePage = Number(imgs[0].dataset.localPage);
+        activeChId = Number(imgs[0].dataset.chapter);
+      }
+
+      if (activePage !== null) store.pageNumber = activePage;
       if (activeChId && activeChId !== visibleChapterId) visibleChapterId = activeChId;
-      if (store.settings.autoMarkRead && activeLocalPage !== null && activeChId) {
+
-        const chunk = stripChapters.find(c => c.chapterId === activeChId);
+      if (store.settings.autoMarkRead && activePage !== null && activeChId) {
+        const chunk = stripChaptersRef.find(c => c.chapterId === activeChId);
         const total = chunk ? chunk.urls.length : store.pageUrls.length;
-        if (total > 0 && activeLocalPage >= total - 1 && !markedRead.has(activeChId)) {
+        if (total > 0 && activePage >= total) markChapterRead(activeChId);
-          markedRead.add(activeChId);
+      }
-          const chIdSnap = activeChId;
+
-          gql(MARK_CHAPTER_READ, { id: chIdSnap, isRead: true })
+      if (containerEl.scrollTop + containerEl.clientHeight >= containerEl.scrollHeight - 40) {
-            .then(() => { if (store.activeManga) { const updated = store.activeChapterList.map(c => c.id === chIdSnap ? { ...c, isRead: true } : c); checkAndMarkCompleted(store.activeManga.id, updated); } })
+        const last = stripChaptersRef[stripChaptersRef.length - 1];
-            .catch(e => { markedRead.delete(chIdSnap); console.error(e); });
+        if (last && store.settings.autoMarkRead) markChapterRead(last.chapterId);
       }
     }
-      if (containerEl.scrollTop + containerEl.clientHeight < containerEl.scrollHeight - 40) return;
+
-      const last = stripChapters[stripChapters.length - 1];
+    function onScrollAppend() {
-      if (last && store.settings.autoMarkRead && !markedRead.has(last.chapterId)) {
+      if (!autoNextRef) return;
-        markedRead.add(last.chapterId);
-        const lastIdSnap = last.chapterId;
-        gql(MARK_CHAPTER_READ, { id: lastIdSnap, isRead: true })
-          .then(() => { if (store.activeManga) { const updated = store.activeChapterList.map(c => c.id === lastIdSnap ? { ...c, isRead: true } : c); checkAndMarkCompleted(store.activeManga.id, updated); } })
-          .catch(console.error);
-      }
-    }
-    function onScroll80() {
       const pct = (containerEl.scrollTop + containerEl.clientHeight) / containerEl.scrollHeight;
-      if (pct >= 0.8) appendNextChapter();
+      if (pct >= 0.80) appendNextChapter();
     }
+
     containerEl.addEventListener("scroll", onScroll,       { passive: true });
-    if (autoNext) containerEl.addEventListener("scroll", onScroll80, { passive: true });
+    containerEl.addEventListener("scroll", onScrollAppend, { passive: true });
-    onScroll();
+
-    return () => { containerEl.removeEventListener("scroll", onScroll); containerEl.removeEventListener("scroll", onScroll80); };
+    return () => {
+      containerEl.removeEventListener("scroll", onScroll);
+      containerEl.removeEventListener("scroll", onScrollAppend);
+    };
   }
 
-  function advanceGroup(forward: boolean) {
+  // ─── Observer lifecycle ───────────────────────────────────────────────────────
-    if (!pageGroups.length) return;
-    const gi = pageGroups.findIndex(g => g.includes(store.pageNumber));
-    if (forward) {
-      if (gi < pageGroups.length - 1) store.pageNumber = pageGroups[gi + 1][0];
-      else if (adjacent.next) { store.pageNumber = 1; openReader(adjacent.next, store.activeChapterList); }
-      else closeReader();
-    } else {
-      if (gi > 0) store.pageNumber = pageGroups[gi - 1][0];
-      else if (adjacent.prev) openReader(adjacent.prev, store.activeChapterList);
-    }
-  }
 
-  function goForward() {
+  let cleanupScroll: () => void = () => {};
-    if (loading) return;
-    if (style === "longstrip") { if (adjacent.next) { maybeMarkCurrentRead(); openReader(adjacent.next, store.activeChapterList); } return; }
-    if (style === "double" && pageGroups.length) { advanceGroup(true); return; }
-    if (!store.pageUrls.length) return;
-    if (store.pageNumber < lastPage) { decodeImage(store.pageUrls[store.pageNumber]).then(() => store.pageNumber++); }
-    else if (adjacent.next) { maybeMarkCurrentRead(); store.pageNumber = 1; openReader(adjacent.next, store.activeChapterList); }
-    else closeReader();
-  }
-
-  function goBack() {
-    if (loading) return;
-    if (style === "longstrip") { if (adjacent.prev) openReader(adjacent.prev, store.activeChapterList); return; }
-    if (style === "double" && pageGroups.length) { advanceGroup(false); return; }
-    if (!store.pageUrls.length) return;
-    if (store.pageNumber > 1) { decodeImage(store.pageUrls[store.pageNumber - 2]).then(() => store.pageNumber--); }
-    else if (adjacent.prev) openReader(adjacent.prev, store.activeChapterList);
-  }
-
-  const goNext = $derived(rtl ? goBack  : goForward);
-  const goPrev = $derived(rtl ? goForward : goBack);
-
-  function cycleStyle() {
-    const opts = ["single", "longstrip"] as const;
-    const cur  = style === "double" ? "single" : style;
-    updateSettings({ pageStyle: opts[(opts.indexOf(cur as typeof opts[number]) + 1) % opts.length] });
-  }
-
-  function cycleFit() {
-    const opts: FitMode[] = ["width", "height", "screen", "original"];
-    updateSettings({ fitMode: opts[(opts.indexOf(fit) + 1) % opts.length] });
-  }
 
   $effect(() => {
-    if (store.activeChapter && lastPage && store.activeManga) {
+    void style;
-      const chapterId  = store.activeChapter.id;
+    if (!containerEl) return;
-      const chapterName = store.activeChapter.name;
-      const mangaId    = store.activeManga.id;
-      const mangaTitle = store.activeManga.title;
-      const thumbUrl   = store.activeManga.thumbnailUrl;
-      const pageNum    = store.pageNumber;
-      const atLast     = store.pageNumber === lastPage;
     untrack(() => {
-        addHistory({ mangaId, mangaTitle, thumbnailUrl: thumbUrl, chapterId, chapterName, pageNumber: pageNum, readAt: Date.now() });
+      cleanupScroll();
-        if (style !== "longstrip" && store.settings.autoMarkRead && atLast) {
+      cleanupScroll = setupScrollTracking();
-          if (!markedRead.has(chapterId)) {
+    });
-            markedRead.add(chapterId);
+  });
-            gql(MARK_CHAPTER_READ, { id: chapterId, isRead: true })
+
-              .then(() => { if (store.activeManga) { const updated = store.activeChapterList.map(c => c.id === chapterId ? { ...c, isRead: true } : c); checkAndMarkCompleted(store.activeManga.id, updated); } })
+  // ─── Prefetch + cache eviction ────────────────────────────────────────────────
-              .catch(console.error);
+
+  $effect(() => {
+    if (store.activeChapter && store.activeChapterList.length) {
+      const idx = store.activeChapterList.findIndex(c => c.id === store.activeChapter!.id);
+      if (idx >= 0) {
+        const toPin: number[] = [store.activeChapter.id];
+        for (let i = 1; i <= 3; i++) {
+          const entry = store.activeChapterList[idx + i];
+          if (!entry) break;
+          toPin.push(entry.id);
+          fetchPages(entry.id)
+            .then(urls => { const n = i === 1 ? 8 : i === 2 ? 4 : 2; urls.slice(0, n).forEach(preloadImage); })
+            .catch(() => {});
+        }
+        if (idx > 0) {
+          toPin.push(store.activeChapterList[idx - 1].id);
+          fetchPages(store.activeChapterList[idx - 1].id).catch(() => {});
+        }
+        cacheEvict(new Set(toPin));
       }
     }
   });
-    }
+
-  });
+  // ─── Double-page spread computation ──────────────────────────────────────────
 
   $effect(() => {
     if (style === "double" && store.pageUrls.length) {
@@ -366,6 +389,8 @@
     } else { pageGroups = []; }
   });
 
+  // ─── Preload around current page ─────────────────────────────────────────────
+
   $effect(() => {
     const ahead = store.settings.preloadPages ?? 3;
     for (let i = 1; i <= ahead; i++) { const url = store.pageUrls[store.pageNumber - 1 + i]; if (url) decodeImage(url); }
@@ -373,40 +398,136 @@
     if (behind) preloadImage(behind);
   });
 
+  // ─── Progress / history tracking ─────────────────────────────────────────────
+  // Only records history after the user has genuinely navigated (pageNumber > 1,
+  // or scrolled past page 1 in longstrip). This prevents the chapter-open event
+  // from writing "page 1" as the last-read position, which caused the history to
+  // always show the chapter you started on rather than where you left off.
+
   $effect(() => {
-    if (store.activeChapter && store.activeChapterList.length) {
+    // Use displayChapter, not store.activeChapter — in longstrip with autoNext,
-      const idx = store.activeChapterList.findIndex(c => c.id === store.activeChapter!.id);
+    // store.activeChapter stays as the chapter you *opened* (e.g. ch61) while
-      if (idx >= 0) {
+    // displayChapter tracks visibleChapterId (the chapter actually on screen).
-        const toPin: number[] = [store.activeChapter.id];
+    // Using store.activeChapter here caused every history write to stamp ch61
-        for (let i = 1; i <= 3; i++) {
+    // even when the user had scrolled all the way to ch72.
-          const entry = store.activeChapterList[idx + i];
+    const ch = displayChapter ?? store.activeChapter;
-          if (!entry) break;
+    if (ch && lastPage && store.activeManga) {
-          toPin.push(entry.id);
+      const chapterId   = ch.id;
-          fetchPages(entry.id).then(urls => { const n = i === 1 ? 8 : i === 2 ? 4 : 2; urls.slice(0, n).forEach(preloadImage); }).catch(() => {});
+      const chapterName = ch.name;
-        }
+      const mangaId     = store.activeManga.id;
-        if (idx > 0) { const prev = store.activeChapterList[idx - 1]; toPin.push(prev.id); fetchPages(prev.id).catch(() => {}); }
+      const mangaTitle  = store.activeManga.title;
-        cacheEvict(new Set(toPin));
+      const thumb       = store.activeManga.thumbnailUrl;
-      }
+      const pageNum     = store.pageNumber;
+      const atLast      = store.pageNumber === lastPage;
+
+      // Mark that the user has moved past the initial load.
+      if (pageNum > 1) hasNavigated = true;
+
+      untrack(() => {
+        // Skip the very first page-1 write that fires on chapter load.
+        if (!hasNavigated) return;
+        addHistory({ mangaId, mangaTitle, thumbnailUrl: thumb, chapterId, chapterName, pageNumber: pageNum, readAt: Date.now() });
+        if (style !== "longstrip" && store.settings.autoMarkRead && atLast) markChapterRead(chapterId);
+      });
     }
   });
 
-  $effect(() => {
+  // ─── Mark read ────────────────────────────────────────────────────────────────
-    if (style === "longstrip" && store.pageUrls.length && store.activeChapter) {
+
-      appended  = new Set([store.activeChapter.id]);
+  function markChapterRead(id: number) {
-      appending = false;
+    if (markedRead.has(id)) return;
-      if (autoNext) {
+    markedRead.add(id);
-        stripChapters    = [{ chapterId: store.activeChapter.id, chapterName: store.activeChapter.name, urls: store.pageUrls, startGlobalIdx: 0 }];
+    const chapter = store.activeChapterList.find(c => c.id === id) ?? store.activeChapter;
-        visibleChapterId = store.activeChapter.id;
+    const pages   = chapter?.pageCount ?? store.pageUrls.length ?? 15;
+    const minutes = Math.max(1, Math.round(pages * AVG_MIN_PER_PAGE));
+    if (store.activeManga && chapter) {
+      addHistory(
+        { mangaId: store.activeManga.id, mangaTitle: store.activeManga.title, thumbnailUrl: store.activeManga.thumbnailUrl, chapterId: id, chapterName: chapter.name, pageNumber: pages, readAt: Date.now() },
+        true, minutes,
+      );
+    }
+    gql(MARK_CHAPTER_READ, { id, isRead: true })
+      .then(() => {
+        if (store.activeManga) {
+          const updated = store.activeChapterList.map(c => c.id === id ? { ...c, isRead: true } : c);
+          checkAndMarkCompleted(store.activeManga.id, updated);
+        }
+      })
+      .catch(e => { markedRead.delete(id); console.error(e); });
+  }
+
+  function maybeMarkCurrentRead() {
+    const ch = store.activeChapter;
+    if (ch && markOnNext) markChapterRead(ch.id);
+  }
+
+  // ─── Navigation ───────────────────────────────────────────────────────────────
+
+  function advanceGroup(forward: boolean) {
+    if (!pageGroups.length) return;
+    const gi = pageGroups.findIndex(g => g.includes(store.pageNumber));
+    if (forward) {
+      if (gi < pageGroups.length - 1) store.pageNumber = pageGroups[gi + 1][0];
+      else if (adjacent.next) { store.pageNumber = 1; openReader(adjacent.next, store.activeChapterList); }
+      else closeReader();
     } else {
-        stripChapters    = [];
+      if (gi > 0) store.pageNumber = pageGroups[gi - 1][0];
-        visibleChapterId = null;
+      else if (adjacent.prev) openReader(adjacent.prev, store.activeChapterList);
     }
-      if (containerEl) containerEl.scrollTop = 0;
   }
-  });
 
-  $effect(() => { if (store.activeChapter?.id && containerEl) containerEl.scrollTop = 0; });
+  function goForward() {
-  $effect(() => { if (style !== "longstrip" && containerEl) containerEl.scrollTop = 0; });
+    if (loading) return;
+    if (style === "longstrip") { if (adjacent.next) { maybeMarkCurrentRead(); openReader(adjacent.next, store.activeChapterList); } return; }
+    if (style === "double" && pageGroups.length) { advanceGroup(true); return; }
+    if (!store.pageUrls.length) return;
+    if (store.pageNumber < lastPage) {
+      const target = store.pageNumber + 1;
+      const token  = ++navToken;
+      decodeImage(store.pageUrls[target - 1]).then(() => {
+        if (navToken === token && store.pageNumber === target - 1) store.pageNumber = target;
+      });
+    } else if (adjacent.next) { maybeMarkCurrentRead(); store.pageNumber = 1; openReader(adjacent.next, store.activeChapterList); }
+    else closeReader();
+  }
+
+  function goBack() {
+    if (loading) return;
+    if (style === "longstrip") { if (adjacent.prev) openReader(adjacent.prev, store.activeChapterList); return; }
+    if (style === "double" && pageGroups.length) { advanceGroup(false); return; }
+    if (!store.pageUrls.length) return;
+    if (store.pageNumber > 1) {
+      const target = store.pageNumber - 1;
+      const token  = ++navToken;
+      decodeImage(store.pageUrls[target - 1]).then(() => {
+        if (navToken === token && store.pageNumber === target + 1) store.pageNumber = target;
+      });
+    } else if (adjacent.prev) openReader(adjacent.prev, store.activeChapterList);
+  }
+
+  const goNext = $derived(rtl ? goBack    : goForward);
+  const goPrev = $derived(rtl ? goForward : goBack);
+
+  // ─── Settings toggles ─────────────────────────────────────────────────────────
+
+  function cycleStyle() {
+    const opts = ["single", "longstrip"] as const;
+    const cur  = style === "double" ? "single" : style;
+    updateSettings({ pageStyle: opts[(opts.indexOf(cur as typeof opts[number]) + 1) % opts.length] });
+  }
+
+  function cycleFit() {
+    const opts: FitMode[] = ["width", "height", "screen", "original"];
+    updateSettings({ fitMode: opts[(opts.indexOf(fit) + 1) % opts.length] });
+  }
+
+  // ─── UI helpers ───────────────────────────────────────────────────────────────
+
+  function showUi() {
+    uiVisible = true;
+    if (hideTimer) clearTimeout(hideTimer);
+    hideTimer = setTimeout(() => uiVisible = false, 3000);
+  }
 
   function onWheel(e: WheelEvent) {
     if (!e.ctrlKey) return;
@@ -464,47 +585,24 @@
     dlBusy = false; dlOpen = false;
   }
 
-  let scrollCleanup: (() => void) | undefined;
+  // ─── Mount / unmount ──────────────────────────────────────────────────────────
 
   onMount(() => {
     showUi();
     window.addEventListener("keydown", onKey);
     window.addEventListener("wheel", onWheel, { passive: false });
     containerEl?.focus({ preventScroll: true });
-    scrollCleanup = setupScrollTracking();
     return () => {
       abortCtrl?.abort();
       if (hideTimer) clearTimeout(hideTimer);
       window.removeEventListener("keydown", onKey);
       window.removeEventListener("wheel", onWheel);
-      scrollCleanup?.();
+      cleanupScroll();
     };
   });
-
-  $effect(() => {
-    if (!containerEl) return;
-    const _style = style;
-    const _len   = store.pageUrls.length;
-    const _auto  = autoNext;
-    untrack(() => {
-      scrollCleanup?.();
-      scrollCleanup = setupScrollTracking();
-    });
-    return () => { scrollCleanup?.(); };
-  });
-
-  const stripToRender = $derived(style === "longstrip"
-    ? (autoNext && stripChapters.length > 0
-        ? stripChapters
-        : [{ chapterId: store.activeChapter?.id ?? 0, chapterName: store.activeChapter?.name ?? "", urls: store.pageUrls, startGlobalIdx: 0 }])
-    : []);
-
-  const currentGroup = $derived(style === "double" && pageGroups.length
-    ? (pageGroups.find(g => g.includes(store.pageNumber)) ?? [store.pageNumber])
-    : [store.pageNumber]);
 </script>
 
-<div class="root" role="presentation" onmousemove={(e) => { if (e.clientY < 60 || window.innerHeight - e.clientY < 60) showUi(); }}>
+<div class="root" class:overlay-bars={overlayBars} role="presentation" onmousemove={(e) => { if (e.clientY < 60 || window.innerHeight - e.clientY < 60) showUi(); }}>
 
   <div class="topbar" class:hidden={!uiVisible}>
     <button class="icon-btn" onclick={closeReader} title="Close reader"><X size={15} weight="light" /></button>
@@ -543,7 +641,7 @@
     </button>
     <button class="mode-btn" onclick={cycleStyle}>
       {#if style === "single"}<Square size={14} weight="light" />{:else}<Rows size={14} weight="light" />{/if}
-      <span class="mode-label">{styleLabel}</span>
+      <span class="mode-label">{style}</span>
     </button>
     {#if style !== "single"}
       <button class="mode-btn" class:active={store.settings.pageGap} onclick={() => updateSettings({ pageGap: !store.settings.pageGap })}>
@@ -586,10 +684,19 @@
     {#if style === "longstrip"}
       {#each stripToRender as chunk}
         {#each chunk.urls as url, i}
-          <img src={url} alt="{chunk.chapterName} – Page {i + 1}" data-local-page={i + 1} data-chapter={chunk.chapterId} data-total={chunk.urls.length} class="{imgCls}{store.settings.pageGap ? ' strip-gap' : ''}" loading={i < 3 ? "eager" : "lazy"} decoding="async" height="1000" />
+          <img
+            src={url}
+            alt="{chunk.chapterName} – Page {i + 1}"
+            data-local-page={i + 1}
+            data-chapter={chunk.chapterId}
+            data-total={chunk.urls.length}
+            class="{imgCls}{store.settings.pageGap ? ' strip-gap' : ''}"
+            loading={i < 3 ? "eager" : "lazy"}
+            decoding="async"
+          />
         {/each}
       {/each}
-      <div bind:this={sentinelEl} style="height:1px;flex-shrink:0;overflow-anchor:none"></div>
+      <div style="height:1px;flex-shrink:0"></div>
     {:else if pageReady}
       {#if style === "double" && pageGroups.length}
         <div class="double-wrap">
@@ -646,6 +753,10 @@
 
 <style>
   .root { position: fixed; inset: 0; background: #000; display: flex; flex-direction: column; z-index: var(--z-reader); transform: translateZ(0); will-change: transform; }
+  .overlay-bars { position: fixed; }
+  .overlay-bars .topbar    { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
+  .overlay-bars .bottombar { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; }
+  .overlay-bars .viewer    { height: 100%; }
   .topbar { display: flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-3); height: 40px; background: var(--bg-void); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; position: relative; z-index: 2; transition: opacity 0.25s ease; }
   .topbar.hidden, .bottombar.hidden { opacity: 0; pointer-events: none; }
   .icon-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--text-muted); flex-shrink: 0; transition: color var(--t-base), background var(--t-base); }
@@ -663,13 +774,13 @@
   .zoom-wrap { position: relative; flex-shrink: 0; }
   .zoom-btn { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); padding: 4px var(--sp-2); border-radius: var(--radius-sm); min-width: 36px; text-align: center; transition: color var(--t-base), background var(--t-base); }
   .zoom-btn:hover { color: var(--text-secondary); background: var(--bg-raised); }
-  .zoom-popover { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-3) var(--sp-2); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 100; min-width: 160px; animation: scaleIn 0.1s ease both; transform-origin: top center; }
+  .zoom-popover { position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0; background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: var(--sp-3) var(--sp-3) var(--sp-2); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 100; min-width: 160px; animation: scaleIn 0.1s ease both; transform-origin: top center; }
   .zoom-slider { width: 140px; height: 3px; appearance: none; -webkit-appearance: none; background: var(--border-strong); border-radius: 2px; outline: none; cursor: pointer; }
   .zoom-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-fg); cursor: pointer; }
   .zoom-reset { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); padding: 2px var(--sp-2); border-radius: var(--radius-sm); transition: color var(--t-base), background var(--t-base); }
   .zoom-reset:hover { color: var(--text-primary); background: var(--bg-overlay); }
   .viewer { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-overflow-scrolling: touch; position: relative; }
-  .viewer.strip { justify-content: flex-start; padding: var(--sp-4) 0; overflow-anchor: auto; }
+  .viewer.strip { justify-content: flex-start; padding: var(--sp-4) 0; }
   .viewer:focus { outline: none; }
   .img { display: block; user-select: none; image-rendering: auto; }
   .img.optimize-contrast { image-rendering: -webkit-optimize-contrast; }

src/components/settings/ThemeEditor.svelte

@@ -0,0 +1,585 @@
+<script lang="ts">
+  import { X, FloppyDisk, UploadSimple, DownloadSimple, ArrowLeft, Trash } from "phosphor-svelte";
+  import {
+    store, updateSettings, saveCustomTheme, deleteCustomTheme,
+    type CustomTheme, type ThemeTokens, DEFAULT_THEME_TOKENS,
+  } from "../../store/state.svelte";
+
+  interface Props {
+    editingId?: string | null;
+    onClose: () => void;
+  }
+
+  let { editingId = $bindable(null), onClose }: Props = $props();
+
+  // ── Token group definitions ───────────────────────────────────────────────
+
+  const TOKEN_GROUPS: { label: string; tokens: (keyof ThemeTokens)[] }[] = [
+    {
+      label: "Backgrounds",
+      tokens: ["bg-void", "bg-base", "bg-surface", "bg-raised", "bg-overlay", "bg-subtle"],
+    },
+    {
+      label: "Borders",
+      tokens: ["border-dim", "border-base", "border-strong", "border-focus"],
+    },
+    {
+      label: "Text",
+      tokens: ["text-primary", "text-secondary", "text-muted", "text-faint", "text-disabled"],
+    },
+    {
+      label: "Accent",
+      tokens: ["accent", "accent-dim", "accent-muted", "accent-fg", "accent-bright"],
+    },
+    {
+      label: "Semantic",
+      tokens: ["color-error", "color-error-bg", "color-success", "color-info", "color-info-bg"],
+    },
+  ];
+
+  const TOKEN_LABELS: Record<keyof ThemeTokens, string> = {
+    "bg-void":    "Void (deepest bg)",
+    "bg-base":    "Base",
+    "bg-surface": "Surface",
+    "bg-raised":  "Raised",
+    "bg-overlay": "Overlay",
+    "bg-subtle":  "Subtle",
+    "border-dim":    "Dim border",
+    "border-base":   "Base border",
+    "border-strong": "Strong border",
+    "border-focus":  "Focus ring",
+    "text-primary":   "Primary text",
+    "text-secondary": "Secondary text",
+    "text-muted":     "Muted text",
+    "text-faint":     "Faint text",
+    "text-disabled":  "Disabled text",
+    "accent":        "Accent",
+    "accent-dim":    "Accent dim",
+    "accent-muted":  "Accent muted",
+    "accent-fg":     "Accent foreground",
+    "accent-bright": "Accent bright",
+    "color-error":    "Error",
+    "color-error-bg": "Error background",
+    "color-success":  "Success",
+    "color-info":     "Info",
+    "color-info-bg":  "Info background",
+  };
+
+  // ── State ─────────────────────────────────────────────────────────────────
+
+  function loadInitial(): { name: string; tokens: ThemeTokens } {
+    if (editingId) {
+      const existing = store.settings.customThemes.find(t => t.id === editingId);
+      if (existing) return { name: existing.name, tokens: { ...existing.tokens } };
+    }
+    return { name: "My Theme", tokens: { ...DEFAULT_THEME_TOKENS } };
+  }
+
+  const initial = loadInitial();
+  let themeName: string   = $state(initial.name);
+  let tokens: ThemeTokens = $state(initial.tokens);
+  let saveStatus: "idle" | "saved" = $state("idle");
+  let importError: string | null   = $state(null);
+
+  // ── CSS vars helper ───────────────────────────────────────────────────────
+  function toCssVars(t: ThemeTokens): string {
+    return Object.entries(t).map(([k, v]) => `--${k}: ${v};`).join(" ");
+  }
+
+  // ── Actions ───────────────────────────────────────────────────────────────
+
+  function handleSave() {
+    const name = themeName.trim() || "Untitled Theme";
+    const id   = editingId ?? `custom:${Math.random().toString(36).slice(2, 10)}`;
+    const theme: CustomTheme = { id, name, tokens: { ...tokens } };
+    saveCustomTheme(theme);
+    updateSettings({ theme: id });
+    editingId = id;
+    saveStatus = "saved";
+    setTimeout(() => (saveStatus = "idle"), 1800);
+  }
+
+  function handleDelete() {
+    if (!editingId) { onClose(); return; }
+    if (!confirm(`Delete theme "${themeName}"? This cannot be undone.`)) return;
+    deleteCustomTheme(editingId);
+    onClose();
+  }
+
+  function handleExport() {
+    const data: CustomTheme = {
+      id:     editingId ?? "custom:export",
+      name:   themeName.trim() || "Untitled Theme",
+      tokens: { ...tokens },
+    };
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+    const url  = URL.createObjectURL(blob);
+    const a    = document.createElement("a");
+    a.href     = url;
+    a.download = `${data.name.replace(/[^a-z0-9]/gi, "-").toLowerCase()}-theme.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  function handleImport() {
+    const inp    = document.createElement("input");
+    inp.type     = "file";
+    inp.accept   = ".json";
+    inp.onchange = async () => {
+      const file = inp.files?.[0];
+      if (!file) return;
+      try {
+        const text = await file.text();
+        const data = JSON.parse(text);
+        if (!data.tokens || typeof data.tokens !== "object") throw new Error("Invalid theme file — missing tokens");
+        if (typeof data.name === "string") themeName = data.name;
+        tokens      = { ...DEFAULT_THEME_TOKENS, ...data.tokens };
+        importError = null;
+      } catch (e: any) {
+        importError = e.message ?? "Could not parse theme file";
+        setTimeout(() => (importError = null), 3000);
+      }
+    };
+    inp.click();
+  }
+
+  function resetToDefaults() {
+    tokens = { ...DEFAULT_THEME_TOKENS };
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (e.key === "Escape") onClose();
+  }
+</script>
+
+<svelte:window onkeydown={onKey} />
+
+<!-- ── Main editor ────────────────────────────────────────────────────────────── -->
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+<div class="te-backdrop" onclick={onClose} role="presentation">
+  <div
+    class="te-shell"
+    role="dialog"
+    aria-label="Theme editor"
+    onclick={(e) => e.stopPropagation()}
+  >
+
+    <!-- ── Header ──────────────────────────────────────────────────────── -->
+    <header class="te-header">
+      <div class="te-header-left">
+        <button class="te-icon-btn" onclick={onClose} title="Close editor">
+          <ArrowLeft size={14} weight="bold" />
+        </button>
+        <input
+          bind:value={themeName}
+          class="te-name-input"
+          placeholder="Theme name"
+          maxlength={40}
+          spellcheck={false}
+        />
+      </div>
+
+      <div class="te-header-actions">
+        {#if importError}
+          <span class="te-import-err">{importError}</span>
+        {/if}
+        <button class="te-action-btn" onclick={handleImport} title="Import from JSON">
+          <UploadSimple size={13} />
+          <span>Import</span>
+        </button>
+        <button class="te-action-btn" onclick={handleExport} title="Export as JSON">
+          <DownloadSimple size={13} />
+          <span>Export</span>
+        </button>
+        <button class="te-action-btn te-ghost" onclick={resetToDefaults} title="Reset all to dark defaults">
+          Reset
+        </button>
+        {#if editingId}
+          <button class="te-action-btn te-danger" onclick={handleDelete} title="Delete theme">
+            <Trash size={13} />
+          </button>
+        {/if}
+        <button class="te-save-btn" class:saved={saveStatus === "saved"} onclick={handleSave}>
+          <FloppyDisk size={13} />
+          <span>{saveStatus === "saved" ? "Saved!" : "Save Theme"}</span>
+        </button>
+        <button class="te-icon-btn" onclick={onClose} title="Close">
+          <X size={14} weight="bold" />
+        </button>
+      </div>
+    </header>
+
+    <!-- ── Body ───────────────────────────────────────────────────────── -->
+    <div class="te-body">
+
+      <!-- Left: live preview -->
+      <aside class="te-preview-pane">
+        <div class="te-pane-label">Live Preview</div>
+
+        <!--
+          FIX 1: toCssVars scoped only to this element, so only the
+          preview UI sees the draft tokens — not the editor shell.
+        -->
+        <div class="te-preview-ui" style={toCssVars(tokens)}>
+          <!-- Sidebar -->
+          <div class="prv-sidebar">
+            {#each [true, false, false, false] as active}
+              <div class="prv-sb-dot" class:active></div>
+            {/each}
+          </div>
+          <!-- Main -->
+          <div class="prv-main">
+            <div class="prv-titlebar">
+              <div class="prv-win-dots">
+                <span></span><span></span><span></span>
+              </div>
+              <div class="prv-win-title">Moku</div>
+            </div>
+            <div class="prv-content">
+              <div class="prv-row">
+                <div class="prv-bar" style="width:52px;background:var(--text-secondary);opacity:0.45"></div>
+                <div class="prv-bar" style="width:18px;background:var(--accent)"></div>
+              </div>
+              <div class="prv-grid">
+                {#each Array(6) as _, i}
+                  <div class="prv-card" class:active-card={i === 0}>
+                    <div class="prv-cover"></div>
+                    <div class="prv-card-line"></div>
+                  </div>
+                {/each}
+              </div>
+              <div class="prv-reader">
+                <div class="prv-page"></div>
+              </div>
+              <div class="prv-toast">
+                <div class="prv-toast-dot"></div>
+                <div class="prv-toast-lines">
+                  <div class="prv-bar" style="width:80%;background:var(--text-secondary)"></div>
+                  <div class="prv-bar" style="width:55%;background:var(--text-faint);margin-top:3px"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Swatch strip — scoped to draft tokens too -->
+        <div class="te-swatches" style={toCssVars(tokens)}>
+          {#each [
+            ["bg-base","bg-base"],["bg-surface","bg-surface"],
+            ["accent","accent"],["accent-fg","accent-fg"],
+            ["text-primary","text-primary"],["text-muted","text-muted"],
+            ["color-error","color-error"],
+          ] as [varName, label]}
+            <div
+              class="te-swatch"
+              style="background: var(--{varName})"
+              title={label}
+            ></div>
+          {/each}
+        </div>
+      </aside>
+
+      <!-- Right: token editor -->
+      <div class="te-editor-pane">
+        {#each TOKEN_GROUPS as group}
+          <div class="te-group">
+            <div class="te-group-label">{group.label}</div>
+            <div class="te-token-list">
+              {#each group.tokens as token}
+                <div class="te-token-row">
+                  <span class="te-color-swatch" style="background: {tokens[token]}"></span>
+                  <span class="te-token-name">{TOKEN_LABELS[token]}</span>
+                  <span class="te-token-key">{token}</span>
+                  <input
+                    type="text"
+                    class="te-hex-input"
+                    value={tokens[token]}
+                    spellcheck={false}
+                    oninput={(e) => {
+                      const v = (e.target as HTMLInputElement).value.trim();
+                      if (/^#[0-9a-fA-F]{3,8}$/.test(v)) tokens = { ...tokens, [token]: v };
+                    }}
+                    onblur={(e) => {
+                      const v = (e.target as HTMLInputElement).value.trim();
+                      if (!/^#[0-9a-fA-F]{3,8}$/.test(v)) {
+                        (e.target as HTMLInputElement).value = tokens[token];
+                      }
+                    }}
+                  />
+                </div>
+              {/each}
+            </div>
+          </div>
+        {/each}
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<style>
+  /* ── Backdrop ─────────────────────────────────────────────────────────────── */
+  .te-backdrop {
+    position: fixed; inset: 0;
+    background: rgba(0, 0, 0, 0.72);
+    z-index: 200;
+    /* FIX 2: center the modal instead of stretch */
+    display: flex; align-items: center; justify-content: center;
+    animation: teBackdropIn 0.14s ease both;
+  }
+  @keyframes teBackdropIn { from { opacity: 0; } to { opacity: 1; } }
+
+  /* ── Shell ────────────────────────────────────────────────────────────────── */
+  .te-shell {
+    /* FIX 2: constrained dimensions so it doesn't fill the screen */
+    width: calc(100% - 48px);
+    max-width: 1100px;
+    height: calc(100% - 48px);
+    max-height: 760px;
+    display: flex; flex-direction: column;
+    background: var(--bg-base);
+    border: 1px solid var(--border-base);
+    border-radius: 10px;
+    animation: teShellIn 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
+    overflow: hidden;
+  }
+  @keyframes teShellIn {
+    from { transform: translateY(10px) scale(0.99); opacity: 0; }
+    to   { transform: translateY(0) scale(1);       opacity: 1; }
+  }
+
+  /* ── Header ───────────────────────────────────────────────────────────────── */
+  .te-header {
+    display: flex; align-items: center; justify-content: space-between;
+    gap: 12px; padding: 0 16px; height: 46px;
+    border-bottom: 1px solid var(--border-dim);
+    background: var(--bg-surface);
+    flex-shrink: 0;
+  }
+
+  .te-header-left {
+    display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
+  }
+
+  .te-icon-btn {
+    display: flex; align-items: center; justify-content: center;
+    width: 26px; height: 26px; border-radius: 5px;
+    color: var(--text-muted);
+    transition: color 0.1s, background 0.1s;
+    flex-shrink: 0;
+  }
+  .te-icon-btn:hover { color: var(--text-primary); background: var(--bg-overlay); }
+
+  .te-name-input {
+    flex: 1; min-width: 0;
+    background: none; border: none; outline: none;
+    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
+    color: var(--text-primary);
+    border-bottom: 1px solid transparent;
+    padding: 3px 0;
+    transition: border-color 0.12s;
+  }
+  .te-name-input:focus { border-color: var(--border-focus); }
+  .te-name-input::placeholder { color: var(--text-faint); }
+
+  .te-header-actions {
+    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
+  }
+
+  .te-import-err {
+    font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.04em;
+    color: var(--color-error); flex-shrink: 0;
+  }
+
+  .te-action-btn {
+    display: flex; align-items: center; gap: 5px;
+    font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.06em;
+    padding: 4px 10px; border-radius: 4px;
+    border: 1px solid var(--border-dim);
+    background: none; color: var(--text-muted);
+    cursor: pointer; flex-shrink: 0;
+    transition: color 0.1s, border-color 0.1s, background 0.1s;
+  }
+  .te-action-btn:hover { color: var(--text-secondary); border-color: var(--border-strong); }
+
+  .te-ghost { border-color: transparent; }
+  .te-ghost:hover { border-color: var(--border-dim); }
+
+  .te-danger { color: var(--color-error); border-color: transparent; }
+  .te-danger:hover { background: var(--color-error-bg); border-color: var(--color-error); }
+
+  .te-save-btn {
+    display: flex; align-items: center; gap: 5px;
+    font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.06em;
+    padding: 5px 14px; border-radius: 4px;
+    border: 1px solid var(--accent-dim);
+    background: var(--accent-muted); color: var(--accent-fg);
+    cursor: pointer; flex-shrink: 0;
+    transition: filter 0.1s, background 0.12s;
+  }
+  .te-save-btn:hover { filter: brightness(1.12); }
+  .te-save-btn.saved { background: var(--accent-dim); border-color: var(--accent); }
+
+  /* ── Body ─────────────────────────────────────────────────────────────────── */
+  .te-body { flex: 1; overflow: hidden; display: flex; min-height: 0; }
+
+  /* ── Preview pane ─────────────────────────────────────────────────────────── */
+  .te-preview-pane {
+    width: 260px; flex-shrink: 0;
+    border-right: 1px solid var(--border-dim);
+    background: var(--bg-void);
+    display: flex; flex-direction: column;
+    padding: 16px; gap: 12px;
+  }
+
+  .te-pane-label {
+    font-family: var(--font-ui); font-size: 10px;
+    letter-spacing: 0.1em; text-transform: uppercase;
+    color: var(--text-faint);
+    flex-shrink: 0;
+  }
+
+  /* te-preview-ui receives draft CSS vars via inline style */
+  .te-preview-ui {
+    flex: 1; min-height: 0;
+    border-radius: 8px; overflow: hidden;
+    border: 1px solid var(--border-base);
+    display: flex; background: var(--bg-void);
+  }
+
+  /* Sidebar strip */
+  .prv-sidebar {
+    width: 34px; flex-shrink: 0;
+    background: var(--bg-surface);
+    border-right: 1px solid var(--border-dim);
+    display: flex; flex-direction: column;
+    align-items: center; padding: 12px 0; gap: 9px;
+  }
+  .prv-sb-dot {
+    width: 10px; height: 10px; border-radius: 50%;
+    background: var(--text-faint); opacity: 0.4;
+    transition: background 0.15s, opacity 0.15s;
+  }
+  .prv-sb-dot.active { background: var(--accent); opacity: 1; }
+
+  .prv-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+
+  .prv-titlebar {
+    height: 26px; flex-shrink: 0;
+    background: var(--bg-raised);
+    border-bottom: 1px solid var(--border-dim);
+    display: flex; align-items: center; padding: 0 8px; gap: 7px;
+  }
+  .prv-win-dots { display: flex; gap: 4px; }
+  .prv-win-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
+  .prv-win-title { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.1em; color: var(--text-faint); }
+
+  .prv-content {
+    flex: 1; overflow: hidden;
+    padding: 8px; display: flex; flex-direction: column; gap: 7px;
+    background: var(--bg-base);
+  }
+
+  .prv-row { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+  .prv-bar { height: 3px; border-radius: 2px; }
+
+  .prv-grid {
+    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; flex-shrink: 0;
+  }
+  .prv-card {
+    border-radius: 4px; border: 1px solid var(--border-dim);
+    background: var(--bg-raised); overflow: hidden;
+    transition: border-color 0.15s;
+  }
+  .prv-card.active-card { border-color: var(--accent); }
+  .prv-cover { height: 34px; background: var(--bg-overlay); }
+  .prv-card-line { height: 3px; margin: 4px 4px; border-radius: 2px; background: var(--text-faint); opacity: 0.5; }
+
+  .prv-reader {
+    flex: 1; min-height: 0;
+    border-radius: 4px; border: 1px solid var(--border-dim);
+    background: var(--bg-overlay);
+    display: flex; align-items: center; justify-content: center;
+  }
+  .prv-page { width: 68%; height: 86%; background: var(--bg-subtle); border-radius: 2px; }
+
+  .prv-toast {
+    flex-shrink: 0;
+    display: flex; align-items: center; gap: 6px;
+    padding: 6px 8px; border-radius: 5px;
+    background: var(--bg-overlay); border: 1px solid var(--accent-dim);
+  }
+  .prv-toast-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
+  .prv-toast-lines { flex: 1; }
+
+  /* Swatch strip */
+  .te-swatches { display: flex; gap: 5px; flex-wrap: wrap; flex-shrink: 0; }
+  .te-swatch {
+    width: 22px; height: 22px; border-radius: 4px;
+    border: 1px solid rgba(255,255,255,0.07);
+    flex-shrink: 0; cursor: default;
+  }
+
+  /* ── Editor pane ──────────────────────────────────────────────────────────── */
+  .te-editor-pane {
+    flex: 1; overflow-y: auto;
+    padding: 16px 20px;
+    display: flex; flex-direction: column; gap: 22px;
+  }
+  .te-editor-pane::-webkit-scrollbar { width: 4px; }
+  .te-editor-pane::-webkit-scrollbar-track { background: transparent; }
+  .te-editor-pane::-webkit-scrollbar-thumb {
+    background: var(--border-strong); border-radius: 9999px;
+  }
+
+  .te-group { display: flex; flex-direction: column; gap: 2px; }
+
+  .te-group-label {
+    font-family: var(--font-ui); font-size: 10px;
+    letter-spacing: 0.1em; text-transform: uppercase;
+    color: var(--text-faint);
+    padding-bottom: 7px; margin-bottom: 4px;
+    border-bottom: 1px solid var(--border-dim);
+  }
+
+  .te-token-list { display: flex; flex-direction: column; gap: 1px; }
+
+  .te-token-row {
+    display: flex; align-items: center; gap: 10px;
+    padding: 5px 8px; border-radius: 5px;
+    transition: background 0.1s;
+  }
+  .te-token-row:hover { background: var(--bg-raised); }
+
+  .te-color-swatch {
+    width: 16px; height: 16px; border-radius: 4px;
+    flex-shrink: 0;
+    border: 1px solid rgba(255,255,255,0.12);
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
+  }
+
+  .te-token-name {
+    flex: 1; font-size: 12px; color: var(--text-secondary);
+  }
+
+  .te-token-key {
+    font-family: var(--font-ui); font-size: 10px;
+    letter-spacing: 0.05em; color: var(--text-faint);
+    flex-shrink: 0; min-width: 0;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    max-width: 160px;
+  }
+
+  .te-hex-input {
+    width: 82px; flex-shrink: 0;
+    font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.05em;
+    color: var(--text-muted);
+    background: var(--bg-overlay);
+    border: 1px solid var(--border-dim);
+    border-radius: 3px; padding: 3px 7px;
+    outline: none;
+    transition: border-color 0.1s, color 0.1s;
+  }
+  .te-hex-input:focus { border-color: var(--border-focus); color: var(--text-primary); }
+
+</style>

src/components/shared/SourceList.svelte

@@ -53,6 +53,7 @@
     </div>
   </div>
 
+  <div class="content">
   <div class="lang-row">
     {#each langs as l}
       <button class="lang-btn" class:active={lang === l} onclick={() => lang = l}>
@@ -95,18 +96,20 @@
       {/each}
     </div>
   {/if}
+  </div><!-- .content -->
 </div>
 
 <style>
-  .root { padding: var(--sp-6); overflow-y: auto; height: 100%; animation: fadeIn 0.14s ease both; }
+  .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
-  .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
+  .content { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-6) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
+  .header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
   .heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
   .search-wrap { position: relative; display: flex; align-items: center; }
   .search-wrap :global(.search-icon) { position: absolute; left: 9px; color: var(--text-faint); pointer-events: none; }
   .search { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 5px 10px 5px 26px; color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none; transition: border-color var(--t-base); }
   .search::placeholder { color: var(--text-faint); }
   .search:focus { border-color: var(--border-strong); }
-  .lang-row { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-4); }
+  .lang-row { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
   .lang-btn { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
   .lang-btn:hover { color: var(--text-muted); border-color: var(--border-strong); }
   .lang-btn.active { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }

src/components/shared/TrackingPanel.svelte

@@ -0,0 +1,637 @@
+<script lang="ts">
+  import { CircleNotch, X, MagnifyingGlass, ArrowSquareOut, Lock, LockOpen, ArrowsClockwise } from "phosphor-svelte";
+  import { gql, thumbUrl } from "../../lib/client";
+  import {
+    GET_TRACKERS,
+    GET_MANGA_TRACK_RECORDS,
+    SEARCH_TRACKER,
+    BIND_TRACK,
+    UPDATE_TRACK,
+    UNBIND_TRACK,
+    FETCH_TRACK,
+  } from "../../lib/queries";
+  import { addToast } from "../../store/state.svelte";
+  import type { Tracker, TrackRecord, TrackSearch } from "../../lib/types";
+
+  let { mangaId, mangaTitle, onClose }: {
+    mangaId:    number;
+    mangaTitle: string;
+    onClose:    () => void;
+  } = $props();
+
+  // ── State ──────────────────────────────────────────────────────────────────
+
+  type TabId = "records" | number;
+
+  let trackers:    Tracker[]     = $state([]);
+  let records:     TrackRecord[] = $state([]);
+  let loading:     boolean       = $state(true);
+  let activeTab:   TabId         = $state("records");
+
+  let searchQuery:   string        = $state("");
+  let searchResults: TrackSearch[] = $state([]);
+  let searching:     boolean       = $state(false);
+  let searchInited:  Set<number>   = $state(new Set());
+
+  let binding:        boolean       = $state(false);
+  let updatingRecord: number | null = $state(null);
+  let syncing:        number | null = $state(null);
+  let editingChapter: number | null = $state(null);
+  let chapterDraft:   number        = $state(0);
+
+  // ── Load ───────────────────────────────────────────────────────────────────
+
+  async function load() {
+    loading = true;
+    try {
+      const [tRes, rRes] = await Promise.all([
+        gql<{ trackers: { nodes: Tracker[] } }>(GET_TRACKERS),
+        gql<{ manga: { trackRecords: { nodes: TrackRecord[] } } }>(
+          GET_MANGA_TRACK_RECORDS, { mangaId }
+        ),
+      ]);
+      trackers = tRes.trackers.nodes;
+      records  = rRes.manga.trackRecords.nodes;
+    } catch (e: any) {
+      addToast({ kind: "error", title: "Failed to load tracking", body: e?.message });
+    } finally {
+      loading = false;
+    }
+  }
+
+  $effect(() => { load(); });
+
+  // Auto-search with manga title when switching to a tracker tab
+  $effect(() => {
+    const tab = activeTab;
+    if (typeof tab !== "number") return;
+    if (searchInited.has(tab)) return;
+    searchQuery = mangaTitle;
+    searchInited = new Set([...searchInited, tab]);
+    doSearch(tab, mangaTitle);
+  });
+
+  // ── Helpers ────────────────────────────────────────────────────────────────
+
+  function trackerFor(id: number)      { return trackers.find(t => t.id === id); }
+  function recordFor(trackerId: number){ return records.find(r => r.trackerId === trackerId); }
+  const loggedInTrackers = $derived(trackers.filter(t => t.isLoggedIn));
+
+  // ── Search ─────────────────────────────────────────────────────────────────
+
+  let searchTimer: ReturnType<typeof setTimeout>;
+
+  function onSearchInput() {
+    clearTimeout(searchTimer);
+    if (typeof activeTab !== "number") return;
+    const tid = activeTab;
+    if (!searchQuery.trim()) { searchResults = []; return; }
+    searchTimer = setTimeout(() => doSearch(tid, searchQuery), 400);
+  }
+
+  async function doSearch(trackerId: number, query: string) {
+    if (!query.trim()) return;
+    searching = true;
+    searchResults = [];
+    try {
+      const res = await gql<{ searchTracker: { trackSearches: TrackSearch[] } }>(
+        SEARCH_TRACKER, { trackerId, query: query.trim() }
+      );
+      searchResults = res.searchTracker.trackSearches;
+    } catch (e: any) {
+      addToast({ kind: "error", title: "Search failed", body: e?.message });
+    } finally {
+      searching = false;
+    }
+  }
+
+  // ── Bind / Unbind ──────────────────────────────────────────────────────────
+
+  async function bind(result: TrackSearch) {
+    if (typeof activeTab !== "number") return;
+    binding = true;
+    try {
+      const res = await gql<{ bindTrack: { trackRecord: TrackRecord } }>(
+        BIND_TRACK, { mangaId, trackerId: activeTab, remoteId: result.remoteId }
+      );
+      records = [...records.filter(r => r.trackerId !== activeTab), res.bindTrack.trackRecord];
+      addToast({ kind: "success", title: "Now tracking", body: result.title });
+      activeTab = "records";
+    } catch (e: any) {
+      addToast({ kind: "error", title: "Failed to bind", body: e?.message });
+    } finally {
+      binding = false;
+    }
+  }
+
+  async function unbind(record: TrackRecord) {
+    updatingRecord = record.id;
+    try {
+      await gql(UNBIND_TRACK, { recordId: record.id });
+      records = records.filter(r => r.id !== record.id);
+      addToast({ kind: "info", title: "Unlinked from " + trackerFor(record.trackerId)?.name });
+    } catch (e: any) {
+      addToast({ kind: "error", title: "Failed to unlink", body: e?.message });
+    } finally {
+      updatingRecord = null;
+    }
+  }
+
+  // ── Update ─────────────────────────────────────────────────────────────────
+
+  async function updateStatus(record: TrackRecord, status: number) {
+    updatingRecord = record.id;
+    try {
+      const res = await gql<{ updateTrack: { trackRecord: TrackRecord } }>(
+        UPDATE_TRACK, { recordId: record.id, status }
+      );
+      patchRecord(res.updateTrack.trackRecord);
+    } catch (e: any) {
+      addToast({ kind: "error", title: "Update failed", body: e?.message });
+    } finally {
+      updatingRecord = null;
+    }
+  }
+
+  async function updateScore(record: TrackRecord, scoreString: string) {
+    updatingRecord = record.id;
+    try {
+      const res = await gql<{ updateTrack: { trackRecord: TrackRecord } }>(
+        UPDATE_TRACK, { recordId: record.id, scoreString }
+      );
+      patchRecord(res.updateTrack.trackRecord);
+    } catch (e: any) {
+      addToast({ kind: "error", title: "Update failed", body: e?.message });
+    } finally {
+      updatingRecord = null;
+    }
+  }
+
+  async function togglePrivate(record: TrackRecord) {
+    updatingRecord = record.id;
+    try {
+      const res = await gql<{ updateTrack: { trackRecord: TrackRecord } }>(
+        UPDATE_TRACK, { recordId: record.id, private: !record.private }
+      );
+      patchRecord(res.updateTrack.trackRecord);
+    } catch (e: any) {
+      addToast({ kind: "error", title: "Update failed", body: e?.message });
+    } finally {
+      updatingRecord = null;
+    }
+  }
+
+  async function syncRecord(record: TrackRecord) {
+    syncing = record.id;
+    try {
+      const res = await gql<{ fetchTrack: { trackRecord: TrackRecord } }>(
+        FETCH_TRACK, { recordId: record.id }
+      );
+      patchRecord(res.fetchTrack.trackRecord);
+      addToast({ kind: "success", title: "Synced from tracker" });
+    } catch (e: any) {
+      addToast({ kind: "error", title: "Sync failed", body: e?.message });
+    } finally {
+      syncing = null;
+    }
+  }
+
+  function patchRecord(updated: Partial<TrackRecord> & { id: number }) {
+    records = records.map(r => r.id === updated.id ? { ...r, ...updated } : r);
+  }
+
+  function openChapterEditor(record: TrackRecord) {
+    editingChapter = record.id;
+    chapterDraft   = record.lastChapterRead;
+  }
+
+  function cancelChapterEditor() { editingChapter = null; }
+
+  async function submitChapter(record: TrackRecord) {
+    const val = Math.max(0, chapterDraft);
+    editingChapter = null;
+    if (val === record.lastChapterRead) return;
+    updatingRecord = record.id;
+    try {
+      const res = await gql<{ updateTrack: { trackRecord: TrackRecord } }>(
+        UPDATE_TRACK, { recordId: record.id, lastChapterRead: val }
+      );
+      patchRecord(res.updateTrack.trackRecord);
+    } catch (e: any) {
+      addToast({ kind: "error", title: "Update failed", body: e?.message });
+    } finally {
+      updatingRecord = null;
+    }
+  }
+</script>
+
+<svelte:window onkeydown={(e) => e.key === "Escape" && onClose()} />
+
+<div
+  class="backdrop"
+  role="presentation"
+  onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+>
+  <div class="modal" role="dialog" aria-label="Tracking">
+
+    <!-- ── Header ─────────────────────────────────────────────────────────── -->
+    <div class="modal-header">
+      <div class="header-left">
+        <span class="modal-title">Tracking</span>
+        <span class="modal-subtitle">{mangaTitle}</span>
+      </div>
+      <button class="close-btn" onclick={onClose}><X size={15} weight="light" /></button>
+    </div>
+
+    {#if loading}
+      <div class="state-body">
+        <CircleNotch size={20} weight="light" class="anim-spin" style="color:var(--text-faint)" />
+        <span class="state-label">Loading…</span>
+      </div>
+
+    {:else if loggedInTrackers.length === 0}
+      <div class="state-body">
+        <p class="state-text">No trackers connected.</p>
+        <p class="state-hint">Go to Settings → Tracking to log in.</p>
+      </div>
+
+    {:else}
+      <!-- ── Tabs ──────────────────────────────────────────────────────────── -->
+      <div class="tabs">
+        <button
+          class="tab"
+          class:tab-active={activeTab === "records"}
+          onclick={() => activeTab = "records"}
+        >
+          My List
+          {#if records.length > 0}
+            <span class="tab-badge">{records.length}</span>
+          {/if}
+        </button>
+        {#each loggedInTrackers as t}
+          {@const rec = recordFor(t.id)}
+          <button
+            class="tab"
+            class:tab-active={activeTab === t.id}
+            onclick={() => { activeTab = t.id; searchResults = []; }}
+          >
+            <img src={thumbUrl(t.icon)} alt={t.name} class="tab-icon" />
+            {t.name}
+            {#if rec}<span class="tab-dot"></span>{/if}
+          </button>
+        {/each}
+      </div>
+
+      <!-- ── My List tab ───────────────────────────────────────────────────── -->
+      {#if activeTab === "records"}
+        <div class="tab-body">
+          {#if records.length === 0}
+            <div class="state-body">
+              <p class="state-text">Not tracking this manga yet.</p>
+              <p class="state-hint">Click a tracker tab above to search and add it.</p>
+            </div>
+          {:else}
+            {#each records as record (record.id)}
+              {@const tracker = trackerFor(record.trackerId)}
+              {@const isBusy  = updatingRecord === record.id}
+              <div class="record-row" class:record-busy={isBusy}>
+
+                <div class="record-identity">
+                  {#if tracker}
+                    <img src={thumbUrl(tracker.icon)} alt={tracker.name} class="record-tracker-icon" />
+                  {/if}
+                  {#if record.remoteUrl}
+                    <a href={record.remoteUrl} target="_blank" rel="noreferrer" class="record-title">
+                      {record.title}
+                      <ArrowSquareOut size={10} weight="light" />
+                    </a>
+                  {:else}
+                    <span class="record-title-plain">{record.title}</span>
+                  {/if}
+                </div>
+
+                <div class="record-controls">
+                  <select
+                    class="record-select"
+                    value={record.status}
+                    disabled={isBusy}
+                    onchange={(e) => updateStatus(record, parseInt((e.target as HTMLSelectElement).value))}
+                  >
+                    {#each (tracker?.statuses ?? []) as s}
+                      <option value={s.value}>{s.name}</option>
+                    {/each}
+                  </select>
+
+                  <select
+                    class="record-select record-select-score"
+                    value={record.displayScore}
+                    disabled={isBusy}
+                    onchange={(e) => updateScore(record, (e.target as HTMLSelectElement).value)}
+                  >
+                    {#each (tracker?.scores ?? []) as s}
+                      <option value={s}>★ {s}</option>
+                    {/each}
+                  </select>
+
+                  {#if tracker?.supportsPrivateTracking}
+                    <button
+                      class="record-icon-btn"
+                      class:icon-active={record.private}
+                      title={record.private ? "Private — click to make public" : "Public — click to make private"}
+                      disabled={isBusy}
+                      onclick={() => togglePrivate(record)}
+                    >
+                      {#if record.private}
+                        <Lock size={12} weight="fill" />
+                      {:else}
+                        <LockOpen size={12} weight="light" />
+                      {/if}
+                    </button>
+                  {/if}
+
+                  <button
+                    class="record-icon-btn"
+                    title="Sync from tracker"
+                    disabled={syncing === record.id}
+                    onclick={() => syncRecord(record)}
+                  >
+                    <ArrowsClockwise size={12} weight="light" class={syncing === record.id ? "anim-spin" : ""} />
+                  </button>
+
+                  <button
+                    class="record-icon-btn icon-danger"
+                    title="Unlink"
+                    disabled={isBusy}
+                    onclick={() => unbind(record)}
+                  >
+                    <X size={12} weight="bold" />
+                  </button>
+                </div>
+
+                {#if editingChapter === record.id}
+                  <div class="chapter-editor">
+                    <div class="chapter-editor-top">
+                      <span class="chapter-editor-label">Chapter read</span>
+                      <div class="chapter-input-wrap">
+                        <input
+                          type="number"
+                          class="chapter-input"
+                          min="0"
+                          max={record.totalChapters > 0 ? record.totalChapters : undefined}
+                          step="0.5"
+                          bind:value={chapterDraft}
+                          onkeydown={(e) => {
+                            if (e.key === "Enter") submitChapter(record);
+                            if (e.key === "Escape") cancelChapterEditor();
+                          }}
+                          use:autoFocus
+                        />
+                        {#if record.totalChapters > 0}
+                          <span class="chapter-total">/ {record.totalChapters}</span>
+                        {/if}
+                      </div>
+                    </div>
+                    {#if record.totalChapters > 0}
+                      <input
+                        type="range"
+                        class="chapter-slider"
+                        min="0"
+                        max={record.totalChapters}
+                        step="1"
+                        bind:value={chapterDraft}
+                      />
+                    {/if}
+                    <div class="chapter-editor-actions">
+                      <button class="chapter-save-btn" onclick={() => submitChapter(record)}>Save</button>
+                      <button class="chapter-cancel-btn" onclick={cancelChapterEditor}>Cancel</button>
+                    </div>
+                  </div>
+                {:else if record.totalChapters > 0}
+                  <div class="record-progress clickable" role="button" tabindex="0"
+                    onclick={() => openChapterEditor(record)}
+                    onkeydown={(e) => e.key === "Enter" && openChapterEditor(record)}
+                    title="Click to edit"
+                  >
+                    <span class="record-progress-label">Ch. {record.lastChapterRead} / {record.totalChapters} <span class="edit-hint">✎</span></span>
+                    <div class="record-progress-track">
+                      <div class="record-progress-fill" style="width:{Math.min(100,(record.lastChapterRead/record.totalChapters)*100)}%"></div>
+                    </div>
+                  </div>
+                {:else}
+                  <div class="record-progress clickable" role="button" tabindex="0"
+                    onclick={() => openChapterEditor(record)}
+                    onkeydown={(e) => e.key === "Enter" && openChapterEditor(record)}
+                    title="Click to set chapter"
+                  >
+                    <span class="record-progress-label">
+                      {record.lastChapterRead > 0 ? `Ch. ${record.lastChapterRead} read` : "Set chapter…"} <span class="edit-hint">✎</span>
+                    </span>
+                  </div>
+                {/if}
+
+              </div>
+            {/each}
+          {/if}
+        </div>
+
+      <!-- ── Tracker search tab ─────────────────────────────────────────────── -->
+      {:else}
+        {@const tracker    = trackerFor(activeTab as number)}
+        {@const boundRecord = recordFor(activeTab as number)}
+        <div class="search-bar">
+          <MagnifyingGlass size={13} weight="light" class="search-icon" />
+          <input
+            class="search-input"
+            placeholder="Search {tracker?.name}…"
+            bind:value={searchQuery}
+            oninput={onSearchInput}
+            onkeydown={(e) => e.key === "Enter" && doSearch(activeTab as number, searchQuery)}
+            use:autoFocus
+          />
+          {#if searching}
+            <CircleNotch size={13} weight="light" class="anim-spin search-icon" />
+          {/if}
+        </div>
+
+        <div class="search-results">
+          {#if searching && searchResults.length === 0}
+            <div class="state-body"><p class="state-hint">Searching…</p></div>
+          {:else if !searching && searchQuery.trim() && searchResults.length === 0}
+            <div class="state-body"><p class="state-text">No results for "{searchQuery}"</p></div>
+          {:else if !searchQuery.trim()}
+            <div class="state-body"><p class="state-hint">Type a title to search</p></div>
+          {:else}
+            {#each searchResults as result (result.trackerId + ":" + result.remoteId)}
+              {@const isBound = boundRecord?.remoteId === result.remoteId}
+              <button
+                class="result-row"
+                class:result-bound={isBound}
+                onclick={() => isBound ? unbind(boundRecord!) : bind(result)}
+                disabled={binding}
+              >
+                {#if result.coverUrl}
+                  <img
+                    src={result.coverUrl}
+                    alt={result.title}
+                    class="result-cover"
+                    loading="lazy"
+                    onerror={(e) => { (e.target as HTMLImageElement).style.display = 'none'; }}
+                  />
+                {:else}
+                  <div class="result-cover result-cover-empty"></div>
+                {/if}
+                <div class="result-info">
+                  <span class="result-title">{result.title}</span>
+                  <div class="result-meta">
+                    {#if result.publishingType}<span class="result-tag">{result.publishingType}</span>{/if}
+                    {#if result.publishingStatus}<span class="result-tag">{result.publishingStatus}</span>{/if}
+                    {#if result.totalChapters > 0}<span class="result-tag">{result.totalChapters} ch</span>{/if}
+                  </div>
+                  {#if result.summary}
+                    <p class="result-summary">{result.summary.slice(0,140)}{result.summary.length > 140 ? "…" : ""}</p>
+                  {/if}
+                </div>
+                <span class="result-action" class:result-action-on={isBound}>
+                  {isBound ? "✓ Tracking" : "Track"}
+                </span>
+              </button>
+            {/each}
+          {/if}
+        </div>
+      {/if}
+    {/if}
+
+  </div>
+</div>
+
+<script module>
+  function autoFocus(node: HTMLElement) { setTimeout(() => node.focus(), 50); }
+</script>
+
+<style>
+  .backdrop {
+    position: fixed; inset: 0; background: rgba(0,0,0,0.72);
+    z-index: var(--z-settings);
+    display: flex; align-items: center; justify-content: center;
+    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
+    animation: fadeIn 0.12s ease both;
+  }
+  .modal {
+    width: min(580px, calc(100vw - 48px));
+    max-height: min(680px, calc(100vh - 80px));
+    display: flex; flex-direction: column;
+    background: var(--bg-surface); border: 1px solid var(--border-base);
+    border-radius: var(--radius-xl); overflow: hidden;
+    box-shadow: 0 0 0 1px var(--border-dim), 0 24px 64px rgba(0,0,0,0.6);
+    animation: scaleIn 0.15s ease both;
+  }
+
+  /* Header */
+  .modal-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
+  }
+  .header-left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+  .modal-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-primary); letter-spacing: var(--tracking-tight); }
+  .modal-subtitle { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .close-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--text-faint); background: none; border: none; cursor: pointer; transition: color var(--t-base), background var(--t-base); flex-shrink: 0; }
+  .close-btn:hover { color: var(--text-muted); background: var(--bg-raised); }
+
+  /* States */
+  .state-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-10) var(--sp-5); flex: 1; }
+  .state-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .state-text  { font-size: var(--text-sm); color: var(--text-muted); }
+  .state-hint  { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); text-align: center; }
+
+  /* Tabs */
+  .tabs { display: flex; align-items: center; gap: 2px; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; overflow-x: auto; scrollbar-width: none; }
+  .tabs::-webkit-scrollbar { display: none; }
+  .tab { display: flex; align-items: center; gap: var(--sp-2); position: relative; font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 5px 10px; border-radius: var(--radius-sm); color: var(--text-faint); background: none; border: none; cursor: pointer; white-space: nowrap; transition: color var(--t-base), background var(--t-base); }
+  .tab:hover { color: var(--text-muted); background: var(--bg-raised); }
+  .tab-active { color: var(--text-secondary); background: var(--bg-raised); }
+  .tab-icon { width: 14px; height: 14px; border-radius: 2px; object-fit: contain; }
+  .tab-badge { font-size: 10px; padding: 0 5px; border-radius: var(--radius-full); background: var(--accent-dim); color: var(--accent-fg); min-width: 16px; text-align: center; }
+  .tab-dot { position: absolute; top: 4px; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
+
+  /* Records */
+  .tab-body { flex: 1; overflow-y: auto; padding: var(--sp-3); scrollbar-width: none; display: flex; flex-direction: column; gap: var(--sp-2); }
+  .tab-body::-webkit-scrollbar { display: none; }
+  .record-row { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--radius-md); border: 1px solid var(--border-dim); background: var(--bg-raised); transition: opacity var(--t-base); }
+  .record-busy { opacity: 0.5; pointer-events: none; }
+  .record-identity { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
+  .record-tracker-icon { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; object-fit: contain; }
+  .record-title { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-sm); color: var(--accent-fg); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; transition: opacity var(--t-base); }
+  .record-title:hover { opacity: 0.75; }
+  .record-title-plain { font-size: var(--text-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+  .record-controls { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
+  .record-select {
+    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
+    padding: 4px 28px 4px 8px; border-radius: var(--radius-sm);
+    border: 1px solid var(--border-strong); background: var(--bg-overlay);
+    color: var(--text-secondary); outline: none; cursor: pointer;
+    appearance: none; -webkit-appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat; background-position: right 8px center;
+    transition: border-color var(--t-base);
+  }
+  .record-select:hover:not(:disabled) { border-color: var(--accent-dim); }
+  .record-select:focus { border-color: var(--accent); outline: none; }
+  .record-select:disabled { opacity: 0.4; cursor: default; }
+  .record-select option { background: var(--bg-surface); color: var(--text-secondary); }
+  .record-select-score { max-width: 100px; }
+  .record-icon-btn { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); flex-shrink: 0; }
+  .record-icon-btn:hover:not(:disabled) { color: var(--text-muted); border-color: var(--border-strong); background: var(--bg-overlay); }
+  .record-icon-btn.icon-active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
+  .record-icon-btn.icon-danger:hover:not(:disabled) { color: var(--color-error); border-color: var(--color-error); background: var(--color-error-bg); }
+  .record-icon-btn:disabled { opacity: 0.3; cursor: default; }
+  .record-progress { display: flex; flex-direction: column; gap: 4px; }
+  .record-progress.clickable { cursor: pointer; border-radius: var(--radius-sm); padding: 3px 4px; margin: -3px -4px; transition: background var(--t-fast); }
+  .record-progress.clickable:hover { background: var(--bg-overlay); }
+  .record-progress-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .edit-hint { opacity: 0; font-size: 10px; transition: opacity var(--t-fast); }
+  .record-progress.clickable:hover .edit-hint { opacity: 1; }
+  .record-progress-track { height: 2px; background: var(--border-base); border-radius: var(--radius-full); overflow: hidden; }
+  .record-progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width 0.3s ease; }
+  /* Chapter editor */
+  .chapter-editor { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--radius-md); border: 1px solid var(--accent-dim); background: var(--bg-overlay); }
+  .chapter-editor-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
+  .chapter-editor-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .chapter-input-wrap { display: flex; align-items: center; gap: var(--sp-2); }
+  .chapter-input { width: 68px; background: var(--bg-raised); border: 1px solid var(--accent-dim); border-radius: var(--radius-sm); padding: 3px 6px; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-primary); outline: none; text-align: center; }
+  .chapter-input:focus { border-color: var(--accent); }
+  .chapter-total { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); }
+  .chapter-slider { width: 100%; accent-color: var(--accent); cursor: pointer; height: 4px; }
+  .chapter-editor-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; }
+  .chapter-save-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 3px 12px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent-muted); color: var(--accent-fg); cursor: pointer; transition: filter var(--t-base); }
+  .chapter-save-btn:hover { filter: brightness(1.15); }
+  .chapter-cancel-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; transition: color var(--t-base), border-color var(--t-base); }
+  .chapter-cancel-btn:hover { color: var(--text-muted); border-color: var(--border-strong); }
+
+  /* Search */
+  .search-bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
+  :global(.search-icon) { color: var(--text-faint); flex-shrink: 0; }
+  .search-input { flex: 1; background: none; border: none; outline: none; font-size: var(--text-sm); color: var(--text-primary); }
+  .search-input::placeholder { color: var(--text-faint); }
+  .search-results { flex: 1; overflow-y: auto; padding: var(--sp-2); scrollbar-width: none; }
+  .search-results::-webkit-scrollbar { display: none; }
+
+  /* Results */
+  .result-row { display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%; padding: var(--sp-3); border-radius: var(--radius-md); border: none; background: none; text-align: left; cursor: pointer; transition: background var(--t-fast); }
+  .result-row:hover:not(:disabled) { background: var(--bg-raised); }
+  .result-row:disabled { opacity: 0.5; cursor: default; }
+  .result-bound { background: var(--accent-muted) !important; }
+  .result-cover { width: 46px; height: 66px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); flex-shrink: 0; }
+  .result-cover-empty { background: var(--bg-raised); }
+  .hidden { display: none; }
+  .result-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); padding-top: 2px; }
+  .result-title { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-snug); text-align: left; }
+  .result-meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
+  .result-tag { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: var(--bg-raised); color: var(--text-faint); }
+  .result-summary { font-size: var(--text-xs); color: var(--text-faint); line-height: var(--leading-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; }
+  .result-action { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: none; color: var(--text-faint); flex-shrink: 0; align-self: center; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
+  .result-row:hover:not(:disabled) .result-action { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
+  .result-action-on { color: var(--accent-fg) !important; border-color: var(--accent-dim) !important; background: var(--accent-muted) !important; }
+
+  @keyframes fadeIn  { from { opacity: 0 }                         to { opacity: 1 } }
+  @keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
+</style>

src/lib/client.ts

@@ -1,15 +1,19 @@
+import { store } from "../store/state.svelte";
+
 const DEFAULT_URL = "http://127.0.0.1:4567";
 
 function getServerUrl(): string {
-  try {
+  const url = store.settings.serverUrl;
-    const raw = localStorage.getItem("moku-store");
+  return typeof url === "string" && url.trim() ? url.replace(/\/$/, "") : DEFAULT_URL;
-    if (raw) {
+}
-      const parsed = JSON.parse(raw);
+
-      const url = parsed?.state?.settings?.serverUrl;
+function getAuthHeader(): Record<string, string> {
-      if (typeof url === "string" && url.trim()) return url.replace(/\/$/, "");
+  const s = store.settings;
-    }
+  if (!s.serverAuthEnabled) return {};
-  } catch {}
+  const user = typeof s.serverAuthUser === "string" ? s.serverAuthUser.trim() : "";
-  return DEFAULT_URL;
+  const pass = typeof s.serverAuthPass === "string" ? s.serverAuthPass.trim() : "";
+  if (user && pass) return { Authorization: `Basic ${btoa(`${user}:${pass}`)}` };
+  return {};
 }
 
 function gqlUrl(): string { return `${getServerUrl()}/api/graphql`; }
@@ -25,7 +29,6 @@ interface GQLResponse<T> {
   errors?: { message: string }[];
 }
 
-/** Sleep that resolves early if the signal is aborted — never blocks a cancelled request. */
 function abortableSleep(ms: number, signal?: AbortSignal): Promise<void> {
   return new Promise((resolve, reject) => {
     if (signal?.aborted) { reject(new DOMException("Aborted", "AbortError")); return; }
@@ -37,12 +40,6 @@ function abortableSleep(ms: number, signal?: AbortSignal): Promise<void> {
   });
 }
 
-/**
- * Retry wrapper with these guarantees:
- * 1. AbortErrors always propagate immediately — no retry, no delay.
- * 2. Retry delays are abort-aware — closing a manga mid-delay doesn't hang.
- * 3. If the signal is already aborted before we even start, we bail instantly.
- */
 async function fetchWithRetry(
   url: string,
   init: RequestInit,
@@ -50,29 +47,19 @@ async function fetchWithRetry(
   retries = 3,
   delayMs = 300,
 ): Promise<Response> {
-  // Bail immediately if already aborted before we start
   if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
 
   for (let i = 0; i < retries; i++) {
-    // Check abort at the top of every iteration
     if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
 
     try {
       const res = await fetch(url, { ...init, signal });
-
-      // Check abort again — fetch can return a response even after abort in some runtimes
       if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
-
       return res;
     } catch (e: any) {
-      // Never retry aborted requests
       const isAbort = e?.name === "AbortError" || signal?.aborted;
       if (isAbort) throw new DOMException("Aborted", "AbortError");
-
-      // Last retry — give up
       if (i === retries - 1) throw e;
-
-      // Abort-aware delay between retries
       await abortableSleep(delayMs * Math.pow(1.5, i), signal);
     }
   }
@@ -86,11 +73,10 @@ export async function gql<T>(
 ): Promise<T> {
   const res = await fetchWithRetry(gqlUrl(), {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: { "Content-Type": "application/json", ...getAuthHeader() },
     body: JSON.stringify({ query, variables }),
   }, signal);
 
-  // Check abort before reading the body — avoids hanging on res.json() after cancel
   if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
   if (!res.ok) throw new Error(`Suwayomi HTTP ${res.status}`);
 

src/lib/queries.ts

@@ -436,6 +436,7 @@ export const INSTALL_EXTERNAL_EXTENSION = `
     }
   }
 `;
+
 // ── Settings ──────────────────────────────────────────────────────────────────
 
 export const GET_SETTINGS = `
@@ -455,3 +456,329 @@ export const SET_EXTENSION_REPOS = `
     }
   }
 `;
+
+export const GET_SERVER_SECURITY = `
+  query GetServerSecurity {
+    settings {
+      authMode
+      authUsername
+      socksProxyEnabled
+      socksProxyHost
+      socksProxyPort
+      socksProxyVersion
+      socksProxyUsername
+      flareSolverrEnabled
+      flareSolverrUrl
+      flareSolverrTimeout
+      flareSolverrSessionName
+      flareSolverrSessionTtl
+      flareSolverrAsResponseFallback
+    }
+  }
+`;
+
+export const SET_SERVER_AUTH = `
+  mutation SetServerAuth($authMode: AuthMode!, $authUsername: String!, $authPassword: String!) {
+    setSettings(input: { settings: { authMode: $authMode, authUsername: $authUsername, authPassword: $authPassword } }) {
+      settings {
+        authMode
+        authUsername
+      }
+    }
+  }
+`;
+
+export const SET_SOCKS_PROXY = `
+  mutation SetSocksProxy(
+    $socksProxyEnabled: Boolean!
+    $socksProxyHost: String!
+    $socksProxyPort: String!
+    $socksProxyVersion: Int!
+    $socksProxyUsername: String!
+    $socksProxyPassword: String!
+  ) {
+    setSettings(input: { settings: {
+      socksProxyEnabled: $socksProxyEnabled
+      socksProxyHost: $socksProxyHost
+      socksProxyPort: $socksProxyPort
+      socksProxyVersion: $socksProxyVersion
+      socksProxyUsername: $socksProxyUsername
+      socksProxyPassword: $socksProxyPassword
+    }}) {
+      settings {
+        socksProxyEnabled
+        socksProxyHost
+        socksProxyPort
+        socksProxyVersion
+        socksProxyUsername
+      }
+    }
+  }
+`;
+
+export const SET_FLARESOLVERR = `
+  mutation SetFlareSolverr(
+    $flareSolverrEnabled: Boolean!
+    $flareSolverrUrl: String!
+    $flareSolverrTimeout: Int!
+    $flareSolverrSessionName: String!
+    $flareSolverrSessionTtl: Int!
+    $flareSolverrAsResponseFallback: Boolean!
+  ) {
+    setSettings(input: { settings: {
+      flareSolverrEnabled: $flareSolverrEnabled
+      flareSolverrUrl: $flareSolverrUrl
+      flareSolverrTimeout: $flareSolverrTimeout
+      flareSolverrSessionName: $flareSolverrSessionName
+      flareSolverrSessionTtl: $flareSolverrSessionTtl
+      flareSolverrAsResponseFallback: $flareSolverrAsResponseFallback
+    }}) {
+      settings {
+        flareSolverrEnabled
+        flareSolverrUrl
+        flareSolverrTimeout
+        flareSolverrSessionName
+        flareSolverrSessionTtl
+        flareSolverrAsResponseFallback
+      }
+    }
+  }
+`;
+
+// ── Trackers ──────────────────────────────────────────────────────────────────
+
+export const GET_TRACKERS = `
+  query GetTrackers {
+    trackers {
+      nodes {
+        id
+        name
+        icon
+        isLoggedIn
+        authUrl
+        supportsPrivateTracking
+        scores
+        statuses {
+          value
+          name
+        }
+      }
+    }
+  }
+`;
+
+export const GET_MANGA_TRACK_RECORDS = `
+  query GetMangaTrackRecords($mangaId: Int!) {
+    manga(id: $mangaId) {
+      trackRecords {
+        nodes {
+          id
+          trackerId
+          remoteId
+          title
+          status
+          score
+          displayScore
+          lastChapterRead
+          totalChapters
+          remoteUrl
+          startDate
+          finishDate
+          private
+        }
+      }
+    }
+  }
+`;
+
+export const SEARCH_TRACKER = `
+  query SearchTracker($trackerId: Int!, $query: String!) {
+    searchTracker(input: { trackerId: $trackerId, query: $query }) {
+      trackSearches {
+        id
+        trackerId
+        remoteId
+        title
+        coverUrl
+        summary
+        publishingStatus
+        publishingType
+        startDate
+        totalChapters
+        trackingUrl
+      }
+    }
+  }
+`;
+
+export const BIND_TRACK = `
+  mutation BindTrack($mangaId: Int!, $trackerId: Int!, $remoteId: LongString!) {
+    bindTrack(input: { mangaId: $mangaId, trackerId: $trackerId, remoteId: $remoteId }) {
+      trackRecord {
+        id
+        trackerId
+        remoteId
+        title
+        status
+        score
+        displayScore
+        lastChapterRead
+        totalChapters
+        remoteUrl
+        startDate
+        finishDate
+        private
+      }
+    }
+  }
+`;
+
+export const UPDATE_TRACK = `
+  mutation UpdateTrack($recordId: Int!, $status: Int, $lastChapterRead: Float, $scoreString: String, $startDate: LongString, $finishDate: LongString, $private: Boolean) {
+    updateTrack(input: { recordId: $recordId, status: $status, lastChapterRead: $lastChapterRead, scoreString: $scoreString, startDate: $startDate, finishDate: $finishDate, private: $private }) {
+      trackRecord {
+        id
+        trackerId
+        status
+        score
+        displayScore
+        lastChapterRead
+        totalChapters
+        startDate
+        finishDate
+        private
+      }
+    }
+  }
+`;
+
+export const UNBIND_TRACK = `
+  mutation UnbindTrack($recordId: Int!) {
+    unbindTrack(input: { recordId: $recordId }) {
+      trackRecord {
+        id
+      }
+    }
+  }
+`;
+
+export const FETCH_TRACK = `
+  mutation FetchTrack($recordId: Int!) {
+    fetchTrack(input: { recordId: $recordId }) {
+      trackRecord {
+        id
+        trackerId
+        status
+        score
+        displayScore
+        lastChapterRead
+        totalChapters
+        startDate
+        finishDate
+      }
+    }
+  }
+`;
+
+export const GET_ALL_TRACKER_RECORDS = `
+  query GetAllTrackerRecords {
+    trackers {
+      nodes {
+        id
+        name
+        icon
+        isLoggedIn
+        scores
+        statuses { value name }
+        trackRecords {
+          nodes {
+            id
+            trackerId
+            title
+            status
+            displayScore
+            lastChapterRead
+            totalChapters
+            remoteUrl
+            private
+            manga {
+              id
+              title
+              thumbnailUrl
+              inLibrary
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const GET_TRACKER_RECORDS = `
+  query GetTrackerRecords($trackerId: Int!) {
+    trackers(condition: { id: $trackerId }) {
+      nodes {
+        id
+        name
+        statuses { value name }
+        trackRecords {
+          nodes {
+            id
+            title
+            status
+            displayScore
+            lastChapterRead
+            totalChapters
+            remoteUrl
+            manga {
+              id
+              title
+              thumbnailUrl
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+export const LOGIN_TRACKER_OAUTH = `
+  mutation LoginTrackerOAuth($trackerId: Int!, $callbackUrl: String!) {
+    loginTrackerOAuth(input: { trackerId: $trackerId, callbackUrl: $callbackUrl }) {
+      isLoggedIn
+      tracker {
+        id
+        name
+        isLoggedIn
+        authUrl
+      }
+    }
+  }
+`;
+
+export const LOGIN_TRACKER_CREDENTIALS = `
+  mutation LoginTrackerCredentials($trackerId: Int!, $username: String!, $password: String!) {
+    loginTrackerCredentials(input: { trackerId: $trackerId, username: $username, password: $password }) {
+      isLoggedIn
+      tracker {
+        id
+        name
+        isLoggedIn
+        authUrl
+      }
+    }
+  }
+`;
+
+export const LOGOUT_TRACKER = `
+  mutation LogoutTracker($trackerId: Int!) {
+    logoutTracker(input: { trackerId: $trackerId }) {
+      tracker {
+        id
+        name
+        isLoggedIn
+        authUrl
+      }
+    }
+  }
+`;

src/lib/types.ts

@@ -87,3 +87,49 @@ export interface DownloadStatus {
 export interface Connection<T> {
   nodes: T[];
 }
+
+export interface TrackerStatus {
+  value: number;
+  name: string;
+}
+
+export interface Tracker {
+  id: number;
+  name: string;
+  icon: string;
+  isLoggedIn: boolean;
+  authUrl: string | null;
+  supportsPrivateTracking: boolean;
+  scores: string[];
+  statuses: TrackerStatus[];
+}
+
+export interface TrackRecord {
+  id: number;
+  trackerId: number;
+  remoteId: string;
+  title: string;
+  status: number;
+  score: number;
+  displayScore: string;
+  lastChapterRead: number;
+  totalChapters: number;
+  remoteUrl: string | null;
+  startDate: string | null;
+  finishDate: string | null;
+  private: boolean;
+}
+
+export interface TrackSearch {
+  id: number;
+  trackerId: number;
+  remoteId: string;
+  title: string;
+  coverUrl: string | null;
+  summary: string | null;
+  publishingStatus: string | null;
+  publishingType: string | null;
+  startDate: string | null;
+  totalChapters: number;
+  trackingUrl: string | null;
+}

src/store/state.svelte.ts

@@ -4,10 +4,79 @@ import { DEFAULT_KEYBINDS, type Keybinds } from "../lib/keybinds";
 export type PageStyle        = "single" | "double" | "longstrip";
 export type FitMode          = "width" | "height" | "screen" | "original";
 export type LibraryFilter    = "all" | "library" | "downloaded" | string;
-export type NavPage          = "home" | "library" | "sources" | "explore" | "downloads" | "extensions" | "history" | "search";
+export type NavPage          = "home" | "library" | "sources" | "explore" | "downloads" | "extensions" | "history" | "search" | "tracking";
 export type ReadingDirection = "ltr" | "rtl";
 export type ChapterSortDir   = "desc" | "asc";
-export type Theme            = "dark" | "high-contrast" | "light" | "light-contrast" | "midnight" | "warm";
+export type ChapterSortMode  = "source" | "chapterNumber" | "uploadDate";
+export type BuiltinTheme     = "dark" | "high-contrast" | "light" | "light-contrast" | "midnight" | "warm";
+export type Theme            = BuiltinTheme | string; // custom themes have string IDs like "custom:abc123"
+
+export interface ThemeTokens {
+  /* Backgrounds */
+  "bg-void":    string;
+  "bg-base":    string;
+  "bg-surface": string;
+  "bg-raised":  string;
+  "bg-overlay": string;
+  "bg-subtle":  string;
+  /* Borders */
+  "border-dim":    string;
+  "border-base":   string;
+  "border-strong": string;
+  "border-focus":  string;
+  /* Text */
+  "text-primary":   string;
+  "text-secondary": string;
+  "text-muted":     string;
+  "text-faint":     string;
+  "text-disabled":  string;
+  /* Accent */
+  "accent":        string;
+  "accent-dim":    string;
+  "accent-muted":  string;
+  "accent-fg":     string;
+  "accent-bright": string;
+  /* Semantic */
+  "color-error":    string;
+  "color-error-bg": string;
+  "color-success":  string;
+  "color-info":     string;
+  "color-info-bg":  string;
+}
+
+export interface CustomTheme {
+  id:     string; // "custom:abc123"
+  name:   string;
+  tokens: ThemeTokens;
+}
+
+export const DEFAULT_THEME_TOKENS: ThemeTokens = {
+  "bg-void":    "#080808",
+  "bg-base":    "#0c0c0c",
+  "bg-surface": "#101010",
+  "bg-raised":  "#151515",
+  "bg-overlay": "#1a1a1a",
+  "bg-subtle":  "#202020",
+  "border-dim":    "#1c1c1c",
+  "border-base":   "#242424",
+  "border-strong": "#2e2e2e",
+  "border-focus":  "#4a5c4a",
+  "text-primary":   "#f0efec",
+  "text-secondary": "#c8c6c0",
+  "text-muted":     "#8a8880",
+  "text-faint":     "#4e4d4a",
+  "text-disabled":  "#2a2a28",
+  "accent":        "#6b8f6b",
+  "accent-dim":    "#2a3d2a",
+  "accent-muted":  "#1a251a",
+  "accent-fg":     "#a8c4a8",
+  "accent-bright": "#8fb88f",
+  "color-error":    "#c47a7a",
+  "color-error-bg": "#1f1212",
+  "color-success":  "#7aab7a",
+  "color-info":     "#7a9ec4",
+  "color-info-bg":  "#121a1f",
+};
 
 export const COMPLETED_FOLDER_ID = "completed";
 
@@ -21,6 +90,20 @@ export interface HistoryEntry {
   readAt:       number;
 }
 
+/**
+ * ReadLogEntry — append-only record of every chapter-completion event.
+ * Unlike HistoryEntry (which dedupes per chapter for the "continue" UI),
+ * this log never overwrites existing entries. It is the source of truth
+ * for all reading stats.
+ */
+export interface ReadLogEntry {
+  mangaId:   number;
+  chapterId: number;
+  readAt:    number;
+  /** Minutes spent on this chapter (estimated from page count or default). */
+  minutes:   number;
+}
+
 export interface ReadingStats {
   totalChaptersRead: number;
   totalMangaRead:    number;
@@ -32,7 +115,7 @@ export interface ReadingStats {
   lastStreakDate:    string;
 }
 
-const AVG_MIN_PER_CHAPTER = 5;
+const AVG_MIN_PER_CHAPTER = 5; // fallback when no page count is available
 
 export const DEFAULT_READING_STATS: ReadingStats = {
   totalChaptersRead: 0,
@@ -82,6 +165,7 @@ export interface Settings {
   libraryPageSize:         number;
   showNsfw:                boolean;
   chapterSortDir:          ChapterSortDir;
+  chapterSortMode:         ChapterSortMode;
   chapterPageSize:         number;
   uiScale:                 number;
   compactSidebar:          boolean;
@@ -102,6 +186,24 @@ export interface Settings {
   renderLimit:             number;
   heroSlots:               (number | null)[];
   mangaLinks:              Record<number, number[]>;
+  serverAuthUser:          string;
+  serverAuthPass:          string;
+  serverAuthEnabled:       boolean;
+  socksProxyEnabled:       boolean;
+  socksProxyHost:          string;
+  socksProxyPort:          string;
+  socksProxyVersion:       number;
+  socksProxyUsername:      string;
+  socksProxyPassword:      string;
+  flareSolverrEnabled:     boolean;
+  flareSolverrUrl:         string;
+  flareSolverrTimeout:     number;
+  flareSolverrSessionName: string;
+  flareSolverrSessionTtl:  number;
+  flareSolverrFallback:    boolean;
+  appLockEnabled:          boolean;
+  appLockPin:              string;
+  customThemes:            CustomTheme[];
 }
 
 const COMPLETED_FOLDER_DEFAULT: Folder = {
@@ -127,6 +229,7 @@ export const DEFAULT_SETTINGS: Settings = {
   libraryPageSize:        48,
   showNsfw:               false,
   chapterSortDir:         "desc",
+  chapterSortMode:        "source",
   chapterPageSize:        25,
   uiScale:                100,
   compactSidebar:         false,
@@ -147,6 +250,24 @@ export const DEFAULT_SETTINGS: Settings = {
   renderLimit:            48,
   heroSlots:              [null, null, null, null],
   mangaLinks:             {},
+  serverAuthUser:         "",
+  serverAuthPass:         "",
+  serverAuthEnabled:      false,
+  socksProxyEnabled:      false,
+  socksProxyHost:         "",
+  socksProxyPort:         "1080",
+  socksProxyVersion:      5,
+  socksProxyUsername:     "",
+  socksProxyPassword:     "",
+  flareSolverrEnabled:    false,
+  flareSolverrUrl:        "http://localhost:8191",
+  flareSolverrTimeout:    60,
+  flareSolverrSessionName: "moku",
+  flareSolverrSessionTtl: 15,
+  flareSolverrFallback:   false,
+  appLockEnabled:         false,
+  appLockPin:             "",
+  customThemes:           [],
 };
 
 // ── Persistence ───────────────────────────────────────────────────────────────
@@ -210,6 +331,7 @@ function mergeSettings(saved: any): Settings {
     keybinds:   { ...DEFAULT_KEYBINDS, ...saved?.settings?.keybinds },
     heroSlots:  saved?.settings?.heroSlots ?? [null, null, null, null],
     mangaLinks: saved?.settings?.mangaLinks ?? {},
+    customThemes: saved?.settings?.customThemes ?? [],
   };
 }
 
@@ -230,9 +352,21 @@ class Store {
   navPage:           NavPage          = $state(saved?.navPage       ?? "home");
   libraryFilter:     LibraryFilter    = $state(saved?.libraryFilter ?? "library");
   history:           HistoryEntry[]   = $state(saved?.history       ?? []);
+  /**
+   * readLog — append-only, never deduped. Every chapter completion/progress
+   * event lands here. This is the authoritative source for all reading stats.
+   * Capped at 5 000 entries; oldest are trimmed first.
+   */
+  readLog:           ReadLogEntry[]   = $state(saved?.readLog       ?? []);
   readingStats:      ReadingStats     = $state(mergeStats(saved));
   settings:          Settings         = $state(mergeSettings(saved));
 
+  /**
+   * Bumped each time the reader closes. Home.svelte watches this to know
+   * when to re-fetch library data and refresh the hero section.
+   */
+  readerSessionId:   number           = $state(0);
+
   genreFilter:       string           = $state("");
   searchPrefill:     string           = $state("");
   activeManga:       Manga | null     = $state(null);
@@ -246,6 +380,15 @@ class Store {
   toasts:            Toast[]          = $state([]);
   activeChapter:     Chapter | null   = $state(null);
   activeChapterList: Chapter[]        = $state([]);
+  // UI-only: synced from Tauri window events in App.svelte. Not persisted.
+  isFullscreen:      boolean          = $state(false);
+
+  // ── Discover session cache ────────────────────────────────────────────────
+  // Survives navigation within a session but is never persisted to localStorage.
+  // Key format: "<sourceId>|<type>|<genre>" or "local|<genre>"
+  discoverCache:      Map<string, Manga[]> = $state(new Map());
+  discoverLibraryIds: Set<number>          = $state(new Set());
+  discoverSrcOffset:  number               = $state(0);
 
   constructor() {
     $effect.root(() => {
@@ -253,6 +396,7 @@ class Store {
       $effect(() => { persist({ navPage:       this.navPage       }); });
       $effect(() => { persist({ libraryFilter: this.libraryFilter }); });
       $effect(() => { persist({ history:       this.history       }); });
+      $effect(() => { persist({ readLog:       this.readLog       }); });
       $effect(() => { persist({ readingStats:  this.readingStats  }); });
       $effect(() => { persist({ settings:      this.settings      }); });
     });
@@ -266,23 +410,56 @@ class Store {
   }
 
   closeReader() {
+    // Null activeChapter FIRST so the history $effect in Reader can't fire
+    // one last time with stale chapter + pageNumber=1, overwriting the real
+    // last-read position with page 1.
     this.activeChapter     = null;
     this.activeChapterList = [];
     this.pageUrls          = [];
     this.pageNumber        = 1;
+    this.readerSessionId  += 1;   // signals Home to refresh
   }
 
-  addHistory(entry: HistoryEntry) {
+  /**
-    const isNewChapter = !this.history.some(x => x.chapterId === entry.chapterId);
+   * Record a reading event.
-
+   *
+   * @param entry     - The history entry for the "continue reading" UI.
+   * @param completed - True when the chapter was fully read (triggers stat
+   *                    accrual). False for mid-chapter progress updates.
+   * @param minutes   - Actual minutes to credit; defaults to AVG_MIN_PER_CHAPTER.
+   */
+  addHistory(entry: HistoryEntry, completed = false, minutes = AVG_MIN_PER_CHAPTER) {
+    // ── 1. Update the deduped "continue reading" history ──────────────────
+    // Always keep the latest position for each chapter at the top.
     if (this.history[0]?.chapterId === entry.chapterId) {
       this.history[0] = { ...this.history[0], pageNumber: entry.pageNumber, readAt: entry.readAt };
     } else {
       this.history = [entry, ...this.history.filter(x => x.chapterId !== entry.chapterId)].slice(0, 300);
     }
 
-    const uniqueChapters = new Set(this.history.map(e => e.chapterId));
+    // ── 2. Append to the read log (only on completion) ────────────────────
-    const uniqueManga    = new Set(this.history.map(e => e.mangaId));
+    // This is append-only — every completed chapter read lands here,
+    // including re-reads. We cap at 5 000 to keep storage bounded.
+    if (completed) {
+      const logEntry: ReadLogEntry = {
+        mangaId:   entry.mangaId,
+        chapterId: entry.chapterId,
+        readAt:    entry.readAt,
+        minutes,
+      };
+      this.readLog = [...this.readLog, logEntry].slice(-5000);
+    }
+
+    // ── 3. Recompute stats from the read log ──────────────────────────────
+    // Use the log as ground truth so stats are always accurate even after
+    // history is cleared or entries are back-filled.
+    const log = completed
+      ? [...this.readLog] // already updated above
+      : this.readLog;
+
+    const uniqueChapters = new Set(log.map(e => e.chapterId));
+    const uniqueManga    = new Set(log.map(e => e.mangaId));
+    const totalMinutes   = log.reduce((sum, e) => sum + e.minutes, 0);
 
     const today = todayStr();
     let { currentStreakDays, longestStreakDays, lastStreakDate } = this.readingStats;
@@ -296,9 +473,9 @@ class Store {
     }
 
     this.readingStats = {
-      totalChaptersRead: Math.max(this.readingStats.totalChaptersRead, uniqueChapters.size),
+      totalChaptersRead: uniqueChapters.size,
-      totalMangaRead:    Math.max(this.readingStats.totalMangaRead,    uniqueManga.size),
+      totalMangaRead:    uniqueManga.size,
-      totalMinutesRead:  this.readingStats.totalMinutesRead + (isNewChapter ? AVG_MIN_PER_CHAPTER : 0),
+      totalMinutesRead:  totalMinutes,
       firstReadAt:       this.readingStats.firstReadAt === 0 ? entry.readAt : this.readingStats.firstReadAt,
       lastReadAt:        entry.readAt,
       currentStreakDays,
@@ -307,11 +484,25 @@ class Store {
     };
   }
 
-  clearHistory()                        { this.history = []; }
+  clearHistory()                        { this.history = []; this.readLog = []; }
-  clearHistoryForManga(mangaId: number) { this.history = this.history.filter(x => x.mangaId !== mangaId); }
+  clearHistoryForManga(mangaId: number) {
+    this.history = this.history.filter(x => x.mangaId !== mangaId);
+    this.readLog  = this.readLog.filter(x => x.mangaId !== mangaId);
+    // Recompute stats after removal
+    const uniqueChapters = new Set(this.readLog.map(e => e.chapterId));
+    const uniqueManga    = new Set(this.readLog.map(e => e.mangaId));
+    const totalMinutes   = this.readLog.reduce((sum, e) => sum + e.minutes, 0);
+    this.readingStats = {
+      ...this.readingStats,
+      totalChaptersRead: uniqueChapters.size,
+      totalMangaRead:    uniqueManga.size,
+      totalMinutesRead:  totalMinutes,
+    };
+  }
 
   wipeAllData() {
     this.history      = [];
+    this.readLog      = [];
     this.readingStats = { ...DEFAULT_READING_STATS };
     this.settings     = { ...this.settings, folders: [COMPLETED_FOLDER_DEFAULT], heroSlots: [null, null, null, null], mangaLinks: {} };
   }
@@ -431,6 +622,26 @@ class Store {
   getMangaFolders(mangaId: number): Folder[] {
     return this.settings.folders.filter(f => f.mangaIds.includes(mangaId));
   }
+
+  saveCustomTheme(theme: CustomTheme) {
+    const existing = this.settings.customThemes.findIndex(t => t.id === theme.id);
+    const next = existing >= 0
+      ? this.settings.customThemes.map((t, i) => i === existing ? theme : t)
+      : [...this.settings.customThemes, theme];
+    this.settings = { ...this.settings, customThemes: next };
+  }
+
+  deleteCustomTheme(id: string) {
+    const next = this.settings.customThemes.filter(t => t.id !== id);
+    const wasActive = this.settings.theme === id;
+    this.settings = { ...this.settings, customThemes: next, theme: wasActive ? "dark" : this.settings.theme };
+  }
+
+  clearDiscoverCache() {
+    this.discoverCache      = new Map();
+    this.discoverLibraryIds = new Set();
+    this.discoverSrcOffset++;
+  }
 }
 
 export const store = new Store();
@@ -439,7 +650,7 @@ export const store = new Store();
 
 export function openReader(chapter: Chapter, chapterList: Chapter[])    { store.openReader(chapter, chapterList); }
 export function closeReader()                                            { store.closeReader(); }
-export function addHistory(entry: HistoryEntry)                          { store.addHistory(entry); }
+export function addHistory(entry: HistoryEntry, completed?: boolean, minutes?: number) { store.addHistory(entry, completed, minutes); }
 export function clearHistory()                                           { store.clearHistory(); }
 export function clearHistoryForManga(mangaId: number)                    { store.clearHistoryForManga(mangaId); }
 export function wipeAllData()                                            { store.wipeAllData(); }
@@ -474,3 +685,6 @@ export function toggleFolderTab(id: string)                              { store
 export function assignMangaToFolder(folderId: string, mangaId: number)   { store.assignMangaToFolder(folderId, mangaId); }
 export function removeMangaFromFolder(folderId: string, mangaId: number) { store.removeMangaFromFolder(folderId, mangaId); }
 export function getMangaFolders(mangaId: number)                         { return store.getMangaFolders(mangaId); }
+export function clearDiscoverCache()                                       { store.clearDiscoverCache(); }
+export function saveCustomTheme(theme: CustomTheme)                        { store.saveCustomTheme(theme); }
+export function deleteCustomTheme(id: string)                              { store.deleteCustomTheme(id); }