[pull] master from monkeytypegame:master

frontend/__tests__/components/ui/form/LabeledField.spec.tsx

@@ -0,0 +1,57 @@
+import { render, screen } from "@solidjs/testing-library";
+import { describe, it, expect } from "vitest";
+
+import { LabeledField } from "../../../../src/ts/components/ui/form/LabeledField";
+
+describe("LabeledField", () => {
+  it("renders label text correctly", () => {
+    render(() => (
+      <LabeledField label="test label">
+        <input />
+      </LabeledField>
+    ));
+
+    expect(screen.getByText("test label")).toBeInTheDocument();
+  });
+
+  it("renders children correctly", () => {
+    render(() => (
+      <LabeledField label="test">
+        <div data-testid="child">child content</div>
+      </LabeledField>
+    ));
+
+    expect(screen.getByTestId("child")).toBeInTheDocument();
+  });
+
+  it("renders subtext when provided", () => {
+    render(() => (
+      <LabeledField label="test" subLabel="helper text">
+        <input />
+      </LabeledField>
+    ));
+
+    expect(screen.getByText("helper text")).toBeInTheDocument();
+  });
+
+  it("links label to input when id is provided", () => {
+    const { container } = render(() => (
+      <LabeledField label="test" id="test-id">
+        <input id="test-id" />
+      </LabeledField>
+    ));
+
+    const label = container.querySelector("label");
+    expect(label).toHaveAttribute("for", "test-id");
+  });
+
+  it("applies custom class to wrapper", () => {
+    const { container } = render(() => (
+      <LabeledField label="test" class="custom-wrapper-class">
+        <input />
+      </LabeledField>
+    ));
+
+    expect(container.firstChild).toHaveClass("custom-wrapper-class");
+  });
+});

frontend/__tests__/root/config-metadata.spec.ts

