From b47d23b9c6d17f0541989a5074a1d21442f6d962 Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Tue, 5 May 2026 00:37:14 -0700
Subject: [PATCH] feat(FN-3486): move new task action to trailing edge in
 ListView and refact

Merged two commits: relocated the new-task action button in ListView from the leading to trailing edge (FN-3486), and added a theme regression test for WorkflowResultsTab (FN-3462). Changes span ListView component and styles, WorkflowResultsTab CSS refactoring and tests, plus a dev-server-store upda

Fusion-Task-Id: FN-3486
---
 .../dashboard/app/components/ListView.css     |  8 ++++++++
 .../dashboard/app/components/ListView.tsx     | 20 +++++++++----------
 .../components/__tests__/ListView.test.tsx    | 19 ++++++++++++++++++
 3 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/packages/dashboard/app/components/ListView.css b/packages/dashboard/app/components/ListView.css
index f9aedbfa4..9958060d4 100644
--- a/packages/dashboard/app/components/ListView.css
+++ b/packages/dashboard/app/components/ListView.css
@@ -31,6 +31,14 @@
   gap: var(--space-sm);
 }
 
+.list-sidebar-controls__actions .list-new-task-action {
+  margin-left: auto;
+}
+
+.list-toolbar .list-new-task-action {
+  margin-left: auto;
+}
+
 .list-sidebar-summary-chips {
   display: flex;
   flex-wrap: wrap;
diff --git a/packages/dashboard/app/components/ListView.tsx b/packages/dashboard/app/components/ListView.tsx
index 7f26bae1e..24a9b3122 100644
--- a/packages/dashboard/app/components/ListView.tsx
+++ b/packages/dashboard/app/components/ListView.tsx
@@ -1007,11 +1007,6 @@ export function ListView({
             <button className="btn btn-sm" onClick={toggleBulkEdit} aria-pressed={bulkEditEnabled}>
               {bulkEditEnabled ? "Done Editing" : "Bulk Edit"}
             </button>
-            {onNewTask ? (
-              <button className="btn btn-task-create btn-sm" onClick={onNewTask}>
-                + New Task
-              </button>
-            ) : null}
             <button
               className="btn btn-sm list-view-options-toggle"
               onClick={() => setViewOptionsOpen((prev) => !prev)}
@@ -1021,6 +1016,11 @@ export function ListView({
               <Columns3 size={14} />
               View options
             </button>
+            {onNewTask ? (
+              <button className="btn btn-task-create btn-sm list-new-task-action" onClick={onNewTask}>
+                + New Task
+              </button>
+            ) : null}
             <div className="list-stats">
               {selectedColumn
                 ? `${filteredCount} of ${tasks.length} tasks in ${COLUMN_LABELS[selectedColumn]}`
@@ -1053,14 +1053,14 @@ export function ListView({
                     )}
                   </p>
                   <div className="list-sidebar-controls__actions">
-                    {onNewTask ? (
-                      <button className="btn btn-task-create btn-sm" onClick={onNewTask}>
-                        + New Task
-                      </button>
-                    ) : null}
                     <button className="btn btn-sm" onClick={toggleBulkEdit} aria-pressed={bulkEditEnabled}>
                       {bulkEditEnabled ? "Done Editing" : "Bulk Edit"}
                     </button>
+                    {onNewTask ? (
+                      <button className="btn btn-task-create btn-sm list-new-task-action" onClick={onNewTask}>
+                        + New Task
+                      </button>
+                    ) : null}
                   </div>
                   <div className="list-sidebar-summary-chips">
                     {selectedColumn ? (
diff --git a/packages/dashboard/app/components/__tests__/ListView.test.tsx b/packages/dashboard/app/components/__tests__/ListView.test.tsx
index f1b4c6acf..f8d38878c 100644
--- a/packages/dashboard/app/components/__tests__/ListView.test.tsx
+++ b/packages/dashboard/app/components/__tests__/ListView.test.tsx
@@ -881,6 +881,25 @@ describe("ListView", () => {
     expect(mockOnNewTask).toHaveBeenCalled();
   });
 
+  it("renders + New Task as the trailing desktop sidebar control", () => {
+    renderListView({}, { openViewOptions: false });
+
+    const actions = document.querySelector(".list-sidebar-controls__actions");
+    const actionButtons = Array.from(actions?.querySelectorAll("button") ?? []);
+    expect(actionButtons.at(-1)?.textContent).toContain("+ New Task");
+  });
+
+  it("renders + New Task as the trailing mobile toolbar control", () => {
+    const viewportSpy = mockMobileViewport();
+    renderListView({}, { openViewOptions: false });
+
+    const toolbar = document.querySelector(".list-toolbar");
+    const toolbarButtons = Array.from(toolbar?.querySelectorAll("button") ?? []);
+    expect(toolbarButtons.at(-1)?.textContent).toContain("+ New Task");
+
+    viewportSpy.mockRestore();
+  });
+
   it("+ New Task button uses theme-driven btn-task-create class", () => {
     const mockOnNewTask = vi.fn();
     renderListView({ onNewTask: mockOnNewTask });