Add keyboard shortcuts (#637)

* Add documentation
* Fix manual styling
* Add dialog for setting Movie images
* Mention manual in README

ui/v2.5/src/components/MainNavbar.tsx

@@ -8,7 +8,7 @@ import {
 import { Nav, Navbar, Button } from "react-bootstrap";
 import { IconName } from "@fortawesome/fontawesome-svg-core";
 import { LinkContainer } from "react-router-bootstrap";
-import { Link, NavLink, useLocation } from "react-router-dom";
+import { Link, NavLink, useLocation, useHistory } from "react-router-dom";
 import { SessionUtils } from "src/utils";
 
 import { Icon } from "src/components/Shared";
@@ -90,6 +90,7 @@ const menuItems: IMenuItem[] = [
 ];
 
 export const MainNavbar: React.FC = () => {
+  const history = useHistory();
   const location = useLocation();
   const [expanded, setExpanded] = useState(false);
   const [showManual, setShowManual] = useState(false);
@@ -120,7 +121,14 @@ export const MainNavbar: React.FC = () => {
     };
   }, [expanded]);
 
-  const path =
+  function goto(page: string) {
+    history.push(page);
+    if (document.activeElement instanceof HTMLElement) {
+      document.activeElement.blur();
+    }
+  }
+
+  const newPath =
     location.pathname === "/performers"
       ? "/performers/new"
       : location.pathname === "/studios"
@@ -129,16 +137,49 @@ export const MainNavbar: React.FC = () => {
       ? "/movies/new"
       : null;
   const newButton =
-    path === null ? (
+    newPath === null ? (
       ""
     ) : (
-      <Link to={path}>
+      <Link to={newPath}>
         <Button variant="primary">
           <FormattedMessage id="new" defaultMessage="New" />
         </Button>
       </Link>
     );
 
+  // set up hotkeys
+  useEffect(() => {
+    Mousetrap.bind("?", () => setShowManual(!showManual));
+    Mousetrap.bind("g s", () => goto("/scenes"));
+    Mousetrap.bind("g v", () => goto("/movies"));
+    Mousetrap.bind("g k", () => goto("/scenes/markers"));
+    Mousetrap.bind("g l", () => goto("/galleries"));
+    Mousetrap.bind("g p", () => goto("/performers"));
+    Mousetrap.bind("g u", () => goto("/studios"));
+    Mousetrap.bind("g t", () => goto("/tags"));
+    Mousetrap.bind("g z", () => goto("/settings"));
+
+    if (newPath) {
+      Mousetrap.bind("n", () => history.push(newPath));
+    }
+
+    return () => {
+      Mousetrap.unbind("?");
+      Mousetrap.unbind("g s");
+      Mousetrap.unbind("g v");
+      Mousetrap.unbind("g k");
+      Mousetrap.unbind("g l");
+      Mousetrap.unbind("g p");
+      Mousetrap.unbind("g u");
+      Mousetrap.unbind("g t");
+      Mousetrap.unbind("g z");
+
+      if (newPath) {
+        Mousetrap.unbind("n");
+      }
+    };
+  });
+
   function maybeRenderLogout() {
     if (SessionUtils.isLoggedIn()) {
       return (