Relay functionality in options is complete.

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();