1 files changed, 34 insertions, 91 deletions

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 7818505..9ec5244 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -8,61 +8,42 @@
   import TinyGesture from 'tinygesture';
 
   import * as api from '$lib/apiServer.js';
-  import {
-    channelsList,
-    channelsMetaList,
-    currentUser,
-    logins,
-    messages,
-    onEvent
-  } from '$lib/store';
   import ChannelList from '$lib/components/ChannelList.svelte';
   import CreateChannelForm from '$lib/components/CreateChannelForm.svelte';
 
-  let events = null;
   let gesture = null;
 
+  const { data, children } = $props();
+  const { session } = data;
+
+  onMount(session.begin.bind(session));
+  onDestroy(session.end.bind(session));
+
   let pageContext = getContext('page');
-  let { children } = $props();
-  let loading = $state(true);
   let channel = $derived(page.params.channel);
 
-  let rawChannels = $derived($channelsList.channels);
-  let rawChannelsMeta = $derived($channelsMetaList.channelsMeta);
-  let rawMessages = $derived($messages);
-
-  let enrichedChannels = $derived.by(() => {
-    const channels = rawChannels;
-    const channelsMeta = rawChannelsMeta;
-    const messages = rawMessages;
+  let rawChannels = $derived(session.channels);
+  let rawChannelsMeta = $derived(session.local.all);
+  let rawMessages = $derived(session.messages);
 
+  function enrichChannels(channels, channelsMeta, messages) {
     const enrichedChannels = [];
-    if (channels && messages) {
-      for (let ch of channels) {
-        let runs = messages.inChannel(ch.id);
-        let lastRun = runs?.slice(-1)[0];
-        let lastMessage = lastRun?.messages.slice(-1)[0];
-        let lastMessageAt = lastMessage?.at;
-        let hasUnreads = lastMessageAt > channelsMeta[ch.id]?.lastReadAt;
-        enrichedChannels.push({
-          ...ch,
-          hasUnreads
-        });
-      }
+    for (const ch of channels.values()) {
+      const channelMessages = messages.filter((message) => message.channel === ch.id);
+      const lastMessage = channelMessages.slice(-1)[0];
+      const lastMessageAt = lastMessage?.at;
+      const lastReadAt = channelsMeta.get(ch.id)?.lastReadAt;
+      const hasUnreads = lastReadAt === null || lastMessageAt > lastReadAt;
+      enrichedChannels.push({
+        ...ch,
+        hasUnreads
+      });
     }
     return enrichedChannels;
-  });
-
-  function onBooted(boot) {
-    currentUser.set({
-      id: boot.login.id,
-      username: boot.login.name
-    });
-    logins.update((value) => value.setLogins(boot.logins));
-    channelsList.update((value) => value.setChannels(boot.channels));
-    messages.update((value) => value.setMessages(boot.messages));
   }
 
+  const enrichedChannels = $derived(enrichChannels(rawChannels, rawChannelsMeta, rawMessages));
+
   function setUpGestures() {
     if (!browser) {
       // Meaningless if we're not in a browser, so...
@@ -77,46 +58,14 @@
     });
   }
 
-  onMount(async () => {
-    let response = await api.boot();
-    switch (response.status) {
-      case 200:
-        onBooted(response.data);
-        events = api.subscribeToEvents(response.data.resume_point);
-        events.onmessage = onEvent.fromMessage;
-        break;
-      case 401:
-        currentUser.set(null);
-        await goto('/login');
-        break;
-      case 503:
-        currentUser.set(null);
-        await goto('/setup');
-        break;
-      default:
-        // TODO: display error.
-        break;
-    }
-    setUpGestures();
-
-    loading = false;
-  });
+  onMount(setUpGestures);
 
   onDestroy(async () => {
-    if (events !== null) {
-      events.close();
-    }
     if (gesture !== null) {
       gesture.destroy();
     }
   });
 
-  function onbeforeunload(event) {
-    if (events !== null) {
-      events.close();
-    }
-  }
-
   const STORE_KEY_LAST_ACTIVE = 'pilcrow:lastActiveChannel';
 
   function getLastActiveChannel() {
@@ -142,25 +91,19 @@
   }
 </script>
 
-<svelte:window {onbeforeunload} />
-
 <svelte:head>
   <!-- TODO: unread count? -->
   <title>pilcrow</title>
 </svelte:head>
 
-{#if loading}
-  <h2>Loading&hellip;</h2>
-{:else}
-  <div id="interface">
-    <nav id="sidebar" data-expanded={pageContext.showMenu}>
-      <ChannelList active={channel} channels={enrichedChannels} />
-      <div class="create-channel">
-        <CreateChannelForm {createChannel} />
-      </div>
-    </nav>
-    <main>
-      {@render children?.()}
-    </main>
-  </div>
-{/if}
+<div id="interface">
+  <nav id="sidebar" data-expanded={pageContext.showMenu}>
+    <ChannelList active={channel} channels={enrichedChannels} />
+    <div class="create-channel">
+      <CreateChannelForm {createChannel} />
+    </div>
+  </nav>
+  <main>
+    {@render children?.()}
+  </main>
+</div>