Phase 1: Style refinements and component tweaks from Storybook review

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>
This commit is contained in:
cliffhall 2026-04-17 19:26:21 -04:00
commit 658ef86944

View file

@ -7,7 +7,7 @@ import type { TaskCardProps } from "../../groups/TaskCard/TaskCard";
export interface TasksScreenProps {
tasks: TaskCardProps[];
onRefresh: () => void;
onClearHistory: () => void;
onClearCompleted: () => void;
}
const ScreenLayout = Flex.withProps({
@ -30,7 +30,7 @@ const SidebarCard = Card.withProps({
export function TasksScreen({
tasks,
onRefresh,
onClearHistory,
onClearCompleted,
}: TasksScreenProps) {
const [searchText, setSearchText] = useState("");
const [statusFilter, setStatusFilter] = useState<string | undefined>();
@ -47,7 +47,6 @@ export function TasksScreen({
setStatusFilter(value || undefined)
}
onRefresh={onRefresh}
onClearHistory={onClearHistory}
/>
</SidebarCard>
</Sidebar>
@ -55,6 +54,7 @@ export function TasksScreen({
tasks={tasks}
searchText={searchText}
statusFilter={statusFilter}
onClearCompleted={onClearCompleted}
/>
</ScreenLayout>
);