Function UserFooter

packages/react/src/multiplayer/shell.tsx:278–341

(props: Pick<ShellProps, "onSignOut" | "orgMenuSlot">)

// ── UserFooter ──────────────────────────────────────────────────────────

function UserFooter(props: Pick<ShellProps, "onSignOut" | "orgMenuSlot">) {
  const auth = useAuth();
  if (auth.status !== "authenticated") return null;

  return (
    <div className="shrink-0 border-t border-sidebar-border px-3 py-2.5">
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button
            type="button"
            variant="ghost"
            className="flex h-auto w-full items-center justify-start gap-2.5 rounded-md px-1 py-1 text-left hover:bg-sidebar-active/60"
          >
            <Avatar url={auth.user.avatarUrl} name={auth.user.name} email={auth.user.email} />
            <div className="min-w-0 flex-1">
              <p className="truncate text-xs font-medium text-foreground">
                {auth.user.name ?? auth.user.email}
              </p>
              {auth.organization && (
                <p className="truncate text-xs text-muted-foreground">{auth.organization.name}</p>
              )}
            </div>
            <svg
              viewBox="0 0 16 16"
              fill="none"
              className="size-3.5 shrink-0 text-muted-foreground"
            >
              <path
                d="M4 6l4 4 4-4"
                stroke="currentColor"
                strokeWidth="1.3"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="start" side="top" className="w-64">
          {props.orgMenuSlot}
          <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
            Signed in as
          </DropdownMenuLabel>
          <DropdownMenuItem disabled className="gap-2 text-xs opacity-100">
            <Avatar url={auth.user.avatarUrl} name={auth.user.name} email={auth.user.email} />
            <div className="min-w-0 flex-1">
              <p className="truncate font-medium text-foreground">
                {auth.user.name ?? auth.user.email}
              </p>
              {auth.user.name && (
                <p className="truncate text-muted-foreground">{auth.user.email}</p>
              )}
            </div>
          </DropdownMenuItem>
          <DropdownMenuItem
            className="text-xs text-destructive focus:text-destructive"
            onClick={() => void props.onSignOut()}
          >
            Sign out