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/package.json

@@ -22,7 +22,6 @@
     "@types/react-helmet-async": "^1.0.3",
     "afterframe": "^1.0.2",
     "apollo-upload-client": "^17.0.0",
-    "cmdk": "^0.2.0",
     "date-fns": "^2.30.0",
     "deep-equal": "^2.2.2",
     "framer-motion": "^10.12.17",

front/src/AppNavbar.tsx

@@ -19,7 +19,7 @@ import NavTitle from '@/ui/navigation/navbar/components/NavTitle';
 
 export const AppNavbar = () => {
   const currentPath = useLocation().pathname;
-  const { openCommandMenu } = useCommandMenu();
+  const { toggleCommandMenu } = useCommandMenu();
 
   const isInSubMenu = useIsSubMenuNavbarDisplayed();
   const { currentUserDueTaskCount } = useCurrentUserTaskCount();
@@ -32,7 +32,7 @@ export const AppNavbar = () => {
             label="Search"
             Icon={IconSearch}
             onClick={() => {
-              openCommandMenu();
+              toggleCommandMenu();
             }}
             keyboard={['⌘', 'K']}
           />

front/src/effect-components/PageChangeEffect.tsx

@@ -182,6 +182,7 @@ export const PageChangeEffect = () => {
 
     addToCommandMenu([
       {
+        id: 'create-task',
         to: '',
         label: 'Create Task',
         type: CommandType.Create,

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)`
+const StyledGroup = styled.div`
-  [cmdk-group-heading] {
+  align-items: center;
-    align-items: center;
+  color: ${({ theme }) => theme.font.color.light};
-    color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
-    display: flex;
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
-    font-size: ${({ theme }) => theme.font.size.xs};
+  padding-bottom: ${({ theme }) => theme.spacing(2)};
-    font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  padding-left: ${({ theme }) => theme.spacing(2)};
-    padding-bottom: ${({ theme }) => theme.spacing(2)};
+  padding-right: ${({ theme }) => theme.spacing(1)};
-    padding-left: ${({ theme }) => theme.spacing(2)};
+  padding-top: ${({ theme }) => theme.spacing(2)};
-    padding-right: ${({ theme }) => theme.spacing(1)};
+  text-transform: uppercase;
-    padding-top: ${({ theme }) => theme.spacing(2)};
+  user-select: none;
-    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,
+export const StyledDialog = styled.div`
-  StyledEmpty,
+  background: ${({ theme }) => theme.background.primary};
-  StyledInput,
+  border-radius: ${({ theme }) => theme.border.radius.md};
-  StyledList,
+  box-shadow: ${({ theme }) => theme.boxShadow.strong};
-} from './CommandMenuStyles';
+  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 } =
+  const { toggleCommandMenu, closeCommandMenu } = useCommandMenu();
-    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
+    isCommandMenuOpened && (
-      open={isCommandMenuOpened}
+      <StyledDialog>
-      onOpenChange={(opened) => {
+        <StyledInput
-        if (!opened) {
+          value={search}
-          closeCommandMenu();
+          placeholder="Search"
-        }
+          onChange={handleSearchChange}
-      }}
+        />
-      shouldFilter={false}
+        <StyledList>
-      label="Global Command Menu"
+          <ScrollWrapper>
-    >
+            <StyledInnerList>
-      <StyledInput
+              <CommandMenuSelectableListEffect
-        value={search}
+                selectableItemIds={selectableItemIds}
-        placeholder="Search"
+              />
-        onValueChange={setSearch}
+              <SelectableList
-      />
+                selectableListId="command-menu-list"
-      <StyledList>
+                selectableItemIds={selectableItemIds}
-        <StyledEmpty>No results found.</StyledEmpty>
+              >
-        <CommandGroup heading="Create">
+                {!matchingCreateCommand.length &&
-          {matchingCreateCommand.map((cmd) => (
+                  !matchingNavigateCommand.length &&
-            <CommandMenuItem
+                  !people.length &&
-              to={cmd.to}
+                  !companies.length &&
-              key={cmd.label}
+                  !activities.length && (
-              Icon={cmd.Icon}
+                    <StyledEmpty>No results found</StyledEmpty>
-              label={cmd.label}
+                  )}
-              onClick={cmd.onCommandClick}
+                <CommandGroup heading="Create">
-              firstHotKey={cmd.firstHotKey}
+                  {matchingCreateCommand.map((cmd) => (
-              secondHotKey={cmd.secondHotKey}
+                    <SelectableItem itemId={cmd.id} key={cmd.id}>
-            />
+                      <CommandMenuItem
-          ))}
+                        id={cmd.id}
-        </CommandGroup>
+                        to={cmd.to}
-        <CommandGroup heading="Navigate">
+                        key={cmd.id}
-          {matchingNavigateCommand.map((cmd) => (
+                        Icon={cmd.Icon}
-            <CommandMenuItem
+                        label={cmd.label}
-              to={cmd.to}
+                        onClick={cmd.onCommandClick}
-              key={cmd.label}
+                        firstHotKey={cmd.firstHotKey}
-              label={cmd.label}
+                        secondHotKey={cmd.secondHotKey}
-              Icon={cmd.Icon}
+                      />
-              onClick={cmd.onCommandClick}
+                    </SelectableItem>
-              firstHotKey={cmd.firstHotKey}
+                  ))}
-              secondHotKey={cmd.secondHotKey}
+                </CommandGroup>
-            />
+                <CommandGroup heading="Navigate">
-          ))}
+                  {matchingNavigateCommand.map((cmd) => (
-        </CommandGroup>
+                    <SelectableItem itemId={cmd.id} key={cmd.id}>
-        <CommandGroup heading="People">
+                      <CommandMenuItem
-          {people.map((person) => (
+                        id={cmd.id}
-            <CommandMenuItem
+                        to={cmd.to}
-              key={person.id}
+                        key={cmd.id}
-              to={`object/person/${person.id}`}
+                        label={cmd.label}
-              label={person.name?.firstName + ' ' + person.name?.lastName}
+                        Icon={cmd.Icon}
-              Icon={() => (
+                        onClick={cmd.onCommandClick}
-                <Avatar
+                        firstHotKey={cmd.firstHotKey}
-                  type="rounded"
+                        secondHotKey={cmd.secondHotKey}
-                  avatarUrl={person.avatarUrl}
+                      />
-                  colorId={person.id}
+                    </SelectableItem>
-                  placeholder={
+                  ))}
-                    person.name?.firstName + ' ' + person.name?.lastName
+                </CommandGroup>
-                  }
+                <CommandGroup heading="People">
-                />
+                  {people.map((person) => (
-              )}
+                    <SelectableItem itemId={person.id} key={person.id}>
-            />
+                      <CommandMenuItem
-          ))}
+                        id={person.id}
-        </CommandGroup>
+                        key={person.id}
-        <CommandGroup heading="Companies">
+                        to={`object/person/${person.id}`}
-          {companies.map((company) => (
+                        label={
-            <CommandMenuItem
+                          person.name.firstName + ' ' + person.name.lastName
-              key={company.id}
+                        }
-              label={company.name}
+                        Icon={() => (
-              to={`object/company/${company.id}`}
+                          <Avatar
-              Icon={() => (
+                            type="rounded"
-                <Avatar
+                            avatarUrl={null}
-                  colorId={company.id}
+                            colorId={person.id}
-                  placeholder={company.name}
+                            placeholder={
-                  avatarUrl={getLogoUrlFromDomainName(company.domainName)}
+                              person.name.firstName + ' ' + person.name.lastName
-                />
+                            }
-              )}
+                          />
-            />
+                        )}
-          ))}
+                      />
-        </CommandGroup>
+                    </SelectableItem>
-        <CommandGroup heading="Notes">
+                  ))}
-          {activities.map((activity) => (
+                </CommandGroup>
-            <CommandMenuItem
+                <CommandGroup heading="Companies">
-              Icon={IconNotes}
+                  {companies.map((company) => (
-              key={activity.id}
+                    <SelectableItem itemId={company.id} key={company.id}>
-              label={activity.title ?? ''}
+                      <CommandMenuItem
-              onClick={() => openActivityRightDrawer(activity.id)}
+                        id={company.id}
-            />
+                        key={company.id}
-          ))}
+                        label={company.name}
-        </CommandGroup>
+                        to={`object/company/${company.id}`}
-      </StyledList>
+                        Icon={() => (
-    </StyledDialog>
+                          <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();
+        toggleCommandMenu();
-      }, [addToCommandMenu, setToIntitialCommandMenu, openCommandMenu]);
+      }, [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;

front/src/modules/ui/layout/selectable-list/components/SelectableItem.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect, useRef } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import { useSelectableListScopedStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates';
+
+type SelectableItemProps = {
+  itemId: string;
+  children: React.ReactElement;
+};
+
+export const SelectableItem = ({ itemId, children }: SelectableItemProps) => {
+  const { isSelectedItemIdSelector } = useSelectableListScopedStates({
+    itemId: itemId,
+  });
+
+  const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector);
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isSelectedItemId) {
+      scrollRef.current?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [isSelectedItemId]);
+
+  return <div ref={scrollRef}>{children}</div>;
+};

front/src/modules/ui/layout/selectable-list/components/SelectableList.tsx

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import styled from '@emotion/styled';
+
+import { useSelectableListHotKeys } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys';
+import { SelectableListScope } from '@/ui/layout/selectable-list/scopes/SelectableListScope';
+type SelectableListProps = {
+  children: ReactNode;
+  selectableListId: string;
+  selectableItemIds: string[];
+  onSelect?: (selected: string) => void;
+};
+
+const StyledSelectableItemsContainer = styled.div`
+  width: 100%;
+`;
+
+export const SelectableList = ({
+  children,
+  selectableListId,
+}: SelectableListProps) => {
+  useSelectableListHotKeys(selectableListId);
+
+  return (
+    <SelectableListScope selectableListScopeId={selectableListId}>
+      <StyledSelectableItemsContainer>
+        {children}
+      </StyledSelectableItemsContainer>
+    </SelectableListScope>
+  );
+};

front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListHotKeys.tsx

@@ -0,0 +1,88 @@
+import { isNull } from '@sniptt/guards';
+import { useRecoilCallback } from 'recoil';
+import { Key } from 'ts-key-enum';
+
+import { getSelectableListScopedStates } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopedStates';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
+import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
+
+export const useSelectableListHotKeys = (scopeId: string) => {
+  const handleSelect = useRecoilCallback(
+    ({ snapshot, set }) =>
+      (direction: 'up' | 'down') => {
+        const { selectedItemIdState, selectableItemIdsState } =
+          getSelectableListScopedStates({
+            selectableListScopeId: scopeId,
+          });
+        const selectedItemId = getSnapshotValue(snapshot, selectedItemIdState);
+        const selectableItemIds = getSnapshotValue(
+          snapshot,
+          selectableItemIdsState,
+        );
+
+        const computeNextId = (direction: 'up' | 'down') => {
+          if (selectableItemIds.length === 0) {
+            return;
+          }
+
+          if (isNull(selectedItemId)) {
+            return direction === 'up'
+              ? selectableItemIds[selectableItemIds.length - 1]
+              : selectableItemIds[0];
+          }
+
+          const currentIndex = selectableItemIds.indexOf(selectedItemId);
+          if (currentIndex === -1) {
+            return direction === 'up'
+              ? selectableItemIds[selectableItemIds.length - 1]
+              : selectableItemIds[0];
+          }
+
+          return direction === 'up'
+            ? currentIndex == 0
+              ? selectableItemIds[selectableItemIds.length - 1]
+              : selectableItemIds[currentIndex - 1]
+            : currentIndex == selectableItemIds.length - 1
+            ? selectableItemIds[0]
+            : selectableItemIds[currentIndex + 1];
+        };
+
+        const nextId = computeNextId(direction);
+
+        if (nextId) {
+          const { isSelectedItemIdSelector } = getSelectableListScopedStates({
+            selectableListScopeId: scopeId,
+            itemId: nextId,
+          });
+          set(isSelectedItemIdSelector, true);
+          set(selectedItemIdState, nextId);
+        }
+
+        if (selectedItemId) {
+          const { isSelectedItemIdSelector } = getSelectableListScopedStates({
+            selectableListScopeId: scopeId,
+            itemId: selectedItemId,
+          });
+          set(isSelectedItemIdSelector, false);
+        }
+      },
+    [scopeId],
+  );
+
+  useScopedHotkeys(
+    Key.ArrowUp,
+    () => handleSelect('up'),
+    AppHotkeyScope.CommandMenu,
+    [],
+  );
+
+  useScopedHotkeys(
+    Key.ArrowDown,
+    () => handleSelect('down'),
+    AppHotkeyScope.CommandMenu,
+    [],
+  );
+
+  return <></>;
+};

front/src/modules/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates.ts

@@ -0,0 +1,34 @@
+import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
+import { getSelectableListScopedStates } from '@/ui/layout/selectable-list/utils/internal/getSelectableListScopedStates';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+
+type UseSelectableListScopedStatesProps = {
+  selectableListScopeId?: string;
+  itemId?: string;
+};
+
+export const useSelectableListScopedStates = (
+  args?: UseSelectableListScopedStatesProps,
+) => {
+  const { selectableListScopeId, itemId } = args ?? {};
+  const scopeId = useAvailableScopeIdOrThrow(
+    SelectableListScopeInternalContext,
+    selectableListScopeId,
+  );
+
+  const {
+    selectedItemIdState,
+    selectableItemIdsState,
+    isSelectedItemIdSelector,
+  } = getSelectableListScopedStates({
+    selectableListScopeId: scopeId,
+    itemId: itemId,
+  });
+
+  return {
+    scopeId,
+    isSelectedItemIdSelector,
+    selectableItemIdsState,
+    selectedItemIdState,
+  };
+};

front/src/modules/ui/layout/selectable-list/hooks/useSelectableList.ts

@@ -0,0 +1,33 @@
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+
+import { useSelectableListScopedStates } from '@/ui/layout/selectable-list/hooks/internal/useSelectableListScopedStates';
+import { SelectableListScopeInternalContext } from '@/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext';
+import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
+
+type UseSelectableListProps = {
+  selectableListId?: string;
+  itemId?: string;
+};
+
+export const useSelectableList = (props?: UseSelectableListProps) => {
+  const scopeId = useAvailableScopeIdOrThrow(
+    SelectableListScopeInternalContext,
+    props?.selectableListId,
+  );
+
+  const { selectableItemIdsState, isSelectedItemIdSelector } =
+    useSelectableListScopedStates({
+      selectableListScopeId: scopeId,
+      itemId: props?.itemId,
+    });
+
+  const setSelectableItemIds = useSetRecoilState(selectableItemIdsState);
+  const isSelectedItemId = useRecoilValue(isSelectedItemIdSelector);
+
+  return {
+    setSelectableItemIds,
+    isSelectedItemId,
+    selectableListId: scopeId,
+    isSelectedItemIdSelector,
+  };
+};

front/src/modules/ui/layout/selectable-list/scopes/SelectableListScope.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+import { SelectableListScopeInternalContext } from './scope-internal-context/SelectableListScopeInternalContext';
+
+type SelectableListScopeProps = {
+  children: ReactNode;
+  selectableListScopeId: string;
+};
+
+export const SelectableListScope = ({
+  children,
+  selectableListScopeId,
+}: SelectableListScopeProps) => {
+  return (
+    <SelectableListScopeInternalContext.Provider
+      value={{ scopeId: selectableListScopeId }}
+    >
+      {children}
+    </SelectableListScopeInternalContext.Provider>
+  );
+};

front/src/modules/ui/layout/selectable-list/scopes/scope-internal-context/SelectableListScopeInternalContext.ts

@@ -0,0 +1,7 @@
+import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
+import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
+
+type SelectableListScopeInternalContextProps = ScopedStateKey;
+
+export const SelectableListScopeInternalContext =
+  createScopeInternalContext<SelectableListScopeInternalContextProps>();

front/src/modules/ui/layout/selectable-list/states/isSelectedItemIdMapScopedFamilyState.ts

@@ -0,0 +1,9 @@
+import { createScopedFamilyState } from '@/ui/utilities/recoil-scope/utils/createScopedFamilyState';
+
+export const isSelectedItemIdMapScopedFamilyState = createScopedFamilyState<
+  boolean,
+  string
+>({
+  key: 'isSelectedItemIdMapScopedFamilyState',
+  defaultValue: false,
+});

front/src/modules/ui/layout/selectable-list/states/selectableItemIdsScopedState.ts

@@ -0,0 +1,6 @@
+import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+
+export const selectableItemIdsScopedState = createScopedState<string[]>({
+  key: 'selectableItemIdsScopedState',
+  defaultValue: [],
+});

front/src/modules/ui/layout/selectable-list/states/selectedItemIdScopedState.ts

@@ -0,0 +1,6 @@
+import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
+
+export const selectedItemIdScopedState = createScopedState<string | null>({
+  key: 'selectedItemIdScopedState',
+  defaultValue: null,
+});

front/src/modules/ui/layout/selectable-list/states/selectors/isSelectedItemIdScopedFamilySelector.ts

@@ -0,0 +1,26 @@
+import { selectorFamily } from 'recoil';
+
+import { isSelectedItemIdMapScopedFamilyState } from '@/ui/layout/selectable-list/states/isSelectedItemIdMapScopedFamilyState';
+
+export const isSelectedItemIdScopedFamilySelector = selectorFamily({
+  key: 'isSelectedItemIdScopedFamilySelector',
+  get:
+    ({ scopeId, itemId }: { scopeId: string; itemId: string }) =>
+    ({ get }) =>
+      get(
+        isSelectedItemIdMapScopedFamilyState({
+          scopeId: scopeId,
+          familyKey: itemId,
+        }),
+      ),
+  set:
+    ({ scopeId, itemId }: { scopeId: string; itemId: string }) =>
+    ({ set }, newValue) =>
+      set(
+        isSelectedItemIdMapScopedFamilyState({
+          scopeId: scopeId,
+          familyKey: itemId,
+        }),
+        newValue,
+      ),
+});

front/src/modules/ui/layout/selectable-list/utils/internal/getSelectableListScopedStates.ts

@@ -0,0 +1,35 @@
+import { selectableItemIdsScopedState } from '@/ui/layout/selectable-list/states/selectableItemIdsScopedState';
+import { selectedItemIdScopedState } from '@/ui/layout/selectable-list/states/selectedItemIdScopedState';
+import { isSelectedItemIdScopedFamilySelector } from '@/ui/layout/selectable-list/states/selectors/isSelectedItemIdScopedFamilySelector';
+import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
+
+const UNDEFINED_SELECTABLE_ITEM_ID = 'UNDEFINED_SELECTABLE_ITEM_ID';
+
+export const getSelectableListScopedStates = ({
+  selectableListScopeId,
+  itemId,
+}: {
+  selectableListScopeId: string;
+  itemId?: string;
+}) => {
+  const isSelectedItemIdSelector = isSelectedItemIdScopedFamilySelector({
+    scopeId: selectableListScopeId,
+    itemId: itemId ?? UNDEFINED_SELECTABLE_ITEM_ID,
+  });
+
+  const selectedItemIdState = getScopedState(
+    selectedItemIdScopedState,
+    selectableListScopeId,
+  );
+
+  const selectableItemIdsState = getScopedState(
+    selectableItemIdsScopedState,
+    selectableListScopeId,
+  );
+
+  return {
+    isSelectedItemIdSelector,
+    selectableItemIdsState,
+    selectedItemIdState,
+  };
+};

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
-      <MenuItemCommand
+      LeftIcon={props.LeftIcon}
-        LeftIcon={props.LeftIcon}
+      text={props.text}
-        text={props.text}
+      firstHotKey={props.firstHotKey}
-        firstHotKey={props.firstHotKey}
+      secondHotKey={props.secondHotKey}
-        secondHotKey={props.secondHotKey}
+      className={props.className}
-        className={props.className}
+      onClick={props.onClick}
-        onClick={props.onClick}
+      isSelected={false}
-      ></MenuItemCommand>
+    ></MenuItemCommand>
-    </Command>
   ),
   decorators: [ComponentDecorator],
 };
@@ -83,16 +81,15 @@ export const Catalog: CatalogStory<Story, typeof MenuItemCommand> = {
     },
   },
   render: (props) => (
-    <Command>
+    <MenuItemCommand
-      <MenuItemCommand
+      LeftIcon={props.LeftIcon}
-        LeftIcon={props.LeftIcon}
+      text={props.text}
-        text={props.text}
+      firstHotKey={props.firstHotKey}
-        firstHotKey={props.firstHotKey}
+      secondHotKey={props.secondHotKey}
-        secondHotKey={props.secondHotKey}
+      className={props.className}
-        className={props.className}
+      onClick={props.onClick}
-        onClick={props.onClick}
+      isSelected={false}
-      ></MenuItemCommand>
+    ></MenuItemCommand>
-    </Command>
   ),
   decorators: [CatalogDecorator],
 };

front/yarn.lock

@@ -8466,14 +8466,6 @@ clsx@^1.1.1:
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
-cmdk@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-0.2.0.tgz#53c52d56d8776c8bb8ced1055b5054100c388f7c"
-  integrity sha512-JQpKvEOb86SnvMZbYaFKYhvzFntWBeSZdyii0rZPhKJj9uwJBxu4DaVYDrRN7r3mPop56oPhRw+JYWTKs66TYw==
-  dependencies:
-    "@radix-ui/react-dialog" "1.0.0"
-    command-score "0.1.2"
-
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"