@spree/dashboard-core 6.0.0-rc.7 → 6.0.1

package/src/components/table-toolbar.tsx

@@ -37,7 +37,7 @@ import {
   XIcon,
 } from '@spree/dashboard-ui/icons'
 import { useQuery } from '@tanstack/react-query'
-import { Fragment, useCallback, useDeferredValue, useMemo, useState } from 'react'
+import { Fragment, type ReactNode, useCallback, useDeferredValue, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { getApiClient } from '../api-client'
 import { useAuth } from '../hooks/use-auth'
@@ -184,6 +184,8 @@ export function TableToolbar({
 }: TableToolbarProps) {
   const { t } = useTranslation()
   const [filterOpen, setFilterOpen] = useState(false)
+  // The rule the panel opens on when its chip is clicked; null opens the field list.
+  const [panelRule, setPanelRule] = useState<FilterRule | null>(null)
 
   const allCols = allColumns ?? columns
   // Memoize so `FilterPanel`'s `useMemo` deps stay stable across parent
@@ -226,6 +228,7 @@ export function TableToolbar({
     () => filterableColumns.filter((c) => !quickFilterKeys.has(c.key)),
     [filterableColumns, quickFilterKeys],
   )
+  const panelKeys = useMemo(() => new Set(panelColumns.map((c) => c.key)), [panelColumns])
   const chipFilters = useMemo(() => {
     const covered = new Set(
       quickFilterColumns.flatMap((c) =>
@@ -294,24 +297,43 @@ export function TableToolbar({
               className="hidden h-[2.125rem] w-[240px] bg-card text-sm lg:flex"
             />
 
-            {/* Reads as a verb rather than an icon: it is the way *in* to
-              everything the quick controls beside it don't cover, so it has to
-              look like an action and not a toggle. */}
+            {/* Icon only, like sort and columns: the quick controls beside it
+              already carry the row's words, and the tooltip names it. */}
             {/* Hidden when every filterable field already has a quick control:
               the button would open onto an empty list. */}
             {panelColumns.length > 0 && (
-              <Popover open={filterOpen} onOpenChange={setFilterOpen}>
-                <PopoverTrigger asChild>
-                  <Button variant="outline" size="sm" className="h-11 gap-1.5 lg:h-[2.125rem]">
-                    <ListFilter className="size-3.5" />
-                    {t('admin.components.table_toolbar.add_filter')}
-                  </Button>
-                </PopoverTrigger>
+              <Popover
+                open={filterOpen}
+                onOpenChange={(next) => {
+                  setFilterOpen(next)
+                  // Cleared on opening too: Apply closes the panel through
+                  // `open`, which does not call this, so the trigger is the
+                  // first chance to forget the chip that opened it last.
+                  setPanelRule(null)
+                }}
+              >
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        className="h-11 lg:h-[2.125rem]"
+                        aria-label={t('admin.components.table_toolbar.add_filter')}
+                      >
+                        <ListFilter className="size-4" />
+                      </Button>
+                    </PopoverTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent>{t('admin.components.table_toolbar.add_filter')}</TooltipContent>
+                </Tooltip>
                 {/* `min(480px, …)` rather than a flat 480px: the panel is wider
                   than a phone, so a fixed width runs its right edge and the
                   Apply button off the screen. */}
                 <PopoverContent align="start" className="w-[min(480px,calc(100vw-1rem))] p-0">
                   <FilterPanel
+                    key={panelRule?.id ?? ''}
+                    initialRule={panelRule}
                     columns={panelColumns}
                     filters={filters}
                     onApply={(f) => {
@@ -374,6 +396,14 @@ export function TableToolbar({
                 key={entry.key}
                 rules={entry.rules}
                 col={allCols.find((c) => c.key === entry.rules[0].field)}
+                onEdit={
+                  panelKeys.has(entry.rules[0].field)
+                    ? () => {
+                        setPanelRule(entry.rules[0])
+                        setFilterOpen(true)
+                      }
+                    : undefined
+                }
                 onRemove={() => {
                   const removing = new Set(entry.rules.map((r) => r.id))
                   onFiltersChange(filters.filter((f) => !removing.has(f.id)))
@@ -430,11 +460,14 @@ export function TableToolbar({
 function FilterChip({
   rules,
   col,
+  onEdit,
   onRemove,
 }: {
   /** Usually one rule; a bounded date range is two, shown as one chip. */
   rules: FilterRule[]
   col: ColumnDef | undefined
+  /** Reopens the filter panel on this field. Absent when the panel cannot edit it. */
+  onEdit?: () => void
   onRemove: () => void
 }) {
   const { t, i18n } = useTranslation()
@@ -465,6 +498,50 @@ function FilterChip({
   const opLabelKey = getOperatorLabelKey(col?.filterType ?? 'string', first.operator)
   const opLabel = opLabelKey ? t(opLabelKey) : first.operator
   const showValue = !noValueOperators.includes(first.operator)
+  // "Status Ready, Error" reads better than "Status is any of Ready, Error";
+  // every other operator, `not_in` included, still says what it does.
+  const showOperator = first.operator !== 'in'
+  const listedIds = ['in', 'not_in'].includes(first.operator) ? parseFilterIds(first.value) : []
+
+  const body = isRange ? (
+    // "1 Aug – 29 Aug 2026" rather than two chips of ISO bounds: the range
+    // is what was asked for, and it is read far more often than it is
+    // edited.
+    <span>
+      {formatDate(from)} – {formatDate(to)}
+    </span>
+  ) : (
+    <>
+      {showOperator && <span className="text-muted-foreground">{opLabel}</span>}
+      {showValue &&
+        (listedIds.length > 2 ? (
+          <span>{t('admin.components.table_toolbar.n_selected', { count: listedIds.length })}</span>
+        ) : col?.filterType === 'date' ? (
+          <span>{formatDate(first.value)}</span>
+        ) : col?.filterType === 'resource' && col.filterResource ? (
+          <ResourceFilterValue value={first.value} config={col.filterResource} />
+        ) : col?.filterType === 'tags' ? (
+          <span>{listedIds.join(', ')}</span>
+        ) : col?.filterType === 'locale' ? (
+          <span>
+            {listedIds.map((code, index) => (
+              <Fragment key={code}>
+                {index > 0 && ', '}
+                <LocaleLabel code={code} />
+              </Fragment>
+            ))}
+          </span>
+        ) : col?.filterType === 'enum' && col.filterOptions ? (
+          <span>
+            {parseFilterIds(first.value)
+              .map((v) => col.filterOptions?.find((o) => o.value === v)?.label ?? v)
+              .join(', ')}
+          </span>
+        ) : (
+          <span>{first.value}</span>
+        ))}
+    </>
+  )
 
   return (
     // Deliberately shaped like the quick-filter buttons beside it rather than
@@ -477,44 +554,21 @@ function FilterChip({
     // outlined controls reads as a different kind of object, when the only
     // real difference is that this one is set and they are not: the solid
     // border already says that, against the dashed one an unused control wears.
-    <span className="inline-flex h-11 shrink-0 items-center gap-1.5 rounded-md border border-border bg-card py-1 pr-1 pl-2.5 text-sm shadow-xs lg:h-[2.125rem]">
-      <span className="text-muted-foreground">{label}</span>
-      {isRange ? (
-        // "1 Aug – 29 Aug 2026" rather than two chips of ISO bounds: the range
-        // is what was asked for, and it is read far more often than it is
-        // edited.
-        <span>
-          {formatDate(from)} – {formatDate(to)}
-        </span>
+    <span className="inline-flex h-11 shrink-0 items-center gap-0.5 rounded-md border border-border bg-card pr-1 text-sm shadow-xs lg:h-[2.125rem]">
+      {onEdit ? (
+        <button
+          type="button"
+          className="inline-flex h-full items-center gap-1.5 rounded-l-md pl-2.5 pr-1 transition-colors hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
+          onClick={onEdit}
+        >
+          <span className="text-muted-foreground">{label}</span>
+          {body}
+        </button>
       ) : (
-        <>
-          <span className="text-muted-foreground">{opLabel}</span>
-          {showValue &&
-            (col?.filterType === 'date' ? (
-              <span>{formatDate(first.value)}</span>
-            ) : col?.filterType === 'resource' && col.filterResource ? (
-              <ResourceFilterValue value={first.value} config={col.filterResource} />
-            ) : col?.filterType === 'tags' ? (
-              <span>{parseFilterIds(first.value).join(', ')}</span>
-            ) : col?.filterType === 'locale' ? (
-              <span>
-                {parseFilterIds(first.value).map((code, index) => (
-                  <Fragment key={code}>
-                    {index > 0 && ', '}
-                    <LocaleLabel code={code} />
-                  </Fragment>
-                ))}
-              </span>
-            ) : col?.filterType === 'enum' && col.filterOptions ? (
-              <span>
-                {parseFilterIds(first.value)
-                  .map((v) => col.filterOptions?.find((o) => o.value === v)?.label ?? v)
-                  .join(', ')}
-              </span>
-            ) : (
-              <span>{first.value}</span>
-            ))}
-        </>
+        <span className="inline-flex items-center gap-1.5 pl-2.5 pr-1">
+          <span className="text-muted-foreground">{label}</span>
+          {body}
+        </span>
       )}
       {/* 20px box around a 12px glyph: the chip's own height caps how large
           this can be, and the chips are spaced by `gap-2`, which is what the
@@ -678,6 +732,85 @@ function quickFilterTriggerClass(unset: boolean) {
   return cn('h-11 gap-1.5 lg:h-[2.125rem]', unset && 'border-dashed')
 }
 
+/** "6/7" on a quick filter that narrows the list. */
+function SelectedCount({ selected, total }: { selected: number; total: number }) {
+  return (
+    <span className="rounded-full bg-muted px-1.5 py-px text-xs font-medium tabular-nums">
+      {selected}/{total}
+    </span>
+  )
+}
+
+/**
+ * Hover shortcut on a multi-select row: "Only" narrows to that value alone,
+ * and on the row that already is the only one, "Select all" widens back.
+ *
+ * Pointer-only and hidden from assistive technology: the row itself stays the
+ * control, and ticking or unticking the others reaches the same state.
+ */
+function RowAction({ label, onSelect }: { label: string; onSelect: () => void }) {
+  return (
+    <span
+      aria-hidden
+      data-slot="filter-row-action"
+      className="ml-auto shrink-0 cursor-pointer pl-3 text-xs text-muted-foreground opacity-0 transition-opacity hover:text-foreground group-hover/row:opacity-100 group-data-[highlighted]/checkbox-item:opacity-100"
+      // Stopped here so the row underneath does not also toggle.
+      onMouseUp={(event) => event.stopPropagation()}
+      onClick={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        onSelect()
+      }}
+    >
+      {label}
+    </span>
+  )
+}
+
+/**
+ * The menu rows shared by the enum and resource quick filters. `selected` is
+ * what the list currently shows, which is every value when nothing is set.
+ */
+function QuickFilterItems({
+  options,
+  selected,
+  dots,
+  onChange,
+}: {
+  options: { value: string; label: string }[]
+  selected: string[]
+  dots: boolean
+  onChange: (values: string[]) => void
+}) {
+  const { t } = useTranslation()
+  return options.map((option) => {
+    const checked = selected.includes(option.value)
+    const sole = checked && selected.length === 1
+    return (
+      <DropdownMenuCheckboxItem
+        key={option.value}
+        checked={checked}
+        onCheckedChange={(next) =>
+          onChange(next ? [...selected, option.value] : selected.filter((v) => v !== option.value))
+        }
+      >
+        {dots && <StatusDot status={option.value} />}
+        <span className="truncate">{option.label}</span>
+        {options.length > 1 && (
+          <RowAction
+            label={t(
+              sole
+                ? 'admin.components.table_toolbar.select_all'
+                : 'admin.components.table_toolbar.only',
+            )}
+            onSelect={() => onChange(sole ? options.map((o) => o.value) : [option.value])}
+          />
+        )}
+      </DropdownMenuCheckboxItem>
+    )
+  })
+}
+
 /**
  * Always-visible control for one heavily-used filter.
  *
@@ -746,28 +879,27 @@ function QuickEnumFilter({
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="sm" className={quickFilterTriggerClass(allSelected)}>
-          <span className="text-muted-foreground">{column.label}</span>
-          <span className="tabular-nums">
-            {allSelected ? t('admin.common.all') : `${selected.length}/${options.length}`}
+          {/* The colours of what is let through, so a narrowed status reads
+              at a glance without opening the menu. */}
+          <span aria-hidden className="flex -space-x-1">
+            {options
+              .filter((o) => selected.includes(o.value))
+              .slice(0, 4)
+              .map((o) => (
+                <StatusDot key={o.value} status={o.value} className="size-2.5 ring-2 ring-card" />
+              ))}
           </span>
+          <span className="text-muted-foreground">{column.label}</span>
+          {allSelected ? (
+            <span>{t('admin.common.all')}</span>
+          ) : (
+            <SelectedCount selected={selected.length} total={options.length} />
+          )}
           <ChevronDownIcon className="size-3.5 text-muted-foreground" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="min-w-52">
-        {options.map((option) => (
-          <DropdownMenuCheckboxItem
-            key={option.value}
-            checked={selected.includes(option.value)}
-            onCheckedChange={(checked) =>
-              apply(
-                checked ? [...selected, option.value] : selected.filter((v) => v !== option.value),
-              )
-            }
-          >
-            <StatusDot status={option.value} />
-            {option.label}
-          </DropdownMenuCheckboxItem>
-        ))}
+      <DropdownMenuContent align="start" className="min-w-56">
+        <QuickFilterItems options={options} selected={selected} dots onChange={apply} />
       </DropdownMenuContent>
     </DropdownMenu>
   )
@@ -837,11 +969,15 @@ function QuickResourceFilter({
   // No rule means no constraint, which is every option — not none.
   const active = selected.length > 0 ? selected : options.map((o) => o.value)
   const summary =
-    selected.length === 0
-      ? t('admin.common.all')
-      : selected.length === 1
-        ? (options.find((o) => o.value === selected[0])?.label ?? '1')
-        : `${selected.length}/${options.length}`
+    selected.length === 0 ? (
+      <span>{t('admin.common.all')}</span>
+    ) : selected.length === 1 ? (
+      <span className="max-w-40 truncate">
+        {options.find((o) => o.value === selected[0])?.label ?? '1'}
+      </span>
+    ) : (
+      <SelectedCount selected={selected.length} total={options.length} />
+    )
 
   return (
     <DropdownMenu>
@@ -852,22 +988,12 @@ function QuickResourceFilter({
           className={quickFilterTriggerClass(selected.length === 0)}
         >
           <span className="text-muted-foreground">{column.label}</span>
-          <span className="max-w-40 truncate">{summary}</span>
+          {summary}
           <ChevronDownIcon className="size-3.5 text-muted-foreground" />
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="min-w-52">
-        {options.map((option) => (
-          <DropdownMenuCheckboxItem
-            key={option.value}
-            checked={active.includes(option.value)}
-            onCheckedChange={(checked) =>
-              apply(checked ? [...active, option.value] : active.filter((v) => v !== option.value))
-            }
-          >
-            {option.label}
-          </DropdownMenuCheckboxItem>
-        ))}
+      <DropdownMenuContent align="start" className="min-w-56">
+        <QuickFilterItems options={options} selected={active} dots={false} onChange={apply} />
       </DropdownMenuContent>
     </DropdownMenu>
   )
@@ -1104,6 +1230,63 @@ function ColumnSelector({
 // ============================================================================
 // Filter Drawer
 // ============================================================================
+
+const panelRowClass =
+  'group/row flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50'
+
+/** One value in a multi-select list of the filter panel. */
+function CheckRow({
+  checked,
+  sole,
+  onToggle,
+  onOnly,
+  children,
+}: {
+  checked: boolean
+  /** The only value ticked — its "Only" would do nothing, so it offers none. */
+  sole: boolean
+  onToggle: () => void
+  onOnly: () => void
+  children: ReactNode
+}) {
+  const { t } = useTranslation()
+  return (
+    <button
+      type="button"
+      data-slot="filter-panel-item"
+      aria-pressed={checked}
+      className={panelRowClass}
+      onClick={onToggle}
+    >
+      <Checkbox checked={checked} tabIndex={-1} className="pointer-events-none" />
+      {children}
+      {!sole && <RowAction label={t('admin.components.table_toolbar.only')} onSelect={onOnly} />}
+    </button>
+  )
+}
+
+/** "Any Status": the row that clears this field, ticked while nothing is set. */
+function AnyRow({
+  label,
+  active,
+  onSelect,
+}: {
+  label: string
+  active: boolean
+  onSelect: () => void
+}) {
+  return (
+    <button
+      type="button"
+      data-slot="filter-panel-item"
+      className={cn(panelRowClass, 'justify-between')}
+      onClick={onSelect}
+    >
+      {label}
+      {active && <CheckIcon className="size-4 shrink-0" />}
+    </button>
+  )
+}
 /**
  * Inline, searchable, multi-select list of a filter's candidate values.
  *
@@ -1121,12 +1304,14 @@ function InlineValueList({
   query,
   selected,
   onToggle,
+  onOnly,
 }: {
   column: ColumnDef
   tenantId: string | undefined
   query: string
   selected: string[]
   onToggle: (value: string) => void
+  onOnly: (value: string) => void
 }) {
   const { t } = useTranslation()
   const { isAuthenticated } = useAuth()
@@ -1269,15 +1454,15 @@ function InlineValueList({
   return (
     <>
       {ordered.map((option) => (
-        <button
+        <CheckRow
           key={option.value}
-          type="button"
-          className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
-          onClick={() => onToggle(option.value)}
+          checked={selected.includes(option.value)}
+          sole={selected.length === 1 && selected[0] === option.value}
+          onToggle={() => onToggle(option.value)}
+          onOnly={() => onOnly(option.value)}
         >
-          <Checkbox checked={selected.includes(option.value)} className="pointer-events-none" />
           <span className="truncate">{option.label}</span>
-        </button>
+        </CheckRow>
       ))}
     </>
   )
@@ -1295,11 +1480,14 @@ function InlineValueList({
  * duplicated that list in a second place, in a different notation.
  */
 function FilterPanel({
+  initialRule = null,
   columns,
   filters,
   onApply,
   onChange,
 }: {
+  /** Open straight on this rule's field and value, as when its chip is clicked. */
+  initialRule?: FilterRule | null
   /** The fields with no quick control of their own. A field that has one is
    *  filtered there alone — its checkbox list already says "is" and "is not",
    *  so offering it here too only listed the same field twice. */
@@ -1314,10 +1502,39 @@ function FilterPanel({
   const tenantId = useTenantId()
   const store = useOptionalStore()
   const timezone = store?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone ?? 'UTC'
+  /**
+   * What picking a field starts from: the rule already set on it, so reopening
+   * a filter shows the values it is filtering by. Without this a list reads as
+   * empty, and the next tick would replace the existing set rather than extend
+   * it.
+   */
+  function seedFor(key: string | null, rule?: FilterRule | null) {
+    const col = columns.find((c) => c.key === key)
+    if (!col) return { operator: '', value: '', editing: null }
+    const ops = getOperators(col.filterType ?? 'string')
+    const editable = (f: FilterRule) =>
+      f.field === key && col.filterType !== 'date' && ops.some((o) => o.value === f.operator)
+    // The clicked chip's own rule first: a field can carry two typed rules,
+    // and editing "equals b" must not open on "contains a".
+    const applied =
+      (rule && editable(rule) ? rule : undefined) ??
+      filters.find((f) => f.field === key && f.operator === 'in') ??
+      filters.find(editable)
+    return {
+      operator: applied && applied.operator !== 'in' ? applied.operator : ops[0].value,
+      value: applied?.value ?? '',
+      // The typed rule being edited, replaced on Apply even if its operator
+      // changes — otherwise "contains a" edited to "equals b" keeps both.
+      editing: applied && applied.operator !== 'in' ? applied.id : null,
+    }
+  }
+  const [initial] = useState(() => seedFor(initialRule?.field ?? null, initialRule))
+
   // The field being built, or null while the field list is showing.
-  const [field, setField] = useState<string | null>(null)
-  const [operator, setOperator] = useState('')
-  const [value, setValue] = useState('')
+  const [field, setField] = useState<string | null>(initialRule?.field ?? null)
+  const [operator, setOperator] = useState(initial.operator)
+  const [value, setValue] = useState(initial.value)
+  const [editing, setEditing] = useState<string | null>(initial.editing)
   const [query, setQuery] = useState('')
   // Set once the user picks "custom" from the date presets, revealing the two
   // date fields. Kept separate from `value` so backing out of custom does not
@@ -1338,6 +1555,11 @@ function FilterPanel({
   // accumulate a set and need an explicit Apply; the single ones commit on the
   // click that picks them.
   const multi = type === 'tags' || type === 'resource' || type === 'currency' || type === 'locale'
+  // An enum is ticked like the others and sent as `in`. Not one backed by a
+  // Ransack scope: a scope takes the value as its argument, and most of them
+  // answer a yes-or-no question that a list of values would not fit.
+  const enumMulti = type === 'enum' && !column?.ransackScope
+  const checked = parseFilterIds(value)
   // Dates are their own shape: a list of relative presets, with the calendar
   // behind "custom". Same presets the quick filter offers, so a range means
   // the same thing wherever it was set.
@@ -1367,15 +1589,11 @@ function FilterPanel({
   }, [columns, query])
 
   function chooseField(key: string) {
-    const col = columns.find((c) => c.key === key)
-    const firstOperator = getOperators(col?.filterType ?? 'string')[0].value
+    const seed = seedFor(key)
     setField(key)
-    setOperator(firstOperator)
-    // Seed from what is already applied, so reopening a multi-select shows the
-    // values it is filtering by. Without this the list reads as empty and the
-    // next tick would replace the existing set rather than extend it.
-    const applied = filters.find((f) => f.field === key && f.operator === 'in')
-    setValue(applied?.value ?? '')
+    setOperator(seed.operator)
+    setValue(seed.value)
+    setEditing(seed.editing)
     setQuery('')
     setCustomRange(null)
   }
@@ -1387,6 +1605,7 @@ function FilterPanel({
     setField(null)
     setOperator('')
     setValue('')
+    setEditing(null)
     setQuery('')
     setCustomRange(null)
   }
@@ -1404,7 +1623,9 @@ function FilterPanel({
   function commit(nextValue: string, nextOperator = operator) {
     if (!field) return
     if (!noValueOperators.includes(nextOperator) && nextValue.trim() === '') return
-    const others = filters.filter((f) => !(f.field === field && f.operator === nextOperator))
+    const others = filters.filter(
+      (f) => !(f.field === field && f.operator === nextOperator) && f.id !== editing,
+    )
     onApply([
       ...others,
       { id: crypto.randomUUID(), field, operator: nextOperator, value: nextValue },
@@ -1436,15 +1657,18 @@ function FilterPanel({
    * unticking the last one removes it, rather than leaving an empty rule that
    * would match nothing.
    */
-  function toggleValue(option: string) {
+  function setValues(next: string[]) {
     if (!field) return
-    const current = parseFilterIds(value)
-    const next = current.includes(option)
-      ? current.filter((v) => v !== option)
-      : [...current, option]
     setValue(next.join(','))
+    // A reopened `status is active` is shown ticked, so the set that replaces
+    // it must replace that rule too, or the old `eq` keeps narrowing the list.
+    // Only for enums: a `not_in` tag rule is a separate constraint.
+    const replaced = enumMulti ? editing : null
+    setEditing(null)
 
-    const others = filters.filter((f) => !(f.field === field && f.operator === 'in'))
+    const others = filters.filter(
+      (f) => !(f.field === field && f.operator === 'in') && f.id !== replaced,
+    )
     onChange(
       next.length === 0
         ? others
@@ -1452,6 +1676,17 @@ function FilterPanel({
     )
   }
 
+  /** "Any …": no constraint on this field at all, `is not` rules included. */
+  function clearValues() {
+    setValue('')
+    setEditing(null)
+    onChange(filters.filter((f) => f.field !== field))
+  }
+
+  function toggleValue(option: string) {
+    setValues(checked.includes(option) ? checked.filter((v) => v !== option) : [...checked, option])
+  }
+
   return (
     // `rounded-xl` to match the popover, and `overflow-hidden` to enforce it:
     // the panel is mounted with `p-0`, so the header meets the popover's edge
@@ -1469,19 +1704,12 @@ function FilterPanel({
           size when it departs from it. */}
       <div className="flex items-stretch border-b text-base">
         {field ? (
-          // The field name is the way back, not a second picker. It used to
-          // open a dropdown over the value list underneath — a menu on top of
-          // the menu it was covering, offering the same fields the screen
-          // behind it was already showing. Clicking it now simply returns to
-          // that list, which is where changing subject was always going to
-          // end up.
+          // The field name is the way back to the field list.
           <button
             type="button"
             className="flex shrink-0 cursor-pointer items-center gap-1.5 rounded-none border-r px-3 py-2 font-medium transition-colors hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
             onClick={clearField}
           >
-            {/* Leads the label rather than trailing it: a back arrow points at
-                what it returns to, and after the word it pointed at nothing. */}
             <ChevronLeftIcon className="size-4 shrink-0 text-muted-foreground" />
             {column?.label ?? field}
           </button>
@@ -1544,13 +1772,39 @@ function FilterPanel({
             </button>
           ))}
 
-        {/* Stage two, list-shaped types: the values themselves, one click to
-            apply. No operator control — "is" is the only thing a list of
-            values can mean, and offering "is not" here would double the list's
-            length for a case the panel's other branch already covers. */}
+        {/* Stage two, list-shaped types: the values themselves, ticked and
+            applied as they go. No operator control — "is any of" is the only
+            thing a list of values can mean, and "is not" lives in the typed
+            branch below. */}
+        {field && (multi || enumMulti) && column && (
+          <AnyRow
+            label={t('admin.components.table_toolbar.any_field', { field: column.label })}
+            active={!filters.some((f) => f.field === field)}
+            onSelect={clearValues}
+          />
+        )}
+
+        {field &&
+          enumMulti &&
+          listOptions.map((option) => (
+            <CheckRow
+              key={option.value}
+              checked={checked.includes(option.value)}
+              sole={checked.length === 1 && checked[0] === option.value}
+              onToggle={() => toggleValue(option.value)}
+              onOnly={() => setValues([option.value])}
+            >
+              <StatusDot status={option.value} />
+              <span className="truncate">{option.label}</span>
+            </CheckRow>
+          ))}
+
+        {/* Booleans and scope-backed enums answer one question, so one click
+            picks the answer and closes. */}
         {field &&
           listed &&
           !multi &&
+          !enumMulti &&
           listOptions.map((option) => (
             <button
               key={option.value}
@@ -1576,8 +1830,9 @@ function FilterPanel({
             column={column}
             tenantId={tenantId}
             query={query}
-            selected={parseFilterIds(value)}
+            selected={checked}
             onToggle={toggleValue}
+            onOnly={(option) => setValues([option])}
           />
         )}
 
@@ -1602,7 +1857,14 @@ function FilterPanel({
               type="button"
               data-slot="filter-panel-item"
               className="flex w-full items-center justify-between gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
-              onClick={() => setCustomRange({ from: '', to: '' })}
+              // Seeded with the bounds applied, so editing one end keeps the other.
+              onClick={() =>
+                setCustomRange({
+                  from:
+                    filters.find((f) => f.field === field && f.operator === 'gteq')?.value ?? '',
+                  to: filters.find((f) => f.field === field && f.operator === 'lteq')?.value ?? '',
+                })
+              }
             >
               {t('admin.components.table_toolbar.date_presets.custom')}
               <ChevronRightIcon className="size-3.5 shrink-0 text-muted-foreground" />