From 94b92d000f4f1c35cf9b3015410bfe397e221861 Mon Sep 17 00:00:00 2001
From: Youwes09 <yuvi.shen@outlook.com>
Date: Thu, 19 Mar 2026 23:36:26 -0500
Subject: [PATCH] Chore: Revamped Lib Files for Svelte 5 Rewrite

---
 src/App.svelte                            | 111 ++---
 src/components/layout/Layout.svelte       |  39 +-
 src/components/layout/Sidebar.svelte      |  78 +--
 src/components/layout/SplashScreen.svelte | 236 +++-------
 src/components/pages/History.svelte       | 269 +++--------
 src/components/pages/Home.svelte          | 550 +++++-----------------
 src/components/pages/Library.svelte       | 390 +++++----------
 src/components/pages/SeriesDetail.svelte  | 441 ++++++++---------
 src/components/reader/Reader.svelte       | 528 +++++++++------------
 src/lib/queries.ts                        |   9 +
 src/routes.ts                             |   6 +-
 src/store/index.ts                        | 474 +++++++++++--------
 12 files changed, 1127 insertions(+), 2004 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 510c343..6c505d6 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,13 +1,10 @@
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
+  import { onMount } from "svelte";
   import { invoke } from "@tauri-apps/api/core";
   import { listen } from "@tauri-apps/api/event";
   import { gql } from "./lib/client";
   import { GET_DOWNLOAD_STATUS } from "./lib/queries";
-  import {
-    activeChapter, settingsOpen, settings,
-    activeDownloads, addToast,
-  } from "./store";
+  import { activeChapter, settingsOpen, settings, activeDownloads, addToast } from "./store";
   import type { DownloadStatus, DownloadQueueItem } from "./lib/types";
   import Layout       from "./components/layout/Layout.svelte";
   import Reader       from "./components/reader/Reader.svelte";
@@ -19,15 +16,16 @@
 
   const MAX_ATTEMPTS = 30;
 
-  let serverProbeOk = !$settings.autoStartServer;
-  let appReady      = !$settings.autoStartServer;
-  let failed        = false;
-  let retryKey      = 0;
-  let idle          = false;
-  let devSplash     = false;
+  let serverProbeOk = $state(!settings.autoStartServer);
+  let appReady      = $state(!settings.autoStartServer);
+  let failed        = $state(false);
+  let idle          = $state(false);
+  let devSplash     = $state(false);
 
   let prevQueue: DownloadQueueItem[] = [];
   let idleTimer: ReturnType<typeof setTimeout> | null = null;
+  let pollInterval: ReturnType<typeof setInterval>;
+  let unlistenDownload: (() => void) | undefined;
 
   function detectCompletions(prev: DownloadQueueItem[], next: DownloadQueueItem[]) {
     for (const item of prev) {
@@ -44,46 +42,51 @@
   function applyQueue(next: DownloadQueueItem[]) {
     detectCompletions(prevQueue, next);
     prevQueue = next;
-    activeDownloads.set(next.map(item => ({
+    activeDownloads = next.map(item => ({
       chapterId: item.chapter.id, mangaId: item.chapter.mangaId, progress: item.progress,
-    })));
+    }));
   }
 
   function resetIdle() {
     if (idle) return;
     if (idleTimer) clearTimeout(idleTimer);
-    const ms = ($settings.idleTimeoutMin ?? 5) * 60 * 1000;
+    const ms = (settings.idleTimeoutMin ?? 5) * 60 * 1000;
     if (ms === 0) return;
     idleTimer = setTimeout(() => idle = true, ms);
   }
 
-  const idleEvents = ["mousemove","mousedown","keydown","touchstart","wheel"] as const;
+  const idleEvents = ["mousemove", "mousedown", "keydown", "touchstart", "wheel"] as const;
 
-  $: if (appReady) {
+  $effect(() => {
+    if (!appReady) return;
     idleEvents.forEach(e => window.addEventListener(e, resetIdle, { passive: true }));
     resetIdle();
-  }
+    return () => idleEvents.forEach(e => window.removeEventListener(e, resetIdle));
+  });
 
-  $: document.documentElement.style.zoom = `${$settings.uiScale * 1.5}%`;
-  $: document.documentElement.setAttribute("data-theme", $settings.theme ?? "dark");
+  $effect(() => {
+    document.documentElement.style.zoom = `${settings.uiScale * 1.5}%`;
+  });
 
-  let pollInterval: ReturnType<typeof setInterval>;
-  $: if (appReady) {
+  $effect(() => {
+    document.documentElement.setAttribute("data-theme", settings.theme ?? "dark");
+  });
+
+  $effect(() => {
+    if (!appReady) return;
     const poll = () => gql<{ downloadStatus: DownloadStatus }>(GET_DOWNLOAD_STATUS)
       .then(d => applyQueue(d.downloadStatus.queue)).catch(console.error);
     poll();
     pollInterval = setInterval(poll, 2000);
-  }
-
-  let unlistenDownload: (() => void) | undefined;
+    return () => clearInterval(pollInterval);
+  });
 
   onMount(async () => {
     document.addEventListener("contextmenu", e => e.preventDefault());
-
     (window as any).__mokuShowSplash = () => devSplash = true;
 
-    if ($settings.autoStartServer) {
-      invoke("spawn_server", { binary: $settings.serverBinary }).catch(err =>
+    if (settings.autoStartServer) {
+      invoke("spawn_server", { binary: settings.serverBinary }).catch(err =>
         console.warn("Could not start server:", err));
     }
 
@@ -93,7 +96,7 @@
         if (cancelled) return;
         tries++;
         try {
-          const res = await fetch(`${$settings.serverUrl}/api/graphql`, {
+          const res = await fetch(`${settings.serverUrl}/api/graphql`, {
             method: "POST", headers: { "Content-Type": "application/json" },
             body: JSON.stringify({ query: "{ __typename }" }),
             signal: AbortSignal.timeout(2000),
@@ -107,59 +110,45 @@
     }
 
     type P = { chapterId: number; mangaId: number; progress: number }[];
-    unlistenDownload = await listen<P>("download-progress", e =>
-      activeDownloads.set(e.payload));
+    unlistenDownload = await listen<P>("download-progress", e => { activeDownloads = e.payload; });
+
+    return () => {
+      if (settings.autoStartServer) invoke("kill_server").catch(() => {});
+      if (idleTimer) clearTimeout(idleTimer);
+      if (pollInterval) clearInterval(pollInterval);
+      unlistenDownload?.();
+      delete (window as any).__mokuShowSplash;
+    };
   });
 
-  onDestroy(() => {
-    if ($settings.autoStartServer) invoke("kill_server").catch(() => {});
-    idleEvents.forEach(e => window.removeEventListener(e, resetIdle));
-    if (idleTimer) clearTimeout(idleTimer);
-    if (pollInterval) clearInterval(pollInterval);
-    unlistenDownload?.();
-    delete (window as any).__mokuShowSplash;
-  });
-
-  function handleRetry() {
-    failed = false;
-    serverProbeOk = false;
-    retryKey++;
-  }
+  function handleRetry() { failed = false; serverProbeOk = false; }
 </script>
 
 {#if devSplash}
-  <SplashScreen mode="idle" showFps showCards={$settings.splashCards ?? true}
+  <SplashScreen mode="idle" showFps showCards={settings.splashCards ?? true}
     onDismiss={() => setTimeout(() => devSplash = false, 340)} />
 {:else if !appReady}
   <SplashScreen mode="loading" ringFull={serverProbeOk} {failed}
-    showCards={$settings.splashCards ?? true}
+    showCards={settings.splashCards ?? true}
     onReady={() => appReady = true}
     onRetry={handleRetry} />
 {:else}
   <div class="root">
-    {#if idle && !$activeChapter}
-      <SplashScreen mode="idle" showCards={$settings.splashCards ?? true}
+    {#if idle && !activeChapter}
+      <SplashScreen mode="idle" showCards={settings.splashCards ?? true}
         onDismiss={() => setTimeout(() => idle = false, 340)} />
     {/if}
-    {#if !$activeChapter}<TitleBar />{/if}
+    {#if !activeChapter}<TitleBar />{/if}
     <div class="content">
-      {#if $activeChapter}<Reader />{:else}<Layout />{/if}
+      {#if activeChapter}<Reader />{:else}<Layout />{/if}
     </div>
-    {#if $settingsOpen}<Settings />{/if}
+    {#if settingsOpen}<Settings />{/if}
     <MangaPreview />
     <Toaster />
   </div>
 {/if}
 
 <style>
-  .root {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    overflow: hidden;
-  }
-  .content {
-    flex: 1;
-    overflow: hidden;
-  }
+  .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
+  .content { flex: 1; overflow: hidden; }
 </style>
diff --git a/src/components/layout/Layout.svelte b/src/components/layout/Layout.svelte
index c78741f..b699b2c 100644
--- a/src/components/layout/Layout.svelte
+++ b/src/components/layout/Layout.svelte
@@ -1,34 +1,34 @@
 <script lang="ts">
   import { navPage, activeManga } from "../../store";
-  import Sidebar     from "./Sidebar.svelte";
-  import Home        from "../pages/Home.svelte";
-  import Library     from "../pages/Library.svelte";
+  import Sidebar      from "./Sidebar.svelte";
+  import Home         from "../pages/Home.svelte";
+  import Library      from "../pages/Library.svelte";
   import SeriesDetail from "../pages/SeriesDetail.svelte";
-  import History     from "../pages/History.svelte";
-  import Search      from "../pages/Search.svelte";
-  import Discover    from "../pages/Discover.svelte";
-  import Downloads   from "../pages/Downloads.svelte";
-  import Extensions  from "../pages/Extensions.svelte";
+  import History      from "../pages/History.svelte";
+  import Search       from "../pages/Search.svelte";
+  import Discover     from "../pages/Discover.svelte";
+  import Downloads    from "../pages/Downloads.svelte";
+  import Extensions   from "../pages/Extensions.svelte";
 </script>
 
 <div class="root">
   <Sidebar />
   <main class="main">
-    {#if $activeManga}
+    {#if activeManga}
       <SeriesDetail />
-    {:else if $navPage === "home"}
+    {:else if navPage === "home"}
       <Home />
-    {:else if $navPage === "library"}
+    {:else if navPage === "library"}
       <Library />
-    {:else if $navPage === "search"}
+    {:else if navPage === "search"}
       <Search />
-    {:else if $navPage === "history"}
+    {:else if navPage === "history"}
       <History />
-    {:else if $navPage === "explore" || $navPage === "sources"}
+    {:else if navPage === "explore" || navPage === "sources"}
       <Discover />
-    {:else if $navPage === "downloads"}
+    {:else if navPage === "downloads"}
       <Downloads />
-    {:else if $navPage === "extensions"}
+    {:else if navPage === "extensions"}
       <Extensions />
     {:else}
       <Home />
@@ -38,10 +38,5 @@
 
 <style>
   .root { display: flex; height: 100%; background: var(--bg-base); overflow: hidden; }
-  .main {
-    flex: 1; overflow: hidden;
-    background: var(--bg-surface);
-    transform: translateZ(0);
-    contain: layout style;
-  }
+  .main { flex: 1; overflow: hidden; background: var(--bg-surface); transform: translateZ(0); contain: layout style; }
 </style>
diff --git a/src/components/layout/Sidebar.svelte b/src/components/layout/Sidebar.svelte
index 67f5f08..1b2071c 100644
--- a/src/components/layout/Sidebar.svelte
+++ b/src/components/layout/Sidebar.svelte
@@ -14,91 +14,55 @@
   ];
 
   function navigate(id: NavPage) {
-    navPage.set(id);
-    activeManga.set(null);
-    genreFilter.set("");
-    if (id !== "explore") activeSource.set(null);
+    navPage     = id;
+    activeManga = null;
+    genreFilter = "";
+    if (id !== "explore") activeSource = null;
   }
 
   function goHome() {
-    navPage.set("home");
-    activeSource.set(null);
-    activeManga.set(null);
-    libraryFilter.set("library");
-    genreFilter.set("");
+    navPage       = "home";
+    activeSource  = null;
+    activeManga   = null;
+    libraryFilter = "library";
+    genreFilter   = "";
   }
 </script>
 
 <aside class="root">
-  <button class="logo" on:click={goHome} title="Home" aria-label="Go to Home">
+  <button class="logo" onclick={goHome} title="Home" aria-label="Go to Home">
     <div class="logo-icon"></div>
   </button>
   <nav class="nav">
     {#each TABS as tab}
-      <button class="tab" class:active={$navPage === tab.id}
-        title={tab.label} on:click={() => navigate(tab.id)}>
-        <svelte:component this={tab.icon} size={18} weight="light" />
+      <button class="tab" class:active={navPage === tab.id}
+        title={tab.label} onclick={() => navigate(tab.id)}>
+        <tab.icon size={18} weight="light" />
       </button>
     {/each}
   </nav>
   <div class="bottom">
-    <button class="settings-btn" on:click={() => settingsOpen.set(true)} title="Settings">
+    <button class="settings-btn" onclick={() => settingsOpen = true} title="Settings">
       <GearSix size={18} weight="light" />
     </button>
   </div>
 </aside>
 
 <style>
-  .root {
-    width: var(--sidebar-width); flex-shrink: 0;
-    background: var(--bg-void); display: flex; flex-direction: column;
-    align-items: center; padding: var(--sp-4) 0;
-  }
-  .logo {
-    width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
-    margin-bottom: var(--sp-3); background: none; border: none; outline: none;
-    cursor: pointer; border-radius: var(--radius-lg);
-    transition: opacity var(--t-base), transform var(--t-base);
-    padding: 0; appearance: none; -webkit-appearance: none;
-  }
+  .root { width: var(--sidebar-width); flex-shrink: 0; background: var(--bg-void); display: flex; flex-direction: column; align-items: center; padding: var(--sp-4) 0; }
+  .logo { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); background: none; border: none; outline: none; cursor: pointer; border-radius: var(--radius-lg); transition: opacity var(--t-base), transform var(--t-base); padding: 0; appearance: none; -webkit-appearance: none; }
   .logo:hover { opacity: 0.8; transform: scale(0.96); }
   .logo:active { transform: scale(0.92); }
   .logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-  .logo-icon {
-    width: 80px; height: 80px; background-color: var(--accent);
-    mask-image: url("../../assets/moku-icon.svg");
-    mask-repeat: no-repeat; mask-position: center; mask-size: contain;
-    -webkit-mask-image: url("../../assets/moku-icon.svg");
-    -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
-    filter: drop-shadow(0 0 8px rgba(107,143,107,0.35)); pointer-events: none;
-  }
-  .nav {
-    flex: 1; display: flex; flex-direction: column; align-items: center;
-    gap: var(--sp-1); width: 100%; padding: 0 var(--sp-2);
-  }
-  .tab {
-    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
-    border-radius: var(--radius-md); color: var(--text-faint);
-    background: none; border: none; outline: none; cursor: pointer; padding: 0;
-    appearance: none; -webkit-appearance: none;
-    transition: color var(--t-base), background var(--t-base);
-  }
+  .logo-icon { width: 80px; height: 80px; background-color: var(--accent); mask-image: url("../../assets/moku-icon.svg"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-image: url("../../assets/moku-icon.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; filter: drop-shadow(0 0 8px rgba(107,143,107,0.35)); pointer-events: none; }
+  .nav { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); width: 100%; padding: 0 var(--sp-2); }
+  .tab { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; outline: none; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; transition: color var(--t-base), background var(--t-base); }
   .tab:hover { color: var(--text-muted); background: var(--bg-raised); }
   .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
   .tab.active { color: var(--accent-fg); background: var(--accent-muted); }
   .tab.active:hover { color: var(--accent-fg); background: var(--accent-muted); }
-  .bottom {
-    display: flex; flex-direction: column; align-items: center;
-    width: 100%; padding: var(--sp-3) var(--sp-2) 0;
-    border-top: 1px solid var(--border-dim); margin-top: var(--sp-3);
-  }
-  .settings-btn {
-    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
-    border-radius: var(--radius-md); color: var(--text-faint);
-    background: none; border: none; outline: none; cursor: pointer; padding: 0;
-    appearance: none; -webkit-appearance: none;
-    transition: color var(--t-base), background var(--t-base), transform var(--t-slow);
-  }
+  .bottom { display: flex; flex-direction: column; align-items: center; width: 100%; padding: var(--sp-3) var(--sp-2) 0; border-top: 1px solid var(--border-dim); margin-top: var(--sp-3); }
+  .settings-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; outline: none; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; transition: color var(--t-base), background var(--t-base), transform var(--t-slow); }
   .settings-btn:hover { color: var(--text-muted); background: var(--bg-raised); transform: rotate(30deg); }
   .settings-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
 </style>
diff --git a/src/components/layout/SplashScreen.svelte b/src/components/layout/SplashScreen.svelte
index 588c419..1f85b3a 100644
--- a/src/components/layout/SplashScreen.svelte
+++ b/src/components/layout/SplashScreen.svelte
@@ -1,25 +1,29 @@
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
+  import { onMount } from "svelte";
   import { getCurrentWindow } from "@tauri-apps/api/window";
   import logoUrl from "../../assets/moku-icon.svg";
 
-  export let mode:      "loading" | "idle" = "loading";
-  export let ringFull:  boolean = false;
-  export let failed:    boolean = false;
-  export let showCards: boolean = true;
-  export let showFps:   boolean = false;
-  export let onReady:   (() => void) | undefined = undefined;
-  export let onRetry:   (() => void) | undefined = undefined;
-  export let onDismiss: (() => void) | undefined = undefined;
+  interface Props {
+    mode?:      "loading" | "idle";
+    ringFull?:  boolean;
+    failed?:    boolean;
+    showCards?: boolean;
+    showFps?:   boolean;
+    onReady?:   () => void;
+    onRetry?:   () => void;
+    onDismiss?: () => void;
+  }
+
+  let { mode = "loading", ringFull = false, failed = false, showCards = true,
+        showFps = false, onReady, onRetry, onDismiss }: Props = $props();
 
   const EXIT_MS = 320;
 
-  let dots     = "";
-  let ringProg = 0.025;
-  let exiting  = false;
+  let dots     = $state("");
+  let ringProg = $state(0.025);
+  let exiting  = $state(false);
   let exitLock = false;
 
-  let canvas: HTMLCanvasElement;
   let fpsEl: HTMLSpanElement;
 
   function triggerExit(cb?: () => void) {
@@ -29,10 +33,12 @@
     setTimeout(() => cb?.(), EXIT_MS);
   }
 
-  $: if (ringFull) {
-    ringProg = 1;
-    setTimeout(() => triggerExit(onReady), 650);
-  }
+  $effect(() => {
+    if (ringFull) {
+      ringProg = 1;
+      setTimeout(() => triggerExit(onReady), 650);
+    }
+  });
 
   const dotsInterval = setInterval(() => {
     dots = dots.length >= 3 ? "" : dots + ".";
@@ -48,22 +54,16 @@
       }, 200);
       return () => {
         clearTimeout(t);
+        clearInterval(dotsInterval);
         window.removeEventListener("keydown",    handler);
         window.removeEventListener("mousedown",  handler);
         window.removeEventListener("touchstart", handler);
       };
     }
+    return () => clearInterval(dotsInterval);
   });
 
-  onDestroy(() => clearInterval(dotsInterval));
-
-  // ── canvas animation ────────────────────────────────────────────────────────
-
-  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 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; }
 
   const LAYER_CFG = [
@@ -90,42 +90,26 @@
         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, speed,
-          cycleSec:   travel / speed,
-          phase:      ((col / COLS) + hash(seed + 6) * 0.6 + layer * 0.23) % 1,
-          travel,
-          yStart:     vh + h / 2 + BUF / 2,
-          angleStart: hash(seed + 3) * 50 - 25,
-          tilt:       (hash(seed + 4) * 2 - 1) * 18,
-        });
+        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, speed, cycleSec: travel / speed, phase: ((col / COLS) + hash(seed + 6) * 0.6 + layer * 0.23) % 1, travel, yStart: vh + h / 2 + BUF / 2, angleStart: hash(seed + 3) * 50 - 25, 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),
-    }));
+    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 };
   }
 
   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.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.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;
 
   function buildStamp(c: CardDef, dpr: number): HTMLCanvasElement {
-    const oc  = document.createElement("canvas");
+    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")!;
@@ -133,17 +117,11 @@
     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();
+    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);
@@ -152,23 +130,17 @@
   }
 
   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 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.15, "rgba(0,0,0,0)");
-    g.addColorStop(1,    "rgba(0,0,0,0.82)");
-    ctx.fillStyle = g;
-    ctx.fillRect(0, 0, vw, vh);
+    g.addColorStop(0.15, "rgba(0,0,0,0)"); g.addColorStop(1, "rgba(0,0,0,0.82)");
+    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,
-  ) {
+  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);
     for (let i = 0; i < cards.length; i++) {
       const c = cards[i];
@@ -185,14 +157,11 @@
       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.setTransform(1, 0, 0, 1, 0, 0); ctx.globalAlpha = 1;
     ctx.drawImage(vignette, 0, 0, cw, ch);
   }
 
-  // ── FPS counter ─────────────────────────────────────────────────────────────
   let fps = 0, fpsFrames = 0, fpsLast = 0;
-
   function tickFps(now: number) {
     fpsFrames++;
     if (now - fpsLast >= 500) {
@@ -202,19 +171,12 @@
     }
   }
 
-  // ── canvas mount ─────────────────────────────────────────────────────────────
   function mountCanvas(el: HTMLCanvasElement) {
     const win = getCurrentWindow();
     const ctx = el.getContext("2d")!;
-
-    interface RenderState {
-      cards: CardDef[]; trigs: CardTrig[];
-      stamps: HTMLCanvasElement[]; vignette: HTMLCanvasElement;
-      CW: number; CH: number; scale: number;
-    }
+    interface RenderState { cards: CardDef[]; trigs: CardTrig[]; stamps: HTMLCanvasElement[]; vignette: HTMLCanvasElement; CW: number; CH: number; scale: number; }
     let live: RenderState | null = null;
     let lastLogW = 0, lastLogH = 0, lastScale = 0, buildGen = 0;
-
     async function syncSize() {
       const gen = ++buildGen;
       const [phys, scale] = await Promise.all([win.innerSize(), win.scaleFactor()]);
@@ -225,15 +187,11 @@
       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;
+      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 };
     }
-
     const ro = new ResizeObserver(() => syncSize());
-    ro.observe(el);
-    syncSize();
-
+    ro.observe(el); syncSize();
     let raf = 0, t0 = -1;
     function frame(now: number) {
       raf = requestAnimationFrame(frame);
@@ -244,31 +202,22 @@
       drawFrame(ctx, (now - t0) / 1000, CW, CH, scale, cards, trigs, stamps, vignette);
     }
     raf = requestAnimationFrame(frame);
-
     return () => { cancelAnimationFrame(raf); ro.disconnect(); };
   }
 
-  // ── ring ─────────────────────────────────────────────────────────────────────
-  $: ringR    = 44;
-  $: ringPad  = 8;
-  $: ringSize = (ringR + ringPad) * 2;
-  $: ringC    = ringR + ringPad;
-  $: ringCirc = 2 * Math.PI * ringR;
-  $: ringArc  = ringCirc * Math.min(Math.max(ringProg, 0.025), 0.999);
-  $: ringTop  = -((ringSize - 80) / 2);
-  $: ringLeft = -((ringSize - 80) / 2);
+  const ringR    = $derived(44);
+  const ringPad  = $derived(8);
+  const ringSize = $derived((ringR + ringPad) * 2);
+  const ringC    = $derived(ringR + ringPad);
+  const ringCirc = $derived(2 * Math.PI * ringR);
+  const ringArc  = $derived(ringCirc * Math.min(Math.max(ringProg, 0.025), 0.999));
+  const ringTop  = $derived(-((ringSize - 80) / 2));
+  const ringLeft = $derived(-((ringSize - 80) / 2));
 </script>
 
-<div
-  class="splash"
-  class:exiting
-  style="cursor: {mode === 'idle' ? '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>
+    <canvas style="position:absolute;inset:0;pointer-events:none;width:100%;height:100%" use:mountCanvas></canvas>
     {#if showFps}
       <span bind:this={fpsEl} style="position:absolute;top:8px;right:8px;font-family:var(--font-ui);font-size:10px;color:var(--text-faint);z-index:2;pointer-events:none"></span>
     {/if}
@@ -285,21 +234,9 @@
   {:else}
     <div style="position:relative;width:80px;height:80px;margin-bottom:20px;z-index:1">
       {#if !failed}
-        <svg
-          width={ringSize} height={ringSize}
-          style="position:absolute;pointer-events:none;top:{ringTop}px;left:{ringLeft}px"
-        >
+        <svg width={ringSize} height={ringSize} style="position:absolute;pointer-events:none;top:{ringTop}px;left:{ringLeft}px">
           <circle cx={ringC} cy={ringC} r={ringR} fill="none" stroke="var(--border-base)" stroke-width="2" />
-          <circle
-            cx={ringC} cy={ringC} r={ringR}
-            fill="none"
-            stroke="var(--accent)"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-dasharray="{ringArc} {ringCirc}"
-            transform="rotate(-90 {ringC} {ringC})"
-            style="transition: stroke-dasharray 0.4s cubic-bezier(0.4,0,0.2,1)"
-          />
+          <circle cx={ringC} cy={ringC} r={ringR} fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-dasharray="{ringArc} {ringCirc}" transform="rotate(-90 {ringC} {ringC})" style="transition: stroke-dasharray 0.4s cubic-bezier(0.4,0,0.2,1)" />
         </svg>
       {/if}
       <img src={logoUrl} alt="Moku" style="width:80px;height:80px;border-radius:18px;display:block" />
@@ -307,13 +244,9 @@
     <p class="title-label">moku</p>
     <div style="z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px">
       {#if failed}
-        <p style="font-family:var(--font-ui);font-size:11px;color:var(--color-error);letter-spacing:0.1em;margin:0">
-          Could not reach Suwayomi
-        </p>
-        <p style="font-family:var(--font-ui);font-size:10px;color:var(--text-faint);letter-spacing:0.05em;margin:0;text-align:center;max-width:240px;line-height:1.6">
-          Make sure tachidesk-server is on your PATH
-        </p>
-        <button class="retry-btn" on:click={onRetry}>Retry</button>
+        <p style="font-family:var(--font-ui);font-size:11px;color:var(--color-error);letter-spacing:0.1em;margin:0">Could not reach Suwayomi</p>
+        <p style="font-family:var(--font-ui);font-size:10px;color:var(--text-faint);letter-spacing:0.05em;margin:0;text-align:center;max-width:240px;line-height:1.6">Make sure tachidesk-server is on your PATH</p>
+        <button class="retry-btn" onclick={onRetry}>Retry</button>
       {:else}
         <p style="font-family:var(--font-ui);font-size:10px;color:var(--text-faint);letter-spacing:0.12em;margin:0;min-width:160px;text-align:center">
           {ringFull ? "Ready" : `Initializing server${dots}`}
@@ -324,48 +257,15 @@
 </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; }
+  .splash.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) } }
-  @keyframes logoBreathe {
-    0%,100% { transform:scale(1);   filter:drop-shadow(0 0 0px rgba(255,255,255,0)) }
-    50%     { transform:scale(1.04);filter:drop-shadow(0 0 18px rgba(255,255,255,0.12)) }
-  }
+  @keyframes logoBreathe { 0%,100% { transform:scale(1);    filter:drop-shadow(0 0 0px rgba(255,255,255,0)) } 50% { transform:scale(1.04); filter:drop-shadow(0 0 18px rgba(255,255,255,0.12)) } }
   @keyframes hintFade { 0%,100% { opacity:0.35 } 50% { opacity:0.7 } }
-
-  .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-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;
-  }
-  .title-label {
-    font-family: var(--font-ui); font-size: 11px; font-weight: 500;
-    letter-spacing: 0.26em; text-transform: uppercase;
-    color: var(--text-secondary); margin: 0 0 8px; z-index: 1; user-select: none;
-  }
-  .retry-btn {
-    margin-top: 4px; padding: 5px 16px;
-    border-radius: var(--radius-md);
-    border: 1px solid var(--border-dim);
-    background: var(--bg-raised);
-    color: var(--text-muted); cursor: pointer;
-    font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.08em;
-  }
+  .hint { font-family: var(--font-ui); font-size: 10px; color: var(--text-faint); letter-spacing: 0.22em; text-transform: uppercase; margin: 0; user-select: none; animation: hintFade 3.5s ease-in-out infinite; }
+  .title-label { font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 8px; z-index: 1; user-select: none; }
+  .retry-btn { margin-top: 4px; padding: 5px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); background: var(--bg-raised); color: var(--text-muted); cursor: pointer; font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.08em; }
 </style>
diff --git a/src/components/pages/History.svelte b/src/components/pages/History.svelte
index 0314c21..5f1efc7 100644
--- a/src/components/pages/History.svelte
+++ b/src/components/pages/History.svelte
@@ -1,17 +1,12 @@
 <script lang="ts">
-  import {
-    ClockCounterClockwise, Trash, MagnifyingGlass, Play, Books,
-    X as XIcon,
-  } from "phosphor-svelte";
+  import { ClockCounterClockwise, Trash, MagnifyingGlass, Play, Books, X as XIcon } from "phosphor-svelte";
   import { thumbUrl, gql } from "../../lib/client";
   import { GET_CHAPTERS } from "../../lib/queries";
-  import {
-    history, readingStats, openReader,
-  } from "../../store";
+  import { history, readingStats, openReader, clearHistory, clearHistoryForManga } from "../../store";
   import type { HistoryEntry } from "../../store";
 
-  let search = "";
-  let confirmClearAll = false;
+  let search         = $state("");
+  let confirmClearAll = $state(false);
 
   function timeAgo(ts: number): string {
     const diff = Date.now() - ts, m = Math.floor(diff / 60000);
@@ -31,10 +26,7 @@
     if (d.toDateString() === yest.toDateString()) return "Yesterday";
     const weekAgo = new Date(now); weekAgo.setDate(now.getDate() - 7);
     if (d > weekAgo) return d.toLocaleDateString("en-US", { weekday: "long" });
-    return d.toLocaleDateString("en-US", {
-      month: "long", day: "numeric",
-      year: d.getFullYear() !== now.getFullYear() ? "numeric" : undefined,
-    });
+    return d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: d.getFullYear() !== now.getFullYear() ? "numeric" : undefined });
   }
 
   function formatReadTime(mins: number): string {
@@ -49,15 +41,9 @@
   const SESSION_GAP_MS = 30 * 60 * 1000;
 
   interface Session {
-    mangaId: number;
-    mangaTitle: string;
-    thumbnailUrl: string;
-    latestChapterId: number;
-    latestChapterName: string;
-    latestPageNumber: number;
-    firstChapterName: string;
-    chapterCount: number;
-    readAt: number;
+    mangaId: number; mangaTitle: string; thumbnailUrl: string;
+    latestChapterId: number; latestChapterName: string; latestPageNumber: number;
+    firstChapterName: string; chapterCount: number; readAt: number;
   }
 
   function buildSessions(entries: HistoryEntry[]): Session[] {
@@ -70,37 +56,23 @@
       let j = i + 1;
       while (j < entries.length) {
         const next = entries[j];
-        if (next.mangaId === anchor.mangaId && anchor.readAt - next.readAt <= SESSION_GAP_MS) {
-          group.push(next); j++;
-        } else break;
+        if (next.mangaId === anchor.mangaId && anchor.readAt - next.readAt <= SESSION_GAP_MS) { group.push(next); j++; }
+        else break;
       }
       const latest = group[0], oldest = group[group.length - 1];
-      sessions.push({
-        mangaId: latest.mangaId,
-        mangaTitle: latest.mangaTitle,
-        thumbnailUrl: latest.thumbnailUrl,
-        latestChapterId: latest.chapterId,
-        latestChapterName: latest.chapterName,
-        latestPageNumber: latest.pageNumber,
-        firstChapterName: oldest.chapterName,
-        chapterCount: group.length,
-        readAt: latest.readAt,
-      });
+      sessions.push({ mangaId: latest.mangaId, mangaTitle: latest.mangaTitle, thumbnailUrl: latest.thumbnailUrl, latestChapterId: latest.chapterId, latestChapterName: latest.chapterName, latestPageNumber: latest.pageNumber, firstChapterName: oldest.chapterName, chapterCount: group.length, readAt: latest.readAt });
       i = j;
     }
     return sessions;
   }
 
