refactor: implement project package segment lazy select

src/app/(modules)/package/components/PackageDialog.tsx

@@ -1,10 +1,12 @@
 'use client';
 
 import type { ComponentProps } from 'react';
+import { useRef } from 'react';
 import type { FieldErrors, UseFormRegister } from 'react-hook-form';
 import { Loader2 } from 'lucide-react';
 
 import { FormField } from '@/components/form';
+import { ProjectSelect } from '@/components/lookups/ProjectSelect';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -15,14 +17,6 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import type { Project } from '@/types';
 
 import type { PackageFormValues } from '../hooks/usePackageForm';
 
@@ -30,8 +24,6 @@ interface PackageDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   packageId?: string;
-  projects: Project[];
-  isProjectsLoading: boolean;
   projectId: string;
   onProjectChange: (projectId: string) => void;
   register: UseFormRegister<PackageFormValues>;
@@ -46,8 +38,6 @@ export function PackageDialog({
   open,
   onOpenChange,
   packageId,
-  projects,
-  isProjectsLoading,
   projectId,
   onProjectChange,
   register,
@@ -57,6 +47,7 @@ export function PackageDialog({
   canSubmit,
   isSaving,
 }: PackageDialogProps) {
+  const projectSelectPortalRef = useRef<HTMLDivElement | null>(null);
   const projectErrorMessage = isSubmitted
     ? errors.project_id?.message
     : undefined;
@@ -95,25 +86,13 @@ export function PackageDialog({
 
               {!packageId ? (
                 <FormField label="Project" required error={projectErrorMessage}>
-                  <Select value={projectId} onValueChange={onProjectChange}>
-                    <SelectTrigger aria-invalid={!!projectErrorMessage}>
-                      {isProjectsLoading ? (
-                        <span className="flex items-center gap-2 text-muted-foreground">
-                          <Loader2 className="size-4 animate-spin" />
-                          Loading...
-                        </span>
-                      ) : (
-                        <SelectValue placeholder="Choose a project" />
-                      )}
-                    </SelectTrigger>
-                    <SelectContent>
-                      {projects.map((project) => (
-                        <SelectItem key={project.id} value={project.id}>
-                          {project.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
+                  <ProjectSelect
+                    value={projectId}
+                    onValueChange={onProjectChange}
+                    enabled={open}
+                    disabled={isSaving}
+                    portalContainer={projectSelectPortalRef}
+                  />
                   <input
                     type="hidden"
                     {...register('project_id')}
@@ -205,6 +184,8 @@ export function PackageDialog({
             </Button>
           </DialogFooter>
         </form>
+
+        <div ref={projectSelectPortalRef} />
       </DialogContent>
     </Dialog>
   );

src/app/(modules)/package/page.tsx

@@ -113,8 +113,6 @@ export default function PackagePage() {
         open={isDialogOpen}
         onOpenChange={handleDialogOpenChange}
         packageId={packageId}
-        projects={projects}
-        isProjectsLoading={projectsQuery.isLoading}
         projectId={projectId}
         onProjectChange={setProjectId}
         register={register}

src/app/(modules)/package/queries/packageKeys.ts

@@ -4,4 +4,6 @@ export const packageKeys = {
   all: ['packages'] as const,
   lists: () => [...packageKeys.all, 'list'] as const,
   list: (params: PaginationParams) => [...packageKeys.lists(), params] as const,
+  details: () => [...packageKeys.all, 'detail'] as const,
+  detail: (id: string) => [...packageKeys.details(), id] as const,
 };