[pull] master from monkeytypegame:master

frontend/__tests__/commandline/util.spec.ts

@@ -153,7 +153,9 @@ describe("CommandlineUtils", () => {
             },
           },
           configMeta: {
-            icon: "icon",
+            fa: {
+              icon: "fa-keyboard",
+            },
           },
           schema,
         });
@@ -173,8 +175,10 @@ describe("CommandlineUtils", () => {
           defaultValue: expect.anything(),
           alias: "alias",
           input: true,
-          icon: "icon",
+          icon: "fa-keyboard",
           exec: expect.anything(),
+          hover: undefined,
+          configValue: undefined,
           inputValueConvert: Number,
           validation: expect.anything(),
         });
@@ -198,7 +202,9 @@ describe("CommandlineUtils", () => {
           },
         },
         configMeta: {
-          icon: "icon",
+          fa: {
+            icon: "fa-keyboard",
+          },
         },
         schema,
       });
@@ -210,7 +216,7 @@ describe("CommandlineUtils", () => {
           display: "custom test...",
           alias: "alias",
           input: true,
-          icon: "icon",
+          icon: "fa-keyboard",
         }),
       );
     });

frontend/src/ts/commandline/util.ts

@@ -136,7 +136,7 @@ function buildCommandWithSubgroup<K extends keyof ConfigSchemas.Config>(
   return {
     id: `change${capitalizeFirstLetter(key)}`,
     display: display,
-    icon: configMeta?.icon ?? "fa-cog",
+    icon: configMeta?.fa?.icon ?? "fa-cog",
     subgroup: {
       title: display,
       configKey: key,
@@ -230,7 +230,7 @@ function buildInputCommand<K extends keyof ConfigSchemas.Config>({
     display: displayString,
     alias: inputProps?.alias ?? undefined,
     input: true,
-    icon: configMeta.icon ?? "fa-cog",
+    icon: configMeta?.fa?.icon ?? "fa-cog",
 
     //@ts-expect-error this is fine
     exec: ({ input }): void => {

frontend/src/ts/components/pages/test/TestConfig.tsx

@@ -1,5 +1,6 @@
 import { ComponentProps, For, JSXElement, Show } from "solid-js";
 
+import { configMetadata } from "../../../config/metadata";
 import { setConfig, setQuoteLengthAll } from "../../../config/setters";
 import { getConfig } from "../../../config/store";
 import { restartTestEvent } from "../../../events/test";
@@ -8,7 +9,7 @@ import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
 import { isLoggedIn } from "../../../states/core";
 import { showModal } from "../../../states/modals";
 import { getResultVisible, getFocus } from "../../../states/test";
-import { FaSolidIcon } from "../../../types/font-awesome";
+import { FaObject } from "../../../types/font-awesome";
 import { areUnsortedArraysEqual } from "../../../utils/arrays";
 import { cn } from "../../../utils/cn";
 import { Anime, AnimeShow } from "../../common/anime";
@@ -59,7 +60,7 @@ export function TestConfig(): JSXElement {
 }
 
 function TCButton(props: {
-  icon: FaSolidIcon;
+  fa: FaObject;
   text: string;
   active?: boolean;
   disabled?: boolean;
@@ -69,7 +70,7 @@ function TCButton(props: {
     <Button
       variant="text"
       class={cn(buttonClass)}
-      fa={{ icon: props.icon, fixedWidth: true }}
+      fa={{ ...props.fa, fixedWidth: true }}
       text={props.text}
       active={props.active}
       onClick={props.onClick}
@@ -79,10 +80,7 @@ function TCButton(props: {
 }
 
 function PuncAndNum(): JSXElement {
-  const buttons = [
-    { icon: "fa-at", configKey: "punctuation" },
-    { icon: "fa-hashtag", configKey: "numbers" },
-  ] as const;
+  const buttons = ["punctuation", "numbers"] as const;
 
   return (
     <Anime
@@ -96,10 +94,10 @@ function PuncAndNum(): JSXElement {
       <AnimeShow when={getConfig.mode !== "zen"} duration={durationMs}>
         <div class={cardClass}>
           <For each={buttons}>
-            {({ icon, configKey }) => (
+            {(configKey) => (
               <TCButton
-                icon={icon}
-                text={configKey}
+                fa={configMetadata[configKey].fa}
+                text={configMetadata[configKey].displayString ?? configKey}
                 active={getConfig[configKey]}
                 disabled={
                   getConfig.mode === "zen" || getConfig.mode === "quote"
@@ -118,24 +116,24 @@ function PuncAndNum(): JSXElement {
 }
 
 function Mode(): JSXElement {
-  const modes = [
-    { icon: "fa-clock", mode: "time" },
-    { icon: "fa-font", mode: "words" },
-    { icon: "fa-quote-left", mode: "quote" },
-    { icon: "fa-mountain", mode: "zen" },
-    { icon: "fa-wrench", mode: "custom" },
-  ] as const;
+  const modeOptions = ["time", "words", "quote", "zen", "custom"] as const;
 
   return (
     <div class={cn("z-2", cardClass)}>
-      <For each={modes}>
-        {({ icon, mode }) => (
+      <For each={modeOptions}>
+        {(modeOption) => (
           <TCButton
-            icon={icon}
-            text={mode}
-            active={getConfig.mode === mode}
+            fa={
+              configMetadata.mode.optionsMetadata?.[modeOption]?.fa ??
+              configMetadata.mode.fa
+            }
+            text={
+              configMetadata.mode.optionsMetadata?.[modeOption]
+                ?.displayString ?? modeOption
+            }
+            active={getConfig.mode === modeOption}
             onClick={() => {
-              setConfig("mode", mode);
+              setConfig("mode", modeOption);
               restartTestEvent.dispatch();
             }}
           />