Components
Person and product-relationship editor
Keep a lightweight contact record with optional per-product customer/prospect context.
On this page
Purpose and composition
Keep a lightweight contact record with optional per-product customer/prospect context.
Use a keyed remount when switching edited people so draft state stays correct.
Anatomy
| Part | Responsibility |
|---|---|
| Fields | Name, organization, primary/additional email and owner |
| Product toggles | Relationship inclusion |
| Relationship fields | Kind, prospect stage and follow-up |
| Footer | Cancel, Add/Save person |
Configuration and variants
| Input / variant | Contract |
|---|---|
| person | Optional; seeds draft on mount |
| onSave | Returns normalized Contact |
| minimum gate | Nonblank name/email |
| defaults | First teammate owner; new violet avatar; No organization fallback |
States and feedback
| State | Visible / behavioral result |
|---|---|
| New | Blank contact draft |
| Existing | Preserves ID/color/Kit metadata |
| Product selected | Relationship controls appear |
| Customer | Stage select disabled |
| Prospect | Stage selectable |
Interaction and responsive behavior
- New IDs use Date.now; initials derive first/last words.
- Emails trim and lowercase.
- Only first additional email seeds the editor.
- Product relationship toggles remove or append local relation.
Accessibility contract
- Visible labels wrap controls.
- Product inclusion uses native checkbox.
- Follow-up field relies on placeholder instead of a dedicated visible label.
Known implementation limits
Simple presence checks do not validate deliverability or duplicate contacts. Saving may collapse multiple additional emails to one.
Composition example
<PersonEditorDialog open person={person} onClose={close} onSave={saveLocalPerson} />Source references
| File | Responsibility |
|---|---|
| components/views/person-editor-dialog.tsx | PersonEditorDialog |
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