Use publishThunks

src/app/components/ThunkStatus.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import {get} from "svelte/store"
   import {PublishStatus} from "@welshman/net"
   import {mergeThunks, publishThunk} from "@welshman/app"
   import type {Thunk, MergedThunk} from "@welshman/app"
@@ -21,7 +22,7 @@
       : publishThunk((thunk as Thunk).request)
   }
 
-  let isPending = true
+  let isPending = Object.values(get(thunk.status)).some(s => s.status == Pending)
 
   $: status = throttled(300, thunk.status)
   $: ps = Object.values($status)
@@ -31,7 +32,7 @@
 
   $: {
     // Delay updating isPending so users can see that the message is sent
-    if (isFailure || !ps.some(s => s.status == Pending)) {
+    if (!ps.some(s => s.status == Pending)) {
       setTimeout(() => {
         isPending = false
       }, 2000)
@@ -39,25 +40,25 @@
   }
 </script>
 
-<div class="flex justify-end px-1 text-xs">
-  {#if canCancel || isPending}
-    <span class="mt-2 flex items-center gap-1">
+<div class="flex justify-end px-1 text-xs {$$props.class}">
+  {#if isFailure && failure}
+    {@const [url, {message, status}] = failure}
+    <Tippy
+      component={ThunkStatusDetail}
+      props={{url, message, status, retry}}
+      params={{interactive: true}}>
+      <span class="tooltip flex cursor-pointer items-center gap-1">
+        <Icon icon="danger" size={3} />
+        <span class="opacity-50">Failed to send!</span>
+      </span>
+    </Tippy>
+  {:else if canCancel || isPending}
+    <span class="flex items-center gap-1">
       <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
       <span class="opacity-50">Sending...</span>
       {#if canCancel}
         <Button class="link" on:click={abort}>Cancel</Button>
       {/if}
     </span>
-  {:else if isFailure && failure}
-    {@const [url, {message, status}] = failure}
-    <Tippy
-      component={ThunkStatusDetail}
-      props={{url, message, status, retry}}
-      params={{interactive: true}}>
-      <span class="tooltip mt-2 flex cursor-pointer items-center gap-1">
-        <Icon icon="danger" size={3} />
-        <span class="opacity-50">Failed to send!</span>
-      </span>
-    </Tippy>
   {/if}
 </div>