Refactoring shortcuts and commandbar (#412)

* Begin refactoring shortcuts and commandbar

* Continue refacto hotkeys

* Remove debug logs

* Add new story

* Simplify hotkeys

* Simplify hotkeys

---------

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

front/src/modules/search/components/CommandMenu.tsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { useNavigate } from 'react-router-dom';
-
-import {
-  StyledDialog,
-  StyledEmpty,
-  StyledGroup,
-  StyledInput,
-  StyledItem,
-  StyledList,
-  // StyledSeparator,
-} from './CommandMenuStyles';
-
-export const CommandMenu = ({ initiallyOpen = false }) => {
-  const [open, setOpen] = React.useState(initiallyOpen);
-
-  useHotkeys(
-    'ctrl+k,meta+k',
-    () => {
-      setOpen((prevOpen) => !prevOpen);
-    },
-    {
-      preventDefault: true,
-      enableOnContentEditable: true,
-      enableOnFormTags: true,
-    },
-    [setOpen],
-  );
-
-  const navigate = useNavigate();
-
-  return (
-    <StyledDialog
-      open={open}
-      onOpenChange={setOpen}
-      label="Global Command Menu"
-    >
-      <StyledInput />
-      <StyledList>
-        <StyledEmpty>No results found.</StyledEmpty>
-
-        <StyledGroup heading="Go to">
-          <StyledItem
-            onSelect={() => {
-              setOpen(false);
-              navigate('/people');
-            }}
-          >
-            People
-          </StyledItem>
-          <StyledItem
-            onSelect={() => {
-              setOpen(false);
-              navigate('/companies');
-            }}
-          >
-            Companies
-          </StyledItem>
-          <StyledItem
-            onSelect={() => {
-              setOpen(false);
-              navigate('/settings/profile');
-            }}
-          >
-            Settings
-          </StyledItem>
-        </StyledGroup>
-      </StyledList>
-    </StyledDialog>
-  );
-};

front/src/modules/search/components/CommandMenuStyles.tsx

@@ -1,103 +0,0 @@
-import styled from '@emotion/styled';
-import { Command } from 'cmdk';
-
-export const StyledDialog = styled(Command.Dialog)`
-  background: ${(props) => props.theme.primaryBackground};
-  border-radius: ${(props) => props.theme.borderRadius};
-  box-shadow: ${(props) => props.theme.modalBoxShadow};
-  font-family: ${(props) => props.theme.fontFamily};
-  left: 50%;
-  max-width: 640px;
-  overflow: hidden;
-  padding: 0;
-  position: fixed;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-`;
-
-export const StyledInput = styled(Command.Input)`
-  background: ${(props) => props.theme.primaryBackground};
-  border: none;
-  border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
-  border-radius: 0;
-  caret-color: ${(props) => props.theme.blue};
-  color: ${(props) => props.theme.text100};
-  font-size: ${(props) => props.theme.fontSizeLarge};
-  margin: 0;
-  outline: none;
-  padding: ${(props) => props.theme.spacing(5)};
-  width: 100%;
-`;
-
-export const StyledItem = styled(Command.Item)`
-  align-items: center;
-  color: ${(props) => props.theme.text100};
-  cursor: pointer;
-  display: flex;
-  font-size: ${(props) => props.theme.fontSizeMedium};
-  gap: ${(props) => props.theme.spacing(3)};
-  height: 48px;
-  padding: 0 ${(props) => props.theme.spacing(4)};
-  position: relative;
-  transition: all 150ms ease;
-  transition-property: none;
-  user-select: none;
-  &:hover {
-    background: ${(props) => props.theme.lightBackgroundTransparent};
-  }
-  &[data-selected='true'] {
-    background: ${(props) => props.theme.secondaryBackground};
-    &:after {
-      background: ${(props) => props.theme.blue};
-      content: '';
-      height: 100%;
-      left: 0;
-      position: absolute;
-      width: 3px;
-      z-index: ${(props) => props.theme.lastLayerZIndex};
-    }
-  }
-  &[data-disabled='true'] {
-    color: ${(props) => props.theme.text30};
-    cursor: not-allowed;
-  }
-  svg {
-    color: ${(props) => props.theme.text80};
-    height: 16px;
-    width: 16px;
-  }
-`;
-
-export const StyledList = styled(Command.List)`
-  background: ${(props) => props.theme.secondaryBackground};
-  height: min(300px, var(--cmdk-list-height));
-  max-height: 400px;
-  overflow: auto;
-  overscroll-behavior: contain;
-  transition: 100ms ease;
-  transition-property: height;
-`;
-
-export const StyledGroup = styled(Command.Group)`
-  [cmdk-group-heading] {
-    align-items: center;
-    color: ${(props) => props.theme.text30};
-    display: flex;
-    font-size: ${(props) => props.theme.fontSizeExtraSmall};
-    padding: ${(props) => props.theme.spacing(2)};
-    user-select: none;
-  }
-`;
-
-export const StyledEmpty = styled(Command.Empty)`
-  align-items: center;
-  color: ${(props) => props.theme.text30};
-  display: flex;
-  font-size: ${(props) => props.theme.fontSizeMedium};
-  height: 64px;
-  justify-content: center;
-  white-space: pre-wrap;
-`;
-
-export const StyledSeparator = styled(Command.Separator)``;

front/src/modules/search/components/__stories__/CommandMenu.stories.tsx

@@ -1,22 +0,0 @@
-import { MemoryRouter } from 'react-router-dom';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
-
-import { CommandMenu } from '../CommandMenu';
-
-const meta: Meta<typeof CommandMenu> = {
-  title: 'Modules/Search/CommandMenu',
-  component: CommandMenu,
-};
-
-export default meta;
-type Story = StoryObj<typeof CommandMenu>;
-
-export const Default: Story = {
-  render: getRenderWrapperForComponent(
-    <MemoryRouter>
-      <CommandMenu initiallyOpen={true} />
-    </MemoryRouter>,
-  ),
-};