fix(ui) : move add buttons below last element in structure editors

Place "Ajouter" buttons after the items list instead of in the section
header, so they always appear below the last added element.

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

app/components/PieceModelStructureEditor.vue

@@ -1,19 +1,13 @@
 <template>
   <div class="space-y-6">
     <section class="space-y-3">
-      <header class="flex items-center justify-between">
-        <div>
+      <header>
         <h3 class="text-sm font-semibold">
           Produits inclus par défaut
         </h3>
         <p class="text-xs text-base-content/70">
           Ces produits s'afficheront lors de la création d'une pièce basée sur cette catégorie.
         </p>
-        </div>
-        <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addProduct">
-          <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-          Ajouter
-        </button>
       </header>
 
       <p v-if="!products.length" class="text-xs text-gray-500">
@@ -71,18 +65,16 @@
           </div>
         </li>
       </ul>
-    </section>
-
-    <section class="space-y-3">
-      <header class="flex items-center justify-between">
-        <h3 class="text-sm font-semibold">
-          Champs personnalisés
-        </h3>
-        <button type="button" class="btn btn-outline btn-xs" @click="addField">
+      <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addProduct">
         <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
         Ajouter
       </button>
-      </header>
+    </section>
+
+    <section class="space-y-3">
+      <h3 class="text-sm font-semibold">
+        Champs personnalisés
+      </h3>
 
       <p v-if="!fields.length" class="text-xs text-gray-500">
         Aucun champ personnalisé n'a encore été défini.
@@ -172,6 +164,10 @@
         </div>
       </li>
     </ul>
+      <button type="button" class="btn btn-outline btn-xs" @click="addField">
+        <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+        Ajouter
+      </button>
     </section>
   </div>
 </template>

app/components/StructureNodeEditor.vue

@@ -70,15 +70,9 @@
 
       <div class="px-4 py-4 space-y-5">
         <section v-if="isRoot" class="space-y-3">
-          <div class="flex items-center justify-between gap-2">
           <h4 :class="headingClass">
             {{ isRoot ? 'Champs personnalisés du composant' : 'Champs personnalisés' }}
           </h4>
-            <button type="button" class="btn btn-outline btn-xs" @click="addCustomField">
-              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-              Ajouter
-            </button>
-          </div>
           <p v-if="!(node.customFields?.length)" class="text-xs text-gray-500">
             Aucun champ n'a encore été défini.
           </p>
@@ -155,18 +149,16 @@
               </div>
             </div>
           </div>
-        </section>
-
-        <section v-if="isRoot" class="space-y-3">
-          <div class="flex items-center justify-between gap-2">
-            <h4 :class="headingClass">
-              {{ isRoot ? 'Produits inclus par défaut' : 'Produits' }}
-            </h4>
-            <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addProduct">
+          <button type="button" class="btn btn-outline btn-xs" @click="addCustomField">
             <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
             Ajouter
           </button>
-          </div>
+        </section>
+
+        <section v-if="isRoot" class="space-y-3">
+          <h4 :class="headingClass">
+            {{ isRoot ? 'Produits inclus par défaut' : 'Produits' }}
+          </h4>
           <p v-if="!(node.products?.length)" class="text-xs text-gray-500">
             Aucun produit défini.
           </p>
@@ -228,18 +220,16 @@
               </div>
             </div>
           </div>
-        </section>
-
-        <section v-if="isRoot" class="space-y-3">
-          <div class="flex items-center justify-between gap-2">
-            <h4 :class="headingClass">
-              {{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }}
-            </h4>
-            <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addPiece">
+          <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addProduct">
             <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
             Ajouter
           </button>
-          </div>
+        </section>
+
+        <section v-if="isRoot" class="space-y-3">
+          <h4 :class="headingClass">
+            {{ isRoot ? 'Pièces incluses par défaut' : 'Pièces' }}
+          </h4>
           <p v-if="!(node.pieces?.length)" class="text-xs text-gray-500">
             Aucune pièce définie.
           </p>
@@ -302,21 +292,14 @@
               </div>
             </div>
           </div>
