docs(19-03): complete tablo list revamp plan 03 — toggle button and tests
Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Arthur Belleville
parent
161437828e
commit
2a835f52e9
1 changed files with 108 additions and 0 deletions
108
.planning/phases/19-tablo-list-revamp/19-03-SUMMARY.md
Normal file
108
.planning/phases/19-tablo-list-revamp/19-03-SUMMARY.md
Normal file
|
|
@ -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*
|
||||
Loading…
Reference in a new issue