Add a dialog before joining voice rooms (#109)

After using the voice rooms more since we removed the option for voice-only rooms I think you were right to suggest a dialog box before joining rooms. It felt far to clunky to have to join the voice call any time you just wanted to try to view room members, edit room settings, or just view the recent text chat.

This adds a dialog that allows the user to decline to join the call but still access the text part of the room along with associated settings and controls. It also acts as another confirmation step before turning on the user's microphone, and allows them to choose an audio input so they don't have to mess with the (generally terrible) browser controls for doing so. We should probably have controls to change your audio input and output from within the call as well, but I think this is enough for an MVP.

![Screenshot 2026-03-27 at 11.10.53 AM.png](/attachments/3ac271a6-5d17-4063-9ac6-3e5bdef10ccf)

Co-authored-by: mplorentz <mplorentz@noreply.gitea.coracle.social>
Reviewed-on: coracle/flotilla#109
Co-authored-by: Matt Lorentz <mplorentz@noreply.coracle.social>
Co-committed-by: Matt Lorentz <mplorentz@noreply.coracle.social>

src/app/components/VoiceRoomItem.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
   import cx from "classnames"
+  import {goto} from "$app/navigation"
   import {loadProfile, displayProfileByPubkey} from "@welshman/app"
   import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
   import ProfileCircle from "@app/components/ProfileCircle.svelte"
   import RoomImage from "@app/components/RoomImage.svelte"
   import RoomName from "@app/components/RoomName.svelte"
-  import {handleJoinError} from "@app/components/VoiceWidget.svelte"
   import {makeRoomPath} from "@app/util/routes"
+  import {pushModal} from "@app/util/modal"
+  import VoiceRoomJoinDialog from "@app/components/VoiceRoomJoinDialog.svelte"
+  import {makeRoomId} from "@app/core/state"
   import {
+    VoiceState,
     deriveVoiceParticipants,
-    joinVoiceRoom,
     cancelJoinVoiceRoom,
     currentVoiceRoom,
     voiceState,
@@ -28,21 +31,24 @@
 
   const participants = deriveVoiceParticipants(url, h)
   const isActive = $derived(
-    $voiceState === "connected" && $currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h,
+    $voiceState === VoiceState.Connected && $currentVoiceRoom?.id === makeRoomId(url, h),
   )
   const isJoining = $derived(
-    $voiceState === "joining" && $currentVoiceRoom?.url === url && $currentVoiceRoom?.h === h,
+    $voiceState === VoiceState.Joining && $currentVoiceRoom?.id === makeRoomId(url, h),
   )
 
-  const handleClick = async () => {
+  const handleClick = async (e: MouseEvent) => {
     if (isActive) return
 
     if (isJoining) {
+      e.preventDefault()
       cancelJoinVoiceRoom()
       return
     }
 
-    await joinVoiceRoom(url, h).catch(handleJoinError)
+    e.preventDefault()
+    await goto(makeRoomPath(url, h), {replaceState})
+    pushModal(VoiceRoomJoinDialog, {url, h})
   }
 
   $effect(() => {

src/app/components/VoiceRoomJoinDialog.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import {displayRelayUrl} from "@welshman/util"
+  import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
+  import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
+  import Volume from "@assets/icons/volume.svg?dataurl"
+  import Button from "@lib/components/Button.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Modal from "@lib/components/Modal.svelte"
+  import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import {displayRoom} from "@app/core/state"
+  import {joinVoiceRoom} from "@app/voice"
+  import {popModal} from "@app/util/modal"
+
+  type Props = {
+    url: string
+    h: string
+  }
+
+  const {url, h}: Props = $props()
+
+  const spaceLabel = $derived(displayRelayUrl(url))
+
+  let audioInputs = $state<MediaDeviceInfo[]>([])
+  let selectedDeviceId = $state("")
+  let startWithoutMic = $state(false)
+
+  const loadDevices = async () => {
+    if (!navigator.mediaDevices?.enumerateDevices) return
+    try {
+      const devices = await navigator.mediaDevices.enumerateDevices()
+      audioInputs = devices.filter(d => d.kind === "audioinput")
+    } catch {
+      audioInputs = []
+    }
+  }
+
+  $effect(() => {
+    void loadDevices()
+  })
+
+  const goBack = () => history.back()
+
+  const joinVoice = async () => {
+    popModal()
+    await joinVoiceRoom(
+      url,
+      h,
+      startWithoutMic,
+      startWithoutMic ? undefined : selectedDeviceId || undefined,
+    )
+  }
+</script>
+
+<Modal>
+  <ModalBody>
+    <ModalHeader>
+      <ModalTitle>Join voice room?</ModalTitle>
+      <ModalSubtitle>
+        <span class="inline-flex flex-wrap items-center justify-center gap-x-1.5 gap-y-1">
+          <Icon icon={Volume} size={4} class="shrink-0" />
+          <span class="ellipsize min-w-0">{displayRoom(url, h)}</span>
+          <span>·</span>
+          <span>{spaceLabel}</span>
+        </span>
+      </ModalSubtitle>
+    </ModalHeader>
+    <p class="text-sm opacity-80">Select a microphone to join the call:</p>
+    <div class="flex flex-col gap-4 pt-2">
+      <div class="flex items-center gap-2">
+        <input
+          id="voice-start-without-mic"
+          type="checkbox"
+          class="checkbox"
+          bind:checked={startWithoutMic} />
+        <label for="voice-start-without-mic" class="text-sm cursor-pointer">
+          Join without microphone (you can unmute later)
+        </label>
+      </div>
+      <FieldInline>
+        {#snippet label()}
+          <p>Microphone</p>
+        {/snippet}
+        {#snippet input()}
+          <select
+            class="select select-bordered w-full"
+            bind:value={selectedDeviceId}
+            disabled={startWithoutMic}
+            aria-label="Microphone">
+            <option value="">Default microphone</option>
+            {#each audioInputs as d (d.deviceId)}
+              <option value={d.deviceId}>
+                {d.label || `Microphone ${d.deviceId.slice(0, 8)}…`}
+              </option>
+            {/each}
+          </select>
+        {/snippet}
+      </FieldInline>
+    </div>
+  </ModalBody>
+  <ModalFooter>
+    <Button class="btn btn-link" onclick={goBack}>
+      <Icon icon={AltArrowLeft} />
+      Don't join
+    </Button>
+    <Button class="btn btn-primary" onclick={joinVoice}>
+      Join voice
+      <Icon icon={AltArrowRight} />
+    </Button>
+  </ModalFooter>
+</Modal>

src/app/components/VoiceWidget.svelte

@@ -1,22 +1,8 @@
-<script module lang="ts">
-  import {AbortError, TimeoutError} from "$lib/util"
-  import {VoiceJoinMembershipError} from "@app/voice"
-  import {pushToast} from "@app/util/toast"
-
-  export function handleJoinError(e: unknown) {
-    if (e instanceof AbortError) return
-    console.error("Failed to join voice room", e)
-    let message = "Failed to join voice room"
-    if (e instanceof VoiceJoinMembershipError) message = e.message
-    else if (e instanceof TimeoutError)
-      message = "Connection timed out. Please check your network and try again."
-    else if (e instanceof Error && e.message === "No signer available") message = e.message
-    pushToast({theme: "error", message})
-  }
-</script>
-
 <script lang="ts">
+  import {readable} from "svelte/store"
   import {fly} from "svelte/transition"
+  import {goto} from "$app/navigation"
+  import {page} from "$app/stores"
   import {displayRelayUrl} from "@welshman/util"
   import Microphone from "@assets/icons/microphone.svg?dataurl"
   import MicrophoneOff from "@assets/icons/microphone-off.svg?dataurl"
@@ -25,36 +11,69 @@
   import CloseCircle from "@assets/icons/close-circle.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import {displayRoom} from "@app/core/state"
+  import VoiceRoomJoinDialog from "@app/components/VoiceRoomJoinDialog.svelte"
   import {
+    decodeRelay,
+    deriveRoom,
+    displayRoom,
+    getRoomType,
+    RoomType,
+    type Room,
+  } from "@app/core/state"
+  import {pushModal} from "@app/util/modal"
+  import {makeRoomPath} from "@app/util/routes"
+  import {
+    VoiceState,
     currentVoiceSession,
     currentVoiceRoom,
     voiceState,
     leaveVoiceRoom,
     toggleMute,
-    rejoinVoiceRoom,
     cancelJoinVoiceRoom,
   } from "@app/voice"
 
-  const roomName = $derived(
-    $currentVoiceRoom ? displayRoom($currentVoiceRoom.url, $currentVoiceRoom.h) : "",
+  const {relay, h} = $derived($page.params)
+  const url = $derived(relay ? decodeRelay(relay) : undefined)
+  const displayedRoomStore = $derived(
+    url && h && typeof h === "string" ? deriveRoom(url, h) : readable(undefined),
   )
-  const spaceName = $derived($currentVoiceRoom ? displayRelayUrl($currentVoiceRoom.url) : "")
+  const routeDisplayedRoom = $derived($displayedRoomStore)
 
-  const handleRejoin = () => {
-    void rejoinVoiceRoom().catch(handleJoinError)
+  const targetRoom = $derived.by((): Room | undefined => {
+    if ($voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected) {
+      return $currentVoiceRoom
+    }
+    if ($voiceState === VoiceState.Disconnected) {
+      if (routeDisplayedRoom) {
+        if (getRoomType(routeDisplayedRoom) === RoomType.Voice) {
+          return routeDisplayedRoom
+        }
+        return undefined
+      }
+      return $currentVoiceRoom
+    }
+    return $currentVoiceRoom
+  })
+
+  const roomName = $derived(targetRoom ? displayRoom(targetRoom.url, targetRoom.h) : "")
+  const spaceName = $derived(targetRoom ? displayRelayUrl(targetRoom.url) : "")
+
+  const openJoinDialog = async () => {
+    if (!targetRoom) return
+    await goto(makeRoomPath(targetRoom.url, targetRoom.h))
+    pushModal(VoiceRoomJoinDialog, {url: targetRoom.url, h: targetRoom.h})
   }
 </script>
 
-{#if $currentVoiceRoom}
+{#if targetRoom}
   <div
     in:fly={{y: 60, duration: 350}}
     out:fly={{y: 60, duration: 250}}
     class="flex flex-col gap-2 rounded-box bg-base-100 p-3">
     <div class="flex flex-col gap-0.5">
-      {#if $voiceState === "joining"}
+      {#if $voiceState === VoiceState.Joining}
         <span class="text-sm font-semibold text-warning">Joining...</span>
-      {:else if $voiceState === "connected"}
+      {:else if $voiceState === VoiceState.Connected}
         <span class="text-sm font-semibold text-success">Voice Connected</span>
       {:else}
         <span class="text-sm font-semibold text-neutral-content">Disconnected</span>
@@ -64,7 +83,7 @@
       </span>
     </div>
     <div class="flex items-center gap-1">
-      {#if $voiceState === "joining"}
+      {#if $voiceState === VoiceState.Joining}
         <span class="loading loading-spinner loading-sm"></span>
         <Button
           data-tip="Cancel"
@@ -72,7 +91,7 @@
           onclick={cancelJoinVoiceRoom}>
           <Icon icon={CloseCircle} size={4} />
         </Button>
-      {:else if $voiceState === "connected" && $currentVoiceSession}
+      {:else if $voiceState === VoiceState.Connected && $currentVoiceSession}
         <Button
           data-tip={$currentVoiceSession.muted ? "Unmute" : "Mute"}
           class="center tooltip tooltip-top btn btn-sm btn-square {$currentVoiceSession.muted
@@ -91,7 +110,7 @@
         <Button
           data-tip="Join Voice"
           class="center tooltip tooltip-top btn btn-sm btn-square btn-success"
-          onclick={handleRejoin}>
+          onclick={openJoinDialog}>
           <Icon icon={PhoneCallingRounded} size={4} />
         </Button>
       {/if}