@jant/core 0.6.15 → 0.6.16

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

@@ -16,6 +16,7 @@ import {
   FEATURED_SPARKLE_PATH,
 } from "../../lib/featured-icons.js";
 import { showConfirmDialog } from "../confirm.js";
+import { refreshArticleView } from "../post-refresh.js";
 import { showToast } from "../toast.js";
 import { publicPath } from "../runtime-paths.js";
 import {
@@ -33,6 +34,7 @@ interface PostMenuData {
   featured: boolean;
   visibility: string;
   isReply: boolean;
+  isDraft: boolean;
 }
 
 interface CollectionItem {
@@ -104,6 +106,7 @@ function readPostMenuData(article: HTMLElement): PostMenuData | null {
     featured: article.hasAttribute("data-post-featured"),
     visibility: article.dataset.postVisibility ?? "public",
     isReply: threadId !== id || article.hasAttribute("data-post-reply"),
+    isDraft: article.hasAttribute("data-post-draft"),
   };
 }
 
@@ -529,6 +532,36 @@ export class JantPostMenu extends LitElement {
     }
   }
 
+  async #publish() {
+    if (!this._data) return;
+    const postId = this._data.id;
+    const trigger = this._triggerEl;
+    this.#close({ restoreFocus: false });
+
+    const article = document.querySelector<HTMLElement>(
+      `article[data-post-id="${postId}"]`,
+    );
+
+    try {
+      const res = await fetch(`/api/posts/${postId}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status: "published" }),
+      });
+      if (!res.ok) throw new Error();
+
+      showToast("Draft published.");
+      // The badge, the timestamp, and any drafts published alongside this one
+      // all change at once — re-render the surface rather than patching it.
+      if (!article || !(await refreshArticleView(article))) {
+        globalThis.location.reload();
+      }
+    } catch {
+      showToast("Could not publish the draft. Try again.", "error");
+      trigger?.focus();
+    }
+  }
+
   #setVisibility(newVisibility: string) {
     if (!this._data) return;
     const postId = this._data.id;
@@ -711,8 +744,10 @@ export class JantPostMenu extends LitElement {
     this.#close({ restoreFocus: false });
 
     const confirmed = await showConfirmDialog({
-      message: "Delete this post permanently? This can't be undone.",
-      confirmLabel: "Delete",
+      message: this._data.isDraft
+        ? "Discard this draft permanently? This can't be undone."
+        : "Delete this post permanently? This can't be undone.",
+      confirmLabel: this._data.isDraft ? "Discard" : "Delete",
       cancelLabel: "Cancel",
       tone: "danger",
     });
@@ -992,6 +1027,21 @@ export class JantPostMenu extends LitElement {
 
   // --- Icons (inline SVG) ---
 
+  #iconPublish() {
+    return html`<svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M12 19V5" />
+      <path d="m5 12 7-7 7 7" />
+    </svg>`;
+  }
+
   #iconEdit() {
     return html`<svg
       xmlns="http://www.w3.org/2000/svg"
@@ -1501,6 +1551,21 @@ export class JantPostMenu extends LitElement {
               <span class="post-menu-item-trailing">${this.#iconEdit()}</span>
             </button>
 
+            ${this._data.isDraft
+              ? html`
+                  <button
+                    type="button"
+                    role="menuitem"
+                    class="post-menu-item"
+                    @click=${() => this.#publish()}
+                  >
+                    <span class="post-menu-item-label">Publish</span>
+                    <span class="post-menu-item-trailing"
+                      >${this.#iconPublish()}</span
+                    >
+                  </button>
+                `
+              : nothing}
             ${this._data.isReply
               ? nothing
               : html`
@@ -1539,24 +1604,27 @@ export class JantPostMenu extends LitElement {
           </div>
 
           <div class="post-menu-section">
-            <button
-              type="button"
-              role="menuitem"
-              class="post-menu-item"
-              @click=${() => this.#setFeatured(!isFeatured)}
-            >
-              <span class="post-menu-item-label"
-                >${isFeatured
-                  ? "Remove from Featured"
-                  : "Add to Featured"}</span
-              >
-              <span class="post-menu-item-trailing"
-                >${isFeatured
-                  ? this.#iconFeaturedOff()
-                  : this.#iconFeatured()}</span
-              >
-            </button>
-
+            ${this._data.isDraft
+              ? nothing
+              : html`
+                  <button
+                    type="button"
+                    role="menuitem"
+                    class="post-menu-item"
+                    @click=${() => this.#setFeatured(!isFeatured)}
+                  >
+                    <span class="post-menu-item-label"
+                      >${isFeatured
+                        ? "Remove from Featured"
+                        : "Add to Featured"}</span
+                    >
+                    <span class="post-menu-item-trailing"
+                      >${isFeatured
+                        ? this.#iconFeaturedOff()
+                        : this.#iconFeatured()}</span
+                    >
+                  </button>
+                `}
             ${this._data.isReply
               ? nothing
               : html`
@@ -1604,7 +1672,9 @@ export class JantPostMenu extends LitElement {
               class="post-menu-item post-menu-item-danger"
               @click=${() => this.#delete()}
             >
-              <span class="post-menu-item-label">Delete</span>
+              <span class="post-menu-item-label"
+                >${this._data.isDraft ? "Discard" : "Delete"}</span
+              >
               <span class="post-menu-item-trailing">${this.#iconTrash()}</span>
             </button>
           </div>

package/src/client/compose-bridge.ts

@@ -8,6 +8,7 @@
 import type { ComposeSubmitDetail } from "./components/compose-types.js";
 import type { ComposeAttachment } from "./components/compose-types.js";
 import type { ComposeSubmitAttachment } from "./components/compose-types.js";
+import type { LocalDraftMedia } from "./components/compose-types.js";
 import type { JantComposeDialog } from "./components/jant-compose-dialog.js";
 import type { JantComposeEditor } from "./components/jant-compose-editor.js";
 import type { PostAttachmentInput } from "../types.js";
@@ -25,10 +26,15 @@ import {
   replaceWithAutoClose,
   queueToastForNextPage,
 } from "./toast.js";
-import { openReplyForArticle } from "./compose-launch.js";
-import { hydratePartial } from "./hydrate-partial.js";
+import { getComposeDialog, openReplyForArticle } from "./compose-launch.js";
+import {
+  refreshPostCardView,
+  refreshPostPageView,
+  refreshTimelineThreadView,
+} from "./post-refresh.js";
 import { getJsonString, readJsonObject } from "./json.js";
 import { uploadViaSession } from "./upload-session.js";
+import type { UploadSessionResult } from "./upload-session.js";
 import { publicPath } from "./runtime-paths.js";
 import { tiptapJsonToMarkdown } from "../lib/tiptap-to-markdown.js";
 import { getMediaCategory } from "../lib/upload.js";
@@ -66,104 +72,6 @@ function getComposeDialogFromEventTarget(
     : null;
 }
 
-async function fetchPartialHtml(path: string): Promise<string | null> {
-  const res = await fetch(path, {
-    headers: { Accept: "text/html" },
-  });
-  if (!res.ok) return null;
-  return res.text();
-}
-
-async function refreshTimelineThreadView(
-  threadRootId: string,
-): Promise<boolean> {
-  try {
-    const timelineItem = document.querySelector<HTMLElement>(
-      `[data-timeline-item][data-thread-root-id="${threadRootId}"]`,
-    );
-    const content = timelineItem?.querySelector<HTMLElement>(
-      "[data-timeline-item-content]",
-    );
-    if (!content) return false;
-
-    const html = await fetchPartialHtml(
-      `/_/timeline-item/${encodeURIComponent(threadRootId)}`,
-    );
-    if (!html) return false;
-
-    content.innerHTML = html;
-    // Swapped-in markup carries interactions whose per-element setup only runs
-    // on DOMContentLoaded (thread "Show more" toggle, feed video autoplay, audio
-    // waveform); re-initialize them or they stay inert until a full reload.
-    hydratePartial(content);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-async function refreshPostCardView(postId: string): Promise<boolean> {
-  try {
-    const timelineItem = document
-      .querySelector<HTMLElement>(`article[data-post-id="${postId}"]`)
-      ?.closest<HTMLElement>("[data-timeline-item]");
-    const html = await fetchPartialHtml(
-      `/_/post-card/${encodeURIComponent(postId)}`,
-    );
-    if (!html) return false;
-
-    if (timelineItem) {
-      const content = timelineItem.querySelector<HTMLElement>(
-        "[data-timeline-item-content]",
-      );
-      if (!content) return false;
-      content.innerHTML = html;
-      hydratePartial(content);
-      return true;
-    }
-
-    const article = document.querySelector<HTMLElement>(
-      `article[data-post-id="${postId}"]`,
-    );
-    if (!article) return false;
-
-    article.outerHTML = html;
-    // outerHTML detaches `article`; re-query the replacement to hydrate it.
-    const nextArticle = document.querySelector<HTMLElement>(
-      `article[data-post-id="${postId}"]`,
-    );
-    if (nextArticle) hydratePartial(nextArticle);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
-async function refreshPostPageView(postId: string): Promise<boolean> {
-  try {
-    const container = document.querySelector<HTMLElement>(
-      `[data-post-view][data-post-view-id="${postId}"]`,
-    );
-    if (!container) return false;
-
-    const html = await fetchPartialHtml(
-      `/_/post-view/${encodeURIComponent(postId)}`,
-    );
-    if (!html) return false;
-
-    container.outerHTML = html;
-    // outerHTML detaches `container`; re-query the replacement to hydrate it
-    // (see refreshTimelineThreadView).
-    const next = document.querySelector<HTMLElement>(
-      `[data-post-view][data-post-view-id="${postId}"]`,
-    );
-    if (next) hydratePartial(next);
-    return true;
-  } catch {
-    return false;
-  }
-}
-
 async function refreshReplyTarget(
   detail: ComposeSubmitDetail,
 ): Promise<boolean> {
@@ -233,7 +141,7 @@ function refreshUploadToast() {
 }
 
 /**
- * Track completed upload mediaIds by clientId.
+ * Track completed upload results by clientId.
  *
  * When an attachment is migrated between editor instances (e.g. entering thread
  * mode while an upload is in-flight), `updateAttachmentStatus` fires on the old
@@ -242,8 +150,11 @@ function refreshUploadToast() {
  * handler can't look it up. This map provides a fallback: we record the result
  * here as soon as any upload succeeds, and `buildRequestAttachments` reads it
  * when `attachment.mediaId` is null and the clientId isn't in `uploadPromises`.
+ *
+ * The full result (not just the id) is kept so a failed publish can restore
+ * uploaded attachments into the reopened compose dialog.
  */
-const completedMediaIds = new Map<string, string>();
+const completedUploads = new Map<string, UploadSessionResult>();
 
 /**
  * Quickly grab the very first decoded frame of a video as a small poster.
@@ -495,8 +406,14 @@ async function uploadFile(
 
     uploadProgress.set(clientId, 1);
     refreshUploadToast();
-    editor?.updateAttachmentStatus(clientId, "done", result.id, null);
-    completedMediaIds.set(clientId, result.id);
+    editor?.updateAttachmentStatus(
+      clientId,
+      "done",
+      result.id,
+      null,
+      result.url,
+    );
+    completedUploads.set(clientId, result);
     return result.id;
   } catch (error) {
     uploadProgress.delete(clientId);
@@ -516,7 +433,7 @@ document.addEventListener("jant:attachment-removed", (e: Event) => {
     e as CustomEvent<{ clientId: string; mediaId: string | null }>
   ).detail;
 
-  completedMediaIds.delete(clientId);
+  completedUploads.delete(clientId);
 
   if (mediaId) {
     // Upload already finished — fire-and-forget delete
@@ -565,6 +482,25 @@ document.addEventListener("click", (e: MouseEvent) => {
   void openReplyForArticle(article);
 });
 
+// ── Draft badge → editor ────────────────────────────────────────────
+//
+// The badge on an inline draft doubles as its most likely next action. Publish
+// and Delete live in the post menu with every other post action.
+
+document.addEventListener("click", (e: MouseEvent) => {
+  const trigger = (e.target as HTMLElement).closest<HTMLElement>(
+    "[data-draft-continue]",
+  );
+  if (!trigger) return;
+
+  const postId =
+    trigger.dataset.postId ??
+    trigger.closest<HTMLElement>("article[data-post]")?.dataset.postId;
+  if (!postId) return;
+
+  void getComposeDialog()?.openEdit(postId);
+});
+
 // ── Submit handler ──────────────────────────────────────────────────
 
 /** Build the JSON body for both create and update requests */
@@ -651,7 +587,7 @@ function buildRequestAttachments(
       const mediaId =
         attachment.mediaId ??
         pendingMediaIds.get(attachment.clientId) ??
-        completedMediaIds.get(attachment.clientId);
+        completedUploads.get(attachment.clientId)?.id;
       if (!mediaId) continue;
 
       requestAttachments.push({
@@ -694,6 +630,7 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
     getComposeDialogFromEventTarget(event.target) ??
     (document.querySelector("jant-compose-dialog") as JantComposeDialog | null);
   const isPageMode = !!composeEl?.pageMode;
+  const isDraftPreviewPage = !!document.querySelector("[data-preview-status]");
 
   // Get labels for toast messages
   const labels = composeEl?.labels;
@@ -751,12 +688,48 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
     }
     composeEl?.clearLocalDraftFromStorage?.();
   };
+  /**
+   * Uploads that completed before the publish failed. The local draft's own
+   * media snapshot misses uploads that finished after the dialog closed, so
+   * the reopened compose merges these over it.
+   */
+  const collectRestorableMedia = (): LocalDraftMedia[] => {
+    const details = detail.threadPosts?.length ? detail.threadPosts : [detail];
+    const media: LocalDraftMedia[] = [];
+    const seen = new Set<string>();
+    for (const d of details) {
+      for (const attachment of d.attachments) {
+        if (attachment.type !== "media" || seen.has(attachment.clientId)) {
+          continue;
+        }
+        seen.add(attachment.clientId);
+        const upload = completedUploads.get(attachment.clientId);
+        if (!upload) continue;
+        media.push({
+          clientId: attachment.clientId,
+          mediaId: upload.id,
+          url: upload.url,
+          mimeType: upload.mimeType,
+          name: upload.filename || undefined,
+          alt: attachment.alt || undefined,
+        });
+      }
+    }
+    return media;
+  };
+
   const reopenComposeAfterFailure = async () => {
     if (!composeEl || isPageMode) return;
 
+    if (detail.draftSourceId) {
+      if (typeof composeEl.openDraft !== "function") return;
+      await composeEl.openDraft(detail.draftSourceId);
+      return;
+    }
+
     if (isEdit && detail.editPostId) {
       if (typeof composeEl.openEdit !== "function") return;
-      await composeEl.openEdit(detail.editPostId);
+      await composeEl.openEdit(detail.editPostId, { restoreToast: false });
       return;
     }
 
@@ -772,13 +745,22 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
               id: detail.replyRefreshId,
             }
           : undefined,
-        { restoreDraft: true, initialFormat: detail.format },
+        {
+          restoreDraft: true,
+          initialFormat: detail.format,
+          restoreToast: false,
+          restoreMedia: collectRestorableMedia(),
+        },
       );
       return;
     }
 
     if (typeof composeEl.openNew !== "function") return;
-    await composeEl.openNew({ restoreDraft: true });
+    await composeEl.openNew({
+      restoreDraft: true,
+      restoreToast: false,
+      restoreMedia: collectRestorableMedia(),
+    });
   };
   const handleSubmitError = async (message: string) => {
     clearPageLoading();
@@ -818,10 +800,10 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
     const results = await Promise.all(pendingPromises);
 
     // If any pending upload failed (null result where we expected a mediaId
-    // AND the upload wasn't already tracked in completedMediaIds):
+    // AND the upload wasn't already tracked in completedUploads):
     const failedCount = results.filter(
       (id, i) =>
-        id === null && !completedMediaIds.has(pendingClientIds[i] ?? ""),
+        id === null && !completedUploads.has(pendingClientIds[i] ?? ""),
     ).length;
     if (failedCount > 0) {
       if (detail.status === "published" && !isEdit) {
@@ -930,7 +912,12 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
 
       if (threadStatus === "published") {
         clearRecoveredLocalDraft();
-        if (isPageMode) {
+        if (isDraftPreviewPage && detail.draftSourceId) {
+          queueSuccessToast(publishedMsg);
+          globalThis.location.assign(
+            threadPermalink ?? globalThis.location.pathname,
+          );
+        } else if (isPageMode) {
           await refreshComposeCollections();
           resetPageCompose();
           toastMsg(publishedMsg);
@@ -945,6 +932,11 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
         }
       } else {
         clearRecoveredLocalDraft();
+        if (isDraftPreviewPage && detail.draftSourceId) {
+          queueSuccessToast(threadToast ?? "Draft saved.");
+          globalThis.location.assign(globalThis.location.pathname);
+          return;
+        }
         await refreshComposeCollections();
         if (!leavePageAfterConfirmSave()) resetPageCompose();
         toastMsg(threadToast ?? "Draft saved.");
@@ -1033,21 +1025,50 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
       const editData = await readJsonObject(res);
       const editPostId = detail.editPostId ?? "";
       const newSlug = getJsonString(editData, "slug");
-      const newPath = newSlug ? publicPath(`/${newSlug}`) : null;
+      const nextStatus = getJsonString(editData, "status") ?? detail.status;
+      const newPath = newSlug
+        ? publicPath(
+            nextStatus === "draft" ? `/preview/${newSlug}` : `/${newSlug}`,
+          )
+        : null;
+      const editSuccessMessage =
+        nextStatus === "draft"
+          ? "Draft saved."
+          : detail.draftSourceId
+            ? publishedMsg
+            : "Post updated.";
+
+      // Draft preview pages cannot use the public post-view refresh endpoint.
+      // Reload the authenticated preview so saved content stays visible.
+      if (nextStatus === "draft") {
+        if (isDraftPreviewPage) {
+          queueSuccessToast(editSuccessMessage);
+          globalThis.location.assign(newPath ?? globalThis.location.pathname);
+          return;
+        }
+
+        // Drafts opened from the compose panel stay in that workflow. The
+        // completion event lets a pending "save and open drafts" action fetch
+        // the updated list only after the write has finished.
+        await refreshComposeCollections();
+        toastMsg(editSuccessMessage);
+        dispatchSubmitComplete(composeEl, "draft");
+        return;
+      }
 
       if (isPageMode) {
         // On the post detail page: refresh or navigate if slug changed
         if (newPath && newPath !== globalThis.location.pathname) {
-          queueSuccessToast("Post updated.");
+          queueSuccessToast(editSuccessMessage);
           globalThis.location.assign(newPath);
         } else {
           const refreshed =
             editPostId && (await refreshPostPageView(editPostId));
           if (!refreshed) {
-            queueSuccessToast("Post updated.");
+            queueSuccessToast(editSuccessMessage);
             globalThis.location.assign(globalThis.location.pathname);
           } else {
-            toastMsg("Post updated.");
+            toastMsg(editSuccessMessage);
           }
         }
       } else if (editPostId) {
@@ -1057,15 +1078,15 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
         );
         if (postView) {
           if (newPath && newPath !== globalThis.location.pathname) {
-            queueSuccessToast("Post updated.");
+            queueSuccessToast(editSuccessMessage);
             globalThis.location.assign(newPath);
             return;
           }
           const refreshed = await refreshPostPageView(editPostId);
           if (refreshed) {
-            toastMsg("Post updated.");
+            toastMsg(editSuccessMessage);
           } else {
-            queueSuccessToast("Post updated.");
+            queueSuccessToast(editSuccessMessage);
             globalThis.location.reload();
           }
         } else {
@@ -1080,14 +1101,14 @@ document.addEventListener("jant:compose-submit-deferred", async (e: Event) => {
             ? await refreshTimelineThreadView(threadRootId)
             : await refreshPostCardView(editPostId);
           if (refreshed) {
-            toastMsg("Post updated.");
+            toastMsg(editSuccessMessage);
           } else {
-            queueSuccessToast("Post updated.");
+            queueSuccessToast(editSuccessMessage);
             globalThis.location.reload();
           }
         }
       } else {
-        queueSuccessToast("Post updated.");
+        queueSuccessToast(editSuccessMessage);
         globalThis.location.reload();
       }
       return;

package/src/client/compose-launch.ts

@@ -1,4 +1,5 @@
 import type { JantComposeDialog } from "./components/jant-compose-dialog.js";
+import { showToast } from "./toast.js";
 
 interface ReplyToData {
   contentHtml: string;
@@ -142,6 +143,18 @@ export async function openReplyForArticle(article: HTMLElement): Promise<void> {
   const dialog = getComposeDialog();
   if (!dialog) return;
 
+  // Only surfaces that hide the trailing draft redirect to it — the feed hands
+  // its ID down on the last published post. Where the draft is rendered the
+  // author can already see it, so Reply keeps its ordinary meaning: continue
+  // the thread after this post. (`create` keeps that continuation a draft, so
+  // the chain never publishes past an unpublished post.)
+  const hiddenDraftTailId = article.dataset.threadDraftTailId;
+  if (hiddenDraftTailId) {
+    showToast("Picking up the unfinished draft at the end of this thread.");
+    await dialog.openEdit(hiddenDraftTailId);
+    return;
+  }
+
   const threadRootId = article.dataset.threadRootId ?? postId;
   await dialog.openReply(
     postId,

package/src/client/compose-shortcuts.ts

@@ -68,7 +68,11 @@ function openEditFromQueryParam() {
   if (!postId || !composeEl) return;
 
   consumeEditQueryParam();
-  void composeEl.openEdit(postId);
+  if (document.querySelector("[data-preview-status]")) {
+    void composeEl.openDraft(postId);
+  } else {
+    void composeEl.openEdit(postId);
+  }
 }
 
 async function toggleFeatured(