From 72af8264024ebd93147ae4bbfbce7fd49750b432 Mon Sep 17 00:00:00 2001
From: Cyril <c.gromoff@gmail.com>
Date: Mon, 13 Jul 2026 13:59:36 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BF=EF=B8=8F(frontend)=20close=20side=20p?=
 =?UTF-8?q?anel=20with=20Escape=20key?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useEscapeToClose: close panel on Escape, restore focus, let chat input bubble
---
 CHANGELOG.md                                  |  1 +
 .../rooms/livekit/components/SidePanel.tsx    | 13 +++++++---
 .../rooms/livekit/components/chat/Input.tsx   | 10 ++++---
 src/frontend/src/hooks/useEscapeToClose.ts    | 26 +++++++++++++++++++
 4 files changed, 42 insertions(+), 8 deletions(-)
 create mode 100644 src/frontend/src/hooks/useEscapeToClose.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 34bcdf60..0eea21ff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to
 - ♻️(frontend) inline model weights to avoid loading them from remote
 - ♻️(frontend) inline MediaPipe WASM modules to avoid loading from remote
 - ⬆️(frontend) upgrade posthog-js from 1.387.0 to 1.391.2
+- ♿️(frontend) close side panel with Escape key #1507
 
 ### Fixed
 
diff --git a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
index 444aa927..e59f3089 100644
--- a/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/SidePanel.tsx
@@ -16,6 +16,7 @@ import { Info } from './Info'
 import { HStack } from '@/styled-system/jsx'
 import { useReactionsToolbar } from '@/features/reactions/hooks/useReactionsToolbar'
 import { useRestoreFocus } from '@/hooks/useRestoreFocus'
+import { useEscapeToClose } from '@/hooks/useEscapeToClose'
 
 type StyledSidePanelProps = {
   title: string
@@ -188,21 +189,25 @@ export const SidePanel = () => {
     focusAside()
   }, [activePanelId, focusAside])
 
+  const closePanel = useCallback(() => {
+    layoutStore.activePanelId = null
+    layoutStore.activeSubPanelId = null
+  }, [])
+
   useRestoreFocus(isSidePanelOpen, {
     onOpened: handlePanelOpened,
     preventScroll: true,
     activeKey: activePanelId,
   })
 
+  useEscapeToClose(isSidePanelOpen, asideRef, closePanel)
+
   return (
     <StyledSidePanel
       ref={asideRef}
       title={title}
       ariaLabel={t('ariaLabel', { title })}
-      onClose={() => {
-        layoutStore.activePanelId = null
-        layoutStore.activeSubPanelId = null
-      }}
+      onClose={closePanel}
       closeButtonTooltip={t('closeButton', {
         content: t(`content.${activeSubPanelId || activePanelId}`),
       })}
diff --git a/src/frontend/src/features/rooms/livekit/components/chat/Input.tsx b/src/frontend/src/features/rooms/livekit/components/chat/Input.tsx
index e3de0362..8b0a6aac 100644
--- a/src/frontend/src/features/rooms/livekit/components/chat/Input.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/chat/Input.tsx
@@ -35,6 +35,11 @@ export const ChatInput = ({
     if (!isDisabled) handleSubmit()
   }
 
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key !== 'Escape') e.stopPropagation()
+    submitOnEnter(e)
+  }
+
   useEffect(() => {
     const resize = () => {
       if (!inputRef.current) return
@@ -79,10 +84,7 @@ export const ChatInput = ({
     >
       <TextArea
         ref={inputRef}
-        onKeyDown={(e) => {
-          e.stopPropagation()
-          submitOnEnter(e)
-        }}
+        onKeyDown={handleKeyDown}
         onKeyUp={(e) => e.stopPropagation()}
         placeholder={t('textArea.placeholder')}
         value={text}
diff --git a/src/frontend/src/hooks/useEscapeToClose.ts b/src/frontend/src/hooks/useEscapeToClose.ts
new file mode 100644
index 00000000..9c341eba
--- /dev/null
+++ b/src/frontend/src/hooks/useEscapeToClose.ts
@@ -0,0 +1,26 @@
+import { useEffect, useRef, type RefObject } from 'react'
+
+export const useEscapeToClose = (
+  isActive: boolean,
+  containerRef: RefObject<HTMLElement | null>,
+  onClose: () => void
+) => {
+  const onCloseRef = useRef(onClose)
+  useEffect(() => {
+    onCloseRef.current = onClose
+  })
+
+  useEffect(() => {
+    if (!isActive) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return
+      if (!containerRef.current?.contains(document.activeElement)) return
+      e.stopPropagation()
+      onCloseRef.current()
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [isActive, containerRef])
+}