refactor(hotkeys): use tanstack/hotkey (@fehmer, @d1rshan, @miodec)

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/styles/test.scss

@@ -1424,6 +1424,7 @@
 
     .textButton {
       padding: 0.5em 1em;
+      align-items: center;
       &.noInteraction {
         pointer-events: none;
       }

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

@@ -0,0 +1,16 @@
+import { formatWithLabels, Hotkey } from "@tanstack/solid-hotkeys";
+import { JSXElement } from "solid-js";
+
+type Props =
+  | { hotkey: Hotkey; text?: undefined }
+  | { hotkey?: undefined; text: string };
+
+export function Kbd(props: Props): JSXElement {
+  return (
+    <kbd>
+      {props.hotkey
+        ? formatWithLabels(props.hotkey).toLowerCase().replace(/\+/g, " + ")
+        : props.text}
+    </kbd>
+  );
+}

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

@@ -3,9 +3,9 @@ import { JSXElement, lazy, onMount, Suspense } from "solid-js";
 let DevComponents: (() => JSXElement) | undefined;
 
 if (import.meta.env.DEV) {
-  const LazyQueryDevtools = lazy(async () =>
-    import("@tanstack/solid-query-devtools").then((m) => ({
-      default: m.SolidQueryDevtools,
+  const LazyTanstackDevtools = lazy(async () =>
+    import("./TanstackDevtools").then((m) => ({
+      default: m.TanStackDevtools,
     })),
   );
   const LazyDevOptionsModal = lazy(async () =>
@@ -19,7 +19,7 @@ if (import.meta.env.DEV) {
       default: () => {
         onMount(() => {
           m.attachDevtoolsOverlay({
-            defaultOpen: true,
+            defaultOpen: false,
             noPadding: true,
           });
         });
@@ -31,7 +31,7 @@ if (import.meta.env.DEV) {
 
   DevComponents = () => (
     <Suspense>
-      <LazyQueryDevtools />
+      <LazyTanstackDevtools />
       <LazyDevOptionsModal />
       <LazySolidDevtoolsOverlay />
     </Suspense>

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

@@ -0,0 +1,23 @@
+import { TanStackDevtools as TsDevTools } from "@tanstack/solid-devtools";
+import { hotkeysDevtoolsPlugin } from "@tanstack/solid-hotkeys-devtools";
+import { SolidQueryDevtoolsPanel } from "@tanstack/solid-query-devtools";
+import { JSXElement } from "solid-js";
+
+import { queryClient } from "../../queries";
+
+export function TanStackDevtools(): JSXElement {
+  return (
+    <TsDevTools
+      plugins={[
+        {
+          id: "tanstack-query",
+          name: "TanStack Query",
+          render: () => <SolidQueryDevtoolsPanel client={queryClient} />,
+          defaultOpen: true,
+        },
+        hotkeysDevtoolsPlugin(),
+      ]}
+      config={{ defaultOpen: false }}
+    />
+  );
+}

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

@@ -0,0 +1,17 @@
+import { Show } from "solid-js";
+
+import { hotkeys } from "../../states/hotkeys";
+import { isFirefox } from "../../utils/misc";
+import { Kbd } from "../common/Kbd";
+
+export function CommandlineHotkey() {
+  return (
+    <>
+      <Kbd hotkey={hotkeys.commandline} />
+      <Show when={!isFirefox()}>
+        &nbsp;or&nbsp;
+        <Kbd hotkey="Mod+Shift+P" />
+      </Show>
+    </>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { Hotkey } from "@tanstack/solid-hotkeys";
+import { JSXElement } from "solid-js";
+
+import { NoKey } from "../../input/hotkeys/utils";
+import { hotkeys } from "../../states/hotkeys";
+import { Kbd } from "../common/Kbd";
+
+export function QuickRestartHotkey(): JSXElement {
+  const props = (): { hotkey: Hotkey } | { text: string } =>
+    hotkeys.quickRestart !== NoKey
+      ? { hotkey: hotkeys.quickRestart }
+      : { text: "tab > enter" };
+
+  return <Kbd {...props()} />;
+}

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

@@ -2,42 +2,27 @@ import { JSXElement, Show } from "solid-js";
 
 import { getConfig } from "../../../config/store";
 import { getFocus } from "../../../states/test";
-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
-        class="mb-8 text-center leading-loose transition-opacity"
+        class="mb-8 flex flex-col items-center gap-2 transition-opacity"
         classList={{
           "opacity-0": getFocus(),
         }}
       >
-        <Conditional
-          if={getConfig.quickRestart === "off"}
-          then={
-            <>
-              <kbd>tab</kbd> + <kbd>enter</kbd> - restart test
-            </>
-          }
-          else={
-            <>
-              <kbd>{getConfig.quickRestart}</kbd> - restart test
-            </>
-          }
-        />
-        <br />
-        <kbd>{commandKey()}</kbd> or <kbd>{modifierKey}</kbd> + <kbd>shift</kbd>{" "}
-        + <kbd>p</kbd> - command line
+        <div class="flex items-center gap-2">
+          <QuickRestartHotkey />
+          <span>- restart test</span>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <CommandlineHotkey />
+          <span>- command line</span>
+        </div>
       </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";
@@ -34,6 +35,7 @@ const components: Record<string, () => JSXElement> = {
   header: () => <Header />,
   devtools: () => <DevTools />,
   testconfig: () => <TestConfig />,
+  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/elements/modes-notice.ts

@@ -12,7 +12,11 @@ import Format from "../singletons/format";
 import { getActiveFunboxes, getActiveFunboxNames } from "../test/funbox/list";
 import { escapeHTML, getMode2 } from "../utils/misc";
 import { qsr } from "../utils/dom";
-import { getLoadedChallenge } from "../states/test";
+import {
+  wordsHaveNewline,
+  wordsHaveTab,
+  getLoadedChallenge,
+} from "../states/test";
 
 configEvent.subscribe(({ key }) => {
   const configKeys: ConfigEventKey[] = [
@@ -57,28 +61,28 @@ export async function update(): Promise<void> {
     );
   }
 
-  if (TestWords.hasTab) {
+  if (wordsHaveTab()) {
     if (Config.quickRestart === "esc") {
       testModesNotice.appendHtml(
-        `<div class="textButton noInteraction"><i class="fas fa-long-arrow-alt-right"></i>shift + tab to open commandline</div>`,
+        `<div class="textButton noInteraction"><kbd>shift + tab</kbd><span> to open commandline</span></div>`,
       );
       testModesNotice.appendHtml(
-        `<div class="textButton noInteraction"><i class="fas fa-level-down-alt fa-rotate-90"></i>shift + esc to restart</div>`,
+        `<div class="textButton noInteraction"><kbd>esc</kbd><span> to restart</span></div>`,
       );
     }
     if (Config.quickRestart === "tab") {
       testModesNotice.appendHtml(
-        `<div class="textButton noInteraction"><i class="fas fa-level-down-alt fa-rotate-90"></i>shift + tab to restart</div>`,
+        `<div class="textButton noInteraction"><kbd>shift + tab</kbd><span> to restart</span></div>`,
       );
     }
   }
 
   if (
-    (TestWords.hasNewline || Config.funbox.includes("58008")) &&
+    (wordsHaveNewline() || Config.funbox.includes("58008")) &&
     Config.quickRestart === "enter"
   ) {
     testModesNotice.appendHtml(
-      `<div class="textButton noInteraction"><i class="fas fa-level-down-alt fa-rotate-90"></i>shift + enter to restart</div>`,
+      `<div class="textButton noInteraction"><kbd>shift + enter</kbd><span> to restart</span></div>`,
     );
   }
 
@@ -88,7 +92,7 @@ export async function update(): Promise<void> {
     testModesNotice.appendHtml(
       `<div class="textButton noInteraction"><i class="fas fa-book"></i>${escapeHTML(
         customTextName,
-      )} (shift + enter to save progress)</div>`,
+      )} (<kbd>shift + enter</kbd><span> to save progress</span>)</div>`,
     );
   }
 
@@ -101,7 +105,7 @@ export async function update(): Promise<void> {
 
   if (Config.mode === "zen") {
     testModesNotice.appendHtml(
-      `<div class="textButton noInteraction"><i class="fas fa-poll"></i>shift + enter to finish zen </div>`,
+      `<div class="textButton noInteraction"><kbd>shift + enter</kbd><span> to finish zen</span></div>`,
     );
   }
 

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/events/test.ts

@@ -1,3 +1,5 @@
 import { createEvent } from "../hooks/createEvent";
 
-export const restartTestEvent = createEvent();
+export const restartTestEvent = createEvent<
+  { isQuickRestart?: boolean } | undefined
+>();

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,