@jant/core 0.3.36 → 0.3.38

package/src/client/components/jant-compose-fullscreen.ts

@@ -12,7 +12,7 @@ import { LitElement, html, nothing } from "lit";
 import type { Editor, JSONContent } from "@tiptap/core";
 import type { ComposeLabels } from "./compose-types.js";
 import { createTiptapEditor } from "../tiptap/create-editor.js";
-import { getSlashCommands } from "../tiptap/slash-commands.js";
+import { uploadWithMetadata } from "../upload-with-metadata.js";
 
 export class JantComposeFullscreen extends LitElement {
   static properties = {
@@ -20,14 +20,12 @@ export class JantComposeFullscreen extends LitElement {
     _open: { state: true },
     _title: { state: true },
     _showTitle: { state: true },
-    _actionsOpen: { state: true },
   };
 
   declare labels: ComposeLabels;
   declare _open: boolean;
   declare _title: string;
   declare _showTitle: boolean;
-  declare _actionsOpen: boolean;
 
   private _editor: Editor | null = null;
   private _content: JSONContent | null = null;
@@ -43,7 +41,6 @@ export class JantComposeFullscreen extends LitElement {
     this._open = false;
     this._title = "";
     this._showTitle = false;
-    this._actionsOpen = false;
   }
 
   connectedCallback() {
@@ -96,14 +93,7 @@ export class JantComposeFullscreen extends LitElement {
     this._editor.chain().focus().setImage({ src: placeholderUrl }).run();
 
     try {
-      const formData = new FormData();
-      formData.append("file", file);
-      const response = await fetch("/api/upload", {
-        method: "POST",
-        body: formData,
-      });
-      if (!response.ok) throw new Error(`Upload failed: ${response.status}`);
-      const data = (await response.json()) as { url: string };
+      const data = await uploadWithMetadata(file);
 
       // Replace placeholder with real URL
       const { doc } = this._editor.state;
@@ -161,7 +151,6 @@ export class JantComposeFullscreen extends LitElement {
     // Always show title in fullscreen — it's the primary editing surface
     this._showTitle = true;
     this._open = true;
-    this._actionsOpen = false;
     // Show as modal (top layer) and init editor after render
     this.updateComplete.then(() => {
       const dialog = this.querySelector<HTMLDialogElement>(
@@ -221,51 +210,10 @@ export class JantComposeFullscreen extends LitElement {
     );
   }
 
-  private _toggleActions() {
-    this._actionsOpen = !this._actionsOpen;
-  }
-
-  private _executeCommand(index: number) {
-    const commands = getSlashCommands();
-    const item = commands[index];
-    if (!item || !this._editor) {
-      this._actionsOpen = false;
-      return;
-    }
-
-    // Image command: trigger file picker directly
-    if (item.label === "Image") {
-      this._actionsOpen = false;
-      this._triggerImagePicker();
-      return;
-    }
-
-    const { from, to } = this._editor.state.selection;
-    item.command(this._editor, { from, to });
-    this._actionsOpen = false;
-  }
-
-  private _renderActionsMenu() {
-    if (!this._actionsOpen) return nothing;
-    const commands = getSlashCommands();
-    return html`
-      <div class="tiptap-slash-menu compose-fullscreen-plus-dropdown">
-        ${commands.map(
-          (item, i) => html`
-            <div
-              class="tiptap-slash-item"
-              @mousedown=${(e: Event) => {
-                e.preventDefault();
-                this._executeCommand(i);
-              }}
-            >
-              <span class="tiptap-slash-item-icon">${item.icon}</span>
-              <span class="tiptap-slash-item-label">${item.label}</span>
-            </div>
-          `,
-        )}
-      </div>
-    `;
+  /** Insert "/" at cursor to trigger the slash command popup */
+  private _insertSlash() {
+    if (!this._editor) return;
+    this._editor.chain().focus().insertContent("/").run();
   }
 
   render() {
@@ -275,27 +223,24 @@ export class JantComposeFullscreen extends LitElement {
       <dialog class="compose-fullscreen-dialog" @cancel=${this._onDialogCancel}>
         <div class="compose-fullscreen">
           <div class="compose-fullscreen-toolbar">
-            <div class="compose-fullscreen-plus-menu">
-              <button
-                type="button"
-                class="compose-tool-btn"
-                @click=${() => this._toggleActions()}
+            <button
+              type="button"
+              class="compose-tool-btn"
+              @click=${() => this._insertSlash()}
+            >
+              <svg
+                width="18"
+                height="18"
+                viewBox="0 0 18 18"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
               >
-                <svg
-                  width="18"
-                  height="18"
-                  viewBox="0 0 18 18"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                >
-                  <line x1="9" y1="3" x2="9" y2="15" />
-                  <line x1="3" y1="9" x2="15" y2="9" />
-                </svg>
-              </button>
-              ${this._renderActionsMenu()}
-            </div>
+                <line x1="9" y1="3" x2="9" y2="15" />
+                <line x1="3" y1="9" x2="15" y2="9" />
+              </svg>
+            </button>
             <div class="flex-1"></div>
             <button
               type="button"

package/src/client/components/jant-media-lightbox.ts

@@ -17,6 +17,7 @@ interface LightboxImage {
   width?: number;
   height?: number;
   mimeType?: string;
+  posterUrl?: string;
 }
 
 export class JantMediaLightbox extends LitElement {
@@ -197,6 +198,7 @@ export class JantMediaLightbox extends LitElement {
             ? html`<video
                 class="media-lightbox-video"
                 src=${img.url}
+                poster=${img.posterUrl ?? ""}
                 controls
                 autoplay
                 playsinline

package/src/client/components/jant-nav-manager.ts

@@ -5,7 +5,7 @@
  * - Renders a preview bar that reflects current item order
  * - Sortable list with inline edit/delete panels
  * - SortableJS drag-and-drop reorder with immediate preview update
- * - Add page/link forms
+ * - Add link forms
  * - System nav item toggles with immediate list/preview update
  * - Dispatches events for update/delete (handled by bridge)
  *
@@ -17,7 +17,6 @@ import type { PropertyValueMap } from "lit";
 import Sortable from "sortablejs";
 import { showToast } from "../toast.js";
 import type {
-  AvailablePage,
   NavManagerItem,
   NavManagerLabels,
   NavManagerUpdateDetail,
@@ -30,7 +29,6 @@ export class JantNavManager extends LitElement {
     items: { type: Array },
     labels: { type: Object },
     systemNavItems: { type: Array, attribute: "system-nav-items" },
-    availablePages: { type: Array, attribute: "available-pages" },
     siteName: { type: String, attribute: "site-name" },
     maxVisible: { type: Number, attribute: "max-visible" },
     homeDefaultView: { type: String, attribute: "home-default-view" },
@@ -41,40 +39,30 @@ export class JantNavManager extends LitElement {
     _editUrl: { state: true },
     _togglingKeys: { state: true },
     _showOverflow: { state: true },
-    _showPagePicker: { state: true },
     _showLinkForm: { state: true },
     _newLinkLabel: { state: true },
     _newLinkUrl: { state: true },
-    _availablePages: { state: true },
-    _addingPageId: { state: true },
     _addingLink: { state: true },
-    _pageSearchQuery: { state: true },
   };
 
   declare items: NavManagerItem[];
   declare labels: NavManagerLabels;
   declare systemNavItems: SystemNavConfig[];
-  declare availablePages: AvailablePage[];
   declare siteName: string;
   declare maxVisible: number;
   declare homeDefaultView: string;
 
   declare _items: NavManagerItem[];
-  declare _editingId: number | null;
+  declare _editingId: string | null;
   declare _editLabel: string;
   declare _editUrl: string;
   /** Keys currently mid-request (to disable switch during toggle) */
   declare _togglingKeys: Set<string>;
   declare _showOverflow: boolean;
-  declare _showPagePicker: boolean;
   declare _showLinkForm: boolean;
   declare _newLinkLabel: string;
   declare _newLinkUrl: string;
-  declare _availablePages: AvailablePage[];
-  /** Page ID currently being added (to disable its button) */
-  declare _addingPageId: number | null;
   declare _addingLink: boolean;
-  declare _pageSearchQuery: string;
 
   #sortable: { destroy(): void } | null = null;
   #initialized = false;
@@ -82,11 +70,6 @@ export class JantNavManager extends LitElement {
     this._showOverflow = false;
     document.removeEventListener("click", this.#closeOverflow);
   };
-  #closePagePicker = () => {
-    this._showPagePicker = false;
-    this._pageSearchQuery = "";
-    document.removeEventListener("click", this.#closePagePicker);
-  };
   #closeLinkForm = () => {
     this._showLinkForm = false;
     document.removeEventListener("click", this.#closeLinkForm);
@@ -102,7 +85,6 @@ export class JantNavManager extends LitElement {
     this.items = [];
     this.labels = {} as NavManagerLabels;
     this.systemNavItems = [];
-    this.availablePages = [];
     this.siteName = "";
     this.maxVisible = 2;
     this.homeDefaultView = "latest";
@@ -113,14 +95,10 @@ export class JantNavManager extends LitElement {
     this._editUrl = "";
     this._togglingKeys = new Set();
     this._showOverflow = false;
-    this._showPagePicker = false;
     this._showLinkForm = false;
     this._newLinkLabel = "";
     this._newLinkUrl = "";
-    this._availablePages = [];
-    this._addingPageId = null;
     this._addingLink = false;
-    this._pageSearchQuery = "";
   }
 
   protected update(changedProperties: PropertyValueMap<JantNavManager>): void {
@@ -128,9 +106,6 @@ export class JantNavManager extends LitElement {
       this._items = [...(this.items ?? [])];
       this.#initialized = true;
     }
-    if (changedProperties.has("availablePages" as keyof JantNavManager)) {
-      this._availablePages = [...(this.availablePages ?? [])];
-    }
     super.update(changedProperties);
   }
 
@@ -143,7 +118,6 @@ export class JantNavManager extends LitElement {
     this.#sortable?.destroy();
     this.#sortable = null;
     document.removeEventListener("click", this.#closeOverflow);
-    document.removeEventListener("click", this.#closePagePicker);
     document.removeEventListener("click", this.#closeLinkForm);
   }
 
@@ -161,7 +135,9 @@ export class JantNavManager extends LitElement {
       onEnd: (evt) => {
         // Read new order from DOM BEFORE reverting
         const els = [...list.querySelectorAll<HTMLElement>("[data-nav-id]")];
-        const ids = els.map((el) => Number(el.dataset.navId));
+        const ids = els
+          .map((el) => el.dataset.navId)
+          .filter((id): id is string => id !== undefined);
 
         // Revert SortableJS DOM manipulation so Lit can re-render cleanly.
         // SortableJS physically moved the element — put it back where it was.
@@ -182,17 +158,28 @@ export class JantNavManager extends LitElement {
         this.#sortable?.destroy();
         this.#sortable = null;
 
+        // Find the moved item and compute neighbors
+        const movedId = newIndex != null ? ids[newIndex] : undefined;
+        if (!movedId) return;
+
+        const movedIdx = ids.indexOf(movedId);
+        const afterId = movedIdx > 0 ? ids[movedIdx - 1] : null;
+        const beforeId = movedIdx < ids.length - 1 ? ids[movedIdx + 1] : null;
+
         // Update internal state so Lit re-renders in the new order
         const itemMap = new Map(this._items.map((i) => [i.id, i]));
         this._items = ids
           .map((id) => itemMap.get(id))
           .filter((i): i is NavManagerItem => i !== undefined);
 
-        // Persist to server
-        fetch("/api/nav-items/reorder", {
+        // Persist to server — single item move
+        fetch(`/api/nav-items/${movedId}/move`, {
           method: "PUT",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ ids }),
+          body: JSON.stringify({
+            after: afterId ?? null,
+            before: beforeId ?? null,
+          }),
         }).then((res) => {
           if (res.ok) showToast(this.labels.orderSaved);
           else showToast(this.labels.saveFailed, "error");
@@ -253,7 +240,7 @@ export class JantNavManager extends LitElement {
     const clamped = Math.max(0, Math.min(5, value));
     this.maxVisible = clamped;
     try {
-      const res = await fetch("/dash/settings/navigation/nav-max-visible", {
+      const res = await fetch("/settings/navigation/nav-max-visible", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ value: clamped }),
@@ -268,7 +255,7 @@ export class JantNavManager extends LitElement {
   async #handleHomeViewToggle(useFeatured: boolean) {
     this.homeDefaultView = useFeatured ? "featured" : "latest";
     try {
-      const res = await fetch("/dash/settings/navigation/home-default-view", {
+      const res = await fetch("/settings/navigation/home-default-view", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ value: this.homeDefaultView }),
@@ -281,41 +268,9 @@ export class JantNavManager extends LitElement {
   }
 
   // ===========================================================================
-  // Add page / link handlers
+  // Add link handler
   // ===========================================================================
 
-  async #handleAddPage(page: AvailablePage) {
-    this._addingPageId = page.id;
-    try {
-      const res = await fetch("/api/nav-items", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "application/json",
-        },
-        body: JSON.stringify({
-          type: "page",
-          label: page.title || page.slug,
-          url: `/${page.slug}`,
-          pageId: page.id,
-        }),
-      });
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-
-      const created: NavManagerItem = await res.json();
-      this.#sortable?.destroy();
-      this.#sortable = null;
-      this._items = [...this._items, created];
-      this._availablePages = this._availablePages.filter(
-        (p) => p.id !== page.id,
-      );
-    } catch {
-      showToast(this.labels.saveFailed, "error");
-    } finally {
-      this._addingPageId = null;
-    }
-  }
-
   async #handleAddLink() {
     const label = this._newLinkLabel.trim();
     const url = this._newLinkUrl.trim();
@@ -533,12 +488,7 @@ export class JantNavManager extends LitElement {
   }
 
   #renderTypeBadge(type: string) {
-    const label =
-      type === "page"
-        ? this.labels.page
-        : type === "system"
-          ? this.labels.system
-          : this.labels.link;
+    const label = type === "system" ? this.labels.system : this.labels.link;
     return html`<span class="badge-secondary">${label}</span>`;
   }
 
@@ -592,29 +542,6 @@ export class JantNavManager extends LitElement {
       `;
     }
 
-    if (item.type === "page") {
-      return html`
-        <div class="nav-item-edit">
-          <div class="flex items-center justify-between">
-            <button
-              type="button"
-              class="btn-sm-ghost text-destructive"
-              @click=${() => this.#handleDelete(item)}
-            >
-              ${this.labels.remove}
-            </button>
-            ${item.pageId
-              ? html`<a
-                  href=${`/dash/pages/${item.pageId}/edit`}
-                  class="text-sm text-muted-foreground hover:text-foreground transition-colors"
-                  >${this.labels.editPage} &rarr;</a
-                >`
-              : nothing}
-          </div>
-        </div>
-      `;
-    }
-
     if (item.type === "system") {
       return html`
         <div class="nav-item-edit">
@@ -721,193 +648,6 @@ export class JantNavManager extends LitElement {
     `;
   }
 
-  #renderAddArea() {
-    return html`
-      ${this.#renderAddPageSection()} ${this.#renderAddLinkSection()}
-    `;
-  }
-
-  #renderAddPageSection() {
-    const query = this._pageSearchQuery.toLowerCase();
-    const filteredPages = query
-      ? this._availablePages.filter((p) =>
-          (p.title || p.slug).toLowerCase().includes(query),
-        )
-      : this._availablePages;
-
-    return html`
-      <section class="mt-8">
-        <h2 class="text-lg font-semibold mb-3">
-          ${this.labels.addPageToNavigation}
-        </h2>
-        <div id="nav-page-select" class="select">
-          <button
-            type="button"
-            class="btn-outline w-full sm:w-[280px]"
-            id="nav-page-select-trigger"
-            aria-haspopup="listbox"
-            aria-expanded=${this._showPagePicker}
-            aria-controls="nav-page-select-listbox"
-            @click=${(e: Event) => {
-              e.stopPropagation();
-              this._showPagePicker = !this._showPagePicker;
-              this._pageSearchQuery = "";
-              if (this._showPagePicker) {
-                setTimeout(() => {
-                  document.addEventListener("click", this.#closePagePicker);
-                  this.querySelector<HTMLInputElement>(
-                    "#nav-page-search",
-                  )?.focus();
-                });
-              } else {
-                document.removeEventListener("click", this.#closePagePicker);
-              }
-            }}
-          >
-            <span class="truncate">${this.labels.choosePage}</span>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              class="text-muted-foreground opacity-50 shrink-0"
-            >
-              <path d="m7 15 5 5 5-5" />
-              <path d="m7 9 5-5 5 5" />
-            </svg>
-          </button>
-          ${this._showPagePicker
-            ? html`
-                <div
-                  id="nav-page-select-popover"
-                  data-popover
-                  aria-hidden="false"
-                  class="w-full sm:w-[280px]"
-                  @click=${(e: Event) => e.stopPropagation()}
-                >
-                  <header>
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                    >
-                      <circle cx="11" cy="11" r="8" />
-                      <path d="m21 21-4.3-4.3" />
-                    </svg>
-                    <input
-                      type="text"
-                      id="nav-page-search"
-                      .value=${this._pageSearchQuery}
-                      placeholder=${this.labels.searchPages}
-                      autocomplete="off"
-                      autocorrect="off"
-                      spellcheck="false"
-                      aria-autocomplete="list"
-                      role="combobox"
-                      aria-expanded="true"
-                      aria-controls="nav-page-select-listbox"
-                      aria-labelledby="nav-page-select-trigger"
-                      @input=${(e: Event) => {
-                        this._pageSearchQuery = (
-                          e.target as HTMLInputElement
-                        ).value;
-                      }}
-                    />
-                  </header>
-                  <div
-                    role="listbox"
-                    id="nav-page-select-listbox"
-                    aria-orientation="vertical"
-                    aria-labelledby="nav-page-select-trigger"
-                    data-empty=${this.labels.noPagesFound}
-                  >
-                    ${filteredPages.length > 0
-                      ? html`<div class="max-h-64 overflow-y-auto scrollbar">
-                          ${filteredPages.map(
-                            (page) => html`
-                              <div
-                                role="option"
-                                data-value=${page.id}
-                                @click=${() => {
-                                  this._showPagePicker = false;
-                                  this._pageSearchQuery = "";
-                                  document.removeEventListener(
-                                    "click",
-                                    this.#closePagePicker,
-                                  );
-                                  this.#handleAddPage(page);
-                                }}
-                              >
-                                ${page.title || page.slug}
-                              </div>
-                            `,
-                          )}
-                          <hr role="separator" />
-                          <a href="/dash/pages/new" role="option">
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="24"
-                              height="24"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              stroke-width="2"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                            >
-                              <circle cx="12" cy="12" r="10" />
-                              <path d="M8 12h8" />
-                              <path d="M12 8v8" />
-                            </svg>
-                            ${this.labels.createPage}
-                          </a>
-                        </div>`
-                      : html`<div
-                            class="py-6 text-center text-sm text-muted-foreground"
-                          >
-                            ${this._availablePages.length === 0
-                              ? this.labels.allPagesInNav
-                              : this.labels.noPagesFound}
-                          </div>
-                          <hr role="separator" />
-                          <a href="/dash/pages/new" role="option">
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="24"
-                              height="24"
-                              viewBox="0 0 24 24"
-                              fill="none"
-                              stroke="currentColor"
-                              stroke-width="2"
-                              stroke-linecap="round"
-                              stroke-linejoin="round"
-                            >
-                              <circle cx="12" cy="12" r="10" />
-                              <path d="M8 12h8" />
-                              <path d="M12 8v8" />
-                            </svg>
-                            ${this.labels.createPage}
-                          </a>`}
-                  </div>
-                </div>
-              `
-            : nothing}
-        </div>
-      </section>
-    `;
-  }
-
   #renderAddLinkSection() {
     return html`
       <section class="mt-8">
@@ -1118,7 +858,7 @@ export class JantNavManager extends LitElement {
             `}
       </section>
 
-      ${this.#renderAddArea()} ${this.#renderSystemToggles()}
+      ${this.#renderAddLinkSection()} ${this.#renderSystemToggles()}
     `;
   }
 }