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

Chore: Revamped Lib Files for Svelte 5 Rewrite

Browse Source
This commit is contained in:
Youwes09
2026-03-19 23:36:26 -05:00
parent 43630ef72d
commit 94b92d000f
12 changed files with 1127 additions and 2004 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.svelte
+50 -61
View File
@@ -1,13 +1,10 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from "svelte"; import { onMount } from "svelte";
import { invoke } from "@tauri-apps/api/core"; import { invoke } from "@tauri-apps/api/core";
import { listen } from "@tauri-apps/api/event"; import { listen } from "@tauri-apps/api/event";
import { gql } from "./lib/client"; import { gql } from "./lib/client";
import { GET_DOWNLOAD_STATUS } from "./lib/queries"; import { GET_DOWNLOAD_STATUS } from "./lib/queries";
import { import { activeChapter, settingsOpen, settings, activeDownloads, addToast } from "./store";
activeChapter, settingsOpen, settings,
activeDownloads, addToast,
} from "./store";
import type { DownloadStatus, DownloadQueueItem } from "./lib/types"; import type { DownloadStatus, DownloadQueueItem } from "./lib/types";
import Layout from "./components/layout/Layout.svelte"; import Layout from "./components/layout/Layout.svelte";
import Reader from "./components/reader/Reader.svelte"; import Reader from "./components/reader/Reader.svelte";
@@ -19,15 +16,16 @@
const MAX_ATTEMPTS = 30; const MAX_ATTEMPTS = 30;
let serverProbeOk = !$settings.autoStartServer; let serverProbeOk = $state(!settings.autoStartServer);
let appReady = !$settings.autoStartServer; let appReady = $state(!settings.autoStartServer);
let failed = false; let failed = $state(false);
let retryKey = 0; let idle = $state(false);
let idle = false; let devSplash = $state(false);
let devSplash = false;
let prevQueue: DownloadQueueItem[] = []; let prevQueue: DownloadQueueItem[] = [];
let idleTimer: ReturnType<typeof setTimeout> | null = null; let idleTimer: ReturnType<typeof setTimeout> | null = null;
let pollInterval: ReturnType<typeof setInterval>;
let unlistenDownload: (() => void) | undefined;
function detectCompletions(prev: DownloadQueueItem[], next: DownloadQueueItem[]) { function detectCompletions(prev: DownloadQueueItem[], next: DownloadQueueItem[]) {
for (const item of prev) { for (const item of prev) {
@@ -44,46 +42,51 @@
function applyQueue(next: DownloadQueueItem[]) { function applyQueue(next: DownloadQueueItem[]) {
detectCompletions(prevQueue, next); detectCompletions(prevQueue, next);
prevQueue = next; prevQueue = next;
activeDownloads.set(next.map(item => ({ activeDownloads = next.map(item => ({
chapterId: item.chapter.id, mangaId: item.chapter.mangaId, progress: item.progress, chapterId: item.chapter.id, mangaId: item.chapter.mangaId, progress: item.progress,
}))); }));
} }
function resetIdle() { function resetIdle() {
if (idle) return; if (idle) return;
if (idleTimer) clearTimeout(idleTimer); if (idleTimer) clearTimeout(idleTimer);
const ms = ($settings.idleTimeoutMin ?? 5) * 60 * 1000; const ms = (settings.idleTimeoutMin ?? 5) * 60 * 1000;
if (ms === 0) return; if (ms === 0) return;
idleTimer = setTimeout(() => idle = true, ms); idleTimer = setTimeout(() => idle = true, ms);
} }
const idleEvents = ["mousemove","mousedown","keydown","touchstart","wheel"] as const; const idleEvents = ["mousemove", "mousedown", "keydown", "touchstart", "wheel"] as const;
$: if (appReady) { $effect(() => {
if (!appReady) return;
idleEvents.forEach(e => window.addEventListener(e, resetIdle, { passive: true })); idleEvents.forEach(e => window.addEventListener(e, resetIdle, { passive: true }));
resetIdle(); resetIdle();
} return () => idleEvents.forEach(e => window.removeEventListener(e, resetIdle));
});
$: document.documentElement.style.zoom = `${$settings.uiScale * 1.5}%`; $effect(() => {
$: document.documentElement.setAttribute("data-theme", $settings.theme ?? "dark"); document.documentElement.style.zoom = `${settings.uiScale * 1.5}%`;
});
let pollInterval: ReturnType<typeof setInterval>; $effect(() => {
$: if (appReady) { document.documentElement.setAttribute("data-theme", settings.theme ?? "dark");
});
$effect(() => {
if (!appReady) return;
const poll = () => gql<{ downloadStatus: DownloadStatus }>(GET_DOWNLOAD_STATUS) const poll = () => gql<{ downloadStatus: DownloadStatus }>(GET_DOWNLOAD_STATUS)
.then(d => applyQueue(d.downloadStatus.queue)).catch(console.error); .then(d => applyQueue(d.downloadStatus.queue)).catch(console.error);
poll(); poll();
pollInterval = setInterval(poll, 2000); pollInterval = setInterval(poll, 2000);
} return () => clearInterval(pollInterval);
});
let unlistenDownload: (() => void) | undefined;
onMount(async () => { onMount(async () => {
document.addEventListener("contextmenu", e => e.preventDefault()); document.addEventListener("contextmenu", e => e.preventDefault());
(window as any).__mokuShowSplash = () => devSplash = true; (window as any).__mokuShowSplash = () => devSplash = true;
if ($settings.autoStartServer) { if (settings.autoStartServer) {
invoke("spawn_server", { binary: $settings.serverBinary }).catch(err => invoke("spawn_server", { binary: settings.serverBinary }).catch(err =>
console.warn("Could not start server:", err)); console.warn("Could not start server:", err));
} }
@@ -93,7 +96,7 @@
if (cancelled) return; if (cancelled) return;
tries++; tries++;
try { try {
const res = await fetch(`${$settings.serverUrl}/api/graphql`, { const res = await fetch(`${settings.serverUrl}/api/graphql`, {
method: "POST", headers: { "Content-Type": "application/json" }, method: "POST", headers: { "Content-Type": "application/json" },
body: JSON.stringify({ query: "{ __typename }" }), body: JSON.stringify({ query: "{ __typename }" }),
signal: AbortSignal.timeout(2000), signal: AbortSignal.timeout(2000),
@@ -107,59 +110,45 @@
} }
type P = { chapterId: number; mangaId: number; progress: number }[]; type P = { chapterId: number; mangaId: number; progress: number }[];
unlistenDownload = await listen<P>("download-progress", e => unlistenDownload = await listen<P>("download-progress", e => { activeDownloads = e.payload; });
activeDownloads.set(e.payload));
return () => {
if (settings.autoStartServer) invoke("kill_server").catch(() => {});
if (idleTimer) clearTimeout(idleTimer);
if (pollInterval) clearInterval(pollInterval);
unlistenDownload?.();
delete (window as any).__mokuShowSplash;
};
}); });
onDestroy(() => { function handleRetry() { failed = false; serverProbeOk = false; }
if ($settings.autoStartServer) invoke("kill_server").catch(() => {});
idleEvents.forEach(e => window.removeEventListener(e, resetIdle));
if (idleTimer) clearTimeout(idleTimer);
if (pollInterval) clearInterval(pollInterval);
unlistenDownload?.();
delete (window as any).__mokuShowSplash;
});
function handleRetry() {
failed = false;
serverProbeOk = false;
retryKey++;
}
</script> </script>
{#if devSplash} {#if devSplash}
<SplashScreen mode="idle" showFps showCards={$settings.splashCards ?? true} <SplashScreen mode="idle" showFps showCards={settings.splashCards ?? true}
onDismiss={() => setTimeout(() => devSplash = false, 340)} /> onDismiss={() => setTimeout(() => devSplash = false, 340)} />
{:else if !appReady} {:else if !appReady}
<SplashScreen mode="loading" ringFull={serverProbeOk} {failed} <SplashScreen mode="loading" ringFull={serverProbeOk} {failed}
showCards={$settings.splashCards ?? true} showCards={settings.splashCards ?? true}
onReady={() => appReady = true} onReady={() => appReady = true}
onRetry={handleRetry} /> onRetry={handleRetry} />
{:else} {:else}
<div class="root"> <div class="root">
{#if idle && !$activeChapter} {#if idle && !activeChapter}
<SplashScreen mode="idle" showCards={$settings.splashCards ?? true} <SplashScreen mode="idle" showCards={settings.splashCards ?? true}
onDismiss={() => setTimeout(() => idle = false, 340)} /> onDismiss={() => setTimeout(() => idle = false, 340)} />
{/if} {/if}
{#if !$activeChapter}<TitleBar />{/if} {#if !activeChapter}<TitleBar />{/if}
<div class="content"> <div class="content">
{#if $activeChapter}<Reader />{:else}<Layout />{/if} {#if activeChapter}<Reader />{:else}<Layout />{/if}
</div> </div>
{#if $settingsOpen}<Settings />{/if} {#if settingsOpen}<Settings />{/if}
<MangaPreview /> <MangaPreview />
<Toaster /> <Toaster />
</div> </div>
{/if} {/if}
<style> <style>
.root { .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
display: flex; .content { flex: 1; overflow: hidden; }
flex-direction: column;
height: 100%;
overflow: hidden;
}
.content {
flex: 1;
overflow: hidden;
}
</style> </style>
src/components/layout/Layout.svelte
+17 -22
View File
@@ -1,34 +1,34 @@
<script lang="ts"> <script lang="ts">
import { navPage, activeManga } from "../../store"; import { navPage, activeManga } from "../../store";
import Sidebar from "./Sidebar.svelte"; import Sidebar from "./Sidebar.svelte";
import Home from "../pages/Home.svelte"; import Home from "../pages/Home.svelte";
import Library from "../pages/Library.svelte"; import Library from "../pages/Library.svelte";
import SeriesDetail from "../pages/SeriesDetail.svelte"; import SeriesDetail from "../pages/SeriesDetail.svelte";
import History from "../pages/History.svelte"; import History from "../pages/History.svelte";
import Search from "../pages/Search.svelte"; import Search from "../pages/Search.svelte";
import Discover from "../pages/Discover.svelte"; import Discover from "../pages/Discover.svelte";
import Downloads from "../pages/Downloads.svelte"; import Downloads from "../pages/Downloads.svelte";
import Extensions from "../pages/Extensions.svelte"; import Extensions from "../pages/Extensions.svelte";
</script> </script>
<div class="root"> <div class="root">
<Sidebar /> <Sidebar />
<main class="main"> <main class="main">
{#if $activeManga} {#if activeManga}
<SeriesDetail /> <SeriesDetail />
{:else if $navPage === "home"} {:else if navPage === "home"}
<Home /> <Home />
{:else if $navPage === "library"} {:else if navPage === "library"}
<Library /> <Library />
{:else if $navPage === "search"} {:else if navPage === "search"}
<Search /> <Search />
{:else if $navPage === "history"} {:else if navPage === "history"}
<History /> <History />
{:else if $navPage === "explore" || $navPage === "sources"} {:else if navPage === "explore" || navPage === "sources"}
<Discover /> <Discover />
{:else if $navPage === "downloads"} {:else if navPage === "downloads"}
<Downloads /> <Downloads />
{:else if $navPage === "extensions"} {:else if navPage === "extensions"}
<Extensions /> <Extensions />
{:else} {:else}
<Home /> <Home />
@@ -38,10 +38,5 @@
<style> <style>
.root { display: flex; height: 100%; background: var(--bg-base); overflow: hidden; } .root { display: flex; height: 100%; background: var(--bg-base); overflow: hidden; }
.main { .main { flex: 1; overflow: hidden; background: var(--bg-surface); transform: translateZ(0); contain: layout style; }
flex: 1; overflow: hidden;
background: var(--bg-surface);
transform: translateZ(0);
contain: layout style;
}
</style> </style>
src/components/layout/Sidebar.svelte
+21 -57
View File
@@ -14,91 +14,55 @@
]; ];
function navigate(id: NavPage) { function navigate(id: NavPage) {
navPage.set(id); navPage = id;
activeManga.set(null); activeManga = null;
genreFilter.set(""); genreFilter = "";
if (id !== "explore") activeSource.set(null); if (id !== "explore") activeSource = null;
} }
function goHome() { function goHome() {
navPage.set("home"); navPage = "home";
activeSource.set(null); activeSource = null;
activeManga.set(null); activeManga = null;
libraryFilter.set("library"); libraryFilter = "library";
genreFilter.set(""); genreFilter = "";
} }
</script> </script>
<aside class="root"> <aside class="root">
<button class="logo" on:click={goHome} title="Home" aria-label="Go to Home"> <button class="logo" onclick={goHome} title="Home" aria-label="Go to Home">
<div class="logo-icon"></div> <div class="logo-icon"></div>
</button> </button>
<nav class="nav"> <nav class="nav">
{#each TABS as tab} {#each TABS as tab}
<button class="tab" class:active={$navPage === tab.id} <button class="tab" class:active={navPage === tab.id}
title={tab.label} on:click={() => navigate(tab.id)}> title={tab.label} onclick={() => navigate(tab.id)}>
<svelte:component this={tab.icon} size={18} weight="light" /> <tab.icon size={18} weight="light" />
</button> </button>
{/each} {/each}
</nav> </nav>
<div class="bottom"> <div class="bottom">
<button class="settings-btn" on:click={() => settingsOpen.set(true)} title="Settings"> <button class="settings-btn" onclick={() => settingsOpen = true} title="Settings">
<GearSix size={18} weight="light" /> <GearSix size={18} weight="light" />
</button> </button>
</div> </div>
</aside> </aside>
<style> <style>
.root { .root { width: var(--sidebar-width); flex-shrink: 0; background: var(--bg-void); display: flex; flex-direction: column; align-items: center; padding: var(--sp-4) 0; }
width: var(--sidebar-width); flex-shrink: 0; .logo { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); background: none; border: none; outline: none; cursor: pointer; border-radius: var(--radius-lg); transition: opacity var(--t-base), transform var(--t-base); padding: 0; appearance: none; -webkit-appearance: none; }
background: var(--bg-void); display: flex; flex-direction: column;
align-items: center; padding: var(--sp-4) 0;
}
.logo {
width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;
margin-bottom: var(--sp-3); background: none; border: none; outline: none;
cursor: pointer; border-radius: var(--radius-lg);
transition: opacity var(--t-base), transform var(--t-base);
padding: 0; appearance: none; -webkit-appearance: none;
}
.logo:hover { opacity: 0.8; transform: scale(0.96); } .logo:hover { opacity: 0.8; transform: scale(0.96); }
.logo:active { transform: scale(0.92); } .logo:active { transform: scale(0.92); }
.logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.logo-icon { .logo-icon { width: 80px; height: 80px; background-color: var(--accent); mask-image: url("../../assets/moku-icon.svg"); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-image: url("../../assets/moku-icon.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; filter: drop-shadow(0 0 8px rgba(107,143,107,0.35)); pointer-events: none; }
width: 80px; height: 80px; background-color: var(--accent); .nav { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); width: 100%; padding: 0 var(--sp-2); }
mask-image: url("../../assets/moku-icon.svg"); .tab { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; outline: none; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; transition: color var(--t-base), background var(--t-base); }
mask-repeat: no-repeat; mask-position: center; mask-size: contain;
-webkit-mask-image: url("../../assets/moku-icon.svg");
-webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain;
filter: drop-shadow(0 0 8px rgba(107,143,107,0.35)); pointer-events: none;
}
.nav {
flex: 1; display: flex; flex-direction: column; align-items: center;
gap: var(--sp-1); width: 100%; padding: 0 var(--sp-2);
}
.tab {
width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-md); color: var(--text-faint);
background: none; border: none; outline: none; cursor: pointer; padding: 0;
appearance: none; -webkit-appearance: none;
transition: color var(--t-base), background var(--t-base);
}
.tab:hover { color: var(--text-muted); background: var(--bg-raised); } .tab:hover { color: var(--text-muted); background: var(--bg-raised); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tab.active { color: var(--accent-fg); background: var(--accent-muted); } .tab.active { color: var(--accent-fg); background: var(--accent-muted); }
.tab.active:hover { color: var(--accent-fg); background: var(--accent-muted); } .tab.active:hover { color: var(--accent-fg); background: var(--accent-muted); }
.bottom { .bottom { display: flex; flex-direction: column; align-items: center; width: 100%; padding: var(--sp-3) var(--sp-2) 0; border-top: 1px solid var(--border-dim); margin-top: var(--sp-3); }
display: flex; flex-direction: column; align-items: center; .settings-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; outline: none; cursor: pointer; padding: 0; appearance: none; -webkit-appearance: none; transition: color var(--t-base), background var(--t-base), transform var(--t-slow); }
width: 100%; padding: var(--sp-3) var(--sp-2) 0;
border-top: 1px solid var(--border-dim); margin-top: var(--sp-3);
}
.settings-btn {
width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-md); color: var(--text-faint);
background: none; border: none; outline: none; cursor: pointer; padding: 0;
appearance: none; -webkit-appearance: none;
transition: color var(--t-base), background var(--t-base), transform var(--t-slow);
}
.settings-btn:hover { color: var(--text-muted); background: var(--bg-raised); transform: rotate(30deg); } .settings-btn:hover { color: var(--text-muted); background: var(--bg-raised); transform: rotate(30deg); }
.settings-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .settings-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
</style> </style>
src/components/layout/SplashScreen.svelte
+68 -168
View File
@@ -1,25 +1,29 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from "svelte"; import { onMount } from "svelte";
import { getCurrentWindow } from "@tauri-apps/api/window"; import { getCurrentWindow } from "@tauri-apps/api/window";
import logoUrl from "../../assets/moku-icon.svg"; import logoUrl from "../../assets/moku-icon.svg";
export let mode: "loading" | "idle" = "loading"; interface Props {
export let ringFull: boolean = false; mode?: "loading" | "idle";
export let failed: boolean = false; ringFull?: boolean;
export let showCards: boolean = true; failed?: boolean;
export let showFps: boolean = false; showCards?: boolean;
export let onReady: (() => void) | undefined = undefined; showFps?: boolean;
export let onRetry: (() => void) | undefined = undefined; onReady?: () => void;
export let onDismiss: (() => void) | undefined = undefined; onRetry?: () => void;
onDismiss?: () => void;
}
let { mode = "loading", ringFull = false, failed = false, showCards = true,
showFps = false, onReady, onRetry, onDismiss }: Props = $props();
const EXIT_MS = 320; const EXIT_MS = 320;
let dots = ""; let dots = $state("");
let ringProg = 0.025; let ringProg = $state(0.025);
let exiting = false; let exiting = $state(false);
let exitLock = false; let exitLock = false;
let canvas: HTMLCanvasElement;
let fpsEl: HTMLSpanElement; let fpsEl: HTMLSpanElement;
function triggerExit(cb?: () => void) { function triggerExit(cb?: () => void) {
@@ -29,10 +33,12 @@
setTimeout(() => cb?.(), EXIT_MS); setTimeout(() => cb?.(), EXIT_MS);
} }
$: if (ringFull) { $effect(() => {
ringProg = 1; if (ringFull) {
setTimeout(() => triggerExit(onReady), 650); ringProg = 1;
} setTimeout(() => triggerExit(onReady), 650);
}
});
const dotsInterval = setInterval(() => { const dotsInterval = setInterval(() => {
dots = dots.length >= 3 ? "" : dots + "."; dots = dots.length >= 3 ? "" : dots + ".";
@@ -48,22 +54,16 @@
}, 200); }, 200);
return () => { return () => {
clearTimeout(t); clearTimeout(t);
clearInterval(dotsInterval);
window.removeEventListener("keydown", handler); window.removeEventListener("keydown", handler);
window.removeEventListener("mousedown", handler); window.removeEventListener("mousedown", handler);
window.removeEventListener("touchstart", handler); window.removeEventListener("touchstart", handler);
}; };
} }
return () => clearInterval(dotsInterval);
}); });
onDestroy(() => clearInterval(dotsInterval)); interface CardDef { cx: number; w: number; h: number; lines: number; alpha: number; speed: number; cycleSec: number; phase: number; travel: number; yStart: number; angleStart: number; tilt: number; }
// ── canvas animation ────────────────────────────────────────────────────────
interface CardDef {
cx: number; w: number; h: number; lines: number; alpha: number;
speed: number; cycleSec: number; phase: number; travel: number;
yStart: number; angleStart: number; tilt: number;
}
interface CardTrig { cosA: number; sinA: number; tiltRad: number; } interface CardTrig { cosA: number; sinA: number; tiltRad: number; }
const LAYER_CFG = [ const LAYER_CFG = [
@@ -90,42 +90,26 @@
const h = w * 1.44; const h = w * 1.44;
const speed = cfg.speedMin + hash(seed + 5) * (cfg.speedMax - cfg.speedMin); const speed = cfg.speedMin + hash(seed + 5) * (cfg.speedMax - cfg.speedMin);
const travel = vh + h + BUF; const travel = vh + h + BUF;
cards.push({ cards.push({ cx: (col + 0.5) * laneW + (hash(seed + 2) * 2 - 1) * Math.max(0, (laneW - w) / 2 - 2), w, h, lines: 1 + Math.floor(hash(seed + 7) * 3), alpha: cfg.alpha, speed, cycleSec: travel / speed, phase: ((col / COLS) + hash(seed + 6) * 0.6 + layer * 0.23) % 1, travel, yStart: vh + h / 2 + BUF / 2, angleStart: hash(seed + 3) * 50 - 25, tilt: (hash(seed + 4) * 2 - 1) * 18 });
cx: (col + 0.5) * laneW + (hash(seed + 2) * 2 - 1) * Math.max(0, (laneW - w) / 2 - 2),
w, h,
lines: 1 + Math.floor(hash(seed + 7) * 3),
alpha: cfg.alpha, speed,
cycleSec: travel / speed,
phase: ((col / COLS) + hash(seed + 6) * 0.6 + layer * 0.23) % 1,
travel,
yStart: vh + h / 2 + BUF / 2,
angleStart: hash(seed + 3) * 50 - 25,
tilt: (hash(seed + 4) * 2 - 1) * 18,
});
} }
} }
const trigs: CardTrig[] = cards.map(c => ({ const trigs: CardTrig[] = cards.map(c => ({ cosA: Math.cos(c.angleStart * (Math.PI / 180)), sinA: Math.sin(c.angleStart * (Math.PI / 180)), tiltRad: c.tilt * (Math.PI / 180) }));
cosA: Math.cos(c.angleStart * (Math.PI / 180)),
sinA: Math.sin(c.angleStart * (Math.PI / 180)),
tiltRad: c.tilt * (Math.PI / 180),
}));
return { cards, trigs }; return { cards, trigs };
} }
function rrect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) { function rrect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) {
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(x + r, y); ctx.moveTo(x + r, y); ctx.lineTo(x + w - r, y); ctx.arcTo(x + w, y, x + w, y + r, r);
ctx.lineTo(x + w - r, y); ctx.arcTo(x + w, y, x + w, y + r, r);
ctx.lineTo(x + w, y + h - r); ctx.arcTo(x + w, y + h, x + w - r, y + h, r); ctx.lineTo(x + w, y + h - r); ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
ctx.lineTo(x + r, y + h); ctx.arcTo(x, y + h, x, y + h - r, r); ctx.lineTo(x + r, y + h); ctx.arcTo(x, y + h, x, y + h - r, r);
ctx.lineTo(x, y + r); ctx.arcTo(x, y, x + r, y, r); ctx.lineTo(x, y + r); ctx.arcTo(x, y, x + r, y, r);
ctx.closePath(); ctx.closePath();
} }
const STAMP_PAD = 6; const STAMP_PAD = 6;
function buildStamp(c: CardDef, dpr: number): HTMLCanvasElement { function buildStamp(c: CardDef, dpr: number): HTMLCanvasElement {
const oc = document.createElement("canvas"); const oc = document.createElement("canvas");
oc.width = Math.round(Math.ceil(c.w + STAMP_PAD * 2) * dpr); oc.width = Math.round(Math.ceil(c.w + STAMP_PAD * 2) * dpr);
oc.height = Math.round(Math.ceil(c.h + STAMP_PAD * 2) * dpr); oc.height = Math.round(Math.ceil(c.h + STAMP_PAD * 2) * dpr);
const ctx = oc.getContext("2d")!; const ctx = oc.getContext("2d")!;
@@ -133,17 +117,11 @@
const x0 = STAMP_PAD, y0 = STAMP_PAD; const x0 = STAMP_PAD, y0 = STAMP_PAD;
const coverH = (c.w * 0.72) * 1.05; const coverH = (c.w * 0.72) * 1.05;
const lineY0 = y0 + 3 + coverH + 5; const lineY0 = y0 + 3 + coverH + 5;
ctx.fillStyle = "rgba(0,0,0,0.5)"; ctx.fillStyle = "rgba(0,0,0,0.5)"; rrect(ctx, x0 + 2, y0 + 2, c.w, c.h, 4); ctx.fill();
rrect(ctx, x0 + 2, y0 + 2, c.w, c.h, 4); ctx.fill(); ctx.fillStyle = "rgba(255,255,255,0.07)"; rrect(ctx, x0, y0, c.w, c.h, 4); ctx.fill();
ctx.fillStyle = "rgba(255,255,255,0.07)"; ctx.strokeStyle = "rgba(255,255,255,0.75)"; ctx.lineWidth = 1.2; rrect(ctx, x0, y0, c.w, c.h, 4); ctx.stroke();
rrect(ctx, x0, y0, c.w, c.h, 4); ctx.fill(); ctx.fillStyle = "rgba(255,255,255,0.15)"; rrect(ctx, x0 + 3, y0 + 3, c.w - 6, coverH, 3); ctx.fill();
ctx.strokeStyle = "rgba(255,255,255,0.75)"; ctx.fillStyle = "rgba(255,255,255,0.08)"; rrect(ctx, x0 + 3, y0 + 3, (c.w - 6) * 0.45, coverH, 3); ctx.fill();
ctx.lineWidth = 1.2;
rrect(ctx, x0, y0, c.w, c.h, 4); ctx.stroke();
ctx.fillStyle = "rgba(255,255,255,0.15)";
rrect(ctx, x0 + 3, y0 + 3, c.w - 6, coverH, 3); ctx.fill();
ctx.fillStyle = "rgba(255,255,255,0.08)";
rrect(ctx, x0 + 3, y0 + 3, (c.w - 6) * 0.45, coverH, 3); ctx.fill();
for (let li = 0; li < c.lines; li++) { for (let li = 0; li < c.lines; li++) {
ctx.fillStyle = li === 0 ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.20)"; ctx.fillStyle = li === 0 ? "rgba(255,255,255,0.35)" : "rgba(255,255,255,0.20)";
ctx.fillRect(x0 + 4, lineY0 + li * 8, (c.w - 8) * (li === 0 ? 0.78 : 0.52), li === 0 ? 3 : 2); ctx.fillRect(x0 + 4, lineY0 + li * 8, (c.w - 8) * (li === 0 ? 0.78 : 0.52), li === 0 ? 3 : 2);
@@ -152,23 +130,17 @@
} }
function buildVignette(vw: number, vh: number, dpr: number): HTMLCanvasElement { function buildVignette(vw: number, vh: number, dpr: number): HTMLCanvasElement {
const oc = document.createElement("canvas"); const oc = document.createElement("canvas");
oc.width = Math.round(vw * dpr); oc.width = Math.round(vw * dpr); oc.height = Math.round(vh * dpr);
oc.height = Math.round(vh * dpr);
const ctx = oc.getContext("2d")!; const ctx = oc.getContext("2d")!;
ctx.scale(dpr, dpr); ctx.scale(dpr, dpr);
const g = ctx.createRadialGradient(vw / 2, vh / 2, 0, vw / 2, vh / 2, Math.max(vw, vh) * 0.65); const g = ctx.createRadialGradient(vw / 2, vh / 2, 0, vw / 2, vh / 2, Math.max(vw, vh) * 0.65);
g.addColorStop(0.15, "rgba(0,0,0,0)"); g.addColorStop(0.15, "rgba(0,0,0,0)"); g.addColorStop(1, "rgba(0,0,0,0.82)");
g.addColorStop(1, "rgba(0,0,0,0.82)"); ctx.fillStyle = g; ctx.fillRect(0, 0, vw, vh);
ctx.fillStyle = g;
ctx.fillRect(0, 0, vw, vh);
return oc; return oc;
} }
function drawFrame( function drawFrame(ctx: CanvasRenderingContext2D, t: number, cw: number, ch: number, dpr: number, cards: CardDef[], trigs: CardTrig[], stamps: HTMLCanvasElement[], vignette: HTMLCanvasElement) {
ctx: CanvasRenderingContext2D, t: number, cw: number, ch: number, dpr: number,
cards: CardDef[], trigs: CardTrig[], stamps: HTMLCanvasElement[], vignette: HTMLCanvasElement,
) {
ctx.clearRect(0, 0, cw, ch); ctx.clearRect(0, 0, cw, ch);
for (let i = 0; i < cards.length; i++) { for (let i = 0; i < cards.length; i++) {
const c = cards[i]; const c = cards[i];
@@ -185,14 +157,11 @@
const sw = stamps[i].width / dpr, sh = stamps[i].height / dpr; const sw = stamps[i].width / dpr, sh = stamps[i].height / dpr;
ctx.drawImage(stamps[i], -sw / 2, -sh / 2, sw, sh); ctx.drawImage(stamps[i], -sw / 2, -sh / 2, sw, sh);
} }
ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalAlpha = 1;
ctx.globalAlpha = 1;
ctx.drawImage(vignette, 0, 0, cw, ch); ctx.drawImage(vignette, 0, 0, cw, ch);
} }
// ── FPS counter ─────────────────────────────────────────────────────────────
let fps = 0, fpsFrames = 0, fpsLast = 0; let fps = 0, fpsFrames = 0, fpsLast = 0;
function tickFps(now: number) { function tickFps(now: number) {
fpsFrames++; fpsFrames++;
if (now - fpsLast >= 500) { if (now - fpsLast >= 500) {
@@ -202,19 +171,12 @@
} }
} }
// ── canvas mount ─────────────────────────────────────────────────────────────
function mountCanvas(el: HTMLCanvasElement) { function mountCanvas(el: HTMLCanvasElement) {
const win = getCurrentWindow(); const win = getCurrentWindow();
const ctx = el.getContext("2d")!; const ctx = el.getContext("2d")!;
interface RenderState { cards: CardDef[]; trigs: CardTrig[]; stamps: HTMLCanvasElement[]; vignette: HTMLCanvasElement; CW: number; CH: number; scale: number; }
interface RenderState {
cards: CardDef[]; trigs: CardTrig[];
stamps: HTMLCanvasElement[]; vignette: HTMLCanvasElement;
CW: number; CH: number; scale: number;
}
let live: RenderState | null = null; let live: RenderState | null = null;
let lastLogW = 0, lastLogH = 0, lastScale = 0, buildGen = 0; let lastLogW = 0, lastLogH = 0, lastScale = 0, buildGen = 0;
async function syncSize() { async function syncSize() {
const gen = ++buildGen; const gen = ++buildGen;
const [phys, scale] = await Promise.all([win.innerSize(), win.scaleFactor()]); const [phys, scale] = await Promise.all([win.innerSize(), win.scaleFactor()]);
@@ -225,15 +187,11 @@
const built = buildCards(logW, logH); const built = buildCards(logW, logH);
const stamps = built.cards.map(c => buildStamp(c, scale)); const stamps = built.cards.map(c => buildStamp(c, scale));
const vig = buildVignette(logW, logH, scale); const vig = buildVignette(logW, logH, scale);
el.width = phys.width; el.width = phys.width; el.height = phys.height;
el.height = phys.height;
live = { cards: built.cards, trigs: built.trigs, stamps, vignette: vig, CW: phys.width, CH: phys.height, scale }; live = { cards: built.cards, trigs: built.trigs, stamps, vignette: vig, CW: phys.width, CH: phys.height, scale };
} }
const ro = new ResizeObserver(() => syncSize()); const ro = new ResizeObserver(() => syncSize());
ro.observe(el); ro.observe(el); syncSize();
syncSize();
let raf = 0, t0 = -1; let raf = 0, t0 = -1;
function frame(now: number) { function frame(now: number) {
raf = requestAnimationFrame(frame); raf = requestAnimationFrame(frame);
@@ -244,31 +202,22 @@
drawFrame(ctx, (now - t0) / 1000, CW, CH, scale, cards, trigs, stamps, vignette); drawFrame(ctx, (now - t0) / 1000, CW, CH, scale, cards, trigs, stamps, vignette);
} }
raf = requestAnimationFrame(frame); raf = requestAnimationFrame(frame);
return () => { cancelAnimationFrame(raf); ro.disconnect(); }; return () => { cancelAnimationFrame(raf); ro.disconnect(); };
} }
// ── ring ───────────────────────────────────────────────────────────────────── const ringR = $derived(44);
$: ringR = 44; const ringPad = $derived(8);
$: ringPad = 8; const ringSize = $derived((ringR + ringPad) * 2);
$: ringSize = (ringR + ringPad) * 2; const ringC = $derived(ringR + ringPad);
$: ringC = ringR + ringPad; const ringCirc = $derived(2 * Math.PI * ringR);
$: ringCirc = 2 * Math.PI * ringR; const ringArc = $derived(ringCirc * Math.min(Math.max(ringProg, 0.025), 0.999));
$: ringArc = ringCirc * Math.min(Math.max(ringProg, 0.025), 0.999); const ringTop = $derived(-((ringSize - 80) / 2));
$: ringTop = -((ringSize - 80) / 2); const ringLeft = $derived(-((ringSize - 80) / 2));
$: ringLeft = -((ringSize - 80) / 2);
</script> </script>
<div <div class="splash" class:exiting style="cursor: {mode === 'idle' ? 'pointer' : 'default'}">
class="splash"
class:exiting
style="cursor: {mode === 'idle' ? 'pointer' : 'default'}"
>
{#if showCards} {#if showCards}
<canvas <canvas style="position:absolute;inset:0;pointer-events:none;width:100%;height:100%" use:mountCanvas></canvas>
style="position:absolute;inset:0;pointer-events:none;width:100%;height:100%"
use:mountCanvas
></canvas>
{#if showFps} {#if showFps}
<span bind:this={fpsEl} style="position:absolute;top:8px;right:8px;font-family:var(--font-ui);font-size:10px;color:var(--text-faint);z-index:2;pointer-events:none"></span> <span bind:this={fpsEl} style="position:absolute;top:8px;right:8px;font-family:var(--font-ui);font-size:10px;color:var(--text-faint);z-index:2;pointer-events:none"></span>
{/if} {/if}
@@ -285,21 +234,9 @@
{:else} {:else}
<div style="position:relative;width:80px;height:80px;margin-bottom:20px;z-index:1"> <div style="position:relative;width:80px;height:80px;margin-bottom:20px;z-index:1">
{#if !failed} {#if !failed}
<svg <svg width={ringSize} height={ringSize} style="position:absolute;pointer-events:none;top:{ringTop}px;left:{ringLeft}px">
width={ringSize} height={ringSize}
style="position:absolute;pointer-events:none;top:{ringTop}px;left:{ringLeft}px"
>
<circle cx={ringC} cy={ringC} r={ringR} fill="none" stroke="var(--border-base)" stroke-width="2" /> <circle cx={ringC} cy={ringC} r={ringR} fill="none" stroke="var(--border-base)" stroke-width="2" />
<circle <circle cx={ringC} cy={ringC} r={ringR} fill="none" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" stroke-dasharray="{ringArc} {ringCirc}" transform="rotate(-90 {ringC} {ringC})" style="transition: stroke-dasharray 0.4s cubic-bezier(0.4,0,0.2,1)" />
cx={ringC} cy={ringC} r={ringR}
fill="none"
stroke="var(--accent)"
stroke-width="2"
stroke-linecap="round"
stroke-dasharray="{ringArc} {ringCirc}"
transform="rotate(-90 {ringC} {ringC})"
style="transition: stroke-dasharray 0.4s cubic-bezier(0.4,0,0.2,1)"
/>
</svg> </svg>
{/if} {/if}
<img src={logoUrl} alt="Moku" style="width:80px;height:80px;border-radius:18px;display:block" /> <img src={logoUrl} alt="Moku" style="width:80px;height:80px;border-radius:18px;display:block" />
@@ -307,13 +244,9 @@
<p class="title-label">moku</p> <p class="title-label">moku</p>
<div style="z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px"> <div style="z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px">
{#if failed} {#if failed}
<p style="font-family:var(--font-ui);font-size:11px;color:var(--color-error);letter-spacing:0.1em;margin:0"> <p style="font-family:var(--font-ui);font-size:11px;color:var(--color-error);letter-spacing:0.1em;margin:0">Could not reach Suwayomi</p>
Could not reach Suwayomi <p style="font-family:var(--font-ui);font-size:10px;color:var(--text-faint);letter-spacing:0.05em;margin:0;text-align:center;max-width:240px;line-height:1.6">Make sure tachidesk-server is on your PATH</p>
</p> <button class="retry-btn" onclick={onRetry}>Retry</button>
<p style="font-family:var(--font-ui);font-size:10px;color:var(--text-faint);letter-spacing:0.05em;margin:0;text-align:center;max-width:240px;line-height:1.6">
Make sure tachidesk-server is on your PATH
</p>
<button class="retry-btn" on:click={onRetry}>Retry</button>
{:else} {:else}
<p style="font-family:var(--font-ui);font-size:10px;color:var(--text-faint);letter-spacing:0.12em;margin:0;min-width:160px;text-align:center"> <p style="font-family:var(--font-ui);font-size:10px;color:var(--text-faint);letter-spacing:0.12em;margin:0;min-width:160px;text-align:center">
{ringFull ? "Ready" : `Initializing server${dots}`} {ringFull ? "Ready" : `Initializing server${dots}`}
@@ -324,48 +257,15 @@
</div> </div>
<style> <style>
.splash { .splash { position: fixed; inset: 0; z-index: 9999; background: var(--bg-base); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; animation: spIn 0.35s cubic-bezier(0,0,0.2,1) both; }
position: fixed; inset: 0; z-index: 9999; .splash.exiting { animation: spOut 320ms cubic-bezier(0.4,0,1,1) both; }
background: var(--bg-base); overflow: hidden;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
animation: spIn 0.35s cubic-bezier(0,0,0.2,1) both;
}
.splash.exiting {
animation: spOut 320ms cubic-bezier(0.4,0,1,1) both;
}
@keyframes spIn { from { opacity:0; transform:scale(1.015) } to { opacity:1; transform:scale(1) } } @keyframes spIn { from { opacity:0; transform:scale(1.015) } to { opacity:1; transform:scale(1) } }
@keyframes spOut { from { opacity:1; transform:scale(1) } to { opacity:0; transform:scale(0.96) } } @keyframes spOut { from { opacity:1; transform:scale(1) } to { opacity:0; transform:scale(0.96) } }
@keyframes logoBreathe { @keyframes logoBreathe { 0%,100% { transform:scale(1); filter:drop-shadow(0 0 0px rgba(255,255,255,0)) } 50% { transform:scale(1.04); filter:drop-shadow(0 0 18px rgba(255,255,255,0.12)) } }
0%,100% { transform:scale(1); filter:drop-shadow(0 0 0px rgba(255,255,255,0)) }
50% { transform:scale(1.04);filter:drop-shadow(0 0 18px rgba(255,255,255,0.12)) }
}
@keyframes hintFade { 0%,100% { opacity:0.35 } 50% { opacity:0.7 } } @keyframes hintFade { 0%,100% { opacity:0.35 } 50% { opacity:0.7 } }
.logo-glow { position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%); animation: logoBreathe 4s ease-in-out infinite; }
.logo-glow {
position: absolute; inset: -20px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
animation: logoBreathe 4s ease-in-out infinite;
}
.logo-breathe { animation: logoBreathe 4s ease-in-out infinite; } .logo-breathe { animation: logoBreathe 4s ease-in-out infinite; }
.hint { font-family: var(--font-ui); font-size: 10px; color: var(--text-faint); letter-spacing: 0.22em; text-transform: uppercase; margin: 0; user-select: none; animation: hintFade 3.5s ease-in-out infinite; }
.hint { .title-label { font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-secondary); margin: 0 0 8px; z-index: 1; user-select: none; }
font-family: var(--font-ui); font-size: 10px; color: var(--text-faint); .retry-btn { margin-top: 4px; padding: 5px 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: 11px; letter-spacing: 0.08em; }
letter-spacing: 0.22em; text-transform: uppercase;
margin: 0; user-select: none;
animation: hintFade 3.5s ease-in-out infinite;
}
.title-label {
font-family: var(--font-ui); font-size: 11px; font-weight: 500;
letter-spacing: 0.26em; text-transform: uppercase;
color: var(--text-secondary); margin: 0 0 8px; z-index: 1; user-select: none;
}
.retry-btn {
margin-top: 4px; padding: 5px 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: 11px; letter-spacing: 0.08em;
}
</style> </style>
src/components/pages/History.svelte
+58 -211
View File
@@ -1,17 +1,12 @@
<script lang="ts"> <script lang="ts">
import { import { ClockCounterClockwise, Trash, MagnifyingGlass, Play, Books, X as XIcon } from "phosphor-svelte";
ClockCounterClockwise, Trash, MagnifyingGlass, Play, Books,
X as XIcon,
} from "phosphor-svelte";
import { thumbUrl, gql } from "../../lib/client"; import { thumbUrl, gql } from "../../lib/client";
import { GET_CHAPTERS } from "../../lib/queries"; import { GET_CHAPTERS } from "../../lib/queries";
import { import { history, readingStats, openReader, clearHistory, clearHistoryForManga } from "../../store";
history, readingStats, openReader,
} from "../../store";
import type { HistoryEntry } from "../../store"; import type { HistoryEntry } from "../../store";
let search = ""; let search = $state("");
let confirmClearAll = false; let confirmClearAll = $state(false);
function timeAgo(ts: number): string { function timeAgo(ts: number): string {
const diff = Date.now() - ts, m = Math.floor(diff / 60000); const diff = Date.now() - ts, m = Math.floor(diff / 60000);
@@ -31,10 +26,7 @@
if (d.toDateString() === yest.toDateString()) return "Yesterday"; if (d.toDateString() === yest.toDateString()) return "Yesterday";
const weekAgo = new Date(now); weekAgo.setDate(now.getDate() - 7); const weekAgo = new Date(now); weekAgo.setDate(now.getDate() - 7);
if (d > weekAgo) return d.toLocaleDateString("en-US", { weekday: "long" }); if (d > weekAgo) return d.toLocaleDateString("en-US", { weekday: "long" });
return d.toLocaleDateString("en-US", { return d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: d.getFullYear() !== now.getFullYear() ? "numeric" : undefined });
month: "long", day: "numeric",
year: d.getFullYear() !== now.getFullYear() ? "numeric" : undefined,
});
} }
function formatReadTime(mins: number): string { function formatReadTime(mins: number): string {
@@ -49,15 +41,9 @@
const SESSION_GAP_MS = 30 * 60 * 1000; const SESSION_GAP_MS = 30 * 60 * 1000;
interface Session { interface Session {
mangaId: number; mangaId: number; mangaTitle: string; thumbnailUrl: string;
mangaTitle: string; latestChapterId: number; latestChapterName: string; latestPageNumber: number;
thumbnailUrl: string; firstChapterName: string; chapterCount: number; readAt: number;
latestChapterId: number;
latestChapterName: string;
latestPageNumber: number;
firstChapterName: string;
chapterCount: number;
readAt: number;
} }
function buildSessions(entries: HistoryEntry[]): Session[] { function buildSessions(entries: HistoryEntry[]): Session[] {
@@ -70,37 +56,23 @@
let j = i + 1; let j = i + 1;
while (j < entries.length) { while (j < entries.length) {
const next = entries[j]; const next = entries[j];
if (next.mangaId === anchor.mangaId && anchor.readAt - next.readAt <= SESSION_GAP_MS) { if (next.mangaId === anchor.mangaId && anchor.readAt - next.readAt <= SESSION_GAP_MS) { group.push(next); j++; }
group.push(next); j++; else break;
} else break;
} }
const latest = group[0], oldest = group[group.length - 1]; const latest = group[0], oldest = group[group.length - 1];
sessions.push({ sessions.push({ mangaId: latest.mangaId, mangaTitle: latest.mangaTitle, thumbnailUrl: latest.thumbnailUrl, latestChapterId: latest.chapterId, latestChapterName: latest.chapterName, latestPageNumber: latest.pageNumber, firstChapterName: oldest.chapterName, chapterCount: group.length, readAt: latest.readAt });
mangaId: latest.mangaId,
mangaTitle: latest.mangaTitle,
thumbnailUrl: latest.thumbnailUrl,
latestChapterId: latest.chapterId,
latestChapterName: latest.chapterName,
latestPageNumber: latest.pageNumber,
firstChapterName: oldest.chapterName,
chapterCount: group.length,
readAt: latest.readAt,
});
i = j; i = j;
} }
return sessions; return sessions;
} }
$: filtered = search.trim() const filtered = $derived(search.trim()
? $history.filter((e) => ? history.filter(e => e.mangaTitle.toLowerCase().includes(search.toLowerCase()) || e.chapterName.toLowerCase().includes(search.toLowerCase()))
e.mangaTitle.toLowerCase().includes(search.toLowerCase()) || : history);
e.chapterName.toLowerCase().includes(search.toLowerCase())
)
: $history;
$: sessions = buildSessions(filtered); const sessions = $derived(buildSessions(filtered));
$: groups = (() => { const groups = $derived((() => {
const map = new Map<string, Session[]>(); const map = new Map<string, Session[]>();
for (const s of sessions) { for (const s of sessions) {
const l = dayLabel(s.readAt); const l = dayLabel(s.readAt);
@@ -108,29 +80,21 @@
map.get(l)!.push(s); map.get(l)!.push(s);
} }
return Array.from(map.entries()).map(([label, items]) => ({ label, items })); return Array.from(map.entries()).map(([label, items]) => ({ label, items }));
})(); })());
$: stats = { const stats = $derived({
uniqueChapters: new Set($history.map((e) => e.chapterId)).size, uniqueChapters: new Set(history.map(e => e.chapterId)).size,
uniqueManga: new Set($history.map((e) => e.mangaId)).size, uniqueManga: new Set(history.map(e => e.mangaId)).size,
estimatedMinutes: Math.round(new Set($history.map((e) => e.chapterId)).size * 4.5), estimatedMinutes: Math.round(new Set(history.map(e => e.chapterId)).size * 4.5),
}; });
function clearAll() { function doConfirmClear() { clearHistory(); confirmClearAll = false; }
history.set([]);
confirmClearAll = false;
}
function clearManga(mangaId: number, e: MouseEvent) {
e.stopPropagation();
history.update((h) => h.filter((x) => x.mangaId !== mangaId));
}
async function resume(session: Session) { async function resume(session: Session) {
try { try {
const d = await gql<{ chapters: { nodes: any[] } }>(GET_CHAPTERS, { mangaId: session.mangaId }); const d = await gql<{ chapters: { nodes: any[] } }>(GET_CHAPTERS, { mangaId: session.mangaId });
const chapters = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder); const chapters = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
const ch = chapters.find((c) => c.id === session.latestChapterId) ?? chapters[0]; const ch = chapters.find(c => c.id === session.latestChapterId) ?? chapters[0];
if (ch) openReader(ch, chapters); if (ch) openReader(ch, chapters);
} catch {} } catch {}
} }
@@ -144,20 +108,20 @@
<MagnifyingGlass size={12} class="search-icon" weight="light" /> <MagnifyingGlass size={12} class="search-icon" weight="light" />
<input class="search" placeholder="Search history…" bind:value={search} /> <input class="search" placeholder="Search history…" bind:value={search} />
{#if search} {#if search}
<button class="search-clear" on:click={() => (search = "")}> <button class="search-clear" onclick={() => search = ""}>
<XIcon size={10} weight="bold" /> <XIcon size={10} weight="bold" />
</button> </button>
{/if} {/if}
</div> </div>
{#if $history.length > 0} {#if history.length > 0}
{#if confirmClearAll} {#if confirmClearAll}
<div class="confirm-row"> <div class="confirm-row">
<span class="confirm-label">Clear all activity?</span> <span class="confirm-label">Clear all activity?</span>
<button class="confirm-yes" on:click={clearAll}>Clear</button> <button class="confirm-yes" onclick={doConfirmClear}>Clear</button>
<button class="confirm-no" on:click={() => (confirmClearAll = false)}>Cancel</button> <button class="confirm-no" onclick={() => confirmClearAll = false}>Cancel</button>
</div> </div>
{:else} {:else}
<button class="clear-btn" on:click={() => (confirmClearAll = true)} title="Clear all activity"> <button class="clear-btn" onclick={() => confirmClearAll = true} title="Clear all activity">
<Trash size={13} weight="light" /> <Trash size={13} weight="light" />
</button> </button>
{/if} {/if}
@@ -166,30 +130,18 @@
</div> </div>
<div class="stats-bar"> <div class="stats-bar">
<span class="stat-item"> <span class="stat-item"><span class="stat-val">{stats.uniqueChapters}</span><span class="stat-label">chapters</span></span>
<span class="stat-val">{stats.uniqueChapters}</span>
<span class="stat-label">chapters</span>
</span>
<span class="stat-sep"></span> <span class="stat-sep"></span>
<span class="stat-item"> <span class="stat-item"><span class="stat-val">{stats.uniqueManga}</span><span class="stat-label">series</span></span>
<span class="stat-val">{stats.uniqueManga}</span>
<span class="stat-label">series</span>
</span>
<span class="stat-sep"></span> <span class="stat-sep"></span>
<span class="stat-item"> <span class="stat-item"><span class="stat-val">{formatReadTime(stats.estimatedMinutes)}</span><span class="stat-label">est. time</span></span>
<span class="stat-val">{formatReadTime(stats.estimatedMinutes)}</span> {#if readingStats.currentStreakDays > 0}
<span class="stat-label">est. time</span>
</span>
{#if $readingStats.currentStreakDays > 0}
<span class="stat-sep"></span> <span class="stat-sep"></span>
<span class="stat-item"> <span class="stat-item"><span class="stat-val">{readingStats.currentStreakDays}d</span><span class="stat-label">streak</span></span>
<span class="stat-val">{$readingStats.currentStreakDays}d</span>
<span class="stat-label">streak</span>
</span>
{/if} {/if}
</div> </div>
{#if $history.length === 0} {#if history.length === 0}
<div class="empty"> <div class="empty">
<ClockCounterClockwise size={32} weight="light" class="empty-icon" /> <ClockCounterClockwise size={32} weight="light" class="empty-icon" />
<p class="empty-text">No reading history yet</p> <p class="empty-text">No reading history yet</p>
@@ -210,15 +162,9 @@
</p> </p>
{#each items as session (session.latestChapterId + ":" + session.readAt)} {#each items as session (session.latestChapterId + ":" + session.readAt)}
<div class="row-wrap"> <div class="row-wrap">
<button class="row" on:click={() => resume(session)}> <button class="row" onclick={() => resume(session)}>
<div class="thumb-wrap"> <div class="thumb-wrap">
<img <img src={thumbUrl(session.thumbnailUrl)} alt={session.mangaTitle} class="thumb" loading="lazy" decoding="async" />
src={thumbUrl(session.thumbnailUrl)}
alt={session.mangaTitle}
class="thumb"
loading="lazy"
decoding="async"
/>
{#if session.chapterCount > 1} {#if session.chapterCount > 1}
<span class="session-badge">{session.chapterCount}</span> <span class="session-badge">{session.chapterCount}</span>
{/if} {/if}
@@ -227,28 +173,17 @@
<span class="manga-title">{session.mangaTitle}</span> <span class="manga-title">{session.mangaTitle}</span>
<span class="chapter-name"> <span class="chapter-name">
{#if session.chapterCount > 1} {#if session.chapterCount > 1}
<span class="chapter-range"> <span class="chapter-range">{session.firstChapterName}<span class="range-sep">→</span>{session.latestChapterName}</span>
{session.firstChapterName}
<span class="range-sep">→</span>
{session.latestChapterName}
</span>
{:else} {:else}
{session.latestChapterName} {session.latestChapterName}
{#if session.latestPageNumber > 1} {#if session.latestPageNumber > 1}<span class="page-badge">p.{session.latestPageNumber}</span>{/if}
<span class="page-badge">p.{session.latestPageNumber}</span>
{/if}
{/if} {/if}
</span> </span>
</div> </div>
<span class="time">{timeAgo(session.readAt)}</span> <span class="time">{timeAgo(session.readAt)}</span>
<Play size={11} weight="fill" class="play-icon" /> <Play size={11} weight="fill" class="play-icon" />
</button> </button>
<button <button class="row-delete" onclick={() => clearHistoryForManga(session.mangaId)} title="Remove {session.mangaTitle} from history" aria-label="Remove from history">
class="row-delete"
on:click={(e) => clearManga(session.mangaId, e)}
title="Remove {session.mangaTitle} from history"
aria-label="Remove from history"
>
<XIcon size={9} weight="bold" /> <XIcon size={9} weight="bold" />
</button> </button>
</div> </div>
@@ -261,143 +196,55 @@
<style> <style>
.root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; } .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
.header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5) var(--sp-6) var(--sp-3); flex-shrink: 0; }
.header { .heading { font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
display: flex; align-items: center; justify-content: space-between;
padding: var(--sp-5) var(--sp-6) var(--sp-3); flex-shrink: 0;
}
.heading {
font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-normal);
color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase;
}
.header-right { display: flex; align-items: center; gap: var(--sp-2); } .header-right { display: flex; align-items: center; gap: var(--sp-2); }
.search-wrap { position: relative; display: flex; align-items: center; } .search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap :global(.search-icon) { position: absolute; left: 9px; color: var(--text-faint); pointer-events: none; } .search-wrap :global(.search-icon) { position: absolute; left: 9px; color: var(--text-faint); pointer-events: none; }
.search { .search { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 5px 28px 5px 26px; color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none; transition: border-color var(--t-base); }
background: var(--bg-raised); border: 1px solid var(--border-dim);
border-radius: var(--radius-md); padding: 5px 28px 5px 26px;
color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none;
transition: border-color var(--t-base);
}
.search::placeholder { color: var(--text-faint); } .search::placeholder { color: var(--text-faint); }
.search:focus { border-color: var(--border-strong); } .search:focus { border-color: var(--border-strong); }
.search-clear { .search-clear { position: absolute; right: 7px; display: flex; align-items: center; justify-content: center; color: var(--text-faint); background: none; border: none; cursor: pointer; padding: 2px; transition: color var(--t-base); }
position: absolute; right: 7px; display: flex; align-items: center; justify-content: center;
color: var(--text-faint); background: none; border: none; cursor: pointer;
padding: 2px; transition: color var(--t-base);
}
.search-clear:hover { color: var(--text-muted); } .search-clear:hover { color: var(--text-muted); }
.confirm-row { display: flex; align-items: center; gap: var(--sp-2); } .confirm-row { display: flex; align-items: center; gap: var(--sp-2); }
.confirm-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); } .confirm-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
.confirm-yes { .confirm-yes { font-family: var(--font-ui); font-size: var(--text-xs); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--color-error); background: var(--color-error-bg); color: var(--color-error); cursor: pointer; transition: filter var(--t-base); }
font-family: var(--font-ui); font-size: var(--text-xs); padding: 4px 10px;
border-radius: var(--radius-sm); border: 1px solid var(--color-error);
background: var(--color-error-bg); color: var(--color-error); cursor: pointer;
transition: filter var(--t-base);
}
.confirm-yes:hover { filter: brightness(1.15); } .confirm-yes:hover { filter: brightness(1.15); }
.confirm-no { .confirm-no { font-family: var(--font-ui); font-size: var(--text-xs); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); background: none; color: var(--text-faint); cursor: pointer; transition: background var(--t-base); }
font-family: var(--font-ui); font-size: var(--text-xs); padding: 4px 10px;
border-radius: var(--radius-sm); border: 1px solid var(--border-dim);
background: none; color: var(--text-faint); cursor: pointer;
transition: background var(--t-base);
}
.confirm-no:hover { background: var(--bg-raised); color: var(--text-muted); } .confirm-no:hover { background: var(--bg-raised); color: var(--text-muted); }
.clear-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-md); color: var(--text-faint); background: none; border: none; cursor: pointer; transition: color var(--t-base), background var(--t-base); }
.clear-btn {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: var(--radius-md);
color: var(--text-faint); background: none; border: none; cursor: pointer;
transition: color var(--t-base), background var(--t-base);
}
.clear-btn:hover { color: var(--color-error); background: var(--color-error-bg); } .clear-btn:hover { color: var(--color-error); background: var(--color-error-bg); }
.stats-bar { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-6) var(--sp-3); flex-shrink: 0; }
.stats-bar {
display: flex; align-items: center; gap: var(--sp-3);
padding: 0 var(--sp-6) var(--sp-3); flex-shrink: 0;
}
.stat-item { display: flex; align-items: baseline; gap: 4px; } .stat-item { display: flex; align-items: baseline; gap: 4px; }
.stat-val { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); } .stat-val { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
.stat-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); } .stat-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
.stat-sep { width: 1px; height: 10px; background: var(--border-dim); flex-shrink: 0; } .stat-sep { width: 1px; height: 10px; background: var(--border-dim); flex-shrink: 0; }
.list { flex: 1; overflow-y: auto; padding: 0 var(--sp-4) var(--sp-6); scrollbar-width: none; } .list { flex: 1; overflow-y: auto; padding: 0 var(--sp-4) var(--sp-6); scrollbar-width: none; }
.list::-webkit-scrollbar { display: none; } .list::-webkit-scrollbar { display: none; }
.group { margin-bottom: var(--sp-4); } .group { margin-bottom: var(--sp-4); }
.group-label { .group-label { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding: var(--sp-1) var(--sp-2) var(--sp-2); }
display: flex; align-items: center; gap: var(--sp-2); .group-count { font-family: var(--font-ui); font-size: 9px; color: var(--text-faint); background: var(--bg-raised); border: 1px solid var(--border-dim); padding: 1px 5px; border-radius: var(--radius-full); letter-spacing: 0; text-transform: none; }
font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); .row-wrap { display: flex; align-items: center; border-radius: var(--radius-md); transition: background var(--t-fast); }
letter-spacing: var(--tracking-wider); text-transform: uppercase;
padding: var(--sp-1) var(--sp-2) var(--sp-2);
}
.group-count {
font-family: var(--font-ui); font-size: 9px; color: var(--text-faint);
background: var(--bg-raised); border: 1px solid var(--border-dim);
padding: 1px 5px; border-radius: var(--radius-full); letter-spacing: 0;
text-transform: none;
}
.row-wrap {
display: flex; align-items: center;
border-radius: var(--radius-md);
transition: background var(--t-fast);
}
.row-wrap:hover { background: var(--bg-raised); } .row-wrap:hover { background: var(--bg-raised); }
.row-wrap:hover .row-delete { opacity: 1; } .row-wrap:hover .row-delete { opacity: 1; }
.row { flex: 1; display: flex; align-items: center; gap: var(--sp-3); padding: 8px var(--sp-2); border-radius: var(--radius-md); border: none; background: none; text-align: left; cursor: pointer; min-width: 0; }
.row {
flex: 1; display: flex; align-items: center; gap: var(--sp-3);
padding: 8px var(--sp-2); border-radius: var(--radius-md);
border: none; background: none; text-align: left; cursor: pointer; min-width: 0;
}
.row:hover :global(.play-icon) { opacity: 1; } .row:hover :global(.play-icon) { opacity: 1; }
.row-delete { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-sm); border: none; background: none; color: var(--text-faint); cursor: pointer; opacity: 0; transition: opacity var(--t-base), color var(--t-base), background var(--t-base); margin-right: var(--sp-1); }
.row-delete {
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-sm);
border: none; background: none; color: var(--text-faint); cursor: pointer;
opacity: 0; transition: opacity var(--t-base), color var(--t-base), background var(--t-base);
margin-right: var(--sp-1);
}
.row-delete:hover { color: var(--color-error); background: var(--color-error-bg); } .row-delete:hover { color: var(--color-error); background: var(--color-error-bg); }
.thumb-wrap { position: relative; flex-shrink: 0; } .thumb-wrap { position: relative; flex-shrink: 0; }
.thumb { .thumb { width: 36px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; display: block; background: var(--bg-raised); border: 1px solid var(--border-dim); }
width: 36px; height: 52px; border-radius: var(--radius-sm); object-fit: cover; .session-badge { position: absolute; bottom: -4px; right: -6px; background: var(--accent-muted); border: 1px solid var(--accent-dim); color: var(--accent-fg); font-family: var(--font-ui); font-size: 9px; font-weight: 600; padding: 1px 4px; border-radius: 6px; line-height: 1.4; pointer-events: none; }
display: block; background: var(--bg-raised); border: 1px solid var(--border-dim);
}
.session-badge {
position: absolute; bottom: -4px; right: -6px;
background: var(--accent-muted); border: 1px solid var(--accent-dim); color: var(--accent-fg);
font-family: var(--font-ui); font-size: 9px; font-weight: 600;
padding: 1px 4px; border-radius: 6px; line-height: 1.4; pointer-events: none;
}
.info { flex: 1; display: flex; flex-direction: column; gap: 3px; overflow: hidden; min-width: 0; } .info { flex: 1; display: flex; flex-direction: column; gap: 3px; overflow: hidden; min-width: 0; }
.manga-title { .manga-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
font-size: var(--text-base); font-weight: var(--weight-medium); .chapter-name { font-size: var(--text-sm); color: var(--text-muted); display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; .chapter-range { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted); }
}
.chapter-name {
font-size: var(--text-sm); color: var(--text-muted);
display: flex; align-items: center; gap: var(--sp-1); min-width: 0;
}
.chapter-range {
display: flex; align-items: center; gap: 5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-muted);
}
.range-sep { color: var(--text-faint); font-size: 10px; flex-shrink: 0; } .range-sep { color: var(--text-faint); font-size: 10px; flex-shrink: 0; }
.page-badge { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); flex-shrink: 0; } .page-badge { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); flex-shrink: 0; }
.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; } .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; }
:global(.play-icon) { color: var(--text-faint); flex-shrink: 0; opacity: 0; transition: opacity var(--t-base); } :global(.play-icon) { color: var(--text-faint); flex-shrink: 0; opacity: 0; transition: opacity var(--t-base); }
.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); } .empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); }
:global(.empty-icon) { color: var(--text-faint); } :global(.empty-icon) { color: var(--text-faint); }
.empty-text { font-size: var(--text-base); color: var(--text-muted); } .empty-text { font-size: var(--text-base); color: var(--text-muted); }
.empty-hint { font-size: var(--text-sm); color: var(--text-faint); } .empty-hint { font-size: var(--text-sm); color: var(--text-faint); }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
</style> </style>
src/components/pages/Home.svelte
+119 -431
View File
@@ -1,22 +1,13 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from "svelte"; import { onMount } from "svelte";
import { import { Play, ArrowRight, ArrowLeft, BookOpen, Clock, Fire, TrendUp, CalendarBlank, CheckCircle, PushPin, X as XIcon, MagnifyingGlass, ListBullets } from "phosphor-svelte";
Play, ArrowRight, ArrowLeft, BookOpen, Clock, Fire, TrendUp,
CalendarBlank, CheckCircle, PushPin, X as XIcon,
MagnifyingGlass, ListBullets,
} from "phosphor-svelte";
import { gql, thumbUrl } from "../../lib/client"; import { gql, thumbUrl } from "../../lib/client";
import { GET_LIBRARY, GET_CHAPTERS } from "../../lib/queries"; import { GET_LIBRARY, GET_CHAPTERS } from "../../lib/queries";
import { cache, CACHE_KEYS } from "../../lib/cache"; import { cache, CACHE_KEYS } from "../../lib/cache";
import { import { history, readingStats, settings, activeManga, navPage, previewManga, openReader, COMPLETED_FOLDER_ID, setHeroSlot } from "../../store";
history, readingStats, settings, activeManga, navPage,
previewManga, openReader, activeChapterList,
COMPLETED_FOLDER_ID, setHeroSlot,
} from "../../store";
import type { HistoryEntry } from "../../store"; import type { HistoryEntry } from "../../store";
import type { Manga, Chapter } from "../../lib/types"; import type { Manga, Chapter } from "../../lib/types";
// ── Helpers ───────────────────────────────────────────────────────────────────
function timeAgo(ts: number): string { function timeAgo(ts: number): string {
const diff = Date.now() - ts, m = Math.floor(diff / 60000); const diff = Date.now() - ts, m = Math.floor(diff / 60000);
if (m < 1) return "Just now"; if (m < 1) return "Just now";
@@ -27,6 +18,7 @@
if (d < 7) return `${d}d ago`; if (d < 7) return `${d}d ago`;
return new Date(ts).toLocaleDateString("en-US", { month: "short", day: "numeric" }); return new Date(ts).toLocaleDateString("en-US", { month: "short", day: "numeric" });
} }
function formatReadTime(mins: number): string { function formatReadTime(mins: number): string {
if (mins < 1) return `${Math.round(mins * 60)}s`; if (mins < 1) return `${Math.round(mins * 60)}s`;
if (mins < 60) return `${Math.round(mins)}m`; if (mins < 60) return `${Math.round(mins)}m`;
@@ -35,11 +27,11 @@
const d = Math.floor(h / 24), rh = h % 24; const d = Math.floor(h / 24), rh = h % 24;
return rh === 0 ? `${d}d` : `${d}d ${rh}h`; return rh === 0 ? `${d}d` : `${d}d ${rh}h`;
} }
function focusEl(node: HTMLElement) { node.focus(); } function focusEl(node: HTMLElement) { node.focus(); }
// ── Library ─────────────────────────────────────────────────────────────────── let libraryManga: Manga[] = $state([]);
let libraryManga: Manga[] = []; let loadingLibrary: boolean = $state(true);
let loadingLibrary = true;
onMount(() => { onMount(() => {
cache.get(CACHE_KEYS.LIBRARY, () => cache.get(CACHE_KEYS.LIBRARY, () =>
@@ -49,35 +41,26 @@
.finally(() => loadingLibrary = false); .finally(() => loadingLibrary = false);
}); });
// ── Continue reading (deduped) ──────────────────────────────────────────────── const continueReading = $derived((() => {
$: continueReading = (() => {
const seen = new Set<number>(); const seen = new Set<number>();
const out: HistoryEntry[] = []; const out: HistoryEntry[] = [];
for (const e of $history) { for (const e of history) {
if (seen.has(e.mangaId)) continue; if (seen.has(e.mangaId)) continue;
seen.add(e.mangaId); seen.add(e.mangaId);
out.push(e); out.push(e);
if (out.length >= 10) break; if (out.length >= 10) break;
} }
return out; return out;
})(); })());
// ── Hero slots ────────────────────────────────────────────────────────────────
const TOTAL_SLOTS = 4; const TOTAL_SLOTS = 4;
interface HeroSlot { interface HeroSlot { kind: "continue" | "pinned" | "empty"; entry?: HistoryEntry; manga?: Manga; slotIndex: number; }
kind: "continue" | "pinned" | "empty";
entry?: HistoryEntry;
manga?: Manga;
slotIndex: number;
}
$: resolvedSlots = (() => { const resolvedSlots = $derived((() => {
const pins = $settings.heroSlots ?? [null, null, null, null]; const pins = settings.heroSlots ?? [null, null, null, null];
const slots: HeroSlot[] = []; const slots: HeroSlot[] = [];
const first = continueReading[0]; const first = continueReading[0];
slots.push(first slots.push(first ? { kind: "continue", entry: first, slotIndex: 0 } : { kind: "empty", slotIndex: 0 });
? { kind: "continue", entry: first, slotIndex: 0 }
: { kind: "empty", slotIndex: 0 });
let hi = 1; let hi = 1;
for (let i = 1; i < TOTAL_SLOTS; i++) { for (let i = 1; i < TOTAL_SLOTS; i++) {
const pinId = pins[i]; const pinId = pins[i];
@@ -86,23 +69,18 @@
if (manga) { slots.push({ kind: "pinned", manga, slotIndex: i }); continue; } if (manga) { slots.push({ kind: "pinned", manga, slotIndex: i }); continue; }
} }
const entry = continueReading[hi++]; const entry = continueReading[hi++];
slots.push(entry slots.push(entry ? { kind: "continue", entry, slotIndex: i } : { kind: "empty", slotIndex: i });
? { kind: "continue", entry, slotIndex: i }
: { kind: "empty", slotIndex: i });
} }
return slots; return slots;
})(); })());
let activeIdx = 0; let activeIdx = $state(0);
$: activeSlot = resolvedSlots[activeIdx]; const activeSlot = $derived(resolvedSlots[activeIdx]);
$: heroThumb = activeSlot?.kind === "pinned" ? thumbUrl(activeSlot.manga?.thumbnailUrl ?? "") const heroThumb = $derived(activeSlot?.kind === "pinned" ? thumbUrl(activeSlot.manga?.thumbnailUrl ?? "") : activeSlot?.kind === "continue" ? thumbUrl(activeSlot.entry?.thumbnailUrl ?? "") : "");
: activeSlot?.kind === "continue" ? thumbUrl(activeSlot.entry?.thumbnailUrl ?? "") : ""; const heroTitle = $derived(activeSlot?.kind === "pinned" ? (activeSlot.manga?.title ?? "") : activeSlot?.kind === "continue" ? (activeSlot.entry?.mangaTitle ?? "") : "");
$: heroTitle = activeSlot?.kind === "pinned" ? (activeSlot.manga?.title ?? "") const heroManga = $derived(activeSlot?.kind === "pinned" ? activeSlot.manga : activeSlot?.kind === "continue" ? libraryManga.find(m => m.id === activeSlot.entry?.mangaId) : null);
: activeSlot?.kind === "continue" ? (activeSlot.entry?.mangaTitle ?? "") : ""; const heroEntry = $derived(activeSlot?.kind === "continue" ? activeSlot.entry : null);
$: heroManga = activeSlot?.kind === "pinned" ? activeSlot.manga const heroMangaId = $derived(heroEntry?.mangaId ?? heroManga?.id ?? null);
: activeSlot?.kind === "continue" ? libraryManga.find(m => m.id === activeSlot.entry?.mangaId) : null;
$: heroEntry = activeSlot?.kind === "continue" ? activeSlot.entry : null;
$: heroMangaId = heroEntry?.mangaId ?? heroManga?.id ?? null;
function cycleNext() { activeIdx = (activeIdx + 1) % TOTAL_SLOTS; heroChapters = []; } function cycleNext() { activeIdx = (activeIdx + 1) % TOTAL_SLOTS; heroChapters = []; }
function cyclePrev() { activeIdx = (activeIdx - 1 + TOTAL_SLOTS) % TOTAL_SLOTS; heroChapters = []; } function cyclePrev() { activeIdx = (activeIdx - 1 + TOTAL_SLOTS) % TOTAL_SLOTS; heroChapters = []; }
@@ -113,18 +91,18 @@
if (e.key === "ArrowRight") cycleNext(); if (e.key === "ArrowRight") cycleNext();
if (e.key === "ArrowLeft") cyclePrev(); if (e.key === "ArrowLeft") cyclePrev();
} }
onMount(() => window.addEventListener("keydown", onKey)); onMount(() => {
onDestroy(() => window.removeEventListener("keydown", onKey)); window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
});
// ── Hero chapter panel ──────────────────────────────────────────────────────── let heroChapters: Chapter[] = $state([]);
// Load chapters for the active slot's manga, show 3-5 starting at where user left off let loadingHeroChapters = $state(false);
let heroChapters: Chapter[] = [];
let loadingHeroChapters = false;
let heroChaptersFor: number | null = null; let heroChaptersFor: number | null = null;
$: if (heroMangaId && heroMangaId !== heroChaptersFor) { $effect(() => {
loadHeroChapters(heroMangaId); if (heroMangaId && heroMangaId !== heroChaptersFor) loadHeroChapters(heroMangaId);
} });
async function loadHeroChapters(mangaId: number) { async function loadHeroChapters(mangaId: number) {
heroChaptersFor = mangaId; heroChaptersFor = mangaId;
@@ -132,20 +110,16 @@
heroChapters = []; heroChapters = [];
try { try {
const d = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId }); const d = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId });
if (heroChaptersFor !== mangaId) return; // stale if (heroChaptersFor !== mangaId) return;
const all = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder); const all = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
// Find the chapter user left off on, show from one before it const lastReadIdx = heroEntry ? all.findIndex(c => c.id === heroEntry!.chapterId) : all.findLastIndex(c => c.isRead);
const lastReadIdx = heroEntry
? all.findIndex(c => c.id === heroEntry!.chapterId)
: all.findLastIndex(c => c.isRead);
const startIdx = Math.max(0, lastReadIdx); const startIdx = Math.max(0, lastReadIdx);
heroChapters = all.slice(startIdx, startIdx + 5); heroChapters = all.slice(startIdx, startIdx + 5);
} catch { heroChapters = []; } } catch { heroChapters = []; }
finally { loadingHeroChapters = false; } finally { loadingHeroChapters = false; }
} }
// ── Resume helpers ──────────────────────────────────────────────────────────── let resuming = $state(false);
let resuming = false;
async function openChapter(chapter: Chapter) { async function openChapter(chapter: Chapter) {
if (!heroMangaId) return; if (!heroMangaId) return;
@@ -157,28 +131,24 @@
all = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder); all = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
} }
openReader(chapter, all); openReader(chapter, all);
} catch { } catch { activeManga = { id: heroMangaId, title: heroTitle, thumbnailUrl: heroManga?.thumbnailUrl ?? "" } as any; }
activeManga.set({ id: heroMangaId, title: heroTitle, thumbnailUrl: (heroManga?.thumbnailUrl ?? "") } as any); finally { resuming = false; }
} finally { resuming = false; }
} }
async function resumeActive() { async function resumeActive() {
if (!heroEntry && heroManga) { activeManga.set(heroManga); return; } if (!heroEntry && heroManga) { activeManga = heroManga; return; }
if (!heroEntry) return; if (!heroEntry) return;
// Use hero chapter panel data if available (already fetched)
const target = heroChapters.find(c => c.id === heroEntry!.chapterId) ?? heroChapters[0]; const target = heroChapters.find(c => c.id === heroEntry!.chapterId) ?? heroChapters[0];
if (target && heroChapters.length) { await openChapter(target); return; } if (target && heroChapters.length) { await openChapter(target); return; }
// Fallback — fetch
resuming = true; resuming = true;
try { try {
const d = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: heroEntry.mangaId }); const d = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: heroEntry.mangaId });
const chapters = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder); const chapters = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
const ch = chapters.find(c => c.id === heroEntry!.chapterId) ?? chapters[0]; const ch = chapters.find(c => c.id === heroEntry!.chapterId) ?? chapters[0];
if (ch) openReader(ch, chapters); if (ch) openReader(ch, chapters);
else activeManga.set({ id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any); else activeManga = { id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any;
} catch { } catch { activeManga = { id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any; }
activeManga.set({ id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any); finally { resuming = false; }
} finally { resuming = false; }
} }
async function resumeEntry(entry: HistoryEntry) { async function resumeEntry(entry: HistoryEntry) {
@@ -187,32 +157,27 @@
const chapters = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder); const chapters = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
const ch = chapters.find(c => c.id === entry.chapterId) ?? chapters[0]; const ch = chapters.find(c => c.id === entry.chapterId) ?? chapters[0];
if (ch) openReader(ch, chapters); if (ch) openReader(ch, chapters);
else activeManga.set({ id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any); else activeManga = { id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any;
} catch { } catch { activeManga = { id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any; }
activeManga.set({ id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any);
}
} }
// ── Slot picker ─────────────────────────────────────────────────────────────── let pickerOpen = $state(false);
let pickerOpen = false; let pickerSlotIndex: 1|2|3|null = $state(null);
let pickerSlotIndex: 1|2|3|null = null; let pickerSearch = $state("");
let pickerSearch = "";
$: pickerResults = pickerSearch.trim() const pickerResults = $derived(pickerSearch.trim()
? libraryManga.filter(m => m.title.toLowerCase().includes(pickerSearch.toLowerCase())).slice(0, 20) ? libraryManga.filter(m => m.title.toLowerCase().includes(pickerSearch.toLowerCase())).slice(0, 20)
: libraryManga.slice(0, 20); : libraryManga.slice(0, 20));
function openPicker(i: 1|2|3) { pickerSlotIndex = i; pickerOpen = true; pickerSearch = ""; } function openPicker(i: 1|2|3) { pickerSlotIndex = i; pickerOpen = true; pickerSearch = ""; }
function closePicker() { pickerOpen = false; pickerSlotIndex = null; } function closePicker() { pickerOpen = false; pickerSlotIndex = null; }
function pinManga(m: Manga) { if (pickerSlotIndex !== null) { setHeroSlot(pickerSlotIndex, m.id); closePicker(); } } function pinManga(m: Manga) { if (pickerSlotIndex !== null) { setHeroSlot(pickerSlotIndex, m.id); closePicker(); } }
function unpinSlot(i: 1|2|3) { setHeroSlot(i, null); } function unpinSlot(i: 1|2|3) { setHeroSlot(i, null); }
// ── Completed, activity, stats ──────────────────────────────────────────────── const completedIds = $derived(settings.folders.find(f => f.id === COMPLETED_FOLDER_ID)?.mangaIds ?? []);
$: completedIds = $settings.folders.find(f => f.id === COMPLETED_FOLDER_ID)?.mangaIds ?? []; const completedManga = $derived(completedIds.length > 0 ? libraryManga.filter(m => completedIds.includes(m.id)).slice(0, 10) : []);
$: completedManga = completedIds.length > 0 const recentHistory = $derived(history.slice(0, 8));
? libraryManga.filter(m => completedIds.includes(m.id)).slice(0, 10) const stats = $derived(readingStats);
: [];
$: recentHistory = $history.slice(0, 8);
$: stats = $readingStats;
$: hasStats = true;
function handleRowWheel(e: WheelEvent) { function handleRowWheel(e: WheelEvent) {
if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return; if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
@@ -224,11 +189,9 @@
<div class="root"> <div class="root">
<div class="body"> <div class="body">
<!-- ══ HERO ════════════════════════════════════════════════════════════════ -->
<div class="hero-section"> <div class="hero-section">
<div class="hero-stage"> <div class="hero-stage">
<!-- Blurred backdrop -->
{#if heroThumb} {#if heroThumb}
<div class="hero-backdrop" style="background-image:url({heroThumb})"></div> <div class="hero-backdrop" style="background-image:url({heroThumb})"></div>
{:else} {:else}
@@ -236,37 +199,23 @@
{/if} {/if}
<div class="hero-scrim"></div> <div class="hero-scrim"></div>
<!-- ── Col 1: Cover (clickable → resume) ─────────────────────────── --> <button class="hero-cover-col" onclick={resumeActive} disabled={resuming || activeSlot?.kind === "empty"} title={heroTitle ? `Resume ${heroTitle}` : undefined} aria-label={heroTitle ? `Resume ${heroTitle}` : "No manga selected"}>
<button
class="hero-cover-col"
on:click={resumeActive}
disabled={resuming || activeSlot?.kind === "empty"}
title={heroTitle ? `Resume ${heroTitle}` : undefined}
aria-label={heroTitle ? `Resume ${heroTitle}` : "No manga selected"}
>
{#if heroThumb} {#if heroThumb}
<img src={heroThumb} alt={heroTitle} class="hero-cover" loading="eager" decoding="async" /> <img src={heroThumb} alt={heroTitle} class="hero-cover" loading="eager" decoding="async" />
{#if activeSlot?.kind === "continue"} {#if activeSlot?.kind === "continue"}
<div class="cover-resume-hint"> <div class="cover-resume-hint"><Play size={18} weight="fill" /></div>
<Play size={18} weight="fill" />
</div>
{/if} {/if}
{:else} {:else}
<div class="hero-cover-empty"><BookOpen size={28} weight="light" /></div> <div class="hero-cover-empty"><BookOpen size={28} weight="light" /></div>
{/if} {/if}
</button> </button>
<!-- ── Col 2: Details ────────────────────────────────────────────── -->
<div class="hero-details"> <div class="hero-details">
{#if activeSlot?.kind === "empty"} {#if activeSlot?.kind === "empty"}
<p class="hero-empty-title">Nothing here yet</p> <p class="hero-empty-title">Nothing here yet</p>
<p class="hero-empty-sub"> <p class="hero-empty-sub">{activeSlot.slotIndex === 0 ? "Read a manga to see it here" : "Pin a manga or keep reading to fill this slot"}</p>
{activeSlot.slotIndex === 0
? "Read a manga to see it here"
: "Pin a manga or keep reading to fill this slot"}
</p>
{#if activeSlot.slotIndex !== 0} {#if activeSlot.slotIndex !== 0}
<button class="hero-cta" on:click={() => openPicker(activeSlot.slotIndex as 1|2|3)}> <button class="hero-cta" onclick={() => openPicker(activeSlot.slotIndex as 1|2|3)}>
<PushPin size={11} weight="fill" /> Pin manga <PushPin size={11} weight="fill" /> Pin manga
</button> </button>
{/if} {/if}
@@ -283,10 +232,7 @@
</div> </div>
<h2 class="hero-title">{heroTitle}</h2> <h2 class="hero-title">{heroTitle}</h2>
{#if heroManga?.author}<p class="hero-author">{heroManga.author}</p>{/if}
{#if heroManga?.author}
<p class="hero-author">{heroManga.author}</p>
{/if}
{#if heroEntry} {#if heroEntry}
<p class="hero-progress"> <p class="hero-progress">
@@ -297,28 +243,25 @@
</p> </p>
{/if} {/if}
{#if heroManga?.description} {#if heroManga?.description}<p class="hero-desc">{heroManga.description}</p>{/if}
<p class="hero-desc">{heroManga.description}</p>
{/if}
<div class="hero-actions"> <div class="hero-actions">
{#if activeSlot?.kind === "continue"} {#if activeSlot?.kind === "continue"}
<button class="hero-cta" on:click={resumeActive} disabled={resuming}> <button class="hero-cta" onclick={resumeActive} disabled={resuming}>
<Play size={11} weight="fill" /> <Play size={11} weight="fill" />{resuming ? "Loading…" : "Resume"}
{resuming ? "Loading…" : "Resume"}
</button> </button>
{:else if heroManga} {:else if heroManga}
<button class="hero-cta" on:click={() => previewManga.set(heroManga!)}> <button class="hero-cta" onclick={() => previewManga = heroManga!}>
<BookOpen size={11} weight="light" /> View manga <BookOpen size={11} weight="light" /> View manga
</button> </button>
{/if} {/if}
{#if activeSlot?.slotIndex !== 0} {#if activeSlot?.slotIndex !== 0}
{#if activeSlot?.kind === "pinned"} {#if activeSlot?.kind === "pinned"}
<button class="hero-cta-ghost" on:click={() => unpinSlot(activeSlot.slotIndex as 1|2|3)}> <button class="hero-cta-ghost" onclick={() => unpinSlot(activeSlot.slotIndex as 1|2|3)}>
<XIcon size={10} weight="bold" /> Unpin <XIcon size={10} weight="bold" /> Unpin
</button> </button>
{:else} {:else}
<button class="hero-cta-ghost" on:click={() => openPicker(activeSlot!.slotIndex as 1|2|3)}> <button class="hero-cta-ghost" onclick={() => openPicker(activeSlot!.slotIndex as 1|2|3)}>
<PushPin size={10} weight="light" /> Pin <PushPin size={10} weight="light" /> Pin
</button> </button>
{/if} {/if}
@@ -326,35 +269,20 @@
</div> </div>
{/if} {/if}
<!-- Slot dots and arrows — inside details col, at the bottom -->
<div class="hero-nav-row"> <div class="hero-nav-row">
<button class="hero-nav-btn" on:click={cyclePrev} aria-label="Previous"> <button class="hero-nav-btn" onclick={cyclePrev} aria-label="Previous"><ArrowLeft size={12} weight="bold" /></button>
<ArrowLeft size={12} weight="bold" />
</button>
<div class="hero-dots"> <div class="hero-dots">
{#each resolvedSlots as slot, i} {#each resolvedSlots as slot, i}
<button <button class="hero-dot" class:active={activeIdx === i} class:pinned={slot.kind === "pinned"} onclick={() => goToSlot(i)} aria-label="Slot {i + 1}"></button>
class="hero-dot"
class:active={activeIdx === i}
class:pinned={slot.kind === "pinned"}
on:click={() => goToSlot(i)}
aria-label="Slot {i + 1}"
></button>
{/each} {/each}
</div> </div>
<button class="hero-nav-btn" on:click={cycleNext} aria-label="Next"> <button class="hero-nav-btn" onclick={cycleNext} aria-label="Next"><ArrowRight size={12} weight="bold" /></button>
<ArrowRight size={12} weight="bold" />
</button>
<span class="hero-counter">{activeIdx + 1}/{TOTAL_SLOTS}</span> <span class="hero-counter">{activeIdx + 1}/{TOTAL_SLOTS}</span>
</div> </div>
</div> </div>
<!-- ── Col 3: Chapters panel ──────────────────────────────────────── -->
<div class="hero-chapters"> <div class="hero-chapters">
<div class="hero-chapters-header"> <div class="hero-chapters-header"><ListBullets size={11} weight="bold" /><span>Up Next</span></div>
<ListBullets size={11} weight="bold" />
<span>Up Next</span>
</div>
{#if activeSlot?.kind === "empty"} {#if activeSlot?.kind === "empty"}
<p class="hero-chapters-empty">No chapters to show</p> <p class="hero-chapters-empty">No chapters to show</p>
@@ -362,10 +290,7 @@
{#each Array(4) as _} {#each Array(4) as _}
<div class="chapter-row-sk"> <div class="chapter-row-sk">
<div class="sk sk-num"></div> <div class="sk sk-num"></div>
<div class="sk-info"> <div class="sk-info"><div class="sk sk-name"></div><div class="sk sk-meta"></div></div>
<div class="sk sk-name"></div>
<div class="sk sk-meta"></div>
</div>
</div> </div>
{/each} {/each}
{:else if heroChapters.length === 0} {:else if heroChapters.length === 0}
@@ -373,12 +298,7 @@
{:else} {:else}
{#each heroChapters as ch (ch.id)} {#each heroChapters as ch (ch.id)}
{@const isCurrent = heroEntry?.chapterId === ch.id} {@const isCurrent = heroEntry?.chapterId === ch.id}
<button <button class="chapter-row" class:chapter-row-current={isCurrent} class:chapter-row-read={ch.isRead && !isCurrent} onclick={() => openChapter(ch)}>
class="chapter-row"
class:chapter-row-current={isCurrent}
class:chapter-row-read={ch.isRead && !isCurrent}
on:click={() => openChapter(ch)}
>
<span class="ch-num">Ch.{ch.chapterNumber % 1 === 0 ? Math.floor(ch.chapterNumber) : ch.chapterNumber}</span> <span class="ch-num">Ch.{ch.chapterNumber % 1 === 0 ? Math.floor(ch.chapterNumber) : ch.chapterNumber}</span>
<div class="ch-info"> <div class="ch-info">
<span class="ch-name">{ch.name}</span> <span class="ch-name">{ch.name}</span>
@@ -390,13 +310,11 @@
<span class="ch-meta">{new Date(Number(ch.uploadDate) > 1e10 ? Number(ch.uploadDate) : Number(ch.uploadDate)*1000).toLocaleDateString("en-US",{month:"short",day:"numeric"})}</span> <span class="ch-meta">{new Date(Number(ch.uploadDate) > 1e10 ? Number(ch.uploadDate) : Number(ch.uploadDate)*1000).toLocaleDateString("en-US",{month:"short",day:"numeric"})}</span>
{/if} {/if}
</div> </div>
{#if isCurrent} {#if isCurrent}<Play size={10} weight="fill" class="ch-play-icon" />{/if}
<Play size={10} weight="fill" class="ch-play-icon" />
{/if}
</button> </button>
{/each} {/each}
{#if heroManga} {#if heroManga}
<button class="ch-view-all" on:click={() => { if (heroManga) activeManga.set(heroManga); }}> <button class="ch-view-all" onclick={() => { if (heroManga) activeManga = heroManga; }}>
All chapters <ArrowRight size={9} weight="bold" /> All chapters <ArrowRight size={9} weight="bold" />
</button> </button>
{/if} {/if}
@@ -406,24 +324,19 @@
</div> </div>
</div> </div>
<!-- ══ RECENT ACTIVITY ═════════════════════════════════════════════════════ -->
{#if recentHistory.length > 0} {#if recentHistory.length > 0}
<div class="section"> <div class="section">
<div class="section-header"> <div class="section-header">
<span class="section-title"><Clock size={10} weight="bold" /> Recent Activity</span> <span class="section-title"><Clock size={10} weight="bold" /> Recent Activity</span>
<button class="see-all" on:click={() => navPage.set("history")}> <button class="see-all" onclick={() => navPage = "history"}>Full history <ArrowRight size={9} weight="bold" /></button>
Full history <ArrowRight size={9} weight="bold" />
</button>
</div> </div>
<div class="activity-list"> <div class="activity-list">
{#each recentHistory as entry (entry.chapterId)} {#each recentHistory as entry (entry.chapterId)}
<button class="activity-row" on:click={() => resumeEntry(entry)}> <button class="activity-row" onclick={() => resumeEntry(entry)}>
<img src={thumbUrl(entry.thumbnailUrl)} alt={entry.mangaTitle} class="activity-thumb" loading="lazy" decoding="async" /> <img src={thumbUrl(entry.thumbnailUrl)} alt={entry.mangaTitle} class="activity-thumb" loading="lazy" decoding="async" />
<div class="activity-info"> <div class="activity-info">
<span class="activity-title">{entry.mangaTitle}</span> <span class="activity-title">{entry.mangaTitle}</span>
<span class="activity-sub"> <span class="activity-sub">{entry.chapterName}{entry.pageNumber > 1 ? ` · p.${entry.pageNumber}` : ""}</span>
{entry.chapterName}{entry.pageNumber > 1 ? ` · p.${entry.pageNumber}` : ""}
</span>
</div> </div>
<span class="activity-time">{timeAgo(entry.readAt)}</span> <span class="activity-time">{timeAgo(entry.readAt)}</span>
<span class="activity-play"><Play size={10} weight="fill" /></span> <span class="activity-play"><Play size={10} weight="fill" /></span>
@@ -434,27 +347,22 @@
{:else} {:else}
<div class="empty-state"> <div class="empty-state">
<p class="empty-text">Start reading to build your activity feed</p> <p class="empty-text">Start reading to build your activity feed</p>
<button class="empty-cta" on:click={() => navPage.set("library")}> <button class="empty-cta" onclick={() => navPage = "library"}>Open Library <ArrowRight size={11} weight="bold" /></button>
Open Library <ArrowRight size={11} weight="bold" />
</button>
</div> </div>
{/if} {/if}
<!-- ══ BOTTOM ROW ══════════════════════════════════════════════════════════ -->
<div class="bottom-row"> <div class="bottom-row">
<!-- Left: Completed -->
<div class="bottom-col"> <div class="bottom-col">
<div class="bottom-section-hd"> <div class="bottom-section-hd">
<span class="section-title"><CheckCircle size={10} weight="bold" /> Completed</span> <span class="section-title"><CheckCircle size={10} weight="bold" /> Completed</span>
{#if completedManga.length > 0} {#if completedManga.length > 0}
<button class="see-all" on:click={() => navPage.set("library")}>View all <ArrowRight size={9} weight="bold" /></button> <button class="see-all" onclick={() => navPage = "library"}>View all <ArrowRight size={9} weight="bold" /></button>
{/if} {/if}
</div> </div>
{#if completedManga.length > 0} {#if completedManga.length > 0}
<div class="mini-row" on:wheel|preventDefault={handleRowWheel}> <div class="mini-row" onwheel={(e) => { e.preventDefault(); handleRowWheel(e); }}>
{#each completedManga as m (m.id)} {#each completedManga as m (m.id)}
<button class="mini-card" on:click={() => previewManga.set(m)}> <button class="mini-card" onclick={() => previewManga = m}>
<div class="mini-cover-wrap"> <div class="mini-cover-wrap">
<img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="mini-cover" loading="lazy" decoding="async" /> <img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="mini-cover" loading="lazy" decoding="async" />
<div class="mini-gradient"></div> <div class="mini-gradient"></div>
@@ -473,54 +381,17 @@
<div class="bottom-divider"></div> <div class="bottom-divider"></div>
<!-- Right: Stats -->
<div class="bottom-col"> <div class="bottom-col">
<div class="bottom-section-hd"> <div class="bottom-section-hd">
<span class="section-title"><TrendUp size={10} weight="bold" /> Your Stats</span> <span class="section-title"><TrendUp size={10} weight="bold" /> Your Stats</span>
</div> </div>
<div class="stats-grid"> <div class="stats-grid">
<div class="stat-card"> <div class="stat-card"><div class="stat-icon-wrap stat-fire"><Fire size={16} weight="fill" /></div><div class="stat-body"><span class="stat-val">{stats.currentStreakDays}</span><span class="stat-label">Day streak</span></div></div>
<div class="stat-icon-wrap stat-fire"><Fire size={16} weight="fill" /></div> <div class="stat-card"><div class="stat-icon-wrap stat-accent"><BookOpen size={16} weight="light" /></div><div class="stat-body"><span class="stat-val">{stats.totalChaptersRead}</span><span class="stat-label">Chapters read</span></div></div>
<div class="stat-body"> <div class="stat-card"><div class="stat-icon-wrap stat-neutral"><Clock size={16} weight="light" /></div><div class="stat-body"><span class="stat-val">{formatReadTime(stats.totalMinutesRead)}</span><span class="stat-label">Read time</span></div></div>
<span class="stat-val">{stats.currentStreakDays}</span> <div class="stat-card"><div class="stat-icon-wrap stat-neutral"><TrendUp size={16} weight="light" /></div><div class="stat-body"><span class="stat-val">{stats.totalMangaRead}</span><span class="stat-label">Series started</span></div></div>
<span class="stat-label">Day streak</span> <div class="stat-card"><div class="stat-icon-wrap stat-green"><CheckCircle size={16} weight="light" /></div><div class="stat-body"><span class="stat-val">{completedIds.length}</span><span class="stat-label">Completed</span></div></div>
</div> <div class="stat-card"><div class="stat-icon-wrap stat-neutral"><CalendarBlank size={16} weight="light" /></div><div class="stat-body"><span class="stat-val">{stats.longestStreakDays}d</span><span class="stat-label">Best streak</span></div></div>
</div>
<div class="stat-card">
<div class="stat-icon-wrap stat-accent"><BookOpen size={16} weight="light" /></div>
<div class="stat-body">
<span class="stat-val">{stats.totalChaptersRead}</span>
<span class="stat-label">Chapters read</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon-wrap stat-neutral"><Clock size={16} weight="light" /></div>
<div class="stat-body">
<span class="stat-val">{formatReadTime(stats.totalMinutesRead)}</span>
<span class="stat-label">Read time</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon-wrap stat-neutral"><TrendUp size={16} weight="light" /></div>
<div class="stat-body">
<span class="stat-val">{stats.totalMangaRead}</span>
<span class="stat-label">Series started</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon-wrap stat-green"><CheckCircle size={16} weight="light" /></div>
<div class="stat-body">
<span class="stat-val">{completedIds.length}</span>
<span class="stat-label">Completed</span>
</div>
</div>
<div class="stat-card">
<div class="stat-icon-wrap stat-neutral"><CalendarBlank size={16} weight="light" /></div>
<div class="stat-body">
<span class="stat-val">{stats.longestStreakDays}d</span>
<span class="stat-label">Best streak</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -528,15 +399,12 @@
</div> </div>
</div> </div>
<!-- ── Slot picker ────────────────────────────────────────────────────────────── -->
{#if pickerOpen} {#if pickerOpen}
<!-- svelte-ignore a11y-click-events-have-key-events --> <div class="picker-backdrop" onclick={(e) => { if (e.target === e.currentTarget) closePicker(); }}>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="picker-backdrop" on:click|self={closePicker}>
<div class="picker-modal"> <div class="picker-modal">
<div class="picker-header"> <div class="picker-header">
<span class="picker-title">Pin manga — slot {(pickerSlotIndex ?? 0) + 1}</span> <span class="picker-title">Pin manga — slot {(pickerSlotIndex ?? 0) + 1}</span>
<button class="picker-close" on:click={closePicker}><XIcon size={13} weight="light" /></button> <button class="picker-close" onclick={closePicker}><XIcon size={13} weight="light" /></button>
</div> </div>
<div class="picker-search-wrap"> <div class="picker-search-wrap">
<MagnifyingGlass size={12} weight="light" style="color:var(--text-faint);flex-shrink:0" /> <MagnifyingGlass size={12} weight="light" style="color:var(--text-faint);flex-shrink:0" />
@@ -549,7 +417,7 @@
<p class="picker-empty">No results</p> <p class="picker-empty">No results</p>
{:else} {:else}
{#each pickerResults as m (m.id)} {#each pickerResults as m (m.id)}
<button class="picker-row" on:click={() => pinManga(m)}> <button class="picker-row" onclick={() => pinManga(m)}>
<img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="picker-thumb" loading="lazy" /> <img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="picker-thumb" loading="lazy" />
<div class="picker-info"> <div class="picker-info">
<span class="picker-manga-title">{m.title}</span> <span class="picker-manga-title">{m.title}</span>
@@ -567,228 +435,75 @@
.root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; } .root { display: flex; flex-direction: column; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
.body { flex: 1; overflow-y: auto; scrollbar-width: none; padding-bottom: var(--sp-8); } .body { flex: 1; overflow-y: auto; scrollbar-width: none; padding-bottom: var(--sp-8); }
.body::-webkit-scrollbar { display: none; } .body::-webkit-scrollbar { display: none; }
/* ══ HERO ════════════════════════════════════════════════════════════════════ */
.hero-section { padding: var(--sp-4) var(--sp-5) 0; } .hero-section { padding: var(--sp-4) var(--sp-5) 0; }
.hero-stage { position: relative; display: flex; align-items: stretch; height: 340px; border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border-dim); box-shadow: 0 6px 28px rgba(0,0,0,0.28); }
.hero-stage { .hero-backdrop { position: absolute; inset: -14px; background-size: cover; background-position: center 25%; filter: blur(24px) saturate(1.4) brightness(0.32); transform: scale(1.07); pointer-events: none; z-index: 0; }
position: relative; display: flex; align-items: stretch;
height: 340px; border-radius: var(--radius-xl); overflow: hidden;
background: var(--bg-raised); border: 1px solid var(--border-dim);
box-shadow: 0 6px 28px rgba(0,0,0,0.28);
}
/* Backdrop */
.hero-backdrop {
position: absolute; inset: -14px;
background-size: cover; background-position: center 25%;
filter: blur(24px) saturate(1.4) brightness(0.32);
transform: scale(1.07); pointer-events: none; z-index: 0;
}
.hero-bd-empty { background: var(--bg-void); filter: none; } .hero-bd-empty { background: var(--bg-void); filter: none; }
.hero-scrim { .hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.4) 100%); }
position: absolute; inset: 0; z-index: 1; pointer-events: none; .hero-cover-col { position: relative; z-index: 2; width: clamp(150px, 30%, 195px); flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); background: none; border: none; cursor: pointer; border-right: 1px solid rgba(255,255,255,0.06); }
background: linear-gradient(100deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.4) 100%);
}
/* ── Cover column ─────────────────────────────────────────────────────────── */
.hero-cover-col {
position: relative; z-index: 2;
width: clamp(150px, 30%, 195px); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
padding: var(--sp-5); background: none; border: none;
cursor: pointer;
/* Subtle inner separator */
border-right: 1px solid rgba(255,255,255,0.06);
}
.hero-cover-col:hover .hero-cover { filter: brightness(1.1); } .hero-cover-col:hover .hero-cover { filter: brightness(1.1); }
.hero-cover-col:hover .cover-resume-hint { opacity: 1; } .hero-cover-col:hover .cover-resume-hint { opacity: 1; }
.hero-cover-col:disabled { cursor: default; } .hero-cover-col:disabled { cursor: default; }
.hero-cover { .hero-cover { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 10px 36px rgba(0,0,0,0.75), 0 2px 8px rgba(0,0,0,0.4); display: block; transition: filter 0.18s ease; }
width: 100%; aspect-ratio: 2/3; object-fit: cover; .hero-cover-empty { width: 100%; aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center; background: var(--bg-overlay); border-radius: var(--radius-lg); color: var(--text-faint); }
border-radius: var(--radius-lg); .cover-resume-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; background: rgba(0,0,0,0.35); border-radius: var(--radius-lg); opacity: 0; transition: opacity 0.18s ease; pointer-events: none; }
box-shadow: 0 10px 36px rgba(0,0,0,0.75), 0 2px 8px rgba(0,0,0,0.4); .hero-details { position: relative; z-index: 2; flex: 1; min-width: 0; padding: var(--sp-5) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); overflow: hidden; border-right: 1px solid rgba(255,255,255,0.06); }
display: block; transition: filter 0.18s ease;
}
.hero-cover-empty {
width: 100%; aspect-ratio: 2/3;
display: flex; align-items: center; justify-content: center;
background: var(--bg-overlay); border-radius: var(--radius-lg);
color: var(--text-faint);
}
/* Play hint overlay on cover hover */
.cover-resume-hint {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 32px;
background: rgba(0,0,0,0.35); border-radius: var(--radius-lg);
opacity: 0; transition: opacity 0.18s ease;
pointer-events: none;
}
/* ── Details column ───────────────────────────────────────────────────────── */
.hero-details {
position: relative; z-index: 2; flex: 1; min-width: 0;
padding: var(--sp-5) var(--sp-4) var(--sp-4);
display: flex; flex-direction: column; gap: var(--sp-2); overflow: hidden;
border-right: 1px solid rgba(255,255,255,0.06);
}
.hero-tags { display: flex; flex-wrap: wrap; gap: 5px; flex-shrink: 0; } .hero-tags { display: flex; flex-wrap: wrap; gap: 5px; flex-shrink: 0; }
.hero-tag { .hero-tag { font-family: var(--font-ui); font-size: 9px; letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-full); background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.62); border: 1px solid rgba(255,255,255,0.14); }
font-family: var(--font-ui); font-size: 9px; letter-spacing: var(--tracking-wide);
text-transform: uppercase; padding: 2px 7px; border-radius: var(--radius-full);
background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.62);
border: 1px solid rgba(255,255,255,0.14);
}
.hero-tag-reading { background: var(--accent-muted); color: var(--accent-fg); border-color: var(--accent-dim); } .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.18); color: #c4a8f0; border-color: rgba(168,132,232,0.28); } .hero-tag-pinned { background: rgba(168,132,232,0.18); color: #c4a8f0; border-color: rgba(168,132,232,0.28); }
.hero-title { font-size: var(--text-xl); font-weight: var(--weight-medium); color: #fff; line-height: var(--leading-tight); margin: 0; flex-shrink: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.hero-title {
font-size: var(--text-xl); font-weight: var(--weight-medium); color: #fff;
line-height: var(--leading-tight); margin: 0; flex-shrink: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.hero-author { font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.48); letter-spacing: var(--tracking-wide); flex-shrink: 0; } .hero-author { font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.48); letter-spacing: var(--tracking-wide); flex-shrink: 0; }
.hero-progress { .hero-progress { display: flex; align-items: center; gap: 5px; flex-shrink: 0; font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.58); letter-spacing: var(--tracking-wide); }
display: flex; align-items: center; gap: 5px; flex-shrink: 0;
font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.58);
letter-spacing: var(--tracking-wide);
}
.hero-prog-page { color: rgba(255,255,255,0.38); } .hero-prog-page { color: rgba(255,255,255,0.38); }
.hero-prog-time { margin-left: auto; color: rgba(255,255,255,0.32); } .hero-prog-time { margin-left: auto; color: rgba(255,255,255,0.32); }
.hero-desc { .hero-desc { font-size: var(--text-xs); color: rgba(255,255,255,0.42); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; flex: 1; min-height: 0; }
font-size: var(--text-xs); color: rgba(255,255,255,0.42); line-height: 1.55;
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
flex: 1; min-height: 0;
}
.hero-empty-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: rgba(255,255,255,0.5); flex-shrink: 0; } .hero-empty-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: rgba(255,255,255,0.5); flex-shrink: 0; }
.hero-empty-sub { font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.28); letter-spacing: var(--tracking-wide); line-height: var(--leading-snug); } .hero-empty-sub { font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.28); letter-spacing: var(--tracking-wide); line-height: var(--leading-snug); }
.hero-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; flex-wrap: wrap; } .hero-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; flex-wrap: wrap; }
.hero-cta { .hero-cta { display: inline-flex; align-items: center; gap: 6px; 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); white-space: nowrap; }
display: inline-flex; align-items: center; gap: 6px;
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); white-space: nowrap;
}
.hero-cta:hover:not(:disabled) { filter: brightness(1.15); } .hero-cta:hover:not(:disabled) { filter: brightness(1.15); }
.hero-cta:disabled { opacity: 0.55; cursor: default; } .hero-cta:disabled { opacity: 0.55; cursor: default; }
.hero-cta-ghost { .hero-cta-ghost { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 7px 14px; border-radius: var(--radius-full); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13); color: rgba(255,255,255,0.52); cursor: pointer; transition: background var(--t-base), color var(--t-base); white-space: nowrap; }
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
padding: 7px 14px; border-radius: var(--radius-full);
background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13);
color: rgba(255,255,255,0.52); cursor: pointer;
transition: background var(--t-base), color var(--t-base); white-space: nowrap;
}
.hero-cta-ghost:hover { background: rgba(255,255,255,0.13); color: rgba(255,255,255,0.82); } .hero-cta-ghost:hover { background: rgba(255,255,255,0.13); color: rgba(255,255,255,0.82); }
.hero-nav-row { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; margin-top: auto; padding-top: var(--sp-2); border-top: 1px solid rgba(255,255,255,0.08); }
/* Nav row — arrows + dots in one line at bottom of details col */ .hero-nav-btn { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.6); cursor: pointer; flex-shrink: 0; transition: background var(--t-base), color var(--t-base); }
.hero-nav-row {
display: flex; align-items: center; gap: var(--sp-2);
flex-shrink: 0; margin-top: auto; padding-top: var(--sp-2);
border-top: 1px solid rgba(255,255,255,0.08);
}
.hero-nav-btn {
display: flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.6); cursor: pointer; flex-shrink: 0;
transition: background var(--t-base), color var(--t-base);
}
.hero-nav-btn:hover { background: rgba(255,255,255,0.2); color: #fff; } .hero-nav-btn:hover { background: rgba(255,255,255,0.2); color: #fff; }
.hero-dots { display: flex; gap: 5px; align-items: center; } .hero-dots { display: flex; gap: 5px; align-items: center; }
.hero-dot { .hero-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.22); border: none; cursor: pointer; padding: 0; transition: background var(--t-base), transform var(--t-base); }
width: 5px; height: 5px; border-radius: 50%;
background: rgba(255,255,255,0.22); border: none; cursor: pointer; padding: 0;
transition: background var(--t-base), transform var(--t-base);
}
.hero-dot:hover { background: rgba(255,255,255,0.5); } .hero-dot:hover { background: rgba(255,255,255,0.5); }
.hero-dot.active { background: #fff; transform: scale(1.35); } .hero-dot.active { background: #fff; transform: scale(1.35); }
.hero-dot.pinned { background: rgba(168,132,232,0.55); } .hero-dot.pinned { background: rgba(168,132,232,0.55); }
.hero-dot.pinned.active { background: #c4a8f0; } .hero-dot.pinned.active { background: #c4a8f0; }
.hero-counter { .hero-counter { font-family: var(--font-ui); font-size: 10px; color: rgba(255,255,255,0.3); letter-spacing: var(--tracking-wide); margin-left: auto; }
font-family: var(--font-ui); font-size: 10px; color: rgba(255,255,255,0.3); .hero-chapters { position: relative; z-index: 2; width: clamp(180px, 32%, 240px); flex-shrink: 0; display: flex; flex-direction: column; padding: var(--sp-4) var(--sp-3); gap: 1px; overflow: hidden; }
letter-spacing: var(--tracking-wide); margin-left: auto; .hero-chapters-header { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.4); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding-bottom: var(--sp-2); margin-bottom: var(--sp-1); border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; }
} .hero-chapters-empty { font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.25); letter-spacing: var(--tracking-wide); padding: var(--sp-3) 0; }
.chapter-row { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 7px var(--sp-2); border-radius: var(--radius-sm); background: none; border: none; text-align: left; cursor: pointer; transition: background var(--t-fast); }
/* ── Chapters panel ───────────────────────────────────────────────────────── */
.hero-chapters {
position: relative; z-index: 2;
width: clamp(180px, 32%, 240px); flex-shrink: 0;
display: flex; flex-direction: column;
padding: var(--sp-4) var(--sp-3);
gap: 1px; overflow: hidden;
}
.hero-chapters-header {
display: flex; align-items: center; gap: var(--sp-2);
font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.4);
letter-spacing: var(--tracking-wider); text-transform: uppercase;
padding-bottom: var(--sp-2); margin-bottom: var(--sp-1);
border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
}
.hero-chapters-empty {
font-family: var(--font-ui); font-size: var(--text-xs); color: rgba(255,255,255,0.25);
letter-spacing: var(--tracking-wide); padding: var(--sp-3) 0;
}
/* Chapter rows */
.chapter-row {
display: flex; align-items: center; gap: var(--sp-2);
width: 100%; padding: 7px var(--sp-2); border-radius: var(--radius-sm);
background: none; border: none; text-align: left; cursor: pointer;
transition: background var(--t-fast);
}
.chapter-row:hover { background: rgba(255,255,255,0.07); } .chapter-row:hover { background: rgba(255,255,255,0.07); }
.chapter-row-current { background: rgba(255,255,255,0.1) !important; } .chapter-row-current { background: rgba(255,255,255,0.1) !important; }
.ch-num { .ch-num { font-family: var(--font-ui); font-size: var(--text-2xs); color: rgba(255,255,255,0.35); letter-spacing: var(--tracking-wide); flex-shrink: 0; min-width: 36px; }
font-family: var(--font-ui); font-size: var(--text-2xs); color: rgba(255,255,255,0.35);
letter-spacing: var(--tracking-wide); flex-shrink: 0; min-width: 36px;
}
.chapter-row-current .ch-num { color: var(--accent-fg); } .chapter-row-current .ch-num { color: var(--accent-fg); }
.ch-info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-width: 0; } .ch-info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-width: 0; }
.ch-name { .ch-name { font-size: var(--text-xs); color: rgba(255,255,255,0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
font-size: var(--text-xs); color: rgba(255,255,255,0.75);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chapter-row-read .ch-name { color: rgba(255,255,255,0.35); } .chapter-row-read .ch-name { color: rgba(255,255,255,0.35); }
.chapter-row-current .ch-name { color: #fff; font-weight: var(--weight-medium); } .chapter-row-current .ch-name { color: #fff; font-weight: var(--weight-medium); }
.ch-meta { .ch-meta { font-family: var(--font-ui); font-size: 9px; color: rgba(255,255,255,0.28); letter-spacing: var(--tracking-wide); }
font-family: var(--font-ui); font-size: 9px; color: rgba(255,255,255,0.28);
letter-spacing: var(--tracking-wide);
}
.ch-read { color: rgba(255,255,255,0.2); } .ch-read { color: rgba(255,255,255,0.2); }
:global(.ch-play-icon) { color: var(--accent-fg); flex-shrink: 0; } :global(.ch-play-icon) { color: var(--accent-fg); flex-shrink: 0; }
/* Skeleton rows */
.chapter-row-sk { display: flex; gap: var(--sp-2); padding: 7px var(--sp-2); align-items: center; } .chapter-row-sk { display: flex; gap: var(--sp-2); padding: 7px var(--sp-2); align-items: center; }
.sk-info { flex: 1; display: flex; flex-direction: column; gap: 4px; } .sk-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sk { background: rgba(255,255,255,0.08); border-radius: var(--radius-sm); animation: pulse 1.4s ease infinite; } .sk { background: rgba(255,255,255,0.08); border-radius: var(--radius-sm); animation: pulse 1.4s ease infinite; }
.sk-num { width: 32px; height: 10px; flex-shrink: 0; } .sk-num { width: 32px; height: 10px; flex-shrink: 0; }
.sk-name { height: 11px; width: 85%; } .sk-name { height: 11px; width: 85%; }
.sk-meta { height: 9px; width: 50%; } .sk-meta { height: 9px; width: 50%; }
.ch-view-all { display: flex; align-items: center; gap: 4px; margin-top: auto; font-family: var(--font-ui); font-size: var(--text-2xs); color: rgba(255,255,255,0.3); letter-spacing: var(--tracking-wide); background: none; border: none; cursor: pointer; padding: var(--sp-2) var(--sp-2) 0; transition: color var(--t-base); }
/* View all link */
.ch-view-all {
display: flex; align-items: center; gap: 4px; margin-top: auto;
font-family: var(--font-ui); font-size: var(--text-2xs);
color: rgba(255,255,255,0.3); letter-spacing: var(--tracking-wide);
background: none; border: none; cursor: pointer; padding: var(--sp-2) var(--sp-2) 0;
transition: color var(--t-base);
}
.ch-view-all:hover { color: var(--accent-fg); } .ch-view-all:hover { color: var(--accent-fg); }
/* ══ SECTIONS ════════════════════════════════════════════════════════════════ */
.section { border-top: 1px solid var(--border-dim); margin-top: var(--sp-4); } .section { border-top: 1px solid var(--border-dim); margin-top: var(--sp-4); }
.section-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-5) var(--sp-2); } .section-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-5) var(--sp-2); }
.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; } .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 { 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); } .see-all:hover { color: var(--accent-fg); }
/* ── Activity ─────────────────────────────────────────────────────────────── */
.activity-list { display: flex; flex-direction: column; padding: 0 var(--sp-3); } .activity-list { display: flex; flex-direction: column; padding: 0 var(--sp-3); }
.activity-row { display: flex; align-items: center; gap: var(--sp-3); padding: 9px var(--sp-2); border-radius: var(--radius-md); border: 1px solid transparent; background: none; text-align: left; cursor: pointer; width: 100%; transition: background var(--t-fast), border-color var(--t-fast); } .activity-row { display: flex; align-items: center; gap: var(--sp-3); padding: 9px var(--sp-2); border-radius: var(--radius-md); border: 1px solid transparent; background: none; text-align: left; cursor: pointer; width: 100%; 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 { background: var(--bg-raised); border-color: var(--border-dim); }
@@ -799,49 +514,26 @@
.activity-sub { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .activity-sub { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.activity-time { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); flex-shrink: 0; } .activity-time { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); flex-shrink: 0; }
.activity-play { color: var(--accent-fg); flex-shrink: 0; opacity: 0; transition: opacity var(--t-base); } .activity-play { color: var(--accent-fg); flex-shrink: 0; opacity: 0; transition: opacity var(--t-base); }
.bottom-row { display: grid; grid-template-columns: 1fr 1px 1fr; padding: 0 var(--sp-5) 0; margin-top: var(--sp-4); border-top: 1px solid var(--border-dim); align-items: start; }
/* ── Bottom row ───────────────────────────────────────────────────────────── */
.bottom-row {
display: grid; grid-template-columns: 1fr 1px 1fr;
padding: 0 var(--sp-5) 0; margin-top: var(--sp-4);
border-top: 1px solid var(--border-dim); align-items: start;
}
.bottom-divider { background: var(--border-dim); align-self: stretch; min-height: 100%; } .bottom-divider { background: var(--border-dim); align-self: stretch; min-height: 100%; }
.bottom-col { display: flex; flex-direction: column; min-width: 0; padding-top: var(--sp-3); } .bottom-col { display: flex; flex-direction: column; min-width: 0; padding-top: var(--sp-3); }
.bottom-col:first-child { padding-right: var(--sp-5); } .bottom-col:first-child { padding-right: var(--sp-5); }
.bottom-col:last-child { padding-left: var(--sp-5); } .bottom-col:last-child { padding-left: var(--sp-5); }
.bottom-section-hd { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--sp-2); } .bottom-section-hd { display: flex; align-items: center; justify-content: space-between; padding-bottom: var(--sp-2); }
.bottom-empty { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); padding: var(--sp-2) 0; } .bottom-empty { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); padding: var(--sp-2) 0; }
/* Completed cards — Discover format */
.mini-row { display: flex; gap: var(--sp-3); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--sp-2); } .mini-row { display: flex; gap: var(--sp-3); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--sp-2); }
.mini-row::-webkit-scrollbar { display: none; } .mini-row::-webkit-scrollbar { display: none; }
.mini-card { flex-shrink: 0; width: 120px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; } .mini-card { flex-shrink: 0; width: 120px; background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.mini-card:hover .mini-cover { filter: brightness(1.08) saturate(1.05); transform: scale(1.02); } .mini-card:hover .mini-cover { filter: brightness(1.08) saturate(1.05); transform: scale(1.02); }
.mini-card:hover { will-change: transform; } .mini-card:hover { will-change: transform; }
.mini-cover-wrap { .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); box-shadow: 0 2px 12px rgba(0,0,0,0.35); }
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 12px rgba(0,0,0,0.35);
}
.mini-cover { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.15s ease, transform 0.15s ease; } .mini-cover { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.15s ease, transform 0.15s ease; }
.mini-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 55%, transparent 75%); pointer-events: none; } .mini-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 55%, transparent 75%); pointer-events: none; }
.mini-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--sp-2); pointer-events: none; } .mini-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--sp-2); pointer-events: none; }
.mini-card-title { .mini-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); }
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);
}
.mini-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; } .mini-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; }
/* Stats grid */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.stat-card { .stat-card { display: flex; align-items: center; gap: var(--sp-2); background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3); }
display: flex; align-items: center; gap: var(--sp-2);
background: var(--bg-raised); border: 1px solid var(--border-dim);
border-radius: var(--radius-md); padding: var(--sp-2) var(--sp-3);
}
.stat-icon-wrap { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); flex-shrink: 0; } .stat-icon-wrap { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); flex-shrink: 0; }
.stat-fire { background: rgba(251,146,60,0.15); color: #fb923c; } .stat-fire { background: rgba(251,146,60,0.15); color: #fb923c; }
.stat-accent { background: var(--accent-muted); color: var(--accent-fg); } .stat-accent { background: var(--accent-muted); color: var(--accent-fg); }
@@ -850,13 +542,10 @@
.stat-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .stat-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.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 { font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); line-height: 1; }
.stat-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); white-space: nowrap; } .stat-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); white-space: nowrap; }
/* ── Empty state / Picker ─────────────────────────────────────────────────── */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-7) var(--sp-6); } .empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-7) 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-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 { 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); } .empty-cta:hover { filter: brightness(1.1); }
.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-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(460px, calc(100vw - 48px)); max-height: 68vh; 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-modal { width: min(460px, calc(100vw - 48px)); max-height: 68vh; 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-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; }
@@ -875,7 +564,6 @@
.picker-info { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-width: 0; } .picker-info { flex: 1; display: flex; flex-direction: column; gap: 2px; 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-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); } .picker-source { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
@keyframes fadeIn { from { opacity: 0 } to { 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) } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
@keyframes pulse { 0%,100% { opacity: 0.4 } 50% { opacity: 0.7 } } @keyframes pulse { 0%,100% { opacity: 0.4 } 50% { opacity: 0.7 } }
src/components/pages/Library.svelte
+107 -283
View File
@@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from "svelte"; import { onMount } from "svelte";
import { MagnifyingGlass, Books, DownloadSimple, Folder, FolderSimplePlus, Trash } from "phosphor-svelte"; import { MagnifyingGlass, Books, DownloadSimple, Folder, FolderSimplePlus, Trash } from "phosphor-svelte";
import { gql, thumbUrl } from "../../lib/client"; import { gql, thumbUrl } from "../../lib/client";
import { GET_LIBRARY, GET_ALL_MANGA, 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";
@@ -13,29 +13,30 @@
const CARD_MIN_W = 130; const CARD_MIN_W = 130;
const CARD_GAP = 16; const CARD_GAP = 16;
let allManga: Manga[] = []; // inLibrary only — used for Saved tab, tags, counts let allManga: Manga[] = $state([]);
let allMangaUnfiltered: Manga[] = []; // every manga Suwayomi knows — used for folder tabs let allMangaUnfiltered: Manga[] = $state([]);
let loading = true; let loading: boolean = $state(true);
let error: string | null = null; let error: string|null = $state(null);
let retryCount = 0; let retryCount: number = $state(0);
let search = ""; let search: string = $state("");
let renderVisible = 0; let renderVisible: number = $state(0);
let scrollEl: HTMLDivElement; let scrollEl: HTMLDivElement;
let containerWidth = 800; let containerWidth: number = $state(800);
let ctx: { x: number; y: number; manga: Manga } | null = null; let ctx: { x: number; y: number; manga: Manga } | null = $state(null);
let emptyCtx: { x: number; y: number } | null = null; let emptyCtx: { x: number; y: number } | null = $state(null);
let prevChapterId: number | null = null; let prevChapterId: number | null = null;
$: {
$effect(() => {
const wasOpen = prevChapterId !== null; const wasOpen = prevChapterId !== null;
prevChapterId = $activeChapter?.id ?? null; prevChapterId = activeChapter?.id ?? null;
if (wasOpen && !$activeChapter) cache.clear(CACHE_KEYS.LIBRARY); if (wasOpen && !activeChapter) cache.clear(CACHE_KEYS.LIBRARY);
} });
function fetchLibrary() { function fetchLibrary() {
return cache.get( return cache.get(
CACHE_KEYS.LIBRARY, CACHE_KEYS.LIBRARY,
() => gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY).then((d) => d.mangas.nodes), () => gql<{ mangas: { nodes: Manga[] } }>(GET_LIBRARY).then(d => d.mangas.nodes),
DEFAULT_TTL_MS, DEFAULT_TTL_MS,
CACHE_GROUPS.LIBRARY, CACHE_GROUPS.LIBRARY,
); );
@@ -43,167 +44,105 @@
function loadData() { function loadData() {
fetchLibrary() fetchLibrary()
.then((nodes) => { .then(nodes => { allManga = dedupeMangaByTitle(dedupeMangaById(nodes), settings.mangaLinks); error = null; })
allManga = dedupeMangaByTitle(dedupeMangaById(nodes), $settings.mangaLinks); .catch(e => error = e.message)
error = null;
})
.catch((e) => error = e.message)
.finally(() => loading = false); .finally(() => loading = false);
cache.get(CACHE_KEYS.ALL_MANGA, () => cache.get(CACHE_KEYS.ALL_MANGA, () =>
gql<{ mangas: { nodes: Manga[] } }>(GET_ALL_MANGA).then((d) => d.mangas.nodes), gql<{ mangas: { nodes: Manga[] } }>(GET_ALL_MANGA).then(d => d.mangas.nodes),
DEFAULT_TTL_MS, DEFAULT_TTL_MS, CACHE_GROUPS.LIBRARY,
CACHE_GROUPS.LIBRARY, ).then(nodes => { allMangaUnfiltered = dedupeMangaById(nodes); }).catch(console.error);
).then((nodes) => {
allMangaUnfiltered = dedupeMangaById(nodes);
}).catch(console.error);
} }
$: { $effect(() => {
retryCount; retryCount;
loading = true; error = null; loading = true; error = null;
if (retryCount > 0) cache.clear(CACHE_KEYS.LIBRARY); if (retryCount > 0) cache.clear(CACHE_KEYS.LIBRARY);
loadData(); loadData();
} });
$: if (scrollEl) scrollEl.scrollTo({ top: 0 }); $effect(() => { if (scrollEl) scrollEl.scrollTo({ top: 0 }); });
$: { $effect(() => {
const f = $settings.folders.find((f) => f.id === $libraryFilter); const f = settings.folders.find(f => f.id === libraryFilter);
if (f && !f.showTab) libraryFilter.set("library"); if (f && !f.showTab) libraryFilter = "library";
} });
const isBuiltin = (f: string) => f === "library" || f === "downloaded"; const isBuiltin = (f: string) => f === "library" || f === "downloaded";
$: filtered = (() => { const folderPool = $derived((() => {
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 ($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;
}
// 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)));
// Reset visible count whenever the filtered set changes (filter/search/tab switch)
$: { filtered; renderVisible = $settings.renderLimit ?? 48; }
$: 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)); const seen = new Set(allManga.map(m => m.id));
return [...allManga, ...allMangaUnfiltered.filter(m => !seen.has(m.id))]; return [...allManga, ...allMangaUnfiltered.filter(m => !seen.has(m.id))];
})(); })());
$: counts = { const filtered = $derived((() => {
const q = search.trim().toLowerCase();
if (libraryFilter === "library") {
return q ? allManga.filter(m => m.title.toLowerCase().includes(q)) : allManga;
}
if (libraryFilter === "downloaded") {
const items = allManga.filter(m => (m.downloadCount ?? 0) > 0);
return q ? items.filter(m => m.title.toLowerCase().includes(q)) : items;
}
const folder = settings.folders.find(f => f.id === libraryFilter);
if (folder) {
const items = folderPool.filter(m => folder.mangaIds.includes(m.id));
return q ? items.filter(m => m.title.toLowerCase().includes(q)) : items;
}
return [];
})());
const cols = $derived(Math.max(1, Math.floor((containerWidth + CARD_GAP) / (CARD_MIN_W + CARD_GAP))));
const visibleManga = $derived(filtered.slice(0, renderVisible));
const hasMore = $derived(filtered.length > renderVisible);
const remainingCount = $derived(filtered.length - renderVisible);
$effect(() => { filtered; renderVisible = settings.renderLimit ?? 48; });
const counts = $derived({
library: allManga.length, library: allManga.length,
downloaded: allManga.filter((m) => (m.downloadCount ?? 0) > 0).length, downloaded: allManga.filter(m => (m.downloadCount ?? 0) > 0).length,
...$settings.folders.reduce((a, f) => ({ ...settings.folders.reduce((a, f) => ({ ...a, [f.id]: folderPool.filter(m => f.mangaIds.includes(m.id)).length }), {} as Record<string, number>),
...a, });
[f.id]: folderPool.filter((m) => f.mangaIds.includes(m.id)).length,
}), {} as Record<string, number>), function loadMore() { renderVisible += settings.renderLimit ?? 48; }
};
async function removeFromLibrary(manga: Manga) { async function removeFromLibrary(manga: Manga) {
await gql(UPDATE_MANGA, { id: manga.id, inLibrary: false }).catch(console.error); await gql(UPDATE_MANGA, { id: manga.id, inLibrary: false }).catch(console.error);
allManga = allManga.filter((m) => m.id !== manga.id); allManga = allManga.filter(m => m.id !== manga.id);
cache.clearGroup(CACHE_GROUPS.LIBRARY); // clears "library" + "all_manga_unfiltered" + notifies subscribers cache.clearGroup(CACHE_GROUPS.LIBRARY);
} }
async function deleteAllDownloads(manga: Manga) { async function deleteAllDownloads(manga: Manga) {
try { try {
const data = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: manga.id }); const data = await gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: manga.id });
const ids = data.chapters.nodes.filter((c) => c.isDownloaded).map((c) => c.id); const ids = data.chapters.nodes.filter(c => c.isDownloaded).map(c => c.id);
if (!ids.length) return; if (!ids.length) return;
await gql(DELETE_DOWNLOADED_CHAPTERS, { ids }); await gql(DELETE_DOWNLOADED_CHAPTERS, { ids });
await Promise.allSettled(ids.map((id) => gql(DEQUEUE_DOWNLOAD, { chapterId: id }))); await Promise.allSettled(ids.map(id => gql(DEQUEUE_DOWNLOAD, { chapterId: id })));
allManga = allManga.map((m) => m.id === manga.id ? { ...m, downloadCount: 0 } : m); allManga = allManga.map(m => m.id === manga.id ? { ...m, downloadCount: 0 } : m);
} catch (e) { console.error(e); } } catch (e) { console.error(e); }
} }
function openCtx(e: MouseEvent, m: Manga) { function openCtx(e: MouseEvent, m: Manga) { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, manga: m }; }
e.preventDefault();
ctx = { x: e.clientX, y: e.clientY, manga: m };
}
function buildCtxItems(m: Manga): MenuEntry[] { function buildCtxItems(m: Manga): MenuEntry[] {
const mangaFolders = getMangaFolders(m.id); const mangaFolders = getMangaFolders(m.id);
const folderEntries: MenuEntry[] = $settings.folders.map((f) => { const folderEntries: MenuEntry[] = settings.folders.map(f => {
const inFolder = mangaFolders.some((mf) => mf.id === f.id); const inFolder = mangaFolders.some(mf => mf.id === f.id);
return { return { label: inFolder ? `Remove from ${f.name}` : `Add to ${f.name}`, icon: Folder, onClick: () => inFolder ? removeMangaFromFolder(f.id, m.id) : assignMangaToFolder(f.id, m.id) };
label: inFolder ? `Remove from ${f.name}` : `Add to ${f.name}`,
icon: Folder,
onClick: () => inFolder ? removeMangaFromFolder(f.id, m.id) : assignMangaToFolder(f.id, m.id),
};
}); });
return [ return [
{ { label: m.inLibrary ? "Remove from library" : "Add to library", icon: Books, onClick: () => m.inLibrary ? removeFromLibrary(m) : gql(UPDATE_MANGA, { id: m.id, inLibrary: true }).then(() => { allManga = allManga.map(x => x.id === m.id ? { ...x, inLibrary: true } : x); cache.clear(CACHE_KEYS.LIBRARY); }).catch(console.error) },
label: m.inLibrary ? "Remove from library" : "Add to library", { label: "Delete all downloads", icon: Trash, danger: true, disabled: !(m.downloadCount && m.downloadCount > 0), onClick: () => deleteAllDownloads(m) },
icon: Books,
onClick: () => m.inLibrary
? removeFromLibrary(m)
: gql(UPDATE_MANGA, { id: m.id, inLibrary: true })
.then(() => { allManga = allManga.map((x) => x.id === m.id ? { ...x, inLibrary: true } : x); cache.clear(CACHE_KEYS.LIBRARY); })
.catch(console.error),
},
{
label: "Delete all downloads",
icon: Trash,
danger: true,
disabled: !(m.downloadCount && m.downloadCount > 0),
onClick: () => deleteAllDownloads(m),
},
...(folderEntries.length ? [{ separator: true } as MenuEntry, ...folderEntries] : []), ...(folderEntries.length ? [{ separator: true } as MenuEntry, ...folderEntries] : []),
{ separator: true }, { separator: true },
{ { label: "New folder", icon: FolderSimplePlus, onClick: () => { const name = prompt("Folder name:"); if (name?.trim()) { const id = addFolder(name.trim()); assignMangaToFolder(id, m.id); } } },
label: "New folder",
icon: FolderSimplePlus,
onClick: () => {
const name = prompt("Folder name:");
if (name?.trim()) { const id = addFolder(name.trim()); assignMangaToFolder(id, m.id); }
},
},
]; ];
} }
function buildEmptyCtx(): MenuEntry[] { function buildEmptyCtx(): MenuEntry[] {
return [{ return [{ label: "New folder", icon: FolderSimplePlus, onClick: () => { const name = prompt("Folder name:"); if (name?.trim()) addFolder(name.trim()); } }];
label: "New folder",
icon: FolderSimplePlus,
onClick: () => { const name = prompt("Folder name:"); if (name?.trim()) addFolder(name.trim()); },
}];
} }
onMount(() => { onMount(() => {
@@ -218,13 +157,13 @@
class="root" class="root"
role="presentation" role="presentation"
bind:this={scrollEl} bind:this={scrollEl}
on:contextmenu={(e) => { oncontextmenu={(e) => {
if ((e.target as HTMLElement).closest("button")) return; if ((e.target as HTMLElement).closest("button")) return;
e.preventDefault(); e.preventDefault();
emptyCtx = { x: e.clientX, y: e.clientY }; emptyCtx = { x: e.clientX, y: e.clientY };
}} }}
> >
{#if $settings.libraryBranches ?? true} {#if settings.libraryBranches ?? true}
<svg class="branches" viewBox="0 0 400 600" preserveAspectRatio="xMaxYMid slice" aria-hidden="true"> <svg class="branches" viewBox="0 0 400 600" preserveAspectRatio="xMaxYMid slice" aria-hidden="true">
<g stroke="var(--accent)" stroke-width="0.6" fill="none" opacity="0.13"> <g stroke="var(--accent)" stroke-width="0.6" fill="none" opacity="0.13">
<path d="M380 600 C380 500 340 460 310 400 C280 340 300 280 270 220"/> <path d="M380 600 C380 500 340 460 310 400 C280 340 300 280 270 220"/>
@@ -249,7 +188,7 @@
<div class="center"> <div class="center">
<p class="error-msg">Could not reach Suwayomi</p> <p class="error-msg">Could not reach Suwayomi</p>
<p class="error-detail">Make sure the server is running, then retry.</p> <p class="error-detail">Make sure the server is running, then retry.</p>
<button class="retry-btn" on:click={() => retryCount++}>Retry</button> <button class="retry-btn" onclick={() => retryCount++}>Retry</button>
</div> </div>
{:else} {:else}
<div class="header"> <div class="header">
@@ -257,15 +196,15 @@
<span class="heading">Library</span> <span class="heading">Library</span>
<div class="tabs"> <div class="tabs">
{#each [["library","Saved"], ["downloaded","Downloaded"]] as [f, label]} {#each [["library","Saved"], ["downloaded","Downloaded"]] as [f, label]}
<button class="tab" class:active={$libraryFilter === f} on:click={() => libraryFilter.set(f)}> <button class="tab" class:active={libraryFilter === f} onclick={() => libraryFilter = f}>
{#if f === "library"}<Books size={11} weight="bold" /> {#if f === "library"}<Books size={11} weight="bold" />
{:else if f === "downloaded"}<DownloadSimple size={11} weight="bold" />{/if} {:else if f === "downloaded"}<DownloadSimple size={11} weight="bold" />{/if}
{label} {label}
<span class="tab-count">{counts[f] ?? 0}</span> <span class="tab-count">{counts[f] ?? 0}</span>
</button> </button>
{/each} {/each}
{#each $settings.folders.filter((f) => f.showTab) as folder} {#each settings.folders.filter(f => f.showTab) as folder}
<button class="tab" class:active={$libraryFilter === folder.id} on:click={() => libraryFilter.set(folder.id)}> <button class="tab" class:active={libraryFilter === folder.id} onclick={() => libraryFilter = folder.id}>
<Folder size={11} weight="bold" /> <Folder size={11} weight="bold" />
{folder.name} {folder.name}
<span class="tab-count">{counts[folder.id] ?? 0}</span> <span class="tab-count">{counts[folder.id] ?? 0}</span>
@@ -290,25 +229,16 @@
</div> </div>
{:else if filtered.length === 0} {:else if filtered.length === 0}
<div class="center"> <div class="center">
{$libraryFilter === "library" ? "No manga saved to library — browse sources to add some." {libraryFilter === "library" ? "No manga saved to library — browse sources to add some."
: $libraryFilter === "downloaded" ? "No downloaded manga." : libraryFilter === "downloaded" ? "No downloaded manga."
: "No manga in this folder yet. Right-click manga anywhere to assign them."} : "No manga in this folder yet. Right-click manga anywhere to assign them."}
</div> </div>
{:else} {:else}
<div class="grid" style="--cols:{cols}"> <div class="grid" style="--cols:{cols}">
{#each visibleManga as m (m.id)} {#each visibleManga as m (m.id)}
<button <button class="card" onclick={() => activeManga = m} oncontextmenu={(e) => openCtx(e, m)}>
class="card"
on:click={() => activeManga.set(m)}
on:contextmenu={(e) => openCtx(e, m)}
>
<div class="cover-wrap"> <div class="cover-wrap">
<img <img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="cover" style="object-fit:{settings.libraryCropCovers ? 'cover' : 'contain'}" loading="lazy" decoding="async" />
src={thumbUrl(m.thumbnailUrl)} alt={m.title}
class="cover"
style="object-fit:{$settings.libraryCropCovers ? 'cover' : 'contain'}"
loading="lazy" decoding="async"
/>
{#if m.downloadCount}<span class="badge-dl">{m.downloadCount}</span>{/if} {#if m.downloadCount}<span class="badge-dl">{m.downloadCount}</span>{/if}
{#if m.unreadCount}<span class="badge-unread">{m.unreadCount}</span>{/if} {#if m.unreadCount}<span class="badge-unread">{m.unreadCount}</span>{/if}
</div> </div>
@@ -318,8 +248,8 @@
</div> </div>
{#if hasMore} {#if hasMore}
<div class="load-more-row"> <div class="load-more-row">
<button class="load-more-btn" on:click={loadMore}> <button class="load-more-btn" onclick={loadMore}>
Show {Math.min(remainingCount, $settings.renderLimit ?? 48)} more Show {Math.min(remainingCount, settings.renderLimit ?? 48)} more
<span class="load-more-count">({remainingCount} remaining)</span> <span class="load-more-count">({remainingCount} remaining)</span>
</button> </button>
</div> </div>
@@ -336,148 +266,42 @@
{/if} {/if}
<style> <style>
.root { .root { position: relative; padding: var(--sp-5) var(--sp-6); overflow-y: auto; height: 100%; animation: fadeIn 0.14s ease both; will-change: scroll-position; -webkit-overflow-scrolling: touch; }
position: relative; .branches { position: absolute; top: 0; right: 0; width: 400px; height: 600px; pointer-events: none; z-index: 0; }
padding: var(--sp-5) var(--sp-6); .branches :global(.anim-branch) { stroke-dasharray: 60; stroke-dashoffset: 60; animation: branchGrow 2.4s ease forwards; }
overflow-y: auto; height: 100%; @keyframes branchGrow { to { stroke-dashoffset: 0; } }
animation: fadeIn 0.14s ease both; .header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); gap: var(--sp-4); flex-wrap: wrap; }
will-change: scroll-position;
-webkit-overflow-scrolling: touch;
}
.branches {
position: absolute; top: 0; right: 0;
width: 400px; height: 600px;
pointer-events: none; z-index: 0;
}
.branches :global(.anim-branch) {
stroke-dasharray: 60;
stroke-dashoffset: 60;
animation: branchGrow 2.4s ease forwards;
}
@keyframes branchGrow {
to { stroke-dashoffset: 0; }
}
.header {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--sp-4); gap: var(--sp-4); flex-wrap: wrap;
}
.header-left { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .header-left { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.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; }
.heading { .tabs { display: flex; gap: 2px; background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 2px; }
font-family: var(--font-ui); font-size: var(--text-xs); .tab { display: flex; align-items: center; gap: 5px; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-sm); color: var(--text-faint); white-space: nowrap; transition: background var(--t-base), color var(--t-base); }
color: var(--text-faint); letter-spacing: var(--tracking-wider);
text-transform: uppercase; flex-shrink: 0;
}
.tabs {
display: flex; gap: 2px;
background: var(--bg-raised); border: 1px solid var(--border-dim);
border-radius: var(--radius-md); padding: 2px;
}
.tab {
display: flex; align-items: center; gap: 5px;
font-family: var(--font-ui); font-size: var(--text-2xs);
letter-spacing: var(--tracking-wide); text-transform: uppercase;
padding: 4px 10px; border-radius: var(--radius-sm);
color: var(--text-faint); white-space: nowrap;
transition: background var(--t-base), color var(--t-base);
}
.tab:hover { color: var(--text-muted); } .tab:hover { color: var(--text-muted); }
.tab.active { background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); } .tab.active { background: var(--accent-muted); color: var(--accent-fg); border: 1px solid var(--accent-dim); }
.tab-count { font-size: var(--text-2xs); opacity: 0.6; } .tab-count { font-size: var(--text-2xs); opacity: 0.6; }
.search-wrap { position: relative; display: flex; align-items: center; } .search-wrap { position: relative; display: flex; align-items: center; }
.search-wrap :global(.search-icon) { position: absolute; left: 10px; color: var(--text-faint); pointer-events: none; } .search-wrap :global(.search-icon) { position: absolute; left: 10px; color: var(--text-faint); pointer-events: none; }
.search { .search { background: var(--bg-raised); border: 1px solid var(--border-dim); border-radius: var(--radius-md); padding: 5px 10px 5px 28px; color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none; transition: border-color var(--t-base); }
background: var(--bg-raised); border: 1px solid var(--border-dim);
border-radius: var(--radius-md); padding: 5px 10px 5px 28px;
color: var(--text-primary); font-size: var(--text-sm); width: 180px; outline: none;
transition: border-color var(--t-base);
}
.search::placeholder { color: var(--text-faint); } .search::placeholder { color: var(--text-faint); }
.search:focus { border-color: var(--border-strong); } .search:focus { border-color: var(--border-strong); }
.grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--cols, auto-fill), minmax(130px, 1fr)); gap: var(--sp-4); }
.grid { .card { background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
position: relative; z-index: 1;
display: grid;
grid-template-columns: repeat(var(--cols, auto-fill), minmax(130px, 1fr));
gap: var(--sp-4);
}
.card {
background: none; border: none; padding: 0;
cursor: pointer; text-align: left;
}
.card:hover .cover { filter: brightness(1.07); } .card:hover .cover { filter: brightness(1.07); }
.card:hover .title { color: var(--text-primary); } .card:hover .title { color: var(--text-primary); }
.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); transform: translateZ(0); }
.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);
transform: translateZ(0);
}
.cover { width: 100%; height: 100%; transition: filter var(--t-base); will-change: filter; } .cover { width: 100%; height: 100%; transition: filter var(--t-base); will-change: filter; }
.badge-dl { position: absolute; bottom: var(--sp-1); right: var(--sp-1); min-width: 18px; height: 18px; padding: 0 3px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background: var(--accent-dim); color: var(--accent-fg); border-radius: var(--radius-sm); border: 1px solid var(--accent-muted); }
.badge-dl { .badge-unread { position: absolute; top: var(--sp-1); left: var(--sp-1); min-width: 18px; height: 18px; padding: 0 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: bold; background: var(--bg-void); color: var(--text-primary); border-radius: var(--radius-sm); border: 1px solid var(--border-strong); }
position: absolute; bottom: var(--sp-1); right: var(--sp-1); .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); }
min-width: 18px; height: 18px; padding: 0 3px;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: bold;
background: var(--accent-dim); color: var(--accent-fg);
border-radius: var(--radius-sm); border: 1px solid var(--accent-muted);
}
.badge-unread {
position: absolute; top: var(--sp-1); left: var(--sp-1);
min-width: 18px; height: 18px; padding: 0 4px;
display: flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: bold;
background: var(--bg-void); color: var(--text-primary);
border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
}
.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);
}
.card-skeleton { padding: 0; } .card-skeleton { padding: 0; }
.cover-skeleton { aspect-ratio: 2/3; border-radius: var(--radius-md); } .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); } .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-row { .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); }
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-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); } .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; height: 60%; color: var(--text-muted); font-size: var(--text-sm); gap: var(--sp-2); text-align: center; line-height: var(--leading-base); }
.center {
position: relative; z-index: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
height: 60%; color: var(--text-muted); font-size: var(--text-sm);
gap: var(--sp-2); text-align: center; line-height: var(--leading-base);
}
.error-msg { color: var(--color-error); font-size: var(--text-base); } .error-msg { color: var(--color-error); font-size: var(--text-base); }
.error-detail { color: var(--text-faint); font-size: var(--text-sm); } .error-detail { color: var(--text-faint); font-size: var(--text-sm); }
.retry-btn { .retry-btn { margin-top: var(--sp-3); 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); }
margin-top: var(--sp-3); padding: 6px 16px; @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
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);
}
</style> </style>
src/components/pages/SeriesDetail.svelte
+184 -257
View File
@@ -1,59 +1,51 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy } from "svelte"; import { onMount } from "svelte";
import { import { ArrowLeft, BookmarkSimple, Download, CheckCircle, Circle, ArrowSquareOut, CircleNotch, Play, SortAscending, SortDescending, CaretDown, ArrowsClockwise, List, SquaresFour, FolderSimplePlus, Trash, DownloadSimple, X } from "phosphor-svelte";
ArrowLeft, BookmarkSimple, Download, CheckCircle, Circle,
ArrowSquareOut, CircleNotch, Play, SortAscending, SortDescending,
CaretDown, ArrowsClockwise, List, SquaresFour, FolderSimplePlus, Trash, DownloadSimple, X,
} from "phosphor-svelte";
import { gql, thumbUrl } from "../../lib/client"; import { gql, thumbUrl } from "../../lib/client";
import { import { GET_MANGA, GET_CHAPTERS, FETCH_CHAPTERS, ENQUEUE_DOWNLOAD, UPDATE_MANGA, MARK_CHAPTER_READ, MARK_CHAPTERS_READ, DELETE_DOWNLOADED_CHAPTERS, ENQUEUE_CHAPTERS_DOWNLOAD } from "../../lib/queries";
GET_MANGA, GET_CHAPTERS, FETCH_CHAPTERS, ENQUEUE_DOWNLOAD,
UPDATE_MANGA, MARK_CHAPTER_READ, MARK_CHAPTERS_READ, DELETE_DOWNLOADED_CHAPTERS,
ENQUEUE_CHAPTERS_DOWNLOAD,
} from "../../lib/queries";
import { cache, CACHE_KEYS, recordSourceAccess } from "../../lib/cache"; import { cache, CACHE_KEYS, recordSourceAccess } from "../../lib/cache";
import { settings, activeManga, activeChapter, genreFilter, navPage, addToast, updateSettings, addFolder, assignMangaToFolder, removeMangaFromFolder, getMangaFolders, openReader, checkAndMarkCompleted } 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 type { Manga, Chapter } from "../../lib/types";
import ContextMenu, { type MenuEntry } from "../shared/ContextMenu.svelte"; import ContextMenu, { type MenuEntry } from "../shared/ContextMenu.svelte";
import MigrateModal from "./MigrateModal.svelte"; import MigrateModal from "./MigrateModal.svelte";
const CHAPTERS_PER_PAGE = 25; const CHAPTERS_PER_PAGE = 25;
const MANGA_TTL_MS = 5 * 60 * 1000; const MANGA_TTL_MS = 5 * 60 * 1000;
const CHAPTER_TTL_MS = 2 * 60 * 1000; const CHAPTER_TTL_MS = 2 * 60 * 1000;
const mangaStore: Map<number, { data: Manga; fetchedAt: number }> = new Map(); const mangaStore: Map<number, { data: Manga; fetchedAt: number }> = new Map();
const chapterStore: Map<number, { data: Chapter[]; fetchedAt: number }> = new Map(); const chapterStore: Map<number, { data: Chapter[]; fetchedAt: number }> = new Map();
let manga: Manga | null = null; let manga: Manga | null = $state(null);
let chapters: Chapter[] = []; let chapters: Chapter[] = $state([]);
let loadingManga = false; let loadingManga: boolean = $state(false);
let loadingChapters = true; let loadingChapters: boolean = $state(true);
let enqueueing: Set<number> = new Set(); let enqueueing: Set<number> = $state(new Set());
let dlOpen = false; let dlOpen: boolean = $state(false);
let detailsOpen = false; let detailsOpen: boolean = $state(false);
let togglingLibrary = false; let togglingLibrary: boolean = $state(false);
let chapterPage = 1; let chapterPage: number = $state(1);
let ctx: { x: number; y: number; chapter: Chapter; idx: number } | null = null; let ctx: { x: number; y: number; chapter: Chapter; idx: number } | null = $state(null);
let jumpOpen = false; let jumpOpen: boolean = $state(false);
let jumpInput = ""; let jumpInput: string = $state("");
let viewMode: "list" | "grid" = "list"; let viewMode: "list" | "grid" = $state("list");
let deletingAll = false; let deletingAll: boolean = $state(false);
let refreshing = false; let refreshing: boolean = $state(false);
let descExpanded = false; let descExpanded: boolean = $state(false);
let genresExpanded = false; let genresExpanded: boolean = $state(false);
let folderPickerOpen = false; let folderPickerOpen: boolean = $state(false);
let folderCreating = false; let folderCreating: boolean = $state(false);
let folderNewName = ""; let folderNewName: string = $state("");
let rangeFrom = ""; let rangeFrom: string = $state("");
let rangeTo = ""; let rangeTo: string = $state("");
let showRange = false; let showRange: boolean = $state(false);
let dlDropRef: HTMLDivElement; let migrateOpen: boolean = $state(false);
let dlDropRef: HTMLDivElement;
let folderPickerRef: HTMLDivElement; let folderPickerRef: HTMLDivElement;
let migrateOpen = false;
let mangaAbort: AbortController | null = null; let mangaAbort: AbortController | null = null;
let chapterAbort: AbortController | null = null; let chapterAbort: AbortController | null = null;
let loadingFor: number | null = null; let loadingFor: number | null = null;
function formatDate(ts: string | null | undefined): string { function formatDate(ts: string | null | undefined): string {
if (!ts) return ""; if (!ts) return "";
@@ -64,125 +56,100 @@
function applyChapters(nodes: Chapter[]) { function applyChapters(nodes: Chapter[]) {
chapters = nodes; chapters = nodes;
// Passive completion check — runs every time the chapter list is loaded if (activeManga && nodes.length > 0) checkAndMarkCompleted(activeManga.id, nodes);
// 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; const sortDir = $derived(settings.chapterSortDir);
$: sortedChapters = sortDir === "desc" ? [...chapters].reverse() : [...chapters]; const sortedChapters = $derived(sortDir === "desc" ? [...chapters].reverse() : [...chapters]);
$: totalPages = Math.ceil(sortedChapters.length / CHAPTERS_PER_PAGE); const totalPages = $derived(Math.ceil(sortedChapters.length / CHAPTERS_PER_PAGE));
$: pageChapters = sortedChapters.slice((chapterPage - 1) * CHAPTERS_PER_PAGE, chapterPage * CHAPTERS_PER_PAGE); const pageChapters = $derived(sortedChapters.slice((chapterPage - 1) * CHAPTERS_PER_PAGE, chapterPage * CHAPTERS_PER_PAGE));
$: readCount = chapters.filter((c) => c.isRead).length; const readCount = $derived(chapters.filter(c => c.isRead).length);
$: totalCount = chapters.length; const totalCount = $derived(chapters.length);
$: progressPct = totalCount > 0 ? (readCount / totalCount) * 100 : 0; const progressPct = $derived(totalCount > 0 ? (readCount / totalCount) * 100 : 0);
$: downloadedCount = chapters.filter((c) => c.isDownloaded).length; const downloadedCount = $derived(chapters.filter(c => c.isDownloaded).length);
$: continueChapter = (() => { const continueChapter = $derived((() => {
if (!chapters.length) return null; if (!chapters.length) return null;
const asc = [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder); const asc = [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder);
const anyRead = asc.some((c) => c.isRead); const anyRead = asc.some(c => c.isRead);
const inProgress = asc.find((c) => !c.isRead && (c.lastPageRead ?? 0) > 0); const inProgress = asc.find(c => !c.isRead && (c.lastPageRead ?? 0) > 0);
if (inProgress) return { chapter: inProgress, type: "continue" as const }; if (inProgress) return { chapter: inProgress, type: "continue" as const };
const firstUnread = asc.find((c) => !c.isRead); const firstUnread = asc.find(c => !c.isRead);
if (firstUnread) return { chapter: firstUnread, type: (anyRead ? "continue" : "start") as const }; if (firstUnread) return { chapter: firstUnread, type: (anyRead ? "continue" : "start") as const };
return { chapter: asc[0], type: "reread" as const }; return { chapter: asc[0], type: "reread" as const };
})(); })());
$: statusLabel = manga?.status const statusLabel = $derived(manga?.status ? manga.status.charAt(0) + manga.status.slice(1).toLowerCase() : null);
? manga.status.charAt(0) + manga.status.slice(1).toLowerCase() const assignedFolders = $derived(activeManga ? getMangaFolders(activeManga.id) : []);
: null; const hasFolders = $derived(assignedFolders.length > 0);
$: assignedFolders = $activeManga ? getMangaFolders($activeManga.id) : [];
$: hasFolders = assignedFolders.length > 0;
function loadManga(id: number) { function loadManga(id: number) {
mangaAbort?.abort(); mangaAbort?.abort();
const ctrl = new AbortController(); const ctrl = new AbortController();
mangaAbort = ctrl; mangaAbort = ctrl;
loadingFor = id; loadingFor = id;
const cached = mangaStore.get(id); const cached = mangaStore.get(id);
const now = Date.now();
if (cached) { if (cached) {
manga = cached.data; manga = cached.data; loadingManga = false;
loadingManga = false; if (Date.now() - cached.fetchedAt < MANGA_TTL_MS) return;
if (now - cached.fetchedAt < MANGA_TTL_MS) return; gql<{ manga: Manga }>(GET_MANGA, { id }, ctrl.signal).then(d => {
gql<{ manga: Manga }>(GET_MANGA, { id }, ctrl.signal)
.then((d) => {
if (ctrl.signal.aborted || loadingFor !== id) return;
mangaStore.set(id, { data: d.manga, fetchedAt: Date.now() });
manga = d.manga;
if (d.manga.source?.id) recordSourceAccess(d.manga.source.id);
}).catch(() => {});
return;
}
loadingManga = true;
gql<{ manga: Manga }>(GET_MANGA, { id }, ctrl.signal)
.then((d) => {
if (ctrl.signal.aborted || loadingFor !== id) return; if (ctrl.signal.aborted || loadingFor !== id) return;
mangaStore.set(id, { data: d.manga, fetchedAt: Date.now() }); mangaStore.set(id, { data: d.manga, fetchedAt: Date.now() });
manga = d.manga; manga = d.manga;
if (d.manga.source?.id) recordSourceAccess(d.manga.source.id); if (d.manga.source?.id) recordSourceAccess(d.manga.source.id);
}).catch(() => {}) }).catch(() => {});
.finally(() => { if (!ctrl.signal.aborted && loadingFor === id) loadingManga = false; }); return;
}
loadingManga = true;
gql<{ manga: Manga }>(GET_MANGA, { id }, ctrl.signal).then(d => {
if (ctrl.signal.aborted || loadingFor !== id) return;
mangaStore.set(id, { data: d.manga, fetchedAt: Date.now() });
manga = d.manga;
if (d.manga.source?.id) recordSourceAccess(d.manga.source.id);
}).catch(() => {}).finally(() => { if (!ctrl.signal.aborted && loadingFor === id) loadingManga = false; });
} }
function loadChapters(id: number) { function loadChapters(id: number) {
chapterAbort?.abort(); chapterAbort?.abort();
const ctrl = new AbortController(); const ctrl = new AbortController();
chapterAbort = ctrl; chapterAbort = ctrl;
const cached = chapterStore.get(id); const cached = chapterStore.get(id);
const now = Date.now();
if (cached) { if (cached) {
applyChapters(cached.data); applyChapters(cached.data); loadingChapters = false;
loadingChapters = false; if (Date.now() - cached.fetchedAt < CHAPTER_TTL_MS) return;
if (now - cached.fetchedAt < CHAPTER_TTL_MS) return;
gql(FETCH_CHAPTERS, { mangaId: id }, ctrl.signal) gql(FETCH_CHAPTERS, { mangaId: id }, ctrl.signal)
.then(() => gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: id }, ctrl.signal)) .then(() => gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: id }, ctrl.signal))
.then((d) => { .then(d => {
if (ctrl.signal.aborted || loadingFor !== id) return; if (ctrl.signal.aborted || loadingFor !== id) return;
chapterStore.set(id, { data: d.chapters.nodes, fetchedAt: Date.now() }); chapterStore.set(id, { data: d.chapters.nodes, fetchedAt: Date.now() });
applyChapters(d.chapters.nodes); applyChapters(d.chapters.nodes);
}).catch(() => {}); }).catch(() => {});
return; return;
} }
chapters = []; loadingChapters = true;
chapters = []; gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: id }, ctrl.signal).then(d => {
loadingChapters = true; if (ctrl.signal.aborted || loadingFor !== id) return;
gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: id }, ctrl.signal) applyChapters(d.chapters.nodes); loadingChapters = false;
.then((d) => { return gql(FETCH_CHAPTERS, { mangaId: id }, ctrl.signal)
if (ctrl.signal.aborted || loadingFor !== id) return; .then(() => gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: id }, ctrl.signal))
applyChapters(d.chapters.nodes); .then(fresh => {
loadingChapters = false; if (ctrl.signal.aborted || loadingFor !== id) return;
return gql(FETCH_CHAPTERS, { mangaId: id }, ctrl.signal) chapterStore.set(id, { data: fresh.chapters.nodes, fetchedAt: Date.now() });
.then(() => gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: id }, ctrl.signal)) applyChapters(fresh.chapters.nodes);
.then((fresh) => { });
if (ctrl.signal.aborted || loadingFor !== id) return; }).catch(() => { if (!ctrl.signal.aborted) loadingChapters = false; });
chapterStore.set(id, { data: fresh.chapters.nodes, fetchedAt: Date.now() });
applyChapters(fresh.chapters.nodes);
});
}).catch(() => { if (!ctrl.signal.aborted) loadingChapters = false; });
} }
$: if ($activeManga) { loadManga($activeManga.id); loadChapters($activeManga.id); } $effect(() => {
if (activeManga) { loadManga(activeManga.id); loadChapters(activeManga.id); }
});
let prevChapterId: number | null = null; let prevChapterId: number | null = null;
$: { $effect(() => {
const wasOpen = prevChapterId !== null; const wasOpen = prevChapterId !== null;
prevChapterId = $activeChapter?.id ?? null; prevChapterId = activeChapter?.id ?? null;
if (wasOpen && !$activeChapter && $activeManga) { if (wasOpen && !activeChapter && activeManga) { loadChapters(activeManga.id); cache.clear(CACHE_KEYS.LIBRARY); }
loadChapters($activeManga.id); });
cache.clear(CACHE_KEYS.LIBRARY);
}
}
async function toggleLibrary() { async function toggleLibrary() {
if (!manga) return; if (!manga) return;
@@ -190,10 +157,7 @@
const next = !manga.inLibrary; const next = !manga.inLibrary;
await gql(UPDATE_MANGA, { id: manga.id, inLibrary: next }).catch(console.error); await gql(UPDATE_MANGA, { id: manga.id, inLibrary: next }).catch(console.error);
manga = { ...manga, inLibrary: next }; manga = { ...manga, inLibrary: next };
if (mangaStore.has(manga.id)) { if (mangaStore.has(manga.id)) { const e = mangaStore.get(manga.id)!; mangaStore.set(manga.id, { ...e, data: manga }); }
const e = mangaStore.get(manga.id)!;
mangaStore.set(manga.id, { ...e, data: manga });
}
cache.clear(CACHE_KEYS.LIBRARY); cache.clear(CACHE_KEYS.LIBRARY);
togglingLibrary = false; togglingLibrary = false;
} }
@@ -210,136 +174,127 @@
await gql(ENQUEUE_DOWNLOAD, { chapterId: ch.id }).catch(console.error); await gql(ENQUEUE_DOWNLOAD, { chapterId: ch.id }).catch(console.error);
addToast({ kind: "download", title: "Download queued", body: ch.name }); addToast({ kind: "download", title: "Download queued", body: ch.name });
enqueueing.delete(ch.id); enqueueing = new Set(enqueueing); enqueueing.delete(ch.id); enqueueing = new Set(enqueueing);
if ($activeManga) reloadChapters($activeManga.id); if (activeManga) reloadChapters(activeManga.id);
} }
async function enqueueMultiple(chapterIds: number[]) { async function enqueueMultiple(chapterIds: number[]) {
if (!chapterIds.length) return; if (!chapterIds.length) return;
await gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds }).catch(console.error); await gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds }).catch(console.error);
addToast({ kind: "download", title: "Download queued", body: `${chapterIds.length} chapter${chapterIds.length !== 1 ? "s" : ""} added` }); addToast({ kind: "download", title: "Download queued", body: `${chapterIds.length} chapter${chapterIds.length !== 1 ? "s" : ""} added` });
if ($activeManga) reloadChapters($activeManga.id); if (activeManga) reloadChapters(activeManga.id);
} }
async function markRead(chapterId: number, isRead: boolean) { async function markRead(chapterId: number, isRead: boolean) {
await gql(MARK_CHAPTER_READ, { id: chapterId, isRead }).catch(console.error); await gql(MARK_CHAPTER_READ, { id: chapterId, isRead }).catch(console.error);
chapters = chapters.map((c) => c.id === chapterId ? { ...c, isRead } : c); chapters = chapters.map(c => c.id === chapterId ? { ...c, isRead } : c);
if ($activeManga) { if (activeManga) { chapterStore.set(activeManga.id, { data: chapters, fetchedAt: Date.now() }); checkAndMarkCompleted(activeManga.id, chapters); }
chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() });
checkAndMarkCompleted($activeManga.id, chapters);
}
} }
async function markBulk(ids: number[], isRead: boolean) { async function markBulk(ids: number[], isRead: boolean) {
if (!ids.length) return; if (!ids.length) return;
await gql(MARK_CHAPTERS_READ, { ids, isRead }).catch(console.error); await gql(MARK_CHAPTERS_READ, { ids, isRead }).catch(console.error);
const idSet = new Set(ids); const idSet = new Set(ids);
chapters = chapters.map((c) => idSet.has(c.id) ? { ...c, isRead } : c); chapters = chapters.map(c => idSet.has(c.id) ? { ...c, isRead } : c);
if ($activeManga) { if (activeManga) { chapterStore.set(activeManga.id, { data: chapters, fetchedAt: Date.now() }); checkAndMarkCompleted(activeManga.id, chapters); }
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); const markAboveRead = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter(c => !c.isRead).map(c => c.id), true);
const markBelowRead = (i: number) => markBulk(sortedChapters.slice(i).filter((c) => !c.isRead).map((c) => c.id), true); const markBelowRead = (i: number) => markBulk(sortedChapters.slice(i).filter(c => !c.isRead).map(c => c.id), true);
const markAboveUnread = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter((c) => c.isRead).map((c) => c.id), false); const markAboveUnread = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter(c => c.isRead).map(c => c.id), false);
const markBelowUnread = (i: number) => markBulk(sortedChapters.slice(i).filter((c) => c.isRead).map((c) => c.id), false); const markBelowUnread = (i: number) => markBulk(sortedChapters.slice(i).filter(c => c.isRead).map(c => c.id), false);
async function deleteDownloaded(chapterId: number) { async function deleteDownloaded(chapterId: number) {
await gql(DELETE_DOWNLOADED_CHAPTERS, { ids: [chapterId] }).catch(console.error); await gql(DELETE_DOWNLOADED_CHAPTERS, { ids: [chapterId] }).catch(console.error);
chapters = chapters.map((c) => c.id === chapterId ? { ...c, isDownloaded: false } : c); chapters = chapters.map(c => c.id === chapterId ? { ...c, isDownloaded: false } : c);
if ($activeManga) chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() }); if (activeManga) chapterStore.set(activeManga.id, { data: chapters, fetchedAt: Date.now() });
} }
async function deleteAllDownloads() { async function deleteAllDownloads() {
const ids = chapters.filter((c) => c.isDownloaded).map((c) => c.id); const ids = chapters.filter(c => c.isDownloaded).map(c => c.id);
if (!ids.length) return; if (!ids.length) return;
deletingAll = true; deletingAll = true;
await gql(DELETE_DOWNLOADED_CHAPTERS, { ids }).catch(console.error); await gql(DELETE_DOWNLOADED_CHAPTERS, { ids }).catch(console.error);
chapters = chapters.map((c) => ({ ...c, isDownloaded: false })); chapters = chapters.map(c => ({ ...c, isDownloaded: false }));
if ($activeManga) chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() }); if (activeManga) chapterStore.set(activeManga.id, { data: chapters, fetchedAt: Date.now() });
deletingAll = false; deletingAll = false;
} }
async function refreshChapters() { async function refreshChapters() {
if (!$activeManga || refreshing) return; if (!activeManga || refreshing) return;
refreshing = true; refreshing = true;
chapterStore.delete($activeManga.id); chapterStore.delete(activeManga.id);
gql(FETCH_CHAPTERS, { mangaId: $activeManga.id }) gql(FETCH_CHAPTERS, { mangaId: activeManga.id })
.then(() => reloadChapters($activeManga!.id)) .then(() => reloadChapters(activeManga!.id))
.then(() => addToast({ kind: "success", title: "Chapters refreshed" })) .then(() => addToast({ kind: "success", title: "Chapters refreshed" }))
.catch((e) => addToast({ kind: "error", title: "Refresh failed", body: e?.message })) .catch(e => addToast({ kind: "error", title: "Refresh failed", body: e?.message }))
.finally(() => refreshing = false); .finally(() => refreshing = false);
} }
function buildCtxItems(ch: Chapter, idx: number): MenuEntry[] { function buildCtxItems(ch: Chapter, idx: number): MenuEntry[] {
const above = sortedChapters.slice(0, idx + 1); const above = sortedChapters.slice(0, idx + 1), below = sortedChapters.slice(idx), last = sortedChapters.length - 1;
const below = sortedChapters.slice(idx);
const last = sortedChapters.length - 1;
return [ return [
{ label: ch.isRead ? "Mark as unread" : "Mark as read", icon: ch.isRead ? Circle : CheckCircle, onClick: () => markRead(ch.id, !ch.isRead) }, { label: ch.isRead ? "Mark as unread" : "Mark as read", icon: ch.isRead ? Circle : CheckCircle, onClick: () => markRead(ch.id, !ch.isRead) },
{ separator: true }, { separator: true },
{ label: "Mark above as read", icon: CheckCircle, onClick: () => markAboveRead(idx), disabled: idx === 0 || above.filter((c) => !c.isRead).length === 0 }, { label: "Mark above as read", icon: CheckCircle, onClick: () => markAboveRead(idx), disabled: idx === 0 || above.filter(c => !c.isRead).length === 0 },
{ label: "Mark above as unread", icon: Circle, onClick: () => markAboveUnread(idx), disabled: idx === 0 || above.filter((c) => c.isRead).length === 0 }, { label: "Mark above as unread", icon: Circle, onClick: () => markAboveUnread(idx), disabled: idx === 0 || above.filter(c => c.isRead).length === 0 },
{ separator: true }, { separator: true },
{ label: "Mark below as read", icon: CheckCircle, onClick: () => markBelowRead(idx), disabled: idx === last || below.filter((c) => !c.isRead).length === 0 }, { label: "Mark below as read", icon: CheckCircle, onClick: () => markBelowRead(idx), disabled: idx === last || below.filter(c => !c.isRead).length === 0 },
{ label: "Mark below as unread", icon: Circle, onClick: () => markBelowUnread(idx), disabled: idx === last || below.filter((c) => c.isRead).length === 0 }, { label: "Mark below as unread", icon: Circle, onClick: () => markBelowUnread(idx), disabled: idx === last || below.filter(c => c.isRead).length === 0 },
{ separator: true }, { separator: true },
{ label: ch.isDownloaded ? "Delete download" : "Download", icon: ch.isDownloaded ? Trash : Download, danger: ch.isDownloaded, onClick: () => ch.isDownloaded ? deleteDownloaded(ch.id) : gql(ENQUEUE_DOWNLOAD, { chapterId: ch.id }).catch(console.error) }, { label: ch.isDownloaded ? "Delete download" : "Download", icon: ch.isDownloaded ? Trash : Download, danger: ch.isDownloaded, onClick: () => ch.isDownloaded ? deleteDownloaded(ch.id) : gql(ENQUEUE_DOWNLOAD, { chapterId: ch.id }).catch(console.error) },
{ separator: true }, { separator: true },
{ label: "Download next 5 from here", icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx, idx + 5).filter((c) => !c.isDownloaded).map((c) => c.id)) }, { label: "Download next 5 from here", icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx, idx + 5).filter(c => !c.isDownloaded).map(c => c.id)) },
{ label: "Download all from here", icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx).filter((c) => !c.isDownloaded).map((c) => c.id)) }, { label: "Download all from here", icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx).filter(c => !c.isDownloaded).map(c => c.id)) },
]; ];
} }
function handleDlOutside(e: MouseEvent) { function handleDlOutside(e: MouseEvent) { if (dlDropRef && !dlDropRef.contains(e.target as Node)) dlOpen = false; }
if (dlDropRef && !dlDropRef.contains(e.target as Node)) dlOpen = false; function handleFolderOutside(e: MouseEvent) { if (folderPickerRef && !folderPickerRef.contains(e.target as Node)) { folderPickerOpen = false; folderCreating = false; folderNewName = ""; } }
}
function handleFolderOutside(e: MouseEvent) {
if (folderPickerRef && !folderPickerRef.contains(e.target as Node)) { folderPickerOpen = false; folderCreating = false; folderNewName = ""; }
}
$: if (dlOpen) { setTimeout(() => document.addEventListener("mousedown", handleDlOutside, true), 0); } $effect(() => {
else { document.removeEventListener("mousedown", handleDlOutside, true); } if (dlOpen) { setTimeout(() => document.addEventListener("mousedown", handleDlOutside, true), 0); }
$: if (folderPickerOpen){ setTimeout(() => document.addEventListener("mousedown", handleFolderOutside, true), 0); } else document.removeEventListener("mousedown", handleDlOutside, true);
else { document.removeEventListener("mousedown", handleFolderOutside, true); } });
$effect(() => {
if (folderPickerOpen) { setTimeout(() => document.addEventListener("mousedown", handleFolderOutside, true), 0); }
else document.removeEventListener("mousedown", handleFolderOutside, true);
});
function enqueueNext(n: number) { function enqueueNext(n: number) {
if (!continueChapter) return; if (!continueChapter) return;
const idx = sortedChapters.indexOf(continueChapter.chapter); const idx = sortedChapters.indexOf(continueChapter.chapter);
if (idx < 0) return; if (idx < 0) return;
enqueueMultiple(sortedChapters.slice(idx, idx + n).filter((c) => !c.isDownloaded).map((c) => c.id)); enqueueMultiple(sortedChapters.slice(idx, idx + n).filter(c => !c.isDownloaded).map(c => c.id));
} }
function enqueueRange() { function enqueueRange() {
const from = parseFloat(rangeFrom), to = parseFloat(rangeTo); const from = parseFloat(rangeFrom), to = parseFloat(rangeTo);
if (isNaN(from) || isNaN(to)) return; if (isNaN(from) || isNaN(to)) return;
const lo = Math.min(from, to), hi = Math.max(from, to); const lo = Math.min(from, to), hi = Math.max(from, to);
enqueueMultiple(sortedChapters.filter((c) => c.chapterNumber >= lo && c.chapterNumber <= hi && !c.isDownloaded).map((c) => c.id)); enqueueMultiple(sortedChapters.filter(c => c.chapterNumber >= lo && c.chapterNumber <= hi && !c.isDownloaded).map(c => c.id));
} }
function createFolder() { function createFolder() {
const name = folderNewName.trim(); const name = folderNewName.trim();
if (!name || !$activeManga) return; if (!name || !activeManga) return;
const id = addFolder(name); const id = addFolder(name);
assignMangaToFolder(id, $activeManga.id); assignMangaToFolder(id, activeManga.id);
folderNewName = ""; folderCreating = false; folderNewName = ""; folderCreating = false;
} }
onDestroy(() => { mangaAbort?.abort(); chapterAbort?.abort(); }); onMount(() => () => { mangaAbort?.abort(); chapterAbort?.abort(); });
</script> </script>
{#if $activeManga} {#if activeManga}
<div class="root" role="presentation" on:contextmenu|preventDefault> <div class="root" role="presentation" oncontextmenu={(e) => e.preventDefault()}>
<div class="sidebar"> <div class="sidebar">
<button class="back" on:click={() => activeManga.set(null)}> <button class="back" onclick={() => activeManga = null}>
<ArrowLeft size={13} weight="light" /> Back <ArrowLeft size={13} weight="light" /> Back
</button> </button>
<div class="cover-wrap"> <div class="cover-wrap">
<img src={thumbUrl($activeManga.thumbnailUrl)} alt={$activeManga.title} class="cover" /> <img src={thumbUrl(activeManga.thumbnailUrl)} alt={activeManga.title} class="cover" />
</div> </div>
{#if loadingManga} {#if loadingManga}
@@ -359,10 +314,10 @@
{#if manga?.genre?.length} {#if manga?.genre?.length}
<div class="genres"> <div class="genres">
{#each (genresExpanded ? manga.genre : manga.genre.slice(0, 5)) as g} {#each (genresExpanded ? manga.genre : manga.genre.slice(0, 5)) as g}
<button class="genre" on:click={() => { genreFilter.set(g); navPage.set("explore"); activeManga.set(null); }}>{g}</button> <button class="genre" onclick={() => { genreFilter = g; navPage = "explore"; activeManga = null; }}>{g}</button>
{/each} {/each}
{#if manga.genre.length > 5} {#if manga.genre.length > 5}
<button class="genre-toggle" on:click={() => genresExpanded = !genresExpanded}> <button class="genre-toggle" onclick={() => genresExpanded = !genresExpanded}>
{genresExpanded ? "less" : `+${manga.genre.length - 5}`} {genresExpanded ? "less" : `+${manga.genre.length - 5}`}
</button> </button>
{/if} {/if}
@@ -372,7 +327,7 @@
<div class="desc-wrap"> <div class="desc-wrap">
<p class="desc" class:expanded={descExpanded}>{manga.description}</p> <p class="desc" class:expanded={descExpanded}>{manga.description}</p>
{#if manga.description.length > 120} {#if manga.description.length > 120}
<button class="desc-toggle" on:click={() => descExpanded = !descExpanded}>{descExpanded ? "Less" : "More"}</button> <button class="desc-toggle" onclick={() => descExpanded = !descExpanded}>{descExpanded ? "Less" : "More"}</button>
{/if} {/if}
</div> </div>
{/if} {/if}
@@ -390,7 +345,7 @@
{/if} {/if}
<div class="actions"> <div class="actions">
<button class="library-btn" class:active={manga?.inLibrary} on:click={toggleLibrary} disabled={togglingLibrary || loadingManga}> <button class="library-btn" class:active={manga?.inLibrary} onclick={toggleLibrary} disabled={togglingLibrary || loadingManga}>
<BookmarkSimple size={13} weight={manga?.inLibrary ? "fill" : "light"} /> <BookmarkSimple size={13} weight={manga?.inLibrary ? "fill" : "light"} />
{manga?.inLibrary ? "In Library" : "Add to Library"} {manga?.inLibrary ? "In Library" : "Add to Library"}
</button> </button>
@@ -402,7 +357,7 @@
</div> </div>
{#if continueChapter} {#if continueChapter}
<button class="read-btn" on:click={() => openReader(continueChapter!.chapter, sortedChapters)}> <button class="read-btn" onclick={() => openReader(continueChapter!.chapter, sortedChapters)}>
<Play size={12} weight="fill" /> <Play size={12} weight="fill" />
{continueChapter.type === "continue" {continueChapter.type === "continue"
? `Continue · Ch.${continueChapter.chapter.chapterNumber}${(continueChapter.chapter.lastPageRead ?? 0) > 0 ? ` p.${continueChapter.chapter.lastPageRead}` : ""}` ? `Continue · Ch.${continueChapter.chapter.chapterNumber}${(continueChapter.chapter.lastPageRead ?? 0) > 0 ? ` p.${continueChapter.chapter.lastPageRead}` : ""}`
@@ -414,7 +369,7 @@
{#if !loadingManga && manga?.source} {#if !loadingManga && manga?.source}
<div class="details-section"> <div class="details-section">
<button class="details-toggle" on:click={() => detailsOpen = !detailsOpen}> <button class="details-toggle" onclick={() => detailsOpen = !detailsOpen}>
<span>Details</span> <span>Details</span>
<CaretDown size={11} weight="light" style="transform:{detailsOpen ? 'rotate(180deg)' : 'rotate(0)'};transition:transform 0.15s ease" /> <CaretDown size={11} weight="light" style="transform:{detailsOpen ? 'rotate(180deg)' : 'rotate(0)'};transition:transform 0.15s ease" />
</button> </button>
@@ -424,11 +379,11 @@
{#if manga.status}<div class="detail-row"><span class="detail-key">Status</span><span class="detail-val">{statusLabel}</span></div>{/if} {#if manga.status}<div class="detail-row"><span class="detail-key">Status</span><span class="detail-val">{statusLabel}</span></div>{/if}
{#if manga.author}<div class="detail-row"><span class="detail-key">Author</span><span class="detail-val">{manga.author}</span></div>{/if} {#if manga.author}<div class="detail-row"><span class="detail-key">Author</span><span class="detail-val">{manga.author}</span></div>{/if}
{#if manga.artist && manga.artist !== manga.author}<div class="detail-row"><span class="detail-key">Artist</span><span class="detail-val">{manga.artist}</span></div>{/if} {#if manga.artist && manga.artist !== manga.author}<div class="detail-row"><span class="detail-key">Artist</span><span class="detail-val">{manga.artist}</span></div>{/if}
<button class="migrate-btn" on:click={() => migrateOpen = true}> <button class="migrate-btn" onclick={() => migrateOpen = true}>
<ArrowsClockwise size={12} weight="light" /> Switch source <ArrowsClockwise size={12} weight="light" /> Switch source
</button> </button>
{#if downloadedCount > 0} {#if downloadedCount > 0}
<button class="delete-all-btn" on:click={deleteAllDownloads} disabled={deletingAll}> <button class="delete-all-btn" onclick={deleteAllDownloads} disabled={deletingAll}>
<Trash size={12} weight="light" /> {deletingAll ? "Deleting…" : `Delete downloads (${downloadedCount})`} <Trash size={12} weight="light" /> {deletingAll ? "Deleting…" : `Delete downloads (${downloadedCount})`}
</button> </button>
{/if} {/if}
@@ -438,37 +393,35 @@
{/if} {/if}
</div> </div>
<div class="list-wrap"> <div class="list-wrap">
<div class="list-header"> <div class="list-header">
<div class="list-header-left"> <div class="list-header-left">
<button class="sort-btn" on:click={() => { updateSettings({ chapterSortDir: sortDir === "desc" ? "asc" : "desc" }); chapterPage = 1; }}> <button class="sort-btn" onclick={() => { updateSettings({ chapterSortDir: sortDir === "desc" ? "asc" : "desc" }); chapterPage = 1; }}>
{#if sortDir === "desc"}<SortDescending size={14} weight="light" />{:else}<SortAscending size={14} weight="light" />{/if} {#if sortDir === "desc"}<SortDescending size={14} weight="light" />{:else}<SortAscending size={14} weight="light" />{/if}
{sortDir === "desc" ? "Newest first" : "Oldest first"} {sortDir === "desc" ? "Newest first" : "Oldest first"}
</button> </button>
<button class="icon-btn" class:active={viewMode === "grid"} on:click={() => viewMode = viewMode === "list" ? "grid" : "list"}> <button class="icon-btn" class:active={viewMode === "grid"} onclick={() => viewMode = viewMode === "list" ? "grid" : "list"}>
{#if viewMode === "list"}<SquaresFour size={14} weight="light" />{:else}<List size={14} weight="light" />{/if} {#if viewMode === "list"}<SquaresFour size={14} weight="light" />{:else}<List size={14} weight="light" />{/if}
</button> </button>
</div> </div>
<div class="list-header-right"> <div class="list-header-right">
<button class="icon-btn" on:click={refreshChapters} disabled={refreshing}> <button class="icon-btn" onclick={refreshChapters} disabled={refreshing}>
<ArrowsClockwise size={14} weight="light" class={refreshing ? "anim-spin" : ""} /> <ArrowsClockwise size={14} weight="light" class={refreshing ? "anim-spin" : ""} />
</button> </button>
<div class="fp-wrap" bind:this={folderPickerRef}> <div class="fp-wrap" bind:this={folderPickerRef}>
<button class="icon-btn" class:active={hasFolders} on:click={() => folderPickerOpen = !folderPickerOpen}> <button class="icon-btn" class:active={hasFolders} onclick={() => folderPickerOpen = !folderPickerOpen}>
<FolderSimplePlus size={14} weight={hasFolders ? "fill" : "light"} /> <FolderSimplePlus size={14} weight={hasFolders ? "fill" : "light"} />
</button> </button>
{#if folderPickerOpen} {#if folderPickerOpen}
<div class="fp-menu"> <div class="fp-menu">
{#if $settings.folders.length === 0 && !folderCreating} {#if settings.folders.length === 0 && !folderCreating}
<p class="fp-empty">No folders yet</p> <p class="fp-empty">No folders yet</p>
{/if} {/if}
{#each $settings.folders as folder} {#each settings.folders as folder}
{@const isIn = $activeManga ? folder.mangaIds.includes($activeManga.id) : false} {@const isIn = activeManga ? folder.mangaIds.includes(activeManga.id) : false}
<button class="fp-item" class:fp-item-active={isIn} <button class="fp-item" class:fp-item-active={isIn}
on:click={() => $activeManga && (isIn ? removeMangaFromFolder(folder.id, $activeManga.id) : assignMangaToFolder(folder.id, $activeManga.id))}> onclick={() => activeManga && (isIn ? removeMangaFromFolder(folder.id, activeManga.id) : assignMangaToFolder(folder.id, activeManga.id))}>
<span class="fp-check">{isIn ? "✓" : ""}</span>{folder.name} <span class="fp-check">{isIn ? "✓" : ""}</span>{folder.name}
</button> </button>
{/each} {/each}
@@ -476,35 +429,34 @@
{#if folderCreating} {#if folderCreating}
<div class="fp-create"> <div class="fp-create">
<input class="fp-input" placeholder="Folder name…" bind:value={folderNewName} <input class="fp-input" placeholder="Folder name…" bind:value={folderNewName}
on:keydown={(e) => { if (e.key === "Enter") createFolder(); if (e.key === "Escape") { folderCreating = false; folderNewName = ""; } }} onkeydown={(e) => { if (e.key === "Enter") createFolder(); if (e.key === "Escape") { folderCreating = false; folderNewName = ""; } }}
use:focus /> use:focus />
<button class="fp-confirm" on:click={createFolder} disabled={!folderNewName.trim()}>Add</button> <button class="fp-confirm" onclick={createFolder} disabled={!folderNewName.trim()}>Add</button>
<button class="fp-cancel" on:click={() => { folderCreating = false; folderNewName = ""; }}> <button class="fp-cancel" onclick={() => { folderCreating = false; folderNewName = ""; }}>
<X size={12} weight="light" /> <X size={12} weight="light" />
</button> </button>
</div> </div>
{:else} {:else}
<button class="fp-new" on:click={() => folderCreating = true}>+ New folder</button> <button class="fp-new" onclick={() => folderCreating = true}>+ New folder</button>
{/if} {/if}
</div> </div>
{/if} {/if}
</div> </div>
{#if chapters.length > 1} {#if chapters.length > 1}
<div class="jump-wrap"> <div class="jump-wrap">
{#if !jumpOpen} {#if !jumpOpen}
<button class="jump-toggle" on:click={() => { jumpOpen = true; jumpInput = ""; }}>Go to…</button> <button class="jump-toggle" onclick={() => { jumpOpen = true; jumpInput = ""; }}>Go to…</button>
{:else} {:else}
<div class="jump-row"> <div class="jump-row">
<input class="jump-input" type="text" placeholder="Ch. #" bind:value={jumpInput} <input class="jump-input" type="text" placeholder="Ch. #" bind:value={jumpInput}
use:focus use:focus
on:keydown={(e) => { onkeydown={(e) => {
if (e.key === "Escape") { jumpOpen = false; return; } if (e.key === "Escape") { jumpOpen = false; return; }
if (e.key === "Enter") { if (e.key === "Enter") {
const num = parseFloat(jumpInput); const num = parseFloat(jumpInput);
if (!isNaN(num)) { if (!isNaN(num)) {
const target = sortedChapters.find((c) => c.chapterNumber === num) const target = sortedChapters.find(c => c.chapterNumber === num)
?? sortedChapters.reduce((best, c) => Math.abs(c.chapterNumber - num) < Math.abs(best.chapterNumber - num) ? c : best, sortedChapters[0]); ?? sortedChapters.reduce((best, c) => Math.abs(c.chapterNumber - num) < Math.abs(best.chapterNumber - num) ? c : best, sortedChapters[0]);
if (target) openReader(target, sortedChapters); if (target) openReader(target, sortedChapters);
} }
@@ -512,16 +464,15 @@
} }
}} }}
/> />
<button class="jump-cancel" on:click={() => jumpOpen = false}>✕</button> <button class="jump-cancel" onclick={() => jumpOpen = false}>✕</button>
</div> </div>
{/if} {/if}
</div> </div>
{/if} {/if}
{#if chapters.length > 0} {#if chapters.length > 0}
<div class="dl-wrap" bind:this={dlDropRef}> <div class="dl-wrap" bind:this={dlDropRef}>
<button class="icon-btn" on:click={() => dlOpen = !dlOpen}> <button class="icon-btn" onclick={() => dlOpen = !dlOpen}>
<Download size={13} weight="light" /> <Download size={13} weight="light" />
</button> </button>
{#if dlOpen} {#if dlOpen}
@@ -532,8 +483,8 @@
<p class="dl-section-label">From Ch.{continueChapter.chapter.chapterNumber}</p> <p class="dl-section-label">From Ch.{continueChapter.chapter.chapterNumber}</p>
<div class="dl-next-row"> <div class="dl-next-row">
{#each [5, 10, 25] as n} {#each [5, 10, 25] as n}
{@const avail = sortedChapters.slice(contIdx, contIdx + n).filter((c) => !c.isDownloaded).length} {@const avail = sortedChapters.slice(contIdx, contIdx + n).filter(c => !c.isDownloaded).length}
<button class="dl-next-btn" disabled={avail === 0} on:click={() => { enqueueNext(n); dlOpen = false; }}> <button class="dl-next-btn" disabled={avail === 0} onclick={() => { enqueueNext(n); dlOpen = false; }}>
<span>Next {n}</span><span class="dl-next-sub">{avail} new</span> <span>Next {n}</span><span class="dl-next-sub">{avail} new</span>
</button> </button>
{/each} {/each}
@@ -542,28 +493,28 @@
{/if} {/if}
{/if} {/if}
{#if !showRange} {#if !showRange}
<button class="dl-item" on:click={() => showRange = true}> <button class="dl-item" onclick={() => showRange = true}>
<span>Custom range…</span><span class="dl-item-sub">Enter chapter numbers</span> <span>Custom range…</span><span class="dl-item-sub">Enter chapter numbers</span>
</button> </button>
{:else} {:else}
<div class="dl-range-row"> <div class="dl-range-row">
<button class="dl-range-back" on:click={() => showRange = false}>‹</button> <button class="dl-range-back" onclick={() => showRange = false}>‹</button>
<input class="dl-range-input" placeholder="From" bind:value={rangeFrom} on:keydown={(e) => e.key === "Enter" && enqueueRange()} use:focus /> <input class="dl-range-input" placeholder="From" bind:value={rangeFrom} onkeydown={(e) => e.key === "Enter" && enqueueRange()} use:focus />
<span class="dl-range-sep">–</span> <span class="dl-range-sep">–</span>
<input class="dl-range-input" placeholder="To" bind:value={rangeTo} on:keydown={(e) => e.key === "Enter" && enqueueRange()} /> <input class="dl-range-input" placeholder="To" bind:value={rangeTo} onkeydown={(e) => e.key === "Enter" && enqueueRange()} />
<button class="dl-range-go" disabled={!rangeFrom.trim() || !rangeTo.trim()} on:click={enqueueRange}>Go</button> <button class="dl-range-go" disabled={!rangeFrom.trim() || !rangeTo.trim()} onclick={enqueueRange}>Go</button>
</div> </div>
{/if} {/if}
<div class="dl-divider"></div> <div class="dl-divider"></div>
<button class="dl-item" on:click={() => { enqueueMultiple(sortedChapters.filter((c) => !c.isRead && !c.isDownloaded).map((c) => c.id)); dlOpen = false; }}> <button class="dl-item" onclick={() => { enqueueMultiple(sortedChapters.filter(c => !c.isRead && !c.isDownloaded).map(c => c.id)); dlOpen = false; }}>
<span>Unread chapters</span><span class="dl-item-sub">{sortedChapters.filter((c) => !c.isRead && !c.isDownloaded).length} remaining</span> <span>Unread chapters</span><span class="dl-item-sub">{sortedChapters.filter(c => !c.isRead && !c.isDownloaded).length} remaining</span>
</button> </button>
<button class="dl-item" on:click={() => { enqueueMultiple(sortedChapters.filter((c) => !c.isDownloaded).map((c) => c.id)); dlOpen = false; }}> <button class="dl-item" onclick={() => { enqueueMultiple(sortedChapters.filter(c => !c.isDownloaded).map(c => c.id)); dlOpen = false; }}>
<span>Download all</span><span class="dl-item-sub">{sortedChapters.filter((c) => !c.isDownloaded).length} not downloaded</span> <span>Download all</span><span class="dl-item-sub">{sortedChapters.filter(c => !c.isDownloaded).length} not downloaded</span>
</button> </button>
{#if downloadedCount > 0} {#if downloadedCount > 0}
<div class="dl-divider"></div> <div class="dl-divider"></div>
<button class="dl-item dl-item-danger" on:click={() => { deleteAllDownloads(); dlOpen = false; }} disabled={deletingAll}> <button class="dl-item dl-item-danger" onclick={() => { deleteAllDownloads(); dlOpen = false; }} disabled={deletingAll}>
<span>{deletingAll ? "Deleting…" : "Delete all downloads"}</span> <span>{deletingAll ? "Deleting…" : "Delete all downloads"}</span>
<span class="dl-item-sub">{downloadedCount} downloaded</span> <span class="dl-item-sub">{downloadedCount} downloaded</span>
</button> </button>
@@ -575,9 +526,9 @@
{#if totalPages > 1} {#if totalPages > 1}
<div class="pagination"> <div class="pagination">
<button class="page-btn" on:click={() => chapterPage = Math.max(1, chapterPage - 1)} disabled={chapterPage === 1}>←</button> <button class="page-btn" onclick={() => chapterPage = Math.max(1, chapterPage - 1)} disabled={chapterPage === 1}>←</button>
<span class="page-num">{chapterPage} / {totalPages}</span> <span class="page-num">{chapterPage} / {totalPages}</span>
<button class="page-btn" on:click={() => chapterPage = Math.min(totalPages, chapterPage + 1)} disabled={chapterPage === totalPages}>→</button> <button class="page-btn" onclick={() => chapterPage = Math.min(totalPages, chapterPage + 1)} disabled={chapterPage === totalPages}>→</button>
</div> </div>
{/if} {/if}
</div> </div>
@@ -594,8 +545,8 @@
{#each sortedChapters as ch, i} {#each sortedChapters as ch, i}
{@const inProgress = !ch.isRead && (ch.lastPageRead ?? 0) > 0} {@const inProgress = !ch.isRead && (ch.lastPageRead ?? 0) > 0}
<button class="grid-cell" class:read={ch.isRead} class:in-progress={inProgress} class:bookmarked={ch.isBookmarked} <button class="grid-cell" class:read={ch.isRead} class:in-progress={inProgress} class:bookmarked={ch.isBookmarked}
on:click={() => openReader(ch, sortedChapters)} onclick={() => openReader(ch, sortedChapters)}
on:contextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: i }; }} oncontextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: i }; }}
title={ch.name}> title={ch.name}>
<span class="grid-cell-num">{ch.chapterNumber % 1 === 0 ? ch.chapterNumber.toFixed(0) : ch.chapterNumber}</span> <span class="grid-cell-num">{ch.chapterNumber % 1 === 0 ? ch.chapterNumber.toFixed(0) : ch.chapterNumber}</span>
{#if ch.isRead}<span class="grid-cell-dot"></span>{/if} {#if ch.isRead}<span class="grid-cell-dot"></span>{/if}
@@ -606,9 +557,9 @@
{#each pageChapters as ch} {#each pageChapters as ch}
{@const idxInSorted = sortedChapters.indexOf(ch)} {@const idxInSorted = sortedChapters.indexOf(ch)}
<div role="button" tabindex="0" class="ch-row" class:read={ch.isRead} <div role="button" tabindex="0" class="ch-row" class:read={ch.isRead}
on:click={() => openReader(ch, sortedChapters)} onclick={() => openReader(ch, sortedChapters)}
on:keydown={(e) => e.key === "Enter" && openReader(ch, sortedChapters)} onkeydown={(e) => e.key === "Enter" && openReader(ch, sortedChapters)}
on:contextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: idxInSorted }; }}> oncontextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: idxInSorted }; }}>
<div class="ch-left"> <div class="ch-left">
<span class="ch-name">{ch.name}</span> <span class="ch-name">{ch.name}</span>
<div class="ch-meta"> <div class="ch-meta">
@@ -620,11 +571,11 @@
<div class="ch-right"> <div class="ch-right">
{#if ch.isRead}<CheckCircle size={14} weight="light" class="read-icon" />{/if} {#if ch.isRead}<CheckCircle size={14} weight="light" class="read-icon" />{/if}
{#if ch.isDownloaded} {#if ch.isDownloaded}
<button class="dl-btn" on:click|stopPropagation={() => deleteDownloaded(ch.id)}><Trash size={13} weight="light" /></button> <button class="dl-btn" onclick|stopPropagation={() => deleteDownloaded(ch.id)}><Trash size={13} weight="light" /></button>
{:else if enqueueing.has(ch.id)} {:else if enqueueing.has(ch.id)}
<CircleNotch size={14} weight="light" class="anim-spin enqueue-icon" /> <CircleNotch size={14} weight="light" class="anim-spin enqueue-icon" />
{:else} {:else}
<button class="dl-btn" on:click|stopPropagation={(e) => enqueue(ch, e)}><Download size={13} weight="light" /></button> <button class="dl-btn" onclick|stopPropagation={(e) => enqueue(ch, e)}><Download size={13} weight="light" /></button>
{/if} {/if}
</div> </div>
</div> </div>
@@ -634,9 +585,9 @@
{#if totalPages > 1} {#if totalPages > 1}
<div class="pagination-bottom"> <div class="pagination-bottom">
<button class="page-btn" on:click={() => chapterPage = Math.max(1, chapterPage - 1)} disabled={chapterPage === 1}>← Prev</button> <button class="page-btn" onclick={() => chapterPage = Math.max(1, chapterPage - 1)} disabled={chapterPage === 1}>← Prev</button>
<span class="page-num">{chapterPage} / {totalPages}</span> <span class="page-num">{chapterPage} / {totalPages}</span>
<button class="page-btn" on:click={() => chapterPage = Math.min(totalPages, chapterPage + 1)} disabled={chapterPage === totalPages}>Next →</button> <button class="page-btn" onclick={() => chapterPage = Math.min(totalPages, chapterPage + 1)} disabled={chapterPage === totalPages}>Next →</button>
</div> </div>
{/if} {/if}
</div> </div>
@@ -651,11 +602,7 @@
{manga} {manga}
currentChapters={chapters} currentChapters={chapters}
onClose={() => migrateOpen = false} onClose={() => migrateOpen = false}
onMigrated={(newManga) => { onMigrated={(newManga) => { activeManga = newManga; migrateOpen = false; cache.clear(CACHE_KEYS.LIBRARY); }}
activeManga.set(newManga);
migrateOpen = false;
cache.clear(CACHE_KEYS.LIBRARY);
}}
/> />
{/if} {/if}
{/if} {/if}
@@ -666,14 +613,7 @@
<style> <style>
.root { display: flex; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; } .root { display: flex; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
.sidebar { width: 200px; flex-shrink: 0; padding: var(--sp-5); border-right: 1px solid var(--border-dim); overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-4); background: var(--bg-base); }
/* Sidebar */
.sidebar {
width: 200px; flex-shrink: 0; padding: var(--sp-5);
border-right: 1px solid var(--border-dim); overflow-y: auto;
display: flex; flex-direction: column; gap: var(--sp-4);
background: var(--bg-base);
}
.back { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide); text-transform: uppercase; transition: color var(--t-base); } .back { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-muted); font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide); text-transform: uppercase; transition: color var(--t-base); }
.back:hover { color: var(--text-secondary); } .back:hover { color: var(--text-secondary); }
.cover-wrap { width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border-dim); flex-shrink: 0; } .cover-wrap { width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-raised); border: 1px solid var(--border-dim); flex-shrink: 0; }
@@ -696,14 +636,12 @@
.desc.expanded { -webkit-line-clamp: unset; display: block; overflow: visible; } .desc.expanded { -webkit-line-clamp: unset; display: block; overflow: visible; }
.desc-toggle { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--accent-fg); letter-spacing: var(--tracking-wide); background: none; border: none; padding: 0; cursor: pointer; opacity: 0.7; transition: opacity var(--t-base); } .desc-toggle { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--accent-fg); letter-spacing: var(--tracking-wide); background: none; border: none; padding: 0; cursor: pointer; opacity: 0.7; transition: opacity var(--t-base); }
.desc-toggle:hover { opacity: 1; } .desc-toggle:hover { opacity: 1; }
.progress-section { display: flex; flex-direction: column; gap: var(--sp-1); } .progress-section { display: flex; flex-direction: column; gap: var(--sp-1); }
.progress-header { display: flex; justify-content: space-between; align-items: center; } .progress-header { display: flex; justify-content: space-between; align-items: center; }
.progress-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); } .progress-label { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
.progress-pct { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--accent-fg); letter-spacing: var(--tracking-wide); } .progress-pct { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--accent-fg); letter-spacing: var(--tracking-wide); }
.progress-track { height: 3px; background: var(--border-base); border-radius: var(--radius-full); overflow: hidden; } .progress-track { height: 3px; background: var(--border-base); border-radius: var(--radius-full); overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width 0.4s ease; } .progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width 0.4s ease; }
.actions { display: flex; align-items: center; gap: var(--sp-2); } .actions { display: flex; align-items: center; gap: var(--sp-2); }
.library-btn { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide); padding: 5px 10px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); color: var(--text-muted); background: var(--bg-raised); transition: border-color var(--t-base), color var(--t-base), background var(--t-base); flex: 1; } .library-btn { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide); padding: 5px 10px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); color: var(--text-muted); background: var(--bg-raised); transition: border-color var(--t-base), color var(--t-base), background var(--t-base); flex: 1; }
.library-btn:hover { border-color: var(--accent); color: var(--accent-fg); } .library-btn:hover { border-color: var(--accent); color: var(--accent-fg); }
@@ -714,7 +652,6 @@
.read-btn { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; padding: 8px var(--sp-3); border-radius: var(--radius-md); background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent-fg); font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide); cursor: pointer; transition: background var(--t-base), border-color var(--t-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .read-btn { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); width: 100%; padding: 8px var(--sp-3); border-radius: var(--radius-md); background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent-fg); font-size: var(--text-xs); font-family: var(--font-ui); letter-spacing: var(--tracking-wide); cursor: pointer; transition: background var(--t-base), border-color var(--t-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.read-btn:hover { background: var(--accent-muted); border-color: var(--accent-bright); } .read-btn:hover { background: var(--accent-muted); border-color: var(--accent-bright); }
.chapter-count { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .chapter-count { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.details-section { display: flex; flex-direction: column; gap: 2px; } .details-section { display: flex; flex-direction: column; gap: 2px; }
.details-toggle { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); padding: 4px 0; transition: color var(--t-base); } .details-toggle { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); padding: 4px 0; transition: color var(--t-base); }
.details-toggle:hover { color: var(--text-muted); } .details-toggle:hover { color: var(--text-muted); }
@@ -726,8 +663,6 @@
.delete-all-btn { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 6px var(--sp-2); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); background: none; border: 1px solid var(--border-dim); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); } .delete-all-btn { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: 6px var(--sp-2); border-radius: var(--radius-md); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); background: none; border: 1px solid var(--border-dim); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
.delete-all-btn:hover:not(:disabled) { color: var(--color-error); border-color: var(--color-error); background: var(--color-error-bg); } .delete-all-btn:hover:not(:disabled) { color: var(--color-error); border-color: var(--color-error); background: var(--color-error-bg); }
.delete-all-btn:disabled { opacity: 0.4; cursor: default; } .delete-all-btn:disabled { opacity: 0.4; cursor: default; }
/* Chapter list */
.list-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .list-wrap { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.list-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; gap: var(--sp-2); flex-wrap: wrap; } .list-header { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; gap: var(--sp-2); flex-wrap: wrap; }
.list-header-left, .list-header-right { display: flex; align-items: center; gap: var(--sp-1); } .list-header-left, .list-header-right { display: flex; align-items: center; gap: var(--sp-1); }
@@ -737,8 +672,6 @@
.icon-btn:hover:not(:disabled) { color: var(--text-secondary); border-color: var(--border-strong); background: var(--bg-raised); } .icon-btn:hover:not(:disabled) { color: var(--text-secondary); border-color: var(--border-strong); background: var(--bg-raised); }
.icon-btn.active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); } .icon-btn.active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
.icon-btn:disabled { opacity: 0.3; cursor: default; } .icon-btn:disabled { opacity: 0.3; cursor: default; }
/* Folder picker */
.fp-wrap { position: relative; } .fp-wrap { position: relative; }
.fp-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 180px; background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-md); padding: var(--sp-1); z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.5); animation: scaleIn 0.1s ease both; transform-origin: top right; } .fp-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 180px; background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-md); padding: var(--sp-1); z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.5); animation: scaleIn 0.1s ease both; transform-origin: top right; }
.fp-empty { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); color: var(--text-faint); } .fp-empty { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); color: var(--text-faint); }
@@ -756,8 +689,6 @@
.fp-cancel:hover { color: var(--text-muted); border-color: var(--border-dim); } .fp-cancel:hover { color: var(--text-muted); border-color: var(--border-dim); }
.fp-new { width: 100%; padding: 6px var(--sp-3); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--text-faint); background: none; border: none; cursor: pointer; text-align: left; transition: color var(--t-fast), background var(--t-fast); } .fp-new { width: 100%; padding: 6px var(--sp-3); border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--text-faint); background: none; border: none; cursor: pointer; text-align: left; transition: color var(--t-fast), background var(--t-fast); }
.fp-new:hover { color: var(--text-secondary); background: var(--bg-overlay); } .fp-new:hover { color: var(--text-secondary); background: var(--bg-overlay); }
/* Jump */
.jump-wrap { position: relative; } .jump-wrap { position: relative; }
.jump-toggle { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); color: var(--text-faint); background: none; cursor: pointer; transition: color var(--t-base), border-color var(--t-base); } .jump-toggle { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); color: var(--text-faint); background: none; cursor: pointer; transition: color var(--t-base), border-color var(--t-base); }
.jump-toggle:hover { color: var(--text-muted); border-color: var(--border-strong); } .jump-toggle:hover { color: var(--text-muted); border-color: var(--border-strong); }
@@ -766,8 +697,6 @@
.jump-input:focus { border-color: var(--border-focus); } .jump-input:focus { border-color: var(--border-focus); }
.jump-cancel { font-size: 12px; color: var(--text-faint); padding: 2px 4px; border-radius: var(--radius-sm); transition: color var(--t-base); } .jump-cancel { font-size: 12px; color: var(--text-faint); padding: 2px 4px; border-radius: var(--radius-sm); transition: color var(--t-base); }
.jump-cancel:hover { color: var(--text-muted); } .jump-cancel:hover { color: var(--text-muted); }
/* Download dropdown */
.dl-wrap { position: relative; } .dl-wrap { position: relative; }
.dl-dropdown { position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px; background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: var(--sp-1); z-index: 200; box-shadow: 0 8px 32px rgba(0,0,0,0.5); animation: scaleIn 0.1s ease both; transform-origin: top right; } .dl-dropdown { position: absolute; top: calc(100% + 4px); right: 0; min-width: 220px; background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-lg); padding: var(--sp-1); z-index: 200; box-shadow: 0 8px 32px rgba(0,0,0,0.5); animation: scaleIn 0.1s ease both; transform-origin: top right; }
.dl-section-label { padding: 6px var(--sp-3) 4px; font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; } .dl-section-label { padding: 6px var(--sp-3) 4px; font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
@@ -791,16 +720,12 @@
.dl-range-sep { color: var(--text-faint); font-size: var(--text-xs); } .dl-range-sep { color: var(--text-faint); font-size: var(--text-xs); }
.dl-range-go { padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--accent-dim); background: var(--accent-muted); color: var(--accent-fg); font-family: var(--font-ui); font-size: var(--text-xs); cursor: pointer; } .dl-range-go { padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--accent-dim); background: var(--accent-muted); color: var(--accent-fg); font-family: var(--font-ui); font-size: var(--text-xs); cursor: pointer; }
.dl-range-go:disabled { opacity: 0.3; cursor: default; } .dl-range-go:disabled { opacity: 0.3; cursor: default; }
/* Pagination */
.pagination, .pagination-bottom { display: flex; align-items: center; gap: var(--sp-2); } .pagination, .pagination-bottom { display: flex; align-items: center; gap: var(--sp-2); }
.pagination-bottom { justify-content: center; padding: var(--sp-3); border-top: 1px solid var(--border-dim); flex-shrink: 0; } .pagination-bottom { justify-content: center; padding: var(--sp-3); border-top: 1px solid var(--border-dim); flex-shrink: 0; }
.page-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); color: var(--text-faint); background: none; cursor: pointer; transition: color var(--t-base), border-color var(--t-base); } .page-btn { font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 4px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border-dim); color: var(--text-faint); background: none; cursor: pointer; transition: color var(--t-base), border-color var(--t-base); }
.page-btn:hover:not(:disabled) { color: var(--text-muted); border-color: var(--border-strong); } .page-btn:hover:not(:disabled) { color: var(--text-muted); border-color: var(--border-strong); }
.page-btn:disabled { opacity: 0.3; cursor: default; } .page-btn:disabled { opacity: 0.3; cursor: default; }
.page-num { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); } .page-num { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
/* Chapter list/grid */
.ch-list { flex: 1; overflow-y: auto; } .ch-list { flex: 1; overflow-y: auto; }
.ch-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; padding: var(--sp-3); align-content: start; } .ch-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; padding: var(--sp-3); align-content: start; }
.ch-row { display: flex; align-items: center; padding: 10px var(--sp-4); border-bottom: 1px solid var(--border-dim); cursor: pointer; transition: background var(--t-fast); gap: var(--sp-3); } .ch-row { display: flex; align-items: center; padding: 10px var(--sp-4); border-bottom: 1px solid var(--border-dim); cursor: pointer; transition: background var(--t-fast); gap: var(--sp-3); }
@@ -825,4 +750,6 @@
.grid-cell-dot { position: absolute; bottom: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); } .grid-cell-dot { position: absolute; bottom: 3px; right: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); }
.grid-cell-spinner { position: absolute; top: 2px; right: 2px; } .grid-cell-spinner { position: absolute; top: 2px; right: 2px; }
.grid-cell-skeleton { aspect-ratio: 1; border-radius: var(--radius-sm); } .grid-cell-skeleton { aspect-ratio: 1; border-radius: var(--radius-sm); }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
</style> </style>
src/components/reader/Reader.svelte
+220 -308
View File
@@ -1,17 +1,12 @@
<script lang="ts"> <script lang="ts">
import { onMount, onDestroy, tick } from "svelte"; import { onMount, tick } from "svelte";
import { import { X, CaretLeft, CaretRight, ArrowLeft, ArrowRight, Square, Rows, Download, ArrowsLeftRight, ArrowsIn, ArrowsOut, ArrowsVertical, CircleNotch } from "phosphor-svelte";
X, CaretLeft, CaretRight, ArrowLeft, ArrowRight,
Square, Rows, Download, ArrowsLeftRight,
ArrowsIn, ArrowsOut, ArrowsVertical, CircleNotch,
} from "phosphor-svelte";
import { gql, thumbUrl } from "../../lib/client"; import { gql, thumbUrl } from "../../lib/client";
import { FETCH_CHAPTER_PAGES, MARK_CHAPTER_READ, ENQUEUE_DOWNLOAD, ENQUEUE_CHAPTERS_DOWNLOAD } from "../../lib/queries"; import { FETCH_CHAPTER_PAGES, MARK_CHAPTER_READ, ENQUEUE_DOWNLOAD, ENQUEUE_CHAPTERS_DOWNLOAD } from "../../lib/queries";
import { settings, activeManga, activeChapter, activeChapterList, pageUrls, pageNumber, closeReader, openReader, settingsOpen, addHistory, updateSettings, checkAndMarkCompleted } from "../../store"; import { settings, activeManga, activeChapter, activeChapterList, pageUrls, pageNumber, closeReader, openReader, settingsOpen, addHistory, updateSettings, checkAndMarkCompleted } from "../../store";
import { matchesKeybind, toggleFullscreen, DEFAULT_KEYBINDS } from "../../lib/keybinds"; import { matchesKeybind, toggleFullscreen, DEFAULT_KEYBINDS } from "../../lib/keybinds";
import type { FitMode } from "../../store"; import type { FitMode } from "../../store";
const pageCache = new Map<number, string[]>(); const pageCache = new Map<number, string[]>();
const inflight = new Map<number, Promise<string[]>>(); const inflight = new Map<number, Promise<string[]>>();
const cacheOrder: number[] = []; const cacheOrder: number[] = [];
@@ -25,7 +20,7 @@
function cacheEvict(keep: Set<number>) { function cacheEvict(keep: Set<number>) {
while (pageCache.size > MAX_CACHED) { while (pageCache.size > MAX_CACHED) {
const victim = cacheOrder.find((id) => !keep.has(id)); const victim = cacheOrder.find(id => !keep.has(id));
if (!victim) break; if (!victim) break;
cacheOrder.splice(cacheOrder.indexOf(victim), 1); cacheOrder.splice(cacheOrder.indexOf(victim), 1);
pageCache.delete(victim); pageCache.delete(victim);
@@ -38,10 +33,8 @@
if (signal?.aborted) return Promise.reject(new DOMException("Aborted", "AbortError")); if (signal?.aborted) return Promise.reject(new DOMException("Aborted", "AbortError"));
if (!inflight.has(chapterId)) { if (!inflight.has(chapterId)) {
const p = gql<{ fetchChapterPages: { pages: string[] } }>(FETCH_CHAPTER_PAGES, { chapterId }) const p = gql<{ fetchChapterPages: { pages: string[] } }>(FETCH_CHAPTER_PAGES, { chapterId })
.then((d) => { .then(d => { const urls = d.fetchChapterPages.pages.map(thumbUrl); pageCache.set(chapterId, urls); cacheTouch(chapterId); return urls; })
const urls = d.fetchChapterPages.pages.map(thumbUrl); .finally(() => inflight.delete(chapterId));
pageCache.set(chapterId, urls); cacheTouch(chapterId); return urls;
}).finally(() => inflight.delete(chapterId));
inflight.set(chapterId, p); inflight.set(chapterId, p);
} }
const base = inflight.get(chapterId)!; const base = inflight.get(chapterId)!;
@@ -52,13 +45,11 @@
}); });
} }
const aspectCache = new Map<string, number>(); const aspectCache = new Map<string, number>();
function preloadImage(url: string) { new Image().src = url; } function preloadImage(url: string) { new Image().src = url; }
function decodeImage(url: string): Promise<void> { function decodeImage(url: string): Promise<void> {
return new Promise((resolve) => { return new Promise(resolve => {
const img = new Image(); const img = new Image();
img.onload = () => { img.decode ? img.decode().then(resolve, resolve) : resolve(); }; img.onload = () => { img.decode ? img.decode().then(resolve, resolve) : resolve(); };
img.onerror = () => resolve(); img.onerror = () => resolve();
@@ -68,7 +59,7 @@
function measureAspect(url: string): Promise<number> { function measureAspect(url: string): Promise<number> {
if (aspectCache.has(url)) return Promise.resolve(aspectCache.get(url)!); if (aspectCache.has(url)) return Promise.resolve(aspectCache.get(url)!);
return new Promise((res) => { return new Promise(res => {
const img = new Image(); const img = new Image();
img.onload = () => { const r = img.naturalHeight > 0 ? img.naturalWidth / img.naturalHeight : 0.67; aspectCache.set(url, r); res(r); }; img.onload = () => { const r = img.naturalHeight > 0 ? img.naturalWidth / img.naturalHeight : 0.67; aspectCache.set(url, r); res(r); };
img.onerror = () => res(0.67); img.onerror = () => res(0.67);
@@ -76,86 +67,84 @@
}); });
} }
interface StripChapter { chapterId: number; chapterName: string; urls: string[]; startGlobalIdx: number; } interface StripChapter { chapterId: number; chapterName: string; urls: string[]; startGlobalIdx: number; }
let containerEl: HTMLDivElement; let containerEl: HTMLDivElement;
let sentinelEl: HTMLDivElement; let sentinelEl: HTMLDivElement;
let hideTimer: ReturnType<typeof setTimeout> | null = null; let hideTimer: ReturnType<typeof setTimeout> | null = null;
let loading = true;
let error: string | null = null;
let dlOpen = false;
let zoomOpen = false;
let uiVisible = true;
let pageReady = false;
let pageGroups: number[][] = [];
let stripChapters: StripChapter[] = [];
let visibleChapterId: number | null = null;
let nextN = 5;
let dlBusy = false;
let loading: boolean = $state(true);
let error: string | null = $state(null);
let dlOpen: boolean = $state(false);
let zoomOpen: boolean = $state(false);
let uiVisible: boolean = $state(true);
let pageReady: boolean = $state(false);
let pageGroups: number[][] = $state([]);
let stripChapters: StripChapter[] = $state([]);
let visibleChapterId: number | null = $state(null);
let nextN: number = $state(5);
let dlBusy: boolean = $state(false);
let markedRead = new Set<number>(); let markedRead = new Set<number>();
let appended = new Set<number>(); let appended = new Set<number>();
let appending = false; let appending = false;
let abortCtrl: AbortController | null = null; let abortCtrl: AbortController | null = null;
let loadingId: number | null = null; let loadingId: number | null = null;
let scrollAnchor: { scrollTop: number; scrollHeight: number } | null = null; let scrollAnchor: { scrollTop: number; scrollHeight: number } | null = null;
$: rtl = $settings.readingDirection === "rtl"; const rtl = $derived(settings.readingDirection === "rtl");
$: fit = ($settings.fitMode ?? "width") as FitMode; const fit = $derived((settings.fitMode ?? "width") as FitMode);
$: style = $settings.pageStyle ?? "single"; const style = $derived(settings.pageStyle ?? "single");
$: maxW = $settings.maxPageWidth ?? 900; const maxW = $derived(settings.maxPageWidth ?? 900);
$: autoNext = $settings.autoNextChapter ?? false; const autoNext = $derived(settings.autoNextChapter ?? false);
$: markOnNext = $settings.markReadOnNext ?? true; const markOnNext = $derived(settings.markReadOnNext ?? true);
$: lastPage = $pageUrls.length; const lastPage = $derived(pageUrls.length);
$: displayChapter = (style === "longstrip" && autoNext && visibleChapterId) const displayChapter = $derived((style === "longstrip" && autoNext && visibleChapterId)
? ($activeChapterList.find((c) => c.id === visibleChapterId) ?? $activeChapter) ? (activeChapterList.find(c => c.id === visibleChapterId) ?? activeChapter)
: $activeChapter; : activeChapter);
$: adjacent = (() => { const adjacent = $derived((() => {
const ref = displayChapter ?? $activeChapter; const ref = displayChapter ?? activeChapter;
if (!ref || !$activeChapterList.length) return { prev: null, next: null, remaining: [] }; if (!ref || !activeChapterList.length) return { prev: null, next: null, remaining: [] };
const idx = $activeChapterList.findIndex((c) => c.id === ref.id); const idx = activeChapterList.findIndex(c => c.id === ref.id);
return { return {
prev: idx > 0 ? $activeChapterList[idx - 1] : null, prev: idx > 0 ? activeChapterList[idx - 1] : null,
next: idx < $activeChapterList.length - 1 ? $activeChapterList[idx + 1] : null, next: idx < activeChapterList.length - 1 ? activeChapterList[idx + 1] : null,
remaining: $activeChapterList.slice(idx + 1), remaining: activeChapterList.slice(idx + 1),
}; };
})(); })());
$: visibleChunkLastPage = (() => { const visibleChunkLastPage = $derived((() => {
if (style !== "longstrip" || !autoNext) return lastPage; if (style !== "longstrip" || !autoNext) return lastPage;
const chId = visibleChapterId ?? $activeChapter?.id; const chId = visibleChapterId ?? activeChapter?.id;
const chunk = stripChapters.find((c) => c.chapterId === chId); const chunk = stripChapters.find(c => c.chapterId === chId);
return chunk?.urls.length ?? lastPage; return chunk?.urls.length ?? lastPage;
})(); })());
$: imgCls = [ const imgCls = $derived([
"img", "img",
fit === "width" && "fit-width", fit === "width" && "fit-width",
fit === "height" && "fit-height", fit === "height" && "fit-height",
fit === "screen" && "fit-screen", fit === "screen" && "fit-screen",
fit === "original" && "fit-original", fit === "original" && "fit-original",
$settings.optimizeContrast && "optimize-contrast", settings.optimizeContrast && "optimize-contrast",
].filter(Boolean).join(" "); ].filter(Boolean).join(" "));
$: fitLabel = { width: "Fit W", height: "Fit H", screen: "Fit Screen", original: "1:1" }[fit]; const fitLabel = $derived({ width: "Fit W", height: "Fit H", screen: "Fit Screen", original: "1:1" }[fit]);
$: styleLabel = style; const styleLabel = $derived(style);
function maybeMarkCurrentRead() { function maybeMarkCurrentRead() {
const ch = $activeChapter; const ch = activeChapter;
if (!ch || !markOnNext || markedRead.has(ch.id)) return; if (!ch || !markOnNext || markedRead.has(ch.id)) return;
markedRead.add(ch.id); markedRead.add(ch.id);
gql(MARK_CHAPTER_READ, { id: ch.id, isRead: true }) gql(MARK_CHAPTER_READ, { id: ch.id, isRead: true })
.then(() => { .then(() => {
if ($activeManga) { if (activeManga) {
const updated = $activeChapterList.map(c => c.id === ch.id ? { ...c, isRead: true } : c); const updated = activeChapterList.map(c => c.id === ch.id ? { ...c, isRead: true } : c);
checkAndMarkCompleted($activeManga.id, updated); checkAndMarkCompleted(activeManga.id, updated);
} }
}) })
.catch((e) => { markedRead.delete(ch.id); console.error(e); }); .catch(e => { markedRead.delete(ch.id); console.error(e); });
} }
function showUi() { function showUi() {
@@ -164,10 +153,7 @@
hideTimer = setTimeout(() => uiVisible = false, 3000); hideTimer = setTimeout(() => uiVisible = false, 3000);
} }
$effect(() => { if (activeChapter) loadChapter(activeChapter.id); });
$: if ($activeChapter) {
loadChapter($activeChapter.id);
}
async function loadChapter(id: number) { async function loadChapter(id: number) {
abortCtrl?.abort(); abortCtrl?.abort();
@@ -182,18 +168,17 @@
error = null; error = null;
pageGroups = []; pageGroups = [];
pageReady = false; pageReady = false;
stripChapters = []; stripChapters = [];
visibleChapterId = null; visibleChapterId = null;
pageUrls.set([]); pageUrls = [];
pageNumber.set(1); pageNumber = 1;
try { try {
const urls = await fetchPages(id, ctrl.signal); const urls = await fetchPages(id, ctrl.signal);
if (ctrl.signal.aborted) return; if (ctrl.signal.aborted) return;
pageUrls.set(urls); pageUrls = urls;
pageReady = true; pageReady = true;
if (style === "longstrip" && autoNext) { if (style === "longstrip" && autoNext) {
stripChapters = [{ chapterId: id, chapterName: $activeChapter?.name ?? "", urls, startGlobalIdx: 0 }]; stripChapters = [{ chapterId: id, chapterName: activeChapter?.name ?? "", urls, startGlobalIdx: 0 }];
visibleChapterId = id; visibleChapterId = id;
} }
loading = false; loading = false;
@@ -204,27 +189,22 @@
} }
} }
function appendNextChapter() { function appendNextChapter() {
if (appending) return; if (appending) return;
const lastChunk = stripChapters[stripChapters.length - 1]; const lastChunk = stripChapters[stripChapters.length - 1];
if (!lastChunk) return; if (!lastChunk) return;
const list = $activeChapterList; const list = activeChapterList;
const lastIdx = list.findIndex((c) => c.id === lastChunk.chapterId); const lastIdx = list.findIndex(c => c.id === lastChunk.chapterId);
if (lastIdx < 0 || lastIdx >= list.length - 1) return; if (lastIdx < 0 || lastIdx >= list.length - 1) return;
const next = list[lastIdx + 1]; const next = list[lastIdx + 1];
if (!next || appended.has(next.id)) return; if (!next || appended.has(next.id)) return;
appended.add(next.id); appended.add(next.id);
appending = true; appending = true;
fetchPages(next.id) fetchPages(next.id)
.then((urls) => { .then(urls => { urls.forEach(url => measureAspect(url).catch(() => {})); urls.slice(0, 6).forEach(preloadImage); return urls; })
urls.forEach((url) => measureAspect(url).catch(() => {})); .then(urls => {
urls.slice(0, 6).forEach(preloadImage); if (stripChapters.some(c => c.chapterId === next.id)) return;
return urls; const last = stripChapters[stripChapters.length - 1];
})
.then((urls) => {
if (stripChapters.some((c) => c.chapterId === next.id)) return;
const last = stripChapters[stripChapters.length - 1];
const start = last ? last.startGlobalIdx + last.urls.length : 0; const start = last ? last.startGlobalIdx + last.urls.length : 0;
const MAX_STRIP = 8; const MAX_STRIP = 8;
if (stripChapters.length >= MAX_STRIP && containerEl) { if (stripChapters.length >= MAX_STRIP && containerEl) {
@@ -244,7 +224,6 @@
.catch(() => { appending = false; }); .catch(() => { appending = false; });
} }
function setupScrollTracking() { function setupScrollTracking() {
if (!containerEl || style !== "longstrip") return; if (!containerEl || style !== "longstrip") return;
const READ_LINE_PCT = 0.20; const READ_LINE_PCT = 0.20;
@@ -260,36 +239,26 @@
else break; else break;
} }
if (activeLocalPage === null && imgs.length > 0) { activeLocalPage = Number(imgs[0].dataset.localPage); activeChId = Number(imgs[0].dataset.chapter); } if (activeLocalPage === null && imgs.length > 0) { activeLocalPage = Number(imgs[0].dataset.localPage); activeChId = Number(imgs[0].dataset.chapter); }
if (activeLocalPage !== null) pageNumber.set(activeLocalPage); if (activeLocalPage !== null) pageNumber = activeLocalPage;
if (activeChId && activeChId !== visibleChapterId) visibleChapterId = activeChId; if (activeChId && activeChId !== visibleChapterId) visibleChapterId = activeChId;
if ($settings.autoMarkRead && activeLocalPage !== null && activeChId) { if (settings.autoMarkRead && activeLocalPage !== null && activeChId) {
const chunk = stripChapters.find((c) => c.chapterId === activeChId); const chunk = stripChapters.find(c => c.chapterId === activeChId);
const total = chunk ? chunk.urls.length : $pageUrls.length; const total = chunk ? chunk.urls.length : pageUrls.length;
if (total > 0 && activeLocalPage >= total - 1 && !markedRead.has(activeChId)) { if (total > 0 && activeLocalPage >= total - 1 && !markedRead.has(activeChId)) {
markedRead.add(activeChId); markedRead.add(activeChId);
const chIdSnap = activeChId; const chIdSnap = activeChId;
gql(MARK_CHAPTER_READ, { id: chIdSnap, isRead: true }) gql(MARK_CHAPTER_READ, { id: chIdSnap, isRead: true })
.then(() => { .then(() => { if (activeManga) { const updated = activeChapterList.map(c => c.id === chIdSnap ? { ...c, isRead: true } : c); checkAndMarkCompleted(activeManga.id, updated); } })
if ($activeManga) { .catch(e => { markedRead.delete(chIdSnap); console.error(e); });
const updated = $activeChapterList.map(c => c.id === chIdSnap ? { ...c, isRead: true } : c);
checkAndMarkCompleted($activeManga.id, updated);
}
})
.catch((e) => { markedRead.delete(chIdSnap); console.error(e); });
} }
} }
if (containerEl.scrollTop + containerEl.clientHeight < containerEl.scrollHeight - 40) return; if (containerEl.scrollTop + containerEl.clientHeight < containerEl.scrollHeight - 40) return;
const last = stripChapters[stripChapters.length - 1]; const last = stripChapters[stripChapters.length - 1];
if (last && $settings.autoMarkRead && !markedRead.has(last.chapterId)) { if (last && settings.autoMarkRead && !markedRead.has(last.chapterId)) {
markedRead.add(last.chapterId); markedRead.add(last.chapterId);
const lastIdSnap = last.chapterId; const lastIdSnap = last.chapterId;
gql(MARK_CHAPTER_READ, { id: lastIdSnap, isRead: true }) gql(MARK_CHAPTER_READ, { id: lastIdSnap, isRead: true })
.then(() => { .then(() => { if (activeManga) { const updated = activeChapterList.map(c => c.id === lastIdSnap ? { ...c, isRead: true } : c); checkAndMarkCompleted(activeManga.id, updated); } })
if ($activeManga) {
const updated = $activeChapterList.map(c => c.id === lastIdSnap ? { ...c, isRead: true } : c);
checkAndMarkCompleted($activeManga.id, updated);
}
})
.catch(console.error); .catch(console.error);
} }
} }
@@ -300,47 +269,43 @@
containerEl.addEventListener("scroll", onScroll, { passive: true }); containerEl.addEventListener("scroll", onScroll, { passive: true });
if (autoNext) containerEl.addEventListener("scroll", onScroll80, { passive: true }); if (autoNext) containerEl.addEventListener("scroll", onScroll80, { passive: true });
onScroll(); onScroll();
return () => { return () => { containerEl.removeEventListener("scroll", onScroll); containerEl.removeEventListener("scroll", onScroll80); };
containerEl.removeEventListener("scroll", onScroll);
containerEl.removeEventListener("scroll", onScroll80);
};
} }
function advanceGroup(forward: boolean) { function advanceGroup(forward: boolean) {
if (!pageGroups.length) return; if (!pageGroups.length) return;
const gi = pageGroups.findIndex((g) => g.includes($pageNumber)); const gi = pageGroups.findIndex(g => g.includes(pageNumber));
if (forward) { if (forward) {
if (gi < pageGroups.length - 1) pageNumber.set(pageGroups[gi + 1][0]); if (gi < pageGroups.length - 1) pageNumber = pageGroups[gi + 1][0];
else if (adjacent.next) { pageNumber.set(1); openReader(adjacent.next, $activeChapterList); } else if (adjacent.next) { pageNumber = 1; openReader(adjacent.next, activeChapterList); }
else closeReader(); else closeReader();
} else { } else {
if (gi > 0) pageNumber.set(pageGroups[gi - 1][0]); if (gi > 0) pageNumber = pageGroups[gi - 1][0];
else if (adjacent.prev) openReader(adjacent.prev, $activeChapterList); else if (adjacent.prev) openReader(adjacent.prev, activeChapterList);
} }
} }
function goForward() { function goForward() {
if (loading) return; if (loading) return;
if (style === "longstrip") { if (adjacent.next) { maybeMarkCurrentRead(); openReader(adjacent.next, $activeChapterList); } return; } if (style === "longstrip") { if (adjacent.next) { maybeMarkCurrentRead(); openReader(adjacent.next, activeChapterList); } return; }
if (style === "double" && pageGroups.length) { advanceGroup(true); return; } if (style === "double" && pageGroups.length) { advanceGroup(true); return; }
if (!$pageUrls.length) return; if (!pageUrls.length) return;
if ($pageNumber < lastPage) { decodeImage($pageUrls[$pageNumber]).then(() => pageNumber.set($pageNumber + 1)); } if (pageNumber < lastPage) { decodeImage(pageUrls[pageNumber]).then(() => pageNumber++); }
else if (adjacent.next) { maybeMarkCurrentRead(); pageNumber.set(1); openReader(adjacent.next, $activeChapterList); } else if (adjacent.next) { maybeMarkCurrentRead(); pageNumber = 1; openReader(adjacent.next, activeChapterList); }
else closeReader(); else closeReader();
} }
function goBack() { function goBack() {
if (loading) return; if (loading) return;
if (style === "longstrip") { if (adjacent.prev) openReader(adjacent.prev, $activeChapterList); return; } if (style === "longstrip") { if (adjacent.prev) openReader(adjacent.prev, activeChapterList); return; }
if (style === "double" && pageGroups.length) { advanceGroup(false); return; } if (style === "double" && pageGroups.length) { advanceGroup(false); return; }
if (!$pageUrls.length) return; if (!pageUrls.length) return;
if ($pageNumber > 1) { decodeImage($pageUrls[$pageNumber - 2]).then(() => pageNumber.set($pageNumber - 1)); } if (pageNumber > 1) { decodeImage(pageUrls[pageNumber - 2]).then(() => pageNumber--); }
else if (adjacent.prev) openReader(adjacent.prev, $activeChapterList); else if (adjacent.prev) openReader(adjacent.prev, activeChapterList);
} }
$: goNext = rtl ? goBack : goForward; const goNext = $derived(rtl ? goBack : goForward);
$: goPrev = rtl ? goForward : goBack; const goPrev = $derived(rtl ? goForward : goBack);
function cycleStyle() { function cycleStyle() {
const opts = ["single", "longstrip"] as const; const opts = ["single", "longstrip"] as const;
@@ -353,90 +318,83 @@
updateSettings({ fitMode: opts[(opts.indexOf(fit) + 1) % opts.length] }); updateSettings({ fitMode: opts[(opts.indexOf(fit) + 1) % opts.length] });
} }
$effect(() => {
$: if ($activeChapter && lastPage && $activeManga) { if (activeChapter && lastPage && activeManga) {
addHistory({ addHistory({ mangaId: activeManga.id, mangaTitle: activeManga.title, thumbnailUrl: activeManga.thumbnailUrl, chapterId: activeChapter.id, chapterName: activeChapter.name, pageNumber, readAt: Date.now() });
mangaId: $activeManga.id, mangaTitle: $activeManga.title, if (style !== "longstrip" && settings.autoMarkRead && pageNumber === lastPage) {
thumbnailUrl: $activeManga.thumbnailUrl, chapterId: $activeChapter.id, if (!markedRead.has(activeChapter.id)) {
chapterName: $activeChapter.name, pageNumber: $pageNumber, readAt: Date.now(), markedRead.add(activeChapter.id);
}); const chIdSnap = activeChapter.id;
if (style !== "longstrip" && $settings.autoMarkRead && $pageNumber === lastPage) { gql(MARK_CHAPTER_READ, { id: chIdSnap, isRead: true })
if (!markedRead.has($activeChapter.id)) { .then(() => { if (activeManga) { const updated = activeChapterList.map(c => c.id === chIdSnap ? { ...c, isRead: true } : c); checkAndMarkCompleted(activeManga.id, updated); } })
markedRead.add($activeChapter.id); .catch(console.error);
const chIdSnap = $activeChapter.id; }
gql(MARK_CHAPTER_READ, { id: chIdSnap, isRead: true })
.then(() => {
if ($activeManga) {
const updated = $activeChapterList.map(c => c.id === chIdSnap ? { ...c, isRead: true } : c);
checkAndMarkCompleted($activeManga.id, updated);
}
})
.catch(console.error);
} }
} }
} });
$effect(() => {
if (style === "double" && pageUrls.length) {
let cancelled = false;
const snap = pageUrls;
Promise.all(snap.map(measureAspect)).then(aspects => {
if (cancelled || snap !== pageUrls) return;
const offset = settings.offsetDoubleSpreads;
const groups: number[][] = [[1]];
if (offset) groups.push([2]);
let i = offset ? 3 : 2;
while (i <= snap.length) {
const a = aspects[i - 1], nextA = aspects[i] ?? 0;
if (a > 1.2 || i === snap.length || nextA > 1.2) { groups.push([i++]); }
else { groups.push(rtl ? [i + 1, i] : [i, i + 1]); i += 2; }
}
pageGroups = groups;
});
return () => { cancelled = true; };
} else { pageGroups = []; }
});
$: if (style === "double" && $pageUrls.length) { $effect(() => {
let cancelled = false; const ahead = settings.preloadPages ?? 3;
const snap = $pageUrls; for (let i = 1; i <= ahead; i++) { const url = pageUrls[pageNumber - 1 + i]; if (url) decodeImage(url); }
Promise.all(snap.map(measureAspect)).then((aspects) => { const behind = pageUrls[pageNumber - 2];
if (cancelled || snap !== $pageUrls) return;
const offset = $settings.offsetDoubleSpreads;
const groups: number[][] = [[1]];
if (offset) groups.push([2]);
let i = offset ? 3 : 2;
while (i <= snap.length) {
const a = aspects[i - 1], nextA = aspects[i] ?? 0;
if (a > 1.2 || i === snap.length || nextA > 1.2) { groups.push([i++]); }
else { groups.push(rtl ? [i + 1, i] : [i, i + 1]); i += 2; }
}
pageGroups = groups;
});
} else { pageGroups = []; }
$: {
const ahead = $settings.preloadPages ?? 3;
for (let i = 1; i <= ahead; i++) { const url = $pageUrls[$pageNumber - 1 + i]; if (url) decodeImage(url); }
const behind = $pageUrls[$pageNumber - 2];
if (behind) preloadImage(behind); if (behind) preloadImage(behind);
} });
$effect(() => {
$: if ($activeChapter && $activeChapterList.length) { if (activeChapter && activeChapterList.length) {
const idx = $activeChapterList.findIndex((c) => c.id === $activeChapter!.id); const idx = activeChapterList.findIndex(c => c.id === activeChapter!.id);
if (idx >= 0) { if (idx >= 0) {
const toPin: number[] = [$activeChapter.id]; const toPin: number[] = [activeChapter.id];
for (let i = 1; i <= 3; i++) { for (let i = 1; i <= 3; i++) {
const entry = $activeChapterList[idx + i]; const entry = activeChapterList[idx + i];
if (!entry) break; if (!entry) break;
toPin.push(entry.id); toPin.push(entry.id);
fetchPages(entry.id).then((urls) => { const n = i === 1 ? 8 : i === 2 ? 4 : 2; urls.slice(0, n).forEach(preloadImage); }).catch(() => {}); fetchPages(entry.id).then(urls => { const n = i === 1 ? 8 : i === 2 ? 4 : 2; urls.slice(0, n).forEach(preloadImage); }).catch(() => {});
}
if (idx > 0) { const prev = activeChapterList[idx - 1]; toPin.push(prev.id); fetchPages(prev.id).catch(() => {}); }
cacheEvict(new Set(toPin));
} }
if (idx > 0) { const prev = $activeChapterList[idx - 1]; toPin.push(prev.id); fetchPages(prev.id).catch(() => {}); }
cacheEvict(new Set(toPin));
} }
} });
$effect(() => {
$: if (style === "longstrip" && $pageUrls.length && $activeChapter) { if (style === "longstrip" && pageUrls.length && activeChapter) {
appended = new Set([$activeChapter.id]); appended = new Set([activeChapter.id]);
appending = false; appending = false;
if (autoNext) { if (autoNext) {
stripChapters = [{ chapterId: $activeChapter.id, chapterName: $activeChapter.name, urls: $pageUrls, startGlobalIdx: 0 }]; stripChapters = [{ chapterId: activeChapter.id, chapterName: activeChapter.name, urls: pageUrls, startGlobalIdx: 0 }];
visibleChapterId = $activeChapter.id; visibleChapterId = activeChapter.id;
} else { } else {
stripChapters = []; stripChapters = [];
visibleChapterId = null; visibleChapterId = null;
}
if (containerEl) containerEl.scrollTop = 0;
} }
if (containerEl) containerEl.scrollTop = 0; });
}
$: if ($activeChapter?.id && containerEl) containerEl.scrollTop = 0;
$: if (style !== "longstrip" && containerEl) containerEl.scrollTop = 0;
$effect(() => { if (activeChapter?.id && containerEl) containerEl.scrollTop = 0; });
$effect(() => { if (style !== "longstrip" && containerEl) containerEl.scrollTop = 0; });
function onWheel(e: WheelEvent) { function onWheel(e: WheelEvent) {
if (!e.ctrlKey) return; if (!e.ctrlKey) return;
@@ -444,12 +402,11 @@
updateSettings({ maxPageWidth: Math.min(2400, Math.max(200, maxW + (e.deltaY < 0 ? 50 : -50))) }); updateSettings({ maxPageWidth: Math.min(2400, Math.max(200, maxW + (e.deltaY < 0 ? 50 : -50))) });
} }
function onKey(e: KeyboardEvent) { function onKey(e: KeyboardEvent) {
if ((e.target as HTMLElement).tagName === "INPUT") return; if ((e.target as HTMLElement).tagName === "INPUT") return;
const kb = $settings.keybinds ?? DEFAULT_KEYBINDS; const kb = settings.keybinds ?? DEFAULT_KEYBINDS;
const mW = $settings.maxPageWidth ?? 900; const mW = settings.maxPageWidth ?? 900;
const r = $settings.readingDirection === "rtl"; const r = settings.readingDirection === "rtl";
if (e.key === "Escape") { if (e.key === "Escape") {
e.preventDefault(); e.preventDefault();
if (zoomOpen) { zoomOpen = false; return; } if (zoomOpen) { zoomOpen = false; return; }
@@ -462,24 +419,24 @@
if (matchesKeybind(e, kb.exitReader)) { e.preventDefault(); closeReader(); } if (matchesKeybind(e, kb.exitReader)) { e.preventDefault(); closeReader(); }
else if (matchesKeybind(e, kb.pageRight)) { e.preventDefault(); goForward(); } else if (matchesKeybind(e, kb.pageRight)) { e.preventDefault(); goForward(); }
else if (matchesKeybind(e, kb.pageLeft)) { e.preventDefault(); goBack(); } else if (matchesKeybind(e, kb.pageLeft)) { e.preventDefault(); goBack(); }
else if (matchesKeybind(e, kb.firstPage)) { e.preventDefault(); pageNumber.set(1); } else if (matchesKeybind(e, kb.firstPage)) { e.preventDefault(); pageNumber = 1; }
else if (matchesKeybind(e, kb.lastPage)) { e.preventDefault(); pageNumber.set(lastPage); } else if (matchesKeybind(e, kb.lastPage)) { e.preventDefault(); pageNumber = lastPage; }
else if (matchesKeybind(e, kb.chapterRight)) { else if (matchesKeybind(e, kb.chapterRight)) {
e.preventDefault(); e.preventDefault();
const list = $activeChapterList, idx = list.findIndex((c) => c.id === loadingId); const list = activeChapterList, idx = list.findIndex(c => c.id === loadingId);
const next = idx >= 0 && idx < list.length - 1 ? list[idx + 1] : null; const next = idx >= 0 && idx < list.length - 1 ? list[idx + 1] : null;
if (next) { maybeMarkCurrentRead(); openReader(next, list); } if (next) { maybeMarkCurrentRead(); openReader(next, list); }
} }
else if (matchesKeybind(e, kb.chapterLeft)) { else if (matchesKeybind(e, kb.chapterLeft)) {
e.preventDefault(); e.preventDefault();
const list = $activeChapterList, idx = list.findIndex((c) => c.id === loadingId); const list = activeChapterList, idx = list.findIndex(c => c.id === loadingId);
const prev = idx > 0 ? list[idx - 1] : null; const prev = idx > 0 ? list[idx - 1] : null;
if (prev) openReader(prev, list); if (prev) openReader(prev, list);
} }
else if (matchesKeybind(e, kb.togglePageStyle)) { e.preventDefault(); cycleStyle(); } else if (matchesKeybind(e, kb.togglePageStyle)) { e.preventDefault(); cycleStyle(); }
else if (matchesKeybind(e, kb.toggleReadingDirection)) { e.preventDefault(); updateSettings({ readingDirection: r ? "ltr" : "rtl" }); } else if (matchesKeybind(e, kb.toggleReadingDirection)) { e.preventDefault(); updateSettings({ readingDirection: r ? "ltr" : "rtl" }); }
else if (matchesKeybind(e, kb.toggleFullscreen)) { e.preventDefault(); toggleFullscreen().catch(console.error); } else if (matchesKeybind(e, kb.toggleFullscreen)) { e.preventDefault(); toggleFullscreen().catch(console.error); }
else if (matchesKeybind(e, kb.openSettings)) { e.preventDefault(); settingsOpen.set(true); } else if (matchesKeybind(e, kb.openSettings)) { e.preventDefault(); settingsOpen = true; }
} }
function handleTap(e: MouseEvent) { function handleTap(e: MouseEvent) {
@@ -489,11 +446,9 @@
else { if (x < 0.4) goForward(); else if (x > 0.6) goBack(); } else { if (x < 0.4) goForward(); else if (x > 0.6) goBack(); }
} }
async function runDl(fn: () => Promise<unknown>, body: string) { async function runDl(fn: () => Promise<unknown>) {
dlBusy = true; dlBusy = true;
try { try { await fn(); } catch (e: any) { console.error(e); }
await fn();
} catch (e: any) { console.error(e); }
dlBusy = false; dlOpen = false; dlBusy = false; dlOpen = false;
} }
@@ -505,46 +460,44 @@
window.addEventListener("wheel", onWheel, { passive: false }); window.addEventListener("wheel", onWheel, { passive: false });
containerEl?.focus({ preventScroll: true }); containerEl?.focus({ preventScroll: true });
scrollCleanup = setupScrollTracking(); scrollCleanup = setupScrollTracking();
return () => {
abortCtrl?.abort();
if (hideTimer) clearTimeout(hideTimer);
window.removeEventListener("keydown", onKey);
window.removeEventListener("wheel", onWheel);
scrollCleanup?.();
};
}); });
onDestroy(() => { const stripToRender = $derived(style === "longstrip"
abortCtrl?.abort();
if (hideTimer) clearTimeout(hideTimer);
window.removeEventListener("keydown", onKey);
window.removeEventListener("wheel", onWheel);
scrollCleanup?.();
});
$: stripToRender = style === "longstrip"
? (autoNext && stripChapters.length > 0 ? (autoNext && stripChapters.length > 0
? stripChapters ? stripChapters
: [{ chapterId: $activeChapter?.id ?? 0, chapterName: $activeChapter?.name ?? "", urls: $pageUrls, startGlobalIdx: 0 }]) : [{ chapterId: activeChapter?.id ?? 0, chapterName: activeChapter?.name ?? "", urls: pageUrls, startGlobalIdx: 0 }])
: []; : []);
$: currentGroup = style === "double" && pageGroups.length const currentGroup = $derived(style === "double" && pageGroups.length
? (pageGroups.find((g) => g.includes($pageNumber)) ?? [$pageNumber]) ? (pageGroups.find(g => g.includes(pageNumber)) ?? [pageNumber])
: [$pageNumber]; : [pageNumber]);
</script> </script>
<div class="root" role="presentation" on:mousemove={(e) => { if (e.clientY < 60 || window.innerHeight - e.clientY < 60) showUi(); }}> <div class="root" role="presentation" onmousemove={(e) => { if (e.clientY < 60 || window.innerHeight - e.clientY < 60) showUi(); }}>
<div class="topbar" class:hidden={!uiVisible}> <div class="topbar" class:hidden={!uiVisible}>
<button class="icon-btn" on:click={closeReader} title="Close reader"><X size={15} weight="light" /></button> <button class="icon-btn" onclick={closeReader} title="Close reader"><X size={15} weight="light" /></button>
<button class="icon-btn" on:click={() => { if (adjacent.prev) { maybeMarkCurrentRead(); openReader(adjacent.prev, $activeChapterList); } }} disabled={!adjacent.prev}> <button class="icon-btn" onclick={() => { if (adjacent.prev) { maybeMarkCurrentRead(); openReader(adjacent.prev, activeChapterList); } }} disabled={!adjacent.prev}>
<CaretLeft size={14} weight="light" /> <CaretLeft size={14} weight="light" />
</button> </button>
<span class="ch-label"> <span class="ch-label">
<span class="ch-title">{$activeManga?.title}</span> <span class="ch-title">{activeManga?.title}</span>
<span class="ch-sep">/</span> <span class="ch-sep">/</span>
<span>{displayChapter?.name}</span> <span>{displayChapter?.name}</span>
</span> </span>
<span class="page-label">{$pageNumber} / {visibleChunkLastPage || "…"}</span> <span class="page-label">{pageNumber} / {visibleChunkLastPage || "…"}</span>
<button class="icon-btn" on:click={() => { if (adjacent.next) { maybeMarkCurrentRead(); openReader(adjacent.next, $activeChapterList); } }} disabled={!adjacent.next}> <button class="icon-btn" onclick={() => { if (adjacent.next) { maybeMarkCurrentRead(); openReader(adjacent.next, activeChapterList); } }} disabled={!adjacent.next}>
<CaretRight size={14} weight="light" /> <CaretRight size={14} weight="light" />
</button> </button>
<div class="top-sep"></div> <div class="top-sep"></div>
<button class="mode-btn" on:click={cycleFit}> <button class="mode-btn" onclick={cycleFit}>
{#if fit === "width"}<ArrowsLeftRight size={14} weight="light" /> {#if fit === "width"}<ArrowsLeftRight size={14} weight="light" />
{:else if fit === "height"}<ArrowsVertical size={14} weight="light" /> {:else if fit === "height"}<ArrowsVertical size={14} weight="light" />
{:else if fit === "screen"}<ArrowsIn size={14} weight="light" /> {:else if fit === "screen"}<ArrowsIn size={14} weight="light" />
@@ -552,43 +505,42 @@
<span class="mode-label">{fitLabel}</span> <span class="mode-label">{fitLabel}</span>
</button> </button>
<div class="zoom-wrap"> <div class="zoom-wrap">
<button class="zoom-btn" on:click={() => zoomOpen = !zoomOpen}>{Math.round((maxW / 900) * 100)}%</button> <button class="zoom-btn" onclick={() => zoomOpen = !zoomOpen}>{Math.round((maxW / 900) * 100)}%</button>
{#if zoomOpen} {#if zoomOpen}
<div class="zoom-popover"> <div class="zoom-popover">
<input type="range" class="zoom-slider" min={200} max={2400} step={50} value={maxW} <input type="range" class="zoom-slider" min={200} max={2400} step={50} value={maxW}
on:input={(e) => updateSettings({ maxPageWidth: Number(e.currentTarget.value) })} /> oninput={(e) => updateSettings({ maxPageWidth: Number(e.currentTarget.value) })} />
<button class="zoom-reset" on:click={() => updateSettings({ maxPageWidth: 900 })}>{Math.round((maxW / 900) * 100)}%</button> <button class="zoom-reset" onclick={() => updateSettings({ maxPageWidth: 900 })}>{Math.round((maxW / 900) * 100)}%</button>
</div> </div>
{/if} {/if}
</div> </div>
<button class="mode-btn" class:active={rtl} on:click={() => updateSettings({ readingDirection: rtl ? "ltr" : "rtl" })}> <button class="mode-btn" class:active={rtl} onclick={() => updateSettings({ readingDirection: rtl ? "ltr" : "rtl" })}>
<ArrowsLeftRight size={14} weight="light" /><span class="mode-label">{rtl ? "RTL" : "LTR"}</span> <ArrowsLeftRight size={14} weight="light" /><span class="mode-label">{rtl ? "RTL" : "LTR"}</span>
</button> </button>
<button class="mode-btn" on:click={cycleStyle}> <button class="mode-btn" onclick={cycleStyle}>
{#if style === "single"}<Square size={14} weight="light" />{:else}<Rows size={14} weight="light" />{/if} {#if style === "single"}<Square size={14} weight="light" />{:else}<Rows size={14} weight="light" />{/if}
<span class="mode-label">{styleLabel}</span> <span class="mode-label">{styleLabel}</span>
</button> </button>
{#if style !== "single"} {#if style !== "single"}
<button class="mode-btn" class:active={$settings.pageGap} on:click={() => updateSettings({ pageGap: !$settings.pageGap })}> <button class="mode-btn" class:active={settings.pageGap} onclick={() => updateSettings({ pageGap: !settings.pageGap })}>
<span class="mode-label">Gap</span> <span class="mode-label">Gap</span>
</button> </button>
{/if} {/if}
{#if style === "longstrip"} {#if style === "longstrip"}
<button class="mode-btn" class:active={autoNext} on:click={() => updateSettings({ autoNextChapter: !autoNext })}> <button class="mode-btn" class:active={autoNext} onclick={() => updateSettings({ autoNextChapter: !autoNext })}>
<span class="mode-label">Auto</span> <span class="mode-label">Auto</span>
</button> </button>
{/if} {/if}
{#if !autoNext} {#if !autoNext}
<button class="mode-btn" class:active={markOnNext} on:click={() => updateSettings({ markReadOnNext: !markOnNext })}> <button class="mode-btn" class:active={markOnNext} onclick={() => updateSettings({ markReadOnNext: !markOnNext })}>
<span class="mode-label">Mk.Read</span> <span class="mode-label">Mk.Read</span>
</button> </button>
{/if} {/if}
<button class="mode-btn" on:click={() => dlOpen = true}> <button class="mode-btn" onclick={() => dlOpen = true}>
<Download size={14} weight="light" /> <Download size={14} weight="light" />
</button> </button>
</div> </div>
<div <div
bind:this={containerEl} bind:this={containerEl}
class="viewer" class="viewer"
@@ -596,9 +548,9 @@
style="--max-page-width:{maxW}px" style="--max-page-width:{maxW}px"
role="presentation" role="presentation"
tabindex="-1" tabindex="-1"
on:click={handleTap} onclick={handleTap}
on:wheel={(e) => { if (e.ctrlKey) e.preventDefault(); }} onwheel={(e) => { if (e.ctrlKey) e.preventDefault(); }}
on:keydown={(e) => { if (e.key === " " && style === "longstrip") { e.preventDefault(); containerEl?.scrollBy({ top: containerEl.clientHeight * 0.85, behavior: "smooth" }); } }} onkeydown={(e) => { if (e.key === " " && style === "longstrip") { e.preventDefault(); containerEl?.scrollBy({ top: containerEl.clientHeight * 0.85, behavior: "smooth" }); } }}
> >
{#if loading} {#if loading}
<div class="center-overlay"><CircleNotch size={20} weight="light" class="anim-spin" style="color:var(--text-faint)" /></div> <div class="center-overlay"><CircleNotch size={20} weight="light" class="anim-spin" style="color:var(--text-faint)" /></div>
@@ -610,17 +562,7 @@
{#if style === "longstrip"} {#if style === "longstrip"}
{#each stripToRender as chunk} {#each stripToRender as chunk}
{#each chunk.urls as url, i} {#each chunk.urls as url, i}
<img <img src={url} alt="{chunk.chapterName} – Page {i + 1}" data-local-page={i + 1} data-chapter={chunk.chapterId} data-total={chunk.urls.length} class="{imgCls}{settings.pageGap ? ' strip-gap' : ''}" loading={i < 3 ? "eager" : "lazy"} decoding="async" height="1000" />
src={url}
alt="{chunk.chapterName} – Page {i + 1}"
data-local-page={i + 1}
data-chapter={chunk.chapterId}
data-total={chunk.urls.length}
class="{imgCls}{$settings.pageGap ? ' strip-gap' : ''}"
loading={i < 3 ? "eager" : "lazy"}
decoding="async"
height="1000"
/>
{/each} {/each}
{/each} {/each}
<div bind:this={sentinelEl} style="height:1px;flex-shrink:0;overflow-anchor:none"></div> <div bind:this={sentinelEl} style="height:1px;flex-shrink:0;overflow-anchor:none"></div>
@@ -628,52 +570,48 @@
{#if style === "double" && pageGroups.length} {#if style === "double" && pageGroups.length}
<div class="double-wrap"> <div class="double-wrap">
{#each currentGroup as pg} {#each currentGroup as pg}
<img src={$pageUrls[pg - 1]} alt="Page {pg}" class="{imgCls} page-half {pg === currentGroup[0] ? 'gap-left' : 'gap-right'}" decoding="async" /> <img src={pageUrls[pg - 1]} alt="Page {pg}" class="{imgCls} page-half {pg === currentGroup[0] ? 'gap-left' : 'gap-right'}" decoding="async" />
{/each} {/each}
</div> </div>
{:else} {:else}
<img src={$pageUrls[$pageNumber - 1]} alt="Page {$pageNumber}" class={imgCls} decoding="async" style="transition:opacity 0.1s ease" /> <img src={pageUrls[pageNumber - 1]} alt="Page {pageNumber}" class={imgCls} decoding="async" style="transition:opacity 0.1s ease" />
{/if} {/if}
{/if} {/if}
</div> </div>
<div class="bottombar" class:hidden={!uiVisible}> <div class="bottombar" class:hidden={!uiVisible}>
<button class="nav-btn" on:click={goPrev} <button class="nav-btn" onclick={goPrev} disabled={loading || (style === "longstrip" ? !adjacent.prev : (pageNumber === 1 && !adjacent.prev))}>
disabled={loading || (style === "longstrip" ? !adjacent.prev : ($pageNumber === 1 && !adjacent.prev))}>
<ArrowLeft size={13} weight="light" /> <ArrowLeft size={13} weight="light" />
</button> </button>
<button class="nav-btn" on:click={goNext} <button class="nav-btn" onclick={goNext} disabled={loading || (style === "longstrip" ? !adjacent.next : (pageNumber === lastPage && !adjacent.next))}>
disabled={loading || (style === "longstrip" ? !adjacent.next : ($pageNumber === lastPage && !adjacent.next))}>
<ArrowRight size={13} weight="light" /> <ArrowRight size={13} weight="light" />
</button> </button>
</div> </div>
{#if dlOpen && activeChapter}
{#if dlOpen && $activeChapter} {@const queueable = adjacent.remaining.filter(c => !c.isDownloaded)}
{@const queueable = adjacent.remaining.filter((c) => !c.isDownloaded)} <div class="dl-backdrop" role="presentation" onclick={() => dlOpen = false}>
<div class="dl-backdrop" role="presentation" on:click={() => dlOpen = false}> <div class="dl-modal" role="presentation" onclick|stopPropagation>
<div class="dl-modal" role="presentation" on:click|stopPropagation>
<p class="dl-title">Download</p> <p class="dl-title">Download</p>
<button class="dl-option" disabled={dlBusy || !!$activeChapter.isDownloaded} <button class="dl-option" disabled={dlBusy || !!activeChapter.isDownloaded}
on:click={() => runDl(() => gql(ENQUEUE_DOWNLOAD, { chapterId: $activeChapter!.id }), $activeChapter!.name)}> onclick={() => runDl(() => gql(ENQUEUE_DOWNLOAD, { chapterId: activeChapter!.id }))}>
This chapter This chapter
<span class="dl-sub">{$activeChapter.isDownloaded ? "Already downloaded" : $activeChapter.name}</span> <span class="dl-sub">{activeChapter.isDownloaded ? "Already downloaded" : activeChapter.name}</span>
</button> </button>
<div class="dl-row"> <div class="dl-row">
<button class="dl-option" disabled={dlBusy || queueable.length === 0} <button class="dl-option" disabled={dlBusy || queueable.length === 0}
on:click={() => runDl(() => gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds: queueable.slice(0, nextN).map((c) => c.id) }), `${Math.min(nextN, queueable.length)} chapters queued`)}> onclick={() => runDl(() => gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds: queueable.slice(0, nextN).map(c => c.id) }))}>
Next chapters Next chapters
<span class="dl-sub">{Math.min(nextN, queueable.length)} not yet downloaded</span> <span class="dl-sub">{Math.min(nextN, queueable.length)} not yet downloaded</span>
</button> </button>
<div class="dl-stepper" role="presentation" on:click|stopPropagation> <div class="dl-stepper" role="presentation" onclick|stopPropagation>
<button class="dl-step-btn" on:click={() => nextN = Math.max(1, nextN - 1)} disabled={nextN <= 1}>−</button> <button class="dl-step-btn" onclick={() => nextN = Math.max(1, nextN - 1)} disabled={nextN <= 1}>−</button>
<span class="dl-step-val">{nextN}</span> <span class="dl-step-val">{nextN}</span>
<button class="dl-step-btn" on:click={() => nextN = Math.min(queueable.length || 1, nextN + 1)} disabled={nextN >= queueable.length}>+</button> <button class="dl-step-btn" onclick={() => nextN = Math.min(queueable.length || 1, nextN + 1)} disabled={nextN >= queueable.length}>+</button>
</div> </div>
</div> </div>
<button class="dl-option" disabled={dlBusy || queueable.length === 0} <button class="dl-option" disabled={dlBusy || queueable.length === 0}
on:click={() => runDl(() => gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds: queueable.map((c) => c.id) }), `${queueable.length} chapters queued`)}> onclick={() => runDl(() => gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds: queueable.map(c => c.id) }))}>
All remaining All remaining
<span class="dl-sub">{queueable.length} not yet downloaded</span> <span class="dl-sub">{queueable.length} not yet downloaded</span>
</button> </button>
@@ -683,42 +621,21 @@
</div> </div>
<style> <style>
.root { .root { position: fixed; inset: 0; background: #000; display: flex; flex-direction: column; z-index: var(--z-reader); transform: translateZ(0); will-change: transform; }
position: fixed; inset: 0; background: #000; .topbar { display: flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-3); height: 40px; background: var(--bg-void); border-bottom: 1px solid var(--border-dim); flex-shrink: 0; position: relative; z-index: 2; transition: opacity 0.25s ease; }
display: flex; flex-direction: column;
z-index: var(--z-reader);
transform: translateZ(0); will-change: transform;
}
.topbar {
display: flex; align-items: center; gap: var(--sp-1);
padding: 0 var(--sp-3); height: 40px;
background: var(--bg-void); border-bottom: 1px solid var(--border-dim);
flex-shrink: 0; position: relative; z-index: 2;
transition: opacity 0.25s ease;
}
.topbar.hidden, .bottombar.hidden { opacity: 0; pointer-events: none; } .topbar.hidden, .bottombar.hidden { opacity: 0; pointer-events: none; }
.icon-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); color: var(--text-muted); flex-shrink: 0; transition: color var(--t-base), background var(--t-base); }
.icon-btn {
display: flex; align-items: center; justify-content: center;
width: 28px; height: 28px; border-radius: var(--radius-sm);
color: var(--text-muted); flex-shrink: 0;
transition: color var(--t-base), background var(--t-base);
}
.icon-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-raised); } .icon-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-raised); }
.icon-btn:disabled { opacity: 0.2; cursor: default; } .icon-btn:disabled { opacity: 0.2; cursor: default; }
.ch-label { flex: 1; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-label { flex: 1; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-title { color: var(--text-secondary); font-weight: var(--weight-medium); } .ch-title { color: var(--text-secondary); font-weight: var(--weight-medium); }
.ch-sep { color: var(--text-faint); } .ch-sep { color: var(--text-faint); }
.page-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); flex-shrink: 0; } .page-label { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); flex-shrink: 0; }
.top-sep { width: 1px; height: 16px; background: var(--border-dim); flex-shrink: 0; margin: 0 var(--sp-1); } .top-sep { width: 1px; height: 16px; background: var(--border-dim); flex-shrink: 0; margin: 0 var(--sp-1); }
.mode-btn { display: flex; align-items: center; gap: 4px; padding: 4px var(--sp-2); border-radius: var(--radius-sm); color: var(--text-muted); flex-shrink: 0; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); transition: color var(--t-base), background var(--t-base); } .mode-btn { display: flex; align-items: center; gap: 4px; padding: 4px var(--sp-2); border-radius: var(--radius-sm); color: var(--text-muted); flex-shrink: 0; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); transition: color var(--t-base), background var(--t-base); }
.mode-btn:hover { color: var(--text-primary); background: var(--bg-raised); } .mode-btn:hover { color: var(--text-primary); background: var(--bg-raised); }
.mode-btn.active { color: var(--accent-fg); background: var(--accent-muted); } .mode-btn.active { color: var(--accent-fg); background: var(--accent-muted); }
.mode-label { text-transform: capitalize; } .mode-label { text-transform: capitalize; }
.zoom-wrap { position: relative; flex-shrink: 0; } .zoom-wrap { position: relative; flex-shrink: 0; }
.zoom-btn { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); padding: 4px var(--sp-2); border-radius: var(--radius-sm); min-width: 36px; text-align: center; transition: color var(--t-base), background var(--t-base); } .zoom-btn { font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--text-faint); padding: 4px var(--sp-2); border-radius: var(--radius-sm); min-width: 36px; text-align: center; transition: color var(--t-base), background var(--t-base); }
.zoom-btn:hover { color: var(--text-secondary); background: var(--bg-raised); } .zoom-btn:hover { color: var(--text-secondary); background: var(--bg-raised); }
@@ -727,11 +644,9 @@
.zoom-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-fg); cursor: pointer; } .zoom-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-fg); cursor: pointer; }
.zoom-reset { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); padding: 2px var(--sp-2); border-radius: var(--radius-sm); transition: color var(--t-base), background var(--t-base); } .zoom-reset { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); letter-spacing: var(--tracking-wide); padding: 2px var(--sp-2); border-radius: var(--radius-sm); transition: color var(--t-base), background var(--t-base); }
.zoom-reset:hover { color: var(--text-primary); background: var(--bg-overlay); } .zoom-reset:hover { color: var(--text-primary); background: var(--bg-overlay); }
.viewer { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-overflow-scrolling: touch; position: relative; } .viewer { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-overflow-scrolling: touch; position: relative; }
.viewer.strip { justify-content: flex-start; padding: var(--sp-4) 0; overflow-anchor: auto; } .viewer.strip { justify-content: flex-start; padding: var(--sp-4) 0; overflow-anchor: auto; }
.viewer:focus { outline: none; } .viewer:focus { outline: none; }
.img { display: block; user-select: none; image-rendering: auto; } .img { display: block; user-select: none; image-rendering: auto; }
.img.optimize-contrast { image-rendering: -webkit-optimize-contrast; } .img.optimize-contrast { image-rendering: -webkit-optimize-contrast; }
.fit-width { max-width: var(--max-page-width); width: 100%; height: auto; } .fit-width { max-width: var(--max-page-width); width: 100%; height: auto; }
@@ -739,20 +654,16 @@
.fit-screen { max-width: 100%; max-height: calc(100vh - 80px); object-fit: contain; height: auto; } .fit-screen { max-width: 100%; max-height: calc(100vh - 80px); object-fit: contain; height: auto; }
.fit-original { max-width: none; width: auto; height: auto; } .fit-original { max-width: none; width: auto; height: auto; }
.strip-gap { margin-bottom: 8px; } .strip-gap { margin-bottom: 8px; }
.double-wrap { display: flex; align-items: flex-start; justify-content: center; max-width: calc(var(--max-page-width) * 2); width: 100%; } .double-wrap { display: flex; align-items: flex-start; justify-content: center; max-width: calc(var(--max-page-width) * 2); width: 100%; }
.page-half { flex: 1; min-width: 0; object-fit: contain; } .page-half { flex: 1; min-width: 0; object-fit: contain; }
.gap-left { margin-right: 2px; } .gap-left { margin-right: 2px; }
.gap-right { margin-left: 2px; } .gap-right { margin-left: 2px; }
.center-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .center-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.error-msg { color: var(--color-error); font-size: var(--text-base); } .error-msg { color: var(--color-error); font-size: var(--text-base); }
.bottombar { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-3); border-top: 1px solid var(--border-dim); background: var(--bg-void); flex-shrink: 0; transition: opacity 0.25s ease; } .bottombar { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); padding: var(--sp-3); border-top: 1px solid var(--border-dim); background: var(--bg-void); flex-shrink: 0; transition: opacity 0.25s ease; }
.nav-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); color: var(--text-muted); transition: background var(--t-base), color var(--t-base); } .nav-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); color: var(--text-muted); transition: background var(--t-base), color var(--t-base); }
.nav-btn:hover:not(:disabled) { background: var(--bg-raised); color: var(--text-primary); } .nav-btn:hover:not(:disabled) { background: var(--bg-raised); color: var(--text-primary); }
.nav-btn:disabled { opacity: 0.25; cursor: default; } .nav-btn:disabled { opacity: 0.25; cursor: default; }
.dl-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-reader) + 10); display: flex; align-items: flex-start; justify-content: flex-end; padding: 48px var(--sp-4) 0; } .dl-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-reader) + 10); display: flex; align-items: flex-start; justify-content: flex-end; padding: 48px var(--sp-4) 0; }
.dl-modal { background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-xl); padding: var(--sp-3); min-width: 210px; display: flex; flex-direction: column; gap: var(--sp-1); box-shadow: 0 8px 32px rgba(0,0,0,0.6); animation: scaleIn 0.12s ease both; transform-origin: top right; } .dl-modal { background: var(--bg-raised); border: 1px solid var(--border-base); border-radius: var(--radius-xl); padding: var(--sp-3); min-width: 210px; display: flex; flex-direction: column; gap: var(--sp-1); box-shadow: 0 8px 32px rgba(0,0,0,0.6); animation: scaleIn 0.12s ease both; transform-origin: top right; }
.dl-title { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding: 2px var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--border-dim); margin-bottom: var(--sp-1); } .dl-title { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding: 2px var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--border-dim); margin-bottom: var(--sp-1); }
@@ -766,4 +677,5 @@
.dl-step-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-raised); } .dl-step-btn:hover:not(:disabled) { color: var(--text-primary); background: var(--bg-raised); }
.dl-step-btn:disabled { opacity: 0.25; cursor: default; } .dl-step-btn:disabled { opacity: 0.25; cursor: default; }
.dl-step-val { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-secondary); min-width: 24px; text-align: center; letter-spacing: var(--tracking-wide); } .dl-step-val { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-secondary); min-width: 24px; text-align: center; letter-spacing: var(--tracking-wide); }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
</style> </style>
src/lib/queries.ts
+9
View File
@@ -10,7 +10,16 @@ export const GET_LIBRARY = `
inLibrary inLibrary
downloadCount downloadCount
unreadCount unreadCount
description
status
author
artist
genre genre
source {
id
name
displayName
}
chapters { chapters {
totalCount totalCount
} }
src/routes.ts
+3 -3
View File
@@ -1,8 +1,8 @@
import Library from "./components/pages/Library.svelte"; import Library from "./components/pages/Library.svelte";
import Search from "./components/search/Search.svelte"; import Search from "./components/pages/Search.svelte";
import History from "./components/history/History.svelte"; import History from "./components/pages/History.svelte";
import Explore from "./components/pages/Explore.svelte"; import Explore from "./components/pages/Explore.svelte";
import Downloads from "./components/downloads/Downloads.svelte"; import Downloads from "./components/pages/Downloads.svelte";
import Extensions from "./components/pages/Extensions.svelte"; import Extensions from "./components/pages/Extensions.svelte";
export default { export default {
src/store/index.ts
+271 -203
View File
@@ -1,4 +1,3 @@
import { writable, get } from "svelte/store";
import type { Manga, Chapter, Source } from "../lib/types"; import type { Manga, Chapter, Source } from "../lib/types";
import { DEFAULT_KEYBINDS, type Keybinds } from "../lib/keybinds"; import { DEFAULT_KEYBINDS, type Keybinds } from "../lib/keybinds";
@@ -13,109 +12,175 @@ export type Theme = "dark" | "high-contrast" | "light" | "light-contr
export const COMPLETED_FOLDER_ID = "completed"; export const COMPLETED_FOLDER_ID = "completed";
export interface HistoryEntry { export interface HistoryEntry {
mangaId: number; mangaTitle: string; thumbnailUrl: string; mangaId: number;
chapterId: number; chapterName: string; pageNumber: number; readAt: number; mangaTitle: string;
thumbnailUrl: string;
chapterId: number;
chapterName: string;
pageNumber: number;
readAt: number;
} }
export interface ReadingStats { export interface ReadingStats {
totalChaptersRead: number; totalChaptersRead: number;
totalMangaRead: number; totalMangaRead: number;
totalMinutesRead: number; totalMinutesRead: number;
firstReadAt: number; firstReadAt: number;
lastReadAt: number; lastReadAt: number;
currentStreakDays: number; currentStreakDays: number;
longestStreakDays: number; longestStreakDays: number;
lastStreakDate: string; lastStreakDate: string;
} }
const AVG_MIN_PER_CHAPTER = 5; const AVG_MIN_PER_CHAPTER = 5;
export const DEFAULT_READING_STATS: ReadingStats = { export const DEFAULT_READING_STATS: ReadingStats = {
totalChaptersRead: 0, totalMangaRead: 0, totalMinutesRead: 0, totalChaptersRead: 0,
firstReadAt: 0, lastReadAt: 0, totalMangaRead: 0,
currentStreakDays: 0, longestStreakDays: 0, lastStreakDate: "", totalMinutesRead: 0,
firstReadAt: 0,
lastReadAt: 0,
currentStreakDays: 0,
longestStreakDays: 0,
lastStreakDate: "",
}; };
export interface Toast { export interface Toast {
id: string; kind: "success" | "error" | "info" | "download"; id: string;
title: string; body?: string; duration?: number; kind: "success" | "error" | "info" | "download";
title: string;
body?: string;
duration?: number;
} }
export interface ActiveDownload { chapterId: number; mangaId: number; progress: number } export interface ActiveDownload {
chapterId: number;
mangaId: number;
progress: number;
}
export interface Folder { export interface Folder {
id: string; name: string; mangaIds: number[]; showTab: boolean; id: string;
system?: boolean; name: string;
mangaIds: number[];
showTab: boolean;
system?: boolean;
} }
export interface Settings { export interface Settings {
pageStyle: PageStyle; readingDirection: ReadingDirection; fitMode: FitMode; pageStyle: PageStyle;
maxPageWidth: number; pageGap: boolean; optimizeContrast: boolean; readingDirection: ReadingDirection;
offsetDoubleSpreads: boolean; preloadPages: number; autoMarkRead: boolean; fitMode: FitMode;
autoNextChapter: boolean; libraryCropCovers: boolean; libraryPageSize: number; maxPageWidth: number;
showNsfw: boolean; chapterSortDir: ChapterSortDir; chapterPageSize: number; pageGap: boolean;
uiScale: number; compactSidebar: boolean; gpuAcceleration: boolean; optimizeContrast: boolean;
serverUrl: string; serverBinary: string; autoStartServer: boolean; offsetDoubleSpreads: boolean;
preferredExtensionLang: string; keybinds: Keybinds; idleTimeoutMin?: number; preloadPages: number;
splashCards?: boolean; storageLimitGb: number | null; folders: Folder[]; autoMarkRead: boolean;
markReadOnNext: boolean; readerDebounceMs: number; theme: Theme; autoNextChapter: boolean;
libraryBranches: boolean; libraryCropCovers: boolean;
renderLimit: number; libraryPageSize: number;
heroSlots: (number | null)[]; showNsfw: boolean;
/** chapterSortDir: ChapterSortDir;
* User-defined manga links — manually registered "same series" pairs. chapterPageSize: number;
* Key: mangaId, Value: array of mangaIds this entry is linked to. uiScale: number;
* Links are bidirectional at lookup time; only stored in one direction. compactSidebar: boolean;
*/ gpuAcceleration: boolean;
mangaLinks: Record<number, number[]>; serverUrl: string;
serverBinary: string;
autoStartServer: boolean;
preferredExtensionLang: string;
keybinds: Keybinds;
idleTimeoutMin?: number;
splashCards?: boolean;
storageLimitGb: number | null;
folders: Folder[];
markReadOnNext: boolean;
readerDebounceMs: number;
theme: Theme;
libraryBranches: boolean;
renderLimit: number;
heroSlots: (number | null)[];
mangaLinks: Record<number, number[]>;
} }
const COMPLETED_FOLDER_DEFAULT: Folder = { const COMPLETED_FOLDER_DEFAULT: Folder = {
id: COMPLETED_FOLDER_ID, name: "Completed", mangaIds: [], showTab: true, system: true, id: COMPLETED_FOLDER_ID,
name: "Completed",
mangaIds: [],
showTab: true,
system: true,
}; };
export const DEFAULT_SETTINGS: Settings = { export const DEFAULT_SETTINGS: Settings = {
pageStyle: "longstrip", readingDirection: "ltr", fitMode: "width", pageStyle: "longstrip",
maxPageWidth: 900, pageGap: true, optimizeContrast: false, readingDirection: "ltr",
offsetDoubleSpreads: false, preloadPages: 3, autoMarkRead: true, fitMode: "width",
autoNextChapter: true, libraryCropCovers: true, libraryPageSize: 48, maxPageWidth: 900,
showNsfw: false, chapterSortDir: "desc", chapterPageSize: 25, pageGap: true,
uiScale: 100, compactSidebar: false, gpuAcceleration: true, optimizeContrast: false,
serverUrl: "http://localhost:4567", serverBinary: "tachidesk-server", offsetDoubleSpreads: false,
autoStartServer: true, preferredExtensionLang: "en", keybinds: DEFAULT_KEYBINDS, preloadPages: 3,
idleTimeoutMin: 5, splashCards: true, storageLimitGb: null, autoMarkRead: true,
folders: [COMPLETED_FOLDER_DEFAULT], autoNextChapter: true,
markReadOnNext: true, readerDebounceMs: 120, theme: "dark", libraryCropCovers: true,
libraryBranches: true, renderLimit: 48, libraryPageSize: 48,
heroSlots: [null, null, null, null], showNsfw: false,
mangaLinks: {}, chapterSortDir: "desc",
chapterPageSize: 25,
uiScale: 100,
compactSidebar: false,
gpuAcceleration: true,
serverUrl: "http://localhost:4567",
serverBinary: "tachidesk-server",
autoStartServer: true,
preferredExtensionLang: "en",
keybinds: DEFAULT_KEYBINDS,
idleTimeoutMin: 5,
splashCards: true,
storageLimitGb: null,
folders: [COMPLETED_FOLDER_DEFAULT],
markReadOnNext: true,
readerDebounceMs: 120,
theme: "dark",
libraryBranches: true,
renderLimit: 48,
heroSlots: [null, null, null, null],
mangaLinks: {},
}; };
// ── Persistence ─────────────────────────────────────────────────────────────── // ── Persistence ───────────────────────────────────────────────────────────────
function loadPersisted() { function loadPersisted(): any {
try { const raw = localStorage.getItem("moku-store"); return raw ? JSON.parse(raw) : null; } try {
catch { return null; } const raw = localStorage.getItem("moku-store");
return raw ? JSON.parse(raw) : null;
} catch {
return null;
}
} }
function persist(key: string, value: unknown) { function persist(patch: Record<string, unknown>) {
try { localStorage.setItem(key, JSON.stringify(value)); } catch {} try {
const current = loadPersisted() ?? {};
localStorage.setItem("moku-store", JSON.stringify({ ...current, ...patch }));
} catch {}
} }
const saved = loadPersisted(); const saved = loadPersisted();
function mergeSettings(saved: any): Settings { function mergeSettings(saved: any): Settings {
const userFolders: Folder[] = saved?.settings?.folders ?? []; const userFolders: Folder[] = saved?.settings?.folders ?? [];
const existingCompleted = userFolders.find(f => f.id === COMPLETED_FOLDER_ID); const existingCompleted = userFolders.find(f => f.id === COMPLETED_FOLDER_ID);
const completedFolder: Folder = existingCompleted const completedFolder: Folder = existingCompleted
? { ...COMPLETED_FOLDER_DEFAULT, mangaIds: existingCompleted.mangaIds } ? { ...COMPLETED_FOLDER_DEFAULT, mangaIds: existingCompleted.mangaIds }
: COMPLETED_FOLDER_DEFAULT; : COMPLETED_FOLDER_DEFAULT;
const otherFolders = userFolders.filter(f => f.id !== COMPLETED_FOLDER_ID); const otherFolders = userFolders.filter(f => f.id !== COMPLETED_FOLDER_ID);
return { return {
...DEFAULT_SETTINGS, ...DEFAULT_SETTINGS,
...saved?.settings, ...saved?.settings,
folders: [completedFolder, ...otherFolders], folders: [completedFolder, ...otherFolders],
keybinds: { ...DEFAULT_KEYBINDS, ...saved?.settings?.keybinds }, keybinds: { ...DEFAULT_KEYBINDS, ...saved?.settings?.keybinds },
heroSlots: saved?.settings?.heroSlots ?? [null, null, null, null], heroSlots: saved?.settings?.heroSlots ?? [null, null, null, null],
mangaLinks: saved?.settings?.mangaLinks ?? {}, mangaLinks: saved?.settings?.mangaLinks ?? {},
}; };
@@ -125,38 +190,52 @@ function mergeStats(saved: any): ReadingStats {
return { ...DEFAULT_READING_STATS, ...saved?.readingStats }; return { ...DEFAULT_READING_STATS, ...saved?.readingStats };
} }
// ── Stores ──────────────────────────────────────────────────────────────────── // ── State ─────────────────────────────────────────────────────────────────────
export const navPage = writable<NavPage>(saved?.navPage ?? "home"); export let navPage: NavPage = $state(saved?.navPage ?? "home");
export const libraryFilter = writable<LibraryFilter>(saved?.libraryFilter ?? "library"); export let libraryFilter: LibraryFilter = $state(saved?.libraryFilter ?? "library");
export const history = writable<HistoryEntry[]>(saved?.history ?? []); export let history: HistoryEntry[] = $state(saved?.history ?? []);
export const readingStats = writable<ReadingStats>(mergeStats(saved)); export let readingStats: ReadingStats = $state(mergeStats(saved));
export const settings = writable<Settings>(mergeSettings(saved)); export let settings: Settings = $state(mergeSettings(saved));
export const genreFilter = writable<string>(""); export let genreFilter: string = $state("");
export const searchPrefill = writable<string>(""); export let searchPrefill: string = $state("");
export const activeManga = writable<Manga | null>(null); export let activeManga: Manga | null = $state(null);
export const previewManga = writable<Manga | null>(null); export let previewManga: Manga | null = $state(null);
export const activeSource = writable<Source | null>(null); export let activeSource: Source | null = $state(null);
export const pageUrls = writable<string[]>([]); export let pageUrls: string[] = $state([]);
export const pageNumber = writable<number>(1); export let pageNumber: number = $state(1);
export const libraryTagFilter = writable<string[]>([]); export let libraryTagFilter: string[] = $state([]);
export const settingsOpen = writable<boolean>(false); export let settingsOpen: boolean = $state(false);
export const activeDownloads = writable<ActiveDownload[]>([]); export let activeDownloads: ActiveDownload[] = $state([]);
export const toasts = writable<Toast[]>([]); export let toasts: Toast[] = $state([]);
export const activeChapter = writable<Chapter | null>(null); export let activeChapter: Chapter | null = $state(null);
export const activeChapterList = writable<Chapter[]>([]); export let activeChapterList: Chapter[] = $state([]);
// ── Persistence effects ───────────────────────────────────────────────────────
$effect.root(() => {
$effect(() => { persist({ navPage }); });
$effect(() => { persist({ libraryFilter }); });
$effect(() => { persist({ history }); });
$effect(() => { persist({ readingStats }); });
$effect(() => { persist({ settings }); });
});
// ── Reader ──────────────────────────────────────────────────────────────────── // ── Reader ────────────────────────────────────────────────────────────────────
export function openReader(chapter: Chapter, chapterList: Chapter[]) { export function openReader(chapter: Chapter, chapterList: Chapter[]) {
activeChapter.set(chapter); activeChapterList.set(chapterList); activeChapter = chapter;
pageUrls.set([]); pageNumber.set(1); activeChapterList = chapterList;
pageUrls = [];
pageNumber = 1;
} }
export function closeReader() { export function closeReader() {
activeChapter.set(null); activeChapterList.set([]); activeChapter = null;
pageUrls.set([]); pageNumber.set(1); activeChapterList = [];
pageUrls = [];
pageNumber = 1;
} }
// ── History ─────────────────────────────────────────────────────────────────── // ── History ───────────────────────────────────────────────────────────────────
@@ -167,157 +246,138 @@ function todayStr(): string {
} }
export function addHistory(entry: HistoryEntry) { export function addHistory(entry: HistoryEntry) {
history.update((h) => { const isNewChapter = !history.some(x => x.chapterId === entry.chapterId);
if (h[0]?.chapterId === entry.chapterId) {
const updated = [...h];
updated[0] = { ...updated[0], pageNumber: entry.pageNumber, readAt: entry.readAt };
return updated;
}
return [entry, ...h.filter((x) => x.chapterId !== entry.chapterId)].slice(0, 300);
});
readingStats.update((s) => { if (history[0]?.chapterId === entry.chapterId) {
const currentH = get(history); history[0] = { ...history[0], pageNumber: entry.pageNumber, readAt: entry.readAt };
const uniqueChapters = new Set(currentH.map(e => e.chapterId)); } else {
const uniqueManga = new Set(currentH.map(e => e.mangaId)); history = [entry, ...history.filter(x => x.chapterId !== entry.chapterId)].slice(0, 300);
const isNewChapter = !uniqueChapters.has(entry.chapterId) || currentH[0]?.chapterId !== entry.chapterId; }
const today = todayStr(); const uniqueChapters = new Set(history.map(e => e.chapterId));
let { currentStreakDays, longestStreakDays, lastStreakDate } = s; const uniqueManga = new Set(history.map(e => e.mangaId));
if (lastStreakDate !== today) {
const yesterday = new Date(); yesterday.setDate(yesterday.getDate() - 1);
const yStr = `${yesterday.getFullYear()}-${String(yesterday.getMonth() + 1).padStart(2, "0")}-${String(yesterday.getDate()).padStart(2, "0")}`;
currentStreakDays = lastStreakDate === yStr ? currentStreakDays + 1 : 1;
longestStreakDays = Math.max(longestStreakDays, currentStreakDays);
lastStreakDate = today;
}
return { const today = todayStr();
totalChaptersRead: Math.max(s.totalChaptersRead, uniqueChapters.size), let { currentStreakDays, longestStreakDays, lastStreakDate } = readingStats;
totalMangaRead: Math.max(s.totalMangaRead, uniqueManga.size), if (lastStreakDate !== today) {
totalMinutesRead: s.totalMinutesRead + (isNewChapter ? AVG_MIN_PER_CHAPTER : 0), const yesterday = new Date();
firstReadAt: s.firstReadAt === 0 ? entry.readAt : s.firstReadAt, yesterday.setDate(yesterday.getDate() - 1);
lastReadAt: entry.readAt, const yStr = `${yesterday.getFullYear()}-${String(yesterday.getMonth() + 1).padStart(2, "0")}-${String(yesterday.getDate()).padStart(2, "0")}`;
currentStreakDays, longestStreakDays, lastStreakDate, currentStreakDays = lastStreakDate === yStr ? currentStreakDays + 1 : 1;
}; longestStreakDays = Math.max(longestStreakDays, currentStreakDays);
}); lastStreakDate = today;
}
readingStats = {
totalChaptersRead: Math.max(readingStats.totalChaptersRead, uniqueChapters.size),
totalMangaRead: Math.max(readingStats.totalMangaRead, uniqueManga.size),
totalMinutesRead: readingStats.totalMinutesRead + (isNewChapter ? AVG_MIN_PER_CHAPTER : 0),
firstReadAt: readingStats.firstReadAt === 0 ? entry.readAt : readingStats.firstReadAt,
lastReadAt: entry.readAt,
currentStreakDays,
longestStreakDays,
lastStreakDate,
};
} }
export function clearHistory() { history.set([]); } export function clearHistory() {
history = [];
}
export function clearHistoryForManga(mangaId: number) {
history = history.filter(x => x.mangaId !== mangaId);
}
export function wipeAllData() {
history = [];
readingStats = { ...DEFAULT_READING_STATS };
settings = { ...settings, folders: [COMPLETED_FOLDER_DEFAULT], heroSlots: [null, null, null, null], mangaLinks: {} };
}
// ── Completed manga ─────────────────────────────────────────────────────────── // ── Completed manga ───────────────────────────────────────────────────────────
export function markMangaCompleted(mangaId: number) { export function markMangaCompleted(mangaId: number) {
settings.update((s) => { let folders = settings.folders.map(f => {
let folders = [...s.folders]; if (f.id !== COMPLETED_FOLDER_ID) return f;
const idx = folders.findIndex(f => f.id === COMPLETED_FOLDER_ID); if (f.mangaIds.includes(mangaId)) return f;
if (idx >= 0) { return { ...f, mangaIds: [...f.mangaIds, mangaId] };
if (folders[idx].mangaIds.includes(mangaId)) return s;
folders[idx] = { ...folders[idx], mangaIds: [...folders[idx].mangaIds, mangaId] };
} else {
folders = [{ ...COMPLETED_FOLDER_DEFAULT, mangaIds: [mangaId] }, ...folders];
}
return { ...s, folders };
}); });
if (!settings.folders.find(f => f.id === COMPLETED_FOLDER_ID)) {
folders = [{ ...COMPLETED_FOLDER_DEFAULT, mangaIds: [mangaId] }, ...folders];
}
settings = { ...settings, folders };
} }
export function unmarkMangaCompleted(mangaId: number) { export function unmarkMangaCompleted(mangaId: number) {
settings.update((s) => ({ settings = {
...s, ...settings,
folders: s.folders.map(f => folders: settings.folders.map(f =>
f.id === COMPLETED_FOLDER_ID f.id === COMPLETED_FOLDER_ID
? { ...f, mangaIds: f.mangaIds.filter(id => id !== mangaId) } ? { ...f, mangaIds: f.mangaIds.filter(id => id !== mangaId) }
: f : f
), ),
})); };
} }
export function isCompleted(mangaId: number): boolean { export function isCompleted(mangaId: number): boolean {
return get(settings).folders return settings.folders.find(f => f.id === COMPLETED_FOLDER_ID)?.mangaIds.includes(mangaId) ?? false;
.find(f => f.id === COMPLETED_FOLDER_ID)
?.mangaIds.includes(mangaId) ?? false;
} }
/**
* Called from SeriesDetail after marking chapters read.
* If ALL chapters are read, auto-adds to the Completed folder.
* If NOT all chapters are read, removes from Completed (handles un-read).
* Pure function — no UI side effects.
*/
export function checkAndMarkCompleted(mangaId: number, chapters: Chapter[]) { export function checkAndMarkCompleted(mangaId: number, chapters: Chapter[]) {
if (chapters.length === 0) return; if (!chapters.length) return;
const allRead = chapters.every(c => c.isRead); if (chapters.every(c => c.isRead)) markMangaCompleted(mangaId);
if (allRead) markMangaCompleted(mangaId);
else unmarkMangaCompleted(mangaId); else unmarkMangaCompleted(mangaId);
} }
// ── Manga links ("same series" user overrides) ──────────────────────────────── // ── Manga links ───────────────────────────────────────────────────────────────
/**
* Link two manga as "same series". Bidirectional — looking up either id
* will return the other. Idempotent.
*/
export function linkManga(idA: number, idB: number) { export function linkManga(idA: number, idB: number) {
if (idA === idB) return; if (idA === idB) return;
settings.update(s => { const links = { ...settings.mangaLinks };
const links = { ...s.mangaLinks }; links[idA] = [...new Set([...(links[idA] ?? []), idB])];
links[idA] = [...new Set([...(links[idA] ?? []), idB])]; links[idB] = [...new Set([...(links[idB] ?? []), idA])];
links[idB] = [...new Set([...(links[idB] ?? []), idA])]; settings = { ...settings, mangaLinks: links };
return { ...s, mangaLinks: links };
});
} }
/**
* Remove a link between two manga.
*/
export function unlinkManga(idA: number, idB: number) { export function unlinkManga(idA: number, idB: number) {
settings.update(s => { const links = { ...settings.mangaLinks };
const links = { ...s.mangaLinks }; links[idA] = (links[idA] ?? []).filter(id => id !== idB);
links[idA] = (links[idA] ?? []).filter(id => id !== idB); links[idB] = (links[idB] ?? []).filter(id => id !== idA);
links[idB] = (links[idB] ?? []).filter(id => id !== idA); if (!links[idA].length) delete links[idA];
if (!links[idA].length) delete links[idA]; if (!links[idB].length) delete links[idB];
if (!links[idB].length) delete links[idB]; settings = { ...settings, mangaLinks: links };
return { ...s, mangaLinks: links };
});
} }
/**
* Returns all mangaIds linked to a given mangaId (direct links only, not transitive).
*/
export function getLinkedMangaIds(mangaId: number): number[] { export function getLinkedMangaIds(mangaId: number): number[] {
return get(settings).mangaLinks[mangaId] ?? []; return settings.mangaLinks[mangaId] ?? [];
} }
// ── Hero slots ──────────────────────────────────────────────────────────────── // ── Hero slots ────────────────────────────────────────────────────────────────
/**
* Pin a manga to a hero slot (indices 1-3). Index 0 is always auto.
* Pass null to unpin and revert to auto (recent history).
*/
export function setHeroSlot(index: 1 | 2 | 3, mangaId: number | null) { export function setHeroSlot(index: 1 | 2 | 3, mangaId: number | null) {
settings.update(s => { const slots = [...(settings.heroSlots ?? [null, null, null, null])];
const slots = [...(s.heroSlots ?? [null, null, null, null])]; slots[index] = mangaId;
slots[index] = mangaId; settings = { ...settings, heroSlots: slots };
return { ...s, heroSlots: slots };
});
} }
// ── Toasts ──────────────────────────────────────────────────────────────────── // ── Toasts ────────────────────────────────────────────────────────────────────
export function addToast(toast: Omit<Toast, "id">) { export function addToast(toast: Omit<Toast, "id">) {
toasts.update((t) => [...t, { ...toast, id: Math.random().toString(36).slice(2) }].slice(-5)); toasts = [...toasts, { ...toast, id: Math.random().toString(36).slice(2) }].slice(-5);
} }
export function dismissToast(id: string) { export function dismissToast(id: string) {
toasts.update((t) => t.filter((x) => x.id !== id)); toasts = toasts.filter(x => x.id !== id);
} }
// ── Settings ────────────────────────────────────────────────────────────────── // ── Settings ──────────────────────────────────────────────────────────────────
export function updateSettings(patch: Partial<Settings>) { export function updateSettings(patch: Partial<Settings>) {
settings.update((s) => ({ ...s, ...patch })); settings = { ...settings, ...patch };
} }
export function resetKeybinds() { export function resetKeybinds() {
settings.update((s) => ({ ...s, keybinds: DEFAULT_KEYBINDS })); settings = { ...settings, keybinds: DEFAULT_KEYBINDS };
} }
// ── Folders ─────────────────────────────────────────────────────────────────── // ── Folders ───────────────────────────────────────────────────────────────────
@@ -326,40 +386,48 @@ const genId = () => Math.random().toString(36).slice(2, 10);
export function addFolder(name: string): string { export function addFolder(name: string): string {
const id = genId(); const id = genId();
settings.update((s) => ({ ...s, folders: [...s.folders, { id, name: name.trim(), mangaIds: [], showTab: false }] })); settings = { ...settings, folders: [...settings.folders, { id, name: name.trim(), mangaIds: [], showTab: false }] };
return id; return id;
} }
export function removeFolder(id: string) { export function removeFolder(id: string) {
settings.update((s) => ({ ...s, folders: s.folders.filter(f => f.id !== id || f.system) })); settings = { ...settings, folders: settings.folders.filter(f => f.id !== id || f.system) };
} }
export function renameFolder(id: string, name: string) { export function renameFolder(id: string, name: string) {
settings.update((s) => ({ ...s, folders: s.folders.map(f => f.id === id && !f.system ? { ...f, name: name.trim() } : f) })); settings = {
...settings,
folders: settings.folders.map(f => f.id === id && !f.system ? { ...f, name: name.trim() } : f),
};
} }
export function toggleFolderTab(id: string) { export function toggleFolderTab(id: string) {
settings.update((s) => ({ ...s, folders: s.folders.map(f => f.id === id ? { ...f, showTab: !f.showTab } : f) })); settings = {
...settings,
folders: settings.folders.map(f => f.id === id ? { ...f, showTab: !f.showTab } : f),
};
} }
export function assignMangaToFolder(folderId: string, mangaId: number) { export function assignMangaToFolder(folderId: string, mangaId: number) {
settings.update((s) => ({ settings = {
...s, folders: s.folders.map(f => ...settings,
f.id === folderId && !f.mangaIds.includes(mangaId) ? { ...f, mangaIds: [...f.mangaIds, mangaId] } : f folders: settings.folders.map(f =>
f.id === folderId && !f.mangaIds.includes(mangaId)
? { ...f, mangaIds: [...f.mangaIds, mangaId] }
: f
), ),
})); };
} }
export function removeMangaFromFolder(folderId: string, mangaId: number) { export function removeMangaFromFolder(folderId: string, mangaId: number) {
settings.update((s) => ({ settings = {
...s, folders: s.folders.map(f => ...settings,
folders: settings.folders.map(f =>
f.id === folderId ? { ...f, mangaIds: f.mangaIds.filter(id => id !== mangaId) } : f f.id === folderId ? { ...f, mangaIds: f.mangaIds.filter(id => id !== mangaId) } : f
), ),
})); };
} }
export function getMangaFolders(mangaId: number): Folder[] { export function getMangaFolders(mangaId: number): Folder[] {
return get(settings).folders.filter(f => f.mangaIds.includes(mangaId)); return settings.folders.filter(f => f.mangaIds.includes(mangaId));
} }
// ── Persistence subscriptions ─────────────────────────────────────────────────
navPage.subscribe(v => persist("moku-store", { ...loadPersisted(), navPage: v }));
libraryFilter.subscribe(v => persist("moku-store", { ...loadPersisted(), libraryFilter: v }));
history.subscribe(v => persist("moku-store", { ...loadPersisted(), history: v }));
readingStats.subscribe(v => persist("moku-store", { ...loadPersisted(), readingStats: v }));
settings.subscribe(v => persist("moku-store", { ...loadPersisted(), settings: v }));