feat: voice status visibility + sidebar persistence fixes

- Add WebSocket voice_status/voice_status_update events so mute/deafen icons are visible in the sidebar without joining the voice channel - Server tracks voiceUserStates and includes them in the ready payload - Re-register voice channel on WebSocket reconnect to prevent sidebar users from disappearing after idle timeout - Re-broadcast deafen state to late joiners via LiveKit data channel - Fix black grid tile when video stops (enabled-flag guards) - Remove duplicate mute/deafen from VoiceControls (replaced with Video Quality + Noise Suppression) - Fix missing users in sidebar voice list (identity matching + fallback)
2026-02-19 07:58:50 +01:00
parent 503e483b82
commit 0da4a530d6
10 changed files with 307 additions and 102 deletions
@@ -40,10 +40,42 @@ export function ChannelSidebar() {
      }
    }
    toggleMic();
+    // Broadcast mute status via WebSocket so non-joined users can see it
+    const willBeMuted = !isMuted;
+    wsSend({ type: 'voice_status', isMuted: willBeMuted, isDeafened });
  };

-  const handleDeafenToggle = () => {
+  const handleDeafenToggle = async () => {
+    const room = getActiveRoom();
+    const willDeafen = !isDeafened;
+    // Update store FIRST so updateParticipants reads correct state when LiveKit events fire
    toggleDeafen();
+    if (willDeafen && !isMuted) toggleMic();
+    if (!willDeafen && isMuted) toggleMic();
+    // Broadcast status via WebSocket so non-joined users can see it
+    const willBeMuted = willDeafen ? true : false;
+    wsSend({ type: 'voice_status', isMuted: willBeMuted, isDeafened: willDeafen });
+    if (room) {
+      try {
+        if (willDeafen) {
+          await room.localParticipant.setMicrophoneEnabled(false);
+          room.remoteParticipants.forEach((p) => p.setVolume(0));
+        } else {
+          const outputVolume = useVoiceStore.getState().outputVolume;
+          const scaled = outputVolume / 100;
+          room.remoteParticipants.forEach((p) => p.setVolume(scaled));
+          await room.localParticipant.setMicrophoneEnabled(true);
+        }
+        // Broadcast deafen state to other participants via LiveKit data channel
+        const encoder = new TextEncoder();
+        room.localParticipant.publishData(
+          encoder.encode(JSON.stringify({ type: 'deafen', deafened: willDeafen })),
+          { reliable: true }
+        ).catch(() => {});
+      } catch (err) {
+        console.error('[ChannelSidebar] Failed to toggle deafen:', err);
+      }
+    }
  };

  const server = servers.find(s => s.id === currentServerId);
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useVoiceStore } from '../../stores/voiceStore';
+import { useAuthStore } from '../../stores/authStore';

 const EMPTY_VOICE_USERS: string[] = [];
 import { useServerStore } from '../../stores/serverStore';
@@ -15,6 +16,10 @@ export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelPr
  const voiceUsers = useVoiceStore((s) => s.voiceUsers.get(channelId)) ?? EMPTY_VOICE_USERS;
  const currentVoiceChannel = useVoiceStore((s) => s.currentVoiceChannelId);
  const participants = useVoiceStore((s) => s.participants);
+  const localIsDeafened = useVoiceStore((s) => s.isDeafened);
+  const localIsMuted = useVoiceStore((s) => s.isMuted);
+  const voiceUserStates = useVoiceStore((s) => s.voiceUserStates);
+  const currentUserId = useAuthStore((s) => s.user?.id);
  const members = useServerStore((s) => s.members);
  const isActive = currentVoiceChannel === channelId;

