From a1f883b99f8a0c0a49fa5fc1fc7e6610d8681b75 Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Mon, 19 Feb 2024 14:57:20 +0100
Subject: [PATCH] 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        |  1 -
 frontend/src/ts/test/test-ui.ts      | 34 ++++++++++++++++++++--------
 frontend/static/html/pages/test.html | 10 +++++++-
 3 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/frontend/src/styles/test.scss b/frontend/src/styles/test.scss
index cd017293b6cd..886a8cc8077e 100644
--- a/frontend/src/styles/test.scss
+++ b/frontend/src/styles/test.scss
@@ -567,7 +567,6 @@
     margin-bottom: 1rem;
     .textButton {
       padding: 0;
-      margin-left: 0.5rem;
     }
     .heatmapLegend {
       margin-left: 0.5rem;
diff --git a/frontend/src/ts/test/test-ui.ts b/frontend/src/ts/test/test-ui.ts
index 794f14aa9ae4..b489994ad183 100644
--- a/frontend/src/ts/test/test-ui.ts
+++ b/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);
diff --git a/frontend/static/html/pages/test.html b/frontend/static/html/pages/test.html
index 9e85d5677c58..e2416baf1b25 100644
--- a/frontend/static/html/pages/test.html
+++ b/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"