fix(admin): keep locale menus consistent with the admin theme

.changeset/few-bats-wink.md

@@ -0,0 +1,7 @@
+---
+"@emdash-cms/admin": patch
+---
+
+Fixes locale switcher menus appearing with a light background in dark mode. The selected locale, default-locale indicator, and `All locales` label remain visible when the menu is closed.
+
+Reselecting the current locale preserves unsaved byline edits.

e2e/fixtures/admin.ts

@@ -12,6 +12,7 @@ const ADMIN_DASHBOARD_PATTERN = /\/_emdash\/admin\/?$/;
 const CONTENT_ID_EXTRACTION_PATTERN = /\/content\/[^/]+\/([^/]+)$/;
 const MENU_URL_PATTERN = /\/_emdash\/admin\/menus\//;
 const SETUP_PAGE_PATTERN = /\/_emdash\/admin\/setup/;
+const DEFAULT_LOCALE_SUFFIX_PATTERN = / \(default\)$/;
 
 export class AdminPage {
 	readonly page: Page;
@@ -559,12 +560,15 @@ export class AdminPage {
 	}
 
 	/**
-	 * Get the locale switcher select value from the content list.
+	 * Get the locale selected in the content list.
 	 */
 	async getLocaleFilterValue(): Promise<string | null> {
-		const select = this.page.locator("select").first();
+		const select = this.page.getByRole("combobox", { name: "Locale" });
 		if (await select.isVisible({ timeout: 3000 }).catch(() => false)) {
-			return select.inputValue();
+			const label = (await select.innerText()).trim();
+			return label === "All locales"
+				? ""
+				: label.replace(DEFAULT_LOCALE_SUFFIX_PATTERN, "").toLowerCase();
 		}
 		return null;
 	}
@@ -573,7 +577,11 @@ export class AdminPage {
 	 * Change the locale filter in the content list.
 	 */
 	async setLocaleFilter(locale: string): Promise<void> {
-		await this.page.locator("select").first().selectOption(locale);
+		await this.page.getByRole("combobox", { name: "Locale" }).click();
+		const label = locale
+			? new RegExp(`^${locale.toUpperCase()}(?: \\(default\\))?$`)
+			: "All locales";
+		await this.page.getByRole("option", { name: label }).click();
 		await this.waitForLoading();
 	}
 

e2e/tests/i18n.spec.ts

@@ -55,17 +55,26 @@ test.describe("i18n", () => {
 			await admin.goToContent("posts");
 			await admin.waitForLoading();
 
-			// Should have a select element for locale filtering
-			const select = admin.page.locator("select").first();
+			const select = admin.page.getByRole("combobox", { name: "Locale" });
 			await expect(select).toBeVisible();
-
-			// Should show available locale options
-			const options = select.locator("option");
-			const optionTexts = await options.allTextContents();
-			// Expect EN, FR, ES options (may also have "All locales")
-			expect(optionTexts.some((t) => t.includes("EN"))).toBe(true);
-			expect(optionTexts.some((t) => t.includes("FR"))).toBe(true);
-			expect(optionTexts.some((t) => t.includes("ES"))).toBe(true);
+			await expect(select).toHaveText("EN (default)");
+			await select.click();
+
+			await expect(admin.page.getByRole("option", { name: "EN (default)" })).toBeVisible();
+			await expect(admin.page.getByRole("option", { name: "FR" })).toBeVisible();
+			await expect(admin.page.getByRole("option", { name: "ES" })).toBeVisible();
+			await admin.page.keyboard.press("Escape");
+
+			await admin.setLocaleFilter("fr");
+			await expect(select).toHaveText("FR");
+			await expect(admin.page).toHaveURL(/\/content\/posts\?locale=fr$/);
+			expect(await admin.getLocaleFilterValue()).toBe("fr");
+			await expect(admin.page.getByText("No posts yet.")).toBeVisible();
+
+			await admin.setLocaleFilter("en");
+			await expect(select).toHaveText("EN (default)");
+			expect(await admin.getLocaleFilterValue()).toBe("en");
+			await expect(admin.page.getByRole("link", { name: "First Post", exact: true })).toBeVisible();
 		});
 	});
 

e2e/tests/visual-regression.spec.ts

@@ -56,6 +56,7 @@ interface PageCase {
 	name: string;
 	path: (info: ServerInfo) => string;
 	viewport?: { width: number; height: number };
+	theme?: "light" | "dark";
 	prepare?: (admin: AdminPage) => Promise<void>;
 }
 
@@ -97,6 +98,23 @@ const PAGES: PageCase[] = [
 	{ name: "media", path: () => "/media" },
 	{ name: "media-mobile", path: () => "/media", viewport: { width: 320, height: 800 } },
 	{ name: "menus", path: () => "/menus" },
+	{
+		name: "menus-locale-switcher-open",
+		path: () => "/menus",
+		prepare: openFilter(
+			'[data-kumo-component="Select"][data-kumo-part="trigger"]',
+			'[role="listbox"]:visible',
+		),
+	},
+	{
+		name: "menus-locale-switcher-open-dark",
+		path: () => "/menus",
+		theme: "dark",
+		prepare: openFilter(
+			'[data-kumo-component="Select"][data-kumo-part="trigger"]',
+			'[role="listbox"]:visible',
+		),
+	},
 	{ name: "settings", path: () => "/settings" },
 ];
 
