Name the hidden reply count on the show-earlier control

e2e/USER_STORIES.md

@@ -723,8 +723,9 @@ and point people at one message.
 Acceptance:
 
 - A thread with more than 20 replies opens on its newest 20, under the opening
-  post, with a "Show earlier replies" control for the rest.
+  post, with a "Show earlier replies" control naming how many are still hidden.
-- That control reveals the next 20 without leaving the page.
+- That control reveals the next 20 without leaving the page, and its count drops
+  to match.
 - "Permalink" on a post copies a link to that post.
 - Opening that link as carol loads the thread, reveals the post it names however
   far back it is, and scrolls it into view.

e2e/specs/articles-threads.spec.ts

@@ -884,12 +884,16 @@ test("US-044 navigate a long thread", async ({seed, as}) => {
   await expect(bob.getByText("Reply 22", {exact: true})).toBeVisible()
   await expect(bob.getByText("Reply 21", {exact: true})).toHaveCount(0)
 
+  // The control says how many are still above it, so the reveal is not a blind click.
+  await expect(showEarlier).toHaveText("Show earlier replies (21)")
+
   // Each reveal reaches twenty further back without leaving the page.
   await showEarlier.click()
 
   await expect(bob.getByText("Reply 02", {exact: true})).toBeVisible()
   await expect(bob.getByText("Reply 01", {exact: true})).toHaveCount(0)
   await expect(bob.getByText("Reply 41", {exact: true})).toBeVisible()
+  await expect(showEarlier).toHaveText("Show earlier replies (1)")
 
   await showEarlier.click()
 

src/routes/spaces/[relay]/threads/[id]/+page.svelte

@@ -146,7 +146,7 @@
     {#if hiddenCount > 0}
       <div class="flex justify-center py-4">
         <Button class="button button-neutral button-sm" onclick={showEarlier}>
-          Show earlier replies
+          Show earlier replies ({hiddenCount})
         </Button>
       </div>
     {/if}