alexei.dolgolyov
5dcadd1c20
Warm, friendly redesign replacing the generic cold-shadcn look. Built as a swappable token bundle so other presets can be added later; dark mode and the user-tunable accent hue are retained. Foundation - app.css: warm cream (light) + "dusk" (dark) token system; terracotta accent (default hue 16); pastel --room-* palette; vivid --status-* (dots/bars) plus AA-legible --status-*-ink (text); soft warm shadows; --radius 1rem; font tokens - Fonts: Fraunces (display) + Figtree (body), self-hosted in static/fonts (no Google CDN) so offline/LAN installs work; system-ui fallbacks kept - h1/h2/h3 render in Fraunces via base layer Chrome and surfaces - Sidebar, Header, home, AppCard/BoardCard, BoardHeader, sections, favorites - 29 widgets + integration renderers: cozy card shells, room-palette charts - Default background is a static warm "cozy" glow (mesh demoted, rAF gated on prefers-reduced-motion) System-wide - Status colors tokenized (no raw bg/text-*-500 or status hex); success/warning to status tokens, categorical to room palette, errors to destructive - Inputs rounded-xl; buttons rounded-xl; cards/dialogs rounded-[1.4rem]; soft-shadow vocabulary only; focus-visible:ring-primary/30 - Forms, admin tables (now cozy cards), dialogs, popovers, auth screens a11y: reduced-motion guards; darker status "ink" text for AA on cream. Known tradeoff: terracotta primary + white button text ~2.96:1 (signature color, user-tunable). Verified: svelte-check 0/0, build ok, 274 tests pass, eslint 0 errors. Design refs + system sheet in design-mockups/.
109 lines
3.4 KiB
Svelte
109 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { keyboard } from '$lib/stores/keyboard.svelte.js';
|
|
|
|
interface ShortcutItem {
|
|
readonly keys: string;
|
|
readonly description: string;
|
|
}
|
|
|
|
interface ShortcutCategory {
|
|
readonly name: string;
|
|
readonly shortcuts: readonly ShortcutItem[];
|
|
}
|
|
|
|
const categories: readonly ShortcutCategory[] = [
|
|
{
|
|
name: 'Global',
|
|
shortcuts: [
|
|
{ keys: 'Ctrl+K / Cmd+K', description: 'Open search' },
|
|
{ keys: '?', description: 'Toggle keyboard shortcuts' },
|
|
{ keys: '1-9', description: 'Switch to board by index' },
|
|
{ keys: 'f', description: 'Toggle favorites bar' },
|
|
{ keys: 'Escape', description: 'Close dialogs / overlays' }
|
|
]
|
|
},
|
|
{
|
|
name: 'Board View',
|
|
shortcuts: [
|
|
{ keys: 'j', description: 'Navigate to next app' },
|
|
{ keys: 'k', description: 'Navigate to previous app' },
|
|
{ keys: 'Enter', description: 'Open selected app' },
|
|
{ keys: 'e', description: 'Toggle edit mode' }
|
|
]
|
|
}
|
|
] as const;
|
|
|
|
function handleBackdropClick(e: MouseEvent) {
|
|
if (e.target === e.currentTarget) {
|
|
keyboard.closeOverlay();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
{#if keyboard.overlayOpen}
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div
|
|
class="fixed inset-0 z-[90] flex items-center justify-center bg-black/60 backdrop-blur-sm"
|
|
onclick={handleBackdropClick}
|
|
onkeydown={(e) => e.key === 'Escape' && keyboard.closeOverlay()}
|
|
>
|
|
<div
|
|
class="mx-4 w-full max-w-xl rounded-2xl border border-border bg-card shadow-[var(--shadow-lift)]"
|
|
role="dialog"
|
|
aria-label="Keyboard Shortcuts"
|
|
>
|
|
<!-- Header -->
|
|
<div class="flex items-center justify-between border-b border-border px-6 py-4">
|
|
<h2 class="text-lg font-semibold text-foreground">Keyboard Shortcuts</h2>
|
|
<button
|
|
type="button"
|
|
onclick={() => keyboard.closeOverlay()}
|
|
class="rounded-md p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
|
aria-label="Close"
|
|
>
|
|
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="18" y1="6" x2="6" y2="18" />
|
|
<line x1="6" y1="6" x2="18" y2="18" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Body -->
|
|
<div class="px-6 py-5">
|
|
<div class="grid gap-6 sm:grid-cols-2">
|
|
{#each categories as category (category.name)}
|
|
<div>
|
|
<h3 class="mb-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
|
{category.name}
|
|
</h3>
|
|
<div class="space-y-2">
|
|
{#each category.shortcuts as shortcut (shortcut.keys)}
|
|
<div class="flex items-center justify-between gap-4">
|
|
<span class="text-sm text-foreground">{shortcut.description}</span>
|
|
<div class="flex shrink-0 gap-1">
|
|
{#each shortcut.keys.split(' / ') as keyCombo (keyCombo)}
|
|
<kbd
|
|
class="inline-flex items-center rounded border border-border bg-muted px-1.5 py-0.5 text-xs font-mono text-muted-foreground"
|
|
>
|
|
{keyCombo}
|
|
</kbd>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer hint -->
|
|
<div class="border-t border-border px-6 py-3 text-center">
|
|
<p class="text-xs text-muted-foreground">
|
|
Shortcuts are disabled when typing in text fields
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|