@jant/core 0.6.14 → 0.6.16

package/src/client/collection-navigation.ts

@@ -0,0 +1,44 @@
+/**
+ * Shared client-side helpers for adding Collections to site navigation.
+ */
+
+import { getJsonString, readJsonObject } from "./json.js";
+import { applySiteHeaderHtml } from "./site-header-fragment.js";
+
+const SITE_HEADER_REQUEST_HEADER = "X-Jant-Site-Header";
+const INCLUDE_SITE_HEADER_RESPONSE = "include";
+
+/**
+ * Add a Collection to the end of the primary navigation and refresh the
+ * rendered site header when the server returns a fragment.
+ *
+ * @param collectionId - TypeID of the Collection to add
+ * @returns The created navigation item ID when present
+ * @example
+ * const navItemId = await addCollectionToNavigation("col_01abc");
+ */
+export async function addCollectionToNavigation(
+  collectionId: string,
+): Promise<string | undefined> {
+  const response = await fetch("/api/nav-items", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      [SITE_HEADER_REQUEST_HEADER]: INCLUDE_SITE_HEADER_RESPONSE,
+    },
+    body: JSON.stringify({
+      type: "collection",
+      collectionId,
+      placement: "header",
+    }),
+  });
+  const body = await readJsonObject(response);
+
+  if (!response.ok) {
+    throw new Error(getJsonString(body, "error") ?? `HTTP ${response.status}`);
+  }
+
+  applySiteHeaderHtml(getJsonString(body, "headerHtml"));
+  return getJsonString(body, "id");
+}

package/src/client/collection-page-actions.ts

@@ -1,9 +1,16 @@
 import { getCollectionsDirectoryPath } from "../lib/collection-paths.js";
+import { NAVIGATION_SETTINGS_PATH } from "../lib/settings-paths.js";
+import { addCollectionToNavigation } from "./collection-navigation.js";
 import { showConfirmDialog } from "./confirm.js";
