From 2c68fb7e5a3f99ef8dbfe6ece374ea044a482ff3 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Wed, 15 Jul 2026 21:46:54 +0200
Subject: [PATCH] Polish admin language dropdown layout and selection styles.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/components/language-switcher.tsx | 169 ++++++++++++++++-----------
 1 file changed, 102 insertions(+), 67 deletions(-)

diff --git a/src/components/language-switcher.tsx b/src/components/language-switcher.tsx
index a1f551c4..587df62d 100644
--- a/src/components/language-switcher.tsx
+++ b/src/components/language-switcher.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Search } from "lucide-react";
+import { Check, ChevronDown, Search } from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useLocale } from "next-intl";
@@ -43,6 +43,7 @@ export function LanguageSwitcher({
 	const [open, setOpen] = useState(false);
 	const [search, setSearch] = useState("");
 	const ref = useRef<HTMLDivElement>(null);
+	const searchRef = useRef<HTMLInputElement>(null);
 	const current = LOCALES.find((l) => l.code === locale) ?? LOCALES[0];
 	const isAdmin = variant === "admin";
 
@@ -67,11 +68,19 @@ export function LanguageSwitcher({
 	}, []);
 
 	useEffect(() => {
-		if (!open) setSearch("");
+		if (!open) {
+			setSearch("");
+			return;
+		}
+		const id = window.setTimeout(() => searchRef.current?.focus(), 0);
+		return () => window.clearTimeout(id);
 	}, [open]);
 
 	function switchLocale(code: string) {
-		if (code === locale) return;
+		if (code === locale) {
+			setOpen(false);
+			return;
+		}
 		startTransition(async () => {
 			await setLocaleCookie(code);
 			router.refresh();
@@ -88,105 +97,131 @@ export function LanguageSwitcher({
 				aria-label="Change language"
 				title="Language"
 				aria-expanded={open}
+				aria-haspopup="listbox"
 				className={
 					isAdmin
-						? "flex items-center gap-1.5 h-9 rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface-elevated)] px-2 text-xs font-bold uppercase tracking-wide text-[var(--admin-text)] 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"
+						? "flex items-center gap-1.5 h-9 rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface-elevated)] px-2.5 text-xs font-bold uppercase tracking-wide text-[var(--admin-text)] 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`}
-					alt={current.lang}
+					alt=""
 					width={16}
 					height={16}
 					className="inline-block h-4 w-auto"
 				/>
 				<span>{current.code.toUpperCase()}</span>
-				<svg
-					className="w-3 h-3 opacity-70"
-					fill="none"
-					stroke="currentColor"
-					viewBox="0 0 24 24"
+				<ChevronDown
+					className={`h-3 w-3 opacity-70 transition-transform ${open ? "rotate-180" : ""}`}
 					aria-hidden
-				>
-					<path
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						strokeWidth={2}
-						d="M19 9l-7 7-7-7"
-					/>
-				</svg>
+				/>
 			</button>
 
 			{open && (
 				<div
+					role="listbox"
+					aria-label="Languages"
 					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"
+							? "absolute right-0 top-full mt-1.5 z-50 w-56 overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface-elevated)] text-[var(--admin-text)] shadow-xl"
+							: "dropdown-menu absolute left-0 md:right-0 md:left-auto top-full mt-0.5 w-56 overflow-hidden rounded-xl z-50"
 					}
 				>
-					<div className="px-3 pb-1">
-						<div
+					<div
+						className={
+							isAdmin
+								? "border-b border-[var(--admin-border)] p-2"
+								: "border-b border-black/10 dark:border-white/10 p-2"
+						}
+					>
+						<label
 							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"
+									? "flex min-w-0 items-center gap-2 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-canvas)] px-2.5 py-1.5"
+									: "flex min-w-0 items-center gap-2 rounded-lg border bg-background px-2.5 py-1.5"
 							}
 						>
-							<Search className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+							<Search
+								className={`h-3.5 w-3.5 shrink-0 ${isAdmin ? "text-[var(--admin-text-muted)]" : "text-muted-foreground"}`}
+								aria-hidden
+							/>
 							<input
+								ref={searchRef}
 								type="text"
-								placeholder="Search..."
+								placeholder="Search…"
 								value={search}
 								onChange={(e) => setSearch(e.target.value)}
-								className="flex-1 bg-transparent outline-none text-sm border-0 p-0 m-0 text-inherit"
+								aria-label="Search languages"
+								className={
+									isAdmin
+										? "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-[var(--admin-text)] outline-none shadow-none focus:border-0 focus:shadow-none focus:ring-0 placeholder:text-[var(--admin-text-muted)]"
+										: "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm outline-none shadow-none focus:border-0 focus:shadow-none focus:ring-0"
+								}
 							/>
-						</div>
+						</label>
 					</div>
-					<div className="max-h-[260px] overflow-y-auto">
+
+					<div className="max-h-64 overflow-y-auto overscroll-contain p-1.5">
 						{filtered.length === 0 && (
-							<p className="px-3 py-4 text-center text-xs text-muted-foreground">
+							<p
+								className={`px-2 py-6 text-center text-xs ${isAdmin ? "text-[var(--admin-text-muted)]" : "text-muted-foreground"}`}
+							>
 								No languages found
 							</p>
 						)}
-						{filtered.map((l) => (
-							<button
-								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-colors rounded-lg mx-1 border-0 cursor-pointer ${
-									l.code === locale
-										? 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={
-									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`}
-									alt={l.lang}
-									width={16}
-									height={16}
-									className="inline-block h-4 w-auto"
-								/>
-								{l.label}
-							</button>
-						))}
+						{filtered.map((l) => {
+							const selected = l.code === locale;
+							return (
+								<button
+									key={l.code}
+									type="button"
+									role="option"
+									aria-selected={selected}
+									onClick={() => switchLocale(l.code)}
+									className={
+										isAdmin
+											? `flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm transition-colors border-0 cursor-pointer ${
+													selected
+														? "bg-[var(--admin-accent)]/18 text-[var(--admin-accent)] font-semibold"
+														: "bg-transparent text-[var(--admin-text)] hover:bg-[var(--admin-accent)]/10"
+												}`
+											: `flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm font-medium transition-colors border-0 cursor-pointer ${
+													selected
+														? "opacity-100"
+														: "opacity-70 hover:opacity-100"
+												}`
+									}
+									style={
+										isAdmin
+											? undefined
+											: {
+													color: "var(--color-text-readable, var(--color-text))",
+													background: selected
+														? "color-mix(in srgb, var(--color-primary) 12%, transparent)"
+														: "transparent",
+												}
+									}
+								>
+									<Image
+										src={`/assets/images/icons/flags/${l.code}.png`}
+										alt=""
+										width={16}
+										height={16}
+										className="inline-block h-4 w-auto shrink-0"
+									/>
+									<span className="min-w-0 flex-1 truncate">{l.label}</span>
+									{selected ? (
+										<Check
+											className={`h-3.5 w-3.5 shrink-0 ${isAdmin ? "text-[var(--admin-accent)]" : "opacity-80"}`}
+											aria-hidden
+										/>
+									) : (
+										<span className="w-3.5 shrink-0" aria-hidden />
+									)}
+								</button>
+							);
+						})}
 					</div>
 				</div>
 			)}