Rebuild onboarding and follow the system theme outside the account

[HarryRandall]

Summary

Theme

• Signed-out visitors follow their operating system's theme instead of being forced to light, and no longer inherit the last account's saved choice on a shared browser.
• Signed-in users keep their saved theme on every route, onboarding included. Sign-out already clears site storage.
• The landing page (/) stays light for now because it has no dark design yet and is being redesigned on another branch. Remove it from LIGHT_ONLY_PATHS in lib/theme.ts once that lands.
• Toasts now use the theme actually on screen. Previously next-themes' theme and resolvedTheme ignored forcedTheme, so signed-out visitors got dark toasts on light pages.
• The auth pages use theme colours instead of hard-coded greys, the landing mesh background has a dark version, and the global error page follows the saved theme.

Onboarding

• Four steps: name, start year, degree, study load. A progress bar sits above the questions and a live "Your plan" summary fills in beside them. Start year and study load are option cards; the degree list is searchable.
• The rules year now follows the year the student started, falling back to the closest published year with an explanation and a way to override it. The old formula catalogueYear - (yearOfStudy - 1) started continuing students' timelines years early.
• No degree is pre-selected. Focus moves to each step's heading, the name error actually shows (the browser's own validation used to block it), and the submit button stays busy until the plan page loads.
• The catalogue loader pages past PostgREST's 1,000-row max_rows limit and sends ID lists in batches of 200. readAllRows moves to lib/supabase/read-all-rows.ts.

Audit fixes

• Sign-in and sign-up keep focus on the submitted field and link errors to their fields. A password mismatch focuses the confirmation field. The "confirm your email" notice is no longer styled as an error. The signup heading reads "Create your account".
• The course drawer's Completed and Failed buttons are readable in dark mode and expose aria-pressed. notify gains an error tone, and failures now use it.
• Requirements and Key dates use the shared line tabs; OutlinedTabsList is removed. Floors on a route say so in text, not only with a colour dot. The usage preview drops its own width limit.
• Profile and AppState move into lib/coursemap/types.ts, so lib/ no longer imports from app/. The student-number check is shared. Removing a course now refreshes the plan page.

Not in this PR (flagged by the audit, needing a decision):

• Deleting the unused requisite graph and the @xyflow/react dependency.
• Saving permission approvals, which currently live only in client state.
• Mapping raw database errors to readable copy.
• Removing unused exports and CSS.

Verification

• pnpm verify: formatting, lint, types, 95 unit and component test files, the production build, 8 anonymous access Playwright tests and git diff --check, all run locally in an isolated worktree.
• Browser smoke test, when behaviour changed. Not run. The authenticated onboarding flow needs a dedicated local Supabase stack, which I didn't start while another task was using the shared one. Component tests cover the onboarding flow, validation, focus and save failure. Please check onboarding and the login and signup pages in light and dark mode at desktop and phone widths.
• Supabase migration, generated types and adviser checks, when data changed. Not applicable: no schema changes.

New tests: commencement.test.ts, onboarding-form.test.tsx and onboarding-catalogue.test.ts, which covers pagination and batch size. theme.test.ts is rewritten for the new rules. A test that only matched onboarding source text was replaced with the behavioural loader test.

Deployment notes

None.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
coursemap	Building	Preview	Sep 23, 2026 12:58am UTC