Add search to site select

app/Actions/Site/GetSites.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace App\Actions\Site;
+
+use App\Models\Server;
+use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Validator;
+
+class GetSites
+{
+    public function get(Server $server, array $input, int $perPage = 10): Collection
+    {
+        $validated = $this->validate($input);
+
+        $sitesQuery = $server->sites();
+
+        if (! empty($validated['query'])) {
+            $sitesQuery->where('domain', 'like', "%{$validated['query']}%");
+        }
+
+        $page = $validated['page'] ?? 1;
+
+        return $sitesQuery
+            ->skip(($page - 1) * $perPage)
+            ->take($perPage)
+            ->get();
+    }
+
+    private function validate(array $input): array
+    {
+        return Validator::make($input, [
+            'query' => [
+                'nullable',
+                'string',
+            ],
+            'page' => [
+                'nullable',
+                'integer',
+                'min:1',
+            ],
+        ])->validate();
+    }
+}

app/Http/Controllers/SiteController.php

@@ -3,13 +3,15 @@
 namespace App\Http\Controllers;
 
 use App\Actions\Site\CreateSite;
+use App\Actions\Site\GetSites;
 use App\Helpers\QueryBuilder;
 use App\Http\Resources\ServerLogResource;
 use App\Http\Resources\SiteResource;
 use App\Models\Server;
 use App\Models\Site;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
+use Illuminate\Http\Resources\Json\ResourceCollection;
 use Illuminate\Support\Facades\URL;
 use Inertia\Inertia;
 use Inertia\Response;
@@ -54,6 +56,16 @@ public function server(Server $server): Response
         ]);
     }
 
+    #[Get('/servers/{server}/sites-json', name: 'sites.json')]
+    public function json(Request $request, Server $server): ResourceCollection
+    {
+        $this->authorize('viewAny', [Site::class, $server]);
+
+        $sites = app(GetSites::class)->get($server, $request->input(), 10);
+
+        return SiteResource::collection($sites);
+    }
+
     /**
      * @throws Throwable
      */

resources/js/components/site-switch.tsx

@@ -1,97 +1,98 @@
+import { type SharedData } from '@/types';
+import { type Site } from '@/types/site';
 import { useForm, usePage } from '@inertiajs/react';
-import { useState } from 'react';
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { ChevronsUpDownIcon, PlusIcon } from 'lucide-react';
 import { useInitials } from '@/hooks/use-initials';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { type Site } from '@/types/site';
-import type { SharedData } from '@/types';
 import CreateSite from '@/pages/sites/components/create-site';
