Chore: Port over SeriesDetail (WIP Panels)

2026-06-13 09:19:56 -05:00 · 2026-05-28 23:05:02 -05:00
parent 584b917f98
commit 8c250021a0
53 changed files with 4570 additions and 885 deletions
@@ -1,28 +1,31 @@
 <script lang="ts">
  import { Check, Funnel } from 'phosphor-svelte'
-  import type { MangaStatus } from '$lib/server-adapters/types'
+  import type { LibraryContentFilter, LibraryStatusFilter } from '$lib/state/library.svelte'

  interface Props {
-    status:        MangaStatus | 'all'
-    unread:        boolean
-    downloaded:    boolean
-    bookmarked:    boolean
+    status:        LibraryStatusFilter
+    filters:       Partial<Record<LibraryContentFilter, boolean>>
    hasActive:     boolean
    open:          boolean
    onToggle:      () => void
-    onStatus:      (s: MangaStatus | 'all') => void
-    onUnread:      () => void
-    onDownloaded:  () => void
-    onBookmarked:  () => void
+    onStatusChange: (s: LibraryStatusFilter) => void
+    onFilterToggle: (f: LibraryContentFilter) => void
    onClear:       () => void
  }

  let {
-    status, unread, downloaded, bookmarked, hasActive, open,
-    onToggle, onStatus, onUnread, onDownloaded, onBookmarked, onClear,
+    status, filters, hasActive, open,
+    onToggle, onStatusChange, onFilterToggle, onClear,
  }: Props = $props()

-  const STATUSES: [MangaStatus, string][] = [
+  const CONTENT_FILTERS: [LibraryContentFilter, string][] = [
+    ['unread',     'Unread'],
+    ['started',    'Started'],
+    ['downloaded', 'Downloaded'],
+    ['bookmarked', 'Bookmarked'],
+  ]
+
+  const STATUSES: [LibraryStatusFilter, string][] = [
    ['ONGOING',             'Ongoing'],
    ['COMPLETED',           'Completed'],
    ['ON_HIATUS',           'Hiatus'],
@@ -53,21 +56,17 @@
      <div class="divider"></div>
      <p class="section-label">Content</p>

-      {#each [
-        { label: 'Unread',     active: unread,     handler: onUnread },
-        { label: 'Downloaded', active: downloaded, handler: onDownloaded },
-        { label: 'Bookmarked', active: bookmarked, handler: onBookmarked },
-      ] as f}
+      {#each CONTENT_FILTERS as [key, label]}
        <button
          class="item"
-          class:item-active={f.active}
+          class:item-active={!!filters[key]}
          role="menuitem"
-          onclick={f.handler}
+          onclick={() => onFilterToggle(key)}
        >
-          <span class="check" class:check-on={f.active}>
-            {#if f.active}<Check size={9} weight="bold" />{/if}
+          <span class="check" class:check-on={!!filters[key]}>
+            {#if filters[key]}<Check size={9} weight="bold" />{/if}
          </span>
-          {f.label}
+          {label}
        </button>
      {/each}

@@ -79,7 +78,7 @@
          class="item"
          class:item-active={status === s}
          role="menuitem"
-          onclick={() => onStatus(status === s ? 'all' : s)}
+          onclick={() => onStatusChange(status === s ? 'ALL' : s)}
        >
          <span class="check" class:check-on={status === s}>
            {#if status === s}<Check size={9} weight="bold" />{/if}
@@ -97,24 +96,19 @@
  .icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
-    border-radius: var(--radius-md);
-    border: 1px solid var(--border-dim);
-    background: var(--bg-raised);
-    color: var(--text-faint);
+    border-radius: var(--radius-md); border: 1px solid var(--border-dim);
+    background: var(--bg-raised); color: var(--text-faint);
    cursor: pointer;
    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
  }
-  .icon-btn:hover { color: var(--text-primary); border-color: var(--border-strong); }
+  .icon-btn:hover  { color: var(--text-primary); border-color: var(--border-strong); }
  .icon-btn.active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }

  .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);
+    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;
  }

@@ -152,15 +146,14 @@
    cursor: pointer; text-align: left;
    transition: background var(--t-base), color var(--t-base);
  }
-  .item:hover { background: var(--bg-overlay); color: var(--text-primary); }
-  .item-active { color: var(--accent-fg); background: var(--accent-muted); font-weight: var(--weight-medium, 500); }
+  .item:hover        { background: var(--bg-overlay); color: var(--text-primary); }
+  .item-active       { color: var(--accent-fg); background: var(--accent-muted); font-weight: var(--weight-medium, 500); }
  .item-active:hover { background: var(--accent-dim); }

  .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;
+    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);
  }
@@ -1,30 +1,46 @@
 <script lang="ts">
-  import { CheckSquare, Trash } from 'phosphor-svelte'
-  import type { Manga } from '$lib/types'
+  import { CheckSquare, Trash, Folder } from 'phosphor-svelte'
+  import type { Manga, Category } from '$lib/types'

  interface Props {
-    items:       Manga[]
-    loading:     boolean
-    selectMode:  boolean
-    selected:    Set<number>
-    tab:         string
-    onCardClick:    (e: MouseEvent, m: Manga) => void
-    onSelectAll:    () => void
-    onExitSelect:   () => void
-    onBulkRemove:   () => void
+    items:             Manga[]
+    loading:           boolean
+    selectMode:        boolean
+    selected:          Set<number>
+    tab:               string
+    visibleCategories: Category[]
+    bulkWorking:       boolean
+    onCardClick:       (e: MouseEvent, m: Manga) => void
+    onCardContextMenu: (e: MouseEvent, m: Manga) => void
+    onSelectAll:       () => void
+    onExitSelect:      () => void
+    onBulkRemove:      () => void
+    onBulkMove:        (cat: Category) => void
  }

  let {
    items, loading, selectMode, selected, tab,
-    onCardClick, onSelectAll, onExitSelect, onBulkRemove,
+    visibleCategories, bulkWorking,
+    onCardClick, onCardContextMenu, onSelectAll, onExitSelect, onBulkRemove, onBulkMove,
  }: Props = $props()

  const THUMB_BASE = 'http://127.0.0.1:4567'

+  let movePanelOpen = $state(false)
+
  function coverUrl(m: Manga) {
    const url = m.thumbnailUrl ?? ''
    return url.startsWith('http') ? url : `${THUMB_BASE}${url}`
  }
