Show reply button on threads

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>

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()