@jant/core 0.6.10 → 0.6.12

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

@@ -15,7 +15,11 @@ vi.mock("sortablejs", () => ({
   },
 }));
 
-import type { NavManagerItem, NavManagerLabels } from "../nav-manager-types.js";
+import type {
+  NavManagerItem,
+  NavManagerLabels,
+  NavManagerSuggestedLink,
+} from "../nav-manager-types.js";
 import "../jant-nav-manager.js";
 import type { JantNavManager } from "../jant-nav-manager.js";
 
@@ -43,6 +47,10 @@ const labels: NavManagerLabels = {
   addLinkDescription: "Add a custom nav link.",
   urlPlaceholder: "/about",
   labelAndUrlRequired: "Add a label and URL.",
+  suggestedLinks: "Suggested links",
+  suggestedLinksDescription: "Add common destinations.",
+  addSuggestedLink: "Add",
+  suggestedLinkAdded: "Link added to navigation.",
   headerSection: "Header",
   moreSection: "More",
   moreEmptyHint: "Move links here to hide them under More.",
@@ -84,6 +92,18 @@ const items: NavManagerItem[] = [
   },
 ];
 
+const suggestedLinks: NavManagerSuggestedLink[] = [
+  {
+    key: "now",
+    label: "Now",
+    url: "/now",
+    targetType: "collection",
+    targetLabel: "Collection",
+    navItemType: "collection",
+    collectionId: "col_now",
+  },
+];
+
 function requireElement<T>(value: T | null, message: string): T {
   if (!value) {
     throw new Error(message);
@@ -133,6 +153,7 @@ async function createElement(): Promise<JantNavManager> {
   el.labels = labels;
   el.items = items;
   el.systemNavItems = [];
+  el.suggestedLinks = [];
   el.siteName = "Test Site";
   document.body.appendChild(el);
   await el.updateComplete;
@@ -251,6 +272,61 @@ describe("JantNavManager", () => {
     expect(popover.getAttribute("aria-hidden")).toBe("true");
   });
 
+  it("adds a suggested collection link through the nav items API", async () => {
+    const el = await createElement();
+    el.suggestedLinks = suggestedLinks;
+    el.requestUpdate();
+    await el.updateComplete;
+
+    const addButton = requireElement(
+      el.querySelector<HTMLButtonElement>(".nav-suggestion-item button"),
+      "expected suggested link add button",
+    );
+    expect(el.textContent).toContain("Now");
+    expect(el.textContent).toContain("/now · Collection");
+
+    const created: NavManagerItem = {
+      id: "nav-now",
+      type: "collection",
+      collectionId: "col_now",
+      label: "Now",
+      url: "/now",
+      placement: "header",
+    };
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 201,
+      json: async () => created,
+    });
+    vi.stubGlobal("fetch", fetchMock);
+
+    addButton.click();
+    await Promise.resolve();
+    await Promise.resolve();
+    await el.updateComplete;
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      "/api/nav-items",
+      expect.objectContaining({
+        method: "POST",
+        body: JSON.stringify({
+          type: "collection",
+          collectionId: "col_now",
+          placement: "header",
+        }),
+      }),
+    );
+    expect(
+      getListIds(
+        requireElement(
+          el.querySelector<HTMLElement>("#nav-items-header"),
+          "expected header nav list",
+        ),
+      ),
+    ).toContain("nav-now");
+    expect(el.querySelector(".nav-suggestion-item")).toBeNull();
+  });
+
   it("confirms before dispatching nav deletion", async () => {
     const el = await createElement();
     const deleteHandler = vi.fn();

package/src/client/components/__tests__/jant-settings-avatar.test.ts

@@ -32,6 +32,12 @@ const labels: SettingsLabels = {
   uploadError: "Upload failed.",
   general: "General",
   site: "Site",
+  aboutPage: "About page",
+  aboutPagePrompt: "Want to write a fuller introduction?",
+  aboutPageConflict:
+    "/about is already used. Rename that item before creating an About page.",
+  createAboutPage: "Create About page",
+  editAboutPage: "Edit About page",
   languageAndTime: "Language & Time",
   home: "Home",
   search: "Search",

package/src/client/components/__tests__/jant-settings-general.test.ts

@@ -7,6 +7,7 @@ import type {
   SettingsCjkFont,
   SettingsDashboardLanguage,
   SettingsSaveDetail,
+  SettingsAboutPageStatus,
 } from "../settings-types.js";
 import { MAX_SITE_NAME_LENGTH } from "../../../types.js";
 import "../jant-settings-general.js";
@@ -76,6 +77,12 @@ const labels: SettingsLabels = {
   uploadError: "Upload failed.",
   general: "General",
   site: "Site",
+  aboutPage: "About page",
+  aboutPagePrompt: "Want to write a fuller introduction?",
+  aboutPageConflict:
+    "/about is already used. Rename that item before creating an About page.",
+  createAboutPage: "Create About page",
+  editAboutPage: "Edit About page",
   languageAndTime: "Language & Time",
   home: "Home",
   search: "Search",
@@ -167,6 +174,7 @@ function findCheckboxByLabel(
 async function createElement(
   opts: {
     demoMode?: boolean;
+    aboutPage?: SettingsAboutPageStatus;
   } = {},
 ): Promise<JantSettingsGeneral> {
   const el = document.createElement(
@@ -182,6 +190,14 @@ async function createElement(
   el.latestFeedUrl = "/latest/feed";
   el.featuredFeedUrl = "/featured/feed";
   el.archiveFeedUrl = "/archive/feed";
+  el.aboutPage =
+    opts.aboutPage ??
+    ({
+      state: "missing",
+      path: "/about",
+    } satisfies SettingsAboutPageStatus);
+  el.aboutEditUrl = "/about?edit=1";
+  el.aboutCreateUrl = "/settings/general/about-page";
   el.demoMode = opts.demoMode ?? false;
   document.body.appendChild(el);
   await el.updateComplete;
@@ -209,6 +225,61 @@ describe("JantSettingsGeneral", () => {
       labels.home,
       labels.search,
     ]);
+
+    const siteSection = requireElement(
+      findSectionByHeading(el, labels.site),
+      "expected site section",
+    );
+    expect(siteSection.querySelector("[data-about-page-row]")).not.toBeNull();
+  });
+
+  it("renders a create About form from the missing About prompt", async () => {
+    const el = await createElement();
+    const aboutRow = requireElement(
+      el.querySelector<HTMLElement>("[data-about-page-row]"),
+      "expected About page row",
+    );
+    const form = requireElement(
+      aboutRow.querySelector<HTMLFormElement>("form"),
+      "expected create About page form",
+    );
+    const button = requireElement(
+      form.querySelector<HTMLButtonElement>("button"),
+      "expected create About page button",
+    );
+
+    expect(aboutRow.textContent).toContain(labels.aboutPagePrompt);
+    expect(form.method).toBe("post");
+    expect(form.action).toContain("/settings/general/about-page");
+    expect(button.textContent).toContain(labels.createAboutPage);
+  });
+
+  it("renders an edit link when the About page exists", async () => {
+    const el = await createElement({
+      aboutPage: {
+        state: "ready",
+        path: "/about",
+        post: {
+          id: "pst_about000000000000000000000",
+          title: "About",
+          status: "published",
+          visibility: "latest_hidden",
+        },
+      },
+    });
+
+    const aboutRow = requireElement(
+      el.querySelector<HTMLElement>("[data-about-page-row]"),
+      "expected About page row",
+    );
+    const editLink = requireElement(
+      aboutRow.querySelector<HTMLAnchorElement>("a"),
+      "expected About edit link",
+    );
+
+    expect(aboutRow.textContent).toContain(labels.aboutPagePrompt);
+    expect(editLink.textContent).toContain(labels.editAboutPage);
+    expect(editLink.href).toContain("/about?edit=1");
   });
 
   it("renders form fields with initial values", async () => {

package/src/client/components/compose-types.ts

@@ -145,6 +145,10 @@ export interface ComposeLabels {
   addMore: string;
   removeAttachment: string;
   uploading: string;
+  /** Toast when exactly one pasted remote image couldn't be rehosted. */
+  imageNotRehosted?: string;
+  /** Toast when several pasted remote images couldn't be rehosted (uses a {count} placeholder). */
+  imagesNotRehosted?: string;
   loadingPost: string;
   loadPostFailed: string;
   published: string;

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

@@ -5,6 +5,7 @@
  *   - Navigate (default): filter preloaded posts, collections, system pages
  *   - Command (`>` prefix): run actions like New Post
  *   - Search (`?` prefix): redirects to /search?q=... on Enter
+ *   - Path (`/` prefix): opens a local path, with search as the second option
  */
 
 import { LitElement, html, nothing } from "lit";
@@ -45,10 +46,24 @@ const ICONS = {
   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
   command: `<svg ${ICON_ATTRS}><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"/></svg>`,
+  // corner-down-right for local path navigation
+  path: `<svg ${ICON_ATTRS}><polyline points="15 10 20 15 15 20"/><path d="M4 4v7a4 4 0 0 0 4 4h12"/></svg>`,
   // search
   search: `<svg ${ICON_ATTRS}><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>`,
 };
 
+export function getPathCommandTarget(query: string): string {
+  const stripped = query.trim().replace(/^[/／]+/, "");
+  return stripped ? `/${stripped}` : "/";
+}
+
+export function getPathCommandSearchQuery(query: string): string {
+  return query
+    .trim()
+    .replace(/^[/／]+/, "")
+    .trim();
+}
+
 // ---------------------------------------------------------------------------
 // History helpers
 // ---------------------------------------------------------------------------
@@ -208,12 +223,13 @@ export class JantCommandPalette extends LitElement {
   // Mode detection
   // -----------------------------------------------------------------------
 
-  get #mode(): "navigate" | "command" | "search" {
-    // Accept both halfwidth (>, ?) and fullwidth (＞, ？) prefixes so CJK
+  get #mode(): "navigate" | "command" | "search" | "path" {
+    // Accept both halfwidth and fullwidth prefixes so CJK
     // users don't have to toggle their IME to enter command/search mode.
     const first = this._query.charAt(0);
     if (first === ">" || first === "＞") return "command";
     if (first === "?" || first === "？") return "search";
+    if (first === "/" || first === "／") return "path";
     return "navigate";
   }
 
@@ -270,6 +286,8 @@ export class JantCommandPalette extends LitElement {
     icon: string;
     /** For search-mode items: the query to execute */
     searchQuery?: string;
+    /** For path-mode items: the local path to open */
+    pathTarget?: string;
   }> {
     const mode = this.#mode;
 
@@ -299,12 +317,41 @@ export class JantCommandPalette extends LitElement {
       ];
     }
 
+    if (mode === "path") {
+      const target = getPathCommandTarget(this._query);
+      const searchQuery = getPathCommandSearchQuery(this._query);
+      const items: Array<{
+        label: string;
+        secondary?: string;
+        icon: string;
+        searchQuery?: string;
+        pathTarget?: string;
+      }> = [
+        {
+          label: `Go to ${target}`,
+          icon: ICONS.path,
+          pathTarget: target,
+        },
+      ];
+
+      if (searchQuery) {
+        items.push({
+          label: `Search for "${searchQuery}"`,
+          icon: ICONS.search,
+          searchQuery,
+        });
+      }
+
+      return items;
+    }
+
     // Navigate mode — show all items when no query (autocomplete)
     const navItems: Array<{
       label: string;
       secondary?: string;
       icon: string;
       searchQuery?: string;
+      pathTarget?: string;
     }> = this.#navigateItems.map((item) => ({
       label: item.title,
       secondary: item.type === "system" ? item.path : item.path,
@@ -351,6 +398,24 @@ export class JantCommandPalette extends LitElement {
       return;
     }
 
+    if (mode === "path") {
+      const displayItem = this.#displayItems[index];
+      if (displayItem?.pathTarget) {
+        saveHistory(NAV_HISTORY_KEY, displayItem.pathTarget);
+        this.close();
+        window.location.href = displayItem.pathTarget;
+        return;
+      }
+
+      if (displayItem?.searchQuery) {
+        const q = displayItem.searchQuery;
+        saveHistory(SEARCH_HISTORY_KEY, q);
+        this.close();
+        window.location.href = `/search?q=${encodeURIComponent(q)}`;
+      }
+      return;
+    }
+
     // Navigate mode — check if the selected item is a search fallback
     const displayItem = this.#displayItems[index];
     if (displayItem?.searchQuery) {

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

@@ -5432,7 +5432,11 @@ export class JantComposeDialog extends LitElement {
 
     return html`
       <div
-        class="compose-thread-layout compose-thread-compose-layout"
+        class=${classMap({
+          "compose-thread-layout": true,
+          "compose-thread-compose-layout": true,
+          "compose-reply-compose-layout": isReply,
+        })}
         @jant:compose-content-changed=${() => this._scheduleDraftSave()}
       >
         ${isReply ? this._renderReplyContext() : nothing}
@@ -5502,7 +5506,9 @@ export class JantComposeDialog extends LitElement {
             ? this._renderThreadComposeLayout()
             : isReply
               ? html`
-                  <div class="compose-thread-layout">
+                  <div
+                    class="compose-thread-layout compose-reply-compose-layout"
+                  >
                     ${this._renderReplyContext()}
                     <div
                       class="compose-editor-row"

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

@@ -46,7 +46,11 @@ import { createTiptapEditor } from "../tiptap/create-editor.js";
 import {
   uploadAndInsertInlineImage,
   adoptPendingInlineImageUploads,
+  rehostInlineImage,
+  sideloadImage,
 } from "../tiptap/inline-image-upload.js";
+import { clearRehostInFlight } from "../tiptap/rehost-images.js";
+import { uploadWithMetadata } from "../upload-with-metadata.js";
 import { getClipboardFiles } from "../tiptap/paste-media.js";
 import { isSafeAbsoluteUrl } from "../../lib/url.js";
 import { randomUUID } from "../random-uuid.js";
@@ -247,6 +251,8 @@ export class JantComposeEditor extends LitElement {
   private _suppressContentChangedOnce = false;
   #inlineImageUploadGeneration = 0;
   #inlineImageUploadPromises = new Set<Promise<void>>();
+  #rehostFailureCount = 0;
+  #rehostFailureNoticeTimer: ReturnType<typeof setTimeout> | undefined;
   #sortable: { destroy(): void } | null = null;
   #revertNextSibling: globalThis.Node | null = null;
 
@@ -429,6 +435,102 @@ export class JantComposeEditor extends LitElement {
     return uploadPromise;
   }
 
+  /**
+   * Decide whether a pasted image node's `src` should be rehosted into our own
+   * storage. Skips images that are already ours (same-origin or on the
+   * configured media CDN), relative paths, and `blob:` placeholders (handled by
+   * the insert flow). Remote `http(s)` and inline `data:` srcs are rehosted.
+   */
+  #shouldRehostSrc(src: string): boolean {
+    if (src.startsWith("data:")) return true;
+    if (!/^https?:\/\//i.test(src)) return false;
+    let origin: string;
+    try {
+      origin = new URL(src).origin;
+    } catch {
+      return false;
+    }
+    if (origin === window.location.origin) return false;
+    const mediaBase = document.documentElement.dataset.mediaBase;
+    if (mediaBase && src.startsWith(mediaBase)) return false;
+    return true;
+  }
+
+  /**
+   * Rehost a pasted inline image into our storage and swap its `src`. Remote
+   * URLs go through the server sideload endpoint (bypasses CORS); `data:` URLs
+   * are decoded locally and run through the normal client upload pipeline
+   * (gaining WebP/resize/blurhash). Tracked like other inline uploads so submit
+   * waits for it; failures leave the node with its original src.
+   */
+  #rehostInlineImage(src: string) {
+    const editor = this._editor;
+    if (!editor) {
+      clearRehostInFlight(src);
+      return;
+    }
+
+    const resolver = src.startsWith("data:")
+      ? async () => {
+          const blob = await (await fetch(src)).blob();
+          const file = new File([blob], "pasted-image", {
+            type: blob.type || "image/png",
+          });
+          return (await uploadWithMetadata(file)).url;
+        }
+      : async () => (await sideloadImage(src)).url;
+
+    // Surface failures so a blocked rehost (e.g. a host's hotlink protection)
+    // isn't silent — the node keeps its original link, but the author is told.
+    const trackedResolver = async () => {
+      try {
+        return await resolver();
+      } catch (error) {
+        this.#noteRehostFailure();
+        throw error;
+      }
+    };
+
+    const generation = this.#inlineImageUploadGeneration;
+    const rehostPromise = rehostInlineImage(
+      editor,
+      src,
+      trackedResolver,
+    ).finally(() => {
+      clearRehostInFlight(src);
+      if (generation !== this.#inlineImageUploadGeneration) return;
+      this.#inlineImageUploadPromises.delete(rehostPromise);
+    });
+    this.#inlineImageUploadPromises.add(rehostPromise);
+  }
+
+  /** Count a failed rehost and debounce a single batched notice. */
+  #noteRehostFailure() {
+    this.#rehostFailureCount += 1;
+    if (this.#rehostFailureNoticeTimer !== undefined) return;
+    this.#rehostFailureNoticeTimer = setTimeout(() => {
+      this.#flushRehostFailureNotice();
+    }, 800);
+  }
+
+  /** Show one toast summarizing all rehost failures collected in the window. */
+  #flushRehostFailureNotice() {
+    this.#rehostFailureNoticeTimer = undefined;
+    const count = this.#rehostFailureCount;
+    this.#rehostFailureCount = 0;
+    if (count <= 0 || !this.isConnected) return;
+
+    const message =
+      count === 1
+        ? (this.labels.imageNotRehosted ??
+          "An image couldn't be saved to your library — its original link was kept.")
+        : (
+            this.labels.imagesNotRehosted ??
+            "{count} images couldn't be saved to your library — their original links were kept."
+          ).replace("{count}", String(count));
+    showToast(message, "error");
+  }
+
   hasPendingInlineImageUploads(): boolean {
     return this.#inlineImageUploadPromises.size > 0;
   }
@@ -446,6 +548,11 @@ export class JantComposeEditor extends LitElement {
   #clearPendingInlineImageUploads() {
     this.#inlineImageUploadGeneration += 1;
     this.#inlineImageUploadPromises.clear();
+    if (this.#rehostFailureNoticeTimer !== undefined) {
+      clearTimeout(this.#rehostFailureNoticeTimer);
+      this.#rehostFailureNoticeTimer = undefined;
+    }
+    this.#rehostFailureCount = 0;
   }
 
   /** Adopt in-flight inline image uploads from another editor (e.g. fullscreen). */
@@ -824,6 +931,10 @@ export class JantComposeEditor extends LitElement {
           this.addFiles(files);
         },
       },
+      rehostImages: {
+        shouldRehost: (src) => this.#shouldRehostSrc(src),
+        rehost: (src) => this.#rehostInlineImage(src),
+      },
     });
     this._lastEditorSelection = this._readEditorSelection();