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}

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownCustomView.tsx

@@ -137,6 +137,7 @@ export const ObjectOptionsDropdownCustomView = ({
               )}
               text={t`Layout`}
               contextualText={`${capitalize(customViewData?.type ?? '')}`}
+              contextualTextPosition="right"
               hasSubMenu
             />
           </SelectableListItem>
@@ -160,6 +161,7 @@ export const ObjectOptionsDropdownCustomView = ({
                         ? t`Not available on Default View`
                         : calendarFieldMetadata?.label
                     }
+                    contextualTextPosition="right"
                     hasSubMenu
                     disabled={isDefaultView}
                   />
@@ -181,6 +183,7 @@ export const ObjectOptionsDropdownCustomView = ({
                         ? t`Week`
                         : t`Day`
                   }
+                  contextualTextPosition="right"
                 />
               </SelectableListItem>
             </>
@@ -195,6 +198,7 @@ export const ObjectOptionsDropdownCustomView = ({
               LeftIcon={IconListDetails}
               text={t`Fields`}
               contextualText={`${visibleBoardFields.length} shown`}
+              contextualTextPosition="right"
               hasSubMenu
             />
           </SelectableListItem>
@@ -222,6 +226,7 @@ export const ObjectOptionsDropdownCustomView = ({
                       ? t`Not available on Default View`
                       : recordGroupFieldMetadata?.label
                   }
+                  contextualTextPosition="right"
                   hasSubMenu
                   disabled={isDefaultView}
                 />

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownDefaultView.tsx

@@ -87,6 +87,7 @@ export const ObjectOptionsDropdownDefaultView = () => {
               LeftIcon={IconListDetails}
               text={t`Fields`}
               contextualText={`${visibleBoardFields.length} shown`}
+              contextualTextPosition="right"
               hasSubMenu
             />
           </SelectableListItem>
@@ -119,6 +120,7 @@ export const ObjectOptionsDropdownDefaultView = () => {
               onClick={handleCreateCustomView}
               LeftIcon={IconLayout}
               text={t`Create custom view`}
+              contextualTextPosition="right"
             />
           </SelectableListItem>
         </DropdownMenuItemsContainer>

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownLayoutContent.tsx

@@ -209,6 +209,7 @@ export const ObjectOptionsDropdownLayoutContent = () => {
                     t`Create Select...`
                   ) : undefined
                 }
+                contextualTextPosition="right"
                 selected={currentView?.type === ViewType.Kanban}
                 onClick={handleSelectKanbanViewType}
               />
@@ -228,6 +229,7 @@ export const ObjectOptionsDropdownLayoutContent = () => {
                     LeftIcon={IconCalendar}
                     text={t`Date field`}
                     contextualText={calendarFieldMetadata?.label}
+                    contextualTextPosition="right"
                     hasSubMenu
                   />
                 </SelectableListItem>
@@ -247,6 +249,7 @@ export const ObjectOptionsDropdownLayoutContent = () => {
                           ? t`Week`
                           : t`Day`
                     }
+                    contextualTextPosition="right"
                     hasSubMenu
                   />
                 </SelectableListItem>
@@ -274,6 +277,7 @@ export const ObjectOptionsDropdownLayoutContent = () => {
                     ? t`Side Panel`
                     : t`Record Page`
                 }
+                contextualTextPosition="right"
                 hasSubMenu
               />
             </SelectableListItem>
@@ -296,6 +300,7 @@ export const ObjectOptionsDropdownLayoutContent = () => {
                   LeftIcon={IconLayoutList}
                   text={t`Group`}
                   contextualText={recordGroupFieldMetadata?.label}
+                  contextualTextPosition="right"
                   hasSubMenu
                 />
               </SelectableListItem>

packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownRecordGroupsContent.tsx

@@ -125,6 +125,7 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => {
                   LeftIcon={IconLayoutList}
                   text={t`Group by`}
                   contextualText={recordGroupFieldMetadata?.label}
+                  contextualTextPosition="right"
                   hasSubMenu
                 />
               </SelectableListItem>
@@ -138,6 +139,7 @@ export const ObjectOptionsDropdownRecordGroupsContent = () => {
                   LeftIcon={IconSortDescending}
                   text={t`Sort`}
                   contextualText={recordGroupSort}
+                  contextualTextPosition="right"
                   hasSubMenu
                 />
               </SelectableListItem>