.planning/REQUIREMENTS.md

@@ -1,111 +1,101 @@
-# Requirements: Xtablo v2.0 Collaboration, Planning, and Social Sign-in
+# Requirements: Xtablo v3.0 Design System & Visual Polish
 
-**Defined:** 2026-05-15
-**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.
+**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.
 
-## v2.0 Requirements
+## v3.0 Requirements
 
-Requirements for milestone v2.0. Each requirement must map to exactly one roadmap phase.
+Requirements for milestone v3.0. Each maps to exactly one roadmap phase.
 
-### Authentication
+### Design System
 
-- [x] **AUTH-08**: User can start a Google sign-in flow from the login/signup page
-- [x] **AUTH-09**: Google callback validates state, exchanges the authorization code, verifies the ID token, and creates or links a local Xtablo user
-- [x] **AUTH-10**: Apple sign-in is disabled and hidden from the login/signup page
-- [x] **AUTH-11**: Direct Apple sign-in routes are unavailable while Apple sign-in is disabled
-- [x] **AUTH-12**: Social sign-in issues the same server-managed Xtablo session cookie used by email/password login
-- [x] **AUTH-13**: Existing email/password login, signup, logout, CSRF, and rate limiting continue to work after social sign-in is added
+- [ ] **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
+- [ ] **DS-02**: Button component with primary, secondary, ghost, and danger variants
+- [ ] **DS-03**: Input, Textarea, and Select form field components replace inline raw HTML in all templates
+- [ ] **DS-04**: Card component is used across tablo list, detail, and content views
+- [ ] **DS-05**: Badge component supports semantic tones (primary, warning, success, danger)
+- [ ] **DS-06**: Modal component is available for create/edit dialogs
+- [ ] **DS-07**: Empty-state component is available for zero-data views
+- [ ] **DS-08**: Table component is available for list views (files, events)
+- [ ] **DS-09**: Icon-button component replaces inline icon-button patterns across templates
 
-### Chat
+### Auth Views
 
-- [x] **CHAT-01**: Each tablo has a discussion view where authenticated authorized users can see persisted message history
-- [x] **CHAT-02**: User can post a text message to a tablo discussion with validation and CSRF protection
-- [x] **CHAT-03**: Messages are stored in Postgres with tablo, author, body, created timestamp, and deletion/edit metadata
-- [x] **CHAT-04**: Open tablo discussion views receive new messages in real time without a manual refresh
-- [x] **CHAT-05**: Real-time delivery uses Xtablo-owned infrastructure only; no managed chat or realtime provider is introduced
-- [x] **CHAT-06**: Message rendering escapes user content and enforces a server-side maximum body length
+- [ ] **AUTH-UI-01**: Login page matches the JS app's auth-card layout (gradient background, centered card, brand logo, status banner)
+- [ ] **AUTH-UI-02**: Signup page matches the same visual treatment as login
+- [ ] **AUTH-UI-03**: Google sign-in button uses the Material Design button style
 
-### Etapes
+### Dashboard & Tablos
 
-- [ ] **ETAPE-01**: User can create an etape inside a tablo with a title and optional description
-- [ ] **ETAPE-02**: User can edit, delete, and reorder etapes inside a tablo
-- [ ] **ETAPE-03**: User can assign a task to zero or one etape
-- [ ] **ETAPE-04**: Deleting an etape unassigns its tasks by default rather than deleting the tasks
-- [ ] **ETAPE-05**: The task UI can show or filter tasks by etape while preserving existing kanban status and ordering behavior
-- [ ] **ETAPE-06**: The data model prevents nested etapes; an etape cannot have a parent etape
+- [ ] **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
 
-### Events
+### Tablo Detail
 
-- [x] **EVENT-01**: User can create a scheduled event attached to a tablo with title, start time, optional end time, optional description, and optional location
-- [x] **EVENT-02**: User can edit and delete tablo events
-- [x] **EVENT-03**: Tablo detail page includes an events view listing that tablo's scheduled events
-- [x] **EVENT-04**: Event validation requires an end time to be empty or after the start time
-- [x] **EVENT-05**: Event authorization follows tablo access rules so users cannot read or mutate events for inaccessible tablos
+- [ ] **DETAIL-01**: Tablo detail header area matches the project-card-top design
+- [ ] **DETAIL-02**: Task kanban board uses the tasks-section design (section header, task rows, add control)
+- [ ] **DETAIL-03**: Etapes section is visually consistent with the task section
+- [ ] **DETAIL-04**: Files section uses the table component
 
