5 files changed, 11 insertions, 34 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>
diff --git a/hi-ui/src/lib/Channel.svelte b/hi-ui/src/lib/Channel.svelte
index 7826c46..ad07594 100644
--- a/hi-ui/src/lib/Channel.svelte
+++ b/hi-ui/src/lib/Channel.svelte
@@ -6,11 +6,11 @@
     let active = false;
 
     activeChannel.subscribe((value) => {
-        active = value ? value.id == id : false;
+        active = value.is(id);
     });
 
     function activate() {
-        activeChannel.update(() => ({ id, name }));
+        activeChannel.update((value) => value.set(id));
     }
 </script>
 
diff --git a/hi-ui/src/lib/ChannelList.svelte b/hi-ui/src/lib/ChannelList.svelte
index 9f88e24..ba48e5d 100644
--- a/hi-ui/src/lib/ChannelList.svelte
+++ b/hi-ui/src/lib/ChannelList.svelte
@@ -1,32 +1,18 @@
 <script>
-	import { onMount } from 'svelte';
-
-    import { listChannels } from '../apiServer';
     import { channelsList } from '../store';
     import Channel from './Channel.svelte';
 
     let channels;
-    let loading = true;
 
     channelsList.subscribe((value) => {
-        channels = value;
-    });
-
-	onMount(async () => {
-        let channels = await listChannels();
-        channelsList.update(() => channels.data);
-        loading = false;
+        channels = value.channels;
     });
 </script>
 
 <ul class="select-none">
-    {#if loading}
-        <li><em>loading channels&hellip;</em></li>
-    {:else}
-        {#each channels as channel}
-            <Channel {...channel} />
-        {/each}
-    {/if}
+    {#each channels as channel}
+        <Channel {...channel} />
+    {/each}
 </ul>
 
 <style>
diff --git a/hi-ui/src/lib/CreateChannelForm.svelte b/hi-ui/src/lib/CreateChannelForm.svelte
index 70dc13d..c08430b 100644
--- a/hi-ui/src/lib/CreateChannelForm.svelte
+++ b/hi-ui/src/lib/CreateChannelForm.svelte
@@ -1,8 +1,6 @@
 <script>
     import { createChannel } from '../apiServer';
 
-    import { channelsList } from '../store';
-
     let name = '';
     let disabled = false;
 
@@ -10,7 +8,6 @@
         disabled = true;
         const response = await createChannel(name);
         if (200 <= response.status && response.status < 300) {
-            channelsList.update((value) => [...value, response.data]);
             name = '';
         }
         disabled = false;
diff --git a/hi-ui/src/lib/MessageInput.svelte b/hi-ui/src/lib/MessageInput.svelte
index 9a8475c..b899221 100644
--- a/hi-ui/src/lib/MessageInput.svelte
+++ b/hi-ui/src/lib/MessageInput.svelte
@@ -8,12 +8,12 @@
 
     let self;
     let input;
-    $: disabled = $activeChannel == null;
+    $: disabled = !$activeChannel.isSet();
 
     async function handleSubmit(event) {
         disabled = true;
         // TODO try/catch:
-        await postToChannel($activeChannel?.id, input);
+        await postToChannel($activeChannel.get(), input);
         input = '';
         disabled = false;
         await tick();