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/ui/layout/page/DefaultLayout.tsx

@@ -6,6 +6,7 @@ import { AuthModal } from '@/auth/components/Modal';
 import { useOnboardingStatus } from '@/auth/hooks/useOnboardingStatus';
 import { OnboardingStatus } from '@/auth/utils/getOnboardingStatus';
 import { CommandMenu } from '@/command-menu/components/CommandMenu';
+import { KeyboardShortcutMenu } from '@/keyboard-shortcut-menu/components/KeyboardShortcutMenu';
 import { NavbarAnimatedContainer } from '@/ui/navigation/navbar/components/NavbarAnimatedContainer';
 import { MOBILE_VIEWPORT } from '@/ui/theme/constants/theme';
 import { AppNavbar } from '~/AppNavbar';
@@ -58,6 +59,7 @@ export const DefaultLayout = ({ children }: DefaultLayoutProps) => {
   return (
     <StyledLayout>
       <CommandMenu />
+      <KeyboardShortcutMenu />
       <NavbarAnimatedContainer>
         <AppNavbar />
       </NavbarAnimatedContainer>

front/src/modules/ui/utilities/hotkey/constants/index.ts

@@ -5,6 +5,7 @@ import { HotkeyScope } from '../types/HotkeyScope';
 export const DEFAULT_HOTKEYS_SCOPE_CUSTOM_SCOPES: CustomHotkeyScopes = {
   commandMenu: true,
   goto: false,
+  keyboardShortcutMenu: true,
 };
 
 export const INITIAL_HOTKEYS_SCOPE: HotkeyScope = {
@@ -12,5 +13,6 @@ export const INITIAL_HOTKEYS_SCOPE: HotkeyScope = {
   customScopes: {
     commandMenu: true,
     goto: true,
+    keyboardShortcutMenu: true,
   },
 };

front/src/modules/ui/utilities/hotkey/hooks/useSetHotkeyScope.ts

@@ -15,7 +15,8 @@ const isCustomScopesEqual = (
 ) => {
   return (
     customScopesA?.commandMenu === customScopesB?.commandMenu &&
-    customScopesA?.goto === customScopesB?.goto
+    customScopesA?.goto === customScopesB?.goto &&
+    customScopesA?.keyboardShortcutMenu === customScopesB?.keyboardShortcutMenu
   );
 };
 
@@ -54,6 +55,7 @@ export const useSetHotkeyScope = () =>
           customScopes: {
             commandMenu: customScopes?.commandMenu ?? true,
             goto: customScopes?.goto ?? false,
+            keyboardShortcutMenu: customScopes?.keyboardShortcutMenu ?? true,
           },
         };
 
@@ -67,6 +69,10 @@ export const useSetHotkeyScope = () =>
           scopesToSet.push(AppHotkeyScope.Goto);
         }
 
+        if (newHotkeyScope?.customScopes?.keyboardShortcutMenu) {
+          scopesToSet.push(AppHotkeyScope.KeyboardShortcutMenu);
+        }
+
         scopesToSet.push(newHotkeyScope.scope);
         set(internalHotkeysEnabledScopesState, scopesToSet);
         set(currentHotkeyScopeState, newHotkeyScope);

front/src/modules/ui/utilities/hotkey/types/AppHotkeyScope.ts

@@ -2,4 +2,5 @@ export enum AppHotkeyScope {
   App = 'app',
   Goto = 'goto',
   CommandMenu = 'command-menu',
+  KeyboardShortcutMenu = 'keyboard-shortcut-menu',
 }

front/src/modules/ui/utilities/hotkey/types/CustomHotkeyScope.ts

@@ -1,4 +1,5 @@
 export type CustomHotkeyScopes = {
   goto?: boolean;
   commandMenu?: boolean;
+  keyboardShortcutMenu?: boolean;
 };