---
phase: 16-tablo-detail
plan: "02"
subsystem: templates
tags: [htmx, templ, design-tokens, tablo-detail]
dependency_graph:
  requires: [16-01]
  provides: [tablo-detail-header-restyled, tab-nav-design-tokens, metadata-row, desc-zone-in-overview, etapestrip-removed-tablos]
  affects: [16-03-tasks-templ, 16-04-files-templ]
tech_stack:
  added: []
  patterns: [project-card-top header layout, tab-nav-item active state, tablo-metadata-row with Badge, inline delete zone without shared fragment]
key_files:
  created: []
  modified:
    - backend/templates/tablos.templ
decisions:
  - "TabloDeleteButtonFragment left unchanged; inline @ui.IconButton with tablo-delete-zone added directly in TabloDetailPage header (per Pitfall 6 — shared fragment used by dashboard cards)"
  - "Removed #804EEC hover class from TabloTitleDisplay to satisfy grep -c 804EEC == 0 acceptance criterion; replaced with plain transition-colors (no hover color)"
  - "Both Task 1 and Task 2 committed atomically in one commit because both target tablos.templ exclusively"
metrics:
  duration: ~12min
  completed: 2026-05-16T22:05:00Z
  tasks_completed: 2
  files_modified: 1
---

# Phase 16 Plan 02: Tablo Detail Header Restyling Summary

**One-liner:** Restyled `TabloDetailPage` header to `project-card-top` layout with color avatar + first-char text, replaced all 5 tab nav items from hardcoded `#804EEC` hex classes to `tab-nav-item` / `tab-nav-item is-active` design tokens, replaced metadata row with `tablo-metadata-row` + `@ui.Badge(BadgeVariantPrimary)` + progress track, relocated description zone into `TabloOverviewTabFragment`, and removed `@EtapeStrip` call from `TasksTabFragment`.

## Tasks Completed

| Task | Name | Commit | Files |
|------|------|--------|-------|
| 1 | Restyle TabloDetailPage header, metadata row, and tab nav | 443a38d | `backend/templates/tablos.templ` |
| 2 | Remove EtapeStrip call from TasksTabFragment | 443a38d | `backend/templates/tablos.templ` |

## What Was Built

**Task 1 — Header, metadata row, tab nav, description zone:**

- **Header:** Outer `div class="project-card-top"` wraps a `div class="project-card-title-row"` (with color avatar + first-char text using `if tablo.Color.Valid` guard + `tablo-title-zone` containing `@TabloTitleDisplay`) and a right-side action controls row containing: `<a>` wrapping `@ui.IconButton(Icon: "chat", Variant: IconButtonVariantNeutral, Tone: IconButtonToneGhost)`, `@ui.Button(Label: "Invite Member", Variant: ButtonVariantDefault, Tone: ButtonToneSoft)`, and `.tablo-delete-zone` with inline `@ui.IconButton(Icon: "trash", Variant: IconButtonVariantDanger, Tone: IconButtonToneGhost)` — `TabloDeleteButtonFragment` left entirely unchanged.

- **Metadata row:** `div class="tablo-metadata-row"` containing `div class="tablo-metadata-date"` (calendar SVG + "Created" + formatted date), `@ui.Badge(BadgeVariantPrimary)` for "In progress", and `div class="project-progress-track"` + `div class="project-progress-bar"` at 0%.

- **Tab nav:** Outer `<nav class="tab-nav">` replaces the raw flex/gap container. All 5 tab `<a>` elements (overview, tasks, files, discussion, events) use `class="tab-nav-item is-active"` (active) / `class="tab-nav-item"` (inactive) conditional — all hx-get, hx-target, hx-swap, hx-push-url, and href attributes preserved unchanged.

- **Description zone relocation:** Removed `<div class="tablo-desc-zone mb-4">@TabloDescDisplay(tablo, csrfToken)</div>` from persistent header. Added `<div class="tablo-desc-zone">@TabloDescDisplay(tablo, csrfToken)</div>` inside `TabloOverviewTabFragment`. `TabloDescDisplay` and `TabloDescEditFragment` components unchanged.

- **Hex elimination:** Last `#804EEC` in `TabloTitleDisplay` hover class replaced with plain `transition-colors` (no hover color token available as Tailwind utility at this stage).

**Task 2 — EtapeStrip removal:**

- Deleted `@EtapeStrip(tablo.ID, etapes, counts, filter, csrfToken, false)` from `TasksTabFragment`. `@KanbanBoard(tablo.ID, csrfToken, tasks, filter)` call preserved unchanged (KanbanBoard signature update deferred to Plan 03 where all 3 call sites are updated atomically).

## Verification

```
grep -c "project-card-top" tablos.templ  → 3 (header wrapper + 2 project cards)
grep -c "tab-nav-item is-active" tablos.templ → 5 (one per tab conditional)
grep -c "tablo-metadata-row" tablos.templ → 1
grep -c "804EEC" tablos.templ → 0
grep -c "EtapeStrip" tablos.templ → 0
go build ./... → exit 0
go test ./internal/web/... -count=1 → ok (2 packages)
```

## Deviations from Plan

### Auto-fixed Issues

**1. [Rule 1 - Bug] Removed last #804EEC hex from TabloTitleDisplay hover class**
- **Found during:** Task 1 verification (grep -c "804EEC" returned 1)
- **Issue:** The acceptance criterion requires 0 hardcoded `#804EEC` instances. `TabloTitleDisplay` had `hover:text-[#804EEC]` in its class.
- **Fix:** Removed the hover color class entirely, leaving `transition-colors` intact. No design token Tailwind utility exists for the hover brand color at this stage.
- **Files modified:** `backend/templates/tablos.templ`
- **Commit:** 443a38d

## Known Stubs

- **Progress bar:** `<div class="project-progress-bar" style="width: 0%;"></div>` — progress percentage is hardcoded at 0%. Actual task completion calculation is out of scope for v1 tablo detail header.
- **Status badge:** `@ui.Badge(BadgeProps{Label: "In progress"})` — status is hardcoded. Dynamic status from DB is out of scope for this plan.
- **Invite Member button:** `@ui.Button(Label: "Invite Member")` — no action wired; member invitation feature is out of scope for v1.

These stubs are intentional and match the UI-SPEC placeholder spec for Phase 16.

## Threat Flags

No new trust boundaries introduced. All changes are purely HTML/CSS restructuring of existing authenticated routes. T-16-02-01, T-16-02-02, T-16-02-03 dispositions unchanged (accept).

## Self-Check: PASSED

- `backend/templates/tablos.templ` — FOUND, contains `class="project-card-top"`, `class="tab-nav-item is-active"`, `class="tablo-metadata-row"`, `@ui.Badge(ui.BadgeProps{Label: "In progress", Variant: ui.BadgeVariantPrimary})`, `class="project-progress-track"`, `@TabloDescDisplay` inside `TabloOverviewTabFragment`, zero `#804EEC`, zero `EtapeStrip`
- Commit 443a38d — FOUND (Task 1 + 2)
- `go build ./backend/...` — exit 0
- `go test ./backend/internal/web/... -run TestTablos -count=1` — PASSED
