feat: build content-free dashboard design system #17

Merged

vince merged 1 commit from codex/issue-6-design-system into main

2026-06-18 18:39:53 +02:00

vince commented

2026-06-18 18:28:21 +02:00

Owner

Summary

Build a content-free dashboard UI component layer inspired by the system overview reference.

Why

Issue #6 needs the reusable look-and-feel tier before model-driven rendering and Storybook stories are added in later issues.

Changes

Add CSS design tokens for black-canvas brutalist layout, density, status colors, focus states, and reduced-motion behavior.
Add reusable Svelte components for dashboard frame, telemetry grid/card, panels, service rows, status badges, status strips, footer cells, module cards, and generic Iconify rendering.
Add generic fixture dashboards and a fixture switcher on the one-page preview to prove the same components render multiple dashboards without code changes.
Add UI render tests and content-boundary tests that block environment-specific strings and service-specific icon imports from reusable UI source.
Replace the old scaffold page styling with the design-system preview while leaving data/model rendering for #7.

Testing

bun run test
bun run check
bun run build
git diff --check
rg -n -i "dimensionlab|dimension lab|vaultwarden|forgejo|grafana|uptime kuma|prometheus|backrest|open webui|comfyui|adminer|cockpit|ollama" src/lib/ui --glob '!*.test.ts' || true
Dev smoke: bun run dev -- --port 4177 and curl http://127.0.0.1:4177/ confirmed generic fixture HTML and Iconify identifiers render.

Notes

Playwright CLI was available through bunx, but the local Chromium browser binary is not installed, so screenshot capture was not run on this branch. The full visual QA gate remains tracked in #10.
Icon rendering is intentionally driven by Iconify-compatible string identifiers from props; reusable UI source does not import per-service icon data.

Closes #6

## Summary Build a content-free dashboard UI component layer inspired by the system overview reference. ## Why Issue #6 needs the reusable look-and-feel tier before model-driven rendering and Storybook stories are added in later issues. ## Changes - Add CSS design tokens for black-canvas brutalist layout, density, status colors, focus states, and reduced-motion behavior. - Add reusable Svelte components for dashboard frame, telemetry grid/card, panels, service rows, status badges, status strips, footer cells, module cards, and generic Iconify rendering. - Add generic fixture dashboards and a fixture switcher on the one-page preview to prove the same components render multiple dashboards without code changes. - Add UI render tests and content-boundary tests that block environment-specific strings and service-specific icon imports from reusable UI source. - Replace the old scaffold page styling with the design-system preview while leaving data/model rendering for #7. ## Testing - bun run test - bun run check - bun run build - git diff --check - rg -n -i "dimensionlab|dimension lab|vaultwarden|forgejo|grafana|uptime kuma|prometheus|backrest|open webui|comfyui|adminer|cockpit|ollama" src/lib/ui --glob '!*.test.ts' || true - Dev smoke: bun run dev -- --port 4177 and curl http://127.0.0.1:4177/ confirmed generic fixture HTML and Iconify identifiers render. ## Notes - Playwright CLI was available through bunx, but the local Chromium browser binary is not installed, so screenshot capture was not run on this branch. The full visual QA gate remains tracked in #10. - Icon rendering is intentionally driven by Iconify-compatible string identifiers from props; reusable UI source does not import per-service icon data. Closes #6

vince added 1 commit 2026-06-18 18:28:21 +02:00