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

36
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,30 +59,23 @@ 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}
</h3>
<div className="flex items-center justify-end min-w-0 flex-1">
{!isSearchExpanded ? (
<button <button
name="search" name="search"
aria-label="Search" aria-label="Search"
onClick={handleSearchClick} onClick={handleSearchClick}
className={`p-2 hover:bg-gray-100 dark:hover:bg-secondary rounded-md transition-all duration-300 ease-in-out ${ 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" /> <Search className="w-4 h-4 text-muted-foreground" />
</button> </button>
) : (
<div <div className="flex items-center w-full max-w-xs">
className={`absolute right-0 transition-all duration-300 ease-in-out ${ <div className="relative w-full">
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" /> <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 <Input
ref={searchInputRef} ref={searchInputRef}
@ -90,6 +89,7 @@ const ListPane = <T extends object>({
/> />
</div> </div>
</div> </div>
)}
</div> </div>
</div> </div>
</div> </div>