From 2900544668e5e8790e4672e286b680731b02280c Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Wed, 25 Sep 2024 14:35:20 -0700
Subject: [PATCH] Show reply button on threads

---
 src/app/components/ThreadItem.svelte      | 21 ++++++++++++++++-----
 src/routes/spaces/[nrelay]/+layout.svelte |  4 ++--
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/app/components/ThreadItem.svelte b/src/app/components/ThreadItem.svelte
index a39e1de12..eefaeb66f 100644
--- a/src/app/components/ThreadItem.svelte
+++ b/src/app/components/ThreadItem.svelte
@@ -1,18 +1,29 @@
 <script lang="ts">
+  import {nip19} from 'nostr-tools'
+  import {ctx} from '@welshman/lib'
+  import Icon from "@lib/components/Icon.svelte"
+  import Link from "@lib/components/Link.svelte"
   import Content from "@app/components/Content.svelte"
   import NoteCard from "@app/components/NoteCard.svelte"
+  import {entityLink} from '@app/state'
 
   export let root
   export let replies
+
+  const relays = ctx.app.router.Event(root).getUrls()
+  const nevent = nip19.neventEncode({...root, relays})
 </script>
 
-<div>
-  <NoteCard event={root} class="card2">
+<div class="flex flex-col items-end">
+  <NoteCard event={root} class="card2 w-full">
     <div class="ml-12">
       <Content event={root} />
     </div>
   </NoteCard>
-  {#if replies.length > 0}
-    Show {replies.length} {replies.length === 1 ? "reply" : "replies"}
-  {/if}
+  <Link
+    href={entityLink(nevent)}
+    class="flex items-center gap-2 btn btn-neutral -mt-6 mr-4 rounded-full">
+    <Icon icon="chat-round" />
+    <span>{replies.length}</span>
+  </Link>
 </div>
diff --git a/src/routes/spaces/[nrelay]/+layout.svelte b/src/routes/spaces/[nrelay]/+layout.svelte
index 109e7e8f6..b5b7f9133 100644
--- a/src/routes/spaces/[nrelay]/+layout.svelte
+++ b/src/routes/spaces/[nrelay]/+layout.svelte
@@ -2,7 +2,7 @@
   import {onMount} from "svelte"
   import {page} from "$app/stores"
   import {sort, now} from "@welshman/lib"
-  import {displayRelayUrl, NOTE, EVENT_DATE, EVENT_TIME, CLASSIFIED} from "@welshman/util"
+  import {displayRelayUrl, REACTION, NOTE, EVENT_DATE, EVENT_TIME, CLASSIFIED} from "@welshman/util"
   import {subscribe} from "@welshman/app"
   import {fly, slide} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
@@ -52,7 +52,7 @@
   $: otherRooms = ($roomsByUrl.get(url) || []).filter(room => !rooms.concat(GENERAL).includes(room))
 
   onMount(() => {
-    const kinds = [NOTE, MESSAGE, EVENT_DATE, EVENT_TIME, CLASSIFIED]
+    const kinds = [NOTE, REACTION, MESSAGE, EVENT_DATE, EVENT_TIME, CLASSIFIED]
     const sub = subscribe({filters: [{kinds}], relays: [url]})
 
     return () => sub.close()