Render messages as ghosts when there's a pending delete, too.

4 files changed, 29 insertions, 6 deletions

diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index ea90414..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));
 
@@ -21,9 +29,13 @@
 </script>
 
 <div
-  class="message"
-  class:delete-armed={deleteArmed}
-  class:unsent={id === null}
+  class={[
+    'message',
+    {
+      ['delete-armed']: deleteArmed
+    },
+    cssClass
+  ]}
   role="article"
   data-at={at}
   {onmouseleave}
diff --git a/ui/lib/outbox.svelte.js b/ui/lib/outbox.svelte.js
index 0e4cf29..472c58b 100644
--- a/ui/lib/outbox.svelte.js
+++ b/ui/lib/outbox.svelte.js
@@ -51,6 +51,7 @@ class CreateChannel {
 export class Outbox {
   pending = $state([]);
   messages = $derived(this.pending.filter((operation) => operation instanceof PostToChannel));
+  deleted = $derived(this.pending.filter((operation) => operation instanceof DeleteMessage));
 
   static empty() {
     return new Outbox([]);
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index 50b6a7d..33a9bdf 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -13,6 +13,7 @@
   const channel = $derived(page.params.channel);
   const messages = $derived(session.messages.filter((message) => message.channel === channel));
   const unsent = $derived(outbox.messages.filter((message) => message.channel === channel));
+  const deleted = $derived(outbox.deleted.map((message) => message.messageId));
   const unsentSkeletons = $derived(
     unsent.map((message) => message.toSkeleton($state.snapshot(session.currentUser)))
   );
@@ -95,7 +96,15 @@
       }}
     >
       {#each messages as message}
-        <Message {...message} editable={ownMessage} {deleteMessage} />
+        <Message
+          {...message}
+          editable={ownMessage}
+          {deleteMessage}
+          class={{
+            unsent: !message.id,
+            deleted: deleted.includes(message.id)
+          }}
+        />
       {/each}
     </MessageRun>
   {/each}
diff --git a/ui/styles/messages.css b/ui/styles/messages.css
index 67a9517..30f6db9 100644
--- a/ui/styles/messages.css
+++ b/ui/styles/messages.css
@@ -39,7 +39,8 @@
   position: relative;
 }
 
-.message.unsent {
+.message.unsent,
+.message.deleted {
   color: var(--colour-message-run-unsent-text);
 }