Page layout refactoring (#14535)

In this PR:
- Refactored the page layout renderer
- Converted all the states to component states
- Removed the page layout edition in settings

TODOs in next PRs:
- Fix bug with the drag selector not taking the scroll into account to
display the dragged area
- Readd the tab edition in edit mode

packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/useNavigatePageLayoutCommandMenu.ts

@@ -0,0 +1,42 @@
+import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
+import { getPageLayoutIcon } from '@/command-menu/pages/page-layout/utils/getPageLayoutIcon';
+import { getPageLayoutPageTitle } from '@/command-menu/pages/page-layout/utils/getPageLayoutPageTitle';
+import { type CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { useRecoilCallback } from 'recoil';
+import { isDefined } from 'twenty-shared/utils';
+import { type IconComponent } from 'twenty-ui/display';
+
+type NavigatePageLayoutCommandMenuProps = {
+  commandMenuPage:
+    | CommandMenuPages.PageLayoutWidgetTypeSelect
+    | CommandMenuPages.PageLayoutGraphTypeSelect
+    | CommandMenuPages.PageLayoutIframeConfig;
+  pageTitle?: string;
+  pageIcon?: IconComponent;
+};
+
+export const useNavigatePageLayoutCommandMenu = () => {
+  const { navigateCommandMenu } = useNavigateCommandMenu();
+
+  const navigatePageLayoutCommandMenu = useRecoilCallback(() => {
+    return ({
+      commandMenuPage,
+      pageTitle,
+      pageIcon,
+    }: NavigatePageLayoutCommandMenuProps) => {
+      navigateCommandMenu({
+        page: commandMenuPage,
+        pageTitle: isDefined(pageTitle)
+          ? pageTitle
+          : getPageLayoutPageTitle(commandMenuPage),
+        pageIcon: isDefined(pageIcon)
+          ? pageIcon
+          : getPageLayoutIcon(commandMenuPage),
+      });
+    };
+  }, [navigateCommandMenu]);
+
+  return {
+    navigatePageLayoutCommandMenu,
+  };
+};

packages/twenty-front/src/modules/command-menu/pages/page-layout/hooks/usePageLayoutFromContextStoreTargetedRecord.ts

@@ -0,0 +1,25 @@
+import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useRecoilValue } from 'recoil';
+
+export const usePageLayoutIdFromContextStoreTargetedRecord = () => {
+  const targetedRecordsRule = useRecoilComponentValue(
+    contextStoreTargetedRecordsRuleComponentState,
+  );
+
+  if (
+    !(
+      targetedRecordsRule.mode === 'selection' &&
+      targetedRecordsRule.selectedRecordIds.length === 1
+    )
+  ) {
+    throw new Error('Only one record should be selected');
+  }
+
+  const recordId: string = targetedRecordsRule.selectedRecordIds[0];
+
+  const record = useRecoilValue(recordStoreFamilyState(recordId));
+
+  return { pageLayoutId: record?.pageLayoutId };
+};