fix: prevent tab synchronization between different records

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

@@ -3,8 +3,9 @@ import { PageLayoutRendererContent } from '@/page-layout/components/PageLayoutRe
 import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
 import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
 import { type PageLayout } from '@/page-layout/types/PageLayout';
-import { getTabListInstanceIdFromPageLayoutId } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutId';
+import { getTabListInstanceIdFromPageLayoutAndRecord } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutAndRecord';
 import { isPageLayoutEmpty } from '@/page-layout/utils/isPageLayoutEmpty';
+import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
 import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/contexts/TabListComponentInstanceContext';
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
@@ -19,6 +20,8 @@ export const PageLayoutRenderer = ({
   const { setIsPageLayoutInEditMode } =
     useSetIsPageLayoutInEditMode(pageLayoutId);
 
+  const { targetRecordIdentifier, layoutType } = useLayoutRenderingContext();
+
   const onInitialized = (pageLayout: PageLayout) => {
     if (isPageLayoutEmpty(pageLayout)) {
       setIsPageLayoutInEditMode(true);
@@ -27,6 +30,12 @@ export const PageLayoutRenderer = ({
     }
   };
 
+  const tabListInstanceId = getTabListInstanceIdFromPageLayoutAndRecord({
+    pageLayoutId,
+    layoutType,
+    targetRecordIdentifier,
+  });
+
   return (
     <PageLayoutComponentInstanceContext.Provider
       value={{
@@ -35,7 +44,7 @@ export const PageLayoutRenderer = ({
     >
       <TabListComponentInstanceContext.Provider
         value={{
-          instanceId: getTabListInstanceIdFromPageLayoutId(pageLayoutId),
+          instanceId: tabListInstanceId,
         }}
       >
         <PageLayoutInitializationQueryEffect

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

@@ -11,7 +11,7 @@ import { PageLayoutMainContent } from '@/page-layout/PageLayoutMainContent';
 import { isPageLayoutInEditModeComponentState } from '@/page-layout/states/isPageLayoutInEditModeComponentState';
 import { pageLayoutTabSettingsOpenTabIdComponentState } from '@/page-layout/states/pageLayoutTabSettingsOpenTabIdComponentState';
 import { getScrollWrapperInstanceIdFromPageLayoutId } from '@/page-layout/utils/getScrollWrapperInstanceIdFromPageLayoutId';
-import { getTabListInstanceIdFromPageLayoutId } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutId';
+import { getTabListInstanceIdFromPageLayoutAndRecord } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutAndRecord';
 import { getTabsByDisplayMode } from '@/page-layout/utils/getTabsByDisplayMode';
 import { getTabsWithVisibleWidgets } from '@/page-layout/utils/getTabsWithVisibleWidgets';
 import { sortTabsByPosition } from '@/page-layout/utils/sortTabsByPosition';
@@ -51,7 +51,8 @@ const StyledScrollWrapper = styled(ScrollWrapper)`
 export const PageLayoutRendererContent = () => {
   const { currentPageLayout } = useCurrentPageLayout();
 
-  const { isInRightDrawer } = useLayoutRenderingContext();
+  const { isInRightDrawer, layoutType, targetRecordIdentifier } =
+    useLayoutRenderingContext();
 
   const isPageLayoutInEditMode = useRecoilComponentValue(
     isPageLayoutInEditModeComponentState,
@@ -97,9 +98,11 @@ export const PageLayoutRendererContent = () => {
     isInRightDrawer,
   });
 
-  const tabListInstanceId = getTabListInstanceIdFromPageLayoutId(
-    currentPageLayout.id,
-  );
+  const tabListInstanceId = getTabListInstanceIdFromPageLayoutAndRecord({
+    pageLayoutId: currentPageLayout.id,
+    layoutType,
+    targetRecordIdentifier,
+  });
 
   const sortedTabs = sortTabsByPosition(tabsToRenderInTabList);
 

packages/twenty-front/src/modules/page-layout/utils/getTabListInstanceIdFromPageLayoutAndRecord.ts

@@ -0,0 +1,23 @@
+import { PageLayoutType } from '~/generated/graphql';
+import { type TargetRecordIdentifier } from '@/ui/layout/contexts/TargetRecordIdentifier';
+import { getTabListInstanceIdFromPageLayoutId } from './getTabListInstanceIdFromPageLayoutId';
+import { isDefined } from 'twenty-shared/utils';
+
+export const getTabListInstanceIdFromPageLayoutAndRecord = ({
+  pageLayoutId,
+  layoutType,
+  targetRecordIdentifier,
+}: {
+  pageLayoutId: string;
+  layoutType: PageLayoutType;
+  targetRecordIdentifier?: TargetRecordIdentifier;
+}) => {
+  // Include record ID in tab instance ID to prevent tab synchronization between different records
+  // Only for RECORD_PAGE layouts, as DASHBOARD layouts are standalone
+  const recordId =
+    layoutType === PageLayoutType.RECORD_PAGE
+      ? targetRecordIdentifier?.id
+      : undefined;
+  const baseInstanceId = getTabListInstanceIdFromPageLayoutId(pageLayoutId);
+  return isDefined(recordId) ? `${baseInstanceId}-${recordId}` : baseInstanceId;
+};