From 7f1982b38f59ed0fb0ff189f76c012c28a09f94f Mon Sep 17 00:00:00 2001
From: SabreML <57483089+SabreML@users.noreply.github.com>
Date: Wed, 3 Apr 2024 00:16:56 +0100
Subject: [PATCH 1/2] Javascript is fun and very intuitive

---
 code/modules/client/tgui_macro.dm          |  3 +-
 tgui/packages/tgui/interfaces/KeyBinds.jsx | 45 ++++++++++++++++------
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/code/modules/client/tgui_macro.dm b/code/modules/client/tgui_macro.dm
index cd621cebab84..28939fed69ca 100644
--- a/code/modules/client/tgui_macro.dm
+++ b/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
diff --git a/tgui/packages/tgui/interfaces/KeyBinds.jsx b/tgui/packages/tgui/interfaces/KeyBinds.jsx
index 63fc25aca3c5..f3e8f1dde883 100644
--- a/tgui/packages/tgui/interfaces/KeyBinds.jsx
+++ b/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,36 @@ 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
+                        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 +152,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 +166,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}

From 2580c0573c9ec24afc58357ccf8f0a3101820e3c Mon Sep 17 00:00:00 2001
From: SabreML <57483089+SabreML@users.noreply.github.com>
Date: Sat, 6 Apr 2024 19:42:05 +0100
Subject: [PATCH 2/2] Simple tooltip

---
 tgui/packages/tgui/interfaces/KeyBinds.jsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/tgui/packages/tgui/interfaces/KeyBinds.jsx b/tgui/packages/tgui/interfaces/KeyBinds.jsx
index f3e8f1dde883..b387d6a8dba5 100644
--- a/tgui/packages/tgui/interfaces/KeyBinds.jsx
+++ b/tgui/packages/tgui/interfaces/KeyBinds.jsx
@@ -63,6 +63,8 @@ export const KeyBinds = (props) => {
                     </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.