feat(ui/frontend): add shortcuts for tools

ui/frontend/Playground.tsx

@@ -11,6 +11,8 @@ import { Orientation } from './types';
 import * as actions from './actions';
 
 import styles from './Playground.module.css';
+import { useKeyDown } from './hooks/shortcuts';
+import { useAppDispatch } from './configureStore';
 
 const TRACK_OPTION_NAME = {
   [Orientation.Horizontal]: 'rowGutters',
@@ -88,15 +90,43 @@ const ResizableArea: React.FC = () => {
 };
 
 const Playground: React.FC = () => {
-  const showNotifications = useSelector(selectors.anyNotificationsToShowSelector);
+  const showNotifications = useSelector(
+    selectors.anyNotificationsToShowSelector
+  );
+
+  const dispatch = useAppDispatch();
+  const handleRustFmt = useCallback((_event) => {
+    dispatch(actions.performFormat());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleClippy = useCallback((_event) => {
+    dispatch(actions.performClippy());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleMiri = useCallback((_event) => {
+    dispatch(actions.performMiri());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  const handleMacroExpansion = useCallback((_event) => {
+    dispatch(actions.performMacroExpansion());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const shortcutMap = new Map([
+    [['Control', 'Alt', 'f'], handleRustFmt],
+    [['Control', 'Alt', 'c'], handleClippy],
+    [['Control', 'Alt', 'm'], handleMiri],
+    [['Control', 'Alt', 'x'], handleMacroExpansion],
+  ]);
+  useKeyDown(shortcutMap);
 
   return (
     <>
       <div className={styles.container}>
         <Header />
         <ResizableArea />
       </div>
-      { showNotifications && <Notifications />}
+      {showNotifications && <Notifications />}
     </>
   );
 }

ui/frontend/ToolsMenu.module.css

@@ -0,0 +1,5 @@
+.shortcut {
+  float: right;
+  background-color: #a0ffa0;
+  border: 2px solid #a0ffa0;
+}

ui/frontend/ToolsMenu.tsx

@@ -9,6 +9,8 @@ import * as selectors from './selectors';
 import * as actions from './actions';
 import { useAppDispatch } from './configureStore';
 
+import styles from './ToolsMenu.module.css';
+
 interface ToolsMenuProps {
   close: () => void;
 }
@@ -46,18 +48,21 @@ const ToolsMenu: React.FC<ToolsMenuProps> = props => {
       <ButtonMenuItem
         name="Rustfmt"
         onClick={format}>
+        <span className={styles.shortcut}>⌘/Ctrl + Alt + f</span>
         <div>Format this code with Rustfmt.</div>
         <MenuAside>{rustfmtVersion} ({rustfmtVersionDetails})</MenuAside>
       </ButtonMenuItem>
       <ButtonMenuItem
         name="Clippy"
         onClick={clippy}>
+        <span className={styles.shortcut}>⌘/Ctrl + Alt + c</span>
         <div>Catch common mistakes and improve the code using the Clippy linter.</div>
         <MenuAside>{clippyVersion} ({clippyVersionDetails})</MenuAside>
       </ButtonMenuItem>
       <ButtonMenuItem
         name="Miri"
         onClick={miri}>
+        <span className={styles.shortcut}>⌘/Ctrl + Alt + m</span>
         <div>
           Execute this program in the Miri interpreter to detect certain
           cases of undefined behavior (like out-of-bounds memory access).
@@ -67,6 +72,7 @@ const ToolsMenu: React.FC<ToolsMenuProps> = props => {
       <ButtonMenuItem
         name="Expand macros"
         onClick={expandMacros}>
+        <span className={styles.shortcut}>⌘/Ctrl + Alt + x</span>
         <div>
           Expand macros in code using the nightly compiler.
         </div>

ui/frontend/hooks/shortcuts.tsx

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export const useKeyDown = (
+  shortcutMap: Map<string[], Function>,
+  node = document
+) => {
+  const [currentShortcutKeys, setCurrentShortcutKeys] = useState<string[]>([]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      // If key is already depressed, return early
+      if (currentShortcutKeys.includes(event.key)) {
+        return;
+      }
+      const newShortcutKeys = currentShortcutKeys.concat([event.key]);
+      for (const [keys, cb] of shortcutMap.entries()) {
+        // Note: this implementation cares about order of keys pressed
+        if (
+          keys.length === newShortcutKeys.length &&
+          keys.every((val, i) => newShortcutKeys[i] === val)
+        ) {
+          cb(event);
+        }
+      }
+      setCurrentShortcutKeys(newShortcutKeys);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [shortcutMap]
+  );
+
+  const handleKeyUp = (event: KeyboardEvent) => {
+    setCurrentShortcutKeys((prev) => {
+      const keyIndex = prev.indexOf(event.key);
+      if (keyIndex !== -1) {
+        return prev.slice(0, keyIndex).concat(prev.slice(keyIndex + 1));
+      }
+      return prev;
+    });
+  };
+
+  useEffect(() => {
+    node.addEventListener('keydown', handleKeyDown);
+    node.addEventListener('keyup', handleKeyUp);
+    return () => {
+      node.removeEventListener('keydown', handleKeyDown);
+      node.removeEventListener('keydown', handleKeyUp);
+    };
+  }, [handleKeyDown, node]);
+};