Add language picker to admin sidebar and topbar.

Reuse LanguageSwitcher with an admin-styled dropdown next to the theme toggle.

Co-authored-by: Cursor <[email protected]>

src/app/admin/layout.tsx

@@ -6,6 +6,7 @@ import type { ReactNode } from "react";
 import { AdminHubChrome } from "@/components/admin/admin-hub-chrome";
 import { AdminMobileWrapper } from "@/components/admin/admin-mobile-wrapper";
 import { AdminNavLink } from "@/components/admin/admin-nav-link";
+import { LanguageSwitcher } from "@/components/language-switcher";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { requireStaff } from "@/lib/admin/guard";
 import { ADMIN_NAV_GROUPS } from "@/lib/admin-nav";
@@ -74,7 +75,10 @@ async function Sidebar({
 						{t("rankLabel", { rank: staff.rank })}
 					</span>
 				</div>
-				<ThemeSwitcher variant="admin" />
+				<div className="flex items-center gap-1.5 shrink-0">
+					<LanguageSwitcher variant="admin" />
+					<ThemeSwitcher variant="admin" />
+				</div>
 			</div>
 
 			<nav className="flex-1 overflow-y-auto px-3 py-4">
@@ -143,6 +147,7 @@ async function Topbar({
 				</span>
 			</div>
 			<div className="flex items-center gap-3">
+				<LanguageSwitcher variant="admin" />
 				<ThemeSwitcher variant="admin" />
 				<span className="text-xs text-[var(--admin-text-muted)]">
 					<strong className="text-[var(--admin-text)]">{staff.username}</strong>

src/components/language-switcher.tsx

@@ -32,7 +32,11 @@ const LOCALES: { code: string; label: string; lang: string }[] = [
 	{ code: "ru", label: "Русский", lang: "ru" },
 ];
 
-export function LanguageSwitcher() {
+export function LanguageSwitcher({
+	variant = "nav",
+}: {
+	variant?: "nav" | "admin";
+}) {
 	const locale = useLocale();
 	const router = useRouter();
 	const [pending, startTransition] = useTransition();
@@ -40,6 +44,7 @@ export function LanguageSwitcher() {
 	const [search, setSearch] = useState("");
 	const ref = useRef<HTMLDivElement>(null);
 	const current = LOCALES.find((l) => l.code === locale) ?? LOCALES[0];
+	const isAdmin = variant === "admin";
 
 	const filtered = useMemo(() => {
 		if (!search) return LOCALES;
@@ -80,8 +85,14 @@ export function LanguageSwitcher() {
 				type="button"
 				onClick={() => setOpen(!open)}
 				disabled={pending}
-				className="nav-item flex items-center gap-1.5 bg-transparent text-[13px]"
-				style={{ border: "none", cursor: "pointer", padding: "0 0.25rem" }}
+				aria-label="Change language"
+				title="Language"
+				aria-expanded={open}
+				className={
+					isAdmin
+						? "flex items-center gap-1.5 h-9 rounded-xl border border-[var(--admin-border)] px-2 text-xs font-bold uppercase tracking-wide text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/15 hover:text-[var(--admin-accent)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)] disabled:opacity-60"
+						: "nav-item flex items-center gap-1.5 bg-transparent text-[13px] border-none cursor-pointer px-1"
+				}
 			>
 				<Image
 					src={`/assets/images/icons/flags/${current.code}.png`}
@@ -92,10 +103,11 @@ export function LanguageSwitcher() {
 				/>
 				<span>{current.code.toUpperCase()}</span>
 				<svg
-					className="w-3 h-3"
+					className="w-3 h-3 opacity-70"
 					fill="none"
 					stroke="currentColor"
 					viewBox="0 0 24 24"
+					aria-hidden
 				>
 					<path
 						strokeLinecap="round"
@@ -107,24 +119,35 @@ export function LanguageSwitcher() {
 			</button>
 
 			{open && (
-				<div className="dropdown-menu absolute left-0 md:right-0 md:left-auto top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
+				<div
+					className={
+						isAdmin
+							? "absolute right-0 top-full mt-1.5 z-50 w-[220px] rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface)] text-[var(--admin-text)] shadow-xl py-2"
+							: "dropdown-menu absolute left-0 md:right-0 md:left-auto top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2"
+					}
+				>
 					<div className="px-3 pb-1">
-						<div className="flex items-center gap-1.5 rounded-md border bg-background px-2 py-1.5 text-sm">
-							<Search className="h-3.5 w-3.5 text-muted-foreground" />
+						<div
+							className={
+								isAdmin
+									? "flex items-center gap-1.5 rounded-md border border-[var(--admin-border)] bg-[var(--admin-canvas)] px-2 py-1.5 text-sm"
+									: "flex items-center gap-1.5 rounded-md border bg-background px-2 py-1.5 text-sm"
+							}
+						>
+							<Search className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
 							<input
 								type="text"
 								placeholder="Search..."
 								value={search}
 								onChange={(e) => setSearch(e.target.value)}
-								className="flex-1 bg-transparent outline-none text-sm"
-								style={{ border: "none", padding: 0, margin: 0 }}
+								className="flex-1 bg-transparent outline-none text-sm border-0 p-0 m-0 text-inherit"
 							/>
 						</div>
 					</div>
 					<div className="max-h-[260px] overflow-y-auto">
 						{filtered.length === 0 && (
 							<p className="px-3 py-4 text-center text-xs text-muted-foreground">
-								Geen talen gevonden
+								No languages found
 							</p>
 						)}
 						{filtered.map((l) => (
@@ -132,33 +155,27 @@ export function LanguageSwitcher() {
 								key={l.code}
 								type="button"
 								onClick={() => switchLocale(l.code)}
-								className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-medium transition-all duration-100 rounded-lg mx-1 ${
+								className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-medium transition-colors rounded-lg mx-1 border-0 cursor-pointer ${
 									l.code === locale
-										? "opacity-100"
-										: "opacity-70 hover:opacity-100"
+										? isAdmin
+											? "bg-[var(--admin-accent)]/15 text-[var(--admin-text)]"
+											: "opacity-100"
+										: isAdmin
+											? "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
+											: "opacity-70 hover:opacity-100"
 								}`}
-								style={{
-									color: "var(--color-text-readable, var(--color-text))",
-									background:
-										l.code === locale
-											? "color-mix(in srgb, var(--color-primary) 10%, transparent)"
-											: "none",
-									border: "none",
-									cursor: "pointer",
-									width: "calc(100% - 8px)",
-								}}
-								onMouseEnter={(e) => {
-									e.currentTarget.style.backgroundColor =
-										"color-mix(in srgb, var(--color-primary) 10%, transparent)";
-									e.currentTarget.style.color = "var(--color-primary)";
-								}}
-								onMouseLeave={(e) => {
-									e.currentTarget.style.backgroundColor =
-										l.code === locale
-											? "color-mix(in srgb, var(--color-primary) 10%, transparent)"
-											: "transparent";
-									e.currentTarget.style.color = "var(--color-text)";
-								}}
+								style={
+									isAdmin
+										? { width: "calc(100% - 8px)" }
+										: {
+												color: "var(--color-text-readable, var(--color-text))",
+												background:
+													l.code === locale
+														? "color-mix(in srgb, var(--color-primary) 10%, transparent)"
+														: "none",
+												width: "calc(100% - 8px)",
+											}
+								}
 							>
 								<Image
 									src={`/assets/images/icons/flags/${l.code}.png`}