@jant/core 0.6.14 → 0.6.15

package/src/ui/feed/__tests__/thread-preview.test.ts

@@ -68,7 +68,8 @@ describe("getThreadPreviewState", () => {
 
     expect(
       getThreadPreviewState({
-        secondReply: latestReply,
+        leadingReplies: [latestReply],
+        trailingReplies: [],
         latestReply,
         totalReplyCount: 1,
       }),
@@ -77,29 +78,39 @@ describe("getThreadPreviewState", () => {
     });
   });
 
-  it("has no hidden posts for a 4-post thread when all four slots are visible", () => {
-    const secondReply = createPostView({
+  it("has no hidden posts for a 6-post thread when all slots are visible", () => {
+    const firstReply = createPostView({
       id: "post-2",
       permalink: "/post-2",
       slug: "post-2",
     });
-    const penultimateReply = createPostView({
+    const secondReply = createPostView({
       id: "post-3",
       permalink: "/post-3",
       slug: "post-3",
     });
-    const latestReply = createPostView({
+    const antepenultimateReply = createPostView({
       id: "post-4",
       permalink: "/post-4",
       slug: "post-4",
     });
+    const penultimateReply = createPostView({
+      id: "post-5",
+      permalink: "/post-5",
+      slug: "post-5",
+    });
+    const latestReply = createPostView({
+      id: "post-6",
+      permalink: "/post-6",
+      slug: "post-6",
+    });
 
     expect(
       getThreadPreviewState({
-        secondReply,
-        penultimateReply,
+        leadingReplies: [firstReply, secondReply],
+        trailingReplies: [antepenultimateReply, penultimateReply],
         latestReply,
-        totalReplyCount: 3,
+        totalReplyCount: 5,
       }),
     ).toEqual({
       hiddenCount: 0,
@@ -107,31 +118,41 @@ describe("getThreadPreviewState", () => {
   });
 
   it("counts hidden posts for longer threads after deduping visible slots", () => {
-    const secondReply = createPostView({
+    const firstReply = createPostView({
       id: "post-2",
       permalink: "/post-2",
       slug: "post-2",
     });
+    const secondReply = createPostView({
+      id: "post-3",
+      permalink: "/post-3",
+      slug: "post-3",
+    });
+    const antepenultimateReply = createPostView({
+      id: "post-7",
+      permalink: "/post-7",
+      slug: "post-7",
+    });
     const penultimateReply = createPostView({
-      id: "post-4",
-      permalink: "/post-4",
-      slug: "post-4",
+      id: "post-8",
+      permalink: "/post-8",
+      slug: "post-8",
     });
     const latestReply = createPostView({
-      id: "post-5",
-      permalink: "/post-5",
-      slug: "post-5",
+      id: "post-9",
+      permalink: "/post-9",
+      slug: "post-9",
     });
 
     expect(
       getThreadPreviewState({
-        secondReply,
-        penultimateReply,
+        leadingReplies: [firstReply, secondReply],
+        trailingReplies: [antepenultimateReply, penultimateReply],
         latestReply,
-        totalReplyCount: 4,
+        totalReplyCount: 8,
       }),
     ).toEqual({
-      hiddenCount: 1,
+      hiddenCount: 3,
     });
   });
 
@@ -191,7 +212,8 @@ describe("getThreadPreviewState", () => {
     const html = renderWithI18n(() =>
       ThreadPreview({
         rootPost,
-        secondReply,
+        leadingReplies: [secondReply],
+        trailingReplies: [],
         latestReply,
         totalReplyCount: 3,
       }),
@@ -214,18 +236,22 @@ describe("getThreadPreviewState", () => {
           summaryHtml: "<p>Root summary</p>",
           summaryHasMore: true,
         }),
-        secondReply: createPostView({
-          id: "post-2",
-          permalink: "/post-2",
-          slug: "post-2",
-          bodyHtml: "<p>Second</p>",
-        }),
-        penultimateReply: createPostView({
-          id: "post-4",
-          permalink: "/post-4",
-          slug: "post-4",
-          bodyHtml: "<p>Penultimate</p>",
-        }),
+        leadingReplies: [
+          createPostView({
+            id: "post-2",
+            permalink: "/post-2",
+            slug: "post-2",
+            bodyHtml: "<p>Second</p>",
+          }),
+        ],
+        trailingReplies: [
+          createPostView({
+            id: "post-4",
+            permalink: "/post-4",
+            slug: "post-4",
+            bodyHtml: "<p>Penultimate</p>",
+          }),
+        ],
         latestReply: createPostView({
           id: "post-5",
           permalink: "/post-5",
@@ -246,6 +272,37 @@ describe("getThreadPreviewState", () => {
     expect(html).toMatch(/data-label-less="[^"]+"/);
   });
 
+  it("renders at most six ordered posts with a gap between leading and trailing replies", () => {
+    const reply = (id: number) =>
+      createPostView({
+        id: `post-${id}`,
+        permalink: `/post-${id}`,
+        slug: `post-${id}`,
+        bodyHtml: `<p>Post ${id}</p>`,
+      });
+
+    const html = renderWithI18n(() =>
+      ThreadPreview({
+        rootPost: createPostView({ bodyHtml: "<p>Post 1</p>" }),
+        leadingReplies: [reply(2), reply(3)],
+        trailingReplies: [reply(6), reply(7)],
+        latestReply: reply(8),
+        totalReplyCount: 7,
+      }),
+    );
+
+    const visiblePosts = [1, 2, 3, 6, 7, 8];
+    for (const id of visiblePosts) {
+      expect(html).toContain(`<p>Post ${id}</p>`);
+    }
+    expect(html).toContain("2 more posts");
+    expect(visiblePosts.map((id) => html.indexOf(`<p>Post ${id}</p>`))).toEqual(
+      [...visiblePosts]
+        .map((id) => html.indexOf(`<p>Post ${id}</p>`))
+        .sort((left, right) => left - right),
+    );
+  });
+
   it("hides the show-more toggle on first paint for a short lone root that fits the cap", () => {
     // 2-post thread: the shell holds only the root. A short root genuinely
     // fits the height cap, so the toggle is rendered hidden to avoid flashing
@@ -257,6 +314,8 @@ describe("getThreadPreviewState", () => {
           bodyHtml: "<p>Root</p>",
           summary: "Root",
         }),
+        leadingReplies: [],
+        trailingReplies: [],
         latestReply: createPostView({
           id: "post-2",
           permalink: "/post-2",
@@ -285,6 +344,8 @@ describe("getThreadPreviewState", () => {
           bodyHtml: "<p>Root</p>",
           summary: "word ".repeat(60),
         }),
+        leadingReplies: [],
+        trailingReplies: [],
         latestReply: createPostView({
           id: "post-2",
           permalink: "/post-2",
@@ -308,12 +369,15 @@ describe("getThreadPreviewState", () => {
     const html = renderWithI18n(() =>
       ThreadPreview({
         rootPost: createPostView({ bodyHtml: "<p>Root</p>" }),
-        secondReply: createPostView({
-          id: "post-2",
-          permalink: "/post-2",
-          slug: "post-2",
-          bodyHtml: "<p>Second</p>",
-        }),
+        leadingReplies: [
+          createPostView({
+            id: "post-2",
+            permalink: "/post-2",
+            slug: "post-2",
+            bodyHtml: "<p>Second</p>",
+          }),
+        ],
+        trailingReplies: [],
         latestReply: createPostView({
           id: "post-3",
           permalink: "/post-3",
@@ -340,18 +404,22 @@ describe("getThreadPreviewState", () => {
     const html = renderWithI18n(() =>
       ThreadPreview({
         rootPost: createPostView({ bodyHtml: "<p>Root</p>" }),
-        secondReply: createPostView({
-          id: "post-2",
-          permalink: "/post-2",
-          slug: "post-2",
-          bodyHtml: "<p>Second</p>",
-        }),
-        penultimateReply: createPostView({
-          id: "post-4",
-          permalink: "/post-4",
-          slug: "post-4",
-          bodyHtml: "<p>Penultimate</p>",
-        }),
+        leadingReplies: [
+          createPostView({
+            id: "post-2",
+            permalink: "/post-2",
+            slug: "post-2",
+            bodyHtml: "<p>Second</p>",
+          }),
+        ],
+        trailingReplies: [
+          createPostView({
+            id: "post-4",
+            permalink: "/post-4",
+            slug: "post-4",
+            bodyHtml: "<p>Penultimate</p>",
+          }),
+        ],
         latestReply: createPostView({
           id: "post-5",
           permalink: "/post-5",
@@ -372,12 +440,15 @@ describe("getThreadPreviewState", () => {
     const html = renderWithI18n(() =>
       ThreadPreview({
         rootPost: createPostView({ bodyHtml: "<p>Root</p>" }),
-        penultimateReply: createPostView({
-          id: "post-4",
-          permalink: "/post-4",
-          slug: "post-4",
-          bodyHtml: "<p>Penultimate</p>",
-        }),
+        leadingReplies: [],
+        trailingReplies: [
+          createPostView({
+            id: "post-4",
+            permalink: "/post-4",
+            slug: "post-4",
+            bodyHtml: "<p>Penultimate</p>",
+          }),
+        ],
         latestReply: createPostView({
           id: "post-5",
           permalink: "/post-5",
@@ -402,6 +473,7 @@ describe("getThreadPreviewState", () => {
       CuratedThreadPreview({
         curatedThread: {
           rootPost: post,
+          showContextRatings: false,
           segments: [{ post, hiddenBeforeCount: 0, highlighted: true }],
         },
       }),
@@ -419,6 +491,7 @@ describe("getThreadPreviewState", () => {
     });
     const curatedThread: NonNullable<TimelineItemView["curatedThread"]> = {
       rootPost: articlePost,
+      showContextRatings: false,
       segments: [
         {
           post: articlePost,
@@ -438,6 +511,74 @@ describe("getThreadPreviewState", () => {
     expect(html).not.toContain("<p>Body</p>");
     expect(html).not.toContain('id="continue"');
   });
+
+  it("shows ratings on every post in a complete Collection Thread", () => {
+    const root = createPostView({
+      id: "post-root",
+      slug: "post-root",
+      permalink: "/post-root",
+      rating: 3,
+    });
+    const reply = createPostView({
+      id: "post-reply",
+      slug: "post-reply",
+      permalink: "/post-reply",
+      replyToId: root.id,
+      threadRootId: root.id,
+      rating: 5,
+      isLastInThread: true,
+    });
+
+    const html = renderWithI18n(() =>
+      CuratedThreadPreview({
+        curatedThread: {
+          rootPost: root,
+          showContextRatings: true,
+          segments: [
+            { post: root, hiddenBeforeCount: 0, highlighted: false },
+            { post: reply, hiddenBeforeCount: 0, highlighted: true },
+          ],
+        },
+      }),
+    );
+
+    expect(html.match(/class="post-rating"/g)).toHaveLength(2);
+    expect(html.match(/thread-item-curated/g)).toHaveLength(1);
+    expect(html).toContain("thread-item-context");
+  });
+
+  it("keeps non-selected Featured context ratings hidden", () => {
+    const featured = createPostView({
+      id: "post-featured",
+      slug: "post-featured",
+      permalink: "/post-featured",
+      rating: 4,
+    });
+    const context = createPostView({
+      id: "post-context",
+      slug: "post-context",
+      permalink: "/post-context",
+      rating: 5,
+      isLastInThread: true,
+    });
+
+    const html = renderWithI18n(() =>
+      CuratedThreadPreview({
+        curatedThread: {
+          rootPost: featured,
+          showContextRatings: false,
+          segments: [
+            { post: featured, hiddenBeforeCount: 0, highlighted: true },
+            { post: context, hiddenBeforeCount: 0, highlighted: false },
+          ],
+        },
+      }),
+    );
+
+    expect(html.match(/class="post-rating"/g)).toHaveLength(1);
+    expect(html).toContain("thread-item-curated");
+    expect(html).toContain("thread-item-context");
+  });
 });
 
 describe("threadContextAssumesOverflow", () => {

package/src/ui/feed/__tests__/timeline-cards.test.ts

@@ -166,11 +166,15 @@ describe("timeline cards", () => {
     expect(css).toContain("margin-bottom: 0;");
   });
 
-  it("keeps prose list rhythm compact in live and exported reading", () => {
+  it("aligns list rhythm across published and ordinary compose prose", () => {
     const presetCss = readFileSync(
       new URL("../../../preset.css", import.meta.url),
       "utf8",
     );
+    const uiCss = readFileSync(
+      new URL("../../../styles/ui.css", import.meta.url),
+      "utf8",
+    );
     const exportCss = readFileSync(
       new URL(
         "../../../services/export-theme/styles/main.css",
@@ -186,10 +190,68 @@ describe("timeline cards", () => {
       /ul,\s*[\s\S]*ol\s*\{[\s\S]*padding-left:\s*1\.4em;/,
     );
     expect(presetCss).toMatch(
-      /:where\(li,\s*dt\)\s*\{[\s\S]*margin-top:\s*0\.65em;[\s\S]*margin-bottom:\s*0\.65em;/,
+      /:where\(li,\s*dt\)\s*\{[\s\S]*margin-top:\s*0\.5em;[\s\S]*margin-bottom:\s*0\.5em;/,
+    );
+    expect(exportCss).toMatch(
+      /li\s*\{[\s\S]*margin-top:\s*0\.5em;[\s\S]*margin-bottom:\s*0\.5em;/,
+    );
+    expect(uiCss).toMatch(
+      /\.compose-tiptap-body\s+\.tiptap\s+ul\s*\{[^}]*padding-left:\s*1\.4em;[^}]*margin:\s*1\.25em 0;/,
+    );
+    expect(uiCss).toMatch(
+      /\.compose-tiptap-body\s+\.tiptap\s+ol\s*\{[^}]*padding-left:\s*2\.25em;[^}]*margin:\s*1\.25em 0;/,
+    );
+    expect(uiCss).toMatch(
+      /\.compose-tiptap-body\s+\.tiptap\s+:is\(ul, ol\)\s+:is\(ul, ol\)\s*\{[^}]*padding-left:\s*1\.5em;[^}]*margin:\s*0\.4em 0;/,
+    );
+    expect(uiCss).toMatch(
+      /\.compose-tiptap-body\s+\.tiptap\s+ul ul\s*\{[^}]*list-style-type:\s*circle;/,
+    );
+    expect(uiCss).toMatch(
+      /\.compose-tiptap-body\s+\.tiptap\s+ul ul ul\s*\{[^}]*list-style-type:\s*square;/,
+    );
+    expect(uiCss).toMatch(
+      /\.compose-tiptap-body\s+\.tiptap\s+ol ol\s*\{[^}]*list-style-type:\s*lower-alpha;/,
+    );
+    expect(uiCss).toMatch(
+      /\.compose-tiptap-body\s+\.tiptap\s+ol ol ol\s*\{[^}]*list-style-type:\s*lower-roman;/,
+    );
+    expect(uiCss).toMatch(
+      /\.compose-tiptap-body\s+\.tiptap\s+li\s*\{[^}]*margin:\s*0\.5em 0;/,
+    );
+    expect(uiCss).toContain(".compose-tiptap-body .tiptap li > p:first-child");
+    expect(uiCss).toContain(
+      ".compose-tiptap-body .tiptap li > p:has(+ :is(ul, ol))",
+    );
+    expect(uiCss).toMatch(
+      /p:has\(\+ \.ProseMirror-gapcursor \+ :is\(ul, ol\)\)\s*\{[^}]*margin-bottom:\s*0;/,
+    );
+    expect(uiCss).toMatch(
+      /\.compose-reply-compose-layout\s+\.compose-tiptap-body\s+\.tiptap\s+li\s*\{[^}]*margin:\s*0\.15em 0;/,
+    );
+    expect(uiCss).toMatch(
+      /\.compose-reply-compose-layout\s+\.compose-tiptap-body\s+\.tiptap\s+ol\s*\{[^}]*padding-left:\s*2\.25em;[^}]*margin:\s*0\.25em 0;/,
+    );
+    expect(uiCss).toMatch(
+      /\.compose-reply-compose-layout\s+\.compose-tiptap-body\s+\.tiptap\s+:is\(ul, ol\)\s+:is\(ul, ol\)\s*\{[^}]*padding-left:\s*1\.5em;[^}]*margin:\s*0\.2em 0;/,
+    );
+    expect(presetCss).toMatch(
+      /:where\(ol ol\)\s*\{[^}]*list-style-type:\s*lower-alpha;[^}]*margin-top:\s*0\.4em;[^}]*margin-bottom:\s*0\.4em;/,
+    );
+    expect(presetCss).toMatch(
+      /:where\(ol ol ol\)\s*\{[^}]*list-style-type:\s*lower-roman;/,
+    );
+    expect(exportCss).toMatch(
+      /ol ol\s*\{[^}]*list-style-type:\s*lower-alpha;[^}]*margin-top:\s*0\.4em;[^}]*margin-bottom:\s*0\.4em;/,
+    );
+    expect(exportCss).toMatch(
+      /ol ol ol\s*\{[^}]*list-style-type:\s*lower-roman;/,
+    );
+    expect(presetCss).toMatch(
+      /:where\(li > p:has\(\+ ol\)\)\s*\{[^}]*margin-bottom:\s*0;/,
     );
     expect(exportCss).toMatch(
-      /li\s*\{[\s\S]*margin-top:\s*0\.65em;[\s\S]*margin-bottom:\s*0\.65em;/,
+      /li > p:has\(\+ ol\)\s*\{[^}]*margin-bottom:\s*0;/,
     );
   });
 
@@ -307,6 +369,12 @@ describe("timeline cards", () => {
     expect(css).toMatch(
       /\.compose-tiptap-body\s+\.tiptap\s+blockquote:focus-within\s*\{/,
     );
+    expect(css).toMatch(
+      /\.compose-tiptap-body\s+\.tiptap\s+blockquote\s*\{[^}]*margin:\s*1\.4rem 0;[^}]*padding:\s*1\.4rem 1rem 0\.75rem;/,
+    );
+    expect(css).toMatch(
+      /\.compose-reply-compose-layout\s+\.compose-tiptap-body\s+\.tiptap\s+blockquote\s*\{[^}]*margin:\s*0\.72em 0;/,
+    );
   });
 
   it("keeps quote compose aligned with quote-card typography", () => {
@@ -432,6 +500,34 @@ describe("timeline cards", () => {
     );
   });
 
+  it("keeps detail dates quiet while preserving standalone footer spacing", () => {
+    const css = readFileSync(
+      new URL("../../../styles/ui.css", import.meta.url),
+      "utf8",
+    );
+
+    expect(css).toMatch(
+      /\.post-header-meta-link\s*\{[^}]*font-size:\s*var\(--type-ui-hint\);/,
+    );
+    expect(css).toMatch(
+      /\.post-footer-detail\s*\{[^}]*margin-top:\s*24px;[^}]*font-size:\s*var\(--type-ui-hint\);[^}]*color:\s*var\(--site-text-secondary\);/,
+    );
+    expect(css).toMatch(
+      /\.thread-group-detail \.post-footer-detail\s*\{[^}]*margin-top:\s*var\(--content-gap\);/,
+    );
+  });
+
+  it("adds breathing room when a quote source leads directly into its footer", () => {
+    const css = readFileSync(
+      new URL("../../../styles/ui.css", import.meta.url),
+      "utf8",
+    );
+
+    expect(css).toMatch(
+      /\.feed-quote-attribution:has\(\+ \.post-menu-footer\)\s*\{[^}]*margin-bottom:\s*0\.45rem;/,
+    );
+  });
+
   it("renders titled note feed summaries as secondary prose without shrinking detail reading", () => {
     const post = createPostView({
       format: "note",
@@ -445,6 +541,63 @@ describe("timeline cards", () => {
     expect(detailHtml).toContain('class="e-content prose post-detail-body"');
   });
 
+  it("progressively enhances canonical endnotes on wide detail and timeline posts", () => {
+    const css = readFileSync(
+      new URL("../../../styles/ui.css", import.meta.url),
+      "utf8",
+    );
+    const tokens = readFileSync(
+      new URL("../../../styles/tokens.css", import.meta.url),
+      "utf8",
+    );
+
+    expect(css).toMatch(
+      /\[data-post-view\],\s*\[data-timeline-item\]\s*\{[^}]*container:\s*post-view\s*\/\s*inline-size;/,
+    );
+    expect(css).toContain(
+      "[data-timeline-item] article[data-post] > [data-post-body].prose",
+    );
+    expect(css).toContain("@container post-view (min-width: 56rem)");
+    expect(css).toContain("--jant-footnote-rail-enabled: 1");
+    expect(css).toContain(".footnote-rail-measuring");
+    expect(css).toContain(".footnote-rail-ready");
+    expect(css).toContain("--footnote-rail-y");
+    expect(css).toContain("--footnote-rail-number");
+    expect(css).toContain("--footnote-rail-block-size");
+    expect(css).toMatch(
+      /> \.footnote-endnotes\s*\{[^}]*position:\s*absolute;[^}]*inset-inline-start:\s*calc\(100% \+ var\(--layout-sidenote-gap\)\);[^}]*width:\s*var\(--layout-sidenote-width\);/,
+    );
+    expect(css).toMatch(
+      /> \.footnote-list\s*> \.footnote\s*\{[^}]*display:\s*grid;[^}]*column-gap:\s*1ch;[^}]*align-items:\s*baseline;[^}]*list-style:\s*none;/,
+    );
+    expect(css).toMatch(
+      /> \.footnote::before\s*\{[^}]*content:\s*var\(--footnote-rail-number\);[^}]*font-size:\s*inherit;[^}]*line-height:\s*inherit;[^}]*color:\s*var\(--site-footnote-marker\);/,
+    );
+    expect(css).toMatch(
+      /\.footnote-rail-ready[\s\S]*> \.footnote-list[\s\S]*> \.footnote\s*\{[^}]*position:\s*absolute;[^}]*inset-block-start:\s*var\(--footnote-rail-y\);/,
+    );
+    expect(css).toMatch(
+      /\.footnote-rail-ready[\s\S]*\.footnote:target\s*\{[^}]*background:\s*transparent;/,
+    );
+    expect(css).toMatch(
+      /\.footnote-rail-ready[\s\S]*\.footnote-backlinks\s*\{[^}]*position:\s*absolute;[^}]*clip-path:\s*inset\(50%\);/,
+    );
+    expect(css).toMatch(
+      /\.footnote-rail-ready[\s\S]*\.footnote-backlinks:focus-within\s*\{[^}]*position:\s*static;[^}]*clip-path:\s*none;/,
+    );
+    expect(css).toMatch(
+      /\.footnote-ref\s*\{[^}]*--site-prose-link-color:\s*var\(--site-footnote-marker\);[^}]*--site-prose-link-underline:\s*transparent;[^}]*margin-inline:\s*0\.25rem;[^}]*vertical-align:\s*super;[^}]*font-size:\s*var\(--type-footnote-ref\);[^}]*color:\s*var\(--site-footnote-marker\);/,
+    );
+    expect(tokens).toContain(
+      "--type-footnote-ref: calc(var(--type-body-size) * 0.75)",
+    );
+    expect(css).toContain("@media print");
+    expect(css).not.toContain("@supports (grid-template-rows: subgrid)");
+    expect(css).not.toContain(".footnote-document");
+    expect(css).not.toContain(".footnote-main");
+    expect(css).not.toContain(".footnote-body");
+  });
+
   it("can render full article bodies inside feed contexts without permalink anchors", () => {
     const post = createPostView({
       format: "note",
@@ -505,6 +658,28 @@ describe("timeline cards", () => {
     expect(html).toContain("<p>Rest</p>");
   });
 
+  it("renders read more before text attachments on truncated notes", () => {
+    const post = createPostView({
+      format: "note",
+      title: undefined,
+      bodyHtml: "<p>Intro</p><span data-note-break></span><p>Rest</p>",
+      summaryHasMore: true,
+      media: [
+        createMediaView({
+          url: "/attachments/notes.txt",
+          thumbnailUrl: undefined,
+          mimeType: "text/plain",
+        }),
+      ],
+    });
+
+    const html = renderWithI18n(NoteCard({ post, mode: "feed" }));
+
+    expect(html.indexOf("data-note-expand")).toBeLessThan(
+      html.indexOf("data-post-media"),
+    );
+  });
+
   it("renders untitled notes in full without a control when not truncated", () => {
     const post = createPostView({
       format: "note",

package/src/ui/feed/thread-preview-state.ts

@@ -1,20 +1,18 @@
 import type { PostView } from "../../types.js";
 
 export function getThreadPreviewState({
-  secondReply,
-  penultimateReply,
+  leadingReplies,
+  trailingReplies,
   latestReply,
   totalReplyCount,
 }: {
-  secondReply?: PostView;
-  penultimateReply?: PostView;
+  leadingReplies: PostView[];
+  trailingReplies: PostView[];
   latestReply: PostView;
   totalReplyCount: number;
 }) {
   const visibleReplyIds = new Set(
-    [secondReply, penultimateReply, latestReply]
-      .filter((post): post is PostView => post !== undefined)
-      .map((post) => post.id),
+    [...leadingReplies, ...trailingReplies, latestReply].map((post) => post.id),
   );
   const hiddenCount = Math.max(0, totalReplyCount - visibleReplyIds.size);