From e4273ffd945f16d6f74e9c64431808ea36148880 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Tue, 6 May 2025 01:07:54 -0400
Subject: Render "ghost" messages for unsent messages.

There is a subtle race conditon in this code, which is likely not fixable without a protocol change:

* Ghost messages can disappear before their "real" message replacement shows up, if the client finishes sending (i.e., receives an HTTP response on the POST) before the server delivers the real message.
* Ghost messages can be duplicated briefly, if the client receives the real message before the client finishes sending.

Both happen in practice; we make no ordering guarantees between requests.

To aviod this, we'd to give clients a way to correlate pending sends with received messages. This would require fundamentally the same capabilities, like per-operation nonces, that preventing duplicate operations will require.
---
 ui/lib/components/Message.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

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

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


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 ++++++++++++++++----
 ui/lib/outbox.svelte.js                   |  1 +
 ui/routes/(app)/ch/[channel]/+page.svelte | 11 ++++++++++-
 ui/styles/messages.css                    |  3 ++-
 4 files changed, 29 insertions(+), 6 deletions(-)

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

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