feat(webrtc): add admin option to mute other participants

web/src/components/VoicePanel.tsx

@@ -1,5 +1,7 @@
 import { useVoiceStore } from '../stores/voice.ts';
 import { useAuthStore } from '../stores/auth.ts';
+import { useServerStore } from '../stores/server.ts';
+import { api } from '../lib/api.ts';
 import { VoiceControls } from './VoiceControls.tsx';
 import { VideoGrid } from './VideoGrid.tsx';
 import { AudioRenderers } from './AudioRenderers.tsx';
@@ -15,6 +17,18 @@ export function VoicePanel() {
   const dismissWhisper = useVoiceStore((state) => state.dismissWhisper);
   const currentUserId = useAuthStore((state) => state.user?.id);
 
+  const userPermissions = useServerStore((state) => state.userPermissions);
+  const canMute = userPermissions.mute_members || userPermissions.administrator;
+
+  const handleMute = async (identity: string) => {
+    if (!currentRoom) return;
+    try {
+      await api.post(`/voice/rooms/${currentRoom}/participants/${identity}/mute`);
+    } catch (err) {
+      console.error('Failed to mute participant', err);
+    }
+  };
+
   if (!currentRoom) return null;
 
   return (
@@ -108,13 +122,24 @@ export function VoicePanel() {
                 <span className="text-xxs text-gb-green">[speaking]</span>
               )}
               {!isMe && (
-                <button
-                  className="ml-auto text-xxs text-gb-fg-f hover:text-gb-orange"
-                  onClick={() => whisperTo(p.identity, p.username)}
-                  title={`Whisper to ${p.username}`}
-                >
-                  [whisper]
-                </button>
+                <div className="ml-auto flex items-center gap-1">
+                  {canMute && !p.isMuted && (
+                    <button
+                      className="text-xxs text-gb-fg-f hover:text-gb-red"
+                      onClick={() => handleMute(p.identity)}
+                      title={`Mute ${p.username}`}
+                    >
+                      [mute]
+                    </button>
+                  )}
+                  <button
+                    className="text-xxs text-gb-fg-f hover:text-gb-orange"
+                    onClick={() => whisperTo(p.identity, p.username)}
+                    title={`Whisper to ${p.username}`}
+                  >
+                    [whisper]
+                  </button>
+                </div>
               )}
             </div>
           );