[pull] master from monkeytypegame:master

CLAUDE.md

@@ -0,0 +1,4 @@
+Be extremely concise. Sacrifice grammar for concision.
+Frontend is partially migrated from vanilla JS to SolidJS — new components use `.tsx`, legacy code remains vanilla.
+Run `pnpm run lint` when checking for linting OR typescript errors with oxlint. 
+Single test file: `pnpm vitest run path/to/test.ts`

frontend/__tests__/components/common/Button.spec.tsx

@@ -172,44 +172,6 @@ describe("Button component", () => {
     expect(child).toHaveTextContent("Child");
   });
 
-  it("applies custom class list when classList prop is provided", () => {
-    const { container } = render(() => (
-      <Button
-        onClick={() => {
-          //
-        }}
-        text="Hello"
-        classList={{
-          customTrue: true,
-          customFalse: false,
-          customUndefined: undefined,
-        }}
-      />
-    ));
-
-    const button = container.querySelector("button");
-    expect(button).toHaveClass("customTrue");
-    expect(button).not.toHaveClass("customFalse");
-    expect(button).not.toHaveClass("customUndefined");
-  });
-
-  it("applies active", () => {
-    const { container } = render(() => (
-      <Button
-        onClick={() => {
-          //
-        }}
-        text="Hello"
-        active
-      />
-    ));
-
-    const button = container.querySelector("button");
-    expect(button).toHaveClass("bg-main");
-    expect(button).toHaveClass("text-bg");
-    expect(button).toHaveClass("hover:bg-text");
-  });
-
   it("applies aria-label to button provided as text", () => {
     const { container } = render(() => (
       <Button

frontend/__tests__/root/config.spec.ts

@@ -10,7 +10,6 @@ import * as FunboxValidation from "../../src/ts/test/funbox/funbox-validation";
 import * as ConfigValidation from "../../src/ts/config-validation";
 import * as ConfigEvent from "../../src/ts/observables/config-event";
 import * as ApeConfig from "../../src/ts/ape/config";
-import * as AccountButton from "../../src/ts/elements/account-button";
 import * as Notifications from "../../src/ts/elements/notifications";
 const { replaceConfig, getConfig } = Config.__testing;
 
@@ -32,7 +31,6 @@ describe("Config", () => {
     );
     const dispatchConfigEventMock = vi.spyOn(ConfigEvent, "dispatch");
     const dbSaveConfigMock = vi.spyOn(ApeConfig, "saveConfig");
-    const accountButtonLoadingMock = vi.spyOn(AccountButton, "loading");
     const notificationAddMock = vi.spyOn(Notifications, "add");
     const miscReloadAfterMock = vi.spyOn(Misc, "reloadAfter");
     const miscTriggerResizeMock = vi.spyOn(Misc, "triggerResize");
@@ -42,7 +40,6 @@ describe("Config", () => {
       isConfigValueValidMock,
       dispatchConfigEventMock,
       dbSaveConfigMock,
-      accountButtonLoadingMock,
       notificationAddMock,
       miscReloadAfterMock,
       miscTriggerResizeMock,
@@ -182,14 +179,8 @@ describe("Config", () => {
       //wait for debounce
       await vi.advanceTimersByTimeAsync(2500);
 
-      //show loading
-      expect(accountButtonLoadingMock).toHaveBeenNthCalledWith(1, true);
-
       //save
       expect(dbSaveConfigMock).toHaveBeenCalledWith({ numbers: true });
-
-      //hide loading
-      expect(accountButtonLoadingMock).toHaveBeenNthCalledWith(2, false);
     });
 
     it("saves configOverride values to localstorage if nosave=false", async () => {
@@ -224,7 +215,6 @@ describe("Config", () => {
       //wait for debounce
       await vi.advanceTimersByTimeAsync(2500);
 
-      expect(accountButtonLoadingMock).not.toHaveBeenCalled();
       expect(dbSaveConfigMock).not.toHaveBeenCalled();
     });
 

frontend/src/html/head.html

@@ -39,6 +39,7 @@
       --error-extra-color: #7e2a33;
       --colorful-error-color: #ca4754;
       --colorful-error-extra-color: #7e2a33;
+      --nav-focus-opacity: 0;
     }
   </style>
   <link

frontend/src/index.html

@@ -27,7 +27,7 @@
     </div>
     <!-- <div id="div-gpt-ad-mkt-0" style="height: 100vh"></div> -->
     <div id="app" class="content-grid focus hidden">
-      <load src="html/header.html" />
+      <mount data-component="header"></mount>
       <main class="full-width content-grid" style="height: 100%">
         <div id="ad-vertical-left-wrapper" class="ad advertisement ad-v focus">
           <div class="icon"><i class="fas fa-ad"></i></div>

frontend/src/styles/index.scss

@@ -18,7 +18,7 @@
 @layer custom-styles {
   @import "buttons", "404", "ads", "account", "animations", "caret",
     "commandline", "core", "fonts", "inputs", "keymap", "login", "monkey",
-    "nav", "notifications", "popups", "scroll", "settings", "account-settings",
+    "notifications", "popups", "scroll", "settings", "account-settings",
     "leaderboards", "test", "loading", "friends", "media-queries";
 
   .chartCanvas {

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

@@ -18,15 +18,6 @@
       }
     }
   }
-  header {
-    nav {
-      .textButton.view-account {
-        .text {
-          display: none;
-        }
-      }
-    }
-  }
   .page404 {
     .content {
       grid-template-columns: 300px;

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

@@ -2,13 +2,6 @@
 @use "./media.scss" as *;
 
 @include media-query(brown) {
-  header {
-    nav {
-      font-size: 0.8rem;
-      line-height: 0.8rem;
-      gap: 0.1rem;
-    }
-  }
   .page404 {
     .content {
       grid-template-columns: 1fr;

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

@@ -14,10 +14,4 @@
       display: none;
     }
   }
-  header {
-    gap: 0.25rem;
-    nav .textButton {
-      padding: 0.5em 0.25em;
-    }
-  }
 }

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

@@ -8,21 +8,6 @@
     font-size: 0.7rem;
     --horizontalPadding: 0.6em;
   }
-  header {
-    #logo {
-      .text {
-        font-size: 1.5rem;
-        .top {
-          display: none;
-        }
-      }
-    }
-    nav {
-      .textButton.view-account {
-        gap: 0.5em;
-      }
-    }
-  }
   .pageAccountSettings .main {
     gap: 2rem;
     .right .tab .section {

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

@@ -39,24 +39,6 @@
       }
     }
   }
-  header {
-    nav {
-      font-size: 0.9rem;
-      line-height: 0.9rem;
-      gap: 0.25rem;
-      .view-account {
-        .text {
-          display: none;
-        }
-      }
-    }
-    #logo {
-      grid-template-columns: 1fr;
-      .text {
-        display: none;
-      }
-    }
-  }
   .pageLogin {
     flex-direction: column;
     gap: 4rem;