From 89af885d95d017320c492166ae7cfd22933cec04 Mon Sep 17 00:00:00 2001
From: Developing-Gamer <maxcodes11110@gmail.com>
Date: Wed, 27 May 2026 12:31:14 -0700
Subject: [PATCH] Add dashboard user menu button.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/dashboard-user-button.tsx  | 184 ++++++++++++++++++
 apps/dashboard/src/components/navbar.tsx      |   4 +-
 2 files changed, 186 insertions(+), 2 deletions(-)
 create mode 100644 apps/dashboard/src/components/dashboard-user-button.tsx

diff --git a/apps/dashboard/src/components/dashboard-user-button.tsx b/apps/dashboard/src/components/dashboard-user-button.tsx
new file mode 100644
index 000000000..8152e6ffe
--- /dev/null
+++ b/apps/dashboard/src/components/dashboard-user-button.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Skeleton,
+  cn,
+} from "@/components/ui";
+import { SignInIcon, SignOutIcon, SunIcon, UserCircleIcon, UserPlusIcon } from "@phosphor-icons/react";
+import { useStackApp, useUser } from "@stackframe/stack";
+import { Suspense } from "react";
+
+type DashboardUserButtonProps = {
+  showUserInfo?: boolean,
+  colorModeToggle?: () => void | Promise<void>,
+  extraItems?: {
+    text: string,
+    icon: React.ReactNode,
+    onClick: () => void | Promise<void>,
+  }[],
+};
+
+type DashboardMenuItemProps = {
+  text: string,
+  icon: React.ReactNode,
+  onClick: () => void | Promise<void>,
+  variant?: "default" | "destructive",
+};
+
+const menuIconClassName = "h-4 w-4 shrink-0 text-muted-foreground";
+const destructiveItemClasses =
+  "text-red-600 dark:text-red-400 focus:bg-red-500/10 data-[highlighted]:bg-red-500/10 dark:focus:bg-red-500/15 dark:data-[highlighted]:bg-red-500/15";
+
+function DashboardUserAvatar(props: {
+  size?: number,
+  user: ReturnType<typeof useUser>,
+}) {
+  const size = props.size ?? 34;
+  const user = props.user;
+  const label = user?.displayName ?? user?.primaryEmail ?? "User";
+  const initials = label.slice(0, 2).toUpperCase();
+
+  return (
+    <Avatar
+      className="bg-zinc-100 text-foreground ring-1 ring-black/[0.06] dark:bg-foreground/[0.08] dark:ring-white/[0.08]"
+      style={{ height: size, width: size }}
+    >
+      <AvatarImage src={user?.profileImageUrl ?? ""} />
+      <AvatarFallback>
+        <span className="font-medium" style={{ fontSize: size * 0.4 }}>
+          {initials}
+        </span>
+      </AvatarFallback>
+    </Avatar>
+  );
+}
+
+function DashboardMenuItem(props: DashboardMenuItemProps) {
+  return (
+    <DropdownMenuItem
+      icon={props.icon}
+      onClick={props.onClick}
+      className={props.variant === "destructive" ? destructiveItemClasses : undefined}
+    >
+      {props.text}
+    </DropdownMenuItem>
+  );
+}
+
+export function DashboardUserButton(props: DashboardUserButtonProps) {
+  return (
+    <Suspense fallback={<Skeleton className="h-[34px] w-[34px] rounded-full stack-scope" />}>
+      <DashboardUserButtonInner {...props} />
+    </Suspense>
+  );
+}
+
+function DashboardUserButtonInner(props: DashboardUserButtonProps) {
+  const user = useUser();
+  const app = useStackApp();
+  const showUserInfo = props.showUserInfo === true;
+  const displayName = user?.displayName ?? user?.primaryEmail ?? "Account";
+  const iconProps = { size: 16, className: menuIconClassName };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className={cn(
+          "outline-none stack-scope border-0 bg-transparent shadow-none transition-colors duration-150 hover:transition-none",
+          "hover:bg-zinc-100/80 dark:hover:bg-foreground/[0.06]",
+          "data-[state=open]:bg-zinc-100/90 dark:data-[state=open]:bg-foreground/[0.08]",
+          "focus-visible:outline-none focus-visible:ring-0",
+          showUserInfo
+            ? "w-full overflow-hidden rounded-lg p-2"
+            : "rounded-xl p-1.5 focus-visible:ring-2 focus-visible:ring-black/[0.08] dark:focus-visible:ring-white/[0.12]",
+        )}
+      >
+        <div className={cn("flex min-w-0 items-center gap-2", showUserInfo && "w-full")}>
+          <DashboardUserAvatar user={user} size={showUserInfo ? 32 : 34} />
+          {user && showUserInfo && (
+            <div className="flex min-w-0 flex-1 flex-col justify-center overflow-hidden text-left">
+              <div className="truncate text-sm font-medium text-foreground">{displayName}</div>
+              {user.primaryEmail != null && user.primaryEmail !== displayName && (
+                <div className="truncate text-xs text-muted-foreground">{user.primaryEmail}</div>
+              )}
+            </div>
+          )}
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="stack-scope w-[240px] p-1.5"
+        align={showUserInfo ? "start" : "end"}
+        side={showUserInfo ? "top" : "bottom"}
+        sideOffset={showUserInfo ? 8 : 6}
+      >
+        <DropdownMenuLabel className="cursor-default px-3 py-2.5 font-normal">
+          <div className="flex min-w-0 items-center gap-3">
+            <DashboardUserAvatar user={user} size={40} />
+            <div className="min-w-0 flex-1">
+              {user ? (
+                <>
+                  <p className="truncate text-sm font-semibold text-foreground">{displayName}</p>
+                  <p className="truncate text-xs text-muted-foreground">{user.primaryEmail}</p>
+                </>
+              ) : (
+                <p className="text-sm text-muted-foreground">Not signed in</p>
+              )}
+            </div>
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator className="mx-0 my-1 bg-black/[0.06] dark:bg-border/60" />
+        {user && (
+          <DashboardMenuItem
+            text="Account settings"
+            onClick={async () => await app.redirectToAccountSettings()}
+            icon={<UserCircleIcon {...iconProps} />}
+          />
+        )}
+        {!user && (
+          <DashboardMenuItem
+            text="Sign in"
+            onClick={async () => await app.redirectToSignIn()}
+            icon={<SignInIcon {...iconProps} />}
+          />
+        )}
+        {!user && (
+          <DashboardMenuItem
+            text="Sign up"
+            onClick={async () => await app.redirectToSignUp()}
+            icon={<UserPlusIcon {...iconProps} />}
+          />
+        )}
+        {user && props.extraItems?.map((item, index) => (
+          <DashboardMenuItem key={index} text={item.text} onClick={item.onClick} icon={item.icon} />
+        ))}
+        {props.colorModeToggle && (
+          <DashboardMenuItem
+            text="Toggle theme"
+            onClick={props.colorModeToggle}
+            icon={<SunIcon {...iconProps} />}
+          />
+        )}
+        {user && (
+          <>
+            <DropdownMenuSeparator className="mx-0 my-1 bg-black/[0.06] dark:bg-border/60" />
+            <DashboardMenuItem
+              text="Sign out"
+              variant="destructive"
+              onClick={async () => await user.signOut()}
+              icon={<SignOutIcon {...iconProps} className={cn(menuIconClassName, "text-red-500/80 dark:text-red-400/80")} />}
+            />
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/dashboard/src/components/navbar.tsx b/apps/dashboard/src/components/navbar.tsx
index 60d91a04e..d678d8f7f 100644
--- a/apps/dashboard/src/components/navbar.tsx
+++ b/apps/dashboard/src/components/navbar.tsx
@@ -2,8 +2,8 @@
 
 import { Typography } from "@/components/ui";
 import { getPublicEnvVar } from "@/lib/env";
-import { UserButton } from "@stackframe/stack";
 
+import { DashboardUserButton } from "./dashboard-user-button";
 import { Link } from "./link";
 import { Logo } from "./logo";
 import ThemeToggle from "./theme-toggle";
@@ -26,7 +26,7 @@ export function Navbar({ ...props }) {
           </Link>
           <ThemeToggle />
         </div>
-        {!isRemoteDevelopmentEnvironment && <UserButton />}
+        {!isRemoteDevelopmentEnvironment && <DashboardUserButton />}
       </div>
     </header>
   );