Components
App header and workspace navigation
Keep global search, product scope and message creation available above every work view.
On this page
Purpose and composition
Keep global search, product scope and message creation available above every work view.
Scope changes return to Needs reply. Keep primary navigation in this header; the legacy Sidebar source is not mounted in the current app.
Anatomy
| Part | Responsibility |
|---|---|
| Search | Left input with grouped results |
| Brand trigger | Centered native logo with expansion indicator |
| Primary action | New message, compact New on phones |
| Account | Owner avatar opens settings |
| Workspace menu | Views, unified inbox, company/product scope hierarchy |
Configuration and variants
| Input / variant | Contract |
|---|---|
| view/scope | Current view and route scope |
| people/conversations | Local authorized-looking records; actual auth remains pending |
| callbacks | View/scope/message/conversation/person navigation |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Collapsed | Header only |
| Navigation open | Centered overlay with scope tree |
| Search results | Grouped matches replace navigation overlay |
| Phone | Compact brand and labels; three-column layout retained |
Interaction and responsive behavior
- Opening navigation closes search and vice versa.
- Escape closes either overlay.
- Backdrop mousedown closes the active overlay.
- Scope counts include new-senders and needs-reply records.
Accessibility contract
- Brand button exposes aria-expanded/aria-controls.
- Search input has a hidden label.
- Overlay keyboard traversal and focus return need review.
Known implementation limits
Scope filtering is presentation, not access enforcement. Search currently examines all supplied records rather than limiting to scope.
Composition example
<AppHeader view={view} scope={scope} people={people} conversations={conversations} {...navigationCallbacks} />Source references
| File | Responsibility |
|---|---|
| components/app-header.tsx | Header, search and workspace overlay |
| components/helpdesk-app.tsx | Route callbacks |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0