From 3ca07c6553502b8a153a3834316568550889158b Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Sat, 4 Jul 2026 10:47:13 +0200
Subject: [PATCH] refactor(modal): solid modal for save last signed out result
 (@fehmer) (#8183)

Co-authored-by: Miodec <jack@monkeytype.com>
---
 frontend/src/html/popups.html                 |  38 ----
 frontend/src/styles/popups.scss               |  39 ----
 .../modals/LastSignedOutResultModal.tsx       | 210 ++++++++++++++++++
 frontend/src/ts/components/modals/Modals.tsx  |   2 +
 frontend/src/ts/index.ts                      |   1 -
 .../src/ts/modals/last-signed-out-result.ts   | 147 ------------
 frontend/src/ts/states/modals.ts              |   3 +-
 frontend/src/ts/states/test.ts                |   3 +
 frontend/src/ts/test/test-logic.ts            |  56 +----
 9 files changed, 219 insertions(+), 280 deletions(-)
 create mode 100644 frontend/src/ts/components/modals/LastSignedOutResultModal.tsx
 delete mode 100644 frontend/src/ts/modals/last-signed-out-result.ts

diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index 736ca9f527b9..3ee31d09cc30 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -7,44 +7,6 @@
   </div>
 </dialog>
 
-<dialog id="lastSignedOutResult" class="modalWrapper hidden">
-  <div class="modal">
-    <div class="title">Last signed out result</div>
-    <div class="question">Would you like to save it?</div>
-    <div class="divider"></div>
-    <div class="result">
-      <div class="group wpm">
-        <div class="sub">wpm</div>
-        <div class="val">-</div>
-      </div>
-      <div class="group acc">
-        <div class="sub">accuracy</div>
-        <div class="val">-</div>
-      </div>
-      <div class="group raw">
-        <div class="sub">raw</div>
-        <div class="val">-</div>
-      </div>
-      <div class="group con">
-        <div class="sub">consistency</div>
-        <div class="val">-</div>
-      </div>
-      <div class="group chardata">
-        <div class="sub">characters</div>
-        <div class="val">-</div>
-      </div>
-      <div class="group testType">
-        <div class="sub">test type</div>
-        <div class="val">-</div>
-      </div>
-    </div>
-    <div class="buttons">
-      <button class="save">save</button>
-      <button class="discard">discard</button>
-    </div>
-  </div>
-</dialog>
-
 <div id="videoAdPopupWrapper" class="popupWrapper hidden">
   <div id="videoAdPopup">
     <div class="preloader">
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index bb232ae714d3..b205e273e190 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -162,45 +162,6 @@ body.darkMode {
   }
 }
 
-#lastSignedOutResult {
-  .modal {
-    max-width: 600px;
-
-    .buttons {
-      display: flex;
-      flex-direction: row-reverse;
-      gap: 0.5rem;
-      button {
-        flex-grow: 1;
-      }
-    }
-    .result {
-      display: grid;
-      gap: 0.5rem;
-      grid-template-columns: 1fr 1fr;
-    }
-    .divider {
-      background: var(--sub-alt-color);
-      width: 100%;
-      height: 0.25rem;
-      border-radius: var(--roundness);
-    }
-    .group {
-      .sub {
-        font-size: 0.75em;
-        color: var(--sub-color);
-      }
-      &.testType {
-        grid-column: 1;
-      }
-      &.wpm,
-      &.acc {
-        font-size: 2em;
-      }
-    }
-  }
-}
-
 #videoAdPopupWrapper {
   display: flex;
   padding: 2rem;
