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

"use client";

import { useState } from "react";
import { Building2, Check, Plus } from "lucide-react";
import { useRouter } from "next/navigation";

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 { CreateWorkspaceDialog } from "@/components/workspaces/create-workspace-dialog";
import { useWorkspaceStore } from "@/lib/stores/workspace-store";
import { api } from "@/lib/trpc";
import { cn } from "@/lib/utils";

export function WorkspaceSwitcher({
  collapsed,
  className,
}: {
  collapsed?: boolean;
  className?: string;
}) {
  const router = useRouter();
  const current = useWorkspaceStore((s) => s.currentWorkspace);
  const { data: workspaces } = api.workspaces.listForUser.useQuery();
  const [createOpen, setCreateOpen] = useState(false);

  const displayName = current?.name ?? "Select workspace...";

  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">{displayName}</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">{displayName}</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>
          {(workspaces ?? []).map((ws) => {
            const selected = current?.id === ws.id;
            return (
              <DropdownMenuItem
                key={ws.id}
                className="gap-2"
                onClick={() => {
                  router.push(`/${ws.slug}`);
                }}
              >
                <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"
            onSelect={(e) => {
              e.preventDefault();
              setCreateOpen(true);
            }}
          >
            <Plus className="size-4" />
            Create Workspace
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <CreateWorkspaceDialog open={createOpen} onOpenChange={setCreateOpen} />
    </div>
  );
}