From deb8a5ee0277d3741c2509add35a31e1ca5efbdf Mon Sep 17 00:00:00 2001
From: Youwes09 <yuvi.shen@outlook.com>
Date: Thu, 19 Mar 2026 21:20:33 -0500
Subject: [PATCH] Chore: Patched Library Completed & Added Home-Page

---
 src/components/layout/History.svelte      | 323 ++++++++++
 src/components/layout/Layout.svelte       |  21 +-
 src/components/layout/Sidebar.svelte      |  58 +-
 src/components/pages/Discover.svelte      | 461 ++++++++++++++
 src/components/pages/Explore.svelte       |   1 -
 src/components/pages/Home.svelte          | 698 ++++++++++++++++++++++
 src/components/pages/Library.svelte       | 174 +++---
 src/components/pages/SeriesDetail.svelte  |  18 +-
 src/components/reader/Reader.svelte       |  41 +-
 src/components/search/Search.svelte       |  44 +-
 src/components/settings/Settings.svelte   | 176 ++++++
 src/components/shared/MangaPreview.svelte |   8 +-
 src/store/index.ts                        | 249 ++++++--
 13 files changed, 2073 insertions(+), 199 deletions(-)
 create mode 100644 src/components/layout/History.svelte
 create mode 100644 src/components/pages/Discover.svelte
 delete mode 100644 src/components/pages/Explore.svelte
 create mode 100644 src/components/pages/Home.svelte

