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:
parent
eca6cf7665
commit
a6724626b7
2 changed files with 627 additions and 233 deletions
|
|
@ -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,
|
||||
},
|
||||
};
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue