323 add object name inside the search (#9962)

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

Before:
<img width="495" alt="Capture d’écran 2025-01-31 à 18 11 56"
src="https://github.com/user-attachments/assets/dd1d3ac1-6c97-4398-b233-d323eeacdbb9"
/>

After:
<img width="500" alt="Capture d’écran 2025-01-31 à 18 09 58"
src="https://github.com/user-attachments/assets/68d23990-2d0b-437d-ad2e-a686cdb320e1"
/>

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

@@ -8,6 +8,7 @@ import { ReactNode } from 'react';
 
 export type CommandMenuItemProps = {
   label: string;
+  description?: string;
   to?: string;
   id: string;
   onClick?: () => void;
@@ -19,6 +20,7 @@ export type CommandMenuItemProps = {
 
 export const CommandMenuItem = ({
   label,
+  description,
   to,
   id,
   onClick,
@@ -40,6 +42,7 @@ export const CommandMenuItem = ({
     <MenuItemCommand
       LeftIcon={Icon}
       text={label}
+      description={description}
       hotKeys={hotKeys}
       onClick={() =>
         onItemClick({

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

@@ -124,6 +124,7 @@ export const CommandMenuList = ({
                             id={item.id}
                             Icon={item.Icon}
                             label={item.label}
+                            description={item.description}
                             to={item.to}
                             onClick={item.onCommandClick}
                             hotKeys={item.hotKeys}

packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx

@@ -123,6 +123,8 @@ export const SearchRecordsAction: Story = {
     await sleep(openTimeout);
     await userEvent.type(searchInput, 'n');
     expect(await canvas.findByText('Linkedin')).toBeVisible();
+    const companyTexts = await canvas.findAllByText('Company');
+    expect(companyTexts[0]).toBeVisible();
     expect(await canvas.findByText(companiesMock[0].name)).toBeVisible();
   },
 };

packages/twenty-front/src/modules/command-menu/hooks/useSearchRecords.tsx

@@ -77,6 +77,7 @@ export const useSearchRecords = () => {
       people?.map(({ id, name: { firstName, lastName }, avatarUrl }) => ({
         id,
         label: `${firstName} ${lastName}`,
+        description: 'Person',
         to: `object/person/${id}`,
         shouldCloseCommandMenuOnClick: true,
         Icon: () => (
@@ -96,6 +97,7 @@ export const useSearchRecords = () => {
       companies?.map((company) => ({
         id: company.id,
         label: company.name ?? '',
+        description: 'Company',
         to: `object/company/${company.id}`,
         shouldCloseCommandMenuOnClick: true,
         Icon: () => (
@@ -116,6 +118,7 @@ export const useSearchRecords = () => {
       opportunities?.map(({ id, name }) => ({
         id,
         label: name ?? '',
+        description: 'Opportunity',
         to: `object/opportunity/${id}`,
         shouldCloseCommandMenuOnClick: true,
         Icon: () => (
@@ -143,6 +146,7 @@ export const useSearchRecords = () => {
       notes?.map((note) => ({
         id: note.id,
         label: note.title ?? '',
+        description: 'Note',
         to: '',
         onCommandClick: () => openNoteRightDrawer(note.id),
         shouldCloseCommandMenuOnClick: true,
@@ -156,6 +160,7 @@ export const useSearchRecords = () => {
       tasks?.map((task) => ({
         id: task.id,
         label: task.title ?? '',
+        description: 'Task',
         to: '',
         onCommandClick: () => openTaskRightDrawer(task.id),
         shouldCloseCommandMenuOnClick: true,
@@ -182,6 +187,7 @@ export const useSearchRecords = () => {
       objectRecords.map((objectRecord) => ({
         id: objectRecord.record.id,
         label: objectRecord.recordIdentifier.name,
+        description: objectRecord.objectMetadataItem.labelSingular,
         to: `object/${objectRecord.objectMetadataItem.nameSingular}/${objectRecord.record.id}`,
         shouldCloseCommandMenuOnClick: true,
         Icon: () => (

packages/twenty-front/src/modules/command-menu/types/Command.ts

@@ -16,6 +16,7 @@ export type Command = {
   id: string;
   to?: string;
   label: string;
+  description?: string;
   type?: CommandType;
   scope?: CommandScope;
   Icon?: IconComponent;

packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx

@@ -63,9 +63,24 @@ const StyledMenuItemCommandContainer = styled.div<{ isSelected?: boolean }>`
   }
 `;
 
+const StyledDescription = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+
+  &::before {
+    content: '·';
+    margin: ${({ theme }) => theme.spacing(0, 1)};
+  }
+`;
+
+const StyledTextContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
 export type MenuItemCommandProps = {
   LeftIcon?: IconComponent;
   text: string;
+  description?: string;
   hotKeys?: string[];
   className?: string;
   isSelected?: boolean;
@@ -76,6 +91,7 @@ export type MenuItemCommandProps = {
 export const MenuItemCommand = ({
   LeftIcon,
   text,
+  description,
   hotKeys,
   className,
   isSelected,
@@ -97,7 +113,10 @@ export const MenuItemCommand = ({
             <LeftIcon size={theme.icon.size.sm} />
           </StyledBigIconContainer>
         )}
-        <StyledMenuItemLabelText>{text}</StyledMenuItemLabelText>
+        <StyledTextContainer>
+          <StyledMenuItemLabelText>{text}</StyledMenuItemLabelText>
+          {description && <StyledDescription>{description}</StyledDescription>}
+        </StyledTextContainer>
         {RightComponent}
       </StyledMenuItemLeftContent>
       {!isMobile && <MenuItemCommandHotKeys hotKeys={hotKeys} />}

packages/twenty-ui/src/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx

@@ -35,6 +35,15 @@ export const Default: Story = {
   decorators: [ComponentDecorator],
 };
 
+export const WithDescription: Story = {
+  args: {
+    text: 'Menu item',
+    hotKeys: ['⌘', '1'],
+    description: 'Description',
+  },
+  decorators: [ComponentDecorator],
+};
+
 export const Catalog: CatalogStory<Story, typeof MenuItemCommand> = {
   args: {
     text: 'Menu item',