mirror of
https://github.com/moku-project/Moku.git
synced 2026-06-13 09:19:56 -05:00
Finish phase 3
This commit is contained in:
Zerebos
+35
-35
@@ -1,49 +1,49 @@
|
||||
const IDLE_EVENTS = ['mousemove', 'mousedown', 'keydown', 'touchstart', 'wheel'] as const;
|
||||
|
||||
export function mountIdleDetection(
|
||||
getTimeoutMinutes: () => number | undefined,
|
||||
onIdle: () => void,
|
||||
onActive: () => void,
|
||||
getTimeoutMinutes: () => number | undefined,
|
||||
onIdle: () => void,
|
||||
onActive: () => void,
|
||||
): () => void {
|
||||
let timer: ReturnType<typeof setTimeout> | null = null;
|
||||
let idle = false;
|
||||
let timer: ReturnType<typeof setTimeout> | null = null;
|
||||
let idle = false;
|
||||
|
||||
const markActive = () => {
|
||||
if (!idle) return;
|
||||
idle = false;
|
||||
onActive();
|
||||
};
|
||||
const markActive = () => {
|
||||
if (!idle) return;
|
||||
idle = false;
|
||||
onActive();
|
||||
};
|
||||
|
||||
const resetTimer = () => {
|
||||
if (timer) clearTimeout(timer);
|
||||
const resetTimer = () => {
|
||||
if (timer) clearTimeout(timer);
|
||||
|
||||
const timeoutMinutes = getTimeoutMinutes() ?? 5;
|
||||
const timeoutMs = Math.max(0, timeoutMinutes) * 60 * 1000;
|
||||
const timeoutMinutes = getTimeoutMinutes() ?? 5;
|
||||
const timeoutMs = Math.max(0, timeoutMinutes) * 60 * 1000;
|
||||
|
||||
if (timeoutMs === 0) {
|
||||
markActive();
|
||||
return;
|
||||
}
|
||||
if (timeoutMs === 0) {
|
||||
markActive();
|
||||
return;
|
||||
}
|
||||
|
||||
markActive();
|
||||
markActive();
|
||||
|
||||
timer = setTimeout(() => {
|
||||
if (idle) return;
|
||||
idle = true;
|
||||
onIdle();
|
||||
}, timeoutMs);
|
||||
};
|
||||
timer = setTimeout(() => {
|
||||
if (idle) return;
|
||||
idle = true;
|
||||
onIdle();
|
||||
}, timeoutMs);
|
||||
};
|
||||
|
||||
IDLE_EVENTS.forEach((eventName) => {
|
||||
window.addEventListener(eventName, resetTimer, { passive: true });
|
||||
});
|
||||
|
||||
resetTimer();
|
||||
|
||||
return () => {
|
||||
if (timer) clearTimeout(timer);
|
||||
IDLE_EVENTS.forEach((eventName) => {
|
||||
window.removeEventListener(eventName, resetTimer);
|
||||
window.addEventListener(eventName, resetTimer, {passive: true});
|
||||
});
|
||||
};
|
||||
|
||||
resetTimer();
|
||||
|
||||
return () => {
|
||||
if (timer) clearTimeout(timer);
|
||||
IDLE_EVENTS.forEach((eventName) => {
|
||||
window.removeEventListener(eventName, resetTimer);
|
||||
});
|
||||
};
|
||||
}
|
||||
@@ -16,9 +16,9 @@ export function applyZoom(uiZoom: number) {
|
||||
|
||||
export function zoomDelta(e: KeyboardEvent, current: number): number | null {
|
||||
if (!e.ctrlKey) return null;
|
||||
if (e.key === "=" || e.key === "+") { e.preventDefault(); return Math.min(2.0, Math.round((current + 0.1) * 10) / 10); }
|
||||
if (e.key === "-") { e.preventDefault(); return Math.max(0.5, Math.round((current - 0.1) * 10) / 10); }
|
||||
if (e.key === "0") { e.preventDefault(); return 1.0; }
|
||||
if (e.key === "=" || e.key === "+") {e.preventDefault(); return Math.min(2.0, Math.round((current + 0.1) * 10) / 10);}
|
||||
if (e.key === "-") {e.preventDefault(); return Math.max(0.5, Math.round((current - 0.1) * 10) / 10);}
|
||||
if (e.key === "0") {e.preventDefault(); return 1.0;}
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -43,19 +43,19 @@ export function clampZoom(z: number, min: number, max: number): number {
|
||||
export function captureZoomAnchor(
|
||||
containerEl: HTMLElement | null,
|
||||
style: string,
|
||||
out: { el: HTMLElement | null; offset: number },
|
||||
out: {el: HTMLElement | null; offset: number;},
|
||||
) {
|
||||
if (!containerEl || style !== "longstrip") return;
|
||||
const containerTop = containerEl.getBoundingClientRect().top;
|
||||
for (const img of containerEl.querySelectorAll<HTMLElement>("img[data-local-page]")) {
|
||||
const rect = img.getBoundingClientRect();
|
||||
if (rect.bottom > containerTop) { out.el = img; out.offset = rect.top - containerTop; return; }
|
||||
if (rect.bottom > containerTop) {out.el = img; out.offset = rect.top - containerTop; return;}
|
||||
}
|
||||
}
|
||||
|
||||
export function restoreZoomAnchor(
|
||||
containerEl: HTMLElement | null,
|
||||
out: { el: HTMLElement | null; offset: number },
|
||||
out: {el: HTMLElement | null; offset: number;},
|
||||
) {
|
||||
if (!out.el || !containerEl) return;
|
||||
const el = out.el;
|
||||
|
||||
+10
-10
@@ -1,12 +1,12 @@
|
||||
export type AppStatus = 'booting' | 'not-configured' | 'auth' | 'ready' | 'error'
|
||||
export type AppStatus = 'booting' | 'not-configured' | 'auth' | 'ready' | 'error';
|
||||
|
||||
export const appState = $state({
|
||||
status: 'booting' as AppStatus,
|
||||
error: null as string | null,
|
||||
serverUrl: '',
|
||||
authenticated: false,
|
||||
authMode: 'NONE' as 'NONE' | 'BASIC_AUTH' | 'UI_LOGIN',
|
||||
platform: 'web' as 'web' | 'tauri' | 'capacitor',
|
||||
version: '',
|
||||
idle: false,
|
||||
})
|
||||
status: 'booting' as AppStatus,
|
||||
error: null as string | null,
|
||||
serverUrl: '',
|
||||
authenticated: false,
|
||||
authMode: 'NONE' as 'NONE' | 'BASIC_AUTH' | 'UI_LOGIN',
|
||||
platform: 'web' as 'web' | 'tauri' | 'capacitor',
|
||||
version: '',
|
||||
idle: false,
|
||||
});
|
||||
@@ -1 +1,472 @@
|
||||
<p>library</p>
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte'
|
||||
import { Funnel, ArrowsDownUp, SquaresFour, ListBullets, X } from 'phosphor-svelte'
|
||||
import { loadLibrary } from '$lib/request-manager/manga'
|
||||
import { libraryState, filteredItems } from '$lib/state/library.svelte'
|
||||
import type { LibrarySortOption } from '$lib/state/library.svelte'
|
||||
import type { MangaStatus } from '$lib/server-adapters/types'
|
||||
import MangaCard from '$lib/ui/manga/MangaCard.svelte'
|
||||
|
||||
const sortOptions: Array<{ value: LibrarySortOption; label: string }> = [
|
||||
{ value: 'alphabetical', label: 'Alphabetical' },
|
||||
{ value: 'unread', label: 'Unread chapters' },
|
||||
{ value: 'lastRead', label: 'Last read' },
|
||||
{ value: 'dateAdded', label: 'Date added' },
|
||||
]
|
||||
|
||||
const statusOptions: Array<{ value: MangaStatus | 'all'; label: string }> = [
|
||||
{ value: 'all', label: 'All statuses' },
|
||||
{ value: 'ONGOING', label: 'Ongoing' },
|
||||
{ value: 'COMPLETED', label: 'Completed' },
|
||||
{ value: 'ON_HIATUS', label: 'On hiatus' },
|
||||
{ value: 'CANCELLED', label: 'Cancelled' },
|
||||
{ value: 'LICENSED', label: 'Licensed' },
|
||||
{ value: 'PUBLISHING_FINISHED', label: 'Publishing finished' },
|
||||
]
|
||||
|
||||
let filtersOpen = $state(false)
|
||||
|
||||
const availableTags = $derived.by(() => {
|
||||
const tags: string[] = []
|
||||
for (const manga of libraryState.items) {
|
||||
for (const tag of manga.tags ?? []) {
|
||||
const normalized = tag.trim()
|
||||
if (normalized && !tags.includes(normalized)) tags.push(normalized)
|
||||
}
|
||||
}
|
||||
return tags.sort((a, b) => a.localeCompare(b))
|
||||
})
|
||||
|
||||
const activeFilterCount = $derived.by(() => {
|
||||
let count = 0
|
||||
if (libraryState.filter.unread) count += 1
|
||||
if (libraryState.filter.status !== 'all') count += 1
|
||||
if (libraryState.filter.tags.length > 0) count += 1
|
||||
if (libraryState.filter.query.trim()) count += 1
|
||||
return count
|
||||
})
|
||||
|
||||
const hasResults = $derived(filteredItems.length > 0)
|
||||
|
||||
onMount(async () => {
|
||||
if (libraryState.items.length === 0) {
|
||||
await loadLibrary({ inLibrary: true })
|
||||
}
|
||||
})
|
||||
|
||||
function toggleTag(tag: string) {
|
||||
if (libraryState.filter.tags.includes(tag)) {
|
||||
libraryState.filter.tags = libraryState.filter.tags.filter(t => t !== tag)
|
||||
return
|
||||
}
|
||||
libraryState.filter.tags = [...libraryState.filter.tags, tag]
|
||||
}
|
||||
|
||||
function clearFilters() {
|
||||
libraryState.filter.status = 'all'
|
||||
libraryState.filter.tags = []
|
||||
libraryState.filter.unread = false
|
||||
libraryState.filter.query = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="library-page">
|
||||
<header class="toolbar">
|
||||
<div class="title-wrap">
|
||||
<h1>Library</h1>
|
||||
<p>{filteredItems.length} manga</p>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<label class="search">
|
||||
<span>Search</span>
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Search titles"
|
||||
bind:value={libraryState.filter.query}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="select-control">
|
||||
<span><ArrowsDownUp size={14} weight="bold" /> Sort</span>
|
||||
<select bind:value={libraryState.sort}>
|
||||
{#each sortOptions as option (option.value)}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<button
|
||||
class="icon-toggle"
|
||||
type="button"
|
||||
aria-label="Toggle sort direction"
|
||||
title={libraryState.sortDesc ? 'Descending' : 'Ascending'}
|
||||
onclick={() => (libraryState.sortDesc = !libraryState.sortDesc)}
|
||||
>
|
||||
{libraryState.sortDesc ? 'DESC' : 'ASC'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="icon-toggle"
|
||||
type="button"
|
||||
aria-label="Toggle filters"
|
||||
title="Filters"
|
||||
onclick={() => (filtersOpen = !filtersOpen)}
|
||||
>
|
||||
<Funnel size={14} weight="bold" />
|
||||
{#if activeFilterCount > 0}
|
||||
<span class="badge">{activeFilterCount}</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<div class="view-toggle" role="group" aria-label="View mode">
|
||||
<button
|
||||
class:active={libraryState.view === 'grid'}
|
||||
type="button"
|
||||
onclick={() => (libraryState.view = 'grid')}
|
||||
aria-label="Grid view"
|
||||
>
|
||||
<SquaresFour size={14} weight="bold" />
|
||||
</button>
|
||||
<button
|
||||
class:active={libraryState.view === 'list'}
|
||||
type="button"
|
||||
onclick={() => (libraryState.view = 'list')}
|
||||
aria-label="List view"
|
||||
>
|
||||
<ListBullets size={14} weight="bold" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{#if filtersOpen}
|
||||
<aside class="filters-panel">
|
||||
<div class="panel-heading-row">
|
||||
<h2>Filters</h2>
|
||||
<div class="panel-actions">
|
||||
<button type="button" onclick={clearFilters}>Clear</button>
|
||||
<button type="button" aria-label="Close filters" onclick={() => (filtersOpen = false)}>
|
||||
<X size={14} weight="bold" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filters-grid">
|
||||
<label class="select-control">
|
||||
<span>Status</span>
|
||||
<select bind:value={libraryState.filter.status}>
|
||||
{#each statusOptions as option (option.value)}
|
||||
<option value={option.value}>{option.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="checkbox-control">
|
||||
<input type="checkbox" bind:checked={libraryState.filter.unread} />
|
||||
<span>Unread only</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{#if availableTags.length > 0}
|
||||
<div class="tags-row">
|
||||
<p>Tags</p>
|
||||
<div class="tags-list">
|
||||
{#each availableTags as tag (tag)}
|
||||
<button
|
||||
type="button"
|
||||
class:active={libraryState.filter.tags.includes(tag)}
|
||||
onclick={() => toggleTag(tag)}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</aside>
|
||||
{/if}
|
||||
|
||||
{#if libraryState.loading}
|
||||
<div class="empty-state">Loading library...</div>
|
||||
{:else if libraryState.error}
|
||||
<div class="empty-state error-state">
|
||||
<p>Failed to load library.</p>
|
||||
<small>{libraryState.error}</small>
|
||||
<button type="button" onclick={() => loadLibrary({ inLibrary: true })}>Retry</button>
|
||||
</div>
|
||||
{:else if !hasResults}
|
||||
<div class="empty-state">No manga match the current filters.</div>
|
||||
{:else}
|
||||
<div class="results" class:list-view={libraryState.view === 'list'}>
|
||||
{#each filteredItems as manga (manga.id)}
|
||||
<MangaCard manga={manga} href={`/series/${manga.id}`} compact={libraryState.view === 'list'} />
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.library-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-4);
|
||||
height: 100%;
|
||||
padding: var(--sp-6);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.title-wrap h1 {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-2xl);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.title-wrap p {
|
||||
margin: var(--sp-1) 0 0;
|
||||
color: var(--text-faint);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-xs);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: end;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.search,
|
||||
.select-control {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.search span,
|
||||
.select-control span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
color: var(--text-faint);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-2xs);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
input,
|
||||
select {
|
||||
height: 34px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-dim);
|
||||
background: var(--bg-raised);
|
||||
color: var(--text-primary);
|
||||
padding: 0 10px;
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.icon-toggle {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
min-width: 44px;
|
||||
height: 34px;
|
||||
padding: 0 10px;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-dim);
|
||||
background: var(--bg-raised);
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-2xs);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
border-radius: 999px;
|
||||
background: var(--accent);
|
||||
color: var(--accent-fg);
|
||||
font-size: 10px;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: inline-flex;
|
||||
border: 1px solid var(--border-dim);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: var(--bg-raised);
|
||||
}
|
||||
|
||||
.view-toggle button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 34px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--text-faint);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.view-toggle button.active {
|
||||
background: var(--accent-muted);
|
||||
color: var(--accent-fg);
|
||||
}
|
||||
|
||||
.filters-panel {
|
||||
border: 1px solid var(--border-dim);
|
||||
border-radius: var(--radius-xl);
|
||||
background: var(--bg-raised);
|
||||
padding: var(--sp-4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.panel-heading-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.panel-heading-row h2 {
|
||||
margin: 0;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-sm);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.panel-actions {
|
||||
display: inline-flex;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.panel-actions button,
|
||||
.tags-list button,
|
||||
.empty-state button {
|
||||
border: 1px solid var(--border-dim);
|
||||
background: var(--bg-overlay);
|
||||
color: var(--text-muted);
|
||||
border-radius: var(--radius-md);
|
||||
height: 30px;
|
||||
padding: 0 10px;
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-xs);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filters-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--sp-4);
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.checkbox-control {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 34px;
|
||||
color: var(--text-secondary);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.checkbox-control input {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tags-row p {
|
||||
margin: 0 0 var(--sp-2);
|
||||
color: var(--text-faint);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--text-2xs);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tags-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
|
||||
.tags-list button.active {
|
||||
border-color: var(--accent-dim);
|
||||
background: var(--accent-muted);
|
||||
color: var(--accent-fg);
|
||||
}
|
||||
|
||||
.results {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
|
||||
gap: var(--sp-3);
|
||||
}
|
||||
|
||||
.results.list-view {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
min-height: 240px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--sp-2);
|
||||
border: 1px dashed var(--border-dim);
|
||||
border-radius: var(--radius-xl);
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
padding: var(--sp-5);
|
||||
}
|
||||
|
||||
.error-state small {
|
||||
max-width: 80ch;
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.library-page {
|
||||
padding: var(--sp-4);
|
||||
}
|
||||
|
||||
.controls {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search,
|
||||
.select-control {
|
||||
min-width: min(220px, 100%);
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/state'
|
||||
|
||||
const mangaId = $derived(page.params.mangaId)
|
||||
</script>
|
||||
|
||||
<section class="series-placeholder">
|
||||
<h1>Series</h1>
|
||||
<p>Selected manga id: {mangaId}</p>
|
||||
<p>Series detail UI will be implemented in Phase 4.</p>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.series-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--sp-3);
|
||||
height: 100%;
|
||||
padding: var(--sp-6);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-2xl);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user