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