diff --git a/frontend/src/ts/components/modals/LastSignedOutResultModal.tsx b/frontend/src/ts/components/modals/LastSignedOutResultModal.tsx
new file mode 100644
index 000000000000..3e6ac4d11e1e
--- /dev/null
+++ b/frontend/src/ts/components/modals/LastSignedOutResultModal.tsx
@@ -0,0 +1,210 @@
+import { CompletedEvent } from "@monkeytype/schemas/results";
+import { Mode } from "@monkeytype/schemas/shared";
+import objectHash from "object-hash";
+import { createMemo, JSX } from "solid-js";
+
+import Ape from "../../ape";
+import { getConfig } from "../../config/store";
+import { SnapshotResult } from "../../constants/default-snapshot";
+import { saveLocalResult, SaveLocalResultData } from "../../db";
+import { authEvent } from "../../events/auth";
+import { getAuthenticatedUser } from "../../firebase";
+import { hideModal, showModal } from "../../states/modals";
+import {
+  showErrorNotification,
+  showNoticeNotification,
+  showSuccessNotification,
+} from "../../states/notifications";
+import {
+  getLastSignedOutResult,
+  setLastSignedOutResult,
+} from "../../states/test";
+import { cn } from "../../utils/cn";
+import { Formatting } from "../../utils/format";
+import { AnimatedModal } from "../common/AnimatedModal";
+import { Button } from "../common/Button";
+import { Separator } from "../common/Separator";
+
+const modalId = "LastSignedOutResult";
+
+export function LastSignedOutResultModal() {
+  const format = createMemo(
+    () =>
+      new Formatting({
+        alwaysShowDecimalPlaces: getConfig.alwaysShowDecimalPlaces,
+        typingSpeedUnit: getConfig.typingSpeedUnit,
+      }),
+  );
+
+  const handleDiscard = () => {
+    showNoticeNotification("Last test result discarded");
+    hideModal(modalId);
+    setTimeout(() => {
+      setLastSignedOutResult(null);
+    }, 125);
+  };
+
+  const handleSave = () => {
+    void syncLastSignedOutResult();
+  };
+
+  return (
+    <AnimatedModal
+      id={modalId}
+      title="Last signed out result"
+      modalClass="max-w-2xl"
+    >
+      <p class="">Would you like to save it?</p>
+      <Separator />
+
+      <div class="grid grid-cols-2 gap-2">
+        <Value
+          class="text-2xl"
+          label={format().typingSpeedUnit}
+          value={format().typingSpeed(getLastSignedOutResult()?.wpm ?? 0)}
+        />
+        <Value
+          class="text-2xl"
+          label="accuracy"
+          value={format().accuracy(getLastSignedOutResult()?.acc ?? 0)}
+        />
+        <Value
+          label="raw"
+          value={format().typingSpeed(getLastSignedOutResult()?.rawWpm ?? 0)}
+        />
+        <Value
+          label="consistency"
+          value={format().percentage(
+            getLastSignedOutResult()?.consistency ?? 0,
+          )}
+        />
+        <Value
+          class="col-span-2"
+          label="characters"
+          value={getLastSignedOutResult()?.charStats.join("/") ?? "-"}
+        />
+        <Value
+          label="test type"
+          class="col-span-2"
+          value={formatTestType(getLastSignedOutResult())}
+        />
+      </div>
+      {/*
+      need two sets of buttons here because on wide screens tab focuses save first
+      but on small screens tab focuses discard first
+      */}
+      <div class="grid grid-cols-1 gap-2 sm:hidden">
+        <Button text="save" onClick={handleSave} />
+        <Button text="discard" onClick={handleDiscard} />
+      </div>
+      <div class="hidden grid-cols-2 gap-2 sm:grid">
+        <Button text="discard" onClick={handleDiscard} />
+        <Button text="save" onClick={handleSave} />
+      </div>
+    </AnimatedModal>
+  );
+}
+
+function Value(props: {
+  label: string;
+  value: string | (string | JSX.Element)[];
+  class?: string;
+}) {
+  return (
+    <div class={cn("flex flex-col text-sm", props.class)}>
+      <span class="text-em-xs text-sub">{props.label}</span>
+      <span>{props.value}</span>
+    </div>
+  );
+}
+
+function formatTestType(r: CompletedEvent | null): (string | JSX.Element)[] {
+  if (r === null) return ["-"];
+  const tt: (string | JSX.Element)[] = [`${r.mode} ${r.mode2}`];
+
+  tt.push(<br />, `${r.language}`);
+
+  if (r.numbers) tt.push(<br />, "numbers");
+  if (r.punctuation) tt.push(<br />, "punctuation");
+  if (r.blindMode) tt.push(<br />, "blind");
+  if (r.lazyMode) tt.push(<br />, "lazy");
+  if (r.funbox.length > 0) {
+    const funboxLabel = r.funbox.map((it) => it.replace(/_/g, " ")).join(",");
+    tt.push(<br />, funboxLabel);
+  }
+  if (r.difficulty !== "normal") tt.push(<br />, `${r.difficulty}`);
+  if (r.tags.length > 0) tt.push(<br />, `${r.tags.length} tags`);
+  return tt;
+}
+
+async function syncLastSignedOutResult(): Promise<void> {
+  const user = getAuthenticatedUser();
+  const lastResult = getLastSignedOutResult();
+  if (user === null) {
+    showNoticeNotification(
+      "Failed to save last test result: user not authenticated",
+    );
+    hideModal(modalId);
+    return;
+  }
+  if (lastResult === null) {
+    showNoticeNotification("Failed to save last test result: no last result");
+    hideModal(modalId);
+    return;
+  }
+
+  const updatedResult = updateUidAndHash(user.uid, lastResult);
+  const response = await Ape.results.add({ body: { result: updatedResult } });
+
+  if (response.status !== 200) {
+    showErrorNotification(`Failed to save last result`, {
+      response,
+    });
+    hideModal(modalId);
+    return;
+  }
+
+  //TODO - this type cast was not needed before because we were using JSON cloning
+  // but now with the stronger types it shows that we are forcing completed event
+  // into a snapshot result - might not cause issues but worth investigating
+  const result = structuredClone(
+    updatedResult,
+  ) as unknown as SnapshotResult<Mode>;
+
+  const dataToSave: SaveLocalResultData = {
+    xp: response.body.data.xp,
+    streak: response.body.data.streak,
+    result,
+    isPb: response.body.data.isPb,
+  };
+
+  result._id = response.body.data.insertedId;
+  if (response.body.data.isPb) {
+    result.isPb = true;
+  }
+  saveLocalResult(dataToSave);
+  setLastSignedOutResult(null);
+  showSuccessNotification(
+    `Last test result saved ${response.body.data.isPb ? `(new pb!)` : ""}`,
+  );
+  hideModal(modalId);
+}
+
+export function updateUidAndHash(
+  uid: string,
+  notSignedInLastResult: CompletedEvent,
+): CompletedEvent {
+  notSignedInLastResult.uid = uid;
+  //@ts-expect-error really need to delete this
+  delete notSignedInLastResult.hash;
+  notSignedInLastResult.hash = objectHash(notSignedInLastResult);
+  return notSignedInLastResult;
+}
+
+authEvent.subscribe((event) => {
+  if (event.type === "snapshotUpdated" && event.data.isInitial) {
+    if (getLastSignedOutResult() !== null) {
+      showModal(modalId);
+    }
+  }
+});
diff --git a/frontend/src/ts/components/modals/Modals.tsx b/frontend/src/ts/components/modals/Modals.tsx
index b0c3b9728b15..632e0cc13172 100644
--- a/frontend/src/ts/components/modals/Modals.tsx
+++ b/frontend/src/ts/components/modals/Modals.tsx
@@ -6,6 +6,7 @@ import { CookiesModal } from "./CookiesModal";
 import { CustomTestDurationModal } from "./CustomTestDurationModal";
 import { CustomTextModal } from "./CustomTextModal";
 import { CustomWordAmountModal } from "./CustomWordAmountModal";
