Add NumLock toggle button for Mac keyboard numpad support

desktop/src/renderer/src/components/keyboard/index.tsx

@@ -29,12 +29,13 @@ export const Keyboard = (): ReactElement => {
       pressedModifiersRef.current.add(event.code)
     } else {
       const keyCode = KeyboardCodes.get(event.code)
-      if (
-        keyCode !== undefined &&
-        !pressedKeysRef.current.has(keyCode) &&
-        pressedKeysRef.current.size < MAX_SIMULTANEOUS_KEYS
-      ) {
-        pressedKeysRef.current.add(keyCode)
+      if (keyCode !== undefined) {
+        if (
+          !pressedKeysRef.current.has(keyCode) &&
+          pressedKeysRef.current.size < MAX_SIMULTANEOUS_KEYS
+        ) {
+          pressedKeysRef.current.add(keyCode)
+        }
       }
     }
 

desktop/src/renderer/src/components/menu/keyboard/index.tsx

@@ -5,13 +5,15 @@ import { KeyboardIcon } from 'lucide-react';
 import { Paste } from './paste';
 import { VirtualKeyboard } from './virtual-keyboard';
 import { KeyboardShortcutsMenu } from './shortcuts-menu';
+import { NumLock } from './numlock';
 
 export const Keyboard = (): ReactElement => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const content = (
     <>
       <Paste />
+      <NumLock />
       <VirtualKeyboard />
       <KeyboardShortcutsMenu />
     </>

desktop/src/renderer/src/components/menu/keyboard/numlock.tsx

@@ -0,0 +1,32 @@
+import { ReactElement } from 'react'
+import { useTranslation } from 'react-i18next'
+import { IpcEvents } from '@common/ipc-events'
+
+export const NumLock = (): ReactElement => {
+  const { t } = useTranslation()
+
+  async function sendNumLock() {
+    // NumLock key code is 83
+    const modifiers = 0x00
+    const keys = [0x00, 0x00, 83, 0x00, 0x00, 0x00]
+
+    // Send key down
+    await window.electron.ipcRenderer.invoke(IpcEvents.SEND_KEYBOARD, modifiers, keys)
+
+    // Wait a bit
+    await new Promise(resolve => setTimeout(resolve, 50))
+
+    // Send key up (all zeros)
+    const releaseKeys = [0x00, 0x00, 0x00, 0x00, 0x00, 0x00]
+    await window.electron.ipcRenderer.invoke(IpcEvents.SEND_KEYBOARD, modifiers, releaseKeys)
+  }
+
+  return (
+    <div
+      className="flex h-[36px] cursor-pointer items-center justify-between rounded px-3 hover:bg-neutral-700/70"
+      onClick={sendNumLock}
+    >
+      <span>NumLock</span>
+    </div>
+  )
+}