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/.
82 lines
2.0 KiB
Svelte
82 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import SectionHeader from './SectionHeader.svelte';
|
|
import SectionCollapsible from './SectionCollapsible.svelte';
|
|
import WidgetGrid from '$lib/components/widget/WidgetGrid.svelte';
|
|
import { editMode } from '$lib/stores/editMode.svelte.js';
|
|
import type { CardSize } from '$lib/utils/constants.js';
|
|
|
|
interface WidgetData {
|
|
id: string;
|
|
type: string;
|
|
order: number;
|
|
config: string;
|
|
appId: string | null;
|
|
app: {
|
|
id: string;
|
|
name: string;
|
|
url: string;
|
|
icon: string | null;
|
|
iconType: string;
|
|
description: string | null;
|
|
statuses: Array<{ status: string; responseTime: number | null }>;
|
|
} | null;
|
|
}
|
|
|
|
interface SectionData {
|
|
id: string;
|
|
title: string;
|
|
icon: string | null;
|
|
order: number;
|
|
isExpandedByDefault: boolean;
|
|
cardSize?: string | null;
|
|
widgets: WidgetData[];
|
|
}
|
|
|
|
interface AppData {
|
|
id: string;
|
|
name: string;
|
|
url: string;
|
|
icon: string | null;
|
|
iconType: string;
|
|
description: string | null;
|
|
statuses: Array<{ status: string; responseTime: number | null }>;
|
|
}
|
|
|
|
interface Props {
|
|
section: SectionData;
|
|
allApps?: AppData[];
|
|
boardCardSize?: CardSize;
|
|
}
|
|
|
|
let { section, allApps = [], boardCardSize = 'medium' }: Props = $props();
|
|
|
|
// Section-level cardSize overrides board-level
|
|
const effectiveCardSize = $derived<CardSize>(
|
|
(section.cardSize as CardSize) ?? boardCardSize
|
|
);
|
|
|
|
let expanded = $state(section.isExpandedByDefault);
|
|
</script>
|
|
|
|
<div class="rounded-[1.4rem] border border-border bg-card/40 shadow-[var(--shadow-soft)] backdrop-blur-sm {editMode.active ? 'ring-1 ring-primary/15' : ''}">
|
|
<SectionHeader
|
|
sectionId={section.id}
|
|
title={section.title}
|
|
icon={section.icon}
|
|
{expanded}
|
|
onToggle={() => (expanded = !expanded)}
|
|
widgetCount={section.widgets.length}
|
|
/>
|
|
|
|
<SectionCollapsible {expanded}>
|
|
<div class="px-4 pb-4">
|
|
<WidgetGrid
|
|
widgets={section.widgets}
|
|
sectionId={section.id}
|
|
{allApps}
|
|
cardSize={effectiveCardSize}
|
|
/>
|
|
</div>
|
|
</SectionCollapsible>
|
|
</div>
|