'Search by key' button for the Keybind menu (#6070)

# About the pull request

Adds a 'search by key' button to the Keybind menu, which scrolls the
window to the first entry bound to the inputted key.

Ideally this would somehow loop through everything that the key is bound
to, but I haven't been able to figure that out yet.

# Explain why it's good for the game

It's easy to search for the name of a keybind if you already know what
you're looking for, but if for example you're trying to figure out what
the 'F' key is doing, or whether or not a key you want to bind is
already in use, then currently you need to look through the whole list
manually.

# Testing Photographs and Procedure
<details open>
<summary>Screenshots & Videos</summary>


https://github.com/cmss13-devs/cmss13/assets/57483089/791a6855-1b23-40fd-892b-873032956ec4

</details>


# Changelog
:cl:
ui: Added a 'search by key' button to the Keybind menu.
/:cl:

code/modules/client/tgui_macro.dm

@@ -23,11 +23,12 @@ GLOBAL_LIST_EMPTY(ui_data_keybindings)
 
 /datum/tgui_macro/ui_data(mob/user)
 	. = list()
-	.["keybinds"] = prefs.key_bindings
+	.["player_keybinds"] = prefs.key_bindings
 
 /datum/tgui_macro/ui_static_data(mob/user)
 	. = list()
 	.["glob_keybinds"] = GLOB.ui_data_keybindings
+	.["byond_keymap"] = GLOB._kbMap
 
 /datum/tgui_macro/ui_state(mob/user)
 	return GLOB.always_state

tgui/packages/tgui/interfaces/KeyBinds.jsx

@@ -18,7 +18,7 @@ const getAllKeybinds = (glob_keybinds) => {
 
 export const KeyBinds = (props) => {
   const { act, data } = useBackend();
-  const { glob_keybinds } = data;
+  const { player_keybinds, glob_keybinds, byond_keymap } = data;
 
   const [selectedTab, setSelectedTab] = useLocalState('progress', 'ALL');
 
@@ -52,13 +52,38 @@ export const KeyBinds = (props) => {
               }>
               <Flex direction="column">
                 <Flex.Item>
-                  <Box height="5px" />
-                  <Input
-                    value={searchTerm}
-                    onInput={(_, value) => setSearchTerm(value)}
-                    placeholder="Search..."
-                    fluid
-                  />
+                  <Flex align="baseline" mt="5px">
+                    <Flex.Item grow>
+                      <Input
+                        value={searchTerm}
+                        onInput={(_, value) => setSearchTerm(value)}
+                        placeholder="Search..."
+                        fluid
+                      />
+                    </Flex.Item>
+                    <Flex.Item>
+                      <ButtonKeybind
+                        tooltip="Search by key"
+                        tooltipPosition="bottom-start"
+                        icon="keyboard"
+                        onFinish={(keysDown) => {
+                          // The key(s) pressed by the user, byond-ified.
+                          const targetKey = keysDown
+                            .map((k) => byond_keymap[k] || k)
+                            .join('+');
+                          // targetKey's entry in player_keybinds.
+                          const targetEntry = player_keybinds[targetKey];
+                          if (!targetEntry) {
+                            return;
+                          }
+                          // If a keybind was found, scroll to the first match.
+                          document
+                            .getElementById(targetEntry[0])
+                            .scrollIntoView();
+                        }}
+                      />
+                    </Flex.Item>
+                  </Flex>
                 </Flex.Item>
                 <Flex.Item>
                   <Box height="5px" />
@@ -129,11 +154,11 @@ const KeybindsDropdown = (props) => {
 export const KeybindElement = (props) => {
   const { act, data } = useBackend();
   const { keybind } = props;
-  const { keybinds } = data;
+  const { player_keybinds } = data;
 
   const currentBoundKeys = [];
 
-  for (const [key, value] of Object.entries(keybinds)) {
+  for (const [key, value] of Object.entries(player_keybinds)) {
     for (let i = 0; i < value.length; i++) {
       if (value[i] === keybind.name) {
         currentBoundKeys.push(key);
@@ -143,7 +168,7 @@ export const KeybindElement = (props) => {
   }
 
   return (
-    <Flex mt={1}>
+    <Flex id={keybind.name} mt={1}>
       <Flex.Item basis="30%">
         <Box fontSize="115%" color="label" textAlign="center">
           {keybind.full_name}