From 14dc9e1c1581fa04b37e81d76499f705512660b2 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Wed, 6 Nov 2024 18:42:38 -0500
Subject: Split message runs after ten minutes' silence.

I've also refactored how runs are processed, to avoid re-splitting runs every time the channel view is rendered. They're generated when messages are ingested into the `$messages` store, instead.
---
 ui/lib/components/ActiveChannel.svelte | 27 ++-------------------------
 1 file changed, 2 insertions(+), 25 deletions(-)

(limited to 'ui/lib/components/ActiveChannel.svelte')

diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
index a4ccd24..f939dbd 100644
--- a/ui/lib/components/ActiveChannel.svelte
+++ b/ui/lib/components/ActiveChannel.svelte
@@ -1,34 +1,11 @@
 <script>
-  import { messages } from '$lib/store';
   import MessageRun from './MessageRun.svelte';
 
-  let { channel } = $props();
-  let messageList = $derived(channel !== null ? $messages.inChannel(channel) : []);
-
-  function* chunkBy(xs, fn) {
-    let chunk;
-    let key;
-    for (let x of xs) {
-      let newKey = fn(x);
-      if (key !== newKey) {
-        if (chunk !== undefined) {
-          yield [key, chunk];
-        }
-
-        chunk = [x];
-        key = newKey;
-      } else {
-        chunk.push(x);
-      }
-    }
-    if (chunk !== undefined) {
-      yield [key, chunk];
-    }
-  }
+  let { messageRuns } = $props();
 </script>
 
 <div class="container">
-  {#each chunkBy(messageList, (msg) => msg.sender) as [sender, messages]}
+  {#each messageRuns as { sender, messages }}
     <div>
       <MessageRun {sender} {messages} />
     </div>
-- 
cgit v1.2.3


From b89ffe00fbb28fac3daafb1f7adc71be72b59433 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Wed, 6 Nov 2024 17:12:42 -0500
Subject: Be more consistent around margins and padding for the "main" pane

---
 ui/lib/components/ActiveChannel.svelte | 18 +++++-------------
 ui/lib/components/MessageRun.svelte    |  2 +-
 ui/routes/(app)/+layout.svelte         |  2 +-
 3 files changed, 7 insertions(+), 15 deletions(-)

(limited to 'ui/lib/components/ActiveChannel.svelte')

diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
index f939dbd..ba62d6c 100644
--- a/ui/lib/components/ActiveChannel.svelte
+++ b/ui/lib/components/ActiveChannel.svelte
@@ -4,16 +4,8 @@
   let { messageRuns } = $props();
 </script>
 
-<div class="container">
-  {#each messageRuns as { sender, messages }}
-    <div>
-      <MessageRun {sender} {messages} />
-    </div>
-  {/each}
-</div>
-
-<style>
-  .container {
-    overflow: auto;
-  }
-</style>
+{#each messageRuns as { sender, messages }}
+  <div>
+    <MessageRun {sender} {messages} />
+  </div>
+{/each}
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index b71e972..2e8c613 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div
-  class="card m-4 px-4 py-1 relative"
+  class="card my-4 px-4 py-1 relative"
   class:own-message={ownMessage}
   class:other-message={!ownMessage}
 >
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 0a8c58d..db400c4 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -71,7 +71,7 @@
         <CreateChannelForm />
       </div>
     </nav>
-    <main>
+    <main class="pl-4">
       {@render children?.()}
     </main>
   </div>
-- 
cgit v1.2.3