fix(commandline): improve caching to fix stale checkmark and UI state (@byseif21, @fehmer) (monkeytypegame#6586)

### Description

Previously, when selecting a language via the text button on the test
page, the checkmark (fa-check) in the commandline language list wouldn't
update until a page refresh. This was due to the commandline's caching
mechanism not detecting changes triggered outside its own control.

Although it first appeared to be a language-specific issue, it was later
identified that the caching logic was generally insufficient — it didn’t
account for updates to the active command state or configuration flags
like usingSingleList.

## Solution
Fixed the caching logic in the commandline module by tracking a more
complete internal state. The system now correctly detects changes in the
command list, active state, and configuration, and rebuilds the list UI
when necessary.

## Technical Details
- The commandline uses a caching mechanism (`lastList`) to avoid
rebuilding the HTML if the list hasn't changed done in monkeytypegame#6559
- Replaced the old lastList cache with a new lastState object that
stores: the list of commands, each with its isActive flag, the
usingSingleList configuration flag
- Improved the cache comparison logic, uses areSortedArraysEqual to
compare command lists including active state ,compares the
usingSingleList flag
- Previously, this cache wasn't being cleared when the language changed
through the text button
- Now we clear the cache on changes, forcing a rebuild of the list with
the correct checkmark

## Performance Impact
- Minimal performance impact
- The list is only rebuilt when:
  1. The language actually changes
  2. The list content changes
  3. The input value changes
- The caching mechanism still prevents unnecessary rebuilds in all other
cases

## Testing
- [x] Language selection through text button updates checkmark
immediately
- [x] Language selection through commandline works as before
- [x] No unnecessary rebuilds when language hasn't changed
- [x] Checkmark appears next to correct language in all cases

Author: byseif21

frontend/src/ts/commandline/commandline.ts

@@ -39,6 +39,15 @@ let subgroupOverride: CommandsSubgroup | null = null;
 let isAnimating = false;
 let lastSingleListModeInputValue = "";
 
+type CommandWithActiveState = Omit<Command, "active"> & { isActive: boolean };
+
+let lastState:
+  | {
+      list: CommandWithActiveState[];
+      usingSingleList: boolean;
+    }
+  | undefined;
+
 function removeCommandlineBackground(): void {
   $("#commandLine").addClass("noBackground");
   if (Config.showOutOfFocusWarning) {
@@ -328,7 +337,7 @@ function hideCommands(): void {
     throw new Error("Commandline element not found");
   }
   element.innerHTML = "";
-  lastList = undefined;
+  lastState = undefined;
 }
 
 let cachedSingleSubgroup: CommandsSubgroup | null = null;
@@ -353,8 +362,6 @@ async function getList(): Promise<Command[]> {
   return (await getSubgroup()).list;
 }
 
-let lastList: Command[] | undefined;
-
 async function showCommands(): Promise<void> {
   const element = document.querySelector("#commandLine .suggestions");
   if (element === null) {
@@ -366,11 +373,42 @@ async function showCommands(): Promise<void> {
     return;
   }
 
-  const list = (await getList()).filter((c) => c.found === true);
-  if (lastList && areSortedArraysEqual(list, lastList)) {
+  const subgroup = await getSubgroup();
+
+  const list = subgroup.list
+    .filter((c) => c.found === true)
+    .map((command) => {
+      let isActive = false;
+      if (command.active !== undefined) {
+        isActive = command.active();
+      } else {
+        const configKey = command.configKey ?? subgroup.configKey;
+        if (configKey !== undefined) {
+          if (command.configValueMode === "include") {
+            isActive = (Config[configKey] as unknown[]).includes(
+              command.configValue
+            );
+          } else {
+            isActive = Config[configKey] === command.configValue;
+          }
+        }
+      }
+      const { active: _active, ...restOfCommand } = command;
+      return { ...restOfCommand, isActive } as CommandWithActiveState;
+    });
+
+  if (
+    lastState &&
+    usingSingleList === lastState.usingSingleList &&
+    areSortedArraysEqual(list, lastState.list)
+  ) {
     return;
   }
-  lastList = list;
+
+  lastState = {
+    list: list,
+    usingSingleList: usingSingleList,
+  };
 
   let html = "";
   let index = 0;
@@ -387,38 +425,13 @@ async function showCommands(): Promise<void> {
       icon = `<i class="fas fa-fw ${icon}"></i>`;
     }
     let configIcon = "";
-    const configKey = command.configKey ?? (await getSubgroup()).configKey;
-    if (command.active !== undefined) {
-      if (command.active()) {
-        firstActive = firstActive ?? index;
-        configIcon = `<i class="fas fa-fw fa-check"></i>`;
-      } else {
-        configIcon = `<i class="fas fa-fw"></i>`;
-      }
-    } else if (configKey !== undefined) {
-      let isActive;
-
-      if (command.configValueMode === "include") {
-        isActive = (
-          Config[configKey] as (
-            | string
-            | number
-            | boolean
-            | number[]
-            | undefined
-          )[]
-        ).includes(command.configValue);
-      } else {
-        isActive = Config[configKey] === command.configValue;
-      }
-
-      if (isActive) {
-        firstActive = firstActive ?? index;
-        configIcon = `<i class="fas fa-fw fa-check"></i>`;
-      } else {
-        configIcon = `<i class="fas fa-fw"></i>`;
-      }
+    if (command.isActive) {
+      firstActive = firstActive ?? index;
+      configIcon = `<i class="fas fa-fw fa-check"></i>`;
+    } else {
+      configIcon = `<i class="fas fa-fw"></i>`;
     }
+
     const iconHTML = `<div class="icon">${
       usingSingleList || configIcon === "" ? icon : configIcon
     }</div>`;