Refine delayed send

src/app/shared/Note.svelte

@@ -14,6 +14,7 @@
   } from "@welshman/util"
   import {repository, deriveZapperForPubkey, deriveZapper} from "@welshman/app"
   import {deriveEvents} from "@welshman/store"
+  import {sleep} from "hurdak"
   import {identity, uniqBy, prop} from "ramda"
   import {onMount} from "svelte"
   import {quantify} from "hurdak"
@@ -32,6 +33,7 @@
   import NoteActions from "src/app/shared/NoteActions.svelte"
   import NoteContent from "src/app/shared/NoteContent.svelte"
   import NotePending from "src/app/shared/NotePending.svelte"
+  import {drafts} from "src/app/state"
   import {router} from "src/app/util/router"
   import {
     env,
@@ -74,7 +76,13 @@
 
   const addDraftToContext = (event, cb) => {
     draftEventId = event.id
-    removeDraft = () => cb() && repository.removeEvent(event.id)
+    removeDraft = () => {
+      cb()
+      drafts.set(note.id, event.content)
+      sleep(10).then(() => {
+        replyCtrl?.start()
+      })
+    }
   }
 
   const onClick = e => {

src/app/shared/NoteActions.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
   import cx from "classnames"
   import {nip19} from "nostr-tools"
+  import {sum, pluck} from "ramda"
   import {onMount} from "svelte"
+  import {tweened} from "svelte/motion"
   import {derived} from "svelte/store"
   import {ctx, nth, nthEq, remove, last, sortBy} from "@welshman/lib"
   import {
@@ -22,8 +24,6 @@
     createEvent,
     getPubkeyTagValues,
   } from "@welshman/util"
-  import {tweened} from "svelte/motion"
-  import {sum, pluck} from "ramda"
   import {fly} from "src/util/transition"
   import {formatSats} from "src/util/misc"
   import {quantify, pluralize} from "hurdak"

src/app/shared/NotePending.svelte

@@ -24,11 +24,14 @@
 <script lang="ts">
   import {thunks, type Thunk} from "@welshman/app"
   import {PublishStatus} from "@welshman/net"
+  import {now} from "@welshman/signer"
   import {LOCAL_RELAY_URL, type SignedEvent} from "@welshman/util"
+  import {tweened} from "svelte/motion"
   import {userSettings} from "src/engine"
   import Anchor from "src/partials/Anchor.svelte"
   import {timestamp1} from "src/util/misc"
-  import {spring} from "svelte/motion"
+
+  const rendered = now()
 
   export let event: SignedEvent
   export let removeDraft: () => void
@@ -48,11 +51,11 @@
   $: success = statuses.filter(s => s.status === PublishStatus.Success).length
   $: total = relays.length || 0
 
-  const completed = spring(0)
+  const completed = tweened(0)
 
   $: {
-    if (thunk) {
-      $completed = ((total - pendings) / total) * 100
+    if (thunk && statuses.length > 0) {
+      $completed = ((total - pendings) / total) * 80
     }
   }
 
@@ -62,25 +65,32 @@
 
 <div
   class="loading-bar-content relative flex h-6 w-full items-center justify-between overflow-hidden rounded-md pl-4 text-sm"
-  class:border={!thunk}
+  class:bg-neutral-500={thunk && (isPending || isCompleted)}
+  class:border={!(isPending || isCompleted)}
+  class:px-4={thunk && isPending}
   on:click|stopPropagation>
   {#if thunk && (isPending || isCompleted)}
-    <div class="loading-bar bg-accent" style="width: {$completed}%"></div>
+    <div class="loading-bar bg-accent" style="width: {20 + $completed}%"></div>
     {#if isPending}
       <span>Publishing...</span>
       <span>{total - pendings} of {total} relays</span>
     {:else}
-      <span>Published to {success}/{total} ({failed} failed, {timeout} timed out)</span>
+      <span
+        >Published to {success}/{total}
+        {#if failed > 0 || timeout > 0}
+          ({failed > 0 ? failed + " failed" : ""}{timeout > 0
+            ? (failed > 0 ? ", " : "") + timeout + " timed out"
+            : ""})
+        {/if}
+      </span>
       <Anchor
         class="staatliches z-feature rounded-r-md bg-tinted-100-d px-4 py-1 uppercase text-tinted-700-d"
         modal
         href="/publishes">See details</Anchor>
     {/if}
   {:else if $userSettings.send_delay > 0}
     <span
-      >Sending reply in {event.created_at +
-        Math.ceil($userSettings.send_delay / 1000) -
-        $timestamp1} seconds</span>
+      >Sending reply in {rendered + Math.ceil($userSettings.send_delay / 1000) - $timestamp1} seconds</span>
 
     <button
       class="ml-2 cursor-pointer rounded-md bg-neutral-100-d px-4 py-1 text-tinted-700-d"

src/app/shared/NoteReply.svelte

@@ -102,7 +102,9 @@
     loading = true
 
     const template = createEvent(1, {content, tags})
+
     const event = await sign(template, {anonymous: false})
+
     const thunk = publish({
       event,
       relays: ctx.app.router.PublishEvent(event).getUrls(),

src/app/views/NoteCreate.svelte

@@ -19,6 +19,7 @@
   import NoteContent from "src/app/shared/NoteContent.svelte"
   import NoteOptions from "src/app/shared/NoteOptions.svelte"
   import {getEditorOptions} from "src/app/editor"
+  import {drafts} from "src/app/state"
   import {router} from "src/app/util/router"
   import {currencyOptions} from "src/util/i18n"
   import {getClientTags, publish, sign, tagsFromContent, userSettings} from "src/engine"
@@ -60,10 +61,11 @@
   }
 
   const onSubmit = async ({skipNsecWarning = false} = {}) => {
-    signaturePending = true
     // prevent sending before media are uploaded and tags are correctly set
     if ($loading) return
 
+    signaturePending = true
+
     const content = editor.getText({blockSeparator: "\n"}).trim()
 
     if (!content) return showWarning("Please provide a description.")
@@ -86,17 +88,31 @@
 
     signaturePending = false
 
+    drafts.set("notecreate", editor.getHTML())
+
+    router.clearModals()
+
     const thunk = publish({
       event: signedTemplate,
       relays: ctx.app.router.PublishEvent(signedTemplate).getUrls(),
       delay: $userSettings.send_delay,
     })
 
+    thunk.result.finally(() => {
+      charCount.set(0)
+      wordCount.set(0)
+      drafts.delete("notecreate")
+    })
+
     if ($userSettings.send_delay > 0) {
       showToast({
+        id: "send-delay",
         type: "delay",
         timeout: $userSettings.send_delay / 1000,
-        onCancel: () => thunk.controller.abort(),
+        onCancel: () => {
+          thunk.controller.abort()
+          router.at("notes/create").open()
+        },
       })
     }
 
@@ -106,7 +122,6 @@
         Object.values(status).every(s => s.status === PublishStatus.Pending)
       ) {
         showPublishInfo(thunk)
-        router.clearModals()
       }
     })
   }
@@ -130,6 +145,7 @@
 
   onMount(() => {
     const options = getEditorOptions({
+      content: drafts.get("notecreate") || "",
       submit: onSubmit,
       element,
       submitOnEnter: false,

src/partials/Toast.svelte

@@ -91,13 +91,13 @@
 </script>
 
 {#if $toast}
-  <div
-    on:touchstart={onTouchStart}
-    on:touchmove={onTouchMove}
-    on:touchend={onTouchEnd}
-    class="pointer-events-none fixed left-0 right-0 top-0 z-toast flex justify-center"
-    transition:fly={{y: -50, duration: 300}}>
-    {#key $toast.id}
+  {#key $toast.id}
+    <div
+      on:touchstart={onTouchStart}
+      on:touchmove={onTouchMove}
+      on:touchend={onTouchEnd}
+      class="pointer-events-none fixed left-0 right-0 top-0 z-toast flex justify-center"
+      transition:fly={{y: -50, duration: 300}}>
       <div
         style={`transform: translate(${offset}px, 0)`}
         class={cx(
@@ -127,6 +127,6 @@
           <i class="fa fa-times" />
         </div>
       </div>
-    {/key}
-  </div>
+    </div>
+  {/key}
 {/if}