WIP voice channels

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}