@jant/core 0.6.16 → 0.7.0

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

@@ -1,8 +1,10 @@
 /**
  * General Settings Component
  *
- * Main container for the General settings page. Saveable groups track dirty
- * state independently, while checkbox-only sections save immediately.
+ * Main container for the General settings page. Typed fields are grouped
+ * behind a Save button and track their dirty state independently; every
+ * control whose value is complete the moment it is set — checkbox, radio,
+ * select — saves on change.
  *
  * Light DOM only — BaseCoat and Tailwind classes apply directly.
  */
@@ -11,40 +13,55 @@ import { LitElement, html, nothing } from "lit";
 import type { Editor } from "@tiptap/core";
 import { MAX_SITE_NAME_LENGTH } from "../../types.js";
 import {
-  getSupportedLocaleEntries,
-  getOrBuildEntry,
-  type LocaleEntry,
-} from "../../i18n/supported-locales.js";
+  discoverIntroRuns,
+  resolveDiscoverMode,
+  type DiscoverPageUrls,
+} from "../../lib/discover.js";
 import type {
   SettingsInitialData,
   SettingsLabels,
   SettingsTimezone,
-  SettingsCjkFont,
-  SettingsDashboardLanguage,
   SettingsAboutPageStatus,
 } from "./settings-types.js";
-import { showToast } from "../toast.js";
+import {
+  COPY_FIELD_BUTTON_CLASS,
+  COPY_FIELD_CLASS,
+  COPY_FIELD_CONTROL_CLASS,
+  COPY_FIELD_INPUT_CLASS,
+} from "../../lib/copy-field.js";
 import {
   createSettingsEditor,
   jsonToMarkdown,
 } from "../tiptap/create-editor.js";
 
