cinny/src/app/features/room/RoomViewHeader.tsx

import React, { MouseEventHandler, forwardRef, useState } from 'react';
import FocusTrap from 'focus-trap-react';
import { Box, Avatar, Text, Overlay, OverlayCenter, OverlayBackdrop, IconButton, Tooltip, TooltipProvider, Menu, MenuItem, toRem, config, Line, PopOut, RectCords, Badge, Spinner, color } from 'folds';
import { Icon, Icons } from '../../components/icons';
import { useNavigate } from 'react-router-dom';
import { JoinRule, Room } from 'matrix-js-sdk';
import { useAtom, useAtomValue } from 'jotai';
import { activeThreadIdAtomFamily } from '../../state/activeThread';

import { useStateEvent } from '../../hooks/useStateEvent';
import { PageHeader } from '../../components/page';
import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
import { UseStateProvider } from '../../components/UseStateProvider';
import { RoomTopicViewer } from '../../components/room-topic-viewer';
import { StateEvent } from '../../../types/matrix/room';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useRoom } from '../../hooks/useRoom';
import { useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';
import { useSpaceOptionally } from '../../hooks/useSpace';
import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
import { getCanonicalAliasOrRoomId, guessDmRoomUserId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix';
import colorMXID from '../../../util/colorMXID';
import { useOtherUserColor } from '../../hooks/useUserColor';
import { _SearchPathSearchParams } from '../../pages/paths';
import * as css from './RoomViewHeader.css';
import { useRoomUnread } from '../../state/hooks/unread';
import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
import { roomToUnreadAtom } from '../../state/room/roomToUnread';
import { useMarkAsRead } from '../../hooks/useMarkAsRead';
import { copyToClipboard } from '../../utils/dom';
import { SpeechBubble } from '../../components/speech-bubble/SpeechBubble';
import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
import { mDirectAtom } from '../../state/mDirectList';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
import { stopPropagation } from '../../utils/keyboard';
import { getMatrixToRoom } from '../../plugins/matrix-to';
import { getViaServers } from '../../plugins/via-servers';
import { PluginButtonSlot } from '../settings/plugins/PluginButtonSlot';
import { useBackRoute } from '../../hooks/useBackRoute';
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
import { useRoomPinnedEvents } from '../../hooks/useRoomPinnedEvents';
import { RoomPinMenu } from './room-pin-menu';
import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
import {
  getRoomNotificationMode,
  getRoomNotificationModeIcon,
  useRoomsNotificationPreferencesContext,
} from '../../hooks/useRoomsNotificationPreferences';
import { JumpToTime } from './jump-to-time';
import { useRoomNavigate } from '../../hooks/useRoomNavigate';
import { useRoomCreators } from '../../hooks/useRoomCreators';
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
import { InviteUserPrompt } from '../../components/invite-user-prompt';
import { useRoomCall, useRoomCallMembers } from '../call';
import { CallState, CallType } from '../call/types';
import { UserAvatar } from '../../components/user-avatar';
import { getMemberDisplayName, getMemberAvatarMxc } from '../../utils/room';

type RoomMenuProps = {
  room: Room;
  requestClose: () => void;
};
const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose }, ref) => {
  const mx = useMatrixClient();
  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
  const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
  const powerLevels = usePowerLevelsContext();
  const creators = useRoomCreators(room);

  const permissions = useRoomPermissions(creators, powerLevels);
  const canInvite = permissions.action('invite', mx.getSafeUserId());
  const notificationPreferences = useRoomsNotificationPreferencesContext();
  const notificationMode = getRoomNotificationMode(notificationPreferences, room.roomId);
  const { navigateRoom } = useRoomNavigate();
  const markAsRead = useMarkAsRead(mx);

  const [invitePrompt, setInvitePrompt] = useState(false);

  const handleMarkAsRead = () => {
    markAsRead(room.roomId, hideActivity);
    requestClose();
  };

  const handleInvite = () => {
    setInvitePrompt(true);
  };

  const handleCopyLink = () => {
    const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
    const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
    copyToClipboard(getMatrixToRoom(roomIdOrAlias, viaServers));
    requestClose();
  };

  const openSettings = useOpenRoomSettings();
  const parentSpace = useSpaceOptionally();
  const handleOpenSettings = () => {
    openSettings(room.roomId, parentSpace?.roomId);
    requestClose();
  };

  return (
    <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
      {invitePrompt && (
        <InviteUserPrompt
          room={room}
          requestClose={() => {
            setInvitePrompt(false);
            requestClose();
          }}
        />
      )}
      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
        <MenuItem
          onClick={handleMarkAsRead}
          size="300"
          after={<Icon size="100" src={Icons.CheckTwice} />}
          radii="300"
          disabled={!unread}
        >
          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
            Mark as Read
          </Text>
        </MenuItem>
        <RoomNotificationModeSwitcher roomId={room.roomId} value={notificationMode}>
          {(handleOpen, opened, changing) => (
            <MenuItem
              size="300"
              after={
                changing ? (
                  <Spinner size="100" variant="Secondary" />
                ) : (
                  <Icon size="100" src={getRoomNotificationModeIcon(notificationMode)} />
                )
              }
              radii="300"
              aria-pressed={opened}
              onClick={handleOpen}
            >
              <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
                Notifications
              </Text>
            </MenuItem>
          )}
        </RoomNotificationModeSwitcher>
      </Box>
      <Line variant="Surface" size="300" />
      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
        <MenuItem
          onClick={handleInvite}
          variant="Primary"
          fill="None"
          size="300"
          after={<Icon size="100" src={Icons.UserPlus} />}
          radii="300"
          aria-pressed={invitePrompt}
          disabled={!canInvite}
        >
          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
            Invite
          </Text>
        </MenuItem>
        <MenuItem
          onClick={handleCopyLink}
          size="300"
          after={<Icon size="100" src={Icons.Link} />}
          radii="300"
        >
          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
            Copy Link
          </Text>
        </MenuItem>
        <MenuItem
          onClick={handleOpenSettings}
          size="300"
          after={<Icon size="100" src={Icons.Setting} />}
          radii="300"
        >
          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
            Room Settings
          </Text>
        </MenuItem>
        <UseStateProvider initial={false}>
          {(promptJump, setPromptJump) => (
            <>
              <MenuItem
                onClick={() => setPromptJump(true)}
                size="300"
                after={<Icon size="100" src={Icons.RecentClock} />}
                radii="300"
                aria-pressed={promptJump}
              >
                <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
                  Jump to Time
                </Text>
              </MenuItem>
              {promptJump && (
                <JumpToTime
                  onSubmit={(eventId) => {
                    setPromptJump(false);
                    navigateRoom(room.roomId, eventId);
                    requestClose();
                  }}
                  onCancel={() => setPromptJump(false)}
                />
              )}
            </>
          )}
        </UseStateProvider>
      </Box>
      <Line variant="Surface" size="300" />
      <Box direction="Row" gap="100" style={{ padding: config.space.S100 }}>
        <PluginButtonSlot location="room-menu" />
      </Box>
      <Line variant="Surface" size="300" />
      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
        <UseStateProvider initial={false}>
          {(promptLeave, setPromptLeave) => (
            <>
              <MenuItem
                onClick={() => setPromptLeave(true)}
                variant="Critical"
                fill="None"
                size="300"
                after={<Icon size="100" src={Icons.ArrowGoLeft} />}
                radii="300"
                aria-pressed={promptLeave}
              >
                <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
                  Leave Room
                </Text>
              </MenuItem>
              {promptLeave && (
                <LeaveRoomPrompt
                  roomId={room.roomId}
                  onDone={requestClose}
                  onCancel={() => setPromptLeave(false)}
                />
              )}
            </>
          )}
        </UseStateProvider>
      </Box>
    </Menu>
  );
});

