From 84a8d5ddeb6c5d19cae00104602e11569d98be14 Mon Sep 17 00:00:00 2001 From: Ryan Breen Date: Tue, 24 Jan 2023 22:44:34 -0500 Subject: [PATCH] Basic functionality for relay optoins --- Shared (Extension)/Resources/background.js | 21 +++++++ .../Resources/options.build.css | 63 +++++++++++++++++++ Shared (Extension)/Resources/options.html | 25 +++++++- Shared (Extension)/Resources/options.js | 32 ++++++++++ 4 files changed, 140 insertions(+), 1 deletion(-) diff --git a/Shared (Extension)/Resources/background.js b/Shared (Extension)/Resources/background.js index 2dab0de..7d8a133 100644 --- a/Shared (Extension)/Resources/background.js +++ b/Shared (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 }); +} diff --git a/Shared (Extension)/Resources/options.build.css b/Shared (Extension)/Resources/options.build.css index 7b8527a..1ddc0a7 100644 --- a/Shared (Extension)/Resources/options.build.css +++ b/Shared (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)); } \ No newline at end of file diff --git a/Shared (Extension)/Resources/options.html b/Shared (Extension)/Resources/options.html index 89a3f06..20643be 100644 --- a/Shared (Extension)/Resources/options.html +++ b/Shared (Extension)/Resources/options.html @@ -9,7 +9,7 @@ - +

Settings

+

Relays

+ + + + + + + + + +
URLReadWriteActions
+ + + \ No newline at end of file diff --git a/Shared (Extension)/Resources/options.js b/Shared (Extension)/Resources/options.js index a999c56..64c0bc2 100644 --- a/Shared (Extension)/Resources/options.js +++ b/Shared (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();