[pull] master from monkeytypegame:master

backend/src/utils/error.ts

@@ -8,18 +8,16 @@ type FirebaseErrorParent = {
   errorInfo: FirebaseError;
 };
 
-// oxlint-disable-next-line no-explicit-any
-export function isFirebaseError(err: any): err is FirebaseErrorParent {
+export function isFirebaseError(err: unknown): err is FirebaseErrorParent {
   return (
+    err !== null &&
     typeof err === "object" &&
     "code" in err &&
     "errorInfo" in err &&
     "codePrefix" in err &&
-    // oxlint-disable-next-line no-unsafe-member-access
     typeof err.errorInfo === "object" &&
-    // oxlint-disable-next-line no-unsafe-member-access
+    err.errorInfo !== null &&
     "code" in err.errorInfo &&
-    // oxlint-disable-next-line no-unsafe-member-access
     "message" in err.errorInfo
   );
 }

docs/CONTRIBUTING.md

@@ -13,7 +13,7 @@
 
 ## Getting Started
 
-When contributing to Monkeytype, it's good to know our best practices, tips, and tricks. First, Monkeytype is written in ~~JavaScript~~ TypeScript, HTML, and CSS (in order of language usage within the project); thus, we assume you are comfortable with these languages or have basic knowledge of them. Our backend is in NodeJS and we use MongoDB to store our user data. Firebase is used for authentication. Redis is used to store ephemeral data (daily leaderboards, jobs via BullMQ, OAuth state parameters). Furthermore, we use Prettier to format our code.
+When contributing to Monkeytype, it's good to know our best practices, tips, and tricks. First, Monkeytype is written in ~~JavaScript~~ TypeScript, HTML, and CSS (in order of language usage within the project); thus, we assume you are comfortable with these languages or have basic knowledge of them. Our backend is in NodeJS and we use MongoDB to store our user data. Firebase is used for authentication. Redis is used to store ephemeral data (daily leaderboards, jobs via BullMQ, OAuth state parameters). Furthermore, we use Oxc (Oxfmt and Oxlint) to format and lint our code.
 
 ## How to Contribute
 

docs/CONTRIBUTING_ADVANCED.md

@@ -148,7 +148,7 @@ If you are on a UNIX system and you get a spawn error, run npm with `sudo`.
 
 ## Standards and Guidelines
 
-Code formatting is enforced by [Prettier](https://prettier.io/docs/en/install.html), which automatically runs every time you make a commit.
+Code formatting and linting is enforced by [Oxc (Oxfmt and Oxlint)](https://github.com/oxc-project/oxc), which automatically runs every time you make a commit.
 
 For guidelines on commit messages, adding themes, languages, or quotes, please refer to [CONTRIBUTING.md](./CONTRIBUTING.md). Following these guidelines will increase the chances of getting your change accepted.
 

frontend/scripts/check-assets.ts

@@ -183,7 +183,7 @@ async function validateQuotes(): Promise<void> {
     //check schema
     const schema = QuoteDataSchema.extend({
       language: LanguageSchema
-        //icelandic only exists as icelandic_1k, language in quote file is stipped of its size
+        //icelandic only exists as icelandic_1k, language in quote file is stripped of its size
         .or(z.literal("icelandic")),
     });
     problems.addValidation(quotefilename, schema.safeParse(quoteData));
@@ -198,14 +198,21 @@ async function validateQuotes(): Promise<void> {
     }
 
     //check quote length
-    quoteData.quotes
-      .filter((quote) => quote.text.length !== quote.length)
-      .forEach((quote) =>
+    quoteData.quotes.forEach((quote) => {
+      if (quote.text.length !== quote.length) {
         problems.add(
           quotefilename,
           `ID ${quote.id}: expected length ${quote.text.length}`,
-        ),
-      );
+        );
+      }
+
+      if (quote.text.length < 60) {
+        problems.add(
+          quotefilename,
+          `ID ${quote.id}: length too short (under 60 characters)`,
+        );
+      }
+    });
 
     //check groups
     let last = -1;

frontend/src/styles/nav.scss

@@ -447,7 +447,7 @@ header {
 
       .textButton,
       button {
-        color: transparent;
+        color: transparent !important;
       }
       .avatar,
       .levelAndBar {

frontend/src/styles/test.scss

@@ -351,7 +351,7 @@
   &.blind {
     .word {
       & letter.extra {
-        display: none;
+        display: none !important;
       }
       & letter.incorrect {
         color: var(--correct-letter-color);
@@ -533,45 +533,69 @@
     }
   }
 
-  &.typed-effect-dots:not(.withLigatures) {
+  &.typed-effect-dots {
     /* transform already typed letters into appropriately colored dots */
 
-    .word letter {
-      position: relative;
-      &::after {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 1em;
-        aspect-ratio: 1;
-        border-radius: 50%;
-        opacity: 0;
+    &:not(.withLigatures) .word,
+    &.withLigatures .word.broken-ligatures {
+      letter {
+        position: relative;
+        display: inline-block;
+        &::after {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 1em;
+          aspect-ratio: 1;
+          border-radius: 50%;
+          opacity: 0;
+        }
       }
     }
-    .typed letter {
-      color: var(--bg-color);
-      animation: typedEffectToDust 200ms ease-out 0ms 1 forwards !important;
-      &::after {
-        animation: typedEffectFadeIn 100ms ease-in 100ms 1 forwards;
-        background: var(--c-dot);
+    // unify dot spacing
+    &.withLigatures .word.broken-ligatures {
+      letter {
+        width: 0.4em;
+      }
+    }
+    .word.broken-ligatures:not(.needs-wrap) {
+      white-space: nowrap;
+    }
+
+    &:not(.withLigatures) .word.typed,
+    &.withLigatures .word.broken-ligatures.typed {
+      letter {
+        color: var(--bg-color);
+        animation: typedEffectToDust 200ms ease-out 0ms 1 forwards !important;
+        &::after {
+          animation: typedEffectFadeIn 100ms ease-in 100ms 1 forwards;
+          background: var(--c-dot);
+        }
       }
     }
-    &:not(.blind) {
+
+    &:not(.withLigatures):not(.blind) {
       .word letter.incorrect::after {
         background: var(--c-dot--error);
       }
     }
+    &.withLigatures:not(.blind) .word.broken-ligatures letter.incorrect::after {
+      background: var(--c-dot--error);
+    }
 
     @media (prefers-reduced-motion) {
-      .typed letter {
-        animation: none !important;
-        transform: scale(0.4);
-        color: transparent;
-        &::after {
+      &:not(.withLigatures) .word.typed,
+      &.withLigatures .word.broken-ligatures.typed {
+        letter {
           animation: none !important;
-          opacity: 1;
+          transform: scale(0.4);
+          color: transparent;
+          &::after {
+            animation: none !important;
+            opacity: 1;
+          }
         }
       }
     }

frontend/src/ts/auth.tsx

@@ -27,7 +27,6 @@ import { showPopup } from "./modals/simple-modals-base";
 import * as AuthEvent from "./observables/auth-event";
 import * as Sentry from "./sentry";
 import { showLoaderBar, hideLoaderBar } from "./signals/loader-bar";
-import * as ConnectionState from "./states/connection";
 import { addBanner } from "./stores/banners";
 import * as Misc from "./utils/misc";
 
@@ -244,12 +243,6 @@ async function addAuthProvider(
   providerName: string,
   provider: AuthProvider,
 ): Promise<void> {
-  if (!ConnectionState.get()) {
-    Notifications.add("You are offline", 0, {
-      duration: 2,
-    });
-    return;
-  }
   if (!isAuthAvailable()) {
     Notifications.add("Authentication uninitialized", -1, {
       duration: 3,

frontend/src/ts/commandline/util.ts

@@ -10,7 +10,7 @@ import {
 } from "./commandline-metadata";
 import { Command } from "./types";
 import * as ConfigSchemas from "@monkeytype/schemas/configs";
-import { z, ZodSchema } from "zod";
+import { z, ZodSchema, ZodFirstPartySchemaTypes } from "zod";
 
 function getOptions<T extends ZodSchema>(schema: T): undefined | z.infer<T>[] {
   if (schema instanceof z.ZodLiteral) {
@@ -28,7 +28,6 @@ function getOptions<T extends ZodSchema>(schema: T): undefined | z.infer<T>[] {
 }
 
 export function buildCommandForConfigKey<
-  // oxlint-disable-next-line no-unnecessary-type-parameters
   K extends keyof CommandlineConfigMetadataObject,
 >(key: K): Command {
   const configMeta = configMetadata[key];
@@ -69,7 +68,7 @@ function _buildCommandForConfigKey<
 
     const inputCommand = buildInputCommand({
       key: "secondKey" in inputProps ? inputProps.secondKey : key,
-      isPartOfSubgruop: "subgroup" in commandMeta,
+      isPartOfSubgroup: "subgroup" in commandMeta,
       inputProps: inputProps as InputProps<keyof ConfigSchemas.Config>,
       configMeta: configMeta as unknown as ConfigMetadata<
         keyof ConfigSchemas.Config
@@ -120,8 +119,7 @@ function buildCommandWithSubgroup<K extends keyof ConfigSchemas.Config>(
 
   if (values === undefined) {
     throw new Error(
-      //@ts-expect-error todo
-      `Unsupported schema type for key "${key}": ${schema._def.typeName}`,
+      `Unsupported schema type for key "${key}": ${(schema as ZodFirstPartySchemaTypes)._def.typeName}`,
     );
   }
   const list = values.map((value) =>
@@ -201,13 +199,13 @@ function buildSubgroupCommand<K extends keyof ConfigSchemas.Config>(
 
 function buildInputCommand<K extends keyof ConfigSchemas.Config>({
   key,
-  isPartOfSubgruop,
+  isPartOfSubgroup,
   inputProps,
   configMeta,
   schema,
 }: {
   key: K;
-  isPartOfSubgruop: boolean;
+  isPartOfSubgroup: boolean;
   inputProps?: InputProps<K>;
   configMeta: ConfigMetadata<K>;
   schema?: ZodSchema;
@@ -216,7 +214,7 @@ function buildInputCommand<K extends keyof ConfigSchemas.Config>({
 
   const displayString =
     inputProps?.display ??
-    (isPartOfSubgruop
+    (isPartOfSubgroup
       ? "custom..."
       : `${capitalizeFirstLetter(configMeta.displayString ?? key)}...`);
 

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

@@ -76,7 +76,7 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
     await props.beforeShow?.();
 
     // Open the dialog
-    dialogEl()?.removeClass("hidden");
+    dialogEl()?.show();
     if (props.mode === "dialog") {
       dialogEl()?.native.show();
     } else {
@@ -188,13 +188,13 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
           duration: wrapperDuration,
           onComplete: async () => {
             dialogEl()?.native.close();
-            dialogEl()?.addClass("hidden");
+            dialogEl()?.hide();
             await handleAfterHide();
           },
         });
       } else {
         dialogEl()?.native.close();
-        dialogEl()?.addClass("hidden");
+        dialogEl()?.hide();
         await handleAfterHide();
       }
     } else if (animMode === "modalOnly") {
@@ -204,7 +204,7 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
         duration: modalAnimDuration,
         onComplete: async () => {
           dialogEl()?.native.close();
-          dialogEl()?.addClass("hidden");
+          dialogEl()?.hide();
           await handleAfterHide();
         },
       });

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

@@ -31,8 +31,9 @@ export function ChartJs<T extends ChartType, TData = DefaultDataPoint<T>>(
   let chart: ChartWithUpdateColors<T, TData> | undefined;
 
   onMount(() => {
-    //oxlint-disable-next-line no-non-null-assertion
-    chart = new ChartWithUpdateColors(canvasEl()!.native, {
+    const canvas = canvasEl();
+    if (canvas === undefined) return;
+    chart = new ChartWithUpdateColors(canvas.native, {
       type: props.type,
       data: props.data,
       options: props.options,