Sonarist project

Sonarist / Design system

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

Design system contents

Patterns

Triage unfamiliar and active conversations

Decide which sender enters active work, then handle the oldest needs-reply conversations with enough context.

On this page

User goal

Decide which sender enters active work, then handle the oldest needs-reply conversations with enough context.

Workflow

Workflow
StepExpected behavior
1Open the unified inbox or an explicit company/product/inbox scope.
2Review the New senders group before the ordinary needs-reply rows.
3Open a sender review to read the message before choosing Approve sender, Reference only or Junk.
4Confirm the local decision state, then continue through Previous/Next if needed.
5Review needs-reply items ordered by waitingMinutes descending.
6Assign the conversation, read the latest message and choose the next action.

Decision and composition rules

  • New senders contribute to the Needs reply count.
  • Approval makes the thread needs-reply, unread and waiting now.
  • Reference keeps material outside active queues; Junk is a separate inactive state.
  • Sender review history remains represented by senderReview.

Edge cases and recovery

  • Empty scope and filtered-out records need different explanations.
  • Review navigation has disabled endpoints.
  • Source approval does not create a verified provider allowlist or contact relationship.
  • Toast feedback needs a persistent/announced counterpart before production.

Persistence boundary

The demonstrated frontend uses local React state or static fixtures. Read the readiness topic before connecting these actions to authenticated persistence. A visible toast, badge or timer is not a server acknowledgement.

Source references

Source references
FileResponsibility
components/helpdesk-app.tsxReview decisions and state
components/inbox/conversation-list.tsxPending group and sorted queue

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.

Inbox · Screen · Light · Desktop · 2880 × 2000 px
Sender Review · Screen · Light · Desktop · 2880 × 2000 px

Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0