fix(webrtc): fix typescript errors for participant list migration

web/src/components/VoiceChannel.tsx

@@ -1,4 +1,8 @@
 import { useVoiceStore } from '../stores/voice.ts';
+import { useAuthStore } from '../stores/auth.ts';
+import { usePermissions } from '../lib/usePermissions.ts';
+import { useChannelStore } from '../stores/channel.ts';
+import { api } from '../lib/api.ts';
 
 interface VoiceChannelProps {
   channelId: string;
@@ -10,6 +14,29 @@ export function VoiceChannel({ channelId, channelName }: VoiceChannelProps) {
   const isConnected = useVoiceStore((state) => state.isConnected);
   const joinVoice = useVoiceStore((state) => state.joinVoice);
   const participants = useVoiceStore((state) => state.participants);
+  
+  const currentUserId = useAuthStore((state) => state.user?.id);
+  const activeChannelId = useChannelStore((s) => s.activeChannelId);
+  const channelsByServer = useChannelStore((s) => s.channelsByServer);
+  
+  const serverId = activeChannelId 
+    ? Object.entries(channelsByServer).find(([_, channels]) => channels.some(c => c.id === activeChannelId))?.[0]
+    : null;
+    
+  const { canMute } = usePermissions(serverId || null);
+
+  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);
+    }
+  };
+
+  const whisperTo = (identity: string, username: string) => {
+    useVoiceStore.getState().whisperTo(identity, username);
+  };
 
   const isActive = currentRoom === channelId;
 
@@ -50,19 +77,43 @@ export function VoiceChannel({ channelId, channelName }: VoiceChannelProps) {
       </button>
       {isActive && (
         <div className="pl-7 py-0.5">
-          {participants.map((p) => (
-            <div
-              key={p.identity}
-              className="text-xxs text-gb-fg-f flex items-center gap-1"
-            >
-              <span className={p.isSpeaking ? 'text-gb-green' : 'text-gb-fg-f'}>
-                {p.isMuted ? '○' : '●'}
-              </span>
-              <span className={p.isSpeaking ? 'text-gb-green' : ''}>
-                {p.username}
-              </span>
-            </div>
-          ))}
+          {participants.map((p) => {
+            const isMe = p.identity === currentUserId;
+            return (
+              <div
+                key={p.identity}
+                className="text-xxs text-gb-fg-f flex items-center gap-1 group"
+              >
+                <span className={p.isSpeaking ? 'text-gb-green' : 'text-gb-fg-f'}>
+                  {p.isMuted ? '○' : '●'}
+                </span>
+                <span className={p.isSpeaking ? 'text-gb-green' : ''}>
+                  {p.username}
+                </span>
+                
+                {!isMe && (
+                  <div className="ml-auto opacity-0 group-hover:opacity-100 flex items-center gap-1">
+                    {canMute && !p.isMuted && (
+                      <button
+                        className="text-gb-fg-f hover:text-gb-red"
+                        onClick={(e) => { e.stopPropagation(); handleMute(p.identity); }}
+                        title={`Mute ${p.username}`}
+                      >
+                        [mute]
+                      </button>
+                    )}
+                    <button
+                      className="text-gb-fg-f hover:text-gb-orange"
+                      onClick={(e) => { e.stopPropagation(); whisperTo(p.identity, p.username); }}
+                      title={`Whisper to ${p.username}`}
+                    >
+                      [whisper]
+                    </button>
+                  </div>
+                )}
+              </div>
+            );
+          })}
         </div>
       )}
     </div>