Add and use relay list settings

app/components/app-menu/settings/nostr.gjs

@@ -1,11 +1,94 @@
 import Component from '@glimmer/component';
 import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { fn } from '@ember/helper';
 import Icon from '#components/icon';
+import { normalizeRelayUrl } from '../../../utils/nostr';
+
+const stripProtocol = (url) => (url ? url.replace(/^wss?:\/\//, '') : '');
 
 export default class AppMenuSettingsNostr extends Component {
   @service settings;
+  @service nostrData;
+
+  @tracked newReadRelay = '';
+  @tracked newWriteRelay = '';
+
+  @action
+  updateNewReadRelay(event) {
+    this.newReadRelay = event.target.value;
+  }
+
+  @action
+  updateNewWriteRelay(event) {
+    this.newWriteRelay = event.target.value;
+  }
+
+  @action
+  addReadRelay() {
+    const url = normalizeRelayUrl(this.newReadRelay);
+    if (!url) return;
+
+    const current =
+      this.settings.nostrReadRelays || this.nostrData.defaultReadRelays;
+    const set = new Set([...current, url]);
+    this.settings.update('nostrReadRelays', Array.from(set));
+    this.newReadRelay = '';
+  }
+
+  @action
+  removeReadRelay(url) {
+    const current =
+      this.settings.nostrReadRelays || this.nostrData.defaultReadRelays;
+    const filtered = current.filter((r) => r !== url);
+    this.settings.update('nostrReadRelays', filtered);
+  }
+
+  @action
+  handleReadRelayKeydown(event) {
+    if (event.key === 'Enter') {
+      this.addReadRelay();
+    }
+  }
+
+  @action
+  handleWriteRelayKeydown(event) {
+    if (event.key === 'Enter') {
+      this.addWriteRelay();
+    }
+  }
+
+  @action
+  resetReadRelays() {
+    this.settings.update('nostrReadRelays', null);
+  }
+
+  @action
+  addWriteRelay() {
+    const url = normalizeRelayUrl(this.newWriteRelay);
+    if (!url) return;
+
+    const current =
+      this.settings.nostrWriteRelays || this.nostrData.defaultWriteRelays;
+    const set = new Set([...current, url]);
+    this.settings.update('nostrWriteRelays', Array.from(set));
+    this.newWriteRelay = '';
+  }
+
+  @action
+  removeWriteRelay(url) {
+    const current =
+      this.settings.nostrWriteRelays || this.nostrData.defaultWriteRelays;
+    const filtered = current.filter((r) => r !== url);
+    this.settings.update('nostrWriteRelays', filtered);
+  }
+
+  @action
+  resetWriteRelays() {
+    this.settings.update('nostrWriteRelays', null);
+  }
 
   <template>
     {{! template-lint-disable no-nested-interactive }}
@@ -40,6 +123,96 @@ export default class AppMenuSettingsNostr extends Component {
             </option>
           </select>
         </div>
+
+        <div class="form-group">
+          <label for="new-read-relay">Read Relays</label>
+          <ul class="relay-list">
+            {{#each this.nostrData.activeReadRelays as |relay|}}
+              <li>
+                <span>{{stripProtocol relay}}</span>
+                <button
+                  type="button"
+                  class="btn-remove-relay"
+                  title="Remove relay"
+                  aria-label="Remove"
+                  {{on "click" (fn this.removeReadRelay relay)}}
+                >
+                  <Icon @name="x" @size={{14}} @color="currentColor" />
+                </button>
+              </li>
+            {{/each}}
+          </ul>
+          <div class="add-relay-input">
+            <input
+              id="new-read-relay"
+              type="text"
+              class="form-control"
+              placeholder="relay.example.com"
+              value={{this.newReadRelay}}
+              {{on "input" this.updateNewReadRelay}}
+              {{on "keydown" this.handleReadRelayKeydown}}
+            />
+            <button
+              type="button"
+              class="btn btn-secondary"
+              {{on "click" this.addReadRelay}}
+            >Add</button>
+          </div>
+          {{#if this.settings.nostrReadRelays}}
+            <button
+              type="button"
+              class="btn-link reset-relays"
+              {{on "click" this.resetReadRelays}}
+            >
+              Reset to Defaults
+            </button>
+          {{/if}}
+        </div>
+
+        <div class="form-group">
+          <label for="new-write-relay">Write Relays</label>
+          <ul class="relay-list">
+            {{#each this.nostrData.activeWriteRelays as |relay|}}
+              <li>
+                <span>{{stripProtocol relay}}</span>
+                <button
+                  type="button"
+                  class="btn-remove-relay"
+                  title="Remove relay"
+                  aria-label="Remove"
+                  {{on "click" (fn this.removeWriteRelay relay)}}
+                >
+                  <Icon @name="x" @size={{14}} @color="currentColor" />
+                </button>
+              </li>
+            {{/each}}
+          </ul>
+          <div class="add-relay-input">
+            <input
+              id="new-write-relay"
+              type="text"
+              class="form-control"
+              placeholder="relay.example.com"
+              value={{this.newWriteRelay}}
+              {{on "input" this.updateNewWriteRelay}}
+              {{on "keydown" this.handleWriteRelayKeydown}}
+            />
+            <button
+              type="button"
+              class="btn btn-secondary"
+              {{on "click" this.addWriteRelay}}
+            >Add</button>
+          </div>
+          {{#if this.settings.nostrWriteRelays}}
+            <button
+              type="button"
+              class="btn-link reset-relays"
+              {{on "click" this.resetWriteRelays}}
+            >
+              Reset to Defaults
+            </button>
+          {{/if}}
+        </div>
       </div>
     </details>
   </template>