From 8f33e25782b1dccb80997014d321bc2258b2a3c9 Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Thu, 19 Mar 2026 01:18:27 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20use=20site=20selector=20on?=
 =?UTF-8?q?=20private=20resources?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/InternalResourceForm.tsx | 81 +++++++------------------
 src/components/site-selector.tsx        |  2 +-
 2 files changed, 24 insertions(+), 59 deletions(-)

diff --git a/src/components/InternalResourceForm.tsx b/src/components/InternalResourceForm.tsx
index 6df1aceb7..fa1ee22d3 100644
--- a/src/components/InternalResourceForm.tsx
+++ b/src/components/InternalResourceForm.tsx
@@ -1,15 +1,10 @@
 "use client";
 
+import { HorizontalTabs } from "@app/components/HorizontalTabs";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import { StrategySelect } from "@app/components/StrategySelect";
 import { Tag, TagInput } from "@app/components/tags/tag-input";
 import { Button } from "@app/components/ui/button";
-import {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList
-} from "@app/components/ui/command";
 import {
     Form,
     FormControl,
@@ -32,24 +27,22 @@ import {
     SelectValue
 } from "@app/components/ui/select";
 import { Switch } from "@app/components/ui/switch";
-import { getUserDisplayName } from "@app/lib/getUserDisplayName";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { cn } from "@app/lib/cn";
+import { getUserDisplayName } from "@app/lib/getUserDisplayName";
 import { orgQueries, resourceQueries } from "@app/lib/queries";
-import { useQueries, useQuery } from "@tanstack/react-query";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import { ListSitesResponse } from "@server/routers/site";
 import { UserType } from "@server/types/UserTypes";
-import { Check, ChevronsUpDown, ExternalLink } from "lucide-react";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronsUpDown, ExternalLink } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { usePaidStatus } from "@app/hooks/usePaidStatus";
-import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import { HorizontalTabs } from "@app/components/HorizontalTabs";
-import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
-import { StrategySelect } from "@app/components/StrategySelect";
+import { SitesSelector, type Selectedsite } from "./site-selector";
 
 // --- Helpers (shared) ---
 
@@ -407,6 +400,10 @@ export function InternalResourceForm({
                   clients: []
               };
 
+    const [selectedSite, setSelectedSite] = useState<Selectedsite>(
+        availableSites[0]
+    );
+
     const form = useForm<FormData>({
         resolver: zodResolver(formSchema),
         defaultValues
@@ -578,46 +575,14 @@ export function InternalResourceForm({
                                         </FormControl>
                                     </PopoverTrigger>
                                     <PopoverContent className="w-full p-0">
-                                        <Command>
-                                            <CommandInput
-                                                placeholder={t("searchSites")}
-                                            />
-                                            <CommandList>
-                                                <CommandEmpty>
-                                                    {t("noSitesFound")}
-                                                </CommandEmpty>
-                                                <CommandGroup>
-                                                    {availableSites.map(
-                                                        (site) => (
-                                                            <CommandItem
-                                                                key={
-                                                                    site.siteId
-                                                                }
-                                                                value={
-                                                                    site.name
-                                                                }
-                                                                onSelect={() =>
-                                                                    field.onChange(
-                                                                        site.siteId
-                                                                    )
-                                                                }
-                                                            >
-                                                                <Check
-                                                                    className={cn(
-                                                                        "mr-2 h-4 w-4",
-                                                                        field.value ===
-                                                                            site.siteId
-                                                                            ? "opacity-100"
-                                                                            : "opacity-0"
-                                                                    )}
-                                                                />
-                                                                {site.name}
-                                                            </CommandItem>
-                                                        )
-                                                    )}
-                                                </CommandGroup>
-                                            </CommandList>
-                                        </Command>
+                                        <SitesSelector
+                                            orgId={orgId}
+                                            selectedSite={selectedSite}
+                                            onSelectSite={(site) => {
+                                                setSelectedSite(site);
+                                                field.onChange(site.siteId);
+                                            }}
+                                        />
                                     </PopoverContent>
                                 </Popover>
                                 <FormMessage />
diff --git a/src/components/site-selector.tsx b/src/components/site-selector.tsx
index 9b7d44034..0afd94c9a 100644
--- a/src/components/site-selector.tsx
+++ b/src/components/site-selector.tsx
@@ -15,7 +15,7 @@ import { CheckIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useDebounce } from "use-debounce";
 
-type Selectedsite = Pick<
+export type Selectedsite = Pick<
     ListSitesResponse["sites"][number],
     "name" | "siteId" | "type"
 >;