Merge branch 'master' into feat/tunnel-vision

Author: d1rshan

.github/workflows/fix-formatting.yml

@@ -34,7 +34,7 @@ jobs:
           version: ${{ env.PNPM_VERSION }}
 
       - name: Install formatter
-        run: pnpm install -D -w oxfmt
+        run: pnpm install -D -w oxfmt --ignore-scripts
 
       - name: Get changed files
         id: get-changed-files
@@ -52,10 +52,11 @@ jobs:
             return changedFiles.filter(file=> file.status !== "removed").map(file => file.filename).join(' ');
 
       - name: Fix formatting
+        env:
+          CHANGED_FILES: ${{ steps.get-changed-files.outputs.result }}
         run: |
-          CHANGED_FILES=$(echo ${{ steps.get-changed-files.outputs.result }})
           if [ -n "$CHANGED_FILES" ]; then
-            pnpm oxfmt $CHANGED_FILES --no-error-on-unmatched-pattern
+            echo "$CHANGED_FILES" | tr ' ' '\n' | xargs pnpm oxfmt --no-error-on-unmatched-pattern
           fi
 
       - name: Commit changes

.github/workflows/monkey-ci.yml

@@ -28,7 +28,7 @@ jobs:
       should-build-be: ${{ steps.export-changes.outputs.should-build-be }}
       should-build-fe: ${{ steps.export-changes.outputs.should-build-fe }}
       should-build-pkg: ${{ steps.export-changes.outputs.should-build-pkg }}
-      assets-json: ${{ steps.export-changes.outputs.assets-json }}
+      assets-or-styles: ${{ steps.export-changes.outputs.assets-or-styles }}
 
     steps:
       - name: Full checkout
@@ -41,8 +41,9 @@ jobs:
         id: filter
         with:
           filters: |
-            json:
+            assets-or-styles:
               - 'frontend/static/**/*'
+              - '**/*.{scss,css}'
             be-src:
               - 'backend/**/*.{ts,js,json,lua,css,html}'
               - 'backend/package.json'
@@ -64,13 +65,13 @@ jobs:
           echo "should-build-pkg=${{ steps.filter.outputs.pkg-src }}" >> $GITHUB_OUTPUT
           echo "should-build-be=${{ steps.filter.outputs.be-src }}" >> $GITHUB_OUTPUT
           echo "should-build-fe=${{ steps.filter.outputs.fe-src }}" >> $GITHUB_OUTPUT
-          echo "assets-json=${{ steps.filter.outputs.json }}" >> $GITHUB_OUTPUT
+          echo "assets-or-styles=${{ steps.filter.outputs.assets-or-styles }}" >> $GITHUB_OUTPUT
 
   prime-cache:
     name: prime-cache
     runs-on: ubuntu-latest
     needs: [pre-ci]
-    if: needs.pre-ci.outputs.should-build-be == 'true' || needs.pre-ci.outputs.should-build-fe == 'true' || needs.pre-ci.outputs.should-build-pkg == 'true' || needs.pre-ci.outputs.assets-json == 'true' || contains(github.event.pull_request.labels.*.name, 'force-full-ci')
+    if: needs.pre-ci.outputs.should-build-be == 'true' || needs.pre-ci.outputs.should-build-fe == 'true' || needs.pre-ci.outputs.should-build-pkg == 'true' || needs.pre-ci.outputs.assets-or-styles == 'true' || contains(github.event.pull_request.labels.*.name, 'force-full-ci')
     steps:
       - name: Checkout pnpm-lock
         uses: actions/checkout@v4
@@ -216,7 +217,7 @@ jobs:
     name: ci-assets
     needs: [pre-ci, prime-cache]
     runs-on: ubuntu-latest
-    if: needs.pre-ci.outputs.assets-json == 'true' || contains(github.event.pull_request.labels.*.name, 'force-full-ci')
+    if: needs.pre-ci.outputs.assets-or-styles == 'true' || contains(github.event.pull_request.labels.*.name, 'force-full-ci')
     steps:
       - uses: actions/checkout@v4
         with:
@@ -228,6 +229,10 @@ jobs:
         id: filter
         with:
           filters: |
+            styles:
+              - '**/*.{scss,css}'
+            json:
+              - 'frontend/static/**/*.json'
             languages:
               - 'frontend/static/languages/**'
             quotes:
@@ -237,6 +242,7 @@ jobs:
               - 'frontend/static/themes/**'
               - 'frontend/static/webfonts/**'
               - 'frontend/static/challenges/**'
+              - 'frontend/static/sounds/**'
 
       - name: Set up Node.js
         uses: actions/setup-node@v4
@@ -265,7 +271,12 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Lint styles
+        if: steps.filter.outputs.styles == 'true'
+        run: npm run lint-styles
+
       - name: Lint JSON
+        if: steps.filter.outputs.json == 'true'
         run: npm run lint-json-assets
 
       - name: Validate language assets

.gitignore

@@ -132,4 +132,4 @@ frontend/static/webfonts-preview
 .turbo
 frontend/.env.sentry-build-plugin
 .claude/worktrees
-1024MiB
+1024MiB

CLAUDE.md

@@ -1,6 +1,8 @@
 Be extremely concise. Sacrifice grammar for concision.
 Frontend is partially migrated from vanilla JS to SolidJS — new components use `.tsx`, legacy code remains vanilla.
 Single test file: `pnpm vitest run path/to/test.ts`
+When running oxc lint, always use `--format agent`.
+For typechecking, use `oxc --type-aware --type-check` instead of `tsc`.
 For styling, use Tailwind CSS, class property, `cn` utility. Do not use classlist. Only colors available are those defined in Tailwind config.
 In legacy code, use `i` tags with FontAwesome classes. In new code, use `Fa` component.
 In plan mode, before writing up a plan, ask clarifying questions if needed. At the end of plan mode, give me a list of unresolved questions to answer, if any. Make them concise.

README.md

