Create initial DM selection page

2 files changed, 60 insertions, 0 deletions

diff --git a/src/lib/nostr.ts b/src/lib/nostr.ts
index bfaa14c1..6a8b179a 100644
--- a/src/lib/nostr.ts
+++ b/src/lib/nostr.ts
@@ -204,3 +204,14 @@ const signingMethods = {
 		return signedEvent;
 	},
 };
+
+// Returns all the keys mentioned in the provided event's 'p' tags.
+export const pTagKeys = (event: object): string[] => {
+	let keys = [];
+	for (const tag of event.tags) {
+		if (tag[0] === "p") {
+			keys.push(tag[1]);
+		}
+	}
+	return keys;
+}
diff --git a/src/routes/(app)/dm/+page.svelte b/src/routes/(app)/dm/+page.svelte
new file mode 100644
index 00000000..025dde40
--- /dev/null
+++ b/src/routes/(app)/dm/+page.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+ import { t } from "$lib/translations";
+ import { pTagKeys } from '$lib/nostr';
+ import { getMessageRumours } from '$lib/nip17';
+
+ let { data } = $props();
+ const { user } = data;
+
+ const updateSendersRecipients = (rumours: object[]) => {
+   const senders = new Set<string>();
+   const recipients = new Set<string>();
+   for (const rumour of rumours) {
+     if (rumour.pubkey !== user.pubkey) {
+       senders.add(rumour.pubkey);
+     } else {
+       pTagKeys(rumour).forEach(r => recipients.add(r));
+     }
+   }
+   messageSenders = Array.from(senders);
+   messageRecipients = Array.from(recipients);
+ };
+
+ let messageSenders = $state([]);
+ let messageRecipients = $state([]);
+ getMessageRumours(user).then(updateSendersRecipients);
+</script>
+
+<div class="container">
+    <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]"
+        >{$t("dm.header")}</h1>
+        <p>Welcome to the DM homepage!</p>
+
+        <p>The following people have sent messages to you:</p>
+        <ul>
+            {#each messageSenders as sender}
+                <li>{sender}</li>
+            {/each}
+        </ul>
+
+        <p>The following people have received messages from you:</p>
+        <ul>
+            {#each messageRecipients as recipient}
+                <li>{recipient}</li>
+            {/each}
+        </ul>
+    </div>
+</div>