feat(custom-fields) : display context custom fields in ComponentItem

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/app/components/ComponentItem.vue

@@ -203,6 +203,19 @@
         @field-blur="updateComponentCustomField"
       />
 
+        <!-- Context custom fields (machine-specific) -->
+        <div v-if="mergedContextFields.length" class="mt-4">
+          <h4 class="text-xs font-semibold text-base-content/70 mb-2">
+            Champs contextuels
+          </h4>
+          <CustomFieldDisplay
+            :fields="mergedContextFields"
+            :is-edit-mode="isEditMode"
+            :columns="2"
+            @field-blur="updateContextCustomField"
+          />
+        </div>
+
       <!-- Documents -->
       <div class="space-y-2">
         <div class="flex items-center justify-between">
@@ -319,6 +332,9 @@ import {
 import { useEntityDocuments } from '~/composables/useEntityDocuments'
 import { useEntityProductDisplay } from '~/composables/useEntityProductDisplay'
 import { useEntityCustomFields } from '~/composables/useEntityCustomFields'
+import { mergeFieldDefinitionsWithValues, dedupeMergedFields } from '~/shared/utils/entityCustomFieldLogic'
+import { useCustomFields } from '~/composables/useCustomFields'
+import { useToast } from '~/composables/useToast'
 
 const props = defineProps({
   component: { type: Object, required: true },
@@ -358,6 +374,40 @@ const {
   updateCustomField: updateComponentCustomField,
 } = useEntityCustomFields({ entity: () => props.component, entityType: 'composant' })
 
+const { upsertCustomFieldValue } = useCustomFields()
+const { showSuccess, showError } = useToast()
+
+const mergedContextFields = computed(() => {
+  const definitions = props.component?.contextCustomFields ?? []
+  const values = props.component?.contextCustomFieldValues ?? []
+  if (!definitions.length && !values.length) return []
+  return dedupeMergedFields(
+    mergeFieldDefinitionsWithValues(definitions, values),
+  )
+})
+
+const updateContextCustomField = async (field) => {
+  const linkId = props.component?.linkId
+  if (!linkId || !field) return
+
+  const customFieldId = field.customFieldId || field.customField?.id
+  if (!customFieldId) return
+
+  const result = await upsertCustomFieldValue(
+    customFieldId,
+    'machineComponentLink',
+    linkId,
+    field.value ?? '',
+  )
+
+  if (result.success) {
+    showSuccess(`Champ contextuel "${field.name || field.customField?.name}" mis à jour`)
+  }
+  else {
+    showError(`Erreur lors de la mise à jour du champ contextuel`)
+  }
+}
+
 // --- Document edit modal ---
 const editingDocument = ref(null)
 const editModalVisible = ref(false)