Provide named operations for stored state.

1 files changed, 3 insertions, 9 deletions

diff --git a/hi-ui/src/lib/ActiveChannel.svelte b/hi-ui/src/lib/ActiveChannel.svelte
index 84f9119..d2d92fb 100644
--- a/hi-ui/src/lib/ActiveChannel.svelte
+++ b/hi-ui/src/lib/ActiveChannel.svelte
@@ -1,15 +1,9 @@
 <script>
-    import { activeChannel, events } from '../store';
+    import { activeChannel, messages } from '../store';
     import Message from './Message.svelte';
 
     let container;
-    $: messages = $events.filter(
-        (ev) => (
-            ev.type === 'message'
-            && $activeChannel !== null
-            && ev.channel.id === $activeChannel.id
-        )
-    );
+    $: messageList = $activeChannel.isSet() ? $messages.inChannel($activeChannel.get()) : [];
 
     // TODO: eventually, store scroll height/last unread in channel? scroll there?
 
@@ -19,7 +13,7 @@
 </script>
 
 <div class="container" bind:this={container}>
-    {#each messages as message}
+    {#each messageList as message}
         <div use:scroll>
             <Message {...message} />
         </div>