fix(git-panel): add keyboard handling for Escape key for confirm action modal

This commit is contained in:
Haileyesus
2026-02-24 14:13:05 +03:00
parent d08a5d2dcc
commit 57f715fec5

View File

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