From 25471c694f02fbcf370022be6ec385a1b922fb15 Mon Sep 17 00:00:00 2001
From: Siavash Sameni <manwe@MacBook-Air.local>
Date: Tue, 14 Apr 2026 18:47:40 +0400
Subject: [PATCH] feat(ui): voice drawer replaces full-screen call UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Discord-style bottom drawer for voice instead of navigating away:

- "Join Voice" hides the FAB, slides up a persistent bottom bar
- Drawer shows: room name, timer, P2P/Relay badge, level meter
- Controls: mic, speaker, end call — all in the drawer
- Direct call info (identicon, name, P2P badge) shown inline
- Lobby stays visible above the drawer at all times
- Stats line shows codec/packet/FEC info
- Leave voice = drawer slides away, FAB returns

Removed: full-screen call-screen, back button, old participant
list, old mic/speaker/hangup buttons. All voice interaction
happens in the 15% bottom drawer while the lobby stays live.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 desktop/index.html    |  69 +++++++--------
 desktop/src/main.ts   | 196 +++++++++++++++++++-----------------------
 desktop/src/style.css |  68 +++++++++++++++
 3 files changed, 189 insertions(+), 144 deletions(-)

diff --git a/desktop/index.html b/desktop/index.html
index 2ad11af..9bf4321 100644
--- a/desktop/index.html
+++ b/desktop/index.html
@@ -65,47 +65,40 @@
             <button id="reject-call-btn" class="btn-reject">Reject</button>
           </div>
         </div>
-      </div>
-
-      <!-- ═══════════════════════════════════════════════════════
-           IN-CALL — voice active (room or direct)
-           ═══════════════════════════════════════════════════════ -->
-      <div id="call-screen" class="hidden">
-        <div class="call-header">
-          <div class="call-header-row">
-            <button id="back-to-lobby-btn" class="icon-btn small" title="Back to lobby">&#x2190;</button>
-            <div id="room-name" class="room-name"></div>
-            <button id="settings-btn-call" class="icon-btn small" title="Settings">&#9881;</button>
+        <!-- ═════ Voice Drawer (bottom bar, stays on lobby) ═════ -->
+        <div id="voice-drawer" class="voice-drawer hidden">
+          <div class="voice-drawer-bar" id="voice-drawer-bar">
+            <div class="vd-info">
+              <span id="vd-status" class="vd-status-dot"></span>
+              <span id="vd-room" class="vd-room">general</span>
+              <span id="vd-timer" class="vd-timer">0:00</span>
+              <span id="vd-badge" class="vd-badge hidden"></span>
+            </div>
+            <div class="vd-level">
+              <div id="vd-level-bar" class="vd-level-fill"></div>
+            </div>
+            <div class="vd-controls">
+              <button id="vd-mic-btn" class="vd-btn" title="Mic (m)">
+                <span id="vd-mic-icon">&#x1F3A4;</span>
+              </button>
+              <button id="vd-spk-btn" class="vd-btn" title="Speaker (s)">
+                <span id="vd-spk-icon">&#x1F50A;</span>
+              </button>
+              <button id="vd-end-btn" class="vd-btn vd-end" title="Leave voice (q)">
+                <span>&#x26D4;</span>
+              </button>
+            </div>
           </div>
-          <div class="call-meta">
-            <span id="call-status" class="status-dot"></span>
-            <span id="call-timer" class="call-timer">0:00</span>
+          <!-- Direct call info (shown during P2P calls) -->
+          <div id="vd-direct-info" class="vd-direct-info hidden">
+            <span id="vd-dc-identicon" class="vd-dc-identicon"></span>
+            <div class="vd-dc-details">
+              <div id="vd-dc-name" class="vd-dc-name">Unknown</div>
+              <div id="vd-dc-badge" class="vd-dc-badge">Connecting...</div>
+            </div>
           </div>
+          <div id="vd-stats" class="vd-stats"></div>
         </div>
