From fccc08a0eb3916593c5e21589493dfdb34719f9f Mon Sep 17 00:00:00 2001
From: Believethehype <tobias_baur@yahoo.com>
Date: Sat, 20 Jan 2024 22:38:53 +0100
Subject: [PATCH] noogle: major update, nip89, login, unified search.

---
 tests/gui/vuejs/noogle/src/app.css            |   9 +-
 .../vuejs/noogle/src/components/AboutPage.vue |  98 ++++++++++++-
 .../vuejs/noogle/src/components/Donate.vue    |  10 +-
 .../gui/vuejs/noogle/src/components/Home.vue  |   2 +-
 .../gui/vuejs/noogle/src/components/Nip07.vue |  91 +++++++++++-
 .../gui/vuejs/noogle/src/components/Nip89.vue | 136 +++++++++++-------
 .../vuejs/noogle/src/components/Search.vue    |  36 ++---
 ...{ResultTable.vue => SearchResultTable.vue} |  26 ++--
 .../src/components/data/deadnip89s.json       |  72 ++++++++++
 tests/gui/vuejs/noogle/src/store.js           |   4 +
 10 files changed, 395 insertions(+), 89 deletions(-)
 rename tests/gui/vuejs/noogle/src/components/{ResultTable.vue => SearchResultTable.vue} (71%)
 create mode 100644 tests/gui/vuejs/noogle/src/components/data/deadnip89s.json

diff --git a/tests/gui/vuejs/noogle/src/app.css b/tests/gui/vuejs/noogle/src/app.css
index a4f2e6b..5458f15 100644
--- a/tests/gui/vuejs/noogle/src/app.css
+++ b/tests/gui/vuejs/noogle/src/app.css
@@ -21,9 +21,16 @@ a,
   transition: 0.4s;
   padding: 3px;
 }
+
+.purple {
+  text-decoration: none;
+  color: #8453f1;
+  transition: 0.4s;
+  padding: 3px;
+}
 .menu {
 color: white;
-    @apply btn bg-transparent border-transparent;
+    @apply btn bg-transparent border-transparent tracking-wide;
 
   }
 
diff --git a/tests/gui/vuejs/noogle/src/components/AboutPage.vue b/tests/gui/vuejs/noogle/src/components/AboutPage.vue
index 80ecc82..90929b7 100644
--- a/tests/gui/vuejs/noogle/src/components/AboutPage.vue
+++ b/tests/gui/vuejs/noogle/src/components/AboutPage.vue
@@ -1,4 +1,83 @@
 <template>
+  <div class="max-w-5xl mx-auto flex flex-col gap-8">
+    <div class="flex flex-row gap-6 items-center">
+        <Logo />
+        <div class="flex flex-col gap-2">
+            <h1 class="text-7xl font-black tracking-wide">About</h1>
+           <!-- <div class="text-lg text-nostr">
+                There are many things that make using and working with DVMs a bit of a magical experience.
+            </div> -->
+        </div>
+    </div>
+<br><br>
+    <!-- <div class="grid grid-cols-2 gap-6">
+        <div class="card card-compact rounded-box bg-black">
+            <div class="card-body !text-base">
+                <div class="card-title text-base-100-content font-bold">
+                    Global improvements
+                </div>
+
+                <p>Once a Nostr app supports DVMs that means that they get immediate access to all features,
+                    algorithms, and crazy inventions all DVMs support.</p>
+
+                <p>
+                    Don't like your client's default <em>Trending</em> algorithm? Pick from hundreds of different
+    algorithms. Your Highlighter client doesn't work well when trying to read an obscure PDF?
+    Use a DVM that has better support for it.
+                </p>
+
+                <p>
+                    You say the spam filtering in your client is too aggressive? or not aggressive enough? Just choose
+    from a different spam-filtering DVM!
+                </p>
+            </div>
+        </div>
+
+        <div class="card card-compact rounded-box bg-black">
+            <div class="card-body !text-base">
+                <div class="card-title text-base-100-content font-bold">
+                    Long-tail
+                </div>
+
+                <p>Because discoverability of these algorithms is solved by the very use of Nostr, we can easily imagine
+                    a future where there are thousands of very specific, very niche and abundantly weird DVMs providing all
+                    kinds of obscure functionalities.</p>
+
+                <p>
+                    Even if a DVM only had a handful of users, it would still be worth it for its users and for the DVM.
+                </p>
+            </div>
+        </div>
+
+        <div class="card card-compact rounded-box bg-black">
+            <div class="card-body !text-base">
+                <div class="card-title text-base-100-content font-bold">
+                    Reusable results
+                </div>
+
+                <p>
+                    Every time a Nostr client autotranslates a note, it pings a specific API endpoint to get the
+                    result translated.
+                </p>
+
+                <p>
+                    Over, and over. The same text being translated by each user.
+                </p>
+
+                <p>
+                    Since Data Vending Machine results are public by default, once a note has been translated,
+                    all clients can choose to reuse the same translation.
+                </p>
+            </div>
+        </div>
+    </div>-->
+</div>
+
+
+
+
+
+
   <div className="chat chat-start">
   <div className="chat-image avatar">
     <div className="w-10 rounded-full">
