From c086e3a8d03c358ce9246deb6c6e9da43661f07a Mon Sep 17 00:00:00 2001
From: Alan Buscaglia <gentlemanprogramming@gmail.com>
Date: Mon, 30 Mar 2026 17:59:59 +0200
Subject: [PATCH] =?UTF-8?q?fix(ui):=20always=20show=20search=20input=20?=
 =?UTF-8?q?=E2=80=94=20remove=20collapse/expand=20animation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The search input is now always visible in all tables. Removed:
- Collapsed state (icon-only button with hover to expand)
- isExpanded state and shouldStayExpanded logic
- handleMouseEnter/handleMouseLeave/handleIconClick handlers
- Transition animations for expand/collapse

The input starts at w-64 (or w-[28rem] with badge) and stays visible.
Focus/blur still tracked for border styling only.
---
 ui/components/ui/table/data-table-search.tsx | 55 ++------------------
 1 file changed, 3 insertions(+), 52 deletions(-)

diff --git a/ui/components/ui/table/data-table-search.tsx b/ui/components/ui/table/data-table-search.tsx
index c8b0d7d7e0..d4bb2420b0 100644
--- a/ui/components/ui/table/data-table-search.tsx
+++ b/ui/components/ui/table/data-table-search.tsx
@@ -55,7 +55,6 @@ export const DataTableSearch = ({
   // In controlled mode, track display value separately for immediate feedback
   const [displayValue, setDisplayValue] = useState(controlledValue ?? "");
   const [isLoading, setIsLoading] = useState(false);
-  const [isExpanded, setIsExpanded] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const id = useId();
   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
@@ -80,9 +79,6 @@ export const DataTableSearch = ({
   const searchParam = paramPrefix ? `${paramPrefix}Search` : "filter[search]";
   const pageParam = paramPrefix ? `${paramPrefix}Page` : "page";
 
-  // Keep expanded if there's a value or input is focused or badge is present
-  const shouldStayExpanded = value.length > 0 || isFocused || hasBadge;
-
   // Sync with URL on mount (only for uncontrolled mode)
   useEffect(() => {
     if (isControlled) return;
@@ -132,67 +128,22 @@ export const DataTableSearch = ({
     };
   }, []);
 
-  const handleMouseEnter = () => {
-    setIsExpanded(true);
-  };
-
-  const handleMouseLeave = () => {
-    if (!shouldStayExpanded) {
-      setIsExpanded(false);
-    }
-  };
-
   const handleFocus = () => {
     setIsFocused(true);
-    setIsExpanded(true);
   };
 
   const handleBlur = () => {
     setIsFocused(false);
-    if (!value && !hasBadge) {
-      setIsExpanded(false);
-    }
   };
 
-  const handleIconClick = () => {
-    setIsExpanded(true);
-    // Focus input after expansion animation starts
-    setTimeout(() => {
-      inputRef.current?.focus();
-    }, 50);
-  };
-
-  const effectiveExpanded = isExpanded || hasBadge;
-
   return (
     <div
       className={cn(
-        "relative flex items-center transition-all duration-300 ease-in-out",
-        effectiveExpanded ? (hasBadge ? "w-[28rem]" : "w-64") : "w-10",
+        "relative flex items-center",
+        hasBadge ? "w-[28rem]" : "w-64",
       )}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
     >
-      {/* Collapsed state - just icon button */}
-      <button
-        type="button"
-        onClick={handleIconClick}
-        className={cn(
-          "border-border-neutral-tertiary bg-bg-neutral-tertiary absolute left-0 flex size-10 items-center justify-center rounded-md border transition-opacity duration-200",
-          effectiveExpanded ? "pointer-events-none opacity-0" : "opacity-100",
-        )}
-        aria-label="Open search"
-      >
-        <SearchIcon className="text-text-neutral-tertiary size-4" />
-      </button>
-
-      {/* Expanded state - full input with optional badge */}
-      <div
-        className={cn(
-          "relative w-full transition-opacity duration-200",
-          effectiveExpanded ? "opacity-100" : "pointer-events-none opacity-0",
-        )}
-      >
+      <div className="relative w-full">
         <div
           className={cn(
             "border-border-neutral-tertiary bg-bg-neutral-tertiary hover:bg-bg-neutral-secondary flex items-center gap-1.5 rounded-md border transition-colors",