Enrich channels with hasUnread attribute

This requires both the channels and messages stores to be available, so
we do it in the page file where we've got those stores handy. It's a bit
inefficient (it recreates the entire enrichedChannels array every time
one of them changes), but it'll do for now.

There's also a TODO hinting that we might want an idea of unread-count.
I think that would require a distinct idea of mentions, because we just
want "fact of unread" for general-availability channels, not "this many
messages since you were last here".

1 files changed, 31 insertions, 1 deletions

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index ad8227e..81324fd 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -19,6 +19,35 @@
   let loading = $state(true);
   let channel = $derived($page.params.channel);
 
+  let rawChannels;
+  channelsList.subscribe((val) => {
+    rawChannels = val.channels;
+  });
+  let rawMessages;
+  messages.subscribe((val) => {
+    rawMessages = val;
+  });
+
+  let enrichedChannels = $derived.by(() => {
+    const channels = rawChannels;
+    const messages = rawMessages;
+    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 > ch.lastReadAt;
+        enrichedChannels.push({
+          ...ch,
+          hasUnreads,
+        });
+      }
+    }
+    return enrichedChannels;
+  });
+
   function onBooted(boot) {
     currentUser.set({
       id: boot.login.id,
@@ -78,6 +107,7 @@
 </script>
 
 <svelte:head>
+  <!-- TODO: unread count? -->
   <title>pilcrow</title>
 </svelte:head>
 
@@ -87,7 +117,7 @@
   <div id="interface" class="p-2">
     <nav id="sidebar" data-expanded={pageContext.showMenu}>
       <div class="channel-list">
-        <ChannelList active={channel} channels={$channelsList.channels} />
+        <ChannelList active={channel} channels={enrichedChannels} />
       </div>
       <div class="create-channel">
         <CreateChannelForm />