[pull] master from monkeytypegame:master

backend/package.json

@@ -45,7 +45,7 @@
     "mjml": "4.15.0",
     "mongodb": "6.3.0",
     "mustache": "4.2.0",
-    "nodemailer": "8.0.10",
+    "nodemailer": "8.0.11",
     "object-hash": "3.0.0",
     "prom-client": "15.1.3",
     "rate-limiter-flexible": "5.0.3",
@@ -69,7 +69,7 @@
     "@types/mjml": "4.7.4",
     "@types/mustache": "4.2.2",
     "@types/node": "24.9.1",
-    "@types/nodemailer": "8.0.0",
+    "@types/nodemailer": "8.0.1",
     "@types/object-hash": "3.0.6",
     "@types/readline-sync": "1.4.8",
     "@types/string-similarity": "4.0.2",

frontend/package.json

@@ -38,11 +38,11 @@
     "@solid-primitives/transition-group": "1.1.2",
     "@solidjs/meta": "0.29.4",
     "@tanstack/pacer-lite": "0.2.2",
-    "@tanstack/query-db-collection": "1.0.38",
-    "@tanstack/solid-db": "0.2.21",
+    "@tanstack/query-db-collection": "1.0.40",
+    "@tanstack/solid-db": "0.2.22",
     "@tanstack/solid-form": "1.33.0",
     "@tanstack/solid-hotkeys": "0.10.0",
-    "@tanstack/solid-query": "5.100.14",
+    "@tanstack/solid-query": "5.101.0",
     "@tanstack/solid-table": "8.21.3",
     "@ts-rest/core": "3.52.1",
     "animejs": "4.2.2",
@@ -66,7 +66,7 @@
     "object-hash": "3.0.0",
     "slim-select": "2.9.2",
     "stemmer": "2.0.1",
-    "tailwind-merge": "3.4.0",
+    "tailwind-merge": "3.6.0",
     "throttle-debounce": "5.0.2",
     "zod": "3.23.8",
     "zod-urlsearchparams": "0.0.16"
@@ -80,15 +80,15 @@
     "@solid-devtools/overlay": "0.33.5",
     "@solidjs/testing-library": "0.8.10",
     "@tailwindcss/vite": "4.2.1",
-    "@tanstack/eslint-plugin-query": "5.100.3",
-    "@tanstack/solid-devtools": "0.8.2",
-    "@tanstack/solid-hotkeys-devtools": "0.6.6",
-    "@tanstack/solid-query-devtools": "5.100.3",
+    "@tanstack/eslint-plugin-query": "5.101.0",
+    "@tanstack/solid-devtools": "0.8.5",
+    "@tanstack/solid-hotkeys-devtools": "0.7.0",
+    "@tanstack/solid-query-devtools": "5.101.0",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/user-event": "14.6.1",
     "@types/canvas-confetti": "1.9.0",
-    "@types/chartjs-plugin-trendline": "1.0.1",
+    "@types/chartjs-plugin-trendline": "1.0.4",
     "@types/damerau-levenshtein": "1.0.2",
     "@types/howler": "2.2.7",
     "@types/node": "24.9.1",

frontend/src/404.html

@@ -162,7 +162,19 @@ <h1 class="text">
         </a>
       </header>
       <main style="height: 100%">
-        <load src="html/pages/404.html" />
+        <div class="page page404 hidden" id="page404">
+          <div class="content">
+            <div class="image"></div>
+            <div class="side">
+              <div class="title">404</div>
+              <div>Ooops! Looks like this page or resource doesn't exist.</div>
+              <a href="/" class="button" router-link>
+                <i class="fas fa-home"></i>
+                Go Home
+              </a>
+            </div>
+          </div>
+        </div>
       </main>
     </div>
   </body>

frontend/src/html/pages/test.html

@@ -45,12 +45,18 @@
         data-gramm="false"
         data-gramm_editor="false"
         data-enable-grammarly="false"
+        data-bwignore
+        data-1p-ignore
+        data-lpignore="true"
+        data-form-type="other"
         list="autocompleteOff"
         spellcheck="false"
       ></textarea>
       <div class="outOfFocusWarning hidden">
