feat: design system with light/dark themes and icon-first UI
Adds a real design system to replace the per-route ad-hoc styling: - docs/design-system.md is the contract. Semantic CSS custom-property tokens (color/type/spacing/radii/shadows/z-index) with verified WCAG AA/AAA contrast ratios for both themes. - frontend/src/lib/styles/tokens.css defines :root tokens + a [data-theme="dark"] override + base element resets, a .form-field helper, and a global prefers-reduced-motion rule. - frontend/src/lib/theme.svelte.ts is a Svelte 5 runes store backing the theme state machine (system | light | dark). localStorage key 'mangalord-theme'; matchMedia subscription that re-resolves on OS theme change while in 'system' mode; init() / destroy() lifecycle wired from +layout.svelte. - frontend/src/app.html runs a synchronous inline script before %sveltekit.head% to set [data-theme] before first paint. No FOUC. - /settings gains a System / Light / Dark radiogroup (real fieldset + legend + radios with lucide icons). - Every route's <style> block is rewritten to consume tokens — home, auth, upload (drop-zone + page list), bookmarks, manga overview, reader. - @lucide/svelte icons replace ad-hoc text controls per the spec: Search (icon-only primary), LogOut (icon-only muted), Upload / Bookmarks / Settings nav inline icons, ChevronLeft/Right for the reader, ArrowUp/Down/Trash2 for the upload page list. The bookmark toggle keeps its '☆ Bookmark' / '★ Bookmarked' text verbatim. - Home search controls split into two rows: input + Search CTA on row 1, Sort (and future filters) on row 2. Accessibility: every icon-only button carries aria-label, every decorative SVG aria-hidden; existing image alt text preserved; focus-visible rings reach every interactive element including the visually-hidden theme radios; color is never the sole conveyor. Version bump 0.12.0 → 0.13.0 across backend/Cargo.toml and frontend/package.json (feat: → minor per CLAUDE.md). Bars: svelte-check 0/0, vitest 51/51, playwright 18/18, cargo test 88/88, clippy -D warnings clean. Two rounds of independent review; verdict ship-ready. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MechaCat02
@@ -5,6 +5,22 @@
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Mangalord</title>
|
||||
<script>
|
||||
(function () {
|
||||
try {
|
||||
var stored = localStorage.getItem('mangalord-theme');
|
||||
var pref =
|
||||
stored === 'light' || stored === 'dark'
|
||||
? stored
|
||||
: window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
? 'dark'
|
||||
: 'light';
|
||||
document.documentElement.setAttribute('data-theme', pref);
|
||||
} catch (_) {
|
||||
document.documentElement.setAttribute('data-theme', 'light');
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
|
||||
265
frontend/src/lib/styles/tokens.css
Normal file
265
frontend/src/lib/styles/tokens.css
Normal file
@@ -0,0 +1,265 @@
|
||||
/* Design tokens — see docs/design-system.md.
|
||||
Components consume tokens only; no raw hex or raw px in scoped styles. */
|
||||
|
||||
:root {
|
||||
--bg: #ffffff;
|
||||
--surface: #f6f7f9;
|
||||
--surface-elevated: #ffffff;
|
||||
--border: #e3e5ea;
|
||||
--border-strong: #c8ccd4;
|
||||
--text: #16181d;
|
||||
--text-muted: #5b6168;
|
||||
--primary: #2563eb;
|
||||
--primary-hover: #1d4ed8;
|
||||
--primary-contrast: #ffffff;
|
||||
--primary-soft-bg: rgb(37 99 235 / 0.08);
|
||||
--danger: #b00020;
|
||||
--danger-soft-bg: #fff5f5;
|
||||
--success: #0a7d2c;
|
||||
--warning-soft-bg: #fff5d6;
|
||||
--warning-border: #d6a800;
|
||||
--focus-ring: #2563eb;
|
||||
--focus-ring-soft: rgb(37 99 235 / 0.25);
|
||||
|
||||
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
|
||||
--shadow-md: 0 2px 8px rgb(0 0 0 / 0.08);
|
||||
|
||||
--font-stack: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
|
||||
--font-xs: 0.75rem;
|
||||
--font-sm: 0.875rem;
|
||||
--font-base: 1rem;
|
||||
--font-lg: 1.125rem;
|
||||
--font-xl: 1.5rem;
|
||||
--font-2xl: 2rem;
|
||||
|
||||
--leading-tight: 1.3;
|
||||
--leading-snug: 1.45;
|
||||
--leading-normal: 1.55;
|
||||
|
||||
--weight-regular: 400;
|
||||
--weight-medium: 500;
|
||||
--weight-semibold: 600;
|
||||
|
||||
--space-1: 0.25rem;
|
||||
--space-2: 0.5rem;
|
||||
--space-3: 0.75rem;
|
||||
--space-4: 1rem;
|
||||
--space-5: 1.25rem;
|
||||
--space-6: 1.5rem;
|
||||
--space-8: 2rem;
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 10px;
|
||||
--radius-pill: 999px;
|
||||
|
||||
--transition: 120ms ease-out;
|
||||
|
||||
--icon-sm: 14px;
|
||||
--icon-md: 18px;
|
||||
--icon-lg: 22px;
|
||||
|
||||
--z-dropdown: 10;
|
||||
--z-sticky: 50;
|
||||
--z-modal: 100;
|
||||
--z-toast: 1000;
|
||||
}
|
||||
|
||||
:root[data-theme='dark'] {
|
||||
--bg: #0f1115;
|
||||
--surface: #161a21;
|
||||
--surface-elevated: #1c2129;
|
||||
--border: #2a2f37;
|
||||
--border-strong: #3a414d;
|
||||
--text: #e8eaed;
|
||||
--text-muted: #9aa0a6;
|
||||
--primary: #60a5fa;
|
||||
--primary-hover: #3b82f6;
|
||||
--primary-contrast: #0f1115;
|
||||
--primary-soft-bg: rgb(96 165 250 / 0.12);
|
||||
--danger: #f87171;
|
||||
--danger-soft-bg: #3a1620;
|
||||
--success: #4ade80;
|
||||
--warning-soft-bg: #3a2e10;
|
||||
--warning-border: #a37800;
|
||||
--focus-ring: #60a5fa;
|
||||
--focus-ring-soft: rgb(96 165 250 / 0.3);
|
||||
|
||||
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
|
||||
--shadow-md: 0 2px 8px rgb(0 0 0 / 0.5);
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--font-stack);
|
||||
font-size: var(--font-base);
|
||||
line-height: var(--leading-normal);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: var(--text);
|
||||
line-height: var(--leading-tight);
|
||||
font-weight: var(--weight-semibold);
|
||||
margin: 0 0 var(--space-3);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--font-2xl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-xl);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-lg);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 var(--space-3);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:focus-visible,
|
||||
button:focus-visible,
|
||||
input:focus-visible,
|
||||
select:focus-visible,
|
||||
textarea:focus-visible,
|
||||
[role='button']:focus-visible {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='search'],
|
||||
input[type='password'],
|
||||
input[type='number'],
|
||||
input[type='email'],
|
||||
select,
|
||||
textarea {
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0 var(--space-3);
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
transition:
|
||||
border-color var(--transition),
|
||||
background var(--transition),
|
||||
box-shadow var(--transition);
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: auto;
|
||||
min-height: 6rem;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
line-height: var(--leading-snug);
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input[type='text']:focus,
|
||||
input[type='search']:focus,
|
||||
input[type='password']:focus,
|
||||
input[type='number']:focus,
|
||||
input[type='email']:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
background: var(--surface-elevated);
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-soft);
|
||||
}
|
||||
|
||||
input[aria-invalid='true'],
|
||||
select[aria-invalid='true'],
|
||||
textarea[aria-invalid='true'] {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
select:disabled,
|
||||
textarea:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 0 var(--space-3);
|
||||
height: 36px;
|
||||
font-weight: var(--weight-medium);
|
||||
color: var(--text);
|
||||
transition:
|
||||
background var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: var(--text-muted);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.form-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-1);
|
||||
font-size: var(--font-sm);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
transition-duration: 0ms !important;
|
||||
animation-duration: 0ms !important;
|
||||
}
|
||||
}
|
||||
67
frontend/src/lib/theme.svelte.ts
Normal file
67
frontend/src/lib/theme.svelte.ts
Normal file
@@ -0,0 +1,67 @@
|
||||
export type Theme = 'system' | 'light' | 'dark';
|
||||
export type ResolvedTheme = 'light' | 'dark';
|
||||
|
||||
const STORAGE_KEY = 'mangalord-theme';
|
||||
|
||||
function readStored(): Theme {
|
||||
if (typeof localStorage === 'undefined') return 'system';
|
||||
const v = localStorage.getItem(STORAGE_KEY);
|
||||
return v === 'light' || v === 'dark' ? v : 'system';
|
||||
}
|
||||
|
||||
function systemPref(): ResolvedTheme {
|
||||
if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined') return 'light';
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
function resolve(value: Theme): ResolvedTheme {
|
||||
return value === 'system' ? systemPref() : value;
|
||||
}
|
||||
|
||||
function apply(resolved: ResolvedTheme) {
|
||||
if (typeof document === 'undefined') return;
|
||||
document.documentElement.setAttribute('data-theme', resolved);
|
||||
}
|
||||
|
||||
class ThemeStore {
|
||||
value: Theme = $state('system');
|
||||
resolved: ResolvedTheme = $state('light');
|
||||
private mql: MediaQueryList | null = null;
|
||||
private mqlListener: ((e: MediaQueryListEvent) => void) | null = null;
|
||||
|
||||
init() {
|
||||
if (typeof window === 'undefined') return;
|
||||
this.value = readStored();
|
||||
this.resolved = resolve(this.value);
|
||||
apply(this.resolved);
|
||||
this.mql = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
this.mqlListener = () => {
|
||||
if (this.value === 'system') {
|
||||
this.resolved = systemPref();
|
||||
apply(this.resolved);
|
||||
}
|
||||
};
|
||||
this.mql.addEventListener('change', this.mqlListener);
|
||||
}
|
||||
|
||||
set(next: Theme) {
|
||||
this.value = next;
|
||||
if (next === 'system') {
|
||||
if (typeof localStorage !== 'undefined') localStorage.removeItem(STORAGE_KEY);
|
||||
} else if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem(STORAGE_KEY, next);
|
||||
}
|
||||
this.resolved = resolve(next);
|
||||
apply(this.resolved);
|
||||
}
|
||||
|
||||
destroy() {
|
||||
if (this.mql && this.mqlListener) {
|
||||
this.mql.removeEventListener('change', this.mqlListener);
|
||||
}
|
||||
this.mql = null;
|
||||
this.mqlListener = null;
|
||||
}
|
||||
}
|
||||
|
||||
export const theme = new ThemeStore();
|
||||
@@ -1,16 +1,25 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { logout } from '$lib/api/auth';
|
||||
import { session } from '$lib/session.svelte';
|
||||
import { theme } from '$lib/theme.svelte';
|
||||
import Upload from '@lucide/svelte/icons/upload';
|
||||
import Bookmark from '@lucide/svelte/icons/bookmark';
|
||||
import Settings from '@lucide/svelte/icons/settings';
|
||||
import LogOut from '@lucide/svelte/icons/log-out';
|
||||
import '$lib/styles/tokens.css';
|
||||
|
||||
let { children } = $props();
|
||||
let loggingOut = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
theme.init();
|
||||
if (!session.loaded) session.refresh();
|
||||
});
|
||||
|
||||
onDestroy(() => theme.destroy());
|
||||
|
||||
async function handleLogout() {
|
||||
loggingOut = true;
|
||||
try {
|
||||
@@ -25,22 +34,42 @@
|
||||
|
||||
<header>
|
||||
<nav aria-label="primary">
|
||||
<a href="/">Mangalord</a>
|
||||
<a href="/upload">Upload</a>
|
||||
<a href="/bookmarks">Bookmarks</a>
|
||||
<a class="brand" href="/">Mangalord</a>
|
||||
<a class="nav-link" href="/upload">
|
||||
<Upload size={18} aria-hidden="true" />
|
||||
<span>Upload</span>
|
||||
</a>
|
||||
<a class="nav-link" href="/bookmarks">
|
||||
<Bookmark size={18} aria-hidden="true" />
|
||||
<span>Bookmarks</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="session" data-testid="session-area">
|
||||
{#if !session.loaded}
|
||||
<span data-testid="session-loading" aria-busy="true">…</span>
|
||||
{:else if session.user}
|
||||
<span data-testid="session-user">{session.user.username}</span>
|
||||
<a href="/settings" data-testid="nav-settings">Settings</a>
|
||||
<button type="button" onclick={handleLogout} disabled={loggingOut}>
|
||||
{loggingOut ? 'Logging out…' : 'Logout'}
|
||||
<span class="username" data-testid="session-user">{session.user.username}</span>
|
||||
<a class="nav-link" href="/settings" data-testid="nav-settings">
|
||||
<Settings size={18} aria-hidden="true" />
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
<button
|
||||
class="icon-btn"
|
||||
type="button"
|
||||
onclick={handleLogout}
|
||||
disabled={loggingOut}
|
||||
aria-label="Logout"
|
||||
title="Logout"
|
||||
>
|
||||
{#if loggingOut}
|
||||
<span class="logging-out">…</span>
|
||||
{:else}
|
||||
<LogOut size={18} aria-hidden="true" />
|
||||
{/if}
|
||||
</button>
|
||||
{:else}
|
||||
<a href="/login" data-testid="nav-login">Login</a>
|
||||
<a href="/register" data-testid="nav-register">Register</a>
|
||||
<a class="text-link" href="/login" data-testid="nav-login">Login</a>
|
||||
<a class="text-link" href="/register" data-testid="nav-register">Register</a>
|
||||
{/if}
|
||||
</div>
|
||||
</header>
|
||||
@@ -51,24 +80,94 @@
|
||||
|
||||
<style>
|
||||
header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: var(--space-3) var(--space-4);
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: var(--space-4);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
nav a,
|
||||
.session a {
|
||||
margin-right: 1rem;
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-weight: var(--weight-semibold);
|
||||
font-size: var(--font-lg);
|
||||
color: var(--text);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
margin-right: var(--space-2);
|
||||
}
|
||||
|
||||
.brand:hover {
|
||||
text-decoration: none;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
color: var(--text);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: var(--font-sm);
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: var(--surface-elevated);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.text-link {
|
||||
color: var(--primary);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.session {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.username {
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-sm);
|
||||
padding: 0 var(--space-2);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.icon-btn:hover:not(:disabled) {
|
||||
background: var(--surface-elevated);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.logging-out {
|
||||
font-size: var(--font-base);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
main {
|
||||
padding: 1rem;
|
||||
padding: var(--space-4);
|
||||
max-width: 64rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -2,6 +2,8 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { listMangas, type Manga, type MangaSort } from '$lib/api/mangas';
|
||||
import { fileUrl } from '$lib/api/client';
|
||||
import Search from '@lucide/svelte/icons/search';
|
||||
import BookImage from '@lucide/svelte/icons/book-image';
|
||||
|
||||
let mangas: Manga[] = $state([]);
|
||||
let search = $state('');
|
||||
@@ -44,28 +46,35 @@
|
||||
action="javascript:void(0)"
|
||||
class="controls"
|
||||
>
|
||||
<input
|
||||
type="search"
|
||||
bind:value={search}
|
||||
placeholder="Search by title or author"
|
||||
data-testid="search-input"
|
||||
/>
|
||||
<label>
|
||||
Sort
|
||||
<select bind:value={sort} onchange={onSortChange} data-testid="sort-select">
|
||||
<option value="recent">Recent</option>
|
||||
<option value="title">Title (A→Z)</option>
|
||||
</select>
|
||||
</label>
|
||||
<button type="submit">Search</button>
|
||||
<div class="search-row">
|
||||
<input
|
||||
class="search"
|
||||
type="search"
|
||||
bind:value={search}
|
||||
placeholder="Search by title or author"
|
||||
data-testid="search-input"
|
||||
/>
|
||||
<button class="icon-btn" type="submit" aria-label="Search" title="Search">
|
||||
<Search size={18} aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="config-row">
|
||||
<label class="sort">
|
||||
<span>Sort</span>
|
||||
<select bind:value={sort} onchange={onSortChange} data-testid="sort-select">
|
||||
<option value="recent">Recent</option>
|
||||
<option value="title">Title (A→Z)</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{#if loading}
|
||||
<p data-testid="loading">Loading…</p>
|
||||
<p class="status" data-testid="loading">Loading…</p>
|
||||
{:else if error}
|
||||
<p data-testid="error" role="alert">{error}</p>
|
||||
<p class="error" data-testid="error" role="alert">{error}</p>
|
||||
{:else if mangas.length === 0}
|
||||
<p data-testid="empty">No mangas yet. <a href="/upload">Upload one</a>.</p>
|
||||
<p class="status" data-testid="empty">No mangas yet. <a href="/upload">Upload one</a>.</p>
|
||||
{:else}
|
||||
{#if total !== null}
|
||||
<p class="count" data-testid="manga-total">
|
||||
@@ -84,7 +93,9 @@
|
||||
loading="lazy"
|
||||
/>
|
||||
{:else}
|
||||
<div class="cover cover-placeholder">📖</div>
|
||||
<div class="cover cover-placeholder">
|
||||
<BookImage size={36} aria-hidden="true" />
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
<div class="meta">
|
||||
@@ -99,69 +110,136 @@
|
||||
<style>
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
.controls label {
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
max-width: 28rem;
|
||||
}
|
||||
|
||||
.config-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-3);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sort {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
gap: var(--space-2);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.sort select {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
background: var(--primary);
|
||||
color: var(--primary-contrast);
|
||||
border: 1px solid var(--primary);
|
||||
}
|
||||
|
||||
.icon-btn:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.status {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.count {
|
||||
color: #777;
|
||||
margin: 0.5rem 0;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-sm);
|
||||
margin: var(--space-2) 0;
|
||||
}
|
||||
|
||||
.manga-grid {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 1rem;
|
||||
gap: var(--space-4);
|
||||
}
|
||||
|
||||
.manga-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.cover-link {
|
||||
display: block;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 100%;
|
||||
aspect-ratio: 2 / 3;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
background: #f0f0f0;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.cover-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2.5rem;
|
||||
color: #999;
|
||||
color: var(--text-muted);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.3;
|
||||
font-weight: var(--weight-semibold);
|
||||
font-size: var(--font-sm);
|
||||
line-height: var(--leading-tight);
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.title:hover {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.author {
|
||||
color: #777;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 0.1rem;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-xs);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { fileUrl } from '$lib/api/client';
|
||||
import BookImage from '@lucide/svelte/icons/book-image';
|
||||
|
||||
let { data } = $props();
|
||||
const authenticated = $derived(data.authenticated);
|
||||
@@ -14,15 +15,15 @@
|
||||
<h1>Bookmarks</h1>
|
||||
|
||||
{#if error}
|
||||
<p role="alert" data-testid="bookmarks-error">
|
||||
<p class="error" role="alert" data-testid="bookmarks-error">
|
||||
Couldn't load bookmarks: {error}
|
||||
</p>
|
||||
{:else if !authenticated}
|
||||
<p data-testid="bookmarks-signin">
|
||||
<p class="hint" data-testid="bookmarks-signin">
|
||||
<a href="/login">Sign in</a> to see your bookmarks.
|
||||
</p>
|
||||
{:else if bookmarks.length === 0}
|
||||
<p data-testid="bookmarks-empty">No bookmarks yet.</p>
|
||||
<p class="hint" data-testid="bookmarks-empty">No bookmarks yet.</p>
|
||||
{:else}
|
||||
<ul class="bookmark-list" data-testid="bookmark-list">
|
||||
{#each bookmarks as b (b.id)}
|
||||
@@ -36,7 +37,9 @@
|
||||
loading="lazy"
|
||||
/>
|
||||
{:else}
|
||||
<div class="cover cover-placeholder">📖</div>
|
||||
<div class="cover cover-placeholder">
|
||||
<BookImage size={22} aria-hidden="true" />
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
<div class="meta">
|
||||
@@ -75,52 +78,74 @@
|
||||
.bookmark-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bookmark {
|
||||
display: grid;
|
||||
grid-template-columns: 64px 1fr;
|
||||
gap: 1rem;
|
||||
gap: var(--space-4);
|
||||
align-items: start;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: var(--space-3) 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.cover-link {
|
||||
display: block;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 64px;
|
||||
height: 96px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
background: #f0f0f0;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.cover-placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
color: #999;
|
||||
color: var(--text-muted);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.15rem;
|
||||
gap: var(--space-1);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
font-weight: var(--weight-semibold);
|
||||
font-size: var(--font-base);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.title:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.target {
|
||||
font-size: 0.95rem;
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: #888;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.created {
|
||||
color: #888;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-xs);
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,8 +26,8 @@
|
||||
|
||||
<h1>Log in</h1>
|
||||
<form onsubmit={submit} action="javascript:void(0)" data-testid="login-form">
|
||||
<label>
|
||||
Username
|
||||
<label class="form-field">
|
||||
<span>Username</span>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={username}
|
||||
@@ -36,8 +36,8 @@
|
||||
data-testid="login-username"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Password
|
||||
<label class="form-field">
|
||||
<span>Password</span>
|
||||
<input
|
||||
type="password"
|
||||
bind:value={password}
|
||||
@@ -46,14 +46,14 @@
|
||||
data-testid="login-password"
|
||||
/>
|
||||
</label>
|
||||
<button type="submit" disabled={submitting} data-testid="login-submit">
|
||||
<button class="primary" type="submit" disabled={submitting} data-testid="login-submit">
|
||||
{submitting ? 'Logging in…' : 'Log in'}
|
||||
</button>
|
||||
{#if error}
|
||||
<p role="alert" data-testid="login-error">{error}</p>
|
||||
<p class="form-error" role="alert" data-testid="login-error">{error}</p>
|
||||
{/if}
|
||||
</form>
|
||||
<p>
|
||||
<p class="hint">
|
||||
No account? <a href="/register">Register</a>.
|
||||
</p>
|
||||
|
||||
@@ -61,12 +61,30 @@
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
gap: var(--space-3);
|
||||
max-width: 24rem;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
|
||||
.primary {
|
||||
background: var(--primary);
|
||||
color: var(--primary-contrast);
|
||||
border-color: var(--primary);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.primary:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.form-error {
|
||||
color: var(--danger);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-top: var(--space-3);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -105,53 +105,79 @@
|
||||
.overview {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 200px) 1fr;
|
||||
gap: 1rem;
|
||||
gap: var(--space-4);
|
||||
align-items: start;
|
||||
margin-bottom: var(--space-6);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.overview {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.meta h1 {
|
||||
margin: 0 0 0.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.author {
|
||||
color: #555;
|
||||
margin: 0 0 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 var(--space-3);
|
||||
}
|
||||
|
||||
.description {
|
||||
white-space: pre-wrap;
|
||||
color: var(--text);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.bookmark {
|
||||
display: inline-block;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background: #fafafa;
|
||||
color: inherit;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
margin-top: var(--space-2);
|
||||
padding: 0 var(--space-3);
|
||||
height: 36px;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-sm);
|
||||
font-weight: var(--weight-medium);
|
||||
transition:
|
||||
background var(--transition),
|
||||
border-color var(--transition),
|
||||
color var(--transition);
|
||||
}
|
||||
.bookmark:focus-visible {
|
||||
outline: 2px solid #06f;
|
||||
outline-offset: 2px;
|
||||
|
||||
.bookmark:hover {
|
||||
background: var(--surface-elevated);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.bookmark.active {
|
||||
background: #ffeebb;
|
||||
border-color: #d6a800;
|
||||
background: var(--warning-soft-bg);
|
||||
border-color: var(--warning-border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.chapter-list {
|
||||
padding-left: 1.5rem;
|
||||
padding-left: var(--space-6);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.chapter-list li {
|
||||
padding: var(--space-1) 0;
|
||||
}
|
||||
|
||||
.pages {
|
||||
color: #777;
|
||||
margin-left: 0.5rem;
|
||||
color: var(--text-muted);
|
||||
margin-left: var(--space-2);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { fileUrl } from '$lib/api/client';
|
||||
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
|
||||
import ChevronRight from '@lucide/svelte/icons/chevron-right';
|
||||
import ArrowLeft from '@lucide/svelte/icons/arrow-left';
|
||||
import BookImage from '@lucide/svelte/icons/book-image';
|
||||
|
||||
let { data } = $props();
|
||||
const manga = $derived(data.manga);
|
||||
@@ -71,6 +75,7 @@
|
||||
|
||||
<nav class="reader-nav" aria-label="reader">
|
||||
<a href="/manga/{manga.id}" class="back" data-testid="back-to-manga">
|
||||
<ArrowLeft size={18} aria-hidden="true" />
|
||||
{#if manga.cover_image_path}
|
||||
<img
|
||||
src={fileUrl(manga.cover_image_path)}
|
||||
@@ -79,9 +84,11 @@
|
||||
loading="lazy"
|
||||
/>
|
||||
{:else}
|
||||
<span class="back-cover back-cover-placeholder" aria-hidden="true">📖</span>
|
||||
<span class="back-cover back-cover-placeholder" aria-hidden="true">
|
||||
<BookImage size={14} aria-hidden="true" />
|
||||
</span>
|
||||
{/if}
|
||||
<span class="back-text">← {manga.title}</span>
|
||||
<span class="back-text">{manga.title}</span>
|
||||
</a>
|
||||
<span class="indicator" data-testid="page-indicator">
|
||||
Page {index + 1} / {pages.length}
|
||||
@@ -89,7 +96,7 @@
|
||||
</nav>
|
||||
|
||||
{#if pages.length === 0}
|
||||
<p data-testid="reader-empty">This chapter has no pages yet.</p>
|
||||
<p class="empty" data-testid="reader-empty">This chapter has no pages yet.</p>
|
||||
{:else}
|
||||
<div class="page-wrap">
|
||||
<button
|
||||
@@ -100,7 +107,7 @@
|
||||
aria-label="Previous page"
|
||||
data-testid="reader-prev"
|
||||
>
|
||||
‹
|
||||
<ChevronLeft size={22} aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<img
|
||||
@@ -119,7 +126,7 @@
|
||||
aria-label="Next page"
|
||||
data-testid="reader-next"
|
||||
>
|
||||
›
|
||||
<ChevronRight size={22} aria-hidden="true" />
|
||||
</button>
|
||||
|
||||
<!-- Preload the next page in a hidden img so it's already cached
|
||||
@@ -142,47 +149,65 @@
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: 0.75rem;
|
||||
gap: 0.75rem;
|
||||
padding-bottom: var(--space-2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: var(--space-3);
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.back {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
gap: var(--space-2);
|
||||
min-width: 0;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.back:hover {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back-cover {
|
||||
width: 28px;
|
||||
height: 42px;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
background: #f0f0f0;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.back-cover-placeholder {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
color: #999;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.back-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: var(--weight-medium);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
color: #555;
|
||||
color: var(--text-muted);
|
||||
flex-shrink: 0;
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.empty {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.page-wrap {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 0.5rem;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-image {
|
||||
max-width: 100%;
|
||||
max-height: 90vh;
|
||||
@@ -190,25 +215,38 @@
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav {
|
||||
font-size: 2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background var(--transition),
|
||||
border-color var(--transition);
|
||||
}
|
||||
|
||||
.nav:hover:not(:disabled) {
|
||||
background: var(--surface-elevated);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.nav:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.nav:focus-visible {
|
||||
outline: 2px solid #06f;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.preload {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.page-wrap {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@@ -26,8 +26,8 @@
|
||||
|
||||
<h1>Register</h1>
|
||||
<form onsubmit={submit} action="javascript:void(0)" data-testid="register-form">
|
||||
<label>
|
||||
Username
|
||||
<label class="form-field">
|
||||
<span>Username</span>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={username}
|
||||
@@ -38,8 +38,8 @@
|
||||
data-testid="register-username"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Password
|
||||
<label class="form-field">
|
||||
<span>Password</span>
|
||||
<input
|
||||
type="password"
|
||||
bind:value={password}
|
||||
@@ -49,14 +49,14 @@
|
||||
data-testid="register-password"
|
||||
/>
|
||||
</label>
|
||||
<button type="submit" disabled={submitting} data-testid="register-submit">
|
||||
<button class="primary" type="submit" disabled={submitting} data-testid="register-submit">
|
||||
{submitting ? 'Registering…' : 'Register'}
|
||||
</button>
|
||||
{#if error}
|
||||
<p role="alert" data-testid="register-error">{error}</p>
|
||||
<p class="form-error" role="alert" data-testid="register-error">{error}</p>
|
||||
{/if}
|
||||
</form>
|
||||
<p>
|
||||
<p class="hint">
|
||||
Already have an account? <a href="/login">Log in</a>.
|
||||
</p>
|
||||
|
||||
@@ -64,12 +64,30 @@
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
gap: var(--space-3);
|
||||
max-width: 24rem;
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
|
||||
.primary {
|
||||
background: var(--primary);
|
||||
color: var(--primary-contrast);
|
||||
border-color: var(--primary);
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.primary:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.form-error {
|
||||
color: var(--danger);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-top: var(--space-3);
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,6 +3,14 @@
|
||||
import { changePassword } from '$lib/api/auth';
|
||||
import { ApiError } from '$lib/api/client';
|
||||
import { session } from '$lib/session.svelte';
|
||||
import { theme, type Theme } from '$lib/theme.svelte';
|
||||
import Monitor from '@lucide/svelte/icons/monitor';
|
||||
import Sun from '@lucide/svelte/icons/sun';
|
||||
import Moon from '@lucide/svelte/icons/moon';
|
||||
|
||||
function setTheme(next: Theme) {
|
||||
theme.set(next);
|
||||
}
|
||||
|
||||
let currentPassword = $state('');
|
||||
let newPassword = $state('');
|
||||
@@ -57,10 +65,53 @@
|
||||
|
||||
<h1>Settings</h1>
|
||||
|
||||
<section class="card" aria-label="Appearance">
|
||||
<h2>Appearance</h2>
|
||||
<fieldset class="theme-picker">
|
||||
<legend>Theme</legend>
|
||||
<label class="theme-option" class:selected={theme.value === 'system'}>
|
||||
<input
|
||||
type="radio"
|
||||
name="theme"
|
||||
value="system"
|
||||
checked={theme.value === 'system'}
|
||||
onchange={() => setTheme('system')}
|
||||
data-testid="theme-radio-system"
|
||||
/>
|
||||
<Monitor size={18} aria-hidden="true" />
|
||||
<span>System</span>
|
||||
</label>
|
||||
<label class="theme-option" class:selected={theme.value === 'light'}>
|
||||
<input
|
||||
type="radio"
|
||||
name="theme"
|
||||
value="light"
|
||||
checked={theme.value === 'light'}
|
||||
onchange={() => setTheme('light')}
|
||||
data-testid="theme-radio-light"
|
||||
/>
|
||||
<Sun size={18} aria-hidden="true" />
|
||||
<span>Light</span>
|
||||
</label>
|
||||
<label class="theme-option" class:selected={theme.value === 'dark'}>
|
||||
<input
|
||||
type="radio"
|
||||
name="theme"
|
||||
value="dark"
|
||||
checked={theme.value === 'dark'}
|
||||
onchange={() => setTheme('dark')}
|
||||
data-testid="theme-radio-dark"
|
||||
/>
|
||||
<Moon size={18} aria-hidden="true" />
|
||||
<span>Dark</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
</section>
|
||||
|
||||
{#if !session.loaded}
|
||||
<p data-testid="settings-loading">Loading…</p>
|
||||
<p class="status" data-testid="settings-loading">Loading…</p>
|
||||
{:else if !session.user}
|
||||
<p data-testid="settings-signin">
|
||||
<p class="status" data-testid="settings-signin">
|
||||
<a href="/login">Sign in</a> to change your password.
|
||||
</p>
|
||||
{:else}
|
||||
@@ -72,8 +123,8 @@
|
||||
list if you want to invalidate them too.
|
||||
</p>
|
||||
<form onsubmit={submit} action="javascript:void(0)" data-testid="password-form">
|
||||
<label>
|
||||
Current password
|
||||
<label class="form-field">
|
||||
<span>Current password</span>
|
||||
<input
|
||||
type="password"
|
||||
bind:value={currentPassword}
|
||||
@@ -82,8 +133,8 @@
|
||||
data-testid="current-password"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
New password
|
||||
<label class="form-field">
|
||||
<span>New password</span>
|
||||
<input
|
||||
type="password"
|
||||
bind:value={newPassword}
|
||||
@@ -93,8 +144,8 @@
|
||||
data-testid="new-password"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Confirm new password
|
||||
<label class="form-field">
|
||||
<span>Confirm new password</span>
|
||||
<input
|
||||
type="password"
|
||||
bind:value={confirmPassword}
|
||||
@@ -110,6 +161,7 @@
|
||||
{/if}
|
||||
</label>
|
||||
<button
|
||||
class="primary"
|
||||
type="submit"
|
||||
disabled={!canSubmit}
|
||||
data-testid="password-submit"
|
||||
@@ -127,34 +179,108 @@
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.status {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-4);
|
||||
max-width: 32rem;
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: #555;
|
||||
font-size: 0.95rem;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
|
||||
.primary {
|
||||
background: var(--primary);
|
||||
color: var(--primary-contrast);
|
||||
border-color: var(--primary);
|
||||
margin-top: var(--space-1);
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.primary:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.field-error {
|
||||
color: #b00020;
|
||||
font-size: 0.9rem;
|
||||
color: var(--danger);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.form-error {
|
||||
color: #b00020;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #0a7d2c;
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.theme-picker {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-2);
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.theme-picker legend {
|
||||
font-size: var(--font-sm);
|
||||
color: var(--text);
|
||||
padding: 0;
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.theme-option {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
font-size: var(--font-sm);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background var(--transition),
|
||||
border-color var(--transition);
|
||||
}
|
||||
|
||||
.theme-option:hover {
|
||||
background: var(--surface-elevated);
|
||||
}
|
||||
|
||||
.theme-option input[type='radio'] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.theme-option.selected {
|
||||
background: var(--primary-soft-bg);
|
||||
border-color: var(--primary);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.theme-option:has(input:focus-visible) {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,6 +5,11 @@
|
||||
import { request } from '$lib/api/client';
|
||||
import { session } from '$lib/session.svelte';
|
||||
import { formatBytes, validateImageFile } from '$lib/upload-validation';
|
||||
import ArrowUp from '@lucide/svelte/icons/arrow-up';
|
||||
import ArrowDown from '@lucide/svelte/icons/arrow-down';
|
||||
import Trash2 from '@lucide/svelte/icons/trash-2';
|
||||
import UploadCloud from '@lucide/svelte/icons/upload-cloud';
|
||||
import BookImage from '@lucide/svelte/icons/book-image';
|
||||
|
||||
let { data } = $props();
|
||||
const mangas = $derived(data.mangas);
|
||||
@@ -190,17 +195,17 @@
|
||||
<h1>Upload</h1>
|
||||
|
||||
{#if !session.loaded}
|
||||
<p data-testid="upload-loading">Loading…</p>
|
||||
<p class="status" data-testid="upload-loading">Loading…</p>
|
||||
{:else if !session.user}
|
||||
<p data-testid="upload-signin">
|
||||
<p class="status" data-testid="upload-signin">
|
||||
<a href="/login">Sign in</a> to upload mangas or chapters.
|
||||
</p>
|
||||
{:else}
|
||||
<section class="card">
|
||||
<h2>Create manga</h2>
|
||||
<form onsubmit={submitManga} action="javascript:void(0)" data-testid="manga-form">
|
||||
<label>
|
||||
Title <span aria-hidden="true">*</span>
|
||||
<label class="form-field">
|
||||
<span>Title <span aria-hidden="true">*</span></span>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={mangaTitle}
|
||||
@@ -212,8 +217,8 @@
|
||||
<span class="field-error" role="alert">{mangaFieldErrors.title}</span>
|
||||
{/if}
|
||||
</label>
|
||||
<label>
|
||||
Author
|
||||
<label class="form-field">
|
||||
<span>Author</span>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={mangaAuthor}
|
||||
@@ -221,16 +226,16 @@
|
||||
data-testid="manga-author"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Description
|
||||
<label class="form-field">
|
||||
<span>Description</span>
|
||||
<textarea
|
||||
bind:value={mangaDescription}
|
||||
rows="4"
|
||||
data-testid="manga-description"
|
||||
></textarea>
|
||||
</label>
|
||||
<label>
|
||||
Cover (optional)
|
||||
<label class="form-field">
|
||||
<span>Cover (optional)</span>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@@ -244,7 +249,7 @@
|
||||
<span class="field-error" role="alert">{coverError}</span>
|
||||
{/if}
|
||||
</label>
|
||||
<button type="submit" disabled={!canSubmitManga} data-testid="manga-submit">
|
||||
<button class="primary" type="submit" disabled={!canSubmitManga} data-testid="manga-submit">
|
||||
{mangaSubmitting ? 'Creating…' : 'Create manga'}
|
||||
</button>
|
||||
{#if mangaSuccess}
|
||||
@@ -259,7 +264,7 @@
|
||||
<section class="card">
|
||||
<h2>Upload chapter</h2>
|
||||
{#if mangas.length === 0}
|
||||
<p data-testid="chapter-no-mangas">
|
||||
<p class="status" data-testid="chapter-no-mangas">
|
||||
No mangas yet — create one above first.
|
||||
</p>
|
||||
{:else}
|
||||
@@ -268,8 +273,8 @@
|
||||
action="javascript:void(0)"
|
||||
data-testid="chapter-form"
|
||||
>
|
||||
<label>
|
||||
Manga <span aria-hidden="true">*</span>
|
||||
<label class="form-field">
|
||||
<span>Manga <span aria-hidden="true">*</span></span>
|
||||
<select
|
||||
bind:value={chapterMangaId}
|
||||
required
|
||||
@@ -293,7 +298,9 @@
|
||||
loading="lazy"
|
||||
/>
|
||||
{:else}
|
||||
<span class="preview-cover preview-cover-placeholder" aria-hidden="true">📖</span>
|
||||
<span class="preview-cover preview-cover-placeholder" aria-hidden="true">
|
||||
<BookImage size={22} aria-hidden="true" />
|
||||
</span>
|
||||
{/if}
|
||||
<div class="preview-meta">
|
||||
<span class="preview-title">{selectedManga.title}</span>
|
||||
@@ -303,8 +310,8 @@
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<label>
|
||||
Chapter number <span aria-hidden="true">*</span>
|
||||
<label class="form-field">
|
||||
<span>Chapter number <span aria-hidden="true">*</span></span>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
@@ -314,8 +321,8 @@
|
||||
data-testid="chapter-number"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Title (optional)
|
||||
<label class="form-field">
|
||||
<span>Title (optional)</span>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={chapterTitle}
|
||||
@@ -334,6 +341,7 @@
|
||||
aria-label="page upload"
|
||||
data-testid="drop-zone"
|
||||
>
|
||||
<UploadCloud size={32} aria-hidden="true" class="drop-icon" />
|
||||
<p>
|
||||
Drop pages here, or
|
||||
<label class="file-link">
|
||||
@@ -356,28 +364,34 @@
|
||||
<span class="page-name">{p.file.name}</span>
|
||||
<span class="page-size">{formatBytes(p.file.size)}</span>
|
||||
<button
|
||||
class="icon-btn"
|
||||
type="button"
|
||||
onclick={() => movePage(p.id, -1)}
|
||||
disabled={i === 0}
|
||||
aria-label="Move up"
|
||||
title="Move up"
|
||||
>
|
||||
↑
|
||||
<ArrowUp size={16} aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn"
|
||||
type="button"
|
||||
onclick={() => movePage(p.id, 1)}
|
||||
disabled={i === chapterPages.length - 1}
|
||||
aria-label="Move down"
|
||||
title="Move down"
|
||||
>
|
||||
↓
|
||||
<ArrowDown size={16} aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
class="icon-btn danger"
|
||||
type="button"
|
||||
onclick={() => removePage(p.id)}
|
||||
aria-label="Remove"
|
||||
aria-label="Remove page"
|
||||
title="Remove page"
|
||||
data-testid="page-remove"
|
||||
>
|
||||
Remove
|
||||
<Trash2 size={16} aria-hidden="true" />
|
||||
</button>
|
||||
{#if p.error}
|
||||
<span class="field-error" role="alert">{p.error}</span>
|
||||
@@ -388,6 +402,7 @@
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="primary"
|
||||
type="submit"
|
||||
disabled={!canSubmitChapter}
|
||||
data-testid="chapter-submit"
|
||||
@@ -408,113 +423,182 @@
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.card {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
.status {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-4);
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.25rem;
|
||||
|
||||
.primary {
|
||||
background: var(--primary);
|
||||
color: var(--primary-contrast);
|
||||
border-color: var(--primary);
|
||||
margin-top: var(--space-1);
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.primary:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.hint {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.field-error {
|
||||
color: #b00020;
|
||||
font-size: 0.9rem;
|
||||
color: var(--danger);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.form-error {
|
||||
color: #b00020;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.success {
|
||||
color: #0a7d2c;
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.manga-preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
background: #fafafa;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--surface-elevated);
|
||||
}
|
||||
|
||||
.preview-cover {
|
||||
width: 48px;
|
||||
height: 72px;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
background: #f0f0f0;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--surface);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.preview-cover-placeholder {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.5rem;
|
||||
color: #999;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.preview-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
font-weight: 600;
|
||||
font-weight: var(--weight-semibold);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.preview-author {
|
||||
color: #777;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
|
||||
.drop-zone {
|
||||
border: 2px dashed #aaa;
|
||||
border-radius: 6px;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-2);
|
||||
border: 2px dashed var(--border-strong);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--space-6);
|
||||
text-align: center;
|
||||
background: #fafafa;
|
||||
background: var(--surface);
|
||||
color: var(--text-muted);
|
||||
transition:
|
||||
background var(--transition),
|
||||
border-color var(--transition);
|
||||
}
|
||||
|
||||
.drop-zone :global(.drop-icon) {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.drop-zone.drag-over {
|
||||
background: #eef6ff;
|
||||
border-color: #06f;
|
||||
background: var(--primary-soft-bg);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.file-link input[type='file'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-link {
|
||||
color: #06f;
|
||||
color: var(--primary);
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pages {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: decimal inside;
|
||||
}
|
||||
|
||||
.pages li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.25rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.pages li.invalid {
|
||||
background: #fff5f5;
|
||||
background: var(--danger-soft-bg);
|
||||
}
|
||||
|
||||
.page-name {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.page-size {
|
||||
color: #777;
|
||||
color: var(--text-muted);
|
||||
font-size: var(--font-sm);
|
||||
}
|
||||
button:focus-visible {
|
||||
outline: 2px solid #06f;
|
||||
outline-offset: 2px;
|
||||
|
||||
.icon-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.icon-btn:hover:not(:disabled) {
|
||||
background: var(--surface-elevated);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.icon-btn.danger:hover:not(:disabled) {
|
||||
color: var(--danger);
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user