refactor(hotkeys): use tanstack/hotkey (@fehmer)

frontend/package.json

@@ -39,7 +39,10 @@
     "@tanstack/pacer-lite": "0.2.1",
     "@tanstack/query-db-collection": "1.0.27",
     "@tanstack/solid-db": "0.2.10",
+    "@tanstack/solid-devtools": "0.8.0",
     "@tanstack/solid-form": "1.28.4",
+    "@tanstack/solid-hotkeys": "0.4.2",
+    "@tanstack/solid-hotkeys-devtools": "0.4.3",
     "@tanstack/solid-query": "5.90.23",
     "@tanstack/solid-query-devtools": "5.91.3",
     "@tanstack/solid-table": "8.21.3",
@@ -60,7 +63,6 @@
     "hangul-js": "0.2.6",
     "howler": "2.2.3",
     "idb": "8.0.3",
-    "konami": "1.7.0",
     "lz-ts": "1.1.2",
     "modern-screenshot": "4.6.8",
     "object-hash": "3.0.0",

frontend/src/html/pages/settings.html

@@ -38,13 +38,7 @@
 
   <div class="tip">
     tip: You can also change all these settings quickly using the command line (
-    <kbd>ctrl/cmd</kbd>
-    +
-    <kbd>shift</kbd>
-    +
-    <kbd>p</kbd>
-    or
-    <kbd>esc</kbd>
+    <mount data-component="commandlinehotkey"></mount>
     )
   </div>
 

frontend/src/ts/components/core/DevTools.tsx

@@ -1,3 +1,4 @@
+import { hotkeysDevtoolsPlugin } from "@tanstack/solid-hotkeys-devtools";
 import { JSXElement, lazy, onMount, Suspense } from "solid-js";
 
 let DevComponents: (() => JSXElement) | undefined;
@@ -13,13 +14,18 @@ if (import.meta.env.DEV) {
       default: m.DevOptionsModal,
     })),
   );
