minor migrations of isolated components

Author: KanishkKundu05

frontend/src/ts/elements/settings/account-settings-notice.ts

@@ -8,12 +8,16 @@ const ls = new LocalStorageWithSchema({
   fallback: false,
 });
 
+const noticeSelector = ".pageSettings .accountSettingsNotice";
+
 if (ls.get()) {
-  $(".pageSettings .accountSettingsNotice").remove();
+  document.querySelector(noticeSelector)?.remove();
 }
 
-$(".pageSettings .accountSettingsNotice .dismissAndGo").on("click", () => {
-  ls.set(true);
-  void navigate("/account-settings");
-  $(".pageSettings .accountSettingsNotice").remove();
-});
+document
+  .querySelector(`${noticeSelector} .dismissAndGo`)
+  ?.addEventListener("click", () => {
+    ls.set(true);
+    void navigate("/account-settings");
+    document.querySelector(noticeSelector)?.remove();
+  });

frontend/src/ts/elements/version-button.ts

@@ -2,15 +2,13 @@ import { isDevEnvironment } from "../utils/misc";
 import * as Version from "../states/version";
 
 function setText(text: string): void {
-  $("footer .currentVersion .text").text(text);
+  const el = document.querySelector("footer .currentVersion .text");
+  if (el) el.textContent = text;
 }
 
 function setIndicatorVisible(state: boolean): void {
-  if (state) {
-    $("#newVersionIndicator").removeClass("hidden");
-  } else {
-    $("#newVersionIndicator").addClass("hidden");
-  }
+  const indicator = document.getElementById("newVersionIndicator");
+  indicator?.classList.toggle("hidden", !state);
 }
 
 export async function update(): Promise<void> {

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

@@ -1,7 +1,9 @@
 import * as Commandline from "../commandline/commandline";
 
-$("#keymap").on("click", ".r5 .layoutIndicator", async () => {
-  Commandline.show({
-    subgroupOverride: "keymapLayouts",
-  });
+document.getElementById("keymap")?.addEventListener("click", (e) => {
+  if ((e.target as Element).closest(".r5 .layoutIndicator")) {
+    Commandline.show({
+      subgroupOverride: "keymapLayouts",
+    });
+  }
 });

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

@@ -2,6 +2,8 @@ import * as ForgotPasswordModal from "../modals/forgot-password";
 
 const loginPage = document.querySelector("#pageLogin") as HTMLElement;
 
-$(loginPage).on("click", "#forgotPasswordButton", () => {
-  ForgotPasswordModal.show();
+loginPage?.addEventListener("click", (e) => {
+  if ((e.target as Element).closest("#forgotPasswordButton")) {
+    ForgotPasswordModal.show();
+  }
 });

frontend/src/ts/states/connection.ts

@@ -33,9 +33,11 @@ const throttledHandleState = debounce(5000, () => {
       Notifications.add("You're back online", 1, {
         customTitle: "Connection",
       });
-      $(
-        `#bannerCenter .psa.notice[id="${noInternetBannerId}"] .closeButton`,
-      ).trigger("click");
+      document
+        .querySelector(
+          `#bannerCenter .psa.notice[id="${noInternetBannerId}"] .closeButton`,
+        )
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     }
     bannerAlreadyClosed = false;
   } else if (!TestState.isActive) {

frontend/src/ts/test/funbox/memory-funbox-timer.ts

@@ -42,7 +42,7 @@ export function start(time: number): void {
     memoryTimer === 0 ? hide() : update(memoryTimer);
     if (memoryTimer <= 0) {
       reset();
-      $("#wordsWrapper").addClass("hidden");
+      document.getElementById("wordsWrapper")?.classList.add("hidden");
     }
   }, 1000);
 }

frontend/src/ts/test/out-of-focus.ts

@@ -3,22 +3,26 @@ import Config from "../config";
 
 const outOfFocusTimeouts: (number | NodeJS.Timeout)[] = [];
 
+const blurTargets = "#words, #compositionDisplay";
+
 export function hide(): void {
-  $("#words, #compositionDisplay")
-    .css("transition", "none")
-    .removeClass("blurred");
-  $(".outOfFocusWarning").addClass("hidden");
+  document.querySelectorAll(blurTargets).forEach((el) => {
+    (el as HTMLElement).style.transition = "none";
+    el.classList.remove("blurred");
+  });
+  document.querySelector(".outOfFocusWarning")?.classList.add("hidden");
   Misc.clearTimeouts(outOfFocusTimeouts);
 }
 
 export function show(): void {
   if (!Config.showOutOfFocusWarning) return;
   outOfFocusTimeouts.push(
     setTimeout(() => {
-      $("#words, #compositionDisplay")
-        .css("transition", "0.25s")
-        .addClass("blurred");
-      $(".outOfFocusWarning").removeClass("hidden");
+      document.querySelectorAll(blurTargets).forEach((el) => {
+        (el as HTMLElement).style.transition = "0.25s";
+        el.classList.add("blurred");
+      });
+      document.querySelector(".outOfFocusWarning")?.classList.remove("hidden");
     }, 1000),
   );
 }

frontend/src/ts/test/pb-crown.ts

@@ -3,7 +3,11 @@ import { applyReducedMotion } from "../utils/misc";
 
 export function hide(): void {
   visible = false;
-  $("#result .stats .wpm .crown").css("opacity", 0).addClass("hidden");
+  const crown = document.querySelector("#result .stats .wpm .crown") as HTMLElement | null;
+  if (crown) {
+    crown.style.opacity = "0";
+    crown.classList.add("hidden");
+  }
 }
 
 export type CrownType =
@@ -38,10 +42,9 @@ export function show(): void {
 
 export function update(type: CrownType): void {
   currentType = type;
-  const el = $("#result .stats .wpm .crown");
-  el.removeClass("ineligible");
-  el.removeClass("pending");
-  el.removeClass("error");
-  el.removeClass("warning");
-  el.addClass(type);
+  const crown = document.querySelector("#result .stats .wpm .crown");
+  if (crown) {
+    crown.classList.remove("ineligible", "pending", "error", "warning");
+    crown.classList.add(type);
+  }
 }