Feat: Scanlator-based Filtering & Directory Changes

src/App.svelte

@@ -11,13 +11,13 @@
   import { store, addToast, setActiveDownloads, setSettingsOpen } from "./store/state.svelte";
   import { initRpc, setIdle, clearReading, destroyRpc } from "./lib/discord";
   import type { DownloadStatus, DownloadQueueItem } from "./lib/types";
-  import Layout       from "./components/layout/Layout.svelte";
+  import Layout       from "./components/chrome/Layout.svelte";
   import Reader       from "./components/reader/Reader.svelte";
   import Settings     from "./components/settings/Settings.svelte";
   import ThemeEditor  from "./components/settings/ThemeEditor.svelte";
-  import TitleBar     from "./components/layout/TitleBar.svelte";
+  import TitleBar     from "./components/chrome/TitleBar.svelte";
-  import Toaster      from "./components/layout/Toaster.svelte";
+  import Toaster      from "./components/chrome/Toaster.svelte";
-  import SplashScreen from "./components/layout/SplashScreen.svelte";
+  import SplashScreen from "./components/chrome/SplashScreen.svelte";
   import MangaPreview from "./components/shared/MangaPreview.svelte";
 
   let themeStyleEl: HTMLStyleElement | null = null;

src/components/chrome/Layout.svelte

@@ -3,7 +3,7 @@
   import Sidebar        from "./Sidebar.svelte";
   import Home           from "../pages/Home.svelte";
   import Library        from "../pages/Library.svelte";
-  import SeriesDetail   from "../pages/SeriesDetail.svelte";
+  import SeriesDetail   from "../series/SeriesDetail.svelte";
   import RecentActivity from "./RecentActivity.svelte";
   import Search         from "../pages/Search.svelte";
   import Discover       from "../pages/Discover.svelte";

src/components/chrome/Toaster.svelte

@@ -2,13 +2,34 @@
   import { store, dismissToast } from "../../store/state.svelte";
   import type { Toast } from "../../store/state.svelte";
 
