Merge branch 'main' into wip/stylize

4 files changed, 35 insertions, 10 deletions

diff --git a/ui/lib/apiServer.js b/ui/lib/apiServer.js
index 6ada0f7..fee1a81 100644
--- a/ui/lib/apiServer.js
+++ b/ui/lib/apiServer.js
@@ -34,6 +34,10 @@ export async function postToChannel(channelId, body) {
   return apiServer.post(`/channels/${channelId}`, { body });
 }
 
+export async function deleteMessage(messageId) {
+  return apiServer.delete(`/messages/${messageId}`, {});
+}
+
 export async function createInvite() {
   return apiServer.post(`/invite`, {});
 }
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index 04cbe5b..d77c29a 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 2a88a82..581682e 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -17,7 +17,7 @@
     @{name}:
   </span>
   {#each messages as message}
-    <Message {...message} />
+    <Message {...message} editable={ownMessage} />
   {/each}
 </div>
 
diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
index 3685997..4433bd6 100644
--- a/ui/routes/(login)/invite/[invite]/+page.svelte
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -11,11 +11,10 @@
   let pending = false;
   let disabled = $derived(pending);
 
-  async function onSubmit(event) {
+  async function onSubmit(event, inviteId) {
     event.preventDefault();
     pending = true;
-    let invite = await data.invite;
-    const response = await acceptInvite(invite.id, username, password);
+    const response = await acceptInvite(inviteId, username, password);
     if (200 <= response.status && response.status < 300) {
       username = '';
       password = '';
@@ -33,5 +32,5 @@
   <div class="card m-4 p-4">
     <p>Hi there! {invite.issuer} invites you to the conversation.</p>
   </div>
-  <LogIn {disabled} bind:username bind:password onsubmit={onSubmit} />
+  <LogIn {disabled} bind:username bind:password onsubmit={(event) => onSubmit(event, invite.id)} />
 {/await}