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

Fix: Emergency Push + Bookmark Feature (WIP)

Browse Source
This commit is contained in:
Youwes09
2026-03-30 00:02:21 -05:00
parent 581eb2adb0
commit fd9d216325
14 changed files with 749 additions and 678 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.svelte
-14
View File
@@ -76,21 +76,14 @@
let idle = $state(false);
let devSplash = $state(false);
// The OS/monitor DPI scale factor for the current display.
// Queried from Rust (window.scale_factor()) on mount and updated live
// whenever the window moves to a different monitor via the scaleChanged event.
// 1.0 = standard display, 2.0 = HiDPI/4K, 1.25–1.5 = Windows scaled display.
let platformScale = $state(1.0);
// effectiveZoom = platformScale × uiZoom (user preference, float, default 1.0)
// Applied to document.documentElement so the entire UI scales correctly.
function applyZoom() {
const uiZoom = store.settings.uiZoom ?? 1.5;
const effective = platformScale * uiZoom;
const pct = effective * 100;
document.documentElement.style.zoom = `${pct}%`;
document.documentElement.style.setProperty("--ui-scale", String(effective));
// visual-vh compensates for the zoom so 100vh-based calculations stay correct.
document.documentElement.style.setProperty("--visual-vh", `${window.innerHeight / effective}px`);
}
@@ -136,7 +129,6 @@
return () => idleEvents.forEach(e => window.removeEventListener(e, resetIdle));
});
// Re-apply zoom whenever uiZoom setting or platformScale changes.
$effect(() => {
store.settings.uiZoom; platformScale;
applyZoom();
@@ -226,8 +218,6 @@
document.addEventListener("contextmenu", e => e.preventDefault());
(window as any).__mokuShowSplash = () => devSplash = true;
// Fetch the real monitor scale factor from Rust (window.scale_factor()).
// This reflects actual DPI — 2.0 on HiDPI, 1.25 on Windows scaled displays, etc.
platformScale = await invoke<number>("get_platform_ui_scale").catch(() => 1.0);
applyZoom();
@@ -237,9 +227,6 @@
store.isFullscreen = await win.isFullscreen();
});
// Re-query the scale factor when the window moves to a different monitor.
// Tauri emits this event whenever the DPI changes (e.g. dragging window
// from a 1080p display to a 4K display).
const unlistenScale = await win.onScaleChanged(async (event) => {
platformScale = event.payload.scaleFactor;
applyZoom();
@@ -288,7 +275,6 @@
}
});
// When the reader closes, show idle presence.
$effect(() => {
if (!store.activeChapter) {
src/components/pages/Discover.svelte
+3 -3
View File
@@ -4,7 +4,7 @@
import { gql, thumbUrl } from "../../lib/client";
import { GET_SOURCES, FETCH_SOURCE_MANGA, UPDATE_MANGA, GET_CATEGORIES, CREATE_CATEGORY, UPDATE_MANGA_CATEGORIES } from "../../lib/queries";
import { cache, CACHE_KEYS } from "../../lib/cache";
import { dedupeSources, dedupeMangaByTitle, dedupeMangaById, isNsfwManga } from "../../lib/util";
import { dedupeSources, dedupeMangaByTitle, dedupeMangaById, shouldHideNsfw } from "../../lib/util";
import { store, setPreviewManga, clearDiscoverCache } from "../../store/state.svelte";
import type { Manga, Source, Category } from "../../lib/types";
import ContextMenu from "../shared/ContextMenu.svelte";
@@ -62,7 +62,7 @@
function filterOut(mangas: Manga[]): Manga[] {
return dedup(mangas.filter(m => {
if (m.inLibrary || store.discoverLibraryIds.has(m.id)) return false;
if (!store.settings.showNsfw && isNsfwManga(m)) return false;
if (shouldHideNsfw(m, store.settings)) return false;
return true;
}));
}
@@ -188,7 +188,7 @@
if (ctrl.signal.aborted) return;
const local = dedup(
d.mangas.nodes.filter(m => store.settings.showNsfw || !isNsfwManga(m))
d.mangas.nodes.filter(m => !shouldHideNsfw(m, store.settings))
);
store.discoverCache.set(localKey, local);
genreResults.set(genre, local.slice(0, GRID_LIMIT));
src/components/pages/Library.svelte
+2 -4
View File
@@ -4,7 +4,7 @@
import { gql, thumbUrl } from "../../lib/client";
import { GET_CATEGORIES, GET_LIBRARY, UPDATE_MANGA, GET_CHAPTERS, DELETE_DOWNLOADED_CHAPTERS, DEQUEUE_DOWNLOAD, CREATE_CATEGORY, UPDATE_MANGA_CATEGORIES, UPDATE_CATEGORY_ORDER } from "../../lib/queries";
import { cache, CACHE_KEYS, CACHE_GROUPS, DEFAULT_TTL_MS } from "../../lib/cache";
import { dedupeMangaById, dedupeMangaByTitle, isNsfwManga } from "../../lib/util";
import { dedupeMangaById, dedupeMangaByTitle, shouldHideNsfw } from "../../lib/util";
import { store, setLibraryFilter, checkAndMarkCompleted as storeCheckAndMarkCompleted, updateSettings, setCategories } from "../../store/state.svelte";
import type { LibrarySortMode, LibrarySortDir, LibraryStatusFilter } from "../../store/state.svelte";
import type { Manga, Category, Chapter } from "../../lib/types";
@@ -320,9 +320,7 @@
}
// 2. NSFW filter — always applied before text search or sort
if (!store.settings.showNsfw) {
items = items.filter(m => !isNsfwManga(m));
}
items = items.filter(m => !shouldHideNsfw(m, store.settings));
// 3. Text search
if (q) items = items.filter(m => m.title.toLowerCase().includes(q));
src/components/pages/Search.svelte
+103 -305
View File
@@ -3,7 +3,7 @@
import { gql, thumbUrl } from "../../lib/client";
import { GET_SOURCES, FETCH_SOURCE_MANGA } from "../../lib/queries";
import { cache, CACHE_KEYS, getPageSet } from "../../lib/cache";
import { dedupeSources, dedupeMangaById, dedupeMangaByTitle, isNsfwManga } from "../../lib/util";
import { dedupeSources, dedupeMangaById, dedupeMangaByTitle, shouldHideNsfw } from "../../lib/util";
import { store, setSearchPrefill, setPreviewManga } from "../../store/state.svelte";
import type { Manga, Source } from "../../lib/types";
@@ -91,14 +91,11 @@
const availableLangs = $derived(Array.from(new Set<string>(allSources.map((s) => s.lang))).sort());
const hasMultipleLangs = $derived(availableLangs.length > 1);
// ── Keyword search ────────────────────────────────────────────────────────
let kw_query = $state("");
let kw_submitted = $state("");
let kw_results: SourceResult[] = $state([]);
let kw_showAdvanced = $state(false);
let kw_selectedLangs: Set<string> = $state(new Set());
let kw_includeNsfw = $state(false);
let kw_inputEl: HTMLInputElement | null = $state(null);
let kw_abortCtrl: AbortController | null = null;
@@ -124,7 +121,7 @@
let filtered = allSources;
if (kw_selectedLangs.size > 0)
filtered = filtered.filter((s) => kw_selectedLangs.has(s.lang));
if (!kw_includeNsfw)
if (!store.settings.showNsfw)
filtered = filtered.filter((s) => !s.isNsfw);
return filtered;
}
@@ -146,9 +143,7 @@
FETCH_SOURCE_MANGA, { source: src.id, type: "SEARCH", page: 1, query: trimmed }, ctrl.signal,
);
if (ctrl.signal.aborted) return;
const mangas = store.settings.showNsfw
? d.fetchSourceManga.mangas
: d.fetchSourceManga.mangas.filter((m) => !isNsfwManga(m));
const mangas = d.fetchSourceManga.mangas.filter((m) => !shouldHideNsfw(m, store.settings));
kw_results = kw_results.map((r) =>
r.source.id === src.id ? { ...r, mangas, loading: false } : r,
);
@@ -172,8 +167,6 @@
const kw_hasResults = $derived(kw_results.some((r) => r.mangas.length > 0));
const kw_allDone = $derived(kw_results.length > 0 && kw_results.every((r) => !r.loading));
// ── Tag search ────────────────────────────────────────────────────────────
let tag_activeTags: string[] = $state([]);
let tag_tagMode: TagMode = $state("AND");
let tag_tagFilter = $state("");
@@ -246,7 +239,7 @@
ctrl.signal,
).then((d) => {
if (ctrl.signal.aborted) return;
const nsfwFilter = (m: Manga) => store.settings.showNsfw || !isNsfwManga(m);
const nsfwFilter = (m: Manga) => !shouldHideNsfw(m, store.settings);
tag_localResults = d.mangas.nodes.filter(nsfwFilter);
tag_totalCount = d.mangas.totalCount;
tag_localHasNext = d.mangas.pageInfo.hasNextPage;
@@ -286,7 +279,7 @@
const matching = (activeTags.length > 1
? result.mangas.filter((m) => matchesAllTags(m, activeTags))
: result.mangas
).filter((m) => store.settings.showNsfw || !isNsfwManga(m));
).filter((m) => !shouldHideNsfw(m, store.settings));
if (matching.length > 0) {
tag_sourceResults = dedupeMangaByTitle(dedupeMangaById([...tag_sourceResults, ...matching]), store.settings.mangaLinks);
tag_loadingSourceSearch = false;
@@ -309,8 +302,7 @@
ctrl.signal,
);
if (ctrl.signal.aborted) return;
const nsfwFilter = (m: Manga) => store.settings.showNsfw || !isNsfwManga(m);
tag_localResults = [...tag_localResults, ...d.mangas.nodes.filter(nsfwFilter)];
const nsfwFilter = (m: Manga) => !shouldHideNsfw(m, store.settings);
tag_localHasNext = d.mangas.pageInfo.hasNextPage;
tag_localOffset += (store.settings.renderLimit ?? 48);
} catch (e: any) {
@@ -349,7 +341,7 @@
const matching = (tag_activeTags.length > 1
? result.mangas.filter((m) => matchesAllTags(m, tag_activeTags))
: result.mangas
).filter((m) => store.settings.showNsfw || !isNsfwManga(m));
).filter((m) => !shouldHideNsfw(m, store.settings));
if (matching.length > 0) {
tag_sourceResults = dedupeMangaByTitle(dedupeMangaById([...tag_sourceResults, ...matching]), store.settings.mangaLinks);
}
@@ -374,9 +366,7 @@
}
}
// ── Source browse ─────────────────────────────────────────────────────────
let src_selectedLang = $state("all");
let src_selectedLang = $state(preferredLang || "all");
let src_activeSource: Source | null = $state(null);
let src_browseResults: Manga[] = $state([]);
let src_loadingBrowse = $state(false);
@@ -385,40 +375,33 @@
let src_hasNextPage = $state(false);
let src_currentPage = $state(1);
let src_abortCtrl: AbortController | null = null;
let src_langPocketOpen = $state(true);
let src_expandedGroups: Set<string> = $state(new Set());
// Group sources by displayName — sources with same name but different langs get grouped
interface SourceGroup {
name: string;
iconUrl: string;
sources: Source[];
isNsfw: boolean;
}
$effect(() => {
if (!allSources.length) return;
const langs = new Set(allSources.map((s) => s.lang));
if (src_selectedLang !== "all" && !langs.has(src_selectedLang)) {
src_selectedLang = langs.has(preferredLang) ? preferredLang : "all";
}
});
const src_visibleSources = $derived(src_selectedLang === "all"
? allSources
: allSources.filter((s) => s.lang === src_selectedLang));
const src_groupedSources = $derived.by(() => {
const filtered = src_visibleSources;
const map = new Map<string, SourceGroup>();
for (const src of filtered) {
const key = src.displayName;
if (!map.has(key)) {
map.set(key, { name: src.displayName, iconUrl: src.iconUrl, sources: [], isNsfw: src.isNsfw });
const src_visibleSources = $derived.by(() => {
const nsfw = (s: Source) => !store.settings.showNsfw && s.isNsfw;
if (src_selectedLang !== "all") {
return allSources.filter((s) => s.lang === src_selectedLang && !nsfw(s));
}
const map = new Map<string, Source>();
for (const s of allSources) {
if (nsfw(s)) continue;
const key = s.name;
const existing = map.get(key);
if (!existing) { map.set(key, s); continue; }
if (s.lang === preferredLang || (!existing || (existing.lang !== preferredLang && s.lang < existing.lang))) {
map.set(key, s);
}
map.get(key)!.sources.push(src);
}
return Array.from(map.values());
});
function srcToggleGroup(name: string) {
const next = new Set(src_expandedGroups);
if (next.has(name)) next.delete(name); else next.add(name);
src_expandedGroups = next;
}
async function srcFetchBrowse(src: Source, type: "POPULAR" | "SEARCH", q?: string, page = 1) {
src_abortCtrl?.abort();
const ctrl = new AbortController();
@@ -429,9 +412,7 @@
FETCH_SOURCE_MANGA, { source: src.id, type, page, query: q ?? null }, ctrl.signal,
);
if (ctrl.signal.aborted) return;
const incoming = store.settings.showNsfw
? d.fetchSourceManga.mangas
: d.fetchSourceManga.mangas.filter((m) => !isNsfwManga(m));
const incoming = d.fetchSourceManga.mangas.filter((m) => !shouldHideNsfw(m, store.settings));
src_browseResults = page === 1 ? incoming : [...src_browseResults, ...incoming];
src_hasNextPage = d.fetchSourceManga.hasNextPage;
src_currentPage = page;
@@ -580,10 +561,6 @@
{/each}
</div>
<div class="advancedDivider"></div>
<label class="advancedCheck">
<input type="checkbox" bind:checked={kw_includeNsfw} class="checkbox" />
Include NSFW sources
</label>
<div class="advancedFooter">
Searching <strong>{kw_visibleCount}</strong> source{kw_visibleCount !== 1 ? "s" : ""}
</div>
@@ -877,27 +854,18 @@
<div class="splitRoot">
<div class="splitSidebar">
<button class="langPocketToggle" onclick={() => (src_langPocketOpen = !src_langPocketOpen)}>
<span class="langPocketLabel">Languages</span>
<svg width="9" height="9" viewBox="0 0 256 256" fill="currentColor"
style="transition: transform 0.2s ease; transform: rotate({src_langPocketOpen ? 180 : 0}deg)"
aria-hidden="true">
<path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/>
</svg>
</button>
{#if src_langPocketOpen}
<div class="langPocket">
{#each ["all", ...availableLangs] as lang (lang)}
<button
class="langChip"
class:langChipActive={src_selectedLang === lang}
onclick={() => (src_selectedLang = lang)}
>
{lang === "all" ? "All" : lang.toUpperCase()}
</button>
{/each}
</div>
{/if}
<div class="srcLangRow">
<span class="langPocketLabel">Language</span>
<select
class="langSelect"
bind:value={src_selectedLang}
>
<option value="all">All</option>
{#each availableLangs as lang (lang)}
<option value={lang}>{lang.toUpperCase()}{lang === preferredLang ? " ★" : ""}</option>
{/each}
</select>
</div>
{#if loadingSources}
<div class="splitLoading">
@@ -907,52 +875,22 @@
</div>
{:else}
<div class="splitList">
{#each src_groupedSources as group (group.name)}
{#if group.sources.length === 1}
<button
class="splitItem splitItemSource"
class:splitItemActive={src_activeSource?.id === group.sources[0].id}
onclick={() => srcSelectSource(group.sources[0])}
>
<img src={thumbUrl(group.iconUrl)} alt="" class="splitSourceIcon"
onerror={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
<span class="splitItemLabel">{group.name}</span>
<span class="sourceLang" style="margin-left:auto;margin-right:4px">{group.sources[0].lang.toUpperCase()}</span>
{#if group.isNsfw}<span class="nsfwBadge">18+</span>{/if}
</button>
{:else}
<button
class="splitItem splitItemSource splitItemGroup"
class:splitItemGroupOpen={src_expandedGroups.has(group.name)}
onclick={() => srcToggleGroup(group.name)}
>
<img src={thumbUrl(group.iconUrl)} alt="" class="splitSourceIcon"
onerror={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
<span class="splitItemLabel">{group.name}</span>
<span class="groupLangCount">{group.sources.length}</span>
<svg width="8" height="8" viewBox="0 0 256 256" fill="currentColor"
class="groupChevron"
style="transform: rotate({src_expandedGroups.has(group.name) ? 180 : 0}deg)"
aria-hidden="true">
<path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z"/>
</svg>
</button>
{#if src_expandedGroups.has(group.name)}
{#each group.sources as src (src.id)}
<button
class="splitItem splitItemSource splitItemLangOption"
class:splitItemActive={src_activeSource?.id === src.id}
onclick={() => srcSelectSource(src)}
>
<span class="langOptionDot"></span>
<span class="splitItemLabel">{src.lang.toUpperCase()}</span>
{#if src.isNsfw}<span class="nsfwBadge">18+</span>{/if}
</button>
{/each}
{#each src_visibleSources as src (src.id)}
<button
class="splitItem splitItemSource"
class:splitItemActive={src_activeSource?.id === src.id}
onclick={() => srcSelectSource(src)}
>
<img src={thumbUrl(src.iconUrl)} alt="" class="splitSourceIcon"
onerror={(e) => { (e.target as HTMLImageElement).style.display = "none"; }} />
<span class="splitItemLabel">{src.name}</span>
{#if src_selectedLang === "all"}
<span class="sourceLang" style="margin-left:auto;margin-right:4px">{src.lang.toUpperCase()}</span>
{/if}
{/if}
{#if src.isNsfw}<span class="nsfwBadge">18+</span>{/if}
</button>
{/each}
{#if src_groupedSources.length === 0}
{#if src_visibleSources.length === 0}
<p class="splitEmpty">No sources for this language</p>
{/if}
</div>
@@ -1071,8 +1009,6 @@
</div>
<style>
/* ── Root ──────────────────────────────────────────────────────────────── */
.root {
display: flex;
flex-direction: column;
@@ -1080,9 +1016,6 @@
overflow: hidden;
animation: fadeIn 0.14s ease both;
}
/* ── Header ────────────────────────────────────────────────────────────── */
.header {
display: flex;
align-items: center;
@@ -1091,7 +1024,6 @@
flex-shrink: 0;
border-bottom: 1px solid var(--border-dim);
}
.heading {
font-family: var(--font-ui);
font-size: var(--text-xs);
@@ -1100,9 +1032,6 @@
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
/* ── Tabs ──────────────────────────────────────────────────────────────── */
.tabs {
display: flex;
gap: 2px;
@@ -1111,7 +1040,6 @@
border-radius: var(--radius-md);
padding: 2px;
}
.tab {
display: flex;
align-items: center;
@@ -1130,16 +1058,12 @@
white-space: nowrap;
}
.tab:hover { color: var(--text-muted); }
.tabActive {
background: var(--accent-muted);
color: var(--accent-fg);
border: 1px solid var(--accent-dim);
}
.tabActive:hover { color: var(--accent-fg); }
/* ── Keyword bar ───────────────────────────────────────────────────────── */
.keywordBar {
padding: var(--sp-3) var(--sp-4);
flex-shrink: 0;
@@ -1147,7 +1071,6 @@
flex-direction: column;
gap: var(--sp-2);
}
.searchBar {
display: flex;
align-items: center;
@@ -1159,9 +1082,7 @@
transition: border-color var(--t-base);
}
.searchBar:focus-within { border-color: var(--border-strong); }
.searchIcon { color: var(--text-faint); flex-shrink: 0; }
.searchInput {
flex: 1;
background: none;
@@ -1172,7 +1093,6 @@
padding: 7px 0;
}
.searchInput::placeholder { color: var(--text-faint); }
.clearBtn {
color: var(--text-faint);
font-size: 14px;
@@ -1184,7 +1104,6 @@
transition: color var(--t-base);
}
.clearBtn:hover { color: var(--text-muted); }
.advancedBtn {
display: flex;
align-items: center;
@@ -1202,7 +1121,6 @@
.advancedBtn:hover { color: var(--text-muted); background: var(--bg-overlay); }
.advancedBtnActive { color: var(--accent-fg); background: var(--accent-muted); }
.advancedBtnActive:hover { color: var(--accent-fg); background: var(--accent-muted); }
.searchBtn {
font-family: var(--font-ui);
font-size: var(--text-xs);
@@ -1221,9 +1139,6 @@
}
.searchBtn:hover:not(:disabled) { filter: brightness(1.1); }
.searchBtn:disabled { opacity: 0.4; cursor: default; }
/* ── Advanced filter panel ─────────────────────────────────────────────── */
.advancedPanel {
background: var(--bg-raised);
border: 1px solid var(--border-dim);
@@ -1234,13 +1149,11 @@
gap: var(--sp-2);
animation: fadeIn 0.1s ease both;
}
.advancedHeader {
display: flex;
align-items: center;
justify-content: space-between;
}
.advancedTitle {
font-family: var(--font-ui);
font-size: var(--text-2xs);
@@ -1248,9 +1161,7 @@
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.advancedActions { display: flex; gap: var(--sp-1); }
.advancedLink {
font-family: var(--font-ui);
font-size: var(--text-2xs);
@@ -1264,13 +1175,11 @@
transition: opacity var(--t-base);
}
.advancedLink:hover { opacity: 1; }
.langGrid {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1);
}
.langChip {
font-family: var(--font-ui);
font-size: var(--text-2xs);
@@ -1284,20 +1193,17 @@
transition: color var(--t-base), border-color var(--t-base), background var(--t-base);
}
.langChip:hover { color: var(--text-muted); border-color: var(--border-strong); }
.langChipActive {
background: var(--accent-muted);
border-color: var(--accent-dim);
color: var(--accent-fg);
}
.langChipActive:hover { background: var(--accent-muted); color: var(--accent-fg); }
.advancedDivider {
height: 1px;
background: var(--border-dim);
margin: 2px 0;
}
.advancedCheck {
display: flex;
align-items: center;
@@ -1307,16 +1213,13 @@
color: var(--text-muted);
cursor: pointer;
}
.checkbox { accent-color: var(--accent-fg); cursor: pointer; }
.advancedFooter {
font-family: var(--font-ui);
font-size: var(--text-2xs);
color: var(--text-faint);
letter-spacing: var(--tracking-wide);
}
.advancedLinkStandalone {
display: inline-flex;
align-items: center;
@@ -1333,9 +1236,6 @@
transition: opacity var(--t-base);
}
.advancedLinkStandalone:hover { opacity: 1; }
/* ── Empty states ──────────────────────────────────────────────────────── */
.empty {
flex: 1;
display: flex;
@@ -1344,33 +1244,26 @@
justify-content: center;
gap: var(--sp-2);
}
.emptyIcon { color: var(--text-faint); }
.emptyText { font-size: var(--text-base); color: var(--text-muted); }
.emptyHint { font-size: var(--text-sm); color: var(--text-faint); }
/* ── Keyword results ───────────────────────────────────────────────────── */
.results {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.sourceSection {
padding: var(--sp-1) var(--sp-4) var(--sp-3);
border-bottom: 1px solid var(--border-dim);
}
.sourceSection:last-child { border-bottom: none; }
.sourceHeader {
display: flex;
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2) 0;
}
.sourceIcon {
width: 18px;
height: 18px;
@@ -1379,13 +1272,11 @@
flex-shrink: 0;
background: var(--bg-raised);
}
.sourceName {
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--text-secondary);
}
.sourceLang {
font-family: var(--font-ui);
font-size: var(--text-2xs);
@@ -1396,7 +1287,6 @@
border-radius: var(--radius-sm);
padding: 1px 5px;
}
.resultCount {
margin-left: auto;
font-family: var(--font-ui);
@@ -1404,15 +1294,12 @@
color: var(--text-faint);
letter-spacing: var(--tracking-wide);
}
.sourceError {
font-size: var(--text-xs);
color: var(--color-error);
padding: var(--sp-1) 0;
margin: 0;
}
/* Horizontal scroll row */
.sourceRow {
display: flex;
gap: var(--sp-3);
@@ -1421,9 +1308,6 @@
scrollbar-width: none;
}
.sourceRow::-webkit-scrollbar { display: none; }
/* ── Manga card ────────────────────────────────────────────────────────── */
.card {
display: flex;
flex-direction: column;
@@ -1438,7 +1322,6 @@
}
.card:hover .cover { filter: brightness(1.06); }
.card:hover .cardTitle { color: var(--text-primary); }
.coverWrap {
position: relative;
width: 100%;
@@ -1449,14 +1332,12 @@
border: 1px solid var(--border-dim);
transform: translateZ(0);
}
.cover {
width: 100%;
height: 100%;
object-fit: cover;
transition: filter var(--t-base);
}
.inLibBadge {
position: absolute;
bottom: var(--sp-1);
@@ -1471,7 +1352,6 @@
border-radius: var(--radius-sm);
border: 1px solid var(--accent-muted);
}
.cardTitle {
font-size: var(--text-sm);
color: var(--text-secondary);
@@ -1482,9 +1362,6 @@
overflow: hidden;
transition: color var(--t-base);
}
/* ── Skeleton ──────────────────────────────────────────────────────────── */
.skCard {
display: flex;
flex-direction: column;
@@ -1492,30 +1369,20 @@
flex-shrink: 0;
width: 110px;
}
.tagGrid .card { width: 100%; }
.tagGrid .skCard { width: 100%; }
.skeleton { border-radius: var(--radius-sm); }
.skCover {
aspect-ratio: 2 / 3;
width: 100%;
border-radius: var(--radius-md);
}
.skTitle { height: 10px; width: 80%; }
/* ── Split root (Tag + Source tabs) ────────────────────────────────────── */
.splitRoot {
flex: 1;
display: flex;
overflow: hidden;
}
/* ── Split sidebar ─────────────────────────────────────────────────────── */
.splitSidebar {
width: 180px;
flex-shrink: 0;
@@ -1524,7 +1391,6 @@
display: flex;
flex-direction: column;
}
.splitSearchWrap {
display: flex;
align-items: center;
@@ -1533,9 +1399,7 @@
border-bottom: 1px solid var(--border-dim);
flex-shrink: 0;
}
.splitSearchIcon { color: var(--text-faint); flex-shrink: 0; }
.splitSearchInput {
flex: 1;
background: none;
@@ -1547,7 +1411,6 @@
min-width: 0;
}
.splitSearchInput::placeholder { color: var(--text-faint); }
.splitSearchClear {
color: var(--text-faint);
font-size: 13px;
@@ -1559,7 +1422,6 @@
transition: color var(--t-base);
}
.splitSearchClear:hover { color: var(--text-muted); }
.splitList {
flex: 1;
overflow-y: auto;
@@ -1567,7 +1429,6 @@
scrollbar-width: thin;
scrollbar-color: var(--border-dim) transparent;
}
.splitItem {
display: flex;
align-items: center;
@@ -1582,13 +1443,11 @@
transition: background var(--t-fast), border-color var(--t-fast);
}
.splitItem:hover { background: var(--bg-raised); border-color: var(--border-dim); }
.splitItemActive {
background: var(--accent-muted);
border-color: var(--accent-dim);
}
.splitItemActive:hover { background: var(--accent-muted); }
.splitItemLabel {
font-size: var(--text-xs);
color: var(--text-muted);
@@ -1598,9 +1457,7 @@
white-space: nowrap;
}
.splitItemActive .splitItemLabel { color: var(--accent-fg); font-weight: var(--weight-medium); }
.splitItemSource { gap: var(--sp-2); }
.splitEmpty {
font-family: var(--font-ui);
font-size: var(--text-xs);
@@ -1608,7 +1465,6 @@
padding: var(--sp-3);
margin: 0;
}
.splitLoading {
flex: 1;
display: flex;
@@ -1616,16 +1472,12 @@
justify-content: center;
padding: var(--sp-6);
}
/* ── Split content ─────────────────────────────────────────────────────── */
.splitContent {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.splitContentHeader {
display: flex;
align-items: center;
@@ -1635,7 +1487,6 @@
flex-shrink: 0;
gap: var(--sp-2);
}
.splitSourceTitle {
display: flex;
align-items: center;
@@ -1643,7 +1494,6 @@
flex: 1;
min-width: 0;
}
.splitContentTitle {
font-size: var(--text-base);
font-weight: var(--weight-medium);
@@ -1653,7 +1503,6 @@
white-space: nowrap;
letter-spacing: var(--tracking-tight);
}
.splitResultCount {
font-family: var(--font-ui);
font-size: var(--text-2xs);
@@ -1661,7 +1510,6 @@
letter-spacing: var(--tracking-wide);
flex-shrink: 0;
}
.splitSourceIcon {
width: 18px;
height: 18px;
@@ -1670,9 +1518,6 @@
flex-shrink: 0;
background: var(--bg-raised);
}
/* ── Tag active bar ────────────────────────────────────────────────────── */
.tagActiveBar {
display: flex;
align-items: flex-start;
@@ -1682,7 +1527,6 @@
flex-shrink: 0;
flex-wrap: wrap;
}
.tagPillRow {
display: flex;
flex-wrap: wrap;
@@ -1690,7 +1534,6 @@
flex: 1;
min-width: 0;
}
.tagPill {
display: inline-flex;
align-items: center;
@@ -1704,7 +1547,6 @@
letter-spacing: var(--tracking-wide);
color: var(--accent-fg);
}
.tagPillRemove {
color: var(--accent-fg);
opacity: 0.6;
@@ -1717,21 +1559,18 @@
transition: opacity var(--t-base);
}
.tagPillRemove:hover { opacity: 1; }
.tagBarRight {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.tagModeToggle {
display: flex;
border: 1px solid var(--border-dim);
border-radius: var(--radius-md);
overflow: hidden;
}
.tagModeBtn {
display: flex;
align-items: center;
@@ -1751,7 +1590,6 @@
.tagModeBtn:hover { color: var(--text-muted); background: var(--bg-raised); }
.tagModeBtnActive { color: var(--accent-fg); background: var(--accent-muted); }
.tagModeBtnActive:hover { color: var(--accent-fg); background: var(--accent-muted); }
.tagClearAll {
display: flex;
align-items: center;
@@ -1771,15 +1609,11 @@
border-color: color-mix(in srgb, var(--color-error) 40%, transparent);
background: var(--color-error-bg, color-mix(in srgb, var(--color-error) 8%, transparent));
}
.tagCheckMark {
font-size: var(--text-xs);
color: var(--accent-fg);
margin-left: auto;
}
/* ── Grid results ──────────────────────────────────────────────────────── */
.tagGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
@@ -1789,9 +1623,6 @@
flex: 1;
align-content: start;
}
/* ── Show more / load more ─────────────────────────────────────────────── */
.showMoreCell {
grid-column: 1 / -1;
display: flex;
@@ -1799,7 +1630,6 @@
gap: var(--sp-2);
padding: var(--sp-2) 0;
}
.showMoreBtn {
display: inline-flex;
align-items: center;
@@ -1821,7 +1651,6 @@
border-color: var(--border-strong);
}
.showMoreBtn:disabled { opacity: 0.4; cursor: default; }
.loadMoreRow {
display: flex;
justify-content: center;
@@ -1829,9 +1658,6 @@
flex-shrink: 0;
border-top: 1px solid var(--border-dim);
}
/* ── Source tab: lang filter + browse bar ──────────────────────────────── */
.sourceBrowseBar {
display: flex;
align-items: center;
@@ -1840,9 +1666,54 @@
border-bottom: 1px solid var(--border-dim);
flex-shrink: 0;
}
/* ── NSFW badge ────────────────────────────────────────────────────────── */
.srcLangRow {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--border-dim);
flex-shrink: 0;
gap: var(--sp-2);
}
.langPocketLabel {
font-family: var(--font-ui);
font-size: var(--text-2xs);
color: var(--text-faint);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.langSelect {
appearance: none;
-webkit-appearance: none;
background: var(--bg-overlay);
border: 1px solid var(--border-dim);
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-family: var(--font-ui);
font-size: var(--text-2xs);
letter-spacing: var(--tracking-wide);
padding: 4px 24px 4px 8px;
cursor: pointer;
max-width: 110px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 256 256'%3E%3Cpath fill='%23888' d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 7px center;
transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
}
.langSelect:hover {
border-color: var(--border-strong);
background-color: var(--bg-raised);
color: var(--text-primary);
}
.langSelect:focus {
outline: none;
border-color: var(--accent-dim);
color: var(--text-primary);
}
.langSelect option {
background: var(--bg-surface);
color: var(--text-secondary);
}
.nsfwBadge {
font-family: var(--font-ui);
font-size: var(--text-2xs);
@@ -1855,81 +1726,8 @@
margin-left: auto;
flex-shrink: 0;
}
/* ── Language pocket ───────────────────────────────────────────────────── */
.langPocketToggle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--border-dim);
border-top: none;
border-left: none;
border-right: none;
background: none;
cursor: pointer;
flex-shrink: 0;
transition: background var(--t-fast);
}
.langPocketToggle:hover { background: var(--bg-raised); }
.langPocketLabel {
font-family: var(--font-ui);
font-size: var(--text-2xs);
color: var(--text-faint);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.langPocket {
display: flex;
flex-wrap: wrap;
gap: var(--sp-1);
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--border-dim);
flex-shrink: 0;
animation: fadeIn 0.1s ease both;
}
/* ── Source group (multi-lang) ─────────────────────────────────────────── */
.splitItemGroup { }
.splitItemGroupOpen { background: var(--bg-raised); }
.groupLangCount {
font-family: var(--font-ui);
font-size: var(--text-2xs);
color: var(--text-faint);
background: var(--bg-overlay);
border: 1px solid var(--border-dim);
border-radius: var(--radius-sm);
padding: 0px 5px;
flex-shrink: 0;
letter-spacing: var(--tracking-wide);
}
.groupChevron {
color: var(--text-faint);
flex-shrink: 0;
transition: transform 0.2s ease;
}
.splitItemLangOption {
padding-left: var(--sp-5);
background: var(--bg-overlay);
}
.splitItemLangOption:hover { background: var(--bg-raised); }
.langOptionDot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--border-strong);
flex-shrink: 0;
}
.splitItemActive .langOptionDot { background: var(--accent-fg); }
</style>
<script module>
src/components/reader/Reader.svelte
+139 -21
View File
@@ -1,9 +1,9 @@
<script lang="ts">
import { onMount, untrack } from "svelte";
import { X, CaretLeft, CaretRight, ArrowLeft, ArrowRight, Square, Rows, Download, ArrowsLeftRight, ArrowsIn, ArrowsOut, ArrowsVertical, CircleNotch, MagnifyingGlassMinus, MagnifyingGlassPlus } from "phosphor-svelte";
import { onMount, untrack, tick } from "svelte";
import { X, CaretLeft, CaretRight, ArrowLeft, ArrowRight, Square, Rows, Download, ArrowsLeftRight, ArrowsIn, ArrowsOut, ArrowsVertical, CircleNotch, MagnifyingGlassMinus, MagnifyingGlassPlus, BookmarkSimple } 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 { store, closeReader, openReader, addHistory, updateSettings, checkAndMarkCompleted, setSettingsOpen } from "../../store/state.svelte";
import { store, closeReader, openReader, addHistory, updateSettings, checkAndMarkCompleted, setSettingsOpen, addBookmark, removeBookmark, resetChapterProgress } from "../../store/state.svelte";
import { matchesKeybind, toggleFullscreen, DEFAULT_KEYBINDS } from "../../lib/keybinds";
import { setReading } from "../../lib/discord";
import type { FitMode } from "../../store/state.svelte";
@@ -185,8 +185,36 @@
const zoomPct = $derived(Math.round(zoom * 100));
// ─── Resume / bookmark ────────────────────────────────────────────────────────
// resumePage: fixed at component init from history. Never changes after mount.
// We read from history directly (not store.pageNumber) because loadChapter
// temporarily resets store.pageNumber to 1 during the fetch.
const _resumeHistoryPage = store.activeChapter
? (store.history.find(h => h.chapterId === store.activeChapter!.id)?.pageNumber ?? 1)
: 1;
let resumePage = $state(_resumeHistoryPage > 1 ? _resumeHistoryPage : 0);
let resumeDismissed = $state(false);
// stripResumeReady: flipped to true once the longstrip scroll-to-resume fires.
// In single/double mode store.pageNumber drives the banner; in longstrip we
// use this flag because store.pageNumber is scroll-observer-driven and may
// never exactly equal resumePage after layout shifts from image loading.
let stripResumeReady = $state(false);
const showResumeBanner = $derived(
resumePage > 1 && !resumeDismissed &&
(style === "longstrip" ? stripResumeReady : store.pageNumber === resumePage)
);
const currentBookmark = $derived(
store.activeChapter ? store.bookmarks.find(b => b.chapterId === store.activeChapter!.id) : undefined
);
const isBookmarked = $derived(!!currentBookmark);
// In longstrip, always track the visually active chapter for history/RPC —
// autoNext only controls nav-button behavior, not which chapter we attribute
// progress to. Without this, scrolling into ch48 while ch47 is activeChapter
// would record page 28 of ch48 as page 28 of ch47.
const displayChapter = $derived(
style === "longstrip" && autoNext && visibleChapterId
style === "longstrip" && visibleChapterId
? (store.activeChapterList.find(c => c.id === visibleChapterId) ?? store.activeChapter)
: store.activeChapter
);
@@ -216,7 +244,7 @@
});
const visibleChunkLastPage = $derived.by(() => {
if (style !== "longstrip" || !autoNext) return lastPage;
if (style !== "longstrip") return lastPage;
const chId = visibleChapterId ?? store.activeChapter?.id;
const chunk = stripChapters.find(c => c.chapterId === chId);
return chunk?.urls.length ?? lastPage;
@@ -235,7 +263,7 @@
const stripToRender = $derived(
style === "longstrip"
? (autoNext && stripChapters.length > 0
? (stripChapters.length > 0
? stripChapters
: [{ chapterId: store.activeChapter?.id ?? 0, chapterName: store.activeChapter?.name ?? "", urls: store.pageUrls }])
: []
@@ -269,11 +297,18 @@
pageReady = false;
stripChapters = [];
store.pageUrls = [];
// Snapshot the resume page BEFORE resetting — openReader already set
// store.pageNumber to the saved position, but we must not clobber it here.
// We reset to 1 as a safe interim value while pages load, then restore
// after the fetch completes so the viewer jumps to the right page.
const resumeTo = store.pageNumber > 1 ? store.pageNumber : 1;
store.pageNumber = 1;
try {
const urls = await fetchPages(id, ctrl.signal);
if (ctrl.signal.aborted) return;
store.pageUrls = urls;
// Clamp the resume page to actual page count (in case history is stale).
if (resumeTo > 1) store.pageNumber = Math.min(resumeTo, urls.length || resumeTo);
pageReady = true;
loading = false;
} catch (e: any) {
@@ -284,20 +319,53 @@
}
// ─── Strip initialisation ─────────────────────────────────────────────────────
// IMPORTANT: do NOT read store.pageNumber here — it's updated by the scroll
// observer on every scroll event, which would re-run this effect continuously
// and reset stripChapters/scroll on every pixel scrolled (the "snap" bug).
// Resume page is read from the fixed `resumePage` $state instead, which is
// captured once at component init from history and never changes.
$effect(() => {
if (style === "longstrip" && store.pageUrls.length && store.activeChapter) {
const ch = store.activeChapter;
const urls = store.pageUrls;
const ch = store.activeChapter;
const urls = store.pageUrls;
// resumePage is a $state set once from history — not reactive to scroll.
const targetPg = untrack(() => resumePage);
appending = false;
if (autoNext) {
stripChapters = [{ chapterId: ch.id, chapterName: ch.name, urls }];
visibleChapterId = ch.id;
} else {
stripChapters = [];
visibleChapterId = null;
}
if (containerEl) containerEl.scrollTop = 0;
// Always populate stripChapters in longstrip — it's needed for infinite
// scroll appending. autoNext only controls whether the chapter header
// and visible-chapter tracking update as you scroll between chapters.
stripChapters = [{ chapterId: ch.id, chapterName: ch.name, urls }];
visibleChapterId = ch.id;
// Wait for Svelte to flush the new img elements into the DOM, then scroll.
// If resuming mid-chapter (targetPg > 1), force-load preceding images so
// their heights are in layout, then scrollIntoView on the target image.
tick().then(() => {
if (!containerEl) return;
if (targetPg > 1) {
const chId = ch.id;
const scrollToResumePage = () => {
const target = containerEl.querySelector<HTMLImageElement>(
`img[data-local-page="${targetPg}"][data-chapter="${chId}"]`
);
if (!target) { requestAnimationFrame(scrollToResumePage); return; }
// Eager-load all images up to the target so their heights are known.
containerEl.querySelectorAll<HTMLImageElement>(`img[data-chapter="${chId}"]`)
.forEach((img, i) => { if (i < targetPg) img.loading = "eager"; });
const doScroll = () => {
target.scrollIntoView({ block: "start" });
stripResumeReady = true;
};
if (target.complete && target.naturalHeight > 0) { doScroll(); }
else { target.loading = "eager"; target.addEventListener("load", doScroll, { once: true }); }
};
scrollToResumePage();
return;
}
containerEl.scrollTop = 0;
});
}
});
@@ -334,9 +402,6 @@
let stripChaptersRef: StripChapter[] = [];
$effect(() => { stripChaptersRef = stripChapters; });
let autoNextRef = false;
$effect(() => { autoNextRef = autoNext; });
function setupScrollTracking(): () => void {
if (!containerEl || style !== "longstrip") return () => {};
@@ -362,7 +427,13 @@
}
if (activePage !== null) store.pageNumber = activePage;
if (activeChId && activeChId !== visibleChapterId) visibleChapterId = activeChId;
if (activeChId && activeChId !== visibleChapterId) {
// Crossed into a new chapter — reset the previous chapter's resume
// position to page 1 so reopening it starts fresh. The history entry
// itself is kept so it still appears in the continue-reading UI.
if (visibleChapterId) resetChapterProgress(visibleChapterId);
visibleChapterId = activeChId;
}
if (store.settings.autoMarkRead && activePage !== null && activeChId) {
const chunk = stripChaptersRef.find(c => c.chapterId === activeChId);
@@ -377,7 +448,8 @@
}
function onScrollAppend() {
if (!autoNextRef) return;
// Infinite scroll always active in longstrip — autoNext only controls the
// nav-button chapter transition behavior, not scroll-triggered appending.
const pct = (containerEl.scrollTop + containerEl.clientHeight) / containerEl.scrollHeight;
if (pct >= 0.80) appendNextChapter();
}
@@ -577,6 +649,24 @@
restoreZoomAnchor();
}
function toggleBookmark() {
const ch = store.activeChapter;
const manga = store.activeManga;
if (!ch || !manga) return;
if (isBookmarked) {
removeBookmark(ch.id);
} else {
addBookmark({
mangaId: manga.id,
mangaTitle: manga.title,
thumbnailUrl: manga.thumbnailUrl,
chapterId: ch.id,
chapterName: ch.name,
pageNumber: store.pageNumber,
});
}
}
// ─── Settings toggles ─────────────────────────────────────────────────────────
function cycleStyle() {
@@ -639,6 +729,7 @@
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(); setSettingsOpen(true); }
else if (matchesKeybind(e, kb.toggleBookmark)) { e.preventDefault(); toggleBookmark(); }
}
function handleTap(e: MouseEvent) {
@@ -772,6 +863,12 @@
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 showResumeBanner}
<div class="resume-banner" role="status">
<span>Resumed from page {resumePage}</span>
<button class="resume-dismiss" onclick={() => resumeDismissed = true}>✕</button>
</div>
{/if}
{#if loading}
<div class="center-overlay"><CircleNotch size={20} weight="light" class="anim-spin" style="color:var(--text-faint)" /></div>
{/if}
@@ -860,6 +957,7 @@
.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; }
.icon-btn.active { color: var(--accent-fg); }
.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); }
@@ -936,5 +1034,25 @@
.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); }
/* ── Resume banner ───────────────────────────────────────────────────────── */
.resume-banner {
position: absolute; top: var(--sp-3); left: 50%; translate: -50% 0;
display: flex; align-items: center; gap: var(--sp-2);
background: var(--bg-raised); border: 1px solid var(--border-base);
border-radius: var(--radius-lg); padding: 6px var(--sp-3);
font-family: var(--font-ui); font-size: var(--text-xs);
color: var(--text-secondary); z-index: 20;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
animation: scaleIn 0.15s ease both;
white-space: nowrap;
}
.resume-dismiss {
display: flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%;
font-size: 9px; color: var(--text-faint);
transition: color var(--t-fast), background var(--t-fast);
}
.resume-dismiss:hover { color: var(--text-primary); background: var(--bg-overlay); }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.97) } to { opacity: 1; transform: scale(1) } }
</style>
src/components/settings/Settings.svelte
+208 -271
View File
File diff suppressed because it is too large Load Diff
src/components/shared/MangaPreview.svelte
+1 -1
View File
@@ -356,7 +356,7 @@
<div class="progress-track"><div class="progress-fill" style="width:{(readCount / totalCount) * 100}%"></div></div>
{/if}
{#if continueChapter}
<button class="read-btn" onclick={() => { openReader(continueChapter!.ch, chapters); close(); }}>
<button class="read-btn" onclick={() => { openReader(continueChapter!.ch, chapters, displayManga); close(); }}>
<Play size={12} weight="fill" />{continueChapter.label}
</button>
{/if}
src/components/shared/SourceList.svelte
+2 -1
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { onMount } from "svelte";
import { MagnifyingGlass, CircleNotch, CaretDown, CaretRight } from "phosphor-svelte";
import { gql, thumbUrl } from "../../lib/client";
import { GET_SOURCES } from "../../lib/queries";
@@ -11,7 +12,7 @@
let search = $state("");
let expanded = $state(new Set<string>());
$effect(() => {
onMount(() => {
gql<{ sources: { nodes: Source[] } }>(GET_SOURCES)
.then((d) => { sources = d.sources.nodes; })
.catch(console.error)
src/lib/discord.ts
+11 -21
View File
@@ -5,7 +5,7 @@ import type { Manga, Chapter } from "./types";
const APP_ID = "1487894643613106298";
const FALLBACK_IMAGE = "moku_logo";
let sessionStart: number | null = null; // ← captured once on init
let sessionStart: number | null = null;
function isPublicUrl(url: string | null | undefined): boolean {
return typeof url === "string" && url.startsWith("https://");
@@ -34,10 +34,8 @@ const BUTTONS = [
];
export async function initRpc(): Promise<void> {
sessionStart = Date.now(); // ← set once here
await start(APP_ID)
.then(() => console.log("[discord] RPC started"))
.catch((e) => console.error("[discord] initRpc failed:", e));
sessionStart = Date.now();
await start(APP_ID).catch(() => {});
}
export async function setReading(manga: Manga, chapter: Chapter): Promise<void> {
@@ -51,12 +49,10 @@ export async function setReading(manga: Manga, chapter: Chapter): Promise<void>
.setDetails(trunc(manga.title))
.setState(`${formatChapter(chapter)} · Reading`)
.setAssets(assets)
.setTimestamps(getTimestamps()); // ← reuses session start
.setTimestamps(getTimestamps());
activity.setButton(BUTTONS);
await setActivity(activity)
.then(() => console.log("[discord] reading →", manga.title, formatChapter(chapter)))
.catch((e) => console.error("[discord] setActivity failed:", e));
await setActivity(activity).catch(() => {});
}
export async function setIdle(): Promise<void> {
@@ -67,23 +63,17 @@ export async function setIdle(): Promise<void> {
const activity = new Activity()
.setDetails("Browsing")
.setAssets(assets)
.setTimestamps(getTimestamps()); // ← reuses session start
.setTimestamps(getTimestamps());
activity.setButton(BUTTONS);
await setActivity(activity)
.then(() => console.log("[discord] idle"))
.catch((e) => console.error("[discord] setActivity failed (idle):", e));
await setActivity(activity).catch(() => {});
}
export async function clearReading(): Promise<void> {
await clearActivity()
.then(() => console.log("[discord] activity cleared"))
.catch((e) => console.error("[discord] clearActivity failed:", e));
await clearActivity().catch(() => {});
}
export async function destroyRpc(): Promise<void> {
sessionStart = null; // ← clean up on stop
await stop()
.then(() => console.log("[discord] RPC stopped"))
.catch((e) => console.error("[discord] destroyRpc failed:", e));
}
sessionStart = null;
await stop().catch(() => {});
}
src/lib/keybinds.ts
+3
View File
@@ -12,6 +12,7 @@ export interface Keybinds {
togglePageStyle: string;
toggleFullscreen: string;
openSettings: string;
toggleBookmark: string;
}
export const DEFAULT_KEYBINDS: Keybinds = {
@@ -26,6 +27,7 @@ export const DEFAULT_KEYBINDS: Keybinds = {
togglePageStyle: "q",
toggleFullscreen: "f",
openSettings: "o",
toggleBookmark: "m",
};
export const KEYBIND_LABELS: Record<keyof Keybinds, string> = {
@@ -40,6 +42,7 @@ export const KEYBIND_LABELS: Record<keyof Keybinds, string> = {
togglePageStyle: "Toggle page style",
toggleFullscreen: "Toggle fullscreen",
openSettings: "Open settings",
toggleBookmark: "Toggle bookmark",
};
export function eventToKeybind(e: KeyboardEvent): string {
src/lib/util.ts
+59 -11
View File
@@ -8,29 +8,77 @@ export function cn(...inputs: ClassValue[]) {
// ── NSFW genre filtering ──────────────────────────────────────────────────────
/**
* Genre tags that indicate adult/mature content.
* Checked case-insensitively against each manga's genre array.
* Extend this set if additional tags need to be covered.
* Default substrings used when no user-configured list is available.
* The Settings > Content tab lets users add/remove entries from this list,
* which is stored as settings.nsfwFilteredTags.
*/
const NSFW_GENRE_TAGS = new Set([
export const DEFAULT_NSFW_TAGS = [
"adult",
"mature",
"hentai",
"ecchi",
"erotica",
"pornographic",
"erotic", // catches "erotica", "erotic content", "erotic manga"
"pornograph", // catches "pornographic", "pornography"
"18+",
"smut",
"lemon",
"explicit",
]);
"sexual violence",
];
/**
* Returns true if the manga carries at least one genre tag that is considered
* adult/mature. Used to enforce the `showNsfw` setting across all views.
* Returns true if the manga carries at least one genre tag matching any of
* the provided substrings (case-insensitive). Pass settings.nsfwFilteredTags
* as the tag list; falls back to DEFAULT_NSFW_TAGS if omitted.
*/
export function isNsfwManga(manga: { genre?: string[] | null }): boolean {
return (manga.genre ?? []).some((g) => NSFW_GENRE_TAGS.has(g.toLowerCase().trim()));
export function isNsfwManga(
manga: { genre?: string[] | null },
tags: string[] = DEFAULT_NSFW_TAGS,
): boolean {
return (manga.genre ?? []).some((g) => {
const normalized = g.toLowerCase().trim();
return tags.some((sub) => normalized.includes(sub));
});
}
/**
* Single authoritative NSFW gate used by all views.
*
* Returns true when the manga should be HIDDEN. Checks in order:
* 1. showNsfw disabled globally → skip everything, hide by source flag or genre match.
* 2. Source is in blockedSourceIds → always hide regardless of showNsfw.
* 3. Source is in allowedSourceIds → always show (bypasses isNsfw flag only, genre tags still apply).
* 4. Source isNsfw flag → hide unless source is allowed.
* 5. Genre tag match → hide.
*
* Usage: items.filter(m => !shouldHideNsfw(m, settings))
*/
export function shouldHideNsfw(
manga: {
genre?: string[] | null;
source?: { id?: string; isNsfw?: boolean } | null;
},
settings: {
showNsfw: boolean;
nsfwFilteredTags: string[];
nsfwAllowedSourceIds: string[];
nsfwBlockedSourceIds: string[];
},
): boolean {
const srcId = manga.source?.id;
// Explicit block always wins, even when showNsfw is on
if (srcId && settings.nsfwBlockedSourceIds.includes(srcId)) return true;
// If NSFW is globally allowed, only explicit blocks apply
if (settings.showNsfw) return false;
// Source is explicitly allowed — skip the isNsfw flag check, but still filter genres
const sourceAllowed = !!(srcId && settings.nsfwAllowedSourceIds.includes(srcId));
if (!sourceAllowed && manga.source?.isNsfw) return true;
return isNsfwManga(manga, settings.nsfwFilteredTags);
}
// ── Source deduplication ──────────────────────────────────────────────────────
src/store/state.svelte.ts
+80 -3
View File
@@ -108,6 +108,18 @@ export interface HistoryEntry {
readAt: number;
}
export interface BookmarkEntry {
mangaId: number;
mangaTitle: string;
thumbnailUrl: string;
chapterId: number;
chapterName: string;
pageNumber: number;
savedAt: number;
/** Optional user label, e.g. "before the fight scene" */
label?: string;
}
/**
* ReadLogEntry — append-only record of every chapter-completion event.
* Unlike HistoryEntry (which dedupes per chapter for the "continue" UI),
@@ -228,6 +240,15 @@ export interface Settings {
hiddenCategoryIds: number[];
/** Category ID that opens by default when the Library tab is first visited. null = no default (shows Saved). */
defaultLibraryCategoryId: number | null;
/**
* Content filtering — managed via the Content tab in Settings.
* nsfwFilteredTags: substrings matched against genre tags (case-insensitive).
* nsfwAllowedSourceIds: sources explicitly permitted even though isNsfw = true.
* nsfwBlockedSourceIds: sources always blocked regardless of tag content.
*/
nsfwFilteredTags: string[];
nsfwAllowedSourceIds: string[];
nsfwBlockedSourceIds: string[];
/** Per-tab sort/filter state — keyed by libraryFilter value (e.g. "library", "downloaded", "42"). */
libraryTabSort: Record<string, { mode: LibrarySortMode; dir: LibrarySortDir }>;
libraryTabStatus: Record<string, LibraryStatusFilter>;
@@ -295,6 +316,9 @@ export const DEFAULT_SETTINGS: Settings = {
customThemes: [],
hiddenCategoryIds: [],
defaultLibraryCategoryId: null,
nsfwFilteredTags: ["adult", "mature", "hentai", "ecchi", "erotic", "pornograph", "18+", "smut", "lemon", "explicit", "sexual violence"],
nsfwAllowedSourceIds: [],
nsfwBlockedSourceIds: [],
libraryTabSort: {},
libraryTabStatus: {},
};
@@ -359,6 +383,9 @@ function mergeSettings(saved: any): Settings {
hiddenCategoryIds: saved?.settings?.hiddenCategoryIds ?? [],
libraryTabSort: saved?.settings?.libraryTabSort ?? {},
libraryTabStatus: saved?.settings?.libraryTabStatus ?? {},
nsfwFilteredTags: saved?.settings?.nsfwFilteredTags ?? ["adult", "mature", "hentai", "ecchi", "erotic", "pornograph", "18+", "smut", "lemon", "explicit", "sexual violence"],
nsfwAllowedSourceIds: saved?.settings?.nsfwAllowedSourceIds ?? [],
nsfwBlockedSourceIds: saved?.settings?.nsfwBlockedSourceIds ?? [],
};
}
@@ -385,6 +412,11 @@ class Store {
* Capped at 5 000 entries; oldest are trimmed first.
*/
readLog: ReadLogEntry[] = $state(saved?.readLog ?? []);
/**
* bookmarks — user-placed markers at a specific page in a chapter.
* Capped at 200 entries; oldest are trimmed first when the cap is hit.
*/
bookmarks: BookmarkEntry[] = $state(saved?.bookmarks ?? []);
readingStats: ReadingStats = $state(mergeStats(saved));
settings: Settings = $state(mergeSettings(saved));
@@ -430,16 +462,26 @@ class Store {
$effect(() => { persist({ libraryFilter: this.libraryFilter }); });
$effect(() => { persist({ history: this.history }); });
$effect(() => { persist({ readLog: this.readLog }); });
$effect(() => { persist({ bookmarks: this.bookmarks }); });
$effect(() => { persist({ readingStats: this.readingStats }); });
$effect(() => { persist({ settings: this.settings }); });
});
}
openReader(chapter: Chapter, chapterList: Chapter[]) {
openReader(chapter: Chapter, chapterList: Chapter[], manga?: Manga | null) {
// Always set activeManga when provided so the Reader has full manga
// context for Discord RPC (setReading) and any other manga-aware logic.
// Callers that already set store.activeManga directly may omit this arg.
if (manga) this.activeManga = manga;
this.activeChapter = chapter;
this.activeChapterList = chapterList;
this.pageUrls = [];
this.pageNumber = 1;
// Resume from the last saved position if history has one for this chapter.
// history[n].pageNumber is kept up-to-date by the progress $effect in
// Reader.svelte as the user pages through, so this is always the last page
// they were on — not just the page they started from.
const saved = this.history.find(h => h.chapterId === chapter.id);
this.pageNumber = (saved && saved.pageNumber > 1) ? saved.pageNumber : 1;
}
closeReader() {
@@ -517,7 +559,38 @@ class Store {
};
}
/**
* Add or update a bookmark for the given chapter/page. Only one bookmark
* per chapter is kept — adding a second one replaces the first.
*/
addBookmark(entry: Omit<BookmarkEntry, "savedAt">, label?: string) {
const bookmark: BookmarkEntry = { ...entry, savedAt: Date.now(), label };
this.bookmarks = [
bookmark,
...this.bookmarks.filter(b => b.chapterId !== entry.chapterId),
].slice(0, 200);
}
removeBookmark(chapterId: number) {
this.bookmarks = this.bookmarks.filter(b => b.chapterId !== chapterId);
}
getBookmark(chapterId: number): BookmarkEntry | undefined {
return this.bookmarks.find(b => b.chapterId === chapterId);
}
clearHistory() { this.history = []; this.readLog = []; }
/**
* Reset the resume position for a chapter back to page 1.
* Called when the user scrolls past a chapter boundary in longstrip — the
* chapter still appears in history (for the continue-reading UI), but
* reopening it will start from page 1 instead of resuming mid-chapter.
*/
resetChapterProgress(chapterId: number) {
this.history = this.history.map(h =>
h.chapterId === chapterId ? { ...h, pageNumber: 1 } : h
);
}
clearHistoryForManga(mangaId: number) {
this.history = this.history.filter(x => x.mangaId !== mangaId);
this.readLog = this.readLog.filter(x => x.mangaId !== mangaId);
@@ -649,10 +722,11 @@ export const store = new Store();
// ── Function re-exports — zero call-site changes for actions ──────────────────
export function openReader(chapter: Chapter, chapterList: Chapter[]) { store.openReader(chapter, chapterList); }
export function openReader(chapter: Chapter, chapterList: Chapter[], manga?: Manga | null) { store.openReader(chapter, chapterList, manga); }
export function closeReader() { store.closeReader(); }
export function addHistory(entry: HistoryEntry, completed?: boolean, minutes?: number) { store.addHistory(entry, completed, minutes); }
export function clearHistory() { store.clearHistory(); }
export function resetChapterProgress(chapterId: number) { store.resetChapterProgress(chapterId); }
export function clearHistoryForManga(mangaId: number) { store.clearHistoryForManga(mangaId); }
export function wipeAllData() { store.wipeAllData(); }
export function linkManga(idA: number, idB: number) { store.linkManga(idA, idB); }
@@ -677,6 +751,9 @@ export function setSettingsOpen(next: boolean) { store
export function updateSettings(patch: Partial<Settings>) { store.updateSettings(patch); }
export function resetKeybinds() { store.resetKeybinds(); }
export function clearDiscoverCache() { store.clearDiscoverCache(); }
export function addBookmark(entry: Omit<BookmarkEntry, "savedAt">, label?: string) { store.addBookmark(entry, label); }
export function removeBookmark(chapterId: number) { store.removeBookmark(chapterId); }
export function getBookmark(chapterId: number) { return store.getBookmark(chapterId); }
export function toggleHiddenCategory(id: number) { store.toggleHiddenCategory(id); }
export function saveCustomTheme(theme: CustomTheme) { store.saveCustomTheme(theme); }
export function deleteCustomTheme(id: string) { store.deleteCustomTheme(id); }