mirror of
https://github.com/siteboon/claudecodeui.git
synced 2026-06-04 11:45:38 +08:00
fix(git-panel): add keyboard handling for Escape key for confirm action modal
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import { useEffect } from 'react';
|
||||
import { Check, Download, Trash2, Upload } from 'lucide-react';
|
||||
import {
|
||||
CONFIRMATION_ACTION_LABELS,
|
||||
@@ -30,6 +31,25 @@ function renderConfirmActionIcon(actionType: ConfirmationRequest['type']) {
|
||||
}
|
||||
|
||||
export default function ConfirmActionModal({ action, onCancel, onConfirm }: ConfirmActionModalProps) {
|
||||
const titleId = action ? `confirmation-title-${action.type}` : undefined;
|
||||
|
||||
useEffect(() => {
|
||||
if (!action) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
onCancel();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, [action, onCancel]);
|
||||
|
||||
if (!action) {
|
||||
return null;
|
||||
}
|
||||
@@ -37,13 +57,20 @@ export default function ConfirmActionModal({ action, onCancel, onConfirm }: Conf
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm" onClick={onCancel} />
|
||||
<div className="relative bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden">
|
||||
<div
|
||||
className="relative bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby={titleId}
|
||||
>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className={`p-2 rounded-full mr-3 ${CONFIRMATION_ICON_CONTAINER_CLASSES[action.type]}`}>
|
||||
{renderConfirmActionIcon(action.type)}
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground">{CONFIRMATION_TITLES[action.type]}</h3>
|
||||
<h3 id={titleId} className="text-lg font-semibold text-foreground">
|
||||
{CONFIRMATION_TITLES[action.type]}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground mb-6">{action.message}</p>
|
||||
|
||||
Reference in New Issue
Block a user