diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index cc5274e..f49c55d 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -379,8 +379,16 @@ function AppContent() { useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === "Escape") { + // Close modals in order of priority (topmost first) if (showImageLightbox) { setShowImageLightbox(false); + } else if (showEditModal) { + setShowEditModal(false); + resetForm(); + } else if (showShareDialog) { + setShowShareDialog(false); + } else if (showProfile) { + setShowProfile(false); } else if (selectedUser) { setSelectedUser(null); } else if (selectedMed) { @@ -390,7 +398,7 @@ function AppContent() { }; document.addEventListener("keydown", handleEscape); return () => document.removeEventListener("keydown", handleEscape); - }, [selectedMed, showImageLightbox, selectedUser]); + }, [selectedMed, showImageLightbox, selectedUser, showProfile, showShareDialog, showEditModal]); // Check if settings have changed const settingsChanged = settings.emailEnabled !== savedSettings.emailEnabled || diff --git a/frontend/src/components/Auth.tsx b/frontend/src/components/Auth.tsx index 062d2c5..789e650 100644 --- a/frontend/src/components/Auth.tsx +++ b/frontend/src/components/Auth.tsx @@ -499,6 +499,17 @@ export function UserProfile({ onClose }: { onClose?: () => void }) { const [avatarLoading, setAvatarLoading] = useState(false); const fileInputRef = useRef(null); + // Close on Escape key + useEffect(() => { + const handleEscape = (e: KeyboardEvent) => { + if (e.key === "Escape" && onClose) { + onClose(); + } + }; + document.addEventListener("keydown", handleEscape); + return () => document.removeEventListener("keydown", handleEscape); + }, [onClose]); + async function handleAvatarUpload(e: React.ChangeEvent) { const file = e.target.files?.[0]; if (!file) return;