@jant/core 0.6.13 → 0.6.15

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__/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

@@ -7,23 +7,29 @@ import {
 } from "../jant-command-palette.js";
 import type { JantCommandPalette } from "../jant-command-palette.js";
 
-function mockPaletteApi() {
-  vi.spyOn(globalThis, "fetch").mockResolvedValue(
-    new Response(JSON.stringify({ items: [] }), {
-      headers: { "Content-Type": "application/json" },
-    }),
+interface MockPaletteItem {
+  title: string;
+  path: string;
+  type: "post" | "collection" | "system";
+}
+
+function mockPaletteApi(items: MockPaletteItem[] = []) {
+  vi.spyOn(globalThis, "fetch").mockImplementation(
+    async () =>
+      new Response(JSON.stringify({ items }), {
+        headers: { "Content-Type": "application/json" },
+      }),
   );
 }
 
-async function renderPalette(query: string) {
-  mockPaletteApi();
+async function renderPalette(query: string, items: MockPaletteItem[] = []) {
+  mockPaletteApi(items);
   const el = document.createElement(
     "jant-command-palette",
   ) as JantCommandPalette;
-  el._open = true;
-  el._query = query;
   document.body.appendChild(el);
-  await Promise.resolve();
+  await el.open();
+  el._query = query;
   await el.updateComplete;
   return el;
 }
@@ -39,6 +45,7 @@ describe("JantCommandPalette slash path mode", () => {
     vi.restoreAllMocks();
     document.body.innerHTML = "";
     globalThis.localStorage.clear();
+    globalThis.history.replaceState({}, "", "/");
   });
 
   it("shows go-to-path first and search second for slash queries", async () => {
@@ -61,3 +68,123 @@ describe("JantCommandPalette slash path mode", () => {
     expect(resultTitles(el)).toEqual(["Go to /notes", 'Search for "notes"']);
   });
 });
+
+describe("JantCommandPalette persistent search action", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    document.body.innerHTML = "";
+    globalThis.localStorage.clear();
+    globalThis.history.replaceState({}, "", "/");
+  });
+
+  const matchingItems: MockPaletteItem[] = Array.from(
+    { length: 12 },
+    (_, index) => ({
+      title: `Match ${index + 1}`,
+      path: `match-${index + 1}`,
+      type: "post",
+    }),
+  );
+
+  it("keeps search visible below all navigation matches", async () => {
+    const el = await renderPalette("match", matchingItems);
+
+    expect(
+      el.querySelectorAll(".command-palette-results > .command-palette-result"),
+    ).toHaveLength(12);
+    expect(resultTitles(el)).toEqual([
+      "Match 1",
+      "Match 2",
+      "Match 3",
+      "Match 4",
+      "Match 5",
+      "Match 6",
+      "Match 7",
+      "Match 8",
+      "Match 9",
+      "Match 10",
+      "Match 11",
+      "Match 12",
+      'Search all content for "match"',
+    ]);
+    expect(
+      el
+        .querySelector(".command-palette-results-container")
+        ?.lastElementChild?.classList.contains("command-palette-search-action"),
+    ).toBe(true);
+  });
+
+  it("uses plain Enter without a shortcut hint when search is the only result", async () => {
+    const el = await renderPalette("nothing", matchingItems);
+    const dialog = el.querySelector<HTMLDialogElement>(".command-palette");
+
+    expect(resultTitles(el)).toEqual(['Search all content for "nothing"']);
+    expect(el.querySelector(".command-palette-result-shortcut")).toBeNull();
+
+    dialog?.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Enter",
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(globalThis.location.pathname).toBe("/search");
+    expect(globalThis.location.search).toBe("?q=nothing");
+  });
+
+  it("wraps ArrowUp from the best match to the search action", async () => {
+    const el = await renderPalette("match", matchingItems);
+    const dialog = el.querySelector<HTMLDialogElement>(".command-palette");
+
+    dialog?.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "ArrowUp",
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    await el.updateComplete;
+
+    expect(
+      el.querySelector(
+        ".command-palette-result-selected .command-palette-result-title",
+      )?.textContent,
+    ).toBe('Search all content for "match"');
+  });
+
+  it.each(["metaKey", "ctrlKey"] as const)(
+    "runs full-text search with the %s Enter shortcut",
+    async (modifier) => {
+      const el = await renderPalette("match", matchingItems);
+      const dialog = el.querySelector<HTMLDialogElement>(".command-palette");
+
+      dialog?.dispatchEvent(
+        new globalThis.KeyboardEvent("keydown", {
+          key: "Enter",
+          [modifier]: true,
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+
+      expect(globalThis.location.pathname).toBe("/search");
+      expect(globalThis.location.search).toBe("?q=match");
+    },
+  );
+
+  it("keeps plain Enter on the best navigation match", async () => {
+    const el = await renderPalette("match", matchingItems);
+    const dialog = el.querySelector<HTMLDialogElement>(".command-palette");
+
+    dialog?.dispatchEvent(
+      new globalThis.KeyboardEvent("keydown", {
+        key: "Enter",
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+
+    expect(globalThis.location.pathname).toBe("/match-1");
+  });
+});