Design
Design To-Dos
Living tracker of design system alignment between the guide and the dashboard implementation. Completed items have been resolved; open items are future work.
12
Done
3
Open
15
Total
Completed
| # | Item | Priority | Files Changed | Status |
|---|---|---|---|---|
| 1 | Set --primary to green-500 CSS variable --primary was oklch(0.205 0 0) (near-black, shadcn default). Changed to oklch(0.723 0.219 142.18) (green-500). | high | assets/css/main.css components/ui/button/index.ts | done |
| 2 | Remove dark mode CSS Removed .dark color scheme and @custom-variant dark rule. Principle #02: light mode only. | high | assets/css/main.css components/ui/button/index.ts components/ui/input/Input.vue | done |
| 3 | Normalize border radius to 6px --radius was 0.625rem (10px). Normalized to 0.375rem (6px) for practical shadcn compatibility. | high | assets/css/main.css | done |
| 4 | Add type labels to toast notifications Toasts now show monospace uppercase type label (SUCCESS, ERROR, INFO) above the message. | high | components/layout/Toasts.vue | done |
| 5 | Enrich EmptyState component Added icon slot (w-12 h-12 bordered container), title, description, and action slot. | high | components/common/EmptyState.vue | done |
| 6 | Add StatusBar component Added status bar at page bottom with connection status, project name, and sync info. | medium | components/layout/StatusBar.vue layouts/default.vue | done |
| 7 | Update header breadcrumb style Header now uses font-mono text-xs text-slate-500 for breadcrumb path and text-xl for page title. | medium | components/layout/Header.vue | done |
| 8 | Fix static/style.css blue accent Static design guide CSS had --accent: #2563eb (blue). Updated to #22c55e (green) for consistency. | low | static/style.css | done |
| 9 | Standardize CopyButton component Created CommonCopyButton with consistent font-mono text-xs bordered style. Replaced all manual copy buttons across dashboard. | medium | components/common/CopyButton.vue pages/projects/[id]/index.vue pages/projects/[id]/settings.vue pages/projects/[id]/messages/index.vue | done |
| 10 | Create WidgetPreview wrapper Extracted consistent bg-gray-50 inner container for widget previews across pages. | low | components/common/WidgetPreview.vue | done |
| 11 | Document sparkline and chart conventions SVG polyline sparklines are canonical. Chart.js is recommended for time series and multi-line charts. Documented in design guide. | low | pages/design-principles/index.vue | done |
| 12 | Document table padding density levels Two intentional density levels: standard (px-[18px] py-2.5) and compact/analytics (px-3 py-1.5). Documented in design guide. | low | pages/design-principles/index.vue | done |
Open
| # | Item | Priority | Notes | Status |
|---|---|---|---|---|
| 13 | Install Tooltip component Design guide lists Tooltip as a component. Not installed via shadcn-vue yet. | low | Run bunx shadcn-vue add tooltip. See shadcn Tooltip. Use on icon buttons and truncated text. | open |
| 14 | Wire StatusBar to live data StatusBar has placeholder "Connected" text. Should show real sync status and project stats. | low | Connect to project stats API. Show contact count, last sync time. | open |
| 15 | Command palette (optional) Cmd+K command palette for power users. Principle #08 calls for keyboard-navigable interfaces. | low | Optional enhancement. Use shadcn Command component. Arrow keys and Escape already implemented for tables and drawers. | open |