feat: add command menu item to layout customization

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

@@ -0,0 +1,65 @@
+import { styled } from '@linaria/react';
+import { motion } from 'framer-motion';
+import { useContext } from 'react';
+import { type IconComponent } from 'twenty-ui/display';
+import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
+
+type AnimatedIconCrossfadeProps = {
+  isToggled: boolean;
+  DefaultIcon: IconComponent;
+  ToggledIcon: IconComponent;
+};
+
+const StyledContainer = styled.div`
+  height: calc(${themeCssVariables.icon.size.sm} * 1px);
+  overflow: hidden;
+  position: relative;
+  width: calc(${themeCssVariables.icon.size.sm} * 1px);
+`;
+
+const StyledLayer = styled(motion.div)`
+  align-items: center;
+  display: flex;
+  inset: 0;
+  justify-content: center;
+  position: absolute;
+`;
+
+export const AnimatedIconCrossfade = ({
+  isToggled,
+  DefaultIcon,
+  ToggledIcon,
+}: AnimatedIconCrossfadeProps) => {
+  const { theme } = useContext(ThemeContext);
+
+  return (
+    <StyledContainer>
+      <StyledLayer
+        initial={false}
+        animate={{
+          opacity: isToggled ? 0 : 1,
+          scale: isToggled ? 0.85 : 1,
+        }}
+        transition={{
+          duration: theme.animation.duration.fast,
+          ease: 'easeInOut',
+        }}
+      >
+        <DefaultIcon size={theme.icon.size.sm} />
+      </StyledLayer>
+      <StyledLayer
+        initial={false}
+        animate={{
+          opacity: isToggled ? 1 : 0,
+          scale: isToggled ? 1 : 0.85,
+        }}
+        transition={{
+          duration: theme.animation.duration.fast,
+          ease: 'easeInOut',
+        }}
+      >
+        <ToggledIcon size={theme.icon.size.sm} />
+      </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/graphql/queries/findCommandMenuItemDefaultValues.ts

@@ -0,0 +1,13 @@
+import { gql } from '@apollo/client';
+
+export const FIND_COMMAND_MENU_ITEM_DEFAULT_VALUES = gql`
+  query FindCommandMenuItemDefaultValues($ids: [UUID!]!) {
+    commandMenuItemDefaultValues(ids: $ids) {
+      id
+      label
+      shortLabel
+      isPinned
+      position
+    }
+  }
+`;

packages/twenty-front/src/modules/command-menu-item/server-items/common/components/SidePanelCommandMenuDisplayPageEntry.tsx

@@ -0,0 +1,33 @@
+import { CommandMenuContextProvider } from '@/command-menu-item/contexts/CommandMenuContextProvider';
+import { SidePanelCommandMenuItemDisplayPage } from '@/command-menu-item/server-items/display/components/SidePanelCommandMenuItemDisplayPage';
+import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { SidePanelRootPage } from '@/side-panel/pages/root/components/SidePanelRootPage';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
+
+export const SidePanelCommandMenuDisplayPageEntry = () => {
+  const isCommandMenuItemEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IS_COMMAND_MENU_ITEM_ENABLED,
+  );
+
+  const pageContent = isCommandMenuItemEnabled ? (
+    <SidePanelCommandMenuItemDisplayPage />
+  ) : (
+    <SidePanelRootPage />
+  );
+
+  return (
+    <ContextStoreComponentInstanceContext.Provider
+      value={{ instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID }}
+    >
+      <CommandMenuContextProvider
+        isInSidePanel={true}
+        displayType="listItem"
+        containerType="command-menu-list"
+      >
+        {pageContent}
+      </CommandMenuContextProvider>
+    </ContextStoreComponentInstanceContext.Provider>
+  );
+};

packages/twenty-front/src/modules/command-menu-item/server-items/common/components/SidePanelCommandMenuEditPageEntry.tsx

@@ -0,0 +1,33 @@
+import { CommandMenuContextProvider } from '@/command-menu-item/contexts/CommandMenuContextProvider';
+import { SidePanelCommandMenuItemEditPage } from '@/command-menu-item/server-items/edit/components/SidePanelCommandMenuItemEditPage';
+import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
+import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
+import { SidePanelRootPage } from '@/side-panel/pages/root/components/SidePanelRootPage';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
+
+export const SidePanelCommandMenuEditPageEntry = () => {
+  const isCommandMenuItemEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IS_COMMAND_MENU_ITEM_ENABLED,
+  );
+
+  const pageContent = isCommandMenuItemEnabled ? (
+    <SidePanelCommandMenuItemEditPage />
+  ) : (
+    <SidePanelRootPage />
+  );
+
+  return (
+    <ContextStoreComponentInstanceContext.Provider
+      value={{ instanceId: MAIN_CONTEXT_STORE_INSTANCE_ID }}
+    >
+      <CommandMenuContextProvider
+        isInSidePanel={true}
+        displayType="listItem"
+        containerType="command-menu-list"
+      >
+        {pageContent}
+      </CommandMenuContextProvider>
+    </ContextStoreComponentInstanceContext.Provider>
+  );
+};

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/common/hooks/useCommandMenuContextApi.ts

