Radarist project

Radarist / Design system

Documentation v0.1 · Product in progress

Design system contents

Components

Search results and filters

Find relevant work while preserving its type, completion state, and destination.

On this page

Purpose and usage

Find relevant work while preserving its type, completion state, and destination.

Use for cross-product discovery; agenda visibility filtering answers a different question.

Anatomy

Anatomy
PartContract
QuerySubmitted terms are split into words.
ResultTitle, detail, type icon and destination.
Type filterInbox, Project, Schedule, Space, Task.
Completion filterAll, completed, incomplete.

Variants and configuration

Variants and configuration
ConfigurationBehavior
initialQuerySeeds the starting search.
searchIndexTyped source results; each carries context and destination.

State coverage

State coverage
StateImplemented behavior
No querySearch entry/recent context.
MatchesEvery word matches the title/detail/type haystack.
FilteredType and completion filters narrow matches.
No matchesSource-defined no-results message.

Interaction and responsive behavior

  • Use the actual result type values rather than lowercased approximations.
  • Do not mix a missing completion value with an incomplete task.
  • Keep recent queries and the submitted query distinct from live draft text.

Accessibility contract

  • Search input needs a label and submit action.
  • Results remain links with useful text.
  • Review expanded filter menus and empty-state announcements.

Known gaps and readiness

The harness uses a local index. It does not benchmark live search, authorization filtering or large-result performance.

Composition example

<SearchWorkspace initialQuery="account"
  searchIndex={authorizedResults} />

Source references

Source references
FileResponsibility
app/components/search-workspace.tsxQuery and result composition
app/components/search-type-filter.tsxType choices
app/components/search-status-filter.tsxCompletion choice

Examples from the app

Actual Radarist components with fictional data. Captured at 2× resolution or higher. Select an image to inspect it full size.

Search · Screen · Light · Desktop · 2880 × 2000 px

Source audit: 2026-10-07 · Revision 0103e2549959 · Documentation v0.1