Sonarist project

Sonarist / Design system

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

Design system contents

Components

Merge conversation decision

Choose a source thread and preview the consequence before combining it into a canonical thread.

On this page

Purpose and composition

Choose a source thread and preview the consequence before combining it into a canonical thread.

Use for related thread context; production must validate authorization and compatible contacts/routing.

Anatomy

Anatomy
PartResponsibility
Canonical contextTarget title, person and message count
OptionsOther non-junk threads; same person first
SelectionCheck marker and summary
FooterDisabled/enabled merge

Configuration and variants

Configuration and variants
Input / variantContract
conversationCanonical thread
conversationsPossible source threads
onMergeSource ID callback
onCloseResets selection when initiated internally

States and feedback

States and feedback
StateVisible / behavioral result
UnselectedMerge disabled
SelectedWarning names source and count
No eligibleEmpty list; no dedicated recovery component

Interaction and responsive behavior

  • Source excludes current ID and junk.
  • Local merge removes the source conversation and combines messages.
  • Same-person ranking is preference, not mandatory restriction.

Accessibility contract

  • Option buttons expose text but not aria-pressed or radio selection semantics.
  • Dialog naming follows the shared wrapper gap.

Known implementation limits

Local merge sorts sentAt display strings, which is not reliable chronological order. No undo or durable reconciliation is verified.

Composition example

<MergeDialog open={open} conversation={target} conversations={records} onClose={close} onMerge={mergeLocal} />

Source references

Source references
FileResponsibility
components/inbox/merge-dialog.tsxMergeDialog
components/helpdesk-app.tsxLocal merge behavior

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.

Merge · Component detail · Light · Desktop · 1152 × 1316 px
Merge · Component detail · Light · Desktop · Selected · 1152 × 1504 px

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