From fe03bb2ce71d74a3c1fd082292c6ea99adb5029f Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Thu, 21 Nov 2024 13:35:21 +0100
Subject: [PATCH 1/5] Note Create UX changes

---
 src/app/views/NoteCreate.svelte | 22 +++++++++++++++++++---
 src/partials/Toast.svelte       | 18 +++++++++---------
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/app/views/NoteCreate.svelte b/src/app/views/NoteCreate.svelte
index 85a129b39..9a93080e2 100644
--- a/src/app/views/NoteCreate.svelte
+++ b/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,
diff --git a/src/partials/Toast.svelte b/src/partials/Toast.svelte
index 14da61f8f..aa8aa930f 100644
--- a/src/partials/Toast.svelte
+++ b/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}

From 482cdc0b3177eebb099b5884857045a5bf00f5ea Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Thu, 21 Nov 2024 14:57:02 +0100
Subject: [PATCH 2/5] UX improvement in reply

---
 src/app/shared/Note.svelte        |  9 ++++++++-
 src/app/shared/NoteActions.svelte | 12 ++++++++++++
 src/app/shared/NotePending.svelte | 22 ++++++++++++----------
 src/app/shared/NoteReply.svelte   |  2 ++
 4 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/src/app/shared/Note.svelte b/src/app/shared/Note.svelte
