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

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

303
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,148 +290,163 @@ 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" highlight={unread !== undefined}
highlight={unread !== undefined} aria-selected={selected}
aria-selected={selected} data-hover={!!menuAnchor}
data-hover={!!menuAnchor} onContextMenu={handleContextMenu}
onContextMenu={handleContextMenu} {...hoverProps}
{...hoverProps} {...focusWithinProps}
{...focusWithinProps} {...(isMobile ? longPressBinder() : {})}
{...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"> <Avatar size="200" radii="400">
<Avatar size="200" radii="400"> {showAvatar ? (
{showAvatar ? ( <RoomAvatar
<RoomAvatar roomId={room.roomId}
roomId={room.roomId} src={
src={ direct
direct ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication) : getRoomAvatarUrl(mx, room, 96, useAuthentication)
: getRoomAvatarUrl(mx, room, 96, useAuthentication) }
} alt={room.name}
alt={room.name} renderFallback={() => (
renderFallback={() => ( <Text as="span" size="H6">
<Text as="span" size="H6"> {nameInitials(room.name)}
{nameInitials(room.name)} </Text>
</Text> )}
)} />
/> ) : (
) : ( <RoomIcon
<RoomIcon style={{ opacity: unread ? config.opacity.P500 : config.opacity.P300 }}
style={{ opacity: unread ? config.opacity.P500 : config.opacity.P300 }} filled={selected}
filled={selected} size="100"
size="100" joinRule={room.getJoinRule()}
joinRule={room.getJoinRule()} call={room.isCallRoom()}
call={room.isCallRoom()} />
/>
)}
</Avatar>
<Box as="span" grow="Yes">
<Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
{room.name}
</Text>
</Box>
{!optionsVisible && !unread && !selected && typingMember.length > 0 && (
<Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
<TypingIndicator size="300" disableAnimation />
</Badge>
)}
{!optionsVisible && unread && (
<UnreadBadgeCenter>
<UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
</UnreadBadgeCenter>
)}
{!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
<Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
)} )}
</Avatar>
<Box as="span" grow="Yes">
<Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
{room.name}
</Text>
</Box> </Box>
</NavItemContent> {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
{optionsVisible && ( <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
<NavItemOptions> <TypingIndicator size="300" disableAnimation />
<PopOut </Badge>
anchor={menuAnchor} )}
offset={menuAnchor?.width === 0 ? 0 : undefined} {!optionsVisible && unread && (
alignOffset={menuAnchor?.width === 0 ? 0 : -5} <UnreadBadgeCenter>
position="Bottom" <UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
align={menuAnchor?.width === 0 ? 'Start' : 'End'} </UnreadBadgeCenter>
content={ )}
<FocusTrap {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
focusTrapOptions={{ <Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
initialFocus: false, )}
returnFocusOnDeactivate: false, </Box>
onDeactivate: () => setMenuAnchor(undefined), </NavItemContent>
clickOutsideDeactivates: true, {optionsVisible && (
isKeyForward: (evt) => evt.key === 'ArrowDown', <NavItemOptions>
isKeyBackward: (evt) => evt.key === 'ArrowUp', <PopOut
escapeDeactivates: stopPropagation, anchor={menuAnchor}
}} offset={menuAnchor?.width === 0 ? 0 : undefined}
> alignOffset={menuAnchor?.width === 0 ? 0 : -5}
<RoomNavItemMenu position="Bottom"
room={room} align={menuAnchor?.width === 0 ? 'Start' : 'End'}
requestClose={() => setMenuAnchor(undefined)} content={
notificationMode={notificationMode} <FocusTrap
/> focusTrapOptions={{
</FocusTrap> initialFocus: false,
} returnFocusOnDeactivate: false,
> onDeactivate: () => setMenuAnchor(undefined),
{room.isCallRoom() && ( clickOutsideDeactivates: true,
<TooltipProvider isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
position="Bottom" isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
offset={4} escapeDeactivates: stopPropagation,
tooltip={ }}
<Tooltip>
<Text>Open chat</Text>
</Tooltip>
}
>
{(triggerRef) => (
<IconButton
ref={triggerRef}
data-testid="chat-button"
onClick={handleChatButtonClick}
aria-pressed={isChatOpen}
variant="Background"
fill="None"
size="300"
radii="300"
>
<NavLink to={linkPath}>
<Icon size="50" src={Icons.Message} />
</NavLink>
</IconButton>
)}
</TooltipProvider>
)}
<IconButton
onClick={handleOpenMenu}
aria-pressed={!!menuAnchor}
variant="Background"
fill="None"
size="300"
radii="300"
> >
<Icon size="50" src={Icons.VerticalDots} /> {menuContent}
</IconButton> </FocusTrap>
</PopOut> }
</NavItemOptions> >
)} {room.isCallRoom() && (
</NavItem> <TooltipProvider
{isMobile && ( position="Bottom"
<BottomSheetMenu isOpen={isMobileSheetOpen} onClose={() => setMobileSheetOpen(false)}> offset={4}
<RoomNavItemMenu tooltip={
room={room} <Tooltip>
requestClose={() => setMobileSheetOpen(false)} <Text>Open chat</Text>
notificationMode={notificationMode} </Tooltip>
/> }
</BottomSheetMenu> >
{(triggerRef) => (
<IconButton
ref={triggerRef}
data-testid="chat-button"
onClick={handleChatButtonClick}
aria-pressed={isChatOpen}
variant="Background"
fill="None"
size="300"
radii="300"
>
<NavLink to={linkPath}>
<Icon size="50" src={Icons.Message} />
</NavLink>
</IconButton>
)}
</TooltipProvider>
)}
<IconButton
onClick={handleOpenMenu}
aria-pressed={!!menuAnchor}
variant="Background"
fill="None"
size="300"
radii="300"
>
<Icon size="50" src={Icons.VerticalDots} />
</IconButton>
</PopOut>
</NavItemOptions>
)} )}
</> {isMobile && (
<MobileContextMenu onClose={handleCloseMenu} isOpen={isMobileSheetOpen}>
{menuContent}
</MobileContextMenu>
)}
</NavItem>
); );
} }