@jant/core 0.3.39 → 0.3.42

package/src/client/__tests__/compose-bridge.test.ts

@@ -5,9 +5,25 @@ import "../compose-bridge.js";
 import { QUEUED_TOAST_STORAGE_KEY } from "../toast.js";
 
 type ComposeHarness = HTMLElement & {
+  clearLocalDraftFromStorage?: () => void;
+  clearEditDraftFromStorage?: (postId: string) => void;
+  openEdit?: (id: string) => Promise<void>;
+  openNew?: (options?: { restoreDraft?: boolean }) => Promise<void>;
+  openReply?: (
+    id: string,
+    replyData?: unknown,
+    threadRootId?: string,
+    refreshTarget?: {
+      kind: "timeline-item" | "post-card" | "post-view";
+      id: string;
+    },
+    options?: { restoreDraft?: boolean; initialFormat?: string },
+  ) => Promise<void>;
   refreshCollections: () => Promise<boolean>;
   pageMode?: boolean;
   preparePageLeave?: () => void;
+  reset?: () => void;
+  updateComplete?: Promise<void>;
   labels?: {
     uploadFailedDraft?: string;
     publishFailedDraft?: string;
@@ -20,6 +36,12 @@ function flushAsyncWork() {
   return new Promise((resolve) => setTimeout(resolve, 0));
 }
 
+async function flushBridgeWork(times = 4) {
+  for (let i = 0; i < times; i++) {
+    await flushAsyncWork();
+  }
+}
+
 describe("compose bridge", () => {
   beforeEach(() => {
     document.body.innerHTML = "";
@@ -90,20 +112,20 @@ describe("compose bridge", () => {
       }),
     );
 
-    await flushAsyncWork();
-    await flushAsyncWork();
+    await flushBridgeWork();
 
     expect(fetchSpy).toHaveBeenCalled();
     expect(refreshCollections).toHaveBeenCalledTimes(1);
   });
 
-  it("queues a success toast before navigating away after page-mode publish", async () => {
+  it("stays on page and resets form after page-mode publish", async () => {
     const composeEl = document.createElement(
       "jant-compose-dialog",
     ) as ComposeHarness;
     composeEl.refreshCollections = vi.fn(async () => true);
     composeEl.pageMode = true;
-    composeEl.preparePageLeave = vi.fn();
+    composeEl.reset = vi.fn();
+    composeEl.updateComplete = Promise.resolve();
     composeEl.labels = {
       published: "Published!",
       view: "View",
@@ -160,14 +182,10 @@ describe("compose bridge", () => {
       }),
     );
 
-    await flushAsyncWork();
-    await flushAsyncWork();
+    await flushBridgeWork();
 
-    expect(composeEl.preparePageLeave).toHaveBeenCalledTimes(1);
-    expect(assignSpy).toHaveBeenCalledWith("/published-post");
-    expect(globalThis.sessionStorage.getItem(QUEUED_TOAST_STORAGE_KEY)).toBe(
-      '{"message":"Published!","type":"success"}',
-    );
+    expect(composeEl.reset).toHaveBeenCalled();
+    expect(assignSpy).not.toHaveBeenCalled();
   });
 
   it("submits inline text attachments through the attachments API shape", async () => {
@@ -252,9 +270,283 @@ describe("compose bridge", () => {
       }),
     );
 
-    await flushAsyncWork();
-    await flushAsyncWork();
+    await flushBridgeWork();
 
     expect(fetchSpy).toHaveBeenCalled();
   });
+
+  it("sends publishedAt on publish and omits it when retrying as draft", async () => {
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = false;
+    document.body.appendChild(composeEl);
+
+    let requestCount = 0;
+    const fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async (input, init) => {
+        const raw =
+          typeof input === "string"
+            ? input
+            : input instanceof URL
+              ? input.toString()
+              : input.url;
+        const url = new URL(raw, "http://localhost");
+
+        if (url.pathname === "/compose") {
+          requestCount += 1;
+          const body = JSON.parse(String(init?.body)) as {
+            status: string;
+            publishedAt?: number;
+          };
+
+          if (requestCount === 1) {
+            expect(body).toMatchObject({
+              status: "published",
+              publishedAt: 1705311000,
+            });
+            return new Response(JSON.stringify({ error: "Publish failed" }), {
+              status: 500,
+              headers: { "Content-Type": "application/json" },
+            });
+          }
+
+          expect(body.status).toBe("draft");
+          expect(body.publishedAt).toBeUndefined();
+          return new Response(
+            JSON.stringify({
+              status: "draft",
+              toast: "Draft saved.",
+            }),
+            {
+              status: 200,
+              headers: { "Content-Type": "application/json" },
+            },
+          );
+        }
+
+        throw new Error(`Unexpected fetch: ${url.pathname}`);
+      });
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: {
+          format: "note",
+          title: "",
+          body: "Backdated publish",
+          url: "",
+          quoteText: "",
+          quoteAuthor: "",
+          slug: "",
+          status: "published",
+          publishedAt: 1705311000,
+          visibility: "public",
+          rating: 0,
+          collectionIds: [],
+          attachments: [],
+          pendingAttachments: [],
+        },
+      }),
+    );
+
+    await flushBridgeWork();
+
+    expect(fetchSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it("reopens reply compose with local draft recovery after a thread validation error", async () => {
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = false;
+    composeEl.openNew = vi.fn(async () => {});
+    composeEl.openReply = vi.fn(async () => {});
+    composeEl.clearLocalDraftFromStorage = vi.fn();
+    document.body.appendChild(composeEl);
+
+    let requestCount = 0;
+    vi.spyOn(globalThis, "fetch").mockImplementation(async (input) => {
+      const raw =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.toString()
+            : input.url;
+      const url = new URL(raw, "http://localhost");
+
+      if (url.pathname === "/compose/thread") {
+        requestCount += 1;
+        return new Response(
+          JSON.stringify({ error: "Threads can include up to 20 posts." }),
+          {
+            status: 422,
+            headers: { "Content-Type": "application/json" },
+          },
+        );
+      }
+
+      throw new Error(`Unexpected fetch: ${url.pathname}`);
+    });
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: {
+          format: "quote",
+          title: "",
+          body: "",
+          url: "",
+          quoteText: "",
+          quoteAuthor: "",
+          slug: "",
+          status: "published",
+          visibility: "public",
+          rating: 0,
+          collectionIds: [],
+          attachments: [],
+          pendingAttachments: [],
+          replyToId: "pst_parent",
+          replyThreadRootId: "pst_root",
+          replyRefreshKind: "timeline-item",
+          replyRefreshId: "pst_root",
+          threadPosts: [
+            {
+              format: "quote",
+              title: "",
+              body: '{"type":"doc","content":[]}',
+              url: "",
+              quoteText: "",
+              quoteAuthor: "",
+              status: "published",
+              visibility: "public",
+              rating: 0,
+              collectionIds: [],
+              attachments: [],
+              replyToId: "pst_parent",
+            },
+            {
+              format: "note",
+              title: "",
+              body: '{"type":"doc","content":[]}',
+              url: "",
+              quoteText: "",
+              quoteAuthor: "",
+              status: "published",
+              rating: 0,
+              collectionIds: [],
+              attachments: [],
+            },
+          ],
+        },
+      }),
+    );
+
+    await flushBridgeWork();
+
+    expect(requestCount).toBe(2);
+    expect(composeEl.openReply).toHaveBeenCalledWith(
+      "pst_parent",
+      undefined,
+      "pst_root",
+      { kind: "timeline-item", id: "pst_root" },
+      { restoreDraft: true, initialFormat: "quote" },
+    );
+    expect(composeEl.openNew).not.toHaveBeenCalled();
+    expect(composeEl.clearLocalDraftFromStorage).not.toHaveBeenCalled();
+  });
+
+  it("sends nulls for cleared quote attribution fields when editing", async () => {
+    const composeEl = document.createElement(
+      "jant-compose-dialog",
+    ) as ComposeHarness;
+    composeEl.refreshCollections = vi.fn(async () => true);
+    composeEl.pageMode = false;
+    document.body.appendChild(composeEl);
+
+    const fetchSpy = vi
+      .spyOn(globalThis, "fetch")
+      .mockImplementation(async (input, init) => {
+        const raw =
+          typeof input === "string"
+            ? input
+            : input instanceof URL
+              ? input.toString()
+              : input.url;
+        const url = new URL(raw, "http://localhost");
+
+        if (url.pathname === "/api/posts/pst_123") {
+          expect(init?.method).toBe("PUT");
+
+          const body = JSON.parse(String(init?.body)) as {
+            format: string;
+            body: null;
+            sourceName: null;
+            sourceUrl: null;
+            quoteText: string;
+            rating: null;
+          };
+
+          expect(body).toMatchObject({
+            format: "quote",
+            body: null,
+            sourceName: null,
+            sourceUrl: null,
+            quoteText: "The obstacle is the way.",
+            rating: null,
+          });
+
+          return new Response(
+            JSON.stringify({
+              status: "draft",
+              toast: "Draft saved.",
+            }),
+            {
+              status: 200,
+              headers: { "Content-Type": "application/json" },
+            },
+          );
+        }
+
+        // After a successful edit the bridge tries to refresh the post
+        // card view in-place — return empty HTML so it gracefully no-ops.
+        if (url.pathname === `/_/post-card/pst_123`) {
+          return new Response("", {
+            status: 200,
+            headers: { "Content-Type": "text/html" },
+          });
+        }
+
+        throw new Error(`Unexpected fetch: ${url.pathname}`);
+      });
+
+    composeEl.dispatchEvent(
+      new CustomEvent("jant:compose-submit-deferred", {
+        bubbles: true,
+        detail: {
+          format: "quote",
+          title: "",
+          body: "",
+          url: "",
+          quoteText: "The obstacle is the way.",
+          quoteAuthor: "",
+          slug: "",
+          status: "draft",
+          visibility: "public",
+          rating: 0,
+          collectionIds: [],
+          attachments: [],
+          pendingAttachments: [],
+          editPostId: "pst_123",
+        },
+      }),
+    );
+
+    await flushBridgeWork();
+
+    expect(fetchSpy).toHaveBeenCalledTimes(2);
+  });
 });

