feat(machine) : add custom field definition editor on machine detail page

Adds UI to create, edit, reorder and delete custom field definitions
directly from the machine detail page in edit mode.

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

app/components/machine/MachineInfoCard.vue

@@ -151,18 +151,36 @@
           </div>
         </div>
       </div>
+
+      <div v-if="isEditMode" class="mt-6 pt-4 border-t border-base-200">
+        <MachineCustomFieldDefEditor
+          :fields="fieldDefs.fields.value"
+          :saving="fieldDefs.saving.value"
+          :reorder-class="fieldDefs.reorderClass"
+          :on-drag-start="fieldDefs.onDragStart"
+          :on-drag-enter="fieldDefs.onDragEnter"
+          :on-drop="fieldDefs.onDrop"
+          :on-drag-end="fieldDefs.onDragEnd"
+          @save="fieldDefs.saveDefinitions()"
+          @add-field="fieldDefs.addField()"
+          @remove-field="fieldDefs.removeField($event)"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { watch } from 'vue'
 import ConstructeurSelect from '~/components/ConstructeurSelect.vue'
+import MachineCustomFieldDefEditor from '~/components/machine/MachineCustomFieldDefEditor.vue'
 import {
   formatConstructeurContact as formatConstructeurContactSummary,
 } from '~/shared/constructeurUtils'
 import { formatCustomFieldValue } from '~/shared/utils/customFieldUtils'
+import { useMachineCustomFieldDefs } from '~/composables/useMachineCustomFieldDefs'
 
-defineProps<{
+const props = defineProps<{
   isEditMode: boolean
   machineName: string
   machineReference: string
@@ -171,14 +189,27 @@ defineProps<{
   hasMachineConstructeur: boolean
   visibleCustomFields: any[]
   getMachineFieldId: (fieldName: string) => string
+  machineId: string
+  machineCustomFieldDefs: any[]
 }>()
 
-defineEmits<{
+const emit = defineEmits<{
   'update:machine-name': [value: string]
   'update:machine-reference': [value: string]
   'update:constructeur-ids': [ids: unknown]
   'blur-field': []
   'set-custom-field-value': [field: any, value: unknown]
   'update-custom-field': [field: any]
+  'custom-fields-saved': []
 }>()
+
+const fieldDefs = useMachineCustomFieldDefs({
+  machineId: props.machineId,
+  initialDefs: props.machineCustomFieldDefs,
+  onSaved: () => emit('custom-fields-saved'),
+})
+
+watch(() => props.machineCustomFieldDefs, (newDefs) => {
+  fieldDefs.reinit(newDefs)
+}, { deep: true })
 </script>