type CallIndicatorProps = {
  roomId: string;
};

/**
 * Shows all users currently in a call in this room (including self)
 */
function CallIndicator({ roomId }: CallIndicatorProps) {
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
  const { callMembers, isCallActive } = useRoomCallMembers(roomId);
  const room = mx.getRoom(roomId);

  if (!isCallActive || callMembers.length === 0) {
    return null;
  }

  const getAvatarUrl = (userId: string): string | undefined => {
    if (!room) return undefined;
    const mxcUrl = getMemberAvatarMxc(room, userId);
    if (!mxcUrl) return undefined;
    return mxcUrlToHttp(mx, mxcUrl, useAuthentication, 24, 24, 'crop') ?? undefined;
  };

  const getDisplayName = (userId: string): string => {
    if (!room) return userId.split(':')[0].slice(1);
    return getMemberDisplayName(room, userId) ?? userId.split(':')[0].slice(1);
  };

  return (
    <Box
      alignItems="Center"
      gap="100"
      style={{
        padding: `${toRem(4)} ${toRem(8)}`,
        borderRadius: toRem(12),
        backgroundColor: 'var(--mx-positive-container)',
        cursor: 'default',
      }}
    >
      <Box alignItems="Center" gap="100">
        {callMembers.slice(0, 5).map((member) => {
          const displayName = getDisplayName(member.userId);
          const avatarUrl = getAvatarUrl(member.userId);
          return (
            <TooltipProvider
              key={member.userId}
              position="Bottom"
              offset={8}
              tooltip={
                <SpeechBubble tail="top" tailX="50%">
                  <Box direction="Column" gap="50">
                    <Text
                      size="T300"
                      style={{ fontWeight: 600, color: color.SurfaceVariant.OnContainer }}
                    >
                      {displayName}
                    </Text>
                    <Text size="T200" style={{ opacity: 0.7, color: color.SurfaceVariant.OnContainer }}>
                      {member.userId}
                    </Text>
                  </Box>
                </SpeechBubble>
              }
            >
              {(triggerRef) => (
                <Avatar ref={triggerRef} size="200">
                  <UserAvatar
                    userId={member.userId}
                    src={avatarUrl}
                    alt={displayName}
                    renderFallback={() => (
                      <Text size="T200">
                        {displayName.charAt(0).toUpperCase()}
                      </Text>
                    )}
                  />
                </Avatar>
              )}
            </TooltipProvider>
          );
        })}
        {callMembers.length > 5 && (
          <Text size="T200" style={{ color: 'var(--mx-positive)' }}>
            +{callMembers.length - 5}
          </Text>
        )}
      </Box>
    </Box>
  );
}

