unkeyed · chronark · Sep 15, 2025 · Sep 7, 2025 · Sep 8, 2025 · Sep 9, 2025
@@ -2,13 +2,27 @@ 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 { useEffect, useState } from "react";
 import { useFilters } from "../../../../hooks/use-filters";
 
+const TITLE_EMPTY_DEFAULT = "Select Time Range";
+
 export const DeploymentListDatetime = () => {
-  const [title, setTitle] = useState<string | null>("Last 12 hours");
+  const [title, setTitle] = useState<string | null>(TITLE_EMPTY_DEFAULT);
   const { filters, updateFilters } = useFilters();
 
+  // If none of the filters are set anymore we should reset the title
+  // This can happen when the user manually clears a filter in the url
+  // or in the filter cloud
+  useEffect(() => {
+    for (const filter of filters) {
+      if (["startTime", "endTime", "since"].includes(filter.field)) {
+        return;
+      }
+    }
+    setTitle(TITLE_EMPTY_DEFAULT);
+  }, [filters]);
+
   const timeValues = filters
     .filter((f) => ["startTime", "endTime", "since"].includes(f.field))
     .reduce(

@@ -7,33 +7,28 @@ 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,
+    status: "deploying",
+    display: "Deploying",
   },
   {
     id: 3,
-    status: "completed",
+    status: "ready",
     display: "Ready",
-    checked: false,
   },
   {
     id: 4,
     status: "failed",
     display: "Failed",
-    checked: false,
   },
 ];
 

@@ -1,31 +1,27 @@
 import { FilterCheckbox } from "@/components/logs/checkbox/filter-checkbox";
+import { collection } from "@/lib/collections";
+import { useLiveQuery } from "@tanstack/react-db";
 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();
 
+  const environments = useLiveQuery((q) => q.from({ environment: collection.environments }));
+
   return (
     <FilterCheckbox
-      options={options}
+      options={environments.data.map((environment, i) => ({
+        id: i,
+        slug: environment.slug,
+      }))}
       filterField="environment"
-      checkPath="environment"
+      checkPath="slug"
       selectionMode="single"
       renderOptionContent={(checkbox) => (
-        <div className="text-accent-12 text-xs capitalize">{checkbox.environment}</div>
+        <div className="text-accent-12 text-xs capitalize">{checkbox.slug}</div>
       )}
       createFilterValue={(option) => ({
-        value: option.environment,
+        value: option.slug,
       })}
       filters={filters}
       updateFilters={updateFilters}

@@ -6,7 +6,7 @@ import { useFilters } from "../../../../hooks/use-filters";
 export const DeploymentListSearch = () => {
   const { filters, updateFilters } = useFilters();
 
-  const queryLLMForStructuredOutput = trpc.deploy.project.deployment.search.useMutation({
+  const queryLLMForStructuredOutput = trpc.deployment.search.useMutation({
     onSuccess(data) {
       if (data?.filters.length === 0 || !data) {
         toast.error(

@@ -1,6 +1,6 @@
 "use client";
 import { type MenuItem, TableActionPopover } from "@/components/logs/table-action.popover";
-import type { Deployment } from "@/lib/trpc/routers/deploy/project/deployment/list";
+import type { Deployment } from "@/lib/collections";
 import { PenWriting3 } from "@unkey/icons";
 import type { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
 import { useRouter } from "next/navigation";

@@ -2,11 +2,8 @@
 import {
   ArrowDotAntiClockwise,
   CircleCheck,
-  CircleDotted,
   CircleHalfDottedClock,
   CircleWarning,
-  Cloud,
-  CloudUp,
   HalfDottedCirclePlay,
   Nut,
 } from "@unkey/icons";
@@ -32,55 +29,31 @@ const statusConfigs: Record<DeploymentStatus, StatusConfig> = {
     textColor: "text-grayA-11",
     iconColor: "text-gray-11",
   },
-  downloading_docker_image: {
-    icon: Cloud,
-    label: "Downloading",
-    bgColor: "bg-gradient-to-r from-infoA-5 to-transparent",
-    textColor: "text-infoA-11",
-    iconColor: "text-info-11",
-    animated: true,
-  },
-  building_rootfs: {
+  building: {
     icon: Nut,
     label: "Building",
     bgColor: "bg-gradient-to-r from-infoA-5 to-transparent",
     textColor: "text-infoA-11",
     iconColor: "text-info-11",
     animated: true,
   },
-  uploading_rootfs: {
-    icon: CloudUp,
-    label: "Uploading",
-    bgColor: "bg-gradient-to-r from-infoA-5 to-transparent",
-    textColor: "text-infoA-11",
-    iconColor: "text-info-11",
-    animated: true,
-  },
-  creating_vm: {
-    icon: CircleDotted,
-    label: "Creating VM",
-    bgColor: "bg-gradient-to-r from-infoA-5 to-transparent",
-    textColor: "text-infoA-11",
-    iconColor: "text-info-11",
-    animated: true,
-  },
-  booting_vm: {
+  deploying: {
     icon: HalfDottedCirclePlay,
-    label: "Booting",
+    label: "Deploying",
     bgColor: "bg-gradient-to-r from-infoA-5 to-transparent",
     textColor: "text-infoA-11",
     iconColor: "text-info-11",
     animated: true,
   },
-  assigning_domains: {
+  network: {
     icon: ArrowDotAntiClockwise,
     label: "Assigning Domains",
     bgColor: "bg-gradient-to-r from-infoA-5 to-transparent",
     textColor: "text-infoA-11",
     iconColor: "text-info-11",
     animated: true,
   },
-  completed: {
+  ready: {
     icon: CircleCheck,
     label: "Ready",
     bgColor: "bg-successA-3",