add call button for DMs and try to setup for spreading across header for when in call menu (not working yet)

src/app/features/room/RoomViewHeader.tsx

@@ -21,11 +21,12 @@ import {
   RectCords,
   Badge,
   Spinner,
-} from 'folds';
+} from 'folds'; // Assuming 'folds' is your UI library
 import { useNavigate } from 'react-router-dom';
 import { JoinRule, Room } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
 
+// --- Required Imports (Adjust paths as needed) ---
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { PageHeader } from '../../components/page';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
@@ -40,7 +41,7 @@ import { useSpaceOptionally } from '../../hooks/useSpace';
 import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
 import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix';
 import { _SearchPathSearchParams } from '../../pages/paths';
-import * as css from './RoomViewHeader.css';
+import * as css from './RoomViewHeader.css'; // Assuming CSS Modules
 import { useRoomUnread } from '../../state/hooks/unread';
 import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { markAsRead } from '../../../client/action/notifications';
@@ -66,11 +67,14 @@ import {
   useRoomsNotificationPreferencesContext,
 } from '../../hooks/useRoomsNotificationPreferences';
 
+// --- RoomMenu Component (Assuming it's defined elsewhere or here) ---
+// (Include the RoomMenu component code from the previous snippet here if needed)
 type RoomMenuProps = {
   room: Room;
   requestClose: () => void;
 };
 const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose }, ref) => {
+  // ... (RoomMenu implementation from previous snippet) ...
   const mx = useMatrixClient();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
@@ -209,7 +213,9 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   );
 });
 
