From 6953536dd8277776eef895bad5a89b7511d3408f Mon Sep 17 00:00:00 2001 From: Arthur Belleville Date: Sat, 16 May 2026 22:15:49 +0200 Subject: [PATCH 1/2] feat(15-03): restyle tablo detail page header and tab nav to match reference design - Replace plain back-link + title with structured header: title row + metadata row - Title uses larger md:text-3xl font-bold style with inline-edit preserved - Add Discussion and Invite action buttons in header (purple brand colors) - Add metadata row: created date, hardcoded En cours status badge, 0% progress bar - Replace plain slate tab nav with purple-accent tab bar (icon + label per tab) - Tab active state: text-[#804EEC] border-[#804EEC]; inactive: text-[#667085] - Tab bar is sticky (top-0 z-40) with horizontal scroll and hidden scrollbar - Keep all HTMX attributes, hx-push-url, hx-target="#tab-content" logic unchanged - tablo-title-zone, tablo-desc-zone, tablo-delete-zone elements retained --- backend/templates/tablos.templ | 227 ++++++++++++++++++++++----------- 1 file changed, 149 insertions(+), 78 deletions(-) diff --git a/backend/templates/tablos.templ b/backend/templates/tablos.templ index 1339b2d..56aca3a 100644 --- a/backend/templates/tablos.templ +++ b/backend/templates/tablos.templ @@ -179,90 +179,161 @@ templ TabloCardWithOOBFormClear(tablo sqlc.Tablo, csrfToken string) {
} -// TabloDetailPage renders the full detail page for a single tablo with a 3-tab layout. -// Tabs: Overview / Tasks / Files. activeTab selects the initially rendered tab content. +// TabloDetailPage renders the full detail page for a single tablo with a tab layout. +// Tabs: Overview / Tasks / Files / Events / Discussion. activeTab selects the initially rendered tab content. // files and tasks are pre-fetched slices for the active tab (may be nil for inactive tabs). // UI-SPEC §3 Interaction Contract — GET /tablos/{id}. // D-07: signature includes activeTab string param; D-08: tab bar links carry hx-push-url. templ TabloDetailPage(user *auth.User, csrfToken string, tablo sqlc.Tablo, tasks []sqlc.Task, etapes []sqlc.Etape, counts EtapeTaskCounts, filter EtapeFilter, files []sqlc.TabloFile, events EventsCalendar, discussion DiscussionTabData, activeTab string) { @Layout("Tablos — Xtablo", user, csrfToken) { -
- ← Back to tablos + +
+ +
+
+ + @TabloTitleDisplay(tablo, csrfToken) +
+
+ + + + Discussion + + + + +
+ @TabloDeleteButtonFragment(tablo, csrfToken) +
+
+
+ +
+
+ + Créé le + { tablo.CreatedAt.Time.Format("Jan 2, 2006") } +
+
+ Statut + En cours +
+
+ Progression +
+
+
+ 0% +
+
+ +
+ @TabloDescDisplay(tablo, csrfToken) +
-
- @TabloTitleDisplay(tablo, csrfToken) + +
+
+ +
-
- @TabloDescDisplay(tablo, csrfToken) -
-
- @TabloDeleteButtonFragment(tablo, csrfToken) -
- - -
+
if activeTab == "tasks" { @TasksTabFragment(tablo, tasks, etapes, counts, filter, csrfToken) } else if activeTab == "files" { @@ -306,7 +377,7 @@ templ TasksTabFragment(tablo sqlc.Tablo, tasks []sqlc.Task, etapes []sqlc.Etape, // UI-SPEC §4 Interaction Contract — title inline-edit display state. templ TabloTitleDisplay(tablo sqlc.Tablo, csrfToken string) {

@FieldError(errs.Title)

From 7d8036777ea2b5becae103a883f5c80e02728d97 Mon Sep 17 00:00:00 2001 From: Arthur Belleville Date: Sat, 16 May 2026 22:17:40 +0200 Subject: [PATCH 2/2] 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`