fix(commandline): missing initialize input validation handler for commandOverride (@byseif21) (monkeytypegame#6788)

### Description

commands opened directly via `commandOverride` (e.g.,
`changeCustomPolyglot` when triggered by a text button after a page
refresh) were not correctly initializing their input validation
handlers.

---------

Co-authored-by: Christian Fehmer <[email protected]>
Co-authored-by: Christian Fehmer <[email protected]>

Author: byseif21

frontend/src/ts/commandline/commandline.ts

@@ -163,6 +163,7 @@ export function show(
             value: showInputCommand.defaultValue?.() ?? "",
             icon: showInputCommand.icon ?? "fa-chevron-right",
           };
+          createValidationHandler(showInputCommand);
           void updateInput(inputModeParams.value as string);
           hideCommands();
         }
@@ -627,17 +628,7 @@ async function runActiveCommand(): Promise<void> {
       value: command.defaultValue?.() ?? "",
       icon: command.icon ?? "fa-chevron-right",
     };
-    if ("validation" in command && !handlersCache.has(command.id)) {
-      const commandWithValidation = command as CommandWithValidation<unknown>;
-      const handler = createInputEventHandler(
-        updateValidationResult,
-        commandWithValidation.validation,
-        "inputValueConvert" in commandWithValidation
-          ? commandWithValidation.inputValueConvert
-          : undefined
-      );
-      handlersCache.set(command.id, handler);
-    }
+    createValidationHandler(command);
 
     await updateInput(inputModeParams.value as string);
     hideCommands();
@@ -814,6 +805,20 @@ function updateValidationResult(
  */
 const handlersCache = new Map<string, (e: Event) => Promise<void>>();
 
+function createValidationHandler(command: Command): void {
+  if ("validation" in command && !handlersCache.has(command.id)) {
+    const commandWithValidation = command as CommandWithValidation<unknown>;
+    const handler = createInputEventHandler(
+      updateValidationResult,
+      commandWithValidation.validation,
+      "inputValueConvert" in commandWithValidation
+        ? commandWithValidation.inputValueConvert
+        : undefined
+    );
+    handlersCache.set(command.id, handler);
+  }
+}
+
 const modal = new AnimatedModal({
   dialogId: "commandLine",
   customEscapeHandler: (): void => {

frontend/src/ts/commandline/lists.ts

@@ -106,19 +106,21 @@ export const commands: CommandsSubgroup = {
     ...ResultSavingCommands,
 
     //behavior
-    difficultyCommand,
-    buildCommandForConfigKey("quickRestart"),
-    buildCommandForConfigKey("repeatQuotes"),
-    blindModeCommand,
-    buildCommandForConfigKey("alwaysShowWordsHistory"),
-    buildCommandForConfigKey("singleListCommandLine"),
-    minSpeedCommand,
-    minAccCommand,
-    ...MinBurstCommands,
-    buildCommandForConfigKey("britishEnglish"),
-    ...FunboxCommands,
-    buildCommandForConfigKey("customLayoutfluid"),
-    buildCommandForConfigKey("customPolyglot"),
+    ...buildCommands(
+      difficultyCommand,
+      "quickRestart",
+      "repeatQuotes",
+      blindModeCommand,
+      "alwaysShowWordsHistory",
+      "singleListCommandLine",
+      minSpeedCommand,
+      minAccCommand,
+      ...MinBurstCommands,
+      "britishEnglish",
+      ...FunboxCommands,
+      "customLayoutfluid",
+      "customPolyglot"
+    ),
 
     //input
     ...buildCommands(

frontend/src/ts/elements/modes-notice.ts

@@ -115,7 +115,7 @@ export async function update(): Promise<void> {
       .join(", ");
 
     $(".pageTest #testModesNotice").append(
-      `<button class="textButton" commandId="changeCustomPolyglot"><i class="fas fa-globe-americas"></i>${languages}</button>`
+      `<button class="textButton" commandId="setCustomPolyglotCustom"><i class="fas fa-globe-americas"></i>${languages}</button>`
     );
   }