🐛(frontend) make the device-in-use logic race-free

The device-in-use logic could race when multiple detection events
fired close together (e.g. rapid mic/cam toggles or several devices
becoming busy at once), leading to inconsistent store state.

Refactor the flow so all updates go through a serialized path,
removing the race conditions and keeping the in-use state
consistent regardless of event ordering.

src/frontend/src/features/rooms/hooks/useWatchDeviceReleased.ts

@@ -36,10 +36,18 @@ function useWatchKind(
 
   useEffect(() => {
     if (!inUse) return
-    const id = setInterval(
-      () => void probeDeviceReleased(kind, selectedDeviceId || undefined),
-      RETRY_INTERVAL_MS
-    )
-    return () => clearInterval(id)
+    let stopped = false
+    let timer: number | undefined
+    const tick = async () => {
+      await probeDeviceReleased(kind, selectedDeviceId || undefined)
+      if (!stopped) {
+        timer = window.setTimeout(tick, RETRY_INTERVAL_MS)
+      }
+    }
+    timer = window.setTimeout(tick, RETRY_INTERVAL_MS)
+    return () => {
+      stopped = true
+      window.clearTimeout(timer)
+    }
   }, [kind, inUse, selectedDeviceId])
 }

src/frontend/src/features/rooms/livekit/hooks/useJoinTracks.ts

@@ -151,14 +151,15 @@ function useLocalTrack<T extends LocalAudioTrack | LocalVideoTrack>({
     let cancelled = false
     create()
       .then((newTrack) => {
-        noteDeviceReady(permissionKind)
         if (cancelled) {
           newTrack.stop()
           return
         }
+        noteDeviceReady(permissionKind)
         setTrack(newTrack)
       })
       .catch((error) => {
+        if (cancelled) return
         onMediaPermissionError(
           error as Error,
           permissionKind,