2495 fix cmdk removal and added toggle functionality (#2528)

* 2495-fix(front): cmdk removed; custom styles added

* 2495-fix(front): search issue fixed

* 2495-feat(front): Menu toggle funct added

* 2495-fix(front): onclick handler added

* 2495-fix(front): Focus with ArrowKeys added; cmdk removed

* Remove cmdk

* Introduce Selectable list

* Improve api

* Improve api

* Complete refactoring

* Fix ui regressions

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx

@@ -1,6 +1,5 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Command } from 'cmdk';
 
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
 
@@ -27,10 +26,12 @@ const StyledBigIconContainer = styled.div`
   padding: ${({ theme }) => theme.spacing(1)};
 `;
 
-const StyledMenuItemCommandContainer = styled(Command.Item)`
+const StyledMenuItemCommandContainer = styled.div<{ isSelected?: boolean }>`
   --horizontal-padding: ${({ theme }) => theme.spacing(1)};
   --vertical-padding: ${({ theme }) => theme.spacing(2)};
   align-items: center;
+  background: ${({ isSelected, theme }) =>
+    isSelected ? theme.background.transparent.light : theme.background.primary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ theme }) => theme.font.color.secondary};
   cursor: pointer;
@@ -38,8 +39,6 @@ const StyledMenuItemCommandContainer = styled(Command.Item)`
   flex-direction: row;
   font-size: ${({ theme }) => theme.font.size.sm};
   gap: ${({ theme }) => theme.spacing(2)};
-  height: calc(32px - 2 * var(--vertical-padding));
-  height: 24px;
   justify-content: space-between;
   padding: var(--vertical-padding) var(--horizontal-padding);
   position: relative;
@@ -69,6 +68,7 @@ export type MenuItemCommandProps = {
   firstHotKey?: string;
   secondHotKey?: string;
   className?: string;
+  isSelected?: boolean;
   onClick?: () => void;
 };
 
@@ -78,12 +78,17 @@ export const MenuItemCommand = ({
   firstHotKey,
   secondHotKey,
   className,
+  isSelected,
   onClick,
 }: MenuItemCommandProps) => {
   const theme = useTheme();
 
   return (
-    <StyledMenuItemCommandContainer onSelect={onClick} className={className}>
+    <StyledMenuItemCommandContainer
+      onClick={onClick}
+      className={className}
+      isSelected={isSelected}
+    >
       <StyledMenuItemLeftContent>
         {LeftIcon && (
           <StyledBigIconContainer>

front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemCommand.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { Command } from 'cmdk';
 
 import { IconBell } from '@/ui/display/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
@@ -24,16 +23,15 @@ export const Default: Story = {
     secondHotKey: '1',
   },
   render: (props) => (
-    <Command>
-      <MenuItemCommand
-        LeftIcon={props.LeftIcon}
-        text={props.text}
-        firstHotKey={props.firstHotKey}
-        secondHotKey={props.secondHotKey}
-        className={props.className}
-        onClick={props.onClick}
-      ></MenuItemCommand>
-    </Command>
+    <MenuItemCommand
+      LeftIcon={props.LeftIcon}
+      text={props.text}
+      firstHotKey={props.firstHotKey}
+      secondHotKey={props.secondHotKey}
+      className={props.className}
+      onClick={props.onClick}
+      isSelected={false}
+    ></MenuItemCommand>
   ),
   decorators: [ComponentDecorator],
 };
@@ -83,16 +81,15 @@ export const Catalog: CatalogStory<Story, typeof MenuItemCommand> = {
     },
   },
   render: (props) => (
-    <Command>
-      <MenuItemCommand
-        LeftIcon={props.LeftIcon}
-        text={props.text}
-        firstHotKey={props.firstHotKey}
-        secondHotKey={props.secondHotKey}
-        className={props.className}
-        onClick={props.onClick}
-      ></MenuItemCommand>
-    </Command>
+    <MenuItemCommand
+      LeftIcon={props.LeftIcon}
+      text={props.text}
+      firstHotKey={props.firstHotKey}
+      secondHotKey={props.secondHotKey}
+      className={props.className}
+      onClick={props.onClick}
+      isSelected={false}
+    ></MenuItemCommand>
   ),
   decorators: [CatalogDecorator],
 };