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