improve org selector

src/components/OrgPicker.tsx

@@ -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>
+    );
+}

src/components/OrgSelector.tsx

@@ -1,199 +1,76 @@
 "use client";
 
-import {
+import { OrgPicker } from "@app/components/OrgPicker";
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList
-} from "@app/components/ui/command";
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger
-} from "@app/components/ui/popover";
 import {
     Tooltip,
     TooltipContent,
     TooltipProvider,
     TooltipTrigger
 } from "@app/components/ui/tooltip";
-import { Badge } from "@app/components/ui/badge";
-import { useEnvContext } from "@app/hooks/useEnvContext";
 import { cn } from "@app/lib/cn";
 import { ListUserOrgsResponse } from "@server/routers/org";
-import { Check, ChevronsUpDown, Plus, Building2, Users } from "lucide-react";
+import { Building2, ChevronsUpDown } from "lucide-react";
-import { Button } from "@app/components/ui/button";
-import { usePathname, useRouter } from "next/navigation";
-import { useMemo, useState } from "react";
-import { useUserContext } from "@app/hooks/useUserContext";
 import { useTranslations } from "next-intl";
-import { build } from "@server/build";
 
-interface OrgSelectorProps {
+type OrgSelectorProps = {
     orgId?: string;
     orgs?: ListUserOrgsResponse["orgs"];
     isCollapsed?: boolean;
-}
+};
 
 export function OrgSelector({
     orgId,
     orgs,
     isCollapsed = false
 }: OrgSelectorProps) {
-    const { user } = useUserContext();
-    const [open, setOpen] = useState(false);
-    const router = useRouter();
-    const pathname = usePathname();
-    const { env } = useEnvContext();
     const t = useTranslations();
-
     const selectedOrg = orgs?.find((org) => org.orgId === orgId);
 
-    let canCreateOrg = !env.flags.disableUserCreateOrg || user.serverAdmin;
+    const picker = (
-    if (build === "saas" && user.type !== "internal") {
+        <OrgPicker
-        canCreateOrg = false;
+            orgId={orgId}
-    }
+            orgs={orgs}
-
+            contentClassName={
-    const sortedOrgs = useMemo(() => {
+                isCollapsed
-        if (!orgs?.length) return orgs ?? [];
+                    ? "w-[320px]"
-        return [...orgs].sort((a, b) => {
+                    : "w-[var(--radix-popover-trigger-width)]"
-            const aPrimary = Boolean(a.isPrimaryOrg);
+            }
-            const bPrimary = Boolean(b.isPrimaryOrg);
+        >
-            if (aPrimary && !bPrimary) return -1;
+            <div
-            if (!aPrimary && bPrimary) return 1;
+                role="combobox"
-            return 0;
+                className={cn(
-        });
+                    "cursor-pointer transition-colors",
-    }, [orgs]);
+                    isCollapsed
-
+                        ? "w-full h-16 flex items-center justify-center hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50"
-    const orgSelectorContent = (
+                        : "w-full px-5 py-4 hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50"
-        <Popover open={open} onOpenChange={setOpen}>
+                )}
-            <PopoverTrigger asChild>
-                <div
-                    role="combobox"
-                    aria-expanded={open}
-                    className={cn(
-                        "cursor-pointer transition-colors",
-                        isCollapsed
-                            ? "w-full h-16 flex items-center justify-center hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50"
-                            : "w-full px-5 py-4 hover:bg-sidebar-accent dark:hover:bg-sidebar-accent/50"
-                    )}
-                >
-                    {isCollapsed ? (
-                        <Building2 className="h-4 w-4" />
-                    ) : (
-                        <div className="flex items-center justify-between w-full min-w-0">
-                            <div className="flex items-center min-w-0 flex-1">
-                                <div className="flex flex-col items-start min-w-0 flex-1 gap-1">
-                                    <span className="font-semibold">
-                                        {t("org")}
-                                    </span>
-                                    <span className="text-sm text-muted-foreground truncate w-full text-left">
-                                        {selectedOrg?.name || t("noneSelected")}
-                                    </span>
-                                </div>
-                            </div>
-                            <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50 ml-2" />
-                        </div>
-                    )}
-                </div>
-            </PopoverTrigger>
-            <PopoverContent
-                className="w-[320px] p-0 ml-4 flex flex-col relative overflow-visible"
-                align="start"
-                sideOffset={12}
             >
-                <Command className="rounded-lg border-0 flex-1 min-h-0">
+                {isCollapsed ? (
-                    <CommandInput
+                    <Building2 className="h-4 w-4" />
-                        placeholder={t("searchPlaceholder")}
+                ) : (
-                        className="border-0 focus:ring-0 h-9 rounded-b-none"
+                    <div className="flex items-center justify-between w-full min-w-0">
-                    />
+                        <div className="flex items-center min-w-0 flex-1">
-                    <CommandList className="max-h-[280px]">
+                            <div className="flex flex-col items-start min-w-0 flex-1 gap-1">
-                        <CommandEmpty className="py-4 text-center">
+                                <span className="font-semibold">
-                            <div className="text-muted-foreground text-sm">
+                                    {t("org")}
-                                {t("orgNotFound2")}
+                                </span>
+                                <span className="text-sm text-muted-foreground truncate w-full text-left">
+                                    {selectedOrg?.name || t("noneSelected")}
+                                </span>
                             </div>
-                        </CommandEmpty>
+                        </div>
-                        <CommandGroup className="p-1" heading={t("orgs")}>
+                        <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50 ml-2" />
-                            {sortedOrgs.map((org) => (
-                                <CommandItem
-                                    key={org.orgId}
-                                    onSelect={() => {
-                                        setOpen(false);
-                                        const newPath = pathname.includes(
-                                            "/settings/"
-                                        )
-                                            ? pathname.replace(
-                                                  /^\/[^/]+/,
-                                                  `/${org.orgId}`
-                                              )
-                                            : `/${org.orgId}`;
-                                        router.push(newPath);
-                                    }}
-                                    className="mx-1 rounded-md py-1.5 h-auto min-h-0"
-                                >
-                                    <div className="flex items-center justify-center w-6 h-6 rounded-md bg-muted mr-2.5 flex-shrink-0">
-                                        <Users className="h-3.5 w-3.5 text-muted-foreground" />
-                                    </div>
-                                    <div className="flex flex-col flex-1 min-w-0 gap-0.5">
-                                        <span className="font-medium truncate text-sm">
-                                            {org.name}
-                                        </span>
-                                        <div className="flex items-center gap-2 min-w-0">
-                                            <span className="text-xs text-muted-foreground font-mono truncate">
-                                                {org.orgId}
-                                            </span>
-                                            {org.isPrimaryOrg && (
-                                                <Badge
-                                                    variant="outline"
-                                                    className="shrink-0 text-[10px] px-1.5 py-0 font-medium ml-auto"
-                                                >
-                                                    {t("primary")}
-                                                </Badge>
-                                            )}
-                                        </div>
-                                    </div>
-                                    <Check
-                                        className={cn(
-                                            "h-4 w-4 text-primary flex-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>
+            </div>
-        </Popover>
+        </OrgPicker>
     );
 
     if (isCollapsed) {
         return (
             <TooltipProvider>
                 <Tooltip>
-                    <TooltipTrigger asChild>
+                    <TooltipTrigger asChild>{picker}</TooltipTrigger>
-                        {orgSelectorContent}
-                    </TooltipTrigger>
                     <TooltipContent side="right" sideOffset={8}>
                         <div className="text-center">
                             <p className="font-medium">
@@ -209,5 +86,5 @@ export function OrgSelector({
         );
     }
 
-    return orgSelectorContent;
+    return picker;
 }

src/components/resource-launcher/LauncherOrgSelector.tsx

@@ -1,28 +1,10 @@
 "use client";
 
-import {
+import { OrgPicker } from "@app/components/OrgPicker";
-    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 { Button } from "@app/components/ui/button";
-import { useEnvContext } from "@app/hooks/useEnvContext";
+import { ListUserOrgsResponse } from "@server/routers/org";
-import { useUserContext } from "@app/hooks/useUserContext";
+import { ChevronDown } from "lucide-react";
-import { build } from "@server/build";
+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}>
+        <OrgPicker orgId={orgId} orgs={orgs} contentClassName="w-[320px]">
-            <PopoverTrigger asChild>
+            <Button
-                <Button
+                className="inline-flex items-center gap-1 p-0"
-                    className="inline-flex items-center gap-1 p-0"
+                variant="text"
-                    variant="text"
+                size="sm"
-                    size="sm"
+            >
-                >
+                <span className="truncate max-w-[200px]">
-                    <span className="truncate max-w-[200px]">
+                    {selectedOrg?.name ?? t("noneSelected")}
-                        {selectedOrg?.name ?? t("noneSelected")}
+                </span>
-                    </span>
+                <ChevronDown className="size-4 shrink-0" />
-                    <ChevronDown className="size-4 shrink-0" />
+            </Button>
-                </Button>
+        </OrgPicker>
-            </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>
     );
 }