ubiquitous-invention/apps/web/components/sidebar/workspace-switcher.tsx

"use client";

import { Building2, Check, Plus } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import {
  useWorkspaceStore,
  type WorkspaceInfo,
} from "@/lib/stores/workspace-store";
import { cn } from "@/lib/utils";

const MOCK_WORKSPACES: WorkspaceInfo[] = [
  {
    id: "aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa",
    slug: "personal",
    name: "Personal",
  },
  {
    id: "bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbbb",
    slug: "team-alpha",
    name: "Team Alpha",
  },
  {
    id: "cccccccc-cccc-4ccc-8ccc-cccccccccccc",
    slug: "acme",
    name: "Acme Corp",
  },
];

export function WorkspaceSwitcher({
  collapsed,
  className,
}: {
  collapsed?: boolean;
  className?: string;
}) {
  const current = useWorkspaceStore((s) => s.currentWorkspace);
  const setWorkspace = useWorkspaceStore((s) => s.setWorkspace);

  const display =
    current ??
    MOCK_WORKSPACES[0] ??
    ({ id: "", slug: "", name: "Workspace" } satisfies WorkspaceInfo);

  const trigger = (
    <Button
      type="button"
      variant="ghost"
      className={cn(
        "h-auto min-h-9 w-full justify-start gap-2 rounded-md px-2 py-1.5 text-left font-semibold text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
        collapsed && "justify-center px-0",
        className,
      )}
    >
      <Building2 className="size-4 shrink-0 text-primary" />
      {!collapsed ? (
        <span className="min-w-0 flex-1 truncate text-sm">{display.name}</span>
      ) : null}
    </Button>
  );

  return (
    <div className={cn("min-w-0", collapsed && "flex justify-center")}>
      <DropdownMenu>
        {collapsed ? (
          <Tooltip delayDuration={0}>
            <TooltipTrigger asChild>
              <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
            </TooltipTrigger>
            <TooltipContent side="right">{display.name}</TooltipContent>
          </Tooltip>
        ) : (
          <DropdownMenuTrigger asChild className="min-w-0 flex-1">
            {trigger}
          </DropdownMenuTrigger>
        )}
        <DropdownMenuContent className="w-56" align="start" side="bottom">
          <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
            Workspaces
          </DropdownMenuLabel>
          {MOCK_WORKSPACES.map((ws) => {
            const selected = display.id === ws.id;
            return (
              <DropdownMenuItem
                key={ws.id}
                className="gap-2"
                onClick={() => setWorkspace(ws)}
              >
                <Building2 className="size-4 shrink-0 opacity-70" />
                <span className="flex-1 truncate">{ws.name}</span>
                {selected ? (
                  <Check className="size-4 shrink-0 text-primary" />
                ) : null}
              </DropdownMenuItem>
            );
          })}
          <DropdownMenuSeparator />
          <DropdownMenuItem
            className="gap-2 text-muted-foreground focus:text-foreground"
            onClick={() => {
              // Conductor: wire create workspace flow
            }}
          >
            <Plus className="size-4" />
            Create Workspace
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
  );
}