improve org selector

src/components/resource-launcher/LauncherOrgSelector.tsx

@@ -1,28 +1,10 @@
 "use client";
 
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList
-} from "@app/components/ui/command";
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger
-} from "@app/components/ui/popover";
-import { cn } from "@app/lib/cn";
-import { ListUserOrgsResponse } from "@server/routers/org";
-import { Check, ChevronDown, Plus } from "lucide-react";
-import { usePathname, useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
-import { useTranslations } from "next-intl";
+import { OrgPicker } from "@app/components/OrgPicker";
 import { Button } from "@app/components/ui/button";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { useUserContext } from "@app/hooks/useUserContext";
-import { build } from "@server/build";
+import { ListUserOrgsResponse } from "@server/routers/org";
+import { ChevronDown } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 type LauncherOrgSelectorProps = {
     orgId?: string;
@@ -30,111 +12,21 @@ type LauncherOrgSelectorProps = {
 };
 
 export function LauncherOrgSelector({ orgId, orgs }: LauncherOrgSelectorProps) {
-    const [open, setOpen] = useState(false);
-    const router = useRouter();
-    const pathname = usePathname();
     const t = useTranslations();
-    const { env } = useEnvContext();
-    const { user } = useUserContext();
-
     const selectedOrg = orgs?.find((org) => org.orgId === orgId);
 
-    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]);
-
     return (
-        <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-                <Button
-                    className="inline-flex items-center gap-1 p-0"
-                    variant="text"
-                    size="sm"
-                >
-                    <span className="truncate max-w-[200px]">
-                        {selectedOrg?.name ?? t("noneSelected")}
-                    </span>
-                    <ChevronDown className="size-4 shrink-0" />
-                </Button>
-            </PopoverTrigger>
-            <PopoverContent className="w-[320px] p-0" align="start">
-                <Command className="rounded-lg border-0">
-                    <CommandInput placeholder={t("searchPlaceholder")} />
-                    <CommandList className="max-h-[280px]">
-                        <CommandEmpty>{t("orgNotFound2")}</CommandEmpty>
-                        <CommandGroup heading={t("orgs")}>
-                            {sortedOrgs.map((org) => (
-                                <CommandItem
-                                    key={org.orgId}
-                                    onSelect={() => {
-                                        setOpen(false);
-                                        const newPath = pathname.includes(
-                                            "/settings/"
-                                        )
-                                            ? pathname.replace(
-                                                  /^\/[^/]+/,
-                                                  `/${org.orgId}`
-                                              )
-                                            : `/${org.orgId}`;
-                                        router.push(newPath);
-                                    }}
-                                >
-                                    <div className="flex flex-col flex-1 min-w-0">
-                                        <span className="font-medium truncate text-sm">
-                                            {org.name}
-                                        </span>
-                                        <span className="text-xs text-muted-foreground font-mono truncate">
-                                            {org.orgId}
-                                        </span>
-                                    </div>
-                                    <Check
-                                        className={cn(
-                                            "h-4 w-4 text-primary shrink-0",
-                                            orgId === org.orgId
-                                                ? "opacity-100"
-                                                : "opacity-0"
-                                        )}
-                                    />
-                                </CommandItem>
-                            ))}
-                        </CommandGroup>
-                    </CommandList>
-                </Command>
-                {canCreateOrg && (
-                    <div className="p-2 border-t border-border">
-                        <Button
-                            variant="ghost"
-                            size="sm"
-                            className="w-full justify-start h-8 font-normal text-muted-foreground"
-                            onClick={() => {
-                                setOpen(false);
-                                router.push("/setup");
-                            }}
-                        >
-                            <Plus className="h-3.5 w-3.5 mr-2" />
-                            {t("setupNewOrg")}
-                        </Button>
-                    </div>
-                )}
-            </PopoverContent>
-        </Popover>
+        <OrgPicker orgId={orgId} orgs={orgs} contentClassName="w-[320px]">
+            <Button
+                className="inline-flex items-center gap-1 p-0"
+                variant="text"
+                size="sm"
+            >
+                <span className="truncate max-w-[200px]">
+                    {selectedOrg?.name ?? t("noneSelected")}
+                </span>
+                <ChevronDown className="size-4 shrink-0" />
+            </Button>
+        </OrgPicker>
     );
 }