mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-02-01 23:13:36 +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:
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
|
||||
import { Sparkles, PartyPopper } from 'lucide-react'
|
||||
import { AgentAvatar } from './AgentAvatar'
|
||||
import type { AgentMascot } from '../lib/types'
|
||||
import { Card, CardContent } from '@/components/ui/card'
|
||||
|
||||
interface CelebrationOverlayProps {
|
||||
agentName: AgentMascot | 'Unknown'
|
||||
@@ -80,17 +81,18 @@ export function CelebrationOverlay({ agentName, featureName, onComplete }: Celeb
|
||||
</div>
|
||||
|
||||
{/* Celebration card - click to dismiss */}
|
||||
<button
|
||||
type="button"
|
||||
<Card
|
||||
onClick={dismiss}
|
||||
className="neo-card p-6 bg-[var(--color-neo-done)] animate-bounce-in pointer-events-auto cursor-pointer hover:scale-105 transition-transform focus:outline-none focus:ring-2 focus:ring-neo-accent"
|
||||
className="p-6 bg-green-500 border-green-600 animate-bounce-in pointer-events-auto cursor-pointer hover:scale-105 transition-transform focus:outline-none focus:ring-2 focus:ring-primary"
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<CardContent className="p-0 flex flex-col items-center gap-4">
|
||||
{/* Icons */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Sparkles size={24} className="text-neo-pending animate-pulse" />
|
||||
<PartyPopper size={28} className="text-neo-accent" />
|
||||
<Sparkles size={24} className="text-neo-pending animate-pulse" />
|
||||
<Sparkles size={24} className="text-yellow-300 animate-pulse" />
|
||||
<PartyPopper size={28} className="text-white" />
|
||||
<Sparkles size={24} className="text-yellow-300 animate-pulse" />
|
||||
</div>
|
||||
|
||||
{/* Avatar celebrating */}
|
||||
@@ -98,23 +100,23 @@ export function CelebrationOverlay({ agentName, featureName, onComplete }: Celeb
|
||||
|
||||
{/* Message */}
|
||||
<div className="text-center">
|
||||
<h3 className="font-display text-lg font-bold text-neo-text-on-bright mb-1">
|
||||
<h3 className="font-display text-lg font-bold text-white mb-1">
|
||||
Feature Complete!
|
||||
</h3>
|
||||
<p className="text-sm text-neo-text-on-bright/80 max-w-[200px] truncate">
|
||||
<p className="text-sm text-white/80 max-w-[200px] truncate">
|
||||
{featureName}
|
||||
</p>
|
||||
<p className="text-xs text-neo-text-on-bright/60 mt-2">
|
||||
<p className="text-xs text-white/60 mt-2">
|
||||
Great job, {agentName}!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Dismiss hint */}
|
||||
<p className="text-xs text-neo-text-on-bright/40 mt-1">
|
||||
<p className="text-xs text-white/40 mt-1">
|
||||
Click or press Esc to dismiss
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user