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

import React, { useCallback, useEffect, useRef } from 'react';
import { Box, Line } from 'folds';
import { useParams } from 'react-router-dom';
import { isKeyHotkey } from 'is-hotkey';
import { useAtom, useAtomValue, useSetAtom } from 'jotai';
import { RoomView } from './RoomView';
import { MembersDrawer } from './MembersDrawer';
import { MediaGallery } from './MediaGallery';
import { mediaGalleryAtom } from '../../state/mediaGallery';
import { WidgetsPanel } from './widgets/WidgetsPanel';
import { widgetsPanelAtom } from '../../state/widgetsPanel';
import { mobileMembersPanelAtom } from '../../state/mobileMembersPanel';
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
import { useMediaQuery } from '../../hooks/useMediaQuery';
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 { markAsRead } from '../../utils/notifications';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useRoomMembers } from '../../hooks/useRoomMembers';
import { CallView } from '../call/CallView';
import { RoomViewHeader } from './RoomViewHeader';
import { callChatAtom } from '../../state/callEmbed';
import { CallChatView } from './CallChatView';
import { useCallEmbed } from '../../hooks/useCallEmbed';
import { useCallMembers, useCallSession } from '../../hooks/useCall';
import { roomIdToActiveThreadIdAtomFamily } from '../../state/room/thread';
import { threadsListAtom } from '../../state/threadsList';
import { ThreadPanel } from './thread';
import { ThreadsListPanel } from './thread/ThreadsListPanel';
import { ReadPositionsContext } from './ReadPositionsContext';
import { useRoomReadPositions } from '../../hooks/useRoomReadPositions';

