Add new dropdown search

app/pages/component/create.vue

@@ -19,21 +19,17 @@
             <label class="label">
               <span class="label-text">Catégorie de composant</span>
             </label>
-            <select
+            <SearchSelect
               v-model="selectedTypeId"
-              class="select select-bordered select-sm md:select-md"
+              :options="componentTypeList"
+              :loading="loadingTypes"
+              size="sm"
+              placeholder="Rechercher une catégorie..."
+              empty-text="Aucune catégorie disponible"
+              :option-label="typeOptionLabel"
+              :option-description="typeOptionDescription"
               :disabled="loadingTypes || submitting"
-              required
-            >
-              <option value="">Sélectionner une catégorie</option>
-              <option
-                v-for="type in componentTypeList"
-                :key="type.id"
-                :value="type.id"
-              >
-                {{ type.name }}
-              </option>
-            </select>
+            />
             <p v-if="loadingTypes" class="text-xs text-gray-500 mt-1">
               Chargement des catégories…
             </p>
@@ -189,6 +185,8 @@
             :assignment="structureAssignments"
             :pieces="availablePieces"
             :components="availableComponents"
+            :pieces-loading="piecesLoading"
+            :components-loading="componentsLoading"
           />
           <p v-else class="text-xs text-error">
             Impossible de générer les emplacements définis par le squelette.
@@ -297,6 +295,7 @@ import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
 import ComponentStructureAssignmentNode, {
   type StructureAssignmentNode,
 } from '~/components/ComponentStructureAssignmentNode.vue'
+import SearchSelect from '~/components/common/SearchSelect.vue'
 import { useComponentTypes } from '~/composables/useComponentTypes'
 import { useComposants } from '~/composables/useComposants'
 import { usePieces } from '~/composables/usePieces'
@@ -381,6 +380,12 @@ const componentTypeList = computed<ComponentCatalogType[]>(() =>
     .filter((item: any) => item?.category === 'COMPONENT') as ComponentCatalogType[],
 )
 
+const typeOptionLabel = (type?: ComponentCatalogType) =>
+  type?.name || 'Catégorie'
+
+const typeOptionDescription = (type?: ComponentCatalogType) =>
+  type?.description ? String(type.description) : ''
+
 const selectedType = computed(() => {
   if (!selectedTypeId.value) {
     return null