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
This commit is contained in:
23
openspec/changes/ui-improvements/specs/bulk-actions/spec.md
Normal file
23
openspec/changes/ui-improvements/specs/bulk-actions/spec.md
Normal file
@@ -0,0 +1,23 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Clear all course selections
|
||||
The course selection panel SHALL provide a "Clear All" button that resets all pinned course selections at once.
|
||||
|
||||
#### Scenario: Clear all with some pinned
|
||||
- **WHEN** at least one course is pinned and the user clicks "Clear All"
|
||||
- **THEN** all pinned courses SHALL be unpinned and every elective set SHALL return to the open state showing all course options
|
||||
|
||||
#### Scenario: Clear all button visibility
|
||||
- **WHEN** no courses are pinned
|
||||
- **THEN** the "Clear All" button SHALL not be visible
|
||||
|
||||
#### Scenario: Clear all button visible
|
||||
- **WHEN** at least one course is pinned
|
||||
- **THEN** the "Clear All" button SHALL be visible in the course selection panel header
|
||||
|
||||
### Requirement: State persistence after clear all
|
||||
After clearing all selections, the cleared state SHALL be persisted to localStorage like any other state change.
|
||||
|
||||
#### Scenario: Persistence
|
||||
- **WHEN** the user clicks "Clear All" and reloads the page
|
||||
- **THEN** all sets SHALL remain in the open (unpinned) state
|
||||
@@ -0,0 +1,30 @@
|
||||
## 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
|
||||
@@ -0,0 +1,23 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Mobile-first responsive layout
|
||||
The app SHALL adapt its layout to three viewport breakpoints: mobile (<640px), tablet (640–1024px), and desktop (>1024px). On mobile, all panels SHALL stack vertically in a single column. On tablet and desktop, the layout SHALL use two columns: specialization panel on the left and course panel on the right.
|
||||
|
||||
#### Scenario: Mobile viewport
|
||||
- **WHEN** the viewport width is less than 640px
|
||||
- **THEN** the layout SHALL display as a single column with the specialization panel above the course panel, both full-width
|
||||
|
||||
#### Scenario: Tablet viewport
|
||||
- **WHEN** the viewport width is between 640px and 1024px
|
||||
- **THEN** the layout SHALL display two columns: specialization panel (300px) on the left, course panel (remaining width) on the right
|
||||
|
||||
#### Scenario: Desktop viewport
|
||||
- **WHEN** the viewport width is greater than 1024px
|
||||
- **THEN** the layout SHALL display two columns with the same structure as tablet, with additional padding
|
||||
|
||||
### Requirement: Notification banners span full width
|
||||
Mode comparison and mutual exclusion warnings SHALL render as full-width banners above the main panel layout, not inside a specific column.
|
||||
|
||||
#### Scenario: Warning banner placement
|
||||
- **WHEN** a mutual exclusion warning or mode comparison banner is active
|
||||
- **THEN** the banner SHALL appear between the header/mode toggle and the main content panels, spanning the full container width
|
||||
@@ -0,0 +1,30 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Inline decision tree ceiling per course option
|
||||
When decision tree analysis is available for an open elective set, each course option button SHALL display its ceiling outcome (spec count and spec abbreviations) on the right side of the button.
|
||||
|
||||
#### Scenario: Ceiling data available
|
||||
- **WHEN** an open set has completed decision tree analysis and a course has a ceiling of 3 specs (BNK, FIN, LCM)
|
||||
- **THEN** the course button SHALL show the course name on the left and "3 specs (BNK, FIN, LCM)" on the right
|
||||
|
||||
#### Scenario: Ceiling data not yet available
|
||||
- **WHEN** an open set's decision tree analysis is still computing
|
||||
- **THEN** the course buttons SHALL render without ceiling data, and the set header SHALL show a subtle loading indicator
|
||||
|
||||
#### Scenario: Pinned set does not show ceiling
|
||||
- **WHEN** a set has a pinned course selection
|
||||
- **THEN** the set SHALL display the pinned course name without ceiling data (same as current behavior)
|
||||
|
||||
### Requirement: High impact indicator on set header
|
||||
When a set has high impact (variance > 0 in ceiling outcomes), the set header SHALL display a "high impact" indicator.
|
||||
|
||||
#### Scenario: High impact set
|
||||
- **WHEN** an open set's analysis shows impact > 0
|
||||
- **THEN** the set header SHALL display a "high impact" label next to the set name
|
||||
|
||||
### Requirement: No standalone decision tree section
|
||||
The standalone DecisionTree component at the bottom of the results dashboard SHALL be removed. All ceiling data SHALL be displayed inline within the course selection panel.
|
||||
|
||||
#### Scenario: All tree data inline
|
||||
- **WHEN** the user views the course selection panel
|
||||
- **THEN** there SHALL be no separate "Decision Tree" heading or section; all ceiling outcomes appear within their respective elective set cards
|
||||
@@ -0,0 +1,38 @@
|
||||
## ADDED Requirements
|
||||
|
||||
### Requirement: Specialization rows include credit progress
|
||||
Each specialization row in the ranking list SHALL display the credit progress bar and allocated/threshold credits alongside the rank, name, and status badge. The row layout SHALL be: reorder controls, rank number, name, credits (e.g. "7.5 / 9.0"), status badge, with a credit bar below.
|
||||
|
||||
#### Scenario: Row displays allocated credits and bar
|
||||
- **WHEN** a specialization has 7.5 allocated credits from pinned courses
|
||||
- **THEN** the row SHALL show "7.5 / 9.0" and a credit progress bar filled to 7.5/9.0
|
||||
|
||||
#### Scenario: Row displays zero credits
|
||||
- **WHEN** a specialization has no allocated credits
|
||||
- **THEN** the row SHALL show "0 / 9.0" and an empty credit progress bar with the 9-credit threshold marker visible
|
||||
|
||||
### Requirement: Expandable allocation breakdown
|
||||
Achieved specialization rows SHALL be tappable/clickable to expand and show the allocation breakdown (which courses contribute how many credits).
|
||||
|
||||
#### Scenario: Tap to expand achieved spec
|
||||
- **WHEN** a user taps an achieved specialization row
|
||||
- **THEN** the row SHALL expand to show a list of contributing courses and their credit amounts
|
||||
|
||||
#### Scenario: Tap to collapse
|
||||
- **WHEN** a user taps an already-expanded achieved specialization row
|
||||
- **THEN** the allocation breakdown SHALL collapse
|
||||
|
||||
#### Scenario: Non-achieved specs are not expandable
|
||||
- **WHEN** a user taps a specialization that is not achieved
|
||||
- **THEN** nothing SHALL happen (no expand/collapse)
|
||||
|
||||
### Requirement: Achievement summary
|
||||
The panel SHALL display a summary count above the ranking list showing how many specializations are currently achieved.
|
||||
|
||||
#### Scenario: Some achieved
|
||||
- **WHEN** 2 specializations are achieved
|
||||
- **THEN** the panel SHALL display "2 specializations achieved"
|
||||
|
||||
#### Scenario: None achieved
|
||||
- **WHEN** no specializations are achieved
|
||||
- **THEN** the panel SHALL display "No specializations achieved yet"
|
||||
Reference in New Issue
Block a user