Add ability to joining a voice room while it's in progress

src/app/components/VoiceRoomItem.svelte

@@ -6,7 +6,12 @@
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import {pushToast} from "@app/util/toast"
-  import {deriveVoiceParticipants, joinVoiceRoom, currentVoiceSession} from "@app/voice"
+  import {
+    deriveVoiceParticipants,
+    joinVoiceRoom,
+    leaveVoiceRoom,
+    currentVoiceSession,
+  } from "@app/voice"
 
   interface Props {
     url: string
@@ -18,17 +23,29 @@
   const participants = deriveVoiceParticipants(url, h)
   const isActive = $derived($currentVoiceSession?.url === url && $currentVoiceSession?.h === h)
   let isJoining = $state(false)
+  let joinAbortController: AbortController | undefined
 
   const handleClick = async () => {
-    if (isJoining) return
+    if (isActive) {
+      await leaveVoiceRoom()
+      return
+    }
+    if (isJoining) {
+      joinAbortController?.abort()
+      return
+    }
+    joinAbortController = new AbortController()
     isJoining = true
     try {
-      await joinVoiceRoom(url, h)
+      await joinVoiceRoom(url, h, joinAbortController.signal)
     } catch (e) {
+      if (e instanceof Error && e.message === "Join cancelled") return
+      if (e instanceof DOMException && e.name === "AbortError") return
       const message = e instanceof Error ? e.message : String(e)
       pushToast({theme: "error", message: `Failed to join voice room: ${message}`})
     } finally {
       isJoining = false
+      joinAbortController = undefined
     }
   }
 
@@ -40,10 +57,7 @@
 </script>
 
 <div>
-  <SecondaryNavItem
-    onclick={handleClick}
-    disabled={isJoining}
-    class={isActive ? "!bg-base-100 !text-base-content" : ""}>
+  <SecondaryNavItem onclick={handleClick} class={isActive ? "!bg-base-100 !text-base-content" : ""}>
     {#if isJoining}
       <span class="loading loading-spinner loading-sm"></span>
     {:else}