Link command menu items to specific page layout (#19706)

- Add a `pageLayoutId` foreign key to `CommandMenuItem`, allowing
command menu items to be scoped to a specific page layout instead of
being globally available
- Filter command menu items by the current page layout on the frontend.
Items with a `pageLayoutId` only appear when viewing that layout, while
items without one remain globally visible
- Create an effect to track the current page layout ID
- Include a seed example: a "Show Notification" command pinned to the
Star history standalone page layout

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-front/src/modules/app/effect-components/PageChangeEffect.tsx

@@ -32,6 +32,7 @@ import { useResetFocusStackToFocusItem } from '@/ui/utilities/focus/hooks/useRes
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
+import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState';
 import { useStore } from 'jotai';
 import { useCallback, useEffect, useState } from 'react';
 import {
@@ -44,6 +45,7 @@ import { AppBasePath, AppPath, SidePanelPages } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 import { AnalyticsType } from '~/generated-metadata/graphql';
 import { usePageChangeEffectNavigateLocation } from '~/hooks/usePageChangeEffectNavigateLocation';
+import { getPageLayoutIdForLocation } from '~/modules/app/utils/getPageLayoutIdForLocation';
 import { useInitializeQueryParamState } from '~/modules/app/hooks/useInitializeQueryParamState';
 import { isMatchingLocation } from '~/utils/isMatchingLocation';
 import { getPageTitleFromPath } from '~/utils/title-utils';
@@ -146,10 +148,15 @@ export const PageChangeEffect = () => {
     if (!previousLocation || previousLocation !== location.pathname) {
       setPreviousLocation(location.pathname);
       executeTasksOnAnyLocationChange();
-    } else {
-      return;
+
+      const newPageLayoutId = getPageLayoutIdForLocation({
+        location,
+        store,
+      });
+
+      store.set(currentPageLayoutIdState.atom, newPageLayoutId);
     }
-  }, [location, previousLocation, executeTasksOnAnyLocationChange]);
+  }, [location, previousLocation, executeTasksOnAnyLocationChange, store]);
 
   useEffect(() => {
     initializeQueryParamState();

packages/twenty-front/src/modules/app/utils/getPageLayoutIdForLocation.ts

@@ -0,0 +1,59 @@
+import { type getDefaultStore } from 'jotai';
+import { type Location, matchPath } from 'react-router-dom';
+import { AppPath, CoreObjectNameSingular } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
+
+import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objectMetadataItemFamilySelector';
+import { recordPageLayoutByObjectMetadataIdFamilySelector } from '@/page-layout/states/selectors/recordPageLayoutByObjectMetadataIdFamilySelector';
+import { getDefaultRecordPageLayoutId } from '@/page-layout/utils/getDefaultRecordPageLayoutId';
+
+const DASHBOARD_NAME_SINGULAR = CoreObjectNameSingular.Dashboard;
+
+export const getPageLayoutIdForLocation = ({
+  location,
+  store,
+}: {
+  location: Location;
+  store: ReturnType<typeof getDefaultStore>;
+}): string | null => {
+  const recordShowMatch = matchPath(AppPath.RecordShowPage, location.pathname);
+
+  if (isDefined(recordShowMatch?.params.objectNameSingular)) {
+    const objectNameSingular = recordShowMatch.params.objectNameSingular;
+
+    if (objectNameSingular === DASHBOARD_NAME_SINGULAR) {
+      return null;
+    }
+
+    const objectMetadataItem = store.get(
+      objectMetadataItemFamilySelector.selectorFamily({
+        objectName: objectNameSingular,
+        objectNameType: 'singular',
+      }),
+    );
+
+    if (!isDefined(objectMetadataItem)) {
+      return null;
+    }
+
+    const recordPageLayout = store.get(
+      recordPageLayoutByObjectMetadataIdFamilySelector.selectorFamily({
+        objectMetadataId: objectMetadataItem.id,
+      }),
+    );
+
+    return isDefined(recordPageLayout)
+      ? recordPageLayout.id
+      : getDefaultRecordPageLayoutId({
+          targetObjectNameSingular: objectNameSingular,
+        });
+  }
+
+  const pageLayoutMatch = matchPath(AppPath.PageLayoutPage, location.pathname);
+
+  if (isDefined(pageLayoutMatch?.params.pageLayoutId)) {
+    return pageLayoutMatch.params.pageLayoutId;
+  }
+
+  return null;
+};

packages/twenty-front/src/modules/command-menu-item/components/StandalonePageCommandMenu.tsx

@@ -5,7 +5,9 @@ import { PinnedCommandMenuItemButtons } from '@/command-menu-item/display/compon
 import { CommandMenuItemEditButton } from '@/command-menu-item/edit/components/CommandMenuItemEditButton';
 import { commandMenuItemsSelector } from '@/command-menu-item/states/commandMenuItemsSelector';
 import { doesCommandMenuItemMatchObjectMetadataId } from '@/command-menu-item/utils/doesCommandMenuItemMatchObjectMetadataId';
+import { doesCommandMenuItemMatchPageLayoutId } from '@/command-menu-item/utils/doesCommandMenuItemMatchPageLayoutId';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
+import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useStore } from 'jotai';
 import { useMemo } from 'react';
@@ -22,6 +24,7 @@ export const StandalonePageCommandMenu = () => {
   const isMobile = useIsMobile();
   const commandMenuItems = useAtomStateValue(commandMenuItemsSelector);
   const currentWorkspace = useAtomStateValue(currentWorkspaceState);
+  const currentPageLayoutId = useAtomStateValue(currentPageLayoutIdState);
   const { objectMetadataItems } = useObjectMetadataItems();
 
   const commandMenuContextApi = useMemo<CommandMenuContextApi>(() => {
@@ -83,6 +86,7 @@ export const StandalonePageCommandMenu = () => {
           item.availabilityType !==
             CommandMenuItemAvailabilityType.GLOBAL_OBJECT_CONTEXT,
       )
+      .filter(doesCommandMenuItemMatchPageLayoutId(currentPageLayoutId))
       .filter((item) =>
         evaluateConditionalAvailabilityExpression(
           item.conditionalAvailabilityExpression,
@@ -92,7 +96,7 @@ export const StandalonePageCommandMenu = () => {
       .sort(
         (firstItem, secondItem) => firstItem.position - secondItem.position,
       );
-  }, [commandMenuItems, commandMenuContextApi]);
+  }, [commandMenuItems, commandMenuContextApi, currentPageLayoutId]);
 
   return (
     <CommandMenuContext.Provider

packages/twenty-front/src/modules/command-menu-item/contexts/CommandMenuContextProviderContent.tsx

@@ -4,7 +4,9 @@ import {
 } from '@/command-menu-item/contexts/CommandMenuContext';
 import { commandMenuItemsSelector } from '@/command-menu-item/states/commandMenuItemsSelector';
 import { doesCommandMenuItemMatchObjectMetadataId } from '@/command-menu-item/utils/doesCommandMenuItemMatchObjectMetadataId';
+import { doesCommandMenuItemMatchPageLayoutId } from '@/command-menu-item/utils/doesCommandMenuItemMatchPageLayoutId';
 import { doesCommandMenuItemMatchPageType } from '@/command-menu-item/utils/doesCommandMenuItemMatchPageType';
+import { currentPageLayoutIdState } from '@/page-layout/states/currentPageLayoutIdState';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { useMemo } from 'react';
 import { type CommandMenuContextApi } from 'twenty-shared/types';
@@ -24,6 +26,7 @@ export const CommandMenuContextProviderContent = ({
   commandMenuContextApi,
 }: CommandMenuContextProviderContentProps) => {
   const commandMenuItems = useAtomStateValue(commandMenuItemsSelector);
+  const currentPageLayoutId = useAtomStateValue(currentPageLayoutIdState);
 
   const filteredCommandMenuItems = useMemo(() => {
     const currentObjectMetadataItemId =
@@ -34,6 +37,7 @@ export const CommandMenuContextProviderContent = ({
         doesCommandMenuItemMatchObjectMetadataId(currentObjectMetadataItemId),
       )
       .filter(doesCommandMenuItemMatchPageType(commandMenuContextApi.pageType))
+      .filter(doesCommandMenuItemMatchPageLayoutId(currentPageLayoutId))
       .filter((item) =>
         evaluateConditionalAvailabilityExpression(
           item.conditionalAvailabilityExpression,
@@ -43,7 +47,7 @@ export const CommandMenuContextProviderContent = ({
       .sort(
         (firstItem, secondItem) => firstItem.position - secondItem.position,
       );
-  }, [commandMenuItems, commandMenuContextApi]);
+  }, [commandMenuItems, commandMenuContextApi, currentPageLayoutId]);
 
   return (
     <CommandMenuContext.Provider

packages/twenty-front/src/modules/command-menu-item/graphql/fragments/commandMenuItemFragment.ts

@@ -28,5 +28,6 @@ export const COMMAND_MENU_ITEM_FRAGMENT = gql`
     conditionalAvailabilityExpression
     availabilityType
     availabilityObjectMetadataId
+    pageLayoutId
   }
 `;

packages/twenty-front/src/modules/command-menu-item/utils/doesCommandMenuItemMatchPageLayoutId.ts

@@ -0,0 +1,6 @@
+import { isDefined } from 'twenty-shared/utils';
+import { type CommandMenuItemFieldsFragment } from '~/generated-metadata/graphql';
+
+export const doesCommandMenuItemMatchPageLayoutId =
+  (pageLayoutId: string | null) => (item: CommandMenuItemFieldsFragment) =>
+    !isDefined(item.pageLayoutId) || item.pageLayoutId === pageLayoutId;

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

@@ -95,7 +95,9 @@ export const useSetIsPageLayoutInEditMode = (pageLayoutIdFromProps: string) => {
 
       store.set(contextStoreIsFullTabWidgetInEditModeState, value);
 
-      store.set(currentPageLayoutIdState.atom, value ? pageLayoutId : null);
+      if (value) {
+        store.set(currentPageLayoutIdState.atom, pageLayoutId);
+      }
     },
     [
       isDashboardInEditModeState,