Normalize screen layouts: extract control groups, unify sidebar widths, and refactor PromptsScreen

- Extract ToolControls group from ToolsScreen (search, list, list-changed indicator)
- Extract PromptControls and PromptListItem groups for PromptsScreen sidebar
- Refactor PromptsScreen to sidebar + detail layout (matching ResourcesScreen pattern)
- Refactor PromptArgumentsForm to accept a single prompt instead of a dropdown
- Normalize all screen sidebar widths to 340px (Tools, Resources, Prompts, Logs, Tasks, History)
- Convert ToolsScreen from Grid-only to sidebar + Grid layout
- Replace LogControls checkboxes with full-width toggle buttons
- Move Clear/Export buttons from LogControls to LogStreamPanel toolbar
- Make PromptArgumentsForm "Get Prompt" button right-aligned and compact
- Update all affected stories and ConnectedView

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-03-31 17:54:20 -04:00
commit a6724626b7
2 changed files with 627 additions and 233 deletions

View file

@ -0,0 +1,37 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { fn } from "storybook/test";
import { PromptListItem } from "./PromptListItem";
const meta: Meta<typeof PromptListItem> = {
title: "Groups/PromptListItem",
component: PromptListItem,
args: {
onClick: fn(),
},
};
export default meta;
type Story = StoryObj<typeof PromptListItem>;
export const Default: Story = {
args: {
name: "summarize",
description: "Summarize the given text into key points",
selected: false,
},
};
export const Selected: Story = {
args: {
name: "translate",
description: "Translate text from one language to another",
selected: true,
},
};
export const NoDescription: Story = {
args: {
name: "code-review",
selected: false,
},
};

View file

@ -0,0 +1,40 @@
import { Stack, Text, UnstyledButton } from "@mantine/core";
export interface PromptListItemProps {
name: string;
description?: string;
selected: boolean;
onClick: () => void;
}
const NameText = Text.withProps({
fw: 500,
});
const DescriptionText = Text.withProps({
size: "xs",
c: "dimmed",
lineClamp: 1,
});
export function PromptListItem({
name,
description,
selected,
onClick,
}: PromptListItemProps) {
return (
<UnstyledButton
w="100%"
p="sm"
variant="listItem"
bg={selected ? "var(--mantine-primary-color-light)" : undefined}
onClick={onClick}
>
<Stack gap={2}>
<NameText>{name}</NameText>
{description && <DescriptionText>{description}</DescriptionText>}
</Stack>
</UnstyledButton>
);
}