Add Filter Menu

Install

pnpm exec vegastack-design verify add-filter-menu

pnpm dlx shadcn@4.21.0 add @vegastack/add-filter-menu

Usage

import { AddFilterMenu } from "@/components/ui/add-filter-menu";

<AddFilterMenu
  fields={[
    {
      key: "priority",
      label: "Priority",
      icon: <Flag />,
      editor: (done) => <PriorityPicker onPick={done} />,
    },
    {
      key: "assignee",
      label: "Assignee",
      icon: <UserRound />,
      keywords: ["owner"],
    },
  ]}
  onPick={addFilter}
  ai={
    aiAvailable
      ? { onSubmit: (text) => applyAiFilter(listKey, text) }
      : undefined
  }
  onAdvanced={openFilterBuilder}
/>;

The popover opens on one input. Typing narrows the field list (by label and keywords); ↑ ↓ pick a field and Enter opens it. A field with an editor drills into it in the same popover, with a ‹ back header — never a second surface; a field without one calls onPick and closes (the host adds the chip, its editor open).

With ai, the input's placeholder becomes "Describe what you want, or pick a field" and leads with ✦, and the first item is "✦ Filter with AI: “…”". Enter on it — or Enter with no field matching exactly — calls ai.onSubmit(text). While it runs the input shows a spinner and the item reads "Working…". On success (added > 0) the popover closes and the page shows the chips and the FilterRow note; with nothing added, or when onSubmit rejects (a model error, a daily limit), the popover says so and the field list stays usable. Without ai there is no ✦ anywhere and nothing else changes, so the feature hides cleanly. The design system holds no AI: onSubmit is the page's own.

onAdvanced adds "Advanced filter…" at the foot, for a condition builder dialog. On a phone the popover is a bottom sheet with the input at its top.

AiFilterInput is the input line on its own — a borderless field on the surface's hairline row, ✦ or a magnifier, a spinner while pending — for a phone's filter sheet.

Anatomy

Examples

Without AI

The input line

API Reference

Field

AI

AiFilterInput

Accessibility

• The input is a combobox named "Filter" controlling a listbox of fields; aria-activedescendant follows the arrow keys, so focus stays in the input.
• The AI item and each field are options; a field that drills in shows a chevron.
• Results and errors appear in a polite status; the drill-in's back button is named "Back".

Do / Don't