refactor: solid custom text and associated modals (@miodec) by Miodec · Pull Request #7695 · monkeytypegame/monkeytype

Miodec · 2026-03-21T08:25:27Z

No description provided.

github-actions · 2026-03-21T08:28:13Z

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.

Copilot

Pull request overview

Refactors the legacy “Custom Text” modal flow to SolidJS components and the shared modal-store system, while removing the old dialog HTML/CSS + imperative modal scripts. Also moves “loaded challenge” state into a Solid signal for broader reuse.

Changes:

Replace legacy custom text / word filter / custom generator / saved-texts modals with SolidJS modal components.
Remove corresponding legacy dialog markup + popup styles/media-query overrides.
Introduce states/test.ts signal for the currently loaded challenge and update challenge + notice UI to use it.

Reviewed changes

Copilot reviewed 28 out of 29 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Lockfile updates for Vitest/Vite peer resolution snapshots.
frontend/src/ts/test/test-state.ts	Removes legacy `activeChallenge` state + setter.
frontend/src/ts/states/test.ts	Adds Solid signal for loaded challenge state.
frontend/src/ts/states/modals.ts	Extends modal id union for new Solid custom-text-related modals.
frontend/src/ts/modals/word-filter.ts	Deletes legacy word filter modal implementation.
frontend/src/ts/modals/simple-modals.ts	Removes legacy custom-text-related simple modal entries.
frontend/src/ts/modals/simple-modals-base.ts	Removes custom-text-related popup keys from legacy simple modal registry.
frontend/src/ts/modals/saved-texts.ts	Deletes legacy saved-texts modal implementation.
frontend/src/ts/modals/save-custom-text.ts	Deletes legacy save-custom-text modal implementation.
frontend/src/ts/modals/mobile-test-config.ts	Opens new Solid CustomText modal from mobile test config.
frontend/src/ts/modals/custom-text.ts	Deletes legacy custom text modal implementation.
frontend/src/ts/modals/custom-generator.ts	Deletes legacy custom generator modal implementation.
frontend/src/ts/event-handlers/test.ts	Updates custom text button handler to open Solid modal store id.
frontend/src/ts/elements/modes-notice.ts	Switches challenge display to `getLoadedChallenge()` signal.
frontend/src/ts/controllers/challenge-controller.ts	Uses `getLoadedChallenge/setLoadedChallenge` instead of legacy test-state field.
frontend/src/ts/components/modals/WordFilterModal.tsx	New Solid word-filter modal component.
frontend/src/ts/components/modals/SavedTextsModal.tsx	New Solid saved-texts modal component (uses simple-modal store for confirms).
frontend/src/ts/components/modals/SaveCustomTextModal.tsx	New Solid save-custom-text modal component using solid-form + zod.
frontend/src/ts/components/modals/Modals.tsx	Registers the new `CustomTextModal` in the global modal mount.
frontend/src/ts/components/modals/CustomTextModal.tsx	New Solid custom text modal + chained sub-modals (save/saved/filter/generator).
frontend/src/ts/components/modals/CustomGeneratorModal.tsx	New Solid custom generator modal component.
frontend/src/styles/popups.scss	Removes legacy popup styling for deleted dialogs.
frontend/src/styles/media-queries-yellow.scss	Removes legacy custom text modal responsive overrides.
frontend/src/styles/media-queries-purple.scss	Removes legacy custom text + word filter responsive overrides.
frontend/src/styles/media-queries-green.scss	Removes legacy custom text modal responsive overrides.
frontend/src/styles/media-queries-blue.scss	Removes legacy custom text modal responsive overrides.
frontend/src/styles/inputs.scss	Removes legacy word-filter checkbox sizing rule tied to removed markup.
frontend/src/html/popups.html	Removes legacy dialog HTML for custom text + related modals.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Copilot · 2026-03-21T08:30:46Z

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

