---
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`
