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

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"

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>

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}

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}

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} />

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>

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>