Relays are partially working now in the options options script instead of background.

Shared (Extension)/Resources/options.html

@@ -71,10 +71,10 @@
           <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)">
+              <input class="checkbox" type="checkbox" x-model="relay.read" @change="saveRelays">
             </td>
             <td class="p-2 text-center">
-              <input class="checkbox" type="checkbox" x-model="relay.write" @change="await saveRelaysForProfile(index)">
+              <input class="checkbox" type="checkbox" x-model="relay.write" @change="saveRelays">
             </td>
             <td class="p-2 text-center">
               <button class="button" @click="await deleteRelay(index)">Delete</button>

Shared (Extension)/Resources/options.js

@@ -4,9 +4,12 @@ import {
     deleteProfile,
     getProfileIndex,
     getProfileNames,
+    getRelays,
     initialize,
     newProfile,
+    savePrivateKey,
     saveProfileName,
+    saveRelays,
 } from './utils';
 
 const RECOMMENDED_RELAYS = [
@@ -49,6 +52,8 @@ Alpine.data('options', () => ({
             });
         }
 
+        // We need to refresh the names BEFORE setting the profile index, or it won't work
+        // on init to set the correct profile.
         await this.getProfileNames();
         await this.getProfileIndex();
         await this.refreshProfile();
@@ -59,6 +64,7 @@ Alpine.data('options', () => ({
         await this.getProfileName();
         await this.getNsec();
         await this.getNpub();
+        await this.getRelays();
         this.confirmClear = false;
         this.confirmDelete = false;
     },
@@ -96,10 +102,7 @@ Alpine.data('options', () => ({
     async saveProfile() {
         if (!this.needsSave) return;
 
-        await browser.runtime.sendMessage({
-            kind: 'savePrivateKey',
-            payload: [this.profileIndex, this.privKey],
-        });
+        await savePrivateKey(this.profileIndex, this.privKey);
         await saveProfileName(this.profileIndex, this.profileName);
         await this.getProfileNames();
         await this.refreshProfile();
@@ -122,19 +125,14 @@ Alpine.data('options', () => ({
 
     // Relay functions
 
-    async getRelaysForProfile() {
-        this.relays = await browser.runtime.sendMessage({
-            kind: 'getRelaysForProfile',
-            payload: this.profileIndex,
-        });
+    async getRelays() {
+        this.relays = await getRelays(this.profileIndex);
     },
 
-    async saveRelaysForProfile() {
-        await browser.runtime.sendMessage({
-            kind: 'saveRelaysForProfile',
-            payload: [this.profileIndex, this.relays],
-        });
-        await this.getRelaysForProfile();
+    async saveRelays() {
+        console.log(this.relays);
+        await saveRelays(this.profileIndex, this.relays);
+        await this.getRelays(this.profileIndex);
         this.newRelay = '';
     },
 
@@ -150,8 +148,11 @@ Alpine.data('options', () => ({
                 this.setUrlError('URL already exists');
                 return;
             }
-            this.relays.push({ url: url.href, read: true, write: true });
-            await this.saveRelaysForProfile();
+            this.relays = [
+                ...this.relays,
+                { url: url.href, read: true, write: true },
+            ];
+            await this.saveRelays();
         } catch (error) {
             this.setUrlError('Invalid websocket URL');
         }
@@ -159,7 +160,7 @@ Alpine.data('options', () => ({
 
     async deleteRelay(index) {
         this.relays.splice(index, 1);
-        await this.saveRelaysForProfile();
+        await this.saveRelays();
     },
 
     setUrlError(message) {
@@ -169,6 +170,8 @@ Alpine.data('options', () => ({
         }, 3000);
     },
 
+    // General
+
     async clearData() {
         await clearData();
         await this.init(false);

Shared (Extension)/Resources/utils.js

@@ -61,9 +61,9 @@ export async function initialize() {
     await getOrSetDefault('profiles', [await generateProfile()]);
 }
 
-export async function generateProfile() {
+export async function generateProfile(name = 'Default') {
     return {
-        name: 'Default',
+        name,
         privKey: await generatePrivateKey(),
         hosts: [],
         relays: [],
@@ -86,6 +86,13 @@ export async function saveProfileName(index, profileName) {
     await storage.set({ profiles });
 }
 
+export async function savePrivateKey(index, privateKey) {
+    await browser.runtime.sendMessage({
+        kind: 'savePrivateKey',
+        payload: [index, privateKey],
+    });
+}
+
 export async function newProfile() {
     let profiles = await getProfiles();
     const newProfile = await generateProfile('New Profile');
@@ -93,3 +100,15 @@ export async function newProfile() {
     await storage.set({ profiles });
     return profiles.length - 1;
 }
+
+export async function getRelays(profileIndex) {
+    let profile = await getProfile(profileIndex);
+    return profile.relays || [];
+}
+
+export async function saveRelays(profileIndex, relays) {
+    let profiles = await getProfile(profileIndex);
+    console.log('saving: ', relays);
+    profile.relays = [...relays];
+    await storage.set({ profiles });
+}