feat(spa): single-row list toolbar + link-style FK editor (UX feedback) (#517)

MartinCastroAlvarez · martin-castro-laminr-ai · claude · web-flow · commit b2e659007355 · 2026-05-28T01:14:45.000+02:00
List toolbar (ListPage + @dar/search FilterBar): - Search now sits on the SAME row as the filter pills (was a separate row above them); leading (bulk-actions) + search + filters + trailing all share one row. - "Clear all" is a real bordered button (was an underlined text link), shown only when >=1 filter is active, positioned as the second-to-last control with "Customize" pinned rightmost — so the row ends in [Clear all] [Customize]. - Rename the column customizer modal title "Columns" -> "Layout". Related-object FK editor (@dar/form AutocompleteInput): - A selected FK now renders read-only as a link button to the object's detail page (built from the registry mount). Being a real <a href>, left-click navigates and right-click / cmd-click "open in new tab" works — it no longer looks like a typeable input. - The pencil switches to an explicit edit/search mode instead of immediately clearing the value; "Cancel" reverts to the previous selection (the prior bug: there was no way to undo). "Clear" still empties an optional FK. FilterBar drops its internal Clear-all (the page composes the trailing cluster so it can order Clear-all before Customize); keeps the leading slot from #512; test updated. Co-authored-by: Martin Castro Laminrs <mcastro@laminr.ai> Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
diff --git a/frontend/apps/web/src/pages/ListPage.tsx b/frontend/apps/web/src/pages/ListPage.tsx
@@ -6,7 +6,7 @@
 // the data layer's job.
 
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { GripVertical, Settings2 } from 'lucide-react';
+import { GripVertical, Settings2, X } from 'lucide-react';
 import { Link, useHref, useNavigate, useParams, useSearchParams } from 'react-router-dom';
 
 import { useApiClient, useList, type ActionDescriptor, type ListRow } from '@dar/data';
@@ -475,7 +475,6 @@ export function ListPage() {
         filters={filters}
         active={activeFilters}
         onFilterChange={setFilter}
-        onClearAll={() => patchParams((next) => filters.forEach((f) => next.delete(f.name)))}
         // 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).
@@ -515,22 +514,35 @@ export function ListPage() {
           ) : 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>
+          <>
+            {activeFilterCount > 0 && (
+              <button
+                type="button"
+                onClick={() => patchParams((next) => filters.forEach((f) => next.delete(f.name)))}
+                title="Clear all filters"
+                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"
+              >
+                <X className="h-4 w-4" aria-hidden />
+                Clear all
+              </button>
             )}
-          </button>
+            <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>
+          </>
         }
       />
 
@@ -631,7 +643,7 @@ export function ListPage() {
       )}
 
       {colsOpen && (
-        <Modal title="Columns" onClose={() => setColsOpen(false)}>
+        <Modal title="Layout" onClose={() => setColsOpen(false)}>
           <p className="mb-2 text-xs text-gray-500">Drag to reorder; toggle to show or hide.</p>
           <ul className="space-y-1">
             {orderedDescriptors.map((c) => {
diff --git a/frontend/packages/form/src/AutocompleteInput.tsx b/frontend/packages/form/src/AutocompleteInput.tsx
@@ -2,14 +2,24 @@
 //
 // Used by FieldInput for foreignkey fields whose target table is too
 // large to inline `choices` (the admin's autocomplete_fields case).
-// Debounced queries hit the target model's autocomplete endpoint; the
-// selected option's pk becomes the form value (wire §5.1), the label
-// is shown. Clearing the selection sets the value to null.
+//
+// Two modes:
+//  - Display (a value is set, not editing): the related object is shown
+//    as a link button to its detail page — left-click navigates, and
+//    because it's a real <a href> the browser's right-click / cmd-click
+//    "open in new tab" works too. A pencil switches to edit mode.
+//  - Edit (no value yet, or the pencil was clicked): a debounced search
+//    against the target's autocomplete endpoint. Picking a result sets
+//    the value; "Cancel" reverts to the previously-selected object
+//    (the value is never cleared just by entering edit mode), and
+//    "Clear" empties an optional FK.
+//
+// The selected option's pk becomes the form value (wire §5.1).
 
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Pencil } from 'lucide-react';
 
-import { useApiClient, type AutocompleteResult, type WriteValue } from '@dar/data';
+import { useApiClient, useRegistry, type AutocompleteResult, type WriteValue } from '@dar/data';
 
 interface AutocompleteInputProps {
   /** Target model the FK points at. */
@@ -30,13 +40,17 @@ export function AutocompleteInput({
   onChange,
 }: AutocompleteInputProps) {
   const client = useApiClient();
+  const registry = useRegistry();
   const [query, setQuery] = useState('');
   const [open, setOpen] = useState(false);
+  const [editing, setEditing] = useState(false);
   const [results, setResults] = useState<AutocompleteResult[]>([]);
   const [loading, setLoading] = useState(false);
   const [selectedLabel, setSelectedLabel] = useState<string | null>(initialLabel ?? null);
   const boxRef = useRef<HTMLDivElement>(null);
 
+  const hasValue = value != null && value !== '';
+
   // Debounced search against the target autocomplete endpoint.
   useEffect(() => {
     if (!open) return;
@@ -76,21 +90,30 @@ export function AutocompleteInput({
     [invalid],
   );
 
-  // Selected state: show the chosen label + a clear button.
-  if (value != null && value !== '') {
+  // Display mode: a value is set and we're not editing it. Render the
+  // related object as a link to its detail page (right-clickable / new
+  // tab) plus a pencil to switch to the search.
+  if (hasValue && !editing) {
+    const mount = registry.data?.mount ?? '/';
+    const href = `${mount}${to.app_label}/${to.model_name}/${encodeURIComponent(String(value))}/`;
     return (
       <div className="flex items-center gap-2">
-        <span className="inline-flex items-center gap-2 rounded border border-gray-300 bg-gray-50 px-2 py-1 text-sm">
+        <a
+          href={href}
+          className={`inline-flex items-center rounded border bg-gray-50 px-2 py-1 text-sm text-primary hover:bg-gray-100 hover:underline ${
+            invalid ? 'border-red-400' : 'border-gray-300'
+          }`}
+        >
           {selectedLabel ?? String(value)}
-        </span>
+        </a>
         <button
           type="button"
           aria-label="Change"
           title="Change"
           className="inline-flex shrink-0 items-center justify-center rounded p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-800"
           onClick={() => {
-            onChange(null);
-            setSelectedLabel(null);
+            setEditing(true);
+            setOpen(true);
             setQuery('');
           }}
         >
@@ -100,19 +123,51 @@ export function AutocompleteInput({
     );
   }
 
+  const cancelEdit = (): void => {
+    setEditing(false);
+    setOpen(false);
+    setQuery('');
+  };
+
   return (
     <div ref={boxRef} className="relative">
-      <input
-        type="text"
-        value={query}
-        placeholder="Search…"
-        className={base}
-        onFocus={() => setOpen(true)}
-        onChange={(e) => {
-          setQuery(e.target.value);
-          setOpen(true);
-        }}
-      />
+      <div className="flex items-center gap-2">
+        <input
+          type="text"
+          value={query}
+          placeholder="Search…"
+          className={base}
+          onFocus={() => setOpen(true)}
+          onChange={(e) => {
+            setQuery(e.target.value);
+            setOpen(true);
+          }}
+        />
+        {hasValue && (
+          <>
+            <button
+              type="button"
+              className="shrink-0 rounded px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800"
+              onClick={() => {
+                // Empty an optional FK; stay in edit mode so the user can
+                // pick a replacement or leave it blank.
+                onChange(null);
+                setSelectedLabel(null);
+                setQuery('');
+              }}
+            >
+              Clear
+            </button>
+            <button
+              type="button"
+              className="shrink-0 rounded px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-gray-800"
+              onClick={cancelEdit}
+            >
+              Cancel
+            </button>
+          </>
+        )}
+      </div>
       {open && (query.length > 0 || results.length > 0) && (
         <div className="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded border border-gray-200 bg-white py-1 shadow-lg">
           {loading && <div className="px-3 py-2 text-xs text-gray-400">Searching…</div>}
@@ -128,6 +183,7 @@ export function AutocompleteInput({
                 onChange(r.id);
                 setSelectedLabel(r.label);
                 setOpen(false);
+                setEditing(false);
                 setQuery('');
               }}
             >
diff --git a/frontend/packages/search/src/FilterBar.test.tsx b/frontend/packages/search/src/FilterBar.test.tsx
@@ -21,7 +21,6 @@ const filters: FilterDescriptor[] = [
 
 function setup(active: Record<string, string> = {}) {
   const onFilterChange = vi.fn();
-  const onClearAll = vi.fn();
   const onSearchChange = vi.fn();
   render(
     <FilterBar
@@ -30,10 +29,9 @@ function setup(active: Record<string, string> = {}) {
       filters={filters}
       active={active}
       onFilterChange={onFilterChange}
-      onClearAll={onClearAll}
     />,
   );
-  return { onFilterChange, onClearAll, onSearchChange };
+  return { onFilterChange, onSearchChange };
 }
 
 describe('FilterBar', () => {
@@ -57,20 +55,18 @@ describe('FilterBar', () => {
     expect(onFilterChange).toHaveBeenCalledWith('status', '');
   });
 
-  it('shows Clear all when a filter is active and calls onClearAll', () => {
-    const onClearAll = vi.fn();
+  it('renders trailing toolbar controls on the same row', () => {
     render(
       <FilterBar
         searchValue=""
         onSearchChange={() => {}}
         filters={filters}
         active={{ status: 'a' }}
         onFilterChange={() => {}}
-        onClearAll={onClearAll}
+        trailing={<button type="button">Customize</button>}
       />,
     );
-    fireEvent.click(screen.getByText('Clear all'));
-    expect(onClearAll).toHaveBeenCalled();
+    expect(screen.getByRole('button', { name: 'Customize' })).toBeInTheDocument();
   });
 
   it('relays search input changes', () => {
@@ -87,7 +83,6 @@ describe('FilterBar', () => {
         filters={[]}
         active={{}}
         onFilterChange={() => {}}
-        onClearAll={() => {}}
         leading={<button type="button">Actions · 2 ▾</button>}
         trailing={<button type="button">Customize</button>}
       />,
diff --git a/frontend/packages/search/src/FilterBar.tsx b/frontend/packages/search/src/FilterBar.tsx
