Function UserButton

frontend/src/components/auth/UserButton.tsx:24–187

({
  afterSignOutUrl = '/',
  appearance,
  showUserInfo = true,
  className = '',
  sidebarCollapsed = false,
})

}

export const UserButton: React.FC<UserButtonProps> = ({
  afterSignOutUrl = '/',
  appearance,
  showUserInfo = true,
  className = '',
  sidebarCollapsed = false,
}) => {
  const authProvider = useAuthProvider();
  const { user, isAuthenticated, isLoading } = authProvider.context;

  // Handle loading state
  if (isLoading) {
    return (
      <Button variant="ghost" size="sm" disabled className={className}>
        <div className="animate-pulse flex items-center space-x-2">
          <div className="w-6 h-6 bg-muted rounded-full"></div>
          <div className="w-16 h-4 bg-muted rounded"></div>
        </div>
      </Button>
    );
  }

  // If not authenticated, show sign in button
  if (!isAuthenticated || !user) {
    return (
      <Button variant="outline" size="sm" onClick={authProvider.signIn} className={className}>
        <User className="w-4 h-4 mr-2" />
        Sign In
      </Button>
    );
  }

  // Use Clerk's UserButton if available
  if (authProvider.name === 'clerk') {
    const ClerkUserButton = authProvider.UserButtonComponent;
    return (
      <div className={`flex items-center ${className}`}>
        <ClerkUserButton
          afterSignOutUrl={afterSignOutUrl}
          appearance={{
            elements: {
              avatarBox: sidebarCollapsed ? 'w-8 h-8' : 'w-8 h-8',
              userButtonTrigger: sidebarCollapsed ? 'w-8 h-8' : 'w-full',
              ...appearance?.elements,
            },
            ...appearance,
          }}
        />
      </div>
    );
  }

  // Fallback custom user button for other providers
  const userInitials =
    user.firstName && user.lastName
      ? `${user.firstName[0]}${user.lastName[0]}`
      : user.username
        ? user.username.substring(0, 2).toUpperCase()