[pull] master from monkeytypegame:master

.github/workflows/monkey-ci.yml

@@ -2,7 +2,7 @@ name: Monkey CI
 
 env:
   PNPM_VERSION: "9.6.0"
-  NODE_VERSION: "24.10.0"
+  NODE_VERSION: "24.11.0"
   RECAPTCHA_SITE_KEY: "6Lc-V8McAAAAAJ7s6LGNe7MBZnRiwbsbiWts87aj"
 
 permissions:

.github/workflows/pretty-check.yml

@@ -2,7 +2,7 @@ name: Prettier Check
 
 env:
   PNPM_VERSION: "9.6.0"
-  NODE_VERSION: "24.10.0"
+  NODE_VERSION: "24.11.0"
 
 on:
   pull_request:

.github/workflows/pretty-fix.yml

@@ -2,7 +2,7 @@ name: Prettier Fix
 
 env:
   PNPM_VERSION: "9.6.0"
-  NODE_VERSION: "24.10.0"
+  NODE_VERSION: "24.11.0"
 
 permissions:
   contents: write

.nvmrc

@@ -1 +1 @@
-24.10.0
+24.11.0

backend/docker/compose.yml

@@ -23,7 +23,7 @@ services:
     container_name: monkeytype-api-server
     build:
       dockerfile_inline: |
-        FROM node:24.10.0
+        FROM node:24.11.0
         RUN npm i -g pnpm@9.6.0
         RUN mkdir /pnpm-store && chown -R 1000:1000 /pnpm-store
     user: "node"    ##this works as long as your local user has uid=1000

backend/package.json