diff --git a/src/components/layout/History.svelte b/src/components/layout/History.svelte
new file mode 100644
index 0000000..1b0b1b6
--- /dev/null
+++ b/src/components/layout/History.svelte
@@ -0,0 +1,323 @@
+<script lang="ts">
+  import { ClockCounterClockwise, Trash, MagnifyingGlass, Play, Books, Fire, BookOpen, Clock, TrendUp } from "phosphor-svelte";
+  import { thumbUrl } from "../../lib/client";
+  import { history, readingStats, clearHistory, activeManga, activeChapterList, openReader } from "../../store";
+  import type { HistoryEntry } from "../../store";
+
+  let search         = "";
+  let confirmClear   = false;
+
+  // ── Helpers ───────────────────────────────────────────────────────────────────
+  function timeAgo(ts: number): string {
+    const diff = Date.now() - ts, m = Math.floor(diff / 60000);
+    if (m < 1)  return "Just now";
+    if (m < 60) return `${m}m ago`;
+    const h = Math.floor(m / 60);
+    if (h < 24) return `${h}h ago`;
+    const d = Math.floor(h / 24);
+    if (d < 7)  return `${d}d ago`;
+    return new Date(ts).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  }
+
+  function dayLabel(ts: number): string {
+    const d = new Date(ts), now = new Date();
+    if (d.toDateString() === now.toDateString()) return "Today";
+    const yest = new Date(now); yest.setDate(now.getDate() - 1);
+    if (d.toDateString() === yest.toDateString()) return "Yesterday";
+    return d.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" });
+  }
+
+  function formatReadTime(m: number): string {
+    if (m < 1)  return "< 1 min";
+    if (m < 60) return `${m} min`;
+    const h = Math.floor(m / 60), r = m % 60;
+    return r === 0 ? `${h}h` : `${h}h ${r}m`;
+  }
+
+  // ── Session grouping — collapses rapid same-manga reads ───────────────────────
+  const SESSION_GAP_MS = 30 * 60 * 1000;
+
+  interface Session {
+    mangaId: number; mangaTitle: string; thumbnailUrl: string;
+    latestChapterId: number; latestChapterName: string; latestPageNumber: number;
+    firstChapterName: string; chapterCount: number; readAt: number;
+  }
+
+  function buildSessions(entries: HistoryEntry[]): Session[] {
+    if (!entries.length) return [];
+    const sessions: Session[] = [];
+    let i = 0;
+    while (i < entries.length) {
+      const anchor = entries[i];
+      const group: HistoryEntry[] = [anchor];
+      let j = i + 1;
+      while (j < entries.length) {
+        const next = entries[j];
+        if (next.mangaId === anchor.mangaId && anchor.readAt - next.readAt <= SESSION_GAP_MS) { group.push(next); j++; }
+        else break;
+      }
+      const latest = group[0], oldest = group[group.length - 1];
+      sessions.push({
+        mangaId: latest.mangaId, mangaTitle: latest.mangaTitle, thumbnailUrl: latest.thumbnailUrl,
+        latestChapterId: latest.chapterId, latestChapterName: latest.chapterName,
+        latestPageNumber: latest.pageNumber, firstChapterName: oldest.chapterName,
+        chapterCount: group.length, readAt: latest.readAt,
+      });
+      i = j;
+    }
+    return sessions;
+  }
+
+  $: filtered = search.trim()
+    ? $history.filter(e => e.mangaTitle.toLowerCase().includes(search.toLowerCase()) || e.chapterName.toLowerCase().includes(search.toLowerCase()))
+    : $history;
+
+  $: sessions = buildSessions(filtered);
+
+  $: groups = (() => {
+    const map = new Map<string, Session[]>();
+    for (const s of sessions) {
+      const l = dayLabel(s.readAt);
+      if (!map.has(l)) map.set(l, []);
+      map.get(l)!.push(s);
+    }
+    return Array.from(map.entries()).map(([label, items]) => ({ label, items }));
+  })();
+
+  function resume(session: Session) {
+    const ch = $activeChapterList.find(c => c.id === session.latestChapterId);
+    if (ch && $activeChapterList.length > 0) openReader(ch, $activeChapterList);
+    else activeManga.set({ id: session.mangaId, title: session.mangaTitle, thumbnailUrl: session.thumbnailUrl } as any);
+  }
+
+  function handleClear() {
+    if (!confirmClear) { confirmClear = true; setTimeout(() => confirmClear = false, 3000); return; }
+    clearHistory(); confirmClear = false;
+  }
+</script>
+
+<div class="root">
+
+  <!-- ── Header ──────────────────────────────────────────────────────────────── -->
+  <div class="page-header">
+    <span class="heading">History</span>
+    <div class="header-right">
+      <div class="search-wrap">
+        <MagnifyingGlass size={12} class="search-icon" weight="light" />
+        <input class="search" placeholder="Search history…" bind:value={search} />
+        {#if search}<button class="search-clear" on:click={() => search = ""}>×</button>{/if}
+      </div>
+      {#if $history.length > 0}
+        <button class="clear-btn" class:confirm={confirmClear} on:click={handleClear}
+          title={confirmClear ? "Click again to confirm" : "Clear history feed"}>
+          <Trash size={14} weight="light" />
+          {#if confirmClear}<span class="clear-label">Confirm?</span>{/if}
+        </button>
+      {/if}
+    </div>
+  </div>
+
+  <!-- ── Persistent stats bar — never cleared ────────────────────────────────── -->
+  {#if $readingStats.totalChaptersRead > 0}
+    <div class="stats-bar">
+      <div class="stat-group">
+        <Fire size={13} weight="fill" class="stat-fire" />
+        <span class="stat-val accent">{$readingStats.currentStreakDays}</span>
+        <span class="stat-label">day streak</span>
+      </div>
+      <div class="stat-sep"></div>
+      <div class="stat-group">
+        <BookOpen size={13} weight="light" class="stat-icon-neutral" />
+        <span class="stat-val">{$readingStats.totalChaptersRead}</span>
+        <span class="stat-label">chapters</span>
+      </div>
+      <div class="stat-sep"></div>
+      <div class="stat-group">
+        <Clock size={13} weight="light" class="stat-icon-neutral" />
+        <span class="stat-val">{formatReadTime($readingStats.totalMinutesRead)}</span>
+        <span class="stat-label">read time</span>
+      </div>
+      <div class="stat-sep"></div>
+      <div class="stat-group">
+        <TrendUp size={13} weight="light" class="stat-icon-neutral" />
+        <span class="stat-val">{$readingStats.totalMangaRead}</span>
+        <span class="stat-label">series</span>
+      </div>
+      <div class="stat-sep"></div>
+      <div class="stat-group">
+        <span class="stat-val muted">{$readingStats.longestStreakDays}d</span>
+        <span class="stat-label">best streak</span>
+      </div>
+      <span class="stats-note">Stats are preserved when you clear the feed</span>
+    </div>
+  {/if}
+
+  <!-- ── Empty states ────────────────────────────────────────────────────────── -->
+  {#if $history.length === 0}
+    <div class="empty">
+      <ClockCounterClockwise size={32} weight="light" class="empty-icon" />
+      <p class="empty-text">No reading history</p>
+      <p class="empty-hint">Chapters you read will appear here</p>
+    </div>
+  {:else if sessions.length === 0}
+    <div class="empty">
+      <Books size={28} weight="light" class="empty-icon" />
+      <p class="empty-text">No results for "{search}"</p>
+    </div>
+
+  <!-- ── Timeline ────────────────────────────────────────────────────────────── -->
+  {:else}
+    <div class="timeline">
+      {#each groups as { label, items }}
+        <div class="day-group">
+          <div class="day-label-row">
+            <span class="day-label">{label}</span>
+            <div class="day-line"></div>
+          </div>
+          <div class="session-list">
+            {#each items as session (session.latestChapterId)}
+              <button class="session-row" on:click={() => resume(session)}>
+
+                <!-- Cover -->
+                <div class="thumb-wrap">
+                  <img src={thumbUrl(session.thumbnailUrl)} alt={session.mangaTitle} class="thumb" />
+                  {#if session.chapterCount > 1}
+                    <span class="session-count">{session.chapterCount}</span>
+                  {/if}
+                </div>
+
+                <!-- Info -->
+                <div class="session-info">
+                  <span class="session-title">{session.mangaTitle}</span>
+                  <span class="session-chapter">
+                    {#if session.chapterCount > 1}
+                      {session.firstChapterName}
+                      <span class="ch-arrow">→</span>
+                      {session.latestChapterName}
+                    {:else}
+                      {session.latestChapterName}
+                      {#if session.latestPageNumber > 1}
+                        <span class="ch-page">p.{session.latestPageNumber}</span>
+                      {/if}
+                    {/if}
+                  </span>
+                </div>
+
+                <!-- Time + play -->
+                <span class="session-time">{timeAgo(session.readAt)}</span>
+                <div class="play-pill">
+                  <Play size={10} weight="fill" /> Resume
+                </div>
+
+              </button>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+
+</div>
+
+<style>
+  .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
+
+  /* ── Header ──────────────────────────────────────────────────────────────── */
+  .page-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
+  }
+  .heading { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
+  .header-right { display: flex; align-items: center; gap: var(--sp-2); }
+
+  .search-wrap { position: relative; display: flex; align-items: center; }
+  .search-wrap :global(.search-icon) { position: absolute; left: 9px; color: var(--text-faint); pointer-events: none; }
+  .search { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 5px 26px 5px 26px; color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none; transition: border-color var(--t-base); }
+  .search::placeholder { color: var(--text-faint); }
+  .search:focus { border-color: var(--border-strong); }
+  .search-clear { position: absolute; right: 7px; color: var(--text-faint); font-size: 14px; line-height: 1; background: none; border: none; cursor: pointer; padding: 2px; transition: color var(--t-base); }
+  .search-clear:hover { color: var(--text-muted); }
+
+  .clear-btn {
+    display: flex; align-items: center; gap: 5px;
+    height: 28px; padding: 0 var(--sp-2); border-radius: var(--radius-md);
+    color: var(--text-faint); background: none; border: 1px solid transparent;
+    cursor: pointer; font-family: var(--font-ui); font-size: var(--text-2xs);
+    letter-spacing: var(--tracking-wide);
+    transition: color var(--t-base), background var(--t-base), border-color var(--t-base);
+  }
+  .clear-btn:hover { color: var(--color-error); background: var(--color-error-bg); }
+  .clear-btn.confirm { color: var(--color-error); background: var(--color-error-bg); border-color: var(--color-error); }
+  .clear-label { font-size: var(--text-2xs); }
+
+  /* ── Stats bar — persisted, never clears ────────────────────────────────── */
+  .stats-bar {
+    display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
+    padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--border-dim);
+    background: var(--bg-raised); flex-shrink: 0;
+  }
+  .stat-group { display: flex; align-items: center; gap: 5px; }
+  .stat-sep { width: 1px; height: 14px; background: var(--border-dim); flex-shrink: 0; }
+  :global(.stat-fire) { color: #f97316; }
+  :global(.stat-icon-neutral) { color: var(--text-faint); }
+  .stat-val { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
+  .stat-val.accent { color: var(--accent-fg); }
+  .stat-val.muted { color: var(--text-faint); }
+  .stat-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .stats-note { margin-left: auto; font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); opacity: 0.5; letter-spacing: var(--tracking-wide); font-style: italic; }
+
+  /* ── Timeline ────────────────────────────────────────────────────────────── */
+  .timeline { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-6); }
+
+  .day-group { margin-bottom: var(--sp-5); }
+  .day-label-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
+  .day-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
+  .day-line { flex: 1; height: 1px; background: var(--border-dim); }
+
+  .session-list { display: flex; flex-direction: column; gap: 2px; }
+
+  .session-row {
+    display: flex; align-items: center; gap: var(--sp-3);
+    width: 100%; padding: 8px var(--sp-3); border-radius: var(--radius-md);
+    border: 1px solid transparent; background: none; text-align: left; cursor: pointer;
+    transition: background var(--t-fast), border-color var(--t-fast);
+  }
+  .session-row:hover { background: var(--bg-raised); border-color: var(--border-dim); }
+  .session-row:hover .play-pill { opacity: 1; transform: translateX(0); }
+
+  /* Thumb */
+  .thumb-wrap { position: relative; flex-shrink: 0; }
+  .thumb { width: 38px; height: 54px; border-radius: var(--radius-sm); object-fit: cover; display: block; background: var(--bg-raised); border: 1px solid var(--border-dim); }
+  .session-count {
+    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 */
+  .session-info { flex: 1; display: flex; flex-direction: column; gap: 3px; overflow: hidden; min-width: 0; }
+  .session-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .session-chapter { font-size: var(--text-xs); color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-1); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .ch-arrow { color: var(--text-faint); font-size: 10px; flex-shrink: 0; }
+  .ch-page { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); flex-shrink: 0; }
+
+  /* Time & play */
+  .session-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; }
+  .play-pill {
+    display: flex; align-items: center; gap: 4px; flex-shrink: 0;
+    font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
+    color: var(--accent-fg); background: var(--accent-muted); border: 1px solid var(--accent-dim);
+    padding: 3px 8px; border-radius: var(--radius-full);
+    opacity: 0; transform: translateX(4px);
+    transition: opacity var(--t-base), transform var(--t-base);
+  }
+
+  /* ── Empty ───────────────────────────────────────────────────────────────── */
+  .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/layout/Layout.svelte b/src/components/layout/Layout.svelte
index 40f9582..0b84ef7 100644
--- a/src/components/layout/Layout.svelte
+++ b/src/components/layout/Layout.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
   import { navPage, activeManga } from "../../store";
-  import Sidebar    from "./Sidebar.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 "../history/History.svelte";
-  import Search     from "../search/Search.svelte";
-  import Explore    from "../pages/Explore.svelte";
-  import Downloads  from "../downloads/Downloads.svelte";
-  import Extensions from "../pages/Extensions.svelte";
+  import History     from "../history/History.svelte";
+  import Search      from "../search/Search.svelte";
+  import Discover    from "../pages/Discover.svelte";
+  import Downloads   from "../downloads/Downloads.svelte";
+  import Extensions  from "../pages/Extensions.svelte";
 </script>
 
 <div class="root">
@@ -15,6 +16,8 @@
   <main class="main">
     {#if $activeManga}
       <SeriesDetail />
+    {:else if $navPage === "home"}
+      <Home />
     {:else if $navPage === "library"}
       <Library />
     {:else if $navPage === "search"}
@@ -22,13 +25,13 @@
     {:else if $navPage === "history"}
       <History />
     {:else if $navPage === "explore" || $navPage === "sources"}
-      <Explore />
+      <Discover />
     {:else if $navPage === "downloads"}
       <Downloads />
     {:else if $navPage === "extensions"}
       <Extensions />
     {:else}
-      <Library />
+      <Home />
     {/if}
   </main>
 </div>
diff --git a/src/components/layout/Sidebar.svelte b/src/components/layout/Sidebar.svelte
index 1a2dd4c..67f5f08 100644
--- a/src/components/layout/Sidebar.svelte
+++ b/src/components/layout/Sidebar.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
-  import { Books, MagnifyingGlass, ClockCounterClockwise, Compass, DownloadSimple, PuzzlePiece, GearSix } from "phosphor-svelte";
+  import { House, Books, MagnifyingGlass, ClockCounterClockwise, Compass, DownloadSimple, PuzzlePiece, GearSix } from "phosphor-svelte";
   import { navPage, activeManga, activeSource, libraryFilter, genreFilter, settingsOpen } from "../../store";
   import type { NavPage } from "../../store";
 
   const TABS: { id: NavPage; label: string; icon: any }[] = [
+    { id: "home",       label: "Home",       icon: House },
     { id: "library",    label: "Library",    icon: Books },
     { id: "search",     label: "Search",     icon: MagnifyingGlass },
     { id: "history",    label: "History",    icon: ClockCounterClockwise },
-    { id: "explore",    label: "Explore",    icon: Compass },
+    { id: "explore",    label: "Discover",   icon: Compass },
     { id: "downloads",  label: "Downloads",  icon: DownloadSimple },
     { id: "extensions", label: "Extensions", icon: PuzzlePiece },
   ];
@@ -20,15 +21,16 @@
   }
 
   function goHome() {
-    navPage.set("library");
+    navPage.set("home");
     activeSource.set(null);
     activeManga.set(null);
     libraryFilter.set("library");
+    genreFilter.set("");
   }
 </script>
 
 <aside class="root">
-  <button class="logo" on:click={goHome} title="Go to Library" aria-label="Go to Library">
+  <button class="logo" on:click={goHome} title="Home" aria-label="Go to Home">
     <div class="logo-icon"></div>
   </button>
   <nav class="nav">
@@ -48,19 +50,13 @@
 
 <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;
+    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;
+    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;
@@ -69,27 +65,22 @@
   .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);
+    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;
+    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;
+    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;
+    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); }
@@ -99,16 +90,13 @@
   .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);
+    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;
+    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); }
diff --git a/src/components/pages/Discover.svelte b/src/components/pages/Discover.svelte
new file mode 100644
index 0000000..afa57f2
--- /dev/null
+++ b/src/components/pages/Discover.svelte
@@ -0,0 +1,461 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import { BookmarkSimple, FolderSimplePlus, Folder, Sparkle } from "phosphor-svelte";
+  import { gql, thumbUrl } from "../../lib/client";
+  import { GET_SOURCES, FETCH_SOURCE_MANGA, UPDATE_MANGA } from "../../lib/queries";
+  import { cache, CACHE_KEYS } from "../../lib/cache";
+  import { dedupeSources, dedupeMangaByTitle, dedupeMangaById } from "../../lib/util";
+  import { settings, previewManga, activeSource, addFolder, assignMangaToFolder } from "../../store";
+  import type { Manga, Source } from "../../lib/types";
+  import ContextMenu from "../shared/ContextMenu.svelte";
+  import type { MenuEntry } from "../shared/ContextMenu.svelte";
+  import SourceBrowse from "../sources/SourceBrowse.svelte";
+
+  // ── Config ────────────────────────────────────────────────────────────────────
+  const GENRE_TABS      = ["All", "Action", "Romance", "Fantasy", "Comedy", "Drama", "Horror", "Sci-Fi", "Adventure", "Thriller"];
+  const GRID_LIMIT      = 60;    // max rendered per tab
+  const LOCAL_THRESHOLD = 20;    // fan out to sources if local results below this
+  const CONCURRENCY     = 4;     // parallel source requests — kept conservative to not saturate connections
+  const BATCH_INTERVAL  = 400;   // ms between DOM updates during background source fan-out
+
+  const EXPLORE_ALL_MANGA = `
+    query ExploreAllManga {
+      mangas(orderBy: IN_LIBRARY_AT, orderByType: DESC) {
+        nodes { id title thumbnailUrl inLibrary genre status source { id displayName } }
+      }
+    }
+  `;
+  const MANGAS_BY_GENRE = `
+    query MangasByGenre($genre: String!, $first: Int) {
+      mangas(
+        filter: { genre: { includesInsensitive: $genre } }
+        first: $first orderBy: IN_LIBRARY_AT orderByType: DESC
+      ) { nodes { id title thumbnailUrl inLibrary genre status source { id displayName } } }
+    }
+  `;
+
+  // ── State ─────────────────────────────────────────────────────────────────────
+  let allManga:    Manga[]  = [];  // local library — loaded once, never triggers lag
+  let allSources:  Source[] = [];  // all deduped sources — loaded once
+  let loadingLib   = true;
+  let loadError    = false;
+
+  // Per-genre result map. Keyed by genre string.
+  // "All" key → local library deduped by title
+  // Each tab key → local + background source results, deduped id+title
+  let genreResults  = new Map<string, Manga[]>();
+  let genreLoading  = false;  // true only during the initial local fetch for a new tab
+  let currentGenre  = "All";
+  let genreAbort: AbortController | null = null;
+
+  // batch timer handle for background source fan-out
+  let batchTimer: ReturnType<typeof setInterval> | null = null;
+  // accumulator: source results collected between batches
+  let batchAccum   = new Map<string, Manga[]>(); // genre → pending mangas
+
+  // Context menu
+  let ctx: { x: number; y: number; manga: Manga } | null = null;
+
+  // ── Derived ───────────────────────────────────────────────────────────────────
+  $: visibleGrid = genreResults.get(currentGenre) ?? [];
+  $: isLoading   = genreLoading || (currentGenre === "All" && loadingLib);
+
+  // ── Dedup helper — always apply id first then title ───────────────────────────
+  function dedup(items: Manga[]): Manga[] {
+    return dedupeMangaByTitle(dedupeMangaById(items));
+  }
+
+  // ── Concurrent fan-out — conservative concurrency keeps connections free ──────
+  async function runConcurrent<T>(items: T[], fn: (i: T) => Promise<void>, signal: AbortSignal) {
+    let i = 0;
+    const worker = async () => {
+      while (i < items.length) {
+        if (signal.aborted) return;
+        await fn(items[i++]).catch(() => {});
+      }
+    };
+    await Promise.all(Array.from({ length: Math.min(CONCURRENCY, items.length) }, worker));
+  }
+
+  // ── Batched DOM flush ─────────────────────────────────────────────────────────
+  // Source fan-out collects results in batchAccum. A timer fires every BATCH_INTERVAL
+  // ms and flushes them into genreResults in one shot — preventing a Svelte re-render
+  // per-source and keeping the grid smooth.
+  function startBatchFlush() {
+    if (batchTimer) return;
+    batchTimer = setInterval(() => {
+      if (batchAccum.size === 0) return;
+      for (const [genre, incoming] of batchAccum) {
+        const current = genreResults.get(genre) ?? [];
+        genreResults.set(genre, dedup([...current, ...incoming]).slice(0, GRID_LIMIT));
+      }
+      batchAccum.clear();
+      genreResults = new Map(genreResults); // single Svelte reactivity trigger
+    }, BATCH_INTERVAL);
+  }
+
+  function stopBatchFlush() {
+    if (batchTimer) { clearInterval(batchTimer); batchTimer = null; }
+    // Final flush of anything remaining
+    if (batchAccum.size > 0) {
+      for (const [genre, incoming] of batchAccum) {
+        const current = genreResults.get(genre) ?? [];
+        genreResults.set(genre, dedup([...current, ...incoming]).slice(0, GRID_LIMIT));
+      }
+      batchAccum.clear();
+      genreResults = new Map(genreResults);
+    }
+  }
+
+  // Push source results into the accumulator (never touches the DOM directly)
+  function accumulate(genre: string, mangas: Manga[]) {
+    const existing = batchAccum.get(genre) ?? [];
+    batchAccum.set(genre, [...existing, ...mangas]);
+  }
+
+  // ── Background source fan-out for a genre ────────────────────────────────────
+  // Runs entirely in the background. Results appear in batches via batchAccum.
+  // Does NOT set genreLoading = true — the local result is already showing.
+  async function fanOutSources(genre: string, ctrl: AbortController) {
+    if (!allSources.length) return;
+    const lang = $settings.preferredExtensionLang || "en";
+    const srcs = dedupeSources(allSources, lang);
+
+    startBatchFlush();
+
+    await runConcurrent(srcs, async src => {
+      if (ctrl.signal.aborted) return;
+      const pageKey = CACHE_KEYS.sourceMangaPage(src.id, "SEARCH", 1, [genre]);
+      const result  = await cache.get<{ mangas: Manga[]; hasNextPage: boolean }>(
+        pageKey,
+        () => gql<{ fetchSourceManga: { mangas: Manga[]; hasNextPage: boolean } }>(
+          FETCH_SOURCE_MANGA, { source: src.id, type: "SEARCH", page: 1, query: genre }, ctrl.signal
+        ).then(d => d.fetchSourceManga),
+        5 * 60 * 1000, // 5-min TTL — results are stable enough to cache
+      ).catch(() => null);
+
+      if (!result || ctrl.signal.aborted) return;
+
+      // Only accumulate results that actually match the genre (client-side AND check)
+      const matching = result.mangas.filter(m =>
+        (m.genre ?? []).some(g => g.toLowerCase() === genre.toLowerCase())
+          || result.mangas.length <= 5 // source returns few results, trust them
+      );
+
+      accumulate(genre, matching.length > 0 ? matching : result.mangas);
+    }, ctrl.signal);
+
+    if (!ctrl.signal.aborted) stopBatchFlush();
+  }
+
+  // ── Tab switch ───────────────────────────────────────────────────────────────
+  // 1. Show local results immediately (no spinner if already cached)
+  // 2. If local < LOCAL_THRESHOLD, kick off background fan-out silently
+  async function switchGenre(genre: string) {
+    if (currentGenre === genre) return;
+
+    // Abort any in-flight fan-out for the previous tab
+    genreAbort?.abort();
+    stopBatchFlush();
+
+    currentGenre = genre;
+
+    if (genre === "All") {
+      // "All" is just the deduped local library — no network needed
+      genreResults.set("All", dedup(allManga).slice(0, GRID_LIMIT));
+      genreResults = new Map(genreResults);
+      return;
+    }
+
+    // If we already have a fully-populated cache for this genre, show it instantly
+    const cached = genreResults.get(genre);
+    if (cached && cached.length >= LOCAL_THRESHOLD) return;
+
+    // Fetch local results (fast — single DB query)
+    genreLoading = true;
+    const ctrl = new AbortController();
+    genreAbort = ctrl;
+
+    try {
+      const localData = await cache.get(CACHE_KEYS.GENRE(genre), () =>
+        gql<{ mangas: { nodes: Manga[] } }>(MANGAS_BY_GENRE, { genre, first: GRID_LIMIT }, ctrl.signal)
+          .then(d => d.mangas.nodes)
+      );
+      if (ctrl.signal.aborted) return;
+
+      const local = dedup(localData);
+      genreResults.set(genre, local.slice(0, GRID_LIMIT));
+      genreResults = new Map(genreResults);
+      genreLoading = false;
+
+      // If sparse, fan out to sources in the background — no loading state shown
+      if (local.length < LOCAL_THRESHOLD) {
+        fanOutSources(genre, ctrl).catch(() => {}); // fully detached background task
+      }
+    } catch (e: any) {
+      if (e?.name !== "AbortError") console.error(e);
+      if (!ctrl.signal.aborted) genreLoading = false;
+    }
+  }
+
+  // ── Context menu ──────────────────────────────────────────────────────────────
+  function openCtx(e: MouseEvent, m: Manga) {
+    e.preventDefault(); e.stopPropagation();
+    ctx = { x: e.clientX, y: e.clientY, manga: m };
+  }
+  function buildCtxItems(m: Manga): MenuEntry[] {
+    return [
+      {
+        label: m.inLibrary ? "In Library" : "Add to library",
+        icon: BookmarkSimple, disabled: m.inLibrary,
+        onClick: () => gql(UPDATE_MANGA, { id: m.id, inLibrary: true })
+          .then(() => cache.clear(CACHE_KEYS.LIBRARY)).catch(console.error),
+      },
+      ...($settings.folders.length > 0 ? [
+        { separator: true } as MenuEntry,
+        ...$settings.folders.map(f => ({
+          label: f.mangaIds.includes(m.id) ? `✓ ${f.name}` : f.name,
+          icon: Folder,
+          onClick: () => assignMangaToFolder(f.id, m.id),
+        })),
+      ] : []),
+      { separator: true },
+      {
+        label: "New folder & add", icon: FolderSimplePlus,
+        onClick: () => {
+          const n = prompt("Folder name:");
+          if (n?.trim()) { const id = addFolder(n.trim()); assignMangaToFolder(id, m.id); }
+        },
+      },
+    ];
+  }
+
+  // ── Initial load ──────────────────────────────────────────────────────────────
+  // 1. Load local library → populate "All" tab immediately
+  // 2. Load source list in background (needed for genre fan-out, not needed for initial render)
+  function loadAll() {
+    loadingLib = true; loadError = false;
+    const lang = $settings.preferredExtensionLang || "en";
+
+    // Local library — populates "All" tab
+    cache.get(CACHE_KEYS.LIBRARY, () =>
+      gql<{ mangas: { nodes: Manga[] } }>(EXPLORE_ALL_MANGA).then(d => d.mangas.nodes)
+    ).then(m => {
+      allManga = dedupeMangaById(m);
+      genreResults.set("All", dedup(allManga).slice(0, GRID_LIMIT));
+      genreResults = new Map(genreResults);
+    }).catch(e => { console.error(e); loadError = true; })
+      .finally(() => { loadingLib = false; });
+
+    // Source list — loaded silently in background, cached for the session
+    // Not awaited — the grid doesn't depend on this for the initial render
+    cache.get(CACHE_KEYS.SOURCES, () =>
+      gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
+        .then(d => dedupeSources(d.sources.nodes, lang)),
+      Infinity, // pin for session — source list is stable
+    ).then(srcs => {
+      allSources = srcs;
+    }).catch(console.error);
+  }
+
+  onMount(loadAll);
+  onDestroy(() => {
+    genreAbort?.abort();
+    stopBatchFlush();
+  });
+</script>
+
+<!-- ── Source browse passthrough ─────────────────────────────────────────────── -->
+{#if $activeSource}
+  <SourceBrowse />
+{:else}
+  <div class="root">
+
+    <!-- ── Header: page label + genre pill tabs ──────────────────────────────── -->
+    <div class="header">
+      <span class="heading">Discover</span>
+      <div class="tab-strip">
+        {#each GENRE_TABS as tab (tab)}
+          <button
+            class="genre-tab"
+            class:active={currentGenre === tab}
+            on:click={() => switchGenre(tab)}
+          >
+            {#if tab === "All"}<Sparkle size={10} weight="fill" />{/if}
+            {tab}
+          </button>
+        {/each}
+      </div>
+    </div>
+
+    <!-- ── Body ──────────────────────────────────────────────────────────────── -->
+    <div class="body">
+
+      {#if isLoading}
+        <!-- Skeleton — shown only during first local fetch, never during bg fan-out -->
+        <div class="manga-grid">
+          {#each Array(24) as _, i (i)}
+            <div class="card-skeleton"><div class="skeleton cover-area"></div></div>
+          {/each}
+        </div>
+
+      {:else if loadError && visibleGrid.length === 0}
+        <div class="empty">
+          <span>Could not reach Suwayomi</span>
+          <button class="retry-btn" on:click={loadAll}>Retry</button>
+        </div>
+
+      {:else if visibleGrid.length === 0}
+        <div class="empty"><span>Nothing found for "{currentGenre}"</span></div>
+
+      {:else}
+        <div class="manga-grid">
+          {#each visibleGrid as m (m.id)}
+            <button
+              class="manga-card"
+              on:click={() => previewManga.set(m)}
+              on:contextmenu={(e) => openCtx(e, m)}
+            >
+              <div class="cover-wrap">
+                <img
+                  src={thumbUrl(m.thumbnailUrl)} alt={m.title}
+                  class="cover" loading="lazy" decoding="async"
+                />
+                <div class="cover-gradient"></div>
+                {#if m.inLibrary}<span class="lib-badge">Saved</span>{/if}
+                <div class="card-footer">
+                  <p class="card-title">{m.title}</p>
+                  {#if m.source?.displayName}
+                    <p class="card-source">{m.source.displayName}</p>
+                  {/if}
+                </div>
+              </div>
+            </button>
+          {/each}
+        </div>
+      {/if}
+
+    </div>
+  </div>
+{/if}
+
+{#if ctx}
+  <ContextMenu x={ctx.x} y={ctx.y} items={buildCtxItems(ctx.manga)} onClose={() => ctx = null} />
+{/if}
+
+<style>
+  .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
+
+  /* ── Header ──────────────────────────────────────────────────────────────── */
+  .header {
+    display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 0;
+    padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--border-dim);
+    overflow-x: auto; scrollbar-width: none;
+  }
+  .header::-webkit-scrollbar { display: none; }
+  .heading {
+    font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint);
+    letter-spacing: var(--tracking-wider); text-transform: uppercase; flex-shrink: 0;
+  }
+
+  /* Genre pill tabs */
+  .tab-strip { display: flex; gap: var(--sp-1); flex-shrink: 0; }
+  .genre-tab {
+    display: flex; align-items: center; gap: 5px;
+    font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
+    padding: 4px 12px; border-radius: var(--radius-full);
+    border: 1px solid var(--border-dim); background: none; color: var(--text-faint);
+    cursor: pointer; white-space: nowrap;
+    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
+  }
+  .genre-tab:hover { color: var(--text-muted); border-color: var(--border-strong); background: var(--bg-raised); }
+  .genre-tab.active { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
+
+  /* ── Body ────────────────────────────────────────────────────────────────── */
+  .body {
+    flex: 1; overflow-y: auto;
+    padding: var(--sp-4) var(--sp-5) var(--sp-6);
+    /* GPU-accelerated scroll — does NOT promote every card, only the scroll container */
+    will-change: scroll-position;
+    -webkit-overflow-scrolling: touch;
+    contain: layout style;
+  }
+
+  /* ── Grid ────────────────────────────────────────────────────────────────── */
+  .manga-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(clamp(90px, 11vw, 130px), 1fr));
+    gap: var(--sp-2);
+    align-content: start;
+    /* Isolate the grid from the rest of the layout — prevents full-page reflow on update */
+    contain: layout style;
+  }
+
+  /* ── Card ────────────────────────────────────────────────────────────────── */
+  .manga-card {
+    background: none; border: none; padding: 0; cursor: pointer; text-align: left;
+    /* NO will-change here — only promote on actual hover to avoid 60+ simultaneous GPU layers */
+  }
+  .manga-card:hover .cover { filter: brightness(1.08) saturate(1.05); transform: scale(1.02); }
+  .manga-card:hover .card-title { color: #fff; }
+  /* Promote only the hovered card to its own GPU layer */
+  .manga-card:hover { will-change: transform; }
+
+  .cover-wrap {
+    position: relative; aspect-ratio: 2/3; overflow: hidden;
+    border-radius: var(--radius-md); background: var(--bg-raised);
+    border: 1px solid var(--border-dim);
+    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+  }
+  .cover {
+    width: 100%; height: 100%; object-fit: cover; display: block;
+    transition: filter 0.15s ease, transform 0.15s ease;
+    /* will-change removed — only the parent card gets it on hover */
+  }
+  .cover-gradient {
+    position: absolute; inset: 0;
+    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.15) 50%, transparent 72%);
+    pointer-events: none;
+  }
+  .lib-badge {
+    position: absolute; top: var(--sp-1); right: var(--sp-1);
+    font-family: var(--font-ui); font-size: 9px; letter-spacing: var(--tracking-wide);
+    text-transform: uppercase; background: var(--accent-muted); color: var(--accent-fg);
+    border: 1px solid var(--accent-dim); padding: 1px 5px; border-radius: var(--radius-sm);
+  }
+  .card-footer {
+    position: absolute; bottom: 0; left: 0; right: 0;
+    padding: var(--sp-2); pointer-events: none;
+  }
+  .card-title {
+    font-size: var(--text-xs); font-weight: var(--weight-medium);
+    color: rgba(255,255,255,0.92); line-height: var(--leading-snug);
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
+    transition: color var(--t-base);
+  }
+  .card-source {
+    font-family: var(--font-ui); font-size: 9px; color: rgba(255,255,255,0.45);
+    letter-spacing: var(--tracking-wide); margin-top: 1px;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+
+  /* ── Skeleton ────────────────────────────────────────────────────────────── */
+  .card-skeleton { padding: 0; }
+  .cover-area { aspect-ratio: 2/3; border-radius: var(--radius-md); }
+
+  /* ── Empty / error ───────────────────────────────────────────────────────── */
+  .empty {
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: var(--sp-3); padding: var(--sp-10) var(--sp-6);
+    color: var(--text-faint); font-family: var(--font-ui); font-size: var(--text-xs);
+    letter-spacing: var(--tracking-wide);
+  }
+  .retry-btn {
+    padding: 6px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-dim);
+    background: var(--bg-raised); color: var(--text-muted); cursor: pointer;
+    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
+  }
+
+  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
+</style>
diff --git a/src/components/pages/Explore.svelte b/src/components/pages/Explore.svelte
deleted file mode 100644
index 1288caa..0000000
--- a/src/components/pages/Explore.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<div>Explore.svelte</div>
diff --git a/src/components/pages/Home.svelte b/src/components/pages/Home.svelte
new file mode 100644
index 0000000..5f82e3a
--- /dev/null
+++ b/src/components/pages/Home.svelte
@@ -0,0 +1,698 @@
+<script lang="ts">
+  import { onMount, onDestroy } from "svelte";
+  import {
+    Play, ArrowRight, ArrowLeft, BookOpen, Clock, Fire, TrendUp,
+    CalendarBlank, CheckCircle, Star, PushPin, X as XIcon,
+    MagnifyingGlass,
+  } from "phosphor-svelte";
+  import { gql, thumbUrl } from "../../lib/client";
+  import { GET_LIBRARY, GET_MANGA } from "../../lib/queries";
+  import { cache, CACHE_KEYS } from "../../lib/cache";
+  import {
+    history, readingStats, settings, activeManga, navPage,
+    previewManga, openReader, activeChapterList,
+    COMPLETED_FOLDER_ID, setHeroSlot, updateSettings,
+  } from "../../store";
+  import type { HistoryEntry } from "../../store";
+  import type { Manga } 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";
+    if (m < 60) return `${m}m ago`;
+    const h = Math.floor(m / 60);
+    if (h < 24) return `${h}h ago`;
+    const d = Math.floor(h / 24);
+    if (d < 7)  return `${d}d ago`;
+    return new Date(ts).toLocaleDateString("en-US", { month: "short", day: "numeric" });
+  }
+  function formatReadTime(m: number): string {
+    if (m < 60) return `${m}m`;
+    const h = Math.floor(m / 60), r = m % 60;
+    return r === 0 ? `${h}h` : `${h}h ${r}m`;
+  }
+
+  // ── Library data — loaded once ────────────────────────────────────────────────
+  let libraryManga: Manga[] = [];
+  let loadingLibrary = true;
+  let searchQuery = "";
+
+  onMount(() => {
+    cache.get(CACHE_KEYS.LIBRARY, () =>
+      gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY).then(d => d.mangas.nodes)
+    ).then(m => { libraryManga = m; })
+     .catch(console.error)
+     .finally(() => loadingLibrary = false);
+  });
+
+  // ── Continue reading — deduped by manga ───────────────────────────────────────
+  $: continueReading = (() => {
+    const seen = new Set<number>();
+    const out: HistoryEntry[] = [];
+    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 ────────────────────────────────────────────────────────────────
+  // Slot 0: always auto (first continue-reading entry, not pinnable)
+  // Slots 1-3: pinned mangaId OR auto (next continue-reading entries)
+  const TOTAL_SLOTS = 4;
+
+  interface HeroSlot {
+    kind: "continue" | "pinned" | "empty";
+    entry?: HistoryEntry;           // for "continue"
+    manga?: Manga;                  // for "pinned"
+    slotIndex: number;
+  }
+
+  $: resolvedSlots = (() => {
+    const pins = $settings.heroSlots ?? [null, null, null, null];
+    const slots: HeroSlot[] = [];
+
+    // Slot 0 — always continue reading
+    const first = continueReading[0];
+    slots.push(first
+      ? { kind: "continue", entry: first, slotIndex: 0 }
+      : { kind: "empty", slotIndex: 0 }
+    );
+
+    // Slots 1-3
+    let historyIdx = 1; // which continueReading entry to use for auto
+    for (let i = 1; i < TOTAL_SLOTS; i++) {
+      const pinId = pins[i];
+      if (pinId !== null && pinId !== undefined) {
+        const manga = libraryManga.find(m => m.id === pinId);
+        if (manga) { slots.push({ kind: "pinned", manga, slotIndex: i }); continue; }
+      }
+      // Auto — use next recent history entry
+      const entry = continueReading[historyIdx];
+      historyIdx++;
+      slots.push(entry
+        ? { kind: "continue", entry, slotIndex: i }
+        : { kind: "empty", slotIndex: i }
+      );
+    }
+    return slots;
+  })();
+
+  // ── Active hero index ─────────────────────────────────────────────────────────
+  let activeIdx = 0;
+  $: activeSlot = resolvedSlots[activeIdx];
+
+  // ── Manga detail for active pinned slot ───────────────────────────────────────
+  // For "continue" slots we have thumbnailUrl from history.
+  // For "pinned" slots we have the full Manga object.
+  $: 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;
+
+  function cycleNext() { activeIdx = (activeIdx + 1) % TOTAL_SLOTS; }
+  function cyclePrev() { activeIdx = (activeIdx - 1 + TOTAL_SLOTS) % TOTAL_SLOTS; }
+  function goToSlot(i: number) { activeIdx = i; }
+
+  // Keyboard: left/right arrow keys when no modal is open
+  function onKey(e: KeyboardEvent) {
+    if (e.target !== document.body && !(e.target instanceof HTMLElement && e.target.closest(".hero-section"))) return;
+    if (e.key === "ArrowRight") cycleNext();
+    if (e.key === "ArrowLeft")  cyclePrev();
+  }
+  onMount(() => window.addEventListener("keydown", onKey));
+  onDestroy(() => window.removeEventListener("keydown", onKey));
+
+  // ── Slot picker (pin / unpin) ─────────────────────────────────────────────────
+  let pickerOpen = false;
+  let pickerSlotIndex: 1 | 2 | 3 | null = null;
+  let pickerSearch = "";
+
+  $: pickerResults = pickerSearch.trim()
+    ? libraryManga.filter(m => m.title.toLowerCase().includes(pickerSearch.toLowerCase())).slice(0, 20)
+    : libraryManga.slice(0, 20);
+
+  function openPicker(slotIndex: 1 | 2 | 3) {
+    pickerSlotIndex = slotIndex;
+    pickerOpen = true;
+    pickerSearch = "";
+  }
+  function closePicker() { pickerOpen = false; pickerSlotIndex = null; }
+
+  function pinManga(manga: Manga) {
+    if (pickerSlotIndex === null) return;
+    setHeroSlot(pickerSlotIndex, manga.id);
+    closePicker();
+  }
+  function unpinSlot(i: 1 | 2 | 3) {
+    setHeroSlot(i, null);
+  }
+
+  function resumeActive() {
+    if (!heroEntry && heroManga) {
+      activeManga.set(heroManga);
+      return;
+    }
+    if (!heroEntry) return;
+    const ch = $activeChapterList.find(c => c.id === heroEntry!.chapterId);
+    if (ch && $activeChapterList.length > 0) openReader(ch, $activeChapterList);
+    else activeManga.set({ id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any);
+  }
+
+  // ── Recently completed ────────────────────────────────────────────────────────
+  $: completedIds = $settings.folders.find(f => f.id === COMPLETED_FOLDER_ID)?.mangaIds ?? [];
+  $: completedManga = completedIds.length > 0
+    ? libraryManga.filter(m => completedIds.includes(m.id)).slice(0, 12)
+    : [];
+
+  // ── Recent activity ───────────────────────────────────────────────────────────
+  $: recentHistory = $history.slice(0, 8);
+
+  // ── Stats ─────────────────────────────────────────────────────────────────────
+  $: stats    = $readingStats;
+  $: hasStats = stats.totalChaptersRead > 0;
+
+  function handleRowWheel(e: WheelEvent) {
+    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
+    const el = e.currentTarget as HTMLElement;
+    e.stopPropagation(); el.scrollLeft += e.deltaY;
+  }
+</script>
+
+<div class="root">
+  <div class="page-header">
+    <span class="heading">Home</span>
+  </div>
+
+  <div class="body">
+
+    <!-- ── Hero section ───────────────────────────────────────────────────────── -->
+    <div class="hero-section" tabindex="-1">
+      <div class="hero-stage">
+
+        <!-- Cover backdrop (blurred) -->
+        {#if heroThumb}
+          <div class="hero-backdrop" style="background-image:url({heroThumb})"></div>
+        {:else}
+          <div class="hero-backdrop hero-backdrop-empty"></div>
+        {/if}
+        <div class="hero-scrim"></div>
+
+        <!-- Left: Cover art -->
+        <div class="hero-cover-col">
+          {#if heroThumb}
+            <img src={heroThumb} alt={heroTitle} class="hero-cover" loading="eager" decoding="async" />
+          {:else}
+            <div class="hero-cover hero-cover-placeholder">
+              <BookOpen size={32} weight="light" class="placeholder-book" />
+            </div>
+          {/if}
+        </div>
+
+        <!-- Right: Info panel -->
+        <div class="hero-info-col">
+          {#if activeSlot?.kind === "empty"}
+            <p class="hero-empty-label">Slot empty</p>
+            <p class="hero-empty-sub">
+              {activeSlot.slotIndex === 0
+                ? "Start reading a manga to see it here"
+                : "Pin a manga or read more to fill this slot"}
+            </p>
+            {#if activeSlot.slotIndex !== 0}
+              <button class="hero-cta" on:click={() => openPicker(activeSlot.slotIndex as 1|2|3)}>
+                <PushPin size={13} weight="fill" /> Pin a manga
+              </button>
+            {/if}
+          {:else}
+            <!-- Title & meta -->
+            <div class="hero-tags">
+              {#if activeSlot?.kind === "continue"}
+                <span class="hero-tag hero-tag-reading"><Play size={9} weight="fill" /> Reading</span>
+              {:else}
+                <span class="hero-tag hero-tag-pinned"><PushPin size={9} weight="fill" /> Pinned</span>
+              {/if}
+              {#each (heroManga?.genre ?? []).slice(0, 3) as g}
+                <span class="hero-tag">{g}</span>
+              {/each}
+            </div>
+
+            <h2 class="hero-title">{heroTitle}</h2>
+
+            {#if heroManga?.author}
+              <p class="hero-author">{heroManga.author}</p>
+            {/if}
+
+            {#if heroEntry}
+              <p class="hero-chapter">
+                <Clock size={11} weight="light" />
+                {heroEntry.chapterName}
+                {#if heroEntry.pageNumber > 1}<span class="hero-page">· p.{heroEntry.pageNumber}</span>{/if}
+                <span class="hero-time">{timeAgo(heroEntry.readAt)}</span>
+              </p>
+            {/if}
+
+            {#if heroManga?.description}
+              <p class="hero-desc">{heroManga.description}</p>
+            {/if}
+
+            <!-- CTAs -->
+            <div class="hero-actions">
+              {#if activeSlot?.kind === "continue"}
+                <button class="hero-cta" on:click={resumeActive}>
+                  <Play size={13} weight="fill" /> Resume
+                </button>
+              {:else}
+                <button class="hero-cta" on:click={() => heroManga && previewManga.set(heroManga)}>
+                  <BookOpen size={13} 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)}>
+                    <XIcon size={11} weight="bold" /> Unpin
+                  </button>
+                {:else}
+                  <button class="hero-cta-ghost" on:click={() => openPicker(activeSlot!.slotIndex as 1|2|3)}>
+                    <PushPin size={11} weight="light" /> Pin a manga
+                  </button>
+                {/if}
+              {/if}
+            </div>
+          {/if}
+        </div>
+
+        <!-- Nav arrows -->
+        <button class="hero-nav hero-nav-left" on:click={cyclePrev} aria-label="Previous">
+          <ArrowLeft size={16} weight="bold" />
+        </button>
+        <button class="hero-nav hero-nav-right" on:click={cycleNext} aria-label="Next">
+          <ArrowRight size={16} weight="bold" />
+        </button>
+
+        <!-- Dot indicators -->
+        <div class="hero-dots">
+          {#each resolvedSlots as slot, i}
+            <button
+              class="hero-dot"
+              class:hero-dot-active={activeIdx === i}
+              class:hero-dot-pinned={slot.kind === "pinned"}
+              on:click={() => goToSlot(i)}
+              aria-label="Go to slot {i + 1}"
+            ></button>
+          {/each}
+        </div>
+
+        <!-- Slot index label -->
+        <div class="hero-counter">{activeIdx + 1} / {TOTAL_SLOTS}</div>
+
+      </div>
+    </div>
+
+    <!-- ── Stats strip ─────────────────────────────────────────────────────────── -->
+    {#if hasStats}
+      <div class="stats-strip">
+        <div class="stat-card">
+          <Fire size={16} weight="fill" class="stat-fire" />
+          <span class="stat-val accent">{stats.currentStreakDays}</span>
+          <span class="stat-label">day streak</span>
+        </div>
+        <div class="stat-div"></div>
+        <div class="stat-card">
+          <BookOpen size={15} weight="light" class="stat-neutral" />
+          <span class="stat-val">{stats.totalChaptersRead}</span>
+          <span class="stat-label">chapters</span>
+        </div>
+        <div class="stat-div"></div>
+        <div class="stat-card">
+          <Clock size={15} weight="light" class="stat-neutral" />
+          <span class="stat-val">{formatReadTime(stats.totalMinutesRead)}</span>
+          <span class="stat-label">read time</span>
+        </div>
+        <div class="stat-div"></div>
+        <div class="stat-card">
+          <TrendUp size={15} weight="light" class="stat-neutral" />
+          <span class="stat-val">{stats.totalMangaRead}</span>
+          <span class="stat-label">series</span>
+        </div>
+        <div class="stat-div"></div>
+        <div class="stat-card">
+          <CalendarBlank size={15} weight="light" class="stat-neutral" />
+          <span class="stat-val muted">{stats.longestStreakDays}d</span>
+          <span class="stat-label">best streak</span>
+        </div>
+      </div>
+    {/if}
+
+    <!-- ── Recently Completed ──────────────────────────────────────────────────── -->
+    {#if completedIds.length > 0 && completedManga.length > 0}
+      <div class="section">
+        <div class="section-header">
+          <span class="section-title"><CheckCircle size={11} weight="bold" /> Recently Completed</span>
+          <button class="see-all" on:click={() => navPage.set("library")}>View all <ArrowRight size={10} weight="bold" /></button>
+        </div>
+        <div class="mini-row" on:wheel|preventDefault={handleRowWheel}>
+          {#each completedManga as m (m.id)}
+            <button class="mini-card" on:click={() => previewManga.set(m)}>
+              <div class="mini-cover-wrap">
+                <img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="mini-cover" loading="lazy" decoding="async" />
+                <div class="completed-check"><CheckCircle size={14} weight="fill" /></div>
+              </div>
+              <p class="mini-title">{m.title}</p>
+            </button>
+          {/each}
+          <div class="ghost" aria-hidden="true"></div>
+        </div>
+      </div>
+    {/if}
+
+    <!-- ── Recent Activity ────────────────────────────────────────────────────── -->
+    {#if recentHistory.length > 0}
+      <div class="section">
+        <div class="section-header">
+          <span class="section-title"><Clock size={11} weight="bold" /> Recent Activity</span>
+          <button class="see-all" on:click={() => navPage.set("history")}>Full history <ArrowRight size={10} weight="bold" /></button>
+        </div>
+        <div class="activity-list">
+          {#each recentHistory as entry (entry.chapterId)}
+            <button class="activity-row" on:click={() => {
+              const ch = $activeChapterList.find(c => c.id === entry.chapterId);
+              if (ch && $activeChapterList.length > 0) openReader(ch, $activeChapterList);
+              else activeManga.set({ id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any);
+            }}>
+              <div class="activity-thumb-wrap">
+                <img src={thumbUrl(entry.thumbnailUrl)} alt={entry.mangaTitle} class="activity-thumb" loading="lazy" decoding="async" />
+              </div>
+              <div class="activity-info">
+                <span class="activity-title">{entry.mangaTitle}</span>
+                <span class="activity-chapter">
+                  {entry.chapterName}
+                  {#if entry.pageNumber > 1}<span class="activity-page">· p.{entry.pageNumber}</span>{/if}
+                </span>
+              </div>
+              <span class="activity-time">{timeAgo(entry.readAt)}</span>
+              <div class="activity-play"><Play size={11} weight="fill" /></div>
+            </button>
+          {/each}
+        </div>
+      </div>
+    {:else}
+      <div class="empty-activity">
+        <p class="empty-text">Start reading to see activity here</p>
+        <button class="empty-cta" on:click={() => navPage.set("library")}>
+          Open Library <ArrowRight size={12} weight="bold" />
+        </button>
+      </div>
+    {/if}
+
+  </div>
+</div>
+
+<!-- ── Slot picker modal ──────────────────────────────────────────────────────── -->
+{#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-modal">
+      <div class="picker-header">
+        <span class="picker-title">Pin manga to slot {(pickerSlotIndex ?? 0) + 1}</span>
+        <button class="picker-close" on:click={closePicker}><XIcon size={14} weight="light" /></button>
+      </div>
+      <div class="picker-search-wrap">
+        <MagnifyingGlass size={13} weight="light" class="picker-search-icon" />
+        <input class="picker-search" placeholder="Search library…" bind:value={pickerSearch} autofocus />
+      </div>
+      <div class="picker-list">
+        {#if loadingLibrary}
+          <p class="picker-empty">Loading library…</p>
+        {:else if pickerResults.length === 0}
+          <p class="picker-empty">No results</p>
+        {:else}
+          {#each pickerResults as m (m.id)}
+            <button class="picker-row" on:click={() => pinManga(m)}>
+              <img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="picker-thumb" loading="lazy" decoding="async" />
+              <div class="picker-info">
+                <span class="picker-manga-title">{m.title}</span>
+                {#if m.source?.displayName}<span class="picker-source">{m.source.displayName}</span>{/if}
+              </div>
+              <PushPin size={13} weight="light" class="picker-pin-icon" />
+            </button>
+          {/each}
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
+
+  .page-header {
+    display: flex; align-items: center; padding: var(--sp-4) var(--sp-6);
+    border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
+  }
+  .heading { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
+
+  .body { flex: 1; overflow-y: auto; padding-bottom: var(--sp-8); will-change: scroll-position; }
+
+  /* ── Hero stage ───────────────────────────────────────────────────────────── */
+  .hero-section { padding: var(--sp-5) var(--sp-6) var(--sp-2); outline: none; }
+  .hero-stage {
+    position: relative; border-radius: var(--radius-xl); overflow: hidden;
+    height: 220px; display: flex; align-items: stretch;
+    background: var(--bg-raised); border: 1px solid var(--border-dim);
+    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
+  }
+
+  /* Blurred backdrop */
+  .hero-backdrop {
+    position: absolute; inset: -10px;
+    background-size: cover; background-position: center;
+    filter: blur(18px) saturate(1.2) brightness(0.45);
+    transform: scale(1.05);
+    pointer-events: none; z-index: 0;
+  }
+  .hero-backdrop-empty { background: var(--bg-void); filter: none; }
+  .hero-scrim {
+    position: absolute; inset: 0;
+    background: linear-gradient(to right, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 100%);
+    z-index: 1; pointer-events: none;
+  }
+
+  /* Cover column */
+  .hero-cover-col {
+    position: relative; z-index: 2; flex-shrink: 0;
+    width: 130px; padding: var(--sp-4);
+    display: flex; align-items: center; justify-content: center;
+  }
+  .hero-cover {
+    width: 100%; aspect-ratio: 2/3; object-fit: cover;
+    border-radius: var(--radius-lg);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.6);
+    display: block;
+  }
+  .hero-cover-placeholder {
+    display: flex; align-items: center; justify-content: center;
+    background: var(--bg-overlay); border-radius: var(--radius-lg);
+    aspect-ratio: 2/3;
+  }
+  :global(.placeholder-book) { color: var(--text-faint); }
+
+  /* Info column */
+  .hero-info-col {
+    position: relative; z-index: 2; flex: 1; min-width: 0;
+    padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-3);
+    display: flex; flex-direction: column; gap: var(--sp-2);
+    overflow: hidden;
+  }
+
+  .hero-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); flex-shrink: 0; }
+  .hero-tag {
+    font-family: var(--font-ui); font-size: 9px; letter-spacing: var(--tracking-wide);
+    text-transform: uppercase; padding: 2px 6px; border-radius: var(--radius-sm);
+    background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7);
+    border: 1px solid rgba(255,255,255,0.15);
+  }
+  .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.2); color: #c4a8f0; border-color: rgba(168,132,232,0.3); }
+
+  .hero-title {
+    font-size: var(--text-base); font-weight: var(--weight-medium);
+    color: #fff; line-height: var(--leading-snug);
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+    text-shadow: 0 1px 6px rgba(0,0,0,0.6);
+    flex-shrink: 0;
+  }
+  .hero-author {
+    font-family: var(--font-ui); font-size: var(--text-2xs); color: rgba(255,255,255,0.55);
+    letter-spacing: var(--tracking-wide); flex-shrink: 0;
+  }
+  .hero-chapter {
+    display: flex; align-items: center; gap: 5px;
+    font-family: var(--font-ui); font-size: var(--text-2xs); color: rgba(255,255,255,0.65);
+    letter-spacing: var(--tracking-wide); flex-shrink: 0;
+  }
+  .hero-page { color: rgba(255,255,255,0.45); }
+  .hero-time { margin-left: auto; color: rgba(255,255,255,0.4); }
+  .hero-desc {
+    font-size: var(--text-xs); color: rgba(255,255,255,0.5); line-height: var(--leading-snug);
+    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
+    flex: 1; min-height: 0;
+  }
+
+  /* Empty slot */
+  .hero-empty-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: rgba(255,255,255,0.6); }
+  .hero-empty-sub   { font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.35); letter-spacing: var(--tracking-wide); line-height: var(--leading-snug); }
+
+  /* CTAs */
+  .hero-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; flex-wrap: wrap; }
+  .hero-cta {
+    display: inline-flex; align-items: center; gap: var(--sp-1);
+    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
+    padding: 6px 14px; 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 { filter: brightness(1.15); }
+  .hero-cta-ghost {
+    display: inline-flex; align-items: center; gap: var(--sp-1);
+    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
+    padding: 6px 14px; border-radius: var(--radius-full);
+    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
+    color: rgba(255,255,255,0.6); cursor: pointer;
+    transition: background var(--t-base), color var(--t-base); white-space: nowrap;
+  }
+  .hero-cta-ghost:hover { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); }
+
+  /* Nav arrows */
+  .hero-nav {
+    position: absolute; top: 50%; transform: translateY(-50%);
+    z-index: 3; width: 28px; height: 28px;
+    display: flex; align-items: center; justify-content: center;
+    background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
+    border: 1px solid rgba(255,255,255,0.12); border-radius: 50%;
+    color: rgba(255,255,255,0.75); cursor: pointer;
+    transition: background var(--t-base), color var(--t-base);
+  }
+  .hero-nav:hover { background: rgba(0,0,0,0.65); color: #fff; }
+  .hero-nav-left  { left: var(--sp-2); }
+  .hero-nav-right { right: var(--sp-2); }
+
+  /* Dots */
+  .hero-dots {
+    position: absolute; bottom: var(--sp-2); left: 50%; transform: translateX(-50%);
+    z-index: 3; display: flex; gap: 6px; align-items: center;
+  }
+  .hero-dot {
+    width: 6px; height: 6px; border-radius: 50%;
+    background: rgba(255,255,255,0.3); border: none; cursor: pointer; padding: 0;
+    transition: background var(--t-base), transform var(--t-base);
+  }
+  .hero-dot:hover { background: rgba(255,255,255,0.6); }
+  .hero-dot-active { background: #fff; transform: scale(1.3); }
+  .hero-dot-pinned { background: rgba(168,132,232,0.7); }
+  .hero-dot-pinned.hero-dot-active { background: #c4a8f0; }
+
+  /* Counter */
+  .hero-counter {
+    position: absolute; top: var(--sp-2); right: var(--sp-3); z-index: 3;
+    font-family: var(--font-ui); font-size: 10px; color: rgba(255,255,255,0.4);
+    letter-spacing: var(--tracking-wide);
+  }
+
+  /* ── Stats strip ─────────────────────────────────────────────────────────── */
+  .stats-strip {
+    display: flex; align-items: center;
+    margin: var(--sp-4) var(--sp-6);
+    background: var(--bg-raised); border: 1px solid var(--border-dim);
+    border-radius: var(--radius-xl); padding: var(--sp-4) var(--sp-5); gap: 0;
+  }
+  .stat-card { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
+  .stat-div  { width: 1px; height: 32px; background: var(--border-dim); flex-shrink: 0; }
+  :global(.stat-fire)    { color: #f97316; }
+  :global(.stat-neutral) { color: var(--text-faint); }
+  .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-val.accent { color: var(--accent-fg); }
+  .stat-val.muted  { color: var(--text-faint); }
+  .stat-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); text-align: center; white-space: nowrap; }
+
+  /* ── Section chrome ───────────────────────────────────────────────────────── */
+  .section { margin-bottom: var(--sp-5); }
+  .section-header { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-6) var(--sp-3); }
+  .section-title { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); 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); }
+
+  /* ── Mini row ─────────────────────────────────────────────────────────────── */
+  .mini-row { display: flex; gap: var(--sp-3); padding: 0 var(--sp-6); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
+  .mini-row::-webkit-scrollbar { display: none; }
+  .ghost { flex-shrink: 0; width: 110px; aspect-ratio: 2/3; pointer-events: none; visibility: hidden; }
+  .mini-card { flex-shrink: 0; width: 110px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
+  .mini-card:hover .mini-cover { filter: brightness(1.06); }
+  .mini-card:hover .mini-title { color: var(--text-primary); }
+  .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); }
+  .mini-cover { width: 100%; height: 100%; object-fit: cover; transition: filter var(--t-base); }
+  .completed-check { position: absolute; top: var(--sp-1); right: var(--sp-1); color: #22c55e; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
+  .mini-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); }
+
+  /* ── Activity feed ────────────────────────────────────────────────────────── */
+  .activity-list { display: flex; flex-direction: column; padding: 0 var(--sp-4); }
+  .activity-row { display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-2); border-radius: var(--radius-md); border: 1px solid transparent; background: none; text-align: left; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
+  .activity-row:hover { background: var(--bg-raised); border-color: var(--border-dim); }
+  .activity-row:hover .activity-play { opacity: 1; }
+  .activity-thumb-wrap { flex-shrink: 0; }
+  .activity-thumb { width: 38px; height: 54px; border-radius: var(--radius-sm); object-fit: cover; display: block; background: var(--bg-raised); border: 1px solid var(--border-dim); }
+  .activity-info { flex: 1; display: flex; flex-direction: column; gap: 3px; overflow: hidden; min-width: 0; }
+  .activity-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .activity-chapter { font-size: var(--text-xs); color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-1); }
+  .activity-page { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .activity-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; }
+  .activity-play { color: var(--text-faint); flex-shrink: 0; opacity: 0; transition: opacity var(--t-base); }
+
+  .empty-activity { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: 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 modal ─────────────────────────────────────────────────────────── */
+  .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(480px, calc(100vw - 48px)); max-height: 70vh; display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-base); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.6); animation: scaleIn 0.14s ease both; }
+  .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; }
+  .picker-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
+  .picker-close { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-sm); color: var(--text-faint); background: none; border: none; cursor: pointer; transition: color var(--t-base), background var(--t-base); }
+  .picker-close:hover { color: var(--text-muted); background: var(--bg-raised); }
+  .picker-search-wrap { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
+  :global(.picker-search-icon) { color: var(--text-faint); flex-shrink: 0; }
+  .picker-search { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: var(--text-sm); }
+  .picker-search::placeholder { color: var(--text-faint); }
+  .picker-list { flex: 1; overflow-y: auto; padding: var(--sp-2); }
+  .picker-empty { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); padding: var(--sp-4) var(--sp-3); text-align: center; }
+  .picker-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 8px var(--sp-3); border-radius: var(--radius-md); border: none; background: none; text-align: left; cursor: pointer; transition: background var(--t-fast); }
+  .picker-row:hover { background: var(--bg-raised); }
+  .picker-thumb { width: 36px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: var(--bg-raised); border: 1px solid var(--border-dim); }
+  .picker-info { flex: 1; display: flex; flex-direction: column; gap: 3px; 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); }
+  :global(.picker-pin-icon) { color: var(--text-faint); flex-shrink: 0; opacity: 0; transition: opacity var(--t-base); }
+  .picker-row:hover :global(.picker-pin-icon) { opacity: 1; }
+
+  @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/pages/Library.svelte b/src/components/pages/Library.svelte
index 9b00096..9a2678a 100644
--- a/src/components/pages/Library.svelte
+++ b/src/components/pages/Library.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
   import { onMount, onDestroy } from "svelte";
-  import { MagnifyingGlass, Books, DownloadSimple, X, Folder, FolderSimplePlus, Trash } from "phosphor-svelte";
+  import { MagnifyingGlass, Books, DownloadSimple, Folder, FolderSimplePlus, Trash } from "phosphor-svelte";
   import { gql, thumbUrl } from "../../lib/client";
-  import { GET_LIBRARY, UPDATE_MANGA, GET_CHAPTERS, DELETE_DOWNLOADED_CHAPTERS, DEQUEUE_DOWNLOAD } from "../../lib/queries";
+  import { GET_LIBRARY, GET_ALL_MANGA, UPDATE_MANGA, GET_CHAPTERS, DELETE_DOWNLOADED_CHAPTERS, DEQUEUE_DOWNLOAD } from "../../lib/queries";
   import { cache, CACHE_KEYS } from "../../lib/cache";
-  import { settings, activeManga, libraryFilter, libraryTagFilter, genreFilter, activeChapter } from "../../store";
+  import { dedupeMangaById, dedupeMangaByTitle } from "../../lib/util";
+  import { settings, activeManga, libraryFilter, genreFilter, activeChapter } from "../../store";
   import { addFolder, assignMangaToFolder, removeMangaFromFolder, getMangaFolders } from "../../store";
   import type { Manga, Chapter } from "../../lib/types";
   import ContextMenu, { type MenuEntry } from "../shared/ContextMenu.svelte";
@@ -12,11 +13,13 @@
   const CARD_MIN_W = 130;
   const CARD_GAP   = 16;
 
-  let allManga: Manga[]     = [];
+  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;
@@ -36,10 +39,22 @@
   }
 
   function loadData() {
+    // Saved tab — library only (inLibrary: true)
     fetchLibrary()
-      .then((nodes) => { allManga = nodes; error = null; })
+      .then((nodes) => {
+        allManga = dedupeMangaByTitle(dedupeMangaById(nodes));
+        error = null;
+      })
       .catch((e) => error = e.message)
       .finally(() => loading = false);
+
+    // Folder tabs — all manga regardless of inLibrary.
+    // Cached separately so it doesn't bust the library cache.
+    cache.get("all_manga_unfiltered", () =>
+      gql<{ mangas: { nodes: Manga[] } }>(GET_ALL_MANGA).then((d) => d.mangas.nodes)
+    ).then((nodes) => {
+      allMangaUnfiltered = dedupeMangaByTitle(dedupeMangaById(nodes));
+    }).catch(console.error);
   }
 
   $: {
@@ -56,40 +71,74 @@
     if (f && !f.showTab) libraryFilter.set("library");
   }
 
-  const isBuiltin = (f: string) => f === "all" || f === "library" || f === "downloaded";
+  const isBuiltin = (f: string) => f === "library" || f === "downloaded";
 
   $: filtered = (() => {
-    let items = allManga;
-    if ($libraryFilter === "library")         items = items.filter((m) => m.inLibrary);
-    else if ($libraryFilter === "downloaded") items = items.filter((m) => (m.downloadCount ?? 0) > 0);
-    else if (!isBuiltin($libraryFilter)) {
-      const folder = $settings.folders.find((f) => f.id === $libraryFilter);
-      if (folder) items = items.filter((m) => folder.mangaIds.includes(m.id));
+    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 ($libraryTagFilter.length)
-      items = items.filter((m) => $libraryTagFilter.every((t) => (m.genre ?? []).includes(t)));
-    if (search.trim()) {
-      const q = search.toLowerCase();
-      items = items.filter((m) => m.title.toLowerCase().includes(q));
+    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;
     }
-    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)));
 
-  $: counts = {
-    all:        allManga.length,
-    library:    allManga.filter((m) => m.inLibrary).length,
-    downloaded: allManga.filter((m) => (m.downloadCount ?? 0) > 0).length,
-    ...$settings.folders.reduce((a, f) => ({ ...a, [f.id]: allManga.filter((m) => f.mangaIds.includes(m.id)).length }), {}),
-  };
+  // Reset visible count whenever the filtered set changes (filter/search/tab switch)
+  $: { filtered; renderVisible = $settings.renderLimit ?? 48; }
 
-  $: allTags = [...new Set(allManga.filter((m) => m.inLibrary).flatMap((m) => m.genre ?? []))].sort();
+  $: 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 seen = new Set(allManga.map(m => m.id));
+    return [...allManga, ...allMangaUnfiltered.filter(m => !seen.has(m.id))];
+  })();
+
+  $: counts = {
+    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>),
+  };
 
   async function removeFromLibrary(manga: Manga) {
     await gql(UPDATE_MANGA, { id: manga.id, inLibrary: false }).catch(console.error);
-    allManga = allManga.map((m) => m.id === manga.id ? { ...m, inLibrary: false } : m);
+    allManga = allManga.filter((m) => m.id !== manga.id);
     cache.clear(CACHE_KEYS.LIBRARY);
+    cache.clear("all_manga_unfiltered");
   }
 
   async function deleteAllDownloads(manga: Manga) {
@@ -156,10 +205,6 @@
     }];
   }
 
-  function toggleTag(tag: string) {
-    libraryTagFilter.update((t) => t.includes(tag) ? t.filter((x) => x !== tag) : [...t, tag]);
-  }
-
   onMount(() => {
     const ro = new ResizeObserver(([e]) => containerWidth = e.contentRect.width);
     ro.observe(scrollEl);
@@ -210,7 +255,7 @@
       <div class="header-left">
         <span class="heading">Library</span>
         <div class="tabs">
-          {#each [["library","Saved"], ["downloaded","Downloaded"], ["all","All"]] as [f, label]}
+          {#each [["library","Saved"], ["downloaded","Downloaded"]] as [f, label]}
             <button class="tab" class:active={$libraryFilter === f} on:click={() => libraryFilter.set(f)}>
               {#if f === "library"}<Books size={11} weight="bold" />
               {:else if f === "downloaded"}<DownloadSimple size={11} weight="bold" />{/if}
@@ -233,21 +278,6 @@
       </div>
     </div>
 
-    {#if allTags.length > 0}
-      <div class="tag-panel">
-        {#if $libraryTagFilter.length > 0}
-          <button class="tag-clear" on:click={() => libraryTagFilter.set([])}>
-            <X size={11} weight="bold" /> Clear
-          </button>
-        {/if}
-        {#each allTags as tag}
-          <button class="tag-chip" class:active={$libraryTagFilter.includes(tag)} on:click={() => toggleTag(tag)}>
-            {tag}
-          </button>
-        {/each}
-      </div>
-    {/if}
-
     {#if loading}
       <div class="grid">
         {#each Array(12) as _}
@@ -261,12 +291,11 @@
       <div class="center">
         {$libraryFilter === "library" ? "No manga saved to library — browse sources to add some."
           : $libraryFilter === "downloaded" ? "No downloaded manga."
-          : !isBuiltin($libraryFilter) ? "No manga in this folder yet. Right-click manga to assign them."
-          : "No manga found."}
+          : "No manga in this folder yet. Right-click manga anywhere to assign them."}
       </div>
     {:else}
       <div class="grid" style="--cols:{cols}">
-        {#each filtered as m (m.id)}
+        {#each visibleManga as m (m.id)}
           <button
             class="card"
             on:click={() => activeManga.set(m)}
@@ -286,6 +315,14 @@
           </button>
         {/each}
       </div>
+      {#if hasMore}
+        <div class="load-more-row">
+          <button class="load-more-btn" on:click={loadMore}>
+            Show {Math.min(remainingCount, $settings.renderLimit ?? 48)} more
+            <span class="load-more-count">({remainingCount} remaining)</span>
+          </button>
+        </div>
+      {/if}
     {/if}
   {/if}
 </div>
@@ -362,30 +399,6 @@
   .search::placeholder { color: var(--text-faint); }
   .search:focus { border-color: var(--border-strong); }
 
-  .tag-panel {
-    position: relative; z-index: 1;
-    display: flex; flex-wrap: wrap; gap: var(--sp-1);
-    margin-bottom: var(--sp-3);
-  }
-  .tag-chip {
-    font-family: var(--font-ui); font-size: var(--text-2xs);
-    letter-spacing: var(--tracking-wide); padding: 3px 8px;
-    border-radius: var(--radius-sm); border: 1px solid var(--border-dim);
-    color: var(--text-faint); cursor: pointer;
-    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
-  }
-  .tag-chip:hover { color: var(--text-muted); border-color: var(--border-strong); }
-  .tag-chip.active { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
-  .tag-clear {
-    display: flex; align-items: center; gap: 4px;
-    font-family: var(--font-ui); font-size: var(--text-2xs);
-    letter-spacing: var(--tracking-wide); padding: 3px 8px;
-    border-radius: var(--radius-sm); border: 1px solid var(--color-error);
-    color: var(--color-error); cursor: pointer;
-    transition: background var(--t-base);
-  }
-  .tag-clear:hover { background: var(--color-error-bg); }
-
   .grid {
     position: relative; z-index: 1;
     display: grid;
@@ -437,6 +450,21 @@
   .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-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;
diff --git a/src/components/pages/SeriesDetail.svelte b/src/components/pages/SeriesDetail.svelte
index d2b426d..ecb4aa4 100644
--- a/src/components/pages/SeriesDetail.svelte
+++ b/src/components/pages/SeriesDetail.svelte
@@ -12,7 +12,7 @@
     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 } from "../../store";
+  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";
@@ -64,6 +64,12 @@
 
   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);
+    }
   }
 
   $: sortDir = $settings.chapterSortDir;
@@ -217,7 +223,10 @@
   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() });
+    if ($activeManga) {
+      chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() });
+      checkAndMarkCompleted($activeManga.id, chapters);
+    }
   }
 
   async function markBulk(ids: number[], isRead: boolean) {
@@ -225,7 +234,10 @@
     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() });
+    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);
diff --git a/src/components/reader/Reader.svelte b/src/components/reader/Reader.svelte
index d3460b6..f81a4db 100644
--- a/src/components/reader/Reader.svelte
+++ b/src/components/reader/Reader.svelte
@@ -7,7 +7,7 @@
   } 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 } from "../../store";
+  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";
 
@@ -148,7 +148,14 @@
     const ch = $activeChapter;
     if (!ch || !markOnNext || markedRead.has(ch.id)) return;
     markedRead.add(ch.id);
-    gql(MARK_CHAPTER_READ, { id: ch.id, isRead: true }).catch((e) => { markedRead.delete(ch.id); console.error(e); });
+    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);
+        }
+      })
+      .catch((e) => { markedRead.delete(ch.id); console.error(e); });
   }
 
   function showUi() {
@@ -260,14 +267,30 @@
         const total = chunk ? chunk.urls.length : $pageUrls.length;
         if (total > 0 && activeLocalPage >= total - 1 && !markedRead.has(activeChId)) {
           markedRead.add(activeChId);
-          gql(MARK_CHAPTER_READ, { id: activeChId, isRead: true }).catch((e) => { markedRead.delete(activeChId!); console.error(e); });
+          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); });
         }
       }
       if (containerEl.scrollTop + containerEl.clientHeight < containerEl.scrollHeight - 40) return;
       const last = stripChapters[stripChapters.length - 1];
       if (last && $settings.autoMarkRead && !markedRead.has(last.chapterId)) {
         markedRead.add(last.chapterId);
-        gql(MARK_CHAPTER_READ, { id: last.chapterId, isRead: true }).catch(console.error);
+        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);
+            }
+          })
+          .catch(console.error);
       }
     }
     function onScroll80() {
@@ -340,7 +363,15 @@
     if (style !== "longstrip" && $settings.autoMarkRead && $pageNumber === lastPage) {
       if (!markedRead.has($activeChapter.id)) {
         markedRead.add($activeChapter.id);
-        gql(MARK_CHAPTER_READ, { id: $activeChapter.id, isRead: true }).catch(console.error);
+        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);
       }
     }
   }
