fix(command-line): hide Firefox private-window shortcut hint (@d1rshan)

Author: d1rshan

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

@@ -6,10 +6,8 @@ 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 isFirefox = userAgent.includes("firefox");
+  const modifierKey = userAgent.includes("mac") && !isFirefox ? "cmd" : "ctrl";
 
   const commandKey = (): string =>
     getConfig.quickRestart === "esc" ? "tab" : "esc";
@@ -36,8 +34,20 @@ export function Keytips(): JSXElement {
           }
         />
         <br />
-        <kbd>{commandKey()}</kbd> or <kbd>{modifierKey}</kbd> + <kbd>shift</kbd>{" "}
-        + <kbd>p</kbd> - command line
+        <Conditional
+          if={isFirefox}
+          then={
+            <>
+              <kbd>{commandKey()}</kbd> - command line
+            </>
+          }
+          else={
+            <>
+              <kbd>{commandKey()}</kbd> or <kbd>{modifierKey}</kbd> +{" "}
+              <kbd>shift</kbd> + <kbd>p</kbd> - command line
+            </>
+          }
+        />
       </div>
     </Show>
   );

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

@@ -20,6 +20,11 @@ import { H2, H3 } from "../common/Headers";
 
 export function AboutPage(): JSXElement {
   const isOpen = () => getActivePage() === "about";
+  const isFirefox = window.navigator.userAgent
+    .toLowerCase()
+    .includes("firefox");
+  const commandKey = (): string =>
+    getConfig.quickRestart === "esc" ? "tab" : "esc";
 
   const contributors = useQuery(() => ({
     ...getContributorsQueryOptions(),
@@ -203,9 +208,20 @@ export function AboutPage(): JSXElement {
         <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
-          access all the functionality you need without touching your mouse.
+          typing test. Open the command line by pressing{" "}
+          <Show
+            when={isFirefox}
+            fallback={
+              <>
+                <kbd>ctrl/cmd</kbd> + <kbd>shift</kbd> + <kbd>p</kbd> or{" "}
+                <kbd>{commandKey()}</kbd>
+              </>
+            }
+          >
+            <kbd>{commandKey()}</kbd>
+          </Show>{" "}
+          - there you can access all the functionality you need without touching
+          your mouse.
         </p>
       </section>
       <section>

frontend/src/ts/pages/settings.ts

@@ -724,15 +724,13 @@ export async function update(
   CustomBackgroundFilter.updateUI();
 
   const userAgent = window.navigator.userAgent.toLowerCase();
-  const modifierKey =
-    userAgent.includes("mac") && !userAgent.includes("firefox")
-      ? "cmd"
-      : "ctrl";
+  const isFirefox = userAgent.includes("firefox");
+  const modifierKey = userAgent.includes("mac") && !isFirefox ? "cmd" : "ctrl";
 
   const commandKey = Config.quickRestart === "esc" ? "tab" : "esc";
   qs(".pageSettings .tip")?.setHtml(`
     tip: You can also change all these settings quickly using the
-    command line (<kbd>${commandKey}</kbd> or <kbd>${modifierKey}</kbd> + <kbd>shift</kbd> + <kbd>p</kbd>)`);
+    command line (${isFirefox ? `<kbd>${commandKey}</kbd>` : `<kbd>${commandKey}</kbd> or <kbd>${modifierKey}</kbd> + <kbd>shift</kbd> + <kbd>p</kbd>`})`);
 
   if (
     customLayoutFluidSelect !== undefined &&