Components
Queue selector
Switch conversation lifecycle views while retaining product scope.
On this page
Purpose and composition
Switch conversation lifecycle views while retaining product scope.
Use for queues; Reference is a primary navigation view and is excluded from the current queue choices.
Anatomy
| Part | Responsibility |
|---|---|
| Summary | Active icon, label, count and chevron |
| Popup | Source links for each queue |
| Selection | Contrasting active item |
Configuration and variants
| Input / variant | Contract |
|---|---|
| items | id, label, icon, href, count |
| activeId | ConversationState; missing active falls back to first |
| Empty items | No menu rendered |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Collapsed | Current queue/count |
| Open | Absolute popup 8px below trigger |
| Active link | aria-current page |
| Navigation | Closes details before route change |
Interaction and responsive behavior
- Native details/summary provides toggle behavior.
- Outside pointerdown and Escape close the popup.
- Preserve trigger and popup in one screenshot crop.
- Links use scroll=false.
Accessibility contract
- Summary needs visible active label.
- Links expose the current page.
- Escape closes but this component does not explicitly restore focus.
Known implementation limits
It is a disclosure of navigation links, not a role=menu with roving focus.
Composition example
<QueueMenu items={queueItems} activeId="needs-reply" />Source references
| File | Responsibility |
|---|---|
| components/inbox/queue-menu.tsx | QueueMenu |
| lib/routes.ts | Scope-preserving paths |
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