From ad0b657cd57d8fa92c178b3a7e7201d80c4d3d72 Mon Sep 17 00:00:00 2001
From: Ryan Breen <ryan@breen.xyz>
Date: Tue, 14 Feb 2023 23:43:24 -0500
Subject: [PATCH] Render pretty event with nice looking transition.

---
 Shared (Extension)/Resources/event_log.html | 13 +++++++++++--
 Shared (Extension)/Resources/event_log.js   |  6 ++++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/Shared (Extension)/Resources/event_log.html b/Shared (Extension)/Resources/event_log.html
index ff23718..f0df865 100644
--- a/Shared (Extension)/Resources/event_log.html	
+++ b/Shared (Extension)/Resources/event_log.html	
@@ -106,8 +106,17 @@
   </div>
 
 
-  <template x-for="event in events">
-    <div class="mt-3" x-text="JSON.stringify(event, 2)">
+  <template x-for="(event, index) in events">
+    <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>
diff --git a/Shared (Extension)/Resources/event_log.js b/Shared (Extension)/Resources/event_log.js
index 4c9a387..88f76db 100644
--- a/Shared (Extension)/Resources/event_log.js	
+++ b/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() {