From a97895c383855d2d56e02f3dc8549f37cba08eaf Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Fri, 22 Aug 2025 02:17:26 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8(frontend)=20auto-close=20device=20?=
 =?UTF-8?q?popover=20when=20opening=20dialogs=20or=20sidepanels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Close device control popover automatically when user opens sidepanels
or external dialogs to prevent confusing UI state.

Improves focus management by ensuring only one interface element
demands user attention at a time, reducing cognitive load during
interactions.
---
 .../controls/Device/AudioDevicesControl.tsx   | 69 ++++++++++---------
 .../controls/Device/SettingsButton.tsx        |  3 +
 .../controls/Device/VideoDeviceControl.tsx    | 54 ++++++++-------
 src/frontend/src/primitives/Popover.tsx       |  2 +-
 4 files changed, 72 insertions(+), 56 deletions(-)

diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx
index 62cfad63..c6fb3784 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/AudioDevicesControl.tsx
@@ -82,42 +82,47 @@ export const AudioDevicesControl = ({
           >
             <RiArrowUpSLine />
           </Button>
-          <div
-            className={css({
-              maxWidth: '36rem',
-              padding: '0.15rem',
-              display: 'flex',
-              gap: '0.5rem',
-            })}
-          >
+          {({ close }) => (
             <div
-              style={{
-                flex: '1 1 0',
-                minWidth: 0,
-              }}
+              className={css({
+                maxWidth: '36rem',
+                padding: '0.15rem',
+                display: 'flex',
+                gap: '0.5rem',
+              })}
             >
-              <SelectDevice
-                context="room"
-                kind={kind}
-                id={audioDeviceId}
-                onSubmit={saveAudioInputDeviceId}
+              <div
+                style={{
+                  flex: '1 1 0',
+                  minWidth: 0,
+                }}
+              >
+                <SelectDevice
+                  context="room"
+                  kind={kind}
+                  id={audioDeviceId}
+                  onSubmit={saveAudioInputDeviceId}
+                />
+              </div>
+              <div
+                style={{
+                  flex: '1 1 0',
+                  minWidth: 0,
+                }}
+              >
+                <SelectDevice
+                  context="room"
+                  kind="audiooutput"
+                  id={audioOutputDeviceId}
+                  onSubmit={saveAudioOutputDeviceId}
+                />
+              </div>
+              <SettingsButton
+                settingTab={SettingsDialogExtendedKey.AUDIO}
+                onPress={close}
               />
             </div>
-            <div
-              style={{
-                flex: '1 1 0',
-                minWidth: 0,
-              }}
-            >
-              <SelectDevice
-                context="room"
-                kind="audiooutput"
-                id={audioOutputDeviceId}
-                onSubmit={saveAudioOutputDeviceId}
-              />
-            </div>
-            <SettingsButton settingTab={SettingsDialogExtendedKey.AUDIO} />
-          </div>
+          )}
         </Popover>
       )}
     </div>
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx
index b17009a9..b1a96fc0 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/SettingsButton.tsx
@@ -6,8 +6,10 @@ import { SettingsDialogExtendedKey } from '@/features/settings/type'
 
 export const SettingsButton = ({
   settingTab,
+  onPress,
 }: {
   settingTab: SettingsDialogExtendedKey
+  onPress?: () => void
 }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
   const { setDialogOpen, setDefaultSelectedKey } = useSettingsDialog()
@@ -22,6 +24,7 @@ export const SettingsButton = ({
       onPress={() => {
         setDefaultSelectedKey(settingTab)
         setDialogOpen(true)
+        onPress?.()
       }}
     >
       <RiSettings3Line size={24} />
diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx
index 836adde8..5c026ac4 100644
--- a/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx
+++ b/src/frontend/src/features/rooms/livekit/components/controls/Device/VideoDeviceControl.tsx
@@ -16,9 +16,9 @@ import { SelectDevice } from './SelectDevice'
 import { SettingsButton } from './SettingsButton'
 import { SettingsDialogExtendedKey } from '@/features/settings/type'
 
-const EffectsButton = () => {
+const EffectsButton = ({ onPress }: { onPress: () => void }) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'selectDevice' })
-  const { toggleEffects } = useSidePanel()
+  const { isEffectsOpen, toggleEffects } = useSidePanel()
   return (
     <Button
       size="sm"
@@ -26,7 +26,10 @@ const EffectsButton = () => {
       tooltip={t('effects')}
       aria-label={t('effects')}
       variant="primaryDark"
-      onPress={toggleEffects}
+      onPress={() => {
+        if (!isEffectsOpen) toggleEffects()
+        onPress()
+      }}
     >
       <RiImageCircleAiFill size={24} />
     </Button>
@@ -125,30 +128,35 @@ export const VideoDeviceControl = ({
           >
             <RiArrowUpSLine />
           </Button>
-          <div
-            className={css({
-              maxWidth: '36rem',
-              padding: '0.15rem',
-              display: 'flex',
-              gap: '0.5rem',
-            })}
-          >
+          {({ close }) => (
             <div
-              style={{
-                flex: '1 1 0',
-                minWidth: 0,
-              }}
+              className={css({
+                maxWidth: '36rem',
+                padding: '0.15rem',
+                display: 'flex',
+                gap: '0.5rem',
+              })}
             >
-              <SelectDevice
-                context="room"
-                kind={kind}
-                id={userChoices.videoDeviceId}
-                onSubmit={saveVideoInputDeviceId}
+              <div
+                style={{
+                  flex: '1 1 0',
+                  minWidth: 0,
+                }}
+              >
+                <SelectDevice
+                  context="room"
+                  kind={kind}
+                  id={userChoices.videoDeviceId}
+                  onSubmit={saveVideoInputDeviceId}
+                />
+              </div>
+              <EffectsButton onPress={close} />
+              <SettingsButton
+                settingTab={SettingsDialogExtendedKey.VIDEO}
+                onPress={close}
               />
             </div>
-            <EffectsButton />
-            <SettingsButton settingTab={SettingsDialogExtendedKey.VIDEO} />
-          </div>
+          )}
         </Popover>
       )}
     </div>
diff --git a/src/frontend/src/primitives/Popover.tsx b/src/frontend/src/primitives/Popover.tsx
index 6e09231c..5ccd995f 100644
--- a/src/frontend/src/primitives/Popover.tsx
+++ b/src/frontend/src/primitives/Popover.tsx
@@ -80,7 +80,7 @@ export const Popover = ({
   ]
   variant?: 'dark' | 'light'
   withArrow?: boolean
-} & DialogProps) => {
+} & Omit<DialogProps, 'children'>) => {
   const [trigger, popoverContent] = children
   return (
     <DialogTrigger>