feat: Add search functionality to the ListPane component which exposes it for

- Resources
- Prompts
- Tools

client/src/components/ListPane.tsx

@@ -1,4 +1,7 @@
+import { Search } from "lucide-react";
 import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { useState, useMemo, useRef } from "react";
 
 type ListPaneProps<T> = {
   items: T[];
@@ -20,41 +23,109 @@ const ListPane = <T extends object>({
   title,
   buttonText,
   isButtonDisabled,
-}: ListPaneProps<T>) => (
-  <div className="bg-card border border-border rounded-lg shadow">
-    <div className="p-4 border-b border-gray-200 dark:border-border">
-      <h3 className="font-semibold dark:text-white">{title}</h3>
-    </div>
-    <div className="p-4">
-      <Button
-        variant="outline"
-        className="w-full mb-4"
-        onClick={listItems}
-        disabled={isButtonDisabled}
-      >
-        {buttonText}
-      </Button>
-      <Button
-        variant="outline"
-        className="w-full mb-4"
-        onClick={clearItems}
-        disabled={items.length === 0}
-      >
-        Clear
-      </Button>
-      <div className="space-y-2 overflow-y-auto max-h-96">
-        {items.map((item, index) => (
-          <div
-            key={index}
-            className="flex items-center py-2 px-4 rounded hover:bg-gray-50 dark:hover:bg-secondary cursor-pointer"
-            onClick={() => setSelectedItem(item)}
-          >
-            {renderItem(item)}
+}: ListPaneProps<T>) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isSearchExpanded, setIsSearchExpanded] = useState(false);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const filteredItems = useMemo(() => {
+    if (!searchQuery.trim()) return items;
+
+    return items.filter((item) => {
+      const searchableText = JSON.stringify(item).toLowerCase();
+      return searchableText.includes(searchQuery.toLowerCase());
+    });
+  }, [items, searchQuery]);
+
+  const handleSearchClick = () => {
+    setIsSearchExpanded(true);
+    setTimeout(() => {
+      searchInputRef.current?.focus();
+    }, 100);
+  };
+
+  const handleSearchBlur = () => {
+    if (!searchQuery.trim()) {
+      setIsSearchExpanded(false);
+    }
+  };
+
+  return (
+    <div className="bg-card border border-border rounded-lg shadow">
+      <div className="p-4 border-b border-gray-200 dark:border-border">
+        <div className="flex items-center justify-between">
+          <h3 className="font-semibold dark:text-white">{title}</h3>
+          <div className="relative flex items-center">
+            <button
+              onClick={handleSearchClick}
+              className={`p-2 hover:bg-gray-100 dark:hover:bg-secondary rounded-md transition-all duration-300 ease-in-out ${
+                isSearchExpanded
+                  ? "opacity-0 scale-75 pointer-events-none"
+                  : "opacity-100 scale-100"
+              }`}
+            >
+              <Search className="w-4 h-4 text-muted-foreground" />
+            </button>
+
+            <div
+              className={`absolute right-0 transition-all duration-300 ease-in-out ${
+                isSearchExpanded
+                  ? "opacity-100 translate-x-0 w-96"
+                  : "opacity-0 translate-x-4 w-0"
+              }`}
+            >
+              <div className="flex items-center">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none z-10" />
+                <Input
+                  ref={searchInputRef}
+                  type="text"
+                  placeholder="Search..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  onBlur={handleSearchBlur}
+                  className="pl-10 w-full transition-all duration-300 ease-in-out"
+                />
+              </div>
+            </div>
           </div>
-        ))}
+        </div>
+      </div>
+      <div className="p-4">
+        <Button
+          variant="outline"
+          className="w-full mb-4"
+          onClick={listItems}
+          disabled={isButtonDisabled}
+        >
+          {buttonText}
+        </Button>
+        <Button
+          variant="outline"
+          className="w-full mb-4"
+          onClick={clearItems}
+          disabled={items.length === 0}
+        >
+          Clear
+        </Button>
+        <div className="space-y-2 overflow-y-auto max-h-96">
+          {filteredItems.map((item, index) => (
+            <div
+              key={index}
+              className="flex items-center py-2 px-4 rounded hover:bg-gray-50 dark:hover:bg-secondary cursor-pointer"
+              onClick={() => setSelectedItem(item)}
+            >
+              {renderItem(item)}
+            </div>
+          ))}
+          {filteredItems.length === 0 && searchQuery && items.length > 0 && (
+            <div className="text-center py-4 text-muted-foreground">
+              No items found matching &quot;{searchQuery}&quot;
+            </div>
+          )}
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default ListPane;