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

import React, { useCallback, useRef } from 'react';
import { Box, Text, config } from 'folds';
import { EventType } from 'matrix-js-sdk';
import { ReactEditor } from 'slate-react';
import { isKeyHotkey } from 'is-hotkey';
import { useStateEvent } from '../../hooks/useStateEvent';
import { StateEvent } from '../../../types/matrix/room';
import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
import { useMatrixClient } from '../../hooks/useMatrixClient';
import { useEditor } from '../../components/editor';
import { RoomInputPlaceholder } from './RoomInputPlaceholder';
import { RoomTimeline } from './RoomTimeline';
import { RoomViewTyping } from './RoomViewTyping';
import { RoomTombstone } from './RoomTombstone';
import { RoomInput } from './RoomInput';
import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
import { Page } from '../../components/page';
import { useSetting } from '../../state/hooks/settings';
import { settingsAtom, ChatBackground } from '../../state/settings';
import { useKeyDown } from '../../hooks/useKeyDown';
import { editableActiveElement } from '../../utils/dom';
import { settingsAtom } from '../../state/settings';
import { useSetting } from '../../state/hooks/settings';
import { useRoomPermissions } from '../../hooks/useRoomPermissions';
import { useRoomCreators } from '../../hooks/useRoomCreators';
import { useRoom } from '../../hooks/useRoom';

const FN_KEYS_REGEX = /^F\d+$/;
const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
  const { code } = evt;
  if (evt.metaKey || evt.altKey || evt.ctrlKey) {
    return false;
  }

  if (FN_KEYS_REGEX.test(code)) return false;

  if (
    code.startsWith('OS') ||
    code.startsWith('Meta') ||
    code.startsWith('Shift') ||
    code.startsWith('Alt') ||
    code.startsWith('Control') ||
    code.startsWith('Arrow') ||
    code.startsWith('Page') ||
    code.startsWith('End') ||
    code.startsWith('Home') ||
    code === 'Tab' ||
    code === 'Space' ||
    code === 'Enter' ||
    code === 'NumLock' ||
    code === 'ScrollLock'
  ) {
    return false;
  }

  return true;
};


const CHAT_BG: Record<ChatBackground, React.CSSProperties> = {
  none: {},

  // Dark navy with light-blue grid lines — technical/clean
  blueprint: {
    backgroundColor: '#0a1628',
    backgroundImage: [
      'linear-gradient(rgba(100,149,237,0.14) 1px, transparent 1px)',
      'linear-gradient(90deg, rgba(100,149,237,0.14) 1px, transparent 1px)',
      'linear-gradient(rgba(100,149,237,0.05) 1px, transparent 1px)',
      'linear-gradient(90deg, rgba(100,149,237,0.05) 1px, transparent 1px)',
    ].join(','),
    backgroundSize: '80px 80px, 80px 80px, 16px 16px, 16px 16px',
  },

  // Near-black diagonal weave — carbon fiber look
  carbon: {
    backgroundColor: '#0e0e0e',
    backgroundImage: [
      'repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 2px, transparent 0, transparent 50%)',
      'repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0, rgba(255,255,255,0.03) 2px, transparent 0, transparent 50%)',
    ].join(','),
    backgroundSize: '8px 8px',
  },

  // Deep space with three offset star layers
  stars: {
    backgroundColor: '#050510',
    backgroundImage: [
      'radial-gradient(circle, rgba(255,255,255,0.85) 1px, transparent 1px)',
      'radial-gradient(circle, rgba(255,255,255,0.55) 1px, transparent 1px)',
      'radial-gradient(circle, rgba(200,200,255,0.3) 1px, transparent 1px)',
    ].join(','),
    backgroundSize: '130px 130px, 190px 190px, 260px 260px',
    backgroundPosition: '0 0, 65px 32px, 32px 97px',
  },

  // Concentric rings from three focal points — map contour effect
  topographic: {
    backgroundColor: '#0f0f17',
    backgroundImage: [
      'repeating-radial-gradient(circle at 20% 20%, transparent 0, transparent 30px, rgba(152,0,0,0.07) 31px, transparent 32px)',
      'repeating-radial-gradient(circle at 80% 80%, transparent 0, transparent 25px, rgba(100,100,200,0.06) 26px, transparent 27px)',
      'repeating-radial-gradient(circle at 50% 10%, transparent 0, transparent 45px, rgba(152,0,0,0.04) 46px, transparent 47px)',
    ].join(','),
  },

  // 60°/120° diagonal stripe pair — classic herringbone weave
  herringbone: {
    backgroundColor: '#111118',
    backgroundImage: [
      'repeating-linear-gradient(60deg, rgba(180,160,210,0.07) 0, rgba(180,160,210,0.07) 1px, transparent 0, transparent 50%)',
      'repeating-linear-gradient(120deg, rgba(180,160,210,0.07) 0, rgba(180,160,210,0.07) 1px, transparent 0, transparent 50%)',
    ].join(','),
    backgroundSize: '20px 36px',
  },

  // Fine white grid with larger subdivision — graph paper
  crosshatch: {
    backgroundColor: '#0f0f0f',
    backgroundImage: [
      'linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px)',
      'linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px)',
      'linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px)',
      'linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px)',
    ].join(','),
    backgroundSize: '60px 60px, 60px 60px, 12px 12px, 12px 12px',
  },
};

export function RoomView({ eventId }: { eventId?: string }) {
  const roomInputRef = useRef<HTMLDivElement>(null);
  const roomViewRef = useRef<HTMLDivElement>(null);
  const [chatBackground] = useSetting(settingsAtom, 'chatBackground');

  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');

  const room = useRoom();
  const { roomId } = room;
  const editor = useEditor();

  const mx = useMatrixClient();

  const tombstoneEvent = useStateEvent(room, StateEvent.RoomTombstone);
  const powerLevels = usePowerLevelsContext();
  const creators = useRoomCreators(room);

  const permissions = useRoomPermissions(creators, powerLevels);
  const canMessage = permissions.event(EventType.RoomMessage, mx.getSafeUserId());

  useKeyDown(
    window,
    useCallback(
      (evt) => {
        if (editableActiveElement()) return;
        const portalContainer = document.getElementById('portalContainer');
        if (portalContainer && portalContainer.children.length > 0) {
          return;
        }
        if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v', evt)) {
          ReactEditor.focus(editor);
        }
      },
      [editor]
    )
  );

  return (
    <Page ref={roomViewRef} style={CHAT_BG[chatBackground]}>
      <Box grow="Yes" direction="Column">
        <RoomTimeline
          key={roomId}
          room={room}
          eventId={eventId}
          roomInputRef={roomInputRef}
          editor={editor}
        />
        <RoomViewTyping room={room} />
      </Box>
      <Box shrink="No" direction="Column">
        <div style={{ padding: `0 ${config.space.S400}` }}>
          {tombstoneEvent ? (
            <RoomTombstone
              roomId={roomId}
              body={tombstoneEvent.getContent().body}
              replacementRoomId={tombstoneEvent.getContent().replacement_room}
            />
          ) : (
            <>
              {canMessage && (
                <RoomInput
                  room={room}
                  editor={editor}
                  roomId={roomId}
                  fileDropContainerRef={roomViewRef}
                  ref={roomInputRef}
                />
              )}
              {!canMessage && (
                <RoomInputPlaceholder
                  style={{ padding: config.space.S200 }}
                  alignItems="Center"
                  justifyContent="Center"
                >
                  <Text align="Center">You do not have permission to post in this room</Text>
                </RoomInputPlaceholder>
              )}
            </>
          )}
        </div>
        {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
      </Box>
    </Page>
  );
}