feat(): show event json in modal

through a button in the event wrapper

src/lib/components/events/EventWrapper.svelte

@@ -5,13 +5,15 @@
   import { defaults as user_defaults } from '../users/type'
   import Compose from '$lib/wrappers/Compose.svelte'
   import { logged_in_user } from '$lib/stores/users'
+  import type { NDKEvent } from '@nostr-dev-kit/ndk'
 
   export let author: User = { ...user_defaults }
   export let created_at: number | undefined
   export let event_id = ''
+  export let event: NDKEvent | undefined = undefined
   export let logged_in = $logged_in_user
   let show_compose = false
-
+  let show_raw_json_modal = false
   let created_at_ago = ''
   $: created_at_ago = created_at ? dayjs(created_at * 1000).fromNow() : ''
 </script>
@@ -21,10 +23,45 @@
     <div class="flex-auto">
       <UserHeader user={author} />
     </div>
-    {#if !show_compose}
-      <div class="aling-middle mb-1 mt-1">
-        <span class="mb-1 text-xs">{created_at_ago}</span>
-        {#if logged_in}
+    <span class="m-auto text-xs">{created_at_ago}</span>
+    <div class="m-auto ml-2">
+      {#if event}
+        <div class="tooltip align-middle" data-tip="event json">
+          <button
+            on:click={() => {
+              show_raw_json_modal = true
+            }}
+            class="btn btn-xs text-neutral-content"
+          >
+            <!-- https://icon-sets.iconify.design/ph/brackets-curly-bold -->
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 256 256"
+              ><path
+                fill="currentColor"
+                d="M54.8 119.49a35.06 35.06 0 0 1-5.75 8.51a35.06 35.06 0 0 1 5.75 8.51C60 147.24 60 159.83 60 172c0 25.94 1.84 32 20 32a12 12 0 0 1 0 24c-19.14 0-32.2-6.9-38.8-20.51C36 196.76 36 184.17 36 172c0-25.94-1.84-32-20-32a12 12 0 0 1 0-24c18.16 0 20-6.06 20-32c0-12.17 0-24.76 5.2-35.49C47.8 34.9 60.86 28 80 28a12 12 0 0 1 0 24c-18.16 0-20 6.06-20 32c0 12.17 0 24.76-5.2 35.49M240 116c-18.16 0-20-6.06-20-32c0-12.17 0-24.76-5.2-35.49C208.2 34.9 195.14 28 176 28a12 12 0 0 0 0 24c18.16 0 20 6.06 20 32c0 12.17 0 24.76 5.2 35.49A35.06 35.06 0 0 0 207 128a35.06 35.06 0 0 0-5.75 8.51C196 147.24 196 159.83 196 172c0 25.94-1.84 32-20 32a12 12 0 0 0 0 24c19.14 0 32.2-6.9 38.8-20.51c5.2-10.73 5.2-23.32 5.2-35.49c0-25.94 1.84-32 20-32a12 12 0 0 0 0-24"
+              /></svg
+            ></button
+          >
+        </div>
+        {#if show_raw_json_modal}
+          <div class="modal" class:modal-open={show_raw_json_modal}>
+            <div class="text-wrap modal-box max-w-full text-xs">
+              <code class="w-full">{JSON.stringify(event.rawEvent())}</code>
+              <div class="modal-action">
+                <button
+                  class="btn btn-sm"
+                  on:click={() => (show_raw_json_modal = false)}>Close</button
+                >
+              </div>
+            </div>
+          </div>
+        {/if}
+      {/if}
+      {#if !show_compose && logged_in}
+        <div class="tooltip align-middle" data-tip="reply">
           <button
             on:click={() => {
               show_compose = true
@@ -41,9 +78,9 @@
               /></svg
             ></button
           >
-        {/if}
-      </div>
-    {/if}
+        </div>
+      {/if}
+    </div>
   </div>
   <div class="ml-11">
     <slot />

src/lib/wrappers/EventCard.svelte

@@ -25,6 +25,7 @@
   author={$author}
   created_at={event.created_at}
   event_id={event.id}
+  {event}
 >
   {#if event.kind == patch_kind}
     <Patch content={event.content} tags={event.tags} />