Hoist the UI one step up further

1 files changed, 27 insertions, 0 deletions

diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
new file mode 100644
index 0000000..978e952
--- /dev/null
+++ b/ui/lib/components/ActiveChannel.svelte
@@ -0,0 +1,27 @@
+<script>
+    import { activeChannel, messages } from '$lib/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>