@@ -21,7 +21,7 @@
     "gen-docs": "tsx scripts/openapi.ts dist/static/api/openapi.json && redocly build-docs -o dist/static/api/internal.html internal@v2 && redocly bundle -o dist/static/api/public.json public-filter && redocly build-docs -o dist/static/api/public.html public@v2"
   },
   "engines": {
-    "node": "24.10.0"
+    "node": "24.11.0"
   },
   "dependencies": {
     "@date-fns/utc": "1.2.0",
@@ -89,7 +89,7 @@
     "eslint": "8.57.1",
     "eslint-watch": "8.0.0",
     "openapi3-ts": "2.0.2",
-    "oxlint": "1.15.0",
+    "oxlint": "1.25.0",
     "readline-sync": "1.4.10",
     "supertest": "7.1.4",
     "testcontainers": "11.4.0",

docker/backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:24.10.0-alpine3.22 AS builder
+FROM node:24.11.0-alpine3.22 AS builder
 
 WORKDIR /app
 
@@ -18,7 +18,7 @@ RUN pnpm deploy --filter backend --prod /prod/backend
 #---------------------------------
 
 ## target image
-FROM node:24.10.0-alpine3.22
+FROM node:24.11.0-alpine3.22
 
 ## get server_version from build-arg, default to UNKNOWN
 ARG server_version=UNKNOWN

docker/frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:24.10.0-alpine3.22 AS builder
+FROM node:24.11.0-alpine3.22 AS builder
 WORKDIR /app
 
 #ENV

docs/CONTRIBUTING_ADVANCED.md

@@ -21,7 +21,7 @@
 
 ## Prerequisites
 
-This contribution guide is for cases in which you need to test the functionality of your changes, or if you need to take screenshots of your changes. You will need a computer with a stable internet connection, a text editor, Git, and NodeJS with version 24.10.0. There are some additional requirements depending on what you're looking to contribute, such as Firebase for authentication, and Mongo and Docker for the backend. Read the below sections to understand how to set up each of these tools.
+This contribution guide is for cases in which you need to test the functionality of your changes, or if you need to take screenshots of your changes. You will need a computer with a stable internet connection, a text editor, Git, and NodeJS with version 24.11.0. There are some additional requirements depending on what you're looking to contribute, such as Firebase for authentication, and Mongo and Docker for the backend. Read the below sections to understand how to set up each of these tools.
 
 ### Git
 
@@ -33,9 +33,9 @@ Git is optional but we recommend you utilize it. Monkeytype uses the Git source
 
 ### NodeJS and PNPM
 
-Currently, the project is using version `24.10.0 LTS`.
+Currently, the project is using version `24.11.0 LTS`.
 
-If you use `nvm` (if you use Windows, use [nvm-windows](https://github.com/coreybutler/nvm-windows)) then you can run `nvm install` and `nvm use` (you might need to specify the exact version eg: `nvm install 24.10.0` then `nvm use 24.10.0`) to use the version of Node.js in the `.nvmrc` file.
+If you use `nvm` (if you use Windows, use [nvm-windows](https://github.com/coreybutler/nvm-windows)) then you can run `nvm install` and `nvm use` (you might need to specify the exact version eg: `nvm install 24.11.0` then `nvm use 24.11.0`) to use the version of Node.js in the `.nvmrc` file.
 
 Alternatively, you can navigate to the NodeJS [website](https://nodejs.org/en/) to download it from there.
 

frontend/docker/compose.dev.yml

@@ -4,7 +4,7 @@ services:
     container_name: monkeytype-frontend
     build:
       dockerfile_inline: |
-        FROM node:24.10.0
+        FROM node:24.11.0
         RUN npm i -g pnpm@9.6.0
         RUN mkdir /pnpm-store && chown -R 1000:1000 /pnpm-store
     user: "node"    ##this works as long as your local user has uid=1000

frontend/package.json

@@ -24,7 +24,7 @@
     "docker": "docker compose -f docker/compose.dev.yml up"
   },
   "engines": {
-    "node": "24.10.0"
+    "node": "24.11.0"
   },
   "browserslist": [
     "defaults",
@@ -57,7 +57,7 @@
     "madge": "8.0.0",
     "magic-string": "0.30.17",
     "normalize.css": "8.0.1",
-    "oxlint": "1.15.0",
+    "oxlint": "1.25.0",
     "postcss": "8.4.31",
     "sass": "1.70.0",
     "subset-font": "2.3.0",

frontend/src/html/popups.html

@@ -486,6 +486,8 @@
         <i class="fas fa-folder"></i>
         saved texts
       </div>
+    </div>
+    <div class="buttonsTop2">
       <input id="fileInput" type="file" class="hidden" accept=".txt" />
       <label for="fileInput" class="button importText">
         <i class="fas fa-file-import"></i>
@@ -495,6 +497,10 @@
         <i class="fas fa-filter"></i>
         words filter
       </div>
+      <div class="button customGenerator">
+        <i class="fas fa-cogs"></i>
+        custom generator
+      </div>
     </div>
     <div class="savedTexts hidden" style="display: none">
       <div class="title">saved texts</div>
@@ -759,7 +765,7 @@
         <select class="layoutInput"></select>
       </div>
       <!-- <div class="tip">Use the dropdowns above to generate presets</div> -->
-      <button class="generateButton">generate</button>
+      <button class="generateButton">apply</button>
     </div>
 
     <div class="bottom">
@@ -772,6 +778,79 @@
     </div>
   </div>
 </dialog>
+<dialog id="customGeneratorModal" class="modalWrapper hidden">
+  <div class="modal">
+    <div class="main">
+      <div class="group">
+        <div class="title">presets</div>
+        <select class="presetInput">
+          <option value="alphas">a-z</option>
+          <option value="numbers">0-9</option>
+          <option value="special">symbols</option>
+          <option value="bigrams">bigrams</option>
+          <option value="trigrams">trigrams</option>
+        </select>
+        <button class="generateButton">apply</button>
+      </div>
+      <div class="separator"></div>
+      <div class="tip">
+        Enter characters or strings separated by spaces. Random combinations
+        will be generated using these inputs.
+      </div>
+      <div class="group">
+        <div class="title">character set</div>
+        <textarea
+          class="characterInput"
+          id="characterInput"
+          autocomplete="off"
+          placeholder=""
+          title="characters"
+        ></textarea>
+      </div>
+      <div class="group lengthgrid">
+        <div class="title">min length</div>
+        <div class="title">max length</div>
+
+        <input
+          class="wordLength minLengthInput"
+          autocomplete="off"
+          type="number"
+          value="2"
+          min="1"
+          title="min"
+        />
+        <input
+          class="wordLength maxLengthInput"
+          autocomplete="off"
+          type="number"
+          value="5"
+          min="1"
+          title="max"
+        />
+      </div>
+      <div class="group">
+        <div class="title">word count</div>
+        <input
+          class="wordCountInput"
+          autocomplete="off"
+          type="number"
+          value="100"
+          min="1"
+          title="word count"
+        />
+      </div>
+    </div>
+
+    <div class="bottom">
+      <div class="tip">
+        "Set" replaces the current custom text with generated words, "Add"
+        appends generated words to the current custom text.
+      </div>
+      <button class="setButton">set</button>
+      <button class="addButton">add</button>
+    </div>
+  </div>
+</dialog>
 <dialog id="googleSignUpModal" class="modalWrapper hidden">
   <form class="modal">
     <div class="title">Account name</div>

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

@@ -15,6 +15,13 @@
   #testModesNotice {
     font-size: 0.8rem;
   }
+  #customTextModal {
+    .modal {
+      .buttonsTop2 {
+        grid-template-columns: 1fr;
+      }
+    }
+  }
   #bannerCenter {
     font-size: 0.85rem;
     .banner.withImage {

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

@@ -231,6 +231,7 @@
     .modal {
       grid-template-areas:
         "topButtons topButtons"
+        "topButtons2 topButtons2"
         "textArea textArea"
         "checkboxes checkboxes"
         "ok ok";

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

@@ -43,9 +43,9 @@
       .buttonsTop {
         grid-template-columns: 1fr 1fr;
       }
-      textarea {
-        min-height: 426px;
-      }
+      // textarea {
+      //   min-height: 426px;
+      // }
     }
   }
   .testActivity {

frontend/src/styles/popups.scss

@@ -105,16 +105,21 @@ body.darkMode {
     //   "textArea textArea checkboxes"
     //   "ok ok ok";
     grid-template-areas:
-      "topButtons topButtons checkboxes"
-      "textArea textArea checkboxes"
-      "ok ok checkboxes";
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-template-rows: min-content 1fr min-content;
+      "topButtons checkboxes"
+      "topButtons2 checkboxes"
+      "textArea checkboxes"
+      "ok checkboxes";
+    grid-template-columns: auto 20rem;
+    grid-template-rows: min-content min-content 1fr min-content;
 
     .buttonsTop {
       grid-area: topButtons;
     }
 
+    .buttonsTop2 {
+      grid-area: topButtons2;
+    }
+
     .textAreaWrapper {
       grid-area: textArea;
     }
@@ -170,7 +175,13 @@ body.darkMode {
     .buttonsTop {
       display: grid;
       // grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
-      grid-template-columns: 1fr 1fr 1fr 1fr;
+      grid-template-columns: 1fr 1fr;
+      gap: 1rem;
+    }
+
+    .buttonsTop2 {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
       gap: 1rem;
     }
 
@@ -199,7 +210,7 @@ body.darkMode {
       width: 100%;
       border-radius: var(--roundness);
       resize: vertical;
-      min-height: 589px;
+      min-height: 524px;
       color: var(--text-color);
       overflow-x: hidden;
       overflow-y: scroll;
@@ -445,6 +456,70 @@ body.darkMode {
   }
 }
 
+#customGeneratorModal {
+  .modal {
+    max-width: 600px;
+
+    .main {
+      display: grid;
+      gap: 1.5rem;
+    }
+
+    .bottom {
+      display: grid;
+      gap: 1rem;
+      margin-top: 1rem;
+    }
+
+    .separator {
+      height: 0.25rem;
+      width: 100%;
+      background-color: var(--sub-alt-color);
+      border-radius: var(--roundness);
+    }
+
+    .group {
+      display: grid;
+      gap: 0.5rem;
+
+      .title {
+        color: var(--sub-color);
+      }
+    }
+
+    .lengthgrid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: auto 1fr;
+      column-gap: 1rem;
+    }
+
+    .tip {
+      color: var(--sub-color);
+      font-size: 0.8rem;
+    }
+
+    input,
+    textarea {
+      width: 100%;
+      padding: 0.5rem;
+      background: var(--sub-alt-color);
+      color: var(--text-color);
+      border: none;
+      border-radius: var(--roundness);
+
+      &::placeholder {
+        color: var(--sub-color);
+      }
+    }
+
+    textarea {
+      min-height: 100px;
+      resize: vertical;
+    }
+  }
+}
+
 #quoteRateModal {
   .modal {
     max-width: 800px;