Un-nest `Message` from `MessageRun`.

A `MessageRun` is a visual container with a specific layout - bordered, with a drop shadow, with a name badge on the top-left, which is either positioned to the left (`other-message`) or right (`own-message`). It is content-agnostic.

This facilitates putting things besides live messages inside of a message run. As a side effect, this gets rid of ActiveChannel; most of what it was doing makes more sense living in the channel view's `+page.svelte`.

3 files changed, 24 insertions, 24 deletions

diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
deleted file mode 100644
index 30b8385..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/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>
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index abec00d..ccf455c 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -1,8 +1,9 @@
 <script>
   import { DateTime } from 'luxon';
   import { page } from '$app/state';
-  import ActiveChannel from '$lib/components/ActiveChannel.svelte';
   import MessageInput from '$lib/components/MessageInput.svelte';
+  import MessageRun from '$lib/components/MessageRun.svelte';
+  import Message from '$lib/components/Message.svelte';
   import { runs } from '$lib/runs.js';
 
   const { data } = $props();
@@ -50,6 +51,12 @@
     setLastRead();
   });
 
+  $effect(() => {
+    // This is just to force it to track messageRuns.
+    const _ = messageRuns;
+    document.querySelector('.message-run:last-child .message:last-child')?.scrollIntoView();
+  });
+
   function handleKeydown(event) {
     if (event.key === 'Escape') {
       setLastRead(); // TODO: pass in "last message DT"?
@@ -75,7 +82,19 @@
 <svelte:window onkeydown={handleKeydown} />
 
 <div class="active-channel" {onscroll} bind:this={activeChannel}>
-  <ActiveChannel {messageRuns} {deleteMessage} />
+  {#each messageRuns as { sender, ownMessage, messages }}
+    <MessageRun
+      {sender}
+      class={{
+        ['own-message']: ownMessage,
+        ['other-message']: !ownMessage
+      }}
+    >
+      {#each messages as message}
+        <Message {...message} editable={ownMessage} {deleteMessage} />
+      {/each}
+    </MessageRun>
+  {/each}
 </div>
 <div class="create-message">
   <MessageInput {sendMessage} />