@jant/core 0.6.11 → 0.6.12

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/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-nav-manager.ts

@@ -33,6 +33,7 @@ import type {
   NavManagerLabels,
   NavManagerUpdateDetail,
   NavManagerDeleteDetail,
+  NavManagerSuggestedLink,
   SystemNavConfig,
 } from "./nav-manager-types.js";
 
@@ -42,6 +43,7 @@ export class JantNavManager extends LitElement {
     labels: { type: Object },
     systemNavItems: { type: Array, attribute: "system-nav-items" },
     collections: { type: Array },
+    suggestedLinks: { type: Array, attribute: "suggested-links" },
     siteName: { type: String, attribute: "site-name" },
 
     _items: { state: true },
@@ -56,12 +58,14 @@ export class JantNavManager extends LitElement {
     _showPreviewMore: { state: true },
     _addingCollectionId: { state: true },
     _showCollectionPicker: { state: true },
+    _addingSuggestedKey: { state: true },
   };
 
   declare items: NavManagerItem[];
   declare labels: NavManagerLabels;
   declare systemNavItems: SystemNavConfig[];
   declare collections: NavManagerCollection[];
+  declare suggestedLinks: NavManagerSuggestedLink[];
   declare siteName: string;
 
   declare _items: NavManagerItem[];
@@ -78,6 +82,8 @@ export class JantNavManager extends LitElement {
   /** ID of the collection currently being added (for loading state) */
   declare _addingCollectionId: string | null;
   declare _showCollectionPicker: boolean;
+  /** Key of the suggested link currently being added */
+  declare _addingSuggestedKey: string | null;
 
   #sortableHeader: { destroy(): void } | null = null;
   #sortableMore: { destroy(): void } | null = null;
@@ -124,6 +130,7 @@ export class JantNavManager extends LitElement {
     this.labels = {} as NavManagerLabels;
     this.systemNavItems = [];
     this.collections = [];
+    this.suggestedLinks = [];
     this.siteName = "";
 
     this._items = [];
@@ -138,6 +145,7 @@ export class JantNavManager extends LitElement {
     this._showPreviewMore = false;
     this._addingCollectionId = null;
     this._showCollectionPicker = false;
+    this._addingSuggestedKey = null;
   }
 
   protected update(changedProperties: PropertyValueMap<JantNavManager>): void {
@@ -448,6 +456,99 @@ export class JantNavManager extends LitElement {
     }
   }
 
+  // ===========================================================================
+  // Suggested link handlers
+  // ===========================================================================
+
+  #getComparableInternalPath(url: string): string | null {
+    if (
+      url.startsWith("http://") ||
+      url.startsWith("https://") ||
+      url.startsWith("//") ||
+      url.startsWith("mailto:") ||
+      url.startsWith("tel:") ||
+      url.startsWith("#")
+    ) {
+      return null;
+    }
+
+    try {
+      const pathname = new URL(url, "https://jant.invalid").pathname;
+      const normalized = pathname
+        .trim()
+        .toLowerCase()
+        .replace(/^\/+|\/+$/g, "")
+        .replace(/\/+/g, "/");
+      return normalized ? `/${normalized}` : "/";
+    } catch {
+      return null;
+    }
+  }
+
+  #isSuggestedLinkAdded(link: NavManagerSuggestedLink): boolean {
+    const path = this.#getComparableInternalPath(link.url);
+    const hasMatchingPath =
+      path !== null &&
+      this._items.some(
+        (item) => this.#getComparableInternalPath(item.url) === path,
+      );
+    if (hasMatchingPath) return true;
+
+    return Boolean(
+      link.collectionId &&
+      this._items.some(
+        (item) =>
+          item.type === "collection" && item.collectionId === link.collectionId,
+      ),
+    );
+  }
+
+  get #availableSuggestedLinks(): NavManagerSuggestedLink[] {
+    return (this.suggestedLinks ?? []).filter(
+      (link) => !this.#isSuggestedLinkAdded(link),
+    );
+  }
+
+  async #handleAddSuggestedLink(link: NavManagerSuggestedLink) {
+    if (this._addingSuggestedKey) return;
+
+    this._addingSuggestedKey = link.key;
+    try {
+      const body =
+        link.navItemType === "collection" && link.collectionId
+          ? {
+              type: "collection",
+              collectionId: link.collectionId,
+              placement: "header",
+            }
+          : {
+              type: "link",
+              label: link.label,
+              url: link.url,
+              placement: "header",
+            };
+
+      const res = await fetch("/api/nav-items", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify(body),
+      });
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+
+      const created: NavManagerItem = await res.json();
+      this.#destroySortables();
+      this._items = [...this._items, created];
+      showToast(this.labels.suggestedLinkAdded);
+    } catch {
+      showToast(this.labels.saveFailed, "error");
+    } finally {
+      this._addingSuggestedKey = null;
+    }
+  }
+
   // ===========================================================================
   // System toggle handlers
   // ===========================================================================