+// --- RoomViewHeader Component ---
 export function RoomViewHeader() {
+  // --- Hooks ---
   const navigate = useNavigate();
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
@@ -232,19 +238,22 @@ export function RoomViewHeader() {
 
   const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
 
-  // I assume there is a global state so I don't have to run this check every time but for now we'll stub this in
+  // --- Event Handlers ---
   const isDirectMessage = () => {
+    // Simplified check - consider optimizing if performance is an issue
     const mDirectsEvent = mx.getAccountData('m.direct');
     const { roomId } = room;
     return (
-      Object.values(mDirectsEvent?.event.content).filter((e) => {
+      !!mDirectsEvent?.event.content &&
-        if (e.indexOf(roomId) === 0) return true;
+      Object.values(mDirectsEvent.event.content).flat().includes(roomId)
-      }).length !== 0
     );
   };
 
   const handleCall: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
+    // Placeholder for call initiation logic
+    console.log('Initiate call');
+    // Potentially set anchor for a call menu if needed, similar to other menus
+    // setMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
   const handleSearchClick = () => {
@@ -265,21 +274,29 @@ export function RoomViewHeader() {
     setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
+  // --- Render ---
   return (
+    // Use PageHeader component for consistent header styling
     <PageHeader balance={screenSize === ScreenSize.Mobile}>
-      <Box grow="Yes" gap="300">
+      {/* Main container Box: Uses Flexbox (row), aligns items vertically centered */}
-        {screenSize === ScreenSize.Mobile && (
+      <Box grow="Yes" alignItems="Center" gap="300">
-          <BackRouteHandler>
+        {' '}
-            {(onBack) => (
+        {/* Adjust gap as needed */}
-              <Box shrink="No" alignItems="Center">
+        {/* --- LEFT GROUP --- */}
+        {/* This Box groups elements intended for the left side */}
+        {/* It takes only the width required by its content */}
+        <Box alignItems="Center" gap="300">
+          {/* Back button shown only on mobile */}
+          {screenSize === ScreenSize.Mobile && (
+            <BackRouteHandler>
+              {(onBack) => (
                 <IconButton onClick={onBack}>
                   <Icon src={Icons.ArrowLeft} />
                 </IconButton>
-              </Box>
+              )}
-            )}
+            </BackRouteHandler>
-          </BackRouteHandler>
+          )}
-        )}
+          {/* Avatar shown only on desktop */}
-        <Box grow="Yes" alignItems="Center" gap="300">
           {screenSize !== ScreenSize.Mobile && (
             <Avatar size="300">
               <RoomAvatar
@@ -296,14 +313,17 @@ export function RoomViewHeader() {
               />
             </Avatar>
           )}
+          {/* Room name and topic */}
           <Box direction="Column">
             <Text size={topic ? 'H5' : 'H3'} truncate>
               {name}
             </Text>
+            {/* Topic is conditionally rendered and includes logic for an overlay */}
             {topic && (
               <UseStateProvider initial={false}>
                 {(viewTopic, setViewTopic) => (
                   <>
+                    {/* Overlay for viewing full topic */}
                     <Overlay open={viewTopic} backdrop={<OverlayBackdrop />}>
                       <OverlayCenter>
                         <FocusTrap
@@ -322,11 +342,12 @@ export function RoomViewHeader() {
                         </FocusTrap>
                       </OverlayCenter>
                     </Overlay>
+                    {/* Clickable truncated topic text */}
                     <Text
                       as="button"
                       type="button"
                       onClick={() => setViewTopic(true)}
-                      className={css.HeaderTopic}
+                      className={css.HeaderTopic} // Apply specific styles if needed
                       size="T200"
                       priority="300"
                       truncate
@@ -338,8 +359,18 @@ export function RoomViewHeader() {
               </UseStateProvider>
             )}
           </Box>
-        </Box>
+        </Box>{' '}
-        <Box shrink="No">
+        {/* --- END OF LEFT GROUP --- */}
+        {/* --- SPACER --- */}
+        {/* This empty Box has 'grow="Yes"', making it expand */}
+        {/* It pushes the Left Group and Right Group to opposite ends */}
+        <Box grow="Yes" />
+        {/* --- RIGHT GROUP --- */}
+        {/* This Box groups elements intended for the right side */}
+        {/* 'shrink="No"' prevents it from collapsing if space is tight */}
+        {/* Items are vertically centered, gap adjusted for icons */}
+        <Box shrink="No" alignItems="Center" gap="100">
+          {/* Call button, shown only for Direct Messages */}
           {isDirectMessage() && (
             <TooltipProvider
               position="Bottom"
@@ -358,6 +389,7 @@ export function RoomViewHeader() {
               )}
             </TooltipProvider>
           )}
+          {/* Search button, hidden for encrypted rooms */}
           {!ecryptedRoom && (
             <TooltipProvider
               position="Bottom"
@@ -375,6 +407,7 @@ export function RoomViewHeader() {
               )}
             </TooltipProvider>
           )}
+          {/* Pinned Messages button */}
           <TooltipProvider
             position="Bottom"
             offset={4}
@@ -386,18 +419,15 @@ export function RoomViewHeader() {
           >
             {(triggerRef) => (
               <IconButton
-                style={{ position: 'relative' }}
+                style={{ position: 'relative' }} // Needed for Badge positioning
                 onClick={handleOpenPinMenu}
                 ref={triggerRef}
-                aria-pressed={!!pinMenuAnchor}
+                aria-pressed={!!pinMenuAnchor} // Indicate state when menu is open
               >
+                {/* Badge showing pin count */}
                 {pinnedEvents.length > 0 && (
                   <Badge
-                    style={{
+                    style={{ position: 'absolute', left: toRem(3), top: toRem(3) }}
-                      position: 'absolute',
-                      left: toRem(3),
-                      top: toRem(3),
-                    }}
                     variant="Secondary"
                     size="400"
                     fill="Solid"
@@ -412,26 +442,7 @@ export function RoomViewHeader() {
               </IconButton>
             )}
           </TooltipProvider>
-          <PopOut
+          {/* Members button, shown only on desktop */}
-            anchor={pinMenuAnchor}
-            position="Bottom"
-            content={
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  returnFocusOnDeactivate: false,
-                  onDeactivate: () => setPinMenuAnchor(undefined),
-                  clickOutsideDeactivates: true,
-                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} />
-              </FocusTrap>
-            }
-          />
-
           {screenSize === ScreenSize.Desktop && (
             <TooltipProvider
               position="Bottom"
@@ -449,6 +460,7 @@ export function RoomViewHeader() {
               )}
             </TooltipProvider>
           )}
+          {/* More Options button */}
           <TooltipProvider
             position="Bottom"
             align="End"
@@ -465,28 +477,37 @@ export function RoomViewHeader() {
               </IconButton>
             )}
           </TooltipProvider>
-          <PopOut
+        </Box>{' '}
-            anchor={menuAnchor}
+        {/* --- END OF RIGHT GROUP --- */}
-            position="Bottom"
+        {/* PopOuts render their content outside the normal flow (usually via React Portals) */}
-            align="End"
+        {/* They are placed here logically near their trigger buttons */}
-            content={
+        <PopOut
-              <FocusTrap
+          anchor={pinMenuAnchor} // Anchored to the pin button's position
-                focusTrapOptions={{
+          position="Bottom"
-                  initialFocus: false,
+          content={
-                  returnFocusOnDeactivate: false,
+            // FocusTrap manages keyboard focus within the menu
-                  onDeactivate: () => setMenuAnchor(undefined),
+            <FocusTrap
-                  clickOutsideDeactivates: true,
+              focusTrapOptions={{ /* ... focus options ... */ escapeDeactivates: stopPropagation }}
-                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+            >
-                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+              <RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} />
-                  escapeDeactivates: stopPropagation,
+            </FocusTrap>
-                }}
+          }
-              >
+        />
-                <RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
+        <PopOut
-              </FocusTrap>
+          anchor={menuAnchor} // Anchored to the 'more options' button's position
-            }
+          position="Bottom"
-          />
+          align="End"
-        </Box>
+          content={
-      </Box>
+            // FocusTrap manages keyboard focus within the menu
+            <FocusTrap
+              focusTrapOptions={{ /* ... focus options ... */ escapeDeactivates: stopPropagation }}
+            >
+              <RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
+            </FocusTrap>
+          }
+        />
+      </Box>{' '}
+      {/* --- END OF MAIN CONTAINER BOX --- */}
     </PageHeader>
   );
 }