From 6953536dd8277776eef895bad5a89b7511d3408f Mon Sep 17 00:00:00 2001 From: Arthur Belleville Date: Sat, 16 May 2026 22:15:49 +0200 Subject: [PATCH] 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)