@jant/core 0.6.14 → 0.6.16

package/src/ui/pages/CollectionPage.tsx

@@ -19,6 +19,7 @@ import { toPublicPath } from "../../lib/url.js";
 import { TimelineFeed } from "../feed/TimelineFeed.js";
 import { getCollectionMutationLabels } from "../shared/collection-management-labels.js";
 import { getIconSvg } from "../../lib/icons.js";
+import { NAVIGATION_SETTINGS_PATH } from "../../lib/settings-paths.js";
 
 const escapeJson = (data: unknown) =>
   JSON.stringify(data).replace(/</g, "\\u003c");
@@ -35,7 +36,9 @@ export const CollectionPage: FC<CollectionPageProps> = ({
   defaultSort,
   showRatingSort,
   isAuthenticated,
+  isInNavigation = false,
   sitePathPrefix = "",
+  feedHref,
 }) => {
   const primaryCollection = collections[0];
   if (!primaryCollection) return null;
@@ -58,6 +61,10 @@ export const CollectionPage: FC<CollectionPageProps> = ({
     )}`,
     sitePathPrefix,
   );
+  const navigationSettingsUrl = toPublicPath(
+    NAVIGATION_SETTINGS_PATH,
+    sitePathPrefix,
+  );
   const sortUiId = isAggregate
     ? collections.map((collection) => collection.slug).join("-")
     : primaryCollection.id;
@@ -226,7 +233,9 @@ export const CollectionPage: FC<CollectionPageProps> = ({
             <div
               class="collection-page-description prose"
               dangerouslySetInnerHTML={{
-                __html: renderMarkdown(primaryCollection.description),
+                __html: renderMarkdown(primaryCollection.description, {
+                  namespace: primaryCollection.id,
+                }),
               }}
             />
           ) : null}
@@ -298,25 +307,30 @@ export const CollectionPage: FC<CollectionPageProps> = ({
                         "@context: Plural thread count label on collection detail page",
                     }),
                   )}
-              {pageLabel ? <span> / {pageLabel}</span> : null}{" "}
-              <a
-                href={toPublicPath(`${pagePath}/feed`, sitePathPrefix)}
-                class="feed-link"
-                title={i18n._(
-                  msg({
-                    message: "RSS feed",
-                    comment:
-                      "@context: Tooltip for the RSS feed link on a collection page",
-                  }),
-                )}
-                rel="noopener noreferrer"
-              >
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html: getIconSvg("rss") ?? "",
-                  }}
-                />
-              </a>
+              {pageLabel ? <span> / {pageLabel}</span> : null}
+              {feedHref ? (
+                <>
+                  {" "}
+                  <a
+                    href={toPublicPath(feedHref, sitePathPrefix)}
+                    class="feed-link"
+                    title={i18n._(
+                      msg({
+                        message: "RSS feed",
+                        comment:
+                          "@context: Tooltip for the RSS feed link on a collection page",
+                      }),
+                    )}
+                    rel="noopener noreferrer"
+                  >
+                    <span
+                      dangerouslySetInnerHTML={{
+                        __html: getIconSvg("rss") ?? "",
+                      }}
+                    />
+                  </a>
+                </>
+              ) : null}
             </p>
             <span class="collection-page-meta-divider" aria-hidden="true">
               &middot;
@@ -450,6 +464,7 @@ export const CollectionPage: FC<CollectionPageProps> = ({
                 data-collection-page-actions
                 data-collection-id={primaryCollection.id}
                 data-collection-page-labels={escapeJson(mutationLabels)}
+                data-collection-in-navigation={String(isInNavigation)}
                 data-collection-page-redirect-url={toPublicPath(
                   getCollectionsDirectoryPath(),
                   sitePathPrefix,
@@ -510,6 +525,70 @@ export const CollectionPage: FC<CollectionPageProps> = ({
                       {mutationLabels.edit}
                     </span>
                   </a>
+                  <button
+                    type="button"
+                    class="collections-page-menu-item"
+                    role="menuitem"
+                    data-collection-page-action="add-to-navigation"
+                    hidden={isInNavigation}
+                  >
+                    <span
+                      class="collections-page-menu-item-icon"
+                      aria-hidden="true"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="M12 5v14" />
+                        <path d="M5 12h14" />
+                      </svg>
+                    </span>
+                    <span class="collections-page-menu-item-label">
+                      {mutationLabels.addToNavigation}
+                    </span>
+                  </button>
+                  <a
+                    href={navigationSettingsUrl}
+                    class="collections-page-menu-item"
+                    role="menuitem"
+                    data-collection-page-edit-navigation
+                    hidden={!isInNavigation}
+                  >
+                    <span
+                      class="collections-page-menu-item-icon"
+                      aria-hidden="true"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="M8 6h13" />
+                        <path d="M8 12h13" />
+                        <path d="M8 18h13" />
+                        <path d="M3 6h.01" />
+                        <path d="M3 12h.01" />
+                        <path d="M3 18h.01" />
+                      </svg>
+                    </span>
+                    <span class="collections-page-menu-item-label">
+                      {mutationLabels.editNavigation}
+                    </span>
+                  </a>
                   <button
                     type="button"
                     class="collections-page-menu-item collections-page-menu-item-danger"
@@ -556,7 +635,7 @@ export const CollectionPage: FC<CollectionPageProps> = ({
               ? i18n._(
                   msg({
                     message:
-                      "Nothing here yet. Add posts to one of these collections to fill this view.",
+                      "Nothing here yet. Add threads to one of these collections to fill this view.",
                     comment:
                       "@context: Empty state message on an aggregate collection page",
                   }),
@@ -564,7 +643,7 @@ export const CollectionPage: FC<CollectionPageProps> = ({
               : i18n._(
                   msg({
                     message:
-                      "This collection is empty. Add posts from the editor.",
+                      "This collection is empty. Add threads from the editor.",
                     comment: "@context: Empty state message",
                   }),
                 )}

package/src/ui/pages/CollectionsPage.tsx

@@ -14,13 +14,14 @@ import { CollectionsManager } from "../shared/CollectionsManager.js";
 export const CollectionsPage: FC<CollectionsPageProps> = ({
   items,
   isAuthenticated,
+  navigationCollectionIds = [],
   sitePathPrefix = "",
   siteOrigin = "",
 }) => {
   const { i18n } = useLingui();
   const emptyMessage = i18n._(
     msg({
-      message: "No collections yet. Start one to organize posts by topic.",
+      message: "No collections yet. Start one to organize threads by topic.",
       comment: "@context: Empty state message on collections page",
     }),
   );
@@ -30,6 +31,7 @@ export const CollectionsPage: FC<CollectionsPageProps> = ({
       <div class="py-6" data-page="collections">
         <CollectionsManager
           items={items}
+          navigationCollectionIds={navigationCollectionIds}
           sitePathPrefix={sitePathPrefix}
           siteOrigin={siteOrigin}
         />

package/src/ui/pages/PostPage.tsx

@@ -12,10 +12,22 @@
 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 type {
+  PostPageProps,
+  PostView,
+  TimelineCardDisplayOptions,
+} from "../../types.js";
 import { TimelineItemFromPost } from "../feed/TimelineItem.js";
 
-const renderThreadItem = (tp: PostView, currentId: string) => {
+const PREVIEW_DISPLAY: TimelineCardDisplayOptions = {
+  footer: { hideActions: true, hideReply: true, hideTimestamp: false },
+};
+
+const renderThreadItem = (
+  tp: PostView,
+  currentId: string,
+  isPreview: boolean,
+) => {
   const isCurrent = tp.id === currentId;
   return (
     <div
@@ -27,16 +39,19 @@ const renderThreadItem = (tp: PostView, currentId: string) => {
       <TimelineItemFromPost
         post={tp}
         mode="detail"
-        display={{ footer: { hideTimestamp: false } }}
+        display={
+          isPreview ? PREVIEW_DISPLAY : { footer: { hideTimestamp: false } }
+        }
       />
     </div>
   );
 };
 
-const ThreadDetail: FC<{ post: PostView; threadPosts: PostView[] }> = ({
-  post,
-  threadPosts,
-}) => {
+const ThreadDetail: FC<{
+  post: PostView;
+  threadPosts: PostView[];
+  isPreview: boolean;
+}> = ({ post, threadPosts, isPreview }) => {
   const { i18n } = useLingui();
   const showMoreLabel = i18n._(
     msg({
@@ -66,7 +81,7 @@ const ThreadDetail: FC<{ post: PostView; threadPosts: PostView[] }> = ({
             data-thread-context
             data-collapsed=""
           >
-            {ancestors.map((tp) => renderThreadItem(tp, post.id))}
+            {ancestors.map((tp) => renderThreadItem(tp, post.id, isPreview))}
           </div>
           <button
             type="button"
@@ -94,12 +109,16 @@ const ThreadDetail: FC<{ post: PostView; threadPosts: PostView[] }> = ({
           </button>
         </>
       )}
-      {currentAndAfter.map((tp) => renderThreadItem(tp, post.id))}
+      {currentAndAfter.map((tp) => renderThreadItem(tp, post.id, isPreview))}
     </div>
   );
 };
 
-export const PostPage: FC<PostPageProps> = ({ post, threadPosts }) => {
+export const PostPage: FC<PostPageProps> = ({
+  post,
+  threadPosts,
+  isPreview = false,
+}) => {
   return (
     <div
       data-post-view
@@ -107,9 +126,17 @@ export const PostPage: FC<PostPageProps> = ({ post, threadPosts }) => {
       data-thread-root-id={post.threadRootId ?? post.id}
     >
       {threadPosts && threadPosts.length > 1 ? (
-        <ThreadDetail post={post} threadPosts={threadPosts} />
+        <ThreadDetail
+          post={post}
+          threadPosts={threadPosts}
+          isPreview={isPreview}
+        />
       ) : (
-        <TimelineItemFromPost post={post} mode="detail" />
+        <TimelineItemFromPost
+          post={post}
+          mode="detail"
+          display={isPreview ? PREVIEW_DISPLAY : undefined}
+        />
       )}
       {/* Public integration slot — code injection (giscus, Webmentions, etc.) appends here. */}
       <div data-post-end />

package/src/ui/pages/SearchPage.tsx

@@ -15,6 +15,7 @@ import {
   CompactCollectionTags,
   PostMenuTriggerButton,
 } from "../shared/PostFooter.js";
+import { getPostArticleAttributes } from "../shared/post-article-attributes.js";
 
 // External link icon (shared by LinkCard)
 const ExternalLinkIcon = () => (
@@ -46,20 +47,11 @@ const SearchResultCard: FC<{
     }
   }
 
-  const hasCollections = post.collections.length > 0;
+  const isChildPost = !!post.replyToId || !!post.threadRootId;
+  const visibleCollections = isChildPost ? [] : post.collections;
+  const hasCollections = visibleCollections.length > 0;
 
-  // Data attributes required by the client-side post menu component
-  const postAttrs = {
-    "data-post": "",
-    "data-format": post.format,
-    "data-post-id": post.id,
-    "data-post-slug": post.slug,
-    "data-thread-root-id": post.threadRootId ?? post.id,
-    ...(post.pinned ? { "data-post-pinned": "" } : {}),
-    ...(post.featured ? { "data-post-featured": "" } : {}),
-    "data-post-visibility": post.visibility,
-    ...(post.threadRootId ? { "data-post-reply": "" } : {}),
-  };
+  const postAttrs = getPostArticleAttributes(post);
 
   const footer = (
     <footer class="post-menu-footer mt-2">
@@ -69,7 +61,7 @@ const SearchResultCard: FC<{
           <time datetime={post.publishedAt}>{post.publishedAtFormatted}</time>
         </a>
         <CompactCollectionTags
-          collections={post.collections}
+          collections={visibleCollections}
           showSeparator={hasCollections}
         />
       </div>

package/src/ui/pages/__tests__/ArchivePage.test.tsx

@@ -106,4 +106,74 @@ describe("ArchivePage", () => {
     expect(html).toContain("archive-chip-active");
     expect(html).toContain("Single posts");
   });
+
+  it("uses a recognizable quote mark for the quote format filter", () => {
+    const html = renderArchivePage({ filters: { format: "quote" } });
+
+    expect(html).toContain('class="lucide lucide-quote"');
+    expect(html).not.toContain('class="lucide lucide-text-quote"');
+  });
+
+  it("renders the feed button only when a feed href is provided", () => {
+    expect(renderArchivePage()).not.toContain('class="feed-link"');
+    expect(renderArchivePage({ feedHref: "/archive/feed" })).toContain(
+      'class="feed-link"',
+    );
+  });
+
+  it("offers the updated sort and marks published as the default", () => {
+    const html = renderArchivePage();
+
+    expect(html).toContain('aria-label="Sort order"');
+    expect(html).toContain("sort=updated");
+    expect(html).toContain(
+      '<a href="/archive" class="archive-view-btn archive-view-btn-active" role="radio" aria-checked="true" aria-label="Sort by when each thread was published"',
+    );
+  });
+
+  it("marks the updated sort active and keeps a way back", () => {
+    const html = renderArchivePage({ filters: { sort: "updated" } });
+
+    expect(html).toContain(
+      '<a href="/archive?sort=updated" class="archive-view-btn archive-view-btn-active" role="radio" aria-checked="true" aria-label="Sort by when each thread was last added to"',
+    );
+    expect(html).toContain('<a href="/archive" class="archive-view-btn"');
+  });
+
+  // Icon-only controls need a hover tooltip too — aria-label only reaches
+  // assistive tech, and a bare clock/history pair is unreadable without one.
+  it("gives every toolbar toggle a tooltip matching its accessible name", () => {
+    const html = renderArchivePage();
+
+    for (const label of [
+      "Sort by when each thread was published",
+      "Sort by when each thread was last added to",
+      "Show as a grid of tiles",
+      "Show as a list with full posts",
+    ]) {
+      expect(html).toContain(`aria-label="${label}" title="${label}"`);
+    }
+  });
+
+  it("labels month headers as update months in the updated sort", () => {
+    expect(renderArchivePage()).toContain(
+      '<span class="archive-month-header-label">March 2026</span>',
+    );
+
+    const updated = renderArchivePage({ filters: { sort: "updated" } });
+    expect(updated).toContain(
+      '<span class="archive-month-header-label">Updated March 2026</span>',
+    );
+    expect(updated).toContain("newest changes first");
+  });
+
+  it("keeps the sort selection in filter and view links", () => {
+    const html = renderArchivePage({
+      filters: { sort: "updated" },
+      availableCollections: [{ slug: "tech", title: "Tech" }],
+    });
+
+    expect(html).toContain("collection=tech&amp;sort=updated");
+    expect(html).toContain("view=list&amp;sort=updated");
+  });
 });

package/src/ui/pages/__tests__/PostPage.test.tsx

@@ -0,0 +1,88 @@
+import type { Context } from "hono";
+import { renderToString } from "hono/jsx/dom/server";
+import { describe, expect, it } from "vitest";
+import { I18nProvider } from "../../../i18n/context.js";
+import { createI18n } from "../../../i18n/i18n.js";
+import type { PostView } from "../../../types.js";
+import { PostPage } from "../PostPage.js";
+
+function createPostView(overrides: Partial<PostView> = {}): PostView {
+  return {
+    id: "pst_root",
+    permalink: "/root",
+    slug: "root",
+    bodyHtml: "<p>Post body</p>",
+    format: "note",
+    status: "published",
+    visibility: "public",
+    pinned: false,
+    featured: false,
+    publishedAt: "2026-07-18T00:00:00.000Z",
+    publishedAtFormatted: "Jul 18, 2026",
+    publishedAtTime: "08:00",
+    publishedAtRelative: "now",
+    updatedAt: "2026-07-18T00:00:00.000Z",
+    media: [],
+    collections: [],
+    isLastInThread: false,
+    ...overrides,
+  };
+}
+
+function renderPostPage(post: PostView, threadPosts: PostView[]): string {
+  const i18n = createI18n("en");
+  const c = {
+    get(key: string) {
+      if (key === "i18n") return i18n;
+      return undefined;
+    },
+  } as unknown as Context;
+
+  I18nProvider({ c, children: "" });
+  return renderToString(PostPage({ post, threadPosts }));
+}
+
+function getArticleTag(html: string, postId: string): string {
+  const article = (html.match(/<article\b[^>]*>/g) ?? []).find((tag) =>
+    tag.includes(`data-post-id="${postId}"`),
+  );
+  if (!article) throw new Error(`Missing article for ${postId}`);
+  return article;
+}
+
+describe("PostPage", () => {
+  it("preserves Root-versus-Child action context in detail mode", () => {
+    const root = createPostView();
+    const child = createPostView({
+      id: "pst_child",
+      permalink: "/child",
+      slug: "child",
+      format: "link",
+      title: "Child link",
+      url: "https://example.com/child",
+      replyToId: root.id,
+      threadRootId: root.id,
+    });
+    const grandchild = createPostView({
+      id: "pst_grandchild",
+      permalink: "/grandchild",
+      slug: "grandchild",
+      format: "quote",
+      quoteText: "Child quote",
+      replyToId: child.id,
+      threadRootId: root.id,
+      isLastInThread: true,
+    });
+
+    const html = renderPostPage(child, [root, child, grandchild]);
+    const rootArticle = getArticleTag(html, root.id);
+    const childArticle = getArticleTag(html, child.id);
+    const grandchildArticle = getArticleTag(html, grandchild.id);
+
+    expect(rootArticle).not.toContain("data-post-reply");
+    expect(childArticle).toContain('data-post-reply=""');
+    expect(childArticle).toContain(`data-thread-root-id="${root.id}"`);
+    expect(grandchildArticle).toContain('data-post-reply=""');
+    expect(grandchildArticle).toContain(`data-thread-root-id="${root.id}"`);
+  });
+});

package/src/ui/shared/CollectionDirectory.tsx

@@ -124,7 +124,7 @@ export const CollectionDirectory: FC<CollectionDirectoryProps> = ({
           i18n._(
             msg({
               message:
-                "No collections yet. Start one to organize posts by topic.",
+                "No collections yet. Start one to organize threads by topic.",
               comment: "@context: Empty state message on collections page",
             }),
           )}
@@ -231,7 +231,9 @@ export const CollectionDirectory: FC<CollectionDirectoryProps> = ({
                   <div
                     class="collection-directory-description prose"
                     dangerouslySetInnerHTML={{
-                      __html: renderMarkdown(item.description),
+                      __html: renderMarkdown(item.description, {
+                        namespace: item.id,
+                      }),
                     }}
                   />
                 ) : (
@@ -279,24 +281,26 @@ export const CollectionDirectory: FC<CollectionDirectoryProps> = ({
                 <div
                   class="collection-directory-description prose"
                   dangerouslySetInnerHTML={{
-                    __html: renderMarkdown(collection.description),
+                    __html: renderMarkdown(collection.description, {
+                      namespace: collection.id,
+                    }),
                   }}
                 />
               )}
               <p class="collection-directory-summary">
                 <span class="collection-directory-meta">
-                  {collection.postCount}{" "}
-                  {collection.postCount === 1
+                  {collection.threadCount}{" "}
+                  {collection.threadCount === 1
                     ? i18n._(
                         msg({
-                          message: "entry",
-                          comment: "@context: Singular entry count label",
+                          message: "thread",
+                          comment: "@context: Singular thread count label",
                         }),
                       )
                     : i18n._(
                         msg({
-                          message: "entries",
-                          comment: "@context: Plural entry count label",
+                          message: "threads",
+                          comment: "@context: Plural thread count label",
                         }),
                       )}
                 </span>

package/src/ui/shared/CollectionsManager.tsx

@@ -15,12 +15,14 @@ const escapeJson = (data: unknown) =>
 
 export interface CollectionsManagerProps {
   items: CollectionDirectoryItem[];
+  navigationCollectionIds?: string[];
   sitePathPrefix?: string;
   siteOrigin?: string;
 }
 
 export const CollectionsManager: FC<CollectionsManagerProps> = ({
   items,
+  navigationCollectionIds = [],
   sitePathPrefix = "",
   siteOrigin = "",
 }) => {
@@ -102,21 +104,21 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
         comment: "@context: Tooltip for divider delete button",
       }),
     ),
-    entrySingular: i18n._(
+    threadSingular: i18n._(
       msg({
-        message: "entry",
-        comment: "@context: Singular entry count label",
+        message: "thread",
+        comment: "@context: Singular thread count label",
       }),
     ),
-    entryPlural: i18n._(
+    threadPlural: i18n._(
       msg({
-        message: "entries",
-        comment: "@context: Plural entry count label",
+        message: "threads",
+        comment: "@context: Plural thread count label",
       }),
     ),
     emptyState: i18n._(
       msg({
-        message: "No collections yet. Start one to organize posts by topic.",
+        message: "No collections yet. Start one to organize threads by topic.",
         comment: "@context: Empty state message on collections page",
       }),
     ),
@@ -126,6 +128,13 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
         comment: "@context: Toast after reordering collections",
       }),
     ),
+    notNow: i18n._(
+      msg({
+        message: "Not now",
+        comment:
+          "@context: Action to dismiss the post-create Collection navigation prompt",
+      }),
+    ),
     ...mutationLabels,
   };
 
@@ -312,6 +321,7 @@ export const CollectionsManager: FC<CollectionsManagerProps> = ({
       <jant-collections-manager
         items={escapeJson(items)}
         labels={escapeJson(labels)}
+        navigation-collection-ids={escapeJson(navigationCollectionIds)}
       >
         <CollectionDirectory
           items={items}

package/src/ui/shared/DraftPreviewBar.tsx

@@ -0,0 +1,49 @@
+import { msg } from "@lingui/core/macro";
+import type { FC } from "hono/jsx";
+import { useLingui } from "../../i18n/context.js";
+
+interface DraftPreviewBarProps {
+  editHref: string;
+}
+
+/** Persistent page chrome that distinguishes an authenticated draft preview. */
+export const DraftPreviewBar: FC<DraftPreviewBarProps> = ({ editHref }) => {
+  const { i18n } = useLingui();
+  const label = i18n._(
+    msg({
+      message: "Draft preview",
+      comment: "@context: Status label above a draft preview page",
+    }),
+  );
+
+  return (
+    <aside class="draft-preview-bar" aria-label={label} data-preview-status>
+      <div class="draft-preview-bar-inner">
+        <div class="draft-preview-bar-copy">
+          <span class="draft-preview-bar-label">
+            <span class="draft-preview-bar-dot" aria-hidden="true" />
+            {label}
+          </span>
+          <span class="draft-preview-bar-description">
+            {i18n._(
+              msg({
+                message: "This post isn’t published.",
+                comment:
+                  "@context: Explanation in the draft preview status bar",
+              }),
+            )}
+          </span>
+        </div>
+        <a class="draft-preview-bar-action" href={editHref}>
+          {i18n._(
+            msg({
+              message: "Edit draft",
+              comment:
+                "@context: Action in the draft preview status bar that opens the editor",
+            }),
+          )}
+        </a>
+      </div>
+    </aside>
+  );
+};