feat: folder upload - deel 3

webui/html/app.js

@@ -325,7 +325,11 @@ function infoElements() {
 
 function uploadElements() {
   return {
+    menu: document.getElementById("upload-menu"),
     button: document.getElementById("upload-btn"),
+    menuToggle: document.getElementById("upload-menu-toggle"),
+    menuPopup: document.getElementById("upload-menu-popup"),
+    folderButton: document.getElementById("upload-folder-btn"),
     input: document.getElementById("upload-input"),
     progress: document.getElementById("upload-progress"),
     target: document.getElementById("upload-target"),
@@ -477,6 +481,25 @@ function setUploadProgressVisible(visible) {
   uploadElements().progress.classList.toggle("hidden", !visible);
 }
 
+function closeUploadMenu() {
+  const elements = uploadElements();
+  if (!elements.menuPopup || !elements.menuToggle) {
+    return;
+  }
+  elements.menuPopup.classList.add("hidden");
+  elements.menuToggle.setAttribute("aria-expanded", "false");
+}
+
+function toggleUploadMenu() {
+  const elements = uploadElements();
+  if (!elements.menuPopup || !elements.menuToggle) {
+    return;
+  }
+  const nextOpen = elements.menuPopup.classList.contains("hidden");
+  elements.menuPopup.classList.toggle("hidden", !nextOpen);
+  elements.menuToggle.setAttribute("aria-expanded", nextOpen ? "true" : "false");
+}
+
 function resetUploadProgress() {
   const elements = uploadElements();
   uploadState.active = false;
@@ -523,6 +546,7 @@ function openUploadPicker() {
   if (uploadState.active) {
     return;
   }
+  closeUploadMenu();
   uploadState.targetPath = activePaneState().currentPath;
   const elements = uploadElements();
   elements.input.value = "";
@@ -533,6 +557,7 @@ function openFolderPicker() {
   if (uploadState.active) {
     return;
   }
+  closeUploadMenu();
   folderUploadPlanState = {
     targetPane: state.activePane,
     targetPath: activePaneState().currentPath,
@@ -3040,6 +3065,11 @@ function clearSelectionForActivePane() {
 }
 
 function handleKeyboardShortcuts(event) {
+  if (event.key === "Escape" && !uploadElements().menuPopup.classList.contains("hidden")) {
+    event.preventDefault();
+    closeUploadMenu();
+    return;
+  }
   if (isInfoOpen()) {
     if (event.key === "Escape") {
       event.preventDefault();
@@ -3264,13 +3294,12 @@ function setupEvents() {
   setupPaneEvents("right");
   document.addEventListener("keydown", handleKeyboardShortcuts);
   document.getElementById("theme-toggle").onclick = toggleTheme;
-  document.getElementById("upload-btn").onclick = (event) => {
-    if (event.altKey) {
-      openFolderPicker();
-      return;
-    }
-    openUploadPicker();
+  document.getElementById("upload-btn").onclick = openUploadPicker;
+  document.getElementById("upload-menu-toggle").onclick = (event) => {
+    event.stopPropagation();
+    toggleUploadMenu();
   };
+  document.getElementById("upload-folder-btn").onclick = openFolderPicker;
   document.getElementById("settings-btn").onclick = () => openSettings("general");
   document.getElementById("view-btn").onclick = openViewer;
   document.getElementById("edit-btn").onclick = openEditor;
@@ -3280,6 +3309,13 @@ function setupEvents() {
   document.getElementById("move-btn").onclick = openF6Flow;
   document.getElementById("mkdir-btn").onclick = createFolderForActivePane;
   uploadElements().input.onchange = handleUploadSelection;
+  document.addEventListener("click", (event) => {
+    const elements = uploadElements();
+    if (!elements.menu || elements.menu.contains(event.target)) {
+      return;
+    }
+    closeUploadMenu();
+  });
 
   const rename = renameElements();
   rename.closeButton.onclick = closeRenamePopup;