refactor(hotkeys): use tanstack/hotkey (@fehmer, @d1rshan, @Miodec) (monkeytypegame#7691)

migrate quickRestart and commandline hotkeys to tanstack/hotkeys.

Includes improvement of monkeytypegame#7690

---------

Co-authored-by: Miodec <jack@monkeytype.com>

Author: 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/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 {