Pipeline filter and search

package.json

@@ -80,6 +80,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
     "dexie": "^4.2.1",
     "dexie-react-hooks": "^4.2.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
@@ -91,6 +92,7 @@
     "pyodide": "^0.29.1",
     "random-words": "^2.0.1",
     "react": "^19.2.3",
+    "react-day-picker": "^9.13.0",
     "react-dom": "^19.2.3",
     "react-error-boundary": "^6.1.0",
     "react-icons": "^5.5.0",
@@ -128,10 +130,10 @@
     "jsdom": "^27.4.0",
     "knip": "^5.81.0",
     "prettier": "^3.8.0",
+    "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.53.0",
     "vite": "^7.3.1",
-    "vitest": "^3.0.5",
-    "tsx": "^4.21.0"
+    "vitest": "^3.0.5"
   }
 }

src/components/Home/PipelineSection/PipelineFiltersBar.tsx

@@ -0,0 +1,147 @@
+import type { ChangeEvent } from "react";
+import type { DateRange } from "react-day-picker";
+
+import { Button } from "@/components/ui/button";
+import { DatePickerWithRange } from "@/components/ui/date-picker";
+import { Icon } from "@/components/ui/icon";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { InlineStack } from "@/components/ui/layout";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Text } from "@/components/ui/typography";
+
+import type { PipelineFilters, SortField } from "./usePipelineFilters";
+
+interface PipelineFiltersBarProps {
+  filters: PipelineFilters;
+  hasActiveFilters: boolean;
+  activeFilterCount: number;
+  onUpdateFilter: <K extends keyof PipelineFilters>(
+    key: K,
+    value: PipelineFilters[K],
+  ) => void;
+  onClearFilters: () => void;
+}
+
+const SORT_OPTIONS: { value: SortField; label: string }[] = [
+  { value: "modified", label: "Modified date" },
+  { value: "name", label: "Name" },
+  { value: "lastRun", label: "Last run" },
+];
+
+export function PipelineFiltersBar({
+  filters,
+  hasActiveFilters,
+  activeFilterCount,
+  onUpdateFilter,
+  onClearFilters,
+}: PipelineFiltersBarProps) {
+  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onUpdateFilter("searchQuery", e.target.value);
+  };
+
+  const handleSortChange = (value: string) => {
+    onUpdateFilter("sortField", value as SortField);
+  };
+
+  const handleSortDirectionToggle = () => {
+    onUpdateFilter(
+      "sortDirection",
+      filters.sortDirection === "asc" ? "desc" : "asc",
+    );
+  };
+
+  const handleDateRangeChange = (range: DateRange | undefined) => {
+    onUpdateFilter("dateRange", range);
+  };
+
+  const handleHasRunsToggle = (checked: boolean) => {
+    onUpdateFilter("hasRunsOnly", checked);
+  };
+
+  const sortDirectionIcon: "ArrowUp" | "ArrowDown" =
+    filters.sortDirection === "asc" ? "ArrowUp" : "ArrowDown";
+
+  return (
+    <InlineStack gap="2" blockAlign="center" wrap="nowrap">
+      <InlineStack gap="1" wrap="nowrap">
+        <Input
+          type="text"
+          placeholder="Search..."
+          value={filters.searchQuery}
+          onChange={handleSearchChange}
+          className="w-40"
+        />
+        {filters.searchQuery && (
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => onUpdateFilter("searchQuery", "")}
+          >
+            <Icon name="CircleX" />
+          </Button>
+        )}
+      </InlineStack>
+
+      <InlineStack gap="1" wrap="nowrap" blockAlign="center">
+        <Select value={filters.sortField} onValueChange={handleSortChange}>
+          <SelectTrigger className="w-32">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {SORT_OPTIONS.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={handleSortDirectionToggle}
+          title={filters.sortDirection === "asc" ? "Ascending" : "Descending"}
+        >
+          <Icon name={sortDirectionIcon} />
+        </Button>
+      </InlineStack>
+
+      <DatePickerWithRange
+        value={filters.dateRange}
+        onChange={handleDateRangeChange}
+        placeholder="All time"
+      />
+
+      <InlineStack gap="2" blockAlign="center">
+        <Switch
+          id="has-runs"
+          checked={filters.hasRunsOnly}
+          onCheckedChange={handleHasRunsToggle}
+        />
+        <Label htmlFor="has-runs" className="whitespace-nowrap">
+          Has runs
+        </Label>
+      </InlineStack>
+
+      {hasActiveFilters && (
+        <Button variant="ghost" size="sm" onClick={onClearFilters}>
+          <Icon name="X" />
+          <Text
+            as="span"
+            size="xs"
+            className="bg-muted px-1.5 py-0.5 rounded-full"
+          >
+            {activeFilterCount}
+          </Text>
+        </Button>
+      )}
+    </InlineStack>
+  );
+}

src/components/Home/PipelineSection/PipelineRow.tsx

@@ -84,8 +84,10 @@ const PipelineRow = withSuspenseWrapper(
             onClick={handleClick}
           />
         </TableCell>
-        <TableCell>
-          <Paragraph>{name}</Paragraph>
+        <TableCell className="max-w-xs">
+          <Paragraph className="truncate" title={name}>
+            {name}
+          </Paragraph>
         </TableCell>
         <TableCell>
           <Paragraph tone="subdued" size="xs">
@@ -125,8 +127,10 @@ const PipelineRow = withSuspenseWrapper(
         <TableCell onClick={(e) => e.stopPropagation()}>
           <Skeleton size="sm" />
         </TableCell>
-        <TableCell>
-          <Paragraph>{props.name}</Paragraph>
+        <TableCell className="max-w-xs">
+          <Paragraph className="truncate" title={props.name}>
+            {props.name}
+          </Paragraph>
         </TableCell>
         <TableCell>
           <Paragraph tone="subdued" size="xs">