From a667da78eb2b63c32316c85df2bd00678049b2a3 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <cfe@sexy-developer.com>
Date: Sat, 4 Jul 2026 20:39:53 +0200
Subject: [PATCH] refactor: solid edit result tags modal (@fehmer)

---
 frontend/src/html/popups.html                 |   7 -
 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(+), 176 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 3ee31d09cc30..45079a5b9836 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -147,13 +147,6 @@
     <button class="submit">set</button>
   </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">
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index b205e273e190..258333a1732e 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -292,17 +292,6 @@ body.darkMode {
   }
 }
 
-#editResultTagsModal {
-  .modal {
-    max-width: 600px;
-    .buttons {
-      display: grid;
-      gap: 0.5rem;
-      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-    }
-  }
-}
-
 #streakHourOffsetModal {
   .modal {
     max-width: 500px;
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 632e0cc13172..50e377d50947 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 { LastSignedOutResultModal } from "./LastSignedOutResultModal";
 import { MobileTestConfigModal } from "./MobileTestConfigModal";
 import { AddPresetModal } from "./preset/AddPresetModal";
@@ -40,6 +41,7 @@ export function Modals(): JSXElement {
       <EditPresetModal />
       <ViewApeKeyModal />
       <LastSignedOutResultModal />
+      <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 0cb81f089530..8103c3763142 100644
--- a/frontend/src/ts/states/modals.ts
+++ b/frontend/src/ts/states/modals.ts
@@ -31,7 +31,8 @@ export type ModalId =
   | "EditPresetModal"
   | "EditProfile"
   | "ViewApeKey"
-  | "LastSignedOutResult";
+  | "LastSignedOutResult"
+  | "EditResultTags";
 
 export type ModalVisibility = {
   visible: boolean;