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