-        <div class="level-meter">
-          <div id="level-bar" class="level-bar-fill"></div>
-        </div>
-        <!-- Direct-call phone layout -->
-        <div id="direct-call-view" class="direct-call-view hidden">
-          <div id="dc-identicon" class="dc-identicon"></div>
-          <div id="dc-name" class="dc-name">Unknown</div>
-          <div id="dc-fp" class="dc-fp"></div>
-          <div id="dc-badge" class="dc-badge">Connecting...</div>
-        </div>
-        <!-- Room participants -->
-        <div id="participants" class="participants"></div>
-        <div class="controls">
-          <button id="mic-btn" class="control-btn" title="Toggle Mic (m)">
-            <span class="icon" id="mic-icon">Mic</span>
-          </button>
-          <button id="hangup-btn" class="control-btn hangup" title="Hang Up (q)">
-            <span class="icon">End</span>
-          </button>
-          <button id="spk-btn" class="control-btn" title="Toggle Speaker (s)">
-            <span class="icon" id="spk-icon">Spk</span>
-          </button>
-        </div>
-        <div id="stats" class="stats"></div>
       </div>
 
       <!-- ═══════════════════════════════════════════════════════
diff --git a/desktop/src/main.ts b/desktop/src/main.ts
index 86c10bd..1c87d53 100644
--- a/desktop/src/main.ts
+++ b/desktop/src/main.ts
@@ -67,23 +67,23 @@ const incomingCallerName = document.getElementById("incoming-caller-name")!;
 const incomingIdenticon = document.getElementById("incoming-identicon")!;
 const acceptCallBtn = document.getElementById("accept-call-btn")!;
 const rejectCallBtn = document.getElementById("reject-call-btn")!;
-const backToLobbyBtn = document.getElementById("back-to-lobby-btn")!;
-const roomName = document.getElementById("room-name")!;
-const callTimer = document.getElementById("call-timer")!;
-const callStatus = document.getElementById("call-status")!;
-const levelBar = document.getElementById("level-bar")!;
-const participantsDiv = document.getElementById("participants")!;
-const directCallView = document.getElementById("direct-call-view")!;
-const dcIdenticon = document.getElementById("dc-identicon")!;
-const dcName = document.getElementById("dc-name")!;
-const dcFp = document.getElementById("dc-fp")!;
-const dcBadge = document.getElementById("dc-badge")!;
-const micBtn = document.getElementById("mic-btn")!;
-const micIcon = document.getElementById("mic-icon")!;
-const spkBtn = document.getElementById("spk-btn")!;
-const spkIcon = document.getElementById("spk-icon")!;
-const hangupBtn = document.getElementById("hangup-btn")!;
-const statsDiv = document.getElementById("stats")!;
+// Voice drawer elements
+const voiceDrawer = document.getElementById("voice-drawer")!;
+const vdRoom = document.getElementById("vd-room")!;
+const vdTimer = document.getElementById("vd-timer")!;
+const vdStatus = document.getElementById("vd-status")!;
+const vdBadge = document.getElementById("vd-badge")!;
+const vdLevelBar = document.getElementById("vd-level-bar")!;
+const vdMicBtn = document.getElementById("vd-mic-btn")!;
+const vdMicIcon = document.getElementById("vd-mic-icon")!;
+const vdSpkBtn = document.getElementById("vd-spk-btn")!;
+const vdSpkIcon = document.getElementById("vd-spk-icon")!;
+const vdEndBtn = document.getElementById("vd-end-btn")!;
+const vdDirectInfo = document.getElementById("vd-direct-info")!;
+const vdDcIdenticon = document.getElementById("vd-dc-identicon")!;
+const vdDcName = document.getElementById("vd-dc-name")!;
+const vdDcBadge = document.getElementById("vd-dc-badge")!;
+const vdStats = document.getElementById("vd-stats")!;
 const ctxMenu = document.getElementById("user-context-menu")!;
 const ctxIdenticon = document.getElementById("ctx-identicon")!;
 const ctxName = document.getElementById("ctx-name")!;
@@ -287,97 +287,71 @@ ctxCallBtn.addEventListener("click", async () => {
   }
 });
 
