@multiplatform.one/backoffice 7.34.3 → 7.35.0

package/src/list/DoctypeListScreen.tsx

@@ -9,6 +9,7 @@
 import React from "react";
 import {
   AsyncBoundary,
+  Chip,
   EmptyState,
   H1,
   PageHeader,
@@ -17,14 +18,13 @@ import {
   Spinner,
   XStack,
   YStack,
-  isWeb,
   notify,
 } from "@multiplatform.one/components";
 import { useLayoutSizeClass, useResolvedKnobs } from "@multiplatform.one/theme";
 // Catalog action Button — `accent` renders the active accent intent, the
 // house expression of the one page primary (LC-05 ONE-EMPHASIS; quick entry
 // "Create" precedent). The components Button above stays for neutral chrome.
-import { Button as ActionButton } from "@multiplatform.one/forms";
+import { Button as ActionButton, SearchInput } from "@multiplatform.one/forms";
 import {
   ArrowSquareOutIcon,
   ArrowsClockwiseIcon,
@@ -35,13 +35,11 @@ import {
   FrappeTable,
   buildListColumns,
   docFieldsToFilterFields,
-  isPermissionError,
   listFieldsToFetch,
   refusalReason,
   sessionDocRights,
   useFrappeAggregate,
   useFrappeConfig,
-  useRecordShape,
   type ListDoc,
   type ListRow,
 } from "@multiplatform.one/frappe-ui";
@@ -74,8 +72,9 @@ import { useRecentVisit } from "../shared/useRecentVisit";
 // via the UI-free fieldPermissions module; drives list column pruning.
 import { buildPermLevelMatrix } from "../form/fieldPermissions";
 import type { FrappeFilters } from "../shared/types";
-import { type DoctypeMeta, useDoctypeMeta } from "../shared/useDoctypeMeta";
+import { type DoctypeMeta } from "../shared/useDoctypeMeta";
 import { deriveAvailableViews } from "../views/viewAvailability";
+import { useViewSource } from "../views/viewMeta";
 import { ViewSwitcherMenu } from "../views/ViewSwitcherMenu";
 import { useFrappeApp } from "../shared/useFrappeApp";
 import { useUserRoles } from "../shared/useUserRoles";
@@ -93,7 +92,10 @@ import {
 } from "./filterConversion";
 import { toggleFacetFilter } from "./sidebar-stats";
 import { ListFilterBar } from "./ListFilterBar";
+import { ListToolsButton } from "./list-tools-sheet";
+import { SortControl } from "./filter-sort";
 import { ListSidebar } from "./ListSidebar";
+import { useShellSidebarPanel } from "../shell/shellSidebarSlot";
 import {
   parseFiltersParam,
   parseSortParam,
@@ -218,28 +220,14 @@ export function DoctypeListScreen({
   useRecentVisit(fixtureMode ? undefined : { label: doctype, path: paths.list(doctype) });
 
   const {
-    meta: loadedMeta,
+    meta,
     loading: metaLoading,
     error: metaError,
     reload: reloadMeta,
-  } = useDoctypeMeta(metaOverride ? undefined : doctype);
-  const meta = metaOverride ?? loadedMeta;
-  // Guest is refused getdoctype while it may still read the rows (LC-96):
-  // the list then lays them out from one record's own fields, read-only, and
-  // offers nothing that needs the meta.
-  const metaRefused = !meta && metaError !== undefined && isPermissionError(metaError);
-  const recordShape = useRecordShape(config, doctype, metaRefused);
-  const layoutMeta = useMemo<DoctypeMeta | undefined>(
-    () =>
-      meta ??
-      (recordShape.fields
-        ? {
-            name: doctype,
-            fields: recordShape.fields.map((field) => ({ ...field, in_list_view: 1 as const })),
-          }
-        : undefined),
-    [meta, recordShape.fields, doctype],
-  );
+    metaRefused,
+    recordShape,
+    layoutMeta,
+  } = useViewSource(doctype, metaOverride);
 
   // Operational errors reach the host bus (never replaces the inline state).
   useEffect(() => {
@@ -287,6 +275,11 @@ export function DoctypeListScreen({
   const [quickEntryOpen, setQuickEntryOpen] = useState(false);
   const [pendingDialog, setPendingDialog] = useState<PendingDialog>(null);
   const [likeOverrides, setLikeOverrides] = useState<Record<string, boolean>>({});
+  // Compact search box: one `like` tuple on the title field (desk's ID
+  // search), riding the hidden always-ANDed channel so it never becomes a
+  // chip or a `?f=` entry.
+  const [searchText, setSearchText] = useState("");
+  const [loadedCount, setLoadedCount] = useState(0);
   // Last page size the user picked — survives the filter/sort remounts.
   const pageSizeRef = useRef(pageSize ?? PAGE_SIZES[0]);
 
@@ -295,7 +288,13 @@ export function DoctypeListScreen({
   // value-keyed so unstable array literals from the host don't churn.
   // The ambient desk scope (GL-5, the tenant seam) joins the same channel.
   const deskScope = useDeskScope();
-  const fixedFiltersKey = JSON.stringify([...deskScope, ...(fixedFilters ?? [])]);
+  const searchTerm = searchText.trim();
+  const searchField = meta?.title_field || "name";
+  const fixedFiltersKey = JSON.stringify([
+    ...deskScope,
+    ...(fixedFilters ?? []),
+    ...(searchTerm ? [[searchField, "like", `%${searchTerm}%`]] : []),
+  ]);
   const fixedTuples = useMemo(
     () => JSON.parse(fixedFiltersKey) as FrappeFilters,
     [fixedFiltersKey],
@@ -365,6 +364,7 @@ export function DoctypeListScreen({
     if (doctypeChanged) {
       setSort(parseSortParam(sortParam) ?? null);
       setLikeOverrides({});
+      setSearchText("");
       return;
     }
     if (sortParamChanged) {
@@ -375,6 +375,15 @@ export function DoctypeListScreen({
     }
   }, [doctype, filtersParam, sortParam, withFixed]);
 
+  // A new search term re-seeds the count/facet mirror right away instead of
+  // waiting for the table's next state echo.
+  const lastSearchTerm = useRef(searchTerm);
+  useEffect(() => {
+    if (lastSearchTerm.current === searchTerm) return;
+    lastSearchTerm.current = searchTerm;
+    setEffectiveFilters(withFixed(baseFiltersRef.current));
+  }, [searchTerm, withFixed]);
+
   const sortField = sort?.field ?? meta?.sort_field ?? "modified";
   const sortOrder = sort?.order ?? (meta?.sort_order?.toUpperCase() === "ASC" ? "asc" : "desc");
   // Effective sort as the table sees it (state ?? meta default) — the
@@ -500,6 +509,8 @@ export function DoctypeListScreen({
           .map((row) => (row as { name?: unknown }).name)
           .filter((value): value is string => typeof value === "string" && value.length > 0),
       );
+      const shown = state.data?.length ?? 0;
+      if (shown > 0) setLoadedCount((previous) => (previous === shown ? previous : shown));
       const nextFilters = tableStateToFrappeFilters(state);
       setEffectiveFilters((previous) =>
         previous && sameFilters(previous, nextFilters) ? previous : nextFilters,
@@ -816,18 +827,28 @@ export function DoctypeListScreen({
   // Selection + the bulk bar ride the bulkActions capability as one unit.
   const bulkActionsEnabled = capabilities.bulkActions.enabled && !metaRefused;
 
-  // View switcher options: meta-derived availability (viewAvailability.ts
-  // documents each view's desk precondition) ∩ capability allowlist ∩ the
-  // `views` prop. "list" is the current view, so it always survives.
   const availableViews = useMemo(() => {
     if (!capabilities.views.enabled) return [];
-    const permitted = viewsAllowlist
+    const allow = viewsAllowlist
       ? capabilities.views.allow.filter((view) => viewsAllowlist.includes(view))
       : capabilities.views.allow;
-    // Without meta only the report lays itself out from the rows (LC-96).
-    const allow = metaRefused ? permitted.filter((view) => view === "report") : permitted;
-    return deriveAvailableViews(meta, { current: "list", allow });
-  }, [meta, metaRefused, capabilities.views.enabled, capabilities.views.allow, viewsAllowlist]);
+    return deriveAvailableViews(
+      meta
+        ? { kind: "meta", meta, rights }
+        : metaRefused && recordShape.fields
+          ? { kind: "record", fields: recordShape.fields }
+          : undefined,
+      { allow },
+    );
+  }, [
+    meta,
+    rights,
+    metaRefused,
+    recordShape.fields,
+    capabilities.views.enabled,
+    capabilities.views.allow,
+    viewsAllowlist,
+  ]);
 
   // Remount ONLY on a doctype swap (different columns/meta). Filter, sort,
   // and refresh changes reconcile IN PLACE through the table's
@@ -850,6 +871,27 @@ export function DoctypeListScreen({
     [initialTableFilters, controlledSorting],
   );
 
+  // ONE-SIDEBAR (LC-101): the facet / group-by panel is never a second
+  // column. Under a BackofficeShell it stacks below the workspace nav in the
+  // shell's one sidebar column (collapsible group); on phones it rides the
+  // tools sheet instead. Without a shell it stands as the page's only
+  // sidebar column.
+  const facetPanelWanted = sidebarVisible && !metaRefused;
+  const facetPanel = (fill: boolean) => (
+    <ListSidebar
+      fill={fill}
+      doctype={doctype}
+      meta={meta}
+      filters={currentFilters}
+      onFiltersChange={handleBaseFiltersChange}
+    />
+  );
+  const shellTookPanel = useShellSidebarPanel(
+    facetPanelWanted && !compactChrome
+      ? { title: t("list.tools.groupBy", "Group by"), content: facetPanel(true) }
+      : null,
+  );
+
   if (metaError && !meta && !metaRefused) {
     return (
       <YStack flex={1}>
@@ -911,14 +953,15 @@ export function DoctypeListScreen({
   // orphan next to a seven-segment switcher.
   const listToolbar = (
     <XStack gap="$1.5" alignItems="center" flexWrap="wrap">
-      {!compactChrome && !metaRefused && (
+      {/* The page's own column toggle: only when no shell took the panel
+          (the shell's stacked group collapses itself), never on phones
+          (the tools sheet carries the facets there). */}
+      {!compactChrome && !metaRefused && !shellTookPanel && (
         <ActionButton
           size="$3"
           circular
           chromeless
           icon={SidebarSimpleIcon}
-          display="none"
-          $sm={{ display: "flex" }}
           onPress={() => setSidebarVisible((visible) => !visible)}
           aria-expanded={sidebarVisible}
           aria-label={
@@ -930,7 +973,7 @@ export function DoctypeListScreen({
       )}
       {!metaRefused && (
         <ListFilterBar
-          compact={compactChrome}
+          collapsed={compactChrome}
           showChips={false}
           doctype={doctype}
           meta={meta}
@@ -940,6 +983,7 @@ export function DoctypeListScreen({
           sortOrder={sortOrder}
           onSortChange={handleSortChange}
           likedByUser={sessionUser}
+          facets={facetPanelWanted ? facetPanel(true) : undefined}
         />
       )}
       <ViewSwitcherMenu views={availableViews} current="list" onViewChange={handleViewChange} />
@@ -980,53 +1024,137 @@ export function DoctypeListScreen({
     </XStack>
   );
 
+  // Phone chrome: the banner already names the doctype, so the list opens on
+  // search + New, the filter pills, then the range readout beside sort.
+  const rangeText =
+    countText && count.value && loadedCount > 0
+      ? t("list.resultRange", {
+          shown: Math.min(loadedCount, count.value),
+          count: count.value,
+          defaultValue: "1–{{shown}} of {{count}}",
+        })
+      : countText;
+  const compactHeader = (
+    <YStack gap="$3">
+      <XStack gap="$2" alignItems="center">
+        <YStack flex={1} minWidth={0}>
+          <SearchInput
+            key={doctype}
+            defaultValue=""
+            onSearch={setSearchText}
+            clearable
+            placeholder={t("list.searchPlaceholder", {
+              defaultValue: "Search {{doctype}}",
+              doctype,
+            })}
+            aria-label={t("list.searchPlaceholder", {
+              defaultValue: "Search {{doctype}}",
+              doctype,
+            })}
+          />
+        </YStack>
+        {showNew && (
+          <ActionButton
+            accent
+            icon={PlusIcon}
+            onPress={() => setQuickEntryOpen(true)}
+            aria-label={t("list.new", {
+              defaultValue: "New {{doctype}}",
+              doctype,
+            })}
+            testID="backoffice-list-new"
+          />
+        )}
+      </XStack>
+      {!metaRefused && (
+        <FilterChips
+          outlined
+          meta={meta}
+          filters={baseFilters}
+          onFiltersChange={handleBaseFiltersChange}
+          trailing={
+            <ListToolsButton
+              doctype={doctype}
+              meta={meta}
+              filters={baseFilters}
+              onFiltersChange={handleBaseFiltersChange}
+              sortField={sortField}
+              sortOrder={sortOrder}
+              onSortChange={handleSortChange}
+              renderTrigger={(open) => (
+                <Chip size="$4" variant="outlined" color="gray" icon={<PlusIcon />} onPress={open}>
+                  {t("list.filters.filter", "Filter")}
+                </Chip>
+              )}
+            />
+          }
+        />
+      )}
+      <XStack alignItems="center" gap="$2">
+        <Paragraph size="$3" color="$color10" margin={0} flexShrink={1} numberOfLines={1}>
+          {rangeText ?? ""}
+        </Paragraph>
+        <XStack alignItems="center" gap="$1" flexShrink={0}>
+          <ViewSwitcherMenu views={availableViews} current="list" onViewChange={handleViewChange} />
+          {!metaRefused && (
+            <SortControl
+              meta={meta}
+              sortField={sortField}
+              sortOrder={sortOrder}
+              onSortChange={handleSortChange}
+            />
+          )}
+        </XStack>
+      </XStack>
+    </YStack>
+  );
+
   return (
-    <YStack flex={1} {...knobProps.gap} {...knobProps.panelPadding}>
-      <PageHeader
-        gap="$2"
-        heading={
-          <XStack gap="$2" alignItems="baseline" flexWrap="wrap">
-            <H1
-              {...knobProps.pageTitle}
-              {...knobProps.heading}
-              margin={0}
-              flexShrink={1}
-              minWidth={0}
-            >
-              {doctype}
-            </H1>
-            {countText ? (
-              <Paragraph size="$2" color="$color10" margin={0}>
-                {countText}
-              </Paragraph>
-            ) : null}
-          </XStack>
-        }
-        actions={listToolbar}
-      >
-        {/* Shared chips readout (MOD-04 honest state): the table's own
+    <YStack flex={1} minHeight={0} {...knobProps.gap} {...knobProps.panelPadding}>
+      {compactChrome ? (
+        compactHeader
+      ) : (
+        <PageHeader
+          gap="$2"
+          heading={
+            <XStack gap="$2" alignItems="baseline" flexWrap="wrap">
+              <H1
+                {...knobProps.pageTitle}
+                {...knobProps.heading}
+                margin={0}
+                flexShrink={1}
+                minWidth={0}
+              >
+                {doctype}
+              </H1>
+              {countText ? (
+                <Paragraph size="$2" color="$color10" margin={0}>
+                  {countText}
+                </Paragraph>
+              ) : null}
+            </XStack>
+          }
+          actions={listToolbar}
+        >
+          {/* Shared chips readout (MOD-04 honest state): the table's own
             chips row is suppressed, so the list chrome owns them. Renders
             nothing while no filters apply. */}
-        <FilterChips meta={meta} filters={baseFilters} onFiltersChange={handleBaseFiltersChange} />
-      </PageHeader>
+          <FilterChips
+            meta={meta}
+            filters={baseFilters}
+            onFiltersChange={handleBaseFiltersChange}
+          />
+        </PageHeader>
+      )}
 
       {(() => {
         const listBody = (
-          <XStack flex={1} gap="$2" alignItems="stretch">
-            {/* Facet sidebar needs bench RPCs (fixture mode hides it) and is
-                hidden on narrow viewports (< $sm) like desk. MOD-04 keeps it:
-                facet clicks toggle tuples through the same baseFilters
-                channel (handleBaseFiltersChange) — counts are informative,
-                the chips row is the shared readout. */}
-            {sidebarVisible && !metaRefused && (
-              <YStack display="none" $sm={{ display: "flex" }}>
-                <ListSidebar
-                  doctype={doctype}
-                  meta={meta}
-                  filters={currentFilters}
-                  onFiltersChange={handleBaseFiltersChange}
-                />
-              </YStack>
+          <XStack flexGrow={1} flexShrink={0} flexBasis="auto" gap="$2" alignItems="stretch">
+            {/* LC-101: only when no shell took the panel (no shell above,
+                or it is withdrawn) does it stand as the page's one sidebar
+                column. Phones get it in the tools sheet instead. */}
+            {facetPanelWanted && !shellTookPanel && !compactChrome && (
+              <YStack>{facetPanel(false)}</YStack>
             )}
             <YStack flex={1} minWidth={0}>
               {showCreateFirst ? (
@@ -1077,7 +1205,7 @@ export function DoctypeListScreen({
                   refreshToken={refreshGen}
                   enablePagination={!fixtureMode}
                   paginationMode="infinite"
-                  compact
+                  fetchTotalCount={false}
                   // ONE FILTER SYSTEM (MOD-04 / LC-16): the list chrome is
                   // the single filtering authority; tuples reach the table
                   // through controlledState (in-place adoption — no remount).
@@ -1094,20 +1222,17 @@ export function DoctypeListScreen({
                   onRowClick={handleRowClick}
                   onStateChange={handleStateChange}
                   rights={rights}
-                  layout="list"
+                  layout={compactChrome ? "list" : "table"}
                 />
               )}
             </YStack>
           </XStack>
         );
-        // Native has no page-level scroll and the table body ships none —
-        // wrap in a vertical ScrollView (DocFormScreen precedent) so rows
-        // below the fold stay reachable. Compact web is in the same boat:
-        // the card list renders in flow inside the shell's overflow-hidden
-        // frame, so it needs the same scroll wrapper (the compact header
-        // stays pinned above it). Wide web keeps the flex layout as-is —
-        // the grid body scrolls internally.
-        return isWeb && !compactChrome ? listBody : <ScrollView flex={1}>{listBody}</ScrollView>;
+        return (
+          <ScrollView flex={1} minHeight={0} testID="backoffice-list-scroll">
+            {listBody}
+          </ScrollView>
+        );
       })()}
 
       {showNew && (

package/src/list/ListFilterBar.screen.spec.tsx

@@ -169,7 +169,7 @@ describe("ListFilterBar", () => {
   });
 
   it("collapses behind one counted Filter button on compact viewports", async () => {
-    renderBar({ compact: true, filters: [["status", "=", "Open"]] });
+    renderBar({ collapsed: true, filters: [["status", "=", "Open"]] });
     await act(async () => {});
     expect(screen.getByRole("button", { name: "Filter" }).textContent).toContain("Filter (1)");
     expect(screen.queryByText("Status = Open")).toBeNull();

package/src/list/ListFilterBar.tsx

@@ -21,7 +21,8 @@
 import { XStack, YStack } from "@multiplatform.one/components";
 import { Button } from "@multiplatform.one/forms";
 import { HeartIcon } from "@phosphor-icons/react";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import { useResolvedKnobs, useLayoutSizeClass } from "@multiplatform.one/theme";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { FrappeFilter, FrappeFilters } from "../shared/types";
@@ -43,11 +44,11 @@ export interface ListFilterBarProps {
   sortOrder?: "asc" | "desc";
   onSortChange?: (field: string, order: "asc" | "desc") => void;
   /**
-   * Compact viewports collapse the whole bar behind one badge-counted
+   * Narrow viewports collapse the whole bar behind one badge-counted
    * "Filter" button opening the list-tools sheet (LC-06) — no stacked
-   * always-visible rows.
+   * always-visible rows. Omitted = the viewport's layout size class.
    */
-  compact?: boolean;
+  collapsed?: boolean;
   /**
    * When false, skip the chips row — the host renders FilterChips itself
    * (DoctypeListScreen puts them under the dense toolbar so they are not
@@ -59,6 +60,11 @@ export interface ListFilterBarProps {
    * filter (`_liked_by like %user%`). Omitted when there is no session.
    */
   likedByUser?: string;
+  /**
+   * The group-by facet panel, shown inside the collapsed (phone) tools
+   * sheet. Wider viewports stack it under the shell nav instead (LC-101).
+   */
+  facets?: ReactNode;
 }
 
 export function ListFilterBar({
@@ -69,11 +75,14 @@ export function ListFilterBar({
   sortField,
   sortOrder,
   onSortChange,
-  compact,
+  collapsed: collapsedProp,
   showChips = true,
   likedByUser,
+  facets,
 }: ListFilterBarProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
+  const narrow = useLayoutSizeClass() === "compact";
+  const collapsed = collapsedProp ?? narrow;
   const { knobProps } = useResolvedKnobs();
   const iconSize = Number(knobProps.controlIcon?.width) || 16;
   const likedTuple: FrappeFilter | undefined = likedByUser
@@ -92,7 +101,7 @@ export function ListFilterBar({
       onPress={() => onFiltersChange(toggleFacetFilter(filters, likedTuple))}
     />
   ) : null;
-  if (compact) {
+  if (collapsed) {
     return (
       <XStack {...knobProps.gap} alignItems="center">
         <ListToolsButton
@@ -103,6 +112,7 @@ export function ListFilterBar({
           sortField={sortField}
           sortOrder={sortOrder}
           onSortChange={onSortChange}
+          facets={facets}
         />
         {likedButton}
       </XStack>

package/src/list/ListSidebar.tsx

@@ -47,6 +47,12 @@ export interface ListSidebarProps {
    * additionally gate their sections regardless of this prop.
    */
   hiddenSections?: readonly ListSidebarSection[];
+  /**
+   * Fill the host column instead of standing as a fixed-width column of its
+   * own: the shell rail (stacked under the nav, LC-101) and the phone tools
+   * sheet both pass it.
+   */
+  fill?: boolean;
 }
 
 /** The Select field powering the status facet (plain status or workflow state). */
@@ -77,6 +83,7 @@ export function ListSidebar({
   filters,
   onFiltersChange,
   hiddenSections,
+  fill,
 }: ListSidebarProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const sessionUser = useSessionUser();
@@ -157,8 +164,10 @@ export function ListSidebar({
 
   return (
     <YStack
-      width={sizeRecipeEscape(200, "list sidebar: a fixed facet column beside the list")}
-      paddingRight="$2"
+      width={
+        fill ? "100%" : sizeRecipeEscape(200, "list sidebar: a fixed facet column beside the list")
+      }
+      paddingRight={fill ? 0 : "$2"}
       paddingBottom="$4"
       aria-label={t("list.sidebarLabel", "List filters sidebar")}
     >

package/src/list/filter-chips.tsx

@@ -5,7 +5,7 @@
  * "Clear filters" drops them all.
  */
 import { Button, Chip, XStack } from "@multiplatform.one/components";
-import { useMemo } from "react";
+import { useMemo, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { BACKOFFICE_I18N_NAMESPACE } from "../i18n";
 import type { FrappeFilters } from "../shared/types";
@@ -16,18 +16,32 @@ export interface FilterChipsProps {
   meta?: DoctypeMeta;
   filters: FrappeFilters;
   onFiltersChange: (filters: FrappeFilters) => void;
+  /**
+   * Compact list chrome: neutral outlined pills, and the row stays mounted
+   * with no filters so `trailing` (the add-filter pill) always shows.
+   */
+  outlined?: boolean;
+  /** Rendered after the chips, inside the same wrapping row. */
+  trailing?: ReactNode;
 }
 
-export function FilterChips({ meta, filters, onFiltersChange }: FilterChipsProps) {
+export function FilterChips({
+  meta,
+  filters,
+  onFiltersChange,
+  outlined,
+  trailing,
+}: FilterChipsProps) {
   const { t } = useTranslation(BACKOFFICE_I18N_NAMESPACE);
   const fields = useMemo(() => filterableFieldsFromMeta(meta), [meta]);
-  if (!filters.length) return null;
+  if (!filters.length && !trailing) return null;
   return (
     <XStack gap="$2" flexWrap="wrap" alignItems="center">
       {filters.map((tuple, index) => (
         <Chip
           key={`${tuple[0]}-${tuple[1]}-${index}`}
-          color="blue"
+          {...(outlined ? { size: "$4" as const, variant: "outlined" as const } : {})}
+          color={outlined ? "gray" : "blue"}
           onDismiss={() => onFiltersChange(filters.filter((_, i) => i !== index))}
         >
           {filterTupleLabel(fields, tuple)}
@@ -38,6 +52,7 @@ export function FilterChips({ meta, filters, onFiltersChange }: FilterChipsProps
           {t("list.clearFilters", "Clear filters")}
         </Button>
       )}
+      {trailing}
     </XStack>
   );
 }