parse links

2 files changed, 55 insertions, 2 deletions

diff --git a/src/routes/(app)/messages/[pubkey]/+page.svelte b/src/routes/(app)/messages/[pubkey]/+page.svelte
index 6f0ad7f3..52e032be 100644
--- a/src/routes/(app)/messages/[pubkey]/+page.svelte
+++ b/src/routes/(app)/messages/[pubkey]/+page.svelte
@@ -9,6 +9,7 @@
   import { pTagKeys } from "$lib/nostr";
   import { t } from "$lib/translations";
   import { theme } from "$lib/store";
+  import ChatMessage from "$comp/ChatMessage.svelte";
 
   const focus = (el: HTMLElement) => el.focus();
 
@@ -238,7 +239,7 @@
                 <div
                   class={($theme === "light" ? "light-message " : "dark-message ") + "message"}
                 >
-                  {rumour.content}
+                  <ChatMessage content={rumour.content} tags={rumour.tags} />
                   <span class="timestamp secondary text-xs">
                     {TIME.format(new Date(rumour.created_at * 1000))}
                   </span>
@@ -259,7 +260,7 @@
                 <div
                   class={($theme === "light" ? "light-message " : "dark-message ") + "message"}
                 >
-                  {rumour.content}
+                  <ChatMessage content={rumour.content} tags={rumour.tags} />
                   <span class="timestamp secondary text-xs">
                     {TIME.format(new Date(rumour.created_at * 1000))}
                   </span>
@@ -432,6 +433,8 @@
     width: fit-content;
     max-width: 75%;
     border-radius: 10px;
+    overflow: hidden;
+    word-break: break-word;
   }
 
   .light-message {
diff --git a/src/routes/(app)/tag/[tag]/+page.svelte b/src/routes/(app)/tag/[tag]/+page.svelte
new file mode 100644
index 00000000..f2e50c6c
--- /dev/null
+++ b/src/routes/(app)/tag/[tag]/+page.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+  import Event from "$comp/Event.svelte";
+  import { get, post } from "$lib/utils";
+  import { onMount, onDestroy } from "svelte";
+  import { page } from "$app/state";
+
+  let tag = $derived(decodeURIComponent(page.params.tag!));
+  let events: any[] = $state([]);
+  let paused = $state(false);
+  let pause = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    paused = true;
+  };
+  let unpause = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    paused = false;
+  };
+
+  let sub: any;
+
+  onMount(async () => {
+    const { Relay } = await import("nostr-tools/relay");
+    const relay = await Relay.connect("wss://relay.primal.net");
+    sub = relay.subscribe([{ kinds: [1], "#t": [tag], limit: 50 }], {
+      async onevent(event: any) {
+        if (paused) return;
+        if (events.find((e) => e.id === event.id)) return;
+        const { parts, names } = await post("/post/parseEvent", { event });
+        event.author = await get(`/api/users/${event.pubkey}`);
+        event.parts = parts;
+        event.names = names;
+        events = [...events, event].sort((a, b) => b.created_at - a.created_at).slice(0, 50);
+      },
+    });
+  });
+
+  onDestroy(() => sub?.close());
+</script>
+
+<div class="container px-4 max-w-xl mx-auto space-y-5">
+  <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">#{tag}</h1>
+
+  <div onpointerenter={pause} onpointerleave={unpause} role="feed">
+    {#each events as event (event.id)}
+      <Event {event} minimal={true} />
+    {/each}
+  </div>
+</div>