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

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 Permalink 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 Permalink Blame History Unescape Escape

Why