2 files changed, 16 insertions, 4 deletions
diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index e84c6d0..01b1c87 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -1,10 +1,14 @@
 <script>
-  let { id, name, active } = $props();
+  let { id, name, active, hasUnreads } = $props();
 </script>
 
 <li class="rounded-full" class:bg-slate-400={active}>
   <a href="/ch/{id}">
-    <span class="badge bg-primary-500">#</span>
+    {#if hasUnreads}
+      <span class="badge bg-warning-500">❦</span>
+    {:else}
+      <span class="badge bg-primary-500">¶</span>
+    {/if}
     <span class="flex-auto">{name}</span>
   </a>
 </li>
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index c3e6b16..aa9e3e9 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}>&#x1F5D1;&#xFE0F;</button>
     {/if}