fix(voice): broadcast VOICE_JOIN/LEAVE via ws, show participants in sidebar for all users

web/src/components/VoiceChannel.tsx

@@ -2,6 +2,7 @@ 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 { useVoicePresenceStore } from '../stores/voicePresence.ts';
 import { api } from '../lib/api.ts';
 
 interface VoiceChannelProps {
@@ -13,7 +14,8 @@ export function VoiceChannel({ channelId, channelName }: VoiceChannelProps) {
   const currentRoom = useVoiceStore((state) => state.currentRoom);
   const isConnected = useVoiceStore((state) => state.isConnected);
   const joinVoice = useVoiceStore((state) => state.joinVoice);
-  const participants = useVoiceStore((state) => state.participants);
+  const liveParticipants = useVoiceStore((state) => state.participants);
+  const presenceParticipants = useVoicePresenceStore((s) => s.getParticipants(channelId));
   
   const currentUserId = useAuthStore((state) => state.user?.id);
   const activeChannelId = useChannelStore((s) => s.activeChannelId);
@@ -40,6 +42,11 @@ export function VoiceChannel({ channelId, channelName }: VoiceChannelProps) {
 
   const isActive = currentRoom === channelId;
 
+  // Use live participants when in the room, otherwise fall back to presence
+  const displayParticipants = isActive && isConnected
+    ? liveParticipants.map(p => ({ userId: p.identity, username: p.username, isMuted: p.isMuted, isSpeaking: p.isSpeaking, hasVideo: p.hasVideo, isScreenSharing: p.isScreenSharing }))
+    : presenceParticipants.map(p => ({ userId: p.userId, username: p.username, isMuted: true, isSpeaking: false, hasVideo: false, isScreenSharing: false }));
+
   const handleClick = () => {
     if (!isActive) {
       console.log("[VoiceChannel] joining voice:", channelId, channelName);
@@ -69,19 +76,19 @@ export function VoiceChannel({ channelId, channelName }: VoiceChannelProps) {
           🔊
         </span>
         <span className="truncate">{channelName}</span>
-        {isActive && participants.length > 0 && (
+        {displayParticipants.length > 0 && (
           <span className="ml-auto text-xxs text-gb-fg-f">
-            [{participants.length}]
+            [{displayParticipants.length}]
           </span>
         )}
       </button>
-      {isActive && (
+      {displayParticipants.length > 0 && (
         <div className="pl-7 py-0.5">
-          {participants.map((p) => {
-            const isMe = p.identity === currentUserId;
+          {displayParticipants.map((p) => {
+            const isMe = p.userId === currentUserId;
             return (
               <div
-                key={p.identity}
+                key={p.userId}
                 className="text-xxs text-gb-fg-f flex items-center gap-1 group"
               >
                 <span className={p.isSpeaking ? 'text-gb-green' : 'text-gb-fg-f'}>
@@ -93,12 +100,12 @@ export function VoiceChannel({ channelId, channelName }: VoiceChannelProps) {
                 {p.isScreenSharing && <span className="text-gb-aqua" title="Sharing screen">🖥</span>}
                 {p.hasVideo && <span className="text-gb-orange" title="Camera on">🎥</span>}
                 
-                {!isMe && (
+                {!isMe && isActive && (
                   <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); }}
+                        onClick={(e) => { e.stopPropagation(); handleMute(p.userId); }}
                         title={`Mute ${p.username}`}
                       >
                         [mute]
@@ -106,7 +113,7 @@ export function VoiceChannel({ channelId, channelName }: VoiceChannelProps) {
                     )}
                     <button
                       className="text-gb-fg-f hover:text-gb-orange"
-                      onClick={(e) => { e.stopPropagation(); whisperTo(p.identity, p.username); }}
+                      onClick={(e) => { e.stopPropagation(); whisperTo(p.userId, p.username); }}
                       title={`Whisper to ${p.username}`}
                     >
                       [whisper]

web/src/stores/voicePresence.ts

@@ -0,0 +1,42 @@
+import { create } from 'zustand';
+
+export interface VoicePresenceEntry {
+  userId: string;
+  username: string;
+  channelId: string;
+}
+
+interface VoicePresenceState {
+  // channelId -> userId -> entry
+  presence: Record<string, Record<string, VoicePresenceEntry>>;
+  _handleJoin: (entry: VoicePresenceEntry) => void;
+  _handleLeave: (userId: string, channelId: string) => void;
+  getParticipants: (channelId: string) => VoicePresenceEntry[];
+}
+
+export const useVoicePresenceStore = create<VoicePresenceState>((set, get) => ({
+  presence: {},
+
+  _handleJoin: (entry) => {
+    set((state) => {
+      const room = { ...(state.presence[entry.channelId] || {}) };
+      room[entry.userId] = entry;
+      return { presence: { ...state.presence, [entry.channelId]: room } };
+    });
+  },
+
+  _handleLeave: (userId, channelId) => {
+    set((state) => {
+      const room = { ...(state.presence[channelId] || {}) };
+      delete room[userId];
+      const next = { ...state.presence, [channelId]: room };
+      if (Object.keys(room).length === 0) delete next[channelId];
+      return { presence: next };
+    });
+  },
+
+  getParticipants: (channelId) => {
+    const room = get().presence[channelId];
+    return room ? Object.values(room) : [];
+  },
+}));

web/src/stores/ws.ts

@@ -5,6 +5,7 @@ import { useServerStore } from './server.ts';
 import { usePresenceStore } from './presence.ts';
 import { useTypingStore } from './typing.ts';
 import { useVoiceStore } from './voice.ts';
+import { useVoicePresenceStore } from './voicePresence.ts';
 import { useAuthStore } from './auth.ts';
 import { useConversationStore } from './conversation.ts';
 import { useReadStatesStore } from './readStates.ts';
@@ -274,6 +275,24 @@ export const useWebSocketStore = create<WebSocketState>((set, get) => ({
           });
           break;
         }
+        case 'VOICE_JOIN': {
+          const { room_name, user_id, username } = payload as Record<string, string>;
+          if (room_name && user_id && username) {
+            useVoicePresenceStore.getState()._handleJoin({
+              userId: user_id,
+              username,
+              channelId: room_name,
+            });
+          }
+          break;
+        }
+        case 'VOICE_LEAVE': {
+          const { room_name, user_id } = payload as Record<string, string>;
+          if (room_name && user_id) {
+            useVoicePresenceStore.getState()._handleLeave(user_id, room_name);
+          }
+          break;
+        }
         default:
           break;
       }