Components
Conversation rows
Make a queue item understandable before opening its thread.
On this page
Purpose and composition
Make a queue item understandable before opening its thread.
Use within ConversationGroup; do not recreate its private helper as a second public component.
Anatomy
| Part | Responsibility |
|---|---|
| Identity | Avatar and person name |
| Subject/snippet | Primary issue and latest preview |
| Context | Product/inbox and work type |
| Attention | Waiting age or compact activity |
| Ownership | Assignee avatar or Unassigned badge |
Configuration and variants
| Input / variant | Contract |
|---|---|
| conversation | Typed record linked to fixture contact/inbox |
| unread | Bold versus semibold subject |
| queue | Needs reply uses waiting age; other queues use activity |
| review | Adds screening controls and changes row composition |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Read/unread | Subject weight distinction |
| Assigned/unassigned | Avatar or label |
| Hover/focus | Row surface and inner focus ring |
| Long content | Subject/snippet truncate |
Interaction and responsive behavior
- The primary button opens the thread.
- Review actions are separate controls outside that button.
- Desktop rows align horizontally; review actions stack on phones.
- Needs reply is sorted by numeric waiting age descending.
Accessibility contract
- Native button is keyboard actionable.
- Keep context in text; color alone cannot identify a product.
Known implementation limits
Compact time and waitingAge are fixture strings. Missing contacts may prevent a row from rendering; validate joined records before production use.
Composition example
<ConversationList scope={scope} conversations={records} queue="needs-reply" onSelect={open} onReviewSender={review} />Source references
| File | Responsibility |
|---|---|
| components/inbox/conversation-list.tsx | Internal ConversationGroup |
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