UDN/static/src/messageScreen.tsx

import * as React from "bloatless-react";

import {
    Message,
    isMessageEmpty,
    messages,
    newMessageBody,
    sendMessage,
} from "./model";

import { translations } from "./translations";

const convertMessageToElement: React.ListItemConverter<Message> = (message) => {
    return (
        <div class="tile" style="flex: 0">
            <div>
                <span class="secondary">{message.channel}</span>
                <b>{message.body}</b>
            </div>
        </div>
    );
};

export function MessageScreen() {
    return (
        <article id="message-screen">
            <header>{translations.messagesReceived}</header>
            <div>
                <div
                    class="flex-column gap"
                    subscribe:children={[messages, convertMessageToElement]}
                ></div>
            </div>
            <footer>
                <input
                    style="max-width: unset"
                    placeholder={translations.message_placeholder_generic}
                    bind:value={newMessageBody}
                    on:enter={sendMessage}
                ></input>
                <button
                    class="primary"
                    on:click={sendMessage}
                    toggle:disabled={isMessageEmpty}
                >
                    <span class="icon">send</span>
                </button>
            </footer>
        </article>
    );
}