Deletable messages.

This also fixes some rendering jank with the message timestamp chip.

2 files changed, 29 insertions, 7 deletions

diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index 68c5c91..0c8eeec 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -2,16 +2,38 @@
   import { marked } from 'marked';
   import DOMPurify from 'dompurify';
 
+  import { deleteMessage } from '$lib/apiServer';
+
   function scroll(message) {
     message.scrollIntoView();
   }
 
-  let { at, body } = $props();
+  let { id, at, body, editable = false } = $props();
   let renderedBody = $derived(DOMPurify.sanitize(marked.parse(body, { breaks: true })));
+  let deleteArmed = $state(false);
+
+  function onDelete(event) {
+    event.preventDefault();
+    if (deleteArmed) {
+      deleteArmed = false;
+      deleteMessage(id);
+    } else {
+      deleteArmed = true;
+    }
+  }
+
+  function onmouseleave() {
+    deleteArmed = false;
+  }
 </script>
 
-<div class="message relative">
-  <span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span>
+<div class="message relative" class:bg-warning-800={deleteArmed} {onmouseleave}>
+  <div class="handle chip bg-surface-700 absolute -top-6 right-0">
+    {at}
+    {#if editable}
+      <button onclick={onDelete}>&#x1F5D1;&#xFE0F;</button>
+    {/if}
+  </div>
   <section use:scroll class="py-1 message-body">
     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
     {@html renderedBody}
@@ -19,10 +41,10 @@
 </div>
 
 <style>
-  .message .timestamp {
+  .message .handle {
     display: none;
   }
-  .message:hover .timestamp {
+  .message:hover .handle {
     display: flex;
   }
   .message-body {
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index 2e8c613..83a82a9 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -16,7 +16,7 @@
   <span class="chip variant-soft sticky top-o left-0">
     @{name}:
   </span>
-  {#each messages as { at, body }}
-    <Message {at} {body} />
+  {#each messages as { id, at, body }}
+    <Message {id} {at} {body} editable={ownMessage} />
   {/each}
 </div>