"use client";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useId, useRef, useState } from "react";
import { useAuth } from "@/components/auth/AuthProvider";
import { cn } from "@/lib/cn";
import type { User } from "@/types/auth";
function initialsFromName(name: string): string {
const parts = name.trim().split(/\s+/).filter(Boolean);
if (parts.length === 0) {
return "P";
}
if (parts.length === 1) {
return parts[0].slice(0, 2).toUpperCase();
}
return `${parts[0][0] ?? ""}${parts[1][0] ?? ""}`.toUpperCase();
}
function UserAvatar({ user, className }: { user: User; className?: string }) {
return (
{initialsFromName(user.name)}
);
}
export function UserMenu({ compact = false }: { compact?: boolean }) {
const router = useRouter();
const { user, logout } = useAuth();
const [open, setOpen] = useState(false);
const [isLoggingOut, setIsLoggingOut] = useState(false);
const rootRef = useRef(null);
const menuId = useId();
const buttonId = useId();
useEffect(() => {
if (!open) {
return;
}
function onPointerDown(event: MouseEvent) {
if (!rootRef.current?.contains(event.target as Node)) {
setOpen(false);
}
}
function onKeyDown(event: KeyboardEvent) {
if (event.key === "Escape") {
setOpen(false);
}
}
document.addEventListener("mousedown", onPointerDown);
document.addEventListener("keydown", onKeyDown);
return () => {
document.removeEventListener("mousedown", onPointerDown);
document.removeEventListener("keydown", onKeyDown);
};
}, [open]);
if (!user) {
return null;
}
async function handleLogout() {
if (isLoggingOut) {
return;
}
setIsLoggingOut(true);
setOpen(false);
try {
await logout();
} finally {
router.replace("/signin");
setIsLoggingOut(false);
}
}
return (
{user.name}
{user.account_type}
{open ? (
) : null}
);
}