Keyboard shortcut overlay

web/src/dom.ts

@@ -114,8 +114,8 @@ function modal(content: string | Node[], buttons: { label: string; value: string
   });
 }
 
-export async function showAlert(text: string): Promise<void> {
-  await modal(text, [{ label: "OK", value: "ok", class: "primary" }]);
+export async function showAlert(content: string | Node[]): Promise<void> {
+  await modal(content, [{ label: "OK", value: "ok", class: "primary" }]);
 }
 
 export async function showConfirm(content: string | Node[], action: string, danger = false, anchor: Element | null = null): Promise<boolean> {

web/src/switcher.ts

@@ -24,10 +24,65 @@ export function bindShortcuts(): void {
       if (state.selectedTaskId) {
         void confirmMerge(state.selectedTaskId);
       }
+    } else if (e.key === "/") {
+      e.preventDefault();
+      showShortcuts();
     }
   });
 }
 
+const shortcuts: [string, [string, string][]][] = [
+  [
+    "Anywhere",
+    [
+      ["⌘K", "Switch task, or create one"],
+      ["⌘P", "Open the Project tab"],
+      ["⌘L", "Open the Lead tab and its composer"],
+      ["⌘S", "Merge the right pane's task"],
+      ["⌘/", "Show these shortcuts"],
+      ["Esc", "Close the switcher or a dialog"],
+    ],
+  ],
+  [
+    "Task switcher",
+    [
+      ["↑ ↓", "Move the highlight"],
+      ["Enter", "Pick the highlighted row"],
+    ],
+  ],
+  [
+    "Composer and inbox answers",
+    [
+      ["Enter", "Send"],
+      ["Shift+Enter", "New line"],
+      ["Enter / Space", "Pick the focused choice"],
+    ],
+  ],
+  [
+    "Dialogs",
+    [["Enter", "Confirm"]],
+  ],
+  [
+    "Terminal",
+    [["Ctrl+…", "Goes to the shell, not to byre"]],
+  ],
+];
+
+function showShortcuts(): void {
+  void showAlert([
+    h("h2", { class: "shortcuts-title" }, "Keyboard shortcuts"),
+    ...shortcuts.map(([group, rows]) =>
+      h(
+        "section",
+        { class: "shortcuts-group" },
+        h("h3", {}, group),
+        h("dl", {}, ...rows.flatMap(([keys, what]) => [h("dt", {}, h("kbd", {}, keys)), h("dd", {}, what)])),
+      ),
+    ),
+    h("p", { class: "hint" }, "Ctrl works in place of ⌘."),
+  ]);
+}
+
 export function openSwitcher(): void {
   if (document.querySelector(".switcher")) {
     return;