From 62a634831d86ef656b2ec7e975b37e25aca0e651 Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Thu, 5 Mar 2026 19:57:46 +0100
Subject: [PATCH] feat: create specialized component for header (#18438)

## Before



https://github.com/user-attachments/assets/afb6ff1d-2489-42b8-80ea-8f6dbc032629



## After


https://github.com/user-attachments/assets/6cf87609-bb0f-4bc2-8273-bce2f226aec2
---
 ...ieldsConfigurationGroupDraggableHeader.tsx | 44 +++++++++++++++++++
 .../FieldsConfigurationGroupEditor.tsx        | 11 ++---
 2 files changed, 48 insertions(+), 7 deletions(-)
 create mode 100644 packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupDraggableHeader.tsx

diff --git a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupDraggableHeader.tsx b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupDraggableHeader.tsx
new file mode 100644
index 0000000000..cc6e5c8bb4
--- /dev/null
+++ b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupDraggableHeader.tsx
@@ -0,0 +1,44 @@
+import { styled } from '@linaria/react';
+import { useContext } from 'react';
+
+import { IconGripVertical, Label } from 'twenty-ui/display';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+
+const StyledContainer = styled.div`
+  align-items: center;
+  cursor: grab;
+  display: flex;
+  gap: ${themeCssVariables.spacing[2]};
+  height: calc(32px - 2 * ${themeCssVariables.spacing[2]});
+  padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[1]};
+`;
+
+const StyledIconContainer = styled.div`
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  padding: ${themeCssVariables.spacing[1]};
+`;
+
+type FieldsConfigurationGroupDraggableHeaderProps = {
+  text: string;
+};
+
+export const FieldsConfigurationGroupDraggableHeader = ({
+  text,
+}: FieldsConfigurationGroupDraggableHeaderProps) => {
+  const { theme } = useContext(ThemeContext);
+
+  return (
+    <StyledContainer>
+      <StyledIconContainer>
+        <IconGripVertical
+          size={theme.icon.size.md}
+          stroke={theme.icon.stroke.sm}
+          color={themeCssVariables.font.color.tertiary}
+        />
+      </StyledIconContainer>
+      <Label>{text}</Label>
+    </StyledContainer>
+  );
+};
diff --git a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupEditor.tsx b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupEditor.tsx
index 7e817bf32a..bca1a996f6 100644
--- a/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupEditor.tsx
+++ b/packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupEditor.tsx
@@ -16,7 +16,9 @@ import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/Gene
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
 import { IconNewSection } from 'twenty-ui/display';
-import { MenuItem, MenuItemDraggable } from 'twenty-ui/navigation';
+import { MenuItem } from 'twenty-ui/navigation';
+
+import { FieldsConfigurationGroupDraggableHeader } from '@/page-layout/widgets/fields/components/FieldsConfigurationGroupDraggableHeader';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
 
 const StyledFieldsDroppable = styled.div`
@@ -144,12 +146,7 @@ export const FieldsConfigurationGroupEditor = ({
           clickableComponentWidth="100%"
           clickableComponent={
             <StyledMenuItemDraggableWrapper>
-              <MenuItemDraggable
-                text={group.name}
-                gripMode="always"
-                isIconDisplayedOnHoverOnly={false}
-                withIconContainer
-              />
+              <FieldsConfigurationGroupDraggableHeader text={group.name} />
             </StyledMenuItemDraggableWrapper>
           }
           disableClickForClickableComponent