← Components
Filter
The global filter-bar namespace, redesigned in c88 Phase 2: a display-only segmented bar of key/value pills (value has an in-place dropdown; key/operator only change via Config), a Config button (opens the legacy Manage modal, also reached by ADD to start adding a filter there), a dataset-view listbox, and the new contextual FilterTriggerBar.
Filterc88 Phase 2 redesign of the filter bar — an "Add Filter" pill in the empty state; populated state is one continuous segmented bar (an ADD trigger, each filter as a display-only FilterItem pill, and a trailing Filter button (was Config)) with a graphic-endcap placeholder standing in for hand-placed SVG art. The bar itself is display-only: key and operator are fixed per pill, only the value is editable in place. Adding a filter or changing its key/operator happens in the Config modal (FilterOldManage, unchanged) — the ADD trigger opens it and immediately starts its add-row flow; the Filter button just opens it. The timeframe is a permanent, non-removable `when:` column (a FilterItem with removable=false) last before Config whenever `timeframe` is on and `timeframeOptions` are given — the bar is then never in its empty state (design c92 timeframe-always); `timeframe=false` gives the plain "Add Filter" empty state. onlyTime mode stays dropped; the Config modal still includes its own timeframe row. Look (design c92, 2026-09-24): ADD is a grey-500 11 px label over a 24 px circle with a 1 px grey-400 ring and a 14 px accent plus (#4c99f8), baseline-aligned with the column labels; columns have a 24 px key row (grey-500 labels, not italic) over a white value row (slate #759ac0 values, accent chevrons), divided by stroke-strong hairlines; the Filter button is #2a62b2 text + gear on a #e3f0fe fill under a blank header cell. The three non-token hues are CSS vars on .qf-bar (scoped style, with dark-mode variants) so FilterItem inherits them.
FilterDatasetViewSelectorHeadless-UI listbox for switching the active dataset view (org context) — trigger row plus a dropdown of named options with a checkmark on the current selection and an optional "Manage" row at the bottom.
FilterItemc88 Phase 2 redesign of the filter pill — primarily a display element: a static key label + delete (x) on top, and a value row below that opens a closed dropdown over valSuggestions when clicked (key and operator are not editable here — change those in the Config modal). A slash-circle glyph prefixes the value for the neq ("not this") operator instead of Phase 1's "!=" text. Tag filters with no value read as "tag exists" and have no dropdown. `removable=false` drops the x for a column that is always in place — Filter uses it for the permanent `when:` timeframe pill (design c92 timeframe-always). Look (design c92, 2026-09-24): a 24 px key row (grey-500, medium, not italic; ✕ in content-subtle) over the value row (bold, var(--qf-value, #759ac0)) with the chevron in var(--qf-accent, #4c99f8) — the vars come from Filter's .qf-bar, with fallbacks for standalone use.
FilterNoMatchesThe "filtered to nothing" empty state (c92 todos-2026-09-23): a one-line message — "No {subject} match the current filter." — with a Clear filter button. Distinct from "no data yet": the data exists, the active filter hides all of it, and the state carries the way out.
FilterTriggerBarA segmented quick-filter bar for use in context (e.g. above a table), restyled in c92: a key segment whose chevron edge points into single-select value segments ("All" plus one per option), divided by hairlines. The key segment gets a caret and a key dropdown only when filterKeyDefs has more than one entry. Full-width and right-aligned by design — it sits over the right edge of whatever follows. Colours are provisional (legacy brand blue at opacity + stock slate-500), gathered in one TONE map inside the component ahead of joining the token set. The key segment shows no focus ring (c95).