@@ -0,0 +1,79 @@
+import { useCommandMenuFavoriteRecordIds } from '@/command-menu-item/server-items/common/hooks/useCommandMenuFavoriteRecordIds';
+import { useCommandMenuFeatureFlags } from '@/command-menu-item/server-items/common/hooks/useCommandMenuFeatureFlags';
+import { useCommandMenuObjectPermissions } from '@/command-menu-item/server-items/common/hooks/useCommandMenuObjectPermissions';
+import { useCommandMenuPageContext } from '@/command-menu-item/server-items/common/hooks/useCommandMenuPageContext';
+import { useCommandMenuTargetObjectPermissions } from '@/command-menu-item/server-items/common/hooks/useCommandMenuTargetObjectPermissions';
+import { contextStoreCurrentObjectMetadataItemIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataItemIdComponentState';
+import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
+import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
+import { recordStoreRecordsSelector } from '@/object-record/record-store/states/selectors/recordStoreRecordsSelector';
+import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { useAtomFamilySelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilySelectorValue';
+import { type CommandMenuContextApi } from 'twenty-shared/types';
+
+export const useCommandMenuContextApi = ({
+  isInSidePanel,
+}: {
+  isInSidePanel: boolean;
+}): CommandMenuContextApi => {
+  const contextStoreCurrentObjectMetadataItemId = useAtomComponentStateValue(
+    contextStoreCurrentObjectMetadataItemIdComponentState,
+  );
+
+  const contextStoreTargetedRecordsRule = useAtomComponentStateValue(
+    contextStoreTargetedRecordsRuleComponentState,
+  );
+
+  const contextStoreNumberOfSelectedRecords = useAtomComponentStateValue(
+    contextStoreNumberOfSelectedRecordsComponentState,
+  );
+
+  const { objectMetadataItems } = useObjectMetadataItems();
+  const objectMetadataItem = objectMetadataItems.find(
+    (item) => item.id === contextStoreCurrentObjectMetadataItemId,
+  );
+
+  const recordIds =
+    contextStoreTargetedRecordsRule.mode === 'selection'
+      ? contextStoreTargetedRecordsRule.selectedRecordIds
+      : undefined;
+
+  const selectedRecords = useAtomFamilySelectorValue(
+    recordStoreRecordsSelector,
+    {
+      recordIds: recordIds ?? [],
+    },
+  );
+
+  const favoriteRecordIds = useCommandMenuFavoriteRecordIds({
+    recordIds,
+    objectMetadataItemId: objectMetadataItem?.id,
+  });
+  const objectPermissions = useCommandMenuObjectPermissions({
+    objectMetadataItemId: objectMetadataItem?.id,
+  });
+  const featureFlags = useCommandMenuFeatureFlags();
+  const { pageType, isPageInEditMode, hasAnySoftDeleteFilterOnView } =
+    useCommandMenuPageContext();
+  const { targetObjectReadPermissions, targetObjectWritePermissions } =
+    useCommandMenuTargetObjectPermissions();
+
+  const isSelectAll = contextStoreTargetedRecordsRule.mode === 'exclusion';
+
+  return {
+    pageType,
+    isInSidePanel,
+    isPageInEditMode,
+    favoriteRecordIds,
+    isSelectAll,
+    hasAnySoftDeleteFilterOnView,
+    numberOfSelectedRecords: contextStoreNumberOfSelectedRecords,
+    objectPermissions,
+    selectedRecords,
+    featureFlags,
+    targetObjectReadPermissions,
+    targetObjectWritePermissions,
+    objectMetadataItem: objectMetadataItem ?? {},
+  };
+};