Components
App shell and contextual help
Keep global navigation, the current workspace, and explanatory help in a consistent page composition.
On this page
Purpose and usage
Keep global navigation, the current workspace, and explanatory help in a consistent page composition.
Use for the application’s top-level destinations; project-internal navigation belongs to ProjectSectionMenu.
Anatomy
| Part | Contract |
|---|---|
| Header | Radar, Inbox, Waiting, Projects, Spaces, Schedules, Archive; live counts come from a nav API. |
| Page hero | Centered title and a separately labeled help trigger. |
| Workspace | A bounded content region appropriate to the task. |
| Footer | Supporting navigation beneath the task area. |
Variants and configuration
| Configuration | Behavior |
|---|---|
| PageHero | title and help {description, icon, points} are required. |
| Header search | Desktop and small-screen arrangements share a submitted query. |
State coverage
| State | Implemented behavior |
|---|---|
| Active route | Navigation is derived from usePathname. |
| Menu open | Local state; outside pointer and Escape close it. |
| Navigation count unavailable | Account falls back to Account; counts remain absent/zero until loaded. |
Interaction and responsive behavior
- Compose existing shell components around the workspace rather than cloning the navigation.
- Pass factual, task-specific help content; placeholder help in a capture fixture is not a shipping copy decision.
- Test collapsed navigation and search at narrow widths.
Accessibility contract
- Name icon-only controls and expose expanded state.
- Preserve a main landmark and one clear page heading.
- Verify focus return after closing search or menu surfaces.
Known gaps and readiness
Navigation fixtures verify presentation, not account authorization or live counts. Header search and all overlay focus paths still require a full assistive-technology pass.
Composition example
<AppHeader />
<main>
<PageHero title="Projects" help={projectHelp} />
<ProjectsWorkspace cards={cards} />
</main>
<AppFooter />Source references
| File | Responsibility |
|---|---|
| app/components/app-header.tsx | Global navigation, account, search, theme |
| app/components/app-footer.tsx | Supporting footer |
| app/components/page-hero.tsx | Page title and help trigger |
| app/components/new-item-help.tsx | Contextual help surface |
| app/components/sticky-day-bar.tsx | Compact daily controls |
Examples from the app
Actual Radarist components with fictional data. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision 0103e2549959 · Documentation v0.1