Add kinda crappy create file UI

static/js/add_button.js

@@ -0,0 +1,75 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const addDropdown = document.getElementById("add-dropdown")
+    addDropdown.classList.remove("is-hidden")
+
+    document.getElementById("modal-prompt-form")
+
+  // Functions to open and close a modal
+  function openModal($el) {
+    $el.classList.add('is-active');
+  }
+
+  function closeModal($el) {
+    $el.classList.remove('is-active');
+  }
+
+  function closeAllModals() {
+    (document.querySelectorAll('.modal') || []).forEach(($modal) => {
+      closeModal($modal);
+    });
+  }
+
+  // Add a click event on various child elements to close the parent modal
+  (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+    const $target = $close.closest('.modal');
+
+    $close.addEventListener('click', () => {
+      closeModal($target);
+    });
+  });
+
+  // Add a keyboard event to close all modals
+  document.addEventListener('keydown', (event) => {
+    if(event.key === "Escape") {
+      closeAllModals();
+    }
+  });
+});
+
+function touch(type) {
+    document.getElementById("modal-prompt").classList.add("is-active")
+    document.getElementById("modal-prompt-input").focus()
+    document.getElementById("modal-prompt-type").value = type
+    if(type === "file") {
+        document.getElementById("modal-prompt-input").setAttribute("placeholder", "myfile.txt")
+        document.getElementById("modal-prompt-title").textContent = `Enter file name`
+    } else {
+        document.getElementById("modal-prompt-input").setAttribute("placeholder", "My Folder")
+        document.getElementById("modal-prompt-title").textContent = `Enter folder name`
+    }
+}
+async function touchSubmit(event) {
+    event.preventDefault();
+    const name = document.getElementById("modal-prompt-input").value
+    const type = document.getElementById("modal-prompt-type").value
+    console.debug("touch", type, name)
+
+    const response = await fetch(`/api/library/${LIBRARY_ID}/touch?path=${LIBRARY_PATH}`, {
+        headers: {
+            "Content-Type": "application/json"
+        },
+        method: "POST",
+        body: JSON.stringify({
+            type,
+            filename: name
+        })
+    })
+    if(response.ok) {
+        window.location.reload()
+    } else {
+        alert("error todo: better dialog")
+    }
+}
+function upload(type) {
+
+}