refactor: convert banners and psas to solidjs (@miodec)

frontend/src/index.html

@@ -7,7 +7,6 @@
     <div id="mediaQueryDebug"></div>
     <load src="html/warnings.html" />
     <div class="customBackground"></div>
-    <div id="bannerCenter" class="focus"></div>
     <div id="notificationCenter">
       <div class="clearAll button hidden">
         <i class="fas fa-times"></i>

frontend/src/styles/index.scss

@@ -24,9 +24,9 @@
 }
 
 @layer custom-styles {
-  @import "buttons", "fonts", "404", "ads", "account", "animations", "banners",
-    "caret", "commandline", "core", "inputs", "keymap", "login", "monkey",
-    "nav", "notifications", "popups", "profile", "scroll", "settings",
+  @import "buttons", "fonts", "404", "ads", "account", "animations", "caret",
+    "commandline", "core", "inputs", "keymap", "login", "monkey", "nav",
+    "notifications", "popups", "profile", "scroll", "settings",
     "account-settings", "leaderboards", "test", "loading", "friends",
     "media-queries";
 

frontend/src/styles/media-queries-blue.scss

@@ -24,17 +24,6 @@
       }
     }
   }
-  #bannerCenter {
-    font-size: 0.85rem;
-    .banner.withImage {
-      .image {
-        display: none;
-      }
-      .lefticon {
-        display: block;
-      }
-    }
-  }
   header {
     nav {
       .textButton.view-account {

frontend/src/styles/media-queries-green.scss

@@ -14,14 +14,6 @@
     font-size: 0.7rem;
     --horizontalPadding: 0.6em;
   }
-  #bannerCenter {
-    font-size: 0.85rem;
-    .banner .container {
-      .closeButton {
-        padding: 0.4em;
-      }
-    }
-  }
   header {
     #logo {
       .text {

frontend/src/ts/ape/adapters/ts-rest-adapter.ts

@@ -10,7 +10,7 @@ import {
   COMPATIBILITY_CHECK,
   COMPATIBILITY_CHECK_HEADER,
 } from "@monkeytype/contracts";
-import * as Notifications from "../../elements/notifications";
+import { addBanner } from "../../stores/banners";
 
 let bannerShownThisSession = false;
 
@@ -63,9 +63,12 @@ function buildApi(timeout: number): (args: ApiFetcherArgs) => Promise<{
         if (backendCheck !== COMPATIBILITY_CHECK) {
           const message =
             backendCheck > COMPATIBILITY_CHECK
-              ? `Looks like the client and server versions are mismatched (backend is newer). Please <a onClick="location.reload(true)">refresh</a> the page.`
+              ? `Looks like the client and server versions are mismatched (backend is newer). Please refresh the page.`
               : `Looks like our monkeys didn't deploy the new server version correctly. If this message persists contact support.`;
-          Notifications.addPSA(message, 1, undefined, false, undefined, true);
+          addBanner({
+            level: "error",
+            text: message,
+          });
           bannerShownThisSession = true;
         }
       }

frontend/src/ts/auth.ts → frontend/src/ts/auth.tsx

@@ -1,11 +1,4 @@
-import Ape from "./ape";
-import * as Notifications from "./elements/notifications";
-import Config, { applyConfig, saveFullConfigToLocalStorage } from "./config";
-import * as Misc from "./utils/misc";
-import * as DB from "./db";
-import { showLoaderBar, hideLoaderBar } from "./signals/loader-bar";
-import * as LoginPage from "./pages/login";
-import * as RegisterCaptchaModal from "./modals/register-captcha";
+import { tryCatch } from "@monkeytype/util/trycatch";
 import {
   GoogleAuthProvider,
   GithubAuthProvider,
@@ -14,6 +7,12 @@ import {
   User as UserType,
   AuthProvider,
 } from "firebase/auth";
+
+import Ape from "./ape";
+import Config, { applyConfig, saveFullConfigToLocalStorage } from "./config";
+import { navigate } from "./controllers/route-controller";
+import * as DB from "./db";
+import * as Notifications from "./elements/notifications";
 import {
   isAuthAvailable,
   getAuthenticatedUser,
@@ -24,13 +23,17 @@ import {
   signInWithPopup,
   resetIgnoreAuthCallback,
 } from "./firebase";
+import * as RegisterCaptchaModal from "./modals/register-captcha";
+import { showPopup } from "./modals/simple-modals-base";
+import * as AuthEvent from "./observables/auth-event";
+import * as LoginPage from "./pages/login";
+import * as Sentry from "./sentry";
+import { showLoaderBar, hideLoaderBar } from "./signals/loader-bar";
 import * as ConnectionState from "./states/connection";
-import { navigate } from "./controllers/route-controller";
+import { addBanner } from "./stores/banners";
 import { getActiveFunboxesWithFunction } from "./test/funbox/list";
-import * as Sentry from "./sentry";
-import { tryCatch } from "@monkeytype/util/trycatch";
-import * as AuthEvent from "./observables/auth-event";
 import { qs, qsa } from "./utils/dom";
+import * as Misc from "./utils/misc";
 
 export const gmailProvider = new GoogleAuthProvider();
 export const githubProvider = new GithubAuthProvider();
@@ -69,14 +72,26 @@ async function getDataAndInit(): Promise<boolean> {
 
     void Sentry.setUser(snapshot.uid, snapshot.name);
     if (snapshot.needsToChangeName) {
-      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,
-        true,
-        undefined,
-        true,
-      );
+      addBanner({
+        level: "error",
+        icon: "fas fa-exclamation-triangle",
+        customContent: (
+          <>
+            You need to update your account name.{" "}
+            <button
+              type="button"
+              class="px-2 py-1"
+              onClick={() => {
+                showPopup("updateName");
+              }}
+            >
+              Click here
+            </button>{" "}
+            to change it and learn more about why.
+          </>
+        ),
+        important: true,
+      });
     }
 
     const areConfigsEqual =

frontend/src/ts/components/layout/overlays/Banners.tsx

@@ -0,0 +1,108 @@
+import {
+  createEffect,
+  For,
+  JSXElement,
+  on,
+  onCleanup,
+  onMount,
+} from "solid-js";
+import { debounce } from "throttle-debounce";
+
+import { useRefWithUtils } from "../../../hooks/useRefWithUtils";
+import { setGlobalOffsetTop } from "../../../signals/core";
+import {
+  Banner as BannerType,
+  getBanners,
+  removeBanner,
+} from "../../../stores/banners";
+import { cn } from "../../../utils/cn";
+import { Conditional } from "../../common/Conditional";
+
+function Banner(props: BannerType): JSXElement {
+  const remove = (): void => {
+    // document.startViewTransition(() => {
+    removeBanner(props.id);
+    // });
+  };
+  const icon = (): string =>
+    props.icon === undefined || props.icon === ""
+      ? "fa fa-fw fa-bullhorn"
+      : props.icon;
+
+  return (
+    <div
+      class={cn(
+        "content-grid text-bg [&_a]:text-bg [&_a]:hover:text-text w-full [&_a]:underline",
+        {
+          "bg-error": props.level === "error",
+          "bg-sub": props.level === "notice",
+          "bg-main": props.level === "success",
+        },
+      )}
+    >
+      <div class="flex w-full justify-between gap-2">
+        <Conditional
+          if={props.imagePath !== undefined}
+          then={
+            <>
+              <img
+                src={props.imagePath}
+                alt="Banner Image"
+                class="hidden aspect-6/1 h-full max-h-9 self-center xl:block"
+              />
+              <i class={`self-center ${icon()} xl:hidden`}></i>
+            </>
+          }
+          else={<i class={`self-center ${icon()}`}></i>}
+        />
+        <Conditional
+          if={props.customContent !== undefined}
+          then={<div class="self-center p-2">{props.customContent}</div>}
+          else={<div class="self-center p-2">{props.text}</div>}
+        />
+        <Conditional
+          if={props.important === true}
+          then={<i class={`self-center ${icon()}`}></i>}
+          else={
+            <button
+              type="button"
+              class="text text-bg hover:text-text -mr-2 self-center"
+              onClick={() => {
+                remove();
+              }}
+            >
+              <i class="fas fa-fw fa-times"></i>
+            </button>
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
+export function Banners(): JSXElement {
+  const [ref, element] = useRefWithUtils();
+
+  const updateMargin = (): void => {
+    const height = element()?.getOffsetHeight() ?? 0;
+    setGlobalOffsetTop(height);
+  };
+
+  const debouncedMarginUpdate = debounce(100, updateMargin);
+
+  onMount(() => {
+    window.addEventListener("resize", debouncedMarginUpdate);
+  });
+
+  onCleanup(() => {
+    window.removeEventListener("resize", debouncedMarginUpdate);
+  });
+
+  createEffect(on(() => getBanners().length, updateMargin));
+
+  return (
+    <div ref={ref} class="fixed top-0 left-0 z-[1000] w-full">
+      <For each={getBanners()}>{(banner) => <Banner {...banner} />}</For>
+    </div>
+  );
+}

frontend/src/ts/components/layout/overlays/Overlays.tsx

@@ -2,12 +2,14 @@ import { JSXElement } from "solid-js";
 
 import { TailwindMediaQueryDebugger } from "../../utils/TailwindMediaQueryDebugger";
 
+import { Banners } from "./Banners";
 import { FpsCounter } from "./FpsCounter";
 import { LoaderBar } from "./LoaderBar";
 
 export function Overlays(): JSXElement {
   return (
     <>
+      <Banners />
       <TailwindMediaQueryDebugger />
       <LoaderBar />
       <FpsCounter />