Skip to content

fix(health): make +N more and the critical/warning pills interactive#37

Merged
exzvor merged 2 commits into
mainfrom
feat/34-health-ux
Jun 2, 2026
Merged

fix(health): make +N more and the critical/warning pills interactive#37
exzvor merged 2 commits into
mainfrom
feat/34-health-ux

Conversation

@exzvor

@exzvor exzvor commented Jun 2, 2026

Copy link
Copy Markdown
Owner

Summary

Reported via Habr (#34): on the Health dashboard the "+N more" indicator and the header "N critical / N warning" pills looked actionable but did nothing.

  • BloatCard's "+N more" is now a button that expands the list to all rows (and collapses again). Tone is still computed over all rows, so expanding never changes the card's severity.
  • The critical / warning header pills are now buttons that scroll to the first card of that severity and briefly flash it. Card roots carry data-card-tone (set in CardShell); DOM order matches the dashboard display order, so the first match is the first such card. The scroll respects prefers-reduced-motion. The "ok" pill stays a non-interactive label.

Related issue

Fixes #34

Tests

  • BloatCard.test: clicking "+N more" expands to all rows and collapses back. Also stubs window.localStorage (the runner doesn't expose it, which crashed any card test rendering ActionButton via isEasyMode) — fixes two pre-existing failures in that file.
  • HealthHeader.test: jumpToTone scrolls to + flashes the first card of the tone; no-op (no throw) when no such card exists.
  • Manual smoke — recommended: expand a truncated card; click a severity pill → it scrolls to + flashes the first matching card.

Self-verification

  • npm run typecheck / npm run lint clean (incl. design.css)
  • npm run test green (health: HealthHeader 10, BloatCard 5, CardShell 7)
  • DCO sign-off

Notes for reviewer

Scope: this targets exactly the two reported affordances. BloatCard is the only card that renders a "+N more" today; the other cards silently .slice() without an indicator — adding "+N more" to them is a separate enhancement (left out to keep this focused). The pill jump uses a data-card-tone DOM marker + scrollIntoView (no new store), and a transient .health-card-flash CSS pulse (static ring under reduced-motion). jumpToTone is exported only so it can be unit-tested without seeding the health store.

exzvor added 2 commits June 2, 2026 21:53
Reported via Habr (#34): on the Health dashboard the "+N more" indicator and
the "N critical / N warning" header pills looked actionable but did nothing.

- BloatCard's "+N more" is now a button that expands the list to all rows (and
  collapses again); tone is still computed over all rows so severity doesn't
  drift when expanding.
- The critical/warning header pills are now buttons that scroll to the first
  card of that severity and briefly flash it. Card roots carry data-card-tone
  (CardShell) and DOM order matches display order, so the first match is the
  first such card; the scroll respects prefers-reduced-motion.

Also stubs window.localStorage in BloatCard.test (the runner doesn't expose it,
which crashed any card test rendering ActionButton via isEasyMode) — fixes two
pre-existing failures in that file.

Fixes #34

Signed-off-by: exzvor <exzvor@gmail.com>
@exzvor exzvor merged commit 199f7d3 into main Jun 2, 2026
2 checks passed
@exzvor exzvor deleted the feat/34-health-ux branch June 2, 2026 19:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[bug] Health dashboard: "+N more" and critical/warning badges are not interactive

1 participant