feat(insights): collapsible Alert categories + Watch list accordions

The PM Insights "Alert categories" and "Watch list" sections are now
accordions: each heading is a button (chevron + category-count badge,
aria-expanded/aria-controls) that collapses/expands its card grid. Both
default open; the per-card ticket expand and the Per-PM roll-up table
are unchanged.

- Section accordion component + sections state in Insights/index.tsx
- ChevronIcon that rotates with the section's open state
- .grid[hidden] rule so a collapsed grid actually hides (beats .grid
  on specificity + source order)
- bump 2.3.0 -> 2.3.1 (root + client), CHANGELOG [2.3.1]
- engineer artifact + INDEX line; verifier-log PASS entry

verifier PASS (verifier-log 2026-08-29 12:07): reproduced tsc + vite
build; confirmed the [hidden] collapse in the compiled CSS; no
per-card regression; no new dependency.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VEsaHQx8cXr1hFrKU42UK6
This commit is contained in:
Dmytro Tkachenko
2026-08-29 12:09:36 +03:00
parent 28d817ebe9
commit 3de14164fc
9 changed files with 112 additions and 10 deletions
@@ -0,0 +1,31 @@
# engineer — PM Insights: Alert categories + Watch list as accordions
**Date:** 2026-08-29 · v2.3.1 · branch `feature/insights-accordions`
## Built
- **Client** (`pages/Insights/index.tsx`): new `Section({title, count, open, onToggle, children})`
accordion — a `<button className={sectionHead} aria-expanded aria-controls>` (chevron + title +
a category-count badge) over a `<div id={bodyId} className={grid} hidden={!open}>`. The two
sections **Alert categories** and **Watch list** are wrapped in it. Added `sections` state
(`{alerts, watch}`, both default **open**) + `toggleSection`. The per-card `open` state (which
ticket group is expanded) and the **Per-PM roll-up** table are untouched — Per-PM stays a plain
`<h2>` (not requested).
- **Icons** (`components/icons/index.tsx`): added `ChevronIcon` (right caret, shared `base()`
pattern), rotated 90° via CSS when its section is open.
- **Styles** (`Insights.module.scss`): `.section` / `.sectionHead` / `.chev` / `.sectionTitle` /
`.sectionCount` reusing the old `.h2` typographic treatment; `.sectionHead[aria-expanded='true']
.chev { transform: rotate(90deg) }`; and `.grid[hidden] { display: none }` — required, since
`.grid { display: grid }` would otherwise beat the native `hidden` attribute (specificity 0,2,0
vs 0,1,0).
- **Version/docs**: root + client `package.json` 2.3.0 → 2.3.1; CHANGELOG `[2.3.1]`.
## Verified
- client `tsc --noEmit` clean (no errors outside node_modules); `vite build` OK (139 modules).
- **verifier PASS** (see `verifier-log.md` 2026-08-29 12:07): independently reproduced tsc + build;
grepped the compiled bundle to confirm `._grid…[hidden]{display:none}` co-exists with
`._grid…{display:grid}` and wins on specificity **and** source order; `aria-controls` always
resolves (body is `hidden`, not unmounted); slugs `insights-alert-categories` /
`insights-watch-list` are distinct; per-card expand byte-for-byte unchanged → no regression;
no `package.json` dep change.
## Next: done.