Update to new thunk stuff

src/app/commands.ts

@@ -1,6 +1,6 @@
 import * as nip19 from "nostr-tools/nip19"
 import {get} from "svelte/store"
-import {randomId, poll, uniq, equals} from "@welshman/lib"
+import {randomId, ifLet, poll, uniq, equals} from "@welshman/lib"
 import {
   DELETE,
   REPORT,
@@ -38,7 +38,7 @@ import {
   signer,
   repository,
   publishThunk,
-  publishThunks,
+  MergedThunk,
   profilesByPubkey,
   relaySelectionsByPubkey,
   getWriteRelayUrls,
@@ -54,6 +54,7 @@ import {
   tagEventForComment,
   tagEventForQuote,
   Router,
+  thunkIsComplete,
 } from "@welshman/app"
 import type {Thunk} from "@welshman/app"
 import {
@@ -84,14 +85,20 @@ export const getPubkeyPetname = (pubkey: string) => {
   return display
 }
 
-export const getThunkError = async (thunk: Thunk) => {
-  const result = await thunk.result
-  const [{status, message}] = Object.values(result) as any
+export const getThunkError = (thunk: Thunk) =>
+  new Promise<string>(resolve => {
+    thunk.subscribe($thunk => {
+      for (const [relay, status] of Object.entries($thunk.status)) {
+        if (status === PublishStatus.Failure) {
+          resolve($thunk.details[relay])
+        }
+      }
 
-  if (status !== PublishStatus.Success) {
-    return message
-  }
-}
+      if (thunkIsComplete($thunk)) {
+        resolve("")
+      }
+    })
+  })
 
 export const prependParent = (parent: TrustedEvent | undefined, {content, tags}: EventContent) => {
   if (parent) {
@@ -261,12 +268,10 @@ export const checkRelayAccess = async (url: string, claim = "") => {
     relays: [url],
   })
 
-  const result = await thunk.result
-
-  if (result[url].status === PublishStatus.Failure) {
+  ifLet(await getThunkError(thunk), error => {
     const message =
       socket.auth.details?.replace(/^.*: /, "") ||
-      result[url].message?.replace(/^.*: /, "") ||
+      error?.replace(/^.*: /, "") ||
       "join request rejected"
 
     // If it's a strict NIP 29 relay don't worry about requesting access
@@ -274,7 +279,7 @@ export const checkRelayAccess = async (url: string, claim = "") => {
     if (message !== "missing group (`h`) tag") {
       return `Failed to join relay (${message})`
     }
-  }
+  })
 }
 
 export const checkRelayProfile = async (url: string) => {
@@ -342,13 +347,15 @@ export const sendWrapped = async ({
 }) => {
   const nip59 = Nip59.fromSigner(signer.get()!)
 
-  return publishThunks(
+  return new MergedThunk(
     await Promise.all(
-      uniq(pubkeys).map(async recipient => ({
-        event: await nip59.wrap(recipient, stamp(template)),
-        relays: Router.get().PubkeyInbox(recipient).getUrls(),
-        delay,
-      })),
+      uniq(pubkeys).map(async recipient =>
+        publishThunk({
+          event: await nip59.wrap(recipient, stamp(template)),
+          relays: Router.get().PubkeyInbox(recipient).getUrls(),
+          delay,
+        }),
+      ),
     ),
   )
 }

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}

src/app/state.ts

@@ -251,7 +251,7 @@ export const getUrlsForEvent = derived([trackerStore, thunks], ([$tracker, $thun
     const urls = Array.from($tracker.getRelays(id))
 
     for (const thunk of getThunksByEventId().get(id) || []) {
-      for (const url of thunk.request.relays) {
+      for (const url of thunk.options.relays) {
         urls.push(url)
       }
     }
@@ -661,7 +661,12 @@ export const deriveOtherRooms = (url: string) =>
 
 // Other utils
 
-export const encodeRelay = (url: string) => encodeURIComponent(normalizeRelayUrl(url))
+export const encodeRelay = (url: string) =>
+  encodeURIComponent(
+    normalizeRelayUrl(url)
+      .replace(/^wss:\/\//, "")
+      .replace(/\/$/, ""),
+  )
 
 export const decodeRelay = (url: string) => normalizeRelayUrl(decodeURIComponent(url))