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/CommandMenuContext.ts

@@ -6,12 +6,14 @@ export type CommandMenuContextType = {
   isInSidePanel: boolean;
   displayType: 'button' | 'listItem' | 'dropdownItem';
   containerType: CommandMenuItemContainerType;
+  contextStoreInstanceId?: string;
   commandMenuItems: CommandMenuItemConfig[];
 };
 
 export const CommandMenuContext = createContext<CommandMenuContextType>({
   isInSidePanel: false,
   containerType: 'command-menu-list',
   displayType: 'button',
+  contextStoreInstanceId: undefined,
   commandMenuItems: [],
 });

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';
@@ -11,9 +11,11 @@ export const CommandMenuContextProvider = ({
   displayType,
   containerType,
   objectMetadataItemOverride,
+  contextStoreInstanceId,
 }: Omit<CommandMenuContextType, 'commandMenuItems'> & {
   children: React.ReactNode;
   objectMetadataItemOverride?: EnrichedObjectMetadataItem;
+  contextStoreInstanceId?: string;
 }) => {
   const isCommandMenuItemEnabled = useIsFeatureEnabled(
     FeatureFlagKey.IS_COMMAND_MENU_ITEM_ENABLED,
@@ -25,6 +27,7 @@ export const CommandMenuContextProvider = ({
         isInSidePanel={isInSidePanel}
         displayType={displayType}
         containerType={containerType}
+        contextStoreInstanceId={contextStoreInstanceId}
       >
         {children}
       </CommandMenuContextProviderServerItems>

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

@@ -15,12 +15,14 @@ export const CommandMenuContextProviderDefault = ({
   isInSidePanel,
   displayType,
   containerType,
+  contextStoreInstanceId,
   children,
 }: {
   objectMetadataItem: EnrichedObjectMetadataItem;
   isInSidePanel: CommandMenuContextType['isInSidePanel'];
   displayType: CommandMenuContextType['displayType'];
   containerType: CommandMenuContextType['containerType'];
+  contextStoreInstanceId?: CommandMenuContextType['contextStoreInstanceId'];
   children: React.ReactNode;
 }) => {
   const shouldBeRegisteredParams = useShouldCommandMenuItemBeRegisteredParams({
@@ -53,6 +55,7 @@ export const CommandMenuContextProviderDefault = ({
         isInSidePanel,
         displayType,
         containerType,
+        contextStoreInstanceId,
         commandMenuItems: [
           ...commandMenuItems,
           ...runWorkflowRecordCommands,

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

@@ -15,6 +15,7 @@ export const CommandMenuContextProviderLegacy = ({
   displayType,
   containerType,
   objectMetadataItemOverride,
+  contextStoreInstanceId,
 }: Omit<CommandMenuContextType, 'commandMenuItems'> & {
   children: React.ReactNode;
   objectMetadataItemOverride?: EnrichedObjectMetadataItem;
@@ -45,6 +46,7 @@ export const CommandMenuContextProviderLegacy = ({
         isInSidePanel={isInSidePanel}
         displayType={displayType}
         containerType={containerType}
+        contextStoreInstanceId={contextStoreInstanceId}
         objectMetadataItem={objectMetadataItem}
       >
         {children}
@@ -57,6 +59,7 @@ export const CommandMenuContextProviderLegacy = ({
       isInSidePanel={isInSidePanel}
       displayType={displayType}
       containerType={containerType}
+      contextStoreInstanceId={contextStoreInstanceId}
       objectMetadataItem={objectMetadataItem}
     >
       {children}

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

@@ -19,6 +19,7 @@ type CommandMenuContextProviderWorkflowObjectsProps = {
   isInSidePanel: CommandMenuContextType['isInSidePanel'];
   displayType: CommandMenuContextType['displayType'];
   containerType: CommandMenuContextType['containerType'];
+  contextStoreInstanceId?: CommandMenuContextType['contextStoreInstanceId'];
   children: React.ReactNode;
 };
 
@@ -27,6 +28,7 @@ const CommandMenuContextProviderWorkflowObjectsContent = ({
   isInSidePanel,
   displayType,
   containerType,
+  contextStoreInstanceId,
   children,
   selectedRecordId,
 }: CommandMenuContextProviderWorkflowObjectsProps & {
@@ -57,6 +59,7 @@ const CommandMenuContextProviderWorkflowObjectsContent = ({
         isInSidePanel,
         displayType,
         containerType,
+        contextStoreInstanceId,
         commandMenuItems: [
           ...commandMenuItems,
           ...runWorkflowRecordAgnosticCommands,
@@ -73,6 +76,7 @@ const CommandMenuContextProviderWorkflowObjectsWithoutWorkflow = ({
   isInSidePanel,
   displayType,
   containerType,
+  contextStoreInstanceId,
   children,
 }: CommandMenuContextProviderWorkflowObjectsProps & {
   workflowWithCurrentVersion: WorkflowWithCurrentVersion | undefined;
@@ -99,6 +103,7 @@ const CommandMenuContextProviderWorkflowObjectsWithoutWorkflow = ({
         isInSidePanel,
         displayType,
         containerType,
+        contextStoreInstanceId,
         commandMenuItems: [
           ...commandMenuItems,
           ...runWorkflowRecordAgnosticCommands,
@@ -115,6 +120,7 @@ export const CommandMenuContextProviderWorkflowObjects = ({
   isInSidePanel,
   displayType,
   containerType,
+  contextStoreInstanceId,
   children,
 }: CommandMenuContextProviderWorkflowObjectsProps) => {
   const contextStoreTargetedRecordsRule = useAtomComponentStateValue(
@@ -138,6 +144,7 @@ export const CommandMenuContextProviderWorkflowObjects = ({
         isInSidePanel={isInSidePanel}
         displayType={displayType}
         containerType={containerType}
+        contextStoreInstanceId={contextStoreInstanceId}
         selectedRecordId={selectedRecord.id}
       >
         {children}
@@ -151,6 +158,7 @@ export const CommandMenuContextProviderWorkflowObjects = ({
       isInSidePanel={isInSidePanel}
       displayType={displayType}
       containerType={containerType}
+      contextStoreInstanceId={contextStoreInstanceId}
       workflowWithCurrentVersion={undefined}
     >
       {children}

packages/twenty-front/src/modules/command-menu-item/contexts/useCommandMenuContextStoreInstanceId.ts

@@ -0,0 +1,5 @@
+import { CommandMenuContext } from '@/command-menu-item/contexts/CommandMenuContext';
+import { useContext } from 'react';
+
+export const useCommandMenuContextStoreInstanceId = () =>
+  useContext(CommandMenuContext).contextStoreInstanceId;

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

@@ -0,0 +1,54 @@
+import { CommandMenuContextProvider } from '@/command-menu-item/contexts/CommandMenuContextProvider';
+import { SidePanelCommandMenuItemEditPage } from '@/command-menu-item/server-items/edit/components/SidePanelCommandMenuItemEditPage';
+import { SidePanelCommandMenuItemDisplayPage } from '@/command-menu-item/server-items/display/components/SidePanelCommandMenuItemDisplayPage';
+import { MAIN_CONTEXT_STORE_INSTANCE_ID } from '@/context-store/constants/MainContextStoreInstanceId';
+import { SidePanelRootPage } from '@/side-panel/pages/root/components/SidePanelRootPage';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
+
+const SidePanelCommandMenuPageWithMainContext = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => (
+  <CommandMenuContextProvider
+    isInSidePanel={true}
+    displayType="listItem"
+    containerType="command-menu-list"
+    contextStoreInstanceId={MAIN_CONTEXT_STORE_INSTANCE_ID}
+  >
+    {children}
+  </CommandMenuContextProvider>
+);
+
+export const SidePanelCommandMenuDisplayPageEntry = () => {
+  const isCommandMenuItemEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IS_COMMAND_MENU_ITEM_ENABLED,
+  );
+
+  if (!isCommandMenuItemEnabled) {
+    return <SidePanelRootPage />;
+  }
+
+  return (
+    <SidePanelCommandMenuPageWithMainContext>
+      <SidePanelCommandMenuItemDisplayPage />
+    </SidePanelCommandMenuPageWithMainContext>
+  );
+};
+
+export const SidePanelCommandMenuEditPageEntry = () => {
+  const isCommandMenuItemEnabled = useIsFeatureEnabled(
+    FeatureFlagKey.IS_COMMAND_MENU_ITEM_ENABLED,
+  );
+
+  if (!isCommandMenuItemEnabled) {
+    return <SidePanelRootPage />;
+  }
+
+  return (
+    <SidePanelCommandMenuPageWithMainContext>
+      <SidePanelCommandMenuItemEditPage />
+    </SidePanelCommandMenuPageWithMainContext>
+  );
+};