From 7d8036777ea2b5becae103a883f5c80e02728d97 Mon Sep 17 00:00:00 2001 From: Arthur Belleville Date: Sat, 16 May 2026 22:17:40 +0200 Subject: [PATCH] docs(15-03): complete tablo detail restyle plan summary --- .../15-dashboard-tablos/15-03-SUMMARY.md | 93 +++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 .planning/phases/15-dashboard-tablos/15-03-SUMMARY.md diff --git a/.planning/phases/15-dashboard-tablos/15-03-SUMMARY.md b/.planning/phases/15-dashboard-tablos/15-03-SUMMARY.md new file mode 100644 index 0000000..a5060f4 --- /dev/null +++ b/.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`