Quick Launch — The card grid on the left/center showing clickable feature cards. Each card is a Feature that opens a sub-view via the Feature Loader.
Widget Stack — The right-hand panel containing individual Widgets (Date, Timer & Code, Lesson Stages, Learning Zones). Hidden on mobile (<md breakpoint).
Dot Menu — Glassmorphic dot-pill menu at the bottom of the Widget Stack. Controls widget visibility, compact mode, alignment, and Quick Launch visibility.
| Official Name | File | Description |
|---|---|---|
| Header | layout/header.tsx | Sticky top bar with logo, nav links, and utility controls |
| Content Area | layout/content-area.tsx | Constrained flex container holding Context Sidebar + Main Panel |
| Context Sidebar | layout/context-sidebar.tsx | Left sticky nav panel; collapsible; context-aware sections |
| Main Panel | layout/main-content.tsx | Right card panel; contains Page Title Area + page content |
| Page Title Area | layout/page-title-area.tsx | Collapsible signal-line header at top of Main Panel |
| Floating Footer | layout/floating-footer.tsx | Fixed bottom bar with Quick Launch button and version text |
| Focus Overlay | overlay/FocusOverlay.tsx | Full-screen modal overlay containing Quick Launch + Widget Stack |
| Focus Overlay Content | overlay/FocusOverlayContent.tsx | Inner content: Quick Launch grid (left) + Widget Stack (right) |
| Widget Stack | overlay/widgets/widget-stack.tsx | Right-hand panel in Focus Overlay containing classroom widgets |
| Dot Menu | overlay/widgets/widget-settings-menu.tsx | Glassmorphic dot-pill menu at bottom of Widget Stack |
| Logo | logo.tsx | Brand icon + text link in the Header |
| Theme Toggle | theme-toggle.tsx | Light/dark mode switch using resolvedTheme |
| Command Palette | layout/command-palette.tsx | Cmd+K global search overlay for page navigation |
| Hook | Provider | Key Values |
|---|---|---|
| useHeader() | Header Provider | isExpanded, toggleExpanded |
| useContextSidebar() | Context Sidebar Provider | isCollapsed, toggleCollapsed, isMobileOpen, toggleMobile |
| usePageTitle() | Page Title Provider | title, description, actions, setPageTitle() |
| useFocusOverlay() | Focus Overlay Provider | isOpen, toggleFocusOverlay, openFocusOverlay, closeFocusOverlay |
| Correct Term | Do NOT Use |
|---|---|
| Context Sidebar | sidebar, nav panel, side nav |
| Main Panel | main content, content panel |
| Focus Overlay | overlay, modal, popup, command panel |
| Quick Launch | quick access, card grid, launcher |
| Widget Stack | widget panel, widget sidebar, right panel |
| Dot Menu | settings menu, widget menu, pill menu |
| Floating Footer | bottom bar, toolbar, dock |
| Page Title Area | page header, title bar |
| Content Area | content wrapper, main area |
| Header | top bar, nav bar, menu bar |
| tenant | organisation (in code paths) |
max-w-7xl px-6 mx-auto
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.