658ef86944
Theme & styling:
- Add custom "inspector" color palette with dark navy primary
- Change primaryShade to { light: 7, dark: 8 }
- Add Input theme override to apply --inspector-input-background globally
- Add --inspector-input-background token (white in light, dark-9 in dark)
- Override --mantine-color-body in dark mode via cssVariablesResolver
in both main.tsx and Storybook preview.tsx
- Add dark-mode CSS overrides for Select dropdown and option hover
- Add dark-mode CSS override for Accordion control hover
- Rename CSS variable --inspector-status-failed → --inspector-status-error
Component changes:
- CopyButton: increase icon font size to 24px, use --inspector-text-primary
for high-contrast color (black/white per theme)
- TaskControls: remove onClearHistory (moved to TaskListPanel), fix Select
clear button not disappearing by passing null instead of undefined
- TaskListPanel: add onClearCompleted callback, render "Clear" button
next to Completed section header
- HistoryListPanel: move "Clear" button from toolbar to History section
header, rename from "Clear All"
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
import { Button, Group, Select, Stack, TextInput, Title } from "@mantine/core";
|
|
import type { TaskStatus } from "../TaskCard/TaskCard";
|
|
|
|
const STATUS_OPTIONS: TaskStatus[] = [
|
|
"working",
|
|
"input_required",
|
|
"completed",
|
|
"failed",
|
|
"cancelled",
|
|
];
|
|
|
|
const ToolbarButton = Button.withProps({
|
|
variant: "subtle",
|
|
size: "sm",
|
|
});
|
|
|
|
export interface TaskControlsProps {
|
|
searchText: string;
|
|
statusFilter?: string;
|
|
onSearchChange: (text: string) => void;
|
|
onStatusFilterChange: (status: string) => void;
|
|
onRefresh: () => void;
|
|
}
|
|
|
|
export function TaskControls({
|
|
searchText,
|
|
statusFilter,
|
|
onSearchChange,
|
|
onStatusFilterChange,
|
|
onRefresh,
|
|
}: TaskControlsProps) {
|
|
return (
|
|
<Stack gap="md">
|
|
<Group flex={1} justify={"space-between"}>
|
|
<Title order={4}>Tasks</Title>
|
|
<ToolbarButton onClick={onRefresh}>Refresh</ToolbarButton>
|
|
</Group>
|
|
<Title order={5}>Search</Title>
|
|
<TextInput
|
|
placeholder="Search..."
|
|
value={searchText}
|
|
onChange={(event) => onSearchChange(event.currentTarget.value)}
|
|
/>
|
|
|
|
<Title order={6}>Filter by Status</Title>
|
|
<Select
|
|
placeholder="All statuses"
|
|
data={STATUS_OPTIONS}
|
|
value={statusFilter ?? null}
|
|
onChange={(value) => onStatusFilterChange(value ?? "")}
|
|
clearable
|
|
/>
|
|
</Stack>
|
|
);
|
|
}
|