diff --git a/src/components/search/Search.svelte b/src/components/search/Search.svelte
index f49c6a6..69104f1 100644
--- a/src/components/search/Search.svelte
+++ b/src/components/search/Search.svelte
@@ -21,10 +21,11 @@
 
   
 
-  const CONCURRENCY        = 4;
-  const RESULTS_PER_SOURCE = 8;
-  const TAG_PAGE_SIZE      = 48;
-  const MAX_TAG_SOURCES    = 10;
+  const CONCURRENCY        = 6;  // more parallel source requests
+  // RESULTS_PER_SOURCE and TAG_PAGE_SIZE are driven by $settings.renderLimit
+  // (accessed inline) so changing the setting takes effect immediately.
+  // No MAX_TAG_SOURCES cap — we fan out to all deduped sources so the grid
+  // is fully populated. Concurrency + caching keep this fast.
 
   const COMMON_GENRES = [
     "Action","Adventure","Comedy","Drama","Fantasy","Romance",
@@ -217,10 +218,12 @@
 
   $: tag_hasActiveTags = tag_activeTags.length > 0;
   $: tag_localIds      = new Set(tag_localResults.map((m) => m.id));
-  $: tag_mergedResults = tag_searchSources
-    ? [...tag_localResults, ...tag_sourceResults.filter((m) => !tag_localIds.has(m.id))]
-    : tag_localResults;
-  $: tag_totalVisible  = tag_localResults.length + (tag_searchSources ? tag_sourceResults.length : 0);
+  $: tag_mergedResults = dedupeMangaByTitle(dedupeMangaById(
+    tag_searchSources
+      ? [...tag_localResults, ...tag_sourceResults.filter((m) => !tag_localIds.has(m.id))]
+      : tag_localResults
+  ));
+  $: tag_totalVisible  = tag_mergedResults.length;
   $: tag_sourceHasMore = tag_searchSources && [...tag_srcNextPage.values()].some((p) => p > 0);
 
   
@@ -230,7 +233,11 @@
     tagFetchLocal(_activeTags, _tagMode);
   }
 
