Use Luxon dates on Message store and component

This includes jamming the "at" of a message into a data- attribute on
the Message component, so that it can later be used by parent components
via Plain Old Javascript and the .dataset attribute of an HTML node.

1 files changed, 4 insertions, 3 deletions

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 };