mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-01-30 22:32:06 +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>
84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
import { Wifi, WifiOff } from 'lucide-react'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
|
|
interface ProgressDashboardProps {
|
|
passing: number
|
|
total: number
|
|
percentage: number
|
|
isConnected: boolean
|
|
}
|
|
|
|
export function ProgressDashboard({
|
|
passing,
|
|
total,
|
|
percentage,
|
|
isConnected,
|
|
}: ProgressDashboardProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex-row items-center justify-between space-y-0 pb-4">
|
|
<CardTitle className="text-xl uppercase tracking-wide">
|
|
Progress
|
|
</CardTitle>
|
|
<Badge variant={isConnected ? 'default' : 'destructive'} className="gap-1">
|
|
{isConnected ? (
|
|
<>
|
|
<Wifi size={14} />
|
|
Live
|
|
</>
|
|
) : (
|
|
<>
|
|
<WifiOff size={14} />
|
|
Offline
|
|
</>
|
|
)}
|
|
</Badge>
|
|
</CardHeader>
|
|
|
|
<CardContent>
|
|
{/* Large Percentage */}
|
|
<div className="text-center mb-6">
|
|
<span className="inline-flex items-baseline">
|
|
<span className="text-6xl font-bold tabular-nums">
|
|
{percentage.toFixed(1)}
|
|
</span>
|
|
<span className="text-3xl font-semibold text-muted-foreground">
|
|
%
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
{/* Progress Bar */}
|
|
<div className="h-3 bg-muted rounded-full overflow-hidden mb-6">
|
|
<div
|
|
className="h-full bg-primary rounded-full transition-all duration-500 ease-out"
|
|
style={{ width: `${percentage}%` }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="flex justify-center gap-8 text-center">
|
|
<div>
|
|
<span className="font-mono text-3xl font-bold text-primary">
|
|
{passing}
|
|
</span>
|
|
<span className="block text-sm text-muted-foreground uppercase">
|
|
Passing
|
|
</span>
|
|
</div>
|
|
<div className="text-4xl text-muted-foreground">/</div>
|
|
<div>
|
|
<span className="font-mono text-3xl font-bold">
|
|
{total}
|
|
</span>
|
|
<span className="block text-sm text-muted-foreground uppercase">
|
|
Total
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|