refactor: solid dev options modal (@miodec) by Miodec · Pull Request #7561 · monkeytypegame/monkeytype

Miodec · 2026-03-02T10:03:15Z

No description provided.

Copilot

Pull request overview

Refactors the legacy dev options modal into the SolidJS modal system, moving dev controls into the component-based modal stack and updating the dev overlay entry points accordingly.

Changes:

Replace legacy dev-options modal implementation with a Solid DevOptionsModal component.
Add a dev-only overlay button group to open Dev Options / server configure.
Remove legacy dynamic-import loader + old dev button CSS.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
frontend/src/ts/utils/async-modules.ts	Removes dynamic-import helper previously used to load the dev options modal.
frontend/src/ts/stores/modals.ts	Extends `ModalId` union with `DevOptions` for the new Solid modal.
frontend/src/ts/modals/dev-options.ts	Deletes legacy modal implementation (non-Solid).
frontend/src/ts/index.ts	Removes dev-only bootstrapping that dynamically injected legacy dev buttons.
frontend/src/ts/components/modals/Modals.tsx	Registers the new `DevOptionsModal` in the Solid modal tree.
frontend/src/ts/components/modals/DevOptionsModal.tsx	New Solid modal containing dev actions (quick login, debug toggles, etc.).
frontend/src/ts/components/layout/overlays/Overlays.tsx	Adds dev-only overlay buttons to open Dev Options and backend configure.
frontend/src/styles/core.scss	Removes styling for the old injected `#devButtons` container.

Copilot · 2026-03-02T10:09:46Z

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

@@ -10,6 +11,7 @@ export function Modals(): JSXElement {
      <VersionHistoryModal />
      <ContactModal />
      <SupportModal />
+      <DevOptionsModal />
    </>


DevOptionsModal is now always imported + rendered in Modals, which ships dev-only actions (quick login, test toggles) in production bundles and makes them theoretically triggerable (e.g. via any future call to showModal("DevOptions")). Gate rendering behind isDevEnvironment() and preferably lazy-load the modal component (dynamic import) to keep dev-only code out of prod bundles.

Copilot · 2026-03-02T10:09:46Z

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

+        ).then(() => {
+          hideLoaderBar();
+        });


Quick Login ignores the signIn return value (it can resolve with { success: false, message }) and never surfaces failures to the user. Handle the resolved result (notify on failure) and ensure hideLoaderBar() runs via finally so the loader can’t get stuck if an unexpected exception occurs.

Suggested change

).then(() => {

hideLoaderBar();

});

)

.then((result: unknown) => {

// Handle signIn returning { success: boolean, message?: string }

if (

result &&

typeof result === "object" &&

"success" in result &&

!(result as { success: boolean }).success

) {

const message =

(result as { message?: string }).message ??

"Quick login failed.";

Notifications.add(message, -1);

}

})

.catch((error) => {

// Surface unexpected failures

Notifications.add("Quick login failed.", -1, {

details: error,

});

})

.finally(() => {

hideLoaderBar();

});

Copilot · 2026-03-02T10:09:47Z

frontend/src/ts/components/layout/overlays/Overlays.tsx

+      <Show when={isDevEnvironment()}>
+        <div class="fixed top-30 left-0 z-10000 flex w-max flex-col gap-2 text-xs">
+          <Button
+            href={`${envConfig.backendUrl}/configure/`}
+            ariaLabel={{
+              text: "Configure server",
+              position: "right",
+            }}
+            fa={{
+              icon: "fa-server",
+            }}
+            class="rounded-tl-none rounded-bl-none p-2"
+          />
+          <Button
+            ariaLabel={{
+              text: "Dev options",
+              position: "right",
+            }}
+            onClick={() => showModal("DevOptions")}
+            fa={{
+              icon: "fa-flask",
+            }}
+            class="rounded-tl-none rounded-bl-none p-2"
+          />
+        </div>


After moving dev options to Solid modals, the legacy popup DOM + styles for #devOptionsModal still exist (e.g. src/html/popups.html + styles/popups.scss) but there’s no longer any TS code referencing it. Remove the unused legacy modal markup/styles to avoid dead UI + maintenance overhead.

Miodec · 2026-03-02T10:29:30Z

@copilot resolve all review comments

Copilot · 2026-03-02T10:29:39Z

@Miodec I've opened a new pull request, #7562, to work on those changes. Once the pull request is ready, I'll request review from you.

github-actions · 2026-03-02T10:51:05Z

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

Miodec · 2026-03-02T10:52:50Z

@copilot fix lint

Copilot · 2026-03-02T10:52:57Z

@Miodec I've opened a new pull request, #7563, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot

Pull request overview

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

Copilot · 2026-03-02T10:56:23Z

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

