Basic functionality for relay optoins

2023-01-24 22:44:34 -05:00
parent 03af8e71ad
commit 84a8d5ddeb
4 changed files with 140 additions and 1 deletions
--- a/(Extension)/Resources/background.js
+++ b/(Extension)/Resources/background.js
@@ -89,6 +89,14 @@ browser.runtime.onMessage.addListener(
            case 'getRelays':
                sendResponse({});
                break;
+            case 'getRelaysForProfile':
+                let profileRelays = await getRelaysForProfile(message.payload);
+                sendResponse(profileRelays);
+                break;
+            case 'saveRelaysForProfile':
+                let [srfpIndex, srfpRelays] = message.payload;
+                await saveRelaysForProfile(srfpIndex, srfpRelays);
+                break;
            default:
                break;
        }
@@ -217,3 +225,16 @@ async function nip04Decrypt({ pubKey, cipherText }) {
    let privKey = await getPrivKey();
    return nip04.decrypt(privKey, pubKey, cipherText);
 }
+
+async function getRelaysForProfile(profileIndex) {
+    let profiles = await get('profiles');
+    let profile = profiles[profileIndex];
+    return profile.relays || [];
+}
+
+async function saveRelaysForProfile(profileIndex, relays) {
+    let profiles = await get('profiles');
+    let profile = profiles[profileIndex];
+    profile.relays = relays;
+    await storage.set({ profiles });
+}
--- a/(Extension)/Resources/options.build.css
+++ b/(Extension)/Resources/options.build.css
@@ -557,6 +557,10 @@ video {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }

+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .border {
  border-width: 1px;
 }
@@ -566,6 +570,27 @@ video {
  background-color: rgb(232 121 249 / var(--tw-bg-opacity));
 }

+.bg-fuchsia-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(112 26 117 / var(--tw-bg-opacity));
+}
+
+.p-44 {
+  padding: 11rem;
+}
+
+.p-40 {
+  padding: 10rem;
+}
+
+.p-32 {
+  padding: 8rem;
+}
+
+.p-1 {
+  padding: 0.25rem;
+}
+
 .text-5xl {
  font-size: 3rem;
  line-height: 1;
@@ -607,12 +632,25 @@ video {
  color: rgb(112 26 117 / var(--tw-text-opacity));
 }

+.text-fuchsia-400 {
+  --tw-text-opacity: 1;
+  color: rgb(232 121 249 / var(--tw-text-opacity));
+}
+
 .shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }

+.outline-1 {
+  outline-width: 1px;
+}
+
+.outline-4 {
+  outline-width: 4px;
+}
+
 .ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -639,4 +677,29 @@ video {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
+}
+
+.hover\:bg-fuchsia-600:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(192 38 211 / var(--tw-bg-opacity));
+}
+
+.hover\:bg-fuchsia-800:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(134 25 143 / var(--tw-bg-opacity));
+}
+
+.hover\:text-fuchsia-300:hover {
+  --tw-text-opacity: 1;
+  color: rgb(240 171 252 / var(--tw-text-opacity));
+}
+
+.active\:bg-fuchsia-700:active {
+  --tw-bg-opacity: 1;
+  background-color: rgb(162 28 175 / var(--tw-bg-opacity));
+}
+
+.active\:text-fuchsia-200:active {
+  --tw-text-opacity: 1;
+  color: rgb(245 208 254 / var(--tw-text-opacity));
 }
--- a/(Extension)/Resources/options.html
+++ b/(Extension)/Resources/options.html
@@ -9,7 +9,7 @@

 </head>

-<body x-data="options" class="text-fuchsia-900 bg-fuchsia-400">
+<body x-data="options" class="text-fuchsia-900 bg-fuchsia-400 p-32">
  <h1 class="text-6xl font-bold">Settings</h1>

  <select x-model.number="profileIndex" name="profiles" id="profiles">
@@ -18,6 +18,29 @@
    </template>
  </select>

+  <h2 class="text-5xl font-bold">Relays</h2>
+
+  <table>
+    <thead>
+      <td>URL</td>
+      <td>Read</td>
+      <td>Write</td>
+      <td>Actions</td>
+    </thead>
+    <template x-for="(relay, index) in relays" :key="index">
+      <tr>
+        <td x-text="relay.url"></td>
+        <td><input type="checkbox" x-model="relay.read" @change="await saveRelaysForProfile(index)"></td>
+        <td><input type="checkbox" x-model="relay.write" @change="await saveRelaysForProfile(index)"></td>
+        <td><button
+            class="rounded-lg p-1 bg-fuchsia-900 text-fuchsia-400 hover:bg-fuchsia-800 hover:text-fuchsia-300 active:bg-fuchsia-700 active:text-fuchsia-200"
+            @click="await deleteRelay(index)">Delete</button></td>
+      </tr>
+    </template>
+  </table>
+
+  <input x-model="newRelay" type="text"> <button @click="await addRelay()">Add</button>
+
 </body>

 </html>
--- a/(Extension)/Resources/options.js
+++ b/(Extension)/Resources/options.js
@@ -4,9 +4,16 @@ Alpine.data('options', () => ({
    msg: 'Hello world!',
    profileNames: ['Default'],
    profileIndex: 0,
+    relays: [],
+    newRelay: '',

    async init() {
        await this.getProfileNames();
+        await this.getRelaysForProfile();
+
+        this.$watch('profileIndex', async () => {
+            await this.getRelaysForProfile();
+        });
    },

    async getProfileNames() {
@@ -14,6 +21,31 @@ Alpine.data('options', () => ({
            kind: 'getProfileNames',
        });
    },
+
+    async getRelaysForProfile() {
+        this.relays = await browser.runtime.sendMessage({
+            kind: 'getRelaysForProfile',
+            payload: this.profileIndex,
+        });
+    },
+
+    async saveRelaysForProfile() {
+        await browser.runtime.sendMessage({
+            kind: 'saveRelaysForProfile',
+            payload: [this.profileIndex, this.relays],
+        });
+        await this.getRelaysForProfile();
+    },
+
+    async addRelay() {
+        this.relays.push({ url: this.newRelay, read: true, write: true });
+        await this.saveRelaysForProfile();
+    },
+
+    async deleteRelay(index) {
+        this.relays.splice(index, 1);
+        await this.saveRelaysForProfile();
+    },
 }));

 Alpine.start();