1 files changed, 33 insertions, 0 deletions
diff --git a/hi-ui/src/lib/ActiveChannel.svelte b/hi-ui/src/lib/ActiveChannel.svelte
new file mode 100644
index 0000000..84f9119
--- /dev/null
+++ b/hi-ui/src/lib/ActiveChannel.svelte
@@ -0,0 +1,33 @@
+<script>
+    import { activeChannel, events } from '../store';
+    import Message from './Message.svelte';
+
+    let container;
+    $: messages = $events.filter(
+        (ev) => (
+            ev.type === 'message'
+            && $activeChannel !== null
+            && ev.channel.id === $activeChannel.id
+        )
+    );
+
+    // TODO: eventually, store scroll height/last unread in channel? scroll there?
+
+    let scroll = (message) => {
+        message.scrollIntoView();
+    }
+</script>
+
+<div class="container" bind:this={container}>
+    {#each messages as message}
+        <div use:scroll>
+            <Message {...message} />
+        </div>
+    {/each}
+</div>
+
+<style>
+    .container {
+        overflow: scroll;
+    }
+</style>