From f7666ab8e3088f480d3df424a546dc4413fbff3c Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Mon, 31 Mar 2025 14:32:54 +0200
Subject: [PATCH] refactor: empty word appending in zen mode

---
 frontend/src/ts/test/test-ui.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index af15204c7..036e80539 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/frontend/src/ts/test/test-ui.ts
@@ -404,17 +404,16 @@ function updateWordWrapperClasses(): void {
 export function showWords(): void {
   $("#words").empty();
 
-  let wordsHTML = "";
-  if (Config.mode !== "zen") {
+  if (Config.mode === "zen") {
+    appendEmptyWordElement();
+  } else {
+    let wordsHTML = "";
     for (let i = 0; i < TestWords.words.length; i++) {
       wordsHTML += getWordHTML(TestWords.words.get(i));
     }
-  } else {
-    wordsHTML = '<div class="word active"></div>';
+    $("#words").html(wordsHTML);
   }
 
-  $("#words").html(wordsHTML);
-
   updateActiveElement(undefined, true);
   setTimeout(() => {
     void Caret.updatePosition();
@@ -423,6 +422,10 @@ export function showWords(): void {
   updateWordWrapperClasses();
 }
 
+export function appendEmptyWordElement(): void {
+  $("#words").append("<div class='word'><letter>ㅤ</letter></div>");
+}
+
 const posUpdateLangList = ["japanese", "chinese", "korean"];
 function shouldUpdateWordsInputPosition(): boolean {
   const language = posUpdateLangList.some((l) => Config.language.startsWith(l));