feat(frontend): add hotkey registration function and hotkey helper modal (#12128)

* add new hotkey registration interface and hotkey modal

* fix import

* add printing hotkey

* add todo

* add hotkey for barcode scanning

* register spotlight shortcut key

* sort keys

* render nicer overview

* fix props

* expose for plugins

---------

Co-authored-by: Oliver <oliver.henry.walters@gmail.com>

src/frontend/lib/functions/Events.tsx

@@ -1,6 +1,37 @@
+import { useHotkeys } from '@mantine/hooks';
+import type { HotkeyItemOptions } from '@mantine/hooks';
+import { useEffect } from 'react';
+import { useLocalLibState } from '..';
+
 // Helper function to cancel event propagation
 export function cancelEvent(event: any) {
   event?.preventDefault();
   event?.stopPropagation();
   event?.nativeEvent?.stopImmediatePropagation();
 }
+
+export type InvenTreeHotkeyItem = [
+  string,
+  string,
+  (event: KeyboardEvent) => void,
+  HotkeyItemOptions?
+];
+
+export function useInvenTreeHotkeys(hotkeys: InvenTreeHotkeyItem[]) {
+  // Register the hotkeys using the Mantine hook
+  useHotkeys(
+    hotkeys.map(([key, _, handler, options]) => [key, handler, options])
+  );
+
+  // register to helper state to store hotkeys
+  // This allows us to display the hotkeys in the UI
+  const keyelems: [string, string][] = hotkeys.map(([key, description]) => [
+    key,
+    description
+  ]);
+  useEffect(() => {
+    useLocalLibState.getState().addHotkeys(keyelems);
+    return () =>
+      useLocalLibState.getState().removeHotkeys(keyelems.map(([key]) => key));
+  }, []);
+}