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";

    export let channel;
</script>

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

<div class="main-container" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}">
    <ChannelTopBar channel={ channel } />
    <Messages channelId="{ channel.id }" />
    <MessageInput channel={ channel } />
</div>