122 lines
3.8 KiB
TypeScript
122 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* UserMenu — the right-most item in SiteHeader. Three states:
|
|
*
|
|
* 1. Loading (auth context hasn't hydrated) — render a quiet placeholder
|
|
* so the row width doesn't jump when the user data arrives.
|
|
* 2. Logged out — single "Log in" link.
|
|
* 3. Logged in — avatar / initials chip that opens a popover with
|
|
* "Profile" and "Log out". Built on @base-ui/react/popover so we
|
|
* don't pull in additional shadcn primitives.
|
|
*/
|
|
|
|
import { Popover } from "@base-ui/react/popover";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { useRouter } from "next/navigation";
|
|
import { UserRound } from "lucide-react";
|
|
import { useAuth } from "./auth-provider";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
function initials(name: string): string {
|
|
return (
|
|
name
|
|
.split(/\s+/)
|
|
.map((p) => p[0])
|
|
.slice(0, 2)
|
|
.join("")
|
|
.toUpperCase() || "?"
|
|
);
|
|
}
|
|
|
|
export function UserMenu() {
|
|
const { user, loading, logOut } = useAuth();
|
|
const router = useRouter();
|
|
|
|
if (loading) {
|
|
// Placeholder keeps the action row width stable until auth hydrates.
|
|
return <span aria-hidden className="size-9 inline-block" />;
|
|
}
|
|
|
|
if (!user) {
|
|
// Mobile: compact icon button so the header row fits on 375px viewports.
|
|
// Desktop: full "Log in" text — there's plenty of space.
|
|
// Same muted→foreground pattern as the search / reading-settings buttons
|
|
// so the icon sits at a consistent quiet shade across all themes.
|
|
return (
|
|
<Link
|
|
href="/login"
|
|
aria-label="Log in"
|
|
className="inline-flex items-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors size-9 justify-center md:size-auto md:h-9 md:px-3 md:gap-1.5"
|
|
>
|
|
<UserRound className="size-5 md:size-4" />
|
|
<span className="hidden md:inline text-sm font-medium">Log in</span>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
async function onLogOut() {
|
|
await logOut();
|
|
router.push("/");
|
|
router.refresh();
|
|
}
|
|
|
|
return (
|
|
<Popover.Root>
|
|
<Popover.Trigger
|
|
className="size-9 rounded-full overflow-hidden ring-1 ring-foreground/10 hover:ring-foreground/20 transition-shadow"
|
|
aria-label="Account menu"
|
|
>
|
|
{user.avatar_url ? (
|
|
<Image
|
|
src={user.avatar_url}
|
|
alt={user.name}
|
|
width={36}
|
|
height={36}
|
|
className="size-full object-cover"
|
|
unoptimized
|
|
/>
|
|
) : (
|
|
<span
|
|
className={cn(
|
|
"flex items-center justify-center size-full text-xs font-semibold",
|
|
"bg-primary/15 text-primary",
|
|
)}
|
|
>
|
|
{initials(user.name)}
|
|
</span>
|
|
)}
|
|
</Popover.Trigger>
|
|
<Popover.Portal>
|
|
<Popover.Positioner sideOffset={6} align="end">
|
|
<Popover.Popup className="min-w-44 rounded-xl bg-card border border-border shadow-md p-1 outline-none">
|
|
<div className="px-3 py-2">
|
|
<p className="text-sm font-medium text-foreground truncate">
|
|
{user.name}
|
|
</p>
|
|
<p className="text-xs text-muted-foreground truncate">
|
|
{user.email}
|
|
</p>
|
|
</div>
|
|
<div className="h-px bg-border my-1" />
|
|
<Link
|
|
href="/profile"
|
|
className="block rounded-lg px-3 py-2 text-sm text-foreground hover:bg-muted transition-colors"
|
|
>
|
|
Profile
|
|
</Link>
|
|
<button
|
|
type="button"
|
|
onClick={onLogOut}
|
|
className="block w-full text-left rounded-lg px-3 py-2 text-sm text-foreground hover:bg-muted transition-colors"
|
|
>
|
|
Log out
|
|
</button>
|
|
</Popover.Popup>
|
|
</Popover.Positioner>
|
|
</Popover.Portal>
|
|
</Popover.Root>
|
|
);
|
|
}
|