Function OrgMenuSlot

apps/cloud/src/web/components/org-menu-slot.tsx:93–188

()

}

export function OrgMenuSlot() {
  const auth = useAuth();
  const [createOrganizationOpen, setCreateOrganizationOpen] = useState(false);

  const suggestedOrganizationName =
    auth.status === "authenticated" && auth.user.name?.trim() !== "" && auth.user.name != null
      ? `${auth.user.name}'s Organization`
      : "New Organization";

  const form = useCreateOrganizationForm({
    defaultName: suggestedOrganizationName,
    // Land on the new org's URL root — a reload would keep the old slug and
    // the slug gate would switch the session right back.
    onSuccess: (org) => {
      window.location.href = `/${org.slug}`;
    },
  });

  if (auth.status !== "authenticated") return null;

  const openCreateOrganization = () => {
    form.reset(suggestedOrganizationName);
    setCreateOrganizationOpen(true);
  };

  return (
    <>
      <DropdownMenuLabel className="text-xs font-normal text-muted-foreground">
        Organization
      </DropdownMenuLabel>
      <DropdownMenuSub>
        <DropdownMenuSubTrigger className="text-xs">
          <span className="min-w-0 flex-1 truncate">
            {auth.organization?.name ?? "No organization"}
          </span>
        </DropdownMenuSubTrigger>
        <DropdownMenuSubContent className="w-56">
          <OrganizationSwitcherItems activeOrganizationId={auth.organization?.id ?? null} />
          <DropdownMenuSeparator />
          <DropdownMenuItem
            className="text-xs"
            onSelect={(event) => {
              event.preventDefault();
              openCreateOrganization();
            }}
          >
            Create organization
          </DropdownMenuItem>
        </DropdownMenuSubContent>
      </DropdownMenuSub>
      <DropdownMenuSeparator />

      <Dialog
        open={createOrganizationOpen}
        onOpenChange={(open) => {
          setCreateOrganizationOpen(open);
          if (!open) form.reset(suggestedOrganizationName);
        }}