From df809aa1cd18d5b2f3a00d462a24930157e60ba9 Mon Sep 17 00:00:00 2001
From: Rajparikh18 <163747817+Rajparikh18@users.noreply.github.com>
Date: Thu, 9 Jul 2026 15:43:32 +0530
Subject: [PATCH 1/2] fix(settings): prevent fps input from resetting
 (@Rajparikh18) (#8130)

### Description
 Fixes: #8119

Problem

The FPS input was resetting, even after giving input to it and saving
it, once the page is refreshed it shows empty field there again.

Cause

The FPS input always shows empty field , just because the by default
value of the fpsLimit is an empty string ( "")

Fix

Updated the FPS input handling by adding String(getfpsLimit()) this
instead of "" so that valid user-entered values are preserved instead of
being reset. The input now correctly reflects the saved FPS value after
interacting with the field.

`
defaultValues: {
      fpsLimit: String(getfpsLimit()),
    },
`

Testing
Open Settings and search for "animation fps limit".
Enter a custom FPS value.
Click away from the input.
Once it is saved,
Refresh the page and verify that the saved value is still displayed
correctly.


EDIT: addressed the issue , added a conditional statement, so that the
input will not show 1000 and added a if statement to remove the "must be
a number" error when selected native

---------

Co-authored-by: Christian Fehmer <fehmer@users.noreply.github.com>
---
 .../pages/settings/custom-setting/AnimationFpsLimit.tsx      | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx b/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx
index 9ff96a46f325..f610f7d50792 100644
--- a/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx
+++ b/frontend/src/ts/components/pages/settings/custom-setting/AnimationFpsLimit.tsx
@@ -13,7 +13,7 @@ export function AnimationFpsLimit(): JSXElement {
   const savedIndicator = useSavedIndicator();
   const form = createForm(() => ({
     defaultValues: {
-      fpsLimit: "",
+      fpsLimit: getfpsLimit() === 1000 ? "" : String(getfpsLimit()),
     },
     onSubmit: ({ value }) => {
       const val = parseFloat(String(value.fpsLimit));
@@ -54,6 +54,9 @@ export function AnimationFpsLimit(): JSXElement {
               name="fpsLimit"
               validators={{
                 onChange: ({ value }) => {
+                  if (value === "") {
+                    return;
+                  }
                   const val = parseFloat(String(value));
                   if (isNaN(val)) {
                     return "Must be a number";

From caf2aa2e9f1015a7f0121fb968ec46c43ff50425 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Thu, 9 Jul 2026 12:35:14 +0200
Subject: [PATCH 2/2] refactor: solid edit result tags modal (@fehmer) (#8194)

---
 frontend/src/html/popups.html                 |   8 -
 frontend/src/styles/popups.scss               |  11 --
 .../components/modals/EditResultTagsModal.tsx |  99 ++++++++++++
 frontend/src/ts/components/modals/Modals.tsx  |   2 +
 .../src/ts/components/pages/account/Table.tsx |  12 +-
 frontend/src/ts/event-handlers/test.ts        |   4 +-
 frontend/src/ts/modals/edit-result-tags.ts    | 149 ------------------
 frontend/src/ts/states/edit-result-tags.ts    |  23 +++
 frontend/src/ts/states/modals.ts              |   3 +-
 9 files changed, 134 insertions(+), 177 deletions(-)
 create mode 100644 frontend/src/ts/components/modals/EditResultTagsModal.tsx
 delete mode 100644 frontend/src/ts/modals/edit-result-tags.ts
 create mode 100644 frontend/src/ts/states/edit-result-tags.ts

diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index 2a8f560ac554..c09badc2912d 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -75,14 +75,6 @@
   </div>
 </dialog>
 
-<dialog id="editResultTagsModal" class="modalWrapper hidden">
-  <div class="modal">
-    <div class="title">Edit result tags</div>
-    <div class="buttons"></div>
-    <button class="saveButton">save</button>
-  </div>
-</dialog>
-
 <dialog id="commandLine" class="modalWrapper hidden">
   <div class="modal">
     <div
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index 39443219b03c..2bfa88967779 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -204,14 +204,3 @@ body.darkMode {
     }
   }
 }
-
-#editResultTagsModal {
-  .modal {
-    max-width: 600px;
-    .buttons {
-      display: grid;
-      gap: 0.5rem;
-      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-    }
-  }
-}
diff --git a/frontend/src/ts/components/modals/EditResultTagsModal.tsx b/frontend/src/ts/components/modals/EditResultTagsModal.tsx
new file mode 100644
index 000000000000..2146e173ea29
--- /dev/null
+++ b/frontend/src/ts/components/modals/EditResultTagsModal.tsx
@@ -0,0 +1,99 @@
+import { createEffect, createSignal, For } from "solid-js";
+
+import { updateTags } from "../../collections/results";
+import { useTagsLiveQuery } from "../../collections/tags";
+import { getSelectedResult } from "../../states/edit-result-tags";
+import { hideLoaderBar, showLoaderBar } from "../../states/loader-bar";
+import { hideModal } from "../../states/modals";
+import {
+  showErrorNotification,
+  showSuccessNotification,
+} from "../../states/notifications";
+import { updateTagsAfterEdit } from "../../test/result";
+import { areUnsortedArraysEqual } from "../../utils/arrays";
+import { createErrorMessage } from "../../utils/error";
+import { AnimatedModal } from "../common/AnimatedModal";
+import { Button } from "../common/Button";
+
+export function EditResultTagsModal() {
+  const [selectedTagIds, setSelectedTagIds] = createSignal<Set<string>>(
+    new Set([]),
+  );
+
+  const tags = useTagsLiveQuery();
+
+  createEffect(() => {
+    const resultTags = getSelectedResult()?.tags ?? [];
+    const knownTagIds = new Set(tags().map((tag) => tag._id));
+    const filtered = resultTags.filter((id) => knownTagIds.has(id));
+    setSelectedTagIds(new Set(filtered));
+  });
+
+  return (
+    <AnimatedModal
+      id="EditResultTags"
+      title="Edit result tags"
+      modalClass="max-w-xl"
+    >
+      <div class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-2">
+        <For each={tags()}>
+          {(tag) => (
+            <Button
+              text={tag.name}
+              class="w-full"
+              active={selectedTagIds().has(tag._id)}
+              onClick={() => {
+                const current = new Set(selectedTagIds());
+                if (current.has(tag._id)) {
+                  current.delete(tag._id);
+                } else {
+                  current.add(tag._id);
+                }
+                setSelectedTagIds(current);
+              }}
+            />
+          )}
+        </For>
+      </div>
+      <Button
+        class="w-full"
+        text="save"
+        onClick={() => {
+          const selected = getSelectedResult();
+          if (selected === null) return;
+          const currentTagIds = selected.tags ?? [];
+          const newTagIds = [...selectedTagIds()];
+
+          if (areUnsortedArraysEqual(currentTagIds, newTagIds)) {
+            hideModal("EditResultTags");
+            return;
+          }
+
+          showLoaderBar();
+
+          void updateTags({
+            resultId: selected._id,
+            currentTagIds,
+            newTagIds,
+            afterUpdate: ({ tagPbs }) => {
+              if (selected.source === "resultPage") {
+                updateTagsAfterEdit(newTagIds, tagPbs);
+              }
+            },
+          })
+            .then(() =>
+              showSuccessNotification("Tags updated", { durationMs: 2000 }),
+            )
+            .catch((e: unknown) => {
+              const message = createErrorMessage(e, "Failed to update tags");
+              showErrorNotification(message);
+            })
+            .finally(() => {
+              hideLoaderBar();
+              hideModal("EditResultTags");
+            });
+        }}
+      />
+    </AnimatedModal>
+  );
+}
diff --git a/frontend/src/ts/components/modals/Modals.tsx b/frontend/src/ts/components/modals/Modals.tsx
index 49d255ad8d00..ff76948a4aeb 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 { EditResultTagsModal } from "./EditResultTagsModal";
 import { ForgotPasswordModal } from "./ForgotPasswordModal";
 import { GoogleSignupModal } from "./GoogleSignUpModal";
 import { LastSignedOutResultModal } from "./LastSignedOutResultModal";
@@ -48,6 +49,7 @@ export function Modals(): JSXElement {
       <GoogleSignupModal />
       <ForgotPasswordModal />
       <UserReportModal />
+      <EditResultTagsModal />
     </>
   );
 }
diff --git a/frontend/src/ts/components/pages/account/Table.tsx b/frontend/src/ts/components/pages/account/Table.tsx
index 26f538695331..121a07460b9b 100644
--- a/frontend/src/ts/components/pages/account/Table.tsx
+++ b/frontend/src/ts/components/pages/account/Table.tsx
@@ -6,8 +6,8 @@ import { Accessor, createMemo, createSignal, JSXElement, Show } from "solid-js";
 
 import { type TagItem, useTagsLiveQuery } from "../../../collections/tags";
 import { SnapshotResult } from "../../../constants/default-snapshot";
-import * as EditResultTagsModal from "../../../modals/edit-result-tags";
 import { getFormatting } from "../../../states/core";
+import { showEditResultTagsModal } from "../../../states/edit-result-tags";
 import { showModal } from "../../../states/modals";
 import { showNoticeNotification } from "../../../states/notifications";
 import { cn } from "../../../utils/cn";
@@ -261,11 +261,11 @@ function getColumns<M extends Mode>({
                 );
                 return;
               }
-              EditResultTagsModal.show(
-                info.row.original._id,
-                info.getValue(),
-                "accountPage",
-              );
+
+              showEditResultTagsModal({
+                _id: info.row.original._id,
+                tags: info.getValue(),
+              });
             }}
           />
         );
diff --git a/frontend/src/ts/event-handlers/test.ts b/frontend/src/ts/event-handlers/test.ts
index d85fc367b256..d12d6585ef33 100644
--- a/frontend/src/ts/event-handlers/test.ts
+++ b/frontend/src/ts/event-handlers/test.ts
@@ -1,5 +1,4 @@
 import { Config } from "../config/store";
-import * as EditResultTagsModal from "../modals/edit-result-tags";
 import { __nonReactive } from "../collections/tags";
 import {
   showNoticeNotification,
@@ -12,6 +11,7 @@ import { navigate } from "../controllers/route-controller";
 import { getMode2 } from "../utils/misc";
 import { qs } from "../utils/dom";
 import { getCurrentQuote } from "../states/test";
+import { showEditResultTagsModal } from "../states/edit-result-tags";
 
 const testPage = qs(".pageTest");
 
@@ -25,7 +25,7 @@ testPage?.onChild("click", ".tags .editTagsButton", () => {
         "data-active-tag-ids",
       ) ?? "";
     const tags = activeTagIds === "" ? [] : activeTagIds.split(",");
-    EditResultTagsModal.show(resultid, tags, "resultPage");
+    showEditResultTagsModal({ _id: resultid, tags, source: "resultPage" });
   }
 });
 
diff --git a/frontend/src/ts/modals/edit-result-tags.ts b/frontend/src/ts/modals/edit-result-tags.ts
deleted file mode 100644
index a92b144c65c5..000000000000
--- a/frontend/src/ts/modals/edit-result-tags.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { showLoaderBar, hideLoaderBar } from "../states/loader-bar";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "../states/notifications";
-import { areUnsortedArraysEqual } from "../utils/arrays";
-import * as TestResult from "../test/result";
-import AnimatedModal from "../utils/animated-modal";
-import { __nonReactive } from "../collections/tags";
-import { updateTags } from "../collections/results";
-import { createErrorMessage } from "../utils/error";
-
-type State = {
-  resultId: string;
-  startingTags: string[];
-  tags: string[];
-  source: "accountPage" | "resultPage";
-};
-
-const state: State = {
-  resultId: "",
-  startingTags: [],
-  tags: [],
-  source: "accountPage",
-};
-
-export function show(
-  resultId: string,
-  tags: string[],
-  source: "accountPage" | "resultPage",
-): void {
-  if (resultId === "") {
-    showErrorNotification(
-      "Failed to show edit result tags modal: result id is empty",
-    );
-    return;
-  }
-
-  const knownTagIds = new Set(__nonReactive.getTags().map((it) => it._id));
-  tags = tags.filter((it) => knownTagIds.has(it));
-
-  state.resultId = resultId;
-  state.startingTags = [...tags];
-  state.tags = [...tags];
-  state.source = source;
-
-  void modal.show({
-    beforeAnimation: async (): Promise<void> => {
-      appendButtons();
-      updateActiveButtons();
-    },
-  });
-}
-
-function hide(): void {
-  void modal.hide();
-}
-
-function appendButtons(): void {
-  const buttonsEl = modal.getModal().qs(".buttons");
-
-  if (buttonsEl === null) {
-    showErrorNotification(
-      "Failed to append buttons to edit result tags modal: could not find buttons element",
-    );
-    return;
-  }
-
-  const tagIds = new Set([
-    ...__nonReactive.getTags().map((tag) => tag._id),
-    ...state.tags,
-  ]);
-
-  buttonsEl.empty();
-  for (const tagId of tagIds) {
-    const tag = __nonReactive.getTag(tagId);
-    const button = document.createElement("button");
-    button.classList.add("toggleTag");
-    button.setAttribute("data-tag-id", tagId);
-    button.textContent = tag?.name ?? tag?._id ?? "unknown tag"; //this shouldnt happen?
-    button.addEventListener("click", (e) => {
-      toggleTag(tagId);
-      updateActiveButtons();
-    });
-    buttonsEl.append(button);
-  }
-}
-
-function updateActiveButtons(): void {
-  const buttons = modal.getModal().qsa(".buttons button");
-  for (const button of buttons) {
-    const tagid: string = button.getAttribute("data-tag-id") ?? "";
-    if (state.tags.includes(tagid)) {
-      button.addClass("active");
-    } else {
-      button.removeClass("active");
-    }
-  }
-}
-
-function toggleTag(tagId: string): void {
-  if (state.tags.includes(tagId)) {
-    state.tags = state.tags.filter((el) => el !== tagId);
-  } else {
-    state.tags.push(tagId);
-  }
-}
-
-async function save(): Promise<void> {
-  showLoaderBar();
-  try {
-    await updateTags({
-      resultId: state.resultId,
-      currentTagIds: state.startingTags,
-      newTagIds: state.tags,
-      afterUpdate: ({ tagPbs }) => {
-        if (state.source === "resultPage") {
-          TestResult.updateTagsAfterEdit(state.tags, tagPbs);
-        }
-      },
-    });
-    hideLoaderBar();
-  } catch (e) {
-    hideLoaderBar();
-    const message = createErrorMessage(e, "Failed to update tags");
-    showErrorNotification(message);
-    return;
-  }
-
-  //if got no freaking idea why this is needed
-  //but update tags somehow adds undefined to the end of the array
-  //i tried spreading, json parsing - nothing helped.
-  state.tags = state.tags.filter((el) => el !== undefined);
-  showSuccessNotification("Tags updated", { durationMs: 2000 });
-}
-
-const modal = new AnimatedModal({
-  dialogId: "editResultTagsModal",
-  setup: async (modalEl): Promise<void> => {
-    modalEl.qs("button.saveButton")?.on("click", (e) => {
-      if (areUnsortedArraysEqual(state.startingTags, state.tags)) {
-        hide();
-        return;
-      }
-      hide();
-      void save();
-    });
-  },
-});
diff --git a/frontend/src/ts/states/edit-result-tags.ts b/frontend/src/ts/states/edit-result-tags.ts
new file mode 100644
index 000000000000..58206a3f4a77
--- /dev/null
+++ b/frontend/src/ts/states/edit-result-tags.ts
@@ -0,0 +1,23 @@
+import { Result } from "@monkeytype/schemas/results";
+import { Mode } from "@monkeytype/schemas/shared";
+import { createSignal } from "solid-js";
+import { showModal } from "./modals";
+import { showErrorNotification } from "./notifications";
+
+type IdAndTags = Pick<Result<Mode>, "_id" | "tags"> & { source?: "resultPage" };
+const [getSelectedResult, setSelectedResult] = createSignal<IdAndTags | null>(
+  null,
+);
+
+export { getSelectedResult };
+
+export function showEditResultTagsModal(options: IdAndTags): void {
+  if (options._id === "") {
+    showErrorNotification(
+      "Failed to show edit result tags modal: result id is empty",
+    );
+    return;
+  }
+  setSelectedResult(options);
+  showModal("EditResultTags");
+}
diff --git a/frontend/src/ts/states/modals.ts b/frontend/src/ts/states/modals.ts
index 1f83c9435279..6a2460175800 100644
--- a/frontend/src/ts/states/modals.ts
+++ b/frontend/src/ts/states/modals.ts
@@ -35,7 +35,8 @@ export type ModalId =
   | "StreakHourOffset"
   | "GoogleSignup"
   | "ForgotPassword"
-  | "UserReport";
+  | "UserReport"
+  | "EditResultTags";
 
 export type ModalVisibility = {
   visible: boolean;