Update menu items across the app (#14724)

Closes https://github.com/twentyhq/core-team-issues/issues/1568


https://github.com/user-attachments/assets/a0fe6538-8405-4b52-a6ce-7afa846ee5f3

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

@@ -5,7 +5,7 @@ import { isSelectedItemIdComponentFamilySelector } from '@/ui/layout/selectable-
 import { useRecoilComponentFamilyValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue';
 import { type ReactNode } from 'react';
 import { IconArrowUpRight, type IconComponent } from 'twenty-ui/display';
-import { MenuItemCommand } from 'twenty-ui/navigation';
+import { MenuItem } from 'twenty-ui/navigation';
 
 export type CommandMenuItemProps = {
   label: string;
@@ -40,10 +40,11 @@ export const CommandMenuItem = ({
   );
 
   return (
-    <MenuItemCommand
+    <MenuItem
+      withIconContainer={true}
       LeftIcon={Icon}
       text={label}
-      description={description}
+      contextualText={description}
       hotKeys={hotKeys}
       onClick={() =>
         onItemClick({
@@ -51,7 +52,7 @@ export const CommandMenuItem = ({
           to,
         })
       }
-      isSelected={isSelectedItemId}
+      focused={isSelectedItemId}
       RightComponent={RightComponent}
     />
   );

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutGraphTypeSelect.tsx

@@ -11,7 +11,7 @@ import {
   IconGauge,
   IconNumber,
 } from 'twenty-ui/display';
-import { MenuItemCommand } from 'twenty-ui/navigation';
+import { MenuItem } from 'twenty-ui/navigation';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -74,7 +74,8 @@ export const CommandMenuPageLayoutGraphTypeSelect = () => {
       <StyledSectionTitle>Graph type</StyledSectionTitle>
 
       {graphTypeOptions.map((option) => (
-        <MenuItemCommand
+        <MenuItem
+          withIconContainer={true}
           key={option.type}
           LeftIcon={option.icon}
           text={option.title}

packages/twenty-front/src/modules/command-menu/pages/page-layout/components/CommandMenuPageLayoutWidgetTypeSelect.tsx

@@ -6,7 +6,7 @@ import { pageLayoutDraggedAreaComponentState } from '@/page-layout/states/pageLa
 import { useSetRecoilComponentState } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentState';
 import styled from '@emotion/styled';
 import { IconChartPie, IconFrame, IconList } from 'twenty-ui/display';
-import { MenuItemCommand } from 'twenty-ui/navigation';
+import { MenuItem } from 'twenty-ui/navigation';
 
 const StyledContainer = styled.div`
   display: flex;
@@ -86,8 +86,9 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
     <StyledContainer>
       <StyledSectionTitle>Widget type</StyledSectionTitle>
       {widgetTypeOptions.map((option) => {
-        const MenuItem = (
-          <MenuItemCommand
+        const MenuItemComponent = (
+          <MenuItem
+            withIconContainer={true}
             key={option.type}
             LeftIcon={option.icon}
             text={option.title}
@@ -97,10 +98,10 @@ export const CommandMenuPageLayoutWidgetTypeSelect = () => {
 
         return option.disabled ? (
           <StyledDisabledMenuItem key={option.type}>
-            {MenuItem}
+            {MenuItemComponent}
           </StyledDisabledMenuItem>
         ) : (
-          MenuItem
+          MenuItemComponent
         );
       })}
     </StyledContainer>

packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/WorkflowActionMenuItems.tsx

@@ -2,7 +2,7 @@ import { type WorkflowActionType } from '@/workflow/types/Workflow';
 import { getActionIconColorOrThrow } from '@/workflow/workflow-steps/workflow-actions/utils/getActionIconColorOrThrow';
 import { useTheme } from '@emotion/react';
 import { useIcons } from 'twenty-ui/display';
-import { MenuItemCommand } from 'twenty-ui/navigation';
+import { MenuItem } from 'twenty-ui/navigation';
 
 type Action = { type: WorkflowActionType; label: string; icon: string };
 
@@ -22,7 +22,8 @@ export const WorkflowActionMenuItems = ({
         const Icon = getIcon(action.icon);
 
         return (
-          <MenuItemCommand
+          <MenuItem
+            withIconContainer={true}
             key={action.type}
             LeftIcon={() => (
               <Icon

packages/twenty-front/src/modules/command-menu/pages/workflow/trigger-type/components/CommandMenuWorkflowSelectTriggerTypeContent.tsx

@@ -15,7 +15,7 @@ import { getTriggerDefaultDefinition } from '@/workflow/workflow-trigger/utils/g
 import { useTheme } from '@emotion/react';
 import { TRIGGER_STEP_ID } from 'twenty-shared/workflow';
 import { useIcons } from 'twenty-ui/display';
-import { MenuItemCommand } from 'twenty-ui/navigation';
+import { MenuItem } from 'twenty-ui/navigation';
 
 export const CommandMenuWorkflowSelectTriggerTypeContent = ({
   workflow,
@@ -71,7 +71,8 @@ export const CommandMenuWorkflowSelectTriggerTypeContent = ({
       {DATABASE_TRIGGER_TYPES.map((action) => {
         const Icon = getIcon(action.icon);
         return (
-          <MenuItemCommand
+          <MenuItem
+            withIconContainer={true}
             key={action.defaultLabel}
             LeftIcon={() => <Icon color={theme.color.blue} />}
             text={action.defaultLabel}
@@ -86,7 +87,8 @@ export const CommandMenuWorkflowSelectTriggerTypeContent = ({
       {OTHER_TRIGGER_TYPES.map((action) => {
         const Icon = getIcon(action.icon);
         return (
-          <MenuItemCommand
+          <MenuItem
+            withIconContainer={true}
             key={action.defaultLabel}
             LeftIcon={() => <Icon color={theme.color.purple} />}
             text={action.defaultLabel}