Add info pane for events

src/app/components/ChannelMessage.svelte

@@ -17,7 +17,9 @@
   import {slideAndFade} from '@lib/transition'
   import Icon from "@lib/components/Icon.svelte"
   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 {colors, tagRoom, deriveEvent, displayReaction} from "@app/state"
@@ -41,6 +43,8 @@
   const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
   const ps = throttled(300, 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))
 
@@ -146,8 +150,8 @@
     class="join absolute -top-2 right-0 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">
-      <Icon icon="menu-dots" size={4} />
-    </button>
+    <Button class="btn join-item btn-xs" on:click={showInfo}>
+      <Icon size={4} icon="code-2" />
+    </Button>
   </button>
 </button>

src/app/components/ChatMessage.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import {derived} from "svelte/store"
+  import {type Instance} from "tippy.js"
   import {hash, uniqBy, groupBy, now} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {deriveEvents, throttled} from "@welshman/store"
@@ -15,11 +16,12 @@
   import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
   import {repository} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
+  import Tippy from "@lib/components/Tippy.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
-  import ChatMessageEmojiButton from "@app/components/ChatMessageEmojiButton.svelte"
+  import ChatMessageMenu from "@app/components/ChatMessageMenu.svelte"
   import {colors, displayReaction} from "@app/state"
   import {pushDrawer} from "@app/modal"
   import {makeDelete, makeReaction, sendWrapped} from "@app/commands"
@@ -47,6 +49,17 @@
     await sendWrapped({template, pubkeys})
   }
 
+  const togglePopover = () => {
+    if (popoverIsVisible) {
+      popover.hide()
+    } else {
+      popover.show()
+    }
+  }
+
+  let popover: Instance
+  let popoverIsVisible = false
+
   $: isPublished = findStatus($ps, [PublishStatus.Success])
   $: isPending = findStatus($ps, [PublishStatus.Pending]) && event.created_at > now() - 30
   $: failure =
@@ -54,48 +67,69 @@
 </script>
 
 <div
-  class="group chat relative flex w-full flex-col gap-1 p-2 text-left"
+  class="chat flex gap-1 items-center group justify-end"
   class:chat-start={event.pubkey !== $pubkey}
+  class:flex-row-reverse={event.pubkey !== $pubkey}
   class:chat-end={event.pubkey === $pubkey}>
