feat: bans system, voice moderation, and federated space settings fixes

Add ban/unban functionality with BansPanel in space settings, voice moderation context menu (mute/deafen/disconnect), and fix federated space settings panels to use origin-aware API client. Show domain indicators for federated members in MembersPanel.
2026-03-09 15:56:46 +01:00
parent 7e2986ca01
commit e2c18ad2b0
24 changed files with 1224 additions and 159 deletions
@@ -1,50 +1,76 @@
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import { useVoiceStore } from '../../stores/voiceStore';
+import { useSpaceStore } from '../../stores/spaceStore';
+import { useAuthStore } from '../../stores/authStore';
+import { Avatar } from '../ui/Avatar';
+import { VoiceModContextMenu } from './VoiceModContextMenu';

 const EMPTY_VOICE_USERS: string[] = [];
-import { useSpaceStore } from '../../stores/spaceStore';
-import { Avatar } from '../ui/Avatar';

 interface VoiceChannelProps {
  channelId: string;
  channelName: string;
  onClick: () => void;
+  locked?: boolean;
 }

-export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelProps) {
+export function VoiceChannel({ channelId, channelName, onClick, locked }: VoiceChannelProps) {
  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 serverMutedUserIds = useVoiceStore((s) => s.serverMutedUserIds);
+  const serverDeafenedUserIds = useVoiceStore((s) => s.serverDeafenedUserIds);
  const currentUserId = useVoiceStore((s) => {
-    // Derive from participants — avoids unnecessary authStore dependency
    const local = s.participants.find(p => p.isLocal);
    return local?.userId ?? null;
  });
  const members = useSpaceStore((s) => s.members);
+  const myUser = useAuthStore((s) => s.user);
  const isActive = currentVoiceChannel === channelId;

+  // Context menu state
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number; userId: string } | null>(null);
+
+  const handleContextMenu = useCallback(
+    (e: React.MouseEvent, userId: string) => {
+      if (userId === myUser?.id) return;
+      e.preventDefault();
+      setContextMenu({ x: e.clientX, y: e.clientY, userId });
+    },
+    [myUser?.id],
+  );
+
  return (
    <div>
      <button
        onClick={onClick}
        className={`relative w-full flex items-center gap-1.5 px-[10px] h-8 rounded-[6px] group transition-colors ${
-          isActive
-            ? 'bg-surface-elevated text-txt-primary'
-            : 'text-txt-tertiary hover:text-txt-secondary hover:bg-interactive-hover'
+          locked
+            ? 'text-txt-tertiary/50 cursor-not-allowed'
+            : isActive
+              ? 'bg-surface-elevated text-txt-primary'
+              : 'text-txt-tertiary hover:text-txt-secondary hover:bg-interactive-hover'
        }`}
+        title={locked ? "You don't have permission to connect to this channel" : undefined}
      >
-        {isActive && (
+        {isActive && !locked && (
          <div
            className="absolute -left-[2px] top-1/2 -translate-y-1/2 w-[3px] bg-white rounded-r-full"
            style={{ height: '55%', opacity: 0.7 }}
          />
        )}
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" className="flex-shrink-0 text-[#6e6e7a]">
-          <path d="M11 5L6 9H2V15H6L11 19V5ZM15.54 8.46C16.48 9.4 17 10.67 17 12S16.48 14.6 15.54 15.54L14.12 14.12C14.69 13.55 15 12.79 15 12S14.69 10.45 14.12 9.88L15.54 8.46ZM19.07 4.93C20.91 6.77 22 9.28 22 12C22 14.72 20.91 17.23 19.07 19.07L17.66 17.66C19.11 16.21 20 14.21 20 12C20 9.79 19.11 7.79 17.66 6.34L19.07 4.93Z" />
-        </svg>
+        {locked ? (
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" className="flex-shrink-0 text-[#6e6e7a]/50">
+            <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" />
+          </svg>
+        ) : (
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" className="flex-shrink-0 text-[#6e6e7a]">
+            <path d="M11 5L6 9H2V15H6L11 19V5ZM15.54 8.46C16.48 9.4 17 10.67 17 12S16.48 14.6 15.54 15.54L14.12 14.12C14.69 13.55 15 12.79 15 12S14.69 10.45 14.12 9.88L15.54 8.46ZM19.07 4.93C20.91 6.77 22 9.28 22 12C22 14.72 20.91 17.23 19.07 19.07L17.66 17.66C19.11 16.21 20 14.21 20 12C20 9.79 19.11 7.79 17.66 6.34L19.07 4.93Z" />
+          </svg>
+        )}
        <span className="truncate text-[15px] font-medium">{channelName}</span>
      </button>

@@ -57,8 +83,6 @@ export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelPr
            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
@@ -68,9 +92,15 @@ export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelPr
              : (participant?.isMuted ?? wsStatus?.isMuted ?? false);
            const hasCamera = participant?.isCameraOn ?? wsStatus?.isCameraOn ?? false;
            const isScreenSharing = participant?.isScreenSharing ?? wsStatus?.isScreenSharing ?? false;
+            const isServerMuted = serverMutedUserIds.has(userId);
+            const isServerDeafened = serverDeafenedUserIds.has(userId);

            return (
-              <div key={userId} className="flex items-center gap-2 px-[10px] py-1 rounded-[6px] hover:bg-interactive-hover transition-colors">
+              <div
+                key={userId}
+                className="flex items-center gap-2 px-[10px] py-1 rounded-[6px] hover:bg-interactive-hover transition-colors"
+                onContextMenu={(e) => handleContextMenu(e, userId)}
+              >
                <Avatar
                  src={avatar}
                  name={displayName}
@@ -81,14 +111,31 @@ export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelPr
                <span className="text-[13px] text-txt-secondary truncate flex-1 min-w-0">{displayName}</span>
                {/* Status badges */}
                <div className="flex items-center gap-1 flex-shrink-0">
-                  {isMuted && (
+                  {isServerMuted && (
+                    <span title="Server Muted">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-accent-amber">
+                        <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" />
+                        <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
+                      </svg>
+                    </span>
+                  )}
+                  {isServerDeafened && (
+                    <span title="Server Deafened">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-accent-amber">
+                        <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>
+                    </span>
+                  )}
+                  {!isServerMuted && isMuted && (
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-txt-danger">
                      <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" />
                      <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
                    </svg>
                  )}
-                  {isParticipantDeafened && (
+                  {!isServerDeafened && isParticipantDeafened && (
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="text-txt-danger">
                      <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" />
@@ -108,6 +155,16 @@ export function VoiceChannel({ channelId, channelName, onClick }: VoiceChannelPr
          })}
        </div>
      )}
+
+      {/* Voice moderation context menu (portalled to body) */}
+      {contextMenu && (
+        <VoiceModContextMenu
+          targetUserId={contextMenu.userId}
+          channelId={channelId}
+          position={{ x: contextMenu.x, y: contextMenu.y }}
+          onClose={() => setContextMenu(null)}
+        />
+      )}
    </div>
  );
 }
@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import { useVoiceStore } from '../../stores/voiceStore';
 import { useUIStore } from '../../stores/uiStore';
+import { useAuthStore } from '../../stores/authStore';
 import { getActiveRoom } from '../../hooks/useLiveKit';
 import { wsSend } from '../../hooks/useWebSocket';
 import { getChannelOrigin } from '../../stores/spaceStore';
@@ -25,17 +26,22 @@ export function VoiceControlBar() {
  const voiceFullscreen = useUIStore((s) => s.voiceFullscreen);
  const toggleVoiceFullscreen = useUIStore((s) => s.toggleVoiceFullscreen);
  const currentVoiceChannelId = useVoiceStore((s) => s.currentVoiceChannelId);
+  const myUser = useAuthStore((s) => s.user);
+  const isServerMuted = useVoiceStore((s) => myUser ? s.serverMutedUserIds.has(myUser.id) : false);
+  const isServerDeafened = useVoiceStore((s) => myUser ? s.serverDeafenedUserIds.has(myUser.id) : false);
  const voiceOrigin = currentVoiceChannelId ? getChannelOrigin(currentVoiceChannelId) : '';
  const [qualityOpen, setQualityOpen] = useState(false);
  const qualityBtnRef = useRef<HTMLButtonElement>(null);

  const handleMute = React.useCallback(async () => {
+    if (isServerMuted || isServerDeafened) return;
    toggleMic();
    // Broadcast via WebSocket so sidebar shows status without joining
    wsSend({ type: 'voice_status', isMuted: !isMuted, isDeafened, isCameraOn, isScreenSharing }, voiceOrigin);
-  }, [isMuted, isDeafened, isCameraOn, isScreenSharing, toggleMic, voiceOrigin]);
+  }, [isMuted, isDeafened, isCameraOn, isScreenSharing, toggleMic, voiceOrigin, isServerMuted, isServerDeafened]);

  const handleDeafen = React.useCallback(async () => {
+    if (isServerDeafened) return;
    const room = getActiveRoom();
    const willDeafen = !isDeafened;
    // Update store FIRST so updateParticipants reads correct state
@@ -149,31 +155,35 @@ export function VoiceControlBar() {
        {/* Mute */}
        <button
          onClick={handleMute}
-          className={isMuted || isDeafened
-            ? `${btnBase} bg-accent-rose/20 text-txt-danger hover:bg-accent-rose/30`
-            : btnDefault
+          className={isServerMuted
+            ? `${btnBase} bg-accent-amber/20 text-accent-amber cursor-not-allowed`
+            : isMuted || isDeafened
+              ? `${btnBase} bg-accent-rose/20 text-txt-danger hover:bg-accent-rose/30`
+              : btnDefault
          }
-          title={isMuted ? 'Unmute (M)' : 'Mute (M)'}
+          title={isServerMuted ? 'Server Muted' : isMuted ? 'Unmute (M)' : 'Mute (M)'}
        >
          <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" />}
+            {(isMuted || isDeafened || isServerMuted) && <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />}
          </svg>
        </button>

        {/* Deafen */}
        <button
          onClick={handleDeafen}
-          className={isDeafened
-            ? `${btnBase} bg-accent-rose/20 text-txt-danger hover:bg-accent-rose/30`
-            : btnDefault
+          className={isServerDeafened
+            ? `${btnBase} bg-accent-amber/20 text-accent-amber cursor-not-allowed`
+            : isDeafened
+              ? `${btnBase} bg-accent-rose/20 text-txt-danger hover:bg-accent-rose/30`
+              : btnDefault
          }
-          title={isDeafened ? 'Undeafen (D)' : 'Deafen (D)'}
+          title={isServerDeafened ? 'Server Deafened' : isDeafened ? 'Undeafen (D)' : 'Deafen (D)'}
        >
          <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" />}
+            {(isDeafened || isServerDeafened) && <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />}
          </svg>
        </button>

@@ -6,6 +6,7 @@ import { wsSend } from '../../hooks/useWebSocket';
 import { ScreenShareSettingsPopover } from './ScreenShareSettingsPopover';
 import { ConnectionInfoPopover } from './ConnectionInfoPopover';
 import { startScreenShare, stopScreenShare } from '../../utils/screenShare';
+import { hasPermissionBit, PermissionBits } from '../../utils/permissions';

 /**
 * VoiceControls renders the voice status + button rows.
@@ -28,6 +29,12 @@ export function VoiceControls() {
  const qualityBtnRef = useRef<HTMLButtonElement>(null);

  const activeDmCall = useVoiceStore((s) => s.activeDmCall);
+  const channelPerms = useSpaceStore((s) => currentVoiceChannelId ? s.channelPermissions.get(currentVoiceChannelId) : undefined);
+
+  // In DM calls, all permissions are granted; in space channels, check SPEAK and STREAM
+  const isDmCall = !!activeDmCall;
+  const canSpeak = isDmCall || hasPermissionBit(channelPerms, PermissionBits.SPEAK);
+  const canStream = isDmCall || hasPermissionBit(channelPerms, PermissionBits.STREAM);

  const voiceOrigin = currentVoiceChannelId ? getChannelOrigin(currentVoiceChannelId) : '';

@@ -155,41 +162,45 @@ export function VoiceControls() {

      {/* 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} ${
-            isCameraOn
-              ? 'bg-surface-base text-status-online hover:bg-surface-channel'
-              : btnDefaultStyle
-          }`}
-          title={isCameraOn ? 'Turn Off Camera' : 'Turn On Camera'}
-        >
-          {isCameraOn ? (
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M17 10.5V7C17 6.45 16.55 6 16 6H4C3.45 6 3 6.45 3 7V17C3 17.55 3.45 18 4 18H16C16.55 18 17 17.55 17 17V13.5L21 17.5V6.5L17 10.5Z" />
-            </svg>
-          ) : (
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M17 10.5V7C17 6.45 16.55 6 16 6H4C3.45 6 3 6.45 3 7V17C3 17.55 3.45 18 4 18H16C16.55 18 17 17.55 17 17V13.5L21 17.5V6.5L17 10.5Z" />
-              <line x1="2" y1="2" x2="22" y2="22" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
-            </svg>
-          )}
-        </button>
+        {canSpeak && (
+          <button
+            onClick={handleCamera}
+            className={`${btnBase} ${
+              isCameraOn
+                ? 'bg-surface-base text-status-online hover:bg-surface-channel'
+                : btnDefaultStyle
+            }`}
+            title={isCameraOn ? 'Turn Off Camera' : 'Turn On Camera'}
+          >
+            {isCameraOn ? (
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M17 10.5V7C17 6.45 16.55 6 16 6H4C3.45 6 3 6.45 3 7V17C3 17.55 3.45 18 4 18H16C16.55 18 17 17.55 17 17V13.5L21 17.5V6.5L17 10.5Z" />
+              </svg>
+            ) : (
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M17 10.5V7C17 6.45 16.55 6 16 6H4C3.45 6 3 6.45 3 7V17C3 17.55 3.45 18 4 18H16C16.55 18 17 17.55 17 17V13.5L21 17.5V6.5L17 10.5Z" />
+                <line x1="2" y1="2" x2="22" y2="22" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
+              </svg>
+            )}
+          </button>
+        )}

-        <button
-          onClick={handleScreenShare}
-          className={`${btnBase} ${
-            isScreenSharing
-              ? 'bg-surface-base text-status-online hover:bg-surface-channel'
-              : btnDefaultStyle
-          }`}
-          title={isScreenSharing ? 'Stop Sharing' : 'Share Screen'}
-        >
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M20 18C21.1 18 22 17.1 22 16V6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V16C2 17.1 2.9 18 4 18H0V20H24V18H20ZM4 6H20V16H4V6Z" />
-            <path d="M15 11L11 14V12H9V10H11V8L15 11Z" />
-          </svg>
-        </button>
+        {canStream && (
+          <button
+            onClick={handleScreenShare}
+            className={`${btnBase} ${
+              isScreenSharing
+                ? 'bg-surface-base text-status-online hover:bg-surface-channel'
+                : btnDefaultStyle
+            }`}
+            title={isScreenSharing ? 'Stop Sharing' : 'Share Screen'}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M20 18C21.1 18 22 17.1 22 16V6C22 4.9 21.1 4 20 4H4C2.9 4 2 4.9 2 6V16C2 17.1 2.9 18 4 18H0V20H24V18H20ZM4 6H20V16H4V6Z" />
+              <path d="M15 11L11 14V12H9V10H11V8L15 11Z" />
+            </svg>
+          </button>
+        )}

        {/* Video Quality */}
        <button
@@ -0,0 +1,174 @@
+import React, { useEffect, useLayoutEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { useVoiceStore } from '../../stores/voiceStore';
+import { useSpaceStore, getChannelOrigin } from '../../stores/spaceStore';
+import { wsSend } from '../../hooks/useWebSocket';
+import { hasPermissionBit, PermissionBits } from '../../utils/permissions';
+
+interface VoiceModMenuItemsProps {
+  targetUserId: string;
+  channelId: string;
+  onAction: () => void;
+}
+
+/**
+ * Headless moderation menu items (mute/deafen/move buttons).
+ * Renders nothing if the current user has no moderation permissions.
+ * Use inside any container — no portal or positioning logic.
+ */
+export function VoiceModMenuItems({ targetUserId, channelId, onAction }: VoiceModMenuItemsProps) {
+  const serverMutedUserIds = useVoiceStore((s) => s.serverMutedUserIds);
+  const serverDeafenedUserIds = useVoiceStore((s) => s.serverDeafenedUserIds);
+
+  const spacePermissions = useSpaceStore((s) => s.spacePermissions);
+  const currentSpaceId = useSpaceStore((s) => s.currentSpaceId);
+  const channels = useSpaceStore((s) => s.channels);
+
+  const myPerms = currentSpaceId ? spacePermissions.get(currentSpaceId) : undefined;
+  const canMuteMembers = hasPermissionBit(myPerms, PermissionBits.MUTE_MEMBERS);
+  const canDeafenMembers = hasPermissionBit(myPerms, PermissionBits.DEAFEN_MEMBERS);
+  const canMoveMembers = hasPermissionBit(myPerms, PermissionBits.MOVE_MEMBERS);
+
+  const otherVoiceChannels = channels.filter(
+    (c) => (c.type === 'voice' || c.type === 'video') && c.id !== channelId,
+  );
+
+  const voiceOrigin = getChannelOrigin(channelId);
+
+  const isServerMuted = serverMutedUserIds.has(targetUserId);
+  const isServerDeafened = serverDeafenedUserIds.has(targetUserId);
+
+  if (!canMuteMembers && !canDeafenMembers && !canMoveMembers) return null;
+
+  const handleServerMute = () => {
+    wsSend({ type: 'voice_server_mute', userId: targetUserId, muted: !isServerMuted }, voiceOrigin);
+    onAction();
+  };
+
+  const handleServerDeafen = () => {
+    wsSend({ type: 'voice_server_deafen', userId: targetUserId, deafened: !isServerDeafened }, voiceOrigin);
+    onAction();
+  };
+
+  const handleMove = (targetChannelId: string) => {
+    wsSend({ type: 'voice_move', userId: targetUserId, targetChannelId }, voiceOrigin);
+    onAction();
+  };
+
+  const btnClass = 'w-full text-left px-2 py-1.5 mx-1.5 text-sm rounded-sm flex items-center gap-2 text-txt-secondary hover:bg-accent-primary hover:text-white';
+  const btnStyle = { width: 'calc(100% - 12px)' };
+
+  return (
+    <>
+      {canMuteMembers && (
+        <button onClick={handleServerMute} className={btnClass} style={btnStyle}>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="flex-shrink-0">
+            <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" />
+            {isServerMuted && (
+              <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
+            )}
+          </svg>
+          {isServerMuted ? 'Server Unmute' : 'Server Mute'}
+        </button>
+      )}
+      {canDeafenMembers && (
+        <button onClick={handleServerDeafen} className={btnClass} style={btnStyle}>
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="flex-shrink-0">
+            <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" />
+            {isServerDeafened && (
+              <line x1="3" y1="3" x2="21" y2="21" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
+            )}
+          </svg>
+          {isServerDeafened ? 'Server Undeafen' : 'Server Deafen'}
+        </button>
+      )}
+      {canMoveMembers && otherVoiceChannels.length > 0 && (
+        <>
+          <div className="h-px bg-white/[0.06] my-1 mx-1.5" />
+          <div className="px-3 py-1 text-[10px] text-txt-tertiary uppercase tracking-wider font-semibold">
+            Move to...
+          </div>
+          {otherVoiceChannels.map((ch) => (
+            <button key={ch.id} onClick={() => handleMove(ch.id)} className={btnClass} style={btnStyle}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" className="flex-shrink-0 text-txt-tertiary">
+                <path d="M11 5L6 9H2V15H6L11 19V5ZM15.54 8.46C16.48 9.4 17 10.67 17 12S16.48 14.6 15.54 15.54L14.12 14.12C14.69 13.55 15 12.79 15 12S14.69 10.45 14.12 9.88L15.54 8.46Z" />
+              </svg>
+              <span className="truncate">{ch.name}</span>
+            </button>
+          ))}
+        </>
+      )}
+    </>
+  );
+}
+
+// ─── Standalone portalled context menu ─────────────────────────────────────────
+
+interface VoiceModContextMenuProps {
+  targetUserId: string;
+  channelId: string;
+  position: { x: number; y: number };
+  onClose: () => void;
+}
+
+/**
+ * Full standalone moderation context menu rendered via createPortal to document.body.
+ * Escapes any CSS containing-block / overflow clipping from parent transforms.
+ * Includes viewport-aware positioning and click-outside dismissal.
+ */
+export function VoiceModContextMenu({ targetUserId, channelId, position, onClose }: VoiceModContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const spacePermissions = useSpaceStore((s) => s.spacePermissions);
+  const currentSpaceId = useSpaceStore((s) => s.currentSpaceId);
+  const myPerms = currentSpaceId ? spacePermissions.get(currentSpaceId) : undefined;
+  const canMuteMembers = hasPermissionBit(myPerms, PermissionBits.MUTE_MEMBERS);
+  const canDeafenMembers = hasPermissionBit(myPerms, PermissionBits.DEAFEN_MEMBERS);
+  const canMoveMembers = hasPermissionBit(myPerms, PermissionBits.MOVE_MEMBERS);
+  const hasModPerms = canMuteMembers || canDeafenMembers || canMoveMembers;
+
+  // Click-outside dismissal — always called (hooks must be unconditional)
+  useEffect(() => {
+    if (!hasModPerms) return;
+    const handler = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [hasModPerms, onClose]);
+
+  // Viewport-aware positioning — direct DOM mutation, no extra state/render
+  useLayoutEffect(() => {
+    const el = menuRef.current;
+    if (!hasModPerms || !el) return;
+    const rect = el.getBoundingClientRect();
+    let x = position.x;
+    let y = position.y;
+    if (rect.right > window.innerWidth) x = window.innerWidth - rect.width - 8;
+    if (rect.bottom > window.innerHeight) y = window.innerHeight - rect.height - 8;
+    if (x < 8) x = 8;
+    if (y < 8) y = 8;
+    el.style.left = `${x}px`;
+    el.style.top = `${y}px`;
+  }, [position, hasModPerms]);
+
+  if (!hasModPerms) return null;
+
+  return ReactDOM.createPortal(
+    <div
+      ref={menuRef}
+      className="fixed z-[200] bg-surface-elevated rounded-md shadow-elevation-high py-1.5 min-w-[180px] max-h-[calc(100vh-16px)] overflow-y-auto scrollbar-thin animate-fade-in"
+      style={{ left: position.x, top: position.y }}
+    >
+      <VoiceModMenuItems
+        targetUserId={targetUserId}
+        channelId={channelId}
+        onAction={onClose}
+      />
+    </div>,
+    document.body,
+  );
+}
@@ -1,6 +1,10 @@
-import React, { useRef, useEffect, useState, useCallback } from 'react';
+import React, { useRef, useEffect, useLayoutEffect, useState, useCallback } from 'react';
+import ReactDOM from 'react-dom';
 import { Avatar } from '../ui/Avatar';
 import { useVoiceStore } from '../../stores/voiceStore';
+import { VoiceModMenuItems } from './VoiceModContextMenu';
+import { useSpaceStore } from '../../stores/spaceStore';
+import { hasPermissionBit, PermissionBits } from '../../utils/permissions';
 import type { UserTile } from '../../hooks/useLiveKit';

 interface VoiceUserProps {
@@ -13,6 +17,7 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {

  const { participant } = tile;
  const isDeafened = useVoiceStore((s) => s.isDeafened);
+  const currentVoiceChannelId = useVoiceStore((s) => s.currentVoiceChannelId);
  const participantVolumes = useVoiceStore((s) => s.participantVolumes);
  const isSpeaking = useVoiceStore((s) => s.speakingParticipantIds.has(participant.identity));

@@ -50,6 +55,7 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
  }, [tile.lkVideoTrack]);

  // Context Menu
+  const menuRef = useRef<HTMLDivElement>(null);
  const [volumeMenu, setVolumeMenu] = useState<{
    x: number;
    y: number;
@@ -65,11 +71,31 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
    [isLocal],
  );

+  // Click-outside dismissal — mousedown + contains check
  useEffect(() => {
    if (!volumeMenu) return;
-    const close = () => setVolumeMenu(null);
-    window.addEventListener('click', close);
-    return () => window.removeEventListener('click', close);
+    const handler = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setVolumeMenu(null);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [volumeMenu]);
+
+  // Viewport-aware positioning — direct DOM mutation, no state churn
+  useLayoutEffect(() => {
+    const el = menuRef.current;
+    if (!volumeMenu || !el) return;
+    const rect = el.getBoundingClientRect();
+    let x = volumeMenu.x;
+    let y = volumeMenu.y;
+    if (rect.right > window.innerWidth) x = window.innerWidth - rect.width - 8;
+    if (rect.bottom > window.innerHeight) y = window.innerHeight - rect.height - 8;
+    if (x < 8) x = 8;
+    if (y < 8) y = 8;
+    el.style.left = `${x}px`;
+    el.style.top = `${y}px`;
  }, [volumeMenu]);

  return (
@@ -154,44 +180,87 @@ export function VoiceUser({ tile, large }: VoiceUserProps) {
        </div>
      </div>

-      {volumeMenu && !isLocal && (
+      {volumeMenu && !isLocal && ReactDOM.createPortal(
        <div
-          className="fixed z-[60] bg-surface-base rounded-lg shadow-2xl p-3 min-w-[200px] border border-white/[0.06]"
+          ref={menuRef}
+          className="fixed z-[200] bg-surface-elevated rounded-md shadow-elevation-high min-w-[200px] animate-fade-in"
          style={{ left: volumeMenu.x, top: volumeMenu.y }}
-          onClick={(e) => e.stopPropagation()}
        >
-          <div className="text-xs text-txt-tertiary mb-2 font-medium uppercase tracking-wider">
-            User Volume
-          </div>
-          <div className="flex items-center gap-2">
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              className="text-txt-tertiary flex-shrink-0"
-            >
-              <path d="M3 9v6h4l5 5V4L7 9H3z" />
-            </svg>
-            <input
-              type="range"
-              min="0"
-              max="200"
-              value={perUserVolume}
-              onChange={(e) =>
-                setParticipantVolume(
-                  participant.userId,
-                  parseInt(e.target.value),
-                )
-              }
-              className="flex-1 accent-accent-primary h-1"
+          {/* Moderation options (renders nothing if no perms) */}
+          {currentVoiceChannelId && (
+            <VoiceModSection
+              targetUserId={participant.userId}
+              channelId={currentVoiceChannelId}
+              onAction={() => setVolumeMenu(null)}
            />
-            <span className="text-xs text-txt-secondary min-w-[32px] text-right">
-              {perUserVolume}%
-            </span>
+          )}
+          {/* Volume slider */}
+          <div className="p-3">
+            <div className="text-xs text-txt-tertiary mb-2 font-medium uppercase tracking-wider">
+              User Volume
+            </div>
+            <div className="flex items-center gap-2">
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                className="text-txt-tertiary flex-shrink-0"
+              >
+                <path d="M3 9v6h4l5 5V4L7 9H3z" />
+              </svg>
+              <input
+                type="range"
+                min="0"
+                max="200"
+                value={perUserVolume}
+                onChange={(e) =>
+                  setParticipantVolume(
+                    participant.userId,
+                    parseInt(e.target.value),
+                  )
+                }
+                className="flex-1 accent-accent-primary h-1"
+              />
+              <span className="text-xs text-txt-secondary min-w-[32px] text-right">
+                {perUserVolume}%
+              </span>
+            </div>
          </div>
-        </div>
+        </div>,
+        document.body,
      )}
    </div>
  );
 }
+
+/** Renders moderation items + divider only when the user has mod perms. */
+function VoiceModSection({ targetUserId, channelId, onAction }: {
+  targetUserId: string;
+  channelId: string;
+  onAction: () => void;
+}) {
+  const spacePermissions = useSpaceStore((s) => s.spacePermissions);
+  const currentSpaceId = useSpaceStore((s) => s.currentSpaceId);
+  const myPerms = currentSpaceId ? spacePermissions.get(currentSpaceId) : undefined;
+
+  const hasMod =
+    hasPermissionBit(myPerms, PermissionBits.MUTE_MEMBERS) ||
+    hasPermissionBit(myPerms, PermissionBits.DEAFEN_MEMBERS) ||
+    hasPermissionBit(myPerms, PermissionBits.MOVE_MEMBERS);
+
+  if (!hasMod) return null;
+
+  return (
+    <>
+      <div className="py-1.5">
+        <VoiceModMenuItems
+          targetUserId={targetUserId}
+          channelId={channelId}
+          onAction={onAction}
+        />
+      </div>
+      <div className="h-px bg-white/[0.06] mx-1.5" />
+    </>
+  );
+}