feat: annuleren taak toegevoegd

webui/html/app.js

@@ -122,7 +122,7 @@ let headerTaskState = {
 };
 // The header chip reflects only user-visible file actions that use the shared task system.
 const ACTIVE_TASK_OPERATIONS = new Set(["copy", "move", "duplicate", "delete"]);
-const ACTIVE_TASK_STATUSES = new Set(["queued", "running"]);
+const ACTIVE_TASK_STATUSES = new Set(["queued", "running", "cancelling"]);
 const VALID_THEME_FAMILIES = [
   "default",
   "macos-soft",
@@ -3835,6 +3835,10 @@ function formatTaskStatusLabel(task) {
       return "Queued";
     case "running":
       return "Running";
+    case "cancelling":
+      return "Cancelling";
+    case "cancelled":
+      return "Cancelled";
     case "completed":
       return "Completed";
     case "failed":
@@ -3883,6 +3887,14 @@ function activeTasksFromItems(items) {
   return Array.isArray(items) ? items.filter((task) => isActiveTask(task)) : [];
 }
 
+function taskIsCancellable(task) {
+  return Boolean(task) && ACTIVE_TASK_OPERATIONS.has(task.operation) && ["queued", "running"].includes(task.status);
+}
+
+async function cancelTaskRequest(taskId) {
+  return apiRequest("POST", `/api/tasks/${encodeURIComponent(taskId)}/cancel`);
+}
+
 function activeTaskChipLabel(count) {
   return `${count} active task${count === 1 ? "" : "s"}`;
 }
@@ -3972,6 +3984,29 @@ function renderHeaderTaskPopover(items) {
     meta.className = "header-task-item-meta";
     meta.textContent = line.meta;
     row.append(title, path, meta);
+    if (taskIsCancellable(task) || task.status === "cancelling") {
+      const actions = document.createElement("div");
+      actions.className = "header-task-item-actions";
+      const cancelButton = document.createElement("button");
+      cancelButton.type = "button";
+      cancelButton.className = "header-task-item-action";
+      cancelButton.textContent = task.status === "cancelling" ? "Stopping..." : "Stop";
+      cancelButton.disabled = task.status === "cancelling";
+      if (!cancelButton.disabled) {
+        cancelButton.onclick = async () => {
+          cancelButton.disabled = true;
+          try {
+            await cancelTaskRequest(task.id);
+            await refreshTasksSnapshot();
+          } catch (err) {
+            cancelButton.disabled = false;
+            setError("actions-error", `Stop task: ${err.message}`);
+          }
+        };
+      }
+      actions.append(cancelButton);
+      row.append(actions);
+    }
     elements.popoverList.append(row);
   }
   headerTaskState.lastRenderKey = renderKey;

webui/html/base.css

@@ -157,6 +157,18 @@ body {
   word-break: break-word;
 }
 
+.header-task-item-actions {
+  margin-top: 8px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.header-task-item-action {
+  min-width: 74px;
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
 h1, h2, h3 {
   margin: 0;
 }