fix(ui): Correct virtual keyboard display when shift key is down.

Somewhere along the way, the handling of the shift-key state for letters and numbers was lost and we stopped displaying the capital/symbol for the key.
Also update page up and page down to have the space in the on-screen key.

ui/src/components/VirtualKeyboard.tsx

@@ -292,7 +292,7 @@ function KeyboardWrapper() {
                         ],
                       }}
                       disableButtonHold={true}
-                      mergeDisplay={true}
+                      syncInstanceInputs={true}
                       debug={false}
                     />
 
@@ -300,34 +300,25 @@ function KeyboardWrapper() {
                       <Keyboard
                         baseClass="simple-keyboard-control"
                         theme="simple-keyboard hg-theme-default hg-layout-default"
+                        layoutName={layoutName}
+                        onKeyPress={onKeyDown}
+                        display={keyDisplayMap}
                         layout={{
                           default: ["Home Pageup", "Delete End Pagedown"],
                         }}
-                        display={{
-                          Home: "home",
-                          Pageup: "pageup",
-                          Delete: "delete",
-                          End: "end",
-                          Pagedown: "pagedown",
                         }}
                         syncInstanceInputs={true}
-                        onKeyPress={onKeyDown}
-                        mergeDisplay={true}
                         debug={false}
                       />
                       <Keyboard
                         baseClass="simple-keyboard-arrows"
                         theme="simple-keyboard hg-theme-default hg-layout-default"
-                        display={{
+                        onKeyPress={onKeyDown}
-                          ArrowLeft: "←",
+                        display={keyDisplayMap}
-                          ArrowRight: "→",
-                          ArrowUp: "↑",
-                          ArrowDown: "↓",
-                        }}
                         layout={{
                           default: ["ArrowUp", "ArrowLeft ArrowDown ArrowRight"],
                         }}
-                        onKeyPress={onKeyDown}
+                        syncInstanceInputs={true}
                         debug={false}
                       />
                     </div>

ui/src/keyboardMappings.ts

@@ -259,22 +259,45 @@ export const keyDisplayMap: Record<string, string> = {
   KeyU: "u", KeyV: "v", KeyW: "w", KeyX: "x", KeyY: "y",
   KeyZ: "z",
 
+  // Capital letters
+  "(KeyA)": "A", "(KeyB)": "B", "(KeyC)": "C", "(KeyD)": "D", "(KeyE)": "E",
+  "(KeyF)": "F", "(KeyG)": "G", "(KeyH)": "H", "(KeyI)": "I", "(KeyJ)": "J",
+  "(KeyK)": "K", "(KeyL)": "L", "(KeyM)": "M", "(KeyN)": "N", "(KeyO)": "O",
+  "(KeyP)": "P", "(KeyQ)": "Q", "(KeyR)": "R", "(KeyS)": "S", "(KeyT)": "T",
+  "(KeyU)": "U", "(KeyV)": "V", "(KeyW)": "W", "(KeyX)": "X", "(KeyY)": "Y",
+  "(KeyZ)": "Z",
+
   // Numbers
   Digit1: "1", Digit2: "2", Digit3: "3", Digit4: "4", Digit5: "5",
   Digit6: "6", Digit7: "7", Digit8: "8", Digit9: "9", Digit0: "0",
 
+  // Shifted Numbers
+  "(Digit1)": "!", "(Digit2)": "@", "(Digit3)": "#", "(Digit4)": "$", "(Digit5)": "%",
+  "(Digit6)": "^", "(Digit7)": "&", "(Digit8)": "*", "(Digit9)": "(", "(Digit0)": ")",
+
   // Symbols
   Minus: "-",
+  "(Minus)": "_",
   Equal: "=",
+  "(Equal)": "+",
   BracketLeft: "[",
+   "(BracketLeft)": "{",
   BracketRight: "]",
+  "(BracketRight)": "}",
   Backslash: "\\",
+  "(Backslash)": "|",
   Semicolon: ";",
+  "(Semicolon)": ":",
   Quote: "'",
+  "(Quote)": "\"",
   Comma: ",",
+  "(Comma)": "<",
   Period: ".",
+  "(Period)": ">",
   Slash: "/",
+  "(Slash)": "?",
   Backquote: "`",
+  "(Backquote)": "~",
   IntlBackslash: "\\",
 
   // Function keys