@jant/core 0.6.16 → 0.7.0

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

@@ -53,11 +53,14 @@ function renderArchivePage(
       totalCount: 1,
       currentPage: 1,
       totalPages: 1,
-      filters: {},
+      filters: { selection: {} },
       availableYears: [2026],
       availableCollections: [],
       isAuthenticated: false,
       timeZone: "UTC",
+      // The fixture above is grid data, so these cases pin the grid layout.
+      // The list default gets its own case at the end of the file.
+      defaultLayout: "grid",
       ...props,
     }),
   );
@@ -93,22 +96,46 @@ describe("ArchivePage", () => {
   it("serializes visibility latest_hidden as the hidden URL alias", () => {
     const html = renderArchivePage({
       isAuthenticated: true,
-      filters: { visibility: "latest_hidden" },
+      filters: { selection: { visibility: "latest_hidden" } },
     });
 
     expect(html).toContain("visibility=hidden");
     expect(html).not.toContain("visibility=latest_hidden");
   });
 
+  // The archive already shows a signed-out reader every non-private post, so
+  // the dimension names sets they can reach. `private` is the exception, and
+  // it is absent rather than present-and-broken.
+  it("offers the visibility filter without private to a signed-out reader", () => {
+    const html = renderArchivePage();
+
+    expect(html).toContain('id="af-visibility"');
+    expect(html).toContain("visibility=public");
+    expect(html).toContain("visibility=hidden");
+    expect(html).toContain("visibility=featured");
+    expect(html).not.toContain("visibility=private");
+  });
+
+  it("offers private to the author", () => {
+    const html = renderArchivePage({ isAuthenticated: true });
+
+    expect(html).toContain('id="af-visibility"');
+    expect(html).toContain("visibility=private");
+  });
+
   it("marks the thread filter active when filtering single posts", () => {
-    const html = renderArchivePage({ filters: { hasReplies: false } });
+    const html = renderArchivePage({
+      filters: { selection: { replies: false } },
+    });
 
     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" } });
+    const html = renderArchivePage({
+      filters: { selection: { format: "quote" } },
+    });
 
     expect(html).toContain('class="lucide lucide-quote"');
     expect(html).not.toContain('class="lucide lucide-text-quote"');
@@ -132,7 +159,9 @@ describe("ArchivePage", () => {
   });
 
   it("marks the updated sort active and keeps a way back", () => {
-    const html = renderArchivePage({ filters: { sort: "updated" } });
+    const html = renderArchivePage({
+      filters: { selection: {}, 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"',
@@ -160,20 +189,47 @@ describe("ArchivePage", () => {
       '<span class="archive-month-header-label">March 2026</span>',
     );
 
-    const updated = renderArchivePage({ filters: { sort: "updated" } });
+    const updated = renderArchivePage({
+      filters: { selection: {}, 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", () => {
+  it("keeps the sort selection in filter and layout links", () => {
     const html = renderArchivePage({
-      filters: { sort: "updated" },
+      filters: { selection: {}, sort: "updated" },
       availableCollections: [{ slug: "tech", title: "Tech" }],
     });
 
     expect(html).toContain("collection=tech&amp;sort=updated");
-    expect(html).toContain("view=list&amp;sort=updated");
+    expect(html).toContain("layout=list&amp;sort=updated");
+  });
+
+  // Neither layout is implied by an absent param any more, so both toggle
+  // links name themselves. A link shared with a layout chosen keeps that layout
+  // even if the site's ARCHIVE_DEFAULT_LAYOUT later changes.
+  it("writes both layout options into the URL explicitly", () => {
+    const html = renderArchivePage();
+
+    expect(html).toContain('href="/archive?layout=grid"');
+    expect(html).toContain('href="/archive?layout=list"');
+    expect(html).not.toContain("view=grid");
+    expect(html).not.toContain("view=list");
+  });
+
+  it("renders the flat list when the site default layout is list", () => {
+    const html = renderArchivePage({
+      groups: [],
+      items: [],
+      defaultLayout: undefined,
+      totalCount: 0,
+    });
+
+    expect(html).toContain(
+      '<a href="/archive?layout=list" class="archive-view-btn archive-view-btn-active"',
+    );
   });
 });

package/src/ui/pages/__tests__/collections-directory-rows.test.tsx

@@ -0,0 +1,92 @@
+/**
+ * The directory's two kinds of row read against each other.
+ *
+ * A collection and a smart collection sit in one list, one above the other, and
+ * a reader compares them. So they carry the same two measures — how many
+ * threads, and how long ago the newest one moved — and the only thing the smart
+ * row says differently is the funnel marker naming where its members came from.
+ */
+
+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 { CollectionsPage } from "../CollectionsPage.js";
+import type { CollectionDirectoryItem } from "../../../types.js";
+
+const COLLECTION_ACTIVITY_AT = 1_700_000_000;
+const SMART_ACTIVITY_AT = 1_700_086_400;
+
+const items: CollectionDirectoryItem[] = [
+  {
+    id: "cdi_test00000000000000000000000",
+    type: "collection",
+    collection: {
+      id: "col_test000000000000000000000000",
+      siteId: "sit_test000000000000000000000000",
+      slug: "recipes",
+      title: "Recipes",
+      description: null,
+      sortOrder: "manual",
+      createdAt: 1_700_000_000,
+      updatedAt: 1_700_000_000,
+      threadCount: 2,
+      recentActivityAt: COLLECTION_ACTIVITY_AT,
+    },
+  },
+  {
+    id: "cdi_test00000000000000000000001",
+    type: "smart_collection",
+    smartCollection: {
+      id: "smc_test000000000000000000000000",
+      siteId: "sit_test000000000000000000000000",
+      slug: "quotes",
+      title: "Quotes",
+      description: null,
+      selection: { format: "quote" },
+      sort: "newest",
+      layout: null,
+      createdAt: 1_700_000_000,
+      updatedAt: 1_700_000_000,
+      threadCount: 5,
+      recentActivityAt: SMART_ACTIVITY_AT,
+    },
+  },
+];
+
+function render(isAuthenticated: boolean) {
+  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(
+    CollectionsPage({
+      items,
+      isAuthenticated,
+      navigationCollectionIds: [],
+      sitePathPrefix: "",
+      basePath: "",
+      siteOrigin: "",
+    }),
+  );
+}
+
+describe("collections directory rows", () => {
+  it("dates a smart collection row the way it dates a collection row", () => {
+    const html = render(false);
+
+    expect(html.match(/class="collection-directory-updated"/g)).toHaveLength(2);
+    expect(html).toContain(
+      new Date(COLLECTION_ACTIVITY_AT * 1000).toISOString(),
+    );
+    expect(html).toContain(new Date(SMART_ACTIVITY_AT * 1000).toISOString());
+    expect(html).toContain("5 threads");
+  });
+});

package/src/ui/pages/__tests__/collections-view-links.test.tsx

@@ -0,0 +1,81 @@
+/**
+ * Collection links must keep the reader in the language view they are in.
+ *
+ * A collection page is served once per language (`langGet("/*")` in
+ * routes/pages/language.tsx), so a link from `/en/collections` that points at
+ * `/{slug}` does not just look odd — it silently moves the reader to the
+ * primary language's copy of that collection.
+ *
+ * The signed-in directory renders through `CollectionsManager`, the signed-out
+ * one directly through `CollectionDirectory`. Both are covered here because the
+ * bug this pins down existed in only one of them.
+ */
+
+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 { CollectionsPage } from "../CollectionsPage.js";
+import type { CollectionDirectoryItem } from "../../../types.js";
+
+const items: CollectionDirectoryItem[] = [
+  {
+    id: "cdi_test00000000000000000000000",
+    type: "collection",
+    collection: {
+      id: "col_test000000000000000000000000",
+      siteId: "sit_test000000000000000000000000",
+      slug: "recipes",
+      title: "Recipes",
+      description: null,
+      sortOrder: "manual",
+      createdAt: 1_700_000_000,
+      updatedAt: 1_700_000_000,
+      threadCount: 2,
+      recentActivityAt: 1_700_000_000,
+    },
+  },
+];
+
+function render(isAuthenticated: boolean, basePath: 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(
+    CollectionsPage({
+      items,
+      isAuthenticated,
+      navigationCollectionIds: [],
+      sitePathPrefix: "",
+      basePath,
+      siteOrigin: "",
+    }),
+  );
+}
+
+describe("collections directory links", () => {
+  it("keeps a signed-out reader inside the language view", () => {
+    const html = render(false, "/en");
+    expect(html).toContain('href="/en/recipes"');
+    expect(html).not.toContain('href="/recipes"');
+  });
+
+  it("keeps the signed-in author inside the language view", () => {
+    const html = render(true, "/en");
+    expect(html).toContain('href="/en/recipes"');
+    expect(html).not.toContain('href="/recipes"');
+  });
+
+  it("links at the root when there is no language view", () => {
+    expect(render(false, "")).toContain('href="/recipes"');
+    expect(render(true, "")).toContain('href="/recipes"');
+  });
+});

package/src/ui/shared/CollectionDirectory.tsx

@@ -2,7 +2,15 @@ import { msg } from "@lingui/core/macro";
 import type { FC } from "hono/jsx";
 import { useLingui } from "../../i18n/context.js";
 import type { CollectionDirectoryItem } from "../../types.js";
-import { getCollectionSelectionPath } from "../../lib/collection-paths.js";
+import {
+  getCollectionPagePath,
+  getCollectionSelectionPath,
+} from "../../lib/collection-paths.js";
+import { getIconSvg } from "../../lib/icons.js";
+import {
+  describeSmartCollection,
+  getSmartCollectionLabels,
+} from "./smart-collection-labels.js";
 import { getDividerCollectionGroup } from "../../lib/collection-groups.js";
 import { render as renderMarkdown } from "../../lib/markdown.js";
 import { formatRelativeAge, toISOString } from "../../lib/time.js";
@@ -12,13 +20,35 @@ export interface CollectionDirectoryProps {
   items: CollectionDirectoryItem[];
   emptyMessage?: string;
   sitePathPrefix?: string;
+  /**
+   * Public path prefix for collection links, carrying the language prefix in a
+   * language view.
+   *
+   * Required rather than defaulting to `sitePathPrefix`: forgetting it does not
+   * fail, it silently links a reader in `/en` back into the primary view, which
+   * is a bug that looks like a working link. Pass `navData.basePath`.
+   */
+  basePath: string;
   siteOrigin?: string;
+  /**
+   * Whether to offer each collection's feed beside it.
+   *
+   * This is the only place a reader is handed a collection feed: `/subscribe`
+   * deliberately lists the site-wide feeds only, because wanting one collection
+   * and not the rest is a rare intent that would tax every reader's attention
+   * there. Here it sits next to the collection someone is already looking at.
+   *
+   * Defaults off so the dashboard's collection manager — where the point is
+   * organizing, not subscribing — does not grow feed icons by accident.
+   */
+  feedsEnabled?: boolean;
 }
 
 const hasDirectoryContent = (items: CollectionDirectoryItem[]) =>
   items.some(
     (item) =>
       (item.type === "collection" && item.collection) ||
+      (item.type === "smart_collection" && item.smartCollection) ||
       (item.type === "link" && item.label && item.url),
   );
 
@@ -37,6 +67,7 @@ const hasDirectoryContent = (items: CollectionDirectoryItem[]) =>
 const computeSequenceLabels = (items: CollectionDirectoryItem[]): string[] => {
   const isContentItem = (item: CollectionDirectoryItem) =>
     (item.type === "collection" && item.collection) ||
+    (item.type === "smart_collection" && item.smartCollection) ||
     (item.type === "link" && item.label && item.url);
 
   // First pass: determine group sizes.
@@ -109,13 +140,43 @@ const computeSequenceLabels = (items: CollectionDirectoryItem[]): string[] => {
   return labels;
 };
 
+/**
+ * The feed icon that rides a directory row's summary line.
+ *
+ * Same affordance as the one on the collection's own page and on the archive:
+ * small, quiet, and recognizable to a reader who knows what it means. Readers
+ * who do not are served by /subscribe instead, which is why collection feeds
+ * are not listed there.
+ *
+ * @param props - Where the feed lives and what to call it
+ * @returns The icon link, or nothing when feeds are switched off
+ */
+const CollectionFeedLink: FC<{
+  href: string | null;
+  title: string;
+}> = ({ href, title }) =>
+  href ? (
+    <a href={href} class="feed-link" title={title} rel="noopener noreferrer">
+      <span dangerouslySetInnerHTML={{ __html: getIconSvg("rss") ?? "" }} />
+    </a>
+  ) : null;
+
 export const CollectionDirectory: FC<CollectionDirectoryProps> = ({
   items,
   emptyMessage,
   sitePathPrefix = "",
+  basePath,
   siteOrigin = "",
+  feedsEnabled = false,
 }) => {
   const { i18n } = useLingui();
+  const feedTitle = i18n._(
+    msg({
+      message: "RSS feed",
+      comment:
+        "@context: Tooltip for the RSS feed icon beside a collection in the collections directory",
+    }),
+  );
 
   if (!hasDirectoryContent(items)) {
     return (
@@ -152,7 +213,7 @@ export const CollectionDirectory: FC<CollectionDirectoryProps> = ({
                       <a
                         href={toPublicPath(
                           getCollectionSelectionPath(group.slugExpression),
-                          sitePathPrefix,
+                          basePath,
                         )}
                         class="collection-directory-divider-link collection-directory-divider-text"
                       >
@@ -254,6 +315,112 @@ export const CollectionDirectory: FC<CollectionDirectoryProps> = ({
           );
         }
 
+        if (item.type === "smart_collection") {
+          const smartCollection = item.smartCollection;
+          if (!smartCollection) return null;
+          const sequence = sequenceLabels[index];
+          // The full sentence is the marker's tooltip; its accessible name is
+          // just the kind, because the marker sits inside the title link and a
+          // whole sentence there would swamp the link's name.
+          const conditions = describeSmartCollection(
+            smartCollection.selection,
+            i18n,
+          );
+          const smartCollectionNoun = getSmartCollectionLabels(i18n).noun;
+
+          return (
+            <div
+              key={item.id}
+              class="collection-directory-item"
+              data-smart-collection={smartCollection.slug}
+            >
+              <div class="collection-directory-main">
+                <span class="collection-directory-sequence" aria-hidden="true">
+                  {sequence}
+                </span>
+                <div class="collection-directory-title-row">
+                  <a
+                    href={toPublicPath(
+                      getCollectionPagePath(smartCollection.slug),
+                      basePath,
+                    )}
+                    class="collection-directory-title-link"
+                  >
+                    <span class="collection-directory-title">
+                      {smartCollection.title}
+                      {/* Shown to every reader, not only the author: which
+                          kind of collection this is changes how the list
+                          reads. It goes in the same slot the link rows put
+                          their marker in, which centres it on the title
+                          without any arithmetic. */}
+                      <span
+                        class="collection-directory-smart-icon"
+                        title={conditions}
+                        aria-label={smartCollectionNoun}
+                        role="img"
+                        dangerouslySetInnerHTML={{
+                          __html: getIconSvg("funnel", "icon-fine") ?? "",
+                        }}
+                      />
+                    </span>
+                  </a>
+                </div>
+                {smartCollection.description && (
+                  <div
+                    class="collection-directory-description prose"
+                    dangerouslySetInnerHTML={{
+                      __html: renderMarkdown(smartCollection.description, {
+                        namespace: smartCollection.id,
+                      }),
+                    }}
+                  />
+                )}
+                <p class="collection-directory-summary">
+                  <span class="collection-directory-meta">
+                    {smartCollection.threadCount}{" "}
+                    {smartCollection.threadCount === 1
+                      ? i18n._(
+                          msg({
+                            message: "thread",
+                            comment: "@context: Singular thread count label",
+                          }),
+                        )
+                      : i18n._(
+                          msg({
+                            message: "threads",
+                            comment: "@context: Plural thread count label",
+                          }),
+                        )}
+                  </span>
+                  {/* The same two measures a collection row carries. The
+                      conditions are what differs between the two kinds; how
+                      full and how fresh the result is is not. */}
+                  <span
+                    class="collection-directory-meta-separator"
+                    aria-hidden="true"
+                  >
+                    /
+                  </span>
+                  <time
+                    class="collection-directory-updated"
+                    dateTime={toISOString(smartCollection.recentActivityAt)}
+                  >
+                    {formatRelativeAge(smartCollection.recentActivityAt)}
+                  </time>
+                  <CollectionFeedLink
+                    href={
+                      feedsEnabled
+                        ? `${toPublicPath(getCollectionPagePath(smartCollection.slug), basePath)}/feed`
+                        : null
+                    }
+                    title={feedTitle}
+                  />
+                </p>
+              </div>
+            </div>
+          );
+        }
+
         const collection = item.collection;
         if (!collection) return null;
         const sequence = sequenceLabels[index];
@@ -268,7 +435,7 @@ export const CollectionDirectory: FC<CollectionDirectoryProps> = ({
                 <a
                   href={toPublicPath(
                     getCollectionSelectionPath(collection.slug),
-                    sitePathPrefix,
+                    basePath,
                   )}
                   class="collection-directory-title-link"
                 >
@@ -316,6 +483,14 @@ export const CollectionDirectory: FC<CollectionDirectoryProps> = ({
                 >
                   {formatRelativeAge(collection.recentActivityAt)}
                 </time>
+                <CollectionFeedLink
+                  href={
+                    feedsEnabled
+                      ? `${toPublicPath(getCollectionSelectionPath(collection.slug), basePath)}/feed`
+                      : null
+                  }
+                  title={feedTitle}
+                />
               </p>
             </div>
           </div>