modelcontextprotocol/inspector
Watch
1
0
Fork
You've already forked inspector
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

feat: first pass at stlying fix and searching on name/description

Browse source
This commit is contained in:
Cameron Roberts 2025-09-13 11:34:13 +01:00
commit 79fe56237a
1 changed files with 37 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

74
client/src/components/ListPane.tsx
View file

@ -32,7 +32,13 @@ const ListPane = <T extends object>({
if (!searchQuery.trim()) return items; if (!searchQuery.trim()) return items;
return items.filter((item) => { return items.filter((item) => {
const searchableText = JSON.stringify(item).toLowerCase(); console.log('item : ', item);
const searchableText = [
(item as { name?: string }).name || "",
(item as { description?: string }).description || "",
]
.join(" ")
.toLowerCase();
return searchableText.includes(searchQuery.toLowerCase()); return searchableText.includes(searchQuery.toLowerCase());
}); });
}, [items, searchQuery]); }, [items, searchQuery]);
@ -53,43 +59,37 @@ const ListPane = <T extends object>({
return ( return (
<div className="bg-card border border-border rounded-lg shadow"> <div className="bg-card border border-border rounded-lg shadow">
<div className="p-4 border-b border-gray-200 dark:border-border"> <div className="p-4 border-b border-gray-200 dark:border-border">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between gap-4">
<h3 className="font-semibold dark:text-white">{title}</h3> <h3 className="font-semibold dark:text-white flex-shrink-0">
<div className="relative flex items-center"> {title}
<button </h3>
name="search" <div className="flex items-center justify-end min-w-0 flex-1">
aria-label="Search" {!isSearchExpanded ? (
onClick={handleSearchClick} <button
className={`p-2 hover:bg-gray-100 dark:hover:bg-secondary rounded-md transition-all duration-300 ease-in-out ${ name="search"
isSearchExpanded aria-label="Search"
? "opacity-0 scale-75 pointer-events-none" onClick={handleSearchClick}
: "opacity-100 scale-100" className="p-2 hover:bg-gray-100 dark:hover:bg-secondary rounded-md transition-all duration-300 ease-in-out"
}`} >
> <Search className="w-4 h-4 text-muted-foreground" />
<Search className="w-4 h-4 text-muted-foreground" /> </button>
</button> ) : (
<div className="flex items-center w-full max-w-xs">
<div <div className="relative w-full">
className={`absolute right-0 transition-all duration-300 ease-in-out ${ <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" />
isSearchExpanded <Input
? "opacity-100 translate-x-0 w-96" ref={searchInputRef}
: "opacity-0 translate-x-4 w-0" name="search"
}`} type="text"
> placeholder="Search..."
<div className="flex items-center"> value={searchQuery}
<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" /> onChange={(e) => setSearchQuery(e.target.value)}
<Input onBlur={handleSearchBlur}
ref={searchInputRef} className="pl-10 w-full transition-all duration-300 ease-in-out"
name="search" />
type="text" </div>
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> </div>
</div> </div>