Improve Form Layout + add drag and drop (#11901)

https://github.com/user-attachments/assets/cf542921-9354-4f7b-b6e8-061ebcaa9a9b

Closes https://github.com/twentyhq/core-team-issues/issues/887
Closes https://github.com/twentyhq/core-team-issues/issues/889
Closes https://github.com/twentyhq/core-team-issues/issues/890

packages/twenty-front/src/modules/ui/layout/draggable-list/components/DraggableItem.tsx

@@ -1,12 +1,17 @@
 import { useTheme } from '@emotion/react';
 import { Draggable } from '@hello-pangea/dnd';
+import { isFunction } from '@sniptt/guards';
 
 type DraggableItemProps = {
   draggableId: string;
   isDragDisabled?: boolean;
   index: number;
-  itemComponent: JSX.Element;
+  itemComponent:
+    | JSX.Element
+    | ((props: { isDragging: boolean }) => JSX.Element);
   isInsideScrollableContainer?: boolean;
+  draggableComponentStyles?: React.CSSProperties;
+  disableDraggingBackground?: boolean;
 };
 
 export const DraggableItem = ({
@@ -15,8 +20,11 @@ export const DraggableItem = ({
   index,
   itemComponent,
   isInsideScrollableContainer,
+  draggableComponentStyles,
+  disableDraggingBackground,
 }: DraggableItemProps) => {
   const theme = useTheme();
+
   return (
     <Draggable
       key={draggableId}
@@ -26,7 +34,8 @@ export const DraggableItem = ({
     >
       {(draggableProvided, draggableSnapshot) => {
         const draggableStyle = draggableProvided.draggableProps.style;
-        const isDragged = draggableSnapshot.isDragging;
+        const isDragging = draggableSnapshot.isDragging;
+
         return (
           <div
             ref={draggableProvided.innerRef}
@@ -35,6 +44,7 @@ export const DraggableItem = ({
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...draggableProvided.dragHandleProps}
             style={{
+              ...draggableComponentStyles,
               ...draggableStyle,
               left: 'auto',
               ...(isInsideScrollableContainer ? {} : { top: 'auto' }),
@@ -42,12 +52,17 @@ export const DraggableItem = ({
                 /\(-?\d+px,/,
                 '(0,',
               ),
-              background: isDragged
-                ? theme.background.transparent.light
-                : 'none',
+              background:
+                !disableDraggingBackground && isDragging
+                  ? theme.background.transparent.light
+                  : 'none',
             }}
           >
-            {itemComponent}
+            {isFunction(itemComponent)
+              ? itemComponent({
+                  isDragging,
+                })
+              : itemComponent}
           </div>
         );
       }}