Header.jsx UI component

The sticky top bar. Always visible above the semester timeline. Contains the plan title, credit hour counters, and all primary controls: theme, zoom, plan management, cohort settings, PDF export, and the relationship legend.

Parent

ui/

Lines

~780

Context consumed

usePlanner() (nearly all state) + useTheme()

Local state

showQuickSet, showPlanMenu, showIO, showAppSettings (popover visibility)

Layout structure

graph TD H["Header (position: sticky, top: 0)"] H --> R1["Row 1: Plan title + SH counters + export PDF"] H --> R2["Row 2: Controls (theme, zoom, plans, cohort, settings, about)"] H --> R3["Row 3: Relationship legend (prereq/coreq/substitution line styles)"] H --> R4["Row 4: Co-op/grad conflict warning (conditional)"] R2 --> T["Theme cycler"] R2 --> V["Violation lines toggle"] R2 --> Z["Zoom controls"] R2 --> PL["Plan dropdown"] R2 --> IO["Import/Export JSON"] R2 --> COH["🎓 Cohort popup"] R2 --> SET["⚙ Settings popup"] R2 --> AB["ⓘ About"]

Popover controls

Cohort popup (showSettings)

Triggered by "🎓 Cohort". Contains entry/graduation semester + year pickers and the sticky-courses toggle. Hidden on phones.

Entry: Fall/Spring radio + ◀year▶ stepper
Graduation: Fall/Spring radio + ◀year▶ stepper
Validation: graduation ordinal must exceed entry ordinal
Summary: "Fall 2026 → Spring 2031 (~5 yrs)"
📌 Sticky: on/off toggle

Settings popup (showAppSettings)

Triggered by "⚙". On phone this also contains the Cohort picker (since the standalone cohort button is hidden). Contains toggles for display preferences, a theme cycler, and links.

Error lines — toggle showViolLines; when on, red prerequisite-order and corequisite-violation lines are always drawn across all placed courses
Continuation logo — toggle showContLogo (default on); when on, continuation rows for co-op/internship blocks show the company logo. Persisted as ncp-show-cont-logo
Collapse other credits — toggle collapseOtherCredits; controls whether the ≤2 SH section starts collapsed. Persisted as ncp-collapse-other-credits
Theme — cycles through available themes (light, dark, …)
LINKS — /dev opens the dev portal; /documentation opens this site. Both open in a new tab.

Plan management dropdown (showPlanMenu)

Opens on clicking the plan name. Lists all saved plans. Actions: New plan, switch to a plan, rename (inline edit), delete. Closes on any outside click.

Import/Export (showIO)

Export JSON: downloads current plan as plan-name.json
Import JSON: <input type="file"> → importPlanJSON(file)
Export PDF: calls exportReport() from planModel.js → opens print window
Copy as text: handleCopyHumanReadable() — builds a plain-text plan summary and copies to clipboard

Key functions

handleExport(e)

Assembles the gradInfo parameter (major path, NUPath coverage, done course keys, etc.) and calls exportReport() from planModel.js. This triggers the async PDF build and opens a new print window.

handleCopyHumanReadable()

Builds a human-readable text representation of the full plan (all semesters, courses per semester, co-ops, SH totals) and copies it to the clipboard via the Clipboard API. Useful for sharing in messages or emails.

cycleTheme(e)

Gets the current theme index in themeNames, increments modulo length, calls setThemeName(). The button displays a ← or theme name depending on viewport size.

YearStepper helper component

A small ◀year▶ widget defined at the bottom of Header.jsx. Props: year, canDec, canInc, onDec, onInc. Used in both the entry and graduation pickers.

Co-op/graduation conflict warning

If any co-op block overlaps the graduation semester (i.e., it starts before graduation but ends after it), Header renders a yellow warning banner below the controls row. The affected co-op names are listed. Computed by PlannerContext as coopGradConflicts.