Add generic 104 key layout for virtual kbd

web/src/assets/styles/keyboard.css

@@ -79,18 +79,22 @@
   box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
 }
 
-.hg-button.hg-functionBtn.hg-button-space {
+.hg-layout-default .hg-button.hg-functionBtn.hg-button-space {
+  width: 250px;
+}
+
+.hg-layout-mac .hg-button.hg-functionBtn.hg-button-space {
   width: 350px;
 }
 
-.simple-keyboard.hg-layout-default .hg-button.hg-highlight {
+.simple-keyboard.hg-layout-default .simple-keyboard.hg-layout-mac .hg-button.hg-highlight {
   background: rgb(37 99 235);
   border-bottom: 1px solid #2563eb;
   box-shadow: 0 1px 3px 0 rgb(37 99 235 / 0.1), 0 1px 2px -1px rgb(37 99 235 / 0.1);
   color: white;
 }
 
-.simple-keyboard.hg-layout-default .hg-button.hg-double{
+.simple-keyboard.hg-layout-default .simple-keyboard.hg-layout-mac .hg-button.hg-double{
   text-align: center;
   font-size: 14px;
   line-height: 16px;

web/src/pages/desktop/keyboard/mappings.ts

@@ -106,6 +106,8 @@ export const KeyboardCodes: Map<string, number> = new Map([
   ['NumpadDecimal', 99],
   ['KeyKpDot', 99],
 
+  ['Menu', 118],
+
   ['ControlLeft', 224],
   ['ShiftLeft', 225],
   ['AltLeft', 226],

web/src/pages/desktop/keyboard/virtual-keyboard.tsx

@@ -4,6 +4,8 @@ import { useAtom } from 'jotai';
 import { XIcon } from 'lucide-react';
 import Keyboard, { KeyboardButtonTheme } from 'react-simple-keyboard';
 import { Drawer } from 'vaul';
+import { Radio } from 'antd';
+import type { RadioChangeEvent } from 'antd';
 
 import 'react-simple-keyboard/build/css/index.css';
 import '@/assets/styles/keyboard.css';
@@ -25,11 +27,17 @@ type KeyboardProps = {
   isBigScreen: boolean;
 };
 
+const keyboardLayoutOptions = [
+  { label: 'Win', value: 'default' },
+  { label: 'Mac', value: 'mac' }
+];
+
 export const VirtualKeyboard = ({ isBigScreen }: KeyboardProps) => {
   const [isKeyboardOpen, setIsKeyboardOpen] = useAtom(isKeyboardOpenAtom);
 
   const [isCapsLock, setIsCapsLock] = useState(false);
   const [activeModifierKeys, setActiveModifierKeys] = useState<string[]>([]);
+  const [layout, setLayout] = useState('default');
 
   const keyboardRef = useRef<any>(null);
 
@@ -126,6 +134,10 @@ export const VirtualKeyboard = ({ isBigScreen }: KeyboardProps) => {
     return theme;
   }
 
+  function selectLayout({ target: { value } }: RadioChangeEvent) {
+    setLayout(value);
+  }
+
   return (
     <Drawer.Root open={isKeyboardOpen} onOpenChange={setIsKeyboardOpen} modal={false}>
       <Drawer.Portal>
@@ -137,7 +149,16 @@ export const VirtualKeyboard = ({ isBigScreen }: KeyboardProps) => {
         >
           {/* header */}
           <div className="flex items-center justify-between px-3 py-1">
-            <div className="w-[100px] text-sm font-bold text-neutral-500">Keyboard</div>
+            <div className="flex flex-row">
+              <div className="w-fit my-auto mr-2 text-sm font-bold text-neutral-500">Keyboard</div>
+              <Radio.Group
+                options={keyboardLayoutOptions}
+                onChange={selectLayout}
+                value={layout}
+                optionType='button'
+                buttonStyle='solid'
+              />
+            </div>
             <div className="h-1.5 w-12 flex-shrink-0 rounded-full bg-zinc-300" />
             <div className="flex w-[100px] items-center justify-end">
               <div
@@ -157,6 +178,7 @@ export const VirtualKeyboard = ({ isBigScreen }: KeyboardProps) => {
               keyboardRef={(r) => (keyboardRef.current = r)}
               onKeyPress={onKeyPress}
               onKeyReleased={onKeyReleased}
+              layoutName={layout}
               {...keyboardOptions}
             />
 

web/src/pages/desktop/keyboard/virtual-keys.ts

@@ -1,9 +1,17 @@
 // main keys
 export const keyboardOptions = {
-  theme: 'simple-keyboard hg-theme-default hg-layout-default',
+  theme: 'simple-keyboard hg-theme-default',
   baseClass: 'simple-keyboard-main',
   layout: {
     default: [
+      '{escape} F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12',
+      'Backquote Digit1 Digit2 Digit3 Digit4 Digit5 Digit6 Digit7 Digit8 Digit9 Digit0 Minus Equal {backspace}',
+      '{tab} KeyQ KeyW KeyE KeyR KeyT KeyY KeyU KeyI KeyO KeyP BracketLeft BracketRight Backslash',
+      '{capslock} KeyA KeyS KeyD KeyF KeyG KeyH KeyJ KeyK KeyL Semicolon Quote {enter}',
+      '{shiftleft} KeyZ KeyX KeyC KeyV KeyB KeyN KeyM Comma Period Slash {shiftright}',
+      '{controlleft} {winleft} {altleft} {space} {altright} {winright} {menu} {controlright}'
+    ],
+    mac: [
       '{escape} F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12',
       'Backquote Digit1 Digit2 Digit3 Digit4 Digit5 Digit6 Digit7 Digit8 Digit9 Digit0 Minus Equal {backspace}',
       '{tab} KeyQ KeyW KeyE KeyR KeyT KeyY KeyU KeyI KeyO KeyP BracketLeft BracketRight Backslash',
@@ -74,15 +82,19 @@ export const keyboardOptions = {
     '{controlleft}': 'Ctrl',
     '{altleft}': 'Alt',
     '{metaleft}': 'Cmd',
+    '{winleft}': 'Win',
     '{space}': 'Space',
     '{metaright}': 'Cmd',
-    '{altright}': 'Alt'
+    '{winright}': 'Win',
+    '{altright}': 'Alt',
+    '{menu}': "Menu",
+    '{controlright}': 'Ctrl',
   }
 };
 
 // control keys
 export const keyboardControlPadOptions = {
-  theme: 'simple-keyboard hg-theme-default hg-layout-default',
+  theme: 'simple-keyboard hg-theme-default',
   baseClass: 'simple-keyboard-control',
   layout: {
     default: [
@@ -107,7 +119,7 @@ export const keyboardControlPadOptions = {
 
 // arrow keys
 export const keyboardArrowsOptions = {
-  theme: 'simple-keyboard hg-theme-default hg-layout-default',
+  theme: 'simple-keyboard hg-theme-default',
   baseClass: 'simple-keyboard-arrows',
   layout: {
     default: ['{arrowup}', '{arrowleft} {arrowdown} {arrowright}']
@@ -126,8 +138,10 @@ export const specialKeyMap = new Map([
   ['{controlleft}', 'ControlLeft'],
   ['{altleft}', 'AltLeft'],
   ['{metaleft}', 'MetaLeft'],
+  ['{winleft}', 'WinLeft'],
   ['{space}', 'Space'],
   ['{metaright}', 'MetaRight'],
+  ['{winright}', 'WinRight'],
   ['{altright}', 'AltRight'],
   ['{prtscr}', 'PrintScreen'],
   ['{scrolllock}', 'ScrollLock'],
@@ -150,10 +164,12 @@ export const modifierKeys = [
   '{controlleft}',
   '{altleft}',
   '{metaleft}',
+  '{winleft}',
   '{shiftright}',
   '{controlright}',
   '{altright}',
-  '{metaright}'
+  '{metaright}',
+  '{winright}'
 ];
 
 // double line display buttons