-        <i class="fas fa-fw fa-mouse-pointer"></i>
-        Click here or press any key to focus
+        <div>
+          <i class="fas fa-fw fa-mouse-pointer"></i>
+        </div>
+        <div class="text">Click here or press any key to focus</div>
       </div>
       <div id="paceCaret" class="full-width default hidden"></div>
       <div id="caret" class="full-width default"></div>

frontend/src/index.html

@@ -56,7 +56,11 @@
         </div>
 
         <load src="html/pages/test.html" />
-        <load src="html/pages/404.html" />
+
+        <div class="page page404 hidden" id="page404">
+          <mount data-component="notfoundpage"></mount>
+        </div>
+
         <load src="html/pages/account-settings.html" />
 
         <div class="page pageFriends hidden" id="pageFriends">

frontend/src/styles/index.scss

@@ -16,7 +16,7 @@
 }
 
 @layer custom-styles {
-  @import "buttons", "404", "ads", "test-activity", "animations", "caret",
+  @import "buttons", "ads", "test-activity", "animations", "caret",
     "commandline", "core", "fonts", "inputs", "keymap", "monkey", "popups",
     "scroll", "account-settings", "test", "loading", "media-queries";
 

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

@@ -4,13 +4,6 @@
   .content-grid {
     --content-max-width: 640px;
   }
-  .page404 {
-    .content {
-      grid-template-columns: 300px;
-      grid-auto-flow: unset;
-      gap: 1rem;
-    }
-  }
   .pageTest {
     #liveStatsTextTop,
     #liveStatsTextBottom {

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

@@ -2,13 +2,6 @@
 @use "./media.scss" as *;
 
 @include media-query(brown) {
-  .page404 {
-    .content {
-      grid-template-columns: 1fr;
-      grid-auto-flow: unset;
-      gap: 1rem;
-    }
-  }
   .pageTest {
     #result .wrapper {
       grid-template-columns: 1fr;

frontend/src/styles/test.scss

@@ -691,6 +691,7 @@
   // and holy shit do not use white-space: nowrap here because the hellspawn that is safari
   // is TRIMMING the value on focus when using that (and the input system relies on a leading space)
   text-wrap-mode: nowrap;
+  contain: strict;
 }
 
 #capsWarning {
@@ -1381,6 +1382,10 @@
     opacity: 0;
   }
   .outOfFocusWarning {
+    display: flex;
+    place-content: center;
+    align-items: center;
+    gap: 0.5em;
     text-align: center;
     height: 100%;
     align-content: center;

frontend/src/ts/collections/custom-themes.ts

@@ -29,6 +29,7 @@ export function useCustomThemesLiveQuery() {
 const customThemesCollection = createCollection(
   queryCollectionOptions({
     staleTime: Infinity,
+    gcTime: Infinity, //remove when __nonReactive is removed
     startSync: true,
     queryKey: queryKeys.root(),
     queryClient,
@@ -42,11 +43,6 @@ const customThemesCollection = createCollection(
           `Error fetching custom themes: ${response.body.message}`,
         );
       }
-
-      if (_keepAlive === null) {
-        _keepAlive = useCustomThemesLiveQuery();
-      }
-
       return response.body.data.map(applyIdWorkaround);
     },
   }),
@@ -177,10 +173,3 @@ export const __nonReactive = {
   getCustomThemes,
   getCustomTheme,
 };
-
-/**
- * The collection gets cleaned up after a while.
- * Keeping a query active fixes that. Remove when removing __nonReactive
- */
-// oxlint-disable-next-line typescript/no-explicit-any
-let _keepAlive: any = null;

frontend/src/ts/collections/presets.ts

@@ -32,6 +32,7 @@ export function usePresetsLiveQuery() {
 const presetsCollection = createCollection(
   queryCollectionOptions({
     staleTime: Infinity,
+    gcTime: Infinity, //remove when __nonReactive is removed
     queryKey: queryKeys.root(),
     queryClient,
     enabled: isAuthenticated,
@@ -204,9 +205,3 @@ export const __nonReactive = {
   getPresets,
   getPreset,
 };
-
-/**
- * The collection gets cleaned up after a while.
- * Keeping a query active fixes that. Remove when removing __nonReactive
- */
-const _keepAlive = usePresetsLiveQuery();

frontend/src/ts/collections/results.ts

@@ -218,6 +218,7 @@ function normalizeResult(
 const resultsCollection = createCollection(
   queryCollectionOptions({
     staleTime: Infinity,
+    gcTime: Infinity, //remove when __nonReactive is removed
     queryKey: queryKeys.root(),
     enabled: isAuthenticated,
     queryFn: async () => {
@@ -243,13 +244,6 @@ const resultsCollection = createCollection(
         );
         setLastResult(lastResult);
       }
-
-      if (_keepAlive === null) {
-        _keepAlive = useLiveQuery((q) =>
-          q.from({ results: resultsCollection }),
-        );
-      }
-
       return results;
     },
     queryClient,
@@ -718,10 +712,3 @@ function getResults(): SnapshotResult<Mode>[] {
 export const __nonReactive = {
   getResults,
 };
-
-/**
- * The collection gets cleaned up after a while.
- * Keeping a query active fixes that. Remove when removing __nonReactive
- */
-// oxlint-disable-next-line typescript/no-explicit-any
-let _keepAlive: any = null;

frontend/src/ts/collections/tags.ts

@@ -36,6 +36,7 @@ const queryKeys = {
 const tagsCollection = createCollection(
   queryCollectionOptions({
     staleTime: Infinity,
+    gcTime: Infinity, //remove when __nonReactive is removed
     queryKey: queryKeys.root(),
     queryClient,
     enabled: isAuthenticated,
@@ -570,9 +571,3 @@ export const __nonReactive = {
   getTag,
   getActiveTags,
 };
-
-/**
- * The collection gets cleaned up after a while.
- * Keeping a query active fixes that. Remove when removing __nonReactive
- */
-const _keepAlive = useTagsLiveQuery();

frontend/src/ts/components/modals/CustomTestDurationModal.tsx

@@ -57,6 +57,7 @@ export function CustomTestDurationModal(): JSXElement {
     <AnimatedModal
       id="TestDuration"
       title="Test Duration"
+      focusFirstInput="focusAndSelect"
       beforeShow={() => {
         form.reset({ duration: getConfig.time.toString() });
       }}

frontend/src/ts/components/mount.tsx

@@ -11,6 +11,7 @@ import { Footer } from "./layout/footer/Footer";
 import { Header } from "./layout/header/Header";
 import { Overlays } from "./layout/overlays/Overlays";
 import { Modals } from "./modals/Modals";
+import { NotFoundPage } from "./pages/404Page";
 import { AboutPage } from "./pages/AboutPage";
 import { BlockedUsers } from "./pages/account-settings/BlockedUsers";
 import { AccountPage } from "./pages/account/AccountPage";
@@ -46,6 +47,7 @@ const components: Record<string, () => JSXElement> = {
   testmodesnotice: () => <TestModesNotice />,
   friendspage: () => <FriendsPage />,
   blockedusers: () => <BlockedUsers />,
+  notfoundpage: () => <NotFoundPage />,
 };
 
 function mountToMountpoint(name: string, component: () => JSXElement): void {

frontend/src/ts/components/pages/404Page.tsx

@@ -0,0 +1,32 @@
+import { Button } from "../common/Button";
+import { H2 } from "../common/Headers";
+import { Page } from "../common/Page";
+
+export function NotFoundPage() {
+  return (
+    <Page id="404">
+      <div class="flex h-full items-center justify-center">
+        <div class="flex flex-col gap-16 md:flex-row">
+          <div class="place-self-center">
+            <img src="/images/monkeymeme.jpg" class="rounded-xl" />
+          </div>
+          <div class="flex max-w-md flex-col items-center gap-4">
+            <H2 text="404" class="pb-0 text-7xl text-main" />
+            <p class="text-center">
+              Ooops! Looks like this page
+              <br />
+              or resource doesn&apos;t exist.
+            </p>
+            <Button
+              fa={{ icon: "fa-home" }}
+              text="Go Home"
+              router-link
+              href="/"
+              class="px-8 py-4"
+            />
+          </div>
+        </div>
+      </div>
+    </Page>
+  );
+}