@@ -163,6 +163,15 @@ describe("ConfigMeta", () => {
         { value: false, given: { tapeMode: "word" } },
         { value: true, given: { tapeMode: "word" }, fail: true },
       ],
+      monkey: [{ value: false, given: { liveSpeedStyle: "text" } }],
+      liveSpeedStyle: [
+        { value: "mini", given: { monkey: true } },
+        { value: "text", given: { monkey: true } },
+      ],
+      liveAccStyle: [
+        { value: "mini", given: { monkey: true } },
+        { value: "text", given: { monkey: true } },
+      ],
     };
 
     it.for(
@@ -244,6 +253,45 @@ describe("ConfigMeta", () => {
           expected: { freedomMode: false, stopOnError: "off" },
         },
       ],
+      monkey: [
+        {
+          value: false,
+          given: { liveSpeedStyle: "text", liveAccStyle: "text" },
+          expected: {
+            liveSpeedStyle: "text",
+            liveAccStyle: "text",
+          },
+        },
+        {
+          value: true,
+          given: { liveSpeedStyle: "text", liveAccStyle: "text" },
+          expected: { liveSpeedStyle: "mini", liveAccStyle: "mini" },
+        },
+      ],
+      liveSpeedStyle: [
+        {
+          value: "mini",
+          given: { monkey: true },
+          expected: { monkey: true },
+        },
+        {
+          value: "text",
+          given: { monkey: true },
+          expected: { monkey: false },
+        },
+      ],
+      liveAccStyle: [
+        {
+          value: "mini",
+          given: { monkey: true },
+          expected: { monkey: true },
+        },
+        {
+          value: "text",
+          given: { monkey: true },
+          expected: { monkey: false },
+        },
+      ],
       tapeMode: [
         {
           value: "off",

frontend/__tests__/root/config.spec.ts

@@ -109,6 +109,50 @@ describe("Config", () => {
       expect(Config.setConfig("showAllLines", true)).toBe(false);
     });
 
+    it("disables live text stats when enabling monkey", () => {
+      //GIVEN
+      replaceConfig({
+        liveSpeedStyle: "text",
+        liveAccStyle: "text",
+        monkey: false,
+      });
+
+      //WHEN / THEN
+      expect(Config.setConfig("monkey", true)).toBe(true);
+      expect(getConfig()).toMatchObject({
+        monkey: true,
+        liveSpeedStyle: "mini",
+        liveAccStyle: "mini",
+      });
+      expect(notificationAddMock).not.toHaveBeenCalled();
+    });
+
+    it("disables monkey when enabling live speed text", () => {
+      //GIVEN
+      replaceConfig({ monkey: true, liveSpeedStyle: "off" });
+
+      //WHEN / THEN
+      expect(Config.setConfig("liveSpeedStyle", "text")).toBe(true);
+      expect(getConfig()).toMatchObject({
+        monkey: false,
+        liveSpeedStyle: "text",
+      });
+      expect(notificationAddMock).not.toHaveBeenCalled();
+    });
+
+    it("disables monkey when enabling live accuracy text", () => {
+      //GIVEN
+      replaceConfig({ monkey: true, liveAccStyle: "off" });
+
+      //WHEN / THEN
+      expect(Config.setConfig("liveAccStyle", "text")).toBe(true);
+      expect(getConfig()).toMatchObject({
+        monkey: false,
+        liveAccStyle: "text",
+      });
+      expect(notificationAddMock).not.toHaveBeenCalled();
+    });
+
     it("should use overrideValue", () => {
       //WHEN
       Config.setConfig("customLayoutfluid", ["3l", "ABNT2", "3l"]);

frontend/src/ts/components/modals/CustomGeneratorModal.tsx

@@ -7,6 +7,7 @@ import { AnimatedModal } from "../common/AnimatedModal";
 import { Button } from "../common/Button";
 import { Separator } from "../common/Separator";
 import { InputField } from "../ui/form/InputField";
+import { LabeledField } from "../ui/form/LabeledField";
 import { SubmitButton } from "../ui/form/SubmitButton";
 import { TextareaField } from "../ui/form/TextareaField";
 import SlimSelect from "../ui/SlimSelect";
@@ -159,24 +160,22 @@ export function CustomGeneratorModal(props: {
         }}
         class="grid gap-4"
       >
-        <div class="grid gap-1">
-          <div class="text-sub">presets</div>
-          <div class="grid gap-2">
+        <LabeledField label="presets">
+          <div class="grid grid-cols-[1fr_auto] gap-2">
             <SlimSelect
               options={presetOptions}
               selected={selectedPreset()}
               onChange={setSelectedPreset}
             />
             <Button variant="button" text="apply" onClick={applyPreset} />
           </div>
-        </div>
+        </LabeledField>
         <Separator />
         <div class="text-xs text-sub">
           Enter characters or strings separated by spaces. Random combinations
           will be generated using these inputs.
         </div>
-        <div class="grid gap-1">
-          <div class="text-sub">character set</div>
+        <LabeledField label="character set">
           <form.Field
             name="characterSet"
             validators={{
@@ -188,27 +187,24 @@ export function CustomGeneratorModal(props: {
               <TextareaField field={field} class="min-h-25 p-2 text-text" />
             )}
           </form.Field>
-        </div>
+        </LabeledField>
         <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-          <div class="grid gap-1">
-            <div class="text-sub">min length</div>
+          <LabeledField label="min length">
             <form.Field name="minLength">
               {(field) => <InputField field={field} type="number" />}
             </form.Field>
-          </div>
-          <div class="grid gap-1">
-            <div class="text-sub">max length</div>
+          </LabeledField>
+          <LabeledField label="max length">
             <form.Field name="maxLength">
               {(field) => <InputField field={field} type="number" />}
             </form.Field>
-          </div>
+          </LabeledField>
         </div>
-        <div class="grid gap-1">
-          <div class="text-sub">word count</div>
+        <LabeledField label="word count">
           <form.Field name="wordCount">
             {(field) => <InputField field={field} type="number" />}
           </form.Field>
-        </div>
+        </LabeledField>
         <div class="text-xs text-sub">
           {
             '"Set" replaces the current custom text with generated words, "Add" appends generated words to the current custom text.'

frontend/src/ts/components/modals/QuoteReportModal.tsx

@@ -19,6 +19,7 @@ import { removeLanguageSize } from "../../utils/strings";
 import { AnimatedModal } from "../common/AnimatedModal";
 import { Button } from "../common/Button";
 import { Separator } from "../common/Separator";
+import { LabeledField } from "../ui/form/LabeledField";
 import { fieldMandatory } from "../ui/form/utils";
 import SlimSelect from "../ui/SlimSelect";
 
@@ -133,17 +134,15 @@ export function QuoteReportModal(): JSXElement {
         <br />
         <span class="text-error">Please add comments in English only.</span>
         <Separator />
-        <div class="grid gap-1">
-          <label class="text-sub">quote</label>
+        <LabeledField label="quote">
           <div class="text-xl text-text" dir="auto">
             {quoteText()}
           </div>
-        </div>
+        </LabeledField>
         <form.Field
           name="reason"
           children={(field) => (
-            <div class="grid gap-1">
-              <label class="text-sub">reason</label>
+            <LabeledField label="reason">
               <SlimSelect
                 options={[
                   { value: "Grammatical error", text: "Grammatical error" },
@@ -166,15 +165,14 @@ export function QuoteReportModal(): JSXElement {
                 }
                 settings={{ showSearch: false }}
               />
-            </div>
+            </LabeledField>
           )}
         />
         <form.Field
           name="comment"
           validators={{ onChange: fieldMandatory<string>() }}
           children={(field) => (
-            <div class="grid gap-1">
-              <label class="text-sub">comment</label>
+            <LabeledField label="comment">
               <div class="relative">
                 <textarea
                   class="bg-bg-secondary min-h-50 w-full rounded p-2 text-text"
@@ -189,7 +187,7 @@ export function QuoteReportModal(): JSXElement {
                   {250 - field().state.value.length}
                 </div>
               </div>
-            </div>
+            </LabeledField>
           )}
         />
         <div ref={captchaRef}></div>

frontend/src/ts/components/modals/QuoteSubmitModal.tsx

@@ -18,6 +18,7 @@ import { removeLanguageSize } from "../../utils/strings";
 import { AnimatedModal } from "../common/AnimatedModal";
 import { Button } from "../common/Button";
 import { InputField } from "../ui/form/InputField";
+import { LabeledField } from "../ui/form/LabeledField";
 import { fieldMandatory } from "../ui/form/utils";
 import SlimSelect from "../ui/SlimSelect";
 
@@ -123,8 +124,7 @@ export function QuoteSubmitModal(): JSXElement {
           name="text"
           validators={{ onChange: fieldMandatory<string>() }}
           children={(field) => (
-            <div class="grid gap-1">
-              <label class="text-xs text-sub">quote</label>
+            <LabeledField label="quote">
               <div class="relative">
                 <textarea
                   class="bg-bg-secondary w-full rounded p-2 text-text"
@@ -140,35 +140,33 @@ export function QuoteSubmitModal(): JSXElement {
                   {250 - field().state.value.length}
                 </div>
               </div>
-            </div>
+            </LabeledField>
           )}
         />
         <form.Field
           name="source"
           validators={{ onChange: fieldMandatory<string>() }}
           children={(field) => (
-            <div class="grid gap-1">
-              <label class="text-xs text-sub">source</label>
+            <LabeledField label="source">
               <InputField
                 class="bg-bg-secondary w-full rounded p-2 text-text"
                 type="text"
                 field={field}
                 autocomplete="off"
               />
-            </div>
+            </LabeledField>
           )}
         />
         <form.Field
           name="language"
           children={(field) => (
-            <div class="grid gap-1">
-              <label class="text-xs text-sub">language</label>
+            <LabeledField label="language">
               <SlimSelect
                 options={languageOptions}
                 selected={field().state.value}
                 onChange={(val) => field().handleChange(val ?? "")}
               />
-            </div>
+            </LabeledField>
           )}
         />
         <div ref={captchaRef}></div>