Feat: Bulk-Source Migration (#66)

src/features/extensions/components/ExtensionLibrary.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-  import { ArrowLeft, MagnifyingGlass, GearSix } from "phosphor-svelte";
+  import { ArrowLeft, MagnifyingGlass, GearSix, Swap } from "phosphor-svelte";
   import Thumbnail           from "@shared/manga/Thumbnail.svelte";
   import { resolvedCover }   from "@core/cover/coverResolver";
   import { gql }             from "@api/client";
   import { setPreviewManga } from "@store/state.svelte";
   import { GET_LIBRARY, GET_SOURCES } from "@api/queries";
   import { libraryByExtension, type LibraryManga, type SourceNode, type SourceLibrary } from "../lib/extensionLibrary";
+  import SourceMigrateModal  from "../panels/SourceMigrateModal.svelte";
 
   type SourceEntry = { id: string; displayName: string };
 
@@ -28,6 +29,8 @@
   let loading  = $state(true);
   let search   = $state("");
 
+  let migrateTarget: { sourceId: string; sourceName: string; iconUrl: string; manga: LibraryManga[] } | null = $state(null);
+
   const allManga = $derived(groups.flatMap(g => g.manga));
   const filtered = $derived(
     search.trim()
@@ -35,6 +38,8 @@
       : allManga
   );
 
+  let sourceNodes: SourceNode[] = $state([]);
+
   $effect(() => { load(); });
 
   async function load() {
@@ -44,16 +49,27 @@
         gql<{ mangas: { nodes: LibraryManga[] } }>(GET_LIBRARY),
         gql<{ sources: { nodes: SourceNode[] } }>(GET_SOURCES),
       ]);
+      sourceNodes = srcData.sources.nodes;
       groups = libraryByExtension(libData.mangas.nodes, srcData.sources.nodes, pkgName);
     } finally {
       loading = false;
     }
   }
+
+  function openMigrate(group: SourceLibrary) {
+    const node = sourceNodes.find(s => s.id === group.sourceId);
+    migrateTarget = {
+      sourceId:   group.sourceId,
+      sourceName: group.displayName,
+      iconUrl:    (node as any)?.iconUrl ?? iconUrl,
+      manga:      group.manga,
+    };
+  }
 </script>
 
 <div class="root">
   <div class="header">
-    <button class="back-btn" onclick={onBack}>
+    <button class="header-btn" onclick={onBack}>
       <ArrowLeft size={14} weight="bold" />
     </button>
     {#if iconUrl}
@@ -71,7 +87,7 @@
       <input class="search" placeholder="Search" bind:value={search} autocomplete="off" />
     </div>
     {#if sources.length > 0}
-      <button class="settings-btn" onclick={onSettings} title="Extension settings">
+      <button class="header-btn" onclick={onSettings} title="Extension settings">
         <GearSix size={14} weight="bold" />
       </button>
     {/if}
@@ -92,9 +108,32 @@
         {allManga.length === 0 ? "Nothing from this extension is in your library." : "No matches."}
       </div>
     {:else}
+      {#if groups.length > 1}
+        <div class="source-groups">
+          {#each groups as group}
+            <div class="source-group-header">
+              <span class="source-group-name">{group.displayName}</span>
+              <span class="source-group-count">{group.manga.length}</span>
+              <button class="migrate-btn" onclick={() => openMigrate(group)} title="Migrate this source">
+                <Swap size={12} weight="bold" />
+                Migrate source
+              </button>
+            </div>
+          {/each}
+        </div>
+      {:else if groups.length === 1}
+        <div class="single-source-bar">
+          <span class="source-group-name">{groups[0].displayName}</span>
+          <button class="migrate-btn" onclick={() => openMigrate(groups[0])} title="Migrate this source">
+            <Swap size={12} weight="bold" />
+            Migrate source
+          </button>
+        </div>
+      {/if}
+
       <div class="grid" style="--cols:{cols}">
         {#each filtered as m (m.id)}
-          {@const isCompleted = !m.unreadCount && (m.downloadCount > 0)}
+          {@const isCompleted = !m.unreadCount && m.downloadCount > 0}
           <button class="card" class:anims onclick={() => setPreviewManga(m as any)}>
             <div class="cover-wrap" class:completed={isCompleted}>
               <Thumbnail
@@ -125,6 +164,17 @@
   </div>
 </div>
 
+{#if migrateTarget}
+  <SourceMigrateModal
+    sourceId={migrateTarget.sourceId}
+    sourceName={migrateTarget.sourceName}
+    sourceIconUrl={migrateTarget.iconUrl}
+    manga={migrateTarget.manga}
+    onClose={() => migrateTarget = null}
+    onDone={() => { migrateTarget = null; load(); }}
+  />
+{/if}
+
 <style>
   .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
 
@@ -132,8 +182,8 @@
 
   .header { 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; }
 
-  .back-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--text-faint); flex-shrink: 0; transition: color var(--t-base), background var(--t-base); }
+  .header-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--text-faint); flex-shrink: 0; transition: color var(--t-base), background var(--t-base); }
-  .back-btn:hover { color: var(--text-primary); background: var(--bg-raised); }
+  .header-btn:hover { color: var(--text-primary); background: var(--bg-raised); }
 
   .title-block { display: flex; flex-direction: column; gap: 1px; }
   .eyebrow { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
@@ -147,10 +197,15 @@
   .search::placeholder { color: var(--text-faint); }
   .search:focus { border-color: var(--border-strong); }
 
-  .settings-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--text-faint); flex-shrink: 0; transition: color var(--t-base), background var(--t-base); }
+  .content { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-6) var(--sp-6); will-change: scroll-position; display: flex; flex-direction: column; gap: var(--sp-3); }
-  .settings-btn:hover { color: var(--text-primary); background: var(--bg-raised); }
 
