Listen for new threads, add reply/quote button to channels and chats, better quote handling

src/routes/spaces/[relay]/[room]/+page.svelte

@@ -8,9 +8,12 @@
 </script>
 
 <script lang="ts">
+  import {nip19} from "nostr-tools"
   import {onMount, onDestroy} from "svelte"
+  import type {Readable} from "svelte/store"
+  import type {Editor} from "svelte-tiptap"
   import {page} from "$app/stores"
-  import {sortBy, append, now} from "@welshman/lib"
+  import {sortBy, append, now, ctx} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent, DELETE} from "@welshman/util"
   import {formatTimestampAsDate, publishThunk} from "@welshman/app"
@@ -47,6 +50,15 @@
 
   const assertEvent = (e: any) => e as TrustedEvent
 
+  const replyTo = (event: TrustedEvent) => {
+    const relays = ctx.app.router.Event(event).getUrls()
+    const nevent = nip19.neventEncode({...event, relays})
+
+    $editor.commands.insertNEvent({nevent})
+    $editor.commands.insertContent("\n")
+    $editor.commands.focus()
+  }
+
   const onSubmit = ({content, tags}: EventContent) =>
     publishThunk({
       relays: [url],
@@ -55,6 +67,7 @@
     })
 
   let loading = true
+  let editor: Readable<Editor>
   let elements: Element[] = []
 
   $: {
@@ -142,8 +155,8 @@
       {#if type === "date"}
         <Divider>{value}</Divider>
       {:else}
-        <div in:slide>
-          <ChannelMessage {url} {room} event={assertEvent(value)} {showPubkey} />
+        <div in:slide class:-mt-4={!showPubkey}>
+          <ChannelMessage {url} {room} {replyTo} event={assertEvent(value)} {showPubkey} />
         </div>
       {/if}
     {/each}
@@ -157,5 +170,5 @@
       </Spinner>
     </p>
   </div>
-  <ChannelCompose {content} {onSubmit} />
+  <ChannelCompose bind:editor {content} {onSubmit} />
 </div>

src/routes/spaces/[relay]/threads/+page.svelte

@@ -2,7 +2,7 @@
   import {onMount} from "svelte"
   import {page} from "$app/stores"
   import {sortBy, sleep, uniqBy, now} from "@welshman/lib"
-  import {getListTags, getPubkeyTagValues} from "@welshman/util"
+  import {getListTags, getPubkeyTagValues, LOCAL_RELAY_URL} from "@welshman/util"
   import type {TrustedEvent} from "@welshman/util"
   import {feedsFromFilters, makeIntersectionFeed, makeRelayFeed} from "@welshman/feeds"
   import {nthEq} from "@welshman/lib"
@@ -72,8 +72,21 @@
     })
 
     const unsub = subscribePersistent({
-      relays: [url],
-      filters: [{kinds: [COMMENT], "#K": [String(THREAD)], since: now()}],
+      relays: [url, LOCAL_RELAY_URL],
+      filters: [
+        {kinds: [THREAD], since: now()},
+        {kinds: [COMMENT], "#K": [String(THREAD)], since: now()},
+      ],
+      onEvent: (event: TrustedEvent) => {
+        if (event.kind === THREAD) {
+          const index = Math.max(
+            0,
+            events.findIndex(e => e.created_at < event.created_at),
+          )
+
+          events = [...events.slice(0, index), event, ...events.slice(index)]
+        }
+      },
     })
 
     return () => {