From 86d082b1ab202761df7aacec6e975dd5ab6da149 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Thu, 21 Nov 2024 11:01:34 -0800
Subject: [PATCH] Re-work thread sorting and loading, fix some display bugs
 with reaction tooltips, fix thunk status loading indicator

---
 src/app/components/ChannelMessage.svelte      |  2 +-
 src/app/components/ChatMessage.svelte         | 45 ++++++-----
 src/app/components/ReactionSummary.svelte     |  6 +-
 src/app/components/ThreadActions.svelte       |  2 +-
 src/app/components/ThreadReply.svelte         |  2 +-
 src/app/components/ThunkStatus.svelte         |  8 +-
 src/app/components/ThunkStatusDetail.svelte   |  2 +-
 src/routes/+layout.svelte                     |  6 +-
 .../spaces/[relay]/threads/+page.svelte       | 76 ++++++++-----------
 9 files changed, 74 insertions(+), 75 deletions(-)

diff --git a/src/app/components/ChannelMessage.svelte b/src/app/components/ChannelMessage.svelte
index e6bee1e9..075a799e 100644
--- a/src/app/components/ChannelMessage.svelte
+++ b/src/app/components/ChannelMessage.svelte
@@ -109,7 +109,7 @@
     {#if !isHead}
       <ReplySummary relays={[url]} {event} on:click={onClick} />
     {/if}
-    <ReactionSummary relays={[url]} {event} {onReactionClick} />
+    <ReactionSummary relays={[url]} {event} {onReactionClick} reactionClass="tooltip-right" />
   </div>
   <button
     class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"
diff --git a/src/app/components/ChatMessage.svelte b/src/app/components/ChatMessage.svelte
index 0f2ac8d2..a87a182a 100644
--- a/src/app/components/ChatMessage.svelte
+++ b/src/app/components/ChatMessage.svelte
@@ -31,6 +31,7 @@
   export let showPubkey = false
 
   const thunk = $thunks[event.id]
+  const isOwn = event.pubkey === $pubkey
   const profile = deriveProfile(event.pubkey)
   const profileDisplay = deriveProfileDisplay(event.pubkey)
   const [_, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
@@ -62,9 +63,9 @@
 <div
   data-event={event.id}
   class="group chat flex items-center justify-end gap-1 px-2"
-  class:chat-start={event.pubkey !== $pubkey}
-  class:flex-row-reverse={event.pubkey !== $pubkey}
-  class:chat-end={event.pubkey === $pubkey}>
+  class:chat-start={!isOwn}
+  class:flex-row-reverse={!isOwn}
+  class:chat-end={isOwn}>
   <Tippy
     bind:popover
     component={ChatMessageMenu}
@@ -87,27 +88,29 @@
       <Icon icon="menu-dots" size={4} />
     </button>
   </Tippy>
-  <div class="flex min-w-0 flex-col" class:items-end={event.pubkey === $pubkey}>
+  <div class="flex min-w-0 flex-col" class:items-end={isOwn}>
     <LongPress
       class="bg-alt chat-bubble mx-1 flex cursor-auto flex-col gap-1 text-left lg:max-w-2xl"
       onLongPress={showMobileMenu}>
-      {#if showPubkey && event.pubkey !== $pubkey}
+      {#if showPubkey}
         <div class="flex items-center gap-2">
-          <Link external href={pubkeyLink(event.pubkey)} class="flex items-center gap-1">
-            <Avatar
-              src={$profile?.picture}
-              class="border border-solid border-base-content"
-              size={4} />
-            <div class="flex items-center gap-2">
-              <Link
-                external
-                href={pubkeyLink(event.pubkey)}
-                class="text-sm font-bold"
-                style="color: {colorValue}">
-                {$profileDisplay}
-              </Link>
-            </div>
-          </Link>
+          {#if !isOwn}
+            <Link external href={pubkeyLink(event.pubkey)} class="flex items-center gap-1">
+              <Avatar
+                src={$profile?.picture}
+                class="border border-solid border-base-content"
+                size={4} />
+              <div class="flex items-center gap-2">
+                <Link
+                  external
+                  href={pubkeyLink(event.pubkey)}
+                  class="text-sm font-bold"
+                  style="color: {colorValue}">
+                  {$profileDisplay}
+                </Link>
+              </div>
+            </Link>
+          {/if}
           <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
         </div>
       {/if}
@@ -117,7 +120,7 @@
     </LongPress>
     <div class="row-2 z-feature -mt-1 ml-4">
       <ReplySummary {event} />
-      <ReactionSummary {event} {onReactionClick} />
+      <ReactionSummary {event} {onReactionClick} noTooltip />
     </div>
   </div>
 </div>
diff --git a/src/app/components/ReactionSummary.svelte b/src/app/components/ReactionSummary.svelte
index fabb0a6e..3670291a 100644
--- a/src/app/components/ReactionSummary.svelte
+++ b/src/app/components/ReactionSummary.svelte
@@ -5,11 +5,14 @@
   import {deriveEvents} from "@welshman/store"
   import {pubkey, repository, load, displayProfileByPubkey} from "@welshman/app"
   import {displayList} from "@lib/util"
+  import {isMobile} from "@lib/html"
   import {displayReaction} from "@app/state"
 
   export let event
   export let onReactionClick
   export let relays: string[] = []
+  export let reactionClass = ""
+  export let noTooltip = false
 
   const filters = [{kinds: [REACTION], "#e": [event.id]}]
   const reactions = deriveEvents(repository, {filters})
@@ -35,7 +38,8 @@
       <button
         type="button"
         data-tip={tooltip}
-        class="flex-inline btn btn-neutral btn-xs tooltip tooltip-right gap-1 rounded-full"
+        class="flex-inline btn btn-neutral btn-xs gap-1 rounded-full {reactionClass}"
+        class:tooltip={!noTooltip && !isMobile}
         class:border={isOwn}
         class:border-solid={isOwn}
         class:border-primary={isOwn}
diff --git a/src/app/components/ThreadActions.svelte b/src/app/components/ThreadActions.svelte
index 0971f897..fd7ccafd 100644
--- a/src/app/components/ThreadActions.svelte
+++ b/src/app/components/ThreadActions.svelte
@@ -57,7 +57,7 @@
 
 <div class="flex flex-wrap items-center justify-between gap-2">
   <div class="flex flex-grow flex-wrap justify-end gap-2">
-    <ReactionSummary relays={[url]} {event} {onReactionClick} />
+    <ReactionSummary relays={[url]} {event} {onReactionClick} reactionClass="tooltip-left" />
     {#if $deleted}
       <div class="btn btn-error btn-xs rounded-full">Deleted</div>
     {:else if thunk}
diff --git a/src/app/components/ThreadReply.svelte b/src/app/components/ThreadReply.svelte
index 2c5c4143..60d4dce2 100644
--- a/src/app/components/ThreadReply.svelte
+++ b/src/app/components/ThreadReply.svelte
@@ -47,7 +47,7 @@
   in:fly
   out:slideAndFade
   on:submit|preventDefault={submit}
-  class="card2 sticky bottom-2 z-feature mx-2 mt-2 bg-neutral">
+  class="card2 sticky bottom-2 z-feature mx-2 mt-4 bg-neutral">
   <div class="relative">
     <div class="note-editor flex-grow overflow-hidden">
       <EditorContent editor={$editor} />
diff --git a/src/app/components/ThunkStatus.svelte b/src/app/components/ThunkStatus.svelte
index 75b6611f..4ced6578 100644
--- a/src/app/components/ThunkStatus.svelte
+++ b/src/app/components/ThunkStatus.svelte
@@ -30,8 +30,10 @@
   $: isFailure = !canCancel && ps.every(s => [Failure, Timeout].includes(s.status))
   $: failure = Object.entries($status).find(([url, s]) => [Failure, Timeout].includes(s.status))
 
+  // Delay updating isPending so users can see that the message is sent
   $: {
-    // Delay updating isPending so users can see that the message is sent
+    isPending = isPending || ps.some(s => s.status == Pending)
+
     if (!ps.some(s => s.status == Pending)) {
       setTimeout(() => {
         isPending = false
@@ -44,11 +46,11 @@
   {#if isFailure && failure}
     {@const [url, {message, status}] = failure}
     <Tippy
-      class={$$props.class}
+      class="flex items-center {$$props.class}"
       component={ThunkStatusDetail}
       props={{url, message, status, retry}}
       params={{interactive: true}}>
-      <span class="tooltip flex cursor-pointer items-center gap-1">
+      <span class="flex cursor-pointer items-center gap-1">
         <Icon icon="danger" size={3} />
         <span class="opacity-50">Failed to send!</span>
       </span>
diff --git a/src/app/components/ThunkStatusDetail.svelte b/src/app/components/ThunkStatusDetail.svelte
index 0f889587..ec1c8d26 100644
--- a/src/app/components/ThunkStatusDetail.svelte
+++ b/src/app/components/ThunkStatusDetail.svelte
@@ -19,7 +19,7 @@
   }
 </script>
 
-<div class="card2 bg-alt col-2">
+<div class="card2 bg-alt col-2 shadow-2xl">
   <p>
     Failed to publish to {displayRelayUrl(url)}: {message}.
   </p>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index eea7fad5..3119a145 100644
--- a/src/routes/+layout.svelte
+++ b/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},
diff --git a/src/routes/spaces/[relay]/threads/+page.svelte b/src/routes/spaces/[relay]/threads/+page.svelte
index eba4a1e3..66a762cb 100644
--- a/src/routes/spaces/[relay]/threads/+page.svelte
+++ b/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>