-  $: filtered = search.trim()
-    ? $history.filter((e) =>
-        e.mangaTitle.toLowerCase().includes(search.toLowerCase()) ||
-        e.chapterName.toLowerCase().includes(search.toLowerCase())
-      )
-    : $history;
+  const filtered = $derived(search.trim()
+    ? history.filter(e => e.mangaTitle.toLowerCase().includes(search.toLowerCase()) || e.chapterName.toLowerCase().includes(search.toLowerCase()))
+    : history);
 
-  $: sessions = buildSessions(filtered);
+  const sessions = $derived(buildSessions(filtered));
 
-  $: groups = (() => {
+  const groups = $derived((() => {
     const map = new Map<string, Session[]>();
     for (const s of sessions) {
       const l = dayLabel(s.readAt);
@@ -108,29 +80,21 @@
       map.get(l)!.push(s);
     }
     return Array.from(map.entries()).map(([label, items]) => ({ label, items }));
-  })();
+  })());
 
-  $: stats = {
-    uniqueChapters: new Set($history.map((e) => e.chapterId)).size,
-    uniqueManga: new Set($history.map((e) => e.mangaId)).size,
-    estimatedMinutes: Math.round(new Set($history.map((e) => e.chapterId)).size * 4.5),
-  };
+  const stats = $derived({
+    uniqueChapters: new Set(history.map(e => e.chapterId)).size,
+    uniqueManga: new Set(history.map(e => e.mangaId)).size,
+    estimatedMinutes: Math.round(new Set(history.map(e => e.chapterId)).size * 4.5),
+  });
 
-  function clearAll() {
-    history.set([]);
-    confirmClearAll = false;
-  }
-
-  function clearManga(mangaId: number, e: MouseEvent) {
-    e.stopPropagation();
-    history.update((h) => h.filter((x) => x.mangaId !== mangaId));
-  }
+  function doConfirmClear() { clearHistory(); confirmClearAll = false; }
 
   async function resume(session: Session) {
     try {
       const d = await gql<{ chapters: { nodes: any[] } }>(GET_CHAPTERS, { mangaId: session.mangaId });
       const chapters = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
-      const ch = chapters.find((c) => c.id === session.latestChapterId) ?? chapters[0];
+      const ch = chapters.find(c => c.id === session.latestChapterId) ?? chapters[0];
       if (ch) openReader(ch, chapters);
     } catch {}
   }
@@ -144,20 +108,20 @@
         <MagnifyingGlass size={12} class="search-icon" weight="light" />
         <input class="search" placeholder="Search history…" bind:value={search} />
         {#if search}
-          <button class="search-clear" on:click={() => (search = "")}>
+          <button class="search-clear" onclick={() => search = ""}>
             <XIcon size={10} weight="bold" />
           </button>
         {/if}
       </div>
-      {#if $history.length > 0}
+      {#if history.length > 0}
         {#if confirmClearAll}
           <div class="confirm-row">
             <span class="confirm-label">Clear all activity?</span>
-            <button class="confirm-yes" on:click={clearAll}>Clear</button>
-            <button class="confirm-no" on:click={() => (confirmClearAll = false)}>Cancel</button>
+            <button class="confirm-yes" onclick={doConfirmClear}>Clear</button>
+            <button class="confirm-no" onclick={() => confirmClearAll = false}>Cancel</button>
           </div>
         {:else}
-          <button class="clear-btn" on:click={() => (confirmClearAll = true)} title="Clear all activity">
+          <button class="clear-btn" onclick={() => confirmClearAll = true} title="Clear all activity">
             <Trash size={13} weight="light" />
           </button>
         {/if}
@@ -166,30 +130,18 @@
   </div>
 
   <div class="stats-bar">
-    <span class="stat-item">
-      <span class="stat-val">{stats.uniqueChapters}</span>
-      <span class="stat-label">chapters</span>
-    </span>
+    <span class="stat-item"><span class="stat-val">{stats.uniqueChapters}</span><span class="stat-label">chapters</span></span>
     <span class="stat-sep"></span>
-    <span class="stat-item">
-      <span class="stat-val">{stats.uniqueManga}</span>
-      <span class="stat-label">series</span>
-    </span>
+    <span class="stat-item"><span class="stat-val">{stats.uniqueManga}</span><span class="stat-label">series</span></span>
     <span class="stat-sep"></span>
-    <span class="stat-item">
-      <span class="stat-val">{formatReadTime(stats.estimatedMinutes)}</span>
-      <span class="stat-label">est. time</span>
-    </span>
-    {#if $readingStats.currentStreakDays > 0}
+    <span class="stat-item"><span class="stat-val">{formatReadTime(stats.estimatedMinutes)}</span><span class="stat-label">est. time</span></span>
+    {#if readingStats.currentStreakDays > 0}
       <span class="stat-sep"></span>
-      <span class="stat-item">
-        <span class="stat-val">{$readingStats.currentStreakDays}d</span>
-        <span class="stat-label">streak</span>
-      </span>
+      <span class="stat-item"><span class="stat-val">{readingStats.currentStreakDays}d</span><span class="stat-label">streak</span></span>
     {/if}
   </div>
 
-  {#if $history.length === 0}
+  {#if history.length === 0}
     <div class="empty">
       <ClockCounterClockwise size={32} weight="light" class="empty-icon" />
       <p class="empty-text">No reading history yet</p>
@@ -210,15 +162,9 @@
           </p>
           {#each items as session (session.latestChapterId + ":" + session.readAt)}
             <div class="row-wrap">
-              <button class="row" on:click={() => resume(session)}>
+              <button class="row" onclick={() => resume(session)}>
                 <div class="thumb-wrap">
-                  <img
-                    src={thumbUrl(session.thumbnailUrl)}
-                    alt={session.mangaTitle}
-                    class="thumb"
-                    loading="lazy"
-                    decoding="async"
-                  />
+                  <img src={thumbUrl(session.thumbnailUrl)} alt={session.mangaTitle} class="thumb" loading="lazy" decoding="async" />
                   {#if session.chapterCount > 1}
                     <span class="session-badge">{session.chapterCount}</span>
                   {/if}
@@ -227,28 +173,17 @@
                   <span class="manga-title">{session.mangaTitle}</span>
                   <span class="chapter-name">
                     {#if session.chapterCount > 1}
-                      <span class="chapter-range">
-                        {session.firstChapterName}
-                        <span class="range-sep">→</span>
-                        {session.latestChapterName}
-                      </span>
+                      <span class="chapter-range">{session.firstChapterName}<span class="range-sep">→</span>{session.latestChapterName}</span>
                     {:else}
                       {session.latestChapterName}
-                      {#if session.latestPageNumber > 1}
-                        <span class="page-badge">p.{session.latestPageNumber}</span>
-                      {/if}
+                      {#if session.latestPageNumber > 1}<span class="page-badge">p.{session.latestPageNumber}</span>{/if}
                     {/if}
                   </span>
                 </div>
                 <span class="time">{timeAgo(session.readAt)}</span>
                 <Play size={11} weight="fill" class="play-icon" />
               </button>
-              <button
-                class="row-delete"
-                on:click={(e) => clearManga(session.mangaId, e)}
-                title="Remove {session.mangaTitle} from history"
-                aria-label="Remove from history"
-              >
+              <button class="row-delete" onclick={() => clearHistoryForManga(session.mangaId)} title="Remove {session.mangaTitle} from history" aria-label="Remove from history">
                 <XIcon size={9} weight="bold" />
               </button>
             </div>
@@ -261,143 +196,55 @@
 
 <style>
   .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
-
-  .header {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: var(--sp-5) var(--sp-6) var(--sp-3); flex-shrink: 0;
-  }
-  .heading {
-    font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal);
-    color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase;
-  }
+  .header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-6) var(--sp-3); flex-shrink: 0; }
+  .heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
   .header-right { display: flex; align-items: center; gap: var(--sp-2); }
-
   .search-wrap { position: relative; display: flex; align-items: center; }
   .search-wrap :global(.search-icon) { position: absolute; left: 9px; color: var(--text-faint); pointer-events: none; }
-  .search {
-    background: var(--bg-raised); border: 1px solid var(--border-dim);
-    border-radius: var(--radius-md); padding: 5px 28px 5px 26px;
-    color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none;
-    transition: border-color var(--t-base);
-  }
+  .search { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 5px 28px 5px 26px; color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none; transition: border-color var(--t-base); }
   .search::placeholder { color: var(--text-faint); }
   .search:focus { border-color: var(--border-strong); }
-  .search-clear {
-    position: absolute; right: 7px; display: flex; align-items: center; justify-content: center;
-    color: var(--text-faint); background: none; border: none; cursor: pointer;
-    padding: 2px; transition: color var(--t-base);
-  }
+  .search-clear { position: absolute; right: 7px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); background: none; border: none; cursor: pointer; padding: 2px; transition: color var(--t-base); }
   .search-clear:hover { color: var(--text-muted); }
-
   .confirm-row { display: flex; align-items: center; gap: var(--sp-2); }
   .confirm-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
-  .confirm-yes {
-    font-family: var(--font-ui); font-size: var(--text-xs); padding: 4px 10px;
-    border-radius: var(--radius-sm); border: 1px solid var(--color-error);
-    background: var(--color-error-bg); color: var(--color-error); cursor: pointer;
-    transition: filter var(--t-base);
-  }
+  .confirm-yes { font-family: var(--font-ui); font-size: var(--text-xs); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--color-error); background: var(--color-error-bg); color: var(--color-error); cursor: pointer; transition: filter var(--t-base); }
   .confirm-yes:hover { filter: brightness(1.15); }
-  .confirm-no {
-    font-family: var(--font-ui); font-size: var(--text-xs); padding: 4px 10px;
-    border-radius: var(--radius-sm); border: 1px solid var(--border-dim);
-    background: none; color: var(--text-faint); cursor: pointer;
-    transition: background var(--t-base);
-  }
+  .confirm-no { font-family: var(--font-ui); font-size: var(--text-xs); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; transition: background var(--t-base); }
   .confirm-no:hover { background: var(--bg-raised); color: var(--text-muted); }
-
-  .clear-btn {
-    display: flex; align-items: center; justify-content: center;
-    width: 28px; height: 28px; border-radius: var(--radius-md);
-    color: var(--text-faint); background: none; border: none; cursor: pointer;
-    transition: color var(--t-base), background var(--t-base);
-  }
+  .clear-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; cursor: pointer; transition: color var(--t-base), background var(--t-base); }
   .clear-btn:hover { color: var(--color-error); background: var(--color-error-bg); }
-
-  .stats-bar {
-    display: flex; align-items: center; gap: var(--sp-3);
-    padding: 0 var(--sp-6) var(--sp-3); flex-shrink: 0;
-  }
+  .stats-bar { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-6) var(--sp-3); flex-shrink: 0; }
   .stat-item { display: flex; align-items: baseline; gap: 4px; }
   .stat-val { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
   .stat-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
   .stat-sep { width: 1px; height: 10px; background: var(--border-dim); flex-shrink: 0; }
-
   .list { flex: 1; overflow-y: auto; padding: 0 var(--sp-4) var(--sp-6); scrollbar-width: none; }
   .list::-webkit-scrollbar { display: none; }
-
   .group { margin-bottom: var(--sp-4); }
-  .group-label {
-    display: flex; align-items: center; gap: var(--sp-2);
-    font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint);
-    letter-spacing: var(--tracking-wider); text-transform: uppercase;
-    padding: var(--sp-1) var(--sp-2) var(--sp-2);
-  }
-  .group-count {
-    font-family: var(--font-ui); font-size: 9px; color: var(--text-faint);
-    background: var(--bg-raised); border: 1px solid var(--border-dim);
-    padding: 1px 5px; border-radius: var(--radius-full); letter-spacing: 0;
-    text-transform: none;
-  }
-
-  .row-wrap {
-    display: flex; align-items: center;
-    border-radius: var(--radius-md);
-    transition: background var(--t-fast);
-  }
+  .group-label { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding: var(--sp-1) var(--sp-2) var(--sp-2); }
+  .group-count { font-family: var(--font-ui); font-size: 9px; color: var(--text-faint); background: var(--bg-raised); border: 1px solid var(--border-dim); padding: 1px 5px; border-radius: var(--radius-full); letter-spacing: 0; text-transform: none; }
+  .row-wrap { display: flex; align-items: center; border-radius: var(--radius-md); transition: background var(--t-fast); }
   .row-wrap:hover { background: var(--bg-raised); }
   .row-wrap:hover .row-delete { opacity: 1; }
-
-  .row {
-    flex: 1; display: flex; align-items: center; gap: var(--sp-3);
-    padding: 8px var(--sp-2); border-radius: var(--radius-md);
-    border: none; background: none; text-align: left; cursor: pointer; min-width: 0;
-  }
+  .row { flex: 1; display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-2); border-radius: var(--radius-md); border: none; background: none; text-align: left; cursor: pointer; min-width: 0; }
   .row:hover :global(.play-icon) { opacity: 1; }
-
-  .row-delete {
-    display: flex; align-items: center; justify-content: center;
-    flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-sm);
-    border: none; background: none; color: var(--text-faint); cursor: pointer;
-    opacity: 0; transition: opacity var(--t-base), color var(--t-base), background var(--t-base);
-    margin-right: var(--sp-1);
-  }
+  .row-delete { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-sm); border: none; background: none; color: var(--text-faint); cursor: pointer; opacity: 0; transition: opacity var(--t-base), color var(--t-base), background var(--t-base); margin-right: var(--sp-1); }
   .row-delete:hover { color: var(--color-error); background: var(--color-error-bg); }
-
   .thumb-wrap { position: relative; flex-shrink: 0; }
-  .thumb {
-    width: 36px; height: 52px; border-radius: var(--radius-sm); object-fit: cover;
-    display: block; background: var(--bg-raised); border: 1px solid var(--border-dim);
-  }
-  .session-badge {
-    position: absolute; bottom: -4px; right: -6px;
-    background: var(--accent-muted); border: 1px solid var(--accent-dim); color: var(--accent-fg);
-    font-family: var(--font-ui); font-size: 9px; font-weight: 600;
-    padding: 1px 4px; border-radius: 6px; line-height: 1.4; pointer-events: none;
-  }
-
+  .thumb { width: 36px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; display: block; background: var(--bg-raised); border: 1px solid var(--border-dim); }
+  .session-badge { position: absolute; bottom: -4px; right: -6px; background: var(--accent-muted); border: 1px solid var(--accent-dim); color: var(--accent-fg); font-family: var(--font-ui); font-size: 9px; font-weight: 600; padding: 1px 4px; border-radius: 6px; line-height: 1.4; pointer-events: none; }
   .info { flex: 1; display: flex; flex-direction: column; gap: 3px; overflow: hidden; min-width: 0; }
-  .manga-title {
-    font-size: var(--text-base); font-weight: var(--weight-medium);
-    color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-  }
-  .chapter-name {
-    font-size: var(--text-sm); color: var(--text-muted);
-    display: flex; align-items: center; gap: var(--sp-1); min-width: 0;
-  }
-  .chapter-range {
-    display: flex; align-items: center; gap: 5px;
-    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted);
-  }
+  .manga-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .chapter-name { font-size: var(--text-sm); color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
+  .chapter-range { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }
   .range-sep { color: var(--text-faint); font-size: 10px; flex-shrink: 0; }
   .page-badge { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); flex-shrink: 0; }
   .time { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); flex-shrink: 0; white-space: nowrap; }
   :global(.play-icon) { color: var(--text-faint); flex-shrink: 0; opacity: 0; transition: opacity var(--t-base); }
-
   .empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); }
   :global(.empty-icon) { color: var(--text-faint); }
   .empty-text { font-size: var(--text-base); color: var(--text-muted); }
   .empty-hint { font-size: var(--text-sm); color: var(--text-faint); }
-
   @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
 </style>
diff --git a/src/components/pages/Home.svelte b/src/components/pages/Home.svelte
index 30df204..ce61a5c 100644
--- a/src/components/pages/Home.svelte
+++ b/src/components/pages/Home.svelte
@@ -1,22 +1,13 @@
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
-  import {
-    Play, ArrowRight, ArrowLeft, BookOpen, Clock, Fire, TrendUp,
-    CalendarBlank, CheckCircle, PushPin, X as XIcon,
-    MagnifyingGlass, ListBullets,
-  } from "phosphor-svelte";
+  import { onMount } from "svelte";
+  import { Play, ArrowRight, ArrowLeft, BookOpen, Clock, Fire, TrendUp, CalendarBlank, CheckCircle, PushPin, X as XIcon, MagnifyingGlass, ListBullets } from "phosphor-svelte";
   import { gql, thumbUrl } from "../../lib/client";
   import { GET_LIBRARY, GET_CHAPTERS } from "../../lib/queries";
   import { cache, CACHE_KEYS } from "../../lib/cache";
-  import {
-    history, readingStats, settings, activeManga, navPage,
-    previewManga, openReader, activeChapterList,
-    COMPLETED_FOLDER_ID, setHeroSlot,
-  } from "../../store";
+  import { history, readingStats, settings, activeManga, navPage, previewManga, openReader, COMPLETED_FOLDER_ID, setHeroSlot } from "../../store";
   import type { HistoryEntry } from "../../store";
   import type { Manga, Chapter } from "../../lib/types";
 
-  // ── Helpers ───────────────────────────────────────────────────────────────────
   function timeAgo(ts: number): string {
     const diff = Date.now() - ts, m = Math.floor(diff / 60000);
     if (m < 1)  return "Just now";
@@ -27,6 +18,7 @@
     if (d < 7)  return `${d}d ago`;
     return new Date(ts).toLocaleDateString("en-US", { month: "short", day: "numeric" });
   }
+
   function formatReadTime(mins: number): string {
     if (mins < 1)   return `${Math.round(mins * 60)}s`;
     if (mins < 60)  return `${Math.round(mins)}m`;
@@ -35,11 +27,11 @@
     const d = Math.floor(h / 24), rh = h % 24;
     return rh === 0 ? `${d}d` : `${d}d ${rh}h`;
   }
+
   function focusEl(node: HTMLElement) { node.focus(); }
 
-  // ── Library ───────────────────────────────────────────────────────────────────
-  let libraryManga: Manga[] = [];
-  let loadingLibrary = true;
+  let libraryManga:   Manga[]  = $state([]);
+  let loadingLibrary: boolean  = $state(true);
 
   onMount(() => {
     cache.get(CACHE_KEYS.LIBRARY, () =>
@@ -49,35 +41,26 @@
      .finally(() => loadingLibrary = false);
   });
 
-  // ── Continue reading (deduped) ────────────────────────────────────────────────
-  $: continueReading = (() => {
+  const continueReading = $derived((() => {
     const seen = new Set<number>();
     const out: HistoryEntry[] = [];
-    for (const e of $history) {
+    for (const e of history) {
       if (seen.has(e.mangaId)) continue;
       seen.add(e.mangaId);
       out.push(e);
       if (out.length >= 10) break;
     }
     return out;
-  })();
+  })());
 
-  // ── Hero slots ────────────────────────────────────────────────────────────────
   const TOTAL_SLOTS = 4;
-  interface HeroSlot {
-    kind: "continue" | "pinned" | "empty";
-    entry?: HistoryEntry;
-    manga?: Manga;
-    slotIndex: number;
-  }
+  interface HeroSlot { kind: "continue" | "pinned" | "empty"; entry?: HistoryEntry; manga?: Manga; slotIndex: number; }
 
-  $: resolvedSlots = (() => {
-    const pins = $settings.heroSlots ?? [null, null, null, null];
+  const resolvedSlots = $derived((() => {
+    const pins = settings.heroSlots ?? [null, null, null, null];
     const slots: HeroSlot[] = [];
     const first = continueReading[0];
-    slots.push(first
-      ? { kind: "continue", entry: first, slotIndex: 0 }
-      : { kind: "empty", slotIndex: 0 });
+    slots.push(first ? { kind: "continue", entry: first, slotIndex: 0 } : { kind: "empty", slotIndex: 0 });
     let hi = 1;
     for (let i = 1; i < TOTAL_SLOTS; i++) {
       const pinId = pins[i];
@@ -86,23 +69,18 @@
         if (manga) { slots.push({ kind: "pinned", manga, slotIndex: i }); continue; }
       }
       const entry = continueReading[hi++];
-      slots.push(entry
-        ? { kind: "continue", entry, slotIndex: i }
-        : { kind: "empty", slotIndex: i });
+      slots.push(entry ? { kind: "continue", entry, slotIndex: i } : { kind: "empty", slotIndex: i });
     }
     return slots;
-  })();
+  })());
 
-  let activeIdx = 0;
-  $: activeSlot = resolvedSlots[activeIdx];
-  $: heroThumb  = activeSlot?.kind === "pinned"  ? thumbUrl(activeSlot.manga?.thumbnailUrl ?? "")
-                : activeSlot?.kind === "continue" ? thumbUrl(activeSlot.entry?.thumbnailUrl ?? "") : "";
-  $: heroTitle  = activeSlot?.kind === "pinned"  ? (activeSlot.manga?.title ?? "")
-                : activeSlot?.kind === "continue" ? (activeSlot.entry?.mangaTitle ?? "") : "";
-  $: heroManga  = activeSlot?.kind === "pinned"  ? activeSlot.manga
-                : activeSlot?.kind === "continue" ? libraryManga.find(m => m.id === activeSlot.entry?.mangaId) : null;
-  $: heroEntry  = activeSlot?.kind === "continue" ? activeSlot.entry : null;
-  $: heroMangaId = heroEntry?.mangaId ?? heroManga?.id ?? null;
+  let activeIdx = $state(0);
+  const activeSlot  = $derived(resolvedSlots[activeIdx]);
+  const heroThumb   = $derived(activeSlot?.kind === "pinned"   ? thumbUrl(activeSlot.manga?.thumbnailUrl ?? "") : activeSlot?.kind === "continue" ? thumbUrl(activeSlot.entry?.thumbnailUrl ?? "") : "");
+  const heroTitle   = $derived(activeSlot?.kind === "pinned"   ? (activeSlot.manga?.title ?? "")               : activeSlot?.kind === "continue" ? (activeSlot.entry?.mangaTitle ?? "") : "");
+  const heroManga   = $derived(activeSlot?.kind === "pinned"   ? activeSlot.manga                               : activeSlot?.kind === "continue" ? libraryManga.find(m => m.id === activeSlot.entry?.mangaId) : null);
+  const heroEntry   = $derived(activeSlot?.kind === "continue" ? activeSlot.entry : null);
+  const heroMangaId = $derived(heroEntry?.mangaId ?? heroManga?.id ?? null);
 
   function cycleNext() { activeIdx = (activeIdx + 1) % TOTAL_SLOTS; heroChapters = []; }
   function cyclePrev() { activeIdx = (activeIdx - 1 + TOTAL_SLOTS) % TOTAL_SLOTS; heroChapters = []; }
@@ -113,18 +91,18 @@
     if (e.key === "ArrowRight") cycleNext();
     if (e.key === "ArrowLeft")  cyclePrev();
   }
-  onMount(() => window.addEventListener("keydown", onKey));
-  onDestroy(() => window.removeEventListener("keydown", onKey));
+  onMount(() => {
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  });
 
-  // ── Hero chapter panel ────────────────────────────────────────────────────────
-  // Load chapters for the active slot's manga, show 3-5 starting at where user left off
-  let heroChapters: Chapter[] = [];
-  let loadingHeroChapters = false;
+  let heroChapters:    Chapter[] = $state([]);
+  let loadingHeroChapters = $state(false);
   let heroChaptersFor: number | null = null;
 
-  $: if (heroMangaId && heroMangaId !== heroChaptersFor) {
-    loadHeroChapters(heroMangaId);
-  }
+  $effect(() => {
+    if (heroMangaId && heroMangaId !== heroChaptersFor) loadHeroChapters(heroMangaId);
+  });
 
   async function loadHeroChapters(mangaId: number) {
     heroChaptersFor = mangaId;
@@ -132,20 +110,16 @@
     heroChapters = [];
     try {
       const d = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId });
-      if (heroChaptersFor !== mangaId) return; // stale
+      if (heroChaptersFor !== mangaId) return;
       const all = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
-      // Find the chapter user left off on, show from one before it
-      const lastReadIdx = heroEntry
-        ? all.findIndex(c => c.id === heroEntry!.chapterId)
-        : all.findLastIndex(c => c.isRead);
+      const lastReadIdx = heroEntry ? all.findIndex(c => c.id === heroEntry!.chapterId) : all.findLastIndex(c => c.isRead);
       const startIdx = Math.max(0, lastReadIdx);
       heroChapters = all.slice(startIdx, startIdx + 5);
     } catch { heroChapters = []; }
     finally { loadingHeroChapters = false; }
   }
 
-  // ── Resume helpers ────────────────────────────────────────────────────────────
-  let resuming = false;
+  let resuming = $state(false);
 
   async function openChapter(chapter: Chapter) {
     if (!heroMangaId) return;
@@ -157,28 +131,24 @@
         all = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
       }
       openReader(chapter, all);
-    } catch {
-      activeManga.set({ id: heroMangaId, title: heroTitle, thumbnailUrl: (heroManga?.thumbnailUrl ?? "") } as any);
-    } finally { resuming = false; }
+    } catch { activeManga = { id: heroMangaId, title: heroTitle, thumbnailUrl: heroManga?.thumbnailUrl ?? "" } as any; }
+    finally { resuming = false; }
   }
 
   async function resumeActive() {
-    if (!heroEntry && heroManga) { activeManga.set(heroManga); return; }
+    if (!heroEntry && heroManga) { activeManga = heroManga; return; }
     if (!heroEntry) return;
-    // Use hero chapter panel data if available (already fetched)
     const target = heroChapters.find(c => c.id === heroEntry!.chapterId) ?? heroChapters[0];
     if (target && heroChapters.length) { await openChapter(target); return; }
-    // Fallback — fetch
     resuming = true;
     try {
       const d = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: heroEntry.mangaId });
       const chapters = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
       const ch = chapters.find(c => c.id === heroEntry!.chapterId) ?? chapters[0];
       if (ch) openReader(ch, chapters);
