emba-course-solver/openspec/changes/desktop-layout-redesign/proposal.md at 2ebfb9d2ec5ee796c3f7180919c42f4fee0402bd

Files

T

Bill 2ebfb9d2ec v1.4.0: Desktop layout redesign + mobile tabs

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.

2026-05-09 17:45:28 -04:00

4.2 KiB

Raw Blame History

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.

4.2 KiB Raw Blame History Unescape Escape

Why