@@ -195,8 +213,16 @@ test.describe("visual regression", () => {
 		for (const pageCase of PAGES) {
 			test(`${pageCase.name} @${locale.name}`, async ({ admin, serverInfo }) => {
 				await setLocale(admin, locale.code);
+				if (pageCase.theme) {
+					await admin.page.addInitScript((theme) => {
+						localStorage.setItem("emdash-theme", theme);
+					}, pageCase.theme);
+				}
 				if (pageCase.viewport) await admin.page.setViewportSize(pageCase.viewport);
 				await openAdmin(admin, pageCase.path(serverInfo), locale.dir);
+				if (pageCase.theme) {
+					await expect(admin.page.locator("html")).toHaveAttribute("data-mode", pageCase.theme);
+				}
 				await stabilize(admin);
 				await pageCase.prepare?.(admin);
 

packages/admin/src/components/LocaleSwitcher.tsx

@@ -7,6 +7,7 @@
  * Only renders when i18n is configured (manifest.i18n is present).
  */
 
+import { Select } from "@cloudflare/kumo";
 import { useLingui } from "@lingui/react/macro";
 import { GlobeSimple } from "@phosphor-icons/react";
 import React from "react";
@@ -48,31 +49,41 @@ export function LocaleSwitcher({
 	size = "md",
 }: LocaleSwitcherProps) {
 	const { t } = useLingui();
+	const formatLocaleLabel = (locale: string) => {
+		const code = locale.toUpperCase();
+		return locale === defaultLocale ? (
+			<>
+				{code}
+				{t` (default)`}
+			</>
+		) : (
+			code
+		);
+	};
+
 	return (
 		<div className={cn("flex items-center gap-1.5", className)}>
 			<GlobeSimple
 				className={cn("text-kumo-subtle shrink-0", size === "sm" ? "size-3.5" : "size-4")}
 				weight="bold"
 			/>
-			<select
+			<Select<string>
 				value={value}
-				onChange={(e) => onChange(e.target.value)}
+				onValueChange={(nextValue) => {
+					if (typeof nextValue === "string" && nextValue !== value) onChange(nextValue);
+				}}
+				placeholder={showAll ? t`All locales` : undefined}
+				renderValue={formatLocaleLabel}
 				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",
-				)}
+				size={size === "sm" ? "sm" : "base"}
 			>
-				{showAll && <option value="">{t`All locales`}</option>}
+				{showAll && <Select.Option value="">{t`All locales`}</Select.Option>}
 				{locales.map((locale) => (
-					<option key={locale} value={locale}>
-						{locale.toUpperCase()}
-						{locale === defaultLocale ? t` (default)` : ""}
-					</option>
+					<Select.Option key={locale} value={locale}>
+						{formatLocaleLabel(locale)}
+					</Select.Option>
 				))}
-			</select>
+			</Select>
 		</div>
 	);
 }

packages/admin/tests/components/LocaleSwitcher.test.tsx

@@ -0,0 +1,141 @@
+import { setupI18n } from "@lingui/core";
+import { msg } from "@lingui/core/macro";
+import { I18nProvider } from "@lingui/react";
+import * as React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { userEvent } from "vitest/browser";
+
+import { LocaleSwitcher } from "../../src/components/LocaleSwitcher.js";
+// oxlint-disable-next-line import/no-unassigned-import -- Browser test verifies Kumo's computed theme surface.
+import "@cloudflare/kumo/styles/standalone";
+
+import { render } from "../utils/render.js";
+
+const defaultLocaleIndicator = msg` (default)`;
+
+function ControlledSwitcher({ initialValue = "en", showAll = false }) {
+	const [value, setValue] = React.useState(initialValue);
+	return (
+		<LocaleSwitcher
+			locales={["en", "fr"]}
+			defaultLocale="en"
+			value={value}
+			onChange={setValue}
+			showAll={showAll}
+		/>
+	);
+}
+
+describe("LocaleSwitcher", () => {
+	it("opens the locale menu and displays the selected locale", async () => {
+		const screen = await render(<ControlledSwitcher />);
+		const localeSwitcher = screen.getByRole("combobox", { name: "Locale" });
+		await expect.element(localeSwitcher).toHaveTextContent(/^EN \(default\)$/);
+		await userEvent.click(localeSwitcher);
+
+		await expect.element(screen.getByRole("option", { name: "EN (default)" })).toBeVisible();
+		await expect
+			.element(screen.getByRole("option", { name: "All locales" }))
+			.not.toBeInTheDocument();
+		await userEvent.click(screen.getByRole("option", { name: "FR" }));
+		await expect.element(localeSwitcher).toHaveTextContent(/^FR$/);
+		await expect.element(screen.getByRole("listbox")).not.toBeInTheDocument();
+	});
+
+	it("displays all locales initially and after selecting it again", async () => {
+		const screen = await render(<ControlledSwitcher initialValue="" showAll />);
+		const localeSwitcher = screen.getByRole("combobox", { name: "Locale" });
+		await expect.element(localeSwitcher).toHaveTextContent(/^All locales$/);
+
+		await userEvent.click(localeSwitcher);
+		await userEvent.click(screen.getByRole("option", { name: "EN (default)" }));
+		await expect.element(localeSwitcher).toHaveTextContent(/^EN \(default\)$/);
+
+		await userEvent.click(localeSwitcher);
+		await userEvent.click(screen.getByRole("option", { name: "All locales" }));
+		await expect.element(localeSwitcher).toHaveTextContent(/^All locales$/);
+	});
+
+	it("supports keyboard selection and cancels without changing the locale", async () => {
+		const screen = await render(<ControlledSwitcher />);
+		const localeSwitcher = screen.getByRole("combobox", { name: "Locale" });
+		await userEvent.tab();
+		await expect.element(localeSwitcher).toHaveFocus();
+		await userEvent.keyboard("{Enter}");
+		await expect.element(screen.getByRole("listbox")).toBeVisible();
+		await expect.element(screen.getByRole("option", { name: "EN (default)" })).toHaveFocus();
+		await userEvent.keyboard("{End}");
+		await expect.element(screen.getByRole("option", { name: "FR" })).toHaveFocus();
+		await userEvent.keyboard("{Enter}");
+		await expect.element(localeSwitcher).toHaveTextContent(/^FR$/);
+		await expect.element(localeSwitcher).toHaveFocus();
+
+		await userEvent.keyboard("{Enter}");
+		await expect.element(screen.getByRole("listbox")).toBeVisible();
+		await expect.element(screen.getByRole("option", { name: "FR" })).toHaveFocus();
+		await userEvent.keyboard("{Home}");
+		await expect.element(screen.getByRole("option", { name: "EN (default)" })).toHaveFocus();
+		await userEvent.keyboard("{Escape}");
+		await expect.element(localeSwitcher).toHaveTextContent(/^FR$/);
+		await expect.element(screen.getByRole("listbox")).not.toBeInTheDocument();
+		await expect.element(localeSwitcher).toHaveFocus();
+	});
+
+	it("uses the existing translation for the default-locale indicator", async () => {
+		const arabicI18n = setupI18n();
+		arabicI18n.load("ar", { [defaultLocaleIndicator.id]: " الافتراضي" });
+		arabicI18n.activate("ar");
+		const screen = await render(<ControlledSwitcher />, {
+			wrapper: ({ children }) => <I18nProvider i18n={arabicI18n}>{children}</I18nProvider>,
+		});
+
+		const localeSwitcher = screen.getByRole("combobox", { name: "Locale" });
+		await expect.element(localeSwitcher).toHaveTextContent(/^EN الافتراضي$/);
+		await userEvent.click(localeSwitcher);
+		await expect.element(screen.getByRole("option", { name: "EN الافتراضي" })).toBeVisible();
+	});
+
+	it.each(["sm", "md"] as const)(
+		"renders the open %s locale menu with the dark theme surface",
+		async (size) => {
+			const previousMode = document.documentElement.getAttribute("data-mode");
+			const surfaceProbe = document.createElement("div");
+			surfaceProbe.style.backgroundColor = "var(--color-kumo-base)";
+			document.body.append(surfaceProbe);
+			document.documentElement.setAttribute("data-mode", "dark");
+
+			try {
+				const screen = await render(
+					<LocaleSwitcher
+						locales={["en", "fr"]}
+						defaultLocale="en"
+						value="en"
+						onChange={vi.fn()}
+						size={size}
+					/>,
+				);
+
+				await userEvent.click(screen.getByRole("combobox", { name: "Locale" }));
+				const listbox = screen.getByRole("listbox");
+				await expect.element(listbox).toBeVisible();
+				const popup = listbox.element().parentElement;
+				expect(popup).not.toBeNull();
+
+				const darkSurface = getComputedStyle(surfaceProbe).backgroundColor;
+				document.documentElement.setAttribute("data-mode", "light");
+				const lightSurface = getComputedStyle(surfaceProbe).backgroundColor;
+				document.documentElement.setAttribute("data-mode", "dark");
+
+				expect(darkSurface).not.toBe(lightSurface);
+				expect(getComputedStyle(popup!).backgroundColor).toBe(darkSurface);
+			} finally {
+				surfaceProbe.remove();
+				if (previousMode) {
+					document.documentElement.setAttribute("data-mode", previousMode);
+				} else {
+					document.documentElement.removeAttribute("data-mode");
+				}
+			}
+		},
+	);
+});