WIP voice channels

src/app/components/SpaceMenu.svelte

@@ -38,6 +38,8 @@
   import SpaceReports from "@app/components/SpaceReports.svelte"
   import RoomCreate from "@app/components/RoomCreate.svelte"
   import SpaceMenuRoomItem from "@app/components/SpaceMenuRoomItem.svelte"
+  import VoiceRoomItem from "@app/components/VoiceRoomItem.svelte"
+  import VoiceWidget from "@app/components/VoiceWidget.svelte"
   import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
   import {
     ENABLE_ZAPS,
@@ -257,6 +259,7 @@
         {/if}
         {#each $userRooms as h, i (h)}
           <SpaceMenuRoomItem notify {replaceState} {url} {h} />
+          <VoiceRoomItem {url} {h} />
         {/each}
         {#if $otherRooms.length > 0}
           <div class="h-2"></div>
@@ -276,6 +279,7 @@
         {/if}
         {#each $roomSearch.searchValues(term) as h, i (h)}
           <SpaceMenuRoomItem {replaceState} {url} {h} />
+          <VoiceRoomItem {url} {h} />
         {/each}
         {#if $canCreateRoom}
           <SecondaryNavItem {replaceState} onclick={addRoom}>
@@ -286,7 +290,8 @@
       {/if}
     </div>
   </SecondaryNavSection>
-  <div class="flex flex-col gap-2 pb-2 p-4 pt-0">
+  <div class="flex flex-col gap-2 p-4 pb-2 pt-0">
+    <VoiceWidget />
     <Button class="btn btn-neutral btn-sm h-10" onclick={showDetail}>
       <SocketStatusIndicator {url} />
     </Button>

src/app/components/VoiceRoomItem.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import {loadProfile, displayProfileByPubkey} from "@welshman/app"
+  import Volume from "@assets/icons/volume.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
+  import ProfileCircle from "@app/components/ProfileCircle.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
+  import {deriveVoiceParticipants, joinVoiceRoom, currentVoiceSession} from "@app/voice"
+
+  interface Props {
+    url: string
+    h: string
+  }
+
+  const {url, h}: Props = $props()
+
+  const participants = deriveVoiceParticipants(url, h)
+  const isActive = $derived($currentVoiceSession?.url === url && $currentVoiceSession?.h === h)
+
+  const handleClick = () => joinVoiceRoom(url, h)
+
+  $effect(() => {
+    for (const pk of $participants) {
+      loadProfile(pk)
+    }
+  })
+</script>
+
+<div>
+  <SecondaryNavItem onclick={handleClick} class={isActive ? "!bg-base-100 !text-base-content" : ""}>
+    <Icon icon={Volume} size={4} class="opacity-70" />
+    <RoomName {url} {h} />
+  </SecondaryNavItem>
+  {#if $participants.length > 0}
+    <div class="flex flex-col gap-1 pb-1 pl-10">
+      {#each $participants as pk (pk)}
+        <div class="flex items-center gap-2">
+          <ProfileCircle pubkey={pk} size={5} class="h-5 w-5" />
+          <span class="ellipsize text-xs opacity-70">
+            {displayProfileByPubkey(pk)}
+          </span>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>

src/app/components/VoiceWidget.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import {displayRelayUrl} from "@welshman/util"
+  import Microphone from "@assets/icons/microphone.svg?dataurl"
+  import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
+  import PhoneRounded from "@assets/icons/phone-rounded.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import {displayRoom} from "@app/core/state"
+  import {currentVoiceSession, leaveVoiceRoom, toggleMute} from "@app/voice"
+
+  const roomName = $derived(
+    $currentVoiceSession ? displayRoom($currentVoiceSession.url, $currentVoiceSession.h) : "",
+  )
+  const spaceName = $derived($currentVoiceSession ? displayRelayUrl($currentVoiceSession.url) : "")
+
+  const handleDisconnect = () => leaveVoiceRoom()
+  const handleToggleMute = () => toggleMute()
+</script>
+
+{#if $currentVoiceSession}
+  <div class="flex flex-col gap-2 rounded-box bg-base-100 p-3">
+    <div class="flex flex-col gap-0.5">
+      <span class="text-sm font-semibold text-success">Voice Connected</span>
+      <span class="ellipsize text-xs opacity-70">
+        {roomName} / {spaceName}
+      </span>
+    </div>
+    <div class="flex items-center gap-1">
+      <Button
+        class="btn btn-sm btn-square {$currentVoiceSession.muted ? 'btn-error' : 'btn-ghost'}"
+        onclick={handleToggleMute}>
+        <Icon icon={$currentVoiceSession.muted ? VolumeCross : Microphone} size={4} />
+      </Button>
+      <Button class="btn btn-sm btn-square btn-error" onclick={handleDisconnect}>
+        <Icon icon={PhoneRounded} size={4} />
+      </Button>
+    </div>
+  </div>
+{/if}