From 3163f1e80c515fcc84043b111e37f439e2d46a82 Mon Sep 17 00:00:00 2001
From: Jack <jack@monkeytype.com>
Date: Sun, 11 Jan 2026 22:15:54 +0100
Subject: [PATCH 1/2] refactor: covert version button and version history modal
 to a component (@miodec, @fehmer) (#7343)

Also adds a modal component.
Also reworks mounting logic.

---------

Co-authored-by: Christian Fehmer <cfe@sexy-developer.com>
---
 .../components/AnimatedModal.spec.tsx         |  97 ++++++
 .../components/AsyncContent.spec.tsx          |  78 +++++
 frontend/src/html/footer.html                 |  10 +-
 frontend/src/html/popups.html                 |   6 +-
 frontend/src/index.html                       |   1 +
 frontend/src/styles/footer.scss               |   1 +
 frontend/src/styles/popups.scss               |  68 ----
 frontend/src/ts/components/AnimatedModal.tsx  | 313 ++++++++++++++++++
 frontend/src/ts/components/AsyncContent.tsx   |  28 ++
 .../src/ts/components/ModalChainContext.tsx   |  72 ++++
 frontend/src/ts/components/VersionButton.tsx  |  59 ++++
 .../ts/components/VersionHistoryModal.scss    |  66 ++++
 .../src/ts/components/VersionHistoryModal.tsx |  80 +++++
 frontend/src/ts/components/mount.tsx          |  19 +-
 frontend/src/ts/elements/version-button.ts    |  25 --
 frontend/src/ts/event-handlers/footer.ts      |  28 --
 frontend/src/ts/event-handlers/global.ts      |   2 +-
 frontend/src/ts/hooks/useLocalStorage.ts      |  87 +++++
 frontend/src/ts/hooks/useRefWithUtils.ts      |  17 +
 frontend/src/ts/index.ts                      |   4 +-
 frontend/src/ts/modals/version-history.ts     |  61 ----
 frontend/src/ts/signals/core.ts               |   7 +
 frontend/src/ts/states/version.ts             |  68 ----
 frontend/src/ts/stores/modals.ts              |  19 ++
 frontend/src/ts/utils/version.ts              |  47 +++
 frontend/vitest.config.ts                     |   1 +
 26 files changed, 997 insertions(+), 267 deletions(-)
 create mode 100644 frontend/__tests__/components/AnimatedModal.spec.tsx
 create mode 100644 frontend/__tests__/components/AsyncContent.spec.tsx
 create mode 100644 frontend/src/ts/components/AnimatedModal.tsx
 create mode 100644 frontend/src/ts/components/AsyncContent.tsx
 create mode 100644 frontend/src/ts/components/ModalChainContext.tsx
 create mode 100644 frontend/src/ts/components/VersionButton.tsx
 create mode 100644 frontend/src/ts/components/VersionHistoryModal.scss
 create mode 100644 frontend/src/ts/components/VersionHistoryModal.tsx
 delete mode 100644 frontend/src/ts/elements/version-button.ts
 create mode 100644 frontend/src/ts/hooks/useLocalStorage.ts
 create mode 100644 frontend/src/ts/hooks/useRefWithUtils.ts
 delete mode 100644 frontend/src/ts/modals/version-history.ts
 delete mode 100644 frontend/src/ts/states/version.ts
 create mode 100644 frontend/src/ts/stores/modals.ts
 create mode 100644 frontend/src/ts/utils/version.ts

diff --git a/frontend/__tests__/components/AnimatedModal.spec.tsx b/frontend/__tests__/components/AnimatedModal.spec.tsx
new file mode 100644
index 000000000000..1c10d9f573fe
--- /dev/null
+++ b/frontend/__tests__/components/AnimatedModal.spec.tsx
@@ -0,0 +1,97 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render } from "@solidjs/testing-library";
+import { AnimatedModal } from "../../src/ts/components/AnimatedModal";
+
+describe("AnimatedModal", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    // Mock dialog methods that don't exist in jsdom
+    HTMLDialogElement.prototype.showModal = vi.fn();
+    HTMLDialogElement.prototype.show = vi.fn();
+    HTMLDialogElement.prototype.close = vi.fn();
+  });
+
+  function renderModal(props: {
+    isOpen: boolean;
+    onClose: () => void;
+    onEscape?: (e: KeyboardEvent) => void;
+    onBackdropClick?: (e: MouseEvent) => void;
+    class?: string;
+    beforeShow?: () => void | Promise<void>;
+    afterShow?: () => void | Promise<void>;
+    beforeHide?: () => void | Promise<void>;
+    afterHide?: () => void | Promise<void>;
+    animationMode?: "none" | "both" | "modalOnly";
+  }): {
+    container: HTMLElement;
+    dialog: HTMLDialogElement;
+    modalDiv: HTMLDivElement;
+  } {
+    const { container } = render(() => (
+      <AnimatedModal id="TestModal" {...props}>
+        <div data-testid="modal-content">Test Content</div>
+      </AnimatedModal>
+    ));
+
+    return {
+      // oxlint-disable-next-line no-non-null-assertion
+      container: container.children[0]! as HTMLElement,
+      // oxlint-disable-next-line no-non-null-assertion
+      dialog: container.querySelector("dialog")!,
+      // oxlint-disable-next-line no-non-null-assertion
+      modalDiv: container.querySelector(".modal")!,
+    };
+  }
+
+  it("renders dialog with correct id and class", () => {
+    const { dialog } = renderModal({ isOpen: false, onClose: vi.fn() });
+
+    expect(dialog).toHaveAttribute("id", "TestModal");
+    expect(dialog).toHaveClass("modalWrapper", "hidden");
+  });
+
+  it("renders children inside modal div", () => {
+    const { modalDiv } = renderModal({ isOpen: false, onClose: vi.fn() });
+
+    expect(
+      modalDiv.querySelector("[data-testid='modal-content']"),
+    ).toHaveTextContent("Test Content");
+  });
+
+  it("has escape handler attached", () => {
+    const onClose = vi.fn();
+
+    const { dialog } = renderModal({ isOpen: true, onClose });
+
+    expect(dialog.onkeydown).toBeDefined();
+  });
+
+  it("has backdrop click handler attached", () => {
+    const onClose = vi.fn();
+
+    const { dialog } = renderModal({ isOpen: true, onClose });
+
+    expect(dialog.onmousedown).toBeDefined();
+  });
+
+  it("applies custom class to dialog", () => {
+    const { dialog } = renderModal({
+      isOpen: false,
+      onClose: vi.fn(),
+      class: "customClass",
+    });
+
+    expect(dialog).toHaveClass("modalWrapper", "hidden", "customClass");
+  });
+
+  it("renders with animationMode none", () => {
+    const { dialog } = renderModal({
+      isOpen: false,
+      onClose: vi.fn(),
+      animationMode: "none",
+    });
+
+    expect(dialog).toHaveAttribute("id", "TestModal");
+  });
+});
diff --git a/frontend/__tests__/components/AsyncContent.spec.tsx b/frontend/__tests__/components/AsyncContent.spec.tsx
new file mode 100644
index 000000000000..1868b8c7c1ca
--- /dev/null
+++ b/frontend/__tests__/components/AsyncContent.spec.tsx
@@ -0,0 +1,78 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, waitFor } from "@solidjs/testing-library";
+import { createResource, Resource } from "solid-js";
+import AsyncContent from "../../src/ts/components/AsyncContent";
+
+describe("AsyncContent", () => {
+  function renderWithResource<T>(
+    resource: Resource<T>,
+    errorMessage?: string,
+  ): {
+    container: HTMLElement;
+  } {
+    const { container } = render(() => (
+      <AsyncContent resource={resource} errorMessage={errorMessage}>
+        {(data) => <div data-testid="content">{String(data)}</div>}
+      </AsyncContent>
+    ));
+
+    return {
+      container,
+    };
+  }
+
+  it("renders loading state while resource is pending", () => {
+    const [resource] = createResource(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      return "data";
+    });
+
+    const { container } = renderWithResource(resource);
+
+    const preloader = container.querySelector(".preloader");
+    expect(preloader).toBeInTheDocument();
+    expect(preloader).toHaveClass("preloader");
+    expect(preloader?.querySelector("i")).toHaveClass(
+      "fas",
+      "fa-fw",
+      "fa-spin",
+      "fa-circle-notch",
+    );
+  });
+
+  it("renders data when resource resolves", async () => {
+    const [resource] = createResource(async () => {
+      return "Test Data";
+    });
+
+    renderWithResource(resource);
+
+    await waitFor(() => {
+      expect(screen.getByTestId("content")).toHaveTextContent("Test Data");
+    });
+  });
+
+  it("renders error message when resource fails", async () => {
+    const [resource] = createResource(async () => {
+      throw new Error("Test error");
+    });
+
+    renderWithResource(resource, "Custom error message");
+
+    await waitFor(() => {
+      expect(screen.getByText(/Custom error message/)).toBeInTheDocument();
+    });
+  });
+
+  it("renders default error message when no custom message provided", async () => {
+    const [resource] = createResource(async () => {
+      throw new Error("Test error");
+    });
+
+    renderWithResource(resource);
+
+    await waitFor(() => {
+      expect(screen.getByText(/An error occurred/)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/frontend/src/html/footer.html b/frontend/src/html/footer.html
index 25ff8906347b..fb49d6b6126a 100644
--- a/frontend/src/html/footer.html
+++ b/frontend/src/html/footer.html
@@ -80,15 +80,7 @@
         </div>
         <div class="text">serika dark</div>
       </button>
-      <button class="currentVersion textButton">
-        <i class="fas fa-fw fa-code-branch"></i>
-        <div class="text">version</div>
-        <key id="newVersionIndicator" class="hidden">new</key>
-      </button>
-      <!-- <div>
-        <i class="fas fa-file"></i>
-        Terms & Conditions
-      </div> -->
+      <VersionButton />
     </div>
   </div>
 </footer>
diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index 7dff29cceec5..205958504d9c 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -1,3 +1,5 @@
+<VersionHistoryModal />
+
 <dialog id="registerCaptchaModal" class="modalWrapper hidden">
   <div class="modal">
     <div class="g-recaptcha"></div>
@@ -1118,9 +1120,7 @@
     <button>copy link to clipboard</button>
   </div>
 </dialog>
-<dialog id="versionHistoryModal" class="modalWrapper hidden">
-  <div class="modal"></div>
-</dialog>
+
 <dialog id="supportModal" class="modalWrapper hidden">
   <div class="modal">
     <div class="title">Support Monkeytype</div>
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 1c74abf77189..00f398d48211 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -21,6 +21,7 @@
         <div class="bar"></div>
       </div>
     </div>
+    <ScrollToTop />
     <div id="popups">
       <load src="html/popups.html" />
     </div>
diff --git a/frontend/src/styles/footer.scss b/frontend/src/styles/footer.scss
index a3bcd6caee07..b4ee5c5e3421 100644
--- a/frontend/src/styles/footer.scss
+++ b/frontend/src/styles/footer.scss
@@ -72,6 +72,7 @@ footer {
     display: flex;
     #newVersionIndicator {
       margin: 0;
+      padding: 0 0.25em;
       font-size: unset;
       background-color: var(--main-color);
       border-radius: calc(var(--roundness) / 2);
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index c29d727145e1..026aa177ba2c 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -1385,74 +1385,6 @@ body.darkMode {
   }
 }
 
-#versionHistoryModal {
-  .modal {
-    @extend .ffscroll;
-    overflow-y: scroll;
-    max-width: 1200px;
-
-    hr {
-      background: var(--sub-alt-color);
-      height: 0.25rem;
-      border: none;
-      border-radius: var(--roundness);
-      margin: 1rem 0;
-    }
-
-    h3 {
-      color: var(--sub-color);
-      font-size: 1.25rem;
-      margin: 0 0 0.5rem 0;
-    }
-
-    .preloader {
-      color: var(--main-color);
-      display: grid;
-      place-content: center center;
-      font-size: 2rem;
-    }
-
-    .tip {
-      text-align: center;
-      color: var(--sub-color);
-    }
-
-    .releases {
-      display: grid;
-      gap: 4rem;
-
-      .release {
-        display: grid;
-        grid-template-areas:
-          "title date"
-          "body body";
-
-        .title {
-          grid-area: title;
-          font-size: 2rem;
-          color: var(--sub-color);
-        }
-
-        .date {
-          grid-area: date;
-          text-align: right;
-          color: var(--sub-color);
-          align-self: center;
-        }
-
-        .body {
-          grid-area: body;
-          color: var(--text-color);
-        }
-
-        &:last-child {
-          margin-bottom: 2rem;
-        }
-      }
-    }
-  }
-}
-
 #supportModal {
   .modal {
     max-width: 900px;
diff --git a/frontend/src/ts/components/AnimatedModal.tsx b/frontend/src/ts/components/AnimatedModal.tsx
new file mode 100644
index 000000000000..428a9d09a5d5
--- /dev/null
+++ b/frontend/src/ts/components/AnimatedModal.tsx
@@ -0,0 +1,313 @@
+import { JSXElement, createEffect, onCleanup, ParentProps } from "solid-js";
+import { applyReducedMotion } from "../utils/misc";
+import { useModalChain } from "./ModalChainContext";
+import { useRefWithUtils } from "../hooks/useRefWithUtils";
+
+type AnimationParams = {
+  opacity?: number | [number, number];
+  marginTop?: string | [string, string];
+  duration?: number;
+};
+
+type AnimationConfig = {
+  wrapper?: AnimationParams;
+  modal?: AnimationParams;
+};
+
+type AnimatedModalProps = ParentProps<{
+  id: string;
+  isOpen: boolean;
+  onClose: () => void;
+  mode?: "modal" | "dialog";
+  animationMode?: "none" | "both" | "modalOnly";
+  customAnimations?: {
+    show?: AnimationConfig;
+    hide?: AnimationConfig;
+  };
+  focusFirstInput?: true | "focusAndSelect";
+  beforeShow?: () => void | Promise<void>;
+  afterShow?: () => void | Promise<void>;
+  beforeHide?: () => void | Promise<void>;
+  afterHide?: () => void | Promise<void>;
+  onEscape?: (e: KeyboardEvent) => void;
+  onBackdropClick?: (e: MouseEvent) => void;
+
+  // Chain-related props
+  useChain?: boolean;
+  modalChain?: string;
+  clearChainOnClose?: boolean;
+  showOptionsWhenReturning?: Record<string, unknown>;
+
+  class?: string;
+}>;
+
+const DEFAULT_ANIMATION_DURATION = 125;
+const MODAL_ONLY_ANIMATION_MULTIPLIER = 0.75;
+
+export function AnimatedModal(props: AnimatedModalProps): JSXElement {
+  // Refs are assigned by SolidJS via the ref attribute
+  const [dialogRef, dialogEl] = useRefWithUtils<HTMLDialogElement>();
+  const [modalRef, modalEl] = useRefWithUtils<HTMLDivElement>();
+  // oxlint-disable-next-line solid/reactivity
+  const modalChain = props.useChain ? useModalChain() : undefined;
+
+  // Register this modal in the chain
+  createEffect(() => {
+    if (props.useChain && modalChain && props.isOpen) {
+      modalChain.pushModal({
+        id: props.id,
+        show: showModal,
+        hide: hideModal,
+        showOptions: props.showOptionsWhenReturning,
+      });
+    }
+  });
+
+  // Handle open/close with animations
+  createEffect(() => {
+    if (props.isOpen) {
+      void showModal();
+    } else {
+      void hideModal();
+    }
+  });
+
+  async function showModal(): Promise<void> {
+    if (dialogEl() === undefined || modalEl() === undefined) return;
+
+    await props.beforeShow?.();
+
+    // If chaining from another modal, hide it first
+    const previousModal = modalChain?.getPreviousModal();
+    const isChained =
+      props.modalChain !== undefined ||
+      (previousModal && previousModal.id !== props.id);
+
+    if (isChained && previousModal) {
+      await previousModal.hide();
+    }
+
+    // Open the dialog
+    dialogEl()?.removeClass("hidden");
+    if (props.mode === "dialog") {
+      dialogEl()?.native.show();
+    } else {
+      dialogEl()?.native.showModal();
+    }
+
+    const modalAnimDuration = applyReducedMotion(
+      (props.customAnimations?.show?.modal?.duration ??
+        DEFAULT_ANIMATION_DURATION) *
+        (isChained ? MODAL_ONLY_ANIMATION_MULTIPLIER : 1),
+    );
+
+    const animMode = isChained ? "modalOnly" : (props.animationMode ?? "both");
+
+    // Animate in
+    if (animMode === "both" || animMode === "none") {
+      const wrapperDuration = applyReducedMotion(
+        props.customAnimations?.show?.wrapper?.duration ??
+          DEFAULT_ANIMATION_DURATION,
+      );
+
+      // Wrapper animation
+      if (animMode !== "none") {
+        dialogEl()?.animate({
+          opacity: [0, 1],
+          duration: wrapperDuration,
+          ease: "easeOut",
+        });
+      }
+
+      // Modal animation
+      if (animMode !== "none") {
+        modalEl()?.setStyle({
+          opacity: "0",
+          marginTop: "1rem",
+        });
+
+        modalEl()?.animate({
+          opacity: [0, 1],
+          marginTop: ["1rem", "0"],
+          duration: modalAnimDuration,
+          easing: "ease-out",
+          fill: "forwards",
+          onComplete: () => {
+            focusFirstInput();
+            void handleAfterShow();
+          },
+        });
+      } else {
+        modalEl()?.setStyle({
+          opacity: "1",
+          marginTop: "0",
+        });
+        focusFirstInput();
+        void handleAfterShow();
+      }
+    } else if (animMode === "modalOnly") {
+      dialogEl()?.setStyle({
+        opacity: "1",
+      });
+
+      modalEl()
+        ?.setStyle({
+          opacity: "0",
+          marginTop: "1rem",
+        })
+        .animate({
+          opacity: [0, 1],
+          marginTop: ["1rem", "0"],
+          duration: modalAnimDuration,
+          onComplete: () => {
+            focusFirstInput();
+            void handleAfterShow();
+          },
+        });
+    }
+  }
+
+  async function hideModal(): Promise<void> {
+    // Guard: only hide if visible and not already animating
+    if (dialogEl() === undefined || modalEl() === undefined) return;
+
+    await props.beforeHide?.();
+
+    const hasChain = modalChain && modalChain.getChainLength() > 0;
+
+    const modalAnimDuration = applyReducedMotion(
+      (props.customAnimations?.hide?.modal?.duration ??
+        DEFAULT_ANIMATION_DURATION) *
+        (hasChain ? MODAL_ONLY_ANIMATION_MULTIPLIER : 1),
+    );
+
+    const animMode = hasChain ? "modalOnly" : (props.animationMode ?? "both");
+
+    if (animMode === "both" || animMode === "none") {
+      const wrapperDuration = applyReducedMotion(
+        props.customAnimations?.hide?.wrapper?.duration ??
+          DEFAULT_ANIMATION_DURATION,
+      );
+
+      // Modal animation
+      if (animMode !== "none") {
+        modalEl()?.animate({
+          opacity: [1, 0],
+          marginTop: ["0", "1rem"],
+          duration: modalAnimDuration,
+        });
+
+        dialogEl()?.animate({
+          opacity: [1, 0],
+          duration: wrapperDuration,
+          onComplete: async () => {
+            dialogEl()?.native.close();
+            dialogEl()?.addClass("hidden");
+            await handleAfterHide();
+          },
+        });
+      } else {
+        dialogEl()?.native.close();
+        dialogEl()?.addClass("hidden");
+        await handleAfterHide();
+      }
+    } else if (animMode === "modalOnly") {
+      modalEl()?.animate({
+        opacity: [1, 0],
+        marginTop: ["0", "1rem"],
+        duration: modalAnimDuration,
+        onComplete: async () => {
+          dialogEl()?.native.close();
+          dialogEl()?.addClass("hidden");
+          await handleAfterHide();
+        },
+      });
+    }
+  }
+
+  async function handleAfterHide(): Promise<void> {
+    await props.afterHide?.();
+
+    // Clear chain if requested
+    if (props.clearChainOnClose && modalChain) {
+      modalChain.clearChain();
+    }
+
+    // Show previous modal in chain
+    const shouldShowPrevious = modalChain && modalChain.getChainLength() > 0;
+    if (shouldShowPrevious) {
+      const previous = modalChain.popModal();
+      if (previous && previous.id !== props.id) {
+        await previous.show();
+        return; // Don't call onClose when chaining
+      }
+    }
+
+    props.onClose();
+  }
+
+  async function handleAfterShow(): Promise<void> {
+    await props.afterShow?.();
+  }
+
+  function focusFirstInput(): void {
+    if (modalEl() === undefined || dialogEl() === undefined) return;
+    if (props.focusFirstInput === undefined) return;
+
+    const input = modalEl()?.qs<HTMLInputElement>("input:not(.hidden)");
+    if (input) {
+      if (props.focusFirstInput === true) {
+        input.focus();
+      } else if (props.focusFirstInput === "focusAndSelect") {
+        input.focus();
+        input.select();
+      }
+    }
+  }
+
+  const handleKeyDown = (e: KeyboardEvent): void => {
+    if (e.key === "Escape" && props.isOpen) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (props.onEscape) {
+        props.onEscape(e);
+      } else {
+        void hideModal();
+      }
+    }
+  };
+
+  const handleBackdropClick = (e: MouseEvent): void => {
+    if (e.target === dialogEl()?.native) {
+      if (props.onBackdropClick) {
+        props.onBackdropClick(e);
+      } else {
+        void hideModal();
+      }
+    }
+  };
+
+  onCleanup(() => {
+    if (dialogEl()?.native.open) {
+      dialogEl()?.native.close();
+    }
+    // Remove from chain to prevent stale references
+    if (modalChain) {
+      modalChain.popModal();
+    }
+  });
+
+  return (
+    <dialog
+      id={props.id}
+      ref={dialogRef}
+      class={`modalWrapper hidden ${props.class ?? ""}`}
+      onKeyDown={handleKeyDown}
+      onMouseDown={handleBackdropClick}
+    >
+      <div class="modal" ref={modalRef}>
+        {props.children}
+      </div>
+    </dialog>
+  );
+}
diff --git a/frontend/src/ts/components/AsyncContent.tsx b/frontend/src/ts/components/AsyncContent.tsx
new file mode 100644
index 000000000000..f1b0b0801501
--- /dev/null
+++ b/frontend/src/ts/components/AsyncContent.tsx
@@ -0,0 +1,28 @@
+import { ErrorBoundary, JSXElement, Resource, Suspense } from "solid-js";
+import { createErrorMessage } from "../utils/misc";
+
+export default function AsyncContent<T>(props: {
+  resource: Resource<T>;
+  errorMessage?: string;
+  children: (data: T) => JSXElement;
+}): JSXElement {
+  return (
+    <ErrorBoundary
+      fallback={(err) => (
+        <div class="error">
+          {createErrorMessage(err, props.errorMessage ?? "An error occurred")}
+        </div>
+      )}
+    >
+      <Suspense
+        fallback={
+          <div class="preloader">
+            <i class="fas fa-fw fa-spin fa-circle-notch"></i>
+          </div>
+        }
+      >
+        {props.children(props.resource() as T)}
+      </Suspense>
+    </ErrorBoundary>
+  );
+}
diff --git a/frontend/src/ts/components/ModalChainContext.tsx b/frontend/src/ts/components/ModalChainContext.tsx
new file mode 100644
index 000000000000..0b8dc24e0fe9
--- /dev/null
+++ b/frontend/src/ts/components/ModalChainContext.tsx
@@ -0,0 +1,72 @@
+import {
+  createContext,
+  useContext,
+  ParentProps,
+  createSignal,
+  JSXElement,
+} from "solid-js";
+
+type ModalChainItem = {
+  id: string;
+  show: () => void | Promise<void>;
+  hide: () => void | Promise<void>;
+  showOptions?: Record<string, unknown>;
+};
+
+type ModalChainContextValue = {
+  pushModal: (item: ModalChainItem) => void;
+  popModal: () => ModalChainItem | undefined;
+  getPreviousModal: () => ModalChainItem | undefined;
+  clearChain: () => void;
+  getChainLength: () => number;
+};
+
+const ModalChainContext = createContext<ModalChainContextValue>();
+
+export function ModalChainProvider(props: ParentProps): JSXElement {
+  const [chain, setChain] = createSignal<ModalChainItem[]>([]);
+
+  const pushModal = (item: ModalChainItem): void => {
+    setChain((prev) => [...prev, item]);
+  };
+
+  const popModal = (): ModalChainItem | undefined => {
+    const current = chain();
+    if (current.length === 0) return undefined;
+
+    const popped = current[current.length - 1];
+    setChain(current.slice(0, -1));
+    return popped;
+  };
+
+  const getPreviousModal = (): ModalChainItem | undefined => {
+    const current = chain();
+    return current.length > 0 ? current[current.length - 1] : undefined;
+  };
+
+  const clearChain = (): void => {
+    setChain([]);
+  };
+
+  const getChainLength = (): number => {
+    return chain().length;
+  };
+
+  return (
+    <ModalChainContext.Provider
+      value={{
+        pushModal,
+        popModal,
+        getPreviousModal,
+        clearChain,
+        getChainLength,
+      }}
+    >
+      {props.children}
+    </ModalChainContext.Provider>
+  );
+}
+
+export function useModalChain(): ModalChainContextValue | undefined {
+  return useContext(ModalChainContext);
+}
diff --git a/frontend/src/ts/components/VersionButton.tsx b/frontend/src/ts/components/VersionButton.tsx
new file mode 100644
index 000000000000..527707ce5a17
--- /dev/null
+++ b/frontend/src/ts/components/VersionButton.tsx
@@ -0,0 +1,59 @@
+import { JSXElement, Show, createSignal } from "solid-js";
+import { isDevEnvironment } from "../utils/misc";
+import { envConfig } from "virtual:env-config";
+import { COMPATIBILITY_CHECK } from "@monkeytype/contracts";
+import { lastSeenServerCompatibility } from "../ape/adapters/ts-rest-adapter";
+import { getVersion } from "../signals/core";
+import { showModal } from "../stores/modals";
+
+export function VersionButton(): JSXElement {
+  const [indicatorVisible, setIndicatorVisible] = createSignal(true);
+  const getVersionText = (): string => {
+    if (isDevEnvironment()) {
+      return "localhost";
+    }
+    return getVersion().text;
+  };
+
+  const handleClick = (e: MouseEvent): void => {
+    if (e.shiftKey) {
+      alert(
+        JSON.stringify(
+          {
+            clientVersion: envConfig.clientVersion,
+            clientCompatibility: COMPATIBILITY_CHECK,
+            lastSeenServerCompatibility,
+          },
+          null,
+          2,
+        ),
+      );
+    } else {
+      showModal("VersionHistory");
+      setIndicatorVisible(false);
+    }
+  };
+
+  const handleIndicatorClick = (e: MouseEvent): void => {
+    e.stopPropagation();
+    setIndicatorVisible(false);
+  };
+
+  return (
+    <button
+      type="button"
+      class="currentVersion textButton"
+      onClick={handleClick}
+    >
+      <i class="fas fa-fw fa-code-branch"></i>
+      <div class="text">{getVersionText()}</div>
+      <Show
+        when={!isDevEnvironment() && getVersion().isNew && indicatorVisible()}
+      >
+        <div id="newVersionIndicator" onClick={handleIndicatorClick}>
+          new
+        </div>
+      </Show>
+    </button>
+  );
+}
diff --git a/frontend/src/ts/components/VersionHistoryModal.scss b/frontend/src/ts/components/VersionHistoryModal.scss
new file mode 100644
index 000000000000..a13f38e95e7f
--- /dev/null
+++ b/frontend/src/ts/components/VersionHistoryModal.scss
@@ -0,0 +1,66 @@
+#VersionHistoryModal {
+  .modal {
+    overflow-y: scroll;
+    max-width: 1200px;
+
+    hr {
+      background: var(--sub-alt-color);
+      height: 0.25rem;
+      border: none;
+      border-radius: var(--roundness);
+      margin: 1rem 0;
+    }
+
+    h3 {
+      color: var(--sub-color);
+      font-size: 1.25rem;
+      margin: 0 0 0.5rem 0;
+    }
+
+    .preloader {
+      color: var(--main-color);
+      display: grid;
+      place-content: center center;
+      font-size: 2rem;
+    }
+
+    .tip {
+      text-align: center;
+      color: var(--sub-color);
+    }
+
+    .releases {
+      display: grid;
+      gap: 4rem;
+
+      .release {
+        display: grid;
+        grid-template-areas:
+          "title date"
+          "body body";
+
+        .title {
+          grid-area: title;
+          font-size: 2rem;
+          color: var(--sub-color);
+        }
+
+        .date {
+          grid-area: date;
+          text-align: right;
+          color: var(--sub-color);
+          align-self: center;
+        }
+
+        .body {
+          grid-area: body;
+          color: var(--text-color);
+        }
+
+        &:last-child {
+          margin-bottom: 2rem;
+        }
+      }
+    }
+  }
+}
diff --git a/frontend/src/ts/components/VersionHistoryModal.tsx b/frontend/src/ts/components/VersionHistoryModal.tsx
new file mode 100644
index 000000000000..5180ac5fb0c2
--- /dev/null
+++ b/frontend/src/ts/components/VersionHistoryModal.tsx
@@ -0,0 +1,80 @@
+import { JSXElement, createResource, For } from "solid-js";
+import { format } from "date-fns/format";
+import { getReleasesFromGitHub } from "../utils/json-data";
+import { AnimatedModal } from "./AnimatedModal";
+import "./VersionHistoryModal.scss";
+import AsyncContent from "./AsyncContent";
+import { hideModal, isModalOpen } from "../stores/modals";
+
+export function VersionHistoryModal(): JSXElement {
+  const isOpen = (): boolean => isModalOpen("VersionHistory");
+  const [releases] = createResource(isOpen, async (open) => {
+    if (!open) return null;
+    const releases = await getReleasesFromGitHub();
+    const data = [];
+    for (const release of releases) {
+      if (release.draft || release.prerelease) continue;
+
+      let body = release.body;
+
+      body = body.replace(/\r\n/g, "<br>");
+      //replace ### title with h3 title h3
+      body = body.replace(/### (.*?)<br>/g, "<h3>$1</h3>");
+      body = body.replace(/<\/h3><br>/gi, "</h3>");
+      //remove - at the start of a line
+      body = body.replace(/^- /gm, "");
+      //replace **bold** with bold
+      body = body.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
+      //replace links with a tags
+      body = body.replace(
+        /\[(.*?)\]\((.*?)\)/g,
+        '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>',
+      );
+
+      data.push({
+        name: release.name,
+        publishedAt: format(new Date(release.published_at), "dd MMM yyyy"),
+        bodyHTML: body,
+      });
+    }
+    return data;
+  });
+
+  return (
+    <AnimatedModal
+      id="VersionHistoryModal"
+      isOpen={isOpen()}
+      onClose={() => hideModal("VersionHistory")}
+    >
+      <AsyncContent
+        resource={releases}
+        errorMessage="Failed to load version history"
+      >
+        {(data) => (
+          <div class="releases">
+            <For each={data}>{(release) => <ReleaseItem {...release} />}</For>
+          </div>
+        )}
+      </AsyncContent>
+    </AnimatedModal>
+  );
+}
+
+function ReleaseItem(props: {
+  name: string;
+  publishedAt: string;
+  bodyHTML: string;
+}): JSXElement {
+  const setBodyHTML = (el: HTMLDivElement): void => {
+    el.innerHTML = props.bodyHTML;
+  };
+
+  return (
+    <div class="release">
+      <div class="title">{props.name}</div>
+      <div class="date">{props.publishedAt}</div>
+      {/* oxlint-disable-next-line solid/reactivity */}
+      <div class="body" ref={setBodyHTML}></div>
+    </div>
+  );
+}
diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index c1b707e8f567..99db0867b1e0 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -1,7 +1,22 @@
 import { render } from "solid-js/web";
-import { qsr } from "../utils/dom";
+import { qsa } from "../utils/dom";
 import { ScrollToTop } from "./ScrollToTop";
+import { VersionButton } from "./VersionButton";
+import { VersionHistoryModal } from "./VersionHistoryModal";
+import { JSXElement } from "solid-js";
+
+const components = [VersionButton, ScrollToTop, VersionHistoryModal];
+
+function mountToMountpoint(name: string, component: () => JSXElement): void {
+  for (const mountPoint of qsa(name)) {
+    render(() => component(), mountPoint.native);
+    mountPoint.native.replaceWith(...mountPoint.native.children);
+  }
+}
 
 export function mountComponents(): void {
-  render(() => <ScrollToTop />, qsr("body").native);
+  for (const component of components) {
+    const name = component.name.replace("[solid-refresh]", "");
+    mountToMountpoint(name, component);
+  }
 }
diff --git a/frontend/src/ts/elements/version-button.ts b/frontend/src/ts/elements/version-button.ts
deleted file mode 100644
index 752758ff56f7..000000000000
--- a/frontend/src/ts/elements/version-button.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { isDevEnvironment } from "../utils/misc";
-import * as Version from "../states/version";
-
-function setText(text: string): void {
-  $("footer .currentVersion .text").text(text);
-}
-
-function setIndicatorVisible(state: boolean): void {
-  if (state) {
-    $("#newVersionIndicator").removeClass("hidden");
-  } else {
-    $("#newVersionIndicator").addClass("hidden");
-  }
-}
-
-export async function update(): Promise<void> {
-  if (isDevEnvironment()) {
-    setText("localhost");
-    return;
-  }
-
-  const { version, isNew } = await Version.get();
-  setText(version);
-  setIndicatorVisible(isNew);
-}
diff --git a/frontend/src/ts/event-handlers/footer.ts b/frontend/src/ts/event-handlers/footer.ts
index 25e8e02856e9..ed36d4dd3224 100644
--- a/frontend/src/ts/event-handlers/footer.ts
+++ b/frontend/src/ts/event-handlers/footer.ts
@@ -5,10 +5,6 @@ import * as Notifications from "../elements/notifications";
 import * as Commandline from "../commandline/commandline";
 import * as SupportPopup from "../modals/support";
 import * as ContactModal from "../modals/contact";
-import * as VersionHistoryModal from "../modals/version-history";
-import { envConfig } from "virtual:env-config";
-import { COMPATIBILITY_CHECK } from "@monkeytype/contracts";
-import { lastSeenServerCompatibility } from "../ape/adapters/ts-rest-adapter";
 import { qs } from "../utils/dom";
 
 qs("footer #commandLineMobileButton")?.on("click", async () => {
@@ -17,30 +13,6 @@ qs("footer #commandLineMobileButton")?.on("click", async () => {
   });
 });
 
-qs("footer #newVersionIndicator")?.on("click", (e) => {
-  e.stopPropagation();
-  qs("#newVersionIndicator")?.hide();
-});
-
-qs("footer .currentVersion")?.on("click", (e) => {
-  const event = e as MouseEvent;
-  if (event.shiftKey) {
-    alert(
-      JSON.stringify(
-        {
-          clientVersion: envConfig.clientVersion,
-          clientCompatibility: COMPATIBILITY_CHECK,
-          lastSeenServerCompatibility,
-        },
-        null,
-        2,
-      ),
-    );
-  } else {
-    VersionHistoryModal.show();
-  }
-});
-
 qs("footer .right .current-theme")?.on("click", async (event) => {
   const e = event as MouseEvent;
   if (e.shiftKey) {
diff --git a/frontend/src/ts/event-handlers/global.ts b/frontend/src/ts/event-handlers/global.ts
index 3029b210645f..471c0aa00c4d 100644
--- a/frontend/src/ts/event-handlers/global.ts
+++ b/frontend/src/ts/event-handlers/global.ts
@@ -48,9 +48,9 @@ document.addEventListener("keydown", (e) => {
       e.shiftKey) ||
     (e.key.toLowerCase() === "p" && (e.metaKey || e.ctrlKey) && e.shiftKey)
   ) {
-    e.preventDefault();
     const popupVisible = Misc.isAnyPopupVisible();
     if (!popupVisible) {
+      e.preventDefault();
       Commandline.show();
     }
   }
diff --git a/frontend/src/ts/hooks/useLocalStorage.ts b/frontend/src/ts/hooks/useLocalStorage.ts
new file mode 100644
index 000000000000..439b0fb64a95
--- /dev/null
+++ b/frontend/src/ts/hooks/useLocalStorage.ts
@@ -0,0 +1,87 @@
+import { createSignal, createEffect, Accessor, Setter } from "solid-js";
+import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
+
+export type UseLocalStorageOptions<T> = {
+  key: LocalStorageWithSchema<T>["key"];
+  schema: LocalStorageWithSchema<T>["schema"];
+  fallback: LocalStorageWithSchema<T>["fallback"];
+  migrate?: LocalStorageWithSchema<T>["migrate"];
+  /**
+   * Whether to sync changes across tabs/windows using storage events.
+   * @default true
+   */
+  syncAcrossTabs?: boolean;
+};
+
+/**
+ * SolidJS hook for reactive localStorage with Zod schema validation.
+ * Wraps LocalStorageWithSchema in a reactive SolidJS signal.
+ *
+ * @example
+ * ```tsx
+ * const [value, setValue] = useLocalStorage({
+ *   key: "myKey",
+ *   schema: z.string(),
+ *   fallback: "default",
+ * });
+ *
+ * return <div onClick={() => setValue("new value")}>{value()}</div>;
+ * ```
+ */
+export function useLocalStorage<T>(
+  options: UseLocalStorageOptions<T>,
+): [Accessor<T>, Setter<T>] {
+  const { key, schema, fallback, migrate, syncAcrossTabs = true } = options;
+
+  // Create the underlying localStorage manager
+  const storage = new LocalStorageWithSchema({
+    key,
+    schema,
+    fallback,
+    migrate,
+  });
+
+  // Create signal with initial value from storage
+  const [value, setValueInternal] = createSignal<T>(storage.get());
+
+  // Custom setter that syncs to localStorage
+  const setValue = ((newValue: T | ((prev: T) => T)) => {
+    const resolvedValue =
+      typeof newValue === "function"
+        ? (newValue as (prev: T) => T)(value())
+        : newValue;
+
+    const success = storage.set(resolvedValue);
+    if (success) {
+      setValueInternal(() => resolvedValue);
+    }
+    return value();
+  }) as Setter<T>;
+
+  // Sync changes across tabs/windows
+  if (syncAcrossTabs) {
+    createEffect(() => {
+      const handleStorageChange = (e: StorageEvent): void => {
+        if (e.key === key && e.newValue !== null) {
+          console.debug(`LS ${key} Storage event detected from another tab`);
+          try {
+            const parsed = schema.parse(JSON.parse(e.newValue));
+            setValueInternal(() => parsed);
+          } catch (error) {
+            console.error(
+              `LS ${key} Failed to parse storage event value`,
+              error,
+            );
+          }
+        }
+      };
+
+      window.addEventListener("storage", handleStorageChange);
+      return () => {
+        window.removeEventListener("storage", handleStorageChange);
+      };
+    });
+  }
+
+  return [value, setValue];
+}
diff --git a/frontend/src/ts/hooks/useRefWithUtils.ts b/frontend/src/ts/hooks/useRefWithUtils.ts
new file mode 100644
index 000000000000..32fc5232764f
--- /dev/null
+++ b/frontend/src/ts/hooks/useRefWithUtils.ts
@@ -0,0 +1,17 @@
+import { Accessor } from "solid-js";
+import { ElementWithUtils } from "../utils/dom";
+
+export function useRefWithUtils<T extends HTMLElement>(): [
+  ref: (el: T) => void,
+  element: Accessor<ElementWithUtils<T> | undefined>,
+] {
+  let elementWithUtils: ElementWithUtils<T> | undefined;
+
+  const ref = (el: T): void => {
+    elementWithUtils = new ElementWithUtils(el);
+  };
+
+  const element = (): ElementWithUtils<T> | undefined => elementWithUtils;
+
+  return [ref, element];
+}
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index e4c7eb954f7e..ad91b4c394aa 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -37,8 +37,8 @@ import "./states/connection";
 import "./test/tts";
 import "./elements/fps-counter";
 import { isDevEnvironment, addToGlobal } from "./utils/misc";
-import * as VersionButton from "./elements/version-button";
 import * as Focus from "./test/focus";
+import { fetchLatestVersion } from "./utils/version";
 import { getDevOptionsModal } from "./utils/async-modules";
 import * as Sentry from "./sentry";
 import * as Cookies from "./cookies";
@@ -70,7 +70,7 @@ Object.defineProperty(window, "Math", {
 
 applyEngineSettings();
 void loadFromLocalStorage();
-void VersionButton.update();
+void fetchLatestVersion();
 Focus.set(true, true);
 void init(onAuthStateChanged);
 
diff --git a/frontend/src/ts/modals/version-history.ts b/frontend/src/ts/modals/version-history.ts
deleted file mode 100644
index bc569b0652ab..000000000000
--- a/frontend/src/ts/modals/version-history.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { format } from "date-fns/format";
-import { getReleasesFromGitHub } from "../utils/json-data";
-import AnimatedModal from "../utils/animated-modal";
-import { createErrorMessage } from "../utils/misc";
-
-export function show(): void {
-  void modal.show({
-    beforeAnimation: async () => {
-      $("#versionHistoryModal .modal").html(`
-    <div class="preloader">
-      <i class="fas fa-fw fa-spin fa-circle-notch"></i>
-    </div
-  `);
-      getReleasesFromGitHub()
-        .then((releases) => {
-          $("#versionHistoryModal .modal").html(`<div class="releases"></div`);
-          releases.forEach((release) => {
-            if (!release.draft && !release.prerelease) {
-              let body = release.body;
-
-              body = body.replace(/\r\n/g, "<br>");
-              //replace ### title with h3 title h3
-              body = body.replace(/### (.*?)<br>/g, "<h3>$1</h3>");
-              body = body.replace(/<\/h3><br>/gi, "</h3>");
-              //remove - at the start of a line
-              body = body.replace(/^- /gm, "");
-              //replace **bold** with bold
-              body = body.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
-              //replace links with a tags
-              body = body.replace(
-                /\[(.*?)\]\((.*?)\)/g,
-                '<a href="$2" target="_blank">$1</a>',
-              );
-
-              $("#versionHistoryModal .modal .releases").append(`
-        <div class="release">
-          <div class="title">${release.name}</div>
-          <div class="date">${format(
-            new Date(release.published_at),
-            "dd MMM yyyy",
-          )}</div>
-          <div class="body">${body}</div>
-        </div>
-      `);
-            }
-          });
-        })
-        .catch((e: unknown) => {
-          const msg = createErrorMessage(e, "Failed to fetch version history");
-          $("#versionHistoryModal .modal").html(
-            `<div class="releases">${msg}</div`,
-          );
-        });
-      $("#newVersionIndicator").addClass("hidden");
-    },
-  });
-}
-
-const modal = new AnimatedModal({
-  dialogId: "versionHistoryModal",
-});
diff --git a/frontend/src/ts/signals/core.ts b/frontend/src/ts/signals/core.ts
index e0951801b92e..4db91d9493c4 100644
--- a/frontend/src/ts/signals/core.ts
+++ b/frontend/src/ts/signals/core.ts
@@ -2,3 +2,10 @@ import { createSignal } from "solid-js";
 import { PageName } from "../pages/page";
 
 export const [getActivePage, setActivePage] = createSignal<PageName>("loading");
+export const [getVersion, setVersion] = createSignal<{
+  text: string;
+  isNew: boolean;
+}>({
+  text: "",
+  isNew: false,
+});
diff --git a/frontend/src/ts/states/version.ts b/frontend/src/ts/states/version.ts
deleted file mode 100644
index e512d600ad4b..000000000000
--- a/frontend/src/ts/states/version.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { z } from "zod";
-import { getLatestReleaseFromGitHub } from "../utils/json-data";
-import { LocalStorageWithSchema } from "../utils/local-storage-with-schema";
-import { tryCatch } from "@monkeytype/util/trycatch";
-import { createErrorMessage } from "../utils/misc";
-
-const memoryLS = new LocalStorageWithSchema({
-  key: "lastSeenVersion",
-  schema: z.string(),
-  fallback: "",
-});
-
-let version: null | string = null;
-let isVersionNew: null | boolean = null;
-
-function setMemory(v: string): void {
-  memoryLS.set(v);
-}
-
-function getMemory(): string {
-  return memoryLS.get();
-}
-
-async function check(): Promise<void> {
-  const { data: currentVersion, error } = await tryCatch(
-    getLatestReleaseFromGitHub(),
-  );
-
-  if (error) {
-    const msg = createErrorMessage(
-      error,
-      "Failed to fetch version number from GitHub",
-    );
-    console.error(msg);
-    return;
-  }
-
-  const memoryVersion = getMemory();
-
-  version = currentVersion;
-  isVersionNew =
-    memoryVersion === "" ? false : memoryVersion !== currentVersion;
-
-  if (isVersionNew || memoryVersion === "") {
-    setMemory(currentVersion);
-    purgeCaches();
-  }
-}
-
-function purgeCaches(): void {
-  if (!("caches" in window)) return;
-  void caches.keys().then(function (names) {
-    for (const name of names) void caches.delete(name);
-  });
-}
-
-export async function get(): Promise<{
-  version: string;
-  isNew: boolean;
-}> {
-  if (version === null || isVersionNew === null) {
-    await check();
-  }
-  return {
-    version: version as string,
-    isNew: isVersionNew as boolean,
-  };
-}
diff --git a/frontend/src/ts/stores/modals.ts b/frontend/src/ts/stores/modals.ts
new file mode 100644
index 000000000000..1797c9820888
--- /dev/null
+++ b/frontend/src/ts/stores/modals.ts
@@ -0,0 +1,19 @@
+import { createStore } from "solid-js/store";
+
+type ModalId = "VersionHistory";
+
+const [openModals, setOpenModals] = createStore<
+  Partial<Record<ModalId, boolean>>
+>({});
+
+export function showModal(id: ModalId): void {
+  setOpenModals(id, true);
+}
+
+export function hideModal(id: ModalId): void {
+  setOpenModals(id, false);
+}
+
+export function isModalOpen(id: ModalId): boolean {
+  return !!openModals[id];
+}
diff --git a/frontend/src/ts/utils/version.ts b/frontend/src/ts/utils/version.ts
new file mode 100644
index 000000000000..6f2a7db84d5b
--- /dev/null
+++ b/frontend/src/ts/utils/version.ts
@@ -0,0 +1,47 @@
+import { z } from "zod";
+import { getLatestReleaseFromGitHub } from "./json-data";
+import { LocalStorageWithSchema } from "./local-storage-with-schema";
+import { tryCatch } from "@monkeytype/util/trycatch";
+import { createErrorMessage } from "./misc";
+import { setVersion } from "../signals/core";
+
+const memoryLS = new LocalStorageWithSchema({
+  key: "lastSeenVersion",
+  schema: z.string(),
+  fallback: "",
+});
+
+function purgeCaches(): void {
+  if (!("caches" in window)) return;
+  void caches.keys().then(function (names) {
+    for (const name of names) void caches.delete(name);
+  });
+}
+
+export async function fetchLatestVersion(): Promise<void> {
+  const { data: currentVersion, error } = await tryCatch(
+    getLatestReleaseFromGitHub(),
+  );
+
+  if (error) {
+    const msg = createErrorMessage(
+      error,
+      "Failed to fetch version number from GitHub",
+    );
+    console.error(msg);
+    return;
+  }
+
+  const memoryVersion = memoryLS.get();
+  const isNew = memoryVersion === "" ? false : memoryVersion !== currentVersion;
+
+  setVersion({
+    text: currentVersion,
+    isNew: isNew,
+  });
+
+  if (isNew || memoryVersion === "") {
+    memoryLS.set(currentVersion);
+    purgeCaches();
+  }
+}
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index ac6a13452130..d2801ddf620f 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -45,6 +45,7 @@ export const projects: UserWorkspaceConfig[] = [
       setupFiles: [
         "__tests__/__harness__/setup-jquery.ts",
         "__tests__/__harness__/setup-jsx.ts",
+        "__tests__/__harness__/mock-dom.ts",
       ],
       globals: true,
     },

From 2829864ae8e8aff9da6888d5a839dc5b9222b2f7 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Sun, 11 Jan 2026 22:27:48 +0100
Subject: [PATCH 2/2] fix: component mounting not working in prod

---
 frontend/src/ts/components/mount.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ts/components/mount.tsx b/frontend/src/ts/components/mount.tsx
index 99db0867b1e0..69f50e5cd2f4 100644
--- a/frontend/src/ts/components/mount.tsx
+++ b/frontend/src/ts/components/mount.tsx
@@ -5,7 +5,11 @@ import { VersionButton } from "./VersionButton";
 import { VersionHistoryModal } from "./VersionHistoryModal";
 import { JSXElement } from "solid-js";
 
-const components = [VersionButton, ScrollToTop, VersionHistoryModal];
+const components: Record<string, () => JSXElement> = {
+  VersionButton: VersionButton,
+  ScrollToTop: ScrollToTop,
+  VersionHistoryModal: VersionHistoryModal,
+};
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {
   for (const mountPoint of qsa(name)) {
@@ -15,8 +19,7 @@ function mountToMountpoint(name: string, component: () => JSXElement): void {
 }
 
 export function mountComponents(): void {
-  for (const component of components) {
-    const name = component.name.replace("[solid-refresh]", "");
-    mountToMountpoint(name, component);
+  for (const [query, component] of Object.entries(components)) {
+    mountToMountpoint(query, component);
   }
 }