add server recommendations.

src/boot/global-components.js

@@ -1,4 +1,5 @@
 import RawEventData from '../components/RawEventData.vue'
+import Recommend from '../components/Recommend.vue'
 import Markdown from '../components/Markdown.vue'
 import ShowMore from '../components/ShowMore.vue'
 import Publish from '../components/Publish.vue'
@@ -11,6 +12,7 @@ import Name from '../components/Name.vue'
 
 export default ({app}) => {
   app.component('RawEventData', RawEventData)
+  app.component('Recommend', Recommend)
   app.component('Markdown', Markdown)
   app.component('ShowMore', ShowMore)
   app.component('Publish', Publish)

src/components/Post.vue

@@ -71,7 +71,7 @@
         @mousedown="startClicking"
         @mouseup="finishClicking"
       >
-        <Markdown>
+        <Markdown v-if="event.kind === 1">
           {{ trimmedContent }}
           <template #append>
             <q-icon
@@ -90,6 +90,7 @@
             />
           </template>
         </Markdown>
+        <Recommend v-else-if="event.kind === 2" :url="event.content" />
       </q-item-label>
     </q-item-section>
   </q-item>
@@ -148,10 +149,12 @@ export default {
 
   methods: {
     startClicking() {
+      if (this.event.kind === 2) return
+
       this.clicking = true
       setTimeout(() => {
         this.clicking = false
-      }, 300)
+      }, 200)
     },
 
     finishClicking(ev) {

src/components/Recommend.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="w-full ml-2">
+    <q-banner class="py-5 bg-accent text-white cursor-auto">
+      <div class="mb-2 text-bold text-center">Relay Recommendation</div>
+      <div class="flex justify-evenly justify-center items-center ml-8 mt-4">
+        <div class="font-mono text-xs">{{ url }}</div>
+        <q-btn
+          rounded
+          color="secondary"
+          class="py-0 ml-2"
+          size="md"
+          :icon="url in $store.state.relays ? 'radio_button_checked' : 'add'"
+          :label="url in $store.state.relays ? 'Added' : 'Add Relay'"
+          :disable="url in $store.state.relays"
+          @click="addRelay"
+        />
+      </div>
+    </q-banner>
+  </div>
+</template>
+
+<script>
+import helpersMixin from '../utils/mixin'
+
+export default {
+  name: 'Recommend',
+  mixins: [helpersMixin],
+  props: {
+    url: {type: String, required: true}
+  },
+  methods: {
+    addRelay() {
+      this.$q
+        .dialog({
+          title: 'Add relay?',
+          message: `Add ${this.url} to your list of relays?`,
+          cancel: true
+        })
+        .onOk(() => {
+          this.$store.commit('addRelay', this.url)
+        })
+    }
+  }
+}
+</script>

src/pages/Profile.vue

@@ -177,7 +177,7 @@ export default {
           filter: [
             {
               authors: [this.$route.params.pubkey],
-              kinds: [0, 1, 3]
+              kinds: [0, 1, 2, 3]
             }
           ],
           cb: async (event, relay) => {
@@ -187,6 +187,7 @@ export default {
                 return
 
               case 1:
+              case 2:
                 if (this.eventsSet.has(event.id)) return
                 this.eventsSet.add(event.id)
 

src/pages/Settings.vue

@@ -55,6 +55,13 @@
                 @click="removeRelay(url)"
               />
               {{ url }}
+              <q-btn
+                color="primary"
+                size="sm"
+                label="Share"
+                :disable="hasJustSharedRelay"
+                @click="shareRelay(url)"
+              />
             </div>
           </q-item-section>
           <q-item-section side>
@@ -165,7 +172,8 @@ export default {
         about,
         nip05
       },
-      unsubscribe: null
+      unsubscribe: null,
+      hasJustSharedRelay: false
     }
   },
 
@@ -242,6 +250,13 @@ export default {
     setRelayOpt(url, opt, value) {
       this.$store.commit('setRelayOpt', {url, opt, value})
     },
+    shareRelay(url) {
+      this.hasJustSharedRelay = true
+      this.$store.dispatch('recommendServer', url)
+      setTimeout(() => {
+        this.hasJustSharedRelay = false
+      }, 5000)
+    },
     async hardReset() {
       this.$q
         .dialog({

src/store/actions.js

@@ -181,6 +181,16 @@ export async function setMetadata(store, metadata) {
   store.dispatch('addEvent', {event})
 }
 
+export async function recommendServer(store, url) {
+  await pool.publish({
+    pubkey: store.state.keys.pub,
+    created_at: Math.round(Date.now() / 1000),
+    kind: 2,
+    tags: [],
+    content: url
+  })
+}
+
 export async function sendChatMessage(store, {now, pubkey, text, replyTo}) {
   if (text.length === 0) return
 

src/worker-db.js

@@ -18,7 +18,7 @@ const db = new PouchDB('nostr-events', {
 
 // db schema (views)
 // ~
-const DESIGN_VERSION = 3
+const DESIGN_VERSION = 4
 db.upsert('_design/main', current => {
   if (current && current.version >= DESIGN_VERSION) return false
 
@@ -34,7 +34,7 @@ db.upsert('_design/main', current => {
       },
       homefeed: {
         map: function (event) {
-          if (event.kind === 1) {
+          if (event.kind === 1 || event.kind === 2) {
             emit(event.created_at)
           }
         }.toString()