Add undo to channel messages

src/app/components/ChannelMessage.svelte

@@ -3,21 +3,20 @@
   import {hash, ellipsize, uniqBy, groupBy, now} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {deriveEvents, throttled} from "@welshman/store"
-  import {PublishStatus} from "@welshman/net"
   import {
-    publishStatusData,
     deriveProfile,
     deriveProfileDisplay,
     formatTimestampAsTime,
     pubkey,
   } from "@welshman/app"
-  import type {PublishStatusData} from "@welshman/app"
+  import type {Thunk} from "@welshman/app"
   import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
   import {repository} from "@welshman/app"
   import Icon from "@lib/components/Icon.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 ChannelThread from "@app/components/ChannelThread.svelte"
   import ChannelMessageEmojiButton from "@app/components/ChannelMessageEmojiButton.svelte"
   import ChannelMessageMenuButton from "@app/components/ChannelMessageMenuButton.svelte"
@@ -28,6 +27,7 @@
   export let url
   export let room
   export let event: TrustedEvent
+  export let thunk: Thunk
   export let showPubkey = false
   export let hideParent = false
 
@@ -40,13 +40,6 @@
   const rootHints = [rootTag?.[2]].filter(Boolean) as string[]
   const rootEvent = rootId ? deriveEvent(rootId, rootHints) : readable(null)
   const [colorName, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
-  const ps = throttled(
-    300,
-    derived(publishStatusData, $m => Object.values($m[event.id] || {})),
-  )
-
-  const findStatus = ($ps: PublishStatusData[], statuses: PublishStatus[]) =>
-    $ps.find(({status}) => statuses.includes(status))
 
   const openThread = () => {
     const root = $rootEvent || event
@@ -72,10 +65,6 @@
   $: rootPubkey = $rootEvent?.pubkey || rootTag?.[4]
   $: rootProfile = deriveProfile(rootPubkey || "")
   $: rootProfileDisplay = deriveProfileDisplay(rootPubkey || "")
-  $: isPublished = findStatus($ps, [PublishStatus.Success])
-  $: isPending = findStatus($ps, [PublishStatus.Pending]) && event.created_at > now() - 30
-  $: failure =
-    !isPending && !isPublished && findStatus($ps, [PublishStatus.Failure, PublishStatus.Timeout])
 </script>
 
 <button
@@ -110,18 +99,10 @@
       {/if}
       <div class="text-sm">
         <Content {event} />
-        {#if isPending}
-          <span class="flex-inline ml-1 gap-1">
-            <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
-            <span class="opacity-50">Sending...</span>
-          </span>
-        {:else if failure}
-          <span
-            class="flex-inline tooltip ml-1 cursor-pointer gap-1"
-            data-tip="{failure.message} ({displayRelayUrl(failure.url)})">
-            <Icon icon="danger" class="translate-y-px" size={3} />
-            <span class="opacity-50">Failed to send!</span>
-          </span>
+        {#if thunk}
+          <div class="badge">
+            <ThunkStatus {thunk} />
+          </div>
         {/if}
       </div>
     </div>

src/app/components/ChannelThread.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-  import {sortBy, append} from "@welshman/lib"
+  import {writable} from 'svelte/store'
+  import {assoc, sortBy, append} from "@welshman/lib"
   import {createEvent} from "@welshman/util"
   import type {EventContent, TrustedEvent} from "@welshman/util"
   import {repository, publishThunk} from "@welshman/app"
+  import type {Thunk} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
   import ChannelMessage from "@app/components/ChannelMessage.svelte"
   import ChannelCompose from "@app/components/ChannelCompose.svelte"
@@ -10,6 +12,8 @@
 
   export let url, room, event: TrustedEvent
 
+  const thunks = writable({} as Record<string, Thunk>)
+
   const replies = deriveEvents(repository, {
     filters: [{kinds: [REPLY], "#E": [event.id]}],
   })
@@ -38,16 +42,17 @@
     }
 
     const reply = createEvent(REPLY, {content, tags: append(tagRoom(room, url), tags)})
+    const thunk = publishThunk({event: reply, relays: [url]})
 
-    publishThunk({event: reply, relays: [url]})
+    thunks.update(assoc(thunk.event.id, thunk))
   }
 </script>
 
 <div class="col-2">
   <div class="overflow-auto pt-3">
-    <ChannelMessage {url} {room} {event} showPubkey />
+    <ChannelMessage {url} {room} {event} thunk={$thunks[event.id]} showPubkey />
     {#each sortBy(e => e.created_at, $replies) as reply (reply.id)}
-      <ChannelMessage {url} {room} event={reply} showPubkey hideParent />
+      <ChannelMessage {url} {room} event={reply} thunk={$thunks[reply.id]} showPubkey hideParent />
     {/each}
   </div>
   <div class="bottom-0 left-0 right-0">

src/app/components/ChatMessage.svelte

@@ -4,15 +4,12 @@
   import {hash, uniqBy, groupBy, now} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {deriveEvents, throttled} from "@welshman/store"
-  import {PublishStatus} from "@welshman/net"
   import {
-    publishStatusData,
     deriveProfile,
     deriveProfileDisplay,
     formatTimestampAsTime,
     pubkey,
   } from "@welshman/app"
-  import type {PublishStatusData} from "@welshman/app"
   import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
   import {repository} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
@@ -35,16 +32,9 @@
   const reactions = deriveEvents(repository, {filters: [{kinds: [REACTION], "#e": [event.id]}]})
   const zaps = deriveEvents(repository, {filters: [{kinds: [ZAP_RESPONSE], "#e": [event.id]}]})
   const [_, colorValue] = colors[parseInt(hash(event.pubkey)) % colors.length]
-  const ps = throttled(
-    300,
-    derived(publishStatusData, $m => Object.values($m[event.wrap!.id] || {})),
-  )
 
   const showProfile = () => pushDrawer(ProfileDetail, {pubkey: event.pubkey})
 
-  const findStatus = ($ps: PublishStatusData[], statuses: PublishStatus[]) =>
-    $ps.find(({status}) => statuses.includes(status))
-
   const onReactionClick = async (content: string, events: TrustedEvent[]) => {
     const reaction = events.find(e => e.pubkey === $pubkey)
     const template = reaction ? makeDelete({event}) : makeReaction({event, content})
@@ -62,11 +52,6 @@
 
   let popover: Instance
   let popoverIsVisible = false
-
-  $: isPublished = findStatus($ps, [PublishStatus.Success])
-  $: isPending = findStatus($ps, [PublishStatus.Pending]) && event.created_at > now() - 30
-  $: failure =
-    !isPending && !isPublished && findStatus($ps, [PublishStatus.Failure, PublishStatus.Timeout])
 </script>
 
 <div
@@ -114,19 +99,6 @@
           {/if}
           <div class="text-sm">
             <Content showEntire {event} />
-            {#if isPending}
-              <span class="flex-inline ml-1 gap-1">
-                <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
-                <span class="opacity-50">Sending...</span>
-              </span>
-            {:else if failure}
-              <span
-                class="flex-inline tooltip ml-1 cursor-pointer gap-1"
-                data-tip="{failure.message} ({displayRelayUrl(failure.url)})">
-                <Icon icon="danger" class="translate-y-px" size={3} />
-                <span class="opacity-50">Failed to send!</span>
-              </span>
-            {/if}
           </div>
         </div>
       </div>

src/app/components/ThunkStatus.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import {displayRelayUrl} from "@welshman/util"
+  import {PublishStatus} from "@welshman/net"
+  import type {Thunk} from "@welshman/app"
+  import Icon from '@lib/components/Icon.svelte'
+  import Button from '@lib/components/Button.svelte'
+
+  export let thunk: Thunk
+
+  const {status} = thunk
+  const {Pending, Success, Failure, Timeout} = PublishStatus
+
+  const undo = () => thunk.controller.abort()
+
+  $: ps = Object.values($status)
+  $: canUndo = 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))
+  $: failure = ps.find(s => [Failure, Timeout].includes(s.status))
+</script>
+
+{#if canUndo || isPending}
+  <span class="flex gap-1">
+    <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}
+  </span>
+{:else if isFailure && failure}
+  <span
+    class="flex tooltip cursor-pointer gap-1"
+    data-tip="{failure.message} ({displayRelayUrl(failure.url)})">
+    <Icon icon="danger" class="translate-y-px" size={3} />
+    <span class="opacity-50">Failed to send!</span>
+  </span>
+{/if}