@jant/core 0.6.16 → 0.7.0

package/src/client/components/__tests__/jant-post-menu.test.ts

@@ -7,11 +7,23 @@ const { showConfirmDialogMock, showToastMock } = vi.hoisted(() => ({
   showToastMock: vi.fn(),
 }));
 
-vi.mock("../confirm.js", () => ({
+// Paths are relative to the *component*, which lives one level up from this
+// folder — `../confirm.js` from here names a file that does not exist, so the
+// mock silently never applied and the real dialog ran instead.
+// The composer's bundle loads on first use; the stub dialog below stands in
+// for the upgraded element, so loading is a no-op here.
+vi.mock("../../lazy-entries.js", () => ({
+  ensureCompose: async () => {},
+  ensureSettings: async () => {},
+  ensureManage: async () => {},
+  loadEntriesForPage: () => {},
+}));
+
+vi.mock("../../confirm.js", () => ({
   showConfirmDialog: showConfirmDialogMock,
 }));
 
-vi.mock("../toast.js", () => ({
+vi.mock("../../toast.js", () => ({
   showToast: showToastMock,
 }));
 
@@ -715,6 +727,405 @@ describe("JantPostMenu", () => {
     await Promise.resolve();
   });
 
+  describe("language panel", () => {
+    /** Open the menu on a Thread that already has an English version. */
+    async function openLanguagePanel(
+      translations: Array<Record<string, unknown>> = [
+        {
+          id: "post-en",
+          slug: "coffee-notes",
+          label: "Coffee notes",
+          language: "en",
+        },
+      ],
+      languages: Array<{ tag: string; label: string }> = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+        { tag: "ja", label: "日本語" },
+      ],
+    ) {
+      const { menu, trigger } = await createMenu();
+      const article = requireElement(
+        document.querySelector<HTMLElement>("article[data-post-id]"),
+        "expected the post article",
+      );
+      article.dataset.postLanguage = "zh-Hans";
+
+      menu.languages = languages;
+      await menu.updateComplete;
+
+      const existingFetch = globalThis.fetch as (
+        input: unknown,
+        init?: globalThis.RequestInit,
+      ) => Promise<Response>;
+      vi.stubGlobal(
+        "fetch",
+        vi.fn((input: unknown, init?: globalThis.RequestInit) => {
+          const url = String(input);
+          if (url === "/api/posts/post-1/translations") {
+            return Promise.resolve(jsonResponse({ translations }));
+          }
+          if (
+            url.endsWith("/translations") &&
+            (init?.method ?? "GET") === "DELETE"
+          ) {
+            return Promise.resolve(new Response(null, { status: 204 }));
+          }
+          return existingFetch(input, init);
+        }),
+      );
+
+      click(trigger);
+      await menu.updateComplete;
+      click(
+        requireElement(
+          menu.querySelector<HTMLElement>("[data-post-menu-open-language]"),
+          "expected the language entry",
+        ),
+      );
+      await menu.updateComplete;
+      await Promise.resolve();
+      await Promise.resolve();
+      await menu.updateComplete;
+
+      return { menu, trigger };
+    }
+
+    function radioLabels(menu: JantPostMenu): string[] {
+      return Array.from(
+        menu.querySelectorAll<HTMLElement>("[data-post-menu-language-option]"),
+      ).map(
+        (option) =>
+          option.querySelector(".post-menu-item-label")?.textContent?.trim() ??
+          "",
+      );
+    }
+
+    async function openLanguageSwitch(menu: JantPostMenu) {
+      click(
+        requireElement(
+          menu.querySelector<HTMLElement>(
+            "[data-post-menu-open-language-switch]",
+          ),
+          "expected the change-language entry",
+        ),
+      );
+      await menu.updateComplete;
+    }
+
+    it("keeps the picker one level down, behind the language it is on", async () => {
+      // Switching a Thread's language is a correction made once if ever, while
+      // reading and adding other versions is the daily work.
+      const { menu } = await openLanguagePanel();
+
+      expect(radioLabels(menu)).toEqual([]);
+      const entry = requireElement(
+        menu.querySelector<HTMLElement>(
+          "[data-post-menu-open-language-switch]",
+        ),
+        "expected the change-language entry",
+      );
+      expect(
+        entry.querySelector(".post-menu-item-meta")?.textContent,
+      ).toContain("简体中文");
+
+      await openLanguageSwitch(menu);
+      expect(menu.textContent).toContain("Change language");
+      expect(radioLabels(menu)).toEqual(["简体中文", "日本語"]);
+    });
+
+    it("leaves a language another version holds out of the picker", async () => {
+      // The author cannot switch to it, so a dead row saying "Taken" answers a
+      // question nobody asked. The version holding it is one level up.
+      const { menu } = await openLanguagePanel();
+      await openLanguageSwitch(menu);
+
+      expect(radioLabels(menu)).not.toContain("English");
+      expect(menu.textContent).not.toContain("Taken");
+      expect(menu.textContent).not.toContain("Applies to the whole thread");
+    });
+
+    it("drops the change-language row when there is nothing to change to", async () => {
+      // A two-language site whose other version is already linked: the picker
+      // would hold a single unclickable row for the language it is already in.
+      const { menu } = await openLanguagePanel(undefined, [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ]);
+
+      expect(
+        menu.querySelector("[data-post-menu-open-language-switch]"),
+      ).toBeNull();
+      expect(menu.textContent).toContain("Other versions");
+    });
+
+    it("lands focus in the panel even when its only row arrives with the fetch", async () => {
+      // Nothing is on screen until the translations resolve in that case, so
+      // the first focus attempt has nothing to land on.
+      const { menu } = await openLanguagePanel(undefined, [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ]);
+      await menu.updateComplete;
+      await Promise.resolve();
+
+      expect(document.activeElement).toBe(
+        menu.querySelector("[data-post-menu-translation] a"),
+      );
+    });
+
+    it("gives each other version a way to read it and a way to unlink it", async () => {
+      const { menu } = await openLanguagePanel();
+
+      const row = requireElement(
+        menu.querySelector<HTMLElement>("[data-post-menu-translation]"),
+        "expected a row for the English version",
+      );
+      // The language identifies the version; the title would only be clipped,
+      // so it rides on the link instead of spending the row's width.
+      expect(row.querySelector(".post-menu-item-label")?.textContent).toContain(
+        "English",
+      );
+      expect(row.querySelector(".post-menu-item-meta")).toBeNull();
+
+      const open = requireElement(
+        row.querySelector<HTMLAnchorElement>("a"),
+        "expected a link to the English version",
+      );
+      expect(open.getAttribute("href")).toBe("/coffee-notes");
+      expect(open.getAttribute("target")).toBe("_blank");
+      expect(open.getAttribute("rel")).toBe("noopener noreferrer");
+      expect(open.getAttribute("title")).toBe("Coffee notes");
+
+      const unlink = requireElement(
+        row.querySelector<HTMLElement>("[data-post-menu-translation-unlink]"),
+        "expected an unlink button",
+      );
+      expect(unlink.textContent?.trim()).toBe("Unlink");
+    });
+
+    it("unlinks the version whose row was clicked, once confirmed", async () => {
+      // `DELETE` on the *other* post takes that one out of the group — which is
+      // what "unlink the English version" means from this row.
+      const { menu } = await openLanguagePanel();
+      showConfirmDialogMock.mockResolvedValue(true);
+      const reload = vi.fn();
+      Object.defineProperty(window, "location", {
+        configurable: true,
+        value: { ...window.location, reload, assign: vi.fn() },
+      });
+
+      click(
+        requireElement(
+          menu.querySelector<HTMLElement>(
+            "[data-post-menu-translation-unlink]",
+          ),
+          "expected an unlink button",
+        ),
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+      await Promise.resolve();
+
+      expect(showConfirmDialogMock).toHaveBeenCalledWith(
+        expect.objectContaining({ confirmLabel: "Unlink", tone: "danger" }),
+      );
+      expect(globalThis.fetch).toHaveBeenCalledWith(
+        "/api/posts/post-en/translations",
+        expect.objectContaining({ method: "DELETE" }),
+      );
+      expect(reload).toHaveBeenCalled();
+    });
+
+    it("keeps the link when the confirm is dismissed", async () => {
+      const { menu, trigger } = await openLanguagePanel();
+      showConfirmDialogMock.mockResolvedValue(false);
+
+      click(
+        requireElement(
+          menu.querySelector<HTMLElement>(
+            "[data-post-menu-translation-unlink]",
+          ),
+          "expected an unlink button",
+        ),
+      );
+      await Promise.resolve();
+      await Promise.resolve();
+
+      expect(globalThis.fetch).not.toHaveBeenCalledWith(
+        "/api/posts/post-en/translations",
+        expect.objectContaining({ method: "DELETE" }),
+      );
+      expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    });
+
+    it("offers every free language for a new version", async () => {
+      const { menu } = await openLanguagePanel();
+
+      const addSection = requireElement(
+        menu.querySelector<HTMLElement>("[data-post-menu-translation-first]")
+          ?.parentElement ?? null,
+        "expected the add-a-translation section",
+      );
+      expect(addSection.textContent).toContain("Write the 日本語 version");
+      expect(addSection.textContent).not.toContain("Write the English");
+      // Self-describing, so the section carries no label of its own.
+      expect(addSection.textContent).toContain(
+        "Link a version you already wrote",
+      );
+      expect(addSection.querySelector(".post-menu-section-label")).toBeNull();
+    });
+
+    it("resolves an address pasted into the link picker, and says what is wrong", async () => {
+      // happy-dom has no modal dialog methods; the picker renders in light DOM
+      // either way.
+      Object.defineProperty(HTMLDialogElement.prototype, "showModal", {
+        configurable: true,
+        value(this: HTMLDialogElement) {
+          this.setAttribute("open", "");
+        },
+      });
+
+      const { menu } = await openLanguagePanel();
+      const existingFetch = globalThis.fetch as (
+        input: unknown,
+        init?: globalThis.RequestInit,
+      ) => Promise<Response>;
+      const fetchMock = vi.fn(
+        (input: unknown, init?: globalThis.RequestInit) => {
+          const url = String(input);
+          if (url.includes("/translations/resolve?")) {
+            return Promise.resolve(
+              jsonResponse({
+                resolution: { kind: "unpublished", address: "/coffee-notes" },
+              }),
+            );
+          }
+          return existingFetch(input, init);
+        },
+      );
+      vi.stubGlobal("fetch", fetchMock);
+
+      click(
+        requireElement(
+          Array.from(
+            menu.querySelectorAll<HTMLElement>(".post-menu-item-label"),
+          ).find((label) =>
+            label.textContent?.includes("Link a version you already wrote"),
+          ) ?? null,
+          "expected the link-a-translation entry",
+        ),
+      );
+      await menu.updateComplete;
+      await Promise.resolve();
+
+      const picker = requireElement(
+        document.querySelector("jant-post-picker"),
+        "expected the post picker",
+      );
+      const input = requireElement(
+        picker.querySelector<HTMLInputElement>(".picker-dialog-input"),
+        "expected the picker input",
+      );
+      input.value = "https://example.com/coffee-notes";
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      await new Promise((resolve) => setTimeout(resolve, 250));
+      await Promise.resolve();
+      await Promise.resolve();
+
+      // A URL goes to the resolver, never to the title search.
+      expect(
+        fetchMock.mock.calls.some(([url]) =>
+          String(url).includes("/api/posts/post-1/translations/resolve?url="),
+        ),
+      ).toBe(true);
+      expect(
+        fetchMock.mock.calls.some(([url]) =>
+          String(url).includes("/translations/candidates"),
+        ),
+      ).toBe(false);
+      expect(picker.textContent).toContain("That post is a draft");
+    });
+
+    it("answers in the order the questions get asked", async () => {
+      // The entry that opened this panel said "Language · 简体中文", so landing
+      // on a panel whose last row is that same value read as a mismatch.
+      const { menu } = await openLanguagePanel();
+
+      const rows = Array.from(
+        menu.querySelectorAll<HTMLElement>(
+          ".post-menu-item-label, .post-menu-section-label",
+        ),
+      ).map((row) => row.textContent?.trim());
+
+      expect(rows).toEqual([
+        "Change language",
+        "Write the 日本語 version",
+        "Link a version you already wrote",
+        "Other versions",
+        "English",
+      ]);
+    });
+
+    it("stays open when the clicked item re-renders the panel out from under itself", async () => {
+      // A real browser runs a microtask checkpoint between event listeners, so
+      // by the time the document-level handler sees the click, the item that
+      // switched panels is already detached — the re-render swapped the whole
+      // `.post-menu-view` out from under it, leaving the container behind.
+      // `click()` from a script never reproduces that (the stack never empties,
+      // so nothing re-renders mid-dispatch), so do the swap by hand in a second
+      // listener on the item, which is where the checkpoint would fall.
+      const { menu, trigger } = await createMenu();
+      menu.languages = [
+        { tag: "zh-Hans", label: "简体中文" },
+        { tag: "en", label: "English" },
+      ];
+      click(trigger);
+      await menu.updateComplete;
+
+      const entry = requireElement(
+        menu.querySelector<HTMLElement>("[data-post-menu-open-language]"),
+        "expected the language entry",
+      );
+      entry.addEventListener("click", () =>
+        menu.querySelector(".post-menu-view")?.remove(),
+      );
+      click(entry);
+      await menu.updateComplete;
+
+      expect(trigger.getAttribute("aria-expanded")).toBe("true");
+      expect(menu.textContent).toContain("Language");
+    });
+
+    it("walks back one panel per press of the back button", async () => {
+      // The back button sits in the panel header, outside the `role="menu"`
+      // list — matching only the list made every one of them read as a click
+      // outside the menu and close the whole thing.
+      const { menu } = await openLanguagePanel();
+      await openLanguageSwitch(menu);
+
+      const back = () =>
+        click(
+          requireElement(
+            menu.querySelector<HTMLElement>(".post-menu-panel-back"),
+            "expected a back button",
+          ),
+        );
+
+      back();
+      await menu.updateComplete;
+      expect(
+        menu.querySelector("[data-post-menu-open-language-switch]"),
+      ).not.toBeNull();
+
+      back();
+      await menu.updateComplete;
+      expect(
+        menu.querySelector("[data-post-menu-open-language]"),
+      ).not.toBeNull();
+    });
+  });
+
   it("removes the leading feed divider from the first remaining timeline item", async () => {
     const host = document.createElement("div");
     host.innerHTML = `

package/src/client/components/__tests__/jant-post-picker.test.ts

@@ -0,0 +1,197 @@
+// @vitest-environment happy-dom
+
+/**
+ * The shared post picker.
+ *
+ * It is deliberately ignorant of what it is picking for — the caller supplies
+ * the copy and the search — so these tests are about the contract: it resolves
+ * exactly once, it never lets a slow search overwrite a newer one, and it can
+ * always be backed out of.
+ */
+
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import "../jant-post-picker.js";
+import type { JantPostPicker } from "../jant-post-picker.js";
+
+function mountPicker(): JantPostPicker {
+  const el = document.createElement("jant-post-picker") as JantPostPicker;
+  document.body.appendChild(el);
+  return el;
+}
+
+async function flush(el: JantPostPicker) {
+  await el.updateComplete;
+  await Promise.resolve();
+  await el.updateComplete;
+}
+
+function type(el: JantPostPicker, value: string) {
+  const input = el.querySelector<HTMLInputElement>(".picker-dialog-input");
+  if (!input) throw new Error("expected the search input");
+  input.value = value;
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function optionLabels(el: JantPostPicker): string[] {
+  return Array.from(
+    el.querySelectorAll<HTMLElement>(".picker-dialog-option-label"),
+  ).map((node) => node.textContent?.trim() ?? "");
+}
+
+const BASE = {
+  heading: "Link a translation",
+  placeholder: "Search your posts…",
+  emptyHint: "Nothing matched that you could link.",
+};
+
+describe("JantPostPicker", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    vi.useRealTimers();
+    // happy-dom does not implement the modal dialog methods.
+    Object.defineProperty(HTMLDialogElement.prototype, "showModal", {
+      configurable: true,
+      value(this: HTMLDialogElement) {
+        this.setAttribute("open", "");
+      },
+    });
+    Object.defineProperty(HTMLDialogElement.prototype, "close", {
+      configurable: true,
+      value(this: HTMLDialogElement) {
+        this.removeAttribute("open");
+      },
+    });
+  });
+
+  it("shows the caller's copy", async () => {
+    const el = mountPicker();
+    void el.pick({ ...BASE, search: async () => ({ items: [] }) });
+    await flush(el);
+
+    expect(el.querySelector(".picker-dialog-title")?.textContent).toContain(
+      "Link a translation",
+    );
+    expect(
+      el.querySelector<HTMLInputElement>(".picker-dialog-input")?.placeholder,
+    ).toBe("Search your posts…");
+  });
+
+  it("resolves with the picked post", async () => {
+    const el = mountPicker();
+    const picked = el.pick({
+      ...BASE,
+      minQueryLength: 1,
+      search: async () => ({
+        items: [{ id: "pst_one", label: "Coffee notes", meta: "English" }],
+      }),
+    });
+    await flush(el);
+
+    type(el, "coffee");
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    await flush(el);
+
+    expect(optionLabels(el)).toEqual(["Coffee notes"]);
+    el.querySelector<HTMLButtonElement>(".picker-dialog-option")?.click();
+
+    expect(await picked).toBe("pst_one");
+  });
+
+  it("resolves to null when dismissed", async () => {
+    const el = mountPicker();
+    const picked = el.pick({ ...BASE, search: async () => ({ items: [] }) });
+    await flush(el);
+
+    el.querySelector<HTMLDialogElement>(".picker-dialog")?.dispatchEvent(
+      new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+    );
+
+    expect(await picked).toBeNull();
+  });
+
+  it("says nothing matched rather than looking empty", async () => {
+    const el = mountPicker();
+    void el.pick({
+      ...BASE,
+      minQueryLength: 1,
+      search: async () => ({ items: [] }),
+    });
+    await flush(el);
+
+    type(el, "nothing");
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    await flush(el);
+
+    expect(el.textContent).toContain("Nothing matched that you could link.");
+  });
+
+  it("lets a search explain itself instead of saying nothing matched", async () => {
+    const el = mountPicker();
+    void el.pick({
+      ...BASE,
+      minQueryLength: 1,
+      search: async () => ({
+        items: [],
+        note: "That post is a draft. Publish it, then link it.",
+      }),
+    });
+    await flush(el);
+
+    type(el, "/coffee");
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    await flush(el);
+
+    expect(el.textContent).toContain("That post is a draft");
+    expect(el.textContent).not.toContain("Nothing matched");
+  });
+
+  it("keeps quiet until the query is worth searching", async () => {
+    const search = vi.fn(async () => ({ items: [] }));
+    const el = mountPicker();
+    void el.pick({ ...BASE, search });
+    await flush(el);
+
+    type(el, "a");
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    await flush(el);
+
+    expect(search).not.toHaveBeenCalled();
+    expect(el.textContent).not.toContain("Nothing matched");
+  });
+
+  it("does not let a slow search overwrite a newer one", async () => {
+    const el = mountPicker();
+    void el.pick({
+      ...BASE,
+      minQueryLength: 1,
+      search: async (query) => {
+        // The first query is slower than the second, which is exactly the race
+        // a debounce alone does not fix.
+        if (query === "slow") {
+          await new Promise((resolve) => setTimeout(resolve, 120));
+          return { items: [{ id: "pst_stale", label: "Stale result" }] };
+        }
+        return { items: [{ id: "pst_fresh", label: "Fresh result" }] };
+      },
+    });
+    await flush(el);
+
+    type(el, "slow");
+    await new Promise((resolve) => setTimeout(resolve, 210));
+    type(el, "fast");
+    await new Promise((resolve) => setTimeout(resolve, 250));
+    await flush(el);
+
+    expect(optionLabels(el)).toEqual(["Fresh result"]);
+  });
+
+  it("abandons an earlier request when reopened", async () => {
+    const el = mountPicker();
+    const first = el.pick({ ...BASE, search: async () => ({ items: [] }) });
+    await flush(el);
+
+    void el.pick({ ...BASE, search: async () => ({ items: [] }) });
+
+    expect(await first).toBeNull();
+  });
+});

package/src/client/components/__tests__/jant-settings-avatar.test.ts

@@ -38,22 +38,12 @@ const labels: SettingsLabels = {
     "/about is already used. Rename that item before creating an About page.",
   createAboutPage: "Create About page",
   editAboutPage: "Edit About page",
-  languageAndTime: "Language & Time",
+  timeSection: "Time",
   home: "Home",
-  search: "Search",
+  siteVisibility: "Site visibility",
   siteName: "Site Name",
   aboutBlog: "About this blog",
   aboutBlogHelp: "Displayed above your blog posts.",
-  siteLanguage: "Content language",
-  siteLanguageHelp: "The language your posts are written in.",
-  siteLanguageSearchPlaceholder: "Search…",
-  siteLanguageNoMatches: "No matches.",
-  contentLanguagePreview: "Readers and search engines see",
-  dashboardLanguage: "Dashboard language",
-  dashboardLanguageHelp: "The language this admin dashboard shows in.",
-  cjkFont: "CJK fallback",
-  cjkFontHelp:
-    "Used when the content language has no built-in font profile. Your font theme still controls serif and sans styling.",
   timeZone: "Time Zone",
   feeds: "Feeds",
   mainRssFeed: "Main RSS feed",
@@ -79,11 +69,24 @@ const labels: SettingsLabels = {
     'Show "Build with Jant" at the bottom of the home page',
   allowIndexing: "Allow search engines to index my site",
   demoSeoLocked: "Demo sites always stay hidden from search engines.",
+  discoverName: "Jant Discover",
+  discoverRules: "Discover community rules",
+  discoverEnabled: "Allow Jant Discover to list my site",
+  discoverIntro:
+    "Jant Discover is a directory of Jant blogs, curated by hand by the Jant community to help people find new Jant blogs and posts. A post you mark Featured appears on the Discover home page 24 hours later, and link and quote posts appear on the Links and Quotes lists 24 hours after they are published. You can keep editing them in the meantime. See the Discover community rules.",
+  discoverDemoLocked: "Demo sites are never listed in Discover.",
+  discoverFeedsOffLocked:
+    "Discover reads your Atom feed, so it needs feeds turned on.",
+  discoverSearchOff:
+    "Search engine indexing is off, so this site is not listed by default. Ticking the box above lists it anyway.",
+  discoverAnnounce: "Announce my site",
+  discoverAnnounceManual: "Or submit your address by hand",
   save: "Save",
   cancel: "Cancel",
   copy: "Copy",
   copyFailed: "Could not copy. Try again.",
   feedUrlCopied: "Feed URL copied.",
+  feedsDocs: "All feed addresses",
 };
 
 async function createElement(