clear file picker button

extension/api.js

@@ -74,14 +74,24 @@ storage.get = (namespace, key = undefined, fallback = undefined) =>
  * @param {string} key - the key associated with the value
  * @param {*} value - the data to save
  */
+storage._queue = [];
 storage.set = (namespace, key, value) => {
-  return new Promise(async (res, rej) => {
+  const precursor = storage._queue[storage._queue.length - 1] || undefined,
-    const values = await storage.get(namespace, undefined, {});
+    interaction = new Promise(async (res, rej) => {
-    storage._onChangeListeners.forEach((listener) =>
+      if (precursor !== undefined) {
-      listener({ type: 'set', namespace, key, new: value, old: values[key] })
+        await precursor;
-    );
+        storage._queue.shift();
-    chrome.storage.sync.set({ [namespace]: { ...values, [key]: value } }, res);
+      }
-  });
+      const values = await storage.get(namespace, undefined, {});
+      if (values.hasOwnProperty(key)) delete values[key];
+      storage._onChangeListeners.forEach((listener) =>
+        listener({ type: 'set', namespace, key, new: value, old: values[key] })
+      );
+      console.log(namespace, key, value, { ...values, [key]: value });
+      chrome.storage.sync.set({ [namespace]: { ...values, [key]: value } }, res);
+    });
+  storage._queue.push(interaction);
+  return interaction;
 };
 /**
  * clear data from an enhancer store

extension/icons/fa/long-arrow-alt-right.svg

@@ -1,2 +1,2 @@
 <!-- https://fontawesome.com/icons/long-arrow-alt-right?style=solid -->
-<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z"></path></svg>

extension/icons/fa/minus.svg

@@ -0,0 +1,2 @@
+<!-- https://fontawesome.com/icons/minus?style=solid -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>

extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.css

@@ -386,6 +386,18 @@ label [data-icon='fa/question-circle'] {
   border: none;
   background: none;
 }
+.library--file_label .library--file_title {
+  display: flex;
+}
+.library--file_title .library--file_remove {
+  margin-top: auto;
+  padding-top: 0.2em;
+  margin-left: auto;
+}
+.library--file_title .library--file_remove svg {
+  cursor: pointer;
+  width: 0.8em;
+}
 .library--title,
 .library--title h2 {
   margin: 0;

extension/repo/menu@a6621988-551d-495a-97d8-3c568bca2e9e/menu.js

@@ -240,8 +240,9 @@ components.options = {
             : ''
         )}
       />
-      <p><span data-tooltip>${web.escapeHtml(label)}
+      <p class="library--file_title"><span data-tooltip>${web.escapeHtml(label)}
-      <i data-icon="fa/question-circle"></i></span></p>
+      <i data-icon="fa/question-circle"></i></span>
+      <span class="library--file_remove"><i data-icon="fa/minus"></i></span></p>
       <p class="library--file">
         <span><i data-icon="fa/file"></i></span>
         <span class="library--file_path">${web.escapeHtml(state || 'choose file...')}</span>
@@ -250,13 +251,24 @@ components.options = {
     opt.addEventListener('change', (event) => {
       const file = event.target.files[0],
         reader = new FileReader();
-      opt.querySelector('.library--file_path').innerText = file.name;
+        opt.querySelector('.library--file_path').innerText = file.name;
-      storage.set(id, key, file.name);
+        reader.onload = (progress) => {
-      reader.onload = (progress) => {
+        storage.set(id, key, file.name);
         storage.set(id, `_file.${key}`, progress.currentTarget.result);
       };
       reader.readAsText(file);
     });
+    opt.querySelector('.library--file_remove').addEventListener(
+      'click',
+      (event) => {
+        event.preventDefault();
+        opt.querySelector('input').value = '';
+        opt.querySelector('.library--file_path').innerText = 'choose file...';
+        storage.set(id, key, undefined);
+        storage.set(id, `_file.${key}`, undefined);
+      },
+      false
+    );
     opt.addEventListener('click', (event) => {
       document.documentElement.scrollTop = 0;
     });