type RoomCallButtonsProps = {
  roomId: string;
};

/**
 * Component for voice/video call buttons in the room header
 */
function RoomCallButtons({ roomId }: RoomCallButtonsProps) {
  const {
    isInCall,
    callState,
    activeCall,
    isUsingRemoteHomeserver,
    startVoiceCall,
    startVideoCall,
    endCall,
    callSupported,
    callSupportLoading,
  } = useRoomCall(roomId);

  // Debug logging
  React.useEffect(() => {
    // eslint-disable-next-line no-console
    console.log('RoomCallButtons render:', { callSupportLoading, callSupported, roomId });
  }, [callSupportLoading, callSupported, roomId]);

  if (callSupportLoading || !callSupported) {
    return null;
  }

  const isConnecting = callState === CallState.Connecting;
  const isConnected = callState === CallState.Connected;
  const isActive = isConnecting || isConnected;

  const handleVoiceCall = async () => {
    if (isInCall) {
      await endCall();
    } else {
      try {
        await startVoiceCall();
      } catch (error) {
        console.error('Failed to start voice call:', error);
      }
    }
  };

  const handleVideoCall = async () => {
    if (isInCall) {
      await endCall();
    } else {
      try {
        await startVideoCall();
      } catch (error) {
        console.error('Failed to start video call:', error);
      }
    }
  };

  return (
    <>
      <TooltipProvider
        position="Bottom"
        offset={4}
        tooltip={
          <Tooltip>
            <Text>
              {isInCall ? 'End Call' : 'Voice Call'}
              {isUsingRemoteHomeserver && !isInCall && ' (Remote Server)'}
            </Text>
          </Tooltip>
        }
      >
        {(triggerRef) => (
          <IconButton
            ref={triggerRef}
            onClick={handleVoiceCall}
            variant={isActive && activeCall?.callType === CallType.Voice ? 'Critical' : 'Background'}
          >
            {isConnecting ? (
              <Spinner size="100" variant="Secondary" />
            ) : (
              <Icon size="300" src={Icons.Phone} filled={isActive && activeCall?.callType === CallType.Voice} />
            )}
          </IconButton>
        )}
      </TooltipProvider>
      <TooltipProvider
        position="Bottom"
        offset={4}
        tooltip={
          <Tooltip>
            <Text>
              {isInCall ? 'End Call' : 'Video Call'}
              {isUsingRemoteHomeserver && !isInCall && ' (Remote Server)'}
            </Text>
          </Tooltip>
        }
      >
        {(triggerRef) => (
          <IconButton
            ref={triggerRef}
            onClick={handleVideoCall}
            variant={isActive && activeCall?.callType === CallType.Video ? 'Critical' : 'Background'}
          >
            {isConnecting ? (
              <Spinner size="100" variant="Secondary" />
            ) : (
              <Icon size="300" src={Icons.VideoCamera} filled={isActive && activeCall?.callType === CallType.Video} />
            )}
          </IconButton>
        )}
      </TooltipProvider>
    </>
  );
}

