@jant/core 0.3.35 → 0.3.37

package/src/{ui → 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)
  *
@@ -15,9 +15,8 @@
 import { LitElement, html, nothing } from "lit";
 import type { PropertyValueMap } from "lit";
 import Sortable from "sortablejs";
-import { showToast } from "../../lib/toast.js";
+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,9 +85,8 @@ export class JantNavManager extends LitElement {
     this.items = [];
     this.labels = {} as NavManagerLabels;
     this.systemNavItems = [];
-    this.availablePages = [];
     this.siteName = "";
-    this.maxVisible = 3;
+    this.maxVisible = 2;
     this.homeDefaultView = "latest";
 
     this._items = [];
@@ -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/appearance/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/appearance/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();
@@ -420,11 +375,14 @@ export class JantNavManager extends LitElement {
     const hasMore = overflow.length > 0;
 
     return html`
-      <div class="border rounded-lg">
-        <p class="text-xs text-muted-foreground px-4 pt-3">
-          ${this.labels.preview}
-        </p>
-        <div class="px-5 py-3">
+      <div class="nav-preview">
+        <div class="nav-preview-chrome">
+          <div class="nav-preview-dots">
+            <span></span><span></span><span></span>
+          </div>
+          <span class="nav-preview-label">${this.labels.preview}</span>
+        </div>
+        <div class="nav-preview-content">
           <div class="site-header-top">
             <a href="/" class="site-logo">${this.siteName}</a>
             <div class="site-header-right">
@@ -530,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>`;
   }
 
@@ -544,7 +497,7 @@ export class JantNavManager extends LitElement {
 
     if (item.type === "link") {
       return html`
-        <div class="pb-4 pl-8 flex flex-col gap-3">
+        <div class="nav-item-edit">
           <div class="field">
             <label class="label">${this.labels.label}</label>
             <input
@@ -569,14 +522,7 @@ export class JantNavManager extends LitElement {
               }}
             />
           </div>
-          <div class="flex gap-2">
-            <button
-              type="button"
-              class="btn-sm"
-              @click=${() => this.#handleUpdate(item)}
-            >
-              ${this.labels.save}
-            </button>
+          <div class="flex items-center justify-between">
             <button
               type="button"
               class="btn-sm-ghost text-destructive"
@@ -584,29 +530,12 @@ export class JantNavManager extends LitElement {
             >
               ${this.labels.delete}
             </button>
-          </div>
-        </div>
-      `;
-    }
-
-    if (item.type === "page") {
-      return html`
-        <div class="pb-4 pl-8 flex flex-col gap-3">
-          <code class="text-sm text-muted-foreground">${item.url}</code>
-          <div class="flex gap-2">
-            ${item.pageId
-              ? html`<a
-                  href=${`/dash/pages/${item.pageId}/edit`}
-                  class="btn-sm-outline"
-                  >${this.labels.editPage}</a
-                >`
-              : nothing}
             <button
               type="button"
-              class="btn-sm-ghost text-destructive"
-              @click=${() => this.#handleDelete(item)}
+              class="btn-sm"
+              @click=${() => this.#handleUpdate(item)}
             >
-              ${this.labels.remove}
+              ${this.labels.save}
             </button>
           </div>
         </div>
@@ -615,8 +544,7 @@ export class JantNavManager extends LitElement {
 
     if (item.type === "system") {
       return html`
-        <div class="pb-4 pl-8 flex flex-col gap-3">
-          <code class="text-sm text-muted-foreground">${item.url}</code>
+        <div class="nav-item-edit">
           <div class="field">
             <label class="label">${this.labels.label}</label>
             <input
@@ -629,20 +557,20 @@ export class JantNavManager extends LitElement {
               }}
             />
           </div>
-          <div class="flex gap-2">
+          <div class="flex items-center justify-between">
             <button
               type="button"
-              class="btn-sm"
-              @click=${() => this.#handleUpdate(item)}
+              class="btn-sm-ghost text-destructive"
+              @click=${() => this.#handleDelete(item)}
             >
-              ${this.labels.save}
+              ${this.labels.remove}
             </button>
             <button
               type="button"
-              class="btn-sm-ghost text-destructive"
-              @click=${() => this.#handleDelete(item)}
+              class="btn-sm"
+              @click=${() => this.#handleUpdate(item)}
             >
-              ${this.labels.remove}
+              ${this.labels.save}
             </button>
           </div>
         </div>
@@ -653,17 +581,19 @@ export class JantNavManager extends LitElement {
   }
 
   #renderItem(item: NavManagerItem) {
+    const isEditing = this._editingId === item.id;
+
     return html`
-      <div data-nav-id=${item.id}>
-        <div class="flex items-center py-3 gap-2">
-          <div
-            class="flex items-center gap-3 cursor-grab flex-1 min-w-0"
-            data-drag-handle
-          >
+      <div
+        data-nav-id=${item.id}
+        class="nav-item${isEditing ? " nav-item-editing" : ""}"
+      >
+        <div class="nav-item-row">
+          <div class="nav-item-handle" data-drag-handle>
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
+              width="14"
+              height="14"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
@@ -679,183 +609,42 @@ export class JantNavManager extends LitElement {
               <circle cx="15" cy="5" r="1" />
               <circle cx="15" cy="19" r="1" />
             </svg>
-            <span class="font-medium truncate">${item.label}</span>
           </div>
-          <div class="flex items-center gap-2 shrink-0">
-            ${this.#renderTypeBadge(item.type)}
-            <button
-              type="button"
-              class="btn-sm-ghost"
-              @click=${() => this.#toggleEdit(item)}
-              aria-label=${this.labels.toggleEdit}
+          <div class="nav-item-info" @click=${() => this.#toggleEdit(item)}>
+            <div class="flex items-center gap-2 min-w-0">
+              <span class="text-sm font-medium truncate">${item.label}</span>
+              ${this.#renderTypeBadge(item.type)}
+            </div>
+            <span class="text-xs text-muted-foreground truncate"
+              >${item.url}</span
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <path d="m6 9 6 6 6-6" />
-              </svg>
-            </button>
           </div>
-        </div>
-        ${this.#renderEditPanel(item)}
-      </div>
-    `;
-  }
-
-  #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);
-              }
-            }}
+            class="nav-item-toggle"
+            @click=${() => this.#toggleEdit(item)}
+            aria-label=${this.labels.toggleEdit}
           >
-            <span class="truncate">${this.labels.choosePage}</span>
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
+              width="14"
+              height="14"
               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"
+              style="transition: transform 0.15s; ${isEditing
+                ? "transform: rotate(180deg);"
+                : ""}"
             >
-              <path d="m7 15 5 5 5-5" />
-              <path d="m7 9 5-5 5 5" />
+              <path d="m6 9 6 6 6-6" />
             </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>
-                            `,
-                          )}
-                        </div>`
-                      : html`<div
-                          class="py-6 text-center text-sm text-muted-foreground"
-                        >
-                          ${this._availablePages.length === 0
-                            ? this.labels.allPagesInNav
-                            : this.labels.noPagesFound}
-                        </div>`}
-                  </div>
-                </div>
-              `
-            : nothing}
         </div>
-      </section>
+        ${this.#renderEditPanel(item)}
+      </div>
     `;
   }
 
