@jant/core 0.3.35 → 0.3.36

package/src/{ui → client}/components/jant-nav-manager.ts

@@ -15,7 +15,7 @@
 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,
@@ -104,7 +104,7 @@ export class JantNavManager extends LitElement {
     this.systemNavItems = [];
     this.availablePages = [];
     this.siteName = "";
-    this.maxVisible = 3;
+    this.maxVisible = 2;
     this.homeDefaultView = "latest";
 
     this._items = [];
@@ -253,7 +253,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("/dash/settings/navigation/nav-max-visible", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ value: clamped }),
@@ -268,7 +268,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("/dash/settings/navigation/home-default-view", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ value: this.homeDefaultView }),
@@ -420,11 +420,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">
@@ -544,7 +547,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,20 +572,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.delete}
             </button>
             <button
               type="button"
-              class="btn-sm-ghost text-destructive"
-              @click=${() => this.#handleDelete(item)}
+              class="btn-sm"
+              @click=${() => this.#handleUpdate(item)}
             >
-              ${this.labels.delete}
+              ${this.labels.save}
             </button>
           </div>
         </div>
@@ -591,16 +594,8 @@ export class JantNavManager extends LitElement {
 
     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}
+        <div class="nav-item-edit">
+          <div class="flex items-center justify-between">
             <button
               type="button"
               class="btn-sm-ghost text-destructive"
@@ -608,6 +603,13 @@ export class JantNavManager extends LitElement {
             >
               ${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>
       `;
@@ -615,8 +617,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 +630,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 +654,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,31 +682,39 @@ 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>
+          <button
+            type="button"
+            class="nav-item-toggle"
+            @click=${() => this.#toggleEdit(item)}
+            aria-label=${this.labels.toggleEdit}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              style="transition: transform 0.15s; ${isEditing
+                ? "transform: rotate(180deg);"
+                : ""}"
+            >
+              <path d="m6 9 6 6 6-6" />
+            </svg>
+          </button>
         </div>
         ${this.#renderEditPanel(item)}
       </div>
@@ -842,14 +853,52 @@ export class JantNavManager extends LitElement {
                               </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>`}
+                            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>
               `
@@ -1007,15 +1056,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 +1079,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,7 +1112,7 @@ 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>
             `}

package/src/{ui → client}/components/jant-post-form.ts

@@ -6,6 +6,7 @@
  */
 
 import { LitElement } from "lit";
+import type { Editor, JSONContent } from "@tiptap/core";
 import type {
   PostFormInitial,
   PostFormLabels,
@@ -14,8 +15,10 @@ import type {
   PostSubmitDetail,
   PostFormat,
   PostStatus,
+  PostVisibility,
 } from "./post-form-types.js";
 import { renderPostForm } from "./post-form-template.js";
+import { createTiptapEditor } from "../tiptap/create-editor.js";
 
 const DEFAULT_INITIAL: PostFormInitial = {
   format: "note",
@@ -24,7 +27,7 @@ const DEFAULT_INITIAL: PostFormInitial = {
   url: "",
   quoteText: "",
   status: "published",
-  featured: false,
+  visibility: "listed",
   pinned: false,
   rating: 0,
   collectionIds: [],
@@ -51,7 +54,10 @@ const EMPTY_LABELS: PostFormLabels = {
   statusLabel: "",
   statusPublished: "",
   statusDraft: "",
-  featuredLabel: "",
+  visibilityLabel: "",
+  visibilityListed: "",
+  visibilityFeatured: "",
+  visibilityUnlisted: "",
   pinnedLabel: "",
   collectionsLabel: "",
   submitLabel: "",
@@ -93,7 +99,7 @@ export class JantPostForm extends LitElement {
     _url: { state: true },
     _quoteText: { state: true },
     _status: { state: true },
-    _featured: { state: true },
+    _visibility: { state: true },
     _pinned: { state: true },
     _rating: { state: true },
     _collectionIds: { state: true },
@@ -115,13 +121,15 @@ export class JantPostForm extends LitElement {
   declare _url: string;
   declare _quoteText: string;
   declare _status: PostStatus;
-  declare _featured: boolean;
+  declare _visibility: PostVisibility;
   declare _pinned: boolean;
   declare _rating: number;
   declare _collectionIds: number[];
   declare _mediaIds: string[];
   declare _loading: boolean;
 
+  _editor: Editor | null = null;
+  _bodyJson: JSONContent | null = null;
   #initialized = false;
 
   createRenderRoot() {
@@ -145,7 +153,7 @@ export class JantPostForm extends LitElement {
     this._url = "";
     this._quoteText = "";
     this._status = "published";
-    this._featured = false;
+    this._visibility = "listed";
     this._pinned = false;
     this._rating = 0;
     this._collectionIds = [];
@@ -197,6 +205,8 @@ export class JantPostForm extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this._editor?.destroy();
+    this._editor = null;
     this.closeMediaPicker();
   }
 
@@ -208,12 +218,46 @@ export class JantPostForm extends LitElement {
     this._url = init.url ?? "";
     this._quoteText = init.quoteText ?? "";
     this._status = init.status ?? "published";
-    this._featured = !!init.featured;
+    this._visibility = init.visibility ?? "listed";
     this._pinned = !!init.pinned;
     this._rating = init.rating ?? 0;
     this._collectionIds = [...(init.collectionIds ?? [])];
     this._mediaIds = [...(init.mediaIds ?? [])];
     this.#initialized = true;
+
+    // Parse body as Tiptap JSON if it looks like JSON
+    if (this._body && this._body.startsWith("{")) {
+      try {
+        this._bodyJson = JSON.parse(this._body) as JSONContent;
+      } catch {
+        this._bodyJson = null;
+      }
+    } else {
+      this._bodyJson = null;
+    }
+  }
+
+  initEditor() {
+    if (this._editor) return;
+    const container = this.querySelector<HTMLElement>(".post-form-tiptap-body");
+    if (!container) return;
+
+    this._editor = createTiptapEditor({
+      element: container,
+      placeholder: this.labels.bodyPlaceholder ?? "Write something…",
+      content: this._bodyJson,
+      onUpdate: (json) => {
+        this._bodyJson = json;
+        this._body = JSON.stringify(json);
+      },
+    });
+  }
+
+  protected updated(changed: Map<string, unknown>) {
+    super.updated(changed);
+    if (!this._editor) {
+      this.initEditor();
+    }
   }
 
   handleInput(field: "_title" | "_body" | "_url" | "_quoteText", e: Event) {
@@ -253,15 +297,20 @@ export class JantPostForm extends LitElement {
   handleSubmit(e: Event) {
     e.preventDefault();
     if (this._loading || !this.action) return;
+    // Use Tiptap JSON for body
+    const bodyValue = this._bodyJson
+      ? JSON.stringify(this._bodyJson)
+      : this._body;
+
     const detail: PostSubmitDetail = {
       endpoint: this.action,
       isEdit: this.isEdit,
       data: {
         format: this._format,
         title: this._title.trim(),
-        body: this._body,
+        body: bodyValue,
         status: this._status,
-        featured: this._featured,
+        visibility: this._visibility,
         pinned: this._pinned,
         url: this._url.trim(),
         quoteText: this._quoteText.trim(),

package/src/{ui → client}/components/jant-settings-general.ts

@@ -170,7 +170,7 @@ export class JantSettingsGeneral extends LitElement {
       new CustomEvent("jant:settings-save", {
         bubbles: true,
         detail: {
-          endpoint: "/dash/settings",
+          endpoint: "/dash/settings/general",
           data: {
             siteName: this._siteName,
             siteDescription: this._siteDescription,
@@ -203,7 +203,7 @@ export class JantSettingsGeneral extends LitElement {
       new CustomEvent("jant:settings-save", {
         bubbles: true,
         detail: {
-          endpoint: "/dash/settings/seo",
+          endpoint: "/dash/settings/general/seo",
           data: { noindex: this._noindex ? "" : "true" },
           section: "seo",
         },

package/src/{ui → client}/components/nav-manager-types.ts

@@ -51,11 +51,14 @@ export interface NavManagerLabels {
   addLink: string;
   addLinkDescription: string;
   allPagesInNav: string;
+  createPage: string;
   urlPlaceholder: string;
   labelAndUrlRequired: string;
   maxVisibleLinks: string;
+  maxVisibleLinksDescription: string;
   maxVisibleSaved: string;
   useFeaturedAsDefault: string;
+  useFeaturedAsDefaultDescription: string;
   homeViewSaved: string;
   latest: string;
   featured: string;

package/src/{ui → client}/components/post-form-template.ts

@@ -113,12 +113,9 @@ export function renderPostForm(component: JantPostForm) {
 
       <div class="field">
         <label class="label">${component.labels.bodyLabel}</label>
-        <textarea
-          class="textarea min-h-32"
-          placeholder=${component.labels.bodyPlaceholder}
-          .value=${component._body}
-          @input=${(e: Event) => component.handleInput("_body", e)}
-        ></textarea>
+        <div
+          class="post-form-tiptap-body compose-tiptap-body border rounded-lg p-3 min-h-32"
+        ></div>
       </div>
 
       <div class="field">
@@ -173,33 +170,40 @@ export function renderPostForm(component: JantPostForm) {
         </select>
       </div>
 
-      <div class="flex gap-4">
-        <label class="flex items-center gap-2 text-sm">
-          <input
-            type="checkbox"
-            class="checkbox"
-            .checked=${component._featured}
-            @change=${(e: Event) => {
-              const target = e.target as HTMLInputElement;
-              component._featured = target.checked;
-            }}
-          />
-          ${component.labels.featuredLabel}
-        </label>
-        <label class="flex items-center gap-2 text-sm">
-          <input
-            type="checkbox"
-            class="checkbox"
-            .checked=${component._pinned}
-            @change=${(e: Event) => {
-              const target = e.target as HTMLInputElement;
-              component._pinned = target.checked;
-            }}
-          />
-          ${component.labels.pinnedLabel}
-        </label>
+      <div class="field">
+        <label class="label">${component.labels.visibilityLabel}</label>
+        <select
+          class="select"
+          .value=${component._visibility}
+          @change=${(e: Event) => {
+            const target = e.target as HTMLSelectElement;
+            component._visibility =
+              (target.value as typeof component._visibility) ?? "listed";
+          }}
+        >
+          <option value="listed">${component.labels.visibilityListed}</option>
+          <option value="featured">
+            ${component.labels.visibilityFeatured}
+          </option>
+          <option value="unlisted">
+            ${component.labels.visibilityUnlisted}
+          </option>
+        </select>
       </div>
 
+      <label class="flex items-center gap-2 text-sm">
+        <input
+          type="checkbox"
+          class="checkbox"
+          .checked=${component._pinned}
+          @change=${(e: Event) => {
+            const target = e.target as HTMLInputElement;
+            component._pinned = target.checked;
+          }}
+        />
+        ${component.labels.pinnedLabel}
+      </label>
+
       ${renderCollections(component)}
 
       <div class="flex gap-2">

package/src/{ui → client}/components/post-form-types.ts

@@ -4,6 +4,7 @@
 
 export type PostFormat = "note" | "link" | "quote";
 export type PostStatus = "published" | "draft";
+export type PostVisibility = "listed" | "featured" | "unlisted";
 
 export interface PostFormLabels {
   formatLabel: string;
@@ -25,7 +26,10 @@ export interface PostFormLabels {
   statusLabel: string;
   statusPublished: string;
   statusDraft: string;
-  featuredLabel: string;
+  visibilityLabel: string;
+  visibilityListed: string;
+  visibilityFeatured: string;
+  visibilityUnlisted: string;
   pinnedLabel: string;
   collectionsLabel: string;
   submitLabel: string;
@@ -44,7 +48,7 @@ export interface PostFormInitial {
   url: string;
   quoteText: string;
   status: PostStatus;
-  featured: boolean;
+  visibility: PostVisibility;
   pinned: boolean;
   rating: number;
   collectionIds: number[];
@@ -72,7 +76,7 @@ export interface PostSubmitDetail {
     title?: string;
     body?: string;
     status: PostStatus;
-    featured: boolean;
+    visibility: PostVisibility;
     pinned: boolean;
     url?: string;
     quoteText?: string;