+  const LazyTanstackDevtools = lazy(async () =>
+    import("@tanstack/solid-devtools").then((m) => ({
+      default: m.TanStackDevtools,
+    })),
+  );
 
   const LazySolidDevtoolsOverlay = lazy(async () =>
     import("@solid-devtools/overlay").then((m) => ({
       default: () => {
         onMount(() => {
           m.attachDevtoolsOverlay({
-            defaultOpen: true,
+            defaultOpen: false,
             noPadding: true,
           });
         });
@@ -31,7 +37,11 @@ if (import.meta.env.DEV) {
 
   DevComponents = () => (
     <Suspense>
-      <LazyQueryDevtools />
+      <LazyTanstackDevtools
+        plugins={[hotkeysDevtoolsPlugin()]}
+        config={{ defaultOpen: false }}
+      />
+      <LazyQueryDevtools buttonPosition="bottom-left" initialIsOpen={false} />
       <LazyDevOptionsModal />
       <LazySolidDevtoolsOverlay />
     </Suspense>

frontend/src/ts/components/hotkeys/CommandlineHotkey.tsx

@@ -0,0 +1,22 @@
+import { Show } from "solid-js";
+
+import { getConfig } from "../../config/store";
+import { isFirefox } from "../../utils/misc";
+import { Conditional } from "../common/Conditional";
+import { Kbd } from "./Kbd";
+
+export function CommandlineHotkey() {
+  return (
+    <>
+      <Conditional
+        if={getConfig.quickRestart === "esc"}
+        then={<Kbd hotkey="Tab" />}
+        else={<Kbd hotkey="Escape" />}
+      />
+      <Show when={!isFirefox()}>
+        &nbsp;or&nbsp;
+        <Kbd hotkey="Mod+Shift+P" />
+      </Show>
+    </>
+  );
+}

frontend/src/ts/components/hotkeys/Kbd.tsx

@@ -0,0 +1,10 @@
+import { formatWithLabels, Hotkey } from "@tanstack/solid-hotkeys";
+import { JSXElement } from "solid-js";
+
+export function Kbd(props: { hotkey: Hotkey }): JSXElement {
+  return (
+    <kbd>
+      {formatWithLabels(props.hotkey).toLowerCase().replace(/\+/g, " + ")}
+    </kbd>
+  );
+}

frontend/src/ts/components/hotkeys/QuickRestartHotkey.tsx

@@ -0,0 +1,26 @@
+import { QuickRestart as QuickRestartType } from "@monkeytype/schemas/configs";
+import { Hotkey } from "@tanstack/solid-hotkeys";
+import { JSXElement, Show } from "solid-js";
+
+import { getConfig } from "../../config/store";
+import { Kbd } from "./Kbd";
+
+const quickRestartHotkeys: Record<QuickRestartType, Hotkey | undefined> = {
+  off: undefined,
+  enter: "Enter",
+  esc: "Escape",
+  tab: "Tab",
+};
+
+export function QuickRestartHotkey(): JSXElement {
+  return (
+    <Show
+      when={quickRestartHotkeys[getConfig.quickRestart] !== undefined}
+      fallback=<>
+        <kbd>tab</kbd> &gt; <kbd>enter</kbd>
+      </>
+    >
+      <Kbd hotkey={quickRestartHotkeys[getConfig.quickRestart] as Hotkey} />
+    </Show>
+  );
+}

frontend/src/ts/components/layout/footer/Keytips.tsx

@@ -2,18 +2,10 @@ import { JSXElement, Show } from "solid-js";
 
 import { getConfig } from "../../../config/store";
 import { getFocus } from "../../../states/core";
-import { Conditional } from "../../common/Conditional";
+import { CommandlineHotkey } from "../../hotkeys/CommandlineHotkey";
+import { QuickRestartHotkey } from "../../hotkeys/QuickRestartHotkey";
 
 export function Keytips(): JSXElement {
-  const userAgent = window.navigator.userAgent.toLowerCase();
-  const modifierKey =
-    userAgent.includes("mac") && !userAgent.includes("firefox")
-      ? "cmd"
-      : "ctrl";
-
-  const commandKey = (): string =>
-    getConfig.quickRestart === "esc" ? "tab" : "esc";
-
   return (
     <Show when={getConfig.showKeyTips}>
       <div
@@ -22,22 +14,9 @@ export function Keytips(): JSXElement {
           "opacity-0": getFocus(),
         }}
       >
-        <Conditional
-          if={getConfig.quickRestart === "off"}
-          then={
-            <>
-              <kbd>tab</kbd> + <kbd>enter</kbd> - restart test
-            </>
-          }
-          else={
-            <>
-              <kbd>{getConfig.quickRestart}</kbd> - restart test
-            </>
-          }
-        />
+        <QuickRestartHotkey /> - restart test
         <br />
-        <kbd>{commandKey()}</kbd> or <kbd>{modifierKey}</kbd> + <kbd>shift</kbd>{" "}
-        + <kbd>p</kbd> - command line
+        <CommandlineHotkey /> - command line
       </div>
     </Show>
   );

frontend/src/ts/components/mount.tsx

@@ -6,6 +6,7 @@ import { queryClient } from "../queries";
 import { qsa } from "../utils/dom";
 import { DevTools } from "./core/DevTools";
 import { Theme } from "./core/Theme";
+import { CommandlineHotkey } from "./hotkeys/CommandlineHotkey";
 import { Footer } from "./layout/footer/Footer";
 import { Header } from "./layout/header/Header";
 import { Overlays } from "./layout/overlays/Overlays";
@@ -32,6 +33,7 @@ const components: Record<string, () => JSXElement> = {
   theme: () => <Theme />,
   header: () => <Header />,
   devtools: () => <DevTools />,
+  commandlinehotkey: () => <CommandlineHotkey />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {

frontend/src/ts/components/pages/AboutPage.tsx

@@ -17,6 +17,8 @@ import { Button } from "../common/Button";
 import { ChartJs } from "../common/ChartJs";
 import { Fa } from "../common/Fa";
 import { H2, H3 } from "../common/Headers";
+import { CommandlineHotkey } from "../hotkeys/CommandlineHotkey";
+import { QuickRestartHotkey } from "../hotkeys/QuickRestartHotkey";
 
 export function AboutPage(): JSXElement {
   const isOpen = () => getActivePage() === "about";
@@ -201,10 +203,8 @@ export function AboutPage(): JSXElement {
       <section>
         <H3 fa={{ icon: "fa-keyboard" }} text="keybinds" />
         <p>
-          You can use <kbd>tab</kbd> and <kbd>enter</kbd> (or just{" "}
-          <kbd>tab</kbd> if you have quick tab mode enabled) to restart the
-          typing test. Open the command line by pressing <kbd>ctrl/cmd</kbd> +{" "}
-          <kbd>shift</kbd> + <kbd>p</kbd> or <kbd>esc</kbd> - there you can
+          You can use <QuickRestartHotkey /> to restart the typing test. Open
+          the command line by pressing <CommandlineHotkey /> - there you can
           access all the functionality you need without touching your mouse.
         </p>
       </section>

frontend/src/ts/event-handlers/global.ts

@@ -1,14 +1,10 @@
 import * as Misc from "../utils/misc";
 import * as PageTransition from "../legacy-states/page-transition";
 import { Config } from "../config/store";
-import * as TestWords from "../test/test-words";
-import * as Commandline from "../commandline/commandline";
 import { showErrorNotification } from "../states/notifications";
 import { getActivePage } from "../states/core";
 import { ModifierKeys } from "../constants/modifier-keys";
 import { focusWords } from "../test/test-ui";
-import * as TestLogic from "../test/test-logic";
-import { navigate } from "../controllers/route-controller";
 import { isInputElementFocused } from "../input/input-element";
 import * as TestState from "../test/test-state";
 import { isDevEnvironment } from "../utils/env";
@@ -35,52 +31,6 @@ document.addEventListener("keydown", (e) => {
       }
     }
   }
-
-  if (
-    (e.key === "Escape" && Config.quickRestart !== "esc") ||
-    (e.key === "Tab" &&
-      Config.quickRestart === "esc" &&
-      !TestWords.hasTab &&
-      !e.shiftKey) ||
-    (e.key === "Tab" &&
-      Config.quickRestart === "esc" &&
-      TestWords.hasTab &&
-      e.shiftKey) ||
-    (e.key.toLowerCase() === "p" && (e.metaKey || e.ctrlKey) && e.shiftKey)
-  ) {
-    const popupVisible = Misc.isAnyPopupVisible();
-    if (!popupVisible) {
-      e.preventDefault();
-      Commandline.show();
-    }
-  }
-
-  if (!isInputElementFocused()) {
-    const isInteractiveElement =
-      document.activeElement?.tagName === "INPUT" ||
-      document.activeElement?.tagName === "TEXTAREA" ||
-      document.activeElement?.tagName === "SELECT" ||
-      document.activeElement?.tagName === "BUTTON" ||
-      document.activeElement?.classList.contains("button") === true ||
-      document.activeElement?.classList.contains("textButton") === true;
-
-    if (
-      (e.key === "Tab" &&
-        Config.quickRestart === "tab" &&
-        !isInteractiveElement) ||
-      (e.key === "Escape" && Config.quickRestart === "esc") ||
-      (e.key === "Enter" &&
-        Config.quickRestart === "enter" &&
-        !isInteractiveElement)
-    ) {
-      e.preventDefault();
-      if (getActivePage() === "test") {
-        TestLogic.restart({ isQuickRestart: !e.shiftKey });
-      } else {
-        void navigate("");
-      }
-    }
-  }
 });
 
 //stop space scrolling

frontend/src/ts/index.ts

@@ -46,6 +46,8 @@ import "./ready";
 import { setVersion } from "./states/core";
 import { loadFromLocalStorage } from "./config/lifecycle";
 
+import "./input/hotkeys";
+
 // Lock Math.random
 Object.defineProperty(Math, "random", {
   value: Math.random,

frontend/src/ts/input/handlers/keydown.ts

@@ -28,13 +28,6 @@ import {
 import { Keycode } from "../../constants/keys";
 
 export async function handleTab(e: KeyboardEvent, now: number): Promise<void> {
-  if (Config.quickRestart === "tab") {
-    e.preventDefault();
-    if ((TestWords.hasTab && e.shiftKey) || !TestWords.hasTab) {
-      TestLogic.restart({ isQuickRestart: !e.shiftKey });
-      return;
-    }
-  }
   if (TestWords.hasTab) {
     await emulateInsertText({ data: "\t", now });
     e.preventDefault();
@@ -80,14 +73,6 @@ export async function handleEnter(
       }
     }
   }
-
-  if (Config.quickRestart === "enter") {
-    e.preventDefault();
-    if ((TestWords.hasNewline && e.shiftKey) || !TestWords.hasNewline) {
-      TestLogic.restart({ isQuickRestart: !e.shiftKey });
-      return;
-    }
-  }
 }
 
 export async function handleOppositeShift(event: KeyboardEvent): Promise<void> {
@@ -192,10 +177,4 @@ export async function onKeydown(event: KeyboardEvent): Promise<void> {
     await handleEnter(event, now);
     return;
   }
-
-  if (event.key === "Escape" && Config.quickRestart === "esc") {
-    event.preventDefault();
-    TestLogic.restart({ isQuickRestart: !event.shiftKey });
-    return;
-  }
 }

frontend/src/ts/input/hotkeys/commandline.ts

@@ -0,0 +1,31 @@
+import { createHotkey } from "@tanstack/solid-hotkeys";
+
+import * as CommandlinePopup from "../../commandline/commandline";
+
+import { isAnyPopupVisible } from "../../utils/misc";
+
+import { getConfig } from "../../config/store";
+
+function openCommandline(e: KeyboardEvent): void {
+  const popupVisible = isAnyPopupVisible();
+  if (!popupVisible) {
+    CommandlinePopup.show();
+  }
+}
+
+createHotkey("Escape", openCommandline, () => ({
+  enabled: getConfig.quickRestart !== "esc",
+  ignoreInputs: false,
+  requireReset: true,
+}));
+
+createHotkey("Tab", openCommandline, () => ({
+  enabled: getConfig.quickRestart === "esc",
+  ignoreInputs: false,
+  requireReset: true,
+}));
+
+createHotkey("Mod+Shift+P", openCommandline, {
+  ignoreInputs: false,
+  requireReset: true,
+});

frontend/src/ts/input/hotkeys/index.ts

@@ -0,0 +1,3 @@
+import "./quickrestart";
+import "./commandline";
+import "./konami";

frontend/src/ts/input/hotkeys/konami.ts

@@ -0,0 +1,19 @@
+import { createHotkeySequence } from "@tanstack/solid-hotkeys";
+
+createHotkeySequence(
+  [
+    "ArrowUp",
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    "ArrowLeft",
+    "ArrowRight",
+    "B",
+    "A",
+  ],
+  () => {
+    window.open("https://keymash.io/", "_blank");
+  },
+);