refactor(import export modal): use setup function, move file, style

frontend/src/html/popups.html

@@ -362,7 +362,7 @@
   </div>
 </div>
 
-<dialog id="settingsImportPopup" class="modalWrapper hidden">
+<dialog id="importExportSettingsModal" class="modalWrapper hidden">
   <form class="modal" data-mode="">
     <input type="text" title="import settings" />
     <button>import settings</button>

frontend/src/styles/popups.scss

@@ -922,15 +922,10 @@
     }
   }
 }
-#settingsImportWrapper {
-  #settingsImport {
-    width: 50vw;
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    padding: 2rem;
-    display: grid;
-    gap: 1rem;
-    overflow-y: scroll;
+
+#importExportSettingsModal {
+  .modal {
+    max-width: 900px;
   }
 }
 

frontend/src/ts/modals/import-export-settings.ts

@@ -38,24 +38,30 @@ export function show(mode: "import" | "export", config?: string): void {
   });
 }
 
-$("#settingsImportPopup input").on("input", (e) => {
-  state.value = (e.target as HTMLInputElement).value;
-});
-
-$("#settingsImportPopup form").on("submit", async (e) => {
-  e.preventDefault();
-  if (state.mode !== "import") return;
-  if (state.value === "") {
-    void modal.hide();
-    return;
+const modal = new AnimatedModal(
+  "importExportSettingsModal",
+  "popups",
+  undefined,
+  {
+    setup: async (modalEl): Promise<void> => {
+      modalEl.querySelector("input")?.addEventListener("input", (e) => {
+        state.value = (e.target as HTMLInputElement).value;
+      });
+      modalEl.querySelector("form")?.addEventListener("submit", async (e) => {
+        e.preventDefault();
+        if (state.mode !== "import") return;
+        if (state.value === "") {
+          void modal.hide();
+          return;
+        }
+        try {
+          await UpdateConfig.apply(JSON.parse(state.value));
+        } catch (e) {
+          Notifications.add("Failed to import settings: " + e, -1);
+        }
+        UpdateConfig.saveFullConfigToLocalStorage();
+        void modal.hide();
+      });
+    },
   }
-  try {
-    await UpdateConfig.apply(JSON.parse(state.value));
-  } catch (e) {
-    Notifications.add("Failed to import settings: " + e, -1);
-  }
-  UpdateConfig.saveFullConfigToLocalStorage();
-  void modal.hide();
-});
-
-const modal = new AnimatedModal("settingsImportPopup", "popups");
+);

frontend/src/ts/pages/settings.ts

@@ -8,7 +8,7 @@ import * as TagController from "../controllers/tag-controller";
 import * as PresetController from "../controllers/preset-controller";
 import * as ThemePicker from "../settings/theme-picker";
 import * as Notifications from "../elements/notifications";
-import * as ImportExportSettingsPopup from "../popups/import-export-settings-popup";
+import * as ImportExportSettingsModal from "../modals/import-export-settings";
 import * as ConfigEvent from "../observables/config-event";
 import * as ActivePage from "../states/active-page";
 import * as ApeKeysPopup from "../popups/ape-keys-popup";
@@ -1128,7 +1128,7 @@ $(".pageSettings .section.presets").on(
 );
 
 $("#importSettingsButton").on("click", () => {
-  ImportExportSettingsPopup.show("import");
+  ImportExportSettingsModal.show("import");
 });
 
 $("#exportSettingsButton").on("click", () => {
@@ -1138,7 +1138,7 @@ $("#exportSettingsButton").on("click", () => {
       Notifications.add("JSON Copied to clipboard", 0);
     },
     function () {
-      ImportExportSettingsPopup.show("export");
+      ImportExportSettingsModal.show("export");
     }
   );
 });