<script>
    import { activeChannel, messages } from '../store';
    import Message from './Message.svelte';

    let container;
    $: messageList = $activeChannel.isSet() ? $messages.inChannel($activeChannel.get()) : [];

    // TODO: eventually, store scroll height/last unread in channel? scroll there?

    let scroll = (message) => {
        message.scrollIntoView();
    }
</script>

<div class="container" bind:this={container}>
    {#each messageList as message}
        <div use:scroll>
            <Message {...message} />
        </div>
    {/each}
</div>

<style>
    .container {
        overflow: scroll;
    }
</style>
