From 248b046627a22f3cbf3d9e545ee8815789ed472f Mon Sep 17 00:00:00 2001
From: Youwes09 <yuvi.shen@outlook.com>
Date: Sun, 7 Jun 2026 15:40:18 -0500
Subject: [PATCH] Fix: Home-Screen Recommendations & GQL Cleanup P.2

---
 .../components/browse/GenreDrillPage.svelte   |  2 +-
 src/lib/components/browse/KeywordTab.svelte   | 51 +++++++++++--------
 src/lib/components/browse/SourceTab.svelte    |  2 +-
 src/lib/components/browse/TagTab.svelte       |  2 +-
 .../components/extensions/Extensions.svelte   | 19 +++----
 .../panels/ExtensionSettingsPanel.svelte      | 31 ++---------
 .../components/home/lib/recommendations.ts    | 41 ++++++++-------
 src/lib/components/library/LibraryGrid.svelte | 18 ++-----
 .../components/reader/ReaderOverlay.svelte    | 29 ++---------
 src/lib/components/series/SeriesHeader.svelte |  2 +-
 .../components/shared/manga/Thumbnail.svelte  | 22 +++++---
 src/lib/server-adapters/suwayomi/index.ts     | 35 +++++++++++++
 src/lib/server-adapters/suwayomi/manga.ts     |  2 +-
 src/lib/server-adapters/types.ts              |  4 ++
 14 files changed, 129 insertions(+), 131 deletions(-)

