@jant/core 0.5.4 → 0.6.0

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

@@ -196,7 +196,7 @@ describe("getThreadPreviewState", () => {
     expect(html).not.toContain('id="continue"');
   });
 
-  it("renders ancestor context fully without collapse affordances", () => {
+  it("wraps ancestor context in a collapsible shell with a show-more toggle when 2+ extra items precede the latest reply", () => {
     const html = renderWithI18n(() =>
       ThreadPreview({
         rootPost: createPostView({
@@ -227,10 +227,72 @@ describe("getThreadPreviewState", () => {
       }),
     );
 
-    expect(html).not.toContain("data-thread-context");
-    expect(html).not.toContain("data-thread-context-toggle");
-    expect(html).not.toContain("thread-context-collapsed");
-    expect(html).not.toContain("thread-context-fade");
+    expect(html).toContain("thread-context-shell");
+    expect(html).toContain("data-thread-context");
+    expect(html).toContain("data-collapsed");
+    expect(html).toContain("thread-context-fade");
+    expect(html).toContain("data-thread-context-toggle");
+    expect(html).toContain('aria-expanded="false"');
+    expect(html).toMatch(/data-label-more="[^"]+"/);
+    expect(html).toMatch(/data-label-less="[^"]+"/);
+  });
+
+  it("still wraps a root-only preview in the shell so the cap applies to long single posts", () => {
+    // root + hero — no second/penultimate/gap. The server can't know the
+    // root's rendered height, so it always renders the shell + toggle and
+    // lets client-side measurement strip them when the root actually fits.
+    const html = renderWithI18n(() =>
+      ThreadPreview({
+        rootPost: createPostView({ bodyHtml: "<p>Root</p>" }),
+        latestReply: createPostView({
+          id: "post-2",
+          permalink: "/post-2",
+          slug: "post-2",
+          bodyHtml: "<p>Latest</p>",
+          isLastInThread: true,
+        }),
+        totalReplyCount: 1,
+      }),
+    );
+
+    expect(html).toContain("thread-context-shell");
+    expect(html).toContain("data-collapsed");
+    expect(html).toContain("data-thread-context-toggle");
+    expect(html).toContain("<p>Root</p>");
+    expect(html).toContain("<p>Latest</p>");
+  });
+
+  it("renders the collapsible shell even when just one extra item precedes the latest reply", () => {
+    // root + secondReply + hero — one extra context item. The server can't
+    // measure actual height, so it renders the shell assuming overflow (the
+    // common case). Client-side JS then removes the cap + hides the toggle
+    // if the rendered content actually fits without cropping.
+    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>",
+        }),
+        latestReply: createPostView({
+          id: "post-3",
+          permalink: "/post-3",
+          slug: "post-3",
+          bodyHtml: "<p>Latest</p>",
+          isLastInThread: true,
+        }),
+        totalReplyCount: 2,
+      }),
+    );
+
+    expect(html).toContain("thread-context-shell");
+    expect(html).toContain("data-collapsed");
+    expect(html).toContain("data-thread-context-toggle");
+    expect(html).toContain("<p>Root</p>");
+    expect(html).toContain("<p>Second</p>");
+    expect(html).toContain("<p>Latest</p>");
   });
 
   it("points the hidden-posts gap link to the second reply so the detail page opens just above the hidden range", () => {

package/src/ui/pages/PostPage.tsx

@@ -3,36 +3,99 @@
  *
  * Single post view — clean, no card border, with divider footer.
  * When `threadPosts` is provided, renders the full thread with the current
- * post highlighted and scroll-targeted.
+ * post highlighted and scroll-targeted. Ancestors above the current post are
+ * wrapped in the same collapsible shell used on the home feed
+ * (`.thread-context-shell`), driven by the shared `thread-context.ts`
+ * client logic.
  */
 
+import { msg } from "@lingui/core/macro";
 import type { FC } from "hono/jsx";
+import { useLingui } from "../../i18n/context.js";
 import type { PostPageProps, PostView } from "../../types.js";
 import { TimelineItemFromPost } from "../feed/TimelineItem.js";
 
+const renderThreadItem = (tp: PostView, currentId: string) => {
+  const isCurrent = tp.id === currentId;
+  return (
+    <div
+      key={tp.id}
+      id={`post-${tp.id}`}
+      class={`thread-item thread-detail-item${isCurrent ? " thread-item-current" : ""}`}
+      {...(isCurrent ? { "data-post-current": "" } : {})}
+    >
+      <TimelineItemFromPost
+        post={tp}
+        mode="detail"
+        display={{ footer: { hideTimestamp: false } }}
+      />
+    </div>
+  );
+};
+
 const ThreadDetail: FC<{ post: PostView; threadPosts: PostView[] }> = ({
   post,
   threadPosts,
 }) => {
+  const { i18n } = useLingui();
+  const showMoreLabel = i18n._(
+    msg({
+      message: "Show more",
+      comment: "@context: Expand faded thread ancestor context in the feed",
+    }),
+  );
+  const showLessLabel = i18n._(
+    msg({
+      message: "Show less",
+      comment:
+        "@context: Collapse expanded thread ancestor context in the feed",
+    }),
+  );
+
+  const currentIndex = threadPosts.findIndex((tp) => tp.id === post.id);
+  const ancestors = currentIndex > 0 ? threadPosts.slice(0, currentIndex) : [];
+  const currentAndAfter =
+    currentIndex >= 0 ? threadPosts.slice(currentIndex) : threadPosts;
+
   return (
     <div class="thread-group thread-group-detail" data-page="post">
-      {threadPosts.map((tp) => {
-        const isCurrent = tp.id === post.id;
-        return (
+      {ancestors.length > 0 && (
+        <>
           <div
-            key={tp.id}
-            id={`post-${tp.id}`}
-            class={`thread-item thread-detail-item${isCurrent ? " thread-item-current" : ""}`}
-            {...(isCurrent ? { "data-post-current": "" } : {})}
+            class="thread-context-shell"
+            data-thread-context
+            data-collapsed=""
           >
-            <TimelineItemFromPost
-              post={tp}
-              mode="detail"
-              display={{ footer: { hideTimestamp: false } }}
-            />
+            {ancestors.map((tp) => renderThreadItem(tp, post.id))}
+            <div class="thread-context-fade" aria-hidden="true" />
           </div>
-        );
-      })}
+          <button
+            type="button"
+            class="thread-context-toggle"
+            data-thread-context-toggle
+            data-label-more={showMoreLabel}
+            data-label-less={showLessLabel}
+            aria-expanded="false"
+          >
+            <span class="thread-context-toggle-label">{showMoreLabel}</span>
+            <svg
+              class="thread-context-toggle-chevron"
+              viewBox="0 0 16 16"
+              aria-hidden="true"
+            >
+              <path
+                d="M4 6l4 4 4-4"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </button>
+        </>
+      )}
+      {currentAndAfter.map((tp) => renderThreadItem(tp, post.id))}
     </div>
   );
 };

package/dist/app-DLINgGBd.js

@@ -1,6 +0,0 @@
-import "./url-umUptr5z.js";
-import { t as createApp } from "./app-BtNdUAqz.js";
-import "./export-CR9Megtb.js";
-import "./env-CgaH9Mut.js";
-import "./github-sync-DYZq9rQp.js";
-export { createApp };