From 2a835f52e9f49960e0daa9322abbd096d8f9cee0 Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Sun, 17 May 2026 16:34:09 +0200
Subject: [PATCH] =?UTF-8?q?docs(19-03):=20complete=20tablo=20list=20revamp?=
 =?UTF-8?q?=20plan=2003=20=E2=80=94=20toggle=20button=20and=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 .../19-tablo-list-revamp/19-03-SUMMARY.md     | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 .planning/phases/19-tablo-list-revamp/19-03-SUMMARY.md

diff --git a/.planning/phases/19-tablo-list-revamp/19-03-SUMMARY.md b/.planning/phases/19-tablo-list-revamp/19-03-SUMMARY.md
new file mode 100644
index 0000000..f40bec0
--- /dev/null
+++ b/.planning/phases/19-tablo-list-revamp/19-03-SUMMARY.md
@@ -0,0 +1,108 @@
+---
+phase: 19-tablo-list-revamp
+plan: "03"
+subsystem: frontend-templates
+tags: [go, templ, htmx, tailwind, css, tablos, view-toggle, testing]
+
+# Dependency graph
+requires:
+  - phase: 19-tablo-list-revamp
+    plan: "02"
+    provides: Dual card+row HTML structure and data-view CSS toggle rules
+provides:
+  - View toggle button in TablosDashboard heading with inline onclick JS
+  - data-view="grid" initial attribute on #tablos-list container
+  - .view-toggle-btn CSS block in app.css (Section 20c)
+  - Three automated tests covering LIST-01, LIST-02, LIST-03
+affects: []
+
+# Tech tracking
+tech-stack:
+  added: []
+  patterns:
+    - Inline onclick JS pattern (D-03/D-04): no Alpine.js, no localStorage, resets on reload
+    - Plain button with inline SVG avoids icon-set dependency for one-off icons
+
+key-files:
+  created: []
+  modified:
+    - backend/templates/tablos.templ
+    - backend/internal/web/ui/app.css
+    - backend/static/tailwind.css
+    - backend/internal/web/handlers_tablos_test.go
+
+key-decisions:
+  - "Used plain <button> with inline SVG instead of ui.IconButton — avoids checking icon availability and matches plan guidance"
+  - "Single-line onclick JS: var el=document.getElementById('tablos-list');el.dataset.view=el.dataset.view==='list'?'grid':'list'"
+  - "Unique email addresses per new test (progressbar@, viewtoggle@, statusbadge@) — no collision with existing tests"
+
+# Metrics
+duration: 10min
+completed: 2026-05-17
+---
+
+# Phase 19 Plan 03: Tablo List Revamp — Toggle Button and Tests Summary
+
+**View toggle button with inline SVG added to TablosDashboard heading; data-view="grid" wired to #tablos-list; .view-toggle-btn CSS added; three LIST-01/02/03 integration tests passing compilation**
+
+## Performance
+
+- **Duration:** ~10 min
+- **Started:** 2026-05-17T17:15:00Z
+- **Completed:** 2026-05-17T17:25:00Z
+- **Tasks:** 2
+- **Files modified:** 4
+
+## Accomplishments
+
+- View toggle button added to `.overview-section-heading` inside a `<div class="flex items-center gap-2">` wrapper alongside "New tablo" button
+- Plain `<button type="button" class="view-toggle-btn">` with an inline SVG list icon (4-line "list" icon, 24×24 viewBox, stroke="currentColor")
+- onclick JS: `var el=document.getElementById('tablos-list');el.dataset.view=el.dataset.view==='list'?'grid':'list'` — no localStorage, resets on reload (D-03)
+- `data-view="grid"` static attribute on `<div id="tablos-list">` — CSS toggle rules added in Plan 02 use this attribute
+- `.view-toggle-btn` CSS block added as Section 20c in app.css: transparent background, border, 2rem square, hover state
+- `static/tailwind.css` rebuilt; `view-toggle-btn` class confirmed present
+- Three new test functions appended to `handlers_tablos_test.go`, each covering a distinct LIST requirement:
+  - `TestTablosDashboard_ProgressBar` (LIST-01): asserts "Progression:" label + `project-card-progress-row` class
+  - `TestTablosDashboard_ViewToggle` (LIST-02): asserts `view-toggle-btn` class + `data-view="grid"` attribute
+  - `TestTablosDashboard_StatusBadge` (LIST-03): asserts "Active" badge text + `tablo-list-row` class
+
+## Task Commits
+
+Each task was committed atomically:
+
+1. **Task 1: Add view toggle button to TablosDashboard + data-view attribute** — `3deb4f9` (feat)
+2. **Task 2: Add automated tests for LIST-01, LIST-02, LIST-03** — `1614378` (test)
+
+## Files Created/Modified
+
+- `backend/templates/tablos.templ` — toggle button + flex wrapper in heading; data-view="grid" on #tablos-list
+- `backend/internal/web/ui/app.css` — Section 20c .view-toggle-btn added
+- `backend/static/tailwind.css` — rebuilt to include view-toggle-btn
+- `backend/internal/web/handlers_tablos_test.go` — three new LIST-01/02/03 test functions appended
+
+## Decisions Made
+
+- Used plain `<button>` with inline SVG rather than `ui.IconButton` to avoid checking icon availability (plan guidance)
+- Wrapped toggle button and "New tablo" button in a `flex items-center gap-2` div to match heading layout
+- Test email addresses chosen to be globally unique across all existing tests in the file
+
+## Deviations from Plan
+
+None — plan executed exactly as written.
+
+## Known Stubs
+
+None — all rendered data flows from real DB queries.
+
+## Self-Check: PASSED
+
+- `backend/templates/tablos.templ` — `grep -c "view-toggle-btn"` = 1; `grep -c 'data-view="grid"'` = 1
+- `backend/internal/web/ui/app.css` — `grep -c "view-toggle-btn"` = 2 (selector + hover rule)
+- `backend/static/tailwind.css` — `grep -c "view-toggle-btn"` = 1
+- `backend/internal/web/handlers_tablos_test.go` — all three test functions present (confirmed by `grep "^func TestTablosDashboard_"`)
+- `go build ./...` — exits 0
+- `templ generate ./...` — exits 0 (0 updates, clean)
+
+---
+*Phase: 19-tablo-list-revamp*
+*Completed: 2026-05-17*