-import { showToast } from "./toast.js";
+import { showToast, showToastWithAction } from "./toast.js";
 
 interface CollectionPageActionLabels {
   edit: string;
+  addToNavigation: string;
+  addingToNavigation: string;
+  addedToNavigation: string;
+  editNavigation: string;
+  addToNavigationFailed: string;
   moreActions: string;
   deleteCollection: string;
   confirmDelete: string;
@@ -16,6 +23,11 @@ const parseLabels = (value: string | undefined): CollectionPageActionLabels => {
   if (!value) {
     return {
       edit: "",
+      addToNavigation: "",
+      addingToNavigation: "",
+      addedToNavigation: "",
+      editNavigation: "",
+      addToNavigationFailed: "",
       moreActions: "",
       deleteCollection: "",
       confirmDelete: "",
@@ -30,6 +42,11 @@ const parseLabels = (value: string | undefined): CollectionPageActionLabels => {
   } catch {
     return {
       edit: "",
+      addToNavigation: "",
+      addingToNavigation: "",
+      addedToNavigation: "",
+      editNavigation: "",
+      addToNavigationFailed: "",
       moreActions: "",
       deleteCollection: "",
       confirmDelete: "",
@@ -53,6 +70,12 @@ document
       "[data-collection-page-action='toggle-menu']",
     );
     const menu = root.querySelector<HTMLElement>("[data-collection-page-menu]");
+    const addToNavigationButton = root.querySelector<HTMLButtonElement>(
+      "[data-collection-page-action='add-to-navigation']",
+    );
+    const editNavigationLink = root.querySelector<HTMLAnchorElement>(
+      "[data-collection-page-edit-navigation]",
+    );
 
     if (!collectionId || !trigger || !menu) return;
 
@@ -96,6 +119,35 @@ document
       }
     };
 
+    const handleAddToNavigation = async () => {
+      if (!addToNavigationButton || addToNavigationButton.disabled) return;
+
+      closeMenu(false);
+      const label = addToNavigationButton.querySelector<HTMLElement>(
+        ".collections-page-menu-item-label",
+      );
+      addToNavigationButton.disabled = true;
+      if (label) label.textContent = labels.addingToNavigation;
+
+      try {
+        await addCollectionToNavigation(collectionId);
+        addToNavigationButton.hidden = true;
+        if (editNavigationLink) editNavigationLink.hidden = false;
+        root.dataset.collectionInNavigation = "true";
+        showToastWithAction(labels.addedToNavigation, {
+          label: labels.editNavigation,
+          href:
+            editNavigationLink?.getAttribute("href") ??
+            NAVIGATION_SETTINGS_PATH,
+        });
+      } catch {
+        showToast(labels.addToNavigationFailed, "error");
+      } finally {
+        addToNavigationButton.disabled = false;
+        if (label) label.textContent = labels.addToNavigation;
+      }
+    };
+
     trigger.addEventListener("click", (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -149,6 +201,10 @@ document
         event.preventDefault();
         void handleDelete();
       }
+      if (action === "add-to-navigation") {
+        event.preventDefault();
+        void handleAddToNavigation();
+      }
     });
 
     document.addEventListener("click", (event) => {

package/src/client/components/__tests__/compose-format-convert.test.ts

@@ -55,7 +55,6 @@ describe("convertComposeFormat", () => {
       "quote",
       fields({
         title: "My thoughts",
-        showTitle: true,
         bodyJson: doc(paragraph("body")),
       }),
     );
@@ -216,7 +215,6 @@ describe("convertComposeFormat", () => {
       "link",
       fields({
         title: "Keep me",
-        showTitle: true,
         bodyJson: doc(paragraph("body")),
       }),
     );
@@ -236,7 +234,6 @@ describe("convertComposeFormat", () => {
       }),
     );
     expect(result.title).toBe("Keep me");
-    expect(result.showTitle).toBe(true);
     expect(result.url).toBe("");
     expect(firstBlock(result)).toEqual({
       type: "paragraph",
@@ -317,22 +314,6 @@ describe("convertComposeFormat", () => {
     expect(result.bodyJson).toBeNull();
   });
 
-  it("sets showTitle only for a note that ends up with a title", () => {
-    const toNote = convertComposeFormat(
-      "link",
-      "note",
-      fields({ title: "T", url: "https://example.com" }),
-    );
-    expect(toNote.showTitle).toBe(true);
-
-    const toQuote = convertComposeFormat(
-      "note",
-      "quote",
-      fields({ title: "T" }),
-    );
-    expect(toQuote.showTitle).toBe(false);
-  });
-
   it("treats a non-attribution last line as part of the quote text", () => {
     const result = convertComposeFormat(
       "note",

package/src/client/components/__tests__/jant-collection-directory.test.ts

@@ -15,10 +15,16 @@ vi.mock("sortablejs", () => ({
   },
 }));
 
+vi.mock("../../toast.js", () => ({
+  showToast: vi.fn(),
+  showToastWithAction: vi.fn(),
+}));
+
 import type {
   CollectionManagerItem,
   CollectionManagerLabels,
 } from "../collection-manager-types.js";
+import { queueCollectionCreatedNotice } from "../../collection-created-notice.js";
 import "../jant-collection-directory.js";
 import type { JantCollectionsManager } from "../jant-collection-directory.js";
 
@@ -35,6 +41,12 @@ const labels: CollectionManagerLabels = {
   dividerLabelPlaceholder: "Section",
   newCollection: "New collection",
   edit: "Edit",
+  addToNavigation: "Add to Navigation",
+  addingToNavigation: "Adding…",
+  addedToNavigation: "Collection added to navigation.",
+  editNavigation: "Edit Navigation",
+  addToNavigationFailed: "Couldn't add this collection to navigation.",
+  notNow: "Not now",
   label: "Label",
   url: "URL",
   linkLabelPlaceholder: "Quotes",
@@ -49,8 +61,8 @@ const labels: CollectionManagerLabels = {
   deleteLink: "Remove link",
   confirmDeleteLink: "Remove this link from Collections?",
   cancel: "Cancel",
-  entrySingular: "entry",
-  entryPlural: "entries",
+  threadSingular: "thread",
+  threadPlural: "threads",
   emptyState: "Create a collection to get started.",
   orderSaved: "Collection order updated.",
   saved: "Collection saved.",
@@ -94,7 +106,7 @@ const items: CollectionManagerItem[] = [
       title: "Reading",
       description: "Notes from books",
       sortOrder: "newest",
-      postCount: 4,
+      threadCount: 4,
       recentActivityAt: 1_763_619_200,
     },
   },
@@ -109,7 +121,7 @@ const items: CollectionManagerItem[] = [
       title: "Tools",
       description: "Tools I keep around",
       sortOrder: "newest",
-      postCount: 2,
+      threadCount: 2,
       recentActivityAt: 1_763_619_260,
     },
   },
@@ -140,7 +152,7 @@ const groupedItems: CollectionManagerItem[] = [
       title: "Solo",
       description: null,
       sortOrder: "newest",
-      postCount: 1,
+      threadCount: 1,
       recentActivityAt: 1_763_619_300,
     },
   },
@@ -162,6 +174,7 @@ async function createElement(): Promise<JantCollectionsManager> {
   ) as JantCollectionsManager;
   el.labels = labels;
   el.items = items;
+  el.navigationCollectionIds = [];
   document.body.appendChild(el);
   await el.updateComplete;
   return el;
@@ -175,6 +188,7 @@ async function createElementWithItems(
   ) as JantCollectionsManager;
   el.labels = labels;
   el.items = customItems;
+  el.navigationCollectionIds = [];
   document.body.appendChild(el);
   await el.updateComplete;
   return el;
@@ -199,15 +213,24 @@ async function createElementWithManagerRoot(): Promise<JantCollectionsManager> {
   ) as JantCollectionsManager;
   el.labels = labels;
   el.items = items;
+  el.navigationCollectionIds = [];
   root.appendChild(el);
   document.body.appendChild(root);
   await el.updateComplete;
   return el;
 }
 
+async function flushAsyncWork() {
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  await new Promise((resolve) => setTimeout(resolve, 0));
+}
+
 describe("JantCollectionsManager", () => {
   beforeEach(() => {
     document.body.innerHTML = "";
+    globalThis.sessionStorage.clear();
+    vi.restoreAllMocks();
+    vi.clearAllMocks();
     sortableCreateMock.mockClear();
     sortableDestroyMock.mockClear();
   });
@@ -305,7 +328,15 @@ describe("JantCollectionsManager", () => {
     );
     expect(firstRow?.textContent).toContain("Reading");
     expect(firstRow?.textContent).toContain("Notes from books");
-    expect(firstRow?.textContent).toContain("4 entries");
+    expect(firstRow?.textContent).toContain("4 threads");
+  });
+
+  it("keeps every Collection action trigger in the keyboard tab order", async () => {
+    const el = await createElement();
+
+    expect(
+      el.querySelectorAll(".collection-directory-item-menu > button"),
+    ).toHaveLength(2);
   });
 
   it("keeps focus on the URL field while typing in the new link form", async () => {
@@ -342,4 +373,122 @@ describe("JantCollectionsManager", () => {
       "/archive?format=quote&visibility=public&view=list",
     );
   });
+
+  it("shows a one-time post-create notice in the Collections content", async () => {
+    queueCollectionCreatedNotice("collection-1");
+    const el = await createElement();
+
+    const notice = el.querySelector<HTMLElement>(".collection-created-notice");
+    expect(notice?.textContent).toContain("Collection created.");
+    expect(notice?.textContent).not.toContain("Reading");
+    expect(notice?.textContent).toContain("Add to Navigation");
+
+    const dismissButton = notice?.querySelector<HTMLButtonElement>(
+      'button[aria-label="Not now"]',
+    );
+    dismissButton?.click();
+    await el.updateComplete;
+
+    expect(el.querySelector(".collection-created-notice")).toBeNull();
+  });
+
+  it("adds a Collection to navigation from its item menu", async () => {
+    const el = await createElement();
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ id: "nav-1" }), {
+        status: 201,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+    const { showToastWithAction } = await import("../../toast.js");
+
+    el._showItemMenuId = items[0]?.id ?? null;
+    await el.updateComplete;
+
+    const addButton = Array.from(
+      el.querySelectorAll<HTMLButtonElement>(".collections-page-menu-item"),
+    ).find((button) => button.textContent?.includes("Add to Navigation"));
+    expect(addButton).toBeDefined();
+
+    addButton?.click();
+    await flushAsyncWork();
+    await el.updateComplete;
+
+    expect(fetchMock).toHaveBeenCalledWith("/api/nav-items", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        "X-Jant-Site-Header": "include",
+      },
+      body: JSON.stringify({
+        type: "collection",
+        collectionId: "collection-1",
+        placement: "header",
+      }),
+    });
+    expect(el.navigationCollectionIds).toContain("collection-1");
+    expect(showToastWithAction).toHaveBeenCalledWith(
+      "Collection added to navigation.",
+      {
+        label: "Edit Navigation",
+        href: "/settings/navigation",
+      },
+    );
+
+    el._showItemMenuId = items[0]?.id ?? null;
+    await el.updateComplete;
+    const editNavigationLink = Array.from(
+      el.querySelectorAll<HTMLAnchorElement>(".collections-page-menu-item"),
+    ).find((link) => link.textContent?.includes("Edit Navigation"));
+    expect(editNavigationLink?.getAttribute("href")).toBe(
+      "/settings/navigation",
+    );
+  });
+
+  it("adds the newly created Collection from the inline notice", async () => {
+    queueCollectionCreatedNotice("collection-1");
+    const fetchMock = vi.spyOn(globalThis, "fetch").mockResolvedValue(
+      new Response(JSON.stringify({ id: "nav-1" }), {
+        status: 201,
+        headers: { "Content-Type": "application/json" },
+      }),
+    );
+    const { showToastWithAction } = await import("../../toast.js");
+    const el = await createElement();
+    const notice = el.querySelector<HTMLElement>(".collection-created-notice");
+    const addButton = Array.from(
+      notice?.querySelectorAll<HTMLButtonElement>("button") ?? [],
+    ).find((button) => button.textContent?.includes("Add to Navigation"));
+
+    expect(addButton).toBeDefined();
+    addButton?.click();
+    await flushAsyncWork();
+    await el.updateComplete;
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      "/api/nav-items",
+      expect.objectContaining({
+        method: "POST",
+        body: JSON.stringify({
+          type: "collection",
+          collectionId: "collection-1",
+          placement: "header",
+        }),
+      }),
+    );
+    expect(el.navigationCollectionIds).toContain("collection-1");
+    const updatedNotice = el.querySelector<HTMLElement>(
+      ".collection-created-notice",
+    );
+    expect(updatedNotice?.textContent).toContain(
+      "Collection added to navigation.",
+    );
+    expect(
+      updatedNotice
+        ?.querySelector<HTMLAnchorElement>("a")
+        ?.getAttribute("href"),
+    ).toBe("/settings/navigation");
+    expect(showToastWithAction).not.toHaveBeenCalled();
+  });
 });

package/src/client/components/__tests__/jant-command-palette.test.ts

@@ -11,6 +11,7 @@ interface MockPaletteItem {
   title: string;
   path: string;
   type: "post" | "collection" | "system";
+  status?: "draft" | "published";
 }
 
 function mockPaletteApi(items: MockPaletteItem[] = []) {
@@ -44,6 +45,7 @@ describe("JantCommandPalette slash path mode", () => {
   beforeEach(() => {
     vi.restoreAllMocks();
     document.body.innerHTML = "";
+    delete document.documentElement.dataset.sitePathPrefix;
     globalThis.localStorage.clear();
     globalThis.history.replaceState({}, "", "/");
   });
@@ -73,6 +75,7 @@ describe("JantCommandPalette persistent search action", () => {
   beforeEach(() => {
     vi.restoreAllMocks();
     document.body.innerHTML = "";
+    delete document.documentElement.dataset.sitePathPrefix;
     globalThis.localStorage.clear();
     globalThis.history.replaceState({}, "", "/");
   });
@@ -187,4 +190,52 @@ describe("JantCommandPalette persistent search action", () => {
 
     expect(globalThis.location.pathname).toBe("/match-1");
   });
+
+  it("opens draft post matches through the authenticated preview route", async () => {
+    const el = await renderPalette("draft", [
+      {
+        title: "Draft post",
+        path: "draft-post",
+        type: "post",
+        status: "draft",
+      },
+    ]);
+    const dialog = el.querySelector<HTMLDialogElement>(".command-palette");
+    expect(dialog?.textContent).toContain("Draft · draft-post");
+
+    dialog?.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Enter",
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(globalThis.location.pathname).toBe("/preview/draft-post");
+    expect(globalThis.location.search).toBe("?edit=1");
+  });
+
+  it("keeps the site path prefix when opening a draft preview", async () => {
+    document.documentElement.dataset.sitePathPrefix = "/blog";
+    const el = await renderPalette("draft", [
+      {
+        title: "Draft post",
+        path: "draft-post",
+        type: "post",
+        status: "draft",
+      },
+    ]);
+    const dialog = el.querySelector<HTMLDialogElement>(".command-palette");
+
+    dialog?.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Enter",
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(globalThis.location.pathname).toBe("/blog/preview/draft-post");
+    expect(globalThis.location.search).toBe("?edit=1");
+  });
 });