package/src/client/__tests__/compose-launch.test.ts

@@ -0,0 +1,120 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it } from "vitest";
+import { getReplyRefreshTarget } from "../compose-launch.js";
+
+function getArticle(): HTMLElement {
+  const article = document.querySelector<HTMLElement>("article[data-post]");
+  if (!article) throw new Error("expected article[data-post] in DOM");
+  return article;
+}
+
+describe("getReplyRefreshTarget", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  it("returns post-view when the article is inside a post detail view", () => {
+    document.body.innerHTML = `
+      <div data-page="post">
+        <div data-post-view data-post-view-id="pst_root">
+          <article data-post data-post-id="pst_reply" data-thread-root-id="pst_root">
+          </article>
+        </div>
+      </div>
+    `;
+
+    expect(getReplyRefreshTarget(getArticle())).toEqual({
+      kind: "post-view",
+      id: "pst_root",
+    });
+  });
+
+  it("returns timeline-item on the home feed, using the wrapper's thread root", () => {
+    document.body.innerHTML = `
+      <div data-page="home">
+        <div data-timeline-item data-timeline-item-id="pst_root" data-thread-root-id="pst_root">
+          <div data-timeline-item-content>
+            <article data-post data-post-id="pst_root" data-thread-root-id="pst_root">
+            </article>
+          </div>
+        </div>
+      </div>
+    `;
+
+    expect(getReplyRefreshTarget(getArticle())).toEqual({
+      kind: "timeline-item",
+      id: "pst_root",
+    });
+  });
+
+  it("returns timeline-item on the archive list view too", () => {
+    // Archive list view reuses the TimelineFeedItem wrapper (see
+    // ArchivePage.tsx list-view branch), so it should refresh like the
+    // home feed rather than falling back to post-card.
+    document.body.innerHTML = `
+      <div data-page="archive">
+        <div data-feed>
+          <div class="archive-list-items">
+            <div data-timeline-item data-timeline-item-id="pst_root" data-thread-root-id="pst_root">
+              <div data-timeline-item-content>
+                <article data-post data-post-id="pst_root" data-thread-root-id="pst_root">
+                </article>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    expect(getReplyRefreshTarget(getArticle())).toEqual({
+      kind: "timeline-item",
+      id: "pst_root",
+    });
+  });
+
+  it("prefers the wrapper's thread root id over the article's own", () => {
+    // Inside a thread preview, a non-root article may sit under a wrapper
+    // whose data-thread-root-id is the root of the whole thread — that's
+    // the id the timeline-item partial needs.
+    document.body.innerHTML = `
+      <div data-page="home">
+        <div data-timeline-item data-timeline-item-id="pst_root" data-thread-root-id="pst_root">
+          <div data-timeline-item-content>
+            <article data-post data-post-id="pst_reply" data-thread-root-id="pst_other">
+            </article>
+          </div>
+        </div>
+      </div>
+    `;
+
+    expect(getReplyRefreshTarget(getArticle())).toEqual({
+      kind: "timeline-item",
+      id: "pst_root",
+    });
+  });
+
+  it("falls back to post-card when there's no timeline-item wrapper", () => {
+    document.body.innerHTML = `
+      <div data-page="collection">
+        <article data-post data-post-id="pst_single">
+        </article>
+      </div>
+    `;
+
+    expect(getReplyRefreshTarget(getArticle())).toEqual({
+      kind: "post-card",
+      id: "pst_single",
+    });
+  });
+
+  it("returns null when the article has no id at all", () => {
+    document.body.innerHTML = `
+      <div data-page="custom">
+        <article data-post></article>
+      </div>
+    `;
+
+    expect(getReplyRefreshTarget(getArticle())).toBeNull();
+  });
+});

package/src/client/__tests__/compose-shortcuts.test.ts

@@ -7,6 +7,7 @@ import "../compose-shortcuts.js";
 type ComposeHarness = HTMLElement & {
   openNew: (options?: unknown) => Promise<void>;
   openReply: (...args: unknown[]) => Promise<void>;
+  openEdit: (id: string) => Promise<void>;
 };
 
 function dispatchShortcut(
@@ -28,10 +29,57 @@ function createComposeHarness(): ComposeHarness {
   ) as ComposeHarness;
   composeEl.openNew = vi.fn(async () => {});
   composeEl.openReply = vi.fn(async () => {});
+  composeEl.openEdit = vi.fn(async () => {});
   document.body.appendChild(composeEl);
   return composeEl;
 }
 
+function renderThreadDetailPage() {
+  const postView = document.createElement("div");
+  postView.dataset.postView = "";
+  postView.dataset.postViewId = "post-current";
+
+  const threadGroup = document.createElement("div");
+  threadGroup.dataset.page = "post";
+  threadGroup.className = "thread-group thread-group-detail";
+
+  const currentItem = document.createElement("div");
+  currentItem.dataset.postCurrent = "";
+
+  const currentArticle = document.createElement("article");
+  currentArticle.dataset.post = "";
+  currentArticle.dataset.postId = "post-current";
+  currentArticle.dataset.threadRootId = "thread-root";
+  currentArticle.dataset.format = "note";
+  currentArticle.innerHTML = `
+    <div data-post-meta>meta</div>
+    <time class="dt-published">Mar 19</time>
+    <div data-post-body>Current body</div>
+  `;
+
+  const hoveredItem = document.createElement("div");
+
+  const hoveredArticle = document.createElement("article");
+  hoveredArticle.dataset.post = "";
+  hoveredArticle.dataset.postId = "post-hovered";
+  hoveredArticle.dataset.threadRootId = "thread-root";
+  hoveredArticle.dataset.format = "quote";
+  hoveredArticle.innerHTML = `
+    <div data-post-meta>meta</div>
+    <time class="dt-published">Mar 20</time>
+    <div data-post-body>Hovered body</div>
+  `;
+
+  currentItem.appendChild(currentArticle);
+  hoveredItem.appendChild(hoveredArticle);
+  threadGroup.appendChild(currentItem);
+  threadGroup.appendChild(hoveredItem);
+  postView.appendChild(threadGroup);
+  document.body.appendChild(postView);
+
+  return { currentArticle, hoveredArticle };
+}
+
 describe("compose shortcuts", () => {
   beforeEach(() => {
     document.body.innerHTML = "";
@@ -96,6 +144,7 @@ describe("compose shortcuts", () => {
     article.dataset.post = "";
     article.dataset.postId = "post-current";
     article.dataset.threadRootId = "thread-root";
+    article.dataset.format = "quote";
     article.innerHTML = `
       <div data-post-meta>meta</div>
       <div class="post-status-badges">badges</div>
@@ -119,6 +168,9 @@ describe("compose shortcuts", () => {
     expect(postId).toBe("post-current");
     expect(threadRootId).toBe("thread-root");
     expect(refreshTarget).toEqual({ kind: "post-view", id: "post-current" });
+    expect(vi.mocked(composeEl.openReply).mock.calls[0]?.[4]).toEqual({
+      initialFormat: "quote",
+    });
     expect(replyData).toMatchObject({ dateText: "Mar 19" });
     expect((replyData as { contentHtml: string }).contentHtml).toContain(
       "Reply body",
@@ -130,4 +182,93 @@ describe("compose shortcuts", () => {
       "badges",
     );
   });
+
+  it("prefers the hovered thread post for reply shortcuts on detail pages", () => {
+    const composeEl = createComposeHarness();
+    const { hoveredArticle } = renderThreadDetailPage();
+    const originalQuerySelector = document.querySelector.bind(document);
+
+    vi.spyOn(document, "querySelector").mockImplementation(
+      (selector: string): globalThis.Element | null => {
+        if (selector === "[data-page='post'] article[data-post]:hover") {
+          return hoveredArticle;
+        }
+        return originalQuerySelector(selector);
+      },
+    );
+
+    const event = dispatchShortcut(document, "r");
+
+    expect(event.defaultPrevented).toBe(true);
+    expect(composeEl.openReply).toHaveBeenCalledWith(
+      "post-hovered",
+      expect.objectContaining({ dateText: "Mar 20" }),
+      "thread-root",
+      { kind: "post-view", id: "post-current" },
+      { initialFormat: "quote" },
+    );
+  });
+
+  it("prefers the hovered thread post for edit shortcuts on detail pages", async () => {
+    const composeEl = createComposeHarness();
+    composeEl.openEdit = vi.fn(async () => {});
+    const { hoveredArticle } = renderThreadDetailPage();
+    const originalQuerySelector = document.querySelector.bind(document);
+
+    vi.spyOn(document, "querySelector").mockImplementation(
+      (selector: string): globalThis.Element | null => {
+        if (selector === "[data-page='post'] article[data-post]:hover") {
+          return hoveredArticle;
+        }
+        return originalQuerySelector(selector);
+      },
+    );
+
+    const event = dispatchShortcut(document, "e");
+    await Promise.resolve();
+
+    expect(event.defaultPrevented).toBe(true);
+    expect(composeEl.openEdit).toHaveBeenCalledWith("post-hovered");
+  });
+
+  it("keeps using the hovered post for reply shortcuts in the timeline", () => {
+    const composeEl = createComposeHarness();
+    const article = document.createElement("article");
+    article.dataset.post = "";
+    article.dataset.postId = "timeline-post";
+    article.dataset.threadRootId = "timeline-thread";
+    article.innerHTML = `
+      <div data-post-meta>meta</div>
+      <time class="dt-published">Apr 5</time>
+      <div data-post-body>Timeline body</div>
+    `;
+    document.body.appendChild(article);
+
+    const originalQuerySelector = document.querySelector.bind(document);
+    vi.spyOn(document, "querySelector").mockImplementation(
+      (selector: string): globalThis.Element | null => {
+        if (selector === "[data-page='post'] article[data-post]:hover") {
+          return null;
+        }
+        if (selector === "article[data-post]:hover") {
+          return article;
+        }
+        return originalQuerySelector(selector);
+      },
+    );
+
+    const event = dispatchShortcut(document, "r");
+
+    expect(event.defaultPrevented).toBe(true);
+    expect(composeEl.openReply).toHaveBeenCalledTimes(1);
+
+    const [postId, replyData, threadRootId, refreshTarget] = vi.mocked(
+      composeEl.openReply,
+    ).mock.calls[0] ?? [null, null, null, null];
+
+    expect(postId).toBe("timeline-post");
+    expect(replyData).toMatchObject({ dateText: "Apr 5" });
+    expect(threadRootId).toBe("timeline-thread");
+    expect(refreshTarget).toEqual({ kind: "post-card", id: "timeline-post" });
+  });
 });

package/src/client/__tests__/feed-video-player.test.ts

@@ -0,0 +1,44 @@
+// @vitest-environment happy-dom
+
+import { describe, expect, it } from "vitest";
+import { chooseAutoplayVideo } from "../feed-video-player.js";
+
+describe("chooseAutoplayVideo", () => {
+  it("prefers the candidate with the largest visible area", () => {
+    const winner = chooseAutoplayVideo([
+      {
+        video: "first",
+        intersectionRatio: 0.9,
+        visibleArea: 20_000,
+        centerDistance: 40,
+      },
+      {
+        video: "second",
+        intersectionRatio: 0.8,
+        visibleArea: 28_000,
+        centerDistance: 80,
+      },
+    ]);
+
+    expect(winner?.video).toBe("second");
+  });
+
+  it("breaks ties by picking the candidate closest to the viewport center", () => {
+    const winner = chooseAutoplayVideo([
+      {
+        video: "first",
+        intersectionRatio: 0.8,
+        visibleArea: 24_000,
+        centerDistance: 120,
+      },
+      {
+        video: "second",
+        intersectionRatio: 0.8,
+        visibleArea: 24_000,
+        centerDistance: 40,
+      },
+    ]);
+
+    expect(winner?.video).toBe("second");
+  });
+});