Sync from GitHub via hub-sync

src/components/hf-auth-button.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useAuth } from "@/context/auth-context";
 
 const SIGNIN_BADGE_URL =
@@ -37,28 +37,7 @@ export default function HfAuthButton({ variant = "badge" }: HfAuthButtonProps) {
     const name =
       oauth.userInfo?.preferred_username ?? oauth.userInfo?.name ?? "signed in";
     const avatar = oauth.userInfo?.picture;
-    return (
-      <div className="inline-flex items-center h-6 gap-1.5 panel-raised bg-[var(--surface-0)]/85 backdrop-blur px-1.5 text-[11px] text-slate-300">
-        {avatar && (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img
-            src={avatar}
-            alt=""
-            width={20}
-            height={20}
-            className="rounded-full ring-1 ring-white/10"
-          />
-        )}
-        <span className="tabular max-w-[8rem] truncate">{name}</span>
-        <button
-          onClick={signOut}
-          className="cursor-pointer rounded px-1 text-[9px] uppercase tracking-wide text-slate-400 hover:text-slate-100 hover:bg-white/5 transition-colors"
-          title="Sign out of Hugging Face"
-        >
-          Sign out
-        </button>
-      </div>
-    );
+    return <SignedInMenu name={name} avatar={avatar} onSignOut={signOut} />;
   }
 
   if (variant === "ghost") {
@@ -107,3 +86,88 @@ export default function HfAuthButton({ variant = "badge" }: HfAuthButtonProps) {
     </button>
   );
 }
+
+function SignedInMenu({
+  name,
+  avatar,
+  onSignOut,
+}: {
+  name: string;
+  avatar?: string;
+  onSignOut: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  return (
+    <div ref={wrapperRef} className="relative inline-flex">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        className="cursor-pointer inline-flex items-center h-6 gap-1.5 panel-raised bg-[var(--surface-0)]/85 backdrop-blur px-1.5 text-[11px] text-slate-300 hover:bg-white/[0.04] transition-colors"
+        title={`Signed in as ${name}`}
+      >
+        {avatar && (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={avatar}
+            alt=""
+            width={20}
+            height={20}
+            className="rounded-full ring-1 ring-white/10"
+          />
+        )}
+        <span className="tabular max-w-[8rem] truncate">{name}</span>
+        <svg
+          aria-hidden
+          width="8"
+          height="8"
+          viewBox="0 0 8 8"
+          className={`text-slate-500 transition-transform ${open ? "rotate-180" : ""}`}
+        >
+          <path d="M1 2.5l3 3 3-3" stroke="currentColor" fill="none" />
+        </svg>
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          className="absolute right-0 top-full mt-1.5 min-w-[10rem] panel-raised bg-[var(--surface-1)]/98 backdrop-blur shadow-xl p-1 z-50 text-[11px]"
+        >
+          <button
+            role="menuitem"
+            onClick={() => {
+              setOpen(false);
+              onSignOut();
+            }}
+            className="cursor-pointer w-full text-left px-2 py-1.5 rounded text-slate-300 hover:bg-white/5 hover:text-slate-100 transition-colors"
+          >
+            Sign out
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}