changed function properties to an options object

added support for important property

frontend/src/styles/notifications.scss

@@ -7,8 +7,11 @@
   right: 1rem;
   top: 1rem;
   transition: 0.125s opacity;
-  &.focus {
-    opacity: 0;
+  &.focus .notif {
+    visibility: hidden;
+  }
+  &.focus .notif.important {
+    visibility: visible;
   }
   .history {
     display: grid;

frontend/src/ts/config.ts

@@ -1212,17 +1212,16 @@ export function setFontFamily(font: string, nosave?: boolean): boolean {
     Notifications.add(
       "Empty input received, reverted to the default font.",
       0,
-      3,
-      "Custom font"
+      {
+        customTitle: "Custom font",
+      }
     );
   }
   if (!isConfigKeyValid(font)) {
-    Notifications.add(
-      `Invalid font name value: "${font}".`,
-      -1,
-      3,
-      "Custom font"
-    );
+    Notifications.add(`Invalid font name value: "${font}".`, -1, {
+      customTitle: "Custom font",
+      duration: 3,
+    });
     return false;
   }
   config.fontFamily = font;
@@ -1361,7 +1360,9 @@ function setThemes(
       Notifications.add(
         "Missing sub alt color. Please edit it in the custom theme settings and save your changes.",
         0,
-        7
+        {
+          duration: 7,
+        }
       );
     }
     customThemeColors.splice(4, 0, "#000000");
@@ -1448,7 +1449,9 @@ export function setCustomThemeColors(
     Notifications.add(
       "Missing sub alt color. Please edit it in the custom theme settings and save your changes.",
       0,
-      7
+      {
+        duration: 7,
+      }
     );
     colors.splice(4, 0, "#000000");
   }

frontend/src/ts/controllers/account-controller.ts

@@ -53,7 +53,9 @@ export const gmailProvider = new GoogleAuthProvider();
 
 export async function sendVerificationEmail(): Promise<void> {
   if (Auth === undefined) {
-    Notifications.add("Authentication uninitialized", -1, 3);
+    Notifications.add("Authentication uninitialized", -1, {
+      duration: 3,
+    });
     return;
   }
 
@@ -63,11 +65,11 @@ export async function sendVerificationEmail(): Promise<void> {
     Loader.hide();
     Notifications.add(
       "Failed to request verification email: " + result.message,
-      3000
+      -1
     );
   } else {
     Loader.hide();
-    Notifications.add("Verification email sent", 1, 3);
+    Notifications.add("Verification email sent", 1);
   }
 }
 
@@ -89,12 +91,16 @@ export async function getDataAndInit(): Promise<boolean> {
       Notifications.add(
         "Doing so will save you bandwidth, make the next test be ready faster and will not sign you out (which could mean your new personal best would not save to your account).",
         0,
-        0
+        {
+          duration: 0,
+        }
       );
       Notifications.add(
         "You will run into this error if you refresh the website to restart the test. It is NOT recommended to do that. Instead, use tab + enter or just tab (with quick tab mode enabled) to restart the test.",
         0,
-        0
+        {
+          duration: 0,
+        }
       );
     }
     const msg = e.message || e;
@@ -312,7 +318,9 @@ if (Auth && ConnectionState.get()) {
       Notifications.add(
         "Challenge links temporarily disabled. Please use the command line to load the challenge manually",
         0,
-        7
+        {
+          duration: 7,
+        }
       );
       return;
       // Notifications.add("Loading challenge", 0);
@@ -344,7 +352,9 @@ if (Auth && ConnectionState.get()) {
       Notifications.add(
         "Challenge links temporarily disabled. Please use the command line to load the challenge manually",
         0,
-        7
+        {
+          duration: 7,
+        }
       );
       return;
     }
@@ -353,11 +363,13 @@ if (Auth && ConnectionState.get()) {
 
 export async function signIn(): Promise<void> {
   if (Auth === undefined) {
-    Notifications.add("Authentication uninitialized", -1, 3);
+    Notifications.add("Authentication uninitialized", -1);
     return;
   }
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, {
+      duration: 2,
+    });
     return;
   }
 
@@ -408,11 +420,15 @@ export async function signIn(): Promise<void> {
 
 export async function signInWithGoogle(): Promise<void> {
   if (Auth === undefined) {
-    Notifications.add("Authentication uninitialized", -1, 3);
+    Notifications.add("Authentication uninitialized", -1, {
+      duration: 3,
+    });
     return;
   }
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, {
+      duration: 2,
+    });
     return;
   }
 
@@ -457,7 +473,9 @@ export async function signInWithGoogle(): Promise<void> {
 
 export async function addGoogleAuth(): Promise<void> {
   if (Auth === undefined) {
-    Notifications.add("Authentication uninitialized", -1, 3);
+    Notifications.add("Authentication uninitialized", -1, {
+      duration: 3,
+    });
     return;
   }
   Loader.show();
@@ -482,7 +500,9 @@ export async function addPasswordAuth(
   password: string
 ): Promise<void> {
   if (Auth === undefined) {
-    Notifications.add("Authentication uninitialized", -1, 3);
+    Notifications.add("Authentication uninitialized", -1, {
+      duration: 3,
+    });
     return;
   }
   Loader.show();
@@ -518,13 +538,17 @@ export async function addPasswordAuth(
 
 export function signOut(): void {
   if (Auth === undefined) {
-    Notifications.add("Authentication uninitialized", -1, 3);
+    Notifications.add("Authentication uninitialized", -1, {
+      duration: 3,
+    });
     return;
   }
   if (!Auth.currentUser) return;
   Auth.signOut()
     .then(function () {
-      Notifications.add("Signed out", 0, 2);
+      Notifications.add("Signed out", 0, {
+        duration: 2,
+      });
       AllTimeStats.clear();
       Settings.hideAccountSection();
       AccountButton.update();
@@ -544,11 +568,15 @@ export function signOut(): void {
 
 async function signUp(): Promise<void> {
   if (Auth === undefined) {
-    Notifications.add("Authentication uninitialized", -1, 3);
+    Notifications.add("Authentication uninitialized", -1, {
+      duration: 3,
+    });
     return;
   }
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, {
+      duration: 2,
+    });
     return;
   }
   RegisterCaptchaPopup.show();
@@ -583,7 +611,7 @@ async function signUp(): Promise<void> {
       /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
     )
   ) {
-    Notifications.add("Invalid email", 0, 3);
+    Notifications.add("Invalid email", 0);
     LoginPage.hidePreloader();
     LoginPage.enableInputs();
     LoginPage.updateSignupButton();
@@ -591,7 +619,7 @@ async function signUp(): Promise<void> {
   }
 
   if (email !== emailVerify) {
-    Notifications.add("Emails do not match", 0, 3);
+    Notifications.add("Emails do not match", 0);
     LoginPage.hidePreloader();
     LoginPage.enableInputs();
     LoginPage.updateSignupButton();
@@ -599,7 +627,7 @@ async function signUp(): Promise<void> {
   }
 
   if (password !== passwordVerify) {
-    Notifications.add("Passwords do not match", 0, 3);
+    Notifications.add("Passwords do not match", 0);
     LoginPage.hidePreloader();
     LoginPage.enableInputs();
     LoginPage.updateSignupButton();
@@ -611,7 +639,9 @@ async function signUp(): Promise<void> {
     Notifications.add(
       "Password must contain at least one capital letter, number, a special character and must be between 8 and 64 characters long",
       0,
-      4
+      {
+        duration: 4,
+      }
     );
     LoginPage.hidePreloader();
     LoginPage.enableInputs();
@@ -663,7 +693,7 @@ async function signUp(): Promise<void> {
         );
       }
     }
-    Notifications.add("Account created", 1, 3);
+    Notifications.add("Account created", 1);
   } catch (e) {
     //make sure to do clean up here
     if (createdAuthUser) {
@@ -713,7 +743,9 @@ $(".pageLogin .login .button.signInWithGoogle").on("click", () => {
 
 $("#top .signInOut").on("click", () => {
   if (Auth === undefined) {
-    Notifications.add("Authentication uninitialized", -1, 3);
+    Notifications.add("Authentication uninitialized", -1, {
+      duration: 3,
+    });
     return;
   }
   if (Auth.currentUser) {
@@ -738,7 +770,9 @@ $(".pageLogin .register .button").on("click", () => {
 
 $(".pageSettings #addGoogleAuth").on("click", async () => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, {
+      duration: 2,
+    });
     return;
   }
   addGoogleAuth();
@@ -746,7 +780,9 @@ $(".pageSettings #addGoogleAuth").on("click", async () => {
 
 $(".pageAccount").on("click", ".sendVerificationEmail", () => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, {
+      duration: 2,
+    });
     return;
   }
   sendVerificationEmail();

frontend/src/ts/controllers/challenge-controller.ts

@@ -153,7 +153,9 @@ export function verify(
             Notifications.add(
               "You will receive a role shortly. Please don't post a screenshot in challenge submissions.",
               1,
-              5
+              {
+                duration: 5,
+              }
             );
           }
           Notifications.add(

frontend/src/ts/controllers/preset-controller.ts

@@ -19,7 +19,9 @@ export function apply(_id: string): void {
         TagController.saveActiveToLocalStorage();
       }
       TestLogic.restart();
-      Notifications.add("Preset applied", 1, 2);
+      Notifications.add("Preset applied", 1, {
+        duration: 2,
+      });
       UpdateConfig.saveFullConfigToLocalStorage();
     }
   });

frontend/src/ts/elements/alerts.ts

@@ -98,9 +98,11 @@ export function hide(): void {
                   badgesClaimed.length > 1 ? "s" : ""
                 } unlocked: ${badgesClaimed.join(", ")}`,
                 1,
-                5,
-                "Reward",
-                "gift"
+                {
+                  duration: 5,
+                  customTitle: "Reward",
+                  customIcon: "gift",
+                }
               );
             }
             if (totalXpClaimed > 0) {

frontend/src/ts/elements/notifications.ts

@@ -19,6 +19,7 @@ class Notification {
   type: string;
   message: string;
   level: number;
+  important: boolean;
   duration: number;
   customTitle?: string;
   customIcon?: string;
@@ -27,6 +28,7 @@ class Notification {
     type: string,
     message: string,
     level: number,
+    important: boolean,
     duration: number | undefined,
     customTitle?: string,
     customIcon?: string,
@@ -38,6 +40,7 @@ class Notification {
     this.type = type;
     this.message = allowHTML ? message : Misc.escapeHTML(message);
     this.level = level;
+    this.important = important;
     if (type === "banner") {
       this.duration = duration as number;
     } else {
@@ -75,6 +78,10 @@ class Notification {
       console.error(this.message);
     }
 
+    if (this.important) {
+      cls += " important";
+    }
+
     if (this.customTitle != undefined) {
       title = this.customTitle;
     }
@@ -232,26 +239,32 @@ class Notification {
   }
 }
 
+interface AddNotificationOptions {
+  important?: boolean;
+  duration?: number;
+  customTitle?: string;
+  customIcon?: string;
+  closeCallback?: () => void;
+  allowHTML?: boolean;
+}
+
 export function add(
   message: string,
   level = 0,
-  duration?: number,
-  customTitle?: string,
-  customIcon?: string,
-  closeCallback?: () => void,
-  allowHTML?: boolean
+  options: AddNotificationOptions = {}
 ): void {
-  NotificationEvent.dispatch(message, level, customTitle);
+  NotificationEvent.dispatch(message, level, options.customTitle);
 
   new Notification(
     "notification",
     message,
     level,
-    duration,
-    customTitle,
-    customIcon,
-    closeCallback,
-    allowHTML
+    false,
+    options.duration,
+    options.customTitle,
+    options.customIcon,
+    options.closeCallback,
+    options.allowHTML
   ).show();
 }
 
@@ -267,6 +280,7 @@ export function addBanner(
     "banner",
     message,
     level,
+    false,
     sticky ? -1 : 0,
     undefined,
     customIcon,

frontend/src/ts/pages/account.ts

@@ -1042,7 +1042,9 @@ export async function downloadResults(): Promise<void> {
   if (DB.getSnapshot()?.results !== undefined) return;
   const results = await DB.getUserResults();
   if (results === false && !ConnectionState.get()) {
-    Notifications.add("Could not get results - you are offline", -1, 5);
+    Notifications.add("Could not get results - you are offline", -1, {
+      duration: 5,
+    });
     return;
   }
   TodayTracker.addAllFromToday();

frontend/src/ts/pages/settings.ts

@@ -1109,7 +1109,9 @@ $(".pageSettings .section.fontSize .inputAndButton .save").on("click", () => {
     )
   );
   if (didConfigSave) {
-    Notifications.add("Saved", 1, 1);
+    Notifications.add("Saved", 1, {
+      duration: 1,
+    });
   }
 });
 
@@ -1123,7 +1125,9 @@ $(".pageSettings .section.fontSize .inputAndButton input").keypress((e) => {
       )
     );
     if (didConfigSave === true) {
-      Notifications.add("Saved", 1, 1);
+      Notifications.add("Saved", 1, {
+        duration: 1,
+      });
     }
   }
 });

frontend/src/ts/popups/ape-keys-popup.ts

@@ -92,7 +92,9 @@ export function hide(): void {
 //show the popup
 export async function show(): Promise<void> {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, {
+      duration: 2,
+    });
     return;
   }
   Skeleton.append(wrapperId);

frontend/src/ts/popups/custom-test-duration-popup.ts

@@ -117,7 +117,9 @@ function apply(): void {
       Notifications.add(
         "Infinite time! Make sure to use Bail Out from the command line to save your result.",
         0,
-        7
+        {
+          duration: 7,
+        }
       );
     }
   } else {

frontend/src/ts/popups/custom-text-popup.ts

@@ -168,7 +168,9 @@ $(`${popup} textarea`).on("keypress", (e) => {
     CustomTextState.getCustomTextName() !== ""
   ) {
     CustomTextState.setCustomTextName("", undefined);
-    Notifications.add("Disabled long custom text progress tracking", 0, 5);
+    Notifications.add("Disabled long custom text progress tracking", 0, {
+      duration: 5,
+    });
     updateLongTextWarning();
   }
 });
@@ -239,7 +241,9 @@ function apply(): void {
     Notifications.add(
       "You need to specify word count or time in seconds to start a random custom test",
       0,
-      5
+      {
+        duration: 5,
+      }
     );
     return;
   }
@@ -252,7 +256,9 @@ function apply(): void {
     Notifications.add(
       "You need to pick between word count or time in seconds to start a random custom test",
       0,
-      5
+      {
+        duration: 5,
+      }
     );
     return;
   }
@@ -264,7 +270,9 @@ function apply(): void {
     Notifications.add(
       "Infinite words! Make sure to use Bail Out from the command line to save your result.",
       0,
-      7
+      {
+        duration: 7,
+      }
     );
   }
 

frontend/src/ts/popups/custom-word-amount-popup.ts

@@ -51,7 +51,9 @@ function apply(): void {
         Notifications.add(
           "Infinite words! Make sure to use Bail Out from the command line to save your result.",
           0,
-          7
+          {
+            duration: 7,
+          }
         );
       }
     }

frontend/src/ts/popups/edit-preset-popup.ts

@@ -12,7 +12,9 @@ const wrapperId = "presetWrapper";
 
 export function show(action: string, id?: string, name?: string): void {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, {
+      duration: 2,
+    });
     return;
   }
   Skeleton.append(wrapperId);
@@ -112,7 +114,9 @@ async function apply(): Promise<void> {
         -1
       );
     } else {
-      Notifications.add("Preset added", 1, 2);
+      Notifications.add("Preset added", 1, {
+        duration: 2,
+      });
       snapshotPresets.push({
         name: presetName,
         config: configChanges,

frontend/src/ts/popups/edit-profile-popup.ts

@@ -13,7 +13,9 @@ let callbackFuncOnHide: (() => void) | null = null;
 
 export function show(callbackOnHide: () => void): void {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, {
+      duration: 2,
+    });
     return;
   }
   Skeleton.append(wrapperId);

frontend/src/ts/popups/edit-tags-popup.ts

@@ -11,7 +11,9 @@ const wrapperId = "tagsWrapper";
 
 export function show(action: string, id?: string, name?: string): void {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, {
+      duration: 2,
+    });
     return;
   }
 

frontend/src/ts/popups/google-sign-up-popup.ts

@@ -48,7 +48,9 @@ export function show(credential: UserCredential): void {
 export async function hide(): Promise<void> {
   if (isPopupVisible(wrapperId)) {
     if (signedInUser !== undefined) {
-      Notifications.add("Sign up process canceled", 0, 5);
+      Notifications.add("Sign up process canceled", 0, {
+        duration: 5,
+      });
       LoginPage.hidePreloader();
       LoginPage.enableInputs();
       if (signedInUser && getAdditionalUserInfo(signedInUser)?.isNewUser) {
@@ -105,7 +107,7 @@ async function apply(): Promise<void> {
       await updateProfile(signedInUser.user, { displayName: name });
       await sendEmailVerification(signedInUser.user);
       AllTimeStats.clear();
-      Notifications.add("Account created", 1, 3);
+      Notifications.add("Account created", 1);
       $("#menu .textButton.account .text").text(name);
       LoginPage.enableInputs();
       LoginPage.hidePreloader();

frontend/src/ts/popups/quote-submit-popup.ts

@@ -65,7 +65,9 @@ export async function show(noAnim = false): Promise<void> {
   Notifications.add(
     "Quote submission is disabled temporarily due to a large submission queue.",
     0,
-    5
+    {
+      duration: 5,
+    }
   );
   return;
   // Skeleton.append(wrapperId);

frontend/src/ts/popups/result-tags-popup.ts

@@ -16,7 +16,9 @@ const state: Record<string, string | undefined> = {
 
 function show(): void {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, {
+      duration: 2,
+    });
     return;
   }
   Skeleton.append(wrapperId);
@@ -82,7 +84,9 @@ $(".pageAccount").on("click", ".group.history #resultEditTags", (f) => {
     Notifications.add(
       "You haven't created any tags. You can do it in the settings page",
       0,
-      4
+      {
+        duration: 4,
+      }
     );
   }
 });
@@ -147,7 +151,9 @@ $("#resultEditTagsPanelWrapper .confirmButton").on("click", async () => {
 
   const responseTagPbs = response.data.tagPbs;
 
-  Notifications.add("Tags updated", 1, 2);
+  Notifications.add("Tags updated", 1, {
+    duration: 2,
+  });
   DB.getSnapshot()?.results?.forEach(
     (result: MonkeyTypes.Result<MonkeyTypes.Mode>) => {
       if (result._id === resultId) {

frontend/src/ts/popups/simple-popups.ts

@@ -540,7 +540,9 @@ list["updatePassword"] = new SimplePopup(
         Notifications.add(
           "New password must contain at least one capital letter, number, a special character and must be between 8 and 64 characters long",
           0,
-          4
+          {
+            duration: 4,
+          }
         );
         return;
       }
@@ -678,7 +680,9 @@ list["deleteAccount"] = new SimplePopup(
       Notifications.add("Deleting login information...", 0);
       await Auth?.currentUser?.delete();
 
-      Notifications.add("Goodbye", 1, 5);
+      Notifications.add("Goodbye", 1, {
+        duration: 5,
+      });
 
       setTimeout(() => {
         location.reload();
@@ -1332,7 +1336,7 @@ list["forgotPassword"] = new SimplePopup(
       );
     } else {
       Loader.hide();
-      Notifications.add("Password reset email sent", 1, 3);
+      Notifications.add("Password reset email sent", 1);
     }
   },
   (thisPopup) => {
@@ -1356,7 +1360,7 @@ $(".pageSettings .section.discordIntegration #unlinkDiscordButton").on(
   "click",
   () => {
     if (!ConnectionState.get()) {
-      Notifications.add("You are offline", 0, 2);
+      Notifications.add("You are offline", 0, { duration: 2 });
       return;
     }
     list["unlinkDiscord"].show();
@@ -1365,7 +1369,7 @@ $(".pageSettings .section.discordIntegration #unlinkDiscordButton").on(
 
 $(".pageSettings #removeGoogleAuth").on("click", () => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, { duration: 2 });
     return;
   }
   list["removeGoogleAuth"].show();
@@ -1373,7 +1377,7 @@ $(".pageSettings #removeGoogleAuth").on("click", () => {
 
 $("#resetSettingsButton").on("click", () => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, { duration: 2 });
     return;
   }
   list["resetSettings"].show();
@@ -1381,7 +1385,7 @@ $("#resetSettingsButton").on("click", () => {
 
 $(".pageSettings #resetPersonalBestsButton").on("click", () => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, { duration: 2 });
     return;
   }
   list["resetPersonalBests"].show();
@@ -1389,7 +1393,7 @@ $(".pageSettings #resetPersonalBestsButton").on("click", () => {
 
 $(".pageSettings #updateAccountName").on("click", () => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, { duration: 2 });
     return;
   }
   list["updateName"].show();
@@ -1397,7 +1401,7 @@ $(".pageSettings #updateAccountName").on("click", () => {
 
 $("#bannerCenter").on("click", ".banner .text .openNameChange", () => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, { duration: 2 });
     return;
   }
   list["updateName"].show();
@@ -1405,7 +1409,7 @@ $("#bannerCenter").on("click", ".banner .text .openNameChange", () => {
 
 $(".pageSettings #addPasswordAuth").on("click", () => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, { duration: 2 });
     return;
   }
   list["addPasswordAuth"].show();
@@ -1413,7 +1417,7 @@ $(".pageSettings #addPasswordAuth").on("click", () => {
 
 $(".pageSettings #emailPasswordAuth").on("click", () => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, { duration: 2 });
     return;
   }
   list["updateEmail"].show();
@@ -1421,7 +1425,7 @@ $(".pageSettings #emailPasswordAuth").on("click", () => {
 
 $(".pageSettings #passPasswordAuth").on("click", () => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, { duration: 2 });
     return;
   }
   list["updatePassword"].show();
@@ -1429,7 +1433,7 @@ $(".pageSettings #passPasswordAuth").on("click", () => {
 
 $(".pageSettings #deleteAccount").on("click", () => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, { duration: 2 });
     return;
   }
   list["deleteAccount"].show();
@@ -1437,7 +1441,7 @@ $(".pageSettings #deleteAccount").on("click", () => {
 
 $(".pageSettings #resetAccount").on("click", () => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, { duration: 2 });
     return;
   }
   list["resetAccount"].show();
@@ -1445,7 +1449,7 @@ $(".pageSettings #resetAccount").on("click", () => {
 
 $(".pageSettings #optOutOfLeaderboardsButton").on("click", () => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, { duration: 2 });
     return;
   }
   list["optOutOfLeaderboards"].show();
@@ -1453,7 +1457,7 @@ $(".pageSettings #optOutOfLeaderboardsButton").on("click", () => {
 
 $("#popups").on("click", "#apeKeysPopup .generateApeKey", () => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, { duration: 2 });
     return;
   }
   list["generateApeKey"].show();
@@ -1464,7 +1468,7 @@ $(".pageSettings").on(
   ".section.themes .customTheme .delButton",
   (e) => {
     if (!ConnectionState.get()) {
-      Notifications.add("You are offline", 0, 2);
+      Notifications.add("You are offline", 0, { duration: 2 });
       return;
     }
     const $parentElement = $(e.currentTarget).parent(".customTheme.button");
@@ -1478,7 +1482,7 @@ $(".pageSettings").on(
   ".section.themes .customTheme .editButton",
   (e) => {
     if (!ConnectionState.get()) {
-      Notifications.add("You are offline", 0, 2);
+      Notifications.add("You are offline", 0, { duration: 2 });
       return;
     }
     const $parentElement = $(e.currentTarget).parent(".customTheme.button");
@@ -1516,7 +1520,7 @@ $("#popups").on(
 
 $("#popups").on("click", "#apeKeysPopup table tbody tr .button.delete", (e) => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, { duration: 2 });
     return;
   }
   const keyId = $(e.target).closest("tr").attr("keyId") as string;
@@ -1525,7 +1529,7 @@ $("#popups").on("click", "#apeKeysPopup table tbody tr .button.delete", (e) => {
 
 $("#popups").on("click", "#apeKeysPopup table tbody tr .button.edit", (e) => {
   if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, 2);
+    Notifications.add("You are offline", 0, { duration: 2 });
     return;
   }
   const keyId = $(e.target).closest("tr").attr("keyId") as string;

frontend/src/ts/popups/video-ad-popup.ts

@@ -12,7 +12,9 @@ export async function show(): Promise<void> {
     Notifications.add(
       "Looks like you're using an adblocker. Video ads will not work until you disable it.",
       0,
-      6
+      {
+        duration: 6,
+      }
     );
     return;
   }
@@ -22,7 +24,9 @@ export async function show(): Promise<void> {
     Notifications.add(
       "Looks like you're using a cookie popup blocker. Video ads will not work without giving your consent through the popup.",
       0,
-      7
+      {
+        duration: 7,
+      }
     );
     return;
   }
@@ -65,7 +69,9 @@ export function egVideoListener(options: Record<string, string>): void {
   } else if (event === "finished") {
     hide();
   } else if (event === "empty") {
-    Notifications.add("Failed to load video ad. Please try again later", -1, 3);
+    Notifications.add("Failed to load video ad. Please try again later", -1, {
+      duration: 3,
+    });
     hide();
   }
 }

frontend/src/ts/states/connection.ts

@@ -23,7 +23,9 @@ function showBanner(): void {
 ConnectionEvent.subscribe((newState) => {
   state = newState;
   if (state) {
-    Notifications.add("You're back online", 1, 3, "Connection");
+    Notifications.add("You're back online", 1, {
+      customTitle: "Connection",
+    });
     if (noInternetBannerId != undefined) {
       $(
         `#bannerCenter .banner[id="${noInternetBannerId}"] .closeButton`

frontend/src/ts/test/funbox/funbox-validation.ts

@@ -139,7 +139,9 @@ export function canSetConfigWithCurrentFunboxes(
           key
         )} to ${value} with currently active funboxes.`,
         0,
-        5
+        {
+          duration: 5,
+        }
       );
     }
     return false;
@@ -178,7 +180,9 @@ export function canSetFunboxWithConfig(
         " "
       )} with currently active config.`,
       0,
-      5
+      {
+        duration: 5,
+      }
     );
     return false;
   } else {

frontend/src/ts/test/test-logic.ts

@@ -402,7 +402,9 @@ export function restart(options = {} as RestartOptions): void {
         Notifications.add(
           `Quick restart disabled in long tests. ${message}`,
           0,
-          4
+          {
+            duration: 4,
+          }
         );
         return;
       }
@@ -1307,7 +1309,9 @@ export async function retrySavingResult(): Promise<void> {
     Notifications.add(
       "Could not retry saving the result as the result no longer exists.",
       0,
-      -1
+      {
+        duration: 5,
+      }
     );
 
     return;
@@ -1569,7 +1573,9 @@ export async function finish(difficultyFailed = false): Promise<void> {
   let tooShort = false;
   //fail checks
   if (difficultyFailed) {
-    Notifications.add(`Test failed - ${failReason}`, 0, 1);
+    Notifications.add(`Test failed - ${failReason}`, 0, {
+      duration: 1,
+    });
     dontSave = true;
   } else if (afkDetected) {
     Notifications.add("Test invalid - AFK detected", 0);
@@ -1659,7 +1665,9 @@ export async function finish(difficultyFailed = false): Promise<void> {
         CustomText.getCustomTextLongProgress(customTextName) +
         TestInput.input.getHistory().length;
       CustomText.setCustomTextLongProgress(customTextName, newProgress);
-      Notifications.add("Long custom text progress saved", 1, 5);
+      Notifications.add("Long custom text progress saved", 1, {
+        duration: 5,
+      });
 
       let newText = CustomText.getCustomText(customTextName, true);
       newText = newText.slice(newProgress);
@@ -1668,7 +1676,9 @@ export async function finish(difficultyFailed = false): Promise<void> {
       // They finished the test
       CustomText.setCustomTextLongProgress(customTextName, 0);
       CustomText.setText(CustomText.getCustomText(customTextName, true));
-      Notifications.add("Long custom text completed", 1, 5);
+      Notifications.add("Long custom text completed", 1, {
+        duration: 5,
+      });
     }
   }
 
@@ -1748,13 +1758,19 @@ async function saveResult(
   isRetrying: boolean
 ): Promise<void> {
   if (!TestState.savingEnabled) {
-    Notifications.add("Result not saved: disabled by user", -1, 3, "Notice");
+    Notifications.add("Result not saved: disabled by user", -1, {
+      duration: 3,
+      customTitle: "Notice",
+    });
     AccountButton.loading(false);
     return;
   }
 
   if (!ConnectionState.get()) {
-    Notifications.add("Result not saved: offline", -1, 2, "Notice");
+    Notifications.add("Result not saved: offline", -1, {
+      duration: 2,
+      customTitle: "Notice",
+    });
     AccountButton.loading(false);
     retrySaving.canRetry = true;
     $("#retrySavingResultButton").removeClass("hidden");

frontend/src/ts/test/test-ui.ts

@@ -27,7 +27,9 @@ const debouncedZipfCheck = debounce(250, () => {
           Config.language.replace(/_/g, " ")
         )} does not support Zipf funbox, because the list is not ordered by frequency. Please try another word list.`,
         0,
-        7
+        {
+          duration: 7,
+        }
       );
     }
     if (supports === "unknown") {
@@ -36,7 +38,9 @@ const debouncedZipfCheck = debounce(250, () => {
           Config.language.replace(/_/g, " ")
         )} may not support Zipf funbox, because we don't know if it's ordered by frequency or not. If you would like to add this label, please contact us.`,
         0,
-        7
+        {
+          duration: 7,
+        }
       );
     }
   });
@@ -471,14 +475,18 @@ export async function screenshot(): Promise<void> {
           })
         );
         await navigator.clipboard.write([clipItem]);
-        Notifications.add("Copied to clipboard", 1, 2);
+        Notifications.add("Copied to clipboard", 1, {
+          duration: 2,
+        });
       } catch (e) {
         console.error("Error while saving image to clipboard", e);
         if (blob) {
           Notifications.add(
             "Could not save image to clipboard. Opening in new tab instead (make sure popups are allowed)",
             0,
-            5
+            {
+              duration: 5,
+            }
           );
           open(URL.createObjectURL(blob));
         } else {
@@ -1160,7 +1168,9 @@ $(".pageTest #copyWordsListButton").on("click", async () => {
         .join(" ");
     }
     await navigator.clipboard.writeText(words);
-    Notifications.add("Copied to clipboard", 0, 2);
+    Notifications.add("Copied to clipboard", 0, {
+      duration: 2,
+    });
   } catch (e) {
     Notifications.add("Could not copy to clipboard: " + e, -1);
   }

frontend/src/ts/utils/url-handler.ts

@@ -172,14 +172,9 @@ export function loadTestSettingsFromUrl(getOverride?: string): void {
   });
 
   if (appliedString !== "") {
-    Notifications.add(
-      "Settings applied from URL:<br><br>" + appliedString,
-      1,
-      10,
-      undefined,
-      undefined,
-      undefined,
-      true
-    );
+    Notifications.add("Settings applied from URL:<br><br>" + appliedString, 1, {
+      duration: 10,
+      allowHTML: true,
+    });
   }
 }