feat: add command menu item to layout customization

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

@@ -0,0 +1,69 @@
+import { styled } from '@linaria/react';
+import { motion } from 'framer-motion';
+import { useContext } from 'react';
+import { type IconComponent } from 'twenty-ui/display';
+import { ThemeContext } from 'twenty-ui/theme-constants';
+
+const StyledContainer = styled.div<{ size: number }>`
+  height: ${({ size }) => size}px;
+  overflow: hidden;
+  position: relative;
+  width: ${({ size }) => size}px;
+`;
+
+const StyledLayer = styled(motion.div)`
+  align-items: center;
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  position: absolute;
+`;
+
+type AnimatedIconCrossfadeProps = {
+  isActive: boolean;
+  ActiveIcon: IconComponent;
+  InactiveIcon: IconComponent;
+  size?: number;
+};
+
+export const AnimatedIconCrossfade = ({
+  isActive,
+  ActiveIcon,
+  InactiveIcon,
+  size,
+}: AnimatedIconCrossfadeProps) => {
+  const { theme } = useContext(ThemeContext);
+
+  const iconSize = size ?? theme.icon.size.sm;
+
+  return (
+    <StyledContainer size={iconSize}>
+      <StyledLayer
+        initial={false}
+        animate={{
+          opacity: isActive ? 0 : 1,
+          scale: isActive ? 0.85 : 1,
+        }}
+        transition={{
+          duration: theme.animation.duration.fast,
+          ease: 'easeInOut',
+        }}
+      >
+        <InactiveIcon size={iconSize} />
+      </StyledLayer>
+      <StyledLayer
+        initial={false}
+        animate={{
+          opacity: isActive ? 1 : 0,
+          scale: isActive ? 1 : 0.85,
+        }}
+        transition={{
+          duration: theme.animation.duration.fast,
+          ease: 'easeInOut',
+        }}
+      >
+        <ActiveIcon size={iconSize} />
+      </StyledLayer>
+    </StyledContainer>
+  );
+};

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

@@ -1,9 +1,13 @@
 import { PageHeaderCommandMenuButtons } from '@/command-menu-item/components/PageHeaderCommandMenuButtons';
+import { PinnedCommandMenuItemButtons } from '@/command-menu-item/server-items/display/components/PinnedCommandMenuItemButtons';
 import { RecordIndexCommandMenuDropdown } from '@/command-menu-item/components/RecordIndexCommandMenuDropdown';
 import { CommandMenuContextProvider } from '@/command-menu-item/contexts/CommandMenuContextProvider';
