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/usePageLayoutHandleLayoutChange.ts

@@ -1,16 +1,47 @@
+import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { getTabListInstanceIdFromPageLayoutId } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutId';
+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 { type Layout, type Layouts } from 'react-grid-layout';
 import { useRecoilCallback } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
-import { pageLayoutCurrentLayoutsState } from '../states/pageLayoutCurrentLayoutsState';
-import { pageLayoutDraftState } from '../states/pageLayoutDraftState';
-import { type PageLayoutWidgetWithData } from '../types/pageLayoutTypes';
+import { pageLayoutCurrentLayoutsComponentState } from '../states/pageLayoutCurrentLayoutsComponentState';
+import { pageLayoutDraftComponentState } from '../states/pageLayoutDraftComponentState';
 import { convertLayoutsToWidgets } from '../utils/convertLayoutsToWidgets';
 
-export const usePageLayoutHandleLayoutChange = (activeTabId: string | null) => {
+export const usePageLayoutHandleLayoutChange = (
+  pageLayoutIdFromProps?: string,
+) => {
+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+    pageLayoutIdFromProps,
+  );
+
+  const tabListInstanceId = getTabListInstanceIdFromPageLayoutId(pageLayoutId);
+
+  const activeTabIdState = useRecoilComponentCallbackState(
+    activeTabIdComponentState,
+    tabListInstanceId,
+  );
+
+  const pageLayoutCurrentLayoutsState = useRecoilComponentCallbackState(
+    pageLayoutCurrentLayoutsComponentState,
+    pageLayoutId,
+  );
+
+  const pageLayoutDraftState = useRecoilComponentCallbackState(
+    pageLayoutDraftComponentState,
+    pageLayoutId,
+  );
+
   const handleLayoutChange = useRecoilCallback(
     ({ snapshot, set }) =>
       (_: Layout[], allLayouts: Layouts) => {
+        const activeTabId = snapshot.getLoadable(activeTabIdState).getValue();
+
         if (!isDefined(activeTabId)) return;
+
         const currentTabLayouts = snapshot
           .getLoadable(pageLayoutCurrentLayoutsState)
           .getValue();
@@ -27,7 +58,9 @@ export const usePageLayoutHandleLayoutChange = (activeTabId: string | null) => {
         const currentTab = pageLayoutDraft.tabs.find(
           (tab) => tab.id === activeTabId,
         );
+
         if (!currentTab) return;
+
         const updatedWidgets = convertLayoutsToWidgets(
           currentTab.widgets,
           allLayouts,
@@ -38,7 +71,7 @@ export const usePageLayoutHandleLayoutChange = (activeTabId: string | null) => {
             ...prev,
             tabs: prev.tabs.map((tab) => {
               if (tab.id === activeTabId) {
-                const tabWidgets: PageLayoutWidgetWithData[] = updatedWidgets
+                const tabWidgets = updatedWidgets
                   .filter((w) => w.pageLayoutTabId === activeTabId)
                   .map((widget) => ({
                     id: widget.id,
@@ -65,7 +98,7 @@ export const usePageLayoutHandleLayoutChange = (activeTabId: string | null) => {
           }));
         }
       },
-    [activeTabId],
+    [activeTabIdState, pageLayoutCurrentLayoutsState, pageLayoutDraftState],
   );
 
   return { handleLayoutChange };