Fix: Browse Bug Fixes & Enhancements

Feat: Longstrip Viewer(s) & Lag Improvements
Fix: Pass all Template Arguments on BugReporter
2026-06-13 09:19:56 -05:00 · 2026-06-12 04:12:33 -05:00 · 2026-06-11 23:27:01 -05:00 · 2026-06-10 13:12:25 -05:00 · 2026-06-10 13:06:46 -05:00 · 2026-06-10 12:59:08 -05:00
97 changed files with 5194 additions and 3527 deletions
@@ -0,0 +1,78 @@
+name: Bug Report
+description: Something isn't working as expected
+labels: ["bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to report a bug. The more detail you include, the faster it gets fixed.
+        You can use the **Report a Bug** button in **Settings → About** to pre-fill most of this automatically.
+
+  - type: textarea
+    id: description
+    attributes:
+      label: Description
+      description: What's broken? A clear, concise summary.
+      placeholder: "e.g. Library card stats don't appear even with 'Always show' enabled"
+    validations:
+      required: true
+
+  - type: textarea
+    id: steps
+    attributes:
+      label: Steps to Reproduce
+      description: Exact steps to trigger the bug.
+      placeholder: |
+        1. Open Settings → Library
+        2. Enable "Always show card stats"
+        3. Return to Library
+        4. Unread counts are not visible
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected Behavior
+      placeholder: "Unread and download counts should be permanently visible on manga cards"
+    validations:
+      required: true
+
+  - type: textarea
+    id: actual
+    attributes:
+      label: Actual Behavior
+      placeholder: "Counts only appear on hover, or not at all"
+    validations:
+      required: true
+
+  - type: textarea
+    id: environment
+    attributes:
+      label: Environment
+      description: Copy this from Settings → About → Report a Bug, or fill in manually.
+      placeholder: |
+        - Moku Version: v0.9.4
+        - Platform: Windows / macOS / Linux / Web
+        - OS Version: Windows 11 24H2
+        - Server: Suwayomi v2.2.2196
+        - Server URL: localhost:4567
+    validations:
+      required: true
+
+  - type: textarea
+    id: settings
+    attributes:
+      label: Relevant Settings
+      description: Settings related to the bug (auto-filled by the in-app reporter, or paste manually).
+      placeholder: |
+        libraryStatsAlways: true
+        libraryCropCovers: true
+        libraryPageSize: 48
+      render: yaml
+
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional Context
+      description: Screenshots, screen recordings, console errors, anything else helpful.
@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Discussions (Questions & Support)
+    url: https://github.com/moku-project/Moku/discussions
+    about: Not a bug? Ask questions and get help here.
@@ -0,0 +1,47 @@
+name: Feature Request
+description: Suggest an improvement or new feature
+labels: ["enhancement"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Got an idea? Describe what you want and why it would be useful.
+
+  - type: textarea
+    id: problem
+    attributes:
+      label: Problem / Motivation
+      description: What's the gap or frustration this would address?
+      placeholder: "e.g. There's no way to bulk-mark chapters as read without opening each series"
+    validations:
+      required: true
+
+  - type: textarea
+    id: solution
+    attributes:
+      label: Proposed Solution
+      description: What would you like to see?
+      placeholder: "A 'Mark all read' option in the series long-press context menu"
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Alternatives Considered
+      description: Any workarounds you've tried, or other ways this could be solved.
+
+  - type: textarea
+    id: environment
+    attributes:
+      label: Environment
+      description: Optional — useful if this is platform-specific.
+      placeholder: |
+        - Moku Version: v0.9.4
+        - Platform: Windows / macOS / Linux / Web
+
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional Context
+      description: Mockups, references, examples from other apps, etc.
@@ -0,0 +1,18 @@
+# Sourced by CI jobs that need versions from nix/versions.nix.
+# Usage:  source .github/read_versions.sh
+# Exports: MOKU_VERSION  SUWA_VERSION  SUWA_HASH_LINUX  SUWA_HASH_MACOS_ARM64  SUWA_HASH_MACOS_X64  SUWA_HASH_WINDOWS
+
+_nix="$( cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd )/nix/versions.nix"
+_t=$(cat "$_nix")
+
+_pick() { echo "$_t" | grep -oP "${1}\s*=\s*\"\K[^\"]+"; }
+
+export MOKU_VERSION=$(_pick "moku")
+export SUWA_VERSION=$(_pick "version")
+export SUWA_HASH_WINDOWS=$(_pick "windowsHash")
+export SUWA_HASH_LINUX=$(_pick "linuxHash")
+export SUWA_HASH_MACOS_ARM64=$(_pick "macosArm64Hash")
+export SUWA_HASH_MACOS_X64=$(_pick "macosX64Hash")
+
+unset _nix _t
+unset -f _pick
@@ -16,24 +16,15 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
-
      - uses: pnpm/action-setup@v4
-        with:
-          version: latest
-
+        with: { version: latest }
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build
-        run: pnpm build
-
-      - name: Upload dist
-        uses: actions/upload-artifact@v4
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build:static
+      - uses: actions/upload-artifact@v4
        with:
          name: frontend-dist-linux
          path: dist/
@@ -43,77 +34,56 @@ jobs:
    name: Tauri (Linux x64)
    needs: frontend
    runs-on: ubuntu-22.04
-
    steps:
      - uses: actions/checkout@v4

-      - name: Download frontend dist
-        uses: actions/download-artifact@v4
-        with:
-          name: frontend-dist-linux
-          path: dist/
+      - uses: actions/download-artifact@v4
+        with: { name: frontend-dist-linux, path: dist/ }
+
+      - name: Read versions
+        run: |
+          source .github/read_versions.sh
+          echo "MOKU_VERSION=$MOKU_VERSION"   >> $GITHUB_ENV
+          echo "SUWA_VERSION=$SUWA_VERSION"   >> $GITHUB_ENV
+          echo "SUWA_HASH=$SUWA_HASH_LINUX"   >> $GITHUB_ENV

      - name: Install system dependencies
        run: |
          sudo apt-get update
          sudo apt-get install -y \
-            libwebkit2gtk-4.1-dev \
-            libappindicator3-dev \
-            librsvg2-dev \
-            patchelf \
-            libfuse2
+            libwebkit2gtk-4.1-dev libappindicator3-dev librsvg2-dev patchelf libfuse2

-      - name: Install Rust
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          targets: x86_64-unknown-linux-gnu
+      - uses: dtolnay/rust-toolchain@stable
+        with: { targets: x86_64-unknown-linux-gnu }

-      - name: Rust cache
-        uses: Swatinem/rust-cache@v2
-        with:
-          workspaces: src-tauri
+      - uses: Swatinem/rust-cache@v2
+        with: { workspaces: src-tauri }

      - uses: pnpm/action-setup@v4
-        with:
-          version: latest
-
+        with: { version: latest }
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
-
-      - name: Install JS dependencies
-        run: pnpm install --frozen-lockfile
+      - run: pnpm install --frozen-lockfile

      - name: Download Suwayomi (Linux x64)
        run: |
          curl -fsSL \
-            "https://github.com/Suwayomi/Suwayomi-Server-preview/releases/download/v2.1.2087/Suwayomi-Server-v2.1.2087-linux-x64.tar.gz" \
+            "https://github.com/Suwayomi/Suwayomi-Server-preview/releases/download/v${SUWA_VERSION}/Suwayomi-Server-v${SUWA_VERSION}-linux-x64.tar.gz" \
            -o suwayomi-linux.tar.gz
-
-          echo "888bee202649ce7e3e3468a729c4084fb465f024b4033cab3f8ab98b0c66fe76  suwayomi-linux.tar.gz" | sha256sum -c -
-
+          echo "${SUWA_HASH}  suwayomi-linux.tar.gz" | sha256sum -c -
          mkdir -p suwayomi-extracted
          tar -xzf suwayomi-linux.tar.gz -C suwayomi-extracted --strip-components=1

      - name: Stage Suwayomi bundle
        run: |
          mkdir -p src-tauri/binaries
-
-          JAR="suwayomi-extracted/bin/Suwayomi-Server.jar"
-          JAVA="suwayomi-extracted/jre/bin/java"
-          CATCH="suwayomi-extracted/bin/catch_abort.so"
-
-          for f in "$JAR" "$JAVA" "$CATCH"; do
-            if [ ! -e "$f" ]; then
-              echo "ERROR: expected file not found: $f"
-              find suwayomi-extracted -type f | head -40
-              exit 1
-            fi
+          for f in suwayomi-extracted/bin/Suwayomi-Server.jar \
+                   suwayomi-extracted/jre/bin/java \
+                   suwayomi-extracted/bin/catch_abort.so; do
+            [ -e "$f" ] || { echo "ERROR: missing $f"; find suwayomi-extracted -type f | head -40; exit 1; }
          done
-
-          echo "JAR=$JAR  JAVA=$JAVA  CATCH=$CATCH"
-
          cp -r suwayomi-extracted src-tauri/binaries/suwayomi-bundle
          chmod +x src-tauri/binaries/suwayomi-bundle/jre/bin/java

@@ -129,43 +99,30 @@ jobs:

      - name: Build Tauri app
        run: pnpm tauri build --target x86_64-unknown-linux-gnu --config src-tauri/tauri.linux.conf.json --verbose
-        env:
-          NO_STRIP: "true"
+        env: { NO_STRIP: "true" }

      - name: Upload Linux artifacts to release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          VERSION: ${{ github.event.inputs.version }}
        run: |
          for i in $(seq 1 12); do
            RELEASE_ID=$(curl -s -H "Authorization: Bearer $GITHUB_TOKEN" \
              "https://api.github.com/repos/moku-project/Moku/releases" \
-              | jq -r '.[] | select(.tag_name == "v'"$VERSION"'") | .id' | head -1)
-            if [ -n "$RELEASE_ID" ]; then break; fi
-            echo "Waiting for release to exist... attempt $i"
-            sleep 15
+              | jq -r '.[] | select(.tag_name == "v${{ github.event.inputs.version }}") | .id' | head -1)
+            [ -n "$RELEASE_ID" ] && break
+            echo "Waiting for release... attempt $i"; sleep 15
          done
+          [ -z "$RELEASE_ID" ] && { echo "ERROR: release not found"; exit 1; }

-          if [ -z "$RELEASE_ID" ]; then
-            echo "ERROR: Could not find release for v$VERSION after waiting"
-            exit 1
-          fi
-
-          echo "Found release ID: $RELEASE_ID"
-
-          upload_asset() {
-            local file="$1"
-            local name="$2"
-            echo "Uploading $name..."
+          upload() {
            curl -s -X POST \
              -H "Authorization: Bearer $GITHUB_TOKEN" \
              -H "Content-Type: application/octet-stream" \
-              --data-binary @"$file" \
-              "https://uploads.github.com/repos/moku-project/Moku/releases/$RELEASE_ID/assets?name=$name"
+              --data-binary @"$1" \
+              "https://uploads.github.com/repos/moku-project/Moku/releases/$RELEASE_ID/assets?name=$2"
          }

          APPIMAGE=$(find src-tauri/target/x86_64-unknown-linux-gnu/release/bundle/appimage -name "*.AppImage" | head -1)
          DEB=$(find src-tauri/target/x86_64-unknown-linux-gnu/release/bundle/deb -name "*.deb" | head -1)
-
-          [ -n "$APPIMAGE" ] && upload_asset "$APPIMAGE" "moku-linux-x64-${VERSION}.AppImage"
-          [ -n "$DEB"      ] && upload_asset "$DEB"      "moku-linux-x64-${VERSION}.deb"
+          [ -n "$APPIMAGE" ] && upload "$APPIMAGE" "moku-linux-x64-${{ github.event.inputs.version }}.AppImage"
+          [ -n "$DEB"      ] && upload "$DEB"      "moku-linux-x64-${{ github.event.inputs.version }}.deb"
@@ -4,7 +4,7 @@ on:
  workflow_dispatch:
    inputs:
      version:
-        description: "Version to build (e.g. 0.4.0)"
+        description: "Version to build (e.g. 0.9.0)"
        required: true

 permissions:
@@ -16,28 +16,16 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
-
      - uses: pnpm/action-setup@v4
-        with:
-          version: latest
-
+        with: { version: latest }
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build
-        run: pnpm build
-
-      - name: Upload dist
-        uses: actions/upload-artifact@v4
-        with:
-          name: frontend-dist
-          path: dist/
-          retention-days: 1
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build:static
+      - uses: actions/upload-artifact@v4
+        with: { name: frontend-dist, path: dist/, retention-days: 1 }

  tauri:
    name: Tauri (macOS)
@@ -46,149 +34,103 @@ jobs:
    steps:
      - uses: actions/checkout@v4

-      - name: Download frontend dist
-        uses: actions/download-artifact@v4
-        with:
-          name: frontend-dist
-          path: dist/
+      - uses: actions/download-artifact@v4
+        with: { name: frontend-dist, path: dist/ }

-      - name: Install Rust
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          targets: aarch64-apple-darwin,x86_64-apple-darwin
+      - name: Read versions
+        run: |
+          source .github/read_versions.sh
+          echo "SUWA_VERSION=$SUWA_VERSION"             >> $GITHUB_ENV
+          echo "SUWA_HASH_ARM64=$SUWA_HASH_MACOS_ARM64" >> $GITHUB_ENV
+          echo "SUWA_HASH_X64=$SUWA_HASH_MACOS_X64"     >> $GITHUB_ENV

-      - name: Rust cache
-        uses: Swatinem/rust-cache@v2
+      - uses: dtolnay/rust-toolchain@stable
        with:
-          workspaces: src-tauri
+          targets: "aarch64-apple-darwin,x86_64-apple-darwin"
+
+      - uses: Swatinem/rust-cache@v2
+        with: { workspaces: src-tauri }

      - uses: pnpm/action-setup@v4
-        with:
-          version: latest
-
+        with: { version: latest }
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
-
-      - name: Install JS dependencies
-        run: pnpm install --frozen-lockfile
+      - run: pnpm install --frozen-lockfile

      - name: Download Suwayomi binaries
        run: |
-          download_suwayomi() {
+          dl() {
            local asset="$1" sha="$2" outdir="$3"
            curl -fsSL \
-              "https://github.com/Suwayomi/Suwayomi-Server-preview/releases/download/v2.1.2087/${asset}" \
+              "https://github.com/Suwayomi/Suwayomi-Server-preview/releases/download/v${SUWA_VERSION}/${asset}" \
              -o "${outdir}.tar.gz"
            echo "${sha}  ${outdir}.tar.gz" | shasum -a 256 -c -
            mkdir -p "${outdir}"
            tar -xzf "${outdir}.tar.gz" -C "${outdir}" --strip-components=1
          }
-
-          download_suwayomi \
-            "Suwayomi-Server-v2.1.2087-macOS-arm64.tar.gz" \
-            "59f73a53a139d5d843e16cab4f3ac425a410add6bee0a60920fa26eb0a4b8a5c" \
-            "suwayomi-arm64"
-
-          download_suwayomi \
-            "Suwayomi-Server-v2.1.2087-macOS-x64.tar.gz" \
-            "da7e664e4c2615a0b9eac09ee38fe979feee1d6c0b266e19dba1ceea8ae3795c" \
-            "suwayomi-x64"
+          dl "Suwayomi-Server-v${SUWA_VERSION}-macOS-arm64.tar.gz" "$SUWA_HASH_ARM64" suwayomi-arm64
+          dl "Suwayomi-Server-v${SUWA_VERSION}-macOS-x64.tar.gz"   "$SUWA_HASH_X64"   suwayomi-x64

      - name: Stage Suwayomi sidecars
        run: |
          mkdir -p src-tauri/binaries
-
-          stage_arch() {
-            local srcdir="$1"
-            local arch="$2"
-            local sidecar="src-tauri/binaries/suwayomi-server-${arch}"
-            local bundle_dest="src-tauri/binaries/suwayomi-bundle-${arch}"
-
+          stage() {
+            local srcdir="$1" arch="$2"
            JAR=$(find "$srcdir" -name "Suwayomi-Server.jar" | head -1)
            JAVA=$(find "$srcdir" -path "*/jre/bin/java" | head -1)
-
-            if [ -z "$JAR" ]; then
-              echo "ERROR: Suwayomi-Server.jar not found in $srcdir"
-              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 "${arch}: jar=${JAR}  java=${JAVA}"
-
-            cp -r "$srcdir" "$bundle_dest"
-
-            # The launcher script is committed at src-tauri/binaries/suwayomi-launcher.sh
-            # to avoid embedding a heredoc in YAML (which breaks GitHub Actions parsing).
-            cp src-tauri/binaries/suwayomi-launcher.sh "$sidecar"
-            chmod +x "$sidecar"
-            echo "Staged sidecar: $sidecar"
+            [ -z "$JAR"  ] && { echo "ERROR: jar not found in $srcdir";  find "$srcdir" -type f | head -30; exit 1; }
+            [ -z "$JAVA" ] && { echo "ERROR: java not found in $srcdir"; find "$srcdir" -type f | head -30; exit 1; }
+            cp -r "$srcdir" "src-tauri/binaries/suwayomi-bundle-${arch}"
+            cp src-tauri/binaries/suwayomi-launcher.sh "src-tauri/binaries/suwayomi-server-${arch}"
+            chmod +x "src-tauri/binaries/suwayomi-server-${arch}"
          }
-
-          stage_arch suwayomi-arm64 aarch64-apple-darwin
-          stage_arch suwayomi-x64   x86_64-apple-darwin
+          stage suwayomi-arm64 aarch64-apple-darwin
+          stage suwayomi-x64   x86_64-apple-darwin

      - name: Patch tauri.conf.json for CI
        run: |
          sed -i '' 's/"beforeBuildCommand": "pnpm build"/"beforeBuildCommand": ""/' src-tauri/tauri.conf.json

-      - name: Swap bundle for aarch64
+      - name: Build Tauri app (aarch64)
        run: |
          rm -rf 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)
-        run: pnpm tauri build --target aarch64-apple-darwin --config src-tauri/tauri.macos.conf.json
+          cp -r src-tauri/binaries/suwayomi-bundle-aarch64-apple-darwin src-tauri/binaries/suwayomi-bundle
+          pnpm tauri build --target aarch64-apple-darwin --config src-tauri/tauri.macos.conf.json
        env:
          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY || '-' }}

-      - name: Swap bundle for x86_64
+      - name: Build Tauri app (x86_64)
        run: |
          rm -rf 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)
-        run: pnpm tauri build --target x86_64-apple-darwin --config src-tauri/tauri.macos.conf.json
+          cp -r src-tauri/binaries/suwayomi-bundle-x86_64-apple-darwin src-tauri/binaries/suwayomi-bundle
+          pnpm tauri build --target x86_64-apple-darwin --config src-tauri/tauri.macos.conf.json
        env:
          APPLE_SIGNING_IDENTITY: ${{ secrets.APPLE_SIGNING_IDENTITY || '-' }}

      - name: Upload macOS artifacts to release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          VERSION: ${{ github.event.inputs.version }}
        run: |
-          # Wait for the Windows workflow to have created the draft release
          for i in $(seq 1 12); do
-            RELEASE_ID=$(curl -s -H "Authorization: Bearer $GITHUB_TOKEN"               "https://api.github.com/repos/moku-project/Moku/releases"               | jq -r '.[] | select(.tag_name == "v'"$VERSION"'") | .id' | head -1)
-            if [ -n "$RELEASE_ID" ]; then break; fi
-            echo "Waiting for release to exist... attempt $i"
-            sleep 15
+            RELEASE_ID=$(curl -s -H "Authorization: Bearer $GITHUB_TOKEN" \
+              "https://api.github.com/repos/moku-project/Moku/releases" \
+              | jq -r '.[] | select(.tag_name == "v${{ github.event.inputs.version }}") | .id' | head -1)
+            [ -n "$RELEASE_ID" ] && break
+            echo "Waiting for release... attempt $i"; sleep 15
          done
+          [ -z "$RELEASE_ID" ] && { echo "ERROR: release not found"; exit 1; }

-          if [ -z "$RELEASE_ID" ]; then
-            echo "ERROR: Could not find release for v$VERSION after waiting"
-            exit 1
-          fi
-
-          echo "Found release ID: $RELEASE_ID"
-
-          upload_asset() {
-            local file="$1"
-            local name="$2"
-            echo "Uploading $name..."
-            curl -s -X POST               -H "Authorization: Bearer $GITHUB_TOKEN"               -H "Content-Type: application/octet-stream"               --data-binary @"$file"               "https://uploads.github.com/repos/moku-project/Moku/releases/$RELEASE_ID/assets?name=$name"
+          upload() {
+            curl -s -X POST \
+              -H "Authorization: Bearer $GITHUB_TOKEN" \
+              -H "Content-Type: application/octet-stream" \
+              --data-binary @"$1" \
+              "https://uploads.github.com/repos/moku-project/Moku/releases/$RELEASE_ID/assets?name=$2"
          }

-          ARM64_DMG=$(find src-tauri/target/aarch64-apple-darwin/release/bundle/dmg -name "*.dmg" | head -1)
-          X64_DMG=$(find src-tauri/target/x86_64-apple-darwin/release/bundle/dmg -name "*.dmg" | head -1)
-
-          [ -n "$ARM64_DMG" ] && upload_asset "$ARM64_DMG" "moku-macos-arm64-${VERSION}.dmg"
-          [ -n "$X64_DMG"   ] && upload_asset "$X64_DMG"   "moku-macos-x64-${VERSION}.dmg"
+          ARM64=$(find src-tauri/target/aarch64-apple-darwin/release/bundle/dmg -name "*.dmg" | head -1)
+          X64=$(find src-tauri/target/x86_64-apple-darwin/release/bundle/dmg -name "*.dmg" | head -1)
+          [ -n "$ARM64" ] && upload "$ARM64" "moku-macos-arm64-${{ github.event.inputs.version }}.dmg"
+          [ -n "$X64"   ] && upload "$X64"   "moku-macos-x64-${{ github.event.inputs.version }}.dmg"
@@ -16,120 +16,81 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
-
      - uses: pnpm/action-setup@v4
-        with:
-          version: latest
-
+        with: { version: latest }
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
-
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Build
-        run: pnpm build
-
-      - name: Upload dist
-        uses: actions/upload-artifact@v4
-        with:
-          name: frontend-dist-windows
-          path: dist/
-          retention-days: 1
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build:static
+      - uses: actions/upload-artifact@v4
+        with: { name: frontend-dist-windows, path: dist/, retention-days: 1 }

  tauri:
    name: Tauri (Windows x64)
    needs: frontend
    runs-on: windows-latest
-
    steps:
      - uses: actions/checkout@v4

-      - name: Download frontend dist
-        uses: actions/download-artifact@v4
-        with:
-          name: frontend-dist-windows
-          path: dist/
+      - uses: actions/download-artifact@v4
+        with: { name: frontend-dist-windows, path: dist/ }

-      - name: Install Rust
-        uses: dtolnay/rust-toolchain@stable
-        with:
-          targets: x86_64-pc-windows-msvc
+      - name: Read versions
+        shell: bash
+        run: |
+          source .github/read_versions.sh
+          echo "SUWA_VERSION=$SUWA_VERSION"     >> $GITHUB_ENV
+          echo "SUWA_HASH=$SUWA_HASH_WINDOWS"   >> $GITHUB_ENV

-      - name: Rust cache
-        uses: Swatinem/rust-cache@v2
-        with:
-          workspaces: src-tauri
+      - uses: dtolnay/rust-toolchain@stable
+        with: { targets: x86_64-pc-windows-msvc }
+
+      - uses: Swatinem/rust-cache@v2
+        with: { workspaces: src-tauri }

      - uses: pnpm/action-setup@v4
-        with:
-          version: latest
-
+        with: { version: latest }
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: pnpm
-
-      - name: Install JS dependencies
-        run: pnpm install --frozen-lockfile
+      - run: pnpm install --frozen-lockfile

      - name: Download Suwayomi (Windows x64)
        shell: bash
        run: |
          curl -fsSL \
-            "https://github.com/Suwayomi/Suwayomi-Server-preview/releases/download/v2.1.2087/Suwayomi-Server-v2.1.2087-windows-x64.zip" \
+            "https://github.com/Suwayomi/Suwayomi-Server-preview/releases/download/v${SUWA_VERSION}/Suwayomi-Server-v${SUWA_VERSION}-windows-x64.zip" \
            -o suwayomi-windows.zip
-          echo "65c3ec544190bc4e52f8ba05b49c87448421d9825aaaeb902cb4e34e69ff7207  suwayomi-windows.zip" | sha256sum -c -
+          echo "${SUWA_HASH}  suwayomi-windows.zip" | sha256sum -c -
          unzip -q suwayomi-windows.zip -d suwayomi-raw

-      - name: Extract Suwayomi bundle
+      - name: Stage Suwayomi bundle
        shell: bash
        run: |
          mkdir -p suwayomi-extracted
          TOP_DIRS=$(find suwayomi-raw -mindepth 1 -maxdepth 1 -type d | wc -l)
          TOP_FILES=$(find suwayomi-raw -mindepth 1 -maxdepth 1 -type f | wc -l)
          if [ "$TOP_DIRS" -eq 1 ] && [ "$TOP_FILES" -eq 0 ]; then
-            INNER=$(find suwayomi-raw -mindepth 1 -maxdepth 1 -type d | head -1)
-            cp -r "$INNER"/. suwayomi-extracted/
+            cp -r "$(find suwayomi-raw -mindepth 1 -maxdepth 1 -type d | head -1)"/. suwayomi-extracted/
          else
            cp -r suwayomi-raw/. suwayomi-extracted/
          fi
-
-      - name: Stage Suwayomi bundle
-        shell: bash
-        run: |
          mkdir -p src-tauri/binaries
-          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"
-            find suwayomi-extracted -type f | head -50
-            exit 1
-          fi
-          if [ -z "$JAR" ]; then
-            echo "ERROR: Suwayomi-Server.jar not found"
-            find suwayomi-extracted -type f | head -50
-            exit 1
-          fi
+          find suwayomi-extracted -path "*/jre/bin/java.exe" | grep -q . \
+            || { echo "ERROR: java.exe not found"; find suwayomi-extracted -type f | head -50; exit 1; }
+          find suwayomi-extracted -name "Suwayomi-Server.jar" | grep -q . \
+            || { echo "ERROR: Suwayomi-Server.jar not found"; find suwayomi-extracted -type f | head -50; exit 1; }
          cp -r suwayomi-extracted src-tauri/binaries/suwayomi-bundle

-      - name: Validate staging
-        shell: bash
-        run: |
-          find src-tauri/binaries/suwayomi-bundle -path "*/jre/bin/java.exe" \
-            | grep -q . || (echo "ERROR: jre/bin/java.exe missing" && exit 1)
-          find src-tauri/binaries/suwayomi-bundle -name "Suwayomi-Server.jar" \
-            | grep -q . || (echo "ERROR: Suwayomi-Server.jar missing" && exit 1)
-          echo "Staging OK"
-
      - name: Patch tauri.conf.json for CI
        shell: bash
        run: |
          sed -i 's/"beforeBuildCommand": "pnpm build"/"beforeBuildCommand": ""/' src-tauri/tauri.conf.json

-      - name: Delete existing draft release if present
+      - name: Delete existing draft release
        shell: bash
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -138,14 +99,10 @@ jobs:
            "https://api.github.com/repos/moku-project/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/moku-project/Moku/releases/$RELEASE_ID"
            curl -s -X DELETE -H "Authorization: Bearer $GITHUB_TOKEN" \
              "https://api.github.com/repos/moku-project/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
@@ -158,10 +115,10 @@ jobs:
          releaseBody: |
            Moku v${{ github.event.inputs.version }}

-            **Windows:** Download `Moku_${{ github.event.inputs.version }}_x64-setup.exe`
-            **macOS arm64:** Download `moku-macos-arm64-${{ github.event.inputs.version }}.dmg`
-            **macOS x64:** Download `moku-macos-x64-${{ github.event.inputs.version }}.dmg`
-            **Linux:** Download `moku.flatpak`
+            **Windows:** `Moku_${{ github.event.inputs.version }}_x64-setup.exe`
+            **macOS arm64:** `moku-macos-arm64-${{ github.event.inputs.version }}.dmg`
+            **macOS x64:** `moku-macos-x64-${{ github.event.inputs.version }}.dmg`
+            **Linux:** `moku.flatpak`
          releaseDraft: true
          prerelease: false
-          args: --target x86_64-pc-windows-msvc --config src-tauri/tauri.windows.conf.json
+          args: --target x86_64-pc-windows-msvc --config src-tauri/tauri.windows.conf.json
@@ -1,42 +1,173 @@
-# sv
+<div align="center">
+  <img src="docs/banner.svg" width="100%" alt="Moku" />
+</div>

-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+<div align="center">

-## Creating a project
+[![Release](https://www.shieldcn.dev/github/release/moku-project/Moku.svg?variant=outline&size=default)](https://github.com/moku-project/Moku/releases/latest)
+![GitHub Downloads](https://www.shieldcn.dev/github/downloads/moku-project/Moku.svg?variant=outline&size=default)
+[![Stars](https://www.shieldcn.dev/github/stars/moku-project/Moku.svg?variant=outline&size=default)](https://github.com/moku-project/Moku)
+[![Discord](https://www.shieldcn.dev/discord/members/x97hj8zR72.svg?variant=outline&size=default)](https://discord.gg/x97hj8zR72)

-If you're seeing this, you've probably already done this step. Congrats!
+</div>

-```sh
-# create a new project
-npx sv create my-app
+<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="100%" alt="Home" />
+</div>
+
+<div align="center">
+  <img src="docs/screenshots/Moku-Search.png" width="49%" alt="Search" />
+  <img src="docs/screenshots/Moku-TagSearch.png" width="49%" alt="Tag Search" />
+  <img src="docs/screenshots/Moku-Settings.png" width="49%" alt="Settings" />
+  <img src="docs/screenshots/Moku-Preview.png" width="49%" alt="Preview" />
+  <img src="docs/screenshots/Moku-Downloads.png" width="49%" alt="Downloads" />
+  <img src="docs/screenshots/Moku-ReaderSettings.png" width="49%" alt="Reader Settings" />
+</div>
+
+<div align="center">
+  <a href="docs/screenshots">View all screenshots →</a>
+</div>
+
+---
+
+## Features
+
+- **Library management** — organize manga into folders, track unread counts, filter by genre
+- **Per-folder sorting & filtering** — each folder has its own independent sort (unread, A–Z, recently read, latest chapter, and more) and publication status filter (Ongoing, Completed, Hiatus, etc.)
+- **Built-in reader** — single page, long strip, configurable fit modes, customizable keybinds
+- **Markers** — pin color-coded notes to any page while reading; markers appear as dots on the progress bar and are browseable under Series Detail → Manage → Markers
+- **Extension support** — install and manage Suwayomi extensions directly from the app
+- **Download management** — queue and monitor chapter downloads with progress toasts
+- **Automation** — pre-download titles automatically and optionally delete chapters after reading (accessible from Series Detail)
+- **Discord Rich Presence** — shows manga title, current chapter, and elapsed timer in your Discord status; configurable in Settings → General
+- **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
+- **Improved NSFW filtering** — expanded tag parser gives the Hide NSFW setting better coverage across sources
+
+---
+
+## Installation
+
+<div align="center">
+
+![Runs on Windows](https://www.shieldcn.dev/badge/Runs%20on-Windows-0078D4.svg?logo=windows&logoColor=fff)
+![Runs on Linux](https://www.shieldcn.dev/badge/Runs%20on-Linux-FCC624.svg?logo=linux&logoColor=000)
+![Runs on macOS](https://www.shieldcn.dev/badge/Runs%20on-MacOS-000000.svg?mode=light&logo=apple&logoColor=fff)
+
+</div>
+
+### Windows
+
+**winget:**
+
+```powershell
+winget install Moku.Moku
 ```

-To recreate this project with the same configuration:
+> Thanks to [@frozenKelp](https://github.com/frozenKelp) for setting up and maintaining the winget package through v0.9.0.

-```sh
-# recreate this project
-pnpm dlx sv@0.15.3 create --template minimal --types ts --install pnpm .
+Or download the `.exe` installer from the [releases page](https://github.com/moku-project/Moku/releases/latest). Suwayomi-Server and a JRE are bundled.
+
+### Linux (Flatpak, recommended)
+
+Suwayomi-Server and a bundled JRE are included — no separate install needed.
+
+```bash
+flatpak install io.github.moku_app.Moku
 ```

-## Developing
+Or download the latest `moku.flatpak` from the [releases page](https://github.com/moku-project/Moku/releases/latest) and install manually:

-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```sh
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+```bash
+flatpak install moku.flatpak
 ```

-## Building
+### Nix

-To create a production version of your app:
-
-```sh
-npm run build
+```bash
+nix run github:moku-project/Moku
 ```

-You can preview the production build with `npm run preview`.
+Add to your flake:

-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+```nix
+inputs.moku.url = "github:moku-project/Moku";
+```
+
+### macOS
+
+Download the `.dmg` from the [releases page](https://github.com/moku-project/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/moku-project/Moku
+cd Moku
+pnpm install
+pnpm tauri:dev
+```
+
+Or with Nix:
+
+```bash
+nix develop
+pnpm install
+pnpm tauri:dev
+```
+
+---
+
+## Stack
+
+| | |
+|---|---|
+| [Tauri v2](https://tauri.app) | Native app shell |
+| [Svelte 5](https://svelte.dev) + [SvelteKit 2](https://kit.svelte.dev) + [TypeScript](https://www.typescriptlang.org) | UI |
+| [Vite 8](https://vitejs.dev) | Frontend bundler |
+| [Nixpkgs stdenv](https://nixos.org/manual/nixpkgs/stable/) | Nix builds |
+
+---
+
+## Community
+
+Questions, feedback, or just want to hang out — join the Discord.
+
+[![Discord](https://www.shieldcn.dev/discord/members/x97hj8zR72.svg?variant=secondary&size=large)](https://discord.gg/x97hj8zR72)
+
+---
+
+## License
+
+Distributed under the [Apache 2.0 License](./LICENSE).
+
+---
+
+## Disclaimer
+
+Moku does not host or distribute any content. The developers have no affiliation with any content providers accessible through connected sources.
@@ -0,0 +1,99 @@
+#Requires -Version 7
+param(
+    [switch]$SkipFrontend,
+    [switch]$SkipSuwayomi
+)
+
+Set-StrictMode -Version Latest
+$ErrorActionPreference = "Stop"
+
+function Step($msg) { Write-Host "`n==> $msg" -ForegroundColor Cyan }
+function Need($cmd) {
+    if (-not (Get-Command $cmd -ErrorAction SilentlyContinue)) {
+        Write-Error "Required tool not found: $cmd"
+    }
+}
+
+$Root = Split-Path -Parent $MyInvocation.MyCommand.Path
+Set-Location $Root
+
+Step "Reading nix/versions.nix"
+$nix = Get-Content "$Root\nix\versions.nix" -Raw
+$MOKU_VERSION = if ($nix -match 'moku\s*=\s*"([^"]+)"')        { $Matches[1] } else { Write-Error "moku version not found" }
+$SUWA_VERSION = if ($nix -match 'version\s*=\s*"([^"]+)"')     { $Matches[1] } else { Write-Error "suwayomi version not found" }
+$SUWA_HASH    = if ($nix -match 'windowsHash\s*=\s*"([^"]+)"') { $Matches[1] } else { Write-Error "windowsHash not found" }
+Write-Host "  moku=$MOKU_VERSION  suwayomi=$SUWA_VERSION"
+
+Need "pnpm"; Need "cargo"; Need "node"
+
+if (-not $SkipFrontend) {
+    Step "pnpm install"
+    pnpm install --frozen-lockfile
+    if ($LASTEXITCODE -ne 0) { Write-Error "pnpm install failed" }
+
+    Step "Frontend build"
+    $env:MOKU_TARGET = "static"
+    pnpm build:static
+    if ($LASTEXITCODE -ne 0) { Write-Error "Frontend build failed" }
+}
+
+$BundleDir  = "$Root\src-tauri\binaries\suwayomi-bundle"
+$ZipPath    = "$env:TEMP\suwayomi-windows-$SUWA_VERSION.zip"
+$ExtractDir = "$env:TEMP\suwayomi-extracted-$SUWA_VERSION"
+
+if (-not $SkipSuwayomi) {
+    Step "Downloading Suwayomi v$SUWA_VERSION"
+    $ZipUrl = "https://github.com/Suwayomi/Suwayomi-Server-preview/releases/download/v${SUWA_VERSION}/Suwayomi-Server-v${SUWA_VERSION}-windows-x64.zip"
+
+    if (-not (Test-Path $ZipPath)) {
+        Invoke-WebRequest -Uri $ZipUrl -OutFile $ZipPath -UseBasicParsing
+    }
+
+    $actual = (Get-FileHash $ZipPath -Algorithm SHA256).Hash.ToLower()
+    if ($actual -ne $SUWA_HASH.ToLower()) {
+        Write-Error "Hash mismatch`n  expected: $SUWA_HASH`n  got:      $actual"
+    }
+
+    Step "Staging bundle"
+    if (Test-Path $ExtractDir) { Remove-Item $ExtractDir -Recurse -Force }
+    Expand-Archive -Path $ZipPath -DestinationPath $ExtractDir
+
+    $topDirs  = @(Get-ChildItem $ExtractDir -Directory)
+    $topFiles = @(Get-ChildItem $ExtractDir -File)
+    $SrcDir = if ($topDirs.Count -eq 1 -and $topFiles.Count -eq 0) { $topDirs[0].FullName } else { $ExtractDir }
+
+    if (Test-Path $BundleDir) { Remove-Item $BundleDir -Recurse -Force }
+    Copy-Item $SrcDir $BundleDir -Recurse
+
+    $java = Get-ChildItem $BundleDir -Recurse -Filter "java.exe" | Where-Object { $_.FullName -match "jre.bin" } | Select-Object -First 1
+    $jar  = Get-ChildItem $BundleDir -Recurse -Filter "Suwayomi-Server.jar" | Select-Object -First 1
+    if (-not $java) { Write-Error "java.exe not found in staged bundle" }
+    if (-not $jar)  { Write-Error "Suwayomi-Server.jar not found in staged bundle" }
+    Write-Host "  java: $($java.FullName)"
+    Write-Host "  jar:  $($jar.FullName)"
+} elseif (-not (Test-Path $BundleDir)) {
+    Write-Error "Bundle dir missing at $BundleDir — run without -SkipSuwayomi first"
+}
+
+Step "Patching tauri.conf.json"
+$tauriConf = "$Root\src-tauri\tauri.conf.json"
+$original  = Get-Content $tauriConf -Raw
+Set-Content $tauriConf ($original -replace '"beforeBuildCommand":\s*"pnpm build"', '"beforeBuildCommand": ""') -NoNewline
+
+Step "Tauri build"
+$env:TAURI_SKIP_DEVSERVER_CHECK = "true"
+pnpm tauri build --target x86_64-pc-windows-msvc --config src-tauri/tauri.windows.conf.json
+$buildExit = $LASTEXITCODE
+
+Set-Content $tauriConf $original -NoNewline
+
+if ($buildExit -ne 0) { Write-Error "Tauri build failed (exit $buildExit)" }
+
+Step "Artifacts"
+$out = "$Root\src-tauri\target\x86_64-pc-windows-msvc\release\bundle"
+$msi = Get-ChildItem "$out\msi"  -Filter "*.msi" -ErrorAction SilentlyContinue | Select-Object -First 1
+$exe = Get-ChildItem "$out\nsis" -Filter "*.exe" -ErrorAction SilentlyContinue | Select-Object -First 1
+Write-Host "`nDone — Moku $MOKU_VERSION" -ForegroundColor Green
+if ($msi) { Write-Host "  MSI: $($msi.FullName)" -ForegroundColor Yellow }
+if ($exe) { Write-Host "  EXE: $($exe.FullName)" -ForegroundColor Yellow }
+if (-not $msi -and -not $exe) { Write-Host "  No artifacts found in $out" -ForegroundColor Red }
@@ -5,11 +5,11 @@
        "nixpkgs-lib": "nixpkgs-lib"
      },
      "locked": {
-        "lastModified": 1772408722,
-        "narHash": "sha256-rHuJtdcOjK7rAHpHphUb1iCvgkU3GpfvicLMwwnfMT0=",
+        "lastModified": 1778716662,
+        "narHash": "sha256-m1Yf0wZ8j1OHjTc2UwHwyQRSnNeSgLJOd7q5Y45hzi4=",
        "owner": "hercules-ci",
        "repo": "flake-parts",
-        "rev": "f20dc5d9b8027381c474144ecabc9034d6a839a3",
+        "rev": "f7c1a2d347e4c52d5fb8d10cb4d94b5884e546fb",
        "type": "github"
      },
      "original": {
@@ -20,11 +20,11 @@
    },
    "nixpkgs": {
      "locked": {
-        "lastModified": 1773821835,
-        "narHash": "sha256-TJ3lSQtW0E2JrznGVm8hOQGVpXjJyXY2guAxku2O9A4=",
+        "lastModified": 1780243769,
+        "narHash": "sha256-x5UQuRsH3MqI0U9afaXSNqzTPSeZlRLvFAav2Ux1pNw=",
        "owner": "NixOS",
        "repo": "nixpkgs",
-        "rev": "b40629efe5d6ec48dd1efba650c797ddbd39ace0",
+        "rev": "331800de5053fcebacf6813adb5db9c9dca22a0c",
        "type": "github"
      },
      "original": {
@@ -36,11 +36,11 @@
    },
    "nixpkgs-lib": {
      "locked": {
-        "lastModified": 1772328832,
-        "narHash": "sha256-e+/T/pmEkLP6BHhYjx6GmwP5ivonQQn0bJdH9YrRB+Q=",
+        "lastModified": 1777168982,
+        "narHash": "sha256-GOkGPcboWE9BmGCRMLX3worL4EMnsnG8MyKmXNeYuhQ=",
        "owner": "nix-community",
        "repo": "nixpkgs.lib",
-        "rev": "c185c7a5e5dd8f9add5b2f8ebeff00888b070742",
+        "rev": "f5901329dade4a6ea039af1433fb087bd9c1fe14",
        "type": "github"
      },
      "original": {
@@ -63,11 +63,11 @@
        ]
      },
      "locked": {
-        "lastModified": 1773975983,
-        "narHash": "sha256-zrRVwdfhDdohANqEhzY/ydeza6EXEi8AG6cyMRNYT9Q=",
+        "lastModified": 1780543271,
+        "narHash": "sha256-oPJ7eJN1sM37v92Rp/eyQL7/rUm0BOvXEBAoq/zN0cM=",
        "owner": "oxalica",
        "repo": "rust-overlay",
-        "rev": "cc80954a95f6f356c303ed9f08d0b63ca86216ac",
+        "rev": "c30ca201c5093540cf792f6982f81ba1aa0f3514",
        "type": "github"
      },
      "original": {
@@ -220,8 +220,8 @@ modules:

    sources:
      - type: file
-        url: https://github.com/Suwayomi/Suwayomi-Server-preview/releases/download/v2.1.2087/Suwayomi-Server-v2.1.2087.jar
-        sha256: f589a422674252394c13b289a9c8be691905bf583efb7f4d5f1501ae5e91e6b3
+        url: https://github.com/Suwayomi/Suwayomi-Server-preview/releases/download/v2.2.2196/Suwayomi-Server-v2.2.2196.jar
+        sha256: 8e7244c269456661a87705f746f0d87275770aa976bab7c6920e4d513e97c3f6
        dest-filename: Suwayomi-Server.jar

  - name: moku
@@ -1,22 +0,0 @@
-{ lib, stdenv, nodejs_22, pnpm, pnpmConfigHook, fetchPnpmDeps, version, src, versions }:
-
-stdenv.mkDerivation {
-  pname = "moku-frontend";
-  inherit version src;
-
-  nativeBuildInputs = [ nodejs_22 pnpm pnpmConfigHook ];
-
-  pnpmDeps = fetchPnpmDeps {
-    pname = "moku-frontend";
-    inherit version src;
-    fetcherVersion = 1;
-    hash = versions.frontend.pnpmHash;
-  };
-
-  buildPhase = ''
-    export HOME=$(mktemp -d)
-    pnpm build:static
-  '';
-
-  installPhase = "cp -r dist $out";
-}
@@ -29,7 +29,7 @@ pkgs.stdenv.mkDerivation {
  pnpmDeps = pkgs.fetchPnpmDeps {
    pname = "moku";
    inherit version src;
-    fetcherVersion = 1;
+    fetcherVersion = 3;
    hash = versions.frontend.pnpmHash;
  };

@@ -85,17 +85,31 @@ PYEOF

      if [[ $# -ge 2 ]]; then
        SUWA_VER="$2"
-        JAR_URL="https://github.com/Suwayomi/Suwayomi-Server-preview/releases/download/v${SUWA_VER}/Suwayomi-Server-v${SUWA_VER}.jar"
+        BASE="https://github.com/Suwayomi/Suwayomi-Server-preview/releases/download/v${SUWA_VER}"

-        SUWA_SHA_HEX=$(curl -fsSL "$JAR_URL" | sha256sum | awk '{print $1}')
-        SUWA_SHA_SRI=$(echo "$SUWA_SHA_HEX" | xxd -r -p | base64 -w0 | sed 's/^/sha256-/')
+        echo "Fetching Suwayomi v${SUWA_VER} hashes (5 downloads)..."

-        sed -i "s/version = \"[^\"]*\"/version = \"$SUWA_VER\"/" "$VERSIONS"
-        sed -i "s|hash = \"sha256-[^\"]*\"|hash = \"$SUWA_SHA_SRI\"|" "$VERSIONS"
+        sha_of() { curl -fsSL "$1" | sha256sum | awk '{print $1}'; }
+        to_sri()  { echo "$1" | xxd -r -p | base64 -w0 | sed 's/^/sha256-/'; }
+
+        JAR_SHA=$(sha_of    "${BASE}/Suwayomi-Server-v${SUWA_VER}.jar")
+        WIN_SHA=$(sha_of    "${BASE}/Suwayomi-Server-v${SUWA_VER}-windows-x64.zip")
+        LINUX_SHA=$(sha_of  "${BASE}/Suwayomi-Server-v${SUWA_VER}-linux-x64.tar.gz")
+        ARM64_SHA=$(sha_of  "${BASE}/Suwayomi-Server-v${SUWA_VER}-macOS-arm64.tar.gz")
+        X64_SHA=$(sha_of    "${BASE}/Suwayomi-Server-v${SUWA_VER}-macOS-x64.tar.gz")
+
+        JAR_SRI=$(to_sri "$JAR_SHA")
+
+        sed -i "s/version = \"[^\"]*\"/version = \"${SUWA_VER}\"/"         "$VERSIONS"
+        sed -i "s|hash = \"sha256-[^\"]*\"|hash = \"${JAR_SRI}\"|"         "$VERSIONS"
+        sed -i "s|windowsHash = \"[^\"]*\"|windowsHash = \"${WIN_SHA}\"|"   "$VERSIONS"
+        sed -i "s|linuxHash = \"[^\"]*\"|linuxHash = \"${LINUX_SHA}\"|"     "$VERSIONS"
+        sed -i "s|macosArm64Hash = \"[^\"]*\"|macosArm64Hash = \"${ARM64_SHA}\"|" "$VERSIONS"
+        sed -i "s|macosX64Hash = \"[^\"]*\"|macosX64Hash = \"${X64_SHA}\"|" "$VERSIONS"

        sed -i "s|Suwayomi-Server-preview/releases/download/v[^/]*/|Suwayomi-Server-preview/releases/download/v${SUWA_VER}/|" "$MANIFEST"
        sed -i "s|Suwayomi-Server-v[0-9.]*\.jar|Suwayomi-Server-v${SUWA_VER}.jar|g" "$MANIFEST"
-        python3 - "$MANIFEST" "$SUWA_SHA_HEX" <<'PYEOF'
+        python3 - "$MANIFEST" "$JAR_SHA" <<'PYEOF'
 import re, sys
 path, sha = sys.argv[1], sys.argv[2]
 text = open(path).read()
@@ -106,6 +120,8 @@ if n == 0:
    sys.exit("ERROR: could not find Suwayomi jar sha256 in manifest")
 open(path, 'w').write(updated)
 PYEOF
+
+        echo "Suwayomi hashes written."
      fi

      echo "Done — versions.nix, flatpak manifest, and PKGBUILD patched for v$VERSION"
@@ -2,13 +2,17 @@
  moku = "0.9.4";

  suwayomi = {
-    version = "2.1.2087";
-    hash = "sha256-9YmkImdCUjlME7KJqci+aRkFv1g++39NXxUBrl6R5rM=";
+    version = "2.2.2196";
+    hash = "sha256-jnJEwmlFZmGodwX3RvDYcnV3Cql2urfGkg5NUT6Xw/Y=";
+    windowsHash = "457ca4a64a57e0d274a87203d25e962103bcb456ee30ada3ea47328a3093329d";
+    linuxHash   = "e13d63ceb7e2b15e83d0a78281e8c1c04ac4a833caa73e5a2b68fbaf0cb20c1f";
+    macosArm64Hash = "9e3dbebc7475707e8d11c56a473385c00b09bde0103d013bc1cb3d06c89e5c43";
+    macosX64Hash   = "eadee02060b780a5febfb8dada2f89c7bd7db5905cfd20d47eaca02fcde8c9c5";
  };

  frontend = {
-    pnpmHash = "sha256-8bkwONUrr+U2OXYXvcsGytKhcImnehu+2bI/hmoFjJ4=";
-    distHash = "7db288b4b54277aa82b6ec5b21fc31a1e71f8246c50a74777500083b806c1fa5";
+    pnpmHash   = "sha256-18twdFhprV9v9hzvqxuVDHD6Tm4zHNDJs7s6l/7ClBo=";
+    distHash   = "7db288b4b54277aa82b6ec5b21fc31a1e71f8246c50a74777500083b806c1fa5";
    distHashSri = "sha256-fbiiu0tCd6qCtu+SIfw+aR8Yj2bFCnR3dQAIO4BvwfM=";
  };

@@ -16,6 +20,6 @@
    tauri-plugin-discord-rpc = "sha256-xq0qyK2NrwSAFDhXo0vbvcygRD2/7uqBaLpqfpfxkrc=";
  };

-  gitCommit = "239960683b6c7f1347e1798b0e179a8a46628728";
+  gitCommit  = "239960683b6c7f1347e1798b0e179a8a46628728";
  tarballHash = "";
 }
@@ -18,21 +18,23 @@
  "devDependencies": {
    "@sveltejs/adapter-node": "^5.5.4",
    "@sveltejs/adapter-static": "^3.0.10",
-    "@sveltejs/kit": "^2.57.0",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "@tauri-apps/cli": "^2.1.0",
-    "svelte": "^5.55.2",
-    "svelte-check": "^4.4.6",
-    "typescript": "^6.0.2",
-    "vite": "^8.0.7"
+    "@sveltejs/kit": "^2.62.0",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@tauri-apps/cli": "^2.11.2",
+    "@types/node": "^25.9.3",
+    "phosphor-svelte": "^3.1.0",
+    "svelte": "^5.56.1",
+    "svelte-check": "^4.5.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16"
  },
  "dependencies": {
    "@capacitor/app": "^8.1.0",
    "@capacitor/browser": "^8.0.3",
-    "@capacitor/core": "^8.3.4",
+    "@capacitor/core": "^8.4.0",
    "@capacitor/filesystem": "^8.1.2",
    "@capacitor/preferences": "^8.0.1",
-    "@tauri-apps/api": "^2.0.0",
+    "@tauri-apps/api": "^2.11.0",
    "@tauri-apps/plugin-dialog": "^2.7.1",
    "@tauri-apps/plugin-fs": "^2.5.1",
    "@tauri-apps/plugin-http": "^2.5.9",
@@ -42,7 +44,6 @@
    "@tauri-apps/plugin-store": "^2.4.3",
    "capacitor-native-biometric": "^4.2.2",
    "clsx": "^2.1.1",
-    "phosphor-svelte": "^3.1.0",
    "tauri-plugin-discord-rpc-api": "github:Youwes09/tauri-plugin-discord-rpc"
  }
 }
@@ -78,9 +78,9 @@ checksum = "1505bd5d3d116872e7271a6d4e16d81d0c8570876c8de68093a09ac269d8aac0"

 [[package]]
 name = "autocfg"
-version = "1.5.0"
+version = "1.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"
+checksum = "f2032f911046de80f0a198e0901378627c33f59ea0ac00e363d481118bd70a53"

 [[package]]
 name = "base64"
@@ -117,9 +117,9 @@ checksum = "bef38d45163c2f1dde094a7dfd33ccf595c92905c8f8f4fdc18d06fb1037718a"

 [[package]]
 name = "bitflags"
-version = "2.11.1"
+version = "2.12.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c4512299f36f043ab09a583e57bceb5a5aab7a73db1805848e8fef3c9e8c78b3"
+checksum = "84d7ced0ae9557296835c32bf1b1e02b44c746701f898460fb000d7eaa84f00a"
 dependencies = [
 "serde_core",
 ]
@@ -144,9 +144,9 @@ dependencies = [

 [[package]]
 name = "brotli"
-version = "8.0.2"
+version = "8.0.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4bd8b9603c7aa97359dbd97ecf258968c95f3adddd6db2f7e7a5bef101c84560"
+checksum = "8119e4516436f5708bbc474a9d395bf12f1b5395e93a92a56e647ac3388c8610"
 dependencies = [
 "alloc-no-stdlib",
 "alloc-stdlib",
@@ -155,9 +155,9 @@ dependencies = [

 [[package]]
 name = "brotli-decompressor"
-version = "5.0.0"
+version = "5.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "874bb8112abecc98cbd6d81ea4fa7e94fb9449648c93cc89aa40c81c24d7de03"
+checksum = "5962523e1b92ce1b5e793d9169b9943eece10d39f62550bc04bb605d75b94924"
 dependencies = [
 "alloc-no-stdlib",
 "alloc-stdlib",
@@ -174,9 +174,9 @@ dependencies = [

 [[package]]
 name = "bumpalo"
-version = "3.20.2"
+version = "3.20.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5d20789868f4b01b2f2caec9f5c4e0213b41e3e5702a50157d699ae31ced2fcb"
+checksum = "72f5acc6cb2ba439de613abc23857ec3d78374d8ed5ac84e9d11336e87da8649"

 [[package]]
 name = "bytemuck"
@@ -205,7 +205,7 @@ version = "0.18.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8ca26ef0159422fb77631dc9d17b102f253b876fe1586b03b803e63a309b4ee2"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "cairo-sys-rs",
 "glib",
 "libc",
@@ -268,9 +268,9 @@ dependencies = [

 [[package]]
 name = "cc"
-version = "1.2.62"
+version = "1.2.63"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a1dce859f0832a7d088c4f1119888ab94ef4b5d6795d1ce05afb7fe159d79f98"
+checksum = "556e016178bb5662a08681bbe0f00f8e17631781a4dfc8c45e466e4b185ec27f"
 dependencies = [
 "find-msvc-tools",
 "shlex",
@@ -290,7 +290,7 @@ checksum = "d38f2da7a0a2c4ccf0065be06397cc26a81f4e528be095826eee9d4adbb8c60f"
 dependencies = [
 "byteorder",
 "fnv",
- "uuid 1.23.1",
+ "uuid 1.23.2",
 ]

 [[package]]
@@ -398,7 +398,7 @@ version = "0.25.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "064badf302c3194842cf2c5d61f56cc88e54a759313879cdf03abdd27d0c3b97"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "core-foundation 0.10.1",
 "core-graphics-types",
 "foreign-types 0.5.0",
@@ -411,7 +411,7 @@ version = "0.2.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3d44a101f213f6c4cdc1853d4b78aef6db6bdfa3468798cc1d9912f4735013eb"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "core-foundation 0.10.1",
 "libc",
 ]
@@ -672,7 +672,7 @@ version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1e0e367e4e7da84520dedcac1901e4da967309406d1e51017ae1abfb97adbd38"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "block2",
 "libc",
 "objc2",
@@ -680,9 +680,9 @@ dependencies = [

 [[package]]
 name = "displaydoc"
-version = "0.2.5"
+version = "0.2.6"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "97369cbbc041bc366949bc74d34658d6cda5621039731c6310521892a3a20ae0"
+checksum = "1ac70aa55017e108007fbaf5aa0f54b021c98f92ff8af59d42eda9da96e3dd4f"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -789,9 +789,9 @@ checksum = "d0881ea181b1df73ff77ffaaf9c7544ecc11e82fba9b5f27b262a3c73a332555"

 [[package]]
 name = "either"
-version = "1.15.0"
+version = "1.16.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "48c757948c5ede0e46177b7add2e67155f70e33c07fea8284df6576da70b3719"
+checksum = "91622ff5e7162018101f2fea40d6ebf4a78bbe5a49736a2020649edf9693679e"

 [[package]]
 name = "embed-resource"
@@ -1228,7 +1228,7 @@ version = "0.18.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "233daaf6e83ae6a12a52055f568f9d7cf4671dabb78ff9560ab6da230ce00ee5"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "futures-channel",
 "futures-core",
 "futures-executor",
@@ -1408,9 +1408,9 @@ dependencies = [

 [[package]]
 name = "http"
-version = "1.4.0"
+version = "1.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e3ba2a386d7f85a81f119ad7498ebe444d2e22c2af0b86b069416ace48b3311a"
+checksum = "8be7462df143984c4598a256ef469b251d7d7f9e271135073e78fc535414f3d0"
 dependencies = [
 "bytes",
 "itoa",
@@ -1447,9 +1447,9 @@ checksum = "6dbf3de79e51f3d586ab4cb9d5c3e2c14aa28ed23d180cf89b4df0454a69cc87"

 [[package]]
 name = "hyper"
-version = "1.9.0"
+version = "1.10.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6299f016b246a94207e63da54dbe807655bf9e00044f73ded42c3ac5305fbcca"
+checksum = "55281c53a1894c864990125767da440a4e630446785086f52523b20033b74498"
 dependencies = [
 "atomic-waker",
 "bytes",
@@ -1804,9 +1804,9 @@ dependencies = [

 [[package]]
 name = "js-sys"
-version = "0.3.98"
+version = "0.3.99"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "67df7112613f8bfd9150013a0314e196f4800d3201ae742489d999db2f979f08"
+checksum = "142bc4740e452c1e57ade0cbc129f139c9093e354346f0872ef985f4f5cf5f11"
 dependencies = [
 "cfg-if",
 "futures-util",
@@ -1842,7 +1842,7 @@ version = "0.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b750dcadc39a09dbadd74e118f6dd6598df77fa01df0cfcdc52c28dece74528a"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "serde",
 "unicode-segmentation",
 ]
@@ -1904,9 +1904,9 @@ dependencies = [

 [[package]]
 name = "libredox"
-version = "0.1.16"
+version = "0.1.17"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e02f3bb43d335493c96bf3fd3a321600bf6bd07ed34bc64118e9293bdffea46c"
+checksum = "f02ab6bace2054fb888a3c16f990117b579d14a3088e472d63c6011fa185c9d3"
 dependencies = [
 "libc",
 ]
@@ -1940,9 +1940,9 @@ dependencies = [

 [[package]]
 name = "log"
-version = "0.4.29"
+version = "0.4.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5e5032e24019045c762d3c0f28f5b6b8bbf38563a65908389bf7978758920897"
+checksum = "113b30b4cd05f7c06868fdb2854f66a7b9fece9a48425351cd532e810d74024f"

 [[package]]
 name = "lru-slab"
@@ -1963,9 +1963,9 @@ dependencies = [

 [[package]]
 name = "memchr"
-version = "2.8.0"
+version = "2.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f8ca58f447f06ed17d5fc4043ce1b10dd205e060fb3ce5b979b8ed8e59ff3f79"
+checksum = "6b947ae49db0d222b1dbc6b113ce7248a3fc3a6ca21b696717bfc000ba4484d8"

 [[package]]
 name = "memoffset"
@@ -1994,9 +1994,9 @@ dependencies = [

 [[package]]
 name = "mio"
-version = "1.2.0"
+version = "1.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "50b7e5b27aa02a74bac8c3f23f448f8d87ff11f92d3aac1a6ed369ee08cc56c1"
+checksum = "02bd0af71c67b473010cbbc60715ee815645a4dc942899111f494b4b737d6fda"
 dependencies = [
 "libc",
 "wasi",
@@ -2029,9 +2029,9 @@ dependencies = [

 [[package]]
 name = "muda"
-version = "0.19.1"
+version = "0.19.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0ae8844f63b5b118e334e205585b8c5c17b984121dbdb179d44aeb087ffad3cb"
+checksum = "47a2e3dff89cd322c66647942668faee0a2b1f88ea6cbb4d374b4a8d7e92528c"
 dependencies = [
 "crossbeam-channel",
 "dpi",
@@ -2071,7 +2071,7 @@ version = "0.9.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c3f42e7bbe13d351b6bead8286a43aac9534b82bd3cc43e47037f012ebfd62d4"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "jni-sys 0.3.1",
 "log",
 "ndk-sys",
@@ -2097,11 +2097,11 @@ checksum = "650eef8c711430f1a879fdd01d4745a7deea475becfb90269c06775983bbf086"

 [[package]]
 name = "nix"
-version = "0.30.1"
+version = "0.31.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "74523f3a35e05aba87a1d978330aef40f67b0304ac79c1c00b294c9830543db6"
+checksum = "cf20d2fde8ff38632c426f1165ed7436270b44f199fc55284c38276f9db47c3d"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "cfg-if",
 "cfg_aliases",
 "libc",
@@ -2118,9 +2118,9 @@ dependencies = [

 [[package]]
 name = "num-conv"
-version = "0.2.1"
+version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c6673768db2d862beb9b39a78fdcb1a69439615d5794a1be50caa9bc92c81967"
+checksum = "521739c6d2bac4aa25192232afe6841231376b2b26d4d9fae5ecf8ca5772e441"

 [[package]]
 name = "num-traits"
@@ -2169,7 +2169,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d49e936b501e5c5bf01fda3a9452ff86dc3ea98ad5f283e1455153142d97518c"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "block2",
 "objc2",
 "objc2-core-foundation",
@@ -2182,7 +2182,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "73ad74d880bb43877038da939b7427bba67e9dd42004a18b809ba7d87cee241c"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "objc2",
 "objc2-foundation",
 ]
@@ -2203,7 +2203,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2a180dd8642fa45cdb7dd721cd4c11b1cadd4929ce112ebd8b9f5803cc79d536"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "dispatch2",
 "objc2",
 ]
@@ -2214,7 +2214,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e022c9d066895efa1345f8e33e584b9f958da2fd4cd116792e15e07e4720a807"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "dispatch2",
 "objc2",
 "objc2-core-foundation",
@@ -2247,7 +2247,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "0cde0dfb48d25d2b4862161a4d5fcc0e3c24367869ad306b0c9ec0073bfed92d"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "objc2",
 "objc2-core-foundation",
 "objc2-core-graphics",
@@ -2274,7 +2274,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e3e0adef53c21f888deb4fa59fc59f7eb17404926ee8a6f59f5df0fd7f9f3272"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "block2",
 "libc",
 "objc2",
@@ -2297,7 +2297,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "180788110936d59bab6bd83b6060ffdfffb3b922ba1396b312ae795e1de9d81d"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "objc2",
 "objc2-core-foundation",
 ]
@@ -2308,7 +2308,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "96c1358452b371bf9f104e21ec536d37a650eb10f7ee379fff67d2e08d537f1f"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "objc2",
 "objc2-core-foundation",
 "objc2-foundation",
@@ -2320,7 +2320,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d87d638e33c06f577498cbcc50491496a3ed4246998a7fbba7ccb98b1e7eab22"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "block2",
 "objc2",
 "objc2-cloud-kit",
@@ -2351,7 +2351,7 @@ version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b2e5aaab980c433cf470df9d7af96a7b46a9d892d521a2cbbb2f8a4c16751e7f"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "block2",
 "objc2",
 "objc2-app-kit",
@@ -2383,7 +2383,7 @@ version = "0.10.80"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a45fa2aa886c42762255da344f0a0d313e254066c46aad76f300c3d3da62d967"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "cfg-if",
 "foreign-types 0.3.2",
 "libc",
@@ -2428,9 +2428,9 @@ checksum = "04744f49eae99ab78e0d5c0b603ab218f515ea8cfe5a456d7629ad883a3b6e7d"

 [[package]]
 name = "os_info"
-version = "3.14.0"
+version = "3.15.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e4022a17595a00d6a369236fdae483f0de7f0a339960a53118b818238e132224"
+checksum = "9cf20a545b305cf1da722b236b5155c9bb35f1d5ceb28c048bd96ca842f41b5b"
 dependencies = [
 "android_system_properties",
 "log",
@@ -2609,7 +2609,7 @@ version = "0.18.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "60769b8b31b2a9f263dae2776c37b1b28ae246943cf719eb6946a1db05128a61"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "crc32fast",
 "fdeflate",
 "flate2",
@@ -2682,7 +2682,7 @@ version = "3.5.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "e67ba7e9b2b56446f1d419b1d807906278ffa1a658a8a5d8a39dcb1f5a78614f"
 dependencies = [
- "toml_edit 0.25.11+spec-1.1.0",
+ "toml_edit 0.25.12+spec-1.1.0",
 ]

 [[package]]
@@ -2880,7 +2880,7 @@ version = "0.5.18"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ed2bf2547551a7053d6fdfafda3f938979645c44812fbfcda098faae3f1a362d"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 ]

 [[package]]
@@ -3004,9 +3004,9 @@ dependencies = [

 [[package]]
 name = "reqwest"
-version = "0.13.3"
+version = "0.13.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "62e0021ea2c22aed41653bc7e1419abb2c97e038ff2c33d0e1309e49a97deec0"
+checksum = "219c5811de6525e5416c7d5d53bb656d3afdbc6c5af816e0802bcfa42dbdc1c3"
 dependencies = [
 "base64 0.22.1",
 "bytes",
@@ -3095,7 +3095,7 @@ version = "1.1.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b6fe4565b9518b83ef4f91bb47ce29620ca828bd32cb7e408f0062e9930ba190"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "errno",
 "libc",
 "linux-raw-sys",
@@ -3179,7 +3179,7 @@ dependencies = [
 "serde",
 "serde_json",
 "url",
- "uuid 1.23.1",
+ "uuid 1.23.2",
 ]

 [[package]]
@@ -3230,7 +3230,7 @@ version = "3.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b7f4bc775c73d9a02cde8bf7b2ec4c9d12743edf609006c7facc23998404cd1d"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "core-foundation 0.10.1",
 "core-foundation-sys",
 "libc",
@@ -3253,7 +3253,7 @@ version = "0.36.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "c5d9c0c92a92d33f08817311cf3f2c29a3538a8240e94a6a3c622ce652d7e00c"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "cssparser",
 "derive_more",
 "log",
@@ -3331,9 +3331,9 @@ dependencies = [

 [[package]]
 name = "serde_json"
-version = "1.0.149"
+version = "1.0.150"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "83fc039473c5595ace860d8c4fafa220ff474b3fc6bfdb4293327f1a37e94d86"
+checksum = "e8014e44b4736ed0538adeecded0fce2a272f22dc9578a7eb6b2d9993c74cfb9"
 dependencies = [
 "itoa",
 "memchr",
@@ -3470,9 +3470,9 @@ dependencies = [

 [[package]]
 name = "shlex"
-version = "1.3.0"
+version = "2.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64"
+checksum = "f8fadd59c855ef2080decdef8ff161eb6661b86933c9d82e5ba29dc602a55aba"

 [[package]]
 name = "sigchld"
@@ -3531,9 +3531,9 @@ checksum = "67b1b7a3b5fe4f1376887184045fcf45c69e92af734b7aaddc05fb777b6fbd03"

 [[package]]
 name = "socket2"
-version = "0.6.3"
+version = "0.6.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3a766e1110788c36f4fa1c2b71b387a7815aa65f88ce0229841826633d93723e"
+checksum = "52d1cfed4120b4d927bf7c0f86d2087a4a7d6027c906d9f9d525a80573b9be51"
 dependencies = [
 "libc",
 "windows-sys 0.61.2",
@@ -3724,7 +3724,7 @@ version = "0.7.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "a13f3d0daba03132c0aa9767f98351b3488edc2c100cda2d2ec2b04f3d8d3c8b"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "core-foundation 0.9.4",
 "system-configuration-sys",
 ]
@@ -3754,11 +3754,11 @@ dependencies = [

 [[package]]
 name = "tao"
-version = "0.35.2"
+version = "0.35.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a33f7f9e486ade65fcf1e45c440f9236c904f5c1002cdc7fc6ae582777345ce4"
+checksum = "d1c93047acf68669466a34690ac58cca7010bd1b201e1ec86f1fd0a75d3dd4a9"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "block2",
 "core-foundation 0.10.1",
 "core-graphics",
@@ -3839,7 +3839,7 @@ dependencies = [
 "percent-encoding",
 "plist",
 "raw-window-handle",
- "reqwest 0.13.3",
+ "reqwest 0.13.4",
 "serde",
 "serde_json",
 "serde_repr",
@@ -3904,7 +3904,7 @@ dependencies = [
 "thiserror 2.0.18",
 "time",
 "url",
- "uuid 1.23.1",
+ "uuid 1.23.2",
 "walkdir",
 ]

@@ -4171,7 +4171,7 @@ dependencies = [
 "toml 1.1.2+spec-1.1.0",
 "url",
 "urlpattern",
- "uuid 1.23.1",
+ "uuid 1.23.2",
 "walkdir",
 ]

@@ -4459,9 +4459,9 @@ dependencies = [

 [[package]]
 name = "toml_edit"
-version = "0.25.11+spec-1.1.0"
+version = "0.25.12+spec-1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0b59c4d22ed448339746c59b905d24568fcbb3ab65a500494f7b8c3e97739f2b"
+checksum = "d2153edc6955a6c354fad8f5efd38b6a8769bdccf9fe50f8e1329f81b0baa5d7"
 dependencies = [
 "indexmap 2.14.0",
 "toml_datetime 1.1.1+spec-1.1.0",
@@ -4501,11 +4501,11 @@ dependencies = [

 [[package]]
 name = "tower-http"
-version = "0.6.10"
+version = "0.6.11"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "68d6fdd9f81c2819c9a8b0e0cd91660e7746a8e6ea2ba7c6b2b057985f6bcb51"
+checksum = "4cfcf7e2740e6fc6d4d688b4ef00650406bb94adf4731e43c096c3a19fe40840"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "bytes",
 "futures-util",
 "http",
@@ -4596,9 +4596,9 @@ checksum = "bc7d623258602320d5c55d1bc22793b57daff0ec7efc270ea7d55ce1d5f5471c"

 [[package]]
 name = "typenum"
-version = "1.20.0"
+version = "1.20.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "40ce102ab67701b8526c123c1bab5cbe42d7040ccfd0f64af1a385808d2f43de"
+checksum = "b6f5e870be6c3b371b77fe0ee0bafb859fa4964b4404c27de1d380043c4dda20"

 [[package]]
 name = "unic-char-property"
@@ -4649,9 +4649,9 @@ checksum = "e6e4313cd5fcd3dad5cafa179702e2b244f760991f45397d14d4ebf38247da75"

 [[package]]
 name = "unicode-segmentation"
-version = "1.13.2"
+version = "1.13.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9629274872b2bfaf8d66f5f15725007f635594914870f65218920345aa11aa8c"
+checksum = "c6f5d3c3b1bf09027a88a6bc961fc00497d651009560b5463668dc81b0fa87a8"

 [[package]]
 name = "unicode-xid"
@@ -4719,9 +4719,9 @@ dependencies = [

 [[package]]
 name = "uuid"
-version = "1.23.1"
+version = "1.23.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ddd74a9687298c6858e9b88ec8935ec45d22e8fd5e6394fa1bd4e99a87789c76"
+checksum = "d258b83ceec21034727ecee8c382cfa6c3e133699b0742c64571814fb420c9f7"
 dependencies = [
 "getrandom 0.4.2",
 "js-sys",
@@ -4812,9 +4812,9 @@ dependencies = [

 [[package]]
 name = "wasm-bindgen"
-version = "0.2.121"
+version = "0.2.122"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "49ace1d07c165b0864824eee619580c4689389afa9dc9ed3a4c75040d82e6790"
+checksum = "3ed04576f974d2b2fba0f38c51dbc5518011e38c36bf1143164be765528fd409"
 dependencies = [
 "cfg-if",
 "once_cell",
@@ -4825,9 +4825,9 @@ dependencies = [

 [[package]]
 name = "wasm-bindgen-futures"
-version = "0.4.71"
+version = "0.4.72"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "96492d0d3ffba25305a7dc88720d250b1401d7edca02cc3bcd50633b424673b8"
+checksum = "9473dbd2991ae90b6291c3c32c30c6187ac49aa32f9905d1cce280ec1e110b0f"
 dependencies = [
 "js-sys",
 "wasm-bindgen",
@@ -4835,9 +4835,9 @@ dependencies = [

 [[package]]
 name = "wasm-bindgen-macro"
-version = "0.2.121"
+version = "0.2.122"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "8e68e6f4afd367a562002c05637acb8578ff2dea1943df76afb9e83d177c8578"
+checksum = "916151b09da36bd82f6615cbf3a419e2f0ba23a03c6160e8e92eb6bd4aa1dec6"
 dependencies = [
 "quote",
 "wasm-bindgen-macro-support",
@@ -4845,9 +4845,9 @@ dependencies = [

 [[package]]
 name = "wasm-bindgen-macro-support"
-version = "0.2.121"
+version = "0.2.122"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d95a9ec35c64b2a7cb35d3fead40c4238d0940c86d107136999567a4703259f2"
+checksum = "299047362ccbfce148b67ab7e73349f77748e00c8296f9542adfad2ad82c5c5e"
 dependencies = [
 "bumpalo",
 "proc-macro2",
@@ -4858,9 +4858,9 @@ dependencies = [

 [[package]]
 name = "wasm-bindgen-shared"
-version = "0.2.121"
+version = "0.2.122"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "c4e0100b01e9f0d03189a92b96772a1fb998639d981193d7dbab487302513441"
+checksum = "9a929b2c61f11ba3e9bc35b50c1f25cb38e0e892c0c231ae2b8cf78d5dad4437"
 dependencies = [
 "unicode-ident",
 ]
@@ -4906,7 +4906,7 @@ version = "0.244.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "47b807c72e1bac69382b3a6fb3dbe8ea4c0ed87ff5629b8685ae6b9a611028fe"
 dependencies = [
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "hashbrown 0.15.5",
 "indexmap 2.14.0",
 "semver",
@@ -4914,9 +4914,9 @@ dependencies = [

 [[package]]
 name = "web-sys"
-version = "0.3.98"
+version = "0.3.99"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4b572dff8bcf38bad0fa19729c89bb5748b2b9b1d8be70cf90df697e3a8f32aa"
+checksum = "6d621441cfc37b84979402712047321980c178f299193a3589d05b99e8763436"
 dependencies = [
 "js-sys",
 "wasm-bindgen",
@@ -5759,7 +5759,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9d66ea20e9553b30172b5e831994e35fbde2d165325bec84fc43dbf6f4eb9cb2"
 dependencies = [
 "anyhow",
- "bitflags 2.11.1",
+ "bitflags 2.12.1",
 "indexmap 2.14.0",
 "log",
 "serde",
@@ -5862,9 +5862,9 @@ dependencies = [

 [[package]]
 name = "yoke"
-version = "0.8.2"
+version = "0.8.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "abe8c5fda708d9ca3df187cae8bfb9ceda00dd96231bed36e445a1a48e66f9ca"
+checksum = "709fe23a0424b6a435d82152b1bd3fdfb0833487d5fa90d05d42762a9891fef5"
 dependencies = [
 "stable_deref_trait",
 "yoke-derive",
@@ -5885,18 +5885,18 @@ dependencies = [

 [[package]]
 name = "zerocopy"
-version = "0.8.48"
+version = "0.8.50"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eed437bf9d6692032087e337407a86f04cd8d6a16a37199ed57949d415bd68e9"
+checksum = "3b065d4f0e55f82fae73202e189638116a87c55ab6b8e6c2721e13dd9d854ad1"
 dependencies = [
 "zerocopy-derive",
 ]

 [[package]]
 name = "zerocopy-derive"
-version = "0.8.48"
+version = "0.8.50"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "70e3cd084b1788766f53af483dd21f93881ff30d7320490ec3ef7526d203bad4"
+checksum = "0b631b19d36a892ab55420c92dbc83ccd79274f25be714855d3074aa71cab639"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -43,6 +43,8 @@
    "discord-rpc:allow-disconnect",
    "discord-rpc:allow-set-activity",
    "discord-rpc:allow-clear-activity",
-    "discord-rpc:allow-is-running"
+    "discord-rpc:allow-is-running",
+    "dialog:default",
+    "dialog:allow-open"
  ]
 }
@@ -2,10 +2,58 @@ use serde::Serialize;
 use std::path::PathBuf;
 use sysinfo::Disks;
 use tauri::Emitter;
+use tauri_plugin_store::StoreExt;
 use walkdir::WalkDir;

 use crate::server::resolve::suwayomi_data_dir;

+// ── Key-value store (used by the frontend via platformService) ────────────────
+
+#[tauri::command]
+pub fn load_store(app: tauri::AppHandle, key: String) -> Result<Option<String>, String> {
+    let store = app
+        .store(format!("{}.json", key))
+        .map_err(|e| e.to_string())?;
+    let value = store.get(&key);
+    Ok(value.map(|v| v.to_string()))
+}
+
+#[tauri::command]
+pub fn save_store(app: tauri::AppHandle, key: String, value: String) -> Result<(), String> {
+    let store = app
+        .store(format!("{}.json", key))
+        .map_err(|e| e.to_string())?;
+    let parsed: serde_json::Value =
+        serde_json::from_str(&value).map_err(|e| e.to_string())?;
+    store.set(key, parsed);
+    store.save().map_err(|e| e.to_string())
+}
+
+// ── Credential store (PIN-encrypted vault, auth tokens) ──────────────────────
+
+#[tauri::command]
+pub fn store_credential(app: tauri::AppHandle, key: String, value: String) -> Result<(), String> {
+    let store = app
+        .store("credentials.json")
+        .map_err(|e| e.to_string())?;
+    if value.is_empty() {
+        store.delete(&key);
+    } else {
+        store.set(&key, serde_json::Value::String(value));
+    }
+    store.save().map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub fn get_credential(app: tauri::AppHandle, key: String) -> Result<Option<String>, String> {
+    let store = app
+        .store("credentials.json")
+        .map_err(|e| e.to_string())?;
+    Ok(store.get(&key).and_then(|v| v.as_str().map(|s| s.to_owned())))
+}
+
+// ── Disk / downloads storage ─────────────────────────────────────────────────
+
 #[derive(Serialize)]
 pub struct StorageInfo {
    pub manga_bytes: u64,
@@ -127,4 +175,4 @@ pub async fn migrate_downloads(

    fs::remove_dir_all(&src_path).map_err(|e| e.to_string())?;
    Ok(())
-}
+}
@@ -108,6 +108,10 @@ pub fn run() {
            commands::backup::auto_backup_app_data,
            commands::backup::get_auto_backup_dir,
            commands::backup::read_store_files,
+            commands::storage::load_store,
+            commands::storage::save_store,
+            commands::storage::store_credential,
+            commands::storage::get_credential,
            commands::updater::list_releases,
            commands::updater::download_and_install_update,
            commands::biometric::windows_hello_authenticate,
@@ -17,21 +17,17 @@ interface SavedAuth {
  pass?: string
 }

-async function resolveServerAdapter() {
-  const { SuwayomiAdapter } = await import('$lib/server-adapters/suwayomi')
-  return new SuwayomiAdapter()
-}
-
 async function boot() {
  try {
    const platformAdapter = detectAdapter()
    initPlatformService(platformAdapter)

-    await platformAdapter.init()
-
-    const serverAdapter = await resolveServerAdapter()
+    const { SuwayomiAdapter } = await import('$lib/server-adapters/suwayomi')
+    const serverAdapter = new SuwayomiAdapter()
    initRequestManager(serverAdapter)

+    await platformAdapter.init()
+
    appState.platform = platformAdapter.platform
    appState.version  = await platformAdapter.getVersion()

@@ -6,14 +6,25 @@
  import { dedupeMangaById, shouldHideNsfw } from "$lib/core/util";
  import Thumbnail               from "$lib/components/shared/manga/Thumbnail.svelte";
  import ContextMenu             from "$lib/components/shared/ui/ContextMenu.svelte";
-  import { ArrowLeft, BookmarkSimple, FolderSimplePlus, Folder, CircleNotch } from "phosphor-svelte";
+  import { ArrowLeftIcon, BookmarkSimpleIcon, FolderSimplePlusIcon, FolderIcon, CircleNotchIcon } from "phosphor-svelte";
  import type { Manga, Source, Category } from "$lib/types";
-  import type { MenuEntry } from "$lib/components/shared/ui/ContextMenu.svelte";
  import {
    PAGE_SIZE, INITIAL_PAGES, MAX_SOURCES,
    parseTags, tagsLabel, matchesAllTags, runConcurrent,
  } from "$lib/components/browse/lib/searchFilter";

+  interface MenuItem {
+    label:      string;
+    icon?:      any;
+    onClick:    () => void;
+    danger?:    boolean;
+    disabled?:  boolean;
+    separator?: never;
+    children?:  MenuEntry[];
+  }
+  interface MenuSeparator { separator: true }
+  type MenuEntry = MenuItem | MenuSeparator;
+
  interface Props {
    genre:  string;
    onBack: () => void;
@@ -63,17 +74,17 @@
    const t  = parseTags(filter);
    const pt = t[0] ?? "";

-    getAdapter().getMangaList({}).then((result) => {
+    getAdapter().getMangaList({}).then((result: { items: Manga[] }) => {
      if (!ctrl.signal.aborted) libraryManga = result.items;
    }).catch(() => {});

-    getAdapter().getSources().then(async (allSources) => {
+    getAdapter().getSources().then(async (allSources: Source[]) => {
      if (ctrl.signal.aborted) return;
      const srcs = allSources.filter((s: Source) => s.id !== "0").slice(0, MAX_SOURCES);
      sources    = srcs;
      for (const src of srcs) nextPageMap.set(src.id, -1);

-      await runConcurrent(srcs, async (src) => {
+      await runConcurrent(srcs, async (src: Source) => {
        if (ctrl.signal.aborted) return;
        const pageItems: Manga[] = [];
        for (let page = 1; page <= INITIAL_PAGES; page++) {
@@ -108,7 +119,7 @@
    const ctrl = new AbortController();
    abortCtrl  = ctrl;
    try {
-      await runConcurrent(srcs, async (src) => {
+      await runConcurrent(srcs, async (src: Source) => {
        const page = nextPageMap.get(src.id)!;
        if (ctrl.signal.aborted) return;
        let result: { items: Manga[]; hasNextPage: boolean } | null = null;
@@ -131,7 +142,7 @@
    if (!catsLoaded) {
      catsLoaded = true;
      getAdapter().getCategories()
-        .then((cats) => { categories = cats.filter((c) => c.id !== 0); })
+        .then((cats: Category[]) => { categories = cats.filter((c: Category) => c.id !== 0); })
        .catch(console.error);
    }
  }
@@ -140,7 +151,7 @@
    return [
      {
        label: m.inLibrary ? "In Library" : "Add to library",
-        icon: BookmarkSimple,
+        icon: BookmarkSimpleIcon,
        disabled: m.inLibrary,
        onClick: () => getAdapter().addToLibrary(String(m.id))
          .then(() => { sourceManga = sourceManga.map((x) => x.id === m.id ? { ...x, inLibrary: true } : x); })
@@ -149,17 +160,17 @@
      ...(categories.length > 0 ? [
        { separator: true } as MenuEntry,
        ...categories.map((cat): MenuEntry => ({
-          label: (cat.mangas?.nodes ?? []).some((x: { id: number }) => x.id === m.id) ? `✓ ${cat.name}` : cat.name,
-          icon: Folder,
+          label: (cat.mangas ?? []).some((x: Manga) => x.id === m.id) ? `✓ ${cat.name}` : cat.name,
+          icon: FolderIcon,
          onClick: () => getAdapter().updateMangaCategories(String(m.id), [cat.id], []).catch(console.error),
        })),
      ] : []),
      { separator: true },
      {
        label: "New folder & add",
-        icon: FolderSimplePlus,
+        icon: FolderSimplePlusIcon,
        onClick: async () => {
-          const name = prompt("Folder name:");
+          const name = prompt("FolderIcon name:");
          if (!name?.trim()) return;
          const cat = await getAdapter().createCategory(name.trim()).catch(console.error);
          if (cat) {
@@ -177,7 +188,7 @@
 <div class="root">
  <div class="header">
    <button class="back" onclick={onBack}>
-      <ArrowLeft size={13} weight="light" /><span>Back</span>
+      <ArrowLeftIcon size={13} weight="light" /><span>Back</span>
    </button>
    <span class="title">{label}</span>
    {#if !loadingInitial || filtered.length > 0}
@@ -204,7 +215,7 @@
      {#each visibleItems as m, i (m.id)}
        <button class="card" onclick={() => setPreviewManga(m)} oncontextmenu={(e) => { e.stopPropagation(); openCtx(e, m); }}>
          <div class="cover-wrap">
-            <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={i < 12 ? 12 - i : 0} />
+            <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={i < 12 ? 12 - i : 0} id={m.id} />
            {#if m.inLibrary}<span class="in-library-badge">Saved</span>{/if}
          </div>
          <p class="card-title">{m.title}</p>
@@ -213,7 +224,7 @@
      {#if hasMore}
        <div class="show-more-cell">
          <button class="show-more-btn" onclick={loadMore} disabled={loadingMore}>
-            {#if loadingMore}<CircleNotch size={13} weight="light" class="anim-spin" /> Loading…{:else}Show more{/if}
+            {#if loadingMore}<CircleNotchIcon size={13} weight="light" class="anim-spin" /> Loading…{:else}Show more{/if}
          </button>
        </div>
      {/if}
@@ -239,7 +250,7 @@
  .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); }
  :global(.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); }
-  .card-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); }
+  .card-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; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--t-base); }
  .card-skeleton { padding: 0; }
  .cover-skeleton { aspect-ratio: 2/3; border-radius: var(--radius-md); }
  .title-skeleton { height: 11px; margin-top: var(--sp-2); width: 75%; }
@@ -37,6 +37,8 @@
  let kw_inputEl:       HTMLInputElement | null = $state(null);
  let kw_abortCtrl:     AbortController | null = null;
  let kw_debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  let kw_localQuery     = $state("");
+  let kw_pending        = $state(false);

  interface SourceResult {
    source:  Source;
@@ -57,32 +59,37 @@
    if (!loadingSources && pendingPrefill && allSources.length) {
      const q = pendingPrefill;
      onPrefillConsumed();
+      kw_localQuery = q;
      onQueryChange(q);
      kwDoSearch(q);
    }
  });

-  $effect(() => {
-    const q = query;
+  function kwHandleInput(value: string) {
+    kw_localQuery = value;
    if (kw_debounceTimer) clearTimeout(kw_debounceTimer);
-    if (!q.trim()) { kw_abortCtrl?.abort(); kw_results = []; return; }
-    kw_debounceTimer = setTimeout(() => kwDoSearch(q), 350);
-    return () => { if (kw_debounceTimer) clearTimeout(kw_debounceTimer); };
-  });
+    if (!value.trim()) { kw_abortCtrl?.abort(); kw_results = []; kw_pending = false; onQueryChange(""); return; }
+    kw_pending = true;
+    kw_debounceTimer = setTimeout(() => {
+      kw_pending = false;
+      onQueryChange(value);
+      kwDoSearch(value);
+    }, 2000);
+  }

-  function kwGetVisibleSources(): Source[] {
+  const kw_visibleSources = $derived.by(() => {
    let srcs = allSources;
    if (kw_selectedLangs.size > 0)
      srcs = srcs.filter((s) => kw_selectedLangs.has(s.lang));
    if (settingsState.settings.contentLevel !== "unrestricted")
      srcs = srcs.filter((s) => !shouldHideSource(s, settingsState.settings));
    return srcs;
-  }
+  });

  async function kwDoSearch(q: string) {
    const trimmed = q.trim();
    if (!trimmed) return;
-    const visible = kwGetVisibleSources();
+    const visible = kw_visibleSources;
    if (!visible.length) return;

    kw_abortCtrl?.abort();
@@ -95,13 +102,13 @@
    await Promise.allSettled(visible.map(async (src) => {
      const idx = idxOf.get(src.id)!;
      try {
-        const result = await getAdapter().searchSource(src.id, trimmed, 1, ctrl.signal);
+        const result: { items: Manga[]; hasNextPage: boolean } = await getAdapter().searchSource(src.id, trimmed, 1, ctrl.signal);
        if (ctrl.signal.aborted) return;
        const mangas = result.items.filter((m) => !shouldHideNsfw(m as any, settingsState.settings));
-        kw_results = kw_results.map((r, i) => i === idx ? { ...r, mangas, loading: false } : r);
+        kw_results[idx] = { ...kw_results[idx], mangas, loading: false };
      } catch (e: any) {
        if (ctrl.signal.aborted || e?.name === "AbortError") return;
-        kw_results = kw_results.map((r, i) => i === idx ? { ...r, loading: false, error: e.message ?? "Error" } : r);
+        kw_results[idx] = { ...kw_results[idx], loading: false, error: e.message ?? "Error" };
      }
    }));
  }
@@ -113,7 +120,7 @@
    kw_selectedLangs = next;
  }

-  const kw_visibleCount = $derived(kwGetVisibleSources().length);
+  const kw_visibleCount = $derived(kw_visibleSources.length);
  const kw_anyLoading   = $derived(kw_results.some((r) => r.loading));
  const kw_allDone      = $derived(kw_results.length > 0 && kw_results.every((r) => !r.loading));
  const kw_hasResults   = $derived(kw_results.some((r) => r.mangas.length > 0));
@@ -142,18 +149,17 @@
    </svg>
    <input
      bind:this={kw_inputEl}
-      value={query}
-      oninput={(e) => onQueryChange((e.target as HTMLInputElement).value)}
+      value={kw_localQuery}
+      oninput={(e) => kwHandleInput((e.target as HTMLInputElement).value)}
      class="searchInput"
      placeholder="Search across sources…"
-      use:focusOnMount
    />
-    {#if kw_anyLoading}
+    {#if kw_pending || kw_anyLoading}
      <svg width="13" height="13" viewBox="0 0 256 256" fill="currentColor" class="anim-spin" style="color:var(--text-faint);flex-shrink:0" aria-hidden="true">
        <path d="M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60.15,61.59,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20.15-66.41-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z"/>
      </svg>
-    {:else if query}
-      <button class="clearBtn" title="Clear" onclick={() => { onQueryChange(""); kw_results = []; kw_inputEl?.focus(); }}>×</button>
+    {:else if kw_localQuery}
+      <button class="clearBtn" title="Clear" onclick={() => { kwHandleInput(""); kw_inputEl?.focus(); }}>×</button>
    {/if}
    {#if hasMultipleLangs}
      <button
@@ -193,7 +199,7 @@
  {/if}
 </div>

-{#if !query.trim()}
+{#if !kw_localQuery.trim()}
  {#if popularLoading && popularResults.length === 0}
    <div class="searchGrid">
      {#each Array(24) as _, i (i)}<div class="skCard"><div class="skeleton skCover"></div></div>{/each}
@@ -206,7 +212,7 @@
      {#each popularResults as m (m.id)}
        <button class="srchCard" onclick={() => onPreview(m)}>
          <div class="srchCoverWrap">
-            <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={m._priority} />
+            <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={m._priority} id={m.id} />
            <div class="srchGradient"></div>
            {#if m.inLibrary}<span class="inLibBadge">Saved</span>{/if}
            <div class="srchFooter">
@@ -235,16 +241,20 @@
      </p>
    </div>
  {/if}
+{:else if kw_pending}
+  <div class="searchGrid">
+    {#each Array(12) as _, i (i)}<div class="skCard"><div class="skeleton skCover"></div></div>{/each}
+  </div>
 {:else}
  {#if kw_flatResults.length > 0}
    <div class="searchHeader">
-      <span class="searchLabel">{kw_flatResults.length} result{kw_flatResults.length !== 1 ? "s" : ""}</span>
+      <span class="searchLabel">{kw_flatResults.length} result{kw_flatResults.length !== 1 ? "s" : ""} for "{kw_localQuery.trim()}"</span>
    </div>
    <div class="searchGrid">
      {#each kw_flatResults as m (m.id)}
        <button class="srchCard" onclick={() => onPreview(m)}>
          <div class="srchCoverWrap">
-            <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={m._priority} />
+            <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={m._priority} id={m.id} />
            <div class="srchGradient"></div>
            {#if m.inLibrary}<span class="inLibBadge">Saved</span>{/if}
            <div class="srchFooter">
@@ -264,16 +274,15 @@
    </div>
  {:else if kw_allDone && !kw_hasResults}
    <div class="empty">
-      <p class="emptyText">No results for "{query.trim()}"</p>
+      <svg width="36" height="36" viewBox="0 0 256 256" fill="currentColor" class="emptyIcon" aria-hidden="true">
+        <path d="M229.66,218.34l-50.07-50.07a88,88,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.31ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"/>
+      </svg>
+      <p class="emptyText">No results for "{kw_localQuery.trim()}"</p>
      <p class="emptyHint">Try a different spelling or fewer words</p>
    </div>
  {/if}
 {/if}

-<script module>
-  function focusOnMount(node: HTMLElement) { node.focus(); }
-</script>
-
 <style>
  .keywordBar    { padding: var(--sp-3) var(--sp-4) var(--sp-2); flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
  .searchBar     { display: flex; align-items: center; gap: var(--sp-2); background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-lg); padding: var(--sp-2) var(--sp-3); transition: border-color var(--t-base); }
@@ -306,7 +315,7 @@
  .srchCoverWrap { 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); transition: filter var(--t-base); }
  .srchGradient  { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.15) 50%, transparent 72%); pointer-events: none; }
  .srchFooter    { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: var(--sp-2); pointer-events: none; }
-  .srchTitle     { 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); }
+  .srchTitle     { 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; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
  .srchSource    { 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; }
  .inLibBadge    { position: absolute; top: var(--sp-2); left: var(--sp-2); z-index: 2; font-family: var(--font-ui); font-size: 9px; 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: 1px 5px; }
  .skCard        { display: flex; flex-direction: column; gap: var(--sp-2); flex-shrink: 0; width: 100%; }
@@ -5,7 +5,6 @@
  import { getAdapter }         from "$lib/request-manager";
  import { settingsState }      from "$lib/state/settings.svelte";
  import { setPreviewManga }    from "$lib/state/series.svelte";
-  import { dedupeMangaById } from "$lib/core/util";
  import { toCachedManga, shouldHideNsfw, runConcurrent, type CachedManga } from "$lib/components/browse/lib/searchFilter";
  import type { Manga, Source } from "$lib/types";

@@ -39,6 +38,8 @@
    goto(u.toString(), { replaceState: true, noScroll: true });
  }

+  let pendingPrefill = $state("");
+
  let tabsEl       = $state<HTMLDivElement | undefined>(undefined);
  let tabIndicator = $state({ left: 0, width: 0 });

@@ -64,22 +65,31 @@
  const availableLangs   = $derived(Array.from(new Set<string>(allSources.map((s) => s.lang))).sort());
  const hasMultipleLangs = $derived(availableLangs.length > 1);

-  loadingSources = true;
-  getAdapter().getSources()
-    .then((nodes) => {
-      localSource = nodes.find((s: Source) => s.id === "0") ?? null;
-      allSources  = nodes.filter((s: Source) => s.id !== "0");
-      startSourceCacheBuild();
-      popularStart(allSources);
-    })
-    .catch(console.error)
-    .finally(() => { loadingSources = false; });
+  let sourcesAbort: AbortController | null = null;
+
+  $effect(() => {
+    sourcesAbort?.abort();
+    const ctrl = new AbortController();
+    sourcesAbort = ctrl;
+    loadingSources = true;
+    getAdapter().getSources()
+      .then((nodes: Source[]) => {
+        if (ctrl.signal.aborted) return;
+        localSource = nodes.find((s: Source) => s.id === "0") ?? null;
+        allSources  = nodes.filter((s: Source) => s.id !== "0");
+        startSourceCacheBuild();
+        popularStart(allSources);
+      })
+      .catch(console.error)
+      .finally(() => { if (!ctrl.signal.aborted) loadingSources = false; });
+    return () => { ctrl.abort(); };
+  });

  let popular_raw:          Manga[] = $state([]);
  let popular_loading                  = $state(false);
  let popular_abortCtrl: AbortController | null = null;
-  let popular_sourcePool:   Source[] = $state([]);
-  let popular_sourceCursor             = $state(0);
+  let popular_sourcePool:   Source[] = [];
+  let popular_sourceCursor             = 0;
  let popular_seenIds    = new Set<number>();
  let popular_seenTitles = new Set<string>();

@@ -208,6 +218,7 @@
  }

  onDestroy(() => {
+    sourcesAbort?.abort();
    popular_abortCtrl?.abort();
    sourceCacheAbort?.abort();
  });
@@ -248,11 +259,13 @@
      {availableLangs}
      {hasMultipleLangs}
      {loadingSources}
+      {pendingPrefill}
      popularResults={popular_results}
      popularLoading={popular_loading}
      {sourceCache}
      query={urlQuery}
      onQueryChange={setQuery}
+      onPrefillConsumed={() => { pendingPrefill = ""; }}
      onPreview={(m) => setPreviewManga(m)}
    />
  {:else if urlTab === "tag"}
@@ -263,7 +276,6 @@
      {sourceCacheLoading}
      {sourceCacheEnriching}
      onPreview={(m) => setPreviewManga(m)}
-      onGenreDrill={(genre) => goto(`/browse?genre=${encodeURIComponent(genre)}`)}
    />
  {:else}
    <SourceTab
@@ -1,7 +1,7 @@
 <script lang="ts">
  import { onDestroy }          from "svelte";
  import { getAdapter }         from "$lib/request-manager";
-  import { settingsState }      from "$lib/state/settings.svelte";
+  import { settingsState, updateSettings } from "$lib/state/settings.svelte";
  import { shouldHideNsfw, shouldHideSource } from "$lib/core/util";
  import Thumbnail              from "$lib/components/shared/manga/Thumbnail.svelte";
  import ContextMenu            from "$lib/components/shared/ui/ContextMenu.svelte";
@@ -20,7 +20,7 @@

  const preferredLang = $derived(settingsState.settings.preferredExtensionLang ?? "en");

-  let src_selectedLang  = $state(preferredLang || "all");
+  let src_selectedLang  = $state(settingsState.settings.preferredExtensionLang || "all");
  let src_activeSource: Source | null = $state(null);
  let src_browseResults: Manga[]      = $state([]);
  let src_loadingBrowse               = $state(false);
@@ -122,7 +122,7 @@
  function togglePinnedSource(id: string) {
    const current = settingsState.settings.pinnedSourceIds ?? [];
    const next = current.includes(id) ? current.filter((x: string) => x !== id) : [...current, id];
-    settingsState.updateSettings({ pinnedSourceIds: next });
+    updateSettings({ pinnedSourceIds: next });
  }

  onDestroy(() => { src_abortCtrl?.abort(); });
@@ -261,7 +261,7 @@
          {#each src_browseResults as m, i (m.id)}
            <button class="card" onclick={() => onPreview(m)}>
              <div class="coverWrap">
-                <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={i < 12 ? 12 - i : 0} />
+                <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={i < 12 ? 12 - i : 0} id={m.id} />
                {#if m.inLibrary}<span class="inLibBadge">Saved</span>{/if}
              </div>
              <p class="cardTitle">{m.title}</p>
@@ -356,7 +356,7 @@
  .tagGrid            { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--sp-4); padding: var(--sp-4); overflow-y: auto; flex: 1; align-content: start; }
  .card               { background: none; border: none; padding: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: var(--sp-2); }
  .coverWrap          { position: relative; aspect-ratio: 2/3; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-raised); border: 1px solid var(--border-dim); }
-  .cardTitle          { 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; }
+  .cardTitle          { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-snug); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .inLibBadge         { position: absolute; top: var(--sp-2); left: var(--sp-2); font-family: var(--font-ui); font-size: 9px; 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: 1px 5px; }
  .showMoreCell       { grid-column: 1 / -1; display: flex; justify-content: center; padding: var(--sp-2) 0; }
  .showMoreBtn        { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 5px 12px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); background: none; font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-muted); cursor: pointer; transition: background var(--t-base), color var(--t-base), border-color var(--t-base); }
@@ -41,7 +41,8 @@
  let tag_loadingMoreLocal         = $state(false);
  let tag_localOffset              = $state(0);
  let tag_localHasNext             = $state(false);
-  let tag_abortLocal: AbortController | null = null;
+  let tag_abortLocal:     AbortController | null = null;
+  let tag_abortLoadMore:  AbortController | null = null;

  const renderLimit = $derived(settingsState.settings.renderLimit ?? 48);

@@ -52,9 +53,6 @@
    untrack(() => tagFetchLocal(_tags, _mode, _statuses));
  });

-  $effect(() => {
-    if (tag_localHasNext && !tag_loadingMoreLocal && !tag_loadingLocal) tagLoadMoreLocal();
-  });

  async function tagFetchLocal(activeTags: string[], tagMode: TagMode, activeStatuses: string[]) {
    if (activeTags.length === 0 && activeStatuses.length === 0) {
@@ -62,6 +60,7 @@
      return;
    }
    tag_abortLocal?.abort();
+    tag_abortLoadMore?.abort();
    const ctrl = new AbortController();
    tag_abortLocal = ctrl;
    tag_localResults = []; tag_totalCount = 0; tag_localOffset = 0; tag_localHasNext = false;
@@ -77,6 +76,7 @@
      tag_totalCount   = d.totalCount;
      tag_localHasNext = d.hasNextPage;
      tag_localOffset  = limit;
+      if (d.hasNextPage && tag_localResults.length < 20) tagLoadMoreLocal();
    } catch (e: any) {
      if (e?.name !== "AbortError") console.error(e);
    } finally {
@@ -86,10 +86,10 @@

  async function tagLoadMoreLocal() {
    if (tag_loadingMoreLocal || !tag_localHasNext) return;
-    tag_loadingMoreLocal = true;
-    tag_abortLocal?.abort();
+    tag_abortLoadMore?.abort();
    const ctrl = new AbortController();
-    tag_abortLocal = ctrl;
+    tag_abortLoadMore    = ctrl;
+    tag_loadingMoreLocal = true;
    const limit = renderLimit;
    try {
      const d = await getAdapter().getMangasByGenre(
@@ -191,13 +191,22 @@

  let tag_autoSearchFired = $state(false);
  $effect(() => {
-    tag_activeTags;
-    tag_activeStatuses;
+    void tag_activeTags;
+    void tag_activeStatuses;
    untrack(() => { tag_autoSearchFired = false; });
-    if (!tag_loadingLocal && tag_hasActiveFilters && !tag_autoSearchFired && !tag_searchSources && sourceCacheReady) {
-      if (tag_localResults.length < 20) {
-        untrack(() => { tag_autoSearchFired = true; tag_searchSources = true; });
-      }
+  });
+  $effect(() => {
+    const _loadingLocal = tag_loadingLocal;
+    const _hasFilters   = tag_hasActiveFilters;
+    const _resultLen    = tag_localResults.length;
+    const _cacheReady   = sourceCacheReady;
+    if (!_loadingLocal && _hasFilters && _cacheReady) {
+      untrack(() => {
+        if (!tag_autoSearchFired && !tag_searchSources && _resultLen < 20) {
+          tag_autoSearchFired = true;
+          tag_searchSources   = true;
+        }
+      });
    }
  });

@@ -230,6 +239,7 @@

  onDestroy(() => {
    tag_abortLocal?.abort();
+    tag_abortLoadMore?.abort();
    tag_fanOutAbort?.abort();
  });
 </script>
@@ -360,7 +370,7 @@
          {#each tag_mergedResults as m, i (m.id)}
            <button class="card" onclick={() => onPreview(m)}>
              <div class="coverWrap">
-                <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={i < 12 ? 12 - i : 0} />
+                <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={i < 12 ? 12 - i : 0} id={m.id} />
                {#if m.inLibrary}<span class="inLibBadge">Saved</span>{/if}
              </div>
              <p class="cardTitle">{m.title}</p>
@@ -370,6 +380,10 @@
            {#each Array(12) as _, i (i)}
              <div class="skCard"><div class="skeleton skCover"></div><div class="skeleton skTitle"></div></div>
            {/each}
+          {:else if tag_localHasNext}
+            <div class="loadMoreRow">
+              <button class="loadMoreBtn" onclick={tagLoadMoreLocal}>Load more</button>
+            </div>
          {/if}
        </div>
      {:else}
@@ -426,9 +440,12 @@
  .tagClearAll:hover    { color: var(--color-error); border-color: color-mix(in srgb, var(--color-error) 40%, transparent); background: var(--color-error-bg, color-mix(in srgb, var(--color-error) 8%, transparent)); }
  .tagCheckMark         { font-size: var(--text-xs); color: var(--accent-fg); margin-left: auto; }
  .tagGrid              { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--sp-4); padding: var(--sp-4); overflow-y: auto; flex: 1; align-content: start; will-change: scroll-position; }
+  .loadMoreRow          { grid-column: 1 / -1; display: flex; justify-content: center; padding: var(--sp-2) 0 var(--sp-4); }
+  .loadMoreBtn          { 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); border-radius: var(--radius-md); padding: 6px 20px; cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
+  .loadMoreBtn:hover    { color: var(--text-muted); border-color: var(--border-strong); background: var(--bg-raised); }
  .card                 { background: none; border: none; padding: 0; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: var(--sp-2); }
  .coverWrap            { position: relative; aspect-ratio: 2/3; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-raised); border: 1px solid var(--border-dim); }
-  .cardTitle            { 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); }
+  .cardTitle            { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-snug); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--t-base); }
  .inLibBadge           { position: absolute; top: var(--sp-2); left: var(--sp-2); font-family: var(--font-ui); font-size: 9px; 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: 1px 5px; }
  .skCard               { display: flex; flex-direction: column; gap: var(--sp-2); }
  @keyframes shimmer { from { background-position: -200% 0 } to { background-position: 200% 0 } }
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import logoUrl from '$lib/assets/moku-icon-splash.svg'
-  import { appState } from '$lib/state/app.svelte'
+  import logoUrl                           from '$lib/assets/moku-icon-splash.svg'
+  import { appState }                      from '$lib/state/app.svelte'
  import { boot, submitLogin, bypassBoot } from '$lib/state/boot.svelte'

  function handleBypass() {
@@ -9,7 +9,7 @@
 </script>

 {#if appState.status === 'auth'}
-  <div class="overlay">
+  <div class="overlay overlay--clear">
    <div class="card anim-scale-in">
      <img src={logoUrl} alt="Moku" class="logo" />
      <p class="title">moku</p>
@@ -56,10 +56,14 @@
 {/if}

 <style>
-  .overlay   { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; pointer-events:none; }
-  .card      { pointer-events:auto; width:min(280px, calc(100vw - 48px)); background:var(--bg-surface); border:1px solid var(--border-base); border-radius:var(--radius-xl); padding:var(--sp-6) var(--sp-5); display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); box-shadow:0 32px 80px rgba(0,0,0,0.75); text-align:center; }
+  .overlay       { position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.7); backdrop-filter:blur(6px); animation:overlayIn 0.28s cubic-bezier(0,0,0.2,1) both; }
+  .overlay--clear { background:transparent; backdrop-filter:none; pointer-events:none; }
+  .overlay--clear .card { pointer-events:auto; }
+
+  .card { width:min(280px, calc(100vw - 48px)); background:var(--bg-surface); border:1px solid var(--border-base); border-radius:var(--radius-xl); padding:var(--sp-6) var(--sp-5); display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); box-shadow:0 32px 80px rgba(0,0,0,0.75); text-align:center; animation:cardIn 0.38s cubic-bezier(0.22,1,0.36,1) 0.06s both; }
+
+  .logo         { width:56px; height:56px; border-radius:14px; display:block; position:relative; }

-  .logo       { width:56px; height:56px; border-radius:14px; display:block; }
  .title      { font-family:var(--font-ui); font-size:11px; font-weight:500; letter-spacing:0.26em; text-transform:uppercase; color:var(--text-secondary); margin:-6px 0 0; user-select:none; }
  .mode-badge { font-family:var(--font-ui); font-size:var(--text-2xs); letter-spacing:var(--tracking-wider); text-transform:uppercase; color:var(--accent-fg); background:var(--accent-muted); border:1px solid var(--accent-dim); border-radius:var(--radius-full); padding:2px 10px; }
  .host       { font-family:var(--font-ui); font-size:var(--text-xs); color:var(--text-faint); letter-spacing:var(--tracking-wide); margin:-4px 0 0; }
@@ -70,9 +74,14 @@
  .input:focus    { border-color:var(--border-focus); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
  .input:disabled { opacity:0.5; }

-  .btn               { width:100%; padding:9px; border-radius:var(--radius-md); background:var(--accent); border:1px solid var(--accent); color:var(--accent-fg); font-size:var(--text-sm); font-family:var(--font-ui); letter-spacing:var(--tracking-wide); cursor:pointer; transition:opacity var(--t-base); }
-  .btn:hover:not(:disabled) { opacity:0.85; }
-  .btn:disabled      { opacity:0.35; cursor:default; }
-  .btn--ghost        { background:none; border-color:transparent; color:var(--text-faint); font-size:var(--text-xs); padding:4px; }
-  .btn--ghost:hover:not(:disabled) { color:var(--text-muted); opacity:1; }
+  .btn                              { width:100%; padding:9px; border-radius:var(--radius-md); background:var(--accent); border:1px solid var(--accent); color:var(--accent-fg); font-size:var(--text-sm); font-family:var(--font-ui); letter-spacing:var(--tracking-wide); cursor:pointer; transition:opacity var(--t-base); }
+  .btn:hover:not(:disabled)         { opacity:0.85; }
+  .btn:disabled                     { opacity:0.35; cursor:default; }
+  .btn--ghost                       { background:none; border-color:transparent; color:var(--text-faint); font-size:var(--text-xs); padding:4px; }
+  .btn--ghost:hover:not(:disabled)  { color:var(--text-muted); opacity:1; }
+
+  @keyframes overlayIn { from { opacity:0 } to { opacity:1 } }
+  @keyframes cardIn    { from { opacity:0; transform:translateY(28px) scale(0.97) } to { opacity:1; transform:translateY(0) scale(1) } }
+  @keyframes anim-scale-in { from { opacity:0; transform:scale(0.96) } to { opacity:1; transform:scale(1) } }
+  .anim-scale-in { animation:anim-scale-in 0.2s cubic-bezier(0,0,0.2,1) both; }
 </style>
@@ -1,384 +1,463 @@
+<script module lang="ts">
+  function getLiveSet(): Set<HTMLCanvasElement> {
+    const g = window as any
+    if (!g.__splashCanvasSet) g.__splashCanvasSet = new Set<HTMLCanvasElement>()
+    return g.__splashCanvasSet as Set<HTMLCanvasElement>
+  }
+
+  function pruneSet(set: Set<HTMLCanvasElement>) {
+    for (const el of set) if (!el.isConnected) set.delete(el)
+  }
+
+  export function splashDevRegister(el: HTMLCanvasElement) {
+    const set = getLiveSet()
+    pruneSet(set)
+    set.add(el)
+  }
+
+  export function splashDevUnregister(el: HTMLCanvasElement) {
+    const set = getLiveSet()
+    set.delete(el)
+    pruneSet(set)
+  }
+
+  export function splashDevLiveCount(): number {
+    const set = getLiveSet()
+    pruneSet(set)
+    return set.size
+  }
+
+  export function splashDevNextMount(): number {
+    const g = window as any
+    g.__splashTotalMounts = (g.__splashTotalMounts ?? 0) + 1
+    return g.__splashTotalMounts as number
+  }
+</script>
+
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { getCurrentWindow } from "@tauri-apps/api/window";
-  import { settingsState } from "$lib/state/settings.svelte";
-  import logoUrl from "$lib/assets/moku-icon-splash.svg";
+  import { onMount } from 'svelte'
+  import logoUrl     from '$lib/assets/moku-icon-splash.svg'
+  import { platformService } from '$lib/platform-service'
+
+  const isTauri = platformService.platform === 'tauri'
+  const isDev   = import.meta.env.DEV

  interface Props {
-    mode?:          "loading" | "idle";
-    ringFull?:      boolean;
-    failed?:        boolean;
-    notConfigured?: boolean;
-    showCards?:     boolean;
-    showFps?:       boolean;
-    onReady?:       () => void;
-    onRetry?:       () => void;
-    onBypass?:      () => void;
-    onDismiss?:     () => void;
+    mode?:          'loading' | 'idle' | 'locked'
+    ringFull?:      boolean
+    failed?:        boolean
+    notConfigured?: boolean
+    showCards?:     boolean
+    showFps?:       boolean
+    showDevOverlay?: boolean
+    pinLen?:        number
+    pinCorrect?:    string
+    onReady?:       () => void
+    onUnlock?:      () => void
+    onRetry?:       () => void
+    onBypass?:      () => void
+    onDismiss?:     () => void
  }

  let {
-    mode = "loading", ringFull = false, failed = false,
-    notConfigured = false, showCards = true, showFps = false,
-    onReady, onRetry, onBypass, onDismiss,
-  }: Props = $props();
+    mode = 'loading', ringFull = false, failed = false,
+    notConfigured = false, showCards = true, showFps = false, showDevOverlay = false,
+    pinLen = 4, pinCorrect = '',
+    onReady, onUnlock, onRetry, onBypass, onDismiss,
+  }: Props = $props()

-  const serverAuthActive = $derived(
-    settingsState.settings.serverAuthMode === "BASIC_AUTH" || settingsState.settings.serverAuthMode === "UI_LOGIN"
-  );
+  let fpsEl    = $state<HTMLSpanElement | undefined>(undefined)
+  let dots     = $state('')
+  let ringProg = $state(0.025)
+  let exiting  = $state(false)
+  let exitLock = false

-  const lockEnabled = $derived(
-    settingsState.settings.appLockEnabled &&
-    (settingsState.settings.appLockPin?.length ?? 0) >= 4 &&
-    (mode === "idle" || !serverAuthActive)
-  );
+  let pinEntry = $state('')
+  let pinShake = $state(false)

-  let pinEntry    = $state("");
-  let pinShake    = $state(false);
-  let pinUnlocked = $state(false);
-  let pinVisible  = $state(false);
-  let uiScale     = $state(1);
-  let fpsEl       = $state<HTMLSpanElement | undefined>(undefined);
+  const logoLoadingSize = 140
+  const logoIdleSize    = 128
+  const ringR    = 70
+  const ringPad  = 12
+  const ringSize = (ringR + ringPad) * 2
+  const ringC    = ringR + ringPad
+  const ringCirc = 2 * Math.PI * ringR
+  const ringArc  = $derived(ringCirc * Math.min(Math.max(ringProg, 0.025), 0.999))

-  const logoLoadingSize = 140;
-  const logoIdleSize    = 128;
-  const logoLockSize    = 96;
+  const EXIT_MS       = 320
+  const PHASE1_TARGET = 0.85
+  const PHASE1_MS     = 3000
+  const PHASE2_TARGET = 0.95
+  const PHASE2_MS     = 10000

-  const ringR    = 70;
-  const ringPad  = 12;
-  const ringSize = (ringR + ringPad) * 2;
-  const ringC    = ringR + ringPad;
-  const ringCirc = 2 * Math.PI * ringR;
-  const ringArc  = $derived(ringCirc * Math.min(Math.max(ringProg, 0.025), 0.999));
+  function triggerExit(cb?: () => void) {
+    if (exitLock) return
+    exitLock = true
+    exiting  = true
+    setTimeout(() => cb?.(), EXIT_MS)
+  }
+
+  let animFrame: number
+  let animStart: number | null = null
+  let animPhase = 1
+
+  function animateRing(ts: number) {
+    if (exitLock) return
+    if (animStart === null) animStart = ts
+    const elapsed = ts - animStart
+    if (animPhase === 1) {
+      const t = Math.min(elapsed / PHASE1_MS, 1)
+      ringProg = 0.025 + (1 - Math.pow(1 - t, 3)) * (PHASE1_TARGET - 0.025)
+      if (t >= 1) { animPhase = 2; animStart = ts }
+    } else {
+      const t = Math.min(elapsed / PHASE2_MS, 1)
+      ringProg = PHASE1_TARGET + (1 - Math.pow(1 - t, 4)) * (PHASE2_TARGET - PHASE1_TARGET)
+    }
+    animFrame = requestAnimationFrame(animateRing)
+  }
+
+  $effect(() => {
+    if (mode === 'loading' && !failed && !notConfigured && !ringFull) {
+      if (!isTauri) return
+      animStart = null
+      animPhase = 1
+      animFrame = requestAnimationFrame(animateRing)
+      return () => cancelAnimationFrame(animFrame)
+    }
+  })
+
+  $effect(() => {
+    if (!ringFull || mode === 'locked') { exitLock = false; exiting = false; return }
+    cancelAnimationFrame(animFrame)
+    ringProg = 1
+    setTimeout(() => triggerExit(onReady), 650)
+  })

  function submitPin() {
-    if (pinEntry === settingsState.settings.appLockPin) {
-      pinUnlocked = true;
-      pinEntry    = "";
-      if (mode === "idle") triggerExit(onDismiss);
+    if (pinEntry === pinCorrect) {
+      triggerExit(onUnlock)
    } else {
-      pinShake = true;
-      pinEntry = "";
-      setTimeout(() => (pinShake = false), 500);
+      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 (mode !== 'locked' || exitLock) return
+    if (e.key === 'Enter')     { e.preventDefault(); submitPin(); return }
+    if (e.key === 'Backspace') { e.preventDefault(); pinEntry = pinEntry.slice(0, -1); return }
    if (/^\d$/.test(e.key)) {
-      pinEntry = (pinEntry + e.key).slice(0, 8);
-      if (pinEntry.length >= (settingsState.settings.appLockPin?.length ?? 4)) submitPin();
+      e.preventDefault()
+      pinEntry = (pinEntry + e.key).slice(0, 8)
+      if (pinEntry.length >= pinLen) submitPin()
    }
  }

-  const EXIT_MS       = 320;
-  const PHASE1_TARGET = 0.85;
-  const PHASE1_MS     = 3000;
-  const PHASE2_TARGET = 0.95;
-  const PHASE2_MS     = 10000;
-
-  let dots     = $state("");
-  let ringProg = $state(0.025);
-  let exiting  = $state(false);
-  let exitLock = false;
-
-  function triggerExit(cb?: () => void) {
-    if (exitLock) return;
-    exitLock = true;
-    exiting  = true;
-    setTimeout(() => cb?.(), EXIT_MS);
-  }
-
-  let animFrame: number;
-  let animStart: number | null = null;
-  let animPhase = 1;
-
-  function animateRing(ts: number) {
-    if (exitLock) return;
-    if (animStart === null) animStart = ts;
-    const elapsed = ts - animStart;
-    if (animPhase === 1) {
-      const t = Math.min(elapsed / PHASE1_MS, 1);
-      ringProg = 0.025 + (1 - Math.pow(1 - t, 3)) * (PHASE1_TARGET - 0.025);
-      if (t >= 1) { animPhase = 2; animStart = ts; }
-    } else {
-      const t = Math.min(elapsed / PHASE2_MS, 1);
-      ringProg = PHASE1_TARGET + (1 - Math.pow(1 - t, 4)) * (PHASE2_TARGET - PHASE1_TARGET);
-    }
-    animFrame = requestAnimationFrame(animateRing);
-  }
-
  $effect(() => {
-    if (mode === "loading" && !failed && !notConfigured && !ringFull) {
-      animStart = null;
-      animPhase = 1;
-      animFrame = requestAnimationFrame(animateRing);
-      return () => cancelAnimationFrame(animFrame);
-    }
-  });
+    if (mode !== 'locked') return
+    pinEntry = ''
+    window.addEventListener('keydown', onPinKey)
+    return () => window.removeEventListener('keydown', onPinKey)
+  })

-  $effect(() => {
-    if (!ringFull) {
-      exitLock = false;
-      exiting  = false;
-      return;
-    }
-    
-    cancelAnimationFrame(animFrame);
-    animFrame = 0;
-    ringProg = 1;
-    if (lockEnabled && !pinUnlocked) {
-      setTimeout(() => (pinVisible = true), 400);
-    } else {
-      setTimeout(() => triggerExit(onReady), 650);
-    }
-  });
+  onMount(() => {
+    const iv = setInterval(() => { dots = dots.length >= 3 ? '' : dots + '.' }, 420)

-  $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);
-  });
-
-  onMount(async () => {
-    try {
-      const win = getCurrentWindow();
-      uiScale = await win.scaleFactor();
-    } catch {
-      uiScale = window.devicePixelRatio || 1;
-    }
-
-    const dotsInterval = setInterval(() => {
-      dots = dots.length >= 3 ? "" : dots + ".";
-    }, 420);
-
-    if (mode === "idle" && onDismiss) {
-      if (lockEnabled) return () => clearInterval(dotsInterval);
-      const handler = () => triggerExit(onDismiss);
+    if (mode === 'idle' && onDismiss) {
+      const handler = () => triggerExit(onDismiss)
      const t = setTimeout(() => {
-        window.addEventListener("keydown",    handler, { once: true });
-        window.addEventListener("mousedown",  handler, { once: true });
-        window.addEventListener("touchstart", handler, { once: true });
-      }, 200);
+        window.addEventListener('keydown',    handler, { once: true })
+        window.addEventListener('mousedown',  handler, { once: true })
+        window.addEventListener('touchstart', handler, { once: true })
+      }, 200)
      return () => {
-        clearTimeout(t);
-        clearInterval(dotsInterval);
-        window.removeEventListener("keydown",    handler);
-        window.removeEventListener("mousedown",  handler);
-        window.removeEventListener("touchstart", handler);
-      };
+        clearTimeout(t)
+        clearInterval(iv)
+        window.removeEventListener('keydown',    handler)
+        window.removeEventListener('mousedown',  handler)
+        window.removeEventListener('touchstart', handler)
+      }
    }
-    return () => clearInterval(dotsInterval);
-  });
+    return () => clearInterval(iv)
+  })

-  interface CardDef  { cx: number; w: number; h: number; lines: number; alpha: number; speed: number; cycleSec: number; phase: number; travel: number; yStart: number; angleStart: number; tilt: number; }
-  interface CardTrig { cosA: number; sinA: number; tiltRad: number; }
-  interface RenderState { cards: CardDef[]; trigs: CardTrig[]; stamps: HTMLCanvasElement[]; vignette: HTMLCanvasElement; CW: number; CH: number; scale: number; }
+  interface CardDef    { cx: number; w: number; h: number; lines: number; alpha: number; speed: number; cycleSec: number; phase: number; travel: number; yStart: number; angleStart: number; tilt: number }
+  interface CardTrig   { cosA: number; sinA: number; tiltRad: number }
+  interface RenderState { cards: CardDef[]; trigs: CardTrig[]; stamps: HTMLCanvasElement[]; vignette: HTMLCanvasElement; CW: number; CH: number; scale: number }

  const LAYER_CFG = [
    { wMin: 26, wMax: 40, speedMin: 30,  speedMax: 50,  alpha: 0.22 },
    { wMin: 38, wMax: 56, speedMin: 52,  speedMax: 80,  alpha: 0.35 },
    { wMin: 54, wMax: 76, speedMin: 85,  speedMax: 120, alpha: 0.50 },
-  ] as const;
+  ] as const

-  const BUF = 80, COLS = 14;
+  const BUF = 80, COLS = 14

  function hash(n: number): number {
-    let x = Math.imul(n ^ (n >>> 16), 0x45d9f3b);
-    x = Math.imul(x ^ (x >>> 16), 0x45d9f3b);
-    return ((x ^ (x >>> 16)) >>> 0) / 0xffffffff;
+    let x = Math.imul(n ^ (n >>> 16), 0x45d9f3b)
+    x = Math.imul(x ^ (x >>> 16), 0x45d9f3b)
+    return ((x ^ (x >>> 16)) >>> 0) / 0xffffffff
  }

  function buildCards(vw: number, vh: number) {
-    const cards: CardDef[] = [];
-    const laneW = vw / COLS;
+    const cards: CardDef[] = []
+    const laneW = vw / COLS
    for (let layer = 0; layer < 3; layer++) {
-      const cfg = LAYER_CFG[layer];
+      const cfg = LAYER_CFG[layer]
      for (let col = 0; col < COLS; col++) {
-        const seed   = col * 31 + layer * 97 + 7;
-        const w      = cfg.wMin + hash(seed + 1) * (cfg.wMax - cfg.wMin);
-        const h      = w * 1.44;
-        const speed  = cfg.speedMin + hash(seed + 5) * (cfg.speedMax - cfg.speedMin);
-        const travel = vh + h + BUF;
+        const seed  = col * 31 + layer * 97 + 7
+        const w     = cfg.wMin + hash(seed + 1) * (cfg.wMax - cfg.wMin)
+        const h     = w * 1.44
+        const speed = cfg.speedMin + hash(seed + 5) * (cfg.speedMax - cfg.speedMin)
+        const travel = vh + h + BUF
        cards.push({
          cx: (col + 0.5) * laneW + (hash(seed + 2) * 2 - 1) * Math.max(0, (laneW - w) / 2 - 2),
          w, h,
-          lines: 1 + Math.floor(hash(seed + 7) * 3),
-          alpha: cfg.alpha,
+          lines:      1 + Math.floor(hash(seed + 7) * 3),
+          alpha:      cfg.alpha,
          speed,
-          cycleSec: travel / speed,
-          phase: ((col / COLS) + hash(seed + 6) * 0.6 + layer * 0.23) % 1,
+          cycleSec:   travel / speed,
+          phase:      ((col / COLS) + hash(seed + 6) * 0.6 + layer * 0.23) % 1,
          travel,
-          yStart: vh + h / 2 + BUF / 2,
+          yStart:     vh + h / 2 + BUF / 2,
          angleStart: hash(seed + 3) * 50 - 25,
-          tilt: (hash(seed + 4) * 2 - 1) * 18,
-        });
+          tilt:       (hash(seed + 4) * 2 - 1) * 18,
+        })
      }
    }
    const trigs: CardTrig[] = cards.map(c => ({
      cosA:    Math.cos(c.angleStart * (Math.PI / 180)),
      sinA:    Math.sin(c.angleStart * (Math.PI / 180)),
      tiltRad: c.tilt * (Math.PI / 180),
-    }));
-    return { cards, trigs };
+    }))
+    return { cards, trigs }
  }

  function rrect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) {
-    ctx.beginPath();
-    ctx.moveTo(x + r, y);         ctx.lineTo(x + w - r, y);     ctx.arcTo(x + w, y,     x + w, y + r,     r);
-    ctx.lineTo(x + w, y + h - r); ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
-    ctx.lineTo(x + r, y + h);     ctx.arcTo(x,     y + h, x,     y + h - r, r);
-    ctx.lineTo(x, y + r);         ctx.arcTo(x,     y,     x + r, y,         r);
-    ctx.closePath();
+    ctx.beginPath()
+    ctx.moveTo(x + r, y);         ctx.lineTo(x + w - r, y);     ctx.arcTo(x + w, y,     x + w, y + r,     r)
+    ctx.lineTo(x + w, y + h - r); ctx.arcTo(x + w, y + h, x + w - r, y + h, r)
+    ctx.lineTo(x + r, y + h);     ctx.arcTo(x,     y + h, x,     y + h - r, r)
+    ctx.lineTo(x, y + r);         ctx.arcTo(x,     y,     x + r, y,         r)
+    ctx.closePath()
  }

-  const STAMP_PAD = 6;
+  const STAMP_PAD = 6

  function buildStamp(c: CardDef, dpr: number): HTMLCanvasElement {
-    const oc  = document.createElement("canvas");
-    oc.width  = Math.round(Math.ceil(c.w + STAMP_PAD * 2) * dpr);
-    oc.height = Math.round(Math.ceil(c.h + STAMP_PAD * 2) * dpr);
-    const ctx = oc.getContext("2d")!;
-    ctx.scale(dpr, dpr);
-    const x0     = STAMP_PAD, y0 = STAMP_PAD;
-    const coverH = c.w * 0.72 * 1.05;
-    const lineY0 = y0 + 3 + coverH + 5;
-    ctx.fillStyle   = "rgba(0,0,0,0.5)";          rrect(ctx, x0 + 2, y0 + 2, c.w, c.h, 4);            ctx.fill();
-    ctx.fillStyle   = "rgba(255,255,255,0.07)";   rrect(ctx, x0, y0, c.w, c.h, 4);                     ctx.fill();
-    ctx.strokeStyle = "rgba(255,255,255,0.75)";
-    ctx.lineWidth   = 1.2;                        rrect(ctx, x0, y0, c.w, c.h, 4);                     ctx.stroke();
-    ctx.fillStyle   = "rgba(255,255,255,0.15)";   rrect(ctx, x0 + 3, y0 + 3, c.w - 6, coverH, 3);     ctx.fill();
-    ctx.fillStyle   = "rgba(255,255,255,0.08)";   rrect(ctx, x0 + 3, y0 + 3, (c.w - 6) * 0.45, coverH, 3); ctx.fill();
+    const oc  = document.createElement('canvas')
+    oc.width  = Math.round(Math.ceil(c.w + STAMP_PAD * 2) * dpr)
+    oc.height = Math.round(Math.ceil(c.h + STAMP_PAD * 2) * dpr)
+    const ctx = oc.getContext('2d')!
+    ctx.scale(dpr, dpr)
+    const x0     = STAMP_PAD, y0 = STAMP_PAD
+    const coverH = c.w * 0.72 * 1.05
+    const lineY0 = y0 + 3 + coverH + 5
+    ctx.fillStyle   = 'rgba(0,0,0,0.5)';         rrect(ctx, x0 + 2, y0 + 2, c.w, c.h, 4);                   ctx.fill()
+    ctx.fillStyle   = 'rgba(255,255,255,0.07)';  rrect(ctx, x0, y0, c.w, c.h, 4);                            ctx.fill()
+    ctx.strokeStyle = 'rgba(255,255,255,0.75)';  ctx.lineWidth = 1.2; rrect(ctx, x0, y0, c.w, c.h, 4);       ctx.stroke()
+    ctx.fillStyle   = 'rgba(255,255,255,0.15)';  rrect(ctx, x0 + 3, y0 + 3, c.w - 6, coverH, 3);            ctx.fill()
+    ctx.fillStyle   = 'rgba(255,255,255,0.08)';  rrect(ctx, x0 + 3, y0 + 3, (c.w - 6) * 0.45, coverH, 3);  ctx.fill()
    for (let li = 0; li < c.lines; li++) {
-      ctx.fillStyle = li === 0 ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.20)";
-      ctx.fillRect(x0 + 4, lineY0 + li * 8, (c.w - 8) * (li === 0 ? 0.78 : 0.52), li === 0 ? 3 : 2);
+      ctx.fillStyle = li === 0 ? 'rgba(255,255,255,0.35)' : 'rgba(255,255,255,0.20)'
+      ctx.fillRect(x0 + 4, lineY0 + li * 8, (c.w - 8) * (li === 0 ? 0.78 : 0.52), li === 0 ? 3 : 2)
    }
-    return oc;
+    return oc
  }

  function buildVignette(vw: number, vh: number, dpr: number): HTMLCanvasElement {
-    const oc  = document.createElement("canvas");
-    oc.width  = Math.round(vw * dpr);
-    oc.height = Math.round(vh * dpr);
-    const ctx = oc.getContext("2d")!;
-    ctx.scale(dpr, dpr);
-    const g = ctx.createRadialGradient(vw / 2, vh / 2, 0, vw / 2, vh / 2, Math.max(vw, vh) * 0.65);
-    g.addColorStop(0,   "rgba(0,0,0,0)");
-    g.addColorStop(0.4, "rgba(0,0,0,0)");
-    g.addColorStop(0.7, "rgba(0,0,0,0.25)");
-    g.addColorStop(1,   "rgba(0,0,0,0.65)");
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, vw, vh);
-    return oc;
+    const oc  = document.createElement('canvas')
+    oc.width  = Math.round(vw * dpr)
+    oc.height = Math.round(vh * dpr)
+    const ctx = oc.getContext('2d')!
+    ctx.scale(dpr, dpr)
+    const g = ctx.createRadialGradient(vw / 2, vh / 2, 0, vw / 2, vh / 2, Math.max(vw, vh) * 0.65)
+    g.addColorStop(0,   'rgba(0,0,0,0)')
+    g.addColorStop(0.4, 'rgba(0,0,0,0)')
+    g.addColorStop(0.7, 'rgba(0,0,0,0.25)')
+    g.addColorStop(1,   'rgba(0,0,0,0.65)')
+    ctx.fillStyle = g
+    ctx.fillRect(0, 0, vw, vh)
+    return oc
  }

  function drawFrame(
    ctx: CanvasRenderingContext2D, t: number, cw: number, ch: number, dpr: number,
    cards: CardDef[], trigs: CardTrig[], stamps: HTMLCanvasElement[], vignette: HTMLCanvasElement,
  ) {
-    ctx.clearRect(0, 0, cw, ch);
+    ctx.clearRect(0, 0, cw, ch)
    for (let i = 0; i < cards.length; i++) {
-      const c     = cards[i];
-      const p     = ((t / c.cycleSec) + c.phase) % 1;
-      const alpha = p < 0.07 ? (p / 0.07) * c.alpha : p > 0.86 ? ((1 - p) / 0.14) * c.alpha : c.alpha;
-      if (alpha < 0.005) continue;
-      const cy    = c.yStart - p * c.travel;
-      const tg    = trigs[i];
-      const delta = tg.tiltRad * p;
-      const cos   = tg.cosA * Math.cos(delta) - tg.sinA * Math.sin(delta);
-      const sin   = tg.sinA * Math.cos(delta) + tg.cosA * Math.sin(delta);
-      ctx.globalAlpha = alpha;
-      ctx.setTransform(cos * dpr, sin * dpr, -sin * dpr, cos * dpr, c.cx * dpr, cy * dpr);
-      const sw = stamps[i].width / dpr, sh = stamps[i].height / dpr;
-      ctx.drawImage(stamps[i], -sw / 2, -sh / 2, sw, sh);
+      const c     = cards[i]
+      const p     = ((t / c.cycleSec) + c.phase) % 1
+      const alpha = p < 0.07 ? (p / 0.07) * c.alpha : p > 0.86 ? ((1 - p) / 0.14) * c.alpha : c.alpha
+      if (alpha < 0.005) continue
+      const cy    = c.yStart - p * c.travel
+      const tg    = trigs[i]
+      const delta = tg.tiltRad * p
+      const cos   = tg.cosA * Math.cos(delta) - tg.sinA * Math.sin(delta)
+      const sin   = tg.sinA * Math.cos(delta) + tg.cosA * Math.sin(delta)
+      ctx.globalAlpha = alpha
+      ctx.setTransform(cos * dpr, sin * dpr, -sin * dpr, cos * dpr, c.cx * dpr, cy * dpr)
+      const sw = stamps[i].width / dpr, sh = stamps[i].height / dpr
+      ctx.drawImage(stamps[i], -sw / 2, -sh / 2, sw, sh)
    }
-    ctx.setTransform(1, 0, 0, 1, 0, 0);
-    ctx.globalAlpha = 1;
-    ctx.drawImage(vignette, 0, 0, cw, ch);
+    ctx.setTransform(1, 0, 0, 1, 0, 0)
+    ctx.globalAlpha = 1
+    ctx.drawImage(vignette, 0, 0, cw, ch)
  }

-  let fps = 0, fpsFrames = 0, fpsLast = 0;
+  let fps = 0, fpsFrames = 0, fpsLast = 0
  function tickFps(now: number) {
-    fpsFrames++;
+    fpsFrames++
    if (now - fpsLast >= 500) {
-      fps       = Math.round(fpsFrames / ((now - fpsLast) / 1000));
-      fpsFrames = 0;
-      fpsLast   = now;
-      if (fpsEl) fpsEl.textContent = `${fps} fps`;
+      fps       = Math.round(fpsFrames / ((now - fpsLast) / 1000))
+      fpsFrames = 0
+      fpsLast   = now
+      if (fpsEl) fpsEl.textContent = `${fps} fps`
    }
  }

+  interface DevMetrics {
+    totalMounts:  number
+    resizeCount:  number
+    stampCount:   number
+    mountedAt:    number
+    lastResizeAt: number | null
+  }
+
+  let devMetrics   = $state<DevMetrics | null>(null)
+  let uptimeSecs   = $state(0)
+  let devLiveCount = $state(0)
+
+  $effect(() => {
+    if (!isDev || mode !== 'idle' || !devMetrics) return
+    const start = Date.now()
+    const iv = setInterval(() => { uptimeSecs = Math.floor((Date.now() - start) / 1000) }, 1000)
+    return () => clearInterval(iv)
+  })
+
+  function fmtUptime(s: number): string {
+    if (s < 60) return `${s}s`
+    return `${Math.floor(s / 60)}m ${s % 60}s`
+  }
+
+  function fmtAgo(ts: number | null): string {
+    if (ts === null) return '—'
+    const s = Math.floor((Date.now() - ts) / 1000)
+    if (s < 60) return `${s}s ago`
+    return `${Math.floor(s / 60)}m ago`
+  }
+
  function mountCanvas(el: HTMLCanvasElement) {
-    const ctx = el.getContext("2d")!;
-    let live: RenderState | null = null;
-    let lastLogW = 0, lastLogH = 0, lastScale = 0, buildGen = 0;
+    const ctx = el.getContext('2d')!
+    let live: RenderState | null = null
+    let lastLogW = 0, lastLogH = 0, lastScale = 0, buildGen = 0

-    async function syncSize() {
-      const gen   = ++buildGen;
-      const scale = window.devicePixelRatio || 1;
-      const logW  = el.offsetWidth  || el.parentElement?.offsetWidth  || 800;
-      const logH  = el.offsetHeight || el.parentElement?.offsetHeight || 600;
-      const phys  = { width: Math.round(logW * scale), height: Math.round(logH * scale) };
-      if (gen !== buildGen) return;
-      if (logW === lastLogW && logH === lastLogH && scale === lastScale) return;
-      lastLogW = logW; lastLogH = logH; lastScale = scale;
-      const built  = buildCards(logW, logH);
-      const stamps = built.cards.map(c => buildStamp(c, scale));
-      const vig    = buildVignette(logW, logH, scale);
-      el.width = phys.width; el.height = phys.height;
-      live = { cards: built.cards, trigs: built.trigs, stamps, vignette: vig, CW: phys.width, CH: phys.height, scale };
+    if (isDev && mode === 'idle') {
+      splashDevRegister(el)
+      devLiveCount = splashDevLiveCount()
+      uptimeSecs   = 0
+      devMetrics   = {
+        totalMounts:  splashDevNextMount(),
+        resizeCount:  0,
+        stampCount:   0,
+        mountedAt:    Date.now(),
+        lastResizeAt: null,
+      }
    }

-    const ro = new ResizeObserver(() => syncSize());
-    ro.observe(el);
-    syncSize();
+    function cleanup() {
+      if (live) {
+        live.stamps.forEach(c => { c.width = 0; c.height = 0 })
+        live.vignette.width = 0
+        live.vignette.height = 0
+        live = null
+      }
+      ctx.clearRect(0, 0, el.width, el.height)
+    }

-    let raf = 0, t0 = -1, paused = false;
+    function applySize(logW: number, logH: number, scale: number) {
+      const gen = ++buildGen
+      if (logW <= 0 || logH <= 0) return
+      if (logW === lastLogW && logH === lastLogH && scale === lastScale) return
+      lastLogW = logW; lastLogH = logH; lastScale = scale
+      if (live) cleanup()
+      const built  = buildCards(logW, logH)
+      const stamps = built.cards.map(c => buildStamp(c, scale))
+      const vig    = buildVignette(logW, logH, scale)
+      el.width  = Math.round(logW * scale)
+      el.height = Math.round(logH * scale)
+      if (gen === buildGen) {
+        live = { cards: built.cards, trigs: built.trigs, stamps, vignette: vig, CW: el.width, CH: el.height, scale }
+        if (isDev && mode === 'idle' && devMetrics) {
+          devMetrics = {
+            ...devMetrics,
+            resizeCount:  devMetrics.resizeCount + 1,
+            stampCount:   stamps.length,
+            lastResizeAt: Date.now(),
+          }
+        }
+      }
+    }
+
+    let extraCleanup: (() => void) | undefined
+
+    if (isTauri) {
+      let tauriRo: ResizeObserver | undefined
+      let tauriUnlisten: (() => void) | undefined
+      import('@tauri-apps/api/window').then(({ getCurrentWindow }) => {
+        const win = getCurrentWindow()
+        const doSync = () => Promise.all([win.innerSize(), win.scaleFactor()])
+          .then(([phys, scale]) => applySize(phys.width / scale, phys.height / scale, scale))
+        doSync()
+        tauriRo = new ResizeObserver(() => doSync())
+        tauriRo.observe(el)
+        win.onFocusChanged(() => doSync()).then(u => { tauriUnlisten = u })
+      })
+      extraCleanup = () => { tauriRo?.disconnect(); tauriUnlisten?.() }
+    } else {
+      const syncWeb = () => applySize(el.clientWidth, el.clientHeight, window.devicePixelRatio || 1)
+      const ro = new ResizeObserver(() => syncWeb())
+      ro.observe(el)
+      requestAnimationFrame(() => syncWeb())
+      extraCleanup = () => ro.disconnect()
+    }
+
+    let raf = 0, t0 = -1, paused = false

    function frame(now: number) {
-      if (paused) { raf = 0; return; }
-      raf = requestAnimationFrame(frame);
-      if (!live) return;
-      if (t0 < 0) t0 = now;
-      if (showFps) tickFps(now);
-      const { cards, trigs, stamps, vignette, CW, CH, scale } = live;
-      drawFrame(ctx, (now - t0) / 1000, CW, CH, scale, cards, trigs, stamps, vignette);
+      if (paused) { raf = 0; return }
+      raf = requestAnimationFrame(frame)
+      if (!live) return
+      const { cards, trigs, stamps, vignette, CW, CH, scale } = live
+      if (CW <= 0 || CH <= 0 || vignette.width <= 0 || vignette.height <= 0) return
+      if (stamps.some(s => s.width <= 0 || s.height <= 0)) return
+      if (t0 < 0) t0 = now
+      if (showFps) tickFps(now)
+      drawFrame(ctx, (now - t0) / 1000, CW, CH, scale, cards, trigs, stamps, vignette)
    }

-    function pause()  { paused = true; t0 = -1; }
-    function resume() { if (!paused) return; paused = false; raf = requestAnimationFrame(frame); }
+    function pause()  { paused = true; t0 = -1 }
+    function resume() { if (!paused) return; paused = false; raf = requestAnimationFrame(frame) }
+    function onVis()  { document.hidden ? pause() : resume() }

-    function onVisibility() { document.hidden ? pause() : resume(); }
-
-    document.addEventListener("visibilitychange", onVisibility);
-
-    let unlistenFocus: Promise<() => void> | null = null;
-    try {
-      const win = getCurrentWindow();
-      unlistenFocus = win.onFocusChanged(({ payload: focused }) => {
-        focused ? resume() : pause();
-      });
-    } catch {  }
-
-    raf = requestAnimationFrame(frame);
+    document.addEventListener('visibilitychange', onVis)
+    raf = requestAnimationFrame(frame)
    return () => {
-      cancelAnimationFrame(raf);
-      ro.disconnect();
-      document.removeEventListener("visibilitychange", onVisibility);
-      unlistenFocus?.then(f => f());
-    };
+      cancelAnimationFrame(raf)
+      cleanup()
+      extraCleanup?.()
+      document.removeEventListener('visibilitychange', onVis)
+      if (isDev && mode === 'idle') {
+        splashDevUnregister(el)
+        devLiveCount = splashDevLiveCount()
+      }
+    }
  }
 </script>

-<div class="splash" class:exiting style="cursor: {mode === 'idle' && !lockEnabled ? 'pointer' : 'default'}">
+<div class="splash" class:exiting style="cursor:{mode === 'idle' ? 'pointer' : 'default'}">
  {#if showCards}
    <canvas style="position:absolute;inset:0;pointer-events:none;width:100%;height:100%" use:mountCanvas></canvas>
    {#if showFps}
@@ -386,26 +465,21 @@
    {/if}
  {/if}

-  {#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:{logoLockSize}px;height:{logoLockSize}px">
-        <div class="logo-glow"></div>
-        <img src={logoUrl} alt="Moku" class="logo-breathe" style="width:{logoLockSize}px;height:{logoLockSize}px;border-radius:22px;display:block;position:relative" />
-      </div>
-      <div class="pin-card">
-        <p class="pin-label">Enter PIN</p>
-        <div class="pin-block">
-          <div class="pin-dots" class:pin-shake={pinShake}>
-            {#each Array(settingsState.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 isDev && mode === 'idle' && devMetrics && showDevOverlay}
+    <div class="dev-overlay">
+      <span class="dev-title">canvas · idle splash</span>
+      <div class="dev-grid">
+        <span class="dev-k">live</span>          <span class="dev-v" class:dev-warn={devLiveCount > 1}>{devLiveCount}</span>
+        <span class="dev-k">total mounts</span>  <span class="dev-v">{devMetrics.totalMounts}</span>
+        <span class="dev-k">stamps</span>        <span class="dev-v">{devMetrics.stampCount}</span>
+        <span class="dev-k">resizes</span>       <span class="dev-v">{devMetrics.resizeCount}</span>
+        <span class="dev-k">uptime</span>        <span class="dev-v">{fmtUptime(uptimeSecs)}</span>
+        <span class="dev-k">last resize</span>   <span class="dev-v">{fmtAgo(devMetrics.lastResizeAt)}</span>
      </div>
    </div>
+  {/if}

-  {:else if mode === "idle"}
+  {#if mode === 'idle'}
    <div style="z-index:1;display:flex;flex-direction:column;align-items:center">
      <div style="position:relative;width:{logoIdleSize}px;height:{logoIdleSize}px;margin-bottom:32px">
        <div class="logo-glow"></div>
@@ -414,60 +488,53 @@
      <p class="hint">press any key to continue</p>
    </div>

+  {:else if mode === 'locked'}
+    <div class="pin-card" class:pin-card--leaving={exiting}>
+      <div class="logo-wrap">
+        <div class="logo-glow"></div>
+        <img src={logoUrl} alt="Moku" class="logo-breathe" style="width:56px;height:56px;border-radius:14px;display:block;position:relative" />
+      </div>
+      <p class="pin-label">Enter PIN</p>
+      <div class="pin-dots" class:pin-shake={pinShake}>
+        {#each Array(pinLen) as _, i}
+          <div class="pin-dot" class:filled={i < pinEntry.length}></div>
+        {/each}
+      </div>
+    </div>
+
  {:else}
    <div style="position:relative;width:{ringSize}px;height:{ringSize}px;margin-bottom:20px;display:flex;align-items:center;justify-content:center">
      {#if !failed && !notConfigured}
-        <svg width={ringSize} height={ringSize}
-          class="loading-ring"
-          class:ring-hide={lockEnabled && pinVisible}
-          style="position:absolute;top:0;left:0;pointer-events:none">
+        <svg width={ringSize} height={ringSize} class="loading-ring" style="position:absolute;top:0;left:0;pointer-events:none">
          <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)" />
+            style="transition:stroke-dasharray 0.4s cubic-bezier(0.4,0,0.2,1)" />
        </svg>
      {/if}
      <img src={logoUrl} alt="Moku" style="width:{logoLoadingSize}px;height:{logoLoadingSize}px;border-radius:32px;display:block;position:relative" />
    </div>
    <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 anim-fade-up">
-            <p class="error-label">{failed ? "Could not reach server" : "Server not configured"}</p>
-            <div class="error-actions">
-              <button class="err-btn" onclick={() => onRetry?.()}>Retry</button>
-              <button class="err-btn err-btn--primary" onclick={() => onBypass?.()}>Enter app</button>
-            </div>
-          </div>
-        {:else}
-          <p class="status-text">{ringFull ? "" : `Initializing server${dots}`}</p>
-        {/if}
-      </div>
-
-      {#if lockEnabled}
-        <div class="pin-slot" class:pin-slot-visible={pinVisible}>
-          <div class="pin-card">
-            <p class="pin-label">Enter PIN</p>
-            <div class="pin-block">
-              <div class="pin-dots" class:pin-shake={pinShake}>
-                {#each Array(settingsState.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 failed || notConfigured}
+        <div class="error-box anim-fade-up">
+          <p class="error-label">{failed ? 'Could not reach server' : 'Server not configured'}</p>
+          <div class="error-actions">
+            <button class="err-btn" onclick={() => onRetry?.()}>Retry</button>
+            <button class="err-btn err-btn--primary" onclick={() => onBypass?.()}>Enter app</button>
          </div>
        </div>
+      {:else}
+        <p class="status-text">{ringFull ? '' : `Initializing server${dots}`}</p>
      {/if}
    </div>
  {/if}
 </div>

 <style>
-  .splash { position: fixed; inset: 0; z-index: 9999; background: var(--bg-base); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: spIn 0.35s cubic-bezier(0,0,0.2,1) both; }
-  .splash.exiting { animation: spOut 320ms cubic-bezier(0.4,0,1,1) both; }
+  .splash  { position:fixed; inset:0; z-index:9999; background:var(--bg-base); overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; animation:spIn 0.35s cubic-bezier(0,0,0.2,1) both; }
+  .exiting { animation:spOut 320ms cubic-bezier(0.4,0,1,1) both; }

  @keyframes spIn        { from { opacity:0; transform:scale(1.015) } to { opacity:1; transform:scale(1) } }
  @keyframes spOut       { from { opacity:1; transform:scale(1) }     to { opacity:0; transform:scale(0.96) } }
@@ -475,33 +542,40 @@
  @keyframes hintFade    { 0%,100% { opacity:0.35 } 50% { opacity:0.7 } }
  @keyframes pinShake    { 0%,100% { transform:translateX(0) } 20%,60% { transform:translateX(-6px) } 40%,80% { transform:translateX(6px) } }

-  .logo-glow    { position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%); animation: logoBreathe 4s ease-in-out infinite; }
-  .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; }
+  .logo-glow    { position:absolute; inset:-20px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%); animation:logoBreathe 4s ease-in-out infinite; }
+  .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; }

-  .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; }
-  .error-label   { font-family: var(--font-ui); font-size: 11px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.06em; margin: 0; }
-  .error-actions { display: flex; gap: 6px; }
-  .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; }
-  .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); }
+  .logo-wrap { position:relative; width:72px; height:72px; display:flex; align-items:center; justify-content:center; }

-  .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-card         { z-index:1; width:min(280px,calc(100vw - 48px)); background:var(--bg-surface); border:1px solid var(--border-base); border-radius:var(--radius-xl); padding:var(--sp-6) var(--sp-5); display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); box-shadow:0 32px 80px rgba(0,0,0,0.75); animation:cardIn 0.38s cubic-bezier(0.22,1,0.36,1) 0.06s both; }
+  .pin-card--leaving { animation:cardOut 0.28s cubic-bezier(0.4,0,1,1) both; }

-  .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-card         { background: var(--bg-surface); border: 1px solid var(--border-base); border-radius: var(--radius-xl); padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); box-shadow: 0 24px 60px rgba(0,0,0,0.6); }
-  .pin-label        { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; margin: 0; }
-  .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); }
-  .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; }
+  .pin-label { font-family:var(--font-ui); font-size:var(--text-xs); color:var(--text-faint); letter-spacing:var(--tracking-wider); text-transform:uppercase; margin:0; }
+  .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); }
+  .pin-shake { animation:pinShake 0.42s ease; }
+
+  @keyframes cardIn  { from { opacity:0; transform:translateY(28px) scale(0.97) } to { opacity:1; transform:translateY(0) scale(1) } }
+  @keyframes cardOut { from { opacity:1; transform:translateY(0) scale(1) } to { opacity:0; transform:translateY(18px) scale(0.97) } }
+
+  .bottom-area { display:flex; align-items:center; justify-content:center; min-height:48px; }
+  .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; }
+
+  .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; }
+  .error-label   { font-family:var(--font-ui); font-size:11px; font-weight:500; color:var(--text-muted); letter-spacing:0.06em; margin:0; }
+  .error-actions { display:flex; gap:6px; }
+  .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; }
+  .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); }
+
+  .dev-overlay { position:absolute; top:12px; left:12px; z-index:10; background:rgba(0,0,0,0.72); border:1px solid rgba(255,255,255,0.10); border-radius:6px; padding:8px 10px; pointer-events:none; backdrop-filter:blur(6px); }
+  .dev-title   { display:block; font-family:var(--font-ui); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }
+  .dev-grid    { display:grid; grid-template-columns:auto auto; column-gap:12px; row-gap:2px; }
+  .dev-k       { font-family:var(--font-ui); font-size:10px; color:var(--text-faint); white-space:nowrap; }
+  .dev-v       { font-family:var(--font-ui); font-size:10px; color:var(--text-secondary); text-align:right; white-space:nowrap; }
+  .dev-warn    { color:#f87171; }
 </style>
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { ArrowLeft, MagnifyingGlass, GearSix, Swap, Funnel, Check } from "phosphor-svelte";
+  import { ArrowLeft, MagnifyingGlass, GearSix, Swap, Funnel, Check, CircleNotch } from "phosphor-svelte";
  import Thumbnail           from "$lib/components/shared/manga/Thumbnail.svelte";
  import { resolvedCover }   from "$lib/core/cover/coverResolver";
  import { getAdapter }      from "$lib/request-manager";
@@ -25,9 +25,19 @@

  let { pkgName, extensionName, iconUrl, cols, cropCovers, statsAlways, anims, sources, onBack, onSettings }: Props = $props();

+  const isLocal = pkgName === '__local__';
+
  let groups:  SourceLibrary[] = $state([]);
+  let sourceNodes: SourceNode[] = $state([]);
+
+  let localItems:       any[]    = $state([]);
+  let localPage:        number   = $state(1);
+  let localHasNext:     boolean  = $state(false);
+  let localLoadingMore: boolean  = $state(false);
+
  let loading  = $state(true);
  let search   = $state("");
+  let searchInput = $state("");

  type ContentFilter = "unread" | "downloaded";
  let activeFilters = $state<Partial<Record<ContentFilter, boolean>>>({});
@@ -36,36 +46,79 @@
  const hasActiveFilters = $derived(Object.values(activeFilters).some(Boolean));

  let migrateTarget: { sourceId: string; sourceName: string; iconUrl: string; manga: LibraryManga[] } | null = $state(null);
-
-  const allManga = $derived(groups.flatMap(g => g.manga));
+  const allManga = $derived(isLocal ? localItems : groups.flatMap(g => g.manga));

  const filtered = $derived((() => {
    let items = allManga;
    const q = search.trim().toLowerCase();
-    if (q) items = items.filter(m => m.title.toLowerCase().includes(q));
-    if (activeFilters.unread)     items = items.filter(m => m.unreadCount > 0);
-    if (activeFilters.downloaded) items = items.filter(m => m.downloadCount > 0);
+    if (q && !isLocal) items = items.filter((m: any) => m.title.toLowerCase().includes(q));
+    if (!isLocal) {
+      if (activeFilters.unread)     items = items.filter((m: any) => m.unreadCount > 0);
+      if (activeFilters.downloaded) items = items.filter((m: any) => m.downloadCount > 0);
+    }
    return items;
  })());

-  let sourceNodes: SourceNode[] = $state([]);
-
  $effect(() => { load(); });

  async function load() {
    loading = true;
    try {
-      const [libData, srcData] = await Promise.all([
-        getAdapter().getMangaList({}).then(r => ({ mangas: { nodes: r.items as any } })),
-        getAdapter().getSources().then(nodes => ({ sources: { nodes } })),
-      ]);
-      sourceNodes = srcData.sources.nodes;
-      groups = libraryByExtension(libData.mangas.nodes, srcData.sources.nodes, pkgName);
+      if (isLocal) {
+        localPage    = 1;
+        localItems   = [];
+        const result = await getAdapter().browseSource('0', 1);
+        localItems   = result.items;
+        localHasNext = result.hasNextPage;
+        localPage    = 1;
+      } else {
+        const [libData, srcData] = await Promise.all([
+          getAdapter().getMangaList({}).then(r => ({ mangas: { nodes: r.items as any } })),
+          getAdapter().getSources().then(nodes => ({ sources: { nodes } })),
+        ]);
+        sourceNodes = srcData.sources.nodes;
+        groups = libraryByExtension(libData.mangas.nodes, srcData.sources.nodes, pkgName);
+      }
    } finally {
      loading = false;
    }
  }

+  async function loadMoreLocal() {
+    if (localLoadingMore || !localHasNext) return;
+    localLoadingMore = true;
+    try {
+      const next   = localPage + 1;
+      const result = await getAdapter().browseSource('0', next);
+      localItems   = [...localItems, ...result.items];
+      localHasNext = result.hasNextPage;
+      localPage    = next;
+    } finally {
+      localLoadingMore = false;
+    }
+  }
+
+  async function searchLocal() {
+    const q = searchInput.trim();
+    if (!q) { load(); return; }
+    loading = true;
+    try {
+      const result = await getAdapter().searchSource('0', q, 1);
+      localItems   = result.items;
+      localHasNext = result.hasNextPage;
+      localPage    = 1;
+    } finally {
+      loading = false;
+    }
+    search = q;
+  }
+
+  function onSearchKeydown(e: KeyboardEvent) {
+    if (!isLocal) return;
+    if (e.key === 'Enter') searchLocal();
+    if (e.key === 'Escape') { searchInput = ''; search = ''; load(); }
+  }
+
  function toggleFilter(f: ContentFilter) {
    activeFilters = { ...activeFilters, [f]: !activeFilters[f] };
  }
@@ -108,58 +161,72 @@
      <Thumbnail src={iconUrl} alt={extensionName} class="header-icon" onerror={(e) => ((e.target as HTMLImageElement).style.display = "none")} />
    {/if}
    <div class="title-block">
-      <span class="eyebrow">In Library</span>
+      <span class="eyebrow">{isLocal ? 'Local Source' : 'In Library'}</span>
      <span class="title">{extensionName}</span>
    </div>
    {#if !loading}
-      <span class="count-badge">{filtered.length}{filtered.length !== allManga.length ? ` / ${allManga.length}` : ""}</span>
+      <span class="count-badge">
+        {isLocal ? allManga.length + (localHasNext ? '+' : '') : `${filtered.length}${filtered.length !== allManga.length ? ` / ${allManga.length}` : ''}`}
+      </span>
    {/if}
    <div class="header-right">
      <div class="search-wrap">
        <MagnifyingGlass size={12} class="search-icon" weight="light" />
-        <input class="search" placeholder="Search" bind:value={search} autocomplete="off" />
-      </div>
-
-      <div class="filter-wrap">
-        <button
-          class="filter-btn"
-          class:filter-btn-active={hasActiveFilters}
-          title="Filter"
-          onclick={() => filterOpen = !filterOpen}
-        >
-          <Funnel size={13} weight={hasActiveFilters ? "fill" : "bold"} />
-        </button>
-        {#if filterOpen}
-          <div class="filter-panel" role="menu">
-            <div class="filter-panel-header">
-              <span class="panel-heading">Filter</span>
-              {#if hasActiveFilters}
-                <button class="panel-clear-btn" onclick={clearFilters}>Clear all</button>
-              {/if}
-            </div>
-            <div class="panel-divider"></div>
-            <p class="panel-label">Content</p>
-            {#each CONTENT_FILTERS as [f, label]}
-              <button
-                class="panel-item"
-                class:panel-item-active={activeFilters[f]}
-                role="menuitem"
-                onclick={() => toggleFilter(f)}
-              >
-                <span class="panel-check" class:panel-check-on={activeFilters[f]}>
-                  {#if activeFilters[f]}<Check size={9} weight="bold" />{/if}
-                </span>
-                {label}
-              </button>
-            {/each}
-          </div>
+        {#if isLocal}
+          <input
+            class="search"
+            placeholder="Search…"
+            bind:value={searchInput}
+            autocomplete="off"
+            onkeydown={onSearchKeydown}
+          />
+        {:else}
+          <input class="search" placeholder="Search" bind:value={search} autocomplete="off" />
        {/if}
      </div>

-      {#if sources.length > 0}
-        <button class="settings-btn" onclick={onSettings} title="Extension settings">
-          <GearSix size={14} weight="bold" />
-        </button>
+      {#if !isLocal}
+        <div class="filter-wrap">
+          <button
+            class="filter-btn"
+            class:filter-btn-active={hasActiveFilters}
+            title="Filter"
+            onclick={() => filterOpen = !filterOpen}
+          >
+            <Funnel size={13} weight={hasActiveFilters ? "fill" : "bold"} />
+          </button>
+          {#if filterOpen}
+            <div class="filter-panel" role="menu">
+              <div class="filter-panel-header">
+                <span class="panel-heading">Filter</span>
+                {#if hasActiveFilters}
+                  <button class="panel-clear-btn" onclick={clearFilters}>Clear all</button>
+                {/if}
+              </div>
+              <div class="panel-divider"></div>
+              <p class="panel-label">Content</p>
+              {#each CONTENT_FILTERS as [f, label]}
+                <button
+                  class="panel-item"
+                  class:panel-item-active={activeFilters[f]}
+                  role="menuitem"
+                  onclick={() => toggleFilter(f)}
+                >
+                  <span class="panel-check" class:panel-check-on={activeFilters[f]}>
+                    {#if activeFilters[f]}<Check size={9} weight="bold" />{/if}
+                  </span>
+                  {label}
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
+
+        {#if sources.length > 0}
+          <button class="settings-btn" onclick={onSettings} title="Extension settings">
+            <GearSix size={14} weight="bold" />
+          </button>
+        {/if}
      {/if}
    </div>
  </div>
@@ -176,10 +243,14 @@
      </div>
    {:else if filtered.length === 0}
      <div class="empty">
-        {allManga.length === 0 ? "Nothing from this extension is in your library." : "No matches."}
+        {isLocal
+          ? 'No manga found in local source. Add manga folders to your local source directory.'
+          : allManga.length === 0
+            ? 'Nothing from this extension is in your library.'
+            : 'No matches.'}
      </div>
    {:else}
-      {#if groups.length > 1}
+      {#if !isLocal && groups.length > 1}
        <div class="source-groups">
          {#each groups as group}
            <div class="source-group-header">
@@ -192,7 +263,7 @@
            </div>
          {/each}
        </div>
-      {:else if groups.length === 1}
+      {:else if !isLocal && groups.length === 1}
        <div class="single-source-bar">
          <span class="source-group-name">{groups[0].displayName}</span>
          <button class="migrate-btn" onclick={() => openMigrate(groups[0])} title="Migrate this source">
@@ -214,23 +285,38 @@
                style="object-fit:{cropCovers ? 'cover' : 'contain'}"
                draggable="false"
              />
-              <div class="card-info-overlay" class:anim={anims} class:instant={!anims} class:always={statsAlways}>
-                <div class="overlay-badges">
-                  {#if isCompleted}
-                    <span class="badge badge-done">✓ Done</span>
-                  {:else if m.unreadCount}
-                    <span class="badge badge-unread">{m.unreadCount} new</span>
-                  {/if}
-                  {#if m.downloadCount}
-                    <span class="badge badge-dl">↓ {m.downloadCount}</span>
-                  {/if}
+              {#if !isLocal}
+                <div class="card-info-overlay" class:anim={anims} class:instant={!anims} class:always={statsAlways}>
+                  <div class="overlay-badges">
+                    {#if isCompleted}
+                      <span class="badge badge-done">✓ Done</span>
+                    {:else if m.unreadCount}
+                      <span class="badge badge-unread">{m.unreadCount} new</span>
+                    {/if}
+                    {#if m.downloadCount}
+                      <span class="badge badge-dl">↓ {m.downloadCount}</span>
+                    {/if}
+                  </div>
                </div>
-              </div>
+              {/if}
            </div>
            <p class="card-title">{m.title}</p>
          </button>
        {/each}
      </div>
+
+      {#if isLocal && localHasNext}
+        <div class="load-more">
+          <button class="load-more-btn" onclick={loadMoreLocal} disabled={localLoadingMore}>
+            {#if localLoadingMore}
+              <CircleNotch size={13} weight="light" class="anim-spin" />
+              Loading…
+            {:else}
+              Load more
+            {/if}
+          </button>
+        </div>
+      {/if}
    {/if}
  </div>
 </div>
@@ -330,7 +416,12 @@
  .cover-skeleton { aspect-ratio: 2/3; border-radius: var(--radius-md); }
  .title-skeleton { height: 12px; margin-top: var(--sp-2); width: 80%; border-radius: var(--radius-sm); }

-  .empty { display: flex; align-items: center; justify-content: center; height: 60%; color: var(--text-muted); font-size: var(--text-sm); }
+  .empty { display: flex; align-items: center; justify-content: center; height: 60%; color: var(--text-muted); font-size: var(--text-sm); text-align: center; padding: 0 var(--sp-6); }
+
+  .load-more { display: flex; justify-content: center; padding: var(--sp-4) 0; }
+  .load-more-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: 7px 20px; border-radius: var(--radius-md); background: var(--bg-raised); color: var(--text-muted); border: 1px solid var(--border-dim); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
+  .load-more-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
+  .load-more-btn:disabled { opacity: 0.5; cursor: default; }

  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
 </style>
@@ -28,7 +28,7 @@
  }

  let extensions: Extension[] = $state([]);
-  let localMangaCount = $state(0);
+  let localMangaCount = $state<string>("0");
  let loading      = $state(true);
  let refreshing   = $state(false);
  let filter       = $state<Filter>("installed");
@@ -84,8 +84,10 @@
  }

  async function loadLocalManga() {
-    const d = await Promise.resolve(null);
-
+    try {
+      const r = await getAdapter().browseSource('0', 1)
+      localMangaCount = r.hasNextPage ? r.items.length + '+' : String(r.items.length)
+    } catch {}
  }

  async function fetchFromRepo() {
@@ -102,8 +104,7 @@
  async function loadRepos() {
    reposLoading = true;
    try {
-      const d = await (getAdapter() as any).gql<{ settings: { extensionRepos: string[] } }>(`query GetSettings { settings { extensionRepos } }`);
-      repos = d.settings.extensionRepos ?? [];
+      repos = await getAdapter().getExtensionRepos();
    } catch (e) { console.error(e); }
    finally { reposLoading = false; }
  }
@@ -111,11 +112,11 @@
  async function saveRepos(updated: string[], intent: "add" | "remove") {
    savingRepos = true;
    try {
-      const d = await (getAdapter() as any).gql<{ setSettings: { settings: { extensionRepos: string[] } } }>(`mutation SetExtensionRepos($repos: [String!]!) { setSettings(input: { settings: { extensionRepos: $repos } }) { settings { extensionRepos } } }`, { repos: updated });
-      repos = d.setSettings.settings.extensionRepos;
+      const removed = repos.find(r => !updated.includes(r)) ?? "";
+      repos = await getAdapter().setExtensionRepos(updated);
      addToast(intent === "add"
        ? { kind: "success", title: "Repo added",   body: updated[updated.length - 1] }
-        : { kind: "info",    title: "Repo removed", body: repos.find(r => !updated.includes(r)) ?? "" }
+        : { kind: "info",    title: "Repo removed", body: removed }
      );
    } catch (e: any) {
      repoError = e instanceof Error ? e.message : "Failed to save";
@@ -136,13 +137,11 @@
  async function mutate(pkgName: string, op: "install" | "update" | "uninstall") {
    working = new Set(working).add(pkgName);
    const label = extensions.find((e) => e.pkgName === pkgName)?.name ?? pkgName;
-    const gqlArgs = {
-      install:   { id: pkgName, install:   true },
-      update:    { id: pkgName, update:    true },
-      uninstall: { id: pkgName, uninstall: true },
-    }[op];
    try {
-      await getAdapter()[{ install: 'installExtension', update: 'updateExtension', uninstall: 'uninstallExtension' }[op] as 'installExtension'](pkgName);
+      const adapter = getAdapter();
+      if      (op === "install")   await adapter.installExtension(pkgName);
+      else if (op === "update")    await adapter.updateExtension(pkgName);
+      else                         await adapter.uninstallExtension(pkgName);
      await load();
      addToast({
        install:   { kind: "download" as const, title: "Extension installed", body: label },
@@ -338,7 +337,7 @@
    {:else}
      <div class="list">
        {#if showLocal}
-          <div class="local-row">
+          <div class="local-row" style="cursor:pointer" onclick={() => libraryTarget = { pkgName: '__local__', extensionName: 'Local Source', iconUrl: '' }}>
            <div class="local-icon"><HardDrives size={18} weight="bold" /></div>
            <div class="info">
              <span class="name">Local Source</span>
@@ -66,17 +66,7 @@
    editKey  = null;
    listOpen = null;
    try {
-      const d = await (getAdapter() as any).gql<{ source: { preferences: Preference[] } }>(
-        `query GetSourceSettings($id: LongString!) { source(id: $id) { preferences {
-          ... on CheckBoxPreference        { type: __typename CheckBoxTitle: title CheckBoxSummary: summary CheckBoxDefault: default CheckBoxCurrentValue: currentValue key }
-          ... on SwitchPreference          { type: __typename SwitchPreferenceTitle: title SwitchPreferenceSummary: summary SwitchPreferenceDefault: default SwitchPreferenceCurrentValue: currentValue key }
-          ... on ListPreference            { type: __typename ListPreferenceTitle: title ListPreferenceSummary: summary ListPreferenceDefault: default ListPreferenceCurrentValue: currentValue entries entryValues key }
-          ... on EditTextPreference        { type: __typename EditTextPreferenceTitle: title EditTextPreferenceSummary: summary EditTextPreferenceDefault: default EditTextPreferenceCurrentValue: currentValue dialogTitle dialogMessage key }
-          ... on MultiSelectListPreference { type: __typename MultiSelectListPreferenceTitle: title MultiSelectListPreferenceSummary: summary MultiSelectListPreferenceDefault: default MultiSelectListPreferenceCurrentValue: currentValue entries entryValues key }
-        } } }`,
-        { id: String(src.id) },
-      );
-      prefs = d.source.preferences ?? [];
+      prefs = (await getAdapter().getSourceSettings(src.id)) as Preference[];
    } catch (e: any) {
      addToast({ kind: "error", title: "Failed to load settings", body: e?.message ?? "" });
    } finally {
@@ -86,24 +76,9 @@

  async function save(position: number, changeType: string, value: unknown) {
    if (!activeSource) return;
-    const pref = prefs[position];
-    saving = pref.key;
+    saving = prefs[position].key;
    try {
-      await (getAdapter() as any).gql(
-        `mutation UpdateSourcePreference($source: LongString!, $change: SourcePreferenceChangeInput!) { updateSourcePreference(input: { source: $source, change: $change }) { source { id } } }`,
-        { source: String(activeSource.id), change: { position, [changeType]: value } },
-      );
-      const d = await (getAdapter() as any).gql<{ source: { preferences: Preference[] } }>(
-        `query GetSourceSettings($id: LongString!) { source(id: $id) { preferences {
-          ... on CheckBoxPreference        { type: __typename CheckBoxTitle: title CheckBoxCurrentValue: currentValue key }
-          ... on SwitchPreference          { type: __typename SwitchPreferenceTitle: title SwitchPreferenceCurrentValue: currentValue key }
-          ... on ListPreference            { type: __typename ListPreferenceTitle: title ListPreferenceCurrentValue: currentValue entries entryValues key }
-          ... on EditTextPreference        { type: __typename EditTextPreferenceTitle: title EditTextPreferenceCurrentValue: currentValue key }
-          ... on MultiSelectListPreference { type: __typename MultiSelectListPreferenceTitle: title MultiSelectListPreferenceCurrentValue: currentValue entries entryValues key }
-        } } }`,
-        { id: String(activeSource.id) },
-      );
-      prefs = d.source.preferences ?? [];
+      prefs = (await getAdapter().updateSourcePreference(activeSource.id, position, changeType, value)) as Preference[];
    } catch (e: any) {
      addToast({ kind: "error", title: "Failed to save", body: e?.message ?? "" });
    } finally {
@@ -9,6 +9,7 @@ export interface RecommendedManga {

 const TOP_GENRES       = 6
 const TARGET_PER_GENRE = 20
+const FALLBACK_GENRES  = ['Action', 'Adventure', 'Fantasy', 'Romance', 'Comedy', 'Drama']

 export function topGenres(history: ReadSession[], libraryManga: Manga[]): string[] {
  const byId  = new Map(libraryManga.map(m => [m.id, m]))
@@ -16,8 +17,8 @@ export function topGenres(history: ReadSession[], libraryManga: Manga[]): string

  for (const session of history) {
    const manga = byId.get(session.mangaId)
-    if (!manga?.genre?.length) continue
-    for (const g of manga.genre) {
+    if (!manga?.tags?.length) continue
+    for (const g of manga.tags) {
      const key      = g.toLowerCase()
      const existing = tally.get(key)
      if (existing) existing.count++
@@ -25,10 +26,12 @@ export function topGenres(history: ReadSession[], libraryManga: Manga[]): string
    }
  }

-  return [...tally.values()]
+  const derived = [...tally.values()]
    .sort((a, b) => b.count - a.count)
    .slice(0, TOP_GENRES)
    .map(e => e.original)
+
+  return derived.length > 0 ? derived : FALLBACK_GENRES
 }

 export async function fetchRecommendations(
@@ -36,20 +39,22 @@ export async function fetchRecommendations(
  libraryManga: Manga[],
  signal?:      AbortSignal,
 ): Promise<RecommendedManga[]> {
-  if (!history.length || !libraryManga.length) return []
-
  const genres = topGenres(history, libraryManga)
-  if (!genres.length) return []

-  const adapter    = getAdapter()
+  const adapter    = getAdapter() as any
  const globalSeen = new Set<number>(libraryManga.map(m => m.id))

  const perGenre = await Promise.all(
    genres.map(async genre => {
      if (signal?.aborted) return []
      try {
-        const { items } = await adapter.getMangaList({ tags: [genre], inLibrary: false })
-        return items
+        const { items } = await adapter.getMangasByGenre(
+          { genre: { like: `%${genre}%` } },
+          TARGET_PER_GENRE,
+          0,
+          signal,
+        )
+        return items as Manga[]
      } catch {
        return []
      }
@@ -57,19 +62,21 @@ export async function fetchRecommendations(
  )

  const merged: Manga[] = []
-  for (const items of perGenre) {
+  outer: for (const items of perGenre) {
    for (const m of items) {
+      if (signal?.aborted) break outer
      if (globalSeen.has(m.id)) continue
      globalSeen.add(m.id)
      merged.push(m)
-      if (merged.length >= genres.length * TARGET_PER_GENRE) break
    }
  }

-  return merged.map(m => ({
-    manga: m,
-    matchedGenres: (m.genre ?? []).filter(g =>
-      genres.some(tg => tg.toLowerCase() === g.toLowerCase())
-    ),
-  }))
+  return merged.map(m => {
+    const mTagsLower = (m.tags ?? []).map(g => g.toLowerCase())
+    const matched    = genres.filter(g => mTagsLower.includes(g.toLowerCase()))
+    return {
+      manga:         m,
+      matchedGenres: matched.length > 0 ? matched : [genres[0]],
+    }
+  })
 }
@@ -2,11 +2,10 @@
  import { getAdapter }   from '$lib/request-manager'
  import { libraryState } from '$lib/state/library.svelte'
  import type { LibrarySortOption, LibraryContentFilter, LibraryStatusFilter } from '$lib/state/library.svelte'
-  import { startLibraryUpdate } from '$lib/components/library/lib/libraryUpdater'
  import { addToast }           from '$lib/state/notifications.svelte'
  import { updateSettings, settingsState } from '$lib/state/settings.svelte'
+  import { readerState } from '$lib/state/reader.svelte'
  import { goto }               from '$app/navigation'
-  import { invoke }             from '@tauri-apps/api/core'
  import LibraryToolbar  from '$lib/components/library/LibraryToolbar.svelte'
  import LibraryGrid     from '$lib/components/library/LibraryGrid.svelte'
  import ContextMenu     from '$lib/components/shared/ui/ContextMenu.svelte'
@@ -16,6 +15,7 @@
    Books, Folder, FolderSimple, FolderSimplePlus,
    Trash, CheckSquare, ArrowSquareOut, ArrowsClockwise,
  } from 'phosphor-svelte'
+  import { openMangaFolder, openDownloadsFolder } from '$lib/core/filesystem'

  const SIDEBAR_W      = 52
  const TITLEBAR_H     = 36
@@ -23,13 +23,17 @@
  const DT_TAB         = 'application/x-moku-tab'
  const COMPLETED_NAME = 'Completed'

-  let cancelUpdate:     (() => void) | null = null
+  let statusPollTimer:  ReturnType<typeof setTimeout> | null = null
  let refreshDoneTimer: ReturnType<typeof setTimeout> | null = null

+  const UPDATE_STATUS_POLL_MS = 2_000
+
  let ctx:      { x: number; y: number; manga: Manga } | null = $state(null)
  let emptyCtx: { x: number; y: number } | null              = $state(null)

-  let bulkWorking:    boolean      = $state(false)
+  let bulkWorking:     boolean      = $state(false)
+  let sortPanelOpen:   boolean      = $state(false)
+  let filterPanelOpen: boolean      = $state(false)
  let activeDragKind: 'tab' | null = $state(null)
  let dragInsertIdx                = $state(-1)
  let dragTabId:      string|null  = $state(null)
@@ -42,6 +46,9 @@
  $effect(() => { libraryState.syncFromSettings(settingsState.settings) })
  $effect(() => { libraryState.tab; libraryState.exitSelect() })
  $effect(() => { libraryState.guardTab() })
+  $effect(() => {
+    if (readerState.activeManga === null) loadLibrary()
+  })

  async function loadLibrary() {
    libraryState.loading = true
@@ -115,26 +122,6 @@
    } catch (e) { console.error(e) }
  }

-  async function openMangaFolder(m: Manga) {
-    let base: string | undefined
-    try { base = await invoke<string>('get_default_downloads_path') } catch {}
-    if (!base) { addToast({ kind: 'error', title: 'No downloads path set', body: 'Configure it in Settings → Storage' }); return }
-    const sanitize = (s: string) => s.replace(/[\/\\?%*:|"<>]/g, '_')
-    const source   = (m as any).source?.displayName ?? (m as any).source?.name ?? ''
-    const path     = source
-      ? `${base}/mangas/${sanitize(source)}/${sanitize(m.title)}`
-      : `${base}/mangas/${sanitize(m.title)}`
-    try { await invoke('open_path', { path }) }
-    catch (e: any) { addToast({ kind: 'error', title: 'Could not open folder', body: e?.toString?.() ?? path }) }
-  }
-
-  async function openDownloadsFolder() {
-    let path: string | undefined
-    try { path = await invoke<string>('get_default_downloads_path') } catch {}
-    if (!path) { addToast({ kind: 'error', title: 'No downloads path set', body: 'Configure it in Settings → Storage' }); return }
-    try { await invoke('open_path', { path }) }
-    catch (e: any) { addToast({ kind: 'error', title: 'Could not open folder', body: e?.toString?.() ?? path }) }
-  }

  async function refreshSingleManga(m: Manga) {
    if (libraryState.refreshingMangaId !== null) return
@@ -217,33 +204,57 @@
    } finally { bulkWorking = false }
  }

+  function stopStatusPolling() {
+    if (!statusPollTimer) return
+    clearTimeout(statusPollTimer)
+    statusPollTimer = null
+  }
+
  async function startRefresh() {
    if (libraryState.refreshing) return
    libraryState.refreshing = true
    libraryState.refreshProgress = { finished: 0, total: 0 }

-    cancelUpdate = startLibraryUpdate({
-      onProgress(p) { libraryState.refreshProgress = p },
-      async onDone({ newChapters, totalUpdated }) {
-        cancelUpdate = null
-        await loadLibrary()
-        libraryState.refreshing = false
-        libraryState.refreshDone = true
-        if (refreshDoneTimer) clearTimeout(refreshDoneTimer)
-        refreshDoneTimer = setTimeout(() => { libraryState.refreshDone = false }, 2500)
-        if (newChapters > 0) {
-          addToast({ kind: 'success', title: 'Library updated', body: `${newChapters} new chapter${newChapters !== 1 ? 's' : ''} across ${totalUpdated} series` })
-        } else {
-          addToast({ kind: 'info', title: 'Already up to date' })
+    try {
+      await getAdapter().checkForUpdates()
+    } catch (e) {
+      libraryState.refreshing = false
+      addToast({ kind: 'error', title: 'Update failed', body: String(e) })
+      return
+    }
+
+    const tick = async () => {
+      statusPollTimer = null
+      try {
+        const statusRes = await getAdapter().getLibraryUpdateStatus()
+        const wasRunning = libraryState.refreshing
+
+        libraryState.refreshProgress = {
+          finished: statusRes.finishedJobs ?? 0,
+          total:    statusRes.totalJobs    ?? 0,
        }
-      },
-      onError() { libraryState.refreshing = false; cancelUpdate = null },
-    })
+
+        if (statusRes.isRunning) {
+          statusPollTimer = setTimeout(tick, UPDATE_STATUS_POLL_MS)
+        } else if (wasRunning) {
+          libraryState.refreshing = false
+          libraryState.refreshDone = true
+          if (refreshDoneTimer) clearTimeout(refreshDoneTimer)
+          refreshDoneTimer = setTimeout(() => { libraryState.refreshDone = false }, 2500)
+          await loadLibrary()
+          addToast({ kind: 'info', title: 'Library updated' })
+        }
+      } catch {
+        if (libraryState.refreshing) statusPollTimer = setTimeout(tick, UPDATE_STATUS_POLL_MS)
+      }
+    }
+
+    statusPollTimer = setTimeout(tick, UPDATE_STATUS_POLL_MS)
  }

  async function cancelRefresh() {
    if (!libraryState.refreshing) return
-    cancelUpdate?.(); cancelUpdate = null
+    stopStatusPolling()
    try { await getAdapter().stopLibraryUpdate() } catch {}
    libraryState.refreshing = false
    libraryState.refreshProgress = { finished: 0, total: 0 }
@@ -382,7 +393,7 @@
  {:else}
    <LibraryToolbar
      tab={libraryState.tab}
-      tabSortMode={libraryState.tabSort[libraryState.tab]?.mode ?? 'alphabetical'}
+      tabSortMode={libraryState.tabSort[libraryState.tab]?.mode ?? 'az'}
      tabSortDir={libraryState.tabSort[libraryState.tab]?.dir ?? 'asc'}
      tabStatus={libraryState.tabStatus[libraryState.tab] ?? 'ALL'}
      tabFilters={libraryState.tabFilters[libraryState.tab] ?? {}}
@@ -390,7 +401,7 @@
      visibleCategories={libraryState.visibleCategories}
      visibleTabIds={libraryState.visibleTabIds}
      counts={libraryState.counts}
-      query={libraryState.filter.query}
+      search={libraryState.filter.query}
      refreshing={libraryState.refreshing}
      refreshProgress={libraryState.refreshProgress}
      refreshDone={libraryState.refreshDone}
@@ -399,16 +410,19 @@
      {dragInsertIdx}
      {dragTabId}
      {dragOverTabId}
+      {sortPanelOpen}
+      {filterPanelOpen}
      onTabChange={(t) => libraryState.tab = t}
-      onQuery={(q) => libraryState.filter.query = q}
+      onSearchChange={(q) => libraryState.filter.query = q}
      onSortChange={(mode) => libraryState.setTabSort(libraryState.tab, mode)}
      onSortDirToggle={() => libraryState.toggleTabSortDir(libraryState.tab)}
+      onSortPanelToggle={() => sortPanelOpen = !sortPanelOpen}
      onStatusChange={(s) => libraryState.setTabStatus(libraryState.tab, s)}
      onFilterToggle={(f) => libraryState.toggleTabFilter(libraryState.tab, f)}
      onFiltersClear={() => libraryState.clearTabFilters(libraryState.tab)}
+      onFilterPanelToggle={() => filterPanelOpen = !filterPanelOpen}
      onRefresh={startRefresh}
      onCancelRefresh={cancelRefresh}
-      onRefreshCategory={refreshCategory}
      onOpenDownloadsFolder={openDownloadsFolder}
      onTabDragStart={onTabDragStart}
      onTabDragOver={onTabDragOver}
@@ -1,5 +1,7 @@
 <script lang="ts">
  import { CheckSquare, Trash, Folder } from 'phosphor-svelte'
+  import Thumbnail from '$lib/components/shared/manga/Thumbnail.svelte'
+  import { settingsState } from '$lib/state/settings.svelte'
  import type { Manga, Category } from '$lib/types'

  interface Props {
@@ -24,14 +26,10 @@
    onCardClick, onCardContextMenu, onSelectAll, onExitSelect, onBulkRemove, onBulkMove,
  }: Props = $props()

-  const THUMB_BASE = 'http://127.0.0.1:4567'
-
  let movePanelOpen = $state(false)

-  function coverUrl(m: Manga) {
-    const url = m.thumbnailUrl ?? ''
-    return url.startsWith('http') ? url : `${THUMB_BASE}${url}`
-  }
+  const statsAlways = $derived(settingsState.settings.libraryStatsAlways ?? false)
+  const cropCovers  = $derived(settingsState.settings.libraryCropCovers  ?? true)

  function onDocDown(e: MouseEvent) {
    if (movePanelOpen && !(e.target as HTMLElement).closest('.move-wrap')) movePanelOpen = false
@@ -120,17 +118,12 @@
          class="card"
          class:card-selected={isSelected}
          class:select-mode={selectMode}
+          class:stats-always={statsAlways}
          onclick={(e) => onCardClick(e, m)}
          oncontextmenu={(e) => onCardContextMenu(e, m)}
        >
-          <div class="cover-wrap" class:completed={isCompleted}>
-            <img
-              class="cover"
-              src={coverUrl(m)}
-              alt={m.title}
-              draggable="false"
-              loading="lazy"
-            />
+          <div class="cover-wrap" class:completed={isCompleted} class:cover-contain={!cropCovers}>
+            <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" id={m.id} />
            <div class="overlay">
              <div class="badges">
                {#if isCompleted}
@@ -247,7 +240,8 @@
  }
  .cover-wrap.completed { box-shadow: inset 0 -2px 0 0 var(--accent); }

-  .cover { width: 100%; height: 100%; object-fit: cover; display: block; }
+  :global(.cover) { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .cover-contain :global(.cover) { object-fit: contain; }

  .overlay {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
@@ -257,6 +251,7 @@
    transition: opacity 0.18s ease;
  }
  .card:not(.select-mode):hover .overlay { opacity: 1; }
+  .stats-always .overlay { opacity: 1; }

  .badges { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; flex-wrap: wrap; }
  .badge {
@@ -4,21 +4,19 @@
    SortAscending, CaretUp, CaretDown, ArrowsClockwise, Star, X, CheckSquare,
  } from "phosphor-svelte";
  import LibraryFilters from "./LibraryFilters.svelte";
-  import type { Category } from "@types";
-  import type { LibrarySortMode, LibrarySortDir, LibraryStatusFilter, LibraryContentFilter } from "@store/state.svelte";
+  import type { Category } from "$lib/types";
+  import type { LibrarySortOption, LibrarySortDir, LibraryStatusFilter, LibraryContentFilter } from "$lib/state/library.svelte";

  interface Props {
    tab:              string;
-    tabSortMode:      LibrarySortMode;
+    tabSortMode:      LibrarySortOption;
    tabSortDir:       LibrarySortDir;
    tabStatus:        LibraryStatusFilter;
    tabFilters:       Partial<Record<LibraryContentFilter, boolean>>;
    hasActiveFilters: boolean;
-    anims:            boolean;
+    anims?:           boolean;
    visibleCategories: Category[];
    visibleTabIds:    string[];
-    virtualTabIds:    string[];
-    folderTabIds:     string[];
    completedCatId:   number | null;
    counts:           Record<string, number>;
    search:           string;
@@ -35,7 +33,7 @@
    tabsEl:           HTMLDivElement;
    onSearchChange:      (v: string) => void;
    onTabChange:         (f: string) => void;
-    onSortChange:        (mode: LibrarySortMode) => void;
+    onSortChange:        (mode: LibrarySortOption) => void;
    onSortDirToggle:     () => void;
    onStatusChange:      (s: LibraryStatusFilter) => void;
    onFilterToggle:      (f: LibraryContentFilter) => void;
@@ -44,7 +42,6 @@
    onFilterPanelToggle: () => void;
    onRefresh:           () => void;
    onCancelRefresh:     () => void;
-    onRefreshCategory:   (catId: number) => void;
    onOpenDownloadsFolder: () => void;
    onTabDragStart:      (e: DragEvent, id: string) => void;
    onTabDragOver:       (e: DragEvent, id: string, idx: number) => void;
@@ -55,13 +52,13 @@

  let {
    tab, tabSortMode, tabSortDir, tabStatus, tabFilters, hasActiveFilters,
-    anims, visibleCategories, visibleTabIds, virtualTabIds, folderTabIds, completedCatId,
+    anims = false, visibleCategories, visibleTabIds, completedCatId,
    counts, search, refreshing, refreshProgress, refreshDone, refreshingCatId,
    activeDragKind, dragInsertIdx, dragTabId, dragOverTabId, sortPanelOpen, filterPanelOpen,
    tabsEl = $bindable(),
    onSearchChange, onTabChange, onSortChange, onSortDirToggle, onStatusChange,
    onFilterToggle, onFiltersClear, onSortPanelToggle, onFilterPanelToggle,
-    onRefresh, onCancelRefresh, onRefreshCategory, onOpenDownloadsFolder,
+    onRefresh, onCancelRefresh, onOpenDownloadsFolder,
    onTabDragStart, onTabDragOver, onTabDragLeave, onTabDrop, onTabDragEnd,
  }: Props = $props();

@@ -85,18 +82,18 @@
    else if (ol + ow > pl + cw) tabsEl.scrollTo({ left: ol + ow - cw, behavior: "smooth" });
  });

-  const SORT_LABELS: Record<LibrarySortMode, string> = {
+  const SORT_LABELS: Record<LibrarySortOption, string> = {
    az:             "A–Z",
    unreadCount:    "Unread chapters",
    totalChapters:  "Total chapters",
-    recentlyAdded:  "Recently added",
-    recentlyRead:   "Recently read",
+    dateAdded:      "Recently added",
+    lastRead:       "Recently read",
    latestFetched:  "Latest fetched chapter",
    latestUploaded: "Latest uploaded chapter",
  };

-  const ALL_SORT_MODES: LibrarySortMode[] = [
-    "az", "unreadCount", "totalChapters", "recentlyAdded", "recentlyRead", "latestFetched", "latestUploaded",
+  const ALL_SORT_MODES: LibrarySortOption[] = [
+    "az", "unreadCount", "totalChapters", "dateAdded", "lastRead", "latestFetched", "latestUploaded",
  ];
 </script>

@@ -212,14 +209,14 @@
    </div>

    <LibraryFilters
-      {tabStatus}
-      {tabFilters}
-      {hasActiveFilters}
-      {filterPanelOpen}
+      status={tabStatus}
+      filters={tabFilters}
+      hasActive={hasActiveFilters}
+      open={filterPanelOpen}
+      onToggle={onFilterPanelToggle}
      {onStatusChange}
      {onFilterToggle}
-      {onFiltersClear}
-      {onFilterPanelToggle}
+      onClear={onFiltersClear}
    />
  </div>
 </div>
@@ -1,125 +0,0 @@
-import { getAdapter } from '$lib/request-manager'
-
-const POLL_INTERVAL_MS = 2000
-const POLL_INITIAL_MS  = 500
-
-export interface UpdateProgress {
-  finished:          number
-  total:             number
-  skippedManga:      number
-  skippedCategories: number
-}
-
-export interface UpdateResult {
-  entries:      UpdateEntry[]
-  totalUpdated: number
-  newChapters:  number
-}
-
-export interface UpdateEntry {
-  mangaId:      number
-  mangaTitle:   string
-  thumbnailUrl: string
-  newChapters:  number
-  checkedAt:    number
-}
-
-export interface LibraryUpdaterCallbacks {
-  onProgress: (p: UpdateProgress) => void
-  onDone:     (r: UpdateResult)   => void
-  onError:    (e?: unknown)       => void
-}
-
-function buildEntries(
-  mangaUpdates: { status: string; manga: { id: number; title: string; thumbnailUrl: string; unreadCount: number } }[]
-): UpdateEntry[] {
-  const byManga = new Map<number, UpdateEntry>()
-  for (const u of mangaUpdates) {
-    if (u.status !== 'UPDATED') continue
-    const existing = byManga.get(u.manga.id)
-    if (existing) {
-      existing.newChapters++
-    } else {
-      byManga.set(u.manga.id, {
-        mangaId:      u.manga.id,
-        mangaTitle:   u.manga.title,
-        thumbnailUrl: u.manga.thumbnailUrl,
-        newChapters:  1,
-        checkedAt:    Date.now(),
-      })
-    }
-  }
-  return [...byManga.values()]
-}
-
-export function startLibraryUpdate(callbacks: LibraryUpdaterCallbacks): () => void {
-  let timer:    ReturnType<typeof setTimeout> | null = null
-  let cancelled = false
-
-  function cancel() {
-    cancelled = true
-    if (timer) { clearTimeout(timer); timer = null }
-  }
-
-  async function run() {
-    let jobsStarted = false
-
-    try {
-      const status = await getAdapter().checkForUpdates()
-      if (cancelled) return
-
-      const { jobsInfo } = status
-      jobsStarted = jobsInfo.totalJobs > 0
-
-      callbacks.onProgress({
-        finished:          jobsInfo.finishedJobs,
-        total:             jobsInfo.totalJobs,
-        skippedManga:      jobsInfo.skippedMangasCount,
-        skippedCategories: jobsInfo.skippedCategoriesCount,
-      })
-
-      if (!jobsStarted || !jobsInfo.isRunning) {
-        callbacks.onDone({ entries: [], totalUpdated: 0, newChapters: 0 })
-        return
-      }
-    } catch (e) {
-      console.error('[libraryUpdater] failed to start update', e)
-      if (!cancelled) callbacks.onError(e)
-      return
-    }
-
-    function poll() {
-      getAdapter().getLibraryUpdateStatus()
-        .then(d => {
-          if (cancelled) return
-          const { jobsInfo, mangaUpdates } = d
-
-          if (jobsInfo.totalJobs > 0) jobsStarted = true
-          callbacks.onProgress({
-            finished:          jobsInfo.finishedJobs,
-            total:             jobsInfo.totalJobs,
-            skippedManga:      jobsInfo.skippedMangasCount,
-            skippedCategories: jobsInfo.skippedCategoriesCount,
-          })
-
-          if (!jobsInfo.isRunning && jobsStarted) {
-            const entries     = buildEntries(mangaUpdates)
-            const newChapters = entries.reduce((s, e) => s + e.newChapters, 0)
-            callbacks.onDone({ entries, totalUpdated: entries.length, newChapters })
-            return
-          }
-
-          timer = setTimeout(poll, POLL_INTERVAL_MS)
-        })
-        .catch(e => {
-          console.error('[libraryUpdater] poll error', e)
-          if (!cancelled) callbacks.onError(e)
-        })
-    }
-
-    timer = setTimeout(poll, POLL_INITIAL_MS)
-  }
-
-  run()
-  return cancel
-}
@@ -1,10 +1,27 @@
 <script lang="ts">
  import { readerState }        from "$lib/state/reader.svelte";
-  import { settingsState }      from "$lib/state/settings.svelte";
  import { createPinchTracker } from "$lib/components/reader/lib/pinchZoom";
  import type { PinchTracker }  from "$lib/components/reader/lib/pinchZoom";
-  import type { StripChapter }  from "$lib/components/reader/lib/scrollHandler";
-  
+  import { READ_LINE_PCT }      from "$lib/components/reader/lib/scrollHandler";
+  import { settingsState }      from "$lib/state/settings.svelte";
+  import LongstripViewer        from "$lib/components/reader/viewer/LongstripViewer.svelte";
+  import SingleViewer           from "$lib/components/reader/viewer/SingleViewer.svelte";
+  import DoubleViewer           from "$lib/components/reader/viewer/DoubleViewer.svelte";
+
+  export interface StripChapter {
+    chapterId:   number;
+    chapterName: string;
+    urls:        string[];
+  }
+
+  type FlatPage = {
+    chapterId:   number;
+    chapterName: string;
+    localIndex:  number;
+    url:         string;
+    total:       number;
+  };
+
  interface Props {
    style:            string;
    imgCls:           string;
@@ -14,10 +31,10 @@
    pageReady:        boolean;
    pageGroups:       number[][];
    currentGroup:     number[];
-    stripToRender:    StripChapter[];
    fadingOut:        boolean;
    tapToToggleBar:   boolean;
    pinchZoomEnabled: boolean;
+    useBlob:          boolean;
    barPosition:      "top" | "left" | "right";
    onGetZoom:        () => number;
    onSetZoom:        (z: number) => void;
@@ -26,139 +43,151 @@
    onWheel:          (e: WheelEvent) => void;
    onToggleUi:       () => void;
    bindContainer:    (el: HTMLDivElement) => void;
+    onPageChange:     (page: number) => void;
+    onChapterChange:  (chapterId: number) => void;
+    onCenterIdxChange:(flatIdx: number) => void;
+    onMarkRead:       (chapterId: number) => void;
+    onAppend:         () => void;
  }

  const {
    style, imgCls, effectiveWidth, loading, error, pageReady,
-    pageGroups, currentGroup, stripToRender, fadingOut,
-    tapToToggleBar, pinchZoomEnabled, barPosition,
+    pageGroups, currentGroup, fadingOut,
+    tapToToggleBar, pinchZoomEnabled, useBlob, barPosition,
    onGetZoom, onSetZoom, resolveUrl, onTap, onWheel, onToggleUi, bindContainer,
+    onPageChange, onChapterChange, onCenterIdxChange, onMarkRead, onAppend,
  }: Props = $props();

-  const LOAD_RADIUS   = 5;
-  const UNLOAD_RADIUS = 10;
+  let stripChunks = $state<StripChapter[]>([]);

-  type FlatPage = { chapterId: number; chapterName: string; localIndex: number; url: string; total: number };
+  export function loadStrip(chapterId: number, chapterName: string, urls: string[], resumeTo = 0) {
+    stripChunks = [{ chapterId, chapterName, urls }];
+    if (resumeTo > 1) {
+      setTimeout(() => scrollToFlatIndex(resumeTo - 1), 0);
+    }
+  }
+
+  export async function appendStripChunk(chapterId: number, chapterName: string, urls: string[]) {
+    if (stripChunks.some(c => c.chapterId === chapterId)) return;
+    stripChunks = [...stripChunks, { chapterId, chapterName, urls }];
+  }
+
+  export function getStripChunks(): StripChapter[] {
+    return stripChunks;
+  }

  const flatPages = $derived.by<FlatPage[]>(() => {
    const out: FlatPage[] = [];
-    for (const chunk of stripToRender) {
+    for (const chunk of stripChunks) {
      for (let i = 0; i < chunk.urls.length; i++) {
-        out.push({ chapterId: chunk.chapterId, chapterName: chunk.chapterName, localIndex: i, url: chunk.urls[i], total: chunk.urls.length });
+        out.push({
+          chapterId:   chunk.chapterId,
+          chapterName: chunk.chapterName,
+          localIndex:  i,
+          url:         chunk.urls[i],
+          total:       chunk.urls.length,
+        });
      }
    }
    return out;
  });

-  let loadedSet   = $state(new Set<number>());
-  let resolvedSrc = $state<Record<number, string>>({});
-  let revokeQueue: string[] = [];
+  let currentSrc       = $state<string | null>(null);
+  let currentGroupSrcs = $state<(string | null)[]>([]);

-  let observer: IntersectionObserver | null = null;
-  const elementIndex = new Map<Element, number>();
-
-  let viewportCenter = $state(0);
-
-  function scheduleRevoke(src: string) {
-    if (!src || !src.startsWith("blob:")) return;
-    revokeQueue.push(src);
-    requestAnimationFrame(() => {
-      const url = revokeQueue.shift();
-      if (url) { try { URL.revokeObjectURL(url); } catch {} }
-    });
-  }
-
-  function loadPage(idx: number) {
-    if (loadedSet.has(idx)) return;
-    const page = flatPages[idx];
-    if (!page) return;
-    const newSet = new Set(loadedSet);
-    newSet.add(idx);
-    loadedSet = newSet;
-    const priority = (page.localIndex < 8 && page.chapterId === flatPages[0]?.chapterId) ? 8 - page.localIndex : 0;
-    resolveUrl(page.url, priority).then(src => {
-      if (loadedSet.has(idx)) {
-        resolvedSrc = { ...resolvedSrc, [idx]: src };
-      } else {
-        scheduleRevoke(src);
-      }
-    });
-  }
-
-  function unloadPage(idx: number) {
-    if (!loadedSet.has(idx)) return;
-    const newSet = new Set(loadedSet);
-    newSet.delete(idx);
-    loadedSet = newSet;
-    const oldSrc = resolvedSrc[idx];
-    if (oldSrc) {
-      const next = { ...resolvedSrc };
-      delete next[idx];
-      resolvedSrc = next;
-      scheduleRevoke(oldSrc);
-    }
-  }
-
-  function recalcWindow() {
-    const center = viewportCenter;
-    const lo     = center - LOAD_RADIUS;
-    const hi     = center + LOAD_RADIUS;
-    const evictLo = center - UNLOAD_RADIUS;
-    const evictHi = center + UNLOAD_RADIUS;
-    for (let i = 0; i < flatPages.length; i++) {
-      if (i >= lo && i <= hi)           loadPage(i);
-      else if (i < evictLo || i > evictHi) unloadPage(i);
-    }
-  }
-
-  $effect(() => { void viewportCenter; recalcWindow(); });
-  $effect(() => { void flatPages.length; recalcWindow(); });
-
-  function setupObserver(containerEl: HTMLElement) {
-    observer?.disconnect();
-    elementIndex.clear();
-    observer = new IntersectionObserver(
-      (entries) => {
-        let best = -1;
-        let bestRatio = -1;
-        for (const entry of entries) {
-          const idx = elementIndex.get(entry.target);
-          if (idx === undefined) continue;
-          if (entry.isIntersecting && entry.intersectionRatio > bestRatio) {
-            bestRatio = entry.intersectionRatio;
-            best = idx;
-          }
-        }
-        if (best >= 0 && best !== viewportCenter) viewportCenter = best;
-      },
-      { root: containerEl, rootMargin: "0px", threshold: [0, 0.1, 0.5, 1.0] },
-    );
-  }
-
-  function observePage(el: HTMLDivElement, idx: number) {
-    elementIndex.set(el, idx);
-    observer?.observe(el);
-    return {
-      update(newIdx: number) { elementIndex.set(el, newIdx); },
-      destroy() { observer?.unobserve(el); elementIndex.delete(el); },
-    };
-  }
-
-  let lastChapterId = 0;
  $effect(() => {
-    const chapterId = readerState.activeChapter?.id ?? 0;
-    if (chapterId === lastChapterId) return;
-    lastChapterId = chapterId;
-    loadedSet      = new Set<number>();
-    resolvedSrc    = {};
-    const resume   = readerState.resumePage;
-    viewportCenter = resume > 1 ? resume - 1 : 0;
+    if (style === "longstrip" || !pageReady) return;
+    const pageNum = readerState.pageNumber;
+    const urls    = readerState.pageUrls;
+    const group   = currentGroup;
+    currentSrc       = null;
+    currentGroupSrcs = group.map(() => null);
+    let cancelled = false;
+    if (style === "double") {
+      group.forEach((pg, i) => {
+        const url = urls[pg - 1];
+        if (!url) return;
+        resolveUrl(url, 999).then(src => {
+          if (cancelled) return;
+          currentGroupSrcs = currentGroupSrcs.map((s, j) => j === i ? src : s);
+        });
+      });
+    } else {
+      const url = urls[pageNum - 1];
+      if (url) resolveUrl(url, 999).then(src => { if (!cancelled) currentSrc = src; });
+    }
+    return () => { cancelled = true; };
  });

+  $effect(() => {
+    void readerState.pageNumber;
+    if (style !== "longstrip" && containerEl) containerEl.scrollTo(0, 0);
+  });
+
+  let lastTrackedPage    = 0;
+  let lastTrackedChapter = 0;
+
+  function handleScroll() {
+    if (style !== "longstrip" || !containerEl || !flatPages.length) return;
+
+    const containerRect = containerEl.getBoundingClientRect();
+    const readY         = containerRect.top + containerEl.clientHeight * READ_LINE_PCT;
+
+    const slots = containerEl.querySelectorAll<HTMLElement>(".strip-slot");
+    let centerFlatIdx = 0;
+    let bestDist      = Infinity;
+
+    slots.forEach((slot, idx) => {
+      const rect = slot.getBoundingClientRect();
+      const mid  = (rect.top + rect.bottom) / 2;
+      const dist = Math.abs(mid - readY);
+      if (dist < bestDist) { bestDist = dist; centerFlatIdx = idx; }
+    });
+
+    onCenterIdxChange(centerFlatIdx);
+
+    const page = flatPages[centerFlatIdx];
+    if (!page) return;
+
+    const localPage = page.localIndex + 1;
+    if (localPage !== lastTrackedPage || page.chapterId !== lastTrackedChapter) {
+      lastTrackedPage    = localPage;
+      lastTrackedChapter = page.chapterId;
+      onPageChange(localPage);
+      onChapterChange(page.chapterId);
+    }
+
+    for (const chunk of stripChunks) {
+      const lastLocalIdx = chunk.urls.length - 1;
+      let flatLastIdx = -1;
+      for (let i = 0; i < flatPages.length; i++) {
+        if (flatPages[i].chapterId === chunk.chapterId && flatPages[i].localIndex === lastLocalIdx) {
+          flatLastIdx = i;
+          break;
+        }
+      }
+      if (flatLastIdx < 0) continue;
+      const lastSlot = slots[flatLastIdx];
+      if (!lastSlot) continue;
+      const lastRect = lastSlot.getBoundingClientRect();
+      if (lastRect.bottom < readY) onMarkRead(chunk.chapterId);
+    }
+
+    const scrollBottom = containerEl.scrollTop + containerEl.clientHeight;
+    const scrollTotal  = containerEl.scrollHeight;
+    if (scrollTotal - scrollBottom < containerEl.clientHeight * 1.5) onAppend();
+  }
+
  const INSPECT_ZOOM_STEP = 0.15;
  const INSPECT_ZOOM_MAX  = 8;

-  let containerEl: HTMLDivElement;
+  let containerEl = $state<HTMLDivElement | undefined>();
+  let stripRef: LongstripViewer | undefined = $state();
+
+  export function captureAnchor()              { stripRef?.captureAnchor(); }
+  export function restoreAnchor()              { stripRef?.restoreAnchor(); }
+  export function notifyScrollCenter(idx: number)        { stripRef?.notifyScrollCenter(idx); }
+  export async function scrollToFlatIndex(idx: number)   { await stripRef?.scrollToFlatIndex(idx); }

  function getInspectImageEl(): HTMLElement | null {
    if (!containerEl) return null;
@@ -183,61 +212,6 @@
  let inspectPanStartX  = 0;
  let inspectPanStartY  = 0;

-  let stripDragging    = $state(false);
-  let stripDragMoved   = false;
-  let stripDragStartY  = 0;
-  let stripScrollStart = 0;
-
-  let autoScrollPaused     = false;
-  let autoScrollPauseTimer: ReturnType<typeof setTimeout> | null = null;
-
-  let midScrollActive       = $state(false);
-  let midScrollOriginY      = $state(0);
-  let midScrollCurrentY     = 0;
-  let midScrollDisplayLevel = $state(0);
-  let midScrollRaf: number | null = null;
-
-  function startMidScroll(originY: number) {
-    midScrollActive       = true;
-    midScrollOriginY      = originY;
-    midScrollDisplayLevel = 0;
-    if (midScrollRaf) cancelAnimationFrame(midScrollRaf);
-    const tick = () => {
-      if (!midScrollActive || !containerEl) return;
-      const dy      = midScrollCurrentY - midScrollOriginY;
-      const deadZone = 24;
-      const excess  = Math.max(0, Math.abs(dy) - deadZone);
-      const speed   = Math.sign(dy) * excess * 0.12;
-      containerEl.scrollTop += speed;
-      midScrollDisplayLevel = Math.sign(dy) * Math.min(5, Math.floor(excess / 30));
-      midScrollRaf = requestAnimationFrame(tick);
-    };
-    midScrollRaf = requestAnimationFrame(tick);
-  }
-
-  function stopMidScroll() {
-    midScrollActive       = false;
-    midScrollDisplayLevel = 0;
-    if (midScrollRaf) { cancelAnimationFrame(midScrollRaf); midScrollRaf = null; }
-  }
-
-  function pauseAutoScroll() {
-    autoScrollPaused = true;
-    if (autoScrollPauseTimer) clearTimeout(autoScrollPauseTimer);
-    autoScrollPauseTimer = setTimeout(() => { autoScrollPaused = false; }, 2500);
-  }
-
-  $effect(() => {
-    if (style !== "longstrip" || !settingsState.settings.autoScroll) return;
-    let rafId: number;
-    const tick = () => {
-      if (!autoScrollPaused && containerEl) containerEl.scrollTop += (settingsState.settings.autoScrollSpeed ?? 5) * 0.5;
-      rafId = requestAnimationFrame(tick);
-    };
-    rafId = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(rafId);
-  });
-
  let pinch: PinchTracker | null = null;

  $effect(() => {
@@ -255,27 +229,11 @@
    }
  });

+  $effect(() => { if (style !== "longstrip") readerState.resetInspect(); });
+
  export function onInspectMouseDown(e: MouseEvent) {
    if ((e.target as Element).closest(".bar")) return;
-    if (e.button === 1 && style === "longstrip") {
-      e.preventDefault();
-      if (midScrollActive) {
-        stopMidScroll();
-      } else {
-        settingsState.settings.autoScroll = false;
-        startMidScroll(e.clientY);
-      }
-      return;
-    }
-    if (style === "longstrip") {
-      stripDragging    = true;
-      stripDragMoved   = false;
-      stripDragStartY  = e.clientY;
-      stripScrollStart = containerEl?.scrollTop ?? 0;
-      pauseAutoScroll();
-      e.preventDefault();
-      return;
-    }
+    if (style === "longstrip") { stripRef?.onMouseDown(e); return; }
    if (readerState.inspectScale <= 1) return;
    inspectDragging   = true;
    inspectDragMoved  = false;
@@ -287,13 +245,7 @@
  }

  export function onInspectMouseMove(e: MouseEvent) {
-    midScrollCurrentY = e.clientY;
-    if (stripDragging) {
-      const dy = e.clientY - stripDragStartY;
-      if (!stripDragMoved && Math.abs(dy) > 4) stripDragMoved = true;
-      if (containerEl) containerEl.scrollTop = stripScrollStart - dy;
-      return;
-    }
+    if (style === "longstrip") { stripRef?.onMouseMove(e); return; }
    if (!inspectDragging) return;
    if (!inspectDragMoved && Math.abs(e.clientX - inspectDragStartX) + Math.abs(e.clientY - inspectDragStartY) > 4) inspectDragMoved = true;
    const rawX = inspectPanStartX + (e.clientX - inspectDragStartX);
@@ -304,22 +256,19 @@
  }

  export function onInspectMouseUp() {
-    stripDragging   = false;
+    if (style === "longstrip") { stripRef?.onMouseUp(); return; }
    inspectDragging = false;
  }

  export function onPointerDown(e: PointerEvent) {
    if ((e.target as Element).closest(".bar")) return;
    pinch?.onPointerDown(e);
+    if (style === "longstrip") stripRef?.onPointerDown(e);
  }

  export function onPointerMove(e: PointerEvent) {
    if (pinch?.isPinching()) { pinch.onPointerMove(e); return; }
-    if (stripDragging) {
-      const dy = e.clientY - stripDragStartY;
-      if (!stripDragMoved && Math.abs(dy) > 4) stripDragMoved = true;
-      if (containerEl) containerEl.scrollTop = stripScrollStart - dy;
-    }
+    if (style === "longstrip") { stripRef?.onPointerMove(e); return; }
    if (inspectDragging) {
      if (!inspectDragMoved && Math.abs(e.clientX - inspectDragStartX) + Math.abs(e.clientY - inspectDragStartY) > 4) inspectDragMoved = true;
      const rawX = inspectPanStartX + (e.clientX - inspectDragStartX);
@@ -332,13 +281,16 @@

  export function onPointerUp(e: PointerEvent) {
    pinch?.onPointerUp(e);
-    if (!pinch?.isPinching()) { stripDragging = false; inspectDragging = false; }
+    if (!pinch?.isPinching()) {
+      if (style === "longstrip") stripRef?.onPointerUp();
+      else inspectDragging = false;
+    }
  }

  export function handleWheel(e: WheelEvent) {
    if (style === "longstrip") {
-      if (e.ctrlKey) { onWheel(e); }
-      else pauseAutoScroll();
+      if (e.ctrlKey) onWheel(e);
+      else stripRef?.onWheel(e);
      return;
    }
    if (!e.ctrlKey) { onWheel(e); return; }
@@ -348,14 +300,12 @@
    if (next === readerState.inspectScale) return;
    if (next === 1) { readerState.inspectScale = 1; readerState.inspectPanX = 0; readerState.inspectPanY = 0; return; }
    const img    = getInspectImageEl();
-    const anchor = img ?? containerEl;
+    const anchor = img ?? containerEl ?? null;
    const rect   = anchor?.getBoundingClientRect();
    const cx     = rect ? e.clientX - rect.left - rect.width  / 2 : 0;
    const cy     = rect ? e.clientY - rect.top  - rect.height / 2 : 0;
    const ratio  = next / readerState.inspectScale;
-    const rawPanX = cx + (readerState.inspectPanX - cx) * ratio;
-    const rawPanY = cy + (readerState.inspectPanY - cy) * ratio;
-    const [clampedX, clampedY] = clampInspectPan(next, rawPanX, rawPanY);
+    const [clampedX, clampedY] = clampInspectPan(next, cx + (readerState.inspectPanX - cx) * ratio, cy + (readerState.inspectPanY - cy) * ratio);
    readerState.inspectScale = next;
    readerState.inspectPanX  = clampedX;
    readerState.inspectPanY  = clampedY;
@@ -365,11 +315,10 @@

  function handleTap(e: MouseEvent) {
    if (style === "longstrip") {
-      if (stripDragMoved) { stripDragMoved = false; return; }
+      if (stripRef?.consumeTap()) return;
      return;
    }
    if (inspectDragMoved) { inspectDragMoved = false; return; }
-    if (stripDragMoved)   { stripDragMoved   = false; return; }
    if (tapToToggleBar) {
      if (tapTimer) { clearTimeout(tapTimer); tapTimer = null; return; }
      tapTimer = setTimeout(() => { tapTimer = null; onTap(e); }, 220);
@@ -388,18 +337,7 @@
  function setContainer(el: HTMLDivElement) {
    containerEl = el;
    bindContainer(el);
-    if (style === "longstrip") setupObserver(el);
  }
-
-  $effect(() => {
-    if (style === "longstrip" && containerEl) {
-      setupObserver(containerEl);
-    } else if (style !== "longstrip") {
-      observer?.disconnect();
-      observer = null;
-      stopMidScroll();
-    }
-  });
 </script>

 <div
@@ -413,10 +351,10 @@
  onclick={handleTap}
  onauxclick={(e) => { if (e.button === 1 && style === "longstrip") e.preventDefault(); }}
  ondblclick={handleDblClick}
+  onscroll={style === "longstrip" ? handleScroll : undefined}
  onmousedown={onInspectMouseDown}
  onpointerdown={pinchZoomEnabled ? onPointerDown : undefined}
  onwheel={(e) => { if (e.ctrlKey || style !== "longstrip") e.preventDefault(); }}
-  style:cursor={style === "longstrip" ? (stripDragging ? "grabbing" : "grab") : undefined}
  onkeydown={(e) => {
    if (e.key === " " && style === "longstrip") {
      e.preventDefault();
@@ -426,28 +364,9 @@
    if ((e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown") && style !== "longstrip") e.preventDefault();
  }}
 >
-  {#if midScrollActive}
-    <div class="midscroll-bar" class:midscroll-bar-right={barPosition !== "right"} class:midscroll-bar-left={barPosition === "right"}>
-      <div class="midscroll-segments">
-        {#each [5,4,3,2,1] as n}
-          <div class="midscroll-seg" class:midscroll-seg-lit={midScrollDisplayLevel < 0 && -midScrollDisplayLevel >= n}></div>
-        {/each}
-        <div class="midscroll-origin-dot"></div>
-        {#each [1,2,3,4,5] as n}
-          <div class="midscroll-seg" class:midscroll-seg-lit={midScrollDisplayLevel > 0 && midScrollDisplayLevel >= n}></div>
-        {/each}
-      </div>
-      <button class="midscroll-stop" onclick={stopMidScroll} title="Stop (middle click)">
-        <svg width="8" height="8" viewBox="0 0 8 8"><rect x="0" y="0" width="8" height="8" rx="1" fill="currentColor"/></svg>
-      </button>
-    </div>
-  {/if}
-
  {#if loading}
    <div class="center-overlay">
-      <div class="page-loader page-loader-single" aria-hidden="true">
-        {@render skeleton()}
-      </div>
+      <div class="page-loader page-loader-single" aria-hidden="true">{@render skeleton()}</div>
    </div>
  {/if}

@@ -456,74 +375,21 @@
  {/if}

  {#if style === "longstrip"}
-    {#each flatPages as page, gi (page.chapterId + ":" + page.localIndex)}
-      {@const src = resolvedSrc[gi]}
-      {@const isLoaded = loadedSet.has(gi)}
-      <div class="strip-slot" use:observePage={gi}>
-        {#if isLoaded && src}
-          <img
-            {src}
-            alt="{page.chapterName} – Page {page.localIndex + 1}"
-            data-local-page={page.localIndex + 1}
-            data-chapter={page.chapterId}
-            data-total={page.total}
-            class="{imgCls}{settingsState.settings.pageGap ? ' strip-gap' : ''}"
-            loading="eager"
-            decoding="async"
-            draggable="false"
-            onload={(e) => {
-              const img  = e.currentTarget as HTMLImageElement;
-              const slot = img.closest<HTMLElement>(".strip-slot");
-              if (slot && img.naturalWidth > 0) {
-                slot.style.setProperty("--aspect", String(img.naturalWidth / img.naturalHeight));
-              }
-            }}
-          />
-        {:else}
-          <div class="strip-placeholder" aria-hidden="true">
-            {@render skeleton()}
-          </div>
-        {/if}
-      </div>
-    {/each}
-    <div style="height:1px;flex-shrink:0"></div>
-
-  {:else if style === "fade" && pageReady}
-    <div class="inspect-wrap" style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)">
-      {#await resolveUrl(readerState.pageUrls[readerState.pageNumber - 1], 999)}
-        <div class="page-loader page-loader-single" aria-hidden="true">{@render skeleton()}</div>
-      {:then src}
-        <img {src} alt="Page {readerState.pageNumber}" class={imgCls} decoding="async" style="opacity:{fadingOut ? 0 : 1};transition:opacity 0.1s ease" draggable="false" />
-      {/await}
-    </div>
+    <LongstripViewer
+      bind:this={stripRef}
+      {containerEl}
+      {flatPages}
+      {imgCls}
+      {effectiveWidth}
+      {resolveUrl}
+      {barPosition}
+    />

  {:else if style === "double" && pageReady}
-    <div class="inspect-wrap" style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)">
-      {#if pageGroups.length}
-        <div class="double-wrap">
-          {#each currentGroup as pg, i (pg)}
-            {#await resolveUrl(readerState.pageUrls[pg - 1], 999)}
-              <div class="page-loader page-half {i === 0 ? 'gap-left' : 'gap-right'}" aria-hidden="true">{@render skeleton()}</div>
-            {:then src}
-              <img {src} alt="Page {pg}" class="{imgCls} page-half {i === 0 ? 'gap-left' : 'gap-right'}" decoding="async" draggable="false" />
-            {/await}
-          {/each}
-        </div>
-      {:else}
-        <div class="center-overlay">
-          <div class="page-loader page-loader-single" aria-hidden="true">{@render skeleton()}</div>
-        </div>
-      {/if}
-    </div>
+    <DoubleViewer {imgCls} {currentGroup} srcs={currentGroupSrcs} {pageGroups} />

  {:else if pageReady}
-    <div class="inspect-wrap" style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)">
-      {#await resolveUrl(readerState.pageUrls[readerState.pageNumber - 1], 999)}
-        <div class="page-loader page-loader-single" aria-hidden="true">{@render skeleton()}</div>
-      {:then src}
-        <img {src} alt="Page {readerState.pageNumber}" class={imgCls} decoding="async" draggable="false" />
-      {/await}
-    </div>
+    <SingleViewer {imgCls} src={currentSrc} {fadingOut} isFade={style === "fade"} />
  {/if}
 </div>

@@ -546,19 +412,6 @@

  :global(.pinch-active) .viewer { touch-action: none; }

-  .inspect-wrap { display: flex; align-items: center; justify-content: center; transform-origin: center center; will-change: transform; }
-
-  .strip-slot { width: 100%; display: flex; flex-direction: column; align-items: center; }
-
-  .strip-placeholder {
-    width: var(--effective-width, 100%);
-    max-width: var(--effective-width, 100%);
-    aspect-ratio: var(--aspect, 0.667);
-    border-radius: var(--radius-sm);
-    display: flex;
-    align-items: stretch;
-  }
-
  .page-loader { border-radius: var(--radius-sm); display: flex; align-items: stretch; }
  .page-loader-single {
    width: min(100%, var(--effective-width, 100%));
@@ -589,47 +442,14 @@
    100% { stroke-dashoffset: -400; opacity: 0.25; }
  }

-  .img { display: block; user-select: none; image-rendering: auto; }
-  .img:global(.optimize-contrast) { image-rendering: -webkit-optimize-contrast; }
+  :global(.img) { display: block; user-select: none; image-rendering: auto; }
+  :global(.img.optimize-contrast) { image-rendering: -webkit-optimize-contrast; }
  :global(.fit-width)    { max-width: var(--effective-width, 100%); width: 100%; height: auto; }
  :global(.fit-height)   { max-height: calc(var(--visual-vh, 100vh) - 80px); width: auto; max-width: var(--effective-width, 100%); height: auto; }
  :global(.fit-screen)   { max-width: var(--effective-width, 100%); max-height: calc(var(--visual-vh, 100vh) - 80px); object-fit: contain; height: auto; }
  :global(.fit-original) { max-width: 100%; width: auto; height: auto; }
  :global(.strip-gap)    { margin-bottom: 8px; }

-  .double-wrap { display: flex; align-items: flex-start; justify-content: center; max-width: calc(var(--effective-width, 100%) * 2); width: 100%; }
-  .page-half   { flex: 1; min-width: 0; object-fit: contain; }
-  .gap-left    { margin-right: 2px; }
-  .gap-right   { margin-left: 2px; }
-
  .center-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
  .error-msg      { color: var(--color-error); font-size: var(--text-base); }
-
-  .midscroll-bar {
-    position: fixed;
-    top: 50%;
-    transform: translateY(-50%);
-    z-index: 200;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    padding: 10px 6px;
-    background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
-    border: 1px solid var(--border-base);
-    border-radius: 10px;
-    box-shadow: 0 4px 16px rgba(0,0,0,0.45);
-    pointer-events: auto;
-    backdrop-filter: blur(6px);
-    -webkit-backdrop-filter: blur(6px);
-  }
-  .midscroll-bar-right { right: 8px; }
-  .midscroll-bar-left  { left: 8px; }
-
-  .midscroll-segments { display: flex; flex-direction: column; align-items: center; gap: 3px; }
-  .midscroll-origin-dot { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--accent-fg); opacity: 0.6; flex-shrink: 0; margin: 2px 0; }
-  .midscroll-seg { width: 4px; height: 14px; border-radius: 2px; background: var(--border-strong); transition: background 0.06s ease; flex-shrink: 0; }
-  .midscroll-seg-lit { background: var(--accent-fg); }
-  .midscroll-stop { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast); flex-shrink: 0; }
-  .midscroll-stop:hover { color: var(--text-primary); background: var(--bg-overlay); border-color: var(--border-strong); }
 </style>
@@ -2,16 +2,19 @@
  import { onMount, untrack, tick }        from "svelte";
  import { readerState, PAGE_STYLES }      from "$lib/state/reader.svelte";
  import { settingsState, updateSettings } from "$lib/state/settings.svelte";
-  import { app }                           from "$lib/state/app.svelte";
+  import { app, appState }                 from "$lib/state/app.svelte";
  import { DEFAULT_KEYBINDS }              from "$lib/core/keybinds/defaultBinds";
  import { fetchPages, resolveUrl, preloadImage, measureAspect, buildPageGroups } from "$lib/components/reader/lib/pageLoader";
-  import { setupScrollTracking, appendNextChapter }          from "$lib/components/reader/lib/scrollHandler";
  import { createReaderKeyHandler }                          from "$lib/components/reader/lib/readerKeybinds";
  import { markChapterRead, getMangaPrefs, toggleBookmark }  from "$lib/components/reader/lib/chapterActions";
  import { goForward, goBack, jumpToPage }                   from "$lib/components/reader/lib/navigation";
  import { clampZoom, captureZoomAnchor, restoreZoomAnchor } from "$lib/components/reader/lib/zoomHelpers";
  import { loadChapter, scheduleResumeDismiss }              from "$lib/components/reader/lib/chapterLoader";
  import { historyState }                                    from "$lib/state/history.svelte";
+  import { setPreviewManga }                                 from "$lib/state/series.svelte";
+  import { getAdapter }                                      from "$lib/request-manager";
+  import { setReading, clearReading }                        from "$lib/core/discord";
+  import { revokeBlobUrl, cancelQueuedFetches, preloadBlobUrls } from "$lib/core/cache/imageCache";
  import type { ReaderSettings }                             from "$lib/state/reader.svelte";
  import ReaderControls                                      from "$lib/components/reader/ReaderControls.svelte";
  import PageView                                            from "$lib/components/reader/PageView.svelte";
@@ -42,9 +45,11 @@
  const pinchZoomEnabled = $derived(settingsState.settings.pinchZoom ?? false);
  const containerized  = $derived(settingsState.settings.readerContainerized ?? false);

+  let visibleChapterId = $state<number | null>(null);
+
  const displayChapter = $derived(
-    style === "longstrip" && readerState.visibleChapterId
-      ? (readerState.activeChapterList.find(c => c.id === readerState.visibleChapterId) ?? readerState.activeChapter)
+    style === "longstrip" && visibleChapterId
+      ? (readerState.activeChapterList.find(c => c.id === visibleChapterId) ?? readerState.activeChapter)
      : readerState.activeChapter
  );

@@ -67,7 +72,7 @@

  const showResumeBanner = $derived(
    readerState.resumeVisible && readerState.resumePage > 1 &&
-    (style === "longstrip" ? readerState.stripResumeReady : readerState.pageNumber === readerState.resumePage)
+    readerState.pageNumber === readerState.resumePage
  );

  const adjacent = $derived.by(() => {
@@ -83,9 +88,9 @@

  const visibleChunkLastPage = $derived.by(() => {
    if (style !== "longstrip") return lastPage;
-    const chId  = readerState.visibleChapterId ?? readerState.activeChapter?.id;
-    const chunk = readerState.stripChapters.find(c => c.chapterId === chId);
-    return chunk?.urls.length ?? lastPage;
+    const chunks = pageViewRef?.getStripChunks() ?? [];
+    const chId   = visibleChapterId ?? readerState.activeChapter?.id;
+    return chunks.find(c => c.chapterId === chId)?.urls.length ?? lastPage;
  });

  const imgCls = $derived([
@@ -97,14 +102,6 @@
    effectiveReaderSettings.optimizeContrast && "optimize-contrast",
  ].filter(Boolean).join(" "));

-  const stripToRender = $derived(
-    style === "longstrip"
-      ? (readerState.stripChapters.length > 0
-          ? readerState.stripChapters
-          : [{ chapterId: readerState.activeChapter?.id ?? 0, chapterName: readerState.activeChapter?.name ?? "", urls: readerState.pageUrls }])
-      : []
-  );
-
  const currentGroup = $derived.by(() => {
    const group = style === "double" && readerState.pageGroups.length
      ? (readerState.pageGroups.find(g => g.includes(readerState.pageNumber)) ?? [readerState.pageNumber])
@@ -141,11 +138,8 @@
  let abortCtrl          = { current: null as AbortController | null };
  let hasNavigated       = false;
  let startAtLastPageRef = { current: false };
-  let cleanupScroll: () => void = () => {};
-  let stripChaptersRef   = readerState.stripChapters;
-  let tickTimer: ReturnType<typeof setTimeout> | null = null;
-
-  $effect(() => { stripChaptersRef = readerState.stripChapters; });
+  let tickTimer:     ReturnType<typeof setTimeout> | null = null;
+  let progressTimer: ReturnType<typeof setTimeout> | null = null;

  function maybeMarkCurrentRead() {
    const ch = displayChapter ?? readerState.activeChapter;
@@ -207,6 +201,24 @@

  const startAtLast = () => { startAtLastPageRef.current = true; };

+  function primedJump(page: number, commit = true) {
+    if (useBlob && commit && style !== "longstrip") {
+      cancelQueuedFetches();
+      const urls = readerState.pageUrls;
+      const lo   = Math.max(0, page - 2);
+      const hi   = Math.min(urls.length, page + 4);
+      preloadBlobUrls(urls.slice(lo, hi), 999);
+    }
+    jumpToPage(
+      page,
+      style,
+      lastPage,
+      style === "longstrip" ? (idx) => pageViewRef.scrollToFlatIndex(idx) : null,
+      visibleChapterId ?? readerState.activeChapter?.id ?? 0,
+      pageViewRef?.getStripChunks() ?? [],
+    );
+  }
+
  const goNext = $derived(rtl
    ? () => goBack(style, adjacent, startAtLast)
    : () => goForward(style, adjacent, lastPage, maybeMarkCurrentRead, startAtLast));
@@ -214,17 +226,23 @@
    ? () => goForward(style, adjacent, lastPage, maybeMarkCurrentRead, startAtLast)
    : () => goBack(style, adjacent, startAtLast));

+  function handleCloseReader() {
+    clearReading().catch(() => {});
+    for (const url of readerState.pageUrls) revokeBlobUrl(url);
+    readerState.closeReader();
+  }
+
  const onKey = createReaderKeyHandler({
    goNext:           () => goNext(),
    goPrev:           () => goPrev(),
-    closeReader:      () => readerState.closeReader(),
-    goToPage:         (p) => jumpToPage(p, style, lastPage, containerEl),
+    closeReader:      () => handleCloseReader(),
+    goToPage:         (p) => primedJump(p),
    lastPage:         () => lastPage,
    adjustZoom:       (d) => { captureZoomAnchor(containerEl, style, zoomAnchor); applySettings({ readerZoom: clampZoom(zoom + d) }); restoreZoomAnchor(containerEl, zoomAnchor); },
    resetZoom:        () => { captureZoomAnchor(containerEl, style, zoomAnchor); applySettings({ readerZoom: 1.0 }); restoreZoomAnchor(containerEl, zoomAnchor); },
    cycleStyle:       () => { const idx = PAGE_STYLES.indexOf(style); applySettings({ pageStyle: PAGE_STYLES[(idx + 1) % PAGE_STYLES.length] }); },
    toggleDirection:  () => applySettings({ readingDirection: rtl ? "ltr" : "rtl" }),
-    openSettings: () => { app.setSettingsOpen(true); },
+    openSettings:     () => { app.setSettingsOpen(true); },
    toggleBookmark:   () => toggleBookmark(displayChapter, readerState.pageNumber),
    toggleAutoScroll: () => { if (style === "longstrip") updateSettings({ autoScroll: !(settingsState.settings.autoScroll ?? false) }); },
    toggleMarker:     () => {
@@ -298,10 +316,11 @@
  }

  $effect(() => {
-    const ch    = readerState.activeChapter;
-    const manga = readerState.activeManga;
-    if (ch && manga) {
+    const ch = readerState.activeChapter;
+    if (ch) {
      untrack(() => {
+        const manga = readerState.activeManga;
+        if (!manga) return;
        historyState.openSession(
          manga.id, manga.title, manga.thumbnailUrl,
          ch.id, ch.name, readerState.pageNumber,
@@ -311,10 +330,19 @@
    }
  });

+  $effect(() => {
+    const ch    = readerState.activeChapter;
+    const manga = readerState.activeManga;
+    const idle  = appState.idleSplash;
+    if (ch && manga && !idle) {
+      untrack(() => setReading(manga, ch).catch(() => {}));
+    }
+  });
+
  $effect(() => {
    const page   = readerState.pageNumber;
    const chId   = style === "longstrip"
-      ? (readerState.visibleChapterId ?? readerState.activeChapter?.id)
+      ? (visibleChapterId ?? readerState.activeChapter?.id)
      : readerState.activeChapter?.id;
    const chName = style === "longstrip"
      ? (readerState.activeChapterList.find(c => c.id === chId)?.name ?? readerState.activeChapter?.name ?? "")
@@ -337,119 +365,34 @@
    if (style === "longstrip" && readerState.pageUrls.length && readerState.activeChapter) {
      const ch       = readerState.activeChapter;
      const urls     = readerState.pageUrls;
-      const targetPg = untrack(() => readerState.resumePage);
-      appending                    = false;
-      readerState.stripChapters    = [{ chapterId: ch.id, chapterName: ch.name, urls }];
-      readerState.visibleChapterId = ch.id;
-      tick().then(() => {
-        if (!containerEl) return;
-        if (targetPg > 1) {
-          const chId = ch.id;
-          const scrollToResumePage = () => {
-            const target = containerEl!.querySelector<HTMLImageElement>(`img[data-local-page="${targetPg}"][data-chapter="${chId}"]`);
-            if (!target) { requestAnimationFrame(scrollToResumePage); return; }
-            containerEl!.querySelectorAll<HTMLImageElement>(`img[data-chapter="${chId}"]`).forEach((img, i) => { if (i < targetPg) img.loading = "eager"; });
-            const doScroll = () => { target.scrollIntoView({ block: "start" }); readerState.stripResumeReady = true; };
-            if (target.complete && target.naturalHeight > 0) doScroll();
-            else { target.loading = "eager"; target.addEventListener("load", doScroll, { once: true }); }
-          };
-          scrollToResumePage();
-          return;
-        }
-        containerEl!.scrollTop = 0;
-      });
+      const resumeTo = untrack(() => readerState.resumePage);
+      visibleChapterId = ch.id;
+      appending        = false;
+      pageViewRef.loadStrip(ch.id, ch.name, urls, resumeTo);
    }
  });

  $effect(() => { if (style !== "longstrip") readerState.resetInspect(); });

  $effect(() => {
-    const chId = readerState.visibleChapterId;
+    const chId = visibleChapterId;
    if (!chId || style !== "longstrip") return;
    if (chId === readerState.activeChapter?.id) return;
-    const wasAppended = untrack(() => readerState.stripChapters.findIndex(c => c.chapterId === chId)) > 0;
-    if (wasAppended) {
-      untrack(() => {
-        readerState.resumePage    = 0;
-        readerState.resumeVisible = false;
-        const prefs = getMangaPrefs(chId);
-        if (prefs.downloadAhead > 0) {
-          const list = readerState.activeChapterList;
-          const idx  = list.findIndex(c => c.id === chId);
-          if (idx >= 0) {
-            const toQueue = list.slice(idx + 1, idx + 1 + prefs.downloadAhead)
-              .filter(c => !c.downloaded && !c.read)
-              .map(c => c.id);
-            if (toQueue.length) {
-              const DL = `mutation EnqueueDl($ids: [Int!]!) { enqueueChaptersDownloads(input: { ids: $ids }) { downloadStatus { queue { chapter { id } } } } }`;
-              const base    = settingsState.settings.serverUrl ?? "http://localhost:4567";
-              const headers: Record<string, string> = { "Content-Type": "application/json" };
-              const mode    = settingsState.settings.serverAuthMode ?? "NONE";
-              if (mode === "BASIC_AUTH") {
-                const u = settingsState.settings.serverAuthUser?.trim() ?? "";
-                const p = settingsState.settings.serverAuthPass?.trim() ?? "";
-                if (u && p) headers["Authorization"] = `Basic ${btoa(`${u}:${p}`)}`;
-              }
-              fetch(`${base}/api/graphql`, { method: "POST", headers, body: JSON.stringify({ query: DL, variables: { ids: toQueue } }) })
-                .catch(console.error);
-            }
-          }
-        }
-      });
-      return;
-    }
-    const bookmark = readerState.bookmarks.find(b => b.chapterId === chId);
-    if (bookmark && bookmark.pageNumber > 1) {
-      untrack(() => {
-        readerState.resumePage       = bookmark.pageNumber;
-        readerState.resumeDismissed  = false;
-        readerState.resumeVisible    = true;
-        readerState.stripResumeReady = true;
-        scheduleResumeDismiss();
-      });
-    } else {
-      untrack(() => readerState.resetResume());
-    }
-  });
-
-  $effect(() => {
-    void style;
-    if (!containerEl) return;
    untrack(() => {
-      cleanupScroll();
-      cleanupScroll = setupScrollTracking(containerEl!, {
-        onPageChange:    (p) => { readerState.pageNumber = p; },
-        onChapterChange: (id) => { readerState.visibleChapterId = id; },
-        onMarkRead:      (id) => markChapterRead(id, markedRead),
-        onAppend:        () => {
-          if (appending || !readerState.stripChapters.length) return;
-          appending = true;
-          appendNextChapter(
-            stripChaptersRef,
-            readerState.activeChapterList,
-            (id) => fetchPages(id, useBlob),
-            (url) => preloadImage(url, useBlob),
-            (next) => { readerState.stripChapters = [...readerState.stripChapters, next]; appending = false; },
-            () => { appending = false; },
-          );
-        },
-        getStripChapters: () => stripChaptersRef,
-        getPageUrls:      () => readerState.pageUrls,
-        shouldAutoMark:   () => settingsState.settings.autoMarkRead ?? true,
-      });
-    });
-  });
-
-  $effect(() => {
-    if (readerState.activeChapter && readerState.activeChapterList.length) {
-      const idx = readerState.activeChapterList.findIndex(c => c.id === readerState.activeChapter!.id);
-      if (idx >= 0) {
-        const next = readerState.activeChapterList[idx + 1];
-        const prev = readerState.activeChapterList[idx - 1];
-        if (next) fetchPages(next.id, useBlob).then(urls => urls.slice(0, 8).forEach(u => preloadImage(u, useBlob))).catch(() => {});
-        if (prev) fetchPages(prev.id, useBlob).then(urls => urls.slice(0, 2).forEach(u => preloadImage(u, useBlob))).catch(() => {});
+      readerState.resumePage    = 0;
+      readerState.resumeVisible = false;
+      const prefs = getMangaPrefs(chId);
+      if (prefs.downloadAhead > 0) {
+        const list = readerState.activeChapterList;
+        const idx  = list.findIndex(c => c.id === chId);
+        if (idx >= 0) {
+          const toQueue = list.slice(idx + 1, idx + 1 + prefs.downloadAhead)
+            .filter(c => !c.downloaded && !c.read)
+            .map(c => c.id);
+          if (toQueue.length) getAdapter().enqueueDownloads(toQueue.map(String)).catch(console.error);
+        }
      }
-    }
+    });
  });

  $effect(() => {
@@ -518,13 +461,21 @@
      if (pageNum > 1) hasNavigated = true;
      untrack(() => {
        if (!hasNavigated) return;
-        if (style === "longstrip" && readerState.visibleChapterId && chapterId !== readerState.visibleChapterId) return;
+        if (style === "longstrip" && visibleChapterId && chapterId !== visibleChapterId) return;
        if (settingsState.settings.autoBookmark ?? true) {
          const existing = readerState.bookmarks.find(b => b.mangaId === mangaId && b.chapterId !== chapterId);
          if (existing) readerState.removeBookmark(existing.chapterId);
          readerState.addBookmark({ mangaId, mangaTitle, thumbnailUrl: thumb, chapterId, chapterName, pageNumber: pageNum });
        }
        if (style !== "longstrip" && (settingsState.settings.autoMarkRead ?? true) && atLast) markChapterRead(chapterId, markedRead);
+
+        if (pageNum > 1 && !markedRead.has(chapterId)) {
+          if (progressTimer) clearTimeout(progressTimer);
+          progressTimer = setTimeout(() => {
+            getAdapter().updateChaptersProgress([String(chapterId)], { lastPageRead: pageNum }).catch(console.error);
+            progressTimer = null;
+          }, 2_000);
+        }
      });
    }
  });
@@ -558,12 +509,12 @@
      abortCtrl.current?.abort();
      if (hideTimer) clearTimeout(hideTimer);
      if (roTimer) clearTimeout(roTimer);
+      if (progressTimer) clearTimeout(progressTimer);
      window.removeEventListener("keydown", onKey);
      window.removeEventListener("mousemove", pageViewRef.onInspectMouseMove);
      window.removeEventListener("mouseup",  pageViewRef.onInspectMouseUp);
      window.removeEventListener("pointermove", pageViewRef.onPointerMove);
      window.removeEventListener("pointerup",   pageViewRef.onPointerUp);
-      cleanupScroll();
      ro.disconnect();
    };
  });
@@ -607,6 +558,7 @@
    onClampZoom={clampZoom}
    onApplySettings={applySettings}
    onSettingsOpen={() => { app.setSettingsOpen(true); }}
+    onOpenPreview={() => { if (readerState.activeManga) setPreviewManga(readerState.activeManga); }}
    {perMangaEnabled}
  />

@@ -643,10 +595,11 @@
    error={readerState.error}
    pageReady={readerState.pageReady}
    pageGroups={readerState.pageGroups}
-    {currentGroup} {stripToRender}
+    {currentGroup}
    fadingOut={readerState.fadingOut}
    {tapToToggleBar}
    {pinchZoomEnabled}
+    {useBlob}
    {barPosition}
    onGetZoom={() => zoom}
    onSetZoom={(z) => { captureZoomAnchor(containerEl, style, zoomAnchor); applySettings({ readerZoom: z }); restoreZoomAnchor(containerEl, zoomAnchor); }}
@@ -655,6 +608,28 @@
    onWheel={handleWheel}
    onToggleUi={toggleUiVisibility}
    {bindContainer}
+    onPageChange={(p) => { readerState.pageNumber = p; }}
+    onChapterChange={(id) => { visibleChapterId = id; }}
+    onCenterIdxChange={(idx) => { pageViewRef?.notifyScrollCenter(idx); }}
+    onMarkRead={(id) => markChapterRead(id, markedRead)}
+    onAppend={() => {
+      if (appending) return;
+      const chunks    = pageViewRef?.getStripChunks() ?? [];
+      if (!chunks.length) return;
+      const lastChunk = chunks[chunks.length - 1];
+      const list      = readerState.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 || chunks.some(c => c.chapterId === next.id)) return;
+      appending = true;
+      fetchPages(next.id, useBlob)
+        .then(urls => {
+          urls.slice(0, 6).forEach(url => preloadImage(url, useBlob));
+          return pageViewRef.appendStripChunk(next.id, next.name, urls);
+        })
+        .finally(() => { appending = false; });
+    }}
  />

  {#snippet progressBarSnippet()}
@@ -667,7 +642,7 @@
      {barPosition}
      onGoPrev={goPrev}
      onGoNext={goNext}
-      onJumpToPage={(p) => jumpToPage(p, style, lastPage, containerEl)}
+      onJumpToPage={(p, commit) => primedJump(p, commit)}
    />
  {/snippet}

@@ -681,7 +656,7 @@
      {barPosition}
      onGoPrev={goPrev}
      onGoNext={goNext}
-      onJumpToPage={(p) => jumpToPage(p, style, lastPage, containerEl)}
+      onJumpToPage={(p, commit) => primedJump(p, commit)}
    />
  {/if}
 </div>
@@ -698,4 +673,4 @@
  .root.bar-right :global(.viewer) { margin-right: 40px; }

  .root.pinch-active :global(.viewer) { touch-action: none; }
-</style>
+</style>
@@ -3,10 +3,11 @@
    X, CaretLeft, CaretRight, CaretUp, CaretDown,
    MagnifyingGlassMinus, MagnifyingGlassPlus,
    Bookmark, MapPin, Download, Check, GearSix, Sliders,
-    ArrowsOut, ArrowsIn,
+    ArrowsOut, ArrowsIn, Minus,
  } from "phosphor-svelte";
  import { readerState, MARKER_COLORS, MARKER_COLOR_HEX, ZOOM_STEP, ZOOM_MIN, ZOOM_MAX } from "$lib/state/reader.svelte";
-  import { settingsState }  from "$lib/state/settings.svelte";
+  import { getAdapter }        from "$lib/request-manager";
+  import { platformService }   from "$lib/platform-service";
  import { fly }               from "svelte/transition";
  import { cubicOut, cubicIn } from "svelte/easing";
  import type { Chapter }      from "$lib/types";
@@ -35,6 +36,7 @@
    onClampZoom:          (z: number) => number;
    onApplySettings:      (patch: Partial<ReaderSettings>) => void;
    onSettingsOpen:       () => void;
+    onOpenPreview:        () => void;
    perMangaEnabled:      boolean;
  }

@@ -46,30 +48,12 @@
    barPosition, progressBar,
    onCaptureZoomAnchor, onRestoreZoomAnchor,
    onMaybeMarkRead, onToggleBookmark, onCommitMarker, onDeleteMarker,
-    onClampZoom, onApplySettings, onSettingsOpen,
+    onClampZoom, onApplySettings, onSettingsOpen, onOpenPreview,
    perMangaEnabled,
  }: Props = $props();

  const queueable = $derived(adjacent.remaining.filter(c => !c.downloaded));

-  async function gqlMutation(query: string, variables: Record<string, unknown>): Promise<void> {
-    const base = settingsState.settings.serverUrl ?? "http://localhost:4567";
-    const headers: Record<string, string> = { "Content-Type": "application/json" };
-    const mode = settingsState.settings.serverAuthMode ?? "NONE";
-    if (mode === "BASIC_AUTH") {
-      const u = settingsState.settings.serverAuthUser?.trim() ?? "";
-      const p = settingsState.settings.serverAuthPass?.trim() ?? "";
-      if (u && p) headers["Authorization"] = `Basic ${btoa(`${u}:${p}`)}`;
-    }
-    const res = await fetch(`${base}/api/graphql`, { method: "POST", headers, body: JSON.stringify({ query, variables }) });
-    if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    const json = await res.json();
-    if (json.errors?.length) throw new Error(json.errors[0].message);
-  }
-
-  const ENQUEUE_ONE  = `mutation EnqueueOne($id: Int!) { fetchChapterPages(input: { chapterId: $id }) { chapter { id } } }`;
-  const ENQUEUE_MANY = `mutation EnqueueMany($ids: [Int!]!) { enqueueChaptersDownloads(input: { ids: $ids }) { downloadStatus { queue { chapter { id } } } } }`;
-
  async function runDl(fn: () => Promise<void>) {
    readerState.dlBusy = true;
    try { await fn(); } catch (e) { console.error(e); }
@@ -77,6 +61,14 @@
    readerState.dlOpen = false;
  }

+  function enqueueOne(chapterId: number) {
+    return getAdapter().enqueueDownload(String(chapterId));
+  }
+
+  function enqueueMany(chapterIds: number[]) {
+    return getAdapter().enqueueDownloads(chapterIds.map(String));
+  }
+
  const isVertical  = $derived(barPosition === "left" || barPosition === "right");
  const popoverSide = $derived(
    barPosition === "left"  ? "right" :
@@ -96,9 +88,10 @@
    onRestoreZoomAnchor();
  }

+  const isTauri = platformService.platform === "tauri";
+
  async function toggleFullscreen() {
-    if (!document.fullscreenElement) await document.documentElement.requestFullscreen();
-    else await document.exitFullscreen();
+    await platformService.toggleFullscreen();
  }

  function closeAllPopovers() {
@@ -146,7 +139,7 @@
    <div class="bar-divider"></div>

    <button class="icon-btn"
-      onclick={() => { if (adjacent.prev) { onMaybeMarkRead(); readerState.openReader(adjacent.prev, readerState.activeChapterList); } }}
+      onclick={() => { if (adjacent.prev) { onMaybeMarkRead(); readerState.openReader(adjacent.prev); } }}
      disabled={!adjacent.prev}
      title="Previous chapter">
      {#if isVertical}<CaretUp size={13} weight="regular" />{:else}<CaretLeft size={13} weight="regular" />{/if}
@@ -163,12 +156,12 @@
          <span class="ch-info">&#xE2CE;</span>
        {:else}
          <span class="ch-marquee-track" onwheel={(e) => { e.stopPropagation(); (e.currentTarget as HTMLElement).scrollLeft += e.deltaY; }}>
-            <span class="ch-marquee-content">
-              <span class="ch-title">{readerState.activeManga?.title}</span>
-              <span class="ch-sep">/</span>
-              <span class="ch-name">{displayChapter?.name}</span>
+              <button class="ch-marquee-content ch-preview-btn" onclick={onOpenPreview}>
+                <span class="ch-title">{readerState.activeManga?.title}</span>
+                <span class="ch-sep">/</span>
+                <span class="ch-name">{displayChapter?.name}</span>
+              </button>
            </span>
-          </span>
        {/if}
      </div>
      {#if !isVertical}
@@ -186,7 +179,7 @@
    </div>

    <button class="icon-btn"
-      onclick={() => { if (adjacent.next) { onMaybeMarkRead(); readerState.openReader(adjacent.next, readerState.activeChapterList); } }}
+      onclick={() => { if (adjacent.next) { onMaybeMarkRead(); readerState.openReader(adjacent.next); } }}
      disabled={!adjacent.next}
      title="Next chapter">
      {#if isVertical}<CaretDown size={13} weight="regular" />{:else}<CaretRight size={13} weight="regular" />{/if}
@@ -337,6 +330,16 @@
              <span>Fullscreen</span>
            {/if}
          </button>
+          {#if isTauri}
+            <button class="action-row" onclick={() => { readerState.actionsOpen = false; platformService.minimize(); }}>
+              <Minus size={13} weight="regular" />
+              <span>Minimize</span>
+            </button>
+            <button class="action-row action-row-danger" onclick={() => { readerState.actionsOpen = false; platformService.close(); }}>
+              <X size={13} weight="regular" />
+              <span>Close window</span>
+            </button>
+          {/if}
        </div>
      {/if}

@@ -345,13 +348,13 @@
        <div class="popover dl-popover popover-{popoverSide}" role="presentation" onclick={(e) => e.stopPropagation()}>
          <p class="dl-title">Download</p>
          <button class="dl-option" disabled={readerState.dlBusy || !!chapter.downloaded}
-            onclick={() => runDl(() => gqlMutation(ENQUEUE_ONE, { id: chapter.id }))}>
+            onclick={() => runDl(() => enqueueOne(chapter.id))}>
            This chapter
            <span class="dl-sub">{chapter.downloaded ? "Already downloaded" : chapter.name}</span>
          </button>
          <div class="dl-row">
            <button class="dl-option" disabled={readerState.dlBusy || queueable.length === 0}
-              onclick={() => runDl(() => gqlMutation(ENQUEUE_MANY, { ids: queueable.slice(0, readerState.nextN).map(c => c.id) }))}>
+              onclick={() => runDl(() => enqueueMany(queueable.slice(0, readerState.nextN).map(c => c.id)))}>
              Next chapters
              <span class="dl-sub">{Math.min(readerState.nextN, queueable.length)} not yet downloaded</span>
            </button>
@@ -362,7 +365,7 @@
            </div>
          </div>
          <button class="dl-option" disabled={readerState.dlBusy || queueable.length === 0}
-            onclick={() => runDl(() => gqlMutation(ENQUEUE_MANY, { ids: queueable.map(c => c.id) }))}>
+            onclick={() => runDl(() => enqueueMany(queueable.map(c => c.id)))}>
            All remaining
            <span class="dl-sub">{queueable.length} not yet downloaded</span>
          </button>
@@ -492,6 +495,8 @@
  .ch-marquee-track { overflow-x: auto; min-width: 0; flex: 1; scrollbar-width: none; }
  .ch-marquee-track::-webkit-scrollbar { display: none; }
  .ch-marquee-content { display: inline-flex; align-items: center; gap: var(--sp-2); white-space: nowrap; }
+  .ch-preview-btn { background: none; border: none; cursor: pointer; padding: 0; font-size: inherit; font-family: inherit; border-radius: var(--radius-sm); transition: opacity var(--t-fast); }
+  .ch-preview-btn:hover { opacity: 0.7; }
  .ch-title { color: var(--text-secondary); font-weight: var(--weight-medium); }
  .ch-sep   { color: var(--text-faint); flex-shrink: 0; }
  .ch-name  { color: var(--text-muted); }
@@ -661,8 +666,10 @@
    transition: background var(--t-fast), color var(--t-fast);
  }
  .action-row:hover { background: var(--bg-overlay); color: var(--text-primary); }
+  .action-row.action-row-danger:hover { background: color-mix(in srgb, #c0392b 15%, transparent); color: var(--color-error, #e57373); }
  .action-row svg, .action-row :global(svg) { flex-shrink: 0; color: var(--text-faint); }
  .action-row:hover svg, .action-row:hover :global(svg) { color: var(--text-muted); }
+  .action-row-danger:hover svg, .action-row-danger:hover :global(svg) { color: var(--color-error, #e57373); }

  .action-divider { height: 1px; background: var(--border-dim); margin: var(--sp-1) 0; }

@@ -1,6 +1,5 @@
 <script lang="ts">
  import { readerState }                    from "$lib/state/reader.svelte";
-  import { settingsState }                  from "$lib/state/settings.svelte";
  import { getAdapter }                     from "$lib/request-manager";
  import type { Chapter }                   from "$lib/types";

@@ -15,28 +14,6 @@

  const { showResumeBanner, resumePage, resumeFading, adjacent, onDismissResume, barPosition }: Props = $props();

-  async function gqlMutation(query: string, variables: Record<string, unknown>): Promise<void> {
-    const base    = settingsState.settings.serverUrl ?? "http://localhost:4567";
-    const headers: Record<string, string> = { "Content-Type": "application/json" };
-    const mode    = settingsState.settings.serverAuthMode ?? "NONE";
-    if (mode === "BASIC_AUTH") {
-      const u = settingsState.settings.serverAuthUser?.trim() ?? "";
-      const p = settingsState.settings.serverAuthPass?.trim() ?? "";
-      if (u && p) headers["Authorization"] = `Basic ${btoa(`${u}:${p}`)}`;
-    }
-    const res = await fetch(`${base}/api/graphql`, {
-      method: "POST",
-      headers,
-      body: JSON.stringify({ query, variables }),
-    });
-    if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    const json = await res.json();
-    if (json.errors?.length) throw new Error(json.errors[0].message);
-  }
-
-  const ENQUEUE_ONE  = `mutation EnqueueOne($id: Int!) { fetchChapterPages(input: { chapterId: $id }) { chapter { id } } }`;
-  const ENQUEUE_MANY = `mutation EnqueueMany($ids: [Int!]!) { enqueueChaptersDownloads(input: { ids: $ids }) { downloadStatus { queue { chapter { id } } } } }`;
-
  async function runDl(fn: () => Promise<void>) {
    readerState.dlBusy = true;
    try { await fn(); } catch (e) { console.error(e); }
@@ -44,11 +21,27 @@
    readerState.dlOpen = false;
  }

+  let bannerMounted = $state(false);
+  let bannerFading  = $state(false);
+
+  $effect(() => {
+    if (showResumeBanner) {
+      bannerMounted = true;
+      bannerFading  = false;
+    } else if (bannerMounted) {
+      bannerFading = true;
+    }
+  });
+
  const queueable = $derived(adjacent.remaining.filter(c => !c.downloaded));
+
+  function onBannerAnimationEnd() {
+    if (bannerFading) { bannerMounted = false; bannerFading = false; }
+  }
 </script>

-{#if showResumeBanner}
-  <button class="resume-banner" class:fading={resumeFading} onclick={onDismissResume}>
+{#if bannerMounted}
+  <button class="resume-banner" class:fading={bannerFading} onclick={onDismissResume} onanimationend={onBannerAnimationEnd}>
    Bookmark at page {resumePage}
  </button>
 {/if}
@@ -60,14 +53,14 @@
      <p class="dl-title">Download</p>

      <button class="dl-option" disabled={readerState.dlBusy || !!chapter.downloaded}
-        onclick={() => runDl(() => gqlMutation(ENQUEUE_ONE, { id: chapter.id }))}>
+        onclick={() => runDl(() => getAdapter().enqueueDownload(String(chapter.id)))}>
        This chapter
        <span class="dl-sub">{chapter.downloaded ? "Already downloaded" : chapter.name}</span>
      </button>

      <div class="dl-row">
        <button class="dl-option" disabled={readerState.dlBusy || queueable.length === 0}
-          onclick={() => runDl(() => gqlMutation(ENQUEUE_MANY, { ids: queueable.slice(0, readerState.nextN).map(c => c.id) }))}>
+          onclick={() => runDl(() => getAdapter().enqueueDownloads(queueable.slice(0, readerState.nextN).map(c => String(c.id))))}>
          Next chapters
          <span class="dl-sub">{Math.min(readerState.nextN, queueable.length)} not yet downloaded</span>
        </button>
@@ -79,7 +72,7 @@
      </div>

      <button class="dl-option" disabled={readerState.dlBusy || queueable.length === 0}
-        onclick={() => runDl(() => gqlMutation(ENQUEUE_MANY, { ids: queueable.map(c => c.id) }))}>
+        onclick={() => runDl(() => getAdapter().enqueueDownloads(queueable.map(c => String(c.id))))}>
        All remaining
        <span class="dl-sub">{queueable.length} not yet downloaded</span>
      </button>
@@ -20,7 +20,7 @@
    barPosition:          "top" | "left" | "right";
    onGoPrev:             () => void;
    onGoNext:             () => void;
-    onJumpToPage:         (page: number) => void;
+    onJumpToPage:         (page: number, commit?: boolean) => void;
  }

  const {
@@ -32,12 +32,22 @@

  const isVertical = $derived(barPosition === "left" || barPosition === "right");

-  const hValue = $derived(rtl ? sliderMax - sliderPage + 1 : sliderPage);
-  const hPct   = $derived(`--pct:${sliderPct}%`);
+  const hPct = $derived(`--pct:${sliderPct}%`);
+
+  function sliderValToPage(raw: number): number {
+    return rtl ? sliderMax - raw + 1 : raw;
+  }
+
+  function pageToSliderVal(page: number): number {
+    return rtl ? sliderMax - page + 1 : page;
+  }

  function handleH(e: Event) {
-    const raw = Number((e.target as HTMLInputElement).value);
-    onJumpToPage(rtl ? sliderMax - raw + 1 : raw);
+    onJumpToPage(sliderValToPage(Number((e.target as HTMLInputElement).value)), false);
+  }
+
+  function handleHCommit(e: Event) {
+    onJumpToPage(sliderValToPage(Number((e.target as HTMLInputElement).value)), true);
  }

  function markerPct(pageNumber: number, forRtl = false): number {
@@ -46,9 +56,9 @@
    return ((ord - 1) / (sliderMax - 1)) * 100;
  }

-  // Custom vertical slider
  let trackEl = $state<HTMLDivElement | null>(null);
  let dragging = $state(false);
+  let pendingPage = 0;

  function pctFromPointer(clientY: number): number {
    if (!trackEl) return 0;
@@ -64,22 +74,24 @@
    if (e.button !== 0) return;
    e.preventDefault();
    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-    dragging = true;
+    dragging    = true;
    readerState.sliderDragging = true;
-    const pct  = pctFromPointer(e.clientY);
-    onJumpToPage(pageFromPct(pct));
+    pendingPage = pageFromPct(pctFromPointer(e.clientY));
+    onJumpToPage(pendingPage, false);
  }

  function handleTrackPointerMove(e: PointerEvent) {
    if (!dragging) return;
-    const pct = pctFromPointer(e.clientY);
-    onJumpToPage(pageFromPct(pct));
+    pendingPage = pageFromPct(pctFromPointer(e.clientY));
+    onJumpToPage(pendingPage, false);
  }

  function handleTrackPointerUp(e: PointerEvent) {
    if (!dragging) return;
    dragging = false;
    readerState.sliderDragging = false;
+    readerState.sliderHover    = false;
+    onJumpToPage(pendingPage, true);
  }
 </script>

@@ -102,8 +114,9 @@
          style={hPct}
          min={1}
          max={sliderMax}
-          value={hValue}
+          value={pageToSliderVal(sliderPage)}
          oninput={handleH}
+          onchange={handleHCommit}
          onmousedown={() => readerState.sliderDragging = true}
          onmouseup={() => readerState.sliderDragging = false}
        />
@@ -1,4 +1,5 @@
 import { readerState, DEFAULT_MANGA_PREFS } from "$lib/state/reader.svelte";
+import { seriesState }                      from "$lib/state/series.svelte";
 import { settingsState }                    from "$lib/state/settings.svelte";
 import { getAdapter }                       from "$lib/request-manager";
 import type { MangaPrefs }                  from "$lib/types/settings";
@@ -35,8 +36,8 @@ export function markChapterRead(id: number, markedRead: Set<number>) {
      const mangaId = readerState.activeManga?.id;
      if (!mangaId) return;

-      readerState.activeChapterList = readerState.activeChapterList.map(c =>
-        c.id === id ? { ...c, read: true } : c
+      seriesState.patchChapters(mangaId, chapters =>
+        chapters.map(c => c.id === id ? { ...c, read: true } : c),
      );

      const prefs = getMangaPrefs(mangaId);
@@ -79,15 +80,15 @@ export function toggleBookmark(chapter: typeof readerState.activeChapter, pageNu
  const manga = readerState.activeManga;
  if (!chapter || !manga) return;

-  const existing = readerState.bookmarks.find(
+  const existing = seriesState.bookmarks.find(
    b => b.mangaId === manga.id && b.chapterId === chapter.id && b.pageNumber === pageNumber,
  );
  if (existing) {
-    readerState.removeBookmark(chapter.id);
+    seriesState.removeBookmark(chapter.id);
  } else {
-    const other = readerState.bookmarks.find(b => b.mangaId === manga.id && b.chapterId !== chapter.id);
-    if (other) readerState.removeBookmark(other.chapterId);
-    readerState.addBookmark({
+    const other = seriesState.bookmarks.find(b => b.mangaId === manga.id && b.chapterId !== chapter.id);
+    if (other) seriesState.removeBookmark(other.chapterId);
+    seriesState.addBookmark({
      mangaId:      manga.id,
      mangaTitle:   manga.title,
      thumbnailUrl: manga.thumbnailUrl,
@@ -103,9 +104,9 @@ export function commitMarker(color: MarkerColor, note: string, editId: string) {
  const manga   = readerState.activeManga;
  if (!chapter || !manga) return;
  if (editId) {
-    readerState.updateMarker(editId, { note: note.trim(), color });
+    seriesState.updateMarker(editId, { note: note.trim(), color });
  } else {
-    readerState.addMarker({
+    seriesState.addMarker({
      mangaId:      manga.id,
      mangaTitle:   manga.title,
      thumbnailUrl: manga.thumbnailUrl,
@@ -1,13 +1,17 @@
-import { readerState }          from "$lib/state/reader.svelte";
-import { fetchPages }           from "./pageLoader";
-import { cancelQueuedFetches }  from "$lib/core/cache/imageCache";
-import { clearResolvedUrlCache } from "$lib/core/cache/pageCache";
+import { readerState }                                          from "$lib/state/reader.svelte";
+import { seriesState }                                         from "$lib/state/series.svelte";
+import { fetchPages }                                          from "./pageLoader";
+import { cancelQueuedFetches, revokeBlobUrl, preloadBlobUrls } from "$lib/core/cache/imageCache";
+import { clearResolvedUrlCache, clearPageCache }               from "$lib/core/cache/pageCache";

 export function scheduleResumeDismiss() {
  setTimeout(() => { readerState.resumeFading = true; }, 1500);
  setTimeout(() => { readerState.resumeVisible = false; readerState.resumeFading = false; }, 2500);
 }

+let prefetchedChapterId: number | null = null;
+let prefetchedUrls:      string[]      = [];
+
 export async function loadChapter(
  id: number,
  useBlob: boolean,
@@ -21,33 +25,57 @@ export async function loadChapter(
  abortCtrl.current = ctrl;

  cancelQueuedFetches();
-  if (useBlob) clearResolvedUrlCache();
+  if (useBlob) {
+    clearResolvedUrlCache();
+    for (const url of readerState.pageUrls) revokeBlobUrl(url);
+    if (prefetchedChapterId !== null && prefetchedChapterId !== id) {
+      for (const url of prefetchedUrls) revokeBlobUrl(url);
+      clearPageCache(prefetchedChapterId);
+    }
+    prefetchedChapterId = null;
+    prefetchedUrls      = [];
+  }

  startAtLastPage.current = false;
  markedRead.clear();
  readerState.resetForChapter();
  readerState.pageUrls = [];

-  const bookmark = readerState.bookmarks.find(b => b.chapterId === id);
+  const bookmark = seriesState.bookmarks.find(b => b.chapterId === id);
  const resumeTo = bookmark ? bookmark.pageNumber : 0;
  readerState.resumePage      = resumeTo > 1 ? resumeTo : 0;
  readerState.resumeDismissed = false;
-  readerState.resumeVisible   = resumeTo > 1;
-  if (resumeTo > 1) scheduleResumeDismiss();
+  readerState.resumeVisible   = false;

  readerState.pageNumber = 1;
  try {
    const urls = await fetchPages(id, useBlob, ctrl.signal, resumeTo > 1 ? resumeTo - 1 : 0);
    if (ctrl.signal.aborted) return;
    readerState.pageUrls = urls;
+    if (useBlob && resumeTo > 1) {
+      const lo = Math.max(0, resumeTo - 2);
+      const hi = Math.min(urls.length, resumeTo + 4);
+      preloadBlobUrls(urls.slice(lo, hi), 900);
+    }
    if (startAtLastPage.current)  readerState.pageNumber = urls.length;
    else if (resumeTo > 1)        readerState.pageNumber = Math.min(resumeTo, urls.length || resumeTo);
    readerState.pageReady = true;
    readerState.loading   = false;
-    if (adjacent.next) fetchPages(adjacent.next.id, useBlob, ctrl.signal).catch(() => {});
+    if (resumeTo > 1) readerState.resumeVisible = true;
+
+    if (adjacent.next) {
+      prefetchedChapterId = adjacent.next.id;
+      fetchPages(adjacent.next.id, useBlob, ctrl.signal)
+        .then(fetched => {
+          if (!ctrl.signal.aborted && prefetchedChapterId === adjacent.next!.id) {
+            prefetchedUrls = fetched;
+          }
+        })
+        .catch(() => {});
+    }
  } catch (e: unknown) {
    if (ctrl.signal.aborted) return;
    readerState.error   = e instanceof Error ? e.message : String(e);
    readerState.loading = false;
  }
-}
+}
@@ -11,11 +11,11 @@ function advanceGroup(forward: boolean, adjacent: Adjacent, startAtLastPage: ()
  const gi = readerState.pageGroups.findIndex(g => g.includes(readerState.pageNumber));
  if (forward) {
    if (gi < readerState.pageGroups.length - 1) readerState.pageNumber = readerState.pageGroups[gi + 1][0];
-    else if (adjacent.next) { readerState.pageNumber = 1; openReader(adjacent.next, readerState.activeChapterList); }
+    else if (adjacent.next) { readerState.pageNumber = 1; openReader(adjacent.next); }
    else closeReader();
  } else {
    if (gi > 0) readerState.pageNumber = readerState.pageGroups[gi - 1][0];
-    else if (adjacent.prev) { startAtLastPage(); openReader(adjacent.prev, readerState.activeChapterList); }
+    else if (adjacent.prev) { startAtLastPage(); openReader(adjacent.prev); }
  }
 }

@@ -35,7 +35,7 @@ export function goForward(
 ) {
  if (readerState.loading) return;
  if (style === "longstrip") {
-    if (adjacent.next) { onMaybeMarkRead(); openReader(adjacent.next, readerState.activeChapterList); }
+    if (adjacent.next) { onMaybeMarkRead(); openReader(adjacent.next); }
    return;
  }
  if (style === "double" && readerState.pageGroups.length) { advanceGroup(true, adjacent, startAtLastPage); return; }
@@ -46,14 +46,14 @@ export function goForward(
  } else if (adjacent.next) {
    onMaybeMarkRead();
    readerState.pageNumber = 1;
-    openReader(adjacent.next, readerState.activeChapterList);
+    openReader(adjacent.next);
  } else closeReader();
 }

 export function goBack(style: string, adjacent: Adjacent, startAtLastPage: () => void) {
  if (readerState.loading) return;
  if (style === "longstrip") {
-    if (adjacent.prev) { startAtLastPage(); openReader(adjacent.prev, readerState.activeChapterList); }
+    if (adjacent.prev) { startAtLastPage(); openReader(adjacent.prev); }
    return;
  }
  if (style === "double" && readerState.pageGroups.length) { advanceGroup(false, adjacent, startAtLastPage); return; }
@@ -61,17 +61,32 @@ export function goBack(style: string, adjacent: Adjacent, startAtLastPage: () =>
  if (readerState.pageNumber > 1) {
    if (style === "fade") animateFade(() => { readerState.pageNumber--; });
    else readerState.pageNumber--;
-  } else if (adjacent.prev) { startAtLastPage(); openReader(adjacent.prev, readerState.activeChapterList); }
+  } else if (adjacent.prev) { startAtLastPage(); openReader(adjacent.prev); }
 }

-export function jumpToPage(page: number, style: string, lastPage: number, containerEl: HTMLElement | null) {
+export function jumpToPage(
+  page: number,
+  style: string,
+  lastPage: number,
+  scrollToFlatIndex: ((idx: number) => void) | null,
+  activeChapterId: number,
+  chunks: { chapterId: number; urls: string[] }[],
+) {
  if (style === "longstrip") {
-    const chId = readerState.visibleChapterId ?? readerState.activeChapter?.id;
-    containerEl?.querySelector<HTMLImageElement>(`img[data-local-page="${page}"][data-chapter="${chId}"]`)?.scrollIntoView({ block: "start" });
+    if (!scrollToFlatIndex || !chunks.length) return;
+    let offset = 0;
+    for (const chunk of chunks) {
+      if (chunk.chapterId === activeChapterId) {
+        scrollToFlatIndex(offset + Math.max(0, page - 1));
+        return;
+      }
+      offset += chunk.urls.length;
+    }
+    scrollToFlatIndex(Math.max(0, page - 1));
    return;
  }
  if (style === "double" && readerState.pageGroups.length) {
-    const group = readerState.pageGroups[page - 1];
+    const group = readerState.pageGroups.find(g => g.includes(page)) ?? readerState.pageGroups.findLast(g => g[0] <= page);
    if (group) readerState.pageNumber = group[0];
  } else {
    readerState.pageNumber = Math.max(1, Math.min(lastPage, page));
@@ -1,4 +1,4 @@
-export { fetchPages, resolveUrl, preloadImage, measureAspect, clearPageCache, clearResolvedUrlCache } from "$lib/core/cache/pageCache";
+export { fetchPages, resolveUrl, preloadImage, measureAspect, clearPageCache, clearResolvedUrlCache, getCachedAspect } from "$lib/core/cache/pageCache";

 export function buildPageGroups(urls: string[], aspects: number[], offsetSpreads: boolean): number[][] {
  const groups: number[][] = [[1]];
@@ -10,4 +10,4 @@ export function buildPageGroups(urls: string[], aspects: number[], offsetSpreads
    else { groups.push([i, i + 1]); i += 2; }
  }
  return groups;
-}
+}
@@ -1,100 +1 @@
 export const READ_LINE_PCT = 0.50;
-
-export interface StripChapter {
-  chapterId:   number;
-  chapterName: string;
-  urls:        string[];
-}
-
-export interface ScrollHandlerCallbacks {
-  onPageChange:     (page: number) => void;
-  onChapterChange:  (chapterId: number) => void;
-  onMarkRead:       (chapterId: number) => void;
-  onAppend:         () => void;
-  getStripChapters: () => StripChapter[];
-  getPageUrls:      () => string[];
-  shouldAutoMark:   () => boolean;
-}
-
-export function setupScrollTracking(
-  containerEl: HTMLElement,
-  callbacks: ScrollHandlerCallbacks,
-): () => void {
-  const { onPageChange, onChapterChange, onMarkRead, onAppend, getStripChapters, getPageUrls, shouldAutoMark } = callbacks;
-  let rafId: number | null = null;
-
-  function tick() {
-    rafId = null;
-    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;
-
-    let lo = 0, hi = imgs.length - 1, best = 0;
-    while (lo <= hi) {
-      const mid = (lo + hi) >>> 1;
-      if (imgs[mid].getBoundingClientRect().top <= readLineY) { best = mid; lo = mid + 1; }
-      else hi = mid - 1;
-    }
-
-    const active     = imgs[best];
-    const activePage = Number(active.dataset.localPage);
-    const activeChId = Number(active.dataset.chapter);
-
-    onPageChange(activePage);
-    if (activeChId) onChapterChange(activeChId);
-
-    if (shouldAutoMark() && activeChId) {
-      const chunks = getStripChapters();
-      const chunk  = chunks.find(c => c.chapterId === activeChId);
-      const total  = chunk ? chunk.urls.length : getPageUrls().length;
-      if (total > 0 && activePage >= total) onMarkRead(activeChId);
-
-      const atBottom = containerEl.scrollTop + containerEl.clientHeight >= containerEl.scrollHeight - 40;
-      if (atBottom) {
-        const last = chunks[chunks.length - 1];
-        if (last) onMarkRead(last.chapterId);
-      }
-    }
-
-    const pct = (containerEl.scrollTop + containerEl.clientHeight) / containerEl.scrollHeight;
-    if (pct >= 0.80) onAppend();
-  }
-
-  function onScroll() {
-    if (rafId !== null) return;
-    rafId = requestAnimationFrame(tick);
-  }
-
-  containerEl.addEventListener("scroll", onScroll, { passive: true });
-  return () => {
-    containerEl.removeEventListener("scroll", onScroll);
-    if (rafId !== null) cancelAnimationFrame(rafId);
-  };
-}
-
-export function appendNextChapter(
-  stripChapters: StripChapter[],
-  chapterList: { id: number; name: string }[],
-  fetchPages: (chapterId: number) => Promise<string[]>,
-  preloadImage: (url: string) => void,
-  onAppended: (next: StripChapter) => void,
-  onDone: () => void,
-): void {
-  if (!stripChapters.length) return;
-  const lastChunk = stripChapters[stripChapters.length - 1];
-  const lastIdx   = chapterList.findIndex(c => c.id === lastChunk.chapterId);
-  if (lastIdx < 0 || lastIdx >= chapterList.length - 1) return;
-  const next = chapterList[lastIdx + 1];
-  if (!next || stripChapters.some(c => c.chapterId === next.id)) return;
-
-  fetchPages(next.id)
-    .then(urls => { urls.slice(0, 6).forEach(preloadImage); return urls; })
-    .then(urls => {
-      if (stripChapters.some(c => c.chapterId === next.id)) { onDone(); return; }
-      onAppended({ chapterId: next.id, chapterName: next.name, urls });
-      onDone();
-    })
-    .catch(() => onDone());
-}
@@ -0,0 +1,89 @@
+<script lang="ts">
+  import { readerState } from "$lib/state/reader.svelte";
+
+  interface Props {
+    imgCls:       string;
+    currentGroup: number[];
+    srcs:         (string | null)[];
+    pageGroups:   number[][];
+  }
+
+  const { imgCls, currentGroup, srcs, pageGroups }: Props = $props();
+</script>
+
+<div
+  class="inspect-wrap"
+  style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)"
+>
+  {#if pageGroups.length}
+    <div class="double-wrap">
+      {#each currentGroup as pg, i (pg)}
+        {#if srcs[i]}
+          <img
+            src={srcs[i]}
+            alt="Page {pg}"
+            class="{imgCls} page-half {i === 0 ? 'gap-left' : 'gap-right'}"
+            decoding="async"
+            draggable="false"
+          />
+        {:else}
+          <div class="page-loader page-half {i === 0 ? 'gap-left' : 'gap-right'}" aria-hidden="true">
+            {@render skeleton()}
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {:else}
+    <div class="center-overlay">
+      <div class="page-loader page-loader-single" aria-hidden="true">{@render skeleton()}</div>
+    </div>
+  {/if}
+</div>
+
+{#snippet skeleton()}
+  <svg class="panel-skeleton" viewBox="0 0 100 150" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
+    <rect class="ps-r ps-r1" x="2"  y="2"  width="62" height="88" rx="1"/>
+    <rect class="ps-r ps-r2" x="68" y="2"  width="30" height="42" rx="1"/>
+    <rect class="ps-r ps-r3" x="68" y="48" width="30" height="42" rx="1"/>
+    <rect class="ps-r ps-r4" x="2"  y="94" width="44" height="54" rx="1"/>
+    <rect class="ps-r ps-r5" x="50" y="94" width="48" height="54" rx="1"/>
+  </svg>
+{/snippet}
+
+<style>
+  .inspect-wrap { display: flex; align-items: center; justify-content: center; transform-origin: center center; will-change: transform; }
+
+  .double-wrap { display: flex; align-items: flex-start; justify-content: center; max-width: calc(var(--effective-width, 100%) * 2); width: 100%; }
+  .page-half   { flex: 1; min-width: 0; object-fit: contain; }
+  .gap-left    { margin-right: 2px; }
+  .gap-right   { margin-left: 2px; }
+
+  .center-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
+
+  .page-loader { border-radius: var(--radius-sm); display: flex; align-items: stretch; }
+  .page-loader-single {
+    width: min(100%, var(--effective-width, 100%));
+    max-width: var(--effective-width, 100%);
+    max-height: calc(var(--visual-vh, 100vh) - 80px);
+    aspect-ratio: 2 / 3;
+  }
+
+  .panel-skeleton { width: 100%; height: 100%; }
+  .panel-skeleton :global(.ps-r) {
+    stroke: var(--border-strong); stroke-width: 0.8; fill: none;
+    stroke-dasharray: 400; stroke-dashoffset: 400;
+    animation: ps-shimmer 2s ease-in-out infinite;
+  }
+  .panel-skeleton :global(.ps-r1) { animation-delay: 0s; }
+  .panel-skeleton :global(.ps-r2) { animation-delay: 0.15s; }
+  .panel-skeleton :global(.ps-r3) { animation-delay: 0.3s; }
+  .panel-skeleton :global(.ps-r4) { animation-delay: 0.1s; }
+  .panel-skeleton :global(.ps-r5) { animation-delay: 0.25s; }
+
+  @keyframes ps-shimmer {
+    0%   { stroke-dashoffset: 400;  opacity: 0.25; }
+    40%  { stroke-dashoffset: 0;    opacity: 0.55; }
+    70%  { stroke-dashoffset: 0;    opacity: 0.55; }
+    100% { stroke-dashoffset: -400; opacity: 0.25; }
+  }
+</style>
@@ -0,0 +1,409 @@
+<script lang="ts">
+  import { tick }              from "svelte";
+  import { readerState }       from "$lib/state/reader.svelte";
+  import { settingsState }     from "$lib/state/settings.svelte";
+  import { getCachedAspect }   from "$lib/components/reader/lib/pageLoader";
+
+  export interface StripPage {
+    chapterId:   number;
+    chapterName: string;
+    localIndex:  number;
+    url:         string;
+    total:       number;
+  }
+
+  interface Props {
+    containerEl:    HTMLDivElement | undefined;
+    flatPages:      StripPage[];
+    imgCls:         string;
+    effectiveWidth: number | undefined;
+    resolveUrl:     (url: string, priority?: number) => Promise<string>;
+    barPosition:    "top" | "left" | "right";
+  }
+
+  const { containerEl, flatPages, imgCls, effectiveWidth, resolveUrl, barPosition }: Props = $props();
+
+  const LOAD_RADIUS   = 5;
+  const UNLOAD_RADIUS = 10;
+
+  let _loadedSet:   Set<number>            = new Set();
+  let _resolvedSrc: Record<number, string> = {};
+  let _version      = $state(0);
+
+  const loadedSet   = { has: (i: number) => _loadedSet.has(i) };
+  const resolvedSrc = { get: (i: number) => _resolvedSrc[i] as string | undefined };
+  let revokeQueue: string[] = [];
+
+  let centerIdx   = $state(0);
+  const aspectMap = new Map<number, number>();
+
+  function scheduleRevoke(src: string) {
+    if (!src || !src.startsWith("blob:")) return;
+    revokeQueue.push(src);
+    requestAnimationFrame(() => {
+      const url = revokeQueue.shift();
+      if (url) { try { URL.revokeObjectURL(url); } catch {} }
+    });
+  }
+
+  function loadPage(idx: number) {
+    if (_loadedSet.has(idx)) return;
+    const page = flatPages[idx];
+    if (!page) return;
+    _loadedSet.add(idx);
+    const priority = (page.localIndex < 8 && page.chapterId === flatPages[0]?.chapterId) ? 8 - page.localIndex : 0;
+    resolveUrl(page.url, priority).then(src => {
+      if (_loadedSet.has(idx)) {
+        _resolvedSrc[idx] = src;
+        _version++;
+      } else {
+        scheduleRevoke(src);
+      }
+    });
+  }
+
+  function unloadPage(idx: number) {
+    if (!_loadedSet.has(idx)) return;
+    _loadedSet.delete(idx);
+    const aspect = aspectMap.get(idx);
+    if (aspect !== undefined && containerEl) {
+      const slot = containerEl.querySelectorAll<HTMLElement>(".strip-slot")[idx];
+      slot?.style.setProperty("--aspect", String(aspect));
+    }
+    const oldSrc = _resolvedSrc[idx];
+    if (oldSrc) {
+      delete _resolvedSrc[idx];
+      scheduleRevoke(oldSrc);
+    }
+    _version++;
+  }
+
+  let recalcTimer: ReturnType<typeof setTimeout> | null = null;
+
+  function recalcWindow(center: number) {
+    const lo      = center - LOAD_RADIUS;
+    const hi      = center + LOAD_RADIUS;
+    const evictLo = center - UNLOAD_RADIUS;
+    const evictHi = center + UNLOAD_RADIUS;
+    for (let i = 0; i < flatPages.length; i++) {
+      if (i >= lo && i <= hi)              loadPage(i);
+      else if (i < evictLo || i > evictHi) unloadPage(i);
+    }
+  }
+
+  function scheduleRecalc(center: number) {
+    if (recalcTimer) return;
+    recalcTimer = setTimeout(() => { recalcTimer = null; recalcWindow(center); }, 50);
+  }
+
+  $effect(() => { void _version; });
+  $effect(() => { recalcWindow(centerIdx); });
+  $effect(() => { void flatPages.length; tick().then(() => recalcWindow(centerIdx)); });
+
+  let lastChapterId = 0;
+  $effect(() => {
+    let chapterId: number;
+    try { chapterId = readerState.activeChapter?.id ?? 0; } catch { return; }
+    if (chapterId === lastChapterId) return;
+    lastChapterId = chapterId;
+    _loadedSet    = new Set<number>();
+    _resolvedSrc  = {};
+    centerIdx     = 0;
+    _version++;
+    aspectMap.clear();
+  });
+
+
+  export function notifyScrollCenter(idx: number) {
+    centerIdx = idx;
+    scheduleRecalc(idx);
+  }
+
+  export async function scrollToFlatIndex(idx: number) {
+    if (!containerEl || !flatPages.length) return;
+    centerIdx = idx;
+    recalcWindow(idx);
+    await tick();
+    if (!containerEl) return;
+    const slot = containerEl.querySelectorAll<HTMLElement>(".strip-slot")[idx];
+    if (slot) slot.scrollIntoView({ block: "start", behavior: "instant" });
+  }
+
+  let anchorEl: HTMLElement | null = null;
+  let anchorOffset                 = 0;
+
+  export function captureAnchor() {
+    if (!containerEl) return;
+    const readY = containerEl.getBoundingClientRect().top + containerEl.clientHeight * 0.5;
+    const imgs  = containerEl.querySelectorAll<HTMLElement>("img[data-local-page]");
+    let best: HTMLElement | null = null;
+    let bestTop = -Infinity;
+    for (const img of imgs) {
+      const top = img.getBoundingClientRect().top;
+      if (top <= readY && top > bestTop) { bestTop = top; best = img; }
+    }
+    anchorEl     = best;
+    anchorOffset = best ? readY - best.getBoundingClientRect().top : 0;
+  }
+
+  export function restoreAnchor() {
+    if (!containerEl || !anchorEl) return;
+    requestAnimationFrame(() => {
+      if (!anchorEl || !containerEl) return;
+      const readY = containerEl.getBoundingClientRect().top + containerEl.clientHeight * 0.5;
+      const delta = (readY - anchorEl.getBoundingClientRect().top) - anchorOffset;
+      containerEl.scrollTop -= delta;
+      anchorEl = null;
+    });
+  }
+
+
+  let autoScrollPaused     = false;
+  let autoScrollPauseTimer: ReturnType<typeof setTimeout> | null = null;
+
+  export function pauseAutoScroll() {
+    autoScrollPaused = true;
+    if (autoScrollPauseTimer) clearTimeout(autoScrollPauseTimer);
+    autoScrollPauseTimer = setTimeout(() => { autoScrollPaused = false; }, 2500);
+  }
+
+  $effect(() => {
+    if (!settingsState.settings.autoScroll || !containerEl) return;
+    let rafId: number;
+    const tick = () => {
+      if (!autoScrollPaused && containerEl) containerEl.scrollTop += (settingsState.settings.autoScrollSpeed ?? 5) * 0.5;
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafId);
+  });
+
+
+  const HIDE_AFTER_MS = 5_000;
+
+  $effect(() => {
+    if (!containerEl) return;
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const show = () => {
+      containerEl.style.cursor = "";
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => { if (containerEl) containerEl.style.cursor = "none"; }, HIDE_AFTER_MS);
+    };
+    show();
+    window.addEventListener("mousemove", show, { passive: true });
+    return () => {
+      if (containerEl) containerEl.style.cursor = "";
+      window.removeEventListener("mousemove", show);
+      if (timer) clearTimeout(timer);
+    };
+  });
+
+  let midScrollActive       = $state(false);
+  let midScrollOriginY      = $state(0);
+  let midScrollCurrentY     = 0;
+  let midScrollDisplayLevel = $state(0);
+  let midScrollRaf: number | null = null;
+
+  function startMidScroll(originY: number) {
+    midScrollActive       = true;
+    midScrollOriginY      = originY;
+    midScrollDisplayLevel = 0;
+    if (midScrollRaf) cancelAnimationFrame(midScrollRaf);
+    const frame = () => {
+      if (!midScrollActive || !containerEl) return;
+      const dy     = midScrollCurrentY - midScrollOriginY;
+      const excess = Math.max(0, Math.abs(dy) - 24);
+      containerEl.scrollTop += Math.sign(dy) * excess * 0.12;
+      midScrollDisplayLevel  = Math.sign(dy) * Math.min(5, Math.floor(excess / 30));
+      midScrollRaf = requestAnimationFrame(frame);
+    };
+    midScrollRaf = requestAnimationFrame(frame);
+  }
+
+  export function stopMidScroll() {
+    midScrollActive       = false;
+    midScrollDisplayLevel = 0;
+    if (midScrollRaf) { cancelAnimationFrame(midScrollRaf); midScrollRaf = null; }
+  }
+
+
+  let stripDragging    = false;
+  let stripDragMoved   = false;
+  let stripDragStartY  = 0;
+  let stripScrollStart = 0;
+
+  function setDragCursor(dragging: boolean) {
+    if (containerEl) containerEl.style.cursor = dragging ? "grabbing" : "";
+  }
+
+  export function onMouseDown(e: MouseEvent) {
+    if ((e.target as Element).closest(".bar")) return;
+    if (e.button === 1) {
+      e.preventDefault();
+      if (midScrollActive) stopMidScroll();
+      else { settingsState.settings.autoScroll = false; startMidScroll(e.clientY); }
+      return;
+    }
+    stripDragging    = true;
+    stripDragMoved   = false;
+    stripDragStartY  = e.clientY;
+    stripScrollStart = containerEl?.scrollTop ?? 0;
+    setDragCursor(true);
+    pauseAutoScroll();
+    e.preventDefault();
+  }
+
+  export function onMouseMove(e: MouseEvent) {
+    midScrollCurrentY = e.clientY;
+    if (!stripDragging) return;
+    const dy = e.clientY - stripDragStartY;
+    if (!stripDragMoved && Math.abs(dy) > 4) stripDragMoved = true;
+    if (containerEl) containerEl.scrollTop = stripScrollStart - dy;
+  }
+
+  export function onMouseUp() {
+    stripDragging = false;
+    setDragCursor(false);
+  }
+
+  export function onPointerDown(e: PointerEvent) {
+    if ((e.target as Element).closest(".bar")) return;
+    stripDragging    = true;
+    stripDragMoved   = false;
+    stripDragStartY  = e.clientY;
+    stripScrollStart = containerEl?.scrollTop ?? 0;
+    setDragCursor(true);
+    pauseAutoScroll();
+  }
+
+  export function onPointerMove(e: PointerEvent) {
+    if (!stripDragging) return;
+    const dy = e.clientY - stripDragStartY;
+    if (!stripDragMoved && Math.abs(dy) > 4) stripDragMoved = true;
+    if (containerEl) containerEl.scrollTop = stripScrollStart - dy;
+  }
+
+  export function onPointerUp() {
+    stripDragging = false;
+    setDragCursor(false);
+  }
+
+  export function consumeTap(): boolean {
+    if (stripDragMoved) { stripDragMoved = false; return true; }
+    return false;
+  }
+
+  export function onWheel(e: WheelEvent) {
+    if (!e.ctrlKey) pauseAutoScroll();
+  }
+</script>
+
+{#if midScrollActive}
+  <div class="midscroll-bar" class:midscroll-bar-right={barPosition !== "right"} class:midscroll-bar-left={barPosition === "right"}>
+    <div class="midscroll-segments">
+      {#each [5,4,3,2,1] as n}
+        <div class="midscroll-seg" class:midscroll-seg-lit={midScrollDisplayLevel < 0 && -midScrollDisplayLevel >= n}></div>
+      {/each}
+      <div class="midscroll-origin-dot"></div>
+      {#each [1,2,3,4,5] as n}
+        <div class="midscroll-seg" class:midscroll-seg-lit={midScrollDisplayLevel > 0 && midScrollDisplayLevel >= n}></div>
+      {/each}
+    </div>
+    <button class="midscroll-stop" onclick={stopMidScroll} title="Stop (middle click)">
+      <svg width="8" height="8" viewBox="0 0 8 8"><rect x="0" y="0" width="8" height="8" rx="1" fill="currentColor"/></svg>
+    </button>
+  </div>
+{/if}
+
+{#each flatPages as page, gi (page.chapterId + ":" + page.localIndex)}
+  {@const src      = (_version, resolvedSrc.get(gi))}
+  {@const isLoaded = (_version, loadedSet.has(gi))}
+  <div class="strip-slot" data-local-page={page.localIndex + 1} data-chapter={page.chapterId} style={getCachedAspect(page.url) != null ? `--aspect:${getCachedAspect(page.url)}` : undefined}>
+    {#if isLoaded && src}
+      <img
+        {src}
+        alt="{page.chapterName} – Page {page.localIndex + 1}"
+        data-local-page={page.localIndex + 1}
+        data-chapter={page.chapterId}
+        data-total={page.total}
+        class="{imgCls}{settingsState.settings.pageGap ? ' strip-gap' : ''}"
+        loading="lazy"
+        decoding="async"
+        draggable="false"
+        onload={(e) => {
+          const img  = e.currentTarget as HTMLImageElement;
+          const slot = img.closest<HTMLElement>(".strip-slot");
+          if (slot && img.naturalWidth > 0) {
+            const aspect = img.naturalWidth / img.naturalHeight;
+            slot.style.setProperty("--aspect", String(aspect));
+            aspectMap.set(gi, aspect);
+          }
+        }}
+      />
+    {:else}
+      <div class="strip-placeholder" aria-hidden="true">{@render skeleton()}</div>
+    {/if}
+  </div>
+{/each}
+<div style="height:1px;flex-shrink:0"></div>
+
+{#snippet skeleton()}
+  <svg class="panel-skeleton" viewBox="0 0 100 150" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
+    <rect class="ps-r ps-r1" x="2"  y="2"  width="62" height="88" rx="1"/>
+    <rect class="ps-r ps-r2" x="68" y="2"  width="30" height="42" rx="1"/>
+    <rect class="ps-r ps-r3" x="68" y="48" width="30" height="42" rx="1"/>
+    <rect class="ps-r ps-r4" x="2"  y="94" width="44" height="54" rx="1"/>
+    <rect class="ps-r ps-r5" x="50" y="94" width="48" height="54" rx="1"/>
+  </svg>
+{/snippet}
+
+<style>
+  .strip-slot { width: 100%; display: flex; flex-direction: column; align-items: center; }
+
+  .strip-placeholder {
+    width: var(--effective-width, 100%);
+    max-width: var(--effective-width, 100%);
+    aspect-ratio: var(--aspect, 0.667);
+    border-radius: var(--radius-sm);
+    display: flex;
+    align-items: stretch;
+  }
+
+  .panel-skeleton { width: 100%; height: 100%; }
+  .panel-skeleton :global(.ps-r) {
+    stroke: var(--border-strong); stroke-width: 0.8; fill: none;
+    stroke-dasharray: 400; stroke-dashoffset: 400;
+    animation: ps-shimmer 2s ease-in-out infinite;
+  }
+  .panel-skeleton :global(.ps-r1) { animation-delay: 0s; }
+  .panel-skeleton :global(.ps-r2) { animation-delay: 0.15s; }
+  .panel-skeleton :global(.ps-r3) { animation-delay: 0.3s; }
+  .panel-skeleton :global(.ps-r4) { animation-delay: 0.1s; }
+  .panel-skeleton :global(.ps-r5) { animation-delay: 0.25s; }
+
+  @keyframes ps-shimmer {
+    0%   { stroke-dashoffset: 400;  opacity: 0.25; }
+    40%  { stroke-dashoffset: 0;    opacity: 0.55; }
+    70%  { stroke-dashoffset: 0;    opacity: 0.55; }
+    100% { stroke-dashoffset: -400; opacity: 0.25; }
+  }
+
+  .midscroll-bar {
+    position: fixed; top: 50%; transform: translateY(-50%);
+    z-index: 200; display: flex; flex-direction: column; align-items: center;
+    gap: 8px; padding: 10px 6px;
+    background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
+    border: 1px solid var(--border-base); border-radius: 10px;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.45);
+    pointer-events: auto; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
+  }
+  .midscroll-bar-right { right: 8px; }
+  .midscroll-bar-left  { left: 8px; }
+
+  .midscroll-segments   { display: flex; flex-direction: column; align-items: center; gap: 3px; }
+  .midscroll-origin-dot { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--accent-fg); opacity: 0.6; flex-shrink: 0; margin: 2px 0; }
+  .midscroll-seg        { width: 4px; height: 14px; border-radius: 2px; background: var(--border-strong); transition: background 0.06s ease; flex-shrink: 0; }
+  .midscroll-seg-lit    { background: var(--accent-fg); }
+  .midscroll-stop       { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast); flex-shrink: 0; }
+  .midscroll-stop:hover { color: var(--text-primary); background: var(--bg-overlay); border-color: var(--border-strong); }
+</style>
@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { readerState } from "$lib/state/reader.svelte";
+
+  interface Props {
+    imgCls:    string;
+    src:       string | null;
+    fadingOut: boolean;
+    isFade:    boolean;
+  }
+
+  const { imgCls, src, fadingOut, isFade }: Props = $props();
+</script>
+
+<div
+  class="inspect-wrap"
+  style="transform:scale({readerState.inspectScale}) translate({readerState.inspectPanX / readerState.inspectScale}px,{readerState.inspectPanY / readerState.inspectScale}px)"
+>
+  {#if src}
+    <img
+      {src}
+      alt="Page {readerState.pageNumber}"
+      class={imgCls}
+      decoding="async"
+      draggable="false"
+      style={isFade ? `opacity:${fadingOut ? 0 : 1};transition:opacity 0.1s ease` : undefined}
+    />
+  {:else}
+    <div class="page-loader page-loader-single" aria-hidden="true">{@render skeleton()}</div>
+  {/if}
+</div>
+
+{#snippet skeleton()}
+  <svg class="panel-skeleton" viewBox="0 0 100 150" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
+    <rect class="ps-r ps-r1" x="2"  y="2"  width="62" height="88" rx="1"/>
+    <rect class="ps-r ps-r2" x="68" y="2"  width="30" height="42" rx="1"/>
+    <rect class="ps-r ps-r3" x="68" y="48" width="30" height="42" rx="1"/>
+    <rect class="ps-r ps-r4" x="2"  y="94" width="44" height="54" rx="1"/>
+    <rect class="ps-r ps-r5" x="50" y="94" width="48" height="54" rx="1"/>
+  </svg>
+{/snippet}
+
+<style>
+  .inspect-wrap { display: flex; align-items: center; justify-content: center; transform-origin: center center; will-change: transform; }
+
+  .page-loader { border-radius: var(--radius-sm); display: flex; align-items: stretch; }
+  .page-loader-single {
+    width: min(100%, var(--effective-width, 100%));
+    max-width: var(--effective-width, 100%);
+    max-height: calc(var(--visual-vh, 100vh) - 80px);
+    aspect-ratio: 2 / 3;
+  }
+
+  .panel-skeleton { width: 100%; height: 100%; }
+  .panel-skeleton :global(.ps-r) {
+    stroke: var(--border-strong); stroke-width: 0.8; fill: none;
+    stroke-dasharray: 400; stroke-dashoffset: 400;
+    animation: ps-shimmer 2s ease-in-out infinite;
+  }
+  .panel-skeleton :global(.ps-r1) { animation-delay: 0s; }
+  .panel-skeleton :global(.ps-r2) { animation-delay: 0.15s; }
+  .panel-skeleton :global(.ps-r3) { animation-delay: 0.3s; }
+  .panel-skeleton :global(.ps-r4) { animation-delay: 0.1s; }
+  .panel-skeleton :global(.ps-r5) { animation-delay: 0.25s; }
+
+  @keyframes ps-shimmer {
+    0%   { stroke-dashoffset: 400;  opacity: 0.25; }
+    40%  { stroke-dashoffset: 0;    opacity: 0.55; }
+    70%  { stroke-dashoffset: 0;    opacity: 0.55; }
+    100% { stroke-dashoffset: -400; opacity: 0.25; }
+  }
+</style>
@@ -4,9 +4,8 @@
  import { cache, CACHE_KEYS, CACHE_GROUPS } from '$lib/core/cache/queryCache'
  import { homeState, clearHistory } from '$lib/state/home.svelte'
  import { historyState }            from '$lib/state/history.svelte'
-  import { setActiveManga, openReader, setPreviewManga } from '$lib/state/series.svelte'
+  import { setActiveManga, openReaderForChapter, setPreviewManga } from '$lib/state/series.svelte'
  import { addToast }           from '$lib/state/notifications.svelte'
-  import { buildChapterList }   from '$lib/components/series/lib/chapterList'
  import { groupByDay }                                from './lib/recentHistory'
  import { fetchedAtMs, parseServerTimestamp, groupUpdatesByDay } from './lib/recentUpdates'
  import RecentToolbar  from './RecentToolbar.svelte'
@@ -168,13 +167,11 @@
    const manga = mangaStub(item)
    try {
      const chapters = await getAdapter().getChapters(String(item.mangaId))
-      const sorted   = [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
-      const list     = buildChapterList(sorted, {})
-      const target   = list.find(ch => ch.id === item.id)
-      if (target) { setActiveManga(manga); openReader(target, list) }
-      else          setActiveManga(manga)
+      const target   = chapters.find(ch => ch.id === item.id)
+      if (target) openReaderForChapter(target, manga)
+      else        setPreviewManga(manga)
    } catch {
-      setActiveManga(manga)
+      setPreviewManga(manga)
      addToast({ kind: 'error', title: "Couldn't open chapter", body: 'Opened the series instead.' })
    } finally {
      openingId = null
@@ -65,15 +65,13 @@

  {:else if viewMode === 'grid'}
    {#each sortedChapters as ch, i}
-      {@const inProgress     = !ch.read && (ch.lastPageRead ?? 0) > 0}
      {@const isGridSelected = selectedIds.has(ch.id)}
      <button
        class="grid-cell"
        class:read={ch.read}
-        class:in-progress={inProgress}
        class:grid-selected={isGridSelected}
        use:chapterLongPress={[ch, i]}
-        onclick={(e) => hasSelection ? onToggleSelect(ch.id, e) : onOpen(ch, inProgress)}
+        onclick={(e) => hasSelection ? onToggleSelect(ch.id, e) : onOpen(ch, !ch.read && (ch.lastPageRead ?? 0) > 0)}
        oncontextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: i } }}
        title={ch.name}
      >
@@ -185,7 +183,6 @@
  .grid-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--bg-raised); border: 1px solid var(--border-dim); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); cursor: pointer; position: relative; transition: background var(--t-fast), border-color var(--t-fast); }
  .grid-cell:hover { background: var(--bg-overlay); border-color: var(--border-strong); }
  .grid-cell.read { background: var(--color-read); color: var(--text-faint); border-color: transparent; }
-  .grid-cell.in-progress { border-color: var(--accent-dim); color: var(--accent-fg); }
  .grid-cell-num { font-size: 10px; }
  .grid-cell-dot { position: absolute; bottom: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); }
  .grid-cell-dl  { position: absolute; top: 3px; left: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-fg); }
@@ -6,7 +6,6 @@
  } from 'phosphor-svelte'
  import type { Chapter, Category } from '$lib/types'
  import type { ChapterSortMode, ChapterSortDir } from './lib/chapterList'
-  import { updateSettings } from '$lib/state/settings.svelte'

  interface ContinueChapter {
    chapter:    Chapter
@@ -52,6 +51,8 @@
    onSetScanlatorBlacklist: (v: string[]) => void
    onSetScanlatorForce:     (v: boolean) => void
    onOpenFolder:            () => void
+    onSortModeChange:        (v: ChapterSortMode) => void
+    onSortDirChange:         (v: ChapterSortDir) => void
  }

  let {
@@ -64,7 +65,7 @@
    onMarkSelectedRead, onClearSelection, onEnqueueNext, onEnqueueMultiple,
    onDeleteAll, onRefresh, onToggleCategory, onCreateCategory,
    onSetScanlatorFilter, onSetScanlatorBlacklist, onSetScanlatorForce,
-    onOpenFolder,
+    onOpenFolder, onSortModeChange, onSortDirChange,
  }: Props = $props()

  let sortMenuOpen:    boolean = $state(false)
@@ -166,11 +167,11 @@
              <button
                class="sort-option"
                class:active={sortMode === val}
-                onclick={() => { updateSettings({ chapterSortMode: val as ChapterSortMode }); onPageChange(1); sortMenuOpen = false }}
+                onclick={() => { onSortModeChange(val as ChapterSortMode); onPageChange(1); sortMenuOpen = false }}
              >{label}</button>
            {/each}
            <div class="sort-divider"></div>
-            <button class="sort-option" onclick={() => { updateSettings({ chapterSortDir: sortDir === 'desc' ? 'asc' : 'desc' }); onPageChange(1); sortMenuOpen = false }}>
+            <button class="sort-option" onclick={() => { onSortDirChange(sortDir === 'desc' ? 'asc' : 'desc'); onPageChange(1); sortMenuOpen = false }}>
              {sortDir === 'desc' ? '↑ Ascending' : '↓ Descending'}
            </button>
          </div>
@@ -10,19 +10,17 @@
  } from 'phosphor-svelte'
  import type { MenuEntry }            from '$lib/components/shared/ui/ContextMenu.svelte'
  import { getManga, getMangaList }    from '$lib/request-manager/manga'
-  import { getChapters, fetchChapters, markChapterRead, markChaptersRead, deleteDownloadedChapters } from '$lib/request-manager/chapters'
+  import { markChapterRead, markChaptersRead, deleteDownloadedChapters, fetchChapters } from '$lib/request-manager/chapters'
  import { downloadStore }             from '$lib/state/downloads.svelte'
  import { getCategories, updateMangaCategories, createCategory as createCategoryReq, updateManga } from '$lib/request-manager/manga'
  import { saveScroll, getScroll }     from '$lib/state/app.svelte'
-  import { seriesState, openReader, addBookmark,
-           acknowledgeUpdate, clearMarkersForManga }  from '$lib/state/series.svelte'
-  import { DEFAULT_MANGA_PREFS }       from '$lib/types/settings'
+  import { seriesState, openReaderForChapter, acknowledgeUpdate, addBookmark, clearMarkersForManga } from '$lib/state/series.svelte'
+  import { DEFAULT_MANGA_PREFS }       from '$lib/state/series.svelte'
  import type { MangaPrefs }           from '$lib/types/settings'
  import { addToast }                  from '$lib/state/notifications.svelte'
  import { trackingState }             from '$lib/state/tracking.svelte'
  import { autoLinkLibrary }           from '$lib/core/cover/autoLink'
-  import { buildChapterList }          from '$lib/components/series/lib/chapterList'
-  import { getPref, setPref }          from '$lib/components/series/lib/mangaPrefs'
+  import { getPref, setPref }          from '$lib/state/series.svelte'
  import { openMangaFolder }           from '$lib/core/filesystem'
  import type { Manga, Chapter, Category } from '$lib/types'
  import AutomationPanel  from '$lib/components/series/panels/AutomationPanel.svelte'
@@ -37,15 +35,11 @@

  const CHAPTERS_PER_PAGE = 25
  const MANGA_TTL_MS      = 5 * 60 * 1000
-  const CHAPTER_TTL_MS    = 2 * 60 * 1000

-  const mangaCache:   Map<number, { data: Manga;     fetchedAt: number }> = new Map()
-  const chapterCache: Map<number, { data: Chapter[]; fetchedAt: number }> = new Map()
+  const mangaCache: Map<number, { data: Manga; fetchedAt: number }> = new Map()

  let manga:           Manga | null = $state(null)
-  let chapters:        Chapter[]    = $state([])
  let loadingManga:    boolean      = $state(false)
-  let loadingChapters: boolean      = $state(true)
  let enqueueing:      Set<number>  = $state(new Set())
  let togglingLibrary: boolean      = $state(false)
  let chapterPage:     number       = $state(1)
@@ -66,40 +60,26 @@
  let catsLoading:     boolean      = $state(false)
  let chapterListEl:   HTMLDivElement | null = $state(null)

-  let mangaAbort:    AbortController | null = null
-  let chapterAbort:  AbortController | null = null
-  let loadingFor:    number | null = null
-  let prevChapterIds = new Set<number>()
-  let prevMangaId:   number | null = null
+  let mangaAbort:  AbortController | null = null
+  let prevMangaId: number | null = null

-  const get = <K extends keyof MangaPrefs>(key: K) =>
-    mangaId ? getPref(mangaId, key) : DEFAULT_MANGA_PREFS[key]
-  const set = <K extends keyof MangaPrefs>(key: K, value: MangaPrefs[K]) => {
-    if (mangaId) setPref(mangaId, key, value)
-  }
+  const get = <K extends keyof MangaPrefs>(key: K) => getPref(mangaId, key)
+  const set = <K extends keyof MangaPrefs>(key: K, value: MangaPrefs[K]) => setPref(mangaId, key, value)

-  const hasSelection       = $derived(selectedIds.size > 0)
-  const sortDir            = $derived(seriesState.settings.chapterSortDir)
-  const sortMode           = $derived(seriesState.settings.chapterSortMode ?? 'source')
-  const scanlatorFilter    = $derived((get('scanlatorFilter')    ?? []) as string[])
-  const scanlatorBlacklist = $derived((get('scanlatorBlacklist') ?? []) as string[])
-  const scanlatorForce     = $derived((get('scanlatorForce')     ?? false) as boolean)
-
-  const currentPrefs = $derived({
-    sortMode,
-    sortDir,
-    preferredScanlator:  get('preferredScanlator') as string,
-    scanlatorFilter:     scanlatorFilter as string[],
-    scanlatorBlacklist:  scanlatorBlacklist as string[],
-    scanlatorForce:      scanlatorForce as boolean,
-  })
+  const chapters        = $derived(seriesState.chaptersFor(mangaId))
+  const loadingChapters = $derived(seriesState.isLoadingChapters(mangaId))
+  const sortedChapters  = $derived(seriesState.activeChapterList)
+  const hasSelection    = $derived(selectedIds.size > 0)

  const availableScanlators = $derived(
    [...new Set(chapters.map(c => c.scanlator).filter((s): s is string => !!s?.trim()))]
      .sort((a, b) => a.localeCompare(b))
  )

-  const sortedChapters  = $derived(buildChapterList(chapters, currentPrefs))
+  const scanlatorFilter    = $derived(get('scanlatorFilter')    as string[])
+  const scanlatorBlacklist = $derived(get('scanlatorBlacklist') as string[])
+  const scanlatorForce     = $derived(get('scanlatorForce')     as boolean)
+
  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(sortedChapters.filter(c => c.read).length)
@@ -111,13 +91,10 @@
    if (!sortedChapters.length) return null
    const asc      = [...sortedChapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
    const anyRead  = asc.some(c => c.read)
-    const bookmark = mangaId
-      ? seriesState.bookmarks.find(b => b.mangaId === mangaId)
-      : null
+    const bookmark = seriesState.bookmarks.find(b => b.mangaId === mangaId)
    const bookmarkedCh = bookmark ? asc.find(c => c.id === bookmark.chapterId) : null
-    if (bookmarkedCh && !bookmarkedCh.read) {
+    if (bookmarkedCh && !bookmarkedCh.read)
      return { chapter: bookmarkedCh, type: (anyRead ? 'continue' : 'start') as const, resumePage: bookmark!.pageNumber }
-    }
    const inProgress  = asc.find(c => !c.read && (c.lastPageRead ?? 0) > 0)
    const firstUnread = asc.find(c => !c.read)
    const target      = inProgress ?? firstUnread
@@ -146,17 +123,6 @@
    selectedIds = next
  }

-  function applyChapters(nodes: Chapter[]) {
-    if (get('autoDownload') && prevChapterIds.size > 0) {
-      const filtered    = buildChapterList(nodes, currentPrefs)
-      const newChapters = filtered.filter(c => !prevChapterIds.has(c.id) && !c.downloaded)
-      if (newChapters.length) enqueueMultiple(newChapters.map(c => c.id))
-    }
-    prevChapterIds = new Set(nodes.map(c => c.id))
-    chapters = nodes
-    if (mangaId && nodes.length > 0) checkAndMarkCompleted(mangaId, nodes)
-  }
-
  function loadCategories(id: number) {
    catsLoading = true
    getCategories()
@@ -169,96 +135,59 @@
  }

  async function checkAndMarkCompleted(id: number, chaps: Chapter[]) {
-    if (chaps.length && manga?.status !== 'ONGOING') {
-      const allRead   = chaps.every(c => c.read)
-      const completed = allCategories.find(c => c.name === 'Completed')
-      if (completed) {
-        const inCompleted = mangaCategories.some(c => c.id === completed.id)
-        if (allRead && !inCompleted)      mangaCategories = [...mangaCategories, completed]
-        else if (!allRead && inCompleted) mangaCategories = mangaCategories.filter(c => c.id !== completed.id)
-      }
-    }
+    if (!chaps.length || manga?.status === 'ONGOING') return
+    const allRead   = chaps.every(c => c.read)
+    const completed = allCategories.find(c => c.name === 'Completed')
+    if (!completed) return
+    const inCompleted = mangaCategories.some(c => c.id === completed.id)
+    if (allRead && !inCompleted)      mangaCategories = [...mangaCategories, completed]
+    else if (!allRead && inCompleted) mangaCategories = mangaCategories.filter(c => c.id !== completed.id)
  }

  function loadMangaData(id: number) {
    mangaAbort?.abort()
    const ctrl = new AbortController()
-    mangaAbort = ctrl; loadingFor = id
+    mangaAbort = ctrl
    const cached = mangaCache.get(id)
    if (cached) {
-      manga = cached.data; loadingManga = false
+      manga = cached.data
+      loadingManga = false
+      seriesState.setActiveManga(cached.data)
      if (Date.now() - cached.fetchedAt < MANGA_TTL_MS) return
-      getManga(id, ctrl.signal).then(m => {
-        if (ctrl.signal.aborted || loadingFor !== id) return
-        mangaCache.set(id, { data: m, fetchedAt: Date.now() })
-        manga = m
-      }).catch(() => {})
+      // stale-while-revalidate: update cache + store in background
+      getManga(id, ctrl.signal)
+        .then(m => {
+          if (ctrl.signal.aborted) return
+          mangaCache.set(id, { data: m, fetchedAt: Date.now() })
+          manga = m
+          seriesState.setActiveManga(m)
+        })
+        .catch(() => {})
      return
    }
    loadingManga = true
-    getManga(id, ctrl.signal).then(m => {
-      if (ctrl.signal.aborted || loadingFor !== id) return
-      mangaCache.set(id, { data: m, fetchedAt: Date.now() })
-      manga = m
-    }).catch(() => {}).finally(() => { if (!ctrl.signal.aborted && loadingFor === id) loadingManga = false })
-  }
-
-  function loadChaptersData(id: number) {
-    chapterAbort?.abort()
-    const ctrl = new AbortController()
-    chapterAbort = ctrl
-    const cached = chapterCache.get(id)
-    if (cached) {
-      applyChapters(cached.data); loadingChapters = false
-      if (Date.now() - cached.fetchedAt < CHAPTER_TTL_MS) return
-      fetchChapters(id, ctrl.signal)
-        .then(() => getChapters(id, ctrl.signal))
-        .then(nodes => {
-          if (ctrl.signal.aborted || loadingFor !== id) return
-          chapterCache.set(id, { data: nodes, fetchedAt: Date.now() })
-          applyChapters(nodes)
-        }).catch(() => {})
-      return
-    }
-    chapters = []; loadingChapters = true
-    getChapters(id, ctrl.signal).then(nodes => {
-      if (ctrl.signal.aborted || loadingFor !== id) return
-      applyChapters(nodes); loadingChapters = false
-      return fetchChapters(id, ctrl.signal)
-        .then(() => getChapters(id, ctrl.signal))
-        .then(fresh => {
-          if (ctrl.signal.aborted || loadingFor !== id) return
-          chapterCache.set(id, { data: fresh, fetchedAt: Date.now() })
-          applyChapters(fresh)
-        })
-    }).catch(() => { if (!ctrl.signal.aborted) loadingChapters = false })
-  }
-
-  async function syncTrackersIntoChapters(id: number, chaps: Chapter[]) {
-    if (!seriesState.settings.trackerSyncBack) return
-    const records = trackingState.recordsFor(id)
-    if (!records.length) return
-    for (const record of records) {
-      try {
-        const { markedIds } = await trackingState.syncFromRemote(id, record, chaps, currentPrefs)
-        if (markedIds.length > 0) {
-          const idSet = new Set(markedIds)
-          chapters = chapters.map(c => idSet.has(c.id) ? { ...c, read: true } : c)
-          chapterCache.set(id, { data: chapters, fetchedAt: Date.now() })
-        }
-      } catch {}
-    }
+    getManga(id, ctrl.signal)
+      .then(m => {
+        if (ctrl.signal.aborted) return
+        mangaCache.set(id, { data: m, fetchedAt: Date.now() })
+        manga = m
+        seriesState.setActiveManga(m)
+      })
+      .catch(() => {})
+      .finally(() => { if (!ctrl.signal.aborted) loadingManga = false })
  }

  $effect(() => {
    const id             = mangaId
    const shouldAutoLink = seriesState.settings.autoLinkOnOpen
-    if (id) untrack(() => {
+    untrack(() => {
      acknowledgeUpdate(id)
      loadMangaData(id)
-      loadChaptersData(id)
+      seriesState.loadChapters(id).then(() => {
+        checkAndMarkCompleted(id, seriesState.chaptersFor(id))
+        trackingState.loadForManga(id).then(() => syncTrackersIntoChapters(id))
+      })
      loadCategories(id)
-      trackingState.loadForManga(id).then(() => syncTrackersIntoChapters(id, chapters))
      if (shouldAutoLink) {
        if (allMangaForLink.length) {
          autoLinkLibrary(manga, allMangaForLink)
@@ -266,10 +195,7 @@
        } else {
          loadingLinkList = true
          getMangaList()
-            .then(list => {
-              allMangaForLink = list
-              return autoLinkLibrary(manga, list)
-            })
+            .then(list => { allMangaForLink = list; return autoLinkLibrary(manga, list) })
            .then(n => { if (n > 0) addToast({ kind: 'success', title: 'Series linked', body: `${n} new link${n === 1 ? '' : 's'} found` }) })
            .catch(console.error)
            .finally(() => { loadingLinkList = false })
@@ -278,13 +204,9 @@
    })
  })

-  let prevChapterId: number | null = null
  $effect(() => {
-    const wasOpen = prevChapterId !== null
-    prevChapterId = seriesState.activeChapter?.id ?? null
-    if (wasOpen && !seriesState.activeChapter) {
-      untrack(() => { reloadChapters(mangaId) })
-    }
+    const wasOpen = seriesState.activeChapter !== null
+    if (!wasOpen) untrack(() => seriesState.loadChapters(mangaId, { force: true }))
  })

  $effect(() => {
@@ -292,12 +214,33 @@
    if (id === prevMangaId) return
    if (chapterListEl && prevMangaId !== null) saveScroll(`series:${prevMangaId}`, chapterListEl.scrollTop)
    prevMangaId = id
-    if (chapterListEl && id !== null) {
-      chapterListEl.scrollTo({ top: getScroll(`series:${id}`) })
-    }
+    if (chapterListEl) chapterListEl.scrollTo({ top: getScroll(`series:${id}`) })
  })

-  $effect(() => () => { mangaAbort?.abort(); chapterAbort?.abort() })
+  $effect(() => () => { mangaAbort?.abort() })
+
+  async function syncTrackersIntoChapters(id: number) {
+    if (!seriesState.settings.trackerSyncBack) return
+    const records = trackingState.recordsFor(id)
+    if (!records.length) return
+    const prefs = {
+      sortMode:           get('sortMode'),
+      sortDir:            get('sortDir'),
+      preferredScanlator: get('preferredScanlator') as string,
+      scanlatorFilter:    scanlatorFilter,
+      scanlatorBlacklist: scanlatorBlacklist,
+      scanlatorForce:     scanlatorForce,
+    }
+    for (const record of records) {
+      try {
+        const { markedIds } = await trackingState.syncFromRemote(id, record, seriesState.chaptersFor(id), prefs)
+        if (markedIds.length > 0) {
+          const idSet = new Set(markedIds)
+          seriesState.patchChapters(id, chaps => chaps.map(c => idSet.has(c.id) ? { ...c, read: true } : c))
+        }
+      } catch {}
+    }
+  }

  async function toggleLibrary() {
    if (!manga) return
@@ -305,23 +248,18 @@
    const next = !manga.inLibrary
    await updateManga(manga.id, { inLibrary: next }).catch(console.error)
    manga = { ...manga, inLibrary: next }
-    if (mangaCache.has(manga.id)) { const e = mangaCache.get(manga.id)!; mangaCache.set(manga.id, { ...e, data: manga }) }
+    seriesState.setActiveManga(manga)
+    if (mangaCache.has(manga.id)) mangaCache.set(manga.id, { data: manga, fetchedAt: mangaCache.get(manga.id)!.fetchedAt })
    togglingLibrary = false
  }

-  async function reloadChapters(id: number) {
-    const nodes = await getChapters(id)
-    chapterCache.set(id, { data: nodes, fetchedAt: Date.now() })
-    applyChapters(nodes)
-  }
-
  async function enqueue(ch: Chapter, e: MouseEvent) {
    e.stopPropagation()
    enqueueing = new Set(enqueueing).add(ch.id)
    const allowed = await downloadStore.enqueue(ch.id)
    if (allowed) addToast({ kind: 'download', title: 'Download queued', body: ch.name })
    enqueueing.delete(ch.id); enqueueing = new Set(enqueueing)
-    reloadChapters(mangaId)
+    seriesState.loadChapters(mangaId, { force: true })
  }

  async function enqueueMultiple(chapterIds: number[]) {
@@ -331,26 +269,28 @@
      if (!allowed) return
    }
    addToast({ kind: 'download', title: 'Download queued', body: `${chapterIds.length} chapter${chapterIds.length !== 1 ? 's' : ''} added` })
-    reloadChapters(mangaId)
+    seriesState.loadChapters(mangaId, { force: true })
  }

  async function markRead(chapterId: number, isRead: boolean) {
    await markChapterRead(chapterId, isRead).catch(console.error)
-    chapters = chapters.map(c => c.id === chapterId ? { ...c, read: isRead } : c)
-    chapterCache.set(mangaId, { data: chapters, fetchedAt: Date.now() })
-    checkAndMarkCompleted(mangaId, chapters)
-    const ch = chapters.find(c => c.id === chapterId)
+    seriesState.patchChapters(mangaId, chaps => chaps.map(c => c.id === chapterId ? { ...c, read: isRead } : c))
+    checkAndMarkCompleted(mangaId, seriesState.chaptersFor(mangaId))
+    const ch = seriesState.chaptersFor(mangaId).find(c => c.id === chapterId)
+    const currentPrefs = {
+      sortMode: get('sortMode'), sortDir: get('sortDir'),
+      preferredScanlator: get('preferredScanlator') as string,
+      scanlatorFilter, scanlatorBlacklist, scanlatorForce,
+    }
    if (ch) {
-      if (isRead) await trackingState.updateFromRead(mangaId, ch, chapters, currentPrefs)
-      else        await trackingState.updateFromUnread(mangaId, chapters, currentPrefs)
+      if (isRead) await trackingState.updateFromRead(mangaId, ch, seriesState.chaptersFor(mangaId), currentPrefs)
+      else        await trackingState.updateFromUnread(mangaId, seriesState.chaptersFor(mangaId), currentPrefs)
    }
    if (isRead) {
-      if (get('deleteOnRead')) {
-        if (ch?.downloaded) {
-          const delayMs = (get('deleteDelayHours') as number) * 60 * 60 * 1000
-          if (delayMs === 0) deleteDownloaded(chapterId)
-          else setTimeout(() => deleteDownloaded(chapterId), delayMs)
-        }
+      if (get('deleteOnRead') && ch?.downloaded) {
+        const delayMs = (get('deleteDelayHours') as number) * 3_600_000
+        const doDelete = () => deleteDownloaded(chapterId)
+        if (delayMs === 0) doDelete(); else setTimeout(doDelete, delayMs)
      }
      const ahead = get('downloadAhead') as number
      if (ahead > 0) {
@@ -367,24 +307,27 @@
    if (!ids.length) return
    await markChaptersRead(ids, isRead).catch(console.error)
    const idSet = new Set(ids)
-    chapters = chapters.map(c => idSet.has(c.id) ? { ...c, read: isRead } : c)
-    chapterCache.set(mangaId, { data: chapters, fetchedAt: Date.now() })
-    checkAndMarkCompleted(mangaId, chapters)
+    seriesState.patchChapters(mangaId, chaps => chaps.map(c => idSet.has(c.id) ? { ...c, read: isRead } : c))
+    checkAndMarkCompleted(mangaId, seriesState.chaptersFor(mangaId))
+    const currentPrefs = {
+      sortMode: get('sortMode'), sortDir: get('sortDir'),
+      preferredScanlator: get('preferredScanlator') as string,
+      scanlatorFilter, scanlatorBlacklist, scanlatorForce,
+    }
    if (isRead) {
-      const ascending   = [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
-      const lastInBatch = ascending.filter(c => idSet.has(c.id)).at(-1)
-      if (lastInBatch) await trackingState.updateFromRead(mangaId, lastInBatch, chapters, currentPrefs)
+      const chaps    = seriesState.chaptersFor(mangaId)
+      const lastRead = [...chaps].sort((a, b) => a.sourceOrder - b.sourceOrder).filter(c => idSet.has(c.id)).at(-1)
+      if (lastRead) await trackingState.updateFromRead(mangaId, lastRead, chaps, currentPrefs)
    } else {
-      await trackingState.updateFromUnread(mangaId, chapters, currentPrefs)
+      await trackingState.updateFromUnread(mangaId, seriesState.chaptersFor(mangaId), currentPrefs)
    }
    if (isRead && get('deleteOnRead')) {
-      const toDelete = ids.filter(id => chapters.find(c => c.id === id)?.downloaded)
+      const toDelete = ids.filter(id => seriesState.chaptersFor(mangaId).find(c => c.id === id)?.downloaded)
      if (toDelete.length) {
-        const delayMs = (get('deleteDelayHours') as number) * 60 * 60 * 1000
+        const delayMs = (get('deleteDelayHours') as number) * 3_600_000
        const doDelete = async () => {
          await deleteDownloadedChapters(toDelete).catch(console.error)
-          chapters = chapters.map(c => toDelete.includes(c.id) ? { ...c, downloaded: false } : c)
-          chapterCache.set(mangaId, { data: chapters, fetchedAt: Date.now() })
+          seriesState.patchChapters(mangaId, chaps => chaps.map(c => toDelete.includes(c.id) ? { ...c, downloaded: false } : c))
        }
        if (delayMs === 0) doDelete(); else setTimeout(doDelete, delayMs)
      }
@@ -392,17 +335,16 @@
  }

  async function deleteSelected() {
-    const ids = [...selectedIds].filter(id => chapters.find(c => c.id === id)?.downloaded)
+    const ids = [...selectedIds].filter(id => seriesState.chaptersFor(mangaId).find(c => c.id === id)?.downloaded)
    if (ids.length) {
      await deleteDownloadedChapters(ids).catch(console.error)
-      chapters = chapters.map(c => ids.includes(c.id) ? { ...c, downloaded: false } : c)
-      chapterCache.set(mangaId, { data: chapters, fetchedAt: Date.now() })
+      seriesState.patchChapters(mangaId, chaps => chaps.map(c => ids.includes(c.id) ? { ...c, downloaded: false } : c))
    }
    clearSelection()
  }

  async function downloadSelected() {
-    await enqueueMultiple([...selectedIds].filter(id => !chapters.find(c => c.id === id)?.downloaded))
+    await enqueueMultiple([...selectedIds].filter(id => !seriesState.chaptersFor(mangaId).find(c => c.id === id)?.downloaded))
    clearSelection()
  }

@@ -418,29 +360,30 @@

  async function deleteDownloaded(chapterId: number) {
    await deleteDownloadedChapters([chapterId]).catch(console.error)
-    chapters = chapters.map(c => c.id === chapterId ? { ...c, downloaded: false } : c)
-    chapterCache.set(mangaId, { data: chapters, fetchedAt: Date.now() })
+    seriesState.patchChapters(mangaId, chaps => chaps.map(c => c.id === chapterId ? { ...c, downloaded: false } : c))
  }

  async function deleteAllDownloads() {
-    const ids = chapters.filter(c => c.downloaded).map(c => c.id)
+    const ids = seriesState.chaptersFor(mangaId).filter(c => c.downloaded).map(c => c.id)
    if (!ids.length) return
    deletingAll = true
    await deleteDownloadedChapters(ids).catch(console.error)
-    chapters = chapters.map(c => ({ ...c, downloaded: false }))
-    chapterCache.set(mangaId, { data: chapters, fetchedAt: Date.now() })
+    seriesState.patchChapters(mangaId, chaps => chaps.map(c => ({ ...c, downloaded: false })))
    deletingAll = false
  }

  async function refreshChapters() {
    if (refreshing) return
    refreshing = true
-    chapterCache.delete(mangaId)
+    seriesState.invalidateChapters(mangaId)
    fetchChapters(mangaId)
-      .then(() => reloadChapters(mangaId))
-      .then(() => addToast({ kind: 'success', title: 'Chapters refreshed', body: `${chapters.length} chapter${chapters.length !== 1 ? 's' : ''} available` }))
+      .then(() => seriesState.loadChapters(mangaId, { force: true }))
+      .then(() => {
+        const count = seriesState.chaptersFor(mangaId).length
+        addToast({ kind: 'success', title: 'Chapters refreshed', body: `${count} chapter${count !== 1 ? 's' : ''} available` })
+      })
      .catch(e => addToast({ kind: 'error', title: 'Refresh failed', body: e?.message }))
-      .finally(() => refreshing = false)
+      .finally(() => { refreshing = false })
  }

  function buildCtxItems(ch: Chapter, idx: number): MenuEntry[] {
@@ -472,43 +415,24 @@
  }

  function openReaderWithAhead(ch: Chapter, inProgress: boolean) {
-    const ascList    = [...sortedChapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
-    const resumePage = inProgress ? ch.lastPageRead ?? null : null
-    const ahead      = get('downloadAhead') as number
-    if (ahead > 0) {
-      const idx = ascList.indexOf(ch)
-      if (idx >= 0) {
-        const toQueue = ascList.slice(idx + 1, idx + 1 + ahead).filter(c => !c.downloaded).map(c => c.id)
-        if (toQueue.length) enqueueMultiple(toQueue)
-      }
-    }
-    if (inProgress && resumePage && resumePage > 1) {
+    if (inProgress && ch.lastPageRead && ch.lastPageRead > 1) {
      const existing = seriesState.bookmarks.find(b => b.chapterId === ch.id)
-      if (!existing || existing.pageNumber < resumePage) {
+      if (!existing || existing.pageNumber < ch.lastPageRead) {
        addBookmark({
          mangaId,
          mangaTitle:   manga!.title,
          thumbnailUrl: manga!.thumbnailUrl,
          chapterId:    ch.id,
          chapterName:  ch.name,
-          pageNumber:   resumePage,
+          pageNumber:   ch.lastPageRead,
        })
      }
    }
-    openReader(ch, ascList, manga)
+    openReaderForChapter(ch, manga)
  }

  function handleContinue(cc: typeof continueChapter) {
    if (!cc) return
-    const ascList = [...sortedChapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
-    const ahead   = get('downloadAhead') as number
-    if (ahead > 0) {
-      const idx = ascList.indexOf(cc.chapter)
-      if (idx >= 0) {
-        const toQueue = ascList.slice(idx + 1, idx + 1 + ahead).filter(c => !c.downloaded).map(c => c.id)
-        if (toQueue.length) enqueueMultiple(toQueue)
-      }
-    }
    if (cc.type === 'continue' && cc.resumePage && cc.resumePage > 1) {
      const existing = seriesState.bookmarks.find(b => b.chapterId === cc.chapter.id)
      if (!existing || existing.pageNumber < cc.resumePage) {
@@ -522,7 +446,7 @@
        })
      }
    }
-    openReader(cc.chapter, ascList, manga)
+    openReaderForChapter(cc.chapter, manga)
  }

  async function openLinkPicker() {
@@ -551,7 +475,7 @@
      await updateMangaCategories(mangaId, inCat ? [] : [cat.id], inCat ? [cat.id] : [])
      if (!inCat && !manga?.inLibrary) {
        await updateManga(mangaId, { inLibrary: true }).catch(console.error)
-        if (manga) manga = { ...manga, inLibrary: true }
+        if (manga) { manga = { ...manga, inLibrary: true }; seriesState.setActiveManga(manga) }
      }
      mangaCategories = inCat ? mangaCategories.filter(c => c.id !== cat.id) : [...mangaCategories, cat]
    } catch (e) { console.error(e) }
@@ -564,7 +488,7 @@
      await updateMangaCategories(mangaId, [cat.id], [])
      if (!manga?.inLibrary) {
        await updateManga(mangaId, { inLibrary: true }).catch(console.error)
-        if (manga) manga = { ...manga, inLibrary: true }
+        if (manga) { manga = { ...manga, inLibrary: true }; seriesState.setActiveManga(manga) }
      }
      allCategories   = [...allCategories, cat]
      mangaCategories = [...mangaCategories, cat]
@@ -606,8 +530,8 @@
    <SeriesActions
      {chapters}
      {sortedChapters}
-      {sortMode}
-      {sortDir}
+      sortMode={get('sortMode')}
+      sortDir={get('sortDir')}
      {viewMode}
      {chapterPage}
      {totalPages}
@@ -640,6 +564,8 @@
      onSetScanlatorFilter={(v) => set('scanlatorFilter', v)}
      onSetScanlatorBlacklist={(v) => set('scanlatorBlacklist', v)}
      onSetScanlatorForce={(v) => set('scanlatorForce', v)}
+      onSortModeChange={(v) => set('sortMode', v)}
+      onSortDirChange={(v) => set('sortDir', v)}
      onOpenFolder={() => manga && openMangaFolder(manga)}
    />

@@ -666,7 +592,7 @@
 {#if markersOpen && manga}
  <div class="panel-overlay" role="presentation" onclick={() => markersOpen = false}>
    <div class="panel-drawer" role="presentation" onclick={(e) => e.stopPropagation()}>
-      <MarkersPanel mangaId={manga.id} {chapters} onClose={() => markersOpen = false} />
+      <MarkersPanel mangaId={manga.id} chapters={seriesState.chaptersFor(manga.id)} onClose={() => markersOpen = false} />
    </div>
  </div>
 {/if}
@@ -702,7 +628,7 @@
 {#if migrateOpen && manga}
  <MigrateModal
    {manga}
-    currentChapters={chapters}
+    currentChapters={seriesState.chaptersFor(manga.id)}
    onClose={() => migrateOpen = false}
    onMigrated={(newManga) => { goto(`/series/${newManga.id}`); migrateOpen = false }}
  />
@@ -9,7 +9,8 @@
  import { get }           from 'svelte/store'
  import Thumbnail         from '$lib/components/shared/manga/Thumbnail.svelte'
  import { resolvedCover } from '$lib/core/cover/coverResolver'
-  import type { MangaPrefs }                                    from '$lib/types/settings'
+  import type { Manga, Chapter, Category } from '$lib/types'
+
  import { seriesState }                                        from '$lib/state/series.svelte'
  import { setPreviewManga }                                    from '$lib/state/series.svelte'

@@ -59,6 +60,7 @@

  let manageOpen:     boolean = $state(false)
  let genresExpanded: boolean = $state(false)
+  let descExpanded:   boolean = $state(false)
  let altOpen:        boolean = $state(false)

  const statusLabel = $derived(
@@ -93,7 +95,7 @@

  <div class="cover-wrap">
    <button class="cover-btn" onclick={() => manga && setPreviewManga(manga)} title="Quick preview" disabled={!manga}>
-      <Thumbnail src={resolvedCover(seriesState.activeManga?.id ?? manga?.id ?? 0, seriesState.activeManga?.thumbnailUrl ?? manga?.thumbnailUrl ?? "")} alt={seriesState.activeManga?.title ?? manga?.title ?? ""} class="cover" />
+      <Thumbnail src={resolvedCover(manga?.id ?? seriesState.activeManga?.id ?? 0, manga?.thumbnailUrl ?? seriesState.activeManga?.thumbnailUrl ?? "")} alt={manga?.title ?? seriesState.activeManga?.title ?? ""} class="cover" id={manga?.id ?? seriesState.activeManga?.id} />
    </button>
  </div>

@@ -104,7 +106,7 @@
    </div>
  {:else}
    <div class="meta">
-      <p class="title">{manga?.title}</p>
+      <button class="title" onclick={() => manga && setPreviewManga(manga)} disabled={!manga}>{manga?.title}</button>

      {#if manga?.author || manga?.artist}
        <p class="byline">{[manga?.author, manga?.artist].filter(Boolean).filter((v, i, a) => a.indexOf(v) === i).join(' · ')}</p>
@@ -148,8 +150,8 @@

      {#if manga?.description}
        <div class="desc-wrap">
-          <p class="desc">{manga.description}</p>
-          <button class="expand-toggle" onclick={() => genresExpanded = !genresExpanded}>Read more</button>
+          <p class="desc" class:desc-open={descExpanded}>{manga.description}</p>
+          <button class="expand-toggle" onclick={() => descExpanded = !descExpanded}>{descExpanded ? 'Show less' : 'Read more'}</button>
        </div>
      {/if}
    </div>
@@ -277,7 +279,11 @@
    font-size: var(--text-base); font-weight: var(--weight-medium);
    color: var(--text-primary); line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
+    background: none; border: none; padding: 0; text-align: left; cursor: pointer;
+    transition: color var(--t-base);
  }
+  .title:hover:not(:disabled) { color: var(--accent-fg); }
+  .title:disabled { cursor: default; }
  .byline { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-ui); }

  .badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
@@ -328,6 +334,7 @@
    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.desc-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .expand-toggle {
    font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint);
    letter-spacing: var(--tracking-wide); align-self: flex-start; transition: color var(--t-base);
@@ -64,16 +64,4 @@ export function buildChapterList(chapters: Chapter[], prefs: ChapterDisplayPrefs

 export function chaptersAscending(chapters: Chapter[]): Chapter[] {
  return [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
-}
-
-export function buildReaderChapterList(
-  chapters: Chapter[],
-  prefs:    Pick<ChapterDisplayPrefs, 'preferredScanlator' | 'scanlatorFilter'> | undefined,
-): Chapter[] {
-  return buildChapterList(chapters, {
-    sortMode:           'source',
-    sortDir:            'asc',
-    preferredScanlator: prefs?.preferredScanlator,
-    scanlatorFilter:    prefs?.scanlatorFilter,
-  })
 }
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { X, MapPin, Trash, PencilSimple, Check }          from "phosphor-svelte";
-  import { seriesState, updateMarker, removeMarker, openReader } from "$lib/state/series.svelte";
+  import { seriesState, updateMarker, removeMarker, openReaderForChapter } from "$lib/state/series.svelte";
  import type { MarkerEntry, MarkerColor }                   from "$lib/types/history";
  import type { Chapter }                                    from "$lib/types";

@@ -58,7 +58,7 @@
    const chapter = chapters.find(c => c.id === m.chapterId);
    if (!chapter) return;
    const chaptersAsc = [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder);
-    openReader(chapter, chaptersAsc);
+    openReaderForChapter(chapter);
  }

  function formatDate(ts: number): string {
@@ -0,0 +1,540 @@
+<script lang="ts">
+  import { Bug, Lightbulb, X, ArrowSquareOut, ClipboardText, Check, CaretDown, CaretRight } from 'phosphor-svelte'
+  import { platformService } from '$lib/platform-service'
+  import { requestManager }  from '$lib/request-manager'
+  import { settingsState }   from '$lib/state/settings.svelte'
+  import type { Settings }   from '$lib/types/settings'
+  import {
+    SETTINGS_GROUPS,
+    buildEnvironmentBlock,
+    buildSettingsBlock,
+    buildIssueUrl,
+    type ReportType,
+    type BugFields,
+    type FeatureFields,
+  } from './lib/bugReport'
+
+  interface Props { onClose: () => void }
+  let { onClose }: Props = $props()
+
+  type Step = 'type' | 'compose'
+
+  let step:       Step       = $state('type')
+  let reportType: ReportType = $state('bug')
+
+  let title        = $state('')
+  let description  = $state('')
+  let steps        = $state('')
+  let expected     = $state('')
+  let actual       = $state('')
+  let problem      = $state('')
+  let solution     = $state('')
+  let alternatives = $state('')
+
+  let serverVersion = $state<string | undefined>(undefined)
+
+  $effect(() => {
+    requestManager.meta.getAboutServer()
+      .then(s => { serverVersion = s.version })
+      .catch(() => {})
+  })
+
+  let selectedKeys   = $state<Set<keyof Settings>>(new Set())
+  let expandedGroups = $state<Set<string>>(new Set(['Library', 'Reader']))
+
+  function toggleGroup(label: string) {
+    const next = new Set(expandedGroups)
+    next.has(label) ? next.delete(label) : next.add(label)
+    expandedGroups = next
+  }
+
+  function selectGroupAll(keys: (keyof Settings)[]) {
+    const next   = new Set(selectedKeys)
+    const allOn  = keys.every(k => next.has(k))
+    keys.forEach(k => allOn ? next.delete(k) : next.add(k))
+    selectedKeys = next
+  }
+
+  function toggleKey(k: keyof Settings) {
+    const next = new Set(selectedKeys)
+    next.has(k) ? next.delete(k) : next.add(k)
+    selectedKeys = next
+  }
+
+  let copied = $state(false)
+
+  function buildPreview(): string {
+    const env  = buildEnvironmentBlock(serverVersion)
+    const sets = buildSettingsBlock([...selectedKeys])
+
+    if (reportType === 'bug') {
+      return [
+        `**Description**\n${description || '(empty)'}`,
+        `**Steps to Reproduce**\n${steps || '(empty)'}`,
+        `**Expected**\n${expected || '(empty)'}`,
+        `**Actual**\n${actual || '(empty)'}`,
+        `**Environment**\n${env}`,
+        sets ? `**Relevant Settings**\n\`\`\`yaml\n${sets}\n\`\`\`` : null,
+      ].filter(Boolean).join('\n\n')
+    } else {
+      return [
+        `**Problem / Motivation**\n${problem || '(empty)'}`,
+        `**Proposed Solution**\n${solution || '(empty)'}`,
+        alternatives ? `**Alternatives**\n${alternatives}` : null,
+        `**Environment**\n${env}`,
+      ].filter(Boolean).join('\n\n')
+    }
+  }
+
+  async function handleCopy() {
+    await navigator.clipboard.writeText(buildPreview())
+    copied = true
+    setTimeout(() => (copied = false), 2000)
+  }
+
+  async function handleOpen() {
+    const settingsBlock = buildSettingsBlock([...selectedKeys])
+    const fields: BugFields | FeatureFields = reportType === 'bug'
+      ? { description, steps, expected, actual }
+      : { problem, solution, alternatives }
+    const url = buildIssueUrl(reportType, settingsBlock, title, fields, serverVersion)
+    await platformService.openExternal(url)
+  }
+
+  function onKey(e: KeyboardEvent) { if (e.key === 'Escape') onClose() }
+
+  function formatKeyVal(key: keyof Settings): string {
+    const v = settingsState.settings[key]
+    if (v === undefined || v === null) return '~'
+    if (typeof v === 'boolean') return v ? 'true' : 'false'
+    if (typeof v === 'string') return v === '' ? '""' : v.length > 18 ? v.slice(0, 18) + '…' : v
+    if (typeof v === 'number') return String(v)
+    return '…'
+  }
+
+  const envBlock = $derived(buildEnvironmentBlock(serverVersion))
+
+  const canSubmit = $derived(
+    reportType === 'bug'
+      ? title.trim().length > 0 && description.trim().length > 0
+      : title.trim().length > 0 && problem.trim().length > 0
+  )
+
+  function autoResize(node: HTMLTextAreaElement) {
+    function resize() {
+      node.style.height = 'auto'
+      node.style.height = node.scrollHeight + 'px'
+    }
+    resize()
+    node.addEventListener('input', resize)
+    return { destroy() { node.removeEventListener('input', resize) } }
+  }
+</script>
+
+<svelte:window onkeydown={onKey} />
+
+<div class="br-backdrop"
+  role="button" tabindex="-1" aria-label="Close"
+  onclick={(e) => { if (e.target === e.currentTarget) onClose() }}
+  onkeydown={(e) => e.key === 'Escape' && onClose()}>
+
+  <div class="br-shell" role="dialog" aria-label="Report an issue"
+    onclick={(e) => e.stopPropagation()}
+    onkeydown={(e) => e.stopPropagation()}>
+
+    <header class="br-header">
+      <div class="br-header-left">
+        {#if reportType === 'bug'}
+          <Bug size={15} weight="duotone" class="br-header-icon bug" />
+        {:else}
+          <Lightbulb size={15} weight="duotone" class="br-header-icon feature" />
+        {/if}
+        <span class="br-title">
+          {step === 'type' ? 'Report an Issue' : reportType === 'bug' ? 'Bug Report' : 'Feature Request'}
+        </span>
+      </div>
+      <button class="br-close" onclick={onClose} aria-label="Close"><X size={14} weight="bold" /></button>
+    </header>
+
+    {#if step === 'type'}
+      <div class="br-type-step">
+        <p class="br-type-hint">What would you like to submit?</p>
+        <div class="br-type-cards">
+          <button class="br-type-card" class:selected={reportType === 'bug'}
+            onclick={() => { reportType = 'bug'; step = 'compose' }}>
+            <Bug size={28} weight="duotone" />
+            <span class="br-type-name">Bug Report</span>
+            <span class="br-type-desc">Something isn't working as expected</span>
+          </button>
+          <button class="br-type-card" class:selected={reportType === 'feature'}
+            onclick={() => { reportType = 'feature'; step = 'compose' }}>
+            <Lightbulb size={28} weight="duotone" />
+            <span class="br-type-name">Feature Request</span>
+            <span class="br-type-desc">Suggest an improvement or new idea</span>
+          </button>
+        </div>
+      </div>
+
+    {:else}
+      <div class="br-compose">
+
+        <div class="br-form">
+          <div class="br-form-scroll">
+
+            <div class="br-field">
+              <label class="br-label" for="br-title">Title <span class="br-required">*</span></label>
+              <input id="br-title" class="br-input" bind:value={title}
+                placeholder={reportType === 'bug' ? 'Short summary of the bug' : 'Short summary of your idea'}
+                maxlength={120} spellcheck />
+            </div>
+
+            {#if reportType === 'bug'}
+              <div class="br-field">
+                <label class="br-label" for="br-desc">Description <span class="br-required">*</span></label>
+                <textarea id="br-desc" class="br-textarea" bind:value={description}
+                  use:autoResize
+                  placeholder="What's broken? A clear, concise summary." rows={3} spellcheck></textarea>
+              </div>
+              <div class="br-field">
+                <label class="br-label" for="br-steps">Steps to Reproduce</label>
+                <textarea id="br-steps" class="br-textarea" bind:value={steps}
+                  use:autoResize
+                  placeholder={"1. Open Settings → Library\n2. Enable \"Always show card stats\"\n3. Return to Library\n4. Unread counts are not visible"}
+                  rows={4} spellcheck></textarea>
+              </div>
+              <div class="br-field-row">
+                <div class="br-field">
+                  <label class="br-label" for="br-expected">Expected</label>
+                  <textarea id="br-expected" class="br-textarea" bind:value={expected}
+                    use:autoResize
+                    placeholder="What should have happened?" rows={2} spellcheck></textarea>
+                </div>
+                <div class="br-field">
+                  <label class="br-label" for="br-actual">Actual</label>
+                  <textarea id="br-actual" class="br-textarea" bind:value={actual}
+                    use:autoResize
+                    placeholder="What actually happened?" rows={2} spellcheck></textarea>
+                </div>
+              </div>
+            {:else}
+              <div class="br-field">
+                <label class="br-label" for="br-problem">Problem / Motivation <span class="br-required">*</span></label>
+                <textarea id="br-problem" class="br-textarea" bind:value={problem}
+                  use:autoResize
+                  placeholder="What gap or frustration does this address?" rows={3} spellcheck></textarea>
+              </div>
+              <div class="br-field">
+                <label class="br-label" for="br-solution">Proposed Solution <span class="br-required">*</span></label>
+                <textarea id="br-solution" class="br-textarea" bind:value={solution}
+                  use:autoResize
+                  placeholder="What would you like to see?" rows={3} spellcheck></textarea>
+              </div>
+              <div class="br-field">
+                <label class="br-label" for="br-alt">Alternatives Considered</label>
+                <textarea id="br-alt" class="br-textarea" bind:value={alternatives}
+                  use:autoResize
+                  placeholder="Any workarounds or other approaches?" rows={2} spellcheck></textarea>
+              </div>
+            {/if}
+
+            <div class="br-field">
+              <label class="br-label">Environment <span class="br-auto">auto-filled</span></label>
+              <pre class="br-env-block">{envBlock}</pre>
+            </div>
+
+          </div>
+        </div>
+
+        {#if reportType === 'bug'}
+          <div class="br-sidebar">
+            <div class="br-sidebar-header">
+              <span class="br-sidebar-title">Include Settings</span>
+              <span class="br-sidebar-hint">Select groups relevant to the bug</span>
+            </div>
+            <div class="br-sidebar-scroll">
+              {#each SETTINGS_GROUPS as group}
+                {@const selectedInGroup = group.keys.filter(k => selectedKeys.has(k)).length}
+                {@const allSelected     = selectedInGroup === group.keys.length}
+                {@const expanded        = expandedGroups.has(group.label)}
+
+                <div class="br-group">
+                  <div class="br-group-row">
+                    <button class="br-group-toggle" onclick={() => toggleGroup(group.label)}>
+                      {#if expanded}
+                        <CaretDown size={9} weight="bold" />
+                      {:else}
+                        <CaretRight size={9} weight="bold" />
+                      {/if}
+                      <span class="br-group-label">{group.label}</span>
+                      {#if selectedInGroup > 0}
+                        <span class="br-group-count">{selectedInGroup}</span>
+                      {/if}
+                    </button>
+                    <button class="br-group-all"
+                      class:active={allSelected}
+                      onclick={() => selectGroupAll(group.keys)}
+                      title={allSelected ? 'Deselect all' : 'Select all'}>
+                      {allSelected ? 'none' : 'all'}
+                    </button>
+                  </div>
+
+                  {#if expanded}
+                    <div class="br-key-list">
+                      {#each group.keys as key}
+                        <label class="br-key-row">
+                          <input type="checkbox"
+                            checked={selectedKeys.has(key)}
+                            onchange={() => toggleKey(key)}
+                            class="br-checkbox" />
+                          <span class="br-key-name">{key}</span>
+                          <span class="br-key-val">{formatKeyVal(key)}</span>
+                        </label>
+                      {/each}
+                    </div>
+                  {/if}
+                </div>
+              {/each}
+            </div>
+          </div>
+        {/if}
+
+      </div>
+
+      <footer class="br-footer">
+        <button class="br-btn ghost" onclick={() => (step = 'type')}>Back</button>
+        <div class="br-footer-right">
+          <button class="br-btn secondary" onclick={handleCopy} title="Copy report to clipboard">
+            {#if copied}
+              <Check size={13} /><span>Copied!</span>
+            {:else}
+              <ClipboardText size={13} /><span>Copy</span>
+            {/if}
+          </button>
+          <button class="br-btn primary" disabled={!canSubmit} onclick={handleOpen}>
+            <ArrowSquareOut size={13} /><span>Open on GitHub</span>
+          </button>
+        </div>
+      </footer>
+    {/if}
+
+  </div>
+</div>
+
+<style>
+  .br-backdrop {
+    position: fixed; inset: 0;
+    z-index: calc(var(--z-settings) + 1);
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(0,0,0,0.55);
+    backdrop-filter: blur(4px);
+    animation: br-fade 0.14s ease both;
+  }
+
+  @keyframes br-fade  { from { opacity: 0 }              to { opacity: 1 } }
+  @keyframes br-scale { from { transform: scale(0.96); opacity: 0 } to { transform: scale(1); opacity: 1 } }
+
+  .br-shell {
+    width: min(820px, calc(100vw - 32px));
+    height: min(600px, calc(100vh - 64px));
+    display: flex; flex-direction: column;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-base);
+    border-radius: var(--radius-2xl);
+    box-shadow: 0 0 0 1px var(--border-dim), 0 32px 80px rgba(0,0,0,0.7);
+    overflow: hidden;
+    animation: br-scale 0.2s cubic-bezier(0.16,1,0.3,1) both;
+  }
+
+  .br-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 14px var(--sp-5);
+    border-bottom: 1px solid var(--border-dim);
+    flex-shrink: 0;
+  }
+  .br-header-left { display: flex; align-items: center; gap: var(--sp-2); }
+  .br-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }
+  :global(.br-header-icon.bug)     { color: var(--color-error); }
+  :global(.br-header-icon.feature) { color: var(--accent-fg); }
+  .br-close {
+    display: flex; align-items: center; justify-content: center;
+    width: 28px; height: 28px;
+    border-radius: var(--radius-md); border: none; background: none;
+    color: var(--text-faint); cursor: pointer;
+    transition: color var(--t-base), background var(--t-base);
+  }
+  .br-close:hover { color: var(--text-muted); background: var(--bg-raised); }
+
+  .br-type-step {
+    flex: 1; display: flex; flex-direction: column;
+    align-items: center; justify-content: center;
+    gap: var(--sp-5); padding: var(--sp-6);
+  }
+  .br-type-hint {
+    font-family: var(--font-ui); font-size: var(--text-xs);
+    letter-spacing: var(--tracking-wide);
+    color: var(--text-faint); text-transform: uppercase;
+  }
+  .br-type-cards { display: flex; gap: var(--sp-4); }
+  .br-type-card {
+    display: flex; flex-direction: column; align-items: center;
+    gap: var(--sp-2); padding: var(--sp-6) var(--sp-8);
+    border-radius: var(--radius-xl);
+    border: 1px solid var(--border-base);
+    background: var(--bg-raised);
+    cursor: pointer; color: var(--text-secondary);
+    transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
+    min-width: 180px;
+  }
+  .br-type-card:hover { border-color: var(--border-strong); background: var(--bg-overlay); color: var(--text-primary); }
+  .br-type-card.selected { border-color: var(--accent); background: var(--accent-muted); color: var(--accent-fg); }
+  .br-type-name { font-size: var(--text-sm); font-weight: var(--weight-medium); }
+  .br-type-desc {
+    font-family: var(--font-ui); font-size: var(--text-xs);
+    letter-spacing: var(--tracking-wide); color: var(--text-faint);
+    text-align: center;
+  }
+
+  .br-compose { flex: 1; display: flex; overflow: hidden; min-height: 0; }
+
+  .br-form { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; border-right: 1px solid var(--border-dim); }
+  .br-form-scroll { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
+
+  .br-field { display: flex; flex-direction: column; gap: 5px; }
+  .br-field-row { display: flex; gap: var(--sp-3); }
+  .br-field-row .br-field { flex: 1; }
+
+  .br-label {
+    font-family: var(--font-ui); font-size: var(--text-xs);
+    letter-spacing: var(--tracking-wide);
+    color: var(--text-faint); display: flex; align-items: center; gap: var(--sp-1);
+  }
+  .br-required { color: var(--color-error); }
+  .br-auto {
+    font-size: var(--text-2xs); padding: 1px 6px;
+    border-radius: var(--radius-full);
+    background: var(--accent-muted); color: var(--accent-fg);
+    border: 1px solid var(--accent-dim);
+  }
+
+  .br-input, .br-textarea {
+    background: var(--bg-raised); border: 1px solid var(--border-dim);
+    border-radius: var(--radius-md);
+    font-size: var(--text-sm); color: var(--text-primary);
+    padding: 8px var(--sp-3); outline: none; resize: none;
+    font-family: inherit; line-height: var(--leading-snug);
+    transition: border-color var(--t-base);
+    overflow: hidden;
+  }
+  .br-input:focus, .br-textarea:focus { border-color: var(--border-focus); }
+  .br-input::placeholder, .br-textarea::placeholder { color: var(--text-faint); }
+
+  .br-env-block {
+    font-family: monospace; font-size: 11px;
+    color: var(--text-faint); line-height: var(--leading-base);
+    background: var(--bg-raised); border: 1px solid var(--border-dim);
+    border-radius: var(--radius-md); padding: var(--sp-3);
+    white-space: pre-wrap; margin: 0;
+  }
+
+  .br-sidebar {
+    width: 220px; flex-shrink: 0;
+    display: flex; flex-direction: column;
+    background: var(--bg-base);
+  }
+  .br-sidebar-header {
+    padding: var(--sp-3) var(--sp-4) var(--sp-2);
+    border-bottom: 1px solid var(--border-dim);
+    display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
+  }
+  .br-sidebar-title {
+    font-family: var(--font-ui); font-size: var(--text-xs);
+    letter-spacing: var(--tracking-wide); color: var(--text-secondary);
+    font-weight: var(--weight-medium);
+  }
+  .br-sidebar-hint {
+    font-family: var(--font-ui); font-size: var(--text-2xs);
+    letter-spacing: var(--tracking-wide); color: var(--text-faint);
+  }
+  .br-sidebar-scroll { flex: 1; overflow-y: auto; padding: var(--sp-1) 0 var(--sp-2); }
+
+  .br-group { display: flex; flex-direction: column; }
+
+  .br-group-row {
+    display: flex; align-items: center;
+    padding: 3px var(--sp-3) 3px var(--sp-3);
+    gap: var(--sp-1);
+  }
+  .br-group-toggle {
+    flex: 1; display: flex; align-items: center; gap: 5px;
+    background: none; border: none; cursor: pointer;
+    color: var(--text-faint); padding: 2px 0;
+    transition: color var(--t-fast);
+    min-width: 0;
+  }
+  .br-group-toggle:hover { color: var(--text-secondary); }
+  .br-group-label {
+    font-family: var(--font-ui); font-size: var(--text-2xs);
+    letter-spacing: var(--tracking-wider); text-transform: uppercase;
+    color: inherit;
+  }
+  .br-group-count {
+    font-family: var(--font-ui); font-size: var(--text-2xs);
+    padding: 0 5px; border-radius: var(--radius-full);
+    background: var(--accent-muted); color: var(--accent-fg);
+    border: 1px solid var(--accent-dim);
+    line-height: 1.6;
+  }
+  .br-group-all {
+    font-family: var(--font-ui); font-size: var(--text-2xs);
+    letter-spacing: var(--tracking-wide);
+    background: none; border: none; cursor: pointer;
+    color: var(--text-faint); padding: 2px 6px;
+    border-radius: var(--radius-sm);
+    transition: color var(--t-fast), background var(--t-fast);
+    flex-shrink: 0;
+  }
+  .br-group-all:hover, .br-group-all.active { color: var(--accent-fg); background: var(--accent-muted); }
+
+  .br-key-list { display: flex; flex-direction: column; padding-bottom: var(--sp-1); }
+  .br-key-row {
+    display: flex; align-items: center; gap: var(--sp-2);
+    padding: 3px var(--sp-3) 3px 24px; cursor: pointer;
+    transition: background var(--t-fast);
+  }
+  .br-key-row:hover { background: var(--bg-raised); }
+  .br-checkbox { accent-color: var(--accent); flex-shrink: 0; cursor: pointer; }
+  .br-key-name {
+    flex: 1; font-family: monospace; font-size: 10px;
+    color: var(--text-secondary);
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  .br-key-val {
+    font-family: monospace; font-size: 10px;
+    color: var(--text-faint); flex-shrink: 0;
+    max-width: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+
+  .br-footer {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: var(--sp-3) var(--sp-5);
+    border-top: 1px solid var(--border-dim);
+    flex-shrink: 0;
+  }
+  .br-footer-right { display: flex; gap: var(--sp-2); }
+
+  .br-btn {
+    display: flex; align-items: center; gap: var(--sp-1);
+    font-family: var(--font-ui); font-size: var(--text-xs);
+    letter-spacing: var(--tracking-wide);
+    padding: 6px var(--sp-4); border-radius: var(--radius-md);
+    cursor: pointer; border: 1px solid transparent;
+    transition: background var(--t-base), color var(--t-base), border-color var(--t-base), opacity var(--t-base);
+  }
+  .br-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+  .br-btn.ghost { background: none; color: var(--text-faint); border-color: transparent; }
+  .br-btn.ghost:hover { color: var(--text-secondary); background: var(--bg-raised); }
+  .br-btn.secondary { background: none; color: var(--text-muted); border-color: var(--border-dim); }
+  .br-btn.secondary:hover { border-color: var(--border-strong); color: var(--text-secondary); }
+  .br-btn.primary { background: var(--accent-muted); color: var(--accent-fg); border-color: var(--accent-dim); }
+  .br-btn.primary:not(:disabled):hover { filter: brightness(1.12); }
+</style>
@@ -10,9 +10,7 @@
 /* ── Backdrop & Modal Shell ───────────────────────────────────────── */
 .s-backdrop {
  position: fixed; inset: 0;
-  background: rgba(0,0,0,0.6);
-  backdrop-filter: blur(8px);
-  -webkit-backdrop-filter: blur(8px);
+
  z-index: var(--z-settings);
  display: flex; align-items: center; justify-content: center;
  animation: s-fade-in 0.14s ease both;
@@ -29,10 +27,7 @@
  overflow: visible;
  position: relative;
  animation: s-scale-in 0.2s cubic-bezier(0.16,1,0.3,1) both;
-  box-shadow:
-    0 0 0 1px rgba(255,255,255,0.04) inset,
-    0 24px 80px rgba(0,0,0,0.7),
-    0 8px 24px rgba(0,0,0,0.4);
+  box-shadow: 0 0 0 1px var(--border-dim), 0 24px 64px rgba(0,0,0,0.6);
 }


@@ -46,7 +41,7 @@
  display: flex;
  flex-direction: column;
  gap: 1px;
-  overflow-y: auto;
+  overflow-y: hidden;
  border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
 }

@@ -1,6 +1,6 @@
 <script lang="ts">
  import { tick } from 'svelte'
-  import { X, Book, Image, Sliders, Info, Keyboard, Gear, HardDrives, FolderSimple, Wrench, PaintBrush, ListChecks, Lock, ShieldCheck, Robot } from 'phosphor-svelte'
+  import { X, Book, Image, Sliders, Info, Keyboard, Gear, HardDrives, FolderSimple, Wrench, PaintBrush, ListChecks, Lock, ShieldCheck, Robot, Bug } from 'phosphor-svelte'
  import { settingsState, updateSettings } from '$lib/state/settings.svelte'
  import { eventToKeybind } from '$lib/core/keybinds/keybindEngine'
  import type { Keybinds } from '$lib/core/keybinds/defaultBinds'
@@ -19,6 +19,8 @@
  import ContentSettings     from './sections/ContentSettings.svelte'
  import AboutSettings       from './sections/AboutSettings.svelte'
  import DevtoolsSettings    from './sections/DevToolsSettings.svelte'
+  import ModalBlur           from '$lib/components/shared/ui/ModalBlur.svelte'
+  import BugReporter         from './BugReporter.svelte'

  interface Props { onclose?: () => void; onOpenThemeEditor?: (id?: string | null) => void }
  let { onclose, onOpenThemeEditor }: Props = $props()
@@ -42,11 +44,12 @@
  ]

  const anims = $derived(settingsState.settings.qolAnimations ?? true)
-  let tab: Tab      = $state('general')
-  let prevTabIndex  = $state(0)
-  let tabSlideDir   = $state<'up'|'down'>('down')
-  let tabIconKey    = $state(0)
+  let tab: Tab           = $state('general')
+  let prevTabIndex       = $state(0)
+  let tabSlideDir        = $state<'up'|'down'>('down')
+  let tabIconKey         = $state(0)
  let contentBodyEl: HTMLDivElement
+  let bugReporterOpen    = $state(false)

  $effect(() => { tab; tick().then(() => contentBodyEl?.scrollTo({ top: 0 })) })

@@ -65,7 +68,7 @@
  let listeningKey: keyof Keybinds | null = $state(null)

  $effect(() => {
-    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape' && !listeningKey) { e.stopPropagation(); close() } }
+    const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape' && !listeningKey && !bugReporterOpen) { e.stopPropagation(); close() } }
    window.addEventListener('keydown', onKey, true)
    return () => window.removeEventListener('keydown', onKey, true)
  })
@@ -111,6 +114,7 @@
  })
 </script>

+<ModalBlur />
 <div class="s-backdrop" role="presentation" tabindex="-1"
  onclick={(e) => { if (e.target === e.currentTarget) close() }}
  onkeydown={(e) => { if (e.key === 'Escape') { e.stopPropagation(); close() } }}>
@@ -132,6 +136,11 @@
          </button>
        {/each}
      </nav>
+      <div class="s-sidebar-spacer"></div>
+      <button class="s-nav-item s-bug-btn" class:anims onclick={() => (bugReporterOpen = true)}>
+        <Bug size={14} weight="light" />
+        <span>Report an Issue</span>
+      </button>
    </div>

    <div class="s-content">
@@ -187,4 +196,18 @@
    </div>

  </div>
-</div>
+</div>
+
+{#if bugReporterOpen}
+  <BugReporter onClose={() => (bugReporterOpen = false)} />
+{/if}
+
+<style>
+  .s-sidebar-spacer { flex: 1; }
+
+  .s-bug-btn { color: var(--text-faint) !important; }
+  .s-bug-btn:hover {
+    color: var(--color-error) !important;
+    background: var(--color-error-bg) !important;
+  }
+</style>
@@ -0,0 +1,154 @@
+import { appState }      from '$lib/state/app.svelte'
+import { settingsState } from '$lib/state/settings.svelte'
+import type { Settings } from '$lib/types/settings'
+
+export type ReportType = 'bug' | 'feature'
+
+export const SETTINGS_GROUPS: { label: string; keys: (keyof Settings)[] }[] = [
+  {
+    label: 'Library',
+    keys: [
+      'libraryStatsAlways', 'libraryCropCovers', 'libraryPageSize',
+      'libraryBranches', 'libraryShowAllInSaved', 'libraryHideCompletedInSaved',
+      'savedIsDefaultCategory', 'defaultLibraryCategoryId',
+    ],
+  },
+  {
+    label: 'Reader',
+    keys: [
+      'pageStyle', 'fitMode', 'readingDirection', 'readerZoom',
+      'pageGap', 'optimizeContrast', 'offsetDoubleSpreads',
+      'preloadPages', 'autoMarkRead', 'autoNextChapter',
+      'markReadOnNext', 'autoBookmark', 'autoScroll', 'autoScrollSpeed',
+      'readerDebounceMs', 'readerContainerized', 'barPosition',
+    ],
+  },
+  {
+    label: 'Server',
+    keys: ['serverUrl', 'autoStartServer', 'suwayomiWebUI', 'serverAuthMode'],
+  },
+  {
+    label: 'Appearance',
+    keys: ['theme', 'uiZoom', 'compactSidebar', 'gpuAcceleration', 'qolAnimations', 'systemThemeSync'],
+  },
+  {
+    label: 'Downloads',
+    keys: ['downloadToastsEnabled', 'downloadAutoRetry', 'storageLimitGb', 'serverDownloadsPath'],
+  },
+  {
+    label: 'Content & Extensions',
+    keys: ['contentLevel', 'sourceOverridesEnabled', 'preferredExtensionLang', 'flareSolverrEnabled', 'socksProxyEnabled'],
+  },
+  {
+    label: 'Automation',
+    keys: ['automationEnabled', 'automationEnforceGlobal'],
+  },
+  {
+    label: 'Tracking',
+    keys: ['trackerSyncBack', 'trackerSyncBackThreshold', 'trackerRespectScanlatorFilter'],
+  },
+  {
+    label: 'Performance',
+    keys: ['renderLimit', 'pinchZoom'],
+  },
+]
+
+const REDACTED = new Set<keyof Settings>([
+  'serverAuthUser', 'serverAuthPass', 'appLockPin',
+  'socksProxyUsername', 'socksProxyPassword',
+  'keybinds', 'customThemes', 'heroSlots', 'mangaLinks', 'mangaPrefs',
+  'libraryTabSort', 'libraryTabStatus', 'libraryTabFilters',
+  'nsfwAllowedSourceIds', 'nsfwBlockedSourceIds',
+  'mangaReaderSettings', 'readerPresets',
+  'hiddenCategoryIds', 'libraryPinnedTabOrder', 'hiddenLibraryTabs',
+  'pinnedSourceIds', 'extraScanDirs',
+])
+
+function detectOs(): string {
+  const ua = navigator.userAgent
+  if (ua.includes('Windows NT 10.0')) {
+    const build = ua.match(/Windows NT 10\.0(?:\.(\d+))?/)
+    return build ? `Windows 10/11 (NT ${build[0].replace('Windows ', '')})` : 'Windows 10/11'
+  }
+  if (ua.includes('Windows')) return 'Windows'
+  if (ua.includes('Mac OS X')) {
+    const v = ua.match(/Mac OS X ([\d_]+)/)
+    return v ? `macOS ${v[1].replace(/_/g, '.')}` : 'macOS'
+  }
+  if (ua.includes('Linux')) return 'Linux'
+  return 'unknown'
+}
+
+export function buildEnvironmentBlock(serverVersion?: string): string {
+  const s = settingsState.settings
+  const host = (() => { try { return new URL(s.serverUrl || '').host } catch { return s.serverUrl || 'unknown' } })()
+  const serverLine = serverVersion
+    ? `- Server: Suwayomi ${serverVersion} (${host})`
+    : `- Server: Suwayomi (${host})`
+  return [
+    `- Moku Version: ${appState.version || 'unknown'}`,
+    `- Platform: ${appState.platform}`,
+    `- OS: ${detectOs()}`,
+    serverLine,
+    `- Auth Mode: ${s.serverAuthMode}`,
+  ].join('\n')
+}
+
+export function buildSettingsBlock(keys: (keyof Settings)[]): string {
+  const s = settingsState.settings
+  return keys
+    .filter(k => !REDACTED.has(k))
+    .map(k => {
+      const v = s[k]
+      if (v === undefined || v === null) return `${k}: ~`
+      if (typeof v === 'string' && v === '') return `${k}: ""`
+      return `${k}: ${JSON.stringify(v)}`
+    })
+    .join('\n')
+}
+
+export interface BugFields {
+  description: string
+  steps:       string
+  expected:    string
+  actual:      string
+}
+
+export interface FeatureFields {
+  problem:      string
+  solution:     string
+  alternatives: string
+}
+
+export function buildIssueUrl(
+  type:          ReportType,
+  settingsBlock: string,
+  title:         string,
+  fields:        BugFields | FeatureFields,
+  serverVersion?: string,
+): string {
+  const base = 'https://github.com/moku-project/Moku/issues/new'
+
+  const common = {
+    template:    type === 'bug' ? 'bug_report.yml' : 'feature_request.yml',
+    title,
+    environment: buildEnvironmentBlock(serverVersion),
+  }
+
+  const specific = type === 'bug'
+    ? {
+        description: (fields as BugFields).description,
+        steps:       (fields as BugFields).steps,
+        expected:    (fields as BugFields).expected,
+        actual:      (fields as BugFields).actual,
+        settings:    settingsBlock,
+      }
+    : {
+        problem:      (fields as FeatureFields).problem,
+        solution:     (fields as FeatureFields).solution,
+        alternatives: (fields as FeatureFields).alternatives,
+      }
+
+  const params = new URLSearchParams({ ...common, ...specific })
+  return `${base}?${params.toString()}`
+}
@@ -76,7 +76,7 @@
    let entries = 0, oldest: number | null = null, newest: number | null = null
    const foundKeys: string[] = []
    const checkKey = (k: string) => {
-      const age = cache.ageOf(k)
+      const age = cache?.ageOf?.(k)
      if (age !== undefined) {
        entries++
        foundKeys.push(k)
@@ -85,7 +85,7 @@
        if (newest === null || ts > newest) newest = ts
      }
    }
-    ['library', 'sources', 'popular'].forEach(checkKey)
+    ['library', 'sources', 'popular'].forEach(checkKey);
    ['Action','Romance','Fantasy','Comedy','Drama','Horror','Sci-Fi','Adventure','Thriller',
     'Isekai','Supernatural','Historical','Psychological','Sports','Mystery','Mecha',
     'Slice of Life','School Life','Martial Arts','Magic','Military'].forEach(g => checkKey(`genre:${g}`))
@@ -102,9 +102,10 @@
  }

  function triggerSplash() {
+    if (appState.devSplash) return
    splashTriggered = true
    setTimeout(() => splashTriggered = false, 200)
-    ;(window as any).__mokuShowSplash?.()
+    appState.devSplash = true
  }

  async function testWindowsHello() {
@@ -192,7 +193,7 @@
      <div class="s-dev-grid">
        <span class="s-dev-key">Filter</span>  <span class="s-dev-val">{appState.libraryFilter}</span>
        <span class="s-dev-key">Folders</span> <span class="s-dev-val">{appState.categories.filter(c => c.id !== 0).map(c => c.name).join(', ') || 'none'}</span>
-        <span class="s-dev-key">History</span> <span class="s-dev-val">{appState.history.length} entries</span>
+        <span class="s-dev-key">History</span> <span class="s-dev-val">{appState.history?.length ?? 0} entries</span>
        <span class="s-dev-key">Cache</span>   <span class="s-dev-val">{perfSnapshot?.cacheEntries ?? '—'} entries</span>
        <span class="s-dev-key">Toasts</span> <span class="s-dev-val">{appState.toasts.length} queued</span>
        <span class="s-dev-key">Version</span> <span class="s-dev-val">{appVersion} · {import.meta.env.MODE}</span>
@@ -2,6 +2,8 @@
  import { settingsState, updateSettings } from '$lib/state/settings.svelte'
  import { platformService } from '$lib/platform-service'

+  const isTauri = platformService.platform === 'tauri'
+
  interface Props {
    selectOpen: string | null
    closingSelect: string | null
@@ -67,6 +69,7 @@
        </div>
      </div>

+      {#if isTauri}
      <label class="s-row">
        <div class="s-row-info"><span class="s-label">Auto-start server</span><span class="s-desc">Launch tachidesk-server when Moku opens</span></div>
        <button role="switch" aria-checked={settingsState.settings.autoStartServer} aria-label="Auto-start server"
@@ -84,6 +87,7 @@
          <span class="s-toggle-thumb"></span>
        </button>
      </label>
+      {/if}

      {#if serverAdvancedOpen}
        <div class="srv-adv-panel">
@@ -83,8 +83,8 @@
  <div class="s-section">
    <div class="s-section-body">
      <div class="s-row">
-        <div class="s-row-info"><span class="s-label">Reading history</span><span class="s-desc">{homeState.history.length} entries</span></div>
-        <button class="s-btn s-btn-danger" onclick={clearHistory} disabled={homeState.history.length === 0}>Clear</button>
+        <div class="s-row-info"><span class="s-label">Reading history</span><span class="s-desc">{homeState.history?.length ?? 0} entries</span></div>
+        <button class="s-btn s-btn-danger" onclick={clearHistory} disabled={!homeState.history?.length}>Clear</button>
      </div>
    </div>
  </div>
@@ -1,7 +1,8 @@
 <script lang="ts">
  import { settingsState, updateSettings } from '$lib/state/settings.svelte'
  import { requestManager } from '$lib/request-manager'
-  import { authSession, loginUI } from '$lib/core/auth'
+  import { retryBoot } from '$lib/state/boot.svelte'
+  import { authSession, configureAuth } from '$lib/core/auth'

  interface Props { selectOpen: string | null; toggleSelect: (id: string) => void }
  let { selectOpen, toggleSelect }: Props = $props()
@@ -13,9 +14,15 @@
  let secSaved      = $state<string | null>(null)
  let secLoaded     = $state(false)

-  let authMode     = $state(settingsState.settings.serverAuthMode ?? 'NONE')
+  function normalizeForUI(mode: string | undefined): 'NONE' | 'BASIC_AUTH' | 'UI_LOGIN' {
+    if (mode === 'BASIC_AUTH' || mode === 'UI_LOGIN') return mode
+    return 'NONE'
+  }
+
+  let authMode     = $state(normalizeForUI(settingsState.settings.serverAuthMode))
  let authUsername = $state(settingsState.settings.serverAuthUser ?? '')
  let authPassword = $state('')
+  let authDirty    = $state(false)

  let socksEnabled  = $state(settingsState.settings.socksProxyEnabled ?? false)
  let socksHost     = $state(settingsState.settings.socksProxyHost ?? '')
@@ -31,9 +38,33 @@
  let flareTtl      = $state(settingsState.settings.flareSolverrSessionTtl ?? 15)
  let flareFallback = $state(settingsState.settings.flareSolverrAsResponseFallback ?? false)

-  function normalizeAuthMode(mode: string): 'NONE' | 'BASIC_AUTH' | 'UI_LOGIN' {
-    if (mode === 'BASIC_AUTH' || mode === 'UI_LOGIN' || mode === 'NONE') return mode
-    return 'NONE'
+  let lockEnabled = $state(settingsState.settings.appLockEnabled ?? false)
+  let lockPin     = $state(settingsState.settings.appLockEnabled ? (settingsState.settings.appLockPin ?? '') : '')
+  let lockPinVis  = $state(false)
+  let lockError   = $state<string | null>(null)
+  let lockSaved   = $state(false)
+
+  function onLockToggle() {
+    lockEnabled = !lockEnabled
+    lockError   = null
+    lockSaved   = false
+    if (!lockEnabled) {
+      lockPin = ''
+      updateSettings({ appLockEnabled: false, appLockPin: '' })
+    }
+  }
+
+  function onLockPinInput() {
+    lockPin   = lockPin.replace(/\D/g, '')
+    lockError = null
+    lockSaved = false
+  }
+
+  function saveLockPin() {
+    if (lockPin.length < 4) { lockError = 'PIN must be at least 4 digits'; return }
+    updateSettings({ appLockEnabled: true, appLockPin: lockPin })
+    lockSaved = true
+    setTimeout(() => lockSaved = false, 2000)
  }

  function showSaved(key: string) {
@@ -42,17 +73,17 @@
  }

  $effect(() => {
-    if (!secLoaded) { secLoaded = true; authSession.clearTokens(); loadServerSecurity() }
+    if (!secLoaded) { secLoaded = true; loadServerSecurity() }
  })

  async function loadServerSecurity() {
    try {
      const s = await requestManager.extensions.getServerSecurity()
-      const serverMode = normalizeAuthMode(s.authMode)
-      if (serverMode !== 'UI_LOGIN') authSession.clearTokens()
-      authMode = serverMode
-      authUsername = s.authUsername || ''
-      updateSettings({ serverAuthMode: serverMode, serverAuthUser: authUsername })
+      if (!authDirty) {
+        authMode     = normalizeForUI(s.authMode)
+        authUsername = s.authUsername || ''
+        updateSettings({ serverAuthMode: authMode, serverAuthUser: authUsername })
+      }
      socksEnabled = s.socksProxyEnabled; socksHost = s.socksProxyHost
      socksPort = s.socksProxyPort; socksVersion = s.socksProxyVersion
      socksUsername = s.socksProxyUsername
@@ -66,37 +97,28 @@
        flareSolverrTimeout: flareTimeout, flareSolverrSessionName: flareSession,
        flareSolverrSessionTtl: flareTtl, flareSolverrAsResponseFallback: flareFallback,
      })
-    } catch {}
+    } catch (e: any) {
+      console.warn('[SecuritySettings] loadServerSecurity failed:', e?.message ?? e)
+    }
  }

  async function saveAuth() {
    if (authMode === 'NONE') { await clearAuth(); return }
    if (!authUsername.trim() || !authPassword.trim()) { secError = 'Username and password are required'; return }
    secLoading = true; secError = null
-    const prev = { mode: settingsState.settings.serverAuthMode, user: settingsState.settings.serverAuthUser, pass: settingsState.settings.serverAuthPass }
    try {
      const newUser = authUsername.trim()
      const newPass = authPassword.trim()
-      authSession.clearTokens()
-      if (authMode === 'UI_LOGIN') {
-        await loginUI(newUser, newPass)
-        updateSettings({ serverAuthMode: 'UI_LOGIN', serverAuthUser: newUser, serverAuthPass: '' })
-      } else {
-        updateSettings({ serverAuthMode: 'BASIC_AUTH', serverAuthUser: newUser, serverAuthPass: newPass })
-      }
      await requestManager.extensions.setServerAuth({ authMode, authUsername: newUser, authPassword: newPass })
+      authSession.clearTokens()
+      updateSettings({ serverAuthMode: authMode as any, serverAuthUser: newUser, serverAuthPass: authMode === 'BASIC_AUTH' ? newPass : '' })
+      configureAuth(settingsState.settings.serverUrl ?? '', authMode as any, newUser, authMode === 'BASIC_AUTH' ? newPass : undefined)
      authPassword = ''
+      authDirty    = false
      showSaved('auth')
+      retryBoot(authMode as any, newUser, newPass)
    } catch (e: any) {
-      const msg = e?.message ?? 'Failed to save authentication settings'
-      const authMismatch = /unauthorized|unauthenticated|authentication|401/i.test(msg)
-      if (!authMismatch) {
-        authSession.clearTokens()
-        updateSettings({ serverAuthMode: prev.mode, serverAuthUser: prev.user, serverAuthPass: prev.pass })
-      }
-      secError = authMismatch
-        ? 'Saved local auth settings, but the server rejected the update. Verify your new credentials with the current server configuration.'
-        : msg
+      secError = e?.message ?? 'Failed to save authentication settings'
    } finally { secLoading = false }
  }

@@ -105,9 +127,11 @@
    const prev = { mode: settingsState.settings.serverAuthMode, user: settingsState.settings.serverAuthUser, pass: settingsState.settings.serverAuthPass }
    try {
      await requestManager.extensions.setServerAuth({ authMode: 'NONE', authUsername: '', authPassword: '' })
+      authSession.clearTokens()
+      configureAuth(settingsState.settings.serverUrl ?? '', 'NONE')
      updateSettings({ serverAuthMode: 'NONE', serverAuthUser: '', serverAuthPass: '' })
-      authMode = 'NONE'; authUsername = ''; authPassword = ''
-      authSession.clearTokens(); showSaved('auth')
+      authMode = 'NONE'; authUsername = ''; authPassword = ''; authDirty = false
+      showSaved('auth')
    } catch (e: any) {
      updateSettings({ serverAuthMode: prev.mode, serverAuthUser: prev.user, serverAuthPass: prev.pass })
      secError = e?.message ?? 'Failed to disable authentication'
@@ -157,6 +181,7 @@
    authMode = 'NONE'
    authUsername = ''
    authPassword = ''
+    authDirty = false
    updateSettings({ serverAuthMode: 'NONE', serverAuthUser: '', serverAuthPass: '' })
    showSaved('auth')
  }
@@ -185,23 +210,28 @@
        <div class="s-segment">
          {#each [{ value: 'NONE', label: 'None' }, { value: 'BASIC_AUTH', label: 'Basic' }, { value: 'UI_LOGIN', label: 'UI Login' }] as opt}
            <button class="s-segment-btn" class:active={authMode === opt.value}
-              onclick={() => authMode = opt.value as any} disabled={secLoading}>{opt.label}</button>
+              onclick={() => { authMode = opt.value as any; authPassword = ''; authDirty = true }} disabled={secLoading}>{opt.label}</button>
          {/each}
        </div>
      </div>
      {#if authMode !== 'NONE'}
        <div class="s-row">
          <div class="s-row-info"><span class="s-label">Username</span></div>
-          <input class="s-input" bind:value={authUsername} placeholder="Username" autocomplete="off" spellcheck="false" disabled={secLoading} />
+          <input class="s-input" bind:value={authUsername} oninput={() => authDirty = true} placeholder="Username" autocomplete="off" spellcheck="false" disabled={secLoading} />
        </div>
        <div class="s-row">
          <div class="s-row-info"><span class="s-label">Password</span></div>
          <div class="s-field-wrap">
-            <input class="s-input" type={showAuthPass ? 'text' : 'password'} bind:value={authPassword} placeholder="Password" autocomplete="off" spellcheck="false" disabled={secLoading} />
+            <input class="s-input" type={showAuthPass ? 'text' : 'password'} bind:value={authPassword} oninput={() => authDirty = true} placeholder="Password" autocomplete="off" spellcheck="false" disabled={secLoading} />
            <button class="s-eye-btn" onclick={() => showAuthPass = !showAuthPass} tabindex="-1" aria-label={showAuthPass ? 'Hide password' : 'Show password'}>{@html showAuthPass ? EyeClose : EyeOpen}</button>
          </div>
        </div>
      {/if}
+      {#if authMode !== 'NONE' && settingsState.settings.serverAuthMode === authMode && !authPassword}
+        <div class="s-row">
+          <span class="s-desc" style="color: var(--text-muted)">Re-enter your password to update credentials.</span>
+        </div>
+      {/if}
      {#if settingsState.settings.serverAuthMode === 'BASIC_AUTH'}
        <div class="s-row">
          <span class="s-desc">Images are proxied through Tauri when Basic Auth is active, which reduces loading speed.</span>
@@ -221,8 +251,16 @@
            </button>
          {/if}
          <button class="s-btn s-btn-accent" onclick={saveAuth}
-            disabled={secLoading || ((authMode === 'BASIC_AUTH' || authMode === 'UI_LOGIN') && (!authUsername.trim() || !authPassword.trim()))}>
-            {secLoading ? 'Saving…' : secSaved === 'auth' ? 'Saved ✓' : settingsState.settings.serverAuthMode === 'BASIC_AUTH' ? 'Update' : authMode === 'NONE' ? 'Save' : 'Enable'}
+            disabled={secLoading || (authMode !== 'NONE' && (!authUsername.trim() || !authPassword.trim()))}>
+            {#if secLoading}
+              Saving…
+            {:else if secSaved === 'auth'}
+              Saved ✓
+            {:else if authMode === 'NONE'}
+              Save
+            {:else}
+              {authDirty ? 'Enable' : 'Save'}
+            {/if}
          </button>
        </div>
      </div>
@@ -283,6 +321,41 @@
    </div>
  </div>

+  <div class="s-section">
+    <p class="s-section-title">App Lock</p>
+    <div class="s-section-body">
+      <label class="s-row">
+        <div class="s-row-info">
+          <span class="s-label">Require PIN on launch</span>
+          <span class="s-desc">Lock the app behind a numeric PIN when it opens</span>
+        </div>
+        <button role="switch" aria-checked={lockEnabled} aria-label="Enable app lock" class="s-toggle" class:on={lockEnabled}
+          onclick={onLockToggle}><span class="s-toggle-thumb"></span></button>
+      </label>
+      {#if lockEnabled}
+        {#if lockError}
+          <div class="s-banner s-banner-error" style="margin: 0">{lockError}</div>
+        {/if}
+        <div class="s-row">
+          <div class="s-row-info">
+            <span class="s-label">PIN</span>
+            <span class="s-desc">Minimum 4 digits</span>
+          </div>
+          <div class="s-pin-row">
+            <div class="s-field-wrap">
+              <input class="s-input" type={lockPinVis ? 'text' : 'password'} inputmode="numeric" pattern="\d*"
+                bind:value={lockPin} oninput={onLockPinInput} placeholder="••••" autocomplete="off" spellcheck="false" maxlength="8" />
+              <button class="s-eye-btn" onclick={() => lockPinVis = !lockPinVis} tabindex="-1" aria-label={lockPinVis ? 'Hide PIN' : 'Show PIN'}>{@html lockPinVis ? EyeClose : EyeOpen}</button>
+            </div>
+            <button class="s-btn s-btn-accent" onclick={saveLockPin} disabled={!lockPin}>
+              {lockSaved ? 'Saved ✓' : 'Save'}
+            </button>
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+
  <div class="s-section">
    <p class="s-section-title">FlareSolverr</p>
    <div class="s-section-body">
@@ -337,4 +410,5 @@
  .s-ghost-btn { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--text-faint); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); cursor: pointer; padding: 2px 0; transition: color 0.15s; }
  .s-ghost-btn:hover:not(:disabled) { color: var(--color-error); }
  .s-ghost-btn:disabled { opacity: 0.35; cursor: default; }
+  .s-pin-row { display: flex; align-items: center; gap: 8px; }
 </style>
@@ -12,6 +12,9 @@
  import { clearBlobCache } from '$lib/core/cache/imageCache'
  import { clearPageCache } from '$lib/request-manager'
  import { cache as queryCache } from '$lib/core/cache/queryCache'
+  import { getAdapter } from '$lib/request-manager'
+  import { requestManager } from '$lib/request-manager'
+  import type { ValidateBackupResult, RestoreStatus } from '$lib/server-adapters/types'

  const supportsFilesystem = platformService.isSupported('filesystem')

@@ -79,7 +82,7 @@
    await Promise.all([
      platformService.clearMokuCache(),
      platformService.clearSuwayomiCache(),
-      gql(`mutation { clearCachedImages(input: { cachedPages: true, cachedThumbnails: true, downloadedThumbnails: false }) { cachedPages cachedThumbnails } }`),
+      getAdapter().clearCachedImages({ cachedPages: true, cachedThumbnails: true, downloadedThumbnails: false }),
    ])
  }

@@ -168,11 +171,7 @@
    if (!supportsFilesystem) return
    storageLoading = true; storageError = null
    try {
-      const pathData = await gql<{ downloadsPath: string | null; localSourcePath: string | null }>(
-        `{ downloadsPath localSourcePath }`
-      )
-      const dl  = pathData.downloadsPath  ?? ''
-      const loc = pathData.localSourcePath ?? ''
+      const { downloadsPath: dl, localSourcePath: loc } = await getAdapter().getDownloadsPath()
      downloadsPathInput = dl; localSourcePathInput = loc
      confirmedDownloadsPath = dl; confirmedLocalSourcePath = loc
      updateSettings({ serverDownloadsPath: dl, serverLocalSourcePath: loc })
@@ -218,8 +217,8 @@
    if (dlErr || locErr) { pathsFieldError = { ...(dlErr ? { dl: dlErr } : {}), ...(locErr ? { loc: locErr } : {}) }; return }
    pathsSaving = true
    try {
-      await gql(`mutation($path: String!) { setDownloadsPath(input: { location: $path }) { location } }`, { path: dl })
-      if (loc) await gql(`mutation($path: String!) { setLocalSourcePath(input: { location: $path }) { location } }`, { path: loc })
+      await getAdapter().setDownloadsPath(dl)
+      if (loc) await getAdapter().setLocalSourcePath(loc)
      updateSettings({ serverDownloadsPath: dl, serverLocalSourcePath: loc })
      if (supportsFilesystem && !isExternalServer) {
        const oldDl = confirmedDownloadsPath || defaultDownloadsPath
@@ -301,8 +300,7 @@
  async function createBackup() {
    backupLoading = true; backupError = null
    try {
-      const data = await gql<{ createBackup: { url: string } }>(`mutation { createBackup { url } }`)
-      const { url } = data.createBackup
+      const { url } = await getAdapter().createBackup()
      const name = url.split('/').pop() ?? url
      backupList = [{ url, name }, ...backupList]
      await saveBackupList()
@@ -313,7 +311,7 @@
  async function deleteBackup(url: string) {
    backupList = backupList.map(b => b.url === url ? { ...b, deleting: true } : b)
    try {
-      await fetch(`${serverUrl()}${url}`, { method: 'DELETE', headers: buildAuthHeaders() })
+      await getAdapter().deleteBackup(url)
      backupList = backupList.filter(b => b.url !== url)
      await saveBackupList()
    } catch (e: any) {
@@ -324,9 +322,7 @@

  async function downloadBackup(backup: BackupEntry) {
    try {
-      const resp = await fetch(`${serverUrl()}${backup.url}`, { headers: buildAuthHeaders() })
-      if (!resp.ok) throw new Error(`Server returned ${resp.status}`)
-      const blob = await resp.blob()
+      const blob = await getAdapter().downloadBackup(backup.url)
      if ('showSaveFilePicker' in window) {
        try {
          const handle = await (window as any).showSaveFilePicker({
@@ -349,12 +345,11 @@

  let restoreLoading      = $state(false)
  let restoreError        = $state<string | null>(null)
-  let restoreJobId        = $state<string | null>(null)
-  let restoreStatus       = $state<{ mangaProgress: number; state: string; totalManga: number } | null>(null)
+  let restoreStatus       = $state<RestoreStatus | null>(null)
  let restorePollInterval = $state<ReturnType<typeof setInterval> | null>(null)
  let validateLoading     = $state(false)
  let validateError       = $state<string | null>(null)
-  let validateResult      = $state<{ missingSources: { id: string; name: string }[]; missingTrackers: { name: string }[] } | null>(null)
+  let validateResult      = $state<ValidateBackupResult | null>(null)
  let restoreFile         = $state<File | null>(null)

  function stopRestorePoll() {
@@ -363,62 +358,19 @@

  async function pollRestoreStatus(id: string) {
    try {
-      const data = await gql<{ restoreStatus: { mangaProgress: number; state: string; totalManga: number } }>(
-        `query($id: String!) { restoreStatus(id: $id) { mangaProgress state totalManga } }`,
-        { id }
-      )
-      const status = data.restoreStatus
+      const status = await getAdapter().pollRestoreStatus(id)
      restoreStatus = status
      if (status?.state === 'SUCCESS' || status?.state === 'FAILURE') stopRestorePoll()
    } catch {}
  }

-  function buildBackupFormData(file: File, query: string, variables: Record<string, unknown>) {
-    const form = new FormData()
-    form.append('operations', JSON.stringify({ query, variables }))
-    form.append('map', JSON.stringify({ '0': ['variables.backup'] }))
-    form.append('0', file, file.name)
-    return form
-  }
-
-  function buildAuthHeaders(): Record<string, string> {
-    const headers: Record<string, string> = { Accept: 'application/json' }
-    const pass = settingsState.settings.serverAuthPass ?? '', user = settingsState.settings.serverAuthUser ?? ''
-    if (settingsState.settings.serverAuthMode === 'BASIC_AUTH' && user && pass)
-      headers['Authorization'] = 'Basic ' + btoa(`${user}:${pass}`)
-    return headers
-  }
-
-  function serverUrl(): string {
-    return (settingsState.settings.serverUrl ?? 'http://localhost:4567').replace(/\/$/, '')
-  }
-
-  async function gql<T = unknown>(query: string, variables?: Record<string, unknown>): Promise<T> {
-    const res = await fetch(`${serverUrl()}/api/graphql`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json', ...buildAuthHeaders() },
-      body: JSON.stringify({ query, variables }),
-    })
-    const json = await res.json()
-    if (json.errors?.length) throw new Error(json.errors[0].message)
-    return json.data as T
-  }
-
  async function submitRestore() {
    if (!restoreFile) return
-    restoreLoading = true; restoreError = null; restoreStatus = null; restoreJobId = null
+    restoreLoading = true; restoreError = null; restoreStatus = null
    stopRestorePoll()
    try {
-      const form = buildBackupFormData(
-        restoreFile,
-        `mutation RestoreBackup($backup: Upload!) { restoreBackup(input: { backup: $backup }) { id status { mangaProgress state totalManga } } }`,
-        { backup: null }
-      )
-      const resp = await fetch(`${serverUrl()}/api/graphql`, { method: 'POST', headers: buildAuthHeaders(), body: form })
-      const json = await resp.json()
-      if (json.errors?.length) throw new Error(json.errors[0].message)
-      const result = json.data.restoreBackup
-      restoreJobId = result.id; restoreStatus = result.status
+      const result = await requestManager.meta.restoreBackup(restoreFile)
+      restoreStatus = result.status
      if (result.status?.state !== 'SUCCESS' && result.status?.state !== 'FAILURE')
        restorePollInterval = setInterval(() => pollRestoreStatus(result.id), 1500)
    } catch (e: any) { restoreError = e?.message ?? 'Failed to start restore' }
@@ -429,15 +381,7 @@
    if (!restoreFile) return
    validateLoading = true; validateError = null; validateResult = null
    try {
-      const form = buildBackupFormData(
-        restoreFile,
-        `query ValidateBackup($backup: Upload!) { validateBackup(input: { backup: $backup }) { missingSources { id name } missingTrackers { name } } }`,
-        { backup: null }
-      )
-      const resp = await fetch(`${serverUrl()}/api/graphql`, { method: 'POST', headers: buildAuthHeaders(), body: form })
-      const json = await resp.json()
-      if (json.errors?.length) throw new Error(json.errors[0].message)
-      validateResult = json.data.validateBackup
+      validateResult = await requestManager.meta.validateBackup(restoreFile)
    } catch (e: any) { validateError = e?.message ?? 'Failed to validate backup' }
    finally { validateLoading = false }
  }
@@ -3,6 +3,7 @@
  import { settingsState, updateSettings } from "$lib/state/settings.svelte";
  import { toast } from "$lib/state/notifications.svelte";
  import { getAdapter } from "$lib/request-manager";
+  import { platformService } from "$lib/platform-service";
  import { syncBackFromTracker } from "$lib/components/tracking/lib/trackingSync";
  import { trackingState } from "$lib/state/tracking.svelte";
  import type { Tracker, TrackRecord } from "$lib/types/index";
@@ -41,7 +42,7 @@
  async function startOAuth(tracker: Tracker) {
    if (!tracker.authUrl) return;
    oauthTrackerId = tracker.id; oauthCallbackInput = "";
-    window.open(tracker.authUrl, "_blank");
+    await platformService.openExternal(tracker.authUrl);
  }

  async function submitOAuth() {
@@ -274,6 +275,7 @@

 <style>
  .s-tracker-status-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
+  .s-tracker-status-row .s-pill { border-radius: 4px; }
  .s-pill-warn { background: color-mix(in srgb, var(--color-warn, #c97c2b) 15%, transparent); color: var(--color-warn, #c97c2b); border-color: color-mix(in srgb, var(--color-warn, #c97c2b) 35%, transparent); }
  .s-banner-dismissible { cursor: pointer; max-height: 8rem; overflow-y: auto; }
  .s-banner-dismissible:hover { opacity: 0.85; }
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
+  import { onMount, onDestroy, untrack } from "svelte";
  import {
    X, BookmarkSimple, ArrowSquareOut, Play, CircleNotch,
    Books, CaretDown, FolderSimplePlus, Folder, LinkSimpleHorizontalBreak, Image,
@@ -16,16 +16,13 @@
  import { addToast }          from "$lib/state/notifications.svelte";
  import {
    seriesState,
-    setPreviewManga, setActiveManga, openReader, addBookmark,
+    setPreviewManga, addBookmark, openReaderForChapter,
  } from "$lib/state/series.svelte";
-  import { app } from "$lib/state/app.svelte";
  import type { Manga, Chapter, Category } from "$lib/types";
-
+  import ModalBlur from '$lib/components/shared/ui/ModalBlur.svelte';

  let manga: Manga | null         = $state(null);
-  let chapters: Chapter[]         = $state([]);
  let loadingDetail               = $state(false);
-  let loadingChapters             = $state(false);
  let togglingLib                 = $state(false);
  let descExpanded                = $state(false);
  let folderOpen                  = $state(false);
@@ -43,8 +40,6 @@
  let loadingLinkList          = $state(false);
  let coverPickerOpen          = $state(false);

-  let originNavPage = app.navPage;
-
  const linkedIds = $derived(
    seriesState.previewManga
      ? (settingsState.settings.mangaLinks?.[seriesState.previewManga.id] ?? [])
@@ -56,12 +51,15 @@
  );

  const displayManga    = $derived(manga ?? seriesState.previewManga);
+  const mangaId         = $derived(seriesState.previewManga?.id ?? null);
+  const chapters        = $derived(mangaId != null ? seriesState.chaptersFor(mangaId) : []);
+  const loadingChapters = $derived(mangaId != null ? seriesState.isLoadingChapters(mangaId) : false);
  const totalCount      = $derived(chapters.length);
  const readCount       = $derived(chapters.filter((c) => c.read).length);
  const unreadCount     = $derived(totalCount - readCount);
  const downloadedCount = $derived(chapters.filter((c) => c.downloaded).length);
  const bookmarkCount   = $derived(chapters.filter((c) => c.bookmarked).length);
-  const inLibrary       = $derived(manga?.inLibrary ?? seriesState.previewManga?.inLibrary ?? false);
+  const inLibrary       = $derived((manga as Manga | null)?.inLibrary ?? seriesState.previewManga?.inLibrary ?? false);
  const scanlators      = $derived(
    [...new Set(chapters.map((c) => c.scanlator).filter((s): s is string => !!s?.trim()))],
  );
@@ -100,7 +98,7 @@
    const inProgress  = asc.find((c) => !c.read && (c.lastPageRead ?? 0) > 0);
    if (inProgress)   return { ch: inProgress, type: "continue" as const, resumePage: inProgress.lastPageRead! };
    const firstUnread = asc.find((c) => !c.read);
-    if (firstUnread)  return { ch: firstUnread, type: (anyRead ? "continue" : "start") as const, resumePage: null };
+    if (firstUnread)  return { ch: firstUnread, type: (anyRead ? "continue" as const : "start" as const), resumePage: null };
    return { ch: asc[0], type: "reread" as const, resumePage: null };
  });

@@ -112,16 +110,12 @@
    return `Continue · Ch.${ch.chapterNumber}${resumePage ? ` p.${resumePage}` : ""}`;
  });

-
-  let detailAbort: AbortController | null  = null;
-  let chapterAbort: AbortController | null = null;
-
+  let detailAbort: AbortController | null = null;

  function close() {
    detailAbort?.abort();
-    chapterAbort?.abort();
    setPreviewManga(null);
-    manga = null; chapters = []; descExpanded = false;
+    manga = null; descExpanded = false;
    folderOpen = false; creatingFolder = false; newFolderName = ""; fetchError = null;
  }

@@ -133,10 +127,14 @@
    linkPickerOpen = true;
    if (allMangaForLink.length) return;
    loadingLinkList = true;
-    getAdapter().getMangaList({})
-      .then((d) => { allMangaForLink = d.items; })
-      .catch(console.error)
-      .finally(() => { loadingLinkList = false; });
+    try {
+      const result = await getAdapter().getMangaList({});
+      allMangaForLink = result.items;
+    } catch (e) {
+      console.error(e);
+    } finally {
+      loadingLinkList = false;
+    }
  }

  function closeLinkPicker() { linkPickerOpen = false; }
@@ -145,91 +143,82 @@
    coverPickerOpen = true;
    if (allMangaForLink.length) return;
    loadingLinkList = true;
-    getAdapter().getMangaList({})
-      .then((d) => { allMangaForLink = d.items; })
-      .catch(console.error)
-      .finally(() => { loadingLinkList = false; });
+    try {
+      const result = await getAdapter().getMangaList({});
+      allMangaForLink = result.items;
+    } catch (e) {
+      console.error(e);
+    } finally {
+      loadingLinkList = false;
+    }
  }

  $effect(() => {
-    const shouldAutoLink = settingsState.settings.autoLinkOnOpen;
    const focal = seriesState.previewManga;
-    if (focal) {
-      originNavPage = app.navPage;
-      load(focal.id);
+    if (!focal) return;
+
+    untrack(() => {
+      loadDetail(focal.id);
+      seriesState.loadChapters(focal.id);
      loadCategories(focal.id);
+
+      const shouldAutoLink = settingsState.settings.autoLinkOnOpen;
      if (shouldAutoLink) {
        if (allMangaForLink.length) {
          autoLinkLibrary(focal, allMangaForLink)
-            .then(n => { if (n > 0) addToast({ kind: "success", title: "Series linked", body: `${n} new link${n === 1 ? "" : "s"} found` }); });
+            .then((n: number) => { if (n > 0) addToast({ kind: "success", title: "Series linked", body: `${n} new link${n === 1 ? "" : "s"} found` }); });
        } else {
          loadingLinkList = true;
-          getAdapter().getMangaList({})
-            .then((d) => {
-              allMangaForLink = d.items;
-              return autoLinkLibrary(focal, d.items);
-            })
-            .then(n => { if (n > 0) addToast({ kind: "success", title: "Series linked", body: `${n} new link${n === 1 ? "" : "s"} found` }); })
-            .catch(console.error)
-            .finally(() => { loadingLinkList = false; });
+          (async () => {
+            try {
+              const result = await getAdapter().getMangaList({});
+              allMangaForLink = result.items;
+              const n = await autoLinkLibrary(focal, result.items);
+              if (n > 0) addToast({ kind: "success", title: "Series linked", body: `${n} new link${n === 1 ? "" : "s"} found` });
+            } catch (e) {
+              console.error(e);
+            } finally {
+              loadingLinkList = false;
+            }
+          })();
        }
      }
-    }
+    });
  });

-  async function load(id: number) {
-    detailAbort?.abort(); chapterAbort?.abort();
-    const dCtrl = new AbortController(), cCtrl = new AbortController();
-    detailAbort = dCtrl; chapterAbort = cCtrl;
+  async function loadDetail(id: number) {
+    detailAbort?.abort();
+    const ctrl = new AbortController();
+    detailAbort = ctrl;
    manga = seriesState.previewManga as Manga;
-    chapters = []; descExpanded = false; fetchError = null;
-    loadingDetail = true; loadingChapters = true;
+    descExpanded = false; fetchError = null;
+    loadingDetail = true;

-    (async (): Promise<Manga> => {
-      const key = CACHE_KEYS.MANGA(id);
-      if (cache.has(key)) return cache.get(key, () => Promise.resolve(seriesState.previewManga as Manga)) as Promise<Manga>;
-      try {
-        return await getAdapter().fetchManga(String(id), dCtrl.signal);
-      } catch (e: any) {
-        if (e?.name === "AbortError") throw e;
-        const local = await getAdapter().getManga(String(id), dCtrl.signal);
-        if (local) return local;
-        throw new Error("Could not load manga details");
+    const key = CACHE_KEYS.MANGA(id);
+    try {
+      let fullManga: Manga;
+      if (cache.has(key)) {
+        fullManga = await (cache.get(key, () => Promise.resolve(seriesState.previewManga as Manga)) as Promise<Manga>);
+      } else {
+        try {
+          fullManga = await getAdapter().fetchManga(String(id), ctrl.signal);
+        } catch (e: any) {
+          if (e?.name === "AbortError") return;
+          const local = await getAdapter().getManga(String(id), ctrl.signal);
+          if (local) fullManga = local;
+          else throw new Error("Could not load manga details");
+        }
+        if (!cache.has(key)) cache.get(key, () => Promise.resolve(fullManga));
      }
-    })()
-      .then((fullManga) => {
-        if (dCtrl.signal.aborted) return;
-        if (!cache.has(CACHE_KEYS.MANGA(id)))
-          cache.get(CACHE_KEYS.MANGA(id), () => Promise.resolve(fullManga));
-        manga = fullManga; loadingDetail = false;
-      })
-      .catch((e) => {
-        if (e?.name === "AbortError") return;
-        manga = seriesState.previewManga as Manga;
-        fetchError = "Could not load full details — showing cached data";
-        loadingDetail = false;
-      });
-
-    getAdapter().getChapters(String(id), cCtrl.signal)
-      .then(async (nodes) => {
-        if (cCtrl.signal.aborted) return;
-        let sorted = [...nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
-        if (sorted.length === 0) {
-          try {
-            const fetched = await getAdapter().fetchChapters(String(id), cCtrl.signal);
-            if (!cCtrl.signal.aborted)
-              sorted = [...fetched].sort((a, b) => a.sourceOrder - b.sourceOrder);
-          } catch (e: any) {
-            if (e?.name === "AbortError") return;
-          }
-        }
-        if (!cCtrl.signal.aborted) {
-          chapters = sorted;
-          if (sorted.length > 0) checkAndMarkCompleted(id, sorted);
-        }
-      })
-      .catch(() => {})
-      .finally(() => { if (!cCtrl.signal.aborted) loadingChapters = false; });
+      if (ctrl.signal.aborted) return;
+      manga = fullManga;
+    } catch (e: any) {
+      if (e?.name === "AbortError") return;
+      manga = seriesState.previewManga as Manga;
+      fetchError = "Could not load full details — showing cached data";
+    } finally {
+      if (!ctrl.signal.aborted) loadingDetail = false;
+    }
  }

  async function toggleLibrary() {
@@ -257,58 +246,68 @@

  function openSeriesDetail() {
    if (!displayManga) return;
-    setActiveManga(displayManga);
-    setNavPage(originNavPage);
+    goto(`/series/${displayManga.id}`);
    close();
  }

-  function loadCategories(mangaId: number) {
+  function handleRead() {
+    if (!continueChapter || !displayManga) return;
+    const { ch, type, resumePage } = continueChapter;
+    if (type === "continue" && resumePage && resumePage > 1) {
+      const existing = seriesState.bookmarks.find((b) => b.chapterId === ch.id);
+      if (!existing || existing.pageNumber < resumePage) {
+        addBookmark({
+          mangaId:      displayManga.id,
+          mangaTitle:   displayManga.title,
+          thumbnailUrl: displayManga.thumbnailUrl,
+          chapterId:    ch.id,
+          chapterName:  ch.name,
+          pageNumber:   resumePage,
+        });
+      }
+    }
+    openReaderForChapter(ch, displayManga);
+    close();
+  }
+
+  function loadCategories(id: number) {
    catsLoading = true;
    getAdapter().getCategories()
-      .then((cats) => {
-        allCategories   = cats.filter((c) => c.id !== 0);
-        mangaCategories = allCategories.filter((c) => c.mangas?.nodes?.some((m) => m.id === mangaId));
+      .then((cats: Category[]) => {
+        allCategories   = cats.filter((c: Category) => c.id !== 0);
+        mangaCategories = allCategories.filter((c: Category) => c.mangas?.some((m: Manga) => m.id === id));
      })
      .catch(console.error)
      .finally(() => { catsLoading = false; });
  }

-  async function checkAndMarkCompleted(mangaId: number, chaps: Chapter[]) {
-    const mangaStatus = (manga ?? displayManga)?.status;
-    const isOngoing   = mangaStatus === "ONGOING";
+  async function checkAndMarkCompleted(id: number, chaps: Chapter[]) {
+    const isOngoing = (manga ?? displayManga)?.status === "ONGOING";
    if (!chaps.length || isOngoing) return;
-
    const allRead   = chaps.every((c) => c.read);
    const completed = allCategories.find((c) => c.name === "Completed");
    if (!completed) return;
-
    const inCompleted = mangaCategories.some((c) => c.id === completed.id);
    if (allRead && !inCompleted) {
-      await getAdapter().updateMangaCategories(String(mangaId), [completed.id], []).catch(console.error);
+      await getAdapter().updateMangaCategories(String(id), [completed.id], []).catch(console.error);
      mangaCategories = [...mangaCategories, completed];
    } else if (!allRead && inCompleted) {
-      await getAdapter().updateMangaCategories(String(mangaId), [], [completed.id]).catch(console.error);
+      await getAdapter().updateMangaCategories(String(id), [], [completed.id]).catch(console.error);
      mangaCategories = mangaCategories.filter((c) => c.id !== completed.id);
    }
  }

  async function toggleCategory(cat: Category) {
    if (!seriesState.previewManga) return;
-    const mangaId = seriesState.previewManga.id;
-    const inCat   = mangaCategories.some((c) => c.id === cat.id);
-    await getAdapter().updateMangaCategories(
-      String(mangaId),
-      inCat ? [] : [cat.id],
-      inCat ? [cat.id] : [],
-    ).catch(console.error);
+    const id    = seriesState.previewManga.id;
+    const inCat = mangaCategories.some((c) => c.id === cat.id);
+    await getAdapter().updateMangaCategories(String(id), inCat ? [] : [cat.id], inCat ? [cat.id] : []).catch(console.error);
    if (!inCat && !inLibrary) {
-      await getAdapter().addToLibrary(String(mangaId)).catch(console.error);
+      await getAdapter().addToLibrary(String(id)).catch(console.error);
      if (manga) manga = { ...manga, inLibrary: true };
      cache.clear(CACHE_KEYS.LIBRARY);
    }
-    mangaCategories = inCat
-      ? mangaCategories.filter((c) => c.id !== cat.id)
-      : [...mangaCategories, cat];
+    mangaCategories = inCat ? mangaCategories.filter((c) => c.id !== cat.id) : [...mangaCategories, cat];
  }

  async function handleFolderCreate() {
@@ -348,11 +347,11 @@
  onDestroy(() => {
    window.removeEventListener("keydown", onKey);
    detailAbort?.abort();
-    chapterAbort?.abort();
  });
 </script>

 {#if seriesState.previewManga}
+<ModalBlur blur={4} dim={0.72} />
 <div
  class="backdrop"
  role="button"
@@ -546,24 +545,7 @@
              </div>
            {/if}
            {#if continueChapter}
-              <button class="read-btn" onclick={() => {
-                const { ch, type, resumePage } = continueChapter!;
-                if (type === "continue" && resumePage && resumePage > 1) {
-                  const existing = seriesState.bookmarks.find((b) => b.chapterId === ch.id);
-                  if (!existing || existing.pageNumber < resumePage) {
-                    addBookmark({
-                      mangaId:      displayManga!.id,
-                      mangaTitle:   displayManga!.title,
-                      thumbnailUrl: displayManga!.thumbnailUrl,
-                      chapterId:    ch.id,
-                      chapterName:  ch.name,
-                      pageNumber:   resumePage,
-                    });
-                  }
-                }
-                openReader(ch, chapters, displayManga);
-                close();
-              }}>
+              <button class="read-btn" onclick={handleRead}>
                <Play size={12} weight="fill" />{continueLabel}
              </button>
            {/if}
@@ -674,15 +656,11 @@
  />
 {/if}

-
-
 <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 {
@@ -873,8 +851,8 @@
  .read-btn:hover { filter: brightness(1.1); }

  .desc-block { display: flex; flex-direction: column; gap: var(--sp-2); border-top: 1px solid var(--border-dim); padding-top: var(--sp-3); }
-  .desc       { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-base); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
-  .desc.desc-open { display: block; -webkit-line-clamp: unset; overflow: visible; }
+  .desc       { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-base); display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
+  .desc.desc-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
  .desc-toggle {
    display: flex; align-items: center; gap: var(--sp-1); align-self: flex-start;
    font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint);
@@ -4,6 +4,7 @@

  let {
    src,
+    id         = undefined,
    alt        = "",
    class: cls = "",
    loading    = "lazy",
@@ -13,6 +14,7 @@
    ...rest
  }: {
    src:       string | null | undefined;
+    id?:       string | number;
    alt?:      string;
    class?:    string;
    loading?:  string;
@@ -27,10 +29,14 @@
    return typeof url === "string" && url.trim() ? url.replace(/\/$/, "") : "http://127.0.0.1:4567";
  }

+  function withBust(url: string): string {
+    return id != null ? `${url}${url.includes('?') ? '&' : '?'}id=${id}` : url;
+  }
+
  function plainThumbUrl(path: string | null | undefined): string {
    if (!path) return "";
-    if (path.startsWith("http")) return path;
-    return `${getServerUrl()}${path}`;
+    const base = path.startsWith("http") ? path : `${getServerUrl()}${path}`;
+    return withBust(base);
  }

  const isAuth = $derived((settingsState.settings.serverAuthMode ?? "NONE") !== "NONE");
@@ -45,15 +51,15 @@

    if (!_isAuth || !_src) { blobUrl = ""; return; }

-    const id      = ++reqId;
+    const myId    = ++reqId;
    const bareUrl = _src.startsWith("http") ? _src : `${getServerUrl()}${_src}`;
-    getBlobUrl(bareUrl, _priority)
-      .then(u  => { if (id === reqId) blobUrl = u; })
-      .catch(() => { if (id === reqId) blobUrl = ""; });
+    getBlobUrl(withBust(bareUrl), _priority)
+      .then(u  => { if (myId === reqId) blobUrl = u; })
+      .catch(() => { if (myId === reqId) blobUrl = ""; });
  });

-  const plainUrl  = $derived(plainThumbUrl(src));
-  const resolved  = $derived(isAuth ? (blobUrl || plainUrl) || undefined : plainUrl || undefined);
+  const plainUrl = $derived(plainThumbUrl(src));
+  const resolved = $derived(isAuth ? (blobUrl || plainUrl) || undefined : plainUrl || undefined);
 </script>

 <img src={resolved} {alt} class={cls} {loading} {decoding} {onerror} {...rest} />
@@ -0,0 +1,40 @@
+<script lang="ts">
+  let {
+    blur    = 8,
+    dim     = 0.6,
+    zIndex  = 'var(--z-settings)',
+    animate = true,
+  }: {
+    blur?:    number
+    dim?:     number
+    zIndex?:  string | number
+    animate?: boolean
+  } = $props()
+</script>
+
+<div
+  class="modal-blur"
+  class:animate
+  style="--blur:{blur}px; --dim:{dim}; --z:{zIndex}"
+></div>
+
+<style>
+  .modal-blur {
+    position: fixed;
+    inset: 0;
+    backdrop-filter: blur(var(--blur));
+    -webkit-backdrop-filter: blur(var(--blur));
+    background: rgba(0, 0, 0, var(--dim));
+    pointer-events: none;
+    z-index: var(--z);
+  }
+
+  .modal-blur.animate {
+    animation: blur-in 0.14s ease both;
+  }
+
+  @keyframes blur-in {
+    from { opacity: 0 }
+    to   { opacity: 1 }
+  }
+</style>
@@ -10,6 +10,7 @@
  import { markManyRead }     from "$lib/request-manager/chapters";
  import type { Tracker, TrackRecord, TrackSearch } from "$lib/types";
  import type { Chapter }     from "$lib/types";
+  import ModalBlur        from '$lib/components/shared/ui/ModalBlur.svelte'

  let { mangaId, mangaTitle, onClose }: {
    mangaId:    number;
@@ -250,6 +251,7 @@
  }
 }} />

+<ModalBlur blur={4} dim={0.68} />
 <div class="backdrop" role="presentation" onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
  <div class="modal" role="dialog" aria-label="Tracking">

@@ -497,6 +499,7 @@
 {#if confirmUnbindId !== null}
  {@const rec = records.find(r => r.id === confirmUnbindId)}
  {@const trk = rec ? trackerFor(rec.trackerId) : null}
+  <ModalBlur blur={2} dim={0.45} zIndex="calc(var(--z-settings) + 1)" />
  <div class="confirm-backdrop" role="button" tabindex="-1" aria-label="Cancel"
    onclick={() => confirmUnbindId = null}
    onkeydown={(e) => { if (e.key === "Escape") confirmUnbindId = null; }}>
@@ -515,10 +518,9 @@

 <style>
  .backdrop {
-    position: fixed; inset: 0; background: rgba(0,0,0,0.68);
+    position: fixed; inset: 0;
    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 {
@@ -646,7 +648,7 @@
  .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; }

-  .confirm-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-settings) + 1); background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; animation: fadeIn 0.1s ease both; }
+  .confirm-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-settings) + 1); display: flex; align-items: center; justify-content: center; animation: fadeIn 0.1s ease both; }
  .confirm-modal { background: var(--bg-surface); border: 1px solid var(--border-dim); border-radius: var(--radius-xl); padding: var(--sp-5); width: 260px; display: flex; flex-direction: column; gap: var(--sp-3); box-shadow: 0 16px 48px rgba(0,0,0,0.5); animation: scaleIn 0.15s ease both; }
  .confirm-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); margin: 0; }
  .confirm-body  { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); line-height: 1.5; margin: 0; letter-spacing: var(--tracking-wide); }
@@ -1,4 +1,5 @@
 const DEFAULT_URL = 'http://127.0.0.1:4567'
+const SKEW_MS     = 60_000 * 2

 interface AuthConfig {
  baseUrl: string
@@ -10,74 +11,61 @@ interface AuthConfig {
 export interface UiAuthDebugStatus {
  mode:               'NONE' | 'BASIC_AUTH' | 'UI_LOGIN'
  hasSession:         boolean
-  hasRefreshToken:    boolean
  accessExpiresAt:    number | null
-  refreshExpiresAt:   number | null
  accessExpiresInMs:  number | null
-  refreshExpiresInMs: number | null
  shouldRefreshSoon:  boolean
  refreshInFlight:    boolean
  skewMs:             number
 }

-const SKEW_MS = 60_000 * 2
-
 let config: AuthConfig = { baseUrl: DEFAULT_URL, mode: 'NONE' }

-let accessToken:      string | null = null
-let refreshToken:     string | null = null
-let accessExpiresAt:  number | null = null
-let refreshExpiresAt: number | null = null
-let refreshInFlight                 = false
+let accessToken:     string | null = null
+let refreshToken:    string | null = null
+let accessExpiresAt: number | null = null
+let refreshInFlight                = false

 function parseExpiry(token: string): number | null {
  try {
    const payload = JSON.parse(atob(token.split('.')[1]))
    return typeof payload.exp === 'number' ? payload.exp * 1000 : null
-  } catch {
-    return null
-  }
+  } catch { return null }
 }

 export const authSession = {
  clearTokens() {
-    accessToken      = null
-    refreshToken     = null
-    accessExpiresAt  = null
-    refreshExpiresAt = null
+    accessToken     = null
+    refreshToken    = null
+    accessExpiresAt = null
  },
 }

-export function getUIAccessToken(): string | null {
-  return accessToken
-}
+export function getUIAccessToken(): string | null { return accessToken }

 export function getUiAuthDebugStatus(): UiAuthDebugStatus {
-  const now = Date.now()
-  const accessExpiresInMs  = accessExpiresAt  !== null ? accessExpiresAt  - now : null
-  const refreshExpiresInMs = refreshExpiresAt !== null ? refreshExpiresAt - now : null
+  const now               = Date.now()
+  const accessExpiresInMs = accessExpiresAt !== null ? accessExpiresAt - now : null
  return {
-    mode:               config.mode,
-    hasSession:         accessToken  !== null,
-    hasRefreshToken:    refreshToken !== null,
+    mode:              config.mode,
+    hasSession:        accessToken !== null,
    accessExpiresAt,
-    refreshExpiresAt,
    accessExpiresInMs,
-    refreshExpiresInMs,
-    shouldRefreshSoon:  accessExpiresInMs !== null && accessExpiresInMs < SKEW_MS,
+    shouldRefreshSoon: accessExpiresInMs !== null && accessExpiresInMs < SKEW_MS,
    refreshInFlight,
-    skewMs:             SKEW_MS,
+    skewMs:            SKEW_MS,
  }
 }

 export function configureAuth(
  baseUrl: string,
-  mode: 'NONE' | 'BASIC_AUTH' | 'UI_LOGIN',
-  user?: string,
-  pass?: string,
+  mode:    'NONE' | 'BASIC_AUTH' | 'UI_LOGIN',
+  user?:   string,
+  pass?:   string,
 ): void {
-  config = { baseUrl: baseUrl.replace(/\/$/, ''), mode, user, pass }
-  authSession.clearTokens()
+  config      = { baseUrl: baseUrl.replace(/\/$/, ''), mode, user, pass }
+  accessToken     = null
+  refreshToken    = null
+  accessExpiresAt = null
 }

 export function authHeaders(): Record<string, string> {
@@ -90,16 +78,18 @@ export function authHeaders(): Record<string, string> {
  return {}
 }

-async function gqlRaw(query: string, variables?: Record<string, unknown>): Promise<unknown> {
+async function gql<T>(query: string, variables?: Record<string, unknown>, bare = false): Promise<T> {
+  const headers: Record<string, string> = { 'Content-Type': 'application/json' }
+  if (!bare) Object.assign(headers, authHeaders())
  const res = await fetch(`${config.baseUrl}/api/graphql`, {
    method:  'POST',
-    headers: { 'Content-Type': 'application/json', ...authHeaders() },
+    headers,
    body:    JSON.stringify({ query, variables }),
  })
  if (!res.ok) throw new Error(`HTTP ${res.status}`)
  const json = await res.json()
  if (json.errors?.length) throw new Error(json.errors[0].message)
-  return json.data
+  return json.data as T
 }

 export async function probeServer(): Promise<'ok' | 'auth_required' | 'unreachable'> {
@@ -107,7 +97,7 @@ export async function probeServer(): Promise<'ok' | 'auth_required' | 'unreachab
    const res = await fetch(`${config.baseUrl}/api/graphql`, {
      method:  'POST',
      headers: { 'Content-Type': 'application/json', ...authHeaders() },
-      body:    JSON.stringify({ query: '{ aboutServer { name } }' }),
+      body:    JSON.stringify({ query: '{ settings { authMode } }' }),
    })
    if (res.status === 401 || res.status === 403) return 'auth_required'
    if (!res.ok) return 'unreachable'
@@ -116,17 +106,7 @@ export async function probeServer(): Promise<'ok' | 'auth_required' | 'unreachab
      /unauthorized|unauthenticated/i.test(e.message)
    )
    return isAuthError ? 'auth_required' : 'ok'
-  } catch {
-    return 'unreachable'
-  }
-}
-
-export async function loginBasic(user: string, pass: string): Promise<void> {
-  config.user = user
-  config.pass = pass
-  config.mode = 'BASIC_AUTH'
-  const probe = await probeServer()
-  if (probe !== 'ok') throw new Error('Invalid credentials')
+  } catch { return 'unreachable' }
 }

 const LOGIN_MUTATION = `
@@ -145,30 +125,29 @@ const REFRESH_MUTATION = `
  }
 `

-export async function loginUI(user: string, pass: string): Promise<void> {
-  const data = await gqlRaw(LOGIN_MUTATION, { username: user, password: pass }) as {
-    login: { accessToken: string; refreshToken: string }
+export async function loginBasic(user: string, pass: string): Promise<void> {
+  const prev = { user: config.user, pass: config.pass, mode: config.mode }
+  config.user = user
+  config.pass = pass
+  config.mode = 'BASIC_AUTH'
+  const probe = await probeServer()
+  if (probe !== 'ok') {
+    config.user = prev.user
+    config.pass = prev.pass
+    config.mode = prev.mode as typeof config.mode
+    throw new Error('Invalid credentials')
  }
-  accessToken      = data.login.accessToken
-  refreshToken     = data.login.refreshToken
-  accessExpiresAt  = parseExpiry(accessToken)
-  refreshExpiresAt = parseExpiry(refreshToken)
-  config.mode      = 'UI_LOGIN'
-  config.user      = user
 }

-export async function refreshAccessToken(): Promise<boolean> {
-  if (!refreshToken) return false
-  try {
-    const data = await gqlRaw(REFRESH_MUTATION, { refreshToken }) as {
-      refreshToken: { accessToken: string }
-    }
-    accessToken     = data.refreshToken.accessToken
-    accessExpiresAt = parseExpiry(accessToken)
-    return true
-  } catch {
-    return false
-  }
+export async function loginUI(user: string, pass: string): Promise<void> {
+  const data = await gql<{ login: { accessToken: string; refreshToken: string } }>(
+    LOGIN_MUTATION, { username: user, password: pass }, true
+  )
+  accessToken     = data.login.accessToken
+  refreshToken    = data.login.refreshToken
+  accessExpiresAt = parseExpiry(accessToken)
+  config.mode     = 'UI_LOGIN'
+  config.user     = user
 }

 export async function refreshUiAccessToken(force = false): Promise<string | null> {
@@ -179,9 +158,15 @@ export async function refreshUiAccessToken(force = false): Promise<string | null
  if (refreshInFlight) return accessToken
  refreshInFlight = true
  try {
-    const ok = await refreshAccessToken()
-    return ok ? accessToken : null
+    const data = await gql<{ refreshToken: { accessToken: string } }>(
+      REFRESH_MUTATION, { refreshToken }
+    )
+    accessToken     = data.refreshToken.accessToken
+    accessExpiresAt = parseExpiry(accessToken)
+    return accessToken
+  } catch {
+    return null
  } finally {
    refreshInFlight = false
  }
-}
+}
@@ -1,13 +1,13 @@
-import { fetch as tauriFetch } from "@tauri-apps/plugin-http";
-import { settingsState } from "$lib/state/settings.svelte";
-import { getUIAccessToken } from "$lib/core/auth";
+import { platformService }    from "$lib/platform-service";
+import { settingsState }      from "$lib/state/settings.svelte";
+import { getUIAccessToken }   from "$lib/core/auth";

 const cache    = new Map<string, string>();
 const inflight = new Map<string, Promise<string>>();
 const MAX_CONCURRENT = 6;
-let   active   = 0;
+let   active         = 0;
 let   drainScheduled = false;
-let   clearing = false;
+let   generation     = 0;

 interface QueueEntry {
  url:      string;
@@ -19,25 +19,24 @@ interface QueueEntry {
 const queue: QueueEntry[] = [];

 async function getAuthHeaders(): Promise<Record<string, string>> {
-  const mode = settingsState.serverAuthMode ?? "NONE";
+  const mode = settingsState.settings.serverAuthMode ?? "NONE";
  if (mode === "UI_LOGIN") {
-    const token = await getUIAccessToken();
+    const token = getUIAccessToken();
    return token ? { Authorization: `Bearer ${token}` } : {};
  }
  if (mode === "BASIC_AUTH") {
-    const user = settingsState.serverAuthUser?.trim() ?? "";
-    const pass = settingsState.serverAuthPass?.trim() ?? "";
+    const user = settingsState.settings.serverAuthUser?.trim() ?? "";
+    const pass = settingsState.settings.serverAuthPass?.trim() ?? "";
    return user && pass ? { Authorization: `Basic ${btoa(`${user}:${pass}`)}` } : {};
  }
  return {};
 }

-async function doFetch(url: string): Promise<string> {
+async function doFetch(url: string, gen: number): Promise<string> {
  const headers = await getAuthHeaders();
-  const res = await tauriFetch(url, { method: "GET", headers });
-  if (!res.ok) throw new Error(`${res.status}`);
-  const blob = await res.blob();
-  if (clearing) throw new DOMException("Cancelled", "AbortError");
+  if (gen !== generation) throw new DOMException("Cancelled", "AbortError");
+  const blob    = await platformService.fetchImage(url, headers);
+  if (gen !== generation) throw new DOMException("Cancelled", "AbortError");
  const blobUrl = URL.createObjectURL(blob);
  cache.set(url, blobUrl);
  return blobUrl;
@@ -57,8 +56,9 @@ function drain() {
  drainScheduled = false;
  while (active < MAX_CONCURRENT && queue.length > 0) {
    const entry = queue.shift()!;
+    const gen   = generation;
    active++;
-    doFetch(entry.url)
+    doFetch(entry.url, gen)
      .then(entry.resolve, entry.reject)
      .finally(() => { active--; drain(); });
  }
@@ -109,6 +109,7 @@ export function preloadBlobUrls(urls: string[], basePriority = 0): void {
 export function revokeBlobUrl(url: string): void {
  const blob = cache.get(url);
  if (blob) { URL.revokeObjectURL(blob); cache.delete(url); }
+  inflight.delete(url);
 }

 export function deprioritizeQueue(): void {
@@ -125,10 +126,9 @@ export function cancelQueuedFetches(): void {
 }

 export function clearBlobCache(): void {
-  clearing = true;
+  generation++;
  cancelQueuedFetches();
+  inflight.clear();
  cache.forEach(blob => URL.revokeObjectURL(blob));
  cache.clear();
-  inflight.clear();
-  clearing = false;
 }
@@ -1,5 +1,5 @@
-import { getBlobUrl, preloadBlobUrls } from "$lib/core/cache/imageCache";
-import { settingsState }               from "$lib/state/settings.svelte";
+import { getBlobUrl, preloadBlobUrls, revokeBlobUrl } from "$lib/core/cache/imageCache";
+import { settingsState }                               from "$lib/state/settings.svelte";

 const pageCache        = new Map<number, string[]>();
 const inflight         = new Map<number, Promise<string[]>>();
@@ -90,10 +90,17 @@ export function preloadImage(url: string, useBlob: boolean): void {
 }

 export function clearResolvedUrlCache(): void {
+  for (const promise of resolvedUrlCache.values()) {
+    promise.then(blobUrl => { if (blobUrl) revokeBlobUrl(blobUrl); }).catch(() => {});
+  }
  resolvedUrlCache.clear();
  aspectCache.clear();
 }

+export function getCachedAspect(url: string): number | undefined {
+  return aspectCache.get(url);
+}
+
 export function clearPageCache(chapterId?: number): void {
  if (chapterId !== undefined) {
    pageCache.delete(chapterId);
@@ -1,4 +1,5 @@
 import { platformService } from '$lib/platform-service'
+import { settingsState }   from '$lib/state/settings.svelte'
 import type { Manga }      from '$lib/types/manga'
 import type { Chapter }    from '$lib/types/chapter'

@@ -9,11 +10,8 @@ const APP_BUTTONS = [

 const FALLBACK_IMAGE = 'moku_logo'

-let sessionStart: number | null = null
-
-function isPublicUrl(url: string | null | undefined): boolean {
-  return typeof url === 'string' && url.startsWith('https://')
-}
+let sessionStart:  number | null = null
+let activeMangaId: number | null = null

 function trunc(s: string, max = 128): string {
  return s.length <= max ? s : `${s.slice(0, max - 1)}…`
@@ -24,34 +22,54 @@ function formatChapter(chapter: Chapter): string {
  return `Chapter ${Number.isInteger(n) ? n : n.toFixed(1)}`
 }

-export async function initRpc(): Promise<void> {
-  if (!platformService.isSupported('discord-rpc')) return
-  sessionStart = Date.now()
+// Suwayomi always returns the proxy path (/api/v1/manga/{id}/thumbnail), never the raw CDN URL.
+// The proxy URL is only useful to Discord when the server is publicly reachable over HTTPS.
+// For localhost setups cover art falls back to the app logo until Suwayomi exposes rawThumbnailUrl.
+function resolveCoverUrl(manga: Manga): string {
+  const serverBase = (settingsState.settings.serverUrl ?? '').replace(/\/$/, '')
+  if (!serverBase.startsWith('https://')) return FALLBACK_IMAGE
+  const path = manga.thumbnailUrl?.startsWith('/') ? manga.thumbnailUrl : `/api/v1/manga/${manga.id}/thumbnail`
+  return `${serverBase}${path}`
 }

-export async function destroyRpc(): Promise<void> {
-  if (!platformService.isSupported('discord-rpc')) return
-  sessionStart = null
-}
-
-export async function setReading(manga: Manga, chapter: Chapter): Promise<void> {
-  if (!platformService.isSupported('discord-rpc')) return
-  await platformService.setDiscordPresence({
+function buildPresence(manga: Manga, chapter: Chapter, coverUrl: string) {
+  return {
    details:    trunc(manga.title),
    state:      `${formatChapter(chapter)}  ·  Reading`,
    timestamps: { start: sessionStart ?? Date.now() },
    assets: {
-      largeImage: isPublicUrl(manga.thumbnailUrl) ? manga.thumbnailUrl : FALLBACK_IMAGE,
+      largeImage: coverUrl,
      largeText:  trunc(manga.title),
      smallImage: FALLBACK_IMAGE,
      smallText:  'Moku',
    },
    buttons: APP_BUTTONS,
-  })
+  }
+}
+
+export async function initRpc(): Promise<void> {
+  if (!platformService.isSupported('discord-rpc')) return
+  if (!settingsState.settings.discordRpc) return
+  sessionStart = Date.now()
+}
+
+export async function destroyRpc(): Promise<void> {
+  if (!platformService.isSupported('discord-rpc')) return
+  sessionStart  = null
+  activeMangaId = null
+  await platformService.clearDiscordPresence()
+}
+
+export async function setReading(manga: Manga, chapter: Chapter): Promise<void> {
+  if (!platformService.isSupported('discord-rpc')) return
+  if (!settingsState.settings.discordRpc) return
+  activeMangaId = manga.id
+  await platformService.setDiscordPresence(buildPresence(manga, chapter, resolveCoverUrl(manga)))
 }

 export async function setIdle(): Promise<void> {
  if (!platformService.isSupported('discord-rpc')) return
+  if (!settingsState.settings.discordRpc) return
  await platformService.setDiscordPresence({
    details:    'Browsing',
    timestamps: { start: sessionStart ?? Date.now() },
@@ -62,5 +80,6 @@ export async function setIdle(): Promise<void> {

 export async function clearReading(): Promise<void> {
  if (!platformService.isSupported('discord-rpc')) return
+  if (!settingsState.settings.discordRpc) return
  await platformService.clearDiscordPresence()
 }
@@ -1,16 +1,14 @@
 import { platformService } from '$lib/platform-service'
-import { seriesState }     from '$lib/state/series.svelte'
+import { settingsState }   from '$lib/state/settings.svelte'
 import { addToast }        from '$lib/state/notifications.svelte'
 import type { Manga }      from '$lib/types'

-function sanitizeTitle(title: string): string {
-  return title.replace(/[\\/:*?"<>|]/g, '').replace(/\s+/g, ' ').trim()
+function sanitize(s: string): string {
+  return s.replace(/[\\/:*?"<>|]/g, '').replace(/\s+/g, ' ').trim()
 }

-async function getDownloadsRoot(): Promise<string> {
-  let root = (seriesState.settings as any).downloadsPath?.trim() ?? ''
-  if (!root) root = await platformService.getDefaultDownloadsPath().catch(() => '')
-  return root
+function getDownloadsRoot(): string {
+  return settingsState.settings?.serverDownloadsPath?.trim() ?? ''
 }

 function join(root: string, ...parts: string[]): string {
@@ -18,31 +16,42 @@ function join(root: string, ...parts: string[]): string {
  return [root.replace(/[/\\]$/, ''), ...parts].join(sep)
 }

-export async function openMangaFolder(manga: Manga): Promise<void> {
+function checkSupported(): boolean {
  if (!platformService.isSupported('filesystem')) {
    addToast({ kind: 'info', title: 'Desktop only', body: 'Opening folders requires the desktop app.' })
-    return
+    return false
  }
-  const root = await getDownloadsRoot()
-  if (!root) return
-  await platformService.openPath(join(root, 'mangas', sanitizeTitle(manga.title))).catch(console.error)
+  return true
 }

-export async function openCustomFolder(path: string): Promise<void> {
-  if (!platformService.isSupported('filesystem')) {
-    addToast({ kind: 'info', title: 'Desktop only', body: 'Opening folders requires the desktop app.' })
-    return
+function checkRoot(root: string): boolean {
+  if (!root) {
+    addToast({ kind: 'error', title: 'No downloads path set', body: 'Configure it in Settings → Storage' })
+    return false
  }
-  if (!path?.trim()) return
+  return true
+}
+
+export async function openMangaFolder(manga: Manga): Promise<void> {
+  if (!checkSupported()) return
+  const root   = getDownloadsRoot()
+  if (!checkRoot(root)) return
+  const source = (manga as any).source?.displayName ?? (manga as any).source?.name ?? ''
+  const path   = source
+    ? join(root, 'mangas', sanitize(source), sanitize(manga.title))
+    : join(root, 'mangas', sanitize(manga.title))
  await platformService.openPath(path).catch(console.error)
 }

 export async function openDownloadsFolder(): Promise<void> {
-  if (!platformService.isSupported('filesystem')) {
-    addToast({ kind: 'info', title: 'Desktop only', body: 'Opening folders requires the desktop app.' })
-    return
-  }
-  const root = await getDownloadsRoot()
-  if (!root) return
-  await platformService.openPath(join(root, 'mangas')).catch(console.error)
+  if (!checkSupported()) return
+  const root = getDownloadsRoot()
+  if (!checkRoot(root)) return
+  await platformService.openPath(root).catch(console.error)
+}
+
+export async function openCustomFolder(path: string): Promise<void> {
+  if (!checkSupported()) return
+  if (!path?.trim()) return
+  await platformService.openPath(path).catch(console.error)
 }
@@ -3,6 +3,7 @@ import { getCurrentWindow }                                from '@tauri-apps/api
 import { listen }                                          from '@tauri-apps/api/event'
 import { open }                                            from '@tauri-apps/plugin-dialog'
 import { readFile, writeFile }                             from '@tauri-apps/plugin-fs'
+import { fetch as tauriFetch }                             from '@tauri-apps/plugin-http'
 import { open as openUrl }                                 from '@tauri-apps/plugin-shell'
 import { getVersion }                                      from '@tauri-apps/api/app'
 import { connect, disconnect, setActivity, clearActivity } from 'tauri-plugin-discord-rpc-api'
@@ -40,7 +41,11 @@ export class TauriAdapter implements PlatformAdapter {

  async loadStore(key: string): Promise<unknown> {
    try {
-      return await invoke<unknown>('load_store', { key })
+      const raw = await invoke<unknown>('load_store', { key })
+      if (typeof raw === 'string') {
+        try { return JSON.parse(raw) } catch { return null }
+      }
+      return raw
    } catch {
      return null
    }
@@ -112,6 +117,12 @@ export class TauriAdapter implements PlatformAdapter {
    return invoke('get_auto_backup_dir')
  }

+  async fetchImage(url: string, headers: Record<string, string>): Promise<Blob> {
+    const res = await tauriFetch(url, { method: 'GET', headers })
+    if (!res.ok) throw new Error(`${res.status}`)
+    return res.blob()
+  }
+
  async launchServer(config: ServerLaunchConfig): Promise<void> {
    await invoke('spawn_server', {
      binary:       config.binary      ?? '',
@@ -93,6 +93,8 @@ export interface PlatformAdapter {
  migrateDownloads(src: string, dst: string): Promise<void>
  getAutoBackupDir():                      Promise<string>

+  fetchImage(url: string, headers: Record<string, string>): Promise<Blob>
+
  launchServer(config: ServerLaunchConfig): Promise<void>
  stopServer():                             Promise<void>
  getServerStatus():                        Promise<'running' | 'stopped' | 'error'>
@@ -61,6 +61,12 @@ export class WebAdapter implements PlatformAdapter {
  async migrateDownloads(_src: string, _dst: string): Promise<void> {}
  async getAutoBackupDir(): Promise<string> { return '' }

+  async fetchImage(url: string, headers: Record<string, string>): Promise<Blob> {
+    const res = await fetch(url, { method: 'GET', headers })
+    if (!res.ok) throw new Error(`${res.status}`)
+    return res.blob()
+  }
+
  async launchServer(_config: ServerLaunchConfig): Promise<void> {}
  async stopServer(): Promise<void> {}
  async getServerStatus(): Promise<'running' | 'stopped' | 'error'> { return 'stopped' }
@@ -42,6 +42,8 @@ export const platformService = {
  migrateDownloads:(src: string, dst: string)              => get().migrateDownloads(src, dst),
  getAutoBackupDir:()                                      => get().getAutoBackupDir(),

+  fetchImage:      (url: string, headers: Record<string, string>) => get().fetchImage(url, headers),
+
  launchServer:    (c: ServerLaunchConfig)                 => get().launchServer(c),
  stopServer:      ()                                      => get().stopServer(),
  getServerStatus: ()                                      => get().getServerStatus(),
@@ -1,6 +1,4 @@
-import { getAdapter }  from "$lib/request-manager";
-import { seriesState } from "$lib/state/series.svelte";
-import { readerState } from "$lib/state/reader.svelte";
+import { getAdapter }   from "$lib/request-manager";
 import type { Chapter } from "$lib/types";

 export async function getChapters(mangaId: number, signal?: AbortSignal): Promise<Chapter[]> {
@@ -11,78 +9,25 @@ export async function fetchChapters(mangaId: number, signal?: AbortSignal): Prom
  return getAdapter().fetchChapters(String(mangaId), signal);
 }

-export async function loadChapters(mangaId: string) {
-  seriesState.chaptersLoading = true;
-  seriesState.chaptersError   = null;
-  try {
-    seriesState.chapters = await getAdapter().getChapters(mangaId);
-  } catch (e) {
-    seriesState.chaptersError = String(e);
-  } finally {
-    seriesState.chaptersLoading = false;
-  }
-}
-
-export async function loadChapterPages(chapterId: string, signal?: AbortSignal) {
-  readerState.pagesLoading = true;
-  readerState.pagesError   = null;
-  try {
-    readerState.pages = await getAdapter().getChapterPages(chapterId, signal);
-  } catch (e) {
-    if (e instanceof DOMException && e.name === "AbortError") return;
-    readerState.pagesError = String(e);
-  } finally {
-    readerState.pagesLoading = false;
-  }
-}
-
-export async function markChapterRead(id: number, read: boolean) {
+export async function markChapterRead(id: number, read: boolean): Promise<void> {
  await getAdapter().markChapterRead(String(id), read);
-  const chapter = seriesState.chapters.find(c => c.id === id);
-  if (chapter) chapter.read = read;
 }

-export async function markChaptersRead(ids: number[], read: boolean) {
+export async function markChaptersRead(ids: number[], read: boolean): Promise<void> {
  await getAdapter().markChaptersRead(ids.map(String), read);
-  const idSet = new Set(ids);
-  for (const c of seriesState.chapters) {
-    if (idSet.has(c.id)) c.read = read;
-  }
 }

-export async function markRead(id: string, read: boolean) {
-  await getAdapter().markChapterRead(id, read);
-  const numId   = Number(id);
-  const chapter = seriesState.chapters.find(c => c.id === numId);
-  if (chapter) chapter.read = read;
-}
-
-export async function markManyRead(ids: string[], read: boolean) {
+export async function markManyRead(ids: string[], read: boolean): Promise<void> {
  await getAdapter().markChaptersRead(ids, read);
-  const numIds = new Set(ids.map(Number));
-  for (const c of seriesState.chapters) {
-    if (numIds.has(c.id)) c.read = read;
-  }
 }

 export async function updateChaptersProgress(
  ids: string[],
  patch: { isRead?: boolean; isBookmarked?: boolean; lastPageRead?: number },
-) {
+): Promise<void> {
  await getAdapter().updateChaptersProgress(ids, patch);
-  const numIds = new Set(ids.map(Number));
-  for (const c of seriesState.chapters) {
-    if (!numIds.has(c.id)) continue;
-    if (patch.isRead       !== undefined) c.read         = patch.isRead;
-    if (patch.isBookmarked !== undefined) c.bookmarked   = patch.isBookmarked;
-    if (patch.lastPageRead !== undefined) c.lastPageRead = patch.lastPageRead;
-  }
 }

-export async function deleteDownloadedChapters(ids: number[]) {
+export async function deleteDownloadedChapters(ids: number[]): Promise<void> {
  await getAdapter().deleteDownloadedChapters(ids.map(String));
-  const idSet = new Set(ids);
-  for (const c of seriesState.chapters) {
-    if (idSet.has(c.id)) c.downloaded = false;
-  }
 }
@@ -1,4 +1,5 @@
 import { getAdapter } from "$lib/request-manager";
+import type { ValidateBackupResult, RestoreStatus } from "$lib/server-adapters/types";

 export async function getAboutServer() {
  return getAdapter().getAboutServer();
@@ -6,4 +7,12 @@ export async function getAboutServer() {

 export async function getAboutWebUI() {
  return getAdapter().getAboutWebUI();
+}
+
+export async function restoreBackup(file: File): Promise<{ id: string; status: RestoreStatus }> {
+  return getAdapter().restoreBackup(file);
+}
+
+export async function validateBackup(file: File): Promise<ValidateBackupResult> {
+  return getAdapter().validateBackup(file);
 }
@@ -79,15 +79,6 @@ export const CLEAR_DOWNLOADER = `
  }
 `

-export const FETCH_SOURCE_MANGA = `
-  mutation FetchSourceManga($source: LongString!, $type: FetchSourceMangaType!, $page: Int!, $query: String, $filters: [FilterChangeInput!]) {
-    fetchSourceManga(input: { source: $source, type: $type, page: $page, query: $query, filters: $filters }) {
-      mangas { id title thumbnailUrl inLibrary }
-      hasNextPage
-    }
-  }
-`
-
 export const SET_DOWNLOADS_PATH = `
  mutation SetDownloadsPath($path: String!) {
    setSettings(input: { settings: { downloadsPath: $path } }) {
@@ -16,6 +16,8 @@ import type {
  TrackRecordPatch,
  AboutServer,
  AboutWebUI,
+  RestoreStatus,
+  ValidateBackupResult,
 } from '$lib/server-adapters/types'
 import type { DownloadStatus } from '$lib/types/api'
 import type { Manga, Chapter, Extension, Source, Tracker, TrackRecord, Category } from '$lib/types'
@@ -23,12 +25,14 @@ import {
  GET_LIBRARY,
  GET_MANGA,
  GET_CATEGORIES,
+  GET_DOWNLOADS_PATH,
  FETCH_MANGA,
  UPDATE_MANGA,
  UPDATE_MANGAS,
  UPDATE_MANGA_CATEGORIES,
  UPDATE_MANGAS_CATEGORIES,
  CREATE_CATEGORY,
+  UPDATE_CATEGORY,
  DELETE_CATEGORY,
  UPDATE_CATEGORY_ORDER,
  UPDATE_CATEGORY_MANGA,
@@ -37,9 +41,11 @@ import {
  UPDATE_STOP,
  SET_MANGA_META,
  DELETE_MANGA_META,
+  CREATE_BACKUP,
  FETCH_SOURCE_MANGA,
  LIBRARY_UPDATE_STATUS,
  MANGAS_BY_GENRE,
+  POLL_RESTORE_STATUS,
 } from './manga'
 import {
  GET_CHAPTERS,
@@ -64,16 +70,26 @@ import {
  START_DOWNLOADER,
  STOP_DOWNLOADER,
  CLEAR_DOWNLOADER,
+  SET_DOWNLOADS_PATH,
+  SET_LOCAL_SOURCE_PATH,
 } from './downloads'
 import {
  GET_EXTENSIONS,
  GET_SOURCES,
+  GET_SOURCE_SETTINGS,
+  GET_SETTINGS,
  GET_SERVER_SECURITY,
  FETCH_EXTENSIONS,
  UPDATE_EXTENSION,
  UPDATE_EXTENSIONS,
  INSTALL_EXTERNAL_EXTENSION,
+  UPDATE_SOURCE_PREFERENCE,
+  SET_SOURCE_META,
+  DELETE_SOURCE_META,
+  SET_EXTENSION_REPOS,
  SET_SERVER_AUTH,
+  CLEAR_CACHED_IMAGES,
+  RESET_SETTINGS,
 } from './extensions'
 import {
  GET_TRACKERS,
@@ -85,11 +101,22 @@ import {
  UNLINK_TRACK,
  TRACK_PROGRESS,
  UPDATE_TRACK,
+  LOGIN_TRACKER_CREDENTIALS,
+  LOGOUT_TRACKER,
+  LOGIN_TRACKER_OAUTH,
 } from './tracking'
 import {
  GET_ABOUT_SERVER,
  GET_ABOUT_WEBUI,
+  CHECK_FOR_SERVER_UPDATES,
+  GET_META,
+  GET_METAS,
+  SET_SOCKS_PROXY,
+  SET_FLARE_SOLVERR,
+  RESTORE_BACKUP,
+  VALIDATE_BACKUP,
 } from './meta'
+import { authHeaders } from '$lib/core/auth'
 import {
  type GQLResponse,
  mapManga,
@@ -100,50 +127,6 @@ import {
 } from './types'
 import { initPageCache, clearPageCache as _clearPageCache } from './pageCache'

-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 }
-    }
-  }
-`
-
-const SET_FLARE_SOLVERR = `
-  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 }
-    }
-  }
-`
-
 type RawQueueItem = Record<string, unknown>

 function mapDownloadStatus(raw: { state: string; queue: RawQueueItem[] }): DownloadStatus {
@@ -160,14 +143,9 @@ function mapDownloadStatus(raw: { state: string; queue: RawQueueItem[] }): Downl

 export class SuwayomiAdapter implements ServerAdapter {
  private baseUrl = 'http://127.0.0.1:4567'
-  private authHeader: string | null = null

  async connect(config: ServerConfig): Promise<void> {
    this.baseUrl = config.baseUrl.replace(/\/$/, '')
-    if (config.credentials) {
-      const { username, password } = config.credentials
-      this.authHeader = 'Basic ' + btoa(`${username}:${password}`)
-    }
    initPageCache(this.gql.bind(this), this.getServerUrl.bind(this))
  }

@@ -178,9 +156,9 @@ export class SuwayomiAdapter implements ServerAdapter {
  async getStatus(): Promise<ServerStatus> {
    try {
      const res = await fetch(`${this.baseUrl}/api/graphql`, {
-        method: 'POST',
-        headers: this.headers(),
-        body: JSON.stringify({ query: '{ aboutServer { name } }' }),
+        method:  'POST',
+        headers: { 'Content-Type': 'application/json', ...authHeaders() },
+        body:    JSON.stringify({ query: '{ aboutServer { name } }' }),
      })
      return res.ok ? 'connected' : 'error'
    } catch {
@@ -189,9 +167,7 @@ export class SuwayomiAdapter implements ServerAdapter {
  }

  private headers(): Record<string, string> {
-    const h: Record<string, string> = { 'Content-Type': 'application/json' }
-    if (this.authHeader) h['Authorization'] = this.authHeader
-    return h
+    return { 'Content-Type': 'application/json', ...authHeaders() }
  }

  private async gql<T>(
@@ -200,9 +176,9 @@ export class SuwayomiAdapter implements ServerAdapter {
    signal?: AbortSignal,
  ): Promise<T> {
    const res = await fetch(`${this.baseUrl}/api/graphql`, {
-      method: 'POST',
+      method:  'POST',
      headers: this.headers(),
-      body: JSON.stringify({ query, variables }),
+      body:    JSON.stringify({ query, variables }),
      signal,
    })
    if (!res.ok) throw new Error(`Suwayomi HTTP ${res.status}`)
@@ -243,6 +219,26 @@ export class SuwayomiAdapter implements ServerAdapter {
    return { items, hasNextPage: false }
  }

+  async getMangasByGenre(
+    filter:  Record<string, unknown>,
+    first:   number,
+    offset:  number,
+    signal?: AbortSignal,
+  ): Promise<{ items: Manga[]; hasNextPage: boolean; totalCount: number }> {
+    const data = await this.gql<{
+      mangas: {
+        nodes:      Record<string, unknown>[]
+        pageInfo:   { hasNextPage: boolean }
+        totalCount: number
+      }
+    }>(MANGAS_BY_GENRE, { filter, first, offset }, signal)
+    return {
+      items:       data.mangas.nodes.map(mapManga),
+      hasNextPage: data.mangas.pageInfo.hasNextPage,
+      totalCount:  data.mangas.totalCount,
+    }
+  }
+
  async searchManga(query: string, sourceId?: string): Promise<Manga[]> {
    if (!sourceId) return []
    const data = await this.gql<{ fetchSourceManga: { mangas: Record<string, unknown>[] } }>(
@@ -303,9 +299,7 @@ export class SuwayomiAdapter implements ServerAdapter {
  }

  async getRecentlyUpdated(): Promise<Chapter[]> {
-    const data = await this.gql<{ chapters: { nodes: Record<string, unknown>[] } }>(
-      GET_RECENTLY_UPDATED
-    )
+    const data = await this.gql<{ chapters: { nodes: Record<string, unknown>[] } }>(GET_RECENTLY_UPDATED)
    return data.chapters.nodes.map(mapChapter)
  }

@@ -380,9 +374,7 @@ export class SuwayomiAdapter implements ServerAdapter {
        reorderChapterDownload: { downloadStatus: { state: string; queue: RawQueueItem[] } }
      }>(REORDER_DOWNLOAD, { chapterId: Number(chapterId), to })
      return mapDownloadStatus(data.reorderChapterDownload.downloadStatus)
-    } catch {
-      return null
-    }
+    } catch { return null }
  }

  async clearDownloads(): Promise<void> {
@@ -433,6 +425,18 @@ export class SuwayomiAdapter implements ServerAdapter {
    await this.gql(INSTALL_EXTERNAL_EXTENSION, { url })
  }

+  async getExtensionRepos(): Promise<string[]> {
+    const data = await this.gql<{ settings: { extensionRepos: string[] } }>(GET_SETTINGS)
+    return data.settings.extensionRepos ?? []
+  }
+
+  async setExtensionRepos(repos: string[]): Promise<string[]> {
+    const data = await this.gql<{ setSettings: { settings: { extensionRepos: string[] } } }>(
+      SET_EXTENSION_REPOS, { repos }
+    )
+    return data.setSettings.settings.extensionRepos
+  }
+
  async getSources(): Promise<Source[]> {
    const data = await this.gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
    return data.sources.nodes
@@ -441,13 +445,36 @@ export class SuwayomiAdapter implements ServerAdapter {
  async browseSource(sourceId: string, page: number): Promise<PaginatedResult<Manga>> {
    const data = await this.gql<{
      fetchSourceManga: { mangas: Record<string, unknown>[]; hasNextPage: boolean }
-    }>(FETCH_SOURCE_MANGA, { source: sourceId, type: 'LATEST', page })
+    }>(FETCH_SOURCE_MANGA, { source: sourceId, type: sourceId === '0' ? 'POPULAR' : 'LATEST', page })
    return {
      items:       data.fetchSourceManga.mangas.map(mapManga),
      hasNextPage: data.fetchSourceManga.hasNextPage,
    }
  }

+  async getSourceSettings(sourceId: string): Promise<unknown[]> {
+    const data = await this.gql<{ source: { preferences: unknown[] } }>(
+      GET_SOURCE_SETTINGS, { id: sourceId }
+    )
+    return data.source.preferences ?? []
+  }
+
+  async updateSourcePreference(
+    sourceId:   string,
+    position:   number,
+    changeType: string,
+    value:      unknown,
+  ): Promise<unknown[]> {
+    await this.gql(UPDATE_SOURCE_PREFERENCE, {
+      source: sourceId,
+      change: { position, [changeType]: value },
+    })
+    const data = await this.gql<{ source: { preferences: unknown[] } }>(
+      GET_SOURCE_SETTINGS, { id: sourceId }
+    )
+    return data.source.preferences ?? []
+  }
+
  async getCategories(): Promise<Category[]> {
    const data = await this.gql<{ categories: { nodes: Record<string, unknown>[] } }>(GET_CATEGORIES)
    return data.categories.nodes.map(mapCategory)
@@ -533,6 +560,18 @@ export class SuwayomiAdapter implements ServerAdapter {
    await this.gql(TRACK_PROGRESS, { mangaId: Number(mangaId) })
  }

+  async loginTrackerOAuth(trackerId: string, callbackUrl: string): Promise<void> {
+    await this.gql(LOGIN_TRACKER_OAUTH, { trackerId: Number(trackerId), callbackUrl })
+  }
+
+  async loginTrackerCredentials(trackerId: string, username: string, password: string): Promise<void> {
+    await this.gql(LOGIN_TRACKER_CREDENTIALS, { trackerId: Number(trackerId), username, password })
+  }
+
+  async logoutTracker(trackerId: string): Promise<void> {
+    await this.gql(LOGOUT_TRACKER, { trackerId: Number(trackerId) })
+  }
+
  async getServerSecurity(): Promise<ServerSecurity> {
    const data = await this.gql<{ settings: ServerSecurity }>(GET_SERVER_SECURITY)
    return data.settings
@@ -569,26 +608,59 @@ export class SuwayomiAdapter implements ServerAdapter {
    }
  }

-  async getMangasByGenre(
-    filter:  Record<string, unknown>,
-    first:   number,
-    offset:  number,
-    signal?: AbortSignal,
-  ): Promise<{ items: Manga[]; hasNextPage: boolean; totalCount: number }> {
-    const data = await this.gql<{
-      mangas: {
-        nodes:      Record<string, unknown>[]
-        pageInfo:   { hasNextPage: boolean }
-        totalCount: number
-      }
-    }>(MANGAS_BY_GENRE, { filter, first, offset }, signal)
+  async getDownloadsPath(): Promise<{ downloadsPath: string; localSourcePath: string }> {
+    const data = await this.gql<{ settings: { downloadsPath: string | null; localSourcePath: string | null } }>(
+      GET_DOWNLOADS_PATH
+    )
    return {
-      items:       data.mangas.nodes.map(mapManga),
-      hasNextPage: data.mangas.pageInfo.hasNextPage,
-      totalCount:  data.mangas.totalCount,
+      downloadsPath:   data.settings.downloadsPath  ?? '',
+      localSourcePath: data.settings.localSourcePath ?? '',
    }
  }

+  async setDownloadsPath(path: string): Promise<void> {
+    await this.gql(SET_DOWNLOADS_PATH, { path })
+  }
+
+  async setLocalSourcePath(path: string): Promise<void> {
+    await this.gql(SET_LOCAL_SOURCE_PATH, { path })
+  }
+
+  async createBackup(): Promise<{ url: string }> {
+    const data = await this.gql<{ createBackup: { url: string } }>(CREATE_BACKUP)
+    return data.createBackup
+  }
+
+  private multipartGql<T>(query: string, file: File): Promise<T> {
+    const form = new FormData()
+    form.append('operations', JSON.stringify({ query, variables: { backup: null } }))
+    form.append('map', JSON.stringify({ '0': ['variables.backup'] }))
+    form.append('0', file, file.name)
+    const headers: Record<string, string> = { Accept: 'application/json', ...authHeaders() }
+    return fetch(`${this.baseUrl}/api/graphql`, { method: 'POST', headers, body: form })
+      .then(r => { if (!r.ok) throw new Error(`Suwayomi HTTP ${r.status}`); return r.json() })
+      .then((json: GQLResponse<T>) => { if (json.errors?.length) throw new Error(json.errors[0].message); return json.data })
+  }
+
+  async restoreBackup(file: File): Promise<{ id: string; status: RestoreStatus }> {
+    const data = await this.multipartGql<{ restoreBackup: { id: string; status: RestoreStatus } }>(RESTORE_BACKUP, file)
+    return data.restoreBackup
+  }
+
+  async validateBackup(file: File): Promise<ValidateBackupResult> {
+    const data = await this.multipartGql<{ validateBackup: ValidateBackupResult }>(VALIDATE_BACKUP, file)
+    return data.validateBackup
+  }
+
+  async pollRestoreStatus(id: string): Promise<RestoreStatus> {
+    const data = await this.gql<{ restoreStatus: RestoreStatus }>(POLL_RESTORE_STATUS, { id })
+    return data.restoreStatus
+  }
+
+  async clearCachedImages(opts: { cachedPages: boolean; cachedThumbnails: boolean; downloadedThumbnails: boolean }): Promise<void> {
+    await this.gql(CLEAR_CACHED_IMAGES, opts)
+  }
+
  async checkForUpdates(mangaIds?: string[]): Promise<UpdateResult[]> {
    if (mangaIds?.length) {
      const results: UpdateResult[] = []
@@ -59,7 +59,7 @@ export const LIBRARY_UPDATE_STATUS = `

 export const MANGAS_BY_GENRE = `
  query MangasByGenre($filter: MangaFilterInput, $first: Int, $offset: Int) {
-    mangas(filter: $filter, first: $first, offset: $offset, orderBy: IN_LIBRARY_AT, orderByType: DESC) {
+    mangas(filter: $filter, first: $first, offset: $offset) {
      nodes {
        id title thumbnailUrl inLibrary genre status
        source { id displayName }
@@ -76,6 +76,12 @@ export const GET_DOWNLOADS_PATH = `
  }
 `

+export const POLL_RESTORE_STATUS = `
+  query PollRestoreStatus($id: String!) {
+    restoreStatus(id: $id) { mangaProgress state totalManga }
+  }
+`
+
 export const FETCH_MANGA = `
  mutation FetchManga($id: Int!) {
    fetchManga(input: { id: $id }) {
@@ -214,6 +220,15 @@ export const RESTORE_BACKUP = `
  }
 `

+export const VALIDATE_BACKUP = `
+  query ValidateBackup($backup: Upload!) {
+    validateBackup(input: { backup: $backup }) {
+      missingSources { id name }
+      missingTrackers { name }
+    }
+  }
+`
+
 export const FETCH_SOURCE_MANGA = `
  mutation FetchSourceManga($source: LongString!, $type: FetchSourceMangaType!, $page: Int!, $query: String, $filters: [FilterChangeInput!]) {
    fetchSourceManga(input: { source: $source, type: $type, page: $page, query: $query, filters: $filters }) {
@@ -36,4 +36,70 @@ export const GET_METAS = `
      nodes { key value }
    }
  }
+`
+
+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 }
+    }
+  }
+`
+
+export const RESTORE_BACKUP = `
+  mutation RestoreBackup($backup: Upload!) {
+    restoreBackup(input: { backup: $backup }) {
+      id status { mangaProgress state totalManga }
+    }
+  }
+`
+
+export const VALIDATE_BACKUP = `
+  query ValidateBackup($backup: Upload!) {
+    validateBackup(input: { backup: $backup }) {
+      missingSources { id name } missingTrackers { name }
+    }
+  }
+`
+
+export const CREATE_BACKUP = `
+  mutation CreateBackup {
+    createBackup(input: {}) { url }
+  }
+`
+
+export const SET_FLARE_SOLVERR = `
+  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 }
+    }
+  }
 `
@@ -114,6 +114,14 @@ export const LOGIN_TRACKER_CREDENTIALS = `
  }
 `

+export const LOGIN_TRACKER_OAUTH = `
+  mutation LoginTrackerOAuth($trackerId: Int!, $callbackUrl: String!) {
+    loginTrackerOAuth(input: { trackerId: $trackerId, callbackUrl: $callbackUrl }) {
+      isLoggedIn
+    }
+  }
+`
+
 export const LOGOUT_TRACKER = `
  mutation LogoutTracker($trackerId: Int!) {
    logoutTracker(input: { trackerId: $trackerId }) {
@@ -1,209 +1,126 @@
-import type { DownloadStatus } from '$lib/types/api'
-import type { Manga, Chapter, Extension, Source, Tracker, TrackRecord, Category } from '$lib/types'
+export type PlatformFeature =
+  | 'server-management'
+  | 'biometric-auth'
+  | 'native-window'
+  | 'filesystem'
+  | 'app-updates'
+  | 'discord-rpc'

-export interface ServerConfig {
-  baseUrl: string
-  credentials?: { username: string; password: string }
+export type Platform = 'tauri' | 'capacitor' | 'web'
+
+export interface ServerLaunchConfig {
+  binary?:       string
+  binaryArgs?:   string
+  webUiEnabled?: boolean
 }

-export type ServerStatus = 'connected' | 'disconnected' | 'error'
-
-export interface MangaFilters {
-  inLibrary?: boolean
-  status?: MangaStatus
-  tags?: string[]
-  unread?: boolean
-  sourceId?: string
+export interface DiscordAssets {
+  largeImage?: string
+  largeText?:  string
+  smallImage?: string
+  smallText?:  string
 }

-export type MangaStatus =
-  | 'ONGOING'
-  | 'COMPLETED'
-  | 'LICENSED'
-  | 'PUBLISHING_FINISHED'
-  | 'CANCELLED'
-  | 'ON_HIATUS'
-
-export interface PaginatedResult<T> {
-  items: T[]
-  hasNextPage: boolean
-  total?: number
+export interface DiscordButton {
+  label: string
+  url:   string
 }

-export interface MangaMeta {
-  customTitle?: string
-  customCover?: string
-  notes?: string
-  [key: string]: unknown
+export interface DiscordPresence {
+  state?:      string
+  details?:    string
+  assets?:     DiscordAssets
+  buttons?:    DiscordButton[]
+  timestamps?: { start?: number; end?: number }
 }

-export interface Page {
-  index: number
-  url: string
-  imageData?: string
+export interface AppUpdateInfo {
+  version: string
+  url:     string
+  notes:   string
 }

-export interface AboutServer {
-  name:      string
-  version:   string
-  buildType: string
-  buildTime: number
-  github:    string
-  discord:   string
+export interface StorageInfo {
+  manga_bytes: number
+  total_bytes: number
+  free_bytes:  number
+  path:        string
 }

-export interface AboutWebUI {
-  channel:         string
-  tag:             string
-  updateTimestamp: number
+export interface MigrateProgress {
+  done:    number
+  total:   number
+  current: string
 }

-export interface DownloadItem {
-  chapterId: string
-  mangaId: string
-  chapterName: string
-  mangaTitle: string
-  thumbnailUrl?: string
-  progress: number
-  state: 'queued' | 'downloading' | 'finished' | 'error'
+export interface UpdateProgress {
+  downloaded: number
+  total:      number | null
 }

-export interface UpdateResult {
-  mangaId: string
-  newChapters: number
+export interface ReleaseInfo {
+  tag_name:     string
+  name:         string
+  body:         string
+  published_at: string
+  html_url:     string
 }

-export interface LibraryUpdateProgress {
-  isRunning: boolean
-  finishedJobs: number
-  totalJobs: number
-}
+export interface PlatformAdapter {
+  readonly platform: Platform

-export interface ServerSecurity {
-  authMode: string
-  authUsername: string
-  socksProxyEnabled: boolean
-  socksProxyHost: string
-  socksProxyPort: string
-  socksProxyVersion: number
-  socksProxyUsername: string
-  flareSolverrEnabled: boolean
-  flareSolverrUrl: string
-  flareSolverrTimeout: number
-  flareSolverrSessionName: string
-  flareSolverrSessionTtl: number
-  flareSolverrAsResponseFallback: boolean
-}
+  init():    Promise<void>
+  destroy(): Promise<void>
+  isSupported(feature: PlatformFeature): boolean

-export interface SetServerAuthInput {
-  authMode: string
-  authUsername: string
-  authPassword: string
-}
+  getAppDir(): Promise<string>

-export interface SetSocksProxyInput {
-  socksProxyEnabled: boolean
-  socksProxyHost: string
-  socksProxyPort: string
-  socksProxyVersion: number
-  socksProxyUsername: string
-  socksProxyPassword: string
-}
+  loadStore(key: string):                  Promise<unknown>
+  saveStore(key: string, value: unknown):  Promise<void>

-export interface SetFlareSolverrInput {
-  flareSolverrEnabled: boolean
-  flareSolverrUrl: string
-  flareSolverrTimeout: number
-  flareSolverrSessionName: string
-  flareSolverrSessionTtl: number
-  flareSolverrAsResponseFallback: boolean
-}
+  storeCredential(key: string, value: string): Promise<void>
+  getCredential(key: string):                  Promise<string | null>
+  authenticateBiometric():                     Promise<boolean>

-export interface TrackRecordPatch {
-  status?:          number
-  score?:           number
-  lastChapterRead?: number
-  startDate?:       string
-  finishDate?:      string
-  private?:         boolean
-}
+  readFile(path: string):                  Promise<Uint8Array>
+  writeFile(path: string, data: Uint8Array): Promise<void>
+  pickFolder():                            Promise<string | null>
+  checkPathExists(path: string):           Promise<boolean>
+  createDirectory(path: string):           Promise<void>
+  openPath(path: string):                  Promise<void>
+  getDefaultDownloadsPath():               Promise<string>
+  getStorageInfo(downloadsPath: string):   Promise<StorageInfo>
+  migrateDownloads(src: string, dst: string): Promise<void>
+  getAutoBackupDir():                      Promise<string>

-export interface ServerAdapter {
-  connect(config: ServerConfig): Promise<void>
-  getStatus(): Promise<ServerStatus>
-  getServerUrl(): string
+  fetchImage(url: string, headers: Record<string, string>): Promise<Blob>

-  getManga(id: string, signal?: AbortSignal): Promise<Manga>
-  getMangaList(filters: MangaFilters): Promise<PaginatedResult<Manga>>
-  searchManga(query: string, sourceId?: string): Promise<Manga[]>
-  fetchManga(id: string): Promise<Manga>
-  addToLibrary(mangaId: string): Promise<void>
-  removeFromLibrary(mangaId: string): Promise<void>
-  updateMangas(ids: string[], patch: { inLibrary?: boolean }): Promise<void>
-  updateMangaMeta(id: string, meta: Partial<MangaMeta>): Promise<void>
-  deleteMangaMeta(id: string, key: string): Promise<void>
+  launchServer(config: ServerLaunchConfig): Promise<void>
+  stopServer():                             Promise<void>
+  getServerStatus():                        Promise<'running' | 'stopped' | 'error'>

-  getChapters(mangaId: string): Promise<Chapter[]>
-  getChapter(id: string): Promise<Chapter>
-  getChapterPages(id: string, signal?: AbortSignal): Promise<Page[]>
-  fetchChapters(mangaId: string): Promise<Chapter[]>
-  getRecentlyUpdated(): Promise<Chapter[]>
-  markChapterRead(id: string, read: boolean): Promise<void>
-  markChaptersRead(ids: string[], read: boolean): Promise<void>
-  updateChaptersProgress(ids: string[], patch: { isRead?: boolean; isBookmarked?: boolean; lastPageRead?: number }): Promise<void>
-  deleteDownloadedChapters(ids: string[]): Promise<void>
-  setChapterMeta(chapterId: string, key: string, value: string): Promise<void>
-  deleteChapterMeta(chapterId: string, key: string): Promise<void>
+  setTitle(title: string): Promise<void>
+  minimize():              Promise<void>
+  maximize():              Promise<void>
+  close():                 Promise<void>
+  toggleFullscreen():      Promise<void>

-  getAboutServer(): Promise<AboutServer>
-  getAboutWebUI():  Promise<AboutWebUI>
+  setDiscordPresence(presence: DiscordPresence): Promise<void>
+  clearDiscordPresence():                        Promise<void>

-  getDownloads(): Promise<DownloadItem[]>
-  getDownloadStatus(): Promise<DownloadStatus>
-  enqueueDownload(chapterId: string): Promise<void>
-  enqueueDownloads(chapterIds: string[]): Promise<void>
-  dequeueDownload(chapterId: string): Promise<void>
-  dequeueDownloads(chapterIds: string[]): Promise<void>
-  reorderDownload(chapterId: string, to: number): Promise<DownloadStatus | null>
-  clearDownloads(): Promise<void>
-  startDownloader(): Promise<DownloadStatus | null>
-  stopDownloader(): Promise<DownloadStatus | null>
+  getVersion():                  Promise<string>
+  openExternal(url: string):     Promise<void>
+  checkForAppUpdate():           Promise<AppUpdateInfo | null>
+  installAppUpdate(tag: string): Promise<void>
+  restartApp():                  Promise<void>
+  exitApp():                     Promise<void>
+  listReleases():                Promise<ReleaseInfo[]>

-  getExtensions(): Promise<Extension[]>
-  installExtension(id: string): Promise<void>
-  uninstallExtension(id: string): Promise<void>
-  updateExtension(id: string): Promise<void>
-  updateExtensions(ids: string[]): Promise<void>
-  installExternalExtension(url: string): Promise<void>
+  clearMokuCache():     Promise<void>
+  clearSuwayomiCache(): Promise<void>
+  resetSuwayomiData():  Promise<void>

-  getSources(): Promise<Source[]>
-  browseSource(sourceId: string, page: number): Promise<PaginatedResult<Manga>>
-
-  getCategories(): Promise<Category[]>
-  createCategory(name: string): Promise<Category>
-  deleteCategory(id: number): Promise<void>
-  updateCategoryOrder(id: number, position: number): Promise<Category[]>
-  updateMangaCategories(mangaId: string, addTo: number[], removeFrom: number[]): Promise<void>
-  updateMangasCategories(mangaIds: string[], addTo: number[], removeFrom: number[]): Promise<void>
-  updateCategoryManga(categoryId: number): Promise<void>
-
-  getTrackers(): Promise<Tracker[]>
-  getAllTrackerRecords(): Promise<unknown[]>
-  getMangaTrackRecords(mangaId: string): Promise<unknown[]>
-  searchTracker(trackerId: string, query: string): Promise<unknown[]>
-  linkTracker(mangaId: string, trackerId: string, remoteId: string): Promise<void>
-  unlinkTracker(recordId: string): Promise<void>
-  updateTrackRecord(recordId: string, patch: TrackRecordPatch): Promise<TrackRecord>
-  fetchTrackRecord(recordId: string): Promise<TrackRecord>
-  syncTracking(mangaId: string): Promise<void>
-
-  getServerSecurity(): Promise<ServerSecurity>
-  setServerAuth(input: SetServerAuthInput): Promise<void>
-  setSocksProxy(input: SetSocksProxyInput): Promise<void>
-  setFlareSolverr(input: SetFlareSolverrInput): Promise<void>
-
-  checkForUpdates(mangaIds?: string[]): Promise<UpdateResult[]>
-  stopLibraryUpdate(): Promise<void>
-  getLibraryUpdateStatus(): Promise<LibraryUpdateProgress>
-  clearPageCache(chapterId?: number): void
+  onUpdateProgress(cb: (p: UpdateProgress) => void):   Promise<() => void>
+  onUpdateLaunching(cb: () => void):                   Promise<() => void>
+  onMigrateProgress(cb: (p: MigrateProgress) => void): Promise<() => void>
 }
@@ -1,11 +1,11 @@
 import type { Platform } from '$lib/platform-adapters/types'

-export type AppStatus = 'booting' | 'not-configured' | 'auth' | 'ready' | 'error'
+export type AppStatus = 'booting' | 'not-configured' | 'auth' | 'locked' | 'ready' | 'error'

 class AppStore {
-  settingsOpen:    boolean              = $state(false)
-  navPage:         string               = $state('')
-  scrollPositions: Map<string, number>  = $state(new Map())
+  settingsOpen:    boolean             = $state(false)
+  navPage:         string              = $state('')
+  scrollPositions: Map<string, number> = $state(new Map())

  setSettingsOpen(next: boolean) { this.settingsOpen = next }
  setNavPage(next: string)       { this.navPage = next }
@@ -35,6 +35,8 @@ export const appState = $state({
  history:       [] as unknown[],
  toasts:        [] as unknown[],
  appDir:        '',
+  idleSplash:    false,
+  devSplash:     false,
 })

 export function setSettingsOpen(next: boolean)        { app.setSettingsOpen(next) }
@@ -1,8 +1,9 @@
 import { detectAdapter }      from '$lib/platform-adapters'
 import { initPlatformService } from '$lib/platform-service'
 import { platformService }     from '$lib/platform-service'
-import { probeServer, loginBasic, loginUI } from '$lib/core/auth'
+import { probeServer, loginBasic, loginUI, configureAuth } from '$lib/core/auth'
 import { appState }            from '$lib/state/app.svelte'
+import { settingsState }       from '$lib/state/settings.svelte'

 const MAX_ATTEMPTS    = 40
 const BG_MAX_ATTEMPTS = 120
@@ -31,13 +32,21 @@ export async function initPlatform(): Promise<void> {
  appState.appDir   = await platformService.getAppDir()
 }

+function pinLockEnabled(): boolean {
+  return (
+    settingsState.settings.appLockEnabled === true &&
+    typeof settingsState.settings.appLockPin === 'string' &&
+    settingsState.settings.appLockPin.length >= 4
+  )
+}
+
 function handleProbeSuccess(gen: number) {
  if (gen !== probeGeneration) return
-  boot.failed        = false
-  boot.skipped       = false
-  boot.serverProbeOk = true
+  boot.failed            = false
+  boot.skipped           = false
+  boot.serverProbeOk     = true
  appState.authenticated = true
-  appState.status        = 'ready'
+  appState.status        = pinLockEnabled() ? 'locked' : 'ready'
 }

 function handleAuthRequired(
@@ -47,7 +56,8 @@ function handleAuthRequired(
  pass:     string,
 ) {
  if (gen !== probeGeneration) return
-  boot.failed = false
+  boot.failed       = false
+  appState.authMode = authMode

  if (authMode === 'BASIC_AUTH' && user && pass) {
    loginBasic(user, pass)
@@ -66,19 +76,31 @@ function handleAuthRequired(
  appState.status    = 'auth'
 }

-export function startProbe(
+export async function startProbe(
  authMode: 'NONE' | 'BASIC_AUTH' | 'UI_LOGIN' = 'NONE',
  user = '',
  pass = '',
  initialDelay = 100,
-) {
+): Promise<void> {
  const gen = ++probeGeneration
  boot.failed        = false
  boot.loginRequired = false
  boot.skipped       = false
  boot.serverProbeOk = false
  appState.status    = 'booting'
-  let tries          = 0
+  appState.authMode  = authMode
+
+  const baseUrl = settingsState.settings.serverUrl ?? 'http://127.0.0.1:4567'
+  configureAuth(baseUrl, authMode, user || undefined, pass || undefined)
+
+  if (appState.platform === 'web') {
+    boot.failed     = true
+    appState.status = 'error'
+    startBackgroundProbe(gen, authMode, user, pass)
+    return
+  }
+
+  let tries = 0

  async function probe() {
    if (gen !== probeGeneration) return
@@ -144,7 +166,7 @@ export async function submitLogin(): Promise<void> {
    boot.loginError     = null
    boot.serverProbeOk  = true
    appState.authenticated = true
-    appState.status        = 'ready'
+    appState.status        = pinLockEnabled() ? 'locked' : 'ready'
  } catch (e: unknown) {
    boot.loginError = e instanceof Error ? e.message : 'Login failed'
  } finally {
@@ -4,8 +4,8 @@ import type { Category }    from "$lib/types";
 import { settingsState, updateSettings } from "$lib/state/settings.svelte";

 export type LibrarySortOption =
-  | "alphabetical"
-  | "unread"
+  | "az"
+  | "unreadCount"
  | "lastRead"
  | "dateAdded"
  | "totalChapters"
@@ -149,15 +149,15 @@ class LibraryState {

    const f = this.tabFilters[tab] ?? {};
    if (f.unread)     items = items.filter(m => (m.unreadCount ?? 0) > 0);
-    if (f.started)    items = items.filter(m => (m.unreadCount ?? 0) > 0 && (m.chapters?.totalCount ?? 0) > (m.unreadCount ?? 0));
+    if (f.started)    items = items.filter(m => (m.unreadCount ?? 0) > 0 && (m.totalChapters ?? 0) > (m.unreadCount ?? 0));
    if (f.downloaded) items = items.filter(m => (m.downloadCount ?? 0) > 0);
    if (f.bookmarked) items = items.filter(m => (m.bookmarkCount ?? 0) > 0);

-    const { mode, dir } = this.tabSort[tab] ?? { mode: "alphabetical" as LibrarySortOption, dir: "asc" as LibrarySortDir };
+    const { mode, dir } = this.tabSort[tab] ?? { mode: "az" as LibrarySortOption, dir: "asc" as LibrarySortDir };

    const sorted = [...items].sort((a, b) => {
      switch (mode) {
-        case "unread":         return (b.unreadCount ?? 0) - (a.unreadCount ?? 0);
+        case "unreadCount":    return (b.unreadCount ?? 0) - (a.unreadCount ?? 0);
        case "lastRead":       return (b.lastReadAt ?? 0) - (a.lastReadAt ?? 0);
        case "dateAdded":      return (b.addedAt ?? 0) - (a.addedAt ?? 0);
        case "totalChapters":  return (b.chapters?.totalCount ?? 0) - (a.chapters?.totalCount ?? 0);
@@ -185,7 +185,7 @@ class LibraryState {

  toggleTabSortDir(tab: string) {
    const prev = this.tabSort[tab];
-    const mode = prev?.mode ?? "alphabetical";
+    const mode = prev?.mode ?? "az";
    const dir  = prev?.dir  === "asc" ? "desc" : "asc";
    this.setTabSort(tab, mode, dir);
  }
@@ -204,10 +204,18 @@ class LibraryState {
    this.tabFilters = { ...this.tabFilters, [tab]: {} };
  }

-  syncFromSettings(s: { hiddenLibraryTabs?: string[]; libraryPinnedTabOrder?: string[]; defaultLibraryCategoryId?: number | null }) {
-    if (s.hiddenLibraryTabs)      this.hiddenTabs        = new Set(s.hiddenLibraryTabs);
-    if (s.libraryPinnedTabOrder)  this.pinnedTabOrder    = s.libraryPinnedTabOrder;
-    if (s.defaultLibraryCategoryId !== undefined) this.defaultCategoryId = s.defaultLibraryCategoryId ?? null;
+  syncFromSettings(s: {
+    hiddenLibraryTabs?:          string[];
+    libraryPinnedTabOrder?:      string[];
+    defaultLibraryCategoryId?:   number | null;
+    libraryShowAllInSaved?:      boolean;
+    libraryHideCompletedInSaved?: boolean;
+  }) {
+    if (s.hiddenLibraryTabs)                        this.hiddenTabs          = new Set(s.hiddenLibraryTabs);
+    if (s.libraryPinnedTabOrder)                    this.pinnedTabOrder      = s.libraryPinnedTabOrder;
+    if (s.defaultLibraryCategoryId !== undefined)   this.defaultCategoryId   = s.defaultLibraryCategoryId ?? null;
+    if (s.libraryShowAllInSaved !== undefined)       this.showAllInSaved      = s.libraryShowAllInSaved;
+    if (s.libraryHideCompletedInSaved !== undefined) this.hideCompletedInSaved = s.libraryHideCompletedInSaved;
  }

  setCategories(cats: Category[]) {
@@ -2,6 +2,7 @@ import type { Manga, Chapter }      from "$lib/types";
 import type { BookmarkEntry, MarkerEntry, MarkerColor } from "$lib/types/history";
 import type { MangaPrefs, ReaderSettings, ReaderPreset } from "$lib/types/settings";
 import { settingsState, updateSettings }                 from "$lib/state/settings.svelte";
+import { seriesState }                                   from "$lib/state/series.svelte";
 import { goto }                                          from "$app/navigation";

 export const PAGE_STYLES   = ["single", "fade", "double", "longstrip"] as const;
@@ -30,9 +31,12 @@ export interface StripChapter {
 }

 class ReaderState {
-  activeManga       = $state<Manga | null>(null);
-  activeChapter     = $state<Chapter | null>(null);
-  activeChapterList = $state<Chapter[]>([]);
+  get activeManga()                   { return seriesState.activeManga; }
+  set activeManga(v: Manga | null)    { seriesState.activeManga = v; }
+
+  get activeChapter()                 { return seriesState.activeChapter; }
+  set activeChapter(v: Chapter | null){ seriesState.activeChapter = v; }
+
  pageUrls          = $state<string[]>([]);
  pageNumber        = $state(1);
  bookmarks         = $state<BookmarkEntry[]>([]);
@@ -77,18 +81,19 @@ class ReaderState {

  containerWidth   = $state(0);

+  readonly activeChapterList = $derived(seriesState.readerChapterList);
+
  get settings() { return settingsState.settings; }

-  openReader(chapter: Chapter, chapterList: Chapter[], manga?: Manga | null) {
-    this.activeChapter     = chapter;
-    this.activeChapterList = chapterList;
+  openReader(chapter: Chapter, manga?: Manga | null) {
+    const isChapterNav = this.activeChapter !== null;
+    this.activeChapter = chapter;
    if (manga !== undefined) this.activeManga = manga;
-    goto(`/reader/${this.activeManga!.id}/${chapter.id}`);
+    goto(`/reader/${this.activeManga!.id}/${chapter.id}`, { replaceState: isChapterNav });
  }

  closeReader() {
-    this.activeChapter     = null;
-    this.activeChapterList = [];
+    this.activeChapter = null;
    history.back();
  }

@@ -145,7 +150,7 @@ class ReaderState {
  addBookmark(entry: Omit<BookmarkEntry, "savedAt">) {
    this.bookmarks = [
      { ...entry, savedAt: Date.now() },
-      ...this.bookmarks.filter(b => b.chapterId !== entry.chapterId),
+      ...this.bookmarks.filter(b => b.mangaId !== entry.mangaId),
    ].slice(0, 200);
  }

@@ -223,5 +228,5 @@ export const DEFAULT_MANGA_PREFS: MangaPrefs = {

 export const readerState = new ReaderState();

-export function openReader(ch: Chapter, list: Chapter[], manga?: Manga | null)  { readerState.openReader(ch, list, manga); }
-export function closeReader()                                                     { readerState.closeReader(); }
+export function openReader(ch: Chapter, manga?: Manga | null)  { readerState.openReader(ch, manga); }
+export function closeReader()                                   { readerState.closeReader(); }
@@ -1,99 +1,18 @@
-import type { Manga, Chapter }                                        from "$lib/types";
-import type { BookmarkEntry, MarkerEntry, MarkerColor }               from "$lib/types/history";
-import type { MangaPrefs }                                            from "$lib/types/settings";
-import { settingsState, updateSettings }                              from "$lib/state/settings.svelte";
-import { goto }                                                       from "$app/navigation";
+import type { Manga, Chapter }                      from '$lib/types'
+import type { BookmarkEntry, MarkerEntry, MarkerColor } from '$lib/types/history'
+import type { MangaPrefs }                            from '$lib/types/settings'
+import { settingsState, updateSettings }              from '$lib/state/settings.svelte'
+import { getAdapter }                                 from '$lib/request-manager'
+import { buildChapterList }                           from '$lib/components/series/lib/chapterList'
+import { goto }                                       from '$app/navigation'

-export type { BookmarkEntry, MarkerEntry, MarkerColor } from "$lib/types/history";
-export type { MangaPrefs }                              from "$lib/types/settings";
-
-class SeriesStore {
-  current             = $state<Manga | null>(null);
-  loading             = $state(false);
-  error               = $state<string | null>(null);
-
-  chapters            = $state<Chapter[]>([]);
-  chaptersLoading     = $state(false);
-  chaptersError       = $state<string | null>(null);
-
-  activeMangaId       = $state<number | null>(null);
-  activeManga         = $state<Manga | null>(null);
-  previewManga        = $state<Manga | null>(null);
-  activeChapter       = $state<Chapter | null>(null);
-  activeChapterList   = $state<Chapter[]>([]);
-  bookmarks           = $state<BookmarkEntry[]>([]);
-  markers             = $state<MarkerEntry[]>([]);
-  acknowledgedUpdates = $state<Set<number>>(new Set());
-
-  setActiveMangaId(next: number | null) { this.activeMangaId = next; }
-  setActiveManga(next: Manga | null)  { this.activeManga  = next; }
-  setPreviewManga(next: Manga | null) { this.previewManga = next; }
-
-  openReader(chapter: Chapter, chapterList: Chapter[], manga?: Manga | null) {
-    this.activeChapter     = chapter;
-    this.activeChapterList = chapterList;
-    if (manga !== undefined) this.activeManga = manga;
-    goto(`/reader/${this.activeManga!.id}/${chapter.id}`);
-  }
-
-  closeReader() {
-    this.activeChapter     = null;
-    this.activeChapterList = [];
-  }
-
-  acknowledgeUpdate(mangaId: number) {
-    if (this.acknowledgedUpdates.has(mangaId)) return;
-    this.acknowledgedUpdates = new Set([...this.acknowledgedUpdates, mangaId]);
-  }
-
-  addBookmark(entry: Omit<BookmarkEntry, "savedAt">, label?: string) {
-    this.bookmarks = [
-      { ...entry, savedAt: Date.now(), label },
-      ...this.bookmarks.filter(b => b.chapterId !== entry.chapterId),
-    ].slice(0, 200);
-  }
-
-  removeBookmark(chapterId: number)  { this.bookmarks = this.bookmarks.filter(b => b.chapterId !== chapterId); }
-  clearBookmarks()                   { this.bookmarks = []; }
-  getBookmark(chapterId: number)     { return this.bookmarks.find(b => b.chapterId === chapterId); }
-
-  addMarker(entry: Omit<MarkerEntry, "id" | "createdAt">): string {
-    const id = Math.random().toString(36).slice(2);
-    this.markers = [...this.markers, { ...entry, id, createdAt: Date.now() }];
-    return id;
-  }
-
-  updateMarker(id: string, patch: Partial<Pick<MarkerEntry, "note" | "color">>) {
-    this.markers = this.markers.map(m => m.id === id ? { ...m, ...patch, updatedAt: Date.now() } : m);
-  }
-
-  removeMarker(id: string)                            { this.markers = this.markers.filter(m => m.id !== id); }
-  getMarkersForPage(chapterId: number, page: number)  { return this.markers.filter(m => m.chapterId === chapterId && m.pageNumber === page); }
-  getMarkersForChapter(chapterId: number)             { return this.markers.filter(m => m.chapterId === chapterId); }
-  getMarkersForManga(mangaId: number)                 { return this.markers.filter(m => m.mangaId === mangaId); }
-  clearMarkersForManga(mangaId: number)               { this.markers = this.markers.filter(m => m.mangaId !== mangaId); }
-
-  getPref<K extends keyof MangaPrefs>(mangaId: number, key: K): MangaPrefs[K] {
-    const prefs = settingsState.settings.mangaPrefs?.[mangaId] ?? {};
-    return (prefs[key] ?? DEFAULT_MANGA_PREFS[key]) as MangaPrefs[K];
-  }
-
-  setPref<K extends keyof MangaPrefs>(mangaId: number, key: K, value: MangaPrefs[K]) {
-    updateSettings({
-      mangaPrefs: {
-        ...settingsState.settings.mangaPrefs,
-        [mangaId]: { ...(settingsState.settings.mangaPrefs?.[mangaId] ?? {}), [key]: value },
-      },
-    });
-  }
-
-  get settings() { return settingsState.settings; }
-}
+export type { BookmarkEntry, MarkerEntry, MarkerColor } from '$lib/types/history'
+export type { MangaPrefs }                              from '$lib/types/settings'

 export const DEFAULT_MANGA_PREFS: MangaPrefs = {
-  sortMode:           "source",
-  sortDir:            "asc",
-  preferredScanlator: "",
+  sortMode:           'source',
+  sortDir:            'asc',
+  preferredScanlator: '',
  scanlatorFilter:    [],
  scanlatorBlacklist: [],
  scanlatorForce:     false,
@@ -103,30 +22,214 @@ export const DEFAULT_MANGA_PREFS: MangaPrefs = {
  deleteOnRead:       false,
  deleteDelayHours:   0,
  pauseUpdates:       false,
-  refreshInterval:    "global",
-  coverUrl:           "",
-};
+  refreshInterval:    'global',
+  coverUrl:           '',
+}

-export const seriesState = new SeriesStore();
+const CHAPTER_TTL_MS = 2 * 60 * 1000

-export const seriesStore = seriesState;
+class SeriesStore {
+  activeManga         = $state<Manga | null>(null)
+  previewManga        = $state<Manga | null>(null)
+  activeChapter       = $state<Chapter | null>(null)
+  bookmarks           = $state<BookmarkEntry[]>([])
+  markers             = $state<MarkerEntry[]>([])
+  acknowledgedUpdates = $state<Set<number>>(new Set())

-export function setActiveMangaId(next: number | null)                                          { seriesState.setActiveMangaId(next); }
-export function setActiveManga(next: Manga | null)                                             { seriesState.setActiveManga(next); }
-export function setPreviewManga(next: Manga | null)                                            { seriesState.setPreviewManga(next); }
-export function openReader(ch: Chapter, list: Chapter[], manga?: Manga | null)                 { seriesState.openReader(ch, list, manga); }
-export function closeReader()                                                                   { seriesState.closeReader(); }
-export function acknowledgeUpdate(mangaId: number)                                             { seriesState.acknowledgeUpdate(mangaId); }
-export function addBookmark(entry: Omit<BookmarkEntry, "savedAt">, label?: string)             { seriesState.addBookmark(entry, label); }
-export function removeBookmark(chapterId: number)                                              { seriesState.removeBookmark(chapterId); }
-export function clearBookmarks()                                                                { seriesState.clearBookmarks(); }
-export function getBookmark(chapterId: number)                                                 { return seriesState.getBookmark(chapterId); }
-export function addMarker(entry: Omit<MarkerEntry, "id" | "createdAt">): string               { return seriesState.addMarker(entry); }
-export function updateMarker(id: string, patch: Partial<Pick<MarkerEntry, "note" | "color">>) { seriesState.updateMarker(id, patch); }
-export function removeMarker(id: string)                                                        { seriesState.removeMarker(id); }
-export function getMarkersForPage(chapterId: number, page: number)                             { return seriesState.getMarkersForPage(chapterId, page); }
-export function getMarkersForChapter(chapterId: number)                                        { return seriesState.getMarkersForChapter(chapterId); }
-export function getMarkersForManga(mangaId: number)                                            { return seriesState.getMarkersForManga(mangaId); }
-export function clearMarkersForManga(mangaId: number)                                          { seriesState.clearMarkersForManga(mangaId); }
-export function getPref<K extends keyof MangaPrefs>(mangaId: number, key: K): MangaPrefs[K]   { return seriesState.getPref(mangaId, key); }
-export function setPref<K extends keyof MangaPrefs>(mangaId: number, key: K, value: MangaPrefs[K]) { seriesState.setPref(mangaId, key, value); }
+  #rawChapters  = $state<Map<number, Chapter[]>>(new Map())
+  #fetchedAt    = new Map<number, number>()
+  #abortCtrls   = new Map<number, AbortController>()
+  #loading      = $state<Set<number>>(new Set())
+  #errors       = $state<Map<number, string>>(new Map())
+
+  readonly activeChapterList = $derived.by(() => {
+    const id = this.activeManga?.id
+    if (id == null) return []
+    const raw   = this.#rawChapters.get(id) ?? []
+    const prefs = settingsState.settings.mangaPrefs?.[id] ?? {}
+    return buildChapterList(raw, {
+      sortMode:           (prefs.sortMode           ?? DEFAULT_MANGA_PREFS.sortMode)           as MangaPrefs['sortMode'],
+      sortDir:            (prefs.sortDir             ?? DEFAULT_MANGA_PREFS.sortDir)             as MangaPrefs['sortDir'],
+      preferredScanlator: (prefs.preferredScanlator  ?? DEFAULT_MANGA_PREFS.preferredScanlator) as string,
+      scanlatorFilter:    (prefs.scanlatorFilter     ?? DEFAULT_MANGA_PREFS.scanlatorFilter)    as string[],
+      scanlatorBlacklist: (prefs.scanlatorBlacklist  ?? DEFAULT_MANGA_PREFS.scanlatorBlacklist) as string[],
+      scanlatorForce:     (prefs.scanlatorForce      ?? DEFAULT_MANGA_PREFS.scanlatorForce)     as boolean,
+    })
+  })
+
+  readonly readerChapterList = $derived.by(() => {
+    const id = this.activeManga?.id
+    if (id == null) return []
+    const raw   = this.#rawChapters.get(id) ?? []
+    const prefs = settingsState.settings.mangaPrefs?.[id] ?? {}
+    return buildChapterList(raw, {
+      sortMode:           'source',
+      sortDir:            'asc',
+      preferredScanlator: (prefs.preferredScanlator  ?? DEFAULT_MANGA_PREFS.preferredScanlator) as string,
+      scanlatorFilter:    (prefs.scanlatorFilter     ?? DEFAULT_MANGA_PREFS.scanlatorFilter)    as string[],
+      scanlatorBlacklist: (prefs.scanlatorBlacklist  ?? DEFAULT_MANGA_PREFS.scanlatorBlacklist) as string[],
+      scanlatorForce:     (prefs.scanlatorForce      ?? DEFAULT_MANGA_PREFS.scanlatorForce)     as boolean,
+    })
+  })
+
+  chaptersFor(mangaId: number): Chapter[]  { return this.#rawChapters.get(mangaId) ?? [] }
+  isLoadingChapters(mangaId: number)       { return this.#loading.has(mangaId) }
+  chapterError(mangaId: number)            { return this.#errors.get(mangaId) ?? null }
+
+  async loadChapters(mangaId: number, { force = false } = {}): Promise<void> {
+    const now     = Date.now()
+    const stalest = this.#fetchedAt.get(mangaId) ?? 0
+    const fresh   = !force && this.#rawChapters.has(mangaId) && now - stalest < CHAPTER_TTL_MS
+
+    if (fresh) return
+
+    this.#abortCtrls.get(mangaId)?.abort()
+    const ctrl = new AbortController()
+    this.#abortCtrls.set(mangaId, ctrl)
+
+    this.#loading = new Set([...this.#loading, mangaId])
+    this.#errors  = new Map(this.#errors)
+    this.#errors.delete(mangaId)
+
+    try {
+      const adapter = getAdapter()
+      let nodes = await adapter.getChapters(String(mangaId), ctrl.signal)
+
+      if (!ctrl.signal.aborted && nodes.length === 0) {
+        const fetched = await adapter.fetchChapters(String(mangaId), ctrl.signal)
+        if (!ctrl.signal.aborted) nodes = fetched
+      }
+
+      if (ctrl.signal.aborted) return
+
+      this.#rawChapters = new Map(this.#rawChapters).set(mangaId, nodes)
+      this.#fetchedAt.set(mangaId, Date.now())
+    } catch (e: unknown) {
+      if ((e as { name?: string }).name === 'AbortError') return
+      const msg = e instanceof Error ? e.message : String(e)
+      this.#errors = new Map(this.#errors).set(mangaId, msg)
+    } finally {
+      if (!ctrl.signal.aborted) {
+        const next = new Set(this.#loading)
+        next.delete(mangaId)
+        this.#loading = next
+      }
+    }
+  }
+
+  invalidateChapters(mangaId: number) {
+    this.#fetchedAt.delete(mangaId)
+  }
+
+  patchChapters(mangaId: number, updater: (chapters: Chapter[]) => Chapter[]) {
+    const current = this.#rawChapters.get(mangaId)
+    if (!current) return
+    this.#rawChapters = new Map(this.#rawChapters).set(mangaId, updater(current))
+  }
+
+  setActiveManga(manga: Manga | null) {
+    this.activeManga = manga
+  }
+
+  setPreviewManga(manga: Manga | null) {
+    this.previewManga = manga
+  }
+
+  openReaderForChapter(chapter: Chapter, manga?: Manga | null) {
+    if (manga !== undefined) this.activeManga = manga
+    const mangaId = this.activeManga?.id
+    if (!mangaId) return
+
+    const list  = this.readerChapterList
+    const prefs = settingsState.settings.mangaPrefs?.[mangaId] ?? {}
+    const ahead = (prefs.downloadAhead ?? DEFAULT_MANGA_PREFS.downloadAhead) as number
+
+    if (ahead > 0) {
+      const idx = list.findIndex(c => c.id === chapter.id)
+      if (idx >= 0) {
+        const toQueue = list
+          .slice(idx + 1, idx + 1 + ahead)
+          .filter(c => !c.downloaded && !c.read)
+          .map(c => String(c.id))
+        if (toQueue.length) getAdapter().enqueueDownloads(toQueue).catch(console.error)
+      }
+    }
+
+    this.activeChapter = chapter
+    goto(`/reader/${mangaId}/${chapter.id}`)
+  }
+
+  closeReader() {
+    this.activeChapter = null
+  }
+
+  acknowledgeUpdate(mangaId: number) {
+    if (this.acknowledgedUpdates.has(mangaId)) return
+    this.acknowledgedUpdates = new Set([...this.acknowledgedUpdates, mangaId])
+  }
+
+  getPref<K extends keyof MangaPrefs>(mangaId: number, key: K): MangaPrefs[K] {
+    const prefs = settingsState.settings.mangaPrefs?.[mangaId] ?? {}
+    return (prefs[key] ?? DEFAULT_MANGA_PREFS[key]) as MangaPrefs[K]
+  }
+
+  setPref<K extends keyof MangaPrefs>(mangaId: number, key: K, value: MangaPrefs[K]) {
+    updateSettings({
+      mangaPrefs: {
+        ...settingsState.settings.mangaPrefs,
+        [mangaId]: { ...(settingsState.settings.mangaPrefs?.[mangaId] ?? {}), [key]: value },
+      },
+    })
+  }
+
+  addBookmark(entry: Omit<BookmarkEntry, 'savedAt'>, label?: string) {
+    this.bookmarks = [
+      { ...entry, savedAt: Date.now(), label },
+      ...this.bookmarks.filter(b => b.chapterId !== entry.chapterId),
+    ].slice(0, 200)
+  }
+
+  removeBookmark(chapterId: number)  { this.bookmarks = this.bookmarks.filter(b => b.chapterId !== chapterId) }
+  clearBookmarks()                   { this.bookmarks = [] }
+  getBookmark(chapterId: number)     { return this.bookmarks.find(b => b.chapterId === chapterId) }
+
+  addMarker(entry: Omit<MarkerEntry, 'id' | 'createdAt'>): string {
+    const id = Math.random().toString(36).slice(2)
+    this.markers = [...this.markers, { ...entry, id, createdAt: Date.now() }]
+    return id
+  }
+
+  updateMarker(id: string, patch: Partial<Pick<MarkerEntry, 'note' | 'color'>>) {
+    this.markers = this.markers.map(m => m.id === id ? { ...m, ...patch, updatedAt: Date.now() } : m)
+  }
+
+  removeMarker(id: string)                            { this.markers = this.markers.filter(m => m.id !== id) }
+  getMarkersForPage(chapterId: number, page: number)  { return this.markers.filter(m => m.chapterId === chapterId && m.pageNumber === page) }
+  getMarkersForChapter(chapterId: number)             { return this.markers.filter(m => m.chapterId === chapterId) }
+  getMarkersForManga(mangaId: number)                 { return this.markers.filter(m => m.mangaId === mangaId) }
+  clearMarkersForManga(mangaId: number)               { this.markers = this.markers.filter(m => m.mangaId !== mangaId) }
+
+  get settings() { return settingsState.settings }
+}
+
+export const seriesState = new SeriesStore()
+export const seriesStore  = seriesState
+
+export function setActiveManga(next: Manga | null)                                                   { seriesState.setActiveManga(next) }
+export function setPreviewManga(next: Manga | null)                                                  { seriesState.setPreviewManga(next) }
+export function openReaderForChapter(ch: Chapter, manga?: Manga | null)                              { seriesState.openReaderForChapter(ch, manga) }
+export function closeReader()                                                                         { seriesState.closeReader() }
+export function acknowledgeUpdate(mangaId: number)                                                   { seriesState.acknowledgeUpdate(mangaId) }
+export function addBookmark(entry: Omit<BookmarkEntry, 'savedAt'>, label?: string)                   { seriesState.addBookmark(entry, label) }
+export function removeBookmark(chapterId: number)                                                    { seriesState.removeBookmark(chapterId) }
+export function clearBookmarks()                                                                      { seriesState.clearBookmarks() }
+export function getBookmark(chapterId: number)                                                       { return seriesState.getBookmark(chapterId) }
+export function addMarker(entry: Omit<MarkerEntry, 'id' | 'createdAt'>): string                      { return seriesState.addMarker(entry) }
+export function updateMarker(id: string, patch: Partial<Pick<MarkerEntry, 'note' | 'color'>>)        { seriesState.updateMarker(id, patch) }
+export function removeMarker(id: string)                                                              { seriesState.removeMarker(id) }
+export function getMarkersForPage(chapterId: number, page: number)                                   { return seriesState.getMarkersForPage(chapterId, page) }
+export function getMarkersForChapter(chapterId: number)                                              { return seriesState.getMarkersForChapter(chapterId) }
+export function getMarkersForManga(mangaId: number)                                                  { return seriesState.getMarkersForManga(mangaId) }
+export function clearMarkersForManga(mangaId: number)                                                { seriesState.clearMarkersForManga(mangaId) }
+export function getPref<K extends keyof MangaPrefs>(mangaId: number, key: K): MangaPrefs[K]          { return seriesState.getPref(mangaId, key) }
+export function setPref<K extends keyof MangaPrefs>(mangaId: number, key: K, v: MangaPrefs[K])       { seriesState.setPref(mangaId, key, v) }
@@ -2,12 +2,16 @@ import type { Settings }    from '$lib/types/settings'
 import { DEFAULT_SETTINGS } from '$lib/types/settings'
 import { saveSettings }     from '$lib/core/persistence/persist'

-export const settingsState = $state({ settings: { ...DEFAULT_SETTINGS } as Settings })
+export const settingsState = $state({
+  settings: { ...DEFAULT_SETTINGS } as Settings,
+  loaded:   false,
+})

 export async function loadSettingsIntoState(raw: unknown) {
  if (raw && typeof raw === 'object') {
    Object.assign(settingsState.settings, raw)
  }
+  settingsState.loaded = true
  if (typeof document !== 'undefined') {
    document.documentElement.style.zoom = String(settingsState.settings.uiZoom ?? 1.0)
  }
@@ -16,7 +20,6 @@ export async function loadSettingsIntoState(raw: unknown) {
 export function updateSettings(patch: Partial<Settings>) {
  Object.assign(settingsState.settings, patch)
  void saveSettings({ storeVersion: 2, settings: settingsState.settings })
-
  if (typeof document !== 'undefined' && patch.uiZoom !== undefined) {
    document.documentElement.style.zoom = String(patch.uiZoom)
  }
@@ -24,5 +27,6 @@ export function updateSettings(patch: Partial<Settings>) {

 export function resetSettings() {
  settingsState.settings = { ...DEFAULT_SETTINGS }
+  settingsState.loaded   = true
  void saveSettings({ storeVersion: 2, settings: settingsState.settings })
 }
@@ -19,7 +19,6 @@ class TrackingState {
  loadingFor:  Set<number>          = $state(new Set())
  error:       string | null        = $state(null)

-  // Legacy flat fields kept for request-manager/tracking.ts compatibility
  trackers:       Tracker[]     = $state([])
  loading:        boolean       = $state(false)
  syncing:        boolean       = $state(false)
@@ -55,7 +54,6 @@ class TrackingState {
    }))
  }

-  // ── Per-manga load ──────────────────────────────────────────────────────────

  async loadForManga(mangaId: number) {
    if (this.loadingFor.has(mangaId)) return
@@ -78,15 +76,13 @@ class TrackingState {
    }
  }

-  // ── Global load (tracking page) ─────────────────────────────────────────────
-
  async loadAll() {
    this.loadingAll = true
    this.error      = null
    try {
      const trackers = await getAdapter().getAllTrackerRecords() as TrackerWithRecords[]
      this.allTrackers = trackers
-      this.trackers    = trackers  // keep flat field in sync
+      this.trackers    = trackers

      for (const tracker of trackers.filter((t) => t.isLoggedIn)) {
        for (const record of tracker.trackRecords.nodes) {
@@ -104,8 +100,6 @@ class TrackingState {
    }
  }

-  // ── Field updates ───────────────────────────────────────────────────────────
-
  async updateStatus(mangaId: number, record: TrackRecord, status: number): Promise<TrackRecord> {
    const fresh = await getAdapter().updateTrackRecord(String(record.id), { status })
    this.patchFor(mangaId, fresh)
@@ -134,7 +128,6 @@ class TrackingState {
    }))
  }

-  // ── Remote sync ─────────────────────────────────────────────────────────────

  async syncFromRemote(
    mangaId:  number,
@@ -168,7 +161,6 @@ class TrackingState {
    )
  }

-  // ── Read/unread sync ────────────────────────────────────────────────────────

  async updateFromRead(
    mangaId:     number,
@@ -232,7 +224,6 @@ class TrackingState {
    }
  }

-  // ── Boot sync ───────────────────────────────────────────────────────────────

  async bootSync() {
    if (!settingsState.settings.trackerSyncBack) return
@@ -297,7 +288,6 @@ class TrackingState {
    this.byManga = next
  }

-  // ── Status helpers ──────────────────────────────────────────────────────────

  private _statusesFor(trackerId: number): { value: number; name: string }[] {
    return this.allTrackers.find((t) => t.id === trackerId)?.statuses ?? []
@@ -1,22 +1,23 @@
 <script lang="ts">
-  import { onMount }                                        from 'svelte'
-  import { page }                                           from '$app/stores'
-  import { appState, app }                                  from '$lib/state/app.svelte'
-  import { notifications }                                  from '$lib/state/notifications.svelte'
-  import { settingsState, loadSettingsIntoState, updateSettings } from '$lib/state/settings.svelte'
-  import { applyTheme, mountSystemThemeSync }               from '$lib/core/theme'
-  import { platformService }                                from '$lib/platform-service'
-  import * as discord                                       from '$lib/core/discord'
-  import SplashScreen from '$lib/components/chrome/SplashScreen.svelte'
-  import AuthGate     from '$lib/components/chrome/AuthGate.svelte'
-  import Sidebar      from '$lib/components/chrome/Sidebar.svelte'
-  import TitleBar     from '$lib/components/chrome/TitleBar.svelte'
-  import Toaster      from '$lib/components/chrome/Toaster.svelte'
-  import Settings     from '$lib/components/settings/Settings.svelte'
-  import ThemeEditor  from '$lib/components/settings/ThemeEditor.svelte'
-  import { downloadStore } from '$lib/state/downloads.svelte'
-  import { seriesState }   from '$lib/state/series.svelte'
-  import MangaPreview      from '$lib/components/shared/manga/MangaPreview.svelte'
+  import { onMount }                                                    from 'svelte'
+  import { page }                                                       from '$app/stores'
+  import { appState, app }                                              from '$lib/state/app.svelte'
+  import { boot }                                                        from '$lib/state/boot.svelte'
+  import { notifications }                                              from '$lib/state/notifications.svelte'
+  import { settingsState, loadSettingsIntoState, updateSettings }       from '$lib/state/settings.svelte'
+  import { applyTheme, mountSystemThemeSync }                           from '$lib/core/theme'
+  import { platformService }                                            from '$lib/platform-service'
+  import * as discord                                                   from '$lib/core/discord'
+  import SplashScreen                                                   from '$lib/components/chrome/SplashScreen.svelte'
+  import AuthGate                                                       from '$lib/components/chrome/AuthGate.svelte'
+  import Sidebar                                                        from '$lib/components/chrome/Sidebar.svelte'
+  import TitleBar                                                       from '$lib/components/chrome/TitleBar.svelte'
+  import Toaster                                                        from '$lib/components/chrome/Toaster.svelte'
+  import Settings                                                       from '$lib/components/settings/Settings.svelte'
+  import ThemeEditor                                                    from '$lib/components/settings/ThemeEditor.svelte'
+  import { downloadStore }                                              from '$lib/state/downloads.svelte'
+  import { seriesState }                                                from '$lib/state/series.svelte'
+  import MangaPreview                                                   from '$lib/components/shared/manga/MangaPreview.svelte'
  import '../app.css'

  let { children } = $props()
@@ -31,55 +32,82 @@
    if (polling) pollTimer = setTimeout(pollLoop, POLL_MS)
  }

-  const isTauri  = typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window
-  const ringFull = $derived(appState.status === 'ready' || appState.status === 'auth')
+  const isTauri = typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window

-  let splashVisible   = $state(true)
-  let bypassed        = $state(false)
+  let splashDismissed = $state(false)
  let themeEditorOpen = $state(false)
  let themeEditorId   = $state<string | null>(null)

-  const showApp = $derived(
-    appState.status === 'ready' ||
-    appState.status === 'auth'  ||
-    bypassed
+  const splashVisible = $derived(
+    !splashDismissed ||
+    appState.status === 'booting' ||
+    appState.status === 'locked'  ||
+    appState.status === 'error'   ||
+    appState.status === 'auth'
  )

+  const ringFull = $derived(appState.status === 'ready')
+  const showApp  = $derived(!splashVisible)
+
+  function onSplashReady()  { splashDismissed = true }
+  function onSplashUnlock() { appState.status = 'ready'; splashDismissed = true }
+  function onSplashBypass() {
+    import('$lib/state/boot.svelte').then(({ bypassBoot }) => {
+      bypassBoot(appState.authMode ?? 'NONE', appState.authUser ?? '', appState.authPass ?? '')
+    })
+    splashDismissed = true
+  }
+
  const isReaderRoute       = $derived($page.url.pathname.startsWith('/reader'))
  const readerContainerized = $derived(settingsState.settings.readerContainerized ?? false)
  const strippedLayout      = $derived(isReaderRoute && !readerContainerized)

  onMount(async () => {
-    if (isTauri && settingsState.settings.autoStartServer) {
-      const { startProbe } = await import('$lib/state/boot.svelte')
+    const { detectAdapter }       = await import('$lib/platform-adapters')
+    const { initPlatformService } = await import('$lib/platform-service')
+    const { loadSettings }        = await import('$lib/core/persistence/persist')
+    const { startProbe }          = await import('$lib/state/boot.svelte')

+    const adapter = detectAdapter()
+    initPlatformService(adapter)
+    await adapter.init()
+    appState.platform = adapter.platform
+    appState.version  = await platformService.getVersion().catch(() => '')
+    appState.appDir   = await platformService.getAppDir().catch(() => '')
+
+    const persisted = await loadSettings()
+    const raw       = persisted?.settings ?? persisted ?? null
+    await loadSettingsIntoState(raw)
+
+    const s = (raw ?? {}) as Record<string, unknown>
+    appState.serverUrl = (s.serverUrl      as string) ?? ''
+    appState.authMode  = (s.serverAuthMode as 'NONE' | 'BASIC_AUTH' | 'UI_LOGIN') ?? 'NONE'
+    appState.authUser  = (s.serverAuthUser as string) ?? ''
+    appState.authPass  = (s.serverAuthPass as string) ?? ''
+
+    applyTheme(
+      settingsState.settings.theme        ?? 'dark',
+      settingsState.settings.customThemes ?? [],
+    )
+
+    if (isTauri && settingsState.settings.autoStartServer) {
      platformService.launchServer({
        binary:       settingsState.settings.serverBinary,
        binaryArgs:   settingsState.settings.serverBinaryArgs,
        webUiEnabled: settingsState.settings.suwayomiWebUI,
      }).catch(() => {})
-
-      startProbe(
-        appState.authMode  ?? 'NONE',
-        appState.authUser  ?? '',
-        appState.authPass  ?? '',
-        2000,
-      )
    }

-    if (settingsState.settings.discordRpc) {
-      await discord.initRpc()
-      await discord.setIdle()
-    }
+    startProbe(
+      appState.authMode ?? 'NONE',
+      appState.authUser ?? '',
+      appState.authPass ?? '',
+      isTauri && settingsState.settings.autoStartServer ? 2000 : 100,
+    )

    polling = true
    pollLoop()

-    applyTheme(
-      settingsState.settings.theme ?? 'dark',
-      settingsState.settings.customThemes ?? []
-    )
-
    return () => {
      polling = false
      if (pollTimer !== null) { clearTimeout(pollTimer); pollTimer = null }
@@ -93,20 +121,67 @@
  })

  $effect(() => {
-    const theme        = settingsState.settings.theme ?? 'dark'
-    const customThemes = settingsState.settings.customThemes ?? []
-    applyTheme(theme, customThemes)
+    applyTheme(settingsState.settings.theme ?? 'dark', settingsState.settings.customThemes ?? [])
  })

  $effect(() => {
-    const enabled    = settingsState.settings.systemThemeSync ?? false
-    const darkTheme  = settingsState.settings.systemThemeDark  ?? 'dark'
-    const lightTheme = settingsState.settings.systemThemeLight ?? 'light'
-    mountSystemThemeSync(enabled, darkTheme, lightTheme, (id) => updateSettings({ theme: id }))
+    mountSystemThemeSync(
+      settingsState.settings.systemThemeSync  ?? false,
+      settingsState.settings.systemThemeDark  ?? 'dark',
+      settingsState.settings.systemThemeLight ?? 'light',
+      (id) => updateSettings({ theme: id }),
+    )
  })

-  function onSplashReady()  { splashVisible = false }
-  function onSplashBypass() { bypassed = true; splashVisible = false }
+  $effect(() => {
+    if (appState.status === 'booting') splashDismissed = false
+  })
+
+  $effect(() => {
+    if (settingsState.settings.discordRpc) {
+      discord.initRpc().then(() => discord.setIdle())
+    } else {
+      discord.destroyRpc()
+    }
+  })
+
+  let idleTimer:       ReturnType<typeof setTimeout> | null = null
+  let idleDismissLock = false
+
+  function onIdleDismiss() {
+    if (idleDismissLock) return
+    idleDismissLock = true
+    appState.idleSplash = false
+    setTimeout(() => { idleDismissLock = false }, 400)
+  }
+
+  function armIdleTimer() {
+    if (idleTimer !== null) clearTimeout(idleTimer)
+    const mins = settingsState.settings.idleTimeoutMin ?? 5
+    if (mins <= 0) return
+    idleTimer = setTimeout(() => {
+      if (appState.status === 'ready' && !appState.idleSplash) appState.idleSplash = true
+    }, mins * 60_000)
+  }
+
+  $effect(() => {
+    if (appState.status !== 'ready') return
+
+    const events = ['mousemove', 'mousedown', 'keydown', 'touchstart', 'touchmove', 'wheel', 'click'] as const
+    for (const e of events) document.addEventListener(e, armIdleTimer, { capture: true, passive: true })
+    armIdleTimer()
+
+    return () => {
+      if (idleTimer !== null) { clearTimeout(idleTimer); idleTimer = null }
+      for (const e of events) document.removeEventListener(e, armIdleTimer, { capture: true })
+    }
+  })
+
+  function onSplashRetry() {
+    import('$lib/state/boot.svelte').then(({ retryBoot }) => {
+      retryBoot(appState.authMode ?? 'NONE', appState.authUser ?? '', appState.authPass ?? '')
+    })
+  }

  function openThemeEditor(id?: string | null) {
    themeEditorId   = id ?? null
@@ -116,15 +191,27 @@

 {#if splashVisible}
  <SplashScreen
-    mode="loading"
+    mode={appState.status === 'locked' ? 'locked' : 'loading'}
    {ringFull}
    failed={appState.status === 'error'}
+    notConfigured={boot.notConfigured}
+    pinLen={settingsState.settings.appLockPin?.length ?? 0}
+    pinCorrect={settingsState.settings.appLockPin ?? ''}
    onReady={onSplashReady}
+    onUnlock={onSplashUnlock}
    onBypass={onSplashBypass}
-    onRetry={() => window.location.reload()}
+    onRetry={onSplashRetry}
  />
 {/if}

+{#if appState.idleSplash}
+  <SplashScreen mode="idle" showCards={settingsState.settings.splashCards ?? true} onDismiss={onIdleDismiss} />
+{/if}
+
+{#if appState.devSplash}
+  <SplashScreen mode="idle" showDevOverlay onDismiss={() => appState.devSplash = false} />
+{/if}
+
 {#if showApp}
  {#if strippedLayout}
    {@render children()}
@@ -215,4 +302,4 @@
    contain: layout style;
    min-width: 0;
  }
-</style>x
+</style>
@@ -1,2 +1,2 @@
-export const ssr = false
+export const ssr       = false
 export const prerender = false
Author	SHA1	Message	Date
Youwes09	31a19687ce	Fix: Browse Bug Fixes & Enhancements	2026-06-12 04:12:33 -05:00
Youwes09	437b52fd8b	Feat: Longstrip Viewer(s) & Lag Improvements	2026-06-11 23:27:01 -05:00
Youwes09	1e159bbd73	Fix: Pass all Template Arguments on BugReporter	2026-06-10 13:12:25 -05:00
Youwes09	cb3d8d64fa	Fix: DiscordRPC Toggle (Un-tested)	2026-06-10 13:06:46 -05:00
Youwes09	c0a95ff899	Fix: Github Workflows (P.2)	2026-06-10 12:59:08 -05:00
Youwes09	ddaca9d126	Fix: Workflow Failure (P.1)	2026-06-10 12:55:30 -05:00
Youwes09	77b28e97a4	Feat: Bug Reporter (Github Issue Templates)	2026-06-10 12:49:48 -05:00
Youwes09	f10b343108	Fix: Library Mappings	2026-06-09 22:57:50 -05:00
Youwes09	a8ad9034fc	Fix: Reader Longstrip Bookmark + ProgressBar	2026-06-09 22:52:11 -05:00
Shozikan	f99fa60e8e	Merge pull request #95 from frozenKelp/main fix: idle splash, Discord RPC, memory leaks, reader navigation, cover art, settings scroll	2026-06-09 21:11:29 -05:00
Youwes09	915ff66b2f	Chore: ModalBlur Component	2026-06-09 21:08:57 -05:00
Youwes09	abd60f261f	Fix: Splashscreen Idle & Dev	2026-06-09 19:24:16 -05:00
Youwes09	fc20835dde	Fix: SplashScreen MemoryLeak + WebUI Bypass	2026-06-09 14:54:12 -05:00
frozenKelp	04631d93ef	fix: settings modal scroll layer will-change	2026-06-09 21:45:39 +05:30
frozenKelp	5c09cd15ad	fix: settings scroll parallax between text and row backgrounds	2026-06-09 20:59:52 +05:30
frozenKelp	7af69fd77c	fix: manga detail page shows correct cover instead of stale one	2026-06-09 20:58:56 +05:30
frozenKelp	0b6372bd17	fix: X closes reader to origin page, not previous chapter	2026-06-09 20:58:43 +05:30
frozenKelp	32bdeb92ff	fix: set rpc to idle when idle	2026-06-09 20:13:41 +05:30
frozenKelp	22c4a222d8	fix: idle splash exit animation works	2026-06-09 19:43:02 +05:30
frozenKelp	26cb16ec0f	Merge branch 'main' of https://github.com/moku-project/Moku	2026-06-09 19:16:10 +05:30
Youwes09	8c2917b698	Chore: Update Server Version	2026-06-09 08:44:09 -05:00
frozenKelp	6d33fb7ae1	fix: make weel and touch passive	2026-06-09 19:10:52 +05:30
frozenKelp	0e7ff1a27c	fix: add wheel and touchmove to idle activity listeners	2026-06-09 16:29:48 +05:30
frozenKelp	685bd9b9da	fix: revoke page blob URLs on chapter change and reader close	2026-06-09 16:15:31 +05:30
frozenKelp	3926b5d064	chore: clean up discord RPC hooks	2026-06-09 15:16:27 +05:30
frozenKelp	9f6996dcdb	fix: read idleTimeoutMin from settings; clean up idle + splash canvas fixes	2026-06-09 15:04:18 +05:30
frozenKelp	294865fe9d	style: use specific imports for discord functions	2026-06-09 10:55:22 +05:30
frozenKelp	13e760594d	fix: sync libraryShowAllInSaved setting to library state	2026-06-09 10:54:20 +05:30
frozenKelp	b44b12ba86	fix: update discord rpc to emit presence when reading chapters	2026-06-09 10:53:34 +05:30
Youwes09	3b8c8dea38	Fix: WebUI Auth & Tauri Auth	2026-06-08 20:27:22 -05:00
Youwes09	615fa1e92f	Chore: GQL Cleanup P.3	2026-06-07 18:37:52 -05:00
Youwes09	248b046627	Fix: Home-Screen Recommendations & GQL Cleanup P.2	2026-06-07 15:40:18 -05:00
Youwes09	79e5548879	Fix: Library Filtering + GQL Cleanup P.1	2026-06-07 00:18:45 -05:00
Youwes09	ed4c11ca7e	Fix: Local-Source Popular Query + App-Pin Flow	2026-06-06 15:00:59 -05:00
Youwes09	5dfbc80bbe	Fix: App Pin & Downloads (Filesystem Changes)	2026-06-05 17:42:32 -05:00
Youwes09	8aa92e6b54	Chore: Update Dependencies	2026-06-03 22:38:07 -05:00
Youwes09	b55dd16d0d	Fix: Update to FetcherVersion 3 for NixOS	2026-06-03 22:12:42 -05:00
Youwes09	7c6aeb8f4c	Chore: Re-make README + Stack Update	2026-06-03 21:49:01 -05:00