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

phase	plan	subsystem	tags	dependency_graph	tech_stack	key_files	decisions	metrics
15-dashboard-tablos	03	frontend-templates	go htmx templ sidebar dashboard tablo-detail ui-reskin	requires provides affects 15-02 AppLayout-integrated-authenticated-pages tablo-detail-reference-design 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	added patterns AppLayout sidebar shell TabloProjectCard grid inline-edit zones purple-accent tab nav	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	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	duration completed tasks_completed files_changed ~45min 2026-05-16 3 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

• backend/templates/tablos.templ modified and committed: 6953536 exists in git log
• templ generate exited 0 — 30 updates processed
• go build ./... exited 0 — no compilation errors
• HTMX attributes preserved: #tab-content, hx-push-url, hx-target, hx-swap all present
• Inline-edit zones preserved: tablo-title-zone, tablo-desc-zone, tablo-delete-zone