fix: add input validation for new filter preset modal (@AmanDevelops) (monkeytypegame#7073)

### Description

Added input validation for `New filter preset` modal in frontend and
display appropriate indicators in realtime

#### Updated UI
<img width="610" height="333" alt="Screenshot From 2025-11-03 02-08-40"
src="https://github.com/user-attachments/assets/0f0f3628-5e61-4de9-8100-d96475f8bf08"
/>

<img width="610" height="333" alt="Screenshot From 2025-11-03 02-08-26"
src="https://github.com/user-attachments/assets/df0fd478-7d54-4a99-b7ed-198f1f9ebae6"
/>


### Checks

- [ ] Adding quotes?
- [ ] Make sure to include translations for the quotes in the
description (or another comment) so we can verify their content.
- [ ] Adding a language?
- Make sure to follow the [languages
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/LANGUAGES.md)
  - [ ] Add language to `packages/schemas/src/languages.ts`
- [ ] Add language to exactly one group in
`frontend/src/ts/constants/languages.ts`
  - [ ] Add language json file to `frontend/static/languages` 
- [ ] Adding a theme?
- Make sure to follow the [themes
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/THEMES.md)
  - [ ] Add theme to `packages/schemas/src/themes.ts`
  - [ ] Add theme to `frontend/src/ts/constants/themes.ts`
  - [ ] Add theme css file to `frontend/static/themes`
- [ ] Add some screenshot of the theme, especially with different test
settings (colorful, flip colors) to your pull request
- [ ] Adding a layout?
- [ ] Make sure to follow the [layouts
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/LAYOUTS.md)
  - [ ] Add layout to `packages/schemas/src/layouts.ts`
  - [ ] Add layout json file to `frontend/static/layouts` 
- [ ] Adding a font?
- Make sure to follow the [themes
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/FONTS.md)
  - [ ] Add font file  to `frontend/static/webfonts`
  - [ ] Add font to `packages/schemas/src/fonts.ts`
  - [ ] Add font to `frontend/src/ts/constants/fonts.ts`
- [X] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [X] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [X] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.

<!-- label(optional scope): pull request title (@your_github_username)
-->

<!-- I know I know they seem boring but please do them, they help us and
you will find out it also helps you.-->

Closes monkeytypegame#7063

<!-- the issue(s) your PR resolves if any (delete if that is not the
case) -->
<!-- please also reference any issues and or PRs related to your pull
request -->
<!-- Also remove it if you are not following any issues. -->

<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[monkeytypegame#1234](monkeytypegame#1234) -->

<!-- pro tip: you can press . (dot or period) in the code tab of any
GitHub repo to get access to GitHub's VS Code web editor Enjoy! :) -->

Author: AmanDevelops

frontend/src/html/popups.html

@@ -1276,14 +1276,6 @@
   </div>
 </dialog>
 
-<dialog id="newFilterPresetModal" class="modalWrapper hidden">
-  <form class="modal">
-    <div class="title">New filter preset</div>
-    <input type="text" value="" />
-    <button>add</button>
-  </form>
-</dialog>
-
 <dialog id="editProfileModal" class="modalWrapper hidden">
   <form class="modal">
     <div class="title">Edit Profile</div>

frontend/src/styles/popups.scss

@@ -1654,12 +1654,6 @@ body.darkMode {
   }
 }
 
-#newFilterPresetModal {
-  .modal {
-    max-width: 450px;
-  }
-}
-
 #editProfileModal {
   .modal {
     max-width: 600px;

frontend/src/ts/elements/account/result-filters.ts

@@ -179,7 +179,9 @@ function addFilterPresetToSnapshot(filter: ResultFilters): void {
 }
 
 // callback function called by popup once user inputs name
-export async function createFilterPreset(name: string): Promise<void> {
+export async function createFilterPreset(
+  name: string
+): Promise<number | undefined> {
   name = name.replace(/ /g, "_");
   Loader.show();
   const result = await Ape.users.addResultFilterPreset({
@@ -189,13 +191,10 @@ export async function createFilterPreset(name: string): Promise<void> {
   if (result.status === 200) {
     addFilterPresetToSnapshot({ ...filters, name, _id: result.body.data });
     void updateFilterPresets();
-    Notifications.add("Filter preset created", 1);
+    return 1;
   } else {
-    Notifications.add(
-      "Error creating filter preset: " + result.body.message,
-      -1
-    );
     console.log("error creating filter preset: " + result.body.message);
+    return 0;
   }
 }
 

frontend/src/ts/modals/new-filter-preset.ts

@@ -1,41 +1,35 @@
+import { ResultFiltersSchema } from "@monkeytype/schemas/users";
 import { createFilterPreset } from "../elements/account/result-filters";
-import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
-import * as Notifications from "../elements/notifications";
+import { SimpleModal } from "../utils/simple-modal";
 
-export function show(showOptions?: ShowOptions): void {
-  void modal.show({
-    ...showOptions,
-    focusFirstInput: true,
-    beforeAnimation: async (modalEl) => {
-      (modalEl.querySelector("input") as HTMLInputElement).value = "";
-    },
-  });
-}
-
-function hide(clearChain = false): void {
-  void modal.hide({
-    clearModalChain: clearChain,
-  });
+export function show(): void {
+  newFilterPresetModal.show(undefined, {});
 }
 
-function apply(): void {
-  const name = $("#newFilterPresetModal input").val() as string;
-  if (name === "") {
-    Notifications.add("Name cannot be empty", 0);
-    return;
-  }
-  void createFilterPreset(name);
-  hide(true);
-}
-
-async function setup(modalEl: HTMLElement): Promise<void> {
-  modalEl.addEventListener("submit", (e) => {
-    e.preventDefault();
-    apply();
-  });
-}
+const newFilterPresetModal = new SimpleModal({
+  id: "newFilterPresetModal",
+  title: "New Filter Preset",
+  inputs: [
+    {
+      placeholder: "Preset Name",
+      type: "text",
+      initVal: "",
+      validation: {
+        schema: ResultFiltersSchema.shape.name,
+      },
+    },
+  ],
+  buttonText: "add",
+  onlineOnly: true,
+  execFn: async (_thisPopup, name) => {
+    const status = await createFilterPreset(name);
 
-const modal = new AnimatedModal({
-  dialogId: "newFilterPresetModal",
-  setup,
+    if (status === 1) {
+      return { status: 1, message: "Filter preset created" };
+    } else {
+      let status: -1 | 0 | 1 = -1;
+      let message: string = "Error creating filter preset";
+      return { status, message, alwaysHide: true };
+    }
+  },
 });