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/command-menu/components/CommandGroup.tsx

@@ -1,21 +1,17 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { Command } from 'cmdk';
 
-const StyledGroup = styled(Command.Group)`
-  [cmdk-group-heading] {
-    align-items: center;
-    color: ${({ theme }) => theme.font.color.light};
-    display: flex;
-    font-size: ${({ theme }) => theme.font.size.xs};
-    font-weight: ${({ theme }) => theme.font.weight.semiBold};
-    padding-bottom: ${({ theme }) => theme.spacing(2)};
-    padding-left: ${({ theme }) => theme.spacing(2)};
-    padding-right: ${({ theme }) => theme.spacing(1)};
-    padding-top: ${({ theme }) => theme.spacing(2)};
-    text-transform: uppercase;
-    user-select: none;
-  }
+const StyledGroup = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
+  padding-top: ${({ theme }) => theme.spacing(2)};
+  text-transform: uppercase;
+  user-select: none;
 `;
 
 type CommandGroupProps = {
@@ -27,5 +23,10 @@ export const CommandGroup = ({ heading, children }: CommandGroupProps) => {
   if (!children || !React.Children.count(children)) {
     return null;
   }
-  return <StyledGroup heading={heading}>{children}</StyledGroup>;
+  return (
+    <div>
+      <StyledGroup>{heading}</StyledGroup>
+      {children}
+    </div>
+  );
 };

front/src/modules/command-menu/components/CommandMenu.tsx

@@ -1,12 +1,18 @@
 import { useState } from 'react';
+import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
+import { CommandMenuSelectableListEffect } from '@/command-menu/components/CommandMenuSelectableListEffect';
 import { useFindManyObjectRecords } from '@/object-record/hooks/useFindManyObjectRecords';
 import { Person } from '@/people/types/Person';
 import { IconNotes } from '@/ui/display/icon';
+import { SelectableItem } from '@/ui/layout/selectable-list/components/SelectableItem';
+import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
 import { Avatar } from '@/users/components/Avatar';
 import { getLogoUrlFromDomainName } from '~/utils';
 
@@ -17,21 +23,77 @@ import { Command, CommandType } from '../types/Command';
 
 import { CommandGroup } from './CommandGroup';
 import { CommandMenuItem } from './CommandMenuItem';
-import {
-  StyledDialog,
-  StyledEmpty,
-  StyledInput,
-  StyledList,
-} from './CommandMenuStyles';
+
+export const StyledDialog = styled.div`
+  background: ${({ theme }) => theme.background.primary};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  box-shadow: ${({ theme }) => theme.boxShadow.strong};
+  font-family: ${({ theme }) => theme.font.family};
+  left: 50%;
+  max-width: 640px;
+  overflow: hidden;
+  padding: 0;
+  position: fixed;
+  top: 30%;
+  transform: ${() =>
+    useIsMobile() ? 'translateX(-49.5%)' : 'translateX(-50%)'};
+  width: ${() => (useIsMobile() ? 'calc(100% - 40px)' : '100%')};
+  z-index: 1000;
+`;
+
+export const StyledInput = styled.input`
+  background: ${({ theme }) => theme.background.primary};
+  border: none;
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: 0;
+  color: ${({ theme }) => theme.font.color.primary};
+  font-size: ${({ theme }) => theme.font.size.lg};
+  margin: 0;
+  outline: none;
+  padding: ${({ theme }) => theme.spacing(5)};
+  width: ${({ theme }) => `calc(100% - ${theme.spacing(10)})`};
+
+  &::placeholder {
+    color: ${({ theme }) => theme.font.color.light};
+  }
+`;
+
+export const StyledList = styled.div`
+  background: ${({ theme }) => theme.background.secondary};
+  height: 400px;
+  max-height: 400px;
+  overscroll-behavior: contain;
+  transition: 100ms ease;
+  transition-property: height;
+`;
+
+export const StyledInnerList = styled.div`
+  padding-left: ${({ theme }) => theme.spacing(1)};
+  width: 100%;
+`;
+
+export const StyledEmpty = styled.div`
+  align-items: center;
+  color: ${({ theme }) => theme.font.color.light};
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.md};
+  height: 64px;
+  justify-content: center;
+  white-space: pre-wrap;
+`;
 
 export const CommandMenu = () => {
-  const { openCommandMenu, closeCommandMenu, toggleCommandMenu } =
-    useCommandMenu();
+  const { toggleCommandMenu, closeCommandMenu } = useCommandMenu();
+
   const openActivityRightDrawer = useOpenActivityRightDrawer();
   const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);
   const [search, setSearch] = useState('');
   const commandMenuCommands = useRecoilValue(commandMenuCommandsState);
 
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(event.target.value);
+  };
+
   useScopedHotkeys(
     'ctrl+k,meta+k',
     () => {
@@ -39,7 +101,17 @@ export const CommandMenu = () => {
       toggleCommandMenu();
     },
     AppHotkeyScope.CommandMenu,
-    [openCommandMenu, setSearch],
+    [toggleCommandMenu, setSearch],
+  );
+
+  useScopedHotkeys(
+    'esc',
+    () => {
+      setSearch('');
+      closeCommandMenu();
+    },
+    AppHotkeyScope.CommandMenu,
+    [toggleCommandMenu, setSearch],
   );
 
   const { objects: people } = useFindManyObjectRecords<Person>({
@@ -102,96 +174,133 @@ export const CommandMenu = () => {
         : true) && cmd.type === CommandType.Create,
   );
 
+  const selectableItemIds = matchingCreateCommand
+    .map((cmd) => cmd.id)
+    .concat(matchingNavigateCommand.map((cmd) => cmd.id))
+    .concat(people.map((person) => person.id))
+    .concat(companies.map((company) => company.id))
+    .concat(activities.map((activity) => activity.id));
+
   return (
-    <StyledDialog
-      open={isCommandMenuOpened}
-      onOpenChange={(opened) => {
-        if (!opened) {
-          closeCommandMenu();
-        }
-      }}
-      shouldFilter={false}
-      label="Global Command Menu"
-    >
-      <StyledInput
-        value={search}
-        placeholder="Search"
-        onValueChange={setSearch}
-      />
-      <StyledList>
-        <StyledEmpty>No results found.</StyledEmpty>
-        <CommandGroup heading="Create">
-          {matchingCreateCommand.map((cmd) => (
-            <CommandMenuItem
-              to={cmd.to}
-              key={cmd.label}
-              Icon={cmd.Icon}
-              label={cmd.label}
-              onClick={cmd.onCommandClick}
-              firstHotKey={cmd.firstHotKey}
-              secondHotKey={cmd.secondHotKey}
-            />
-          ))}
-        </CommandGroup>
-        <CommandGroup heading="Navigate">
-          {matchingNavigateCommand.map((cmd) => (
-            <CommandMenuItem
-              to={cmd.to}
-              key={cmd.label}
-              label={cmd.label}
-              Icon={cmd.Icon}
-              onClick={cmd.onCommandClick}
-              firstHotKey={cmd.firstHotKey}
-              secondHotKey={cmd.secondHotKey}
-            />
-          ))}
-        </CommandGroup>
-        <CommandGroup heading="People">
-          {people.map((person) => (
-            <CommandMenuItem
-              key={person.id}
-              to={`object/person/${person.id}`}
-              label={person.name?.firstName + ' ' + person.name?.lastName}
-              Icon={() => (
-                <Avatar
-                  type="rounded"
-                  avatarUrl={person.avatarUrl}
-                  colorId={person.id}
-                  placeholder={
-                    person.name?.firstName + ' ' + person.name?.lastName
-                  }
-                />
-              )}
-            />
-          ))}
-        </CommandGroup>
-        <CommandGroup heading="Companies">
-          {companies.map((company) => (
-            <CommandMenuItem
-              key={company.id}
-              label={company.name}
-              to={`object/company/${company.id}`}
-              Icon={() => (
-                <Avatar
-                  colorId={company.id}
-                  placeholder={company.name}
-                  avatarUrl={getLogoUrlFromDomainName(company.domainName)}
-                />
-              )}
-            />
-          ))}
-        </CommandGroup>
-        <CommandGroup heading="Notes">
-          {activities.map((activity) => (
-            <CommandMenuItem
-              Icon={IconNotes}
-              key={activity.id}
-              label={activity.title ?? ''}
-              onClick={() => openActivityRightDrawer(activity.id)}
-            />
-          ))}
-        </CommandGroup>
-      </StyledList>
-    </StyledDialog>
+    isCommandMenuOpened && (
+      <StyledDialog>
+        <StyledInput
+          value={search}
+          placeholder="Search"
+          onChange={handleSearchChange}
+        />
+        <StyledList>
+          <ScrollWrapper>
+            <StyledInnerList>
+              <CommandMenuSelectableListEffect
+                selectableItemIds={selectableItemIds}
+              />
+              <SelectableList
+                selectableListId="command-menu-list"
+                selectableItemIds={selectableItemIds}
+              >
+                {!matchingCreateCommand.length &&
+                  !matchingNavigateCommand.length &&
+                  !people.length &&
+                  !companies.length &&
+                  !activities.length && (
+                    <StyledEmpty>No results found</StyledEmpty>
+                  )}
+                <CommandGroup heading="Create">
+                  {matchingCreateCommand.map((cmd) => (
+                    <SelectableItem itemId={cmd.id} key={cmd.id}>
+                      <CommandMenuItem
+                        id={cmd.id}
+                        to={cmd.to}
+                        key={cmd.id}
+                        Icon={cmd.Icon}
+                        label={cmd.label}
+                        onClick={cmd.onCommandClick}
+                        firstHotKey={cmd.firstHotKey}
+                        secondHotKey={cmd.secondHotKey}
+                      />
+                    </SelectableItem>
+                  ))}
+                </CommandGroup>
+                <CommandGroup heading="Navigate">
+                  {matchingNavigateCommand.map((cmd) => (
+                    <SelectableItem itemId={cmd.id} key={cmd.id}>
+                      <CommandMenuItem
+                        id={cmd.id}
+                        to={cmd.to}
+                        key={cmd.id}
+                        label={cmd.label}
+                        Icon={cmd.Icon}
+                        onClick={cmd.onCommandClick}
+                        firstHotKey={cmd.firstHotKey}
+                        secondHotKey={cmd.secondHotKey}
+                      />
+                    </SelectableItem>
+                  ))}
+                </CommandGroup>
+                <CommandGroup heading="People">
+                  {people.map((person) => (
+                    <SelectableItem itemId={person.id} key={person.id}>
+                      <CommandMenuItem
+                        id={person.id}
+                        key={person.id}
+                        to={`object/person/${person.id}`}
+                        label={
+                          person.name.firstName + ' ' + person.name.lastName
+                        }
+                        Icon={() => (
+                          <Avatar
+                            type="rounded"
+                            avatarUrl={null}
+                            colorId={person.id}
+                            placeholder={
+                              person.name.firstName + ' ' + person.name.lastName
+                            }
+                          />
+                        )}
+                      />
+                    </SelectableItem>
+                  ))}
+                </CommandGroup>
+                <CommandGroup heading="Companies">
+                  {companies.map((company) => (
+                    <SelectableItem itemId={company.id} key={company.id}>
+                      <CommandMenuItem
+                        id={company.id}
+                        key={company.id}
+                        label={company.name}
+                        to={`object/company/${company.id}`}
+                        Icon={() => (
+                          <Avatar
+                            colorId={company.id}
+                            placeholder={company.name}
+                            avatarUrl={getLogoUrlFromDomainName(
+                              company.domainName,
+                            )}
+                          />
+                        )}
+                      />
+                    </SelectableItem>
+                  ))}
+                </CommandGroup>
+                <CommandGroup heading="Notes">
+                  {activities.map((activity) => (
+                    <SelectableItem itemId={activity.id} key={activity.id}>
+                      <CommandMenuItem
+                        id={activity.id}
+                        Icon={IconNotes}
+                        key={activity.id}
+                        label={activity.title ?? ''}
+                        onClick={() => openActivityRightDrawer(activity.id)}
+                      />
+                    </SelectableItem>
+                  ))}
+                </CommandGroup>
+              </SelectableList>
+            </StyledInnerList>
+          </ScrollWrapper>
+        </StyledList>
+      </StyledDialog>
+    )
   );
 };

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

@@ -2,6 +2,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { IconArrowUpRight } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { MenuItemCommand } from '@/ui/navigation/menu-item/components/MenuItemCommand';
 
 import { useCommandMenu } from '../hooks/useCommandMenu';
@@ -9,7 +10,7 @@ import { useCommandMenu } from '../hooks/useCommandMenu';
 export type CommandMenuItemProps = {
   label: string;
   to?: string;
-  key: string;
+  id: string;
   onClick?: () => void;
   Icon?: IconComponent;
   firstHotKey?: string;
@@ -19,20 +20,23 @@ export type CommandMenuItemProps = {
 export const CommandMenuItem = ({
   label,
   to,
+  id,
   onClick,
   Icon,
   firstHotKey,
   secondHotKey,
 }: CommandMenuItemProps) => {
   const navigate = useNavigate();
-  const { closeCommandMenu } = useCommandMenu();
+  const { toggleCommandMenu } = useCommandMenu();
 
   if (to && !Icon) {
     Icon = IconArrowUpRight;
   }
 
+  const { isSelectedItemId } = useSelectableList({ itemId: id });
+
   const onItemClick = () => {
-    closeCommandMenu();
+    toggleCommandMenu();
 
     if (onClick) {
       onClick();
@@ -51,6 +55,7 @@ export const CommandMenuItem = ({
       firstHotKey={firstHotKey}
       secondHotKey={secondHotKey}
       onClick={onItemClick}
+      isSelected={isSelectedItemId}
     />
   );
 };

front/src/modules/command-menu/components/CommandMenuSelectableListEffect.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
+
+type CommandMenuSelectableListEffectProps = {
+  selectableItemIds: string[];
+};
+
+export const CommandMenuSelectableListEffect = ({
+  selectableItemIds,
+}: CommandMenuSelectableListEffectProps) => {
+  const { setSelectableItemIds } = useSelectableList({
+    selectableListId: 'command-menu-list',
+  });
+
+  useEffect(() => {
+    setSelectableItemIds(selectableItemIds);
+  }, [selectableItemIds, setSelectableItemIds]);
+
+  return <></>;
+};

front/src/modules/command-menu/components/CommandMenuStyles.tsx

@@ -1,58 +0,0 @@
-import styled from '@emotion/styled';
-import { Command } from 'cmdk';
-
-import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-
-export const StyledDialog = styled(Command.Dialog)`
-  background: ${({ theme }) => theme.background.primary};
-  border-radius: ${({ theme }) => theme.border.radius.md};
-  box-shadow: ${({ theme }) => theme.boxShadow.strong};
-  font-family: ${({ theme }) => theme.font.family};
-  left: 50%;
-  max-width: 640px;
-  overflow: hidden;
-  padding: 0;
-  padding: ${({ theme }) => theme.spacing(1)};
-  position: fixed;
-  top: 30%;
-  transform: ${() =>
-    useIsMobile() ? 'translateX(-49.5%)' : 'translateX(-50%)'};
-  width: ${() => (useIsMobile() ? 'calc(100% - 40px)' : '100%')};
-  z-index: 1000;
-`;
-
-export const StyledInput = styled(Command.Input)`
-  background: ${({ theme }) => theme.background.primary};
-  border: none;
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
-  border-radius: 0;
-  color: ${({ theme }) => theme.font.color.primary};
-  font-size: ${({ theme }) => theme.font.size.lg};
-  margin: 0;
-  outline: none;
-  padding: ${({ theme }) => theme.spacing(5)};
-  width: 100%;
-  &::placeholder {
-    color: ${({ theme }) => theme.font.color.light};
-  }
-`;
-
-export const StyledList = styled(Command.List)`
-  background: ${({ theme }) => theme.background.secondary};
-  height: min(300px, var(--cmdk-list-height));
-  max-height: 400px;
-  overflow: auto;
-  overscroll-behavior: contain;
-  transition: 100ms ease;
-  transition-property: height;
-`;
-
-export const StyledEmpty = styled(Command.Empty)`
-  align-items: center;
-  color: ${({ theme }) => theme.font.color.light};
-  display: flex;
-  font-size: ${({ theme }) => theme.font.size.md};
-  height: 64px;
-  justify-content: center;
-  white-space: pre-wrap;
-`;

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

@@ -20,13 +20,14 @@ const meta: Meta<typeof CommandMenu> = {
   decorators: [
     ComponentWithRouterDecorator,
     (Story) => {
-      const { addToCommandMenu, setToIntitialCommandMenu, openCommandMenu } =
+      const { addToCommandMenu, setToIntitialCommandMenu, toggleCommandMenu } =
         useCommandMenu();
 
       useEffect(() => {
         setToIntitialCommandMenu();
         addToCommandMenu([
           {
+            id: 'create-task',
             to: '',
             label: 'Create Task',
             type: CommandType.Create,
@@ -34,6 +35,7 @@ const meta: Meta<typeof CommandMenu> = {
             onCommandClick: () => console.log('create task click'),
           },
           {
+            id: 'create-note',
             to: '',
             label: 'Create Note',
             type: CommandType.Create,
@@ -41,8 +43,8 @@ const meta: Meta<typeof CommandMenu> = {
             onCommandClick: () => console.log('create note click'),
           },
         ]);
-        openCommandMenu();
-      }, [addToCommandMenu, setToIntitialCommandMenu, openCommandMenu]);
+        toggleCommandMenu();
+      }, [addToCommandMenu, setToIntitialCommandMenu, toggleCommandMenu]);
 
       return <Story />;
     },

front/src/modules/command-menu/constants/commandMenuCommands.ts

@@ -10,6 +10,7 @@ import { Command, CommandType } from '../types/Command';
 
 export const commandMenuCommands: Command[] = [
   {
+    id: 'go-to-people',
     to: '/objects/people',
     label: 'Go to People',
     type: CommandType.Navigate,
@@ -18,6 +19,7 @@ export const commandMenuCommands: Command[] = [
     Icon: IconUser,
   },
   {
+    id: 'go-to-companies',
     to: '/objects/companies',
     label: 'Go to Companies',
     type: CommandType.Navigate,
@@ -26,6 +28,7 @@ export const commandMenuCommands: Command[] = [
     Icon: IconBuildingSkyscraper,
   },
   {
+    id: 'go-to-activities',
     to: '/objects/opportunities',
     label: 'Go to Opportunities',
     type: CommandType.Navigate,
@@ -34,6 +37,7 @@ export const commandMenuCommands: Command[] = [
     Icon: IconTargetArrow,
   },
   {
+    id: 'go-to-settings',
     to: '/settings/profile',
     label: 'Go to Settings',
     type: CommandType.Navigate,
@@ -42,6 +46,7 @@ export const commandMenuCommands: Command[] = [
     Icon: IconSettings,
   },
   {
+    id: 'go-to-tasks',
     to: '/tasks',
     label: 'Go to Tasks',
     type: CommandType.Navigate,

front/src/modules/command-menu/states/commandMenuCommandsState.ts

@@ -6,6 +6,7 @@ export const commandMenuCommandsState = atom<Command[]>({
   key: 'command-menu/commandMenuCommandsState',
   default: [
     {
+      id: '',
       to: '',
       label: '',
       type: CommandType.Navigate,

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

@@ -6,6 +6,7 @@ export enum CommandType {
 }
 
 export type Command = {
+  id: string;
   to: string;
   label: string;
   type: CommandType.Navigate | CommandType.Create;