Components
People list and relationship rows
Connect person identity to product relationships and responsibility.
On this page
Purpose and composition
Connect person identity to product relationships and responsibility.
Use the full profile for relationships beyond the row summary.
Anatomy
| Part | Responsibility |
|---|---|
| Identity | Name, avatar and email |
| Organization | Desktop context |
| Relationships | First two product relationships |
| Owner/follow-up | Desktop responsibility and date context |
| Creation | Add person dialog |
Configuration and variants
| Input / variant | Contract |
|---|---|
| people | Contact array; contact-spam excluded |
| onPersonOpen | Profile ID navigation |
| onPersonCreate | Local created Contact callback |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Desktop | Five-column grid at lg |
| Phone | Identity and relationships remain; other columns hide |
| Multiple relations | Only first two shown in row |
| Focus | Inset violet row ring |
Interaction and responsive behavior
- Rows are buttons that open a profile.
- Creation dialog remounts for a fresh record.
- No local list filtering, sorting or pagination controls exist.
Accessibility contract
- Native row button is keyboard actionable.
- Source is a CSS grid of buttons rather than a semantic data table.
Known implementation limits
No dedicated empty-list treatment or large-dataset pagination is implemented. Hidden phone metadata remains available only in profile context.
Composition example
<PeopleView people={people} onPersonOpen={openProfile} onPersonCreate={addPerson} />Source references
| File | Responsibility |
|---|---|
| components/views/people-view.tsx | PeopleView |
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