Add field widget (#16609)

- Ability to display the details of a field
- The field can be edited (relations edition will be supported later)
- For now, the widget configuration stores the name of the field instead
of its fieldMetadataId. A hook resolves the fieldMetadataId from the
list of fields and the provided name. This will be replaced once we
migrate the configuration to the backend.

## Demo


https://github.com/user-attachments/assets/ab7efbda-66b2-46c1-b641-c350977c31dd

## Remaining to do

- Edition of relations

packages/twenty-front/src/modules/page-layout/hooks/useResolveFieldMetadataIdFromNameOrId.ts

@@ -0,0 +1,31 @@
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
+import { useMemo } from 'react';
+
+export const useResolveFieldMetadataIdFromNameOrId = (
+  fieldMetadataIdOrName: string,
+): string | undefined => {
+  const targetRecord = useTargetRecord();
+
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular: targetRecord.targetObjectNameSingular,
+  });
+
+  return useMemo(() => {
+    // Try to find field by name first
+    const fieldByName = objectMetadataItem.fields.find(
+      (field) => field.name === fieldMetadataIdOrName,
+    );
+
+    if (fieldByName !== undefined) {
+      return fieldByName.id;
+    }
+
+    // If not found by name, check if it's already an ID
+    const fieldById = objectMetadataItem.fields.find(
+      (field) => field.id === fieldMetadataIdOrName,
+    );
+
+    return fieldById?.id;
+  }, [objectMetadataItem.fields, fieldMetadataIdOrName]);
+};