Skip to content

feat(dashboard): one notice at a time — the banner priority slot - #177

Merged
kevintseng merged 2 commits into
mainfrom
feat/ux6-notice-slot
Aug 16, 2026
Merged

feat(dashboard): one notice at a time — the banner priority slot#177
kevintseng merged 2 commits into
mainfrom
feat/ux6-notice-slot

Conversation

@kevintseng

Copy link
Copy Markdown
Contributor

What

UX-6 of the work-topology arc (shrunk: the Analytics fold-in already shipped with the tab consolidation). The Doctor, Onboarding and Insights banners could stack three deep above the nav — three interruptions competing for the same glance. They now share a notice slot:

  • Each banner keeps deciding its own eligibility (an ineligible banner renders no DOM node) — no lifted state, no new coupling.
  • App orders them by priority: Doctor (broken install) > Onboarding (empty library) > Insights (pending proposals).
  • One stylesheet rule (.notice-slot > * ~ * { display: none; }) shows only the slot's first rendered child. display:none keeps the losers out of the accessibility tree as well as the viewport; the next in line surfaces the moment the winner is dismissed or its condition clears.

Verification

  • node scripts/run-tests-isolated.mjs → exit 0, 139 files / 2095 tests (net +3).
  • npm run verify:release → exit 0.
  • New tests/dashboard/notice-slot.test.tsx pins both halves of the mechanism (happy-dom cannot observe CSS cascade, so the rule is pinned at source): the Doctor > Onboarding > Insights DOM order with all three eligible at once, the next-in-line takeover when the doctor banner's dismissal signature matches, and the stylesheet rule itself.
  • Break-tests: swapping the App banner order → × renders all eligible banners … in order red; deleting the CSS rule → × the stylesheet hides every slot child after the first red; restored → 3/3 green.

…ority slot

Doctor, Onboarding and Insights banners could stack three deep above the
nav. They now share a notice slot: each banner still decides its own
eligibility (an ineligible banner renders no DOM), App orders them by
priority — Doctor (broken install) > Onboarding (empty library) >
Insights (pending proposals) — and one stylesheet rule shows only the
slot's first rendered child, keeping the losers out of the viewport AND
the accessibility tree until the winner clears. A dedicated test pins
both halves of the mechanism: the DOM priority order (including the
next-in-line takeover when the winner is dismissed) and the CSS rule
itself, which happy-dom cannot observe at runtime.
@kevintseng
kevintseng merged commit f1a539c into main Aug 16, 2026
13 checks passed
@kevintseng
kevintseng deleted the feat/ux6-notice-slot branch August 16, 2026 12:09
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.

1 participant