fix: keep call media controls visible before joining

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

@@ -1,4 +1,15 @@
-import { Box, Chip, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider } from 'folds';
+import {
+  Box,
+  Chip,
+  Icon,
+  IconButton,
+  Icons,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  color,
+  config,
+} from 'folds';
 import React from 'react';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useCallState } from '../../pages/client/call/CallProvider';
@@ -9,17 +20,18 @@ export function CallNavStatus() {
     activeCallRoomId,
     isAudioEnabled,
     isVideoEnabled,
-    isActiveCallReady,
     toggleAudio,
     toggleVideo,
     hangUp,
   } = useCallState();
   const mx = useMatrixClient();
   const { navigateRoom } = useRoomNavigate();
-  if (!isActiveCallReady || !activeCallRoomId) return null;
+  const hasActiveCall = Boolean(activeCallRoomId);
 
   const handleGoToCallRoom = () => {
+    if (activeCallRoomId) {
       navigateRoom(activeCallRoomId);
+    }
   };
 
   return (
@@ -27,14 +39,13 @@ export function CallNavStatus() {
       direction="Column"
       style={{
         flexShrink: 0,
-        borderTop: `1px solid #e0e0e0`,
+        borderTop: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
-        justifyContent: 'center',
+        padding: `${config.space.S200} ${config.space.S200}`,
       }}
     >
-      <Box direction="Row" justifyContent="SpaceBetween" alignItems="Center">
+      <Box direction="Row" alignItems="Center" gap="100">
-        {/* Going to need better icons for this */}
+        <Box grow="Yes" style={{ minWidth: 0 }}>
-
+          {hasActiveCall && (
-        <Box>
             <TooltipProvider
               position="Top"
               offset={4}
@@ -53,21 +64,44 @@ export function CallNavStatus() {
                   onClick={handleGoToCallRoom}
                   ref={triggerRef}
                   style={{
-                  display: isActiveCallReady ? 'flex' : 'none',
+                    width: '100%',
+                    minWidth: 0,
                     alignItems: 'center',
                     justifyContent: 'center',
                   }}
                 >
-                <Icon src={Icons.VolumeHigh} />
+                  <Icon size="200" src={Icons.VolumeHigh} />
-                <Text style={{ flexGrow: 1 }} size="B400" truncate>
+                  <Text style={{ flexGrow: 1, minWidth: 0 }} size="B400" truncate>
-                  {activeCallRoomId ? mx.getRoom(activeCallRoomId)?.name : ''}
+                    {mx.getRoom(activeCallRoomId)?.name ?? ''}
                   </Text>
                 </Chip>
               )}
             </TooltipProvider>
+          )}
         </Box>
-
+        {hasActiveCall && (
-        <Box>
+          <TooltipProvider
+            position="Top"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>Hang Up</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton
+                variant="Background"
+                size="400"
+                radii="400"
+                ref={triggerRef}
+                onClick={hangUp}
+              >
+                <Icon src={Icons.Phone} />
+              </IconButton>
+            )}
+          </TooltipProvider>
+        )}
         <TooltipProvider
           position="Top"
           offset={4}
@@ -78,7 +112,13 @@ export function CallNavStatus() {
           }
         >
           {(triggerRef) => (
-              <IconButton variant="Background" ref={triggerRef} onClick={toggleAudio}>
+            <IconButton
+              variant="Background"
+              size="400"
+              radii="400"
+              ref={triggerRef}
+              onClick={toggleAudio}
+            >
               <Icon src={!isAudioEnabled ? Icons.MicMute : Icons.Mic} />
             </IconButton>
           )}
@@ -93,35 +133,17 @@ export function CallNavStatus() {
           }
         >
           {(triggerRef) => (
-              <IconButton variant="Background" ref={triggerRef} onClick={toggleVideo}>
+            <IconButton
+              variant="Background"
+              size="400"
+              radii="400"
+              ref={triggerRef}
+              onClick={toggleVideo}
+            >
               <Icon src={!isVideoEnabled ? Icons.VideoCameraMute : Icons.VideoCamera} />
             </IconButton>
           )}
         </TooltipProvider>
-
-          <TooltipProvider
-            position="Top"
-            offset={4}
-            tooltip={
-              <Tooltip>
-                <Text>Hang Up</Text>
-              </Tooltip>
-            }
-          >
-            {(triggerRef) => (
-              <IconButton
-                variant="Background"
-                ref={triggerRef}
-                onClick={hangUp}
-                style={{
-                  display: isActiveCallReady ? 'block' : 'none',
-                }}
-              >
-                <Icon src={Icons.Phone} />
-              </IconButton>
-            )}
-          </TooltipProvider>
-        </Box>
       </Box>
     </Box>
   );