-      else activeManga.set({ id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any);
-    } catch {
-      activeManga.set({ id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any);
-    } finally { resuming = false; }
+      else activeManga = { id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any;
+    } catch { activeManga = { id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any; }
+    finally { resuming = false; }
   }
 
   async function resumeEntry(entry: HistoryEntry) {
@@ -187,32 +157,27 @@
       const chapters = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
       const ch = chapters.find(c => c.id === entry.chapterId) ?? chapters[0];
       if (ch) openReader(ch, chapters);
-      else activeManga.set({ id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any);
-    } catch {
-      activeManga.set({ id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any);
-    }
+      else activeManga = { id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any;
+    } catch { activeManga = { id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any; }
   }
 
-  // ── Slot picker ───────────────────────────────────────────────────────────────
-  let pickerOpen = false;
-  let pickerSlotIndex: 1|2|3|null = null;
-  let pickerSearch = "";
-  $: pickerResults = pickerSearch.trim()
+  let pickerOpen      = $state(false);
+  let pickerSlotIndex: 1|2|3|null = $state(null);
+  let pickerSearch    = $state("");
+
+  const pickerResults = $derived(pickerSearch.trim()
     ? libraryManga.filter(m => m.title.toLowerCase().includes(pickerSearch.toLowerCase())).slice(0, 20)
-    : libraryManga.slice(0, 20);
+    : libraryManga.slice(0, 20));
+
   function openPicker(i: 1|2|3) { pickerSlotIndex = i; pickerOpen = true; pickerSearch = ""; }
   function closePicker() { pickerOpen = false; pickerSlotIndex = null; }
   function pinManga(m: Manga) { if (pickerSlotIndex !== null) { setHeroSlot(pickerSlotIndex, m.id); closePicker(); } }
   function unpinSlot(i: 1|2|3) { setHeroSlot(i, null); }
 
-  // ── Completed, activity, stats ────────────────────────────────────────────────
-  $: completedIds   = $settings.folders.find(f => f.id === COMPLETED_FOLDER_ID)?.mangaIds ?? [];
-  $: completedManga = completedIds.length > 0
-    ? libraryManga.filter(m => completedIds.includes(m.id)).slice(0, 10)
-    : [];
-  $: recentHistory = $history.slice(0, 8);
-  $: stats    = $readingStats;
-  $: hasStats = true;
+  const completedIds   = $derived(settings.folders.find(f => f.id === COMPLETED_FOLDER_ID)?.mangaIds ?? []);
+  const completedManga = $derived(completedIds.length > 0 ? libraryManga.filter(m => completedIds.includes(m.id)).slice(0, 10) : []);
+  const recentHistory  = $derived(history.slice(0, 8));
+  const stats          = $derived(readingStats);
 
   function handleRowWheel(e: WheelEvent) {
     if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
@@ -224,11 +189,9 @@
 <div class="root">
   <div class="body">
 
-    <!-- ══ HERO ════════════════════════════════════════════════════════════════ -->
     <div class="hero-section">
       <div class="hero-stage">
 
-        <!-- Blurred backdrop -->
         {#if heroThumb}
           <div class="hero-backdrop" style="background-image:url({heroThumb})"></div>
         {:else}
@@ -236,37 +199,23 @@
         {/if}
         <div class="hero-scrim"></div>
 
-        <!-- ── Col 1: Cover (clickable → resume) ─────────────────────────── -->
-        <button
-          class="hero-cover-col"
-          on:click={resumeActive}
-          disabled={resuming || activeSlot?.kind === "empty"}
-          title={heroTitle ? `Resume ${heroTitle}` : undefined}
-          aria-label={heroTitle ? `Resume ${heroTitle}` : "No manga selected"}
-        >
+        <button class="hero-cover-col" onclick={resumeActive} disabled={resuming || activeSlot?.kind === "empty"} title={heroTitle ? `Resume ${heroTitle}` : undefined} aria-label={heroTitle ? `Resume ${heroTitle}` : "No manga selected"}>
           {#if heroThumb}
             <img src={heroThumb} alt={heroTitle} class="hero-cover" loading="eager" decoding="async" />
             {#if activeSlot?.kind === "continue"}
-              <div class="cover-resume-hint">
-                <Play size={18} weight="fill" />
-              </div>
+              <div class="cover-resume-hint"><Play size={18} weight="fill" /></div>
             {/if}
           {:else}
             <div class="hero-cover-empty"><BookOpen size={28} weight="light" /></div>
           {/if}
         </button>
 
-        <!-- ── Col 2: Details ────────────────────────────────────────────── -->
         <div class="hero-details">
           {#if activeSlot?.kind === "empty"}
             <p class="hero-empty-title">Nothing here yet</p>
-            <p class="hero-empty-sub">
-              {activeSlot.slotIndex === 0
-                ? "Read a manga to see it here"
-                : "Pin a manga or keep reading to fill this slot"}
-            </p>
+            <p class="hero-empty-sub">{activeSlot.slotIndex === 0 ? "Read a manga to see it here" : "Pin a manga or keep reading to fill this slot"}</p>
             {#if activeSlot.slotIndex !== 0}
-              <button class="hero-cta" on:click={() => openPicker(activeSlot.slotIndex as 1|2|3)}>
+              <button class="hero-cta" onclick={() => openPicker(activeSlot.slotIndex as 1|2|3)}>
                 <PushPin size={11} weight="fill" /> Pin manga
               </button>
             {/if}
@@ -283,10 +232,7 @@
             </div>
 
             <h2 class="hero-title">{heroTitle}</h2>
-
-            {#if heroManga?.author}
-              <p class="hero-author">{heroManga.author}</p>
-            {/if}
+            {#if heroManga?.author}<p class="hero-author">{heroManga.author}</p>{/if}
 
             {#if heroEntry}
               <p class="hero-progress">
@@ -297,28 +243,25 @@
               </p>
             {/if}
 
-            {#if heroManga?.description}
-              <p class="hero-desc">{heroManga.description}</p>
-            {/if}
+            {#if heroManga?.description}<p class="hero-desc">{heroManga.description}</p>{/if}
 
             <div class="hero-actions">
               {#if activeSlot?.kind === "continue"}
-                <button class="hero-cta" on:click={resumeActive} disabled={resuming}>
-                  <Play size={11} weight="fill" />
-                  {resuming ? "Loading…" : "Resume"}
+                <button class="hero-cta" onclick={resumeActive} disabled={resuming}>
+                  <Play size={11} weight="fill" />{resuming ? "Loading…" : "Resume"}
                 </button>
               {:else if heroManga}
-                <button class="hero-cta" on:click={() => previewManga.set(heroManga!)}>
+                <button class="hero-cta" onclick={() => previewManga = heroManga!}>
                   <BookOpen size={11} weight="light" /> View manga
                 </button>
               {/if}
               {#if activeSlot?.slotIndex !== 0}
                 {#if activeSlot?.kind === "pinned"}
-                  <button class="hero-cta-ghost" on:click={() => unpinSlot(activeSlot.slotIndex as 1|2|3)}>
+                  <button class="hero-cta-ghost" onclick={() => unpinSlot(activeSlot.slotIndex as 1|2|3)}>
                     <XIcon size={10} weight="bold" /> Unpin
                   </button>
                 {:else}
-                  <button class="hero-cta-ghost" on:click={() => openPicker(activeSlot!.slotIndex as 1|2|3)}>
+                  <button class="hero-cta-ghost" onclick={() => openPicker(activeSlot!.slotIndex as 1|2|3)}>
                     <PushPin size={10} weight="light" /> Pin
                   </button>
                 {/if}
@@ -326,35 +269,20 @@
             </div>
           {/if}
 
-          <!-- Slot dots and arrows — inside details col, at the bottom -->
           <div class="hero-nav-row">
-            <button class="hero-nav-btn" on:click={cyclePrev} aria-label="Previous">
-              <ArrowLeft size={12} weight="bold" />
-            </button>
+            <button class="hero-nav-btn" onclick={cyclePrev} aria-label="Previous"><ArrowLeft size={12} weight="bold" /></button>
             <div class="hero-dots">
               {#each resolvedSlots as slot, i}
-                <button
-                  class="hero-dot"
-                  class:active={activeIdx === i}
-                  class:pinned={slot.kind === "pinned"}
-                  on:click={() => goToSlot(i)}
-                  aria-label="Slot {i + 1}"
-                ></button>
+                <button class="hero-dot" class:active={activeIdx === i} class:pinned={slot.kind === "pinned"} onclick={() => goToSlot(i)} aria-label="Slot {i + 1}"></button>
               {/each}
             </div>
-            <button class="hero-nav-btn" on:click={cycleNext} aria-label="Next">
-              <ArrowRight size={12} weight="bold" />
-            </button>
+            <button class="hero-nav-btn" onclick={cycleNext} aria-label="Next"><ArrowRight size={12} weight="bold" /></button>
             <span class="hero-counter">{activeIdx + 1}/{TOTAL_SLOTS}</span>
           </div>
         </div>
 
-        <!-- ── Col 3: Chapters panel ──────────────────────────────────────── -->
         <div class="hero-chapters">
-          <div class="hero-chapters-header">
-            <ListBullets size={11} weight="bold" />
-            <span>Up Next</span>
-          </div>
+          <div class="hero-chapters-header"><ListBullets size={11} weight="bold" /><span>Up Next</span></div>
 
           {#if activeSlot?.kind === "empty"}
             <p class="hero-chapters-empty">No chapters to show</p>
@@ -362,10 +290,7 @@
             {#each Array(4) as _}
               <div class="chapter-row-sk">
                 <div class="sk sk-num"></div>
-                <div class="sk-info">
-                  <div class="sk sk-name"></div>
-                  <div class="sk sk-meta"></div>
-                </div>
+                <div class="sk-info"><div class="sk sk-name"></div><div class="sk sk-meta"></div></div>
               </div>
             {/each}
           {:else if heroChapters.length === 0}
@@ -373,12 +298,7 @@
           {:else}
             {#each heroChapters as ch (ch.id)}
               {@const isCurrent = heroEntry?.chapterId === ch.id}
-              <button
-                class="chapter-row"
-                class:chapter-row-current={isCurrent}
-                class:chapter-row-read={ch.isRead && !isCurrent}
-                on:click={() => openChapter(ch)}
-              >
+              <button class="chapter-row" class:chapter-row-current={isCurrent} class:chapter-row-read={ch.isRead && !isCurrent} onclick={() => openChapter(ch)}>
                 <span class="ch-num">Ch.{ch.chapterNumber % 1 === 0 ? Math.floor(ch.chapterNumber) : ch.chapterNumber}</span>
                 <div class="ch-info">
                   <span class="ch-name">{ch.name}</span>
@@ -390,13 +310,11 @@
                     <span class="ch-meta">{new Date(Number(ch.uploadDate) > 1e10 ? Number(ch.uploadDate) : Number(ch.uploadDate)*1000).toLocaleDateString("en-US",{month:"short",day:"numeric"})}</span>
                   {/if}
                 </div>
-                {#if isCurrent}
-                  <Play size={10} weight="fill" class="ch-play-icon" />
-                {/if}
+                {#if isCurrent}<Play size={10} weight="fill" class="ch-play-icon" />{/if}
               </button>
             {/each}
             {#if heroManga}
-              <button class="ch-view-all" on:click={() => { if (heroManga) activeManga.set(heroManga); }}>
+              <button class="ch-view-all" onclick={() => { if (heroManga) activeManga = heroManga; }}>
                 All chapters <ArrowRight size={9} weight="bold" />
               </button>
             {/if}
@@ -406,24 +324,19 @@
       </div>
     </div>
 
-    <!-- ══ RECENT ACTIVITY ═════════════════════════════════════════════════════ -->
     {#if recentHistory.length > 0}
       <div class="section">
         <div class="section-header">
           <span class="section-title"><Clock size={10} weight="bold" /> Recent Activity</span>
-          <button class="see-all" on:click={() => navPage.set("history")}>
-            Full history <ArrowRight size={9} weight="bold" />
-          </button>
+          <button class="see-all" onclick={() => navPage = "history"}>Full history <ArrowRight size={9} weight="bold" /></button>
         </div>
         <div class="activity-list">
           {#each recentHistory as entry (entry.chapterId)}
-            <button class="activity-row" on:click={() => resumeEntry(entry)}>
+            <button class="activity-row" onclick={() => resumeEntry(entry)}>
               <img src={thumbUrl(entry.thumbnailUrl)} alt={entry.mangaTitle} class="activity-thumb" loading="lazy" decoding="async" />
               <div class="activity-info">
                 <span class="activity-title">{entry.mangaTitle}</span>
-                <span class="activity-sub">
-                  {entry.chapterName}{entry.pageNumber > 1 ? ` · p.${entry.pageNumber}` : ""}
-                </span>
+                <span class="activity-sub">{entry.chapterName}{entry.pageNumber > 1 ? ` · p.${entry.pageNumber}` : ""}</span>
               </div>
               <span class="activity-time">{timeAgo(entry.readAt)}</span>
               <span class="activity-play"><Play size={10} weight="fill" /></span>
@@ -434,27 +347,22 @@
     {:else}
       <div class="empty-state">
         <p class="empty-text">Start reading to build your activity feed</p>
-        <button class="empty-cta" on:click={() => navPage.set("library")}>
-          Open Library <ArrowRight size={11} weight="bold" />
-        </button>
+        <button class="empty-cta" onclick={() => navPage = "library"}>Open Library <ArrowRight size={11} weight="bold" /></button>
       </div>
     {/if}
 
-    <!-- ══ BOTTOM ROW ══════════════════════════════════════════════════════════ -->
     <div class="bottom-row">
-
-      <!-- Left: Completed -->
       <div class="bottom-col">
         <div class="bottom-section-hd">
           <span class="section-title"><CheckCircle size={10} weight="bold" /> Completed</span>
           {#if completedManga.length > 0}
-            <button class="see-all" on:click={() => navPage.set("library")}>View all <ArrowRight size={9} weight="bold" /></button>
+            <button class="see-all" onclick={() => navPage = "library"}>View all <ArrowRight size={9} weight="bold" /></button>
           {/if}
         </div>
         {#if completedManga.length > 0}
-          <div class="mini-row" on:wheel|preventDefault={handleRowWheel}>
+          <div class="mini-row" onwheel={(e) => { e.preventDefault(); handleRowWheel(e); }}>
             {#each completedManga as m (m.id)}
-              <button class="mini-card" on:click={() => previewManga.set(m)}>
+              <button class="mini-card" onclick={() => previewManga = m}>
                 <div class="mini-cover-wrap">
                   <img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="mini-cover" loading="lazy" decoding="async" />
                   <div class="mini-gradient"></div>
@@ -473,54 +381,17 @@
 
       <div class="bottom-divider"></div>
 
-      <!-- Right: Stats -->
       <div class="bottom-col">
         <div class="bottom-section-hd">
           <span class="section-title"><TrendUp size={10} weight="bold" /> Your Stats</span>
         </div>
         <div class="stats-grid">
-          <div class="stat-card">
-            <div class="stat-icon-wrap stat-fire"><Fire size={16} weight="fill" /></div>
-            <div class="stat-body">
-              <span class="stat-val">{stats.currentStreakDays}</span>
-              <span class="stat-label">Day streak</span>
-            </div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-icon-wrap stat-accent"><BookOpen size={16} weight="light" /></div>
-            <div class="stat-body">
-              <span class="stat-val">{stats.totalChaptersRead}</span>
-              <span class="stat-label">Chapters read</span>
-            </div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-icon-wrap stat-neutral"><Clock size={16} weight="light" /></div>
-            <div class="stat-body">
-              <span class="stat-val">{formatReadTime(stats.totalMinutesRead)}</span>
-              <span class="stat-label">Read time</span>
-            </div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-icon-wrap stat-neutral"><TrendUp size={16} weight="light" /></div>
-            <div class="stat-body">
-              <span class="stat-val">{stats.totalMangaRead}</span>
-              <span class="stat-label">Series started</span>
-            </div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-icon-wrap stat-green"><CheckCircle size={16} weight="light" /></div>
-            <div class="stat-body">
-              <span class="stat-val">{completedIds.length}</span>
-              <span class="stat-label">Completed</span>
-            </div>
-          </div>
-          <div class="stat-card">
-            <div class="stat-icon-wrap stat-neutral"><CalendarBlank size={16} weight="light" /></div>
-            <div class="stat-body">
-              <span class="stat-val">{stats.longestStreakDays}d</span>
-              <span class="stat-label">Best streak</span>
-            </div>
-          </div>
+          <div class="stat-card"><div class="stat-icon-wrap stat-fire"><Fire size={16} weight="fill" /></div><div class="stat-body"><span class="stat-val">{stats.currentStreakDays}</span><span class="stat-label">Day streak</span></div></div>
+          <div class="stat-card"><div class="stat-icon-wrap stat-accent"><BookOpen size={16} weight="light" /></div><div class="stat-body"><span class="stat-val">{stats.totalChaptersRead}</span><span class="stat-label">Chapters read</span></div></div>
+          <div class="stat-card"><div class="stat-icon-wrap stat-neutral"><Clock size={16} weight="light" /></div><div class="stat-body"><span class="stat-val">{formatReadTime(stats.totalMinutesRead)}</span><span class="stat-label">Read time</span></div></div>
+          <div class="stat-card"><div class="stat-icon-wrap stat-neutral"><TrendUp size={16} weight="light" /></div><div class="stat-body"><span class="stat-val">{stats.totalMangaRead}</span><span class="stat-label">Series started</span></div></div>
+          <div class="stat-card"><div class="stat-icon-wrap stat-green"><CheckCircle size={16} weight="light" /></div><div class="stat-body"><span class="stat-val">{completedIds.length}</span><span class="stat-label">Completed</span></div></div>
+          <div class="stat-card"><div class="stat-icon-wrap stat-neutral"><CalendarBlank size={16} weight="light" /></div><div class="stat-body"><span class="stat-val">{stats.longestStreakDays}d</span><span class="stat-label">Best streak</span></div></div>
         </div>
       </div>
     </div>
@@ -528,15 +399,12 @@
   </div>
 </div>
 
-<!-- ── Slot picker ────────────────────────────────────────────────────────────── -->
 {#if pickerOpen}
-  <!-- svelte-ignore a11y-click-events-have-key-events -->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div class="picker-backdrop" on:click|self={closePicker}>
+  <div class="picker-backdrop" onclick={(e) => { if (e.target === e.currentTarget) closePicker(); }}>
     <div class="picker-modal">
       <div class="picker-header">
         <span class="picker-title">Pin manga — slot {(pickerSlotIndex ?? 0) + 1}</span>
-        <button class="picker-close" on:click={closePicker}><XIcon size={13} weight="light" /></button>
+        <button class="picker-close" onclick={closePicker}><XIcon size={13} weight="light" /></button>
       </div>
       <div class="picker-search-wrap">
         <MagnifyingGlass size={12} weight="light" style="color:var(--text-faint);flex-shrink:0" />
@@ -549,7 +417,7 @@
           <p class="picker-empty">No results</p>
         {:else}
           {#each pickerResults as m (m.id)}
-            <button class="picker-row" on:click={() => pinManga(m)}>
+            <button class="picker-row" onclick={() => pinManga(m)}>
               <img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="picker-thumb" loading="lazy" />
               <div class="picker-info">
                 <span class="picker-manga-title">{m.title}</span>
@@ -567,228 +435,75 @@
   .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
   .body { flex: 1; overflow-y: auto; scrollbar-width: none; padding-bottom: var(--sp-8); }
   .body::-webkit-scrollbar { display: none; }
-
-  /* ══ HERO ════════════════════════════════════════════════════════════════════ */
   .hero-section { padding: var(--sp-4) var(--sp-5) 0; }
-
-  .hero-stage {
-    position: relative; display: flex; align-items: stretch;
-    height: 340px; border-radius: var(--radius-xl); overflow: hidden;
-    background: var(--bg-raised); border: 1px solid var(--border-dim);
-    box-shadow: 0 6px 28px rgba(0,0,0,0.28);
-  }
-
-  /* Backdrop */
-  .hero-backdrop {
-    position: absolute; inset: -14px;
-    background-size: cover; background-position: center 25%;
-    filter: blur(24px) saturate(1.4) brightness(0.32);
-    transform: scale(1.07); pointer-events: none; z-index: 0;
-  }
+  .hero-stage { position: relative; display: flex; align-items: stretch; height: 340px; border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border-dim); box-shadow: 0 6px 28px rgba(0,0,0,0.28); }
+  .hero-backdrop { position: absolute; inset: -14px; background-size: cover; background-position: center 25%; filter: blur(24px) saturate(1.4) brightness(0.32); transform: scale(1.07); pointer-events: none; z-index: 0; }
   .hero-bd-empty { background: var(--bg-void); filter: none; }
-  .hero-scrim {
-    position: absolute; inset: 0; z-index: 1; pointer-events: none;
-    background: linear-gradient(100deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.4) 100%);
-  }
-
-  /* ── Cover column ─────────────────────────────────────────────────────────── */
-  .hero-cover-col {
-    position: relative; z-index: 2;
-    width: clamp(150px, 30%, 195px); flex-shrink: 0;
-    display: flex; align-items: center; justify-content: center;
-    padding: var(--sp-5); background: none; border: none;
-    cursor: pointer;
-    /* Subtle inner separator */
-    border-right: 1px solid rgba(255,255,255,0.06);
-  }
+  .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.4) 100%); }
+  .hero-cover-col { position: relative; z-index: 2; width: clamp(150px, 30%, 195px); flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); background: none; border: none; cursor: pointer; border-right: 1px solid rgba(255,255,255,0.06); }
   .hero-cover-col:hover .hero-cover { filter: brightness(1.1); }
   .hero-cover-col:hover .cover-resume-hint { opacity: 1; }
   .hero-cover-col:disabled { cursor: default; }
-  .hero-cover {
-    width: 100%; aspect-ratio: 2/3; object-fit: cover;
-    border-radius: var(--radius-lg);
-    box-shadow: 0 10px 36px rgba(0,0,0,0.75), 0 2px 8px rgba(0,0,0,0.4);
-    display: block; transition: filter 0.18s ease;
-  }
-  .hero-cover-empty {
-    width: 100%; aspect-ratio: 2/3;
-    display: flex; align-items: center; justify-content: center;
-    background: var(--bg-overlay); border-radius: var(--radius-lg);
-    color: var(--text-faint);
-  }
-  /* Play hint overlay on cover hover */
-  .cover-resume-hint {
-    position: absolute; inset: 0;
-    display: flex; align-items: center; justify-content: center;
-    color: #fff; font-size: 32px;
-    background: rgba(0,0,0,0.35); border-radius: var(--radius-lg);
-    opacity: 0; transition: opacity 0.18s ease;
-    pointer-events: none;
-  }
-
-  /* ── Details column ───────────────────────────────────────────────────────── */
-  .hero-details {
-    position: relative; z-index: 2; flex: 1; min-width: 0;
-    padding: var(--sp-5) var(--sp-4) var(--sp-4);
-    display: flex; flex-direction: column; gap: var(--sp-2); overflow: hidden;
-    border-right: 1px solid rgba(255,255,255,0.06);
-  }
-
+  .hero-cover { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 10px 36px rgba(0,0,0,0.75), 0 2px 8px rgba(0,0,0,0.4); display: block; transition: filter 0.18s ease; }
+  .hero-cover-empty { width: 100%; aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center; background: var(--bg-overlay); border-radius: var(--radius-lg); color: var(--text-faint); }
+  .cover-resume-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; background: rgba(0,0,0,0.35); border-radius: var(--radius-lg); opacity: 0; transition: opacity 0.18s ease; pointer-events: none; }
+  .hero-details { position: relative; z-index: 2; flex: 1; min-width: 0; padding: var(--sp-5) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); overflow: hidden; border-right: 1px solid rgba(255,255,255,0.06); }
   .hero-tags { display: flex; flex-wrap: wrap; gap: 5px; flex-shrink: 0; }
-  .hero-tag {
-    font-family: var(--font-ui); font-size: 9px; letter-spacing: var(--tracking-wide);
-    text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-full);
-    background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.62);
-    border: 1px solid rgba(255,255,255,0.14);
-  }
+  .hero-tag { font-family: var(--font-ui); font-size: 9px; letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-full); background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.14); }
   .hero-tag-reading { background: var(--accent-muted); color: var(--accent-fg); border-color: var(--accent-dim); }
   .hero-tag-pinned  { background: rgba(168,132,232,0.18); color: #c4a8f0; border-color: rgba(168,132,232,0.28); }
-
-  .hero-title {
-    font-size: var(--text-xl); font-weight: var(--weight-medium); color: #fff;
-    line-height: var(--leading-tight); margin: 0; flex-shrink: 0;
-    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
-    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
-  }
+  .hero-title { font-size: var(--text-xl); font-weight: var(--weight-medium); color: #fff; line-height: var(--leading-tight); margin: 0; flex-shrink: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
   .hero-author { font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.48); letter-spacing: var(--tracking-wide); flex-shrink: 0; }
-  .hero-progress {
-    display: flex; align-items: center; gap: 5px; flex-shrink: 0;
-    font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.58);
-    letter-spacing: var(--tracking-wide);
-  }
+  .hero-progress { display: flex; align-items: center; gap: 5px; flex-shrink: 0; font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.58); letter-spacing: var(--tracking-wide); }
   .hero-prog-page { color: rgba(255,255,255,0.38); }
   .hero-prog-time { margin-left: auto; color: rgba(255,255,255,0.32); }
-  .hero-desc {
-    font-size: var(--text-xs); color: rgba(255,255,255,0.42); line-height: 1.55;
-    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
-    flex: 1; min-height: 0;
-  }
+  .hero-desc { font-size: var(--text-xs); color: rgba(255,255,255,0.42); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; flex: 1; min-height: 0; }
   .hero-empty-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: rgba(255,255,255,0.5); flex-shrink: 0; }
   .hero-empty-sub   { font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.28); letter-spacing: var(--tracking-wide); line-height: var(--leading-snug); }
-
   .hero-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; flex-wrap: wrap; }
-  .hero-cta {
-    display: inline-flex; align-items: center; gap: 6px;
-    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
-    padding: 7px 16px; border-radius: var(--radius-full);
-    background: var(--accent-muted); border: 1px solid var(--accent-dim); color: var(--accent-fg);
-    cursor: pointer; transition: filter var(--t-base); white-space: nowrap;
-  }
+  .hero-cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 7px 16px; border-radius: var(--radius-full); background: var(--accent-muted); border: 1px solid var(--accent-dim); color: var(--accent-fg); cursor: pointer; transition: filter var(--t-base); white-space: nowrap; }
   .hero-cta:hover:not(:disabled) { filter: brightness(1.15); }
   .hero-cta:disabled { opacity: 0.55; cursor: default; }
-  .hero-cta-ghost {
-    display: inline-flex; align-items: center; gap: 6px;
-    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
-    padding: 7px 14px; border-radius: var(--radius-full);
-    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13);
-    color: rgba(255,255,255,0.52); cursor: pointer;
-    transition: background var(--t-base), color var(--t-base); white-space: nowrap;
-  }
+  .hero-cta-ghost { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 7px 14px; border-radius: var(--radius-full); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13); color: rgba(255,255,255,0.52); cursor: pointer; transition: background var(--t-base), color var(--t-base); white-space: nowrap; }
   .hero-cta-ghost:hover { background: rgba(255,255,255,0.13); color: rgba(255,255,255,0.82); }
-
-  /* Nav row — arrows + dots in one line at bottom of details col */
-  .hero-nav-row {
-    display: flex; align-items: center; gap: var(--sp-2);
-    flex-shrink: 0; margin-top: auto; padding-top: var(--sp-2);
-    border-top: 1px solid rgba(255,255,255,0.08);
-  }
-  .hero-nav-btn {
-    display: flex; align-items: center; justify-content: center;
-    width: 22px; height: 22px; border-radius: 50%;
-    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12);
-    color: rgba(255,255,255,0.6); cursor: pointer; flex-shrink: 0;
-    transition: background var(--t-base), color var(--t-base);
-  }
+  .hero-nav-row { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid rgba(255,255,255,0.08); }
+  .hero-nav-btn { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.6); cursor: pointer; flex-shrink: 0; transition: background var(--t-base), color var(--t-base); }
   .hero-nav-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
   .hero-dots { display: flex; gap: 5px; align-items: center; }
-  .hero-dot {
-    width: 5px; height: 5px; border-radius: 50%;
-    background: rgba(255,255,255,0.22); border: none; cursor: pointer; padding: 0;
-    transition: background var(--t-base), transform var(--t-base);
-  }
+  .hero-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.22); border: none; cursor: pointer; padding: 0; transition: background var(--t-base), transform var(--t-base); }
   .hero-dot:hover { background: rgba(255,255,255,0.5); }
   .hero-dot.active { background: #fff; transform: scale(1.35); }
   .hero-dot.pinned { background: rgba(168,132,232,0.55); }
   .hero-dot.pinned.active { background: #c4a8f0; }
-  .hero-counter {
-    font-family: var(--font-ui); font-size: 10px; color: rgba(255,255,255,0.3);
-    letter-spacing: var(--tracking-wide); margin-left: auto;
-  }
-
-  /* ── Chapters panel ───────────────────────────────────────────────────────── */
-  .hero-chapters {
-    position: relative; z-index: 2;
-    width: clamp(180px, 32%, 240px); flex-shrink: 0;
-    display: flex; flex-direction: column;
-    padding: var(--sp-4) var(--sp-3);
-    gap: 1px; overflow: hidden;
-  }
-  .hero-chapters-header {
-    display: flex; align-items: center; gap: var(--sp-2);
-    font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.4);
-    letter-spacing: var(--tracking-wider); text-transform: uppercase;
-    padding-bottom: var(--sp-2); margin-bottom: var(--sp-1);
-    border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
-  }
-  .hero-chapters-empty {
-    font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.25);
-    letter-spacing: var(--tracking-wide); padding: var(--sp-3) 0;
-  }
-
-  /* Chapter rows */
-  .chapter-row {
-    display: flex; align-items: center; gap: var(--sp-2);
-    width: 100%; padding: 7px var(--sp-2); border-radius: var(--radius-sm);
-    background: none; border: none; text-align: left; cursor: pointer;
-    transition: background var(--t-fast);
-  }
+  .hero-counter { font-family: var(--font-ui); font-size: 10px; color: rgba(255,255,255,0.3); letter-spacing: var(--tracking-wide); margin-left: auto; }
+  .hero-chapters { position: relative; z-index: 2; width: clamp(180px, 32%, 240px); flex-shrink: 0; display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-3); gap: 1px; overflow: hidden; }
+  .hero-chapters-header { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.4); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding-bottom: var(--sp-2); margin-bottom: var(--sp-1); border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; }
+  .hero-chapters-empty { font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.25); letter-spacing: var(--tracking-wide); padding: var(--sp-3) 0; }
+  .chapter-row { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 7px var(--sp-2); border-radius: var(--radius-sm); background: none; border: none; text-align: left; cursor: pointer; transition: background var(--t-fast); }
   .chapter-row:hover { background: rgba(255,255,255,0.07); }
   .chapter-row-current { background: rgba(255,255,255,0.1) !important; }
-  .ch-num {
-    font-family: var(--font-ui); font-size: var(--text-2xs); color: rgba(255,255,255,0.35);
-    letter-spacing: var(--tracking-wide); flex-shrink: 0; min-width: 36px;
-  }
+  .ch-num { font-family: var(--font-ui); font-size: var(--text-2xs); color: rgba(255,255,255,0.35); letter-spacing: var(--tracking-wide); flex-shrink: 0; min-width: 36px; }
   .chapter-row-current .ch-num { color: var(--accent-fg); }
   .ch-info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-width: 0; }
-  .ch-name {
-    font-size: var(--text-xs); color: rgba(255,255,255,0.75);
-    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-  }
+  .ch-name { font-size: var(--text-xs); color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .chapter-row-read .ch-name { color: rgba(255,255,255,0.35); }
   .chapter-row-current .ch-name { color: #fff; font-weight: var(--weight-medium); }
-  .ch-meta {
-    font-family: var(--font-ui); font-size: 9px; color: rgba(255,255,255,0.28);
-    letter-spacing: var(--tracking-wide);
-  }
+  .ch-meta { font-family: var(--font-ui); font-size: 9px; color: rgba(255,255,255,0.28); letter-spacing: var(--tracking-wide); }
   .ch-read { color: rgba(255,255,255,0.2); }
   :global(.ch-play-icon) { color: var(--accent-fg); flex-shrink: 0; }
-
-  /* Skeleton rows */
   .chapter-row-sk { display: flex; gap: var(--sp-2); padding: 7px var(--sp-2); align-items: center; }
   .sk-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
   .sk { background: rgba(255,255,255,0.08); border-radius: var(--radius-sm); animation: pulse 1.4s ease infinite; }
   .sk-num { width: 32px; height: 10px; flex-shrink: 0; }
   .sk-name { height: 11px; width: 85%; }
   .sk-meta { height: 9px; width: 50%; }
-
-  /* View all link */
-  .ch-view-all {
-    display: flex; align-items: center; gap: 4px; margin-top: auto;
-    font-family: var(--font-ui); font-size: var(--text-2xs);
-    color: rgba(255,255,255,0.3); letter-spacing: var(--tracking-wide);
-    background: none; border: none; cursor: pointer; padding: var(--sp-2) var(--sp-2) 0;
-    transition: color var(--t-base);
-  }
+  .ch-view-all { display: flex; align-items: center; gap: 4px; margin-top: auto; font-family: var(--font-ui); font-size: var(--text-2xs); color: rgba(255,255,255,0.3); letter-spacing: var(--tracking-wide); background: none; border: none; cursor: pointer; padding: var(--sp-2) var(--sp-2) 0; transition: color var(--t-base); }
   .ch-view-all:hover { color: var(--accent-fg); }
-
-  /* ══ SECTIONS ════════════════════════════════════════════════════════════════ */
   .section { border-top: 1px solid var(--border-dim); margin-top: var(--sp-4); }
   .section-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-5) var(--sp-2); }
   .section-title { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
   .see-all { display: flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); background: none; border: none; cursor: pointer; padding: 0; transition: color var(--t-base); }
   .see-all:hover { color: var(--accent-fg); }
-
-  /* ── Activity ─────────────────────────────────────────────────────────────── */
   .activity-list { display: flex; flex-direction: column; padding: 0 var(--sp-3); }
   .activity-row { display: flex; align-items: center; gap: var(--sp-3); padding: 9px var(--sp-2); border-radius: var(--radius-md); border: 1px solid transparent; background: none; text-align: left; cursor: pointer; width: 100%; transition: background var(--t-fast), border-color var(--t-fast); }
   .activity-row:hover { background: var(--bg-raised); border-color: var(--border-dim); }
@@ -799,49 +514,26 @@
   .activity-sub { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .activity-time { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); flex-shrink: 0; }
   .activity-play { color: var(--accent-fg); flex-shrink: 0; opacity: 0; transition: opacity var(--t-base); }
-
-  /* ── Bottom row ───────────────────────────────────────────────────────────── */
-  .bottom-row {
-    display: grid; grid-template-columns: 1fr 1px 1fr;
-    padding: 0 var(--sp-5) 0; margin-top: var(--sp-4);
-    border-top: 1px solid var(--border-dim); align-items: start;
-  }
+  .bottom-row { display: grid; grid-template-columns: 1fr 1px 1fr; padding: 0 var(--sp-5) 0; margin-top: var(--sp-4); border-top: 1px solid var(--border-dim); align-items: start; }
   .bottom-divider { background: var(--border-dim); align-self: stretch; min-height: 100%; }
   .bottom-col { display: flex; flex-direction: column; min-width: 0; padding-top: var(--sp-3); }
   .bottom-col:first-child { padding-right: var(--sp-5); }
   .bottom-col:last-child  { padding-left:  var(--sp-5); }
   .bottom-section-hd { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--sp-2); }
   .bottom-empty { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); padding: var(--sp-2) 0; }
-
-  /* Completed cards — Discover format */
   .mini-row { display: flex; gap: var(--sp-3); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--sp-2); }
   .mini-row::-webkit-scrollbar { display: none; }
   .mini-card { flex-shrink: 0; width: 120px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
   .mini-card:hover .mini-cover { filter: brightness(1.08) saturate(1.05); transform: scale(1.02); }
   .mini-card:hover { will-change: transform; }
-  .mini-cover-wrap {
-    position: relative; aspect-ratio: 2/3; overflow: hidden;
-    border-radius: var(--radius-md); background: var(--bg-raised);
-    border: 1px solid var(--border-dim); box-shadow: 0 2px 12px rgba(0,0,0,0.35);
-  }
+  .mini-cover-wrap { position: relative; aspect-ratio: 2/3; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-raised); border: 1px solid var(--border-dim); box-shadow: 0 2px 12px rgba(0,0,0,0.35); }
   .mini-cover { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.15s ease, transform 0.15s ease; }
   .mini-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 55%, transparent 75%); pointer-events: none; }
   .mini-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--sp-2); pointer-events: none; }
