From 7693cc737e2710bf461b14972d5b5d8f95be104f Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Mon, 23 Mar 2026 21:18:34 +0100
Subject: [PATCH] fix: send voice_leave WS message from mobile disconnect
 handlers

MobileVoiceFullScreen and MobileVoiceMiniBar were missing voice_leave
(and dm_call_end) WS messages in their disconnect handlers, leaving
the server showing stale voice state. Now matches VoiceControls pattern.
---
 .../components/layout/MobileVoiceFullScreen.tsx  | 12 ++++++++++--
 .../src/components/layout/MobileVoiceMiniBar.tsx | 16 ++++++++++++++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/components/layout/MobileVoiceFullScreen.tsx b/packages/web/src/components/layout/MobileVoiceFullScreen.tsx
index 38390090..7c239316 100644
--- a/packages/web/src/components/layout/MobileVoiceFullScreen.tsx
+++ b/packages/web/src/components/layout/MobileVoiceFullScreen.tsx
@@ -6,6 +6,8 @@ import { useAuthStore } from '../../stores/authStore';
 import { Avatar } from '../ui/Avatar';
 import { useContextMenuStore, type ContextMenuItem } from '../../stores/contextMenuStore';
 import { buildVoiceModMenuItems, VolumeSliderItem } from '../voice/voiceMenuItems';
+import { wsSend } from '../../hooks/useWebSocket';
+import { getChannelOrigin } from '../../stores/spaceStore';
 
 export function MobileVoiceFullScreen() {
   const popMobileScreen = useUIStore((s) => s.popMobileScreen);
@@ -96,8 +98,14 @@ export function MobileVoiceFullScreen() {
   };
 
   const handleDisconnect = () => {
-    leaveVoice();
-    const disconnectFn = useVoiceStore.getState().disconnectFn;
+    const { activeDmCall, disconnectFn } = useVoiceStore.getState();
+    if (activeDmCall) {
+      wsSend({ type: 'dm_call_end', dmChannelId: activeDmCall.dmChannelId }, getChannelOrigin(activeDmCall.dmChannelId));
+      useVoiceStore.getState().setActiveDmCall(null);
+    } else if (currentVoiceChannelId) {
+      wsSend({ type: 'voice_leave' }, getChannelOrigin(currentVoiceChannelId));
+      leaveVoice();
+    }
     if (disconnectFn) disconnectFn();
     popMobileScreen();
   };
diff --git a/packages/web/src/components/layout/MobileVoiceMiniBar.tsx b/packages/web/src/components/layout/MobileVoiceMiniBar.tsx
index f0f3869d..b5790c3d 100644
--- a/packages/web/src/components/layout/MobileVoiceMiniBar.tsx
+++ b/packages/web/src/components/layout/MobileVoiceMiniBar.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { useUIStore } from '../../stores/uiStore';
 import { useVoiceStore } from '../../stores/voiceStore';
-import { useSpaceStore } from '../../stores/spaceStore';
+import { useSpaceStore, getChannelOrigin } from '../../stores/spaceStore';
+import { wsSend } from '../../hooks/useWebSocket';
 
 export function MobileVoiceMiniBar() {
   const pushMobileScreen = useUIStore((s) => s.pushMobileScreen);
@@ -92,7 +93,18 @@ export function MobileVoiceMiniBar() {
         </button>
 
         <button
-          onClick={(e) => { e.stopPropagation(); leaveVoice(); const df = useVoiceStore.getState().disconnectFn; if (df) df(); }}
+          onClick={(e) => {
+            e.stopPropagation();
+            const { activeDmCall, disconnectFn } = useVoiceStore.getState();
+            if (activeDmCall) {
+              wsSend({ type: 'dm_call_end', dmChannelId: activeDmCall.dmChannelId }, getChannelOrigin(activeDmCall.dmChannelId));
+              useVoiceStore.getState().setActiveDmCall(null);
+            } else if (currentVoiceChannelId) {
+              wsSend({ type: 'voice_leave' }, getChannelOrigin(currentVoiceChannelId));
+              leaveVoice();
+            }
+            if (disconnectFn) disconnectFn();
+          }}
           className="w-8 h-8 rounded-full flex items-center justify-center bg-accent-rose/20 text-accent-rose hover:bg-accent-rose/30 transition-colors"
         >
           <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>