diff options
Diffstat (limited to 'ui/lib')
| -rw-r--r-- | ui/lib/components/Message.svelte | 12 | ||||
| -rw-r--r-- | ui/lib/store/messages.svelte.js | 7 |
2 files changed, 14 insertions, 5 deletions
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte index 1663696..5673248 100644 --- a/ui/lib/components/Message.svelte +++ b/ui/lib/components/Message.svelte @@ -1,4 +1,5 @@ <script> + import { DateTime } from 'luxon'; import { deleteMessage } from '$lib/apiServer'; function scroll(message) { @@ -7,6 +8,7 @@ let { id, at, body, renderedBody, editable = false } = $props(); let deleteArmed = $state(false); + let atFormatted = $derived(at.toLocaleString(DateTime.DATETIME_SHORT)); function onDelete(event) { event.preventDefault(); @@ -23,9 +25,15 @@ } </script> -<div class="message relative" class:bg-warning-800={deleteArmed} {onmouseleave} role="article"> +<div + class="message relative" + class:bg-warning-800={deleteArmed} + role="article" + data-at={at} + {onmouseleave} + > <div class="handle chip bg-surface-700 absolute -top-6 right-0"> - {at} + {atFormatted} {#if editable} <button onclick={onDelete}>🗑️</button> {/if} 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 }; |