waffle/frontend/src/components/ChannelView.svelte

<script>
    import { showChannelView } from "../stores";
    import ChannelTopBar from "./ChannelTopBar.svelte";
    import MessageInput from "./MessageInput.svelte";
    import Messages from "./Messages.svelte";

    export let channel;
</script>

<style>
    .main-container {
        background-color: var(--background-color-1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    .hidden {
        display: none;
    }
</style>

<div class="main-container" class:hidden={ !$showChannelView }>
    <ChannelTopBar channel={ channel } />
    <Messages channelId="{ channel.id }" />
    <MessageInput channel={ channel } />
</div>