Sonarist / Design system

Documentation v1.0.0 · Work in progress · UI prototype with separate server foundations

Design system contents

Components

Thread ownership and actions

Expose assignment, work type and lifecycle actions beside the conversation context.

On this page

Purpose and composition

Expose assignment, work type and lifecycle actions beside the conversation context.

Keep lifecycle and work type separate; closing does not change Support into General.

Anatomy

Anatomy
Part	Responsibility
Assign	Active teammate select
Type	Support/Sales/General select
Sales stage	Sales-only select
Follow-up	Sales-specific button
Lifecycle	Close, Reopen or Restore
More	Merge, junk/restore and details

Configuration and variants

Configuration and variants
Input / variant	Contract
onUpdate	Partial Conversation callback
state	Determines lifecycle action and composer availability
type	Shows sales controls
more menu	Native details, anchored right

States and feedback

States and feedback
State	Visible / behavioral result
Active	Composer available
Closed/junk	Read-only inactive explanation and reopen/restore
Sales	Stage and follow-up visible
Menu open	Contextual action list

Interaction and responsive behavior

Changes delegate to parent state handling.
Closing clears unread/waiting fields.
Changing state replaces the thread URL in HelpdeskApp.
Controls wrap on phones.

Accessibility contract

IconSelect supplies accessible names.
More summary has More conversation actions label.
Menu items are buttons, not a roving ARIA menu.

Known implementation limits

Assignment filters active users but is not authenticated permission enforcement.

Composition example

<ConversationDetail onUpdate={updates => updateConversation(id, updates)} {...props} />

Source references

Source references
File	Responsibility
components/inbox/conversation-detail.tsx	Toolbar and action disclosure

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.