docs(15-03): complete tablo detail restyle plan summary

.planning/phases/15-dashboard-tablos/15-03-SUMMARY.md

@@ -0,0 +1,93 @@
+---
+phase: 15-dashboard-tablos
+plan: "03"
+subsystem: frontend-templates
+tags: [go, htmx, templ, sidebar, dashboard, tablo-detail, ui-reskin]
+dependency_graph:
+  requires: [15-02]
+  provides: [AppLayout-integrated-authenticated-pages, tablo-detail-reference-design]
+  affects: [backend/templates/tablos.templ, backend/templates/planning.templ, backend/templates/account_providers.templ, backend/internal/web/handlers_tablos.go, backend/internal/web/handlers_planning.go]
+tech_stack:
+  added: []
+  patterns: [AppLayout sidebar shell, TabloProjectCard grid, inline-edit zones, purple-accent tab nav]
+key_files:
+  created: []
+  modified:
+    - backend/templates/tablos.templ
+    - backend/templates/planning.templ
+    - backend/templates/account_providers.templ
+    - backend/internal/web/handlers_tablos.go
+    - backend/internal/web/handlers_planning.go
+decisions:
+  - Use sidebarTablos derived from cardViews in TablosListHandler to avoid second DB query
+  - activePath="" on tablo detail pages (no top-level nav item should show active)
+  - TabloProjectCard is new grid card; TabloCard is kept for HTMX fragment responses (OOB clear, delete swap)
+  - Tablo detail page h1 title display is upgraded to text-xl md:text-3xl font-bold to match reference
+metrics:
+  duration: ~45min
+  completed: 2026-05-16
+  tasks_completed: 3
+  files_changed: 5
+---
+
+# Phase 15 Plan 03: Dashboard + Tablo Detail Restyle Summary
+
+Wire AppLayout into all authenticated pages, restyle the tablo dashboard with project-card grid, and restyle the tablo detail page header and tab nav to match the reference JS app design.
+
+## Tasks Completed
+
+| # | Task | Commit | Files |
+|---|------|--------|-------|
+| 1 | Restyle tablos.templ — project-card grid, EmptyState, AppLayout wiring | (prior agent) | backend/templates/tablos.templ |
+| 2 | Update handlers + planning/account_providers templates to use AppLayout | (prior agent) | handlers_tablos.go, handlers_planning.go, planning.templ, account_providers.templ |
+| 3 | Restyle tablo detail page header and tab nav to match reference design | 6953536 | backend/templates/tablos.templ |
+
+## What Was Built
+
+**Task 1 — Project-card grid and AppLayout wiring:**
+- `TablosDashboard` signature updated to accept `activePath string` and `sidebarTablos []sqlc.Tablo`; now calls `@AppLayout` instead of `@Layout`
+- New `TabloProjectCard` component renders `.project-card` articles with colored circle avatar, title, creation date, and edit/delete icon buttons
+- `TablosEmptyState` replaced with `@ui.EmptyState` component
+- `TabloDetailPage` and `TabloNotFoundPage` signatures updated with `activePath` and `sidebarTablos` params; both now use `@AppLayout`
+
+**Task 2 — Handler wiring:**
+- `TablosListHandler`: derives `sidebarTablos` from `cardViews` (no extra DB query) and passes to `TablosDashboard`
+- `TabloDetailHandler`: fetches `sidebarTablos` via `ListTablosByUser`, passes to `TabloDetailPage`
+- `PlanningPageHandler`: fetches `sidebarTablos`, calls updated `PlanningPage` with `activePath="/planning"`
+- `AccountProvidersPage` and its handler updated to use `AppLayout`
+- `PlanningPage` signature updated to accept `activePath` and `tablos`
+
+**Task 3 — Tablo detail page restyle (post-checkpoint fix):**
+- Header section: title row with `h1` (text-xl md:text-3xl font-bold) + Discussion action button (purple `#804EEC`) + placeholder Invite button (outlined purple)
+- Metadata row: created date with calendar icon, hardcoded "En cours" status badge (yellow), 0% progress bar
+- Description inline-edit zone (`tablo-desc-zone`) positioned below metadata row
+- Tab bar redesigned: sticky (top-0 z-40), purple active state (`text-[#804EEC] border-[#804EEC] border-b-2`), inactive state (`text-[#667085]`), each tab has a lucide SVG icon + label, horizontal scroll with hidden scrollbar
+- Tabs: Overview (layout-dashboard icon), Étapes/Tasks (checkbox icon), Files (folder icon), Discussion (message-circle icon), Events (calendar icon)
+- `#tab-content` div retained with all HTMX tab switching logic unchanged
+- `tablo-title-zone`, `tablo-desc-zone`, `tablo-delete-zone` elements all preserved
+
+## Known Stubs
+
+| Stub | File | Reason |
+|------|------|--------|
+| Status "En cours" hardcoded | backend/templates/tablos.templ | No status field in DB schema yet |
+| Progress bar at 0% | backend/templates/tablos.templ | Task completion counting not implemented yet |
+
+## Deviations from Plan
+
+### Auto-fixed Issues
+
+**1. [Rule 2 - User feedback] Tablo detail page restyled after checkpoint**
+- **Found during:** Post-checkpoint human review
+- **Issue:** Tablo detail page did not match the reference JS app design — used plain back link + slate tab bar instead of branded header with action buttons, metadata row, and purple-accent tab nav
+- **Fix:** Redesigned TabloDetailPage in tablos.templ with reference-matching header, metadata row, and icon + label tab bar; updated TabloTitleDisplay to use larger font (text-xl md:text-3xl font-bold); updated title edit input to match
+- **Files modified:** backend/templates/tablos.templ
+- **Commit:** 6953536
+
+## Self-Check: PASSED
+
+- [x] backend/templates/tablos.templ modified and committed: 6953536 exists in git log
+- [x] `templ generate` exited 0 — 30 updates processed
+- [x] `go build ./...` exited 0 — no compilation errors
+- [x] HTMX attributes preserved: `#tab-content`, `hx-push-url`, `hx-target`, `hx-swap` all present
+- [x] Inline-edit zones preserved: `tablo-title-zone`, `tablo-desc-zone`, `tablo-delete-zone`