refactor

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/dashboard/components/CancelDashboardSingleRecordCommand.tsx

@@ -1,7 +1,7 @@
 import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
 import { useMountedEngineCommandContext } from '@/command-menu-item/engine-command/hooks/useMountedEngineCommandContext';
-import { useResetDraftPageLayoutToPersistedPageLayout } from '@/page-layout/hooks/useResetDraftPageLayoutToPersistedPageLayout';
-import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useResetDraftPageLayoutToPersistedPageLayout } from '@/page-layout/hooks/edit/useResetDraftPageLayoutToPersistedPageLayout';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/edit/useSetIsPageLayoutInEditMode';
 import { getTabListInstanceIdFromPageLayoutAndRecord } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutAndRecord';
 import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { isDefined } from 'twenty-shared/utils';

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/dashboard/components/EditDashboardSingleRecordCommand.tsx

@@ -1,6 +1,6 @@
 import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
 import { useMountedEngineCommandContext } from '@/command-menu-item/engine-command/hooks/useMountedEngineCommandContext';
-import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/edit/useSetIsPageLayoutInEditMode';
 import { isDefined } from 'twenty-shared/utils';
 import { useResetLocationHash } from 'twenty-ui/utilities';
 

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/dashboard/components/SaveDashboardSingleRecordCommand.tsx

@@ -1,7 +1,7 @@
 import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
 import { useMountedEngineCommandContext } from '@/command-menu-item/engine-command/hooks/useMountedEngineCommandContext';
-import { useSavePageLayout } from '@/page-layout/hooks/useSavePageLayout';
-import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useSavePageLayout } from '@/page-layout/hooks/edit/useSavePageLayout';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/edit/useSetIsPageLayoutInEditMode';
 import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { isDefined } from 'twenty-shared/utils';
 

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/record-page-layout/components/CancelRecordPageLayoutSingleRecordCommand.tsx

@@ -1,9 +1,9 @@
 import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
 import { useMountedEngineCommandContext } from '@/command-menu-item/engine-command/hooks/useMountedEngineCommandContext';
 import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
-import { useRecordPageLayoutIdFromRecordStoreOrThrow } from '@/page-layout/hooks/useRecordPageLayoutIdFromRecordStoreOrThrow';
-import { useResetDraftPageLayoutToPersistedPageLayout } from '@/page-layout/hooks/useResetDraftPageLayoutToPersistedPageLayout';
-import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useRecordPageLayoutIdFromRecordStoreOrThrow } from '@/page-layout/hooks/common/useRecordPageLayoutIdFromRecordStoreOrThrow';
+import { useResetDraftPageLayoutToPersistedPageLayout } from '@/page-layout/hooks/edit/useResetDraftPageLayoutToPersistedPageLayout';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/edit/useSetIsPageLayoutInEditMode';
 import { getTabListInstanceIdFromPageLayoutAndRecord } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutAndRecord';
 import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { isDefined } from 'twenty-shared/utils';

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/record-page-layout/components/EditRecordPageLayoutSingleRecordCommand.tsx

@@ -1,7 +1,7 @@
 import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
 import { useMountedEngineCommandContext } from '@/command-menu-item/engine-command/hooks/useMountedEngineCommandContext';
-import { useRecordPageLayoutIdFromRecordStoreOrThrow } from '@/page-layout/hooks/useRecordPageLayoutIdFromRecordStoreOrThrow';
-import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useRecordPageLayoutIdFromRecordStoreOrThrow } from '@/page-layout/hooks/common/useRecordPageLayoutIdFromRecordStoreOrThrow';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/edit/useSetIsPageLayoutInEditMode';
 import { isDefined } from 'twenty-shared/utils';
 import { useResetLocationHash } from 'twenty-ui/utilities';
 

packages/twenty-front/src/modules/command-menu-item/engine-command/record/single-record/record-page-layout/components/SaveRecordPageLayoutSingleRecordCommand.tsx

@@ -1,9 +1,9 @@
 import { HeadlessEngineCommandWrapperEffect } from '@/command-menu-item/engine-command/components/HeadlessEngineCommandWrapperEffect';
 import { useMountedEngineCommandContext } from '@/command-menu-item/engine-command/hooks/useMountedEngineCommandContext';
-import { useRecordPageLayoutIdFromRecordStoreOrThrow } from '@/page-layout/hooks/useRecordPageLayoutIdFromRecordStoreOrThrow';
-import { useSaveFieldsWidgetGroups } from '@/page-layout/hooks/useSaveFieldsWidgetGroups';
-import { useSavePageLayout } from '@/page-layout/hooks/useSavePageLayout';
-import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useRecordPageLayoutIdFromRecordStoreOrThrow } from '@/page-layout/hooks/common/useRecordPageLayoutIdFromRecordStoreOrThrow';
+import { useSaveFieldsWidgetGroups } from '@/page-layout/hooks/edit/useSaveFieldsWidgetGroups';
+import { useSavePageLayout } from '@/page-layout/hooks/edit/useSavePageLayout';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/edit/useSetIsPageLayoutInEditMode';
 import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { isDefined } from 'twenty-shared/utils';
 

packages/twenty-front/src/modules/command-menu-item/record/single-record/dashboard/components/CancelDashboardSingleRecordCommand.tsx

@@ -1,8 +1,8 @@
 import { Command } from '@/command-menu-item/display/components/Command';
 import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
-import { useResetDraftPageLayoutToPersistedPageLayout } from '@/page-layout/hooks/useResetDraftPageLayoutToPersistedPageLayout';
-import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useResetDraftPageLayoutToPersistedPageLayout } from '@/page-layout/hooks/edit/useResetDraftPageLayoutToPersistedPageLayout';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/edit/useSetIsPageLayoutInEditMode';
 import { getTabListInstanceIdFromPageLayoutAndRecord } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutAndRecord';
 import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';

packages/twenty-front/src/modules/command-menu-item/record/single-record/dashboard/components/EditDashboardSingleRecordCommand.tsx

@@ -1,7 +1,7 @@
 import { Command } from '@/command-menu-item/display/components/Command';
 import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
-import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/edit/useSetIsPageLayoutInEditMode';
 import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
 import { useResetLocationHash } from 'twenty-ui/utilities';
 

packages/twenty-front/src/modules/command-menu-item/record/single-record/dashboard/components/SaveDashboardSingleRecordCommand.tsx

@@ -2,8 +2,8 @@ import { Command } from '@/command-menu-item/display/components/Command';
 import { useSelectedRecordIdOrThrow } from '@/command-menu-item/record/single-record/hooks/useSelectedRecordIdOrThrow';
 import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