-// ── Voice join/leave ──────────────────────────────────────────────
+// ── Voice join/leave (drawer-based) ───────────────────────────────
 joinVoiceBtn.addEventListener("click", async () => {
-  if (inVoice) {
-    // Leave voice
-    try { await invoke("disconnect"); } catch {}
-    inVoice = false;
-    joinVoiceBtn.innerHTML = '<span class="fab-icon">&#x1F3A7;</span><span class="fab-label">Join Voice</span>';
-    joinVoiceBtn.classList.remove("active");
-    if (statusInterval) { clearInterval(statusInterval); statusInterval = null; }
-    showLobby();
-  } else {
-    // Join voice
-    const relay = getRelay();
-    const s = loadSettings();
-    if (!relay) return;
-    try {
-      await invoke("connect", {
-        relay: relay.address,
-        room: s.room || "general",
-        alias: s.alias || "",
-        osAec: s.osAec,
-        quality: s.quality || "auto",
-      });
-      inVoice = true;
-      joinVoiceBtn.innerHTML = '<span class="fab-icon">&#x1F3A7;</span><span class="fab-label">Leave Voice</span>';
-      joinVoiceBtn.classList.add("active");
-      showCallScreen(false);
-    } catch (e: any) {
-      console.error("connect failed:", e);
-    }
+  if (inVoice) return;
+  const relay = getRelay();
+  const s = loadSettings();
+  if (!relay) return;
+  try {
+    await invoke("connect", {
+      relay: relay.address,
+      room: s.room || "general",
+      alias: s.alias || "",
+      osAec: s.osAec,
+      quality: s.quality || "auto",
+    });
+    enterVoice(false);
+  } catch (e: any) {
+    console.error("connect failed:", e);
   }
 });
 
-// ── Screen transitions ────────────────────────────────────────────
-function showLobby() {
-  callScreen.classList.add("hidden");
-  lobbyScreen.classList.remove("hidden");
-  directCallPeer = null;
-  levelBar.style.width = "0%";
-}
-
-function showCallScreen(isDirect: boolean) {
-  lobbyScreen.classList.add("hidden");
-  callScreen.classList.remove("hidden");
+function enterVoice(isDirect: boolean) {
+  inVoice = true;
+  const s = loadSettings();
+  joinVoiceBtn.classList.add("hidden");
+  voiceDrawer.classList.remove("hidden");
+  vdRoom.textContent = isDirect && directCallPeer
+    ? (directCallPeer.alias || directCallPeer.fingerprint.substring(0, 16))
+    : (s.room || "general");
+  vdTimer.textContent = "0:00";
+  vdBadge.classList.add("hidden");
+  vdBadge.textContent = "";
 
   if (isDirect && directCallPeer) {
-    roomName.textContent = directCallPeer.alias || directCallPeer.fingerprint.substring(0, 16);
-    dcName.textContent = directCallPeer.alias || "Unknown";
-    dcFp.textContent = directCallPeer.fingerprint;
-    dcIdenticon.innerHTML = "";
-    dcIdenticon.appendChild(createIdenticonEl(directCallPeer.fingerprint, 96, true));
-    dcBadge.textContent = "Connecting...";
-    dcBadge.className = "dc-badge connecting";
-    directCallView.classList.remove("hidden");
-    participantsDiv.classList.add("hidden");
+    vdDirectInfo.classList.remove("hidden");
+    vdDcIdenticon.innerHTML = "";
+    vdDcIdenticon.appendChild(createIdenticonEl(directCallPeer.fingerprint, 32, true));
+    vdDcName.textContent = directCallPeer.alias || directCallPeer.fingerprint.substring(0, 16);
+    vdDcBadge.textContent = "Connecting...";
+    vdDcBadge.className = "vd-dc-badge connecting";
   } else {
-    const s = loadSettings();
-    roomName.textContent = s.room || "general";
-    directCallView.classList.add("hidden");
-    participantsDiv.classList.remove("hidden");
+    vdDirectInfo.classList.add("hidden");
   }
-  callStatus.className = "status-dot";
+
   statusInterval = window.setInterval(pollStatus, 250);
 }
 
-// Back button from call to lobby
-backToLobbyBtn.addEventListener("click", async () => {
-  try { await invoke("disconnect"); } catch {}
+function leaveVoice() {
   inVoice = false;
-  joinVoiceBtn.innerHTML = '<span class="fab-icon">&#x1F3A7;</span><span class="fab-label">Join Voice</span>';
-  joinVoiceBtn.classList.remove("active");
+  directCallPeer = null;
+  voiceDrawer.classList.add("hidden");
+  joinVoiceBtn.classList.remove("hidden");
+  vdLevelBar.style.width = "0%";
   if (statusInterval) { clearInterval(statusInterval); statusInterval = null; }
-  showLobby();
-});
+}
 
-// Hangup
-hangupBtn.addEventListener("click", async () => {
+// Drawer controls
+vdEndBtn.addEventListener("click", async () => {
   try { await invoke("hangup_call"); } catch {}
   try { await invoke("disconnect"); } catch {}
-  inVoice = false;
-  joinVoiceBtn.innerHTML = '<span class="fab-icon">&#x1F3A7;</span><span class="fab-label">Join Voice</span>';
-  joinVoiceBtn.classList.remove("active");
-  if (statusInterval) { clearInterval(statusInterval); statusInterval = null; }
-  showLobby();
+  leaveVoice();
 });
-
-// Mic/speaker toggles
-micBtn.addEventListener("click", async () => {
+vdMicBtn.addEventListener("click", async () => {
   try { await invoke("toggle_mic"); } catch {}
 });
-spkBtn.addEventListener("click", async () => {
+vdSpkBtn.addEventListener("click", async () => {
   try { await invoke("toggle_speaker"); } catch {}
 });
 
@@ -401,22 +375,25 @@ async function pollStatus() {
   try {
     const st: CallStatusI = await invoke("get_status");
     if (!st.active) {
-      showLobby();
+      leaveVoice();
       return;
     }
     if (st.fingerprint) myFingerprint = st.fingerprint;
-    micBtn.classList.toggle("muted", st.mic_muted);
-    micIcon.textContent = st.mic_muted ? "Mic Off" : "Mic";
-    spkBtn.classList.toggle("muted", st.speaker_muted);
-    spkIcon.textContent = st.speaker_muted ? "Spk Off" : "Spk";
 
+    // Update drawer controls
+    vdMicBtn.classList.toggle("muted", st.mic_muted);
+    vdMicIcon.textContent = st.mic_muted ? "&#x1F507;" : "&#x1F3A4;";
+    vdSpkBtn.classList.toggle("muted", st.speaker_muted);
+    vdSpkIcon.textContent = st.speaker_muted ? "&#x1F507;" : "&#x1F50A;";
+
+    // Level meter
     const pct = Math.min(100, (st.send_rms / 10000) * 100);
-    levelBar.style.width = `${pct}%`;
+    vdLevelBar.style.width = `${pct}%`;
 
     // Duration
     const m = Math.floor(st.call_duration_secs / 60);
     const s = Math.floor(st.call_duration_secs % 60);
-    callTimer.textContent = `${m}:${s.toString().padStart(2, "0")}`;
+    vdTimer.textContent = `${m}:${s.toString().padStart(2, "0")}`;
 
     // P2P badge for direct calls
     if (directCallPeer) {
@@ -424,16 +401,23 @@ async function pollStatus() {
       const engineOk = [...callDebugBuffer].reverse().find((e) => e.step === "connect:call_engine_started");
       if (engineOk) {
         if (pathNeg?.details?.use_direct === true) {
-          dcBadge.textContent = "P2P Direct";
-          dcBadge.className = "dc-badge";
+          vdDcBadge.textContent = "P2P Direct";
+          vdDcBadge.className = "vd-dc-badge direct";
+          vdBadge.textContent = "P2P";
+          vdBadge.className = "vd-badge direct";
+          vdBadge.classList.remove("hidden");
         } else {
-          dcBadge.textContent = "Via Relay";
-          dcBadge.className = "dc-badge relay";
+          vdDcBadge.textContent = "Via Relay";
+          vdDcBadge.className = "vd-dc-badge relay";
+          vdBadge.textContent = "Relay";
+          vdBadge.className = "vd-badge relay";
+          vdBadge.classList.remove("hidden");
         }
       }
     }
 
-    statsDiv.textContent = `TX: ${st.codec_tx} ${st.send_packets}pkt | RX: ${st.codec_rx} ${st.recv_packets}pkt | FEC: ${(st.fec_ratio * 100).toFixed(0)}%`;
+    // Stats
+    vdStats.textContent = `TX: ${st.codec_tx} ${st.send_packets}pkt | RX: ${st.codec_rx} ${st.recv_packets}pkt | FEC: ${(st.fec_ratio * 100).toFixed(0)}%`;
   } catch {}
 }
 
@@ -490,7 +474,7 @@ listen("signal-event", (event: any) => {
             directOnly: s.directOnly || false,
             birthdayAttack: s.birthdayAttack || false,
           });
-          showCallScreen(true);
+          enterVoice(true);
         } catch (e: any) {
           console.error("connect failed:", e);
         }
@@ -501,7 +485,7 @@ listen("signal-event", (event: any) => {
       incomingBanner.classList.add("hidden");
       (async () => {
         try { await invoke("disconnect"); } catch {}
-        showLobby();
+        leaveVoice();
       })();
       break;
   }
@@ -754,9 +738,9 @@ invoke("set_call_debug_logs", { enabled: !!loadSettings().callDebugLogs }).catch
 // Keyboard shortcuts
 document.addEventListener("keydown", (e) => {
   if ((e.target as HTMLElement).tagName === "INPUT") return;
-  if (e.key === "m") micBtn.click();
-  if (e.key === "q") hangupBtn.click();
-  if (e.key === "s") spkBtn.click();
+  if (e.key === "m") vdMicBtn.click();
+  if (e.key === "q") vdEndBtn.click();
+  if (e.key === "s") vdSpkBtn.click();
   if (e.key === "," && (e.metaKey || e.ctrlKey)) { e.preventDefault(); openSettings(); }
 });
 
diff --git a/desktop/src/style.css b/desktop/src/style.css
index 1e8db20..64debfe 100644
--- a/desktop/src/style.css
+++ b/desktop/src/style.css
@@ -238,6 +238,74 @@ body {
 
 .fab-icon { font-size: 18px; }
 
+/* ── Voice Drawer (bottom bar) ── */
+.voice-drawer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--surface);
+  border-top: 1px solid var(--surface2);
+  padding: 0 16px;
+  padding-bottom: env(safe-area-inset-bottom, 8px);
+  z-index: 50;
+  animation: drawerUp 0.25s ease-out;
+  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
+}
+@keyframes drawerUp {
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+}
+.voice-drawer-bar {
+  display: flex; flex-direction: column; gap: 6px; padding: 10px 0 6px;
+}
+.vd-info {
+  display: flex; align-items: center; gap: 8px; font-size: 13px;
+}
+.vd-status-dot {
+  width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0;
+}
+.vd-room { color: var(--green); font-weight: 600; }
+.vd-timer { color: var(--text-dim); font-family: ui-monospace, monospace; font-size: 12px; }
+.vd-badge {
+  font-size: 10px; padding: 1px 6px; border-radius: 6px; font-weight: 500;
+}
+.vd-badge.direct { background: rgba(74,222,128,0.15); color: var(--green); }
+.vd-badge.relay { background: rgba(96,165,250,0.15); color: #60a5fa; }
+.vd-level { height: 3px; background: var(--surface2); border-radius: 2px; overflow: hidden; }
+.vd-level-fill {
+  height: 100%; width: 0%; background: var(--green); border-radius: 2px; transition: width 0.1s;
+}
+.vd-controls {
+  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 4px 0;
+}
+.vd-btn {
+  width: 44px; height: 44px; border-radius: 50%; border: none;
+  background: var(--surface2); color: var(--text); font-size: 18px;
+  cursor: pointer; display: flex; align-items: center; justify-content: center;
+  transition: background 0.15s;
+}
+.vd-btn:hover { background: var(--primary); }
+.vd-btn.muted { background: var(--red); color: white; }
+.vd-end { background: var(--red); color: white; }
+.vd-end:hover { background: #dc2626; }
+.vd-direct-info {
+  display: flex; align-items: center; gap: 10px; padding: 8px 0 4px;
+  border-top: 1px solid var(--surface2); margin-top: 4px;
+}
+.vd-dc-identicon { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
+.vd-dc-name { font-size: 13px; font-weight: 600; }
+.vd-dc-badge {
+  font-size: 10px; padding: 1px 6px; border-radius: 6px;
+}
+.vd-dc-badge.direct { background: rgba(74,222,128,0.15); color: var(--green); }
+.vd-dc-badge.relay { background: rgba(96,165,250,0.15); color: #60a5fa; }
+.vd-dc-badge.connecting { background: rgba(250,204,21,0.15); color: var(--yellow); }
+.vd-stats {
+  font-size: 10px; color: var(--text-dim); font-family: ui-monospace, monospace;
+  padding: 2px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+
 /* Incoming call banner */
 .incoming-banner {
   position: fixed;