feat(spa): toolbar polish — one toolbar per page, icon-only History, leading icons on Edit/Delete (#610)

Closes #608. Patch — UX polish, no API change.

Author: MartinCastroAlvarez

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

@@ -10,7 +10,14 @@
 // Edit/Delete are gated by the `permissions` block the API returns.
 
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { ChevronDown, Clock, ExternalLink, RefreshCw } from 'lucide-react';
+import {
+  ChevronDown,
+  Clock,
+  ExternalLink,
+  Pencil,
+  RefreshCw,
+  Trash2,
+} from 'lucide-react';
 import { Link, useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
 import {
@@ -255,9 +262,15 @@ export function DetailPage({
             <button
               type="button"
               onClick={() => setHistoryOpen(true)}
-              className="inline-flex items-center gap-1.5 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
+              aria-label="History"
+              title="History"
+              // Icon-only (#608) — the clock icon already speaks for
+              // itself alongside the other small icon-only buttons
+              // (Refresh, the per-object actions); the "History"
+              // label was redundant chrome on a crowded header.
+              className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-2 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500"
             >
-              <Clock className="h-4 w-4" aria-hidden /> History
+              <Clock className="h-4 w-4" aria-hidden />
             </button>
             {data.view_on_site_url && (
               <a
@@ -307,7 +320,9 @@ export function DetailPage({
             />
             {canChange && (
               <Button variant="primary" onClick={() => setEditing(true)}>
-                Edit
+                <span className="inline-flex items-center gap-1.5">
+                  <Pencil className="h-4 w-4" aria-hidden /> Edit
+                </span>
               </Button>
             )}
             {canDelete && (
@@ -859,7 +874,9 @@ function DeleteButton({ label, loadPreview, onConfirm }: DeleteButtonProps) {
   return (
     <>
       <Button variant="danger" onClick={() => setOpen(true)}>
-        Delete
+        <span className="inline-flex items-center gap-1.5">
+          <Trash2 className="h-4 w-4" aria-hidden /> Delete
+        </span>
       </Button>
       {open && (
         <Modal

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

@@ -519,18 +519,53 @@ export function ListPage() {
           />
           <h1 className="text-2xl font-semibold">{listTitle}</h1>
         </div>
-        {/* Header right-side: only the +Add primary action lives here.
-            Customize moved to the FilterBar trailing slot in #554 so the
-            filter row is one self-contained unit (… filter chips |
-            Clear all | Customize) — no second toolbar row, no dangling
-            chrome. */}
-        <div className="flex shrink-0 items-center gap-2">
+        {/* Header right-side toolbar (#608): one row holds every page-
+            level affordance — Clear all (when filters are active),
+            Refresh, Customize, then the primary `+ <Entity>` button.
+            Previously these were split between the page header (Add)
+            and the FilterBar trailing slot (Clear all / Refresh /
+            Customize), which read as two toolbars; consolidating into
+            one row matches the detail-page header layout (#572) and
+            removes the second row of chrome.
+            The `+ Add` label dropped the word "Add" — the leading `+`
+            already signals "create", so "Add" was redundant (#608). */}
+        <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">
+          {activeFilterCount > 0 ? (
+            <ResetButton
+              isDirty
+              onReset={() =>
+                patchParams((next) => filters.forEach((f) => next.delete(f.name)))
+              }
+              label="Clear all"
+              icon={<X className="h-4 w-4" aria-hidden />}
+              title="Clear all filters"
+            />
+          ) : null}
+          <RefreshButton
+            onRefresh={refresh}
+            tooltip="Refresh"
+            icon={<RefreshCw className="h-4 w-4" aria-hidden />}
+          />
+          <button
+            type="button"
+            onClick={() => setColsOpen(true)}
+            aria-haspopup="dialog"
+            aria-label="Customize columns"
+            title={
+              hiddenCols.size > 0
+                ? `Customize columns (${hiddenCols.size} hidden)`
+                : 'Customize columns'
+            }
+            className="inline-flex shrink-0 items-center justify-center rounded-md border border-gray-300 px-2 py-1.5 text-sm hover:bg-gray-100"
+          >
+            <Settings2 className="h-4 w-4" aria-hidden />
+          </button>
           {data.permissions.add && (
             <Link
               to={withPreservedFilters(`/${appLabel}/${modelName}/add`, searchParams.toString())}
               className="rounded-md border border-primary bg-primary px-3 py-2 text-sm font-medium text-white hover:opacity-90"
             >
-              + Add {data.verbose_name ? capitalize(data.verbose_name) : modelName}
+              + {data.verbose_name ? capitalize(data.verbose_name) : modelName}
             </Link>
           )}
         </div>
@@ -597,52 +632,9 @@ export function ListPage() {
             </Popover>
           ) : null
         }
-        trailing={
-          // Filter-row trailing slot (#554): "Clear all" + Refresh +
-          // Customize, in that order, as the last three buttons on
-          // the row. "Clear all" hides entirely when no filters apply
-          // (owner directive, v1.3.3) — the filter pills themselves
-          // signal there's nothing to clear, so a disabled button
-          // would be redundant chrome (CLAUDE.md §7). The Customize
-          // affordance is icon-only (the cog speaks for itself
-          // alongside Refresh — text + count chip were noise on a
-          // row that's already crowded).
-          <>
-            {activeFilterCount > 0 ? (
-              <ResetButton
-                isDirty
-                onReset={() =>
-                  patchParams((next) => filters.forEach((f) => next.delete(f.name)))
-                }
-                label="Clear all"
-                icon={<X className="h-4 w-4" aria-hidden />}
-                title="Clear all filters"
-              />
-            ) : null}
-            {/* Refresh (#592): refetch the changelist + filter counts
-                with the current filter / search / ordering / page
-                state preserved. Between Clear all and Customize. */}
-            <RefreshButton
-              onRefresh={refresh}
-              tooltip="Refresh"
-              icon={<RefreshCw className="h-4 w-4" aria-hidden />}
-            />
-            <button
-              type="button"
-              onClick={() => setColsOpen(true)}
-              aria-haspopup="dialog"
-              aria-label="Customize columns"
-              title={
-                hiddenCols.size > 0
-                  ? `Customize columns (${hiddenCols.size} hidden)`
-                  : 'Customize columns'
-              }
-              className="inline-flex shrink-0 items-center justify-center rounded-md border border-gray-300 px-2 py-1.5 text-sm hover:bg-gray-100"
-            >
-              <Settings2 className="h-4 w-4" aria-hidden />
-            </button>
-          </>
-        }
+        // FilterBar's `trailing` slot retired in v1.4.5 / #608 — Clear
+        // all / Refresh / Customize live in the page header now so the
+        // SPA shows one toolbar per page, not two.
       />
 
       {editCount > 0 && (

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "django-admin-react"
-version = "1.4.4"
+version = "1.4.5"
 description = "A drop-in React single-page admin for Django, driven entirely by ModelAdmin."
 authors = ["django-admin-react contributors"]
 license = "MIT"