+import { CommandMenuItemEditButton } from '@/command-menu-item/server-items/edit/components/CommandMenuItemEditButton';
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 import { useIsMobile } from 'twenty-ui/utilities';
 
 export const RecordIndexCommandMenu = () => {
@@ -13,6 +17,9 @@ export const RecordIndexCommandMenu = () => {
   );
 
   const isMobile = useIsMobile();
+  const isCommandMenuItemEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IS_COMMAND_MENU_ITEM_ENABLED,
+  );
 
   return (
     <>
@@ -23,7 +30,12 @@ export const RecordIndexCommandMenu = () => {
             displayType="button"
             containerType="index-page-header"
           >
-            {!isMobile && <PageHeaderCommandMenuButtons />}
+            {!isMobile &&
+              (isCommandMenuItemEnabled ? (
+                <PinnedCommandMenuItemButtons />
+              ) : (
+                <PageHeaderCommandMenuButtons />
+              ))}
           </CommandMenuContextProvider>
           <CommandMenuContextProvider
             isInSidePanel={false}
@@ -32,6 +44,7 @@ export const RecordIndexCommandMenu = () => {
           >
             <RecordIndexCommandMenuDropdown />
           </CommandMenuContextProvider>
+          <CommandMenuItemEditButton />
         </>
       )}
     </>

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

@@ -1,9 +1,13 @@
 import { PageHeaderCommandMenuButtons } from '@/command-menu-item/components/PageHeaderCommandMenuButtons';
+import { PinnedCommandMenuItemButtons } from '@/command-menu-item/server-items/display/components/PinnedCommandMenuItemButtons';
 import { CommandMenuContextProvider } from '@/command-menu-item/contexts/CommandMenuContextProvider';
+import { CommandMenuItemEditButton } from '@/command-menu-item/server-items/edit/components/CommandMenuItemEditButton';
 import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
 import { useIsMobile } from 'twenty-ui/utilities';
 
 export const RecordShowCommandMenu = () => {
@@ -22,17 +26,28 @@ export const RecordShowCommandMenu = () => {
     contextStoreTargetedRecordsRule.selectedRecordIds.length === 1;
 
   const isMobile = useIsMobile();
+  const isCommandMenuItemEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IS_COMMAND_MENU_ITEM_ENABLED,
+  );
 
   return (
     <>
       {hasSelectedRecord && contextStoreCurrentObjectMetadataItemId && (
-        <CommandMenuContextProvider
-          isInSidePanel={false}
-          displayType="button"
-          containerType="show-page-header"
-        >
-          {!isMobile && <PageHeaderCommandMenuButtons />}
-        </CommandMenuContextProvider>
+        <>
+          <CommandMenuContextProvider
+            isInSidePanel={false}
+            displayType="button"
+            containerType="show-page-header"
+          >
+            {!isMobile &&
+              (isCommandMenuItemEnabled ? (
+                <PinnedCommandMenuItemButtons />
+              ) : (
+                <PageHeaderCommandMenuButtons />
+              ))}
+          </CommandMenuContextProvider>
+          <CommandMenuItemEditButton />
+        </>
       )}
     </>
   );

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

@@ -1,6 +1,6 @@
 import { type CommandMenuContextType } from '@/command-menu-item/contexts/CommandMenuContext';
 import { CommandMenuContextProviderLegacy } from '@/command-menu-item/contexts/CommandMenuContextProviderLegacy';
-import { CommandMenuContextProviderServerItems } from '@/command-menu-item/server-items/contexts/CommandMenuContextProviderServerItems';
+import { CommandMenuContextProviderServerItems } from '@/command-menu-item/server-items/common/contexts/CommandMenuContextProviderServerItems';
 import { type EnrichedObjectMetadataItem } from '@/object-metadata/types/EnrichedObjectMetadataItem';
 import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { FeatureFlagKey } from '~/generated-metadata/graphql';

packages/twenty-front/src/modules/command-menu-item/server-items/contexts/CommandMenuContextProviderServerItems.tsx → packages/twenty-front/src/modules/command-menu-item/server-items/common/contexts/CommandMenuContextProviderServerItems.tsx

@@ -1,8 +1,8 @@
 import { CoreObjectNameSingular } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 
-import { useCommandMenuContextApi } from '@/command-menu-item/server-items/hooks/useCommandMenuContextApi';
 import { type CommandMenuContextType } from '@/command-menu-item/contexts/CommandMenuContext';
+import { useCommandMenuContextApi } from '@/command-menu-item/server-items/common/hooks/useCommandMenuContextApi';
 
 import { CommandMenuContextProviderServerItemsContent } from './CommandMenuContextProviderServerItemsContent';
 import { CommandMenuContextProviderServerItemsWithWorkflowEnrichment } from './CommandMenuContextProviderServerItemsWithWorkflowEnrichment';
@@ -20,7 +20,9 @@ export const CommandMenuContextProviderServerItems = ({
   containerType,
   children,
 }: CommandMenuContextProviderServerItemsProps) => {
-  const commandMenuContextApi = useCommandMenuContextApi();
+  const commandMenuContextApi = useCommandMenuContextApi({
+    isInSidePanel,
+  });
 
   const currentObjectNameSingular =
     commandMenuContextApi.objectMetadataItem.nameSingular;

packages/twenty-front/src/modules/command-menu-item/server-items/contexts/CommandMenuContextProviderServerItemsContent.tsx → packages/twenty-front/src/modules/command-menu-item/server-items/common/contexts/CommandMenuContextProviderServerItemsContent.tsx

@@ -2,7 +2,7 @@ import {
   CommandMenuContext,
   type CommandMenuContextType,
 } from '@/command-menu-item/contexts/CommandMenuContext';
-import { useCommandMenuItemsFromBackend } from '@/command-menu-item/server-items/hooks/useCommandMenuItemsFromBackend';
+import { useCommandMenuItemsFromBackend } from '@/command-menu-item/server-items/common/hooks/useCommandMenuItemsFromBackend';
 import { type CommandMenuContextApi } from 'twenty-shared/types';
 
 type CommandMenuContextProviderServerItemsContentProps = {

packages/twenty-front/src/modules/command-menu-item/server-items/contexts/CommandMenuContextProviderServerItemsWithWorkflowEnrichment.tsx → packages/twenty-front/src/modules/command-menu-item/server-items/common/contexts/CommandMenuContextProviderServerItemsWithWorkflowEnrichment.tsx

@@ -2,7 +2,7 @@ import { type CommandMenuContextApi } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 
 import { type CommandMenuContextType } from '@/command-menu-item/contexts/CommandMenuContext';
-import { useWorkflowsWithCurrentVersions } from '@/command-menu-item/server-items/hooks/useWorkflowsWithCurrentVersions';
+import { useWorkflowsWithCurrentVersions } from '@/command-menu-item/server-items/common/hooks/useWorkflowsWithCurrentVersions';
 
 import { CommandMenuContextProviderServerItemsContent } from './CommandMenuContextProviderServerItemsContent';
 

packages/twenty-front/src/modules/command-menu-item/server-items/common/graphql/mutations/updateCommandMenuItem.ts

@@ -0,0 +1,11 @@
+import { COMMAND_MENU_ITEM_FRAGMENT } from '@/command-menu-item/graphql/fragments/commandMenuItemFragment';
+import { gql } from '@apollo/client';
+
+export const UPDATE_COMMAND_MENU_ITEM = gql`
+  ${COMMAND_MENU_ITEM_FRAGMENT}
+  mutation UpdateCommandMenuItem($input: UpdateCommandMenuItemInput!) {
+    updateCommandMenuItem(input: $input) {
+      ...CommandMenuItemFields
+    }
+  }
+`;

packages/twenty-front/src/modules/command-menu-item/server-items/hooks/useCommandMenuContextApi.ts → packages/twenty-front/src/modules/command-menu-item/server-items/common/hooks/useCommandMenuContextApi.ts

@@ -1,6 +1,6 @@
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { objectPermissionsFamilySelector } from '@/auth/states/objectPermissionsFamilySelector';
-import { CommandMenuContext } from '@/command-menu-item/contexts/CommandMenuContext';
+import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
 import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
 import { contextStoreCurrentViewTypeComponentState } from '@/context-store/states/contextStoreCurrentViewTypeComponentState';
 import { contextStoreIsPageInEditModeComponentState } from '@/context-store/states/contextStoreIsPageInEditModeComponentState';
@@ -13,24 +13,28 @@ import { useObjectPermissionsForObject } from '@/object-record/hooks/useObjectPe
 import { hasAnySoftDeleteFilterOnViewComponentSelector } from '@/object-record/record-filter/states/hasAnySoftDeleteFilterOnView';
 import { useRecordIndexIdFromCurrentContextStore } from '@/object-record/record-index/hooks/useRecordIndexIdFromCurrentContextStore';
 import { recordStoreRecordsSelector } from '@/object-record/record-store/states/selectors/recordStoreRecordsSelector';
+import { sidePanelPageState } from '@/side-panel/states/sidePanelPageState';
 import { useAtomComponentSelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentSelectorValue';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
 import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
 import { isNonEmptyArray } from '@sniptt/guards';
-import { useStore } from 'jotai';
-import { useContext } from 'react';
+import { useAtomValue, useStore } from 'jotai';
 import {
   CommandMenuContextApiPageType,
+  SidePanelPages,
   type CommandMenuContextApi,
 } from 'twenty-shared/types';
 import { isDefined } from 'twenty-shared/utils';
 
-export const useCommandMenuContextApi = (): CommandMenuContextApi => {
+// Display-only hook. For the edit page, use useCommandMenuContextApiForEdition.
+export const useCommandMenuContextApi = ({
+  isInSidePanel,
+}: {
+  isInSidePanel: boolean;
+}): CommandMenuContextApi => {
   const store = useStore();
 
-  const { isInSidePanel } = useContext(CommandMenuContext);
-
   const contextStoreCurrentObjectMetadataItemId = useAtomComponentStateValue(
     contextStoreCurrentObjectMetadataItemIdComponentState,
   );
@@ -39,32 +43,70 @@ export const useCommandMenuContextApi = (): CommandMenuContextApi => {
     contextStoreTargetedRecordsRuleComponentState,
   );
 
+  const contextStoreNumberOfSelectedRecords = useAtomComponentStateValue(
+    contextStoreNumberOfSelectedRecordsComponentState,
+  );
+
+  const mainContextStoreTargetedRecordsRule = useAtomValue(
+    contextStoreTargetedRecordsRuleComponentState.atomFamily({
+      instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
+    }),
+  );
+
+  const mainContextStoreNumberOfSelectedRecords = useAtomValue(
+    contextStoreNumberOfSelectedRecordsComponentState.atomFamily({
+      instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
+    }),
+  );
+
+  const mainContextStoreCurrentObjectMetadataItemId = useAtomValue(
+    contextStoreCurrentObjectMetadataItemIdComponentState.atomFamily({
+      instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID,
+    }),
+  );
+
   const { objectMetadataItems } = useObjectMetadataItems();
 
+  const sidePanelPage = useAtomStateValue(sidePanelPageState);
+
+  const shouldUseMainContext =
+    isInSidePanel &&
+    (sidePanelPage === SidePanelPages.CommandMenuDisplay ||
+      sidePanelPage === SidePanelPages.CommandMenuEdit);
+
+  const effectiveObjectMetadataItemId = shouldUseMainContext
+    ? mainContextStoreCurrentObjectMetadataItemId
+    : contextStoreCurrentObjectMetadataItemId;
+
+  const effectiveTargetedRecordsRule = shouldUseMainContext
+    ? mainContextStoreTargetedRecordsRule
+    : contextStoreTargetedRecordsRule;
+
+  const effectiveNumberOfSelectedRecords = shouldUseMainContext
+    ? mainContextStoreNumberOfSelectedRecords
+    : contextStoreNumberOfSelectedRecords;
+
   const objectMetadataItem = objectMetadataItems.find(
-    (item) => item.id === contextStoreCurrentObjectMetadataItemId,
+    (item) => item.id === effectiveObjectMetadataItemId,
   );
 
   const { navigationMenuItems } = useNavigationMenuItemsData();
 
   const recordIds =
-    contextStoreTargetedRecordsRule.mode === 'selection'
-      ? contextStoreTargetedRecordsRule.selectedRecordIds
+    effectiveTargetedRecordsRule.mode === 'selection'
+      ? effectiveTargetedRecordsRule.selectedRecordIds
       : undefined;
 
-  const favoriteRecordIds = (() => {
-    if (!isNonEmptyArray(recordIds) || !isDefined(objectMetadataItem)) {
-      return [];
-    }
-
-    return recordIds.filter((recordId) =>
-      navigationMenuItems?.some(
-        (item) =>
-          item.targetRecordId === recordId &&
-          item.targetObjectMetadataId === objectMetadataItem.id,
-      ),
-    );
-  })();
+  const favoriteRecordIds =
+    !isNonEmptyArray(recordIds) || !isDefined(objectMetadataItem)
+      ? []
+      : recordIds.filter((recordId) =>
+          navigationMenuItems?.some(
+            (item) =>
+              item.targetRecordId === recordId &&
+              item.targetObjectMetadataId === objectMetadataItem.id,
+          ),
+        );
 
   const selectedRecords = useAtomFamilySelectorValue(
     recordStoreRecordsSelector,
@@ -107,11 +149,7 @@ export const useCommandMenuContextApi = (): CommandMenuContextApi => {
       ? CommandMenuContextApiPageType.RECORD_PAGE
       : CommandMenuContextApiPageType.INDEX_PAGE;
 
-  const contextStoreNumberOfSelectedRecords = useAtomComponentStateValue(
-    contextStoreNumberOfSelectedRecordsComponentState,
-  );
-
-  const isSelectAll = contextStoreTargetedRecordsRule.mode === 'exclusion';
+  const isSelectAll = effectiveTargetedRecordsRule.mode === 'exclusion';
 
   const currentWorkspace = useAtomStateValue(currentWorkspaceState);
 
@@ -143,7 +181,7 @@ export const useCommandMenuContextApi = (): CommandMenuContextApi => {
     favoriteRecordIds,
     isSelectAll,
     hasAnySoftDeleteFilterOnView,
-    numberOfSelectedRecords: contextStoreNumberOfSelectedRecords,
+    numberOfSelectedRecords: effectiveNumberOfSelectedRecords,
     objectPermissions,
     selectedRecords,
     featureFlags,