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/hotkeys/hooks/useDirectHotkeys.ts

@@ -0,0 +1,30 @@
+import { useHotkeys } from 'react-hotkeys-hook';
+import {
+  Hotkey,
+  HotkeyCallback,
+  OptionsOrDependencyArray,
+} from 'react-hotkeys-hook/dist/types';
+import { useRecoilState } from 'recoil';
+
+import { pendingHotkeyState } from '../states/pendingHotkeysState';
+
+export function useDirectHotkeys(
+  keys: string,
+  callback: HotkeyCallback,
+  dependencies?: OptionsOrDependencyArray,
+) {
+  const [pendingHotkey, setPendingHotkey] = useRecoilState(pendingHotkeyState);
+
+  const callbackIfDirectKey = function (
+    keyboardEvent: KeyboardEvent,
+    hotkeysEvent: Hotkey,
+  ) {
+    if (!pendingHotkey) {
+      callback(keyboardEvent, hotkeysEvent);
+      return;
+    }
+    setPendingHotkey(null);
+  };
+
+  useHotkeys(keys, callbackIfDirectKey, dependencies);
+}

front/src/modules/hotkeys/hooks/useGoToHotkeys.ts

@@ -0,0 +1,11 @@
+import { useNavigate } from 'react-router-dom';
+
+import { useSequenceHotkeys } from './useSequenceHotkeys';
+
+export function useGoToHotkeys(key: string, location: string) {
+  const navigate = useNavigate();
+
+  useSequenceHotkeys('g', key, () => {
+    navigate(location);
+  });
+}

front/src/modules/hotkeys/hooks/useSequenceHotkeys.ts

@@ -0,0 +1,32 @@
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useRecoilState } from 'recoil';
+
+import { pendingHotkeyState } from '../states/pendingHotkeysState';
+
+export function useSequenceHotkeys(
+  firstKey: string,
+  secondKey: string,
+  callback: () => void,
+) {
+  const [pendingHotkey, setPendingHotkey] = useRecoilState(pendingHotkeyState);
+
+  useHotkeys(
+    firstKey,
+    () => {
+      setPendingHotkey(firstKey);
+    },
+    [pendingHotkey],
+  );
+
+  useHotkeys(
+    secondKey,
+    () => {
+      if (pendingHotkey !== firstKey) {
+        return;
+      }
+      setPendingHotkey(null);
+      callback();
+    },
+    [pendingHotkey, setPendingHotkey],
+  );
+}

front/src/modules/hotkeys/hooks/useUpDownHotkeys.ts

@@ -0,0 +1,31 @@
+import { useHotkeys } from 'react-hotkeys-hook';
+import { HotkeyCallback } from 'react-hotkeys-hook/dist/types';
+import { OptionsOrDependencyArray } from 'react-hotkeys-hook/dist/types';
+
+export function useUpDownHotkeys(
+  upArrowCallBack: HotkeyCallback,
+  downArrownCallback: HotkeyCallback,
+  dependencies?: OptionsOrDependencyArray,
+) {
+  useHotkeys(
+    'up',
+    upArrowCallBack,
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+      preventDefault: true,
+    },
+    dependencies,
+  );
+
+  useHotkeys(
+    'down',
+    downArrownCallback,
+    {
+      enableOnContentEditable: true,
+      enableOnFormTags: true,
+      preventDefault: true,
+    },
+    dependencies,
+  );
+}