From a01b516844c2a89af9446864b3eccccdd5afb9dc Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 6 May 2025 01:28:28 -0400
Subject: Render messages as ghosts when there's a pending delete, too.

---
 ui/lib/components/Message.svelte | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

(limited to 'ui/lib/components')

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