@jant/core 0.3.46 → 0.3.48

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

@@ -10,12 +10,16 @@
 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";
 import type {
   SettingsInitialData,
   SettingsLabels,
   SettingsTimezone,
   SettingsCjkFont,
-  SettingsLanguage,
 } from "./settings-types.js";
 import { showToast } from "../toast.js";
 import {
@@ -28,7 +32,6 @@ export class JantSettingsGeneral extends LitElement {
     labels: { type: Object },
     timezones: { type: Array },
     cjkFonts: { type: Array, attribute: "cjk-fonts" },
-    languages: { type: Array },
     siteNameFallback: { type: String, attribute: "sitename-fallback" },
     siteDescriptionFallback: {
       type: String,
@@ -49,6 +52,8 @@ export class JantSettingsGeneral extends LitElement {
 
     // Language, CJK & time group
     _siteLanguage: { state: true },
+    _localeOpen: { state: true },
+    _localeQuery: { state: true },
     _cjkSerifFont: { state: true },
     _timeZone: { state: true },
     _origLocale: { state: true },
@@ -75,7 +80,6 @@ export class JantSettingsGeneral extends LitElement {
   declare labels: SettingsLabels;
   declare timezones: SettingsTimezone[];
   declare cjkFonts: SettingsCjkFont[];
-  declare languages: SettingsLanguage[];
   declare siteNameFallback: string;
   declare siteDescriptionFallback: string;
   declare demoMode: boolean;
@@ -97,6 +101,10 @@ export class JantSettingsGeneral extends LitElement {
 
   // Language, CJK & time
   declare _siteLanguage: string;
+  /** Whether the locale combobox dropdown is currently open. */
+  declare _localeOpen: boolean;
+  /** Search query inside the locale combobox. */
+  declare _localeQuery: string;
   declare _cjkSerifFont: string;
   declare _timeZone: string;
   declare _origLocale: {
@@ -137,7 +145,6 @@ export class JantSettingsGeneral extends LitElement {
     this.labels = {} as SettingsLabels;
     this.timezones = [];
     this.cjkFonts = [];
-    this.languages = [];
     this.siteNameFallback = "";
     this.siteDescriptionFallback = "";
     this.demoMode = false;
@@ -157,6 +164,8 @@ export class JantSettingsGeneral extends LitElement {
     this._siteLoading = false;
 
     this._siteLanguage = "en";
+    this._localeOpen = false;
+    this._localeQuery = "";
     this._cjkSerifFont = "off";
     this._timeZone = "UTC";
     this._origLocale = {
@@ -181,8 +190,16 @@ export class JantSettingsGeneral extends LitElement {
     this._searchLoading = 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();
@@ -387,6 +404,146 @@ export class JantSettingsGeneral extends LitElement {
     );
   }
 
+  // ── 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;
+    }
+  };
+
+  private _onLocalePickerKeydown = (e: KeyboardEvent) => {
+    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" data-locale-picker>
+        <button
+          type="button"
+          class="input flex w-full items-center justify-between text-left"
+          aria-expanded=${this._localeOpen ? "true" : "false"}
+          aria-haspopup="listbox"
+          aria-labelledby="site-language-label"
+          @click=${this._toggleLocalePicker}
+        >
+          <span class="truncate">
+            ${current.native}
+            <span class="ml-2 text-xs text-muted-foreground">
+              ${current.tag} · ${Math.round(current.coverage * 100)}% translated
+            </span>
+          </span>
+          <span class="ml-2 text-muted-foreground" aria-hidden="true">▾</span>
+        </button>
+
+        ${this._localeOpen
+          ? html`
+              <div
+                class="absolute left-0 right-0 top-full z-10 mt-1 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 items-center justify-between gap-3 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 class="flex flex-col">
+                              <span>${entry.native}</span>
+                              <span class="text-xs text-muted-foreground">
+                                ${entry.tag} · ${entry.english}
+                              </span>
+                            </span>
+                            <span class="text-xs text-muted-foreground">
+                              ${Math.round(entry.coverage * 100)}% translated
+                            </span>
+                          </button>
+                        `,
+                      )}
+                </div>
+              </div>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+
   // ── Feed group helpers ────────────────────────────────────────────
 
   private _syncFeedDirty() {
@@ -652,25 +809,10 @@ export class JantSettingsGeneral extends LitElement {
         >
           ${this._renderSectionTitle(this.labels.languageAndTime)}
           <div class="field">
-            <label class="label">${this.labels.siteLanguage}</label>
-            <select
-              class="select"
-              @change=${(e: Event) => {
-                this._siteLanguage = (e.target as HTMLSelectElement).value;
-                this._syncLocaleDirty();
-              }}
+            <label id="site-language-label" class="label"
+              >${this.labels.siteLanguage}</label
             >
-              ${this.languages.map(
-                (lang) => html`
-                  <option
-                    value=${lang.value}
-                    ?selected=${this._siteLanguage === lang.value}
-                  >
-                    ${lang.label}
-                  </option>
-                `,
-              )}
-            </select>
+            ${this._renderLanguagePicker()}
             <p class="text-sm text-muted-foreground mt-1">
               ${this.labels.siteLanguageHelp}
             </p>

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

@@ -43,6 +43,10 @@ export interface SettingsLabels {
   markdownSupported: string;
   siteLanguage: string;
   siteLanguageHelp: string;
+  /** Placeholder shown inside the locale combobox search field. */
+  siteLanguageSearchPlaceholder: string;
+  /** Empty-state message when the search filters out every option. */
+  siteLanguageNoMatches: string;
   cjkFont: string;
   cjkFontHelp: string;
   timeZone: string;
@@ -71,12 +75,6 @@ export interface SettingsCjkFont {
   label: string;
 }
 
-/** Site language option for the select dropdown */
-export interface SettingsLanguage {
-  value: string;
-  label: string;
-}
-
 export interface SettingsInitialData {
   siteName: string;
   siteDescription: string;

package/src/client-auth.ts

@@ -1,7 +1,7 @@
 /**
  * Authenticated client entry point.
  *
- * Extends the public bundle with editor, upload, and dashboard interactions
+ * Extends the public bundle with editor, upload, and settings interactions
  * that should not be shipped to anonymous page views.
  */
 

package/src/db/__tests__/demo-canonical-snapshot.test.ts

@@ -74,5 +74,5 @@ describe("demo canonical snapshot", () => {
     } finally {
       rmSync(persistDir, { recursive: true, force: true });
     }
-  }, 240_000);
+  }, 360_000);
 });

package/src/db/__tests__/migration-rehearsal.test.ts

@@ -62,10 +62,7 @@ describe("migration rehearsal", () => {
       );
 
       expect(
-        queryLocalCount(
-          persistDir,
-          "SELECT COUNT(*) AS count FROM post WHERE deleted_at IS NULL",
-        ),
+        queryLocalCount(persistDir, "SELECT COUNT(*) AS count FROM post"),
       ).toBeGreaterThan(0);
       expect(
         queryLocalCount(persistDir, "SELECT COUNT(*) AS count FROM post_fts"),
@@ -73,5 +70,5 @@ describe("migration rehearsal", () => {
     } finally {
       rmSync(persistDir, { recursive: true, force: true });
     }
-  }, 90_000);
+  }, 600_000);
 });

package/src/db/backfills/0004_register_apple_touch_media_rows.sql

@@ -0,0 +1,65 @@
+-- Register apple-touch icons in the media table.
+--
+-- Pre-JAN-6, apple-touch icons were uploaded to storage but only referenced
+-- via the SITE_FAVICON_APPLE_TOUCH setting; they had no corresponding media
+-- row. The snapshot logic compensated with a hardcoded list of "storage
+-- setting keys", and the dashboard's media manager couldn't see the file.
+--
+-- JAN-6 makes apple-touch a first-class media entry so snapshot/admin
+-- behavior is uniform with avatar. This backfill creates the missing media
+-- rows for sites that already had apple-touch icons uploaded.
+--
+-- The size column is a placeholder (1). We have no way to read the real byte
+-- length from pure SQL, and the field is only used for storage budgeting
+-- that doesn't apply to favicon assets. Re-uploading the apple-touch icon
+-- through the dashboard refreshes size to the accurate value.
+--
+-- The provider is borrowed from an existing media row in the same site so
+-- the (provider, storage_key) unique index stays consistent with how that
+-- site's other media is tracked.
+INSERT INTO "media" (
+  "id",
+  "site_id",
+  "filename",
+  "original_name",
+  "mime_type",
+  "size",
+  "storage_key",
+  "provider",
+  "position",
+  "media_kind",
+  "created_at",
+  "updated_at"
+)
+SELECT
+  'med_apt_' || substr(s."site_id", 5),
+  s."site_id",
+  'apple-touch-icon.png',
+  'apple-touch-icon.png',
+  'image/png',
+  1,
+  s."value",
+  COALESCE(
+    (
+      SELECT m."provider"
+      FROM "media" m
+      WHERE m."site_id" = s."site_id"
+      ORDER BY m."created_at"
+      LIMIT 1
+    ),
+    'r2'
+  ),
+  'a0',
+  'image',
+  s."updated_at",
+  s."updated_at"
+FROM "site_setting" s
+WHERE s."key" = 'SITE_FAVICON_APPLE_TOUCH'
+  AND s."value" IS NOT NULL
+  AND trim(s."value") <> ''
+  AND NOT EXISTS (
+    SELECT 1
+    FROM "media" m
+    WHERE m."site_id" = s."site_id"
+      AND m."storage_key" = s."value"
+  );

package/src/db/migrations/0021_thankful_phalanx.sql

@@ -0,0 +1,16 @@
+DELETE FROM `post` WHERE `deleted_at` IS NOT NULL;--> statement-breakpoint
+DROP INDEX `idx_post_site_thread_live_created`;--> statement-breakpoint
+DROP INDEX `idx_post_site_status_deleted_published`;--> statement-breakpoint
+DROP INDEX `idx_post_site_status_deleted_activity`;--> statement-breakpoint
+DROP INDEX `idx_post_site_root_live_published_activity`;--> statement-breakpoint
+DROP INDEX `idx_post_site_root_live_draft_updated`;--> statement-breakpoint
+DROP INDEX `idx_post_site_reply_live_thread_created`;--> statement-breakpoint
+DROP INDEX `idx_post_site_featured_live_featured_at`;--> statement-breakpoint
+CREATE INDEX `idx_post_site_thread_created` ON `post` (`site_id`,`thread_id`,`created_at`,`id`);--> statement-breakpoint
+CREATE INDEX `idx_post_site_status_published` ON `post` (`site_id`,`status`,`published_at`);--> statement-breakpoint
+CREATE INDEX `idx_post_site_status_activity` ON `post` (`site_id`,`status`,`last_activity_at`);--> statement-breakpoint
+CREATE INDEX `idx_post_site_root_published_activity` ON `post` (`site_id`,`last_activity_at`,`id`) WHERE "post"."reply_to_id" IS NULL AND "post"."status" = 'published';--> statement-breakpoint
+CREATE INDEX `idx_post_site_root_draft_updated` ON `post` (`site_id`,`updated_at`,`id`) WHERE "post"."reply_to_id" IS NULL AND "post"."status" = 'draft';--> statement-breakpoint
+CREATE INDEX `idx_post_site_reply_thread_created` ON `post` (`site_id`,`thread_id`,`created_at`,`id`) WHERE "post"."reply_to_id" IS NOT NULL AND "post"."status" = 'published';--> statement-breakpoint
+CREATE INDEX `idx_post_site_featured_featured_at` ON `post` (`site_id`,`featured_at`,`thread_id`,`id`) WHERE "post"."status" = 'published' AND "post"."featured_at" IS NOT NULL;--> statement-breakpoint
+ALTER TABLE `post` DROP COLUMN `deleted_at`;