refactor: optimize keyboard keys and refactor keyboard shortcut

Author: wj-xiao

browser/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-scroll-area": "^1.2.10",
     "antd": "^5.22.2",
     "clsx": "^2.1.1",
     "i18next": "^24.0.5",

browser/pnpm-lock.yaml

@@ -4,7 +4,7 @@ import { device } from '@/libs/device';
 import { Modifiers } from '@/libs/device/keyboard.ts';
 import { KeyboardCodes } from '@/libs/keyboard';
 
-const MAX_SIMULTANEOUS_KEYS = 4;
+const MAX_SIMULTANEOUS_KEYS = 6;
 const ModifierKeys = new Set(['Control', 'Shift', 'Alt', 'Meta']);
 
 export const Keyboard = () => {
@@ -44,7 +44,7 @@ export const Keyboard = () => {
       }
     }
 
-    await sendKeyData(event);
+    await sendKeyData();
   }
 
   // release button
@@ -61,7 +61,7 @@ export const Keyboard = () => {
       }
     }
 
-    await sendKeyData(event);
+    await sendKeyData();
   }
 
   // release all keys when page loses focus
@@ -86,11 +86,13 @@ export const Keyboard = () => {
   }
 
   // send keyboard data
-  async function sendKeyData(event: KeyboardEvent) {
-    const modifiers = Modifiers.getModifiers(event, pressedModifiersRef.current);
+  async function sendKeyData() {
+    const modifiers = new Modifiers();
+    pressedModifiersRef.current.forEach((code) => {
+      modifiers.setModifier(code);
+    });
+
     const keys = [
-      0x00,
-      0x00,
       ...Array.from(pressedKeysRef.current),
       ...new Array(MAX_SIMULTANEOUS_KEYS - pressedKeysRef.current.size).fill(0x00)
     ];

browser/src/components/keyboard/index.tsx

@@ -3,18 +3,18 @@ import { Popover } from 'antd';
 import { KeyboardIcon } from 'lucide-react';
 
 import { Paste } from './paste.tsx';
+import { Shortcuts } from './shortcuts';
 import { VirtualKeyboard } from './virtual-keyboard.tsx';
-import { KeyboardShortcutsMenu } from './shortcuts-menu.tsx';
 
 export const Keyboard = () => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 
   const content = (
-    <>
+    <div className="flex flex-col space-y-0.5">
       <Paste />
       <VirtualKeyboard />
-      <KeyboardShortcutsMenu />
-    </>
+      <Shortcuts />
+    </div>
   );
 
   return (