-### Planning
+### Chat & Planning
 
-- [x] **PLAN-01**: Each authenticated user can open an individual planning page
-- [x] **PLAN-02**: Planning page lists the user's scheduled events across tablos in chronological order
-- [x] **PLAN-03**: Planning page links each event back to its tablo context
-- [x] **PLAN-04**: Planning page supports a functional empty state and date navigation/filtering suitable for the first working version
+- [ ] **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
 
-Deferred beyond v2.0.
+### Responsive / Mobile
 
-### Chat
+- **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
 
-- **CHAT-FUT-01**: Typing indicators
-- **CHAT-FUT-02**: Read receipts
-- **CHAT-FUT-03**: Message reactions
-- **CHAT-FUT-04**: Threads or replies
-- **CHAT-FUT-05**: File previews in chat messages
+### Dark Mode
 
-### Planning
-
-- **PLAN-FUT-01**: Recurring events
-- **PLAN-FUT-02**: Reminder notifications
-- **PLAN-FUT-03**: ICS import/export
-- **PLAN-FUT-04**: External calendar sync
-
-### Etapes
-
-- **ETAPE-FUT-01**: Etape progress rollups
-- **ETAPE-FUT-02**: Etape templates
-- **ETAPE-FUT-03**: Etape dependencies
+- **DARK-01**: All CSS tokens have dark-mode counterparts via `prefers-color-scheme` or a class toggle
 
 ## Out of Scope
 
 | Feature | Reason |
 |---------|--------|
-| Managed chat/realtime providers | User explicitly does not want third-party chat |
-| Managed auth platforms | Google is an identity provider only; Xtablo owns users and sessions. Apple sign-in is disabled for now. |
-| WebSocket-first chat protocol | SSE receive + HTMX POST send is the recommended v2 path unless plan-phase proves WebSockets are needed |
-| Nested etapes or arbitrary task hierarchy | User requested one parent per task and no parent-of-parent |
-| Notes / rich documents | Not part of the requested v2 feature set |
-| Billing / Stripe | Still deferred until product loop is validated |
-| Public booking widget | Separate product surface, not part of this milestone |
-| Client portal | Separate product surface, not part of this milestone |
-| Admin tooling | Separate product surface, not part of this milestone |
-| Mobile / Expo app | Web rewrite remains the current product surface |
+| 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
 
-Populated during roadmap creation.
-
 | Requirement | Phase | Status |
 |-------------|-------|--------|
-| AUTH-08..13 | Phase 8 | Complete |
-| ETAPE-01..06 | Phase 9 | Pending |
-| EVENT-01..05 | Phase 10 | Complete |
-| PLAN-01..04 | Phase 11 | Pending |
-| CHAT-01..06 | Phase 12 | Complete |
+| DS-01 | Phase 13 | Pending |
+| DS-02 | Phase 13 | Pending |
+| DS-03 | Phase 13 | Pending |
+| DS-04 | Phase 13 | Pending |
+| DS-05 | Phase 13 | Pending |
+| DS-06 | Phase 13 | Pending |
+| DS-07 | Phase 13 | Pending |
+| DS-08 | Phase 13 | Pending |
+| DS-09 | Phase 13 | Pending |
+| AUTH-UI-01 | Phase 14 | Pending |
+| AUTH-UI-02 | Phase 14 | Pending |
+| AUTH-UI-03 | Phase 14 | Pending |
+| DASH-01 | Phase 15 | Pending |
+| DASH-02 | Phase 15 | Pending |
+| DASH-03 | Phase 15 | Pending |
+| DETAIL-01 | Phase 16 | Pending |
+| DETAIL-02 | Phase 16 | Pending |
+| DETAIL-03 | Phase 16 | Pending |
+| DETAIL-04 | Phase 16 | Pending |
+| CHAT-UI-01 | Phase 17 | Pending |
+| PLAN-UI-01 | Phase 17 | Pending |
 
 **Coverage:**
-- v2.0 requirements: 27 total
-- Mapped to phases: 27
-- Unmapped: 0
+- v3.0 requirements: 21 total
+- Mapped to phases: 21
+- Unmapped: 0 ✓
 
 ---
-*Requirements defined: 2026-05-15*
-*Last updated: 2026-05-15 after Phase 8 execution complete*
+*Requirements defined: 2026-05-16*
+*Last updated: 2026-05-16 after initial definition*