-  
+  // Auto-enable source search if local results are sparse (< 20 after initial load)
+  $: if (!tag_loadingLocal && tag_activeTags.length > 0 && tag_localResults.length < 20 && !tag_searchSources && !loadingSources) {
+    tag_searchSources = true;
+  }
+
   $: {
     const _search = tag_searchSources;
     const _tags   = tag_activeTags;
@@ -252,14 +259,14 @@
 
     gql<{ mangas: { nodes: Manga[]; pageInfo: { hasNextPage: boolean }; totalCount: number } }>(
       MANGAS_BY_GENRE,
-      { filter: buildGenreFilter(activeTags, tagMode), first: TAG_PAGE_SIZE, offset: 0 },
+      { filter: buildGenreFilter(activeTags, tagMode), first: ($settings.renderLimit ?? 48), offset: 0 },
       ctrl.signal,
     ).then((d) => {
       if (ctrl.signal.aborted) return;
       tag_localResults  = d.mangas.nodes;
       tag_totalCount    = d.mangas.totalCount;
       tag_localHasNext  = d.mangas.pageInfo.hasNextPage;
-      tag_localOffset   = TAG_PAGE_SIZE;
+      tag_localOffset   = ($settings.renderLimit ?? 48);
     }).catch((e: any) => {
       if (e?.name !== "AbortError") console.error(e);
     }).finally(() => {
@@ -276,7 +283,9 @@
     tag_srcNextPage       = new Map();
     tag_loadingSourceSearch = true;
 
-    const sources    = dedupeSources(allSources, preferredLang).slice(0, MAX_TAG_SOURCES);
+    // Fan out to ALL deduped sources — no arbitrary cap.
+    // Concurrency (6) + per-page caching keeps this fast without hammering connections.
+    const sources    = dedupeSources(allSources, preferredLang);
     const primaryTag = activeTags[0];
 
     for (const src of sources) tag_srcNextPage.set(src.id, -1);
@@ -311,7 +320,7 @@
         : result.mangas;
 
       if (matching.length > 0) {
-        tag_sourceResults = dedupeMangaById([...tag_sourceResults, ...matching]);
+        tag_sourceResults = dedupeMangaByTitle(dedupeMangaById([...tag_sourceResults, ...matching]));
         tag_loadingSourceSearch = false;
       }
     }, ctrl.signal).finally(() => {
@@ -328,13 +337,13 @@
     try {
       const d = await gql<{ mangas: { nodes: Manga[]; pageInfo: { hasNextPage: boolean } } }>(
         MANGAS_BY_GENRE,
-        { filter: buildGenreFilter(tag_activeTags, tag_tagMode), first: TAG_PAGE_SIZE, offset: tag_localOffset },
+        { filter: buildGenreFilter(tag_activeTags, tag_tagMode), first: ($settings.renderLimit ?? 48), offset: tag_localOffset },
         ctrl.signal,
       );
       if (ctrl.signal.aborted) return;
       tag_localResults  = [...tag_localResults, ...d.mangas.nodes];
       tag_localHasNext  = d.mangas.pageInfo.hasNextPage;
-      tag_localOffset  += TAG_PAGE_SIZE;
+      tag_localOffset  += ($settings.renderLimit ?? 48);
     } catch (e: any) {
       if (e?.name !== "AbortError") console.error(e);
     } finally {
@@ -350,7 +359,6 @@
     tag_abortSource = ctrl;
 
     const sources    = dedupeSources(allSources, preferredLang)
-      .slice(0, MAX_TAG_SOURCES)
       .filter((src) => (tag_srcNextPage.get(src.id) ?? -1) > 0);
     const primaryTag = tag_activeTags[0];
 
@@ -385,7 +393,7 @@
           : result.mangas;
 
         if (matching.length > 0)
-          tag_sourceResults = dedupeMangaById([...tag_sourceResults, ...matching]);
+          tag_sourceResults = dedupeMangaByTitle(dedupeMangaById([...tag_sourceResults, ...matching]));
       }, ctrl.signal);
     } finally {
       if (!ctrl.signal.aborted) tag_loadingMoreSource = false;
@@ -675,7 +683,7 @@
               </div>
             {:else if mangas.length > 0}
               <div class="sourceRow">
-                {#each mangas.slice(0, RESULTS_PER_SOURCE) as m (m.id)}
+                {#each mangas.slice(0, ($settings.renderLimit ?? 48)) as m (m.id)}
                   <button class="card" on:click={() => previewManga.set(m)}>
                     <div class="coverWrap">
                       <img
diff --git a/src/components/settings/Settings.svelte b/src/components/settings/Settings.svelte
index 6b192d1..3b2ff88 100644
--- a/src/components/settings/Settings.svelte
+++ b/src/components/settings/Settings.svelte
@@ -5,6 +5,7 @@
   import { gql } from "../../lib/client";
   import { GET_DOWNLOADS_PATH } from "../../lib/queries";
   import { settings, settingsOpen, history, updateSettings, resetKeybinds, addFolder, removeFolder, renameFolder, toggleFolderTab } from "../../store";
+  import { cache } from "../../lib/cache";
   import { KEYBIND_LABELS, DEFAULT_KEYBINDS, eventToKeybind } from "../../lib/keybinds";
   import type { Settings, FitMode, Theme } from "../../store";
   import type { Keybinds } from "../../lib/keybinds";
@@ -98,6 +99,68 @@
     return `${(bytes / Math.pow(1024, i)).toFixed(i >= 2 ? 1 : 0)} ${units[i]}`;
   }
 
+  // ── Performance metrics ───────────────────────────────────────────────────────
+  // Pulled from the session cache on demand — lightweight, no extra fetches.
+  interface PerfSnapshot {
+    cacheEntries: number;
+    cacheKeys:    string[];
+    oldestEntryMs: number | null;
+    newestEntryMs: number | null;
+  }
+
+  let perfSnapshot: PerfSnapshot | null = null;
+
+  function refreshPerfMetrics() {
+    // cache.list() isn't exported, but we can probe known keys to build a snapshot
+    const knownPrefixes = ["library", "sources", "popular", "genre:", "manga:", "chapters:", "page:", "pages:"];
+    let entries = 0;
+    let oldest: number | null = null;
+    let newest: number | null = null;
+    const foundKeys: string[] = [];
+
+    // We walk the cache via ageOf — non-zero means the key exists
+    // For a real count we introspect via a set of likely keys
+    // (The cache module doesn't expose an iterator, so we sample)
+    const checkKey = (k: string) => {
+      const age = cache.ageOf(k);
+      if (age !== undefined) {
+        entries++;
+        foundKeys.push(k);
+        const ts = Date.now() - age;
+        if (oldest === null || ts < oldest) oldest = ts;
+        if (newest === null || ts > newest) newest = ts;
+      }
+    };
+
+    ["library", "sources", "popular"].forEach(checkKey);
+    ["Action","Romance","Fantasy","Comedy","Drama","Horror","Sci-Fi","Adventure","Thriller",
+     "Isekai","Supernatural","Historical","Psychological","Sports","Mystery","Mecha",
+     "Slice of Life","School Life","Martial Arts","Magic","Military"].forEach(g => checkKey(`genre:${g}`));
+
+    perfSnapshot = { cacheEntries: entries, cacheKeys: foundKeys, oldestEntryMs: oldest, newestEntryMs: newest };
+  }
+
+  $: if (tab === "performance") refreshPerfMetrics();
+
+  function fmtAge(ts: number | null): string {
+    if (ts === null) return "—";
+    const secs = Math.floor((Date.now() - ts) / 1000);
+    if (secs < 60) return `${secs}s ago`;
+    const mins = Math.floor(secs / 60);
+    if (mins < 60) return `${mins}m ago`;
+    return `${Math.floor(mins / 60)}h ago`;
+  }
+
+  // Storage limit input state
+  let storageLimitInput = String($settings.storageLimitGb ?? "");
+
+  function applyStorageLimit() {
+    const v = storageLimitInput.trim();
+    if (v === "" || v === "0") { updateSettings({ storageLimitGb: null }); return; }
+    const n = parseFloat(v);
+    if (!isNaN(n) && n > 0) updateSettings({ storageLimitGb: n });
+  }
+
   
   let newFolderName  = "";
   let editingId: string | null = null;
@@ -387,6 +450,27 @@
         
         {:else if tab === "performance"}
           <div class="panel">
+
+            <div class="section">
+              <p class="section-title">Render Limit</p>
+              <div class="step-row">
+                <div class="toggle-info">
+                  <span class="toggle-label">Items per page</span>
+                  <span class="toggle-desc">Library and Search render this many items before showing a "Load more" button. Lower = faster scrolling on large libraries.</span>
+                </div>
+                <div class="step-controls">
+                  <button class="step-btn" on:click={() => updateSettings({ renderLimit: Math.max(12, ($settings.renderLimit ?? 48) - 12) })} disabled={($settings.renderLimit ?? 48) <= 12}>−</button>
+                  <span class="step-val">{$settings.renderLimit ?? 48}</span>
+                  <button class="step-btn" on:click={() => updateSettings({ renderLimit: Math.min(200, ($settings.renderLimit ?? 48) + 12) })} disabled={($settings.renderLimit ?? 48) >= 200}>+</button>
+                </div>
+              </div>
+              <p class="scale-hint">
+                {#each [12, 24, 48, 96, 200] as v}
+                  <button class="scale-preset" class:active={($settings.renderLimit ?? 48) === v} on:click={() => updateSettings({ renderLimit: v })}>{v}</button>
+                {/each}
+              </p>
+            </div>
+
             <div class="section">
               <p class="section-title">Rendering</p>
               <label class="toggle-row">
@@ -394,6 +478,7 @@
                 <button role="switch" aria-checked={$settings.gpuAcceleration} aria-label="GPU acceleration" class="toggle" class:on={$settings.gpuAcceleration} on:click={() => updateSettings({ gpuAcceleration: !$settings.gpuAcceleration })}><span class="toggle-thumb"></span></button>
               </label>
             </div>
+
             <div class="section">
               <p class="section-title">Idle / Splash Screen</p>
               <label class="toggle-row">
@@ -401,6 +486,7 @@
                 <button role="switch" aria-checked={$settings.splashCards ?? true} aria-label="Animated card background" class="toggle" class:on={$settings.splashCards ?? true} on:click={() => updateSettings({ splashCards: !($settings.splashCards ?? true) })}><span class="toggle-thumb"></span></button>
               </label>
             </div>
+
             <div class="section">
               <p class="section-title">Interface</p>
               <label class="toggle-row">
@@ -408,6 +494,37 @@
                 <button role="switch" aria-checked={$settings.compactSidebar} aria-label="Compact sidebar" class="toggle" class:on={$settings.compactSidebar} on:click={() => updateSettings({ compactSidebar: !$settings.compactSidebar })}><span class="toggle-thumb"></span></button>
               </label>
             </div>
+
+            <div class="section">
+              <p class="section-title">Session Cache</p>
+              <div class="step-row">
+                <div class="toggle-info">
+                  <span class="toggle-label">Cache entries</span>
+                  <span class="toggle-desc">In-memory request cache for this session (library, sources, genre pages). Cleared on restart.</span>
+                </div>
+                <div class="perf-stat-group">
+                  <span class="perf-stat">{perfSnapshot?.cacheEntries ?? 0} entries</span>
+                  <button class="kb-reset" on:click={refreshPerfMetrics} title="Refresh">↺</button>
+                </div>
+              </div>
+              {#if perfSnapshot && perfSnapshot.cacheEntries > 0}
+                <div class="step-row">
+                  <div class="toggle-info"><span class="toggle-label">Oldest entry</span></div>
+                  <span class="perf-stat">{fmtAge(perfSnapshot.oldestEntryMs)}</span>
+                </div>
+                <div class="step-row">
+                  <div class="toggle-info"><span class="toggle-label">Newest entry</span></div>
+                  <span class="perf-stat">{fmtAge(perfSnapshot.newestEntryMs)}</span>
+                </div>
+                <div class="step-row">
+                  <div class="toggle-info">
+                    <span class="toggle-label">Cached keys</span>
+                    <span class="toggle-desc">{perfSnapshot.cacheKeys.join(", ")}</span>
+                  </div>
+                </div>
+              {/if}
+            </div>
+
           </div>
 
         
@@ -480,6 +597,45 @@
                 </button>
               </div>
             </div>
+            <div class="section">
+              <p class="section-title">Storage Limit</p>
+              <div class="step-row">
+                <div class="toggle-info">
+                  <span class="toggle-label">Limit download storage</span>
+                  <span class="toggle-desc">
+                    {$settings.storageLimitGb === null
+                      ? "No limit — uses full drive capacity"
+                      : `Warn when downloads exceed ${$settings.storageLimitGb} GB`}
+                  </span>
+                </div>
+                {#if $settings.storageLimitGb === null}
+                  <button class="step-btn" style="width:auto;padding:0 var(--sp-3);font-size:var(--text-xs);letter-spacing:var(--tracking-wide)"
+                    on:click={() => updateSettings({ storageLimitGb: 10 })}>
+                    Set limit
+                  </button>
+                {:else}
+                  <div class="step-controls">
+                    <button class="step-btn"
+                      on:click={() => updateSettings({ storageLimitGb: Math.max(1, ($settings.storageLimitGb ?? 10) - 1) })}
+                      disabled={($settings.storageLimitGb ?? 10) <= 1}>−</button>
+                    <input
+                      type="number" min="1" step="1"
+                      class="storage-limit-input"
+                      value={$settings.storageLimitGb}
+                      on:input={(e) => {
+                        const n = parseFloat(e.currentTarget.value);
+                        if (!isNaN(n) && n > 0) updateSettings({ storageLimitGb: n });
+                      }}
+                    />
+                    <span class="storage-limit-unit">GB</span>
+                    <button class="step-btn"
+                      on:click={() => updateSettings({ storageLimitGb: ($settings.storageLimitGb ?? 10) + 1 })}>+</button>
+                    <button class="kb-reset" title="Remove limit"
+                      on:click={() => updateSettings({ storageLimitGb: null })}>↺</button>
+                  </div>
+                {/if}
+              </div>
+            </div>
           </div>
 
         
@@ -701,4 +857,24 @@
   /* About */
   .about-block { padding: 0 var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
   .about-line { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-base); }
+
+  /* Perf metrics */
+  .perf-stat-group { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
+  .perf-stat { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-secondary); letter-spacing: var(--tracking-wide); flex-shrink: 0; }
+
+  /* Storage limit */
+  .storage-limit-row { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
+  .storage-limit-input {
+    width: 64px; text-align: center;
+    background: var(--bg-raised); border: 1px solid var(--border-dim);
+    border-radius: var(--radius-sm); padding: 3px 6px;
+    color: var(--text-secondary); font-family: var(--font-ui); font-size: var(--text-xs);
+    outline: none; transition: border-color var(--t-base);
+    -moz-appearance: textfield;
+  }
+  .storage-limit-input::-webkit-inner-spin-button,
+  .storage-limit-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
+  .storage-limit-input:focus { border-color: var(--border-strong); }
+  .storage-limit-unit { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); flex-shrink: 0; }
+  .storage-limit-note { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--accent-fg); letter-spacing: var(--tracking-wide); padding: 0 var(--sp-3) var(--sp-2); }
 </style>
diff --git a/src/components/shared/MangaPreview.svelte b/src/components/shared/MangaPreview.svelte
index 50c8afc..61cdd09 100644
--- a/src/components/shared/MangaPreview.svelte
+++ b/src/components/shared/MangaPreview.svelte
@@ -4,7 +4,7 @@
   import { gql, thumbUrl } from "../../lib/client";
   import { GET_MANGA, GET_CHAPTERS, FETCH_MANGA, FETCH_CHAPTERS, UPDATE_MANGA, ENQUEUE_CHAPTERS_DOWNLOAD } from "../../lib/queries";
   import { cache, CACHE_KEYS } from "../../lib/cache";
-  import { settings, previewManga, activeManga, navPage, genreFilter, openReader, addToast, addFolder, assignMangaToFolder, removeMangaFromFolder } from "../../store";
+  import { settings, previewManga, activeManga, navPage, genreFilter, openReader, addToast, addFolder, assignMangaToFolder, removeMangaFromFolder, checkAndMarkCompleted } from "../../store";
   import type { Manga, Chapter } from "../../lib/types";
 
   let manga: Manga | null      = null;
@@ -97,7 +97,11 @@
             if (!cCtrl.signal.aborted) nodes = [...fetched.fetchChapters.chapters].sort((a, b) => a.sourceOrder - b.sourceOrder);
           } catch (e: any) { if (e?.name === "AbortError") return; }
         }
-        if (!cCtrl.signal.aborted) chapters = nodes;
+        if (!cCtrl.signal.aborted) {
+          chapters = nodes;
+          // Passive check — MangaPreview has the full chapter list, use it
+          if (nodes.length > 0) checkAndMarkCompleted(id, nodes);
+        }
       })
       .catch(() => {})
       .finally(() => { if (!cCtrl.signal.aborted) loadingChapters = false; });
diff --git a/src/store/index.ts b/src/store/index.ts
index 7ec32e0..6ba2e3a 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -5,16 +5,37 @@ import { DEFAULT_KEYBINDS, type Keybinds } from "../lib/keybinds";
 export type PageStyle        = "single" | "double" | "longstrip";
 export type FitMode          = "width" | "height" | "screen" | "original";
 export type LibraryFilter    = "all" | "library" | "downloaded" | string;
-export type NavPage          = "library" | "sources" | "explore" | "downloads" | "extensions" | "history" | "search";
+export type NavPage          = "home" | "library" | "sources" | "explore" | "downloads" | "extensions" | "history" | "search";
 export type ReadingDirection = "ltr" | "rtl";
 export type ChapterSortDir   = "desc" | "asc";
 export type Theme            = "dark" | "high-contrast" | "light" | "light-contrast" | "midnight" | "warm";
 
+export const COMPLETED_FOLDER_ID = "completed";
+
 export interface HistoryEntry {
   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;
+}
+
+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: "",
+};
+
 export interface Toast {
   id: string; kind: "success" | "error" | "info" | "download";
   title: string; body?: string; duration?: number;
@@ -22,7 +43,10 @@ export interface Toast {
 
 export interface ActiveDownload { chapterId: number; mangaId: number; progress: number }
 
-export interface Folder { id: string; name: string; mangaIds: number[]; showTab: boolean }
+export interface Folder {
+  id: string; name: string; mangaIds: number[]; showTab: boolean;
+  system?: boolean;
+}
 
 export interface Settings {
   pageStyle: PageStyle; readingDirection: ReadingDirection; fitMode: FitMode;
@@ -36,8 +60,19 @@ export interface Settings {
   splashCards?: boolean; storageLimitGb: number | null; folders: Folder[];
   markReadOnNext: boolean; readerDebounceMs: number; theme: Theme;
   libraryBranches: boolean;
+  renderLimit: number;
+  /**
+   * Hero slot pinning for the Home page.
+   * 4 slots total. Index 0 = always auto (continue reading, not pinnable).
+   * Indices 1-3: null = auto (fill from recent history), number = pinned mangaId.
+   */
+  heroSlots: (number | null)[];
 }
 
+const COMPLETED_FOLDER_DEFAULT: Folder = {
+  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,
@@ -47,17 +82,18 @@ export const DEFAULT_SETTINGS: Settings = {
   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: [],
+  idleTimeoutMin: 5, splashCards: true, storageLimitGb: null,
+  folders: [COMPLETED_FOLDER_DEFAULT],
   markReadOnNext: true, readerDebounceMs: 120, theme: "dark",
-  libraryBranches: true,
+  libraryBranches: true, renderLimit: 48,
+  heroSlots: [null, null, null, null],
 };
 
+// ── Persistence ───────────────────────────────────────────────────────────────
+
 function loadPersisted() {
-  try {
-    const raw = localStorage.getItem("moku-store");
-    if (!raw) return null;
-    return JSON.parse(raw);
-  } catch { return null; }
+  try { const raw = localStorage.getItem("moku-store"); return raw ? JSON.parse(raw) : null; }
+  catch { return null; }
 }
 
 function persist(key: string, value: unknown) {
@@ -67,46 +103,64 @@ function persist(key: string, value: unknown) {
 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
+    ? { ...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:  saved?.settings?.folders  ?? [],
+    folders: [completedFolder, ...otherFolders],
     keybinds: { ...DEFAULT_KEYBINDS, ...saved?.settings?.keybinds },
+    heroSlots: saved?.settings?.heroSlots ?? [null, null, null, null],
   };
 }
 
-export const navPage        = writable<NavPage>(saved?.navPage ?? "library");
-export const libraryFilter  = writable<LibraryFilter>(saved?.libraryFilter ?? "library");
-export const history        = writable<HistoryEntry[]>(saved?.history ?? []);
-export const settings       = writable<Settings>(mergeSettings(saved));
+function mergeStats(saved: any): ReadingStats {
+  return { ...DEFAULT_READING_STATS, ...saved?.readingStats };
+}
 
-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);
+// ── Stores ────────────────────────────────────────────────────────────────────
+
+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 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 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[]>([]);
 
+// ── Reader ────────────────────────────────────────────────────────────────────
+
 export function openReader(chapter: Chapter, chapterList: Chapter[]) {
-  activeChapter.set(chapter);
-  activeChapterList.set(chapterList);
-  pageUrls.set([]);
-  pageNumber.set(1);
+  activeChapter.set(chapter); activeChapterList.set(chapterList);
+  pageUrls.set([]); pageNumber.set(1);
 }
 
 export function closeReader() {
-  activeChapter.set(null);
-  activeChapterList.set([]);
-  pageUrls.set([]);
-  pageNumber.set(1);
+  activeChapter.set(null); activeChapterList.set([]);
+  pageUrls.set([]); pageNumber.set(1);
+}
+
+// ── History ───────────────────────────────────────────────────────────────────
+
+function todayStr(): string {
+  const d = new Date();
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
 }
 
 export function addHistory(entry: HistoryEntry) {
@@ -118,24 +172,116 @@ export function addHistory(entry: HistoryEntry) {
     }
     return [entry, ...h.filter((x) => x.chapterId !== entry.chapterId)].slice(0, 300);
   });
+
+  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;
+
+    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;
+    }
+
+    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,
+    };
+  });
 }
 
