fix(admin): replace locale toggle buttons with kumo Select

Toggle buttons don't scale beyond a few locales. Use the kumo Select
dropdown instead. Add e2e tests for the language switcher.

Author: ascorbic

e2e/tests/settings-pages.spec.ts

@@ -162,6 +162,37 @@ test.describe("SEO Settings", () => {
 	});
 });
 
+test.describe("Language Switcher", () => {
+	test.beforeEach(async ({ admin }) => {
+		await admin.devBypassAuth();
+	});
+
+	test("settings page shows language select", async ({ admin, page }) => {
+		await admin.goto("/settings");
+		await admin.waitForShell();
+
+		const languageSelect = page.locator('[aria-label="Language"]');
+		await expect(languageSelect).toBeVisible();
+	});
+
+	test("switching language updates the UI", async ({ admin, page }) => {
+		await admin.goto("/settings");
+		await admin.waitForShell();
+
+		// Switch to German
+		await page.locator('[aria-label="Language"]').click();
+		await page.locator("[role='option']", { hasText: "Deutsch" }).click();
+
+		await expect(page.locator("h1")).toContainText("Einstellungen", { timeout: 5000 });
+
+		// Switch back — the select now shows "Deutsch" as its value
+		await page.locator("[role='combobox']", { hasText: "Deutsch" }).click();
+		await page.locator("[role='option']", { hasText: "English" }).click();
+
+		await expect(page.locator("h1")).toContainText("Settings", { timeout: 5000 });
+	});
+});
+
 test.describe("Email Settings", () => {
 	test.beforeEach(async ({ admin }) => {
 		await admin.devBypassAuth();

packages/admin/src/components/Settings.tsx

@@ -1,3 +1,4 @@
+import { Select } from "@cloudflare/kumo";
 import { useLingui } from "@lingui/react/macro";
 import {
 	Gear,
@@ -15,7 +16,6 @@ import { Link } from "@tanstack/react-router";
 import * as React from "react";
 
 import { fetchManifest } from "../lib/api";
-import { cn } from "../lib/utils.js";
 import { SUPPORTED_LOCALES } from "../locales/index.js";
 import { useLocale } from "../locales/useLocale.js";
 
@@ -130,22 +130,13 @@ export function Settings() {
 								<div className="text-sm text-kumo-subtle">{t`Choose your preferred admin language`}</div>
 							</div>
 						</div>
-						<div className="flex gap-1">
-							{SUPPORTED_LOCALES.map((l) => (
-								<button
-									key={l.code}
-									onClick={() => setLocale(l.code)}
-									className={cn(
-										"rounded-md px-3 py-1.5 text-sm transition-colors",
-										l.code === locale
-											? "bg-kumo-brand/10 text-kumo-brand font-medium"
-											: "hover:bg-kumo-tint",
-									)}
-								>
-									{l.label}
-								</button>
-							))}
-						</div>
+						<Select
+							aria-label={t`Language`}
+							className="w-45"
+							value={locale}
+							onValueChange={(v) => v && setLocale(v)}
+							items={Object.fromEntries(SUPPORTED_LOCALES.map((l) => [l.code, l.label]))}
+						/>
 					</div>
 				</div>
 			)}