feat: add copy missed words to result screen (fehmer) (#5086)

* feat: Add copy missed words to result screen

* remove margin

* update icons

---------

Co-authored-by: Miodec <jack@monkeytype.com>

frontend/src/styles/test.scss

@@ -567,7 +567,6 @@
     margin-bottom: 1rem;
     .textButton {
       padding: 0;
-      margin-left: 0.5rem;
     }
     .heatmapLegend {
       margin-left: 0.5rem;

frontend/src/ts/test/test-ui.ts

@@ -1249,23 +1249,37 @@ $(".pageTest").on("click", "#saveScreenshotButton", () => {
 });
 
 $(".pageTest #copyWordsListButton").on("click", async () => {
+  let words;
+  if (Config.mode === "zen") {
+    words = TestInput.input.history.join(" ");
+  } else {
+    words = (TestWords.words.get() as string[])
+      .slice(0, TestInput.input.history.length)
+      .join(" ");
+  }
+  await copyToClipboard(words);
+});
+
+$(".pageTest #copyMissedWordsListButton").on("click", async () => {
+  let words;
+  if (Config.mode === "zen") {
+    words = TestInput.input.history.join(" ");
+  } else {
+    words = Object.keys(TestInput.missedWords ?? {}).join(" ");
+  }
+  await copyToClipboard(words);
+});
+
+async function copyToClipboard(content: string): Promise<void> {
   try {
-    let words;
-    if (Config.mode === "zen") {
-      words = TestInput.input.history.join(" ");
-    } else {
-      words = (TestWords.words.get() as string[])
-        .slice(0, TestInput.input.history.length)
-        .join(" ");
-    }
-    await navigator.clipboard.writeText(words);
+    await navigator.clipboard.writeText(content);
     Notifications.add("Copied to clipboard", 0, {
       duration: 2,
     });
   } catch (e) {
     Notifications.add("Could not copy to clipboard: " + e, -1);
   }
-});
+}
 
 $(".pageTest #toggleBurstHeatmap").on("click", async () => {
   UpdateConfig.setBurstHeatmap(!Config.burstHeatmap);

frontend/static/html/pages/test.html

@@ -303,7 +303,15 @@
             data-balloon-pos="up"
             style="display: inline-block"
           >
-            <i class="fas fa-fw fa-copy"></i>
+            <i class="fas fa-fw fa-align-left"></i>
+          </span>
+          <span
+            id="copyMissedWordsListButton"
+            class="textButton"
+            aria-label="Copy missed words list"
+            data-balloon-pos="up"
+          >
+            <i class="fas fa-fw fa-times"></i>
           </span>
           <span
             id="toggleBurstHeatmap"