♿️(frontend) close side panel with Escape key

useEscapeToClose: close panel on Escape, restore focus, let chat input bubble

CHANGELOG.md

@@ -8,6 +8,10 @@ and this project adheres to
 
 ## [Unreleased]
 
+### Changed
+
+- ♿️(frontend) close side panel with Escape key #1507
+
 ### Added
 
 - ✨(agent) support Voxtral realtime as inference engine

src/frontend/src/features/chat/components/ChatTextArea.tsx

@@ -51,7 +51,7 @@ export const ChatTextArea = () => {
   const isDisabled = !textAreaValue.trim() || isSending
 
   const onKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    e.stopPropagation()
+    if (e.key !== 'Escape') e.stopPropagation()
     if (e.key !== 'Enter' || (e.key === 'Enter' && e.shiftKey) || isDisabled)
       return
     e.preventDefault()

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
@@ -194,6 +195,8 @@ export const SidePanel = () => {
     activeKey: activePanelId,
   })
 
+  useEscapeToClose(isSidePanelOpen, asideRef, closeSidePanel)
+
   return (
     <StyledSidePanel
       ref={asideRef}

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])
+}