refactor(frontend) : extract StructureSkeletonPreview shared component

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/pages/component/[id]/edit.vue

@@ -138,91 +138,17 @@
           </div>
         </div>
 
-        <div v-if="selectedType" class="space-y-3 rounded-lg border border-base-200 bg-base-200/40 p-4">
-          <div class="flex items-center justify-between gap-4">
-            <div>
-              <h2 class="font-semibold text-base-content">Squelette sélectionné</h2>
-              <p class="text-xs text-base-content/70">
-                {{ selectedType.description || 'Ce squelette définit la structure et les contraintes du composant.' }}
-              </p>
-            </div>
-            <span class="badge badge-outline">{{ formatStructurePreview(selectedTypeStructure) }}</span>
-          </div>
-
-          <details v-if="selectedTypeStructure" class="collapse collapse-arrow bg-base-100">
-            <summary class="collapse-title text-sm font-medium">
-              Consulter le détail du squelette
-            </summary>
-            <div class="collapse-content space-y-4 text-sm text-base-content/80">
-              <div v-if="getStructureCustomFields(selectedTypeStructure).length" class="space-y-2">
-                <h3 class="font-semibold text-sm text-base-content">Champs personnalisés</h3>
-                <ul class="space-y-2">
-                  <li
-                    v-for="field in getStructureCustomFields(selectedTypeStructure)"
-                    :key="field.customFieldId || field.id || field.name"
-                    class="rounded bg-base-200/60 px-3 py-2"
-                  >
-                    <p class="font-medium text-sm text-base-content">
-                      {{ field.name || field.key }}
-                    </p>
-                    <p class="text-xs text-base-content/70 mt-1">
-                      Type : {{ field.type || 'text' }}<span v-if="field.required"> • Obligatoire</span>
-                      <span v-if="Array.isArray(field.options) && field.options.length">
-                        • Options : {{ field.options.join(', ') }}
-                      </span>
-                      <span v-if="field.defaultValue">
-                        • Défaut : {{ field.defaultValue }}
-                      </span>
-                    </p>
-                  </li>
-                </ul>
-              </div>
-
-              <div v-if="getStructurePieces(selectedTypeStructure).length" class="space-y-2">
-                <h3 class="font-semibold text-sm text-base-content">Pièces imposées</h3>
-                <ul class="list-disc list-inside space-y-1">
-                  <li
-                    v-for="(piece, index) in getStructurePieces(selectedTypeStructure)"
-                    :key="piece.role || piece.typePieceId || piece.familyCode || index"
-                  >
-                    {{ resolvePieceLabel(piece) }}
-                  </li>
-                </ul>
-              </div>
-
-              <div v-if="getStructureProducts(selectedTypeStructure).length" class="space-y-2">
-                <h3 class="font-semibold text-sm text-base-content">Produits imposés</h3>
-                <ul class="list-disc list-inside space-y-1">
-                  <li
-                    v-for="(product, index) in getStructureProducts(selectedTypeStructure)"
-                    :key="product.role || product.typeProductId || product.familyCode || index"
-                  >
-                    {{ resolveProductLabel(product) }}
-                  </li>
-                </ul>
-              </div>
-
-              <div v-if="getStructureSubcomponents(selectedTypeStructure).length" class="space-y-2">
-                <h3 class="font-semibold text-sm text-base-content">Sous-composants</h3>
-                <ul class="list-disc list-inside space-y-1">
-                  <li
-                    v-for="(subcomponent, index) in getStructureSubcomponents(selectedTypeStructure)"
-                    :key="subcomponent.alias || subcomponent.typeComposantId || subcomponent.familyCode || index"
-                  >
-                    {{ resolveSubcomponentLabel(subcomponent) }}
-                  </li>
-                </ul>
-              </div>
-
-              <p
-                v-if="!getStructureCustomFields(selectedTypeStructure).length && !getStructurePieces(selectedTypeStructure).length && !getStructureProducts(selectedTypeStructure).length && !getStructureSubcomponents(selectedTypeStructure).length"
-                class="text-xs text-gray-500"
-              >
-                Ce squelette ne définit pas encore de pièces, sous-composants ou valeurs par défaut.
-              </p>
-            </div>
-          </details>
-        </div>
+        <StructureSkeletonPreview
+          v-if="selectedType"
+          :structure="selectedTypeStructure"
+          :description="selectedType.description || 'Ce squelette définit la structure et les contraintes du composant.'"
+          :preview-badge="formatStructurePreview(selectedTypeStructure)"
+          variant="component"
+          show-empty-state
+          :resolve-piece-label="resolvePieceLabel"
+          :resolve-product-label="resolveProductLabel"
+          :resolve-subcomponent-label="resolveSubcomponentLabel"
+        />
 
         <div
           v-if="structureSelections.hasAny"
@@ -368,10 +294,8 @@ import { useComponentHistory } from '~/composables/useComponentHistory'
 import { formatStructurePreview, normalizeStructureForEditor } from '~/shared/modelUtils'
 import { uniqueConstructeurIds } from '~/shared/constructeurUtils'
 import {
-  getStructureCustomFields,
   getStructurePieces,
   getStructureProducts,
-  getStructureSubcomponents,
   resolvePieceLabel as _resolvePieceLabel,
   resolveProductLabel as _resolveProductLabel,
   resolveSubcomponentLabel,