cinny/src/app/features/room/message/ForwardMessageDialog.tsx

import React, { ChangeEvent, useCallback, useState } from 'react';
import FocusTrap from 'focus-trap-react';
import {
  Avatar,
  Box,
  config,
  Input,
  Line,
  MenuItem,
  Modal,
  Overlay,
  OverlayBackdrop,
  OverlayCenter,
  Scroll,
  Spinner,
  Text,
} from 'folds';
import { MatrixEvent, Room } from 'matrix-js-sdk';
import { useAtomValue } from 'jotai';
import { useMatrixClient } from '../../../hooks/useMatrixClient';
import { stopPropagation } from '../../../utils/keyboard';
import { useModalStyle } from '../../../hooks/useModalStyle';
import { mDirectAtom } from '../../../state/mDirectList';
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
import { mxcUrlToHttp } from '../../../utils/matrix';
import { RoomAvatar, RoomIcon } from '../../../components/room-avatar';

type RoomRowProps = {
  room: Room;
  dm: boolean;
  useAuthentication: boolean;
  onClick: () => void;
  sending: boolean;
};
function RoomRow({ room, dm, useAuthentication, onClick, sending }: RoomRowProps) {
  const mx = useMatrixClient();
  const avatarMxc = room.getMxcAvatarUrl();
  const avatarUrl = avatarMxc
    ? (mxcUrlToHttp(mx, avatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined)
    : undefined;

  return (
    <MenuItem
      size="300"
      radii="300"
      onClick={onClick}
      disabled={sending}
      before={
        <Avatar size="200" radii="300">
          <RoomAvatar
            roomId={room.roomId}
            src={avatarUrl}
            alt={room.name}
            renderFallback={() => (
              <RoomIcon roomType={room.getType()} size="100" joinRule={room.getJoinRule()} filled />
            )}
          />
        </Avatar>
      }
    >
      <Box direction="Column">
        <Text size="T300" truncate>
          {room.name}
        </Text>
        {dm && (
          <Text size="T200" priority="300" truncate>
            Direct Message
          </Text>
        )}
      </Box>
    </MenuItem>
  );
}

type Props = {
  mEvent: MatrixEvent;
  onClose: () => void;
};

export function ForwardMessageDialog({ mEvent, onClose }: Props) {
  const mx = useMatrixClient();
  const modalStyle = useModalStyle(400);
  const directs = useAtomValue(mDirectAtom);
  const useAuthentication = useMediaAuthentication();
  const [query, setQuery] = useState('');
  const [sending, setSending] = useState(false);
  const [sentTo, setSentTo] = useState<string | null>(null);

  const allRooms = mx
    .getRooms()
    .filter((r) => r.getMyMembership() === 'join' && !r.isSpaceRoom())
    .sort((a, b) => (b.getLastActiveTimestamp() ?? 0) - (a.getLastActiveTimestamp() ?? 0));

  const filtered = query
    ? allRooms.filter((r) => r.name.toLowerCase().includes(query.toLowerCase()))
    : allRooms;

  const forward = useCallback(
    async (room: Room) => {
      if (sending) return;
      setSending(true);
      const fwdContent: Record<string, unknown> = { ...mEvent.getContent() };
      delete fwdContent['m.relates_to'];
      try {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        await (mx as any).sendEvent(room.roomId, mEvent.getType(), fwdContent);
        setSentTo(room.name);
        setTimeout(onClose, 1400);
      } catch {
        setSending(false);
      }
    },
    [mx, mEvent, onClose, sending],
  );

  return (
    <Overlay open backdrop={<OverlayBackdrop />}>
      <OverlayCenter>
        <FocusTrap
          focusTrapOptions={{
            initialFocus: false,
            onDeactivate: onClose,
            clickOutsideDeactivates: true,
            escapeDeactivates: stopPropagation,
          }}
        >
          <Modal
            size="400"
            style={{
              maxHeight: '480px',
              borderRadius: config.radii.R500,
              display: 'flex',
              flexDirection: 'column',
              ...modalStyle,
            }}
          >
            <Box
              direction="Column"
              gap="200"
              shrink="No"
              style={{ padding: config.space.S400, paddingBottom: config.space.S200 }}
            >
              <Text size="H5">Forward message</Text>
              {!sentTo && (
                <Input
                  variant="Background"
                  size="400"
                  radii="400"
                  outlined
                  placeholder="Search rooms…"
                  value={query}
                  onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
                />
              )}
            </Box>
            <Line size="300" />
            {sentTo ? (
              <Box
                grow="Yes"
                alignItems="Center"
                justifyContent="Center"
                gap="300"
                style={{ padding: config.space.S400 }}
              >
                <Text size="T300">✓ Forwarded to {sentTo}</Text>
              </Box>
            ) : (
              <Box grow="Yes" style={{ minHeight: 0, position: 'relative' }}>
                <Scroll size="300" hideTrack visibility="Hover">
                  <Box direction="Column" gap="100" style={{ padding: config.space.S200 }}>
                    {filtered.slice(0, 60).map((room) => (
                      <RoomRow
                        key={room.roomId}
                        room={room}
                        dm={directs.has(room.roomId)}
                        useAuthentication={useAuthentication}
                        onClick={() => forward(room)}
                        sending={sending}
                      />
                    ))}
                    {filtered.length === 0 && (
                      <Box
                        alignItems="Center"
                        justifyContent="Center"
                        style={{ padding: config.space.S400 }}
                      >
                        <Text size="T300" priority="300">
                          No rooms found
                        </Text>
                      </Box>
                    )}
                  </Box>
                </Scroll>
                {sending && (
                  <Box
                    alignItems="Center"
                    justifyContent="Center"
                    style={{
                      position: 'absolute',
                      inset: 0,
                      background: 'rgba(0,0,0,0.35)',
                      borderRadius: config.radii.R500,
                    }}
                  >
                    <Spinner variant="Secondary" size="400" />
                  </Box>
                )}
              </Box>
            )}
          </Modal>
        </FocusTrap>
      </OverlayCenter>
    </Overlay>
  );
}