feat(admin): add module-level Lingui i18n string extraction

packages/admin/src/components/AdminCommandPalette.tsx

@@ -6,6 +6,9 @@
  */
 
 import { CommandPalette } from "@cloudflare/kumo";
+import type { MessageDescriptor } from "@lingui/core";
+import { msg } from "@lingui/core/macro";
+import { useLingui } from "@lingui/react/macro";
 import {
 	SquaresFour,
 	FileText,
@@ -25,9 +28,15 @@ import { useNavigate } from "@tanstack/react-router";
 import * as React from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 
-import { apiFetch } from "../lib/api/client";
+import { apiFetch, type AdminManifest } from "../lib/api/client.js";
 import { useCurrentUser } from "../lib/api/current-user";
 
+/** Subset of manifest fields used by the palette (matches `Shell` props shape). */
+type CommandPaletteManifest = {
+	collections: Record<string, { label: string; labelSingular?: string }>;
+	plugins: AdminManifest["plugins"];
+};
+
 // Role levels (matching @emdash-cms/auth)
 const ROLE_ADMIN = 50;
 const ROLE_EDITOR = 40;
@@ -75,7 +84,7 @@ interface SearchResponse {
 
 interface NavItem {
 	id: string;
-	title: string;
+	title: string | MessageDescriptor;
 	to: string;
 	params?: Record<string, string>;
 	icon: React.ElementType;
@@ -84,7 +93,8 @@ interface NavItem {
 }
 
 interface ResultGroup {
-	label: string;
+	id: string;
+	label: MessageDescriptor;
 	items: ResultItem[];
 }
 
@@ -99,20 +109,7 @@ interface ResultItem {
 }
 
 interface AdminCommandPaletteProps {
-	manifest: {
-		collections: Record<string, { label: string; labelSingular?: string }>;
-		plugins: Record<
-			string,
-			{
-				package?: string;
-				enabled?: boolean;
-				adminPages?: Array<{
-					path: string;
-					label?: string;
-				}>;
-			}
-		>;
-	};
+	manifest: CommandPaletteManifest;
 }
 
 async function searchContent(query: string): Promise<SearchResponse> {
@@ -127,14 +124,11 @@ async function searchContent(query: string): Promise<SearchResponse> {
 	return body.data;
 }
 
-function buildNavItems(
-	manifest: AdminCommandPaletteProps["manifest"],
-	userRole: number,
-): NavItem[] {
+function buildNavItems(manifest: CommandPaletteManifest, userRole: number): NavItem[] {
 	const items: NavItem[] = [
 		{
 			id: "dashboard",
-			title: "Dashboard",
+			title: msg`Dashboard`,
 			to: "/",
 			icon: SquaresFour,
 			keywords: ["home", "overview"],
@@ -157,46 +151,46 @@ function buildNavItems(
 	items.push(
 		{
 			id: "media",
-			title: "Media Library",
+			title: msg`Media Library`,
 			to: "/media",
 			icon: Image,
 			keywords: ["images", "files", "uploads"],
 		},
 		{
 			id: "menus",
-			title: "Menus",
+			title: msg`Menus`,
 			to: "/menus",
 			icon: List,
 			minRole: ROLE_EDITOR,
 			keywords: ["navigation"],
 		},
 		{
 			id: "widgets",
-			title: "Widgets",
+			title: msg`Widgets`,
 			to: "/widgets",
 			icon: GridFour,
 			minRole: ROLE_EDITOR,
 			keywords: ["sidebar", "footer"],
 		},
 		{
 			id: "sections",
-			title: "Sections",
+			title: msg`Sections`,
 			to: "/sections",
 			icon: Stack,
 			minRole: ROLE_EDITOR,
 			keywords: ["page builder", "blocks"],
 		},
 		{
 			id: "content-types",
-			title: "Content Types",
+			title: msg`Content Types`,
 			to: "/content-types",
 			icon: Database,
 			minRole: ROLE_ADMIN,
 			keywords: ["schema", "collections"],
 		},
 		{
 			id: "categories",
-			title: "Categories",
+			title: msg`Categories`,
 			to: "/taxonomies/$taxonomy",
 			params: { taxonomy: "category" },
 			icon: FileText,
@@ -205,7 +199,7 @@ function buildNavItems(
 		},
 		{
 			id: "tags",
-			title: "Tags",
+			title: msg`Tags`,
 			to: "/taxonomies/$taxonomy",
 			params: { taxonomy: "tag" },
 			icon: FileText,
@@ -214,39 +208,39 @@ function buildNavItems(
 		},
 		{
 			id: "users",
-			title: "Users",
+			title: msg`Users`,
 			to: "/users",
 			icon: Users,
 			minRole: ROLE_ADMIN,
 			keywords: ["accounts", "team"],
 		},
 		{
 			id: "plugins",
-			title: "Plugins",
+			title: msg`Plugins`,
 			to: "/plugins-manager",
 			icon: PuzzlePiece,
 			minRole: ROLE_ADMIN,
 			keywords: ["extensions", "add-ons"],
 		},
 		{
 			id: "import",
-			title: "Import",
+			title: msg`Import`,
 			to: "/import/wordpress",
 			icon: Upload,
 			minRole: ROLE_ADMIN,
 			keywords: ["wordpress", "migrate"],
 		},
 		{
 			id: "settings",
-			title: "Settings",
+			title: msg`Settings`,
 			to: "/settings",
 			icon: Gear,
 			minRole: ROLE_ADMIN,
 			keywords: ["configuration", "preferences"],
 		},
 		{
 			id: "security",
-			title: "Security Settings",
+			title: msg`Security Settings`,
 			to: "/settings/security",
 			icon: Gear,
 			minRole: ROLE_ADMIN,
@@ -281,17 +275,23 @@ function buildNavItems(
 	return items.filter((item) => !item.minRole || userRole >= item.minRole);
 }
 
-function filterNavItems(items: NavItem[], query: string): NavItem[] {
+function filterNavItems(
+	items: NavItem[],
+	query: string,
+	translate: (d: MessageDescriptor) => string,
+): NavItem[] {
 	if (!query) return items;
 	const lowerQuery = query.toLowerCase();
 	return items.filter((item) => {
-		const titleMatch = item.title.toLowerCase().includes(lowerQuery);
+		const titleStr = typeof item.title === "string" ? item.title : translate(item.title);
+		const titleMatch = titleStr.toLowerCase().includes(lowerQuery);
 		const keywordMatch = item.keywords?.some((k) => k.toLowerCase().includes(lowerQuery));
 		return titleMatch || keywordMatch;
 	});
 }
 
 export function AdminCommandPalette({ manifest }: AdminCommandPaletteProps) {
+	const { t } = useLingui();
 	const [open, setOpen] = React.useState(false);
 	const [query, setQuery] = React.useState("");
 	const navigate = useNavigate();
@@ -320,8 +320,8 @@ export function AdminCommandPalette({ manifest }: AdminCommandPaletteProps) {
 
 	// Filter nav items based on query
 	const filteredNavItems = React.useMemo(
-		() => filterNavItems(allNavItems, query),
-		[allNavItems, query],
+		() => filterNavItems(allNavItems, query, t),
+		[allNavItems, query, t],
 	);
 
 	// Build result groups
@@ -331,10 +331,11 @@ export function AdminCommandPalette({ manifest }: AdminCommandPaletteProps) {
 		// Navigation group
 		if (filteredNavItems.length > 0) {
 			groups.push({
-				label: "Navigation",
+				id: "navigation",
+				label: msg`Navigation`,
 				items: filteredNavItems.map((item) => ({
 					id: item.id,
-					title: item.title,
+					title: typeof item.title === "string" ? item.title : t(item.title),
 					to: item.to,
 					params: item.params,
 					icon: <item.icon className="h-4 w-4" />,
@@ -346,25 +347,28 @@ export function AdminCommandPalette({ manifest }: AdminCommandPaletteProps) {
 		if (searchResults?.items && searchResults.items.length > 0) {
 			const contentItems = searchResults.items.map((result) => {
 				const collectionConfig = manifest.collections[result.collection];
+				const collectionLabel = collectionConfig?.label ?? result.collection;
+
 				return {
 					id: `content-${result.id}`,
 					title: result.title || result.slug,
 					to: "/content/$collection/$id",
 					params: { collection: result.collection, id: result.id },
 					icon: <FileText className="h-4 w-4" />,
-					description: collectionConfig?.label || result.collection,
+					description: collectionLabel,
 					collection: result.collection,
 				};
 			});
 
 			groups.push({
-				label: "Content",
+				id: "content",
+				label: msg`Content`,
 				items: contentItems,
 			});
 		}
 
 		return groups;
-	}, [filteredNavItems, searchResults, manifest.collections]);
+	}, [filteredNavItems, searchResults, manifest.collections, t]);
 
 	// Keyboard shortcut to open (Cmd+K / Ctrl+K)
 	useHotkeys("mod+k", (e) => {
@@ -413,12 +417,12 @@ export function AdminCommandPalette({ manifest }: AdminCommandPaletteProps) {
 			items={resultGroups}
 			value={query}
 			onValueChange={setQuery}
-			itemToStringValue={(group) => group.label}
+			itemToStringValue={(group) => t(group.label)}
 			onSelect={handleSelect}
 			getSelectableItems={(groups) => groups.flatMap((g) => g.items)}
 		>
 			<CommandPalette.Input
-				placeholder="Search pages and content..."
+				placeholder={t`Search pages and content...`}
 				leading={<MagnifyingGlass className="h-4 w-4 text-kumo-subtle" weight="bold" />}
 			/>
 			<CommandPalette.List>
@@ -428,8 +432,8 @@ export function AdminCommandPalette({ manifest }: AdminCommandPaletteProps) {
 					<>
 						<CommandPalette.Results>
 							{(group: ResultGroup) => (
-								<CommandPalette.Group key={group.label} items={group.items}>
-									<CommandPalette.GroupLabel>{group.label}</CommandPalette.GroupLabel>
+								<CommandPalette.Group key={group.id} items={group.items}>
+									<CommandPalette.GroupLabel>{t(group.label)}</CommandPalette.GroupLabel>
 									<CommandPalette.Items>
 										{(item: ResultItem) => (
 											<CommandPalette.ResultItem
@@ -445,25 +449,25 @@ export function AdminCommandPalette({ manifest }: AdminCommandPaletteProps) {
 								</CommandPalette.Group>
 							)}
 						</CommandPalette.Results>
-						<CommandPalette.Empty>No results found</CommandPalette.Empty>
+						<CommandPalette.Empty>{t`No results found`}</CommandPalette.Empty>
 					</>
 				)}
 			</CommandPalette.List>
 			<CommandPalette.Footer>
 				<div className="flex items-center gap-4 text-kumo-subtle">
 					<span className="flex items-center gap-1">
 						<kbd className="rounded bg-kumo-control px-1.5 py-0.5 text-xs">Enter</kbd>
-						<span>to select</span>
+						<span>{t`to select`}</span>
 					</span>
 					<span className="flex items-center gap-1">
 						<kbd className="rounded bg-kumo-control px-1.5 py-0.5 text-xs">
 							{IS_MAC ? "Cmd" : "Ctrl"}+Enter
 						</kbd>
-						<span>new tab</span>
+						<span>{t`new tab`}</span>
 					</span>
 					<span className="flex items-center gap-1">
 						<kbd className="rounded bg-kumo-control px-1.5 py-0.5 text-xs">Esc</kbd>
-						<span>to close</span>
+						<span>{t`to close`}</span>
 					</span>
 				</div>
 			</CommandPalette.Footer>