fix(admin): translate long-tail i18n leaks in admin UI (#940)

* fix(admin): translate long-tail i18n leaks in admin UI

Wrap remaining user-facing English strings across settings panels, marketplace,
sandboxed-plugin host, auth flows (Signup, Login, Passkey, DeviceAuthorize,
SetupWizard), taxonomy/menu management, content editor remnants, and lib/api
module-level functions.

For lib/api fallback messages, uses the i18n._(msg``) pattern since module-level
code can't call useLingui(). MenuList item count uses plural() which fixed an
existing grammar bug (1 items -> 1 item; test regex updated).

* fix(admin): restore <span> wrappers around BlockMenu i18n labels

The previous commit dropped the <span> wrappers around Back/Turn into/Duplicate/Delete
labels when wrapping in t``. The wrappers are needed for consistent flex layout
with the icon and to match the transforms-list pattern.

Author: ascorbic

.changeset/public-women-behave.md

@@ -0,0 +1,5 @@
+---
+"@emdash-cms/admin": patch
+---
+
+Fixes the long tail of untranslated English strings in the admin UI: settings panels, marketplace, sandboxed-plugin host, auth flows, taxonomy/menu management, and lib/api fallback messages. After this PR, EmDash admin UI is fully localizable across all known surfaces.

packages/admin/src/components/BlockKitFieldWidget.tsx

@@ -1,5 +1,6 @@
 import { Input, Switch } from "@cloudflare/kumo";
 import type { Element } from "@emdash-cms/blocks";
+import { useLingui } from "@lingui/react/macro";
 import * as React from "react";
 
 import { BlockKitMediaPickerField } from "./BlockKitMediaPickerField";
@@ -65,6 +66,7 @@ function BlockKitFieldElement({
 	value: unknown;
 	onChange: (actionId: string, value: unknown) => void;
 }) {
+	const { t } = useLingui();
 	switch (element.type) {
 		case "text_input":
 			return (
@@ -105,7 +107,7 @@ function BlockKitFieldElement({
 						value={typeof value === "string" ? value : ""}
 						onChange={(e) => onChange(element.action_id, e.target.value)}
 					>
-						<option value="">Select...</option>
+						<option value="">{t`Select...`}</option>
 						{options.map((opt) => (
 							<option key={opt.value} value={opt.value}>
 								{opt.label}
@@ -129,7 +131,7 @@ function BlockKitFieldElement({
 		default:
 			return (
 				<div className="text-sm text-kumo-subtle">
-					Unsupported widget element type: {(element as { type: string }).type}
+					{t`Unsupported widget element type: ${(element as { type: string }).type}`}
 				</div>
 			);
 	}

packages/admin/src/components/ContentEditor.tsx

@@ -613,7 +613,7 @@ export function ContentEditor({
 						<div
 							className="flex items-center text-xs text-kumo-subtle"
 							role="status"
-							aria-label="Autosave status"
+							aria-label={t`Autosave status`}
 							aria-live="polite"
 						>
 							{isAutosaving ? (

packages/admin/src/components/DeviceAuthorizePage.tsx

@@ -102,7 +102,7 @@ export function DeviceAuthorizePage() {
 				body: JSON.stringify({ user_code: trimmed, action: "approve" }),
 			});
 
-			const data = await parseApiResponse<{ authorized: boolean }>(res, "Authorization failed");
+			const data = await parseApiResponse<{ authorized: boolean }>(res, t`Authorization failed`);
 			setPageState(data.authorized ? "success" : "denied");
 		} catch (err) {
 			setErrorMessage(err instanceof Error ? err.message : "Network error");

packages/admin/src/components/FieldEditor.tsx

@@ -513,7 +513,7 @@ export function FieldEditor({ open, onOpenChange, field, onSave, isSaving }: Fie
 								label={t`Options (one per line)`}
 								value={options}
 								onChange={(e) => setField("options", e.target.value)}
-								placeholder={"Option 1\nOption 2\nOption 3"}
+								placeholder={t`Option 1\nOption 2\nOption 3`}
 								rows={5}
 							/>
 						)}

packages/admin/src/components/MarketplaceBrowse.tsx

@@ -6,7 +6,8 @@
  */
 
 import { Badge, Button } from "@cloudflare/kumo";
-import { plural } from "@lingui/core/macro";
+import type { MessageDescriptor } from "@lingui/core";
+import { msg, plural } from "@lingui/core/macro";
 import { useLingui } from "@lingui/react/macro";
 import {
 	MagnifyingGlass,
@@ -37,11 +38,11 @@ function isSortOption(value: string): value is SortOption {
 	return SORT_OPTIONS.has(value);
 }
 
-const SORT_LABELS: Record<SortOption, string> = {
-	installs: "Most Popular",
-	updated: "Recently Updated",
-	created: "Newest",
-	name: "Name",
+const SORT_LABELS: Record<SortOption, MessageDescriptor> = {
+	installs: msg`Most Popular`,
+	updated: msg`Recently Updated`,
+	created: msg`Newest`,
+	name: msg`Name`,
 };
 
 export interface MarketplaceBrowseProps {
@@ -123,7 +124,7 @@ export function MarketplaceBrowse({ installedPluginIds = new Set() }: Marketplac
 				>
 					{Object.entries(SORT_LABELS).map(([value, label]) => (
 						<option key={value} value={value}>
-							{label}
+							{t(label)}
 						</option>
 					))}
 				</select>

packages/admin/src/components/MediaLibrary.tsx

@@ -79,12 +79,12 @@ export function MediaLibrary({
 		if (activeProvider === "local") {
 			return {
 				id: "local",
-				name: "Library",
+				name: t`Library`,
 				capabilities: { browse: true, search: false, upload: true, delete: true },
 			} as MediaProviderInfo;
 		}
 		return providers?.find((p) => p.id === activeProvider);
-	}, [activeProvider, providers]);
+	}, [activeProvider, providers, t]);
 
 	// Update selected item when items change (e.g., after metadata update)
 	React.useEffect(() => {
@@ -199,7 +199,7 @@ export function MediaLibrary({
 	// Build provider tabs
 	const providerTabs = React.useMemo(() => {
 		const tabs: Array<{ id: string; name: string; icon?: string }> = [
-			{ id: "local", name: "Library", icon: undefined },
+			{ id: "local", name: t`Library`, icon: undefined },
 		];
 		if (providers) {
 			for (const p of providers) {
@@ -209,7 +209,7 @@ export function MediaLibrary({
 			}
 		}
 		return tabs;
-	}, [providers]);
+	}, [providers, t]);
 
 	// Get current items based on active provider
 	const currentItems = activeProvider === "local" ? items : [];

packages/admin/src/components/MediaPickerModal.tsx

@@ -59,14 +59,17 @@ export interface MediaPickerModalProps {
 /**
  * Probe image URL to get dimensions
  */
-function probeImageDimensions(url: string): Promise<{ width: number; height: number }> {
+function probeImageDimensions(
+	url: string,
+	errorMessage: string,
+): Promise<{ width: number; height: number }> {
 	return new Promise((resolve, reject) => {
 		const img = new window.Image();
 		img.onload = () => {
 			resolve({ width: img.naturalWidth, height: img.naturalHeight });
 		};
 		img.onerror = () => {
-			reject(new Error("Failed to load image"));
+			reject(new Error(errorMessage));
 		};
 		img.src = url;
 	});
@@ -309,7 +312,7 @@ export function MediaPickerModal({
 		setUrlError(null);
 
 		try {
-			const dimensions = await probeImageDimensions(url.href);
+			const dimensions = await probeImageDimensions(url.href, t`Failed to load image`);
 			const externalItem: MediaItem = {
 				id: "",
 				filename: url.pathname.split("/").pop() || "external-image",
@@ -392,7 +395,7 @@ export function MediaPickerModal({
 									<Globe className="absolute start-3 top-1/2 -translate-y-1/2 h-4 w-4 text-kumo-subtle" />
 									<Input
 										type="url"
-										placeholder="https://example.com/image.jpg"
+										placeholder={t`https://example.com/image.jpg`}
 										aria-label={t`Image URL`}
 										value={imageUrl}
 										onChange={(e) => {
@@ -491,7 +494,7 @@ export function MediaPickerModal({
 								accept={mimeTypeFilter ? `${mimeTypeFilter}*` : undefined}
 								className="sr-only"
 								onChange={handleFileSelect}
-								aria-label="Upload file"
+								aria-label={t`Upload file`}
 							/>
 						</>
 					)}

packages/admin/src/components/MenuList.tsx

@@ -5,6 +5,8 @@
  */
 
 import { Button, Dialog, Input, Toast, buttonVariants } from "@cloudflare/kumo";
+import { plural } from "@lingui/core/macro";
+import { Trans } from "@lingui/react/macro";
 import { useLingui } from "@lingui/react/macro";
 import { Plus, Pencil, Trash, List as ListIcon } from "@phosphor-icons/react";
 import { X } from "@phosphor-icons/react";
@@ -209,7 +211,10 @@ export function MenuList() {
 										) : null}
 									</h3>
 									<p className="text-sm text-kumo-subtle">
-										{menu.name} • {menu.itemCount || 0} items
+										<Trans>
+											{menu.name} •{" "}
+											{plural(menu.itemCount ?? 0, { one: "# item", other: "# items" })}
+										</Trans>
 									</p>
 								</div>
 							</Link>

packages/admin/src/components/Redirects.tsx

@@ -126,15 +126,15 @@ function RedirectFormDialog({
 				<form onSubmit={handleSubmit} className="space-y-4">
 					<Input
 						label={t`Source path`}
-						placeholder="/old-page or /blog/[slug]"
+						placeholder={t`/old-page or /blog/[slug]`}
 						value={source}
 						onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSource(e.target.value)}
 						required
 					/>
 
 					<Input
 						label={t`Destination path`}
-						placeholder="/new-page or /articles/[slug]"
+						placeholder={t`/new-page or /articles/[slug]`}
 						value={destination}
 						onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDestination(e.target.value)}
 						required
@@ -158,7 +158,7 @@ function RedirectFormDialog({
 
 						<Input
 							label={t`Group (optional)`}
-							placeholder="e.g. import, blog"
+							placeholder={t`e.g. import, blog`}
 							value={groupName}
 							onChange={(e: React.ChangeEvent<HTMLInputElement>) => setGroupName(e.target.value)}
 						/>