Re-work thread sorting and loading, fix some display bugs with reaction tooltips, fix thunk status loading indicator

src/routes/+layout.svelte

@@ -193,10 +193,10 @@
       }
 
       // Listen for space data, populate space-based notifications
-      let unsubRooms: any
+      let unsubSpaces: any
 
       userMembership.subscribe($membership => {
-        unsubRooms?.()
+        unsubSpaces?.()
 
         const since = ago(30)
         const rooms = uniq(getMembershipRooms($membership).map(m => m.room)).concat(GENERAL)
@@ -213,7 +213,7 @@
         })
 
         // Listen for new notifications/memberships
-        unsubRooms = subscribePersistent({
+        unsubSpaces = subscribePersistent({
           relays,
           filters: [
             {kinds: [THREAD], since},

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

@@ -1,11 +1,11 @@
 <script lang="ts">
   import {onMount} from "svelte"
+  import {derived} from "svelte/store"
   import {page} from "$app/stores"
-  import {sortBy, sleep, uniqBy, now} from "@welshman/lib"
-  import {getListTags, getPubkeyTagValues, LOCAL_RELAY_URL} from "@welshman/util"
-  import type {TrustedEvent} from "@welshman/util"
+  import {sortBy, min, nthEq, sleep} from "@welshman/lib"
+  import {getListTags, getPubkeyTagValues} from "@welshman/util"
+  import {throttled} from "@welshman/store"
   import {feedsFromFilters, makeIntersectionFeed, makeRelayFeed} from "@welshman/feeds"
-  import {nthEq} from "@welshman/lib"
   import {createFeedController, userMutes} from "@welshman/app"
   import {createScroller, type Scroller} from "@lib/html"
   import {fly} from "@lib/transition"
@@ -16,40 +16,50 @@
   import MenuSpaceButton from "@app/components/MenuSpaceButton.svelte"
   import ThreadItem from "@app/components/ThreadItem.svelte"
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
-  import {THREAD, COMMENT, decodeRelay, getEventsForUrl} from "@app/state"
-  import {subscribePersistent} from "@app/commands"
+  import {THREAD, COMMENT, decodeRelay, deriveEventsForUrl} from "@app/state"
   import {THREAD_FILTERS, setChecked} from "@app/notifications"
   import {pushModal} from "@app/modal"
 
   const url = decodeRelay($page.params.relay)
-
+  const threads = deriveEventsForUrl(url, [{kinds: [THREAD]}])
+  const comments = deriveEventsForUrl(url, [{kinds: [COMMENT], "#K": [String(THREAD)]}])
   const mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
 
+  const events = throttled(
+    800,
+    derived([threads, comments], ([$threads, $comments]) => {
+      const scores = new Map<string, number>()
+
+      for (const comment of $comments) {
+        const id = comment.tags.find(nthEq(0, "E"))?.[1]
+
+        if (id) {
+          scores.set(id, min([scores.get(id), -comment.created_at]))
+        }
+      }
+
+      return sortBy(
+        e => min([scores.get(e.id), -e.created_at]),
+        $threads.filter(e => !mutedPubkeys.includes(e.pubkey)),
+      )
+    }),
+  )
+
   const createThread = () => pushModal(ThreadCreate, {url})
 
   const ctrl = createFeedController({
     useWindowing: true,
     feed: makeIntersectionFeed(makeRelayFeed(url), feedsFromFilters(THREAD_FILTERS)),
-    onEvent: (event: TrustedEvent) => {
-      if (
-        event.kind === THREAD &&
-        !event.tags.some(nthEq(0, "e")) &&
-        !mutedPubkeys.includes(event.pubkey)
-      ) {
-        buffer.push(event)
-      }
-    },
     onExhausted: () => {
       loading = false
     },
   })
 
+  let limit = 10
   let loading = true
   let unmounted = false
   let element: Element
   let scroller: Scroller
-  let buffer: TrustedEvent[] = []
-  let events: TrustedEvent[] = sortBy(e => -e.created_at, getEventsForUrl(url, [{kinds: [THREAD]}]))
 
   onMount(() => {
     // Element is frequently not defined. I don't know why
@@ -60,10 +70,9 @@
           delay: 300,
           threshold: 3000,
           onScroll: () => {
-            buffer = sortBy(e => -e.created_at, buffer)
-            events = uniqBy(e => e.id, [...events, ...buffer.splice(0, 5)])
+            limit += 10
 
-            if (buffer.length < 50) {
+            if ($events.length - limit < 10) {
               ctrl.load(50)
             }
           },
@@ -71,26 +80,7 @@
       }
     })
 
-    const unsub = subscribePersistent({
-      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 () => {
-      unsub()
       unmounted = true
       scroller?.stop()
       setChecked($page.url.pathname)
@@ -113,17 +103,17 @@
     </div>
   </PageBar>
   <div class="flex flex-grow flex-col gap-2 overflow-auto p-2">
-    {#each events as event (event.id)}
+    {#each $events as event (event.id)}
       <div in:fly>
         <ThreadItem {url} {event} />
       </div>
     {/each}
-    {#if loading || events.length === 0}
+    {#if loading || $events.length === 0}
       <p class="flex h-10 items-center justify-center py-20" out:fly>
         <Spinner {loading}>
           {#if loading}
             Looking for threads...
-          {:else if events.length === 0}
+          {:else if $events.length === 0}
             No threads found.
           {/if}
         </Spinner>