-        </section>
-
-        <section v-if="canManageSubcomponents || hasSubcomponents" class="space-y-3">
-          <div class="flex items-center justify-between gap-2">
-            <h4 :class="headingClass">Sous-composants</h4>
-            <button
-              v-if="canManageSubcomponents && !restrictedMode"
-              type="button"
-              class="btn btn-outline btn-xs"
-              @click="addSubComponent"
-            >
+          <button v-if="!restrictedMode" type="button" class="btn btn-outline btn-xs" @click="addPiece">
             <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
             Ajouter
           </button>
-          </div>
+        </section>
+
+        <section v-if="canManageSubcomponents || hasSubcomponents" class="space-y-3">
+          <h4 :class="headingClass">Sous-composants</h4>
           <p v-if="!isRoot && canManageSubcomponents" class="text-[11px] text-gray-500">
             Sélectionnez uniquement la famille de ce sous-composant ; il sera configuré via son propre modèle.
           </p>
@@ -357,6 +340,15 @@
               />
             </div>
           </div>
+          <button
+            v-if="canManageSubcomponents && !restrictedMode"
+            type="button"
+            class="btn btn-outline btn-xs"
+            @click="addSubComponent"
+          >
+            <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+            Ajouter
+          </button>
         </section>
       </div>
     </div>

app/components/machine/MachineComponentsCard.vue

@@ -3,15 +3,6 @@
     <div class="card-body">
       <div class="flex justify-between items-center mb-4">
         <h2 class="card-title">Composants</h2>
-        <div class="flex items-center gap-2">
-          <button
-            v-if="isEditMode"
-            type="button"
-            class="btn btn-sm md:btn-md btn-primary"
-            @click="$emit('add-component')"
-          >
-            Ajouter un composant
-          </button>
         <button
           type="button"
           class="btn btn-ghost btn-sm gap-2"
@@ -28,7 +19,6 @@
           </span>
         </button>
       </div>
-      </div>
 
       <div v-if="components.length === 0" class="text-sm text-gray-500 py-4">
         Aucun composant associé à cette machine.
@@ -54,6 +44,15 @@
           />
         </div>
       </div>
+
+      <button
+        v-if="isEditMode"
+        type="button"
+        class="btn btn-sm md:btn-md btn-primary"
+        @click="$emit('add-component')"
+      >
+        Ajouter un composant
+      </button>
     </div>
   </div>
 </template>

app/components/machine/MachinePiecesCard.vue

@@ -3,15 +3,6 @@
     <div class="card-body">
       <div class="flex justify-between items-center mb-4">
         <h2 class="card-title">Pièces de la machine</h2>
-        <div class="flex items-center gap-2">
-          <button
-            v-if="isEditMode"
-            type="button"
-            class="btn btn-sm md:btn-md btn-primary"
-            @click="$emit('add-piece')"
-          >
-            Ajouter une pièce
-          </button>
         <button
           type="button"
           class="btn btn-ghost btn-sm gap-2"
@@ -28,7 +19,6 @@
           </span>
         </button>
       </div>
-      </div>
 
       <div v-if="pieces.length === 0" class="text-sm text-gray-500 py-4">
         Aucune pièce associée à cette machine.
@@ -54,6 +44,15 @@
           />
         </div>
       </div>
+
+      <button
+        v-if="isEditMode"
+        type="button"
+        class="btn btn-sm md:btn-md btn-primary"
+        @click="$emit('add-piece')"
+      >
+        Ajouter une pièce
+      </button>
     </div>
   </div>
 </template>

app/components/machine/MachineProductsCard.vue

@@ -15,20 +15,10 @@
             Produits sélectionnés directement pour cette machine.
           </p>
         </div>
-        <div class="flex items-center gap-2">
-          <button
-            v-if="isEditMode"
-            type="button"
-            class="btn btn-sm md:btn-md btn-primary"
-            @click="$emit('add-product')"
-          >
-            Ajouter un produit
-          </button>
         <span class="badge badge-outline" v-if="products.length">
           {{ products.length }} produit{{ products.length > 1 ? 's' : '' }}
         </span>
       </div>
-      </div>
 
       <div v-if="products.length" class="space-y-3">
         <div
@@ -117,6 +107,15 @@
       <p v-else class="text-xs text-gray-500">
         Aucun produit n'a été associé directement à cette machine.
       </p>
+
+      <button
+        v-if="isEditMode"
+        type="button"
+        class="btn btn-sm md:btn-md btn-primary"
+        @click="$emit('add-product')"
+      >
+        Ajouter un produit
+      </button>
     </div>
   </div>
 </template>