index 06813bb04..dbe1923cc 100644
--- a/src/app/shared/Note.svelte
+++ b/src/app/shared/Note.svelte
@@ -32,6 +32,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 +75,12 @@
 
   const addDraftToContext = (event, cb) => {
     draftEventId = event.id
-    removeDraft = () => cb() && repository.removeEvent(event.id)
+    removeDraft = () => {
+      cb()
+      repository.removeEvent(event.id)
+      drafts.set(note.id, event.content)
+      replyIsActive = false
+    }
   }
 
   const onClick = e => {
@@ -290,6 +296,7 @@
                   note={event}
                   zapper={$zapper}
                   {replyCtrl}
+                  {replyIsActive}
                   {showHidden}
                   {replies}
                   {likes}
diff --git a/src/app/shared/NoteActions.svelte b/src/app/shared/NoteActions.svelte
index 16c28aeae..459ba799f 100644
--- a/src/app/shared/NoteActions.svelte
+++ b/src/app/shared/NoteActions.svelte
@@ -3,6 +3,7 @@
   import {nip19} from "nostr-tools"
   import {onMount} from "svelte"
   import {derived} from "svelte/store"
+  import {slide} from "svelte/transition"
   import {ctx, nth, nthEq, remove, last, sortBy} from "@welshman/lib"
   import {
     repository,
@@ -60,6 +61,7 @@
   export let note: TrustedEvent
   export let muted
   export let replyCtrl
+  export let replyIsActive = false
   export let showHidden
   export let replies, likes, zaps
   export let zapper
@@ -229,6 +231,16 @@
   class="flex justify-between text-neutral-100"
   on:click|stopPropagation>
   <div class="flex gap-8 text-sm">
+    {#if replyIsActive}
+      <button
+        class="relative flex items-center gap-1 rounded-md px-4 text-xs uppercase"
+        class:border={!replyIsActive}
+        class:bg-accent={replyIsActive}
+        transition:slide|local={{axis: "x", duration: 100}}
+        on:click={replyCtrl?.start}>
+        Reply
+      </button>
+    {/if}
     <button
       class={cx("relative flex items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0", {
         "pointer-events-none opacity-50": disableActions,
diff --git a/src/app/shared/NotePending.svelte b/src/app/shared/NotePending.svelte
index 61d46a4a8..1fb2193ba 100644
--- a/src/app/shared/NotePending.svelte
+++ b/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,10 +65,11 @@
 
 <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: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>
@@ -77,10 +81,8 @@
         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>
+    <span class="-ml-4"
+      >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"
diff --git a/src/app/shared/NoteReply.svelte b/src/app/shared/NoteReply.svelte
index fea9dd39a..8b6c1ff28 100644
--- a/src/app/shared/NoteReply.svelte
+++ b/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(),

From 6d24d93163eba03061677fd2305f5932e0df47b4 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Fri, 22 Nov 2024 17:58:37 +0100
Subject: [PATCH 3/5] UX adjustments

---
 src/app/shared/Note.svelte        |  6 ++++--
 src/app/shared/NoteActions.svelte | 16 ++--------------
 src/app/shared/NotePending.svelte |  9 ++++++++-
 3 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/app/shared/Note.svelte b/src/app/shared/Note.svelte
index dbe1923cc..5cf912e42 100644
--- a/src/app/shared/Note.svelte
+++ b/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"
@@ -79,7 +80,9 @@
       cb()
       repository.removeEvent(event.id)
       drafts.set(note.id, event.content)
-      replyIsActive = false
+      sleep(10).then(() => {
+        replyCtrl?.start()
+      })
     }
   }
 
@@ -296,7 +299,6 @@
                   note={event}
                   zapper={$zapper}
                   {replyCtrl}
-                  {replyIsActive}
                   {showHidden}
                   {replies}
                   {likes}
diff --git a/src/app/shared/NoteActions.svelte b/src/app/shared/NoteActions.svelte
index 459ba799f..5a1bbb5a1 100644
--- a/src/app/shared/NoteActions.svelte
+++ b/src/app/shared/NoteActions.svelte
@@ -1,9 +1,10 @@
 <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 {slide} from "svelte/transition"
   import {ctx, nth, nthEq, remove, last, sortBy} from "@welshman/lib"
   import {
     repository,
@@ -23,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"
@@ -61,7 +60,6 @@
   export let note: TrustedEvent
   export let muted
   export let replyCtrl
-  export let replyIsActive = false
   export let showHidden
   export let replies, likes, zaps
   export let zapper
@@ -231,16 +229,6 @@
   class="flex justify-between text-neutral-100"
   on:click|stopPropagation>
   <div class="flex gap-8 text-sm">
-    {#if replyIsActive}
-      <button
-        class="relative flex items-center gap-1 rounded-md px-4 text-xs uppercase"
-        class:border={!replyIsActive}
-        class:bg-accent={replyIsActive}
-        transition:slide|local={{axis: "x", duration: 100}}
-        on:click={replyCtrl?.start}>
-        Reply
-      </button>
-    {/if}
     <button
       class={cx("relative flex items-center gap-1 pt-1 transition-all hover:pb-1 hover:pt-0", {
         "pointer-events-none opacity-50": disableActions,
diff --git a/src/app/shared/NotePending.svelte b/src/app/shared/NotePending.svelte
index 1fb2193ba..157e73106 100644
--- a/src/app/shared/NotePending.svelte
+++ b/src/app/shared/NotePending.svelte
@@ -74,7 +74,14 @@
       <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

From 25fe48dbb0f544bb9a5aaaa5fc378d369dcf6dd0 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Fri, 22 Nov 2024 18:10:16 +0100
Subject: [PATCH 4/5] removeEvent is handled automatically

---
 src/app/shared/Note.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/shared/Note.svelte b/src/app/shared/Note.svelte
index 5cf912e42..18146fb50 100644
--- a/src/app/shared/Note.svelte
+++ b/src/app/shared/Note.svelte
@@ -78,7 +78,6 @@
     draftEventId = event.id
     removeDraft = () => {
       cb()
-      repository.removeEvent(event.id)
       drafts.set(note.id, event.content)
       sleep(10).then(() => {
         replyCtrl?.start()

From b2a2e9d7baefae2a4eef9257886369c2a85527a2 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Mon, 25 Nov 2024 11:13:05 +0100
Subject: [PATCH 5/5] bring outline back to the countdown bar

---
 src/app/shared/NotePending.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/shared/NotePending.svelte b/src/app/shared/NotePending.svelte
index 157e73106..ddd8a0d62 100644
--- a/src/app/shared/NotePending.svelte
+++ b/src/app/shared/NotePending.svelte
@@ -66,6 +66,7 @@
 <div
   class="loading-bar-content relative flex h-6 w-full items-center justify-between overflow-hidden rounded-md pl-4 text-sm"
   class:bg-neutral-500={thunk && (isPending || isCompleted)}
+  class:border={!(isPending || isCompleted)}
   class:px-4={thunk && isPending}
   on:click|stopPropagation>
   {#if thunk && (isPending || isCompleted)}
@@ -88,7 +89,7 @@
         href="/publishes">See details</Anchor>
     {/if}
   {:else if $userSettings.send_delay > 0}
-    <span class="-ml-4"
+    <span
       >Sending reply in {rendered + Math.ceil($userSettings.send_delay / 1000) - $timestamp1} seconds</span>
 
     <button