-  .mini-card-title {
-    font-size: var(--text-xs); font-weight: var(--weight-medium);
-    color: rgba(255,255,255,0.92); line-height: var(--leading-snug);
-    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
-    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
-  }
+  .mini-card-title { font-size: var(--text-xs); font-weight: var(--weight-medium); color: rgba(255,255,255,0.92); line-height: var(--leading-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
   .mini-card-source { font-family: var(--font-ui); font-size: 9px; color: rgba(255,255,255,0.45); letter-spacing: var(--tracking-wide); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-
-  /* Stats grid */
   .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
-  .stat-card {
-    display: flex; align-items: center; gap: var(--sp-2);
-    background: var(--bg-raised); border: 1px solid var(--border-dim);
-    border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3);
-  }
+  .stat-card { display: flex; align-items: center; gap: var(--sp-2); background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); }
   .stat-icon-wrap { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); flex-shrink: 0; }
   .stat-fire    { background: rgba(251,146,60,0.15); color: #fb923c; }
   .stat-accent  { background: var(--accent-muted); color: var(--accent-fg); }
@@ -850,13 +542,10 @@
   .stat-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
   .stat-val { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); line-height: 1; }
   .stat-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); white-space: nowrap; }
-
-  /* ── Empty state / Picker ─────────────────────────────────────────────────── */
   .empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-7) var(--sp-6); }
   .empty-text { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
   .empty-cta { 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 16px; border-radius: var(--radius-full); background: var(--accent-muted); border: 1px solid var(--accent-dim); color: var(--accent-fg); cursor: pointer; transition: filter var(--t-base); }
   .empty-cta:hover { filter: brightness(1.1); }
-
   .picker-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: var(--z-settings); display: flex; align-items: center; justify-content: center; animation: fadeIn 0.1s ease both; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
   .picker-modal { width: min(460px, calc(100vw - 48px)); max-height: 68vh; display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-base); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.6); animation: scaleIn 0.14s ease both; }
   .picker-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
@@ -875,7 +564,6 @@
   .picker-info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-width: 0; }
   .picker-manga-title { font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .picker-source { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
-
   @keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
   @keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
   @keyframes pulse   { 0%,100% { opacity: 0.4 } 50% { opacity: 0.7 } }
diff --git a/src/components/pages/Library.svelte b/src/components/pages/Library.svelte
index c3c4c6d..2d0e30d 100644
--- a/src/components/pages/Library.svelte
+++ b/src/components/pages/Library.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
+  import { onMount } from "svelte";
   import { MagnifyingGlass, Books, DownloadSimple, Folder, FolderSimplePlus, Trash } from "phosphor-svelte";
   import { gql, thumbUrl } from "../../lib/client";
   import { GET_LIBRARY, GET_ALL_MANGA, UPDATE_MANGA, GET_CHAPTERS, DELETE_DOWNLOADED_CHAPTERS, DEQUEUE_DOWNLOAD } from "../../lib/queries";
@@ -13,29 +13,30 @@
   const CARD_MIN_W = 130;
   const CARD_GAP   = 16;
 
-  let allManga: Manga[]           = []; // inLibrary only — used for Saved tab, tags, counts
-  let allMangaUnfiltered: Manga[] = []; // every manga Suwayomi knows — used for folder tabs
-  let loading               = true;
-  let error: string | null  = null;
-  let retryCount            = 0;
-  let search                = "";
-  let renderVisible         = 0;
-  let scrollEl: HTMLDivElement;
-  let containerWidth        = 800;
-  let ctx: { x: number; y: number; manga: Manga } | null = null;
-  let emptyCtx: { x: number; y: number } | null = null;
+  let allManga:           Manga[]      = $state([]);
+  let allMangaUnfiltered: Manga[]      = $state([]);
+  let loading:            boolean      = $state(true);
+  let error:              string|null  = $state(null);
+  let retryCount:         number       = $state(0);
+  let search:             string       = $state("");
+  let renderVisible:      number       = $state(0);
+  let scrollEl:           HTMLDivElement;
+  let containerWidth:     number       = $state(800);
+  let ctx:  { x: number; y: number; manga: Manga } | null = $state(null);
+  let emptyCtx: { x: number; y: number } | null           = $state(null);
 
   let prevChapterId: number | null = null;
-  $: {
+
+  $effect(() => {
     const wasOpen = prevChapterId !== null;
-    prevChapterId = $activeChapter?.id ?? null;
-    if (wasOpen && !$activeChapter) cache.clear(CACHE_KEYS.LIBRARY);
-  }
+    prevChapterId = activeChapter?.id ?? null;
+    if (wasOpen && !activeChapter) cache.clear(CACHE_KEYS.LIBRARY);
+  });
 
   function fetchLibrary() {
     return cache.get(
       CACHE_KEYS.LIBRARY,
-      () => gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY).then((d) => d.mangas.nodes),
+      () => gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY).then(d => d.mangas.nodes),
       DEFAULT_TTL_MS,
       CACHE_GROUPS.LIBRARY,
     );
@@ -43,167 +44,105 @@
 
   function loadData() {
     fetchLibrary()
-      .then((nodes) => {
-        allManga = dedupeMangaByTitle(dedupeMangaById(nodes), $settings.mangaLinks);
-        error = null;
-      })
-      .catch((e) => error = e.message)
+      .then(nodes => { allManga = dedupeMangaByTitle(dedupeMangaById(nodes), settings.mangaLinks); error = null; })
+      .catch(e => error = e.message)
       .finally(() => loading = false);
 
     cache.get(CACHE_KEYS.ALL_MANGA, () =>
-      gql<{ mangas: { nodes: Manga[] } }>(GET_ALL_MANGA).then((d) => d.mangas.nodes),
-      DEFAULT_TTL_MS,
-      CACHE_GROUPS.LIBRARY,
-    ).then((nodes) => {
-      allMangaUnfiltered = dedupeMangaById(nodes);
-    }).catch(console.error);
+      gql<{ mangas: { nodes: Manga[] } }>(GET_ALL_MANGA).then(d => d.mangas.nodes),
+      DEFAULT_TTL_MS, CACHE_GROUPS.LIBRARY,
+    ).then(nodes => { allMangaUnfiltered = dedupeMangaById(nodes); }).catch(console.error);
   }
 
-  $: {
+  $effect(() => {
     retryCount;
     loading = true; error = null;
     if (retryCount > 0) cache.clear(CACHE_KEYS.LIBRARY);
     loadData();
-  }
+  });
 
-  $: if (scrollEl) scrollEl.scrollTo({ top: 0 });
+  $effect(() => { if (scrollEl) scrollEl.scrollTo({ top: 0 }); });
 
-  $: {
-    const f = $settings.folders.find((f) => f.id === $libraryFilter);
-    if (f && !f.showTab) libraryFilter.set("library");
-  }
+  $effect(() => {
+    const f = settings.folders.find(f => f.id === libraryFilter);
+    if (f && !f.showTab) libraryFilter = "library";
+  });
 
   const isBuiltin = (f: string) => f === "library" || f === "downloaded";
 
-  $: filtered = (() => {
-    if ($libraryFilter === "library") {
-      let items = allManga;
-      if (search.trim()) {
-        const q = search.toLowerCase();
-        items = items.filter((m) => m.title.toLowerCase().includes(q));
-      }
-      return items;
-    }
-    if ($libraryFilter === "downloaded") {
-      let items = allManga.filter((m) => (m.downloadCount ?? 0) > 0);
-      if (search.trim()) {
-        const q = search.toLowerCase();
-        items = items.filter((m) => m.title.toLowerCase().includes(q));
-      }
-      return items;
-    }
-    // Folder tab — use folderPool (library manga + non-library manga merged)
-    const folder = $settings.folders.find((f) => f.id === $libraryFilter);
-    if (folder) {
-      let items = folderPool.filter((m) => folder.mangaIds.includes(m.id));
-      if (search.trim()) {
-        const q = search.toLowerCase();
-        items = items.filter((m) => m.title.toLowerCase().includes(q));
-      }
-      return items;
-    }
-    return [];
-  })();
-
-  $: cols = Math.max(1, Math.floor((containerWidth + CARD_GAP) / (CARD_MIN_W + CARD_GAP)));
-
-  // Reset visible count whenever the filtered set changes (filter/search/tab switch)
-  $: { filtered; renderVisible = $settings.renderLimit ?? 48; }
-
-  $: visibleManga  = filtered.slice(0, renderVisible);
-  $: hasMore       = filtered.length > renderVisible;
-  $: remainingCount = filtered.length - renderVisible;
-
-  function loadMore() {
-    renderVisible += $settings.renderLimit ?? 48;
-  }
-
-  // Merged pool for folder resolution: library manga first (instant), then any
-  // non-library manga from the unfiltered fetch. This means Completed and other
-  // folders whose manga are saved to the library render immediately without
-  // waiting for the allMangaUnfiltered fetch to complete.
-  $: folderPool = (() => {
+  const folderPool = $derived((() => {
     const seen = new Set(allManga.map(m => m.id));
     return [...allManga, ...allMangaUnfiltered.filter(m => !seen.has(m.id))];
-  })();
+  })());
 
-  $: counts = {
+  const filtered = $derived((() => {
+    const q = search.trim().toLowerCase();
+    if (libraryFilter === "library") {
+      return q ? allManga.filter(m => m.title.toLowerCase().includes(q)) : allManga;
+    }
+    if (libraryFilter === "downloaded") {
+      const items = allManga.filter(m => (m.downloadCount ?? 0) > 0);
+      return q ? items.filter(m => m.title.toLowerCase().includes(q)) : items;
+    }
+    const folder = settings.folders.find(f => f.id === libraryFilter);
+    if (folder) {
+      const items = folderPool.filter(m => folder.mangaIds.includes(m.id));
+      return q ? items.filter(m => m.title.toLowerCase().includes(q)) : items;
+    }
+    return [];
+  })());
+
+  const cols           = $derived(Math.max(1, Math.floor((containerWidth + CARD_GAP) / (CARD_MIN_W + CARD_GAP))));
+  const visibleManga   = $derived(filtered.slice(0, renderVisible));
+  const hasMore        = $derived(filtered.length > renderVisible);
+  const remainingCount = $derived(filtered.length - renderVisible);
+
+  $effect(() => { filtered; renderVisible = settings.renderLimit ?? 48; });
+
+  const counts = $derived({
     library:    allManga.length,
-    downloaded: allManga.filter((m) => (m.downloadCount ?? 0) > 0).length,
-    ...$settings.folders.reduce((a, f) => ({
-      ...a,
-      [f.id]: folderPool.filter((m) => f.mangaIds.includes(m.id)).length,
-    }), {} as Record<string, number>),
-  };
+    downloaded: allManga.filter(m => (m.downloadCount ?? 0) > 0).length,
+    ...settings.folders.reduce((a, f) => ({ ...a, [f.id]: folderPool.filter(m => f.mangaIds.includes(m.id)).length }), {} as Record<string, number>),
+  });
+
+  function loadMore() { renderVisible += settings.renderLimit ?? 48; }
 
   async function removeFromLibrary(manga: Manga) {
     await gql(UPDATE_MANGA, { id: manga.id, inLibrary: false }).catch(console.error);
-    allManga = allManga.filter((m) => m.id !== manga.id);
-    cache.clearGroup(CACHE_GROUPS.LIBRARY); // clears "library" + "all_manga_unfiltered" + notifies subscribers
+    allManga = allManga.filter(m => m.id !== manga.id);
+    cache.clearGroup(CACHE_GROUPS.LIBRARY);
   }
 
   async function deleteAllDownloads(manga: Manga) {
     try {
       const data = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: manga.id });
-      const ids = data.chapters.nodes.filter((c) => c.isDownloaded).map((c) => c.id);
+      const ids = data.chapters.nodes.filter(c => c.isDownloaded).map(c => c.id);
       if (!ids.length) return;
       await gql(DELETE_DOWNLOADED_CHAPTERS, { ids });
-      await Promise.allSettled(ids.map((id) => gql(DEQUEUE_DOWNLOAD, { chapterId: id })));
-      allManga = allManga.map((m) => m.id === manga.id ? { ...m, downloadCount: 0 } : m);
+      await Promise.allSettled(ids.map(id => gql(DEQUEUE_DOWNLOAD, { chapterId: id })));
+      allManga = allManga.map(m => m.id === manga.id ? { ...m, downloadCount: 0 } : m);
     } catch (e) { console.error(e); }
   }
 
-  function openCtx(e: MouseEvent, m: Manga) {
-    e.preventDefault();
-    ctx = { x: e.clientX, y: e.clientY, manga: m };
-  }
+  function openCtx(e: MouseEvent, m: Manga) { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, manga: m }; }
 
   function buildCtxItems(m: Manga): MenuEntry[] {
     const mangaFolders = getMangaFolders(m.id);
-    const folderEntries: MenuEntry[] = $settings.folders.map((f) => {
-      const inFolder = mangaFolders.some((mf) => mf.id === f.id);
-      return {
-        label: inFolder ? `Remove from ${f.name}` : `Add to ${f.name}`,
-        icon: Folder,
-        onClick: () => inFolder ? removeMangaFromFolder(f.id, m.id) : assignMangaToFolder(f.id, m.id),
-      };
+    const folderEntries: MenuEntry[] = settings.folders.map(f => {
+      const inFolder = mangaFolders.some(mf => mf.id === f.id);
+      return { label: inFolder ? `Remove from ${f.name}` : `Add to ${f.name}`, icon: Folder, onClick: () => inFolder ? removeMangaFromFolder(f.id, m.id) : assignMangaToFolder(f.id, m.id) };
     });
     return [
-      {
-        label: m.inLibrary ? "Remove from library" : "Add to library",
-        icon: Books,
-        onClick: () => m.inLibrary
-          ? removeFromLibrary(m)
-          : gql(UPDATE_MANGA, { id: m.id, inLibrary: true })
-              .then(() => { allManga = allManga.map((x) => x.id === m.id ? { ...x, inLibrary: true } : x); cache.clear(CACHE_KEYS.LIBRARY); })
-              .catch(console.error),
-      },
-      {
-        label: "Delete all downloads",
-        icon: Trash,
-        danger: true,
-        disabled: !(m.downloadCount && m.downloadCount > 0),
-        onClick: () => deleteAllDownloads(m),
-      },
+      { label: m.inLibrary ? "Remove from library" : "Add to library", icon: Books, onClick: () => m.inLibrary ? removeFromLibrary(m) : gql(UPDATE_MANGA, { id: m.id, inLibrary: true }).then(() => { allManga = allManga.map(x => x.id === m.id ? { ...x, inLibrary: true } : x); cache.clear(CACHE_KEYS.LIBRARY); }).catch(console.error) },
+      { label: "Delete all downloads", icon: Trash, danger: true, disabled: !(m.downloadCount && m.downloadCount > 0), onClick: () => deleteAllDownloads(m) },
       ...(folderEntries.length ? [{ separator: true } as MenuEntry, ...folderEntries] : []),
       { separator: true },
-      {
-        label: "New folder",
-        icon: FolderSimplePlus,
-        onClick: () => {
-          const name = prompt("Folder name:");
-          if (name?.trim()) { const id = addFolder(name.trim()); assignMangaToFolder(id, m.id); }
-        },
-      },
+      { label: "New folder", icon: FolderSimplePlus, onClick: () => { const name = prompt("Folder name:"); if (name?.trim()) { const id = addFolder(name.trim()); assignMangaToFolder(id, m.id); } } },
     ];
   }
 
   function buildEmptyCtx(): MenuEntry[] {
-    return [{
-      label: "New folder",
-      icon: FolderSimplePlus,
-      onClick: () => { const name = prompt("Folder name:"); if (name?.trim()) addFolder(name.trim()); },
-    }];
+    return [{ label: "New folder", icon: FolderSimplePlus, onClick: () => { const name = prompt("Folder name:"); if (name?.trim()) addFolder(name.trim()); } }];
   }
 
   onMount(() => {
@@ -218,13 +157,13 @@
   class="root"
   role="presentation"
   bind:this={scrollEl}
-  on:contextmenu={(e) => {
+  oncontextmenu={(e) => {
     if ((e.target as HTMLElement).closest("button")) return;
     e.preventDefault();
     emptyCtx = { x: e.clientX, y: e.clientY };
   }}
 >
-  {#if $settings.libraryBranches ?? true}
+  {#if settings.libraryBranches ?? true}
     <svg class="branches" viewBox="0 0 400 600" preserveAspectRatio="xMaxYMid slice" aria-hidden="true">
       <g stroke="var(--accent)" stroke-width="0.6" fill="none" opacity="0.13">
         <path d="M380 600 C380 500 340 460 310 400 C280 340 300 280 270 220"/>
@@ -249,7 +188,7 @@
     <div class="center">
       <p class="error-msg">Could not reach Suwayomi</p>
       <p class="error-detail">Make sure the server is running, then retry.</p>
-      <button class="retry-btn" on:click={() => retryCount++}>Retry</button>
+      <button class="retry-btn" onclick={() => retryCount++}>Retry</button>
     </div>
   {:else}
     <div class="header">
@@ -257,15 +196,15 @@
         <span class="heading">Library</span>
         <div class="tabs">
           {#each [["library","Saved"], ["downloaded","Downloaded"]] as [f, label]}
-            <button class="tab" class:active={$libraryFilter === f} on:click={() => libraryFilter.set(f)}>
+            <button class="tab" class:active={libraryFilter === f} onclick={() => libraryFilter = f}>
               {#if f === "library"}<Books size={11} weight="bold" />
               {:else if f === "downloaded"}<DownloadSimple size={11} weight="bold" />{/if}
               {label}
               <span class="tab-count">{counts[f] ?? 0}</span>
             </button>
           {/each}
-          {#each $settings.folders.filter((f) => f.showTab) as folder}
-            <button class="tab" class:active={$libraryFilter === folder.id} on:click={() => libraryFilter.set(folder.id)}>
+          {#each settings.folders.filter(f => f.showTab) as folder}
+            <button class="tab" class:active={libraryFilter === folder.id} onclick={() => libraryFilter = folder.id}>
               <Folder size={11} weight="bold" />
               {folder.name}
               <span class="tab-count">{counts[folder.id] ?? 0}</span>
@@ -290,25 +229,16 @@
       </div>
     {:else if filtered.length === 0}
       <div class="center">
-        {$libraryFilter === "library" ? "No manga saved to library — browse sources to add some."
-          : $libraryFilter === "downloaded" ? "No downloaded manga."
+        {libraryFilter === "library" ? "No manga saved to library — browse sources to add some."
+          : libraryFilter === "downloaded" ? "No downloaded manga."
           : "No manga in this folder yet. Right-click manga anywhere to assign them."}
       </div>
     {:else}
       <div class="grid" style="--cols:{cols}">
         {#each visibleManga as m (m.id)}
-          <button
-            class="card"
-            on:click={() => activeManga.set(m)}
-            on:contextmenu={(e) => openCtx(e, m)}
-          >
+          <button class="card" onclick={() => activeManga = m} oncontextmenu={(e) => openCtx(e, m)}>
             <div class="cover-wrap">
-              <img
-                src={thumbUrl(m.thumbnailUrl)} alt={m.title}
-                class="cover"
-                style="object-fit:{$settings.libraryCropCovers ? 'cover' : 'contain'}"
-                loading="lazy" decoding="async"
-              />
+              <img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="cover" style="object-fit:{settings.libraryCropCovers ? 'cover' : 'contain'}" loading="lazy" decoding="async" />
               {#if m.downloadCount}<span class="badge-dl">{m.downloadCount}</span>{/if}
               {#if m.unreadCount}<span class="badge-unread">{m.unreadCount}</span>{/if}
             </div>
@@ -318,8 +248,8 @@
       </div>
       {#if hasMore}
         <div class="load-more-row">
-          <button class="load-more-btn" on:click={loadMore}>
-            Show {Math.min(remainingCount, $settings.renderLimit ?? 48)} more
+          <button class="load-more-btn" onclick={loadMore}>
+            Show {Math.min(remainingCount, settings.renderLimit ?? 48)} more
             <span class="load-more-count">({remainingCount} remaining)</span>
           </button>
         </div>
@@ -336,148 +266,42 @@
 {/if}
 
 <style>
-  .root {
-    position: relative;
-    padding: var(--sp-5) var(--sp-6);
-    overflow-y: auto; height: 100%;
-    animation: fadeIn 0.14s ease both;
-    will-change: scroll-position;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .branches {
-    position: absolute; top: 0; right: 0;
-    width: 400px; height: 600px;
-    pointer-events: none; z-index: 0;
-  }
-  .branches :global(.anim-branch) {
-    stroke-dasharray: 60;
-    stroke-dashoffset: 60;
-    animation: branchGrow 2.4s ease forwards;
-  }
-  @keyframes branchGrow {
-    to { stroke-dashoffset: 0; }
-  }
-
-  .header {
-    position: relative; z-index: 1;
-    display: flex; align-items: center; justify-content: space-between;
-    margin-bottom: var(--sp-4); gap: var(--sp-4); flex-wrap: wrap;
-  }
+  .root { position: relative; padding: var(--sp-5) var(--sp-6); overflow-y: auto; height: 100%; animation: fadeIn 0.14s ease both; will-change: scroll-position; -webkit-overflow-scrolling: touch; }
+  .branches { position: absolute; top: 0; right: 0; width: 400px; height: 600px; pointer-events: none; z-index: 0; }
+  .branches :global(.anim-branch) { stroke-dasharray: 60; stroke-dashoffset: 60; animation: branchGrow 2.4s ease forwards; }
+  @keyframes branchGrow { to { stroke-dashoffset: 0; } }
+  .header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); gap: var(--sp-4); flex-wrap: wrap; }
   .header-left { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
-
-  .heading {
-    font-family: var(--font-ui); font-size: var(--text-xs);
-    color: var(--text-faint); letter-spacing: var(--tracking-wider);
-    text-transform: uppercase; flex-shrink: 0;
-  }
-
-  .tabs {
-    display: flex; gap: 2px;
-    background: var(--bg-raised); border: 1px solid var(--border-dim);
-    border-radius: var(--radius-md); padding: 2px;
-  }
-  .tab {
-    display: flex; align-items: center; gap: 5px;
-    font-family: var(--font-ui); font-size: var(--text-2xs);
-    letter-spacing: var(--tracking-wide); text-transform: uppercase;
-    padding: 4px 10px; border-radius: var(--radius-sm);
-    color: var(--text-faint); white-space: nowrap;
-    transition: background var(--t-base), color var(--t-base);
-  }
+  .heading { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; flex-shrink: 0; }
+  .tabs { display: flex; gap: 2px; background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 2px; }
+  .tab { display: flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-sm); color: var(--text-faint); white-space: nowrap; transition: background var(--t-base), color var(--t-base); }
   .tab:hover { color: var(--text-muted); }
   .tab.active { background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); }
   .tab-count { font-size: var(--text-2xs); opacity: 0.6; }
-
   .search-wrap { position: relative; display: flex; align-items: center; }
   .search-wrap :global(.search-icon) { position: absolute; left: 10px; color: var(--text-faint); pointer-events: none; }
-  .search {
-    background: var(--bg-raised); border: 1px solid var(--border-dim);
-    border-radius: var(--radius-md); padding: 5px 10px 5px 28px;
-    color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none;
-    transition: border-color var(--t-base);
-  }
+  .search { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 5px 10px 5px 28px; color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none; transition: border-color var(--t-base); }
   .search::placeholder { color: var(--text-faint); }
   .search:focus { border-color: var(--border-strong); }
-
-  .grid {
-    position: relative; z-index: 1;
-    display: grid;
-    grid-template-columns: repeat(var(--cols, auto-fill), minmax(130px, 1fr));
-    gap: var(--sp-4);
-  }
-
-  .card {
-    background: none; border: none; padding: 0;
-    cursor: pointer; text-align: left;
-  }
+  .grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols, auto-fill), minmax(130px, 1fr)); gap: var(--sp-4); }
+  .card { background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
   .card:hover .cover { filter: brightness(1.07); }
   .card:hover .title { color: var(--text-primary); }
-
-  .cover-wrap {
-    position: relative; aspect-ratio: 2/3; overflow: hidden;
-    border-radius: var(--radius-md);
-    background: var(--bg-raised); border: 1px solid var(--border-dim);
-    transform: translateZ(0);
-  }
+  .cover-wrap { position: relative; aspect-ratio: 2/3; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-raised); border: 1px solid var(--border-dim); transform: translateZ(0); }
   .cover { width: 100%; height: 100%; transition: filter var(--t-base); will-change: filter; }
-
-  .badge-dl {
-    position: absolute; bottom: var(--sp-1); right: var(--sp-1);
-    min-width: 18px; height: 18px; padding: 0 3px;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 10px; font-weight: bold;
-    background: var(--accent-dim); color: var(--accent-fg);
-    border-radius: var(--radius-sm); border: 1px solid var(--accent-muted);
-  }
-  .badge-unread {
-    position: absolute; top: var(--sp-1); left: var(--sp-1);
-    min-width: 18px; height: 18px; padding: 0 4px;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 10px; font-weight: bold;
-    background: var(--bg-void); color: var(--text-primary);
-    border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
-  }
-
-  .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);
-  }
-
+  .badge-dl { position: absolute; bottom: var(--sp-1); right: var(--sp-1); min-width: 18px; height: 18px; padding: 0 3px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background: var(--accent-dim); color: var(--accent-fg); border-radius: var(--radius-sm); border: 1px solid var(--accent-muted); }
+  .badge-unread { position: absolute; top: var(--sp-1); left: var(--sp-1); min-width: 18px; height: 18px; padding: 0 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background: var(--bg-void); color: var(--text-primary); border-radius: var(--radius-sm); border: 1px solid var(--border-strong); }
+  .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-skeleton { padding: 0; }
   .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); }
-
-  .load-more-row {
-    display: flex; justify-content: center;
-    padding: var(--sp-5) 0 var(--sp-2);
-    position: relative; z-index: 1;
-  }
-  .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: 8px 20px; border-radius: var(--radius-full);
-    border: 1px solid var(--border-dim); background: var(--bg-raised); color: var(--text-muted);
-    cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
-  }
+  .load-more-row { display: flex; justify-content: center; padding: var(--sp-5) 0 var(--sp-2); position: relative; z-index: 1; }
+  .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: 8px 20px; border-radius: var(--radius-full); border: 1px solid var(--border-dim); background: var(--bg-raised); color: var(--text-muted); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
   .load-more-btn:hover { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
   .load-more-count { color: var(--text-faint); font-size: var(--text-2xs); }
-
-  .center {
-    position: relative; z-index: 1;
-    display: flex; flex-direction: column; align-items: center; justify-content: center;
-    height: 60%; color: var(--text-muted); font-size: var(--text-sm);
-    gap: var(--sp-2); text-align: center; line-height: var(--leading-base);
-  }
+  .center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 60%; color: var(--text-muted); font-size: var(--text-sm); gap: var(--sp-2); text-align: center; line-height: var(--leading-base); }
   .error-msg { color: var(--color-error); font-size: var(--text-base); }
   .error-detail { color: var(--text-faint); font-size: var(--text-sm); }
-  .retry-btn {
-    margin-top: var(--sp-3); padding: 6px 16px;
-    border-radius: var(--radius-md); border: 1px solid var(--border-dim);
-    background: var(--bg-raised); color: var(--text-muted); cursor: pointer;
-    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
-  }
+  .retry-btn { margin-top: var(--sp-3); padding: 6px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-dim); background: var(--bg-raised); color: var(--text-muted); cursor: pointer; font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
+  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
 </style>
diff --git a/src/components/pages/SeriesDetail.svelte b/src/components/pages/SeriesDetail.svelte
index ecb4aa4..04f449a 100644
--- a/src/components/pages/SeriesDetail.svelte
+++ b/src/components/pages/SeriesDetail.svelte
@@ -1,59 +1,51 @@
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
-  import {
-    ArrowLeft, BookmarkSimple, Download, CheckCircle, Circle,
-    ArrowSquareOut, CircleNotch, Play, SortAscending, SortDescending,
-    CaretDown, ArrowsClockwise, List, SquaresFour, FolderSimplePlus, Trash, DownloadSimple, X,
-  } from "phosphor-svelte";
+  import { onMount } from "svelte";
+  import { ArrowLeft, BookmarkSimple, Download, CheckCircle, Circle, ArrowSquareOut, CircleNotch, Play, SortAscending, SortDescending, CaretDown, ArrowsClockwise, List, SquaresFour, FolderSimplePlus, Trash, DownloadSimple, X } from "phosphor-svelte";
   import { gql, thumbUrl } from "../../lib/client";
-  import {
-    GET_MANGA, GET_CHAPTERS, FETCH_CHAPTERS, ENQUEUE_DOWNLOAD,
-    UPDATE_MANGA, MARK_CHAPTER_READ, MARK_CHAPTERS_READ, DELETE_DOWNLOADED_CHAPTERS,
-    ENQUEUE_CHAPTERS_DOWNLOAD,
-  } from "../../lib/queries";
+  import { GET_MANGA, GET_CHAPTERS, FETCH_CHAPTERS, ENQUEUE_DOWNLOAD, UPDATE_MANGA, MARK_CHAPTER_READ, MARK_CHAPTERS_READ, DELETE_DOWNLOADED_CHAPTERS, ENQUEUE_CHAPTERS_DOWNLOAD } from "../../lib/queries";
   import { cache, CACHE_KEYS, recordSourceAccess } from "../../lib/cache";
   import { settings, activeManga, activeChapter, genreFilter, navPage, addToast, updateSettings, addFolder, assignMangaToFolder, removeMangaFromFolder, getMangaFolders, openReader, checkAndMarkCompleted } from "../../store";
   import type { Manga, Chapter } from "../../lib/types";
   import ContextMenu, { type MenuEntry } from "../shared/ContextMenu.svelte";
   import MigrateModal from "./MigrateModal.svelte";
 
-  const CHAPTERS_PER_PAGE  = 25;
-  const MANGA_TTL_MS       = 5 * 60 * 1000;
-  const CHAPTER_TTL_MS     = 2 * 60 * 1000;
+  const CHAPTERS_PER_PAGE = 25;
+  const MANGA_TTL_MS      = 5 * 60 * 1000;
+  const CHAPTER_TTL_MS    = 2 * 60 * 1000;
 
   const mangaStore:   Map<number, { data: Manga;     fetchedAt: number }> = new Map();
   const chapterStore: Map<number, { data: Chapter[]; fetchedAt: number }> = new Map();
 
-  let manga: Manga | null         = null;
-  let chapters: Chapter[]         = [];
-  let loadingManga                = false;
-  let loadingChapters             = true;
-  let enqueueing: Set<number>     = new Set();
-  let dlOpen                      = false;
-  let detailsOpen                 = false;
-  let togglingLibrary             = false;
-  let chapterPage                 = 1;
-  let ctx: { x: number; y: number; chapter: Chapter; idx: number } | null = null;
-  let jumpOpen                    = false;
-  let jumpInput                   = "";
-  let viewMode: "list" | "grid"   = "list";
-  let deletingAll                 = false;
-  let refreshing                  = false;
-  let descExpanded                = false;
-  let genresExpanded              = false;
-  let folderPickerOpen            = false;
-  let folderCreating              = false;
-  let folderNewName               = "";
-  let rangeFrom                   = "";
-  let rangeTo                     = "";
-  let showRange                   = false;
-  let dlDropRef: HTMLDivElement;
+  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 dlOpen:         boolean          = $state(false);
+  let detailsOpen:    boolean          = $state(false);
+  let togglingLibrary: boolean         = $state(false);
+  let chapterPage:    number           = $state(1);
+  let ctx: { x: number; y: number; chapter: Chapter; idx: number } | null = $state(null);
+  let jumpOpen:       boolean          = $state(false);
+  let jumpInput:      string           = $state("");
+  let viewMode: "list" | "grid"        = $state("list");
+  let deletingAll:    boolean          = $state(false);
+  let refreshing:     boolean          = $state(false);
+  let descExpanded:   boolean          = $state(false);
+  let genresExpanded: boolean          = $state(false);
+  let folderPickerOpen: boolean        = $state(false);
+  let folderCreating: boolean          = $state(false);
+  let folderNewName:  string           = $state("");
+  let rangeFrom:      string           = $state("");
+  let rangeTo:        string           = $state("");
+  let showRange:      boolean          = $state(false);
+  let migrateOpen:    boolean          = $state(false);
+  let dlDropRef:      HTMLDivElement;
   let folderPickerRef: HTMLDivElement;
-  let migrateOpen = false;
 
-  let mangaAbort: AbortController | null   = null;
+  let mangaAbort:  AbortController | null = null;
   let chapterAbort: AbortController | null = null;
-  let loadingFor: number | null            = null;
+  let loadingFor:  number | null = null;
 
   function formatDate(ts: string | null | undefined): string {
     if (!ts) return "";
@@ -64,125 +56,100 @@
 
   function applyChapters(nodes: Chapter[]) {
     chapters = nodes;
-    // Passive completion check — runs every time the chapter list is loaded
-    // or refreshed. Covers: opening SeriesDetail, returning from reader,
-    // background refresh. Only checks if manga is already in library.
-    if ($activeManga && nodes.length > 0) {
-      checkAndMarkCompleted($activeManga.id, nodes);
-    }
+    if (activeManga && nodes.length > 0) checkAndMarkCompleted(activeManga.id, nodes);
   }
 
-  $: sortDir = $settings.chapterSortDir;
-  $: sortedChapters = sortDir === "desc" ? [...chapters].reverse() : [...chapters];
-  $: totalPages     = Math.ceil(sortedChapters.length / CHAPTERS_PER_PAGE);
-  $: pageChapters   = sortedChapters.slice((chapterPage - 1) * CHAPTERS_PER_PAGE, chapterPage * CHAPTERS_PER_PAGE);
-  $: readCount      = chapters.filter((c) => c.isRead).length;
-  $: totalCount     = chapters.length;
-  $: progressPct    = totalCount > 0 ? (readCount / totalCount) * 100 : 0;
-  $: downloadedCount = chapters.filter((c) => c.isDownloaded).length;
+  const sortDir        = $derived(settings.chapterSortDir);
+  const sortedChapters = $derived(sortDir === "desc" ? [...chapters].reverse() : [...chapters]);
+  const totalPages     = $derived(Math.ceil(sortedChapters.length / CHAPTERS_PER_PAGE));
+  const pageChapters   = $derived(sortedChapters.slice((chapterPage - 1) * CHAPTERS_PER_PAGE, chapterPage * CHAPTERS_PER_PAGE));
+  const readCount      = $derived(chapters.filter(c => c.isRead).length);
+  const totalCount     = $derived(chapters.length);
+  const progressPct    = $derived(totalCount > 0 ? (readCount / totalCount) * 100 : 0);
+  const downloadedCount = $derived(chapters.filter(c => c.isDownloaded).length);
 
-  $: continueChapter = (() => {
+  const continueChapter = $derived((() => {
     if (!chapters.length) return null;
     const asc        = [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder);
-    const anyRead    = asc.some((c) => c.isRead);
-    const inProgress = asc.find((c) => !c.isRead && (c.lastPageRead ?? 0) > 0);
+    const anyRead    = asc.some(c => c.isRead);
+    const inProgress = asc.find(c => !c.isRead && (c.lastPageRead ?? 0) > 0);
     if (inProgress) return { chapter: inProgress, type: "continue" as const };
-    const firstUnread = asc.find((c) => !c.isRead);
+    const firstUnread = asc.find(c => !c.isRead);
     if (firstUnread) return { chapter: firstUnread, type: (anyRead ? "continue" : "start") as const };
     return { chapter: asc[0], type: "reread" as const };
-  })();
+  })());
 
-  $: statusLabel = manga?.status
-    ? manga.status.charAt(0) + manga.status.slice(1).toLowerCase()
-    : null;
-
-  $: assignedFolders = $activeManga ? getMangaFolders($activeManga.id) : [];
-  $: hasFolders      = assignedFolders.length > 0;
+  const statusLabel    = $derived(manga?.status ? manga.status.charAt(0) + manga.status.slice(1).toLowerCase() : null);
+  const assignedFolders = $derived(activeManga ? getMangaFolders(activeManga.id) : []);
+  const hasFolders     = $derived(assignedFolders.length > 0);
 
   function loadManga(id: number) {
     mangaAbort?.abort();
     const ctrl = new AbortController();
     mangaAbort = ctrl;
     loadingFor = id;
-
     const cached = mangaStore.get(id);
-    const now    = Date.now();
-
     if (cached) {
-      manga        = cached.data;
-      loadingManga = false;
-      if (now - cached.fetchedAt < MANGA_TTL_MS) return;
-      gql<{ manga: Manga }>(GET_MANGA, { id }, ctrl.signal)
-        .then((d) => {
-          if (ctrl.signal.aborted || loadingFor !== id) return;
-          mangaStore.set(id, { data: d.manga, fetchedAt: Date.now() });
-          manga = d.manga;
-          if (d.manga.source?.id) recordSourceAccess(d.manga.source.id);
-        }).catch(() => {});
-      return;
-    }
-
-    loadingManga = true;
-    gql<{ manga: Manga }>(GET_MANGA, { id }, ctrl.signal)
-      .then((d) => {
+      manga = cached.data; loadingManga = false;
+      if (Date.now() - cached.fetchedAt < MANGA_TTL_MS) return;
+      gql<{ manga: Manga }>(GET_MANGA, { id }, ctrl.signal).then(d => {
         if (ctrl.signal.aborted || loadingFor !== id) return;
         mangaStore.set(id, { data: d.manga, fetchedAt: Date.now() });
         manga = d.manga;
         if (d.manga.source?.id) recordSourceAccess(d.manga.source.id);
-      }).catch(() => {})
-      .finally(() => { if (!ctrl.signal.aborted && loadingFor === id) loadingManga = false; });
+      }).catch(() => {});
+      return;
+    }
+    loadingManga = true;
+    gql<{ manga: Manga }>(GET_MANGA, { id }, ctrl.signal).then(d => {
+      if (ctrl.signal.aborted || loadingFor !== id) return;
+      mangaStore.set(id, { data: d.manga, fetchedAt: Date.now() });
+      manga = d.manga;
+      if (d.manga.source?.id) recordSourceAccess(d.manga.source.id);
+    }).catch(() => {}).finally(() => { if (!ctrl.signal.aborted && loadingFor === id) loadingManga = false; });
   }
 
   function loadChapters(id: number) {
     chapterAbort?.abort();
     const ctrl = new AbortController();
     chapterAbort = ctrl;
-
     const cached = chapterStore.get(id);
-    const now    = Date.now();
-
     if (cached) {
-      applyChapters(cached.data);
-      loadingChapters = false;
-      if (now - cached.fetchedAt < CHAPTER_TTL_MS) return;
+      applyChapters(cached.data); loadingChapters = false;
+      if (Date.now() - cached.fetchedAt < CHAPTER_TTL_MS) return;
       gql(FETCH_CHAPTERS, { mangaId: id }, ctrl.signal)
         .then(() => gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: id }, ctrl.signal))
-        .then((d) => {
+        .then(d => {
           if (ctrl.signal.aborted || loadingFor !== id) return;
           chapterStore.set(id, { data: d.chapters.nodes, fetchedAt: Date.now() });
           applyChapters(d.chapters.nodes);
         }).catch(() => {});
       return;
     }
-
-    chapters        = [];
-    loadingChapters = true;
-    gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: id }, ctrl.signal)
-      .then((d) => {
-        if (ctrl.signal.aborted || loadingFor !== id) return;
-        applyChapters(d.chapters.nodes);
-        loadingChapters = false;
-        return gql(FETCH_CHAPTERS, { mangaId: id }, ctrl.signal)
-          .then(() => gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: id }, ctrl.signal))
-          .then((fresh) => {
-            if (ctrl.signal.aborted || loadingFor !== id) return;
-            chapterStore.set(id, { data: fresh.chapters.nodes, fetchedAt: Date.now() });
-            applyChapters(fresh.chapters.nodes);
-          });
-      }).catch(() => { if (!ctrl.signal.aborted) loadingChapters = false; });
+    chapters = []; loadingChapters = true;
+    gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: id }, ctrl.signal).then(d => {
+      if (ctrl.signal.aborted || loadingFor !== id) return;
+      applyChapters(d.chapters.nodes); loadingChapters = false;
+      return gql(FETCH_CHAPTERS, { mangaId: id }, ctrl.signal)
+        .then(() => gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: id }, ctrl.signal))
+        .then(fresh => {
+          if (ctrl.signal.aborted || loadingFor !== id) return;
+          chapterStore.set(id, { data: fresh.chapters.nodes, fetchedAt: Date.now() });
+          applyChapters(fresh.chapters.nodes);
+        });
+    }).catch(() => { if (!ctrl.signal.aborted) loadingChapters = false; });
   }
 