+import SiteSelect from '@/pages/sites/components/site-select';
+import { CommandGroup, CommandItem } from '@/components/ui/command';
 import siteHelper from '@/lib/site-helper';
 
 export function SiteSwitch() {
   const page = usePage<SharedData>();
+  const [open, setOpen] = useState(false);
+  const [siteFormOpen, setSiteFormOpen] = useState(false);
   const storedSite = siteHelper.getStoredSite();
-  const [selectedSite, setSelectedSite] = useState(page.props.site || storedSite || null);
+  const currentSite = page.props.site || storedSite || null;
+  const [selected, setSelected] = useState<string>(currentSite?.id?.toString() ?? '');
   const initials = useInitials();
   const form = useForm();
 
-  if (storedSite && page.props.site && storedSite.id !== page.props.site.id) {
-    siteHelper.storeSite(page.props.site);
-  }
+  useEffect(() => {
+    const site = page.props.site || storedSite || null;
+    setSelected(site?.id?.toString() ?? '');
+  }, [page.props.site?.id, storedSite?.id]);
 
-  if (storedSite && page.props.server_sites && !page.props.server_sites.find((site) => site.id === storedSite.id)) {
-    siteHelper.storeSite();
-    setSelectedSite(null);
-  }
+  // Sync stored site with current site
+  useEffect(() => {
+    const currentStoredSite = siteHelper.getStoredSite();
+    if (currentStoredSite && page.props.site && currentStoredSite.id !== page.props.site.id) {
+      siteHelper.storeSite(page.props.site);
+    }
+  }, [page.props.site]);
 
-  const handleSiteChange = (site: Site) => {
-    setSelectedSite(site);
+  const handleSiteChange = (value: string, site: Site) => {
+    setSelected(value);
+    setOpen(false);
     siteHelper.storeSite(site);
     form.post(route('sites.switch', { server: site.server_id, site: site.id }));
   };
 
-  return (
-    page.props.server &&
-    page.props.server_sites && (
-      <div className="flex items-center">
-        <DropdownMenu modal={false}>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="px-1!">
-              {selectedSite && (
-                <>
-                  <Avatar className="size-6 rounded-sm">
-                    <AvatarFallback className="rounded-sm">{initials(selectedSite?.domain ?? '')}</AvatarFallback>
-                  </Avatar>
-                  <span className="hidden lg:flex">{selectedSite?.domain}</span>
-                </>
-              )}
+  const footer = (
+    <CommandGroup>
+      <CreateSite defaultOpen={siteFormOpen} onOpenChange={setSiteFormOpen} server={page.props.server}>
+        <CommandItem
+          value="create-site"
+          onSelect={() => {
+            setSiteFormOpen(true);
+          }}
+          className="gap-0"
+        >
+          <div className="flex items-center">
+            <PlusIcon size={5} />
+            <span className="ml-2">Create new site</span>
+          </div>
+        </CommandItem>
+      </CreateSite>
+    </CommandGroup>
+  );
 
-              {!selectedSite && (
-                <>
-                  <Avatar className="size-6 rounded-sm">
-                    <AvatarFallback className="rounded-sm">S</AvatarFallback>
-                  </Avatar>
-                  <span className="hidden lg:flex">Select a site</span>
-                </>
-              )}
+  const trigger = (
+    <Button variant="ghost" className="px-1!">
+      {currentSite ? (
+        <>
+          <Avatar className="size-6 rounded-sm">
+            <AvatarFallback className="rounded-sm">{initials(currentSite?.domain ?? '')}</AvatarFallback>
+          </Avatar>
+          <span className="hidden lg:flex">{currentSite?.domain}</span>
+        </>
+      ) : (
+        <>
+          <Avatar className="size-6 rounded-sm">
+            <AvatarFallback className="rounded-sm">S</AvatarFallback>
+          </Avatar>
+          <span className="hidden lg:flex">Select a site</span>
+        </>
+      )}
+      <ChevronsUpDownIcon size={5} />
+    </Button>
+  );
 
-              <ChevronsUpDownIcon size={5} />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-56" align="start">
-            {page.props.server_sites.length > 0 ? (
-              page.props.server_sites.map((site) => (
-                <DropdownMenuCheckboxItem
-                  key={`site-${site.id.toString()}`}
-                  checked={selectedSite?.id === site.id}
-                  onCheckedChange={() => handleSiteChange(site)}
-                >
-                  {site.domain}
-                </DropdownMenuCheckboxItem>
-              ))
-            ) : (
-              <DropdownMenuItem disabled>No sites</DropdownMenuItem>
-            )}
-            <DropdownMenuSeparator />
-            <CreateSite server={page.props.server}>
-              <DropdownMenuItem className="gap-0" onSelect={(e) => e.preventDefault()}>
-                <div className="flex items-center">
-                  <PlusIcon size={5} />
-                  <span className="ml-2">Create new site</span>
-                </div>
-              </DropdownMenuItem>
-            </CreateSite>
-          </DropdownMenuContent>
-        </DropdownMenu>
+  return (
+    page.props.server && (
+      <div className="flex items-center">
+        <SiteSelect
+          serverId={page.props.server.id}
+          value={selected}
+          onValueChangeAdvanced={handleSiteChange}
+          trigger={trigger}
+          open={open}
+          onOpenChange={setOpen}
+          footer={footer}
+        />
       </div>
     )
   );

resources/js/pages/sites/components/create-site.tsx

@@ -33,9 +33,32 @@ type CreateSiteForm = {
   user: string;
 };
 
-export default function CreateSite({ server, children }: { server?: Server; children: ReactNode }) {
+export default function CreateSite({
+  server,
+  defaultOpen,
+  onOpenChange,
+  children,
+}: {
+  server?: Server;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children: ReactNode;
+}) {
   const page = usePage<SharedData>();
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(defaultOpen || false);
+
+  useEffect(() => {
+    if (defaultOpen !== undefined) {
+      setOpen(defaultOpen);
+    }
+  }, [defaultOpen]);
+
+  const handleOpenChange = (isOpen: boolean) => {
+    setOpen(isOpen);
+    if (onOpenChange) {
+      onOpenChange(isOpen);
+    }
+  };
 
   const form = useForm<CreateSiteForm>({
     server: server?.id.toString() || '',
@@ -189,7 +212,7 @@ export default function CreateSite({ server, children }: { server?: Server; chil
   };
 
   return (
-    <Sheet open={open} onOpenChange={setOpen}>
+    <Sheet open={open} onOpenChange={handleOpenChange}>
       <SheetTrigger asChild>{children}</SheetTrigger>
       <SheetContent className="w-full lg:max-w-3xl">
         <SheetHeader>