@@ -15,13 +94,30 @@
   </div>
   <div className="chat-bubble">This Demo Application uses a Kind 5302 event to ask DVMs to search for content on the Nostr.</div>
 </div>
+
   <div className="chat chat-start">
   <div className="chat-image avatar">
     <div className="w-10 rounded-full">
       <img alt="Tailwind CSS chat bubble component" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
     </div>
   </div>
-  <div className="chat-bubble">This page then combines all the results.</div>
+  <div className="chat-bubble">You can add from:npub.... to your search to filter content for a specific user.</div>
+</div>
+    <div className="chat chat-start">
+  <div className="chat-image avatar">
+    <div className="w-10 rounded-full">
+      <img alt="Tailwind CSS chat bubble component" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+    </div>
+  </div>
+  <div className="chat-bubble">When you're logged in you can add from:me to search content from yourself</div>
+</div>
+  <div className="chat chat-start">
+  <div className="chat-image avatar">
+    <div className="w-10 rounded-full">
+      <img alt="Tailwind CSS chat bubble component" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
+    </div>
+  </div>
+  <div className="chat-bubble">This page then combines all the results from available search dvms.</div>
 </div>
 <div className="chat chat-start">
   <div className="chat-image avatar">
diff --git a/tests/gui/vuejs/noogle/src/components/Donate.vue b/tests/gui/vuejs/noogle/src/components/Donate.vue
index 8cc3b5c..38d25d8 100644
--- a/tests/gui/vuejs/noogle/src/components/Donate.vue
+++ b/tests/gui/vuejs/noogle/src/components/Donate.vue
@@ -1,18 +1,22 @@
 <script>
 import { requestProvider } from "webln";
