feat(webrtc): add UI to select audio/video input and output devices

web/src/components/VoiceControls.tsx

@@ -1,6 +1,9 @@
+import { useState } from 'react';
 import { useVoiceStore } from '../stores/voice.ts';
+import { DeviceSettingsModal } from './DeviceSettingsModal.tsx';
 
 export function VoiceControls() {
+  const [showDeviceSettings, setShowDeviceSettings] = useState(false);
   const isMuted = useVoiceStore((state) => state.isMuted);
   const isDeafened = useVoiceStore((state) => state.isDeafened);
   const isVideoOn = useVoiceStore((state) => state.isVideoOn);
@@ -71,6 +74,13 @@ export function VoiceControls() {
         [ns{noiseSuppression ? '●' : '○'}]
       </button>
       <div className="flex-1" />
+      <button
+        onClick={() => setShowDeviceSettings(true)}
+        className="px-1.5 py-0.5 rounded-sm transition-colors text-gb-fg-s hover:text-gb-fg-f hover:bg-gb-bg-t border border-transparent mr-2"
+        title="Device Settings"
+      >
+        [⚙]
+      </button>
       <button
         onClick={leaveVoice}
         className="px-1.5 py-0.5 rounded-sm text-gb-red hover:bg-gb-red hover:text-gb-bg transition-colors border border-transparent hover:border-gb-red"
@@ -78,6 +88,10 @@ export function VoiceControls() {
       >
         [x]
       </button>
+
+      {showDeviceSettings && (
+        <DeviceSettingsModal onClose={() => setShowDeviceSettings(false)} />
+      )}
     </div>
   );
 }