revite/src/components/common/messaging/attachments/MessageReply.tsx

import { Reply, File } from "@styled-icons/boxicons-regular";
import styled, { css } from "styled-components";

import { Text } from "preact-i18n";

import { useRenderState } from "../../../../lib/renderer/Singleton";

import { useUser } from "../../../../context/revoltjs/hooks";

import Markdown from "../../../markdown/Markdown";
import UserShort from "../../user/UserShort";

interface Props {
    channel: string;
    index: number;
    id: string;
}

export const ReplyBase = styled.div<{
    head?: boolean;
    fail?: boolean;
    preview?: boolean;
}>`
    gap: 4px;
    display: flex;
    font-size: 0.8em;
    margin-left: 30px;
    user-select: none;
    margin-bottom: 4px;
    align-items: center;
    color: var(--secondary-foreground);

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    svg:first-child {
        flex-shrink: 0;
        transform: scaleX(-1);
        color: var(--tertiary-foreground);
    }

    ${(props) =>
        props.fail &&
        css`
            color: var(--tertiary-foreground);
        `}

    ${(props) =>
        props.head &&
        css`
            margin-top: 12px;
        `}

    ${(props) =>
        props.preview &&
        css`
            margin-left: 0;
        `}
`;

export function MessageReply({ index, channel, id }: Props) {
    const view = useRenderState(channel);
    if (view?.type !== "RENDER") return null;

    const message = view.messages.find((x) => x._id === id);
    if (!message) {
        return (
            <ReplyBase head={index === 0} fail>
                <Reply size={16} />
                <span>
                    <Text id="app.main.channel.misc.failed_load" />
                </span>
            </ReplyBase>
        );
    }

    const user = useUser(message.author);

    return (
        <ReplyBase head={index === 0}>
            <Reply size={16} />
            <UserShort user={user} size={16} />
            {message.attachments && message.attachments.length > 0 && (
                <File size={16} />
            )}
            <Markdown
                disallowBigEmoji
                content={(message.content as string).replace(/\n/g, " ")}
            />
        </ReplyBase>
    );
}