learning_ai_common_plat/packages/dashboard-shell/src/TopBar.tsx

import { useState, type ReactNode } from 'react';
import type { TopBarProps } from './types.js';

export function TopBar({
  user,
  features = {},
  onSignOut,
  onNavigate,
  actions,
  onToggleSidebar,
}: TopBarProps): ReactNode {
  const [menuOpen, setMenuOpen] = useState(false);

  const handleNav = (href: string) => {
    setMenuOpen(false);
    if (onNavigate) onNavigate(href);
  };

  const initials = user
    ? user.name
        .split(' ')
        .map(w => w[0])
        .join('')
        .toUpperCase()
        .slice(0, 2)
    : '?';

  return (
    <header
      data-testid="bl-shell-topbar"
      style={{
        height: 56,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '0 24px',
        borderBottom: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
        background: 'var(--bl-shell-topbar-bg, var(--color-surface, #fff))',
        flexShrink: 0,
      }}
    >
      {/* Left: mobile hamburger */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        {onToggleSidebar && (
          <button
            data-testid="bl-shell-hamburger"
            onClick={onToggleSidebar}
            style={{
              background: 'none',
              border: 'none',
              cursor: 'pointer',
              fontSize: 20,
              padding: 4,
              color: 'var(--bl-shell-nav-text, var(--color-muted-foreground, #6b7280))',
            }}
            aria-label="Toggle sidebar"
          >
            ☰
          </button>
        )}
      </div>

      {/* Right: actions + user menu */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
        {actions}

        {features.notifications && (
          <button
            data-testid="bl-shell-notifications"
            style={{
              background: 'none',
              border: 'none',
              cursor: 'pointer',
              fontSize: 18,
              padding: 4,
              color: 'var(--bl-shell-nav-text, var(--color-muted-foreground, #6b7280))',
            }}
            aria-label="Notifications"
          >
            🔔
          </button>
        )}

        {user && (
          <div style={{ position: 'relative' }}>
            <button
              data-testid="bl-shell-user-menu-trigger"
              onClick={() => setMenuOpen(!menuOpen)}
              style={{
                display: 'flex',
                alignItems: 'center',
                gap: 8,
                background: 'none',
                border: 'none',
                cursor: 'pointer',
                padding: '4px 8px',
                borderRadius: 8,
              }}
            >
              {user.avatarUrl ? (
                <img
                  src={user.avatarUrl}
                  alt={user.name}
                  style={{ width: 32, height: 32, borderRadius: '50%' }}
                />
              ) : (
                <div
                  data-testid="bl-shell-user-avatar"
                  style={{
                    width: 32,
                    height: 32,
                    borderRadius: '50%',
                    background: 'var(--bl-shell-accent, var(--color-primary, #2563eb))',
                    color: '#fff',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: 13,
                    fontWeight: 600,
                  }}
                >
                  {initials}
                </div>
              )}
              <span
                style={{
                  fontSize: 14,
                  color: 'var(--color-foreground, #111827)',
                }}
              >
                {user.name}
              </span>
              <span style={{ fontSize: 10 }}>▾</span>
            </button>

            {menuOpen && (
              <div
                data-testid="bl-shell-user-menu"
                style={{
                  position: 'absolute',
                  right: 0,
                  top: '100%',
                  marginTop: 4,
                  minWidth: 180,
                  background: 'var(--bl-shell-topbar-bg, var(--color-surface, #fff))',
                  border: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
                  borderRadius: 8,
                  boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
                  zIndex: 50,
                  overflow: 'hidden',
                }}
              >
                <div
                  style={{
                    padding: '12px 16px',
                    borderBottom: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
                  }}
                >
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{user.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--color-muted-foreground, #6b7280)' }}>
                    {user.email}
                  </div>
                </div>

                {features.profile !== false && (
                  <a
                    data-testid="bl-shell-menu-profile"
                    href="/profile"
                    onClick={e => {
                      e.preventDefault();
                      handleNav('/profile');
                    }}
                    style={menuItemStyle}
                  >
                    Profile
                  </a>
                )}
                {features.billing && (
                  <a
                    data-testid="bl-shell-menu-billing"
                    href="/billing"
                    onClick={e => {
                      e.preventDefault();
                      handleNav('/billing');
                    }}
                    style={menuItemStyle}
                  >
                    Billing
                  </a>
                )}
                {features.settings !== false && (
                  <a
                    data-testid="bl-shell-menu-settings"
                    href="/settings"
                    onClick={e => {
                      e.preventDefault();
                      handleNav('/settings');
                    }}
                    style={menuItemStyle}
                  >
                    Settings
                  </a>
                )}

                {onSignOut && (
                  <button
                    data-testid="bl-shell-menu-signout"
                    onClick={() => {
                      setMenuOpen(false);
                      onSignOut();
                    }}
                    style={{
                      ...menuItemStyle,
                      width: '100%',
                      textAlign: 'left',
                      borderTop: '1px solid var(--bl-shell-border, var(--color-border, #e5e7eb))',
                      color: 'var(--color-destructive, #dc2626)',
                      background: 'none',
                      border: 'none',
                      borderTopStyle: 'solid',
                      borderTopWidth: 1,
                      borderTopColor: 'var(--bl-shell-border, var(--color-border, #e5e7eb))',
                    }}
                  >
                    Sign Out
                  </button>
                )}
              </div>
            )}
          </div>
        )}
      </div>
    </header>
  );
}

const menuItemStyle: React.CSSProperties = {
  display: 'block',
  padding: '10px 16px',
  fontSize: 14,
  color: 'var(--color-foreground, #111827)',
  textDecoration: 'none',
  cursor: 'pointer',
};