mirror of
https://github.com/moku-project/Moku.git
synced 2026-06-13 09:19:56 -05:00
Chore: Patched Library Completed & Added Home-Page
This commit is contained in:
Youwes09
@@ -0,0 +1,461 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { BookmarkSimple, FolderSimplePlus, Folder, Sparkle } from "phosphor-svelte";
|
||||
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 } 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";
|
||||
|
||||
// ── Config ────────────────────────────────────────────────────────────────────
|
||||
const GENRE_TABS = ["All", "Action", "Romance", "Fantasy", "Comedy", "Drama", "Horror", "Sci-Fi", "Adventure", "Thriller"];
|
||||
const GRID_LIMIT = 60; // max rendered per tab
|
||||
const LOCAL_THRESHOLD = 20; // fan out to sources if local results below this
|
||||
const CONCURRENCY = 4; // parallel source requests — kept conservative to not saturate connections
|
||||
const BATCH_INTERVAL = 400; // ms between DOM updates during background source fan-out
|
||||
|
||||
const EXPLORE_ALL_MANGA = `
|
||||
query ExploreAllManga {
|
||||
mangas(orderBy: IN_LIBRARY_AT, orderByType: DESC) {
|
||||
nodes { id title thumbnailUrl inLibrary genre status source { id displayName } }
|
||||
}
|
||||
}
|
||||
`;
|
||||
const MANGAS_BY_GENRE = `
|
||||
query MangasByGenre($genre: String!, $first: Int) {
|
||||
mangas(
|
||||
filter: { genre: { includesInsensitive: $genre } }
|
||||
first: $first orderBy: IN_LIBRARY_AT orderByType: DESC
|
||||
) { nodes { id title thumbnailUrl inLibrary genre status source { id displayName } } }
|
||||
}
|
||||
`;
|
||||
|
||||
// ── State ─────────────────────────────────────────────────────────────────────
|
||||
let allManga: Manga[] = []; // local library — loaded once, never triggers lag
|
||||
let allSources: Source[] = []; // all deduped sources — loaded once
|
||||
let loadingLib = true;
|
||||
let loadError = false;
|
||||
|
||||
// Per-genre result map. Keyed by genre string.
|
||||
// "All" key → local library deduped by title
|
||||
// Each tab key → local + background source results, deduped id+title
|
||||
let genreResults = new Map<string, Manga[]>();
|
||||
let genreLoading = false; // true only during the initial local fetch for a new tab
|
||||
let currentGenre = "All";
|
||||
let genreAbort: AbortController | null = null;
|
||||
|
||||
// batch timer handle for background source fan-out
|
||||
let batchTimer: ReturnType<typeof setInterval> | null = null;
|
||||
// accumulator: source results collected between batches
|
||||
let batchAccum = new Map<string, Manga[]>(); // genre → pending mangas
|
||||
|
||||
// Context menu
|
||||
let ctx: { x: number; y: number; manga: Manga } | null = null;
|
||||
|
||||
// ── 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));
|
||||
}
|
||||
|
||||
// ── Concurrent fan-out — conservative concurrency keeps connections free ──────
|
||||
async function runConcurrent<T>(items: T[], fn: (i: T) => Promise<void>, signal: AbortSignal) {
|
||||
let i = 0;
|
||||
const worker = async () => {
|
||||
while (i < items.length) {
|
||||
if (signal.aborted) return;
|
||||
await fn(items[i++]).catch(() => {});
|
||||
}
|
||||
};
|
||||
await Promise.all(Array.from({ length: Math.min(CONCURRENCY, items.length) }, worker));
|
||||
}
|
||||
|
||||
// ── Batched DOM flush ─────────────────────────────────────────────────────────
|
||||
// Source fan-out collects results in batchAccum. A timer fires every BATCH_INTERVAL
|
||||
// ms and flushes them into genreResults in one shot — preventing a Svelte re-render
|
||||
// per-source and keeping the grid smooth.
|
||||
function startBatchFlush() {
|
||||
if (batchTimer) return;
|
||||
batchTimer = setInterval(() => {
|
||||
if (batchAccum.size === 0) return;
|
||||
for (const [genre, incoming] of batchAccum) {
|
||||
const current = genreResults.get(genre) ?? [];
|
||||
genreResults.set(genre, dedup([...current, ...incoming]).slice(0, GRID_LIMIT));
|
||||
}
|
||||
batchAccum.clear();
|
||||
genreResults = new Map(genreResults); // single Svelte reactivity trigger
|
||||
}, BATCH_INTERVAL);
|
||||
}
|
||||
|
||||
function stopBatchFlush() {
|
||||
if (batchTimer) { clearInterval(batchTimer); batchTimer = null; }
|
||||
// Final flush of anything remaining
|
||||
if (batchAccum.size > 0) {
|
||||
for (const [genre, incoming] of batchAccum) {
|
||||
const current = genreResults.get(genre) ?? [];
|
||||
genreResults.set(genre, dedup([...current, ...incoming]).slice(0, GRID_LIMIT));
|
||||
}
|
||||
batchAccum.clear();
|
||||
genreResults = new Map(genreResults);
|
||||
}
|
||||
}
|
||||
|
||||
// Push source results into the accumulator (never touches the DOM directly)
|
||||
function accumulate(genre: string, mangas: Manga[]) {
|
||||
const existing = batchAccum.get(genre) ?? [];
|
||||
batchAccum.set(genre, [...existing, ...mangas]);
|
||||
}
|
||||
|
||||
// ── Background source fan-out for a genre ────────────────────────────────────
|
||||
// Runs entirely in the background. Results appear in batches via batchAccum.
|
||||
// Does NOT set genreLoading = true — the local result is already showing.
|
||||
async function fanOutSources(genre: string, ctrl: AbortController) {
|
||||
if (!allSources.length) return;
|
||||
const lang = $settings.preferredExtensionLang || "en";
|
||||
const srcs = dedupeSources(allSources, lang);
|
||||
|
||||
startBatchFlush();
|
||||
|
||||
await runConcurrent(srcs, async src => {
|
||||
if (ctrl.signal.aborted) return;
|
||||
const pageKey = CACHE_KEYS.sourceMangaPage(src.id, "SEARCH", 1, [genre]);
|
||||
const result = await cache.get<{ mangas: Manga[]; hasNextPage: boolean }>(
|
||||
pageKey,
|
||||
() => gql<{ fetchSourceManga: { mangas: Manga[]; hasNextPage: boolean } }>(
|
||||
FETCH_SOURCE_MANGA, { source: src.id, type: "SEARCH", page: 1, query: genre }, ctrl.signal
|
||||
).then(d => d.fetchSourceManga),
|
||||
5 * 60 * 1000, // 5-min TTL — results are stable enough to cache
|
||||
).catch(() => null);
|
||||
|
||||
if (!result || ctrl.signal.aborted) return;
|
||||
|
||||
// Only accumulate results that actually match the genre (client-side AND check)
|
||||
const matching = result.mangas.filter(m =>
|
||||
(m.genre ?? []).some(g => g.toLowerCase() === genre.toLowerCase())
|
||||
|| result.mangas.length <= 5 // source returns few results, trust them
|
||||
);
|
||||
|
||||
accumulate(genre, matching.length > 0 ? matching : result.mangas);
|
||||
}, ctrl.signal);
|
||||
|
||||
if (!ctrl.signal.aborted) stopBatchFlush();
|
||||
}
|
||||
|
||||
// ── Tab switch ───────────────────────────────────────────────────────────────
|
||||
// 1. Show local results immediately (no spinner if already cached)
|
||||
// 2. If local < LOCAL_THRESHOLD, kick off background fan-out silently
|
||||
async function switchGenre(genre: string) {
|
||||
if (currentGenre === genre) return;
|
||||
|
||||
// Abort any in-flight fan-out for the previous tab
|
||||
genreAbort?.abort();
|
||||
stopBatchFlush();
|
||||
|
||||
currentGenre = genre;
|
||||
|
||||
if (genre === "All") {
|
||||
// "All" is just the deduped local library — no network needed
|
||||
genreResults.set("All", dedup(allManga).slice(0, GRID_LIMIT));
|
||||
genreResults = new Map(genreResults);
|
||||
return;
|
||||
}
|
||||
|
||||
// If we already have a fully-populated cache for this genre, show it instantly
|
||||
const cached = genreResults.get(genre);
|
||||
if (cached && cached.length >= LOCAL_THRESHOLD) return;
|
||||
|
||||
// Fetch local results (fast — single DB query)
|
||||
genreLoading = true;
|
||||
const ctrl = new AbortController();
|
||||
genreAbort = ctrl;
|
||||
|
||||
try {
|
||||
const localData = await cache.get(CACHE_KEYS.GENRE(genre), () =>
|
||||
gql<{ mangas: { nodes: Manga[] } }>(MANGAS_BY_GENRE, { genre, first: GRID_LIMIT }, ctrl.signal)
|
||||
.then(d => d.mangas.nodes)
|
||||
);
|
||||
if (ctrl.signal.aborted) return;
|
||||
|
||||
const local = dedup(localData);
|
||||
genreResults.set(genre, local.slice(0, GRID_LIMIT));
|
||||
genreResults = new Map(genreResults);
|
||||
genreLoading = false;
|
||||
|
||||
// If sparse, fan out to sources in the background — no loading state shown
|
||||
if (local.length < LOCAL_THRESHOLD) {
|
||||
fanOutSources(genre, ctrl).catch(() => {}); // fully detached background task
|
||||
}
|
||||
} catch (e: any) {
|
||||
if (e?.name !== "AbortError") console.error(e);
|
||||
if (!ctrl.signal.aborted) genreLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Context menu ──────────────────────────────────────────────────────────────
|
||||
function openCtx(e: MouseEvent, m: Manga) {
|
||||
e.preventDefault(); e.stopPropagation();
|
||||
ctx = { x: e.clientX, y: e.clientY, manga: m };
|
||||
}
|
||||
function buildCtxItems(m: Manga): MenuEntry[] {
|
||||
return [
|
||||
{
|
||||
label: m.inLibrary ? "In Library" : "Add to library",
|
||||
icon: BookmarkSimple, disabled: m.inLibrary,
|
||||
onClick: () => gql(UPDATE_MANGA, { id: m.id, inLibrary: true })
|
||||
.then(() => cache.clear(CACHE_KEYS.LIBRARY)).catch(console.error),
|
||||
},
|
||||
...($settings.folders.length > 0 ? [
|
||||
{ separator: true } as MenuEntry,
|
||||
...$settings.folders.map(f => ({
|
||||
label: f.mangaIds.includes(m.id) ? `✓ ${f.name}` : f.name,
|
||||
icon: Folder,
|
||||
onClick: () => assignMangaToFolder(f.id, m.id),
|
||||
})),
|
||||
] : []),
|
||||
{ separator: true },
|
||||
{
|
||||
label: "New folder & add", icon: FolderSimplePlus,
|
||||
onClick: () => {
|
||||
const n = prompt("Folder name:");
|
||||
if (n?.trim()) { const id = addFolder(n.trim()); assignMangaToFolder(id, m.id); }
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
// ── Initial load ──────────────────────────────────────────────────────────────
|
||||
// 1. Load local library → populate "All" tab immediately
|
||||
// 2. Load source list in background (needed for genre fan-out, not needed for initial render)
|
||||
function loadAll() {
|
||||
loadingLib = true; loadError = false;
|
||||
const lang = $settings.preferredExtensionLang || "en";
|
||||
|
||||
// Local library — populates "All" tab
|
||||
cache.get(CACHE_KEYS.LIBRARY, () =>
|
||||
gql<{ mangas: { nodes: Manga[] } }>(EXPLORE_ALL_MANGA).then(d => d.mangas.nodes)
|
||||
).then(m => {
|
||||
allManga = dedupeMangaById(m);
|
||||
genreResults.set("All", dedup(allManga).slice(0, GRID_LIMIT));
|
||||
genreResults = new Map(genreResults);
|
||||
}).catch(e => { console.error(e); loadError = true; })
|
||||
.finally(() => { loadingLib = false; });
|
||||
|
||||
// Source list — loaded silently in background, cached for the session
|
||||
// Not awaited — the grid doesn't depend on this for the initial render
|
||||
cache.get(CACHE_KEYS.SOURCES, () =>
|
||||
gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
|
||||
.then(d => dedupeSources(d.sources.nodes, lang)),
|
||||
Infinity, // pin for session — source list is stable
|
||||
).then(srcs => {
|
||||
allSources = srcs;
|
||||
}).catch(console.error);
|
||||
}
|
||||
|
||||
onMount(loadAll);
|
||||
onDestroy(() => {
|
||||
genreAbort?.abort();
|
||||
stopBatchFlush();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- ── Source browse passthrough ─────────────────────────────────────────────── -->
|
||||
{#if $activeSource}
|
||||
<SourceBrowse />
|
||||
{:else}
|
||||
<div class="root">
|
||||
|
||||
<!-- ── Header: page label + genre pill tabs ──────────────────────────────── -->
|
||||
<div class="header">
|
||||
<span class="heading">Discover</span>
|
||||
<div class="tab-strip">
|
||||
{#each GENRE_TABS as tab (tab)}
|
||||
<button
|
||||
class="genre-tab"
|
||||
class:active={currentGenre === tab}
|
||||
on:click={() => switchGenre(tab)}
|
||||
>
|
||||
{#if tab === "All"}<Sparkle size={10} weight="fill" />{/if}
|
||||
{tab}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Body ──────────────────────────────────────────────────────────────── -->
|
||||
<div class="body">
|
||||
|
||||
{#if isLoading}
|
||||
<!-- Skeleton — shown only during first local fetch, never during bg fan-out -->
|
||||
<div class="manga-grid">
|
||||
{#each Array(24) as _, i (i)}
|
||||
<div class="card-skeleton"><div class="skeleton cover-area"></div></div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{:else if loadError && visibleGrid.length === 0}
|
||||
<div class="empty">
|
||||
<span>Could not reach Suwayomi</span>
|
||||
<button class="retry-btn" on:click={loadAll}>Retry</button>
|
||||
</div>
|
||||
|
||||
{:else if visibleGrid.length === 0}
|
||||
<div class="empty"><span>Nothing found for "{currentGenre}"</span></div>
|
||||
|
||||
{:else}
|
||||
<div class="manga-grid">
|
||||
{#each visibleGrid as m (m.id)}
|
||||
<button
|
||||
class="manga-card"
|
||||
on:click={() => previewManga.set(m)}
|
||||
on:contextmenu={(e) => openCtx(e, m)}
|
||||
>
|
||||
<div class="cover-wrap">
|
||||
<img
|
||||
src={thumbUrl(m.thumbnailUrl)} alt={m.title}
|
||||
class="cover" loading="lazy" decoding="async"
|
||||
/>
|
||||
<div class="cover-gradient"></div>
|
||||
{#if m.inLibrary}<span class="lib-badge">Saved</span>{/if}
|
||||
<div class="card-footer">
|
||||
<p class="card-title">{m.title}</p>
|
||||
{#if m.source?.displayName}
|
||||
<p class="card-source">{m.source.displayName}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if ctx}
|
||||
<ContextMenu x={ctx.x} y={ctx.y} items={buildCtxItems(ctx.manga)} onClose={() => ctx = null} />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
|
||||
|
||||
/* ── Header ──────────────────────────────────────────────────────────────── */
|
||||
.header {
|
||||
display: flex; align-items: center; gap: var(--sp-4); flex-shrink: 0;
|
||||
padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--border-dim);
|
||||
overflow-x: auto; scrollbar-width: none;
|
||||
}
|
||||
.header::-webkit-scrollbar { display: none; }
|
||||
.heading {
|
||||
font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint);
|
||||
letter-spacing: var(--tracking-wider); text-transform: uppercase; flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Genre pill tabs */
|
||||
.tab-strip { display: flex; gap: var(--sp-1); flex-shrink: 0; }
|
||||
.genre-tab {
|
||||
display: flex; align-items: center; gap: 5px;
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
|
||||
padding: 4px 12px; border-radius: var(--radius-full);
|
||||
border: 1px solid var(--border-dim); background: none; color: var(--text-faint);
|
||||
cursor: pointer; white-space: nowrap;
|
||||
transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
|
||||
}
|
||||
.genre-tab:hover { color: var(--text-muted); border-color: var(--border-strong); background: var(--bg-raised); }
|
||||
.genre-tab.active { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
|
||||
|
||||
/* ── Body ────────────────────────────────────────────────────────────────── */
|
||||
.body {
|
||||
flex: 1; overflow-y: auto;
|
||||
padding: var(--sp-4) var(--sp-5) var(--sp-6);
|
||||
/* GPU-accelerated scroll — does NOT promote every card, only the scroll container */
|
||||
will-change: scroll-position;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
/* ── Grid ────────────────────────────────────────────────────────────────── */
|
||||
.manga-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(clamp(90px, 11vw, 130px), 1fr));
|
||||
gap: var(--sp-2);
|
||||
align-content: start;
|
||||
/* Isolate the grid from the rest of the layout — prevents full-page reflow on update */
|
||||
contain: layout style;
|
||||
}
|
||||
|
||||
/* ── Card ────────────────────────────────────────────────────────────────── */
|
||||
.manga-card {
|
||||
background: none; border: none; padding: 0; cursor: pointer; text-align: left;
|
||||
/* NO will-change here — only promote on actual hover to avoid 60+ simultaneous GPU layers */
|
||||
}
|
||||
.manga-card:hover .cover { filter: brightness(1.08) saturate(1.05); transform: scale(1.02); }
|
||||
.manga-card:hover .card-title { color: #fff; }
|
||||
/* Promote only the hovered card to its own GPU layer */
|
||||
.manga-card:hover { will-change: transform; }
|
||||
|
||||
.cover-wrap {
|
||||
position: relative; aspect-ratio: 2/3; overflow: hidden;
|
||||
border-radius: var(--radius-md); background: var(--bg-raised);
|
||||
border: 1px solid var(--border-dim);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
|
||||
}
|
||||
.cover {
|
||||
width: 100%; height: 100%; object-fit: cover; display: block;
|
||||
transition: filter 0.15s ease, transform 0.15s ease;
|
||||
/* will-change removed — only the parent card gets it on hover */
|
||||
}
|
||||
.cover-gradient {
|
||||
position: absolute; inset: 0;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.15) 50%, transparent 72%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.lib-badge {
|
||||
position: absolute; top: var(--sp-1); right: var(--sp-1);
|
||||
font-family: var(--font-ui); font-size: 9px; letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase; background: var(--accent-muted); color: var(--accent-fg);
|
||||
border: 1px solid var(--accent-dim); padding: 1px 5px; border-radius: var(--radius-sm);
|
||||
}
|
||||
.card-footer {
|
||||
position: absolute; bottom: 0; left: 0; right: 0;
|
||||
padding: var(--sp-2); pointer-events: none;
|
||||
}
|
||||
.card-title {
|
||||
font-size: var(--text-xs); font-weight: var(--weight-medium);
|
||||
color: rgba(255,255,255,0.92); line-height: var(--leading-snug);
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
||||
text-shadow: 0 1px 4px rgba(0,0,0,0.7);
|
||||
transition: color var(--t-base);
|
||||
}
|
||||
.card-source {
|
||||
font-family: var(--font-ui); font-size: 9px; color: rgba(255,255,255,0.45);
|
||||
letter-spacing: var(--tracking-wide); margin-top: 1px;
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* ── Skeleton ────────────────────────────────────────────────────────────── */
|
||||
.card-skeleton { padding: 0; }
|
||||
.cover-area { aspect-ratio: 2/3; border-radius: var(--radius-md); }
|
||||
|
||||
/* ── Empty / error ───────────────────────────────────────────────────────── */
|
||||
.empty {
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
gap: var(--sp-3); padding: var(--sp-10) var(--sp-6);
|
||||
color: var(--text-faint); font-family: var(--font-ui); font-size: var(--text-xs);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
.retry-btn {
|
||||
padding: 6px 16px; border-radius: var(--radius-md); border: 1px solid var(--border-dim);
|
||||
background: var(--bg-raised); color: var(--text-muted); cursor: pointer;
|
||||
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
<div>Explore.svelte</div>
|
||||
@@ -0,0 +1,698 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import {
|
||||
Play, ArrowRight, ArrowLeft, BookOpen, Clock, Fire, TrendUp,
|
||||
CalendarBlank, CheckCircle, Star, PushPin, X as XIcon,
|
||||
MagnifyingGlass,
|
||||
} from "phosphor-svelte";
|
||||
import { gql, thumbUrl } from "../../lib/client";
|
||||
import { GET_LIBRARY, GET_MANGA } from "../../lib/queries";
|
||||
import { cache, CACHE_KEYS } from "../../lib/cache";
|
||||
import {
|
||||
history, readingStats, settings, activeManga, navPage,
|
||||
previewManga, openReader, activeChapterList,
|
||||
COMPLETED_FOLDER_ID, setHeroSlot, updateSettings,
|
||||
} from "../../store";
|
||||
import type { HistoryEntry } from "../../store";
|
||||
import type { Manga } from "../../lib/types";
|
||||
|
||||
// ── Helpers ───────────────────────────────────────────────────────────────────
|
||||
function timeAgo(ts: number): string {
|
||||
const diff = Date.now() - ts, m = Math.floor(diff / 60000);
|
||||
if (m < 1) return "Just now";
|
||||
if (m < 60) return `${m}m ago`;
|
||||
const h = Math.floor(m / 60);
|
||||
if (h < 24) return `${h}h ago`;
|
||||
const d = Math.floor(h / 24);
|
||||
if (d < 7) return `${d}d ago`;
|
||||
return new Date(ts).toLocaleDateString("en-US", { month: "short", day: "numeric" });
|
||||
}
|
||||
function formatReadTime(m: number): string {
|
||||
if (m < 60) return `${m}m`;
|
||||
const h = Math.floor(m / 60), r = m % 60;
|
||||
return r === 0 ? `${h}h` : `${h}h ${r}m`;
|
||||
}
|
||||
|
||||
// ── Library data — loaded once ────────────────────────────────────────────────
|
||||
let libraryManga: Manga[] = [];
|
||||
let loadingLibrary = true;
|
||||
let searchQuery = "";
|
||||
|
||||
onMount(() => {
|
||||
cache.get(CACHE_KEYS.LIBRARY, () =>
|
||||
gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY).then(d => d.mangas.nodes)
|
||||
).then(m => { libraryManga = m; })
|
||||
.catch(console.error)
|
||||
.finally(() => loadingLibrary = false);
|
||||
});
|
||||
|
||||
// ── Continue reading — deduped by manga ───────────────────────────────────────
|
||||
$: continueReading = (() => {
|
||||
const seen = new Set<number>();
|
||||
const out: HistoryEntry[] = [];
|
||||
for (const e of $history) {
|
||||
if (seen.has(e.mangaId)) continue;
|
||||
seen.add(e.mangaId);
|
||||
out.push(e);
|
||||
if (out.length >= 10) break;
|
||||
}
|
||||
return out;
|
||||
})();
|
||||
|
||||
// ── Hero slots ────────────────────────────────────────────────────────────────
|
||||
// Slot 0: always auto (first continue-reading entry, not pinnable)
|
||||
// Slots 1-3: pinned mangaId OR auto (next continue-reading entries)
|
||||
const TOTAL_SLOTS = 4;
|
||||
|
||||
interface HeroSlot {
|
||||
kind: "continue" | "pinned" | "empty";
|
||||
entry?: HistoryEntry; // for "continue"
|
||||
manga?: Manga; // for "pinned"
|
||||
slotIndex: number;
|
||||
}
|
||||
|
||||
$: resolvedSlots = (() => {
|
||||
const pins = $settings.heroSlots ?? [null, null, null, null];
|
||||
const slots: HeroSlot[] = [];
|
||||
|
||||
// Slot 0 — always continue reading
|
||||
const first = continueReading[0];
|
||||
slots.push(first
|
||||
? { kind: "continue", entry: first, slotIndex: 0 }
|
||||
: { kind: "empty", slotIndex: 0 }
|
||||
);
|
||||
|
||||
// Slots 1-3
|
||||
let historyIdx = 1; // which continueReading entry to use for auto
|
||||
for (let i = 1; i < TOTAL_SLOTS; i++) {
|
||||
const pinId = pins[i];
|
||||
if (pinId !== null && pinId !== undefined) {
|
||||
const manga = libraryManga.find(m => m.id === pinId);
|
||||
if (manga) { slots.push({ kind: "pinned", manga, slotIndex: i }); continue; }
|
||||
}
|
||||
// Auto — use next recent history entry
|
||||
const entry = continueReading[historyIdx];
|
||||
historyIdx++;
|
||||
slots.push(entry
|
||||
? { kind: "continue", entry, slotIndex: i }
|
||||
: { kind: "empty", slotIndex: i }
|
||||
);
|
||||
}
|
||||
return slots;
|
||||
})();
|
||||
|
||||
// ── Active hero index ─────────────────────────────────────────────────────────
|
||||
let activeIdx = 0;
|
||||
$: activeSlot = resolvedSlots[activeIdx];
|
||||
|
||||
// ── Manga detail for active pinned slot ───────────────────────────────────────
|
||||
// For "continue" slots we have thumbnailUrl from history.
|
||||
// For "pinned" slots we have the full Manga object.
|
||||
$: heroThumb = activeSlot?.kind === "pinned"
|
||||
? thumbUrl(activeSlot.manga?.thumbnailUrl ?? "")
|
||||
: activeSlot?.kind === "continue"
|
||||
? thumbUrl(activeSlot.entry?.thumbnailUrl ?? "")
|
||||
: "";
|
||||
|
||||
$: heroTitle = activeSlot?.kind === "pinned"
|
||||
? activeSlot.manga?.title ?? ""
|
||||
: activeSlot?.kind === "continue"
|
||||
? activeSlot.entry?.mangaTitle ?? ""
|
||||
: "";
|
||||
|
||||
$: heroManga = activeSlot?.kind === "pinned"
|
||||
? activeSlot.manga
|
||||
: activeSlot?.kind === "continue"
|
||||
? libraryManga.find(m => m.id === activeSlot.entry?.mangaId)
|
||||
: null;
|
||||
|
||||
$: heroEntry = activeSlot?.kind === "continue" ? activeSlot.entry : null;
|
||||
|
||||
function cycleNext() { activeIdx = (activeIdx + 1) % TOTAL_SLOTS; }
|
||||
function cyclePrev() { activeIdx = (activeIdx - 1 + TOTAL_SLOTS) % TOTAL_SLOTS; }
|
||||
function goToSlot(i: number) { activeIdx = i; }
|
||||
|
||||
// Keyboard: left/right arrow keys when no modal is open
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (e.target !== document.body && !(e.target instanceof HTMLElement && e.target.closest(".hero-section"))) return;
|
||||
if (e.key === "ArrowRight") cycleNext();
|
||||
if (e.key === "ArrowLeft") cyclePrev();
|
||||
}
|
||||
onMount(() => window.addEventListener("keydown", onKey));
|
||||
onDestroy(() => window.removeEventListener("keydown", onKey));
|
||||
|
||||
// ── Slot picker (pin / unpin) ─────────────────────────────────────────────────
|
||||
let pickerOpen = false;
|
||||
let pickerSlotIndex: 1 | 2 | 3 | null = null;
|
||||
let pickerSearch = "";
|
||||
|
||||
$: pickerResults = pickerSearch.trim()
|
||||
? libraryManga.filter(m => m.title.toLowerCase().includes(pickerSearch.toLowerCase())).slice(0, 20)
|
||||
: libraryManga.slice(0, 20);
|
||||
|
||||
function openPicker(slotIndex: 1 | 2 | 3) {
|
||||
pickerSlotIndex = slotIndex;
|
||||
pickerOpen = true;
|
||||
pickerSearch = "";
|
||||
}
|
||||
function closePicker() { pickerOpen = false; pickerSlotIndex = null; }
|
||||
|
||||
function pinManga(manga: Manga) {
|
||||
if (pickerSlotIndex === null) return;
|
||||
setHeroSlot(pickerSlotIndex, manga.id);
|
||||
closePicker();
|
||||
}
|
||||
function unpinSlot(i: 1 | 2 | 3) {
|
||||
setHeroSlot(i, null);
|
||||
}
|
||||
|
||||
function resumeActive() {
|
||||
if (!heroEntry && heroManga) {
|
||||
activeManga.set(heroManga);
|
||||
return;
|
||||
}
|
||||
if (!heroEntry) return;
|
||||
const ch = $activeChapterList.find(c => c.id === heroEntry!.chapterId);
|
||||
if (ch && $activeChapterList.length > 0) openReader(ch, $activeChapterList);
|
||||
else activeManga.set({ id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any);
|
||||
}
|
||||
|
||||
// ── Recently completed ────────────────────────────────────────────────────────
|
||||
$: completedIds = $settings.folders.find(f => f.id === COMPLETED_FOLDER_ID)?.mangaIds ?? [];
|
||||
$: completedManga = completedIds.length > 0
|
||||
? libraryManga.filter(m => completedIds.includes(m.id)).slice(0, 12)
|
||||
: [];
|
||||
|
||||
// ── Recent activity ───────────────────────────────────────────────────────────
|
||||
$: recentHistory = $history.slice(0, 8);
|
||||
|
||||
// ── Stats ─────────────────────────────────────────────────────────────────────
|
||||
$: stats = $readingStats;
|
||||
$: hasStats = stats.totalChaptersRead > 0;
|
||||
|
||||
function handleRowWheel(e: WheelEvent) {
|
||||
if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
|
||||
const el = e.currentTarget as HTMLElement;
|
||||
e.stopPropagation(); el.scrollLeft += e.deltaY;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<div class="page-header">
|
||||
<span class="heading">Home</span>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
|
||||
<!-- ── Hero section ───────────────────────────────────────────────────────── -->
|
||||
<div class="hero-section" tabindex="-1">
|
||||
<div class="hero-stage">
|
||||
|
||||
<!-- Cover backdrop (blurred) -->
|
||||
{#if heroThumb}
|
||||
<div class="hero-backdrop" style="background-image:url({heroThumb})"></div>
|
||||
{:else}
|
||||
<div class="hero-backdrop hero-backdrop-empty"></div>
|
||||
{/if}
|
||||
<div class="hero-scrim"></div>
|
||||
|
||||
<!-- Left: Cover art -->
|
||||
<div class="hero-cover-col">
|
||||
{#if heroThumb}
|
||||
<img src={heroThumb} alt={heroTitle} class="hero-cover" loading="eager" decoding="async" />
|
||||
{:else}
|
||||
<div class="hero-cover hero-cover-placeholder">
|
||||
<BookOpen size={32} weight="light" class="placeholder-book" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Right: Info panel -->
|
||||
<div class="hero-info-col">
|
||||
{#if activeSlot?.kind === "empty"}
|
||||
<p class="hero-empty-label">Slot empty</p>
|
||||
<p class="hero-empty-sub">
|
||||
{activeSlot.slotIndex === 0
|
||||
? "Start reading a manga to see it here"
|
||||
: "Pin a manga or read more to fill this slot"}
|
||||
</p>
|
||||
{#if activeSlot.slotIndex !== 0}
|
||||
<button class="hero-cta" on:click={() => openPicker(activeSlot.slotIndex as 1|2|3)}>
|
||||
<PushPin size={13} weight="fill" /> Pin a manga
|
||||
</button>
|
||||
{/if}
|
||||
{:else}
|
||||
<!-- Title & meta -->
|
||||
<div class="hero-tags">
|
||||
{#if activeSlot?.kind === "continue"}
|
||||
<span class="hero-tag hero-tag-reading"><Play size={9} weight="fill" /> Reading</span>
|
||||
{:else}
|
||||
<span class="hero-tag hero-tag-pinned"><PushPin size={9} weight="fill" /> Pinned</span>
|
||||
{/if}
|
||||
{#each (heroManga?.genre ?? []).slice(0, 3) as g}
|
||||
<span class="hero-tag">{g}</span>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<h2 class="hero-title">{heroTitle}</h2>
|
||||
|
||||
{#if heroManga?.author}
|
||||
<p class="hero-author">{heroManga.author}</p>
|
||||
{/if}
|
||||
|
||||
{#if heroEntry}
|
||||
<p class="hero-chapter">
|
||||
<Clock size={11} weight="light" />
|
||||
{heroEntry.chapterName}
|
||||
{#if heroEntry.pageNumber > 1}<span class="hero-page">· p.{heroEntry.pageNumber}</span>{/if}
|
||||
<span class="hero-time">{timeAgo(heroEntry.readAt)}</span>
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{#if heroManga?.description}
|
||||
<p class="hero-desc">{heroManga.description}</p>
|
||||
{/if}
|
||||
|
||||
<!-- CTAs -->
|
||||
<div class="hero-actions">
|
||||
{#if activeSlot?.kind === "continue"}
|
||||
<button class="hero-cta" on:click={resumeActive}>
|
||||
<Play size={13} weight="fill" /> Resume
|
||||
</button>
|
||||
{:else}
|
||||
<button class="hero-cta" on:click={() => heroManga && previewManga.set(heroManga)}>
|
||||
<BookOpen size={13} weight="light" /> View manga
|
||||
</button>
|
||||
{/if}
|
||||
{#if activeSlot?.slotIndex !== 0}
|
||||
{#if activeSlot?.kind === "pinned"}
|
||||
<button class="hero-cta-ghost" on:click={() => unpinSlot(activeSlot.slotIndex as 1|2|3)}>
|
||||
<XIcon size={11} weight="bold" /> Unpin
|
||||
</button>
|
||||
{:else}
|
||||
<button class="hero-cta-ghost" on:click={() => openPicker(activeSlot!.slotIndex as 1|2|3)}>
|
||||
<PushPin size={11} weight="light" /> Pin a manga
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Nav arrows -->
|
||||
<button class="hero-nav hero-nav-left" on:click={cyclePrev} aria-label="Previous">
|
||||
<ArrowLeft size={16} weight="bold" />
|
||||
</button>
|
||||
<button class="hero-nav hero-nav-right" on:click={cycleNext} aria-label="Next">
|
||||
<ArrowRight size={16} weight="bold" />
|
||||
</button>
|
||||
|
||||
<!-- Dot indicators -->
|
||||
<div class="hero-dots">
|
||||
{#each resolvedSlots as slot, i}
|
||||
<button
|
||||
class="hero-dot"
|
||||
class:hero-dot-active={activeIdx === i}
|
||||
class:hero-dot-pinned={slot.kind === "pinned"}
|
||||
on:click={() => goToSlot(i)}
|
||||
aria-label="Go to slot {i + 1}"
|
||||
></button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<!-- Slot index label -->
|
||||
<div class="hero-counter">{activeIdx + 1} / {TOTAL_SLOTS}</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Stats strip ─────────────────────────────────────────────────────────── -->
|
||||
{#if hasStats}
|
||||
<div class="stats-strip">
|
||||
<div class="stat-card">
|
||||
<Fire size={16} weight="fill" class="stat-fire" />
|
||||
<span class="stat-val accent">{stats.currentStreakDays}</span>
|
||||
<span class="stat-label">day streak</span>
|
||||
</div>
|
||||
<div class="stat-div"></div>
|
||||
<div class="stat-card">
|
||||
<BookOpen size={15} weight="light" class="stat-neutral" />
|
||||
<span class="stat-val">{stats.totalChaptersRead}</span>
|
||||
<span class="stat-label">chapters</span>
|
||||
</div>
|
||||
<div class="stat-div"></div>
|
||||
<div class="stat-card">
|
||||
<Clock size={15} weight="light" class="stat-neutral" />
|
||||
<span class="stat-val">{formatReadTime(stats.totalMinutesRead)}</span>
|
||||
<span class="stat-label">read time</span>
|
||||
</div>
|
||||
<div class="stat-div"></div>
|
||||
<div class="stat-card">
|
||||
<TrendUp size={15} weight="light" class="stat-neutral" />
|
||||
<span class="stat-val">{stats.totalMangaRead}</span>
|
||||
<span class="stat-label">series</span>
|
||||
</div>
|
||||
<div class="stat-div"></div>
|
||||
<div class="stat-card">
|
||||
<CalendarBlank size={15} weight="light" class="stat-neutral" />
|
||||
<span class="stat-val muted">{stats.longestStreakDays}d</span>
|
||||
<span class="stat-label">best streak</span>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- ── Recently Completed ──────────────────────────────────────────────────── -->
|
||||
{#if completedIds.length > 0 && completedManga.length > 0}
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<span class="section-title"><CheckCircle size={11} weight="bold" /> Recently Completed</span>
|
||||
<button class="see-all" on:click={() => navPage.set("library")}>View all <ArrowRight size={10} weight="bold" /></button>
|
||||
</div>
|
||||
<div class="mini-row" on:wheel|preventDefault={handleRowWheel}>
|
||||
{#each completedManga as m (m.id)}
|
||||
<button class="mini-card" on:click={() => previewManga.set(m)}>
|
||||
<div class="mini-cover-wrap">
|
||||
<img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="mini-cover" loading="lazy" decoding="async" />
|
||||
<div class="completed-check"><CheckCircle size={14} weight="fill" /></div>
|
||||
</div>
|
||||
<p class="mini-title">{m.title}</p>
|
||||
</button>
|
||||
{/each}
|
||||
<div class="ghost" aria-hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- ── Recent Activity ────────────────────────────────────────────────────── -->
|
||||
{#if recentHistory.length > 0}
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<span class="section-title"><Clock size={11} weight="bold" /> Recent Activity</span>
|
||||
<button class="see-all" on:click={() => navPage.set("history")}>Full history <ArrowRight size={10} weight="bold" /></button>
|
||||
</div>
|
||||
<div class="activity-list">
|
||||
{#each recentHistory as entry (entry.chapterId)}
|
||||
<button class="activity-row" on:click={() => {
|
||||
const ch = $activeChapterList.find(c => c.id === entry.chapterId);
|
||||
if (ch && $activeChapterList.length > 0) openReader(ch, $activeChapterList);
|
||||
else activeManga.set({ id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any);
|
||||
}}>
|
||||
<div class="activity-thumb-wrap">
|
||||
<img src={thumbUrl(entry.thumbnailUrl)} alt={entry.mangaTitle} class="activity-thumb" loading="lazy" decoding="async" />
|
||||
</div>
|
||||
<div class="activity-info">
|
||||
<span class="activity-title">{entry.mangaTitle}</span>
|
||||
<span class="activity-chapter">
|
||||
{entry.chapterName}
|
||||
{#if entry.pageNumber > 1}<span class="activity-page">· p.{entry.pageNumber}</span>{/if}
|
||||
</span>
|
||||
</div>
|
||||
<span class="activity-time">{timeAgo(entry.readAt)}</span>
|
||||
<div class="activity-play"><Play size={11} weight="fill" /></div>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="empty-activity">
|
||||
<p class="empty-text">Start reading to see activity here</p>
|
||||
<button class="empty-cta" on:click={() => navPage.set("library")}>
|
||||
Open Library <ArrowRight size={12} weight="bold" />
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Slot picker modal ──────────────────────────────────────────────────────── -->
|
||||
{#if pickerOpen}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="picker-backdrop" on:click|self={closePicker}>
|
||||
<div class="picker-modal">
|
||||
<div class="picker-header">
|
||||
<span class="picker-title">Pin manga to slot {(pickerSlotIndex ?? 0) + 1}</span>
|
||||
<button class="picker-close" on:click={closePicker}><XIcon size={14} weight="light" /></button>
|
||||
</div>
|
||||
<div class="picker-search-wrap">
|
||||
<MagnifyingGlass size={13} weight="light" class="picker-search-icon" />
|
||||
<input class="picker-search" placeholder="Search library…" bind:value={pickerSearch} autofocus />
|
||||
</div>
|
||||
<div class="picker-list">
|
||||
{#if loadingLibrary}
|
||||
<p class="picker-empty">Loading library…</p>
|
||||
{:else if pickerResults.length === 0}
|
||||
<p class="picker-empty">No results</p>
|
||||
{:else}
|
||||
{#each pickerResults as m (m.id)}
|
||||
<button class="picker-row" on:click={() => pinManga(m)}>
|
||||
<img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="picker-thumb" loading="lazy" decoding="async" />
|
||||
<div class="picker-info">
|
||||
<span class="picker-manga-title">{m.title}</span>
|
||||
{#if m.source?.displayName}<span class="picker-source">{m.source.displayName}</span>{/if}
|
||||
</div>
|
||||
<PushPin size={13} weight="light" class="picker-pin-icon" />
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
|
||||
|
||||
.page-header {
|
||||
display: flex; align-items: center; padding: var(--sp-4) var(--sp-6);
|
||||
border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
|
||||
}
|
||||
.heading { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
|
||||
|
||||
.body { flex: 1; overflow-y: auto; padding-bottom: var(--sp-8); will-change: scroll-position; }
|
||||
|
||||
/* ── Hero stage ───────────────────────────────────────────────────────────── */
|
||||
.hero-section { padding: var(--sp-5) var(--sp-6) var(--sp-2); outline: none; }
|
||||
.hero-stage {
|
||||
position: relative; border-radius: var(--radius-xl); overflow: hidden;
|
||||
height: 220px; display: flex; align-items: stretch;
|
||||
background: var(--bg-raised); border: 1px solid var(--border-dim);
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.35);
|
||||
}
|
||||
|
||||
/* Blurred backdrop */
|
||||
.hero-backdrop {
|
||||
position: absolute; inset: -10px;
|
||||
background-size: cover; background-position: center;
|
||||
filter: blur(18px) saturate(1.2) brightness(0.45);
|
||||
transform: scale(1.05);
|
||||
pointer-events: none; z-index: 0;
|
||||
}
|
||||
.hero-backdrop-empty { background: var(--bg-void); filter: none; }
|
||||
.hero-scrim {
|
||||
position: absolute; inset: 0;
|
||||
background: linear-gradient(to right, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.4) 100%);
|
||||
z-index: 1; pointer-events: none;
|
||||
}
|
||||
|
||||
/* Cover column */
|
||||
.hero-cover-col {
|
||||
position: relative; z-index: 2; flex-shrink: 0;
|
||||
width: 130px; padding: var(--sp-4);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.hero-cover {
|
||||
width: 100%; aspect-ratio: 2/3; object-fit: cover;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: 0 4px 20px rgba(0,0,0,0.6);
|
||||
display: block;
|
||||
}
|
||||
.hero-cover-placeholder {
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: var(--bg-overlay); border-radius: var(--radius-lg);
|
||||
aspect-ratio: 2/3;
|
||||
}
|
||||
:global(.placeholder-book) { color: var(--text-faint); }
|
||||
|
||||
/* Info column */
|
||||
.hero-info-col {
|
||||
position: relative; z-index: 2; flex: 1; min-width: 0;
|
||||
padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-3);
|
||||
display: flex; flex-direction: column; gap: var(--sp-2);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); flex-shrink: 0; }
|
||||
.hero-tag {
|
||||
font-family: var(--font-ui); font-size: 9px; letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase; padding: 2px 6px; border-radius: var(--radius-sm);
|
||||
background: rgba(255,255,255,0.12); color: rgba(255,255,255,0.7);
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
.hero-tag-reading { background: var(--accent-muted); color: var(--accent-fg); border-color: var(--accent-dim); }
|
||||
.hero-tag-pinned { background: rgba(168,132,232,0.2); color: #c4a8f0; border-color: rgba(168,132,232,0.3); }
|
||||
|
||||
.hero-title {
|
||||
font-size: var(--text-base); font-weight: var(--weight-medium);
|
||||
color: #fff; line-height: var(--leading-snug);
|
||||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
||||
text-shadow: 0 1px 6px rgba(0,0,0,0.6);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.hero-author {
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs); color: rgba(255,255,255,0.55);
|
||||
letter-spacing: var(--tracking-wide); flex-shrink: 0;
|
||||
}
|
||||
.hero-chapter {
|
||||
display: flex; align-items: center; gap: 5px;
|
||||
font-family: var(--font-ui); font-size: var(--text-2xs); color: rgba(255,255,255,0.65);
|
||||
letter-spacing: var(--tracking-wide); flex-shrink: 0;
|
||||
}
|
||||
.hero-page { color: rgba(255,255,255,0.45); }
|
||||
.hero-time { margin-left: auto; color: rgba(255,255,255,0.4); }
|
||||
.hero-desc {
|
||||
font-size: var(--text-xs); color: rgba(255,255,255,0.5); line-height: var(--leading-snug);
|
||||
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
|
||||
flex: 1; min-height: 0;
|
||||
}
|
||||
|
||||
/* Empty slot */
|
||||
.hero-empty-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: rgba(255,255,255,0.6); }
|
||||
.hero-empty-sub { font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.35); letter-spacing: var(--tracking-wide); line-height: var(--leading-snug); }
|
||||
|
||||
/* CTAs */
|
||||
.hero-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; flex-wrap: wrap; }
|
||||
.hero-cta {
|
||||
display: inline-flex; align-items: center; gap: var(--sp-1);
|
||||
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
|
||||
padding: 6px 14px; border-radius: var(--radius-full);
|
||||
background: var(--accent-muted); border: 1px solid var(--accent-dim); color: var(--accent-fg);
|
||||
cursor: pointer; transition: filter var(--t-base); white-space: nowrap;
|
||||
}
|
||||
.hero-cta:hover { filter: brightness(1.15); }
|
||||
.hero-cta-ghost {
|
||||
display: inline-flex; align-items: center; gap: var(--sp-1);
|
||||
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
|
||||
padding: 6px 14px; border-radius: var(--radius-full);
|
||||
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
|
||||
color: rgba(255,255,255,0.6); cursor: pointer;
|
||||
transition: background var(--t-base), color var(--t-base); white-space: nowrap;
|
||||
}
|
||||
.hero-cta-ghost:hover { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); }
|
||||
|
||||
/* Nav arrows */
|
||||
.hero-nav {
|
||||
position: absolute; top: 50%; transform: translateY(-50%);
|
||||
z-index: 3; width: 28px; height: 28px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: rgba(0,0,0,0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(255,255,255,0.12); border-radius: 50%;
|
||||
color: rgba(255,255,255,0.75); cursor: pointer;
|
||||
transition: background var(--t-base), color var(--t-base);
|
||||
}
|
||||
.hero-nav:hover { background: rgba(0,0,0,0.65); color: #fff; }
|
||||
.hero-nav-left { left: var(--sp-2); }
|
||||
.hero-nav-right { right: var(--sp-2); }
|
||||
|
||||
/* Dots */
|
||||
.hero-dots {
|
||||
position: absolute; bottom: var(--sp-2); left: 50%; transform: translateX(-50%);
|
||||
z-index: 3; display: flex; gap: 6px; align-items: center;
|
||||
}
|
||||
.hero-dot {
|
||||
width: 6px; height: 6px; border-radius: 50%;
|
||||
background: rgba(255,255,255,0.3); border: none; cursor: pointer; padding: 0;
|
||||
transition: background var(--t-base), transform var(--t-base);
|
||||
}
|
||||
.hero-dot:hover { background: rgba(255,255,255,0.6); }
|
||||
.hero-dot-active { background: #fff; transform: scale(1.3); }
|
||||
.hero-dot-pinned { background: rgba(168,132,232,0.7); }
|
||||
.hero-dot-pinned.hero-dot-active { background: #c4a8f0; }
|
||||
|
||||
/* Counter */
|
||||
.hero-counter {
|
||||
position: absolute; top: var(--sp-2); right: var(--sp-3); z-index: 3;
|
||||
font-family: var(--font-ui); font-size: 10px; color: rgba(255,255,255,0.4);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
|
||||
/* ── Stats strip ─────────────────────────────────────────────────────────── */
|
||||
.stats-strip {
|
||||
display: flex; align-items: center;
|
||||
margin: var(--sp-4) var(--sp-6);
|
||||
background: var(--bg-raised); border: 1px solid var(--border-dim);
|
||||
border-radius: var(--radius-xl); padding: var(--sp-4) var(--sp-5); gap: 0;
|
||||
}
|
||||
.stat-card { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
|
||||
.stat-div { width: 1px; height: 32px; background: var(--border-dim); flex-shrink: 0; }
|
||||
:global(.stat-fire) { color: #f97316; }
|
||||
:global(.stat-neutral) { color: var(--text-faint); }
|
||||
.stat-val { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); line-height: 1; }
|
||||
.stat-val.accent { color: var(--accent-fg); }
|
||||
.stat-val.muted { color: var(--text-faint); }
|
||||
.stat-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); text-align: center; white-space: nowrap; }
|
||||
|
||||
/* ── Section chrome ───────────────────────────────────────────────────────── */
|
||||
.section { margin-bottom: var(--sp-5); }
|
||||
.section-header { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-6) var(--sp-3); }
|
||||
.section-title { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
|
||||
.see-all { display: flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); background: none; border: none; cursor: pointer; padding: 0; transition: color var(--t-base); }
|
||||
.see-all:hover { color: var(--accent-fg); }
|
||||
|
||||
/* ── Mini row ─────────────────────────────────────────────────────────────── */
|
||||
.mini-row { display: flex; gap: var(--sp-3); padding: 0 var(--sp-6); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
|
||||
.mini-row::-webkit-scrollbar { display: none; }
|
||||
.ghost { flex-shrink: 0; width: 110px; aspect-ratio: 2/3; pointer-events: none; visibility: hidden; }
|
||||
.mini-card { flex-shrink: 0; width: 110px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
|
||||
.mini-card:hover .mini-cover { filter: brightness(1.06); }
|
||||
.mini-card:hover .mini-title { color: var(--text-primary); }
|
||||
.mini-cover-wrap { position: relative; aspect-ratio: 2/3; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-raised); border: 1px solid var(--border-dim); }
|
||||
.mini-cover { width: 100%; height: 100%; object-fit: cover; transition: filter var(--t-base); }
|
||||
.completed-check { position: absolute; top: var(--sp-1); right: var(--sp-1); color: #22c55e; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)); }
|
||||
.mini-title { margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--t-base); }
|
||||
|
||||
/* ── Activity feed ────────────────────────────────────────────────────────── */
|
||||
.activity-list { display: flex; flex-direction: column; padding: 0 var(--sp-4); }
|
||||
.activity-row { display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-2); border-radius: var(--radius-md); border: 1px solid transparent; background: none; text-align: left; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); }
|
||||
.activity-row:hover { background: var(--bg-raised); border-color: var(--border-dim); }
|
||||
.activity-row:hover .activity-play { opacity: 1; }
|
||||
.activity-thumb-wrap { flex-shrink: 0; }
|
||||
.activity-thumb { width: 38px; height: 54px; border-radius: var(--radius-sm); object-fit: cover; display: block; background: var(--bg-raised); border: 1px solid var(--border-dim); }
|
||||
.activity-info { flex: 1; display: flex; flex-direction: column; gap: 3px; overflow: hidden; min-width: 0; }
|
||||
.activity-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.activity-chapter { font-size: var(--text-xs); color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-1); }
|
||||
.activity-page { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
|
||||
.activity-time { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); flex-shrink: 0; white-space: nowrap; }
|
||||
.activity-play { color: var(--text-faint); flex-shrink: 0; opacity: 0; transition: opacity var(--t-base); }
|
||||
|
||||
.empty-activity { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-6); }
|
||||
.empty-text { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
|
||||
.empty-cta { 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-full); background: var(--accent-muted); border: 1px solid var(--accent-dim); color: var(--accent-fg); cursor: pointer; transition: filter var(--t-base); }
|
||||
.empty-cta:hover { filter: brightness(1.1); }
|
||||
|
||||
/* ── Picker modal ─────────────────────────────────────────────────────────── */
|
||||
.picker-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: var(--z-settings); display: flex; align-items: center; justify-content: center; animation: fadeIn 0.1s ease both; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
|
||||
.picker-modal { width: min(480px, 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; }
|
||||
.picker-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; }
|
||||
.picker-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
|
||||
.picker-close { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-sm); color: var(--text-faint); background: none; border: none; cursor: pointer; transition: color var(--t-base), background var(--t-base); }
|
||||
.picker-close:hover { color: var(--text-muted); background: var(--bg-raised); }
|
||||
.picker-search-wrap { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; }
|
||||
:global(.picker-search-icon) { color: var(--text-faint); flex-shrink: 0; }
|
||||
.picker-search { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: var(--text-sm); }
|
||||
.picker-search::placeholder { color: var(--text-faint); }
|
||||
.picker-list { flex: 1; overflow-y: auto; padding: var(--sp-2); }
|
||||
.picker-empty { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); padding: var(--sp-4) var(--sp-3); text-align: center; }
|
||||
.picker-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); }
|
||||
.picker-row:hover { background: var(--bg-raised); }
|
||||
.picker-thumb { width: 36px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; background: var(--bg-raised); border: 1px solid var(--border-dim); }
|
||||
.picker-info { flex: 1; display: flex; flex-direction: column; gap: 3px; overflow: hidden; min-width: 0; }
|
||||
.picker-manga-title { font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.picker-source { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
|
||||
:global(.picker-pin-icon) { color: var(--text-faint); flex-shrink: 0; opacity: 0; transition: opacity var(--t-base); }
|
||||
.picker-row:hover :global(.picker-pin-icon) { opacity: 1; }
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
|
||||
@keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
|
||||
</style>
|
||||
@@ -1,10 +1,11 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { MagnifyingGlass, Books, DownloadSimple, X, Folder, FolderSimplePlus, Trash } from "phosphor-svelte";
|
||||
import { MagnifyingGlass, Books, DownloadSimple, Folder, FolderSimplePlus, Trash } from "phosphor-svelte";
|
||||
import { gql, thumbUrl } from "../../lib/client";
|
||||
import { GET_LIBRARY, UPDATE_MANGA, GET_CHAPTERS, DELETE_DOWNLOADED_CHAPTERS, DEQUEUE_DOWNLOAD } from "../../lib/queries";
|
||||
import { GET_LIBRARY, GET_ALL_MANGA, UPDATE_MANGA, GET_CHAPTERS, DELETE_DOWNLOADED_CHAPTERS, DEQUEUE_DOWNLOAD } from "../../lib/queries";
|
||||
import { cache, CACHE_KEYS } from "../../lib/cache";
|
||||
import { settings, activeManga, libraryFilter, libraryTagFilter, genreFilter, activeChapter } from "../../store";
|
||||
import { dedupeMangaById, dedupeMangaByTitle } from "../../lib/util";
|
||||
import { settings, activeManga, libraryFilter, genreFilter, activeChapter } from "../../store";
|
||||
import { addFolder, assignMangaToFolder, removeMangaFromFolder, getMangaFolders } from "../../store";
|
||||
import type { Manga, Chapter } from "../../lib/types";
|
||||
import ContextMenu, { type MenuEntry } from "../shared/ContextMenu.svelte";
|
||||
@@ -12,11 +13,13 @@
|
||||
const CARD_MIN_W = 130;
|
||||
const CARD_GAP = 16;
|
||||
|
||||
let allManga: Manga[] = [];
|
||||
let allManga: Manga[] = []; // inLibrary only — used for Saved tab, tags, counts
|
||||
let allMangaUnfiltered: Manga[] = []; // every manga Suwayomi knows — used for folder tabs
|
||||
let loading = true;
|
||||
let error: string | null = null;
|
||||
let retryCount = 0;
|
||||
let search = "";
|
||||
let renderVisible = 0;
|
||||
let scrollEl: HTMLDivElement;
|
||||
let containerWidth = 800;
|
||||
let ctx: { x: number; y: number; manga: Manga } | null = null;
|
||||
@@ -36,10 +39,22 @@
|
||||
}
|
||||
|
||||
function loadData() {
|
||||
// Saved tab — library only (inLibrary: true)
|
||||
fetchLibrary()
|
||||
.then((nodes) => { allManga = nodes; error = null; })
|
||||
.then((nodes) => {
|
||||
allManga = dedupeMangaByTitle(dedupeMangaById(nodes));
|
||||
error = null;
|
||||
})
|
||||
.catch((e) => error = e.message)
|
||||
.finally(() => loading = false);
|
||||
|
||||
// Folder tabs — all manga regardless of inLibrary.
|
||||
// Cached separately so it doesn't bust the library cache.
|
||||
cache.get("all_manga_unfiltered", () =>
|
||||
gql<{ mangas: { nodes: Manga[] } }>(GET_ALL_MANGA).then((d) => d.mangas.nodes)
|
||||
).then((nodes) => {
|
||||
allMangaUnfiltered = dedupeMangaByTitle(dedupeMangaById(nodes));
|
||||
}).catch(console.error);
|
||||
}
|
||||
|
||||
$: {
|
||||
@@ -56,40 +71,74 @@
|
||||
if (f && !f.showTab) libraryFilter.set("library");
|
||||
}
|
||||
|
||||
const isBuiltin = (f: string) => f === "all" || f === "library" || f === "downloaded";
|
||||
const isBuiltin = (f: string) => f === "library" || f === "downloaded";
|
||||
|
||||
$: filtered = (() => {
|
||||
let items = allManga;
|
||||
if ($libraryFilter === "library") items = items.filter((m) => m.inLibrary);
|
||||
else if ($libraryFilter === "downloaded") items = items.filter((m) => (m.downloadCount ?? 0) > 0);
|
||||
else if (!isBuiltin($libraryFilter)) {
|
||||
const folder = $settings.folders.find((f) => f.id === $libraryFilter);
|
||||
if (folder) items = items.filter((m) => folder.mangaIds.includes(m.id));
|
||||
if ($libraryFilter === "library") {
|
||||
let items = allManga;
|
||||
if (search.trim()) {
|
||||
const q = search.toLowerCase();
|
||||
items = items.filter((m) => m.title.toLowerCase().includes(q));
|
||||
}
|
||||
return items;
|
||||
}
|
||||
if ($libraryTagFilter.length)
|
||||
items = items.filter((m) => $libraryTagFilter.every((t) => (m.genre ?? []).includes(t)));
|
||||
if (search.trim()) {
|
||||
const q = search.toLowerCase();
|
||||
items = items.filter((m) => m.title.toLowerCase().includes(q));
|
||||
if ($libraryFilter === "downloaded") {
|
||||
let items = allManga.filter((m) => (m.downloadCount ?? 0) > 0);
|
||||
if (search.trim()) {
|
||||
const q = search.toLowerCase();
|
||||
items = items.filter((m) => m.title.toLowerCase().includes(q));
|
||||
}
|
||||
return items;
|
||||
}
|
||||
return items;
|
||||
// Folder tab — use folderPool (library manga + non-library manga merged)
|
||||
const folder = $settings.folders.find((f) => f.id === $libraryFilter);
|
||||
if (folder) {
|
||||
let items = folderPool.filter((m) => folder.mangaIds.includes(m.id));
|
||||
if (search.trim()) {
|
||||
const q = search.toLowerCase();
|
||||
items = items.filter((m) => m.title.toLowerCase().includes(q));
|
||||
}
|
||||
return items;
|
||||
}
|
||||
return [];
|
||||
})();
|
||||
|
||||
$: cols = Math.max(1, Math.floor((containerWidth + CARD_GAP) / (CARD_MIN_W + CARD_GAP)));
|
||||
|
||||
$: counts = {
|
||||
all: allManga.length,
|
||||
library: allManga.filter((m) => m.inLibrary).length,
|
||||
downloaded: allManga.filter((m) => (m.downloadCount ?? 0) > 0).length,
|
||||
...$settings.folders.reduce((a, f) => ({ ...a, [f.id]: allManga.filter((m) => f.mangaIds.includes(m.id)).length }), {}),
|
||||
};
|
||||
// Reset visible count whenever the filtered set changes (filter/search/tab switch)
|
||||
$: { filtered; renderVisible = $settings.renderLimit ?? 48; }
|
||||
|
||||
$: allTags = [...new Set(allManga.filter((m) => m.inLibrary).flatMap((m) => m.genre ?? []))].sort();
|
||||
$: visibleManga = filtered.slice(0, renderVisible);
|
||||
$: hasMore = filtered.length > renderVisible;
|
||||
$: remainingCount = filtered.length - renderVisible;
|
||||
|
||||
function loadMore() {
|
||||
renderVisible += $settings.renderLimit ?? 48;
|
||||
}
|
||||
|
||||
// Merged pool for folder resolution: library manga first (instant), then any
|
||||
// non-library manga from the unfiltered fetch. This means Completed and other
|
||||
// folders whose manga are saved to the library render immediately without
|
||||
// waiting for the allMangaUnfiltered fetch to complete.
|
||||
$: folderPool = (() => {
|
||||
const seen = new Set(allManga.map(m => m.id));
|
||||
return [...allManga, ...allMangaUnfiltered.filter(m => !seen.has(m.id))];
|
||||
})();
|
||||
|
||||
$: counts = {
|
||||
library: allManga.length,
|
||||
downloaded: allManga.filter((m) => (m.downloadCount ?? 0) > 0).length,
|
||||
...$settings.folders.reduce((a, f) => ({
|
||||
...a,
|
||||
[f.id]: folderPool.filter((m) => f.mangaIds.includes(m.id)).length,
|
||||
}), {} as Record<string, number>),
|
||||
};
|
||||
|
||||
async function removeFromLibrary(manga: Manga) {
|
||||
await gql(UPDATE_MANGA, { id: manga.id, inLibrary: false }).catch(console.error);
|
||||
allManga = allManga.map((m) => m.id === manga.id ? { ...m, inLibrary: false } : m);
|
||||
allManga = allManga.filter((m) => m.id !== manga.id);
|
||||
cache.clear(CACHE_KEYS.LIBRARY);
|
||||
cache.clear("all_manga_unfiltered");
|
||||
}
|
||||
|
||||
async function deleteAllDownloads(manga: Manga) {
|
||||
@@ -156,10 +205,6 @@
|
||||
}];
|
||||
}
|
||||
|
||||
function toggleTag(tag: string) {
|
||||
libraryTagFilter.update((t) => t.includes(tag) ? t.filter((x) => x !== tag) : [...t, tag]);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const ro = new ResizeObserver(([e]) => containerWidth = e.contentRect.width);
|
||||
ro.observe(scrollEl);
|
||||
@@ -210,7 +255,7 @@
|
||||
<div class="header-left">
|
||||
<span class="heading">Library</span>
|
||||
<div class="tabs">
|
||||
{#each [["library","Saved"], ["downloaded","Downloaded"], ["all","All"]] as [f, label]}
|
||||
{#each [["library","Saved"], ["downloaded","Downloaded"]] as [f, label]}
|
||||
<button class="tab" class:active={$libraryFilter === f} on:click={() => libraryFilter.set(f)}>
|
||||
{#if f === "library"}<Books size={11} weight="bold" />
|
||||
{:else if f === "downloaded"}<DownloadSimple size={11} weight="bold" />{/if}
|
||||
@@ -233,21 +278,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if allTags.length > 0}
|
||||
<div class="tag-panel">
|
||||
{#if $libraryTagFilter.length > 0}
|
||||
<button class="tag-clear" on:click={() => libraryTagFilter.set([])}>
|
||||
<X size={11} weight="bold" /> Clear
|
||||
</button>
|
||||
{/if}
|
||||
{#each allTags as tag}
|
||||
<button class="tag-chip" class:active={$libraryTagFilter.includes(tag)} on:click={() => toggleTag(tag)}>
|
||||
{tag}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if loading}
|
||||
<div class="grid">
|
||||
{#each Array(12) as _}
|
||||
@@ -261,12 +291,11 @@
|
||||
<div class="center">
|
||||
{$libraryFilter === "library" ? "No manga saved to library — browse sources to add some."
|
||||
: $libraryFilter === "downloaded" ? "No downloaded manga."
|
||||
: !isBuiltin($libraryFilter) ? "No manga in this folder yet. Right-click manga to assign them."
|
||||
: "No manga found."}
|
||||
: "No manga in this folder yet. Right-click manga anywhere to assign them."}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid" style="--cols:{cols}">
|
||||
{#each filtered as m (m.id)}
|
||||
{#each visibleManga as m (m.id)}
|
||||
<button
|
||||
class="card"
|
||||
on:click={() => activeManga.set(m)}
|
||||
@@ -286,6 +315,14 @@
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{#if hasMore}
|
||||
<div class="load-more-row">
|
||||
<button class="load-more-btn" on:click={loadMore}>
|
||||
Show {Math.min(remainingCount, $settings.renderLimit ?? 48)} more
|
||||
<span class="load-more-count">({remainingCount} remaining)</span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
@@ -362,30 +399,6 @@
|
||||
.search::placeholder { color: var(--text-faint); }
|
||||
.search:focus { border-color: var(--border-strong); }
|
||||
|
||||
.tag-panel {
|
||||
position: relative; z-index: 1;
|
||||
display: flex; flex-wrap: wrap; gap: var(--sp-1);
|
||||
margin-bottom: var(--sp-3);
|
||||
}
|
||||
.tag-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);
|
||||
color: var(--text-faint); cursor: pointer;
|
||||
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.tag-chip:hover { color: var(--text-muted); border-color: var(--border-strong); }
|
||||
.tag-chip.active { background: var(--accent-muted); border-color: var(--accent-dim); color: var(--accent-fg); }
|
||||
.tag-clear {
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
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(--color-error);
|
||||
color: var(--color-error); cursor: pointer;
|
||||
transition: background var(--t-base);
|
||||
}
|
||||
.tag-clear:hover { background: var(--color-error-bg); }
|
||||
|
||||
.grid {
|
||||
position: relative; z-index: 1;
|
||||
display: grid;
|
||||
@@ -437,6 +450,21 @@
|
||||
.cover-skeleton { aspect-ratio: 2/3; border-radius: var(--radius-md); }
|
||||
.title-skeleton { height: 12px; margin-top: var(--sp-2); width: 80%; border-radius: var(--radius-sm); }
|
||||
|
||||
.load-more-row {
|
||||
display: flex; justify-content: center;
|
||||
padding: var(--sp-5) 0 var(--sp-2);
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.load-more-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: 8px 20px; border-radius: var(--radius-full);
|
||||
border: 1px solid var(--border-dim); background: var(--bg-raised); color: var(--text-muted);
|
||||
cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.load-more-btn:hover { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
|
||||
.load-more-count { color: var(--text-faint); font-size: var(--text-2xs); }
|
||||
|
||||
.center {
|
||||
position: relative; z-index: 1;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
ENQUEUE_CHAPTERS_DOWNLOAD,
|
||||
} from "../../lib/queries";
|
||||
import { cache, CACHE_KEYS, recordSourceAccess } from "../../lib/cache";
|
||||
import { settings, activeManga, activeChapter, genreFilter, navPage, addToast, updateSettings, addFolder, assignMangaToFolder, removeMangaFromFolder, getMangaFolders, openReader } from "../../store";
|
||||
import { settings, activeManga, activeChapter, genreFilter, navPage, addToast, updateSettings, addFolder, assignMangaToFolder, removeMangaFromFolder, getMangaFolders, openReader, checkAndMarkCompleted } from "../../store";
|
||||
import type { Manga, Chapter } from "../../lib/types";
|
||||
import ContextMenu, { type MenuEntry } from "../shared/ContextMenu.svelte";
|
||||
import MigrateModal from "./MigrateModal.svelte";
|
||||
@@ -64,6 +64,12 @@
|
||||
|
||||
function applyChapters(nodes: Chapter[]) {
|
||||
chapters = nodes;
|
||||
// Passive completion check — runs every time the chapter list is loaded
|
||||
// or refreshed. Covers: opening SeriesDetail, returning from reader,
|
||||
// background refresh. Only checks if manga is already in library.
|
||||
if ($activeManga && nodes.length > 0) {
|
||||
checkAndMarkCompleted($activeManga.id, nodes);
|
||||
}
|
||||
}
|
||||
|
||||
$: sortDir = $settings.chapterSortDir;
|
||||
@@ -217,7 +223,10 @@
|
||||
async function markRead(chapterId: number, isRead: boolean) {
|
||||
await gql(MARK_CHAPTER_READ, { id: chapterId, isRead }).catch(console.error);
|
||||
chapters = chapters.map((c) => c.id === chapterId ? { ...c, isRead } : c);
|
||||
if ($activeManga) chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() });
|
||||
if ($activeManga) {
|
||||
chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() });
|
||||
checkAndMarkCompleted($activeManga.id, chapters);
|
||||
}
|
||||
}
|
||||
|
||||
async function markBulk(ids: number[], isRead: boolean) {
|
||||
@@ -225,7 +234,10 @@
|
||||
await gql(MARK_CHAPTERS_READ, { ids, isRead }).catch(console.error);
|
||||
const idSet = new Set(ids);
|
||||
chapters = chapters.map((c) => idSet.has(c.id) ? { ...c, isRead } : c);
|
||||
if ($activeManga) chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() });
|
||||
if ($activeManga) {
|
||||
chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() });
|
||||
checkAndMarkCompleted($activeManga.id, chapters);
|
||||
}
|
||||
}
|
||||
|
||||
const markAboveRead = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter((c) => !c.isRead).map((c) => c.id), true);
|
||||
|
||||
Reference in New Issue
Block a user