Start laying out a toggle for roomtimeline in a call

src/app/features/room/RoomViewHeader.tsx

@@ -65,6 +65,7 @@ import {
   getRoomNotificationModeIcon,
   useRoomsNotificationPreferencesContext,
 } from '../../hooks/useRoomsNotificationPreferences';
+import { useCallState } from '../../pages/client/CallProvider';
 
 type RoomMenuProps = {
   room: Room;
@@ -220,6 +221,7 @@ export function RoomViewHeader() {
   const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
   const mDirects = useAtomValue(mDirectAtom);
 
+  const { isChatOpen, toggleChat } = useCallState();
   const pinnedEvents = useRoomPinnedEvents(room);
   const encryptionEvent = useStateEvent(room, StateEvent.RoomEncryption);
   const ecryptedRoom = !!encryptionEvent;
@@ -339,6 +341,7 @@ export function RoomViewHeader() {
             )}
           </Box>
         </Box>
+        {!room.isCallRoom && (
           <Box shrink="No">
             {isDirectMessage() && (
               <TooltipProvider
@@ -486,6 +489,26 @@ export function RoomViewHeader() {
               }
             />
           </Box>
+        )}
+        {room.isCallRoom() && (
+          <Box>
+            <TooltipProvider
+              position="Bottom"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Chat</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton ref={triggerRef} onClick={toggleChat}>
+                  <Icon size="400" src={Icons.Message} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          </Box>
+        )}
       </Box>
     </PageHeader>
   );