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

2 files changed, 17 insertions, 4 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([]);