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
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user