waffle/frontend/src/components/Message.svelte

<script>
    import { MoreVerticalIcon } from "svelte-feather-icons";
    import { overlayStore, userInfoStore } from "../stores";

    export let message;
</script>

<style>
    .message {
        display: flex;
        align-items: flex-start;
        overflow-x: none;
        word-break: break-all;
        padding: var(--space-xxs) var(--space-normplus) var(--space-xxs) var(--space-normplus);
    }

    .message .edit-message {
        visibility: hidden;
    }

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

    .message:hover .edit-message {
        visibility: visible;
    }

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

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

    .author {
        flex-shrink: 0;
        font-weight: bold;
        margin-right: var(--space-xs);
    }

    .edit-message {
        flex-shrink: 0;
        float: right;
    }
</style>

<div class="message">
    <span class="author">{ message.author_username }</span>
    <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
    {#if userInfoStore.value && message.author_id === userInfoStore.value.id}
        <button class="icon-button icon-button-auto edit-message" on:click="{ () => overlayStore.open('editMessage', { message }) }">
            <MoreVerticalIcon />
        </button>
    {/if}
</div>