2 files changed, 19 insertions, 26 deletions

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 9ade399..888a185 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -1,12 +1,12 @@
 <script>
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import { goto } from '$app/navigation';
   import { browser } from '$app/environment';
-  import { onMount, onDestroy, getContext } from 'svelte';
+  import { getContext, onDestroy, onMount } from 'svelte';
   import TinyGesture from 'tinygesture';
 
   import { boot, subscribeToEvents } from '$lib/apiServer';
-  import { currentUser, logins, channelsList, channelsMetaList, messages } from '$lib/store';
+  import { channelsList, channelsMetaList, currentUser, logins, messages, onEvent } from '$lib/store';
 
   import ChannelList from '$lib/components/ChannelList.svelte';
   import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
@@ -17,20 +17,11 @@
   let pageContext = getContext('page');
   let { children } = $props();
   let loading = $state(true);
-  let channel = $derived($page.params.channel);
+  let channel = $derived(page.params.channel);
 
-  let rawChannels;
-  channelsList.subscribe((val) => {
-    rawChannels = val.channels;
-  });
-  let rawChannelsMeta;
-  channelsMetaList.subscribe((val) => {
-    rawChannelsMeta = val.channelsMeta;
-  });
-  let rawMessages;
-  messages.subscribe((val) => {
-    rawMessages = val;
-  });
+  let rawChannels = $derived($channelsList.channels);
+  let rawChannelsMeta = $derived($channelsMetaList.channelsMeta);
+  let rawMessages = $derived($messages);
 
   let enrichedChannels = $derived.by(() => {
     const channels = rawChannels;
@@ -84,14 +75,15 @@
       case 200:
         onBooted(response.data);
         events = subscribeToEvents(response.data.resume_point);
+        events.onmessage = onEvent.fromMessage;
         break;
       case 401:
         currentUser.set(null);
-        goto('/login');
+        await goto('/login');
         break;
       case 503:
         currentUser.set(null);
-        goto('/setup');
+        await goto('/setup');
         break;
       default:
         // TODO: display error.
@@ -111,18 +103,18 @@
     }
   });
 
-  function beforeUnload(evt) {
-    evt.preventDefault();
+  function onbeforeunload(event) {
+    event.preventDefault();
     if (events !== null) {
       events.close();
     }
     // For some compat reasons?
-    evt.returnValue = '';
+    event.returnValue = '';
     return '';
   }
 </script>
 
-<svelte:window on:beforeunload={beforeUnload} />
+<svelte:window {onbeforeunload} />
 
 <svelte:head>
   <!-- TODO: unread count? -->
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index 25bc318..54ebda7 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -1,11 +1,11 @@
 <script>
   import { DateTime } from 'luxon';
-  import { page } from '$app/stores';
+  import { page } from '$app/state';
   import ActiveChannel from '$lib/components/ActiveChannel.svelte';
   import MessageInput from '$lib/components/MessageInput.svelte';
   import { channelsMetaList, messages } from '$lib/store';
 
-  let channel = $derived($page.params.channel);
+  let channel = $derived(page.params.channel);
   let messageRuns = $derived($messages.inChannel(channel));
   let activeChannel;
 
@@ -53,7 +53,8 @@
   }
 
   let lastReadCallback = null;
-  function handleScroll() {
+
+  function onscroll() {
     clearTimeout(lastReadCallback); // Fine if lastReadCallback is null still.
     lastReadCallback = setTimeout(setLastRead, 2 * 1000);
   }
@@ -61,7 +62,7 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
-<div class="active-channel" on:scroll={handleScroll} bind:this={activeChannel}>
+<div class="active-channel" {onscroll} bind:this={activeChannel}>
   <ActiveChannel {messageRuns} />
 </div>
 <div class="create-message">