CT/src/View/Modals/chatMessageInfoModal.tsx

import * as React from "bloatless-react";

import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
import { translations } from "../translations";
import { MessageReactionButtonRow } from "../Components/messageReactionButtonRow";
import { InfoTile } from "../Components/infoTile";

export function ChatMessageInfoModal(
    chatMessageViewModel: ChatMessageViewModel,
) {
    return (
        <div
            class="modal"
            toggle:open={chatMessageViewModel.isPresentingInfoModal}
        >
            <div>
                <main>
                    <h2>{translations.chatPage.message.messageInfoHeadline}</h2>

                    <div class="flex-column gap">
                        {InfoTile(
                            "account_circle",
                            translations.chatPage.message.sentBy,
                            chatMessageViewModel.sender,
                        )}
                        {InfoTile(
                            "schedule",
                            translations.chatPage.message.timeSent,
                            chatMessageViewModel.dateSent,
                        )}
                        {InfoTile(
                            "forum",
                            translations.chatPage.message.channel,
                            chatMessageViewModel.channel,
                        )}
                        {InfoTile(
                            "description",
                            translations.chatPage.message.messageContent,
                            chatMessageViewModel.body,
                        )}
                    </div>

                    <hr></hr>

                    <div class="flex-column gap">
                        <button on:click={chatMessageViewModel.copyMessage}>
                            {translations.chatPage.message.copyMessageButton}
                            <span class="icon">content_copy</span>
                        </button>
                        <button on:click={chatMessageViewModel.resendMessage}>
                            {translations.chatPage.message.resendMessageButton}
                            <span class="icon">redo</span>
                        </button>
                        <button on:click={chatMessageViewModel.decryptMessage}>
                            {translations.chatPage.message.decryptMessageButton}
                            <span class="icon">key</span>
                        </button>
                    </div>

                    <hr></hr>

                    {MessageReactionButtonRow(chatMessageViewModel)}
                </main>
                <button on:click={chatMessageViewModel.hideInfoModal}>
                    {translations.general.closeButton}
                    <span class="icon">close</span>
                </button>
            </div>
        </div>
    );
}