From 4e0336c950908833f161cb789e0f180565622df8 Mon Sep 17 00:00:00 2001 From: Arthur Belleville Date: Sat, 16 May 2026 23:33:38 +0200 Subject: [PATCH] docs(16-01): complete icon-cases and CSS-foundations plan - add download + chat icon SVG cases to UIIcon switch - append CSS Sections 19-25 to app.css (tasks-section through task-list-empty) - all tests pass; zero hardcoded hex values in new CSS --- .../phases/16-tablo-detail/16-01-SUMMARY.md | 88 +++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 .planning/phases/16-tablo-detail/16-01-SUMMARY.md diff --git a/.planning/phases/16-tablo-detail/16-01-SUMMARY.md b/.planning/phases/16-tablo-detail/16-01-SUMMARY.md new file mode 100644 index 0000000..b11c53b --- /dev/null +++ b/.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)