mirror of
https://github.com/moku-project/Moku.git
synced 2026-06-13 09:19:56 -05:00
Chore: Revamped Lib Files for Svelte 5 Rewrite
This commit is contained in:
Youwes09
@@ -1,34 +1,34 @@
|
||||
<script lang="ts">
|
||||
import { navPage, activeManga } from "../../store";
|
||||
import Sidebar from "./Sidebar.svelte";
|
||||
import Home from "../pages/Home.svelte";
|
||||
import Library from "../pages/Library.svelte";
|
||||
import Sidebar from "./Sidebar.svelte";
|
||||
import Home from "../pages/Home.svelte";
|
||||
import Library from "../pages/Library.svelte";
|
||||
import SeriesDetail from "../pages/SeriesDetail.svelte";
|
||||
import History from "../pages/History.svelte";
|
||||
import Search from "../pages/Search.svelte";
|
||||
import Discover from "../pages/Discover.svelte";
|
||||
import Downloads from "../pages/Downloads.svelte";
|
||||
import Extensions from "../pages/Extensions.svelte";
|
||||
import History from "../pages/History.svelte";
|
||||
import Search from "../pages/Search.svelte";
|
||||
import Discover from "../pages/Discover.svelte";
|
||||
import Downloads from "../pages/Downloads.svelte";
|
||||
import Extensions from "../pages/Extensions.svelte";
|
||||
</script>
|
||||
|
||||
<div class="root">
|
||||
<Sidebar />
|
||||
<main class="main">
|
||||
{#if $activeManga}
|
||||
{#if activeManga}
|
||||
<SeriesDetail />
|
||||
{:else if $navPage === "home"}
|
||||
{:else if navPage === "home"}
|
||||
<Home />
|
||||
{:else if $navPage === "library"}
|
||||
{:else if navPage === "library"}
|
||||
<Library />
|
||||
{:else if $navPage === "search"}
|
||||
{:else if navPage === "search"}
|
||||
<Search />
|
||||
{:else if $navPage === "history"}
|
||||
{:else if navPage === "history"}
|
||||
<History />
|
||||
{:else if $navPage === "explore" || $navPage === "sources"}
|
||||
{:else if navPage === "explore" || navPage === "sources"}
|
||||
<Discover />
|
||||
{:else if $navPage === "downloads"}
|
||||
{:else if navPage === "downloads"}
|
||||
<Downloads />
|
||||
{:else if $navPage === "extensions"}
|
||||
{:else if navPage === "extensions"}
|
||||
<Extensions />
|
||||
{:else}
|
||||
<Home />
|
||||
@@ -38,10 +38,5 @@
|
||||
|
||||
<style>
|
||||
.root { display: flex; height: 100%; background: var(--bg-base); overflow: hidden; }
|
||||
.main {
|
||||
flex: 1; overflow: hidden;
|
||||
background: var(--bg-surface);
|
||||
transform: translateZ(0);
|
||||
contain: layout style;
|
||||
}
|
||||
.main { flex: 1; overflow: hidden; background: var(--bg-surface); transform: translateZ(0); contain: layout style; }
|
||||
</style>
|
||||
|
||||
@@ -14,91 +14,55 @@
|
||||
];
|
||||
|
||||
function navigate(id: NavPage) {
|
||||
navPage.set(id);
|
||||
activeManga.set(null);
|
||||
genreFilter.set("");
|
||||
if (id !== "explore") activeSource.set(null);
|
||||
navPage = id;
|
||||
activeManga = null;
|
||||
genreFilter = "";
|
||||
if (id !== "explore") activeSource = null;
|
||||
}
|
||||
|
||||
function goHome() {
|
||||
navPage.set("home");
|
||||
activeSource.set(null);
|
||||
activeManga.set(null);
|
||||
libraryFilter.set("library");
|
||||
genreFilter.set("");
|
||||
navPage = "home";
|
||||
activeSource = null;
|
||||
activeManga = null;
|
||||
libraryFilter = "library";
|
||||
genreFilter = "";
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</button>
|
||||
<nav class="nav">
|
||||
{#each TABS as tab}
|
||||
<button class="tab" class:active={$navPage === tab.id}
|
||||
title={tab.label} on:click={() => navigate(tab.id)}>
|
||||
<svelte:component this={tab.icon} size={18} weight="light" />
|
||||
<button class="tab" class:active={navPage === tab.id}
|
||||
title={tab.label} onclick={() => navigate(tab.id)}>
|
||||
<tab.icon size={18} weight="light" />
|
||||
</button>
|
||||
{/each}
|
||||
</nav>
|
||||
<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" />
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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; }
|
||||
.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:active { transform: scale(0.92); }
|
||||
.logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||||
.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;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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; }
|
||||
.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:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||||
.tab.active { color: var(--accent-fg); background: var(--accent-muted); }
|
||||
.tab.active:hover { color: var(--accent-fg); background: var(--accent-muted); }
|
||||
.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);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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); }
|
||||
.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:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
|
||||
</style>
|
||||
|
||||
@@ -1,25 +1,29 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { getCurrentWindow } from "@tauri-apps/api/window";
|
||||
import logoUrl from "../../assets/moku-icon.svg";
|
||||
|
||||
export let mode: "loading" | "idle" = "loading";
|
||||
export let ringFull: boolean = false;
|
||||
export let failed: boolean = false;
|
||||
export let showCards: boolean = true;
|
||||
export let showFps: boolean = false;
|
||||
export let onReady: (() => void) | undefined = undefined;
|
||||
export let onRetry: (() => void) | undefined = undefined;
|
||||
export let onDismiss: (() => void) | undefined = undefined;
|
||||
interface Props {
|
||||
mode?: "loading" | "idle";
|
||||
ringFull?: boolean;
|
||||
failed?: boolean;
|
||||
showCards?: boolean;
|
||||
showFps?: boolean;
|
||||
onReady?: () => void;
|
||||
onRetry?: () => void;
|
||||
onDismiss?: () => void;
|
||||
}
|
||||
|
||||
let { mode = "loading", ringFull = false, failed = false, showCards = true,
|
||||
showFps = false, onReady, onRetry, onDismiss }: Props = $props();
|
||||
|
||||
const EXIT_MS = 320;
|
||||
|
||||
let dots = "";
|
||||
let ringProg = 0.025;
|
||||
let exiting = false;
|
||||
let dots = $state("");
|
||||
let ringProg = $state(0.025);
|
||||
let exiting = $state(false);
|
||||
let exitLock = false;
|
||||
|
||||
let canvas: HTMLCanvasElement;
|
||||
let fpsEl: HTMLSpanElement;
|
||||
|
||||
function triggerExit(cb?: () => void) {
|
||||
@@ -29,10 +33,12 @@
|
||||
setTimeout(() => cb?.(), EXIT_MS);
|
||||
}
|
||||
|
||||
$: if (ringFull) {
|
||||
ringProg = 1;
|
||||
setTimeout(() => triggerExit(onReady), 650);
|
||||
}
|
||||
$effect(() => {
|
||||
if (ringFull) {
|
||||
ringProg = 1;
|
||||
setTimeout(() => triggerExit(onReady), 650);
|
||||
}
|
||||
});
|
||||
|
||||
const dotsInterval = setInterval(() => {
|
||||
dots = dots.length >= 3 ? "" : dots + ".";
|
||||
@@ -48,22 +54,16 @@
|
||||
}, 200);
|
||||
return () => {
|
||||
clearTimeout(t);
|
||||
clearInterval(dotsInterval);
|
||||
window.removeEventListener("keydown", handler);
|
||||
window.removeEventListener("mousedown", handler);
|
||||
window.removeEventListener("touchstart", handler);
|
||||
};
|
||||
}
|
||||
return () => clearInterval(dotsInterval);
|
||||
});
|
||||
|
||||
onDestroy(() => clearInterval(dotsInterval));
|
||||
|
||||
// ── 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 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; }
|
||||
|
||||
const LAYER_CFG = [
|
||||
@@ -90,42 +90,26 @@
|
||||
const h = w * 1.44;
|
||||
const speed = cfg.speedMin + hash(seed + 5) * (cfg.speedMax - cfg.speedMin);
|
||||
const travel = vh + h + BUF;
|
||||
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,
|
||||
});
|
||||
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 });
|
||||
}
|
||||
}
|
||||
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),
|
||||
}));
|
||||
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) }));
|
||||
return { cards, trigs };
|
||||
}
|
||||
|
||||
function rrect(ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, r: number) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + r, y);
|
||||
ctx.lineTo(x + w - r, y); ctx.arcTo(x + w, y, x + w, y + r, r);
|
||||
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, 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, y + r); ctx.arcTo(x, y, x + r, y, 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.closePath();
|
||||
}
|
||||
|
||||
const STAMP_PAD = 6;
|
||||
|
||||
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.height = Math.round(Math.ceil(c.h + STAMP_PAD * 2) * dpr);
|
||||
const ctx = oc.getContext("2d")!;
|
||||
@@ -133,17 +117,11 @@
|
||||
const x0 = STAMP_PAD, y0 = STAMP_PAD;
|
||||
const coverH = (c.w * 0.72) * 1.05;
|
||||
const lineY0 = y0 + 3 + coverH + 5;
|
||||
ctx.fillStyle = "rgba(0,0,0,0.5)";
|
||||
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.strokeStyle = "rgba(255,255,255,0.75)";
|
||||
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();
|
||||
ctx.fillStyle = "rgba(0,0,0,0.5)"; 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.strokeStyle = "rgba(255,255,255,0.75)"; 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++) {
|
||||
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);
|
||||
@@ -152,23 +130,17 @@
|
||||
}
|
||||
|
||||
function buildVignette(vw: number, vh: number, dpr: number): HTMLCanvasElement {
|
||||
const oc = document.createElement("canvas");
|
||||
oc.width = Math.round(vw * dpr);
|
||||
oc.height = Math.round(vh * dpr);
|
||||
const oc = document.createElement("canvas");
|
||||
oc.width = Math.round(vw * dpr); oc.height = Math.round(vh * dpr);
|
||||
const ctx = oc.getContext("2d")!;
|
||||
ctx.scale(dpr, dpr);
|
||||
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(1, "rgba(0,0,0,0.82)");
|
||||
ctx.fillStyle = g;
|
||||
ctx.fillRect(0, 0, vw, vh);
|
||||
g.addColorStop(0.15, "rgba(0,0,0,0)"); g.addColorStop(1, "rgba(0,0,0,0.82)");
|
||||
ctx.fillStyle = g; ctx.fillRect(0, 0, vw, vh);
|
||||
return oc;
|
||||
}
|
||||
|
||||
function drawFrame(
|
||||
ctx: CanvasRenderingContext2D, t: number, cw: number, ch: number, dpr: number,
|
||||
cards: CardDef[], trigs: CardTrig[], stamps: HTMLCanvasElement[], vignette: HTMLCanvasElement,
|
||||
) {
|
||||
function drawFrame(ctx: CanvasRenderingContext2D, t: number, cw: number, ch: number, dpr: number, cards: CardDef[], trigs: CardTrig[], stamps: HTMLCanvasElement[], vignette: HTMLCanvasElement) {
|
||||
ctx.clearRect(0, 0, cw, ch);
|
||||
for (let i = 0; i < cards.length; i++) {
|
||||
const c = cards[i];
|
||||
@@ -185,14 +157,11 @@
|
||||
const sw = stamps[i].width / dpr, sh = stamps[i].height / dpr;
|
||||
ctx.drawImage(stamps[i], -sw / 2, -sh / 2, sw, sh);
|
||||
}
|
||||
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||||
ctx.globalAlpha = 1;
|
||||
ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalAlpha = 1;
|
||||
ctx.drawImage(vignette, 0, 0, cw, ch);
|
||||
}
|
||||
|
||||
// ── FPS counter ─────────────────────────────────────────────────────────────
|
||||
let fps = 0, fpsFrames = 0, fpsLast = 0;
|
||||
|
||||
function tickFps(now: number) {
|
||||
fpsFrames++;
|
||||
if (now - fpsLast >= 500) {
|
||||
@@ -202,19 +171,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
// ── canvas mount ─────────────────────────────────────────────────────────────
|
||||
function mountCanvas(el: HTMLCanvasElement) {
|
||||
const win = getCurrentWindow();
|
||||
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 lastLogW = 0, lastLogH = 0, lastScale = 0, buildGen = 0;
|
||||
|
||||
async function syncSize() {
|
||||
const gen = ++buildGen;
|
||||
const [phys, scale] = await Promise.all([win.innerSize(), win.scaleFactor()]);
|
||||
@@ -225,15 +187,11 @@
|
||||
const built = buildCards(logW, logH);
|
||||
const stamps = built.cards.map(c => buildStamp(c, scale));
|
||||
const vig = buildVignette(logW, logH, scale);
|
||||
el.width = phys.width;
|
||||
el.height = phys.height;
|
||||
el.width = phys.width; el.height = phys.height;
|
||||
live = { cards: built.cards, trigs: built.trigs, stamps, vignette: vig, CW: phys.width, CH: phys.height, scale };
|
||||
}
|
||||
|
||||
const ro = new ResizeObserver(() => syncSize());
|
||||
ro.observe(el);
|
||||
syncSize();
|
||||
|
||||
ro.observe(el); syncSize();
|
||||
let raf = 0, t0 = -1;
|
||||
function frame(now: number) {
|
||||
raf = requestAnimationFrame(frame);
|
||||
@@ -244,31 +202,22 @@
|
||||
drawFrame(ctx, (now - t0) / 1000, CW, CH, scale, cards, trigs, stamps, vignette);
|
||||
}
|
||||
raf = requestAnimationFrame(frame);
|
||||
|
||||
return () => { cancelAnimationFrame(raf); ro.disconnect(); };
|
||||
}
|
||||
|
||||
// ── ring ─────────────────────────────────────────────────────────────────────
|
||||
$: ringR = 44;
|
||||
$: ringPad = 8;
|
||||
$: ringSize = (ringR + ringPad) * 2;
|
||||
$: ringC = ringR + ringPad;
|
||||
$: ringCirc = 2 * Math.PI * ringR;
|
||||
$: ringArc = ringCirc * Math.min(Math.max(ringProg, 0.025), 0.999);
|
||||
$: ringTop = -((ringSize - 80) / 2);
|
||||
$: ringLeft = -((ringSize - 80) / 2);
|
||||
const ringR = $derived(44);
|
||||
const ringPad = $derived(8);
|
||||
const ringSize = $derived((ringR + ringPad) * 2);
|
||||
const ringC = $derived(ringR + ringPad);
|
||||
const ringCirc = $derived(2 * Math.PI * ringR);
|
||||
const ringArc = $derived(ringCirc * Math.min(Math.max(ringProg, 0.025), 0.999));
|
||||
const ringTop = $derived(-((ringSize - 80) / 2));
|
||||
const ringLeft = $derived(-((ringSize - 80) / 2));
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="splash"
|
||||
class:exiting
|
||||
style="cursor: {mode === 'idle' ? 'pointer' : 'default'}"
|
||||
>
|
||||
<div class="splash" class:exiting style="cursor: {mode === 'idle' ? 'pointer' : 'default'}">
|
||||
{#if showCards}
|
||||
<canvas
|
||||
style="position:absolute;inset:0;pointer-events:none;width:100%;height:100%"
|
||||
use:mountCanvas
|
||||
></canvas>
|
||||
<canvas style="position:absolute;inset:0;pointer-events:none;width:100%;height:100%" use:mountCanvas></canvas>
|
||||
{#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>
|
||||
{/if}
|
||||
@@ -285,21 +234,9 @@
|
||||
{:else}
|
||||
<div style="position:relative;width:80px;height:80px;margin-bottom:20px;z-index:1">
|
||||
{#if !failed}
|
||||
<svg
|
||||
width={ringSize} height={ringSize}
|
||||
style="position:absolute;pointer-events:none;top:{ringTop}px;left:{ringLeft}px"
|
||||
>
|
||||
<svg 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(--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)"
|
||||
/>
|
||||
<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)" />
|
||||
</svg>
|
||||
{/if}
|
||||
<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>
|
||||
<div style="z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px">
|
||||
{#if failed}
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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" onclick={onRetry}>Retry</button>
|
||||
{: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">
|
||||
{ringFull ? "Ready" : `Initializing server${dots}`}
|
||||
@@ -324,48 +257,15 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.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;
|
||||
}
|
||||
.splash.exiting {
|
||||
animation: spOut 320ms cubic-bezier(0.4,0,1,1) both;
|
||||
}
|
||||
.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; }
|
||||
.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 spOut { from { opacity:1; transform:scale(1) } to { opacity:0; transform:scale(0.96) } }
|
||||
@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)) }
|
||||
}
|
||||
@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)) } }
|
||||
@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; }
|
||||
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.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; }
|
||||
.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>
|
||||
|
||||
@@ -1,17 +1,12 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
ClockCounterClockwise, Trash, MagnifyingGlass, Play, Books,
|
||||
X as XIcon,
|
||||
} from "phosphor-svelte";
|
||||
import { ClockCounterClockwise, Trash, MagnifyingGlass, Play, Books, X as XIcon } from "phosphor-svelte";
|
||||
import { thumbUrl, gql } from "../../lib/client";
|
||||
import { GET_CHAPTERS } from "../../lib/queries";
|
||||
import {
|
||||
history, readingStats, openReader,
|
||||
} from "../../store";
|
||||
import { history, readingStats, openReader, clearHistory, clearHistoryForManga } from "../../store";
|
||||
import type { HistoryEntry } from "../../store";
|
||||
|
||||
let search = "";
|
||||
let confirmClearAll = false;
|
||||
let search = $state("");
|
||||
let confirmClearAll = $state(false);
|
||||
|
||||
function timeAgo(ts: number): string {
|
||||
const diff = Date.now() - ts, m = Math.floor(diff / 60000);
|
||||
@@ -31,10 +26,7 @@
|
||||
if (d.toDateString() === yest.toDateString()) return "Yesterday";
|
||||
const weekAgo = new Date(now); weekAgo.setDate(now.getDate() - 7);
|
||||
if (d > weekAgo) return d.toLocaleDateString("en-US", { weekday: "long" });
|
||||
return d.toLocaleDateString("en-US", {
|
||||
month: "long", day: "numeric",
|
||||
year: d.getFullYear() !== now.getFullYear() ? "numeric" : undefined,
|
||||
});
|
||||
return d.toLocaleDateString("en-US", { month: "long", day: "numeric", year: d.getFullYear() !== now.getFullYear() ? "numeric" : undefined });
|
||||
}
|
||||
|
||||
function formatReadTime(mins: number): string {
|
||||
@@ -49,15 +41,9 @@
|
||||
const SESSION_GAP_MS = 30 * 60 * 1000;
|
||||
|
||||
interface Session {
|
||||
mangaId: number;
|
||||
mangaTitle: string;
|
||||
thumbnailUrl: string;
|
||||
latestChapterId: number;
|
||||
latestChapterName: string;
|
||||
latestPageNumber: number;
|
||||
firstChapterName: string;
|
||||
chapterCount: number;
|
||||
readAt: number;
|
||||
mangaId: number; mangaTitle: string; thumbnailUrl: string;
|
||||
latestChapterId: number; latestChapterName: string; latestPageNumber: number;
|
||||
firstChapterName: string; chapterCount: number; readAt: number;
|
||||
}
|
||||
|
||||
function buildSessions(entries: HistoryEntry[]): Session[] {
|
||||
@@ -70,37 +56,23 @@
|
||||
let j = i + 1;
|
||||
while (j < entries.length) {
|
||||
const next = entries[j];
|
||||
if (next.mangaId === anchor.mangaId && anchor.readAt - next.readAt <= SESSION_GAP_MS) {
|
||||
group.push(next); j++;
|
||||
} else break;
|
||||
if (next.mangaId === anchor.mangaId && anchor.readAt - next.readAt <= SESSION_GAP_MS) { group.push(next); j++; }
|
||||
else break;
|
||||
}
|
||||
const latest = group[0], oldest = group[group.length - 1];
|
||||
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,
|
||||
});
|
||||
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 });
|
||||
i = j;
|
||||
}
|
||||
return sessions;
|
||||
}
|
||||
|
||||
$: filtered = search.trim()
|
||||
? $history.filter((e) =>
|
||||
e.mangaTitle.toLowerCase().includes(search.toLowerCase()) ||
|
||||
e.chapterName.toLowerCase().includes(search.toLowerCase())
|
||||
)
|
||||
: $history;
|
||||
const filtered = $derived(search.trim()
|
||||
? history.filter(e => e.mangaTitle.toLowerCase().includes(search.toLowerCase()) || 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[]>();
|
||||
for (const s of sessions) {
|
||||
const l = dayLabel(s.readAt);
|
||||
@@ -108,29 +80,21 @@
|
||||
map.get(l)!.push(s);
|
||||
}
|
||||
return Array.from(map.entries()).map(([label, items]) => ({ label, items }));
|
||||
})();
|
||||
})());
|
||||
|
||||
$: stats = {
|
||||
uniqueChapters: new Set($history.map((e) => e.chapterId)).size,
|
||||
uniqueManga: new Set($history.map((e) => e.mangaId)).size,
|
||||
estimatedMinutes: Math.round(new Set($history.map((e) => e.chapterId)).size * 4.5),
|
||||
};
|
||||
const stats = $derived({
|
||||
uniqueChapters: new Set(history.map(e => e.chapterId)).size,
|
||||
uniqueManga: new Set(history.map(e => e.mangaId)).size,
|
||||
estimatedMinutes: Math.round(new Set(history.map(e => e.chapterId)).size * 4.5),
|
||||
});
|
||||
|
||||
function clearAll() {
|
||||
history.set([]);
|
||||
confirmClearAll = false;
|
||||
}
|
||||
|
||||
function clearManga(mangaId: number, e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
history.update((h) => h.filter((x) => x.mangaId !== mangaId));
|
||||
}
|
||||
function doConfirmClear() { clearHistory(); confirmClearAll = false; }
|
||||
|
||||
async function resume(session: Session) {
|
||||
try {
|
||||
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 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);
|
||||
} catch {}
|
||||
}
|
||||
@@ -144,20 +108,20 @@
|
||||
<MagnifyingGlass size={12} class="search-icon" weight="light" />
|
||||
<input class="search" placeholder="Search history…" bind:value={search} />
|
||||
{#if search}
|
||||
<button class="search-clear" on:click={() => (search = "")}>
|
||||
<button class="search-clear" onclick={() => search = ""}>
|
||||
<XIcon size={10} weight="bold" />
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if $history.length > 0}
|
||||
{#if history.length > 0}
|
||||
{#if confirmClearAll}
|
||||
<div class="confirm-row">
|
||||
<span class="confirm-label">Clear all activity?</span>
|
||||
<button class="confirm-yes" on:click={clearAll}>Clear</button>
|
||||
<button class="confirm-no" on:click={() => (confirmClearAll = false)}>Cancel</button>
|
||||
<button class="confirm-yes" onclick={doConfirmClear}>Clear</button>
|
||||
<button class="confirm-no" onclick={() => confirmClearAll = false}>Cancel</button>
|
||||
</div>
|
||||
{: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" />
|
||||
</button>
|
||||
{/if}
|
||||
@@ -166,30 +130,18 @@
|
||||
</div>
|
||||
|
||||
<div class="stats-bar">
|
||||
<span class="stat-item">
|
||||
<span class="stat-val">{stats.uniqueChapters}</span>
|
||||
<span class="stat-label">chapters</span>
|
||||
</span>
|
||||
<span class="stat-item"><span class="stat-val">{stats.uniqueChapters}</span><span class="stat-label">chapters</span></span>
|
||||
<span class="stat-sep"></span>
|
||||
<span class="stat-item">
|
||||
<span class="stat-val">{stats.uniqueManga}</span>
|
||||
<span class="stat-label">series</span>
|
||||
</span>
|
||||
<span class="stat-item"><span class="stat-val">{stats.uniqueManga}</span><span class="stat-label">series</span></span>
|
||||
<span class="stat-sep"></span>
|
||||
<span class="stat-item">
|
||||
<span class="stat-val">{formatReadTime(stats.estimatedMinutes)}</span>
|
||||
<span class="stat-label">est. time</span>
|
||||
</span>
|
||||
{#if $readingStats.currentStreakDays > 0}
|
||||
<span class="stat-item"><span class="stat-val">{formatReadTime(stats.estimatedMinutes)}</span><span class="stat-label">est. time</span></span>
|
||||
{#if readingStats.currentStreakDays > 0}
|
||||
<span class="stat-sep"></span>
|
||||
<span class="stat-item">
|
||||
<span class="stat-val">{$readingStats.currentStreakDays}d</span>
|
||||
<span class="stat-label">streak</span>
|
||||
</span>
|
||||
<span class="stat-item"><span class="stat-val">{readingStats.currentStreakDays}d</span><span class="stat-label">streak</span></span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if $history.length === 0}
|
||||
{#if history.length === 0}
|
||||
<div class="empty">
|
||||
<ClockCounterClockwise size={32} weight="light" class="empty-icon" />
|
||||
<p class="empty-text">No reading history yet</p>
|
||||
@@ -210,15 +162,9 @@
|
||||
</p>
|
||||
{#each items as session (session.latestChapterId + ":" + session.readAt)}
|
||||
<div class="row-wrap">
|
||||
<button class="row" on:click={() => resume(session)}>
|
||||
<button class="row" onclick={() => resume(session)}>
|
||||
<div class="thumb-wrap">
|
||||
<img
|
||||
src={thumbUrl(session.thumbnailUrl)}
|
||||
alt={session.mangaTitle}
|
||||
class="thumb"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
<img src={thumbUrl(session.thumbnailUrl)} alt={session.mangaTitle} class="thumb" loading="lazy" decoding="async" />
|
||||
{#if session.chapterCount > 1}
|
||||
<span class="session-badge">{session.chapterCount}</span>
|
||||
{/if}
|
||||
@@ -227,28 +173,17 @@
|
||||
<span class="manga-title">{session.mangaTitle}</span>
|
||||
<span class="chapter-name">
|
||||
{#if session.chapterCount > 1}
|
||||
<span class="chapter-range">
|
||||
{session.firstChapterName}
|
||||
<span class="range-sep">→</span>
|
||||
{session.latestChapterName}
|
||||
</span>
|
||||
<span class="chapter-range">{session.firstChapterName}<span class="range-sep">→</span>{session.latestChapterName}</span>
|
||||
{:else}
|
||||
{session.latestChapterName}
|
||||
{#if session.latestPageNumber > 1}
|
||||
<span class="page-badge">p.{session.latestPageNumber}</span>
|
||||
{/if}
|
||||
{#if session.latestPageNumber > 1}<span class="page-badge">p.{session.latestPageNumber}</span>{/if}
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<span class="time">{timeAgo(session.readAt)}</span>
|
||||
<Play size={11} weight="fill" class="play-icon" />
|
||||
</button>
|
||||
<button
|
||||
class="row-delete"
|
||||
on:click={(e) => clearManga(session.mangaId, e)}
|
||||
title="Remove {session.mangaTitle} from history"
|
||||
aria-label="Remove from history"
|
||||
>
|
||||
<button class="row-delete" onclick={() => clearHistoryForManga(session.mangaId)} title="Remove {session.mangaTitle} from history" aria-label="Remove from history">
|
||||
<XIcon size={9} weight="bold" />
|
||||
</button>
|
||||
</div>
|
||||
@@ -261,143 +196,55 @@
|
||||
|
||||
<style>
|
||||
.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;
|
||||
}
|
||||
.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 { 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); }
|
||||
|
||||
.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 {
|
||||
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 { 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:focus { border-color: var(--border-strong); }
|
||||
.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);
|
||||
}
|
||||
.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); }
|
||||
.search-clear:hover { color: var(--text-muted); }
|
||||
|
||||
.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-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);
|
||||
}
|
||||
.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); }
|
||||
.confirm-yes:hover { filter: brightness(1.15); }
|
||||
.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);
|
||||
}
|
||||
.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); }
|
||||
.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); }
|
||||
|
||||
.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-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-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::-webkit-scrollbar { display: none; }
|
||||
|
||||
.group { margin-bottom: var(--sp-4); }
|
||||
.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);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.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); }
|
||||
.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 .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-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); }
|
||||
|
||||
.thumb-wrap { position: relative; flex-shrink: 0; }
|
||||
.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);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.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); }
|
||||
.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; }
|
||||
.manga-title {
|
||||
font-size: var(--text-base); font-weight: var(--weight-medium);
|
||||
color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.manga-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.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; }
|
||||
.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; }
|
||||
: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); }
|
||||
:global(.empty-icon) { color: var(--text-faint); }
|
||||
.empty-text { font-size: var(--text-base); color: var(--text-muted); }
|
||||
.empty-hint { font-size: var(--text-sm); color: var(--text-faint); }
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
|
||||
</style>
|
||||
|
||||
+119
-431
@@ -1,22 +1,13 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import {
|
||||
Play, ArrowRight, ArrowLeft, BookOpen, Clock, Fire, TrendUp,
|
||||
CalendarBlank, CheckCircle, PushPin, X as XIcon,
|
||||
MagnifyingGlass, ListBullets,
|
||||
} from "phosphor-svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { 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 { GET_LIBRARY, GET_CHAPTERS } from "../../lib/queries";
|
||||
import { cache, CACHE_KEYS } from "../../lib/cache";
|
||||
import {
|
||||
history, readingStats, settings, activeManga, navPage,
|
||||
previewManga, openReader, activeChapterList,
|
||||
COMPLETED_FOLDER_ID, setHeroSlot,
|
||||
} from "../../store";
|
||||
import { history, readingStats, settings, activeManga, navPage, previewManga, openReader, COMPLETED_FOLDER_ID, setHeroSlot } from "../../store";
|
||||
import type { HistoryEntry } from "../../store";
|
||||
import type { Manga, Chapter } from "../../lib/types";
|
||||
|
||||
// ── Helpers ───────────────────────────────────────────────────────────────────
|
||||
function timeAgo(ts: number): string {
|
||||
const diff = Date.now() - ts, m = Math.floor(diff / 60000);
|
||||
if (m < 1) return "Just now";
|
||||
@@ -27,6 +18,7 @@
|
||||
if (d < 7) return `${d}d ago`;
|
||||
return new Date(ts).toLocaleDateString("en-US", { month: "short", day: "numeric" });
|
||||
}
|
||||
|
||||
function formatReadTime(mins: number): string {
|
||||
if (mins < 1) return `${Math.round(mins * 60)}s`;
|
||||
if (mins < 60) return `${Math.round(mins)}m`;
|
||||
@@ -35,11 +27,11 @@
|
||||
const d = Math.floor(h / 24), rh = h % 24;
|
||||
return rh === 0 ? `${d}d` : `${d}d ${rh}h`;
|
||||
}
|
||||
|
||||
function focusEl(node: HTMLElement) { node.focus(); }
|
||||
|
||||
// ── Library ───────────────────────────────────────────────────────────────────
|
||||
let libraryManga: Manga[] = [];
|
||||
let loadingLibrary = true;
|
||||
let libraryManga: Manga[] = $state([]);
|
||||
let loadingLibrary: boolean = $state(true);
|
||||
|
||||
onMount(() => {
|
||||
cache.get(CACHE_KEYS.LIBRARY, () =>
|
||||
@@ -49,35 +41,26 @@
|
||||
.finally(() => loadingLibrary = false);
|
||||
});
|
||||
|
||||
// ── Continue reading (deduped) ────────────────────────────────────────────────
|
||||
$: continueReading = (() => {
|
||||
const continueReading = $derived((() => {
|
||||
const seen = new Set<number>();
|
||||
const out: HistoryEntry[] = [];
|
||||
for (const e of $history) {
|
||||
for (const e of history) {
|
||||
if (seen.has(e.mangaId)) continue;
|
||||
seen.add(e.mangaId);
|
||||
out.push(e);
|
||||
if (out.length >= 10) break;
|
||||
}
|
||||
return out;
|
||||
})();
|
||||
})());
|
||||
|
||||
// ── Hero slots ────────────────────────────────────────────────────────────────
|
||||
const TOTAL_SLOTS = 4;
|
||||
interface HeroSlot {
|
||||
kind: "continue" | "pinned" | "empty";
|
||||
entry?: HistoryEntry;
|
||||
manga?: Manga;
|
||||
slotIndex: number;
|
||||
}
|
||||
interface HeroSlot { kind: "continue" | "pinned" | "empty"; entry?: HistoryEntry; manga?: Manga; slotIndex: number; }
|
||||
|
||||
$: resolvedSlots = (() => {
|
||||
const pins = $settings.heroSlots ?? [null, null, null, null];
|
||||
const resolvedSlots = $derived((() => {
|
||||
const pins = settings.heroSlots ?? [null, null, null, null];
|
||||
const slots: HeroSlot[] = [];
|
||||
const first = continueReading[0];
|
||||
slots.push(first
|
||||
? { kind: "continue", entry: first, slotIndex: 0 }
|
||||
: { kind: "empty", slotIndex: 0 });
|
||||
slots.push(first ? { kind: "continue", entry: first, slotIndex: 0 } : { kind: "empty", slotIndex: 0 });
|
||||
let hi = 1;
|
||||
for (let i = 1; i < TOTAL_SLOTS; i++) {
|
||||
const pinId = pins[i];
|
||||
@@ -86,23 +69,18 @@
|
||||
if (manga) { slots.push({ kind: "pinned", manga, slotIndex: i }); continue; }
|
||||
}
|
||||
const entry = continueReading[hi++];
|
||||
slots.push(entry
|
||||
? { kind: "continue", entry, slotIndex: i }
|
||||
: { kind: "empty", slotIndex: i });
|
||||
slots.push(entry ? { kind: "continue", entry, slotIndex: i } : { kind: "empty", slotIndex: i });
|
||||
}
|
||||
return slots;
|
||||
})();
|
||||
})());
|
||||
|
||||
let activeIdx = 0;
|
||||
$: activeSlot = resolvedSlots[activeIdx];
|
||||
$: heroThumb = activeSlot?.kind === "pinned" ? thumbUrl(activeSlot.manga?.thumbnailUrl ?? "")
|
||||
: activeSlot?.kind === "continue" ? thumbUrl(activeSlot.entry?.thumbnailUrl ?? "") : "";
|
||||
$: heroTitle = activeSlot?.kind === "pinned" ? (activeSlot.manga?.title ?? "")
|
||||
: activeSlot?.kind === "continue" ? (activeSlot.entry?.mangaTitle ?? "") : "";
|
||||
$: heroManga = activeSlot?.kind === "pinned" ? activeSlot.manga
|
||||
: activeSlot?.kind === "continue" ? libraryManga.find(m => m.id === activeSlot.entry?.mangaId) : null;
|
||||
$: heroEntry = activeSlot?.kind === "continue" ? activeSlot.entry : null;
|
||||
$: heroMangaId = heroEntry?.mangaId ?? heroManga?.id ?? null;
|
||||
let activeIdx = $state(0);
|
||||
const activeSlot = $derived(resolvedSlots[activeIdx]);
|
||||
const heroThumb = $derived(activeSlot?.kind === "pinned" ? thumbUrl(activeSlot.manga?.thumbnailUrl ?? "") : activeSlot?.kind === "continue" ? thumbUrl(activeSlot.entry?.thumbnailUrl ?? "") : "");
|
||||
const heroTitle = $derived(activeSlot?.kind === "pinned" ? (activeSlot.manga?.title ?? "") : activeSlot?.kind === "continue" ? (activeSlot.entry?.mangaTitle ?? "") : "");
|
||||
const heroManga = $derived(activeSlot?.kind === "pinned" ? activeSlot.manga : activeSlot?.kind === "continue" ? libraryManga.find(m => m.id === activeSlot.entry?.mangaId) : null);
|
||||
const heroEntry = $derived(activeSlot?.kind === "continue" ? activeSlot.entry : null);
|
||||
const heroMangaId = $derived(heroEntry?.mangaId ?? heroManga?.id ?? null);
|
||||
|
||||
function cycleNext() { activeIdx = (activeIdx + 1) % 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 === "ArrowLeft") cyclePrev();
|
||||
}
|
||||
onMount(() => window.addEventListener("keydown", onKey));
|
||||
onDestroy(() => window.removeEventListener("keydown", onKey));
|
||||
onMount(() => {
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
});
|
||||
|
||||
// ── Hero chapter panel ────────────────────────────────────────────────────────
|
||||
// Load chapters for the active slot's manga, show 3-5 starting at where user left off
|
||||
let heroChapters: Chapter[] = [];
|
||||
let loadingHeroChapters = false;
|
||||
let heroChapters: Chapter[] = $state([]);
|
||||
let loadingHeroChapters = $state(false);
|
||||
let heroChaptersFor: number | null = null;
|
||||
|
||||
$: if (heroMangaId && heroMangaId !== heroChaptersFor) {
|
||||
loadHeroChapters(heroMangaId);
|
||||
}
|
||||
$effect(() => {
|
||||
if (heroMangaId && heroMangaId !== heroChaptersFor) loadHeroChapters(heroMangaId);
|
||||
});
|
||||
|
||||
async function loadHeroChapters(mangaId: number) {
|
||||
heroChaptersFor = mangaId;
|
||||
@@ -132,20 +110,16 @@
|
||||
heroChapters = [];
|
||||
try {
|
||||
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);
|
||||
// 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);
|
||||
heroChapters = all.slice(startIdx, startIdx + 5);
|
||||
} catch { heroChapters = []; }
|
||||
finally { loadingHeroChapters = false; }
|
||||
}
|
||||
|
||||
// ── Resume helpers ────────────────────────────────────────────────────────────
|
||||
let resuming = false;
|
||||
let resuming = $state(false);
|
||||
|
||||
async function openChapter(chapter: Chapter) {
|
||||
if (!heroMangaId) return;
|
||||
@@ -157,28 +131,24 @@
|
||||
all = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
|
||||
}
|
||||
openReader(chapter, all);
|
||||
} catch {
|
||||
activeManga.set({ id: heroMangaId, title: heroTitle, thumbnailUrl: (heroManga?.thumbnailUrl ?? "") } as any);
|
||||
} finally { resuming = false; }
|
||||
} catch { activeManga = { id: heroMangaId, title: heroTitle, thumbnailUrl: heroManga?.thumbnailUrl ?? "" } as any; }
|
||||
finally { resuming = false; }
|
||||
}
|
||||
|
||||
async function resumeActive() {
|
||||
if (!heroEntry && heroManga) { activeManga.set(heroManga); return; }
|
||||
if (!heroEntry && heroManga) { activeManga = heroManga; return; }
|
||||
if (!heroEntry) return;
|
||||
// Use hero chapter panel data if available (already fetched)
|
||||
const target = heroChapters.find(c => c.id === heroEntry!.chapterId) ?? heroChapters[0];
|
||||
if (target && heroChapters.length) { await openChapter(target); return; }
|
||||
// Fallback — fetch
|
||||
resuming = true;
|
||||
try {
|
||||
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 ch = chapters.find(c => c.id === heroEntry!.chapterId) ?? chapters[0];
|
||||
if (ch) openReader(ch, chapters);
|
||||
else activeManga.set({ id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any);
|
||||
} catch {
|
||||
activeManga.set({ id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any);
|
||||
} finally { resuming = false; }
|
||||
else activeManga = { id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any;
|
||||
} catch { activeManga = { id: heroEntry.mangaId, title: heroEntry.mangaTitle, thumbnailUrl: heroEntry.thumbnailUrl } as any; }
|
||||
finally { resuming = false; }
|
||||
}
|
||||
|
||||
async function resumeEntry(entry: HistoryEntry) {
|
||||
@@ -187,32 +157,27 @@
|
||||
const chapters = [...d.chapters.nodes].sort((a, b) => a.sourceOrder - b.sourceOrder);
|
||||
const ch = chapters.find(c => c.id === entry.chapterId) ?? chapters[0];
|
||||
if (ch) openReader(ch, chapters);
|
||||
else activeManga.set({ id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any);
|
||||
} catch {
|
||||
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 { activeManga = { id: entry.mangaId, title: entry.mangaTitle, thumbnailUrl: entry.thumbnailUrl } as any; }
|
||||
}
|
||||
|
||||
// ── Slot picker ───────────────────────────────────────────────────────────────
|
||||
let pickerOpen = false;
|
||||
let pickerSlotIndex: 1|2|3|null = null;
|
||||
let pickerSearch = "";
|
||||
$: pickerResults = pickerSearch.trim()
|
||||
let pickerOpen = $state(false);
|
||||
let pickerSlotIndex: 1|2|3|null = $state(null);
|
||||
let pickerSearch = $state("");
|
||||
|
||||
const pickerResults = $derived(pickerSearch.trim()
|
||||
? 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 closePicker() { pickerOpen = false; pickerSlotIndex = null; }
|
||||
function pinManga(m: Manga) { if (pickerSlotIndex !== null) { setHeroSlot(pickerSlotIndex, m.id); closePicker(); } }
|
||||
function unpinSlot(i: 1|2|3) { setHeroSlot(i, null); }
|
||||
|
||||
// ── Completed, activity, stats ────────────────────────────────────────────────
|
||||
$: completedIds = $settings.folders.find(f => f.id === COMPLETED_FOLDER_ID)?.mangaIds ?? [];
|
||||
$: completedManga = completedIds.length > 0
|
||||
? libraryManga.filter(m => completedIds.includes(m.id)).slice(0, 10)
|
||||
: [];
|
||||
$: recentHistory = $history.slice(0, 8);
|
||||
$: stats = $readingStats;
|
||||
$: hasStats = true;
|
||||
const completedIds = $derived(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) : []);
|
||||
const recentHistory = $derived(history.slice(0, 8));
|
||||
const stats = $derived(readingStats);
|
||||
|
||||
function handleRowWheel(e: WheelEvent) {
|
||||
if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) return;
|
||||
@@ -224,11 +189,9 @@
|
||||
<div class="root">
|
||||
<div class="body">
|
||||
|
||||
<!-- ══ HERO ════════════════════════════════════════════════════════════════ -->
|
||||
<div class="hero-section">
|
||||
<div class="hero-stage">
|
||||
|
||||
<!-- Blurred backdrop -->
|
||||
{#if heroThumb}
|
||||
<div class="hero-backdrop" style="background-image:url({heroThumb})"></div>
|
||||
{:else}
|
||||
@@ -236,37 +199,23 @@
|
||||
{/if}
|
||||
<div class="hero-scrim"></div>
|
||||
|
||||
<!-- ── Col 1: Cover (clickable → resume) ─────────────────────────── -->
|
||||
<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"}
|
||||
>
|
||||
<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"}>
|
||||
{#if heroThumb}
|
||||
<img src={heroThumb} alt={heroTitle} class="hero-cover" loading="eager" decoding="async" />
|
||||
{#if activeSlot?.kind === "continue"}
|
||||
<div class="cover-resume-hint">
|
||||
<Play size={18} weight="fill" />
|
||||
</div>
|
||||
<div class="cover-resume-hint"><Play size={18} weight="fill" /></div>
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="hero-cover-empty"><BookOpen size={28} weight="light" /></div>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<!-- ── Col 2: Details ────────────────────────────────────────────── -->
|
||||
<div class="hero-details">
|
||||
{#if activeSlot?.kind === "empty"}
|
||||
<p class="hero-empty-title">Nothing here yet</p>
|
||||
<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>
|
||||
<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>
|
||||
{#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
|
||||
</button>
|
||||
{/if}
|
||||
@@ -283,10 +232,7 @@
|
||||
</div>
|
||||
|
||||
<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}
|
||||
<p class="hero-progress">
|
||||
@@ -297,28 +243,25 @@
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{#if heroManga?.description}
|
||||
<p class="hero-desc">{heroManga.description}</p>
|
||||
{/if}
|
||||
{#if heroManga?.description}<p class="hero-desc">{heroManga.description}</p>{/if}
|
||||
|
||||
<div class="hero-actions">
|
||||
{#if activeSlot?.kind === "continue"}
|
||||
<button class="hero-cta" on:click={resumeActive} disabled={resuming}>
|
||||
<Play size={11} weight="fill" />
|
||||
{resuming ? "Loading…" : "Resume"}
|
||||
<button class="hero-cta" onclick={resumeActive} disabled={resuming}>
|
||||
<Play size={11} weight="fill" />{resuming ? "Loading…" : "Resume"}
|
||||
</button>
|
||||
{: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
|
||||
</button>
|
||||
{/if}
|
||||
{#if activeSlot?.slotIndex !== 0}
|
||||
{#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
|
||||
</button>
|
||||
{: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
|
||||
</button>
|
||||
{/if}
|
||||
@@ -326,35 +269,20 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Slot dots and arrows — inside details col, at the bottom -->
|
||||
<div class="hero-nav-row">
|
||||
<button class="hero-nav-btn" on:click={cyclePrev} aria-label="Previous">
|
||||
<ArrowLeft size={12} weight="bold" />
|
||||
</button>
|
||||
<button class="hero-nav-btn" onclick={cyclePrev} aria-label="Previous"><ArrowLeft size={12} weight="bold" /></button>
|
||||
<div class="hero-dots">
|
||||
{#each resolvedSlots as slot, i}
|
||||
<button
|
||||
class="hero-dot"
|
||||
class:active={activeIdx === i}
|
||||
class:pinned={slot.kind === "pinned"}
|
||||
on:click={() => goToSlot(i)}
|
||||
aria-label="Slot {i + 1}"
|
||||
></button>
|
||||
<button class="hero-dot" class:active={activeIdx === i} class:pinned={slot.kind === "pinned"} onclick={() => goToSlot(i)} aria-label="Slot {i + 1}"></button>
|
||||
{/each}
|
||||
</div>
|
||||
<button class="hero-nav-btn" on:click={cycleNext} aria-label="Next">
|
||||
<ArrowRight size={12} weight="bold" />
|
||||
</button>
|
||||
<button class="hero-nav-btn" onclick={cycleNext} aria-label="Next"><ArrowRight size={12} weight="bold" /></button>
|
||||
<span class="hero-counter">{activeIdx + 1}/{TOTAL_SLOTS}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Col 3: Chapters panel ──────────────────────────────────────── -->
|
||||
<div class="hero-chapters">
|
||||
<div class="hero-chapters-header">
|
||||
<ListBullets size={11} weight="bold" />
|
||||
<span>Up Next</span>
|
||||
</div>
|
||||
<div class="hero-chapters-header"><ListBullets size={11} weight="bold" /><span>Up Next</span></div>
|
||||
|
||||
{#if activeSlot?.kind === "empty"}
|
||||
<p class="hero-chapters-empty">No chapters to show</p>
|
||||
@@ -362,10 +290,7 @@
|
||||
{#each Array(4) as _}
|
||||
<div class="chapter-row-sk">
|
||||
<div class="sk sk-num"></div>
|
||||
<div class="sk-info">
|
||||
<div class="sk sk-name"></div>
|
||||
<div class="sk sk-meta"></div>
|
||||
</div>
|
||||
<div class="sk-info"><div class="sk sk-name"></div><div class="sk sk-meta"></div></div>
|
||||
</div>
|
||||
{/each}
|
||||
{:else if heroChapters.length === 0}
|
||||
@@ -373,12 +298,7 @@
|
||||
{:else}
|
||||
{#each heroChapters as ch (ch.id)}
|
||||
{@const isCurrent = heroEntry?.chapterId === ch.id}
|
||||
<button
|
||||
class="chapter-row"
|
||||
class:chapter-row-current={isCurrent}
|
||||
class:chapter-row-read={ch.isRead && !isCurrent}
|
||||
on:click={() => openChapter(ch)}
|
||||
>
|
||||
<button class="chapter-row" class:chapter-row-current={isCurrent} class:chapter-row-read={ch.isRead && !isCurrent} onclick={() => openChapter(ch)}>
|
||||
<span class="ch-num">Ch.{ch.chapterNumber % 1 === 0 ? Math.floor(ch.chapterNumber) : ch.chapterNumber}</span>
|
||||
<div class="ch-info">
|
||||
<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>
|
||||
{/if}
|
||||
</div>
|
||||
{#if isCurrent}
|
||||
<Play size={10} weight="fill" class="ch-play-icon" />
|
||||
{/if}
|
||||
{#if isCurrent}<Play size={10} weight="fill" class="ch-play-icon" />{/if}
|
||||
</button>
|
||||
{/each}
|
||||
{#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" />
|
||||
</button>
|
||||
{/if}
|
||||
@@ -406,24 +324,19 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ══ RECENT ACTIVITY ═════════════════════════════════════════════════════ -->
|
||||
{#if recentHistory.length > 0}
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<span class="section-title"><Clock size={10} weight="bold" /> Recent Activity</span>
|
||||
<button class="see-all" on:click={() => navPage.set("history")}>
|
||||
Full history <ArrowRight size={9} weight="bold" />
|
||||
</button>
|
||||
<button class="see-all" onclick={() => navPage = "history"}>Full history <ArrowRight size={9} weight="bold" /></button>
|
||||
</div>
|
||||
<div class="activity-list">
|
||||
{#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" />
|
||||
<div class="activity-info">
|
||||
<span class="activity-title">{entry.mangaTitle}</span>
|
||||
<span class="activity-sub">
|
||||
{entry.chapterName}{entry.pageNumber > 1 ? ` · p.${entry.pageNumber}` : ""}
|
||||
</span>
|
||||
<span class="activity-sub">{entry.chapterName}{entry.pageNumber > 1 ? ` · p.${entry.pageNumber}` : ""}</span>
|
||||
</div>
|
||||
<span class="activity-time">{timeAgo(entry.readAt)}</span>
|
||||
<span class="activity-play"><Play size={10} weight="fill" /></span>
|
||||
@@ -434,27 +347,22 @@
|
||||
{:else}
|
||||
<div class="empty-state">
|
||||
<p class="empty-text">Start reading to build your activity feed</p>
|
||||
<button class="empty-cta" on:click={() => navPage.set("library")}>
|
||||
Open Library <ArrowRight size={11} weight="bold" />
|
||||
</button>
|
||||
<button class="empty-cta" onclick={() => navPage = "library"}>Open Library <ArrowRight size={11} weight="bold" /></button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- ══ BOTTOM ROW ══════════════════════════════════════════════════════════ -->
|
||||
<div class="bottom-row">
|
||||
|
||||
<!-- Left: Completed -->
|
||||
<div class="bottom-col">
|
||||
<div class="bottom-section-hd">
|
||||
<span class="section-title"><CheckCircle size={10} weight="bold" /> Completed</span>
|
||||
{#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}
|
||||
</div>
|
||||
{#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)}
|
||||
<button class="mini-card" on:click={() => previewManga.set(m)}>
|
||||
<button class="mini-card" onclick={() => previewManga = m}>
|
||||
<div class="mini-cover-wrap">
|
||||
<img src={thumbUrl(m.thumbnailUrl)} alt={m.title} class="mini-cover" loading="lazy" decoding="async" />
|
||||
<div class="mini-gradient"></div>
|
||||
@@ -473,54 +381,17 @@
|
||||
|
||||
<div class="bottom-divider"></div>
|
||||
|
||||
<!-- Right: Stats -->
|
||||
<div class="bottom-col">
|
||||
<div class="bottom-section-hd">
|
||||
<span class="section-title"><TrendUp size={10} weight="bold" /> Your Stats</span>
|
||||
</div>
|
||||
<div class="stats-grid">
|
||||
<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-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 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-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>
|
||||
@@ -528,15 +399,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Slot picker ────────────────────────────────────────────────────────────── -->
|
||||
{#if pickerOpen}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="picker-backdrop" on:click|self={closePicker}>
|
||||
<div class="picker-backdrop" onclick={(e) => { if (e.target === e.currentTarget) closePicker(); }}>
|
||||
<div class="picker-modal">
|
||||
<div class="picker-header">
|
||||
<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 class="picker-search-wrap">
|
||||
<MagnifyingGlass size={12} weight="light" style="color:var(--text-faint);flex-shrink:0" />
|
||||
@@ -549,7 +417,7 @@
|
||||
<p class="picker-empty">No results</p>
|
||||
{:else}
|
||||
{#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" />
|
||||
<div class="picker-info">
|
||||
<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; }
|
||||
.body { flex: 1; overflow-y: auto; scrollbar-width: none; padding-bottom: var(--sp-8); }
|
||||
.body::-webkit-scrollbar { display: none; }
|
||||
|
||||
/* ══ HERO ════════════════════════════════════════════════════════════════════ */
|
||||
.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);
|
||||
}
|
||||
|
||||
/* 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-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-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-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%);
|
||||
}
|
||||
|
||||
/* ── 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-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%); }
|
||||
.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); }
|
||||
.hero-cover-col:hover .hero-cover { filter: brightness(1.1); }
|
||||
.hero-cover-col:hover .cover-resume-hint { opacity: 1; }
|
||||
.hero-cover-col:disabled { cursor: default; }
|
||||
.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;
|
||||
}
|
||||
.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-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; }
|
||||
.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); }
|
||||
.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; }
|
||||
.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-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);
|
||||
}
|
||||
.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); }
|
||||
.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-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-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);
|
||||
}
|
||||
.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); }
|
||||
.hero-prog-page { color: rgba(255,255,255,0.38); }
|
||||
.hero-prog-time { margin-left: auto; color: rgba(255,255,255,0.32); }
|
||||
.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;
|
||||
}
|
||||
.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; }
|
||||
.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-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; flex-wrap: wrap; }
|
||||
.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;
|
||||
}
|
||||
.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; }
|
||||
.hero-cta:hover:not(:disabled) { filter: brightness(1.15); }
|
||||
.hero-cta:disabled { opacity: 0.55; cursor: default; }
|
||||
.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;
|
||||
}
|
||||
.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; }
|
||||
.hero-cta-ghost:hover { background: rgba(255,255,255,0.13); color: rgba(255,255,255,0.82); }
|
||||
|
||||
/* Nav row — arrows + dots in one line at bottom of details col */
|
||||
.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-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-dots { display: flex; gap: 5px; align-items: center; }
|
||||
.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);
|
||||
}
|
||||
.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); }
|
||||
.hero-dot:hover { background: rgba(255,255,255,0.5); }
|
||||
.hero-dot.active { background: #fff; transform: scale(1.35); }
|
||||
.hero-dot.pinned { background: rgba(168,132,232,0.55); }
|
||||
.hero-dot.pinned.active { background: #c4a8f0; }
|
||||
.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;
|
||||
}
|
||||
|
||||
/* ── 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);
|
||||
}
|
||||
.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; }
|
||||
.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-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-current { background: rgba(255,255,255,0.1) !important; }
|
||||
.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;
|
||||
}
|
||||
.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; }
|
||||
.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-name {
|
||||
font-size: var(--text-xs); color: rgba(255,255,255,0.75);
|
||||
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
||||
}
|
||||
.ch-name { 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-current .ch-name { color: #fff; font-weight: var(--weight-medium); }
|
||||
.ch-meta {
|
||||
font-family: var(--font-ui); font-size: 9px; color: rgba(255,255,255,0.28);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
.ch-meta { 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); }
|
||||
: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; }
|
||||
.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-num { width: 32px; height: 10px; flex-shrink: 0; }
|
||||
.sk-name { height: 11px; width: 85%; }
|
||||
.sk-meta { height: 9px; width: 50%; }
|
||||
|
||||
/* 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 { 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); }
|
||||
|
||||
/* ══ SECTIONS ════════════════════════════════════════════════════════════════ */
|
||||
.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-title { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
|
||||
.see-all { display: flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); background: none; border: none; cursor: pointer; padding: 0; transition: color var(--t-base); }
|
||||
.see-all:hover { color: var(--accent-fg); }
|
||||
|
||||
/* ── Activity ─────────────────────────────────────────────────────────────── */
|
||||
.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: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-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); }
|
||||
|
||||
/* ── 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-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-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: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-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::-webkit-scrollbar { display: none; }
|
||||
.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 { will-change: transform; }
|
||||
.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);
|
||||
}
|
||||
.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); }
|
||||
.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-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--sp-2); pointer-events: none; }
|
||||
.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);
|
||||
}
|
||||
.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); }
|
||||
.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); }
|
||||
.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);
|
||||
}
|
||||
.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); }
|
||||
.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-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-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; }
|
||||
|
||||
/* ── 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-text { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: var(--tracking-wide); }
|
||||
.empty-cta { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 7px 16px; border-radius: var(--radius-full); background: var(--accent-muted); border: 1px solid var(--accent-dim); color: var(--accent-fg); cursor: pointer; transition: filter var(--t-base); }
|
||||
.empty-cta:hover { filter: brightness(1.1); }
|
||||
|
||||
.picker-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-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-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); }
|
||||
|
||||
@keyframes fadeIn { from { opacity: 0 } to { opacity: 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 } }
|
||||
|
||||
+107
-283
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { MagnifyingGlass, Books, DownloadSimple, Folder, FolderSimplePlus, Trash } from "phosphor-svelte";
|
||||
import { gql, thumbUrl } from "../../lib/client";
|
||||
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_GAP = 16;
|
||||
|
||||
let allManga: Manga[] = []; // inLibrary only — used for Saved tab, tags, counts
|
||||
let allMangaUnfiltered: Manga[] = []; // every manga Suwayomi knows — used for folder tabs
|
||||
let loading = true;
|
||||
let error: string | null = null;
|
||||
let retryCount = 0;
|
||||
let search = "";
|
||||
let renderVisible = 0;
|
||||
let scrollEl: HTMLDivElement;
|
||||
let containerWidth = 800;
|
||||
let ctx: { x: number; y: number; manga: Manga } | null = null;
|
||||
let emptyCtx: { x: number; y: number } | null = null;
|
||||
let allManga: Manga[] = $state([]);
|
||||
let allMangaUnfiltered: Manga[] = $state([]);
|
||||
let loading: boolean = $state(true);
|
||||
let error: string|null = $state(null);
|
||||
let retryCount: number = $state(0);
|
||||
let search: string = $state("");
|
||||
let renderVisible: number = $state(0);
|
||||
let scrollEl: HTMLDivElement;
|
||||
let containerWidth: number = $state(800);
|
||||
let ctx: { x: number; y: number; manga: Manga } | null = $state(null);
|
||||
let emptyCtx: { x: number; y: number } | null = $state(null);
|
||||
|
||||
let prevChapterId: number | null = null;
|
||||
$: {
|
||||
|
||||
$effect(() => {
|
||||
const wasOpen = prevChapterId !== null;
|
||||
prevChapterId = $activeChapter?.id ?? null;
|
||||
if (wasOpen && !$activeChapter) cache.clear(CACHE_KEYS.LIBRARY);
|
||||
}
|
||||
prevChapterId = activeChapter?.id ?? null;
|
||||
if (wasOpen && !activeChapter) cache.clear(CACHE_KEYS.LIBRARY);
|
||||
});
|
||||
|
||||
function fetchLibrary() {
|
||||
return cache.get(
|
||||
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,
|
||||
CACHE_GROUPS.LIBRARY,
|
||||
);
|
||||
@@ -43,167 +44,105 @@
|
||||
|
||||
function loadData() {
|
||||
fetchLibrary()
|
||||
.then((nodes) => {
|
||||
allManga = dedupeMangaByTitle(dedupeMangaById(nodes), $settings.mangaLinks);
|
||||
error = null;
|
||||
})
|
||||
.catch((e) => error = e.message)
|
||||
.then(nodes => { allManga = dedupeMangaByTitle(dedupeMangaById(nodes), settings.mangaLinks); error = null; })
|
||||
.catch(e => error = e.message)
|
||||
.finally(() => loading = false);
|
||||
|
||||
cache.get(CACHE_KEYS.ALL_MANGA, () =>
|
||||
gql<{ mangas: { nodes: Manga[] } }>(GET_ALL_MANGA).then((d) => d.mangas.nodes),
|
||||
DEFAULT_TTL_MS,
|
||||
CACHE_GROUPS.LIBRARY,
|
||||
).then((nodes) => {
|
||||
allMangaUnfiltered = dedupeMangaById(nodes);
|
||||
}).catch(console.error);
|
||||
gql<{ mangas: { nodes: Manga[] } }>(GET_ALL_MANGA).then(d => d.mangas.nodes),
|
||||
DEFAULT_TTL_MS, CACHE_GROUPS.LIBRARY,
|
||||
).then(nodes => { allMangaUnfiltered = dedupeMangaById(nodes); }).catch(console.error);
|
||||
}
|
||||
|
||||
$: {
|
||||
$effect(() => {
|
||||
retryCount;
|
||||
loading = true; error = null;
|
||||
if (retryCount > 0) cache.clear(CACHE_KEYS.LIBRARY);
|
||||
loadData();
|
||||
}
|
||||
});
|
||||
|
||||
$: if (scrollEl) scrollEl.scrollTo({ top: 0 });
|
||||
$effect(() => { if (scrollEl) scrollEl.scrollTo({ top: 0 }); });
|
||||
|
||||
$: {
|
||||
const f = $settings.folders.find((f) => f.id === $libraryFilter);
|
||||
if (f && !f.showTab) libraryFilter.set("library");
|
||||
}
|
||||
$effect(() => {
|
||||
const f = settings.folders.find(f => f.id === libraryFilter);
|
||||
if (f && !f.showTab) libraryFilter = "library";
|
||||
});
|
||||
|
||||
const isBuiltin = (f: string) => f === "library" || f === "downloaded";
|
||||
|
||||
$: filtered = (() => {
|
||||
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 folderPool = $derived((() => {
|
||||
const seen = new Set(allManga.map(m => 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,
|
||||
downloaded: allManga.filter((m) => (m.downloadCount ?? 0) > 0).length,
|
||||
...$settings.folders.reduce((a, f) => ({
|
||||
...a,
|
||||
[f.id]: folderPool.filter((m) => f.mangaIds.includes(m.id)).length,
|
||||
}), {} as Record<string, number>),
|
||||
};
|
||||
downloaded: allManga.filter(m => (m.downloadCount ?? 0) > 0).length,
|
||||
...settings.folders.reduce((a, f) => ({ ...a, [f.id]: folderPool.filter(m => f.mangaIds.includes(m.id)).length }), {} as Record<string, number>),
|
||||
});
|
||||
|
||||
function loadMore() { renderVisible += settings.renderLimit ?? 48; }
|
||||
|
||||
async function removeFromLibrary(manga: Manga) {
|
||||
await gql(UPDATE_MANGA, { id: manga.id, inLibrary: false }).catch(console.error);
|
||||
allManga = allManga.filter((m) => m.id !== manga.id);
|
||||
cache.clearGroup(CACHE_GROUPS.LIBRARY); // clears "library" + "all_manga_unfiltered" + notifies subscribers
|
||||
allManga = allManga.filter(m => m.id !== manga.id);
|
||||
cache.clearGroup(CACHE_GROUPS.LIBRARY);
|
||||
}
|
||||
|
||||
async function deleteAllDownloads(manga: Manga) {
|
||||
try {
|
||||
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;
|
||||
await gql(DELETE_DOWNLOADED_CHAPTERS, { ids });
|
||||
await Promise.allSettled(ids.map((id) => gql(DEQUEUE_DOWNLOAD, { chapterId: id })));
|
||||
allManga = allManga.map((m) => m.id === manga.id ? { ...m, downloadCount: 0 } : m);
|
||||
await Promise.allSettled(ids.map(id => gql(DEQUEUE_DOWNLOAD, { chapterId: id })));
|
||||
allManga = allManga.map(m => m.id === manga.id ? { ...m, downloadCount: 0 } : m);
|
||||
} catch (e) { console.error(e); }
|
||||
}
|
||||
|
||||
function openCtx(e: MouseEvent, m: Manga) {
|
||||
e.preventDefault();
|
||||
ctx = { x: e.clientX, y: e.clientY, manga: m };
|
||||
}
|
||||
function openCtx(e: MouseEvent, m: Manga) { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, manga: m }; }
|
||||
|
||||
function buildCtxItems(m: Manga): MenuEntry[] {
|
||||
const mangaFolders = getMangaFolders(m.id);
|
||||
const folderEntries: MenuEntry[] = $settings.folders.map((f) => {
|
||||
const inFolder = mangaFolders.some((mf) => mf.id === f.id);
|
||||
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),
|
||||
};
|
||||
const folderEntries: MenuEntry[] = settings.folders.map(f => {
|
||||
const inFolder = mangaFolders.some(mf => mf.id === f.id);
|
||||
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) };
|
||||
});
|
||||
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: "Delete all downloads",
|
||||
icon: Trash,
|
||||
danger: true,
|
||||
disabled: !(m.downloadCount && m.downloadCount > 0),
|
||||
onClick: () => deleteAllDownloads(m),
|
||||
},
|
||||
{ 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: "Delete all downloads", icon: Trash, danger: true, disabled: !(m.downloadCount && m.downloadCount > 0), onClick: () => deleteAllDownloads(m) },
|
||||
...(folderEntries.length ? [{ separator: true } as MenuEntry, ...folderEntries] : []),
|
||||
{ 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[] {
|
||||
return [{
|
||||
label: "New folder",
|
||||
icon: FolderSimplePlus,
|
||||
onClick: () => { const name = prompt("Folder name:"); if (name?.trim()) addFolder(name.trim()); },
|
||||
}];
|
||||
return [{ label: "New folder", icon: FolderSimplePlus, onClick: () => { const name = prompt("Folder name:"); if (name?.trim()) addFolder(name.trim()); } }];
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
@@ -218,13 +157,13 @@
|
||||
class="root"
|
||||
role="presentation"
|
||||
bind:this={scrollEl}
|
||||
on:contextmenu={(e) => {
|
||||
oncontextmenu={(e) => {
|
||||
if ((e.target as HTMLElement).closest("button")) return;
|
||||
e.preventDefault();
|
||||
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">
|
||||
<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"/>
|
||||
@@ -249,7 +188,7 @@
|
||||
<div class="center">
|
||||
<p class="error-msg">Could not reach Suwayomi</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>
|
||||
{:else}
|
||||
<div class="header">
|
||||
@@ -257,15 +196,15 @@
|
||||
<span class="heading">Library</span>
|
||||
<div class="tabs">
|
||||
{#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" />
|
||||
{:else if f === "downloaded"}<DownloadSimple size={11} weight="bold" />{/if}
|
||||
{label}
|
||||
<span class="tab-count">{counts[f] ?? 0}</span>
|
||||
</button>
|
||||
{/each}
|
||||
{#each $settings.folders.filter((f) => f.showTab) as folder}
|
||||
<button class="tab" class:active={$libraryFilter === folder.id} on:click={() => libraryFilter.set(folder.id)}>
|
||||
{#each settings.folders.filter(f => f.showTab) as folder}
|
||||
<button class="tab" class:active={libraryFilter === folder.id} onclick={() => libraryFilter = folder.id}>
|
||||
<Folder size={11} weight="bold" />
|
||||
{folder.name}
|
||||
<span class="tab-count">{counts[folder.id] ?? 0}</span>
|
||||
@@ -290,25 +229,16 @@
|
||||
</div>
|
||||
{:else if filtered.length === 0}
|
||||
<div class="center">
|
||||
{$libraryFilter === "library" ? "No manga saved to library — browse sources to add some."
|
||||
: $libraryFilter === "downloaded" ? "No downloaded manga."
|
||||
{libraryFilter === "library" ? "No manga saved to library — browse sources to add some."
|
||||
: libraryFilter === "downloaded" ? "No downloaded manga."
|
||||
: "No manga in this folder yet. Right-click manga anywhere to assign them."}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid" style="--cols:{cols}">
|
||||
{#each visibleManga as m (m.id)}
|
||||
<button
|
||||
class="card"
|
||||
on:click={() => activeManga.set(m)}
|
||||
on:contextmenu={(e) => openCtx(e, m)}
|
||||
>
|
||||
<button class="card" onclick={() => activeManga = m} oncontextmenu={(e) => openCtx(e, m)}>
|
||||
<div class="cover-wrap">
|
||||
<img
|
||||
src={thumbUrl(m.thumbnailUrl)} alt={m.title}
|
||||
class="cover"
|
||||
style="object-fit:{$settings.libraryCropCovers ? 'cover' : 'contain'}"
|
||||
loading="lazy" decoding="async"
|
||||
/>
|
||||
<img 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.unreadCount}<span class="badge-unread">{m.unreadCount}</span>{/if}
|
||||
</div>
|
||||
@@ -318,8 +248,8 @@
|
||||
</div>
|
||||
{#if hasMore}
|
||||
<div class="load-more-row">
|
||||
<button class="load-more-btn" on:click={loadMore}>
|
||||
Show {Math.min(remainingCount, $settings.renderLimit ?? 48)} more
|
||||
<button class="load-more-btn" onclick={loadMore}>
|
||||
Show {Math.min(remainingCount, settings.renderLimit ?? 48)} more
|
||||
<span class="load-more-count">({remainingCount} remaining)</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -336,148 +266,42 @@
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.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; }
|
||||
.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; }
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
.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; }
|
||||
.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.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; }
|
||||
|
||||
.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 {
|
||||
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 { 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: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);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: none; border: none; padding: 0;
|
||||
cursor: pointer; text-align: left;
|
||||
}
|
||||
.grid { 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 .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; }
|
||||
|
||||
.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-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);
|
||||
}
|
||||
|
||||
.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-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; }
|
||||
.cover-skeleton { aspect-ratio: 2/3; border-radius: var(--radius-md); }
|
||||
.title-skeleton { height: 12px; margin-top: var(--sp-2); width: 80%; border-radius: var(--radius-sm); }
|
||||
|
||||
.load-more-row {
|
||||
display: flex; justify-content: center;
|
||||
padding: var(--sp-5) 0 var(--sp-2);
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.load-more-btn {
|
||||
display: flex; align-items: center; gap: var(--sp-2);
|
||||
font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
|
||||
padding: 8px 20px; border-radius: var(--radius-full);
|
||||
border: 1px solid var(--border-dim); background: var(--bg-raised); color: var(--text-muted);
|
||||
cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.load-more-row { display: flex; justify-content: center; padding: var(--sp-5) 0 var(--sp-2); position: relative; z-index: 1; }
|
||||
.load-more-btn { display: flex; align-items: center; gap: var(--sp-2); font-family: var(--font-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); padding: 8px 20px; border-radius: var(--radius-full); border: 1px solid var(--border-dim); background: var(--bg-raised); color: var(--text-muted); cursor: pointer; transition: color var(--t-base), border-color var(--t-base), background var(--t-base); }
|
||||
.load-more-btn:hover { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
|
||||
.load-more-count { color: var(--text-faint); font-size: var(--text-2xs); }
|
||||
|
||||
.center {
|
||||
position: relative; z-index: 1;
|
||||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||||
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-detail { color: var(--text-faint); font-size: var(--text-sm); }
|
||||
.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);
|
||||
}
|
||||
.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); }
|
||||
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
|
||||
</style>
|
||||
|
||||
@@ -1,59 +1,51 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import {
|
||||
ArrowLeft, BookmarkSimple, Download, CheckCircle, Circle,
|
||||
ArrowSquareOut, CircleNotch, Play, SortAscending, SortDescending,
|
||||
CaretDown, ArrowsClockwise, List, SquaresFour, FolderSimplePlus, Trash, DownloadSimple, X,
|
||||
} from "phosphor-svelte";
|
||||
import { onMount } from "svelte";
|
||||
import { 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 {
|
||||
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 { 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 { settings, activeManga, activeChapter, genreFilter, navPage, addToast, updateSettings, addFolder, assignMangaToFolder, removeMangaFromFolder, getMangaFolders, openReader, checkAndMarkCompleted } from "../../store";
|
||||
import type { Manga, Chapter } from "../../lib/types";
|
||||
import ContextMenu, { type MenuEntry } from "../shared/ContextMenu.svelte";
|
||||
import MigrateModal from "./MigrateModal.svelte";
|
||||
|
||||
const CHAPTERS_PER_PAGE = 25;
|
||||
const MANGA_TTL_MS = 5 * 60 * 1000;
|
||||
const CHAPTER_TTL_MS = 2 * 60 * 1000;
|
||||
const CHAPTERS_PER_PAGE = 25;
|
||||
const MANGA_TTL_MS = 5 * 60 * 1000;
|
||||
const CHAPTER_TTL_MS = 2 * 60 * 1000;
|
||||
|
||||
const mangaStore: Map<number, { data: Manga; fetchedAt: number }> = new Map();
|
||||
const chapterStore: Map<number, { data: Chapter[]; fetchedAt: number }> = new Map();
|
||||
|
||||
let manga: Manga | null = null;
|
||||
let chapters: Chapter[] = [];
|
||||
let loadingManga = false;
|
||||
let loadingChapters = true;
|
||||
let enqueueing: Set<number> = new Set();
|
||||
let dlOpen = false;
|
||||
let detailsOpen = false;
|
||||
let togglingLibrary = false;
|
||||
let chapterPage = 1;
|
||||
let ctx: { x: number; y: number; chapter: Chapter; idx: number } | null = null;
|
||||
let jumpOpen = false;
|
||||
let jumpInput = "";
|
||||
let viewMode: "list" | "grid" = "list";
|
||||
let deletingAll = false;
|
||||
let refreshing = false;
|
||||
let descExpanded = false;
|
||||
let genresExpanded = false;
|
||||
let folderPickerOpen = false;
|
||||
let folderCreating = false;
|
||||
let folderNewName = "";
|
||||
let rangeFrom = "";
|
||||
let rangeTo = "";
|
||||
let showRange = false;
|
||||
let dlDropRef: HTMLDivElement;
|
||||
let manga: Manga | null = $state(null);
|
||||
let chapters: Chapter[] = $state([]);
|
||||
let loadingManga: boolean = $state(false);
|
||||
let loadingChapters: boolean = $state(true);
|
||||
let enqueueing: Set<number> = $state(new Set());
|
||||
let dlOpen: boolean = $state(false);
|
||||
let detailsOpen: boolean = $state(false);
|
||||
let togglingLibrary: boolean = $state(false);
|
||||
let chapterPage: number = $state(1);
|
||||
let ctx: { x: number; y: number; chapter: Chapter; idx: number } | null = $state(null);
|
||||
let jumpOpen: boolean = $state(false);
|
||||
let jumpInput: string = $state("");
|
||||
let viewMode: "list" | "grid" = $state("list");
|
||||
let deletingAll: boolean = $state(false);
|
||||
let refreshing: boolean = $state(false);
|
||||
let descExpanded: boolean = $state(false);
|
||||
let genresExpanded: boolean = $state(false);
|
||||
let folderPickerOpen: boolean = $state(false);
|
||||
let folderCreating: boolean = $state(false);
|
||||
let folderNewName: string = $state("");
|
||||
let rangeFrom: string = $state("");
|
||||
let rangeTo: string = $state("");
|
||||
let showRange: boolean = $state(false);
|
||||
let migrateOpen: boolean = $state(false);
|
||||
let dlDropRef: HTMLDivElement;
|
||||
let folderPickerRef: HTMLDivElement;
|
||||
let migrateOpen = false;
|
||||
|
||||
let mangaAbort: AbortController | null = null;
|
||||
let mangaAbort: 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 {
|
||||
if (!ts) return "";
|
||||
@@ -64,125 +56,100 @@
|
||||
|
||||
function applyChapters(nodes: Chapter[]) {
|
||||
chapters = nodes;
|
||||
// Passive completion check — runs every time the chapter list is loaded
|
||||
// or refreshed. Covers: opening SeriesDetail, returning from reader,
|
||||
// background refresh. Only checks if manga is already in library.
|
||||
if ($activeManga && nodes.length > 0) {
|
||||
checkAndMarkCompleted($activeManga.id, nodes);
|
||||
}
|
||||
if (activeManga && nodes.length > 0) checkAndMarkCompleted(activeManga.id, nodes);
|
||||
}
|
||||
|
||||
$: sortDir = $settings.chapterSortDir;
|
||||
$: sortedChapters = sortDir === "desc" ? [...chapters].reverse() : [...chapters];
|
||||
$: totalPages = Math.ceil(sortedChapters.length / CHAPTERS_PER_PAGE);
|
||||
$: pageChapters = sortedChapters.slice((chapterPage - 1) * CHAPTERS_PER_PAGE, chapterPage * CHAPTERS_PER_PAGE);
|
||||
$: readCount = chapters.filter((c) => c.isRead).length;
|
||||
$: totalCount = chapters.length;
|
||||
$: progressPct = totalCount > 0 ? (readCount / totalCount) * 100 : 0;
|
||||
$: downloadedCount = chapters.filter((c) => c.isDownloaded).length;
|
||||
const sortDir = $derived(settings.chapterSortDir);
|
||||
const sortedChapters = $derived(sortDir === "desc" ? [...chapters].reverse() : [...chapters]);
|
||||
const totalPages = $derived(Math.ceil(sortedChapters.length / CHAPTERS_PER_PAGE));
|
||||
const pageChapters = $derived(sortedChapters.slice((chapterPage - 1) * CHAPTERS_PER_PAGE, chapterPage * CHAPTERS_PER_PAGE));
|
||||
const readCount = $derived(chapters.filter(c => c.isRead).length);
|
||||
const totalCount = $derived(chapters.length);
|
||||
const progressPct = $derived(totalCount > 0 ? (readCount / totalCount) * 100 : 0);
|
||||
const downloadedCount = $derived(chapters.filter(c => c.isDownloaded).length);
|
||||
|
||||
$: continueChapter = (() => {
|
||||
const continueChapter = $derived((() => {
|
||||
if (!chapters.length) return null;
|
||||
const asc = [...chapters].sort((a, b) => a.sourceOrder - b.sourceOrder);
|
||||
const anyRead = asc.some((c) => c.isRead);
|
||||
const inProgress = asc.find((c) => !c.isRead && (c.lastPageRead ?? 0) > 0);
|
||||
const anyRead = asc.some(c => c.isRead);
|
||||
const inProgress = asc.find(c => !c.isRead && (c.lastPageRead ?? 0) > 0);
|
||||
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 };
|
||||
return { chapter: asc[0], type: "reread" as const };
|
||||
})();
|
||||
})());
|
||||
|
||||
$: statusLabel = manga?.status
|
||||
? manga.status.charAt(0) + manga.status.slice(1).toLowerCase()
|
||||
: null;
|
||||
|
||||
$: assignedFolders = $activeManga ? getMangaFolders($activeManga.id) : [];
|
||||
$: hasFolders = assignedFolders.length > 0;
|
||||
const statusLabel = $derived(manga?.status ? manga.status.charAt(0) + manga.status.slice(1).toLowerCase() : null);
|
||||
const assignedFolders = $derived(activeManga ? getMangaFolders(activeManga.id) : []);
|
||||
const hasFolders = $derived(assignedFolders.length > 0);
|
||||
|
||||
function loadManga(id: number) {
|
||||
mangaAbort?.abort();
|
||||
const ctrl = new AbortController();
|
||||
mangaAbort = ctrl;
|
||||
loadingFor = id;
|
||||
|
||||
const cached = mangaStore.get(id);
|
||||
const now = Date.now();
|
||||
|
||||
if (cached) {
|
||||
manga = cached.data;
|
||||
loadingManga = false;
|
||||
if (now - cached.fetchedAt < MANGA_TTL_MS) return;
|
||||
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) => {
|
||||
manga = cached.data; loadingManga = false;
|
||||
if (Date.now() - cached.fetchedAt < MANGA_TTL_MS) return;
|
||||
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; });
|
||||
}).catch(() => {});
|
||||
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) {
|
||||
chapterAbort?.abort();
|
||||
const ctrl = new AbortController();
|
||||
chapterAbort = ctrl;
|
||||
|
||||
const cached = chapterStore.get(id);
|
||||
const now = Date.now();
|
||||
|
||||
if (cached) {
|
||||
applyChapters(cached.data);
|
||||
loadingChapters = false;
|
||||
if (now - cached.fetchedAt < CHAPTER_TTL_MS) return;
|
||||
applyChapters(cached.data); loadingChapters = false;
|
||||
if (Date.now() - cached.fetchedAt < CHAPTER_TTL_MS) return;
|
||||
gql(FETCH_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;
|
||||
chapterStore.set(id, { data: d.chapters.nodes, fetchedAt: Date.now() });
|
||||
applyChapters(d.chapters.nodes);
|
||||
}).catch(() => {});
|
||||
return;
|
||||
}
|
||||
|
||||
chapters = [];
|
||||
loadingChapters = true;
|
||||
gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: id }, ctrl.signal)
|
||||
.then((d) => {
|
||||
if (ctrl.signal.aborted || loadingFor !== id) return;
|
||||
applyChapters(d.chapters.nodes);
|
||||
loadingChapters = false;
|
||||
return gql(FETCH_CHAPTERS, { mangaId: id }, ctrl.signal)
|
||||
.then(() => gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: id }, ctrl.signal))
|
||||
.then((fresh) => {
|
||||
if (ctrl.signal.aborted || loadingFor !== id) return;
|
||||
chapterStore.set(id, { data: fresh.chapters.nodes, fetchedAt: Date.now() });
|
||||
applyChapters(fresh.chapters.nodes);
|
||||
});
|
||||
}).catch(() => { if (!ctrl.signal.aborted) loadingChapters = false; });
|
||||
chapters = []; loadingChapters = true;
|
||||
gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: id }, ctrl.signal).then(d => {
|
||||
if (ctrl.signal.aborted || loadingFor !== id) return;
|
||||
applyChapters(d.chapters.nodes); loadingChapters = false;
|
||||
return gql(FETCH_CHAPTERS, { mangaId: id }, ctrl.signal)
|
||||
.then(() => gql<{ chapters: { nodes: Chapter[] } }>(GET_CHAPTERS, { mangaId: id }, ctrl.signal))
|
||||
.then(fresh => {
|
||||
if (ctrl.signal.aborted || loadingFor !== id) return;
|
||||
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;
|
||||
$: {
|
||||
$effect(() => {
|
||||
const wasOpen = prevChapterId !== null;
|
||||
prevChapterId = $activeChapter?.id ?? null;
|
||||
if (wasOpen && !$activeChapter && $activeManga) {
|
||||
loadChapters($activeManga.id);
|
||||
cache.clear(CACHE_KEYS.LIBRARY);
|
||||
}
|
||||
}
|
||||
prevChapterId = activeChapter?.id ?? null;
|
||||
if (wasOpen && !activeChapter && activeManga) { loadChapters(activeManga.id); cache.clear(CACHE_KEYS.LIBRARY); }
|
||||
});
|
||||
|
||||
async function toggleLibrary() {
|
||||
if (!manga) return;
|
||||
@@ -190,10 +157,7 @@
|
||||
const next = !manga.inLibrary;
|
||||
await gql(UPDATE_MANGA, { id: manga.id, inLibrary: next }).catch(console.error);
|
||||
manga = { ...manga, inLibrary: next };
|
||||
if (mangaStore.has(manga.id)) {
|
||||
const e = mangaStore.get(manga.id)!;
|
||||
mangaStore.set(manga.id, { ...e, data: manga });
|
||||
}
|
||||
if (mangaStore.has(manga.id)) { const e = mangaStore.get(manga.id)!; mangaStore.set(manga.id, { ...e, data: manga }); }
|
||||
cache.clear(CACHE_KEYS.LIBRARY);
|
||||
togglingLibrary = false;
|
||||
}
|
||||
@@ -210,136 +174,127 @@
|
||||
await gql(ENQUEUE_DOWNLOAD, { chapterId: ch.id }).catch(console.error);
|
||||
addToast({ kind: "download", title: "Download queued", body: ch.name });
|
||||
enqueueing.delete(ch.id); enqueueing = new Set(enqueueing);
|
||||
if ($activeManga) reloadChapters($activeManga.id);
|
||||
if (activeManga) reloadChapters(activeManga.id);
|
||||
}
|
||||
|
||||
async function enqueueMultiple(chapterIds: number[]) {
|
||||
if (!chapterIds.length) return;
|
||||
await gql(ENQUEUE_CHAPTERS_DOWNLOAD, { chapterIds }).catch(console.error);
|
||||
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) {
|
||||
await gql(MARK_CHAPTER_READ, { id: chapterId, isRead }).catch(console.error);
|
||||
chapters = chapters.map((c) => c.id === chapterId ? { ...c, isRead } : c);
|
||||
if ($activeManga) {
|
||||
chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() });
|
||||
checkAndMarkCompleted($activeManga.id, chapters);
|
||||
}
|
||||
chapters = chapters.map(c => c.id === chapterId ? { ...c, isRead } : c);
|
||||
if (activeManga) { chapterStore.set(activeManga.id, { data: chapters, fetchedAt: Date.now() }); checkAndMarkCompleted(activeManga.id, chapters); }
|
||||
}
|
||||
|
||||
async function markBulk(ids: number[], isRead: boolean) {
|
||||
if (!ids.length) return;
|
||||
await gql(MARK_CHAPTERS_READ, { ids, isRead }).catch(console.error);
|
||||
const idSet = new Set(ids);
|
||||
chapters = chapters.map((c) => idSet.has(c.id) ? { ...c, isRead } : c);
|
||||
if ($activeManga) {
|
||||
chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() });
|
||||
checkAndMarkCompleted($activeManga.id, chapters);
|
||||
}
|
||||
chapters = chapters.map(c => idSet.has(c.id) ? { ...c, isRead } : c);
|
||||
if (activeManga) { chapterStore.set(activeManga.id, { data: chapters, fetchedAt: Date.now() }); checkAndMarkCompleted(activeManga.id, chapters); }
|
||||
}
|
||||
|
||||
const markAboveRead = (i: number) => markBulk(sortedChapters.slice(0, i + 1).filter((c) => !c.isRead).map((c) => c.id), true);
|
||||
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 markBelowUnread = (i: number) => markBulk(sortedChapters.slice(i).filter((c) => c.isRead).map((c) => c.id), false);
|
||||
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 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);
|
||||
|
||||
async function deleteDownloaded(chapterId: number) {
|
||||
await gql(DELETE_DOWNLOADED_CHAPTERS, { ids: [chapterId] }).catch(console.error);
|
||||
chapters = chapters.map((c) => c.id === chapterId ? { ...c, isDownloaded: false } : c);
|
||||
if ($activeManga) chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() });
|
||||
chapters = chapters.map(c => c.id === chapterId ? { ...c, isDownloaded: false } : c);
|
||||
if (activeManga) chapterStore.set(activeManga.id, { data: chapters, fetchedAt: Date.now() });
|
||||
}
|
||||
|
||||
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;
|
||||
deletingAll = true;
|
||||
await gql(DELETE_DOWNLOADED_CHAPTERS, { ids }).catch(console.error);
|
||||
chapters = chapters.map((c) => ({ ...c, isDownloaded: false }));
|
||||
if ($activeManga) chapterStore.set($activeManga.id, { data: chapters, fetchedAt: Date.now() });
|
||||
chapters = chapters.map(c => ({ ...c, isDownloaded: false }));
|
||||
if (activeManga) chapterStore.set(activeManga.id, { data: chapters, fetchedAt: Date.now() });
|
||||
deletingAll = false;
|
||||
}
|
||||
|
||||
async function refreshChapters() {
|
||||
if (!$activeManga || refreshing) return;
|
||||
if (!activeManga || refreshing) return;
|
||||
refreshing = true;
|
||||
chapterStore.delete($activeManga.id);
|
||||
gql(FETCH_CHAPTERS, { mangaId: $activeManga.id })
|
||||
.then(() => reloadChapters($activeManga!.id))
|
||||
chapterStore.delete(activeManga.id);
|
||||
gql(FETCH_CHAPTERS, { mangaId: activeManga.id })
|
||||
.then(() => reloadChapters(activeManga!.id))
|
||||
.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);
|
||||
}
|
||||
|
||||
function buildCtxItems(ch: Chapter, idx: number): MenuEntry[] {
|
||||
const above = sortedChapters.slice(0, idx + 1);
|
||||
const below = sortedChapters.slice(idx);
|
||||
const last = sortedChapters.length - 1;
|
||||
const above = sortedChapters.slice(0, idx + 1), below = sortedChapters.slice(idx), last = sortedChapters.length - 1;
|
||||
return [
|
||||
{ label: ch.isRead ? "Mark as unread" : "Mark as read", icon: ch.isRead ? Circle : CheckCircle, onClick: () => markRead(ch.id, !ch.isRead) },
|
||||
{ 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 unread", icon: Circle, onClick: () => markAboveUnread(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 },
|
||||
{ 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 unread", icon: Circle, onClick: () => markBelowUnread(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 },
|
||||
{ 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) },
|
||||
{ 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 all from here", icon: DownloadSimple, onClick: () => enqueueMultiple(sortedChapters.slice(idx).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)) },
|
||||
];
|
||||
}
|
||||
|
||||
function handleDlOutside(e: MouseEvent) {
|
||||
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 handleDlOutside(e: MouseEvent) { 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 = ""; } }
|
||||
|
||||
$: if (dlOpen) { setTimeout(() => document.addEventListener("mousedown", handleDlOutside, true), 0); }
|
||||
else { document.removeEventListener("mousedown", handleDlOutside, true); }
|
||||
$: if (folderPickerOpen){ setTimeout(() => document.addEventListener("mousedown", handleFolderOutside, true), 0); }
|
||||
else { document.removeEventListener("mousedown", handleFolderOutside, true); }
|
||||
$effect(() => {
|
||||
if (dlOpen) { setTimeout(() => document.addEventListener("mousedown", handleDlOutside, true), 0); }
|
||||
else document.removeEventListener("mousedown", handleDlOutside, true);
|
||||
});
|
||||
$effect(() => {
|
||||
if (folderPickerOpen) { setTimeout(() => document.addEventListener("mousedown", handleFolderOutside, true), 0); }
|
||||
else document.removeEventListener("mousedown", handleFolderOutside, true);
|
||||
});
|
||||
|
||||
function enqueueNext(n: number) {
|
||||
if (!continueChapter) return;
|
||||
const idx = sortedChapters.indexOf(continueChapter.chapter);
|
||||
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() {
|
||||
const from = parseFloat(rangeFrom), to = parseFloat(rangeTo);
|
||||
if (isNaN(from) || isNaN(to)) return;
|
||||
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() {
|
||||
const name = folderNewName.trim();
|
||||
if (!name || !$activeManga) return;
|
||||
if (!name || !activeManga) return;
|
||||
const id = addFolder(name);
|
||||
assignMangaToFolder(id, $activeManga.id);
|
||||
assignMangaToFolder(id, activeManga.id);
|
||||
folderNewName = ""; folderCreating = false;
|
||||
}
|
||||
|
||||
onDestroy(() => { mangaAbort?.abort(); chapterAbort?.abort(); });
|
||||
onMount(() => () => { mangaAbort?.abort(); chapterAbort?.abort(); });
|
||||
</script>
|
||||
|
||||
{#if $activeManga}
|
||||
<div class="root" role="presentation" on:contextmenu|preventDefault>
|
||||
{#if activeManga}
|
||||
<div class="root" role="presentation" oncontextmenu={(e) => e.preventDefault()}>
|
||||
|
||||
|
||||
<div class="sidebar">
|
||||
<button class="back" on:click={() => activeManga.set(null)}>
|
||||
<button class="back" onclick={() => activeManga = null}>
|
||||
<ArrowLeft size={13} weight="light" /> Back
|
||||
</button>
|
||||
|
||||
<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>
|
||||
|
||||
{#if loadingManga}
|
||||
@@ -359,10 +314,10 @@
|
||||
{#if manga?.genre?.length}
|
||||
<div class="genres">
|
||||
{#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}
|
||||
{#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}`}
|
||||
</button>
|
||||
{/if}
|
||||
@@ -372,7 +327,7 @@
|
||||
<div class="desc-wrap">
|
||||
<p class="desc" class:expanded={descExpanded}>{manga.description}</p>
|
||||
{#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}
|
||||
</div>
|
||||
{/if}
|
||||
@@ -390,7 +345,7 @@
|
||||
{/if}
|
||||
|
||||
<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"} />
|
||||
{manga?.inLibrary ? "In Library" : "Add to Library"}
|
||||
</button>
|
||||
@@ -402,7 +357,7 @@
|
||||
</div>
|
||||
|
||||
{#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" />
|
||||
{continueChapter.type === "continue"
|
||||
? `Continue · Ch.${continueChapter.chapter.chapterNumber}${(continueChapter.chapter.lastPageRead ?? 0) > 0 ? ` p.${continueChapter.chapter.lastPageRead}` : ""}`
|
||||
@@ -414,7 +369,7 @@
|
||||
|
||||
{#if !loadingManga && manga?.source}
|
||||
<div class="details-section">
|
||||
<button class="details-toggle" on:click={() => detailsOpen = !detailsOpen}>
|
||||
<button class="details-toggle" onclick={() => detailsOpen = !detailsOpen}>
|
||||
<span>Details</span>
|
||||
<CaretDown size={11} weight="light" style="transform:{detailsOpen ? 'rotate(180deg)' : 'rotate(0)'};transition:transform 0.15s ease" />
|
||||
</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.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}
|
||||
<button class="migrate-btn" on:click={() => migrateOpen = true}>
|
||||
<button class="migrate-btn" onclick={() => migrateOpen = true}>
|
||||
<ArrowsClockwise size={12} weight="light" /> Switch source
|
||||
</button>
|
||||
{#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})`}
|
||||
</button>
|
||||
{/if}
|
||||
@@ -438,37 +393,35 @@
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="list-wrap">
|
||||
<div class="list-header">
|
||||
<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}
|
||||
{sortDir === "desc" ? "Newest first" : "Oldest first"}
|
||||
</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}
|
||||
</button>
|
||||
</div>
|
||||
<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" : ""} />
|
||||
</button>
|
||||
|
||||
|
||||
<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"} />
|
||||
</button>
|
||||
{#if folderPickerOpen}
|
||||
<div class="fp-menu">
|
||||
{#if $settings.folders.length === 0 && !folderCreating}
|
||||
{#if settings.folders.length === 0 && !folderCreating}
|
||||
<p class="fp-empty">No folders yet</p>
|
||||
{/if}
|
||||
{#each $settings.folders as folder}
|
||||
{@const isIn = $activeManga ? folder.mangaIds.includes($activeManga.id) : false}
|
||||
{#each settings.folders as folder}
|
||||
{@const isIn = activeManga ? folder.mangaIds.includes(activeManga.id) : false}
|
||||
<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}
|
||||
</button>
|
||||
{/each}
|
||||
@@ -476,35 +429,34 @@
|
||||
{#if folderCreating}
|
||||
<div class="fp-create">
|
||||
<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 />
|
||||
<button class="fp-confirm" on:click={createFolder} disabled={!folderNewName.trim()}>Add</button>
|
||||
<button class="fp-cancel" on:click={() => { folderCreating = false; folderNewName = ""; }}>
|
||||
<button class="fp-confirm" onclick={createFolder} disabled={!folderNewName.trim()}>Add</button>
|
||||
<button class="fp-cancel" onclick={() => { folderCreating = false; folderNewName = ""; }}>
|
||||
<X size={12} weight="light" />
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<button class="fp-new" on:click={() => folderCreating = true}>+ New folder</button>
|
||||
<button class="fp-new" onclick={() => folderCreating = true}>+ New folder</button>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
{#if chapters.length > 1}
|
||||
<div class="jump-wrap">
|
||||
{#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}
|
||||
<div class="jump-row">
|
||||
<input class="jump-input" type="text" placeholder="Ch. #" bind:value={jumpInput}
|
||||
use:focus
|
||||
on:keydown={(e) => {
|
||||
onkeydown={(e) => {
|
||||
if (e.key === "Escape") { jumpOpen = false; return; }
|
||||
if (e.key === "Enter") {
|
||||
const num = parseFloat(jumpInput);
|
||||
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]);
|
||||
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>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
{#if chapters.length > 0}
|
||||
<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" />
|
||||
</button>
|
||||
{#if dlOpen}
|
||||
@@ -532,8 +483,8 @@
|
||||
<p class="dl-section-label">From Ch.{continueChapter.chapter.chapterNumber}</p>
|
||||
<div class="dl-next-row">
|
||||
{#each [5, 10, 25] as n}
|
||||
{@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; }}>
|
||||
{@const avail = sortedChapters.slice(contIdx, contIdx + n).filter(c => !c.isDownloaded).length}
|
||||
<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>
|
||||
</button>
|
||||
{/each}
|
||||
@@ -542,28 +493,28 @@
|
||||
{/if}
|
||||
{/if}
|
||||
{#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>
|
||||
</button>
|
||||
{:else}
|
||||
<div class="dl-range-row">
|
||||
<button class="dl-range-back" on:click={() => showRange = false}>‹</button>
|
||||
<input class="dl-range-input" placeholder="From" bind:value={rangeFrom} on:keydown={(e) => e.key === "Enter" && enqueueRange()} use:focus />
|
||||
<button class="dl-range-back" onclick={() => showRange = false}>‹</button>
|
||||
<input class="dl-range-input" placeholder="From" bind:value={rangeFrom} onkeydown={(e) => e.key === "Enter" && enqueueRange()} use:focus />
|
||||
<span class="dl-range-sep">–</span>
|
||||
<input class="dl-range-input" placeholder="To" bind:value={rangeTo} on:keydown={(e) => e.key === "Enter" && enqueueRange()} />
|
||||
<button class="dl-range-go" disabled={!rangeFrom.trim() || !rangeTo.trim()} on:click={enqueueRange}>Go</button>
|
||||
<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()} onclick={enqueueRange}>Go</button>
|
||||
</div>
|
||||
{/if}
|
||||
<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; }}>
|
||||
<span>Unread chapters</span><span class="dl-item-sub">{sortedChapters.filter((c) => !c.isRead && !c.isDownloaded).length} remaining</span>
|
||||
<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>
|
||||
</button>
|
||||
<button class="dl-item" on:click={() => { 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>
|
||||
<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>
|
||||
</button>
|
||||
{#if downloadedCount > 0}
|
||||
<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 class="dl-item-sub">{downloadedCount} downloaded</span>
|
||||
</button>
|
||||
@@ -575,9 +526,9 @@
|
||||
|
||||
{#if totalPages > 1}
|
||||
<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>
|
||||
<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>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -594,8 +545,8 @@
|
||||
{#each sortedChapters as ch, i}
|
||||
{@const inProgress = !ch.isRead && (ch.lastPageRead ?? 0) > 0}
|
||||
<button class="grid-cell" class:read={ch.isRead} class:in-progress={inProgress} class:bookmarked={ch.isBookmarked}
|
||||
on:click={() => openReader(ch, sortedChapters)}
|
||||
on:contextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: i }; }}
|
||||
onclick={() => openReader(ch, sortedChapters)}
|
||||
oncontextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: i }; }}
|
||||
title={ch.name}>
|
||||
<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}
|
||||
@@ -606,9 +557,9 @@
|
||||
{#each pageChapters as ch}
|
||||
{@const idxInSorted = sortedChapters.indexOf(ch)}
|
||||
<div role="button" tabindex="0" class="ch-row" class:read={ch.isRead}
|
||||
on:click={() => openReader(ch, sortedChapters)}
|
||||
on:keydown={(e) => e.key === "Enter" && openReader(ch, sortedChapters)}
|
||||
on:contextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: idxInSorted }; }}>
|
||||
onclick={() => openReader(ch, sortedChapters)}
|
||||
onkeydown={(e) => e.key === "Enter" && openReader(ch, sortedChapters)}
|
||||
oncontextmenu={(e) => { e.preventDefault(); ctx = { x: e.clientX, y: e.clientY, chapter: ch, idx: idxInSorted }; }}>
|
||||
<div class="ch-left">
|
||||
<span class="ch-name">{ch.name}</span>
|
||||
<div class="ch-meta">
|
||||
@@ -620,11 +571,11 @@
|
||||
<div class="ch-right">
|
||||
{#if ch.isRead}<CheckCircle size={14} weight="light" class="read-icon" />{/if}
|
||||
{#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)}
|
||||
<CircleNotch size={14} weight="light" class="anim-spin enqueue-icon" />
|
||||
{: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}
|
||||
</div>
|
||||
</div>
|
||||
@@ -634,9 +585,9 @@
|
||||
|
||||
{#if totalPages > 1}
|
||||
<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>
|
||||
<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>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -651,11 +602,7 @@
|
||||
{manga}
|
||||
currentChapters={chapters}
|
||||
onClose={() => migrateOpen = false}
|
||||
onMigrated={(newManga) => {
|
||||
activeManga.set(newManga);
|
||||
migrateOpen = false;
|
||||
cache.clear(CACHE_KEYS.LIBRARY);
|
||||
}}
|
||||
onMigrated={(newManga) => { activeManga = newManga; migrateOpen = false; cache.clear(CACHE_KEYS.LIBRARY); }}
|
||||
/>
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -666,14 +613,7 @@
|
||||
|
||||
<style>
|
||||
.root { display: flex; height: 100%; overflow: hidden; animation: fadeIn 0.14s ease both; }
|
||||
|
||||
/* 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);
|
||||
}
|
||||
.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: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; }
|
||||
@@ -696,14 +636,12 @@
|
||||
.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:hover { opacity: 1; }
|
||||
|
||||
.progress-section { display: flex; flex-direction: column; gap: var(--sp-1); }
|
||||
.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-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-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); }
|
||||
.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); }
|
||||
@@ -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: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; }
|
||||
|
||||
.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: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: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; }
|
||||
|
||||
/* Chapter list */
|
||||
.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-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.active { color: var(--accent-fg); border-color: var(--accent-dim); background: var(--accent-muted); }
|
||||
.icon-btn:disabled { opacity: 0.3; cursor: default; }
|
||||
|
||||
/* Folder picker */
|
||||
.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-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-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); }
|
||||
|
||||
/* Jump */
|
||||
.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:hover { color: var(--text-muted); border-color: var(--border-strong); }
|
||||
@@ -766,8 +697,6 @@
|
||||
.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:hover { color: var(--text-muted); }
|
||||
|
||||
/* Download dropdown */
|
||||
.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-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-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; }
|
||||
|
||||
/* Pagination */
|
||||
.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; }
|
||||
.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: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); }
|
||||
|
||||
/* Chapter list/grid */
|
||||
.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-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-spinner { position: absolute; top: 2px; right: 2px; }
|
||||
.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>
|
||||
|
||||
+220
-308
@@ -1,17 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy, tick } from "svelte";
|
||||
import {
|
||||
X, CaretLeft, CaretRight, ArrowLeft, ArrowRight,
|
||||
Square, Rows, Download, ArrowsLeftRight,
|
||||
ArrowsIn, ArrowsOut, ArrowsVertical, CircleNotch,
|
||||
} from "phosphor-svelte";
|
||||
import { onMount, tick } from "svelte";
|
||||
import { X, CaretLeft, CaretRight, ArrowLeft, ArrowRight, Square, Rows, Download, ArrowsLeftRight, ArrowsIn, ArrowsOut, ArrowsVertical, CircleNotch } from "phosphor-svelte";
|
||||
import { gql, thumbUrl } from "../../lib/client";
|
||||
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 { matchesKeybind, toggleFullscreen, DEFAULT_KEYBINDS } from "../../lib/keybinds";
|
||||
import type { FitMode } from "../../store";
|
||||
|
||||
|
||||
const pageCache = new Map<number, string[]>();
|
||||
const inflight = new Map<number, Promise<string[]>>();
|
||||
const cacheOrder: number[] = [];
|
||||
@@ -25,7 +20,7 @@
|
||||
|
||||
function cacheEvict(keep: Set<number>) {
|
||||
while (pageCache.size > MAX_CACHED) {
|
||||
const victim = cacheOrder.find((id) => !keep.has(id));
|
||||
const victim = cacheOrder.find(id => !keep.has(id));
|
||||
if (!victim) break;
|
||||
cacheOrder.splice(cacheOrder.indexOf(victim), 1);
|
||||
pageCache.delete(victim);
|
||||
@@ -38,10 +33,8 @@
|
||||
if (signal?.aborted) return Promise.reject(new DOMException("Aborted", "AbortError"));
|
||||
if (!inflight.has(chapterId)) {
|
||||
const p = gql<{ fetchChapterPages: { pages: string[] } }>(FETCH_CHAPTER_PAGES, { chapterId })
|
||||
.then((d) => {
|
||||
const urls = d.fetchChapterPages.pages.map(thumbUrl);
|
||||
pageCache.set(chapterId, urls); cacheTouch(chapterId); return urls;
|
||||
}).finally(() => inflight.delete(chapterId));
|
||||
.then(d => { const urls = d.fetchChapterPages.pages.map(thumbUrl); pageCache.set(chapterId, urls); cacheTouch(chapterId); return urls; })
|
||||
.finally(() => inflight.delete(chapterId));
|
||||
inflight.set(chapterId, p);
|
||||
}
|
||||
const base = inflight.get(chapterId)!;
|
||||
@@ -52,13 +45,11 @@
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const aspectCache = new Map<string, number>();
|
||||
|
||||
function preloadImage(url: string) { new Image().src = url; }
|
||||
|
||||
function decodeImage(url: string): Promise<void> {
|
||||
return new Promise((resolve) => {
|
||||
return new Promise(resolve => {
|
||||
const img = new Image();
|
||||
img.onload = () => { img.decode ? img.decode().then(resolve, resolve) : resolve(); };
|
||||
img.onerror = () => resolve();
|
||||
@@ -68,7 +59,7 @@
|
||||
|
||||
function measureAspect(url: string): Promise<number> {
|
||||
if (aspectCache.has(url)) return Promise.resolve(aspectCache.get(url)!);
|
||||
return new Promise((res) => {
|
||||
return new Promise(res => {
|
||||
const img = new Image();
|
||||
img.onload = () => { const r = img.naturalHeight > 0 ? img.naturalWidth / img.naturalHeight : 0.67; aspectCache.set(url, r); res(r); };
|
||||
img.onerror = () => res(0.67);
|
||||
@@ -76,86 +67,84 @@
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
interface StripChapter { chapterId: number; chapterName: string; urls: string[]; startGlobalIdx: number; }
|
||||
|
||||
let containerEl: HTMLDivElement;
|
||||
let sentinelEl: HTMLDivElement;
|
||||
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 sentinelEl: HTMLDivElement;
|
||||
let hideTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
|
||||
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 appended = new Set<number>();
|
||||
let appending = false;
|
||||
let abortCtrl: AbortController | null = null;
|
||||
let loadingId: number | null = null;
|
||||
let abortCtrl: AbortController | null = null;
|
||||
let loadingId: number | null = null;
|
||||
let scrollAnchor: { scrollTop: number; scrollHeight: number } | null = null;
|
||||
|
||||
$: rtl = $settings.readingDirection === "rtl";
|
||||
$: fit = ($settings.fitMode ?? "width") as FitMode;
|
||||
$: style = $settings.pageStyle ?? "single";
|
||||
$: maxW = $settings.maxPageWidth ?? 900;
|
||||
$: autoNext = $settings.autoNextChapter ?? false;
|
||||
$: markOnNext = $settings.markReadOnNext ?? true;
|
||||
$: lastPage = $pageUrls.length;
|
||||
const rtl = $derived(settings.readingDirection === "rtl");
|
||||
const fit = $derived((settings.fitMode ?? "width") as FitMode);
|
||||
const style = $derived(settings.pageStyle ?? "single");
|
||||
const maxW = $derived(settings.maxPageWidth ?? 900);
|
||||
const autoNext = $derived(settings.autoNextChapter ?? false);
|
||||
const markOnNext = $derived(settings.markReadOnNext ?? true);
|
||||
const lastPage = $derived(pageUrls.length);
|
||||
|
||||
$: displayChapter = (style === "longstrip" && autoNext && visibleChapterId)
|
||||
? ($activeChapterList.find((c) => c.id === visibleChapterId) ?? $activeChapter)
|
||||
: $activeChapter;
|
||||
const displayChapter = $derived((style === "longstrip" && autoNext && visibleChapterId)
|
||||
? (activeChapterList.find(c => c.id === visibleChapterId) ?? activeChapter)
|
||||
: activeChapter);
|
||||
|
||||
$: adjacent = (() => {
|
||||
const ref = displayChapter ?? $activeChapter;
|
||||
if (!ref || !$activeChapterList.length) return { prev: null, next: null, remaining: [] };
|
||||
const idx = $activeChapterList.findIndex((c) => c.id === ref.id);
|
||||
const adjacent = $derived((() => {
|
||||
const ref = displayChapter ?? activeChapter;
|
||||
if (!ref || !activeChapterList.length) return { prev: null, next: null, remaining: [] };
|
||||
const idx = activeChapterList.findIndex(c => c.id === ref.id);
|
||||
return {
|
||||
prev: idx > 0 ? $activeChapterList[idx - 1] : null,
|
||||
next: idx < $activeChapterList.length - 1 ? $activeChapterList[idx + 1] : null,
|
||||
remaining: $activeChapterList.slice(idx + 1),
|
||||
prev: idx > 0 ? activeChapterList[idx - 1] : null,
|
||||
next: idx < activeChapterList.length - 1 ? activeChapterList[idx + 1] : null,
|
||||
remaining: activeChapterList.slice(idx + 1),
|
||||
};
|
||||
})();
|
||||
})());
|
||||
|
||||
$: visibleChunkLastPage = (() => {
|
||||
const visibleChunkLastPage = $derived((() => {
|
||||
if (style !== "longstrip" || !autoNext) return lastPage;
|
||||
const chId = visibleChapterId ?? $activeChapter?.id;
|
||||
const chunk = stripChapters.find((c) => c.chapterId === chId);
|
||||
const chId = visibleChapterId ?? activeChapter?.id;
|
||||
const chunk = stripChapters.find(c => c.chapterId === chId);
|
||||
return chunk?.urls.length ?? lastPage;
|
||||
})();
|
||||
})());
|
||||
|
||||
$: imgCls = [
|
||||
const imgCls = $derived([
|
||||
"img",
|
||||
fit === "width" && "fit-width",
|
||||
fit === "height" && "fit-height",
|
||||
fit === "screen" && "fit-screen",
|
||||
fit === "original" && "fit-original",
|
||||
$settings.optimizeContrast && "optimize-contrast",
|
||||
].filter(Boolean).join(" ");
|
||||
settings.optimizeContrast && "optimize-contrast",
|
||||
].filter(Boolean).join(" "));
|
||||
|
||||
$: fitLabel = { width: "Fit W", height: "Fit H", screen: "Fit Screen", original: "1:1" }[fit];
|
||||
$: styleLabel = style;
|
||||
const fitLabel = $derived({ width: "Fit W", height: "Fit H", screen: "Fit Screen", original: "1:1" }[fit]);
|
||||
const styleLabel = $derived(style);
|
||||
|
||||
function maybeMarkCurrentRead() {
|
||||
const ch = $activeChapter;
|
||||
const ch = activeChapter;
|
||||
if (!ch || !markOnNext || markedRead.has(ch.id)) return;
|
||||
markedRead.add(ch.id);
|
||||
gql(MARK_CHAPTER_READ, { id: ch.id, isRead: true })
|
||||
.then(() => {
|
||||
if ($activeManga) {
|
||||
const updated = $activeChapterList.map(c => c.id === ch.id ? { ...c, isRead: true } : c);
|
||||
checkAndMarkCompleted($activeManga.id, updated);
|
||||
if (activeManga) {
|
||||
const updated = activeChapterList.map(c => c.id === ch.id ? { ...c, isRead: true } : c);
|
||||
checkAndMarkCompleted(activeManga.id, updated);
|
||||
}
|
||||
})
|
||||
.catch((e) => { markedRead.delete(ch.id); console.error(e); });
|
||||
.catch(e => { markedRead.delete(ch.id); console.error(e); });
|
||||
}
|
||||
|
||||
function showUi() {
|
||||
@@ -164,10 +153,7 @@
|
||||
hideTimer = setTimeout(() => uiVisible = false, 3000);
|
||||
}
|
||||
|
||||
|
||||
$: if ($activeChapter) {
|
||||
loadChapter($activeChapter.id);
|
||||
}
|
||||
$effect(() => { if (activeChapter) loadChapter(activeChapter.id); });
|
||||
|
||||
async function loadChapter(id: number) {
|
||||
abortCtrl?.abort();
|
||||
@@ -182,18 +168,17 @@
|
||||
error = null;
|
||||
pageGroups = [];
|
||||
pageReady = false;
|
||||
stripChapters = [];
|
||||
visibleChapterId = null;
|
||||
pageUrls.set([]);
|
||||
pageNumber.set(1);
|
||||
|
||||
stripChapters = [];
|
||||
visibleChapterId = null;
|
||||
pageUrls = [];
|
||||
pageNumber = 1;
|
||||
try {
|
||||
const urls = await fetchPages(id, ctrl.signal);
|
||||
if (ctrl.signal.aborted) return;
|
||||
pageUrls.set(urls);
|
||||
pageUrls = urls;
|
||||
pageReady = true;
|
||||
if (style === "longstrip" && autoNext) {
|
||||
stripChapters = [{ chapterId: id, chapterName: $activeChapter?.name ?? "", urls, startGlobalIdx: 0 }];
|
||||
stripChapters = [{ chapterId: id, chapterName: activeChapter?.name ?? "", urls, startGlobalIdx: 0 }];
|
||||
visibleChapterId = id;
|
||||
}
|
||||
loading = false;
|
||||
@@ -204,27 +189,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function appendNextChapter() {
|
||||
if (appending) return;
|
||||
const lastChunk = stripChapters[stripChapters.length - 1];
|
||||
if (!lastChunk) return;
|
||||
const list = $activeChapterList;
|
||||
const lastIdx = list.findIndex((c) => c.id === lastChunk.chapterId);
|
||||
const list = activeChapterList;
|
||||
const lastIdx = list.findIndex(c => c.id === lastChunk.chapterId);
|
||||
if (lastIdx < 0 || lastIdx >= list.length - 1) return;
|
||||
const next = list[lastIdx + 1];
|
||||
if (!next || appended.has(next.id)) return;
|
||||
appended.add(next.id);
|
||||
appending = true;
|
||||
fetchPages(next.id)
|
||||
.then((urls) => {
|
||||
urls.forEach((url) => measureAspect(url).catch(() => {}));
|
||||
urls.slice(0, 6).forEach(preloadImage);
|
||||
return urls;
|
||||
})
|
||||
.then((urls) => {
|
||||
if (stripChapters.some((c) => c.chapterId === next.id)) return;
|
||||
const last = stripChapters[stripChapters.length - 1];
|
||||
.then(urls => { urls.forEach(url => measureAspect(url).catch(() => {})); urls.slice(0, 6).forEach(preloadImage); return urls; })
|
||||
.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 MAX_STRIP = 8;
|
||||
if (stripChapters.length >= MAX_STRIP && containerEl) {
|
||||
@@ -244,7 +224,6 @@
|
||||
.catch(() => { appending = false; });
|
||||
}
|
||||
|
||||
|
||||
function setupScrollTracking() {
|
||||
if (!containerEl || style !== "longstrip") return;
|
||||
const READ_LINE_PCT = 0.20;
|
||||
@@ -260,36 +239,26 @@
|
||||
else break;
|
||||
}
|
||||
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 ($settings.autoMarkRead && activeLocalPage !== null && activeChId) {
|
||||
const chunk = stripChapters.find((c) => c.chapterId === activeChId);
|
||||
const total = chunk ? chunk.urls.length : $pageUrls.length;
|
||||
if (settings.autoMarkRead && activeLocalPage !== null && activeChId) {
|
||||
const chunk = stripChapters.find(c => c.chapterId === activeChId);
|
||||
const total = chunk ? chunk.urls.length : pageUrls.length;
|
||||
if (total > 0 && activeLocalPage >= total - 1 && !markedRead.has(activeChId)) {
|
||||
markedRead.add(activeChId);
|
||||
const chIdSnap = activeChId;
|
||||
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((e) => { markedRead.delete(chIdSnap); console.error(e); });
|
||||
.then(() => { if (activeManga) { 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;
|
||||
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);
|
||||
const lastIdSnap = last.chapterId;
|
||||
gql(MARK_CHAPTER_READ, { id: lastIdSnap, isRead: true })
|
||||
.then(() => {
|
||||
if ($activeManga) {
|
||||
const updated = $activeChapterList.map(c => c.id === lastIdSnap ? { ...c, isRead: true } : c);
|
||||
checkAndMarkCompleted($activeManga.id, updated);
|
||||
}
|
||||
})
|
||||
.then(() => { if (activeManga) { const updated = activeChapterList.map(c => c.id === lastIdSnap ? { ...c, isRead: true } : c); checkAndMarkCompleted(activeManga.id, updated); } })
|
||||
.catch(console.error);
|
||||
}
|
||||
}
|
||||
@@ -300,47 +269,43 @@
|
||||
containerEl.addEventListener("scroll", onScroll, { passive: true });
|
||||
if (autoNext) containerEl.addEventListener("scroll", onScroll80, { passive: true });
|
||||
onScroll();
|
||||
return () => {
|
||||
containerEl.removeEventListener("scroll", onScroll);
|
||||
containerEl.removeEventListener("scroll", onScroll80);
|
||||
};
|
||||
return () => { containerEl.removeEventListener("scroll", onScroll); containerEl.removeEventListener("scroll", onScroll80); };
|
||||
}
|
||||
|
||||
|
||||
function advanceGroup(forward: boolean) {
|
||||
if (!pageGroups.length) return;
|
||||
const gi = pageGroups.findIndex((g) => g.includes($pageNumber));
|
||||
const gi = pageGroups.findIndex(g => g.includes(pageNumber));
|
||||
if (forward) {
|
||||
if (gi < pageGroups.length - 1) pageNumber.set(pageGroups[gi + 1][0]);
|
||||
else if (adjacent.next) { pageNumber.set(1); openReader(adjacent.next, $activeChapterList); }
|
||||
if (gi < pageGroups.length - 1) pageNumber = pageGroups[gi + 1][0];
|
||||
else if (adjacent.next) { pageNumber = 1; openReader(adjacent.next, activeChapterList); }
|
||||
else closeReader();
|
||||
} else {
|
||||
if (gi > 0) pageNumber.set(pageGroups[gi - 1][0]);
|
||||
else if (adjacent.prev) openReader(adjacent.prev, $activeChapterList);
|
||||
if (gi > 0) pageNumber = pageGroups[gi - 1][0];
|
||||
else if (adjacent.prev) openReader(adjacent.prev, activeChapterList);
|
||||
}
|
||||
}
|
||||
|
||||
function goForward() {
|
||||
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 (!$pageUrls.length) return;
|
||||
if ($pageNumber < lastPage) { decodeImage($pageUrls[$pageNumber]).then(() => pageNumber.set($pageNumber + 1)); }
|
||||
else if (adjacent.next) { maybeMarkCurrentRead(); pageNumber.set(1); openReader(adjacent.next, $activeChapterList); }
|
||||
if (!pageUrls.length) return;
|
||||
if (pageNumber < lastPage) { decodeImage(pageUrls[pageNumber]).then(() => pageNumber++); }
|
||||
else if (adjacent.next) { maybeMarkCurrentRead(); pageNumber = 1; openReader(adjacent.next, activeChapterList); }
|
||||
else closeReader();
|
||||
}
|
||||
|
||||
function goBack() {
|
||||
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 (!$pageUrls.length) return;
|
||||
if ($pageNumber > 1) { decodeImage($pageUrls[$pageNumber - 2]).then(() => pageNumber.set($pageNumber - 1)); }
|
||||
else if (adjacent.prev) openReader(adjacent.prev, $activeChapterList);
|
||||
if (!pageUrls.length) return;
|
||||
if (pageNumber > 1) { decodeImage(pageUrls[pageNumber - 2]).then(() => pageNumber--); }
|
||||
else if (adjacent.prev) openReader(adjacent.prev, activeChapterList);
|
||||
}
|
||||
|
||||
$: goNext = rtl ? goBack : goForward;
|
||||
$: goPrev = rtl ? goForward : goBack;
|
||||
const goNext = $derived(rtl ? goBack : goForward);
|
||||
const goPrev = $derived(rtl ? goForward : goBack);
|
||||
|
||||
function cycleStyle() {
|
||||
const opts = ["single", "longstrip"] as const;
|
||||
@@ -353,103 +318,95 @@
|
||||
updateSettings({ fitMode: opts[(opts.indexOf(fit) + 1) % opts.length] });
|
||||
}
|
||||
|
||||
|
||||
$: if ($activeChapter && lastPage && $activeManga) {
|
||||
addHistory({
|
||||
mangaId: $activeManga.id, mangaTitle: $activeManga.title,
|
||||
thumbnailUrl: $activeManga.thumbnailUrl, chapterId: $activeChapter.id,
|
||||
chapterName: $activeChapter.name, pageNumber: $pageNumber, readAt: Date.now(),
|
||||
});
|
||||
if (style !== "longstrip" && $settings.autoMarkRead && $pageNumber === lastPage) {
|
||||
if (!markedRead.has($activeChapter.id)) {
|
||||
markedRead.add($activeChapter.id);
|
||||
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 (activeChapter && lastPage && activeManga) {
|
||||
addHistory({ mangaId: activeManga.id, mangaTitle: activeManga.title, thumbnailUrl: activeManga.thumbnailUrl, chapterId: activeChapter.id, chapterName: activeChapter.name, pageNumber, readAt: Date.now() });
|
||||
if (style !== "longstrip" && settings.autoMarkRead && pageNumber === lastPage) {
|
||||
if (!markedRead.has(activeChapter.id)) {
|
||||
markedRead.add(activeChapter.id);
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$: 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;
|
||||
});
|
||||
} else { pageGroups = []; }
|
||||
$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 = []; }
|
||||
});
|
||||
|
||||
|
||||
$: {
|
||||
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];
|
||||
$effect(() => {
|
||||
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 ($activeChapter && $activeChapterList.length) {
|
||||
const idx = $activeChapterList.findIndex((c) => c.id === $activeChapter!.id);
|
||||
if (idx >= 0) {
|
||||
const toPin: number[] = [$activeChapter.id];
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
const entry = $activeChapterList[idx + i];
|
||||
if (!entry) break;
|
||||
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(() => {});
|
||||
$effect(() => {
|
||||
if (activeChapter && activeChapterList.length) {
|
||||
const idx = activeChapterList.findIndex(c => c.id === activeChapter!.id);
|
||||
if (idx >= 0) {
|
||||
const toPin: number[] = [activeChapter.id];
|
||||
for (let i = 1; i <= 3; i++) {
|
||||
const entry = activeChapterList[idx + i];
|
||||
if (!entry) break;
|
||||
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(() => {});
|
||||
}
|
||||
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));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$: if (style === "longstrip" && $pageUrls.length && $activeChapter) {
|
||||
appended = new Set([$activeChapter.id]);
|
||||
appending = false;
|
||||
if (autoNext) {
|
||||
stripChapters = [{ chapterId: $activeChapter.id, chapterName: $activeChapter.name, urls: $pageUrls, startGlobalIdx: 0 }];
|
||||
visibleChapterId = $activeChapter.id;
|
||||
} else {
|
||||
stripChapters = [];
|
||||
visibleChapterId = null;
|
||||
$effect(() => {
|
||||
if (style === "longstrip" && pageUrls.length && activeChapter) {
|
||||
appended = new Set([activeChapter.id]);
|
||||
appending = false;
|
||||
if (autoNext) {
|
||||
stripChapters = [{ chapterId: activeChapter.id, chapterName: activeChapter.name, urls: pageUrls, startGlobalIdx: 0 }];
|
||||
visibleChapterId = activeChapter.id;
|
||||
} else {
|
||||
stripChapters = [];
|
||||
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) {
|
||||
if (!e.ctrlKey) return;
|
||||
e.preventDefault();
|
||||
updateSettings({ maxPageWidth: Math.min(2400, Math.max(200, maxW + (e.deltaY < 0 ? 50 : -50))) });
|
||||
}
|
||||
|
||||
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if ((e.target as HTMLElement).tagName === "INPUT") return;
|
||||
const kb = $settings.keybinds ?? DEFAULT_KEYBINDS;
|
||||
const mW = $settings.maxPageWidth ?? 900;
|
||||
const r = $settings.readingDirection === "rtl";
|
||||
const kb = settings.keybinds ?? DEFAULT_KEYBINDS;
|
||||
const mW = settings.maxPageWidth ?? 900;
|
||||
const r = settings.readingDirection === "rtl";
|
||||
if (e.key === "Escape") {
|
||||
e.preventDefault();
|
||||
if (zoomOpen) { zoomOpen = false; return; }
|
||||
@@ -462,24 +419,24 @@
|
||||
if (matchesKeybind(e, kb.exitReader)) { e.preventDefault(); closeReader(); }
|
||||
else if (matchesKeybind(e, kb.pageRight)) { e.preventDefault(); goForward(); }
|
||||
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.lastPage)) { e.preventDefault(); pageNumber.set(lastPage); }
|
||||
else if (matchesKeybind(e, kb.firstPage)) { e.preventDefault(); pageNumber = 1; }
|
||||
else if (matchesKeybind(e, kb.lastPage)) { e.preventDefault(); pageNumber = lastPage; }
|
||||
else if (matchesKeybind(e, kb.chapterRight)) {
|
||||
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;
|
||||
if (next) { maybeMarkCurrentRead(); openReader(next, list); }
|
||||
}
|
||||
else if (matchesKeybind(e, kb.chapterLeft)) {
|
||||
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;
|
||||
if (prev) openReader(prev, list);
|
||||
}
|
||||
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.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) {
|
||||
@@ -489,11 +446,9 @@
|
||||
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;
|
||||
try {
|
||||
await fn();
|
||||
} catch (e: any) { console.error(e); }
|
||||
try { await fn(); } catch (e: any) { console.error(e); }
|
||||
dlBusy = false; dlOpen = false;
|
||||
}
|
||||
|
||||
@@ -505,46 +460,44 @@
|
||||
window.addEventListener("wheel", onWheel, { passive: false });
|
||||
containerEl?.focus({ preventScroll: true });
|
||||
scrollCleanup = setupScrollTracking();
|
||||
return () => {
|
||||
abortCtrl?.abort();
|
||||
if (hideTimer) clearTimeout(hideTimer);
|
||||
window.removeEventListener("keydown", onKey);
|
||||
window.removeEventListener("wheel", onWheel);
|
||||
scrollCleanup?.();
|
||||
};
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
abortCtrl?.abort();
|
||||
if (hideTimer) clearTimeout(hideTimer);
|
||||
window.removeEventListener("keydown", onKey);
|
||||
window.removeEventListener("wheel", onWheel);
|
||||
scrollCleanup?.();
|
||||
});
|
||||
|
||||
$: stripToRender = style === "longstrip"
|
||||
const stripToRender = $derived(style === "longstrip"
|
||||
? (autoNext && stripChapters.length > 0
|
||||
? 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
|
||||
? (pageGroups.find((g) => g.includes($pageNumber)) ?? [$pageNumber])
|
||||
: [$pageNumber];
|
||||
const currentGroup = $derived(style === "double" && pageGroups.length
|
||||
? (pageGroups.find(g => g.includes(pageNumber)) ?? [pageNumber])
|
||||
: [pageNumber]);
|
||||
</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}>
|
||||
<button class="icon-btn" on:click={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={closeReader} title="Close reader"><X size={15} weight="light" /></button>
|
||||
<button class="icon-btn" onclick={() => { if (adjacent.prev) { maybeMarkCurrentRead(); openReader(adjacent.prev, activeChapterList); } }} disabled={!adjacent.prev}>
|
||||
<CaretLeft size={14} weight="light" />
|
||||
</button>
|
||||
<span class="ch-label">
|
||||
<span class="ch-title">{$activeManga?.title}</span>
|
||||
<span class="ch-title">{activeManga?.title}</span>
|
||||
<span class="ch-sep">/</span>
|
||||
<span>{displayChapter?.name}</span>
|
||||
</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}>
|
||||
<span class="page-label">{pageNumber} / {visibleChunkLastPage || "…"}</span>
|
||||
<button class="icon-btn" onclick={() => { if (adjacent.next) { maybeMarkCurrentRead(); openReader(adjacent.next, activeChapterList); } }} disabled={!adjacent.next}>
|
||||
<CaretRight size={14} weight="light" />
|
||||
</button>
|
||||
<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" />
|
||||
{:else if fit === "height"}<ArrowsVertical size={14} weight="light" />
|
||||
{:else if fit === "screen"}<ArrowsIn size={14} weight="light" />
|
||||
@@ -552,43 +505,42 @@
|
||||
<span class="mode-label">{fitLabel}</span>
|
||||
</button>
|
||||
<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}
|
||||
<div class="zoom-popover">
|
||||
<input type="range" class="zoom-slider" min={200} max={2400} step={50} value={maxW}
|
||||
on:input={(e) => updateSettings({ maxPageWidth: Number(e.currentTarget.value) })} />
|
||||
<button class="zoom-reset" on:click={() => updateSettings({ maxPageWidth: 900 })}>{Math.round((maxW / 900) * 100)}%</button>
|
||||
oninput={(e) => updateSettings({ maxPageWidth: Number(e.currentTarget.value) })} />
|
||||
<button class="zoom-reset" onclick={() => updateSettings({ maxPageWidth: 900 })}>{Math.round((maxW / 900) * 100)}%</button>
|
||||
</div>
|
||||
{/if}
|
||||
</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>
|
||||
</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}
|
||||
<span class="mode-label">{styleLabel}</span>
|
||||
</button>
|
||||
{#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>
|
||||
</button>
|
||||
{/if}
|
||||
{#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>
|
||||
</button>
|
||||
{/if}
|
||||
{#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>
|
||||
</button>
|
||||
{/if}
|
||||
<button class="mode-btn" on:click={() => dlOpen = true}>
|
||||
<button class="mode-btn" onclick={() => dlOpen = true}>
|
||||
<Download size={14} weight="light" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
bind:this={containerEl}
|
||||
class="viewer"
|
||||
@@ -596,9 +548,9 @@
|
||||
style="--max-page-width:{maxW}px"
|
||||
role="presentation"
|
||||
tabindex="-1"
|
||||
on:click={handleTap}
|
||||
on:wheel={(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" }); } }}
|
||||
onclick={handleTap}
|
||||
onwheel={(e) => { if (e.ctrlKey) e.preventDefault(); }}
|
||||
onkeydown={(e) => { if (e.key === " " && style === "longstrip") { e.preventDefault(); containerEl?.scrollBy({ top: containerEl.clientHeight * 0.85, behavior: "smooth" }); } }}
|
||||
>
|
||||
{#if loading}
|
||||
<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"}
|
||||
{#each stripToRender as chunk}
|
||||
{#each chunk.urls as url, i}
|
||||
<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"
|
||||
/>
|
||||
<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" />
|
||||
{/each}
|
||||
{/each}
|
||||
<div bind:this={sentinelEl} style="height:1px;flex-shrink:0;overflow-anchor:none"></div>
|
||||
@@ -628,52 +570,48 @@
|
||||
{#if style === "double" && pageGroups.length}
|
||||
<div class="double-wrap">
|
||||
{#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}
|
||||
</div>
|
||||
{: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}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="bottombar" class:hidden={!uiVisible}>
|
||||
<button class="nav-btn" on:click={goPrev}
|
||||
disabled={loading || (style === "longstrip" ? !adjacent.prev : ($pageNumber === 1 && !adjacent.prev))}>
|
||||
<button class="nav-btn" onclick={goPrev} disabled={loading || (style === "longstrip" ? !adjacent.prev : (pageNumber === 1 && !adjacent.prev))}>
|
||||
<ArrowLeft size={13} weight="light" />
|
||||
</button>
|
||||
<button class="nav-btn" on:click={goNext}
|
||||
disabled={loading || (style === "longstrip" ? !adjacent.next : ($pageNumber === lastPage && !adjacent.next))}>
|
||||
<button class="nav-btn" onclick={goNext} disabled={loading || (style === "longstrip" ? !adjacent.next : (pageNumber === lastPage && !adjacent.next))}>
|
||||
<ArrowRight size={13} weight="light" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
{#if dlOpen && $activeChapter}
|
||||
{@const queueable = adjacent.remaining.filter((c) => !c.isDownloaded)}
|
||||
<div class="dl-backdrop" role="presentation" on:click={() => dlOpen = false}>
|
||||
<div class="dl-modal" role="presentation" on:click|stopPropagation>
|
||||
{#if dlOpen && activeChapter}
|
||||
{@const queueable = adjacent.remaining.filter(c => !c.isDownloaded)}
|
||||
<div class="dl-backdrop" role="presentation" onclick={() => dlOpen = false}>
|
||||
<div class="dl-modal" role="presentation" onclick|stopPropagation>
|
||||
<p class="dl-title">Download</p>
|
||||
<button class="dl-option" disabled={dlBusy || !!$activeChapter.isDownloaded}
|
||||
on:click={() => runDl(() => gql(ENQUEUE_DOWNLOAD, { chapterId: $activeChapter!.id }), $activeChapter!.name)}>
|
||||
<button class="dl-option" disabled={dlBusy || !!activeChapter.isDownloaded}
|
||||
onclick={() => runDl(() => gql(ENQUEUE_DOWNLOAD, { chapterId: activeChapter!.id }))}>
|
||||
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>
|
||||
<div class="dl-row">
|
||||
<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
|
||||
<span class="dl-sub">{Math.min(nextN, queueable.length)} not yet downloaded</span>
|
||||
</button>
|
||||
<div class="dl-stepper" role="presentation" on:click|stopPropagation>
|
||||
<button class="dl-step-btn" on:click={() => nextN = Math.max(1, nextN - 1)} disabled={nextN <= 1}>−</button>
|
||||
<div class="dl-stepper" role="presentation" onclick|stopPropagation>
|
||||
<button class="dl-step-btn" onclick={() => nextN = Math.max(1, nextN - 1)} disabled={nextN <= 1}>−</button>
|
||||
<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>
|
||||
<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
|
||||
<span class="dl-sub">{queueable.length} not yet downloaded</span>
|
||||
</button>
|
||||
@@ -683,42 +621,21 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
position: fixed; inset: 0; background: #000;
|
||||
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;
|
||||
}
|
||||
.root { position: fixed; inset: 0; background: #000; 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; }
|
||||
|
||||
.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: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-title { color: var(--text-secondary); font-weight: var(--weight-medium); }
|
||||
.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; }
|
||||
.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:hover { color: var(--text-primary); background: var(--bg-raised); }
|
||||
.mode-btn.active { color: var(--accent-fg); background: var(--accent-muted); }
|
||||
.mode-label { text-transform: capitalize; }
|
||||
|
||||
.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: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-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); }
|
||||
|
||||
.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:focus { outline: none; }
|
||||
|
||||
.img { display: block; user-select: none; image-rendering: auto; }
|
||||
.img.optimize-contrast { image-rendering: -webkit-optimize-contrast; }
|
||||
.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-original { max-width: none; width: auto; height: auto; }
|
||||
.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%; }
|
||||
.page-half { flex: 1; min-width: 0; object-fit: contain; }
|
||||
.gap-left { margin-right: 2px; }
|
||||
.gap-right { margin-left: 2px; }
|
||||
|
||||
.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); }
|
||||
|
||||
.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:hover:not(:disabled) { background: var(--bg-raised); color: var(--text-primary); }
|
||||
.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-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); }
|
||||
@@ -766,4 +677,5 @@
|
||||
.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-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>
|
||||
|
||||
Reference in New Issue
Block a user