From 252c9d52348c54c243720176325a1261ac0cd7c4 Mon Sep 17 00:00:00 2001
From: Ryan Breen <ryan@breen.xyz>
Date: Thu, 26 Jan 2023 22:08:05 -0500
Subject: [PATCH] Relay functionality in options is complete.

---
 Shared (Extension)/Resources/options.css  |  4 ++
 Shared (Extension)/Resources/options.html | 87 ++++++++++++++---------
 Shared (Extension)/Resources/options.js   | 37 +++++++++-
 3 files changed, 93 insertions(+), 35 deletions(-)
diff --git a/Shared (Extension)/Resources/options.css b/Shared (Extension)/Resources/options.css
index f92fc4c..c326dde 100644
--- a/Shared (Extension)/Resources/options.css	
+++ b/Shared (Extension)/Resources/options.css	
@@ -14,4 +14,8 @@
   .checkbox {
     @apply text-fuchsia-800 bg-fuchsia-200 rounded-full accent-fuchsia-200 w-4 h-4 lg:w-5 lg:h-5;
   }
+
+  .section {
+    @apply border-2 border-fuchsia-700 rounded-lg p-5 mt-6 shadow-md;
+  }
 }
\ No newline at end of file
diff --git a/Shared (Extension)/Resources/options.html b/Shared (Extension)/Resources/options.html
index 32453ad..5558c8e 100644
--- a/Shared (Extension)/Resources/options.html	
+++ b/Shared (Extension)/Resources/options.html	
@@ -10,43 +10,66 @@
 </head>
 
 <body x-data="options" class="text-fuchsia-900  p-3.5 lg:p-32">
-  <h1 class=" text-3xl lg:text-6xl font-bold">Advanced Settings</h1>
+  <h1 class="text-3xl lg:text-6xl font-bold">Nostore</h1>
 
-  <select class="input mt-3 w-64" x-model.number="profileIndex" name="profiles" id="profiles">
-    <template x-for="(profileName, index) in profileNames" :key="profileName">
-      <option x-text="profileName" :value="index"></option>
+  <div class="mt-6">
+    <label for="profiles">Profile</label>
+    <br>
+    <select class="input w-64" x-model.number="profileIndex" id="profiles">
+      <template x-for="(profileName, index) in profileNames" :key="profileName">
+        <option x-text="profileName" :value="index"></option>
+      </template>
+    </select>
+  </div>
+
+  <div class="section">
+    <h2 class="text-2xl lg:text-5xl font-bold">Relays</h2>
+
+    <template x-if="hasRelays">
+      <table class="mt-3">
+        <thead class="font-bold text-lg">
+          <td class="p-2 text-center">URL</td>
+          <td class="p-2 text-center">Read</td>
+          <td class="p-2 text-center">Write</td>
+          <td class="p-2 text-center">Actions</td>
+        </thead>
+        <template x-for="(relay, index) in relays" :key="index">
+          <tr>
+            <td class="p-2 w-1/3" x-text="relay.url"></td>
+            <td class="p-2 text-center">
+              <input class="checkbox" type="checkbox" x-model="relay.read" @change="await saveRelaysForProfile(index)">
+            </td>
+            <td class="p-2 text-center">
+              <input class="checkbox" type="checkbox" x-model="relay.write" @change="await saveRelaysForProfile(index)">
+            </td>
+            <td class="p-2 text-center">
+              <button class="button" @click="await deleteRelay(index)">Delete</button>
+            </td>
+          </tr>
+        </template>
+      </table>
     </template>
-  </select>
 
