@jant/core 0.6.15 → 0.7.0

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

@@ -1,30 +1,28 @@
 /**
- * Collection Form Component
+ * Collection Quick-Create Form
  *
- * Handles create/edit collection form interactions for:
- * - title, slug, description, and sort order
- * - quick-create slug preview/editing
- * - dispatching `jant:collection-submit` for the bridge layer
+ * A title and an address, nothing else — the two things a collection cannot be
+ * created without. It exists for the places where creating a collection is a
+ * step inside another task: picking one while composing, or putting one in the
+ * navigation. Everything a collection *can* have is decided in the collection
+ * dialog, which is where an author who came to make a collection already is.
+ *
+ * Submitting dispatches `jant:collection-submit`; the surrounding dialog owns
+ * the request and what happens after it.
  *
  * Light DOM only — BaseCoat and Tailwind classes apply directly.
  */
 
 import { LitElement, html, nothing } from "lit";
 import type { PropertyValueMap } from "lit";
-import type { Editor } from "@tiptap/core";
 import {
   MAX_COLLECTION_SLUG_LENGTH,
   MAX_COLLECTION_TITLE_LENGTH,
-  type CollectionSortOrder,
 } from "../../types.js";
 import { getCollectionPagePath } from "../../lib/collection-paths.js";
 import { getSlugValidationIssue, truncateSlug } from "../../lib/slug-format.js";
 import { slugify } from "../lazy-slugify.js";
 import { publicPath } from "../runtime-paths.js";
