Bill Ballou
f8bab9ee33
- 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
32 lines
2.4 KiB
Markdown
32 lines
2.4 KiB
Markdown
## 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
|