feat(admin): add Lingui i18n infrastructure

lingui.config.ts

@@ -0,0 +1,15 @@
+import type { LinguiConfig } from "@lingui/conf";
+
+const config: LinguiConfig = {
+	sourceLocale: "en",
+	locales: ["en"],
+	catalogs: [
+		{
+			path: "<rootDir>/packages/admin/src/locales/{locale}/messages",
+			include: ["<rootDir>/packages/admin/src/**/*.{ts,tsx}"],
+		},
+	],
+	format: "po",
+};
+
+export default config;

packages/admin/package.json

@@ -12,15 +12,23 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./styles.css": "./dist/styles.css"
+    "./styles.css": "./dist/styles.css",
+    "./locales": {
+      "types": "./dist/locales/index.d.ts",
+      "default": "./dist/locales/index.js"
+    },
+    "./locales/*": "./dist/locales/*"
   },
   "scripts": {
-    "build": "tsdown && npx @tailwindcss/cli -i src/styles.css -o dist/styles.css --minify",
+    "build": "node --run locale:compile && tsdown && node --run locale:copy && npx @tailwindcss/cli -i src/styles.css -o dist/styles.css --minify",
     "dev": "tsdown src/index.ts --format esm --dts --watch",
     "prepublishOnly": "node --run build",
     "check": "publint && attw --pack --ignore-rules=cjs-resolves-to-esm --ignore-rules=no-resolution",
     "test": "vitest",
-    "typecheck": "tsgo --noEmit"
+    "typecheck": "tsgo --noEmit",
+    "locale:compile": "lingui compile --namespace es",
+    "locale:copy": "node ./scripts/copy-locales.js",
+    "locale:extract": "lingui extract --clean"
   },
   "dependencies": {
     "@cloudflare/kumo": "^1.16.0",
@@ -29,6 +37,8 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emdash-cms/blocks": "workspace:*",
     "@floating-ui/react": "^0.27.16",
+    "@lingui/core": "catalog:",
+    "@lingui/react": "catalog:",
     "@phosphor-icons/react": "catalog:",
     "@tanstack/react-query": "catalog:",
     "@tanstack/react-router": "catalog:",
@@ -58,6 +68,10 @@
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "catalog:",
+    "@babel/core": "^7.29.0",
+    "@lingui/babel-plugin-lingui-macro": "catalog:",
+    "@lingui/cli": "catalog:",
+    "@lingui/macro": "catalog:",
     "@tailwindcss/cli": "^4.1.10",
     "@tailwindcss/typography": "^0.5.19",
     "@testing-library/react": "^16.3.0",

packages/admin/scripts/copy-locales.js

@@ -0,0 +1,18 @@
+/**
+ * Copy compiled locale catalogs (.mjs) from src/locales to dist/locales.
+ * Run after `lingui compile` to include catalogs in the published package.
+ */
+import { readdirSync, mkdirSync, copyFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const srcDir = join(__dirname, "..", "src", "locales");
+const distDir = join(__dirname, "..", "dist", "locales");
+
+for (const entry of readdirSync(srcDir, { withFileTypes: true })) {
+	if (!entry.isDirectory()) continue;
+	const destDir = join(distDir, entry.name);
+	mkdirSync(destDir, { recursive: true });
+	copyFileSync(join(srcDir, entry.name, "messages.mjs"), join(destDir, "messages.mjs"));
+}

packages/admin/src/App.tsx

@@ -9,6 +9,9 @@
  */
 
 import { Toasty } from "@cloudflare/kumo";
+import { i18n } from "@lingui/core";
+import type { Messages } from "@lingui/core";
+import { I18nProvider } from "@lingui/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { RouterProvider } from "@tanstack/react-router";
 import * as React from "react";
@@ -33,27 +36,43 @@ const router = createAdminRouter(queryClient);
 export interface AdminAppProps {
 	/** Plugin admin modules keyed by plugin ID */
 	pluginAdmins?: PluginAdmins;
+	/** Active locale code */
+	locale?: string;
+	/** Compiled Lingui messages for the active locale */
+	messages?: Messages;
 }
 
 /**
  * Main Admin Application
  */
 const EMPTY_PLUGINS: PluginAdmins = {};
 
-export function AdminApp({ pluginAdmins = EMPTY_PLUGINS }: AdminAppProps) {
+export function AdminApp({
+	pluginAdmins = EMPTY_PLUGINS,
+	locale = "en",
+	messages = {},
+}: AdminAppProps) {
 	React.useEffect(() => {
 		document.getElementById("emdash-boot-loader")?.remove();
 	}, []);
 
+	const i18nInitialized = React.useRef(false);
+	if (!i18nInitialized.current) {
+		i18n.loadAndActivate({ locale, messages });
+		i18nInitialized.current = true;
+	}
+
 	return (
 		<ThemeProvider>
-			<Toasty>
-				<PluginAdminProvider pluginAdmins={pluginAdmins}>
-					<QueryClientProvider client={queryClient}>
-						<RouterProvider router={router} />
-					</QueryClientProvider>
-				</PluginAdminProvider>
-			</Toasty>
+			<I18nProvider i18n={i18n}>
+				<Toasty>
+					<PluginAdminProvider pluginAdmins={pluginAdmins}>
+						<QueryClientProvider client={queryClient}>
+							<RouterProvider router={router} />
+						</QueryClientProvider>
+					</PluginAdminProvider>
+				</Toasty>
+			</I18nProvider>
 		</ThemeProvider>
 	);
 }

packages/admin/src/components/LocaleSwitcher.tsx

@@ -7,6 +7,7 @@
  * Only renders when i18n is configured (manifest.i18n is present).
  */
 
+import { useLingui } from "@lingui/react/macro";
 import { GlobeSimple } from "@phosphor-icons/react";
 import React from "react";
 
@@ -46,6 +47,7 @@ export function LocaleSwitcher({
 	className,
 	size = "md",
 }: LocaleSwitcherProps) {
+	const { t } = useLingui();
 	return (
 		<div className={cn("flex items-center gap-1.5", className)}>
 			<GlobeSimple
@@ -55,19 +57,19 @@ export function LocaleSwitcher({
 			<select
 				value={value}
 				onChange={(e) => onChange(e.target.value)}
-				aria-label="Locale"
+				aria-label={t`Locale`}
 				className={cn(
 					"rounded-md border bg-transparent font-medium transition-colors",
 					"focus:ring-kumo-ring focus:outline-none focus:ring-2 focus:ring-offset-1",
 					"hover:bg-kumo-tint/50 cursor-pointer",
 					size === "sm" ? "px-1.5 py-0.5 text-xs" : "px-2 py-1 text-sm",
 				)}
 			>
-				{showAll && <option value="">All locales</option>}
+				{showAll && <option value="">{t`All locales`}</option>}
 				{locales.map((locale) => (
 					<option key={locale} value={locale}>
 						{locale.toUpperCase()}
-						{locale === defaultLocale ? " (default)" : ""}
+						{locale === defaultLocale ? t` (default)` : ""}
 					</option>
 				))}
 			</select>
@@ -88,23 +90,21 @@ export function LocaleBadges({
 	existingLocales: string[];
 	onLocaleClick?: (locale: string) => void;
 }) {
+	const { t } = useLingui();
 	const existingSet = new Set(existingLocales);
 
 	return (
 		<div className="flex items-center gap-0.5">
 			{locales.map((locale) => {
 				const exists = existingSet.has(locale);
+				const label = getLocaleLabel(locale);
 				return (
 					<button
 						key={locale}
 						type="button"
 						onClick={() => onLocaleClick?.(locale)}
 						disabled={!onLocaleClick}
-						title={
-							exists
-								? `${getLocaleLabel(locale)} \u2014 view translation`
-								: `${getLocaleLabel(locale)} \u2014 no translation`
-						}
+						title={exists ? t`${label} \u2014 view translation` : t`${label} \u2014 no translation`}
 						className={cn(
 							"rounded px-1 py-0.5 text-[10px] font-semibold uppercase leading-none transition-colors",
 							exists