refactor(support popup): use new modal system

frontend/src/html/popups.html

@@ -954,8 +954,8 @@
 <div id="versionHistoryWrapper" class="popupWrapper hidden">
   <div id="versionHistory"></div>
 </div>
-<div id="supportMeWrapper" class="popupWrapper hidden" tabindex="-1">
-  <div id="supportMe">
+<dialog id="supportMePopup" class="modalWrapper hidden">
+  <div class="modal">
     <div class="title">Support Monkeytype</div>
     <div class="text">
       Thank you so much for thinking about supporting this project. It would not
@@ -1004,7 +1004,7 @@
       </a>
     </div>
   </div>
-</div>
+</dialog>
 <div id="contactPopupWrapper" class="popupWrapper hidden">
   <div id="contactPopup">
     <div class="title">Contact</div>

frontend/src/styles/popups.scss

@@ -1391,9 +1391,10 @@
   }
 }
 
-#supportMeWrapper {
-  #supportMe {
-    width: 900px;
+#supportMePopup {
+  .modal {
+    max-width: 900px;
+    width: 100%;
     // height: 400px;
     overflow-y: scroll;
     max-height: 100%;
@@ -1401,7 +1402,6 @@
     border-radius: var(--roundness);
     padding: 2rem;
     display: grid;
-    grid-template-rows: auto auto auto;
     gap: 1rem;
     @extend .ffscroll;
 
@@ -1421,7 +1421,7 @@
 
     .buttons {
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
       gap: 1rem;
 
       button,

frontend/src/ts/event-handlers/about.ts

@@ -0,0 +1,7 @@
+import * as SupportPopup from "../popups/support-popup";
+
+document
+  .querySelector("#pageAbout #supportMeAboutButton")
+  ?.addEventListener("click", () => {
+    SupportPopup.show();
+  });

frontend/src/ts/event-handlers/footer.ts

@@ -3,6 +3,7 @@ import { isAuthenticated } from "../firebase";
 import * as DB from "../db";
 import * as Notifications from "../elements/notifications";
 import { getCommandline } from "../utils/async-modules";
+import * as SupportPopup from "../popups/support-popup";
 
 document
   .querySelector("footer #commandLineButton")
@@ -37,3 +38,9 @@ document
       });
     }
   });
+
+document
+  .querySelector("footer #supportMeButton")
+  ?.addEventListener("click", () => {
+    SupportPopup.show();
+  });

frontend/src/ts/event-handlers/popups.ts

@@ -1,5 +0,0 @@
-import { getCommandline } from "../utils/async-modules";
-
-$("#popups").on("click", "#supportMeWrapper button.ads", async () => {
-  (await getCommandline()).show({ subgroupOverride: "enableAds" });
-});

frontend/src/ts/index.ts

@@ -6,7 +6,6 @@ import "./event-handlers/global";
 import "./event-handlers/footer";
 import "./event-handlers/keymap";
 import "./event-handlers/test";
-import "./event-handlers/popups";
 
 import "./firebase";
 import * as Logger from "./utils/logger";

frontend/src/ts/popups/support-popup.ts

@@ -1,50 +1,19 @@
-import { isPopupVisible } from "../utils/misc";
-import * as Skeleton from "../utils/skeleton";
+import AnimatedModal from "./animated-modal";
+import { getCommandline } from "../utils/async-modules";
 
-const wrapperId = "supportMeWrapper";
-
-function show(): void {
-  Skeleton.append(wrapperId, "popups");
-
-  $("#supportMeWrapper")
-    .css("opacity", 0)
-    .removeClass("hidden")
-    .animate({ opacity: 1 }, 125, () => {
-      $(`#${wrapperId}`).trigger("focus");
-    });
+export function show(): void {
+  void modal.show();
 }
 
-function hide(): void {
-  $("#supportMeWrapper")
-    .css("opacity", 1)
-    .animate({ opacity: 0 }, 125, () => {
-      $("#supportMeWrapper").addClass("hidden");
-      Skeleton.remove(wrapperId);
+const modal = new AnimatedModal("supportMePopup", "popups", undefined, {
+  setup: (modalEl): void => {
+    modalEl.querySelector("button.ads")?.addEventListener("click", async () => {
+      const commandline = await getCommandline();
+      await modal.hide({ animationMode: "modalOnly" });
+      commandline.show(
+        { subgroupOverride: "enableAds" },
+        { animationMode: "modalOnly" }
+      );
     });
-}
-
-$("#supportMeButton").on("click", () => {
-  show();
+  },
 });
-
-$("main").on("click", ".pageAbout #supportMeAboutButton", () => {
-  show();
-});
-
-$("#popups").on("click", "#supportMeWrapper", (e) => {
-  if ($(e.target).attr("id") === "supportMeWrapper") {
-    hide();
-  }
-});
-
-$("#popups").on("click", "#supportMeWrapper button", () => {
-  hide();
-});
-
-$(document).on("keydown", (e) => {
-  if (e.key === "Escape" && isPopupVisible(wrapperId)) {
-    hide();
-  }
-});
-
-Skeleton.save(wrapperId);