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

import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { Box, Button, Line, Text, config } from 'folds';
import { decodeRouteParam } from '../../pages/pathUtils';
import { useParams } from 'react-router-dom';
import { isKeyHotkey } from 'is-hotkey';
import { useAtom, useSetAtom } from 'jotai';
import { RoomView } from './RoomView';
import { MembersDrawer } from './MembersDrawer';
import { MediaDrawer } from './room-media-menu';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
import { useSetting } from '../../state/hooks/settings';
import { settingsAtom } from '../../state/settings';
import { PowerLevelsContextProvider, usePowerLevels } from '../../hooks/usePowerLevels';
import { useRoom } from '../../hooks/useRoom';
import { useKeyDown } from '../../hooks/useKeyDown';
import { useMarkAsRead } from '../../hooks/useMarkAsRead';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useRoomMembers } from '../../hooks/useRoomMembers';
import { activeRoomIdAtom } from '../../state/activeRoom';
import { isMediaDrawerAtom } from '../../state/mediaDrawer';
import { isForum, parsePaarrotUiContent } from '../../utils/room';
import { ForumRoomView } from './ForumRoomView';
import { useStateEvent } from '../../hooks/useStateEvent';
import { StateEvent } from '../../../types/matrix/room';
import { RoomAppView } from '../room-app';

export function Room() {
  const { eventId: rawEventId } = useParams();
  const eventId = decodeRouteParam(rawEventId);
  const room = useRoom();
  const mx = useMatrixClient();
  const setActiveRoomId = useSetAtom(activeRoomIdAtom);

  const [isPeopleDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
  const [isMediaDrawer] = useAtom(isMediaDrawerAtom);
  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
  const screenSize = useScreenSizeContext();
  const powerLevels = usePowerLevels(room);
  const members = useRoomMembers(mx, room.roomId);
  const markAsRead = useMarkAsRead(mx);
  const forumRoom = isForum(room);
  const skinny = screenSize !== ScreenSize.Desktop;
  const showMediaSolo = skinny && isMediaDrawer;
  const showRightDrawer =
    !skinny && (isPeopleDrawer || isMediaDrawer);

  const uiEvent = useStateEvent(room, StateEvent.PaarrotUi);
  const hasAppUi = useMemo(() => !!parsePaarrotUiContent(uiEvent?.getContent()), [uiEvent]);
  const [preferChat, setPreferChat] = useState(false);

  useEffect(() => {
    setPreferChat(false);
  }, [room.roomId]);

  const showAppView = !forumRoom && hasAppUi && !preferChat;

  // Update titlebar with current room ID
  useEffect(() => {
    setActiveRoomId(room.roomId);
    return () => setActiveRoomId(undefined);
  }, [room.roomId, setActiveRoomId]);

  useKeyDown(
    window,
    useCallback(
      (evt) => {
        if (isKeyHotkey('escape', evt)) {
          markAsRead(room.roomId, hideActivity);
        }
      },
      [markAsRead, room.roomId, hideActivity]
    )
  );

  return (
    <PowerLevelsContextProvider value={powerLevels}>
      <Box grow="Yes">
        {!showMediaSolo &&
          (showAppView ? (
            <RoomAppView room={room} onShowChat={() => setPreferChat(true)} />
          ) : forumRoom ? (
            <ForumRoomView room={room} eventId={eventId} />
          ) : (
            <Box grow="Yes" direction="Column" style={{ minWidth: 0, minHeight: 0 }}>
              {hasAppUi && preferChat && (
                <Box
                  shrink="No"
                  alignItems="Center"
                  justifyContent="SpaceBetween"
                  gap="200"
                  style={{
                    padding: `${config.space.S200} ${config.space.S300}`,
                    borderBottom: '1px solid var(--bq-surface-border, CurrentColor)',
                  }}
                >
                  <Text size="T300">Room app available</Text>
                  <Button
                    size="300"
                    variant="Primary"
                    radii="300"
                    onClick={() => setPreferChat(false)}
                  >
                    <Text size="B300">Show app</Text>
                  </Button>
                </Box>
              )}
              <Box grow="Yes" direction="Column" style={{ minWidth: 0, minHeight: 0 }}>
                <RoomView room={room} eventId={eventId} />
              </Box>
            </Box>
          ))}
        {showMediaSolo && <MediaDrawer room={room} solo />}
        {!showMediaSolo && showRightDrawer && (
          <>
            <Line variant="Background" direction="Vertical" size="300" />
            {isMediaDrawer ? (
              <MediaDrawer room={room} />
            ) : (
              <MembersDrawer key={room.roomId} room={room} members={members} />
            )}
          </>
        )}
      </Box>
    </PowerLevelsContextProvider>
  );
}