-loses Popover mit Escape- und
+ * Außenklick-Behandlung reicht und bleibt tastaturbedienbar.
+ */
+export function UserMenu({ user }: { user: SessionUser }) {
+ const [open, setOpen] = useState(false);
+ const ref = useRef(null);
+
+ useEffect(() => {
+ if (!open) return;
+ const onPointer = (event: MouseEvent) => {
+ if (!ref.current?.contains(event.target as Node)) setOpen(false);
+ };
+ const onKey = (event: KeyboardEvent) => {
+ if (event.key === "Escape") setOpen(false);
+ };
+ document.addEventListener("mousedown", onPointer);
+ document.addEventListener("keydown", onKey);
+ return () => {
+ document.removeEventListener("mousedown", onPointer);
+ document.removeEventListener("keydown", onKey);
+ };
+ }, [open]);
+
+ const initials = user.name
+ .split(/\s+/)
+ .filter(Boolean)
+ .slice(0, 2)
+ .map((part) => part[0]?.toUpperCase() ?? "")
+ .join("");
+
+ return (
+ 
: so kostet das Logo keinen zweiten
+ * Netzwerkabruf, lässt sich animieren und die monochrome Variante nimmt die
+ * Textfarbe des Kontexts an.
+ *
+ * Die Verläufe liegen einmalig in ;
+
+export type Locale = keyof typeof dictionaries;
+export const DEFAULT_LOCALE: Locale = "de";
+export const AVAILABLE_LOCALES = Object.keys(dictionaries) as Locale[];
+
+export function getDictionary(locale: string = DEFAULT_LOCALE): Dictionary {
+ return dictionaries[locale as Locale] ?? dictionaries[DEFAULT_LOCALE];
+}
+
+/**
+ * Übersetzt einen Schlüssel. Platzhalter werden als {name} geschrieben:
+ * t("stats.hours", { hours: 42 })
+ */
+export function translate(
+ locale: string,
+ key: MessageKey,
+ vars?: Record,
+): string {
+ const raw: string = getDictionary(locale)[key] ?? key;
+ if (!vars) return raw;
+ return raw.replace(/\{(\w+)\}/g, (match, name: string) =>
+ name in vars ? String(vars[name]) : match,
+ );
+}
+
+/** Gebundene Variante für eine feste Sprache. */
+export function createTranslator(locale: string) {
+ return (key: MessageKey, vars?: Record) =>
+ translate(locale, key, vars);
+}
+
+export const t = createTranslator(DEFAULT_LOCALE);
+export type { MessageKey, Dictionary };
+
+
+ {open && (
+
+ );
+}
+
+function MenuLink({
+ href,
+ onClick,
+ children,
+}: {
+ href: string;
+ onClick: () => void;
+ children: React.ReactNode;
+}) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/components/brand/FlimmerLogo.tsx b/src/components/brand/FlimmerLogo.tsx
new file mode 100644
index 0000000..eddb566
--- /dev/null
+++ b/src/components/brand/FlimmerLogo.tsx
@@ -0,0 +1,181 @@
+import { clsx } from "clsx";
+
+/**
+ * Die Marke als React-Komponenten.
+ *
+ * Inline statt
+ setOpen(false)}>
+ Einstellungen
+
+ setOpen(false)}>
+ Benachrichtigungen
+
+ setOpen(false)}>
+ API-Schlüssel
+
+ setOpen(false)}>
+ Papierkorb
+
+ {user.role === "ADMIN" && (
+ setOpen(false)}>
+ Verwaltung
+
+ )}
+
+
+
+ )}
+
+
+
+ {user.name}
+{user.email}
+