fix: key tips not updating and not hiding

closes #7412

Author: Miodec

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

@@ -4,23 +4,14 @@ import { getFocus } from "../../../signals/core";
 import { showModal } from "../../../stores/modals";
 import { Button } from "../../common/Button";
 
+import { Keytips } from "./Keytips";
 import { ThemeIndicator } from "./ThemeIndicator";
 import { VersionButton } from "./VersionButton";
 
 export function Footer(): JSXElement {
   return (
     <footer class="text-sub relative text-xs">
-      <div
-        class="mb-8 text-center leading-loose transition-opacity"
-        classList={{
-          "opacity-0": getFocus(),
-        }}
-      >
-        <kbd>tab</kbd> and <kbd>enter</kbd> - restart test
-        <br />
-        <kbd>ctrl/cmd</kbd> + <kbd>shift</kbd> + <kbd>p</kbd> or <kbd>esc</kbd>{" "}
-        - command line
-      </div>
+      <Keytips />
 
       <div
         class="-m-2 flex justify-between gap-8 transition-opacity"

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

@@ -0,0 +1,44 @@
+import { JSXElement, Show } from "solid-js";
+
+import { getConfig } from "../../../signals/config";
+import { getFocus } from "../../../signals/core";
+import { Conditional } from "../../common/Conditional";
+
+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"
+        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>
+    </Show>
+  );
+}

frontend/src/ts/ui.ts

@@ -43,23 +43,6 @@ export function setMediaQueryDebugLevel(level: number): void {
   }
 }
 
-function updateKeytips(): void {
-  const userAgent = window.navigator.userAgent.toLowerCase();
-  const modifierKey =
-    userAgent.includes("mac") && !userAgent.includes("firefox")
-      ? "cmd"
-      : "ctrl";
-
-  const commandKey = Config.quickRestart === "esc" ? "tab" : "esc";
-  qs("footer .keyTips")?.setHtml(`
-    ${
-      Config.quickRestart === "off"
-        ? "<kbd>tab</kbd> + <kbd>enter</kbd>"
-        : `<kbd>${Config.quickRestart}</kbd>`
-    } - restart test<br>
-    <kbd>${commandKey}</kbd> or <kbd>${modifierKey}</kbd> + <kbd>shift</kbd> + <kbd>p</kbd> - command line`);
-}
-
 if (isDevEnvironment()) {
   qs("header #logo .top")?.setText("localhost");
   qs("head title")?.setText(
@@ -124,15 +107,6 @@ createEffect(() => {
 });
 
 ConfigEvent.subscribe(async ({ key }) => {
-  if (key === "quickRestart") updateKeytips();
-  if (key === "showKeyTips") {
-    const keyTipsElement = qs("footer .keyTips");
-    if (Config.showKeyTips) {
-      keyTipsElement?.removeClass("hidden");
-    } else {
-      keyTipsElement?.addClass("hidden");
-    }
-  }
   if (key === "fontFamily") {
     await applyFontFamily();
   }