fix(spa): place the bulk-actions menu left of the search input (#512)

The Actions menu lived in the FilterBar `trailing` slot, so it rendered
to the right of the search input. Django's changelist leads the toolbar
with the actions selector, and it should sit before search once a row is
selected.

Add a `leading` slot to FilterBar (rendered before the search input) and
move the Actions menu there; the column "Customize" button stays
trailing. The menu still appears only when the user can run actions and
at least one row is selected.

Tests: add a FilterBar case asserting `leading` precedes the search input
in the DOM (101 passed).

Co-authored-by: Martin Castro Laminrs <mcastro@laminr.ai>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 3 people

frontend/apps/web/src/pages/ListPage.tsx

@@ -476,58 +476,61 @@ export function ListPage() {
         active={activeFilters}
         onFilterChange={setFilter}
         onClearAll={() => patchParams((next) => filters.forEach((f) => next.delete(f.name)))}
-        trailing={
-          <>
-            {canRunActions && selected.size > 0 && (
-              <div className="relative">
-                <button
-                  type="button"
-                  onClick={() => setActionsOpen((o) => !o)}
-                  aria-haspopup="menu"
-                  aria-expanded={actionsOpen}
-                  disabled={runningAction}
-                  className="shrink-0 rounded-md border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-100 disabled:opacity-50"
+        // Bulk-actions menu sits to the LEFT of the search input, and
+        // only once at least one row is selected (Django changelist
+        // parity — the actions selector leads the toolbar).
+        leading={
+          canRunActions && selected.size > 0 ? (
+            <div className="relative">
+              <button
+                type="button"
+                onClick={() => setActionsOpen((o) => !o)}
+                aria-haspopup="menu"
+                aria-expanded={actionsOpen}
+                disabled={runningAction}
+                className="shrink-0 rounded-md border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-100 disabled:opacity-50"
+              >
+                Actions · {selected.size} ▾
+              </button>
+              {actionsOpen && (
+                <div
+                  role="menu"
+                  className="absolute left-0 z-20 mt-1 min-w-48 rounded border border-gray-200 bg-white py-1 shadow-lg"
                 >
-                  Actions · {selected.size} ▾
-                </button>
-                {actionsOpen && (
-                  <div
-                    role="menu"
-                    className="absolute left-0 z-20 mt-1 min-w-48 rounded border border-gray-200 bg-white py-1 shadow-lg"
-                  >
-                    {actions.map((a) => (
-                      <button
-                        key={a.name}
-                        type="button"
-                        role="menuitem"
-                        onClick={() => requestAction(a)}
-                        className="block w-full px-3 py-2 text-left text-sm hover:bg-gray-100"
-                        title={a.description}
-                      >
-                        {a.label}
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            )}
-            <button
-              type="button"
-              onClick={() => setColsOpen(true)}
-              aria-haspopup="dialog"
-              aria-label="Customize columns"
-              title="Customize columns"
-              className="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-100"
-            >
-              <Settings2 className="h-4 w-4" aria-hidden />
-              Customize
-              {hiddenCols.size > 0 && (
-                <span className="ml-0.5 rounded-full bg-gray-500 px-1.5 py-0.5 text-xs text-white">
-                  {hiddenCols.size} hidden
-                </span>
+                  {actions.map((a) => (
+                    <button
+                      key={a.name}
+                      type="button"
+                      role="menuitem"
+                      onClick={() => requestAction(a)}
+                      className="block w-full px-3 py-2 text-left text-sm hover:bg-gray-100"
+                      title={a.description}
+                    >
+                      {a.label}
+                    </button>
+                  ))}
+                </div>
               )}
-            </button>
-          </>
+            </div>
+          ) : null
+        }
+        trailing={
+          <button
+            type="button"
+            onClick={() => setColsOpen(true)}
+            aria-haspopup="dialog"
+            aria-label="Customize columns"
+            title="Customize columns"
+            className="inline-flex shrink-0 items-center gap-1.5 rounded-md border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-100"
+          >
+            <Settings2 className="h-4 w-4" aria-hidden />
+            Customize
+            {hiddenCols.size > 0 && (
+              <span className="ml-0.5 rounded-full bg-gray-500 px-1.5 py-0.5 text-xs text-white">
+                {hiddenCols.size} hidden
+              </span>
+            )}
+          </button>
         }
       />
 

frontend/packages/search/src/FilterBar.test.tsx

@@ -78,4 +78,26 @@ describe('FilterBar', () => {
     fireEvent.change(screen.getByLabelText('Search'), { target: { value: 'abc' } });
     expect(onSearchChange).toHaveBeenCalledWith('abc');
   });
+
+  it('renders `leading` content before the search input (to its left)', () => {
+    render(
+      <FilterBar
+        searchValue=""
+        onSearchChange={() => {}}
+        filters={[]}
+        active={{}}
+        onFilterChange={() => {}}
+        onClearAll={() => {}}
+        leading={<button type="button">Actions · 2 ▾</button>}
+        trailing={<button type="button">Customize</button>}
+      />,
+    );
+    const actions = screen.getByRole('button', { name: /Actions/ });
+    const search = screen.getByLabelText('Search');
+    // `leading` precedes the search input in the DOM, so the actions
+    // menu sits to its left in the toolbar row.
+    expect(
+      actions.compareDocumentPosition(search) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
 });

frontend/packages/search/src/FilterBar.tsx

@@ -28,8 +28,11 @@ export interface FilterBarProps {
   /** Set/clear one filter — pass '' to clear it. */
   onFilterChange: (name: string, value: string) => void;
   onClearAll: () => void;
+  /** Controls rendered to the **left** of the search input (e.g. the
+   *  bulk-actions menu, which sits before search when rows are selected). */
+  leading?: ReactNode;
   /** Extra toolbar controls rendered to the right of the search input
-   *  (e.g. the column customizer + bulk-actions menu). */
+   *  (e.g. the column customizer). */
   trailing?: ReactNode;
 }
 
@@ -54,12 +57,14 @@ export function FilterBar({
   active,
   onFilterChange,
   onClearAll,
+  leading,
   trailing,
 }: FilterBarProps) {
   const anyActive = filters.some((f) => active[f.name]);
   return (
     <div className="space-y-2">
       <div className="flex flex-wrap items-center gap-2">
+        {leading}
         {showSearch && (
           <form
             className="w-full max-w-sm"