+            Notifications.add("Quick login failed.", -1, {
+              details: error,
+            });


Notifications.add expects details?: object | string, but the catch param is typed unknown and passed through as-is (details: error). This won’t type-check and can also produce non-serializable / unhelpful details at runtime. Narrow/convert error before passing (eg error instanceof Error ? { message: error.message, stack: error.stack } : String(error)), or use the existing error-message helper.

Suggested change

Notifications.add("Quick login failed.", -1, {

details: error,

});

const details =

error instanceof Error

? { message: error.message, stack: error.stack }

: String(error);

Notifications.add("Quick login failed.", -1, { details });

Copilot · 2026-03-02T10:56:24Z

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

+import { JSXElement, Show, lazy } from "solid-js";

+import { isDevEnvironment } from "../../utils/misc";
 import { ContactModal } from "./ContactModal";
 import { SupportModal } from "./SupportModal";
 import { VersionHistoryModal } from "./VersionHistoryModal";

+const DevOptionsModal = lazy(() =>
+  import("./DevOptionsModal").then((m) => ({ default: m.DevOptionsModal })),
+);
+
 export function Modals(): JSXElement {
  return (
    <>
      <VersionHistoryModal />
      <ContactModal />
      <SupportModal />
+      <Show when={isDevEnvironment()}>
+        <DevOptionsModal />
+      </Show>


lazy() suspends while the module loads, but this repo doesn’t appear to use <Suspense> anywhere (including where <Modals /> is mounted). Without a Suspense boundary, Solid’s lazy components can throw/promises can bubble to the root. Either render DevOptionsModal via a normal import (it’s already dev-gated), or wrap it in a <Suspense fallback={null}> (and add the import).

)

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>

Miodec added 2 commits March 2, 2026 10:54

convert dev options to solid

4af3ed8

style

9708931

Copilot AI review requested due to automatic review settings March 2, 2026 10:03

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

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

Copilot started reviewing on behalf of Miodec March 2, 2026 10:03 View session

use for

e53ece8

Copilot AI reviewed Mar 2, 2026

View reviewed changes

fehmer previously approved these changes Mar 2, 2026

View reviewed changes

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

Copilot AI mentioned this pull request Mar 2, 2026

refactor: solid dev options modal (@miodec) #7562

Merged

22 tasks

refactor: solid dev options modal (@Miodec) (#7562)

7269692

Miodec dismissed fehmer’s stale review via 7269692 March 2, 2026 10:49

Miodec requested a review from Copilot March 2, 2026 10:49

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

Copilot started reviewing on behalf of Miodec March 2, 2026 10:50 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 2, 2026

Copilot AI mentioned this pull request Mar 2, 2026

fix: resolve lint errors in dev options modal refactor (@copilot) #7563

Merged

22 tasks

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

Copilot AI reviewed Mar 2, 2026

View reviewed changes

Copilot AI and others added 4 commits March 2, 2026 12:02

fix: resolve lint errors in dev options modal refactor (@copilot) (#7563

2e74506

)

error message

9f4dce3

extract

acc4985

suspense

d391a9d

Miodec merged commit 3eede88 into master Mar 2, 2026
8 checks passed

Miodec deleted the solid-dev branch March 2, 2026 12:24

Miodec added a commit that referenced this pull request Mar 2, 2026

refactor: solid dev options modal (@Miodec) (#7561)

9c9cfd8

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>

-        ).then(() => {
-          hideLoaderBar();
-        });
+        )
+          .then((result: unknown) => {
+            // Handle signIn returning { success: boolean, message?: string }
+            if (
+              result &&
+              typeof result === "object" &&
+              "success" in result &&
+              !(result as { success: boolean }).success
+            ) {
+              const message =
+                (result as { message?: string }).message ??
+                "Quick login failed.";
+              Notifications.add(message, -1);
+            }
+          })
+          .catch((error) => {
+            // Surface unexpected failures
+            Notifications.add("Quick login failed.", -1, {
+              details: error,
+            });
+          })
+          .finally(() => {
+            hideLoaderBar();
+          });

-            Notifications.add("Quick login failed.", -1, {
-              details: error,
-            });
+            const details =
+              error instanceof Error
+                ? { message: error.message, stack: error.stack }
+                : String(error);
+            Notifications.add("Quick login failed.", -1, { details });

Uh oh!

Conversation

Miodec commented Mar 2, 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 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Miodec commented Mar 2, 2026

Uh oh!

Copilot AI commented Mar 2, 2026

Uh oh!

github-actions bot commented Mar 2, 2026

Uh oh!

Miodec commented Mar 2, 2026

Uh oh!

Copilot AI commented Mar 2, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 2, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants