feat: implement sidebar docked call panel with participant management and sync status handling

src/app/features/call/CallOverlay.css.ts

@@ -54,6 +54,53 @@ export const DockIndicator = style({
   borderLeft: `2px dashed ${color.Primary.Main}`,
 });
 
+export const SidebarDockIndicator = style({
+  position: 'fixed',
+  left: toRem(68), // After space panel (68px)
+  bottom: 0,
+  width: toRem(256), // Room list panel width
+  height: toRem(120),
+  backgroundColor: color.Primary.Container,
+  opacity: 0.5,
+  zIndex: 9998,
+  pointerEvents: 'none',
+  borderTop: `2px dashed ${color.Primary.Main}`,
+  borderRight: `2px dashed ${color.Primary.Main}`,
+});
+
+export const SidebarDockedCallContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: config.space.S200,
+  padding: config.space.S200,
+  backgroundColor: color.Surface.Container,
+  borderTop: `1px solid ${color.Surface.ContainerLine}`,
+  marginTop: 'auto',
+});
+
+export const SidebarDockedCallHeader = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: config.space.S100,
+  color: color.Surface.OnContainer,
+  cursor: 'grab',
+  padding: config.space.S100,
+  borderRadius: config.radii.R200,
+  selectors: {
+    '&:hover': {
+      backgroundColor: color.Surface.ContainerHover,
+    },
+  },
+});
+
+export const SidebarDockedCallControls = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: config.space.S100,
+});
+
 export const DockedCallPanelLayout = style({
   width: toRem(266),
   height: '100%',

src/app/features/call/CallOverlay.tsx

@@ -28,10 +28,16 @@ interface DragPosition {
 
 /** Threshold in pixels for docking detection */
 const DOCK_THRESHOLD = 50;
+/** Combined width of space panel (68px) + room list panel (256px) for dock detection */
+const ROOM_LIST_EDGE = 324;
+
+/** Dock zone type */
+type DockZone = 'none' | 'right' | 'sidebar';
 
 /** Custom hook for draggable functionality with viewport constraints and docking detection */
 function useDraggable(
-  onDockRequest?: () => void,
+  onDockRight?: () => void,
+  onDockSidebar?: () => void,
   onUndockRequest?: () => void,
   isDocked?: boolean,
   pendingDrag?: PendingDragState | null,
@@ -39,7 +45,7 @@ function useDraggable(
 ) {
   const [position, setPosition] = useState<DragPosition>({ x: 0, y: 0 });
   const [isDragging, setIsDragging] = useState(false);
-  const [isNearDockZone, setIsNearDockZone] = useState(false);
+  const [nearDockZone, setNearDockZone] = useState<DockZone>('none');
   const dragRef = useRef<HTMLDivElement>(null);
   const dragStartRef = useRef<{ x: number; y: number; startX: number; startY: number } | null>(null);
 
@@ -145,9 +151,20 @@ function useDraggable(
     const handleMouseMove = (e: MouseEvent) => {
       if (!dragStartRef.current || !dragRef.current) return;
       
-      // Check if near right edge for docking
+      // Check dock zones
       const nearRightEdge = e.clientX > window.innerWidth - DOCK_THRESHOLD;
-      setIsNearDockZone(nearRightEdge && !isDocked);
+      const nearSidebarZone = e.clientX < ROOM_LIST_EDGE + DOCK_THRESHOLD && 
+                              e.clientY > window.innerHeight - 150;
+      
+      if (!isDocked) {
+        if (nearSidebarZone) {
+          setNearDockZone('sidebar');
+        } else if (nearRightEdge) {
+          setNearDockZone('right');
+        } else {
+          setNearDockZone('none');
+        }
+      }
       
       // If docked and dragging away from edge, trigger undock
       if (isDocked) {
@@ -191,12 +208,20 @@ function useDraggable(
     };
 
     const handleMouseUp = (e: MouseEvent) => {
-      // Check if should dock on mouse release
-      if (!isDocked && e.clientX > window.innerWidth - DOCK_THRESHOLD) {
-        onDockRequest?.();
+      // Check which dock zone to use
+      const nearRightEdge = e.clientX > window.innerWidth - DOCK_THRESHOLD;
+      const nearSidebarZone = e.clientX < ROOM_LIST_EDGE + DOCK_THRESHOLD && 
+                              e.clientY > window.innerHeight - 150;
+      
+      if (!isDocked) {
+        if (nearSidebarZone) {
+          onDockSidebar?.();
+        } else if (nearRightEdge) {
+          onDockRight?.();
+        }
       }
       setIsDragging(false);
-      setIsNearDockZone(false);
+      setNearDockZone('none');
       dragStartRef.current = null;
     };
 
@@ -207,9 +232,9 @@ function useDraggable(
       document.removeEventListener('mousemove', handleMouseMove);
       document.removeEventListener('mouseup', handleMouseUp);
     };
-  }, [isDragging, position, isDocked, onDockRequest, onUndockRequest]);
+  }, [isDragging, position, isDocked, onDockRight, onDockSidebar, onUndockRequest]);
 
-  return { position, isDragging, isNearDockZone, handleMouseDown, dragRef };
+  return { position, isDragging, nearDockZone, handleMouseDown, dragRef };
 }
 
 /**
@@ -687,6 +712,7 @@ export function CallOverlay() {
   
   // Docking state
   const [isDocked, setIsDocked] = useSetting(settingsAtom, 'isCallPanelDocked');
+  const [, setDockPosition] = useSetting(settingsAtom, 'callPanelDockPosition');
   
   // Pending drag state from undocking
   const [pendingDrag, setPendingDrag] = useAtom(pendingUndockDragAtom);
@@ -695,16 +721,23 @@ export function CallOverlay() {
     setPendingDrag(null);
   }, [setPendingDrag]);
   
-  const handleDockRequest = useCallback(() => {
+  const handleDockRight = useCallback(() => {
+    setDockPosition('right');
     setIsDocked(true);
-  }, [setIsDocked]);
+  }, [setIsDocked, setDockPosition]);
+  
+  const handleDockSidebar = useCallback(() => {
+    setDockPosition('sidebar');
+    setIsDocked(true);
+  }, [setIsDocked, setDockPosition]);
   
   const handleUndockRequest = useCallback(() => {
     setIsDocked(false);
   }, [setIsDocked]);
   
-  const { position, isDragging, isNearDockZone, handleMouseDown, dragRef } = useDraggable(
-    handleDockRequest,
+  const { position, isDragging, nearDockZone, handleMouseDown, dragRef } = useDraggable(
+    handleDockRight,
+    handleDockSidebar,
     handleUndockRequest,
     isDocked,
     pendingDrag,
@@ -1047,8 +1080,9 @@ export function CallOverlay() {
 
   return (
     <>
-      {/* Dock indicator shown when dragging near the right edge */}
-      {isNearDockZone && !isDocked && <div className={css.DockIndicator} />}
+      {/* Dock indicators shown when dragging near dock zones */}
+      {nearDockZone === 'right' && !isDocked && <div className={css.DockIndicator} />}
+      {nearDockZone === 'sidebar' && !isDocked && <div className={css.SidebarDockIndicator} />}
       <div
         ref={setContainerRef}
         className={containerClass}

src/app/features/call/DockedCallPanel.tsx

@@ -1,17 +1,17 @@
 import React from 'react';
 import { Box, Line } from 'folds';
-import { useIsCallDocked } from './useDockedCall';
+import { useIsCallDockedRight } from './useDockedCall';
 import { DockedCallContent } from './DockedCallContent';
 import * as css from './CallOverlay.css';
 
 /**
- * Component that renders the docked call panel in the layout flow
- * Only renders when there's an active call AND docking is enabled
+ * Component that renders the docked call panel in the layout flow (right side)
+ * Only renders when there's an active call AND docking is enabled for right position
  */
 export function DockedCallPanel() {
-  const isCallDocked = useIsCallDocked();
+  const isCallDockedRight = useIsCallDockedRight();
   
-  if (!isCallDocked) {
+  if (!isCallDockedRight) {
     return null;
   }
   

src/app/features/call/SidebarDockedCallPanel.tsx

@@ -0,0 +1,299 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Icon, IconButton, Icons, Scroll, Text, Tooltip, TooltipProvider, color } from 'folds';
+import { useSetAtom } from 'jotai';
+import { useCall } from './useCall';
+import { useRoomCallMembers } from './useRoomCallMembers';
+import { CallState } from './types';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+import { pendingUndockDragAtom } from './pendingDragState';
+import { useIsCallDockedSidebar } from './useDockedCall';
+import { getMemberDisplayName, getMemberAvatarMxc } from '../../utils/room';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { UserAvatar } from '../../components/user-avatar';
+import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import * as css from './CallOverlay.css';
+
+/**
+ * Formats call duration in MM:SS format
+ */
+function formatDuration(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  const secsStr = secs < 10 ? `0${secs}` : `${secs}`;
+  return `${mins}:${secsStr}`;
+}
+
+/**
+ * Sidebar docked call panel - renders at bottom of room list
+ */
+export function SidebarDockedCallPanel() {
+  const isCallDockedSidebar = useIsCallDockedSidebar();
+  const { activeCall, endCall, toggleMute, toggleDeafen } = useCall();
+  const mx = useMatrixClient();
+  const useAuthentication = useMediaAuthentication();
+  const selectedRoomId = useSelectedRoom();
+  const { navigateRoom } = useRoomNavigate();
+  const [duration, setDuration] = useState(0);
+  const [showParticipants, setShowParticipants] = useState(true);
+  const [, setIsDocked] = useSetting(settingsAtom, 'isCallPanelDocked');
+  const setPendingDrag = useSetAtom(pendingUndockDragAtom);
+  const { callMembers } = useRoomCallMembers(activeCall?.roomId ?? '');
+  const myUserId = mx.getUserId() ?? '';
+
+  useEffect(() => {
+    if (!activeCall || activeCall.state !== CallState.Connected) {
+      setDuration(0);
+      return undefined;
+    }
+
+    const { startTime } = activeCall;
+    const updateDuration = () => {
+      const elapsed = Math.floor((Date.now() - startTime) / 1000);
+      setDuration(elapsed);
+    };
+
+    updateDuration();
+    const interval = setInterval(updateDuration, 1000);
+
+    return () => clearInterval(interval);
+  }, [activeCall]);
+
+  /**
+   * Checks if a participant is currently speaking
+   */
+  const isParticipantSpeaking = (userId: string): boolean => {
+    if (!activeCall) return false;
+    if (activeCall.activeSpeakers.has(userId)) return true;
+    
+    const member = callMembers.find((m) => m.userId === userId);
+    if (!member) return false;
+    
+    return Array.from(activeCall.activeSpeakers).some((speakerId) => {
+      const underscoreIndex = speakerId.lastIndexOf('_');
+      const deviceId = underscoreIndex > 0 ? speakerId.substring(0, underscoreIndex) : speakerId;
+      return deviceId === member.deviceId;
+    });
+  };
+
+  /**
+   * Checks if a participant is currently muted
+   */
+  const isParticipantMuted = (userId: string): boolean => {
+    if (!activeCall) return false;
+    if (userId === myUserId) return activeCall.isMuted;
+    
+    const member = callMembers.find((m) => m.userId === userId);
+    if (!member) return false;
+    
+    return Array.from(activeCall.mutedParticipants).some((mutedId) => {
+      const underscoreIndex = mutedId.lastIndexOf('_');
+      const deviceId = underscoreIndex > 0 ? mutedId.substring(0, underscoreIndex) : mutedId;
+      return deviceId === member.deviceId;
+    });
+  };
+
+  /**
+   * Handle mousedown on header to start drag-to-undock
+   */
+  const handleHeaderMouseDown = async (e: React.MouseEvent) => {
+    if ((e.target as HTMLElement).closest('button')) return;
+    
+    if (document.fullscreenElement) {
+      try {
+        await document.exitFullscreen();
+      } catch {
+        // Ignore
+      }
+    }
+    
+    const header = e.currentTarget as HTMLElement;
+    const rect = header.getBoundingClientRect();
+    
+    setPendingDrag({
+      startX: e.clientX,
+      startY: e.clientY,
+      offsetX: e.clientX - rect.left,
+      offsetY: e.clientY - rect.top,
+      timestamp: Date.now(),
+    });
+    
+    setIsDocked(false);
+  };
+
+  if (!isCallDockedSidebar || !activeCall || activeCall.state === CallState.Idle || activeCall.state === CallState.Ended) {
+    return null;
+  }
+
+  const isConnecting = activeCall.state === CallState.Connecting;
+  const room = mx.getRoom(activeCall.roomId);
+  const allParticipants = callMembers.map((m) => m.userId);
+  const participantCount = allParticipants.length;
+
+  return (
+    <div className={css.SidebarDockedCallContainer}>
+      {/* Header - drag to undock */}
+      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+      <div 
+        className={css.SidebarDockedCallHeader}
+        onMouseDown={handleHeaderMouseDown}
+      >
+        <Box alignItems="Center" gap="200" style={{ minWidth: 0, flex: 1 }}>
+          <Icon size="100" src={Icons.Phone} />
+          <Text size="T300" truncate>
+            {isConnecting ? 'Connecting...' : room?.name ?? 'Call'}
+          </Text>
+          {selectedRoomId === activeCall.roomId && (
+            <Icon size="100" src={Icons.Check} style={{ opacity: 0.7 }} />
+          )}
+        </Box>
+        <Box alignItems="Center" gap="100">
+          <Text size="T200" style={{ opacity: 0.7 }}>
+            {formatDuration(duration)}
+          </Text>
+          {selectedRoomId !== activeCall.roomId && (
+            <TooltipProvider
+              position="Top"
+              offset={4}
+              tooltip={<Tooltip><Text>Go to Room</Text></Tooltip>}
+            >
+              {(triggerRef) => (
+                <IconButton 
+                  ref={triggerRef} 
+                  onClick={() => navigateRoom(activeCall.roomId)} 
+                  variant="Secondary" 
+                  size="300"
+                >
+                  <Icon size="100" src={Icons.Link} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          )}
+        </Box>
+      </div>
+
+      {/* Participants */}
+      <div className={css.ParticipantsSection}>
+        <button
+          type="button"
+          className={css.ParticipantsHeader}
+          onClick={() => setShowParticipants(!showParticipants)}
+        >
+          <Icon size="100" src={Icons.User} style={{ opacity: 0.7 }} />
+          <Text size="T200" className={css.ParticipantsHeaderText}>
+            {participantCount} Participant{participantCount !== 1 ? 's' : ''}
+          </Text>
+          <Icon
+            size="100"
+            src={showParticipants ? Icons.ChevronTop : Icons.ChevronBottom}
+            style={{ opacity: 0.7 }}
+          />
+        </button>
+        {showParticipants && room && (
+          <Scroll hideTrack visibility="Hover" style={{ maxHeight: '150px' }}>
+            <div className={css.ParticipantsList}>
+              {allParticipants.map((participantId) => {
+                const avatarMxc = getMemberAvatarMxc(room, participantId);
+                const avatarUrl = avatarMxc
+                  ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 32, 32, 'crop') ?? undefined
+                  : undefined;
+                const displayName = getMemberDisplayName(room, participantId) 
+                  ?? getMxIdLocalPart(participantId) 
+                  ?? participantId;
+                const isMe = participantId === myUserId;
+                const isMuted = isParticipantMuted(participantId);
+                const isSpeaking = isParticipantSpeaking(participantId);
+                
+                return (
+                  <div key={participantId} className={css.ParticipantItem}>
+                    <div 
+                      className={`${css.ParticipantAvatarWrapper} ${isSpeaking ? css.ParticipantSpeaking : ''}`}
+                    >
+                      <UserAvatar
+                        className={css.ParticipantAvatar}
+                        userId={participantId}
+                        src={avatarUrl}
+                        alt={displayName}
+                        renderFallback={() => (
+                          <Text size="H6" style={{ color: color.Surface.Container }}>
+                            {displayName.charAt(0).toUpperCase()}
+                          </Text>
+                        )}
+                      />
+                    </div>
+                    <Box direction="Column" style={{ minWidth: 0, flex: 1 }}>
+                      <Text size="T200" truncate>
+                        {displayName}
+                        {isMe && <span className={css.YouBadge}> (You)</span>}
+                      </Text>
+                    </Box>
+                    {isMuted && (
+                      <Icon size="100" src={Icons.MicMute} style={{ opacity: 0.5 }} />
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          </Scroll>
+        )}
+      </div>
+
+      {/* Controls */}
+      <div className={css.SidebarDockedCallControls}>
+        <TooltipProvider
+          position="Top"
+          offset={4}
+          tooltip={<Tooltip><Text>{activeCall.isMuted ? 'Unmute' : 'Mute'}</Text></Tooltip>}
+        >
+          {(triggerRef) => (
+            <IconButton
+              ref={triggerRef}
+              onClick={toggleMute}
+              variant={activeCall.isMuted ? 'Critical' : 'Secondary'}
+              size="300"
+            >
+              <Icon size="200" src={activeCall.isMuted ? Icons.MicMute : Icons.Mic} />
+            </IconButton>
+          )}
+        </TooltipProvider>
+
+        <TooltipProvider
+          position="Top"
+          offset={4}
+          tooltip={<Tooltip><Text>{activeCall.isDeafened ? 'Undeafen' : 'Deafen'}</Text></Tooltip>}
+        >
+          {(triggerRef) => (
+            <IconButton
+              ref={triggerRef}
+              onClick={toggleDeafen}
+              variant={activeCall.isDeafened ? 'Critical' : 'Secondary'}
+              size="300"
+            >
+              <Icon size="200" src={activeCall.isDeafened ? Icons.VolumeMute : Icons.VolumeHigh} />
+            </IconButton>
+          )}
+        </TooltipProvider>
+
+        <TooltipProvider
+          position="Top"
+          offset={4}
+          tooltip={<Tooltip><Text>End Call</Text></Tooltip>}
+        >
+          {(triggerRef) => (
+            <IconButton
+              ref={triggerRef}
+              onClick={endCall}
+              variant="Critical"
+              size="300"
+            >
+              <Icon size="200" src={Icons.Phone} />
+            </IconButton>
+          )}
+        </TooltipProvider>
+      </div>
+    </div>
+  );
+}

src/app/features/call/index.ts

@@ -10,3 +10,4 @@ export * from './useRoomCallMembers';
 export * from './useDockedCall';
 export * from './DockedCallPanel';
 export * from './DockedCallContent';
+export * from './SidebarDockedCallPanel';

src/app/features/call/useDockedCall.ts

@@ -1,5 +1,5 @@
 import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
+import { settingsAtom, CallPanelDockPosition } from '../../state/settings';
 import { useCall } from './useCall';
 import { CallState } from './types';
 
@@ -16,3 +16,31 @@ export function useIsCallDocked(): boolean {
   
   return Boolean(hasActiveCall && isDocked);
 }
+
+/**
+ * Hook to determine if the call panel is docked to the right side
+ */
+export function useIsCallDockedRight(): boolean {
+  const isCallDocked = useIsCallDocked();
+  const [dockPosition] = useSetting(settingsAtom, 'callPanelDockPosition');
+  
+  return isCallDocked && dockPosition === 'right';
+}
+
+/**
+ * Hook to determine if the call panel is docked in the sidebar
+ */
+export function useIsCallDockedSidebar(): boolean {
+  const isCallDocked = useIsCallDocked();
+  const [dockPosition] = useSetting(settingsAtom, 'callPanelDockPosition');
+  
+  return isCallDocked && dockPosition === 'sidebar';
+}
+
+/**
+ * Hook to get the current dock position setting
+ */
+export function useCallDockPosition(): CallPanelDockPosition {
+  const [dockPosition] = useSetting(settingsAtom, 'callPanelDockPosition');
+  return dockPosition;
+}

src/app/features/room-nav/CallParticipantsIndicator.css.ts

@@ -0,0 +1,10 @@
+import { style } from '@vanilla-extract/css';
+import { color } from 'folds';
+
+/**
+ * Style for participants who are currently speaking
+ * Adds a green glow effect to indicate voice activity
+ */
+export const ParticipantSpeaking = style({
+  boxShadow: `0 0 0 2px ${color.Success.Main}`,
+});

src/app/features/room-nav/CallParticipantsIndicator.tsx

@@ -7,6 +7,7 @@ import { mxcUrlToHttp, getMxIdLocalPart } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { nameInitials } from '../../utils/common';
 import { useCall } from '../call/useCall';
+import * as css from './CallParticipantsIndicator.css';
 
 const MAX_VISIBLE_PARTICIPANTS = 8;
 
@@ -20,6 +21,7 @@ export function CallParticipantsIndicator({ roomId }: CallParticipantsIndicatorP
   const room = mx.getRoom(roomId);
   const { callMembers, isCallActive } = useRoomCallMembers(roomId);
   const { activeCall } = useCall();
+  const myUserId = mx.getUserId();
 
   if (!isCallActive || callMembers.length === 0 || !room) {
     return null;
@@ -38,14 +40,37 @@ export function CallParticipantsIndicator({ roomId }: CallParticipantsIndicatorP
     return getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
   };
 
+  /**
+   * Check if a participant is currently speaking
+   */
+  const isParticipantSpeaking = (userId: string): boolean => {
+    if (!activeCall) return false;
+    
+    // Direct check for Matrix user ID (works for local user)
+    if (activeCall.activeSpeakers.has(userId)) return true;
+    
+    // For remote users, activeSpeakers contains LiveKit identities (deviceId_timestamp)
+    const member = callMembers.find((m) => m.userId === userId);
+    if (!member) return false;
+    
+    // Check if any active speaker has this user's deviceId
+    return Array.from(activeCall.activeSpeakers).some((speakerId) => {
+      const underscoreIndex = speakerId.lastIndexOf('_');
+      const deviceId = underscoreIndex > 0 ? speakerId.substring(0, underscoreIndex) : speakerId;
+      return deviceId === member.deviceId;
+    });
+  };
+
+  /**
+   * Check if a participant is currently muted
+   */
   const isParticipantMuted = (userId: string): boolean => {
     if (!activeCall) return false;
     
     // For local user, check activeCall.isMuted
-    if (userId === mx.getUserId()) return activeCall.isMuted;
+    if (userId === myUserId) return activeCall.isMuted;
     
     // For remote users, mutedParticipants contains LiveKit identities (deviceId_timestamp)
-    // We need to find the deviceId for this user and check if any matching identity is muted
     const member = callMembers.find((m) => m.userId === userId);
     if (!member) return false;
     
@@ -57,6 +82,24 @@ export function CallParticipantsIndicator({ roomId }: CallParticipantsIndicatorP
     });
   };
 
+  /**
+   * Check if the local user is deafened
+   */
+  const isLocalUserDeafened = (userId: string): boolean => {
+    if (!activeCall || userId !== myUserId) return false;
+    return activeCall.isDeafened;
+  };
+
+  /**
+   * Get the appropriate audio icon for a participant
+   */
+  const getAudioIcon = (userId: string): string => {
+    if (isLocalUserDeafened(userId)) {
+      return Icons.VolumeMute;
+    }
+    return isParticipantMuted(userId) ? Icons.MicMute : Icons.Mic;
+  };
+
   return (
     <Box
       direction="Column"
@@ -67,45 +110,58 @@ export function CallParticipantsIndicator({ roomId }: CallParticipantsIndicatorP
         width: '100%',
       }}
     >
-      {visibleMembers.map((member) => (
-        <Box
-          key={member.userId}
-          alignItems="Center"
-          gap="100"
-          style={{
-            opacity: config.opacity.P300,
-          }}
-        >
-          <Avatar size="200" radii="Pill">
-            {getParticipantAvatar(member.userId) ? (
-              <img
-                src={getParticipantAvatar(member.userId)}
-                alt={getParticipantName(member.userId)}
-                style={{
-                  width: '100%',
-                  height: '100%',
-                  objectFit: 'cover',
-                  borderRadius: 'inherit',
-                }}
+      {visibleMembers.map((member) => {
+        const isSpeaking = isParticipantSpeaking(member.userId);
+        const isMuted = isParticipantMuted(member.userId);
+        const isDeafened = isLocalUserDeafened(member.userId);
+        
+        return (
+          <Box
+            key={member.userId}
+            alignItems="Center"
+            gap="100"
+            style={{
+              opacity: config.opacity.P300,
+            }}
+          >
+            <Avatar 
+              size="200" 
+              radii="Pill"
+              className={isSpeaking ? css.ParticipantSpeaking : undefined}
+            >
+              {getParticipantAvatar(member.userId) ? (
+                <img
+                  src={getParticipantAvatar(member.userId)}
+                  alt={getParticipantName(member.userId)}
+                  style={{
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                    borderRadius: 'inherit',
+                  }}
+                />
+              ) : (
+                <Text as="span" size="H6">
+                  {nameInitials(getParticipantName(member.userId))}
+                </Text>
+              )}
+            </Avatar>
+            <Box alignItems="Center" gap="100" grow="Yes">
+              <Icon 
+                src={getAudioIcon(member.userId)} 
+                size="50" 
+                style={{ 
+                  opacity: config.opacity.P500,
+                  color: isDeafened ? 'var(--color-Critical-Main)' : isMuted ? 'var(--color-Critical-Main)' : undefined 
+                }} 
               />
-            ) : (
-              <Text as="span" size="H6">
-                {nameInitials(getParticipantName(member.userId))}
+              <Text as="span" size="T200" truncate>
+                {getParticipantName(member.userId)}
               </Text>
-            )}
-          </Avatar>
-          <Box alignItems="Center" gap="100" grow="Yes">
-            <Icon 
-              src={isParticipantMuted(member.userId) ? Icons.MicMute : Icons.Mic} 
-              size="50" 
-              style={{ opacity: config.opacity.P500 }} 
-            />
-            <Text as="span" size="T200" truncate>
-              {getParticipantName(member.userId)}
-            </Text>
+            </Box>
           </Box>
-        </Box>
-      ))}
+        );
+      })}
       {remainingCount > 0 && (
         <Box
           alignItems="Center"

src/app/features/room/RoomViewFollowing.tsx

@@ -80,12 +80,7 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>(
               <Icon style={{ opacity: config.opacity.P300 }} size="100" src={Icons.CheckTwice} />
               <Text size="T300" truncate>
                 {names.length === 1 && (
-                  <>
                     <b>{names[0]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {' is following the conversation.'}
-                    </Text>
-                  </>
                 )}
                 {names.length === 2 && (
                   <>
@@ -94,9 +89,6 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>(
                       {' and '}
                     </Text>
                     <b>{names[1]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {' are following the conversation.'}
-                    </Text>
                   </>
                 )}
                 {names.length === 3 && (
@@ -110,9 +102,6 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>(
                       {' and '}
                     </Text>
                     <b>{names[2]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {' are following the conversation.'}
-                    </Text>
                   </>
                 )}
                 {names.length > 3 && (
@@ -130,9 +119,6 @@ export const RoomViewFollowing = as<'div', RoomViewFollowingProps>(
                       {' and '}
                     </Text>
                     <b>{names.length - 3} others</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {' are following the conversation.'}
-                    </Text>
                   </>
                 )}
               </Text>