From 592beb0fa75bf061de3f49deb9a3e7cd89611e3b Mon Sep 17 00:00:00 2001
From: Matthieu <mtholot19@gmail.com>
Date: Fri, 6 Mar 2026 11:28:07 +0100
Subject: [PATCH] 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  | 40 +++++------
 app/components/StructureNodeEditor.vue        | 70 ++++++++-----------
 .../machine/MachineComponentsCard.vue         | 49 +++++++------
 app/components/machine/MachinePiecesCard.vue  | 49 +++++++------
 .../machine/MachineProductsCard.vue           | 25 ++++---
 5 files changed, 109 insertions(+), 124 deletions(-)

diff --git a/app/components/PieceModelStructureEditor.vue b/app/components/PieceModelStructureEditor.vue
index 18e4f92..5d3b891 100644
--- a/app/components/PieceModelStructureEditor.vue
+++ b/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>
-          <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>
+        <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>
       </header>
 
       <p v-if="!products.length" class="text-xs text-gray-500">
@@ -71,18 +65,16 @@
           </div>
         </li>
       </ul>
+      <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>
     </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">
-          <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-          Ajouter
-        </button>
-      </header>
+      <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>
diff --git a/app/components/StructureNodeEditor.vue b/app/components/StructureNodeEditor.vue
index a9fdaa0..122ef38 100644
--- a/app/components/StructureNodeEditor.vue
+++ b/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>
+          <h4 :class="headingClass">
+            {{ isRoot ? 'Champs personnalisés du composant' : 'Champs personnalisés' }}
+          </h4>
           <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>
+          <button type="button" class="btn btn-outline btn-xs" @click="addCustomField">
+            <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
+            Ajouter
+          </button>
         </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">
-              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-              Ajouter
-            </button>
-          </div>
+          <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>
+          <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>
         </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">
-              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-              Ajouter
-            </button>
-          </div>
+          <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>
+          <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>
         </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"
-            >
-              <IconLucidePlus class="w-3 h-3 mr-2" aria-hidden="true" />
-              Ajouter
-            </button>
-          </div>
+          <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>
diff --git a/app/components/machine/MachineComponentsCard.vue b/app/components/machine/MachineComponentsCard.vue
index eac3053..022901c 100644
--- a/app/components/machine/MachineComponentsCard.vue
+++ b/app/components/machine/MachineComponentsCard.vue
@@ -3,31 +3,21 @@
     <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"
-            @click="$emit('toggle-collapse')"
-            :title="collapsed ? 'Déplier tous les composants' : 'Replier tous les composants'"
-          >
-            <IconLucideChevronRight
-              class="w-5 h-5 transition-transform"
-              :class="collapsed ? 'rotate-0' : 'rotate-90'"
-              aria-hidden="true"
-            />
-            <span class="text-sm">
-              {{ collapsed ? 'Tout déplier' : 'Tout replier' }}
-            </span>
-          </button>
-        </div>
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm gap-2"
+          @click="$emit('toggle-collapse')"
+          :title="collapsed ? 'Déplier tous les composants' : 'Replier tous les composants'"
+        >
+          <IconLucideChevronRight
+            class="w-5 h-5 transition-transform"
+            :class="collapsed ? 'rotate-0' : 'rotate-90'"
+            aria-hidden="true"
+          />
+          <span class="text-sm">
+            {{ collapsed ? 'Tout déplier' : 'Tout replier' }}
+          </span>
+        </button>
       </div>
 
       <div v-if="components.length === 0" class="text-sm text-gray-500 py-4">
@@ -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>
diff --git a/app/components/machine/MachinePiecesCard.vue b/app/components/machine/MachinePiecesCard.vue
index acc5b60..21e1f8a 100644
--- a/app/components/machine/MachinePiecesCard.vue
+++ b/app/components/machine/MachinePiecesCard.vue
@@ -3,31 +3,21 @@
     <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"
-            @click="$emit('toggle-collapse')"
-            :title="collapsed ? 'Déplier toutes les pièces' : 'Replier toutes les pièces'"
-          >
-            <IconLucideChevronRight
-              class="w-5 h-5 transition-transform"
-              :class="collapsed ? 'rotate-0' : 'rotate-90'"
-              aria-hidden="true"
-            />
-            <span class="text-sm">
-              {{ collapsed ? 'Tout déplier' : 'Tout replier' }}
-            </span>
-          </button>
-        </div>
+        <button
+          type="button"
+          class="btn btn-ghost btn-sm gap-2"
+          @click="$emit('toggle-collapse')"
+          :title="collapsed ? 'Déplier toutes les pièces' : 'Replier toutes les pièces'"
+        >
+          <IconLucideChevronRight
+            class="w-5 h-5 transition-transform"
+            :class="collapsed ? 'rotate-0' : 'rotate-90'"
+            aria-hidden="true"
+          />
+          <span class="text-sm">
+            {{ collapsed ? 'Tout déplier' : 'Tout replier' }}
+          </span>
+        </button>
       </div>
 
       <div v-if="pieces.length === 0" class="text-sm text-gray-500 py-4">
@@ -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>
diff --git a/app/components/machine/MachineProductsCard.vue b/app/components/machine/MachineProductsCard.vue
index 25cabcd..01ab9e5 100644
--- a/app/components/machine/MachineProductsCard.vue
+++ b/app/components/machine/MachineProductsCard.vue
@@ -15,19 +15,9 @@
             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>
+        <span class="badge badge-outline" v-if="products.length">
+          {{ products.length }} produit{{ products.length > 1 ? 's' : '' }}
+        </span>
       </div>
 
       <div v-if="products.length" class="space-y-3">
@@ -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>