Browser extension UI overhaul and interaction redesign

[kleinpanic]

Problem

The browser extension popup works but the UI is barebones and the interaction flow is not intuitive for first-time users. The extension needs a proper UI overhaul with clear navigation, visual hierarchy, and consistent interaction patterns.

Reference

Current extension interaction exploration (messy, needs restructuring):
https://www.figma.com/board/w2McfEQkje3Jukd5bnhQ45/CS3704-Canvas-TUI-Keybinds-and-Web-Extension-Interactions

Goals

• Redesign the extension popup for clarity and usability
• Clear visual hierarchy: what am I looking at, what can I do, where do I go
• Consistent interaction patterns with the TUI where it makes sense (same mental model)
• Support for upcoming features: professor ratings, course detail drill-down
• Mobile-friendly responsive layout (the popup needs to work at narrow widths)
• Route all new features through the shared extension client/contract layer

Deliverables

• Audit current extension UI and identify friction points
• Design new popup layout with clear sections and navigation
• Implement the redesigned popup (HTML/CSS/JS)
• Add professor ratings section (using the RMP integration from PR Add Rate My Professor integration module #49)
• Add course detail drill-down view
• Ensure all data flows through extension-api.js and canvas-client.js
• Clean up the Figma board for extension interactions
• Test at narrow popup widths (300px-400px)

Acceptance criteria

• Popup is visually clean and easy to understand on first open
• Navigation between views (upcoming, courses, ratings) is clear
• Professor ratings are visible per course
• All new data access goes through the shared client layer
• Works well at standard extension popup sizes
• Figma interaction prototype reflects the final design

[kleinpanic]

Extension overhauled in Phase 8 plan 08-03: background.js routes all 14 host-routable MESSAGE_TYPES through native host first via routeViaHost() helper (with browser-fetch fallback). Native host extended with 4 new methods (getDashboardCards, getSyllabus, getAssignmentGroups, getSubmission). Details in docs/tui-architecture.md.