remove note state from event object

src/app/shared/Note.svelte

@@ -30,6 +30,7 @@
   import NoteReply from "src/app/shared/NoteReply.svelte"
   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 {router} from "src/app/util/router"
   import {
     env,
@@ -42,15 +43,15 @@
     sortEventsDesc,
   } from "src/engine"
 
-  import NotePending from "./NotePending.svelte"
-
   export let note
   export let relays = []
   export let filters = null
   export let depth = 0
   export let anchor = null
   export let topLevel = false
   export let isLastReply = false
+  export let isDraft = false
+  export let removeDraftCb = null
   export let showParent = true
   export let showLoading = false
   export let showHidden = false
@@ -65,6 +66,8 @@
   let collapsed = depth === 0
   let context = repository.query([{"#e": [event.id]}]).filter(e => isChildOf(e, event))
   let showHiddenReplies = anchor === getIdOrAddress(event)
+  let draftEventId: string
+  let removeDraft: () => void
 
   const showEntire = showHiddenReplies
   const interactive = !anchor || !showEntire
@@ -102,16 +105,12 @@
       .open()
 
   const removeFromContext = e => {
-    console.log("remove from context", e)
     context = reject(whereEq({id: e.id}), context)
   }
 
   const addDraftToContext = (event, cb) => {
-    event.status = "draft"
-    event.remove = () => {
-      cb()
-      removeFromContext(event)
-    }
+    draftEventId = event.id
+    removeDraft = () => cb() && removeFromContext(event)
     context = context.concat(event)
   }
 
@@ -132,8 +131,6 @@
   // Sort our replies
   $: replies = sortEventsDesc(children.filter(e => replyKinds.includes(e.kind)))
 
-  $: console.log(children, replies)
-
   let mutedReplies, hiddenReplies, visibleReplies
 
   $: {
@@ -150,7 +147,7 @@
         !showHiddenReplies &&
         filters &&
         !matchFilters(filters, e) &&
-        e.status !== "draft"
+        draftEventId !== e.id
       ) {
         hiddenReplies.push(e)
       } else {
@@ -301,7 +298,7 @@
                 <NoteContent note={event} {showEntire} {showMedia} />
               {/if}
               <div class="cy-note-click-target h-[2px]" />
-              {#if event.status !== "draft" || event.created_at < $timestamp1 - 45}
+              {#if !isDraft || event.created_at < $timestamp1 - 45}
                 <NoteActions
                   note={event}
                   zapper={$zapper}
@@ -315,7 +312,7 @@
                   {zaps}
                   {muted} />
               {:else}
-                <NotePending {event} />
+                <NotePending {event} removeDraft={removeDraftCb} />
               {/if}
             </div>
           </div>
@@ -390,6 +387,8 @@
                     isLastReply={i === visibleReplies.length - 1}
                     showParent={false}
                     showHidden
+                    isDraft={r.id === draftEventId}
+                    removeDraftCb={removeDraft}
                     note={r}
                     depth={depth - 1}
                     {filters}

src/app/shared/NotePending.svelte

@@ -28,10 +28,8 @@
   import {timestamp1} from "src/util/misc"
   import {spring} from "svelte/motion"
 
-  export let event: SignedEvent & {
-    status: string
-    remove: () => void
-  }
+  export let event: SignedEvent
+  export let removeDraft: () => void
 
   $: pub = Object.values($publishes).find(p => p.request.event.id === event.id)
 
@@ -77,7 +75,7 @@
     <button
       class="ml-2 cursor-pointer rounded-md bg-neutral-100-d px-4 py-1 text-tinted-700-d"
       on:click={() => {
-        event.remove()
+        removeDraft()
       }}>Cancel</button>
   {/if}
 </div>

src/app/shared/NoteReply.svelte

@@ -6,23 +6,14 @@
   import {ctx} from "@welshman/lib"
   import {session, displayProfileByPubkey, tagReplyTo, tagPubkey} from "@welshman/app"
   import {slide} from "src/util/transition"
-  import {showPublishInfo} from "src/partials/Toast.svelte"
   import ImageInput from "src/partials/ImageInput.svelte"
   import AltColor from "src/partials/AltColor.svelte"
   import Chip from "src/partials/Chip.svelte"
   import Compose from "src/app/shared/Compose.svelte"
   import NsecWarning from "src/app/shared/NsecWarning.svelte"
   import NoteOptions from "src/app/shared/NoteOptions.svelte"
   import NoteImages from "src/app/shared/NoteImages.svelte"
-  import {
-    env,
-    publish,
-    signAndPublish,
-    tagsFromContent,
-    getClientTags,
-    sign,
-    userSettings,
-  } from "src/engine"
+  import {env, publish, tagsFromContent, getClientTags, sign, userSettings} from "src/engine"
   import {drafts} from "src/app/state"
 
   export let parent