Add chat undo

src/app/components/ThunkStatus.svelte

@@ -1,37 +1,37 @@
 <script lang="ts">
   import {displayRelayUrl} from "@welshman/util"
   import {PublishStatus} from "@welshman/net"
-  import type {Thunk} from "@welshman/app"
+  import type {Thunk, MergedThunk} from "@welshman/app"
   import Icon from '@lib/components/Icon.svelte'
   import Button from '@lib/components/Button.svelte'
 
-  export let thunk: Thunk
+  export let thunk: Thunk | MergedThunk
 
   const {status} = thunk
   const {Pending, Success, Failure, Timeout} = PublishStatus
 
-  const undo = () => thunk.controller.abort()
+  const abort = () => thunk.controller.abort()
 
   $: ps = Object.values($status)
-  $: canUndo = ps.length === 0
+  $: canCancel = ps.length === 0
   $: isPending = ps.some(s => s.status === Pending)
   $: isSuccess = ps.some(s => s.status === Success)
-  $: isFailure = !canUndo && ps.every(s => [Failure, Timeout].includes(s.status))
+  $: isFailure = !canCancel && ps.every(s => [Failure, Timeout].includes(s.status))
   $: failure = Object.entries($status).find(([url, s]) => [Failure, Timeout].includes(s.status))
 </script>
 
-{#if canUndo || isPending}
-  <span class="flex gap-1">
+{#if canCancel || isPending}
+  <span class="flex gap-1 mt-2 items-center">
     <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
     <span class="opacity-50">Sending...</span>
-    {#if canUndo}
-      <Button class="link" on:click={undo}>Undo</Button>
+    {#if canCancel}
+      <Button class="link" on:click={abort}>Cancel</Button>
     {/if}
   </span>
 {:else if isFailure && failure}
   {@const [url, {message}] = failure}
   <span
-    class="flex tooltip cursor-pointer gap-1"
+    class="flex tooltip cursor-pointer gap-1 mt-2"
     data-tip="{message} ({displayRelayUrl(url)})">
     <Icon icon="danger" class="translate-y-px" size={3} />
     <span class="opacity-50">Failed to send!</span>