Add keyboard shortcut for help screen (#4315)

* Add keyboard shortcut for help screen

* Make escape key go back to the previous screen

* Use key instead of which

* Use router for navigating back

* Use alt instead of cmd/ctrl

client/components/Windows/Help.vue

@@ -199,6 +199,16 @@
 				</div>
 			</div>
 
+			<div class="help-item">
+				<div class="subject">
+					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>/</kbd></span>
+					<span v-else><kbd>⌥</kbd> <kbd>/</kbd></span>
+				</div>
+				<div class="description">
+					<p>Switch to the help menu.</p>
+				</div>
+			</div>
+
 			<div class="help-item">
 				<div class="subject">
 					<span><kbd>Esc</kbd></span>

client/js/keybinds.js

@@ -3,7 +3,7 @@
 import Mousetrap from "mousetrap";
 
 import store from "./store";
-import {switchToChannel} from "./router";
+import {switchToChannel, router, navigate} from "./router";
 import isChannelCollapsed from "./helpers/isChannelCollapsed";
 import isIgnoredKeybind from "./helpers/isIgnoredKeybind";
 
@@ -107,6 +107,17 @@ Mousetrap.bind(["alt+a"], function (e) {
 	return false;
 });
 
+// Show the help menu.
+Mousetrap.bind(["alt+/"], function (e) {
+	if (isIgnoredKeybind(e)) {
+		return true;
+	}
+
+	navigate("Help");
+
+	return false;
+});
+
 function jumpToChannel(targetChannel) {
 	switchToChannel(targetChannel);
 
@@ -156,6 +167,12 @@ const ignoredKeys = {
 };
 
 document.addEventListener("keydown", (e) => {
+	// Allow navigating back to the previous page when on the help screen.
+	if (e.key === "Escape" && router.currentRoute.name === "Help") {
+		router.go(-1);
+		return;
+	}
+
 	// Ignore any key that uses alt modifier
 	// Ignore keys defined above
 	if (e.altKey || ignoredKeys[e.which]) {