From 9bae1fce052b34c5a8a66381fc85fad4bc580b75 Mon Sep 17 00:00:00 2001
From: byseif21 <byseif21@gmail.com>
Date: Tue, 7 Apr 2026 16:23:03 +0200
Subject: [PATCH 1/7] refactor: extract LabeledField wrapper to remove
 label+input boilerplate

---
 .../modals/CustomGeneratorModal.tsx           | 28 +++++++--------
 .../ts/components/modals/WordFilterModal.tsx  | 36 ++++++++-----------
 .../ts/components/ui/form/LabeledField.tsx    | 21 +++++++++++
 3 files changed, 48 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/ts/components/ui/form/LabeledField.tsx

diff --git a/frontend/src/ts/components/modals/CustomGeneratorModal.tsx b/frontend/src/ts/components/modals/CustomGeneratorModal.tsx
index e743fb83dc00..1598febb9841 100644
--- a/frontend/src/ts/components/modals/CustomGeneratorModal.tsx
+++ b/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,9 +160,8 @@ 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()}
@@ -169,14 +169,13 @@ export function CustomGeneratorModal(props: {
             />
             <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.'
diff --git a/frontend/src/ts/components/modals/WordFilterModal.tsx b/frontend/src/ts/components/modals/WordFilterModal.tsx
index 89e3c1b3794e..84bd072111cd 100644
--- a/frontend/src/ts/components/modals/WordFilterModal.tsx
+++ b/frontend/src/ts/components/modals/WordFilterModal.tsx
@@ -20,6 +20,7 @@ import { Button } from "../common/Button";
 import { Separator } from "../common/Separator";
 import { Checkbox } from "../ui/form/Checkbox";
 import { InputField } from "../ui/form/InputField";
+import { LabeledField } from "../ui/form/LabeledField";
 import { SubmitButton } from "../ui/form/SubmitButton";
 import SlimSelect from "../ui/SlimSelect";
 
@@ -228,15 +229,14 @@ export function WordFilterModal(props: {
         }}
       >
         <fieldset disabled={loading()} class="grid gap-4">
-          <div class="grid gap-1">
-            <div class="text-sub">language</div>
+          <LabeledField label="language">
             <SlimSelect
               options={languageOptions}
               selected={language()}
               onChange={setLanguage}
               disabled={loading()}
             />
-          </div>
+          </LabeledField>
           <div class="text-xs text-sub">
             You can manually filter words by length, words or characters
             (separated by spaces) on the left side. On the right side you can
@@ -246,21 +246,18 @@ export function WordFilterModal(props: {
           <div class="grid grid-cols-1 gap-4 md:grid-cols-[1fr_auto_1fr]">
             <div class="grid gap-4 self-start">
               <div class="grid grid-cols-2 gap-4">
-                <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">include</div>
+              <LabeledField label="include">
                 <form.Field name="include">
                   {(field) => <InputField field={field} />}
                 </form.Field>
@@ -283,39 +280,36 @@ export function WordFilterModal(props: {
                     />
                   )}
                 </form.Field>
-              </div>
-              <div class="grid gap-1">
-                <div class="text-sub">exclude</div>
+              </LabeledField>
+              <LabeledField label="exclude">
                 <form.Field name="exclude">
                   {(field) => (
                     <InputField field={field} disabled={isExactMatch()} />
                   )}
                 </form.Field>
-              </div>
+              </LabeledField>
             </div>
 
             <Separator vertical class="hidden md:block" />
             <Separator class="block md:hidden" />
 
             <div class="grid gap-4 self-start">
-              <div class="grid gap-1">
-                <div class="text-sub">presets</div>
+              <LabeledField label="presets">
                 <SlimSelect
                   options={presetOptions}
                   selected={preset()}
                   onChange={setPreset}
                   disabled={loading()}
                 />
-              </div>
-              <div class="grid gap-1">
-                <div class="text-sub">layout</div>
+              </LabeledField>
+              <LabeledField label="layout">
                 <SlimSelect
                   options={layoutOptions}
                   selected={layout()}
                   onChange={setLayout}
                   disabled={loading()}
                 />
-              </div>
+              </LabeledField>
               <Button
                 variant="button"
                 text="apply"
diff --git a/frontend/src/ts/components/ui/form/LabeledField.tsx b/frontend/src/ts/components/ui/form/LabeledField.tsx
new file mode 100644
index 000000000000..1d2a506eb4f3
--- /dev/null
+++ b/frontend/src/ts/components/ui/form/LabeledField.tsx
@@ -0,0 +1,21 @@
+import { JSXElement } from "solid-js";
+
+import { cn } from "../../../utils/cn";
+
+export function LabeledField(props: {
+  label: string;
+  sub?: string;
+  id?: string;
+  children: JSXElement;
+  class?: string;
+}): JSXElement {
+  return (
+    <div class={cn("grid gap-1", props.class)}>
+      <label for={props.id} class="text-sub cursor-pointer lowercase">
+        {props.label}
+      </label>
+      {props.sub && <div class="mb-1 text-xs text-sub">{props.sub}</div>}
+      {props.children}
+    </div>
+  );
+}

From b3687d0bf877699a232e34b028820bfb74bb08b2 Mon Sep 17 00:00:00 2001
From: byseif21 <byseif21@gmail.com>
Date: Tue, 7 Apr 2026 17:01:11 +0200
Subject: [PATCH 2/7] quote modals

---
 .../ts/components/modals/QuoteReportModal.tsx   | 17 ++++++++---------
 .../ts/components/modals/QuoteSubmitModal.tsx   | 16 +++++++---------
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/frontend/src/ts/components/modals/QuoteReportModal.tsx b/frontend/src/ts/components/modals/QuoteReportModal.tsx
index 0de7c72fae9f..6a0f636b87cd 100644
--- a/frontend/src/ts/components/modals/QuoteReportModal.tsx
+++ b/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" id="reason">
               <SlimSelect
                 options={[
                   { value: "Grammatical error", text: "Grammatical error" },
@@ -166,17 +165,17 @@ 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" id="comment">
               <div class="relative">
                 <textarea
+                  id="comment"
                   class="bg-bg-secondary min-h-50 w-full rounded p-2 text-text"
                   value={field().state.value}
                   onInput={(e) => field().handleChange(e.currentTarget.value)}
@@ -189,7 +188,7 @@ export function QuoteReportModal(): JSXElement {
                   {250 - field().state.value.length}
                 </div>
               </div>
-            </div>
+            </LabeledField>
           )}
         />
         <div ref={captchaRef}></div>
diff --git a/frontend/src/ts/components/modals/QuoteSubmitModal.tsx b/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
index ce71959575d9..0f9a5ecf3980 100644
--- a/frontend/src/ts/components/modals/QuoteSubmitModal.tsx
+++ b/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>

From aa78e211f5eca565652c407ed4da99a9c1caaa95 Mon Sep 17 00:00:00 2001
From: byseif21 <byseif21@gmail.com>
Date: Tue, 7 Apr 2026 17:09:40 +0200
Subject: [PATCH 3/7] fix

---
 frontend/src/ts/components/ui/form/LabeledField.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ts/components/ui/form/LabeledField.tsx b/frontend/src/ts/components/ui/form/LabeledField.tsx
index 1d2a506eb4f3..dae3b56d5807 100644
--- a/frontend/src/ts/components/ui/form/LabeledField.tsx
+++ b/frontend/src/ts/components/ui/form/LabeledField.tsx
@@ -1,4 +1,4 @@
-import { JSXElement } from "solid-js";
+import { JSXElement, Show } from "solid-js";
 
 import { cn } from "../../../utils/cn";
 
@@ -11,10 +11,16 @@ export function LabeledField(props: {
 }): JSXElement {
   return (
     <div class={cn("grid gap-1", props.class)}>
-      <label for={props.id} class="text-sub cursor-pointer lowercase">
+      <label
+        // oxlint-disable-next-line react/no-unknown-property
+        for={props.id}
+        class="cursor-pointer text-sub lowercase"
+      >
         {props.label}
       </label>
-      {props.sub && <div class="mb-1 text-xs text-sub">{props.sub}</div>}
+      <Show when={props.sub}>
+        <div class="mb-1 text-xs text-sub">{props.sub}</div>
+      </Show>
       {props.children}
     </div>
   );

From b544f2ab87b10cf24c695e1c2b600f972d26844d Mon Sep 17 00:00:00 2001
From: byseif21 <byseif21@gmail.com>
Date: Tue, 7 Apr 2026 18:44:37 +0200
Subject: [PATCH 4/7] no pointer, cleanup

---
 frontend/src/ts/components/modals/QuoteReportModal.tsx | 5 ++---
 frontend/src/ts/components/ui/form/LabeledField.tsx    | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/components/modals/QuoteReportModal.tsx b/frontend/src/ts/components/modals/QuoteReportModal.tsx
index 6a0f636b87cd..e52ea8a1a8c4 100644
--- a/frontend/src/ts/components/modals/QuoteReportModal.tsx
+++ b/frontend/src/ts/components/modals/QuoteReportModal.tsx
@@ -142,7 +142,7 @@ export function QuoteReportModal(): JSXElement {
         <form.Field
           name="reason"
           children={(field) => (
-            <LabeledField label="reason" id="reason">
+            <LabeledField label="reason">
               <SlimSelect
                 options={[
                   { value: "Grammatical error", text: "Grammatical error" },
@@ -172,10 +172,9 @@ export function QuoteReportModal(): JSXElement {
           name="comment"
           validators={{ onChange: fieldMandatory<string>() }}
           children={(field) => (
-            <LabeledField label="comment" id="comment">
+            <LabeledField label="comment">
               <div class="relative">
                 <textarea
-                  id="comment"
                   class="bg-bg-secondary min-h-50 w-full rounded p-2 text-text"
                   value={field().state.value}
                   onInput={(e) => field().handleChange(e.currentTarget.value)}
diff --git a/frontend/src/ts/components/ui/form/LabeledField.tsx b/frontend/src/ts/components/ui/form/LabeledField.tsx
index dae3b56d5807..e5742db03f05 100644
--- a/frontend/src/ts/components/ui/form/LabeledField.tsx
+++ b/frontend/src/ts/components/ui/form/LabeledField.tsx
@@ -14,7 +14,7 @@ export function LabeledField(props: {
       <label
         // oxlint-disable-next-line react/no-unknown-property
         for={props.id}
-        class="cursor-pointer text-sub lowercase"
+        class="text-sub lowercase"
       >
         {props.label}
       </label>

From 9db851fe5486af1c311caa6cdd636bbb2002a3f5 Mon Sep 17 00:00:00 2001
From: byseif21 <byseif21@gmail.com>
Date: Tue, 7 Apr 2026 19:02:10 +0200
Subject: [PATCH 5/7] fix

---
 frontend/src/ts/components/modals/CustomGeneratorModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/modals/CustomGeneratorModal.tsx b/frontend/src/ts/components/modals/CustomGeneratorModal.tsx
index 1598febb9841..0c5b83362820 100644
--- a/frontend/src/ts/components/modals/CustomGeneratorModal.tsx
+++ b/frontend/src/ts/components/modals/CustomGeneratorModal.tsx
@@ -161,7 +161,7 @@ export function CustomGeneratorModal(props: {
         class="grid gap-4"
       >
         <LabeledField label="presets">
-          <div class="grid grid-cols-[1fr,auto] gap-2">
+          <div class="grid grid-cols-[1fr_auto] gap-2">
             <SlimSelect
               options={presetOptions}
               selected={selectedPreset()}

From a08049d4d90f71af090b9a1212b3827f6d428051 Mon Sep 17 00:00:00 2001
From: byseif21 <byseif21@gmail.com>
Date: Tue, 7 Apr 2026 19:25:15 +0200
Subject: [PATCH 6/7] test

---
 .../components/ui/form/LabeledField.spec.tsx  | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)
 create mode 100644 frontend/__tests__/components/ui/form/LabeledField.spec.tsx

diff --git a/frontend/__tests__/components/ui/form/LabeledField.spec.tsx b/frontend/__tests__/components/ui/form/LabeledField.spec.tsx
new file mode 100644
index 000000000000..b62081b2fd9f
--- /dev/null
+++ b/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" sub="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");
+  });
+});

From f886c82dd9f088072dbefaf0afb805811d68301c Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 8 Apr 2026 10:52:32 +0200
Subject: [PATCH 7/7] update styling

---
 frontend/__tests__/components/ui/form/LabeledField.spec.tsx | 2 +-
 frontend/src/ts/components/ui/form/LabeledField.tsx         | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/__tests__/components/ui/form/LabeledField.spec.tsx b/frontend/__tests__/components/ui/form/LabeledField.spec.tsx
index b62081b2fd9f..ccaa134351da 100644
--- a/frontend/__tests__/components/ui/form/LabeledField.spec.tsx
+++ b/frontend/__tests__/components/ui/form/LabeledField.spec.tsx
@@ -26,7 +26,7 @@ describe("LabeledField", () => {
 
   it("renders subtext when provided", () => {
     render(() => (
-      <LabeledField label="test" sub="helper text">
+      <LabeledField label="test" subLabel="helper text">
         <input />
       </LabeledField>
     ));
diff --git a/frontend/src/ts/components/ui/form/LabeledField.tsx b/frontend/src/ts/components/ui/form/LabeledField.tsx
index e5742db03f05..0959f853ad18 100644
--- a/frontend/src/ts/components/ui/form/LabeledField.tsx
+++ b/frontend/src/ts/components/ui/form/LabeledField.tsx
@@ -4,7 +4,7 @@ import { cn } from "../../../utils/cn";
 
 export function LabeledField(props: {
   label: string;
-  sub?: string;
+  subLabel?: string;
   id?: string;
   children: JSXElement;
   class?: string;
@@ -18,8 +18,8 @@ export function LabeledField(props: {
       >
         {props.label}
       </label>
-      <Show when={props.sub}>
-        <div class="mb-1 text-xs text-sub">{props.sub}</div>
+      <Show when={props.subLabel}>
+        <div class="mb-1 text-em-xs text-sub opacity-50">{props.subLabel}</div>
       </Show>
       {props.children}
     </div>