-import {
-  createSettingsEditor,
-  jsonToMarkdown,
-} from "../tiptap/create-editor.js";
 import type {
   CollectionFormInitial,
   CollectionFormLabels,
@@ -36,14 +34,9 @@ export class JantCollectionForm extends LitElement {
     labels: { type: Object },
     initial: { type: Object },
     action: { type: String },
-    cancelHref: { type: String, attribute: "cancel-href" },
-    isEdit: { type: Boolean, attribute: "is-edit" },
-    variant: { type: String },
 
     _title: { state: true },
     _slug: { state: true },
-    _description: { state: true },
-    _sortOrder: { state: true },
     _showSlugEditor: { state: true },
     _slugEdited: { state: true },
     _suggestedSlug: { state: true },
@@ -53,21 +46,15 @@ export class JantCollectionForm extends LitElement {
   declare labels: CollectionFormLabels;
   declare initial: CollectionFormInitial;
   declare action: string;
-  declare cancelHref: string;
-  declare isEdit: boolean;
-  declare variant: "full" | "quick";
 
   declare _title: string;
   declare _slug: string;
-  declare _description: string;
-  declare _sortOrder: CollectionSortOrder;
   declare _showSlugEditor: boolean;
   declare _slugEdited: boolean;
   declare _suggestedSlug: string;
   declare _loading: boolean;
 
   #initialized = false;
-  private _descEditor: Editor | null = null;
   #boundKeydown: ((e: KeyboardEvent) => void) | null = null;
 
   createRenderRoot() {
@@ -78,21 +65,11 @@ export class JantCollectionForm extends LitElement {
   constructor() {
     super();
     this.labels = {} as CollectionFormLabels;
-    this.initial = {
-      title: "",
-      slug: "",
-      description: "",
-      sortOrder: "newest",
-    };
+    this.initial = { title: "", slug: "" };
     this.action = "";
-    this.cancelHref = "/";
-    this.isEdit = false;
-    this.variant = "full";
 
     this._title = "";
     this._slug = "";
-    this._description = "";
-    this._sortOrder = "newest";
     this._showSlugEditor = false;
     this._slugEdited = false;
     this._suggestedSlug = "";
@@ -117,8 +94,6 @@ export class JantCollectionForm extends LitElement {
       this.#boundKeydown = null;
     }
     super.disconnectedCallback();
-    this._descEditor?.destroy();
-    this._descEditor = null;
   }
 
   protected update(
@@ -144,46 +119,15 @@ export class JantCollectionForm extends LitElement {
     this._title = this.initial.title ?? "";
     this._slug = this.initial.slug ?? "";
     this._suggestedSlug = this.initial.slug ?? "";
-    this._description = this.initial.description ?? "";
-    this._sortOrder = this.initial.sortOrder ?? "newest";
-    this._slugEdited = this.isEdit || Boolean(this._slug.trim());
-    this._showSlugEditor = this.variant !== "quick";
-
-    if (this.variant !== "quick") {
-      this.updateComplete.then(() => this.#initDescEditor());
-    }
-  }
-
-  #initDescEditor() {
-    const container = this.querySelector<HTMLElement>(
-      "[data-collection-desc-editor]",
-    );
-    if (!container || this._descEditor) return;
-
-    this._descEditor = createSettingsEditor({
-      element: container,
-      placeholder: this.isEdit ? undefined : this.labels.descriptionPlaceholder,
-      content: this._description || undefined,
-      onUpdate: (markdown) => {
-        this._description = markdown;
-      },
-    });
-
-    // Normalize initial markdown through the editor round-trip
-    this._description = jsonToMarkdown(this._descEditor.getJSON());
-
-    const pm = container.querySelector<HTMLElement>(".ProseMirror");
-    if (pm) {
-      pm.style.outline = "none";
-      pm.style.minHeight = "5rem";
-    }
+    this._slugEdited = Boolean(this._slug.trim());
+    this._showSlugEditor = false;
   }
 
   async #handleTitleInput(event: Event) {
     const target = event.target as HTMLInputElement;
     this._title = target.value;
 
-    if (this.isEdit || this._slugEdited) {
+    if (this._slugEdited) {
       return;
     }
 
@@ -237,9 +181,7 @@ export class JantCollectionForm extends LitElement {
     if (!this._suggestedSlug) return;
     this._slug = this._suggestedSlug;
     this._slugEdited = false;
-    if (this.variant === "quick") {
-      this._showSlugEditor = false;
-    }
+    this._showSlugEditor = false;
   }
 
   #getCollectionLinkPreview(): string {
@@ -276,7 +218,7 @@ export class JantCollectionForm extends LitElement {
     </p>`;
   }
 
-  #renderQuickSlugControls() {
+  #renderSlugControls() {
     const hasPreview = Boolean(this._slug.trim());
     const canResetToTitle =
       this._showSlugEditor &&
@@ -293,17 +235,19 @@ export class JantCollectionForm extends LitElement {
           <div class="field">
             <div class="collection-quick-link-row">
               <label class="label mb-0">${this.labels.slugLabel}</label>
-              ${canResetToTitle
-                ? html`
-                    <button
-                      type="button"
-                      class="collection-quick-link-action"
-                      @click=${() => this.#resetSlugToSuggested()}
-                    >
-                      ${this.labels.resetSlugLabel}
-                    </button>
-                  `
-                : nothing}
+              ${
+                canResetToTitle
+                  ? html`
+                      <button
+                        type="button"
+                        class="collection-quick-link-action"
+                        @click=${() => this.#resetSlugToSuggested()}
+                      >
+                        ${this.labels.resetSlugLabel}
+                      </button>
+                    `
+                  : nothing
+              }
             </div>
             <input
               type="text"
@@ -313,9 +257,9 @@ export class JantCollectionForm extends LitElement {
               pattern="[a-z0-9]+(?:-[a-z0-9]+)*"
               maxlength=${MAX_COLLECTION_SLUG_LENGTH}
               .value=${this._slug}
-              aria-invalid=${this.#getSlugValidationMessage()
-                ? "true"
-                : "false"}
+              aria-invalid=${
+                this.#getSlugValidationMessage() ? "true" : "false"
+              }
               placeholder="my-collection"
               @input=${(event: Event) => this.#handleSlugInput(event)}
             />
@@ -369,9 +313,7 @@ export class JantCollectionForm extends LitElement {
     }
 
     if (!slug || this.#getSlugValidationMessage()) {
-      if (this.variant === "quick" && !this._showSlugEditor) {
-        this.#showSlugEditor();
-      }
+      this.#showSlugEditor();
       this.updateComplete.then(() => {
         this.querySelector<HTMLInputElement>(
           "[data-collection-slug-input]",
@@ -382,17 +324,7 @@ export class JantCollectionForm extends LitElement {
 
     const detail: CollectionSubmitDetail = {
       endpoint: this.action,
-      isEdit: this.isEdit,
-      data: {
-        title,
-        slug,
-        description:
-          this.variant === "quick"
-            ? undefined
-            : this._description.trim() || undefined,
-        sortOrder:
-          this.variant === "quick" ? undefined : this._sortOrder || undefined,
-      },
+      data: { title, slug },
     };
 
     this.dispatchEvent(
@@ -404,141 +336,30 @@ export class JantCollectionForm extends LitElement {
   }
 
   render() {
-    const isQuick = this.variant === "quick";
-    const formClass = isQuick
-      ? "flex flex-col gap-4"
-      : "collection-editor-form";
-
     return html`
       <form
-        class=${formClass}
+        class="flex flex-col gap-4"
         @submit=${(event: Event) => void this.#handleSubmit(event)}
       >
-        ${isQuick
-          ? html`
-              <div class="field">
-                <label class="label">${this.labels.titleLabel}</label>
-                <input
-                  type="text"
-                  class="input"
-                  data-collection-title-input
-                  required
-                  maxlength=${MAX_COLLECTION_TITLE_LENGTH}
-                  .value=${this._title}
-                  placeholder=${this.isEdit
-                    ? nothing
-                    : this.labels.titlePlaceholder}
-                  @input=${(event: Event) => void this.#handleTitleInput(event)}
-                />
-              </div>
-
-              ${this.#renderQuickSlugControls()}
-            `
-          : html`
-              <div class="collection-editor-primary-grid">
-                <div class="field collection-editor-title-field">
-                  <label class="label">${this.labels.titleLabel}</label>
-                  <input
-                    type="text"
-                    class="input"
-                    data-collection-title-input
-                    required
-                    maxlength=${MAX_COLLECTION_TITLE_LENGTH}
-                    .value=${this._title}
-                    placeholder=${this.isEdit
-                      ? nothing
-                      : this.labels.titlePlaceholder}
-                    @input=${(event: Event) =>
-                      void this.#handleTitleInput(event)}
-                  />
-                </div>
-
-                <div class="field collection-editor-slug-field">
-                  <label class="label">${this.labels.slugLabel}</label>
-                  <input
-                    type="text"
-                    class="input"
-                    data-collection-slug-input
-                    required
-                    pattern="[a-z0-9]+(?:-[a-z0-9]+)*"
-                    maxlength=${MAX_COLLECTION_SLUG_LENGTH}
-                    .value=${this._slug}
-                    aria-invalid=${this.#getSlugValidationMessage()
-                      ? "true"
-                      : "false"}
-                    placeholder=${this.isEdit ? nothing : "my-collection"}
-                    @input=${(event: Event) => this.#handleSlugInput(event)}
-                  />
-                  ${this.#renderSlugHelper()}
-                </div>
-              </div>
-
-              <div class="collection-editor-secondary-grid">
-                <div class="field collection-editor-description-field">
-                  <label class="label">${this.labels.descriptionLabel}</label>
-                  <div
-                    class="settings-tiptap-editor"
-                    data-collection-desc-editor
-                  ></div>
-                </div>
-
-                <div class="field collection-editor-sort-field">
-                  <label class="label">${this.labels.sortOrderLabel}</label>
-                  <select
-                    class="select"
-                    .value=${this._sortOrder}
-                    @change=${(event: Event) => {
-                      const target = event.target as HTMLSelectElement;
-                      this._sortOrder = target.value as CollectionSortOrder;
-                    }}
-                  >
-                    <option value="newest">${this.labels.sortNewest}</option>
-                    <option value="oldest">${this.labels.sortOldest}</option>
-                    <option value="rating_desc">
-                      ${this.labels.sortRatingDesc}
-                    </option>
-                  </select>
-                </div>
-              </div>
-            `}
-        ${isQuick
-          ? html`
-              <button type="submit" class="sr-only">
-                ${this.labels.quickSubmitLabel}
-              </button>
-            `
-          : html`
-              <div class="collection-editor-actions">
-                <button
-                  type="submit"
-                  class="btn collection-editor-submit"
-                  ?disabled=${this._loading}
-                >
-                  ${this._loading
-                    ? html`<svg
-                        class="animate-spin size-4"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        role="status"
-                      >
-                        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-                      </svg>`
-                    : nothing}
-                  ${this.labels.submitLabel}
-                </button>
-                <a
-                  href=${this.cancelHref}
-                  class="btn-outline collection-editor-cancel"
-                >
-                  ${this.labels.cancelLabel}
-                </a>
-              </div>
-            `}
+        <div class="field">
+          <label class="label">${this.labels.titleLabel}</label>
+          <input
+            type="text"
+            class="input"
+            data-collection-title-input
+            required
+            maxlength=${MAX_COLLECTION_TITLE_LENGTH}
+            .value=${this._title}
+            placeholder=${this.labels.titlePlaceholder}
+            @input=${(event: Event) => void this.#handleTitleInput(event)}
+          />
+        </div>
+
+        ${this.#renderSlugControls()}
+
+        <button type="submit" class="sr-only">
+          ${this.labels.quickSubmitLabel}
+        </button>
       </form>
     `;
   }

package/src/client/components/jant-command-palette.ts

@@ -13,6 +13,8 @@ import { classMap } from "lit/directives/class-map.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 import { NAVIGATION_SETTINGS_PATH } from "../../lib/settings-paths.js";
 import { openNewCompose } from "../compose-launch.js";
+import { isFullUrl, toInternalPath } from "../../lib/url.js";
+import { navPath, sitePathPrefix } from "../runtime-paths.js";
 import { getBestFieldSearchRank, normalizeSearch } from "../search-rank.js";
 
 // ---------------------------------------------------------------------------
@@ -22,7 +24,8 @@ import { getBestFieldSearchRank, normalizeSearch } from "../search-rank.js";
 interface PaletteItem {
   title: string;
   path: string;
-  type: "post" | "collection" | "system";
+  type: "post" | "collection" | "smart_collection" | "system";
+  status?: "draft" | "published";
 }
 
 interface CommandItem {
@@ -56,6 +59,9 @@ const ICONS = {
   post: `<svg ${ICON_ATTRS}><path d="M8 2v4"/><path d="M12 2v4"/><path d="M16 2v4"/><rect width="16" height="18" x="4" y="4" rx="2"/><path d="M8 10h6"/><path d="M8 14h8"/><path d="M8 18h5"/></svg>`,
   // clipboard/collection icon from PostFooter
   collection: `<svg ${ICON_ATTRS} viewBox="0 0 16 16" stroke-width="1.35"><rect x="3" y="5.05" width="10" height="8.15" rx="2.2"/><path d="M5.1 5.05V4.2a1.1 1.1 0 0 1 1.1-1.1h3.6a1.1 1.1 0 0 1 1.1 1.1v.85"/></svg>`,
+  // funnel — the same icon the directory and the page use, so a smart
+  // collection reads as a collection with a rule behind it everywhere at once.
+  smart_collection: `<svg ${ICON_ATTRS}><path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"/></svg>`,
   // settings gear from SettingsRootContent
   system: `<svg ${ICON_ATTRS}><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>`,
   // zap/lightning for commands
@@ -71,6 +77,29 @@ export function getPathCommandTarget(query: string): string {
   return stripped ? `/${stripped}` : "/";
 }
 
+/**
+ * The local path a pasted full URL points at, when it points at this site.
+ *
+ * Copying an address out of the browser bar and dropping it in the palette
+ * should go there, the same as typing `/`. Someone else's URL is left to
+ * navigate mode, where it falls through to a full-text search — looking for
+ * the post where you linked something is the likelier intent.
+ *
+ * @param query - Raw palette query
+ * @returns Internal path with its query string, or null when not our URL
+ */
+export function getPastedAddressTarget(query: string): string | null {
+  const trimmed = query.trim();
+  if (!isFullUrl(trimmed)) return null;
+
+  return toInternalPath(trimmed, {
+    siteOrigins: [window.location.origin],
+    sitePathPrefix: sitePathPrefix(),
+    // A pasted `/en/about` was copied from that view and belongs there.
+    keepQuery: true,
+  });
+}
+
 export function getPathCommandSearchQuery(query: string): string {
   return query
     .trim()
@@ -244,6 +273,7 @@ export class JantCommandPalette extends LitElement {
     if (first === ">" || first === "＞") return "command";
     if (first === "?" || first === "？") return "search";
     if (first === "/" || first === "／") return "path";
+    if (getPastedAddressTarget(this._query)) return "path";
     return "navigate";
   }
 
@@ -324,8 +354,11 @@ export class JantCommandPalette extends LitElement {
     }
 
     if (mode === "path") {
-      const target = getPathCommandTarget(this._query);
-      const searchQuery = getPathCommandSearchQuery(this._query);
+      const pasted = getPastedAddressTarget(this._query);
+      const target = pasted ?? getPathCommandTarget(this._query);
+      // A pasted URL is already an answer; only a typed path is also plausible
+      // as search words.
+      const searchQuery = pasted ? "" : getPathCommandSearchQuery(this._query);
       const items: DisplayItem[] = [
         {
           label: `Go to ${target}`,
@@ -351,7 +384,7 @@ export class JantCommandPalette extends LitElement {
     const q = normalizeSearch(this._query);
     const navItems: DisplayItem[] = this.#navigateItems.map((item) => ({
       label: item.title,
-      secondary: item.path,
+      secondary: item.status === "draft" ? `Draft · ${item.path}` : item.path,
       icon: ICONS[item.type],
     }));
 
@@ -378,7 +411,11 @@ export class JantCommandPalette extends LitElement {
   #executeSearch(query: string) {
     saveHistory(SEARCH_HISTORY_KEY, query);
     this.close();
-    window.location.href = `/search?q=${encodeURIComponent(query)}`;
+    // navPath, not publicPath: a search run from inside /en belongs in /en.
+    // The palette jumps to settings pages and posts through this same code
+    // path, so it cannot assert the kind of any one target — navPath decides
+    // per target and leaves the site-wide ones alone.
+    window.location.href = navPath(`/search?q=${encodeURIComponent(query)}`);
   }
 
   #executeItem(index: number) {
@@ -407,7 +444,7 @@ export class JantCommandPalette extends LitElement {
       if (displayItem?.pathTarget) {
         saveHistory(NAV_HISTORY_KEY, displayItem.pathTarget);
         this.close();
-        window.location.href = displayItem.pathTarget;
+        window.location.href = navPath(displayItem.pathTarget);
         return;
       }
 
@@ -429,11 +466,19 @@ export class JantCommandPalette extends LitElement {
       saveHistory(NAV_HISTORY_KEY, item.path);
       this.close();
       if (item.type === "system") {
-        window.location.href = item.path;
+        window.location.href = navPath(item.path);
       } else if (item.type === "collection") {
-        window.location.href = `/collections/${item.path}`;
+        window.location.href = navPath(`/collections/${item.path}`);
+      } else if (item.type === "smart_collection") {
+        // Straight to its address. `/collections/{slug}` redirects for a
+        // collection but names nothing for a smart collection.
+        window.location.href = navPath(`/${item.path}`);
       } else {
-        window.location.href = `/${item.path}`;
+        window.location.href = navPath(
+          item.status === "draft"
+            ? `/preview/${item.path}?edit=1`
+            : `/${item.path}`,
+        );
       }
     }
   }
@@ -548,19 +593,23 @@ export class JantCommandPalette extends LitElement {
         <span class="command-palette-result-icon">${unsafeSVG(item.icon)}</span>
         <span class="command-palette-result-body">
           <span class="command-palette-result-title">${item.label}</span>
-          ${item.secondary
-            ? html`<span class="command-palette-result-path"
-                >${item.secondary}</span
-              >`
-            : nothing}
+          ${
+            item.secondary
+              ? html`<span class="command-palette-result-path"
+                  >${item.secondary}</span
+                >`
+              : nothing
+          }
         </span>
-        ${item.shortcut
-          ? html`<kbd
-              class="command-palette-result-shortcut"
-              aria-label="Command or Control plus Enter"
-              >${item.shortcut}</kbd
-            >`
-          : nothing}
+        ${
+          item.shortcut
+            ? html`<kbd
+                class="command-palette-result-shortcut"
+                aria-label="Command or Control plus Enter"
+                >${item.shortcut}</kbd
+              >`
+            : nothing
+        }
       </div>
     `;
   }
@@ -600,39 +649,47 @@ export class JantCommandPalette extends LitElement {
               role="combobox"
               aria-expanded="true"
               aria-controls="command-palette-results"
-              aria-activedescendant=${items.length > 0
-                ? `command-palette-item-${this._selectedIndex}`
-                : ""}
+              aria-activedescendant=${
+                items.length > 0
+                  ? `command-palette-item-${this._selectedIndex}`
+                  : ""
+              }
               autocomplete="off"
               spellcheck="false"
             />
-            ${this._loading
-              ? html`<span class="command-palette-spinner"></span>`
-              : nothing}
+            ${
+              this._loading
+                ? html`<span class="command-palette-spinner"></span>`
+                : nothing
+            }
           </div>
 
-          ${items.length > 0
-            ? html`
-                <div
-                  id="command-palette-results"
-                  class="command-palette-results-container"
-                  role="listbox"
-                >
-                  ${resultItems.length > 0
-                    ? html`<div class="command-palette-results">
-                        ${resultItems.map(({ item, index }) =>
-                          this.#renderItem(item, index),
-                        )}
-                      </div>`
-                    : nothing}
-                  ${footerItems.map(({ item, index }) =>
-                    this.#renderItem(item, index, true),
-                  )}
-                </div>
-              `
-            : this._query.trim() && !this._loading
-              ? html`<div class="command-palette-empty">No results</div>`
-              : nothing}
+          ${
+            items.length > 0
+              ? html`
+                  <div
+                    id="command-palette-results"
+                    class="command-palette-results-container"
+                    role="listbox"
+                  >
+                    ${
+                      resultItems.length > 0
+                        ? html`<div class="command-palette-results">
+                            ${resultItems.map(({ item, index }) =>
+                              this.#renderItem(item, index),
+                            )}
+                          </div>`
+                        : nothing
+                    }
+                    ${footerItems.map(({ item, index }) =>
+                      this.#renderItem(item, index, true),
+                    )}
+                  </div>
+                `
+              : this._query.trim() && !this._loading
+                ? html`<div class="command-palette-empty">No results</div>`
+                : nothing
+          }
         </div>
       </dialog>
     `;