feat: Add 7 organism screen components with Storybook stories
- ServerListScreen: Home page with server card grid and add server menu - ToolsScreen: Three-panel layout (tool list, detail/form, results) - ResourcesScreen: Two-panel with accordion sections and content preview - PromptsScreen: Two-panel with prompt selection and message display - LoggingScreen: Two-panel with log controls and real-time log stream - TasksScreen: Active and completed task card sections - HistoryScreen: Request history with search, filter, and pinned entries Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
39ef184b53
commit
75f6f6452a
1 changed files with 1229 additions and 0 deletions
|
|
@ -0,0 +1,55 @@
|
|||
import { Button, Group, Stack, Text, Title } from '@mantine/core'
|
||||
import { TaskCard } from '../../molecules/TaskCard/TaskCard'
|
||||
import type { TaskCardProps } from '../../molecules/TaskCard/TaskCard'
|
||||
|
||||
export interface TasksScreenProps {
|
||||
activeTasks: TaskCardProps[]
|
||||
completedTasks: TaskCardProps[]
|
||||
onRefresh: () => void
|
||||
onClearHistory: () => void
|
||||
}
|
||||
|
||||
export function TasksScreen({
|
||||
activeTasks,
|
||||
completedTasks,
|
||||
onRefresh,
|
||||
onClearHistory,
|
||||
}: TasksScreenProps) {
|
||||
return (
|
||||
<Stack gap="lg">
|
||||
<Group justify="space-between">
|
||||
<Title order={2}>Tasks</Title>
|
||||
<Button variant="light" onClick={onRefresh}>
|
||||
Refresh
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
<Title order={4}>Active Tasks ({activeTasks.length})</Title>
|
||||
{activeTasks.length === 0 ? (
|
||||
<Text c="dimmed">No active tasks</Text>
|
||||
) : (
|
||||
<Stack gap="md">
|
||||
{activeTasks.map((task) => (
|
||||
<TaskCard key={task.taskId} {...task} />
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
<Group justify="space-between">
|
||||
<Title order={4}>Completed Tasks ({completedTasks.length})</Title>
|
||||
<Button variant="light" size="xs" onClick={onClearHistory}>
|
||||
Clear History
|
||||
</Button>
|
||||
</Group>
|
||||
{completedTasks.length === 0 ? (
|
||||
<Text c="dimmed">No completed tasks</Text>
|
||||
) : (
|
||||
<Stack gap="md">
|
||||
{completedTasks.map((task) => (
|
||||
<TaskCard key={task.taskId} {...task} />
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in a new issue