Close the comment composer as soon as the comment appears

e2e/USER_STORIES.md

@@ -1177,6 +1177,8 @@ Acceptance:
   thread it was posted into.
 - A failed post shows "Failed to send!" in the same row, opening the same
   per-relay detail popover.
+- The comment composer closes as soon as the comment appears, rather than
+  waiting for the relay to confirm it.
 
 ### US-072 — A deleted post is marked deleted
 

e2e/specs/delivery.spec.ts

@@ -64,10 +64,14 @@ const writeArticle = async (page: Page, title: string, body: string) => {
   await pageBar(page).getByRole("button", {name: "Publish"}).click()
 }
 
+// The comment composer, which is the only form on a content page carrying an editor.
+const commentComposer = (page: Page) =>
+  page.locator("form").filter({has: page.locator(".note-editor")})
+
 const writeComment = async (page: Page, body: string) => {
   await page.getByRole("button", {name: "Add a comment"}).click()
 
-  const form = page.locator("form").filter({has: page.locator(".note-editor")})
+  const form = commentComposer(page)
 
   // The editor takes focus itself once it has mounted, and typing before that puts the caret back.
   await expect(noteEditor(form)).toBeFocused()
@@ -359,6 +363,10 @@ test("US-071 content posts show delivery status in place", async ({seed, as}) =>
   const footnote = commentCard(alice, "A footnote nobody asked for.")
 
   await expect(footnote.getByText("Sending...")).toBeVisible()
+
+  // The comment is still in flight to a relay that says nothing, and the composer has already gone.
+  await expect(commentComposer(alice)).toHaveCount(0, {timeout: 2000})
+
   await expect(footnote.getByRole("button", {name: "Cancel"})).toBeVisible()
 
   await footnote.getByRole("button", {name: "Cancel"}).click()

src/app/components/CommentCompose.svelte

@@ -67,12 +67,7 @@
     loading = true
 
     try {
-      const publication = await publishReply(content, ed.storage.nostr.getEditorTags())
-      const error = (await publication.settled()).getError()
-
-      if (error) {
-        return pushToast({theme: "error", message: error})
-      }
+      await publishReply(content, ed.storage.nostr.getEditorTags())
 
       draftKey.clear()
       onSubmit()

src/app/components/CommentTree.svelte

@@ -12,6 +12,7 @@
   import Content from "@app/components/Content.svelte"
   import CommentActions from "@app/components/CommentActions.svelte"
   import EventReactions from "@app/components/EventReactions.svelte"
+  import PublicationStatusOrDeleted from "@app/components/PublicationStatusOrDeleted.svelte"
   import type {FeedContext} from "@app/feeds"
   import Danger from "@assets/icons/danger-triangle.svg?dataurl"
   import {pushModal} from "@app/modal"
@@ -80,7 +81,9 @@
           {#if url}
             <CommentActions event={node.comment} {url} {context} />
           {:else}
-            <EventReactions event={node.comment} {context} reactionClass="tip-left" />
+            <PublicationStatusOrDeleted event={node.comment} {context}>
+              <EventReactions event={node.comment} {context} reactionClass="tip-left" />
+            </PublicationStatusOrDeleted>
           {/if}
         </div>
       </div>