Use save button to save DM relays

This needed me to use document.getElementById instead of Svelte states,
but it works.

2 files changed, 34 insertions, 30 deletions

diff --git a/src/routes/(app)/settings/+layout.svelte b/src/routes/(app)/settings/+layout.svelte
index 3c2ebd88..75827719 100644
--- a/src/routes/(app)/settings/+layout.svelte
+++ b/src/routes/(app)/settings/+layout.svelte
@@ -17,6 +17,9 @@
   import { getPublicKey } from "nostr-tools";
   import { bytesToHex } from "@noble/hashes/utils";
 
+  import { SimplePool } from 'nostr-tools/pool';
+  import { finalizeEvent } from 'nostr-tools/pure';
+
   let { children, data, form } = $props();
 
   let formElement = $state();
@@ -45,7 +48,32 @@
   let { about, id, username } = $derived(user);
   let submitting = $state();
 
+  const pool = new SimplePool();
+  import { PUBLIC_DM_RELAYS } from '$env/static/public';
+  const DM_RELAYS_LIST = PUBLIC_DM_RELAYS.split(',');
+  let updateRelaysIfAvailable = async () => {
+    const relayEntry = document.getElementById('dmRelays');
+    if (!relayEntry) return;
+
+    const newRelays = relayEntry.value.split('\n');
+    const event = {
+      kind: 10050,
+      created_at: Math.floor(Date.now() / 1000),
+      tags: newRelays.map(r => ["relay", r]),
+      content: ""
+    };
+    let signed;
+    if (await window.nostr.getPublicKey() === user.pubkey) {
+      signed = await window.nostr.signEvent(event);
+    } else {
+      const sk = await getPrivateKey(user);
+      signed = finalizeEvent(event, sk);
+    }
+    await Promise.any(pool.publish(DM_RELAYS_LIST, signed));
+  }
+
   async function handleSubmit(e) {
+    updateRelaysIfAvailable();
     e.preventDefault();
     try {
       submitting = true;
diff --git a/src/routes/(app)/settings/nostr/+page.svelte b/src/routes/(app)/settings/nostr/+page.svelte
index 5ca64588..204b924b 100644
--- a/src/routes/(app)/settings/nostr/+page.svelte
+++ b/src/routes/(app)/settings/nostr/+page.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { untrack } from "svelte";
   import { browser } from "$app/environment";
   import { getNsec } from "$lib/nostr";
@@ -18,9 +18,6 @@
   let extensionAvailable = $derived(browser && window.nostr);
   let { locale } = $derived(user);
 
-  import { SimplePool } from 'nostr-tools/pool';
-  import { finalizeEvent } from 'nostr-tools/pure';
-
   let newNsec = $state(),
     nsec = $state(),
     pin = $state(""),
@@ -44,28 +41,6 @@
     await tick();
     $save.click();
   };
-
-  const pool = new SimplePool();
-  import { PUBLIC_DM_RELAYS } from '$env/static/public';
-  const DM_RELAYS_LIST = PUBLIC_DM_RELAYS.split(',');
-  let dmRelaysText = $state('');
-  let updateRelays = async () => {
-    const newRelays = dmRelaysText.split('\n');
-    const event = {
-      kind: 10050,
-      created_at: Math.floor(Date.now() / 1000),
-      tags: newRelays.map(r => ["relay", r]),
-      content: ""
-    };
-    let signed;
-    if (await window.nostr.getPublicKey() === user.pubkey) {
-      signed = await window.nostr.signEvent(event);
-    } else {
-      const sk = await getPrivateKey(user);
-      signed = finalizeEvent(event, sk);
-    }
-    await Promise.any(pool.publish(DM_RELAYS_LIST, signed));
-  }
 </script>
 
 <input type="hidden" name="challenge" value={challenge} />
@@ -257,10 +232,11 @@
   </div>
 {/if}
 
-<p class="font-bold">
+<span class="font-bold">
     Preferred DM Relays
+</span>
+<p class="text-secondary mb-1">
+    Direct Messages meant for you will be published to these relays.
 </p>
-Direct Messages meant for you will be published to these relays.
 
-<textarea name="dmRelays" bind:value={dmRelaysText} rows={3}></textarea>
-<button onclick={updateRelays} class="btn">Update Preferred DM Relays</button>
+<textarea id="dmRelays" name="dmRelays" rows={3}></textarea>