✨(front) option to hide menu on SelectToggleDevice

On mobile we want to be able to hide the chevron and menu.

src/frontend/src/features/rooms/livekit/components/controls/SelectToggleDevice.tsx

@@ -67,11 +67,13 @@ type SelectToggleDeviceProps<T extends ToggleSource> =
   UseTrackToggleProps<T> & {
     onActiveDeviceChange: (deviceId: string) => void
     source: SelectToggleSource
+    hideMenu?: boolean
     variant?: 'dark' | 'light'
   }
 
 export const SelectToggleDevice = <T extends ToggleSource>({
   onActiveDeviceChange,
+  hideMenu,
   variant = 'light',
   ...props
 }: SelectToggleDeviceProps<T>) => {
@@ -94,30 +96,42 @@ export const SelectToggleDevice = <T extends ToggleSource>({
         gap: '1px',
       })}
     >
-      <ToggleDevice {...trackProps} config={config} />
+      <ToggleDevice
-      <Menu variant={variant}>
+        {...trackProps}
-        <Button
+        config={config}
-          tooltip={selectLabel}
+        toggleButtonProps={{
-          aria-label={selectLabel}
+          ...(hideMenu
-          groupPosition="right"
+            ? {
-          square
+                groupPosition: undefined,
-          variant={trackProps.enabled ? 'primaryDark' : 'error2'}
+              }
-        >
+            : {}),
-          <RiArrowDownSLine />
+        }}
-        </Button>
+      />
-        <MenuList
+      {!hideMenu && (
-          items={devices.map((d) => ({
+        <Menu variant={variant}>
-            value: d.deviceId,
+          <Button
-            label: d.label,
+            tooltip={selectLabel}
-          }))}
+            aria-label={selectLabel}
-          selectedItem={activeDeviceId}
+            groupPosition="right"
-          onAction={(value) => {
+            square
-            setActiveMediaDevice(value as string)
+            variant={trackProps.enabled ? 'primaryDark' : 'error2'}
-            onActiveDeviceChange(value as string)
+          >
-          }}
+            <RiArrowDownSLine />
-          variant={variant}
+          </Button>
-        />
+          <MenuList
-      </Menu>
+            items={devices.map((d) => ({
+              value: d.deviceId,
+              label: d.label,
+            }))}
+            selectedItem={activeDeviceId}
+            onAction={(value) => {
+              setActiveMediaDevice(value as string)
+              onActiveDeviceChange(value as string)
+            }}
+            variant={variant}
+          />
+        </Menu>
+      )}
     </div>
   )
 }

src/frontend/src/features/rooms/livekit/components/controls/ToggleDevice.tsx

@@ -7,17 +7,20 @@ import { SelectToggleDeviceConfig } from './SelectToggleDevice'
 import useLongPress from '@/features/shortcuts/useLongPress'
 import { ActiveSpeaker } from '@/features/rooms/components/ActiveSpeaker'
 import { useIsSpeaking, useLocalParticipant } from '@livekit/components-react'
+import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
 export type ToggleDeviceProps = {
   enabled: boolean
   toggle: () => void
   config: SelectToggleDeviceConfig
+  toggleButtonProps?: Partial<ToggleButtonProps>
 }
 
 export const ToggleDevice = ({
   config,
   enabled,
   toggle,
+  toggleButtonProps,
 }: ToggleDeviceProps) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'join' })
 
@@ -64,6 +67,7 @@ export const ToggleDevice = ({
       aria-label={toggleLabel}
       tooltip={toggleLabel}
       groupPosition="left"
+      {...toggleButtonProps}
     >
       <Icon />
     </ToggleButton>

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx

@@ -55,7 +55,7 @@ export function MobileControlBar({
           className={css({
             display: 'flex',
             justifyContent: 'space-between',
-            width: '422px',
+            width: '330px',
           })}
         >
           <LeaveButton />
@@ -68,6 +68,7 @@ export function MobileControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveAudioInputDeviceId(deviceId ?? '')
             }
+            hideMenu={true}
           />
           <SelectToggleDevice
             source={Track.Source.Camera}
@@ -78,6 +79,7 @@ export function MobileControlBar({
             onActiveDeviceChange={(deviceId) =>
               saveVideoInputDeviceId(deviceId ?? '')
             }
+            hideMenu={true}
           />
           <HandToggle />
           <Button