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