@@ -39,22 +44,29 @@ export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelPr
        <div className="ml-6 mt-0.5 space-y-0.5">
          {voiceUsers.map((userId) => {
            const member = members.find(m => m.userId === userId);
-            if (!member) return null;
-            const displayName = member.user.displayName ?? member.user.username;
-
-            // Find participant for status badges
-            const participant = participants.find(p => p.identity === userId || p.username === member.user.username);
-            const isMuted = participant ? !participant.audioTrack : false;
-            const hasCamera = participant ? participant.videoTrack !== null : false;
-            const isScreenSharing = participant ? participant.screenTrack !== null : false;
+            const participant = participants.find(p => p.userId === userId);
+            const displayName = member?.user.displayName ?? member?.user.username ?? participant?.username ?? userId;
+            const avatar = member?.user.avatar ?? null;
+            const status = member?.user.status;
+            // Resolve status: for local user use store directly, for remote users
+            // try LiveKit participant first, then fall back to WebSocket voiceUserStates
+            const wsStatus = voiceUserStates.get(userId);
+            const isParticipantDeafened = userId === currentUserId
+              ? localIsDeafened
+              : (participant?.isDeafened ?? wsStatus?.isDeafened ?? false);
+            const isMuted = userId === currentUserId
+              ? localIsMuted
+              : (participant?.isMuted ?? wsStatus?.isMuted ?? false);
+            const hasCamera = participant?.isCameraOn ?? false;
+            const isScreenSharing = participant?.isScreenSharing ?? false;

            return (
              <div key={userId} className="flex items-center gap-2 px-2 py-0.5 rounded hover:bg-discord-modifier-hover transition-colors">
                <Avatar
-                  src={member.user.avatar}
+                  src={avatar}
                  name={displayName}
                  size={20}
-                  status={member.user.status}
+                  status={status}
                />
                <span className="text-[13px] text-discord-text-secondary truncate flex-1 min-w-0">{displayName}</span>
                {/* Status badges */}
@@ -66,6 +78,12 @@ export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelPr
                      <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
                    </svg>
                  )}
+                  {isParticipantDeafened && (
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-discord-red">
+                      <path d="M12 3c-4.97 0-9 4.03-9 9v7c0 1.1.9 2 2 2h2v-7H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-2v7h2c1.1 0 2-.9 2-2v-7c0-4.97-4.03-9-9-9z" />
+                      <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
+                    </svg>
+                  )}
                  {hasCamera && (
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-discord-text-muted">
                      <path d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" />
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useVoiceStore } from '../../stores/voiceStore';
 import { useServerStore } from '../../stores/serverStore';
 import { getActiveRoom } from '../../hooks/useLiveKit';
 import { wsSend } from '../../hooks/useWebSocket';
+import { VideoQualityPopover } from './VideoQualityPopover';

 /**
 * VoiceControls renders the voice status + button rows.
@@ -10,62 +11,22 @@ import { wsSend } from '../../hooks/useWebSocket';
 */
 export function VoiceControls() {
  const currentVoiceChannelId = useVoiceStore((s) => s.currentVoiceChannelId);
-  const isMuted = useVoiceStore((s) => s.isMuted);
-  const isDeafened = useVoiceStore((s) => s.isDeafened);
  const isCameraOn = useVoiceStore((s) => s.isCameraOn);
  const isScreenSharing = useVoiceStore((s) => s.isScreenSharing);
  const toggleCamera = useVoiceStore((s) => s.toggleCamera);
  const toggleScreenShare = useVoiceStore((s) => s.toggleScreenShare);
-  const toggleMic = useVoiceStore((s) => s.toggleMic);
-  const toggleDeafen = useVoiceStore((s) => s.toggleDeafen);
+  const noiseSuppression = useVoiceStore((s) => s.noiseSuppression);
+  const toggleNoiseSuppression = useVoiceStore((s) => s.toggleNoiseSuppression);
  const connectionError = useVoiceStore((s) => s.connectionError);
  const isLiveKitConnected = useVoiceStore((s) => s.isLiveKitConnected);
  const channels = useServerStore((s) => s.channels);
+  const [showVideoQuality, setShowVideoQuality] = useState(false);

  if (!currentVoiceChannelId) return null;

  const channel = channels.find(c => c.id === currentVoiceChannelId);
  const channelName = channel?.name ?? 'Voice Channel';

-  const handleMute = async () => {
-    const room = getActiveRoom();
-    if (room) {
-      try {
-        await room.localParticipant.setMicrophoneEnabled(isMuted);
-      } catch (err) {
-        console.error('[VoiceControls] Failed to toggle mic:', err);
-      }
-    }
-    toggleMic();
-  };
-
-  const handleDeafen = async () => {
-    const room = getActiveRoom();
-    if (room) {
-      try {
-        const willDeafen = !isDeafened;
-        if (willDeafen) {
-          await room.localParticipant.setMicrophoneEnabled(false);
-          room.remoteParticipants.forEach((p) => {
-            p.setVolume(0);
-          });
-          if (!isMuted) toggleMic();
-        } else {
-          const outputVolume = useVoiceStore.getState().outputVolume;
-          const scaled = outputVolume / 100;
-          room.remoteParticipants.forEach((p) => {
-            p.setVolume(scaled);
-          });
-          await room.localParticipant.setMicrophoneEnabled(true);
-          if (isMuted) toggleMic();
-        }
-      } catch (err) {
-        console.error('[VoiceControls] Failed to toggle deafen:', err);
-      }
-    }
-    toggleDeafen();
-  };
-
  const handleCamera = async () => {
    const room = getActiveRoom();
    if (!room) return;
@@ -88,6 +49,28 @@ export function VoiceControls() {
    }
  };

+  const handleNoiseSuppression = async () => {
+    const room = getActiveRoom();
+    if (room) {
+      try {
+        const micPub = room.localParticipant.getTrackPublications().find(
+          p => p.source === 'microphone'
+        );
+        const mediaTrack = micPub?.track?.mediaStreamTrack;
+        if (mediaTrack) {
+          await mediaTrack.applyConstraints({
+            noiseSuppression: !noiseSuppression,
+            echoCancellation: true,
+            autoGainControl: true,
+          });
+        }
+      } catch (err) {
+        console.error('[VoiceControls] Failed to toggle noise suppression:', err);
+      }
+    }
+    toggleNoiseSuppression();
+  };
+
  const handleDisconnect = () => {
    wsSend({ type: 'voice_leave' });
    useVoiceStore.getState().leaveVoice();
@@ -145,39 +128,8 @@ export function VoiceControls() {
        </div>
      </div>

-      {/* Row 2: Mute, Deafen, Camera, Screen Share */}
-      <div className="flex items-center gap-1 px-3 pb-2 pt-1">
-        <button
-          onClick={handleMute}
-          className={`${btnBase} ${
-            isMuted || isDeafened
-              ? 'bg-discord-red/20 text-discord-red hover:bg-discord-red/30'
-              : btnDefaultStyle
-          }`}
-          title={isMuted ? 'Unmute' : 'Mute'}
-        >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 14c1.66 0 3-1.34 3-3V5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3z" />
-            <path d="M17 11c0 2.76-2.24 5-5 5s-5-2.24-5-5H5c0 3.53 2.61 6.43 6 6.92V21h2v-3.08c3.39-.49 6-3.39 6-6.92h-2z" />
-            {(isMuted || isDeafened) && <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />}
-          </svg>
-        </button>
-
-        <button
-          onClick={handleDeafen}
-          className={`${btnBase} ${
-            isDeafened
-              ? 'bg-discord-red/20 text-discord-red hover:bg-discord-red/30'
-              : btnDefaultStyle
-          }`}
-          title={isDeafened ? 'Undeafen' : 'Deafen'}
-        >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 3c-4.97 0-9 4.03-9 9v7c0 1.1.9 2 2 2h2v-7H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-2v7h2c1.1 0 2-.9 2-2v-7c0-4.97-4.03-9-9-9z" />
-            {isDeafened && <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />}
-          </svg>
-        </button>
-
+      {/* Row 2: Camera, Screen Share, Video Quality, Noise Suppression */}
+      <div className="relative flex items-center gap-1 px-3 pb-2 pt-1">
        <button
          onClick={handleCamera}
          className={`${btnBase} ${
@@ -213,6 +165,51 @@ export function VoiceControls() {
            <path d="M15 11L11 14V12H9V10H11V8L15 11Z" />
          </svg>
        </button>
+
+        {/* Video Quality */}
+        <button
+          onClick={() => setShowVideoQuality(!showVideoQuality)}
+          className={`${btnBase} ${
+            showVideoQuality
+              ? 'bg-[#111214] text-discord-blurple hover:bg-[#1a1b1e]'
+              : btnDefaultStyle
+          }`}
+          title="Video Quality"
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M3 5v14h18V5H3zm16 12H5V7h14v10z" />
+            <path d="M8 15l2.5-3.21L13 15l2-2.5L18 17H6z" />
+          </svg>
+        </button>
+
+        {/* Noise Suppression */}
+        <button
+          onClick={handleNoiseSuppression}
+          className={`${btnBase} ${
+            noiseSuppression
+              ? 'bg-[#111214] text-discord-green hover:bg-[#1a1b1e]'
+              : btnDefaultStyle
+          }`}
+          title={noiseSuppression ? 'Disable Noise Suppression' : 'Enable Noise Suppression'}
+        >
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M7 9v6h4l5 5V4l-5 5H7z" />
+            {noiseSuppression ? (
+              <>
+                <path d="M19 12c0-1.66-.68-3.16-1.76-4.24l-1.42 1.42C16.55 9.9 17 10.9 17 12c0 1.1-.45 2.1-1.18 2.82l1.42 1.42C18.32 15.16 19 13.66 19 12z" />
+                <path d="M21 12c0-2.76-1.12-5.26-2.93-7.07l-1.42 1.42C18.2 7.9 19 9.85 19 12c0 2.15-.8 4.1-2.35 5.65l1.42 1.42C19.88 17.26 21 14.76 21 12z" opacity="0.6" />
+              </>
+            ) : (
+              <line x1="19" y1="5" x2="19" y2="19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" opacity="0.4" />
+            )}
+          </svg>
+        </button>
+
+        {/* Video Quality Popover */}
+        <VideoQualityPopover
+          open={showVideoQuality}
+          onClose={() => setShowVideoQuality(false)}
+        />
      </div>
    </>
  );
@@ -19,9 +19,9 @@ export function VoiceUser({ participant, large }: VoiceUserProps) {
  const perUserVolume = participantVolumes.get(participant.userId) ?? 100;
  const isLocal = participant.isLocal;

-  // Determine active video track — prioritize screen share, check readyState
-  const liveScreen = participant.screenTrack?.readyState === 'live' ? participant.screenTrack : null;
-  const liveCamera = participant.videoTrack?.readyState === 'live' ? participant.videoTrack : null;
+  // Determine active video track — prioritize screen share, check both enabled flag and readyState
+  const liveScreen = participant.isScreenSharing && participant.screenTrack?.readyState === 'live' ? participant.screenTrack : null;
+  const liveCamera = participant.isCameraOn && participant.videoTrack?.readyState === 'live' ? participant.videoTrack : null;
  const activeVideoTrack = liveScreen ?? liveCamera;
  const hasVideo = activeVideoTrack !== null;
  const isScreenShare = liveScreen !== null;
@@ -154,6 +154,14 @@ export function VoiceUser({ participant, large }: VoiceUserProps) {
                </svg>
              </div>
            )}
+            {(isLocal ? isDeafened : participant.isDeafened) && (
+              <div className="w-5 h-5 bg-discord-red/90 rounded-full flex items-center justify-center">
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="white">
+                  <path d="M12 3c-4.97 0-9 4.03-9 9v7c0 1.1.9 2 2 2h2v-7H5v-2c0-3.87 3.13-7 7-7s7 3.13 7 7v2h-2v7h2c1.1 0 2-.9 2-2v-7c0-4.97-4.03-9-9-9z" />
+                  <line x1="3" y1="3" x2="21" y2="21" stroke="white" strokeWidth="2" />
+                </svg>
+              </div>
+            )}
            {participant.isScreenSharing && !isScreenShare && (
              <div className="w-5 h-5 bg-discord-blurple/90 rounded-full flex items-center justify-center">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="white">
@@ -44,6 +44,7 @@ export interface ParticipantInfo {
  username: string;
  isSpeaking: boolean;
  isMuted: boolean;
+  isDeafened: boolean;
  isCameraOn: boolean;
  isScreenSharing: boolean;
  isLocal: boolean;
@@ -118,16 +119,34 @@ export function useLiveKit() {
        const mt = track.mediaStreamTrack;
        if (!mt || mt.readyState !== 'live') return;
        if (pub.source === Track.Source.Microphone) audioTrack = mt;
-        else if (pub.source === Track.Source.Camera) videoTrack = mt;
-        else if (pub.source === Track.Source.ScreenShare) screenTrack = mt;
+        else if (pub.source === Track.Source.Camera && p.isCameraEnabled) videoTrack = mt;
+        else if (pub.source === Track.Source.ScreenShare && p.isScreenShareEnabled) screenTrack = mt;
      });
-      allParticipants.push({ identity: p.identity, userId, username, isSpeaking: p.isSpeaking, isMuted: !p.isMicrophoneEnabled, isCameraOn: p.isCameraEnabled, isScreenSharing: p.isScreenShareEnabled, isLocal, audioTrack, videoTrack, screenTrack });
+      let isDeafened = false;
+      if (isLocal) {
+        isDeafened = useVoiceStore.getState().isDeafened;
+      } else {
+        isDeafened = useVoiceStore.getState().deafenedUserIds.has(userId);
+      }
+      allParticipants.push({ identity: p.identity, userId, username, isSpeaking: p.isSpeaking, isMuted: !p.isMicrophoneEnabled, isDeafened, isCameraOn: p.isCameraEnabled, isScreenSharing: p.isScreenShareEnabled, isLocal, audioTrack, videoTrack, screenTrack });
    };
    processParticipant(r.localParticipant, true);
    r.remoteParticipants.forEach((p) => processParticipant(p, false));
    setParticipants(allParticipants);
  }, []);

+  const handleDataReceived = useCallback((payload: Uint8Array, participant?: RemoteParticipant) => {
+    try {
+      const text = new TextDecoder().decode(payload);
+      const msg = JSON.parse(text);
+      if (msg.type === 'deafen' && participant) {
+        const { userId } = parseIdentity(participant.identity);
+        useVoiceStore.getState().setUserDeafened(userId, msg.deafened === true);
+        updateParticipants();
+      }
+    } catch {}
+  }, [updateParticipants]);
+
  const connect = useCallback(async (channelId: string) => {
    if (connectedChannelRef.current === channelId && roomRef.current) return;
    const gen = ++_connectGeneration;
@@ -141,7 +160,17 @@ export function useLiveKit() {
      const newRoom = new Room({ adaptiveStream: false, dynacast: false, publishDefaults: { videoCodec: 'h264', simulcast: false } });
      roomRef.current = newRoom;
      const guardedUpdate = () => { if (roomRef.current === newRoom) updateParticipants(); };
-      newRoom.on(RoomEvent.ParticipantConnected, guardedUpdate);
+      newRoom.on(RoomEvent.ParticipantConnected, (participant) => {
+        guardedUpdate();
+        // Re-broadcast local deafen state to newly connected participant
+        if (useVoiceStore.getState().isDeafened) {
+          const encoder = new TextEncoder();
+          newRoom.localParticipant.publishData(
+            encoder.encode(JSON.stringify({ type: 'deafen', deafened: true })),
+            { reliable: true }
+          ).catch(() => {});
+        }
+      });
      newRoom.on(RoomEvent.ParticipantDisconnected, guardedUpdate);
      newRoom.on(RoomEvent.TrackSubscribed, guardedUpdate);
      newRoom.on(RoomEvent.TrackUnsubscribed, guardedUpdate);
@@ -150,6 +179,8 @@ export function useLiveKit() {
      newRoom.on(RoomEvent.TrackMuted, guardedUpdate);
      newRoom.on(RoomEvent.TrackUnmuted, guardedUpdate);
      newRoom.on(RoomEvent.ActiveSpeakersChanged, guardedUpdate);
+      newRoom.on(RoomEvent.ParticipantMetadataChanged, guardedUpdate);
+      newRoom.on(RoomEvent.DataReceived, handleDataReceived);
      newRoom.on(RoomEvent.ConnectionStateChanged, (state) => {
        if (roomRef.current === newRoom) {
          const connected = state === ConnectionState.Connected;
@@ -171,7 +202,7 @@ export function useLiveKit() {
      try { await newRoom.localParticipant.setMicrophoneEnabled(true); updateParticipants(); } catch { useVoiceStore.setState({ isMuted: true }); }
    } catch (err) { if (gen === _connectGeneration) setConnectionError('Failed to connect'); }
    finally { if (gen === _connectGeneration) setIsConnecting(false); }
-  }, [updateParticipants]);
+  }, [updateParticipants, handleDataReceived]);

  const connectDm = useCallback(async (dmChannelId: string) => {
    const gen = ++_connectGeneration;
@@ -208,7 +239,7 @@ export function useLiveKit() {
      try { await newRoom.localParticipant.setMicrophoneEnabled(true); updateParticipants(); } catch { useVoiceStore.setState({ isMuted: true }); }
    } catch (err) { if (gen === _connectGeneration) setConnectionError('Failed to connect'); }
    finally { if (gen === _connectGeneration) setIsConnecting(false); }
-  }, [updateParticipants]);
+  }, [updateParticipants, handleDataReceived]);

  const disconnect = useCallback(async () => {
    _connectGeneration++;
@@ -16,7 +16,7 @@ function handleEvent(event: ServerEvent): void {
  const { setUser } = useAuthStore.getState();
  const { populateFromReady, loadServerDetail, currentServerId, updateMemberPresence, addMember, removeMember } = useServerStore.getState();
  const { addMessage, updateMessage, removeMessage, setTyping, onReactionAdded, onReactionRemoved } = useChatStore.getState();
-  const { addVoiceUser, removeVoiceUser, clearAllVoiceUsers, setVoiceUsers } = useVoiceStore.getState();
+  const { addVoiceUser, removeVoiceUser, clearAllVoiceUsers, setVoiceUsers, setVoiceUserStatus, clearVoiceUserStatus } = useVoiceStore.getState();

  switch (event.type) {
    case 'ready':
@@ -45,6 +45,21 @@ function handleEvent(event: ServerEvent): void {
          setVoiceUsers(channelId, userIds);
        }
      }
+      // Populate voice user statuses (mute/deafen) from server
+      if (event.voiceUserStates) {
+        for (const [uid, status] of Object.entries(event.voiceUserStates)) {
+          setVoiceUserStatus(uid, status.isMuted, status.isDeafened);
+        }
+      }
+      // Re-register in voice channel if we're still connected to LiveKit
+      // (WebSocket reconnect causes server to drop our voice tracking)
+      {
+        const { currentVoiceChannelId, isMuted: curMuted, isDeafened: curDeafened } = useVoiceStore.getState();
+        if (currentVoiceChannelId) {
+          wsSend({ type: 'voice_join', channelId: currentVoiceChannelId });
+          wsSend({ type: 'voice_status', isMuted: curMuted, isDeafened: curDeafened });
+        }
+      }
      break;

    case 'message_created':
@@ -78,9 +93,14 @@ function handleEvent(event: ServerEvent): void {
        addVoiceUser(event.channelId, event.userId);
      } else {
        removeVoiceUser(event.channelId, event.userId);
+        clearVoiceUserStatus(event.userId);
      }
      break;

+    case 'voice_status_update':
+      setVoiceUserStatus(event.userId, event.isMuted, event.isDeafened);
+      break;
+
    case 'member_joined':
      addMember(event.member);
      break;
@@ -41,6 +41,14 @@ interface VoiceState {
  toggleDeafen: () => void;
  setFocusedParticipant: (id: string | null) => void;
  setVideoQuality: (quality: '1080p' | '1080p60' | '720p' | '720p60' | '540p' | '360p') => void;
+  noiseSuppression: boolean;
+  toggleNoiseSuppression: () => void;
+  deafenedUserIds: Set<string>;
+  setUserDeafened: (userId: string, deafened: boolean) => void;
+  // WebSocket-based voice user status (visible without joining LiveKit)
+  voiceUserStates: Map<string, { isMuted: boolean; isDeafened: boolean }>;
+  setVoiceUserStatus: (userId: string, isMuted: boolean, isDeafened: boolean) => void;
+  clearVoiceUserStatus: (userId: string) => void;
  getVoiceUsers: (channelId: string) => string[];
  clearAllVoiceUsers: () => void;
  leaveVoice: () => void;
@@ -123,10 +131,36 @@ export const useVoiceStore = create<VoiceState>((set, get) => ({

  setFocusedParticipant: (id) => set({ focusedParticipantId: id }),
  setVideoQuality: (quality) => set({ videoQuality: quality }),
+  noiseSuppression: true,
+  toggleNoiseSuppression: () => set((state) => ({ noiseSuppression: !state.noiseSuppression })),
+  deafenedUserIds: new Set(),
+  setUserDeafened: (userId, deafened) => {
+    set((state) => {
+      const newSet = new Set(state.deafenedUserIds);
+      if (deafened) newSet.add(userId); else newSet.delete(userId);
+      return { deafenedUserIds: newSet };
+    });
+  },
+
+  voiceUserStates: new Map(),
+  setVoiceUserStatus: (userId, isMuted, isDeafened) => {
+    set((state) => {
+      const newMap = new Map(state.voiceUserStates);
+      newMap.set(userId, { isMuted, isDeafened });
+      return { voiceUserStates: newMap };
+    });
+  },
+  clearVoiceUserStatus: (userId) => {
+    set((state) => {
+      const newMap = new Map(state.voiceUserStates);
+      newMap.delete(userId);
+      return { voiceUserStates: newMap };
+    });
+  },

  getVoiceUsers: (channelId) => get().voiceUsers.get(channelId) ?? [],

-  clearAllVoiceUsers: () => set({ voiceUsers: new Map() }),
+  clearAllVoiceUsers: () => set({ voiceUsers: new Map(), voiceUserStates: new Map() }),

  // Leave voice without wiping the voiceUsers map (so sidebar still shows others)
  leaveVoice: () => set({
@@ -143,6 +177,7 @@ export const useVoiceStore = create<VoiceState>((set, get) => ({
    focusedParticipantId: null,
    activeDmCall: null,
    outgoingCall: null,
+    deafenedUserIds: new Set(),
  }),

  reset: () => set({
@@ -162,5 +197,7 @@ export const useVoiceStore = create<VoiceState>((set, get) => ({
    incomingCall: null,
    outgoingCall: null,
    activeDmCall: null,
+    deafenedUserIds: new Set(),
+    voiceUserStates: new Map(),
  }),
 }));