CT/src/View/Components/chatEntry.tsx

import * as React from "bloatless-react";

import ChatViewModel from "../../ViewModel/Chat/chatViewModel";

export function ChatEntry(chatViewModel: ChatViewModel) {
    const view = (
        <button
            class="tile colored-tile chat-entry"
            set:color={chatViewModel.settingsPageViewModel.color}
            style="height: 8rem"
            on:click={chatViewModel.open}
            toggle:unread={chatViewModel.hasUnreadMessages}
        >
            <span
                class="shadow"
                subscribe:innerText={
                    chatViewModel.settingsPageViewModel.primaryChannel
                }
            ></span>
            <h2
                subscribe:innerText={
                    chatViewModel.settingsPageViewModel.primaryChannel
                }
            ></h2>
        </button>
    );

    chatViewModel.index.subscribe((newIndex) => {
        view.style.order = newIndex;
    });

    return view;
}

export const ChatViewModelToChatEntry: React.StateItemConverter<
    ChatViewModel
> = (chatViewModel: ChatViewModel) => {
    return ChatEntry(chatViewModel);
};