.planning/phases/16-tablo-detail/16-01-SUMMARY.md

@@ -0,0 +1,88 @@
+---
+phase: 16-tablo-detail
+plan: "01"
+subsystem: design-system
+tags: [css, icons, templ, design-tokens]
+dependency_graph:
+  requires: []
+  provides: [icon-download, icon-chat, css-tasks-section, css-progress-bar, css-tab-nav, css-metadata-row, css-kanban-column, css-etape-group, css-task-list-empty]
+  affects: [16-02-tablos-templ, 16-03-tasks-templ, 16-04-files-templ]
+tech_stack:
+  added: []
+  patterns: [UIIcon switch case extension, CSS design token append]
+key_files:
+  created: []
+  modified:
+    - backend/internal/web/ui/icon_button.templ
+    - backend/internal/web/ui/app.css
+decisions:
+  - "kanban-column .tasks-section-header h3 scoped override (1rem) added alongside the shared rule (1.6rem) already at lines 355-361 — no duplication"
+  - "tablo-metadata-date svg rule added as Section 22 sub-rule per UI-SPEC — not in PATTERNS.md Block 3 explicitly but derived from spec"
+metrics:
+  duration: ~8min
+  completed: 2026-05-16T21:33:05Z
+  tasks_completed: 2
+  files_modified: 2
+---
+
+# Phase 16 Plan 01: Icon Cases and CSS Foundations Summary
+
+**One-liner:** Added `download` and `chat` SVG icon cases to UIIcon switch, and appended CSS Sections 19–25 (tasks-section, progress bar, tab nav, metadata row, kanban column, etape group, task-list-empty) to app.css using design tokens throughout.
+
+## Tasks Completed
+
+| Task | Name | Commit | Files |
+|------|------|--------|-------|
+| 1 | Add `download` and `chat` icon cases to UIIcon switch | a1a3ea8 | `backend/internal/web/ui/icon_button.templ` |
+| 2 | Append CSS Sections 19–25 to app.css | 44209b9 | `backend/internal/web/ui/app.css` |
+
+## What Was Built
+
+**Task 1 — Icon cases:**
+- Inserted `case "download":` into the UIIcon switch with a Lucide-style arrow-down SVG (`path` + `polyline` + `line` elements, `viewBox="0 0 24 24"`, `aria-hidden="true"`)
+- Inserted `case "chat":` into the UIIcon switch with a speech-bubble SVG (`path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"`)
+- Both cases inserted immediately before the `default:` case; all 8 existing cases unchanged
+- `icon_button_templ.go` regenerated via `templ generate` (gitignored, regenerated at build time)
+
+**Task 2 — CSS Sections 19–25:**
+- Section 19: `.tasks-section`, `.tasks-section-header`, `.tasks-add-button`, `.task-list`, `.task-row`, `.task-row:hover`, `.task-check`, `.task-check.is-complete`, `.task-body`, `.task-body p`, `.task-row.is-complete .task-body p`, `.task-meta`
+- Section 20: `.project-progress-track`, `.project-progress-bar`
+- Section 21: `.tab-nav`, `.tab-nav-item`, `.tab-nav-item.is-active` (with `border-bottom-color: var(--color-brand-primary)` and `color: var(--color-text-brand)`), `.tab-nav-item:hover:not(.is-active)`
+- Section 22: `.tablo-metadata-row`, `.tablo-metadata-date`, `.tablo-metadata-date svg`
+- Section 23: `.kanban-column { flex-shrink: 0; width: 18rem; }` + `.kanban-column .tasks-section-header h3 { font-size: 1rem; }` scoped override
+- Section 24: `.etape-group-header` (with `background: var(--color-surface-muted)`), `.etape-group-color-dot`, `.etape-group-label`, `.etape-group-label.is-unassigned`
+- Section 25: `.task-list-empty` (with `font-style: italic`)
+- Zero hardcoded hex values in the 240 appended lines
+
+## Verification
+
+```
+go build ./... (from backend/) → exit 0
+go test ./internal/web/... -count=1 → ok (3 packages, 0 failures)
+grep -c "\.tasks-section {" app.css → 1 (no duplication)
+grep -c "#[0-9a-fA-F]{3,6}" (new lines only) → 0
+```
+
+## Deviations from Plan
+
+### Auto-fixed Issues
+
+None — plan executed exactly as written.
+
+One additive note: `.tablo-metadata-date svg` sub-rule (height/width: 1rem) was included in Section 22 per the UI-SPEC reference, which the plan authorized via "Values from PATTERNS.md Block 3 / UI-SPEC". This is an additive property that sizes calendar SVG icons in the metadata row correctly.
+
+## Known Stubs
+
+None. This plan is substrate-only (CSS + icons). No UI data rendering involved.
+
+## Threat Flags
+
+No new trust boundaries. CSS is embedded at build time; SVG icons are decorative with `aria-hidden="true"`. Consistent with T-16-01-01 and T-16-01-02 dispositions (accept).
+
+## Self-Check: PASSED
+
+- `backend/internal/web/ui/icon_button.templ` — FOUND, contains `case "download":` and `case "chat":`
+- `backend/internal/web/ui/app.css` — FOUND, contains all 7 new sections
+- Commit a1a3ea8 — FOUND (Task 1)
+- Commit 44209b9 — FOUND (Task 2)
+- `go test ./internal/web/... -count=1` — PASSED (3 packages)