Update to new thunk stuff

src/app/components/ChannelMessage.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import {hash} from "@welshman/lib"
-  import {now} from "@welshman/lib"
+  import {hash, now} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {
     thunks,
@@ -9,6 +8,7 @@
     deriveProfileDisplay,
     formatTimestampAsDate,
     formatTimestampAsTime,
+    thunkIsComplete,
   } from "@welshman/app"
   import {isMobile} from "@lib/html"
   import TapTarget from "@lib/components/TapTarget.svelte"
@@ -42,6 +42,7 @@
   const profile = deriveProfile(event.pubkey)
   const profileDisplay = deriveProfileDisplay(event.pubkey)
   const [_, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
+  const hideMenuButton = $derived($thunk && !thunkIsComplete($thunk))
 
   const reply = () => replyTo(event)
 
@@ -99,7 +100,7 @@
   <div class="row-2 ml-10 mt-1">
     <ReactionSummary {url} {event} {onReactionClick} reactionClass="tooltip-right" />
   </div>
-  {#if !isMobile}
+  {#if !isMobile && !hideMenuButton}
     <button
       class="join absolute right-1 top-1 border border-solid border-neutral text-xs opacity-0 transition-all"
       class:group-hover:opacity-100={!isMobile}>

src/app/components/ThunkStatus.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
-  import {get} from "svelte/store"
+  import {nth} from "@welshman/lib"
   import {PublishStatus} from "@welshman/net"
-  import {mergeThunks, publishThunk} from "@welshman/app"
-  import type {Thunk, MergedThunk} from "@welshman/app"
-  import {throttled} from "@welshman/store"
+  import {
+    MergedThunk,
+    publishThunk,
+    isMergedThunk,
+    thunkIsComplete,
+    thunkHasStatus,
+  } from "@welshman/app"
+  import type {Thunk} from "@welshman/app"
+  import {fade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
-  import Button from "@lib/components/Button.svelte"
   import ThunkStatusDetail from "@app/components/ThunkStatusDetail.svelte"
   import {userSettingValues} from "@app/state"
 
@@ -17,31 +22,34 @@
 
   let {thunk, ...restProps}: Props = $props()
 
-  const {Pending, Failure, Timeout} = PublishStatus
-
   const abort = () => thunk.controller.abort()
 
   const retry = () => {
-    thunk = (thunk as any).thunks
-      ? mergeThunks((thunk as MergedThunk).thunks.map(t => publishThunk(t.request)))
-      : publishThunk((thunk as Thunk).request)
+    thunk = isMergedThunk(thunk)
+      ? new MergedThunk(thunk.thunks.map(t => publishThunk(t.options)))
+      : publishThunk(thunk.options)
   }
 
-  const status = $derived(throttled(300, thunk.status))
-  const ps = $derived(Object.values($status))
-  const canCancel = $derived(ps.length === 0 && $userSettingValues.send_delay > 0)
-  const isFailure = $derived(!canCancel && ps.every(s => [Failure, Timeout].includes(s.status)))
-  const failure = $derived(
-    Object.entries($status).find(([url, s]) => [Failure, Timeout].includes(s.status)),
+  const statuses = $derived(Object.entries($thunk.status))
+  const isSending = $derived(thunkHasStatus($thunk, PublishStatus.Sending))
+  const canCancel = $derived(isSending && $userSettingValues.send_delay > 0)
+  const failedUrls = $derived(
+    statuses
+      .filter(([_, status]) => [PublishStatus.Failure, PublishStatus.Timeout].includes(status))
+      .map(nth(1)),
   )
 
-  let isPending = $state(Object.values(get(thunk.status)).some(s => s.status == Pending))
+  const showFailure = $derived(thunkIsComplete($thunk) && failedUrls.length > 0)
+
+  let isPending = $state(thunkHasStatus($thunk, PublishStatus.Pending))
+
+  const showPending = $derived(canCancel || isPending)
 
   // Delay updating isPending so users can see that the message is sent
   $effect(() => {
-    isPending = isPending || ps.some(s => s.status === Pending)
+    isPending = isPending || thunkHasStatus($thunk, PublishStatus.Pending)
 
-    if (!ps.some(s => s.status === Pending)) {
+    if (!thunkHasStatus($thunk, PublishStatus.Pending)) {
       setTimeout(() => {
         isPending = false
       }, 2000)
@@ -49,30 +57,43 @@
   })
 </script>
 
-{#if isFailure && failure}
-  {@const [url, {message, status}] = failure}
-  <div class="flex justify-end px-1 text-xs {restProps.class}">
-    <Tippy
-      class="flex items-center {restProps.class}"
-      component={ThunkStatusDetail}
-      props={{url, message, status, retry}}
-      params={{interactive: true}}>
-      {#snippet children()}
-        <span class="flex cursor-pointer items-center gap-1 text-error">
-          <Icon icon="danger" size={3} />
-          <span>Failed to send!</span>
-        </span>
-      {/snippet}
-    </Tippy>
-  </div>
-{:else if canCancel || isPending}
-  <div class="flex justify-end px-1 text-xs {restProps.class}">
-    <span class="flex items-center gap-1 {restProps.class}">
-      <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px"></span>
-      <span class="opacity-50">Sending...</span>
-      {#if canCancel}
-        <Button class="link" onclick={abort}>Cancel</Button>
+{#if showFailure || showPending}
+  <div class="relative" out:fade>
+    <div class="absolute right-0 top-2">
+      {#if showFailure}
+        {@const url = failedUrls[0]}
+        {@const status = $thunk.status[url]}
+        {@const message = $thunk.details[url]}
+        <div class="flex justify-end px-1 text-xs {restProps.class}">
+          <Tippy
+            class="flex items-center {restProps.class}"
+            component={ThunkStatusDetail}
+            props={{url, message, status, retry}}
+            params={{interactive: true}}>
+            {#snippet children()}
+              <span class="flex cursor-pointer items-center gap-1 text-error">
+                <Icon icon="danger" size={3} />
+                <span>Failed to send!</span>
+              </span>
+            {/snippet}
+          </Tippy>
+        </div>
+      {:else if canCancel || isPending}
+        <div class="flex justify-end px-1 text-xs {restProps.class}">
+          <span class="flex items-center gap-1 {restProps.class}">
+            <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px"></span>
+            <span class="opacity-50">Sending...</span>
+            <button
+              type="button"
+              class="underline transition-all"
+              class:link={canCancel}
+              class:opacity-25={!canCancel}
+              onclick={abort}>
+              Cancel
+            </button>
+          </span>
+        </div>
       {/if}
-    </span>
+    </div>
   </div>
 {/if}