gamezonline/Moku
1
0
Fork 0
mirror of https://github.com/moku-project/Moku.git synced 2026-06-13 09:19:56 -05:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Implemented Series-Link

Browse Source
This commit is contained in:
Youwes09
2026-03-19 22:00:24 -05:00
parent b772b94c6c
commit 816b384d64
7 changed files with 311 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/Discover.svelte
+4 -35
View File
@@ -4,13 +4,12 @@
import { gql, thumbUrl } from "../../lib/client";
import { GET_SOURCES, FETCH_SOURCE_MANGA, UPDATE_MANGA } from "../../lib/queries";
import { cache, CACHE_KEYS } from "../../lib/cache";
import { dedupeSources, dedupeMangaByTitle, dedupeMangaById, groupDuplicates, normalizeTitle } from "../../lib/util";
import { dedupeSources, dedupeMangaByTitle, dedupeMangaById } from "../../lib/util";
import { settings, previewManga, activeSource, addFolder, assignMangaToFolder } from "../../store";
import type { Manga, Source } from "../../lib/types";
import ContextMenu from "../shared/ContextMenu.svelte";
import type { MenuEntry } from "../shared/ContextMenu.svelte";
import SourceBrowse from "../sources/SourceBrowse.svelte";
import MangaPreview from "../shared/MangaPreview.svelte";
// ── Config ────────────────────────────────────────────────────────────────────
const GENRE_TABS = ["All", "Action", "Romance", "Fantasy", "Comedy", "Drama", "Horror", "Sci-Fi", "Adventure", "Thriller"];
@@ -57,39 +56,13 @@
// Context menu
let ctx: { x: number; y: number; manga: Manga } | null = null;
// Raw pool of ALL items before dedup — used to find alternates for the preview switcher.
// Keyed by normalised title → array of Manga with that title from different sources.
let rawPool = new Map<string, Manga[]>();
function addToPool(items: Manga[]) {
for (const m of items) {
const k = normalizeTitle(m.title);
if (!rawPool.has(k)) rawPool.set(k, []);
const group = rawPool.get(k)!;
if (!group.some(x => x.id === m.id)) group.push(m);
}
}
// Get alternates (other source variants) for a given manga, excluding itself
function getAlternates(m: Manga): Manga[] {
const k = normalizeTitle(m.title);
return (rawPool.get(k) ?? []).filter(x => x.id !== m.id);
}
// Open preview with alternates pre-computed
let previewAlternates: Manga[] = [];
function openPreview(m: Manga) {
previewAlternates = getAlternates(m);
previewManga.set(m);
}
// ── Derived ───────────────────────────────────────────────────────────────────
$: visibleGrid = genreResults.get(currentGenre) ?? [];
$: isLoading = genreLoading || (currentGenre === "All" && loadingLib);
// ── Dedup helper — always apply id first then title ───────────────────────────
function dedup(items: Manga[]): Manga[] {
return dedupeMangaByTitle(dedupeMangaById(items));
return dedupeMangaByTitle(dedupeMangaById(items), $settings.mangaLinks);
}
// ── Concurrent fan-out — conservative concurrency keeps connections free ──────
@@ -113,7 +86,6 @@
batchTimer = setInterval(() => {
if (batchAccum.size === 0) return;
for (const [genre, incoming] of batchAccum) {
addToPool(incoming);
const current = genreResults.get(genre) ?? [];
genreResults.set(genre, dedup([...current, ...incoming]).slice(0, GRID_LIMIT));
}
@@ -266,11 +238,10 @@
const lang = $settings.preferredExtensionLang || "en";
// Local library — populates "All" tab
cache.get(CACHE_KEYS.LIBRARY, () =>
cache.get(CACHE_KEYS.DISCOVER, () =>
gql<{ mangas: { nodes: Manga[] } }>(EXPLORE_ALL_MANGA).then(d => d.mangas.nodes)
).then(m => {
allManga = dedupeMangaById(m);
addToPool(allManga);
genreResults.set("All", dedup(allManga).slice(0, GRID_LIMIT));
genreResults = new Map(genreResults);
}).catch(e => { console.error(e); loadError = true; })
@@ -342,7 +313,7 @@
{#each visibleGrid as m (m.id)}
<button
class="manga-card"
on:click={() => openPreview(m)}
on:click={() => previewManga.set(m)}
on:contextmenu={(e) => openCtx(e, m)}
>
<div class="cover-wrap">
@@ -372,8 +343,6 @@
<ContextMenu x={ctx.x} y={ctx.y} items={buildCtxItems(ctx.manga)} onClose={() => ctx = null} />
{/if}
<MangaPreview alternates={previewAlternates} />
<style>
.root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
src/components/pages/Library.svelte
+8 -6
View File
@@ -33,15 +33,18 @@
}
function fetchLibrary() {
return cache.get(CACHE_KEYS.LIBRARY, () =>
gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY).then((d) => d.mangas.nodes)
return cache.get(
CACHE_KEYS.LIBRARY,
() => gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY).then((d) => d.mangas.nodes),
DEFAULT_TTL_MS,
CACHE_GROUPS.LIBRARY,
);
}
function loadData() {
fetchLibrary()
.then((nodes) => {
allManga = dedupeMangaByTitle(dedupeMangaById(nodes));
allManga = dedupeMangaByTitle(dedupeMangaById(nodes), $settings.mangaLinks);
error = null;
})
.catch((e) => error = e.message)
@@ -52,7 +55,7 @@
DEFAULT_TTL_MS,
CACHE_GROUPS.LIBRARY,
).then((nodes) => {
allMangaUnfiltered = dedupeMangaByTitle(dedupeMangaById(nodes));
allMangaUnfiltered = dedupeMangaByTitle(dedupeMangaById(nodes), $settings.mangaLinks);
}).catch(console.error);
}
@@ -136,8 +139,7 @@
async function removeFromLibrary(manga: Manga) {
await gql(UPDATE_MANGA, { id: manga.id, inLibrary: false }).catch(console.error);
allManga = allManga.filter((m) => m.id !== manga.id);
cache.clear(CACHE_KEYS.LIBRARY);
cache.clearGroup(CACHE_GROUPS.LIBRARY);
cache.clearGroup(CACHE_GROUPS.LIBRARY); // clears "library" + "all_manga_unfiltered" + notifies subscribers
}
async function deleteAllDownloads(manga: Manga) {
src/components/search/Search.svelte
+18 -37
View File
@@ -3,10 +3,9 @@
import { gql, thumbUrl } from "../../lib/client";
import { GET_SOURCES, FETCH_SOURCE_MANGA } from "../../lib/queries";
import { cache, CACHE_KEYS, getPageSet } from "../../lib/cache";
import { dedupeSources, dedupeMangaById, dedupeMangaByTitle, normalizeTitle } from "../../lib/util";
import { dedupeSources, dedupeMangaById, dedupeMangaByTitle } from "../../lib/util";
import { settings, searchPrefill, previewManga } from "../../store";
import type { Manga, Source } from "../../lib/types";
import MangaPreview from "../shared/MangaPreview.svelte";
@@ -168,7 +167,6 @@
ctrl.signal,
);
if (ctrl.signal.aborted) return;
addToPool(d.fetchSourceManga.mangas);
kw_results = kw_results.map((r) =>
r.source.id === src.id ? { ...r, mangas: d.fetchSourceManga.mangas, loading: false } : r,
);
@@ -224,7 +222,7 @@
tag_searchSources
? [...tag_localResults, ...tag_sourceResults.filter((m) => !tag_localIds.has(m.id))]
: tag_localResults
));
), $settings.mangaLinks);
$: tag_totalVisible = tag_mergedResults.length;
$: tag_sourceHasMore = tag_searchSources && [...tag_srcNextPage.values()].some((p) => p > 0);
@@ -236,9 +234,16 @@
}
// Auto-enable source search if local results are sparse (< 20 after initial load)
$: if (!tag_loadingLocal && tag_activeTags.length > 0 && tag_localResults.length < 20 && !tag_searchSources && !loadingSources) {
tag_searchSources = true;
// Use a flag so this only fires once per tag set, not on every reactive update
let tag_autoSearchFired = false;
$: if (!tag_loadingLocal && tag_activeTags.length > 0 && !tag_autoSearchFired && !tag_searchSources && !loadingSources) {
if (tag_localResults.length < 20) {
tag_autoSearchFired = true;
tag_searchSources = true;
}
}
// Reset the flag when tags change
$: { tag_activeTags; tag_autoSearchFired = false; }
$: {
const _search = tag_searchSources;
@@ -265,7 +270,6 @@
ctrl.signal,
).then((d) => {
if (ctrl.signal.aborted) return;
addToPool(d.mangas.nodes);
tag_localResults = d.mangas.nodes;
tag_totalCount = d.mangas.totalCount;
tag_localHasNext = d.mangas.pageInfo.hasNextPage;
@@ -282,7 +286,8 @@
const ctrl = new AbortController();
tag_abortSource = ctrl;
tag_sourceResults = [];
// Don't blank existing results — keep them visible while new ones load.
// Only reset if the tags actually changed (tracked by the calling reactive block).
tag_srcNextPage = new Map();
tag_loadingSourceSearch = true;
@@ -323,8 +328,7 @@
: result.mangas;
if (matching.length > 0) {
addToPool(matching);
tag_sourceResults = dedupeMangaByTitle(dedupeMangaById([...tag_sourceResults, ...matching]));
tag_sourceResults = dedupeMangaByTitle(dedupeMangaById([...tag_sourceResults, ...matching]), $settings.mangaLinks);
tag_loadingSourceSearch = false;
}
}, ctrl.signal).finally(() => {
@@ -397,8 +401,7 @@
: result.mangas;
if (matching.length > 0) {
addToPool(matching);
tag_sourceResults = dedupeMangaByTitle(dedupeMangaById([...tag_sourceResults, ...matching]));
tag_sourceResults = dedupeMangaByTitle(dedupeMangaById([...tag_sourceResults, ...matching]), $settings.mangaLinks);
}
}, ctrl.signal);
} finally {
@@ -488,26 +491,6 @@
// ── Raw pool + alternates for MangaPreview thumbnail switcher ────────────────
// All manga seen across all sources — keyed by normalised title.
const rawPool = new Map<string, Manga[]>();
function addToPool(items: Manga[]) {
for (const m of items) {
const k = normalizeTitle(m.title);
if (!rawPool.has(k)) rawPool.set(k, []);
const g = rawPool.get(k)!;
if (!g.some(x => x.id === m.id)) g.push(m);
}
}
let previewAlternates: Manga[] = [];
function openPreview(m: Manga) {
const k = normalizeTitle(m.title);
previewAlternates = (rawPool.get(k) ?? []).filter(x => x.id !== m.id);
previewManga.set(m);
}
onDestroy(() => {
kw_abortCtrl?.abort();
tag_abortLocal?.abort();
@@ -710,7 +693,7 @@
{:else if mangas.length > 0}
<div class="sourceRow">
{#each mangas.slice(0, ($settings.renderLimit ?? 48)) as m (m.id)}
<button class="card" on:click={() => openPreview(m)}>
<button class="card" on:click={() => previewManga.set(m)}>
<div class="coverWrap">
<img
src={thumbUrl(m.thumbnailUrl)}
@@ -860,7 +843,7 @@
{:else if tag_mergedResults.length > 0}
<div class="tagGrid">
{#each tag_mergedResults as m (m.id)}
<button class="card" on:click={() => openPreview(m)}>
<button class="card" on:click={() => previewManga.set(m)}>
<div class="coverWrap">
<img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="cover" loading="lazy" decoding="async" />
{#if m.inLibrary}<span class="inLibBadge">Saved</span>{/if}
@@ -1039,7 +1022,7 @@
{:else if src_browseResults.length > 0}
<div class="tagGrid">
{#each src_browseResults as m (m.id)}
<button class="card" on:click={() => openPreview(m)}>
<button class="card" on:click={() => previewManga.set(m)}>
<div class="coverWrap">
<img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="cover" loading="lazy" decoding="async" />
{#if m.inLibrary}<span class="inLibBadge">Saved</span>{/if}
@@ -1083,8 +1066,6 @@
{/if}
</div>
<MangaPreview alternates={previewAlternates} />
<style>
/* ── Root ──────────────────────────────────────────────────────────────── */
src/components/shared/MangaPreview.svelte
+142 -90
View File
@@ -1,12 +1,12 @@
<script lang="ts">
import { onMount, onDestroy } from "svelte";
import { X, BookmarkSimple, ArrowSquareOut, Play, CircleNotch, Books, CaretDown, FolderSimplePlus, Folder } from "phosphor-svelte";
import { X, BookmarkSimple, ArrowSquareOut, Play, CircleNotch, Books, CaretDown, FolderSimplePlus, Folder, LinkSimpleHorizontalBreak } from "phosphor-svelte";
import { gql, thumbUrl } from "../../lib/client";
import { GET_MANGA, GET_CHAPTERS, FETCH_MANGA, FETCH_CHAPTERS, UPDATE_MANGA, ENQUEUE_CHAPTERS_DOWNLOAD } from "../../lib/queries";
import { cache, CACHE_KEYS } from "../../lib/cache";
import { settings, previewManga, activeManga, navPage, genreFilter, openReader, addToast, addFolder, assignMangaToFolder, removeMangaFromFolder, checkAndMarkCompleted } from "../../store";
import { groupDuplicates } from "../../lib/util";
import { settings, previewManga, activeManga, navPage, genreFilter, openReader, addToast, addFolder, assignMangaToFolder, removeMangaFromFolder, checkAndMarkCompleted, linkManga, unlinkManga, getLinkedMangaIds } from "../../store";
import type { Manga, Chapter } from "../../lib/types";
import { GET_ALL_MANGA } from "../../lib/queries";
let manga: Manga | null = null;
let chapters: Chapter[] = [];
@@ -21,12 +21,45 @@
let fetchError: string|null = null;
let folderRef: HTMLDivElement;
// Alternate versions of this manga from other sources (same title/desc, diff source)
// Populated by the parent via the `alternates` prop if available.
export let alternates: Manga[] = [];
let selectedThumb: string | null = null; // null = use manga's own thumbnail
// ── Link picker ──────────────────────────────────────────────────────────────
let linkPickerOpen = false;
let linkSearch = "";
let allMangaForLink: Manga[] = [];
let loadingLinkList = false;
$: effectiveThumb = selectedThumb ?? ($previewManga?.thumbnailUrl ?? "");
$: linkedIds = $previewManga ? ($settings.mangaLinks?.[$previewManga.id] ?? []) : [];
$: linkPickerResults = (() => {
const others = allMangaForLink.filter(m => m.id !== $previewManga?.id);
const q = linkSearch.trim().toLowerCase();
const filtered = q ? others.filter(m => m.title.toLowerCase().includes(q)) : others;
// Linked entries bubble to the top
const linked = filtered.filter(m => linkedIds.includes(m.id));
const rest = filtered.filter(m => !linkedIds.includes(m.id)).slice(0, 30);
return [...linked, ...rest];
})();
async function openLinkPicker() {
linkPickerOpen = true;
linkSearch = "";
if (allMangaForLink.length) return;
loadingLinkList = true;
gql<{ mangas: { nodes: Manga[] } }>(GET_ALL_MANGA)
.then(d => { allMangaForLink = d.mangas.nodes; })
.catch(console.error)
.finally(() => { loadingLinkList = false; });
}
function closeLinkPicker() { linkPickerOpen = false; linkSearch = ""; }
function handleLink(other: Manga) {
if (!$previewManga) return;
if (linkedIds.includes(other.id)) {
unlinkManga($previewManga.id, other.id);
} else {
linkManga($previewManga.id, other.id);
}
}
let detailAbort: AbortController | null = null;
let chapterAbort: AbortController | null = null;
@@ -36,7 +69,6 @@
previewManga.set(null);
manga = null; chapters = []; descExpanded = false;
folderOpen = false; creatingFolder = false; newFolderName = ""; fetchError = null;
selectedThumb = null;
}
function formatDate(d: Date) { return d.toLocaleDateString(undefined, { year: "numeric", month: "short", day: "numeric" }); }
@@ -70,7 +102,10 @@
detailAbort?.abort(); chapterAbort?.abort();
const dCtrl = new AbortController(), cCtrl = new AbortController();
detailAbort = dCtrl; chapterAbort = cCtrl;
manga = null; chapters = []; descExpanded = false; fetchError = null;
// Pre-populate from the shallow grid entry immediately — description/genres
// will appear as soon as the full fetch resolves, but title/cover show now.
manga = $previewManga as Manga;
chapters = []; descExpanded = false; fetchError = null;
loadingDetail = true; loadingChapters = true;
(async (): Promise<Manga> => {
@@ -172,57 +207,29 @@
<!-- Cover column -->
<div class="cover-col">
<div class="cover-wrap">
<img src={thumbUrl(effectiveThumb)} alt={displayManga?.title} class="cover" />
<img src={thumbUrl($previewManga.thumbnailUrl)} alt={displayManga?.title} class="cover" />
{#if loadingDetail}
<div class="cover-spinner"><CircleNotch size={18} weight="light" class="anim-spin" /></div>
{/if}
</div>
<!-- Alternate source thumbnails — shown when this manga exists in multiple sources -->
{#if alternates.length > 0}
<div class="thumb-switcher">
<span class="thumb-switcher-label">Sources</span>
<div class="thumb-switcher-row">
<!-- Primary -->
<button
class="thumb-option"
class:thumb-option-active={selectedThumb === null}
on:click={() => selectedThumb = null}
title={displayManga?.source?.displayName ?? "Primary"}
>
<img src={thumbUrl($previewManga?.thumbnailUrl ?? "")} alt="Primary" class="thumb-option-img" loading="lazy" />
{#if displayManga?.source?.displayName}
<span class="thumb-option-label">{displayManga.source.displayName}</span>
{/if}
</button>
<!-- Alternates -->
{#each alternates as alt (alt.id)}
<button
class="thumb-option"
class:thumb-option-active={selectedThumb === alt.thumbnailUrl}
on:click={() => selectedThumb = alt.thumbnailUrl}
title={alt.source?.displayName ?? alt.title}
>
<img src={thumbUrl(alt.thumbnailUrl)} alt={alt.title} class="thumb-option-img" loading="lazy" />
{#if alt.source?.displayName}
<span class="thumb-option-label">{alt.source.displayName}</span>
{/if}
</button>
{/each}
</div>
</div>
{/if}
<div class="cover-actions">
<!-- Library -->
<button class="action-btn" class:active={inLibrary} on:click={toggleLibrary} disabled={togglingLib || loadingDetail}>
<BookmarkSimple size={13} weight={inLibrary ? "fill" : "light"} />
{togglingLib ? "…" : inLibrary ? "In Library" : "Add to Library"}
<span class="action-icon"><BookmarkSimple size={13} weight={inLibrary ? "fill" : "light"} /></span>
<span class="action-label">{togglingLib ? "…" : inLibrary ? "In Library" : "Add to Library"}</span>
</button>
<!-- Series Detail -->
<button class="action-btn" on:click={openSeriesDetail}>
<Books size={13} weight="light" /> Series Detail
<span class="action-icon"><Books size={13} weight="light" /></span>
<span class="action-label">Series Detail</span>
</button>
<!-- Folders -->
<div class="folder-wrap" bind:this={folderRef}>
<button class="action-btn" class:folder-active={assignedFolders.length > 0} on:click={() => folderOpen = !folderOpen}>
<FolderSimplePlus size={13} weight={assignedFolders.length > 0 ? "fill" : "light"} />
<button class="action-btn" class:active={assignedFolders.length > 0} on:click={() => folderOpen = !folderOpen}>
<span class="action-icon"><FolderSimplePlus size={13} weight={assignedFolders.length > 0 ? "fill" : "light"} /></span>
<span class="action-label">{assignedFolders.length > 0 ? assignedFolders.map((f) => f.name).join(", ") : "Add to folder"}</span>
</button>
{#if folderOpen}
@@ -249,6 +256,13 @@
</div>
{/if}
</div>
<!-- Series Link -->
<button class="action-btn" class:active={linkedIds.length > 0} on:click={openLinkPicker}>
<span class="action-icon"><LinkSimpleHorizontalBreak size={13} weight={linkedIds.length > 0 ? "fill" : "light"} /></span>
<span class="action-label">{linkedIds.length > 0 ? `Series Link (${linkedIds.length})` : "Series Link"}</span>
</button>
</div>
</div>
@@ -364,6 +378,47 @@
</div>
</div>
</div>
<!-- ── Link picker modal ───────────────────────────────────────────────────── -->
{#if linkPickerOpen}
<div class="link-backdrop" role="presentation"
on:click|self={closeLinkPicker}
on:keydown={(e) => e.key === "Escape" && closeLinkPicker()}>
<div class="link-modal">
<div class="link-header">
<span class="link-title">Link as same series</span>
<button class="close-btn" on:click={closeLinkPicker}><X size={14} weight="light" /></button>
</div>
<p class="link-hint">
Mark two manga as the same series so duplicates are merged in search and discover.
Click a linked entry again to unlink.
</p>
<div class="link-search-wrap">
<input class="link-search" placeholder="Search your library…" bind:value={linkSearch} use:focus />
</div>
<div class="link-list">
{#if loadingLinkList}
<p class="link-empty">Loading…</p>
{:else if linkPickerResults.length === 0}
<p class="link-empty">No results</p>
{:else}
{#each linkPickerResults as m (m.id)}
{@const isLinked = linkedIds.includes(m.id)}
<button class="link-row" class:link-row-linked={isLinked} on:click={() => handleLink(m)}>
<img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="link-thumb" loading="lazy" decoding="async" />
<div class="link-info">
<span class="link-manga-title">{m.title}</span>
{#if m.source?.displayName}<span class="link-source">{m.source.displayName}</span>{/if}
</div>
<span class="link-status">{isLinked ? "✓ Linked" : "Link"}</span>
</button>
{/each}
{/if}
</div>
</div>
</div>
{/if}
{/if}
<script context="module">
@@ -373,17 +428,24 @@
<style>
.backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: var(--z-settings); display: flex; align-items: center; justify-content: center; animation: fadeIn 0.12s ease both; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.modal { width: min(800px, calc(100vw - 48px)); height: min(560px, calc(100vh - 80px)); display: flex; background: var(--bg-surface); border: 1px solid var(--border-base); border-radius: var(--radius-xl); overflow: hidden; animation: scaleIn 0.16s ease both; box-shadow: 0 0 0 1px var(--border-dim), 0 24px 64px rgba(0,0,0,0.6); }
.cover-col { width: 190px; flex-shrink: 0; background: var(--bg-raised); border-right: 1px solid var(--border-dim); display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-4) var(--sp-4); gap: var(--sp-3); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.cover-col::-webkit-scrollbar { display: none; }
.cover-col { width: 190px; flex-shrink: 0; background: var(--bg-raised); border-right: 1px solid var(--border-dim); display: flex; flex-direction: column; padding: var(--sp-5) var(--sp-4) var(--sp-4); gap: var(--sp-3); overflow: hidden; }
.cover-wrap { position: relative; width: 100%; }
.cover { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border-dim); display: block; }
.cover-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); border-radius: var(--radius-md); color: var(--text-faint); }
.cover-actions { display: flex; flex-direction: column; gap: var(--sp-2); }
.action-btn { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; padding: 7px var(--sp-3); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); border: 1px solid var(--border-strong); background: none; color: var(--text-muted); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.action-btn {
display: flex; align-items: center; gap: var(--sp-2); width: 100%;
padding: 7px var(--sp-3); border-radius: var(--radius-md);
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
border: 1px solid var(--border-strong); background: none; color: var(--text-muted);
cursor: pointer; text-align: left;
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.action-btn:hover:not(:disabled) { color: var(--accent-fg); border-color: var(--accent); background: var(--accent-muted); }
.action-btn:disabled { opacity: 0.4; cursor: default; }
.action-btn.active { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
.action-btn.folder-active { color: var(--text-secondary); border-color: var(--border-strong); }
/* Fixed-width icon slot — keeps all labels optically aligned */
.action-icon { display: flex; align-items: center; justify-content: center; width: 16px; flex-shrink: 0; }
.action-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.folder-wrap { position: relative; width: 100%; }
.folder-menu { position: absolute; bottom: calc(100% + 4px); left: 0; right: 0; background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-md); padding: var(--sp-1); display: flex; flex-direction: column; gap: 1px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 10; animation: scaleIn 0.1s ease both; transform-origin: bottom center; }
@@ -408,7 +470,8 @@
.sk-byline { height: 14px; width: 55%; background: var(--bg-overlay); border-radius: var(--radius-sm); animation: pulse 1.4s ease infinite; }
.close-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--text-faint); background: none; border: none; cursor: pointer; flex-shrink: 0; transition: color var(--t-base), background var(--t-base); }
.close-btn:hover { color: var(--text-muted); background: var(--bg-raised); }
.content-body { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); scrollbar-width: thin; }
.content-body { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); scrollbar-width: none; }
.content-body::-webkit-scrollbar { display: none; }
.error-banner { font-family: var(--font-ui); font-size: var(--text-xs); color: #f59e0b; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25); border-radius: var(--radius-sm); padding: 6px var(--sp-3); }
.sk-row { display: flex; gap: var(--sp-2); align-items: center; }
.sk-badge { height: 20px; width: 54px; background: var(--bg-overlay); border-radius: var(--radius-sm); animation: pulse 1.4s ease infinite; }
@@ -445,40 +508,29 @@
.meta-val { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-snug); }
.meta-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--accent-fg); text-decoration: none; transition: opacity var(--t-base); }
.meta-link:hover { opacity: 0.75; }
/* ── Thumbnail switcher ──────────────────────────────────────────────────── */
.thumb-switcher {
display: flex; flex-direction: column; gap: var(--sp-2);
border-top: 1px solid var(--border-dim); padding-top: var(--sp-3);
}
.thumb-switcher-label {
font-family: var(--font-ui); font-size: var(--text-2xs);
color: var(--text-faint); letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.thumb-switcher-row {
display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.thumb-option {
display: flex; flex-direction: column; align-items: center; gap: 4px;
background: none; border: 1px solid var(--border-dim);
border-radius: var(--radius-sm); padding: 4px;
cursor: pointer; transition: border-color var(--t-base), background var(--t-base);
flex: 1; min-width: 52px; max-width: 64px;
}
.thumb-option:hover { border-color: var(--border-strong); background: var(--bg-overlay); }
.thumb-option-active { border-color: var(--accent) !important; background: var(--accent-muted) !important; }
.thumb-option-img {
width: 100%; aspect-ratio: 2/3; object-fit: cover;
border-radius: 2px; display: block;
}
.thumb-option-label {
font-family: var(--font-ui); font-size: 9px;
color: var(--text-faint); letter-spacing: var(--tracking-wide);
text-align: center; line-height: 1.2;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
width: 100%;
}
.thumb-option-active .thumb-option-label { color: var(--accent-fg); }
/* ── Link picker ─────────────────────────────────────────────────────────── */
.link-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: calc(var(--z-settings) + 1); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fadeIn 0.1s ease both; }
.link-modal { width: min(460px, calc(100vw - 48px)); max-height: 70vh; display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-base); border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.6); animation: scaleIn 0.14s ease both; }
.link-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
.link-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
.link-hint { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); line-height: var(--leading-snug); padding: var(--sp-3) var(--sp-5) 0; flex-shrink: 0; }
.link-search-wrap { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
.link-search { width: 100%; background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 6px 10px; color: var(--text-primary); font-size: var(--text-sm); outline: none; transition: border-color var(--t-base); }
.link-search:focus { border-color: var(--border-strong); }
.link-list { flex: 1; overflow-y: auto; padding: var(--sp-2); scrollbar-width: none; }
.link-list::-webkit-scrollbar { display: none; }
.link-empty { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); padding: var(--sp-4) var(--sp-3); text-align: center; letter-spacing: var(--tracking-wide); }
.link-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: 8px var(--sp-3); border-radius: var(--radius-md); border: none; background: none; text-align: left; cursor: pointer; transition: background var(--t-fast); }
.link-row:hover { background: var(--bg-raised); }
.link-row-linked { background: var(--accent-muted) !important; }
.link-thumb { width: 34px; height: 48px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-dim); }
.link-info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-width: 0; }
.link-manga-title { font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-source { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
.link-status { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); flex-shrink: 0; padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); }
.link-row-linked .link-status { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
@keyframes pulse { 0%,100% { opacity: 0.4 } 50% { opacity: 0.8 } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
</style>