Nexus-Guard-Suite/.sisyphus/plans/dashboard-ui-redesign.md

Dashboard UI Redesign — Implementation Plan

Created: 2026-06-02 Spec: apps/dashboard-ui/docs/superpowers/specs/2026-06-02-dashboard-redesign-design.md Approach: Bottom-Up Design System (Approach A)

---

TODOs

Phase 1: Design Foundation

• 1. Delete dead scaffold files (src/style.css, src/counter.ts, public/icons.svg)
• 2. Add Google Fonts (Inter + JetBrains Mono) to index.html
• 3. Create design tokens in src/assets/main.css using @theme directive
• 4. Add base animation CSS (page transitions, modal transitions, sidebar transitions)

Phase 2: Component Library

• 5. Create NgButton.vue — primary, secondary, ghost, danger variants with loading state
• 6. Create NgCard.vue — glass card wrapper with default, elevated, stat variants
• 7. Create NgModal.vue — HeadlessUI Dialog wrapper with transitions, header/body/footer slots
• 8. Create NgTable.vue — sortable headers, row hover, responsive layout
• 9. Create NgInput.vue — text, password, search with label, error, hint
• 10. Create NgSelect.vue — HeadlessUI Listbox wrapper
• 11. Create NgToggle.vue — HeadlessUI Switch wrapper
• 12. Create NgBadge.vue — status badges: online, offline, warning
• 13. Create NgToast.vue + useToast.ts — notification system replacing alert()
• 14. Create NgSidebar.vue — collapsible sidebar with icons + labels
• 15. Create NgDropdown.vue — HeadlessUI Menu wrapper
• 16. Create NgAccordion.vue — HeadlessUI Disclosure wrapper
• 17. Create NgTooltip.vue — HeadlessUI Popover wrapper
• 18. Create NgSkeleton.vue — loading skeleton placeholders

Phase 3: Layout System

• 19. Refactor App.vue — new sidebar layout with NgSidebar
• 20. Add page transitions to router (fade + slide-up)
• 21. Implement responsive breakpoints (mobile hamburger, tablet collapsed, desktop full)
• 22. Add sidebar collapse/expand with Cmd+B shortcut

Phase 4: Page Restyle

• 23. Restyle Login.vue — centered card, no sidebar, animated gradient background
• 24. Restyle Dashboard.vue — stat cards, traffic overview, recent activity, quick actions
• 25. Restyle Devices.vue — search + filter bar, data table, pagination
• 26. Restyle DeviceDetail.vue — back nav, sections (keys, settings, firewall, linked)
• 27. Restyle Servers.vue — card-based layout with status indicators
• 28. Restyle TrafficHistory.vue — filters, chart, data table, export
• 29. Restyle Users.vue — table with role badges, inline create form
• 30. Restyle ShareConfig.vue — public centered card, monospace config, copy/download
• 31. Replace all alert()/confirm() with NgToast/NgModal
• 32. Add loading skeletons to all pages
• 33. Integrate Iconify icons throughout (nav, buttons, status)

Phase 5: Polish

• 34. Add micro-interactions (hover, focus states) to all components
• 35. Add staggered list animations to tables and cards
• 36. Add empty states for all data lists
• 37. Add error states for failed loads

Phase 6: Documentation & Cleanup

• 38. Update apps/dashboard-ui/AGENTS.md with new architecture
• 39. Update root README.md with dashboard architecture section
• 40. Delete unused public assets (public/icons.svg)

---

Final Verification Wave

• F1. Build Verification — npm run build passes with zero errors
• F2. Lint Verification — No TypeScript errors, no console warnings
• F3. Visual QA — All pages render correctly with new design system
• F4. Responsive QA — Mobile, tablet, desktop layouts work correctly

---

Acceptance Criteria

Must Have

• Design tokens defined in @theme directive
• 14 shared components in src/components/ui/
• All 8 pages restyled with new components
• Page transitions working
• Responsive sidebar (mobile/tablet/desktop)
• Toast notifications replacing alert()
• Iconify icons integrated

Must NOT Have

• No alert() or confirm() calls
• No hardcoded colors in Vue SFCs (use design tokens)
• No style.css or counter.ts (deleted)
• No breaking changes to API modules or stores

---

Evidence

• Build output shows zero errors
• All pages use Ng* components
• No raw Tailwind classes for colors (use tokens)
• Responsive layout tested at 375px, 768px, 1024px+