Restore Set from history fixes, visual enhancements

Author: faisalnjs

index.html

@@ -112,9 +112,9 @@ <h1><span class="code" data-modal-view="settings/code">000</span></h1>
           </button>
         </div>
         <div id="set-type-selector" data-button-select>
-          <button aria-selected="true" data-value="brackets">Brackets</button>
-          <button aria-selected="false" data-value="vector">Vector</button>
-          <button aria-selected="false" data-value="array">Array</button>
+          <button aria-selected="true" data-value="brackets">&lcub; Brackets &rcub;</button>
+          <button aria-selected="false" data-value="vector">&lt; Vector &gt;</button>
+          <button aria-selected="false" data-value="array">&lbrack; Array &rbrack;</button>
         </div>
         <div class="button-grid">
           <input type="text" autocomplete="off" id="set-input" data-set-input="1" />

src/clicker/clicker.js

@@ -591,11 +591,11 @@ try {
             ui.setButtonSelectValue(document.getElementById("answer-mode-selector"), "set");
             resetSetInput();
             var i = 0;
-            JSON.parse(item.answer).forEach(a => {
+            JSON.parse(`[${item.answer.slice(1, -1)}]`).forEach(a => {
               setInputs = document.querySelectorAll("[data-set-input]");
               setInputs[i].value = a;
               i++;
-              if (i < JSON.parse(item.answer).length) addSet();
+              if (i < JSON.parse(`[${item.answer.slice(1, -1)}]`).length) addSet();
             });
           } else if (frq) {
             answerMode("frq");
@@ -785,7 +785,7 @@ try {
   }
 
   function resetSetInput() {
-    document.querySelector('[data-answer-mode="set"] .button-grid').innerHTML = '<input type="text" autocomplete="off" id="set-input" data-set-input="1" /><button square data-add-set-input><i class="bi bi-plus"></i></button><button square data-remove-set-input disabled><i class="bi bi-dash"></i></button>';
+    document.querySelectorAll('[data-answer-mode="set"] .button-grid')[1].innerHTML = '<input type="text" autocomplete="off" id="set-input" data-set-input="1" /><button square data-add-set-input><i class="bi bi-plus"></i></button><button square data-remove-set-input disabled><i class="bi bi-dash"></i></button>';
     if (document.querySelector("[data-add-set-input]")) {
       document.querySelector("[data-add-set-input]").addEventListener("click", addSet);
     }

src/design.css

@@ -325,6 +325,7 @@ div.ML__keyboard {
 
 [data-button-select] > button {
   height: unset;
+  min-height: 1.75em;
   border-radius: 0.25rem;
   cursor: pointer;
 }