From 4f2e494959a5a14cabaee9b0414d0a93796199b3 Mon Sep 17 00:00:00 2001
From: mplorentz <mplorentz@noreply.gitea.coracle.social>
Date: Fri, 3 Apr 2026 10:41:05 -0400
Subject: [PATCH] Allow clicking voice widget to go back to call

---
 src/app/components/VoiceWidget.svelte | 56 +++++++++++++++++----------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/app/components/VoiceWidget.svelte b/src/app/components/VoiceWidget.svelte
index dfcdebb6..41664f4d 100644
--- a/src/app/components/VoiceWidget.svelte
+++ b/src/app/components/VoiceWidget.svelte
@@ -76,6 +76,14 @@
     pushModal(VoiceRoomJoinDialog, {url: targetRoom.url, h: targetRoom.h})
   }
 
+  const goToRoom = () => {
+    if (!targetRoom) return
+    const path = makeRoomPath(targetRoom.url, targetRoom.h)
+    if ($page.url.pathname !== path) {
+      void goto(path)
+    }
+  }
+
   const openCallSettings = () => {
     pushModal(VoiceCallAudioSettingsDialog)
   }
@@ -138,27 +146,33 @@
     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">
-      <div class="flex items-center justify-between gap-2">
-        {#if $voiceState === VoiceState.Joining}
-          <span class="text-sm font-semibold text-warning">Joining...</span>
-        {: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>
-        {/if}
-        {#if showVoiceLayoutToggle}
-          <Button
-            data-tip="Toggle full-screen chat ↔ video (mobile) or split view (desktop)"
-            class={cx(mediaToggleClass, "shrink-0", layoutToggleActive && "text-primary")}
-            onclick={onLayoutToggle}>
-            <Icon icon={ChatRound} size={4} />
-          </Button>
-        {/if}
-      </div>
-      <span class="ellipsize text-xs opacity-70">
-        {roomName} / {spaceName}
-      </span>
+    <div class="flex items-start justify-between gap-2">
+      <button
+        type="button"
+        class="min-w-0 flex-1 rounded-lg px-1 py-0.5 text-left outline-none hover:bg-base-200/60 focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-base-100"
+        onclick={goToRoom}
+        aria-label="Open room {roomName}">
+        <div class="flex flex-col gap-0.5">
+          {#if $voiceState === VoiceState.Joining}
+            <span class="text-sm font-semibold text-warning">Joining...</span>
+          {: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>
+          {/if}
+          <span class="ellipsize text-xs opacity-70">
+            {roomName} / {spaceName}
+          </span>
+        </div>
+      </button>
+      {#if showVoiceLayoutToggle}
+        <Button
+          data-tip="Toggle full-screen chat ↔ video (mobile) or split view (desktop)"
+          class={cx(mediaToggleClass, "shrink-0", layoutToggleActive && "text-primary")}
+          onclick={onLayoutToggle}>
+          <Icon icon={ChatRound} size={4} />
+        </Button>
+      {/if}
     </div>
     <div class="flex flex-wrap items-center gap-2">
       {#if $voiceState === VoiceState.Joining}