From fc991c1c7f1e2823e13af5cf7594de44eebc22cf Mon Sep 17 00:00:00 2001
From: Leonabcd123 <156839416+Leonabcd123@users.noreply.github.com>
Date: Sun, 2 Nov 2025 19:41:00 +0200
Subject: [PATCH] Add all option to indicate typos

---
 frontend/src/html/pages/settings.html          |  5 ++++-
 .../src/ts/controllers/input-controller.ts     |  6 +++++-
 frontend/src/ts/test/test-ui.ts                | 18 +++++++++++++-----
 packages/schemas/src/configs.ts                |  2 +-
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/src/html/pages/settings.html b/frontend/src/html/pages/settings.html
index 8b232477b7fe..a30ab4d9aa50 100644
--- a/frontend/src/html/pages/settings.html
+++ b/frontend/src/html/pages/settings.html
@@ -539,12 +539,15 @@
       </div>
       <div class="text">
         Shows typos that you've made. Below shows what you typed below the
-        letters and replace will replace the letters with the ones you typed.
+        letters, replace will replace the letters with the ones you typed and
+        all will do the same as replace and below, but it will show the correct
+        letters below your mistakes.
       </div>
       <div class="buttons">
         <button data-config-value="off">off</button>
         <button data-config-value="below">below</button>
         <button data-config-value="replace">replace</button>
+        <button data-config-value="all">all</button>
       </div>
     </div>
     <div class="section" data-config-name="hideExtraLetters">
diff --git a/frontend/src/ts/controllers/input-controller.ts b/frontend/src/ts/controllers/input-controller.ts
index 74de37c171de..9cadcd3f1776 100644
--- a/frontend/src/ts/controllers/input-controller.ts
+++ b/frontend/src/ts/controllers/input-controller.ts
@@ -703,7 +703,11 @@ async function handleChar(
     !TestUI.lineTransition
     // TestInput.input.current.length > 1
   ) {
-    if (Config.mode === "zen" || Config.indicateTypos === "replace") {
+    if (
+      Config.mode === "zen" ||
+      Config.indicateTypos === "replace" ||
+      Config.indicateTypos === "all"
+    ) {
       if (!Config.showAllLines) void TestUI.lineJump(activeWordTopBeforeJump);
     } else {
       TestInput.input.current = TestInput.input.current.slice(0, -1);
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index b51fd955daca..b7ac62a07942 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -436,7 +436,7 @@ function updateWordWrapperClasses(): void {
     $("#wordsWrapper").removeClass("blind");
   }
 
-  if (Config.indicateTypos === "below") {
+  if (Config.indicateTypos === "below" || Config.indicateTypos === "all") {
     $("#words").addClass("indicateTyposBelow");
     $("#wordsWrapper").addClass("indicateTyposBelow");
   } else {
@@ -791,7 +791,7 @@ export async function updateActiveWordLetters(
         !(containsKorean && !correctSoFar)
       ) {
         ret += `<letter class="dead">${
-          Config.indicateTypos === "replace"
+          Config.indicateTypos === "replace" || Config.indicateTypos === "all"
             ? inputChars[i] === " "
               ? "_"
               : inputChars[i]
@@ -806,13 +806,16 @@ export async function updateActiveWordLetters(
       } else {
         ret +=
           `<letter class="incorrect ${tabChar}${nlChar}">` +
-          (Config.indicateTypos === "replace"
+          (Config.indicateTypos === "replace" || Config.indicateTypos === "all"
             ? inputChars[i] === " "
               ? "_"
               : inputChars[i]
             : currentLetter) +
           "</letter>";
-        if (Config.indicateTypos === "below") {
+        if (
+          Config.indicateTypos === "below" ||
+          Config.indicateTypos === "all"
+        ) {
           const lastBlock = hintIndices[hintIndices.length - 1];
           if (lastBlock && lastBlock[lastBlock.length - 1] === i - 1)
             lastBlock.push(i);
@@ -839,7 +842,12 @@ export async function updateActiveWordLetters(
 
   if (hintIndices?.length) {
     const activeWordLetters = activeWord.querySelectorAll("letter");
-    const hintsHtml = createHintsHtml(hintIndices, activeWordLetters, input);
+    let hintsHtml;
+    if (Config.indicateTypos === "all") {
+      hintsHtml = createHintsHtml(hintIndices, activeWordLetters, currentWord);
+    } else {
+      hintsHtml = createHintsHtml(hintIndices, activeWordLetters, input);
+    }
     activeWord.insertAdjacentHTML("beforeend", hintsHtml);
     const hintElements = activeWord.getElementsByTagName("hint");
     await joinOverlappingHints(hintIndices, activeWordLetters, hintElements);
diff --git a/packages/schemas/src/configs.ts b/packages/schemas/src/configs.ts
index c5f6ebbe7452..717edb269f2c 100644
--- a/packages/schemas/src/configs.ts
+++ b/packages/schemas/src/configs.ts
@@ -50,7 +50,7 @@ export type CaretStyle = z.infer<typeof CaretStyleSchema>;
 export const ConfidenceModeSchema = z.enum(["off", "on", "max"]);
 export type ConfidenceMode = z.infer<typeof ConfidenceModeSchema>;
 
-export const IndicateTyposSchema = z.enum(["off", "below", "replace"]);
+export const IndicateTyposSchema = z.enum(["off", "below", "replace", "all"]);
 export type IndicateTypos = z.infer<typeof IndicateTyposSchema>;
 
 export const TimerStyleSchema = z.enum(["off", "bar", "text", "mini"]);