post from noogle

ui/noogle/package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@rust-nostr/nostr-sdk": "^0.10.0",
+    "@vueuse/core": "^10.7.2",
     "bootstrap": "^5.3.2",
     "daisyui": "^4.6.0",
     "mini-toastr": "^0.8.1",

ui/noogle/src/components/AutoComplete.vue

@@ -1,91 +0,0 @@
-<template>
-  <div class="bg-gray-50 min-w-screen min-h-screen flex justify-center items-center">
-    <div class="max-w-xs relative space-y-3">
-      <label
-        for="search"
-        class="text-gray-900"
-      >
-        Type the name of a country to search
-      </label>
-
-      <input
-        type="text"
-        id="search"
-        v-model="searchTerm"
-        placeholder="Type here..."
-        class="p-3 mb-0.5 w-full border border-gray-300 rounded"
-      >
-
-      <ul
-        v-if="searchCountries.length"
-        class="w-full rounded bg-white border border-gray-300 px-4 py-2 space-y-1 absolute z-10"
-      >
-        <li class="px-1 pt-1 pb-2 font-bold border-b border-gray-200">
-          Showing {{ searchCountries.length }} of {{ countries.length }} results
-        </li>
-        <li
-            v-for="country in searchCountries"
-            :key="country.name"
-            @click="selectCountry(country.name)"
-            class="cursor-pointer hover:bg-gray-100 p-1"
-        >
-          {{ country.name }}
-        </li>
-      </ul>
-
-      <p
-        v-if="selectedCountry"
-        class="text-lg pt-2 absolute"
-      >
-        You have selected: <span class="font-semibold">{{ selectedCountry }}</span>
-      </p>
-    </div>
-  </div>
-</template>
-
-<script>
-import countries from './data/countries.json'
-import {ref, computed} from 'vue'
-import '../app.css'
-
-export default {
-  setup() {
-    let searchTerm = ref('')
-
-    const searchCountries = computed(() => {
-      if (searchTerm.value === '')  {
-        return []
-      }
-      if (!searchTerm.value.includes(":from"))  {
-        return []
-      }
-
-      let newsearch = searchTerm.value.split(":from")
-
-      let matches = 0
-
-      return countries.filter(country => {
-        if (country.name.toLowerCase().includes(newsearch[1].toLowerCase()) && matches < 10) {
-          matches++
-          return country
-        }
-      })
-    });
-
-    const selectCountry = (country) => {
-      selectedCountry.value = country
-      searchTerm.value = ''
-    }
-
-    let selectedCountry = ref('')
-
-    return {
-      countries,
-      searchTerm,
-      searchCountries,
-      selectCountry,
-      selectedCountry
-    }
-  }
-}
-</script>

ui/noogle/src/components/ImageGeneration.vue

@@ -1,8 +1,6 @@
 <script setup>
 
 
