Sonarist project

Sonarist / Design system

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

Design system contents

Components

Assignee and work-type filters

Narrow the queue while retaining visible scope and active filter count.

On this page

Purpose and composition

Narrow the queue while retaining visible scope and active filter count.

Use for local triage; do not rewrite the current product scope when filtering.

Anatomy

Anatomy
PartResponsibility
TriggerFilter icon, desktop label and active count
AssigneeAnyone, Unassigned, active teammates
Work typeAll work, Support, Sales, General
ResetClear filters

Configuration and variants

Configuration and variants
Input / variantContract
assigneeFilterLocal state; all default
typeFilterLocal state; all default
countsDerived from the filtered records
active countNumber of non-default filter dimensions

States and feedback

States and feedback
StateVisible / behavioral result
InactiveNeutral trigger; reset disabled
ActiveViolet trigger/count
Empty resultSource EmptyState
Open288px popup anchored right

Interaction and responsive behavior

  • Both filters apply before queue counts and visible rows.
  • Outside pointerdown closes; Escape also focuses summary.
  • On phones the label hides while the filter icon remains.

Accessibility contract

  • Source summary has no aria-label when its Filter text is hidden on phone.
  • Native selects retain keyboard behavior.
  • Review accessible trigger naming before release.

Known implementation limits

Filters are local component state and are not URL-persisted or saved preferences.

Composition example

<ConversationList {...props} /> // assignee/type filters are internal

Source references

Source references
FileResponsibility
components/inbox/conversation-list.tsxInternal filter details and derived counts

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.

Conversation Filter · Component detail · Light · Desktop · Open · 616 × 704 px
Empty Queue · Screen · Light · Desktop · 2880 × 2000 px

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