emba-course-solver/openspec/changes/ui-improvements/proposal.md at main

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

2.4 KiB

Raw Permalink Blame History

Why

The current UI uses a fixed 3-column desktop layout that breaks on mobile/tablet. Key information is scattered: specialization ranking is separated from its progress indicators, course selection is disconnected from the decision tree that analyzes those choices, and there's no way to reset all selections at once. Users also lack context for what the credit bars and thresholds mean.

What Changes

Responsive layout: Replace fixed 3-column grid with a layout that stacks vertically on mobile and adapts to tablet/desktop widths
Unified specialization panel: Merge the specialization ranking list with the results dashboard so each row shows rank, name, status badge, and credit progress together in one place — no separate "Results" panel
Unified course panel: Merge course selection with the decision tree so each elective set shows its course options alongside the ceiling outcome for each choice (when available)
Clear all button: Add a "Clear All" action to reset all pinned course selections at once
Credit bar legend: Add a brief inline explanation of what the credit bars, thresholds, and status badges mean so new users understand the UI without external documentation

Capabilities

New Capabilities

responsive-layout: Mobile-first responsive layout that works across phone, tablet, and desktop viewports
unified-specialization-panel: Combined ranking + progress view where each specialization row shows rank position, drag/arrow reorder controls, status badge, and credit progress bar
unified-course-panel: Combined course selection + decision tree view where each elective set shows course options with their ceiling outcomes inline
bulk-actions: Clear-all button to reset all pinned course selections
credit-explainer: Inline legend/help text explaining credit bars, the 9-credit threshold, and status badge meanings

Modified Capabilities

Impact

App.tsx: Layout restructured from 3-column grid to responsive 2-panel (or stacked) layout
SpecializationRanking.tsx: Absorbs credit progress bars and status display from ResultsDashboard
CourseSelection.tsx: Absorbs decision tree ceiling data per elective set
ResultsDashboard.tsx: Removed or reduced to a thin wrapper — functionality distributed to other components
state/appState.ts: New clearAll action added to reducer
No dependency changes expected

2.4 KiB Raw Permalink Blame History

Why