@jant/core 0.3.35 → 0.3.37

package/src/ui/feed/LinkCard.tsx

@@ -6,13 +6,25 @@
 
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../types.js";
+import { StarRating } from "../shared/StarRating.js";
+import { PostFooter } from "../shared/PostFooter.js";
+import { PostStatusBadges } from "./PostStatusBadges.js";
+import { sanitizeUrl } from "../../lib/url.js";
 
-export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
-  // Extract domain from URL for display
+export const LinkCard: FC<TimelineCardProps> = ({
+  post,
+  mode = "feed",
+  display,
+}) => {
+  const isCompact = mode === "compact";
+  const isDetail = mode === "detail";
+  const articleClass = `h-entry post-menu-target${isCompact ? " feed-compact" : isDetail ? " py-6" : " feed-card feed-card-link"}`;
+
+  const safeUrl = post.url ? sanitizeUrl(post.url) : "";
   let domain: string | undefined;
-  if (post.url) {
+  if (safeUrl) {
     try {
-      domain = new URL(post.url).hostname.replace(/^www\./, "");
+      domain = new URL(safeUrl).hostname.replace(/^www\./, "");
     } catch {
       // Invalid URL, skip domain display
     }
@@ -20,53 +32,90 @@ export const LinkCard: FC<TimelineCardProps> = ({ post, compact }) => {
 
   return (
     <article
-      class={`h-entry${compact ? " feed-compact" : ""}`}
+      class={articleClass}
+      {...(isDetail ? { "data-page": "post" } : {})}
       data-post
       data-format="link"
+      data-post-id={post.id}
+      data-post-permalink={post.permalink}
+      {...(post.pinned ? { "data-post-pinned": "" } : {})}
+      {...(post.featured ? { "data-post-featured": "" } : {})}
+      data-post-visibility={post.visibility}
+      {...(!isDetail && post.threadRootId ? { "data-post-reply": "" } : {})}
     >
-      {domain && (
-        <div class="text-xs text-muted-foreground mb-1 flex items-center gap-1">
-          <svg
-            class="size-3"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="2"
-            stroke="currentColor"
-          >
-            <path d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-          </svg>
-          <span>{domain}</span>
-        </div>
-      )}
-      {post.title && (
-        <h2
-          class={`p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`}
-        >
+      {!isCompact && !display?.hideStatusBadges && <PostStatusBadges />}
+      {domain &&
+        (safeUrl ? (
           <a
-            href={post.url || post.permalink}
-            class="u-url hover:underline"
-            target={post.url ? "_blank" : undefined}
-            rel={post.url ? "noopener noreferrer" : undefined}
+            href={safeUrl}
+            class="feed-link-domain"
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            {post.title}
+            <svg
+              class="feed-link-domain-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+            >
+              <path d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+            </svg>
+            <span>{domain}</span>
           </a>
-        </h2>
-      )}
-      {!compact && post.bodyHtml && (
+        ) : (
+          <div class="feed-link-domain">
+            <svg
+              class="feed-link-domain-icon"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="2"
+              stroke="currentColor"
+            >
+              <path d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+            </svg>
+            <span>{domain}</span>
+          </div>
+        ))}
+      {post.title &&
+        (isDetail ? (
+          <h1 class="p-name feed-link-title text-2xl font-semibold mb-4">
+            <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>
+        ) : (
+          <h2
+            class={`p-name feed-link-title font-semibold ${isCompact ? "text-sm" : ""} mb-1`}
+          >
+            <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>
+        ))}
+      {!isCompact && post.bodyHtml && (
         <div
-          class="e-content prose text-muted-foreground"
+          class="e-content prose text-muted-foreground feed-link-summary"
           data-post-body
           dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
         />
       )}
-      <footer class="mt-2 text-xs text-muted-foreground" data-post-meta>
-        <a href={post.permalink} class="hover:underline">
-          <time class="dt-published" datetime={post.publishedAt}>
-            {post.publishedAtFormatted}
-          </time>
-        </a>
-      </footer>
+      {!isCompact && !display?.hideRating && (
+        <StarRating rating={post.rating} />
+      )}
+      <PostFooter post={post} detail={isDetail} display={display?.footer} />
     </article>
   );
 };

package/src/ui/feed/NoteCard.tsx

@@ -8,39 +8,59 @@
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../types.js";
 import { MediaGallery } from "../shared/MediaGallery.js";
+import { StarRating } from "../shared/StarRating.js";
+import { PostFooter } from "../shared/PostFooter.js";
+import { PostStatusBadges } from "./PostStatusBadges.js";
 
-export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
+export const NoteCard: FC<TimelineCardProps> = ({
+  post,
+  mode = "feed",
+  display,
+}) => {
+  const isCompact = mode === "compact";
+  const isDetail = mode === "detail";
   const isArticle = !!post.title;
-  const displayHtml = isArticle ? post.summaryHtml : post.bodyHtml;
+  const displayHtml = isDetail || !isArticle ? post.bodyHtml : post.summaryHtml;
 
   return (
     <article
-      class={`h-entry${compact ? " feed-compact" : ""}`}
+      class={`h-entry post-menu-target${isCompact ? " feed-compact" : isDetail ? " py-6" : ""}`}
+      {...(isDetail ? { "data-page": "post" } : {})}
       data-post
       data-format="note"
+      data-post-id={post.id}
+      data-post-permalink={post.permalink}
+      {...(post.pinned ? { "data-post-pinned": "" } : {})}
+      {...(post.featured ? { "data-post-featured": "" } : {})}
+      data-post-visibility={post.visibility}
+      {...(!isDetail && post.threadRootId ? { "data-post-reply": "" } : {})}
     >
-      {isArticle && (
-        <h2
-          class={`p-name font-semibold ${compact ? "text-sm" : "text-base"} mb-1`}
-        >
-          <a href={post.permalink} class="u-url hover:underline">
-            {post.title}
-          </a>
-        </h2>
-      )}
+      {!isCompact && !display?.hideStatusBadges && <PostStatusBadges />}
+      {isArticle &&
+        (isDetail ? (
+          <h1 class="p-name text-2xl font-semibold mb-4">{post.title}</h1>
+        ) : (
+          <h2
+            class={`p-name font-semibold ${isCompact ? "text-sm" : "text-lg"} mb-1`}
+          >
+            <a href={post.permalink} class="u-url hover:underline">
+              {post.title}
+            </a>
+          </h2>
+        ))}
       {displayHtml && (
         <div
-          class={`e-content prose ${compact ? "prose-sm" : isArticle ? "text-muted-foreground" : ""}`}
+          class={`e-content prose ${isCompact ? "prose-sm" : isArticle && !isDetail ? "text-muted-foreground" : ""}`}
           data-post-body
           dangerouslySetInnerHTML={{ __html: displayHtml }}
         />
       )}
-      {!compact && post.media.length > 0 && (
+      {!isCompact && post.media.length > 0 && (
         <div class="mt-3" data-post-media>
           <MediaGallery attachments={post.media} />
         </div>
       )}
-      {!compact && isArticle && post.summaryHasMore && (
+      {!isDetail && !isCompact && isArticle && post.summaryHasMore && (
         <a
           href={`${post.permalink}#continue`}
           class="text-sm text-muted-foreground hover:underline mt-1 inline-block"
@@ -48,16 +68,10 @@ export const NoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
           Continue →
         </a>
       )}
-      <footer class="mt-2" data-post-meta>
-        <a
-          href={post.permalink}
-          class="u-url text-xs text-muted-foreground hover:underline"
-        >
-          <time class="dt-published" datetime={post.publishedAt}>
-            {post.publishedAtFormatted}
-          </time>
-        </a>
-      </footer>
+      {!isCompact && !display?.hideRating && (
+        <StarRating rating={post.rating} />
+      )}
+      <PostFooter post={post} detail={isDetail} display={display?.footer} />
     </article>
   );
 };

package/src/ui/feed/PostStatusBadges.tsx

@@ -0,0 +1,67 @@
+/**
+ * Post Status Badges
+ *
+ * Renders pinned / featured indicators at the top of a post card.
+ * All badges are always rendered in the DOM; visibility is driven by CSS
+ * selectors on the parent article's data attributes (data-post-pinned,
+ * data-post-featured). This lets the post menu toggle
+ * badges instantly without a page reload.
+ */
+
+import type { FC } from "hono/jsx";
+
+export const PostStatusBadges: FC = () => {
+  return (
+    <div class="post-status-badges">
+      <span class="post-status-badge post-status-pinned">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.75"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <line x1="12" x2="12" y1="17" y2="22" />
+          <path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z" />
+        </svg>
+        Pinned
+      </span>
+      <span class="post-status-separator" aria-hidden="true">
+        &middot;
+      </span>
+      <span class="post-status-badge post-status-featured">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.75"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" />
+        </svg>
+        Featured
+      </span>
+      <span class="post-status-badge post-status-private">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.75"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" />
+          <path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" />
+          <path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" />
+          <path d="m2 2 20 20" />
+        </svg>
+        Private
+      </span>
+    </div>
+  );
+};

package/src/ui/feed/QuoteCard.tsx

@@ -12,30 +12,51 @@
 
 import type { FC } from "hono/jsx";
 import type { TimelineCardProps } from "../../types.js";
+import { StarRating } from "../shared/StarRating.js";
+import { PostFooter } from "../shared/PostFooter.js";
+import { PostStatusBadges } from "./PostStatusBadges.js";
+import { sanitizeUrl } from "../../lib/url.js";
+
+export const QuoteCard: FC<TimelineCardProps> = ({
+  post,
+  mode = "feed",
+  display,
+}) => {
+  const isCompact = mode === "compact";
+  const isDetail = mode === "detail";
+  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;
 
-export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
   return (
     <article
-      class={`h-entry${compact ? " feed-compact" : ""}`}
+      class={articleClass}
+      {...(isDetail ? { "data-page": "post" } : {})}
       data-post
       data-format="quote"
+      data-post-id={post.id}
+      data-post-permalink={post.permalink}
+      {...(post.pinned ? { "data-post-pinned": "" } : {})}
+      {...(post.featured ? { "data-post-featured": "" } : {})}
+      data-post-visibility={post.visibility}
+      {...(!isDetail && post.threadRootId ? { "data-post-reply": "" } : {})}
     >
+      {!isCompact && !display?.hideStatusBadges && <PostStatusBadges />}
       {post.quoteText && (
-        <blockquote class="feed-quote">
+        <blockquote class={`feed-quote${isCompact ? "" : " feed-quote-card"}`}>
           <div
-            class={`e-content ${compact ? "text-sm" : "text-base"} leading-relaxed`}
+            class={`e-content feed-quote-content${isCompact ? " text-sm" : ""}`}
           >
             {post.quoteText}
           </div>
         </blockquote>
       )}
-      {!compact && (post.title || post.url) && (
-        <div class="mt-2 text-sm text-muted-foreground">
-          &mdash;{" "}
-          {post.url ? (
+      {!isCompact && (post.title || safeUrl) && (
+        <div class="feed-quote-attribution">
+          {safeUrl ? (
             <a
-              href={post.url}
-              class="hover:underline"
+              href={safeUrl}
+              class="feed-quote-source"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -46,23 +67,17 @@ export const QuoteCard: FC<TimelineCardProps> = ({ post, compact }) => {
           )}
         </div>
       )}
-      {!compact && post.bodyHtml && (
+      {!isCompact && commentaryHtml && (
         <div
-          class="mt-3 prose text-muted-foreground"
+          class="feed-quote-commentary prose text-muted-foreground"
           data-post-body
-          dangerouslySetInnerHTML={{ __html: post.bodyHtml }}
+          dangerouslySetInnerHTML={{ __html: commentaryHtml }}
         />
       )}
-      <footer class="mt-2" data-post-meta>
-        <a
-          href={post.permalink}
-          class="u-url text-xs text-muted-foreground hover:underline"
-        >
-          <time class="dt-published" datetime={post.publishedAt}>
-            {post.publishedAtFormatted}
-          </time>
-        </a>
-      </footer>
+      {!isCompact && !display?.hideRating && (
+        <StarRating rating={post.rating} />
+      )}
+      <PostFooter post={post} detail={isDetail} display={display?.footer} />
     </article>
   );
 };

package/src/ui/feed/ThreadPreview.tsx

@@ -1,7 +1,8 @@
 /**
  * Thread Preview
  *
- * Root post + vertical line connector + compact replies underneath.
+ * Shows latest reply as the hero post with faded ancestor context above.
+ * Thread line connects all posts via `.thread-group` / `.thread-item`.
  */
 
 import type { FC } from "hono/jsx";
@@ -9,40 +10,103 @@ import { useLingui } from "@lingui/react/macro";
 import type { ThreadPreviewProps } from "../../types.js";
 import { TimelineItem } from "./TimelineItem.js";
 import { TimelineItemFromPost } from "./TimelineItem.js";
+import {
+  getThreadPreviewState,
+  isThreadContextLikelyOverflow,
+} from "./thread-preview-state.js";
+
+const THREAD_CONTEXT_DISPLAY = {
+  hideStatusBadges: true,
+  hideRating: true,
+  footer: {
+    hideActions: true,
+  },
+} as const;
 
 export const ThreadPreview: FC<ThreadPreviewProps> = ({
   rootPost,
-  previewReplies,
+  latestReply,
+  parentReply,
   totalReplyCount,
 }) => {
   const { t } = useLingui();
-  const remainingCount = totalReplyCount - previewReplies.length;
+  const showMoreLabel = t({
+    message: "Show more",
+    comment: "@context: Button to expand faded thread context",
+  });
+  const showLessLabel = t({
+    message: "Show less",
+    comment: "@context: Button to collapse expanded thread context",
+  });
+  const { hiddenCount } = getThreadPreviewState({
+    hasParentReply: parentReply !== undefined,
+    totalReplyCount,
+  });
+  const startsCollapsedWithAffordances = isThreadContextLikelyOverflow({
+    rootPost,
+    parentReply,
+    hiddenCount,
+  });
 
   return (
-    <div>
-      <TimelineItem item={{ post: rootPost }} />
-      {previewReplies.length > 0 && (
-        <div class="feed-replies">
-          {previewReplies.map((reply) => (
-            <div key={reply.id} class="feed-reply">
-              <TimelineItemFromPost post={reply} compact />
-            </div>
-          ))}
-          {remainingCount > 0 && (
-            <div class="feed-reply">
-              <a
-                href={rootPost.permalink}
-                class="text-sm text-muted-foreground hover:text-foreground hover:underline"
-              >
-                {t({
-                  message: `Show ${remainingCount} more ${remainingCount === 1 ? "reply" : "replies"}`,
-                  comment: "@context: Link to show remaining thread replies",
-                })}
-              </a>
-            </div>
-          )}
+    <div class="thread-group thread-group-preview">
+      {/* Faded ancestor context */}
+      <div
+        class={`thread-context-shell thread-context-collapsed${startsCollapsedWithAffordances ? " thread-context-faded" : ""}`}
+        data-thread-context
+      >
+        {/* Root post */}
+        <div class="thread-item thread-item-context">
+          <TimelineItemFromPost
+            post={rootPost}
+            mode="feed"
+            display={THREAD_CONTEXT_DISPLAY}
+          />
         </div>
-      )}
+
+        {/* Hidden posts gap */}
+        {hiddenCount > 0 && (
+          <div class="thread-item thread-item-gap">
+            <a href={latestReply.permalink} class="thread-gap-link">
+              {t({
+                message: `${hiddenCount} more ${hiddenCount === 1 ? "post" : "posts"}`,
+                comment:
+                  "@context: Link showing count of hidden thread posts between root and latest",
+              })}
+            </a>
+          </div>
+        )}
+
+        {/* Parent of latest reply */}
+        {parentReply && (
+          <div class="thread-item thread-item-context">
+            <TimelineItemFromPost
+              post={parentReply}
+              mode="feed"
+              display={THREAD_CONTEXT_DISPLAY}
+            />
+          </div>
+        )}
+
+        <div class="thread-context-fade" />
+      </div>
+
+      {/* Toggle button */}
+      <button
+        type="button"
+        class={`thread-context-toggle text-xs text-muted-foreground hover:text-foreground${startsCollapsedWithAffordances ? "" : " hidden"}`}
+        data-thread-context-toggle
+        data-label-more={showMoreLabel}
+        data-label-less={showLessLabel}
+        aria-expanded="false"
+      >
+        {showMoreLabel}
+      </button>
+
+      {/* Latest reply (full card, hero) */}
+      <div class="thread-item thread-item-hero">
+        <TimelineItem item={{ post: latestReply }} />
+      </div>
     </div>
   );
 };

package/src/ui/feed/TimelineFeed.tsx

@@ -1,7 +1,7 @@
 /**
  * Timeline Feed
  *
- * Flat list of posts separated by simple dividers.
+ * Flat list of posts separated by lightweight dividers.
  */
 
 import type { FC } from "hono/jsx";
@@ -25,7 +25,8 @@ export const TimelineFeed: FC<TimelineFeedProps> = ({
               {item.threadPreview ? (
                 <ThreadPreview
                   rootPost={item.post}
-                  previewReplies={item.threadPreview.replies}
+                  latestReply={item.threadPreview.latestReply}
+                  parentReply={item.threadPreview.parentReply}
                   totalReplyCount={item.threadPreview.totalReplyCount}
                 />
               ) : (

package/src/ui/feed/TimelineItem.tsx

@@ -8,8 +8,10 @@ import type { FC } from "hono/jsx";
 import type {
   TimelineItemView,
   TimelineCardProps,
+  TimelineCardDisplayOptions,
   PostView,
   Format,
+  CardMode,
 } from "../../types.js";
 import { NoteCard } from "./NoteCard.js";
 import { LinkCard } from "./LinkCard.js";
@@ -23,23 +25,30 @@ const CARD_MAP: Record<Format, FC<TimelineCardProps>> = {
 
 interface TimelineItemProps {
   item: TimelineItemView;
-  compact?: boolean;
+  mode?: CardMode;
+  display?: TimelineCardDisplayOptions;
 }
 
 interface TimelineItemFromPostProps {
   post: PostView;
-  compact?: boolean;
+  mode?: CardMode;
+  display?: TimelineCardDisplayOptions;
 }
 
-export const TimelineItem: FC<TimelineItemProps> = ({ item, compact }) => {
+export const TimelineItem: FC<TimelineItemProps> = ({
+  item,
+  mode,
+  display,
+}) => {
   const Card = CARD_MAP[item.post.format];
-  return <Card post={item.post} compact={compact} />;
+  return <Card post={item.post} mode={mode} display={display} />;
 };
 
 export const TimelineItemFromPost: FC<TimelineItemFromPostProps> = ({
   post,
-  compact,
+  mode,
+  display,
 }) => {
   const Card = CARD_MAP[post.format];
-  return <Card post={post} compact={compact} />;
+  return <Card post={post} mode={mode} display={display} />;
 };