From 4a0b42052d849cb3a940cf55177e480a4e75f73c Mon Sep 17 00:00:00 2001 From: Arthur Belleville Date: Sun, 17 May 2026 16:31:28 +0200 Subject: [PATCH] docs(19-02): complete card visual revamp plan summary - TabloProjectCard rebuilt with status badge, avatar initial, progress bar - CSS Section 20b added: progress-row, list-row, data-view toggle rules - Tailwind regenerated --- .../19-tablo-list-revamp/19-02-SUMMARY.md | 101 ++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 .planning/phases/19-tablo-list-revamp/19-02-SUMMARY.md diff --git a/.planning/phases/19-tablo-list-revamp/19-02-SUMMARY.md b/.planning/phases/19-tablo-list-revamp/19-02-SUMMARY.md new file mode 100644 index 0000000..bf5d190 --- /dev/null +++ b/.planning/phases/19-tablo-list-revamp/19-02-SUMMARY.md @@ -0,0 +1,101 @@ +--- +phase: 19-tablo-list-revamp +plan: "02" +subsystem: frontend-templates +tags: [go, templ, htmx, tailwind, css, tablos, progress, status-badge] + +# Dependency graph +requires: + - phase: 19-tablo-list-revamp + plan: "01" + provides: TabloCardView.Progress int field and Tablo.Status string from sqlc +provides: + - Revamped TabloProjectCard matching production screenshot design + - Dual card+row HTML structure (article.tablo-card-wrapper with .project-card and .tablo-list-row siblings) + - Status badge top-left, delete button top-right, avatar initial, progress bar + - New CSS classes in app.css and regenerated tailwind.css +affects: [19-03] + +# Tech tracking +tech-stack: + added: [] + patterns: + - dual-element wrapper with display:contents — transparent to grid/flex layout + - title-case status via strings.ToUpper(s[:1]) + s[1:] (strings.Title is deprecated) + - project-card-progress-bar with var(--color-accent) override for dashboard cards (D-11) + +key-files: + created: [] + modified: + - backend/templates/tablos.templ + - backend/internal/web/ui/app.css + - backend/static/tailwind.css + +key-decisions: + - "Used display:contents on .tablo-card-wrapper so it is transparent to both grid and flex-column layouts (RESEARCH.md pitfall 4)" + - "Separate .project-card-progress-bar class overrides --project-color with var(--color-accent) per D-11" + - "Removed pencil/edit-title icon button from dashboard card — production screenshot shows delete only (top-right)" + - "Both card .tablo-delete-zone and list-row .tablo-delete-zone use identical HTMX attributes for consistency" + +# Metrics +duration: 10min +completed: 2026-05-17 +--- + +# Phase 19 Plan 02: Tablo List Revamp — Card Visual Revamp Summary + +**Rebuilt TabloProjectCard with status badge, avatar initial, progress bar, and dual card+row HTML; added CSS for progress row, list row, and data-view toggle; regenerated tailwind.css** + +## Performance + +- **Duration:** ~10 min +- **Started:** 2026-05-17T17:00:00Z +- **Completed:** 2026-05-17T17:10:00Z +- **Tasks:** 2 +- **Files modified:** 3 + +## Accomplishments + +- `TabloProjectCard` rebuilt to match production screenshot (ssidebar-header.png): status badge (top-left), delete button (top-right), colored avatar circle with initial letter, title, calendar icon + date, "Progression: X%" label + accent-colored progress bar +- Outer `article.tablo-card-wrapper` wraps both `.project-card` (grid view) and `.tablo-list-row` (list view) as siblings — single HTMX root element preserved for OOB swaps (RESEARCH.md pitfall 4) +- Added `strconv` and `strings` imports to `tablos.templ` for `strconv.Itoa(card.Progress)` and `strings.ToUpper` title-casing +- Status badge uses `ui.Badge` with `BadgeVariantPrimary` and title-cased DB value +- New CSS Section 20b in `app.css`: `.project-card-progress-row`, `.project-card-progress-label`, `.project-card-progress-bar` (accent color), `.tablo-card-wrapper` (display:contents), `.tablo-list-row`, `.tablo-list-row-title`, `.tablo-list-row-meta`, and `[data-view="list"]` toggle rules +- `static/tailwind.css` regenerated with all new class names + +## Task Commits + +Each task was committed atomically: + +1. **Task 1: Rebuild TabloProjectCard template with dual card+row output** — `4b254e9` (feat) +2. **Task 2: Add progress-row and list-row CSS to app.css, rebuild Tailwind** — `2b786e2` (feat) + +## Files Created/Modified + +- `backend/templates/tablos.templ` — TabloProjectCard rebuilt with dual structure, imports updated +- `backend/internal/web/ui/app.css` — Section 20b added after Section 20 +- `backend/static/tailwind.css` — Regenerated output containing all new class names + +## Decisions Made + +- `display:contents` on `.tablo-card-wrapper` makes the wrapper invisible to grid and flex layouts — children participate directly (no wrapper override needed when toggling data-view) +- Removed pencil/edit-title button from dashboard card (not in production screenshot); delete-only top-right layout matches design +- `.project-card-progress-bar` is a separate class from `.project-progress-bar` to allow `var(--color-accent)` override without touching the existing bar class used elsewhere + +## Deviations from Plan + +None — plan executed exactly as written. + +## Self-Check: PASSED + +- `backend/templates/tablos.templ` — exists and modified +- `backend/internal/web/ui/app.css` — contains `tablo-list-row` (4 occurrences), `project-card-progress-row` (1), `tablo-card-wrapper` (1) +- `backend/static/tailwind.css` — contains `tablo-list-row` (1) +- `go build ./...` — exits 0 +- `templ generate ./...` — exits 0 +- `grep -c "ui.Badge" backend/templates/tablos.templ` — returns 5 (2 in TabloProjectCard + existing in TabloDetailPage) +- `grep -c "project-card-progress-row" backend/templates/tablos.templ` — returns 1 + +--- +*Phase: 19-tablo-list-revamp* +*Completed: 2026-05-17*