From 14f0189b7b15bda73b626471039d45a5aa0bba30 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 20 Mar 2026 16:54:00 +0000
Subject: [PATCH] Add Escape key support to close alignment panel

Pressing Escape now triggers cancelAlignment, same as clicking the Cancel button.
Also wires MUI Dialog's onClose to cancelAlignment so both keyboard and backdrop-click paths work.

https://claude.ai/code/session_01GFFH8RDgpXR1cnfXxukc3A
---
 src/components/WordAlignerDialog.jsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/WordAlignerDialog.jsx b/src/components/WordAlignerDialog.jsx
index 5227e65c..471385f5 100644
--- a/src/components/WordAlignerDialog.jsx
+++ b/src/components/WordAlignerDialog.jsx
@@ -266,6 +266,17 @@ function WordAlignerDialog({
     }
   } = alignmentSuggestionsManage; // type is TUseAlignmentSuggestionsReturn
 
+  useEffect(() => { // close dialog on Escape key
+    if (!showDialog) return;
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') {
+        alignmentActions_?.cancelAlignment();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [showDialog, alignmentActions_]);
+
   useEffect(() => {
     if (shouldShowDialog_ !== showDialog) {
       console.log(`WordAlignerDialog: alignment data changed shouldShowDialog_ ${shouldShowDialog_}`)
@@ -343,7 +354,7 @@ function WordAlignerDialog({
       <Dialog
         fullWidth={true}
         maxWidth={'lg'}
-        onClose={() => {}}
+        onClose={() => alignmentActions_?.cancelAlignment()}
         open={!!showDialog}
         PaperComponent={PaperComponent}
         bounds={bounds}
@@ -378,6 +389,7 @@ function WordAlignerDialog({
     )
   },
   [
+    alignmentActions_,
     contextId,
     errorMessage,
     showDialog,