mirror of
https://github.com/leonvanzyl/autocoder.git
synced 2026-02-04 16:03:08 +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.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
/**
|
|
* ConfirmDialog Component
|
|
*
|
|
* A reusable confirmation dialog using ShadCN Dialog components.
|
|
* Used to confirm destructive actions like deleting projects.
|
|
*/
|
|
|
|
import type { ReactNode } from 'react'
|
|
import { AlertTriangle } from 'lucide-react'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog'
|
|
import { Button } from '@/components/ui/button'
|
|
|
|
interface ConfirmDialogProps {
|
|
isOpen: boolean
|
|
title: string
|
|
message: ReactNode
|
|
confirmLabel?: string
|
|
cancelLabel?: string
|
|
variant?: 'danger' | 'warning'
|
|
isLoading?: boolean
|
|
onConfirm: () => void
|
|
onCancel: () => void
|
|
}
|
|
|
|
export function ConfirmDialog({
|
|
isOpen,
|
|
title,
|
|
message,
|
|
confirmLabel = 'Confirm',
|
|
cancelLabel = 'Cancel',
|
|
variant = 'danger',
|
|
isLoading = false,
|
|
onConfirm,
|
|
onCancel,
|
|
}: ConfirmDialogProps) {
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>
|
|
<DialogContent className="sm:max-w-md">
|
|
<DialogHeader>
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className={`p-2 rounded-lg ${
|
|
variant === 'danger'
|
|
? 'bg-destructive/10 text-destructive'
|
|
: 'bg-primary/10 text-primary'
|
|
}`}
|
|
>
|
|
<AlertTriangle size={20} />
|
|
</div>
|
|
<DialogTitle>{title}</DialogTitle>
|
|
</div>
|
|
</DialogHeader>
|
|
<DialogDescription asChild>
|
|
<div className="text-muted-foreground">{message}</div>
|
|
</DialogDescription>
|
|
<DialogFooter className="gap-2 sm:gap-0">
|
|
<Button variant="outline" onClick={onCancel} disabled={isLoading}>
|
|
{cancelLabel}
|
|
</Button>
|
|
<Button
|
|
variant={variant === 'danger' ? 'destructive' : 'default'}
|
|
onClick={onConfirm}
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? 'Deleting...' : confirmLabel}
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|