Show VoiceWidget when disconnected but still viewing room page.

src/app/components/VoiceRoomItem.svelte

@@ -10,7 +10,9 @@
   import {
     deriveVoiceParticipants,
     joinVoiceRoom,
-    currentVoiceSession,
+    cancelJoinVoiceRoom,
+    currentVoiceRoom,
+    voiceState,
     isParticipantSpeaking,
     participantKey,
     type VoiceParticipant,
@@ -25,25 +27,26 @@
   const {url, h, replaceState = false}: Props = $props()
 
   const participants = deriveVoiceParticipants(url, h)
-  const isActive = $derived($currentVoiceSession?.url === url && $currentVoiceSession?.h === h)
-  let joinAbortController = $state<AbortController | undefined>(undefined)
+  const isActive = $derived(
+    $voiceState === "connected" && $currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h,
+  )
+  const isJoining = $derived(
+    $voiceState === "joining" && $currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h,
+  )
 
   const handleClick = async () => {
-    if (isActive) {
+    if (isActive) return
+
+    if (isJoining) {
+      cancelJoinVoiceRoom()
       return
     }
-    if (joinAbortController) {
-      joinAbortController.abort()
-      return
-    }
-    joinAbortController = new AbortController()
+
     try {
-      await joinVoiceRoom(url, h, joinAbortController.signal)
+      await joinVoiceRoom(url, h)
     } catch (e) {
       console.error("Failed to join voice room", e)
       pushToast({theme: "error", message: "Failed to join voice room"})
-    } finally {
-      joinAbortController = undefined
     }
   }
 
@@ -61,7 +64,7 @@
   class={cx("!items-start", isActive && "!bg-base-100 !text-base-content")}>
   <div class="flex w-full min-w-0 flex-col gap-2">
     <div class="flex gap-2 items-center">
-      {#if joinAbortController}
+      {#if isJoining}
         <span class="loading loading-spinner loading-sm"></span>
       {:else}
         <RoomImage {url} {h} size={4} />