devin fix

Author: samejr

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx

@@ -5,6 +5,8 @@ import {
   ChevronUpIcon,
   ExclamationTriangleIcon,
   LightBulbIcon,
+  MagnifyingGlassIcon,
+  XMarkIcon,
   UserPlusIcon,
   VideoCameraIcon,
 } from "@heroicons/react/20/solid";
@@ -14,7 +16,7 @@ import { type ActionFunctionArgs, type LoaderFunctionArgs } from "@remix-run/ser
 import { DiscordIcon } from "@trigger.dev/companyicons";
 import { formatDurationMilliseconds } from "@trigger.dev/core/v3";
 import type { TaskRunStatus } from "@trigger.dev/database";
-import { Fragment, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, Suspense, useCallback, useEffect, useRef, useState } from "react";
 import type { PanelHandle } from "react-window-splitter";
 import { Bar, BarChart, ResponsiveContainer, Tooltip, type TooltipProps } from "recharts";
 import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
@@ -36,7 +38,7 @@ import { Callout } from "~/components/primitives/Callout";
 import { formatDateTime } from "~/components/primitives/DateTime";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "~/components/primitives/Dialog";
 import { Header2, Header3 } from "~/components/primitives/Headers";
-import { SearchInput } from "~/components/primitives/SearchInput";
+import { Input } from "~/components/primitives/Input";
 import { NavBar, PageAccessories, PageTitle } from "~/components/primitives/PageHeader";
 import { Paragraph } from "~/components/primitives/Paragraph";
 import { PopoverMenuItem } from "~/components/primitives/Popover";
@@ -70,8 +72,7 @@ import {
 } from "~/components/runs/v3/TaskTriggerSource";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useEventSource } from "~/hooks/useEventSource";
-import { useSearchParams } from "~/hooks/useSearchParam";
-import { matchSorter } from "match-sorter";
+import { useFuzzyFilter } from "~/hooks/useFuzzyFilter";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
 import { findProjectBySlug } from "~/models/project.server";
@@ -87,6 +88,7 @@ import {
   uiPreferencesStorage,
 } from "~/services/preferences/uiPreferences.server";
 import { requireUserId } from "~/services/session.server";
+import { motion } from "framer-motion";
 import { cn } from "~/utils/cn";
 import {
   docsPath,
@@ -174,19 +176,10 @@ export default function Page() {
   const environment = useEnvironment();
   const { tasks, activity, runningStats, durations, usefulLinksPreference } =
     useTypedLoaderData<typeof loader>();
-  const { value: searchValue } = useSearchParams();
-  const search = searchValue("search") ?? "";
-  const filteredItems = useMemo(() => {
-    const terms = search
-      .trim()
-      .split(" ")
-      .filter((t) => t !== "");
-    if (terms.length === 0) return tasks;
-    return terms.reduceRight(
-      (results, term) => matchSorter(results, term, { keys: ["slug", "filePath", "triggerSource"] }),
-      tasks
-    );
-  }, [tasks, search]);
+  const { filterText, setFilterText, filteredItems } = useFuzzyFilter<TaskListItem>({
+    items: tasks,
+    keys: ["slug", "filePath", "triggerSource"],
+  });
 
   const hasTasks = tasks.length > 0;
 
@@ -251,8 +244,13 @@ export default function Page() {
                   {tasks.length === 0 ? <UserHasNoTasks /> : null}
                   <div className="max-h-full overflow-hidden">
                     <div className="flex items-center justify-between gap-1 p-2">
-                      <SearchInput placeholder="Search tasks…" autoFocus />
-                      {!showUsefulLinks && (
+                      <AnimatedSearchField
+                        value={filterText}
+                        onChange={setFilterText}
+                        placeholder="Search tasks…"
+                        autoFocus
+                      />
+                        {!showUsefulLinks && (
                         <Button
                           variant="secondary/small"
                           TrailingIcon={LightBulbIcon}
@@ -871,3 +869,54 @@ function FailedToLoadStats() {
     />
   );
 }
+
+function AnimatedSearchField({
+  value,
+  onChange,
+  placeholder,
+  autoFocus,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  autoFocus?: boolean;
+}) {
+  const [isFocused, setIsFocused] = useState(false);
+
+  return (
+    <motion.div
+      initial={{ width: "auto" }}
+      animate={{ width: isFocused && value.length > 0 ? "24rem" : "auto" }}
+      transition={{ type: "spring", stiffness: 300, damping: 30 }}
+      className="relative h-6 min-w-52"
+    >
+      <Input
+        type="text"
+        variant="secondary-small"
+        placeholder={placeholder}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        fullWidth
+        autoFocus={autoFocus}
+        className={cn(isFocused && "placeholder:text-text-dimmed/70")}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") e.currentTarget.blur();
+        }}
+        icon={<MagnifyingGlassIcon className="size-4" />}
+        accessory={
+          value.length > 0 ? (
+            <button
+              type="button"
+              onClick={() => onChange("")}
+              className="flex size-4.5 items-center justify-center rounded-[2px] border border-text-dimmed/40 text-text-dimmed transition hover:bg-charcoal-600 hover:text-text-bright"
+            >
+              <XMarkIcon className="size-3" />
+            </button>
+          ) : undefined
+        }
+      />
+    </motion.div>
+  );
+}