tyiu/nostash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Relay functionality in options is complete.

Browse Source
This commit is contained in:
Ryan Breen
2023-01-26 22:08:05 -05:00
parent f98ab34f0a
commit 252c9d5234
3 changed files with 93 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Shared (Extension)/Resources/options.css
View File

@@ -14,4 +14,8 @@
.checkbox { .checkbox {
@apply text-fuchsia-800 bg-fuchsia-200 rounded-full accent-fuchsia-200 w-4 h-4 lg:w-5 lg:h-5; @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;
}
} }

87
Shared (Extension)/Resources/options.html
View File

@@ -10,43 +10,66 @@
</head> </head>
<body x-data="options" class="text-fuchsia-900 p-3.5 lg:p-32"> <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"> <div class="mt-6">
<template x-for="(profileName, index) in profileNames" :key="profileName"> <label for="profiles">Profile</label>
<option x-text="profileName" :value="index"></option> <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> </template>
</select>
<h2 class="text-2xl lg:text-5xl font-bold mt-6">Relays</h2> <template x-if="!hasRelays">
<div class="mt-3">
<table class="mt-3"> There are no relays assigned to this profile.
<thead class="font-bold text-lg"> </div>
<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> </template>
</table>
<input class="mt-3 input" x-model="newRelay" type="text" @keyup.enter="await addRelay()" placeholder="wss://..." <div class="mt-3" x-show="hasRecommendedRelays">
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="off"> <select x-model="recommendedRelay" class="input w-64">
<button class="button" @click="await addRelay()">Add</button> <option value="" disabled selected>Recommended Relays</option>
<div class="text-red-500 font-bold" x-show="urlError.length > 0" x-text="urlError"></div> <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"> <div class="mt-6">
<button class="button" @click="window.close()">Close</button> <button class="button" @click="window.close()">Close</button>

37
Shared (Extension)/Resources/options.js
View File

@@ -1,12 +1,19 @@
import Alpine from 'alpinejs'; 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', () => ({ Alpine.data('options', () => ({
msg: 'Hello world!',
profileNames: ['Default'], profileNames: ['Default'],
profileIndex: 0, profileIndex: 0,
relays: [], relays: [],
newRelay: '', newRelay: '',
urlError: '', urlError: '',
recommendedRelay: '',
async init() { async init() {
await browser.runtime.getBackgroundPage(); await browser.runtime.getBackgroundPage();
@@ -16,6 +23,12 @@ Alpine.data('options', () => ({
this.$watch('profileIndex', async () => { this.$watch('profileIndex', async () => {
await this.getRelaysForProfile(); await this.getRelaysForProfile();
}); });
this.$watch('recommendedRelay', async () => {
if (this.recommendedRelay.length == 0) return;
await this.addRelay(this.recommendedRelay);
this.recommendedRelay = '';
});
}, },
async getProfileNames() { async getProfileNames() {
@@ -40,9 +53,10 @@ Alpine.data('options', () => ({
this.newRelay = ''; this.newRelay = '';
}, },
async addRelay() { async addRelay(relayToAdd = null) {
let newRelay = relayToAdd || this.newRelay;
try { try {
let url = new URL(this.newRelay); let url = new URL(newRelay);
if (url.protocol !== 'wss:') { if (url.protocol !== 'wss:') {
this.setUrlError('Must be a websocket url'); this.setUrlError('Must be a websocket url');
} }
@@ -69,6 +83,23 @@ Alpine.data('options', () => ({
this.urlError = ''; this.urlError = '';
}, 3000); }, 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(); Alpine.start();