Sonarist project

Sonarist / Design system

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

Design system contents

Patterns

Find and filter conversations

Use global search for discovery and queue filters for ownership and work-type decisions.

On this page

User goal

Use global search for discovery and queue filters for ownership and work-type decisions.

Workflow

Workflow
StepExpected behavior
1Type a meaningful subject, person, address or workspace name into global search.
2Choose a grouped result to open its source context.
3For queue work, open Filter and select Assignee and Work type.
4Read the active filter count and resulting queue totals.
5Clear filters when returning to the full scoped workload.

Decision and composition rules

  • Global search is substring matching across local supplied records.
  • Queue filtering happens before counts are derived.
  • Unassigned is a useful ownership state, not a missing product scope.

Edge cases and recovery

  • No-results text should retain query context.
  • Filter values are component-local and may reset on remount.
  • Mobile filter trigger naming needs correction before release.
  • Do not claim pagination, relevance ranking or live data search.

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/app-header.tsxSearch groups and limits
components/inbox/conversation-list.tsxFilter state and 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.

Global Search · Screen · Light · Desktop · Results · 2880 × 2000 px
Global Search · Screen · Light · Desktop · Empty · 2880 × 2000 px
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