74491991d7
Floating menus hover over undimmed content (no backdrop scrim like dialogs), so the frosted .glass (78%) let the content bleed through and hurt readability. Add a near-opaque .glass-menu (surface 92%, keeps blur) and use it for the account, language, notification and add-to-playlist popovers. Dialogs/chrome keep the frostier .glass (they sit over a dark scrim / the ambient bg). perf-mode disables its blur too.
62 lines
2 KiB
TypeScript
62 lines
2 KiB
TypeScript
import { useRef, useState } from "react";
|
|
import { Check, Globe } from "lucide-react";
|
|
import { LANGUAGES, type LangCode } from "../i18n";
|
|
|
|
// Compact language picker (globe + current code). Presentational: the parent decides what
|
|
// changing the language does (set it; persist server-side when signed in).
|
|
export default function LanguageSwitcher({
|
|
value,
|
|
onChange,
|
|
align = "right",
|
|
}: {
|
|
value: LangCode;
|
|
onChange: (code: LangCode) => void;
|
|
align?: "left" | "right";
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
const current = LANGUAGES.find((l) => l.code === value) ?? LANGUAGES[0];
|
|
|
|
function openNow() {
|
|
if (closeTimer.current) clearTimeout(closeTimer.current);
|
|
setOpen(true);
|
|
}
|
|
function closeSoon() {
|
|
closeTimer.current = setTimeout(() => setOpen(false), 200);
|
|
}
|
|
|
|
return (
|
|
<div className="relative" onMouseEnter={openNow} onMouseLeave={closeSoon}>
|
|
<button
|
|
onClick={() => setOpen((o) => !o)}
|
|
title={current.label}
|
|
className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-sm text-muted hover:text-fg hover:bg-card transition"
|
|
>
|
|
<Globe className="w-4 h-4" />
|
|
<span className="text-xs font-semibold uppercase">{current.code}</span>
|
|
</button>
|
|
|
|
{open && (
|
|
<div
|
|
className={`glass-menu absolute ${
|
|
align === "right" ? "right-0" : "left-0"
|
|
} mt-1 w-40 rounded-xl p-1.5 z-40 animate-[popIn_0.16s_ease]`}
|
|
>
|
|
{LANGUAGES.map((l) => (
|
|
<button
|
|
key={l.code}
|
|
onClick={() => {
|
|
onChange(l.code);
|
|
setOpen(false);
|
|
}}
|
|
className="w-full flex items-center justify-between gap-2 text-sm px-2 py-2 rounded-lg text-muted hover:text-fg hover:bg-card transition"
|
|
>
|
|
<span>{l.label}</span>
|
|
{l.code === value && <Check className="w-4 h-4 text-accent" />}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|