make existing keybinds configurable (#2881)

## Description:

This PR makes several existing keybinds configurable that were
previously fixed and could not be changed in the keybind settings.

This is one of the required PRs to fully remove all keybind explanations
from the HelpModal.

This work is based on the following feedback by @ryanbarlow97:
> "This probably needs to be redone / removed from help, and just have a
section saying how to get to the keybinds modal inside settings"
>
https://github.com/openfrontio/OpenFrontIO/pull/2872#issuecomment-3740006017

Some keybinds described in the HelpModal already existed internally, but
users had no way to change them.
By making these keybinds configurable, we can now safely replace those
explanations with a simple reference to the keybind settings instead.

This helps:
- Remove keybind explanations from the HelpModal

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

aotumuri

Co-authored-by: Ryan <7389646+ryanbarlow97@users.noreply.github.com>

src/client/UserSettingModal.ts

@@ -16,6 +16,9 @@ interface FlagInputModalElement extends HTMLElement {
   returnTo?: string;
 }
 
+const isMac =
+  typeof navigator !== "undefined" && /Mac/.test(navigator.userAgent);
+
 const DefaultKeybinds: Record<string, string> = {
   toggleView: "Space",
   buildCity: "Digit1",
@@ -32,6 +35,7 @@ const DefaultKeybinds: Record<string, string> = {
   attackRatioUp: "KeyY",
   boatAttack: "KeyB",
   groundAttack: "KeyG",
+  swapDirection: "KeyU",
   zoomOut: "KeyQ",
   zoomIn: "KeyE",
   centerCamera: "KeyC",
@@ -39,6 +43,8 @@ const DefaultKeybinds: Record<string, string> = {
   moveLeft: "KeyA",
   moveDown: "KeyS",
   moveRight: "KeyD",
+  modifierKey: isMac ? "MetaLeft" : "ControlLeft",
+  altKey: "AltLeft",
 };
 
 @customElement("user-setting")
@@ -575,6 +581,32 @@ export class UserSettingModal extends BaseModal {
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
+      <h2
+        class="text-blue-200 text-xl font-bold mt-8 mb-3 border-b border-white/10 pb-2"
+      >
+        ${translateText("user_setting.menu_shortcuts")}
+      </h2>
+
+      <setting-keybind
+        action="modifierKey"
+        label=${translateText("user_setting.build_menu_modifier")}
+        description=${translateText("user_setting.build_menu_modifier_desc")}
+        .defaultKey=${DefaultKeybinds.modifierKey}
+        .value=${this.getKeyValue("modifierKey")}
+        .display=${this.getKeyChar("modifierKey")}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
+      <setting-keybind
+        action="altKey"
+        label=${translateText("user_setting.emoji_menu_modifier")}
+        description=${translateText("user_setting.emoji_menu_modifier_desc")}
+        .defaultKey=${DefaultKeybinds.altKey}
+        .value=${this.getKeyValue("altKey")}
+        .display=${this.getKeyChar("altKey")}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
       <h2
         class="text-blue-200 text-xl font-bold mt-8 mb-3 border-b border-white/10 pb-2"
       >
@@ -627,6 +659,16 @@ export class UserSettingModal extends BaseModal {
         @change=${this.handleKeybindChange}
       ></setting-keybind>
 
+      <setting-keybind
+        action="swapDirection"
+        label=${translateText("user_setting.swap_direction")}
+        description=${translateText("user_setting.swap_direction_desc")}
+        .defaultKey=${DefaultKeybinds.swapDirection}
+        .value=${this.getKeyValue("swapDirection")}
+        .display=${this.getKeyChar("swapDirection")}
+        @change=${this.handleKeybindChange}
+      ></setting-keybind>
+
       <h2
         class="text-blue-200 text-xl font-bold mt-8 mb-3 border-b border-white/10 pb-2"
       >