+  const beforeShow = () => {
+    initState();


CustomText modal state is re-initialized on every show (initState() in beforeShow). When returning from chained modals (SaveCustomText/SavedTexts/WordFilter/CustomGenerator), this will overwrite any in-progress textarea edits before handleIncomingData runs, so users lose unsaved changes. Only run initState() on first open / non-chained open, and preserve current signals on chained re-open (then apply incoming data on top).

Suggested change

const beforeShow = () => {

initState();

let hasInitialized = false;

const beforeShow = () => {

if (!hasInitialized) {

initState();

hasInitialized = true;

}

Copilot · 2026-03-21T08:30:46Z

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

-    CustomTextPopup.show({
-      modalChain: modal,
-    });
+    showModal("CustomText");


This modal is still using the legacy AnimatedModal (utils/animated-modal), but it now opens CustomText via the Solid modal store. Because the legacy modal isn't tracked in states/modals, CustomText will open without chaining/hiding mobileTestConfigModal, leading to multiple dialogs/backdrops and likely focus/scroll issues. Consider either migrating mobileTestConfigModal to the same modal store, or explicitly hide the legacy modal before showing CustomText and re-show it when CustomText closes.

Suggested change

showModal("CustomText");

void modal.hide();

showModal("CustomText", {

onClose: () => {

show();

},

});

Copilot · 2026-03-21T08:30:47Z

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

+  const cleanUpText = (): string[] => {
+    let text = textarea();
+    if (text === "") return [];
+


cleanUpText() no longer applies the default sanitization that the previous custom text modal applied on submit (zero-width removal, control-char normalization, typography cleanup). With the new UI these only happen if the user manually clicks the separate "apply" buttons, which is a behavior regression and can leave hidden/control chars in saved custom texts. Consider restoring these transformations inside cleanUpText() by default (or add toggles default-on) so pressing "ok" preserves the previous behavior.

Suggested change

// default sanitization: zero-width, control chars, typography

text = text.replace(/[\u200B-\u200D\u2060\uFEFF]/g, "");

text = text.replace(/[\u0000-\u001F\u007F-\u009F]/g, "");

text = text

.replace(/[“”]/g, '"')

.replace(/[‘’]/g, "'")

.replace(/[\u2013\u2014]/g, "-")

.replace(/\u2026/g, "...");

Copilot · 2026-03-21T08:30:47Z

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

+    for (let i = 0; i < wordCount; i++) {
+      const wordLength =
+        Math.floor(Math.random() * (maxLength - minLength + 1)) + minLength;
+      let word = "";
+      for (let j = 0; j < wordLength; j++) {


Word generation assumes minLength <= maxLength. If a user enters min > max, the random-length calculation can produce invalid/negative ranges and generate incorrect output. Add validation (swap/clamp values or show a notice and abort) before computing wordLength.

github-actions · 2026-03-21T09:39:07Z

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.

github-actions · 2026-03-21T09:56:11Z

Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes.

Copilot

Pull request overview

Copilot reviewed 30 out of 31 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

frontend/src/ts/components/ui/SlimSelect.tsx

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

Miodec added 13 commits March 20, 2026 17:37

convert custom text modal

ecaf94f

nested modals

80932fa

use tsform

c9c0530

bam

fd83d45

asdf

a37da49

remove

62f0a9e

replace

87c007e

validate on checkbox change

c595db3

replace activeChallenge state with solid signal

5afe88d

remove incoming data check from beforeShow function

26ef891

responsiveness

76d5345

cleanup

f95119f

fix

3c949b6

Copilot AI review requested due to automatic review settings March 21, 2026 08:25

monkeytypegeorge added the frontend User interface or web stuff label Mar 21, 2026

github-actions bot added the waiting for review Pull requests that require a review before continuing label Mar 21, 2026

Copilot started reviewing on behalf of Miodec March 21, 2026 08:26 View session

Miodec changed the title ~~refactor: solid custom text modal (@miodec)~~ refactor: solid custom text and associated modals (@miodec) Mar 21, 2026

github-actions bot added waiting for update Pull requests or issues that require changes/comments before continuing and removed waiting for review Pull requests that require a review before continuing labels Mar 21, 2026

Copilot AI reviewed Mar 21, 2026

View reviewed changes

Miodec added 5 commits March 21, 2026 09:44

fix slim appending to body

23bc59b

fix

80ff4f0

styling

6e48346

use ts form

db6e403

pass ischained to before show

1048578

github-actions bot removed the waiting for update Pull requests or issues that require changes/comments before continuing label Mar 21, 2026

rename

688d466

github-actions bot added the waiting for update Pull requests or issues that require changes/comments before continuing label Mar 21, 2026

Miodec added 2 commits March 21, 2026 10:54

handle disabled in slim component

cb27d62

use tsform

7492960

github-actions bot removed the waiting for update Pull requests or issues that require changes/comments before continuing label Mar 21, 2026

Miodec requested a review from Copilot March 21, 2026 09:55

github-actions bot added the waiting for review Pull requests that require a review before continuing label Mar 21, 2026

Copilot started reviewing on behalf of Miodec March 21, 2026 09:55 View session

github-actions bot added waiting for update Pull requests or issues that require changes/comments before continuing and removed waiting for review Pull requests that require a review before continuing labels Mar 21, 2026

Copilot AI reviewed Mar 21, 2026

View reviewed changes

frontend/src/ts/components/ui/SlimSelect.tsx Show resolved Hide resolved

frontend/src/ts/components/modals/WordFilterModal.tsx Show resolved Hide resolved

Miodec added 2 commits March 21, 2026 14:05

remove circular

d0a9fb9

fixes

2ed0479

github-actions bot removed the waiting for update Pull requests or issues that require changes/comments before continuing label Mar 21, 2026

Miodec added 3 commits March 21, 2026 17:12

show warning

b507409

fix reset button

c8bd47f

fix

5ea01d4

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: solid custom text and associated modals (@miodec)#7695

refactor: solid custom text and associated modals (@miodec)#7695
Miodec wants to merge 26 commits intomasterfrom
custom-text-modal

Miodec commented Mar 21, 2026

Uh oh!

github-actions bot commented Mar 21, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 21, 2026

Uh oh!

Copilot AI Mar 21, 2026

Uh oh!

Copilot AI Mar 21, 2026

Uh oh!

Copilot AI Mar 21, 2026

Uh oh!

github-actions bot commented Mar 21, 2026

Uh oh!

github-actions bot commented Mar 21, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

-    showModal("CustomText");
+    void modal.hide();
+    showModal("CustomText", {
+      onClose: () => {
+        show();
+      },
+    });

+    // default sanitization: zero-width, control chars, typography
+    text = text.replace(/[\u200B-\u200D\u2060\uFEFF]/g, "");
+    text = text.replace(/[\u0000-\u001F\u007F-\u009F]/g, "");
+    text = text
+      .replace(/[“”]/g, '"')
+      .replace(/[‘’]/g, "'")
+      .replace(/[\u2013\u2014]/g, "-")
+      .replace(/\u2026/g, "...");

Uh oh!

Conversation

Miodec commented Mar 21, 2026

Uh oh!

github-actions bot commented Mar 21, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 21, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 21, 2026

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Mar 21, 2026

Uh oh!

github-actions bot commented Mar 21, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants