Add help dialog with keybindings reference

commands.js

@@ -29,6 +29,9 @@ export default {
 	"disconnect": (app, args) => {
 		app.disconnect();
 	},
+	"help": (app, args) => {
+		app.openHelp();
+	},
 	"join": (app, args) => {
 		var channel = args[0];
 		if (!channel) {

components/app.js

@@ -6,6 +6,7 @@ import BufferHeader from "./buffer-header.js";
 import MemberList from "./member-list.js";
 import Connect from "./connect.js";
 import Join from "./join.js";
+import Help from "./help.js";
 import Composer from "./composer.js";
 import ScrollManager from "./scroll-manager.js";
 import Dialog from "./dialog.js";
@@ -879,6 +880,10 @@ export default class App extends Component {
 		return fromList(buf.members.keys(), prefix);
 	}
 
+	openHelp() {
+		this.setState({ dialog: "help" });
+	}
+
 	handleBufferScrollTop() {
 		var buf = this.state.buffers.get(this.state.activeBuffer);
 		if (!buf || buf.type == BufferType.SERVER) {
@@ -959,6 +964,13 @@ export default class App extends Component {
 
 		var dialog = null;
 		switch (this.state.dialog) {
+		case "help":
+			dialog = html`
+				<${Dialog} title="Help" onDismiss=${this.handleDialogDismiss}>
+					<${Help}/>
+				</>
+			`;
+			break;
 		case "join":
 			dialog = html`
 				<${Dialog} title="Join channel" onDismiss=${this.handleDialogDismiss}>

components/help.js

@@ -0,0 +1,36 @@
+import { html, Component } from "../lib/index.js";
+import { keybindings } from "../keybindings.js";
+
+function KeyBindingsHelp() {
+	var l = keybindings.map((binding) => {
+		var keys = [];
+		if (binding.ctrlKey) {
+			keys.psuh("Ctrl");
+		}
+		if (binding.altKey) {
+			keys.push("Alt");
+		}
+		keys.push(binding.key);
+
+		keys = keys.map((name, i) => {
+			return html`
+				${i > 0 ? "+" : null}
+				<kbd>${name}</kbd>
+			`;
+		});
+
+		return html`
+			<dt>${keys}</dt>
+			<dd>${binding.description}</dd>
+		`;
+	});
+
+	return html`<dl>${l}</dl>`;
+}
+
+export default function Help() {
+	return html`
+		<h3>Key bindings</h3>
+		<${KeyBindingsHelp}/>
+	`;
+}

style.css

@@ -301,3 +301,18 @@ details summary {
 .dialog h2 {
 	margin-top: 0;
 }
+
+kbd {
+	background-color: #f0f0f0;
+	border: 1px solid #bfbfbf;
+	box-shadow: inset 0 1px 0 0 #fff, inset 0 -2px 0 0 #d9d9d9;
+	display: inline-block;
+	font-size: 80%;
+	margin: 3px;
+	min-width: 1em;
+	text-align: center;
+	white-space: nowrap;
+	padding: 2px 4px;
+	font-family: monospace;
+	border-radius: 3px;
+}