From 30c13478d61065a512f5bc8824fecbf2ee6afc81 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Thu, 3 Oct 2024 23:30:10 -0400
Subject: Handle basics of interface scrolling

---
 hi-ui/src/lib/ActiveChannel.svelte | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

(limited to 'hi-ui/src/lib/ActiveChannel.svelte')

diff --git a/hi-ui/src/lib/ActiveChannel.svelte b/hi-ui/src/lib/ActiveChannel.svelte
index 680a785..84f9119 100644
--- a/hi-ui/src/lib/ActiveChannel.svelte
+++ b/hi-ui/src/lib/ActiveChannel.svelte
@@ -1,28 +1,33 @@
 <script>
     import { activeChannel, events } from '../store';
+    import Message from './Message.svelte';
 
-    let channel;
-    let allMessages = [];
-    $: messages = allMessages.filter(
-        (ev) => ev.type === 'message' && channel !== null && ev.channel.id === channel.id
+    let container;
+    $: messages = $events.filter(
+        (ev) => (
+            ev.type === 'message'
+            && $activeChannel !== null
+            && ev.channel.id === $activeChannel.id
+        )
     );
 
-    activeChannel.subscribe((value) => {
-        channel = value;
-    });
+    // TODO: eventually, store scroll height/last unread in channel? scroll there?
 
-    events.subscribe((value) => {
-        allMessages = value;
-    });
+    let scroll = (message) => {
+        message.scrollIntoView();
+    }
 </script>
 
-<div>
+<div class="container" bind:this={container}>
     {#each messages as message}
-        <div>
-            <pre><tt>{message.at} @{message.sender.name}: {message.message.body}</tt></pre>
+        <div use:scroll>
+            <Message {...message} />
         </div>
     {/each}
 </div>
 
 <style>
+    .container {
+        overflow: scroll;
+    }
 </style>
-- 
cgit v1.2.3