@jant/core 0.6.14 → 0.6.16

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

@@ -10,7 +10,7 @@ import type { Editor, JSONContent } from "@tiptap/core";
 import type {
   PostFormInitial,
   PostFormLabels,
-  PostCollectionOption,
+  ThreadCollectionOption,
   PostMediaItem,
   PostSubmitDetail,
   PostFormat,
@@ -116,7 +116,7 @@ export class JantPostForm extends LitElement {
 
   declare labels: PostFormLabels;
   declare initial: PostFormInitial;
-  declare collections: PostCollectionOption[];
+  declare collections: ThreadCollectionOption[];
   declare media: PostMediaItem[];
   declare action: string;
   declare cancelHref: string;
@@ -191,7 +191,7 @@ export class JantPostForm extends LitElement {
       });
     }
     if (typeof this.collections === "string") {
-      this.collections = parseJson<PostCollectionOption[]>(
+      this.collections = parseJson<ThreadCollectionOption[]>(
         this.collections,
         [],
       );

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 {
@@ -27,11 +28,13 @@ import type { CollectionSubmitDetail } from "./collection-types.js";
 
 interface PostMenuData {
   id: string;
+  threadId: string;
   pinned: boolean;
   pinnedInCollection: boolean;
   featured: boolean;
   visibility: string;
   isReply: boolean;
+  isDraft: boolean;
 }
 
 interface CollectionItem {
@@ -44,7 +47,7 @@ interface CollectionsResponse {
   collections?: CollectionItem[];
 }
 
-interface PostCollectionsResponse {
+interface ThreadCollectionsResponse {
   collectionIds?: string[];
 }
 
@@ -78,6 +81,35 @@ export function removeLeadingFeedDivider(
   firstDivider?.remove();
 }
 
+function findThreadRootArticle(threadId: string): HTMLElement | null {
+  return (
+    Array.from(
+      document.querySelectorAll<HTMLElement>("article[data-post-id]"),
+    ).find((article) => article.dataset.postId === threadId) ?? null
+  );
+}
+
+function readPostMenuData(article: HTMLElement): PostMenuData | null {
+  const id = article.dataset.postId;
+  if (!id) return null;
+
+  const threadId = article.dataset.threadRootId ?? id;
+  const threadRootArticle = findThreadRootArticle(threadId) ?? article;
+
+  return {
+    id,
+    threadId,
+    pinned: article.hasAttribute("data-post-pinned"),
+    pinnedInCollection: threadRootArticle.hasAttribute(
+      "data-post-pinned-in-collection",
+    ),
+    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"),
+  };
+}
+
 export class JantPostMenu extends LitElement {
   static properties = {
     _open: { state: true },
@@ -89,7 +121,7 @@ export class JantPostMenu extends LitElement {
     _collections: { state: true },
     _collectionsLoading: { state: true },
     _collectionSearch: { state: true },
-    _postCollectionIds: { state: true },
+    _threadCollectionIds: { state: true },
     _addCollectionPanelOpen: { state: true },
   };
 
@@ -102,7 +134,7 @@ export class JantPostMenu extends LitElement {
   declare _collections: CollectionItem[] | null;
   declare _collectionsLoading: boolean;
   declare _collectionSearch: string;
-  declare _postCollectionIds: string[];
+  declare _threadCollectionIds: string[];
   declare _addCollectionPanelOpen: boolean;
   declare _triggerEl: HTMLElement | null;
 
@@ -127,7 +159,7 @@ export class JantPostMenu extends LitElement {
     this._collections = null;
     this._collectionsLoading = false;
     this._collectionSearch = "";
-    this._postCollectionIds = [];
+    this._threadCollectionIds = [];
     this._addCollectionPanelOpen = false;
     this._triggerEl = null;
   }
@@ -246,25 +278,16 @@ export class JantPostMenu extends LitElement {
       const article = trigger.closest<HTMLElement>("article[data-post]");
       if (!article) return;
 
-      const postId = article.dataset.postId;
-      if (!postId) return;
+      const menuData = readPostMenuData(article);
+      if (!menuData) return;
 
       // Toggle: close if same post, open if different
-      if (this._open && this._data?.id === postId) {
+      if (this._open && this._data?.id === menuData.id) {
         this.#close();
         return;
       }
 
-      this._data = {
-        id: postId,
-        pinned: article.hasAttribute("data-post-pinned"),
-        pinnedInCollection: article.hasAttribute(
-          "data-post-pinned-in-collection",
-        ),
-        featured: article.hasAttribute("data-post-featured"),
-        visibility: article.dataset.postVisibility ?? "public",
-        isReply: article.hasAttribute("data-post-reply"),
-      };
+      this._data = menuData;
 
       // Position relative to trigger
       this._triggerEl = trigger;
@@ -472,19 +495,10 @@ export class JantPostMenu extends LitElement {
    * relative to the post's menu trigger button.
    */
   openCollectionsForPost(article: HTMLElement) {
-    const postId = article.dataset.postId;
-    if (!postId) return;
-
-    this._data = {
-      id: postId,
-      pinned: article.hasAttribute("data-post-pinned"),
-      pinnedInCollection: article.hasAttribute(
-        "data-post-pinned-in-collection",
-      ),
-      featured: article.hasAttribute("data-post-featured"),
-      visibility: article.dataset.postVisibility ?? "public",
-      isReply: article.hasAttribute("data-post-reply"),
-    };
+    const menuData = readPostMenuData(article);
+    if (!menuData || menuData.isReply) return;
+
+    this._data = menuData;
 
     const trigger = article.querySelector<HTMLElement>(
       "[data-post-menu-trigger]",
@@ -518,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;
@@ -650,7 +694,7 @@ export class JantPostMenu extends LitElement {
 
   #toggleCollectionPin() {
     if (!this._data) return;
-    const postId = this._data.id;
+    const threadId = this._data.threadId;
     const collectionId = document.querySelector<HTMLElement>(
       "[data-collection-id]",
     )?.dataset.collectionId;
@@ -659,9 +703,7 @@ export class JantPostMenu extends LitElement {
     const newPinned = !this._data.pinnedInCollection;
 
     // Optimistic update
-    const article = document.querySelector<HTMLElement>(
-      `article[data-post-id="${postId}"]`,
-    );
+    const article = findThreadRootArticle(threadId);
     if (article) {
       if (newPinned) {
         article.setAttribute("data-post-pinned-in-collection", "");
@@ -677,14 +719,14 @@ export class JantPostMenu extends LitElement {
     this.#close();
 
     const method = newPinned ? "PUT" : "DELETE";
-    fetch(`/api/collections/${collectionId}/posts/${postId}/pin`, { method })
+    fetch(`/api/collections/${collectionId}/threads/${threadId}/pin`, {
+      method,
+    })
       .then((res) => {
         if (!res.ok) throw new Error();
       })
       .catch(() => {
-        const el = document.querySelector<HTMLElement>(
-          `article[data-post-id="${postId}"]`,
-        );
+        const el = findThreadRootArticle(threadId);
         if (el) {
           if (newPinned) {
             el.removeAttribute("data-post-pinned-in-collection");
@@ -702,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",
     });
@@ -754,7 +798,7 @@ export class JantPostMenu extends LitElement {
   }
 
   async #openCollectionPicker() {
-    if (!this._data) return;
+    if (!this._data || this._data.isReply) return;
     const postId = this._data.id;
     this._view = "collections";
     this._collectionSearch = "";
@@ -776,18 +820,18 @@ export class JantPostMenu extends LitElement {
       const collectionsData =
         (await collectionsRes.json()) as CollectionsResponse;
       const collections = collectionsData.collections ?? [];
-      let postCollectionIds = this._postCollectionIds;
+      let threadCollectionIds = this._threadCollectionIds;
 
       if (postRes.ok) {
-        const postData = (await postRes.json()) as PostCollectionsResponse;
-        postCollectionIds = postData.collectionIds ?? [];
+        const postData = (await postRes.json()) as ThreadCollectionsResponse;
+        threadCollectionIds = postData.collectionIds ?? [];
       }
       this.#collectionPickerOrder = getSelectedFirstOrder(
         collections,
-        postCollectionIds,
+        threadCollectionIds,
       );
       this._collections = collections;
-      this._postCollectionIds = postCollectionIds;
+      this._threadCollectionIds = threadCollectionIds;
     } catch {
       this._collections = this._collections ?? [];
       showToast("Could not load collections.", "error");
@@ -800,23 +844,23 @@ export class JantPostMenu extends LitElement {
 
   #toggleCollection(collectionId: string) {
     if (!this._data) return;
-    const postId = this._data.id;
-    const isSelected = this._postCollectionIds.includes(collectionId);
+    const threadId = this._data.threadId;
+    const isSelected = this._threadCollectionIds.includes(collectionId);
 
     // Optimistic update
     if (isSelected) {
-      this._postCollectionIds = this._postCollectionIds.filter(
+      this._threadCollectionIds = this._threadCollectionIds.filter(
         (id) => id !== collectionId,
       );
     } else {
-      this._postCollectionIds = [...this._postCollectionIds, collectionId];
+      this._threadCollectionIds = [...this._threadCollectionIds, collectionId];
     }
     this.#collectionsDirty = true;
     showToast(isSelected ? "Removed from collection." : "Added to collection.");
 
     // Fire request in background, revert on failure
     if (isSelected) {
-      fetch(`/api/collections/${collectionId}/posts/${postId}`, {
+      fetch(`/api/collections/${collectionId}/threads/${threadId}`, {
         method: "DELETE",
       })
         .then((res) => {
@@ -825,19 +869,19 @@ export class JantPostMenu extends LitElement {
         })
         .catch(() => {
           // Revert: re-add
-          if (!this._postCollectionIds.includes(collectionId)) {
-            this._postCollectionIds = [
-              ...this._postCollectionIds,
+          if (!this._threadCollectionIds.includes(collectionId)) {
+            this._threadCollectionIds = [
+              ...this._threadCollectionIds,
               collectionId,
             ];
           }
           showToast("Could not remove from collection. Try again.", "error");
         });
     } else {
-      fetch(`/api/collections/${collectionId}/posts`, {
+      fetch(`/api/collections/${collectionId}/threads`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ postId }),
+        body: JSON.stringify({ threadId }),
       })
         .then((res) => {
           if (!res.ok) {
@@ -849,7 +893,7 @@ export class JantPostMenu extends LitElement {
         })
         .catch(() => {
           // Revert: remove
-          this._postCollectionIds = this._postCollectionIds.filter(
+          this._threadCollectionIds = this._threadCollectionIds.filter(
             (id) => id !== collectionId,
           );
           showToast("Could not add to collection. Try again.", "error");
@@ -920,14 +964,14 @@ export class JantPostMenu extends LitElement {
 
       this._collections = [...(this._collections ?? []), newItem];
 
-      // Auto-add the post to the newly created collection
+      // Auto-add the thread to the newly created collection
       if (this._data) {
-        await fetch(`/api/collections/${created.id}/posts`, {
+        await fetch(`/api/collections/${created.id}/threads`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ postId: this._data.id }),
+          body: JSON.stringify({ threadId: this._data.threadId }),
         });
-        this._postCollectionIds = [...this._postCollectionIds, created.id];
+        this._threadCollectionIds = [...this._threadCollectionIds, created.id];
       }
 
       await this.#refreshComposeCollections();
@@ -983,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"
@@ -1193,7 +1252,7 @@ export class JantPostMenu extends LitElement {
             ? html`<div class="post-menu-picker-empty">Loading...</div>`
             : filtered.length > 0
               ? filtered.map((c) => {
-                  const selected = this._postCollectionIds.includes(c.id);
+                  const selected = this._threadCollectionIds.includes(c.id);
                   return html`
                     <button
                       type="button"
@@ -1492,19 +1551,37 @@ export class JantPostMenu extends LitElement {
               <span class="post-menu-item-trailing">${this.#iconEdit()}</span>
             </button>
 
-            <button
-              type="button"
-              role="menuitem"
-              class="post-menu-item"
-              data-post-menu-open-collections
-              @click=${() => this.#openCollectionPicker()}
-            >
-              <span class="post-menu-item-label">Add to collection</span>
-              <span class="post-menu-item-trailing post-menu-item-chevron"
-                >${this.#iconChevronRight()}</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`
+                  <button
+                    type="button"
+                    role="menuitem"
+                    class="post-menu-item"
+                    data-post-menu-open-collections
+                    @click=${() => this.#openCollectionPicker()}
+                  >
+                    <span class="post-menu-item-label">Add to collection</span>
+                    <span class="post-menu-item-trailing post-menu-item-chevron"
+                      >${this.#iconChevronRight()}</span
+                    >
+                  </button>
+                `}
             ${this._data.isReply
               ? nothing
               : html`
@@ -1527,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`
@@ -1562,7 +1642,7 @@ export class JantPostMenu extends LitElement {
                     >
                   </button>
                 `}
-            ${collectionId
+            ${collectionId && !this._data.isReply
               ? html`
                   <button
                     type="button"
@@ -1592,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/components/nav-manager-types.ts

@@ -3,18 +3,27 @@
  */
 
 import type { SystemNavKey } from "../../types/constants.js";
+import type { CollectionFormLabels } from "./collection-types.js";
 
 export interface NavManagerItem {
   id: string;
-  type: "link" | "system" | "collection";
+  type: "link" | "system" | "collection" | "page";
   systemKey?: SystemNavKey;
   collectionId?: string;
+  postId?: string;
   label: string;
   displayLabel?: string;
   url: string;
   placement?: "header" | "more";
 }
 
+export interface NavManagerPage {
+  id: string;
+  title: string;
+  slug: string;
+  updatedAt: number;
+}
+
 export interface SystemNavConfig {
   key: SystemNavKey;
   label: string;
@@ -36,8 +45,9 @@ export interface NavManagerSuggestedLink {
   url: string;
   targetType: "page" | "collection" | "archive";
   targetLabel: string;
-  navItemType: "link" | "collection";
+  navItemType: "link" | "collection" | "page";
   collectionId?: string;
+  postId?: string;
 }
 
 export interface NavManagerLabels {
@@ -45,6 +55,7 @@ export interface NavManagerLabels {
   navigationItems: string;
   emptyState: string;
   link: string;
+  page: string;
   system: string;
   toggleEdit: string;
   label: string;
@@ -53,6 +64,7 @@ export interface NavManagerLabels {
   delete: string;
   remove: string;
   confirmDeleteLink: string;
+  confirmDeletePage: string;
   orderSaved: string;
   labelRequired: string;
   saveFailed: string;
@@ -68,12 +80,49 @@ export interface NavManagerLabels {
   suggestedLinksDescription: string;
   addSuggestedLink: string;
   suggestedLinkAdded: string;
+  addPageToNavigation: string;
+  addPageDescription: string;
+  addPage: string;
+  searchPages: string;
+  recentPages: string;
+  searchingPages: string;
+  noMatchingPages: string;
+  noPages: string;
+  pageSearchFailed: string;
+  createNewPage: string;
+  createPage: string;
+  createPageDescription: string;
+  pageTitle: string;
+  pageAddress: string;
+  pageVisibilityHint: string;
+  titleRequired: string;
+  slugInvalid: string;
+  slugReserved: string;
+  slugTooLong: string;
+  slugUnavailable: string;
+  checkingAddress: string;
+  creatingPage: string;
+  createPageFailed: string;
+  pageCreated: string;
+  pageCreatedDescription: string;
+  addToNavigation: string;
+  editPage: string;
+  pageAdded: string;
+  back: string;
   collection: string;
   addCollection: string;
   addCollectionToNavigation: string;
   addCollectionDescription: string;
   allCollectionsAdded: string;
   noCollections: string;
+  createNewCollection: string;
+  createCollection: string;
+  creatingCollection: string;
+  createCollectionFailed: string;
+  collectionCreatedDescription: string;
+  editCollection: string;
+  collectionAdded: string;
+  collectionFormLabels: CollectionFormLabels;
   confirmDeleteCollection: string;
   headerSection: string;
   moreSection: string;

package/src/client/components/post-form-types.ts

@@ -59,7 +59,7 @@ export interface PostFormInitial {
   mediaIds: string[];
 }
 
-export interface PostCollectionOption {
+export interface ThreadCollectionOption {
   id: number;
   title: string;
 }