From 9dbe53a36a57b6b019495fead550e41f94f630e8 Mon Sep 17 00:00:00 2001
From: hazre <mail@haz.re>
Date: Wed, 11 Feb 2026 15:18:16 +0100
Subject: [PATCH] fix: clean up call nav/call view console warnings

---
 src/app/features/call/CallView.tsx         |  10 +-
 src/app/features/room-nav/RoomNavItem.tsx  | 165 ++++++++++-----------
 src/app/features/room-nav/RoomNavUser.tsx  |   6 +-
 src/app/pages/client/call/CallProvider.tsx |   4 +-
 4 files changed, 94 insertions(+), 91 deletions(-)

diff --git a/src/app/features/call/CallView.tsx b/src/app/features/call/CallView.tsx
index 72867001..060a9cf7 100644
--- a/src/app/features/call/CallView.tsx
+++ b/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
diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 018cbd5a..3097de2f 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/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,86 +393,88 @@ export function RoomNavItem({
               )}
             </Box>
           </NavItemContent>
-          {optionsVisible && (
-            <NavItemOptions>
-              <PopOut
-                id={`menu-${room.roomId}`}
-                aria-expanded={!!menuAnchor}
-                anchor={menuAnchor}
-                offset={menuAnchor?.width === 0 ? 0 : undefined}
-                alignOffset={menuAnchor?.width === 0 ? 0 : -5}
-                position="Bottom"
-                align={menuAnchor?.width === 0 ? 'Start' : 'End'}
-                content={
-                  <FocusTrap
-                    focusTrapOptions={{
-                      initialFocus: false,
-                      returnFocusOnDeactivate: false,
-                      onDeactivate: () => setMenuAnchor(undefined),
-                      clickOutsideDeactivates: true,
-                      isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                      isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                      escapeDeactivates: stopPropagation,
-                    }}
-                  >
-                    <RoomNavItemMenu
-                      room={room}
-                      requestClose={() => setMenuAnchor(undefined)}
-                      notificationMode={notificationMode}
-                    />
-                  </FocusTrap>
-                }
-              >
-                {room.isCallRoom() && (
-                  <TooltipProvider
-                    position="Bottom"
-                    offset={4}
-                    tooltip={
-                      <Tooltip>
-                        <Text>Open Chat</Text>
-                      </Tooltip>
-                    }
-                  >
-                    {(triggerRef) => (
-                      <IconButton
-                        ref={triggerRef}
-                        data-testid="chat-button"
-                        onClick={handleChatButtonClick}
-                        aria-pressed={isChatOpen && selected}
-                        aria-label="Open Chat"
-                        variant="Background"
-                        fill="None"
-                        size="300"
-                        radii="300"
-                      >
-                        <NavLink to={linkPath}>
-                          <Icon size="50" src={Icons.Message} />
-                        </NavLink>
-                      </IconButton>
-                    )}
-                  </TooltipProvider>
-                )}
-                <IconButton
-                  onClick={handleOpenMenu}
-                  aria-pressed={!!menuAnchor}
-                  aria-controls={`menu-${room.roomId}`}
-                  aria-label="More Options"
-                  variant="Background"
-                  fill="None"
-                  size="300"
-                  radii="300"
-                >
-                  <Icon size="50" src={Icons.VerticalDots} />
-                </IconButton>
-              </PopOut>
-            </NavItemOptions>
-          )}
         </NavButton>
+        {optionsVisible && (
+          <NavItemOptions>
+            <PopOut
+              id={`menu-${room.roomId}`}
+              aria-expanded={!!menuAnchor}
+              anchor={menuAnchor}
+              offset={menuAnchor?.width === 0 ? 0 : undefined}
+              alignOffset={menuAnchor?.width === 0 ? 0 : -5}
+              position="Bottom"
+              align={menuAnchor?.width === 0 ? 'Start' : 'End'}
+              content={
+                <FocusTrap
+                  focusTrapOptions={{
+                    initialFocus: false,
+                    returnFocusOnDeactivate: false,
+                    onDeactivate: () => setMenuAnchor(undefined),
+                    clickOutsideDeactivates: true,
+                    isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                    isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                    escapeDeactivates: stopPropagation,
+                  }}
+                >
+                  <RoomNavItemMenu
+                    room={room}
+                    requestClose={() => setMenuAnchor(undefined)}
+                    notificationMode={notificationMode}
+                  />
+                </FocusTrap>
+              }
+            >
+              {room.isCallRoom() && (
+                <TooltipProvider
+                  position="Bottom"
+                  offset={4}
+                  tooltip={
+                    <Tooltip>
+                      <Text>Open Chat</Text>
+                    </Tooltip>
+                  }
+                >
+                  {(triggerRef) => (
+                    <IconButton
+                      ref={triggerRef}
+                      data-testid="chat-button"
+                      onClick={handleChatButtonClick}
+                      aria-pressed={isChatOpen && selected}
+                      aria-label="Open Chat"
+                      variant="Background"
+                      fill="None"
+                      size="300"
+                      radii="300"
+                    >
+                      <Icon size="50" src={Icons.Message} />
+                    </IconButton>
+                  )}
+                </TooltipProvider>
+              )}
+              <IconButton
+                onClick={handleOpenMenu}
+                aria-pressed={!!menuAnchor}
+                aria-controls={`menu-${room.roomId}`}
+                aria-label="More Options"
+                variant="Background"
+                fill="None"
+                size="300"
+                radii="300"
+              >
+                <Icon size="50" src={Icons.VerticalDots} />
+              </IconButton>
+            </PopOut>
+          </NavItemOptions>
+        )}
       </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>
       )}
diff --git a/src/app/features/room-nav/RoomNavUser.tsx b/src/app/features/room-nav/RoomNavUser.tsx
index 68e3eef2..96795647 100644
--- a/src/app/features/room-nav/RoomNavUser.tsx
+++ b/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>
diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index fa550a6c..ffa15e94 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/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);