-  <div class="chat-bubble mx-1 max-w-sm">
-    <div class="flex items-start gap-2 w-full">
-      {#if showPubkey}
-        <Button on:click={showProfile}>
-          <Avatar
-            src={$profile?.picture}
-            class="border border-solid border-base-content"
-            size={10} />
-        </Button>
-      {/if}
-      <div class="-mt-1 flex-grow pr-1">
+  <Tippy
+    bind:popover
+    component={ChatMessageMenu}
+    props={{event, pubkeys, popover}}
+    params={{
+      interactive: true,
+      trigger: "manual",
+      onShow() {
+        popoverIsVisible = true
+      },
+      onHidden() {
+        popoverIsVisible = false
+      },
+    }}>
+    <Button class="group-hover:opacity-100 opacity-0 transition-all" on:click={togglePopover}>
+      <Icon icon="menu-dots" size={4} />
+    </Button>
+  </Tippy>
+  <div class="flex flex-col">
+    <div class="chat-bubble mx-1 max-w-sm">
+      <div class="flex items-start gap-2 w-full">
         {#if showPubkey}
-          <div class="flex items-center gap-2">
-            <Button class="text-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
-              {$profileDisplay}
-            </Button>
-            <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
-          </div>
+          <Button on:click={showProfile}>
+            <Avatar
+              src={$profile?.picture}
+              class="border border-solid border-base-content"
+              size={10} />
+          </Button>
         {/if}
-        <div class="text-sm">
-          <Content showEntire {event} />
-          {#if isPending}
-            <span class="flex-inline ml-1 gap-1">
-              <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
-              <span class="opacity-50">Sending...</span>
-            </span>
-          {:else if failure}
-            <span
-              class="flex-inline tooltip ml-1 cursor-pointer gap-1"
-              data-tip="{failure.message} ({displayRelayUrl(failure.url)})">
-              <Icon icon="danger" class="translate-y-px" size={3} />
-              <span class="opacity-50">Failed to send!</span>
-            </span>
+        <div class="-mt-1 flex-grow pr-1">
+          {#if showPubkey}
+            <div class="flex items-center gap-2">
+              <Button class="text-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
+                {$profileDisplay}
+              </Button>
+              <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
+            </div>
           {/if}
+          <div class="text-sm">
+            <Content showEntire {event} />
+            {#if isPending}
+              <span class="flex-inline ml-1 gap-1">
+                <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
+                <span class="opacity-50">Sending...</span>
+              </span>
+            {:else if failure}
+              <span
+                class="flex-inline tooltip ml-1 cursor-pointer gap-1"
+                data-tip="{failure.message} ({displayRelayUrl(failure.url)})">
+                <Icon icon="danger" class="translate-y-px" size={3} />
+                <span class="opacity-50">Failed to send!</span>
+              </span>
+            {/if}
+          </div>
         </div>
       </div>
     </div>
     {#if $reactions.length > 0 || $zaps.length > 0}
-      <div class="ml-12 text-xs">
+      <div class="-mt-4 text-xs z-feature relative flex justify-end">
         {#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]}
           {@const isOwn = events.some(e => e.pubkey === $pubkey)}
           {@const onClick = () => onReactionClick(content, events)}
@@ -114,12 +148,5 @@
         {/each}
       </div>
     {/if}
-    <Button
-      class="join absolute -bottom-5 right-0 border border-solid border-neutral text-xs">
-      <ChatMessageEmojiButton {event} {pubkeys} />
-      <div class="btn join-item btn-xs">
-        <Icon icon="menu-dots" size={4} />
-      </div>
-    </Button>
   </div>
 </div>

src/app/components/ChatMessageMenu.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import Icon from '@lib/components/Icon.svelte'
+  import Button from '@lib/components/Button.svelte'
+  import ChatMessageEmojiButton from "@app/components/ChatMessageEmojiButton.svelte"
+  import EventInfo from '@app/components/EventInfo.svelte'
+  import {pushModal} from '@app/modal'
+
+  export let event
+  export let pubkeys
+  export let popover
+
+  const showInfo = () => {
+    popover.hide()
+    pushModal(EventInfo, {event})
+  }
+</script>
+
+<div class="join border border-solid border-neutral text-xs">
+  <ChatMessageEmojiButton {event} {pubkeys} />
+  <Button class="btn join-item btn-xs" on:click={showInfo}>
+    <Icon size={4} icon="code-2" />
+  </Button>
+</div>

src/app/components/EventInfo.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import Button from '@lib/components/Button.svelte'
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+
+  export let event
+</script>
+
+<div class="column gap-4">
+  <ModalHeader>
+    <div slot="title">Event Details</div>
+    <div slot="info">
+      The full details of this event are shown below.
+    </div>
+  </ModalHeader>
+  <pre class="overflow-auto"><code>{JSON.stringify(event, null, 2)}</code></pre>
+  <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
+</div>

src/assets/icons/Code.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 7.82959L18.6965 9.35641C20.239 10.7447 21.0103 11.4389 21.0103 12.3296C21.0103 13.2203 20.239 13.9145 18.6965 15.3028L17 16.8296" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M13.9868 5L12 12.4149L10.0132 19.8297" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M6.99999 7.82959L5.30352 9.35641C3.76096 10.7447 2.98969 11.4389 2.98969 12.3296C2.98969 13.2203 3.76096 13.9145 5.30352 15.3028L6.99999 16.8296" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/lib/components/Tippy.svelte

@@ -19,7 +19,11 @@
     if (element) {
       const target = document.createElement("div")
 
-      popover = tippy(element, {content: target, animation: "shift-away", ...params})
+      popover = tippy(element, {
+        content: target,
+        animation: "shift-away",
+        ...params,
+      })
 
       instance = new component({target, props})