@jant/core 0.6.16 → 0.7.0

package/src/ui/feed/LinkCard.tsx

@@ -1,13 +1,15 @@
 /**
  * Link Card
  *
- * Author commentary renders as first-class prose (same level as Note body).
- * The link reference (domain, title, preview) sits in a compact card below,
- * keeping the author's voice visually distinct from the referenced content.
+ * The link reference (domain, title, preview) comes first, then the author's
+ * commentary as first-class prose (same level as a Note body) — the reader
+ * sees what is being referenced before what is said about it. Feed, compact
+ * and detail differ only in heading level, never in that order.
  */
 
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../types.js";
+import { EmptyPostContent } from "../shared/EmptyPostContent.js";
 import { StarRating } from "../shared/StarRating.js";
 import { getPostArticleAttributes } from "../shared/post-article-attributes.js";
 import { PostFooter } from "../shared/PostFooter.js";
@@ -32,6 +34,14 @@ export const LinkCard: FC<TimelineCardProps> = ({
   const safeUrl = post.url ? sanitizeUrl(post.url) : "";
   const domain = safeUrl ? extractDisplayDomain(safeUrl) : null;
 
+  /* The h-entry's own `u-url` is the permalink, emitted once by PostFooter.
+     The title points at the referenced article instead, which is what
+     `u-bookmark-of` means — and only when there is one: without a link the
+     href falls back to the permalink, and a post cannot bookmark itself. */
+  const titleLinkClass = safeUrl
+    ? "u-bookmark-of feed-link-title-link"
+    : "feed-link-title-link";
+
   const domainEl =
     domain &&
     (safeUrl ? (
@@ -51,6 +61,33 @@ export const LinkCard: FC<TimelineCardProps> = ({
       </div>
     ));
 
+  const titleLinkEl = post.title && (
+    <a
+      href={safeUrl || post.permalink}
+      class={titleLinkClass}
+      target={safeUrl ? "_blank" : undefined}
+      rel={safeUrl ? "noopener noreferrer" : undefined}
+    >
+      {post.title}
+    </a>
+  );
+
+  /* Detail promotes the title to the page heading and carries the rating with
+     it; feed and compact keep it a card heading. Only the wrapper differs —
+     the link itself, and where the title sits in the reference, do not. */
+  const titleEl =
+    post.title &&
+    (isDetail ? (
+      <div class="post-header-block">
+        <h1 class="p-name post-detail-title feed-link-title">{titleLinkEl}</h1>
+        {showHeaderRating && <StarRating rating={post.rating} />}
+      </div>
+    ) : (
+      <h2 class={`p-name feed-link-title ${isCompact ? "text-sm" : ""}`}>
+        {titleLinkEl}
+      </h2>
+    ));
+
   const previewEl = !isCompact && post.previewImageUrl && (
     <LinkPreview
       imageUrl={post.previewImageUrl}
@@ -68,6 +105,11 @@ export const LinkCard: FC<TimelineCardProps> = ({
     />
   );
 
+  /* No title and no commentary leaves the entry with neither `p-name` nor
+     `e-content`, which is the shape a parser fills in by guessing. The title
+     is the `p-name`, so this only ever renders when there is none. */
+  const emptyContentEl = !post.title && !bodyEl && <EmptyPostContent />;
+
   const mediaEl = !isCompact && post.media.length > 0 && (
     <div class="mt-3" data-post-media>
       <MediaGallery attachments={post.media} postPermalink={post.permalink} />
@@ -78,22 +120,14 @@ export const LinkCard: FC<TimelineCardProps> = ({
     <StarRating rating={post.rating} />
   );
 
-  /* -- Link reference: domain + title + preview (feed & compact only) -- */
+  /* -- Link reference: domain + title + preview, in that order in every mode.
+     The preview is part of what is being referenced, so the author's
+     commentary always follows it — a detail page that led with the body read
+     as a comment on something the reader had not seen yet. -- */
   const linkRef = (
     <>
       {domainEl}
-      {post.title && (
-        <h2 class={`p-name feed-link-title ${isCompact ? "text-sm" : ""}`}>
-          <a
-            href={safeUrl || post.permalink}
-            class="u-url feed-link-title-link"
-            target={safeUrl ? "_blank" : undefined}
-            rel={safeUrl ? "noopener noreferrer" : undefined}
-          >
-            {post.title}
-          </a>
-        </h2>
-      )}
+      {titleEl}
       {previewEl}
     </>
   );
@@ -104,39 +138,15 @@ export const LinkCard: FC<TimelineCardProps> = ({
       {...(isDetail ? { "data-page": "post" } : {})}
       {...getPostArticleAttributes(post)}
     >
-      {!isCompact && !display?.hideStatusBadges && <PostStatusBadges />}
-      {isDetail ? (
-        <>
-          {domainEl}
-          {post.title && (
-            <div class="post-header-block">
-              <h1 class="p-name post-detail-title feed-link-title">
-                <a
-                  href={safeUrl || post.permalink}
-                  class="u-url feed-link-title-link"
-                  target={safeUrl ? "_blank" : undefined}
-                  rel={safeUrl ? "noopener noreferrer" : undefined}
-                >
-                  {post.title}
-                </a>
-              </h1>
-              {showHeaderRating && <StarRating rating={post.rating} />}
-            </div>
-          )}
-          {bodyEl}
-          {previewEl}
-        </>
-      ) : isCompact ? (
-        linkRef
-      ) : (
-        <>
-          {linkRef}
-          {bodyEl}
-        </>
+      {!isCompact && !display?.hideStatusBadges && (
+        <PostStatusBadges post={post} />
       )}
+      {linkRef}
+      {bodyEl}
       {(() => {
         const tail = (
           <>
+            {emptyContentEl}
             {mediaEl}
             {ratingEl}
             <PostFooter

package/src/ui/feed/NoteCard.tsx

@@ -9,6 +9,7 @@ import { msg } from "@lingui/core/macro";
 import type { FC } from "hono/jsx";
 import { useLingui } from "../../i18n/context.js";
 import type { TimelineCardProps } from "../../types.js";
+import { EmptyPostContent } from "../shared/EmptyPostContent.js";
 import { MediaGallery } from "../shared/MediaGallery.js";
 import { getPostArticleAttributes } from "../shared/post-article-attributes.js";
 import { StarRating } from "../shared/StarRating.js";
@@ -89,7 +90,9 @@ export const NoteCard: FC<TimelineCardProps> = ({
       {...(isDetail ? { "data-page": "post" } : {})}
       {...getPostArticleAttributes(post)}
     >
-      {!isCompact && !display?.hideStatusBadges && <PostStatusBadges />}
+      {!isCompact && !display?.hideStatusBadges && (
+        <PostStatusBadges post={post} />
+      )}
       {isArticle &&
         (isDetail ? (
           <div class="post-header-block post-header-block-detail">
@@ -104,20 +107,22 @@ export const NoteCard: FC<TimelineCardProps> = ({
           </div>
         ) : (
           <h2
-            class={`p-name ${isCompact ? "text-sm mb-1" : "feed-note-title"}`}
+            class={`p-name ${isCompact ? "feed-compact-title text-sm mb-1" : "feed-note-title"}`}
           >
-            <a href={post.permalink} class="u-url hover:underline">
+            <a href={post.permalink} class="hover:underline">
               {post.title}
             </a>
           </h2>
         ))}
-      {displayHtml && (
+      {displayHtml ? (
         <div
           class={`e-content prose ${isCompact ? "prose-sm" : isDetail || showFullBody ? "post-detail-body" : isArticle ? "post-body-summary" : ""}`}
           data-post-body
           {...(clampNote ? { "data-note-clamp": "" } : {})}
           dangerouslySetInnerHTML={{ __html: displayHtml }}
         />
+      ) : (
+        !isArticle && <EmptyPostContent />
       )}
       {(() => {
         const tail = (

package/src/ui/feed/PostStatusBadges.tsx

@@ -2,19 +2,58 @@
  * Post Status Badges
  *
  * Renders top-of-card status indicators that should stay visually prominent.
- * All badges are always rendered in the DOM; visibility is driven by CSS
- * selectors on the parent article's data attributes. This lets the post menu
- * toggle badges instantly without a page reload. Featured is rendered in the
- * footer meta instead.
+ * Visibility is driven by CSS selectors on the parent article's data
+ * attributes, so for the signed-in author every badge ships in the DOM whether
+ * or not it currently applies: the post menu toggles `data-post-pinned` and
+ * friends on the article, and the matching badge appears without a reload.
+ *
+ * An anonymous reader has no menu and cannot change any of that, and never
+ * receives a draft or private post to begin with, so the same card would carry
+ * four permanently invisible badges. There we emit only the badges that
+ * actually apply — usually none at all. Featured is rendered in the footer
+ * meta instead.
  */
 
 import { msg } from "@lingui/core/macro";
 import type { FC } from "hono/jsx";
 import { useLingui } from "../../i18n/context.js";
+import { useViewer } from "../../lib/viewer-context.js";
+import type { PostView } from "../../types.js";
 import { Icon } from "../shared/Icon.js";
 
-export const PostStatusBadges: FC = () => {
+type PostStatusBadgeSource = Pick<
+  PostView,
+  "status" | "visibility" | "pinned" | "pinnedInCollection"
+>;
+
+export const PostStatusBadges: FC<{ post: PostStatusBadgeSource }> = ({
+  post,
+}) => {
   const { i18n } = useLingui();
+  const { isAuthor } = useViewer();
+
+  const isPinned = post.pinned;
+  const isPinnedInCollection = Boolean(post.pinnedInCollection);
+  const isPrivate = post.visibility === "private";
+  const isDraft = post.status === "draft";
+
+  // The author's card keeps every badge so the menu can reveal one instantly.
+  // A reader's card carries only what is true right now, and nothing when the
+  // post has no status to announce.
+  if (
+    !isAuthor &&
+    !isPinned &&
+    !isPinnedInCollection &&
+    !isPrivate &&
+    !isDraft
+  ) {
+    return null;
+  }
+
+  const showPinned = isAuthor || isPinned;
+  const showPinnedInCollection = isAuthor || isPinnedInCollection;
+  const showPrivate = isAuthor || isPrivate;
+  const showDraft = isAuthor || isDraft;
 
   const pinnedLabel = i18n._(
     msg({
@@ -25,46 +64,54 @@ export const PostStatusBadges: FC = () => {
 
   return (
     <div class="post-status-badges">
-      <span class="post-status-badge post-status-pinned">
-        <Icon name="post-status-pin" />
-        {pinnedLabel}
-      </span>
-      <span class="post-status-badge post-status-pinned-in-collection">
-        <Icon name="post-status-pin" />
-        {pinnedLabel}
-      </span>
-      <span class="post-status-badge post-status-private">
-        <Icon name="post-status-private" />
-        {i18n._(
-          msg({
-            message: "Private",
-            comment: "@context: Post status badge for a private post",
-          }),
-        )}
-      </span>
+      {showPinned && (
+        <span class="post-status-badge post-status-pinned">
+          <Icon name="post-status-pin" />
+          {pinnedLabel}
+        </span>
+      )}
+      {showPinnedInCollection && (
+        <span class="post-status-badge post-status-pinned-in-collection">
+          <Icon name="post-status-pin" />
+          {pinnedLabel}
+        </span>
+      )}
+      {showPrivate && (
+        <span class="post-status-badge post-status-private">
+          <Icon name="post-status-private" />
+          {i18n._(
+            msg({
+              message: "Private",
+              comment: "@context: Post status badge for a private post",
+            }),
+          )}
+        </span>
+      )}
       {/* The one badge that is also a control: a draft's most likely next
           action is "finish it", so the label itself opens the editor. */}
-      <button
-        type="button"
-        class="post-status-badge post-status-draft"
-        data-draft-continue
-        title={i18n._(
-          msg({
-            message: "Continue writing this draft",
-            comment:
-              "@context: Tooltip on the draft badge, which opens the editor",
-          }),
-        )}
-      >
-        <Icon name="post-status-draft" />
-        {i18n._(
-          msg({
-            message: "Draft",
-            comment:
-              "@context: Post status badge for an unpublished draft, shown to the author only",
-          }),
-        )}
-      </button>
+      {showDraft && (
+        <button
+          type="button"
+          class="post-status-badge post-status-draft"
+          data-draft-continue
+          title={i18n._(
+            msg({
+              message: "Continue writing this draft",
+              comment:
+                "@context: Tooltip on the draft badge, which opens the editor",
+            }),
+          )}
+        >
+          <Icon name="post-status-draft" />
+          {i18n._(
+            msg({
+              message: "Draft",
+              comment:
+                "@context: Post status badge for an unpublished draft, shown to the author only",
+            }),
+          )}
+        </button>
+      )}
     </div>
   );
 };

package/src/ui/feed/QuoteCard.tsx

@@ -3,11 +3,15 @@
  *
  * Left-border accent blockquote with full date in footer.
  *
- * Fields:
- * - quoteText: the quoted text
- * - title: attribution (who said it)
- * - url: source link
- * - bodyHtml: commentary
+ * Fields, and the microformats2 property each maps to:
+ * - quoteText: the quoted text — the h-cite's `p-content`
+ * - title: attribution (who said it) — the h-cite's `p-name`
+ * - url: source link — the h-cite's `u-url`
+ * - bodyHtml: commentary — the h-entry's `e-content`
+ *
+ * `p-name` for the attribution is deliberately loose: the field may hold a
+ * person, a work, or a site, and a person would strictly be a `p-author` with
+ * a nested h-card. `p-name` covers all three without inventing that h-card.
  */
 
 import type { FC } from "hono/jsx";
@@ -17,6 +21,7 @@ import { PostFooter } from "../shared/PostFooter.js";
 import { PostStatusBadges } from "./PostStatusBadges.js";
 import { sanitizeUrl, extractDisplayDomain } from "../../lib/url.js";
 import { DecorativeQuoteMark } from "../shared/DecorativeQuoteMark.js";
+import { EmptyPostContent } from "../shared/EmptyPostContent.js";
 import { MediaGallery } from "../shared/MediaGallery.js";
 import { getPostArticleAttributes } from "../shared/post-article-attributes.js";
 
@@ -30,6 +35,9 @@ export const QuoteCard: FC<TimelineCardProps> = ({
   const articleClass = `h-entry post-menu-target${isCompact ? " feed-compact" : isDetail ? " py-6" : " feed-quote-post"}`;
   const safeUrl = post.url ? sanitizeUrl(post.url) : "";
   const commentaryHtml = post.bodyHtml ?? null;
+  const showCite =
+    !!post.quoteText || (!isCompact && !!(post.title || safeUrl));
+  const showCommentary = !isCompact && !!commentaryHtml;
 
   return (
     <article
@@ -37,36 +45,53 @@ export const QuoteCard: FC<TimelineCardProps> = ({
       {...(isDetail ? { "data-page": "post" } : {})}
       {...getPostArticleAttributes(post)}
     >
-      {!isCompact && !display?.hideStatusBadges && <PostStatusBadges />}
-      {post.quoteText && (
-        <blockquote class={`feed-quote${isCompact ? "" : " feed-quote-card"}`}>
-          {!isCompact && <DecorativeQuoteMark class="feed-quote-mark" />}
-          <div
-            class={`e-content feed-quote-content${isCompact ? " text-sm" : isDetail ? " post-detail-quote" : ""}`}
-          >
-            {post.quoteText}
-          </div>
-        </blockquote>
+      {!isCompact && !display?.hideStatusBadges && (
+        <PostStatusBadges post={post} />
       )}
-      {!isCompact && (post.title || safeUrl) && (
-        <div class="feed-quote-attribution">
-          {safeUrl ? (
-            <a
-              href={safeUrl}
-              class="feed-quote-source"
-              target="_blank"
-              rel="noopener noreferrer"
+      {showCite && (
+        /* The h-cite spans both the quoted text and its attribution, because
+           mf2 properties bind to descendants: a `u-url` on the source link
+           left outside would attach to the h-entry and shadow the permalink,
+           and `p-name` would become this post's own name. `<figure>` with a
+           `<figcaption>` is also how HTML pairs a blockquote with its source. */
+        <figure class="feed-quote-cite h-cite">
+          {post.quoteText && (
+            <blockquote
+              class={`feed-quote${isCompact ? "" : " feed-quote-card"}`}
             >
-              {post.title || extractDisplayDomain(safeUrl) || safeUrl}
-            </a>
-          ) : (
-            <span>{post.title}</span>
+              {!isCompact && <DecorativeQuoteMark class="feed-quote-mark" />}
+              <div
+                class={`p-content feed-quote-content${isCompact ? " text-sm" : isDetail ? " post-detail-quote" : ""}`}
+              >
+                {post.quoteText}
+              </div>
+            </blockquote>
+          )}
+          {!isCompact && (post.title || safeUrl) && (
+            <figcaption class="feed-quote-attribution">
+              {safeUrl ? (
+                <a
+                  href={safeUrl}
+                  class="u-url p-name feed-quote-source"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {post.title || extractDisplayDomain(safeUrl) || safeUrl}
+                </a>
+              ) : (
+                <span class="p-name">{post.title}</span>
+              )}
+            </figcaption>
           )}
-        </div>
+        </figure>
       )}
-      {!isCompact && commentaryHtml && (
+      {/* Nothing quoted and nothing said leaves the entry with no `p-name`,
+          no `e-content`, and no nested h-cite — the shape a parser fills in by
+          guessing. */}
+      {!showCite && !showCommentary && <EmptyPostContent />}
+      {showCommentary && (
         <div
-          class={`feed-quote-commentary prose${isDetail ? " post-detail-body" : " text-muted-foreground"}`}
+          class={`e-content feed-quote-commentary prose${isDetail ? " post-detail-body" : " text-muted-foreground"}`}
           data-post-body
           dangerouslySetInnerHTML={{ __html: commentaryHtml }}
         />

package/src/ui/feed/ThreadPreview.tsx

@@ -36,6 +36,7 @@ export const ThreadPreview: FC<ThreadPreviewProps> = ({
   leadingReplies,
   trailingReplies,
   latestReply,
+  gapHref,
   totalReplyCount,
 }) => {
   const { i18n } = useLingui();
@@ -81,7 +82,10 @@ export const ThreadPreview: FC<ThreadPreviewProps> = ({
     });
   const renderedLeadingReplies = dedupeReplies(leadingReplies);
   const renderedTrailingReplies = dedupeReplies(trailingReplies);
-  const gapHref = renderedLeadingReplies[0]?.permalink ?? latestReply.permalink;
+  // The gap opens the first post it hides — the rule in `lib/thread-fold.ts`,
+  // which the feed follows too. The fallback only covers a gap target that
+  // went unpublished between the count and the fetch.
+  const gapLinkHref = gapHref ?? latestReply.permalink;
 
   // Always render the collapsible shell + toggle: the cap and fade are a
   // constant "this is context" affordance. The toggle's *initial* visibility
@@ -116,7 +120,7 @@ export const ThreadPreview: FC<ThreadPreviewProps> = ({
   const gapItem =
     hiddenCount > 0 ? (
       <div class="thread-item thread-item-gap">
-        <a href={gapHref} class="thread-gap-link">
+        <a href={gapLinkHref} class="thread-gap-link">
           {hiddenPostsLabel}
         </a>
       </div>

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

@@ -1,7 +1,7 @@
-import { readFileSync } from "node:fs";
 import type { Context } from "hono";
 import { renderToString } from "hono/jsx/dom/server";
 import { describe, expect, it } from "vitest";
+import { readComponentCss } from "../../../__tests__/helpers/component-css.js";
 import { I18nProvider } from "../../../i18n/context.js";
 import { createI18n } from "../../../i18n/i18n.js";
 import type { PostView, TimelineItemView } from "../../../types.js";
@@ -36,8 +36,7 @@ function createPostView(overrides: Partial<PostView> = {}): PostView {
 
 function renderWithI18n(
   render: () =>
-    | ReturnType<typeof ThreadPreview>
-    | ReturnType<typeof CuratedThreadPreview>,
+    ReturnType<typeof ThreadPreview> | ReturnType<typeof CuratedThreadPreview>,
 ) {
   const i18n = createI18n("en");
   const c = {
@@ -157,10 +156,7 @@ describe("getThreadPreviewState", () => {
   });
 
   it("keeps thread preview items shrinkable within the grid track", () => {
-    const css = readFileSync(
-      new URL("../../../styles/ui.css", import.meta.url),
-      "utf8",
-    );
+    const css = readComponentCss();
 
     expect(css).toMatch(
       /\.thread-item\s*\{[\s\S]*min-width:\s*0;[\s\S]*max-width:\s*100%;/,
@@ -168,17 +164,14 @@ describe("getThreadPreviewState", () => {
   });
 
   it("adds extra mobile inset before the thread rail reaches the viewport edge", () => {
-    const css = readFileSync(
-      new URL("../../../styles/ui.css", import.meta.url),
-      "utf8",
-    );
+    const css = readComponentCss();
 
     expect(css).toMatch(
-      /@media\s*\(max-width:\s*760px\)\s*\{[\s\S]*\.thread-group-preview,\s*\.thread-group-detail\s*\{[\s\S]*--site-thread-rail-indent:\s*8px;[\s\S]*--site-thread-rail-line-left:\s*-11px;/,
+      /@media\s*\(max-width:\s*699px\)\s*\{[\s\S]*\.thread-group-preview,\s*\.thread-group-detail\s*\{[\s\S]*--site-thread-rail-indent:\s*8px;[\s\S]*--site-thread-rail-line-left:\s*-11px;/,
     );
     // dot-left is no longer hardcoded — derived via calc() from line-left
     expect(css).not.toMatch(
-      /@media\s*\(max-width:\s*760px\)\s*\{[\s\S]*--site-thread-rail-dot-left:/,
+      /@media\s*\(max-width:\s*699px\)\s*\{[\s\S]*--site-thread-rail-dot-left:/,
     );
   });
 
@@ -400,7 +393,7 @@ describe("getThreadPreviewState", () => {
     expect(toggleTag(html)).not.toContain("hidden");
   });
 
-  it("points the hidden-posts gap link to the second reply so the detail page opens just above the hidden range", () => {
+  it("points the hidden-posts gap link at the first post it hides", () => {
     const html = renderWithI18n(() =>
       ThreadPreview({
         rootPost: createPostView({ bodyHtml: "<p>Root</p>" }),
@@ -427,16 +420,20 @@ describe("getThreadPreviewState", () => {
           bodyHtml: "<p>Latest</p>",
           isLastInThread: true,
         }),
+        gapHref: "/post-3",
         totalReplyCount: 4,
       }),
     );
 
     expect(html).toMatch(
-      /<a[^>]*\bhref="\/post-2"[^>]*\bclass="thread-gap-link"|<a[^>]*\bclass="thread-gap-link"[^>]*\bhref="\/post-2"/,
+      /<a[^>]*\bhref="\/post-3"[^>]*\bclass="thread-gap-link"|<a[^>]*\bclass="thread-gap-link"[^>]*\bhref="\/post-3"/,
     );
   });
 
-  it("falls back to the latest reply for the gap link when there is no second reply", () => {
+  // The gap target comes from the service, one rank past the leading window.
+  // It can be missing where the count and the fetch disagree — a reply
+  // unpublished between them — and the link still has to go somewhere.
+  it("falls back to the latest reply when no gap target arrives", () => {
     const html = renderWithI18n(() =>
       ThreadPreview({
         rootPost: createPostView({ bodyHtml: "<p>Root</p>" }),