-  $: if ($activeManga) { loadManga($activeManga.id); loadChapters($activeManga.id); }
+  $effect(() => {
+    if (activeManga) { loadManga(activeManga.id); loadChapters(activeManga.id); }
+  });
 
   let prevChapterId: number | null = null;
-  $: {
+  $effect(() => {
     const wasOpen = prevChapterId !== null;
-    prevChapterId = $activeChapter?.id ?? null;
-    if (wasOpen && !$activeChapter && $activeManga) {
-      loadChapters($activeManga.id);
-      cache.clear(CACHE_KEYS.LIBRARY);
-    }
-  }
+    prevChapterId = activeChapter?.id ?? null;
+    if (wasOpen && !activeChapter && activeManga) { loadChapters(activeManga.id); cache.clear(CACHE_KEYS.LIBRARY); }
+  });
 
   async function toggleLibrary() {
     if (!manga) return;
@@ -190,10 +157,7 @@
     const next = !manga.inLibrary;
     await gql(UPDATE_MANGA, { id: manga.id, inLibrary: next }).catch(console.error);
     manga = { ...manga, inLibrary: next };
-    if (mangaStore.has(manga.id)) {
-      const e = mangaStore.get(manga.id)!;
-      mangaStore.set(manga.id, { ...e, data: manga });
-    }
+    if (mangaStore.has(manga.id)) { const e = mangaStore.get(manga.id)!; mangaStore.set(manga.id, { ...e, data: manga }); }
     cache.clear(CACHE_KEYS.LIBRARY);
     togglingLibrary = false;
   }
@@ -210,136 +174,127 @@
     await gql(ENQUEUE_DOWNLOAD, { chapterId: ch.id }).catch(console.error);
     addToast({ kind: "download", title: "Download queued", body: ch.name });
     enqueueing.delete(ch.id); enqueueing = new Set(enqueueing);
-    if ($activeManga) reloadChapters($activeManga.id);
+    if (activeManga) reloadChapters(activeManga.id);
   }
 
   async function enqueueMultiple(chapterIds: number[]) {
     if (!chapterIds.length) return;
     await gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds }).catch(console.error);
     addToast({ kind: "download", title: "Download queued", body: `${chapterIds.length} chapter${chapterIds.length !== 1 ? "s" : ""} added` });
-    if ($activeManga) reloadChapters($activeManga.id);
+    if (activeManga) reloadChapters(activeManga.id);
   }
 
   async function markRead(chapterId: number, isRead: boolean) {
     await gql(MARK_CHAPTER_READ, { id: chapterId, isRead }).catch(console.error);
-    chapters = chapters.map((c) => c.id === chapterId ? { ...c, isRead } : c);
-    if ($activeManga) {
-      chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() });
-      checkAndMarkCompleted($activeManga.id, chapters);
-    }
+    chapters = chapters.map(c => c.id === chapterId ? { ...c, isRead } : c);
+    if (activeManga) { chapterStore.set(activeManga.id, { data: chapters, fetchedAt: Date.now() }); checkAndMarkCompleted(activeManga.id, chapters); }
   }
 
   async function markBulk(ids: number[], isRead: boolean) {
     if (!ids.length) return;
     await gql(MARK_CHAPTERS_READ, { ids, isRead }).catch(console.error);
     const idSet = new Set(ids);
-    chapters = chapters.map((c) => idSet.has(c.id) ? { ...c, isRead } : c);
-    if ($activeManga) {
-      chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() });
-      checkAndMarkCompleted($activeManga.id, chapters);
-    }
+    chapters = chapters.map(c => idSet.has(c.id) ? { ...c, isRead } : c);
+    if (activeManga) { chapterStore.set(activeManga.id, { data: chapters, fetchedAt: Date.now() }); checkAndMarkCompleted(activeManga.id, chapters); }
   }
 
-  const markAboveRead   = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter((c) => !c.isRead).map((c) => c.id), true);
-  const markBelowRead   = (i: number) => markBulk(sortedChapters.slice(i).filter((c) => !c.isRead).map((c) => c.id), true);
-  const markAboveUnread = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter((c) => c.isRead).map((c) => c.id), false);
-  const markBelowUnread = (i: number) => markBulk(sortedChapters.slice(i).filter((c) => c.isRead).map((c) => c.id), false);
+  const markAboveRead   = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter(c => !c.isRead).map(c => c.id), true);
+  const markBelowRead   = (i: number) => markBulk(sortedChapters.slice(i).filter(c => !c.isRead).map(c => c.id), true);
+  const markAboveUnread = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter(c => c.isRead).map(c => c.id), false);
+  const markBelowUnread = (i: number) => markBulk(sortedChapters.slice(i).filter(c => c.isRead).map(c => c.id), false);
 
   async function deleteDownloaded(chapterId: number) {
     await gql(DELETE_DOWNLOADED_CHAPTERS, { ids: [chapterId] }).catch(console.error);
-    chapters = chapters.map((c) => c.id === chapterId ? { ...c, isDownloaded: false } : c);
-    if ($activeManga) chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() });
+    chapters = chapters.map(c => c.id === chapterId ? { ...c, isDownloaded: false } : c);
+    if (activeManga) chapterStore.set(activeManga.id, { data: chapters, fetchedAt: Date.now() });
   }
 
   async function deleteAllDownloads() {
-    const ids = chapters.filter((c) => c.isDownloaded).map((c) => c.id);
+    const ids = chapters.filter(c => c.isDownloaded).map(c => c.id);
     if (!ids.length) return;
     deletingAll = true;
     await gql(DELETE_DOWNLOADED_CHAPTERS, { ids }).catch(console.error);
-    chapters = chapters.map((c) => ({ ...c, isDownloaded: false }));
-    if ($activeManga) chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() });
+    chapters = chapters.map(c => ({ ...c, isDownloaded: false }));
+    if (activeManga) chapterStore.set(activeManga.id, { data: chapters, fetchedAt: Date.now() });
     deletingAll = false;
   }
 
   async function refreshChapters() {
-    if (!$activeManga || refreshing) return;
+    if (!activeManga || refreshing) return;
     refreshing = true;
-    chapterStore.delete($activeManga.id);
-    gql(FETCH_CHAPTERS, { mangaId: $activeManga.id })
-      .then(() => reloadChapters($activeManga!.id))
+    chapterStore.delete(activeManga.id);
+    gql(FETCH_CHAPTERS, { mangaId: activeManga.id })
+      .then(() => reloadChapters(activeManga!.id))
       .then(() => addToast({ kind: "success", title: "Chapters refreshed" }))
-      .catch((e) => addToast({ kind: "error", title: "Refresh failed", body: e?.message }))
+      .catch(e => addToast({ kind: "error", title: "Refresh failed", body: e?.message }))
       .finally(() => refreshing = false);
   }
 
   function buildCtxItems(ch: Chapter, idx: number): MenuEntry[] {
-    const above = sortedChapters.slice(0, idx + 1);
-    const below = sortedChapters.slice(idx);
-    const last  = sortedChapters.length - 1;
+    const above = sortedChapters.slice(0, idx + 1), below = sortedChapters.slice(idx), last = sortedChapters.length - 1;
     return [
       { label: ch.isRead ? "Mark as unread" : "Mark as read", icon: ch.isRead ? Circle : CheckCircle, onClick: () => markRead(ch.id, !ch.isRead) },
       { separator: true },
-      { label: "Mark above as read",   icon: CheckCircle, onClick: () => markAboveRead(idx),   disabled: idx === 0    || above.filter((c) => !c.isRead).length === 0 },
-      { label: "Mark above as unread", icon: Circle,      onClick: () => markAboveUnread(idx), disabled: idx === 0    || above.filter((c) => c.isRead).length === 0 },
+      { label: "Mark above as read",   icon: CheckCircle, onClick: () => markAboveRead(idx),   disabled: idx === 0    || above.filter(c => !c.isRead).length === 0 },
+      { label: "Mark above as unread", icon: Circle,      onClick: () => markAboveUnread(idx), disabled: idx === 0    || above.filter(c => c.isRead).length === 0 },
       { separator: true },
-      { label: "Mark below as read",   icon: CheckCircle, onClick: () => markBelowRead(idx),   disabled: idx === last || below.filter((c) => !c.isRead).length === 0 },
-      { label: "Mark below as unread", icon: Circle,      onClick: () => markBelowUnread(idx), disabled: idx === last || below.filter((c) => c.isRead).length === 0 },
+      { label: "Mark below as read",   icon: CheckCircle, onClick: () => markBelowRead(idx),   disabled: idx === last || below.filter(c => !c.isRead).length === 0 },
+      { label: "Mark below as unread", icon: Circle,      onClick: () => markBelowUnread(idx), disabled: idx === last || below.filter(c => c.isRead).length === 0 },
       { separator: true },
       { label: ch.isDownloaded ? "Delete download" : "Download", icon: ch.isDownloaded ? Trash : Download, danger: ch.isDownloaded, onClick: () => ch.isDownloaded ? deleteDownloaded(ch.id) : gql(ENQUEUE_DOWNLOAD, { chapterId: ch.id }).catch(console.error) },
       { separator: true },
-      { label: "Download next 5 from here", icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx, idx + 5).filter((c) => !c.isDownloaded).map((c) => c.id)) },
-      { label: "Download all from here",    icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx).filter((c) => !c.isDownloaded).map((c) => c.id)) },
+      { label: "Download next 5 from here", icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx, idx + 5).filter(c => !c.isDownloaded).map(c => c.id)) },
+      { label: "Download all from here",    icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx).filter(c => !c.isDownloaded).map(c => c.id)) },
     ];
   }
 
-  function handleDlOutside(e: MouseEvent) {
-    if (dlDropRef && !dlDropRef.contains(e.target as Node)) dlOpen = false;
-  }
-  function handleFolderOutside(e: MouseEvent) {
-    if (folderPickerRef && !folderPickerRef.contains(e.target as Node)) { folderPickerOpen = false; folderCreating = false; folderNewName = ""; }
-  }
+  function handleDlOutside(e: MouseEvent) { if (dlDropRef && !dlDropRef.contains(e.target as Node)) dlOpen = false; }
+  function handleFolderOutside(e: MouseEvent) { if (folderPickerRef && !folderPickerRef.contains(e.target as Node)) { folderPickerOpen = false; folderCreating = false; folderNewName = ""; } }
 
-  $: if (dlOpen)          { setTimeout(() => document.addEventListener("mousedown", handleDlOutside, true), 0); }
-  else                    { document.removeEventListener("mousedown", handleDlOutside, true); }
-  $: if (folderPickerOpen){ setTimeout(() => document.addEventListener("mousedown", handleFolderOutside, true), 0); }
-  else                    { document.removeEventListener("mousedown", handleFolderOutside, true); }
+  $effect(() => {
+    if (dlOpen) { setTimeout(() => document.addEventListener("mousedown", handleDlOutside, true), 0); }
+    else document.removeEventListener("mousedown", handleDlOutside, true);
+  });
+  $effect(() => {
+    if (folderPickerOpen) { setTimeout(() => document.addEventListener("mousedown", handleFolderOutside, true), 0); }
+    else document.removeEventListener("mousedown", handleFolderOutside, true);
+  });
 
   function enqueueNext(n: number) {
     if (!continueChapter) return;
     const idx = sortedChapters.indexOf(continueChapter.chapter);
     if (idx < 0) return;
-    enqueueMultiple(sortedChapters.slice(idx, idx + n).filter((c) => !c.isDownloaded).map((c) => c.id));
+    enqueueMultiple(sortedChapters.slice(idx, idx + n).filter(c => !c.isDownloaded).map(c => c.id));
   }
 
   function enqueueRange() {
     const from = parseFloat(rangeFrom), to = parseFloat(rangeTo);
     if (isNaN(from) || isNaN(to)) return;
     const lo = Math.min(from, to), hi = Math.max(from, to);
-    enqueueMultiple(sortedChapters.filter((c) => c.chapterNumber >= lo && c.chapterNumber <= hi && !c.isDownloaded).map((c) => c.id));
+    enqueueMultiple(sortedChapters.filter(c => c.chapterNumber >= lo && c.chapterNumber <= hi && !c.isDownloaded).map(c => c.id));
   }
 
   function createFolder() {
     const name = folderNewName.trim();
-    if (!name || !$activeManga) return;
+    if (!name || !activeManga) return;
     const id = addFolder(name);
-    assignMangaToFolder(id, $activeManga.id);
+    assignMangaToFolder(id, activeManga.id);
     folderNewName = ""; folderCreating = false;
   }
 
-  onDestroy(() => { mangaAbort?.abort(); chapterAbort?.abort(); });
+  onMount(() => () => { mangaAbort?.abort(); chapterAbort?.abort(); });
 </script>
 
