Split eager English i18n shell

scripts/docs-stats.mjs

@@ -59,8 +59,8 @@ function computeStats() {
   // ---- Server domain handlers (server/worldmonitor/*/) ----
   const serverDomains = dirsIn('server/worldmonitor').length;
 
-  // ---- Locales (src/locales/*.json) ----
-  const locales = filesIn('src/locales').filter((f) => f.endsWith('.json')).length;
+  // ---- User-facing locales (src/locales/*.json, excluding shell fragments) ----
+  const locales = filesIn('src/locales').filter((f) => f.endsWith('.json') && !f.endsWith('.shell.json')).length;
 
   // ---- CI workflows (.github/workflows/*.yml) ----
   const workflows = filesIn('.github/workflows').filter((f) => f.endsWith('.yml') || f.endsWith('.yaml')).sort();

src/App.ts

@@ -78,6 +78,7 @@ import { RefreshScheduler } from '@/app/refresh-scheduler';
 import { PanelLayoutManager } from '@/app/panel-layout';
 import { DataLoaderManager } from '@/app/data-loader';
 import { EventHandlerManager } from '@/app/event-handlers';
+import { replaceRawI18nKeyPlaceholders } from '@/app/i18n-raw-key-healer';
 import { resolveUserRegion, resolvePreciseUserCoordinates, type PreciseCoordinates } from '@/utils/user-location';
 import { showProBanner } from '@/components/ProBanner';
 import { initAuthState, subscribeAuthState } from '@/services/auth-state';
@@ -161,6 +162,13 @@ export class App {
   private readonly handleConnectivityChange = (): void => {
     this.updateConnectivityUi();
   };
+  private readonly handleI18nResourcesLoaded = (ev: Event): void => {
+    const language = (ev as CustomEvent<{ language?: unknown }>).detail?.language;
+    if (language !== 'en') return;
+    // Scope this to the app container: body-level modals are user-opened after
+    // startup, by which point the full English bundle should already be loaded.
+    replaceRawI18nKeyPlaceholders(this.state.container, t);
+  };
   private readonly handleFollowedCountriesCapDrop = (ev: Event): void => {
     const detail = (ev as CustomEvent<{ kept?: unknown; dropped?: unknown }>).detail;
     const dropped = typeof detail?.dropped === 'number' ? detail.dropped : 0;
@@ -923,6 +931,8 @@ export class App {
       },
     });
 
+    window.addEventListener('wm:i18n:resources-loaded', this.handleI18nResourcesLoaded);
+
     await initDB();
     await initI18n();
     // Localize the static index.html shell — <title>, meta description, and
@@ -1429,6 +1439,7 @@ export class App {
     window.removeEventListener('resize', this.handleViewportPrime);
     window.removeEventListener('online', this.handleConnectivityChange);
     window.removeEventListener('offline', this.handleConnectivityChange);
+    window.removeEventListener('wm:i18n:resources-loaded', this.handleI18nResourcesLoaded);
     window.removeEventListener(WM_FOLLOWED_COUNTRIES_CAP_DROP, this.handleFollowedCountriesCapDrop);
     if (this.visiblePanelPrimeRaf !== null) {
       window.cancelAnimationFrame(this.visiblePanelPrimeRaf);

src/app/i18n-raw-key-healer.ts

@@ -0,0 +1,56 @@
+export type I18nTranslator = (key: string) => string;
+
+const RAW_I18N_KEY_RE = /^[a-z][A-Za-z0-9]*(?:\.[A-Za-z0-9_-]+)+$/;
+const TRANSLATABLE_ATTRIBUTES = ['aria-label', 'title', 'placeholder'] as const;
+const TEXT_NODE_TYPE = 3;
+
+export function translateRawI18nKeyPlaceholder(value: string, translate: I18nTranslator): string | null {
+  const key = value.trim();
+  if (!RAW_I18N_KEY_RE.test(key)) return null;
+
+  const translated = translate(key);
+  return translated !== key ? translated : null;
+}
+
+export function replaceRawI18nKeyPlaceholderText(value: string, translate: I18nTranslator): string | null {
+  const replacement = translateRawI18nKeyPlaceholder(value, translate);
+  if (replacement === null) return null;
+
+  const leading = value.match(/^\s*/)?.[0] ?? '';
+  const trailing = value.match(/\s*$/)?.[0] ?? '';
+  return `${leading}${replacement}${trailing}`;
+}
+
+export function replaceRawI18nKeyPlaceholders(root: ParentNode, translate: I18nTranslator): void {
+  const textNodes: Text[] = [];
+
+  const collectTextNodes = (node: Node): void => {
+    if (node.nodeType === TEXT_NODE_TYPE) {
+      textNodes.push(node as Text);
+      return;
+    }
+
+    for (const child of Array.from(node.childNodes)) {
+      collectTextNodes(child);
+    }
+  };
+
+  collectTextNodes(root as Node);
+
+  for (const node of textNodes) {
+    const next = replaceRawI18nKeyPlaceholderText(node.nodeValue ?? '', translate);
+    if (next !== null) {
+      node.nodeValue = next;
+    }
+  }
+
+  for (const el of Array.from(root.querySelectorAll<HTMLElement>('[aria-label], [title], [placeholder]'))) {
+    for (const attr of TRANSLATABLE_ATTRIBUTES) {
+      const value = el.getAttribute(attr);
+      if (!value) continue;
+
+      const replacement = translateRawI18nKeyPlaceholder(value, translate);
+      if (replacement !== null) el.setAttribute(attr, replacement);
+    }
+  }
+}