mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-02-02 23:33:35 +00:00
refactor(ui): migrate to shadcn/ui components and fix scroll issues
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>
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { KanbanColumn } from './KanbanColumn'
|
||||
import type { Feature, FeatureListResponse, ActiveAgent } from '../lib/types'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
|
||||
interface KanbanBoardProps {
|
||||
features: FeatureListResponse | undefined
|
||||
@@ -7,8 +8,8 @@ interface KanbanBoardProps {
|
||||
onAddFeature?: () => void
|
||||
onExpandProject?: () => void
|
||||
activeAgents?: ActiveAgent[]
|
||||
onCreateSpec?: () => void // Callback to start spec creation
|
||||
hasSpec?: boolean // Whether the project has a spec
|
||||
onCreateSpec?: () => void
|
||||
hasSpec?: boolean
|
||||
}
|
||||
|
||||
export function KanbanBoard({ features, onFeatureClick, onAddFeature, onExpandProject, activeAgents = [], onCreateSpec, hasSpec = true }: KanbanBoardProps) {
|
||||
@@ -23,14 +24,16 @@ export function KanbanBoard({ features, onFeatureClick, onAddFeature, onExpandPr
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{['Pending', 'In Progress', 'Done'].map(title => (
|
||||
<div key={title} className="neo-card p-4">
|
||||
<div className="h-8 bg-[var(--color-neo-bg)] animate-pulse mb-4" />
|
||||
<div className="space-y-3">
|
||||
{[1, 2, 3].map(i => (
|
||||
<div key={i} className="h-24 bg-[var(--color-neo-bg)] animate-pulse" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user