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:
Auto
2026-01-26 18:25:55 +02:00
parent e45b5b064e
commit c917582a64
69 changed files with 4900 additions and 4287 deletions

View File

@@ -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>
)