feat: Renamen functionaliteit aangepast

webui/html/app.js

@@ -34,6 +34,10 @@ let renameMoveState = {
   source: null,
   destination: "",
 };
+let renameState = {
+  source: null,
+  name: "",
+};
 let batchMoveState = {
   destinationBase: "",
   count: 0,
@@ -147,6 +151,17 @@ function renameMoveElements() {
   };
 }
 
+function renameElements() {
+  return {
+    overlay: document.getElementById("rename-popup"),
+    input: document.getElementById("rename-input"),
+    error: document.getElementById("rename-error"),
+    applyButton: document.getElementById("rename-apply-btn"),
+    cancelButton: document.getElementById("rename-cancel-btn"),
+    closeButton: document.getElementById("rename-close-btn"),
+  };
+}
+
 function batchMoveElements() {
   return {
     overlay: document.getElementById("batch-move-popup"),
@@ -920,7 +935,7 @@ function actionShortcutHandled(event) {
       return triggerActionButton("settings-btn");
     }
     if (event.key === "F2") {
-      return false;
+      return triggerActionButton("rename-btn");
     }
     if (event.key === "F3") {
       return triggerActionButton("view-btn");
@@ -991,6 +1006,10 @@ function isRenameMovePopupOpen() {
   return !renameMoveElements().overlay.classList.contains("hidden");
 }
 
+function isRenamePopupOpen() {
+  return !renameElements().overlay.classList.contains("hidden");
+}
+
 function isBatchMovePopupOpen() {
   return !batchMoveElements().overlay.classList.contains("hidden");
 }
@@ -1076,6 +1095,38 @@ function resetRenameMoveState() {
   };
 }
 
+function resetRenameState() {
+  renameState = {
+    source: null,
+    name: "",
+  };
+}
+
+function closeRenamePopup() {
+  const elements = renameElements();
+  elements.overlay.classList.add("hidden");
+  elements.error.textContent = "";
+  elements.input.value = "";
+  resetRenameState();
+}
+
+function openRenamePopup() {
+  const selectedItems = activePaneState().selectedItems;
+  if (selectedItems.length !== 1) {
+    return false;
+  }
+  const source = selectedItems[0];
+  const elements = renameElements();
+  renameState.source = source;
+  renameState.name = source.name;
+  elements.input.value = source.name;
+  elements.error.textContent = "";
+  elements.overlay.classList.remove("hidden");
+  elements.input.focus();
+  elements.input.select();
+  return true;
+}
+
 function resetBatchMoveState() {
   batchMoveState = {
     destinationBase: "",
@@ -1154,6 +1205,45 @@ function openF6Flow() {
   return openBatchMovePopup(selectedItems);
 }
 
+async function submitRenamePopup() {
+  const elements = renameElements();
+  const source = renameState.source;
+  if (!source) {
+    return;
+  }
+  const newName = elements.input.value.trim();
+  elements.error.textContent = "";
+  if (!newName) {
+    elements.error.textContent = "Name is required";
+    return;
+  }
+  if (newName === source.name) {
+    elements.error.textContent = "Name must differ from current name";
+    return;
+  }
+  if (newName.includes("/")) {
+    elements.error.textContent = "Name cannot contain /";
+    return;
+  }
+  if (newName === "." || newName === "..") {
+    elements.error.textContent = "Invalid name";
+    return;
+  }
+
+  try {
+    await apiRequest("POST", "/api/files/rename", {
+      path: source.path,
+      new_name: newName,
+    });
+    closeRenamePopup();
+    setSelectedItem(state.activePane, null);
+    await loadBrowsePane(state.activePane);
+    setStatus(`Renamed ${source.path}`);
+  } catch (err) {
+    elements.error.textContent = err.message;
+  }
+}
+
 async function submitRenameMovePopup() {
   const elements = renameMoveElements();
   const source = renameMoveState.source;
@@ -1532,6 +1622,19 @@ function clearSelectionForActivePane() {
 }
 
 function handleKeyboardShortcuts(event) {
+  if (isRenamePopupOpen()) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeRenamePopup();
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      submitRenamePopup();
+      return;
+    }
+    return;
+  }
   if (isSettingsOpen()) {
     if (event.key === "Escape") {
       event.preventDefault();
@@ -1679,12 +1782,33 @@ function setupEvents() {
   document.getElementById("settings-btn").onclick = () => openSettings("general");
   document.getElementById("view-btn").onclick = openViewer;
   document.getElementById("edit-btn").onclick = openEditor;
-  document.getElementById("rename-btn").onclick = renameSelected;
+  document.getElementById("rename-btn").onclick = openRenamePopup;
   document.getElementById("delete-btn").onclick = deleteSelected;
   document.getElementById("copy-btn").onclick = startCopySelected;
   document.getElementById("move-btn").onclick = openF6Flow;
   document.getElementById("mkdir-btn").onclick = createFolderForActivePane;
 
+  const rename = renameElements();
+  rename.closeButton.onclick = closeRenamePopup;
+  rename.cancelButton.onclick = closeRenamePopup;
+  rename.applyButton.onclick = submitRenamePopup;
+  rename.input.onkeydown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      submitRenamePopup();
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeRenamePopup();
+    }
+  };
+  rename.overlay.onclick = (event) => {
+    if (event.target === rename.overlay) {
+      closeRenamePopup();
+    }
+  };
+
   const settings = settingsElements();
   settings.closeButton.onclick = closeSettings;
   settings.generalTab.onclick = () => setSettingsTab("general");