+import { LastSignedOutResultModal } from "./LastSignedOutResultModal";
 import { MobileTestConfigModal } from "./MobileTestConfigModal";
 import { AddPresetModal } from "./preset/AddPresetModal";
 import { EditPresetModal } from "./preset/EditPresetModal";
@@ -38,6 +39,7 @@ export function Modals(): JSXElement {
       <AddPresetModal />
       <EditPresetModal />
       <ViewApeKeyModal />
+      <LastSignedOutResultModal />
     </>
   );
 }
diff --git a/frontend/src/ts/index.ts b/frontend/src/ts/index.ts
index e4113a24b959..23dd6084492f 100644
--- a/frontend/src/ts/index.ts
+++ b/frontend/src/ts/index.ts
@@ -33,7 +33,6 @@ import * as Sentry from "./sentry";
 import * as Cookies from "./cookies";
 import "./elements/psa";
 import "./controllers/url-handler";
-import "./modals/last-signed-out-result";
 import { applyEngineSettings } from "./anim";
 import { qs, qsa, qsr } from "./utils/dom";
 import { mountComponents } from "./components/mount";
diff --git a/frontend/src/ts/modals/last-signed-out-result.ts b/frontend/src/ts/modals/last-signed-out-result.ts
deleted file mode 100644
index dea4be2a0b83..000000000000
--- a/frontend/src/ts/modals/last-signed-out-result.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-import AnimatedModal from "../utils/animated-modal";
-
-import * as TestLogic from "../test/test-logic";
-import {
-  showNoticeNotification,
-  showErrorNotification,
-} from "../states/notifications";
-import { CompletedEvent } from "@monkeytype/schemas/results";
-import { getAuthenticatedUser } from "../firebase";
-import { authEvent } from "../events/auth";
-
-function reset(): void {
-  modal.getModal().qs(".result")?.setHtml(`
-  <div class="group wpm">
-        <div class="sub">wpm</div>
-        <div class="val">-</div>
-      </div>
-      <div class="group acc">
-        <div class="sub">accuracy</div>
-        <div class="val">-</div>
-      </div>
-      <div class="group raw">
-        <div class="sub">raw</div>
-        <div class="val">-</div>
-      </div>
-      <div class="group con">
-        <div class="sub">consistency</div>
-        <div class="val">-</div>
-      </div>
-      <div class="group chardata">
-        <div class="sub">characters</div>
-        <div class="val">-</div>
-      </div>
-      <div class="group testType">
-        <div class="sub">test type</div>
-        <div class="val">-</div>
-      </div>`);
-}
-
-function fillData(): void {
-  //safe because we check if it exists before showing the modal
-  const r = TestLogic.notSignedInLastResult as CompletedEvent;
-
-  // const r: CompletedEvent = {
-  //   wpm: 100,
-  //   acc: 100,
-  //   rawWpm: 100,
-  //   consistency: 100,
-  //   mode: "time",
-  //   mode2: "60",
-  //   numbers: true,
-  //   punctuation: true,
-  //   difficulty: "master",
-  //   language: "english",
-  //   blindMode: true,
-  //   lazyMode: true,
-  //   funbox: "read_ahead",
-  //   tags: ["asdf", "sdfsdf"],
-  //   charStats: [10, 10, 10, 10],
-  // };
-
-  fillGroup("wpm", r.wpm);
-  fillGroup("acc", `${r.acc}%`);
-  fillGroup("raw", r.rawWpm);
-  fillGroup("con", `${r.consistency}%`);
-  fillGroup("chardata", r.charStats.join("/"));
-
-  let tt = `${r.mode} ${r.mode2}`;
-
-  tt += `<br>${r.language}`;
-
-  if (r.numbers) tt += "<br>numbers";
-  if (r.punctuation) tt += "<br>punctuation";
-  if (r.blindMode) tt += "<br>blind";
-  if (r.lazyMode) tt += "<br>lazy";
-  if (r.funbox.length > 0) {
-    tt += `<br>${r.funbox.map((it) => it.replace(/_/g, " ")).join(",")}`;
-  }
-  if (r.difficulty !== "normal") tt += `<br>${r.difficulty}`;
-  if (r.tags.length > 0) tt += `<br>${r.tags.length} tags`;
-
-  fillGroup("testType", tt, true);
-}
-
-function fillGroup(
-  groupClass: string,
-  text: string | number,
-  html = false,
-): void {
-  const el = modal.getModal().qs(`.group.${groupClass} .val`);
-  if (!el) return;
-
-  if (html) {
-    el.setHtml(`${text}`);
-  } else {
-    el.setText(`${text}`);
-  }
-}
-
-export function show(): void {
-  if (!TestLogic.notSignedInLastResult) {
-    showErrorNotification(
-      "Failed to show last signed out result modal: no last result",
-    );
-    return;
-  }
-
-  void modal.show({
-    beforeAnimation: async (): Promise<void> => {
-      reset();
-      fillData();
-    },
-  });
-}
-
-function hide(): void {
-  void modal.hide();
-}
-
-authEvent.subscribe((event) => {
-  if (event.type === "snapshotUpdated" && event.data.isInitial) {
-    if (TestLogic.notSignedInLastResult !== null) {
-      show();
-    }
-  }
-});
-
-const modal = new AnimatedModal({
-  dialogId: "lastSignedOutResult",
-  setup: async (modalEl): Promise<void> => {
-    modalEl.qs("button.save")?.on("click", async () => {
-      const user = getAuthenticatedUser();
-      if (user !== null) {
-        void TestLogic.syncNotSignedInLastResult(user.uid);
-      }
-      hide();
-    });
-    modalEl.qs("button.discard")?.on("click", () => {
-      TestLogic.clearNotSignedInResult();
-      showNoticeNotification("Last test result discarded");
-      hide();
-    });
-  },
-  customWrapperClickHandler: (): void => {
-    //do nothing
-  },
-});
diff --git a/frontend/src/ts/states/modals.ts b/frontend/src/ts/states/modals.ts
index ad559f52f514..0cb81f089530 100644
--- a/frontend/src/ts/states/modals.ts
+++ b/frontend/src/ts/states/modals.ts
@@ -30,7 +30,8 @@ export type ModalId =
   | "AddPresetModal"
   | "EditPresetModal"
   | "EditProfile"
