[pull] master from monkeytypegame:master

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/Footer.tsx

@@ -1,7 +1,8 @@
 import { JSXElement } from "solid-js";
 
-import { getFocus, getIsScreenshotting } from "../../../states/core";
+import { getIsScreenshotting } from "../../../states/core";
 import { showModal } from "../../../states/modals";
+import { getFocus } from "../../../states/test";
 import { cn } from "../../../utils/cn";
 import { Button } from "../../common/Button";
 import { Keytips } from "./Keytips";

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

@@ -1,43 +1,28 @@
 import { JSXElement, Show } from "solid-js";
 
 import { getConfig } from "../../../config/store";
-import { getFocus } from "../../../states/core";
-import { Conditional } from "../../common/Conditional";
+import { getFocus } from "../../../states/test";
+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/layout/header/AccountXpBar.tsx

@@ -11,12 +11,12 @@ import {
 import { createEvent } from "../../../hooks/createEvent";
 import { createSignalWithSetters } from "../../../hooks/createSignalWithSetters";
 import { createEffectOn } from "../../../hooks/effects";
-import { getFocus } from "../../../states/core";
 import {
   skipBreakdownEvent,
   getXpBarData,
   setAnimatedLevel,
 } from "../../../states/header";
+import { getFocus } from "../../../states/test";
 import { getXpDetails } from "../../../utils/levels";
 import { sleep } from "../../../utils/misc";
 import { Anime, AnimePresence, AnimeShow } from "../../common/anime";

frontend/src/ts/components/layout/header/Header.tsx

@@ -1,6 +1,7 @@
 import { JSXElement } from "solid-js";
 
-import { getFocus, getIsScreenshotting } from "../../../states/core";
+import { getIsScreenshotting } from "../../../states/core";
+import { getFocus } from "../../../states/test";
 import { cn } from "../../../utils/cn";
 import { Logo } from "./Logo";
 import { Nav } from "./Nav";

frontend/src/ts/components/layout/header/Logo.tsx

@@ -1,10 +1,8 @@
 import { JSXElement } from "solid-js";
 
-import {
-  restartTestEvent,
-  getActivePage,
-  getFocus,
-} from "../../../states/core";
+import { restartTestEvent } from "../../../events/test";
+import { getActivePage } from "../../../states/core";
+import { getFocus } from "../../../states/test";
 import { cn } from "../../../utils/cn";
 import { isDevEnvironment } from "../../../utils/env";
 

frontend/src/ts/components/layout/header/Nav.tsx

@@ -1,24 +1,22 @@
 import { useQuery } from "@tanstack/solid-query";
 import { createMemo, JSXElement, Show } from "solid-js";
 
+import { restartTestEvent } from "../../../events/test";
 import { createEffectOn } from "../../../hooks/effects";
 import {
   prefetchAboutPage,
   prefetchLeaderboardPage,
 } from "../../../queries/prefetch";
 import { getServerConfigurationQueryOptions } from "../../../queries/server-configuration";
-import {
-  restartTestEvent,
-  getActivePage,
-  getFocus,
-} from "../../../states/core";
+import { getActivePage } from "../../../states/core";
 import {
   getAccountButtonSpinner,
   getAnimatedLevel,
   setAnimatedLevel,
 } from "../../../states/header";
 import { showModal } from "../../../states/modals";
 import { getSnapshot } from "../../../states/snapshot";
+import { getFocus } from "../../../states/test";
 import { cn } from "../../../utils/cn";
 import { getLevelFromTotalXp } from "../../../utils/levels";
 import { AnimeConditional } from "../../common/anime";

frontend/src/ts/components/layout/overlays/Notifications.tsx

@@ -1,17 +1,14 @@
 import { AnimationParams } from "animejs";
 import { For, JSXElement } from "solid-js";
 
-import {
-  getFocus,
-  getGlobalOffsetTop,
-  getIsScreenshotting,
-} from "../../../states/core";
+import { getGlobalOffsetTop, getIsScreenshotting } from "../../../states/core";
 import {
   Notification,
   getNotifications,
   removeNotification,
   clearAllNotifications,
 } from "../../../states/notifications";
+import { getFocus } from "../../../states/test";
 import { cn } from "../../../utils/cn";
 import { Anime } from "../../common/anime/Anime";
 import { AnimePresence } from "../../common/anime/AnimePresence";

frontend/src/ts/components/modals/CustomTestDurationModal.tsx

@@ -3,7 +3,7 @@ import { JSXElement } from "solid-js";
 
 import { setConfig } from "../../config/setters";
 import { getConfig } from "../../config/store";
-import { restartTestEvent } from "../../states/core";
+import { restartTestEvent } from "../../events/test";
 import { hideModalAndClearChain } from "../../states/modals";
 import { showNoticeNotification } from "../../states/notifications";
 import { AnimatedModal } from "../common/AnimatedModal";

frontend/src/ts/components/modals/CustomTextModal.tsx

@@ -7,8 +7,8 @@ import type { FaSolidIcon } from "../../types/font-awesome";
 
 import { setConfig } from "../../config/setters";
 import { Config } from "../../config/store";
+import { restartTestEvent } from "../../events/test";
 import * as CustomTextState from "../../legacy-states/custom-text-name";
-import { restartTestEvent } from "../../states/core";
 import { hideModalAndClearChain, showModal } from "../../states/modals";
 import {
   showNoticeNotification,

frontend/src/ts/components/modals/CustomWordAmountModal.tsx

@@ -3,7 +3,7 @@ import { JSXElement } from "solid-js";
 
 import { setConfig } from "../../config/setters";
 import { getConfig } from "../../config/store";
-import { restartTestEvent } from "../../states/core";
+import { restartTestEvent } from "../../events/test";
 import { hideModalAndClearChain } from "../../states/modals";
 import { showNoticeNotification } from "../../states/notifications";
 import { AnimatedModal } from "../common/AnimatedModal";

frontend/src/ts/components/modals/MobileTestConfigModal.tsx

@@ -8,7 +8,8 @@ import { For, JSXElement, Show } from "solid-js";
 
 import { setConfig, setQuoteLengthAll } from "../../config/setters";
 import { getConfig } from "../../config/store";
-import { isLoggedIn, restartTestEvent } from "../../states/core";
+import { restartTestEvent } from "../../events/test";
+import { isLoggedIn } from "../../states/core";
 import { showModal } from "../../states/modals";
 import { areUnsortedArraysEqual } from "../../utils/arrays";
 import { AnimatedModal } from "../common/AnimatedModal";

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/components/pages/test/TestConfig.tsx

@@ -2,15 +2,12 @@ import { ComponentProps, For, JSXElement, Show } from "solid-js";
 
 import { setConfig, setQuoteLengthAll } from "../../../config/setters";
 import { getConfig } from "../../../config/store";
+import { restartTestEvent } from "../../../events/test";
 import { createEffectOn } from "../../../hooks/effects";
 import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
-import {
-  getFocus,
-  getResultVisible,
-  isLoggedIn,
-  restartTestEvent,
-} from "../../../states/core";
+import { isLoggedIn } from "../../../states/core";
 import { showModal } from "../../../states/modals";
+import { getResultVisible, getFocus } from "../../../states/test";
 import { FaSolidIcon } from "../../../types/font-awesome";
 import { areUnsortedArraysEqual } from "../../../utils/arrays";
 import { cn } from "../../../utils/cn";