-import { useSavePageLayout } from '@/page-layout/hooks/useSavePageLayout';
-import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useSavePageLayout } from '@/page-layout/hooks/edit/useSavePageLayout';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/edit/useSetIsPageLayoutInEditMode';
 import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
 
 export const SaveDashboardSingleRecordCommand = () => {

packages/twenty-front/src/modules/layout-customization/hooks/useSaveLayoutCustomization.ts

@@ -4,8 +4,8 @@ import { navigationMenuItemsDraftState } from '@/navigation-menu-item/common/sta
 import { navigationMenuItemsSelector } from '@/navigation-menu-item/common/states/navigationMenuItemsSelector';
 import { filterWorkspaceNavigationMenuItems } from '@/navigation-menu-item/common/utils/filterWorkspaceNavigationMenuItems';
 import { useSaveNavigationMenuItemsDraft } from '@/navigation-menu-item/edit/hooks/useSaveNavigationMenuItemsDraft';
-import { useSaveFieldsWidgetGroups } from '@/page-layout/hooks/useSaveFieldsWidgetGroups';
-import { useUpdatePageLayoutWithTabsAndWidgets } from '@/page-layout/hooks/useUpdatePageLayoutWithTabsAndWidgets';
+import { useSaveFieldsWidgetGroups } from '@/page-layout/hooks/edit/useSaveFieldsWidgetGroups';
+import { useUpdatePageLayoutWithTabsAndWidgets } from '@/page-layout/hooks/edit/useUpdatePageLayoutWithTabsAndWidgets';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
 import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';

packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx

@@ -6,7 +6,7 @@ import { RecordShowContainerContextStoreTargetedRecordsEffect } from '@/object-r
 import { RecordShowEffect } from '@/object-record/record-show/components/RecordShowEffect';
 import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
 import { PageLayoutRenderer } from '@/page-layout/components/PageLayoutRenderer';
-import { usePageLayoutIdForRecord } from '@/page-layout/hooks/usePageLayoutIdForRecord';
+import { usePageLayoutIdForRecord } from '@/page-layout/hooks/common/usePageLayoutIdForRecord';
 import { LayoutRenderingProvider } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { type TargetRecordIdentifier } from '@/ui/layout/contexts/TargetRecordIdentifier';
 import { SidePanelFooter } from '@/ui/layout/side-panel/components/SidePanelFooter';

packages/twenty-front/src/modules/page-layout/PageLayoutMainContent.tsx

@@ -1,7 +1,7 @@
 import { PageLayoutContent } from '@/page-layout/components/PageLayoutContent';
 import { PageLayoutContentProvider } from '@/page-layout/contexts/PageLayoutContentContext';
-import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/useCurrentPageLayoutOrThrow';
-import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow';
+import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/common/useCurrentPageLayoutOrThrow';
+import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/display/usePageLayoutTabWithVisibleWidgetsOrThrow';
 import { getTabLayoutMode } from '@/page-layout/utils/getTabLayoutMode';
 
 type PageLayoutMainContentProps = {

packages/twenty-front/src/modules/page-layout/components/DashboardPageLayoutEditModeProvider.tsx

@@ -1,5 +1,5 @@
 import { PageLayoutEditModeProviderContext } from '@/page-layout/contexts/PageLayoutEditModeContext';
-import { useIsDashboardPageLayoutInEditMode } from '@/page-layout/hooks/useIsDashboardPageLayoutInEditMode';
+import { useIsDashboardPageLayoutInEditMode } from '@/page-layout/hooks/common/useIsDashboardPageLayoutInEditMode';
 import { type ReactNode } from 'react';
 
 type DashboardPageLayoutEditModeProviderProps = {

packages/twenty-front/src/modules/page-layout/components/PageLayoutContent.tsx

@@ -3,10 +3,10 @@ import { PageLayoutGridLayout } from '@/page-layout/components/PageLayoutGridLay
 import { PageLayoutVerticalListEditor } from '@/page-layout/components/PageLayoutVerticalListEditor';
 import { PageLayoutVerticalListViewer } from '@/page-layout/components/PageLayoutVerticalListViewer';
 import { usePageLayoutContentContext } from '@/page-layout/contexts/PageLayoutContentContext';
-import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/useCurrentPageLayoutOrThrow';
-import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/useIsPageLayoutInEditMode';
-import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow';
-import { useReorderPageLayoutWidgets } from '@/page-layout/hooks/useReorderPageLayoutWidgets';
+import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/common/useCurrentPageLayoutOrThrow';
+import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/common/useIsPageLayoutInEditMode';
+import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/display/usePageLayoutTabWithVisibleWidgetsOrThrow';
+import { useReorderPageLayoutWidgets } from '@/page-layout/hooks/edit/useReorderPageLayoutWidgets';
 import { RecordPageAddWidgetSection } from '@/page-layout/widgets/components/RecordPageAddWidgetSection';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import {

packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayout.tsx

@@ -11,9 +11,9 @@ import { PAGE_LAYOUT_GRID_ITEM_DRAGGING_Z_INDEX } from '@/page-layout/constants/
 import { PAGE_LAYOUT_GRID_ITEM_Z_INDEX } from '@/page-layout/constants/PageLayoutGridItemZIndex';
 import { PAGE_LAYOUT_GRID_MARGIN } from '@/page-layout/constants/PageLayoutGridMargin';
 import { PAGE_LAYOUT_GRID_ROW_HEIGHT } from '@/page-layout/constants/PageLayoutGridRowHeight';
-import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/useIsPageLayoutInEditMode';
-import { usePageLayoutHandleLayoutChange } from '@/page-layout/hooks/usePageLayoutHandleLayoutChange';
-import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow';
+import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/common/useIsPageLayoutInEditMode';
+import { usePageLayoutHandleLayoutChange } from '@/page-layout/hooks/edit/usePageLayoutHandleLayoutChange';
+import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/display/usePageLayoutTabWithVisibleWidgetsOrThrow';
 import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
 import { pageLayoutCurrentBreakpointComponentState } from '@/page-layout/states/pageLayoutCurrentBreakpointComponentState';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';

packages/twenty-front/src/modules/page-layout/components/PageLayoutGridLayoutDragSelector.tsx

@@ -1,6 +1,6 @@
-import { useChangePageLayoutDragSelection } from '@/page-layout/hooks/useChangePageLayoutDragSelection';
-import { useEndPageLayoutDragSelection } from '@/page-layout/hooks/useEndPageLayoutDragSelection';
-import { useStartPageLayoutDragSelection } from '@/page-layout/hooks/useStartPageLayoutDragSelection';
+import { useChangePageLayoutDragSelection } from '@/page-layout/hooks/edit/useChangePageLayoutDragSelection';
+import { useEndPageLayoutDragSelection } from '@/page-layout/hooks/edit/useEndPageLayoutDragSelection';
+import { useStartPageLayoutDragSelection } from '@/page-layout/hooks/edit/useStartPageLayoutDragSelection';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
 import { type RefObject } from 'react';
 

packages/twenty-front/src/modules/page-layout/components/PageLayoutGridOverlay.tsx

@@ -1,6 +1,6 @@
 import { type PageLayoutBreakpoint } from '@/page-layout/constants/PageLayoutBreakpoints';
 import { PAGE_LAYOUT_GRID_OVERLAY_Z_INDEX } from '@/page-layout/constants/PageLayoutGridOverlayZIndex';
-import { useCreateWidgetFromClick } from '@/page-layout/hooks/useCreateWidgetFromClick';
+import { useCreateWidgetFromClick } from '@/page-layout/hooks/edit/useCreateWidgetFromClick';
 import { pageLayoutCurrentBreakpointComponentState } from '@/page-layout/states/pageLayoutCurrentBreakpointComponentState';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
 import { pageLayoutSelectedCellsComponentState } from '@/page-layout/states/pageLayoutSelectedCellsComponentState';

packages/twenty-front/src/modules/page-layout/components/PageLayoutInitializationQueryEffect.tsx

@@ -1,6 +1,6 @@
-import { useBasePageLayout } from '@/page-layout/hooks/useBasePageLayout';
-import { usePageLayoutWithRelationWidgets } from '@/page-layout/hooks/usePageLayoutWithRelationWidgets';
-import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useBasePageLayout } from '@/page-layout/hooks/common/useBasePageLayout';
+import { usePageLayoutWithRelationWidgets } from '@/page-layout/hooks/display/usePageLayoutWithRelationWidgets';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/edit/useSetIsPageLayoutInEditMode';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
 import { pageLayoutIsInitializedComponentState } from '@/page-layout/states/pageLayoutIsInitializedComponentState';

packages/twenty-front/src/modules/page-layout/components/PageLayoutLeftPanel.tsx

@@ -1,8 +1,8 @@
 import { SummaryCard } from '@/object-record/record-show/components/SummaryCard';
 import { PageLayoutContent } from '@/page-layout/components/PageLayoutContent';
 import { PageLayoutContentProvider } from '@/page-layout/contexts/PageLayoutContentContext';
-import { useCurrentPageLayout } from '@/page-layout/hooks/useCurrentPageLayout';
-import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow';
+import { useCurrentPageLayout } from '@/page-layout/hooks/common/useCurrentPageLayout';
+import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/display/usePageLayoutTabWithVisibleWidgetsOrThrow';
 import { getTabLayoutMode } from '@/page-layout/utils/getTabLayoutMode';
 import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';

packages/twenty-front/src/modules/page-layout/components/PageLayoutRelationWidgetsSyncEffect.tsx

@@ -1,6 +1,6 @@
 import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
 import { useFieldListFieldMetadataItems } from '@/object-record/record-field-list/hooks/useFieldListFieldMetadataItems';
-import { useBasePageLayout } from '@/page-layout/hooks/useBasePageLayout';
+import { useBasePageLayout } from '@/page-layout/hooks/common/useBasePageLayout';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
 import { pageLayoutIsInitializedComponentState } from '@/page-layout/states/pageLayoutIsInitializedComponentState';

packages/twenty-front/src/modules/page-layout/components/PageLayoutTabList.tsx

@@ -32,8 +32,8 @@ import { PAGE_LAYOUT_TAB_LIST_DROPPABLE_IDS } from '@/page-layout/components/Pag
 import { PageLayoutTabListReorderableOverflowDropdown } from '@/page-layout/components/PageLayoutTabListReorderableOverflowDropdown';
 import { PageLayoutTabListVisibleTabs } from '@/page-layout/components/PageLayoutTabListVisibleTabs';
 import { STANDARD_PAGE_LAYOUT_TAB_TITLE_TRANSLATIONS } from '@/page-layout/constants/StandardPageLayoutTabTitleTranslations';
-import { useIsCurrentObjectCustom } from '@/page-layout/hooks/useIsCurrentObjectCustom';
-import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/useIsPageLayoutInEditMode';
+import { useIsCurrentObjectCustom } from '@/page-layout/hooks/common/useIsCurrentObjectCustom';
+import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/common/useIsPageLayoutInEditMode';
 import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
 import { pageLayoutTabListCurrentDragDroppableIdComponentState } from '@/page-layout/states/pageLayoutTabListCurrentDragDroppableIdComponentState';
 import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';

packages/twenty-front/src/modules/page-layout/components/PageLayoutTabListReorderableOverflowDropdown.tsx

@@ -11,7 +11,7 @@ import { PAGE_LAYOUT_TAB_LIST_DROPPABLE_IDS } from '@/page-layout/components/Pag
 import { PageLayoutTabListDroppableMoreButton } from '@/page-layout/components/PageLayoutTabListDroppableMoreButton';
 import { PageLayoutTabMenuItemSelectAvatar } from '@/page-layout/components/PageLayoutTabMenuItemSelectAvatar';
 import { PageLayoutTabRenderClone } from '@/page-layout/components/PageLayoutTabRenderClone';
-import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/useIsPageLayoutInEditMode';
+import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/common/useIsPageLayoutInEditMode';
 import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
 import { isPageLayoutTabDraggingComponentState } from '@/page-layout/states/isPageLayoutTabDraggingComponentState';
 import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';

packages/twenty-front/src/modules/page-layout/components/PageLayoutTabsRenderer.tsx

@@ -4,10 +4,10 @@ import { PageLayoutLeftPanel } from '@/page-layout/components/PageLayoutLeftPane
 import { PageLayoutTabList } from '@/page-layout/components/PageLayoutTabList';
 import { PageLayoutTabListEffect } from '@/page-layout/components/PageLayoutTabListEffect';
 import { PAGE_LAYOUT_LEFT_PANEL_CONTAINER_WIDTH } from '@/page-layout/constants/PageLayoutLeftPanelContainerWidth';
-import { useCreatePageLayoutTab } from '@/page-layout/hooks/useCreatePageLayoutTab';
-import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/useCurrentPageLayoutOrThrow';
-import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/useIsPageLayoutInEditMode';
-import { useReorderRecordPageLayoutTabs } from '@/page-layout/hooks/useReorderRecordPageLayoutTabs';
+import { useCreatePageLayoutTab } from '@/page-layout/hooks/edit/useCreatePageLayoutTab';
+import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/common/useCurrentPageLayoutOrThrow';
+import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/common/useIsPageLayoutInEditMode';
+import { useReorderRecordPageLayoutTabs } from '@/page-layout/hooks/edit/useReorderRecordPageLayoutTabs';
 import { PageLayoutMainContent } from '@/page-layout/PageLayoutMainContent';
 import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';
 import { getScrollWrapperInstanceIdFromPageLayoutId } from '@/page-layout/utils/getScrollWrapperInstanceIdFromPageLayoutId';

packages/twenty-front/src/modules/page-layout/hooks/common/__tests__/useIsPageLayoutInEditMode.test.tsx

@@ -1,9 +1,9 @@
 import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
-import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/useIsPageLayoutInEditMode';
+import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/common/useIsPageLayoutInEditMode';
 import {
   PAGE_LAYOUT_TEST_INSTANCE_ID,
   PageLayoutTestWrapper,
-} from '@/page-layout/hooks/__tests__/PageLayoutTestWrapper';
+} from '@/page-layout/hooks/common/__tests__/PageLayoutTestWrapper';
 import { isDashboardInEditModeComponentState } from '@/page-layout/states/isDashboardInEditModeComponentState';
 import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';
 import { renderHook } from '@testing-library/react';

packages/twenty-front/src/modules/page-layout/hooks/common/__tests__/usePageLayoutDraftState.test.tsx

@@ -1,4 +1,4 @@
-import { usePageLayoutDraftState } from '@/page-layout/hooks/usePageLayoutDraftState';
+import { usePageLayoutDraftState } from '@/page-layout/hooks/common/usePageLayoutDraftState';
 import { act, renderHook } from '@testing-library/react';
 import {
   AggregateOperations,

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

@@ -1,4 +1,4 @@
-import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/useIsPageLayoutInEditMode';
+import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/common/useIsPageLayoutInEditMode';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
 import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';

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

@@ -1,4 +1,4 @@
-import { useCurrentPageLayout } from '@/page-layout/hooks/useCurrentPageLayout';
+import { useCurrentPageLayout } from '@/page-layout/hooks/common/useCurrentPageLayout';
 import { isDefined } from 'twenty-shared/utils';
 
 export const useCurrentPageLayoutOrThrow = () => {

packages/twenty-front/src/modules/page-layout/hooks/display/__tests__/usePageLayoutWithRelationWidgets.test.tsx

@@ -1,6 +1,6 @@
 import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { useFieldListFieldMetadataItems } from '@/object-record/record-field-list/hooks/useFieldListFieldMetadataItems';
-import { usePageLayoutWithRelationWidgets } from '@/page-layout/hooks/usePageLayoutWithRelationWidgets';
+import { usePageLayoutWithRelationWidgets } from '@/page-layout/hooks/display/usePageLayoutWithRelationWidgets';
 import { type PageLayout } from '@/page-layout/types/PageLayout';
 import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { renderHook } from '@testing-library/react';

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

@@ -1,5 +1,5 @@
-import { useCurrentPageLayout } from '@/page-layout/hooks/useCurrentPageLayout';
-import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/useIsPageLayoutInEditMode';
+import { useCurrentPageLayout } from '@/page-layout/hooks/common/useCurrentPageLayout';
+import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/common/useIsPageLayoutInEditMode';
 import { type PageLayoutTab } from '@/page-layout/types/PageLayoutTab';
 import { buildWidgetVisibilityContext } from '@/page-layout/utils/buildWidgetVisibilityContext';
 import { filterVisibleWidgets } from '@/page-layout/utils/filterVisibleWidgets';

packages/twenty-front/src/modules/page-layout/hooks/edit/__tests__/useChangePageLayoutDragSelection.test.tsx

@@ -6,8 +6,8 @@ import { pageLayoutSelectedCellsComponentState } from '@/page-layout/states/page
 import {
   PageLayoutTestWrapper,
   PAGE_LAYOUT_TEST_INSTANCE_ID,
-} from './PageLayoutTestWrapper';
-import { useChangePageLayoutDragSelection } from '@/page-layout/hooks/useChangePageLayoutDragSelection';
+} from '@/page-layout/hooks/common/__tests__/PageLayoutTestWrapper';
+import { useChangePageLayoutDragSelection } from '@/page-layout/hooks/edit/useChangePageLayoutDragSelection';
 
 describe('useChangePageLayoutDragSelection', () => {
   it('should add cell to selection when selected is true', () => {

packages/twenty-front/src/modules/page-layout/hooks/edit/__tests__/useCreatePageLayoutGraphWidget.test.tsx

@@ -1,4 +1,4 @@
-import { useCreatePageLayoutGraphWidget } from '@/page-layout/hooks/useCreatePageLayoutGraphWidget';
+import { useCreatePageLayoutGraphWidget } from '@/page-layout/hooks/edit/useCreatePageLayoutGraphWidget';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
 import { type GraphWidgetFieldSelection } from '@/page-layout/types/GraphWidgetFieldSelection';
@@ -17,7 +17,7 @@ import {
 import {
   PAGE_LAYOUT_TEST_INSTANCE_ID,
   PageLayoutTestWrapper,
-} from './PageLayoutTestWrapper';
+} from '@/page-layout/hooks/common/__tests__/PageLayoutTestWrapper';
 
 jest.mock('uuid', () => ({
   v4: jest.fn(() => 'mock-uuid'),

packages/twenty-front/src/modules/page-layout/hooks/edit/__tests__/useCreatePageLayoutTab.test.tsx

@@ -1,4 +1,4 @@
-import { useCreatePageLayoutTab } from '@/page-layout/hooks/useCreatePageLayoutTab';
+import { useCreatePageLayoutTab } from '@/page-layout/hooks/edit/useCreatePageLayoutTab';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
 import { getTabListInstanceIdFromPageLayoutId } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutId';
@@ -13,7 +13,7 @@ import {
 import {
   PAGE_LAYOUT_TEST_INSTANCE_ID,
   PageLayoutTestWrapper,
-} from './PageLayoutTestWrapper';
+} from '@/page-layout/hooks/common/__tests__/PageLayoutTestWrapper';
 
 jest.mock('uuid', () => ({
   v4: jest.fn(),

packages/twenty-front/src/modules/page-layout/hooks/edit/__tests__/useCreateWidgetFromClick.test.tsx

@@ -1,5 +1,5 @@
 import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
-import { useCreateWidgetFromClick } from '@/page-layout/hooks/useCreateWidgetFromClick';
+import { useCreateWidgetFromClick } from '@/page-layout/hooks/edit/useCreateWidgetFromClick';
 import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
 import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
@@ -9,7 +9,7 @@ import { SidePanelPages } from 'twenty-shared/types';
 import {
   PAGE_LAYOUT_TEST_INSTANCE_ID,
   PageLayoutTestWrapper,
-} from './PageLayoutTestWrapper';
+} from '@/page-layout/hooks/common/__tests__/PageLayoutTestWrapper';
 
 jest.mock(
   '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel',

packages/twenty-front/src/modules/page-layout/hooks/edit/__tests__/useDeletePageLayoutWidget.test.tsx

@@ -2,8 +2,8 @@ import { act, renderHook } from '@testing-library/react';
 import {
   PAGE_LAYOUT_TEST_INSTANCE_ID,
   PageLayoutTestWrapper,
-} from './PageLayoutTestWrapper';
-import { useDeletePageLayoutWidget } from '@/page-layout/hooks/useDeletePageLayoutWidget';
+} from '@/page-layout/hooks/common/__tests__/PageLayoutTestWrapper';
+import { useDeletePageLayoutWidget } from '@/page-layout/hooks/edit/useDeletePageLayoutWidget';
 import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
 import { createStore } from 'jotai';
 import { type ReactNode } from 'react';

packages/twenty-front/src/modules/page-layout/hooks/edit/__tests__/useEndPageLayoutDragSelection.test.tsx

@@ -1,5 +1,5 @@
 import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
-import { useEndPageLayoutDragSelection } from '@/page-layout/hooks/useEndPageLayoutDragSelection';
+import { useEndPageLayoutDragSelection } from '@/page-layout/hooks/edit/useEndPageLayoutDragSelection';
 import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
 import { pageLayoutSelectedCellsComponentState } from '@/page-layout/states/pageLayoutSelectedCellsComponentState';
 import { calculateGridBoundsFromSelectedCells } from '@/page-layout/utils/calculateGridBoundsFromSelectedCells';
@@ -12,7 +12,7 @@ import { isDefined } from 'twenty-shared/utils';
 import {
   PAGE_LAYOUT_TEST_INSTANCE_ID,
   PageLayoutTestWrapper,
-} from './PageLayoutTestWrapper';
+} from '@/page-layout/hooks/common/__tests__/PageLayoutTestWrapper';
 
 jest.mock(
   '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel',

packages/twenty-front/src/modules/page-layout/hooks/edit/__tests__/usePageLayoutHandleLayoutChange.test.tsx

@@ -1,4 +1,4 @@
-import { usePageLayoutHandleLayoutChange } from '@/page-layout/hooks/usePageLayoutHandleLayoutChange';
+import { usePageLayoutHandleLayoutChange } from '@/page-layout/hooks/edit/usePageLayoutHandleLayoutChange';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
 import { getTabListInstanceIdFromPageLayoutId } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutId';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
@@ -8,7 +8,7 @@ import { useSetAtom } from 'jotai';
 import {
   PAGE_LAYOUT_TEST_INSTANCE_ID,
   PageLayoutTestWrapper,
-} from './PageLayoutTestWrapper';
+} from '@/page-layout/hooks/common/__tests__/PageLayoutTestWrapper';
 
 describe('usePageLayoutHandleLayoutChange', () => {
   it('should update layouts for specific tab only', () => {

packages/twenty-front/src/modules/page-layout/hooks/edit/__tests__/useSetIsPageLayoutInEditMode.test.tsx

@@ -1,9 +1,9 @@
 import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
-import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/edit/useSetIsPageLayoutInEditMode';
 import {
   PAGE_LAYOUT_TEST_INSTANCE_ID,
   PageLayoutTestWrapper,
-} from '@/page-layout/hooks/__tests__/PageLayoutTestWrapper';
+} from '@/page-layout/hooks/common/__tests__/PageLayoutTestWrapper';
 import { isDashboardInEditModeComponentState } from '@/page-layout/states/isDashboardInEditModeComponentState';
 import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';
 import { type PageLayout } from '@/page-layout/types/PageLayout';

packages/twenty-front/src/modules/page-layout/hooks/edit/__tests__/useStartPageLayoutDragSelection.test.tsx

@@ -4,11 +4,11 @@ import { createStore } from 'jotai';
 import { type ReactNode } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 import { pageLayoutSelectedCellsComponentState } from '@/page-layout/states/pageLayoutSelectedCellsComponentState';
-import { useStartPageLayoutDragSelection } from '@/page-layout/hooks/useStartPageLayoutDragSelection';
+import { useStartPageLayoutDragSelection } from '@/page-layout/hooks/edit/useStartPageLayoutDragSelection';
 import {
   PAGE_LAYOUT_TEST_INSTANCE_ID,
   PageLayoutTestWrapper,
-} from './PageLayoutTestWrapper';
+} from '@/page-layout/hooks/common/__tests__/PageLayoutTestWrapper';
 
 const createTestStore = (initialSelectedCells?: Set<string>) => {
   const store = createStore();

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

@@ -0,0 +1,127 @@
+import { WIDGET_SIZES } from '@/page-layout/constants/WidgetSizes';
+import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
+import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
+import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
+import { computeDefaultFrontComponentWidget } from '@/page-layout/utils/computeDefaultFrontComponentWidget';
+import { getDefaultWidgetPosition } from '@/page-layout/utils/getDefaultWidgetPosition';
+import { getUpdatedTabLayouts } from '@/page-layout/utils/getUpdatedTabLayouts';
+import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import { v4 as uuidv4 } from 'uuid';
+import { WidgetType } from '~/generated-metadata/graphql';
+
+export const useCreatePageLayoutFrontComponentWidget = ({
+  pageLayoutId: pageLayoutIdFromProps,
+  tabListInstanceId,
+}: {
+  pageLayoutId: string;
+  tabListInstanceId: string;
+}) => {
+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+    pageLayoutIdFromProps,
+  );
+
+  const activeTabId = useAtomComponentStateValue(
+    activeTabIdComponentState,
+    tabListInstanceId,
+  );
+
+  const pageLayoutCurrentLayoutsState = useAtomComponentStateCallbackState(
+    pageLayoutCurrentLayoutsComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutDraggedAreaState = useAtomComponentStateCallbackState(
+    pageLayoutDraggedAreaComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutDraftState = useAtomComponentStateCallbackState(
+    pageLayoutDraftComponentState,
+    pageLayoutId,
+  );
+
+  const store = useStore();
+
+  const createPageLayoutFrontComponentWidget = useCallback(
+    (title: string, frontComponentId: string): PageLayoutWidget => {
+      const allTabLayouts = store.get(pageLayoutCurrentLayoutsState);
+
+      const pageLayoutDraggedArea = store.get(pageLayoutDraggedAreaState);
+
+      if (!isDefined(activeTabId)) {
+        throw new Error(
+          'A tab must be selected to create a new front component widget',
+        );
+      }
+
+      const widgetId = uuidv4();
+      const frontComponentSize = WIDGET_SIZES[WidgetType.FRONT_COMPONENT]!;
+      const defaultSize = frontComponentSize.default;
+      const minimumSize = frontComponentSize.minimum;
+      const position = getDefaultWidgetPosition(
+        pageLayoutDraggedArea,
+        defaultSize,
+        minimumSize,
+      );
+
+      const newWidget = computeDefaultFrontComponentWidget(
+        widgetId,
+        activeTabId,
+        title,
+        frontComponentId,
+        {
+          row: position.y,
+          column: position.x,
+          rowSpan: position.h,
+          columnSpan: position.w,
+        },
+      );
+
+      const newLayout = {
+        i: widgetId,
+        x: position.x,
+        y: position.y,
+        w: position.w,
+        h: position.h,
+        minW: minimumSize.w,
+        minH: minimumSize.h,
+      };
+
+      const updatedLayouts = getUpdatedTabLayouts(
+        allTabLayouts,
+        activeTabId,
+        newLayout,
+      );
+
+      store.set(pageLayoutCurrentLayoutsState, updatedLayouts);
+
+      store.set(pageLayoutDraftState, (prev) => ({
+        ...prev,
+        tabs: addWidgetToTab(prev.tabs, activeTabId, newWidget),
+      }));
+
+      store.set(pageLayoutDraggedAreaState, null);
+
+      return newWidget;
+    },
+    [
+      activeTabId,
+      pageLayoutCurrentLayoutsState,
+      pageLayoutDraftState,
+      pageLayoutDraggedAreaState,
+      store,
+    ],
+  );
+
+  return { createPageLayoutFrontComponentWidget };
+};

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

@@ -0,0 +1,173 @@
+import { useDateTimeFormat } from '@/localization/hooks/useDateTimeFormat';
+import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
+import { type GraphWidgetFieldSelection } from '@/page-layout/types/GraphWidgetFieldSelection';
+import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
+import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
+import { computeDefaultGraphWidget } from '@/page-layout/utils/computeDefaultGraphWidget';
+import { getDefaultWidgetPosition } from '@/page-layout/utils/getDefaultWidgetPosition';
+import { getUpdatedTabLayouts } from '@/page-layout/utils/getUpdatedTabLayouts';
+import { getWidgetSize } from '@/page-layout/utils/getWidgetSize';
+import { getWidgetTitle } from '@/page-layout/utils/getWidgetTitle';
+import { isWidgetConfigurationOfType } from '@/side-panel/pages/page-layout/utils/isWidgetConfigurationOfType';
+import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import { v4 as uuidv4 } from 'uuid';
+import {
+  BarChartLayout,
+  WidgetConfigurationType,
+  WidgetType,
+} from '~/generated-metadata/graphql';
+
+export const useCreatePageLayoutGraphWidget = ({
+  pageLayoutId: pageLayoutIdFromProps,
+  tabListInstanceId,
+}: {
+  pageLayoutId: string;
+  tabListInstanceId: string;
+}) => {
+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+    pageLayoutIdFromProps,
+  );
+
+  const store = useStore();
+  const { timeZone, calendarStartDay } = useDateTimeFormat();
+
+  const pageLayoutDraftState = useAtomComponentStateCallbackState(
+    pageLayoutDraftComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutCurrentLayoutsState = useAtomComponentStateCallbackState(
+    pageLayoutCurrentLayoutsComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutDraggedAreaState = useAtomComponentStateCallbackState(
+    pageLayoutDraggedAreaComponentState,
+    pageLayoutId,
+  );
+
+  const createPageLayoutGraphWidget = useCallback(
+    ({
+      fieldSelection,
+    }: {
+      fieldSelection?: GraphWidgetFieldSelection;
+    }): PageLayoutWidget => {
+      const activeTabId = store.get(
+        activeTabIdComponentState.atomFamily({
+          instanceId: tabListInstanceId,
+        }),
+      );
+
+      if (!isDefined(activeTabId)) {
+        throw new Error('A tab must be selected to create a new graph widget');
+      }
+
+      const pageLayoutDraft = store.get(pageLayoutDraftState);
+
+      const allTabLayouts = store.get(pageLayoutCurrentLayoutsState);
+
+      const pageLayoutDraggedArea = store.get(pageLayoutDraggedAreaState);
+
+      const allWidgets = pageLayoutDraft.tabs.flatMap((tab) => tab.widgets);
+      const existingWidgetCount = allWidgets.filter((widget) => {
+        if (widget.type !== WidgetType.GRAPH) {
+          return false;
+        }
+
+        if (
+          !isWidgetConfigurationOfType(
+            widget.configuration,
+            'BarChartConfiguration',
+          )
+        ) {
+          return false;
+        }
+        return widget.configuration.layout === BarChartLayout.VERTICAL;
+      }).length;
+
+      const title = getWidgetTitle(
+        {
+          configurationType: WidgetConfigurationType.BAR_CHART,
+          layout: BarChartLayout.VERTICAL,
+        },
+        existingWidgetCount,
+      );
+      const widgetId = uuidv4();
+
+      const defaultSize = getWidgetSize(
+        WidgetConfigurationType.BAR_CHART,
+        'default',
+      );
+      const minimumSize = getWidgetSize(
+        WidgetConfigurationType.BAR_CHART,
+        'minimum',
+      );
+      const position = getDefaultWidgetPosition(
+        pageLayoutDraggedArea,
+        defaultSize,
+        minimumSize,
+      );
+
+      const newWidget = computeDefaultGraphWidget({
+        id: widgetId,
+        pageLayoutTabId: activeTabId,
+        title,
+        gridPosition: {
+          row: position.y,
+          column: position.x,
+          rowSpan: position.h,
+          columnSpan: position.w,
+        },
+        fieldSelection,
+        timezone: timeZone,
+        firstDayOfTheWeek: calendarStartDay,
+      });
+
+      const newLayout = {
+        i: widgetId,
+        x: position.x,
+        y: position.y,
+        w: position.w,
+        h: position.h,
+        minW: minimumSize.w,
+        minH: minimumSize.h,
+      };
+
+      const updatedLayouts = getUpdatedTabLayouts(
+        allTabLayouts,
+        activeTabId,
+        newLayout,
+      );
+      store.set(pageLayoutCurrentLayoutsState, updatedLayouts);
+
+      store.set(pageLayoutDraftState, (prev) => ({
+        ...prev,
+        tabs: addWidgetToTab(prev.tabs, activeTabId, newWidget),
+      }));
+
+      store.set(pageLayoutDraggedAreaState, null);
+
+      return newWidget;
+    },
+    [
+      tabListInstanceId,
+      pageLayoutCurrentLayoutsState,
+      pageLayoutDraftState,
+      pageLayoutDraggedAreaState,
+      timeZone,
+      calendarStartDay,
+      store,
+    ],
+  );
+
+  return { createPageLayoutGraphWidget };
+};

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

@@ -0,0 +1,125 @@
+import { WIDGET_SIZES } from '@/page-layout/constants/WidgetSizes';
+import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
+import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
+import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
+import { computeDefaultIframeWidget } from '@/page-layout/utils/computeDefaultIframeWidget';
+import { getDefaultWidgetPosition } from '@/page-layout/utils/getDefaultWidgetPosition';
+import { getUpdatedTabLayouts } from '@/page-layout/utils/getUpdatedTabLayouts';
+import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import { v4 as uuidv4 } from 'uuid';
+import { WidgetType } from '~/generated-metadata/graphql';
+
+export const useCreatePageLayoutIframeWidget = ({
+  pageLayoutId: pageLayoutIdFromProps,
+  tabListInstanceId,
+}: {
+  pageLayoutId: string;
+  tabListInstanceId: string;
+}) => {
+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+    pageLayoutIdFromProps,
+  );
+
+  const activeTabId = useAtomComponentStateValue(
+    activeTabIdComponentState,
+    tabListInstanceId,
+  );
+
+  const pageLayoutCurrentLayoutsState = useAtomComponentStateCallbackState(
+    pageLayoutCurrentLayoutsComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutDraggedAreaState = useAtomComponentStateCallbackState(
+    pageLayoutDraggedAreaComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutDraftState = useAtomComponentStateCallbackState(
+    pageLayoutDraftComponentState,
+    pageLayoutId,
+  );
+
+  const store = useStore();
+
+  const createPageLayoutIframeWidget = useCallback(
+    (title: string, url: string | null): PageLayoutWidget => {
+      const allTabLayouts = store.get(pageLayoutCurrentLayoutsState);
+
+      const pageLayoutDraggedArea = store.get(pageLayoutDraggedAreaState);
+
+      if (!isDefined(activeTabId)) {
+        throw new Error('A tab must be selected to create a new iframe widget');
+      }
+
+      const widgetId = uuidv4();
+      const iframeSize = WIDGET_SIZES[WidgetType.IFRAME]!;
+      const defaultIframeSize = iframeSize.default;
+      const minimumSize = iframeSize.minimum;
+      const position = getDefaultWidgetPosition(
+        pageLayoutDraggedArea,
+        defaultIframeSize,
+        minimumSize,
+      );
+
+      const newWidget = computeDefaultIframeWidget(
+        widgetId,
+        activeTabId,
+        title,
+        url,
+        {
+          row: position.y,
+          column: position.x,
+          rowSpan: position.h,
+          columnSpan: position.w,
+        },
+      );
+
+      const newLayout = {
+        i: widgetId,
+        x: position.x,
+        y: position.y,
+        w: position.w,
+        h: position.h,
+        minW: minimumSize.w,
+        minH: minimumSize.h,
+      };
+
+      const updatedLayouts = getUpdatedTabLayouts(
+        allTabLayouts,
+        activeTabId,
+        newLayout,
+      );
+
+      store.set(pageLayoutCurrentLayoutsState, updatedLayouts);
+
+      store.set(pageLayoutDraftState, (prev) => ({
+        ...prev,
+        tabs: addWidgetToTab(prev.tabs, activeTabId, newWidget),
+      }));
+
+      store.set(pageLayoutDraggedAreaState, null);
+
+      return newWidget;
+    },
+    [
+      activeTabId,
+      pageLayoutCurrentLayoutsState,
+      pageLayoutDraftState,
+      pageLayoutDraggedAreaState,
+      store,
+    ],
+  );
+
+  return { createPageLayoutIframeWidget };
+};

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

@@ -0,0 +1,130 @@
+import { WIDGET_SIZES } from '@/page-layout/constants/WidgetSizes';
+import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
+import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
+import { computeDefaultStandaloneRichTextWidget } from '@/page-layout/utils/computeDefaultStandaloneRichTextWidget';
+import { getDefaultWidgetPosition } from '@/page-layout/utils/getDefaultWidgetPosition';
+import { getUpdatedTabLayouts } from '@/page-layout/utils/getUpdatedTabLayouts';
+import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import { v4 as uuidv4 } from 'uuid';
+import {
+  type PageLayoutWidget,
+  type RichTextBody,
+  WidgetType,
+} from '~/generated-metadata/graphql';
+
+export const useCreatePageLayoutStandaloneRichTextWidget = ({
+  pageLayoutId: pageLayoutIdFromProps,
+  tabListInstanceId,
+}: {
+  pageLayoutId: string;
+  tabListInstanceId: string;
+}) => {
+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+    pageLayoutIdFromProps,
+  );
+
+  const store = useStore();
+
+  const pageLayoutCurrentLayoutsState = useAtomComponentStateCallbackState(
+    pageLayoutCurrentLayoutsComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutDraggedAreaState = useAtomComponentStateCallbackState(
+    pageLayoutDraggedAreaComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutDraftState = useAtomComponentStateCallbackState(
+    pageLayoutDraftComponentState,
+    pageLayoutId,
+  );
+
+  const createPageLayoutStandaloneRichTextWidget = useCallback(
+    (body: RichTextBody): PageLayoutWidget => {
+      const activeTabId = store.get(
+        activeTabIdComponentState.atomFamily({
+          instanceId: tabListInstanceId,
+        }),
+      );
+
+      if (!isDefined(activeTabId)) {
+        throw new Error(
+          'A tab must be selected to create a new rich text widget',
+        );
+      }
+
+      const allTabLayouts = store.get(pageLayoutCurrentLayoutsState);
+
+      const pageLayoutDraggedArea = store.get(pageLayoutDraggedAreaState);
+
+      const widgetId = uuidv4();
+      const richTextSize = WIDGET_SIZES[WidgetType.STANDALONE_RICH_TEXT]!;
+      const defaultRichTextSize = richTextSize.default;
+      const minimumSize = richTextSize.minimum;
+      const position = getDefaultWidgetPosition(
+        pageLayoutDraggedArea,
+        defaultRichTextSize,
+        minimumSize,
+      );
+
+      const newWidget = computeDefaultStandaloneRichTextWidget(
+        widgetId,
+        activeTabId,
+
+        body,
+        {
+          row: position.y,
+          column: position.x,
+          rowSpan: position.h,
+          columnSpan: position.w,
+        },
+      );
+
+      const newLayout = {
+        i: widgetId,
+        x: position.x,
+        y: position.y,
+        w: position.w,
+        h: position.h,
+        minW: minimumSize.w,
+        minH: minimumSize.h,
+      };
+
+      const updatedLayouts = getUpdatedTabLayouts(
+        allTabLayouts,
+        activeTabId,
+        newLayout,
+      );
+
+      store.set(pageLayoutCurrentLayoutsState, updatedLayouts);
+
+      store.set(pageLayoutDraftState, (prev) => ({
+        ...prev,
+        tabs: addWidgetToTab(prev.tabs, activeTabId, newWidget),
+      }));
+
+      store.set(pageLayoutDraggedAreaState, null);
+
+      return newWidget;
+    },
+    [
+      tabListInstanceId,
+      pageLayoutCurrentLayoutsState,
+      pageLayoutDraftState,
+      pageLayoutDraggedAreaState,
+      store,
+    ],
+  );
+
+  return { createPageLayoutStandaloneRichTextWidget };
+};

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

@@ -0,0 +1,86 @@
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { useFieldListFieldMetadataItems } from '@/object-record/record-field-list/hooks/useFieldListFieldMetadataItems';
+import { usePageLayoutContentContext } from '@/page-layout/contexts/PageLayoutContentContext';
+import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/common/useCurrentPageLayoutOrThrow';
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
+import { computeDefaultFieldWidget } from '@/page-layout/utils/computeDefaultFieldWidget';
+import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
+import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { WidgetConfigurationType } from '~/generated-metadata/graphql';
+
+export const useCreateRecordPageFieldWidget = () => {
+  const { tabId } = usePageLayoutContentContext();
+
+  const { targetObjectNameSingular } = useTargetRecord();
+
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular: targetObjectNameSingular,
+  });
+
+  const { boxedRelationFieldMetadataItems } = useFieldListFieldMetadataItems({
+    objectNameSingular: targetObjectNameSingular,
+  });
+
+  const { currentPageLayout } = useCurrentPageLayoutOrThrow();
+
+  const pageLayoutDraftState = useAtomComponentStateCallbackState(
+    pageLayoutDraftComponentState,
+  );
+
+  const store = useStore();
+
+  const createRecordPageFieldWidget = useCallback(() => {
+    const activeTab = currentPageLayout.tabs.find((tab) => tab.id === tabId);
+    const existingWidgets = activeTab?.widgets ?? [];
+
+    const usedFieldMetadataIds = new Set(
+      existingWidgets
+        .filter(
+          (widget) =>
+            widget.configuration.configurationType ===
+            WidgetConfigurationType.FIELD,
+        )
+        .map((widget) => {
+          const configuration = widget.configuration as {
+            fieldMetadataId: string;
+          };
+          return configuration.fieldMetadataId;
+        }),
+    );
+
+    const availableRelationField = boxedRelationFieldMetadataItems.find(
+      (field) => !usedFieldMetadataIds.has(field.id),
+    );
+
+    const fieldMetadataId = availableRelationField?.id ?? '';
+
+    const positionIndex = existingWidgets.length;
+    const widgetId = uuidv4();
+
+    const newWidget = computeDefaultFieldWidget({
+      id: widgetId,
+      pageLayoutTabId: tabId,
+      fieldMetadataId,
+      objectMetadataId: objectMetadataItem.id,
+      positionIndex,
+    });
+
+    store.set(pageLayoutDraftState, (prev) => ({
+      ...prev,
+      tabs: addWidgetToTab(prev.tabs, tabId, newWidget),
+    }));
+  }, [
+    boxedRelationFieldMetadataItems,
+    currentPageLayout.tabs,
+    objectMetadataItem.id,
+    pageLayoutDraftState,
+    store,
+    tabId,
+  ]);
+
+  return { createRecordPageFieldWidget };
+};

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

@@ -0,0 +1,101 @@
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { usePageLayoutContentContext } from '@/page-layout/contexts/PageLayoutContentContext';
+import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/common/useCurrentPageLayoutOrThrow';
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
+import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
+import { computeDefaultFieldsWidget } from '@/page-layout/utils/computeDefaultFieldsWidget';
+import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
+import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
+import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
+import { usePerformViewAPIPersist } from '@/views/hooks/internal/usePerformViewAPIPersist';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+import { SidePanelPages } from 'twenty-shared/types';
+import { v4 as uuidv4 } from 'uuid';
+import { ViewType } from '~/generated-metadata/graphql';
+
+export const useCreateRecordPageFieldsWidget = () => {
+  const { tabId } = usePageLayoutContentContext();
+
+  const { targetObjectNameSingular } = useTargetRecord();
+
+  const { objectMetadataItem } = useObjectMetadataItem({
+    objectNameSingular: targetObjectNameSingular,
+  });
+
+  const { currentPageLayout } = useCurrentPageLayoutOrThrow();
+
+  const { performViewAPICreate } = usePerformViewAPIPersist();
+
+  const pageLayoutDraftState = useAtomComponentStateCallbackState(
+    pageLayoutDraftComponentState,
+  );
+
+  const pageLayoutEditingWidgetIdState = useAtomComponentStateCallbackState(
+    pageLayoutEditingWidgetIdComponentState,
+  );
+
+  const { navigatePageLayoutSidePanel } = useNavigatePageLayoutSidePanel();
+
+  const store = useStore();
+
+  const createRecordPageFieldsWidget = useCallback(async () => {
+    const viewId = uuidv4();
+
+    const result = await performViewAPICreate(
+      {
+        input: {
+          id: viewId,
+          name: `${objectMetadataItem.labelSingular} Fields`,
+          icon: 'IconList',
+          objectMetadataId: objectMetadataItem.id,
+          type: ViewType.FIELDS_WIDGET,
+        },
+      },
+      objectMetadataItem.id,
+    );
+
+    if (result.status === 'failed') {
+      return;
+    }
+
+    const activeTab = currentPageLayout.tabs.find((tab) => tab.id === tabId);
+    const positionIndex = activeTab?.widgets.length ?? 0;
+
+    const widgetId = uuidv4();
+
+    const newWidget = computeDefaultFieldsWidget({
+      id: widgetId,
+      pageLayoutTabId: tabId,
+      viewId,
+      objectMetadataId: objectMetadataItem.id,
+      positionIndex,
+    });
+
+    store.set(pageLayoutDraftState, (prev) => ({
+      ...prev,
+      tabs: addWidgetToTab(prev.tabs, tabId, newWidget),
+    }));
+
+    store.set(pageLayoutEditingWidgetIdState, widgetId);
+
+    navigatePageLayoutSidePanel({
+      sidePanelPage: SidePanelPages.PageLayoutFieldsSettings,
+      focusTitleInput: true,
+      resetNavigationStack: true,
+    });
+  }, [
+    currentPageLayout.tabs,
+    navigatePageLayoutSidePanel,
+    objectMetadataItem.id,
+    objectMetadataItem.labelSingular,
+    pageLayoutDraftState,
+    pageLayoutEditingWidgetIdState,
+    performViewAPICreate,
+    store,
+    tabId,
+  ]);
+
+  return { createRecordPageFieldsWidget };
+};

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

@@ -1,6 +1,6 @@
 import { PAGE_LAYOUT_TAB_LIST_DROPPABLE_IDS } from '@/page-layout/components/PageLayoutTabListDroppableIds';
-import { useCurrentPageLayout } from '@/page-layout/hooks/useCurrentPageLayout';
-import { usePageLayoutDraftState } from '@/page-layout/hooks/usePageLayoutDraftState';
+import { useCurrentPageLayout } from '@/page-layout/hooks/common/useCurrentPageLayout';
+import { usePageLayoutDraftState } from '@/page-layout/hooks/common/usePageLayoutDraftState';
 import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { type DropResult } from '@hello-pangea/dnd';

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

@@ -1,4 +1,4 @@
-import { useReorderPageLayoutTabs } from '@/page-layout/hooks/useReorderPageLayoutTabs';
+import { useReorderPageLayoutTabs } from '@/page-layout/hooks/edit/useReorderPageLayoutTabs';
 import { type DropResult, type ResponderProvided } from '@hello-pangea/dnd';
 import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';

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

@@ -1,4 +1,4 @@
-import { useUpdatePageLayoutWithTabsAndWidgets } from '@/page-layout/hooks/useUpdatePageLayoutWithTabsAndWidgets';
+import { useUpdatePageLayoutWithTabsAndWidgets } from '@/page-layout/hooks/edit/useUpdatePageLayoutWithTabsAndWidgets';
 import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
 import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';

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

@@ -5,7 +5,7 @@ import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDr
 import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
 import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
-import { createDefaultFrontComponentWidget } from '@/page-layout/utils/createDefaultFrontComponentWidget';
+import { computeDefaultFrontComponentWidget } from '@/page-layout/utils/computeDefaultFrontComponentWidget';
 import { getDefaultWidgetPosition } from '@/page-layout/utils/getDefaultWidgetPosition';
 import { getUpdatedTabLayouts } from '@/page-layout/utils/getUpdatedTabLayouts';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
@@ -74,7 +74,7 @@ export const useCreatePageLayoutFrontComponentWidget = ({
         minimumSize,
       );
 
-      const newWidget = createDefaultFrontComponentWidget(
+      const newWidget = computeDefaultFrontComponentWidget(
         widgetId,
         activeTabId,
         title,

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

@@ -6,7 +6,7 @@ import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLa
 import { type GraphWidgetFieldSelection } from '@/page-layout/types/GraphWidgetFieldSelection';
 import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
-import { createDefaultGraphWidget } from '@/page-layout/utils/createDefaultGraphWidget';
+import { computeDefaultGraphWidget } from '@/page-layout/utils/computeDefaultGraphWidget';
 import { getDefaultWidgetPosition } from '@/page-layout/utils/getDefaultWidgetPosition';
 import { getUpdatedTabLayouts } from '@/page-layout/utils/getUpdatedTabLayouts';
 import { getWidgetSize } from '@/page-layout/utils/getWidgetSize';
@@ -117,7 +117,7 @@ export const useCreatePageLayoutGraphWidget = ({
         minimumSize,
       );
 
-      const newWidget = createDefaultGraphWidget({
+      const newWidget = computeDefaultGraphWidget({
         id: widgetId,
         pageLayoutTabId: activeTabId,
         title,

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

@@ -5,7 +5,7 @@ import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDr
 import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
 import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
-import { createDefaultIframeWidget } from '@/page-layout/utils/createDefaultIframeWidget';
+import { computeDefaultIframeWidget } from '@/page-layout/utils/computeDefaultIframeWidget';
 import { getDefaultWidgetPosition } from '@/page-layout/utils/getDefaultWidgetPosition';
 import { getUpdatedTabLayouts } from '@/page-layout/utils/getUpdatedTabLayouts';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
@@ -72,7 +72,7 @@ export const useCreatePageLayoutIframeWidget = ({
         minimumSize,
       );
 
-      const newWidget = createDefaultIframeWidget(
+      const newWidget = computeDefaultIframeWidget(
         widgetId,
         activeTabId,
         title,

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

@@ -4,7 +4,7 @@ import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pag
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
 import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLayoutDraggedAreaComponentState';
 import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
-import { createDefaultStandaloneRichTextWidget } from '@/page-layout/utils/createDefaultStandaloneRichTextWidget';
+import { computeDefaultStandaloneRichTextWidget } from '@/page-layout/utils/computeDefaultStandaloneRichTextWidget';
 import { getDefaultWidgetPosition } from '@/page-layout/utils/getDefaultWidgetPosition';
 import { getUpdatedTabLayouts } from '@/page-layout/utils/getUpdatedTabLayouts';
 import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTabIdComponentState';
@@ -77,7 +77,7 @@ export const useCreatePageLayoutStandaloneRichTextWidget = ({
         minimumSize,
       );
 
-      const newWidget = createDefaultStandaloneRichTextWidget(
+      const newWidget = computeDefaultStandaloneRichTextWidget(
         widgetId,
         activeTabId,
 

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

@@ -4,7 +4,7 @@ import { usePageLayoutContentContext } from '@/page-layout/contexts/PageLayoutCo
 import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/useCurrentPageLayoutOrThrow';
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
 import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
-import { createDefaultFieldWidget } from '@/page-layout/utils/createDefaultFieldWidget';
+import { computeDefaultFieldWidget } from '@/page-layout/utils/computeDefaultFieldWidget';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
 import { useStore } from 'jotai';
@@ -61,7 +61,7 @@ export const useCreateRecordPageFieldWidget = () => {
     const positionIndex = existingWidgets.length;
     const widgetId = uuidv4();
 
-    const newWidget = createDefaultFieldWidget({
+    const newWidget = computeDefaultFieldWidget({
       id: widgetId,
       pageLayoutTabId: tabId,
       fieldMetadataId,

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

@@ -4,7 +4,7 @@ import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/useCurrentPageL
 import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
 import { pageLayoutEditingWidgetIdComponentState } from '@/page-layout/states/pageLayoutEditingWidgetIdComponentState';
 import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
-import { createDefaultFieldsWidget } from '@/page-layout/utils/createDefaultFieldsWidget';
+import { computeDefaultFieldsWidget } from '@/page-layout/utils/computeDefaultFieldsWidget';
 import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
 import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
@@ -65,7 +65,7 @@ export const useCreateRecordPageFieldsWidget = () => {
 
     const widgetId = uuidv4();
 
-    const newWidget = createDefaultFieldsWidget({
+    const newWidget = computeDefaultFieldsWidget({
       id: widgetId,
       pageLayoutTabId: tabId,
       viewId,

packages/twenty-front/src/modules/page-layout/utils/__tests__/computeDefaultGraphWidget.test.ts

@@ -1,3 +1,4 @@
+import { computeDefaultGraphWidget } from '@/page-layout/utils/computeDefaultGraphWidget';
 import {
   AggregateOperations,
   AxisNameDisplay,
@@ -6,9 +7,8 @@ import {
   PageLayoutTabLayoutMode,
   WidgetConfigurationType,
 } from '~/generated-metadata/graphql';
-import { createDefaultGraphWidget } from '@/page-layout/utils/createDefaultGraphWidget';
 
-describe('createDefaultGraphWidget', () => {
+describe('computeDefaultGraphWidget', () => {
   const baseParams = {
     id: 'widget-1',
     pageLayoutTabId: 'tab-1',
@@ -19,7 +19,7 @@ describe('createDefaultGraphWidget', () => {
 
   describe('VERTICAL_BAR graph type', () => {
     it('should create widget with bar chart configuration when all fields are provided', () => {
-      const widget = createDefaultGraphWidget({
+      const widget = computeDefaultGraphWidget({
         ...baseParams,
         fieldSelection: {
           aggregateFieldMetadataId: 'field-1',
@@ -43,7 +43,7 @@ describe('createDefaultGraphWidget', () => {
     });
 
     it('should use objectMetadataId from fieldSelection over params', () => {
-      const widget = createDefaultGraphWidget({
+      const widget = computeDefaultGraphWidget({
         ...baseParams,
         objectMetadataId: 'object-1',
         fieldSelection: {
@@ -56,7 +56,7 @@ describe('createDefaultGraphWidget', () => {
     });
 
     it('should set timestamps and common widget properties', () => {
-      const widget = createDefaultGraphWidget({
+      const widget = computeDefaultGraphWidget({
         ...baseParams,
         fieldSelection: {
           aggregateFieldMetadataId: 'field-1',

packages/twenty-front/src/modules/page-layout/utils/__tests__/computeDefaultStandaloneRichTextWidget.test.ts

@@ -1,12 +1,12 @@
+import { computeDefaultStandaloneRichTextWidget } from '@/page-layout/utils/computeDefaultStandaloneRichTextWidget';
 import {
   PageLayoutTabLayoutMode,
   WidgetType,
 } from '~/generated-metadata/graphql';
-import { createDefaultStandaloneRichTextWidget } from '@/page-layout/utils/createDefaultStandaloneRichTextWidget';
 
-describe('createDefaultStandaloneRichTextWidget', () => {
+describe('computeDefaultStandaloneRichTextWidget', () => {
   it('should create a standalone rich text widget with correct structure', () => {
-    const widget = createDefaultStandaloneRichTextWidget(
+    const widget = computeDefaultStandaloneRichTextWidget(
       'widget-1',
       'tab-1',
       { blocknote: '[{"type":"paragraph","content":"Test"}]' },
@@ -35,7 +35,7 @@ describe('createDefaultStandaloneRichTextWidget', () => {
   });
 
   it('should use provided objectMetadataId or default to null', () => {
-    const withObjectId = createDefaultStandaloneRichTextWidget(
+    const withObjectId = computeDefaultStandaloneRichTextWidget(
       'w1',
       't1',
       { blocknote: '[]' },
@@ -43,7 +43,7 @@ describe('createDefaultStandaloneRichTextWidget', () => {
       'object-1',
     );
 
-    const withoutObjectId = createDefaultStandaloneRichTextWidget(
+    const withoutObjectId = computeDefaultStandaloneRichTextWidget(
       'w2',
       't1',
       { blocknote: '[]' },

packages/twenty-front/src/modules/page-layout/utils/computeDefaultFieldWidget.ts

@@ -6,7 +6,7 @@ import {
   WidgetType,
 } from '~/generated-metadata/graphql';
 
-export const createDefaultFieldWidget = ({
+export const computeDefaultFieldWidget = ({
   id,
   pageLayoutTabId,
   fieldMetadataId,

packages/twenty-front/src/modules/page-layout/utils/computeDefaultFieldsWidget.ts

@@ -5,7 +5,7 @@ import {
   WidgetType,
 } from '~/generated-metadata/graphql';
 
-export const createDefaultFieldsWidget = ({
+export const computeDefaultFieldsWidget = ({
   id,
   pageLayoutTabId,
   viewId,

packages/twenty-front/src/modules/page-layout/utils/computeDefaultFrontComponentWidget.ts

@@ -1,12 +1,12 @@
+import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 import {
   type GridPosition,
   PageLayoutTabLayoutMode,
   WidgetConfigurationType,
   WidgetType,
 } from '~/generated-metadata/graphql';
-import { type PageLayoutWidget } from '@/page-layout/types/PageLayoutWidget';
 
-export const createDefaultFrontComponentWidget = (
+export const computeDefaultFrontComponentWidget = (
   id: string,
   pageLayoutTabId: string,
   title: string,

packages/twenty-front/src/modules/page-layout/utils/computeDefaultGraphWidget.ts

@@ -48,7 +48,7 @@ type CreateDefaultGraphWidgetParams = {
   firstDayOfTheWeek?: number;
 };
 
-export const createDefaultGraphWidget = ({
+export const computeDefaultGraphWidget = ({
   id,
   pageLayoutTabId,
   title,

packages/twenty-front/src/modules/page-layout/utils/computeDefaultIframeWidget.ts

@@ -6,7 +6,7 @@ import {
   WidgetType,
 } from '~/generated-metadata/graphql';
 
-export const createDefaultIframeWidget = (
+export const computeDefaultIframeWidget = (
   id: string,
   pageLayoutTabId: string,
   title: string,

packages/twenty-front/src/modules/page-layout/utils/computeDefaultStandaloneRichTextWidget.ts

@@ -7,7 +7,7 @@ import {
   WidgetType,
 } from '~/generated-metadata/graphql';
 
-export const createDefaultStandaloneRichTextWidget = (
+export const computeDefaultStandaloneRichTextWidget = (
   id: string,
   pageLayoutTabId: string,
   body: RichTextBody,

packages/twenty-front/src/modules/page-layout/widgets/components/DashboardWidgetPlaceholder.tsx

@@ -1,6 +1,6 @@
 import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
-import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/useIsPageLayoutInEditMode';
-import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
+import { useIsPageLayoutInEditMode } from '@/page-layout/hooks/common/useIsPageLayoutInEditMode';
+import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/edit/useSetIsPageLayoutInEditMode';
 import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
 import { WidgetCard } from '@/page-layout/widgets/widget-card/components/WidgetCard';
 import { WidgetCardHeader } from '@/page-layout/widgets/widget-card/components/WidgetCardHeader';

packages/twenty-front/src/modules/page-layout/widgets/components/RecordPageAddWidgetSection.tsx

@@ -1,6 +1,6 @@
-import { useCreateRecordPageFieldWidget } from '@/page-layout/hooks/useCreateRecordPageFieldWidget';
-import { useCreateRecordPageFieldsWidget } from '@/page-layout/hooks/useCreateRecordPageFieldsWidget';
-import { useNavigateToMoreWidgets } from '@/page-layout/hooks/useNavigateToMoreWidgets';
+import { useCreateRecordPageFieldWidget } from '@/page-layout/hooks/edit/useCreateRecordPageFieldWidget';
+import { useCreateRecordPageFieldsWidget } from '@/page-layout/hooks/edit/useCreateRecordPageFieldsWidget';
+import { useNavigateToMoreWidgets } from '@/page-layout/hooks/edit/useNavigateToMoreWidgets';
 import { styled } from '@linaria/react';
 import { t } from '@lingui/core/macro';
 import { useContext } from 'react';

packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldEdit.tsx

@@ -15,7 +15,7 @@ import { isFieldMorphRelation } from '@/object-record/record-field/ui/types/guar
 import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation';
 import { useRecordShowContainerActions } from '@/object-record/record-show/hooks/useRecordShowContainerActions';
 import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId';
-import { useResolveFieldMetadataIdFromNameOrId } from '@/page-layout/hooks/useResolveFieldMetadataIdFromNameOrId';
+import { useResolveFieldMetadataIdFromNameOrId } from '@/page-layout/hooks/common/useResolveFieldMetadataIdFromNameOrId';
 import { FieldWidgetEditAction } from '@/page-layout/widgets/field/components/FieldWidgetEditAction';
 import { FieldWidgetRelationEditAction } from '@/page-layout/widgets/field/components/FieldWidgetRelationEditAction';
 import { generateFieldWidgetInstanceId } from '@/page-layout/widgets/field/utils/generateFieldWidgetInstanceId';

packages/twenty-front/src/modules/page-layout/widgets/components/WidgetActionFieldSeeAll.tsx

@@ -4,7 +4,7 @@ import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadat
 import { formatFieldMetadataItemAsColumnDefinition } from '@/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition';
 import { type FieldRelationMetadata } from '@/object-record/record-field/ui/types/FieldMetadata';
 import { isFieldRelation } from '@/object-record/record-field/ui/types/guards/isFieldRelation';
-import { useResolveFieldMetadataIdFromNameOrId } from '@/page-layout/hooks/useResolveFieldMetadataIdFromNameOrId';
+import { useResolveFieldMetadataIdFromNameOrId } from '@/page-layout/hooks/common/useResolveFieldMetadataIdFromNameOrId';
 import { isFieldWidget } from '@/page-layout/widgets/field/utils/isFieldWidget';
 import { useCurrentWidget } from '@/page-layout/widgets/hooks/useCurrentWidget';
 import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';

packages/twenty-front/src/modules/page-layout/widgets/components/WidgetPlaceholder.tsx

@@ -1,4 +1,4 @@
-import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/useCurrentPageLayoutOrThrow';
+import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/common/useCurrentPageLayoutOrThrow';
 import { DashboardWidgetPlaceholder } from '@/page-layout/widgets/components/DashboardWidgetPlaceholder';
 import { PageLayoutType } from '~/generated-metadata/graphql';