@@ -1007,15 +796,20 @@ export class JantNavManager extends LitElement {
     return html`
       ${this.#renderPreview()}
 
-      <div class="flex flex-col gap-3 mt-3">
-        <div class="flex items-center gap-3">
-          <label class="text-sm" for="nav-max-visible">
-            ${this.labels.maxVisibleLinks}
-          </label>
+      <div class="flex flex-col gap-4 mt-3">
+        <div class="flex items-start justify-between gap-4">
+          <div class="flex flex-col gap-0.5">
+            <label class="text-sm font-medium" for="nav-max-visible">
+              ${this.labels.maxVisibleLinks}
+            </label>
+            <p class="text-xs text-muted-foreground">
+              ${this.labels.maxVisibleLinksDescription}
+            </p>
+          </div>
           <input
             type="number"
             id="nav-max-visible"
-            class="input w-16 h-8"
+            class="input w-16 h-8 shrink-0"
             min="0"
             max="5"
             .value=${String(this.maxVisible)}
@@ -1025,15 +819,20 @@ export class JantNavManager extends LitElement {
             }}
           />
         </div>
-        <div class="flex items-center gap-3">
-          <label class="text-sm" for="nav-home-view">
-            ${this.labels.useFeaturedAsDefault}
-          </label>
+        <div class="flex items-start justify-between gap-4">
+          <div class="flex flex-col gap-0.5">
+            <label class="text-sm font-medium" for="nav-home-view">
+              ${this.labels.useFeaturedAsDefault}
+            </label>
+            <p class="text-xs text-muted-foreground">
+              ${this.labels.useFeaturedAsDefaultDescription}
+            </p>
+          </div>
           <input
             type="checkbox"
             role="switch"
             id="nav-home-view"
-            class="input"
+            class="input shrink-0"
             .checked=${this.homeDefaultView === "featured"}
             @change=${(e: Event) => {
               this.#handleHomeViewToggle(
@@ -1053,13 +852,13 @@ export class JantNavManager extends LitElement {
               ${this.labels.emptyState}
             </p>`
           : html`
-              <div id="nav-items-list" class="flex flex-col divide-y">
+              <div id="nav-items-list" class="nav-items-list">
                 ${this._items.map((item) => this.#renderItem(item))}
               </div>
             `}
       </section>
 
-      ${this.#renderAddArea()} ${this.#renderSystemToggles()}
+      ${this.#renderAddLinkSection()} ${this.#renderSystemToggles()}
     `;
   }
 }