Sonarist project

Sonarist / Design system

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

Design system contents

Components

Global search results

Find conversations, people, teammates and workspace scopes from one field.

On this page

Purpose and composition

Find conversations, people, teammates and workspace scopes from one field.

Use for cross-product finding; the queue filter answers ownership/type questions.

Anatomy

Anatomy
PartResponsibility
QueryTrimmed lowercase string
GroupCategory heading
ResultIcon, title, secondary context and action

Configuration and variants

Configuration and variants
Input / variantContract
MatchingSubstring search across selected record fields
Limits5 conversations, 4 people, 4 teammates, 5 scopes
People exclusioncontact-spam omitted
DestinationConversation/person view, team view or scope selection

States and feedback

States and feedback
StateVisible / behavioral result
No queryNo result overlay
ResultsOnly nonempty groups rendered
No matchesExplicit query-specific empty message
SelectionClears query and closes results

Interaction and responsive behavior

  • Results are native buttons.
  • Opening a result delegates navigation to HelpdeskApp.
  • Team matches open the team view, not a per-member detail route.
  • Results panel scrolls within viewport height.

Accessibility contract

  • Input is labeled; result text supplies names.
  • No full combobox active-descendant or arrow-navigation model is implemented.

Known implementation limits

This is local substring search, not server search, authorization filtering, ranking or pagination.

Composition example

<AppHeader {...props} /> // search is internal to the shared header

Source references

Source references
FileResponsibility
components/app-header.tsxSearch matching and internal result groups

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

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