101 lines
4.2 KiB
Markdown
101 lines
4.2 KiB
Markdown
# Requirements: Xtablo v3.0 Design System & Visual Polish
|
|
|
|
**Defined:** 2026-05-16
|
|
**Core Value:** A user can sign in and run the Tablos workflow — organize work, attach files, discuss, and plan scheduled events — without a JS framework or managed chat provider.
|
|
|
|
## v3.0 Requirements
|
|
|
|
Requirements for milestone v3.0. Each maps to exactly one roadmap phase.
|
|
|
|
### Design System
|
|
|
|
- [x] **DS-01**: CSS design tokens (colors, spacing, typography, shadows, gradients) are defined in `backend/internal/web/ui/base.css` matching the go-backend token vocabulary
|
|
- [x] **DS-02**: Button component with primary, secondary, ghost, and danger variants
|
|
- [x] **DS-03**: Input, Textarea, and Select form field components replace inline raw HTML in all templates
|
|
- [x] **DS-04**: Card component is used across tablo list, detail, and content views
|
|
- [x] **DS-05**: Badge component supports semantic tones (primary, warning, success, danger)
|
|
- [x] **DS-06**: Modal component is available for create/edit dialogs
|
|
- [x] **DS-07**: Empty-state component is available for zero-data views
|
|
- [x] **DS-08**: Table component is available for list views (files, events)
|
|
- [x] **DS-09**: Icon-button component replaces inline icon-button patterns across templates
|
|
|
|
### Auth Views
|
|
|
|
- [x] **AUTH-UI-01**: Login page matches the JS app's auth-card layout (gradient background, centered card, brand logo, status banner)
|
|
- [x] **AUTH-UI-02**: Signup page matches the same visual treatment as login
|
|
- [x] **AUTH-UI-03**: Google sign-in button uses the Material Design button style
|
|
|
|
### Dashboard & Tablos
|
|
|
|
- [ ] **DASH-01**: Sidebar uses the go-backend sidebar design (brand section, nav items with icons, tablo list, user/account footer)
|
|
- [ ] **DASH-02**: Tablo list uses project-card layout with color accents, creation date, and action controls
|
|
- [ ] **DASH-03**: Dashboard empty state uses the empty-state component
|
|
|
|
### Tablo Detail
|
|
|
|
- [x] **DETAIL-01**: Tablo detail header area matches the project-card-top design
|
|
- [x] **DETAIL-02**: Task kanban board uses the tasks-section design (section header, task rows, add control)
|
|
- [x] **DETAIL-03**: Etapes section is visually consistent with the task section
|
|
- [x] **DETAIL-04**: Files section uses the table component
|
|
|
|
### Chat & Planning
|
|
|
|
- [ ] **CHAT-UI-01**: Discussion view uses consistent card/surface design with message bubbles distinguishing own vs. others
|
|
- [ ] **PLAN-UI-01**: Planning page uses the overview-section layout for event aggregation
|
|
|
|
## Future Requirements
|
|
|
|
### Responsive / Mobile
|
|
|
|
- **RESP-01**: Sidebar collapses on small screens (hamburger or bottom-nav pattern)
|
|
- **RESP-02**: Kanban board scrolls horizontally on mobile
|
|
- **RESP-03**: Auth pages adapt gracefully to narrow viewports
|
|
|
|
### Dark Mode
|
|
|
|
- **DARK-01**: All CSS tokens have dark-mode counterparts via `prefers-color-scheme` or a class toggle
|
|
|
|
## Out of Scope
|
|
|
|
| Feature | Reason |
|
|
|---------|--------|
|
|
| New pages or features | v3.0 is purely visual — no new routes or data models |
|
|
| Billing / Stripe | Deferred from v1.0, still out of scope |
|
|
| Client portal / Admin | Deferred from v1.0, still out of scope |
|
|
| Mobile app | Out of scope for this rewrite milestone |
|
|
| Dark mode | Future requirement — tokens will be structured to enable it, not implement it |
|
|
|
|
## Traceability
|
|
|
|
| Requirement | Phase | Status |
|
|
|-------------|-------|--------|
|
|
| DS-01 | Phase 13 | Complete |
|
|
| DS-02 | Phase 13 | Complete |
|
|
| DS-03 | Phase 13 | Complete |
|
|
| DS-04 | Phase 13 | Complete |
|
|
| DS-05 | Phase 13 | Complete |
|
|
| DS-06 | Phase 13 | Complete |
|
|
| DS-07 | Phase 13 | Complete |
|
|
| DS-08 | Phase 13 | Complete |
|
|
| DS-09 | Phase 13 | Complete |
|
|
| AUTH-UI-01 | Phase 14 | Complete |
|
|
| AUTH-UI-02 | Phase 14 | Complete |
|
|
| AUTH-UI-03 | Phase 14 | Complete |
|
|
| DASH-01 | Phase 15 | Pending |
|
|
| DASH-02 | Phase 15 | Pending |
|
|
| DASH-03 | Phase 15 | Pending |
|
|
| DETAIL-01 | Phase 16 | Complete |
|
|
| DETAIL-02 | Phase 16 | Complete |
|
|
| DETAIL-03 | Phase 16 | Complete |
|
|
| DETAIL-04 | Phase 16 | Complete |
|
|
| CHAT-UI-01 | Phase 17 | Pending |
|
|
| PLAN-UI-01 | Phase 17 | Pending |
|
|
|
|
**Coverage:**
|
|
- v3.0 requirements: 21 total
|
|
- Mapped to phases: 21
|
|
- Unmapped: 0 ✓
|
|
|
|
---
|
|
*Requirements defined: 2026-05-16*
|
|
*Last updated: 2026-05-16 after initial definition*
|