feat: enhance file deletion functionality with multi-select (#682)

## Summary

* **What is the goal of this PR?** Enhances the file manager with
multi-select deletion functionality and improved UI formatting.
* **What changes are included?**
	* Added multi-select capability for file deletion in the web interface
	* Fixed formatting issues in file table for folder rows
* Updated [.gitignore] to exclude additional build artifacts and cache
files
	* Refactored CrossPointWebServer.cpp to support batch file deletion
* Enhanced FilesPage.html with improved UI for file selection and
deletion

## Additional Context

* The file deletion endpoint now handles multiple files in a single
request, improving efficiency when removing multiple files
* Changes are focused on the web file manager component only

---

### AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing,
please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? _**PARTIALLY**_

---------

Co-authored-by: Jessica Harrison <jessica.harrison@entelect.co.za>
Co-authored-by: Dave Allie <dave@daveallie.com>

.gitignore

@@ -10,4 +10,5 @@ build
 **/__pycache__/
 /compile_commands.json
 /.cache
+.history/
 /.venv

src/network/CrossPointWebServer.cpp

@@ -914,84 +914,109 @@ void CrossPointWebServer::handleMove() const {
 }
 
 void CrossPointWebServer::handleDelete() const {
-  // Get path from form data
+  // Check if 'paths' argument is provided
-  if (!server->hasArg("path")) {
+  if (!server->hasArg("paths")) {
-    server->send(400, "text/plain", "Missing path");
+    server->send(400, "text/plain", "Missing paths");
     return;
   }
 
-  String itemPath = server->arg("path");
+  // Parse paths
-  const String itemType = server->hasArg("type") ? server->arg("type") : "file";
+  String pathsArg = server->arg("paths");
-
+  JsonDocument doc;
-  // Validate path
+  DeserializationError error = deserializeJson(doc, pathsArg);
-  if (itemPath.isEmpty() || itemPath == "/") {
+  if (error) {
-    server->send(400, "text/plain", "Cannot delete root directory");
+    server->send(400, "text/plain", "Invalid paths format");
     return;
   }
 
-  // Ensure path starts with /
+  auto paths = doc.as<JsonArray>();
-  if (!itemPath.startsWith("/")) {
+  if (paths.isNull() || paths.size() == 0) {
-    itemPath = "/" + itemPath;
+    server->send(400, "text/plain", "No paths provided");
-  }
-
-  // Security check: prevent deletion of protected items
-  const String itemName = itemPath.substring(itemPath.lastIndexOf('/') + 1);
-
-  // Check if item starts with a dot (hidden/system file)
-  if (itemName.startsWith(".")) {
-    LOG_DBG("WEB", "Delete rejected - hidden/system item: %s", itemPath.c_str());
-    server->send(403, "text/plain", "Cannot delete system files");
     return;
   }
 
-  // Check against explicitly protected items
+  // Iterate over paths and delete each item
-  for (size_t i = 0; i < HIDDEN_ITEMS_COUNT; i++) {
+  bool allSuccess = true;
-    if (itemName.equals(HIDDEN_ITEMS[i])) {
+  String failedItems;
-      LOG_DBG("WEB", "Delete rejected - protected item: %s", itemPath.c_str());
+
-      server->send(403, "text/plain", "Cannot delete protected items");
+  for (const auto& p : paths) {
-      return;
+    auto itemPath = p.as<String>();
+
+    // Validate path
+    if (itemPath.isEmpty() || itemPath == "/") {
+      failedItems += itemPath + " (cannot delete root); ";
+      allSuccess = false;
+      continue;
     }
-  }
 
-  // Check if item exists
+    // Ensure path starts with /
-  if (!Storage.exists(itemPath.c_str())) {
+    if (!itemPath.startsWith("/")) {
-    LOG_DBG("WEB", "Delete failed - item not found: %s", itemPath.c_str());
+      itemPath = "/" + itemPath;
-    server->send(404, "text/plain", "Item not found");
+    }
-    return;
-  }
 
-  LOG_DBG("WEB", "Attempting to delete %s: %s", itemType.c_str(), itemPath.c_str());
+    // Security check: prevent deletion of protected items
+    const String itemName = itemPath.substring(itemPath.lastIndexOf('/') + 1);
 
-  bool success = false;
+    // Hidden/system files are protected
+    if (itemName.startsWith(".")) {
+      failedItems += itemPath + " (hidden/system file); ";
+      allSuccess = false;
+      continue;
+    }
 
-  if (itemType == "folder") {
+    // Check against explicitly protected items
-    // For folders, try to remove (will fail if not empty)
+    bool isProtected = false;
-    FsFile dir = Storage.open(itemPath.c_str());
+    for (size_t i = 0; i < HIDDEN_ITEMS_COUNT; i++) {
-    if (dir && dir.isDirectory()) {
+      if (itemName.equals(HIDDEN_ITEMS[i])) {
-      // Check if folder is empty
+        isProtected = true;
-      FsFile entry = dir.openNextFile();
+        break;
-      if (entry) {
-        // Folder is not empty
-        entry.close();
-        dir.close();
-        LOG_DBG("WEB", "Delete failed - folder not empty: %s", itemPath.c_str());
-        server->send(400, "text/plain", "Folder is not empty. Delete contents first.");
-        return;
       }
-      dir.close();
     }
-    success = Storage.rmdir(itemPath.c_str());
+    if (isProtected) {
-  } else {
+      failedItems += itemPath + " (protected file); ";
-    // For files, use remove
+      allSuccess = false;
-    success = Storage.remove(itemPath.c_str());
+      continue;
+    }
+
+    // Check if item exists
+    if (!Storage.exists(itemPath.c_str())) {
+      failedItems += itemPath + " (not found); ";
+      allSuccess = false;
+      continue;
+    }
+
+    // Decide whether it's a directory or file by opening it
+    bool success = false;
+    FsFile f = Storage.open(itemPath.c_str());
+    if (f && f.isDirectory()) {
+      // For folders, ensure empty before removing
+      FsFile entry = f.openNextFile();
+      if (entry) {
+        entry.close();
+        f.close();
+        failedItems += itemPath + " (folder not empty); ";
+        allSuccess = false;
+        continue;
+      }
+      f.close();
+      success = Storage.rmdir(itemPath.c_str());
+    } else {
+      // It's a file (or couldn't open as dir) — remove file
+      if (f) f.close();
+      success = Storage.remove(itemPath.c_str());
+      clearEpubCacheIfNeeded(itemPath);
+    }
+
+    if (!success) {
+      failedItems += itemPath + " (deletion failed); ";
+      allSuccess = false;
+    }
   }
 
-  if (success) {
+  if (allSuccess) {
-    LOG_DBG("WEB", "Successfully deleted: %s", itemPath.c_str());
+    server->send(200, "text/plain", "All items deleted successfully");
-    server->send(200, "text/plain", "Deleted successfully");
   } else {
-    LOG_ERR("WEB", "Failed to delete: %s", itemPath.c_str());
+    server->send(500, "text/plain", "Failed to delete some items: " + failedItems);
-    server->send(500, "text/plain", "Failed to delete item");
   }
 }
 

src/network/html/FilesPage.html

@@ -653,6 +653,7 @@
   <div class="action-buttons">
     <button class="action-btn upload-action-btn" onclick="openUploadModal()">📤 Upload</button>
     <button class="action-btn folder-action-btn" onclick="openFolderModal()">📁 New Folder</button>
+    <button class="action-btn" style="background-color:#e74c3c" onclick="openDeleteSelectedModal()">🗑️ Delete Selected</button>
   </div>
 </div>
 
@@ -719,13 +720,11 @@
 <div class="modal-overlay" id="deleteModal">
   <div class="modal">
     <button class="modal-close" onclick="closeDeleteModal()">&times;</button>
-    <h3>🗑️ Delete Item</h3>
+    <h3>🗑️ Delete Item(s)</h3>
     <div class="folder-form">
       <p class="delete-warning">⚠️ This action cannot be undone!</p>
-      <p class="file-info">Are you sure you want to delete:</p>
+      <p class="file-info">Are you sure you want to delete the following item(s)?</p>
-      <p class="delete-item-name" id="deleteItemName"></p>
+      <div id="deleteItemList" style="max-height:240px; overflow:auto; margin-bottom:10px;"></div>
-      <input type="hidden" id="deleteItemPath">
-      <input type="hidden" id="deleteItemType">
       <button class="delete-btn-confirm" onclick="confirmDelete()">Delete</button>
       <button class="delete-btn-cancel" onclick="closeDeleteModal()">Cancel</button>
     </div>
@@ -837,7 +836,10 @@
       fileTable.innerHTML = '<div class="no-files">This folder is empty</div>';
     } else {
       let fileTableContent = '<table class="file-table">';
-      fileTableContent += '<tr><th>Name</th><th>Type</th><th>Size</th><th class="actions-col">Actions</th></tr>';
+
+				// Add select-all checkbox column
+      fileTableContent += '<tr><th style="width:40px"><input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll(this)"></th><th>Name</th><th>Type</th><th>Size</th><th class="actions-col">Actions</th></tr>';
+
 
       const sortedFiles = files.sort((a, b) => {
         // Directories first, then epub files, then other files, alphabetically within each group
@@ -854,7 +856,9 @@
           if (!folderPath.endsWith("/")) folderPath += "/";
           folderPath += file.name;
 
-          fileTableContent += '<tr class="folder-row">';
+         // Checkbox cell + folder row
+          fileTableContent += `<tr class="folder-row">`;
+          fileTableContent += `<td><input type="checkbox" class="select-item" data-path="${encodeURIComponent(folderPath)}" data-name="${escapeHtml(file.name)}" data-type="folder"></td>`;
           fileTableContent += `<td><span class="file-icon">📁</span><a href="/files?path=${encodeURIComponent(folderPath)}" class="folder-link">${escapeHtml(file.name)}</a><span class="folder-badge">FOLDER</span></td>`;
           fileTableContent += '<td>Folder</td>';
           fileTableContent += '<td>-</td>';
@@ -865,7 +869,9 @@
           if (!filePath.endsWith("/")) filePath += "/";
           filePath += file.name;
 
+          // Checkbox cell + file row
           fileTableContent += `<tr class="${file.isEpub ? 'epub-file' : ''}">`;
+          fileTableContent += `<td><input type="checkbox" class="select-item" data-path="${encodeURIComponent(filePath)}" data-name="${escapeHtml(file.name)}" data-type="file"></td>`;
           fileTableContent += `<td><span class="file-icon">${file.isEpub ? '📗' : '📄'}</span>${escapeHtml(file.name)}`;
           if (file.isEpub) fileTableContent += '<span class="epub-badge">EPUB</span>';
           fileTableContent += '</td>';
@@ -910,6 +916,92 @@
     document.getElementById('folderModal').classList.remove('open');
   }
 
+  // Toggle select-all checkbox
+  function toggleSelectAll(master) {
+    const checked = master.checked;
+    document.querySelectorAll('.select-item').forEach(cb => {
+      cb.checked = checked;
+    });
+  }
+
+  function getSelectedItems() {
+    const items = [];
+    document.querySelectorAll('.select-item:checked').forEach(cb => {
+      items.push({
+        name: cb.dataset.name || decodeURIComponent(cb.dataset.path).split('/').pop(),
+        path: decodeURIComponent(cb.dataset.path),
+        isFolder: cb.dataset.type === 'folder'
+      });
+    });
+    return items;
+  }
+
+  // Open delete modal for currently selected checkboxes
+  function openDeleteSelectedModal() {
+    const items = getSelectedItems();
+    if (items.length === 0) {
+      alert('Please select at least one item to delete.');
+      return;
+    }
+    openDeleteModalForItems(items);
+  }
+
+  // Open delete modal for a single item (keeps backwards compatibility with per-row delete button)
+  function openDeleteModal(name, path, isFolder) {
+    openDeleteModalForItems([{ name: name, path: path, isFolder: !!isFolder }]);
+  }
+
+  let deleteItemsGlobal = [];
+
+  function openDeleteModalForItems(items) {
+    deleteItemsGlobal = items;
+    const listEl = document.getElementById('deleteItemList');
+    listEl.innerHTML = '';
+    items.forEach(it => {
+      const div = document.createElement('div');
+      div.style.marginBottom = '6px';
+      div.textContent = (it.isFolder ? '📁 ' : '📄 ') + it.path;
+      listEl.appendChild(div);
+    });
+    document.getElementById('deleteModal').classList.add('open');
+  }
+
+  function closeDeleteModal() {
+    document.getElementById('deleteModal').classList.remove('open');
+  }
+
+  function confirmDelete() {
+    if (!deleteItemsGlobal || deleteItemsGlobal.length === 0) {
+      closeDeleteModal();
+      return;
+    }
+
+    const paths = deleteItemsGlobal.map(it => {
+      // Ensure path starts with /
+      let p = it.path;
+      if (!p.startsWith('/')) p = '/' + p;
+      return p;
+    });
+
+    const body = 'paths=' + encodeURIComponent(JSON.stringify(paths));
+    fetch('/delete', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: body
+    }).then(async res => {
+      if (res.ok) {
+        window.location.reload();
+      } else {
+        const text = await res.text();
+        alert('Failed to delete: ' + text);
+        closeDeleteModal();
+      }
+    }).catch(() => {
+      alert('Failed to delete - network error');
+      closeDeleteModal();
+    });
+  }
+
   function validateFile() {
     const fileInput = document.getElementById('fileInput');
     const uploadBtn = document.getElementById('uploadBtn');
@@ -1440,47 +1532,6 @@ function retryAllFailedUploads() {
 
     xhr.send(formData);
   }
-
-  // Delete functions
-  function openDeleteModal(name, path, isFolder) {
-    document.getElementById('deleteItemName').textContent = (isFolder ? '📁 ' : '📄 ') + name;
-    document.getElementById('deleteItemPath').value = path;
-    document.getElementById('deleteItemType').value = isFolder ? 'folder' : 'file';
-    document.getElementById('deleteModal').classList.add('open');
-  }
-
-  function closeDeleteModal() {
-    document.getElementById('deleteModal').classList.remove('open');
-  }
-
-  function confirmDelete() {
-    const path = document.getElementById('deleteItemPath').value;
-    const itemType = document.getElementById('deleteItemType').value;
-
-    const formData = new FormData();
-    formData.append('path', path);
-    formData.append('type', itemType);
-
-    const xhr = new XMLHttpRequest();
-    xhr.open('POST', '/delete', true);
-
-    xhr.onload = function() {
-      if (xhr.status === 200) {
-        window.location.reload();
-      } else {
-        alert('Failed to delete: ' + xhr.responseText);
-        closeDeleteModal();
-      }
-    };
-
-    xhr.onerror = function() {
-      alert('Failed to delete - network error');
-      closeDeleteModal();
-    };
-
-    xhr.send(formData);
-  }
-
   hydrate();
 </script>
 </body>