unkeyed · chronark · Aug 25, 2025 · Aug 4, 2025 · Aug 4, 2025 · Aug 4, 2025
@@ -0,0 +1,38 @@
+import { HISTORICAL_DATA_WINDOW } from "@/components/logs/constants";
+import { ControlCloud } from "@unkey/ui";
+import type { DeploymentListFilterField } from "../../filters.schema";
+import { useFilters } from "../../hooks/use-filters";
+
+const FIELD_DISPLAY_NAMES: Record<DeploymentListFilterField, string> = {
+  status: "Status",
+  environment: "Environment",
+  branch: "Branch",
+  startTime: "Start Time",
+  endTime: "End Time",
+  since: "Since",
+} as const;
+
+const formatFieldName = (field: string): string => {
+  if (field in FIELD_DISPLAY_NAMES) {
+    return FIELD_DISPLAY_NAMES[field as DeploymentListFilterField];
+  }
+  // Fallback for any missing fields
+  return field
+    .replace(/([A-Z])/g, " $1")
+    .replace(/^./, (str) => str.toUpperCase())
+    .trim();
+};
+
+export const DeploymentsListControlCloud = () => {
+  const { filters, updateFilters, removeFilter } = useFilters();
+
+  return (
+    <ControlCloud
+      historicalWindow={HISTORICAL_DATA_WINDOW}
+      formatFieldName={formatFieldName}
+      filters={filters}
+      removeFilter={removeFilter}
+      updateFilters={updateFilters}
+    />
+  );
+};
@@ -0,0 +1,84 @@
+import { DatetimePopover } from "@/components/logs/datetime/datetime-popover";
+import { cn } from "@/lib/utils";
+import { Calendar } from "@unkey/icons";
+import { Button } from "@unkey/ui";
+import { useState } from "react";
+import { useFilters } from "../../../../hooks/use-filters";
+
+export const DeploymentListDatetime = () => {
+  const [title, setTitle] = useState<string | null>("Last 12 hours");
+  const { filters, updateFilters } = useFilters();
+
+  const timeValues = filters
+    .filter((f) => ["startTime", "endTime", "since"].includes(f.field))
+    .reduce(
+      (acc, f) => ({
+        // biome-ignore lint/performance/noAccumulatingSpread: it's safe to spread
+        ...acc,
+        [f.field]: f.value,
+      }),
+      {},
+    );
+
+  return (
+    <DatetimePopover
+      maxDate={new Date()}
+      initialTimeValues={timeValues}
+      onDateTimeChange={(startTime, endTime, since) => {
+        const activeFilters = filters.filter(
+          (f) => !["endTime", "startTime", "since"].includes(f.field),
+        );
+        if (since !== undefined) {
+          updateFilters([
+            ...activeFilters,
+            {
+              field: "since",
+              value: since,
+              id: crypto.randomUUID(),
+              operator: "is",
+            },
+          ]);
+          return;
+        }
+        if (since === undefined && startTime) {
+          activeFilters.push({
+            field: "startTime",
+            value: startTime,
+            id: crypto.randomUUID(),
+            operator: "is",
+          });
+          if (endTime) {
+            activeFilters.push({
+              field: "endTime",
+              value: endTime,
+              id: crypto.randomUUID(),
+              operator: "is",
+            });
+          }
+        }
+        updateFilters(activeFilters);
+      }}
+      initialTitle={title ?? ""}
+      onSuggestionChange={setTitle}
+    >
+      <div className="group">
+        <Button
+          variant="ghost"
+          size="md"
+          className={cn(
+            "group-data-[state=open]:bg-gray-4 px-2 rounded-lg",
+            title ? "" : "opacity-50",
+            title !== "Last 12 hours" ? "bg-gray-4" : "",
+          )}
+          aria-label="Filter logs by time"
+          aria-haspopup="true"
+          title="Press 'T' to toggle filters"
+          disabled={!title}
+        >
+          <Calendar className="text-gray-9 size-4" />
+          <span className="text-gray-12 font-medium text-[13px]">{title ?? "Loading..."}</span>
+        </Button>
+      </div>
+    </DatetimePopover>
+  );
+};
@@ -0,0 +1,65 @@
+import { FilterCheckbox } from "@/components/logs/checkbox/filter-checkbox";
+import type { GroupedDeploymentStatus } from "../../../../../filters.schema";
+import { deploymentListFilterFieldConfig } from "../../../../../filters.schema";
+import { useFilters } from "../../../../../hooks/use-filters";
+
+type StatusOption = {
+  id: number;
+  status: GroupedDeploymentStatus;
+  display: string;
+  checked: boolean;
+};
+
+const baseOptions: StatusOption[] = [
+  {
+    id: 1,
+    status: "pending",
+    display: "Pending",
+    checked: false,
+  },
+  {
+    id: 2,
+    status: "building",
+    display: "Building",
+    checked: false,
+  },
+  {
+    id: 3,
+    status: "completed",
+    display: "Ready",
+    checked: false,
+  },
+  {
+    id: 4,
+    status: "failed",
+    display: "Failed",
+    checked: false,
+  },
+];
+
+export const DeploymentStatusFilter = () => {
+  const { filters, updateFilters } = useFilters();
+  const getColorClass = deploymentListFilterFieldConfig.status.getColorClass;
+
+  return (
+    <FilterCheckbox
+      options={baseOptions}
+      filterField="status"
+      checkPath="status"
+      renderOptionContent={(checkbox) => (
+        <>
+          <div className={`size-2 ${getColorClass?.(checkbox.status)} rounded-[2px]`} />
+          <span className="text-accent-9 text-xs w-16">{checkbox.display}</span>
+        </>
+      )}
+      createFilterValue={(option) => ({
+        value: option.status,
+        metadata: {
+          colorClass: getColorClass?.(option.status),
+        },
+      })}
+      filters={filters}
+      updateFilters={updateFilters}
+    />
+  );
+};
@@ -0,0 +1,34 @@
+import { FilterCheckbox } from "@/components/logs/checkbox/filter-checkbox";
+import { useFilters } from "../../../../../hooks/use-filters";
+
+type EnvironmentOption = {
+  id: number;
+  environment: string;
+  checked: boolean;
+};
+
+const options: EnvironmentOption[] = [
+  { id: 1, environment: "production", checked: false },
+  { id: 2, environment: "preview", checked: false },
+] as const;
+
+export const EnvironmentFilter = () => {
+  const { filters, updateFilters } = useFilters();
+
+  return (
+    <FilterCheckbox
+      options={options}
+      filterField="environment"
+      checkPath="environment"
+      selectionMode="single"
+      renderOptionContent={(checkbox) => (
+        <div className="text-accent-12 text-xs capitalize">{checkbox.environment}</div>
+      )}
+      createFilterValue={(option) => ({
+        value: option.environment,
+      })}
+      filters={filters}
+      updateFilters={updateFilters}
+    />
+  );
+};
@@ -0,0 +1,118 @@
+import { FiltersPopover } from "@/components/logs/checkbox/filters-popover";
+import { FilterOperatorInput } from "@/components/logs/filter-operator-input";
+import { BarsFilter } from "@unkey/icons";
+import { Button } from "@unkey/ui";
+import { cn } from "@unkey/ui/src/lib/utils";
+import {
+  type DeploymentListFilterField,
+  deploymentListFilterFieldConfig,
+} from "../../../../filters.schema";
+import { useFilters } from "../../../../hooks/use-filters";
+import { DeploymentStatusFilter } from "./components/deployment-status-filter";
+import { EnvironmentFilter } from "./components/environment-filter";
+
+const FIELD_DISPLAY_CONFIG: Record<
+  Exclude<DeploymentListFilterField, "startTime" | "endTime" | "since">,
+  { label: string; shortcut: string }
+> = {
+  status: { label: "Status", shortcut: "s" },
+  environment: { label: "Environment", shortcut: "e" },
+  branch: { label: "Branch", shortcut: "b" },
+} as const;
+
+const displayableFields: (keyof typeof FIELD_DISPLAY_CONFIG)[] = [
+  "status",
+  "environment",
+  "branch",
+];
+
+export const DeploymentListFilters = () => {
+  const { filters, updateFilters } = useFilters();
+
+  // Generate filter items only for displayable fields
+  const filterItems = displayableFields.map((fieldName) => {
+    const fieldConfig = deploymentListFilterFieldConfig[fieldName];
+    const displayConfig = FIELD_DISPLAY_CONFIG[fieldName];
+
+    // Use checkbox components for status and environment
+    if (fieldName === "status") {
+      return {
+        id: fieldName,
+        label: displayConfig.label,
+        shortcut: displayConfig.shortcut,
+        component: <DeploymentStatusFilter />,
+      };
+    }
+
+    if (fieldName === "environment") {
+      return {
+        id: fieldName,
+        label: displayConfig.label,
+        shortcut: displayConfig.shortcut,
+        component: <EnvironmentFilter />,
+      };
+    }
+
+    // Use operator input for other fields (like branch)
+    const options = fieldConfig.operators.map((op) => ({
+      id: op,
+      label: op,
+    }));
+
+    const activeFilter = filters.find((f) => f.field === fieldName);
+
+    return {
+      id: fieldName,
+      label: displayConfig.label,
+      shortcut: displayConfig.shortcut,
+      component: (
+        <FilterOperatorInput
+          label={displayConfig.label}
+          options={options}
+          defaultOption={activeFilter?.operator}
+          defaultText={activeFilter?.value as string}
+          onApply={(operator, text) => {
+            // Remove existing filters for this field
+            const filtersWithoutCurrent = filters.filter((f) => f.field !== fieldName);
+            // Add new filter
+            updateFilters([
+              ...filtersWithoutCurrent,
+              {
+                field: fieldName,
+                id: crypto.randomUUID(),
+                operator,
+                value: text,
+              },
+            ]);
+          }}
+        />
+      ),
+    };
+  });
+
+  return (
+    <FiltersPopover items={filterItems} activeFilters={filters}>
+      <div className="group">
+        <Button
+          variant="ghost"
+          className={cn(
+            "group-data-[state=open]:bg-gray-4 px-2 rounded-lg",
+            filters.length > 0 ? "bg-gray-4" : "",
+          )}
+          aria-label="Filter deployments"
+          aria-haspopup="true"
+          size="md"
+          title="Press 'F' to toggle filters"
+        >
+          <BarsFilter className="text-accent-9 size-4" />
+          <span className="text-accent-12 font-medium text-[13px]">Filter</span>
+          {filters.length > 0 && (
+            <div className="bg-gray-7 rounded h-4 px-1 text-[11px] font-medium text-accent-12 text-center flex items-center justify-center">
+              {filters.length}
+            </div>
+          )}
+        </Button>
+      </div>
+    </FiltersPopover>
+  );
+};