feat: add CallParticipantsIndicator component to display active call participants

fix: silently ignore OIDC configuration errors in ServerConfigsLoader
fix: handle loadPreview errors in UrlPreviewCard component
fix: silently ignore errors in notification tap listener setup in tauri

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

@@ -51,6 +51,9 @@ import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationS
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
+import { CallParticipantsIndicator } from './CallParticipantsIndicator';
+import { useCall } from '../call/useCall';
+import { CallType } from '../call/types';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -64,6 +67,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
     const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
     const powerLevels = usePowerLevels(room);
     const creators = useRoomCreators(room);
+    const { startCall, endCall, activeCall, callSupported } = useCall();
 
     const permissions = useRoomPermissions(creators, powerLevels);
     const canInvite = permissions.action('invite', mx.getSafeUserId());
@@ -93,6 +97,19 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
       requestClose();
     };
 
+    const handleJoinVoice = async () => {
+      try {
+        // If already in a call, leave it first
+        if (activeCall) {
+          await endCall();
+        }
+        await startCall(room.roomId, CallType.Voice);
+        requestClose();
+      } catch (error) {
+        console.error('Failed to join voice call:', error);
+      }
+    };
+
     return (
       <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
         {invitePrompt && room && (
@@ -140,6 +157,19 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
         </Box>
         <Line variant="Surface" size="300" />
         <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+          <MenuItem
+            onClick={handleJoinVoice}
+            variant="Primary"
+            fill="None"
+            size="300"
+            after={<Icon size="100" src={Icons.VolumeHigh} />}
+            radii="300"
+            disabled={!callSupported}
+          >
+            <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+              Join Voice
+            </Text>
+          </MenuItem>
           <MenuItem
             onClick={handleInvite}
             variant="Primary"
@@ -260,65 +290,66 @@ export function RoomNavItem({
   const optionsVisible = hover || !!menuAnchor;
 
   return (
-    <NavItem
-      variant="Background"
-      radii="400"
-      highlight={unread !== undefined}
-      aria-selected={selected}
-      data-hover={!!menuAnchor}
-      onContextMenu={handleContextMenu}
-      {...hoverProps}
-      {...focusWithinProps}
-    >
-      <NavLink to={linkPath}>
-        <NavItemContent>
-          <Box as="span" grow="Yes" alignItems="Center" gap="200">
-            <Avatar size="200" radii="400">
-              {showAvatar ? (
-                <RoomAvatar
-                  roomId={room.roomId}
-                  src={
-                    direct
-                      ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
-                      : getRoomAvatarUrl(mx, room, 96, useAuthentication)
-                  }
-                  alt={room.name}
-                  renderFallback={() => (
-                    <Text as="span" size="H6">
-                      {nameInitials(room.name)}
-                    </Text>
-                  )}
-                />
-              ) : (
-                <RoomIcon
-                  style={{ opacity: unread ? config.opacity.P500 : config.opacity.P300 }}
-                  filled={selected}
-                  size="100"
-                  joinRule={room.getJoinRule()}
-                />
+    <Box direction="Column" style={{ width: '100%' }}>
+      <NavItem
+        variant="Background"
+        radii="400"
+        highlight={unread !== undefined}
+        aria-selected={selected}
+        data-hover={!!menuAnchor}
+        onContextMenu={handleContextMenu}
+        {...hoverProps}
+        {...focusWithinProps}
+      >
+        <NavLink to={linkPath}>
+          <NavItemContent>
+            <Box as="span" grow="Yes" alignItems="Center" gap="200">
+              <Avatar size="200" radii="400">
+                {showAvatar ? (
+                  <RoomAvatar
+                    roomId={room.roomId}
+                    src={
+                      direct
+                        ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+                        : getRoomAvatarUrl(mx, room, 96, useAuthentication)
+                    }
+                    alt={room.name}
+                    renderFallback={() => (
+                      <Text as="span" size="H6">
+                        {nameInitials(room.name)}
+                      </Text>
+                    )}
+                  />
+                ) : (
+                  <RoomIcon
+                    style={{ opacity: unread ? config.opacity.P500 : config.opacity.P300 }}
+                    filled={selected}
+                    size="100"
+                    joinRule={room.getJoinRule()}
+                  />
+                )}
+              </Avatar>
+              <Box as="span" grow="Yes">
+                <Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
+                  {room.name}
+                </Text>
+              </Box>
+              {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
+                <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
+                  <TypingIndicator size="300" disableAnimation />
+                </Badge>
+              )}
+              {!optionsVisible && unread && (
+                <UnreadBadgeCenter>
+                  <UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
+                </UnreadBadgeCenter>
+              )}
+              {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
+                <Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
               )}
-            </Avatar>
-            <Box as="span" grow="Yes">
-              <Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
-                {room.name}
-              </Text>
             </Box>
-            {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
-              <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
-                <TypingIndicator size="300" disableAnimation />
-              </Badge>
-            )}
-            {!optionsVisible && unread && (
-              <UnreadBadgeCenter>
-                <UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
-              </UnreadBadgeCenter>
-            )}
-            {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
-              <Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
-            )}
-          </Box>
-        </NavItemContent>
-      </NavLink>
+          </NavItemContent>
+        </NavLink>
       {optionsVisible && (
         <NavItemOptions>
           <PopOut
@@ -360,6 +391,8 @@ export function RoomNavItem({
           </PopOut>
         </NavItemOptions>
       )}
-    </NavItem>
+      </NavItem>
+      <CallParticipantsIndicator roomId={room.roomId} />
+    </Box>
   );
 }