feat: add confirm dialog and tree delete UI on library page
Adds a reusable ConfirmDialog component and integrates tree deletion into the TreeLibraryPage with permission-gated delete buttons and a destructive confirmation dialog. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
65
frontend/src/components/common/ConfirmDialog.tsx
Normal file
65
frontend/src/components/common/ConfirmDialog.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { Modal } from './Modal'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface ConfirmDialogProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
onConfirm: () => void
|
||||
title: string
|
||||
message: string
|
||||
confirmLabel?: string
|
||||
confirmVariant?: 'destructive' | 'default'
|
||||
isLoading?: boolean
|
||||
}
|
||||
|
||||
export function ConfirmDialog({
|
||||
isOpen,
|
||||
onClose,
|
||||
onConfirm,
|
||||
title,
|
||||
message,
|
||||
confirmLabel = 'Delete',
|
||||
confirmVariant = 'destructive',
|
||||
isLoading = false,
|
||||
}: ConfirmDialogProps) {
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={title}
|
||||
size="sm"
|
||||
footer={
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
onClick={onClose}
|
||||
disabled={isLoading}
|
||||
className={cn(
|
||||
'rounded-md border border-border px-4 py-2 text-sm font-medium',
|
||||
'text-card-foreground hover:bg-accent',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={onConfirm}
|
||||
disabled={isLoading}
|
||||
className={cn(
|
||||
'rounded-md px-4 py-2 text-sm font-medium text-white',
|
||||
'disabled:opacity-50 disabled:cursor-not-allowed',
|
||||
confirmVariant === 'destructive'
|
||||
? 'bg-destructive hover:bg-destructive/90'
|
||||
: 'bg-primary hover:bg-primary/90'
|
||||
)}
|
||||
>
|
||||
{isLoading ? 'Processing...' : confirmLabel}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<p className="text-sm text-muted-foreground">{message}</p>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConfirmDialog
|
||||
Reference in New Issue
Block a user