feat: add debounced search input

frontend/src/components/ui/SearchInput.tsx

@@ -0,0 +1,103 @@
+import React, { useState, useEffect } from "react";
+import { cn } from "@/lib/utils";
+import { Search, X } from "lucide-react";
+
+export interface SearchInputProps extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "size"
+> {
+  onSearch?: (value: string) => void;
+  debounceMs?: number;
+  className?: string;
+  placeholder?: string;
+  showClearButton?: boolean;
+}
+
+const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  (
+    {
+      className,
+      onSearch,
+      debounceMs = 300,
+      placeholder = "Search...",
+      showClearButton = true,
+      value: controlledValue,
+      onChange,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalValue, setInternalValue] = useState("");
+    const isControlled = controlledValue !== undefined;
+    const currentValue = (
+      isControlled ? controlledValue : internalValue
+    ) as string;
+
+    useEffect(() => {
+      console.log(`[SearchInput] Typing detected: "${currentValue || ""}"`);
+
+      const timer = setTimeout(() => {
+        console.log(
+          `[SearchInput] Debounce completed (${debounceMs}ms) - Triggering search: "${currentValue || ""}"`,
+        );
+        onSearch?.(currentValue || "");
+      }, debounceMs);
+
+      return () => {
+        console.log(
+          `[SearchInput] Debounce timer cleared for: "${currentValue || ""}"`,
+        );
+        clearTimeout(timer);
+      };
+    }, [currentValue, debounceMs, onSearch]);
+
+    const handleClear = () => {
+      console.log("[SearchInput] Clear button clicked");
+      if (!isControlled) {
+        setInternalValue("");
+      }
+      onSearch?.("");
+    };
+
+    return (
+      <div className={cn("relative w-full", className)}>
+        <Search
+          className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stellar-slate"
+          aria-hidden="true"
+        />
+        <input
+          ref={ref}
+          type="text"
+          className={cn(
+            "flex h-10 w-full rounded-md border border-stellar-slate bg-transparent pl-10 pr-10 py-2 text-sm placeholder:text-stellar-slate focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gold-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+            className,
+          )}
+          placeholder={placeholder}
+          value={currentValue}
+          onChange={(e) => {
+            console.log(`[SearchInput] Input changed: "${e.target.value}"`);
+            if (!isControlled) {
+              setInternalValue(e.target.value);
+            }
+            onChange?.(e);
+          }}
+          {...props}
+        />
+        {showClearButton && currentValue && (
+          <button
+            type="button"
+            onClick={handleClear}
+            className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-stellar-slate hover:text-stellar-white transition-colors"
+            aria-label="Clear search"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    );
+  },
+);
+
+SearchInput.displayName = "SearchInput";
+
+export { SearchInput };

frontend/src/components/ui/index.ts

@@ -5,6 +5,7 @@ export { Card } from "./Card";
 export { Modal } from "./Modal";
 export { Dropzone } from "./Dropzone";
 export { EmptyState } from "./EmptyState";
+export { SearchInput } from "./SearchInput";
 export {
   DropdownMenu,
   DropdownMenuTrigger,

frontend/src/hooks/useDebounce.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * Custom hook for debouncing a value
+ * @param value - The value to debounce
+ * @param delay - The debounce delay in milliseconds (default: 300)
+ * @returns The debounced value
+ */
+export function useDebounce<T>(value: T, delay: number = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    console.log(`[useDebounce] Value changed: "${value}" - Timer set for ${delay}ms`)
+
+    const timer = setTimeout(() => {
+      console.log(`[useDebounce] Timer completed - Value updated to: "${value}"`)
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      console.log(`[useDebounce] Timer cleared for value: "${value}"`)
+      clearTimeout(timer)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}