[Dashboards] Fix page layout navigation edit mode sync (#17478)

navigating away - 

before - 


https://github.com/user-attachments/assets/ffd4c592-cf6d-403c-8aa2-9f55692fac65


after - 


https://github.com/user-attachments/assets/fc298e20-21ac-4f2f-b52a-8ecfdfd4eb38

new dashbaord - 

before - 


https://github.com/user-attachments/assets/f9a2d7ab-6b5b-41c3-b993-33745ab61683


after -


https://github.com/user-attachments/assets/cad68c35-6dfa-4fa2-ab9b-890900be3444




empty page layout - 

before - 



https://github.com/user-attachments/assets/27a5b61b-cd0c-4786-a461-e28f1e348822



after - 


https://github.com/user-attachments/assets/213e5242-493b-45de-a622-cf1463bb6380

packages/twenty-front/src/modules/app/hooks/useExecuteTasksOnAnyLocationChange.ts

@@ -2,14 +2,76 @@ import { useRecoilCallback } from 'recoil';
 
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreIsPageInEditModeComponentState } from '@/context-store/states/contextStoreIsPageInEditModeComponentState';
+import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState';
+import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
+import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
+import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
+import { pageLayoutIsInitializedComponentState } from '@/page-layout/states/pageLayoutIsInitializedComponentState';
+import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';
+import { convertPageLayoutToTabLayouts } from '@/page-layout/utils/convertPageLayoutToTabLayouts';
 import { useCloseAnyOpenDropdown } from '@/ui/layout/dropdown/hooks/useCloseAnyOpenDropdown';
+import { isDefined } from 'twenty-shared/utils';
 
 export const useExecuteTasksOnAnyLocationChange = () => {
   const { closeAnyOpenDropdown } = useCloseAnyOpenDropdown();
 
-  const resetIsPageInEditMode = useRecoilCallback(
-    ({ set }) =>
+  const resetPageLayoutEditMode = useRecoilCallback(
+    ({ set, snapshot }) =>
       () => {
+        const pageLayoutId = snapshot
+          .getLoadable(currentPageLayoutIdState)
+          .getValue();
+
+        if (isDefined(pageLayoutId)) {
+          const pageLayoutPersisted = snapshot
+            .getLoadable(
+              pageLayoutPersistedComponentState.atomFamily({
+                instanceId: pageLayoutId,
+              }),
+            )
+            .getValue();
+
+          if (isDefined(pageLayoutPersisted)) {
+            set(
+              pageLayoutDraftComponentState.atomFamily({
+                instanceId: pageLayoutId,
+              }),
+              {
+                id: pageLayoutPersisted.id,
+                name: pageLayoutPersisted.name,
+                type: pageLayoutPersisted.type,
+                objectMetadataId: pageLayoutPersisted.objectMetadataId,
+                tabs: pageLayoutPersisted.tabs,
+              },
+            );
+
+            const tabLayouts =
+              convertPageLayoutToTabLayouts(pageLayoutPersisted);
+            set(
+              pageLayoutCurrentLayoutsComponentState.atomFamily({
+                instanceId: pageLayoutId,
+              }),
+              tabLayouts,
+            );
+          }
+
+          set(
+            isPageLayoutInEditModeComponentState.atomFamily({
+              instanceId: pageLayoutId,
+            }),
+            false,
+          );
+
+          set(
+            pageLayoutIsInitializedComponentState.atomFamily({
+              instanceId: pageLayoutId,
+            }),
+            false,
+          );
+
+          set(currentPageLayoutIdState, null);
+        }
+
         set(
           contextStoreIsPageInEditModeComponentState.atomFamily({
             instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
@@ -27,7 +89,7 @@ export const useExecuteTasksOnAnyLocationChange = () => {
    */
   const executeTasksOnAnyLocationChange = () => {
     closeAnyOpenDropdown();
-    resetIsPageInEditMode();
+    resetPageLayoutEditMode();
   };
 
   return { executeTasksOnAnyLocationChange };

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

@@ -1,5 +1,4 @@
 import { PageLayoutInitializationQueryEffect } from '@/page-layout/components/PageLayoutInitializationQueryEffect';
-
 import { PageLayoutRendererContent } from '@/page-layout/components/PageLayoutRendererContent';
 import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
 import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';

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

@@ -3,6 +3,7 @@ import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpe
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreIsPageInEditModeComponentState } from '@/context-store/states/contextStoreIsPageInEditModeComponentState';
 import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
+import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState';
 import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
@@ -32,6 +33,8 @@ export const useSetIsPageLayoutInEditMode = (pageLayoutIdFromProps: string) => {
 
         set(contextStoreIsFullTabWidgetInEditModeState, value);
 
+        set(currentPageLayoutIdState, value ? pageLayoutId : null);
+
         const isCommandMenuOpened = snapshot
           .getLoadable(isCommandMenuOpenedState)
           .getValue();
@@ -45,7 +48,11 @@ export const useSetIsPageLayoutInEditMode = (pageLayoutIdFromProps: string) => {
           );
         }
       },
-    [isPageLayoutInEditModeState, contextStoreIsFullTabWidgetInEditModeState],
+    [
+      isPageLayoutInEditModeState,
+      contextStoreIsFullTabWidgetInEditModeState,
+      pageLayoutId,
+    ],
   );
 
   return { setIsPageLayoutInEditMode };

packages/twenty-front/src/modules/page-layout/states/currentPageLayoutIdState.ts

@@ -0,0 +1,6 @@
+import { createState } from 'twenty-ui/utilities';
+
+export const currentPageLayoutIdState = createState<string | null>({
+  key: 'currentPageLayoutIdState',
+  defaultValue: null,
+});