[pull] master from monkeytypegame:master

.oxfmtrc.json

@@ -16,8 +16,27 @@
     "coverage",
     "*.md"
   ],
-  "experimentalTailwindcss": {
-    "stylesheet": "./frontend/src/styles/tailwind.css",
-    "functions": ["cn"]
-  }
+  "overrides": [
+    {
+      "files": ["**/*.tsx"],
+      "options": {
+        "experimentalTailwindcss": {
+          "stylesheet": "./frontend/src/styles/tailwind.css",
+          "attributes": ["cn"],
+          "functions": ["cn"]
+        },
+        "experimentalSortImports": {
+          "groups": [
+            ["side-effect"],
+            ["builtin"],
+            ["external", "external-type"],
+            ["internal", "internal-type"],
+            ["parent", "parent-type"],
+            ["sibling", "sibling-type"],
+            ["index", "index-type"]
+          ]
+        }
+      }
+    }
+  ]
 }

backend/package.json

@@ -80,8 +80,8 @@
     "@vitest/coverage-v8": "4.0.15",
     "concurrently": "8.2.2",
     "openapi3-ts": "2.0.2",
-    "oxlint": "1.39.0",
-    "oxlint-tsgolint": "0.11.0",
+    "oxlint": "1.40.0",
+    "oxlint-tsgolint": "0.11.1",
     "readline-sync": "1.4.10",
     "supertest": "7.1.4",
     "testcontainers": "11.11.0",

frontend/__tests__/components/AnimatedModal.spec.tsx

@@ -1,5 +1,6 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render } from "@solidjs/testing-library";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
 import { AnimatedModal } from "../../src/ts/components/common/AnimatedModal";
 
 describe("AnimatedModal", () => {

frontend/__tests__/components/AsyncContent.spec.tsx

@@ -1,6 +1,7 @@
-import { describe, it, expect } from "vitest";
 import { render, screen, waitFor } from "@solidjs/testing-library";
 import { createResource, Resource } from "solid-js";
+import { describe, it, expect } from "vitest";
+
 import AsyncContent from "../../src/ts/components/common/AsyncContent";
 
 describe("AsyncContent", () => {

frontend/__tests__/components/Button.spec.tsx

@@ -1,5 +1,6 @@
-import { describe, it, expect, vi, afterEach } from "vitest";
 import { render, cleanup } from "@solidjs/testing-library";
+import { describe, it, expect, vi, afterEach } from "vitest";
+
 import { Button } from "../../src/ts/components/common/Button";
 
 describe("Button component", () => {

frontend/__tests__/components/ScrollToTop.spec.tsx

@@ -1,6 +1,7 @@
-import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render } from "@solidjs/testing-library";
 import { userEvent } from "@testing-library/user-event";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
 import { ScrollToTop } from "../../src/ts/components/layout/footer/ScrollToTop";
 import * as CoreSignals from "../../src/ts/signals/core";
 

frontend/package.json

@@ -90,8 +90,8 @@
     "madge": "8.0.0",
     "magic-string": "0.30.17",
     "normalize.css": "8.0.1",
-    "oxlint": "1.39.0",
-    "oxlint-tsgolint": "0.11.0",
+    "oxlint": "1.40.0",
+    "oxlint-tsgolint": "0.11.1",
     "postcss": "8.4.31",
     "sass": "1.70.0",
     "solid-js": "1.9.10",

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/common/AnimatedModal.tsx

@@ -5,7 +5,7 @@ import {
   ParentProps,
   Show,
 } from "solid-js";
-import { applyReducedMotion } from "../../utils/misc";
+
 import { useRefWithUtils } from "../../hooks/useRefWithUtils";
 import {
   hideModal as storeHideModal,
@@ -14,6 +14,7 @@ import {
   isModalChained,
 } from "../../stores/modals";
 import { cn } from "../../utils/cn";
+import { applyReducedMotion } from "../../utils/misc";
 
 type AnimationParams = {
   opacity?: number | [number, number];
@@ -275,13 +276,13 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
       <div class="pointer-events-none flex h-full w-full items-center justify-center">
         <div
           class={cn(
-            "modal rounded-double pointer-events-auto grid h-max max-h-full w-full max-w-md gap-4 overflow-auto bg-bg p-4 text-text ring-4 ring-sub-alt sm:p-8",
+            "modal rounded-double bg-bg text-text ring-sub-alt pointer-events-auto grid h-max max-h-full w-full max-w-md gap-4 overflow-auto p-4 ring-4 sm:p-8",
             props.modalClass,
           )}
           ref={modalRef}
         >
           <Show when={props.title !== undefined && props.title !== ""}>
-            <div class="text-2xl text-sub">{props.title}</div>
+            <div class="text-sub text-2xl">{props.title}</div>
           </Show>
           {props.children}
         </div>

frontend/src/ts/components/common/AsyncContent.tsx

@@ -1,6 +1,8 @@
 import { ErrorBoundary, JSXElement, Resource, Show, Suspense } from "solid-js";
-import { createErrorMessage } from "../../utils/misc";
+
 import * as Notifications from "../../elements/notifications";
+import { createErrorMessage } from "../../utils/misc";
+
 import { Conditional } from "./Conditional";
 
 export default function AsyncContent<T>(
@@ -48,7 +50,7 @@ export default function AsyncContent<T>(
         return (
           <>
             <Show when={p.showLoader && props.resource.loading}>
-              <div class="preloader p-4 text-center text-2xl text-main">
+              <div class="preloader text-main p-4 text-center text-2xl">
                 <i class="fas fa-fw fa-spin fa-circle-notch"></i>
               </div>
             </Show>
@@ -62,7 +64,7 @@ export default function AsyncContent<T>(
         >
           <Suspense
             fallback={
-              <div class="preloader p-4 text-center text-2xl text-main">
+              <div class="preloader text-main p-4 text-center text-2xl">
                 <i class="fas fa-fw fa-spin fa-circle-notch"></i>
               </div>
             }

frontend/src/ts/components/common/Button.tsx

@@ -1,4 +1,5 @@
 import { JSXElement, Show } from "solid-js";
+
 import { Conditional } from "./Conditional";
 
 type BaseProps = {