feat: create specialized component for header

[Devessier]

Before

CleanShot.2026-03-05.at.18.41.53.mp4

After

CleanShot.2026-03-05.at.18.41.17.mp4

[cubic-dev-ai]

No issues found across 2 files

[greptile-apps]

Greptile Summary

This PR extracts the draggable group header rendering into a dedicated FieldsConfigurationGroupDraggableHeader component, replacing a generic MenuItemDraggable usage in FieldsConfigurationGroupEditor. The change gives the header a custom look (grip icon + label with explicit sizing) matching the new design shown in the PR videos.

• New component FieldsConfigurationGroupDraggableHeader correctly uses ThemeContext for icon sizing and themeCssVariables for Linaria styles, consistent with the rest of the codebase.
• The MenuItemDraggable import is cleanly removed from FieldsConfigurationGroupEditor since it is no longer needed.
• One style issue: the new @/page-layout import in FieldsConfigurationGroupEditor.tsx is inserted between two twenty-ui package imports rather than being grouped with the other internal @/ imports earlier in the file.

Confidence Score: 5/5

• This PR is safe to merge; it is a focused visual refactor with no logic changes.
• The change is small and well-scoped: one new presentational component and one call-site update. No state, side-effects, or data-flow logic is altered. The only issue found is a minor import ordering inconsistency.
• No files require special attention.

Important Files Changed

Filename	Overview
packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupDraggableHeader.tsx	New specialized component replacing MenuItemDraggable for rendering the draggable group header; straightforward composition of IconGripVertical and Label with Linaria styles.
packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupEditor.tsx	Swaps MenuItemDraggable for the new FieldsConfigurationGroupDraggableHeader; otherwise unchanged. Minor import ordering issue: the new @/ import is placed between two twenty-ui package imports rather than with the other internal @/ imports.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[FieldsConfigurationGroupEditor] -->|renders header via| B[FieldsConfigurationGroupDraggableHeader]
    B --> C[StyledContainer\ncursor: grab]
    C --> D[StyledIconContainer]
    C --> E[Label - group.name]
    D --> F[IconGripVertical\nsize/stroke from ThemeContext]

    A -->|drag handle props spread onto| G[StyledGroupHeaderRow]
    G --> A2[Dropdown - rename trigger]
    G --> H[FieldsConfigurationGroupDropdown\nrename / delete actions]

Loading

_{Last reviewed commit: a39b886}

[greptile-apps]

Misplaced import breaks import grouping

The new FieldsConfigurationGroupDraggableHeader import (an internal @/ alias) is sandwiched between two twenty-ui package imports. The established convention in this file groups @/ internal imports first (lines 5–17) and then twenty-ui imports last (lines 18–22). The new import should be placed with the other @/page-layout imports:

Suggested change

	import { MenuItem } from 'twenty-ui/navigation';
	import { FieldsConfigurationGroupDraggableHeader } from '@/page-layout/widgets/fields/components/FieldsConfigurationGroupDraggableHeader';
	import { themeCssVariables } from 'twenty-ui/theme-constants';
	import { IconNewSection } from 'twenty-ui/display';
	import { MenuItem } from 'twenty-ui/navigation';
	import { themeCssVariables } from 'twenty-ui/theme-constants';
	import { FieldsConfigurationGroupDraggableHeader } from '@/page-layout/widgets/fields/components/FieldsConfigurationGroupDraggableHeader';

Or, alternatively, move it before the twenty-ui block alongside the other @/page-layout imports.

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

[Weiko]

LGTM

[Copilot]

Pull request overview

This PR introduces a specialized draggable header component for field configuration groups, replacing an inline MenuItemDraggable usage to customize the header layout/appearance.

Changes:

• Replaced MenuItemDraggable with a new dedicated header component in the group editor
• Added FieldsConfigurationGroupDraggableHeader component rendering a grip icon + label with custom styling

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupEditor.tsx	Swaps the previous draggable menu item header for the new specialized header component
packages/twenty-front/src/modules/page-layout/widgets/fields/components/FieldsConfigurationGroupDraggableHeader.tsx	Adds the new custom draggable header UI (icon + text) and styling

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

[Copilot]

The new header is a plain div with visual “grab” affordance but no keyboard/focus semantics. If this element is intended to be the drag handle / interactive header, it should be focusable and expose appropriate semantics (e.g., role="button" and tabIndex={0} or use a <button>), plus an accessible name (e.g., aria-label that includes text) and visible focus styling.

[Copilot]

The new header is a plain div with visual “grab” affordance but no keyboard/focus semantics. If this element is intended to be the drag handle / interactive header, it should be focusable and expose appropriate semantics (e.g., role="button" and tabIndex={0} or use a <button>), plus an accessible name (e.g., aria-label that includes text) and visible focus styling.

[Copilot]

32px is a hard-coded magic number that may drift from the actual menu/header height if the design system changes. Consider deriving this from an existing theme/token (or sharing a constant with the menu item height) so the header stays consistent across theme updates.

Suggested change

height: calc(32px - 2 * ${themeCssVariables.spacing[2]});

[twenty-eng-sync]

Hey @Devessier! After you've done the QA of your Pull Request, you can mark it as done here. Thank you!