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

@@ -1,15 +1,29 @@
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
+import { useRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentState';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
-import { pageLayoutDraftState } from '../states/pageLayoutDraftState';
-import { pageLayoutPersistedState } from '../states/pageLayoutPersistedState';
+import { pageLayoutDraftComponentState } from '../states/pageLayoutDraftComponentState';
+import { pageLayoutPersistedComponentState } from '../states/pageLayoutPersistedComponentState';
 
-export const usePageLayoutDraftState = () => {
-  const [pageLayoutDraft, setPageLayoutDraft] =
-    useRecoilState(pageLayoutDraftState);
-  const pageLayoutPersisted = useRecoilValue(pageLayoutPersistedState);
+export const usePageLayoutDraftState = (pageLayoutIdFromProps?: string) => {
+  const pageLayoutId = useAvailableComponentInstanceIdOrThrow(
+    PageLayoutComponentInstanceContext,
+    pageLayoutIdFromProps,
+  );
+
+  const [pageLayoutDraft, setPageLayoutDraft] = useRecoilComponentState(
+    pageLayoutDraftComponentState,
+    pageLayoutId,
+  );
+  const pageLayoutPersisted = useRecoilComponentValue(
+    pageLayoutPersistedComponentState,
+    pageLayoutId,
+  );
 
   const isDirty = pageLayoutPersisted
     ? !isDeeplyEqual(pageLayoutDraft, {
+        id: pageLayoutPersisted.id,
         name: pageLayoutPersisted.name,
         type: pageLayoutPersisted.type,
         objectMetadataId: pageLayoutPersisted.objectMetadataId,