From a8646e76a803108d338c5431cdaf17af37ed75f1 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Wed, 19 Aug 2026 18:47:46 +0200
Subject: [PATCH] refactor(webui): adopt semantic workspace actions

---
 webui/src/features/tasks/TasksPage.tsx | 68 +++++++++++++-------------
 1 file changed, 35 insertions(+), 33 deletions(-)

diff --git a/webui/src/features/tasks/TasksPage.tsx b/webui/src/features/tasks/TasksPage.tsx
index 5eefe35..04b79aa 100644
--- a/webui/src/features/tasks/TasksPage.tsx
+++ b/webui/src/features/tasks/TasksPage.tsx
@@ -6,15 +6,12 @@ import {
   ExternalLink,
   ListChecks,
   Plus,
-  RefreshCw,
   RotateCcw,
   Search,
   XCircle
 } from "lucide-react";
 import { Link } from "react-router";
-import { FormGrid, ToolbarGroup,
-  ActionToolbar,
-  AdminIconButton,
+import { FormGrid,
   Button,
   DateTimeField,
   Dialog,
@@ -27,6 +24,7 @@ import { FormGrid, ToolbarGroup,
   SelectionListItem,
   StatePanel,
   StatusBadge,
+  WorkspaceActionBar,
   WorkspaceFrame,
   WorkspaceLayout,
   hasScope,
@@ -140,26 +138,24 @@ export default function TasksPage({ settings, auth }: { settings: ApiSettings; a
         helpContextId="tasks.page.inbox"
         helpModuleId="tasks"
         primary={<>
-          <ActionToolbar surface="panel-header" className="tasks-sidebar-bar">
-            <span className="tasks-title"><ListChecks size={18} /><strong>i18n:govoplan-tasks.work</strong></span>
-            <ToolbarGroup align="end" className="tasks-toolbar-actions">
-              <AdminIconButton
-                label="i18n:govoplan-tasks.refresh"
-                icon={<RefreshCw size={16} aria-hidden="true" />}
-                onClick={() => void load()}
-                disabled={loading || busy}
-              />
-              {canWrite ? (
-                <AdminIconButton
-                  label="i18n:govoplan-tasks.create_task"
-                  icon={<Plus size={16} aria-hidden="true" />}
-                  onClick={() => setCreateOpen(true)}
-                  disabled={busy}
-                  helpContextId="tasks.action.create"
-                />
-              ) : null}
-            </ToolbarGroup>
-          </ActionToolbar>
+          <WorkspaceActionBar
+            scope="collection-pane"
+            variant="collection"
+            refreshable
+            reloadAction={{ onReload: () => void load(), loading: loading || busy, label: "i18n:govoplan-tasks.refresh" }}
+            className="tasks-sidebar-bar"
+            contextActions={<span className="tasks-title"><ListChecks size={18} /><strong>i18n:govoplan-tasks.work</strong></span>}
+            createAction={canWrite ? (
+              <Button
+                variant="primary"
+                onClick={() => setCreateOpen(true)}
+                disabled={busy}
+                helpContextId="tasks.action.create"
+              >
+                <Plus size={16} aria-hidden="true" /> i18n:govoplan-tasks.create_task
+              </Button>
+            ) : undefined}
+          />
           <FilterBar as="form" surface="control" wrap="never" className="tasks-search" onSubmit={submitSearch} role="search">
             <Search size={15} aria-hidden="true" />
             <input
@@ -203,13 +199,20 @@ export default function TasksPage({ settings, auth }: { settings: ApiSettings; a
         </>}
       >
 
-          <ActionToolbar surface="panel-header" className="tasks-topbar" data-help-context-id="tasks.page.detail">
-            <span className="tasks-detail-title"><ListChecks size={18} /><strong>{selected?.title ?? "i18n:govoplan-tasks.work_details"}</strong></span>
-            <ToolbarGroup align="end" className="tasks-toolbar-actions">
-              <DocumentationHelpLink reference={DOCUMENTATION} />
-              {selected?.provider_id === "tasks.explicit" && canWrite ? <TaskActions item={selected} busy={busy} onAction={(action) => action === "defer" ? setDeferOpen(true) : void runAction(action)} /> : null}
-            </ToolbarGroup>
-          </ActionToolbar>
+          <WorkspaceActionBar
+            scope="detail-pane"
+            variant="detail"
+            className="tasks-topbar"
+            data-help-context-id="tasks.page.detail"
+            contextActions={<span className="tasks-detail-title"><ListChecks size={18} /><strong>{selected?.title ?? "i18n:govoplan-tasks.work_details"}</strong></span>}
+            helpAction={<DocumentationHelpLink reference={DOCUMENTATION} />}
+            primaryActions={selected?.provider_id === "tasks.explicit" && canWrite ? (
+              <TaskPrimaryActions item={selected} busy={busy} onAction={(action) => action === "defer" ? setDeferOpen(true) : void runAction(action)} />
+            ) : undefined}
+            destructiveActions={selected?.provider_id === "tasks.explicit" && canWrite && !["completed", "cancelled"].includes(selected.status) ? (
+              <Button variant="danger" onClick={() => void runAction("cancel")} disabled={busy}><XCircle size={15} /> i18n:govoplan-tasks.cancel_task</Button>
+            ) : undefined}
+          />
 
           {error ? <DismissibleAlert tone="danger" compact resetKey={error}>{error}</DismissibleAlert> : null}
           {diagnostics.map((message) => <DismissibleAlert key={message} tone="warning" compact resetKey={message}>{message}</DismissibleAlert>)}
@@ -250,7 +253,7 @@ export default function TasksPage({ settings, auth }: { settings: ApiSettings; a
   );
 }
 
-function TaskActions({ item, busy, onAction }: { item: WorkItem; busy: boolean; onAction: (action: "start" | "complete" | "defer" | "reopen" | "cancel") => void }) {
+function TaskPrimaryActions({ item, busy, onAction }: { item: WorkItem; busy: boolean; onAction: (action: "start" | "complete" | "defer" | "reopen") => void }) {
   if (["completed", "cancelled"].includes(item.status)) {
     return <Button onClick={() => onAction("reopen")} disabled={busy}><RotateCcw size={15} /> i18n:govoplan-tasks.reopen</Button>;
   }
@@ -259,7 +262,6 @@ function TaskActions({ item, busy, onAction }: { item: WorkItem; busy: boolean;
       {["open", "deferred"].includes(item.status) ? <Button onClick={() => onAction("start")} disabled={busy}><CirclePlay size={15} /> i18n:govoplan-tasks.start</Button> : null}
       <Button variant="primary" onClick={() => onAction("complete")} disabled={busy}><Check size={15} /> i18n:govoplan-tasks.complete</Button>
       <Button onClick={() => onAction("defer")} disabled={busy}><CalendarClock size={15} /> i18n:govoplan-tasks.defer</Button>
-      <Button variant="danger" onClick={() => onAction("cancel")} disabled={busy}><XCircle size={15} /> i18n:govoplan-tasks.cancel_task</Button>
     </>
   );
 }