Use new menu component on roomnav

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

@@ -56,7 +56,7 @@ import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationS
 import { useCallState } from '../../pages/client/call/CallProvider';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
-import { BottomSheetMenu } from '../room/MessageOptionsMenu';
+import { MobileContextMenu } from '../../molecules/mobile-context-menu/MobileContextMenu';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -99,7 +99,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
     };
 
     return (
-      <Menu ref={ref} style={!isMobile ? { maxWidth: toRem(160), width: '100vw' } : {}}>
+      <Menu ref={ref}>
         <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
           <MenuItem
             onClick={handleMarkAsRead}
@@ -236,18 +236,6 @@ export function RoomNavItem({
   const isMobile = screenSize === ScreenSize.Mobile;
   const [isMobileSheetOpen, setMobileSheetOpen] = useState(false);
 
-  const longPressBinder = useLongPress(
-    () => {
-      if (isMobile) {
-        setMobileSheetOpen(true);
-      }
-    },
-    {
-      threshold: 400,
-      cancelOnMovement: true,
-    }
-  );
-
   const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
     evt.preventDefault();
 
@@ -302,10 +290,34 @@ export function RoomNavItem({
     setViewedCallRoomId(room.roomId);
   };
 
+  const handleCloseMenu = () => {
+    setMenuAnchor(undefined);
+    setMobileSheetOpen(false);
+  };
+
   const optionsVisible = !isMobile && (hover || !!menuAnchor);
 
+  const longPressBinder = useLongPress(
+    () => {
+      if (isMobile) {
+        setMobileSheetOpen(true);
+      }
+    },
+    {
+      threshold: 400,
+      cancelOnMovement: true,
+    }
+  );
+
+  const menuContent = (
+    <RoomNavItemMenu
+      room={room}
+      requestClose={handleCloseMenu}
+      notificationMode={notificationMode}
+    />
+  );
+
   return (
-    <>
     <NavItem
       variant="Background"
       radii="400"
@@ -315,7 +327,7 @@ export function RoomNavItem({
       onContextMenu={handleContextMenu}
       {...hoverProps}
       {...focusWithinProps}
-        {...longPressBinder()}
+      {...(isMobile ? longPressBinder() : {})}
     >
       <NavItemContent onClick={handleNavItemClick}>
         <Box as="span" grow="Yes" alignItems="Center" gap="200">
@@ -380,16 +392,12 @@ export function RoomNavItem({
                   returnFocusOnDeactivate: false,
                   onDeactivate: () => setMenuAnchor(undefined),
                   clickOutsideDeactivates: true,
-                    isKeyForward: (evt) => evt.key === 'ArrowDown',
-                    isKeyBackward: (evt) => evt.key === 'ArrowUp',
+                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                  <RoomNavItemMenu
-                    room={room}
-                    requestClose={() => setMenuAnchor(undefined)}
-                    notificationMode={notificationMode}
-                  />
+                {menuContent}
               </FocusTrap>
             }
           >
@@ -434,16 +442,11 @@ export function RoomNavItem({
           </PopOut>
         </NavItemOptions>
       )}
-      </NavItem>
       {isMobile && (
-        <BottomSheetMenu isOpen={isMobileSheetOpen} onClose={() => setMobileSheetOpen(false)}>
-          <RoomNavItemMenu
-            room={room}
-            requestClose={() => setMobileSheetOpen(false)}
-            notificationMode={notificationMode}
-          />
-        </BottomSheetMenu>
+        <MobileContextMenu onClose={handleCloseMenu} isOpen={isMobileSheetOpen}>
+          {menuContent}
+        </MobileContextMenu>
       )}
-    </>
+    </NavItem>
   );
 }