-{#if $activeManga}
-<div class="root" role="presentation" on:contextmenu|preventDefault>
+{#if activeManga}
+<div class="root" role="presentation" oncontextmenu={(e) => e.preventDefault()}>
 
-  
   <div class="sidebar">
-    <button class="back" on:click={() => activeManga.set(null)}>
+    <button class="back" onclick={() => activeManga = null}>
       <ArrowLeft size={13} weight="light" /> Back
     </button>
 
     <div class="cover-wrap">
-      <img src={thumbUrl($activeManga.thumbnailUrl)} alt={$activeManga.title} class="cover" />
+      <img src={thumbUrl(activeManga.thumbnailUrl)} alt={activeManga.title} class="cover" />
     </div>
 
     {#if loadingManga}
@@ -359,10 +314,10 @@
         {#if manga?.genre?.length}
           <div class="genres">
             {#each (genresExpanded ? manga.genre : manga.genre.slice(0, 5)) as g}
-              <button class="genre" on:click={() => { genreFilter.set(g); navPage.set("explore"); activeManga.set(null); }}>{g}</button>
+              <button class="genre" onclick={() => { genreFilter = g; navPage = "explore"; activeManga = null; }}>{g}</button>
             {/each}
             {#if manga.genre.length > 5}
-              <button class="genre-toggle" on:click={() => genresExpanded = !genresExpanded}>
+              <button class="genre-toggle" onclick={() => genresExpanded = !genresExpanded}>
                 {genresExpanded ? "less" : `+${manga.genre.length - 5}`}
               </button>
             {/if}
@@ -372,7 +327,7 @@
           <div class="desc-wrap">
             <p class="desc" class:expanded={descExpanded}>{manga.description}</p>
             {#if manga.description.length > 120}
-              <button class="desc-toggle" on:click={() => descExpanded = !descExpanded}>{descExpanded ? "Less" : "More"}</button>
+              <button class="desc-toggle" onclick={() => descExpanded = !descExpanded}>{descExpanded ? "Less" : "More"}</button>
             {/if}
           </div>
         {/if}
@@ -390,7 +345,7 @@
     {/if}
 
     <div class="actions">
-      <button class="library-btn" class:active={manga?.inLibrary} on:click={toggleLibrary} disabled={togglingLibrary || loadingManga}>
+      <button class="library-btn" class:active={manga?.inLibrary} onclick={toggleLibrary} disabled={togglingLibrary || loadingManga}>
         <BookmarkSimple size={13} weight={manga?.inLibrary ? "fill" : "light"} />
         {manga?.inLibrary ? "In Library" : "Add to Library"}
       </button>
@@ -402,7 +357,7 @@
     </div>
 
     {#if continueChapter}
-      <button class="read-btn" on:click={() => openReader(continueChapter!.chapter, sortedChapters)}>
+      <button class="read-btn" onclick={() => openReader(continueChapter!.chapter, sortedChapters)}>
         <Play size={12} weight="fill" />
         {continueChapter.type === "continue"
           ? `Continue · Ch.${continueChapter.chapter.chapterNumber}${(continueChapter.chapter.lastPageRead ?? 0) > 0 ? ` p.${continueChapter.chapter.lastPageRead}` : ""}`
@@ -414,7 +369,7 @@
 
     {#if !loadingManga && manga?.source}
       <div class="details-section">
-        <button class="details-toggle" on:click={() => detailsOpen = !detailsOpen}>
+        <button class="details-toggle" onclick={() => detailsOpen = !detailsOpen}>
           <span>Details</span>
           <CaretDown size={11} weight="light" style="transform:{detailsOpen ? 'rotate(180deg)' : 'rotate(0)'};transition:transform 0.15s ease" />
         </button>
@@ -424,11 +379,11 @@
             {#if manga.status}<div class="detail-row"><span class="detail-key">Status</span><span class="detail-val">{statusLabel}</span></div>{/if}
             {#if manga.author}<div class="detail-row"><span class="detail-key">Author</span><span class="detail-val">{manga.author}</span></div>{/if}
             {#if manga.artist && manga.artist !== manga.author}<div class="detail-row"><span class="detail-key">Artist</span><span class="detail-val">{manga.artist}</span></div>{/if}
-            <button class="migrate-btn" on:click={() => migrateOpen = true}>
+            <button class="migrate-btn" onclick={() => migrateOpen = true}>
               <ArrowsClockwise size={12} weight="light" /> Switch source
             </button>
             {#if downloadedCount > 0}
-              <button class="delete-all-btn" on:click={deleteAllDownloads} disabled={deletingAll}>
+              <button class="delete-all-btn" onclick={deleteAllDownloads} disabled={deletingAll}>
                 <Trash size={12} weight="light" /> {deletingAll ? "Deleting…" : `Delete downloads (${downloadedCount})`}
               </button>
             {/if}
@@ -438,37 +393,35 @@
     {/if}
   </div>
 
-  
   <div class="list-wrap">
     <div class="list-header">
       <div class="list-header-left">
-        <button class="sort-btn" on:click={() => { updateSettings({ chapterSortDir: sortDir === "desc" ? "asc" : "desc" }); chapterPage = 1; }}>
+        <button class="sort-btn" onclick={() => { updateSettings({ chapterSortDir: sortDir === "desc" ? "asc" : "desc" }); chapterPage = 1; }}>
           {#if sortDir === "desc"}<SortDescending size={14} weight="light" />{:else}<SortAscending size={14} weight="light" />{/if}
           {sortDir === "desc" ? "Newest first" : "Oldest first"}
         </button>
-        <button class="icon-btn" class:active={viewMode === "grid"} on:click={() => viewMode = viewMode === "list" ? "grid" : "list"}>
+        <button class="icon-btn" class:active={viewMode === "grid"} onclick={() => viewMode = viewMode === "list" ? "grid" : "list"}>
           {#if viewMode === "list"}<SquaresFour size={14} weight="light" />{:else}<List size={14} weight="light" />{/if}
         </button>
       </div>
       <div class="list-header-right">
-        <button class="icon-btn" on:click={refreshChapters} disabled={refreshing}>
+        <button class="icon-btn" onclick={refreshChapters} disabled={refreshing}>
           <ArrowsClockwise size={14} weight="light" class={refreshing ? "anim-spin" : ""} />
         </button>
 
-        
         <div class="fp-wrap" bind:this={folderPickerRef}>
-          <button class="icon-btn" class:active={hasFolders} on:click={() => folderPickerOpen = !folderPickerOpen}>
+          <button class="icon-btn" class:active={hasFolders} onclick={() => folderPickerOpen = !folderPickerOpen}>
             <FolderSimplePlus size={14} weight={hasFolders ? "fill" : "light"} />
           </button>
           {#if folderPickerOpen}
             <div class="fp-menu">
-              {#if $settings.folders.length === 0 && !folderCreating}
+              {#if settings.folders.length === 0 && !folderCreating}
                 <p class="fp-empty">No folders yet</p>
               {/if}
-              {#each $settings.folders as folder}
-                {@const isIn = $activeManga ? folder.mangaIds.includes($activeManga.id) : false}
+              {#each settings.folders as folder}
+                {@const isIn = activeManga ? folder.mangaIds.includes(activeManga.id) : false}
                 <button class="fp-item" class:fp-item-active={isIn}
-                  on:click={() => $activeManga && (isIn ? removeMangaFromFolder(folder.id, $activeManga.id) : assignMangaToFolder(folder.id, $activeManga.id))}>
+                  onclick={() => activeManga && (isIn ? removeMangaFromFolder(folder.id, activeManga.id) : assignMangaToFolder(folder.id, activeManga.id))}>
                   <span class="fp-check">{isIn ? "✓" : ""}</span>{folder.name}
                 </button>
               {/each}
@@ -476,35 +429,34 @@
               {#if folderCreating}
                 <div class="fp-create">
                   <input class="fp-input" placeholder="Folder name…" bind:value={folderNewName}
-                    on:keydown={(e) => { if (e.key === "Enter") createFolder(); if (e.key === "Escape") { folderCreating = false; folderNewName = ""; } }}
+                    onkeydown={(e) => { if (e.key === "Enter") createFolder(); if (e.key === "Escape") { folderCreating = false; folderNewName = ""; } }}
                     use:focus />
-                  <button class="fp-confirm" on:click={createFolder} disabled={!folderNewName.trim()}>Add</button>
-                  <button class="fp-cancel" on:click={() => { folderCreating = false; folderNewName = ""; }}>
+                  <button class="fp-confirm" onclick={createFolder} disabled={!folderNewName.trim()}>Add</button>
+                  <button class="fp-cancel" onclick={() => { folderCreating = false; folderNewName = ""; }}>
                     <X size={12} weight="light" />
                   </button>
                 </div>
               {:else}
-                <button class="fp-new" on:click={() => folderCreating = true}>+ New folder</button>
+                <button class="fp-new" onclick={() => folderCreating = true}>+ New folder</button>
               {/if}
             </div>
           {/if}
         </div>
 
-        
         {#if chapters.length > 1}
           <div class="jump-wrap">
             {#if !jumpOpen}
-              <button class="jump-toggle" on:click={() => { jumpOpen = true; jumpInput = ""; }}>Go to…</button>
+              <button class="jump-toggle" onclick={() => { jumpOpen = true; jumpInput = ""; }}>Go to…</button>
             {:else}
               <div class="jump-row">
                 <input class="jump-input" type="text" placeholder="Ch. #" bind:value={jumpInput}
                   use:focus
-                  on:keydown={(e) => {
+                  onkeydown={(e) => {
                     if (e.key === "Escape") { jumpOpen = false; return; }
                     if (e.key === "Enter") {
                       const num = parseFloat(jumpInput);
                       if (!isNaN(num)) {
-                        const target = sortedChapters.find((c) => c.chapterNumber === num)
+                        const target = sortedChapters.find(c => c.chapterNumber === num)
                           ?? sortedChapters.reduce((best, c) => Math.abs(c.chapterNumber - num) < Math.abs(best.chapterNumber - num) ? c : best, sortedChapters[0]);
                         if (target) openReader(target, sortedChapters);
                       }
@@ -512,16 +464,15 @@
                     }
                   }}
                 />
-                <button class="jump-cancel" on:click={() => jumpOpen = false}>✕</button>
+                <button class="jump-cancel" onclick={() => jumpOpen = false}>✕</button>
               </div>
             {/if}
           </div>
         {/if}
 
-        
         {#if chapters.length > 0}
           <div class="dl-wrap" bind:this={dlDropRef}>
-            <button class="icon-btn" on:click={() => dlOpen = !dlOpen}>
+            <button class="icon-btn" onclick={() => dlOpen = !dlOpen}>
               <Download size={13} weight="light" />
             </button>
             {#if dlOpen}
@@ -532,8 +483,8 @@
                     <p class="dl-section-label">From Ch.{continueChapter.chapter.chapterNumber}</p>
                     <div class="dl-next-row">
                       {#each [5, 10, 25] as n}
-                        {@const avail = sortedChapters.slice(contIdx, contIdx + n).filter((c) => !c.isDownloaded).length}
-                        <button class="dl-next-btn" disabled={avail === 0} on:click={() => { enqueueNext(n); dlOpen = false; }}>
+                        {@const avail = sortedChapters.slice(contIdx, contIdx + n).filter(c => !c.isDownloaded).length}
+                        <button class="dl-next-btn" disabled={avail === 0} onclick={() => { enqueueNext(n); dlOpen = false; }}>
                           <span>Next {n}</span><span class="dl-next-sub">{avail} new</span>
                         </button>
                       {/each}
@@ -542,28 +493,28 @@
                   {/if}
                 {/if}
                 {#if !showRange}
-                  <button class="dl-item" on:click={() => showRange = true}>
+                  <button class="dl-item" onclick={() => showRange = true}>
                     <span>Custom range…</span><span class="dl-item-sub">Enter chapter numbers</span>
                   </button>
                 {:else}
                   <div class="dl-range-row">
-                    <button class="dl-range-back" on:click={() => showRange = false}>‹</button>
-                    <input class="dl-range-input" placeholder="From" bind:value={rangeFrom} on:keydown={(e) => e.key === "Enter" && enqueueRange()} use:focus />
+                    <button class="dl-range-back" onclick={() => showRange = false}>‹</button>
+                    <input class="dl-range-input" placeholder="From" bind:value={rangeFrom} onkeydown={(e) => e.key === "Enter" && enqueueRange()} use:focus />
                     <span class="dl-range-sep">–</span>
-                    <input class="dl-range-input" placeholder="To" bind:value={rangeTo} on:keydown={(e) => e.key === "Enter" && enqueueRange()} />
-                    <button class="dl-range-go" disabled={!rangeFrom.trim() || !rangeTo.trim()} on:click={enqueueRange}>Go</button>
+                    <input class="dl-range-input" placeholder="To" bind:value={rangeTo} onkeydown={(e) => e.key === "Enter" && enqueueRange()} />
+                    <button class="dl-range-go" disabled={!rangeFrom.trim() || !rangeTo.trim()} onclick={enqueueRange}>Go</button>
                   </div>
                 {/if}
                 <div class="dl-divider"></div>
-                <button class="dl-item" on:click={() => { enqueueMultiple(sortedChapters.filter((c) => !c.isRead && !c.isDownloaded).map((c) => c.id)); dlOpen = false; }}>
-                  <span>Unread chapters</span><span class="dl-item-sub">{sortedChapters.filter((c) => !c.isRead && !c.isDownloaded).length} remaining</span>
+                <button class="dl-item" onclick={() => { enqueueMultiple(sortedChapters.filter(c => !c.isRead && !c.isDownloaded).map(c => c.id)); dlOpen = false; }}>
+                  <span>Unread chapters</span><span class="dl-item-sub">{sortedChapters.filter(c => !c.isRead && !c.isDownloaded).length} remaining</span>
                 </button>
-                <button class="dl-item" on:click={() => { enqueueMultiple(sortedChapters.filter((c) => !c.isDownloaded).map((c) => c.id)); dlOpen = false; }}>
-                  <span>Download all</span><span class="dl-item-sub">{sortedChapters.filter((c) => !c.isDownloaded).length} not downloaded</span>
+                <button class="dl-item" onclick={() => { enqueueMultiple(sortedChapters.filter(c => !c.isDownloaded).map(c => c.id)); dlOpen = false; }}>
+                  <span>Download all</span><span class="dl-item-sub">{sortedChapters.filter(c => !c.isDownloaded).length} not downloaded</span>
                 </button>
                 {#if downloadedCount > 0}
                   <div class="dl-divider"></div>
-                  <button class="dl-item dl-item-danger" on:click={() => { deleteAllDownloads(); dlOpen = false; }} disabled={deletingAll}>
+                  <button class="dl-item dl-item-danger" onclick={() => { deleteAllDownloads(); dlOpen = false; }} disabled={deletingAll}>
                     <span>{deletingAll ? "Deleting…" : "Delete all downloads"}</span>
                     <span class="dl-item-sub">{downloadedCount} downloaded</span>
                   </button>
@@ -575,9 +526,9 @@
 
         {#if totalPages > 1}
           <div class="pagination">
-            <button class="page-btn" on:click={() => chapterPage = Math.max(1, chapterPage - 1)} disabled={chapterPage === 1}>←</button>
+            <button class="page-btn" onclick={() => chapterPage = Math.max(1, chapterPage - 1)} disabled={chapterPage === 1}>←</button>
             <span class="page-num">{chapterPage} / {totalPages}</span>
-            <button class="page-btn" on:click={() => chapterPage = Math.min(totalPages, chapterPage + 1)} disabled={chapterPage === totalPages}>→</button>
+            <button class="page-btn" onclick={() => chapterPage = Math.min(totalPages, chapterPage + 1)} disabled={chapterPage === totalPages}>→</button>
           </div>
         {/if}
       </div>
@@ -594,8 +545,8 @@
         {#each sortedChapters as ch, i}
           {@const inProgress = !ch.isRead && (ch.lastPageRead ?? 0) > 0}
           <button class="grid-cell" class:read={ch.isRead} class:in-progress={inProgress} class:bookmarked={ch.isBookmarked}
-            on:click={() => openReader(ch, sortedChapters)}
-            on:contextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: i }; }}
+            onclick={() => openReader(ch, sortedChapters)}
+            oncontextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: i }; }}
             title={ch.name}>
             <span class="grid-cell-num">{ch.chapterNumber % 1 === 0 ? ch.chapterNumber.toFixed(0) : ch.chapterNumber}</span>
             {#if ch.isRead}<span class="grid-cell-dot"></span>{/if}
@@ -606,9 +557,9 @@
         {#each pageChapters as ch}
           {@const idxInSorted = sortedChapters.indexOf(ch)}
           <div role="button" tabindex="0" class="ch-row" class:read={ch.isRead}
-            on:click={() => openReader(ch, sortedChapters)}
-            on:keydown={(e) => e.key === "Enter" && openReader(ch, sortedChapters)}
-            on:contextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: idxInSorted }; }}>
+            onclick={() => openReader(ch, sortedChapters)}
+            onkeydown={(e) => e.key === "Enter" && openReader(ch, sortedChapters)}
+            oncontextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: idxInSorted }; }}>
             <div class="ch-left">
               <span class="ch-name">{ch.name}</span>
               <div class="ch-meta">
@@ -620,11 +571,11 @@
             <div class="ch-right">
               {#if ch.isRead}<CheckCircle size={14} weight="light" class="read-icon" />{/if}
               {#if ch.isDownloaded}
-                <button class="dl-btn" on:click|stopPropagation={() => deleteDownloaded(ch.id)}><Trash size={13} weight="light" /></button>
+                <button class="dl-btn" onclick|stopPropagation={() => deleteDownloaded(ch.id)}><Trash size={13} weight="light" /></button>
               {:else if enqueueing.has(ch.id)}
                 <CircleNotch size={14} weight="light" class="anim-spin enqueue-icon" />
               {:else}
-                <button class="dl-btn" on:click|stopPropagation={(e) => enqueue(ch, e)}><Download size={13} weight="light" /></button>
+                <button class="dl-btn" onclick|stopPropagation={(e) => enqueue(ch, e)}><Download size={13} weight="light" /></button>
               {/if}
             </div>
           </div>
@@ -634,9 +585,9 @@
 
     {#if totalPages > 1}
       <div class="pagination-bottom">
-        <button class="page-btn" on:click={() => chapterPage = Math.max(1, chapterPage - 1)} disabled={chapterPage === 1}>← Prev</button>
+        <button class="page-btn" onclick={() => chapterPage = Math.max(1, chapterPage - 1)} disabled={chapterPage === 1}>← Prev</button>
         <span class="page-num">{chapterPage} / {totalPages}</span>
-        <button class="page-btn" on:click={() => chapterPage = Math.min(totalPages, chapterPage + 1)} disabled={chapterPage === totalPages}>Next →</button>
+        <button class="page-btn" onclick={() => chapterPage = Math.min(totalPages, chapterPage + 1)} disabled={chapterPage === totalPages}>Next →</button>
       </div>
     {/if}
   </div>
@@ -651,11 +602,7 @@
     {manga}
     currentChapters={chapters}
     onClose={() => migrateOpen = false}
-    onMigrated={(newManga) => {
-      activeManga.set(newManga);
-      migrateOpen = false;
-      cache.clear(CACHE_KEYS.LIBRARY);
-    }}
+    onMigrated={(newManga) => { activeManga = newManga; migrateOpen = false; cache.clear(CACHE_KEYS.LIBRARY); }}
   />
 {/if}
 {/if}
@@ -666,14 +613,7 @@
 
 <style>
   .root { display: flex; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
-
-  /* Sidebar */
-  .sidebar {
-    width: 200px; flex-shrink: 0; padding: var(--sp-5);
-    border-right: 1px solid var(--border-dim); overflow-y: auto;
-    display: flex; flex-direction: column; gap: var(--sp-4);
-    background: var(--bg-base);
-  }
+  .sidebar { width: 200px; flex-shrink: 0; padding: var(--sp-5); border-right: 1px solid var(--border-dim); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-4); background: var(--bg-base); }
   .back { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide); text-transform: uppercase; transition: color var(--t-base); }
   .back:hover { color: var(--text-secondary); }
   .cover-wrap { width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border-dim); flex-shrink: 0; }
@@ -696,14 +636,12 @@
   .desc.expanded { -webkit-line-clamp: unset; display: block; overflow: visible; }
   .desc-toggle { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--accent-fg); letter-spacing: var(--tracking-wide); background: none; border: none; padding: 0; cursor: pointer; opacity: 0.7; transition: opacity var(--t-base); }
   .desc-toggle:hover { opacity: 1; }
-
   .progress-section { display: flex; flex-direction: column; gap: var(--sp-1); }
   .progress-header { display: flex; justify-content: space-between; align-items: center; }
   .progress-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
   .progress-pct { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--accent-fg); letter-spacing: var(--tracking-wide); }
   .progress-track { height: 3px; background: var(--border-base); border-radius: var(--radius-full); overflow: hidden; }
   .progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width 0.4s ease; }
-
   .actions { display: flex; align-items: center; gap: var(--sp-2); }
   .library-btn { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide); padding: 5px 10px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); color: var(--text-muted); background: var(--bg-raised); transition: border-color var(--t-base), color var(--t-base), background var(--t-base); flex: 1; }
   .library-btn:hover { border-color: var(--accent); color: var(--accent-fg); }
@@ -714,7 +652,6 @@
   .read-btn { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; padding: 8px var(--sp-3); border-radius: var(--radius-md); background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent-fg); font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide); cursor: pointer; transition: background var(--t-base), border-color var(--t-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .read-btn:hover { background: var(--accent-muted); border-color: var(--accent-bright); }
   .chapter-count { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
-
   .details-section { display: flex; flex-direction: column; gap: 2px; }
   .details-toggle { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); padding: 4px 0; transition: color var(--t-base); }
   .details-toggle:hover { color: var(--text-muted); }
@@ -726,8 +663,6 @@
   .delete-all-btn { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 6px var(--sp-2); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); background: none; border: 1px solid var(--border-dim); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
   .delete-all-btn:hover:not(:disabled) { color: var(--color-error); border-color: var(--color-error); background: var(--color-error-bg); }
   .delete-all-btn:disabled { opacity: 0.4; cursor: default; }
-
-  /* Chapter list */
   .list-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
   .list-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; gap: var(--sp-2); flex-wrap: wrap; }
   .list-header-left, .list-header-right { display: flex; align-items: center; gap: var(--sp-1); }
@@ -737,8 +672,6 @@
   .icon-btn:hover:not(:disabled) { color: var(--text-secondary); border-color: var(--border-strong); background: var(--bg-raised); }
   .icon-btn.active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
   .icon-btn:disabled { opacity: 0.3; cursor: default; }
-
-  /* Folder picker */
   .fp-wrap { position: relative; }
   .fp-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 180px; background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-md); padding: var(--sp-1); z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.5); animation: scaleIn 0.1s ease both; transform-origin: top right; }
   .fp-empty { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); color: var(--text-faint); }
@@ -756,8 +689,6 @@
   .fp-cancel:hover { color: var(--text-muted); border-color: var(--border-dim); }
   .fp-new { width: 100%; padding: 6px var(--sp-3); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--text-faint); background: none; border: none; cursor: pointer; text-align: left; transition: color var(--t-fast), background var(--t-fast); }
   .fp-new:hover { color: var(--text-secondary); background: var(--bg-overlay); }
-
-  /* Jump */
   .jump-wrap { position: relative; }
   .jump-toggle { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); color: var(--text-faint); background: none; cursor: pointer; transition: color var(--t-base), border-color var(--t-base); }
   .jump-toggle:hover { color: var(--text-muted); border-color: var(--border-strong); }
@@ -766,8 +697,6 @@
   .jump-input:focus { border-color: var(--border-focus); }
   .jump-cancel { font-size: 12px; color: var(--text-faint); padding: 2px 4px; border-radius: var(--radius-sm); transition: color var(--t-base); }
   .jump-cancel:hover { color: var(--text-muted); }
-
-  /* Download dropdown */
   .dl-wrap { position: relative; }
   .dl-dropdown { position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px; background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: var(--sp-1); z-index: 200; box-shadow: 0 8px 32px rgba(0,0,0,0.5); animation: scaleIn 0.1s ease both; transform-origin: top right; }
   .dl-section-label { padding: 6px var(--sp-3) 4px; font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
@@ -791,16 +720,12 @@
   .dl-range-sep { color: var(--text-faint); font-size: var(--text-xs); }
   .dl-range-go { padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--accent-dim); background: var(--accent-muted); color: var(--accent-fg); font-family: var(--font-ui); font-size: var(--text-xs); cursor: pointer; }
   .dl-range-go:disabled { opacity: 0.3; cursor: default; }
-
-  /* Pagination */
   .pagination, .pagination-bottom { display: flex; align-items: center; gap: var(--sp-2); }
   .pagination-bottom { justify-content: center; padding: var(--sp-3); border-top: 1px solid var(--border-dim); flex-shrink: 0; }
   .page-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); color: var(--text-faint); background: none; cursor: pointer; transition: color var(--t-base), border-color var(--t-base); }
   .page-btn:hover:not(:disabled) { color: var(--text-muted); border-color: var(--border-strong); }
   .page-btn:disabled { opacity: 0.3; cursor: default; }
   .page-num { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
-
-  /* Chapter list/grid */
   .ch-list { flex: 1; overflow-y: auto; }
   .ch-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; padding: var(--sp-3); align-content: start; }
   .ch-row { display: flex; align-items: center; padding: 10px var(--sp-4); border-bottom: 1px solid var(--border-dim); cursor: pointer; transition: background var(--t-fast); gap: var(--sp-3); }
@@ -825,4 +750,6 @@
   .grid-cell-dot { position: absolute; bottom: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); }
   .grid-cell-spinner { position: absolute; top: 2px; right: 2px; }
   .grid-cell-skeleton { aspect-ratio: 1; border-radius: var(--radius-sm); }
+  @keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
+  @keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
 </style>
diff --git a/src/components/reader/Reader.svelte b/src/components/reader/Reader.svelte
index f81a4db..d98e4db 100644
--- a/src/components/reader/Reader.svelte
+++ b/src/components/reader/Reader.svelte
@@ -1,17 +1,12 @@
 <script lang="ts">
-  import { onMount, onDestroy, tick } from "svelte";
-  import {
-    X, CaretLeft, CaretRight, ArrowLeft, ArrowRight,
-    Square, Rows, Download, ArrowsLeftRight,
-    ArrowsIn, ArrowsOut, ArrowsVertical, CircleNotch,
-  } from "phosphor-svelte";
+  import { onMount, tick } from "svelte";
+  import { X, CaretLeft, CaretRight, ArrowLeft, ArrowRight, Square, Rows, Download, ArrowsLeftRight, ArrowsIn, ArrowsOut, ArrowsVertical, CircleNotch } from "phosphor-svelte";
   import { gql, thumbUrl } from "../../lib/client";
   import { FETCH_CHAPTER_PAGES, MARK_CHAPTER_READ, ENQUEUE_DOWNLOAD, ENQUEUE_CHAPTERS_DOWNLOAD } from "../../lib/queries";
   import { settings, activeManga, activeChapter, activeChapterList, pageUrls, pageNumber, closeReader, openReader, settingsOpen, addHistory, updateSettings, checkAndMarkCompleted } from "../../store";
   import { matchesKeybind, toggleFullscreen, DEFAULT_KEYBINDS } from "../../lib/keybinds";
   import type { FitMode } from "../../store";
 
-  
   const pageCache  = new Map<number, string[]>();
   const inflight   = new Map<number, Promise<string[]>>();
   const cacheOrder: number[] = [];
@@ -25,7 +20,7 @@
 
   function cacheEvict(keep: Set<number>) {
     while (pageCache.size > MAX_CACHED) {
-      const victim = cacheOrder.find((id) => !keep.has(id));
+      const victim = cacheOrder.find(id => !keep.has(id));
       if (!victim) break;
       cacheOrder.splice(cacheOrder.indexOf(victim), 1);
       pageCache.delete(victim);
@@ -38,10 +33,8 @@
     if (signal?.aborted) return Promise.reject(new DOMException("Aborted", "AbortError"));
     if (!inflight.has(chapterId)) {
       const p = gql<{ fetchChapterPages: { pages: string[] } }>(FETCH_CHAPTER_PAGES, { chapterId })
-        .then((d) => {
-          const urls = d.fetchChapterPages.pages.map(thumbUrl);
-          pageCache.set(chapterId, urls); cacheTouch(chapterId); return urls;
-        }).finally(() => inflight.delete(chapterId));
+        .then(d => { const urls = d.fetchChapterPages.pages.map(thumbUrl); pageCache.set(chapterId, urls); cacheTouch(chapterId); return urls; })
+        .finally(() => inflight.delete(chapterId));
       inflight.set(chapterId, p);
     }
     const base = inflight.get(chapterId)!;
@@ -52,13 +45,11 @@
     });
   }
 
-  
   const aspectCache = new Map<string, number>();
-
   function preloadImage(url: string) { new Image().src = url; }
 
   function decodeImage(url: string): Promise<void> {
-    return new Promise((resolve) => {
+    return new Promise(resolve => {
       const img = new Image();
       img.onload  = () => { img.decode ? img.decode().then(resolve, resolve) : resolve(); };
       img.onerror = () => resolve();
@@ -68,7 +59,7 @@
 
   function measureAspect(url: string): Promise<number> {
     if (aspectCache.has(url)) return Promise.resolve(aspectCache.get(url)!);
-    return new Promise((res) => {
+    return new Promise(res => {
       const img = new Image();
       img.onload  = () => { const r = img.naturalHeight > 0 ? img.naturalWidth / img.naturalHeight : 0.67; aspectCache.set(url, r); res(r); };
       img.onerror = () => res(0.67);
@@ -76,86 +67,84 @@
     });
   }
 
-  
   interface StripChapter { chapterId: number; chapterName: string; urls: string[]; startGlobalIdx: number; }
 
   let containerEl: HTMLDivElement;
-  let sentinelEl: HTMLDivElement;
-  let hideTimer: ReturnType<typeof setTimeout> | null = null;
-
-  let loading         = true;
-  let error: string | null = null;
-  let dlOpen          = false;
-  let zoomOpen        = false;
-  let uiVisible       = true;
-  let pageReady       = false;
-  let pageGroups: number[][] = [];
-  let stripChapters: StripChapter[] = [];
-  let visibleChapterId: number | null = null;
-  let nextN           = 5;
-  let dlBusy          = false;
+  let sentinelEl:  HTMLDivElement;
+  let hideTimer:   ReturnType<typeof setTimeout> | null = null;
 
+  let loading:          boolean          = $state(true);
+  let error:            string | null    = $state(null);
+  let dlOpen:           boolean          = $state(false);
+  let zoomOpen:         boolean          = $state(false);
+  let uiVisible:        boolean          = $state(true);
+  let pageReady:        boolean          = $state(false);
+  let pageGroups:       number[][]       = $state([]);
+  let stripChapters:    StripChapter[]   = $state([]);
+  let visibleChapterId: number | null    = $state(null);
+  let nextN:            number           = $state(5);
+  let dlBusy:           boolean          = $state(false);
   let markedRead   = new Set<number>();
   let appended     = new Set<number>();
   let appending    = false;
-  let abortCtrl: AbortController | null = null;
-  let loadingId: number | null = null;
+  let abortCtrl:   AbortController | null = null;
+  let loadingId:   number | null = null;
   let scrollAnchor: { scrollTop: number; scrollHeight: number } | null = null;
 
-  $: rtl         = $settings.readingDirection === "rtl";
-  $: fit         = ($settings.fitMode ?? "width") as FitMode;
-  $: style       = $settings.pageStyle ?? "single";
-  $: maxW        = $settings.maxPageWidth ?? 900;
-  $: autoNext    = $settings.autoNextChapter ?? false;
-  $: markOnNext  = $settings.markReadOnNext ?? true;
-  $: lastPage    = $pageUrls.length;
+  const rtl      = $derived(settings.readingDirection === "rtl");
+  const fit      = $derived((settings.fitMode ?? "width") as FitMode);
+  const style    = $derived(settings.pageStyle ?? "single");
+  const maxW     = $derived(settings.maxPageWidth ?? 900);
+  const autoNext = $derived(settings.autoNextChapter ?? false);
+  const markOnNext = $derived(settings.markReadOnNext ?? true);
+  const lastPage = $derived(pageUrls.length);
 
-  $: displayChapter = (style === "longstrip" && autoNext && visibleChapterId)
-    ? ($activeChapterList.find((c) => c.id === visibleChapterId) ?? $activeChapter)
-    : $activeChapter;
+  const displayChapter = $derived((style === "longstrip" && autoNext && visibleChapterId)
+    ? (activeChapterList.find(c => c.id === visibleChapterId) ?? activeChapter)
+    : activeChapter);
 
-  $: adjacent = (() => {
-    const ref = displayChapter ?? $activeChapter;
-    if (!ref || !$activeChapterList.length) return { prev: null, next: null, remaining: [] };
-    const idx = $activeChapterList.findIndex((c) => c.id === ref.id);
+  const adjacent = $derived((() => {
+    const ref = displayChapter ?? activeChapter;
+    if (!ref || !activeChapterList.length) return { prev: null, next: null, remaining: [] };
+    const idx = activeChapterList.findIndex(c => c.id === ref.id);
     return {
-      prev:      idx > 0                                ? $activeChapterList[idx - 1] : null,
-      next:      idx < $activeChapterList.length - 1   ? $activeChapterList[idx + 1] : null,
-      remaining: $activeChapterList.slice(idx + 1),
+      prev:      idx > 0                               ? activeChapterList[idx - 1] : null,
+      next:      idx < activeChapterList.length - 1   ? activeChapterList[idx + 1] : null,
+      remaining: activeChapterList.slice(idx + 1),
     };
-  })();
+  })());
 
-  $: visibleChunkLastPage = (() => {
+  const visibleChunkLastPage = $derived((() => {
     if (style !== "longstrip" || !autoNext) return lastPage;
-    const chId  = visibleChapterId ?? $activeChapter?.id;
-    const chunk = stripChapters.find((c) => c.chapterId === chId);
+    const chId  = visibleChapterId ?? activeChapter?.id;
+    const chunk = stripChapters.find(c => c.chapterId === chId);
     return chunk?.urls.length ?? lastPage;
-  })();
+  })());
 
-  $: imgCls = [
+  const imgCls = $derived([
     "img",
     fit === "width"    && "fit-width",
     fit === "height"   && "fit-height",
     fit === "screen"   && "fit-screen",
     fit === "original" && "fit-original",
-    $settings.optimizeContrast && "optimize-contrast",
-  ].filter(Boolean).join(" ");
+    settings.optimizeContrast && "optimize-contrast",
+  ].filter(Boolean).join(" "));
 
-  $: fitLabel = { width: "Fit W", height: "Fit H", screen: "Fit Screen", original: "1:1" }[fit];
-  $: styleLabel = style;
+  const fitLabel   = $derived({ width: "Fit W", height: "Fit H", screen: "Fit Screen", original: "1:1" }[fit]);
+  const styleLabel = $derived(style);
 
   function maybeMarkCurrentRead() {
-    const ch = $activeChapter;
+    const ch = activeChapter;
     if (!ch || !markOnNext || markedRead.has(ch.id)) return;
     markedRead.add(ch.id);
     gql(MARK_CHAPTER_READ, { id: ch.id, isRead: true })
       .then(() => {
-        if ($activeManga) {
-          const updated = $activeChapterList.map(c => c.id === ch.id ? { ...c, isRead: true } : c);
-          checkAndMarkCompleted($activeManga.id, updated);
+        if (activeManga) {
+          const updated = activeChapterList.map(c => c.id === ch.id ? { ...c, isRead: true } : c);
+          checkAndMarkCompleted(activeManga.id, updated);
         }
       })
-      .catch((e) => { markedRead.delete(ch.id); console.error(e); });
+      .catch(e => { markedRead.delete(ch.id); console.error(e); });
   }
 
   function showUi() {
@@ -164,10 +153,7 @@
     hideTimer = setTimeout(() => uiVisible = false, 3000);
   }
 
-  
-  $: if ($activeChapter) {
-    loadChapter($activeChapter.id);
-  }
+  $effect(() => { if (activeChapter) loadChapter(activeChapter.id); });
 
   async function loadChapter(id: number) {
     abortCtrl?.abort();
@@ -182,18 +168,17 @@
     error      = null;
     pageGroups = [];
     pageReady  = false;
-    stripChapters     = [];
-    visibleChapterId  = null;
-    pageUrls.set([]);
-    pageNumber.set(1);
-
+    stripChapters    = [];
+    visibleChapterId = null;
+    pageUrls  = [];
+    pageNumber = 1;
     try {
       const urls = await fetchPages(id, ctrl.signal);
       if (ctrl.signal.aborted) return;
-      pageUrls.set(urls);
+      pageUrls  = urls;
       pageReady = true;
       if (style === "longstrip" && autoNext) {
-        stripChapters    = [{ chapterId: id, chapterName: $activeChapter?.name ?? "", urls, startGlobalIdx: 0 }];
+        stripChapters    = [{ chapterId: id, chapterName: activeChapter?.name ?? "", urls, startGlobalIdx: 0 }];
         visibleChapterId = id;
       }
       loading = false;
@@ -204,27 +189,22 @@
     }
   }
 
-  
   function appendNextChapter() {
     if (appending) return;
     const lastChunk = stripChapters[stripChapters.length - 1];
     if (!lastChunk) return;
-    const list    = $activeChapterList;
-    const lastIdx = list.findIndex((c) => c.id === lastChunk.chapterId);
+    const list    = activeChapterList;
+    const lastIdx = list.findIndex(c => c.id === lastChunk.chapterId);
     if (lastIdx < 0 || lastIdx >= list.length - 1) return;
     const next = list[lastIdx + 1];
     if (!next || appended.has(next.id)) return;
     appended.add(next.id);
     appending = true;
     fetchPages(next.id)
-      .then((urls) => {
-        urls.forEach((url) => measureAspect(url).catch(() => {}));
-        urls.slice(0, 6).forEach(preloadImage);
-        return urls;
-      })
-      .then((urls) => {
-        if (stripChapters.some((c) => c.chapterId === next.id)) return;
-        const last = stripChapters[stripChapters.length - 1];
+      .then(urls => { urls.forEach(url => measureAspect(url).catch(() => {})); urls.slice(0, 6).forEach(preloadImage); return urls; })
+      .then(urls => {
+        if (stripChapters.some(c => c.chapterId === next.id)) return;
+        const last  = stripChapters[stripChapters.length - 1];
         const start = last ? last.startGlobalIdx + last.urls.length : 0;
         const MAX_STRIP = 8;
         if (stripChapters.length >= MAX_STRIP && containerEl) {
@@ -244,7 +224,6 @@
       .catch(() => { appending = false; });
   }
 
-  
   function setupScrollTracking() {
     if (!containerEl || style !== "longstrip") return;
     const READ_LINE_PCT = 0.20;
@@ -260,36 +239,26 @@
         else break;
       }
       if (activeLocalPage === null && imgs.length > 0) { activeLocalPage = Number(imgs[0].dataset.localPage); activeChId = Number(imgs[0].dataset.chapter); }
-      if (activeLocalPage !== null) pageNumber.set(activeLocalPage);
+      if (activeLocalPage !== null) pageNumber = activeLocalPage;
       if (activeChId && activeChId !== visibleChapterId) visibleChapterId = activeChId;
-      if ($settings.autoMarkRead && activeLocalPage !== null && activeChId) {
-        const chunk = stripChapters.find((c) => c.chapterId === activeChId);
-        const total = chunk ? chunk.urls.length : $pageUrls.length;
+      if (settings.autoMarkRead && activeLocalPage !== null && activeChId) {
+        const chunk = stripChapters.find(c => c.chapterId === activeChId);
+        const total = chunk ? chunk.urls.length : pageUrls.length;
         if (total > 0 && activeLocalPage >= total - 1 && !markedRead.has(activeChId)) {
           markedRead.add(activeChId);
           const chIdSnap = activeChId;
           gql(MARK_CHAPTER_READ, { id: chIdSnap, isRead: true })
-            .then(() => {
-              if ($activeManga) {
-                const updated = $activeChapterList.map(c => c.id === chIdSnap ? { ...c, isRead: true } : c);
-                checkAndMarkCompleted($activeManga.id, updated);
-              }
-            })
-            .catch((e) => { markedRead.delete(chIdSnap); console.error(e); });
+            .then(() => { if (activeManga) { const updated = activeChapterList.map(c => c.id === chIdSnap ? { ...c, isRead: true } : c); checkAndMarkCompleted(activeManga.id, updated); } })
+            .catch(e => { markedRead.delete(chIdSnap); console.error(e); });
         }
       }
       if (containerEl.scrollTop + containerEl.clientHeight < containerEl.scrollHeight - 40) return;
       const last = stripChapters[stripChapters.length - 1];
-      if (last && $settings.autoMarkRead && !markedRead.has(last.chapterId)) {
+      if (last && settings.autoMarkRead && !markedRead.has(last.chapterId)) {
         markedRead.add(last.chapterId);
         const lastIdSnap = last.chapterId;
         gql(MARK_CHAPTER_READ, { id: lastIdSnap, isRead: true })
-          .then(() => {
-            if ($activeManga) {
-              const updated = $activeChapterList.map(c => c.id === lastIdSnap ? { ...c, isRead: true } : c);
-              checkAndMarkCompleted($activeManga.id, updated);
-            }
-          })
+          .then(() => { if (activeManga) { const updated = activeChapterList.map(c => c.id === lastIdSnap ? { ...c, isRead: true } : c); checkAndMarkCompleted(activeManga.id, updated); } })
           .catch(console.error);
       }
     }
@@ -300,47 +269,43 @@
     containerEl.addEventListener("scroll", onScroll, { passive: true });
     if (autoNext) containerEl.addEventListener("scroll", onScroll80, { passive: true });
     onScroll();
-    return () => {
-      containerEl.removeEventListener("scroll", onScroll);
-      containerEl.removeEventListener("scroll", onScroll80);
-    };
+    return () => { containerEl.removeEventListener("scroll", onScroll); containerEl.removeEventListener("scroll", onScroll80); };
   }
 
-  
   function advanceGroup(forward: boolean) {
     if (!pageGroups.length) return;
-    const gi = pageGroups.findIndex((g) => g.includes($pageNumber));
+    const gi = pageGroups.findIndex(g => g.includes(pageNumber));
     if (forward) {
-      if (gi < pageGroups.length - 1) pageNumber.set(pageGroups[gi + 1][0]);
-      else if (adjacent.next) { pageNumber.set(1); openReader(adjacent.next, $activeChapterList); }
+      if (gi < pageGroups.length - 1) pageNumber = pageGroups[gi + 1][0];
+      else if (adjacent.next) { pageNumber = 1; openReader(adjacent.next, activeChapterList); }
       else closeReader();
     } else {
-      if (gi > 0) pageNumber.set(pageGroups[gi - 1][0]);
-      else if (adjacent.prev) openReader(adjacent.prev, $activeChapterList);
+      if (gi > 0) pageNumber = pageGroups[gi - 1][0];
+      else if (adjacent.prev) openReader(adjacent.prev, activeChapterList);
     }
   }
 
   function goForward() {
     if (loading) return;
-    if (style === "longstrip") { if (adjacent.next) { maybeMarkCurrentRead(); openReader(adjacent.next, $activeChapterList); } return; }
+    if (style === "longstrip") { if (adjacent.next) { maybeMarkCurrentRead(); openReader(adjacent.next, activeChapterList); } return; }
     if (style === "double" && pageGroups.length) { advanceGroup(true); return; }
-    if (!$pageUrls.length) return;
-    if ($pageNumber < lastPage) { decodeImage($pageUrls[$pageNumber]).then(() => pageNumber.set($pageNumber + 1)); }
-    else if (adjacent.next) { maybeMarkCurrentRead(); pageNumber.set(1); openReader(adjacent.next, $activeChapterList); }
+    if (!pageUrls.length) return;
+    if (pageNumber < lastPage) { decodeImage(pageUrls[pageNumber]).then(() => pageNumber++); }
+    else if (adjacent.next) { maybeMarkCurrentRead(); pageNumber = 1; openReader(adjacent.next, activeChapterList); }
     else closeReader();
   }
 
   function goBack() {
     if (loading) return;
-    if (style === "longstrip") { if (adjacent.prev) openReader(adjacent.prev, $activeChapterList); return; }
+    if (style === "longstrip") { if (adjacent.prev) openReader(adjacent.prev, activeChapterList); return; }
     if (style === "double" && pageGroups.length) { advanceGroup(false); return; }
-    if (!$pageUrls.length) return;
-    if ($pageNumber > 1) { decodeImage($pageUrls[$pageNumber - 2]).then(() => pageNumber.set($pageNumber - 1)); }
-    else if (adjacent.prev) openReader(adjacent.prev, $activeChapterList);
+    if (!pageUrls.length) return;
+    if (pageNumber > 1) { decodeImage(pageUrls[pageNumber - 2]).then(() => pageNumber--); }
+    else if (adjacent.prev) openReader(adjacent.prev, activeChapterList);
   }
 
-  $: goNext = rtl ? goBack  : goForward;
-  $: goPrev = rtl ? goForward : goBack;
+  const goNext = $derived(rtl ? goBack  : goForward);
+  const goPrev = $derived(rtl ? goForward : goBack);
 
   function cycleStyle() {
     const opts = ["single", "longstrip"] as const;
@@ -353,103 +318,95 @@
     updateSettings({ fitMode: opts[(opts.indexOf(fit) + 1) % opts.length] });
   }
 
-  
-  $: if ($activeChapter && lastPage && $activeManga) {
-    addHistory({
-      mangaId: $activeManga.id, mangaTitle: $activeManga.title,
-      thumbnailUrl: $activeManga.thumbnailUrl, chapterId: $activeChapter.id,
-      chapterName: $activeChapter.name, pageNumber: $pageNumber, readAt: Date.now(),
-    });
-    if (style !== "longstrip" && $settings.autoMarkRead && $pageNumber === lastPage) {
-      if (!markedRead.has($activeChapter.id)) {
-        markedRead.add($activeChapter.id);
-        const chIdSnap = $activeChapter.id;
-        gql(MARK_CHAPTER_READ, { id: chIdSnap, isRead: true })
-          .then(() => {
-            if ($activeManga) {
-              const updated = $activeChapterList.map(c => c.id === chIdSnap ? { ...c, isRead: true } : c);
-              checkAndMarkCompleted($activeManga.id, updated);
-            }
-          })
-          .catch(console.error);
+  $effect(() => {
+    if (activeChapter && lastPage && activeManga) {
+      addHistory({ mangaId: activeManga.id, mangaTitle: activeManga.title, thumbnailUrl: activeManga.thumbnailUrl, chapterId: activeChapter.id, chapterName: activeChapter.name, pageNumber, readAt: Date.now() });
+      if (style !== "longstrip" && settings.autoMarkRead && pageNumber === lastPage) {
+        if (!markedRead.has(activeChapter.id)) {
+          markedRead.add(activeChapter.id);
+          const chIdSnap = activeChapter.id;
+          gql(MARK_CHAPTER_READ, { id: chIdSnap, isRead: true })
+            .then(() => { if (activeManga) { const updated = activeChapterList.map(c => c.id === chIdSnap ? { ...c, isRead: true } : c); checkAndMarkCompleted(activeManga.id, updated); } })
+            .catch(console.error);
+        }
       }
     }
-  }
+  });
 
-  
-  $: if (style === "double" && $pageUrls.length) {
-    let cancelled = false;
-    const snap = $pageUrls;
-    Promise.all(snap.map(measureAspect)).then((aspects) => {
-      if (cancelled || snap !== $pageUrls) return;
-      const offset = $settings.offsetDoubleSpreads;
-      const groups: number[][] = [[1]];
-      if (offset) groups.push([2]);
-      let i = offset ? 3 : 2;
-      while (i <= snap.length) {
-        const a = aspects[i - 1], nextA = aspects[i] ?? 0;
-        if (a > 1.2 || i === snap.length || nextA > 1.2) { groups.push([i++]); }
-        else { groups.push(rtl ? [i + 1, i] : [i, i + 1]); i += 2; }
-      }
-      pageGroups = groups;
-    });
-  } else { pageGroups = []; }
+  $effect(() => {
+    if (style === "double" && pageUrls.length) {
+      let cancelled = false;
+      const snap = pageUrls;
+      Promise.all(snap.map(measureAspect)).then(aspects => {
+        if (cancelled || snap !== pageUrls) return;
+        const offset = settings.offsetDoubleSpreads;
+        const groups: number[][] = [[1]];
+        if (offset) groups.push([2]);
+        let i = offset ? 3 : 2;
+        while (i <= snap.length) {
+          const a = aspects[i - 1], nextA = aspects[i] ?? 0;
+          if (a > 1.2 || i === snap.length || nextA > 1.2) { groups.push([i++]); }
+          else { groups.push(rtl ? [i + 1, i] : [i, i + 1]); i += 2; }
+        }
+        pageGroups = groups;
+      });
+      return () => { cancelled = true; };
+    } else { pageGroups = []; }
+  });
 
-  
-  $: {
-    const ahead = $settings.preloadPages ?? 3;
-    for (let i = 1; i <= ahead; i++) { const url = $pageUrls[$pageNumber - 1 + i]; if (url) decodeImage(url); }
-    const behind = $pageUrls[$pageNumber - 2];
+  $effect(() => {
+    const ahead = settings.preloadPages ?? 3;
+    for (let i = 1; i <= ahead; i++) { const url = pageUrls[pageNumber - 1 + i]; if (url) decodeImage(url); }
+    const behind = pageUrls[pageNumber - 2];
     if (behind) preloadImage(behind);
-  }
+  });
 
-  
-  $: if ($activeChapter && $activeChapterList.length) {
-    const idx = $activeChapterList.findIndex((c) => c.id === $activeChapter!.id);
-    if (idx >= 0) {
-      const toPin: number[] = [$activeChapter.id];
-      for (let i = 1; i <= 3; i++) {
-        const entry = $activeChapterList[idx + i];
-        if (!entry) break;
-        toPin.push(entry.id);
-        fetchPages(entry.id).then((urls) => { const n = i === 1 ? 8 : i === 2 ? 4 : 2; urls.slice(0, n).forEach(preloadImage); }).catch(() => {});
+  $effect(() => {
+    if (activeChapter && activeChapterList.length) {
+      const idx = activeChapterList.findIndex(c => c.id === activeChapter!.id);
+      if (idx >= 0) {
+        const toPin: number[] = [activeChapter.id];
+        for (let i = 1; i <= 3; i++) {
+          const entry = activeChapterList[idx + i];
+          if (!entry) break;
+          toPin.push(entry.id);
+          fetchPages(entry.id).then(urls => { const n = i === 1 ? 8 : i === 2 ? 4 : 2; urls.slice(0, n).forEach(preloadImage); }).catch(() => {});
+        }
+        if (idx > 0) { const prev = activeChapterList[idx - 1]; toPin.push(prev.id); fetchPages(prev.id).catch(() => {}); }
+        cacheEvict(new Set(toPin));
       }
-      if (idx > 0) { const prev = $activeChapterList[idx - 1]; toPin.push(prev.id); fetchPages(prev.id).catch(() => {}); }
-      cacheEvict(new Set(toPin));
     }
-  }
+  });
 
-  
-  $: if (style === "longstrip" && $pageUrls.length && $activeChapter) {
-    appended  = new Set([$activeChapter.id]);
-    appending = false;
-    if (autoNext) {
-      stripChapters    = [{ chapterId: $activeChapter.id, chapterName: $activeChapter.name, urls: $pageUrls, startGlobalIdx: 0 }];
-      visibleChapterId = $activeChapter.id;
-    } else {
-      stripChapters    = [];
-      visibleChapterId = null;
+  $effect(() => {
+    if (style === "longstrip" && pageUrls.length && activeChapter) {
+      appended  = new Set([activeChapter.id]);
+      appending = false;
+      if (autoNext) {
+        stripChapters    = [{ chapterId: activeChapter.id, chapterName: activeChapter.name, urls: pageUrls, startGlobalIdx: 0 }];
+        visibleChapterId = activeChapter.id;
+      } else {
+        stripChapters    = [];
+        visibleChapterId = null;
+      }
+      if (containerEl) containerEl.scrollTop = 0;
     }
-    if (containerEl) containerEl.scrollTop = 0;
-  }
+  });
 
-  
-  $: if ($activeChapter?.id && containerEl) containerEl.scrollTop = 0;
-  $: if (style !== "longstrip" && containerEl) containerEl.scrollTop = 0;
+  $effect(() => { if (activeChapter?.id && containerEl) containerEl.scrollTop = 0; });
+  $effect(() => { if (style !== "longstrip" && containerEl) containerEl.scrollTop = 0; });
 
-  
   function onWheel(e: WheelEvent) {
     if (!e.ctrlKey) return;
     e.preventDefault();
     updateSettings({ maxPageWidth: Math.min(2400, Math.max(200, maxW + (e.deltaY < 0 ? 50 : -50))) });
   }
 
-  
   function onKey(e: KeyboardEvent) {
     if ((e.target as HTMLElement).tagName === "INPUT") return;
-    const kb  = $settings.keybinds ?? DEFAULT_KEYBINDS;
-    const mW  = $settings.maxPageWidth ?? 900;
-    const r   = $settings.readingDirection === "rtl";
+    const kb = settings.keybinds ?? DEFAULT_KEYBINDS;
+    const mW = settings.maxPageWidth ?? 900;
+    const r  = settings.readingDirection === "rtl";
     if (e.key === "Escape") {
       e.preventDefault();
       if (zoomOpen) { zoomOpen = false; return; }
@@ -462,24 +419,24 @@
     if      (matchesKeybind(e, kb.exitReader))             { e.preventDefault(); closeReader(); }
     else if (matchesKeybind(e, kb.pageRight))              { e.preventDefault(); goForward(); }
     else if (matchesKeybind(e, kb.pageLeft))               { e.preventDefault(); goBack(); }
-    else if (matchesKeybind(e, kb.firstPage))              { e.preventDefault(); pageNumber.set(1); }
-    else if (matchesKeybind(e, kb.lastPage))               { e.preventDefault(); pageNumber.set(lastPage); }
+    else if (matchesKeybind(e, kb.firstPage))              { e.preventDefault(); pageNumber = 1; }
+    else if (matchesKeybind(e, kb.lastPage))               { e.preventDefault(); pageNumber = lastPage; }
     else if (matchesKeybind(e, kb.chapterRight)) {
       e.preventDefault();
-      const list = $activeChapterList, idx = list.findIndex((c) => c.id === loadingId);
+      const list = activeChapterList, idx = list.findIndex(c => c.id === loadingId);
       const next = idx >= 0 && idx < list.length - 1 ? list[idx + 1] : null;
       if (next) { maybeMarkCurrentRead(); openReader(next, list); }
     }
     else if (matchesKeybind(e, kb.chapterLeft)) {
       e.preventDefault();
-      const list = $activeChapterList, idx = list.findIndex((c) => c.id === loadingId);
+      const list = activeChapterList, idx = list.findIndex(c => c.id === loadingId);
       const prev = idx > 0 ? list[idx - 1] : null;
       if (prev) openReader(prev, list);
     }
     else if (matchesKeybind(e, kb.togglePageStyle))        { e.preventDefault(); cycleStyle(); }
     else if (matchesKeybind(e, kb.toggleReadingDirection)) { e.preventDefault(); updateSettings({ readingDirection: r ? "ltr" : "rtl" }); }
     else if (matchesKeybind(e, kb.toggleFullscreen))       { e.preventDefault(); toggleFullscreen().catch(console.error); }
-    else if (matchesKeybind(e, kb.openSettings))           { e.preventDefault(); settingsOpen.set(true); }
+    else if (matchesKeybind(e, kb.openSettings))           { e.preventDefault(); settingsOpen = true; }
   }
 
   function handleTap(e: MouseEvent) {
@@ -489,11 +446,9 @@
     else       { if (x < 0.4) goForward(); else if (x > 0.6) goBack(); }
   }
 
-  async function runDl(fn: () => Promise<unknown>, body: string) {
+  async function runDl(fn: () => Promise<unknown>) {
     dlBusy = true;
-    try {
-      await fn();
-    } catch (e: any) { console.error(e); }
+    try { await fn(); } catch (e: any) { console.error(e); }
     dlBusy = false; dlOpen = false;
   }
 
@@ -505,46 +460,44 @@
     window.addEventListener("wheel", onWheel, { passive: false });
     containerEl?.focus({ preventScroll: true });
     scrollCleanup = setupScrollTracking();
+    return () => {
+      abortCtrl?.abort();
+      if (hideTimer) clearTimeout(hideTimer);
+      window.removeEventListener("keydown", onKey);
+      window.removeEventListener("wheel", onWheel);
+      scrollCleanup?.();
+    };
   });
 
-  onDestroy(() => {
-    abortCtrl?.abort();
-    if (hideTimer) clearTimeout(hideTimer);
-    window.removeEventListener("keydown", onKey);
-    window.removeEventListener("wheel", onWheel);
-    scrollCleanup?.();
-  });
-
-  $: stripToRender = style === "longstrip"
+  const stripToRender = $derived(style === "longstrip"
     ? (autoNext && stripChapters.length > 0
         ? stripChapters
-        : [{ chapterId: $activeChapter?.id ?? 0, chapterName: $activeChapter?.name ?? "", urls: $pageUrls, startGlobalIdx: 0 }])
-    : [];
+        : [{ chapterId: activeChapter?.id ?? 0, chapterName: activeChapter?.name ?? "", urls: pageUrls, startGlobalIdx: 0 }])
+    : []);
 
-  $: currentGroup = style === "double" && pageGroups.length
-    ? (pageGroups.find((g) => g.includes($pageNumber)) ?? [$pageNumber])
-    : [$pageNumber];
+  const currentGroup = $derived(style === "double" && pageGroups.length
+    ? (pageGroups.find(g => g.includes(pageNumber)) ?? [pageNumber])
+    : [pageNumber]);
 </script>
 
-<div class="root" role="presentation" on:mousemove={(e) => { if (e.clientY < 60 || window.innerHeight - e.clientY < 60) showUi(); }}>
+<div class="root" role="presentation" onmousemove={(e) => { if (e.clientY < 60 || window.innerHeight - e.clientY < 60) showUi(); }}>
 
-  
   <div class="topbar" class:hidden={!uiVisible}>
-    <button class="icon-btn" on:click={closeReader} title="Close reader"><X size={15} weight="light" /></button>
-    <button class="icon-btn" on:click={() => { if (adjacent.prev) { maybeMarkCurrentRead(); openReader(adjacent.prev, $activeChapterList); } }} disabled={!adjacent.prev}>
+    <button class="icon-btn" onclick={closeReader} title="Close reader"><X size={15} weight="light" /></button>
+    <button class="icon-btn" onclick={() => { if (adjacent.prev) { maybeMarkCurrentRead(); openReader(adjacent.prev, activeChapterList); } }} disabled={!adjacent.prev}>
       <CaretLeft size={14} weight="light" />
     </button>
     <span class="ch-label">
-      <span class="ch-title">{$activeManga?.title}</span>
+      <span class="ch-title">{activeManga?.title}</span>
       <span class="ch-sep">/</span>
       <span>{displayChapter?.name}</span>
     </span>
-    <span class="page-label">{$pageNumber} / {visibleChunkLastPage || "…"}</span>
-    <button class="icon-btn" on:click={() => { if (adjacent.next) { maybeMarkCurrentRead(); openReader(adjacent.next, $activeChapterList); } }} disabled={!adjacent.next}>
+    <span class="page-label">{pageNumber} / {visibleChunkLastPage || "…"}</span>
+    <button class="icon-btn" onclick={() => { if (adjacent.next) { maybeMarkCurrentRead(); openReader(adjacent.next, activeChapterList); } }} disabled={!adjacent.next}>
       <CaretRight size={14} weight="light" />
     </button>
     <div class="top-sep"></div>
-    <button class="mode-btn" on:click={cycleFit}>
+    <button class="mode-btn" onclick={cycleFit}>
       {#if fit === "width"}<ArrowsLeftRight size={14} weight="light" />
       {:else if fit === "height"}<ArrowsVertical size={14} weight="light" />
       {:else if fit === "screen"}<ArrowsIn size={14} weight="light" />
@@ -552,43 +505,42 @@
       <span class="mode-label">{fitLabel}</span>
     </button>
     <div class="zoom-wrap">
-      <button class="zoom-btn" on:click={() => zoomOpen = !zoomOpen}>{Math.round((maxW / 900) * 100)}%</button>
+      <button class="zoom-btn" onclick={() => zoomOpen = !zoomOpen}>{Math.round((maxW / 900) * 100)}%</button>
       {#if zoomOpen}
         <div class="zoom-popover">
           <input type="range" class="zoom-slider" min={200} max={2400} step={50} value={maxW}
-            on:input={(e) => updateSettings({ maxPageWidth: Number(e.currentTarget.value) })} />
-          <button class="zoom-reset" on:click={() => updateSettings({ maxPageWidth: 900 })}>{Math.round((maxW / 900) * 100)}%</button>
+            oninput={(e) => updateSettings({ maxPageWidth: Number(e.currentTarget.value) })} />
+          <button class="zoom-reset" onclick={() => updateSettings({ maxPageWidth: 900 })}>{Math.round((maxW / 900) * 100)}%</button>
         </div>
       {/if}
     </div>
-    <button class="mode-btn" class:active={rtl} on:click={() => updateSettings({ readingDirection: rtl ? "ltr" : "rtl" })}>
+    <button class="mode-btn" class:active={rtl} onclick={() => updateSettings({ readingDirection: rtl ? "ltr" : "rtl" })}>
       <ArrowsLeftRight size={14} weight="light" /><span class="mode-label">{rtl ? "RTL" : "LTR"}</span>
     </button>
-    <button class="mode-btn" on:click={cycleStyle}>
+    <button class="mode-btn" onclick={cycleStyle}>
       {#if style === "single"}<Square size={14} weight="light" />{:else}<Rows size={14} weight="light" />{/if}
       <span class="mode-label">{styleLabel}</span>
     </button>
     {#if style !== "single"}
-      <button class="mode-btn" class:active={$settings.pageGap} on:click={() => updateSettings({ pageGap: !$settings.pageGap })}>
+      <button class="mode-btn" class:active={settings.pageGap} onclick={() => updateSettings({ pageGap: !settings.pageGap })}>
         <span class="mode-label">Gap</span>
       </button>
     {/if}
     {#if style === "longstrip"}
-      <button class="mode-btn" class:active={autoNext} on:click={() => updateSettings({ autoNextChapter: !autoNext })}>
+      <button class="mode-btn" class:active={autoNext} onclick={() => updateSettings({ autoNextChapter: !autoNext })}>
         <span class="mode-label">Auto</span>
       </button>
     {/if}
     {#if !autoNext}
-      <button class="mode-btn" class:active={markOnNext} on:click={() => updateSettings({ markReadOnNext: !markOnNext })}>
+      <button class="mode-btn" class:active={markOnNext} onclick={() => updateSettings({ markReadOnNext: !markOnNext })}>
         <span class="mode-label">Mk.Read</span>
       </button>
     {/if}
-    <button class="mode-btn" on:click={() => dlOpen = true}>
+    <button class="mode-btn" onclick={() => dlOpen = true}>
       <Download size={14} weight="light" />
     </button>
   </div>
 
-  
   <div
     bind:this={containerEl}
     class="viewer"
@@ -596,9 +548,9 @@
     style="--max-page-width:{maxW}px"
     role="presentation"
     tabindex="-1"
-    on:click={handleTap}
-    on:wheel={(e) => { if (e.ctrlKey) e.preventDefault(); }}
-    on:keydown={(e) => { if (e.key === " " && style === "longstrip") { e.preventDefault(); containerEl?.scrollBy({ top: containerEl.clientHeight * 0.85, behavior: "smooth" }); } }}
+    onclick={handleTap}
+    onwheel={(e) => { if (e.ctrlKey) e.preventDefault(); }}
+    onkeydown={(e) => { if (e.key === " " && style === "longstrip") { e.preventDefault(); containerEl?.scrollBy({ top: containerEl.clientHeight * 0.85, behavior: "smooth" }); } }}
   >
     {#if loading}
       <div class="center-overlay"><CircleNotch size={20} weight="light" class="anim-spin" style="color:var(--text-faint)" /></div>
@@ -610,17 +562,7 @@
     {#if style === "longstrip"}
       {#each stripToRender as chunk}
         {#each chunk.urls as url, i}
-          <img
-            src={url}
-            alt="{chunk.chapterName} – Page {i + 1}"
-            data-local-page={i + 1}
-            data-chapter={chunk.chapterId}
-            data-total={chunk.urls.length}
-            class="{imgCls}{$settings.pageGap ? ' strip-gap' : ''}"
-            loading={i < 3 ? "eager" : "lazy"}
-            decoding="async"
-            height="1000"
-          />
+          <img src={url} alt="{chunk.chapterName} – Page {i + 1}" data-local-page={i + 1} data-chapter={chunk.chapterId} data-total={chunk.urls.length} class="{imgCls}{settings.pageGap ? ' strip-gap' : ''}" loading={i < 3 ? "eager" : "lazy"} decoding="async" height="1000" />
         {/each}
       {/each}
       <div bind:this={sentinelEl} style="height:1px;flex-shrink:0;overflow-anchor:none"></div>
@@ -628,52 +570,48 @@
       {#if style === "double" && pageGroups.length}
         <div class="double-wrap">
           {#each currentGroup as pg}
-            <img src={$pageUrls[pg - 1]} alt="Page {pg}" class="{imgCls} page-half {pg === currentGroup[0] ? 'gap-left' : 'gap-right'}" decoding="async" />
+            <img src={pageUrls[pg - 1]} alt="Page {pg}" class="{imgCls} page-half {pg === currentGroup[0] ? 'gap-left' : 'gap-right'}" decoding="async" />
           {/each}
         </div>
       {:else}
-        <img src={$pageUrls[$pageNumber - 1]} alt="Page {$pageNumber}" class={imgCls} decoding="async" style="transition:opacity 0.1s ease" />
+        <img src={pageUrls[pageNumber - 1]} alt="Page {pageNumber}" class={imgCls} decoding="async" style="transition:opacity 0.1s ease" />
       {/if}
     {/if}
   </div>
 
-  
   <div class="bottombar" class:hidden={!uiVisible}>
-    <button class="nav-btn" on:click={goPrev}
-      disabled={loading || (style === "longstrip" ? !adjacent.prev : ($pageNumber === 1 && !adjacent.prev))}>
+    <button class="nav-btn" onclick={goPrev} disabled={loading || (style === "longstrip" ? !adjacent.prev : (pageNumber === 1 && !adjacent.prev))}>
       <ArrowLeft size={13} weight="light" />
     </button>
-    <button class="nav-btn" on:click={goNext}
-      disabled={loading || (style === "longstrip" ? !adjacent.next : ($pageNumber === lastPage && !adjacent.next))}>
+    <button class="nav-btn" onclick={goNext} disabled={loading || (style === "longstrip" ? !adjacent.next : (pageNumber === lastPage && !adjacent.next))}>
       <ArrowRight size={13} weight="light" />
     </button>
   </div>
 
-  
-  {#if dlOpen && $activeChapter}
-    {@const queueable = adjacent.remaining.filter((c) => !c.isDownloaded)}
-    <div class="dl-backdrop" role="presentation" on:click={() => dlOpen = false}>
-      <div class="dl-modal" role="presentation" on:click|stopPropagation>
+  {#if dlOpen && activeChapter}
+    {@const queueable = adjacent.remaining.filter(c => !c.isDownloaded)}
+    <div class="dl-backdrop" role="presentation" onclick={() => dlOpen = false}>
+      <div class="dl-modal" role="presentation" onclick|stopPropagation>
         <p class="dl-title">Download</p>
-        <button class="dl-option" disabled={dlBusy || !!$activeChapter.isDownloaded}
-          on:click={() => runDl(() => gql(ENQUEUE_DOWNLOAD, { chapterId: $activeChapter!.id }), $activeChapter!.name)}>
+        <button class="dl-option" disabled={dlBusy || !!activeChapter.isDownloaded}
+          onclick={() => runDl(() => gql(ENQUEUE_DOWNLOAD, { chapterId: activeChapter!.id }))}>
           This chapter
-          <span class="dl-sub">{$activeChapter.isDownloaded ? "Already downloaded" : $activeChapter.name}</span>
+          <span class="dl-sub">{activeChapter.isDownloaded ? "Already downloaded" : activeChapter.name}</span>
         </button>
         <div class="dl-row">
           <button class="dl-option" disabled={dlBusy || queueable.length === 0}
-            on:click={() => runDl(() => gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds: queueable.slice(0, nextN).map((c) => c.id) }), `${Math.min(nextN, queueable.length)} chapters queued`)}>
+            onclick={() => runDl(() => gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds: queueable.slice(0, nextN).map(c => c.id) }))}>
             Next chapters
             <span class="dl-sub">{Math.min(nextN, queueable.length)} not yet downloaded</span>
           </button>
-          <div class="dl-stepper" role="presentation" on:click|stopPropagation>
-            <button class="dl-step-btn" on:click={() => nextN = Math.max(1, nextN - 1)} disabled={nextN <= 1}>−</button>
+          <div class="dl-stepper" role="presentation" onclick|stopPropagation>
+            <button class="dl-step-btn" onclick={() => nextN = Math.max(1, nextN - 1)} disabled={nextN <= 1}>−</button>
             <span class="dl-step-val">{nextN}</span>
-            <button class="dl-step-btn" on:click={() => nextN = Math.min(queueable.length || 1, nextN + 1)} disabled={nextN >= queueable.length}>+</button>
+            <button class="dl-step-btn" onclick={() => nextN = Math.min(queueable.length || 1, nextN + 1)} disabled={nextN >= queueable.length}>+</button>
           </div>
         </div>
         <button class="dl-option" disabled={dlBusy || queueable.length === 0}
-          on:click={() => runDl(() => gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds: queueable.map((c) => c.id) }), `${queueable.length} chapters queued`)}>
+          onclick={() => runDl(() => gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds: queueable.map(c => c.id) }))}>
           All remaining
           <span class="dl-sub">{queueable.length} not yet downloaded</span>
         </button>
@@ -683,42 +621,21 @@
 </div>
 
 <style>
-  .root {
-    position: fixed; inset: 0; background: #000;
-    display: flex; flex-direction: column;
-    z-index: var(--z-reader);
-    transform: translateZ(0); will-change: transform;
-  }
-
-  .topbar {
-    display: flex; align-items: center; gap: var(--sp-1);
-    padding: 0 var(--sp-3); height: 40px;
-    background: var(--bg-void); border-bottom: 1px solid var(--border-dim);
-    flex-shrink: 0; position: relative; z-index: 2;
-    transition: opacity 0.25s ease;
-  }
+  .root { position: fixed; inset: 0; background: #000; display: flex; flex-direction: column; z-index: var(--z-reader); transform: translateZ(0); will-change: transform; }
+  .topbar { display: flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-3); height: 40px; background: var(--bg-void); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; position: relative; z-index: 2; transition: opacity 0.25s ease; }
   .topbar.hidden, .bottombar.hidden { opacity: 0; pointer-events: none; }
-
-  .icon-btn {
-    display: flex; align-items: center; justify-content: center;
-    width: 28px; height: 28px; border-radius: var(--radius-sm);
-    color: var(--text-muted); flex-shrink: 0;
-    transition: color var(--t-base), background var(--t-base);
-  }
+  .icon-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--text-muted); flex-shrink: 0; transition: color var(--t-base), background var(--t-base); }
   .icon-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-raised); }
   .icon-btn:disabled { opacity: 0.2; cursor: default; }
-
   .ch-label { flex: 1; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .ch-title { color: var(--text-secondary); font-weight: var(--weight-medium); }
   .ch-sep   { color: var(--text-faint); }
   .page-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); flex-shrink: 0; }
   .top-sep { width: 1px; height: 16px; background: var(--border-dim); flex-shrink: 0; margin: 0 var(--sp-1); }
-
   .mode-btn { display: flex; align-items: center; gap: 4px; padding: 4px var(--sp-2); border-radius: var(--radius-sm); color: var(--text-muted); flex-shrink: 0; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); transition: color var(--t-base), background var(--t-base); }
   .mode-btn:hover { color: var(--text-primary); background: var(--bg-raised); }
   .mode-btn.active { color: var(--accent-fg); background: var(--accent-muted); }
   .mode-label { text-transform: capitalize; }
-
   .zoom-wrap { position: relative; flex-shrink: 0; }
   .zoom-btn { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); padding: 4px var(--sp-2); border-radius: var(--radius-sm); min-width: 36px; text-align: center; transition: color var(--t-base), background var(--t-base); }
   .zoom-btn:hover { color: var(--text-secondary); background: var(--bg-raised); }
@@ -727,11 +644,9 @@
   .zoom-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-fg); cursor: pointer; }
   .zoom-reset { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); padding: 2px var(--sp-2); border-radius: var(--radius-sm); transition: color var(--t-base), background var(--t-base); }
   .zoom-reset:hover { color: var(--text-primary); background: var(--bg-overlay); }
-
   .viewer { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-overflow-scrolling: touch; position: relative; }
   .viewer.strip { justify-content: flex-start; padding: var(--sp-4) 0; overflow-anchor: auto; }
   .viewer:focus { outline: none; }
-
   .img { display: block; user-select: none; image-rendering: auto; }
   .img.optimize-contrast { image-rendering: -webkit-optimize-contrast; }
   .fit-width    { max-width: var(--max-page-width); width: 100%; height: auto; }
@@ -739,20 +654,16 @@
   .fit-screen   { max-width: 100%; max-height: calc(100vh - 80px); object-fit: contain; height: auto; }
   .fit-original { max-width: none; width: auto; height: auto; }
   .strip-gap { margin-bottom: 8px; }
-
   .double-wrap { display: flex; align-items: flex-start; justify-content: center; max-width: calc(var(--max-page-width) * 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); }
-
   .bottombar { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-3); border-top: 1px solid var(--border-dim); background: var(--bg-void); flex-shrink: 0; transition: opacity 0.25s ease; }
   .nav-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); color: var(--text-muted); transition: background var(--t-base), color var(--t-base); }
   .nav-btn:hover:not(:disabled) { background: var(--bg-raised); color: var(--text-primary); }
   .nav-btn:disabled { opacity: 0.25; cursor: default; }
-
   .dl-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-reader) + 10); display: flex; align-items: flex-start; justify-content: flex-end; padding: 48px var(--sp-4) 0; }
   .dl-modal { background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-xl); padding: var(--sp-3); min-width: 210px; display: flex; flex-direction: column; gap: var(--sp-1); box-shadow: 0 8px 32px rgba(0,0,0,0.6); animation: scaleIn 0.12s ease both; transform-origin: top right; }
   .dl-title { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding: 2px var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--border-dim); margin-bottom: var(--sp-1); }
@@ -766,4 +677,5 @@
   .dl-step-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-raised); }
   .dl-step-btn:disabled { opacity: 0.25; cursor: default; }
   .dl-step-val { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-secondary); min-width: 24px; text-align: center; letter-spacing: var(--tracking-wide); }
+  @keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
 </style>
diff --git a/src/lib/queries.ts b/src/lib/queries.ts
index 8930bec..c02397e 100644
--- a/src/lib/queries.ts
+++ b/src/lib/queries.ts
@@ -10,7 +10,16 @@ export const GET_LIBRARY = `
         inLibrary
         downloadCount
         unreadCount
+        description
+        status
+        author
+        artist
         genre
+        source {
+          id
+          name
+          displayName
+        }
         chapters {
           totalCount
         }
diff --git a/src/routes.ts b/src/routes.ts
index f8eb5e6..b60372f 100644
--- a/src/routes.ts
+++ b/src/routes.ts
@@ -1,8 +1,8 @@
 import Library    from "./components/pages/Library.svelte";
-import Search     from "./components/search/Search.svelte";
-import History    from "./components/history/History.svelte";
+import Search     from "./components/pages/Search.svelte";
+import History    from "./components/pages/History.svelte";
 import Explore    from "./components/pages/Explore.svelte";
-import Downloads  from "./components/downloads/Downloads.svelte";
+import Downloads  from "./components/pages/Downloads.svelte";
 import Extensions from "./components/pages/Extensions.svelte";
 
 export default {
diff --git a/src/store/index.ts b/src/store/index.ts
index 8035db6..2f3de63 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,4 +1,3 @@
-import { writable, get } from "svelte/store";
 import type { Manga, Chapter, Source } from "../lib/types";
 import { DEFAULT_KEYBINDS, type Keybinds } from "../lib/keybinds";
 
@@ -13,109 +12,175 @@ export type Theme            = "dark" | "high-contrast" | "light" | "light-contr
 export const COMPLETED_FOLDER_ID = "completed";
 
 export interface HistoryEntry {
-  mangaId: number; mangaTitle: string; thumbnailUrl: string;
-  chapterId: number; chapterName: string; pageNumber: number; readAt: number;
+  mangaId:     number;
+  mangaTitle:  string;
+  thumbnailUrl: string;
+  chapterId:   number;
+  chapterName: string;
+  pageNumber:  number;
+  readAt:      number;
 }
 
 export interface ReadingStats {
-  totalChaptersRead:  number;
-  totalMangaRead:     number;
-  totalMinutesRead:   number;
-  firstReadAt:        number;
-  lastReadAt:         number;
-  currentStreakDays:  number;
-  longestStreakDays:  number;
-  lastStreakDate:     string;
+  totalChaptersRead: number;
+  totalMangaRead:    number;
+  totalMinutesRead:  number;
+  firstReadAt:       number;
+  lastReadAt:        number;
+  currentStreakDays: number;
+  longestStreakDays: number;
+  lastStreakDate:    string;
 }
 
 const AVG_MIN_PER_CHAPTER = 5;
 
 export const DEFAULT_READING_STATS: ReadingStats = {
-  totalChaptersRead: 0, totalMangaRead: 0, totalMinutesRead: 0,
-  firstReadAt: 0, lastReadAt: 0,
-  currentStreakDays: 0, longestStreakDays: 0, lastStreakDate: "",
+  totalChaptersRead: 0,
+  totalMangaRead:    0,
+  totalMinutesRead:  0,
+  firstReadAt:       0,
+  lastReadAt:        0,
+  currentStreakDays: 0,
+  longestStreakDays: 0,
+  lastStreakDate:    "",
 };
 
 export interface Toast {
-  id: string; kind: "success" | "error" | "info" | "download";
-  title: string; body?: string; duration?: number;
+  id:       string;
+  kind:     "success" | "error" | "info" | "download";
+  title:    string;
+  body?:    string;
+  duration?: number;
 }
 
-export interface ActiveDownload { chapterId: number; mangaId: number; progress: number }
+export interface ActiveDownload {
+  chapterId: number;
+  mangaId:   number;
+  progress:  number;
+}
 
 export interface Folder {
-  id: string; name: string; mangaIds: number[]; showTab: boolean;
-  system?: boolean;
+  id:       string;
+  name:     string;
+  mangaIds: number[];
+  showTab:  boolean;
+  system?:  boolean;
 }
 
 export interface Settings {
-  pageStyle: PageStyle; readingDirection: ReadingDirection; fitMode: FitMode;
-  maxPageWidth: number; pageGap: boolean; optimizeContrast: boolean;
-  offsetDoubleSpreads: boolean; preloadPages: number; autoMarkRead: boolean;
-  autoNextChapter: boolean; libraryCropCovers: boolean; libraryPageSize: number;
-  showNsfw: boolean; chapterSortDir: ChapterSortDir; chapterPageSize: number;
-  uiScale: number; compactSidebar: boolean; gpuAcceleration: boolean;
-  serverUrl: string; serverBinary: string; autoStartServer: boolean;
-  preferredExtensionLang: string; keybinds: Keybinds; idleTimeoutMin?: number;
-  splashCards?: boolean; storageLimitGb: number | null; folders: Folder[];
-  markReadOnNext: boolean; readerDebounceMs: number; theme: Theme;
-  libraryBranches: boolean;
-  renderLimit: number;
-  heroSlots: (number | null)[];
-  /**
-   * User-defined manga links — manually registered "same series" pairs.
-   * Key: mangaId, Value: array of mangaIds this entry is linked to.
-   * Links are bidirectional at lookup time; only stored in one direction.
-   */
-  mangaLinks: Record<number, number[]>;
+  pageStyle:               PageStyle;
+  readingDirection:        ReadingDirection;
+  fitMode:                 FitMode;
+  maxPageWidth:            number;
+  pageGap:                 boolean;
+  optimizeContrast:        boolean;
+  offsetDoubleSpreads:     boolean;
+  preloadPages:            number;
+  autoMarkRead:            boolean;
+  autoNextChapter:         boolean;
+  libraryCropCovers:       boolean;
+  libraryPageSize:         number;
+  showNsfw:                boolean;
+  chapterSortDir:          ChapterSortDir;
+  chapterPageSize:         number;
+  uiScale:                 number;
+  compactSidebar:          boolean;
+  gpuAcceleration:         boolean;
+  serverUrl:               string;
+  serverBinary:            string;
+  autoStartServer:         boolean;
+  preferredExtensionLang:  string;
+  keybinds:                Keybinds;
+  idleTimeoutMin?:         number;
+  splashCards?:            boolean;
+  storageLimitGb:          number | null;
+  folders:                 Folder[];
+  markReadOnNext:          boolean;
+  readerDebounceMs:        number;
+  theme:                   Theme;
+  libraryBranches:         boolean;
+  renderLimit:             number;
+  heroSlots:               (number | null)[];
+  mangaLinks:              Record<number, number[]>;
 }
 
 const COMPLETED_FOLDER_DEFAULT: Folder = {
-  id: COMPLETED_FOLDER_ID, name: "Completed", mangaIds: [], showTab: true, system: true,
+  id:       COMPLETED_FOLDER_ID,
+  name:     "Completed",
+  mangaIds: [],
+  showTab:  true,
+  system:   true,
 };
 
 export const DEFAULT_SETTINGS: Settings = {
-  pageStyle: "longstrip", readingDirection: "ltr", fitMode: "width",
-  maxPageWidth: 900, pageGap: true, optimizeContrast: false,
-  offsetDoubleSpreads: false, preloadPages: 3, autoMarkRead: true,
-  autoNextChapter: true, libraryCropCovers: true, libraryPageSize: 48,
-  showNsfw: false, chapterSortDir: "desc", chapterPageSize: 25,
-  uiScale: 100, compactSidebar: false, gpuAcceleration: true,
-  serverUrl: "http://localhost:4567", serverBinary: "tachidesk-server",
-  autoStartServer: true, preferredExtensionLang: "en", keybinds: DEFAULT_KEYBINDS,
-  idleTimeoutMin: 5, splashCards: true, storageLimitGb: null,
-  folders: [COMPLETED_FOLDER_DEFAULT],
-  markReadOnNext: true, readerDebounceMs: 120, theme: "dark",
-  libraryBranches: true, renderLimit: 48,
-  heroSlots: [null, null, null, null],
-  mangaLinks: {},
+  pageStyle:              "longstrip",
+  readingDirection:       "ltr",
+  fitMode:                "width",
+  maxPageWidth:           900,
+  pageGap:                true,
+  optimizeContrast:       false,
+  offsetDoubleSpreads:    false,
+  preloadPages:           3,
+  autoMarkRead:           true,
+  autoNextChapter:        true,
+  libraryCropCovers:      true,
+  libraryPageSize:        48,
+  showNsfw:               false,
+  chapterSortDir:         "desc",
+  chapterPageSize:        25,
+  uiScale:                100,
+  compactSidebar:         false,
+  gpuAcceleration:        true,
+  serverUrl:              "http://localhost:4567",
+  serverBinary:           "tachidesk-server",
+  autoStartServer:        true,
+  preferredExtensionLang: "en",
+  keybinds:               DEFAULT_KEYBINDS,
+  idleTimeoutMin:         5,
+  splashCards:            true,
+  storageLimitGb:         null,
+  folders:                [COMPLETED_FOLDER_DEFAULT],
+  markReadOnNext:         true,
+  readerDebounceMs:       120,
+  theme:                  "dark",
+  libraryBranches:        true,
+  renderLimit:            48,
+  heroSlots:              [null, null, null, null],
+  mangaLinks:             {},
 };
 
 // ── Persistence ───────────────────────────────────────────────────────────────
 
-function loadPersisted() {
-  try { const raw = localStorage.getItem("moku-store"); return raw ? JSON.parse(raw) : null; }
-  catch { return null; }
+function loadPersisted(): any {
+  try {
+    const raw = localStorage.getItem("moku-store");
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
 }
 
-function persist(key: string, value: unknown) {
-  try { localStorage.setItem(key, JSON.stringify(value)); } catch {}
+function persist(patch: Record<string, unknown>) {
+  try {
+    const current = loadPersisted() ?? {};
+    localStorage.setItem("moku-store", JSON.stringify({ ...current, ...patch }));
+  } catch {}
 }
 
 const saved = loadPersisted();
 
 function mergeSettings(saved: any): Settings {
-  const userFolders: Folder[] = saved?.settings?.folders ?? [];
-  const existingCompleted = userFolders.find(f => f.id === COMPLETED_FOLDER_ID);
-  const completedFolder: Folder = existingCompleted
+  const userFolders: Folder[]    = saved?.settings?.folders ?? [];
+  const existingCompleted        = userFolders.find(f => f.id === COMPLETED_FOLDER_ID);
+  const completedFolder: Folder  = existingCompleted
     ? { ...COMPLETED_FOLDER_DEFAULT, mangaIds: existingCompleted.mangaIds }
     : COMPLETED_FOLDER_DEFAULT;
   const otherFolders = userFolders.filter(f => f.id !== COMPLETED_FOLDER_ID);
   return {
     ...DEFAULT_SETTINGS,
     ...saved?.settings,
-    folders: [completedFolder, ...otherFolders],
-    keybinds: { ...DEFAULT_KEYBINDS, ...saved?.settings?.keybinds },
+    folders:   [completedFolder, ...otherFolders],
+    keybinds:  { ...DEFAULT_KEYBINDS, ...saved?.settings?.keybinds },
     heroSlots: saved?.settings?.heroSlots ?? [null, null, null, null],
     mangaLinks: saved?.settings?.mangaLinks ?? {},
   };
@@ -125,38 +190,52 @@ function mergeStats(saved: any): ReadingStats {
   return { ...DEFAULT_READING_STATS, ...saved?.readingStats };
 }
 
-// ── Stores ────────────────────────────────────────────────────────────────────
+// ── State ─────────────────────────────────────────────────────────────────────
 
-export const navPage          = writable<NavPage>(saved?.navPage ?? "home");
-export const libraryFilter    = writable<LibraryFilter>(saved?.libraryFilter ?? "library");
-export const history          = writable<HistoryEntry[]>(saved?.history ?? []);
-export const readingStats     = writable<ReadingStats>(mergeStats(saved));
-export const settings         = writable<Settings>(mergeSettings(saved));
+export let navPage:           NavPage          = $state(saved?.navPage       ?? "home");
+export let libraryFilter:     LibraryFilter    = $state(saved?.libraryFilter ?? "library");
+export let history:           HistoryEntry[]   = $state(saved?.history       ?? []);
+export let readingStats:      ReadingStats     = $state(mergeStats(saved));
+export let settings:          Settings         = $state(mergeSettings(saved));
 
-export const genreFilter      = writable<string>("");
-export const searchPrefill    = writable<string>("");
-export const activeManga      = writable<Manga | null>(null);
-export const previewManga     = writable<Manga | null>(null);
-export const activeSource     = writable<Source | null>(null);
-export const pageUrls         = writable<string[]>([]);
-export const pageNumber       = writable<number>(1);
-export const libraryTagFilter = writable<string[]>([]);
-export const settingsOpen     = writable<boolean>(false);
-export const activeDownloads  = writable<ActiveDownload[]>([]);
-export const toasts           = writable<Toast[]>([]);
-export const activeChapter    = writable<Chapter | null>(null);
-export const activeChapterList = writable<Chapter[]>([]);
+export let genreFilter:       string           = $state("");
+export let searchPrefill:     string           = $state("");
+export let activeManga:       Manga | null     = $state(null);
+export let previewManga:      Manga | null     = $state(null);
+export let activeSource:      Source | null    = $state(null);
+export let pageUrls:          string[]         = $state([]);
+export let pageNumber:        number           = $state(1);
+export let libraryTagFilter:  string[]         = $state([]);
+export let settingsOpen:      boolean          = $state(false);
+export let activeDownloads:   ActiveDownload[] = $state([]);
+export let toasts:            Toast[]          = $state([]);
+export let activeChapter:     Chapter | null   = $state(null);
+export let activeChapterList: Chapter[]        = $state([]);
+
+// ── Persistence effects ───────────────────────────────────────────────────────
+
+$effect.root(() => {
+  $effect(() => { persist({ navPage }); });
+  $effect(() => { persist({ libraryFilter }); });
+  $effect(() => { persist({ history }); });
+  $effect(() => { persist({ readingStats }); });
+  $effect(() => { persist({ settings }); });
+});
 
 // ── Reader ────────────────────────────────────────────────────────────────────
 
 export function openReader(chapter: Chapter, chapterList: Chapter[]) {
-  activeChapter.set(chapter); activeChapterList.set(chapterList);
-  pageUrls.set([]); pageNumber.set(1);
+  activeChapter     = chapter;
+  activeChapterList = chapterList;
+  pageUrls          = [];
+  pageNumber        = 1;
 }
 
 export function closeReader() {
-  activeChapter.set(null); activeChapterList.set([]);
-  pageUrls.set([]); pageNumber.set(1);
+  activeChapter     = null;
+  activeChapterList = [];
+  pageUrls          = [];
+  pageNumber        = 1;
 }
 
 // ── History ───────────────────────────────────────────────────────────────────
@@ -167,157 +246,138 @@ function todayStr(): string {
 }
 
 export function addHistory(entry: HistoryEntry) {
-  history.update((h) => {
-    if (h[0]?.chapterId === entry.chapterId) {
-      const updated = [...h];
-      updated[0] = { ...updated[0], pageNumber: entry.pageNumber, readAt: entry.readAt };
-      return updated;
-    }
-    return [entry, ...h.filter((x) => x.chapterId !== entry.chapterId)].slice(0, 300);
-  });
+  const isNewChapter = !history.some(x => x.chapterId === entry.chapterId);
 
-  readingStats.update((s) => {
-    const currentH = get(history);
-    const uniqueChapters = new Set(currentH.map(e => e.chapterId));
-    const uniqueManga    = new Set(currentH.map(e => e.mangaId));
-    const isNewChapter   = !uniqueChapters.has(entry.chapterId) || currentH[0]?.chapterId !== entry.chapterId;
+  if (history[0]?.chapterId === entry.chapterId) {
+    history[0] = { ...history[0], pageNumber: entry.pageNumber, readAt: entry.readAt };
+  } else {
+    history = [entry, ...history.filter(x => x.chapterId !== entry.chapterId)].slice(0, 300);
+  }
 
-    const today = todayStr();
-    let { currentStreakDays, longestStreakDays, lastStreakDate } = s;
-    if (lastStreakDate !== today) {
-      const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1);
-      const yStr = `${yesterday.getFullYear()}-${String(yesterday.getMonth() + 1).padStart(2, "0")}-${String(yesterday.getDate()).padStart(2, "0")}`;
-      currentStreakDays = lastStreakDate === yStr ? currentStreakDays + 1 : 1;
-      longestStreakDays = Math.max(longestStreakDays, currentStreakDays);
-      lastStreakDate    = today;
-    }
+  const uniqueChapters = new Set(history.map(e => e.chapterId));
+  const uniqueManga    = new Set(history.map(e => e.mangaId));
 
-    return {
-      totalChaptersRead: Math.max(s.totalChaptersRead, uniqueChapters.size),
-      totalMangaRead:    Math.max(s.totalMangaRead,    uniqueManga.size),
-      totalMinutesRead:  s.totalMinutesRead + (isNewChapter ? AVG_MIN_PER_CHAPTER : 0),
-      firstReadAt:       s.firstReadAt === 0 ? entry.readAt : s.firstReadAt,
-      lastReadAt:        entry.readAt,
-      currentStreakDays, longestStreakDays, lastStreakDate,
-    };
-  });
+  const today = todayStr();
+  let { currentStreakDays, longestStreakDays, lastStreakDate } = readingStats;
+  if (lastStreakDate !== today) {
+    const yesterday = new Date();
+    yesterday.setDate(yesterday.getDate() - 1);
+    const yStr = `${yesterday.getFullYear()}-${String(yesterday.getMonth() + 1).padStart(2, "0")}-${String(yesterday.getDate()).padStart(2, "0")}`;
+    currentStreakDays = lastStreakDate === yStr ? currentStreakDays + 1 : 1;
+    longestStreakDays = Math.max(longestStreakDays, currentStreakDays);
+    lastStreakDate    = today;
+  }
+
+  readingStats = {
+    totalChaptersRead: Math.max(readingStats.totalChaptersRead, uniqueChapters.size),
+    totalMangaRead:    Math.max(readingStats.totalMangaRead,    uniqueManga.size),
+    totalMinutesRead:  readingStats.totalMinutesRead + (isNewChapter ? AVG_MIN_PER_CHAPTER : 0),
+    firstReadAt:       readingStats.firstReadAt === 0 ? entry.readAt : readingStats.firstReadAt,
+    lastReadAt:        entry.readAt,
+    currentStreakDays,
+    longestStreakDays,
+    lastStreakDate,
+  };
 }
 
-export function clearHistory() { history.set([]); }
+export function clearHistory() {
+  history = [];
+}
+
+export function clearHistoryForManga(mangaId: number) {
+  history = history.filter(x => x.mangaId !== mangaId);
+}
+
+export function wipeAllData() {
+  history      = [];
+  readingStats = { ...DEFAULT_READING_STATS };
+  settings     = { ...settings, folders: [COMPLETED_FOLDER_DEFAULT], heroSlots: [null, null, null, null], mangaLinks: {} };
+}
 
 // ── Completed manga ───────────────────────────────────────────────────────────
 
 export function markMangaCompleted(mangaId: number) {
-  settings.update((s) => {
-    let folders = [...s.folders];
-    const idx = folders.findIndex(f => f.id === COMPLETED_FOLDER_ID);
-    if (idx >= 0) {
-      if (folders[idx].mangaIds.includes(mangaId)) return s;
-      folders[idx] = { ...folders[idx], mangaIds: [...folders[idx].mangaIds, mangaId] };
-    } else {
-      folders = [{ ...COMPLETED_FOLDER_DEFAULT, mangaIds: [mangaId] }, ...folders];
-    }
-    return { ...s, folders };
+  let folders = settings.folders.map(f => {
+    if (f.id !== COMPLETED_FOLDER_ID) return f;
+    if (f.mangaIds.includes(mangaId)) return f;
+    return { ...f, mangaIds: [...f.mangaIds, mangaId] };
   });
+  if (!settings.folders.find(f => f.id === COMPLETED_FOLDER_ID)) {
+    folders = [{ ...COMPLETED_FOLDER_DEFAULT, mangaIds: [mangaId] }, ...folders];
+  }
+  settings = { ...settings, folders };
 }
 
 export function unmarkMangaCompleted(mangaId: number) {
-  settings.update((s) => ({
-    ...s,
-    folders: s.folders.map(f =>
+  settings = {
+    ...settings,
+    folders: settings.folders.map(f =>
       f.id === COMPLETED_FOLDER_ID
         ? { ...f, mangaIds: f.mangaIds.filter(id => id !== mangaId) }
         : f
     ),
-  }));
+  };
 }
 
 export function isCompleted(mangaId: number): boolean {
-  return get(settings).folders
-    .find(f => f.id === COMPLETED_FOLDER_ID)
-    ?.mangaIds.includes(mangaId) ?? false;
+  return settings.folders.find(f => f.id === COMPLETED_FOLDER_ID)?.mangaIds.includes(mangaId) ?? false;
 }
 
-/**
- * Called from SeriesDetail after marking chapters read.
- * If ALL chapters are read, auto-adds to the Completed folder.
- * If NOT all chapters are read, removes from Completed (handles un-read).
- * Pure function — no UI side effects.
- */
 export function checkAndMarkCompleted(mangaId: number, chapters: Chapter[]) {
-  if (chapters.length === 0) return;
-  const allRead = chapters.every(c => c.isRead);
-  if (allRead) markMangaCompleted(mangaId);
+  if (!chapters.length) return;
+  if (chapters.every(c => c.isRead)) markMangaCompleted(mangaId);
   else unmarkMangaCompleted(mangaId);
 }
 
-// ── Manga links ("same series" user overrides) ────────────────────────────────
+// ── Manga links ───────────────────────────────────────────────────────────────
 
-/**
- * Link two manga as "same series". Bidirectional — looking up either id
- * will return the other. Idempotent.
- */
 export function linkManga(idA: number, idB: number) {
   if (idA === idB) return;
-  settings.update(s => {
-    const links = { ...s.mangaLinks };
-    links[idA] = [...new Set([...(links[idA] ?? []), idB])];
-    links[idB] = [...new Set([...(links[idB] ?? []), idA])];
-    return { ...s, mangaLinks: links };
-  });
+  const links  = { ...settings.mangaLinks };
+  links[idA]   = [...new Set([...(links[idA] ?? []), idB])];
+  links[idB]   = [...new Set([...(links[idB] ?? []), idA])];
+  settings = { ...settings, mangaLinks: links };
 }
 
-/**
- * Remove a link between two manga.
- */
 export function unlinkManga(idA: number, idB: number) {
-  settings.update(s => {
-    const links = { ...s.mangaLinks };
-    links[idA] = (links[idA] ?? []).filter(id => id !== idB);
-    links[idB] = (links[idB] ?? []).filter(id => id !== idA);
-    if (!links[idA].length) delete links[idA];
-    if (!links[idB].length) delete links[idB];
-    return { ...s, mangaLinks: links };
-  });
+  const links = { ...settings.mangaLinks };
+  links[idA]  = (links[idA] ?? []).filter(id => id !== idB);
+  links[idB]  = (links[idB] ?? []).filter(id => id !== idA);
+  if (!links[idA].length) delete links[idA];
+  if (!links[idB].length) delete links[idB];
+  settings = { ...settings, mangaLinks: links };
 }
 
-/**
- * Returns all mangaIds linked to a given mangaId (direct links only, not transitive).
- */
 export function getLinkedMangaIds(mangaId: number): number[] {
-  return get(settings).mangaLinks[mangaId] ?? [];
+  return settings.mangaLinks[mangaId] ?? [];
 }
 
 // ── Hero slots ────────────────────────────────────────────────────────────────
 
-/**
- * Pin a manga to a hero slot (indices 1-3). Index 0 is always auto.
- * Pass null to unpin and revert to auto (recent history).
- */
 export function setHeroSlot(index: 1 | 2 | 3, mangaId: number | null) {
-  settings.update(s => {
-    const slots = [...(s.heroSlots ?? [null, null, null, null])];
-    slots[index] = mangaId;
-    return { ...s, heroSlots: slots };
-  });
+  const slots = [...(settings.heroSlots ?? [null, null, null, null])];
+  slots[index] = mangaId;
+  settings = { ...settings, heroSlots: slots };
 }
 
 // ── Toasts ────────────────────────────────────────────────────────────────────
 
 export function addToast(toast: Omit<Toast, "id">) {
-  toasts.update((t) => [...t, { ...toast, id: Math.random().toString(36).slice(2) }].slice(-5));
+  toasts = [...toasts, { ...toast, id: Math.random().toString(36).slice(2) }].slice(-5);
 }
+
 export function dismissToast(id: string) {
-  toasts.update((t) => t.filter((x) => x.id !== id));
+  toasts = toasts.filter(x => x.id !== id);
 }
 
 // ── Settings ──────────────────────────────────────────────────────────────────
 
 export function updateSettings(patch: Partial<Settings>) {
-  settings.update((s) => ({ ...s, ...patch }));
+  settings = { ...settings, ...patch };
 }
+
 export function resetKeybinds() {
-  settings.update((s) => ({ ...s, keybinds: DEFAULT_KEYBINDS }));
+  settings = { ...settings, keybinds: DEFAULT_KEYBINDS };
 }
 
 // ── Folders ───────────────────────────────────────────────────────────────────
@@ -326,40 +386,48 @@ const genId = () => Math.random().toString(36).slice(2, 10);
 
 export function addFolder(name: string): string {
   const id = genId();
-  settings.update((s) => ({ ...s, folders: [...s.folders, { id, name: name.trim(), mangaIds: [], showTab: false }] }));
+  settings = { ...settings, folders: [...settings.folders, { id, name: name.trim(), mangaIds: [], showTab: false }] };
   return id;
 }
+
 export function removeFolder(id: string) {
-  settings.update((s) => ({ ...s, folders: s.folders.filter(f => f.id !== id || f.system) }));
+  settings = { ...settings, folders: settings.folders.filter(f => f.id !== id || f.system) };
 }
+
 export function renameFolder(id: string, name: string) {
-  settings.update((s) => ({ ...s, folders: s.folders.map(f => f.id === id && !f.system ? { ...f, name: name.trim() } : f) }));
+  settings = {
+    ...settings,
+    folders: settings.folders.map(f => f.id === id && !f.system ? { ...f, name: name.trim() } : f),
+  };
 }
+
 export function toggleFolderTab(id: string) {
-  settings.update((s) => ({ ...s, folders: s.folders.map(f => f.id === id ? { ...f, showTab: !f.showTab } : f) }));
+  settings = {
+    ...settings,
+    folders: settings.folders.map(f => f.id === id ? { ...f, showTab: !f.showTab } : f),
+  };
 }
+
 export function assignMangaToFolder(folderId: string, mangaId: number) {
-  settings.update((s) => ({
-    ...s, folders: s.folders.map(f =>
-      f.id === folderId && !f.mangaIds.includes(mangaId) ? { ...f, mangaIds: [...f.mangaIds, mangaId] } : f
+  settings = {
+    ...settings,
+    folders: settings.folders.map(f =>
+      f.id === folderId && !f.mangaIds.includes(mangaId)
+        ? { ...f, mangaIds: [...f.mangaIds, mangaId] }
+        : f
     ),
-  }));
+  };
 }
+
 export function removeMangaFromFolder(folderId: string, mangaId: number) {
-  settings.update((s) => ({
-    ...s, folders: s.folders.map(f =>
+  settings = {
+    ...settings,
+    folders: settings.folders.map(f =>
       f.id === folderId ? { ...f, mangaIds: f.mangaIds.filter(id => id !== mangaId) } : f
     ),
-  }));
+  };
 }
+
 export function getMangaFolders(mangaId: number): Folder[] {
-  return get(settings).folders.filter(f => f.mangaIds.includes(mangaId));
+  return settings.folders.filter(f => f.mangaIds.includes(mangaId));
 }
-
-// ── Persistence subscriptions ─────────────────────────────────────────────────
-
-navPage.subscribe(v     => persist("moku-store", { ...loadPersisted(), navPage: v }));
-libraryFilter.subscribe(v => persist("moku-store", { ...loadPersisted(), libraryFilter: v }));
-history.subscribe(v     => persist("moku-store", { ...loadPersisted(), history: v }));
-readingStats.subscribe(v => persist("moku-store", { ...loadPersisted(), readingStats: v }));
-settings.subscribe(v    => persist("moku-store", { ...loadPersisted(), settings: v }));