2311 embed keyboard shortcuts (#2507)

* 2311-feat(front): AppHotKeyScope and CustomHotKeyScopes configured

* 2311-feat(front): Groups and Items added

* 2311-fix: pr requested changes

---------

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

front/src/modules/keyboard-shortcut-menu/components/KeyboardShortcutMenu.tsx

@@ -0,0 +1,47 @@
+import { useRecoilValue } from 'recoil';
+
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
+
+import {
+  keyboardShortcutsGeneral,
+  keyboardShortcutsTable,
+} from '../constants/keyboardShortcuts';
+import { useKeyboardShortcutMenu } from '../hooks/useKeyboardShortcutMenu';
+import { isKeyboardShortcutMenuOpenedState } from '../states/isKeyboardShortcutMenuOpenedState';
+
+import { KeyboardMenuDialog } from './KeyboardShortcutMenuDialog';
+import { KeyboardMenuGroup } from './KeyboardShortcutMenuGroup';
+import { KeyboardMenuItem } from './KeyboardShortcutMenuItem';
+
+export const KeyboardShortcutMenu = () => {
+  const { toggleKeyboardShortcutMenu } = useKeyboardShortcutMenu();
+  const isKeyboardShortcutMenuOpened = useRecoilValue(
+    isKeyboardShortcutMenuOpenedState,
+  );
+  useScopedHotkeys(
+    'shift+?,meta+?,esc',
+    () => {
+      toggleKeyboardShortcutMenu();
+    },
+    AppHotkeyScope.KeyboardShortcutMenu,
+    [toggleKeyboardShortcutMenu],
+  );
+
+  return (
+    isKeyboardShortcutMenuOpened && (
+      <KeyboardMenuDialog onClose={toggleKeyboardShortcutMenu}>
+        <KeyboardMenuGroup heading="Table">
+          {keyboardShortcutsTable.map((TableShortcut) => (
+            <KeyboardMenuItem shortcut={TableShortcut} />
+          ))}
+        </KeyboardMenuGroup>
+        <KeyboardMenuGroup heading="General">
+          {keyboardShortcutsGeneral.map((GeneralShortcut) => (
+            <KeyboardMenuItem shortcut={GeneralShortcut} />
+          ))}
+        </KeyboardMenuGroup>
+      </KeyboardMenuDialog>
+    )
+  );
+};