Add legend component #22

🧠 Context

Explorer nodes are given a coloured border by year level — derived from the first digit of the course code (COMP 2401 → year 2). The colours render today, but nothing on screen tells the user what they mean. This ticket adds a small legend.

The legend may also contain information about different edges or gates in the future. For now, it'll just have info about the course node border colours.

The current mapping lives inline in src/components/CourseNode.tsx:

Keep the legend a self-contained overlay inside the Explorer view — not in the shared Header, which renders on both routes (a graph legend on the Planner would be meaningless).

Avoid drift

The year→colour mapping is currently hardcoded inside CourseNode. Don't re-hardcode the same colours in the legend — they'd silently drift apart the next time someone tweaks a colour. Extract the mapping into one shared place and have both CourseNode and the legend read from it, so a colour change updates both at once.

🛠️ Implementation Plan

1. Extract the year→colour mapping out of CourseNode.tsx into a small shared module (e.g. a YEAR_COLOURS constant or a yearColour(code) helper). Update CourseNode to use it — its appearance/behaviour must be unchanged.
2. Create a legend component (e.g. src/components/ExplorerLegend.tsx) that renders one labelled swatch per year level, reading the shared mapping (not re-hardcoded colours). Label them clearly, e.g. "Year 1 (1000-level)" … "Year 4 (4000-level)".
3. Render it as a collapsible overlay in the top-left of the Explorer graph area, positioned below the existing search bar overlay (ExplorerSearch, also top-left) so the two don't overlap — not in the shared Header. It starts expanded on load and can be collapsed and re-expanded via a toggle (e.g. a header row with a chevron), so users can get it out of the way without losing it.
   • Top-left (under the search) is the clear spot: the right edge is the full-height Course Detail Panel and the bottom-left is React Flow's Controls. Both overlays are absolutely positioned, so the legend stays put — the search results dropdown will just transiently overlay it while typing, which is fine.4. Style it to match the app: small, unobtrusive, readable on the light canvas.
4. Make sure it stays readable and doesn't break the layout on narrow screens.
5. Run pnpm dev to check it, then pnpm typecheck, pnpm lint, pnpm format, pnpm test.

✅ Acceptance Criteria

• A legend appears in the Explorer view (not the shared Header), mapping each node border colour to its year level
• The legend is collapsible — expanded on load, and collapses/re-expands via a toggle
• The legend's colours come from the same shared mapping CourseNode uses — no separately hardcoded duplicate that can drift
• CourseNode's appearance and behaviour are unchanged after the mapping is extracted
• The legend doesn't overlap the React Flow Controls and doesn't break the layout on narrow screens
• pnpm typecheck, pnpm lint, pnpm format:check, and pnpm test pass