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

2024-11-21 11:01:34 -08:00
parent 659403c308
commit 86d082b1ab
9 changed files with 74 additions and 75 deletions
@@ -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"
@@ -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>
@@ -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}
@@ -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}
@@ -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} />
@@ -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>
@@ -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>
@@ -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},
@@ -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>