-  <h2 class="text-2xl lg:text-5xl font-bold mt-6">Relays</h2>
-
-  <table class="mt-3">
-    <thead class="font-bold text-lg">
-      <td class="p-2 text-center">URL</td>
-      <td class="p-2 text-center">Read</td>
-      <td class="p-2 text-center">Write</td>
-      <td class="p-2 text-center">Actions</td>
-    </thead>
-    <template x-for="(relay, index) in relays" :key="index">
-      <tr>
-        <td class="p-2 w-1/3" x-text="relay.url"></td>
-        <td class="p-2 text-center">
-          <input class="checkbox" type="checkbox" x-model="relay.read" @change="await saveRelaysForProfile(index)">
-        </td>
-        <td class="p-2 text-center">
-          <input class="checkbox" type="checkbox" x-model="relay.write" @change="await saveRelaysForProfile(index)">
-        </td>
-        <td class="p-2 text-center">
-          <button class="button" @click="await deleteRelay(index)">Delete</button>
-        </td>
-      </tr>
+    <template x-if="!hasRelays">
+      <div class="mt-3">
+        There are no relays assigned to this profile.
+      </div>
     </template>
-  </table>
 
-  <input class="mt-3 input" x-model="newRelay" type="text" @keyup.enter="await addRelay()" placeholder="wss://..."
-    autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="off">
-  <button class="button" @click="await addRelay()">Add</button>
-  <div class="text-red-500 font-bold" x-show="urlError.length > 0" x-text="urlError"></div>
+    <div class="mt-3" x-show="hasRecommendedRelays">
+      <select x-model="recommendedRelay" class="input w-64">
+        <option value="" disabled selected>Recommended Relays</option>
+        <template x-for="relay in recommendedRelays">
+          <option :value="relay" x-text="relay"></option>
+        </template>
+      </select>
+    </div>
+
+    <input class="mt-3 input" x-model="newRelay" type="text" @keyup.enter="await addRelay()" placeholder="wss://..."
+      autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="off">
+    <button class="button" @click="await addRelay()">Add</button>
+    <div class="text-red-500 font-bold" x-show="urlError.length > 0" x-text="urlError"></div>
+  </div>
 
   <div class="mt-6">
     <button class="button" @click="window.close()">Close</button>
diff --git a/Shared (Extension)/Resources/options.js b/Shared (Extension)/Resources/options.js
index fc8724b..695d73d 100644
--- a/Shared (Extension)/Resources/options.js	
+++ b/Shared (Extension)/Resources/options.js	
@@ -1,12 +1,19 @@
 import Alpine from 'alpinejs';
 
+const RECOMMENDED_RELAYS = [
+    new URL('wss://relay.damus.io'),
+    new URL('wss://eden.nostr.land'),
+    new URL('wss://nostr-relay.derekross.me'),
+    new URL('wss://relay.snort.social'),
+];
+
 Alpine.data('options', () => ({
-    msg: 'Hello world!',
     profileNames: ['Default'],
     profileIndex: 0,
     relays: [],
     newRelay: '',
     urlError: '',
+    recommendedRelay: '',
 
     async init() {
         await browser.runtime.getBackgroundPage();
@@ -16,6 +23,12 @@ Alpine.data('options', () => ({
         this.$watch('profileIndex', async () => {
             await this.getRelaysForProfile();
         });
+
+        this.$watch('recommendedRelay', async () => {
+            if (this.recommendedRelay.length == 0) return;
+            await this.addRelay(this.recommendedRelay);
+            this.recommendedRelay = '';
+        });
     },
 
     async getProfileNames() {
@@ -40,9 +53,10 @@ Alpine.data('options', () => ({
         this.newRelay = '';
     },
 
-    async addRelay() {
+    async addRelay(relayToAdd = null) {
+        let newRelay = relayToAdd || this.newRelay;
         try {
-            let url = new URL(this.newRelay);
+            let url = new URL(newRelay);
             if (url.protocol !== 'wss:') {
                 this.setUrlError('Must be a websocket url');
             }
@@ -69,6 +83,23 @@ Alpine.data('options', () => ({
             this.urlError = '';
         }, 3000);
     },
+
+    // Properties
+
+    get recommendedRelays() {
+        let relays = this.relays.map(r => new URL(r.url)).map(r => r.href);
+        return RECOMMENDED_RELAYS.filter(r => !relays.includes(r.href)).map(
+            r => r.href
+        );
+    },
+
+    get hasRelays() {
+        return this.relays.length > 0;
+    },
+
+    get hasRecommendedRelays() {
+        return this.recommendedRelays.length > 0;
+    },
 }));
 
 Alpine.start();
