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;