emba-course-solver/openspec/changes/ui-improvements/specs/credit-explainer/spec.md at f8bab9ee3348c62cabffc28614730f1696dd0d9c

Files

Bill Ballou f8bab9ee33 UI improvements: responsive layout, unified panels, credit legend

- Add responsive 2-panel layout (mobile single-col, tablet/desktop grid)
- Unify specialization ranking with credit bars, status badges, and
  expandable allocation breakdowns (remove standalone ResultsDashboard)
- Inline decision tree ceiling data on course buttons with spec counts
- Add Clear All button to reset all course selections
- Add collapsible CreditLegend explaining bars, badges, and limits
- Extract ModeComparison and MutualExclusionWarnings to Notifications
- Add useMediaQuery hook with matchMedia-based breakpoint detection

2026-02-28 21:17:50 -05:00

1.5 KiB

Raw Blame History

ADDED Requirements

Requirement: Collapsible credit legend

The specialization panel SHALL include a collapsible "How to read this" section that explains the credit bars and status badges.

Scenario: Legend collapsed by default

WHEN the page loads
THEN the legend SHALL be collapsed, showing only a "How to read this" toggle link

Scenario: Expand legend

WHEN the user clicks "How to read this"
THEN the legend SHALL expand to show explanations of credit bar segments, the 9-credit threshold marker, and status badge meanings

Scenario: Collapse legend

WHEN the user clicks the toggle while the legend is expanded
THEN the legend SHALL collapse back to just the toggle link

Requirement: Legend content

The legend SHALL explain: the dark bar segment represents credits allocated from pinned courses, the light bar segment represents potential credits from open sets, the tick mark represents the 9-credit threshold required for a specialization, and the four status badges (Achieved, Achievable, Missing Req., Unreachable) with their meanings.

Scenario: Legend describes all elements

WHEN the legend is expanded
THEN it SHALL contain descriptions for: allocated credits bar, potential credits bar, threshold marker, and all four status badge types

Requirement: Legend state is not persisted

The legend expanded/collapsed state SHALL reset to collapsed on page reload.

Scenario: Reset on reload

WHEN the user expands the legend and reloads the page
THEN the legend SHALL be collapsed

1.5 KiB Raw Blame History