@@ -834,6 +935,45 @@ export class JantNavManager extends LitElement {
     `;
   }
 
+  #renderSuggestedLinksSection() {
+    const available = this.#availableSuggestedLinks;
+    if (available.length === 0) return nothing;
+
+    return html`
+      <section class="mt-8">
+        <h2 class="text-lg font-semibold mb-1">
+          ${this.labels.suggestedLinks}
+        </h2>
+        <p class="text-sm text-muted-foreground mb-3">
+          ${this.labels.suggestedLinksDescription}
+        </p>
+        <div class="nav-suggestions-list">
+          ${available.map((link) => {
+            const adding = this._addingSuggestedKey === link.key;
+            return html`
+              <div class="nav-suggestion-item">
+                <div class="nav-suggestion-info">
+                  <span class="nav-suggestion-title">${link.label}</span>
+                  <span class="nav-suggestion-meta">
+                    ${link.url} · ${link.targetLabel}
+                  </span>
+                </div>
+                <button
+                  type="button"
+                  class="btn-sm"
+                  ?disabled=${adding || this._addingSuggestedKey !== null}
+                  @click=${() => this.#handleAddSuggestedLink(link)}
+                >
+                  ${this.labels.addSuggestedLink}
+                </button>
+              </div>
+            `;
+          })}
+        </div>
+      </section>
+    `;
+  }
+
   #renderAddLinkSection() {
     return html`
       <section class="mt-8">
@@ -1175,8 +1315,8 @@ export class JantNavManager extends LitElement {
         </div>
       </section>
 
-      ${this.#renderAddLinkSection()} ${this.#renderAddCollectionSection()}
-      ${this.#renderSystemToggles()}
+      ${this.#renderSuggestedLinksSection()} ${this.#renderAddLinkSection()}
+      ${this.#renderAddCollectionSection()} ${this.#renderSystemToggles()}
     `;
   }
 }

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

@@ -21,6 +21,7 @@ import type {
   SettingsTimezone,
   SettingsCjkFont,
   SettingsDashboardLanguage,
+  SettingsAboutPageStatus,
 } from "./settings-types.js";
 import { showToast } from "../toast.js";
 import {
@@ -44,6 +45,12 @@ export class JantSettingsGeneral extends LitElement {
     latestFeedUrl: { type: String, attribute: "latest-feed-url" },
     featuredFeedUrl: { type: String, attribute: "featured-feed-url" },
     archiveFeedUrl: { type: String, attribute: "archive-feed-url" },
+    aboutPage: { type: Object, attribute: "about-page" },
+    aboutEditUrl: { type: String, attribute: "about-edit-url" },
+    aboutCreateUrl: {
+      type: String,
+      attribute: "about-create-url",
+    },
 
     // Site group
     _siteName: { state: true },
@@ -92,6 +99,9 @@ export class JantSettingsGeneral extends LitElement {
   declare latestFeedUrl: string;
   declare featuredFeedUrl: string;
   declare archiveFeedUrl: string;
+  declare aboutPage: SettingsAboutPageStatus;
+  declare aboutEditUrl: string;
+  declare aboutCreateUrl: string;
 
   // Site
   declare _siteName: string;
@@ -162,6 +172,12 @@ export class JantSettingsGeneral extends LitElement {
     this.latestFeedUrl = "/latest/feed";
     this.featuredFeedUrl = "/featured/feed";
     this.archiveFeedUrl = "/archive/feed";
+    this.aboutPage = {
+      state: "missing",
+      path: "/about",
+    };
+    this.aboutEditUrl = "/about?edit=1";
+    this.aboutCreateUrl = "/settings/general/about-page";
 
     this._siteName = "";
     this._siteDescription = "";
@@ -757,6 +773,45 @@ export class JantSettingsGeneral extends LitElement {
     `;
   }
 
+  private _renderAboutPageRow() {
+    const status = this.aboutPage;
+
+    return html`
+      <div class="mt-2 text-sm text-muted-foreground" data-about-page-row>
+        ${this.labels.aboutPagePrompt}
+        ${status.state === "ready"
+          ? html`
+              <a
+                class="font-medium text-foreground underline-offset-4 hover:underline"
+                href=${this.aboutEditUrl}
+              >
+                ${this.labels.editAboutPage}
+              </a>
+            `
+          : status.state === "missing"
+            ? html`
+                <form
+                  class="inline"
+                  method="post"
+                  action=${this.aboutCreateUrl}
+                >
+                  <button
+                    type="submit"
+                    class="inline cursor-pointer border-0 bg-transparent p-0 font-medium text-foreground underline-offset-4 hover:underline"
+                  >
+                    ${this.labels.createAboutPage}
+                  </button>
+                </form>
+              `
+            : html`
+                <span class="text-destructive"
+                  >${this.labels.aboutPageConflict}</span
+                >
+              `}
+      </div>
+    `;
+  }
+
   private _renderGeneralForm() {
     return html`
       <div class="flex flex-col gap-8">
@@ -796,6 +851,7 @@ export class JantSettingsGeneral extends LitElement {
             <p class="text-sm text-muted-foreground mt-1">
               ${this.labels.aboutBlogHelp}
             </p>
+            ${this._renderAboutPageRow()}
           </div>
 
           <div class="field">

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

@@ -30,6 +30,16 @@ export interface NavManagerCollection {
   group?: string | null;
 }
 
+export interface NavManagerSuggestedLink {
+  key: string;
+  label: string;
+  url: string;
+  targetType: "page" | "collection" | "archive";
+  targetLabel: string;
+  navItemType: "link" | "collection";
+  collectionId?: string;
+}
+
 export interface NavManagerLabels {
   preview: string;
   navigationItems: string;
@@ -54,6 +64,10 @@ export interface NavManagerLabels {
   addLinkDescription: string;
   urlPlaceholder: string;
   labelAndUrlRequired: string;
+  suggestedLinks: string;
+  suggestedLinksDescription: string;
+  addSuggestedLink: string;
+  suggestedLinkAdded: string;
   collection: string;
   addCollection: string;
   addCollectionToNavigation: string;

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

@@ -18,6 +18,11 @@ export interface SettingsLabels {
   // General
   general: string;
   site: string;
+  aboutPage: string;
+  aboutPagePrompt: string;
+  aboutPageConflict: string;
+  createAboutPage: string;
+  editAboutPage: string;
   languageAndTime: string;
   home: string;
   search: string;
@@ -100,6 +105,31 @@ export interface SettingsInitialData {
   noindex: boolean;
 }
 
+export type SettingsAboutPageStatus =
+  | {
+      state: "missing";
+      path: "/about";
+    }
+  | {
+      state: "ready";
+      path: "/about";
+      post: {
+        id: string;
+        title: string | null;
+        status: "draft" | "published";
+        visibility: "public" | "latest_hidden" | "private";
+      };
+    }
+  | {
+      state: "conflict";
+      path: "/about";
+      conflict: {
+        targetType: "collection" | "redirect" | "archive" | "post";
+        id: string | null;
+        title: string | null;
+      };
+    };
+
 /** Event detail dispatched when a settings form is saved */
 export interface SettingsSaveDetail {
   endpoint: string;

package/src/client/compose-launch.ts

@@ -57,6 +57,36 @@ export function getCurrentDetailPostArticle(
   return null;
 }
 
+function getLastThreadDetailArticle(
+  root: globalThis.Document | globalThis.Element,
+): HTMLElement | null {
+  const threadGroup = root.querySelector<HTMLElement>(
+    ".thread-group-detail[data-page='post']",
+  );
+  if (!threadGroup) return null;
+
+  const articles = threadGroup.querySelectorAll<HTMLElement>(
+    ".thread-detail-item article[data-post]",
+  );
+  return articles.length > 0 ? articles.item(articles.length - 1) : null;
+}
+
+export function getReplyTargetArticle(
+  root: globalThis.Document | globalThis.Element = document,
+): HTMLElement | null {
+  const lastThreadPost = getLastThreadDetailArticle(root);
+  if (lastThreadPost) return lastThreadPost;
+
+  if (root === document) {
+    const hoveredPost = document.querySelector<HTMLElement>(
+      "[data-page='post'] article[data-post]:hover",
+    );
+    if (hoveredPost) return hoveredPost;
+  }
+
+  return getCurrentDetailPostArticle(root);
+}
+
 export function getReplyRefreshTarget(
   article: HTMLElement,
 ): ReplyRefreshTarget | null {