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/page-layout/hooks/useCreatePageLayoutIframeWidget.ts

@@ -1,21 +1,46 @@
-import { SETTINGS_PAGE_LAYOUT_TABS_INSTANCE_ID } from '@/page-layout/constants/SettingsPageLayoutTabsInstanceId';
-import { pageLayoutCurrentLayoutsState } from '@/page-layout/states/pageLayoutCurrentLayoutsState';
-import { pageLayoutDraftState } from '@/page-layout/states/pageLayoutDraftState';
-import { pageLayoutDraggedAreaState } from '@/page-layout/states/pageLayoutDraggedAreaState';
+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 PageLayoutWidgetWithData } from '@/page-layout/types/pageLayoutTypes';
 import { addWidgetToTab } from '@/page-layout/utils/addWidgetToTab';
-import { createUpdatedTabLayouts } from '@/page-layout/utils/createUpdatedTabLayouts';
 import { getDefaultWidgetPosition } from '@/page-layout/utils/getDefaultWidgetPosition';
+import { getTabListInstanceIdFromPageLayoutId } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutId';
+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 { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { useRecoilCallback } from 'recoil';
 import { v4 as uuidv4 } from 'uuid';
 import { WidgetType } from '~/generated/graphql';
 
-export const useCreatePageLayoutIframeWidget = () => {
+export const useCreatePageLayoutIframeWidget = (
+  pageLayoutIdFromProps?: string,
+) => {
+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+    pageLayoutIdFromProps,
+  );
+
   const activeTabId = useRecoilComponentValue(
     activeTabIdComponentState,
-    SETTINGS_PAGE_LAYOUT_TABS_INSTANCE_ID,
+    getTabListInstanceIdFromPageLayoutId(pageLayoutId),
+  );
+
+  const pageLayoutCurrentLayoutsState = useRecoilComponentCallbackState(
+    pageLayoutCurrentLayoutsComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutDraggedAreaState = useRecoilComponentCallbackState(
+    pageLayoutDraggedAreaComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutDraftState = useRecoilComponentCallbackState(
+    pageLayoutDraftComponentState,
+    pageLayoutId,
   );
 
   const createPageLayoutIframeWidget = useRecoilCallback(
@@ -24,6 +49,7 @@ export const useCreatePageLayoutIframeWidget = () => {
         const allTabLayouts = snapshot
           .getLoadable(pageLayoutCurrentLayoutsState)
           .getValue();
+
         const pageLayoutDraggedArea = snapshot
           .getLoadable(pageLayoutDraggedAreaState)
           .getValue();
@@ -68,11 +94,12 @@ export const useCreatePageLayoutIframeWidget = () => {
           h: position.h,
         };
 
-        const updatedLayouts = createUpdatedTabLayouts(
+        const updatedLayouts = getUpdatedTabLayouts(
           allTabLayouts,
           activeTabId,
           newLayout,
         );
+
         set(pageLayoutCurrentLayoutsState, updatedLayouts);
 
         set(pageLayoutDraftState, (prev) => ({
@@ -82,7 +109,12 @@ export const useCreatePageLayoutIframeWidget = () => {
 
         set(pageLayoutDraggedAreaState, null);
       },
-    [activeTabId],
+    [
+      activeTabId,
+      pageLayoutCurrentLayoutsState,
+      pageLayoutDraftState,
+      pageLayoutDraggedAreaState,
+    ],
   );
 
   return { createPageLayoutIframeWidget };