Add id and link to event details

src/app/components/EventInfo.svelte

@@ -1,8 +1,21 @@
 <script lang="ts">
+  import {nip19} from 'nostr-tools'
+  import {ctx} from '@welshman/lib'
+  import Icon from "@lib/components/Icon.svelte"
+  import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import {clip} from '@app/toast'
 
   export let event
+
+  const relays = ctx.app.router.Event(event).getUrls()
+  const note1 = nip19.noteEncode(event.id)
+  const npub1 = nip19.npubEncode(event.pubkey)
+  const json = JSON.stringify(event, null, 2)
+  const copyId = () => clip(note1)
+  const copyPubkey = () => clip(npub1)
+  const copyJson = () => clip(json)
 </script>
 
 <div class="column gap-4">
@@ -10,6 +23,33 @@
     <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>
+  <FieldInline>
+    <p slot="label">Event ID</p>
+    <label class="input input-bordered flex w-full items-center gap-2" slot="input">
+      <Icon icon="file" />
+      <input type="text" class="grow ellipsize" value={note1} />
+      <Button on:click={copyId} class="flex items-center">
+        <Icon icon="copy" />
+      </Button>
+    </label>
+  </FieldInline>
+  <FieldInline>
+    <p slot="label">Author Pubkey</p>
+    <label class="input input-bordered flex w-full items-center gap-2" slot="input">
+      <Icon icon="user-circle" />
+      <input type="text" class="grow ellipsize" value={npub1} />
+      <Button on:click={copyPubkey} class="flex items-center">
+        <Icon icon="copy" />
+      </Button>
+    </label>
+  </FieldInline>
+  <div class="relative">
+    <pre class="card2 card2-sm bg-alt overflow-auto"><code>{json}</code></pre>
+    <p class="absolute right-2 top-2 flex justify-between items-center flex-grow">
+      <Button on:click={copyJson} class="flex items-center btn btn-sm btn-neutral">
+        <Icon icon="copy" /> Copy
+      </Button>
+    </p>
+  </div>
   <Button class="btn btn-primary" on:click={() => history.back()}>Got it</Button>
 </div>

src/assets/icons/File.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.3929 4.05365L14.8912 4.61112L15.3929 4.05365ZM19.3517 7.61654L18.85 8.17402L19.3517 7.61654ZM21.654 10.1541L20.9689 10.4592V10.4592L21.654 10.1541ZM3.17157 20.8284L3.7019 20.2981H3.7019L3.17157 20.8284ZM20.8284 20.8284L20.2981 20.2981L20.2981 20.2981L20.8284 20.8284ZM14 21.25H10V22.75H14V21.25ZM2.75 14V10H1.25V14H2.75ZM21.25 13.5629V14H22.75V13.5629H21.25ZM14.8912 4.61112L18.85 8.17402L19.8534 7.05907L15.8947 3.49618L14.8912 4.61112ZM22.75 13.5629C22.75 11.8745 22.7651 10.8055 22.3391 9.84897L20.9689 10.4592C21.2349 11.0565 21.25 11.742 21.25 13.5629H22.75ZM18.85 8.17402C20.2034 9.3921 20.7029 9.86199 20.9689 10.4592L22.3391 9.84897C21.9131 8.89241 21.1084 8.18853 19.8534 7.05907L18.85 8.17402ZM10.0298 2.75C11.6116 2.75 12.2085 2.76158 12.7405 2.96573L13.2779 1.5653C12.4261 1.23842 11.498 1.25 10.0298 1.25V2.75ZM15.8947 3.49618C14.8087 2.51878 14.1297 1.89214 13.2779 1.5653L12.7405 2.96573C13.2727 3.16993 13.7215 3.55836 14.8912 4.61112L15.8947 3.49618ZM10 21.25C8.09318 21.25 6.73851 21.2484 5.71085 21.1102C4.70476 20.975 4.12511 20.7213 3.7019 20.2981L2.64124 21.3588C3.38961 22.1071 4.33855 22.4392 5.51098 22.5969C6.66182 22.7516 8.13558 22.75 10 22.75V21.25ZM1.25 14C1.25 15.8644 1.24841 17.3382 1.40313 18.489C1.56076 19.6614 1.89288 20.6104 2.64124 21.3588L3.7019 20.2981C3.27869 19.8749 3.02502 19.2952 2.88976 18.2892C2.75159 17.2615 2.75 15.9068 2.75 14H1.25ZM14 22.75C15.8644 22.75 17.3382 22.7516 18.489 22.5969C19.6614 22.4392 20.6104 22.1071 21.3588 21.3588L20.2981 20.2981C19.8749 20.7213 19.2952 20.975 18.2892 21.1102C17.2615 21.2484 15.9068 21.25 14 21.25V22.75ZM21.25 14C21.25 15.9068 21.2484 17.2615 21.1102 18.2892C20.975 19.2952 20.7213 19.8749 20.2981 20.2981L21.3588 21.3588C22.1071 20.6104 22.4392 19.6614 22.5969 18.489C22.7516 17.3382 22.75 15.8644 22.75 14H21.25ZM2.75 10C2.75 8.09318 2.75159 6.73851 2.88976 5.71085C3.02502 4.70476 3.27869 4.12511 3.7019 3.7019L2.64124 2.64124C1.89288 3.38961 1.56076 4.33855 1.40313 5.51098C1.24841 6.66182 1.25 8.13558 1.25 10H2.75ZM10.0298 1.25C8.15538 1.25 6.67442 1.24842 5.51887 1.40307C4.34232 1.56054 3.39019 1.8923 2.64124 2.64124L3.7019 3.7019C4.12453 3.27928 4.70596 3.02525 5.71785 2.88982C6.75075 2.75158 8.11311 2.75 10.0298 2.75V1.25Z" fill="#1C274C"/>
+<path d="M13 2.5V5C13 7.35702 13 8.53553 13.7322 9.26777C14.4645 10 15.643 10 18 10H22" stroke="#1C274C" stroke-width="1.5"/>
+</svg>

src/lib/components/FieldInline.svelte

@@ -1,9 +1,11 @@
 <div class="flex flex-col gap-2 {$$props.class}">
-  <div class="flex justify-between">
+  <div class="grid grid-cols-3">
     <label class="flex items-center gap-2 font-bold">
       <slot name="label" />
     </label>
-    <slot name="input" />
+    <div class="col-span-2">
+      <slot name="input" />
+    </div>
   </div>
   {#if $$slots.info}
     <p class="text-sm">

src/lib/components/Icon.svelte

@@ -36,6 +36,7 @@
   import CompassBig from "@assets/icons/Compass Big.svg?dataurl"
   import Danger from "@assets/icons/Danger.svg?dataurl"
   import Exit from "@assets/icons/Exit.svg?dataurl"
+  import File from "@assets/icons/File.svg?dataurl"
   import FireMinimalistic from "@assets/icons/Fire Minimalistic.svg?dataurl"
   import GallerySend from "@assets/icons/Gallery Send.svg?dataurl"
   import Ghost from "@assets/icons/Ghost.svg?dataurl"
@@ -109,6 +110,7 @@
     "compass-big": CompassBig,
     danger: Danger,
     exit: Exit,
+    file: File,
     "fire-minimalistic": FireMinimalistic,
     "gallery-send": GallerySend,
     ghost: Ghost,