Render pretty event with nice looking transition.

Shared (Extension)/Resources/event_log.html

@@ -106,8 +106,17 @@
   </div>
 
 
-  <template x-for="event in events">
+  <template x-for="(event, index) in events">
-    <div class="mt-3" x-text="JSON.stringify(event, 2)">
+    <div class="mt-3 border-solid border border-fuchsia-700 rounded-lg">
+      <div class="select-none flex cursor-pointer text-xl" @click="selected = selected === index ? null : index">
+        <div class="flex-none w-14 p-4 font-extrabold" x-text="selected === index ? '-' : '+'"></div>
+        <div class="flex-initial w-64 p-4" x-text="event.metadata.signed_at"></div>
+        <div class="flex-initial w-64 p-4" x-text="event.metadata.host"></div>
+      </div>
+
+      <pre class="rounded-b-lg bg-slate-200" x-html="highlight(event)" x-show="selected === index"
+        x-transition:enter.opacity.delay.75ms x-transition:leave.opacity>
+      </pre>
     </div>
   </template>
 </body>

Shared (Extension)/Resources/event_log.js

@@ -1,4 +1,5 @@
 import Alpine from 'alpinejs';
+import jsonFormatHighlight from 'json-format-highlight';
 import { getPublicKey } from 'nostr-tools';
 import { getHosts, sortByIndex } from './db';
 import { getProfiles, KINDS } from './utils';
@@ -14,6 +15,7 @@ Alpine.data('eventLog', () => ({
     allProfiles: [],
     profile: '',
     pubkey: '',
+    selected: null,
 
     // date view
     fromCreatedAt: '2008-10-31',
@@ -60,6 +62,10 @@ Alpine.data('eventLog', () => ({
         this.reload();
     },
 
+    highlight(event) {
+        return jsonFormatHighlight(event);
+    },
+
     // Properties
 
     get fromTime() {