fix(test-timer): slow timer notification reappearing after new test (@J-Karthikeyan) (monkeytypegame#7808)

### Description

When a test fails due to the slow timer, the error notification
("Stopping the test due to bad performance...") has no auto dismiss
timeout so it stays in the notification store indefinitely so it
reappears once the next test is completed.

When we start a new test, the notification gets visually hidden by focus
mode (non important notifications get a `hidden` class when getFocus()
is true). When the test ends, focus mode turns off and the notification
reappears making it look like it fired again when it didn't.

### Steps to Reproduce
1. Start a test and let the slow timer trigger the notification by just
typing one or two letter and leaving it.
  2. Do NOT dismiss the notification
  3. Start and complete a new test without a page refresh
  4. The notification reappears at the end of the new test

### Fix
Fix: track the error notification's ID when the slow timer fires, and
remove it from the store when a new test starts via TestTimer.start().

Author: J-Karthikeyan

frontend/src/ts/states/notifications.ts

@@ -115,7 +115,7 @@ export function addNotificationWithLevel(
   message: string,
   level: NotificationLevel,
   options: AddNotificationOptions = {},
-): void {
+): number {
   let details = options.details;
 
   if (options.response !== undefined) {
@@ -174,25 +174,27 @@ export function addNotificationWithLevel(
     }, durationMs + 250);
     autoRemoveTimers.set(notifId, timer);
   }
+
+  return notifId;
 }
 
 export function showNoticeNotification(
   message: string,
   options?: AddNotificationOptions,
-): void {
-  addNotificationWithLevel(message, "notice", options);
+): number {
+  return addNotificationWithLevel(message, "notice", options);
 }
 
 export function showSuccessNotification(
   message: string,
   options?: AddNotificationOptions,
-): void {
-  addNotificationWithLevel(message, "success", options);
+): number {
+  return addNotificationWithLevel(message, "success", options);
 }
 
 export function showErrorNotification(
   message: string,
   options?: AddNotificationOptions,
-): void {
-  addNotificationWithLevel(message, "error", options);
+): number {
+  return addNotificationWithLevel(message, "error", options);
 }

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

@@ -14,6 +14,7 @@ import * as Numbers from "@monkeytype/util/numbers";
 import {
   showNoticeNotification,
   showErrorNotification,
+  removeNotification,
 } from "../states/notifications";
 import * as Caret from "./caret";
 import * as SlowTimer from "../legacy-states/slow-timer";
@@ -52,6 +53,7 @@ type TimerStats = {
 };
 
 let slowTimerCount = 0;
+let slowTimerNotifIds: number[] = [];
 let timer: NodeJS.Timeout | null = null;
 const interval = 1000;
 let expected = 0;
@@ -284,8 +286,10 @@ function checkIfTimerIsSlow(drift: number): void {
         'This could be caused by "efficiency mode" on Microsoft Edge.',
       );
 
-      showErrorNotification(
-        "Stopping the test due to bad performance. This would cause test calculations to be incorrect. If this happens a lot, please report this.",
+      slowTimerNotifIds.push(
+        showErrorNotification(
+          "Stopping the test due to bad performance. This would cause test calculations to be incorrect. If this happens a lot, please report this.",
+        ),
       );
 
       timerEvent.dispatch({ key: "fail", value: "slow timer" });
@@ -296,6 +300,10 @@ function checkIfTimerIsSlow(drift: number): void {
 export async function start(): Promise<void> {
   SlowTimer.clear();
   slowTimerCount = 0;
+  for (const id of slowTimerNotifIds) {
+    removeNotification(id, "clear");
+  }
+  slowTimerNotifIds = [];
   void _startNew();
   // void _startOld();
 }