-  const timers = new Map<string, ReturnType<typeof setTimeout>>();
+  const EXIT_MS = 280;
+  const leaving = new Set<string>();
+  const timers  = new Map<string, ReturnType<typeof setTimeout>>();
 
   function schedule(t: Toast) {
     if (timers.has(t.id)) return;
     const dur = t.duration ?? 3500;
     if (dur === 0) return;
-    timers.set(t.id, setTimeout(() => dismissToast(t.id), dur));
+    timers.set(t.id, setTimeout(() => dismiss(t.id), dur));
+  }
+
+  function dismiss(id: string) {
+    if (leaving.has(id)) return;
+    leaving.add(id);
+    if (timers.has(id)) { clearTimeout(timers.get(id)!); timers.delete(id); }
+
+    const el = document.querySelector<HTMLElement>(`[data-toast-id="${id}"]`);
+    if (!el) { finalize(id); return; }
+
+    const h = el.offsetHeight;
+    el.style.setProperty("--exit-h", `${h}px`);
+    el.classList.add("leaving");
+    setTimeout(() => finalize(id), EXIT_MS);
+  }
+
+  function finalize(id: string) {
+    leaving.delete(id);
+    dismissToast(id);
   }
 
   $effect(() => {
@@ -27,7 +48,12 @@
 {#if store.toasts.length}
   <div class="toaster" aria-live="polite">
     {#each store.toasts as t (t.id)}
-      <div role="alert" class="toast toast-{t.kind}" onclick={() => dismissToast(t.id)}>
+      <div
+        role="alert"
+        class="toast toast-{t.kind}"
+        data-toast-id={t.id}
+        onclick={() => dismiss(t.id)}
+      >
         <div class="accent-bar"></div>
         <span class="icon">
           <svg width="13" height="13" viewBox="0 0 24 24" fill="none"
@@ -70,20 +96,37 @@
     min-width: 200px;
     overflow: hidden;
     cursor: pointer;
-    animation: slideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
-    transition: opacity 0.15s ease, transform 0.15s ease;
     font-family: inherit;
     font-size: inherit;
     color: inherit;
     text-align: left;
+    will-change: transform, opacity;
+    animation: slideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+  }
+
+  .toast:hover {
+    border-color: var(--border-base);
+    box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.06) inset;
+    transform: translateX(-3px);
   }
 
-  .toast:hover  { opacity: 0.85; transform: translateX(-2px); }
   .toast:active { transform: translateX(0) scale(0.98); }
 
+  :global(.toast.leaving) {
+    animation: slideOut 0.28s cubic-bezier(0.4, 0, 1, 1) forwards !important;
+    pointer-events: none;
+  }
+
   @keyframes slideIn {
-    from { opacity: 0; transform: translateX(16px) scale(0.98); }
+    from { opacity: 0; transform: translateX(20px) scale(0.96); }
-    to   { opacity: 1; transform: translateX(0)    scale(1); }
+    to   { opacity: 1; transform: translateX(0) scale(1); }
+  }
+
+  @keyframes slideOut {
+    0%   { opacity: 1; transform: translateX(0) scale(1);        max-height: var(--exit-h, 80px); margin-bottom: 0; }
+    40%  { opacity: 0; transform: translateX(14px) scale(0.96);  max-height: var(--exit-h, 80px); margin-bottom: 0; }
+    100% { opacity: 0; transform: translateX(14px) scale(0.96);  max-height: 0;                   margin-bottom: -6px; }
   }
 
   .accent-bar {

src/components/pages/Home.svelte

@@ -9,6 +9,7 @@
   import { store, openReader, setHeroSlot, setActiveManga, setPreviewManga, setNavPage, setGenreFilter, setLibraryFilter } from "../../store/state.svelte";
   import type { HistoryEntry } from "../../store/state.svelte";
   import type { Manga, Chapter, Category } from "../../lib/types";
+  import { buildReaderChapterList } from "../../lib/chapterList";
 
   function timeAgo(ts: number): string {
     const diff = Date.now() - ts, m = Math.floor(diff / 60000);
@@ -59,17 +60,23 @@
       .finally(() => loadingLibrary = false);
   }
 
-  // Re-fetch library and reset hero chapters whenever the reader closes,
+  function resetAndReload() {
-  // so the hero reflects the latest-read chapter immediately.
-  $effect(() => {
-    const sessionId = store.readerSessionId;
-    if (sessionId === 0) return; // skip initial mount — onMount handles that
     cache.clear(CACHE_KEYS.LIBRARY);
-    loadingLibrary = true;
+    loadingLibrary  = true;
     heroChapters    = [];
     heroAllChapters = [];
     heroChaptersFor = null;
     loadLibrary();
+  }
+
+  $effect(() => {
+    if (store.navPage === "home") untrack(() => resetAndReload());
+  });
+
+  $effect(() => {
+    const sessionId = store.readerSessionId;
+    if (sessionId === 0) return;
+    untrack(() => resetAndReload());
   });
 
   async function fetchExtraCompleted(library: Manga[], completed: Category | null) {
@@ -158,7 +165,8 @@
 
   $effect(() => {
     const id = heroMangaId;
-    if (id && id !== heroChaptersFor) untrack(() => loadHeroChapters(id));
+    void store.settings.mangaPrefs?.[id!];
+    if (id) untrack(() => loadHeroChapters(id));
   });
 
   async function loadHeroChapters(mangaId: number) {
@@ -171,9 +179,10 @@
       if (heroChaptersFor !== mangaId) return;
       const all = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
       heroAllChapters = all;
-      const lastReadIdx = heroEntry ? all.findIndex(c => c.id === heroEntry!.chapterId) : all.findLastIndex(c => c.isRead);
+      const filtered = buildReaderChapterList(all, store.settings.mangaPrefs?.[mangaId]);
+      const lastReadIdx = heroEntry ? filtered.findIndex(c => c.id === heroEntry!.chapterId) : filtered.findLastIndex(c => c.isRead);
       const startIdx = Math.max(0, lastReadIdx);
-      heroChapters = all.slice(startIdx, startIdx + 5);
+      heroChapters = filtered.slice(startIdx, startIdx + 5);
     } catch { heroChapters = []; heroAllChapters = []; }
     finally { loadingHeroChapters = false; }
   }
@@ -192,7 +201,9 @@
       if (all.length) {
         const manga = heroManga ?? { id: heroMangaId, title: heroTitle, thumbnailUrl: heroManga?.thumbnailUrl ?? "" } as any;
         store.activeManga = manga;
-        openReader(chapter, all);
+        const list = buildReaderChapterList(all, store.settings.mangaPrefs?.[heroMangaId]);
+        const target = list.find(c => c.id === chapter.id) ?? list[0];
+        if (target) openReader(target, list);
       }
     } catch { store.activeManga = { id: heroMangaId, title: heroTitle, thumbnailUrl: heroManga?.thumbnailUrl ?? "" } as any; }
     finally { resuming = false; }
@@ -206,11 +217,12 @@
     resuming = true;
     try {
       const d = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: heroEntry.mangaId });
-      const chapters = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
+      const raw = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
-      const ch = chapters.find(c => c.id === heroEntry!.chapterId) ?? chapters[0];
+      const list = buildReaderChapterList(raw, store.settings.mangaPrefs?.[heroEntry.mangaId]);
+      const ch = list.find(c => c.id === heroEntry!.chapterId) ?? list[0];
       if (ch) {
         store.activeManga = heroManga ?? { id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any;
-        openReader(ch, chapters);
+        openReader(ch, list);
       }
     } catch { store.activeManga = { id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any; }
     finally { resuming = false; }
@@ -219,11 +231,12 @@
   async function resumeEntry(entry: HistoryEntry) {
     try {
       const d = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: entry.mangaId });
-      const chapters = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
+      const raw = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
-      const ch = chapters.find(c => c.id === entry.chapterId) ?? chapters[0];
+      const list = buildReaderChapterList(raw, store.settings.mangaPrefs?.[entry.mangaId]);
+      const ch = list.find(c => c.id === entry.chapterId) ?? list[0];
       if (ch) {
         store.activeManga = { id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any;
-        openReader(ch, chapters);
+        openReader(ch, list);
       } else store.activeManga = { id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any;
     } catch { store.activeManga = { id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any; }
   }

src/components/pages/Library.svelte

@@ -995,10 +995,10 @@
   /* ── Dropdown panels (shared) ───────────────────────────────────────────── */
   .sort-panel-wrap,
   .filter-panel-wrap { position: relative; }
-  .dropdown-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 9999; min-width: 220px; background: var(--bg-overlay, #1a1a1a); border: 1px solid var(--border-base); border-radius: var(--radius-md); padding: 6px; box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3); animation: fadeIn 0.1s ease both; }
+  .dropdown-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 9999; min-width: 220px; background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: var(--sp-1); box-shadow: 0 8px 32px rgba(0,0,0,0.5); animation: fadeIn 0.1s ease both; }
   .panel-label { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-faint); padding: 4px 8px 8px; }
   .panel-item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 7px 10px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-muted); font-family: var(--font-ui); font-size: var(--text-xs); cursor: pointer; text-align: left; transition: background var(--t-base), color var(--t-base); gap: var(--sp-2); }
-  .panel-item:hover { background: var(--bg-subtle, #202020); color: var(--text-primary); }
+  .panel-item:hover { background: var(--bg-overlay); color: var(--text-primary); }
   .panel-item-active { color: var(--accent-fg); background: var(--accent-muted); font-weight: var(--weight-medium, 500); }
   .panel-item-active:hover { background: var(--accent-dim); }
   .panel-divider { height: 1px; background: var(--border-dim); margin: 4px 2px; }

src/components/reader/Reader.svelte

@@ -9,8 +9,9 @@
   import { gql, thumbUrl, plainThumbUrl } from "../../lib/client";
   import { getBlobUrl, preloadBlobUrls } from "../../lib/imageCache";
   import { store as appStore } from "../../store/state.svelte";
-  import { FETCH_CHAPTER_PAGES, MARK_CHAPTER_READ, ENQUEUE_DOWNLOAD, ENQUEUE_CHAPTERS_DOWNLOAD } from "../../lib/queries";
+  import { FETCH_CHAPTER_PAGES, MARK_CHAPTER_READ, ENQUEUE_DOWNLOAD, ENQUEUE_CHAPTERS_DOWNLOAD, DELETE_DOWNLOADED_CHAPTERS } from "../../lib/queries";
   import { store, closeReader, openReader, addHistory, updateSettings, checkAndMarkCompleted, setSettingsOpen, addBookmark, removeBookmark, addMarker, removeMarker, updateMarker } from "../../store/state.svelte";
+  import { DEFAULT_MANGA_PREFS } from "../../store/state.svelte";
   import { matchesKeybind, toggleFullscreen, DEFAULT_KEYBINDS } from "../../lib/keybinds";
   import { setReading } from "../../lib/discord";
   import type { FitMode, MarkerColor } from "../../store/state.svelte";
@@ -333,7 +334,24 @@
     if (!chId || style !== "longstrip") return;
     if (chId === store.activeChapter?.id) return;
     const wasAppended = untrack(() => stripChapters.findIndex(c => c.chapterId === chId)) > 0;
-    if (wasAppended) { untrack(() => { resumePage = 0; resumeVisible = false; }); return; }
+    if (wasAppended) {
+      untrack(() => {
+        resumePage = 0; resumeVisible = false;
+        const prefs = getMangaPrefs();
+        if (prefs.downloadAhead > 0) {
+          const list = store.activeChapterList;
+          const idx  = list.findIndex(c => c.id === chId);
+          if (idx >= 0) {
+            const toQueue = list
+              .slice(idx + 1, idx + 1 + prefs.downloadAhead)
+              .filter(c => !c.isDownloaded && !c.isRead)
+              .map(c => c.id);
+            if (toQueue.length) gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds: toQueue }).catch(console.error);
+          }
+        }
+      });
+      return;
+    }
     const bookmark = store.bookmarks.find(b => b.chapterId === chId);
     if (bookmark && bookmark.pageNumber > 1) {
       untrack(() => {
@@ -502,6 +520,12 @@
     }
   });
 
+  function getMangaPrefs() {
+    const mangaId = store.activeManga?.id;
+    if (!mangaId) return DEFAULT_MANGA_PREFS;
+    return { ...DEFAULT_MANGA_PREFS, ...(appStore.settings.mangaPrefs?.[mangaId] ?? {}) };
+  }
+
   function markChapterRead(id: number) {
     if (markedRead.has(id)) return;
     markedRead.add(id);
@@ -516,9 +540,42 @@
     }
     gql(MARK_CHAPTER_READ, { id, isRead: true })
       .then(() => {
-        if (store.activeManga) {
+        const mangaId = store.activeManga?.id;
+        if (mangaId) {
           const updated = store.activeChapterList.map(c => c.id === id ? { ...c, isRead: true } : c);
-          checkAndMarkCompleted(store.activeManga.id, updated);
+          checkAndMarkCompleted(mangaId, updated);
+
+          const prefs = getMangaPrefs();
+
+          if (prefs.deleteOnRead) {
+            const ch = store.activeChapterList.find(c => c.id === id);
+            if (ch?.isDownloaded) {
+              const delayMs = (prefs.deleteDelayHours ?? 0) * 60 * 60 * 1000;
+              const doDelete = () => gql(DELETE_DOWNLOADED_CHAPTERS, { ids: [id] }).catch(console.error);
+              if (delayMs === 0) doDelete();
+              else setTimeout(doDelete, delayMs);
+            }
+          }
+
+          if (prefs.downloadAhead > 0) {
+            const list  = store.activeChapterList;
+            const idx   = list.findIndex(c => c.id === id);
+            if (idx >= 0) {
+              const toQueue = list
+                .slice(idx + 1, idx + 1 + prefs.downloadAhead)
+                .filter(c => !c.isDownloaded && !c.isRead)
+                .map(c => c.id);
+              if (toQueue.length) gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds: toQueue }).catch(console.error);
+            }
+          }
+
+          if (prefs.maxKeepChapters > 0) {
+            const downloaded = store.activeChapterList
+              .filter(c => c.isDownloaded)
+              .sort((a, b) => a.sourceOrder - b.sourceOrder);
+            const excess = downloaded.slice(0, Math.max(0, downloaded.length - prefs.maxKeepChapters));
+            if (excess.length) gql(DELETE_DOWNLOADED_CHAPTERS, { ids: excess.map(c => c.id) }).catch(console.error);
+          }
         }
       })
       .catch(e => { markedRead.delete(id); console.error(e); });

src/components/series/AutomationPanel.svelte

@@ -3,12 +3,9 @@
   import { store, updateSettings } from "../../store/state.svelte";
   import { DEFAULT_MANGA_PREFS } from "../../store/state.svelte";
   import type { MangaPrefs } from "../../store/state.svelte";
-  import type { Chapter } from "../../lib/types";
+  let { mangaId, onClose }: {
-
+    mangaId: number;
-  let { mangaId, chapters, onClose }: {
+    onClose: () => void;
-    mangaId:  number;
-    chapters: Chapter[];
-    onClose:  () => void;
   } = $props();
 
   const mangaPrefs = $derived(
@@ -28,12 +25,7 @@
     });
   }
 