+/**
+ * Spacing every section shares, whatever its position.
+ *
+ * The container's `divide-y` draws the rule under each section but the last;
+ * this pads both sides of each rule and drops the padding at either end. The
+ * gap between a section's own children is left to the section.
+ */
+const SECTION_CLASS = "flex flex-col py-8 first:pt-0 last:pb-0";
+
 export class JantSettingsGeneral extends LitElement {
   static properties = {
     labels: { type: Object },
     timezones: { type: Array },
-    cjkFonts: { type: Array, attribute: "cjk-fonts" },
     siteNameFallback: { type: String, attribute: "sitename-fallback" },
     siteDescriptionFallback: {
       type: String,
       attribute: "sitedescription-fallback",
     },
-    dashboardLanguages: { type: Array, attribute: "dashboard-languages" },
     demoMode: { type: Boolean, attribute: "demo-mode" },
+    discoverDefault: { type: String, attribute: "discover-default" },
+    discoverPages: { type: Object, attribute: "discover-pages" },
+    discoverStatus: { type: String, attribute: "discover-status" },
+    feedsEnabled: { type: Boolean, attribute: "feeds-enabled" },
     mainFeedUrl: { type: String, attribute: "main-feed-url" },
     latestFeedUrl: { type: String, attribute: "latest-feed-url" },
     featuredFeedUrl: { type: String, attribute: "featured-feed-url" },
     archiveFeedUrl: { type: String, attribute: "archive-feed-url" },
+    feedsDocsUrl: { type: String, attribute: "feeds-docs-url" },
     aboutPage: { type: Object, attribute: "about-page" },
     aboutEditUrl: { type: String, attribute: "about-edit-url" },
     aboutCreateUrl: {
@@ -60,12 +77,7 @@ export class JantSettingsGeneral extends LitElement {
     _siteDirty: { state: true },
     _siteLoading: { state: true },
 
-    // Language, CJK & time group
-    _siteLanguage: { state: true },
-    _dashboardLanguage: { state: true },
-    _localeOpen: { state: true },
-    _localeQuery: { state: true },
-    _cjkSerifFont: { state: true },
+    // Time group
     _timeZone: { state: true },
     _origLocale: { state: true },
     _localeDirty: { state: true },
@@ -74,7 +86,6 @@ export class JantSettingsGeneral extends LitElement {
     // Feed group
     _mainRssFeed: { state: true },
     _origMainRssFeed: { state: true },
-    _feedDirty: { state: true },
     _feedLoading: { state: true },
 
     // Home auto-save
@@ -86,19 +97,40 @@ export class JantSettingsGeneral extends LitElement {
     _noindex: { state: true },
     _origNoindex: { state: true },
     _searchLoading: { state: true },
+
+    // Discover group
+    _discover: { state: true },
+    _origDiscover: { state: true },
+    _discoverLoading: { state: true },
   };
 
   declare labels: SettingsLabels;
   declare timezones: SettingsTimezone[];
-  declare cjkFonts: SettingsCjkFont[];
-  declare dashboardLanguages: SettingsDashboardLanguage[];
   declare siteNameFallback: string;
   declare siteDescriptionFallback: string;
   declare demoMode: boolean;
+  /**
+   * The deployment's own answer, unresolved: `""` when it has none.
+   *
+   * What the site actually declares is derived from this and from the controls
+   * around it — see `_effectiveDiscoverMode`.
+   */
+  declare discoverDefault: string;
+  /** The directory's own pages, or `null` when none is configured. */
+  declare discoverPages: DiscoverPageUrls | null;
+  /**
+   * JSON status block, already translated by the server.
+   *
+   * The sentences carry runtime numbers, so they are built where the values
+   * are. This component only decides where they go.
+   */
+  declare discoverStatus: string;
+  declare feedsEnabled: boolean;
   declare mainFeedUrl: string;
   declare latestFeedUrl: string;
   declare featuredFeedUrl: string;
   declare archiveFeedUrl: string;
+  declare feedsDocsUrl: string;
   declare aboutPage: SettingsAboutPageStatus;
   declare aboutEditUrl: string;
   declare aboutCreateUrl: string;
@@ -115,20 +147,10 @@ export class JantSettingsGeneral extends LitElement {
   declare _siteDirty: boolean;
   declare _siteLoading: boolean;
 
-  // Language, CJK & time
-  declare _siteLanguage: string;
-  /** Admin dashboard UI locale (one of the translated catalog locales). */
-  declare _dashboardLanguage: string;
-  /** Whether the locale combobox dropdown is currently open. */
-  declare _localeOpen: boolean;
-  /** Search query inside the locale combobox. */
-  declare _localeQuery: string;
-  declare _cjkSerifFont: string;
+  // Time
+  /** IANA time zone name, such as `"America/New_York"`. */
   declare _timeZone: string;
   declare _origLocale: {
-    siteLanguage: string;
-    dashboardLanguage: string;
-    cjkSerifFont: string;
     timeZone: string;
   };
   declare _localeDirty: boolean;
@@ -137,7 +159,6 @@ export class JantSettingsGeneral extends LitElement {
   // Feed
   declare _mainRssFeed: string;
   declare _origMainRssFeed: string;
-  declare _feedDirty: boolean;
   declare _feedLoading: boolean;
 
   // Home
@@ -150,6 +171,12 @@ export class JantSettingsGeneral extends LitElement {
   declare _origNoindex: boolean;
   declare _searchLoading: boolean;
 
+  // Discover. "" means the owner has never used the control, which is not the
+  // same as "off" — an untouched site still follows the default.
+  declare _discover: string;
+  declare _origDiscover: string;
+  declare _discoverLoading: boolean;
+
   // TipTap editor instances
   private _descEditor: Editor | null = null;
   private _footerEditor: Editor | null = null;
@@ -163,8 +190,6 @@ export class JantSettingsGeneral extends LitElement {
     super();
     this.labels = {} as SettingsLabels;
     this.timezones = [];
-    this.cjkFonts = [];
-    this.dashboardLanguages = [];
     this.siteNameFallback = "";
     this.siteDescriptionFallback = "";
     this.demoMode = false;
@@ -172,6 +197,7 @@ export class JantSettingsGeneral extends LitElement {
     this.latestFeedUrl = "/latest/feed";
     this.featuredFeedUrl = "/featured/feed";
     this.archiveFeedUrl = "/archive/feed";
+    this.feedsDocsUrl = "";
     this.aboutPage = {
       state: "missing",
       path: "/about",
@@ -190,25 +216,14 @@ export class JantSettingsGeneral extends LitElement {
     this._siteDirty = false;
     this._siteLoading = false;
 
-    this._siteLanguage = "en";
-    this._dashboardLanguage = "en";
-    this._localeOpen = false;
-    this._localeQuery = "";
-    this._cjkSerifFont = "off";
     this._timeZone = "UTC";
-    this._origLocale = {
-      siteLanguage: "en",
-      dashboardLanguage: "en",
-      cjkSerifFont: "off",
-      timeZone: "UTC",
-    };
+    this._origLocale = { timeZone: "UTC" };
 
     this._localeDirty = false;
     this._localeLoading = false;
 
     this._mainRssFeed = "featured";
     this._origMainRssFeed = "featured";
-    this._feedDirty = false;
     this._feedLoading = false;
 
     this._noindex = false;
@@ -217,18 +232,22 @@ export class JantSettingsGeneral extends LitElement {
     this._origShowJantBrandingOnHome = false;
     this._homeLoading = false;
     this._searchLoading = false;
+
+    this.discoverDefault = "";
+    this.discoverPages = null;
+    this.discoverStatus = "";
+    this.feedsEnabled = false;
+    this._discover = "";
+    this._origDiscover = "";
+    this._discoverLoading = false;
   }
 
   connectedCallback() {
     super.connectedCallback();
-    document.addEventListener("click", this._onLocalePickerDocumentClick);
-    document.addEventListener("keydown", this._onLocalePickerKeydown);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    document.removeEventListener("click", this._onLocalePickerDocumentClick);
-    document.removeEventListener("keydown", this._onLocalePickerKeydown);
     this._descEditor?.destroy();
     this._descEditor = null;
     this._footerEditor?.destroy();
@@ -241,16 +260,8 @@ export class JantSettingsGeneral extends LitElement {
     this._siteDescription = data.siteDescription;
     this._siteFooter = data.siteFooter;
 
-    this._siteLanguage = data.siteLanguage;
-    this._dashboardLanguage = data.dashboardLanguage;
-    this._cjkSerifFont = data.cjkSerifFont;
     this._timeZone = data.timeZone;
-    this._origLocale = {
-      siteLanguage: data.siteLanguage,
-      dashboardLanguage: data.dashboardLanguage,
-      cjkSerifFont: data.cjkSerifFont,
-      timeZone: data.timeZone,
-    };
+    this._origLocale = { timeZone: data.timeZone };
 
     this._mainRssFeed = data.mainRssFeed;
     this._origMainRssFeed = data.mainRssFeed;
@@ -261,6 +272,9 @@ export class JantSettingsGeneral extends LitElement {
     this._noindex = data.noindex;
     this._origNoindex = data.noindex;
 
+    this._discover = data.discover;
+    this._origDiscover = data.discover;
+
     // Defer editor init to after Lit renders the containers
     this.updateComplete.then(() => {
       this._initEditors();
@@ -283,18 +297,12 @@ export class JantSettingsGeneral extends LitElement {
       };
       this._siteDirty = false;
       this._siteLoading = false;
-    } else if (section === "language-time") {
-      this._origLocale = {
-        siteLanguage: this._siteLanguage,
-        dashboardLanguage: this._dashboardLanguage,
-        cjkSerifFont: this._cjkSerifFont,
-        timeZone: this._timeZone,
-      };
+    } else if (section === "time") {
+      this._origLocale = { timeZone: this._timeZone };
       this._localeDirty = false;
       this._localeLoading = false;
     } else if (section === "feeds") {
       this._origMainRssFeed = this._mainRssFeed;
-      this._feedDirty = false;
       this._feedLoading = false;
     } else if (section === "home") {
       this._origShowJantBrandingOnHome = this._showJantBrandingOnHome;
@@ -302,6 +310,9 @@ export class JantSettingsGeneral extends LitElement {
     } else if (section === "search") {
       this._origNoindex = this._noindex;
       this._searchLoading = false;
+    } else if (section === "discover") {
+      this._origDiscover = this._discover;
+      this._discoverLoading = false;
     }
   }
 
@@ -309,9 +320,10 @@ export class JantSettingsGeneral extends LitElement {
   sectionError(section: string) {
     if (section === "site") {
       this._siteLoading = false;
-    } else if (section === "language-time") {
+    } else if (section === "time") {
       this._localeLoading = false;
     } else if (section === "feeds") {
+      this._mainRssFeed = this._origMainRssFeed;
       this._feedLoading = false;
     } else if (section === "home") {
       this._showJantBrandingOnHome = this._origShowJantBrandingOnHome;
@@ -319,6 +331,9 @@ export class JantSettingsGeneral extends LitElement {
     } else if (section === "search") {
       this._noindex = this._origNoindex;
       this._searchLoading = false;
+    } else if (section === "discover") {
+      this._discover = this._origDiscover;
+      this._discoverLoading = false;
     }
   }
 
@@ -408,14 +423,10 @@ export class JantSettingsGeneral extends LitElement {
     );
   }
 
-  // ── Language & time group helpers ────────────────────────────────
+  // ── Time group helpers ────────────────────────────────────────────
 
   private _syncLocaleDirty() {
-    this._localeDirty =
-      this._siteLanguage !== this._origLocale.siteLanguage ||
-      this._dashboardLanguage !== this._origLocale.dashboardLanguage ||
-      this._cjkSerifFont !== this._origLocale.cjkSerifFont ||
-      this._timeZone !== this._origLocale.timeZone;
+    this._localeDirty = this._timeZone !== this._origLocale.timeZone;
   }
 
   private _saveLocale() {
@@ -425,157 +436,19 @@ export class JantSettingsGeneral extends LitElement {
       new CustomEvent("jant:settings-save", {
         bubbles: true,
         detail: {
-          endpoint: "/settings/general/language-time",
-          data: {
-            siteLanguage: this._siteLanguage,
-            dashboardLanguage: this._dashboardLanguage,
-            cjkSerifFont: this._cjkSerifFont,
-            timeZone: this._timeZone,
-          },
-          section: "language-time",
+          endpoint: "/settings/general/time",
+          data: { timeZone: this._timeZone },
+          section: "time",
         },
       }),
     );
   }
 
-  // ── Locale combobox ────────────────────────────────────────────────
-
-  private _filteredLocaleEntries(): LocaleEntry[] {
-    const all = getSupportedLocaleEntries();
-    const query = this._localeQuery.trim().toLowerCase();
-    if (!query) return all;
-    return all.filter(
-      (e) =>
-        e.tag.toLowerCase().includes(query) ||
-        e.native.toLowerCase().includes(query) ||
-        e.english.toLowerCase().includes(query),
-    );
-  }
-
-  private _toggleLocalePicker = () => {
-    this._localeOpen = !this._localeOpen;
-    if (!this._localeOpen) {
-      this._localeQuery = "";
-    } else {
-      // Focus the search input on next paint.
-      this.updateComplete.then(() => {
-        const input = this.querySelector<HTMLInputElement>(
-          "[data-locale-search]",
-        );
-        input?.focus();
-      });
-    }
-  };
-
-  private _selectLocale(tag: string) {
-    this._siteLanguage = tag;
-    this._localeOpen = false;
-    this._localeQuery = "";
-    this._syncLocaleDirty();
-  }
-
-  private _onLocalePickerDocumentClick = (e: Event) => {
-    if (!this._localeOpen) return;
-    const target = e.target as Node | null;
-    const picker = this.querySelector("[data-locale-picker]");
-    if (picker && target && !picker.contains(target)) {
-      this._localeOpen = false;
-    }
-  };
+  // ── Feed auto-save helpers ────────────────────────────────────────
 
-  private _onLocalePickerKeydown = (e: KeyboardEvent) => {
-    if (e.isComposing || e.keyCode === 229) return;
-    if (e.key === "Escape" && this._localeOpen) {
-      this._localeOpen = false;
-      this._localeQuery = "";
-    }
-  };
-
-  private _renderLanguagePicker() {
-    const current = getOrBuildEntry(this._siteLanguage || "en");
-    const filtered = this._filteredLocaleEntries();
-    const searchPlaceholder =
-      this.labels.siteLanguageSearchPlaceholder || "Search…";
-    const noMatches = this.labels.siteLanguageNoMatches || "No matches.";
-
-    return html`
-      <div class="relative w-fit max-w-full" data-locale-picker>
-        <button
-          type="button"
-          class="flex h-9 w-full cursor-pointer items-center rounded-md border border-input bg-transparent bg-[image:var(--chevron-down-icon-50)] bg-position-[center_right_0.75rem] bg-size-[1rem] bg-no-repeat py-2 pl-3 pr-9 text-left text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-input/30 dark:hover:bg-input/50"
-          aria-expanded=${this._localeOpen ? "true" : "false"}
-          aria-haspopup="listbox"
-          aria-labelledby="site-language-label"
-          @click=${this._toggleLocalePicker}
-        >
-          <span class="min-w-0 truncate">${current.native}</span>
-        </button>
-
-        ${this._localeOpen
-          ? html`
-              <div
-                class="absolute left-0 top-full z-10 mt-1 w-80 min-w-full max-w-[calc(100vw-2rem)] max-h-72 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md"
-              >
-                <div class="border-b p-2">
-                  <input
-                    type="text"
-                    class="input w-full"
-                    data-locale-search
-                    placeholder=${searchPlaceholder}
-                    autocomplete="off"
-                    spellcheck="false"
-                    .value=${this._localeQuery}
-                    @input=${(e: Event) => {
-                      this._localeQuery = (e.target as HTMLInputElement).value;
-                    }}
-                  />
-                </div>
-                <div role="listbox" class="max-h-56 overflow-auto py-1">
-                  ${filtered.length === 0
-                    ? html`
-                        <div class="px-3 py-2 text-sm text-muted-foreground">
-                          ${noMatches}
-                        </div>
-                      `
-                    : filtered.map(
-                        (entry) => html`
-                          <button
-                            type="button"
-                            role="option"
-                            aria-selected=${entry.tag === this._siteLanguage
-                              ? "true"
-                              : "false"}
-                            class=${[
-                              "flex w-full flex-col px-3 py-2 text-left text-sm hover:bg-accent",
-                              entry.tag === this._siteLanguage
-                                ? "bg-accent/60"
-                                : "",
-                            ].join(" ")}
-                            @click=${() => this._selectLocale(entry.tag)}
-                          >
-                            <span>${entry.native}</span>
-                            <span class="text-xs text-muted-foreground">
-                              ${entry.english}
-                            </span>
-                          </button>
-                        `,
-                      )}
-                </div>
-              </div>
-            `
-          : nothing}
-      </div>
-    `;
-  }
-
-  // ── Feed group helpers ────────────────────────────────────────────
-
-  private _syncFeedDirty() {
-    this._feedDirty = this._mainRssFeed !== this._origMainRssFeed;
-  }
-
-  private _saveFeeds() {
-    if (this._feedLoading || !this._feedDirty) return;
+  private _saveMainRssFeed(value: string) {
+    if (this._feedLoading || value === this._mainRssFeed) return;
+    this._mainRssFeed = value;
     this._feedLoading = true;
     this.dispatchEvent(
       new CustomEvent("jant:settings-save", {
@@ -583,7 +456,7 @@ export class JantSettingsGeneral extends LitElement {
         detail: {
           endpoint: "/settings/general/feeds",
           data: {
-            mainRssFeed: this._mainRssFeed,
+            mainRssFeed: value,
           },
           section: "feeds",
         },
@@ -631,6 +504,65 @@ export class JantSettingsGeneral extends LitElement {
     );
   }
 
+  // ── Discover helpers ──────────────────────────────────────────────
+
+  /**
+   * What this site's feeds declare, as of the controls on screen right now.
+   *
+   * The same `resolveDiscoverMode` the server runs, over the same inputs, so
+   * the checkbox cannot disagree with the feed. It has to be computed here
+   * rather than sent down resolved because two of its inputs — search
+   * indexing and the feed switch — are controls on this page: a value resolved
+   * on the server is correct until the first click and wrong from then until
+   * the next page load, which is exactly the state an owner reads it in.
+   */
+  private _effectiveDiscoverMode(overrides: { noindex?: boolean } = {}) {
+    return resolveDiscoverMode({
+      // "" is never chosen, which is what lets the rules below decide.
+      storedValue: this._discover || null,
+      defaultValue: this.discoverDefault || null,
+      demoMode: this.demoMode,
+      noindex: overrides.noindex ?? this._noindex,
+      rssFeedsEnabled: this.feedsEnabled,
+    });
+  }
+
+  /**
+   * On writes `latest`: the directory may read any public post, and decides
+   * itself which list each one reaches — featured posts on its home, links
+   * and quotes on their own lists.
+   *
+   * A site that stored `featured` under an older release still reads as
+   * ticked, and stays `featured` until its owner touches the box: widening
+   * what the directory may show is the owner's to do, not an upgrade's.
+   */
+  private _onDiscoverToggle(enabled: boolean) {
+    this._saveDiscover(enabled ? "latest" : "off");
+  }
+
+  /**
+   * Store the choice the owner just made.
+   *
+   * The control is disabled while a save is in flight, so a second call
+   * cannot arrive before the first has answered; the guard covers the event
+   * that is already queued when that happens.
+   */
+  private _saveDiscover(value: "latest" | "off") {
+    if (this._discoverLoading) return;
+    this._discover = value;
+    this._discoverLoading = true;
+    this.dispatchEvent(
+      new CustomEvent("jant:settings-save", {
+        bubbles: true,
+        detail: {
+          endpoint: "/settings/general/discover",
+          data: { discover: value },
+          section: "discover",
+        },
+      }),
+    );
+  }
+
   /** Submit on Enter from non-textarea fields */
   private _onKeydown(
     e: globalThis.KeyboardEvent,
@@ -666,21 +598,23 @@ export class JantSettingsGeneral extends LitElement {
           ?disabled=${loading || !dirty}
           @click=${onSave}
         >
-          ${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}
+          ${
+            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.save}
         </button>
       </div>
@@ -711,10 +645,8 @@ export class JantSettingsGeneral extends LitElement {
           value=${value}
           class="mt-1"
           .checked=${checked}
-          @change=${() => {
-            this._mainRssFeed = value;
-            this._syncFeedDirty();
-          }}
+          ?disabled=${this._feedLoading}
+          @change=${() => this._saveMainRssFeed(value)}
         />
         <div>
           <div class="font-medium">${title}</div>
@@ -724,47 +656,39 @@ export class JantSettingsGeneral extends LitElement {
     `;
   }
 
-  private async _copyFeedUrl(value: string) {
-    try {
-      if (!globalThis.navigator.clipboard?.writeText) {
-        throw new Error("Clipboard unavailable");
-      }
-
-      await globalThis.navigator.clipboard.writeText(value);
-      showToast(this.labels.feedUrlCopied);
-    } catch {
-      showToast(this.labels.copyFailed, "error");
-    }
-  }
-
-  private _renderFeedInfoRow(
-    label: string,
-    value: string,
-    description?: string,
-  ) {
+  /**
+   * One feed address with a copy button.
+   *
+   * The same field `ui/shared/CopyField.tsx` renders on the public subscribe
+   * page, driven by the same `client/copy-field.ts` enhancer — hence the shared
+   * classes. lit-html cannot interpolate attribute names, so the enhancer's
+   * hooks are spelled out; `jant-settings-general.test.ts` asserts they match.
+   * Unlike the public page the button is not rendered hidden: settings is
+   * behind auth, where the client bundle is always present.
+   */
+  private _renderFeedUrl(label: string, value: string, description?: string) {
     return html`
-      <div class="flex min-w-0 flex-col gap-1">
+      <div class=${COPY_FIELD_CLASS} data-copy-field-root>
         <p class="text-sm font-medium">${label}</p>
-        ${description
-          ? html`<p class="text-sm text-muted-foreground">${description}</p>`
-          : ""}
-        <div class="relative">
+        ${
+          description
+            ? html`<p class="text-sm text-muted-foreground">${description}</p>`
+            : ""
+        }
+        <div class=${COPY_FIELD_CONTROL_CLASS}>
           <input
             type="text"
-            class="input w-full pr-20 font-mono text-sm"
+            class=${COPY_FIELD_INPUT_CLASS}
             .value=${value}
             readonly
             aria-label=${label}
-            @click=${(e: Event) =>
-              (e.currentTarget as HTMLInputElement).select()}
-            @focus=${(e: Event) =>
-              (e.currentTarget as HTMLInputElement).select()}
+            data-copy-field-value
           />
           <button
             type="button"
-            class="btn-sm-outline absolute right-2 top-1/2 h-7 -translate-y-1/2 px-2.5 text-xs"
-            data-copy-feed-url
-            @click=${() => void this._copyFeedUrl(value)}
+            class=${COPY_FIELD_BUTTON_CLASS}
+            data-copy-field=${this.labels.feedUrlCopied}
+            data-copy-field-failed=${this.labels.copyFailed}
           >
             ${this.labels.copy}
           </button>
@@ -779,319 +703,469 @@ export class JantSettingsGeneral extends LitElement {
     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"
+        ${
+          status.state === "ready"
             ? html`
-                <form
-                  class="inline"
-                  method="post"
-                  action=${this.aboutCreateUrl}
+                <a
+                  class="font-medium text-foreground underline-offset-4 hover:underline"
+                  href=${this.aboutEditUrl}
                 >
-                  <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>
+                  ${this.labels.editAboutPage}
+                </a>
               `
-            : html`
-                <span class="text-destructive"
-                  >${this.labels.aboutPageConflict}</span
-                >
-              `}
+            : 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() {
+  // ── Sections, in the order `render()` lists them ──────────────────
+  //
+  // Each section carries only its own spacing (`SECTION_CLASS`); the rules
+  // between them are drawn by the container, so reordering is a change to
+  // `render()` alone.
+
+  private _renderSiteSection() {
     return html`
-      <div class="flex flex-col gap-8">
-        <div>
-          <h2 class="text-lg font-semibold">${this.labels.general}</h2>
+      <section
+        class="${SECTION_CLASS} gap-4"
+        @keydown=${(e: globalThis.KeyboardEvent) =>
+          this._onKeydown(
+            e,
+            () => this._saveSite(),
+            this._siteDirty,
+            this._siteLoading,
+          )}
+      >
+        ${this._renderSectionTitle(this.labels.site)}
+        <div class="field">
+          <label class="label">${this.labels.siteName}</label>
+          <input
+            type="text"
+            class="input"
+            maxlength=${MAX_SITE_NAME_LENGTH}
+            .value=${this._siteName}
+            placeholder=${this.siteNameFallback}
+            @input=${(e: Event) => {
+              this._siteName = (e.target as HTMLInputElement).value;
+              this._syncSiteDirty();
+            }}
+          />
         </div>
 
-        <section
-          class="flex flex-col gap-4"
-          @keydown=${(e: globalThis.KeyboardEvent) =>
-            this._onKeydown(
-              e,
-              () => this._saveSite(),
-              this._siteDirty,
-              this._siteLoading,
-            )}
-        >
-          ${this._renderSectionTitle(this.labels.site)}
-          <div class="field">
-            <label class="label">${this.labels.siteName}</label>
-            <input
-              type="text"
-              class="input"
-              maxlength=${MAX_SITE_NAME_LENGTH}
-              .value=${this._siteName}
-              placeholder=${this.siteNameFallback}
-              @input=${(e: Event) => {
-                this._siteName = (e.target as HTMLInputElement).value;
-                this._syncSiteDirty();
-              }}
-            />
-          </div>
+        <div class="field">
+          <label class="label">${this.labels.aboutBlog}</label>
+          <div class="settings-tiptap-editor" data-settings-desc-editor></div>
+          <p class="text-sm text-muted-foreground mt-1">
+            ${this.labels.aboutBlogHelp}
+          </p>
+          ${this._renderAboutPageRow()}
+        </div>
 
-          <div class="field">
-            <label class="label">${this.labels.aboutBlog}</label>
-            <div class="settings-tiptap-editor" data-settings-desc-editor></div>
-            <p class="text-sm text-muted-foreground mt-1">
-              ${this.labels.aboutBlogHelp}
-            </p>
-            ${this._renderAboutPageRow()}
-          </div>
+        <div class="field">
+          <label class="label">${this.labels.siteFooter}</label>
+          <div class="settings-tiptap-editor" data-settings-footer-editor></div>
+          <p class="text-sm text-muted-foreground mt-1">
+            ${this.labels.footerHelp}
+          </p>
+        </div>
 
-          <div class="field">
-            <label class="label">${this.labels.siteFooter}</label>
-            <div
-              class="settings-tiptap-editor"
-              data-settings-footer-editor
-            ></div>
-            <p class="text-sm text-muted-foreground mt-1">
-              ${this.labels.footerHelp}
-            </p>
-          </div>
+        ${this._renderSaveAction(this._siteLoading, this._siteDirty, () =>
+          this._saveSite(),
+        )}
+      </section>
+    `;
+  }
 
-          ${this._renderSaveAction(this._siteLoading, this._siteDirty, () =>
-            this._saveSite(),
-          )}
-        </section>
-
-        <section
-          class="flex flex-col gap-4 border-t pt-8"
-          @keydown=${(e: globalThis.KeyboardEvent) =>
-            this._onKeydown(
-              e,
-              () => this._saveLocale(),
-              this._localeDirty,
-              this._localeLoading,
-            )}
-        >
-          ${this._renderSectionTitle(this.labels.languageAndTime)}
-          <div class="field">
-            <label id="site-language-label" class="label"
-              >${this.labels.siteLanguage}</label
-            >
-            ${this._renderLanguagePicker()}
-            <p class="text-sm text-muted-foreground mt-1">
-              ${this.labels.siteLanguageHelp}
-            </p>
-            <p class="text-sm text-muted-foreground mt-1">
-              ${this.labels.contentLanguagePreview}
-              <code class="rounded bg-muted px-1.5 py-0.5 text-xs"
-                >${`<html lang="${this._siteLanguage || "en"}">`}</code
-              >
-            </p>
-          </div>
+  /**
+   * Search engine indexing and Jant Discover.
+   *
+   * The two groups sit further apart than a section's heading sits from its
+   * first control, so the Discover help text does not read as belonging to
+   * the indexing checkbox.
+   */
+  private _renderVisibilitySection() {
+    return html`
+      <section class="${SECTION_CLASS} gap-6">
+        ${this._renderSectionTitle(this.labels.siteVisibility)}
+        <div class="flex flex-col gap-2">
+          <label class="flex items-center gap-2 cursor-pointer">
+            <input
+              type="checkbox"
+              class="checkbox"
+              .checked=${!this._noindex}
+              ?disabled=${this.demoMode || this._searchLoading}
+              @change=${(e: Event) =>
+                this._saveSearchToggle((e.target as HTMLInputElement).checked)}
+            />
+            <span>${this.labels.allowIndexing}</span>
+          </label>
+          ${
+            this.demoMode
+              ? html`<p class="text-sm text-muted-foreground">
+                  ${this.labels.demoSeoLocked}
+                </p>`
+              : nothing
+          }
+        </div>
+        ${this._renderDiscoverForm()}
+      </section>
+    `;
+  }
 
-          <div class="field">
-            <label id="dashboard-language-label" class="label"
-              >${this.labels.dashboardLanguage}</label
-            >
-            <select
-              class="select"
-              aria-labelledby="dashboard-language-label"
-              @change=${(e: Event) => {
-                this._dashboardLanguage = (e.target as HTMLSelectElement).value;
-                this._syncLocaleDirty();
-              }}
-            >
-              ${this.dashboardLanguages.map(
-                (lang) => html`
-                  <option
-                    value=${lang.value}
-                    ?selected=${this._dashboardLanguage === lang.value}
-                  >
-                    ${lang.label}
-                  </option>
-                `,
-              )}
-            </select>
-            <p class="text-sm text-muted-foreground mt-1">
-              ${this.labels.dashboardLanguageHelp}
-            </p>
+  private _renderFeedsSection() {
+    return html`
+      <section class="${SECTION_CLASS} gap-4">
+        ${this._renderSectionTitle(this.labels.feeds)}
+        <div class="field">
+          <p class="label">${this.labels.mainRssFeed}</p>
+          <p class="text-sm text-muted-foreground mt-1">
+            ${this.labels.mainRssFeedHelp}
+          </p>
+          <div class="mt-3 flex flex-col gap-2">
+            ${this._renderMainRssFeedOption(
+              "featured",
+              this.labels.featuredFeedOption,
+              this.labels.featuredFeedOptionDescription,
+            )}
+            ${this._renderMainRssFeedOption(
+              "latest",
+              this.labels.latestFeedOption,
+              this.labels.latestFeedOptionDescription,
+            )}
           </div>
+          <p class="text-sm text-muted-foreground mt-2">
+            ${this.labels.mainRssFeedWarning}
+          </p>
+        </div>
 
-          <div class="field">
-            <label class="label">${this.labels.cjkFont}</label>
-            <select
-              class="select"
-              @change=${(e: Event) => {
-                this._cjkSerifFont = (e.target as HTMLSelectElement).value;
-                this._syncLocaleDirty();
-              }}
-            >
-              ${this.cjkFonts.map(
-                (font) => html`
-                  <option
-                    value=${font.value}
-                    ?selected=${this._cjkSerifFont === font.value}
-                  >
-                    ${font.label}
-                  </option>
-                `,
-              )}
-            </select>
-            <p class="text-sm text-muted-foreground mt-1">
-              ${this.labels.cjkFontHelp}
-            </p>
-          </div>
+        <div class="rounded-xl border border-border/70 bg-muted/30 p-4">
+          <div class="flex flex-col gap-4">
+            <div class="flex flex-col gap-1">
+              <p class="text-sm font-medium">
+                ${this.labels.availableFeedUrls}
+              </p>
+              <p class="text-sm text-muted-foreground">
+                ${this.labels.availableFeedUrlsHelp}
+                ${
+                  this.feedsDocsUrl
+                    ? html`
+                        <a
+                          href=${this.feedsDocsUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          class="underline hover:text-foreground transition-colors"
+                          >${this.labels.feedsDocs}</a
+                        >
+                      `
+                    : ""
+                }
+              </p>
+            </div>
 
-          <div class="field">
-            <label class="label">${this.labels.timeZone}</label>
-            <select
-              class="select"
-              @change=${(e: Event) => {
-                this._timeZone = (e.target as HTMLSelectElement).value;
-                this._syncLocaleDirty();
-              }}
-            >
-              ${this.timezones.map(
-                (tz) => html`
-                  <option
-                    value=${tz.value}
-                    ?selected=${this._timeZone === tz.value}
-                  >
-                    ${tz.label}
-                  </option>
-                `,
-              )}
-            </select>
+            ${this._renderFeedUrl(this.labels.mainFeedUrl, this.mainFeedUrl)}
+            ${this._renderFeedUrl(
+              this.labels.latestFeedUrl,
+              this.latestFeedUrl,
+            )}
+            ${this._renderFeedUrl(
+              this.labels.featuredFeedUrl,
+              this.featuredFeedUrl,
+            )}
+            ${this._renderFeedUrl(
+              this.labels.archiveFeedUrl,
+              this.archiveFeedUrl,
+              this.labels.archiveFeedUrlHelp,
+            )}
           </div>
+        </div>
+      </section>
+    `;
+  }
 
-          ${this._renderSaveAction(this._localeLoading, this._localeDirty, () =>
-            this._saveLocale(),
+  private _renderTimeSection() {
+    return html`
+      <section
+        class="${SECTION_CLASS} gap-4"
+        @keydown=${(e: globalThis.KeyboardEvent) =>
+          this._onKeydown(
+            e,
+            () => this._saveLocale(),
+            this._localeDirty,
+            this._localeLoading,
           )}
-        </section>
-
-        <section
-          class="flex flex-col gap-4 border-t pt-8"
-          @keydown=${(e: globalThis.KeyboardEvent) =>
-            this._onKeydown(
-              e,
-              () => this._saveFeeds(),
-              this._feedDirty,
-              this._feedLoading,
+      >
+        ${this._renderSectionTitle(this.labels.timeSection)}
+        <div class="field">
+          <label class="label">${this.labels.timeZone}</label>
+          <select
+            class="select"
+            @change=${(e: Event) => {
+              this._timeZone = (e.target as HTMLSelectElement).value;
+              this._syncLocaleDirty();
+            }}
+          >
+            ${this.timezones.map(
+              (tz) => html`
+                <option
+                  value=${tz.value}
+                  ?selected=${this._timeZone === tz.value}
+                >
+                  ${tz.label}
+                </option>
+              `,
             )}
-        >
-          ${this._renderSectionTitle(this.labels.feeds)}
-          <div class="field">
-            <p class="label">${this.labels.mainRssFeed}</p>
-            <p class="text-sm text-muted-foreground mt-1">
-              ${this.labels.mainRssFeedHelp}
-            </p>
-            <div class="mt-3 flex flex-col gap-2">
-              ${this._renderMainRssFeedOption(
-                "featured",
-                this.labels.featuredFeedOption,
-                this.labels.featuredFeedOptionDescription,
-              )}
-              ${this._renderMainRssFeedOption(
-                "latest",
-                this.labels.latestFeedOption,
-                this.labels.latestFeedOptionDescription,
-              )}
-            </div>
-            <p class="text-sm text-muted-foreground mt-2">
-              ${this.labels.mainRssFeedWarning}
-            </p>
-          </div>
+          </select>
+        </div>
 
-          <div class="rounded-xl border border-border/70 bg-muted/30 p-4">
-            <div class="flex flex-col gap-4">
-              <div class="flex flex-col gap-1">
-                <p class="text-sm font-medium">
-                  ${this.labels.availableFeedUrls}
-                </p>
-                <p class="text-sm text-muted-foreground">
-                  ${this.labels.availableFeedUrlsHelp}
-                </p>
-              </div>
-
-              ${this._renderFeedInfoRow(
-                this.labels.mainFeedUrl,
-                this.mainFeedUrl,
-              )}
-              ${this._renderFeedInfoRow(
-                this.labels.latestFeedUrl,
-                this.latestFeedUrl,
-              )}
-              ${this._renderFeedInfoRow(
-                this.labels.featuredFeedUrl,
-                this.featuredFeedUrl,
-              )}
-              ${this._renderFeedInfoRow(
-                this.labels.archiveFeedUrl,
-                this.archiveFeedUrl,
-                this.labels.archiveFeedUrlHelp,
-              )}
-            </div>
-          </div>
+        ${this._renderSaveAction(this._localeLoading, this._localeDirty, () =>
+          this._saveLocale(),
+        )}
+      </section>
+    `;
+  }
 
-          ${this._renderSaveAction(this._feedLoading, this._feedDirty, () =>
-            this._saveFeeds(),
-          )}
-        </section>
+  private _renderHomeSection() {
+    return html`
+      <section class="${SECTION_CLASS} gap-4">
+        ${this._renderSectionTitle(this.labels.home)}
+        <label class="flex items-center gap-2 cursor-pointer">
+          <input
+            type="checkbox"
+            class="checkbox"
+            .checked=${this._showJantBrandingOnHome}
+            ?disabled=${this._homeLoading}
+            @change=${(e: Event) =>
+              this._saveHomeToggle((e.target as HTMLInputElement).checked)}
+          />
+          <span>${this.labels.showJantBrandingOnHome}</span>
+        </label>
+      </section>
+    `;
+  }
 
-        <section class="flex flex-col gap-4 border-t pt-8 pb-6">
-          ${this._renderSectionTitle(this.labels.home)}
+  /**
+   * Jant Discover.
+   *
+   * Saves on change, like the indexing checkbox next to it: the box is a
+   * complete answer on its own, so there is nothing a Save button would be
+   * waiting for. One box and no sub-choice — which of a blog's posts reach
+   * which list is the directory's own rule, stated on the directory.
+   *
+   * Ticking the box is also what announces a self-hosted site to the
+   * directory.
+   */
+  private _renderDiscoverForm() {
+    const effective = this._effectiveDiscoverMode();
+    const enabled = effective !== "none";
+    const locked = this.demoMode || !this.feedsEnabled;
+    // The box unticks itself when search indexing goes off, and a control that
+    // moves on its own has to say why. Asked as a counterfactual rather than
+    // read off `noindex`, so the line appears only where it is the reason: a
+    // site the deployment would have listed, held back by that one setting.
+    // A site nobody would list either way is not being held back by anything,
+    // and an owner who ticked the box is not affected at all.
+    const heldBackBySearch =
+      !locked &&
+      !enabled &&
+      this._effectiveDiscoverMode({ noindex: false }) !== "none";
+
+    return html`
+      <div class="flex flex-col gap-3">
+        <div class="flex flex-col gap-2">
           <label class="flex items-center gap-2 cursor-pointer">
             <input
               type="checkbox"
               class="checkbox"
-              .checked=${this._showJantBrandingOnHome}
-              ?disabled=${this._homeLoading}
+              .checked=${enabled}
+              ?disabled=${locked || this._discoverLoading}
               @change=${(e: Event) =>
-                this._saveHomeToggle((e.target as HTMLInputElement).checked)}
+                this._onDiscoverToggle((e.target as HTMLInputElement).checked)}
             />
-            <span>${this.labels.showJantBrandingOnHome}</span>
+            <span>${this.labels.discoverEnabled}</span>
           </label>
-        </section>
+          <p class="text-sm text-muted-foreground">
+            ${
+              locked
+                ? this.demoMode
+                  ? this.labels.discoverDemoLocked
+                  : this.labels.discoverFeedsOffLocked
+                : this._renderDiscoverIntro()
+            }
+          </p>
+          ${
+            heldBackBySearch
+              ? html`<p class="text-sm text-muted-foreground">
+                  ${this.labels.discoverSearchOff}
+                </p>`
+              : nothing
+          }
+        </div>
+        ${locked ? nothing : this._renderDiscoverStatus()}
       </div>
     `;
   }
 
-  private _renderSearchForm() {
+  /**
+   * The help line, with each page it names linking to that page.
+   *
+   * Which words link where is `discoverIntroRuns`'s to decide, so the setup
+   * screen, which shows the same line, links the same words.
+   */
+  private _renderDiscoverIntro() {
+    const runs = discoverIntroRuns(
+      this.labels.discoverIntro ?? "",
+      {
+        name: this.labels.discoverName ?? "",
+        rules: this.labels.discoverRules ?? "",
+      },
+      this.discoverPages,
+    );
+
+    return runs.map((run) =>
+      run.href
+        ? html`<a
+            href=${run.href}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="underline hover:text-foreground transition-colors"
+            >${run.text}</a
+          >`
+        : run.text,
+    );
+  }
+
+  /**
+   * What is left to say once the controls above have spoken.
+   *
+   * Not a status report — a site whose Discover setting is doing exactly what
+   * it says gets nothing here, and no heading announces a block that is
+   * usually absent. The server sends a line only for a problem, a task, or an
+   * answer still outstanding; deliberately all local evidence, because the
+   * directory takes no status queries and cannot be asked whether a person has
+   * moderated the site.
+   *
+   * The announce button appears when the directory has not heard from this
+   * site; the manual form only when an announcement actually failed — beside a
+   * working one it would read as a normal route in rather than the recovery it
+   * is. The lines are what the server sent with the page, so ticking the box
+   * does not rewrite them; the next load does.
+   */
+  private _renderDiscoverStatus() {
+    const status = this._parsedDiscoverStatus();
+    if (!status) return nothing;
+    // The server wrote these for the mode the page loaded with. A blog that
+    // has just switched itself off is not the blog they describe.
+    if (this._effectiveDiscoverMode() === "none") return nothing;
+    if (status.lines.length === 0 && !status.showAnnounce) return nothing;
+
     return html`
-      <section class="flex flex-col gap-4 border-t pt-8">
-        ${this._renderSectionTitle(this.labels.search)}
-        <label class="flex items-center gap-2 cursor-pointer">
-          <input
-            type="checkbox"
-            class="checkbox"
-            .checked=${!this._noindex}
-            ?disabled=${this.demoMode || this._searchLoading}
-            @change=${(e: Event) =>
-              this._saveSearchToggle((e.target as HTMLInputElement).checked)}
-          />
-          <span>${this.labels.allowIndexing}</span>
-        </label>
-        ${this.demoMode
-          ? html`<p class="text-sm text-muted-foreground">
-              ${this.labels.demoSeoLocked}
-            </p>`
-          : nothing}
-      </section>
+      <div class="flex flex-col gap-1 border-t pt-3">
+        ${status.lines.map(
+          (line) => html`<p class="text-sm text-muted-foreground">${line}</p>`,
+        )}
+        ${
+          status.showAnnounce
+            ? html`
+                <div class="flex flex-wrap items-center gap-3 mt-1">
+                  <button
+                    type="button"
+                    class="btn-outline"
+                    ?disabled=${this._discoverLoading}
+                    @click=${() => this._announce()}
+                  >
+                    ${this.labels.discoverAnnounce}
+                  </button>
+                  ${
+                    status.submitUrl
+                      ? html`<a
+                          class="text-sm underline hover:text-foreground transition-colors"
+                          href=${status.submitUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          >${this.labels.discoverAnnounceManual}</a
+                        >`
+                      : nothing
+                  }
+                </div>
+              `
+            : nothing
+        }
+      </div>
     `;
   }
 
+  private _parsedDiscoverStatus(): {
+    lines: string[];
+    showAnnounce: boolean;
+    submitUrl: string | null;
+  } | null {
+    if (!this.discoverStatus) return null;
+    try {
+      const parsed: unknown = JSON.parse(this.discoverStatus);
+      if (typeof parsed !== "object" || parsed === null) return null;
+      const value = parsed as Record<string, unknown>;
+      const lines = Array.isArray(value["lines"])
+        ? value["lines"].filter(
+            (line): line is string => typeof line === "string",
+          )
+        : [];
+      return {
+        lines,
+        showAnnounce: value["showAnnounce"] === true,
+        submitUrl:
+          typeof value["submitUrl"] === "string" ? value["submitUrl"] : null,
+      };
+    } catch {
+      // A settings page that renders without its status block is far better
+      // than one that does not render.
+      return null;
+    }
+  }
+
+  private _announce() {
+    if (this._discoverLoading) return;
+    this._discoverLoading = true;
+    this.dispatchEvent(
+      new CustomEvent("jant:settings-save", {
+        bubbles: true,
+        detail: {
+          endpoint: "/settings/general/discover/announce",
+          data: {},
+          section: "discover",
+        },
+      }),
+    );
+  }
+
   render() {
     return html`
-      <div class="flex flex-col">
-        ${this._renderGeneralForm()} ${this._renderSearchForm()}
+      <div class="flex flex-col gap-8">
+        <h2 class="text-lg font-semibold">${this.labels.general}</h2>
+        <div class="flex flex-col divide-y">
+          ${this._renderSiteSection()} ${this._renderVisibilitySection()}
+          ${this._renderFeedsSection()} ${this._renderTimeSection()}
+          ${this._renderHomeSection()}
+        </div>
       </div>
     `;
   }