04c212da92
Complete frontend design overhaul replacing achromatic shadcn/ui defaults with an indigo-branded (#6366F1), status-aware, dark-mode-enabled token system. Phase 1 — Theme Foundation: - Replace all CSS tokens in index.css with v2 light/dark mode values - Add 24 status tokens (6 statuses × 4 variants), 22 terminal tokens, 7 diff tokens, 5 shadow tokens, 9 transition/animation tokens, 10 z-index tokens, 10-step extended indigo scale - Install Geist Sans/Mono variable fonts (public/fonts/) - Extend tailwind.config.ts with all new token utilities - Add dark mode flash-prevention script in index.html - Add status-pulse and shimmer keyframe animations - Add global focus-visible styles and reduced-motion media query Phase 2 — ThemeProvider + Toggle: - ThemeProvider context with system preference listener - 3-state ThemeToggle (Sun/Monitor/Moon) - Radix tooltip primitive for tooltips - localStorage persistence with 'cw-theme' key Phase 3 — Shared Components + Token Migration: - StatusDot: mapEntityStatus() maps raw statuses to 6 semantic variants - StatusBadge: uses status token bg/fg/border classes - Badge: 6 new status variants + xs size - EmptyState, ErrorState, SaveIndicator shared patterns - CommandPalette: Cmd+K search with fuzzy matching, keyboard nav - Skeleton with shimmer animation + SkeletonCard composite layouts - KeyboardShortcutHint, NavBadge, enhanced Sonner config - Migrate ALL hardcoded Tailwind colors to token classes across AgentOutputViewer, review/*, ProgressBar, AccountCard, InitiativeHeader, DependencyIndicator, PipelineTaskCard, PreviewPanel, ChangeSetBanner, MessageCard, PhaseDetailPanel Phase 4 — App Layout Overhaul: - Single 48px row header with CW logo, nav with NavBadge counts, Cmd+K search button, ThemeToggle, HealthDot - Remove max-w-7xl from header/main; pages control own widths - ConnectionBanner for offline/reconnecting states - BrowserTitleUpdater with running/questions counts - useGlobalKeyboard (1-4 nav, Cmd+K), useConnectionStatus hooks - Per-page width wrappers (initiatives max-w-6xl, settings max-w-4xl) Phase 5 — Page-Level Token Migration: - ReviewSidebar: all hardcoded green/orange/red → status/diff tokens - CommentThread: resolved state → status-success tokens - Settings health: green → status-success-dot
57 lines
1.6 KiB
JSON
57 lines
1.6 KiB
JSON
{
|
|
"name": "@codewalk-district/web",
|
|
"private": true,
|
|
"version": "0.0.1",
|
|
"type": "module",
|
|
"scripts": {
|
|
"dev": "vite",
|
|
"build": "tsc -b && vite build",
|
|
"preview": "vite preview",
|
|
"lint": "tsc --noEmit"
|
|
},
|
|
"dependencies": {
|
|
"@codewalk-district/shared": "*",
|
|
"@radix-ui/react-dialog": "^1.1.15",
|
|
"@radix-ui/react-label": "^2.1.8",
|
|
"@radix-ui/react-select": "^2.2.6",
|
|
"@radix-ui/react-tooltip": "^1.2.8",
|
|
"@tanstack/react-query": "^5.75.0",
|
|
"@tanstack/react-router": "^1.158.0",
|
|
"@tiptap/extension-link": "^3.19.0",
|
|
"@tiptap/extension-placeholder": "^3.19.0",
|
|
"@tiptap/extension-table": "^3.19.0",
|
|
"@tiptap/html": "^3.19.0",
|
|
"@tiptap/pm": "^3.19.0",
|
|
"@tiptap/react": "^3.19.0",
|
|
"@tiptap/starter-kit": "^3.19.0",
|
|
"@tiptap/suggestion": "^3.19.0",
|
|
"@trpc/client": "^11.9.0",
|
|
"@trpc/react-query": "^11.9.0",
|
|
"class-variance-authority": "^0.7.1",
|
|
"clsx": "^2.1.1",
|
|
"geist": "^1.7.0",
|
|
"lucide-react": "^0.563.0",
|
|
"react": "^19.0.0",
|
|
"react-dom": "^19.0.0",
|
|
"sonner": "^2.0.7",
|
|
"tailwind-merge": "^3.4.0",
|
|
"tippy.js": "^6.3.7"
|
|
},
|
|
"devDependencies": {
|
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
|
"@radix-ui/react-slot": "^1.2.4",
|
|
"@tailwindcss/typography": "^0.5.19",
|
|
"@tanstack/router-plugin": "^1.158.0",
|
|
"@types/node": "^25.2.0",
|
|
"@types/react": "^19.0.0",
|
|
"@types/react-dom": "^19.0.0",
|
|
"@vitejs/plugin-react": "^4.3.4",
|
|
"autoprefixer": "^10.4.24",
|
|
"postcss": "^8.5.6",
|
|
"tailwindcss": "^3.4.19",
|
|
"tailwindcss-animate": "^1.0.7",
|
|
"typescript": "^5.7.3",
|
|
"vite": "^6.1.0"
|
|
}
|
|
}
|