-  const scanlators = $derived(
+const DOWNLOAD_AHEAD_OPTIONS = [
-    [...new Set(chapters.map(c => c.scanlator).filter((s): s is string => !!s?.trim()))]
-      .sort((a, b) => a.localeCompare(b))
-  );
-
-  const DOWNLOAD_AHEAD_OPTIONS = [
     { value: 0,  label: "Off"  },
     { value: 2,  label: "2"    },
     { value: 5,  label: "5"    },
@@ -196,33 +188,7 @@
         </div>
       </div>
 
-      {#if scanlators.length > 1}
-        <div class="divider"></div>
 
-        <p class="section-label">Scanlator</p>
-
-        <div class="auto-row auto-row-align-start">
-          <div class="auto-info">
-            <span class="auto-label">Preferred scanlator</span>
-            <span class="auto-desc">Prioritise this group's chapters in the list</span>
-          </div>
-          <div class="scanlator-list">
-            <button
-              class="auto-chip scanlator-chip"
-              class:auto-chip-on={!getPref("preferredScanlator")}
-              onclick={() => setPref("preferredScanlator", "")}
-            >Any</button>
-            {#each scanlators as s}
-              <button
-                class="auto-chip scanlator-chip"
-                class:auto-chip-on={getPref("preferredScanlator") === s}
-                onclick={() => setPref("preferredScanlator", getPref("preferredScanlator") === s ? "" : s)}
-                title={s}
-              >{s}</button>
-            {/each}
-          </div>
-        </div>
-      {/if}
 
     </div>
   </div>
@@ -300,10 +266,6 @@
   .auto-chip:hover { color: var(--text-muted); border-color: var(--border-strong); background: var(--bg-raised); }
   .auto-chip-on { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
 
-  /* Scanlator list */
+@keyframes fadeIn  { from { opacity: 0 }                         to { opacity: 1 } }
-  .scanlator-list { display: flex; flex-direction: row; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 220px; }
-  .scanlator-chip { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
-
-  @keyframes fadeIn  { from { opacity: 0 }                         to { opacity: 1 } }
   @keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
 </style>

src/components/series/SeriesDetail.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount, untrack } from "svelte";
-  import { ArrowLeft, BookmarkSimple, Download, CheckCircle, Circle, ArrowSquareOut, CircleNotch, Play, SortAscending, SortDescending, CaretDown, ArrowsClockwise, List, SquaresFour, FolderSimplePlus, Trash, DownloadSimple, X, LinkSimpleHorizontalBreak, ChartLineUp, MagnifyingGlass, Gear, Eye, MapPin } from "phosphor-svelte";
+  import { ArrowLeft, BookmarkSimple, Download, CheckCircle, Circle, ArrowSquareOut, CircleNotch, Play, SortAscending, SortDescending, CaretDown, ArrowsClockwise, List, SquaresFour, FolderSimplePlus, Trash, DownloadSimple, X, LinkSimpleHorizontalBreak, ChartLineUp, MagnifyingGlass, Gear, Eye, MapPin, Funnel, Check } from "phosphor-svelte";
   import { gql } from "../../lib/client";
   import Thumbnail from "../shared/Thumbnail.svelte";
   import { GET_MANGA, GET_CHAPTERS, FETCH_CHAPTERS, ENQUEUE_DOWNLOAD, UPDATE_MANGA, MARK_CHAPTER_READ, MARK_CHAPTERS_READ, DELETE_DOWNLOADED_CHAPTERS, ENQUEUE_CHAPTERS_DOWNLOAD, GET_ALL_MANGA, GET_CATEGORIES, CREATE_CATEGORY, UPDATE_MANGA_CATEGORIES } from "../../lib/queries";
@@ -12,9 +12,9 @@
   import type { Manga, Chapter, Category } from "../../lib/types";
   import ContextMenu, { type MenuEntry } from "../shared/ContextMenu.svelte";
   import MigrateModal from "./MigrateModal.svelte";
-  import TrackingPanel from "../shared/TrackingPanel.svelte";
+  import TrackingPanel from "./TrackingPanel.svelte";
-  import AutomationPanel from "../shared/AutomationPanel.svelte";
+  import AutomationPanel from "./AutomationPanel.svelte";
-  import MarkersPanel from "../shared/MarkersPanel.svelte";
+  import MarkersPanel from "./MarkersPanel.svelte";
 
   const CHAPTERS_PER_PAGE = 25;
   const MANGA_TTL_MS      = 5 * 60 * 1000;
@@ -58,6 +58,7 @@
   let loadingLinkList:  boolean         = $state(false);
   let selectedIds:      Set<number>     = $state(new Set());
   let sortMenuOpen:     boolean         = $state(false);
+  let scanFilterOpen:   boolean         = $state(false);
   let dlDropRef:        HTMLDivElement | undefined = $state();
   let folderPickerRef:  HTMLDivElement | undefined = $state();
   let mangaAbort:       AbortController | null = null;
@@ -76,22 +77,67 @@
     return (mangaPrefs[key] ?? DEFAULT_MANGA_PREFS[key]) as MangaPrefs[K];
   }
 
+  function setPref<K extends keyof MangaPrefs>(key: K, value: MangaPrefs[K]) {
+    const id = store.activeManga?.id;
+    if (!id) return;
+    updateSettings({
+      mangaPrefs: {
+        ...store.settings.mangaPrefs,
+        [id]: { ...(store.settings.mangaPrefs?.[id] ?? {}), [key]: value },
+      },
+    });
+  }
+
   const hasSelection = $derived(selectedIds.size > 0);
 
   const sortDir  = $derived(store.settings.chapterSortDir);
   const sortMode = $derived(store.settings.chapterSortMode ?? "source");
 
+  const availableScanlators = $derived(
+    [...new Set(chapters.map(c => c.scanlator).filter((s): s is string => !!s?.trim()))]
+      .sort((a, b) => a.localeCompare(b))
+  );
+
+  const scanlatorFilter = $derived((getPref("scanlatorFilter") ?? []) as string[]);
+
   const sortedChapters = $derived.by(() => {
-    const base = [...chapters];
+    let base = [...chapters];
+
     if (sortMode === "chapterNumber") base.sort((a, b) => a.chapterNumber - b.chapterNumber);
     else if (sortMode === "uploadDate") base.sort((a, b) => Number(a.uploadDate ?? 0) - Number(b.uploadDate ?? 0));
     else base.sort((a, b) => a.sourceOrder - b.sourceOrder);
+
+    const preferred = getPref("preferredScanlator");
+    if (preferred) {
+      const pref: Chapter[] = [], rest: Chapter[] = [];
+      for (const c of base) (c.scanlator === preferred ? pref : rest).push(c);
+      base = [...pref, ...rest];
+    }
+
+    if (scanlatorFilter.length > 0) {
+      const seen = new Map<number, Chapter>();
+      for (const ch of base) {
+        const existing = seen.get(ch.chapterNumber);
+        if (!existing) {
+          seen.set(ch.chapterNumber, ch);
+        } else {
+          const np = scanlatorFilter.indexOf(ch.scanlator ?? "");
+          const op = scanlatorFilter.indexOf(existing.scanlator ?? "");
+          if (np !== -1 && (op === -1 || np < op)) seen.set(ch.chapterNumber, ch);
+        }
+      }
+      base = [...seen.values()];
+      if (sortMode === "chapterNumber") base.sort((a, b) => a.chapterNumber - b.chapterNumber);
+      else if (sortMode === "uploadDate") base.sort((a, b) => Number(a.uploadDate ?? 0) - Number(b.uploadDate ?? 0));
+      else base.sort((a, b) => a.sourceOrder - b.sourceOrder);
+    }
+
     return sortDir === "desc" ? base.reverse() : base;
   });
 
-  const chaptersAsc     = $derived([...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder));
+  const chaptersAsc  = $derived([...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder));
-  const totalPages      = $derived(Math.ceil(sortedChapters.length / CHAPTERS_PER_PAGE));
+  const totalPages   = $derived(Math.ceil(sortedChapters.length / CHAPTERS_PER_PAGE));
-  const pageChapters    = $derived(sortedChapters.slice((chapterPage - 1) * CHAPTERS_PER_PAGE, chapterPage * CHAPTERS_PER_PAGE));
+  const pageChapters = $derived(sortedChapters.slice((chapterPage - 1) * CHAPTERS_PER_PAGE, chapterPage * CHAPTERS_PER_PAGE));
   const readCount       = $derived(chapters.filter(c => c.isRead).length);
   const totalCount      = $derived(chapters.length);
   const progressPct     = $derived(totalCount > 0 ? (readCount / totalCount) * 100 : 0);
@@ -101,8 +147,8 @@
   const hasFolders      = $derived(assignedFolders.length > 0);
 
   const continueChapter = $derived((() => {
-    if (!chapters.length) return null;
+    if (!sortedChapters.length) return null;
-    const asc        = [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder);
+    const asc        = [...sortedChapters].sort((a, b) => a.sourceOrder - b.sourceOrder);
     const anyRead    = asc.some(c => c.isRead);
     const inProgress = asc.find(c => !c.isRead && (c.lastPageRead ?? 0) > 0);
     if (inProgress) return { chapter: inProgress, type: "continue" as const };
@@ -285,6 +331,15 @@
   function handleDlOutside(e: MouseEvent) { if (dlDropRef && !dlDropRef.contains(e.target as Node)) dlOpen = false; }
   function handleFolderOutside(e: MouseEvent) { if (folderPickerRef && !folderPickerRef.contains(e.target as Node)) { folderPickerOpen = false; folderCreating = false; folderNewName = ""; } }
 
+  $effect(() => {
+    if (!scanFilterOpen) return;
+    function onOutside(e: MouseEvent) {
+      if (!(e.target as HTMLElement).closest(".scan-filter-wrap")) scanFilterOpen = false;
+    }
+    setTimeout(() => document.addEventListener("mousedown", onOutside, true), 0);
+    return () => document.removeEventListener("mousedown", onOutside, true);
+  });
+
   async function toggleLibrary() {
     if (!manga) return;
     togglingLibrary = true;
@@ -322,12 +377,22 @@
     await gql(MARK_CHAPTER_READ, { id: chapterId, isRead }).catch(console.error);
     chapters = chapters.map(c => c.id === chapterId ? { ...c, isRead } : c);
     if (store.activeManga) { chapterStore.set(store.activeManga.id, { data: chapters, fetchedAt: Date.now() }); checkAndMarkCompleted(store.activeManga.id, chapters); }
-    if (isRead && getPref("deleteOnRead")) {
+    if (isRead) {
-      const ch = chapters.find(c => c.id === chapterId);
+      if (getPref("deleteOnRead")) {
-      if (ch?.isDownloaded) {
+        const ch = chapters.find(c => c.id === chapterId);
-        const delayMs = getPref("deleteDelayHours") * 60 * 60 * 1000;
+        if (ch?.isDownloaded) {
-        if (delayMs === 0) deleteDownloaded(chapterId);
+          const delayMs = getPref("deleteDelayHours") * 60 * 60 * 1000;
-        else setTimeout(() => deleteDownloaded(chapterId), delayMs);
+          if (delayMs === 0) deleteDownloaded(chapterId);
+          else setTimeout(() => deleteDownloaded(chapterId), delayMs);
+        }
+      }
+      const ahead = getPref("downloadAhead");
+      if (ahead > 0) {
+        const idx = sortedChapters.findIndex(c => c.id === chapterId);
+        if (idx >= 0) {
+          const toQueue = sortedChapters.slice(idx + 1, idx + 1 + ahead).filter(c => !c.isDownloaded).map(c => c.id);
+          if (toQueue.length) enqueueMultiple(toQueue);
+        }
       }
     }
   }
@@ -543,7 +608,7 @@
 
     <div class="cta-section">
       {#if continueChapter}
-        <button class="read-btn" onclick={() => openReaderWithAhead(continueChapter!.chapter, chaptersAsc)}>
+        <button class="read-btn" onclick={() => openReaderWithAhead(continueChapter!.chapter, sortedChapters)}>
           <Play size={12} weight="fill" />
           {continueChapter.type === "continue"
             ? `Continue · Ch.${continueChapter.chapter.chapterNumber}${(continueChapter.chapter.lastPageRead ?? 0) > 0 ? ` p.${continueChapter.chapter.lastPageRead}` : ""}`
@@ -648,6 +713,7 @@
               </div>
             {/if}
           </div>
+
           <button class="icon-btn" class:active={viewMode === "grid"} onclick={() => viewMode = viewMode === "list" ? "grid" : "list"} title={viewMode === "list" ? "Grid view" : "List view"}>
             {#if viewMode === "list"}<SquaresFour size={14} weight="light" />{:else}<List size={14} weight="light" />{/if}
           </button>
@@ -671,6 +737,40 @@
           {/if}
         </div>
 
+        {#if availableScanlators.length > 1}
+          <div class="scan-filter-wrap">
+            <button class="icon-btn" class:active={scanlatorFilter.length > 0} onclick={() => scanFilterOpen = !scanFilterOpen} title="Filter by scanlator">
+              <Funnel size={14} weight={scanlatorFilter.length > 0 ? "fill" : "light"} />
+            </button>
+            {#if scanFilterOpen}
+              <div class="scan-filter-panel" role="menu">
+                <div class="scan-filter-header">
+                  <span class="scan-filter-heading">Scanlators</span>
+                  {#if scanlatorFilter.length > 0}
+                    <button class="scan-filter-clear" onclick={() => { setPref("scanlatorFilter", []); chapterPage = 1; }}>Clear</button>
+                  {/if}
+                </div>
+                <div class="scan-filter-divider"></div>
+                {#each availableScanlators as s}
+                  <button class="scan-filter-item" class:scan-filter-item-active={scanlatorFilter.includes(s)} role="menuitem"
+                    onclick={() => {
+                      const next = scanlatorFilter.includes(s)
+                        ? scanlatorFilter.filter(x => x !== s)
+                        : [...scanlatorFilter, s];
+                      setPref("scanlatorFilter", next);
+                      chapterPage = 1;
+                    }}>
+                    <span class="scan-filter-check" class:scan-filter-check-on={scanlatorFilter.includes(s)}>
+                      {#if scanlatorFilter.includes(s)}<Check size={9} weight="bold" />{/if}
+                    </span>
+                    {s}
+                  </button>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        {/if}
+
         <button class="icon-btn" onclick={refreshChapters} disabled={refreshing}>
           <ArrowsClockwise size={14} weight="light" class={refreshing ? "anim-spin" : ""} />
         </button>
@@ -788,7 +888,7 @@
           {@const inProgress = !ch.isRead && (ch.lastPageRead ?? 0) > 0}
           {@const isGridSelected = selectedIds.has(ch.id)}
           <button class="grid-cell" class:read={ch.isRead} class:in-progress={inProgress} class:grid-selected={isGridSelected}
-            onclick={(e) => hasSelection ? toggleSelect(ch.id, e) : openReaderWithAhead(ch, chaptersAsc)}
+            onclick={(e) => hasSelection ? toggleSelect(ch.id, e) : openReaderWithAhead(ch, sortedChapters)}
             oncontextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: i }; }}
             title={ch.name}>
             <span class="grid-cell-num">{ch.chapterNumber % 1 === 0 ? ch.chapterNumber.toFixed(0) : ch.chapterNumber}</span>
@@ -802,8 +902,8 @@
           {@const idxInSorted = sortedChapters.indexOf(ch)}
           {@const isSelected = selectedIds.has(ch.id)}
           <div role="button" tabindex="0" class="ch-row" class:read={ch.isRead} class:ch-selected={isSelected}
-            onclick={(e) => hasSelection ? toggleSelect(ch.id, e) : openReaderWithAhead(ch, chaptersAsc)}
+            onclick={(e) => hasSelection ? toggleSelect(ch.id, e) : openReaderWithAhead(ch, sortedChapters)}
-            onkeydown={(e) => e.key === "Enter" && (hasSelection ? toggleSelect(ch.id, e) : openReaderWithAhead(ch, chaptersAsc))}
+            onkeydown={(e) => e.key === "Enter" && (hasSelection ? toggleSelect(ch.id, e) : openReaderWithAhead(ch, sortedChapters))}
             oncontextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: idxInSorted }; }}>
             <button class="ch-check" class:ch-check-visible={hasSelection} onclick={(e) => toggleSelect(ch.id, e)} title="Select">
               {#if isSelected}<CheckCircle size={15} weight="fill" />{:else}<Circle size={15} weight="light" />{/if}
@@ -819,8 +919,10 @@
             <div class="ch-right">
               {#if ch.isRead}<CheckCircle size={14} weight="light" class="read-icon" />{/if}
               {#if ch.isDownloaded}
-                <span class="ch-dl-dot" title="Downloaded"></span>
+                <div class="ch-dl-wrap">
-                <button class="dl-btn dl-btn-delete" onclick={(e) => { e.stopPropagation(); deleteDownloaded(ch.id); }} title="Delete download"><Trash size={13} weight="light" /></button>
+                  <Download size={13} weight="fill" class="ch-dl-icon" />
+                  <button class="dl-btn dl-btn-delete" onclick={(e) => { e.stopPropagation(); deleteDownloaded(ch.id); }} title="Delete download"><Trash size={13} weight="light" /></button>
+                </div>
               {:else if enqueueing.has(ch.id)}
                 <CircleNotch size={14} weight="light" class="anim-spin enqueue-icon" />
               {:else}
@@ -1111,8 +1213,11 @@
   .ch-row:hover .dl-btn-delete { opacity: 1; }
   .dl-btn-delete:hover { background: var(--color-error-bg) !important; }
 
-  .ch-dl-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fg); flex-shrink: 0; opacity: 0.7; transition: opacity var(--t-fast); }
+  .ch-dl-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
-  .ch-row:hover .ch-dl-dot { opacity: 0; }
+  :global(.ch-dl-icon) { color: var(--text-faint); transition: opacity var(--t-fast); }
+  .ch-row:hover .ch-dl-wrap :global(.ch-dl-icon) { opacity: 0; }
+  .ch-dl-wrap .dl-btn-delete { position: absolute; inset: 0; opacity: 0; }
+  .ch-row:hover .ch-dl-wrap .dl-btn-delete { opacity: 1; }
 
   .grid-selected { background: var(--accent-muted) !important; border-color: var(--accent-dim) !important; }
   .grid-cell-dl { position: absolute; top: 3px; left: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-fg); }
@@ -1123,4 +1228,18 @@
   .markers-panel-overlay { position: fixed; inset: 0; z-index: var(--z-settings); display: flex; align-items: stretch; justify-content: flex-start; animation: fadeIn 0.12s ease both; }
   .markers-panel-drawer { width: 280px; max-width: 90vw; background: var(--bg-surface); border-right: 1px solid var(--border-base); box-shadow: 4px 0 24px rgba(0,0,0,0.4); display: flex; flex-direction: column; animation: drawerIn 0.18s cubic-bezier(0.16,1,0.3,1) both; }
   @keyframes drawerIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
+
+  .scan-filter-wrap { position: relative; }
+  .scan-filter-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 200; min-width: 200px; background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: var(--sp-1); box-shadow: 0 8px 32px rgba(0,0,0,0.5); animation: scaleIn 0.1s ease both; transform-origin: top right; }
+  .scan-filter-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 6px; }
+  .scan-filter-heading { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-secondary); font-weight: var(--weight-medium); }
+  .scan-filter-clear { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); background: none; border: none; cursor: pointer; padding: 0; transition: color var(--t-base); }
+  .scan-filter-clear:hover { color: var(--color-error); }
+  .scan-filter-divider { height: 1px; background: var(--border-dim); margin: 0 2px 4px; }
+  .scan-filter-item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 7px 10px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text-muted); font-family: var(--font-ui); font-size: var(--text-xs); cursor: pointer; text-align: left; transition: background var(--t-base), color var(--t-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .scan-filter-item:hover { background: var(--bg-overlay); color: var(--text-primary); }
+  .scan-filter-item-active { color: var(--accent-fg); background: var(--accent-muted); }
+  .scan-filter-item-active:hover { background: var(--accent-dim); }
+  .scan-filter-check { width: 13px; height: 13px; border-radius: 2px; border: 1px solid var(--border-strong); background: transparent; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--bg-base); transition: background var(--t-base), border-color var(--t-base); }
+  .scan-filter-check-on { background: var(--accent); border-color: var(--accent); }
 </style>

src/lib/chapterList.ts

@@ -0,0 +1,34 @@
+import type { Chapter } from "./types";
+
+export function buildReaderChapterList(
+  chapters:   Chapter[],
+  mangaPrefs: { preferredScanlator?: string; scanlatorFilter?: string[] } | undefined,
+): Chapter[] {
+  const preferred = mangaPrefs?.preferredScanlator ?? "";
+  const filter    = mangaPrefs?.scanlatorFilter ?? [];
+
+  let base = [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder);
+
+  if (preferred) {
+    const pref: Chapter[] = [], rest: Chapter[] = [];
+    for (const c of base) (c.scanlator === preferred ? pref : rest).push(c);
+    base = [...pref, ...rest];
+  }
+
+  if (filter.length > 0) {
+    const seen = new Map<number, Chapter>();
+    for (const ch of base) {
+      const existing = seen.get(ch.chapterNumber);
+      if (!existing) {
+        seen.set(ch.chapterNumber, ch);
+      } else {
+        const np = filter.indexOf(ch.scanlator ?? "");
+        const op = filter.indexOf(existing.scanlator ?? "");
+        if (np !== -1 && (op === -1 || np < op)) seen.set(ch.chapterNumber, ch);
+      }
+    }
+    base = [...seen.values()].sort((a, b) => a.sourceOrder - b.sourceOrder);
+  }
+
+  return base;
+}

src/store/state.svelte.ts

@@ -190,6 +190,7 @@ export interface MangaPrefs {
   pauseUpdates:       boolean;
   refreshInterval:    "global" | "daily" | "weekly" | "manual";
   preferredScanlator: string;
+  scanlatorFilter:    string[];
 }
 
 export const DEFAULT_MANGA_PREFS: MangaPrefs = {
@@ -201,6 +202,7 @@ export const DEFAULT_MANGA_PREFS: MangaPrefs = {
   pauseUpdates:       false,
   refreshInterval:    "global",
   preferredScanlator: "",
+  scanlatorFilter:    [],
 };
 
 export interface Settings {
@@ -398,75 +400,63 @@ function mergeSettings(saved: any): Settings {
     mangaPrefs:        saved?.settings?.mangaPrefs        ?? {},
     customThemes:      saved?.settings?.customThemes      ?? [],
     hiddenCategoryIds: saved?.settings?.hiddenCategoryIds ?? [],
+    nsfwFilteredTags:  saved?.settings?.nsfwFilteredTags  ?? DEFAULT_SETTINGS.nsfwFilteredTags,
+    nsfwAllowedSourceIds: saved?.settings?.nsfwAllowedSourceIds ?? [],
+    nsfwBlockedSourceIds: saved?.settings?.nsfwBlockedSourceIds ?? [],
     libraryTabSort:    saved?.settings?.libraryTabSort    ?? {},
     libraryTabStatus:  saved?.settings?.libraryTabStatus  ?? {},
     libraryTabFilters: saved?.settings?.libraryTabFilters ?? {},
-    nsfwFilteredTags:     saved?.settings?.nsfwFilteredTags     ?? ["adult", "mature", "hentai", "ecchi", "erotic", "pornograph", "18+", "smut", "lemon", "explicit", "sexual violence"],
+    extraScanDirs:     saved?.settings?.extraScanDirs     ?? [],
-    nsfwAllowedSourceIds: saved?.settings?.nsfwAllowedSourceIds ?? [],
-    nsfwBlockedSourceIds: saved?.settings?.nsfwBlockedSourceIds ?? [],
   };
 }
 
-function mergeStats(saved: any): ReadingStats {
-  return { ...DEFAULT_READING_STATS, ...saved?.readingStats };
-}
-
-function todayStr(): string {
-  const d = new Date();
-  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
-}
-
-const genId = () => Math.random().toString(36).slice(2, 10);
-
 class Store {
-  navPage:           NavPage          = $state(saved?.navPage   ?? "home");
+  settings:        Settings        = $state(mergeSettings(saved));
-  libraryFilter:     LibraryFilter    = $state("library");
+  activeManga:     Manga | null    = $state(null);
-  history:           HistoryEntry[]   = $state(saved?.history   ?? []);
+  previewManga:    Manga | null    = $state(null);
-  readLog:           ReadLogEntry[]   = $state(saved?.readLog   ?? []);
+  activeChapter:   Chapter | null  = $state(null);
-  bookmarks:         BookmarkEntry[]  = $state(saved?.bookmarks ?? []);
+  activeChapterList: Chapter[]     = $state([]);
-  markers:           MarkerEntry[]    = $state(saved?.markers   ?? []);
+  pageUrls:        string[]        = $state([]);
-  readingStats:      ReadingStats     = $state(mergeStats(saved));
+  pageNumber:      number          = $state(1);
-  settings:          Settings         = $state(mergeSettings(saved));
+  navPage:         NavPage         = $state("home");
-  readerSessionId:   number           = $state(0);
+  libraryFilter:   LibraryFilter   = $state("all");
-  genreFilter:       string           = $state("");
+  genreFilter:     string          = $state("");
-  searchPrefill:     string           = $state("");
+  searchPrefill:   string          = $state("");
-  activeManga:       Manga | null     = $state(null);
+  toasts:          Toast[]         = $state([]);
-  previewManga:      Manga | null     = $state(null);
+  categories:      Category[]      = $state([]);
-  activeSource:      Source | null    = $state(null);
+  activeDownloads: ActiveDownload[] = $state([]);
-  pageUrls:          string[]         = $state([]);
+  activeSource:    Source | null   = $state(null);
-  pageNumber:        number           = $state(1);
+  libraryTagFilter: string[]       = $state([]);
-  libraryTagFilter:  string[]         = $state([]);
+  settingsOpen:    boolean         = $state(false);
-  settingsOpen:      boolean          = $state(false);
+  history:         HistoryEntry[]  = $state(saved?.history  ?? []);
-  activeDownloads:   ActiveDownload[] = $state([]);
+  bookmarks:       BookmarkEntry[] = $state(saved?.bookmarks ?? []);
-  toasts:            Toast[]          = $state([]);
+  markers:         MarkerEntry[]   = $state(saved?.markers   ?? []);
-  activeChapter:     Chapter | null   = $state(null);
+  readLog:         ReadLogEntry[]  = $state(saved?.readLog   ?? []);
-  activeChapterList: Chapter[]        = $state([]);
+  readingStats:    ReadingStats    = $state(saved?.readingStats ?? { ...DEFAULT_READING_STATS });
-  isFullscreen:      boolean          = $state(false);
+  discoverCache:   Map<string, any> = $state(new Map());
-  categories:        Category[]       = $state([]);
+  discoverLibraryIds: Set<number>  = $state(new Set());
-  discoverCache:      Map<string, Manga[]> = $state(new Map());
+  discoverSrcOffset: number        = $state(0);
-  discoverLibraryIds: Set<number>          = $state(new Set());
-  discoverSrcOffset:  number               = $state(0);
 
   constructor() {
     $effect.root(() => {
-      $effect(() => { persist({ storeVersion:  STORE_VERSION      }); });
+      $effect(() => {
-      $effect(() => { persist({ navPage:       this.navPage       }); });
+        persist({
-      $effect(() => { persist({ libraryFilter: this.libraryFilter }); });
+          settings:     this.settings,
-      $effect(() => { persist({ history:       this.history       }); });
+          history:      this.history,
-      $effect(() => { persist({ readLog:       this.readLog       }); });
+          bookmarks:    this.bookmarks,
-      $effect(() => { persist({ bookmarks:     this.bookmarks     }); });
+          markers:      this.markers,
-      $effect(() => { persist({ markers:       this.markers       }); });
+          readLog:      this.readLog,
-      $effect(() => { persist({ readingStats:  this.readingStats  }); });
+          readingStats: this.readingStats,
-      $effect(() => { persist({ settings:      this.settings      }); });
+          storeVersion: STORE_VERSION,
+        });
+      });
     });
   }
 
   openReader(chapter: Chapter, chapterList: Chapter[], manga?: Manga | null) {
-    if (manga) this.activeManga = manga;
     this.activeChapter     = chapter;
     this.activeChapterList = chapterList;
-    this.pageUrls          = [];
+    if (manga !== undefined) this.activeManga = manga;
-    this.pageNumber        = 1;
   }
 
   closeReader() {
@@ -474,86 +464,70 @@ class Store {
     this.activeChapterList = [];
     this.pageUrls          = [];
     this.pageNumber        = 1;
-    this.readerSessionId  += 1;
   }
 
-  addHistory(entry: HistoryEntry, completed = false, minutes = AVG_MIN_PER_CHAPTER) {
+  addHistory(entry: HistoryEntry, completed = false, minutes?: number) {
-    if (this.history[0]?.chapterId === entry.chapterId) {
+    const filtered = this.history.filter(h => h.chapterId !== entry.chapterId);
-      this.history[0] = { ...this.history[0], readAt: entry.readAt };
+    this.history   = [entry, ...filtered].slice(0, 500);
-    } else {
-      this.history = [entry, ...this.history.filter(x => x.chapterId !== entry.chapterId)].slice(0, 300);
-    }
 
     if (completed) {
-      const logEntry: ReadLogEntry = {
+      const existing = this.readLog.find(e => e.chapterId === entry.chapterId);
-        mangaId:   entry.mangaId,
+      if (!existing) {
-        chapterId: entry.chapterId,
+        const mins = minutes ?? AVG_MIN_PER_CHAPTER;
-        readAt:    entry.readAt,
+        this.readLog = [...this.readLog, { mangaId: entry.mangaId, chapterId: entry.chapterId, readAt: entry.readAt, minutes: mins }];
-        minutes,
+        const uniqueChapters = new Set(this.readLog.map(e => e.chapterId));
-      };
+        const uniqueManga    = new Set(this.readLog.map(e => e.mangaId));
-      this.readLog = [...this.readLog, logEntry].slice(-5000);
+        const totalMinutes   = this.readLog.reduce((sum, e) => sum + e.minutes, 0);
+        const now            = new Date();
+        const todayStr       = now.toISOString().slice(0, 10);
+        const lastDate       = this.readingStats.lastStreakDate;
+        const yesterday      = new Date(now); yesterday.setDate(yesterday.getDate() - 1);
+        const yesterdayStr   = yesterday.toISOString().slice(0, 10);
+        let streak = this.readingStats.currentStreakDays;
+        if (lastDate === todayStr) {
+        } else if (lastDate === yesterdayStr) {
+          streak++;
+        } else {
+          streak = 1;
+        }
+        const longest = Math.max(this.readingStats.longestStreakDays, streak);
+        this.readingStats = {
+          totalChaptersRead: uniqueChapters.size,
+          totalMangaRead:    uniqueManga.size,
+          totalMinutesRead:  totalMinutes,
+          firstReadAt:       this.readingStats.firstReadAt || entry.readAt,
+          lastReadAt:        entry.readAt,
+          currentStreakDays: streak,
+          longestStreakDays: longest,
+          lastStreakDate:    todayStr,
+        };
+      }
     }
-
-    const log = completed ? [...this.readLog] : this.readLog;
-
-    const uniqueChapters = new Set(log.map(e => e.chapterId));
-    const uniqueManga    = new Set(log.map(e => e.mangaId));
-    const totalMinutes   = log.reduce((sum, e) => sum + e.minutes, 0);
-
-    const today = todayStr();
-    let { currentStreakDays, longestStreakDays, lastStreakDate } = this.readingStats;
-    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;
-    }
-
-    this.readingStats = {
-      totalChaptersRead: uniqueChapters.size,
-      totalMangaRead:    uniqueManga.size,
-      totalMinutesRead:  totalMinutes,
-      firstReadAt:       this.readingStats.firstReadAt === 0 ? entry.readAt : this.readingStats.firstReadAt,
-      lastReadAt:        entry.readAt,
-      currentStreakDays,
-      longestStreakDays,
-      lastStreakDate,
-    };
   }
 
   addBookmark(entry: Omit<BookmarkEntry, "savedAt">, label?: string) {
-    const bookmark: BookmarkEntry = { ...entry, savedAt: Date.now(), label };
+    const filtered = this.bookmarks.filter(b => b.chapterId !== entry.chapterId);
-    this.bookmarks = [
+    this.bookmarks = [{ ...entry, savedAt: Date.now(), label }, ...filtered].slice(0, 200);
-      bookmark,
-      ...this.bookmarks.filter(b => b.mangaId !== entry.mangaId),
-    ].slice(0, 200);
   }
 
   removeBookmark(chapterId: number) {
     this.bookmarks = this.bookmarks.filter(b => b.chapterId !== chapterId);
   }
 
-  clearBookmarks() {
+  clearBookmarks() { this.bookmarks = []; }
-    this.bookmarks = [];
-  }
 
   getBookmark(chapterId: number): BookmarkEntry | undefined {
     return this.bookmarks.find(b => b.chapterId === chapterId);
   }
 
   addMarker(entry: Omit<MarkerEntry, "id" | "createdAt">): string {
-    const id = genId();
+    const id  = Math.random().toString(36).slice(2);
-    const marker: MarkerEntry = { ...entry, id, createdAt: Date.now() };
+    this.markers = [...this.markers, { ...entry, id, createdAt: Date.now() }];
-    this.markers = [marker, ...this.markers].slice(0, 2000);
     return id;
   }
 
   updateMarker(id: string, patch: Partial<Pick<MarkerEntry, "note" | "color">>) {
-    this.markers = this.markers.map(m =>
+    this.markers = this.markers.map(m => m.id === id ? { ...m, ...patch, updatedAt: Date.now() } : m);
-      m.id === id ? { ...m, ...patch, updatedAt: Date.now() } : m
-    );
   }
 
   removeMarker(id: string) {