mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-02-01 06:53:36 +00:00
c917582a64
Migrate UI component library from custom implementations to shadcn/ui: - Add shadcn/ui primitives (Button, Card, Dialog, Input, etc.) - Replace custom styles with Tailwind CSS v4 theme configuration - Remove custom-theme.css in favor of globals.css with @theme directive Fix scroll overflow issues in multiple components: - ProjectSelector: "New Project" button no longer overlays project list - FolderBrowser: folder list now scrolls properly within modal - AgentCard: log modal content stays within bounds - ConversationHistory: conversation list scrolls correctly - KanbanColumn: feature cards scroll within fixed height - ScheduleModal: schedule form content scrolls properly Key technical changes: - Replace ScrollArea component with native overflow-y-auto divs - Add min-h-0 to flex containers to allow proper shrinking - Restructure dropdown layouts with flex-col for fixed footers New files: - ui/components.json (shadcn/ui configuration) - ui/src/components/ui/* (20 UI primitive components) - ui/src/lib/utils.ts (cn utility for class merging) - ui/tsconfig.app.json (app-specific TypeScript config) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
79 lines
2.5 KiB
TypeScript
79 lines
2.5 KiB
TypeScript
import { KanbanColumn } from './KanbanColumn'
|
|
import type { Feature, FeatureListResponse, ActiveAgent } from '../lib/types'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
|
|
interface KanbanBoardProps {
|
|
features: FeatureListResponse | undefined
|
|
onFeatureClick: (feature: Feature) => void
|
|
onAddFeature?: () => void
|
|
onExpandProject?: () => void
|
|
activeAgents?: ActiveAgent[]
|
|
onCreateSpec?: () => void
|
|
hasSpec?: boolean
|
|
}
|
|
|
|
export function KanbanBoard({ features, onFeatureClick, onAddFeature, onExpandProject, activeAgents = [], onCreateSpec, hasSpec = true }: KanbanBoardProps) {
|
|
const hasFeatures = features && (features.pending.length + features.in_progress.length + features.done.length) > 0
|
|
|
|
// Combine all features for dependency status calculation
|
|
const allFeatures = features
|
|
? [...features.pending, ...features.in_progress, ...features.done]
|
|
: []
|
|
|
|
if (!features) {
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{['Pending', 'In Progress', 'Done'].map(title => (
|
|
<Card key={title} className="py-4">
|
|
<CardContent className="p-4">
|
|
<div className="h-8 bg-muted animate-pulse rounded mb-4" />
|
|
<div className="space-y-3">
|
|
{[1, 2, 3].map(i => (
|
|
<div key={i} className="h-24 bg-muted animate-pulse rounded" />
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<KanbanColumn
|
|
title="Pending"
|
|
count={features.pending.length}
|
|
features={features.pending}
|
|
allFeatures={allFeatures}
|
|
activeAgents={activeAgents}
|
|
color="pending"
|
|
onFeatureClick={onFeatureClick}
|
|
onAddFeature={onAddFeature}
|
|
onExpandProject={onExpandProject}
|
|
showExpandButton={hasFeatures}
|
|
onCreateSpec={onCreateSpec}
|
|
showCreateSpec={!hasSpec && !hasFeatures}
|
|
/>
|
|
<KanbanColumn
|
|
title="In Progress"
|
|
count={features.in_progress.length}
|
|
features={features.in_progress}
|
|
allFeatures={allFeatures}
|
|
activeAgents={activeAgents}
|
|
color="progress"
|
|
onFeatureClick={onFeatureClick}
|
|
/>
|
|
<KanbanColumn
|
|
title="Done"
|
|
count={features.done.length}
|
|
features={features.done}
|
|
allFeatures={allFeatures}
|
|
activeAgents={activeAgents}
|
|
color="done"
|
|
onFeatureClick={onFeatureClick}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|