-  | "ViewApeKey";
+  | "ViewApeKey"
+  | "LastSignedOutResult";
 
 export type ModalVisibility = {
   visible: boolean;
diff --git a/frontend/src/ts/states/test.ts b/frontend/src/ts/states/test.ts
index 9654775e29f0..68cc8cafcd1a 100644
--- a/frontend/src/ts/states/test.ts
+++ b/frontend/src/ts/states/test.ts
@@ -42,6 +42,9 @@ export const [getPaceCaretWpm, setPaceCaretWpm] = createSignal<
 export const [getCurrentQuote, setCurrentQuote] =
   createSignal<QuoteWithTextSplit | null>(null);
 
+export const [getLastSignedOutResult, setLastSignedOutResult] =
+  createSignal<CompletedEvent | null>(null);
+
 createEffect(() => {
   getActivePage(); // depend on active page
   setIsLongTest(
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 4876d02826f2..23336fb12efd 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -42,6 +42,7 @@ import {
   setIsRepeated,
   setIsTestInvalid,
   setLastResult,
+  setLastSignedOutResult,
   setResultVisible,
   setWordsHaveNewline,
   setWordsHaveTab,
@@ -123,59 +124,6 @@ import { nthElementFromArray } from "../utils/arrays";
 
 let failReason = "";
 
-export async function syncNotSignedInLastResult(uid: string): Promise<void> {
-  if (notSignedInLastResult === null) return;
-  setNotSignedInUidAndHash(uid);
-
-  const response = await Ape.results.add({
-    body: { result: notSignedInLastResult },
-  });
-  if (response.status !== 200) {
-    showErrorNotification(`Failed to save last result`, {
-      response,
-    });
-    return;
-  }
-
-  //TODO - this type cast was not needed before because we were using JSON cloning
-  // but now with the stronger types it shows that we are forcing completed event
-  // into a snapshot result - might not cause issues but worth investigating
-  const result = structuredClone(
-    notSignedInLastResult,
-  ) as unknown as SnapshotResult<Mode>;
-
-  const dataToSave: DB.SaveLocalResultData = {
-    xp: response.body.data.xp,
-    streak: response.body.data.streak,
-    result,
-    isPb: response.body.data.isPb,
-  };
-
-  result._id = response.body.data.insertedId;
-  if (response.body.data.isPb) {
-    result.isPb = true;
-  }
-  DB.saveLocalResult(dataToSave);
-  clearNotSignedInResult();
-  showSuccessNotification(
-    `Last test result saved ${response.body.data.isPb ? `(new pb!)` : ""}`,
-  );
-}
-
-export let notSignedInLastResult: CompletedEvent | null = null;
-
-export function clearNotSignedInResult(): void {
-  notSignedInLastResult = null;
-}
-
-export function setNotSignedInUidAndHash(uid: string): void {
-  if (notSignedInLastResult === null) return;
-  notSignedInLastResult.uid = uid;
-  //@ts-expect-error really need to delete this
-  delete notSignedInLastResult.hash;
-  notSignedInLastResult.hash = objectHash(notSignedInLastResult);
-}
-
 export function startTest(now: number): boolean {
   if (PageTransition.get()) {
     return false;
@@ -1140,7 +1088,7 @@ export async function finish(difficultyFailed = false): Promise<void> {
     void AnalyticsController.log("testCompletedNoLogin");
     if (!dontSave) {
       // if its valid save it for later
-      notSignedInLastResult = completedEvent;
+      setLastSignedOutResult(completedEvent);
     }
     dontSave = true;
   }