Set up Tailwind v4 + shadcn-vue infrastructure and replace the first
Bootstrap component (Toast) as a vertical slice that proves the approach.
Infrastructure (refactor/01 phase A):
- Add tailwindcss + @tailwindcss/vite (devDependencies) and wire the plugin
in vite.config.js
- Add shadcn-vue runtime deps: reka-ui, class-variance-authority, clsx,
tailwind-merge, lucide-vue-next
- Add components.json and frontend/lib/utils.js (cn helper)
- Define design tokens via shadcn CSS variables (oklch, neutral baseColor)
in frontend/style/style.css
- Wire dark mode: store.setDarkMode now toggles <html>.dark for the
Tailwind dark: variant
- Coexist with Bootstrap (no removal yet)
Toast → vue-sonner (refactor/01 phase B item 1):
- Replace internals of widgets/Toast.vue (Bootstrap Toast → vue-sonner)
- Keep store.setAlert() public API unchanged so all 5 call sites stay put
- Map alertStyle text-success/warning/danger/info to sonner severities
Refactor planning:
- Add AGENTS.md so future AI sessions know the project layout, JS-only
preference, and where to find refactor progress
- Add refactor/ with a 4-task plan, completion discipline, and per-task
review checklists
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
