7 files changed, 45 insertions, 5 deletions

diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index edd9d79..ea90414 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -20,10 +20,17 @@
   }
 </script>
 
-<div class="message" class:delete-armed={deleteArmed} role="article" data-at={at} {onmouseleave}>
+<div
+  class="message"
+  class:delete-armed={deleteArmed}
+  class:unsent={id === null}
+  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/outbox.svelte.js b/ui/lib/outbox.svelte.js
index fd7fdba..0e4cf29 100644
--- a/ui/lib/outbox.svelte.js
+++ b/ui/lib/outbox.svelte.js
@@ -1,3 +1,6 @@
+import { DateTime } from 'luxon';
+import * as msg from './state/remote/messages.svelte.js';
+
 import * as api from './apiServer.js';
 import * as md from './markdown.js';
 
@@ -5,9 +8,21 @@ class PostToChannel {
   constructor(channel, body) {
     this.channel = channel;
     this.body = body;
+    this.at = DateTime.now();
     this.renderedBody = md.render(body);
   }
 
+  toSkeleton(sender) {
+    return {
+      id: null,
+      at: this.at,
+      channel: this.channel,
+      sender,
+      body: this.body,
+      renderedBody: this.renderedBody
+    };
+  }
+
   async send() {
     return await api.retry(() => api.postToChannel(this.channel, this.body));
   }
@@ -35,6 +50,7 @@ class CreateChannel {
 
 export class Outbox {
   pending = $state([]);
+  messages = $derived(this.pending.filter((operation) => operation instanceof PostToChannel));
 
   static empty() {
     return new Outbox([]);
diff --git a/ui/lib/runs.js b/ui/lib/runs.js
index f4e90be..e3d4c20 100644
--- a/ui/lib/runs.js
+++ b/ui/lib/runs.js
@@ -21,5 +21,13 @@ function runKey(message) {
 }
 
 function continueRun([lastSender, lastAt], [newSender, newAt]) {
-  return lastSender === newSender && newAt - lastAt < RUN_COALESCE_MAX_INTERVAL;
+  const { id: lastId, name: lastName } = lastSender;
+  const { id: newId, name: newName } = newSender;
+  if (lastId !== newId) {
+    return false;
+  }
+  if (lastName !== newName) {
+    return false;
+  }
+  return newAt - lastAt < RUN_COALESCE_MAX_INTERVAL;
 }
diff --git a/ui/lib/state/remote/messages.svelte.js b/ui/lib/state/remote/messages.svelte.js
index 576a74e..c6d31f0 100644
--- a/ui/lib/state/remote/messages.svelte.js
+++ b/ui/lib/state/remote/messages.svelte.js
@@ -1,7 +1,7 @@
 import { DateTime } from 'luxon';
 import { render } from '$lib/markdown.js';
 
-class Message {
+export class Message {
   static boot({ id, at, channel, sender, body }) {
     return new Message({
       id,
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index ccf455c..50b6a7d 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -12,7 +12,11 @@
 
   const channel = $derived(page.params.channel);
   const messages = $derived(session.messages.filter((message) => message.channel === channel));
-  const messageRuns = $derived(runs(messages, session.currentUser));
+  const unsent = $derived(outbox.messages.filter((message) => message.channel === channel));
+  const unsentSkeletons = $derived(
+    unsent.map((message) => message.toSkeleton($state.snapshot(session.currentUser)))
+  );
+  const messageRuns = $derived(runs(messages.concat(unsentSkeletons), session.currentUser));
 
   function inView(parentElement, element) {
     const parRect = parentElement.getBoundingClientRect();
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index 5890c1a..67a9517 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -39,6 +39,10 @@
   position: relative;
 }
 
+.message.unsent {
+  color: var(--colour-message-run-unsent-text);
+}
+
 .message.delete-armed,
 .message.delete-armed:hover {
   background-color: var(--colour-warn);
diff --git a/ui/styles/variables.css b/ui/styles/variables.css
index c43832c..01efc19 100644
--- a/ui/styles/variables.css
+++ b/ui/styles/variables.css
@@ -56,6 +56,7 @@
   );
   --colour-message-run-self-text: var(--dark-text);
   --colour-message-run-other-text: var(--dark-text);
+  --colour-message-run-unsent-text: var(--light-text);
 
   --colour-message-run-username-bg: color-mix(in srgb, var(--colour-base) 70%, white);
   --colour-message-run-username-border: color-mix(in srgb, var(--colour-base) 50%, black);