fix lint error, build error, and apply formatting across components

Suppress react-refresh lint rule in Storybook preview config, fix
LogLevel type annotation in LoggingScreen stories, and apply consistent
formatting and layout improvements across multiple components.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-03-24 10:30:43 -04:00
commit fb4ca78726

View file

@ -1,4 +1,12 @@
import { Button, Container, Group, Paper, Stack, Text, Title } from "@mantine/core";
import {
Button,
Container,
Group,
Paper,
Stack,
Text,
Title,
} from "@mantine/core";
import { TaskCard } from "../../molecules/TaskCard/TaskCard";
import type { TaskCardProps } from "../../molecules/TaskCard/TaskCard";
@ -17,43 +25,43 @@ export function TasksScreen({
}: TasksScreenProps) {
return (
<Container size="xl" py="xl">
<Paper withBorder p="md">
<Stack gap="lg">
<Group justify="space-between">
<Title order={4}>Active Tasks ({activeTasks.length})</Title>
<Button variant="light" size="xs" onClick={onRefresh}>
Refresh Tasks
</Button>
</Group>
{activeTasks.length === 0 ? (
<Text c="dimmed">No active tasks</Text>
) : (
<Stack gap="md">
{activeTasks.map((task) => (
<TaskCard key={task.taskId} {...task} />
))}
</Stack>
)}
<Paper withBorder p="md">
<Stack gap="lg">
<Group justify="space-between">
<Title order={4}>Active Tasks ({activeTasks.length})</Title>
<Button variant="light" size="xs" onClick={onRefresh}>
Refresh Tasks
</Button>
</Group>
{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>
{completedTasks.length > 0 && (
<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} />
))}
<Group justify="space-between">
<Title order={4}>Completed Tasks ({completedTasks.length})</Title>
{completedTasks.length > 0 && (
<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>
)}
</Stack>
</Paper>
</Paper>
</Container>
);
}