export function Room() {
  const { eventId } = useParams();
  const room = useRoom();
  const mx = useMatrixClient();

  const callSession = useCallSession(room);
  const callMembers = useCallMembers(callSession);
  const callEmbed = useCallEmbed();

  const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
  const activeThreadId = useAtomValue(roomIdToActiveThreadIdAtomFamily(room.roomId));
  const setActiveThreadId = useSetAtom(roomIdToActiveThreadIdAtomFamily(room.roomId));
  const galleryOpen = useAtomValue(mediaGalleryAtom);
  const setGalleryOpen = useSetAtom(mediaGalleryAtom);
  const widgetsOpen = useAtomValue(widgetsPanelAtom);
  const [mobileMembersOpen, setMobileMembersOpen] = useAtom(mobileMembersPanelAtom);
  const setWidgetsOpen = useSetAtom(widgetsPanelAtom);
  const threadsListOpen = useAtomValue(threadsListAtom);
  const setThreadsListOpen = useSetAtom(threadsListAtom);
  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
  const screenSize = useScreenSizeContext();
  const powerLevels = usePowerLevels(room);
  const members = useRoomMembers(mx, room.roomId);
  const chat = useAtomValue(callChatAtom);
  // Hoisted here (instead of inside RoomTimeline) so ThreadPanel/ThreadTimeline —
  // rendered as siblings of RoomView, not descendants — share the same computed
  // positions instead of falling back to the context default (Gitea #38).
  const readPositions = useRoomReadPositions(room);
  useKeyDown(
    window,
    useCallback(
      (evt) => {
        if (isKeyHotkey('escape', evt)) {
          // Skip when a composer already consumed Escape (it preventDefaults).
          if (evt.defaultPrevented) return;
          // Skip while a thread panel is open: listener registration order
          // means this can run BEFORE the panel's own Escape handler, and the
          // user's intent there is "close the panel", not "mark room read".
          if (activeThreadId) return;
          markAsRead(mx, room.roomId, hideActivity);
        }
      },
      [mx, room.roomId, hideActivity, activeThreadId],
    ),
  );

  // Stable handlers for the threads-list panel so its document-level Escape
  // listener isn't torn down and re-added on every Room re-render.
  const closeThreadsList = useCallback(() => setThreadsListOpen(false), [setThreadsListOpen]);
  const openThreadFromList = useCallback(
    (threadId: string) => {
      setActiveThreadId(threadId);
      setThreadsListOpen(false);
    },
    [setActiveThreadId, setThreadsListOpen],
  );

  const callView = callEmbed?.roomId === room.roomId || room.isCallRoom() || callMembers.length > 0;

  // The content panels (thread / media gallery / widgets) are mutually exclusive
  // on every screen size: opening one closes the others. Detect the just-opened
  // transition so whichever was opened most recently wins.
  const prevThreadRef = useRef(activeThreadId);
  const prevGalleryRef = useRef(galleryOpen);
  const prevWidgetsRef = useRef(widgetsOpen);
  const prevThreadsListRef = useRef(threadsListOpen);
  useEffect(() => {
    const threadJustOpened = Boolean(activeThreadId) && !prevThreadRef.current;
    const galleryJustOpened = galleryOpen && !prevGalleryRef.current;
    const widgetsJustOpened = widgetsOpen && !prevWidgetsRef.current;
    const threadsListJustOpened = threadsListOpen && !prevThreadsListRef.current;
    if (threadJustOpened) {
      if (galleryOpen) setGalleryOpen(false);
      if (widgetsOpen) setWidgetsOpen(false);
      if (threadsListOpen) setThreadsListOpen(false);
    } else if (galleryJustOpened) {
      if (activeThreadId) setActiveThreadId(null);
      if (widgetsOpen) setWidgetsOpen(false);
      if (threadsListOpen) setThreadsListOpen(false);
    } else if (widgetsJustOpened) {
      if (activeThreadId) setActiveThreadId(null);
      if (galleryOpen) setGalleryOpen(false);
      if (threadsListOpen) setThreadsListOpen(false);
    } else if (threadsListJustOpened) {
      if (activeThreadId) setActiveThreadId(null);
      if (galleryOpen) setGalleryOpen(false);
      if (widgetsOpen) setWidgetsOpen(false);
    }
    prevThreadRef.current = activeThreadId;
    prevGalleryRef.current = galleryOpen;
    prevWidgetsRef.current = widgetsOpen;
    prevThreadsListRef.current = threadsListOpen;
  }, [
    activeThreadId,
    galleryOpen,
    widgetsOpen,
    threadsListOpen,
    setGalleryOpen,
    setActiveThreadId,
    setWidgetsOpen,
    setThreadsListOpen,
  ]);

  // On non-desktop screens at most one right-side panel may show, priority
  // thread > gallery > widgets > members. On desktop thread + members may coexist
  // while the content panels stay mutually exclusive (via the effect above).
  const isDesktop = screenSize === ScreenSize.Desktop;
  const showThreadPanel = !callView && Boolean(activeThreadId);
  const showGallery = !callView && galleryOpen && (isDesktop || !activeThreadId);
  const showWidgets = !callView && widgetsOpen && (isDesktop || (!activeThreadId && !galleryOpen));
  // The single-thread panel always replaces the list (they share the content slot).
  const showThreadsList =
    !callView &&
    threadsListOpen &&
    !activeThreadId &&
    (isDesktop || (!galleryOpen && !widgetsOpen));
  // Desktop: the persisted drawer preference. Mobile: a transient panel the
  // user opened from the header menu (never the desktop default).
  // [Gitea #218] Three right-hand columns (timeline + thread/gallery/widgets
  // panel + member drawer) don't fit under ~1500 px — both composers shrank to
  // a few characters. Like Element, the member drawer yields to the content
  // panel on narrower desktops and comes back when it closes.
  const narrowDesktop = useMediaQuery('(max-width: 1500px)');
  const contentPanelOpen = showThreadPanel || showGallery || showWidgets || showThreadsList;
  const showMembers =
    !callView &&
    (isDesktop
      ? isDrawer && !(narrowDesktop && contentPanelOpen)
      : mobileMembersOpen && !activeThreadId && !galleryOpen && !widgetsOpen && !threadsListOpen);

  // Leaving a room on a phone closes its member panel.
  useEffect(() => () => setMobileMembersOpen(false), [room.roomId, setMobileMembersOpen]);

  return (
    <PowerLevelsContextProvider value={powerLevels}>
      <ReadPositionsContext.Provider value={readPositions}>
        <Box grow="Yes">
          {callView && (screenSize === ScreenSize.Desktop || !chat) && (
            <Box grow="Yes" direction="Column">
              <RoomViewHeader callView />
              <Box grow="Yes">
                <CallView />
              </Box>
            </Box>
          )}
          {!callView && (
            <Box grow="Yes" direction="Column">
              <RoomViewHeader />
              <Box grow="Yes">
                <RoomView eventId={eventId} />
              </Box>
            </Box>
          )}

          {callView && chat && (
            <>
              {screenSize === ScreenSize.Desktop && (
                <Line variant="Background" direction="Vertical" size="300" />
              )}
              <CallChatView />
            </>
          )}
          {showGallery && (
            <>
              {screenSize === ScreenSize.Desktop && (
                <Line variant="Background" direction="Vertical" size="300" />
              )}
              <MediaGallery key={room.roomId} room={room} onClose={() => setGalleryOpen(false)} />
            </>
          )}
          {showWidgets && (
            <>
              {screenSize === ScreenSize.Desktop && (
                <Line variant="Background" direction="Vertical" size="300" />
              )}
              <WidgetsPanel
                key={room.roomId}
                room={room}
                requestClose={() => setWidgetsOpen(false)}
              />
            </>
          )}
          {showThreadsList && (
            <>
              {screenSize === ScreenSize.Desktop && (
                <Line variant="Background" direction="Vertical" size="300" />
              )}
              <ThreadsListPanel
                key={room.roomId}
                room={room}
                onClose={closeThreadsList}
                onOpenThread={openThreadFromList}
              />
            </>
          )}
          {showThreadPanel && activeThreadId && (
            <>
              {screenSize === ScreenSize.Desktop && (
                <Line variant="Background" direction="Vertical" size="300" />
              )}
              <ThreadPanel
                key={`${room.roomId}${activeThreadId}`}
                room={room}
                threadId={activeThreadId}
                requestClose={() => setActiveThreadId(null)}
              />
            </>
          )}
          {showMembers && (
            <>
              {screenSize === ScreenSize.Desktop && (
                <Line variant="Background" direction="Vertical" size="300" />
              )}
              <MembersDrawer key={room.roomId} room={room} members={members} />
            </>
          )}
        </Box>
      </ReadPositionsContext.Provider>
    </PowerLevelsContextProvider>
  );
}