Fix command menu keyboard input & refactor group (#1706)

* - fix command menu keyboard shortcuts
- refactor command groups

* - refactor the MenuItemCommand to use cmdk

* - fixed matching commands multiple displays

* - fixed array count problems react with boolean

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

@@ -1,10 +1,10 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
+import { Command } from 'cmdk';
 
 import { IconComponent } from '@/ui/icon/types/IconComponent';
 
 import {
-  StyledMenuItemBase,
   StyledMenuItemLabel,
   StyledMenuItemLeftContent,
 } from '../internals/components/StyledMenuItemBase';
@@ -32,8 +32,51 @@ const StyledCommandText = styled.div`
   padding-right: ${({ theme }) => theme.spacing(2)};
 `;
 
-const StyledMenuItemCommandContainer = styled(StyledMenuItemBase)`
+const StyledMenuItemCommandContainer = styled(Command.Item)`
+  --horizontal-padding: ${({ theme }) => theme.spacing(1)};
+  --vertical-padding: ${({ theme }) => theme.spacing(2)};
+  align-items: center;
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${({ theme }) => theme.font.color.secondary};
+  cursor: pointer;
+  display: flex;
+  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;
+  transition: all 150ms ease;
+  transition-property: none;
+  user-select: none;
+  width: calc(100% - 2 * var(--horizontal-padding));
+  &:hover {
+    background: ${({ theme }) => theme.background.transparent.light};
+  }
+  &[data-selected='true'] {
+    background: ${({ theme }) => theme.background.tertiary};
+    /* Could be nice to add a caret like this for better accessibility in the future
+    But it needs to be consistend with other picker dropdown (e.g. company)
+    &:after {
+      background: ${({ theme }) => theme.background.quaternary};
+      content: '';
+      height: 100%;
+      left: 0;
+      position: absolute;
+      width: 3px;
+      z-index: ${({ theme }) => theme.lastLayerZIndex};
+    } */
+  }
+  &[data-disabled='true'] {
+    color: ${({ theme }) => theme.font.color.light};
+    cursor: not-allowed;
+  }
+  svg {
+    height: 16px;
+    width: 16px;
+  }
 `;
 
 export type MenuItemProps = {
@@ -54,7 +97,7 @@ export const MenuItemCommand = ({
   const theme = useTheme();
 
   return (
-    <StyledMenuItemCommandContainer onClick={onClick} className={className}>
+    <StyledMenuItemCommandContainer onSelect={onClick} className={className}>
       <StyledMenuItemLeftContent>
         {LeftIcon && (
           <StyledBigIconContainer>