3 files changed, 66 insertions, 39 deletions
diff --git a/ui/lib/store/channels.js b/ui/lib/store/channels.js
deleted file mode 100644
index 37dc673..0000000
--- a/ui/lib/store/channels.js
+++ /dev/null
@@ -1,36 +0,0 @@
-export class Channels {
-  constructor() {
-    this.channels = [];
-  }
-
-  setChannels(channels) {
-    this.channels = [...channels];
-    this.sort();
-    return this;
-  }
-
-  addChannel(id, name) {
-    this.channels = [...this.channels, { id, name }];
-    this.sort();
-    return this;
-  }
-
-  deleteChannel(id) {
-    const channelIndex = this.channels.map((e) => e.id).indexOf(id);
-    if (channelIndex !== -1) {
-      this.channels.splice(channelIndex, 1);
-    }
-    return this;
-  }
-
-  sort() {
-    this.channels.sort((a, b) => {
-      if (a.name < b.name) {
-        return -1;
-      } else if (a.name > b.name) {
-        return 1;
-      }
-      return 0;
-    });
-  }
-}
diff --git a/ui/lib/store/channels.svelte.js b/ui/lib/store/channels.svelte.js
new file mode 100644
index 0000000..8919be0
--- /dev/null
+++ b/ui/lib/store/channels.svelte.js
@@ -0,0 +1,62 @@
+import { DateTime } from 'luxon';
+const EPOCH_STRING = "1970-01-01T00:00:00Z";
+
+// For reasons unclear to me, a straight up class definition with a constructor
+// doesn't seem to work, reactively. So we resort to this.
+// Owen suggests that this sentence in the Svelte docs should make the reason
+// clear:
+// > If $state is used with an array or a simple object, the result is a deeply
+// > reactive state proxy.
+// Emphasis on "simple object".
+// --Kit
+function makeChannelObject({ id, name, draft = '', lastReadAt = null, scrollPosition = null }) {
+  return {
+    id,
+    name,
+    lastReadAt: lastReadAt || DateTime.fromISO(EPOCH_STRING),
+    draft,
+    scrollPosition,
+  };
+}
+
+export class Channels {
+  channels = $state([]);
+
+  getChannel(channelId) {
+    return this.channels.filter((ch) => ch.id === channelId)[0] || null;
+  }
+
+  setChannels(channels) {
+    this.channels = channels.map(makeChannelObject);
+    this.sort();
+    return this;
+  }
+
+  addChannel(id, name) {
+    this.channels = [
+      ...this.channels,
+      makeChannelObject({ id, name }),
+    ];
+    this.sort();
+    return this;
+  }
+
+  deleteChannel(id) {
+    const channelIndex = this.channels.map((e) => e.id).indexOf(id);
+    if (channelIndex !== -1) {
+      this.channels.splice(channelIndex, 1);
+    }
+    return this;
+  }
+
+  sort() {
+    this.channels.sort((a, b) => {
+      if (a.name < b.name) {
+        return -1;
+      } else if (a.name > b.name) {
+        return 1;
+      }
+      return 0;
+    });
+  }
+}
diff --git a/ui/lib/store/messages.svelte.js b/ui/lib/store/messages.svelte.js
index 0ceba54..ba4c895 100644
--- a/ui/lib/store/messages.svelte.js
+++ b/ui/lib/store/messages.svelte.js
@@ -1,17 +1,18 @@
+import { DateTime } from 'luxon';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 
 const RUN_COALESCE_MAX_INTERVAL = 10 /* min */ * 60 /* sec */ * 1000; /* ms */
 
 export class Messages {
-  channels = $state({});
+  channels = $state({});  // Mapping<ChannelId, Message>
 
   inChannel(channel) {
-    return this.channels[channel];
+    return this.channels[channel] || [];
   }
 
   addMessage(channel, id, { at, sender, body }) {
-    let parsedAt = new Date(at);
+    let parsedAt = DateTime.fromISO(at);
     let renderedBody = DOMPurify.sanitize(marked.parse(body, { breaks: true }));
     const message = { id, at: parsedAt, body, renderedBody };