fix: maintenance banner is blocked by ublock (fehmer) (#5413)

* fix: maintenance banner is blocked by ublock (fehmer)

* use addPsa for all non-ad banners

frontend/src/styles/banners.scss

@@ -3,7 +3,8 @@
   width: 100%;
   z-index: 1000;
   transition: opacity 0.25s;
-  .banner {
+  .banner,
+  .psa {
     background: var(--sub-color);
     color: var(--bg-color);
     justify-content: center;

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

@@ -148,7 +148,7 @@ async function getDataAndInit(): Promise<boolean> {
     });
 
   if (snapshot.needsToChangeName) {
-    Notifications.addBanner(
+    Notifications.addPSA(
       "You need to update your account name. <a class='openNameChange'>Click here</a> to change it and learn more about why.",
       -1,
       undefined,

frontend/src/ts/elements/notifications.ts

@@ -13,9 +13,10 @@ function updateMargin(): void {
 
 let visibleStickyNotifications = 0;
 let id = 0;
+type NotificationType = "notification" | "banner" | "psa";
 class Notification {
   id: number;
-  type: string;
+  type: NotificationType;
   message: string;
   level: number;
   important: boolean;
@@ -24,7 +25,7 @@ class Notification {
   customIcon?: string;
   closeCallback: () => void;
   constructor(
-    type: string,
+    type: NotificationType,
     message: string,
     level: number,
     important: boolean | undefined,
@@ -152,7 +153,7 @@ class Notification {
       $(`#notificationCenter .notif[id='${this.id}']`).on("hover", () => {
         $(`#notificationCenter .notif[id='${this.id}']`).toggleClass("hover");
       });
-    } else if (this.type === "banner") {
+    } else if (this.type === "banner" || this.type === "psa") {
       let leftside = `<div class="icon lefticon">${icon}</div>`;
 
       let withImage = false;
@@ -162,7 +163,7 @@ class Notification {
       }
 
       $("#bannerCenter").prepend(`
-        <div class="banner ${cls} content-grid ${
+        <div class="${this.type} ${cls} content-grid ${
         withImage ? "withImage" : ""
       }" id="${this.id}">
         <div class="container">
@@ -301,6 +302,29 @@ export function addBanner(
   return banner.id;
 }
 
+export function addPSA(
+  message: string,
+  level = -1,
+  customIcon = "bullhorn",
+  sticky = false,
+  closeCallback?: () => void,
+  allowHTML?: boolean
+): number {
+  const psa = new Notification(
+    "psa",
+    message,
+    level,
+    false,
+    sticky ? -1 : 0,
+    undefined,
+    customIcon,
+    closeCallback,
+    allowHTML
+  );
+  psa.show();
+  return psa.id;
+}
+
 export function clearAllNotifications(): void {
   $("#notificationCenter .notif").remove();
   visibleStickyNotifications = 0;

frontend/src/ts/elements/psa.ts

@@ -24,14 +24,14 @@ async function getLatest(): Promise<SharedTypes.PSA[] | null> {
 
   if (response.status === 500) {
     if (isDevEnvironment()) {
-      Notifications.addBanner(
+      Notifications.addPSA(
         "Dev Info: Backend server not running",
         0,
         "exclamation-triangle",
         false
       );
     } else {
-      Notifications.addBanner(
+      Notifications.addPSA(
         "Looks like the server is experiencing maintenance or some unexpected down time.<br>Check the <a target= '_blank' href='https://monkeytype.instatus.com/'>status page</a> or <a target= '_blank' href='https://twitter.com/monkeytypegame'>Twitter</a> for more information.",
         -1,
         "exclamation-triangle",
@@ -43,7 +43,7 @@ async function getLatest(): Promise<SharedTypes.PSA[] | null> {
 
     return null;
   } else if (response.status === 503) {
-    Notifications.addBanner(
+    Notifications.addPSA(
       "Server is currently under maintenance. <a target= '_blank' href='https://monkeytype.instatus.com/'>Check the status page</a> for more info.",
       -1,
       "bullhorn",
@@ -95,7 +95,7 @@ export async function show(): Promise<void> {
       return;
     }
 
-    Notifications.addBanner(
+    Notifications.addPSA(
       psa.message,
       psa.level,
       "bullhorn",

frontend/src/ts/firebase.ts

@@ -30,7 +30,7 @@ try {
   Auth = undefined;
   console.error("Authentication failed to initialize", e);
   if (isDevEnvironment()) {
-    Notifications.addBanner(
+    Notifications.addPSA(
       createErrorMessage(e, "Authentication uninitialized") +
         " Check your firebase-config.ts",
       0,

frontend/src/ts/states/connection.ts

@@ -16,7 +16,7 @@ let bannerAlreadyClosed = false;
 export function showOfflineBanner(): void {
   if (bannerAlreadyClosed) return;
   if (noInternetBannerId === undefined) {
-    noInternetBannerId = Notifications.addBanner(
+    noInternetBannerId = Notifications.addPSA(
       "No internet connection",
       0,
       "exclamation-triangle",