3 files changed, 25 insertions, 25 deletions
diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
deleted file mode 100644
index c38d10d..0000000
--- a/ui/lib/components/ActiveChannel.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<script>
-  import MessageRun from './MessageRun.svelte';
-
-  let { messageRuns, deleteMessage = async (id) => {} } = $props();
-
-  $effect(() => {
-    // This is just to force it to track messageRuns.
-    const _ = messageRuns;
-    document.querySelector('.message-run:last-child .message:last-child')?.scrollIntoView();
-  });
-</script>
-
-{#each messageRuns as { sender, ownMessage, messages }}
-  <MessageRun {sender} {ownMessage} {messages} {deleteMessage} />
-{/each}
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index edd9d79..5d15d17 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -1,7 +1,15 @@
 <script>
   import { DateTime } from 'luxon';
 
-  let { id, at, body, renderedBody, editable = false, deleteMessage = async (id) => {} } = $props();
+  let {
+    class: cssClass,
+    id,
+    at,
+    body,
+    renderedBody,
+    editable = false,
+    deleteMessage = async (id) => {}
+  } = $props();
   let deleteArmed = $state(false);
   let atFormatted = $derived(at.toLocaleString(DateTime.DATETIME_SHORT));
 
@@ -20,10 +28,21 @@
   }
 </script>
 
-<div class="message" class:delete-armed={deleteArmed} role="article" data-at={at} {onmouseleave}>
+<div
+  class={[
+    'message',
+    {
+      ['delete-armed']: deleteArmed
+    },
+    cssClass
+  ]}
+  role="article"
+  data-at={at}
+  {onmouseleave}
+>
   <div class="handle">
     {atFormatted}
-    {#if editable}
+    {#if editable && id}
       <button onclick={ondelete}>&#x1F5D1;&#xFE0F;</button>
     {/if}
   </div>
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index f1facd3..f6e7ee1 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -1,14 +1,10 @@
 <script>
-  import Message from '$lib/components/Message.svelte';
-
-  let { sender, messages, ownMessage, deleteMessage = async (id) => {} } = $props();
+  let { sender, children, class: cssClass } = $props();
 </script>
 
-<div class="message-run" class:own-message={ownMessage} class:other-message={!ownMessage}>
+<div class={['message-run', cssClass]}>
   <span class="username">
     @{sender}:
   </span>
-  {#each messages as message}
-    <Message {...message} editable={ownMessage} {deleteMessage} />
-  {/each}
+  {@render children?.()}
 </div>