yiekheng/cm_bot_v2
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): nav account menu with sign out + passkey settings link

Browse Source
This commit is contained in:
yiekheng 2026-05-03 08:31:00 +08:00
parent 6ee95bca08
commit b4c526bf9f
2 changed files with 103 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/layout.tsx
View File

@ -2,6 +2,7 @@ import "./globals.css";
import type { Metadata, Viewport } from "next"; import type { Metadata, Viewport } from "next";
import Nav from "@/components/nav"; import Nav from "@/components/nav";
import AutoRefresh from "@/components/auto-refresh"; import AutoRefresh from "@/components/auto-refresh";
import { getSession } from "@/lib/auth";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "CM Bot V2", title: "CM Bot V2",
@ -10,22 +11,19 @@ export const metadata: Metadata = {
export const viewport: Viewport = { export const viewport: Viewport = {
themeColor: "#18181b", themeColor: "#18181b",
// Lets the page draw under the iPhone notch / Dynamic Island when the
// PWA runs in standalone mode. Components that pin to the edges (Nav,
// Toast) read env(safe-area-inset-*) to keep their content out of the
// hardware cutouts.
viewportFit: "cover", viewportFit: "cover",
}; };
export default function RootLayout({ export default async function RootLayout({
children, children,
}: { }: {
children: React.ReactNode; children: React.ReactNode;
}) { }) {
const session = await getSession();
return ( return (
<html lang="en"> <html lang="en">
<body className="min-h-screen bg-zinc-50 text-zinc-900 antialiased"> <body className="min-h-screen bg-zinc-50 text-zinc-900 antialiased">
<Nav /> {session && <Nav username={session.username} />}
<main className="mx-auto max-w-6xl px-4 pb-16 pt-8 sm:px-6 sm:pt-12"> <main className="mx-auto max-w-6xl px-4 pb-16 pt-8 sm:px-6 sm:pt-12">
{children} {children}
</main> </main>

94
web/components/nav.tsx
View File

@ -2,25 +2,29 @@
import Link from "next/link"; import Link from "next/link";
import { usePathname } from "next/navigation"; import { usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { logout } from "@/app/auth-actions";
export default function Nav() { type Props = { username: string };
export default function Nav({ username }: Props) {
const pathname = usePathname() ?? "/"; const pathname = usePathname() ?? "/";
const isPasskeys = pathname.startsWith("/cm-passkeys");
const isUsers = pathname.startsWith("/users"); const isUsers = pathname.startsWith("/users");
const isAccounts = !isUsers; const isAccounts = !isUsers && !isPasskeys;
const initial = (username[0] ?? "?").toUpperCase();
return ( return (
<header <header
className="sticky top-0 z-10 border-b border-zinc-200/80 bg-white/80 backdrop-blur-md" className="sticky top-0 z-10 border-b border-zinc-200/80 bg-white/80 backdrop-blur-md"
style={{ style={{
// Push content below the iPhone notch when the PWA is installed.
// No-op on browsers without a notch (env() resolves to 0).
paddingTop: "env(safe-area-inset-top)", paddingTop: "env(safe-area-inset-top)",
paddingLeft: "env(safe-area-inset-left)", paddingLeft: "env(safe-area-inset-left)",
paddingRight: "env(safe-area-inset-right)", paddingRight: "env(safe-area-inset-right)",
}} }}
> >
<div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4 sm:px-6"> <div className="mx-auto flex max-w-6xl items-center justify-between gap-3 px-4 py-4 sm:gap-4 sm:px-6">
<Link href="/" className="group flex items-center gap-3"> <Link href="/" className="group flex shrink-0 items-center gap-3">
<span className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-900 text-[11px] font-semibold tracking-tight text-white"> <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-900 text-[11px] font-semibold tracking-tight text-white">
CM CM
</span> </span>
@ -34,6 +38,7 @@ export default function Nav() {
</span> </span>
</Link> </Link>
<div className="flex min-w-0 items-center gap-2 sm:gap-3">
<nav <nav
aria-label="Primary" aria-label="Primary"
className="flex items-center gap-1 rounded-full bg-zinc-100 p-1" className="flex items-center gap-1 rounded-full bg-zinc-100 p-1"
@ -45,6 +50,8 @@ export default function Nav() {
Users Users
</NavLink> </NavLink>
</nav> </nav>
<AccountMenu username={username} initial={initial} />
</div>
</div> </div>
</header> </header>
); );
@ -73,3 +80,78 @@ function NavLink({
</Link> </Link>
); );
} }
function AccountMenu({
username,
initial,
}: {
username: string;
initial: string;
}) {
const [open, setOpen] = useState(false);
const wrapperRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!open) return;
function onPointerDown(e: PointerEvent) {
if (!wrapperRef.current) return;
if (!wrapperRef.current.contains(e.target as Node)) setOpen(false);
}
function onKey(e: KeyboardEvent) {
if (e.key === "Escape") setOpen(false);
}
document.addEventListener("pointerdown", onPointerDown);
document.addEventListener("keydown", onKey);
return () => {
document.removeEventListener("pointerdown", onPointerDown);
document.removeEventListener("keydown", onKey);
};
}, [open]);
return (
<div ref={wrapperRef} className="relative">
<button
type="button"
onClick={() => setOpen((v) => !v)}
aria-haspopup="menu"
aria-expanded={open}
className="inline-flex items-center gap-2 rounded-full px-2 py-1 text-xs font-medium text-zinc-700 transition-colors hover:bg-zinc-100"
>
<span className="flex h-6 w-6 items-center justify-center rounded-full bg-zinc-900 text-[10px] font-semibold text-white">
{initial}
</span>
<span className="hidden max-w-[10rem] truncate sm:inline">
{username}
</span>
</button>
{open && (
<div
role="menu"
className="absolute right-0 top-[calc(100%+0.5rem)] z-20 w-48 overflow-hidden rounded-xl bg-white py-1 shadow-lg ring-1 ring-zinc-200/60"
>
<div className="px-3 pb-1 pt-2 text-[10px] font-medium uppercase tracking-wider text-zinc-400 sm:hidden">
{username}
</div>
<Link
href="/cm-passkeys"
role="menuitem"
onClick={() => setOpen(false)}
className="block px-3 py-2 text-xs text-zinc-700 transition-colors hover:bg-zinc-50 hover:text-zinc-900"
>
Passkey settings
</Link>
<form action={logout}>
<button
type="submit"
role="menuitem"
onClick={() => setOpen(false)}
className="block w-full px-3 py-2 text-left text-xs text-zinc-700 transition-colors hover:bg-zinc-50 hover:text-red-600"
>
Sign out
</button>
</form>
</div>
)}
</div>
);
}