-
-
 import {
   Client,
   Filter,
@@ -13,28 +11,39 @@ import {
   EventBuilder,
   Tag,
   EventId,
-  Nip19Event, Alphabet
+  Nip19Event, Alphabet, Keys
 } from "@rust-nostr/nostr-sdk";
 import store from '../store';
 import miniToastr from "mini-toastr";
 import VueNotifications from "vue-notifications";
 import searchdvms from './data/searchdvms.json'
-import {computed, watch} from "vue";
+import {computed, defineEmits, watch} from "vue";
 import countries from "@/components/data/countries.json";
 import deadnip89s from "@/components/data/deadnip89s.json";
 import {data} from "autoprefixer";
 import {requestProvider} from "webln";
+import Newnote from "@/components/Newnote.vue";
 
 let dvms =[]
 let searching = false
 
 let listener = false
 
-
+function showDetails(user) {
+   this.$bvModal.show("modal-details");
+   this.modalData = user;
+}
 
 const sleep = (ms) => {
   return new Promise(resolve => setTimeout(resolve, ms))
 }
+
+
+async function post_note(note){
+   let client = store.state.client
+   await client.publishTextNote(note, []);
+
+}
 async function generate_image(message) {
 
    try {
@@ -275,6 +284,25 @@ defineProps({
   },
 })
 
+import { ref } from "vue";
+import ModalComponent from "../components/Newnote.vue";
+
+const isModalOpened = ref(false);
+const modalcontent = ref("");
+
+const openModal = result => {
+  isModalOpened.value = true;
+  modalcontent.value = result
+};
+const closeModal = () => {
+  isModalOpened.value = false;
+};
+
+const submitHandler = async () => {
+  console.log("hello")
+  await post_note(modalcontent)
+}
+
 
 
 </script>
@@ -299,8 +327,17 @@ defineProps({
   </div>
   <br>
 
+
+          <ModalComponent :isOpen="isModalOpened" @modal-close="closeModal" @submit="submitHandler" name="first-modal">
+            <template #header>Share your creation on Nostr  <br> <br></template>
+
+            <template #content><textarea  v-model="modalcontent" className="c-Input" style="width: 400px; height: 300px;">{{modalcontent}}</textarea></template>
+            <template #footer><button className="v-Button" @click="post_note(modalcontent)"  @click.stop="closeModal">Create Note</button></template>
+          </ModalComponent>
+
   <div class="max-w-5xl relative space-y-3">
     <div class="grid grid-cols-1 gap-6">
+
         <div className="card w-70 bg-base-100 shadow-xl flex flex-col"   v-for="dvm in store.state.imagedvmreplies"
             :key="dvm.id">
 
@@ -337,8 +374,22 @@ defineProps({
 
         </div>
             <figure className="w-full" >
-            <img  v-if="dvm.result" :src="dvm.result"  className="tooltip" data-top='Click to copy url'height="200" alt="DVM Picture" @click="copyurl(dvm.result)"/>
+            <img  v-if="dvm.result" :src="dvm.result"  className="tooltip" data-top='Click to copy url' height="200" alt="DVM Picture" @click="copyurl(dvm.result)"/>
            </figure>
+           <div  v-if="dvm.result && store.state.pubkey.toHex() !== Keys.fromSkStr('ece3c0aa759c3e895ecb3c13ab3813c0f98430c6d4bd22160b9c2219efc9cf0e').publicKey.toHex()" >
+                 <button @click="openModal('Look what I created on noogle.lol\n\n' +  dvm.result)"  class="w-8 h-8 rounded-full bg-nostr border-white border-1 text-white flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2  focus:ring-black tooltip" data-top='Share' aria-label="make note" role="button">
+                                    <svg  xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-pencil" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                        <path stroke="none" d="M0 0h24v24H0z"></path>
+                                        <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
+                                        <line x1="13.5" y1="6.5" x2="17.5" y2="10.5"></line>
+                                    </svg>
+                               </button>
+
+
+         <!-- <button  class="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-100 dark:text-gray-800 text-white flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2  focus:ring-black" aria-label="edit note" role="button">
+            <svg class="icon icon-tabler icon-tabler-pencil"  width="20" height="20"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="1.5"  stroke-linecap="round"  stroke-linejoin="round">  <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" /></svg></button>
+ -->
+          </div>
            </div>
 
       </div>

ui/noogle/src/components/Newnote.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { defineProps, defineEmits, ref } from "vue";
+import {onClickOutside} from '@vueuse/core'
+
+const props = defineProps({
+  isOpen: Boolean,
+});
+
+const emit = defineEmits(["modal-close"]);
+
+const target = ref(null)
+onClickOutside(target, ()=>emit('modal-close'))
+
+</script>
+
+<template>
+  <div v-if="isOpen" class="modal-mask">
+    <div class="modal-wrapper">
+      <div class="modal-container" ref="target">
+        <div class="modal-header">
+          <slot name="header"> default header </slot>
+        </div>
+        <div class="modal-body">
+          <slot name="content"> default content </slot>
+        </div>
+        <div class="modal-footer">
+          <slot name="footer">
+            <div>
+              <button @click.stop="emit('modal-close')">Submit</button>
+            </div>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.modal-mask {
+  position: fixed;
+  z-index: 9998;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.modal-container {
+  @apply bg-base-100;
+  width: 500px;
+  margin: 150px auto;
+  padding: 20px 30px;
+  //background-color: #181818;
+  border-radius: 2px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+}
+
+</style>

ui/noogle/src/components/Nip07.vue

@@ -30,7 +30,7 @@ import {
   Filter,
   initLogger,
   LogLevel,
-  Timestamp, Keys, NostrDatabase, ClientBuilder, ClientZapper, Alphabet, SingleLetterTag
+  Timestamp, Keys, NostrDatabase, ClientBuilder, ClientZapper, Alphabet, SingleLetterTag, Options, Duration
 } from "@rust-nostr/nostr-sdk";
 import VueNotifications from "vue-notifications";
 import store from '../store';
@@ -77,7 +77,8 @@ export default {
 
         let keys = Keys.fromSkStr("ece3c0aa759c3e895ecb3c13ab3813c0f98430c6d4bd22160b9c2219efc9cf0e")
         this.signer = ClientSigner.keys(keys) //TODO store keys
-        let client = new ClientBuilder().signer(this.signer).build()
+        let opts = new Options().waitForSend(false).connectionTimeout(Duration.fromSecs(5));
+        let client = new ClientBuilder().signer(this.signer).opts(opts).build()
 
         for (const relay of store.state.relays){
            await client.addRelay(relay);
@@ -133,7 +134,9 @@ export default {
           }
 
         //let zapper = ClientZapper.webln()
-        let client = new ClientBuilder().signer(this.signer).build();
+        let opts = new Options().waitForSend(false).connectionTimeout(Duration.fromSecs(5));
+        let client = new ClientBuilder().signer(this.signer).opts(opts).build()
+
 
         for (const relay of store.state.relays){
                  await client.addRelay(relay);

ui/noogle/src/store.js

@@ -16,13 +16,12 @@ const store = createStore({
       nip89dvms: [],
       activesearchdvms: [],
       results:  [],
-      relays: [
-          //"wss://relay.damus.io",
+      relays: ["wss://relay.damus.io",
         "wss://nos.lol",
         "wss://pablof7z.nostr1.com",
         "wss://relay.nostr.net",
         "wss://relay.nostr.band",
-        //"wss://nostr-pub.wellorder.net",
+        "wss://nostr-pub.wellorder.net",
       ],
     }
   },