From e43cc0d606956c99ab109a63866f48a67aea6515 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Wed, 6 Nov 2024 20:35:12 -0500
Subject: Deletable messages.

This also fixes some rendering jank with the message timestamp chip.
---
 ui/lib/apiServer.js                 |  4 ++++
 ui/lib/components/Message.svelte    | 32 +++++++++++++++++++++++++++-----
 ui/lib/components/MessageRun.svelte |  4 ++--
 3 files changed, 33 insertions(+), 7 deletions(-)

(limited to 'ui')

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


From a0fc6434cb1f65b558a0a94c5cdddf5d79d15206 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Mon, 11 Nov 2024 16:41:48 -0500
Subject: Don't erroneously try to get an invite ID as a property of a promise
 yielding an invite.

---
 ui/routes/(login)/invite/[invite]/+page.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'ui')

diff --git a/ui/routes/(login)/invite/[invite]/+page.svelte b/ui/routes/(login)/invite/[invite]/+page.svelte
index 18bf437..4433bd6 100644
--- a/ui/routes/(login)/invite/[invite]/+page.svelte
+++ b/ui/routes/(login)/invite/[invite]/+page.svelte
@@ -11,10 +11,10 @@
   let pending = false;
   let disabled = $derived(pending);
 
-  async function onSubmit(event) {
+  async function onSubmit(event, inviteId) {
     event.preventDefault();
     pending = true;
-    const response = await acceptInvite(data.invite.id, username, password);
+    const response = await acceptInvite(inviteId, username, password);
     if (200 <= response.status && response.status < 300) {
       username = '';
       password = '';
@@ -32,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}
-- 
cgit v1.2.3