fix: clean up call nav/call view console warnings

src/app/features/call/CallView.tsx

@@ -209,9 +209,13 @@ export function CallView({ room }: { room: Room }) {
         }}
       >
         <CallViewUserGrid>
-          {callMembers
-            .map((callMember) => <CallViewUser room={room} callMembership={callMember} />)
-            .slice(0, 6)}
+          {callMembers.slice(0, 6).map((callMember) => (
+            <CallViewUser
+              key={callMember.membershipID}
+              room={room}
+              callMembership={callMember}
+            />
+          ))}
         </CallViewUserGrid>
 
         <Box

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

@@ -21,8 +21,8 @@ import {
 } from 'folds';
 import { useFocusWithin, useHover } from 'react-aria';
 import FocusTrap from 'focus-trap-react';
-import { useParams } from 'react-router-dom';
-import { NavButton, NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
+import { useNavigate, useParams } from 'react-router-dom';
+import { NavButton, NavItem, NavItemContent, NavItemOptions } from '../../components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
@@ -256,6 +256,7 @@ export function RoomNavItem({
   const isActiveCall = isActiveCallReady && activeCallRoomId === room.roomId;
   const callMemberships = useCallMembers(mx, room.roomId);
   const { navigateRoom } = useRoomNavigate();
+  const navigate = useNavigate();
   const { roomIdOrAlias: viewedRoomId } = useParams();
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
@@ -275,13 +276,6 @@ export function RoomNavItem({
   };
 
   const handleNavItemClick: MouseEventHandler<HTMLElement> = (evt) => {
-    const target = evt.target as HTMLElement;
-    const chatButton = (evt.currentTarget as HTMLElement).querySelector(
-      '[data-testid="chat-button"]'
-    );
-    if (chatButton && chatButton.contains(target)) {
-      return;
-    }
     if (room.isCallRoom()) {
       if (!isMobile) {
         if (!isActiveCall) {
@@ -308,6 +302,7 @@ export function RoomNavItem({
     evt.stopPropagation();
     if (!isChatOpen) toggleChat();
     setViewedCallRoomId(room.roomId);
+    navigate(linkPath);
   };
 
   const optionsVisible = hover || !!menuAnchor;
@@ -398,6 +393,7 @@ export function RoomNavItem({
               )}
             </Box>
           </NavItemContent>
+        </NavButton>
         {optionsVisible && (
           <NavItemOptions>
             <PopOut
@@ -450,9 +446,7 @@ export function RoomNavItem({
                       size="300"
                       radii="300"
                     >
-                        <NavLink to={linkPath}>
                       <Icon size="50" src={Icons.Message} />
-                        </NavLink>
                     </IconButton>
                   )}
                 </TooltipProvider>
@@ -472,12 +466,15 @@ export function RoomNavItem({
             </PopOut>
           </NavItemOptions>
         )}
-        </NavButton>
       </NavItem>
       {room.isCallRoom() && (
         <Box direction="Column" style={{ paddingLeft: config.space.S200 }}>
           {callMemberships.map((callMembership) => (
-            <RoomNavUser room={room} callMembership={callMembership} />
+            <RoomNavUser
+              key={callMembership.membershipID}
+              room={room}
+              callMembership={callMembership}
+            />
           ))}
         </Box>
       )}

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

@@ -40,9 +40,9 @@ export function RoomNavUser({ room, callMembership }: RoomNavUserProps) {
   return (
     <NavItem variant="Background" radii="400">
       <NavButton onClick={handleNavUserClick} aria-label={ariaLabel}>
-        <NavItemContent>
+        <NavItemContent as="div">
           <Box direction="Column" grow="Yes" gap="200" justifyContent="Stretch">
-            <Box as="span" alignItems="Center" gap="200">
+            <Box alignItems="Center" gap="200">
               <Avatar size="200">
                 <UserAvatar
                   userId={userId}
@@ -51,7 +51,7 @@ export function RoomNavUser({ room, callMembership }: RoomNavUserProps) {
                   renderFallback={() => <Icon size="50" src={Icons.User} filled />}
                 />
               </Avatar>
-              <Text size="B400" priority="300" truncate>
+              <Text as="span" size="B400" priority="300" truncate>
                 {getName}
               </Text>
             </Box>

src/app/pages/client/call/CallProvider.tsx

@@ -257,9 +257,11 @@ export function CallProvider({ children }: CallProviderProps) {
       setIsActiveCallReady(true);
     };
 
-    sendWidgetAction(WIDGET_MEDIA_STATE_UPDATE_ACTION, {
+    void sendWidgetAction(WIDGET_MEDIA_STATE_UPDATE_ACTION, {
       audio_enabled: isAudioEnabled,
       video_enabled: isVideoEnabled,
+    }).catch(() => {
+      // Widget transport may reject while call/session setup is still in progress.
     });
 
     activeClientWidgetApi.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);