+export function clearHistory() { history.set([]); }
+
+// ── 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 };
+  });
+}
+
+export function unmarkMangaCompleted(mangaId: number) {
+  settings.update((s) => ({
+    ...s,
+    folders: s.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;
+}
+
+/**
+ * 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);
+  else unmarkMangaCompleted(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 };
+  });
+}
+
+// ── Toasts ────────────────────────────────────────────────────────────────────
+
 export function addToast(toast: Omit<Toast, "id">) {
   toasts.update((t) => [...t, { ...toast, id: Math.random().toString(36).slice(2) }].slice(-5));
 }
-
 export function dismissToast(id: string) {
   toasts.update((t) => t.filter((x) => x.id !== id));
 }
 
+// ── Settings ──────────────────────────────────────────────────────────────────
+
 export function updateSettings(patch: Partial<Settings>) {
   settings.update((s) => ({ ...s, ...patch }));
 }
-
 export function resetKeybinds() {
   settings.update((s) => ({ ...s, keybinds: DEFAULT_KEYBINDS }));
 }
 
+// ── Folders ───────────────────────────────────────────────────────────────────
+
 const genId = () => Math.random().toString(36).slice(2, 10);
 
 export function addFolder(name: string): string {
@@ -143,40 +289,37 @@ export function addFolder(name: string): string {
   settings.update((s) => ({ ...s, folders: [...s.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) }));
+  settings.update((s) => ({ ...s, folders: s.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, name: name.trim() } : f) }));
+  settings.update((s) => ({ ...s, folders: s.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.update((s) => ({ ...s, folders: s.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) =>
+    ...s, folders: s.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) =>
-      f.id === folderId ? { ...f, mangaIds: f.mangaIds.filter((id) => id !== mangaId) } : f
+    ...s, folders: s.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 get(settings).folders.filter(f => f.mangaIds.includes(mangaId));
 }
 
-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 }));
-settings.subscribe((v)      => persist("moku-store", { ...loadPersisted(), settings: v }));
+// ── 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 }));