Makes LogsSearchInput more generic as it’s being used in multiple places

Author: samejr

…/app/components/logs/LogsSearchInput.tsx …pp/components/primitives/SearchInput.tsxapps/webapp/app/components/logs/LogsSearchInput.tsx renamed to apps/webapp/app/components/primitives/SearchInput.tsx apps/webapp/app/components/logs/LogsSearchInput.tsx renamed to apps/webapp/app/components/primitives/SearchInput.tsx

@@ -6,22 +6,25 @@ import { ShortcutKey } from "~/components/primitives/ShortcutKey";
 import { useSearchParams } from "~/hooks/useSearchParam";
 import { cn } from "~/utils/cn";
 
-export type LogsSearchInputProps = {
+export type SearchInputProps = {
   placeholder?: string;
+  /** Additional URL params to reset when searching or clearing (e.g. pagination). Defaults to ["cursor", "direction"]. */
+  resetParams?: string[];
 };
 
-export function LogsSearchInput({ placeholder = "Search logs…" }: LogsSearchInputProps) {
+export function SearchInput({
+  placeholder = "Search logs…",
+  resetParams = ["cursor", "direction"],
+}: SearchInputProps) {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const { value, replace, del } = useSearchParams();
 
-  // Get initial search value from URL
   const initialSearch = value("search") ?? "";
 
   const [text, setText] = useState(initialSearch);
   const [isFocused, setIsFocused] = useState(false);
 
-  // Update text when URL search param changes (only when not focused to avoid overwriting user input)
   useEffect(() => {
     const urlSearch = value("search") ?? "";
     if (urlSearch !== text && !isFocused) {
@@ -30,21 +33,22 @@ export function LogsSearchInput({ placeholder = "Search logs…" }: LogsSearchIn
   }, [value, text, isFocused]);
 
   const handleSubmit = useCallback(() => {
+    const resetValues = Object.fromEntries(resetParams.map((p) => [p, undefined]));
     if (text.trim()) {
-      replace({ search: text.trim() });
+      replace({ search: text.trim(), ...resetValues });
     } else {
-      del("search");
+      del(["search", ...resetParams]);
     }
-  }, [text, replace, del]);
+  }, [text, replace, del, resetParams]);
 
   const handleClear = useCallback(
     (e: React.MouseEvent<HTMLButtonElement>) => {
       e.preventDefault();
       e.stopPropagation();
       setText("");
-      del(["search", "cursor", "direction"]);
+      del(["search", ...resetParams]);
     },
-    [del]
+    [del, resetParams]
   );
 
   return (
@@ -82,12 +86,12 @@ export function LogsSearchInput({ placeholder = "Search logs…" }: LogsSearchIn
           icon={<MagnifyingGlassIcon className="size-4" />}
           accessory={
             text.length > 0 ? (
-              <div className="-mr-1 flex items-center gap-1">
-                <ShortcutKey shortcut={{ key: "enter" }} variant="small" />
+              <div className="-mr-1 flex items-center gap-1.5">
+                <ShortcutKey shortcut={{ key: "enter" }} variant="medium" className="border-none" />
                 <button
                   type="button"
                   onClick={handleClear}
-                  className="flex size-4.5 items-center justify-center rounded-[2px] border border-text-dimmed/40 text-text-dimmed hover:bg-charcoal-700 hover:text-text-bright"
+                  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"
                   title="Clear search"
                 >
                   <XMarkIcon className="size-3" />

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

@@ -1,18 +1,13 @@
 import { conform, useForm } from "@conform-to/react";
 import { parse } from "@conform-to/zod";
-import {
-  ArrowRightIcon,
-  ArrowUpCircleIcon,
-  CheckIcon,
-  MagnifyingGlassIcon,
-  PlusIcon,
-} from "@heroicons/react/20/solid";
+import { ArrowRightIcon, ArrowUpCircleIcon, CheckIcon, PlusIcon } from "@heroicons/react/20/solid";
 import { BookOpenIcon } from "@heroicons/react/24/solid";
 import { DialogClose } from "@radix-ui/react-dialog";
 import { Form, useActionData, useLocation, useSearchParams } from "@remix-run/react";
 import { type ActionFunctionArgs, json, type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { GitMeta } from "@trigger.dev/core/v3";
 import { useCallback, useEffect, useState } from "react";
+import { SearchInput } from "~/components/primitives/SearchInput";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { z } from "zod";
 import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
@@ -62,7 +57,7 @@ import { InfoIconTooltip, SimpleTooltip } from "~/components/primitives/Tooltip"
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useOrganization } from "~/hooks/useOrganizations";
 import { useProject } from "~/hooks/useProject";
-import { useThrottle } from "~/hooks/useThrottle";
+
 import { redirectWithErrorMessage, redirectWithSuccessMessage } from "~/models/message.server";
 import { BranchesPresenter } from "~/presenters/v3/BranchesPresenter.server";
 import { logger } from "~/services/logger.server";
@@ -434,42 +429,23 @@ export default function Page() {
 
 export function BranchFilters() {
   const [searchParams, setSearchParams] = useSearchParams();
-  const { search, showArchived, page } = BranchesOptions.parse(
-    Object.fromEntries(searchParams.entries())
-  );
+  const { showArchived } = BranchesOptions.parse(Object.fromEntries(searchParams.entries()));
 
-  const handleFilterChange = useCallback((filterType: string, value: string | undefined) => {
+  const handleArchivedChange = useCallback((checked: boolean) => {
     setSearchParams((s) => {
-      if (value) {
-        searchParams.set(filterType, value);
+      if (checked) {
+        s.set("showArchived", "true");
       } else {
-        searchParams.delete(filterType);
+        s.delete("showArchived");
       }
-      searchParams.delete("page");
-      return searchParams;
+      s.delete("page");
+      return s;
     });
   }, []);
 
-  const handleArchivedChange = useCallback((checked: boolean) => {
-    handleFilterChange("showArchived", checked ? "true" : undefined);
-  }, []);
-
-  const handleSearchChange = useThrottle((value: string) => {
-    handleFilterChange("search", value.length === 0 ? undefined : value);
-  }, 300);
-
   return (
-    <div className="flex w-full gap-2">
-      <Input
-        name="search"
-        placeholder="Search branch name"
-        icon={MagnifyingGlassIcon}
-        variant="tertiary"
-        className="grow"
-        defaultValue={search}
-        onChange={(e) => handleSearchChange(e.target.value)}
-      />
-
+    <div className="flex w-full items-center justify-between gap-2">
+      <SearchInput placeholder="Search branch name" resetParams={["page"]} />
       <Switch
         checked={showArchived ?? false}
         onCheckedChange={handleArchivedChange}

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

@@ -14,7 +14,7 @@ import {
 } from "recharts";
 import { TypedAwait, typeddefer, useTypedLoaderData } from "remix-typedjson";
 import { PageBody } from "~/components/layout/AppLayout";
-import { LogsSearchInput } from "~/components/logs/LogsSearchInput";
+import { SearchInput } from "~/components/primitives/SearchInput";
 import { LogsTaskFilter } from "~/components/logs/LogsTaskFilter";
 import { Button } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
@@ -255,7 +255,7 @@ function FiltersBar({
               maxPeriodDays={retentionLimitDays}
               labelName="Occurred"
             />
-            <LogsSearchInput placeholder="Search errors..." />
+            <SearchInput placeholder="Search errors…" />
             {hasFilters && (
               <Form className="h-6">
                 <Button
@@ -270,7 +270,7 @@ function FiltersBar({
           <>
             <LogsTaskFilter possibleTasks={[]} />
             <TimeFilter defaultPeriod={defaultPeriod} maxPeriodDays={retentionLimitDays} />
-            <LogsSearchInput placeholder="Search errors..." />
+            <SearchInput placeholder="Search errors…" />
             {hasFilters && (
               <Form className="h-6">
                 <Button

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

@@ -26,7 +26,7 @@ import { Paragraph } from "~/components/primitives/Paragraph";
 import { Callout } from "~/components/primitives/Callout";
 import { LogsTable } from "~/components/logs/LogsTable";
 import { LogDetailView } from "~/components/logs/LogDetailView";
-import { LogsSearchInput } from "~/components/logs/LogsSearchInput";
+import { SearchInput } from "~/components/primitives/SearchInput";
 import { LogsLevelFilter } from "~/components/logs/LogsLevelFilter";
 import { LogsTaskFilter } from "~/components/logs/LogsTaskFilter";
 import { LogsRunIdFilter } from "~/components/logs/LogsRunIdFilter";
@@ -271,7 +271,7 @@ function FiltersBar({
             <LogsRunIdFilter />
             <TimeFilter defaultPeriod={defaultPeriod} maxPeriodDays={retentionLimitDays} />
             <LogsLevelFilter />
-            <LogsSearchInput />
+            <SearchInput />
             {hasFilters && (
               <Form className="h-6">
                 <Button
@@ -288,7 +288,7 @@ function FiltersBar({
             <LogsRunIdFilter />
             <TimeFilter defaultPeriod={defaultPeriod} maxPeriodDays={retentionLimitDays} />
             <LogsLevelFilter />
-            <LogsSearchInput />
+            <SearchInput />
             {hasFilters && (
               <Form className="h-6">
                 <Button