Bill
2ebfb9d2ec
Specializations move from a 340px left rail to a horizontal 2-row chip grid at the top (drag L→R to rank). Each chip shows rank, spec-colored abbreviation tag matching the tags used in plans/schedule, full name on its own row, status glyph, and a micro credit bar. Hover/tap a chip to see full status, allocated/threshold credits, and contributing-courses breakdown in a popover. The right pane splits into two side-by-side columns on desktop: Top Plans (left) and Schedule (right), each scrolling independently. The search progress bar hoists into a global strip below the spec grid so it stays visible regardless of which column is scrolled. Schedule blocks render their course choices as a horizontal row of equal-width buttons (3-5 per set) instead of stacked rows. Pinned sets collapse to a single line with the course name inline next to the set title. Term headers (Spring/Summer/Fall) remain as section dividers. On mobile, the layout becomes a 3-tab segmented control (Specializations / Plans / Courses) with the search progress strip above the tabs. The previous floating MobileStatusBanner and MobileCourseBanner are dropped — tabs replace their navigation function.
40 lines
4.2 KiB
Markdown
40 lines
4.2 KiB
Markdown
## Why
|
||
|
||
On desktop the right pane stacks Top Plans on top of the Schedule, so when the search produces several plans they push the 12 elective-set blocks below the fold. Users lose their spatial sense of the schedule while exploring plans, and the schedule blocks themselves stack each course as a full-width row, which is wasteful of horizontal space and makes the page feel taller than it needs to be.
|
||
|
||
The specialization ranking sits in a 340px left rail and forces the rest of the page into a narrower right pane. Moving it to a horizontal strip at the top frees the full container width for the workspace below and matches the natural "reading order" of priority (left = highest).
|
||
|
||
## What Changes
|
||
|
||
- Desktop layout reflows from 2-column (specs | right pane) to a top spec strip + global progress bar + 2-column workspace (Top Plans | Schedule), each column scrolling independently.
|
||
- Specialization ranking becomes a single horizontal row of 15 compact chips (~70px each). Each chip shows rank, abbreviation, and a micro credit bar; full name, status word, allocated/threshold, and contributing-course breakdown move into a hover popover. Drag-to-reorder switches from `verticalListSortingStrategy` to `horizontalListSortingStrategy`.
|
||
- The search progress bar is hoisted out of `TopPlans` into a thin global strip below the spec band so it stays visible from both columns.
|
||
- Each elective-set block in the Schedule column renders its courses as a horizontal flex row of equal-width buttons (3–5 per set, depending on data) instead of stacked rows. Each button shows: info icon (top-left), recommended star (top-right when applicable), course name with line-clamp, and a bottom row of spec ceiling tags. Cancelled / already-selected / per-course-searching states keep their semantics, restyled into the button form.
|
||
- SPRING / SUMMER / FALL term headings remain as section dividers in the Schedule column.
|
||
- `CreditLegend` collapses into a `[▸ legend]` toggle in the spec strip header (it currently sits in the right pane, where it would be in the way under the new layout).
|
||
- Mobile (≤768px) layout is unchanged — vertical specialization list, stacked Top Plans + Schedule. The redesign is desktop-only.
|
||
|
||
## Capabilities
|
||
|
||
### New Capabilities
|
||
|
||
_None._
|
||
|
||
### Modified Capabilities
|
||
|
||
- `responsive-layout`: redefines the desktop arrangement as a top spec strip + hoisted progress bar + 2-column workspace (Top Plans | Schedule) with independent scrolling. Mobile and tablet behavior unchanged.
|
||
- `unified-specialization-panel`: adds a desktop-only horizontal-strip rendering with compact chips, hover popover for detail, and horizontal drag-to-reorder. Mobile keeps the existing vertical list.
|
||
- `unified-course-panel`: redesigns each non-pinned elective-set block on desktop to render courses as a horizontal flex row of buttons. Pinned-set rendering and mobile rendering unchanged.
|
||
|
||
## Impact
|
||
|
||
- `app/src/App.tsx` — restructure desktop layout: top spec strip, progress strip, 2-column grid for plans/schedule, each scrolling independently. Mobile branch untouched.
|
||
- `app/src/components/SpecializationRanking.tsx` — add desktop-strip variant: compact chip rendering, hover-popover detail with full name + status + numeric credits + allocation breakdown, switch dnd-kit strategy to `horizontalListSortingStrategy` on desktop. Keep vertical rendering on mobile.
|
||
- `app/src/components/TopPlans.tsx` — remove the inline progress bar and the "search complete / cap hit" status text; render only the plan list. The progress bar moves to a new component.
|
||
- New `app/src/components/SearchProgressStrip.tsx` (or inline in `App.tsx`) — renders the hoisted progress bar with the same `progress` and `loading` inputs `TopPlans` used today.
|
||
- `app/src/components/CourseSelection.tsx` — restyle the unpinned-set rendering: replace the column-of-rows with a flex row of buttons. Buttons absorb info-icon + recommended badge + course name + spec tag row + cancelled/selected/searching states. Pinned-set view unchanged.
|
||
- `app/src/components/CreditLegend.tsx` — consumed via the spec strip header toggle; component itself can stay as-is or be inlined.
|
||
- No solver, worker, or data-file changes.
|
||
- `app/vite.config.ts` — bump to `1.4.0`.
|
||
- `CHANGELOG.md` — release entry.
|