type RoomViewHeaderProps = {
  forumLayout?: boolean;
};

export function RoomViewHeader({ forumLayout = false }: RoomViewHeaderProps) {
  const navigate = useNavigate();
  const mx = useMatrixClient();
  const useAuthentication = useMediaAuthentication();
  const screenSize = useScreenSizeContext();
  const { showInPageHeader, goBack } = useBackRoute();
  const room = useRoom();
  const space = useSpaceOptionally();
  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
  const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
  const mDirects = useAtomValue(mDirectAtom);

  const pinnedEvents = useRoomPinnedEvents(room);
  const encryptionEvent = useStateEvent(room, StateEvent.RoomEncryption);
  const ecryptedRoom = !!encryptionEvent;
  const isDirect = mDirects.has(room.roomId);
  const avatarMxc = useRoomAvatar(room, isDirect);
  const name = useRoomName(room);
  const topic = useRoomTopic(room);
  const avatarUrl = avatarMxc
    ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
    : undefined;

  const dmUserId = isDirect ? guessDmRoomUserId(room, mx.getSafeUserId()) : undefined;
  const dmAvatarMxc =
    (dmUserId ? room.getMember(dmUserId)?.getMxcAvatarUrl() : undefined) ||
    (isDirect ? avatarMxc : undefined);
  const dmCustomColor = useOtherUserColor(dmUserId ?? '', dmAvatarMxc);
  const dmFolderTabColor = isDirect
    ? `color-mix(in srgb, ${dmCustomColor ?? colorMXID(dmUserId ?? room.roomId)} 50%, var(--folder-tab-room, #f3e6c8))`
    : undefined;

  const [peopleDrawer, setPeopleDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
  const [activeThreadId, setActiveThreadId] = useAtom(activeThreadIdAtomFamily(room.roomId));

  const handleSearchClick = () => {
    const searchParams: _SearchPathSearchParams = {
      rooms: room.roomId,
    };
    const path = space
      ? getSpaceSearchPath(getCanonicalAliasOrRoomId(mx, space.roomId))
      : getHomeSearchPath();
    navigate(withSearchParam(path, searchParams));
  };

  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
  };

  const handleOpenPinMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
    setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
  };

  return (
    <PageHeader balance={showInPageHeader}>
      <Box grow="Yes" gap="300">
        {showInPageHeader && (
          <Box shrink="No" alignItems="Center">
            <IconButton onClick={goBack} aria-label="Back">
              <Icon size="300" src={Icons.ArrowLeft} />
            </IconButton>
          </Box>
        )}
        <Box
          data-folder-tab="room"
          data-folder-tab-dm={isDirect ? '' : undefined}
          shrink="No"
          alignItems="Center"
          gap="300"
          style={{
            minWidth: 0,
            maxWidth: '100%',
            ...(dmFolderTabColor
              ? {
                  ['--folder-tab-fill' as string]: dmFolderTabColor,
                  background: dmFolderTabColor,
                  backgroundColor: dmFolderTabColor,
                }
              : undefined),
          }}
        >
          {!showInPageHeader && (
            <Avatar size="300">
              <RoomAvatar
                roomId={room.roomId}
                src={avatarUrl}
                alt={name}
                renderFallback={() => (
                  <RoomIcon
                    size="200"
                    joinRule={room.getJoinRule() ?? JoinRule.Restricted}
                    filled
                  />
                )}
              />
            </Avatar>
          )}
          <Box direction="Column" style={{ minWidth: 0 }}>
            <Box alignItems="Center" gap="100">
              <Text size={topic ? 'H5' : 'H3'} truncate>
                {name}
              </Text>
              {forumLayout && (
                <Badge variant="Secondary" fill="Soft" outlined>
                  <Text size="T200">Forum</Text>
                </Badge>
              )}
            </Box>
            {topic && (
              <UseStateProvider initial={false}>
                {(viewTopic, setViewTopic) => (
                  <>
                    <Overlay open={viewTopic} backdrop={<OverlayBackdrop />}>
                      <OverlayCenter>
                        <FocusTrap
                          focusTrapOptions={{
                            initialFocus: false,
                            clickOutsideDeactivates: true,
                            onDeactivate: () => setViewTopic(false),
                            escapeDeactivates: stopPropagation,
                          }}
                        >
                          <RoomTopicViewer
                            name={name}
                            topic={topic}
                            requestClose={() => setViewTopic(false)}
                          />
                        </FocusTrap>
                      </OverlayCenter>
                    </Overlay>
                    <Text
                      as="button"
                      type="button"
                      onClick={() => setViewTopic(true)}
                      className={css.HeaderTopic}
                      size="T200"
                      priority="300"
                      truncate
                    >
                      {topic}
                    </Text>
                  </>
                )}
              </UseStateProvider>
            )}
          </Box>
        </Box>
        <Box grow="Yes" />
        <Box shrink="No" alignItems="Center" gap="100">
          <CallIndicator roomId={room.roomId} />
          <RoomCallButtons roomId={room.roomId} />
          {!ecryptedRoom && (
            <TooltipProvider
              position="Bottom"
              offset={4}
              tooltip={
                <Tooltip>
                  <Text>Search</Text>
                </Tooltip>
              }
            >
              {(triggerRef) => (
                <IconButton ref={triggerRef} onClick={handleSearchClick}>
                  <Icon size="300" src={Icons.Search} />
                </IconButton>
              )}
            </TooltipProvider>
          )}
          <TooltipProvider
            position="Bottom"
            offset={4}
            tooltip={
              <Tooltip>
                <Text>Pinned Messages</Text>
              </Tooltip>
            }
          >
            {(triggerRef) => (
              <IconButton
                style={{ position: 'relative' }}
                onClick={handleOpenPinMenu}
                ref={triggerRef}
                aria-pressed={!!pinMenuAnchor}
              >
                {pinnedEvents.length > 0 && (
                  <Badge
                    style={{
                      position: 'absolute',
                      left: toRem(3),
                      top: toRem(3),
                    }}
                    variant="Secondary"
                    size="400"
                    fill="Solid"
                    radii="Pill"
                  >
                    <Text as="span" size="L400">
                      {pinnedEvents.length}
                    </Text>
                  </Badge>
                )}
                <Icon size="300" src={Icons.Pin} filled={!!pinMenuAnchor} />
              </IconButton>
            )}
          </TooltipProvider>
          <PopOut
            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"
              offset={4}
              tooltip={
                <Tooltip>
                  <Text>{peopleDrawer ? 'Hide Members' : 'Show Members'}</Text>
                </Tooltip>
              }
            >
              {(triggerRef) => (
                <IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
                  <Icon size="300" src={Icons.User} />
                </IconButton>
              )}
            </TooltipProvider>
          )}
          <TooltipProvider
            position="Bottom"
            offset={4}
            tooltip={
              <Tooltip>
                <Text>{activeThreadId ? 'Back to Chat' : 'Threads'}</Text>
              </Tooltip>
            }
          >
            {(triggerRef) => (
              <IconButton
                ref={triggerRef}
                onClick={() => setActiveThreadId(undefined)}
                aria-pressed={!!activeThreadId}
              >
                <Icon size="300" src={activeThreadId ? Icons.ArrowLeft : Icons.Thread} filled={!!activeThreadId} />
              </IconButton>
            )}
          </TooltipProvider>
          <PluginButtonSlot location="room-header" />
          <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="300" 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>
            }
          />
        </Box>
      </Box>
    </PageHeader>
  );
}