diff --git a/src/lib/components/browse/GenreDrillPage.svelte b/src/lib/components/browse/GenreDrillPage.svelte
index d81870e..2afe8b4 100644
--- a/src/lib/components/browse/GenreDrillPage.svelte
+++ b/src/lib/components/browse/GenreDrillPage.svelte
@@ -204,7 +204,7 @@
       {#each visibleItems as m, i (m.id)}
         <button class="card" onclick={() => setPreviewManga(m)} oncontextmenu={(e) => { e.stopPropagation(); openCtx(e, m); }}>
           <div class="cover-wrap">
-            <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={i < 12 ? 12 - i : 0} />
+            <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={i < 12 ? 12 - i : 0} id={m.id} />
             {#if m.inLibrary}<span class="in-library-badge">Saved</span>{/if}
           </div>
           <p class="card-title">{m.title}</p>
diff --git a/src/lib/components/browse/KeywordTab.svelte b/src/lib/components/browse/KeywordTab.svelte
index c85aeee..b5678a9 100644
--- a/src/lib/components/browse/KeywordTab.svelte
+++ b/src/lib/components/browse/KeywordTab.svelte
@@ -37,6 +37,8 @@
   let kw_inputEl:       HTMLInputElement | null = $state(null);
   let kw_abortCtrl:     AbortController | null = null;
   let kw_debounceTimer: ReturnType<typeof setTimeout> | null = null;
+  let kw_localQuery     = $state(query);
+  let kw_pending        = $state(false);
 
   interface SourceResult {
     source:  Source;
@@ -57,18 +59,23 @@
     if (!loadingSources && pendingPrefill && allSources.length) {
       const q = pendingPrefill;
       onPrefillConsumed();
+      kw_localQuery = q;
       onQueryChange(q);
       kwDoSearch(q);
     }
   });
 
-  $effect(() => {
-    const q = query;
+  function kwHandleInput(value: string) {
+    kw_localQuery = value;
     if (kw_debounceTimer) clearTimeout(kw_debounceTimer);
-    if (!q.trim()) { kw_abortCtrl?.abort(); kw_results = []; return; }
-    kw_debounceTimer = setTimeout(() => kwDoSearch(q), 350);
-    return () => { if (kw_debounceTimer) clearTimeout(kw_debounceTimer); };
-  });
+    if (!value.trim()) { kw_abortCtrl?.abort(); kw_results = []; kw_pending = false; onQueryChange(""); return; }
+    kw_pending = true;
+    kw_debounceTimer = setTimeout(() => {
+      kw_pending = false;
+      onQueryChange(value);
+      kwDoSearch(value);
+    }, 2000);
+  }
 
   function kwGetVisibleSources(): Source[] {
     let srcs = allSources;
@@ -142,18 +149,17 @@
     </svg>
     <input
       bind:this={kw_inputEl}
-      value={query}
-      oninput={(e) => onQueryChange((e.target as HTMLInputElement).value)}
+      value={kw_localQuery}
+      oninput={(e) => kwHandleInput((e.target as HTMLInputElement).value)}
       class="searchInput"
       placeholder="Search across sources…"
-      use:focusOnMount
     />
-    {#if kw_anyLoading}
+    {#if kw_pending || kw_anyLoading}
       <svg width="13" height="13" viewBox="0 0 256 256" fill="currentColor" class="anim-spin" style="color:var(--text-faint);flex-shrink:0" aria-hidden="true">
         <path d="M232,128a104,104,0,0,1-208,0c0-41,23.81-78.36,60.66-95.27a8,8,0,0,1,6.68,14.54C60.15,61.59,40,93.27,40,128a88,88,0,0,0,176,0c0-34.73-20.15-66.41-51.34-80.73a8,8,0,0,1,6.68-14.54C208.19,49.64,232,87,232,128Z"/>
       </svg>
-    {:else if query}
-      <button class="clearBtn" title="Clear" onclick={() => { onQueryChange(""); kw_results = []; kw_inputEl?.focus(); }}>×</button>
+    {:else if kw_localQuery}
+      <button class="clearBtn" title="Clear" onclick={() => { kwHandleInput(""); kw_inputEl?.focus(); }}>×</button>
     {/if}
     {#if hasMultipleLangs}
       <button
@@ -193,7 +199,7 @@
   {/if}
 </div>
 
-{#if !query.trim()}
+{#if !kw_localQuery.trim()}
   {#if popularLoading && popularResults.length === 0}
     <div class="searchGrid">
       {#each Array(24) as _, i (i)}<div class="skCard"><div class="skeleton skCover"></div></div>{/each}
@@ -206,7 +212,7 @@
       {#each popularResults as m (m.id)}
         <button class="srchCard" onclick={() => onPreview(m)}>
           <div class="srchCoverWrap">
-            <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={m._priority} />
+            <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={m._priority} id={m.id} />
             <div class="srchGradient"></div>
             {#if m.inLibrary}<span class="inLibBadge">Saved</span>{/if}
             <div class="srchFooter">
@@ -235,16 +241,20 @@
       </p>
     </div>
   {/if}
+{:else if kw_pending}
+  <div class="searchGrid">
+    {#each Array(12) as _, i (i)}<div class="skCard"><div class="skeleton skCover"></div></div>{/each}
+  </div>
 {:else}
   {#if kw_flatResults.length > 0}
     <div class="searchHeader">
-      <span class="searchLabel">{kw_flatResults.length} result{kw_flatResults.length !== 1 ? "s" : ""}</span>
+      <span class="searchLabel">{kw_flatResults.length} result{kw_flatResults.length !== 1 ? "s" : ""} for "{kw_localQuery.trim()}"</span>
     </div>
     <div class="searchGrid">
       {#each kw_flatResults as m (m.id)}
         <button class="srchCard" onclick={() => onPreview(m)}>
           <div class="srchCoverWrap">
-            <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={m._priority} />
+            <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={m._priority} id={m.id} />
             <div class="srchGradient"></div>
             {#if m.inLibrary}<span class="inLibBadge">Saved</span>{/if}
             <div class="srchFooter">
@@ -264,16 +274,15 @@
     </div>
   {:else if kw_allDone && !kw_hasResults}
     <div class="empty">
-      <p class="emptyText">No results for "{query.trim()}"</p>
+      <svg width="36" height="36" viewBox="0 0 256 256" fill="currentColor" class="emptyIcon" aria-hidden="true">
+        <path d="M229.66,218.34l-50.07-50.07a88,88,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.31ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z"/>
+      </svg>
+      <p class="emptyText">No results for "{kw_localQuery.trim()}"</p>
       <p class="emptyHint">Try a different spelling or fewer words</p>
     </div>
   {/if}
 {/if}
 
-<script module>
-  function focusOnMount(node: HTMLElement) { node.focus(); }
-</script>
-
 <style>
   .keywordBar    { padding: var(--sp-3) var(--sp-4) var(--sp-2); flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
   .searchBar     { display: flex; align-items: center; gap: var(--sp-2); background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-lg); padding: var(--sp-2) var(--sp-3); transition: border-color var(--t-base); }
diff --git a/src/lib/components/browse/SourceTab.svelte b/src/lib/components/browse/SourceTab.svelte
index eb74c9a..39c94e2 100644
--- a/src/lib/components/browse/SourceTab.svelte
+++ b/src/lib/components/browse/SourceTab.svelte
@@ -261,7 +261,7 @@
           {#each src_browseResults as m, i (m.id)}
             <button class="card" onclick={() => onPreview(m)}>
               <div class="coverWrap">
-                <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={i < 12 ? 12 - i : 0} />
+                <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={i < 12 ? 12 - i : 0} id={m.id} />
                 {#if m.inLibrary}<span class="inLibBadge">Saved</span>{/if}
               </div>
               <p class="cardTitle">{m.title}</p>
diff --git a/src/lib/components/browse/TagTab.svelte b/src/lib/components/browse/TagTab.svelte
index 05427ac..39972be 100644
--- a/src/lib/components/browse/TagTab.svelte
+++ b/src/lib/components/browse/TagTab.svelte
@@ -360,7 +360,7 @@
           {#each tag_mergedResults as m, i (m.id)}
             <button class="card" onclick={() => onPreview(m)}>
               <div class="coverWrap">
-                <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={i < 12 ? 12 - i : 0} />
+                <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" priority={i < 12 ? 12 - i : 0} id={m.id} />
                 {#if m.inLibrary}<span class="inLibBadge">Saved</span>{/if}
               </div>
               <p class="cardTitle">{m.title}</p>
diff --git a/src/lib/components/extensions/Extensions.svelte b/src/lib/components/extensions/Extensions.svelte
index 035aa78..be0621c 100644
--- a/src/lib/components/extensions/Extensions.svelte
+++ b/src/lib/components/extensions/Extensions.svelte
@@ -104,8 +104,7 @@
   async function loadRepos() {
     reposLoading = true;
     try {
-      const d = await (getAdapter() as any).gql<{ settings: { extensionRepos: string[] } }>(`query GetSettings { settings { extensionRepos } }`);
-      repos = d.settings.extensionRepos ?? [];
+      repos = await getAdapter().getExtensionRepos();
     } catch (e) { console.error(e); }
     finally { reposLoading = false; }
   }
@@ -113,11 +112,11 @@
   async function saveRepos(updated: string[], intent: "add" | "remove") {
     savingRepos = true;
     try {
-      const d = await (getAdapter() as any).gql<{ setSettings: { settings: { extensionRepos: string[] } } }>(`mutation SetExtensionRepos($repos: [String!]!) { setSettings(input: { settings: { extensionRepos: $repos } }) { settings { extensionRepos } } }`, { repos: updated });
-      repos = d.setSettings.settings.extensionRepos;
+      const removed = repos.find(r => !updated.includes(r)) ?? "";
+      repos = await getAdapter().setExtensionRepos(updated);
       addToast(intent === "add"
         ? { kind: "success", title: "Repo added",   body: updated[updated.length - 1] }
-        : { kind: "info",    title: "Repo removed", body: repos.find(r => !updated.includes(r)) ?? "" }
+        : { kind: "info",    title: "Repo removed", body: removed }
       );
     } catch (e: any) {
       repoError = e instanceof Error ? e.message : "Failed to save";
@@ -138,13 +137,11 @@
   async function mutate(pkgName: string, op: "install" | "update" | "uninstall") {
     working = new Set(working).add(pkgName);
     const label = extensions.find((e) => e.pkgName === pkgName)?.name ?? pkgName;
-    const gqlArgs = {
-      install:   { id: pkgName, install:   true },
-      update:    { id: pkgName, update:    true },
-      uninstall: { id: pkgName, uninstall: true },
-    }[op];
     try {
-      await getAdapter()[{ install: 'installExtension', update: 'updateExtension', uninstall: 'uninstallExtension' }[op] as 'installExtension'](pkgName);
+      const adapter = getAdapter();
+      if      (op === "install")   await adapter.installExtension(pkgName);
+      else if (op === "update")    await adapter.updateExtension(pkgName);
+      else                         await adapter.uninstallExtension(pkgName);
       await load();
       addToast({
         install:   { kind: "download" as const, title: "Extension installed", body: label },
diff --git a/src/lib/components/extensions/panels/ExtensionSettingsPanel.svelte b/src/lib/components/extensions/panels/ExtensionSettingsPanel.svelte
index 7866296..c37c91b 100644
--- a/src/lib/components/extensions/panels/ExtensionSettingsPanel.svelte
+++ b/src/lib/components/extensions/panels/ExtensionSettingsPanel.svelte
@@ -66,17 +66,7 @@
     editKey  = null;
     listOpen = null;
     try {
-      const d = await (getAdapter() as any).gql<{ source: { preferences: Preference[] } }>(
-        `query GetSourceSettings($id: LongString!) { source(id: $id) { preferences {
-          ... on CheckBoxPreference        { type: __typename CheckBoxTitle: title CheckBoxSummary: summary CheckBoxDefault: default CheckBoxCurrentValue: currentValue key }
-          ... on SwitchPreference          { type: __typename SwitchPreferenceTitle: title SwitchPreferenceSummary: summary SwitchPreferenceDefault: default SwitchPreferenceCurrentValue: currentValue key }
-          ... on ListPreference            { type: __typename ListPreferenceTitle: title ListPreferenceSummary: summary ListPreferenceDefault: default ListPreferenceCurrentValue: currentValue entries entryValues key }
-          ... on EditTextPreference        { type: __typename EditTextPreferenceTitle: title EditTextPreferenceSummary: summary EditTextPreferenceDefault: default EditTextPreferenceCurrentValue: currentValue dialogTitle dialogMessage key }
-          ... on MultiSelectListPreference { type: __typename MultiSelectListPreferenceTitle: title MultiSelectListPreferenceSummary: summary MultiSelectListPreferenceDefault: default MultiSelectListPreferenceCurrentValue: currentValue entries entryValues key }
-        } } }`,
-        { id: String(src.id) },
-      );
-      prefs = d.source.preferences ?? [];
+      prefs = (await getAdapter().getSourceSettings(src.id)) as Preference[];
     } catch (e: any) {
       addToast({ kind: "error", title: "Failed to load settings", body: e?.message ?? "" });
     } finally {
@@ -86,24 +76,9 @@
 
   async function save(position: number, changeType: string, value: unknown) {
     if (!activeSource) return;
-    const pref = prefs[position];
-    saving = pref.key;
+    saving = prefs[position].key;
     try {
-      await (getAdapter() as any).gql(
-        `mutation UpdateSourcePreference($source: LongString!, $change: SourcePreferenceChangeInput!) { updateSourcePreference(input: { source: $source, change: $change }) { source { id } } }`,
-        { source: String(activeSource.id), change: { position, [changeType]: value } },
-      );
-      const d = await (getAdapter() as any).gql<{ source: { preferences: Preference[] } }>(
-        `query GetSourceSettings($id: LongString!) { source(id: $id) { preferences {
-          ... on CheckBoxPreference        { type: __typename CheckBoxTitle: title CheckBoxCurrentValue: currentValue key }
-          ... on SwitchPreference          { type: __typename SwitchPreferenceTitle: title SwitchPreferenceCurrentValue: currentValue key }
-          ... on ListPreference            { type: __typename ListPreferenceTitle: title ListPreferenceCurrentValue: currentValue entries entryValues key }
-          ... on EditTextPreference        { type: __typename EditTextPreferenceTitle: title EditTextPreferenceCurrentValue: currentValue key }
-          ... on MultiSelectListPreference { type: __typename MultiSelectListPreferenceTitle: title MultiSelectListPreferenceCurrentValue: currentValue entries entryValues key }
-        } } }`,
-        { id: String(activeSource.id) },
-      );
-      prefs = d.source.preferences ?? [];
+      prefs = (await getAdapter().updateSourcePreference(activeSource.id, position, changeType, value)) as Preference[];
     } catch (e: any) {
       addToast({ kind: "error", title: "Failed to save", body: e?.message ?? "" });
     } finally {
diff --git a/src/lib/components/home/lib/recommendations.ts b/src/lib/components/home/lib/recommendations.ts
index 974ccbe..3bf4389 100644
--- a/src/lib/components/home/lib/recommendations.ts
+++ b/src/lib/components/home/lib/recommendations.ts
@@ -9,6 +9,7 @@ export interface RecommendedManga {
 
 const TOP_GENRES       = 6
 const TARGET_PER_GENRE = 20
+const FALLBACK_GENRES  = ['Action', 'Adventure', 'Fantasy', 'Romance', 'Comedy', 'Drama']
 
 export function topGenres(history: ReadSession[], libraryManga: Manga[]): string[] {
   const byId  = new Map(libraryManga.map(m => [m.id, m]))
@@ -16,8 +17,8 @@ export function topGenres(history: ReadSession[], libraryManga: Manga[]): string
 
   for (const session of history) {
     const manga = byId.get(session.mangaId)
-    if (!manga?.genre?.length) continue
-    for (const g of manga.genre) {
+    if (!manga?.tags?.length) continue
+    for (const g of manga.tags) {
       const key      = g.toLowerCase()
       const existing = tally.get(key)
       if (existing) existing.count++
@@ -25,10 +26,12 @@ export function topGenres(history: ReadSession[], libraryManga: Manga[]): string
     }
   }
 
-  return [...tally.values()]
+  const derived = [...tally.values()]
     .sort((a, b) => b.count - a.count)
     .slice(0, TOP_GENRES)
     .map(e => e.original)
+
+  return derived.length > 0 ? derived : FALLBACK_GENRES
 }
 
 export async function fetchRecommendations(
@@ -36,20 +39,22 @@ export async function fetchRecommendations(
   libraryManga: Manga[],
   signal?:      AbortSignal,
 ): Promise<RecommendedManga[]> {
-  if (!history.length || !libraryManga.length) return []
-
   const genres = topGenres(history, libraryManga)
-  if (!genres.length) return []
 
-  const adapter    = getAdapter()
+  const adapter    = getAdapter() as any
   const globalSeen = new Set<number>(libraryManga.map(m => m.id))
 
   const perGenre = await Promise.all(
     genres.map(async genre => {
       if (signal?.aborted) return []
       try {
-        const { items } = await adapter.getMangaList({ tags: [genre], inLibrary: false })
-        return items
+        const { items } = await adapter.getMangasByGenre(
+          { genre: { like: `%${genre}%` } },
+          TARGET_PER_GENRE,
+          0,
+          signal,
+        )
+        return items as Manga[]
       } catch {
         return []
       }
@@ -57,19 +62,21 @@ export async function fetchRecommendations(
   )
 
   const merged: Manga[] = []
-  for (const items of perGenre) {
+  outer: for (const items of perGenre) {
     for (const m of items) {
+      if (signal?.aborted) break outer
       if (globalSeen.has(m.id)) continue
       globalSeen.add(m.id)
       merged.push(m)
-      if (merged.length >= genres.length * TARGET_PER_GENRE) break
     }
   }
 
-  return merged.map(m => ({
-    manga: m,
-    matchedGenres: (m.genre ?? []).filter(g =>
-      genres.some(tg => tg.toLowerCase() === g.toLowerCase())
-    ),
-  }))
+  return merged.map(m => {
+    const mTagsLower = (m.tags ?? []).map(g => g.toLowerCase())
+    const matched    = genres.filter(g => mTagsLower.includes(g.toLowerCase()))
+    return {
+      manga:         m,
+      matchedGenres: matched.length > 0 ? matched : [genres[0]],
+    }
+  })
 }
\ No newline at end of file
diff --git a/src/lib/components/library/LibraryGrid.svelte b/src/lib/components/library/LibraryGrid.svelte
index d85f120..a0eb7e1 100644
--- a/src/lib/components/library/LibraryGrid.svelte
+++ b/src/lib/components/library/LibraryGrid.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { CheckSquare, Trash, Folder } from 'phosphor-svelte'
+  import Thumbnail from '$lib/components/shared/manga/Thumbnail.svelte'
   import type { Manga, Category } from '$lib/types'
 
   interface Props {
@@ -24,15 +25,8 @@
     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
   }
@@ -124,13 +118,7 @@
           oncontextmenu={(e) => onCardContextMenu(e, m)}
         >
           <div class="cover-wrap" class:completed={isCompleted}>
-            <img
-              class="cover"
-              src={coverUrl(m)}
-              alt={m.title}
-              draggable="false"
-              loading="lazy"
-            />
+            <Thumbnail src={m.thumbnailUrl} alt={m.title} class="cover" id={m.id} />
             <div class="overlay">
               <div class="badges">
                 {#if isCompleted}
@@ -247,7 +235,7 @@
   }
   .cover-wrap.completed { box-shadow: inset 0 -2px 0 0 var(--accent); }
 
-  .cover { width: 100%; height: 100%; object-fit: cover; display: block; }
+  :global(.cover) { width: 100%; height: 100%; object-fit: cover; display: block; }
 
   .overlay {
     position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
diff --git a/src/lib/components/reader/ReaderOverlay.svelte b/src/lib/components/reader/ReaderOverlay.svelte
index 45d2490..8328ba8 100644
--- a/src/lib/components/reader/ReaderOverlay.svelte
+++ b/src/lib/components/reader/ReaderOverlay.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { readerState }                    from "$lib/state/reader.svelte";
-  import { settingsState }                  from "$lib/state/settings.svelte";
   import { getAdapter }                     from "$lib/request-manager";
   import type { Chapter }                   from "$lib/types";
 
@@ -15,28 +14,6 @@
 
   const { showResumeBanner, resumePage, resumeFading, adjacent, onDismissResume, barPosition }: Props = $props();
 
-  async function gqlMutation(query: string, variables: Record<string, unknown>): Promise<void> {
-    const base    = settingsState.settings.serverUrl ?? "http://localhost:4567";
-    const headers: Record<string, string> = { "Content-Type": "application/json" };
-    const mode    = settingsState.settings.serverAuthMode ?? "NONE";
-    if (mode === "BASIC_AUTH") {
-      const u = settingsState.settings.serverAuthUser?.trim() ?? "";
-      const p = settingsState.settings.serverAuthPass?.trim() ?? "";
-      if (u && p) headers["Authorization"] = `Basic ${btoa(`${u}:${p}`)}`;
-    }
-    const res = await fetch(`${base}/api/graphql`, {
-      method: "POST",
-      headers,
-      body: JSON.stringify({ query, variables }),
-    });
-    if (!res.ok) throw new Error(`HTTP ${res.status}`);
-    const json = await res.json();
-    if (json.errors?.length) throw new Error(json.errors[0].message);
-  }
-
-  const ENQUEUE_ONE  = `mutation EnqueueOne($id: Int!) { fetchChapterPages(input: { chapterId: $id }) { chapter { id } } }`;
-  const ENQUEUE_MANY = `mutation EnqueueMany($ids: [Int!]!) { enqueueChaptersDownloads(input: { ids: $ids }) { downloadStatus { queue { chapter { id } } } } }`;
-
   async function runDl(fn: () => Promise<void>) {
     readerState.dlBusy = true;
     try { await fn(); } catch (e) { console.error(e); }
@@ -60,14 +37,14 @@
       <p class="dl-title">Download</p>
 
       <button class="dl-option" disabled={readerState.dlBusy || !!chapter.downloaded}
-        onclick={() => runDl(() => gqlMutation(ENQUEUE_ONE, { id: chapter.id }))}>
+        onclick={() => runDl(() => getAdapter().enqueueDownload(String(chapter.id)))}>
         This chapter
         <span class="dl-sub">{chapter.downloaded ? "Already downloaded" : chapter.name}</span>
       </button>
 
       <div class="dl-row">
         <button class="dl-option" disabled={readerState.dlBusy || queueable.length === 0}
-          onclick={() => runDl(() => gqlMutation(ENQUEUE_MANY, { ids: queueable.slice(0, readerState.nextN).map(c => c.id) }))}>
+          onclick={() => runDl(() => getAdapter().enqueueDownloads(queueable.slice(0, readerState.nextN).map(c => String(c.id))))}>
           Next chapters
           <span class="dl-sub">{Math.min(readerState.nextN, queueable.length)} not yet downloaded</span>
         </button>
@@ -79,7 +56,7 @@
       </div>
 
       <button class="dl-option" disabled={readerState.dlBusy || queueable.length === 0}
-        onclick={() => runDl(() => gqlMutation(ENQUEUE_MANY, { ids: queueable.map(c => c.id) }))}>
+        onclick={() => runDl(() => getAdapter().enqueueDownloads(queueable.map(c => String(c.id))))}>
         All remaining
         <span class="dl-sub">{queueable.length} not yet downloaded</span>
       </button>
diff --git a/src/lib/components/series/SeriesHeader.svelte b/src/lib/components/series/SeriesHeader.svelte
index 8389038..1c9f474 100644
--- a/src/lib/components/series/SeriesHeader.svelte
+++ b/src/lib/components/series/SeriesHeader.svelte
@@ -93,7 +93,7 @@
 
   <div class="cover-wrap">
     <button class="cover-btn" onclick={() => manga && setPreviewManga(manga)} title="Quick preview" disabled={!manga}>
-      <Thumbnail src={resolvedCover(seriesState.activeManga?.id ?? manga?.id ?? 0, seriesState.activeManga?.thumbnailUrl ?? manga?.thumbnailUrl ?? "")} alt={seriesState.activeManga?.title ?? manga?.title ?? ""} class="cover" />
+      <Thumbnail src={resolvedCover(seriesState.activeManga?.id ?? manga?.id ?? 0, seriesState.activeManga?.thumbnailUrl ?? manga?.thumbnailUrl ?? "")} alt={seriesState.activeManga?.title ?? manga?.title ?? ""} class="cover" id={seriesState.activeManga?.id ?? manga?.id} />
     </button>
   </div>
 
diff --git a/src/lib/components/shared/manga/Thumbnail.svelte b/src/lib/components/shared/manga/Thumbnail.svelte
index 88d59ab..9b2f319 100644
--- a/src/lib/components/shared/manga/Thumbnail.svelte
+++ b/src/lib/components/shared/manga/Thumbnail.svelte
@@ -4,6 +4,7 @@
 
   let {
     src,
+    id         = undefined,
     alt        = "",
     class: cls = "",
     loading    = "lazy",
@@ -13,6 +14,7 @@
     ...rest
   }: {
     src:       string | null | undefined;
+    id?:       string | number;
     alt?:      string;
     class?:    string;
     loading?:  string;
@@ -27,10 +29,14 @@
     return typeof url === "string" && url.trim() ? url.replace(/\/$/, "") : "http://127.0.0.1:4567";
   }
 
+  function withBust(url: string): string {
+    return id != null ? `${url}${url.includes('?') ? '&' : '?'}id=${id}` : url;
+  }
+
   function plainThumbUrl(path: string | null | undefined): string {
     if (!path) return "";
-    if (path.startsWith("http")) return path;
-    return `${getServerUrl()}${path}`;
+    const base = path.startsWith("http") ? path : `${getServerUrl()}${path}`;
+    return withBust(base);
   }
 
   const isAuth = $derived((settingsState.settings.serverAuthMode ?? "NONE") !== "NONE");
@@ -45,15 +51,15 @@
 
     if (!_isAuth || !_src) { blobUrl = ""; return; }
 
-    const id      = ++reqId;
+    const myId    = ++reqId;
     const bareUrl = _src.startsWith("http") ? _src : `${getServerUrl()}${_src}`;
-    getBlobUrl(bareUrl, _priority)
-      .then(u  => { if (id === reqId) blobUrl = u; })
-      .catch(() => { if (id === reqId) blobUrl = ""; });
+    getBlobUrl(withBust(bareUrl), _priority)
+      .then(u  => { if (myId === reqId) blobUrl = u; })
+      .catch(() => { if (myId === reqId) blobUrl = ""; });
   });
 
-  const plainUrl  = $derived(plainThumbUrl(src));
-  const resolved  = $derived(isAuth ? (blobUrl || plainUrl) || undefined : plainUrl || undefined);
+  const plainUrl = $derived(plainThumbUrl(src));
+  const resolved = $derived(isAuth ? (blobUrl || plainUrl) || undefined : plainUrl || undefined);
 </script>
 
 <img src={resolved} {alt} class={cls} {loading} {decoding} {onerror} {...rest} />
\ No newline at end of file
diff --git a/src/lib/server-adapters/suwayomi/index.ts b/src/lib/server-adapters/suwayomi/index.ts
index 0697cff..d7b798a 100644
--- a/src/lib/server-adapters/suwayomi/index.ts
+++ b/src/lib/server-adapters/suwayomi/index.ts
@@ -410,6 +410,18 @@ export class SuwayomiAdapter implements ServerAdapter {
     await this.gql(INSTALL_EXTERNAL_EXTENSION, { url })
   }
 
+  async getExtensionRepos(): Promise<string[]> {
+    const data = await this.gql<{ settings: { extensionRepos: string[] } }>(GET_SETTINGS)
+    return data.settings.extensionRepos ?? []
+  }
+
+  async setExtensionRepos(repos: string[]): Promise<string[]> {
+    const data = await this.gql<{ setSettings: { settings: { extensionRepos: string[] } } }>(
+      SET_EXTENSION_REPOS, { repos }
+    )
+    return data.setSettings.settings.extensionRepos
+  }
+
   async getSources(): Promise<Source[]> {
     const data = await this.gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
     return data.sources.nodes
@@ -425,6 +437,29 @@ export class SuwayomiAdapter implements ServerAdapter {
     }
   }
 
+  async getSourceSettings(sourceId: string): Promise<unknown[]> {
+    const data = await this.gql<{ source: { preferences: unknown[] } }>(
+      GET_SOURCE_SETTINGS, { id: sourceId }
+    )
+    return data.source.preferences ?? []
+  }
+
+  async updateSourcePreference(
+    sourceId:   string,
+    position:   number,
+    changeType: string,
+    value:      unknown,
+  ): Promise<unknown[]> {
+    await this.gql(UPDATE_SOURCE_PREFERENCE, {
+      source: sourceId,
+      change: { position, [changeType]: value },
+    })
+    const data = await this.gql<{ source: { preferences: unknown[] } }>(
+      GET_SOURCE_SETTINGS, { id: sourceId }
+    )
+    return data.source.preferences ?? []
+  }
+
   async getCategories(): Promise<Category[]> {
     const data = await this.gql<{ categories: { nodes: Record<string, unknown>[] } }>(GET_CATEGORIES)
     return data.categories.nodes.map(mapCategory)
diff --git a/src/lib/server-adapters/suwayomi/manga.ts b/src/lib/server-adapters/suwayomi/manga.ts
index 03757e1..df57d17 100644
--- a/src/lib/server-adapters/suwayomi/manga.ts
+++ b/src/lib/server-adapters/suwayomi/manga.ts
@@ -59,7 +59,7 @@ export const LIBRARY_UPDATE_STATUS = `
 
 export const MANGAS_BY_GENRE = `
   query MangasByGenre($filter: MangaFilterInput, $first: Int, $offset: Int) {
-    mangas(filter: $filter, first: $first, offset: $offset, orderBy: IN_LIBRARY_AT, orderByType: DESC) {
+    mangas(filter: $filter, first: $first, offset: $offset) {
       nodes {
         id title thumbnailUrl inLibrary genre status
         source { id displayName }
diff --git a/src/lib/server-adapters/types.ts b/src/lib/server-adapters/types.ts
index a82762e..19512c2 100644
--- a/src/lib/server-adapters/types.ts
+++ b/src/lib/server-adapters/types.ts
@@ -175,9 +175,13 @@ export interface ServerAdapter {
   updateExtension(id: string): Promise<void>
   updateExtensions(ids: string[]): Promise<void>
   installExternalExtension(url: string): Promise<void>
+  getExtensionRepos(): Promise<string[]>
+  setExtensionRepos(repos: string[]): Promise<string[]>
 
   getSources(): Promise<Source[]>
   browseSource(sourceId: string, page: number): Promise<PaginatedResult<Manga>>
+  getSourceSettings(sourceId: string): Promise<unknown[]>
+  updateSourcePreference(sourceId: string, position: number, changeType: string, value: unknown): Promise<unknown[]>
 
   getCategories(): Promise<Category[]>
   createCategory(name: string): Promise<Category>