From 02ac70affc4da9c65181c2c9fe43deeddf906143 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 10 Jun 2025 20:01:15 -0500
Subject: [PATCH] Re-arrange more options and add checks for each option to see
 if it is a call room (probably should manage a state to see if a header is
 already on screen and provide a slightly modified visual based on that for
 call rooms)

---
 src/app/features/room/RoomViewHeader.tsx | 172 ++++++++++++-----------
 1 file changed, 88 insertions(+), 84 deletions(-)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 5563a5c8..086d20d5 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -344,61 +344,45 @@ export function RoomViewHeader() {
             )}
           </Box>
         </Box>
-        {(room.isCallRoom() && !isDirectMessage() && (
-          <Box>
+
+        <Box shrink="No">
+          {false && isDirectMessage() && (
+            <TooltipProvider
+              position="Bottom"
+              align="End"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Start a call</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton onClick={handleCall} ref={triggerRef}>
+                  <Icon size="400" src={Icons.Phone} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          )}
+
+          {!ecryptedRoom && !room.isCallRoom() && (
             <TooltipProvider
               position="Bottom"
               offset={4}
               tooltip={
                 <Tooltip>
-                  <Text>Chat</Text>
+                  <Text>Search</Text>
                 </Tooltip>
               }
             >
               {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={toggleChat}>
-                  <Icon size="400" src={Icons.Message} />
+                <IconButton ref={triggerRef} onClick={handleSearchClick}>
+                  <Icon size="400" src={Icons.Search} />
                 </IconButton>
               )}
             </TooltipProvider>
-          </Box>
-        )) || (
-          <Box shrink="No">
-            {false && isDirectMessage() && (
-              <TooltipProvider
-                position="Bottom"
-                align="End"
-                offset={4}
-                tooltip={
-                  <Tooltip>
-                    <Text>Start a call</Text>
-                  </Tooltip>
-                }
-              >
-                {(triggerRef) => (
-                  <IconButton onClick={handleCall} ref={triggerRef}>
-                    <Icon size="400" src={Icons.Phone} />
-                  </IconButton>
-                )}
-              </TooltipProvider>
-            )}
-            {!ecryptedRoom && (
-              <TooltipProvider
-                position="Bottom"
-                offset={4}
-                tooltip={
-                  <Tooltip>
-                    <Text>Search</Text>
-                  </Tooltip>
-                }
-              >
-                {(triggerRef) => (
-                  <IconButton ref={triggerRef} onClick={handleSearchClick}>
-                    <Icon size="400" src={Icons.Search} />
-                  </IconButton>
-                )}
-              </TooltipProvider>
-            )}
+          )}
+          {!room.isCallRoom() && (
             <TooltipProvider
               position="Bottom"
               offset={4}
@@ -436,6 +420,8 @@ export function RoomViewHeader() {
                 </IconButton>
               )}
             </TooltipProvider>
+          )}
+          {!room.isCallRoom() && (
             <PopOut
               anchor={pinMenuAnchor}
               position="Bottom"
@@ -455,62 +441,80 @@ export function RoomViewHeader() {
                 </FocusTrap>
               }
             />
+          )}
 
-            {screenSize === ScreenSize.Desktop && (
-              <TooltipProvider
-                position="Bottom"
-                offset={4}
-                tooltip={
-                  <Tooltip>
-                    <Text>Members</Text>
-                  </Tooltip>
-                }
-              >
-                {(triggerRef) => (
-                  <IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
-                    <Icon size="400" src={Icons.User} />
-                  </IconButton>
-                )}
-              </TooltipProvider>
-            )}
+          {!room.isCallRoom() && screenSize === ScreenSize.Desktop && (
             <TooltipProvider
               position="Bottom"
-              align="End"
               offset={4}
               tooltip={
                 <Tooltip>
-                  <Text>More Options</Text>
+                  <Text>Members</Text>
                 </Tooltip>
               }
             >
               {(triggerRef) => (
-                <IconButton onClick={handleOpenMenu} ref={triggerRef} aria-pressed={!!menuAnchor}>
-                  <Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
+                <IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
+                  <Icon size="400" src={Icons.User} />
                 </IconButton>
               )}
             </TooltipProvider>
-            <PopOut
-              anchor={menuAnchor}
+          )}
+
+          <TooltipProvider
+            position="Bottom"
+            align="End"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>More Options</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton onClick={handleOpenMenu} ref={triggerRef} aria-pressed={!!menuAnchor}>
+                <Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
+              </IconButton>
+            )}
+          </TooltipProvider>
+          <PopOut
+            anchor={menuAnchor}
+            position="Bottom"
+            align="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,
+                }}
+              >
+                <RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
+              </FocusTrap>
+            }
+          />
+          {room.isCallRoom() && !isDirectMessage() && (
+            <TooltipProvider
               position="Bottom"
-              align="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,
-                  }}
-                >
-                  <RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
-                </FocusTrap>
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Chat</Text>
+                </Tooltip>
               }
-            />
-          </Box>
-        )}
+            >
+              {(triggerRef) => (
+                <IconButton ref={triggerRef} onClick={toggleChat}>
+                  <Icon size="400" src={Icons.Message} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          )}
+        </Box>
       </Box>
     </PageHeader>
   );