example_ui.ts

function example_ui() {
    const canvas = document.getElementById("canvas");

    if (!canvas) {
        return;
    }

    const state = default_state();
    const spacing_between_blocks = 18;
    const chat_input_area_height = 66;

    imgui(canvas as HTMLCanvasElement, (w: number, h: number) => {
        const parts = Horizontal_Layout.at(0, 0);
        const left_panel_top_left = parts.advance(left_panel_width);

        container_with_background("left_panel", left_panel_top_left.x, left_panel_top_left.y, left_panel_width, h, colors.left_panel.bg, () => {
            const blocks = Vertical_Layout.at_cursor(left_panel_top_left);

            blocks.advance(team_button(state.team_name, state.user_name, left_panel_width, blocks.current()));
            blocks.advance(spacing_between_blocks);
            blocks.advance(channels_list(state, blocks.current()));
            blocks.advance(spacing_between_blocks);
            blocks.advance(direct_messages_list(state, blocks.current()));
            blocks.advance(spacing_between_blocks);
            apps_list(blocks.current());
        });

        const chat_panel = Vertical_Layout.at_cursor(parts.cursor);

        chat_panel.advance(chat_header());

        const chat_area_width = w - parts.cursor.x;
        const chat_area_height = h - chat_panel.cursor.y - chat_input_area_height;
        const chat_panel_top_left = chat_panel.advance(chat_area_height);

        container_with_background("chat_area", chat_panel_top_left.x, chat_panel_top_left.y, chat_area_width, chat_area_height, black, () => {
            const messages = Vertical_Layout.at_cursor(chat_panel_top_left);
            const channel = state.channels.find((channel) => channel.name == state.selected_conversation);

            if (!channel) {
                return;
            }

            for (let message of channel.messages) {
                messages.advance(chat_message(message, messages.current()));
            }
        });

        chat_text_input();
    });
}