Add ListToggle and built-in search filtering to ResourceControls, move Export/Clear buttons to HistoryListPanel

ResourceControls now manages its own search state internally and filters
all three accordion sections (URIs, Templates, Subscriptions) by name
and URI. Added ListToggle to expand/collapse all sections. Moved Export
JSON and Clear All buttons from HistoryControls sidebar to the
HistoryListPanel header for better proximity to the data they act on.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-04-01 19:24:11 -04:00
commit a68933464b
2 changed files with 80 additions and 69 deletions

View file

@ -15,8 +15,6 @@ export const Default: Story = {
searchText: "",
onSearchChange: fn(),
onMethodFilterChange: fn(),
onClearAll: fn(),
onExport: fn(),
},
};
@ -26,7 +24,5 @@ export const WithFilters: Story = {
methodFilter: "tools/call",
onSearchChange: fn(),
onMethodFilterChange: fn(),
onClearAll: fn(),
onExport: fn(),
},
};

View file

@ -1,4 +1,4 @@
import { Button, Group, Select, Stack, TextInput, Title } from "@mantine/core";
import { Select, Stack, TextInput, Title } from "@mantine/core";
const METHOD_OPTIONS = [
"tools/call",
@ -11,18 +11,11 @@ const METHOD_OPTIONS = [
"elicitation/create",
];
const ToolbarButton = Button.withProps({
variant: "light",
size: "sm",
});
export interface HistoryControlsProps {
searchText: string;
methodFilter?: string;
onSearchChange: (text: string) => void;
onMethodFilterChange: (method: string) => void;
onClearAll: () => void;
onExport: () => void;
}
export function HistoryControls({
@ -30,14 +23,10 @@ export function HistoryControls({
methodFilter,
onSearchChange,
onMethodFilterChange,
onClearAll,
onExport,
}: HistoryControlsProps) {
return (
<Stack gap="md">
<Title order={4}>History</Title>
<Title order={5}>Search</Title>
<TextInput
placeholder="Search..."
value={searchText}
@ -52,11 +41,6 @@ export function HistoryControls({
onChange={(value) => onMethodFilterChange(value ?? "")}
clearable
/>
<Group>
<ToolbarButton onClick={onExport}>Export JSON</ToolbarButton>
<ToolbarButton onClick={onClearAll}>Clear All</ToolbarButton>
</Group>
</Stack>
);
}