+import miniToastr from "mini-toastr";
+import VueNotifications from "vue-notifications";
 export default {
 
   methods: {
     async zap() {
       let webln;
+      let invoice = await this.createBolt11Lud16("hype@bitcoinfixesthis.org", 1000)
       try {
         webln = await requestProvider();
       } catch (err) {
-        // Handle users without WebLN
+       await navigator.clipboard.writeText(invoice)
+       miniToastr.showMessage("", "Copied Invoice to clipboard", VueNotifications.types.info)
       }
 
       if (webln) {
-        let invoice = await this.createBolt11Lud16("hype@bitcoinfixesthis.org", 1000)
+
         console.log(invoice)
         let response = await webln.sendPayment(invoice)
         console.log(response)
@@ -63,7 +67,7 @@ Donate</button>
 
 
 .v-Button {
- @apply bg-black hover:bg-amber-400 focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
+ @apply  tracking-wide bg-black hover:bg-amber-400 focus:ring-white mb-2 inline-flex flex-none items-center rounded-lg border border-transparent px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900;
    height: 24px;
 
 
diff --git a/tests/gui/vuejs/noogle/src/components/Home.vue b/tests/gui/vuejs/noogle/src/components/Home.vue
index 456d86e..07bcb5e 100644
--- a/tests/gui/vuejs/noogle/src/components/Home.vue
+++ b/tests/gui/vuejs/noogle/src/components/Home.vue
@@ -1,6 +1,6 @@
 <script>
 import Search from "@/components/Search.vue";
-import ResultsTable from "@/components/ResultTable.vue";
+import ResultsTable from "@/components/SearchResultTable.vue";
 import Nip07 from "@/components/Nip07.vue";
 import Donate from "@/components/Donate.vue";
 
diff --git a/tests/gui/vuejs/noogle/src/components/Nip07.vue b/tests/gui/vuejs/noogle/src/components/Nip07.vue
index 1b82cd6..7153818 100644
--- a/tests/gui/vuejs/noogle/src/components/Nip07.vue
+++ b/tests/gui/vuejs/noogle/src/components/Nip07.vue
@@ -14,7 +14,7 @@
         <div className="card-body">
           <h3 className="card-title">Nip07 Login</h3>
           <p>Use a Browser Nip07 Extension like getalby or nos2x to login</p>
-          <button className="btn" @click="sign_in()">Nip07 Sign in</button>
+          <button className="btn" @click="sign_in_nip07()">Nip07 Sign in</button>
         </div>
       </div>
     </div>
@@ -52,7 +52,15 @@ export default {
   async mounted() {
      try{
        //let testsginer = new Nip07Signer()
-      await this.sign_in()
+
+      if (localStorage.getItem('nostr-key-method') === 'nip07')
+      {
+         await this.sign_in_nip07()
+      }
+      else {
+        await this.sign_in_anon()
+      }
+
      }
     catch (error){
        console.log(error);
@@ -62,7 +70,72 @@ export default {
   },
 
   methods: {
-    async sign_in() {
+    async sign_in_anon() {
+
+      try {
+
+        await loadWasmAsync();
+
+             try {
+                initLogger(LogLevel.debug());
+            } catch (error) {
+                console.log(error);
+            }
+
+        let keys = Keys.fromSkStr("ece3c0aa759c3e895ecb3c13ab3813c0f98430c6d4bd22160b9c2219efc9cf0e")
+        this.signer = ClientSigner.keys(keys) //TODO store keys
+
+
+
+
+        let database =  await NostrDatabase.open("test.db")
+        let client = new ClientBuilder().database(database).signer(this.signer).build()
+
+
+        await client.addRelay("wss://relay.damus.io");
+        await client.addRelay("wss://nos.lol");
+        await client.addRelay("wss://relay.f7z.io")
+        await client.addRelay("wss://pablof7z.nostr1.com")
+        await client.addRelay("wss://relay.nostr.net")
+        await client.addRelay("wss://relay.nostr.band");
+        await client.addRelay("wss://nostr-pub.wellorder.net")
+
+        const pubkey =  keys.publicKey
+        await client.connect();
+
+        /*
+        const filter = new Filter().kind(6302).limit(20)
+        await client.reconcile(filter);
+        const filterl = new Filter().author(pubkey)
+        let test = await client.database.query([filterl])
+        for (let ev of test){
+          console.log(ev.asJson())
+        }*/
+
+
+
+
+        store.commit('set_client', client)
+        store.commit('set_pubkey', pubkey)
+        store.commit('set_hasEventListener', false)
+        localStorage.setItem('nostr-key-method', "anon")
+        localStorage.setItem('nostr-key', "")
+        console.log("Client connected")
+
+
+
+        //await this.get_user_info(pubkey)
+        //miniToastr.showMessage("Login successful!", "Logged in as " + this.current_user, VueNotifications.types.success)
+
+
+
+
+
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    async sign_in_nip07() {
 
       try {
 
@@ -90,13 +163,13 @@ export default {
         let client = new ClientBuilder().database(database).signer(this.signer).build()
 
 
-        //await client.addRelay("wss://relay.damus.io");
+        await client.addRelay("wss://relay.damus.io");
         await client.addRelay("wss://nos.lol");
         await client.addRelay("wss://relay.f7z.io")
         await client.addRelay("wss://pablof7z.nostr1.com")
         await client.addRelay("wss://relay.nostr.net")
-        //await client.addRelay("wss://relay.nostr.band");
-        //await client.addRelay("wss://nostr-pub.wellorder.net")
+        await client.addRelay("wss://relay.nostr.band");
+        await client.addRelay("wss://nostr-pub.wellorder.net")
 
         const pubkey = await nip07_signer.getPublicKey();
         await client.connect();
@@ -115,6 +188,9 @@ export default {
 
         store.commit('set_client', client)
         store.commit('set_pubkey', pubkey)
+        store.commit('set_hasEventListener', false)
+        localStorage.setItem('nostr-key-method', "nip07")
+        localStorage.setItem('nostr-key', "")
         console.log("Client connected")
 
 
@@ -155,6 +231,9 @@ export default {
 
     async sign_out(){
       this.current_user = ""
+      localStorage.setItem('nostr-key-method', "")
+      localStorage.setItem('nostr-key', "")
+      await this.sign_in_anon()
     }
   },
 };
diff --git a/tests/gui/vuejs/noogle/src/components/Nip89.vue b/tests/gui/vuejs/noogle/src/components/Nip89.vue
index 881d852..9f9157e 100644
--- a/tests/gui/vuejs/noogle/src/components/Nip89.vue
+++ b/tests/gui/vuejs/noogle/src/components/Nip89.vue
@@ -1,92 +1,124 @@
 <template>
 
-    <div class="max-w-xs relative space-y-3">
-
-      <ul>
-        <div className="card w-96 bg-base-100 shadow-xl"  v-for="dvm in Nip89DVMS"
+  <div class="max-w-5xl relative space-y-3">
+    <div v-if="store.state.nip89dvms.length === 0">
+      <p>Loading Nip89s.. </p>
+       <span className="loading loading-dots loading-lg"  ></span>
+    </div>
+    <div class="grid grid-cols-3 gap-6">
+        <div className="card w-70 bg-base-100 shadow-xl"  v-for="dvm in store.state.nip89dvms"
             :key="dvm.name">
         <figure><img :src="dvm.image" alt="DVM Picture" /></figure>
         <div className="card-body">
           <h2 className="card-title">{{ dvm.name }}</h2>
           <p>  {{ dvm.about }}</p>
+           <p>Kind: {{ dvm.kind }}</p>
           <div className="card-actions justify-end">
-            <button className="btn btn-primary">Buy Now</button>
+        <div className="tooltip" :data-tip="dvm.event">
+         <button className="btn" @click="copyDoiToClipboard(dvm.event);">Copy Event</button>
+        </div>
           </div>
         </div>
+          <br>
       </div>
-      </ul>
+            </div>
+
+
 
-      <p
-        v-if="selectedCountry"
-        class="text-lg pt-2 absolute"
-      >
-        You have selected: <span class="font-semibold">{{ selectedCountry }}</span>
-      </p>
     </div>
 
 </template>
 
 <script>
-import countries from './data/countries.json'
-import {ref, computed, onMounted} from 'vue'
+
 import '../app.css'
 import store from "@/store.js";
-import {Filter} from "@rust-nostr/nostr-sdk";
+import {ClientBuilder, ClientSigner, Filter, Keys, NostrDatabase, Tag} from "@rust-nostr/nostr-sdk";
+import miniToastr from "mini-toastr";
+import VueNotifications from "vue-notifications";
+
+import deadnip89s from './data/deadnip89s.json'
 
 async function getnip89s(){
 
-        let client = store.state.client
-        const filter = new Filter().kind(31990)
-        let evts = await client.getEventsOf([filter], 10)
-        for (const entry of evts){
-          console.log(entry.content)
-          try {
-              let jsonentry = JSON.parse(entry.content)
-                if (jsonentry.picture){
-                  jsonentry.image = jsonentry.picture
-                }
-             nip89dvms.push(jsonentry);
-          }
-          catch (error){
-            console.log(error)
-          }
+        //let keys = Keys.generate()
+        let keys = Keys.fromSkStr("ece3c0aa759c3e895ecb3c13ab3813c0f98430c6d4bd22160b9c2219efc9cf0e")
 
+        let signer = ClientSigner.keys(keys) //TODO store keys
+        let database =  await NostrDatabase.open("nip89.db")
+        let client = new ClientBuilder().database(database).signer(signer).build()
+        //await client.addRelay("wss://nos.lol");
+        await client.addRelay("wss://relay.f7z.io")
+        await client.addRelay("wss://pablof7z.nostr1.com")
+        //await client.addRelay("wss://relay.nostr.net")
+        await client.addRelay("wss://relay.nostr.band");
+        //await client.addRelay("wss://nostr-pub.wellorder.net")
+        await client.connect();
+
+
+        const filter = new Filter().kind(31990)
+        //await client.reconcile(filter);
+        //const filterl = new Filter().kind(31990)
+        //let evts = await client.database.query([filterl])
+        let evts = await client.getEventsOf([filter], 3)
+        for (const entry of evts){
+          for (const tag in entry.tags){
+            if (entry.tags[tag].asVec()[0] === "k")
+              console.log(entry.id.toHex())
+              if(entry.tags[tag].asVec()[1] >= 5000 && entry.tags[tag].asVec()[1] <= 5999 &&  deadnip89s.filter(i => i.id === entry.id.toHex() ).length === 0) {   // blocklist.indexOf(entry.id.toHex()) < 0){
+
+                console.log(entry.tags[tag].asVec()[1])
+
+                try {
+
+                    let jsonentry = JSON.parse(entry.content)
+                      if (jsonentry.picture){
+                        jsonentry.image = jsonentry.picture
+                      }
+                      jsonentry.event = entry.asJson()
+                    jsonentry.kind = entry.tags[tag].asVec()[1]
+                   nip89dvms.push(jsonentry);
+                }
+                catch (error){
+                  console.log(error)
+                }
+
+              }
+           }
         }
+        store.commit('set_nip89dvms', nip89dvms)
 
         return nip89dvms
 
+
     }
 let nip89dvms = []
+
+
 export default {
+  computed: {
+    store() {
+      return store
+    }
+  },
+  methods: {
+  copyDoiToClipboard (doi) {
+    navigator.clipboard.writeText(doi)
+    miniToastr.showMessage("", "Copied Nip89 Event to clipboard", VueNotifications.types.info)
+
+  },
+  },
+
 
 async mounted(){
-      nip89dvms = await getnip89s()
+      await getnip89s()
+
+
 
     },
 
   setup() {
 
-
-
-
-
-  const Nip89DVMS = computed(() => {
-      console.log(nip89dvms)
-      return nip89dvms;
-    });
-
-    const selectCountry = (country) => {
-      selectedCountry.value = country
-    }
-
-    let selectedCountry = ref('')
-
-    return {
-      countries,
-      Nip89DVMS,
-      selectCountry,
-      selectedCountry
-    }
   }
 }
 </script>
\ No newline at end of file
diff --git a/tests/gui/vuejs/noogle/src/components/Search.vue b/tests/gui/vuejs/noogle/src/components/Search.vue
index 5405b87..08dff21 100644
--- a/tests/gui/vuejs/noogle/src/components/Search.vue
+++ b/tests/gui/vuejs/noogle/src/components/Search.vue
@@ -33,8 +33,11 @@ async function send_search_request(message) {
 
         // tags
 
-        for (const word of taggedUsersFrom) {
+        for (let word of taggedUsersFrom) {
           search = search.replace(word, "");
+          if(word === "me"){
+            word = store.state.pubkey.toBech32()
+          }
           const userPubkey = PublicKey.fromBech32(word.replace("@", "")).toHex()
           const pTag = Tag.parse(["p", userPubkey]);
           users.push(pTag.asVec());
@@ -79,7 +82,14 @@ async function get_user_infos(pubkeys){
         let evts = await client.getEventsOf([profile_filter], 10)
         console.log("PROFILES:" + evts.length)
         for (const entry of evts){
-          profiles.push({profile: JSON.parse(entry.content), author: entry.author.toHex(), createdAt: entry.createdAt});
+          try{
+            let contentjson = JSON.parse(entry.content)
+            profiles.push({profile: contentjson, author: entry.author.toHex(), createdAt: entry.createdAt});
+          }
+          catch(error){
+            console.log("error")
+          }
+
         }
 
         return profiles
@@ -97,6 +107,9 @@ async function  listen() {
     const handle = {
         // Handle event
         handleEvent: async (relayUrl, event) => {
+              if (store.state.hasEventListener === false){
+                return true
+              }
             console.log("Received new event from", relayUrl);
             if (event.kind === 7000) {
                 try {
@@ -136,8 +149,9 @@ async function  listen() {
                       let highlighterurl = "https://highlighter.com/a/" + bech32id
                       let njumpurl = "https://njump.me/" + bech32id
                       let nostrudelurl = "https://nostrudel.ninja/#/n/" + evt.id.toBech32()
-                      items.push({ content: evt.content, author: name, authorurl: "https://njump.me/" + evt.author.toBech32(), links: {"highlighter": highlighterurl, "njump": njumpurl, "nostrudel": nostrudelurl} , avatar: picture,  indicator: {"time": evt.createdAt.toHumanDatetime()}})
-
+                      if (!items.find(e => e.id === evt.id)) {
+                          items.push({id:evt.id,  content: evt.content, author: name, authorurl: "https://njump.me/" + evt.author.toBech32(), links: {"highlighter": highlighterurl, "njump": njumpurl, "nostrudel": nostrudelurl} , avatar: picture,  indicator: {"time": evt.createdAt.toHumanDatetime()}})
+                      }
 
 
                 }
@@ -171,12 +185,8 @@ defineProps({
   <div class="greetings">
     <img alt="Nostr logo" class="logo" src="../assets/nostr-purple.svg" />
 <br>
-      <h1
-				class="text-center font-thin text-5xl md:text-6xl font-extrabold tracking-wider sm:text-start sm:text-6xl lg:text-8xl">
-				<span class="bg">Noogle</span>
-
-			</h1>
-       <h2 class="text-base-200-content text-center text-2xl font-thin">
+      <h1 class="text-7xl font-black tracking-wide">Noogle</h1>
+       <h2 class="text-base-200-content text-center tracking-wide text-2xl font-thin">
 				Search the Nostr with Data Vending Machines
 			</h2>
 
@@ -213,13 +223,7 @@ defineProps({
   background: black;
 }
 
-h1 {
 
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
 
 .logo {
      display: flex;
diff --git a/tests/gui/vuejs/noogle/src/components/ResultTable.vue b/tests/gui/vuejs/noogle/src/components/SearchResultTable.vue
similarity index 71%
rename from tests/gui/vuejs/noogle/src/components/ResultTable.vue
rename to tests/gui/vuejs/noogle/src/components/SearchResultTable.vue
index 804e5fe..f87ae2a 100644
--- a/tests/gui/vuejs/noogle/src/components/ResultTable.vue
+++ b/tests/gui/vuejs/noogle/src/components/SearchResultTable.vue
@@ -5,16 +5,24 @@
    <template #item-content="{ content, author, authorurl, avatar}">
    <div class="playeauthor-wrapper">
       <img class="avatar" :src="avatar" alt="" />
-         <a :href="authorurl" target="_blank">{{ author }}</a> </div>
+         <a class="purple" :href="authorurl" target="_blank">{{ author }}</a> </div>
      <p>{{content}}</p>
      </template>
     <template #expand="item">
       <div style="padding: 15px; text-align: left;" >
-          <a :href="item.links.njump" target="_blank">NJump</a>
-          <a :href="item.links.highlighter" target="_blank">Highlighter</a>
-          <a :href="item.links.nostrudel" target="_blank">Nostrudel</a>
+          <a class="menu" :href="item.links.njump" target="_blank">NJump</a>
+          <a class="menu" :href="item.links.highlighter" target="_blank">Highlighter</a>
+          <a  class="menu":href="item.links.nostrudel" target="_blank">Nostrudel</a>
       </div>
     </template>
+     <template #item-indicator.time="{ indicator}">
+
+        <div className="tooltip" :data-tip="indicator.time">
+          {{indicator.time.split("T")[1].split("Z")[0].trim()}}<br>
+          {{indicator.time.split("T")[0].split("-")[2].trim()}}.{{indicator.time.split("T")[0].split("-")[1].trim()}}.{{indicator.time.split("T")[0].split("-")[0].trim().slice(2)}}
+        </div>
+
+     </template>
 
       </EasyDataTable>
 </template>
@@ -39,7 +47,7 @@ const headers: Header[] = [
   cursor: pointer;
 }
 .playeauthor-wrapper {
-  padding: 5px;
+  padding: 6px;
   display: flex;
   align-items: center;
   justify-items: center;
@@ -51,11 +59,11 @@ const headers: Header[] = [
   height: 30px;
   border-radius: 50%;
   object-fit: cover;
-  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 10%);
+  box-shadow: inset 0 4px 4px 0 rgb(0 0 0 / 10%);
 }
 .customize-table {
-  --easy-table-border: 1px solid #445269;
-  --easy-table-row-border: 1px solid #445269;
+  --easy-table-border: 1px solid #000000;
+  --easy-table-row-border: 1px solid #000000;
 
   --easy-table-header-font-size: 14px;
   --easy-table-header-height: 50px;
@@ -72,7 +80,7 @@ const headers: Header[] = [
   --easy-table-body-row-height: 50px;
   --easy-table-body-row-font-size: 14px;
 
-  --easy-table-body-row-hover-font-color: #2d3a4f;
+  --easy-table-body-row-hover-font-color: #FFFFFF;
   --easy-table-body-row-hover-background-color: #242424;
 
   --easy-table-body-item-padding: 10px 15px;
diff --git a/tests/gui/vuejs/noogle/src/components/data/deadnip89s.json b/tests/gui/vuejs/noogle/src/components/data/deadnip89s.json
new file mode 100644
index 0000000..4d78374
--- /dev/null
+++ b/tests/gui/vuejs/noogle/src/components/data/deadnip89s.json
@@ -0,0 +1,72 @@
+[
+  {"id": "766809b054c9b772652377ef968625509a7e92c56669e302940ac08c8c3d0f96"},
+  {"id": "7fb49260fbd9148e08672b8339bca6c5a866cf7aaa03051898ed02f6d85109b2"},
+  {"id": "edd11ae518e4f59a25472d5ef869f114c8e5399723fd7bed32389eef37a6ec0c"},
+  {"id": "b6e93a7185036b69b04a55665409957ba4d9fb2a944e43c690e6f4d64678c43f"},
+  {"id": "be40dfce56ff47bce6cfa2073dd6c6d88e53d44d7e1178cc30ebb4ca991de4e4"},
+  {"id": "72d86d5428049c74f94ac335cd662772f580fa27497398dd06b443653a16b4ad"},
+  {"id": "0e2b90ea31426f03f9ccfff6093aacde0322a2c026d3fedf47fa35e722970fdf"},
+  {"id": "ad281d17781cdcbdfce38cf13188f56b9dbb16977ca029823a3d6e0fa502e73a"},
+  {"id": "c0361dd4bbae4cc32be424cf564f547b29496b3bd7bbbf3ede0cb0b8d8930b5c"},
+  {"id": "349fdcad3da119f09bde6861806ae3ff461b1eb3b3708067f0abb0e669c54841"},
+  {"id": "d9a016283161f262b2764e6a5710f9c2dc1aca19a42d19cca5af7cc20ff2955e"},
+  {"id": "365aa211f1e873988dacb4ff1a10fe3b7221a940c3d155b8f4d33a25ca42fa52"},
+  {"id": "2b07103533f747c0899f00f575c79cdea960ac62b33d06780e284eb020215c0b"},
+  {"id": "5f7ce70135b7172358ee41b0f1f0ff9110af7294eef7ca7878882e129e6104db"},
+  {"id": "b570d7d7d68130750c4b84aa3808fd209ed767300246365a5deaaedffcfb6d0b"},
+  {"id": "3468c0769e9a8c10cc74e9bdbf11a00df1b35480b65059f71357c7f1a9e35d68"},
+  {"id": "1f0cf47de297037e91450631552b3ff7ce6567b73eac57e94bbbe2d6ca99e744"},
+  {"id": "02650e51270e0a734505fb2876adbef89f26bbe660ca4e8fadea0ecf1ea1b1d0"},
+  {"id": "764b2ac58c23310f2caeecd155eff294f190e433438d3df5a244b5af979d3a81"},
+  {"id": "c788b8a0ce4e9d795dd1895e87c0e3dd019766ebbfcd4f99112d523b8374e9de"},
+  {"id": "e9ec70f0f0c1e8134efacb9941647d451f4c6d3acccb40b878598ade9308599a"},
+  {"id": "4f3e5fbbb27392ce4b4ef46ee0d5bc42e5112bde6cb72644a34d89bc7505b9d5"},
+  {"id": "5e4e3c95215be93be3bc5bac242f6b332c1265140d179f31af858e8f172c8d6a"},
+  {"id": "bdbcfb112b0f7d55e2bcc231ec06335ea5051d49edcbed8170f717f8ecf1a965"},
+  {"id": "294303fbde21251093bb86683701023bd1d7e310a64e0b1068f6160696f3c6a4"},
+  {"id": "00ef6f71fcaa72742493178b8409c32bb68d92c9f67af717f92bef35272a74d4"},
+  {"id": "4fff1259602cf46619d379ee8c790a1acc310a53cb617fa46d522978d6b4876b"},
+  {"id": "aab06b1602f0380e6c2f442c7992c82259968d8abbba1da69d774a32d747c3b4"},
+  {"id": "4bbee7e48d393b692f80e5a5357fcb435adbd46172b38f367a43c3aeb45b2fb3"},
+  {"id": "97a7fa0776225a5eb644da81db9a73eacebf046d7fe745f567345c1cec0a9e32"},
+  {"id": "aad1de5bb5dc4ce80de3d55a6ce7037ddb46aadb4e44c3742781d1422cf79765"},
+  {"id": "2dcd9ea8b4959c7b986bfda2bdc8175ed156a474457d38be42f54f027a1dff5a"},
+  {"id": "747215ea31506d60af14bae6914fd1107de0893f99c0f2e178216bea79de4677"},
+  {"id": "d69a3d1b7d635ba12be30ebb9473ad4a973138e54ef1aaa2f6cce060a82937b4"},
+  {"id": "c4ba426af0bb7be9de06b774aec33b7733cb952c5e1bc723c9bf021b3e2be1ea"},
+  {"id": "0f7dac8f31a9aac4d4479373153489fc57889c964e82dd619bed2f60f0af27ee"},
+  {"id": "561420baa35477e27b85e62ecfded0b76cab0c0acaedc9b3ab6ac7d88be42165"},
+  {"id": "d68d8eab7bad9c263f5af0eb46db168d2d82ad19acc5fb19c606fcb18de7994b"},
+  {"id": "86f7e9f6d98831e0ad19a575512f3d969d3af6921260809cc7a33b3b918d87f1"},
+  {"id": "f9287d47f86cc0af606026fe5e017fd479230b6cd2dcc82db915603658312d82"},
+  {"id": "cb83acb45cd810d8fd0df5f1f40d5bfd5406b74e37c9cda54c77114c5dcd357a"},
+  {"id": "5457c08086b3e78887c8eeb39cdd8dcb6559ceea13f32cc4a6f8a84513bfacf1"},
+  {"id": "1c86e2d22620ec6c94aac12fad7ed304bdf439020e74bbc0f0fc096bd5335891"},
+  {"id": "6ad22ca994d0b5952b26cb0b4cae939d474f57729e18509574ace9882a635641"},
+  {"id": "e15e167f70fb7d3ab740248e993096ecd7819de7ad5640f05e5c302b34737f33"},
+  {"id": "a391df97b5fdf380f78091d18da0626afbf9ca2f9517935f3dee766cd0ac72fe"},
+  {"id": "7b4185b0d115b5a12ba57f6804703789c68fb52d1587487161e96011a6a72223"},
+  {"id": "dbd86fc945e0748b2f263abad2338ff212ae02a895f38b0a2c262a0da518ebd2"},
+  {"id": "91591d5dd56657a1acbcc04116f17b2264dd369b9ad361bf15033e6ca326f5ac"},
+  {"id": "eb382df17d822d81d85097f28a49f86dc69ba8a05285dff39e2d877ea31e21cc"},
+  {"id": "b4a85c1e7e4c13281ae58538c57529cc6035ee465a2f69e40b41a6711a2eeb18"},
+  {"id": "0ea69892da43e1b4de82bde7bb599c3f15a71120f9f506fd210c2712ba7026a3"},
+  {"id": "b424c79388a2ea8b04e72f7ea32c0648db15ca5f25705bcd4231d0b658156af1"},
+  {"id": "db11596a64f76082991df4d1d1e8764f4d8da926f81ddbe09333d2ca1335ecd6"},
+  {"id": "f6e4c5cba1dc008f9b9611515ba163ccd1489105265dc8b2809eb846c1b94209"},
+  {"id": "cd4c4f1e65bd1f351dabf8c04fe2903b043ce98ce5613808c027c6609a0556d5"},
+  {"id": "9b0172004b25ee43e517ed6dd969bceb3fef4db3a577f91d8a3dc9cb6fe4e1d1"},
+  {"id": "ca0ee728c85f4df5ffab3561f55fdd2295291a86cd409839c59b92903d041025"},
+  {"id": "c589506d090796e304763dc269731029be08dee1706c1e87413fb376a2e84a97"},
+  {"id": "99ea6a5a7701c255661fc2bea32cb615ca0d4674c45fe6633e58e7eeb5f92873"},
+  {"id": "8e55f6ec8de9e8b4f75e3a771c601c1583855b5d113124ac9fb997b8589117fc"},
+  {"id": "11803eb1505d5014bc13c48621638a94f0b852587f0b5adbcb3ee471d9488ec3"},
+  {"id": "488cf9801acccc925b75d6828287ecaaff8b2bee9b58ce26fa0a2abdd61bd155"},
+  {"id": "0e9bc4a5989a39d4fc7ba73876c88822928b1cc965ed158b431759378363c182"},
+  {"id": "386b2cd47df9260f5b313b151ae988d0710e83e615dfd2abc948f1fa93eb76d6"},
+  {"id": "a451833e4856194aa5f56508eb34c298a5718539b9d320a2b7b30f32a107cc37"},
+  {"id": "91c0639025aba28c5af2178f49d653757bcc68e88d7cc461c86edc1ac2a61942"},
+  {"id": "aaf0b0846e265dec3dcf7b943ea2fc0331daf29a6114ac2eb971c10988e73f6d"},
+  {"id": "d26a9c5d89b9ce197e03bf91e2768df571cf04df796b5ae08742aea97be1c8c5"},
+  {"id": "490debe9303abe3c72fae49c62f8be15556a78c77c4d74e82305c5ce5723986a"}
+]
\ No newline at end of file
diff --git a/tests/gui/vuejs/noogle/src/store.js b/tests/gui/vuejs/noogle/src/store.js
index 3bac78a..7f6a79f 100644
--- a/tests/gui/vuejs/noogle/src/store.js
+++ b/tests/gui/vuejs/noogle/src/store.js
@@ -9,6 +9,7 @@ const store = createStore({
       client: Client,
       pubkey: PublicKey,
       hasEventListener: false,
+      nip89dvms: [],
       results:  []
     }
   },
@@ -25,6 +26,9 @@ const store = createStore({
     set_hasEventListener(state, hasEventListener) {
       state.hasEventListener = hasEventListener
     },
+    set_nip89dvms(state, nip89dvms) {
+      state.nip89dvms = nip89dvms
+    },
     set_search_results(state, results){
       state.results = results
       console.log(state.results)