waffle/frontend/src/components/ChannelView.svelte

<script>
    import ChannelTopBar from "./ChannelTopBar.svelte";
    import MessageInput from "./MessageInput.svelte";
    import Messages from "./Messages.svelte";
    import { quadInOut } from "svelte/easing";
    import { maybeFly } from "../animations";
    import { showSidebar, statusBarStore } from "../stores";

    export let channel;
</script>

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

<div class="main-container" class:round-left="{ $showSidebar }" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}">
    {#if $statusBarStore}
        <div class="info-bar">
            <span class="info-text">{ $statusBarStore }</span>
        </div>
    {/if}
    <ChannelTopBar channel={ channel } />
    <Messages channelId="{ channel.id }" />
    <MessageInput channel={ channel } />
</div>