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:
@@ -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.
|
||||
Reference in New Issue
Block a user