Add chat undo

src/app/components/ChatMessage.svelte

@@ -10,15 +10,16 @@
     formatTimestampAsTime,
     pubkey,
   } from "@welshman/app"
+  import type {MergedThunk} from "@welshman/app"
   import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
   import {repository} from "@welshman/app"
-  import {slideAndFade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import Delay from "@lib/components/Delay.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
+  import ThunkStatus from "@app/components/ThunkStatus.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ChatMessageMenu from "@app/components/ChatMessageMenu.svelte"
   import {colors, displayReaction} from "@app/state"
@@ -26,6 +27,7 @@
   import {makeDelete, makeReaction, sendWrapped} from "@app/commands"
 
   export let event: TrustedEvent
+  export let thunk: MergedThunk
   export let pubkeys: string[]
   export let showPubkey = false
 
@@ -56,77 +58,77 @@
   let popoverIsVisible = false
 </script>
 
-<Delay>
-  <div
-    in:slideAndFade
-    class="group chat flex items-center justify-end gap-1"
-    class:chat-start={event.pubkey !== $pubkey}
-    class:flex-row-reverse={event.pubkey !== $pubkey}
-    class:chat-end={event.pubkey === $pubkey}>
-    <Tippy
-      bind:popover
-      component={ChatMessageMenu}
-      props={{event, pubkeys, popover}}
-      params={{
-        interactive: true,
-        trigger: "manual",
-        onShow() {
-          popoverIsVisible = true
-        },
-        onHidden() {
-          popoverIsVisible = false
-        },
-      }}>
-      <Button class="opacity-0 transition-all group-hover:opacity-100" on:click={togglePopover}>
-        <Icon icon="menu-dots" size={4} />
-      </Button>
-    </Tippy>
-    <div class="flex flex-col">
-      <div class="chat-bubble mx-1 max-w-sm">
-        <div class="flex w-full items-start gap-2">
+<div
+  class="group chat flex items-center justify-end gap-1"
+  class:chat-start={event.pubkey !== $pubkey}
+  class:flex-row-reverse={event.pubkey !== $pubkey}
+  class:chat-end={event.pubkey === $pubkey}>
+  <Tippy
+    bind:popover
+    component={ChatMessageMenu}
+    props={{event, pubkeys, popover}}
+    params={{
+      interactive: true,
+      trigger: "manual",
+      onShow() {
+        popoverIsVisible = true
+      },
+      onHidden() {
+        popoverIsVisible = false
+      },
+    }}>
+    <Button class="opacity-0 transition-all group-hover:opacity-100" on:click={togglePopover}>
+      <Icon icon="menu-dots" size={4} />
+    </Button>
+  </Tippy>
+  <div class="flex flex-col">
+    <div class="chat-bubble mx-1 max-w-sm">
+      <div class="flex w-full items-start gap-2">
+        {#if showPubkey}
+          <Button on:click={showProfile}>
+            <Avatar
+              src={$profile?.picture}
+              class="border border-solid border-base-content"
+              size={8} />
+          </Button>
+        {/if}
+        <div class="-mt-1 flex-grow pr-1">
           {#if showPubkey}
-            <Button on:click={showProfile}>
-              <Avatar
-                src={$profile?.picture}
-                class="border border-solid border-base-content"
-                size={8} />
-            </Button>
-          {/if}
-          <div class="-mt-1 flex-grow pr-1">
-            {#if showPubkey}
-              <div class="flex items-center gap-2">
-                <Button class="font-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
-                  {$profileDisplay}
-                </Button>
-                <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
-              </div>
-            {/if}
-            <div class="text-sm">
-              <Content showEntire {event} />
+            <div class="flex items-center gap-2">
+              <Button class="font-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
+                {$profileDisplay}
+              </Button>
+              <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
             </div>
+          {/if}
+          <div class="text-sm">
+            <Content showEntire {event} />
+            {#if thunk}
+              <ThunkStatus {thunk} />
+            {/if}
           </div>
         </div>
       </div>
-      {#if $reactions.length > 0 || $zaps.length > 0}
-        <div class="relative z-feature -mt-4 flex justify-end text-xs">
-          {#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]}
-            {@const isOwn = events.some(e => e.pubkey === $pubkey)}
-            {@const onClick = () => onReactionClick(content, events)}
-            <button
-              type="button"
-              class="flex-inline btn btn-neutral btn-xs mr-2 gap-1 rounded-full"
-              class:border={isOwn}
-              class:border-solid={isOwn}
-              class:border-primary={isOwn}
-              on:click|stopPropagation={onClick}>
-              <span>{displayReaction(content)}</span>
-              {#if events.length > 1}
-                <span>{events.length}</span>
-              {/if}
-            </button>
-          {/each}
-        </div>
-      {/if}
     </div>
+    {#if $reactions.length > 0 || $zaps.length > 0}
+      <div class="relative z-feature -mt-4 flex justify-end text-xs">
+        {#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]}
+          {@const isOwn = events.some(e => e.pubkey === $pubkey)}
+          {@const onClick = () => onReactionClick(content, events)}
+          <button
+            type="button"
+            class="flex-inline btn btn-neutral btn-xs mr-2 gap-1 rounded-full"
+            class:border={isOwn}
+            class:border-solid={isOwn}
+            class:border-primary={isOwn}
+            on:click|stopPropagation={onClick}>
+            <span>{displayReaction(content)}</span>
+            {#if events.length > 1}
+              <span>{events.length}</span>
+            {/if}
+          </button>
+        {/each}
+      </div>
+    {/if}
   </div>
-</Delay>
+</div>

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>