// ═══════════════════════════════════════════════════════════════════
// Plaaayground v2 — Top Bar
// Bible Section 5: "Top bar only: logo, project selector, new project, user menu"
// DD Pattern: Fixed position, no scroll animation, instant interactions
// Minimal height: 48px. No sidebar toggle — v2 has no sidebar.
// ═══════════════════════════════════════════════════════════════════

import { Link, useNavigate, useParams } from "react-router-dom";
import { motion } from "framer-motion";
import {
  Plus,
  ChevronDown,
  Settings,
  LogOut,
  FolderKanban,
} from "lucide-react";
import { cn } from "@/lib/utils";
import { press } from "@/lib/motion";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { FallbackAvatar } from "@/components/dd";

interface TopBarProps {
  /** Current project name (if inside workspace) */
  projectName?: string;
  /** All user projects for the selector */
  projects?: Array<{ id: string; name: string }>;
  /** User info */
  user?: {
    displayName: string;
    avatarUrl?: string;
    email?: string;
  };
  /** Called when user selects a different project */
  onProjectChange?: (projectId: string) => void;
  /** Called when user clicks "New Project" */
  onNewProject?: () => void;
  /** Called when user signs out */
  onSignOut?: () => void;
}

export function TopBar({
  projectName,
  projects = [],
  user,
  onProjectChange,
  onNewProject,
  onSignOut,
}: TopBarProps) {
  const navigate = useNavigate();
  const { id: currentProjectId } = useParams();

  return (
    <header
      className={cn(
        "h-12 px-4 flex items-center justify-between",
        "bg-white/80 backdrop-blur-xl",
        "border-b border-border/50",
        "flex-shrink-0 z-40"
      )}
    >
      {/* Left: Logo + Project Selector */}
      <div className="flex items-center gap-3">
        {/* Logo — ○ ● ○ brand mark */}
        <Link
          to="/projects"
          className="flex items-center gap-1.5 relative"
          aria-label="Go to projects"
        >
          <motion.div className="flex items-center gap-[3px]" {...press}>
            <span className="w-[7px] h-[7px] rounded-full border border-brand" />
            <span className="w-[7px] h-[7px] rounded-full bg-brand" />
            <span className="w-[7px] h-[7px] rounded-full border border-brand" />
          </motion.div>
          <span className="text-[14px] font-semibold text-foreground ml-1.5 hidden sm:inline tracking-tight">
            plaaayground
          </span>
        </Link>

        {/* Project Selector — shown when inside a workspace */}
        {projectName && (
          <>
            <span className="text-muted-foreground/30 text-caption select-none">/</span>
            <ProjectSelector
              currentName={projectName}
              projects={projects}
              currentProjectId={currentProjectId}
              onSelect={(id) => {
                onProjectChange?.(id);
                navigate(`/projects/${id}`);
              }}
            />
          </>
        )}
      </div>

      {/* Right: New Project + User Menu */}
      <div className="flex items-center gap-2">
        {/* New Project Button */}
        <motion.button
          onClick={onNewProject}
          className={cn(
            "flex items-center gap-1.5 px-3 h-8",
            "bg-brand text-white text-caption font-medium",
            "hover:bg-brand/90 transition-colors duration-150"
          )}
          {...press}
          aria-label="Create new project"
        >
          <Plus className="w-3.5 h-3.5" />
          <span className="hidden sm:inline">New</span>
        </motion.button>

        {/* User Menu */}
        {user && (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <motion.button
                className="rounded-full focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1"
                {...press}
              >
                <FallbackAvatar
                  name={user.displayName}
                  src={user.avatarUrl}
                  size={28}
                  className="border border-border"
                />
              </motion.button>
            </DropdownMenuTrigger>
            {/* DD: Dropdowns appear instantly — no fade animation */}
            <DropdownMenuContent
              align="end"
              sideOffset={8}
              className="w-48 bg-white border-border/50 shadow-lg"
            >
              <div className="px-3 py-2">
                <p className="text-[14px] font-medium text-foreground truncate">
                  {user.displayName}
                </p>
                {user.email && (
                  <p className="text-caption text-muted-foreground truncate">
                    {user.email}
                  </p>
                )}
              </div>
              <DropdownMenuSeparator />
              <DropdownMenuItem
                onClick={() => navigate("/projects")}
                className="gap-2 text-[14px] cursor-pointer"
              >
                <FolderKanban className="w-4 h-4" />
                Projects
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => navigate("/settings")}
                className="gap-2 text-[14px] cursor-pointer"
              >
                <Settings className="w-4 h-4" />
                Settings
              </DropdownMenuItem>
              <DropdownMenuSeparator />
              <DropdownMenuItem
                onClick={onSignOut}
                className="gap-2 text-[14px] cursor-pointer text-destructive focus:text-destructive"
              >
                <LogOut className="w-4 h-4" />
                Sign out
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        )}
      </div>
    </header>
  );
}

// ── Project Selector Dropdown ──────────────────────────────────

function ProjectSelector({
  currentName,
  projects,
  currentProjectId,
  onSelect,
}: {
  currentName: string;
  projects: Array<{ id: string; name: string }>;
  currentProjectId?: string;
  onSelect?: (id: string) => void;
}) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button
          className={cn(
            "flex items-center gap-1 px-2 h-7",
            "text-[14px] font-medium text-foreground",
            "hover:bg-secondary transition-colors duration-150"
          )}
        >
          <span className="truncate max-w-[180px]">{currentName}</span>
          <ChevronDown className="w-3.5 h-3.5 text-muted-foreground shrink-0" />
        </button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start" sideOffset={8} className="w-56 bg-white border-border/50 shadow-lg">
        {projects.map((project) => (
          <DropdownMenuItem
            key={project.id}
            onClick={() => onSelect?.(project.id)}
            className={cn(
              "text-[14px] cursor-pointer",
              project.id === currentProjectId && "bg-secondary"
            )}
          >
            <span className="truncate">{project.name}</span>
          </DropdownMenuItem>
        ))}
        {projects.length === 0 && (
          <div className="px-3 py-2 text-caption text-muted-foreground">
            No projects yet
          </div>
        )}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export default TopBar;
TopBar

Source Code