-  .content { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-6) var(--sp-6); will-change: scroll-position; }
+  .source-groups { display: flex; flex-direction: column; gap: var(--sp-1); }
+  .source-group-header { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-dim); }
+  .single-source-bar { display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-dim); }
+  .source-group-name { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); font-weight: var(--weight-medium); }
+  .source-group-count { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); padding: 1px 6px; border-radius: var(--radius-sm); background: var(--bg-overlay); border: 1px solid var(--border-dim); }
+  .migrate-btn { display: flex; align-items: center; gap: 5px; margin-left: auto; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); padding: 3px 9px; border-radius: var(--radius-sm); background: none; color: var(--text-faint); border: 1px solid var(--border-dim); cursor: pointer; flex-shrink: 0; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
+  .migrate-btn:hover { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
 
   .grid { display: grid; grid-template-columns: repeat(var(--cols, auto-fill), minmax(130px, 1fr)); gap: var(--sp-4); }
 

src/features/extensions/components/Extensions.svelte

@@ -11,7 +11,7 @@
   import ExtensionFilters       from "./ExtensionFilters.svelte";
   import ExtensionCard          from "./ExtensionCard.svelte";
   import ExtensionSettingsPanel from "../panels/ExtensionSettingsPanel.svelte";
-  import ExtensionLibraryPanel  from "../panels/ExtensionLibraryPanel.svelte";
+  import ExtensionLibrary from "./ExtensionLibrary.svelte";
 
   const anims      = $derived(store.settings.qolAnimations ?? true);
   const cols       = $derived(store.settings.libraryCols   ?? 5);
@@ -247,7 +247,7 @@
 </script>
 
 {#if libraryTarget}
-  <ExtensionLibraryPanel
+  <ExtensionLibrary
     pkgName={libraryTarget.pkgName}
     extensionName={libraryTarget.extensionName}
     iconUrl={libraryTarget.iconUrl}

src/features/extensions/panels/SourceMigrateModal.svelte

@@ -0,0 +1,448 @@
+<script lang="ts">
+  import { X, MagnifyingGlass, CircleNotch, ArrowRight, Check, Warning, Sparkle, Swap } from "phosphor-svelte";
+  import { gql }       from "@api/client";
+  import Thumbnail     from "@shared/manga/Thumbnail.svelte";
+  import { resolvedCover } from "@core/cover/coverResolver";
+  import { GET_SOURCES }            from "@api/queries/extensions";
+  import { UPDATE_MANGA }           from "@api/mutations/manga";
+  import { FETCH_SOURCE_MANGA }     from "@api/mutations/downloads";
+  import { FETCH_CHAPTERS, UPDATE_CHAPTERS_PROGRESS } from "@api/mutations/chapters";
+  import { store, addToast }        from "@store/state.svelte";
+  import type { Manga, Chapter, Source } from "@types";
+  import type { LibraryManga }          from "../lib/extensionLibrary";
+
+  interface Props {
+    sourceId:      string;
+    sourceName:    string;
+    sourceIconUrl: string;
+    manga:         LibraryManga[];
+    onClose:       () => void;
+    onDone:        () => void;
+  }
+  let { sourceId, sourceName, sourceIconUrl, manga, onClose, onDone }: Props = $props();
+
+  type Phase = "pick-target" | "review" | "migrating" | "done";
+
+  interface EntryResult {
+    manga:      LibraryManga;
+    match:      Manga | null;
+    chapters:   Chapter[];
+    similarity: number;
+    status:     "pending" | "searching" | "found" | "no-match" | "migrated" | "failed";
+    error?:     string;
+  }
+
+  function titleSimilarity(a: string, b: string): number {
+    const norm = (s: string) =>
+      s.toLowerCase().replace(/[^a-z0-9\s]/g, "").split(/\s+/).filter(Boolean);
+    const wordsA = new Set(norm(a));
+    const wordsB = new Set(norm(b));
+    if (wordsA.size === 0 || wordsB.size === 0) return 0;
+    const intersection = [...wordsA].filter(w => wordsB.has(w)).length;
+    return intersection / new Set([...wordsA, ...wordsB]).size;
+  }
+
+  function onKey(e: KeyboardEvent) { if (e.key === "Escape" && phase !== "migrating") onClose(); }
+
+  let phase: Phase              = $state("pick-target");
+  let allSources: Source[]      = $state([]);
+  let loadingSources            = $state(true);
+  let targetSource: Source | null = $state(null);
+  let selectedLang              = $state("all");
+  let langStripEl: HTMLDivElement | undefined = $state();
+
+  let entries: EntryResult[]    = $state([]);
+  let searchProgress            = $state({ done: 0, total: 0 });
+  let migrateProgress           = $state({ done: 0, total: 0, failed: 0 });
+
+  const availableLangs = $derived.by(() => {
+    const langs = Array.from(new Set<string>(allSources.map(s => s.lang))).sort();
+    const en = langs.indexOf("en");
+    if (en > 0) { langs.splice(en, 1); langs.unshift("en"); }
+    return langs;
+  });
+  const hasMultipleLangs = $derived(availableLangs.length > 1);
+  const visibleSources   = $derived.by(() => {
+    if (selectedLang !== "all") return allSources.filter(s => s.lang === selectedLang);
+    const map = new Map<string, Source>();
+    for (const s of allSources) {
+      const existing = map.get(s.name);
+      if (!existing || s.lang < existing.lang) map.set(s.name, s);
+    }
+    return Array.from(map.values());
+  });
+
+  const foundCount   = $derived(entries.filter(e => e.status === "found").length);
+  const noMatchCount = $derived(entries.filter(e => e.status === "no-match").length);
+  const migratedCount = $derived(entries.filter(e => e.status === "migrated").length);
+  const failedCount  = $derived(entries.filter(e => e.status === "failed").length);
+
+  $effect(() => {
+    gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
+      .then(d => {
+        allSources = d.sources.nodes.filter(s => s.id !== "0" && s.id !== sourceId);
+        const prefLang = store?.settings?.preferredExtensionLang ?? "";
+        const langs    = new Set(allSources.map(s => s.lang));
+        if (prefLang && langs.has(prefLang) && langs.size > 1) selectedLang = prefLang;
+      })
+      .catch(console.error)
+      .finally(() => { loadingSources = false; });
+
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  });
+
+  function scrollLangStrip(dir: -1 | 1) {
+    if (!langStripEl) return;
+    const chips   = Array.from(langStripEl.children) as HTMLElement[];
+    const viewEnd = langStripEl.scrollLeft + langStripEl.clientWidth;
+    if (dir === 1) {
+      const next = chips.find(c => c.offsetLeft + c.offsetWidth > viewEnd + 2);
+      if (next) langStripEl.scrollTo({ left: next.offsetLeft, behavior: "smooth" });
+    } else {
+      const prev = [...chips].reverse().find(c => c.offsetLeft < langStripEl!.scrollLeft - 2);
+      if (prev) langStripEl.scrollTo({ left: prev.offsetLeft + prev.offsetWidth - langStripEl.clientWidth, behavior: "smooth" });
+    }
+  }
+
+  async function startSearch(target: Source) {
+    targetSource = target;
+    phase = "review";
+    entries = manga.map(m => ({ manga: m, match: null, chapters: [], similarity: 0, status: "pending" }));
+    searchProgress = { done: 0, total: manga.length };
+
+    for (let i = 0; i < entries.length; i++) {
+      entries[i] = { ...entries[i], status: "searching" };
+      try {
+        const d = await gql<{ fetchSourceManga: { mangas: Manga[] } }>(FETCH_SOURCE_MANGA, {
+          source: target.id, type: "SEARCH", page: 1, query: entries[i].manga.title,
+        });
+        const results = d.fetchSourceManga.mangas
+          .map(m => ({ manga: m, similarity: titleSimilarity(entries[i].manga.title, m.title) }))
+          .sort((a, b) => b.similarity - a.similarity);
+
+        if (results.length > 0 && results[0].similarity > 0.3) {
+          entries[i] = { ...entries[i], match: results[0].manga, similarity: results[0].similarity, status: "found" };
+        } else {
+          entries[i] = { ...entries[i], status: "no-match" };
+        }
+      } catch (e: any) {
+        entries[i] = { ...entries[i], status: "no-match", error: e.message };
+      }
+      searchProgress = { done: i + 1, total: manga.length };
+    }
+  }
+
+  function setEntryMatch(idx: number, match: Manga, similarity: number) {
+    entries[idx] = { ...entries[idx], match, similarity, status: "found" };
+  }
+
+  function excludeEntry(idx: number) {
+    entries[idx] = { ...entries[idx], status: "no-match", match: null };
+  }
+
+  async function startMigration() {
+    const toMigrate = entries.filter(e => e.status === "found" && e.match);
+    migrateProgress = { done: 0, total: toMigrate.length, failed: 0 };
+    phase = "migrating";
+
+    for (const entry of toMigrate) {
+      const idx = entries.indexOf(entry);
+      try {
+        const d        = await gql<{ fetchChapters: { chapters: Chapter[] } }>(FETCH_CHAPTERS, { mangaId: entry.match!.id });
+        const newChaps = d.fetchChapters.chapters;
+
+        const toMarkRead:       number[] = [];
+        const toMarkBookmarked: number[] = [];
+
+        for (const nc of newChaps) {
+          const oldIdx = entries[idx].manga;
+          if (oldIdx) {
+            toMarkRead.push(nc.id);
+          }
+        }
+
+        if (toMarkRead.length)
+          await gql(UPDATE_CHAPTERS_PROGRESS, { ids: toMarkRead, isRead: true });
+
+        await gql(UPDATE_MANGA, { id: entry.match!.id,    inLibrary: true  });
+        await gql(UPDATE_MANGA, { id: entry.manga.id,     inLibrary: false });
+
+        entries[idx] = { ...entries[idx], status: "migrated" };
+        migrateProgress = { ...migrateProgress, done: migrateProgress.done + 1 };
+      } catch (e: any) {
+        entries[idx] = { ...entries[idx], status: "failed", error: e.message };
+        migrateProgress = { ...migrateProgress, done: migrateProgress.done + 1, failed: migrateProgress.failed + 1 };
+      }
+    }
+
+    phase = "done";
+    addToast({
+      kind: "success",
+      title: "Migration complete",
+      body: `${migrateProgress.done - migrateProgress.failed} migrated, ${migrateProgress.failed} failed`,
+    });
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+<div class="overlay" onclick={(e) => { if (e.target === e.currentTarget && phase !== "migrating") onClose(); }}>
+  <div class="modal">
+
+    <div class="modal-header">
+      <div class="source-context">
+        <div class="source-icon-wrap">
+          <Thumbnail src={sourceIconUrl} alt={sourceName} class="src-icon" onerror={(e) => (e.target as HTMLImageElement).style.display = "none"} />
+        </div>
+        <div class="source-context-info">
+          <span class="modal-eyebrow">Source migration</span>
+          <span class="modal-title">{sourceName}</span>
+          <span class="modal-sub">{manga.length} {manga.length === 1 ? "title" : "titles"} in library</span>
+        </div>
+      </div>
+      {#if phase !== "migrating"}
+        <button class="close-btn" onclick={onClose}><X size={14} weight="light" /></button>
+      {/if}
+    </div>
+
+    <div class="body">
+
+      {#if phase === "pick-target"}
+        <div class="phase-label-row">
+          <span class="phase-label">Select destination source</span>
+        </div>
+        {#if loadingSources}
+          <div class="centered"><CircleNotch size={16} weight="light" class="anim-spin" style="color:var(--text-faint)" /></div>
+        {:else if allSources.length === 0}
+          <div class="centered"><span class="hint">No other sources installed.</span></div>
+        {:else}
+          {#if hasMultipleLangs}
+            <div class="src-lang-bar">
+              <button class="src-lang-nav" onclick={() => scrollLangStrip(-1)}>‹</button>
+              <div class="src-lang-chips" bind:this={langStripEl}>
+                <button class="src-lang-chip" class:src-lang-chip-active={selectedLang === "all"} onclick={() => selectedLang = "all"}>All</button>
+                {#each availableLangs as lang}
+                  <button class="src-lang-chip" class:src-lang-chip-active={selectedLang === lang} onclick={() => selectedLang = lang}>
+                    {lang.toUpperCase()}
+                  </button>
+                {/each}
+              </div>
+              <button class="src-lang-nav" onclick={() => scrollLangStrip(1)}>›</button>
+            </div>
+          {/if}
+          <div class="source-list">
+            {#each visibleSources as src}
+              <button class="source-row" onclick={() => startSearch(src)}>
+                <div class="source-icon-wrap">
+                  <Thumbnail src={src.iconUrl} alt={src.name} class="source-icon" onerror={(e) => (e.target as HTMLImageElement).style.display = "none"} />
+                </div>
+                <div class="source-info">
+                  <span class="source-name">{src.displayName}</span>
+                  <span class="source-meta">{src.lang.toUpperCase()}{src.isNsfw ? " · NSFW" : ""}</span>
+                </div>
+                <ArrowRight size={13} weight="light" class="source-arrow" />
+              </button>
+            {/each}
+          </div>
+        {/if}
+
+      {:else if phase === "review" || phase === "migrating" || phase === "done"}
+        <div class="review-header">
+          <div class="review-route">
+            <div class="review-source">
+              <div class="source-icon-wrap small">
+                <Thumbnail src={sourceIconUrl} alt={sourceName} class="source-icon" onerror={(e) => (e.target as HTMLImageElement).style.display = "none"} />
+              </div>
+              <span class="review-source-name">{sourceName}</span>
+            </div>
+            <ArrowRight size={14} weight="light" style="color:var(--text-faint);flex-shrink:0" />
+            {#if targetSource}
+              <div class="review-source">
+                <div class="source-icon-wrap small">
+                  <Thumbnail src={targetSource.iconUrl} alt={targetSource.name} class="source-icon" onerror={(e) => (e.target as HTMLImageElement).style.display = "none"} />
+                </div>
+                <span class="review-source-name">{targetSource.displayName}</span>
+              </div>
+            {/if}
+          </div>
+
+          {#if phase === "review"}
+            <div class="review-progress-row">
+              <div class="review-progress-bar">
+                <div class="review-progress-fill" style="width:{searchProgress.total ? (searchProgress.done / searchProgress.total) * 100 : 0}%"></div>
+              </div>
+              <span class="review-progress-label">
+                {#if searchProgress.done < searchProgress.total}
+                  Searching {searchProgress.done + 1} / {searchProgress.total}…
+                {:else}
+                  {foundCount} found · {noMatchCount} no match
+                {/if}
+              </span>
+            </div>
+          {:else if phase === "migrating"}
+            <div class="review-progress-row">
+              <div class="review-progress-bar">
+                <div class="review-progress-fill" style="width:{migrateProgress.total ? (migrateProgress.done / migrateProgress.total) * 100 : 0}%"></div>
+              </div>
+              <span class="review-progress-label">Migrating {migrateProgress.done} / {migrateProgress.total}…</span>
+            </div>
+          {:else}
+            <div class="done-summary">
+              <Check size={13} weight="bold" style="color:var(--color-success)" />
+              <span class="done-label">{migratedCount} migrated{failedCount > 0 ? ` · ${failedCount} failed` : ""}</span>
+            </div>
+          {/if}
+        </div>
+
+        <div class="entry-list">
+          {#each entries as entry, idx}
+            <div class="entry-row" class:entry-migrated={entry.status === "migrated"} class:entry-failed={entry.status === "failed"}>
+              <div class="entry-cover-wrap">
+                <Thumbnail src={resolvedCover(entry.manga.id, entry.manga.thumbnailUrl)} alt={entry.manga.title} class="entry-cover" />
+              </div>
+
+              <div class="entry-info">
+                <span class="entry-title">{entry.manga.title}</span>
+                {#if entry.status === "found" && entry.match}
+                  <span class="entry-match">
+                    <Sparkle size={9} weight="fill" style="color:var(--accent-fg);flex-shrink:0" />
+                    {entry.match.title}
+                    <span class="entry-sim">{Math.round(entry.similarity * 100)}%</span>
+                  </span>
+                {:else if entry.status === "no-match"}
+                  <span class="entry-no-match">No match found</span>
+                {:else if entry.status === "searching"}
+                  <span class="entry-searching">Searching…</span>
+                {:else if entry.status === "migrated"}
+                  <span class="entry-done">Migrated</span>
+                {:else if entry.status === "failed"}
+                  <span class="entry-fail">{entry.error ?? "Failed"}</span>
+                {/if}
+              </div>
+
+              <div class="entry-status">
+                {#if entry.status === "searching"}
+                  <CircleNotch size={13} weight="light" class="anim-spin" style="color:var(--text-faint)" />
+                {:else if entry.status === "found"}
+                  <div class="entry-cover-match">
+                    <Thumbnail src={resolvedCover(entry.match!.id, entry.match!.thumbnailUrl)} alt={entry.match!.title} class="entry-match-cover" />
+                  </div>
+                  {#if phase === "review"}
+                    <button class="entry-exclude-btn" onclick={() => excludeEntry(idx)} title="Exclude from migration">
+                      <X size={10} weight="bold" />
+                    </button>
+                  {/if}
+                {:else if entry.status === "migrated"}
+                  <Check size={13} weight="bold" style="color:var(--color-success)" />
+                {:else if entry.status === "failed"}
+                  <Warning size={13} weight="light" style="color:var(--color-error)" />
+                {/if}
+              </div>
+            </div>
+          {/each}
+        </div>
+
+        {#if phase === "review" && searchProgress.done === searchProgress.total}
+          <div class="review-actions">
+            <button class="back-btn" onclick={() => { phase = "pick-target"; entries = []; }}>Change source</button>
+            <button class="migrate-btn" onclick={startMigration} disabled={foundCount === 0}>
+              <Swap size={13} weight="bold" />
+              Migrate {foundCount} {foundCount === 1 ? "title" : "titles"}
+            </button>
+          </div>
+        {/if}
+
+        {#if phase === "done"}
+          <div class="review-actions">
+            <button class="migrate-btn" onclick={onDone}><Check size={13} weight="bold" /> Done</button>
+          </div>
+        {/if}
+      {/if}
+
+    </div>
+  </div>
+</div>
+
+<style>
+  .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 200; animation: fadeIn 0.1s ease both; }
+  .modal { background: var(--bg-base); border: 1px solid var(--border-base); border-radius: var(--radius-xl); width: 560px; max-height: 84vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
+
+  .modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
+  .source-context { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
+  .source-icon-wrap { width: 36px; height: 36px; border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; background: var(--bg-raised); border: 1px solid var(--border-dim); }
+  .source-icon-wrap.small { width: 20px; height: 20px; border-radius: var(--radius-sm); }
+  :global(.src-icon) { width: 100%; height: 100%; object-fit: cover; }
+  :global(.source-icon) { width: 100%; height: 100%; object-fit: cover; }
+  .source-context-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+  .modal-eyebrow { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
+  .modal-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-primary); letter-spacing: var(--tracking-tight); }
+  .modal-sub { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .close-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; cursor: pointer; transition: color var(--t-base), background var(--t-base); flex-shrink: 0; margin-top: 2px; }
+  .close-btn:hover { color: var(--text-muted); background: var(--bg-raised); }
+
+  .body { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
+
+  .phase-label-row { padding: var(--sp-3) var(--sp-4) var(--sp-2); flex-shrink: 0; }
+  .phase-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-widest); text-transform: uppercase; }
+  .centered { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--sp-8); }
+  .hint { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+
+  .src-lang-bar { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
+  .src-lang-nav { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); font-size: 15px; line-height: 1; cursor: pointer; transition: color var(--t-base), background var(--t-base); }
+  .src-lang-nav:hover { color: var(--text-muted); background: var(--bg-raised); }
+  .src-lang-chips { display: flex; align-items: center; gap: var(--sp-1); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+  .src-lang-chips::-webkit-scrollbar { display: none; }
+  .src-lang-chip { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
+  .src-lang-chip:hover { color: var(--text-muted); background: var(--bg-raised); }
+  .src-lang-chip-active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
+
+  .source-list { flex: 1; overflow-y: auto; padding: var(--sp-2); display: flex; flex-direction: column; gap: 1px; }
+  .source-row { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 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); }
+  .source-row:hover { background: var(--bg-raised); border-color: var(--border-dim); }
+  .source-info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
+  .source-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .source-meta { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  :global(.source-arrow) { color: var(--text-faint); opacity: 0; transition: opacity var(--t-base); flex-shrink: 0; }
+  .source-row:hover :global(.source-arrow) { opacity: 1; }
+
+  .review-header { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
+  .review-route { display: flex; align-items: center; gap: var(--sp-2); }
+  .review-source { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
+  .review-source-name { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--weight-medium); }
+  .review-progress-row { display: flex; align-items: center; gap: var(--sp-3); }
+  .review-progress-bar { flex: 1; height: 3px; background: var(--bg-overlay); border-radius: var(--radius-full); overflow: hidden; }
+  .review-progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width 0.3s ease; }
+  .review-progress-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); white-space: nowrap; flex-shrink: 0; }
+  .done-summary { display: flex; align-items: center; gap: var(--sp-2); }
+  .done-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-secondary); letter-spacing: var(--tracking-wide); }
+
+  .entry-list { flex: 1; overflow-y: auto; padding: var(--sp-2); display: flex; flex-direction: column; gap: 1px; }
+  .entry-row { display: flex; align-items: center; gap: var(--sp-3); padding: 7px var(--sp-3); border-radius: var(--radius-md); border: 1px solid transparent; transition: background var(--t-fast); }
+  .entry-row:hover { background: var(--bg-raised); }
+  .entry-migrated { opacity: 0.5; }
+  .entry-failed { border-color: rgba(180,60,60,0.15); background: rgba(180,60,60,0.04); }
+  .entry-cover-wrap { width: 28px; height: 42px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border-dim); flex-shrink: 0; }
+  :global(.entry-cover) { width: 100%; height: 100%; object-fit: cover; }
+  .entry-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
+  .entry-title { font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .entry-match { display: flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .entry-sim { background: var(--bg-overlay); border: 1px solid var(--border-dim); border-radius: var(--radius-sm); padding: 0 4px; font-size: 9px; flex-shrink: 0; }
+  .entry-no-match { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .entry-searching { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .entry-done { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--color-success); letter-spacing: var(--tracking-wide); }
+  .entry-fail { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--color-error); letter-spacing: var(--tracking-wide); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .entry-status { display: flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
+  .entry-cover-match { width: 24px; height: 36px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border-dim); flex-shrink: 0; }
+  :global(.entry-match-cover) { width: 100%; height: 100%; object-fit: cover; }
+  .entry-exclude-btn { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-sm); color: var(--text-faint); background: none; border: none; cursor: pointer; transition: color var(--t-base), background var(--t-base); flex-shrink: 0; }
+  .entry-exclude-btn:hover { color: var(--color-error); background: var(--bg-raised); }
+
+  .review-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border-dim); flex-shrink: 0; }
+  .back-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 6px 10px; border-radius: var(--radius-md); background: none; color: var(--text-muted); border: 1px solid var(--border-dim); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
+  .back-btn:hover { color: var(--text-secondary); border-color: var(--border-strong); background: var(--bg-raised); }
+  .migrate-btn { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 7px 16px; border-radius: var(--radius-md); background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent-fg); cursor: pointer; transition: background var(--t-base), border-color var(--t-base); }
+  .migrate-btn:hover:not(:disabled) { background: var(--accent-muted); border-color: var(--accent-bright); }
+  .migrate-btn:disabled { opacity: 0.4; cursor: default; }
+
+  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
+</style>

src/features/series/panels/MigrateModal.svelte

@@ -3,13 +3,13 @@
   import { untrack } from "svelte";
   import { gql }     from "@api/client";
   import Thumbnail   from "@shared/manga/Thumbnail.svelte";
+  import { resolvedCover } from "@core/cover/coverResolver";
   import { GET_SOURCES }           from "@api/queries/extensions";
   import { UPDATE_MANGA }          from "@api/mutations/manga";
   import { FETCH_SOURCE_MANGA }    from "@api/mutations/downloads";
   import { FETCH_CHAPTERS, UPDATE_CHAPTERS_PROGRESS } from "@api/mutations/chapters";
   import { store }              from "@store/state.svelte";
-  import type { Manga, Chapter } from "@types";
+  import type { Manga, Chapter, Source } from "@types";
-  import type { Source }         from "@types";
 
   interface Props {
     manga:           Manga;
@@ -20,6 +20,7 @@
   let { manga, currentChapters, onClose, onMigrated }: Props = $props();
 
   type Step = "source" | "search" | "confirm";
+  const STEPS = ["source", "search", "confirm"] as const satisfies Step[];
 
   interface Match {
     manga:      Manga;
@@ -39,16 +40,15 @@
   }
 
   function onKey(e: KeyboardEvent) { if (e.key === "Escape") onClose(); }
-  function focusOnMount(node: HTMLElement) { node.focus(); }
 
   let step: Step                    = $state("source");
   let sources: Source[]             = $state([]);
   let loadingSources                = $state(true);
   let selectedSource: Source | null = $state(null);
-
+  let selectedLang                  = $state("all");
-  let selectedLang: string                    = $state("all");
   let langStripEl: HTMLDivElement | undefined = $state();
 
+  const stepIdx        = $derived(STEPS.indexOf(step));
   const availableLangs = $derived.by(() => {
     const langs = Array.from(new Set<string>(sources.map(s => s.lang))).sort();
     const en = langs.indexOf("en");
@@ -56,20 +56,6 @@
     return langs;
   });
   const hasMultipleLangs = $derived(availableLangs.length > 1);
-
-  function scrollLangStrip(dir: -1 | 1) {
-    if (!langStripEl) return;
-    const chips    = Array.from(langStripEl.children) as HTMLElement[];
-    const viewEnd  = langStripEl.scrollLeft + langStripEl.clientWidth;
-    if (dir === 1) {
-      const next = chips.find(c => c.offsetLeft + c.offsetWidth > viewEnd + 2);
-      if (next) langStripEl.scrollTo({ left: next.offsetLeft, behavior: "smooth" });
-    } else {
-      const prev = [...chips].reverse().find(c => c.offsetLeft < langStripEl!.scrollLeft - 2);
-      if (prev) langStripEl.scrollTo({ left: prev.offsetLeft + prev.offsetWidth - langStripEl.clientWidth, behavior: "smooth" });
-    }
-  }
-
   const visibleSources   = $derived.by(() => {
     if (selectedLang !== "all") return sources.filter(s => s.lang === selectedLang);
     const map = new Map<string, Source>();
@@ -91,8 +77,19 @@
   const readCount   = $derived(currentChapters.filter(c => c.isRead).length);
   const totalCount  = $derived(currentChapters.length);
   const chapterDiff = $derived(selectedMatch ? selectedMatch.chapters.length - totalCount : 0);
-  const STEPS       = ["source", "search", "confirm"] as const satisfies Step[];
+
-  const stepIdx     = $derived(STEPS.indexOf(step));
+  function scrollLangStrip(dir: -1 | 1) {
+    if (!langStripEl) return;
+    const chips   = Array.from(langStripEl.children) as HTMLElement[];
+    const viewEnd = langStripEl.scrollLeft + langStripEl.clientWidth;
+    if (dir === 1) {
+      const next = chips.find(c => c.offsetLeft + c.offsetWidth > viewEnd + 2);
+      if (next) langStripEl.scrollTo({ left: next.offsetLeft, behavior: "smooth" });
+    } else {
+      const prev = [...chips].reverse().find(c => c.offsetLeft < langStripEl!.scrollLeft - 2);
+      if (prev) langStripEl.scrollTo({ left: prev.offsetLeft + prev.offsetWidth - langStripEl.clientWidth, behavior: "smooth" });
+    }
+  }
 
   $effect(() => {
     gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
@@ -171,10 +168,8 @@
           progressUpdates.push({ id: nc.id, lastPageRead: old.lastPageRead! });
       }
 
-      if (toMarkRead.length)
+      if (toMarkRead.length)       await gql(UPDATE_CHAPTERS_PROGRESS, { ids: toMarkRead,       isRead:       true });
-        await gql(UPDATE_CHAPTERS_PROGRESS, { ids: toMarkRead, isRead: true });
+      if (toMarkBookmarked.length) await gql(UPDATE_CHAPTERS_PROGRESS, { ids: toMarkBookmarked, isBookmarked: true });
-      if (toMarkBookmarked.length)
-        await gql(UPDATE_CHAPTERS_PROGRESS, { ids: toMarkBookmarked, isBookmarked: true });
       for (const { id, lastPageRead } of progressUpdates)
         await gql(UPDATE_CHAPTERS_PROGRESS, { ids: [id], lastPageRead });
 
@@ -189,15 +184,22 @@
   }
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div class="overlay" onclick={(e) => { if (e.target === e.currentTarget) onClose(); }}>
   <div class="modal">
 
     <div class="modal-header">
-      <div class="modal-title">
+      <div class="manga-context">
-        <span class="modal-title-label">Migrate source</span>
+        <div class="manga-context-cover">
-        <span class="modal-title-manga">{manga.title}</span>
+          <Thumbnail src={resolvedCover(manga.id, manga.thumbnailUrl)} alt={manga.title} class="ctx-cover" />
+        </div>
+        <div class="manga-context-info">
+          <span class="modal-eyebrow">Migrate source</span>
+          <span class="modal-title">{manga.title}</span>
+          {#if manga.source?.displayName}
+            <span class="modal-source">{manga.source.displayName}</span>
+          {/if}
+        </div>
       </div>
       <button class="close-btn" onclick={onClose}><X size={14} weight="light" /></button>
     </div>
@@ -209,7 +211,7 @@
             {#if i < stepIdx}<Check size={9} weight="bold" />{:else}{i + 1}{/if}
           </span>
           <span class="step-label">
-            {st === "source" ? "Pick source" : st === "search" ? (selectedSource ? selectedSource.displayName : "Search") : "Confirm"}
+            {st === "source" ? "Pick source" : st === "search" ? (selectedSource?.displayName ?? "Search") : "Confirm"}
           </span>
         </div>
       {/each}
@@ -241,11 +243,10 @@
           {/if}
           <div class="source-list">
             {#each visibleSources as src}
-              <button
+              <button class="source-row" class:source-row-active={selectedSource?.id === src.id} onclick={() => pickSource(src)}>
-                class="source-row"
+                <div class="source-icon-wrap">
-                class:source-row-active={selectedSource?.id === src.id}
-                onclick={() => pickSource(src)}>
                   <Thumbnail src={src.iconUrl} alt={src.name} class="source-icon" onerror={(e) => (e.target as HTMLImageElement).style.display = "none"} />
+                </div>
                 <div class="source-info">
                   <span class="source-name">{src.displayName}</span>
                   <span class="source-meta">{src.lang.toUpperCase()}{src.isNsfw ? " · NSFW" : ""}</span>
@@ -260,7 +261,9 @@
         <div class="search-step">
           {#if selectedSource}
             <div class="search-context">
-              <Thumbnail src={selectedSource.iconUrl} alt="" class="search-context-icon" onerror={(e) => (e.target as HTMLImageElement).style.display = "none"} />
+              <div class="source-icon-wrap" style="width:20px;height:20px;border-radius:var(--radius-sm)">
+                <Thumbnail src={selectedSource.iconUrl} alt={selectedSource.name} class="search-context-icon" onerror={(e) => (e.target as HTMLImageElement).style.display = "none"} />
+              </div>
               <span class="search-context-name">{selectedSource.displayName}</span>
               <button class="search-context-change" onclick={() => { step = "source"; results = []; }}>Change</button>
             </div>
@@ -274,7 +277,7 @@
                 bind:value={query}
                 onkeydown={(e) => e.key === "Enter" && selectedSource && searchSource(selectedSource, query)}
                 placeholder="Search title…"
-                use:focusOnMount />
+                autofocus />
             </div>
             <button class="search-btn"
               onclick={() => selectedSource && searchSource(selectedSource, query)}
@@ -291,22 +294,20 @@
 
           <div class="results">
             {#if searching}
-              {#each Array(6) as _}
+              {#each Array(5) as _}
                 <div class="sk-result">
                   <div class="skeleton sk-cover"></div>
                   <div class="sk-meta">
-                    <div class="skeleton sk-title"></div>
+                    <div class="skeleton sk-line" style="width:60%"></div>
-                    <div class="skeleton sk-title" style="width:40%"></div>
+                    <div class="skeleton sk-line" style="width:35%"></div>
                   </div>
                 </div>
               {/each}
             {:else}
               {#each results as { manga: m, similarity }, idx}
-                <button class="result-row"
+                <button class="result-row" onclick={() => selectMatch(m, similarity)} disabled={loadingMatchId !== null}>
-                  onclick={() => selectMatch(m, similarity)}
-                  disabled={loadingMatchId !== null}>
                   <div class="result-cover-wrap">
-                    <Thumbnail src={m.thumbnailUrl} alt={m.title} class="result-cover" />
+                    <Thumbnail src={resolvedCover(m.id, m.thumbnailUrl)} alt={m.title} class="result-cover" />
                   </div>
                   <div class="result-info">
                     <span class="result-title">{m.title}</span>
@@ -315,17 +316,17 @@
                         <span class="best-match-badge"><Sparkle size={9} weight="fill" /> Best match</span>
                       {/if}
                       <span class="sim-bar"><span class="sim-fill" style="width:{Math.round(similarity * 100)}%"></span></span>
-                      <span class="sim-label">{Math.round(similarity * 100)}% match</span>
+                      <span class="sim-label">{Math.round(similarity * 100)}%</span>
                     </div>
                   </div>
                   {#if loadingMatchId === m.id}
                     <CircleNotch size={13} weight="light" class="anim-spin" style="color:var(--text-faint);flex-shrink:0" />
                   {:else}
-                    <ArrowRight size={13} weight="light" style="color:var(--text-faint);flex-shrink:0;opacity:0.5" />
+                    <ArrowRight size={13} weight="light" style="color:var(--text-faint);flex-shrink:0;opacity:0.4" />
                   {/if}
                 </button>
               {/each}
-              {#if results.length === 0 && !error}
+              {#if results.length === 0 && !error && !searching}
                 <div class="centered">
                   <span class="hint">{query ? "No results — try a different title." : "Enter a title to search."}</span>
                 </div>
@@ -339,18 +340,18 @@
           <div class="confirm-row">
             <div class="confirm-manga">
               <div class="confirm-cover-wrap">
-                <Thumbnail src={manga.thumbnailUrl} alt={manga.title} class="confirm-cover" />
+                <Thumbnail src={resolvedCover(manga.id, manga.thumbnailUrl)} alt={manga.title} class="confirm-cover" />
               </div>
               <p class="confirm-title">{manga.title}</p>
               <p class="confirm-source">{manga.source?.displayName ?? "Unknown"}</p>
               <span class="confirm-tag">Current</span>
             </div>
-            <div class="confirm-divider">
+            <div class="confirm-arrow-wrap">
-              <ArrowRight size={16} weight="light" class="confirm-arrow" />
+              <ArrowRight size={18} weight="light" style="color:var(--text-faint)" />
             </div>
             <div class="confirm-manga">
               <div class="confirm-cover-wrap">
-                <Thumbnail src={selectedMatch.manga.thumbnailUrl} alt={selectedMatch.manga.title} class="confirm-cover" />
+                <Thumbnail src={resolvedCover(selectedMatch.manga.id, selectedMatch.manga.thumbnailUrl)} alt={selectedMatch.manga.title} class="confirm-cover" />
               </div>
               <p class="confirm-title">{selectedMatch.manga.title}</p>
               <p class="confirm-source">{selectedSource?.displayName ?? "Unknown"}</p>
@@ -378,8 +379,8 @@
               </span>
             </div>
             <div class="stat-row">
-              <span class="stat-label">Read progress to carry over</span>
+              <span class="stat-label">Read progress to carry</span>
-              <span class="stat-val">{selectedMatch.readCount} / {readCount} chapters</span>
+              <span class="stat-val">{selectedMatch.readCount} / {readCount}</span>
             </div>
           </div>
 
@@ -413,54 +414,60 @@
 
 <style>
   .overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 200; animation: fadeIn 0.1s ease both; }
-  .modal { background: var(--bg-base); border: 1px solid var(--border-base); border-radius: var(--radius-xl); width: 520px; max-height: 80vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
+  .modal { background: var(--bg-base); border: 1px solid var(--border-base); border-radius: var(--radius-xl); width: 520px; max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
-  .modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
+
-  .modal-title { display: flex; flex-direction: column; gap: 2px; }
+  .modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
-  .modal-title-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
+  .manga-context { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
-  .modal-title-manga { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-primary); letter-spacing: var(--tracking-tight); }
+  .manga-context-cover { width: 36px; height: 54px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; background: var(--bg-raised); border: 1px solid var(--border-dim); }
-  .close-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; cursor: pointer; transition: color var(--t-base), background var(--t-base); flex-shrink: 0; }
+  :global(.ctx-cover) { width: 100%; height: 100%; object-fit: cover; }
+  .manga-context-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+  .modal-eyebrow { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
+  .modal-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-primary); letter-spacing: var(--tracking-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .modal-source { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
+  .close-btn { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; cursor: pointer; transition: color var(--t-base), background var(--t-base); flex-shrink: 0; margin-top: 2px; }
   .close-btn:hover { color: var(--text-muted); background: var(--bg-raised); }
 
   .steps { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
-  .step { display: flex; align-items: center; gap: var(--sp-2); opacity: 0.4; transition: opacity var(--t-base); }
+  .step { display: flex; align-items: center; gap: var(--sp-2); opacity: 0.35; transition: opacity var(--t-base); }
-  .step + .step::before { content: "›"; color: var(--text-faint); margin-right: var(--sp-1); font-size: var(--text-sm); }
+  .step + .step::before { content: "›"; color: var(--text-faint); margin-right: var(--sp-1); font-size: var(--text-sm); opacity: 0.5; }
   .step-active { opacity: 1; }
-  .step-done   { opacity: 0.6; }
+  .step-done   { opacity: 0.55; }
   .step-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--bg-raised); border: 1px solid var(--border-base); display: flex; align-items: center; justify-content: center; font-family: var(--font-ui); font-size: 10px; color: var(--text-faint); flex-shrink: 0; }
   .step-active .step-dot { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
   .step-label { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--text-muted); }
   .step-active .step-label { color: var(--text-secondary); }
 
-  .body { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
+  .body { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
   .centered { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--sp-8); }
   .hint { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
 
+  .src-lang-bar { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
+  .src-lang-nav { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); font-size: 15px; line-height: 1; cursor: pointer; transition: color var(--t-base), background var(--t-base); }
+  .src-lang-nav:hover { color: var(--text-muted); background: var(--bg-raised); }
+  .src-lang-chips { display: flex; align-items: center; gap: var(--sp-1); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
+  .src-lang-chips::-webkit-scrollbar { display: none; }
+  .src-lang-chip { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
+  .src-lang-chip:hover { color: var(--text-muted); background: var(--bg-raised); }
+  .src-lang-chip-active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
+
   .source-list { flex: 1; overflow-y: auto; padding: var(--sp-2); display: flex; flex-direction: column; gap: 1px; }
-  .source-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); }
+  .source-row { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 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); }
   .source-row:hover { background: var(--bg-raised); border-color: var(--border-dim); }
   .source-row-active { background: var(--accent-muted); border-color: var(--accent-dim); }
-  :global(.source-icon) { width: 28px; height: 28px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; background: var(--bg-raised); }
+  .source-icon-wrap { width: 28px; height: 28px; border-radius: var(--radius-md); overflow: hidden; flex-shrink: 0; background: var(--bg-raised); }
+  :global(.source-icon) { width: 100%; height: 100%; object-fit: cover; }
   .source-info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
   .source-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .source-meta { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
-  :global(.source-arrow) { color: var(--text-faint); opacity: 0; transition: opacity var(--t-base); }
+  :global(.source-arrow) { color: var(--text-faint); opacity: 0; transition: opacity var(--t-base); flex-shrink: 0; }
   .source-row:hover :global(.source-arrow) { opacity: 1; }
 
-  .src-lang-bar { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
-  .src-lang-nav { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); font-size: 15px; line-height: 1; cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
-  .src-lang-nav:hover { color: var(--text-muted); border-color: var(--border-strong); background: var(--bg-raised); }
-  .src-lang-chips { display: flex; align-items: center; gap: var(--sp-1); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
-  .src-lang-chips::-webkit-scrollbar { display: none; }
-  .src-lang-chip { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); padding: 3px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
-  .src-lang-chip:hover { color: var(--text-muted); border-color: var(--border-strong); background: var(--bg-raised); }
-  .src-lang-chip-active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
-
   .search-step { flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
-  .search-context { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); flex-shrink: 0; }
+  .search-context { display: flex; align-items: center; gap: var(--sp-2); padding: 6px var(--sp-3); background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); flex-shrink: 0; }
-  :global(.search-context-icon) { width: 18px; height: 18px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
+  :global(.search-context-icon) { width: 100%; height: 100%; object-fit: cover; }
   .search-context-name { flex: 1; font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-  .search-context-change { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--accent-fg); background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; transition: opacity var(--t-base); }
+  .search-context-change { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--accent-fg); background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; opacity: 0.8; transition: opacity var(--t-base); }
-  .search-context-change:hover { opacity: 0.75; }
+  .search-context-change:hover { opacity: 1; }
   .search-row { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
   .search-bar { flex: 1; display: flex; align-items: center; gap: var(--sp-2); background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 0 var(--sp-3) 0 var(--sp-2); transition: border-color var(--t-base); }
   .search-bar:focus-within { border-color: var(--border-strong); }
@@ -470,8 +477,9 @@
   .search-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 6px 12px; border-radius: var(--radius-md); background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); cursor: pointer; flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-1); transition: filter var(--t-base); }
   .search-btn:hover:not(:disabled) { filter: brightness(1.1); }
   .search-btn:disabled { opacity: 0.4; cursor: default; }
+
   .results { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
-  .result-row { display: flex; align-items: center; gap: var(--sp-3); padding: 7px var(--sp-2); border-radius: var(--radius-md); border: none; background: none; text-align: left; width: 100%; cursor: pointer; transition: background var(--t-fast); }
+  .result-row { display: flex; align-items: center; gap: var(--sp-3); padding: 6px var(--sp-2); border-radius: var(--radius-md); border: none; background: none; text-align: left; width: 100%; cursor: pointer; transition: background var(--t-fast); }
   .result-row:hover:not(:disabled) { background: var(--bg-raised); }
   .result-row:disabled { opacity: 0.5; cursor: default; }
   .result-cover-wrap { width: 36px; height: 54px; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border-dim); flex-shrink: 0; }
@@ -480,26 +488,26 @@
   .result-title { font-size: var(--text-sm); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .result-meta { display: flex; align-items: center; gap: var(--sp-2); }
   .best-match-badge { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-ui); font-size: 9px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-fg); background: var(--accent-muted); border: 1px solid var(--accent-dim); padding: 1px 5px; border-radius: var(--radius-sm); flex-shrink: 0; }
-  .sim-bar { width: 48px; height: 3px; background: var(--bg-overlay); border-radius: var(--radius-full); overflow: hidden; flex-shrink: 0; display: inline-block; }
+  .sim-bar { width: 40px; height: 3px; background: var(--bg-overlay); border-radius: var(--radius-full); overflow: hidden; flex-shrink: 0; }
-  .sim-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width 0.2s ease; }
+  .sim-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-full); }
   .sim-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); white-space: nowrap; }
 
-  .sk-result { display: flex; align-items: center; gap: var(--sp-3); padding: 7px var(--sp-2); }
+  .sk-result { display: flex; align-items: center; gap: var(--sp-3); padding: 6px var(--sp-2); }
   .sk-cover  { width: 36px; height: 54px; border-radius: var(--radius-sm); flex-shrink: 0; }
   .sk-meta   { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }
-  .sk-title { height: 13px; width: 65%; border-radius: var(--radius-sm); }
+  .sk-line   { height: 12px; border-radius: var(--radius-sm); }
 
   .confirm-step { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); }
-  .confirm-row { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); }
+  .confirm-row { display: flex; align-items: flex-start; justify-content: center; gap: var(--sp-3); }
-  .confirm-manga { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); flex: 1; max-width: 160px; }
+  .confirm-manga { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); flex: 1; max-width: 150px; }
   .confirm-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); }
   :global(.confirm-cover) { width: 100%; height: 100%; object-fit: cover; }
   .confirm-title { font-size: var(--text-xs); color: var(--text-secondary); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: var(--leading-snug); }
   .confirm-source { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); text-align: center; }
-  .confirm-divider { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
-  :global(.confirm-arrow) { color: var(--text-faint); }
   .confirm-tag { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-full); background: var(--bg-raised); border: 1px solid var(--border-dim); color: var(--text-faint); }
   .confirm-tag-new { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
+  .confirm-arrow-wrap { display: flex; align-items: center; padding-top: 48px; flex-shrink: 0; }
+
   .confirm-stats { display: flex; flex-direction: column; gap: var(--sp-2); background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: var(--sp-3) var(--sp-4); }
   .stat-row { display: flex; justify-content: space-between; align-items: center; }
   .stat-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); }
@@ -508,17 +516,18 @@
   .stat-warn { color: #d97706 !important; }
   .stat-bad  { color: var(--color-error)   !important; }
   .chapter-diff { font-family: var(--font-ui); font-size: var(--text-2xs); color: #d97706; letter-spacing: var(--tracking-wide); margin-left: var(--sp-2); }
-  .warn-box { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: rgba(217,119,6,0.08); border: 1px solid rgba(217,119,6,0.25); border-radius: var(--radius-md); font-size: var(--text-xs); color: #d97706; line-height: var(--leading-snug); }
+
+  .warn-box { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: rgba(217,119,6,0.08); border: 1px solid rgba(217,119,6,0.25); border-radius: var(--radius-md); font-size: var(--text-xs); color: #d97706; line-height: var(--leading-snug); flex-shrink: 0; }
   .confirm-note { font-size: var(--text-xs); color: var(--text-faint); line-height: var(--leading-base); }
-  .confirm-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-shrink: 0; }
+  .confirm-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-shrink: 0; margin-top: auto; }
-  .back-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 6px 10px; border-radius: var(--radius-md); background: none; color: var(--text-muted); border: 1px solid var(--border-dim); cursor: pointer; flex-shrink: 0; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
+  .back-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 6px 10px; border-radius: var(--radius-md); background: none; color: var(--text-muted); border: 1px solid var(--border-dim); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
   .back-btn:hover:not(:disabled) { color: var(--text-secondary); border-color: var(--border-strong); background: var(--bg-raised); }
   .back-btn:disabled { opacity: 0.4; cursor: default; }
   .migrate-btn { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 7px 16px; border-radius: var(--radius-md); background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent-fg); cursor: pointer; transition: background var(--t-base), border-color var(--t-base); }
   .migrate-btn:hover:not(:disabled) { background: var(--accent-muted); border-color: var(--accent-bright); }
   .migrate-btn:disabled { opacity: 0.5; cursor: default; }
 
-  .error { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--color-error); padding: var(--sp-2) var(--sp-3); background: rgba(180,60,60,0.08); border-radius: var(--radius-md); border: 1px solid rgba(180,60,60,0.2); }
+  .error { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); color: var(--color-error); padding: var(--sp-2) var(--sp-3); background: rgba(180,60,60,0.08); border-radius: var(--radius-md); border: 1px solid rgba(180,60,60,0.2); flex-shrink: 0; }
 
   @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
 </style>