@multiplatform.one/table 6.7.0 → 7.0.0

package/src/components/DataTableFilters/index.tsx

@@ -1,16 +1,20 @@
-import {
-  CalendarBlankIcon,
-  CheckSquareIcon,
-  FunnelIcon,
-  HashIcon,
-  PlusIcon,
-  TextTIcon,
-  XIcon,
-} from "@phosphor-icons/react";
+/**
+ * DataTableFilters — standalone filter bar (Polaris Index Filters + Linear).
+ *
+ * Empty: a Filter trigger. Active: the same trigger (count on the button as
+ * fill, LC-71) plus wrapping dismissible chips. Add/edit opens a FloatingPanel
+ * (LC-06) with the shared FilterOperatorValueEditor (LC-16). Compose stays
+ * open after Add (LC-21); Cancel / outside / Escape close.
+ *
+ * Compact (card chrome beside DataTableFilterButton / FilterChips) is Add
+ * Filter + Clear — not a second Filter trigger or chip row.
+ */
+
+import { FunnelIcon, PlusIcon } from "@phosphor-icons/react";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
-import { useState, useMemo } from "react";
-import { Button, Input, Select } from "@multiplatform.one/forms";
-import { Popover, ScrollView, Separator, Text, View, XStack, YStack } from "tamagui";
+import { useEffect, useState } from "react";
+import { Button, FloatingPanel, Select } from "@multiplatform.one/forms";
+import { Text, View, XStack, YStack } from "tamagui";
 import type {
   DataTableColumnType,
   FacetedFilterOption,
@@ -18,9 +22,15 @@ import type {
   FilterValue,
   TableFilter,
 } from "../../types";
-import { getFilterDescription } from "../../utils/filterUtils";
+import {
+  defaultOperatorForFilterType,
+  getFilterChipLabel,
+  operatorNeedsNoValue,
+} from "../../utils/filterFields";
 import { t } from "../../shared/t";
 import { useDataTableState } from "../DataTable/DataTableStateContext";
+import { FilterChip } from "../DataTableFilterChips";
+import { FilterOperatorValueEditor } from "../FilterOperatorValueEditor";
 
 export interface DataTableFiltersProps {
   filters?: TableFilter[];
@@ -39,13 +49,12 @@ export interface DataTableFiltersProps {
   compact?: boolean;
 }
 
+type ColumnOption = NonNullable<DataTableFiltersProps["availableColumns"]>[number];
+
 export function DataTableFilters(props: DataTableFiltersProps) {
-  // Try to consume from DataTableStateContext (compound component pattern)
   const ctx = useDataTableState();
 
-  // Resolve values: explicit props override context values
   const filters = props.filters ?? ctx?.state.filters ?? [];
-  const onFiltersChange = props.onFiltersChange ?? ctx?.actions.setFilters ?? (() => {});
   const onAddFilter = props.onAddFilter ?? ctx?.actions.addFilter ?? (() => {});
   const onRemoveFilter = props.onRemoveFilter ?? ctx?.actions.removeFilter ?? (() => {});
   const onClearFilters = props.onClearFilters ?? ctx?.actions.clearFilters ?? (() => {});
@@ -53,636 +62,212 @@ export function DataTableFilters(props: DataTableFiltersProps) {
 
   const { maxFilters = 10, showFilterCount = true, compact = false } = props;
 
-  const [showFilterBuilder, setShowFilterBuilder] = useState(false);
-  const { knobProps } = useResolvedKnobs();
+  const [builderOpen, setBuilderOpen] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const { knobProps } = useResolvedKnobs({ compact });
 
   const canAddMoreFilters = filters.length < maxFilters;
-
-  // LC-21 (owner adjudication 2026-08-12): the builder stays open after Add
-  // Filter — it resets its form so the user composes the next filter; Cancel,
-  // outside click, or Escape close.
-  const handleAddFilter = (filter: Omit<TableFilter, "id">) => {
+  const editingFilter = editingId ? (filters.find((f) => f.id === editingId) ?? null) : null;
+  const triggerName = compact ? t("Add Filter") : t("Filter");
+  const triggerLabel =
+    showFilterCount && filters.length > 0 ? `${triggerName} (${filters.length})` : triggerName;
+
+  const handleCommit = (filter: Omit<TableFilter, "id">) => {
+    if (editingId) {
+      const updated = filters.map((row) => (row.id === editingId ? { ...row, ...filter } : row));
+      (props.onFiltersChange ?? ctx?.actions.setFilters ?? (() => {}))(updated);
+      setEditingId(null);
+      return;
+    }
     onAddFilter(filter);
   };
 
-  const handleUpdateFilter = (filterId: string, updates: Partial<TableFilter>) => {
-    const updatedFilters = filters.map((filter) =>
-      filter.id === filterId ? { ...filter, ...updates } : filter,
-    );
-    onFiltersChange(updatedFilters);
+  const openBuilder = (filterId?: string) => {
+    setEditingId(filterId ?? null);
+    setBuilderOpen(true);
   };
 
-  if (compact) {
-    return (
-      <XStack alignItems="center" gap="$2">
-        {filters.length > 0 && showFilterCount && (
-          <View
-            backgroundColor={"$accentBackground"}
-            paddingHorizontal="$2"
-            paddingVertical="$1"
-            borderRadius={knobProps.borderRadius.borderRadius}
-          >
-            <Text color="$accentColor" fontSize="$2">
-              {filters.length}
-            </Text>
-          </View>
-        )}
+  const handleOpenChange = (next: boolean) => {
+    setBuilderOpen(next);
+    if (!next) setEditingId(null);
+  };
 
-        <Popover open={showFilterBuilder} onOpenChange={setShowFilterBuilder}>
-          <Popover.Trigger asChild>
-            <Button
-              size={knobProps.sizeToken}
-              variant="outlined"
-              icon={<PlusIcon size={16} />}
-              disabled={!canAddMoreFilters}
-            >
-              {t("Add Filter")}
-            </Button>
-          </Popover.Trigger>
-          <Popover.Content
-            {...knobProps.borderRadius}
-            borderWidth={1}
-            borderColor="$color6"
-            backgroundColor="$background"
-            enterStyle={{ x: 0, y: -10, opacity: 0 }}
-            exitStyle={{ x: 0, y: -10, opacity: 0 }}
-            transition={[
-              "quick",
-              {
-                opacity: {
-                  overshootClamping: true,
-                },
-              },
-            ]}
+  const trigger = (
+    <Button
+      size="$3"
+      compact
+      {...(filters.length > 0 ? { accent: true } : { variant: "outlined" as const })}
+      icon={
+        compact ? (
+          <PlusIcon size={14} />
+        ) : (
+          <FunnelIcon size={14} weight={filters.length > 0 ? "fill" : "regular"} />
+        )
+      }
+      aria-label={triggerName}
+      aria-expanded={builderOpen}
+      aria-haspopup="dialog"
+    >
+      {triggerLabel}
+    </Button>
+  );
+
+  return (
+    <YStack data-testid="data-table-filters" aria-label={t("Table filters")} aria-live="polite">
+      <XStack flexWrap="wrap" alignItems="center" {...knobProps.gap}>
+        <View alignSelf="flex-start" flexShrink={0}>
+          <FloatingPanel
+            open={builderOpen}
+            onOpenChange={handleOpenChange}
+            trigger={trigger}
+            fitContent
+            scrollable={false}
           >
             <FilterBuilder
               availableColumns={availableColumns}
-              onAddFilter={handleAddFilter}
-              onCancel={() => setShowFilterBuilder(false)}
+              editingFilter={editingFilter}
+              onCommit={handleCommit}
+              onCancel={() => handleOpenChange(false)}
+              canAdd={canAddMoreFilters || !!editingFilter}
             />
-          </Popover.Content>
-        </Popover>
+          </FloatingPanel>
+        </View>
 
-        {filters.length > 0 && (
-          <Button
-            size={knobProps.sizeToken}
-            variant="outlined"
-            onPress={onClearFilters}
-            icon={<XIcon size={16} />}
-          >
+        {!compact &&
+          filters.map((filter) => {
+            const column = availableColumns.find((col) => col.id === filter.columnId);
+            const label = getFilterChipLabel(
+              column?.label ?? filter.label ?? filter.columnId,
+              filter.value,
+              column?.options,
+            );
+            return (
+              <FilterChip
+                key={filter.id}
+                label={label}
+                onRemove={() => onRemoveFilter(filter.id)}
+                onPress={() => openBuilder(filter.id)}
+              />
+            );
+          })}
+
+        {compact && filters.length > 0 && (
+          <Button size="$2" chromeless compact onPress={onClearFilters} aria-label={t("Clear")}>
             {t("Clear")}
           </Button>
         )}
+        {!compact && filters.length >= 2 && (
+          <Button size="$2" chromeless compact onPress={onClearFilters} aria-label={t("Clear all")}>
+            {t("Clear all")}
+          </Button>
+        )}
       </XStack>
-    );
-  }
-
-  return (
-    <YStack
-      {...knobProps.borderRadius}
-      gap="$4"
-      padding="$4"
-      backgroundColor="$background"
-      borderWidth={1}
-      borderColor="$color6"
-      aria-label="Table filters"
-      aria-live="polite"
-    >
-      {/* Header */}
-      <XStack alignItems="center" justifyContent="space-between">
-        <XStack alignItems="center" gap="$2">
-          <FunnelIcon size={16} aria-hidden />
-          <Text fontSize="$4" fontWeight="600" id="filters-heading">
-            {t("Filters")}
-          </Text>
-          {showFilterCount && filters.length > 0 && (
-            <View
-              backgroundColor={"$accentBackground"}
-              paddingHorizontal="$2"
-              paddingVertical="$1"
-              borderRadius={knobProps.borderRadius.borderRadius}
-              aria-label={`${filters.length} active filters`}
-            >
-              <Text color="$accentColor" fontSize="$2">
-                {filters.length}
-              </Text>
-            </View>
-          )}
-        </XStack>
-
-        <XStack
-          {...({ render: "fieldset" } as object)}
-          borderWidth={0}
-          margin={0}
-          padding={0}
-          minWidth={0}
-          alignItems="center"
-          gap="$2"
-          aria-label="Filter management actions"
-        >
-          <Popover open={showFilterBuilder} onOpenChange={setShowFilterBuilder}>
-            <Popover.Trigger asChild>
-              <Button
-                size={knobProps.sizeToken}
-                variant="outlined"
-                icon={<PlusIcon size={16} />}
-                disabled={!canAddMoreFilters}
-                aria-label="Add new filter"
-                aria-expanded={showFilterBuilder}
-                aria-haspopup="dialog"
-              >
-                {t("Add Filter")}
-              </Button>
-            </Popover.Trigger>
-            <Popover.Content
-              {...knobProps.borderRadius}
-              borderWidth={1}
-              borderColor="$color6"
-              backgroundColor="$background"
-              enterStyle={{ x: 0, y: -10, opacity: 0 }}
-              exitStyle={{ x: 0, y: -10, opacity: 0 }}
-              transition={[
-                "quick",
-                {
-                  opacity: {
-                    opacity: {
-                      overshootClamping: true,
-                    },
-                  },
-                },
-              ]}
-              maxWidth={400}
-            >
-              <FilterBuilder
-                availableColumns={availableColumns}
-                onAddFilter={handleAddFilter}
-                onCancel={() => setShowFilterBuilder(false)}
-              />
-            </Popover.Content>
-          </Popover>
-
-          {filters.length > 0 && (
-            <Button
-              size={knobProps.sizeToken}
-              variant="outlined"
-              onPress={onClearFilters}
-              icon={<XIcon size={16} />}
-              aria-label="Clear all filters"
-            >
-              {t("Clear All")}
-            </Button>
-          )}
-        </XStack>
-      </XStack>
-
-      <Separator />
-
-      {/* Active Filters */}
-      {filters.length > 0 ? (
-        <ScrollView maxHeight={200}>
-          <YStack
-            {...({ render: "ul" } as object)}
-            gap="$2"
-            padding={0}
-            margin={0}
-            aria-label="Active filters"
-            aria-describedby="filters-heading"
-          >
-            {filters.map((filter, index) => (
-              <ActiveFilter
-                key={filter.id}
-                filter={filter}
-                availableColumns={availableColumns}
-                onUpdate={(updates) => handleUpdateFilter(filter.id, updates)}
-                onRemove={() => onRemoveFilter(filter.id)}
-                index={index}
-              />
-            ))}
-          </YStack>
-        </ScrollView>
-      ) : (
-        <View
-          {...({ render: "output" } as object)}
-          padding="$4"
-          alignItems="center"
-          aria-live="polite"
-        >
-          <Text fontSize="$3" color="$color10">
-            {t("No filters applied")}
-          </Text>
-        </View>
-      )}
     </YStack>
   );
 }
 
-// Filter Builder Component
-
 interface FilterBuilderProps {
-  availableColumns: Array<{
-    id: string;
-    label: string;
-    type: DataTableColumnType;
-    options?: FacetedFilterOption[];
-  }>;
-  onAddFilter: (filter: Omit<TableFilter, "id">) => void;
+  availableColumns: ColumnOption[];
+  editingFilter: TableFilter | null;
+  onCommit: (filter: Omit<TableFilter, "id">) => void;
   onCancel: () => void;
+  canAdd: boolean;
 }
 
-function FilterBuilder({ availableColumns, onAddFilter, onCancel }: FilterBuilderProps) {
-  const { knobProps } = useResolvedKnobs();
-  const sz = knobProps.sizeToken;
-  const builderMinWidth = sz === "$3" ? 240 : sz === "$5" ? 360 : 300;
-  const [selectedColumnId, setSelectedColumnId] = useState<string>("");
-  const [selectedOperator, setSelectedOperator] = useState<FilterOperator>("is");
-  const [filterValue, setFilterValue] = useState<any>("");
-  const [filterValues, setFilterValues] = useState<any[]>([]);
+function FilterBuilder({
+  availableColumns,
+  editingFilter,
+  onCommit,
+  onCancel,
+  canAdd,
+}: FilterBuilderProps) {
+  const { knobProps } = useResolvedKnobs({ compact: true });
+  const [selectedColumnId, setSelectedColumnId] = useState("");
+  const [selectedOperator, setSelectedOperator] = useState<FilterOperator>("contains");
+  const [filterValue, setFilterValue] = useState("");
 
   const selectedColumn = availableColumns.find((col) => col.id === selectedColumnId);
 
-  const availableOperators = useMemo(() => {
-    if (!selectedColumn) return [];
-
-    const baseOperators: FilterOperator[] = ["is", "isNot"];
-
-    switch (selectedColumn.type) {
-      case "text":
-        return [
-          ...baseOperators,
-          "contains",
-          "doesNotContain",
-          "startsWith",
-          "endsWith",
-          "isEmpty",
-          "isNotEmpty",
-        ];
-      case "number":
-        return [
-          ...baseOperators,
-          "isLessThan",
-          "isGreaterThan",
-          "isLessThanOrEqual",
-          "isGreaterThanOrEqual",
-          "isBetween",
-          "isNotBetween",
-        ];
-      case "date":
-        return [
-          ...baseOperators,
-          "isBefore",
-          "isAfter",
-          "isOnOrBefore",
-          "isOnOrAfter",
-          "isBetween",
-          "isNotBetween",
-        ];
-      case "boolean":
-        return baseOperators;
-      default:
-        return baseOperators;
+  useEffect(() => {
+    if (editingFilter) {
+      setSelectedColumnId(editingFilter.columnId);
+      setSelectedOperator(editingFilter.value.operator);
+      setFilterValue(String(editingFilter.value.value ?? ""));
+      return;
     }
-  }, [selectedColumn]);
-
-  // Convert to forms Select options
-  const columnOptions = useMemo(
-    () =>
-      availableColumns.map((col) => ({
-        value: col.id,
-        label: col.label,
-      })),
-    [availableColumns],
-  );
+    setSelectedColumnId("");
+    setSelectedOperator("contains");
+    setFilterValue("");
+  }, [editingFilter]);
 
-  const operatorOptions = useMemo(
-    () =>
-      availableOperators.map((op) => ({
-        value: op,
-        label: getOperatorLabel(op as FilterOperator),
-      })),
-    [availableOperators],
-  );
+  const columnOptions = availableColumns.map((col) => ({
+    value: col.id,
+    label: col.label,
+  }));
 
-  const handleAddFilter = () => {
+  const handleCommit = () => {
     if (!selectedColumnId || !selectedOperator) return;
-
-    const filterValueObj: FilterValue = {
+    const value: FilterValue = {
       operator: selectedOperator,
-      value: null,
+      value: operatorNeedsNoValue(selectedOperator) ? null : filterValue,
     };
-
-    // Handle different operator types
-    if (["isBetween", "isNotBetween"].includes(selectedOperator)) {
-      filterValueObj.values = filterValues;
-    } else if (["isAnyOf", "isNoneOf"].includes(selectedOperator)) {
-      filterValueObj.values = filterValues;
-    } else if (!["isEmpty", "isNotEmpty"].includes(selectedOperator)) {
-      filterValueObj.value = filterValue;
-    }
-
-    onAddFilter({
+    onCommit({
       columnId: selectedColumnId,
-      value: filterValueObj,
+      value,
       label: selectedColumn?.label,
     });
-
-    // Reset form
     setSelectedColumnId("");
-    setSelectedOperator("is");
+    setSelectedOperator("contains");
     setFilterValue("");
-    setFilterValues([]);
-  };
-
-  const renderValueInput = () => {
-    if (!selectedColumn || ["isEmpty", "isNotEmpty"].includes(selectedOperator)) {
-      return null;
-    }
-
-    if (["isBetween", "isNotBetween"].includes(selectedOperator)) {
-      return (
-        <XStack gap="$2">
-          <Input
-            placeholder={t("Min value")}
-            value={filterValues[0] || ""}
-            onChangeText={(text) => {
-              const newValues = [...filterValues];
-              newValues[0] = text;
-              setFilterValues(newValues);
-            }}
-          />
-          <Input
-            placeholder={t("Max value")}
-            value={filterValues[1] || ""}
-            onChangeText={(text) => {
-              const newValues = [...filterValues];
-              newValues[1] = text;
-              setFilterValues(newValues);
-            }}
-          />
-        </XStack>
-      );
-    }
-
-    if (["isAnyOf", "isNoneOf"].includes(selectedOperator)) {
-      // For select columns with predefined options
-      if (selectedColumn.options) {
-        return (
-          <ScrollView maxHeight={120}>
-            <YStack gap="$1">
-              {selectedColumn.options.map((option) => (
-                <XStack key={String(option.value)} alignItems="center" gap="$2">
-                  <input
-                    type="checkbox"
-                    checked={filterValues.includes(option.value)}
-                    onChange={(e) => {
-                      if (e.target.checked) {
-                        setFilterValues([...filterValues, option.value]);
-                      } else {
-                        setFilterValues(filterValues.filter((v) => v !== option.value));
-                      }
-                    }}
-                  />
-                  <Text fontSize="$3">{option.label}</Text>
-                  <View
-                    backgroundColor="$color5"
-                    paddingHorizontal="$1"
-                    paddingVertical="$0.5"
-                    borderRadius="$1"
-                  >
-                    <Text color="$color10" fontSize="$1">
-                      {option.count}
-                    </Text>
-                  </View>
-                </XStack>
-              ))}
-            </YStack>
-          </ScrollView>
-        );
-      }
-
-      return (
-        <Input
-          placeholder={t("Enter values separated by commas")}
-          value={filterValues.join(", ")}
-          onChangeText={(text) => {
-            setFilterValues(text.split(",").map((v) => v.trim()));
-          }}
-        />
-      );
-    }
-
-    // Single value input
-    if (selectedColumn.type === "date") {
-      return (
-        <Input
-          label={t("Value")}
-          placeholder={t("YYYY-MM-DD")}
-          value={filterValue}
-          onChangeText={setFilterValue}
-        />
-      );
-    }
-
-    if (selectedColumn.type === "boolean") {
-      return (
-        <Select
-          label={t("Value")}
-          value={filterValue}
-          onValueChange={(v) => {
-            if (typeof v === "string") {
-              setFilterValue(v);
-            }
-          }}
-          options={[
-            { value: "true", label: t("True") },
-            { value: "false", label: t("False") },
-          ]}
-          placeholder={t("Select value")}
-        />
-      );
-    }
-
-    if (selectedColumn.options) {
-      return (
-        <Select
-          label={t("Value")}
-          value={filterValue}
-          onValueChange={(v) => {
-            if (typeof v === "string") {
-              setFilterValue(v);
-            }
-          }}
-          options={selectedColumn.options.map((option) => ({
-            value: option.value.toString(),
-            label: option.label,
-          }))}
-          placeholder={t("Select value")}
-        />
-      );
-    }
-
-    return (
-      <Input
-        label={t("Value")}
-        placeholder={t("Enter value")}
-        value={filterValue}
-        onChangeText={setFilterValue}
-        {...(selectedColumn.type === "number" && { keyboardType: "numeric" })}
-      />
-    );
   };
 
   return (
-    <YStack {...knobProps.panelPadding} gap="$4" minWidth={builderMinWidth}>
-      <Text fontSize="$4" fontWeight="600">
-        {t("Add Filter")}
+    <YStack {...knobProps.panelPadding} gap="$3" minWidth={280} maxWidth={360}>
+      <Text fontSize="$3" fontWeight="600" color="$color12">
+        {editingFilter ? t("Edit filter") : t("Add filter")}
       </Text>
 
-      {/* Column Selection */}
       <Select
         label={t("Column")}
         value={selectedColumnId}
         onValueChange={(v) => {
-          if (typeof v === "string") {
-            setSelectedColumnId(v);
-          }
+          if (typeof v !== "string") return;
+          setSelectedColumnId(v);
+          const col = availableColumns.find((c) => c.id === v);
+          setSelectedOperator(defaultOperatorForFilterType(col?.type ?? "text"));
+          setFilterValue("");
         }}
         options={columnOptions}
         placeholder={t("Select column")}
+        size="$3"
+        compact
       />
 
-      {/* Operator Selection */}
-      {selectedColumnId && (
-        <Select
-          label={t("Condition")}
-          value={selectedOperator}
-          onValueChange={(v) => {
-            if (typeof v === "string") {
-              setSelectedOperator(v as FilterOperator);
-            }
-          }}
-          options={operatorOptions}
+      {selectedColumn ? (
+        <FilterOperatorValueEditor
+          fieldType={selectedColumn.type}
+          operator={selectedOperator}
+          value={filterValue}
+          onOperatorChange={setSelectedOperator}
+          onValueChange={setFilterValue}
+          options={selectedColumn.options}
         />
-      )}
+      ) : null}
 
-      {/* Value Input */}
-      {selectedColumnId && renderValueInput()}
-
-      {/* Actions */}
       <XStack gap="$2" justifyContent="flex-end">
-        <Button size={knobProps.sizeToken} variant="outlined" onPress={onCancel}>
+        <Button size="$3" compact variant="outlined" onPress={onCancel}>
           {t("Cancel")}
         </Button>
         <Button
-          size={knobProps.sizeToken}
-          onPress={handleAddFilter}
-          disabled={!selectedColumnId || !selectedOperator}
+          size="$3"
+          compact
+          accent
+          onPress={handleCommit}
+          disabled={!selectedColumnId || !selectedOperator || !canAdd}
         >
-          {t("Add Filter")}
+          {editingFilter ? t("Update") : t("Add filter")}
         </Button>
       </XStack>
     </YStack>
   );
 }
-
-// Active Filter Component
-
-interface ActiveFilterProps {
-  filter: TableFilter;
-  availableColumns: Array<{
-    id: string;
-    label: string;
-    type: DataTableColumnType;
-    options?: FacetedFilterOption[];
-  }>;
-  onUpdate: (updates: Partial<TableFilter>) => void;
-  onRemove: () => void;
-  index: number;
-}
-
-function ActiveFilter({
-  filter,
-  availableColumns,
-  onUpdate: _onUpdate,
-  onRemove,
-  index,
-}: ActiveFilterProps) {
-  const { knobProps } = useResolvedKnobs();
-  const column = availableColumns.find((col) => col.id === filter.columnId);
-
-  return (
-    <XStack
-      {...({ render: "li" } as object)}
-      alignItems="center"
-      justifyContent="space-between"
-      padding="$3"
-      {...{ backgroundColor: "$color2" }}
-      {...knobProps.borderRadius}
-      borderColor="$color6"
-      aria-label={`Filter ${index + 1}: ${getFilterDescription(filter)}`}
-    >
-      <XStack alignItems="center" gap="$2" flex={1}>
-        <ColumnTypeIcon type={column?.type || "text"} size={14} />
-        <Text fontSize="$3" color="$color10">
-          {getFilterDescription(filter)}
-        </Text>
-      </XStack>
-
-      <Button
-        size="$2"
-        variant="outlined"
-        onPress={onRemove}
-        icon={<XIcon size={16} />}
-        aria-label={`Remove filter: ${getFilterDescription(filter)}`}
-      />
-    </XStack>
-  );
-}
-
-// Helper Components
-
-function ColumnTypeIcon({ type, size }: { type: DataTableColumnType; size: number }) {
-  switch (type) {
-    case "text":
-      return <TextTIcon size={size} color="$color10" />;
-    case "number":
-      return <HashIcon size={size} color="$color10" />;
-    case "date":
-      return <CalendarBlankIcon size={size} color="$color10" />;
-    case "boolean":
-      return <CheckSquareIcon size={size} color="$color10" />;
-    default:
-      return <TextTIcon size={size} color="$color10" />;
-  }
-}
-
-function getOperatorLabel(operator: FilterOperator): string {
-  const labels: Record<FilterOperator, string> = {
-    // Text
-    contains: "Contains",
-    doesNotContain: "Does not contain",
-    is: "Is",
-    isNot: "Is not",
-    startsWith: "Starts with",
-    endsWith: "Ends with",
-    isEmpty: "Is empty",
-    isNotEmpty: "Is not empty",
-    // Number
-    isLessThan: "Is less than",
-    isGreaterThan: "Is greater than",
-    isLessThanOrEqual: "Is less than or equal to",
-    isGreaterThanOrEqual: "Is greater than or equal to",
-    isBetween: "Is between",
-    isNotBetween: "Is not between",
-    // Date
-    isBefore: "Is before",
-    isAfter: "Is after",
-    isOnOrBefore: "Is on or before",
-    isOnOrAfter: "Is on or after",
-    // Option
-    isAnyOf: "Is any of",
-    isNoneOf: "Is none of",
-  };
-
-  const label = labels[operator];
-  return label ? t(label) : operator;
-}