waffle/frontend/src/components/Message.svelte

<script>
    import { overlayStore, OverlayType, setMessageInputEvent } from "../stores";

    export let message;

    const reply = () => {
        let replyString = "";
        const messageLines = message.content.split("\n");

        messageLines.forEach(line => {
            replyString += `> ${line}\n`;
        });

        replyString += `@${message.author_username}: `;

        setMessageInputEvent.emit(replyString);
    };
</script>

<style>
    .message {
        position: relative;
        overflow-x: hidden;
        word-wrap: break-word;
        padding: 3px 3px 3px var(--space-normplus);
        margin-top: 16px;
    }

    .message:hover, .message.pinged {
        background-color: var(--background-color-2);
    }

    .message-content {
        color: var(--foreground-color-2);
        white-space: pre-wrap;
    }

    .pending {
        color: var(--foreground-color-3);
    }

    .author {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-weight: bold;
        color: var(--foreground-color-2);
    }

    .author-more {
        margin-right: 0;
    }

    .author-group {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .message-author-date {
        color: var(--foreground-color-3);
        font-size: 0.7rem;
        margin-left: var(--space-sm);
    }

    .message.clumped  {
        margin-top: 0;
    }

    .via-badge {
        background-color: var(--background-color-3);
        margin-left: var(--space-xs);
        cursor: default;
        flex-shrink: 0;
    }

    .message-actions {
        display: flex;
        position: absolute;
        top: 3px;
        right: 12px;
        z-index: 1;
    }

    .message-actions .icon-button {
        margin: 0;
        padding: 0;
    }

    .message .message-actions {
        display: none;
    }

    .message:hover .message-actions {
        display: flex;
    }
</style>

<div class="message" class:clumped={ message._clumped } class:has-children={ message._hasChildren } class:pinged={ message._mentions }>
    {#if !message._clumped}
        <div class="author-group">
            <span class="author" class:author-more={message._viaBadge}>{ message._effectiveAuthor }</span>
            {#if message._viaBadge}
                <span class="user-badge via-badge">via { message._viaBadge }</span>
            {/if}
            <span class="message-author-date">{ message._createdAtTimeString }</span>
        </div>
    {/if}
    <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>

    <div class="message-actions">
        <button class="icon-button material-icons-outlined" on:click="{ reply }" aria-label="Reply to Message">
            reply
        </button>
        {#if message._editable}
            <button class="icon-button material-icons-outlined" on:click="{ () => overlayStore.push(OverlayType.EditMessage, { message }) }" aria-label="Edit Message">
                edit
            </button>
        {/if}
    </div>
</div>