@@ -69,4 +69,4 @@ All of the [contributors](https://github.com/monkeytypegame/monkeytype/graphs/co
 
 # Support
 
-If you wish to support further development and feel extra awesome, you can [donate](https://ko-fi.com/monkeytype), [become a Patron](https://www.patreon.com/monkeytype) or [buy a t-shirt](https://www.monkeytype.store/).
+If you wish to support further development and feel extra awesome, you can [donate](https://ko-fi.com/monkeytype), [become a Patron](https://www.patreon.com/monkeytype), or [buy a t-shirt](https://www.monkeytype.store/).

backend/__tests__/__integration__/dal/blocklist.spec.ts

@@ -26,7 +26,7 @@ describe("BlocklistDal", () => {
       const now = 1715082588;
       vi.setSystemTime(now);
 
-      const name = "user" + new ObjectId().toHexString();
+      const name = `user${new ObjectId().toHexString()}`;
       const email = `${name}@example.com`;
 
       //WHEN
@@ -56,7 +56,7 @@ describe("BlocklistDal", () => {
       const now = 1715082588;
       vi.setSystemTime(now);
 
-      const name = "user" + new ObjectId().toHexString();
+      const name = `user${new ObjectId().toHexString()}`;
       const email = `${name}@example.com`;
       const discordId = `${name}DiscordId`;
 
@@ -78,7 +78,7 @@ describe("BlocklistDal", () => {
       const now = 1715082588;
       vi.setSystemTime(now);
 
-      const name = "user" + new ObjectId().toHexString();
+      const name = `user${new ObjectId().toHexString()}`;
       const email = `${name}@example.com`;
       const email2 = `${name}@otherdomain.com`;
       await BlacklistDal.add({ name, email });
@@ -114,9 +114,9 @@ describe("BlocklistDal", () => {
       const now = 1715082588;
       vi.setSystemTime(now);
 
-      const name = "user" + new ObjectId().toHexString();
+      const name = `user${new ObjectId().toHexString()}`;
       const email = `${name}@example.com`;
-      const name2 = "user" + new ObjectId().toHexString();
+      const name2 = `user${new ObjectId().toHexString()}`;
       await BlacklistDal.add({ name, email });
 
       //WHEN
@@ -136,8 +136,8 @@ describe("BlocklistDal", () => {
       const now = 1715082588;
       vi.setSystemTime(now);
 
-      const name = "user" + new ObjectId().toHexString();
-      const name2 = "user" + new ObjectId().toHexString();
+      const name = `user${new ObjectId().toHexString()}`;
+      const name2 = `user${new ObjectId().toHexString()}`;
       const email = `${name}@example.com`;
       const discordId = `${name}DiscordId`;
 
@@ -160,7 +160,7 @@ describe("BlocklistDal", () => {
   describe("contains", () => {
     it("contains user", async () => {
       //GIVEN
-      const name = "user" + new ObjectId().toHexString();
+      const name = `user${new ObjectId().toHexString()}`;
       const email = `${name}@example.com`;
       const discordId = `${name}DiscordId`;
       await BlacklistDal.add({ name, email, discordId });
@@ -229,7 +229,7 @@ describe("BlocklistDal", () => {
   describe("remove", () => {
     it("removes existing username", async () => {
       //GIVEN
-      const name = "user" + new ObjectId().toHexString();
+      const name = `user${new ObjectId().toHexString()}`;
       const email = `${name}@example.com`;
       await BlacklistDal.add({ name, email });
       await BlacklistDal.add({ name: "test", email: "test@example.com" });
@@ -251,7 +251,7 @@ describe("BlocklistDal", () => {
     });
     it("removes existing email", async () => {
       //GIVEN
-      const name = "user" + new ObjectId().toHexString();
+      const name = `user${new ObjectId().toHexString()}`;
       const email = `${name}@example.com`;
       await BlacklistDal.add({ name, email });
       await BlacklistDal.add({ name: "test", email: "test@example.com" });
@@ -273,7 +273,7 @@ describe("BlocklistDal", () => {
     });
     it("removes existing discordId", async () => {
       //GIVEN
-      const name = "user" + new ObjectId().toHexString();
+      const name = `user${new ObjectId().toHexString()}`;
       const email = `${name}@example.com`;
       const discordId = `${name}DiscordId`;
       await BlacklistDal.add({ name, email, discordId });
@@ -304,7 +304,7 @@ describe("BlocklistDal", () => {
     });
     it("removes existing username,email and discordId", async () => {
       //GIVEN
-      const name = "user" + new ObjectId().toHexString();
+      const name = `user${new ObjectId().toHexString()}`;
       const email = `${name}@example.com`;
       const discordId = `${name}DiscordId`;
       await BlacklistDal.add({ name, email, discordId });
@@ -336,7 +336,7 @@ describe("BlocklistDal", () => {
 
     it("does not remove for empty user", async () => {
       //GIVEN
-      const name = "user" + new ObjectId().toHexString();
+      const name = `user${new ObjectId().toHexString()}`;
       const email = `${name}@example.com`;
       const discordId = `${name}DiscordId`;
       await BlacklistDal.add({ name, email, discordId });

backend/__tests__/__integration__/dal/leaderboards.isolated.spec.ts

@@ -496,7 +496,7 @@ async function createUser(
   userProperties?: Partial<UserDal.DBUser>,
 ): Promise<UserDal.DBUser> {
   const uid = new ObjectId().toHexString();
-  await UserDal.addUser("User " + uid, uid + "@example.com", uid);
+  await UserDal.addUser(`User ${uid}`, `${uid}@example.com`, uid);
 
   await DB.getDb()
     ?.collection<UserDal.DBUser>("users")
@@ -505,8 +505,8 @@ async function createUser(
       {
         $set: {
           timeTyping: 7200,
-          discordId: "discord " + uid,
-          discordAvatar: "avatar " + uid,
+          discordId: `discord ${uid}`,
+          discordAvatar: `avatar ${uid}`,
           ...userProperties,
           lbPersonalBests,
         },

backend/__tests__/__integration__/dal/user.spec.ts

@@ -128,8 +128,8 @@ describe("UserDal", () => {
 
   it("isNameAvailable should correctly check if a username is available", async () => {
     // given
-    const name1 = "user" + new ObjectId().toHexString();
-    const name2 = "user" + new ObjectId().toHexString();
+    const name1 = `user${new ObjectId().toHexString()}`;
+    const name2 = `user${new ObjectId().toHexString()}`;
     const { uid: user1 } = await UserTestData.createUser({ name: name1 });
     await UserTestData.createUser({ name: name2 });
 
@@ -160,8 +160,8 @@ describe("UserDal", () => {
 
   it("updatename should not allow unavailable usernames", async () => {
     // given
-    const name1 = "user" + new ObjectId().toHexString();
-    const name2 = "user" + new ObjectId().toHexString();
+    const name1 = `user${new ObjectId().toHexString()}`;
+    const name2 = `user${new ObjectId().toHexString()}`;
     const user1 = await UserTestData.createUser({ name: name1 });
     const user2 = await UserTestData.createUser({ name: name2 });
     const _decoy = await UserTestData.createUser();
@@ -173,8 +173,8 @@ describe("UserDal", () => {
   });
 
   it("same usernames (different casing) should be available only for the same user", async () => {
-    const name1 = "user" + new ObjectId().toHexString();
-    const name2 = "user" + new ObjectId().toHexString();
+    const name1 = `user${new ObjectId().toHexString()}`;
+    const name2 = `user${new ObjectId().toHexString()}`;
     const user1 = await UserTestData.createUser({ name: name1 });
     const user2 = await UserTestData.createUser({ name: name2 });
 
@@ -192,8 +192,8 @@ describe("UserDal", () => {
 
   it("UserDAL.updateName should change the name of a user", async () => {
     // given
-    const name = "user" + new ObjectId().toHexString();
-    const renamed = "renamed" + new ObjectId().toHexString();
+    const name = `user${new ObjectId().toHexString()}`;
+    const renamed = `renamed${new ObjectId().toHexString()}`;
     const testUser = await UserTestData.createUser({ name: name });
 
     // when
@@ -1696,7 +1696,7 @@ describe("UserDal", () => {
 
     it("increments bananas", async () => {
       //GIVEN
-      const name = "user" + new ObjectId().toHexString();
+      const name = `user${new ObjectId().toHexString()}`;
       const { uid } = await UserTestData.createUser({
         name,
         bananas: 1,

backend/__tests__/__testData__/connections.ts

@@ -5,7 +5,7 @@ export async function createConnection(
   data: Partial<ConnectionsDal.DBConnection>,
   maxPerUser = 25,
 ): Promise<ConnectionsDal.DBConnection> {
-  const defaultName = "user" + new ObjectId().toHexString();
+  const defaultName = `user${new ObjectId().toHexString()}`;
   const result = await ConnectionsDal.create(
     {
       uid: data.initiatorUid ?? new ObjectId().toHexString(),

backend/__tests__/__testData__/users.ts

@@ -7,7 +7,7 @@ export async function createUser(
   user?: Partial<UserDAL.DBUser>,
 ): Promise<UserDAL.DBUser> {
   const uid = new ObjectId().toHexString();
-  await UserDAL.addUser("user" + uid, uid + "@example.com", uid);
+  await UserDAL.addUser(`user${uid}`, `${uid}@example.com`, uid);
   await DB.collection("users").updateOne({ uid }, { $set: { ...user } });
   return await UserDAL.getUser(uid, "test");
 }
@@ -16,7 +16,7 @@ export async function createUserWithoutMigration(
   user?: Partial<UserDAL.DBUser>,
 ): Promise<UserDAL.DBUser> {
   const uid = new ObjectId().toHexString();
-  await UserDAL.addUser("user" + uid, uid + "@example.com", uid);
+  await UserDAL.addUser(`user${uid}`, `${uid}@example.com`, uid);
   await DB.collection("users").updateOne({ uid }, { $set: { ...user } });
   await DB.collection("users").updateOne(
     { uid },