Make event details copy json nicer

src/app/shared/NoteActions.svelte

@@ -47,11 +47,13 @@
     isChildOf,
   } from "@welshman/util"
   import {fly} from "src/util/transition"
+  import {copyToClipboard} from "src/util/html"
   import {isLike, noteKinds} from "src/util/nostr"
   import {formatSats, pluralize, quantify} from "src/util/misc"
   import {browser} from "src/partials/state"
   import {showInfo} from "src/partials/Toast.svelte"
   import Icon from "src/partials/Icon.svelte"
+  import Field from "src/partials/Field.svelte"
   import Anchor from "src/partials/Anchor.svelte"
   import WotScore from "src/partials/WotScore.svelte"
   import Popover from "src/partials/Popover.svelte"
@@ -87,7 +89,6 @@
   export let onReplyStart: () => void
   export let showHidden = false
 
-  const signedEvent = asSignedEvent(event as any)
   const nevent = nip19.neventEncode({
     id: event.id,
     kind: event.kind,
@@ -127,6 +128,11 @@
 
   const report = () => router.at("notes").of(event.id).at("report").open()
 
+  const copyJson = () => {
+    copyToClipboard(json)
+    showInfo(`Event JSON copied to clipboard!`)
+  }
+
   const deleteNote = () =>
     router.at("notes").of(event.id).at("delete").qp({kind: event.kind}).open()
 
@@ -189,6 +195,7 @@
   let actions = []
   let handlersShown = false
 
+  $: json = JSON.stringify(event, null, 2)
   $: lnurl = getLnUrl(event.tags?.find(nthEq(0, "zap"))?.[1] || "")
   $: zapper = lnurl ? deriveZapper(lnurl) : deriveZapperForPubkey(event.pubkey)
   $: muted = $userMutes.has(event.id)
@@ -468,7 +475,15 @@
       <h1 class="staatliches text-2xl">Details</h1>
       <CopyValue label="Link" value={toNostrURI(nevent)} />
       <CopyValue label="Event ID" encode={nip19.noteEncode} value={event.id} />
-      <CopyValue label="Event JSON" value={JSON.stringify(signedEvent)} />
+      <Field>
+        <p slot="label">Event JSON</p>
+        <div class="relative rounded bg-tinted-700 p-1">
+          <pre class="overflow-auto text-xs"><code>{json}</code></pre>
+          <Anchor circle class="absolute right-1 top-1 bg-neutral-800" on:click={copyJson}>
+            <i class="fa fa-copy m-2" />
+          </Anchor>
+        </div>
+      </Field>
     {/if}
   </Modal>
 {/if}