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) {
+
+}

templates/libraries.html.hbs

@@ -1,5 +1,25 @@
 {{#> layouts/main }}
 <div class="">
+    <div class="modal" id="modal-prompt">
+        <div class="modal-background"></div>
+        <div class="modal-card is-radiusless">
+            <form onsubmit="touchSubmit(event)">
+                <header class="modal-card-head is-radiusless py-5">
+                    <p class="modal-card-title" id="modal-prompt-title">New Item</p>
+                    <button class="delete" aria-label="close"></button>
+                </header>
+                <section class="modal-card-body is-radiusless py-4">
+                    <input autocomplete="off" id="modal-prompt-type" required type="hidden">
+                    <input autocomplete="off" id="modal-prompt-input" required type="text" class="input" placeholder="">
+                </section>
+                <footer class="modal-card-foot is-radiusless py-3">
+                    <div class="buttons">
+                        <input type="submit" class="button is-primary" value="Create"></input>
+                    </div>
+                </footer>
+            </form>
+        </div>
+    </div>
     <nav class="breadcrumb is-inline-block is-size-5 mb-0" aria-label="breadcrumbs">
         <ul>
             <li><a class="has-text-black" href="/library/{{library.id}}/{{library.name}}/">{{ library.name }}</a></li>
@@ -8,11 +28,27 @@
                     <a class="has-text-black" href="/library/{{../library.id}}/{{../library.name}}/{{path}}" aria-current="page">  {{ segment }} </a>
                     </li>
             {{/each}}
-            <div class="button is-small">
-                +
-            </div>
         </ul>
     </nav>
+    <div class="dropdown is-hoverable is-hidden" id="add-dropdown">
+        <div class="dropdown-trigger">
+            <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu">
+                <span class="icon is-small">
+                    <i class="fas fa-plus"></i>
+                </span>
+            </button>
+        </div>
+        <div class="dropdown-menu" role="menu">
+            <div class="dropdown-content">
+                <a onclick="touch('file')" id="new_file" href="#" class="dropdown-item"> New File </a>
+                <a onclick="touch('folder')"id="new_folder" class="dropdown-item"> New Folder </a>
+                <hr class="dropdown-divider" />
+                <a onclick="upload('file')" id="upload_file" href="#" class="dropdown-item"> Upload File </a>
+                <a onclick="upload('folder')" id="upload_folder" href="#" class="dropdown-item"> Upload Folder </a>
+            </div>
+        </div>
+    </div>
+    <noscript><em>Javascript required to create/upload files</noscript>
     <div class="is-pulled-right is-inline-block">
         <div class="buttons">
             <div class="button is-small">
@@ -80,3 +116,9 @@
     </table>
 </div>
 {{/layouts/main}}
+
+<script>
+const LIBRARY_ID = "{{ library.id }}";
+const LIBRARY_PATH = "/{{ parent }}";
+</script>
+<script src="/static/js/add_button.js"></script>