mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-05 15:00:30 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Use new menu component on roomnav

Browse source
This commit is contained in:
Gigiaj 2025-06-17 20:16:55 -05:00
parent b8ec0d4ba0
commit a1805a9ca9
1 changed files with 153 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/app/features/room-nav/RoomNavItem.tsx
View file

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