Add message deletion

src/app/components/ChannelMessage.svelte

@@ -18,9 +18,9 @@
   import Avatar from "@lib/components/Avatar.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
-  import EventInfo from "@app/components/EventInfo.svelte"
   import ChannelThread from "@app/components/ChannelThread.svelte"
   import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
+  import ChannelMessageMenuButton from "@app/components/ChannelMessageMenuButton.svelte"
   import {colors, tagRoom, deriveEvent, displayReaction} from "@app/state"
   import {publishDelete, publishReaction} from "@app/commands"
   import {pushModal} from "@app/modal"
@@ -45,8 +45,6 @@
     derived(publishStatusData, $m => Object.values($m[event.id] || {})),
   )
 
-  const showInfo = () => pushModal(EventInfo, {event})
-
   const findStatus = ($ps: PublishStatusData[], statuses: PublishStatus[]) =>
     $ps.find(({status}) => statuses.includes(status))
 
@@ -152,8 +150,6 @@
     class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all group-hover:opacity-100"
     on:click|stopPropagation>
     <ChannelMessageEmojiButton {url} {room} {event} />
-    <Button class="btn join-item btn-xs" on:click={showInfo}>
-      <Icon size={4} icon="code-2" />
-    </Button>
+    <ChannelMessageMenuButton {url} {room} {event} />
   </button>
 </button>

src/app/components/ChannelMessageMenu.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import {pubkey, publishThunk} from '@welshman/app'
+  import Button from "@lib/components/Button.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import Confirm from "@lib/components/Confirm.svelte"
+  import EventInfo from "@app/components/EventInfo.svelte"
+  import {makeDelete} from '@app/commands'
+  import {pushModal} from '@app/modal'
+
+  export let url
+  export let event
+  export let onClick
+
+  const showInfo = () => {
+    onClick()
+    pushModal(EventInfo, {event})
+  }
+
+  const showDelete = () => {
+    onClick()
+    pushModal(Confirm, {
+      title: "Delete Message",
+      subtitle: "Are you sure you want to delete this message?",
+      message: `
+        This will send a request to delete this message.
+        Be aware that not all relays may honor this request.`,
+      confirm: async () => {
+        await publishThunk({event: makeDelete({event}), relays: [url]})
+        history.back()
+      },
+    })
+  }
+</script>
+
+<ul class="menu rounded-box bg-base-100 p-2 shadow-xl whitespace-nowrap">
+  <li>
+    <Button on:click={showInfo}>
+      <Icon size={4} icon="code-2" />
+      Message Details
+    </Button>
+  </li>
+  {#if event.pubkey === $pubkey}
+    <li>
+      <Button on:click={showDelete} class="text-error">
+        <Icon size={4} icon="trash-bin-2" />
+        Delete Message
+      </Button>
+    </li>
+  {/if}
+</ul>

src/app/components/ChannelMessageMenuButton.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import {type Instance} from "tippy.js"
+  import {between} from "@welshman/lib"
+  import Icon from "@lib/components/Icon.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Tippy from "@lib/components/Tippy.svelte"
+  import ChannelMessageMenu from "@app/components/ChannelMessageMenu.svelte"
+  import {tagRoom} from "@app/state"
+  import {publishReaction} from "@app/commands"
+
+  export let url, room, event
+
+  const open = () => popover.show()
+
+  const onClick = () => popover.hide()
+
+  const onMouseMove = ({clientX, clientY}: any) => {
+    const {x, y, width, height} = popover.popper.getBoundingClientRect()
+
+    if (!between([x, x + width], clientX) || !between([y, y + height + 30], clientY)) {
+      popover.hide()
+    }
+  }
+
+  let popover: Instance
+</script>
+
+<svelte:document on:mousemove={onMouseMove} />
+
+<div class="flex">
+  <Button class="btn join-item btn-xs" on:click={open}>
+    <Icon icon="menu-dots" size={4} />
+  </Button>
+  <Tippy
+    bind:popover
+    component={ChannelMessageMenu}
+    props={{url, room, event, onClick}}
+    params={{trigger: "manual", interactive: true}} />
+</div>