Improved custom prompts.

This commit introduces a few changes to the selection of custom filtered datasets:

- The "ok" button has been separated into "add" and "set"; the former doesn't clear the text field, making it easier to combine datasets.

- A few functions have been switched around to fix the loading button and to circumvent some finnicky behaviour.

- The forEach loop has been replaced with a join; this looks a bit cleaner and is generally more performant.

src/js/popups/word-filter-popup.js

@@ -65,15 +65,15 @@ async function filter(language) {
   return filteredWords;
 }
 
-async function apply() {
+async function apply(set) {
   let language = $("#wordFilterPopup .languageInput").val();
   let filteredWords = await filter(language);
-  let customText = "";
-  filteredWords.forEach((word) => {
-    customText += word + " ";
-  });
+  let customText = filteredWords.join(" ");
+
+  $("#customTextPopup textarea").val(
+    (index, val) => (set ? "" : val + " ") + customText
+  );
   hide();
-  $("#customTextPopup textarea").val(customText);
 }
 
 $("#wordFilterPopupWrapper").mousedown((e) => {
@@ -90,8 +90,9 @@ $("#wordFilterPopupWrapper .button").mousedown((e) => {
   $("#wordFilterPopupWrapper .loadingIndicator").removeClass("hidden");
   $("#wordFilterPopupWrapper .button").addClass("hidden");
   setTimeout(() => {
-    apply();
-    $("#wordFilterPopupWrapper .loadingIndicator").addClass("hidden");
-    $("#wordFilterPopupWrapper .button").removeClass("hidden");
+    apply($(e.target).is("#set")).then(() => {
+      $("#wordFilterPopupWrapper .loadingIndicator").addClass("hidden");
+      $("#wordFilterPopupWrapper .button").removeClass("hidden");
+    });
   }, 1);
 });

static/index.html

@@ -205,7 +205,8 @@
         <i
           class="fas fa-fw fa-spin fa-circle-notch hidden loadingIndicator"
         ></i>
-        <div class="button">ok</div>
+        <div class="button" id="set">set</div>
+        <div class="button">add</div>
       </div>
     </div>
     <div id="customWordAmountPopupWrapper" class="hidden">