improve org selector

2026-09-05 02:39:07 +02:00 · 2026-08-14 12:18:55 -04:00
parent 7375b9efae
commit b34a8d116b
3 changed files with 193 additions and 287 deletions
@@ -0,0 +1,137 @@
+"use client";
+
+import { Button } from "@app/components/ui/button";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "@app/components/ui/command";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useUserContext } from "@app/hooks/useUserContext";
+import { cn } from "@app/lib/cn";
+import { build } from "@server/build";
+import { ListUserOrgsResponse } from "@server/routers/org";
+import { CheckIcon, Plus } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { usePathname, useRouter } from "next/navigation";
+import { useMemo, useState, type ReactNode } from "react";
+
+export type OrgPickerProps = {
+    orgId?: string;
+    orgs?: ListUserOrgsResponse["orgs"];
+    contentClassName?: string;
+    sideOffset?: number;
+    children: ReactNode;
+};
+
+export function OrgPicker({
+    orgId,
+    orgs,
+    contentClassName,
+    sideOffset = 0,
+    children
+}: OrgPickerProps) {
+    const [open, setOpen] = useState(false);
+    const router = useRouter();
+    const pathname = usePathname();
+    const t = useTranslations();
+    const { env } = useEnvContext();
+    const { user } = useUserContext();
+
+    let canCreateOrg = !env.flags.disableUserCreateOrg || user.serverAdmin;
+    if (build === "saas" && user.type !== "internal") {
+        canCreateOrg = false;
+    }
+
+    const sortedOrgs = useMemo(() => {
+        if (!orgs?.length) {
+            return orgs ?? [];
+        }
+        return [...orgs].sort((a, b) => {
+            const aPrimary = Boolean(a.isPrimaryOrg);
+            const bPrimary = Boolean(b.isPrimaryOrg);
+            if (aPrimary && !bPrimary) return -1;
+            if (!aPrimary && bPrimary) return 1;
+            return 0;
+        });
+    }, [orgs]);
+
+    function selectOrg(nextOrgId: string) {
+        setOpen(false);
+        const newPath = pathname.includes("/settings/")
+            ? pathname.replace(/^\/[^/]+/, `/${nextOrgId}`)
+            : `/${nextOrgId}`;
+        router.push(newPath);
+    }
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>{children}</PopoverTrigger>
+            <PopoverContent
+                className={cn("p-0", contentClassName)}
+                align="start"
+                sideOffset={sideOffset}
+            >
+                <Command>
+                    <CommandInput placeholder={t("searchPlaceholder")} />
+                    <CommandList>
+                        <CommandEmpty>{t("orgNotFound2")}</CommandEmpty>
+                        <CommandGroup>
+                            {sortedOrgs.map((org) => (
+                                <CommandItem
+                                    key={org.orgId}
+                                    value={`${org.orgId} ${org.name}`}
+                                    onSelect={() => selectOrg(org.orgId)}
+                                >
+                                    <CheckIcon
+                                        className={cn(
+                                            "mr-2 h-4 w-4 shrink-0",
+                                            orgId === org.orgId
+                                                ? "opacity-100"
+                                                : "opacity-0"
+                                        )}
+                                    />
+                                    <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                                        <span className="truncate">
+                                            {org.name}
+                                        </span>
+                                        <span className="text-muted-foreground text-xs leading-snug">
+                                            {org.orgId}
+                                            {org.isPrimaryOrg
+                                                ? ` · ${t("primary")}`
+                                                : ""}
+                                        </span>
+                                    </div>
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+                {canCreateOrg && (
+                    <div className="border-t p-1">
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            className="w-full justify-start font-normal"
+                            onClick={() => {
+                                setOpen(false);
+                                router.push("/setup");
+                            }}
+                        >
+                            <Plus className="h-4 w-4 mr-3" />
+                            {t("setupNewOrg")}
+                        </Button>
+                    </div>
+                )}
+            </PopoverContent>
+        </Popover>
+    );
+}