+
+  function onDocDown(e: MouseEvent) {
+    if (movePanelOpen && !(e.target as HTMLElement).closest('.move-wrap')) movePanelOpen = false
+  }
+
+  $effect(() => {
+    document.addEventListener('mousedown', onDocDown, true)
+    return () => document.removeEventListener('mousedown', onDocDown, true)
+  })
 </script>

 {#if selectMode}
@@ -32,9 +48,36 @@
    <span class="sel-count">{selected.size} selected</span>
    <button class="sel-text-btn" onclick={onSelectAll}>Select all</button>
    <div class="sel-right">
+      {#if visibleCategories.length > 0}
+        <div class="move-wrap">
+          <button
+            class="sel-action-btn"
+            disabled={selected.size === 0 || bulkWorking}
+            onclick={() => movePanelOpen = !movePanelOpen}
+          >
+            <Folder size={13} weight="bold" />
+            Move to folder
+          </button>
+          {#if movePanelOpen}
+            <div class="move-panel" role="menu">
+              {#each visibleCategories as cat}
+                <button
+                  class="move-item"
+                  role="menuitem"
+                  onclick={() => { onBulkMove(cat); movePanelOpen = false }}
+                >
+                  <Folder size={12} weight="bold" />
+                  {cat.name}
+                </button>
+              {/each}
+            </div>
+          {/if}
+        </div>
+      {/if}
+
      <button
        class="sel-action-btn sel-danger"
-        disabled={selected.size === 0}
+        disabled={selected.size === 0 || bulkWorking}
        onclick={onBulkRemove}
      >
        <Trash size={13} weight="bold" />
@@ -65,7 +108,7 @@
    <div class="empty">
      {tab === 'downloaded'
        ? 'No downloaded manga.'
-        : 'No manga saved to library — browse sources to add some.'}
+        : 'No manga in this library — browse sources to add some.'}
    </div>

  {:else}
@@ -78,10 +121,7 @@
          class:card-selected={isSelected}
          class:select-mode={selectMode}
          onclick={(e) => onCardClick(e, m)}
-          oncontextmenu={(e) => {
-            e.preventDefault()
-            onCardClick(e, m)
-          }}
+          oncontextmenu={(e) => onCardContextMenu(e, m)}
        >
          <div class="cover-wrap" class:completed={isCompleted}>
            <img
@@ -157,12 +197,31 @@
    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
  }
  .sel-action-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+  .sel-action-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
  .sel-danger:hover:not(:disabled) {
    color: var(--color-error, #e05c5c);
    border-color: color-mix(in srgb, var(--color-error, #e05c5c) 40%, transparent);
    background: color-mix(in srgb, var(--color-error, #e05c5c) 8%, transparent);
  }

+  .move-wrap { position: relative; }
+  .move-panel {
+    position: absolute; top: calc(100% + 4px); right: 0; z-index: 9999;
+    min-width: 180px; 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;
+  }
+  .move-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);
+  }
+  .move-item:hover { background: var(--bg-overlay); color: var(--text-primary); }
+
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
@@ -205,9 +264,9 @@
    letter-spacing: 0.04em; line-height: 1; padding: 3px 7px;
    border-radius: 20px; white-space: nowrap;
  }
-  .badge-unread  { background: var(--accent); color: #fff; box-shadow: 0 1px 8px rgba(0,0,0,0.5); }
-  .badge-done    { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.25); }
-  .badge-dl      { background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.18); margin-left: auto; }
+  .badge-unread { background: var(--accent); color: #fff; box-shadow: 0 1px 8px rgba(0,0,0,0.5); }
+  .badge-done   { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.25); }
+  .badge-dl     { background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.18); margin-left: auto; }

  .select-overlay {
    position: absolute; inset: 0; z-index: 3;
@@ -241,6 +300,6 @@
    text-align: center;
  }

-  @keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
-  @keyframes pulse   { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }
+  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
+  @keyframes pulse  { 0%, 100% { opacity: 1 } 50% { opacity: 0.4 } }
 </style>
@@ -1,52 +1,75 @@
 <script lang="ts">
  import {
-    MagnifyingGlass, Books, DownloadSimple,
-    SortAscending, CaretUp, CaretDown, ArrowsClockwise,
+    MagnifyingGlass, Books, DownloadSimple, FolderSimple,
+    SortAscending, CaretUp, CaretDown, ArrowsClockwise, X,
  } from 'phosphor-svelte'
  import LibraryFilters from './LibraryFilters.svelte'
-  import type { LibrarySortOption, LibraryTab } from '$lib/state/library.svelte'
-  import type { MangaStatus } from '$lib/server-adapters/types'
+  import type { LibrarySortOption, LibraryContentFilter, LibraryStatusFilter } from '$lib/state/library.svelte'
+  import type { Category } from '$lib/types'

  interface Props {
-    tab:        LibraryTab
-    savedCount: number
-    dlCount:    number
-    sort:       LibrarySortOption
-    sortDesc:   boolean
-    status:     MangaStatus | 'all'
-    unread:     boolean
-    downloaded: boolean
-    bookmarked: boolean
-    hasActiveFilters: boolean
-    refreshing: boolean
-    query:      string
-    onTab:        (t: LibraryTab) => void
-    onQuery:      (q: string) => void
-    onSort:       (s: LibrarySortOption) => void
-    onSortDesc:   () => void
-    onStatus:     (s: MangaStatus | 'all') => void
-    onUnread:     () => void
-    onDownloaded: () => void
-    onBookmarked: () => void
-    onFilterClear: () => void
-    onRefresh:    () => void
+    tab:               string
+    tabSortMode:       LibrarySortOption
+    tabSortDir:        'asc' | 'desc'
+    tabStatus:         LibraryStatusFilter
+    tabFilters:        Partial<Record<LibraryContentFilter, boolean>>
+    hasActiveFilters:  boolean
+    visibleCategories: Category[]
+    visibleTabIds:     string[]
+    counts:            Record<string, number>
+    query:             string
+    refreshing:        boolean
+    refreshProgress:   { finished: number; total: number }
+    refreshDone:       boolean
+    refreshingCatId:   number | null
+    activeDragKind:    'tab' | null
+    dragInsertIdx:     number
+    dragTabId:         string | null
+    dragOverTabId:     string | null
+    onTabChange:        (t: string) => void
+    onQuery:            (q: string) => void
+    onSortChange:       (mode: LibrarySortOption) => void
+    onSortDirToggle:    () => void
+    onStatusChange:     (s: LibraryStatusFilter) => void
+    onFilterToggle:     (f: LibraryContentFilter) => void
+    onFiltersClear:     () => void
+    onRefresh:          () => void
+    onCancelRefresh:    () => void
+    onRefreshCategory:  (catId: number) => void
+    onOpenDownloadsFolder: () => void
+    onTabDragStart:     (e: DragEvent, id: string) => void
+    onTabDragOver:      (e: DragEvent, id: string, idx: number) => void
+    onTabDragLeave:     () => void
+    onTabDrop:          (e: DragEvent, id: string) => void
+    onTabDragEnd:       () => void
  }

  let {
-    tab, savedCount, dlCount, sort, sortDesc,
-    status, unread, downloaded, bookmarked, hasActiveFilters, refreshing, query,
-    onTab, onQuery, onSort, onSortDesc,
-    onStatus, onUnread, onDownloaded, onBookmarked, onFilterClear, onRefresh,
+    tab, tabSortMode, tabSortDir, tabStatus, tabFilters,
+    hasActiveFilters, visibleCategories, visibleTabIds, counts, query,
+    refreshing, refreshProgress, refreshDone, refreshingCatId,
+    activeDragKind, dragInsertIdx, dragTabId, dragOverTabId,
+    onTabChange, onQuery, onSortChange, onSortDirToggle,
+    onStatusChange, onFilterToggle, onFiltersClear,
+    onRefresh, onCancelRefresh, onOpenDownloadsFolder,
+    onTabDragStart, onTabDragOver, onTabDragLeave, onTabDrop, onTabDragEnd,
  }: Props = $props()

  let sortOpen   = $state(false)
  let filterOpen = $state(false)

  const SORT_LABELS: Record<LibrarySortOption, string> = {
-    alphabetical: 'A–Z',
-    unread:       'Unread chapters',
-    lastRead:     'Recently read',
-    dateAdded:    'Date added',
+    alphabetical:   'A–Z',
+    unread:         'Unread chapters',
+    lastRead:       'Recently read',
+    dateAdded:      'Date added',
+    totalChapters:  'Total chapters',
+    latestFetched:  'Latest fetched',
+    latestUploaded: 'Latest uploaded',
+  }
+
+  function catById(id: string): Category | undefined {
+    return visibleCategories.find(c => String(c.id) === id)
  }

  function onDocDown(e: MouseEvent) {
@@ -64,17 +87,49 @@
 <div class="toolbar">
  <span class="heading">Library</span>

-  <div class="tabs">
-    <button class="tab" class:active={tab === 'saved'} onclick={() => onTab('saved')}>
-      <Books size={11} weight="bold" />
-      Saved
-      <span class="count">{savedCount}</span>
-    </button>
-    <button class="tab" class:active={tab === 'downloaded'} onclick={() => onTab('downloaded')}>
-      <DownloadSimple size={11} weight="bold" />
-      Downloaded
-      <span class="count">{dlCount}</span>
-    </button>
+  <div class="tabs" role="tablist">
+    {#each visibleTabIds as id, idx}
+      {@const isActive   = tab === id}
+      {@const isDragOver = dragOverTabId === id}
+      {@const showInsertBefore = activeDragKind === 'tab' && dragInsertIdx === idx}
+      {@const showInsertAfter  = activeDragKind === 'tab' && dragInsertIdx === idx + 1 && idx === visibleTabIds.length - 1}
+
+      {#if showInsertBefore}
+        <div class="drop-indicator" aria-hidden="true"></div>
+      {/if}
+
+      <button
+        class="tab"
+        class:active={isActive}
+        class:drag-over={isDragOver}
+        role="tab"
+        aria-selected={isActive}
+        draggable="true"
+        ondragstart={(e) => onTabDragStart(e, id)}
+        ondragover={(e) => onTabDragOver(e, id, idx)}
+        ondragleave={onTabDragLeave}
+        ondrop={(e) => onTabDrop(e, id)}
+        ondragend={onTabDragEnd}
+        onclick={() => onTabChange(id)}
+      >
+        {#if id === 'library'}
+          <Books size={11} weight="bold" />
+          Library
+        {:else if id === 'downloaded'}
+          <DownloadSimple size={11} weight="bold" />
+          Downloaded
+        {:else}
+          {@const cat = catById(id)}
+          <FolderSimple size={11} weight="bold" />
+          {cat?.name ?? id}
+        {/if}
+        <span class="count">{counts[id] ?? 0}</span>
+      </button>
+
+      {#if showInsertAfter}
+        <div class="drop-indicator" aria-hidden="true"></div>
+      {/if}
+    {/each}
  </div>

  <div class="right">
@@ -88,20 +143,36 @@
      />
    </div>

+    {#if tab === 'downloaded'}
+      <button class="icon-btn" title="Open downloads folder" onclick={onOpenDownloadsFolder}>
+        <FolderSimple size={15} weight="bold" />
+      </button>
+    {/if}
+
    <button
      class="icon-btn"
      class:spinning={refreshing}
-      title={refreshing ? 'Checking for updates…' : 'Check for updates'}
-      onclick={onRefresh}
-      disabled={refreshing}
+      class:done={refreshDone}
+      title={refreshing ? 'Cancel update' : 'Check for updates'}
+      onclick={refreshing ? onCancelRefresh : onRefresh}
    >
-      <ArrowsClockwise size={15} weight="bold" />
+      {#if refreshing}
+        <X size={15} weight="bold" />
+      {:else}
+        <ArrowsClockwise size={15} weight="bold" />
+      {/if}
    </button>

+    {#if refreshing && refreshProgress.total > 0}
+      <span class="refresh-label">
+        {refreshProgress.finished}/{refreshProgress.total}
+      </span>
+    {/if}
+
    <div class="sort-wrap">
      <button
        class="icon-btn"
-        class:active={sort !== 'alphabetical' || sortDesc}
+        class:active={tabSortMode !== 'alphabetical' || tabSortDir !== 'asc'}
        title="Sort"
        onclick={() => { sortOpen = !sortOpen; filterOpen = false }}
      >
@@ -118,21 +189,21 @@
          {#each Object.entries(SORT_LABELS) as [s, label]}
            <button
              class="item"
-              class:item-active={sort === s}
+              class:item-active={tabSortMode === s}
              role="menuitem"
-              onclick={() => { onSort(s as LibrarySortOption); sortOpen = false }}
+              onclick={() => { onSortChange(s as LibrarySortOption); sortOpen = false }}
            >
              {label}
-              {#if sort === s}
-                {#if sortDesc}<CaretDown size={11} weight="bold" />
+              {#if tabSortMode === s}
+                {#if tabSortDir === 'desc'}<CaretDown size={11} weight="bold" />
                {:else}<CaretUp size={11} weight="bold" />
                {/if}
              {/if}
            </button>
          {/each}
-          <button class="item dir-toggle" role="menuitem" onclick={onSortDesc}>
-            {sortDesc ? 'Descending' : 'Ascending'}
-            {#if sortDesc}<CaretDown size={11} weight="bold" />
+          <button class="item dir-toggle" role="menuitem" onclick={onSortDirToggle}>
+            {tabSortDir === 'desc' ? 'Descending' : 'Ascending'}
+            {#if tabSortDir === 'desc'}<CaretDown size={11} weight="bold" />
            {:else}<CaretUp size={11} weight="bold" />
            {/if}
          </button>
@@ -142,12 +213,14 @@

    <div class="filter-wrap">
      <LibraryFilters
-        {status} {unread} {downloaded} {bookmarked}
+        status={tabStatus}
+        filters={tabFilters}
        hasActive={hasActiveFilters}
        open={filterOpen}
        onToggle={() => { filterOpen = !filterOpen; sortOpen = false }}
-        {onStatus} {onUnread} {onDownloaded} {onBookmarked}
-        onClear={onFilterClear}
+        {onStatusChange}
+        {onFilterToggle}
+        onClear={onFiltersClear}
      />
    </div>
  </div>
@@ -156,11 +229,13 @@
 <style>
  .toolbar {
    position: relative; z-index: 100;
-    display: flex; align-items: center; gap: var(--sp-4);
+    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-6);
    border-bottom: 1px solid var(--border-dim);
-    flex-shrink: 0; min-width: 0;
+    flex-shrink: 0; min-width: 0; overflow-x: auto;
+    scrollbar-width: none;
  }
+  .toolbar::-webkit-scrollbar { display: none; }

  .heading {
    font-family: var(--font-ui); font-size: var(--text-xs);
@@ -172,6 +247,7 @@
    display: flex; align-items: center; gap: 2px;
    background: var(--bg-raised); border: 1px solid var(--border-dim);
    border-radius: var(--radius-md); padding: 2px;
+    flex-shrink: 0;
  }

  .tab {
@@ -180,15 +256,22 @@
    letter-spacing: var(--tracking-wide); text-transform: uppercase;
    padding: 4px 10px; border-radius: var(--radius-sm);
    border: 1px solid transparent; color: var(--text-faint);
-    white-space: nowrap;
+    white-space: nowrap; cursor: pointer;
    transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
-    cursor: pointer;
+    user-select: none;
  }
-  .tab:hover { color: var(--text-muted); }
-  .tab.active { background: var(--accent-muted); color: var(--accent-fg); border-color: var(--accent-dim); }
+  .tab:hover        { color: var(--text-muted); }
+  .tab.active       { background: var(--accent-muted); color: var(--accent-fg); border-color: var(--accent-dim); }
+  .tab.drag-over    { border-color: var(--accent); }

  .count { font-size: var(--text-2xs); opacity: 0.6; }

+  .drop-indicator {
+    width: 2px; height: 20px; background: var(--accent);
+    border-radius: 1px; flex-shrink: 0;
+    animation: fadeIn 0.1s ease both;
+  }
+
  .right {
    display: flex; align-items: center; gap: var(--sp-2);
    margin-left: auto; flex-shrink: 0;
@@ -205,6 +288,12 @@
  .search::placeholder { color: var(--text-faint); }
  .search:focus { border-color: var(--border-strong); }

+  .refresh-label {
+    font-family: var(--font-ui); font-size: var(--text-2xs);
+    color: var(--text-faint); letter-spacing: var(--tracking-wide);
+    white-space: nowrap;
+  }
+
  .icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
@@ -216,10 +305,9 @@
  .icon-btn:hover:not(:disabled) { color: var(--text-primary); border-color: var(--border-strong); }
  .icon-btn.active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
  .icon-btn:disabled { opacity: 0.5; cursor: default; }
+  .icon-btn.done { color: var(--color-success, #4caf50); border-color: color-mix(in srgb, var(--color-success, #4caf50) 40%, transparent); }
  .icon-btn.spinning :global(svg) { animation: spin 1s linear infinite; }

-  @keyframes spin { to { transform: rotate(360deg); } }
-
  .sort-wrap, .filter-wrap { position: relative; }

  .panel {
@@ -249,8 +337,8 @@
    cursor: pointer; text-align: left; gap: var(--sp-2);
    transition: background var(--t-base), color var(--t-base);
  }
-  .item:hover { background: var(--bg-overlay); color: var(--text-primary); }
-  .item-active { color: var(--accent-fg); background: var(--accent-muted); font-weight: var(--weight-medium, 500); }
+  .item:hover       { background: var(--bg-overlay); color: var(--text-primary); }
+  .item-active      { color: var(--accent-fg); background: var(--accent-muted); font-weight: var(--weight-medium, 500); }
  .item-active:hover { background: var(--accent-dim); }
  .dir-toggle {
    justify-content: flex-start; color: var(--text-secondary);
@@ -259,5 +347,6 @@
    margin-top: 2px; padding-top: 9px;
  }

-  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
+  @keyframes spin    { to { transform: rotate(360deg); } }
+  @keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
 </style>
@@ -0,0 +1,52 @@
+import { createSorter }    from '$lib/core/algorithms/sort'
+import type { Manga }      from '$lib/types'
+import type { LibrarySortOption, LibrarySortDir } from '$lib/state/library.svelte'
+
+export const librarySorter = createSorter<Manga>({
+  defaultField: 'alphabetical',
+  defaultDir:   'asc',
+  fields: [
+    {
+      key:        'alphabetical',
+      comparator: (a, b) => a.title.localeCompare(b.title, undefined, { sensitivity: 'base' }),
+    },
+    {
+      key:        'unread',
+      comparator: (a, b) => (a.unreadCount ?? 0) - (b.unreadCount ?? 0),
+    },
+    {
+      key:        'totalChapters',
+      comparator: (a, b) => (a.chapters?.totalCount ?? 0) - (b.chapters?.totalCount ?? 0),
+    },
+    {
+      key:        'dateAdded',
+      comparator: (a, b) => Number(a.inLibraryAt ?? 0) - Number(b.inLibraryAt ?? 0),
+    },
+    {
+      key:        'lastRead',
+      comparator: (a, b, ctx) => {
+        const map = ctx?.recentlyReadMap as Map<number, number> | undefined
+        return (map?.get(a.id) ?? 0) - (map?.get(b.id) ?? 0)
+      },
+    },
+    {
+      key:        'latestFetched',
+      comparator: (a, b) =>
+        Number(a.latestFetchedChapter?.uploadDate ?? 0) - Number(b.latestFetchedChapter?.uploadDate ?? 0),
+    },
+    {
+      key:        'latestUploaded',
+      comparator: (a, b) =>
+        Number(a.latestUploadedChapter?.uploadDate ?? 0) - Number(b.latestUploadedChapter?.uploadDate ?? 0),
+    },
+  ],
+})
+
+export function sortLibrary(
+  items:           Manga[],
+  mode:            LibrarySortOption,
+  dir:             LibrarySortDir,
+  recentlyReadMap?: Map<number, number>,
+): Manga[] {
+  return librarySorter.sort(items, mode, dir, recentlyReadMap ? { recentlyReadMap } : undefined)
+}
@@ -0,0 +1,125 @@
+import { getAdapter } from '$lib/request-manager'
+
+const POLL_INTERVAL_MS = 2000
+const POLL_INITIAL_MS  = 500
+
+export interface UpdateProgress {
+  finished:          number
+  total:             number
+  skippedManga:      number
+  skippedCategories: number
+}
+
+export interface UpdateResult {
+  entries:      UpdateEntry[]
+  totalUpdated: number
+  newChapters:  number
+}
+
+export interface UpdateEntry {
+  mangaId:      number
+  mangaTitle:   string
+  thumbnailUrl: string
+  newChapters:  number
+  checkedAt:    number
+}
+
+export interface LibraryUpdaterCallbacks {
+  onProgress: (p: UpdateProgress) => void
+  onDone:     (r: UpdateResult)   => void
+  onError:    (e?: unknown)       => void
+}
+
+function buildEntries(
+  mangaUpdates: { status: string; manga: { id: number; title: string; thumbnailUrl: string; unreadCount: number } }[]
+): UpdateEntry[] {
+  const byManga = new Map<number, UpdateEntry>()
+  for (const u of mangaUpdates) {
+    if (u.status !== 'UPDATED') continue
+    const existing = byManga.get(u.manga.id)
+    if (existing) {
+      existing.newChapters++
+    } else {
+      byManga.set(u.manga.id, {
+        mangaId:      u.manga.id,
+        mangaTitle:   u.manga.title,
+        thumbnailUrl: u.manga.thumbnailUrl,
+        newChapters:  1,
+        checkedAt:    Date.now(),
+      })
+    }
+  }
+  return [...byManga.values()]
+}
+
+export function startLibraryUpdate(callbacks: LibraryUpdaterCallbacks): () => void {
+  let timer:    ReturnType<typeof setTimeout> | null = null
+  let cancelled = false
+
+  function cancel() {
+    cancelled = true
+    if (timer) { clearTimeout(timer); timer = null }
+  }
+
+  async function run() {
+    let jobsStarted = false
+
+    try {
+      const status = await getAdapter().checkForUpdates()
+      if (cancelled) return
+
+      const { jobsInfo } = status
+      jobsStarted = jobsInfo.totalJobs > 0
+
+      callbacks.onProgress({
+        finished:          jobsInfo.finishedJobs,
+        total:             jobsInfo.totalJobs,
+        skippedManga:      jobsInfo.skippedMangasCount,
+        skippedCategories: jobsInfo.skippedCategoriesCount,
+      })
+
+      if (!jobsStarted || !jobsInfo.isRunning) {
+        callbacks.onDone({ entries: [], totalUpdated: 0, newChapters: 0 })
+        return
+      }
+    } catch (e) {
+      console.error('[libraryUpdater] failed to start update', e)
+      if (!cancelled) callbacks.onError(e)
+      return
+    }
+
+    function poll() {
+      getAdapter().getLibraryUpdateStatus()
+        .then(d => {
+          if (cancelled) return
+          const { jobsInfo, mangaUpdates } = d
+
+          if (jobsInfo.totalJobs > 0) jobsStarted = true
+          callbacks.onProgress({
+            finished:          jobsInfo.finishedJobs,
+            total:             jobsInfo.totalJobs,
+            skippedManga:      jobsInfo.skippedMangasCount,
+            skippedCategories: jobsInfo.skippedCategoriesCount,
+          })
+
+          if (!jobsInfo.isRunning && jobsStarted) {
+            const entries     = buildEntries(mangaUpdates)
+            const newChapters = entries.reduce((s, e) => s + e.newChapters, 0)
+            callbacks.onDone({ entries, totalUpdated: entries.length, newChapters })
+            return
+          }
+
+          timer = setTimeout(poll, POLL_INTERVAL_MS)
+        })
+        .catch(e => {
+          console.error('[libraryUpdater] poll error', e)
+          if (!cancelled) callbacks.onError(e)
+        })
+    }
+
+    timer = setTimeout(poll, POLL_INITIAL_MS)
+  }
+
+  run()
+  return cancel
+}
@@ -0,0 +1,202 @@
+<script lang="ts">
+  import { Download, CheckCircle, Circle, CircleNotch, Trash } from 'phosphor-svelte'
+  import ContextMenu from '$lib/components/shared/ui/ContextMenu.svelte'
+  import type { MenuEntry } from '$lib/components/shared/ui/ContextMenu.svelte'
+  import { longPress } from '$lib/core/ui/touchscreen'
+  import type { Chapter } from '$lib/types'
+
+  interface Props {
+    pageChapters:    Chapter[]
+    sortedChapters:  Chapter[]
+    viewMode:        'list' | 'grid'
+    loadingChapters: boolean
+    selectedIds:     Set<number>
+    enqueueing:      Set<number>
+    chapterPage:     number
+    totalPages:      number
+    scrollEl?:       HTMLDivElement | null
+    onOpen:          (ch: Chapter, inProgress: boolean) => void
+    onToggleSelect:  (id: number, e: MouseEvent | KeyboardEvent) => void
+    onEnqueue:       (ch: Chapter, e: MouseEvent) => void
+    onDeleteDownload:(id: number) => void
+    onPageChange:    (page: number) => void
+    buildCtxItems:   (ch: Chapter, idx: number) => MenuEntry[]
+  }
+
+  let {
+    pageChapters, sortedChapters, viewMode, loadingChapters,
+    selectedIds, enqueueing, chapterPage, totalPages,
+    scrollEl = $bindable(null),
+    onOpen, onToggleSelect, onEnqueue, onDeleteDownload,
+    onPageChange, buildCtxItems,
+  }: Props = $props()
+
+  let ctx: { x: number; y: number; chapter: Chapter; idx: number } | null = $state(null)
+
+  const hasSelection = $derived(selectedIds.size > 0)
+
+  function chapterLongPress(node: HTMLElement, param: [Chapter, number]) {
+    const [ch, idx] = param
+    return longPress(node, {
+      onLongPress(e) { ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx } },
+    })
+  }
+
+  function formatDate(ts: string | null | undefined): string {
+    if (!ts) return ''
+    const n = Number(ts)
+    const d = new Date(n > 1e10 ? n : n * 1000)
+    return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+  }
+</script>
+
+<div class={viewMode === 'grid' ? 'ch-grid' : 'ch-list'} bind:this={scrollEl}>
+  {#if loadingChapters && sortedChapters.length === 0}
+    {#if viewMode === 'grid'}
+      {#each Array(24) as _}<div class="grid-cell-skeleton skeleton"></div>{/each}
+    {:else}
+      {#each Array(8) as _}
+        <div class="row-skeleton">
+          <div class="skeleton sk-line" style="width:55%;height:12px"></div>
+          <div class="skeleton sk-line" style="width:25%;height:11px"></div>
+        </div>
+      {/each}
+    {/if}
+
+  {:else if viewMode === 'grid'}
+    {#each sortedChapters as ch, i}
+      {@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}
+        use:chapterLongPress={[ch, i]}
+        onclick={(e) => hasSelection ? onToggleSelect(ch.id, e) : onOpen(ch, inProgress)}
+        oncontextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: i } }}
+        title={ch.name}
+      >
+        {#if isGridSelected}<span class="grid-cell-check">✓</span>{/if}
+        <span class="grid-cell-num">{ch.chapterNumber % 1 === 0 ? ch.chapterNumber.toFixed(0) : ch.chapterNumber}</span>
+        {#if ch.isDownloaded}<span class="grid-cell-dl" title="Downloaded"></span>{/if}
+        {#if ch.isRead}<span class="grid-cell-dot"></span>{/if}
+        {#if enqueueing.has(ch.id)}<span class="grid-cell-spinner"><CircleNotch size={10} weight="light" class="anim-spin" /></span>{/if}
+      </button>
+    {/each}
+
+  {:else}
+    {#each pageChapters as ch}
+      {@const idxInSorted  = sortedChapters.indexOf(ch)}
+      {@const isSelected   = selectedIds.has(ch.id)}
+      {@const chInProgress = !ch.isRead && (ch.lastPageRead ?? 0) > 0}
+      <div
+        role="button"
+        tabindex="0"
+        class="ch-row"
+        class:read={ch.isRead}
+        class:ch-selected={isSelected}
+        use:chapterLongPress={[ch, idxInSorted]}
+        onclick={(e) => hasSelection ? onToggleSelect(ch.id, e) : onOpen(ch, chInProgress)}
+        onkeydown={(e) => e.key === 'Enter' && (hasSelection ? onToggleSelect(ch.id, e) : onOpen(ch, chInProgress))}
+        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) => onToggleSelect(ch.id, e)} title="Select">
+          {#if isSelected}<CheckCircle size={15} weight="fill" />{:else}<Circle size={15} weight="light" />{/if}
+        </button>
+        <div class="ch-left">
+          <span class="ch-name">{ch.name}</span>
+          <div class="ch-meta">
+            {#if ch.scanlator}<span class="ch-meta-item">{ch.scanlator}</span>{/if}
+            {#if ch.uploadDate}<span class="ch-meta-item">{formatDate(ch.uploadDate)}</span>{/if}
+            {#if ch.lastPageRead && ch.lastPageRead > 0 && !ch.isRead}<span class="ch-meta-item">p.{ch.lastPageRead}</span>{/if}
+          </div>
+        </div>
+        <div class="ch-right">
+          {#if ch.isRead}<CheckCircle size={14} weight="light" class="read-icon" />{/if}
+          {#if ch.isDownloaded}
+            <div class="ch-dl-wrap">
+              <Download size={13} weight="fill" class="ch-dl-icon" />
+              <button class="dl-btn dl-btn-delete" onclick={(e) => { e.stopPropagation(); onDeleteDownload(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}
+            <button class="dl-btn" onclick={(e) => { e.stopPropagation(); onEnqueue(ch, e) }} title="Download">
+              <Download size={13} weight="light" />
+            </button>
+          {/if}
+        </div>
+      </div>
+    {/each}
+  {/if}
+</div>
+
+{#if totalPages > 1}
+  <div class="pagination-bottom">
+    <button class="page-btn" onclick={() => onPageChange(Math.max(1, chapterPage - 1))} disabled={chapterPage === 1}>← Prev</button>
+    <span class="page-num">{chapterPage} / {totalPages}</span>
+    <button class="page-btn" onclick={() => onPageChange(Math.min(totalPages, chapterPage + 1))} disabled={chapterPage === totalPages}>Next →</button>
+  </div>
+{/if}
+
+{#if ctx}
+  <ContextMenu x={ctx.x} y={ctx.y} items={buildCtxItems(ctx.chapter, ctx.idx)} onClose={() => ctx = null} />
+{/if}
+
+<style>
+  .ch-list  { flex: 1; overflow-y: auto; }
+  .ch-grid  { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; padding: var(--sp-3); align-content: start; }
+
+  .ch-row { display: flex; align-items: center; padding: 10px var(--sp-4); border-bottom: 1px solid var(--border-dim); cursor: pointer; transition: background var(--t-fast); gap: var(--sp-3); }
+  .ch-row:hover { background: var(--bg-raised); }
+  .ch-row.read { opacity: 0.45; }
+  .ch-left  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
+  .ch-name  { font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .ch-meta  { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
+  .ch-meta-item { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .ch-right { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
+  :global(.read-icon)    { color: var(--text-faint); }
+  :global(.enqueue-icon) { color: var(--text-faint); }
+
+  .dl-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-sm); color: var(--text-faint); transition: color var(--t-base), background var(--t-base); opacity: 0; }
+  .ch-row:hover .dl-btn { opacity: 1; }
+  .dl-btn:hover { color: var(--text-muted); background: var(--bg-overlay); }
+  .dl-btn-delete { color: var(--color-error) !important; opacity: 0; }
+  .ch-row:hover .dl-btn-delete { opacity: 1; }
+  .dl-btn-delete:hover { background: var(--color-error-bg) !important; }
+
+  .ch-dl-wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
+  :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; }
+
+  .ch-check { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: var(--radius-sm); border: none; background: none; color: var(--text-faint); cursor: pointer; opacity: 0; transition: opacity var(--t-fast), color var(--t-fast); padding: 0; }
+  .ch-row:hover .ch-check { opacity: 1; }
+  .ch-check-visible { opacity: 1 !important; }
+  .ch-selected { background: color-mix(in srgb, var(--accent) 8%, transparent) !important; }
+  .ch-selected .ch-check { color: var(--accent-fg); opacity: 1; }
+
+  .row-skeleton { display: flex; flex-direction: column; gap: var(--sp-2); padding: 12px var(--sp-4); border-bottom: 1px solid var(--border-dim); }
+
+  .grid-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--bg-raised); border: 1px solid var(--border-dim); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); cursor: pointer; position: relative; transition: background var(--t-fast), border-color var(--t-fast); }
+  .grid-cell:hover { background: var(--bg-overlay); border-color: var(--border-strong); }
+  .grid-cell.read { background: var(--color-read); color: var(--text-faint); border-color: transparent; }
+  .grid-cell.in-progress { border-color: var(--accent-dim); color: var(--accent-fg); }
+  .grid-cell-num { font-size: 10px; }
+  .grid-cell-dot { position: absolute; bottom: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); }
+  .grid-cell-dl  { position: absolute; top: 3px; left: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-fg); }
+  .grid-cell-spinner { position: absolute; top: 2px; right: 2px; }
+  .grid-cell-skeleton { aspect-ratio: 1; border-radius: var(--radius-sm); }
+  .grid-selected { background: var(--accent-muted) !important; border-color: var(--accent-dim) !important; }
+  .grid-cell-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--accent-fg); pointer-events: none; }
+
+  .pagination-bottom { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--border-dim); flex-shrink: 0; }
+  .page-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); color: var(--text-faint); background: none; cursor: pointer; transition: color var(--t-base), border-color var(--t-base); }
+  .page-btn:hover:not(:disabled) { color: var(--text-muted); border-color: var(--border-strong); }
+  .page-btn:disabled { opacity: 0.3; cursor: default; }
+  .page-num { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+</style>
@@ -0,0 +1,658 @@
+<script lang="ts">
+  import {
+    Download, CheckCircle, Circle, SortAscending, SortDescending,
+    CaretDown, ArrowsClockwise, List, SquaresFour, FolderSimplePlus,
+    Trash, DownloadSimple, X, MagnifyingGlass, Funnel, Check,
+  } from 'phosphor-svelte'
+  import type { Chapter, Category } from '$lib/types'
+  import type { ChapterSortMode, ChapterSortDir } from './lib/chapterList'
+  import { updateSettings } from '$lib/state/settings.svelte'
+
+  interface ContinueChapter {
+    chapter:    Chapter
+    type:       'start' | 'continue' | 'reread'
+    resumePage: number | null
+  }
+
+  interface Props {
+    chapters:                Chapter[]
+    sortedChapters:          Chapter[]
+    sortMode:                ChapterSortMode
+    sortDir:                 ChapterSortDir
+    viewMode:                'list' | 'grid'
+    chapterPage:             number
+    totalPages:              number
+    downloadedCount:         number
+    totalCount:              number
+    deletingAll:             boolean
+    hasSelection:            boolean
+    selectedCount:           number
+    continueChapter:         ContinueChapter | null
+    availableScanlators:     string[]
+    scanlatorFilter:         string[]
+    scanlatorBlacklist:      string[]
+    scanlatorForce:          boolean
+    allCategories:           Category[]
+    mangaCategories:         Category[]
+    catsLoading:             boolean
+    refreshing:              boolean
+    onViewModeToggle:        () => void
+    onPageChange:            (page: number) => void
+    onDownloadSelected:      () => void
+    onDeleteSelected:        () => void
+    onMarkSelectedRead:      (isRead: boolean) => void
+    onClearSelection:        () => void
+    onEnqueueNext:           (n: number) => void
+    onEnqueueMultiple:       (ids: number[]) => void
+    onDeleteAll:             () => void
+    onRefresh:               () => void
+    onToggleCategory:        (cat: Category) => void
+    onCreateCategory:        (name: string) => void
+    onSetScanlatorFilter:    (v: string[]) => void
+    onSetScanlatorBlacklist: (v: string[]) => void
+    onSetScanlatorForce:     (v: boolean) => void
+  }
+
+  let {
+    chapters, sortedChapters, sortMode, sortDir, viewMode,
+    chapterPage, totalPages, downloadedCount, totalCount, deletingAll,
+    hasSelection, selectedCount, continueChapter,
+    availableScanlators, scanlatorFilter, scanlatorBlacklist, scanlatorForce,
+    allCategories, mangaCategories, catsLoading, refreshing,
+    onViewModeToggle, onPageChange, onDownloadSelected, onDeleteSelected,
+    onMarkSelectedRead, onClearSelection, onEnqueueNext, onEnqueueMultiple,
+    onDeleteAll, onRefresh, onToggleCategory, onCreateCategory,
+    onSetScanlatorFilter, onSetScanlatorBlacklist, onSetScanlatorForce,
+  }: Props = $props()
+
+  let sortMenuOpen:    boolean = $state(false)
+  let jumpOpen:        boolean = $state(false)
+  let jumpInput:       string  = $state('')
+  let scanFilterOpen:  boolean = $state(false)
+  let scanTab: 'prefer' | 'block' = $state('prefer')
+  let dlOpen:          boolean = $state(false)
+  let showRange:       boolean = $state(false)
+  let rangeFrom:       string  = $state('')
+  let rangeTo:         string  = $state('')
+  let folderPickerOpen: boolean = $state(false)
+  let folderCreating:   boolean = $state(false)
+  let folderNewName:    string  = $state('')
+  let dlDropRef:        HTMLDivElement | undefined = $state()
+  let folderPickerRef:  HTMLDivElement | undefined = $state()
+
+  const hasFolders = $derived(mangaCategories.filter(c => c.id !== 0).length > 0)
+
+  const jumpChapter = $derived.by(() => {
+    const q = jumpInput.trim().toLowerCase()
+    if (!q) return null
+    const num = parseFloat(q)
+    if (!isNaN(num)) return sortedChapters.find(c => c.chapterNumber === num) ?? null
+    return sortedChapters.find(c => c.name.toLowerCase().includes(q)) ?? null
+  })
+
+  function focusOnMount(node: HTMLElement) { node.focus() }
+
+  function doJump() {
+    if (!jumpChapter) return
+    const pageIdx = sortedChapters.indexOf(jumpChapter)
+    if (pageIdx >= 0) onPageChange(Math.floor(pageIdx / 25) + 1)
+    jumpOpen = false; jumpInput = ''
+  }
+
+  function enqueueRange() {
+    const from = parseFloat(rangeFrom), to = parseFloat(rangeTo)
+    if (isNaN(from) || isNaN(to)) return
+    const lo = Math.min(from, to), hi = Math.max(from, to)
+    onEnqueueMultiple(sortedChapters.filter(c => c.chapterNumber >= lo && c.chapterNumber <= hi && !c.isDownloaded).map(c => c.id))
+  }
+
+  function submitNewFolder() {
+    const name = folderNewName.trim()
+    if (!name) return
+    onCreateCategory(name)
+    folderNewName = ''; folderCreating = false
+  }
+
+  $effect(() => {
+    if (dlOpen) { setTimeout(() => document.addEventListener('mousedown', handleDlOutside, true), 0) }
+    else document.removeEventListener('mousedown', handleDlOutside, true)
+  })
+
+  $effect(() => {
+    if (folderPickerOpen) { setTimeout(() => document.addEventListener('mousedown', handleFolderOutside, true), 0) }
+    else document.removeEventListener('mousedown', handleFolderOutside, true)
+  })
+
+  $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)
+  })
+
+  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 = ''
+    }
+  }
+</script>
+
+<div class="list-header">
+  <div class="list-header-left">
+    {#if hasSelection}
+      <span class="sel-count">{selectedCount} selected</span>
+      <button class="sel-action-btn" onclick={onDownloadSelected} title="Download selected"><Download size={13} weight="light" /></button>
+      <button class="sel-action-btn sel-action-danger" onclick={onDeleteSelected} title="Delete selected downloads"><Trash size={13} weight="light" /></button>
+      <button class="sel-action-btn" onclick={() => onMarkSelectedRead(true)} title="Mark selected as read"><CheckCircle size={13} weight="light" /></button>
+      <button class="sel-action-btn" onclick={() => onMarkSelectedRead(false)} title="Mark selected as unread"><Circle size={13} weight="light" /></button>
+      <button class="sel-action-btn" onclick={onClearSelection} title="Clear selection"><X size={13} weight="light" /></button>
+    {:else}
+      <div class="sort-wrap">
+        <button class="sort-btn" onclick={() => sortMenuOpen = !sortMenuOpen}>
+          {#if sortDir === 'desc'}<SortDescending size={14} weight="light" />{:else}<SortAscending size={14} weight="light" />{/if}
+          {{ source: 'Source order', chapterNumber: 'Ch. number', uploadDate: 'Upload date' }[sortMode]}
+          <CaretDown size={10} weight="light" />
+        </button>
+        {#if sortMenuOpen}
+          <div class="sort-menu" role="presentation" onmouseleave={() => sortMenuOpen = false}>
+            {#each [['source','Source order'],['chapterNumber','Chapter number'],['uploadDate','Upload date']] as [val, label]}
+              <button
+                class="sort-option"
+                class:active={sortMode === val}
+                onclick={() => { updateSettings({ chapterSortMode: val as ChapterSortMode }); onPageChange(1); sortMenuOpen = false }}
+              >{label}</button>
+            {/each}
+            <div class="sort-divider"></div>
+            <button class="sort-option" onclick={() => { updateSettings({ chapterSortDir: sortDir === 'desc' ? 'asc' : 'desc' }); onPageChange(1); sortMenuOpen = false }}>
+              {sortDir === 'desc' ? '↑ Ascending' : '↓ Descending'}
+            </button>
+          </div>
+        {/if}
+      </div>
+      <button class="icon-btn" class:active={viewMode === 'grid'} onclick={onViewModeToggle} title={viewMode === 'list' ? 'Grid view' : 'List view'}>
+        {#if viewMode === 'list'}<SquaresFour size={14} weight="light" />{:else}<List size={14} weight="light" />{/if}
+      </button>
+    {/if}
+  </div>
+
+  <div class="list-header-right">
+
+    <div class="jump-wrap">
+      <button class="icon-btn" class:active={jumpOpen} onclick={() => { jumpOpen = !jumpOpen; jumpInput = '' }} title="Jump to chapter">
+        <MagnifyingGlass size={14} weight="light" />
+      </button>
+      {#if jumpOpen}
+        <div class="jump-popover">
+          <input
+            class="jump-input"
+            placeholder="Chapter # or name…"
+            bind:value={jumpInput}
+            use:focusOnMount
+            onkeydown={(e) => { if (e.key === 'Enter') doJump(); if (e.key === 'Escape') { jumpOpen = false; jumpInput = '' } }}
+          />
+          {#if jumpChapter}
+            <button class="jump-go" onclick={doJump}>Go · {jumpChapter.name}</button>
+          {:else if jumpInput.trim()}
+            <p class="jump-none">No match</p>
+          {/if}
+        </div>
+      {/if}
+    </div>
+
+    {#if availableScanlators.length > 1}
+      <div class="scan-filter-wrap">
+        <button
+          class="icon-btn"
+          class:active={scanlatorFilter.length > 0 || scanlatorBlacklist.length > 0}
+          onclick={() => scanFilterOpen = !scanFilterOpen}
+          title="Filter by scanlator"
+        >
+          <Funnel size={14} weight={scanlatorFilter.length > 0 || scanlatorBlacklist.length > 0 ? 'fill' : 'light'} />
+        </button>
+        {#if scanFilterOpen}
+          <div class="scan-filter-panel" role="menu">
+            <div class="scan-filter-header">
+              <div class="scan-filter-tabs">
+                <button class="scan-filter-tab" class:scan-filter-tab-active={scanTab === 'prefer'} onclick={() => scanTab = 'prefer'}>Prefer</button>
+                <button class="scan-filter-tab" class:scan-filter-tab-active={scanTab === 'block'}  onclick={() => scanTab = 'block'}>Block</button>
+              </div>
+              {#if scanTab === 'prefer' && scanlatorFilter.length > 0}
+                <button class="scan-filter-clear" onclick={() => { onSetScanlatorFilter([]); onSetScanlatorForce(false); onPageChange(1) }}>Clear</button>
+              {:else if scanTab === 'block' && scanlatorBlacklist.length > 0}
+                <button class="scan-filter-clear" onclick={() => { onSetScanlatorBlacklist([]); onPageChange(1) }}>Clear</button>
+              {/if}
+            </div>
+            <div class="scan-filter-divider"></div>
+            {#if scanTab === 'prefer'}
+              <div class="scan-filter-force-row">
+                <span class="scan-filter-force-label" title="Hide chapters with no preferred group match, rather than falling back to any available group.">Enforce</span>
+                <button class="scan-force-toggle" class:scan-force-on={scanlatorForce} onclick={() => { onSetScanlatorForce(!scanlatorForce); onPageChange(1) }}>
+                  {scanlatorForce ? 'On' : 'Off'}
+                </button>
+              </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={() => { onSetScanlatorFilter(scanlatorFilter.includes(s) ? scanlatorFilter.filter(x => x !== s) : [...scanlatorFilter, s]); onPageChange(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}
+            {:else}
+              {#each availableScanlators as s}
+                <button
+                  class="scan-filter-item"
+                  class:scan-filter-item-active={scanlatorBlacklist.includes(s)}
+                  class:scan-filter-item-block={scanlatorBlacklist.includes(s)}
+                  role="menuitem"
+                  onclick={() => { onSetScanlatorBlacklist(scanlatorBlacklist.includes(s) ? scanlatorBlacklist.filter(x => x !== s) : [...scanlatorBlacklist, s]); onPageChange(1) }}
+                >
+                  <span class="scan-filter-check" class:scan-filter-check-block={scanlatorBlacklist.includes(s)}>
+                    {#if scanlatorBlacklist.includes(s)}<X size={9} weight="bold" />{/if}
+                  </span>
+                  {s}
+                </button>
+              {/each}
+            {/if}
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    <button class="icon-btn" onclick={onRefresh} disabled={refreshing}>
+      <ArrowsClockwise size={14} weight="light" class={refreshing ? 'anim-spin' : ''} />
+    </button>
+
+    <div class="fp-wrap" bind:this={folderPickerRef}>
+      <button class="icon-btn" class:active={hasFolders} onclick={() => folderPickerOpen = !folderPickerOpen}>
+        <FolderSimplePlus size={14} weight={hasFolders ? 'fill' : 'light'} />
+      </button>
+      {#if folderPickerOpen}
+        <div class="fp-menu">
+          {#if catsLoading}
+            <p class="fp-empty">Loading…</p>
+          {:else if allCategories.length === 0 && !folderCreating}
+            <p class="fp-empty">No folders yet</p>
+          {/if}
+          {#each allCategories as cat}
+            {@const isIn = mangaCategories.some(c => c.id === cat.id)}
+            <button class="fp-item" class:fp-item-active={isIn} onclick={() => onToggleCategory(cat)}>
+              <span class="fp-check">{isIn ? '✓' : ''}</span>{cat.name}
+            </button>
+          {/each}
+          <div class="fp-div"></div>
+          {#if folderCreating}
+            <div class="fp-create">
+              <input
+                class="fp-input"
+                placeholder="Folder name…"
+                bind:value={folderNewName}
+                use:focusOnMount
+                onkeydown={(e) => { if (e.key === 'Enter') submitNewFolder(); if (e.key === 'Escape') { folderCreating = false; folderNewName = '' } }}
+              />
+              <button class="fp-confirm" onclick={submitNewFolder} disabled={!folderNewName.trim()}>Add</button>
+              <button class="fp-cancel" onclick={() => { folderCreating = false; folderNewName = '' }}><X size={12} weight="light" /></button>
+            </div>
+          {:else}
+            <button class="fp-new" onclick={() => folderCreating = true}>+ New folder</button>
+          {/if}
+        </div>
+      {/if}
+    </div>
+
+    {#if chapters.length > 0}
+      <div class="dl-wrap" bind:this={dlDropRef}>
+        <button class="icon-btn dl-unified-btn" class:active={dlOpen} class:dl-has-count={downloadedCount > 0} onclick={() => dlOpen = !dlOpen} title="Download options">
+          <Download size={13} weight={downloadedCount > 0 ? 'fill' : 'light'} />
+          {#if downloadedCount > 0}<span class="dl-unified-count">{downloadedCount}</span>{/if}
+        </button>
+        {#if dlOpen}
+          <div class="dl-dropdown">
+            {#if downloadedCount > 0}
+              <p class="dl-section-label">{downloadedCount} / {totalCount} downloaded</p>
+              <div class="dl-divider"></div>
+            {/if}
+            {#if continueChapter}
+              {@const contIdx = sortedChapters.indexOf(continueChapter.chapter)}
+              {#if contIdx >= 0}
+                <p class="dl-section-label">From Ch.{continueChapter.chapter.chapterNumber}</p>
+                <div class="dl-next-row">
+                  {#each [5, 10, 25] as n}
+                    {@const avail = sortedChapters.slice(contIdx, contIdx + n).filter(c => !c.isDownloaded).length}
+                    <button class="dl-next-btn" disabled={avail === 0} onclick={() => { onEnqueueNext(n); dlOpen = false }}>
+                      <span>Next {n}</span><span class="dl-next-sub">{avail} new</span>
+                    </button>
+                  {/each}
+                </div>
+                <div class="dl-divider"></div>
+              {/if}
+            {/if}
+            {#if !showRange}
+              <button class="dl-item" onclick={() => showRange = true}>
+                <span>Custom range…</span><span class="dl-item-sub">Enter chapter numbers</span>
+              </button>
+            {:else}
+              <div class="dl-range-row">
+                <button class="dl-range-back" onclick={() => showRange = false}>‹</button>
+                <input class="dl-range-input" placeholder="From" bind:value={rangeFrom} onkeydown={(e) => e.key === 'Enter' && enqueueRange()} use:focusOnMount />
+                <span class="dl-range-sep">–</span>
+                <input class="dl-range-input" placeholder="To" bind:value={rangeTo} onkeydown={(e) => e.key === 'Enter' && enqueueRange()} />
+                <button class="dl-range-go" disabled={!rangeFrom.trim() || !rangeTo.trim()} onclick={enqueueRange}>Go</button>
+              </div>
+            {/if}
+            <div class="dl-divider"></div>
+            <button class="dl-item" onclick={() => { onEnqueueMultiple(sortedChapters.filter(c => !c.isRead && !c.isDownloaded).map(c => c.id)); dlOpen = false }}>
+              <span>Unread chapters</span><span class="dl-item-sub">{sortedChapters.filter(c => !c.isRead && !c.isDownloaded).length} remaining</span>
+            </button>
+            <button class="dl-item" onclick={() => { onEnqueueMultiple(sortedChapters.filter(c => !c.isDownloaded).map(c => c.id)); dlOpen = false }}>
+              <span>Download all</span><span class="dl-item-sub">{sortedChapters.filter(c => !c.isDownloaded).length} not downloaded</span>
+            </button>
+            {#if downloadedCount > 0}
+              <div class="dl-divider"></div>
+              <button class="dl-item dl-item-danger" onclick={() => { onDeleteAll(); dlOpen = false }} disabled={deletingAll}>
+                <span>{deletingAll ? 'Deleting…' : 'Delete all downloads'}</span>
+                <span class="dl-item-sub">{downloadedCount} downloaded</span>
+              </button>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    {#if totalPages > 1}
+      <div class="pagination">
+        <button class="page-btn" onclick={() => onPageChange(Math.max(1, chapterPage - 1))} disabled={chapterPage === 1}>←</button>
+        <span class="page-num">{chapterPage} / {totalPages}</span>
+        <button class="page-btn" onclick={() => onPageChange(Math.min(totalPages, chapterPage + 1))} disabled={chapterPage === totalPages}>→</button>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .list-header {
+    display: flex; align-items: center; justify-content: space-between;
+    padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-dim);
+    flex-shrink: 0; gap: var(--sp-2); flex-wrap: wrap;
+  }
+  .list-header-left,
+  .list-header-right { display: flex; align-items: center; gap: var(--sp-1); }
+
+  .sort-btn {
+    display: flex; align-items: center; gap: 5px;
+    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
+    padding: 4px var(--sp-2); border-radius: var(--radius-sm);
+    color: var(--text-muted); transition: color var(--t-base), background var(--t-base);
+  }
+  .sort-btn:hover { color: var(--text-secondary); background: var(--bg-raised); }
+  .sort-wrap { position: relative; }
+  .sort-menu {
+    position: absolute; top: calc(100% + 4px); left: 0; min-width: 160px;
+    background: var(--bg-raised); border: 1px solid var(--border-base);
+    border-radius: var(--radius-md); padding: var(--sp-1); z-index: 200;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+    animation: scaleIn 0.1s ease both; transform-origin: top left;
+  }
+  .sort-option {
+    display: block; width: 100%; padding: 6px var(--sp-3); border-radius: var(--radius-sm);
+    font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-secondary);
+    background: none; border: none; cursor: pointer; text-align: left;
+    transition: background var(--t-fast), color var(--t-fast);
+  }
+  .sort-option:hover { background: var(--bg-overlay); color: var(--text-primary); }
+  .sort-option.active { color: var(--accent-fg); }
+  .sort-divider { height: 1px; background: var(--border-dim); margin: var(--sp-1) var(--sp-2); }
+
+  .icon-btn {
+    display: flex; align-items: center; justify-content: center;
+    width: 28px; height: 28px; border-radius: var(--radius-md);
+    border: 1px solid var(--border-dim); color: var(--text-muted);
+    background: none; cursor: pointer;
+    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
+  }
+  .icon-btn:hover:not(:disabled) { color: var(--text-secondary); border-color: var(--border-strong); background: var(--bg-raised); }
+  .icon-btn.active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
+  .icon-btn:disabled { opacity: 0.3; cursor: default; }
+
+  .jump-wrap { position: relative; }
+  .jump-popover {
+    position: absolute; top: calc(100% + 4px); right: 0; width: 220px;
+    background: var(--bg-raised); border: 1px solid var(--border-base);
+    border-radius: var(--radius-md); padding: var(--sp-2); z-index: 200;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+    animation: scaleIn 0.1s ease both; transform-origin: top right;
+    display: flex; flex-direction: column; gap: var(--sp-1);
+  }
+  .jump-input {
+    width: 100%; background: var(--bg-overlay); border: 1px solid var(--border-strong);
+    border-radius: var(--radius-sm); padding: 5px 9px;
+    font-size: var(--text-xs); color: var(--text-secondary); outline: none;
+    transition: border-color var(--t-base);
+  }
+  .jump-input:focus { border-color: var(--border-focus); }
+  .jump-go {
+    width: 100%; padding: 6px var(--sp-2); border-radius: var(--radius-sm);
+    background: var(--accent-muted); border: 1px solid var(--accent-dim); color: var(--accent-fg);
+    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
+    cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    transition: background var(--t-fast), border-color var(--t-fast);
+  }
+  .jump-go:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast, #fff); }
+  .jump-none { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); padding: 4px var(--sp-1); letter-spacing: var(--tracking-wide); }
+
+  .fp-wrap { position: relative; }
+  .fp-menu {
+    position: absolute; top: calc(100% + 4px); right: 0; min-width: 180px;
+    background: var(--bg-raised); border: 1px solid var(--border-base);
+    border-radius: var(--radius-md); padding: var(--sp-1); z-index: 200;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
+    animation: scaleIn 0.1s ease both; transform-origin: top right;
+  }
+  .fp-empty { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); color: var(--text-faint); }
+  .fp-item {
+    display: flex; align-items: center; gap: var(--sp-2); width: 100%;
+    padding: 6px var(--sp-3); border-radius: var(--radius-sm); font-size: var(--text-xs);
+    color: var(--text-secondary); background: none; border: none; cursor: pointer; text-align: left;
+    transition: background var(--t-fast), color var(--t-fast);
+  }
+  .fp-item:hover { background: var(--bg-overlay); }
+  .fp-item.fp-item-active { color: var(--accent-fg); }
+  .fp-check { width: 12px; font-size: var(--text-xs); color: var(--accent-fg); flex-shrink: 0; }
+  .fp-div { height: 1px; background: var(--border-dim); margin: var(--sp-1) var(--sp-2); }
+  .fp-create { display: flex; align-items: center; gap: var(--sp-1); padding: 4px var(--sp-2); }
+  .fp-input {
+    flex: 1; background: var(--bg-overlay); border: 1px solid var(--border-strong);
+    border-radius: var(--radius-sm); padding: 4px 8px;
+    font-size: var(--text-xs); color: var(--text-secondary); outline: none; min-width: 0;
+  }
+  .fp-input:focus { border-color: var(--border-focus); }
+  .fp-confirm {
+    font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
+    padding: 4px 8px; border-radius: var(--radius-sm);
+    border: 1px solid var(--accent-dim); background: var(--accent-muted); color: var(--accent-fg); cursor: pointer;
+  }
+  .fp-confirm:disabled { opacity: 0.4; cursor: default; }
+  .fp-cancel {
+    display: flex; align-items: center; justify-content: center;
+    width: 22px; height: 22px; border-radius: var(--radius-sm);
+    border: 1px solid transparent; background: none; color: var(--text-faint); cursor: pointer;
+    transition: color var(--t-base), border-color var(--t-base);
+  }
+  .fp-cancel:hover { color: var(--text-muted); border-color: var(--border-dim); }
+  .fp-new {
+    width: 100%; padding: 6px var(--sp-3); border-radius: var(--radius-sm);
+    font-size: var(--text-xs); color: var(--text-faint); background: none; border: none;
+    cursor: pointer; text-align: left; transition: color var(--t-fast), background var(--t-fast);
+  }
+  .fp-new:hover { color: var(--text-secondary); background: var(--bg-overlay); }
+
+  .dl-wrap { position: relative; }
+  .dl-dropdown {
+    position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px;
+    background: var(--bg-raised); border: 1px solid var(--border-base);
+    border-radius: var(--radius-lg); padding: var(--sp-1); z-index: 200;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
+    animation: scaleIn 0.1s ease both; transform-origin: top right;
+  }
+  .dl-section-label {
+    padding: 6px var(--sp-3) 4px; font-family: var(--font-ui); font-size: var(--text-2xs);
+    color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase;
+  }
+  .dl-next-row { display: flex; gap: 4px; padding: 2px var(--sp-2) var(--sp-2); }
+  .dl-next-btn {
+    flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px;
+    padding: 5px 6px; border-radius: var(--radius-md); border: 1px solid var(--border-dim);
+    background: var(--bg-overlay); color: var(--text-secondary);
+    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); cursor: pointer;
+    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
+  }
+  .dl-next-btn:hover:not(:disabled) { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
+  .dl-next-btn:disabled { opacity: 0.3; cursor: default; }
+  .dl-next-sub { font-size: var(--text-2xs); color: var(--text-faint); }
+  .dl-divider { height: 1px; background: var(--border-dim); margin: var(--sp-1) var(--sp-2); }
+  .dl-item {
+    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
+    width: 100%; padding: 7px var(--sp-3); border-radius: var(--radius-md);
+    font-size: var(--text-sm); color: var(--text-secondary); background: none; border: none;
+    cursor: pointer; text-align: left; transition: background var(--t-fast), color var(--t-fast);
+  }
+  .dl-item:hover:not(:disabled) { background: var(--bg-overlay); color: var(--text-primary); }
+  .dl-item:disabled { opacity: 0.3; cursor: default; }
+  .dl-item.dl-item-danger { color: var(--color-error); }
+  .dl-item.dl-item-danger:hover:not(:disabled) { background: var(--color-error-bg); }
+  .dl-item-sub { font-size: var(--text-xs); color: var(--text-faint); }
+  .dl-range-row { display: flex; align-items: center; gap: 4px; padding: 7px var(--sp-2); }
+  .dl-range-back {
+    display: flex; align-items: center; justify-content: center;
+    width: 20px; height: 20px; border-radius: var(--radius-sm);
+    border: 1px solid var(--border-dim); background: none; color: var(--text-faint); font-size: 14px; cursor: pointer;
+  }
+  .dl-range-back:hover { color: var(--text-muted); background: var(--bg-overlay); }
+  .dl-range-input {
+    flex: 1; min-width: 0; padding: 4px 8px; background: var(--bg-overlay);
+    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
+    color: var(--text-secondary); font-family: var(--font-ui); font-size: var(--text-xs);
+    outline: none; text-align: center;
+  }
+  .dl-range-input:focus { border-color: var(--border-focus); }
+  .dl-range-sep { color: var(--text-faint); font-size: var(--text-xs); }
+  .dl-range-go {
+    padding: 4px 10px; border-radius: var(--radius-sm);
+    border: 1px solid var(--accent-dim); background: var(--accent-muted); color: var(--accent-fg);
+    font-family: var(--font-ui); font-size: var(--text-xs); cursor: pointer;
+  }
+  .dl-range-go:disabled { opacity: 0.3; cursor: default; }
+  .dl-unified-btn { gap: 5px; padding: 0 8px; width: auto; min-width: 28px; }
+  .dl-unified-count {
+    font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
+    color: var(--text-faint); transition: color var(--t-base);
+  }
+  .dl-unified-btn:hover .dl-unified-count,
+  .dl-unified-btn.active .dl-unified-count { color: var(--text-secondary); }
+  .dl-unified-btn.dl-has-count { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
+  .dl-unified-btn.dl-has-count .dl-unified-count { color: var(--accent-fg); opacity: 0.8; }
+  .dl-unified-btn.dl-has-count:hover { background: var(--accent-muted); border-color: var(--accent); opacity: 0.9; }
+  .dl-unified-btn.active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
+
+  .pagination { display: flex; align-items: center; gap: var(--sp-2); }
+  .page-btn {
+    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
+    padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim);
+    color: var(--text-faint); background: none; cursor: pointer;
+    transition: color var(--t-base), border-color var(--t-base);
+  }
+  .page-btn:hover:not(:disabled) { color: var(--text-muted); border-color: var(--border-strong); }
+  .page-btn:disabled { opacity: 0.3; cursor: default; }
+  .page-num { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+
+  .sel-count {
+    font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted);
+    letter-spacing: var(--tracking-wide); padding: 0 var(--sp-1);
+  }
+  .sel-action-btn {
+    display: flex; align-items: center; justify-content: center;
+    width: 26px; height: 26px; border-radius: var(--radius-sm);
+    border: 1px solid var(--border-dim); background: none; color: var(--text-muted); cursor: pointer;
+    transition: color var(--t-base), background var(--t-base), border-color var(--t-base);
+  }
+  .sel-action-btn:hover { color: var(--text-primary); background: var(--bg-raised); border-color: var(--border-strong); }
+  .sel-action-danger { color: var(--color-error) !important; }
+  .sel-action-danger:hover { background: var(--color-error-bg) !important; border-color: var(--color-error) !important; }
+
+  .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-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-tabs {
+    display: flex; gap: 2px; background: var(--bg-overlay);
+    border: 1px solid var(--border-base); border-radius: var(--radius-sm); padding: 2px;
+  }
+  .scan-filter-tab {
+    font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
+    padding: 2px 8px; border-radius: 2px; border: none; background: none;
+    color: var(--text-faint); cursor: pointer; transition: color var(--t-fast), background var(--t-fast);
+  }
+  .scan-filter-tab:hover { color: var(--text-muted); }
+  .scan-filter-tab.scan-filter-tab-active { background: var(--bg-surface); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
+  .scan-filter-force-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 10px; }
+  .scan-filter-force-label {
+    font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted);
+    letter-spacing: var(--tracking-wide); cursor: default;
+    text-decoration: underline; text-decoration-style: dotted;
+    text-decoration-color: var(--border-strong); text-underline-offset: 3px;
+  }
+  .scan-force-toggle {
+    font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
+    padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim);
+    background: none; color: var(--text-faint); cursor: pointer;
+    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
+  }
+  .scan-force-toggle:hover { color: var(--text-muted); border-color: var(--border-strong); }
+  .scan-force-toggle.scan-force-on { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
+  .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); }
+  .scan-filter-check-block { background: var(--color-error); border-color: var(--color-error); }
+  .scan-filter-item-block  { color: var(--color-error) !important; background: color-mix(in srgb, var(--color-error) 8%, transparent) !important; }
+  .scan-filter-item-block:hover { background: color-mix(in srgb, var(--color-error) 14%, transparent) !important; }
+
+  @keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
+</style>
@@ -0,0 +1,747 @@
+<script lang="ts">
+  import { untrack }      from 'svelte'
+  import SeriesHeader     from '$lib/components/series/SeriesHeader.svelte'
+  import SeriesActions    from '$lib/components/series/SeriesActions.svelte'
+  import ChapterList      from '$lib/components/series/ChapterList.svelte'
+  import {
+    CheckCircle, Circle, ArrowFatLinesUp, ArrowFatLinesDown,
+    ArrowFatLineUp, ArrowFatLineDown, Download, Trash, DownloadSimple, CheckSquare,
+  } from 'phosphor-svelte'
+  import type { MenuEntry }            from '$lib/components/shared/ui/ContextMenu.svelte'
+  import { getManga, getMangaList }    from '$lib/request-manager/manga'
+  import { getChapters, fetchChapters, markChapterRead, markChaptersRead, deleteDownloadedChapters } from '$lib/request-manager/chapters'
+  import { enqueueDownload }           from '$lib/request-manager/downloads'
+  import { getCategories, updateMangaCategories, createCategory as createCategoryReq, updateManga } from '$lib/request-manager/manga'
+  import { saveScroll, getScroll }     from '$lib/state/app.svelte'
+  import { seriesState, openReader, setActiveManga, addBookmark,
+           acknowledgeUpdate, clearMarkersForManga,
+           DEFAULT_MANGA_PREFS }       from '$lib/state/series.svelte'
+  import type { MangaPrefs }           from '$lib/state/series.svelte'
+  import { addToast }                  from '$lib/state/notifications.svelte'
+  import { trackingState }             from '$lib/state/tracking.svelte'
+  import { autoLinkLibrary }           from '$lib/core/cover/autoLink'
+  import { buildChapterList }          from '$lib/components/series/lib/chapterList'
+  import { getPref, setPref }          from '$lib/components/series/lib/mangaPrefs'
+  import type { Manga, Chapter, Category } from '$lib/types'
+  import AutomationPanel  from '$lib/components/series/panels/AutomationPanel.svelte'
+  import CoverPickerPanel from '$lib/components/series/panels/CoverPickerPanel.svelte'
+  import MarkersPanel     from '$lib/components/series/panels/MarkersPanel.svelte'
+  import MigrateModal     from '$lib/components/shared/manga/MigrateModal.svelte'
+  import SeriesLinkPanel  from '$lib/components/shared/manga/SeriesLinkPanel.svelte'
+  import TrackingPanel    from '$lib/components/tracking/TrackingPanel.svelte'
+  const CHAPTERS_PER_PAGE = 25
+  const MANGA_TTL_MS      = 5 * 60 * 1000
+  const CHAPTER_TTL_MS    = 2 * 60 * 1000
+
+  const mangaCache:   Map<number, { data: Manga;     fetchedAt: number }> = new Map()
+  const chapterCache: Map<number, { data: Chapter[]; fetchedAt: number }> = new Map()
+
+  let manga:           Manga | null = $state(null)
+  let chapters:        Chapter[]    = $state([])
+  let loadingManga:    boolean      = $state(false)
+  let loadingChapters: boolean      = $state(true)
+  let enqueueing:      Set<number>  = $state(new Set())
+  let togglingLibrary: boolean      = $state(false)
+  let chapterPage:     number       = $state(1)
+  let viewMode: 'list' | 'grid'    = $state('list')
+  let deletingAll:     boolean      = $state(false)
+  let refreshing:      boolean      = $state(false)
+  let selectedIds:     Set<number>  = $state(new Set())
+  let migrateOpen:     boolean      = $state(false)
+  let autoOpen:        boolean      = $state(false)
+  let trackingOpen:    boolean      = $state(false)
+  let markersOpen:     boolean      = $state(false)
+  let linkPickerOpen:  boolean      = $state(false)
+  let coverPickerOpen: boolean      = $state(false)
+  let allMangaForLink: Manga[]      = $state([])
+  let loadingLinkList: boolean      = $state(false)
+  let mangaCategories: Category[]   = $state([])
+  let allCategories:   Category[]   = $state([])
+  let catsLoading:     boolean      = $state(false)
+  let chapterListEl:   HTMLDivElement | null = $state(null)
+
+  let mangaAbort:    AbortController | null = null
+  let chapterAbort:  AbortController | null = null
+  let loadingFor:    number | null = null
+  let prevChapterIds = new Set<number>()
+  let prevMangaId:   number | null = null
+
+  const get = <K extends keyof MangaPrefs>(key: K) =>
+    seriesState.activeManga ? getPref(seriesState.activeManga.id, key) : DEFAULT_MANGA_PREFS[key]
+  const set = <K extends keyof MangaPrefs>(key: K, value: MangaPrefs[K]) => {
+    if (seriesState.activeManga) setPref(seriesState.activeManga.id, key, value)
+  }
+
+  const hasSelection       = $derived(selectedIds.size > 0)
+  const sortDir            = $derived(seriesState.settings.chapterSortDir)
+  const sortMode           = $derived(seriesState.settings.chapterSortMode ?? 'source')
+  const scanlatorFilter    = $derived((get('scanlatorFilter')    ?? []) as string[])
+  const scanlatorBlacklist = $derived((get('scanlatorBlacklist') ?? []) as string[])
+  const scanlatorForce     = $derived((get('scanlatorForce')     ?? false) as boolean)
+
+  const currentPrefs = $derived({
+    sortMode,
+    sortDir,
+    preferredScanlator:  get('preferredScanlator') as string,
+    scanlatorFilter:     scanlatorFilter as string[],
+    scanlatorBlacklist:  scanlatorBlacklist as string[],
+    scanlatorForce:      scanlatorForce as boolean,
+  })
+
+  const availableScanlators = $derived(
+    [...new Set(chapters.map(c => c.scanlator).filter((s): s is string => !!s?.trim()))]
+      .sort((a, b) => a.localeCompare(b))
+  )
+
+  const sortedChapters  = $derived(buildChapterList(chapters, currentPrefs))
+  const totalPages      = $derived(Math.ceil(sortedChapters.length / CHAPTERS_PER_PAGE))
+  const pageChapters    = $derived(sortedChapters.slice((chapterPage - 1) * CHAPTERS_PER_PAGE, chapterPage * CHAPTERS_PER_PAGE))
+  const readCount       = $derived(sortedChapters.filter(c => c.isRead).length)
+  const totalCount      = $derived(sortedChapters.length)
+  const progressPct     = $derived(totalCount > 0 ? (readCount / totalCount) * 100 : 0)
+  const downloadedCount = $derived(chapters.filter(c => c.isDownloaded).length)
+
+  const continueChapter = $derived((() => {
+    if (!sortedChapters.length) return null
+    const asc      = [...sortedChapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
+    const anyRead  = asc.some(c => c.isRead)
+    const bookmark = seriesState.activeManga
+      ? seriesState.bookmarks.find(b => b.mangaId === seriesState.activeManga!.id)
+      : null
+    const bookmarkedCh = bookmark ? asc.find(c => c.id === bookmark.chapterId) : null
+    if (bookmarkedCh && !bookmarkedCh.isRead) {
+      return { chapter: bookmarkedCh, type: (anyRead ? 'continue' : 'start') as const, resumePage: bookmark!.pageNumber }
+    }
+    const inProgress  = asc.find(c => !c.isRead && (c.lastPageRead ?? 0) > 0)
+    const firstUnread = asc.find(c => !c.isRead)
+    const target      = inProgress ?? firstUnread
+    if (target) return { chapter: target, type: (anyRead ? 'continue' : 'start') as const, resumePage: null }
+    return { chapter: asc[0], type: 'reread' as const, resumePage: null }
+  })())
+
+  const hasAnyAutomation = $derived(
+    get('autoDownload')                       ||
+    (get('downloadAhead') as number) > 0      ||
+    (get('maxKeepChapters') as number) > 0    ||
+    get('deleteOnRead')                       ||
+    get('pauseUpdates')                       ||
+    get('refreshInterval') !== 'global'       ||
+    !!(get('preferredScanlator') as string)
+  )
+
+  const linkedIds = $derived(
+    seriesState.activeManga ? (seriesState.settings.mangaLinks?.[seriesState.activeManga.id] ?? []) : []
+  )
+
+  function clearSelection() { selectedIds = new Set() }
+
+  function toggleSelect(id: number, e: MouseEvent | KeyboardEvent) {
+    e.stopPropagation()
+    const next = new Set(selectedIds)
+    if (next.has(id)) next.delete(id); else next.add(id)
+    selectedIds = next
+  }
+
+  function applyChapters(nodes: Chapter[]) {
+    if (get('autoDownload') && prevChapterIds.size > 0) {
+      const filtered    = buildChapterList(nodes, currentPrefs)
+      const newChapters = filtered.filter(c => !prevChapterIds.has(c.id) && !c.isDownloaded)
+      if (newChapters.length) enqueueMultiple(newChapters.map(c => c.id))
+    }
+    prevChapterIds = new Set(nodes.map(c => c.id))
+    chapters = nodes
+    if (seriesState.activeManga && nodes.length > 0) checkAndMarkCompleted(seriesState.activeManga.id, nodes)
+  }
+
+  function loadCategories(mangaId: number) {
+    catsLoading = true
+    getCategories()
+      .then(d => {
+        allCategories   = d.filter(c => c.id !== 0)
+        mangaCategories = allCategories.filter(c => c.mangas?.nodes.some((m: Manga) => m.id === mangaId))
+      })
+      .catch(console.error)
+      .finally(() => { catsLoading = false })
+  }
+
+  async function checkAndMarkCompleted(mangaId: number, chaps: Chapter[]) {
+    if (chaps.length && manga?.status !== 'ONGOING') {
+      const allRead   = chaps.every(c => c.isRead)
+      const completed = allCategories.find(c => c.name === 'Completed')
+      if (completed) {
+        const inCompleted = mangaCategories.some(c => c.id === completed.id)
+        if (allRead && !inCompleted)      mangaCategories = [...mangaCategories, completed]
+        else if (!allRead && inCompleted) mangaCategories = mangaCategories.filter(c => c.id !== completed.id)
+      }
+    }
+  }
+
+  function loadMangaData(id: number) {
+    mangaAbort?.abort()
+    const ctrl = new AbortController()
+    mangaAbort = ctrl; loadingFor = id
+    const cached = mangaCache.get(id)
+    if (cached) {
+      manga = cached.data; loadingManga = false
+      if (Date.now() - cached.fetchedAt < MANGA_TTL_MS) return
+      getManga(id, ctrl.signal).then(m => {
+        if (ctrl.signal.aborted || loadingFor !== id) return
+        mangaCache.set(id, { data: m, fetchedAt: Date.now() })
+        manga = m
+      }).catch(() => {})
+      return
+    }
+    loadingManga = true
+    getManga(id, ctrl.signal).then(m => {
+      if (ctrl.signal.aborted || loadingFor !== id) return
+      mangaCache.set(id, { data: m, fetchedAt: Date.now() })
+      manga = m
+    }).catch(() => {}).finally(() => { if (!ctrl.signal.aborted && loadingFor === id) loadingManga = false })
+  }
+
+  function loadChaptersData(id: number) {
+    chapterAbort?.abort()
+    const ctrl = new AbortController()
+    chapterAbort = ctrl
+    const cached = chapterCache.get(id)
+    if (cached) {
+      applyChapters(cached.data); loadingChapters = false
+      if (Date.now() - cached.fetchedAt < CHAPTER_TTL_MS) return
+      fetchChapters(id, ctrl.signal)
+        .then(() => getChapters(id, ctrl.signal))
+        .then(nodes => {
+          if (ctrl.signal.aborted || loadingFor !== id) return
+          chapterCache.set(id, { data: nodes, fetchedAt: Date.now() })
+          applyChapters(nodes)
+        }).catch(() => {})
+      return
+    }
+    chapters = []; loadingChapters = true
+    getChapters(id, ctrl.signal).then(nodes => {
+      if (ctrl.signal.aborted || loadingFor !== id) return
+      applyChapters(nodes); loadingChapters = false
+      return fetchChapters(id, ctrl.signal)
+        .then(() => getChapters(id, ctrl.signal))
+        .then(fresh => {
+          if (ctrl.signal.aborted || loadingFor !== id) return
+          chapterCache.set(id, { data: fresh, fetchedAt: Date.now() })
+          applyChapters(fresh)
+        })
+    }).catch(() => { if (!ctrl.signal.aborted) loadingChapters = false })
+  }
+
+  async function syncTrackersIntoChapters(mangaId: number, chaps: Chapter[]) {
+    if (!seriesState.settings.trackerSyncBack) return
+    const records = trackingState.recordsFor(mangaId)
+    if (!records.length) return
+    for (const record of records) {
+      try {
+        const { markedIds } = await trackingState.syncFromRemote(mangaId, record, chaps, currentPrefs)
+        if (markedIds.length > 0) {
+          const idSet = new Set(markedIds)
+          chapters = chapters.map(c => idSet.has(c.id) ? { ...c, isRead: true } : c)
+          if (seriesState.activeManga) chapterCache.set(seriesState.activeManga.id, { data: chapters, fetchedAt: Date.now() })
+        }
+      } catch {}
+    }
+  }
+
+  $effect(() => {
+    const id             = seriesState.activeMangaId
+    const m              = seriesState.activeManga
+    const shouldAutoLink = seriesState.settings.autoLinkOnOpen
+    if (id) untrack(() => {
+      if (m) acknowledgeUpdate(m.id)
+      loadMangaData(id)
+      loadChaptersData(id)
+      loadCategories(id)
+      trackingState.loadForManga(id).then(() => syncTrackersIntoChapters(id, chapters))
+      if (shouldAutoLink) {
+        if (allMangaForLink.length) {
+          autoLinkLibrary(m, allMangaForLink)
+            .then(n => { if (n > 0) addToast({ kind: 'success', title: 'Series linked', body: `${n} new link${n === 1 ? '' : 's'} found` }) })
+        } else {
+          loadingLinkList = true
+          getMangaList()
+            .then(list => {
+              allMangaForLink = list
+              return autoLinkLibrary(m, list)
+            })
+            .then(n => { if (n > 0) addToast({ kind: 'success', title: 'Series linked', body: `${n} new link${n === 1 ? '' : 's'} found` }) })
+            .catch(console.error)
+            .finally(() => { loadingLinkList = false })
+        }
+      }
+    })
+  })
+
+  let prevChapterId: number | null = null
+  $effect(() => {
+    const wasOpen = prevChapterId !== null
+    prevChapterId = seriesState.activeChapter?.id ?? null
+    if (wasOpen && !seriesState.activeChapter && seriesState.activeManga) {
+      const id = seriesState.activeManga.id
+      untrack(() => { reloadChapters(id) })
+    }
+  })
+
+  $effect(() => {
+    const mangaId = seriesState.activeManga?.id ?? null
+    if (mangaId === prevMangaId) return
+    if (chapterListEl && prevMangaId !== null) saveScroll(`series:${prevMangaId}`, chapterListEl.scrollTop)
+    prevMangaId = mangaId
+    if (chapterListEl && mangaId !== null) {
+      chapterListEl.scrollTo({ top: getScroll(`series:${mangaId}`) })
+    }
+  })
+
+  $effect(() => () => { mangaAbort?.abort(); chapterAbort?.abort() })
+
+  async function toggleLibrary() {
+    if (!manga) return
+    togglingLibrary = true
+    const next = !manga.inLibrary
+    await updateManga(manga.id, { inLibrary: next }).catch(console.error)
+    manga = { ...manga, inLibrary: next }
+    if (mangaCache.has(manga.id)) { const e = mangaCache.get(manga.id)!; mangaCache.set(manga.id, { ...e, data: manga }) }
+    togglingLibrary = false
+  }
+
+  async function reloadChapters(id: number) {
+    const nodes = await getChapters(id)
+    chapterCache.set(id, { data: nodes, fetchedAt: Date.now() })
+    applyChapters(nodes)
+  }
+
+  async function enqueue(ch: Chapter, e: MouseEvent) {
+    e.stopPropagation()
+    enqueueing = new Set(enqueueing).add(ch.id)
+    await enqueueDownload(ch.id)
+    addToast({ kind: 'download', title: 'Download queued', body: ch.name })
+    enqueueing.delete(ch.id); enqueueing = new Set(enqueueing)
+    if (seriesState.activeManga) reloadChapters(seriesState.activeManga.id)
+  }
+
+  async function enqueueMultiple(chapterIds: number[]) {
+    if (!chapterIds.length) return
+    for (const id of chapterIds) {
+      const allowed = await enqueueDownload(id)
+      if (!allowed) return
+    }
+    addToast({ kind: 'download', title: 'Download queued', body: `${chapterIds.length} chapter${chapterIds.length !== 1 ? 's' : ''} added` })
+    if (seriesState.activeManga) reloadChapters(seriesState.activeManga.id)
+  }
+
+  async function markRead(chapterId: number, isRead: boolean) {
+    const mangaId = seriesState.activeManga?.id
+    await markChapterRead(chapterId, isRead).catch(console.error)
+    chapters = chapters.map(c => c.id === chapterId ? { ...c, isRead } : c)
+    if (mangaId) {
+      chapterCache.set(mangaId, { data: chapters, fetchedAt: Date.now() })
+      checkAndMarkCompleted(mangaId, chapters)
+      const ch = chapters.find(c => c.id === chapterId)
+      if (ch) {
+        if (isRead) await trackingState.updateFromRead(mangaId, ch, chapters, currentPrefs)
+        else        await trackingState.updateFromUnread(mangaId, chapters, currentPrefs)
+      }
+    }
+    if (isRead) {
+      if (get('deleteOnRead')) {
+        const ch = chapters.find(c => c.id === chapterId)
+        if (ch?.isDownloaded) {
+          const delayMs = (get('deleteDelayHours') as number) * 60 * 60 * 1000
+          if (delayMs === 0) deleteDownloaded(chapterId)
+          else setTimeout(() => deleteDownloaded(chapterId), delayMs)
+        }
+      }
+      const ahead = get('downloadAhead') as number
+      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)
+        }
+      }
+    }
+  }
+
+  async function markBulk(ids: number[], isRead: boolean) {
+    if (!ids.length) return
+    const mangaId = seriesState.activeManga?.id
+    await markChaptersRead(ids, isRead).catch(console.error)
+    const idSet = new Set(ids)
+    chapters = chapters.map(c => idSet.has(c.id) ? { ...c, isRead } : c)
+    if (mangaId) {
+      chapterCache.set(mangaId, { data: chapters, fetchedAt: Date.now() })
+      checkAndMarkCompleted(mangaId, chapters)
+      if (isRead) {
+        const ascending   = [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
+        const lastInBatch = ascending.filter(c => idSet.has(c.id)).at(-1)
+        if (lastInBatch) await trackingState.updateFromRead(mangaId, lastInBatch, chapters, currentPrefs)
+      } else {
+        await trackingState.updateFromUnread(mangaId, chapters, currentPrefs)
+      }
+    }
+    if (isRead && get('deleteOnRead')) {
+      const toDelete = ids.filter(id => chapters.find(c => c.id === id)?.isDownloaded)
+      if (toDelete.length) {
+        const delayMs = (get('deleteDelayHours') as number) * 60 * 60 * 1000
+        const doDelete = async () => {
+          await deleteDownloadedChapters(toDelete).catch(console.error)
+          chapters = chapters.map(c => toDelete.includes(c.id) ? { ...c, isDownloaded: false } : c)
+          if (mangaId) chapterCache.set(mangaId, { data: chapters, fetchedAt: Date.now() })
+        }
+        if (delayMs === 0) doDelete(); else setTimeout(doDelete, delayMs)
+      }
+    }
+  }
+
+  async function deleteSelected() {
+    const ids = [...selectedIds].filter(id => chapters.find(c => c.id === id)?.isDownloaded)
+    if (ids.length) {
+      await deleteDownloadedChapters(ids).catch(console.error)
+      chapters = chapters.map(c => ids.includes(c.id) ? { ...c, isDownloaded: false } : c)
+      if (seriesState.activeManga) chapterCache.set(seriesState.activeManga.id, { data: chapters, fetchedAt: Date.now() })
+    }
+    clearSelection()
+  }
+
+  async function downloadSelected() {
+    await enqueueMultiple([...selectedIds].filter(id => !chapters.find(c => c.id === id)?.isDownloaded))
+    clearSelection()
+  }
+
+  async function markSelectedRead(isRead: boolean) {
+    await markBulk([...selectedIds], isRead)
+    clearSelection()
+  }
+
+  const markAboveRead   = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter(c => !c.isRead).map(c => c.id), true)
+  const markBelowRead   = (i: number) => markBulk(sortedChapters.slice(i).filter(c => !c.isRead).map(c => c.id), true)
+  const markAboveUnread = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter(c => c.isRead).map(c => c.id), false)
+  const markBelowUnread = (i: number) => markBulk(sortedChapters.slice(i).filter(c => c.isRead).map(c => c.id), false)
+
+  async function deleteDownloaded(chapterId: number) {
+    await deleteDownloadedChapters([chapterId]).catch(console.error)
+    chapters = chapters.map(c => c.id === chapterId ? { ...c, isDownloaded: false } : c)
+    if (seriesState.activeManga) chapterCache.set(seriesState.activeManga.id, { data: chapters, fetchedAt: Date.now() })
+  }
+
+  async function deleteAllDownloads() {
+    const ids = chapters.filter(c => c.isDownloaded).map(c => c.id)
+    if (!ids.length) return
+    deletingAll = true
+    await deleteDownloadedChapters(ids).catch(console.error)
+    chapters = chapters.map(c => ({ ...c, isDownloaded: false }))
+    if (seriesState.activeManga) chapterCache.set(seriesState.activeManga.id, { data: chapters, fetchedAt: Date.now() })
+    deletingAll = false
+  }
+
+  async function refreshChapters() {
+    if (!seriesState.activeManga || refreshing) return
+    refreshing = true
+    chapterCache.delete(seriesState.activeManga.id)
+    fetchChapters(seriesState.activeManga.id)
+      .then(() => reloadChapters(seriesState.activeManga!.id))
+      .then(() => addToast({ kind: 'success', title: 'Chapters refreshed', body: `${chapters.length} chapter${chapters.length !== 1 ? 's' : ''} available` }))
+      .catch(e => addToast({ kind: 'error', title: 'Refresh failed', body: e?.message }))
+      .finally(() => refreshing = false)
+  }
+
+  function buildCtxItems(ch: Chapter, idx: number): MenuEntry[] {
+    const above = sortedChapters.slice(0, idx + 1)
+    const below = sortedChapters.slice(idx)
+    const last  = sortedChapters.length - 1
+    return [
+      { label: ch.isRead ? 'Mark as unread' : 'Mark as read', icon: ch.isRead ? Circle : CheckCircle, onClick: () => markRead(ch.id, !ch.isRead) },
+      { label: 'Select', icon: CheckSquare, onClick: () => { const next = new Set(selectedIds); next.add(ch.id); selectedIds = next } },
+      { separator: true },
+      { label: 'Mark above as read',   icon: ArrowFatLinesUp,   onClick: () => markAboveRead(idx),   disabled: above.filter(c => !c.isRead).length === 0 },
+      { label: 'Mark above as unread', icon: ArrowFatLineUp,    onClick: () => markAboveUnread(idx), disabled: above.filter(c => c.isRead).length === 0 },
+      { separator: true },
+      { label: 'Mark below as read',   icon: ArrowFatLinesDown, onClick: () => markBelowRead(idx),   disabled: idx === last || below.filter(c => !c.isRead).length === 0 },
+      { label: 'Mark below as unread', icon: ArrowFatLineDown,  onClick: () => markBelowUnread(idx), disabled: idx === last || below.filter(c => c.isRead).length === 0 },
+      { separator: true },
+      { label: ch.isDownloaded ? 'Delete download' : 'Download', icon: ch.isDownloaded ? Trash : Download, danger: ch.isDownloaded, onClick: () => ch.isDownloaded ? deleteDownloaded(ch.id) : enqueueDownload(ch.id) },
+      { separator: true },
+      { label: 'Download next 5 from here', icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx, idx + 5).filter(c => !c.isDownloaded).map(c => c.id)) },
+      { label: 'Download all from here',    icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx).filter(c => !c.isDownloaded).map(c => c.id)) },
+    ]
+  }
+
+  function enqueueNext(n: number) {
+    if (!continueChapter) return
+    const idx = sortedChapters.indexOf(continueChapter.chapter)
+    if (idx < 0) return
+    enqueueMultiple(sortedChapters.slice(idx, idx + n).filter(c => !c.isDownloaded).map(c => c.id))
+  }
+
+  function openReaderWithAhead(ch: Chapter, inProgress: boolean) {
+    const ascList    = [...sortedChapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
+    const resumePage = inProgress ? ch.lastPageRead ?? null : null
+    const ahead      = get('downloadAhead') as number
+    if (ahead > 0) {
+      const idx = ascList.indexOf(ch)
+      if (idx >= 0) {
+        const toQueue = ascList.slice(idx + 1, idx + 1 + ahead).filter(c => !c.isDownloaded).map(c => c.id)
+        if (toQueue.length) enqueueMultiple(toQueue)
+      }
+    }
+    if (inProgress && resumePage && resumePage > 1) {
+      const existing = seriesState.bookmarks.find(b => b.chapterId === ch.id)
+      if (!existing || existing.pageNumber < resumePage) {
+        addBookmark({
+          mangaId:      seriesState.activeManga!.id,
+          mangaTitle:   seriesState.activeManga!.title,
+          thumbnailUrl: seriesState.activeManga!.thumbnailUrl,
+          chapterId:    ch.id,
+          chapterName:  ch.name,
+          pageNumber:   resumePage,
+        })
+      }
+    }
+    openReader(ch, ascList)
+  }
+
+  function handleContinue(cc: typeof continueChapter) {
+    if (!cc) return
+    const ascList = [...sortedChapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
+    const ahead   = get('downloadAhead') as number
+    if (ahead > 0) {
+      const idx = ascList.indexOf(cc.chapter)
+      if (idx >= 0) {
+        const toQueue = ascList.slice(idx + 1, idx + 1 + ahead).filter(c => !c.isDownloaded).map(c => c.id)
+        if (toQueue.length) enqueueMultiple(toQueue)
+      }
+    }
+    if (cc.type === 'continue' && cc.resumePage && cc.resumePage > 1) {
+      const existing = seriesState.bookmarks.find(b => b.chapterId === cc.chapter.id)
+      if (!existing || existing.pageNumber < cc.resumePage) {
+        addBookmark({
+          mangaId:      seriesState.activeManga!.id,
+          mangaTitle:   seriesState.activeManga!.title,
+          thumbnailUrl: seriesState.activeManga!.thumbnailUrl,
+          chapterId:    cc.chapter.id,
+          chapterName:  cc.chapter.name,
+          pageNumber:   cc.resumePage,
+        })
+      }
+    }
+    openReader(cc.chapter, ascList)
+  }
+
+  async function openLinkPicker() {
+    linkPickerOpen = true
+    if (allMangaForLink.length) return
+    loadingLinkList = true
+    getMangaList()
+      .then(list => { allMangaForLink = list })
+      .catch(console.error)
+      .finally(() => { loadingLinkList = false })
+  }
+
+  async function openCoverPicker() {
+    coverPickerOpen = true
+    if (allMangaForLink.length) return
+    loadingLinkList = true
+    getMangaList()
+      .then(list => { allMangaForLink = list })
+      .catch(console.error)
+      .finally(() => { loadingLinkList = false })
+  }
+
+  async function toggleCategory(cat: Category) {
+    if (!seriesState.activeManga) return
+    const inCat = mangaCategories.some(c => c.id === cat.id)
+    try {
+      await updateMangaCategories(seriesState.activeManga.id, inCat ? [] : [cat.id], inCat ? [cat.id] : [])
+      if (!inCat && !manga?.inLibrary) {
+        await updateManga(seriesState.activeManga.id, { inLibrary: true }).catch(console.error)
+        if (manga) manga = { ...manga, inLibrary: true }
+      }
+      mangaCategories = inCat ? mangaCategories.filter(c => c.id !== cat.id) : [...mangaCategories, cat]
+    } catch (e) { console.error(e) }
+  }
+
+  async function createNewCategory(name: string) {
+    if (!name || !seriesState.activeManga) return
+    try {
+      const cat = await createCategoryReq(name)
+      await updateMangaCategories(seriesState.activeManga.id, [cat.id], [])
+      if (!manga?.inLibrary) {
+        await updateManga(seriesState.activeManga.id, { inLibrary: true }).catch(console.error)
+        if (manga) manga = { ...manga, inLibrary: true }
+      }
+      allCategories   = [...allCategories, cat]
+      mangaCategories = [...mangaCategories, cat]
+    } catch (e) { console.error(e) }
+  }
+</script>
+
+{#if seriesState.activeMangaId}
+<div class="root" role="presentation" oncontextmenu={(e) => e.preventDefault()}>
+
+  <SeriesHeader
+    {manga}
+    {loadingManga}
+    {totalCount}
+    {readCount}
+    {progressPct}
+    {downloadedCount}
+    {deletingAll}
+    {continueChapter}
+    {hasAnyAutomation}
+    {markersOpen}
+    {linkedIds}
+    {allMangaForLink}
+    {loadingLinkList}
+    {mangaCategories}
+    {togglingLibrary}
+    onRead={handleContinue}
+    onToggleLibrary={toggleLibrary}
+    onDeleteAll={deleteAllDownloads}
+    onMigrateOpen={() => migrateOpen = true}
+    onTrackingOpen={() => trackingOpen = true}
+    onAutoOpen={() => autoOpen = true}
+    onMarkersToggle={() => markersOpen = !markersOpen}
+    onLinkPickerOpen={openLinkPicker}
+    onCoverPickerOpen={openCoverPicker}
+  />
+
+  <div class="list-wrap">
+    <SeriesActions
+      {chapters}
+      {sortedChapters}
+      {sortMode}
+      {sortDir}
+      {viewMode}
+      {chapterPage}
+      {totalPages}
+      {downloadedCount}
+      {totalCount}
+      {deletingAll}
+      {hasSelection}
+      selectedCount={selectedIds.size}
+      {continueChapter}
+      {availableScanlators}
+      {scanlatorFilter}
+      {scanlatorBlacklist}
+      {scanlatorForce}
+      {allCategories}
+      {mangaCategories}
+      {catsLoading}
+      {refreshing}
+      onViewModeToggle={() => viewMode = viewMode === 'list' ? 'grid' : 'list'}
+      onPageChange={(p) => chapterPage = p}
+      onDownloadSelected={downloadSelected}
+      onDeleteSelected={deleteSelected}
+      onMarkSelectedRead={markSelectedRead}
+      onClearSelection={clearSelection}
+      onEnqueueNext={enqueueNext}
+      onEnqueueMultiple={enqueueMultiple}
+      onDeleteAll={deleteAllDownloads}
+      onRefresh={refreshChapters}
+      onToggleCategory={toggleCategory}
+      onCreateCategory={createNewCategory}
+      onSetScanlatorFilter={(v) => set('scanlatorFilter', v)}
+      onSetScanlatorBlacklist={(v) => set('scanlatorBlacklist', v)}
+      onSetScanlatorForce={(v) => set('scanlatorForce', v)}
+    />
+
+    <ChapterList
+      {pageChapters}
+      {sortedChapters}
+      {viewMode}
+      {loadingChapters}
+      {selectedIds}
+      {enqueueing}
+      {chapterPage}
+      {totalPages}
+      bind:scrollEl={chapterListEl}
+      onOpen={openReaderWithAhead}
+      onToggleSelect={toggleSelect}
+      onEnqueue={enqueue}
+      onDeleteDownload={deleteDownloaded}
+      onPageChange={(p) => chapterPage = p}
+      {buildCtxItems}
+    />
+  </div>
+</div>
+
+{#if markersOpen && manga}
+  <div class="panel-overlay" role="presentation" onclick={() => markersOpen = false}>
+    <div class="panel-drawer" role="presentation" onclick={(e) => e.stopPropagation()}>
+      <MarkersPanel mangaId={manga.id} {chapters} onClose={() => markersOpen = false} />
+    </div>
+  </div>
+{/if}
+
+{#if autoOpen && manga}
+  <div class="panel-overlay" role="presentation" onclick={() => autoOpen = false}>
+    <div class="panel-drawer" role="presentation" onclick={(e) => e.stopPropagation()}>
+      <AutomationPanel mangaId={manga.id} {manga} onClose={() => autoOpen = false} />
+    </div>
+  </div>
+{/if}
+
+{#if trackingOpen && manga}
+  <div class="panel-overlay" role="presentation" onclick={() => trackingOpen = false}>
+    <div class="panel-drawer" role="presentation" onclick={(e) => e.stopPropagation()}>
+      <TrackingPanel mangaId={manga.id} mangaTitle={manga.title} onClose={() => trackingOpen = false} />
+    </div>
+  </div>
+{/if}
+
+{#if linkPickerOpen && manga}
+  <div class="panel-overlay" role="presentation" onclick={() => linkPickerOpen = false}>
+    <div class="panel-drawer" role="presentation" onclick={(e) => e.stopPropagation()}>
+      <SeriesLinkPanel {manga} allManga={allMangaForLink} onClose={() => linkPickerOpen = false} />
+    </div>
+  </div>
+{/if}
+
+{#if coverPickerOpen && manga}
+  <div class="panel-overlay" role="presentation" onclick={() => coverPickerOpen = false}>
+    <div class="panel-drawer" role="presentation" onclick={(e) => e.stopPropagation()}>
+      <CoverPickerPanel {manga} allManga={allMangaForLink} onClose={() => coverPickerOpen = false} />
+    </div>
+  </div>
+{/if}
+
+{#if migrateOpen && manga}
+  <MigrateModal
+    {manga}
+    currentChapters={chapters}
+    onClose={() => migrateOpen = false}
+    onMigrated={(newManga) => { setActiveManga(newManga); migrateOpen = false }}
+  />
+{/if}
+
+{/if}
+
+<style>
+  .root {
+    display: flex; height: 100%; overflow: hidden;
+    animation: fadeIn 0.14s ease both;
+  }
+
+  .list-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+
+  .markers-panel-overlay,
+  .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,
+  .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 fadeIn   { from { opacity: 0 }                               to { opacity: 1 } }
+  @keyframes drawerIn { from { opacity: 0; transform: translateX(-12px) } to { opacity: 1; transform: translateX(0) } }
+</style>
@@ -0,0 +1,376 @@
+<script lang="ts">
+  import {
+    ArrowLeft, BookmarkSimple, ArrowSquareOut, Play, CaretDown,
+    Eye, ArrowsClockwise, LinkSimpleHorizontalBreak, ChartLineUp,
+    MapPin, Gear, Trash, Image,
+  } from 'phosphor-svelte'
+  import Thumbnail        from '$lib/components/shared/manga/Thumbnail.svelte'
+  import { resolvedCover } from '$lib/core/cover/coverResolver'
+  import type { MangaPrefs }                                    from '$lib/state/series.svelte'
+  import type { Manga, Chapter, Category }                      from '$lib/types'
+  import { setGenreFilter, setNavPage }                         from '$lib/state/app.svelte'
+  import { seriesState, setPreviewManga }                       from '$lib/state/series.svelte'
+
+  interface ContinueChapter {
+    chapter:    Chapter
+    type:       'start' | 'continue' | 'reread'
+    resumePage: number | null
+  }
+
+  interface Props {
+    manga:            Manga | null
+    loadingManga:     boolean
+    totalCount:       number
+    readCount:        number
+    progressPct:      number
+    downloadedCount:  number
+    deletingAll:      boolean
+    continueChapter:  ContinueChapter | null
+    hasAnyAutomation: boolean
+    markersOpen:      boolean
+    linkedIds:        number[]
+    allMangaForLink:  Manga[]
+    loadingLinkList:  boolean
+    mangaCategories:  Category[]
+    togglingLibrary:  boolean
+    onRead:           (ch: ContinueChapter) => void
+    onToggleLibrary:  () => void
+    onDeleteAll:      () => void
+    onMigrateOpen:    () => void
+    onTrackingOpen:   () => void
+    onAutoOpen:       () => void
+    onMarkersToggle:  () => void
+    onLinkPickerOpen: () => void
+    onCoverPickerOpen:() => void
+  }
+
+  let {
+    manga, loadingManga, totalCount, readCount, progressPct,
+    downloadedCount, deletingAll, continueChapter, hasAnyAutomation,
+    markersOpen, linkedIds, allMangaForLink, loadingLinkList,
+    mangaCategories, togglingLibrary,
+    onRead, onToggleLibrary, onDeleteAll, onMigrateOpen,
+    onTrackingOpen, onAutoOpen, onMarkersToggle, onLinkPickerOpen, onCoverPickerOpen,
+  }: Props = $props()
+
+  let manageOpen:     boolean = $state(false)
+  let genresExpanded: boolean = $state(false)
+  let altOpen:        boolean = $state(false)
+
+  const statusLabel = $derived(
+    manga?.status ? manga.status.charAt(0) + manga.status.slice(1).toLowerCase() : null
+  )
+
+  const markerCount = $derived(
+    seriesState.activeManga ? seriesState.getMarkersForManga(seriesState.activeManga.id).length : 0
+  )
+
+  const hasCoverOverride = $derived(
+    !!seriesState.settings.mangaPrefs?.[seriesState.activeManga?.id ?? manga?.id ?? 0]?.coverUrl
+  )
+
+  const altTitles = $derived(
+    (manga as any)?.alternativeTitles ?? (manga as any)?.altTitles ?? []
+  )
+</script>
+
+<div class="sidebar">
+  <button class="back" onclick={() => history.back()}>
+    <ArrowLeft size={13} weight="light" /> Back
+  </button>
+
+  <button class="cover-wrap" onclick={() => setPreviewManga(manga)}>
+    <Thumbnail src={resolvedCover(seriesState.activeManga?.id ?? manga?.id ?? 0, seriesState.activeManga?.thumbnailUrl ?? manga?.thumbnailUrl ?? "")} alt={seriesState.activeManga?.title ?? manga?.title ?? ""} class="cover" />
+  </button>
+
+  {#if loadingManga}
+    <div class="meta-skeleton">
+      <div class="skeleton sk-line" style="width:90%;height:14px"></div>
+      <div class="skeleton sk-line" style="width:60%;height:11px"></div>
+    </div>
+  {:else}
+    <div class="meta">
+      <p class="title">{manga?.title}</p>
+
+      {#if manga?.author || manga?.artist}
+        <p class="byline">{[manga?.author, manga?.artist].filter(Boolean).filter((v, i, a) => a.indexOf(v) === i).join(' · ')}</p>
+      {/if}
+
+      <div class="badges">
+        {#if statusLabel}
+          <span class="badge" class:badge-ongoing={manga?.status === 'ONGOING'} class:badge-ended={manga?.status !== 'ONGOING'}>{statusLabel}</span>
+        {/if}
+        {#if manga?.source?.displayName ?? (manga as any)?.source?.name}
+          <span class="badge badge-source">{manga?.source?.displayName ?? (manga as any)?.source?.name}</span>
+        {/if}
+      </div>
+
+      {#if altTitles.length > 0}
+        <div class="alttitles-section">
+          <button class="row-toggle" onclick={() => altOpen = !altOpen}>
+            <span>Also known as</span>
+            <CaretDown size={10} weight="light" style="transform:{altOpen ? 'rotate(180deg)' : 'rotate(0)'};transition:transform 0.15s ease;flex-shrink:0" />
+          </button>
+          {#if altOpen}
+            <div class="alttitles-list">
+              {#each altTitles as t}<p class="alttitle">{t}</p>{/each}
+            </div>
+          {/if}
+        </div>
+      {/if}
+
+      {#if manga?.genre?.length}
+        <div class="genres">
+          {#each (genresExpanded ? manga.genre : manga.genre.slice(0, 3)) as g}
+            <button class="genre" onclick={() => { setGenreFilter(g); setNavPage('search'); history.back() }}>{g}</button>
+          {/each}
+          {#if manga.genre.length > 3}
+            <button class="genre-toggle" onclick={() => genresExpanded = !genresExpanded}>
+              {genresExpanded ? 'less' : `+${manga.genre.length - 3}`}
+            </button>
+          {/if}
+        </div>
+      {/if}
+
+      {#if manga?.description}
+        <div class="desc-wrap">
+          <p class="desc">{manga.description}</p>
+          <button class="expand-toggle" onclick={() => setPreviewManga(manga)}>Read more</button>
+        </div>
+      {/if}
+    </div>
+  {/if}
+
+  <div class="cta-section">
+    {#if continueChapter}
+      <button class="read-btn" onclick={() => onRead(continueChapter!)}>
+        <Play size={12} weight="fill" />
+        {continueChapter.type === 'reread' ? 'Read again'
+          : continueChapter.type === 'start' ? 'Start reading'
+          : `Continue · Ch.${continueChapter.chapter.chapterNumber}${continueChapter.resumePage ? ` p.${continueChapter.resumePage}` : ''}`}
+      </button>
+    {/if}
+    <div class="actions">
+      <button class="library-btn" class:active={manga?.inLibrary} onclick={onToggleLibrary} disabled={togglingLibrary || loadingManga}>
+        <BookmarkSimple size={13} weight={manga?.inLibrary ? 'fill' : 'light'} />
+        {manga?.inLibrary ? 'In Library' : 'Add to Library'}
+      </button>
+      {#if manga?.realUrl}
+        <a href={manga.realUrl} target="_blank" rel="noreferrer" class="external-link">
+          <ArrowSquareOut size={13} weight="light" />
+        </a>
+      {/if}
+    </div>
+  </div>
+
+  {#if totalCount > 0}
+    <div class="progress-section">
+      <div class="progress-header">
+        <span class="progress-label">{readCount} / {totalCount} read</span>
+        <span class="progress-pct">{Math.round(progressPct)}%</span>
+      </div>
+      <div class="progress-track"><div class="progress-fill" style="width:{progressPct}%"></div></div>
+    </div>
+  {/if}
+
+  {#if !loadingManga && manga}
+    <div class="details-section">
+      <button class="details-toggle" onclick={() => manageOpen = !manageOpen}>
+        <span>Manage</span>
+        <CaretDown size={11} weight="light" style="transform:{manageOpen ? 'rotate(180deg)' : 'rotate(0)'};transition:transform 0.15s ease" />
+      </button>
+      {#if manageOpen}
+        <div class="details-body">
+          <div class="detail-actions">
+            <button class="detail-action-btn" onclick={() => setPreviewManga(manga)}>
+              <Eye size={12} weight="light" /> Preview
+            </button>
+            <button class="detail-action-btn" onclick={onMigrateOpen}>
+              <ArrowsClockwise size={12} weight="light" /> Switch Source
+            </button>
+            <button class="detail-action-btn" class:detail-action-active={linkedIds.length > 0} onclick={onLinkPickerOpen}>
+              <LinkSimpleHorizontalBreak size={12} weight={linkedIds.length > 0 ? 'fill' : 'light'} />
+              Series Link{linkedIds.length > 0 ? ` (${linkedIds.length})` : ''}
+            </button>
+            <button class="detail-action-btn" class:detail-action-active={hasCoverOverride} onclick={onCoverPickerOpen}>
+              <Image size={12} weight={hasCoverOverride ? 'fill' : 'light'} /> Cover Image
+            </button>
+            <button class="detail-action-btn" onclick={onTrackingOpen}>
+              <ChartLineUp size={12} weight="light" /> Tracking
+            </button>
+            <button class="detail-action-btn" class:detail-action-active={markersOpen} onclick={onMarkersToggle}>
+              <MapPin size={12} weight={markersOpen ? 'fill' : 'light'} />
+              Markers{markerCount > 0 ? ` (${markerCount})` : ''}
+            </button>
+            {#if manga?.inLibrary}
+              <button class="detail-action-btn" class:detail-action-active={hasAnyAutomation} onclick={onAutoOpen}>
+                <Gear size={12} weight={hasAnyAutomation ? 'fill' : 'light'} /> Automation
+              </button>
+            {/if}
+            {#if downloadedCount > 0}
+              <button class="detail-action-btn detail-action-danger" onclick={onDeleteAll} disabled={deletingAll}>
+                <Trash size={12} weight="light" /> {deletingAll ? 'Deleting…' : `Delete Downloads (${downloadedCount})`}
+              </button>
+            {/if}
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .sidebar {
+    width: 240px; flex-shrink: 0;
+    padding: var(--sp-5); border-right: 1px solid var(--border-dim);
+    overflow-y: auto; scrollbar-width: none;
+    display: flex; flex-direction: column; gap: var(--sp-4);
+    background: var(--bg-base);
+  }
+  .sidebar::-webkit-scrollbar { display: none; }
+
+  .back {
+    display: flex; align-items: center; gap: var(--sp-2);
+    color: var(--text-muted); font-size: var(--text-xs); font-family: var(--font-ui);
+    letter-spacing: var(--tracking-wide); text-transform: uppercase;
+    transition: color var(--t-base);
+  }
+  .back:hover { color: var(--text-secondary); }
+
+  .cover-wrap {
+    width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-md);
+    overflow: hidden; background: var(--bg-raised);
+    border: 1px solid var(--border-dim); flex-shrink: 0;
+    cursor: pointer; transition: opacity var(--t-base); padding: 0;
+  }
+  .cover-wrap:hover { opacity: 0.88; }
+  :global(.cover) { width: 100%; height: 100%; object-fit: cover; }
+
+  .meta-skeleton { display: flex; flex-direction: column; gap: var(--sp-2); }
+  .sk-line { border-radius: var(--radius-sm); }
+
+  .meta { display: flex; flex-direction: column; gap: var(--sp-3); }
+
+  .title {
+    font-size: var(--text-base); font-weight: var(--weight-medium);
+    color: var(--text-primary); line-height: var(--leading-snug);
+    letter-spacing: var(--tracking-tight);
+  }
+  .byline { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-ui); }
+
+  .badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
+  .badge {
+    display: inline-block; font-family: var(--font-ui); font-size: var(--text-2xs);
+    letter-spacing: var(--tracking-wider); text-transform: uppercase;
+    padding: 2px 7px; border-radius: var(--radius-sm); width: fit-content;
+  }
+  .badge-ongoing { background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); }
+  .badge-ended   { background: var(--bg-raised); color: var(--text-faint); border: 1px solid var(--border-dim); }
+  .badge-source  {
+    background: var(--bg-raised); color: var(--text-faint); border: 1px solid var(--border-dim);
+    text-transform: none; letter-spacing: var(--tracking-normal);
+  }
+
+  .alttitles-section { display: flex; flex-direction: column; gap: var(--sp-1); }
+  .row-toggle {
+    display: flex; align-items: center; justify-content: space-between; width: 100%;
+    font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint);
+    letter-spacing: var(--tracking-wide); padding: 2px 0; transition: color var(--t-base);
+  }
+  .row-toggle:hover { color: var(--text-muted); }
+  .alttitles-list { display: flex; flex-direction: column; gap: 3px; padding-top: var(--sp-1); }
+  .alttitle {
+    font-size: var(--text-2xs); color: var(--text-faint); font-family: var(--font-ui);
+    line-height: var(--leading-snug); padding-left: var(--sp-1);
+    border-left: 1px solid var(--border-dim);
+  }
+
+  .genres { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
+  .genre {
+    font-size: var(--text-2xs); font-family: var(--font-ui); color: var(--text-faint);
+    background: var(--bg-raised); border: 1px solid var(--border-dim);
+    border-radius: var(--radius-sm); padding: 1px 6px; letter-spacing: var(--tracking-wide);
+    cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
+  }
+  .genre:hover { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
+  .genre-toggle {
+    font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint);
+    background: var(--bg-raised); border: 1px solid var(--border-dim);
+    border-radius: var(--radius-sm); padding: 1px 6px; letter-spacing: var(--tracking-wide);
+    cursor: pointer; transition: color var(--t-base), border-color var(--t-base);
+  }
+  .genre-toggle:hover { color: var(--accent-fg); border-color: var(--accent-dim); }
+
+  .desc-wrap { display: flex; flex-direction: column; gap: var(--sp-1); }
+  .desc {
+    font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-base);
+    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
+  }
+  .expand-toggle {
+    font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint);
+    letter-spacing: var(--tracking-wide); align-self: flex-start; transition: color var(--t-base);
+  }
+  .expand-toggle:hover { color: var(--accent-fg); }
+
+  .cta-section { display: flex; flex-direction: column; gap: var(--sp-2); }
+  .read-btn {
+    display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
+    width: 100%; padding: 9px var(--sp-3); border-radius: var(--radius-md);
+    background: var(--accent); border: 1px solid var(--accent);
+    color: var(--accent-contrast, #fff); font-size: var(--text-xs); font-family: var(--font-ui);
+    letter-spacing: var(--tracking-wide); cursor: pointer; transition: opacity var(--t-base);
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .read-btn:hover { opacity: 0.88; }
+
+  .actions { display: flex; align-items: center; gap: var(--sp-2); }
+  .library-btn {
+    display: flex; align-items: center; gap: var(--sp-2);
+    font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide);
+    padding: 5px 10px; border-radius: var(--radius-md); border: 1px solid var(--border-strong);
+    color: var(--text-muted); background: var(--bg-raised);
+    transition: border-color var(--t-base), color var(--t-base), background var(--t-base); flex: 1;
+  }
+  .library-btn:hover { border-color: var(--accent); color: var(--accent-fg); }
+  .library-btn.active { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
+  .library-btn:disabled { opacity: 0.4; cursor: default; }
+
+  .external-link {
+    display: flex; align-items: center; justify-content: center;
+    width: 28px; height: 28px; border-radius: var(--radius-md);
+    border: 1px solid var(--border-dim); color: var(--text-faint); flex-shrink: 0;
+    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
+  }
+  .external-link:hover { color: var(--text-muted); border-color: var(--border-strong); }
+
+  .progress-section { display: flex; flex-direction: column; gap: var(--sp-1); }
+  .progress-header { display: flex; justify-content: space-between; align-items: center; }
+  .progress-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .progress-pct   { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--accent-fg); letter-spacing: var(--tracking-wide); }
+  .progress-track { height: 3px; background: var(--border-base); border-radius: var(--radius-full); overflow: hidden; }
+  .progress-fill  { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width 0.4s ease; }
+
+  .details-section { display: flex; flex-direction: column; gap: 2px; }
+  .details-toggle {
+    display: flex; align-items: center; justify-content: space-between;
+    font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint);
+    letter-spacing: var(--tracking-wide); padding: 4px 0; transition: color var(--t-base);
+  }
+  .details-toggle:hover { color: var(--text-muted); }
+  .details-body { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-2); }
+
+  .detail-actions { display: flex; flex-direction: column; gap: var(--sp-1); padding-top: var(--sp-1); }
+  .detail-action-btn {
+    display: flex; align-items: center; gap: var(--sp-2); width: 100%;
+    padding: 6px var(--sp-2); border-radius: var(--radius-md);
+    font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
+    color: var(--text-faint); background: none; border: 1px solid var(--border-dim); cursor: pointer;
+    transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
+  }
+  .detail-action-btn:hover { color: var(--text-muted); border-color: var(--border-strong); background: var(--bg-raised); }
+  .detail-action-active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
+  .detail-action-active:hover { color: var(--accent-fg); border-color: var(--accent); }
+  .detail-action-danger { color: var(--color-error); }
+  .detail-action-danger:hover:not(:disabled) { background: var(--color-error-bg); border-color: var(--color-error); color: var(--color-error); }
+  .detail-action-danger:disabled { opacity: 0.4; cursor: default; }
+</style>
@@ -0,0 +1,79 @@
+import type { Chapter } from '$lib/types'
+
+export type ChapterSortMode = 'source' | 'chapterNumber' | 'uploadDate'
+export type ChapterSortDir  = 'asc' | 'desc'
+
+export interface ChapterDisplayPrefs {
+  sortMode?:           ChapterSortMode
+  sortDir?:            ChapterSortDir
+  preferredScanlator?: string
+  scanlatorFilter?:    string[]
+  scanlatorBlacklist?: string[]
+  scanlatorForce?:     boolean
+}
+
+function sortByMode(a: Chapter, b: Chapter, mode: ChapterSortMode): number {
+  if (mode === 'chapterNumber') return a.chapterNumber - b.chapterNumber
+  if (mode === 'uploadDate')    return Number(a.uploadDate ?? 0) - Number(b.uploadDate ?? 0)
+  return a.sourceOrder - b.sourceOrder
+}
+
+export function buildChapterList(chapters: Chapter[], prefs: ChapterDisplayPrefs = {}): Chapter[] {
+  const {
+    sortMode           = 'source',
+    sortDir            = 'asc',
+    preferredScanlator = '',
+    scanlatorFilter    = [],
+    scanlatorBlacklist = [],
+    scanlatorForce     = false,
+  } = prefs
+
+  let base = [...chapters]
+
+  if (scanlatorBlacklist.length > 0) {
+    base = base.filter(c => !scanlatorBlacklist.includes(c.scanlator ?? ''))
+  }
+
+  base.sort((a, b) => sortByMode(a, b, sortMode))
+
+  if (preferredScanlator) {
+    const pref: Chapter[] = [], rest: Chapter[] = []
+    for (const c of base) (c.scanlator === preferredScanlator ? 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) {
+        if (!scanlatorForce || scanlatorFilter.includes(ch.scanlator ?? '')) {
+          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()].sort((a, b) => sortByMode(a, b, sortMode))
+  }
+
+  return sortDir === 'desc' ? base.reverse() : base
+}
+
+export function chaptersAscending(chapters: Chapter[]): Chapter[] {
+  return [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder)
+}
+
+export function buildReaderChapterList(
+  chapters: Chapter[],
+  prefs:    Pick<ChapterDisplayPrefs, 'preferredScanlator' | 'scanlatorFilter'> | undefined,
+): Chapter[] {
+  return buildChapterList(chapters, {
+    sortMode:           'source',
+    sortDir:            'asc',
+    preferredScanlator: prefs?.preferredScanlator,
+    scanlatorFilter:    prefs?.scanlatorFilter,
+  })
+}
@@ -0,0 +1,18 @@
+import { settingsState, updateSettings } from '$lib/state/settings.svelte'
+import type { MangaPrefs }               from '$lib/state/series.svelte'
+
+export { DEFAULT_MANGA_PREFS } from '$lib/state/series.svelte'
+
+export function getPref<K extends keyof MangaPrefs>(mangaId: number, key: K): MangaPrefs[K] {
+  const prefs = settingsState.settings.mangaPrefs?.[mangaId] ?? {}
+  return (prefs[key] ?? DEFAULT_MANGA_PREFS[key]) as MangaPrefs[K]
+}
+
+export function setPref<K extends keyof MangaPrefs>(mangaId: number, key: K, value: MangaPrefs[K]) {
+  updateSettings({
+    mangaPrefs: {
+      ...settingsState.settings.mangaPrefs,
+      [mangaId]: { ...(settingsState.settings.mangaPrefs?.[mangaId] ?? {}), [key]: value },
+    },
+  })
+}
@@ -0,0 +1,14 @@
+<script lang="ts">
+  let { onClose, ...rest }: { onClose?: () => void; [k: string]: any } = $props()
+</script>
+
+<div class="stub-panel">
+  <button class="stub-close" onclick={onClose}>✕</button>
+  <p class="stub-label">AutomationPanel</p>
+</div>
+
+<style>
+  .stub-panel  { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; min-width: 240px; }
+  .stub-close  { align-self: flex-end; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
+  .stub-label  { color: var(--text-faint); font-size: var(--text-sm); }
+</style>
@@ -0,0 +1,14 @@
+<script lang="ts">
+  let { onClose, ...rest }: { onClose?: () => void; [k: string]: any } = $props()
+</script>
+
+<div class="stub-panel">
+  <button class="stub-close" onclick={onClose}>✕</button>
+  <p class="stub-label">CoverPickerPanel</p>
+</div>
+
+<style>
+  .stub-panel  { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; min-width: 240px; }
+  .stub-close  { align-self: flex-end; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
+  .stub-label  { color: var(--text-faint); font-size: var(--text-sm); }
+</style>
@@ -0,0 +1,14 @@
+<script lang="ts">
+  let { onClose, ...rest }: { onClose?: () => void; [k: string]: any } = $props()
+</script>
+
+<div class="stub-panel">
+  <button class="stub-close" onclick={onClose}>✕</button>
+  <p class="stub-label">MarkersPanel</p>
+</div>
+
+<style>
+  .stub-panel  { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; min-width: 240px; }
+  .stub-close  { align-self: flex-end; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
+  .stub-label  { color: var(--text-faint); font-size: var(--text-sm); }
+</style>
@@ -1,14 +1,13 @@
 <script lang="ts">
-  import { invoke } from '@tauri-apps/api/core'
-  import { listen } from '@tauri-apps/api/event'
-  import { getVersion } from '@tauri-apps/api/app'
-  import { open as openUrl } from '@tauri-apps/plugin-shell'
+  import { platformService } from '$lib/platform-service'
  import { autoBackupAppData } from '$lib/core/backup'
  import { requestManager } from '$lib/request-manager'
+  import type { ReleaseInfo } from '$lib/platform-adapters/types'

-  interface ReleaseInfo { tag_name: string; name: string; body: string; published_at: string; html_url: string }
  type UpdatePhase = 'idle' | 'downloading' | 'launching' | 'ready' | 'error'
-  const IS_WINDOWS = navigator.userAgent.includes('Windows')
+
+  const supportsUpdates = platformService.isSupported('app-updates')
+  const IS_WINDOWS      = navigator.userAgent.includes('Windows')

  interface AboutServer { name: string; version: string; buildType: string; buildTime: number; github: string; discord: string }
  interface AboutWebUI  { channel: string; tag: string; updateTimestamp: number }
@@ -29,32 +28,33 @@
  let webuiInfo  = $state<AboutWebUI | null>(null)

  $effect(() => {
-    getVersion().then(v => appVersion = v).catch(() => appVersion = 'unknown')
+    platformService.getVersion().then(v => appVersion = v).catch(() => appVersion = 'unknown')
    if (!releasesLoaded) { releasesLoaded = true; loadReleases() }
+    loadServerInfo()
  })

-  $effect(() => { loadServerInfo() })
-
  $effect(() => {
+    if (!supportsUpdates) return
    let unlisten: (() => void) | undefined
-    listen<{ downloaded: number; total: number | null }>('update-progress', e => {
-      dlBytes = e.payload.downloaded; dlTotal = e.payload.total ?? null
+    platformService.onUpdateProgress(p => {
+      dlBytes = p.downloaded; dlTotal = p.total ?? null
    }).then(fn => { unlisten = fn })
    return () => unlisten?.()
  })

  $effect(() => {
+    if (!supportsUpdates) return
    let unlisten: (() => void) | undefined
-    listen('update-launching', () => { updatePhase = 'launching' }).then(fn => { unlisten = fn })
+    platformService.onUpdateLaunching(() => { updatePhase = 'launching' }).then(fn => { unlisten = fn })
    return () => unlisten?.()
  })

  async function loadReleases() {
+    if (!supportsUpdates) return
    releasesLoading = true; releasesError = null
    try {
      const timeout = new Promise<never>((_, reject) => setTimeout(() => reject(new Error('Request timed out after 10s')), 10_000))
-      const all = await Promise.race([invoke<ReleaseInfo[]>('list_releases'), timeout])
-      releases = all.filter(r => typeof r.tag_name === 'string' && r.tag_name.trim())
+      releases = await Promise.race([platformService.listReleases(), timeout])
    } catch (e: any) {
      releasesError = e instanceof Error ? e.message : String(e)
    } finally { releasesLoading = false }
@@ -81,7 +81,7 @@
  }

  const onLatestVersion = $derived((() => {
-    if (releasesLoading || releases.length === 0 || !appVersion || appVersion === '…') return false
+    if (!supportsUpdates || releasesLoading || releases.length === 0 || !appVersion || appVersion === '…') return false
    const sorted = releases.slice().sort((a, b) => compareSemver(a.tag_name, b.tag_name))
    return compareSemver(appVersion, sorted[0].tag_name) >= 0
  })())
@@ -115,11 +115,11 @@
    try {
      if (IS_WINDOWS) {
        await autoBackupAppData()
-        try { await invoke('kill_server') } catch {}
-        await invoke('download_and_install_update', { tag: release.tag_name })
+        try { await platformService.stopServer() } catch {}
+        await platformService.installAppUpdate(release.tag_name)
        updatePhase = 'ready'
      } else {
-        await openUrl(release.html_url)
+        await platformService.openExternal(release.html_url)
        updatePhase = 'idle'; targetTag = null
      }
    } catch (e: any) {
@@ -128,7 +128,7 @@
    }
  }

-  async function restartNow() { await invoke('restart_app') }
+  async function restartNow() { await platformService.restartApp() }
  function cancelUpdate() { updatePhase = 'idle'; updateError = null; targetTag = null; dlBytes = 0; dlTotal = null }
 </script>

@@ -149,9 +149,11 @@
    <div class="s-section-body">
      <div class="s-row">
        <div class="s-row-info"><span class="s-label">Installed</span><span class="s-desc">v{appVersion}</span></div>
-        <button class="s-btn" onclick={() => { releasesError = null; loadReleases() }} disabled={releasesLoading}>
-          {releasesLoading ? 'Loading…' : 'Refresh'}
-        </button>
+        {#if supportsUpdates}
+          <button class="s-btn" onclick={() => { releasesError = null; loadReleases() }} disabled={releasesLoading}>
+            {releasesLoading ? 'Loading…' : 'Refresh'}
+          </button>
+        {/if}
      </div>
      {#if onLatestVersion}
        <div class="s-row">
@@ -225,58 +227,60 @@
    </div>
  {/if}

-  <div class="s-section">
-    <p class="s-section-title">Releases</p>
-    <div class="s-section-body">
-      {#if releasesError}
-        <p class="s-empty" style="color:var(--color-error)">{releasesError}</p>
-      {:else if releasesLoading}
-        <p class="s-empty">Fetching releases…</p>
-      {:else if releases.length === 0}
-        <p class="s-empty">No releases found.</p>
-      {:else}
-        <div class="s-release-scroll">
-          {#each releases as release}
-            {@const isCurrent    = isCurrentVersion(release.tag_name)}
-            {@const isExpanded   = expandedTag === release.tag_name}
-            {@const isTarget     = targetTag === release.tag_name}
-            {@const isInstalling = isTarget && updatePhase === 'downloading'}
-            <div class="s-release-row" class:current={isCurrent}>
-              <div class="s-release-header">
-                <div class="s-release-meta">
-                  <span class="s-release-tag">{release.tag_name}</span>
-                  {#if isCurrent}<span class="s-release-badge">installed</span>{/if}
-                  {#if release.published_at}<span class="s-release-date">{fmtDate(release.published_at)}</span>{/if}
-                </div>
-                <div class="s-btn-row">
-                  {#if release.body.trim()}
-                    <button class="s-btn" onclick={() => expandedTag = isExpanded ? null : release.tag_name}>
-                      {isExpanded ? 'Hide' : 'Changelog'}
-                    </button>
-                  {/if}
-                  {#if !isCurrent}
-                    {#if IS_WINDOWS}
-                      <button class="s-btn" class:s-btn-accent={!isInstalling}
-                        disabled={updatePhase === 'downloading'} onclick={() => installUpdate(release)}>
-                        {isInstalling ? 'Downloading…' : 'Install'}
+  {#if supportsUpdates}
+    <div class="s-section">
+      <p class="s-section-title">Releases</p>
+      <div class="s-section-body">
+        {#if releasesError}
+          <p class="s-empty" style="color:var(--color-error)">{releasesError}</p>
+        {:else if releasesLoading}
+          <p class="s-empty">Fetching releases…</p>
+        {:else if releases.length === 0}
+          <p class="s-empty">No releases found.</p>
+        {:else}
+          <div class="s-release-scroll">
+            {#each releases as release}
+              {@const isCurrent    = isCurrentVersion(release.tag_name)}
+              {@const isExpanded   = expandedTag === release.tag_name}
+              {@const isTarget     = targetTag === release.tag_name}
+              {@const isInstalling = isTarget && updatePhase === 'downloading'}
+              <div class="s-release-row" class:current={isCurrent}>
+                <div class="s-release-header">
+                  <div class="s-release-meta">
+                    <span class="s-release-tag">{release.tag_name}</span>
+                    {#if isCurrent}<span class="s-release-badge">installed</span>{/if}
+                    {#if release.published_at}<span class="s-release-date">{fmtDate(release.published_at)}</span>{/if}
+                  </div>
+                  <div class="s-btn-row">
+                    {#if release.body.trim()}
+                      <button class="s-btn" onclick={() => expandedTag = isExpanded ? null : release.tag_name}>
+                        {isExpanded ? 'Hide' : 'Changelog'}
                      </button>
-                    {:else}
-                      <button class="s-btn" onclick={() => installUpdate(release)}>Open on GitHub</button>
                    {/if}
-                  {/if}
+                    {#if !isCurrent}
+                      {#if IS_WINDOWS}
+                        <button class="s-btn" class:s-btn-accent={!isInstalling}
+                          disabled={updatePhase === 'downloading'} onclick={() => installUpdate(release)}>
+                          {isInstalling ? 'Downloading…' : 'Install'}
+                        </button>
+                      {:else}
+                        <button class="s-btn" onclick={() => installUpdate(release)}>Open on GitHub</button>
+                      {/if}
+                    {/if}
+                  </div>
                </div>
+                {#if isExpanded && release.body.trim()}
+                  <div class="s-release-body">
+                    <pre class="s-release-body pre">{release.body.trim()}</pre>
+                  </div>
+                {/if}
              </div>
-              {#if isExpanded && release.body.trim()}
-                <div class="s-release-body">
-                  <pre class="s-release-body pre">{release.body.trim()}</pre>
-                </div>
-              {/if}
-            </div>
-          {/each}
-        </div>
-      {/if}
+            {/each}
+          </div>
+        {/if}
+      </div>
    </div>
-  </div>
+  {/if}

  <div class="s-section">
    <p class="s-section-title">Links</p>
@@ -114,14 +114,16 @@
        const reordered = [...sortable]
        const [moved]   = reordered.splice(sFromIdx, 1)
        reordered.splice(sToIdx, 0, moved)
-        categories = [...zeroCat, ...reordered.map((c, i) => ({ ...c, order: i + 1 }))]
-        getAdapter().updateCategoryOrder({ id: fromNumId, position: sToIdx + 1 })
+        const optimistic = [...zeroCat, ...reordered.map((c, i) => ({ ...c, order: i + 1 }))]
+        categories = optimistic
+        const serverPosition = sToIdx + 1
+        getAdapter().updateCategoryOrder({ id: fromNumId, position: serverPosition })
          .then((updated: Category[]) => {
            categories = [
              ...zeroCat,
              ...updated.sort((a: Category, b: Category) => a.order - b.order).map((fresh: Category) => {
-                const existing = categories.find(c => c.id === fresh.id)
-                return existing ? { ...existing, ...fresh } : fresh
+                const local = optimistic.find(c => c.id === fresh.id)
+                return local ? { ...fresh, mangas: local.mangas } : fresh
              }),
            ]
          })
@@ -203,7 +205,7 @@
                    <DotsSixVertical size={14} weight="bold" />
                  </span>
                  <span class="s-folder-name">{cat?.name ?? 'Completed'}</span>
-                  <span class="s-folder-count">{cat?.mangas?.nodes.length ?? 0} manga</span>
+                  <span class="s-folder-count">{cat?.mangas?.nodes?.length ?? 0} manga</span>
                  <span class="s-folder-badge">built-in</span>
                  <div class="s-folder-actions">
                    <button class="s-btn-icon" class:muted={hidden} onclick={() => toggleHidden(id)} title={hidden ? 'Show tab in library' : 'Hide tab from library'}>
@@ -1,7 +1,12 @@
 <script lang="ts">
-export { eventToKeybind, matchesKeybind } from './keybindEngine'
-export { DEFAULT_KEYBINDS, KEYBIND_LABELS } from './defaultBinds'
-export type { Keybinds } from './defaultBinds'
+  import { settingsState, updateSettings } from '$lib/state/settings.svelte'
+  import { eventToKeybind } from '$lib/core/keybinds/keybindEngine'
+  import { DEFAULT_KEYBINDS, KEYBIND_LABELS } from '$lib/core/keybinds/defaultBinds'
+  import type { Keybinds } from '$lib/core/keybinds/defaultBinds'
+
+  function resetKeybinds() {
+    updateSettings({ keybinds: { ...DEFAULT_KEYBINDS } })
+  }

  let listeningKey: keyof Keybinds | null = $state(null)

@@ -1,8 +1,7 @@
 <script lang="ts">
  import { Trash, ClockCounterClockwise } from 'phosphor-svelte'
-  import { invoke } from '@tauri-apps/api/core'
  import { untrack } from 'svelte'
-  import { appState } from '$lib/state/app.svelte'
+  import { platformService } from '$lib/platform-service'
  import { toast } from '$lib/state/notifications.svelte'
  import { settingsState, updateSettings } from '$lib/state/settings.svelte'
  import { exportAppData, importAppData } from '$lib/core/backup'
@@ -14,6 +13,8 @@
  import { clearPageCache } from '$lib/request-manager'
  import { cache as queryCache } from '$lib/core/cache/queryCache'

+  const supportsFilesystem = platformService.isSupported('filesystem')
+
  type ResetState = 'idle' | 'busy' | 'done' | 'error'
  interface ResetItem { key: string; label: string; desc: string; state: ResetState; error: string | null; confirm: boolean }

@@ -76,8 +77,8 @@
    clearPageCache()
    queryCache.clearAll()
    await Promise.all([
-      invoke('clear_moku_cache'),
-      invoke('clear_suwayomi_cache'),
+      platformService.clearMokuCache(),
+      platformService.clearSuwayomiCache(),
      gql(`mutation { clearCachedImages(input: { cachedPages: true, cachedThumbnails: true, downloadedThumbnails: false }) { cachedPages cachedThumbnails } }`),
    ])
  }
@@ -98,14 +99,14 @@
          await persistSettings({ settings: DEFAULT_SETTINGS, storeVersion: 1 })
          patchReset(key, { state: 'done' })
          await showExitCountdown()
-          invoke('exit_app')
+          platformService.exitApp()
          return
        case 'suwayomi-data':
          localStorage.clear()
-          await invoke('reset_suwayomi_data')
+          await platformService.resetSuwayomiData()
          patchReset(key, { state: 'done' })
          await showExitCountdown()
-          invoke('exit_app')
+          platformService.exitApp()
          return
      }
      patchReset(key, { state: 'done' })
@@ -138,8 +139,9 @@

  let defaultDownloadsPath = $state('')
  $effect(() => {
+    if (!supportsFilesystem) return
    if (!isExternalServer) {
-      invoke<string>('get_default_downloads_path').then(p => { defaultDownloadsPath = p })
+      platformService.getDefaultDownloadsPath().then(p => { defaultDownloadsPath = p })
    } else {
      defaultDownloadsPath = ''
    }
@@ -163,6 +165,7 @@
  let resetSectionOpen  = $state(false)

  async function fetchStorage() {
+    if (!supportsFilesystem) return
    storageLoading = true; storageError = null
    try {
      const pathData = await gql<{ downloadsPath: string | null; localSourcePath: string | null }>(
@@ -183,7 +186,7 @@
      }
      if (dirsToScan.length === 0) { multiStorageInfos = []; storageInfo = null; return }
      const results = await Promise.allSettled(
-        dirsToScan.map(d => invoke<StorageInfo>('get_storage_info', { downloadsPath: d.path }).then(info => ({ ...info, label: d.label })))
+        dirsToScan.map(d => platformService.getStorageInfo(d.path).then(info => ({ ...info, label: d.label })))
      )
      multiStorageInfos = results
        .filter((r): r is PromiseFulfilledResult<StorageInfo & { label: string }> => r.status === 'fulfilled')
@@ -195,17 +198,16 @@
  }

  async function validatePath(path: string): Promise<string | null> {
-    if (!path.trim()) return null
-    if (isExternalServer) return null
+    if (!path.trim() || isExternalServer || !supportsFilesystem) return null
    try {
-      const exists = await invoke<boolean>('check_path_exists', { path: path.trim() })
+      const exists = await platformService.checkPathExists(path.trim())
      return exists ? null : 'Directory does not exist'
    } catch { return 'Could not check path' }
  }

  async function createDirectory(path: string): Promise<void> {
    if (isExternalServer) throw new Error('Cannot create directories on an external server')
-    await invoke('create_directory', { path })
+    await platformService.createDirectory(path)
  }

  async function savePaths() {
@@ -219,11 +221,11 @@
      await gql(`mutation($path: String!) { setDownloadsPath(input: { location: $path }) { location } }`, { path: dl })
      if (loc) await gql(`mutation($path: String!) { setLocalSourcePath(input: { location: $path }) { location } }`, { path: loc })
      updateSettings({ serverDownloadsPath: dl, serverLocalSourcePath: loc })
-      if (!isExternalServer) {
+      if (supportsFilesystem && !isExternalServer) {
        const oldDl = confirmedDownloadsPath || defaultDownloadsPath
        const newDl = dl || defaultDownloadsPath
        if (newDl && oldDl && newDl !== oldDl) {
-          const hadContent = await invoke<boolean>('check_path_exists', { path: oldDl })
+          const hadContent = await platformService.checkPathExists(oldDl)
          if (hadContent) { migrateFrom = oldDl; migrateTo = newDl }
        }
      }
@@ -238,12 +240,9 @@
  async function startMigration() {
    if (!migrateFrom || !migrateTo) return
    migrating = true; migrateError = null; migrateProgress = { done: 0, total: 0, current: '' }
-    const { listen: tauriListen } = await import('@tauri-apps/api/event')
-    migrateUnlisten = await tauriListen<{ done: number; total: number; current: string }>(
-      'migrate_progress', e => { migrateProgress = e.payload }
-    )
+    migrateUnlisten = await platformService.onMigrateProgress(p => { migrateProgress = p })
    try {
-      await invoke('migrate_downloads', { src: migrateFrom, dst: migrateTo })
+      await platformService.migrateDownloads(migrateFrom, migrateTo)
      migrateFrom = null; migrateTo = null; migrateProgress = null
      await fetchStorage()
    } catch (e: any) {
@@ -254,17 +253,17 @@
  function dismissMigration() { migrateFrom = null; migrateTo = null; migrateError = null; migrateProgress = null }

  async function browseDownloadsFolder() {
-    const picked = await invoke<string | null>('pick_downloads_folder')
+    const picked = await platformService.pickFolder()
    if (picked) { downloadsPathInput = picked; pathsFieldError = { ...pathsFieldError, dl: undefined }; await savePaths() }
  }

  async function browseLocalSourceFolder() {
-    const picked = await invoke<string | null>('pick_downloads_folder')
+    const picked = await platformService.pickFolder()
    if (picked) { localSourcePathInput = picked; pathsFieldError = { ...pathsFieldError, loc: undefined }; await savePaths() }
  }

  async function browseExtraScanDir() {
-    const picked = await invoke<string | null>('pick_downloads_folder')
+    const picked = await platformService.pickFolder()
    if (picked) { newScanDir = picked; addExtraScanDir() }
  }

@@ -410,6 +409,11 @@
    restoreLoading = true; restoreError = null; restoreStatus = null; restoreJobId = null
    stopRestorePoll()
    try {
+      const form = buildBackupFormData(
+        restoreFile,
+        `mutation RestoreBackup($backup: Upload!) { restoreBackup(input: { backup: $backup }) { id status { mangaProgress state totalManga } } }`,
+        { backup: null }
+      )
      const resp = await fetch(`${serverUrl()}/api/graphql`, { method: 'POST', headers: buildAuthHeaders(), body: form })
      const json = await resp.json()
      if (json.errors?.length) throw new Error(json.errors[0].message)
@@ -445,7 +449,8 @@
  let appDataBackupDir = $state<string | null>(null)

  $effect(() => {
-    invoke<string>('get_auto_backup_dir').then(d => { appDataBackupDir = d }).catch(() => {})
+    if (!supportsFilesystem) return
+    platformService.getAutoBackupDir().then(d => { appDataBackupDir = d }).catch(() => {})
  })

  async function handleExportAppData() {
@@ -507,6 +512,8 @@
        <p class="s-empty">Reading filesystem…</p>
      {:else if storageError}
        <p class="s-empty" style="color:var(--color-error)">{storageError}</p>
+      {:else if !supportsFilesystem}
+        <p class="s-empty">Disk usage is unavailable in web mode.</p>
      {:else if isExternalServer}
        <p class="s-empty">Disk usage is unavailable for external servers — filesystem access requires a local connection.</p>
      {:else if multiStorageInfos.length > 0}
@@ -551,7 +558,7 @@
          spellcheck="false"
          onkeydown={(e) => e.key === 'Enter' && savePaths()}
          oninput={() => { pathsFieldError = { ...pathsFieldError, dl: undefined } }} />
-        {#if !isExternalServer}
+        {#if !isExternalServer && supportsFilesystem}
          <button class="s-btn" onclick={browseDownloadsFolder}>Browse</button>
        {/if}
      </div>
@@ -565,7 +572,7 @@
          {/if}
        </div>
        <div class="s-btn-row">
-          {#if pathsFieldError.dl && !isExternalServer}
+          {#if pathsFieldError.dl && !isExternalServer && supportsFilesystem}
            <button class="s-btn" onclick={async () => {
              try { await createDirectory(downloadsPathInput.trim()); pathsFieldError = { ...pathsFieldError, dl: undefined } }
              catch (e: any) { pathsFieldError = { ...pathsFieldError, dl: e?.message ?? 'Failed' } }
@@ -624,10 +631,10 @@
                bind:value={localSourcePathInput} placeholder="Optional" spellcheck="false"
                onkeydown={(e) => e.key === 'Enter' && savePaths()}
                oninput={() => { pathsFieldError = { ...pathsFieldError, loc: undefined } }} />
-              {#if !isExternalServer}
+              {#if !isExternalServer && supportsFilesystem}
                <button class="s-btn" onclick={browseLocalSourceFolder}>Browse</button>
              {/if}
-              {#if pathsFieldError.loc && !isExternalServer}
+              {#if pathsFieldError.loc && !isExternalServer && supportsFilesystem}
                <button class="s-btn" onclick={async () => {
                  try { await createDirectory(localSourcePathInput.trim()); pathsFieldError = { ...pathsFieldError, loc: undefined } }
                  catch (e: any) { pathsFieldError = { ...pathsFieldError, loc: e?.message ?? 'Failed' } }
@@ -656,7 +663,7 @@
          <div class="s-btn-row">
            <input class="s-input mono" bind:value={newScanDir} placeholder="/path/to/dir" spellcheck="false"
              onkeydown={(e) => e.key === 'Enter' && addExtraScanDir()} />
-            {#if !isExternalServer}
+            {#if !isExternalServer && supportsFilesystem}
              <button class="s-btn" onclick={browseExtraScanDir}>Browse</button>
            {/if}
          </div>
@@ -790,7 +797,7 @@
            <span class="s-label">Export settings</span>
            <span class="s-desc">Save all Moku app settings to a .zip via a native save dialog.</span>
          </div>
-          <button class="s-btn s-btn-accent" onclick={handleExportAppData} disabled={appDataExporting}>
+          <button class="s-btn s-btn-accent" onclick={handleExportAppData} disabled={appDataExporting || !supportsFilesystem}>
            {appDataExporting ? 'Saving…' : 'Export'}
          </button>
        </div>
@@ -800,7 +807,7 @@
            <span class="s-label">Import settings</span>
            <span class="s-desc">Restore from a previously exported .zip file. Reloads the app immediately.</span>
          </div>
-          <button class="s-btn" onclick={handleImportAppData} disabled={appDataImporting}>
+          <button class="s-btn" onclick={handleImportAppData} disabled={appDataImporting || !supportsFilesystem}>
            {appDataImporting ? 'Importing…' : 'Import'}
          </button>
        </div>
@@ -821,7 +828,7 @@
              <span class="s-label">Auto-backup location</span>
              <span class="s-desc">Pre-update snapshots are kept here (last 5).</span>
            </div>
-            <button class="s-btn" onclick={() => invoke('open_path', { path: appDataBackupDir })}>Open folder</button>
+            <button class="s-btn" onclick={() => platformService.openPath(appDataBackupDir!)}>Open folder</button>
          </div>
        {/if}

@@ -0,0 +1,14 @@
+<script lang="ts">
+  let { onClose, ...rest }: { onClose?: () => void; [k: string]: any } = $props()
+</script>
+
+<div class="stub-panel">
+  <button class="stub-close" onclick={onClose}>✕</button>
+  <p class="stub-label">MigrateModal</p>
+</div>
+
+<style>
+  .stub-panel  { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; min-width: 240px; }
+  .stub-close  { align-self: flex-end; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
+  .stub-label  { color: var(--text-faint); font-size: var(--text-sm); }
+</style>
@@ -0,0 +1,14 @@
+<script lang="ts">
+  let { onClose, ...rest }: { onClose?: () => void; [k: string]: any } = $props()
+</script>
+
+<div class="stub-panel">
+  <button class="stub-close" onclick={onClose}>✕</button>
+  <p class="stub-label">SeriesLinkPanel</p>
+</div>
+
+<style>
+  .stub-panel  { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; min-width: 240px; }
+  .stub-close  { align-self: flex-end; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
+  .stub-label  { color: var(--text-faint); font-size: var(--text-sm); }
+</style>
@@ -3,49 +3,39 @@

  interface Props {
    children: Snippet;
-    class?: string;
+    class?:   string;
+    enabled?: boolean;
  }

-  let { children, class: cls = "" }: Props = $props();
+  let { children, class: cls = "", enabled = true }: Props = $props();
 </script>

-<div class="hover-3d {cls}">
-  <div class="hover-3d-content">
-    {@render children()}
-    <div class="shine"></div>
-    <div class="edge-top"></div>
-    <div class="edge-left"></div>
+{#if enabled}
+  <div class="hover-3d {cls}">
+    <div class="hover-3d-content">
+      {@render children()}
+    </div>
+    <div></div><div></div><div></div>
+    <div></div><div></div><div></div>
+    <div></div><div></div>
  </div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-  <div></div>
-</div>
+{:else}
+  <div class={cls}>
+    {@render children()}
+  </div>
+{/if}

 <style>
  .hover-3d {
    display: inline-grid;
    perspective: 600px;
-    --tx: 0;
-    --ty: 0;
-    --shine-x: 50%;
-    --shine-y: 50%;
-    --shadow-x: 0px;
-    --shadow-y: 0px;
+    --tx: 0; --ty: 0;
+    --shadow-x: 0px; --shadow-y: 0px;
    --ease-out:   linear(0, 0.931 13.8%, 1.196 21.4%, 1.343 29.8%, 1.378 36%, 1.365 43.2%, 1.059 78%, 1);
    --ease-hover: linear(0, 0.708 15.2%, 0.927 23.6%, 1.067 33%, 1.12 41%, 1.13 50.2%, 1.019 83.2%, 1);
  }

-  .hover-3d > :nth-child(n + 2) {
-    isolation: isolate;
-    z-index: 1;
-    scale: 1.2;
-  }
-
+  .hover-3d > :nth-child(n + 2) { isolation: isolate; z-index: 1; scale: 1.2; }
  .hover-3d > :nth-child(2) { grid-area: 1/1/2/2; }
  .hover-3d > :nth-child(3) { grid-area: 1/2/2/3; }
  .hover-3d > :nth-child(4) { grid-area: 1/3/2/4; }
@@ -73,58 +63,14 @@
      0 2px 6px rgba(0,0,0,0.12);
  }

-  .hover-3d:hover > .hover-3d-content {
-    --ease-out: var(--ease-hover);
-    scale: 1.055;
-  }
+  .hover-3d:hover > .hover-3d-content { --ease-out: var(--ease-hover); scale: 1.055; }

-  .shine {
-    pointer-events: none;
-    position: absolute;
-    inset: 0;
-    z-index: 2;
-    opacity: 0;
-    border-radius: inherit;
-    background-image: radial-gradient(
-      ellipse 80% 60% at var(--shine-x) var(--shine-y),
-      rgba(255,255,255,0.22) 0%,
-      rgba(255,255,255,0.08) 30%,
-      transparent 65%
-    );
-    transition: opacity ease-out 350ms;
-    mix-blend-mode: screen;
-  }
-  .hover-3d:hover .shine { opacity: 1; }
-
-  .edge-top {
-    pointer-events: none;
-    position: absolute;
-    top: 0; left: 0; right: 0;
-    height: 1px;
-    z-index: 3;
-    background: linear-gradient(90deg, transparent 10%, rgba(255,255,255,0.18) 50%, transparent 90%);
-    opacity: 0;
-    transition: opacity ease-out 350ms;
-  }
-  .edge-left {
-    pointer-events: none;
-    position: absolute;
-    top: 0; left: 0; bottom: 0;
-    width: 1px;
-    z-index: 3;
-    background: linear-gradient(180deg, transparent 10%, rgba(255,255,255,0.12) 50%, transparent 90%);
-    opacity: 0;
-    transition: opacity ease-out 350ms;
-  }
-  .hover-3d:hover .edge-top,
-  .hover-3d:hover .edge-left { opacity: 1; }
-
-  .hover-3d:has(> :nth-child(2):hover)  { --tx: -1; --ty:  1; --shine-x:  15%; --shine-y:  15%; --shadow-x: -8px; --shadow-y: -8px; }
-  .hover-3d:has(> :nth-child(3):hover)  { --tx: -1; --ty:  0; --shine-x:  50%; --shine-y:  10%; --shadow-x:  0px; --shadow-y: -8px; }
-  .hover-3d:has(> :nth-child(4):hover)  { --tx: -1; --ty: -1; --shine-x:  85%; --shine-y:  15%; --shadow-x:  8px; --shadow-y: -8px; }
-  .hover-3d:has(> :nth-child(5):hover)  { --tx:  0; --ty:  1; --shine-x:  10%; --shine-y:  50%; --shadow-x: -8px; --shadow-y:  0px; }
-  .hover-3d:has(> :nth-child(6):hover)  { --tx:  0; --ty: -1; --shine-x:  90%; --shine-y:  50%; --shadow-x:  8px; --shadow-y:  0px; }
-  .hover-3d:has(> :nth-child(7):hover)  { --tx:  1; --ty:  1; --shine-x:  15%; --shine-y:  85%; --shadow-x: -8px; --shadow-y:  8px; }
-  .hover-3d:has(> :nth-child(8):hover)  { --tx:  1; --ty:  0; --shine-x:  50%; --shine-y:  90%; --shadow-x:  0px; --shadow-y:  8px; }
-  .hover-3d:has(> :nth-child(9):hover)  { --tx:  1; --ty: -1; --shine-x:  85%; --shine-y:  85%; --shadow-x:  8px; --shadow-y:  8px; }
+  .hover-3d:has(> :nth-child(2):hover)  { --tx: -1; --ty:  1; --shadow-x: -8px; --shadow-y: -8px; }
+  .hover-3d:has(> :nth-child(3):hover)  { --tx: -1; --ty:  0; --shadow-x:  0px; --shadow-y: -8px; }
+  .hover-3d:has(> :nth-child(4):hover)  { --tx: -1; --ty: -1; --shadow-x:  8px; --shadow-y: -8px; }
+  .hover-3d:has(> :nth-child(5):hover)  { --tx:  0; --ty:  1; --shadow-x: -8px; --shadow-y:  0px; }
+  .hover-3d:has(> :nth-child(6):hover)  { --tx:  0; --ty: -1; --shadow-x:  8px; --shadow-y:  0px; }
+  .hover-3d:has(> :nth-child(7):hover)  { --tx:  1; --ty:  1; --shadow-x: -8px; --shadow-y:  8px; }
+  .hover-3d:has(> :nth-child(8):hover)  { --tx:  1; --ty:  0; --shadow-x:  0px; --shadow-y:  8px; }
+  .hover-3d:has(> :nth-child(9):hover)  { --tx:  1; --ty: -1; --shadow-x:  8px; --shadow-y:  8px; }
 </style>
@@ -1,7 +1,6 @@
 <script lang="ts">
-  import { settings } from "$lib/state/settings.svelte";
-  import { getBlobUrl } from "$lib/core/cache/imageCache";
-  import { platformService } from "$lib/platform-service/index";
+  import { settingsState } from "$lib/state/settings.svelte";
+  import { getBlobUrl }    from "$lib/core/cache/imageCache";

  let {
    src,
@@ -23,7 +22,18 @@
    [key: string]: any;
  } = $props();

-  const isAuth = $derived((settings.serverAuthMode ?? "NONE") !== "NONE");
+  function getServerUrl(): string {
+    const url = settingsState.settings.serverUrl;
+    return typeof url === "string" && url.trim() ? url.replace(/\/$/, "") : "http://127.0.0.1:4567";
+  }
+
+  function plainThumbUrl(path: string): string {
+    if (!path) return "";
+    if (path.startsWith("http")) return path;
+    return `${getServerUrl()}${path}`;
+  }
+
+  const isAuth = $derived((settingsState.settings.serverAuthMode ?? "NONE") !== "NONE");

  let blobUrl = $state("");
  let reqId   = 0;
@@ -35,8 +45,8 @@

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

-    const id     = ++reqId;
-    const bareUrl = _src.startsWith("http") ? _src : `${platformService.getServerUrl()}${_src}`;
+    const id      = ++reqId;
+    const bareUrl = _src.startsWith("http") ? _src : `${getServerUrl()}${_src}`;
    getBlobUrl(bareUrl, _priority)
      .then(u  => { if (id === reqId) blobUrl = u; })
      .catch(() => { if (id === reqId) blobUrl = ""; });
@@ -45,7 +55,7 @@
  const resolved = $derived(
    isAuth
      ? (blobUrl || undefined)
-      : (src ? platformService.plainThumbUrl(src) : undefined)
+      : (src ? plainThumbUrl(src) : undefined)
  );
 </script>

@@ -0,0 +1,231 @@
+<script lang="ts">
+  export interface MenuItem {
+    label:      string;
+    icon?:      any;
+    onClick:    () => void;
+    danger?:    boolean;
+    disabled?:  boolean;
+    separator?: never;
+    children?:  MenuEntry[];
+  }
+  export interface MenuSeparator { separator: true }
+  export type MenuEntry = MenuItem | MenuSeparator;
+
+  interface Props {
+    x:       number;
+    y:       number;
+    items:   MenuEntry[];
+    onClose: () => void;
+  }
+
+  let { x, y, items, onClose }: Props = $props();
+
+  let focused  = $state(-1);
+  let el       = $state<HTMLDivElement | undefined>(undefined);
+  let measured = $state(false);
+  let pos      = $state({ left: 0, top: 0 });
+  let subOpen  = $state(-1);
+  let subEls   = $state<(HTMLDivElement | null)[]>([]);
+
+  const actionable = $derived(
+    items
+      .map((_, i) => i)
+      .filter((i) => !("separator" in items[i]) && !(items[i] as MenuItem).disabled)
+  );
+
+  $effect(() => { if (actionable.length && focused === -1) focused = actionable[0]; });
+
+  function getZoom(): number {
+    const raw = parseFloat(document.documentElement.style.zoom || "1") || 1;
+    return raw > 10 ? raw / 100 : raw;
+  }
+
+  $effect(() => {
+    if (!el) return;
+    const zoom      = getZoom();
+    const style     = getComputedStyle(document.documentElement);
+    const sidebarW  = parseFloat(style.getPropertyValue('--sidebar-width'))  || 52;
+    const titlebarH = parseFloat(style.getPropertyValue('--titlebar-height')) || 36;
+    const vw    = window.innerWidth  / zoom;
+    const vh    = window.innerHeight / zoom;
+    const sx    = x / zoom - sidebarW  / zoom;
+    const sy    = y / zoom - titlebarH / zoom;
+    const menuW = el.offsetWidth;
+    const menuH = el.offsetHeight;
+    pos = {
+      left: Math.max(4, sx + menuW > vw ? sx - menuW : sx),
+      top:  Math.max(4, sy + menuH > vh ? sy - menuH : sy),
+    };
+    measured = true;
+  });
+
+  $effect(() => {
+    if (subOpen < 0) return;
+    const sub = subEls[subOpen];
+    if (!sub) return;
+    requestAnimationFrame(() => {
+      const zoom = getZoom();
+      const vw   = window.innerWidth / zoom;
+      const rect = sub.getBoundingClientRect();
+      if (rect.right / zoom > vw) sub.classList.add("sub-flip");
+      else sub.classList.remove("sub-flip");
+    });
+  });
+
+  function onMouseDown(e: MouseEvent) {
+    const inMain = el?.contains(e.target as Node);
+    const inSub  = subOpen >= 0 && subEls[subOpen]?.contains(e.target as Node);
+    if (!inMain && !inSub) onClose();
+  }
+
+  function onTouchStartOutside(e: TouchEvent) {
+    const inMain = el?.contains(e.target as Node);
+    const inSub  = subOpen >= 0 && subEls[subOpen]?.contains(e.target as Node);
+    if (!inMain && !inSub) onClose();
+  }
+
+  function onKey(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      if (subOpen >= 0) { subOpen = -1; } else { onClose(); }
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const cur = actionable.indexOf(focused);
+      focused = actionable[(cur + 1) % actionable.length] ?? actionable[0];
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const cur = actionable.indexOf(focused);
+      focused = actionable[(cur - 1 + actionable.length) % actionable.length] ?? actionable[0];
+      return;
+    }
+    if (e.key === "ArrowRight" && focused >= 0) {
+      const item = items[focused] as MenuItem;
+      if (item?.children?.length) { subOpen = focused; return; }
+    }
+    if (e.key === "ArrowLeft") { subOpen = -1; return; }
+    if (e.key === "Enter" && focused >= 0) {
+      e.preventDefault();
+      const item = items[focused] as MenuItem;
+      if (item?.children?.length) { subOpen = focused; return; }
+      if (item && !item.disabled) { item.onClick(); onClose(); }
+    }
+  }
+
+  $effect(() => {
+    document.addEventListener("mousedown",  onMouseDown,         true);
+    document.addEventListener("touchstart", onTouchStartOutside, true);
+    document.addEventListener("keydown",    onKey,               true);
+    return () => {
+      document.removeEventListener("mousedown",  onMouseDown,         true);
+      document.removeEventListener("touchstart", onTouchStartOutside, true);
+      document.removeEventListener("keydown",    onKey,               true);
+    };
+  });
+</script>
+
+<div bind:this={el} class="menu" role="menu" tabindex="-1"
+  style="left:{pos.left}px;top:{pos.top}px;visibility:{measured ? 'visible' : 'hidden'}"
+  oncontextmenu={(e) => e.preventDefault()}>
+  {#each items as item, i}
+    {#if "separator" in item}
+      <div class="sep"></div>
+    {:else}
+      {@const mi = item as MenuItem}
+      {@const hasSub = !!mi.children?.length}
+      <div class="item-wrap">
+        <button
+          class="item"
+          class:danger={mi.danger}
+          class:disabled={mi.disabled}
+          class:focused={focused === i}
+          class:has-sub={hasSub}
+          disabled={mi.disabled}
+          onclick={() => {
+            if (mi.disabled) return;
+            if (hasSub) { subOpen = subOpen === i ? -1 : i; return; }
+            mi.onClick(); onClose();
+          }}
+          onmouseenter={() => { if (!mi.disabled) { focused = i; subOpen = hasSub ? i : -1; } }}
+          onmouseleave={() => { focused = -1; }}
+        >
+          <span class="icon" class:icon-danger={mi.danger}>
+            {#if mi.icon}<mi.icon size={13} weight="light" />{/if}
+          </span>
+          <span class="label">{mi.label}</span>
+          {#if hasSub}<span class="sub-arrow">›</span>{/if}
+        </button>
+        {#if hasSub && subOpen === i}
+          <div bind:this={subEls[i]} class="menu submenu" role="menu" tabindex="-1"
+            onmouseenter={() => { subOpen = i; }}>
+            {#each mi.children as child}
+              {#if "separator" in child}
+                <div class="sep"></div>
+              {:else}
+                {@const sc = child as MenuItem}
+                <button
+                  class="item"
+                  class:danger={sc.danger}
+                  class:disabled={sc.disabled}
+                  disabled={sc.disabled}
+                  onclick={() => { if (!sc.disabled) { sc.onClick(); onClose(); } }}
+                >
+                  <span class="icon" class:icon-danger={sc.danger}>
+                    {#if sc.icon}<sc.icon size={13} weight="light" />{/if}
+                  </span>
+                  <span class="label">{sc.label}</span>
+                </button>
+              {/if}
+            {/each}
+          </div>
+        {/if}
+      </div>
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .menu {
+    position: fixed; z-index: 200;
+    background: var(--bg-raised); border: 1px solid var(--border-base);
+    border-radius: var(--radius-lg); padding: var(--sp-1); min-width: 190px;
+    box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.35), 0 16px 40px rgba(0,0,0,0.25);
+    animation: scaleIn 0.1s ease both; transform-origin: top left;
+  }
+  .item-wrap { position: relative; }
+  .submenu {
+    position: absolute;
+    left: 100%;
+    top: 0;
+    z-index: 201;
+    animation: scaleIn 0.08s ease both;
+    transform-origin: top left;
+  }
+  :global(.submenu.sub-flip) {
+    left: auto;
+    right: 100%;
+    transform-origin: top right;
+  }
+  .item {
+    display: flex; align-items: center; gap: var(--sp-2);
+    width: 100%; padding: 5px var(--sp-2); border-radius: var(--radius-md);
+    font-size: var(--text-sm); color: var(--text-secondary);
+    text-align: left; cursor: pointer; background: none; border: none; outline: none;
+    transition: background var(--t-fast), color var(--t-fast);
+    position: relative;
+  }
+  .item:hover:not(.disabled), .item.focused:not(.disabled) { background: var(--bg-overlay); color: var(--text-primary); }
+  .item.danger { color: var(--color-error); }
+  .item.danger:hover:not(.disabled), .item.danger.focused:not(.disabled) { background: var(--color-error-bg); }
+  .item.disabled { opacity: 0.3; cursor: default; pointer-events: none; }
+  .icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; color: var(--text-faint); border-radius: var(--radius-sm); }
+  .icon-danger { color: var(--color-error); opacity: 0.7; }
+  .label { flex: 1; line-height: 1.3; }
+  .sub-arrow { font-size: 14px; color: var(--text-faint); line-height: 1; margin-left: auto; padding-left: var(--sp-1); }
+  .sep { height: 1px; background: var(--border-dim); margin: 3px var(--sp-1); }
+
+  @keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
+</style>
@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { MagnifyingGlass, CircleNotch, CaretDown, CaretRight } from "phosphor-svelte";
+  import Thumbnail from "$lib/components/shared/manga/Thumbnail.svelte";
+  import { loadSources } from "$lib/request-manager/extensions";
+  import { extensionsState } from "$lib/state/extensions.svelte";
+
+  let lang     = $state("all");
+  let search   = $state("");
+  let expanded = $state(new Set<string>());
+
+  $effect(() => { loadSources() });
+
+  const langs    = $derived(["all", ...Array.from(new Set(extensionsState.sources.map((s) => s.lang))).sort()]);
+  const filtered = $derived(extensionsState.sources.filter((src) => {
+    if (src.id === "0") return false;
+    const matchLang   = lang === "all" || src.lang === lang;
+    const matchSearch = src.name.toLowerCase().includes(search.toLowerCase())
+                     || src.displayName.toLowerCase().includes(search.toLowerCase());
+    return matchLang && matchSearch;
+  }));
+
+  const groups = $derived.by(() => {
+    const map = new Map<string, { name: string; icon: string; sources: typeof extensionsState.sources }>();
+    for (const src of filtered) {
+      if (!map.has(src.name)) map.set(src.name, { name: src.name, icon: src.iconUrl, sources: [] });
+      map.get(src.name)!.sources.push(src);
+    }
+    return Array.from(map.values());
+  });
+
+  function toggleGroup(name: string) {
+    const next = new Set(expanded);
+    next.has(name) ? next.delete(name) : next.add(name);
+    expanded = next;
+  }
+</script>
+
+<div class="root">
+  <div class="header">
+    <h1 class="heading">Sources</h1>
+    <div class="search-wrap">
+      <MagnifyingGlass size={12} class="search-icon" weight="light" />
+      <input class="search" placeholder="Search" bind:value={search} />
+    </div>
+  </div>
+
+  <div class="content">
+    <div class="lang-row">
+      {#each langs as l}
+        <button class="lang-btn" class:active={lang === l} onclick={() => lang = l}>
+          {l === "all" ? "All" : l.toUpperCase()}
+        </button>
+      {/each}
+    </div>
+
+    {#if extensionsState.loading}
+      <div class="empty"><CircleNotch size={16} weight="light" class="anim-spin" style="color:var(--text-faint)" /></div>
+    {:else if groups.length === 0}
+      <div class="empty">No sources found.</div>
+    {:else}
+      <div class="list">
+        {#each groups as g}
+          {@const single = g.sources.length === 1}
+          {@const open   = expanded.has(g.name)}
+          <div>
+            <button class="row" onclick={() => single ? extensionsState.activeSource = g.sources[0] : toggleGroup(g.name)}>
+              <Thumbnail src={g.icon} alt={g.name} class="icon" onerror={(e) => ((e.target as HTMLImageElement).style.display = "none")} />
+              <div class="info">
+                <span class="name">{g.name}</span>
+                <span class="meta">{single ? `${g.sources[0].lang.toUpperCase()}${g.sources[0].isNsfw ? " · NSFW" : ""}` : `${g.sources.length} languages`}</span>
+              </div>
+              <span class="arrow">
+                {#if single}→{:else if open}<CaretDown size={12} weight="light" />{:else}<CaretRight size={12} weight="light" />{/if}
+              </span>
+            </button>
+            {#if !single && open}
+              {#each g.sources as src}
+                <button class="row row-indented" onclick={() => extensionsState.activeSource = src}>
+                  <div class="indent-spacer"></div>
+                  <div class="info"><span class="name">{src.lang.toUpperCase()}{src.isNsfw ? " · NSFW" : ""}</span></div>
+                  <span class="arrow">→</span>
+                </button>
+              {/each}
+            {/if}
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
+  .content { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-6) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); }
+  .header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
+  .heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
+  .search-wrap { position: relative; display: flex; align-items: center; }
+  .search-wrap :global(.search-icon) { position: absolute; left: 9px; color: var(--text-faint); pointer-events: none; }
+  .search { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 5px 10px 5px 26px; color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none; transition: border-color var(--t-base); }
+  .search::placeholder { color: var(--text-faint); }
+  .search:focus { border-color: var(--border-strong); }
+  .lang-row { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
+  .lang-btn { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wider); padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
+  .lang-btn:hover { color: var(--text-muted); border-color: var(--border-strong); }
+  .lang-btn.active { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
+  .list { display: flex; flex-direction: column; gap: 1px; }
+  .row { display: flex; align-items: center; gap: var(--sp-3); padding: 9px var(--sp-3); border-radius: var(--radius-md); border: 1px solid transparent; background: none; text-align: left; width: 100%; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
+  .row:hover { background: var(--bg-raised); border-color: var(--border-dim); }
+  .row-indented { padding-left: var(--sp-5); }
+  .indent-spacer { width: 32px; flex-shrink: 0; }
+  :global(.icon) { width: 32px; height: 32px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; background: var(--bg-raised); }
+  .info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
+  .name { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .meta { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .arrow { display: flex; align-items: center; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); flex-shrink: 0; opacity: 0; transition: opacity var(--t-base); }
+  .row:hover .arrow { opacity: 1; }
+  .empty { display: flex; align-items: center; justify-content: center; height: 160px; color: var(--text-faint); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); }
+
+  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
+</style>
@@ -0,0 +1,14 @@
+<script lang="ts">
+  let { onClose, ...rest }: { onClose?: () => void; [k: string]: any } = $props()
+</script>
+
+<div class="stub-panel">
+  <button class="stub-close" onclick={onClose}>✕</button>
+  <p class="stub-label">TrackingPanel</p>
+</div>
+
+<style>
+  .stub-panel  { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 32px; min-width: 240px; }
+  .stub-close  { align-self: flex-end; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: 16px; }
+  .stub-label  { color: var(--text-faint); font-size: var(--text-sm); }
+</style>
@@ -1,13 +1,25 @@
-import { appState } from '$lib/state/app.svelte'
+import { settingsState, updateSettings } from '$lib/state/settings.svelte'
 import type { Manga } from '$lib/types'

-export function autoLinkLibrary(focal: Manga, allManga: Manga[]): Promise<number> {
+function linkManga(focalId: number, targetId: number) {
+  const existing = settingsState.settings.mangaLinks?.[focalId] ?? []
+  if (existing.includes(targetId)) return
+  updateSettings({
+    mangaLinks: {
+      ...settingsState.settings.mangaLinks,
+      [focalId]: [...existing, targetId],
+    },
+  })
+}
+
+export function autoLinkLibrary(focal: Manga | null | undefined, allManga: Manga[]): Promise<number> {
+  if (!focal) return Promise.resolve(0)
  return new Promise(resolve => {
    const worker = new Worker(new URL('./autoLinkWorker.ts', import.meta.url), { type: 'module' })

    worker.onmessage = (e: MessageEvent<number[]>) => {
      const matches = e.data
-      for (const id of matches) appState.linkManga(focal.id, id)
+      for (const id of matches) linkManga(focal.id, id)
      worker.terminate()
      resolve(matches.length)
    }
@@ -18,7 +30,7 @@ export function autoLinkLibrary(focal: Manga, allManga: Manga[]): Promise<number
      focalTitle: focal.title,
      focalId:    focal.id,
      allManga:   allManga.map(m => ({ id: m.id, title: m.title })),
-      linkedIds:  appState.settings.mangaLinks?.[focal.id] ?? [],
+      linkedIds:  settingsState.settings.mangaLinks?.[focal.id] ?? [],
    })
  })
 }
@@ -1,4 +1,5 @@
-import { appState } from '$lib/state/app.svelte'
+import { settingsState } from '$lib/state/settings.svelte'
+import { seriesState }   from '$lib/state/series.svelte'
 import { searchWithScore } from '$lib/core/algorithms/search'
 import { getHash, areDuplicates } from '$lib/core/cover/coverHash'

@@ -24,7 +25,7 @@ function normalizeUrl(url: string): string {
 }

 export function resolvedCover(mangaId: number, ownUrl: string): string {
-  return appState.settings.mangaPrefs?.[mangaId]?.coverUrl ?? ownUrl
+  return settingsState.settings.mangaPrefs?.[mangaId]?.coverUrl ?? ownUrl
 }

 function fuzzyMatchIds(
@@ -47,9 +48,9 @@ export function coverCandidatesSync(
  ownUrl: string,
  mangaById: Map<number, CoverManga & { title: string }>,
 ): CoverCandidate[] {
-  const linkedIds = appState.getLinkedMangaIds(mangaId)
+  const linkedIds = seriesState.settings.mangaLinks?.[mangaId] ?? []
  const fuzzyIds  = fuzzyMatchIds(mangaId, title, mangaById)
-  const current   = appState.settings.mangaPrefs?.[mangaId]?.coverUrl ?? ownUrl
+  const current   = settingsState.settings.mangaPrefs?.[mangaId]?.coverUrl ?? ownUrl
  const allIds    = Array.from(new Set([...linkedIds, ...fuzzyIds]))

  const raw: { mangaId: number; url: string; label: string }[] = [
@@ -1,15 +1,20 @@
-import { invoke } from '@tauri-apps/api/core'
+import { invoke }           from '@tauri-apps/api/core'
 import { getCurrentWindow } from '@tauri-apps/api/window'
-import { open } from '@tauri-apps/plugin-dialog'
+import { listen }           from '@tauri-apps/api/event'
+import { open }             from '@tauri-apps/plugin-dialog'
 import { readFile, writeFile } from '@tauri-apps/plugin-fs'
-import { open as openUrl } from '@tauri-apps/plugin-shell'
-import { getVersion } from '@tauri-apps/api/app'
+import { open as openUrl }  from '@tauri-apps/plugin-shell'
+import { getVersion }       from '@tauri-apps/api/app'
 import type {
  PlatformAdapter,
  PlatformFeature,
  ServerLaunchConfig,
  DiscordPresence,
  AppUpdateInfo,
+  StorageInfo,
+  ReleaseInfo,
+  UpdateProgress,
+  MigrateProgress,
 } from '$lib/platform-adapters/types'

 export class TauriAdapter implements PlatformAdapter {
@@ -106,8 +111,8 @@ export class TauriAdapter implements PlatformAdapter {

  async checkForAppUpdate(): Promise<AppUpdateInfo | null> {
    const releases = await invoke<Array<{ tag_name: string; html_url: string; body: string }>>('list_releases')
-    const current = await getVersion()
-    const valid = releases.filter(r => r.tag_name?.trim())
+    const current  = await getVersion()
+    const valid    = releases.filter(r => r.tag_name?.trim())
    if (!valid.length) return null
    const parse = (v: string) => v.replace(/^v/, '').split('.').map(Number)
    const latest = valid.map(r => r.tag_name).sort((a, b) => {
@@ -124,4 +129,69 @@ export class TauriAdapter implements PlatformAdapter {
  async installAppUpdate(tag: string) {
    await invoke('download_and_install_update', { tag })
  }
+
+  async restartApp() {
+    await invoke('restart_app')
+  }
+
+  async getDefaultDownloadsPath(): Promise<string> {
+    return invoke('get_default_downloads_path')
+  }
+
+  async getStorageInfo(downloadsPath: string): Promise<StorageInfo> {
+    return invoke('get_storage_info', { downloadsPath })
+  }
+
+  async checkPathExists(path: string): Promise<boolean> {
+    return invoke('check_path_exists', { path })
+  }
+
+  async createDirectory(path: string) {
+    await invoke('create_directory', { path })
+  }
+
+  async openPath(path: string) {
+    await invoke('open_path', { path })
+  }
+
+  async getAutoBackupDir(): Promise<string> {
+    return invoke('get_auto_backup_dir')
+  }
+
+  async clearMokuCache() {
+    await invoke('clear_moku_cache')
+  }
+
+  async clearSuwayomiCache() {
+    await invoke('clear_suwayomi_cache')
+  }
+
+  async resetSuwayomiData() {
+    await invoke('reset_suwayomi_data')
+  }
+
+  async exitApp() {
+    await invoke('exit_app')
+  }
+
+  async listReleases(): Promise<ReleaseInfo[]> {
+    const all = await invoke<ReleaseInfo[]>('list_releases')
+    return all.filter(r => typeof r.tag_name === 'string' && r.tag_name.trim())
+  }
+
+  async onUpdateProgress(cb: (p: UpdateProgress) => void): Promise<() => void> {
+    return listen<UpdateProgress>('update-progress', e => cb(e.payload))
+  }
+
+  async onUpdateLaunching(cb: () => void): Promise<() => void> {
+    return listen('update-launching', cb)
+  }
+
+  async onMigrateProgress(cb: (p: MigrateProgress) => void): Promise<() => void> {
+    return listen<MigrateProgress>('migrate_progress', e => cb(e.payload))
+  }
+
+  async migrateDownloads(src: string, dst: string) {
+    await invoke('migrate_downloads', { src, dst })
+  }
 }
@@ -1,40 +1,39 @@
-import { invoke } from "@tauri-apps/api/core";
-import { getVersion } from "@tauri-apps/api/app";
-import { toast } from "$lib/state/app.svelte";
+import { invoke }     from '@tauri-apps/api/core'
+import { getVersion } from '@tauri-apps/api/app'
+import { toast }      from '$lib/state/notifications.svelte'

 function parse(tag: string): number[] {
-  return tag.replace(/^v/, "").split(".").map(Number);
+  return tag.replace(/^v/, '').split('.').map(Number)
 }

 function compare(a: number[], b: number[]): number {
  for (let i = 0; i < 3; i++) {
-    if ((a[i] ?? 0) !== (b[i] ?? 0)) return (b[i] ?? 0) - (a[i] ?? 0);
+    if ((a[i] ?? 0) !== (b[i] ?? 0)) return (b[i] ?? 0) - (a[i] ?? 0)
  }
-  return 0;
+  return 0
 }

 export async function checkForUpdateSilently(): Promise<void> {
  try {
    const [currentVersion, releases] = await Promise.all([
      getVersion(),
-      invoke<Array<{ tag_name: string; html_url: string }>>("list_releases"),
-    ]);
+      invoke<Array<{ tag_name: string; html_url: string }>>('list_releases'),
+    ])

-    const valid = releases.filter(r => typeof r.tag_name === "string" && r.tag_name.trim());
-    if (!valid.length) return;
+    const valid = releases.filter(r => typeof r.tag_name === 'string' && r.tag_name.trim())
+    if (!valid.length) return

    const latestTag = valid
      .map(r => r.tag_name)
      .sort((a, b) => compare(parse(a), parse(b)))[0]
-      .replace(/^v/, "");
+      .replace(/^v/, '')

    if (compare(parse(latestTag), parse(currentVersion)) < 0) {
      toast({
-        kind:     "info",
-        title:    `Update available — v${latestTag}`,
-        body:     "Open Settings → About to install.",
-        duration: 8000,
-      });
+        kind:    'info',
+        message: `Update available — v${latestTag}`,
+        detail:  'Open Settings → About to install.',
+      })
    }
  } catch {}
 }
@@ -7,21 +7,38 @@ export type PlatformFeature =
  | 'discord-rpc'

 export interface ServerLaunchConfig {
-  jarPath:  string
-  port:     number
-  dataPath: string
+  port?: number
+  [key: string]: unknown
 }

 export interface DiscordPresence {
-  title:           string
-  chapter:         string
-  startTimestamp?: number
+  state?: string
+  details?: string
+  [key: string]: unknown
 }

 export interface AppUpdateInfo {
  version: string
-  url:     string
-  notes?:  string
+  url: string
+  notes: string
+}
+
+export interface StorageInfo {
+  manga_bytes: number
+  total_bytes: number
+  free_bytes:  number
+  path:        string
+}
+
+export interface MigrateProgress {
+  done:    number
+  total:   number
+  current: string
+}
+
+export interface UpdateProgress {
+  downloaded: number
+  total:      number | null
 }

 export interface PlatformAdapter {
@@ -52,5 +69,32 @@ export interface PlatformAdapter {
  getVersion(): Promise<string>
  openExternal(url: string): Promise<void>
  checkForAppUpdate(): Promise<AppUpdateInfo | null>
-  installAppUpdate(): Promise<void>
+  installAppUpdate(tag: string): Promise<void>
+  restartApp(): Promise<void>
+
+  getDefaultDownloadsPath(): Promise<string>
+  getStorageInfo(downloadsPath: string): Promise<StorageInfo>
+  checkPathExists(path: string): Promise<boolean>
+  createDirectory(path: string): Promise<void>
+  openPath(path: string): Promise<void>
+  getAutoBackupDir(): Promise<string>
+
+  clearMokuCache(): Promise<void>
+  clearSuwayomiCache(): Promise<void>
+  resetSuwayomiData(): Promise<void>
+  exitApp(): Promise<void>
+
+  onUpdateProgress(cb: (p: UpdateProgress) => void): Promise<() => void>
+  onUpdateLaunching(cb: () => void): Promise<() => void>
+  listReleases(): Promise<ReleaseInfo[]>
+  onMigrateProgress(cb: (p: MigrateProgress) => void): Promise<() => void>
+  migrateDownloads(src: string, dst: string): Promise<void>
+}
+
+export interface ReleaseInfo {
+  tag_name:     string
+  name:         string
+  body:         string
+  published_at: string
+  html_url:     string
 }
@@ -4,6 +4,10 @@ import type {
  ServerLaunchConfig,
  DiscordPresence,
  AppUpdateInfo,
+  StorageInfo,
+  ReleaseInfo,
+  UpdateProgress,
+  MigrateProgress,
 } from '$lib/platform-adapters/types'

 export class WebAdapter implements PlatformAdapter {
@@ -48,5 +52,27 @@ export class WebAdapter implements PlatformAdapter {
  }

  async checkForAppUpdate(): Promise<AppUpdateInfo | null> { return null }
-  async installAppUpdate() {}
+  async installAppUpdate(_tag: string) {}
+  async restartApp() {}
+
+  async getDefaultDownloadsPath(): Promise<string> { return '' }
+  async getStorageInfo(_downloadsPath: string): Promise<StorageInfo> {
+    return { manga_bytes: 0, total_bytes: 0, free_bytes: 0, path: '' }
+  }
+  async checkPathExists(_path: string): Promise<boolean> { return false }
+  async createDirectory(_path: string) {}
+  async openPath(_path: string) {}
+  async getAutoBackupDir(): Promise<string> { return '' }
+
+  async clearMokuCache() {}
+  async clearSuwayomiCache() {}
+  async resetSuwayomiData() {}
+  async exitApp() {}
+
+  async listReleases(): Promise<ReleaseInfo[]> { return [] }
+
+  async onUpdateProgress(_cb: (p: UpdateProgress) => void): Promise<() => void> { return () => {} }
+  async onUpdateLaunching(_cb: () => void): Promise<() => void> { return () => {} }
+  async onMigrateProgress(_cb: (p: MigrateProgress) => void): Promise<() => void> { return () => {} }
+  async migrateDownloads(_src: string, _dst: string) {}
 }
@@ -1,5 +1,14 @@
-import type { PlatformAdapter } from '$lib/platform-adapters/types'
-import type { ServerLaunchConfig, DiscordPresence, AppUpdateInfo, PlatformFeature } from '$lib/platform-adapters/types'
+import type {
+  PlatformAdapter,
+  PlatformFeature,
+  ServerLaunchConfig,
+  DiscordPresence,
+  AppUpdateInfo,
+  StorageInfo,
+  ReleaseInfo,
+  UpdateProgress,
+  MigrateProgress,
+} from '$lib/platform-adapters/types'

 let adapter: PlatformAdapter

@@ -13,32 +22,52 @@ function get(): PlatformAdapter {
 }

 export const platformService = {
-  isSupported: (f: PlatformFeature)              => get().isSupported(f),
-  init:        ()                                => get().init(),
+  isSupported: (f: PlatformFeature)                          => get().isSupported(f),
+  init:        ()                                            => get().init(),

-  launchServer:    (c: ServerLaunchConfig)       => get().launchServer(c),
-  stopServer:      ()                            => get().stopServer(),
-  getServerStatus: ()                            => get().getServerStatus(),
+  launchServer:    (c: ServerLaunchConfig)                   => get().launchServer(c),
+  stopServer:      ()                                        => get().stopServer(),
+  getServerStatus: ()                                        => get().getServerStatus(),

-  readFile:    (path: string)                    => get().readFile(path),
-  writeFile:   (path: string, data: Uint8Array)  => get().writeFile(path, data),
-  pickFolder:  ()                                => get().pickFolder(),
+  readFile:    (path: string)                                => get().readFile(path),
+  writeFile:   (path: string, data: Uint8Array)              => get().writeFile(path, data),
+  pickFolder:  ()                                            => get().pickFolder(),

-  authenticateBiometric: ()                      => get().authenticateBiometric(),
-  storeCredential: (k: string, v: string)        => get().storeCredential(k, v),
-  getCredential:   (k: string)                   => get().getCredential(k),
+  authenticateBiometric: ()                                  => get().authenticateBiometric(),
+  storeCredential: (k: string, v: string)                    => get().storeCredential(k, v),
+  getCredential:   (k: string)                               => get().getCredential(k),

-  setTitle:         (title: string)              => get().setTitle(title),
-  minimize:         ()                           => get().minimize(),
-  maximize:         ()                           => get().maximize(),
-  close:            ()                           => get().close(),
-  toggleFullscreen: ()                           => get().toggleFullscreen(),
+  setTitle:         (title: string)                          => get().setTitle(title),
+  minimize:         ()                                       => get().minimize(),
+  maximize:         ()                                       => get().maximize(),
+  close:            ()                                       => get().close(),
+  toggleFullscreen: ()                                       => get().toggleFullscreen(),

-  setDiscordPresence:   (p: DiscordPresence)     => get().setDiscordPresence(p),
-  clearDiscordPresence: ()                       => get().clearDiscordPresence(),
+  setDiscordPresence:   (p: DiscordPresence)                 => get().setDiscordPresence(p),
+  clearDiscordPresence: ()                                   => get().clearDiscordPresence(),

-  getVersion:       ()                           => get().getVersion(),
-  openExternal:     (url: string)                => get().openExternal(url),
-  checkForAppUpdate: ()                          => get().checkForAppUpdate(),
-  installAppUpdate:  ()                          => get().installAppUpdate(),
+  getVersion:        ()                                      => get().getVersion(),
+  openExternal:      (url: string)                           => get().openExternal(url),
+  checkForAppUpdate: ()                                      => get().checkForAppUpdate(),
+  installAppUpdate:  (tag: string)                           => get().installAppUpdate(tag),
+  restartApp:        ()                                      => get().restartApp(),
+
+  getDefaultDownloadsPath: ()                                => get().getDefaultDownloadsPath(),
+  getStorageInfo:    (downloadsPath: string)                 => get().getStorageInfo(downloadsPath),
+  checkPathExists:   (path: string)                          => get().checkPathExists(path),
+  createDirectory:   (path: string)                          => get().createDirectory(path),
+  openPath:          (path: string)                          => get().openPath(path),
+  getAutoBackupDir:  ()                                      => get().getAutoBackupDir(),
+
+  clearMokuCache:    ()                                      => get().clearMokuCache(),
+  clearSuwayomiCache: ()                                     => get().clearSuwayomiCache(),
+  resetSuwayomiData:  ()                                     => get().resetSuwayomiData(),
+  exitApp:            ()                                     => get().exitApp(),
+
+  listReleases:       ()                                      => get().listReleases(),
+
+  onUpdateProgress:  (cb: (p: UpdateProgress) => void)       => get().onUpdateProgress(cb),
+  onUpdateLaunching: (cb: () => void)                        => get().onUpdateLaunching(cb),
+  onMigrateProgress: (cb: (p: MigrateProgress) => void)      => get().onMigrateProgress(cb),
+  migrateDownloads:  (src: string, dst: string)              => get().migrateDownloads(src, dst),
 }
@@ -1,57 +1,67 @@
-import { getAdapter } from '$lib/request-manager'
-import { seriesState } from '$lib/state/series.svelte'
-import { readerState } from '$lib/state/reader.svelte'
+import { getAdapter }  from "$lib/request-manager";
+import { seriesState } from "$lib/state/series.svelte";
+import { readerState } from "$lib/state/reader.svelte";
+import type { Chapter } from "$lib/types";

-export async function loadChapters(mangaId: string) {
-  seriesState.chaptersLoading = true
-  seriesState.chaptersError   = null
-  try {
-    seriesState.chapters = await getAdapter().getChapters(mangaId)
-  } catch (e) {
-    seriesState.chaptersError = String(e)
-  } finally {
-    seriesState.chaptersLoading = false
-  }
+export async function getChapters(mangaId: number, signal?: AbortSignal): Promise<Chapter[]> {
+  return getAdapter().getChapters(String(mangaId), signal);
 }

-export async function fetchChapters(mangaId: string) {
-  seriesState.chaptersLoading = true
-  seriesState.chaptersError   = null
+export async function fetchChapters(mangaId: number, signal?: AbortSignal): Promise<Chapter[]> {
+  return getAdapter().fetchChapters(String(mangaId), signal);
+}
+
+export async function loadChapters(mangaId: string) {
+  seriesState.chaptersLoading = true;
+  seriesState.chaptersError   = null;
  try {
-    seriesState.chapters = await getAdapter().fetchChapters(mangaId)
+    seriesState.chapters = await getAdapter().getChapters(mangaId);
  } catch (e) {
-    seriesState.chaptersError = String(e)
+    seriesState.chaptersError = String(e);
  } finally {
-    seriesState.chaptersLoading = false
+    seriesState.chaptersLoading = false;
  }
 }

 export async function loadChapterPages(chapterId: string, signal?: AbortSignal) {
-  readerState.pagesLoading = true
-  readerState.pagesError   = null
+  readerState.pagesLoading = true;
+  readerState.pagesError   = null;
  try {
-    readerState.pages = await getAdapter().getChapterPages(chapterId, signal)
+    readerState.pages = await getAdapter().getChapterPages(chapterId, signal);
  } catch (e) {
-    if (e instanceof DOMException && e.name === 'AbortError') return
-    readerState.pagesError = String(e)
+    if (e instanceof DOMException && e.name === "AbortError") return;
+    readerState.pagesError = String(e);
  } finally {
-    readerState.pagesLoading = false
+    readerState.pagesLoading = false;
+  }
+}
+
+export async function markChapterRead(id: number, read: boolean) {
+  await getAdapter().markChapterRead(String(id), read);
+  const chapter = seriesState.chapters.find(c => c.id === id);
+  if (chapter) chapter.read = read;
+}
+
+export async function markChaptersRead(ids: number[], read: boolean) {
+  await getAdapter().markChaptersRead(ids.map(String), read);
+  const idSet = new Set(ids);
+  for (const c of seriesState.chapters) {
+    if (idSet.has(c.id)) c.read = read;
  }
 }

 export async function markRead(id: string, read: boolean) {
-  await getAdapter().markChapterRead(id, read)
-  // chapter.id is a number; route params arrive as strings — compare via Number()
-  const numId = Number(id)
-  const chapter = seriesState.chapters.find(c => c.id === numId)
-  if (chapter) chapter.read = read
+  await getAdapter().markChapterRead(id, read);
+  const numId   = Number(id);
+  const chapter = seriesState.chapters.find(c => c.id === numId);
+  if (chapter) chapter.read = read;
 }

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

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

-export async function deleteDownloadedChapters(ids: string[]) {
-  await getAdapter().deleteDownloadedChapters(ids)
-  const numIds = new Set(ids.map(Number))
+export async function deleteDownloadedChapters(ids: number[]) {
+  await getAdapter().deleteDownloadedChapters(ids.map(String));
+  const idSet = new Set(ids);
  for (const c of seriesState.chapters) {
-    if (numIds.has(c.id)) c.downloaded = false
+    if (idSet.has(c.id)) c.downloaded = false;
  }
 }
@@ -1,44 +1,44 @@
-import { getAdapter } from '$lib/request-manager'
-import { downloadsState } from '$lib/state/downloads.svelte'
+import { getAdapter }     from "$lib/request-manager";
+import { downloadsState } from "$lib/state/downloads.svelte";

 export async function loadDownloads() {
  try {
-    downloadsState.items = await getAdapter().getDownloads()
+    downloadsState.items = await getAdapter().getDownloads();
  } catch (e) {
-    downloadsState.error = String(e)
+    downloadsState.error = String(e);
  }
 }

 export async function enqueueDownload(chapterId: string) {
-  await getAdapter().enqueueDownload(chapterId)
-  await loadDownloads()
+  await getAdapter().enqueueDownload(chapterId);
+  await loadDownloads();
 }

 export async function enqueueDownloads(chapterIds: string[]) {
-  await getAdapter().enqueueDownloads(chapterIds)
-  await loadDownloads()
+  await getAdapter().enqueueDownloads(chapterIds);
+  await loadDownloads();
 }

 export async function dequeueDownload(chapterId: string) {
-  await getAdapter().dequeueDownload(chapterId)
-  downloadsState.items = downloadsState.items.filter(d => d.chapterId !== chapterId)
+  await getAdapter().dequeueDownload(chapterId);
+  downloadsState.items = downloadsState.items.filter(d => d.chapterId !== chapterId);
 }

 export async function dequeueDownloads(chapterIds: string[]) {
-  const ids = new Set(chapterIds)
-  await getAdapter().dequeueDownloads(chapterIds)
-  downloadsState.items = downloadsState.items.filter(d => !ids.has(d.chapterId))
+  const ids = new Set(chapterIds);
+  await getAdapter().dequeueDownloads(chapterIds);
+  downloadsState.items = downloadsState.items.filter(d => !ids.has(d.chapterId));
 }

 export async function clearDownloads() {
-  await getAdapter().clearDownloads()
-  downloadsState.items = []
+  await getAdapter().clearDownloads();
+  downloadsState.items = [];
 }

 export async function startDownloader() {
-  await getAdapter().startDownloader()
+  await getAdapter().startDownloader();
 }

 export async function stopDownloader() {
-  await getAdapter().stopDownloader()
+  await getAdapter().stopDownloader();
 }
@@ -1,80 +1,80 @@
-import { getAdapter } from '$lib/request-manager'
-import { extensionsState } from '$lib/state/extensions.svelte'
-import type { SetServerAuthInput, SetSocksProxyInput, SetFlareSolverrInput } from '$lib/server-adapters/types'
+import { getAdapter }       from "$lib/request-manager";
+import { extensionsState }  from "$lib/state/extensions.svelte";
+import type { SetServerAuthInput, SetSocksProxyInput, SetFlareSolverrInput } from "$lib/server-adapters/types";

 export async function loadExtensions() {
-  extensionsState.loading = true
-  extensionsState.error   = null
+  extensionsState.loading = true;
+  extensionsState.error   = null;
  try {
-    extensionsState.items = await getAdapter().getExtensions()
+    extensionsState.items = await getAdapter().getExtensions();
  } catch (e) {
-    extensionsState.error = String(e)
+    extensionsState.error = String(e);
  } finally {
-    extensionsState.loading = false
+    extensionsState.loading = false;
  }
 }

 export async function loadSources() {
  try {
-    extensionsState.sources = await getAdapter().getSources()
+    extensionsState.sources = await getAdapter().getSources();
  } catch (e) {
-    extensionsState.error = String(e)
+    extensionsState.error = String(e);
  }
 }

 export async function installExtension(id: string) {
-  await getAdapter().installExtension(id)
-  await loadExtensions()
+  await getAdapter().installExtension(id);
+  await loadExtensions();
 }

 export async function installExternalExtension(url: string) {
-  await getAdapter().installExternalExtension(url)
-  await loadExtensions()
+  await getAdapter().installExternalExtension(url);
+  await loadExtensions();
 }

 export async function uninstallExtension(id: string) {
-  await getAdapter().uninstallExtension(id)
-  extensionsState.items = extensionsState.items.filter(e => e.id !== id)
+  await getAdapter().uninstallExtension(id);
+  extensionsState.items = extensionsState.items.filter(e => e.id !== id);
 }

 export async function updateExtension(id: string) {
-  await getAdapter().updateExtension(id)
-  await loadExtensions()
+  await getAdapter().updateExtension(id);
+  await loadExtensions();
 }

 export async function updateAllExtensions() {
-  const updatable = extensionsState.items.filter(e => e.hasUpdate).map(e => e.id)
-  if (!updatable.length) return
-  await getAdapter().updateExtensions(updatable)
-  await loadExtensions()
+  const updatable = extensionsState.items.filter(e => e.hasUpdate).map(e => e.id);
+  if (!updatable.length) return;
+  await getAdapter().updateExtensions(updatable);
+  await loadExtensions();
 }

 export async function browseSource(sourceId: string, page: number) {
-  extensionsState.browseLoading = true
-  extensionsState.browseError   = null
+  extensionsState.browseLoading = true;
+  extensionsState.browseError   = null;
  try {
-    const result = await getAdapter().browseSource(sourceId, page)
-    extensionsState.browseResults = result.items
-    extensionsState.browseHasMore = result.hasNextPage
+    const result = await getAdapter().browseSource(sourceId, page);
+    extensionsState.browseResults = result.items;
+    extensionsState.browseHasMore = result.hasNextPage;
  } catch (e) {
-    extensionsState.browseError = String(e)
+    extensionsState.browseError = String(e);
  } finally {
-    extensionsState.browseLoading = false
+    extensionsState.browseLoading = false;
  }
 }

 export async function getServerSecurity() {
-  return getAdapter().getServerSecurity()
+  return getAdapter().getServerSecurity();
 }

 export async function setServerAuth(input: SetServerAuthInput) {
-  await getAdapter().setServerAuth(input)
+  await getAdapter().setServerAuth(input);
 }

 export async function setSocksProxy(input: SetSocksProxyInput) {
-  await getAdapter().setSocksProxy(input)
+  await getAdapter().setSocksProxy(input);
 }

 export async function setFlareSolverr(input: SetFlareSolverrInput) {
-  await getAdapter().setFlareSolverr(input)
+  await getAdapter().setFlareSolverr(input);
 }
@@ -1,23 +1,23 @@
-import type { ServerAdapter } from '$lib/server-adapters/types'
-import * as extensions from './extensions'
-import * as chapters   from './chapters'
-import * as downloads  from './downloads'
-import * as manga      from './manga'
-import * as tracking   from './tracking'
+import type { ServerAdapter } from "$lib/server-adapters/types";
+import * as extensions from "./extensions";
+import * as chapters   from "./chapters";
+import * as downloads  from "./downloads";
+import * as manga      from "./manga";
+import * as tracking   from "./tracking";

-let adapter: ServerAdapter
+let adapter: ServerAdapter;

 export function initRequestManager(a: ServerAdapter) {
-  adapter = a
+  adapter = a;
 }

 export function getAdapter(): ServerAdapter {
-  if (!adapter) throw new Error('RequestManager not initialized')
-  return adapter
+  if (!adapter) throw new Error("RequestManager not initialized");
+  return adapter;
 }

 export function clearPageCache(chapterId?: number): void {
-  getAdapter().clearPageCache(chapterId)
+  getAdapter().clearPageCache(chapterId);
 }

 export const requestManager = {
@@ -26,4 +26,4 @@ export const requestManager = {
  downloads,
  manga,
  tracking,
-}
+};
@@ -1,131 +1,153 @@
-import { getAdapter } from '$lib/request-manager'
-import { libraryState } from '$lib/state/library.svelte'
-import { toast } from '$lib/state/notifications.svelte'
-import { seriesState } from '$lib/state/series.svelte'
-import type { MangaFilters, MangaMeta } from '$lib/server-adapters/types'
+import { getAdapter }   from "$lib/request-manager";
+import { libraryState } from "$lib/state/library.svelte";
+import { addToast }     from "$lib/state/notifications.svelte";
+import { seriesState }  from "$lib/state/series.svelte";
+import type { MangaFilters, MangaMeta } from "$lib/server-adapters/types";
+import type { Manga, Chapter, Category } from "$lib/types";

 export async function loadLibrary(filters: MangaFilters = { inLibrary: true }) {
-  libraryState.loading = true
-  libraryState.error   = null
+  libraryState.loading = true;
+  libraryState.error   = null;
  try {
-    const result = await getAdapter().getMangaList(filters)
-    libraryState.items = result.items
+    const result       = await getAdapter().getMangaList(filters);
+    libraryState.items = result.items;
  } catch (e) {
-    libraryState.error = String(e)
+    libraryState.error = String(e);
  } finally {
-    libraryState.loading = false
+    libraryState.loading = false;
  }
 }

+export async function getManga(id: number, signal?: AbortSignal): Promise<Manga> {
+  return getAdapter().getManga(String(id), signal);
+}
+
+export async function getMangaList(): Promise<Manga[]> {
+  const result = await getAdapter().getMangaList({});
+  return result.items;
+}
+
+export async function getCategories(): Promise<Category[]> {
+  return getAdapter().getCategories();
+}
+
+export async function updateManga(id: number, patch: { inLibrary?: boolean }): Promise<void> {
+  if (patch.inLibrary === true)  await getAdapter().addToLibrary(String(id));
+  if (patch.inLibrary === false) await getAdapter().removeFromLibrary(String(id));
+}
+
 export async function loadManga(id: string) {
-  seriesState.loading = true
-  seriesState.error   = null
+  seriesState.loading = true;
+  seriesState.error   = null;
  try {
-    seriesState.current = await getAdapter().getManga(id)
+    seriesState.current = await getAdapter().getManga(id);
  } catch (e) {
-    seriesState.error = String(e)
+    seriesState.error = String(e);
  } finally {
-    seriesState.loading = false
+    seriesState.loading = false;
  }
 }

 export async function fetchManga(id: string) {
-  seriesState.loading = true
-  seriesState.error   = null
+  seriesState.loading = true;
+  seriesState.error   = null;
  try {
-    seriesState.current = await getAdapter().fetchManga(id)
+    seriesState.current = await getAdapter().fetchManga(id);
  } catch (e) {
-    seriesState.error = String(e)
+    seriesState.error = String(e);
  } finally {
-    seriesState.loading = false
+    seriesState.loading = false;
  }
 }

 export async function searchManga(query: string, sourceId?: string) {
-  libraryState.loading = true
-  libraryState.error   = null
+  libraryState.loading = true;
+  libraryState.error   = null;
  try {
-    libraryState.searchResults = await getAdapter().searchManga(query, sourceId)
+    (libraryState as any).searchResults = await getAdapter().searchManga(query, sourceId);
  } catch (e) {
-    libraryState.error = String(e)
+    libraryState.error = String(e);
  } finally {
-    libraryState.loading = false
+    libraryState.loading = false;
  }
 }

 export async function addToLibrary(mangaId: string) {
-  await getAdapter().addToLibrary(mangaId)
-  await loadLibrary()
+  await getAdapter().addToLibrary(mangaId);
+  await loadLibrary();
 }

 export async function removeFromLibrary(mangaId: string) {
-  await getAdapter().removeFromLibrary(mangaId)
-  libraryState.items = libraryState.items.filter(m => String(m.id) !== mangaId)
+  await getAdapter().removeFromLibrary(mangaId);
+  libraryState.items = libraryState.items.filter(m => String(m.id) !== mangaId);
 }

 export async function updateMangaMeta(id: string, meta: Partial<MangaMeta>) {
-  await getAdapter().updateMangaMeta(id, meta)
-  if (String(seriesState.current?.id) === id) await loadManga(id)
+  await getAdapter().updateMangaMeta(id, meta);
+  if (String(seriesState.current?.id) === id) await loadManga(id);
 }

 export async function deleteMangaMeta(id: string, key: string) {
-  await getAdapter().deleteMangaMeta(id, key)
-  if (String(seriesState.current?.id) === id) await loadManga(id)
+  await getAdapter().deleteMangaMeta(id, key);
+  if (String(seriesState.current?.id) === id) await loadManga(id);
 }

 export async function refreshLibrary() {
-  libraryState.refreshing = true
+  libraryState.refreshing = true;
  try {
-    await getAdapter().checkForUpdates()
-    await loadLibrary()
-    toast({ kind: 'success', message: 'Library updated' })
+    await getAdapter().checkForUpdates();
+    await loadLibrary();
+    addToast({ kind: "success", title: "Library updated" });
  } catch (e) {
-    toast({ kind: 'error', message: 'Update failed', detail: String(e) })
+    addToast({ kind: "error", title: "Update failed", body: String(e) });
  } finally {
-    libraryState.refreshing = false
+    libraryState.refreshing = false;
  }
 }

 export async function stopLibraryUpdate() {
-  await getAdapter().stopLibraryUpdate()
+  await getAdapter().stopLibraryUpdate();
 }

 export async function pollLibraryUpdateStatus() {
-  return getAdapter().getLibraryUpdateStatus()
+  return getAdapter().getLibraryUpdateStatus();
 }

 export async function bulkRemoveFromLibrary(ids: Set<number>) {
-  await Promise.allSettled([...ids].map(id => getAdapter().removeFromLibrary(String(id))))
-  libraryState.items = libraryState.items.filter(m => !ids.has(m.id))
-  libraryState.exitSelect()
+  await Promise.allSettled([...ids].map(id => getAdapter().removeFromLibrary(String(id))));
+  libraryState.items = libraryState.items.filter(m => !ids.has(m.id));
+  libraryState.exitSelect();
 }

 export async function loadCategories() {
  try {
-    libraryState.categories = await getAdapter().getCategories()
+    const cats = await getAdapter().getCategories();
+    libraryState.setCategories(cats);
  } catch (e) {
-    libraryState.error = String(e)
+    libraryState.error = String(e);
  }
 }

-export async function createCategory(name: string) {
-  const category = await getAdapter().createCategory(name)
-  libraryState.categories = [...libraryState.categories, category]
+export async function createCategory(name: string): Promise<Category> {
+  const category = await getAdapter().createCategory(name);
+  libraryState.setCategories([...libraryState.categories, category]);
+  return category;
 }

 export async function deleteCategory(id: number) {
-  await getAdapter().deleteCategory(id)
-  libraryState.categories = libraryState.categories.filter(c => c.id !== id)
+  await getAdapter().deleteCategory(id);
+  libraryState.setCategories(libraryState.categories.filter(c => c.id !== id));
 }

 export async function updateCategoryOrder(id: number, position: number) {
-  libraryState.categories = await getAdapter().updateCategoryOrder(id, position)
+  const cats = await getAdapter().updateCategoryOrder(id, position);
+  libraryState.setCategories(cats);
 }

 export async function updateMangaCategories(mangaId: string, addTo: number[], removeFrom: number[]) {
-  await getAdapter().updateMangaCategories(mangaId, addTo, removeFrom)
+  await getAdapter().updateMangaCategories(mangaId, addTo, removeFrom);
 }

 export async function updateMangasCategories(mangaIds: string[], addTo: number[], removeFrom: number[]) {
-  await getAdapter().updateMangasCategories(mangaIds, addTo, removeFrom)
+  await getAdapter().updateMangasCategories(mangaIds, addTo, removeFrom);
 }
@@ -1,57 +1,57 @@
-import { getAdapter } from '$lib/request-manager'
-import { trackingState } from '$lib/state/tracking.svelte'
+import { getAdapter }    from "$lib/request-manager";
+import { trackingState } from "$lib/state/tracking.svelte";

 export async function loadTrackers() {
-  trackingState.loading = true
-  trackingState.error   = null
+  trackingState.loading = true;
+  trackingState.error   = null;
  try {
-    trackingState.trackers = await getAdapter().getTrackers()
+    trackingState.trackers = await getAdapter().getTrackers();
  } catch (e) {
-    trackingState.error = String(e)
+    trackingState.error = String(e);
  } finally {
-    trackingState.loading = false
+    trackingState.loading = false;
  }
 }

 export async function loadMangaTrackRecords(mangaId: string) {
-  trackingState.recordsLoading = true
-  trackingState.recordsError   = null
+  trackingState.recordsLoading = true;
+  trackingState.recordsError   = null;
  try {
-    trackingState.records = await getAdapter().getMangaTrackRecords(mangaId)
+    trackingState.records = await getAdapter().getMangaTrackRecords(mangaId);
  } catch (e) {
-    trackingState.recordsError = String(e)
+    trackingState.recordsError = String(e);
  } finally {
-    trackingState.recordsLoading = false
+    trackingState.recordsLoading = false;
  }
 }

 export async function searchTracker(trackerId: string, query: string) {
-  trackingState.searchLoading = true
-  trackingState.searchError   = null
+  trackingState.searchLoading = true;
+  trackingState.searchError   = null;
  try {
-    trackingState.searchResults = await getAdapter().searchTracker(trackerId, query)
+    trackingState.searchResults = await getAdapter().searchTracker(trackerId, query);
  } catch (e) {
-    trackingState.searchError = String(e)
+    trackingState.searchError = String(e);
  } finally {
-    trackingState.searchLoading = false
+    trackingState.searchLoading = false;
  }
 }

 export async function linkTracker(mangaId: string, trackerId: string, remoteId: string) {
-  await getAdapter().linkTracker(mangaId, trackerId, remoteId)
-  await loadMangaTrackRecords(mangaId)
+  await getAdapter().linkTracker(mangaId, trackerId, remoteId);
+  await loadMangaTrackRecords(mangaId);
 }

 export async function unlinkTracker(mangaId: string, recordId: string) {
-  await getAdapter().unlinkTracker(recordId)
-  await loadMangaTrackRecords(mangaId)
+  await getAdapter().unlinkTracker(recordId);
+  await loadMangaTrackRecords(mangaId);
 }

 export async function syncTracking(mangaId: string) {
-  trackingState.syncing = true
+  trackingState.syncing = true;
  try {
-    await getAdapter().syncTracking(mangaId)
+    await getAdapter().syncTracking(mangaId);
  } finally {
-    trackingState.syncing = false
+    trackingState.syncing = false;
  }
 }
@@ -87,6 +87,6 @@ export function mapCategory(raw: Record<string, unknown>): Category {
    default:           raw.default as boolean,
    includeInUpdate:   raw.includeInUpdate as boolean,
    includeInDownload: raw.includeInDownload as boolean,
-    mangas:            (raw.mangas as { nodes: Record<string, unknown>[] })?.nodes?.map(mapManga),
+    mangas:            { nodes: (raw.mangas as { nodes: Record<string, unknown>[] })?.nodes?.map(mapManga) ?? [] },
  }
 }
@@ -35,6 +35,10 @@ export const appState = $state({
  authMode:      'NONE' as 'NONE' | 'BASIC_AUTH' | 'UI_LOGIN',
  platform:      'web' as 'web' | 'tauri' | 'capacitor',
  version:       '',
+  libraryFilter: '',
+  categories:    [] as { id: number; name: string }[],
+  history:       [] as unknown[],
+  toasts:        [] as unknown[],
 })

 export function setNavPage(next: NavPage)            { app.setNavPage(next) }
@@ -1,18 +1,18 @@
-import type { DownloadItem } from '$lib/server-adapters/types'
+import type { DownloadItem } from "$lib/server-adapters/types";

 export const downloadsState = $state({
  items: [] as DownloadItem[],
  error: null as string | null,
-})
+});

 export function activeDownloads() {
-  return downloadsState.items.filter(d => d.state === 'downloading')
+  return downloadsState.items.filter(d => d.state === "downloading");
 }

 export function queuedDownloads() {
-  return downloadsState.items.filter(d => d.state === 'queued')
+  return downloadsState.items.filter(d => d.state === "queued");
 }

 export function downloadCount() {
-  return downloadsState.items.length
+  return downloadsState.items.length;
 }
@@ -1,36 +1,37 @@
-import type { Extension, Source, Manga } from '$lib/types'
+import type { Extension, Source, Manga } from "$lib/types";

 export const extensionsState = $state({
-  items: [] as Extension[],
-  sources: [] as Source[],
-  loading: false,
-  error: null as string | null,
+  items:        [] as Extension[],
+  sources:      [] as Source[],
+  activeSource: null as Source | null,
+  loading:      false,
+  error:        null as string | null,

  filter: {
-    query: '',
+    query:     "",
    installed: false,
-    language: 'all',
+    language:  "all",
  },

  browseResults: [] as Manga[],
  browseLoading: false,
-  browseError: null as string | null,
+  browseError:   null as string | null,
  browseHasMore: false,
-})
+});

 export function filteredExtensions() {
-  let result = extensionsState.items
+  let result = extensionsState.items;

  if (extensionsState.filter.installed) {
-    result = result.filter(e => e.installed)
+    result = result.filter(e => e.installed);
  }
-  if (extensionsState.filter.language !== 'all') {
-    result = result.filter(e => e.lang === extensionsState.filter.language)
+  if (extensionsState.filter.language !== "all") {
+    result = result.filter(e => e.lang === extensionsState.filter.language);
  }
  if (extensionsState.filter.query) {
-    const q = extensionsState.filter.query.toLowerCase()
-    result = result.filter(e => e.name.toLowerCase().includes(q))
+    const q = extensionsState.filter.query.toLowerCase();
+    result = result.filter(e => e.name.toLowerCase().includes(q));
  }

-  return result
+  return result;
 }
@@ -1,42 +1,42 @@
 export interface HistoryEntry {
-  mangaId:       number
-  mangaTitle:    string
-  thumbnailUrl:  string
-  chapterId:     number
-  chapterName:   string
-  chapterNumber: number
-  pageNumber:    number
-  readAt:        number
+  mangaId:       number;
+  mangaTitle:    string;
+  thumbnailUrl:  string;
+  chapterId:     number;
+  chapterName:   string;
+  chapterNumber: number;
+  pageNumber:    number;
+  readAt:        number;
 }

 export interface ReadingStats {
-  currentStreakDays: number
-  totalChaptersRead: number
-  totalMinutesRead:  number
-  totalMangaRead:    number
-  longestStreakDays:  number
+  currentStreakDays:  number;
+  totalChaptersRead:  number;
+  totalMinutesRead:   number;
+  totalMangaRead:     number;
+  longestStreakDays:  number;
 }

 export const homeState = $state({
  history:         [] as HistoryEntry[],
  dailyReadCounts: {} as Record<string, number>,
  stats: {
-    currentStreakDays: 0,
-    totalChaptersRead: 0,
-    totalMinutesRead:  0,
-    totalMangaRead:    0,
+    currentStreakDays:  0,
+    totalChaptersRead:  0,
+    totalMinutesRead:   0,
+    totalMangaRead:     0,
    longestStreakDays:  0,
  } as ReadingStats,
  heroSlots: [null, null, null, null] as [number | null, number | null, number | null, number | null],
-})
+});

 export function setHeroSlot(i: 1 | 2 | 3, mangaId: number | null) {
-  homeState.heroSlots[i] = mangaId
+  homeState.heroSlots[i] = mangaId;
 }

 export function recordRead(entry: HistoryEntry) {
-  homeState.history = [entry, ...homeState.history.filter(e => e.chapterId !== entry.chapterId)]
-  const dateStr = new Date(entry.readAt).toISOString().slice(0, 10)
-  homeState.dailyReadCounts[dateStr] = (homeState.dailyReadCounts[dateStr] ?? 0) + 1
-  homeState.stats.totalChaptersRead++
+  homeState.history = [entry, ...homeState.history.filter(e => e.chapterId !== entry.chapterId)];
+  const dateStr = new Date(entry.readAt).toISOString().slice(0, 10);
+  homeState.dailyReadCounts[dateStr] = (homeState.dailyReadCounts[dateStr] ?? 0) + 1;
+  homeState.stats.totalChaptersRead++;
 }
@@ -1,89 +1,242 @@
-import type { Manga } from '$lib/types'
-import type { MangaStatus } from '$lib/server-adapters/types'
+import type { Manga }       from "$lib/types";
+import type { MangaStatus } from "$lib/server-adapters/types";
+import type { Category }    from "$lib/types";

-export type LibrarySortOption = 'alphabetical' | 'unread' | 'lastRead' | 'dateAdded'
-export type LibraryTab = 'saved' | 'downloaded'
+export type LibrarySortOption =
+  | "alphabetical"
+  | "unread"
+  | "lastRead"
+  | "dateAdded"
+  | "totalChapters"
+  | "latestFetched"
+  | "latestUploaded";
+
+export type LibrarySortDir = "asc" | "desc";
+
+export type LibraryContentFilter = "unread" | "started" | "downloaded" | "bookmarked";
+
+export type LibraryStatusFilter =
+  | "ALL"
+  | "ONGOING"
+  | "COMPLETED"
+  | "ON_HIATUS"
+  | "CANCELLED"
+  | "PUBLISHING_FINISHED";

 class LibraryState {
-  items      = $state<Manga[]>([])
-  loading    = $state(false)
-  error      = $state<string | null>(null)
-  refreshing = $state(false)
+  items      = $state<Manga[]>([]);
+  categories = $state<Category[]>([]);
+  loading    = $state(false);
+  error      = $state<string | null>(null);
+  refreshing = $state(false);

-  tab      = $state<LibraryTab>('saved')
-  sort     = $state<LibrarySortOption>('alphabetical')
-  sortDesc = $state(false)
+  tab = $state<string>("library");

-  filter = $state({
-    status:     'all' as MangaStatus | 'all',
-    unread:     false,
-    downloaded: false,
-    bookmarked: false,
-    query:      '',
-  })
+  tabSort    = $state<Record<string, { mode: LibrarySortOption; dir: LibrarySortDir }>>({});
+  tabStatus  = $state<Record<string, LibraryStatusFilter>>({});
+  tabFilters = $state<Record<string, Partial<Record<LibraryContentFilter, boolean>>>>({});

-  selected   = $state(new Set<number>())
-  selectMode = $state(false)
+  hiddenTabs            = $state<Set<string>>(new Set());
+  pinnedTabOrder        = $state<string[]>([]);
+  defaultCategoryId     = $state<number | null>(null);
+  showAllInSaved        = $state(true);
+  hideCompletedInSaved  = $state(false);
+  categoryFrecency      = $state<Record<number, number>>({});
+
+  filter = $state({ query: "" });
+
+  selected   = $state(new Set<number>());
+  selectMode = $state(false);
+
+  refreshProgress   = $state({ finished: 0, total: 0 });
+  refreshDone       = $state(false);
+
+  refreshingMangaId = $state<number | null>(null);
+  refreshingCatId   = $state<number | null>(null);
+
+  readonly COMPLETED_NAME = "Completed";
+
+  get completedCatId(): number | null {
+    return this.categories.find(c => c.name === this.COMPLETED_NAME && c.id !== 0)?.id ?? null;
+  }
+
+  get categoryMangaMap(): Map<number, Manga[]> {
+    const map = new Map<number, Manga[]>();
+    for (const cat of this.categories) {
+      map.set(cat.id, (cat as any).mangas?.nodes ?? []);
+    }
+    return map;
+  }
+
+  get allTabIds(): string[] {
+    const catIds  = this.categories.filter(c => c.id !== 0).map(c => String(c.id));
+    const BUILTIN = ["library", "downloaded"];
+    const known   = new Set([...BUILTIN, ...catIds]);
+    const ordered: string[] = [];
+    const inOrder = new Set<string>();
+    for (const id of this.pinnedTabOrder) {
+      if (known.has(id) && !inOrder.has(id)) { ordered.push(id); inOrder.add(id); }
+    }
+    for (const id of [...BUILTIN, ...catIds]) {
+      if (!inOrder.has(id)) { ordered.push(id); inOrder.add(id); }
+    }
+    return ordered;
+  }
+
+  get visibleTabIds(): string[] {
+    return this.allTabIds.filter(id => !this.hiddenTabs.has(id));
+  }
+
+  get visibleCategories(): Category[] {
+    const pinned   = this.pinnedTabOrder;
+    const defId    = this.defaultCategoryId;
+    const cats     = this.categories.filter(c => c.id !== 0 && !this.hiddenTabs.has(String(c.id)));
+    const pinOrder = (id: number) => { const i = pinned.indexOf(String(id)); return i === -1 ? Infinity : i; };
+    return [...cats].sort((a, b) => {
+      if (a.id === defId) return -1;
+      if (b.id === defId) return  1;
+      const pd = pinOrder(a.id) - pinOrder(b.id);
+      return pd !== 0 ? pd : (a as any).order - (b as any).order;
+    });
+  }
+
+  get counts(): Record<string, number> {
+    const m: Record<string, number> = {
+      library:    this.showAllInSaved
+        ? this.items.filter(x => x.inLibrary).length
+        : (this.categoryMangaMap.get(0) ?? []).length,
+      downloaded: this.items.filter(x => (x.downloadCount ?? 0) > 0).length,
+    };
+    for (const cat of this.visibleCategories) {
+      m[String(cat.id)] = (this.categoryMangaMap.get(cat.id) ?? []).length;
+    }
+    return m;
+  }

  filteredItems = $derived.by(() => {
-    let result = this.tab === 'downloaded'
-      ? this.items.filter(m => (m.downloadCount ?? 0) > 0)
-      : this.items.filter(m => m.inLibrary)
+    const tab = this.tab;

-    if (this.filter.unread)     result = result.filter(m => (m.unreadCount ?? 0) > 0)
-    if (this.filter.downloaded) result = result.filter(m => (m.downloadCount ?? 0) > 0)
-    if (this.filter.bookmarked) result = result.filter(m => (m.bookmarkCount ?? 0) > 0)
+    let items: Manga[];
+    if (tab === "library") {
+      items = this.showAllInSaved
+        ? this.items.filter(m => m.inLibrary)
+        : (this.categoryMangaMap.get(0) ?? []);

-    if (this.filter.status !== 'all') {
-      result = result.filter(
-        m => m.status?.toUpperCase().replace(/\s+/g, '_') === this.filter.status
-      )
-    }
-
-    if (this.filter.query) {
-      const q = this.filter.query.toLowerCase()
-      result = result.filter(m => m.title.toLowerCase().includes(q))
-    }
-
-    const sorted = [...result].sort((a, b) => {
-      switch (this.sort) {
-        case 'unread':    return (b.unreadCount ?? 0) - (a.unreadCount ?? 0)
-        case 'lastRead':  return (b.lastReadAt ?? 0) - (a.lastReadAt ?? 0)
-        case 'dateAdded': return (b.addedAt ?? 0) - (a.addedAt ?? 0)
-        default:          return a.title.localeCompare(b.title)
+      if (this.showAllInSaved && this.hideCompletedInSaved) {
+        const completedCat = this.categories.find(c => c.name === this.COMPLETED_NAME);
+        if (completedCat) {
+          const completedIds = new Set((this.categoryMangaMap.get(completedCat.id) ?? []).map(m => m.id));
+          items = items.filter(m => !completedIds.has(m.id));
+        }
      }
-    })
+    } else if (tab === "downloaded") {
+      items = this.items.filter(m => (m.downloadCount ?? 0) > 0);
+    } else {
+      items = this.categoryMangaMap.get(Number(tab)) ?? [];
+    }

-    return this.sortDesc ? sorted.reverse() : sorted
-  })
+    const q = this.filter.query.trim().toLowerCase();
+    if (q) items = items.filter(m => m.title.toLowerCase().includes(q));

-  get hasActiveFilters() {
-    return this.filter.status !== 'all'
-      || this.filter.unread
-      || this.filter.downloaded
-      || this.filter.bookmarked
+    const status = this.tabStatus[tab] ?? "ALL";
+    if (status !== "ALL") {
+      items = items.filter(m => {
+        const s = m.status?.toUpperCase().replace(/\s+/g, "_") ?? "UNKNOWN";
+        return s === status;
+      });
+    }
+
+    const f = this.tabFilters[tab] ?? {};
+    if (f.unread)     items = items.filter(m => (m.unreadCount ?? 0) > 0);
+    if (f.started)    items = items.filter(m => (m.unreadCount ?? 0) > 0 && (m.chapters?.totalCount ?? 0) > (m.unreadCount ?? 0));
+    if (f.downloaded) items = items.filter(m => (m.downloadCount ?? 0) > 0);
+    if (f.bookmarked) items = items.filter(m => (m.bookmarkCount ?? 0) > 0);
+
+    const { mode, dir } = this.tabSort[tab] ?? { mode: "alphabetical" as LibrarySortOption, dir: "asc" as LibrarySortDir };
+
+    const sorted = [...items].sort((a, b) => {
+      switch (mode) {
+        case "unread":         return (b.unreadCount ?? 0) - (a.unreadCount ?? 0);
+        case "lastRead":       return (b.lastReadAt ?? 0) - (a.lastReadAt ?? 0);
+        case "dateAdded":      return (b.addedAt ?? 0) - (a.addedAt ?? 0);
+        case "totalChapters":  return (b.chapters?.totalCount ?? 0) - (a.chapters?.totalCount ?? 0);
+        case "latestFetched":  return Number(b.latestFetchedChapter?.uploadDate ?? 0) - Number(a.latestFetchedChapter?.uploadDate ?? 0);
+        case "latestUploaded": return Number(b.latestUploadedChapter?.uploadDate ?? 0) - Number(a.latestUploadedChapter?.uploadDate ?? 0);
+        default:               return a.title.localeCompare(b.title);
+      }
+    });
+
+    return dir === "desc" ? sorted.reverse() : sorted;
+  });
+
+  get hasActiveFilters(): boolean {
+    const tab     = this.tab;
+    const status  = this.tabStatus[tab]  ?? "ALL";
+    const filters = this.tabFilters[tab] ?? {};
+    return status !== "ALL" || Object.values(filters).some(Boolean);
+  }
+
+  setTabSort(tab: string, mode: LibrarySortOption, dir?: LibrarySortDir) {
+    const prev   = this.tabSort[tab];
+    const newDir = dir ?? prev?.dir ?? "asc";
+    this.tabSort = { ...this.tabSort, [tab]: { mode, dir: newDir } };
+  }
+
+  toggleTabSortDir(tab: string) {
+    const prev = this.tabSort[tab];
+    const mode = prev?.mode ?? "alphabetical";
+    const dir  = prev?.dir  === "asc" ? "desc" : "asc";
+    this.setTabSort(tab, mode, dir);
+  }
+
+  setTabStatus(tab: string, status: LibraryStatusFilter) {
+    this.tabStatus = { ...this.tabStatus, [tab]: status };
+  }
+
+  toggleTabFilter(tab: string, filter: LibraryContentFilter) {
+    const current = this.tabFilters[tab] ?? {};
+    this.tabFilters = { ...this.tabFilters, [tab]: { ...current, [filter]: !current[filter] } };
+  }
+
+  clearTabFilters(tab: string) {
+    this.tabStatus  = { ...this.tabStatus,  [tab]: "ALL" };
+    this.tabFilters = { ...this.tabFilters, [tab]: {} };
+  }
+
+  setCategories(cats: Category[]) {
+    this.categories = cats;
+  }
+
+  bumpCategoryFrecency(catId: number) {
+    this.categoryFrecency = { ...this.categoryFrecency, [catId]: (this.categoryFrecency[catId] ?? 0) + 1 };
  }

  enterSelect(id?: number) {
-    this.selectMode = true
-    if (id !== undefined) this.selected = new Set([id])
+    this.selectMode = true;
+    if (id !== undefined) this.selected = new Set([id]);
  }

  exitSelect() {
-    this.selectMode = false
-    this.selected   = new Set()
+    this.selectMode = false;
+    this.selected   = new Set();
  }

  toggleSelect(id: number) {
-    const next = new Set(this.selected)
-    if (next.has(id)) next.delete(id); else next.add(id)
-    this.selected = next
-    if (next.size === 0) this.exitSelect()
+    const next = new Set(this.selected);
+    if (next.has(id)) next.delete(id); else next.add(id);
+    this.selected = next;
+    if (next.size === 0) this.exitSelect();
  }

-  selectAll() {
-    this.selected = new Set(this.filteredItems.map(m => m.id))
+  selectAll(ids: number[]) {
+    this.selected = new Set(ids);
+  }
+
+  guardTab() {
+    if (this.tab === "library" || this.tab === "downloaded") return;
+    const id = Number(this.tab);
+    if (!this.categories.some(c => c.id === id)) this.tab = "library";
  }
 }

-export const libraryState = new LibraryState()
+export const libraryState = new LibraryState();
@@ -1,38 +1,37 @@
-export type ToastKind = 'info' | 'success' | 'error' | 'download'
-
 export interface Toast {
-  id:        string
-  kind:      ToastKind
-  message:   string
-  detail?:   string
-  duration?: number
+  id:        string;
+  kind:      "success" | "error" | "info" | "download";
+  title:     string;
+  body?:     string;
+  duration?: number;
 }

 export interface ActiveDownload {
-  chapterId: number
-  mangaId:   number
-  progress:  number
+  chapterId: number;
+  mangaId:   number;
+  progress:  number;
 }

 class NotificationStore {
-  toasts:          Toast[]          = $state([])
-  activeDownloads: ActiveDownload[] = $state([])
+  toasts:          Toast[]          = $state([]);
+  activeDownloads: ActiveDownload[] = $state([]);

-  toast(toast: Omit<Toast, 'id'>) {
-    this.toasts = [...this.toasts, { ...toast, id: Math.random().toString(36).slice(2) }].slice(-5)
+  addToast(t: Omit<Toast, "id">) {
+    this.toasts = [...this.toasts, { ...t, id: Math.random().toString(36).slice(2) }].slice(-5);
  }

  dismissToast(id: string) {
-    this.toasts = this.toasts.filter(x => x.id !== id)
+    this.toasts = this.toasts.filter(x => x.id !== id);
  }

  setActiveDownloads(next: ActiveDownload[]) {
-    this.activeDownloads = next
+    this.activeDownloads = next;
  }
 }

-export const notifications = new NotificationStore()
+export const notifications = new NotificationStore();

-export function toast(toast: Omit<Toast, 'id'>)         { notifications.toast(toast) }
-export function dismissToast(id: string)                    { notifications.dismissToast(id) }
-export function setActiveDownloads(next: ActiveDownload[])  { notifications.setActiveDownloads(next) }
+export function addToast(t: Omit<Toast, "id">)             { notifications.addToast(t); }
+export function toast(t: Omit<Toast, "id">)                { notifications.addToast(t); }
+export function dismissToast(id: string)                    { notifications.dismissToast(id); }
+export function setActiveDownloads(next: ActiveDownload[])  { notifications.setActiveDownloads(next); }
@@ -1,44 +1,44 @@
-import type { Manga, Chapter } from '$lib/types'
-import type { Page } from '$lib/server-adapters/types'
+import type { Manga, Chapter } from "$lib/types";
+import type { Page }           from "$lib/server-adapters/types";

-export type ReadMode = 'single' | 'strip'
-export type FitMode = 'width' | 'height' | 'original'
-export type ReadDirection = 'ltr' | 'rtl'
+export type ReadMode      = "single" | "strip";
+export type FitMode       = "width" | "height" | "original";
+export type ReadDirection = "ltr" | "rtl";

 export const readerState = $state({
-  manga: null as Manga | null,
+  manga:   null as Manga | null,
  chapter: null as Chapter | null,
  chapters: [] as Chapter[],

-  pages: [] as Page[],
+  pages:        [] as Page[],
  pagesLoading: false,
-  pagesError: null as string | null,
+  pagesError:   null as string | null,

-  currentPage: 0,
-  mode: 'single' as ReadMode,
-  fit: 'width' as FitMode,
-  direction: 'ltr' as ReadDirection,
-  zoom: 1,
+  currentPage:  0,
+  mode:         "single"  as ReadMode,
+  fit:          "width"   as FitMode,
+  direction:    "ltr"     as ReadDirection,
+  zoom:         1,

  showControls: false,
  showSettings: false,
-  fullscreen: false,
-})
+  fullscreen:   false,
+});

 export function currentPageData() {
-  return readerState.pages[readerState.currentPage] ?? null
+  return readerState.pages[readerState.currentPage] ?? null;
 }

 export function progress() {
  return readerState.pages.length > 0
    ? (readerState.currentPage + 1) / readerState.pages.length
-    : 0
+    : 0;
 }

 export function hasPrev() {
-  return readerState.currentPage > 0
+  return readerState.currentPage > 0;
 }

 export function hasNext() {
-  return readerState.currentPage < readerState.pages.length - 1
+  return readerState.currentPage < readerState.pages.length - 1;
 }
@@ -1,28 +1,132 @@
-import type { Manga, Chapter } from '$lib/types'
+import type { Manga, Chapter }                                        from "$lib/types";
+import type { BookmarkEntry, MarkerEntry, MarkerColor }               from "$lib/types/history";
+import type { MangaPrefs }                                            from "$lib/types/settings";
+import { settingsState, updateSettings }                              from "$lib/state/settings.svelte";
+import { goto }                                                       from "$app/navigation";

-class SeriesState {
-  current         = $state<Manga | null>(null)
-  loading         = $state(false)
-  error           = $state<string | null>(null)
+export type { BookmarkEntry, MarkerEntry, MarkerColor } from "$lib/types/history";
+export type { MangaPrefs }                              from "$lib/types/settings";

-  chapters        = $state<Chapter[]>([])
-  chaptersLoading = $state(false)
-  chaptersError   = $state<string | null>(null)
+class SeriesStore {
+  current             = $state<Manga | null>(null);
+  loading             = $state(false);
+  error               = $state<string | null>(null);

-  chapterSortDesc = $state(true)
-  chapterFilter   = $state({ unread: false, downloaded: false, query: '' })
+  chapters            = $state<Chapter[]>([]);
+  chaptersLoading     = $state(false);
+  chaptersError       = $state<string | null>(null);

-  filteredChapters = $derived.by(() => {
-    let result = this.chapters
-    if (this.chapterFilter.unread)     result = result.filter(c => !c.read)
-    if (this.chapterFilter.downloaded) result = result.filter(c => c.downloaded)
-    if (this.chapterFilter.query) {
-      const q = this.chapterFilter.query.toLowerCase()
-      result = result.filter(c => c.name.toLowerCase().includes(q))
-    }
-    const sorted = [...result].sort((a, b) => a.chapterNumber - b.chapterNumber)
-    return this.chapterSortDesc ? sorted.reverse() : sorted
-  })
+  activeMangaId       = $state<number | null>(null);
+  activeManga         = $state<Manga | null>(null);
+  previewManga        = $state<Manga | null>(null);
+  activeChapter       = $state<Chapter | null>(null);
+  activeChapterList   = $state<Chapter[]>([]);
+  bookmarks           = $state<BookmarkEntry[]>([]);
+  markers             = $state<MarkerEntry[]>([]);
+  acknowledgedUpdates = $state<Set<number>>(new Set());
+
+  setActiveMangaId(next: number | null) { this.activeMangaId = next; }
+  setActiveManga(next: Manga | null)  { this.activeManga  = next; }
+  setPreviewManga(next: Manga | null) { this.previewManga = next; }
+
+  openReader(chapter: Chapter, chapterList: Chapter[], manga?: Manga | null) {
+    this.activeChapter     = chapter;
+    this.activeChapterList = chapterList;
+    if (manga !== undefined) this.activeManga = manga;
+    goto(`/reader/${this.activeManga!.id}/${chapter.id}`);
+  }
+
+  closeReader() {
+    this.activeChapter     = null;
+    this.activeChapterList = [];
+  }
+
+  acknowledgeUpdate(mangaId: number) {
+    if (this.acknowledgedUpdates.has(mangaId)) return;
+    this.acknowledgedUpdates = new Set([...this.acknowledgedUpdates, mangaId]);
+  }
+
+  addBookmark(entry: Omit<BookmarkEntry, "savedAt">, label?: string) {
+    this.bookmarks = [
+      { ...entry, savedAt: Date.now(), label },
+      ...this.bookmarks.filter(b => b.chapterId !== entry.chapterId),
+    ].slice(0, 200);
+  }
+
+  removeBookmark(chapterId: number)  { this.bookmarks = this.bookmarks.filter(b => b.chapterId !== chapterId); }
+  clearBookmarks()                   { this.bookmarks = []; }
+  getBookmark(chapterId: number)     { return this.bookmarks.find(b => b.chapterId === chapterId); }
+
+  addMarker(entry: Omit<MarkerEntry, "id" | "createdAt">): string {
+    const id = Math.random().toString(36).slice(2);
+    this.markers = [...this.markers, { ...entry, id, createdAt: Date.now() }];
+    return id;
+  }
+
+  updateMarker(id: string, patch: Partial<Pick<MarkerEntry, "note" | "color">>) {
+    this.markers = this.markers.map(m => m.id === id ? { ...m, ...patch, updatedAt: Date.now() } : m);
+  }
+
+  removeMarker(id: string)                            { this.markers = this.markers.filter(m => m.id !== id); }
+  getMarkersForPage(chapterId: number, page: number)  { return this.markers.filter(m => m.chapterId === chapterId && m.pageNumber === page); }
+  getMarkersForChapter(chapterId: number)             { return this.markers.filter(m => m.chapterId === chapterId); }
+  getMarkersForManga(mangaId: number)                 { return this.markers.filter(m => m.mangaId === mangaId); }
+  clearMarkersForManga(mangaId: number)               { this.markers = this.markers.filter(m => m.mangaId !== mangaId); }
+
+  getPref<K extends keyof MangaPrefs>(mangaId: number, key: K): MangaPrefs[K] {
+    const prefs = settingsState.settings.mangaPrefs?.[mangaId] ?? {};
+    return (prefs[key] ?? DEFAULT_MANGA_PREFS[key]) as MangaPrefs[K];
+  }
+
+  setPref<K extends keyof MangaPrefs>(mangaId: number, key: K, value: MangaPrefs[K]) {
+    updateSettings({
+      mangaPrefs: {
+        ...settingsState.settings.mangaPrefs,
+        [mangaId]: { ...(settingsState.settings.mangaPrefs?.[mangaId] ?? {}), [key]: value },
+      },
+    });
+  }
+
+  get settings() { return settingsState.settings; }
 }

-export const seriesState = new SeriesState()
+export const DEFAULT_MANGA_PREFS: MangaPrefs = {
+  sortMode:           "source",
+  sortDir:            "asc",
+  preferredScanlator: "",
+  scanlatorFilter:    [],
+  scanlatorBlacklist: [],
+  scanlatorForce:     false,
+  autoDownload:       false,
+  downloadAhead:      0,
+  maxKeepChapters:    0,
+  deleteOnRead:       false,
+  deleteDelayHours:   0,
+  pauseUpdates:       false,
+  refreshInterval:    "global",
+  coverUrl:           "",
+};
+
+export const seriesState = new SeriesStore();
+
+export const seriesStore = seriesState;
+
+export function setActiveMangaId(next: number | null)                                          { seriesState.setActiveMangaId(next); }
+export function setActiveManga(next: Manga | null)                                             { seriesState.setActiveManga(next); }
+export function setPreviewManga(next: Manga | null)                                            { seriesState.setPreviewManga(next); }
+export function openReader(ch: Chapter, list: Chapter[], manga?: Manga | null)                 { seriesState.openReader(ch, list, manga); }
+export function closeReader()                                                                   { seriesState.closeReader(); }
+export function acknowledgeUpdate(mangaId: number)                                             { seriesState.acknowledgeUpdate(mangaId); }
+export function addBookmark(entry: Omit<BookmarkEntry, "savedAt">, label?: string)             { seriesState.addBookmark(entry, label); }
+export function removeBookmark(chapterId: number)                                              { seriesState.removeBookmark(chapterId); }
+export function clearBookmarks()                                                                { seriesState.clearBookmarks(); }
+export function getBookmark(chapterId: number)                                                 { return seriesState.getBookmark(chapterId); }
+export function addMarker(entry: Omit<MarkerEntry, "id" | "createdAt">): string               { return seriesState.addMarker(entry); }
+export function updateMarker(id: string, patch: Partial<Pick<MarkerEntry, "note" | "color">>) { seriesState.updateMarker(id, patch); }
+export function removeMarker(id: string)                                                        { seriesState.removeMarker(id); }
+export function getMarkersForPage(chapterId: number, page: number)                             { return seriesState.getMarkersForPage(chapterId, page); }
+export function getMarkersForChapter(chapterId: number)                                        { return seriesState.getMarkersForChapter(chapterId); }
+export function getMarkersForManga(mangaId: number)                                            { return seriesState.getMarkersForManga(mangaId); }
+export function clearMarkersForManga(mangaId: number)                                          { seriesState.clearMarkersForManga(mangaId); }
+export function getPref<K extends keyof MangaPrefs>(mangaId: number, key: K): MangaPrefs[K]   { return seriesState.getPref(mangaId, key); }
+export function setPref<K extends keyof MangaPrefs>(mangaId: number, key: K, value: MangaPrefs[K]) { seriesState.setPref(mangaId, key, value); }
@@ -1,38 +1,38 @@
-import type { Settings } from '$lib/types/settings'
-import { DEFAULT_SETTINGS } from '$lib/types/settings'
+import type { Settings }    from "$lib/types/settings";
+import { DEFAULT_SETTINGS } from "$lib/types/settings";

-const KEY = 'moku_settings'
+const KEY = "moku_settings";

 function load(): Settings {
  try {
-    const raw = localStorage.getItem(KEY)
-    if (raw) return { ...DEFAULT_SETTINGS, ...JSON.parse(raw) }
+    const raw = localStorage.getItem(KEY);
+    if (raw) return { ...DEFAULT_SETTINGS, ...JSON.parse(raw) };
  } catch {}
-  return { ...DEFAULT_SETTINGS }
+  return { ...DEFAULT_SETTINGS };
 }

 function save(s: Settings) {
-  try { localStorage.setItem(KEY, JSON.stringify(s)) } catch {}
+  try { localStorage.setItem(KEY, JSON.stringify(s)); } catch {}
 }

-export const settingsState = $state({ settings: load() })
+export const settingsState = $state({ settings: load() });

-if (typeof document !== 'undefined') {
-  document.documentElement.style.zoom = String(settingsState.settings.uiZoom ?? 1.0)
+if (typeof document !== "undefined") {
+  document.documentElement.style.zoom = String(settingsState.settings.uiZoom ?? 1.0);
 }

 export function updateSettings(patch: Partial<Settings>) {
-  Object.assign(settingsState.settings, patch)
-  save(settingsState.settings)
+  Object.assign(settingsState.settings, patch);
+  save(settingsState.settings);

-  if (typeof document !== 'undefined') {
+  if (typeof document !== "undefined") {
    if (patch.uiZoom !== undefined) {
-      document.documentElement.style.zoom = String(patch.uiZoom)
+      document.documentElement.style.zoom = String(patch.uiZoom);
    }
  }
 }

 export function resetSettings() {
-  settingsState.settings = { ...DEFAULT_SETTINGS }
-  save(settingsState.settings)
+  settingsState.settings = { ...DEFAULT_SETTINGS };
+  save(settingsState.settings);
 }
@@ -1,29 +1,149 @@
+import { getAdapter }       from '$lib/request-manager'
+import { settingsState }    from '$lib/state/settings.svelte'
+import { buildChapterList } from '$lib/components/series/lib/chapterList'
 import type { Tracker, TrackRecord } from '$lib/types'
-import type { Chapter } from '$lib/types/chapter'
-import type { MangaPrefs } from '$lib/types/settings'
+import type { Chapter }              from '$lib/types'
+import type { ChapterDisplayPrefs }  from '$lib/components/series/lib/chapterList'

-export const trackingState = $state({
-  trackers:       [] as Tracker[],
-  loading:        false,
-  error:          null as string | null,
-  syncing:        false,
+type RecordMap = Map<number, TrackRecord[]>

-  records:        [] as unknown[],
-  recordsLoading: false,
-  recordsError:   null as string | null,
+class TrackingStore {
+  private byManga: RecordMap = $state(new Map())

-  searchResults:  [] as unknown[],
-  searchLoading:  false,
-  searchError:    null as string | null,
-})
+  trackers:       Tracker[]     = $state([])
+  loading:        boolean       = $state(false)
+  error:          string | null = $state(null)
+  syncing:        boolean       = $state(false)

+  recordsLoading: boolean       = $state(false)
+  recordsError:   string | null = $state(null)
+  searchResults:  unknown[]     = $state([])
+  searchLoading:  boolean       = $state(false)
+  searchError:    string | null = $state(null)
+
+  private loadingFor = new Set<number>()
+
+  recordsFor(mangaId: number): TrackRecord[] {
+    return this.byManga.get(mangaId) ?? []
+  }
+
+  private setFor(mangaId: number, records: TrackRecord[]) {
+    const next = new Map(this.byManga)
+    next.set(mangaId, records)
+    this.byManga = next
+  }
+
+  async loadForManga(mangaId: number) {
+    if (this.loadingFor.has(mangaId)) return
+    const existing = this.byManga.get(mangaId)
+    if (existing && existing.length > 0) return
+
+    this.loadingFor.add(mangaId)
+    try {
+      const records = await getAdapter().getMangaTrackRecords(String(mangaId)) as TrackRecord[]
+      this.setFor(mangaId, records)
+    } catch (e) {
+      // silently ignore — tracking is non-critical
+    } finally {
+      this.loadingFor.delete(mangaId)
+    }
+  }
+
+  async syncFromRemote(
+    mangaId:  number,
+    record:   TrackRecord,
+    chapters: Chapter[],
+    prefs:    ChapterDisplayPrefs,
+  ): Promise<{ markedIds: number[] }> {
+    if (!settingsState.settings.trackerSyncBack) return { markedIds: [] }
+
+    try {
+      await getAdapter().syncTracking(String(mangaId))
+      const fresh = await getAdapter().getMangaTrackRecords(String(mangaId)) as TrackRecord[]
+      this.setFor(mangaId, fresh)
+
+      const freshRecord = fresh.find(r => r.id === record.id)
+      if (!freshRecord) return { markedIds: [] }
+
+      const markedIds = this._applyRemoteProgress(freshRecord, chapters, prefs)
+      return { markedIds }
+    } catch {
+      return { markedIds: [] }
+    }
+  }
+
+  private _applyRemoteProgress(
+    record:   TrackRecord,
+    chapters: Chapter[],
+    prefs:    ChapterDisplayPrefs,
+  ): number[] {
+    const lastRead = record.lastChapterRead ?? 0
+    if (lastRead <= 0) return []
+
+    const threshold = settingsState.settings.trackerSyncBackThreshold ?? null
+    const respectScanlator = settingsState.settings.trackerRespectScanlatorFilter ?? true
+    const activeScanlators: string[] | null =
+      respectScanlator && (prefs as any).scanlatorFilter?.length
+        ? (prefs as any).scanlatorFilter
+        : null
+
+    return chapters
+      .filter(ch => {
+        if (ch.read) return false
+        if (activeScanlators && ch.scanlator && !activeScanlators.includes(ch.scanlator)) return false
+        return threshold !== null
+          ? ch.chapterNumber <= lastRead && ch.chapterNumber >= lastRead - threshold
+          : ch.chapterNumber <= lastRead
+      })
+      .map(ch => ch.id)
+  }
+
+  async updateFromRead(
+    mangaId:     number,
+    chapter:     Chapter,
+    chapterList: Chapter[],
+    prefs:       ChapterDisplayPrefs,
+  ) {
+    const records = this.recordsFor(mangaId)
+    if (!records.length) return
+    try {
+      await getAdapter().syncTracking(String(mangaId))
+      const fresh = await getAdapter().getMangaTrackRecords(String(mangaId)) as TrackRecord[]
+      this.setFor(mangaId, fresh)
+    } catch {}
+  }
+
+  async updateFromUnread(
+    mangaId:     number,
+    chapterList: Chapter[],
+    prefs:       ChapterDisplayPrefs,
+  ) {
+    const records = this.recordsFor(mangaId)
+    if (!records.length) return
+    try {
+      await getAdapter().syncTracking(String(mangaId))
+      const fresh = await getAdapter().getMangaTrackRecords(String(mangaId)) as TrackRecord[]
+      this.setFor(mangaId, fresh)
+    } catch {}
+  }
+
+  clear(mangaId: number) {
+    const next = new Map(this.byManga)
+    next.delete(mangaId)
+    this.byManga = next
+  }
+}
+
+export const trackingState = new TrackingStore()
+
+// Standalone export for components that run their own sync loop (e.g. TrackingSettings)
 export async function syncBackFromTracker(
-  records: TrackRecord[],
+  records:  TrackRecord[],
  chapters: Chapter[],
  opts: {
    threshold:              number | null
    respectScanlatorFilter: boolean
-    chapterPrefs:           Partial<MangaPrefs>
+    chapterPrefs:           Partial<any>
  },
  markChaptersRead: (ids: string[], read: boolean) => Promise<void>,
 ): Promise<Chapter[]> {
@@ -46,8 +166,7 @@ export async function syncBackFromTracker(
        : ch.chapterNumber <= lastRead
    })

-    if (toMark.length === 0) continue
-
+    if (!toMark.length) continue
    await markChaptersRead(toMark.map(ch => String(ch.id)), true)
    marked.push(...toMark)
  }