feat: select input devices for recordings

Closes #68

js/src/features/compose/compose-overlay.tsx

@@ -12,6 +12,9 @@ import { TextComposeStep } from "@/features/compose/text-compose-step";
 import { ConfigureStreamStep } from "@/features/compose/configure-stream-step";
 import { apiClient } from "@/api/client";
 import { useMediaSettingsStore } from "@/stores/media-settings-store";
+import { useMediaDevicesStore } from "@/stores/media-devices-store";
+import { useMediaDevices } from "@/hooks/use-media-devices";
+import { resolveEffectiveDeviceId } from "@/hooks/use-effective-device-id";
 import { useFileInput } from "@/hooks/use-file-input";
 import { createImageThumbnail } from "@/lib/image-thumbnail";
 import { MAX_ATTACHMENT_SIZE_BYTES, MAX_ATTACHMENTS } from "@/lib/constants";
@@ -59,6 +62,11 @@ export function ComposeOverlay({
   const [recordingSource, setRecordingSource] = useState<RecordingSource>("media");
 
   const recordingMode = useMediaSettingsStore((s) => s.recordingMode);
+  const savedMic = useMediaDevicesStore((s) => s.mic);
+  const savedCamera = useMediaDevicesStore((s) => s.camera);
+  const { audioInputs, videoInputs } = useMediaDevices();
+  const micDeviceId = resolveEffectiveDeviceId(savedMic, audioInputs);
+  const cameraDeviceId = resolveEffectiveDeviceId(savedCamera, videoInputs);
   const userId = useAuthStore((s) => s.user?.id);
   const createParticle = useCreateParticle();
   const createStream = useCreateStreamParticle();
@@ -151,6 +159,8 @@ export function ComposeOverlay({
 
   const { startRecording, stopRecording, cancelRecording } = useRecorder({
     mode: recordingMode,
+    micDeviceId,
+    cameraDeviceId,
     onStreamReady: (stream) => setMediaStream(stream),
     onStreamCleanup: () => setMediaStream(null),
     onFinish: (blob, durationMs, mimeType) => {
@@ -167,6 +177,7 @@ export function ComposeOverlay({
     stopRecording: stopScreenRecording,
     cancelRecording: cancelScreenRecording,
   } = useScreenRecorder({
+    micDeviceId,
     onFinish: (blob, durationMs, mimeType) => {
       setStepSync("reviewing");
       setReviewBlob(blob);