Add translatability to new DM-related text

3 files changed, 23 insertions, 14 deletions

diff --git a/src/locales/en.json b/src/locales/en.json
index dd6e29f1..a8b8a06a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -92,6 +92,16 @@
 			"description": "Over 500 businesses worldwide are accepting bitcoin with Coinos. We hope that yours will be next!"
 		}
 	},
+	"dm": {
+		"header": "Direct Messages",
+		"recipientMsg": "You are sending nostr messages to [R].",
+		"sendMessage": "Send Message",
+		"expiry": "Enable message expiry",
+		"days": "days",
+		"relaysNotFound": "Could not find [R]’s DM relays.",
+		"noRelaysSet": "WARNING: You haven't set any preferred relays.  You won't be able to receive any messages or see the messages you've sent.",
+		"nostrSettingsLink": "Go to your Nostr settings to set your relays."
+	},
 	"error": {
 		"header": "Error",
 		"message": "Please try again or contact support.",
@@ -337,6 +347,8 @@
 			"revealNsec": "Reveal secret key",
 			"hideSeed": "Hide seed phrase",
 			"revealSeed": "Reveal seed phrase",
+			"preferredDM": "Preferred DM Relays",
+			"preferredDMDescription": "Direct Messages meant for you will be published to these relays.  To get DMs on multiple relays, put each relay URL on its own line.",
 			"saveSettings": "Save settings",
 			"bannerImage": "Banner Image",
 			"profileImage": "Profile Image",
diff --git a/src/routes/(app)/dm/[recipient]/+page.svelte b/src/routes/(app)/dm/[recipient]/+page.svelte
index 35b5221e..26b1907d 100644
--- a/src/routes/(app)/dm/[recipient]/+page.svelte
+++ b/src/routes/(app)/dm/[recipient]/+page.svelte
@@ -5,6 +5,7 @@
  import { SimplePool } from 'nostr-tools/pool';
  import * as libnip17 from '$lib/nip17';
  import { sign, getPrivateKey } from '$lib/nostr';
+ import { t } from "$lib/translations";
 
  let { data } = $props();
  const { user, recipient } = data;
@@ -22,6 +23,7 @@
  let relayWarningShown = $state(false);
  let expiryEnabled = $state(false);
  let expiryDays = $state(7);
+ let canSend = $state(false);
 
  const appendMultimap = (map: Map, key: string, value: object) => {
    if (map.has(key)) {
@@ -104,13 +106,8 @@
    relayWarningShown = false;
    loadEvents(relays);
  });
- getPreferredRelays(recipient.pubkey).then((relays) => {
-   let sendButton = document.getElementById("send-message");
-   if (!relays || relays.length == 0) {
-     sendButton.disabled = true;
-     sendButton.value = `Could not find ${recipient.username}'s DM relays.`;
-   }
- });
+ getPreferredRelays(recipient.pubkey)
+   .then((relays) => canSend = relays && relays.length > 0);
 
  const sendMessage = async (message: string) => {
    const expiry = expiryEnabled ? expiryDays : null;
@@ -194,8 +191,8 @@
     <div class="space-y-2 mx-auto space-y-5 lg:max-w-xl xl:max-w-2xl lg:pl-10 mt-5 lg:mt-0">
         <h1
           class="text-5xl font-medium text-left w-full mx-auto lg:mx-0 md:w-[500px]"
-        >Direct Messages</h1>
-        <p>You are sending nostr messages to {recipient.username}.</p>
+        >{$t("dm.header")}</h1>
+        <p>{$t("dm.recipientMsg").replace("[R]", recipient.username)}</p>
 
         {#each dates as day}
             <p>[{new Date(day * 86400 * 1000).toDateString()}]</p>
@@ -210,10 +207,10 @@
 
         <textarea id="message-contents" bind:value={text}></textarea>
 
-        <input type="checkbox" class="tiny" bind:checked={expiryEnabled}>Enable message expiry in <input type="number" class="short" bind:value={expiryDays} disabled={!expiryEnabled} min="1" step="1" max="99999"> days.
-        <input id="send-message" type="button" class="btn" value="Send Message" on:click={async () => sendMessage(text)}>
+        <input type="checkbox" class="tiny" bind:checked={expiryEnabled}>{$t("dm.expiry")}: <input type="number" class="short" bind:value={expiryDays} disabled={!expiryEnabled} min="1" step="1" max="99999"> {$t("dm.days")}.
+        <input id="send-message" type="button" class="btn" disabled={!canSend} value={canSend ? $t("dm.sendMessage") : $t("dm.relaysNotFound").replace("[R]", recipient.username)} on:click={async () => sendMessage(text)}>
         {#if relayWarningShown}
-            <p class="warning"><em>WARNING: You haven't set any preferred relays.  You won't be able to receive any messages or see the messages you've sent.  Go to <a class="link" href="/settings/nostr">your Nostr settings</a> to set your relays.</em></p>
+            <p class="warning"><em>{$t("dm.noRelaysSet")} <a class="link" href="/settings/nostr">{$t("dm.nostrSettingsLink")}</a></em></p>
         {/if}
     </div>
 </div>
diff --git a/src/routes/(app)/settings/nostr/+page.svelte b/src/routes/(app)/settings/nostr/+page.svelte
index fee9885d..8557d522 100644
--- a/src/routes/(app)/settings/nostr/+page.svelte
+++ b/src/routes/(app)/settings/nostr/+page.svelte
@@ -259,10 +259,10 @@
 {/if}
 
 <span class="font-bold">
-    Preferred DM Relays
+    {$t("user.settings.preferredDM")}
 </span>
 <p class="text-secondary mb-1">
-    Direct Messages meant for you will be published to these relays.  To get DMs on multiple relays, put each relay URL on its own line.
+    {$t("user.settings.preferredDMDescription")}
 </p>
 
 <textarea id="dmRelays" name="dmRelays" rows={3}></textarea>