From adc1aef3dbc6b9d5f08f215d527a37e7cc59ddd9 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 6 May 2025 00:51:06 -0400
Subject: 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`.
---
 ui/routes/(app)/ch/[channel]/+page.svelte | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

(limited to 'ui/routes')

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} />
-- 
cgit v1.2.3