fix(quote-mode): broken all selection and visual highlighting issues (@byseif21) (monkeytypegame#6818)

### Description

* fixed UI click handler to consistently map "all" quote mode selection
(all) to [0, 1, 2, 3] `setQuoteLengthAll();`.
* fix the mobile model to highlight the all selection when length is [0,
1, 2, 3].
* fix quote length options were not visually highlighted when refreshing
from other mode then back to quote mode.

Author: byseif21

frontend/src/html/pages/test.html

@@ -60,7 +60,7 @@
       </div>
 
       <div class="quoteLength">
-        <button class="textButton" quotelength="-1">all</button>
+        <button class="textButton" quotelength="all">all</button>
         <button class="textButton" quotelength="0">short</button>
         <button class="textButton" quotelength="1">medium</button>
         <button class="textButton" quotelength="2">long</button>

frontend/src/html/popups.html

@@ -286,7 +286,7 @@
       <button data-words="custom">custom</button>
     </div>
     <div class="group quoteGroup hidden">
-      <button data-quoteLength="-1">all</button>
+      <button data-quoteLength="all">all</button>
       <button data-quoteLength="0">short</button>
       <button data-quoteLength="1">medium</button>
       <button data-quoteLength="2">long</button>

frontend/src/ts/modals/mobile-test-config.ts

@@ -8,6 +8,7 @@ import * as CustomTextPopup from "./custom-text";
 import AnimatedModal from "../utils/animated-modal";
 import { QuoteLength, QuoteLengthConfig } from "@monkeytype/schemas/configs";
 import { Mode } from "@monkeytype/schemas/shared";
+import { areUnsortedArraysEqual } from "../utils/arrays";
 
 function update(): void {
   const el = $("#mobileTestConfigModal");
@@ -43,10 +44,14 @@ function update(): void {
     el.find(".punctuation").removeClass("disabled");
     el.find(".numbers").removeClass("disabled");
   } else if (Config.mode === "quote") {
-    for (const ql of Config.quoteLength) {
-      el.find(`.quoteGroup button[data-quoteLength='${ql}']`).addClass(
-        "active"
-      );
+    if (areUnsortedArraysEqual(Config.quoteLength, [0, 1, 2, 3])) {
+      el.find(`.quoteGroup button[data-quoteLength='all']`).addClass("active");
+    } else {
+      for (const ql of Config.quoteLength) {
+        el.find(`.quoteGroup button[data-quoteLength='${ql}']`).addClass(
+          "active"
+        );
+      }
     }
     el.find(".punctuation").addClass("disabled");
     el.find(".numbers").addClass("disabled");
@@ -126,16 +131,19 @@ async function setup(modalEl: HTMLElement): Promise<void> {
   for (const button of quoteGroupButtons) {
     button.addEventListener("click", (e) => {
       const target = e.currentTarget as HTMLElement;
-      const len = parseInt(
-        target.getAttribute("data-quoteLength") ?? "0",
-        10
-      ) as QuoteLength;
+      const lenAttr = target.getAttribute("data-quoteLength") ?? "0";
 
-      if (len === -2) {
+      if (lenAttr === "all") {
+        if (UpdateConfig.setQuoteLengthAll()) {
+          ManualRestart.set();
+          TestLogic.restart();
+        }
+      } else if (lenAttr === "-2") {
         void QuoteSearchModal.show({
           modalChain: modal,
         });
       } else {
+        const len = parseInt(lenAttr, 10) as QuoteLength;
         let arr: QuoteLengthConfig = [];
 
         if ((e as MouseEvent).shiftKey) {
@@ -144,9 +152,10 @@ async function setup(modalEl: HTMLElement): Promise<void> {
           arr = [len];
         }
 
-        UpdateConfig.setQuoteLength(arr, false);
-        ManualRestart.set();
-        TestLogic.restart();
+        if (UpdateConfig.setQuoteLength(arr, false)) {
+          ManualRestart.set();
+          TestLogic.restart();
+        }
       }
     });
   }

frontend/src/ts/test/test-config.ts

@@ -56,6 +56,7 @@ export async function instantUpdate(): Promise<void> {
     $("#testConfig .customText").removeClass("hidden");
   }
 
+  updateActiveExtraButtons("quoteLength", Config.quoteLength);
   updateActiveExtraButtons("numbers", Config.numbers);
   updateActiveExtraButtons("punctuation", Config.punctuation);
 
@@ -245,7 +246,7 @@ function updateActiveExtraButtons(key: string, value: ConfigValue): void {
     $("#testConfig .quoteLength .textButton").removeClass("active");
 
     if (areUnsortedArraysEqual(value as QuoteLength[], [0, 1, 2, 3])) {
-      $("#testConfig .quoteLength .textButton[quoteLength='-1']").addClass(
+      $("#testConfig .quoteLength .textButton[quotelength='all']").addClass(
         "active"
       );
     } else {

frontend/src/ts/test/test-logic.ts

@@ -1470,22 +1470,28 @@ $(".pageTest").on("click", "#testConfig .time .textButton", (e) => {
 
 $(".pageTest").on("click", "#testConfig .quoteLength .textButton", (e) => {
   if (TestUI.testRestarting) return;
-  const len = parseInt(
-    $(e.currentTarget).attr("quoteLength") ?? "1"
-  ) as QuoteLength;
+  const lenAttr = $(e.currentTarget).attr("quoteLength");
+  if (lenAttr === "all") {
+    if (UpdateConfig.setQuoteLengthAll()) {
+      ManualRestart.set();
+      restart();
+    }
+  } else {
+    const len = parseInt(lenAttr ?? "1") as QuoteLength;
 
-  if (len !== -2) {
-    let arr: QuoteLengthConfig = [];
+    if (len !== -2) {
+      let arr: QuoteLengthConfig = [];
 
-    if (e.shiftKey) {
-      arr = [...Config.quoteLength, len];
-    } else {
-      arr = [len];
-    }
+      if (e.shiftKey) {
+        arr = [...Config.quoteLength, len];
+      } else {
+        arr = [len];
+      }
 
-    if (UpdateConfig.setQuoteLength(arr, false)) {
-      ManualRestart.set();
-      restart();
+      if (UpdateConfig.setQuoteLength(arr, false)) {
+        ManualRestart.set();
+        restart();
+      }
     }
   }
 });