Fix threads

src/app/components/Content.svelte

@@ -50,6 +50,8 @@
     return false
   }
 
+  const isStartAndEnd = (i: number) => Boolean(isBoundary(i - 1) && isBoundary(i + 1))
+
   const isStartOrEnd = (i: number) => Boolean(isBoundary(i - 1) || isBoundary(i + 1))
 
   const isBlock = (i: number) => {
@@ -81,7 +83,7 @@
       {:else if isTopic(parsed)}
         <ContentTopic value={parsed.value} />
       {:else if isCode(parsed)}
-        <ContentCode value={parsed.value} />
+        <ContentCode value={parsed.value} isBlock={isStartAndEnd(i)} />
       {:else if isCashu(parsed) || isInvoice(parsed)}
         <ContentToken value={parsed.value} />
       {:else if isLink(parsed)}

src/app/components/ContentCode.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
   export let value
+  export let isBlock
 </script>
 
-<pre>
-  <code class="link-content block w-full">
-    {value}
-  </code>
-</pre>
+<code class="link-content w-full" class:block={isBlock}>
+  {value}
+</code>

src/app/components/ThreadItem.svelte

@@ -1,29 +1,32 @@
 <script lang="ts">
   import {nip19} from "nostr-tools"
   import {ctx} from "@welshman/lib"
+  import {repository} from "@welshman/app"
+  import {getReplyFilters} from "@welshman/util"
+  import {deriveEvents} from "@welshman/store"
   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
+  export let event
 
-  const relays = ctx.app.router.Event(root).getUrls()
-  const nevent = nip19.neventEncode({...root, relays})
+  const replies = deriveEvents(repository, {filters: getReplyFilters([event])})
+  const relays = ctx.app.router.Event(event).getUrls()
+  const nevent = nip19.neventEncode({...event, relays})
 </script>
 
 <div class="flex flex-col items-end">
-  <NoteCard event={root} class="card2 bg-alt w-full">
+  <NoteCard {event} class="card2 bg-alt w-full">
     <div class="ml-12">
-      <Content event={root} />
+      <Content {event} />
     </div>
   </NoteCard>
   <Link
     href={entityLink(nevent)}
     class="btn btn-neutral z-feature -mt-6 mr-4 flex items-center gap-2 rounded-full">
     <Icon icon="chat-round" />
-    <span>{replies.length}</span>
+    <span>{$replies.length}</span>
   </Link>
 </div>

src/app/state.ts

@@ -17,7 +17,6 @@ import {
 } from "@welshman/lib"
 import {
   getIdFilters,
-  NOTE,
   WRAP,
   RELAYS,
   REACTION,
@@ -27,8 +26,6 @@ import {
   EVENT_TIME,
   getRelayTagValues,
   isShareableRelayUrl,
-  getAncestorTags,
-  getAncestorTagValues,
   getPubkeyTagValues,
   isHashedEvent,
   displayProfile,
@@ -60,7 +57,7 @@ import {
 } from "@welshman/app"
 import type {AppSyncOpts} from "@welshman/app"
 import type {SubscribeRequestWithHandlers} from "@welshman/net"
-import {throttled, deriveEvents, deriveEventsMapped, withGetter} from "@welshman/store"
+import {deriveEvents, deriveEventsMapped, withGetter} from "@welshman/store"
 
 export const ROOM = "~"
 
@@ -394,46 +391,6 @@ export const eventsByUrl = derived([trackerStore, events], ([$tracker, $events])
   return eventsByUrl
 })
 
-// Threads
-
-export type Thread = {
-  root: TrustedEvent
-  replies: TrustedEvent[]
-}
-
-export const notes = deriveEvents(repository, {filters: [{kinds: [NOTE]}]})
-
-export const threadsByUrl = derived(
-  [throttled(300, trackerStore), throttled(300, notes)],
-  ([$tracker, $notes]) => {
-    const threadsByUrl = new Map<string, Thread[]>()
-    const [parents, children] = partition(e => getAncestorTags(e.tags).replies.length === 0, $notes)
-
-    for (const event of parents) {
-      for (const url of $tracker.getRelays(event.id)) {
-        pushToMapKey(threadsByUrl, url, {root: event, replies: []})
-      }
-    }
-
-    for (const event of children) {
-      const [id] = getAncestorTagValues(event.tags).replies
-
-      for (const url of $tracker.getRelays(event.id)) {
-        const threads = threadsByUrl.get(url) || []
-        const thread = threads.find(thread => thread.root.id === id)
-
-        if (!thread) {
-          continue
-        }
-
-        thread.replies.push(event)
-      }
-    }
-
-    return threadsByUrl
-  },
-)
-
 // Rooms
 
 export const roomsByUrl = derived(channels, $channels => {

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

@@ -1,7 +1,9 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {sortBy} from "@welshman/lib"
+  import {NOTE} from "@welshman/util"
+  import {nthEq, sortBy} from "@welshman/lib"
+  import {repository, trackerStore} from "@welshman/app"
   import {createScroller} from "@lib/html"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -10,7 +12,7 @@
   import ThreadItem from "@app/components/ThreadItem.svelte"
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
   import {pushModal} from "@app/modal"
-  import {threadsByUrl, decodeNRelay} from "@app/state"
+  import {decodeNRelay} from "@app/state"
 
   const url = decodeNRelay($page.params.nrelay)
 
@@ -20,7 +22,12 @@
   let loading = true
   let element: Element
 
-  $: threads = sortBy(thread => -thread.root.created_at, $threadsByUrl.get(url) || [])
+  $: events = sortBy(
+    e => -e.created_at,
+    Array.from($trackerStore.getIds(url))
+      .map(id => repository.eventsById.get(id)!)
+      .filter(e => e?.kind === NOTE && !e.tags.some(nthEq(0, "e"))),
+  )
 
   onMount(() => {
     const scroller = createScroller({
@@ -46,14 +53,14 @@
     <strong slot="title">Threads</strong>
   </PageBar>
   <div class="flex flex-grow flex-col gap-2 overflow-auto p-2">
-    {#each threads.slice(0, limit) as { root, replies } (root.id)}
-      <ThreadItem {root} {replies} />
+    {#each events.slice(0, limit) as event (event.id)}
+      <ThreadItem {event} />
     {/each}
     <p class="flex h-10 items-center justify-center py-20">
       <Spinner {loading}>
         {#if loading}
           Looking for threads...
-        {:else if threads.length === 0}
+        {:else if events.length === 0}
           No threads found.
         {/if}
       </Spinner>