✨(frontend) add auto refocus for effects menu

Restore focus to options button on close, focus first element on open

src/frontend/src/features/rooms/livekit/components/SidePanel.tsx

@@ -169,7 +169,7 @@ export const SidePanel = () => {
       <Panel isOpen={isParticipantsOpen}>
         <ParticipantsList />
       </Panel>
-      <Panel isOpen={isEffectsOpen}>
+      <Panel isOpen={isEffectsOpen} keepAlive={true}>
         <Effects />
       </Panel>
       <Panel isOpen={isChatOpen} keepAlive={true}>

src/frontend/src/features/rooms/livekit/components/effects/Effects.tsx

@@ -5,14 +5,41 @@ import { EffectsConfiguration } from './EffectsConfiguration'
 import { usePersistentUserChoices } from '../../hooks/usePersistentUserChoices'
 import { useCanPublishTrack } from '@/features/rooms/livekit/hooks/useCanPublishTrack'
 import { TrackSource } from '@livekit/protocol'
+import { useSidePanel } from '../../hooks/useSidePanel'
+import { useRestoreFocus } from '@/hooks/useRestoreFocus'
 
 export const Effects = () => {
   const { cameraTrack } = useLocalParticipant()
   const localCameraTrack = cameraTrack?.track as LocalVideoTrack
   const { saveProcessorSerialized } = usePersistentUserChoices()
+  const { isEffectsOpen } = useSidePanel()
 
   const canPublishCamera = useCanPublishTrack(TrackSource.CAMERA)
 
+  useRestoreFocus(isEffectsOpen, {
+    resolveTrigger: (activeEl) => {
+      if (activeEl?.tagName === 'DIV') {
+        return document.querySelector<HTMLElement>('#room-options-trigger')
+      }
+      // For direct button clicks, use the active element as is
+      return activeEl
+    },
+    // Focus the first focusable element when the panel opens
+    onOpened: () => {
+      requestAnimationFrame(() => {
+        // Find the first toggle button (blur light button)
+        const firstButton = document.querySelector<HTMLElement>(
+          '[data-attr="toggle-blur-light"]'
+        )
+        if (firstButton) {
+          firstButton.focus({ preventScroll: true })
+        }
+      })
+    },
+    restoreFocusRaf: true,
+    preventScroll: true,
+  })
+
   return (
     <div
       className={css({