A local-first note taking app
Esc key always closes modals
Ethan Graf
(Jun 2, 2026, 9:46 PM EDT)
a60230b1
6ccb8078
+15
-2
+2
-1
.opencode/skills/textile-design/components.md
+2
-1
.opencode/skills/textile-design/components.md
···
6
6
7
7
**Reference:** `Modal.tsx`
8
8
9
-
- Overlay: dim + optional blur; `role="dialog"`, `aria-modal="true"`, `aria-label`.
9
+
- Overlay: dim + optional blur; `role="dialog"`, `aria-modal="true"`, `aria-label`. Pressing `Escape` closes the modal.
10
10
- Panel: `rounded-lg`, `border-border`, `shadow-xl`, `max-w-[92vw]`.
11
11
- Header row: `h-11`, `border-b`, title centered, close control `aria-label="Close modal"`, icon `aria-hidden`.
12
+
- `CommandPalette` is intentionally independent (not a real modal) and implements its own overlay markup.
12
13
13
14
## Settings layout
14
15
+13
-1
src/components/Modal.tsx
+13
-1
src/components/Modal.tsx
···
1
-
import type { ReactNode } from 'react';
1
+
import { useEffect, type ReactNode } from 'react';
2
2
3
3
type ModalProps = {
4
4
open: boolean;
···
19
19
bodyClassName,
20
20
children,
21
21
}: ModalProps) {
22
+
useEffect(() => {
23
+
if (!open) return;
24
+
const handleKeyDown = (e: globalThis.KeyboardEvent) => {
25
+
if (e.key === 'Escape') {
26
+
e.preventDefault();
27
+
onClose();
28
+
}
29
+
};
30
+
document.addEventListener('keydown', handleKeyDown);
31
+
return () => document.removeEventListener('keydown', handleKeyDown);
32
+
}, [open, onClose]);
33
+
22
34
if (!open) return null;
23
35
24
36
return (