feat(shared,admin): admin workflow polish — action grammar, members surface, explicit-save settings (#562)

## Summary

One bounded polish PR across the four admin workflows — Submit Work,
Review Work, Garden Settings, and Garden Members — so they read as one
professional cockpit instead of mixed legacy forms.

### Action grammar — one primary per mode
- Every route header now shows exactly **one mode-specific primary**;
other actions fold into the overflow kebab (`AdminViewActions maxInline`
driven by the marked primary).
- **Hub**: Work → Submit Work, Assess → Create Assessment, Certify →
Create Hypercert. **History declares no creation CTA** (no real target)
and hides the FAB.
- **Garden**: Overview → Edit garden; **Members → Add member** (opens
the real add flow); Activity and Settings keep a clean header (settings
form owns Save/Cancel).
- **Community**: Treasury → Deposit / withdraw (owner-gated, opens the
vault sheet); Governance → **New proposal now targets the hypercert
signal-pool register flow** (the existing proposal-creation write)
instead of self-navigating; Payouts has no competing header primary (the
cookie-jar panel owns Withdraw / Fund / Manage in local context); People
shows no role-management CTA.
- `useViewActions` no longer promotes an arbitrary first action: the FAB
exists only when a mode declares an explicit primary (read-only modes
hide it, per the handoff design note).

### Garden Members = the management surface
- New
[`GardenMembersPanel`](packages/admin/src/views/Garden/components/GardenMembersPanel.tsx)
on `/garden/members`: search by **ENS or address** (name queries resolve
via `useEnsAddress`), wallet display with **copy actions**, role chips,
member count.
- Existing write path wired in — header **Add member** →
`AddMemberModal`; **Manage Roles** → `GardenRolesPanel` per-role
add/remove + `MembersModal` view-all — all through
`useGardenOperations`, gated on `canManage`. **No new contract/API
behavior.**
- Removed the inert "Pending" filter (no pending-member data exists).
Fixed the filter chips to the actual `AdminFilterChip`
`label`/`onToggle` contract — they previously rendered label-less and
never attached a handler (dead controls, pre-existing).

### Community People stays engagement/read-only
- The role chips on People rows are now **static indicators** — the old
buttons navigated back to the same route (no-ops).
- Rail "Roles overview" rows render as plain counts on People (still
navigate from other modes).
- One clear **Manage members** affordance links to Garden → Members
(header overflow + section header).

### Garden Settings — explicit save with draft preview
- Rewrote
[`GardenSettingsEditor`](packages/admin/src/components/Garden/GardenSettingsEditor.tsx)
as a draft form: name, description, location, banner, open joining, max
gardeners all edit local state.
- Stable footer with a **dirty count** (`N unsaved changes` / `All
changes saved` / `Saving…`), Cancel (resets), Save changes (disabled
when clean/invalid).
- **Banner selection shows a local object-URL preview** with a "Preview
— uploads on save" badge; IPFS upload + on-chain write happen **only
during Save**. Save runs only dirty fields through their existing
per-field mutations, sequentially (one wallet confirmation at a time; a
failure stops the run with the draft intact).
- Removed "hero image" wording from admin copy; en/es/pt updated.

### Submit Work + Review Work polish
- Submit Work sheet now uses admin sheet/form anatomy: fields directly
on the sheet surface (no nested card), pinned `SheetFooter` with
`AdminButton` actions, identical grouping in page and sheet layouts.
Validation, upload requirements, query state (`sort`, `gardenAddress`),
and cancel/close are preserved (pinned by the existing submit test
suite).
- Review Work decision row uses the M3 hierarchy: **Approve = filled
primary** (disabled until confidence + method valid), **Reject =
outlined error** (clearly destructive, secondary), right-aligned row,
validation hints in a **stable block above the actions** so the buttons
never shift.

## Validation

- `bun format` / `bun lint` — 0 errors (remaining warnings pre-existing,
untouched files)
- Admin tests: **52 files / 451 passed** (incl. new
`GardenSettingsEditor.test.tsx` ×7 pinning
draft/save/cancel/banner-deferral, updated `memberRoles.test.ts`,
existing `SubmitWork.submit.test.tsx` ×7 green)
- Shared tests: **261 files / 3138 passed** (incl. expanded
`fab-config.test.ts` ×27 pinning the per-mode primary grammar and real
targets)
- `node scripts/dev/ci-local.js --quick` — all green
- `bun run check:design-md` ✅ · `check:design-tokens` ✅ (material
boundary + token guard) · `lint:vocab` ✅ (3 locales)
- `check:stories` ✅ · `check:story-quality` ✅ (149 files) ·
`test:stories:ci` 138 passed
- `bun run --filter @green-goods/admin build` ✅

## Browser proof (Brave, dev:prod against production data, mockAuth)

Captured at **1440×900 and 1280×800, light + dark** to
`.codex-artifacts/admin-polish-proof/` (18 screenshots + DOM/click
evidence; mock-auth sessions have no wallet client, so no writes were
possible):

- `/hub/work`: one Submit Work primary + overflow holding Create
Assessment / Create Hypercert; sort → submit → close preserves
`sort=oldest&gardenAddress` in URL; filled sheet with media draft
preview; required-field hold blocks submit with zero network calls.
- `/hub/work/:workId`: Approve disabled with the stable hint ("Select a
confidence level…"); selecting High enables Approve (filled, workspace
tone `rgb(37,71,208)`); Reject outlined error. Dark-mode contrast
measured on the real backdrop: reject label **4.76:1**, hint **10.1:1**
(AA).
- `/garden/settings`: edits → "3 unsaved changes" + enabled Save/Cancel
+ banner "Preview — uploads on save" badge with **no IPFS/write calls**;
Cancel restored saved values ("Mama Earth") and disabled the footer.
- `/garden/members`: ENS search `afo.eth` resolved and narrowed 30 → 1
row; address fragment `0xb1` → 1 row; copy shows the copied check; Add
member opens `AddMemberModal` ("Add Gardener"); Manage Roles opens the
per-role panel (6 add / 10 remove controls); Operators filter narrows 30
→ 9.
- `/community/members`: **48 role chips, 0 are buttons**; no header
primary; rail rows static; the one "Manage members" button lands on
`/garden/members` with garden context.
- All eight route modes asserted in live DOM for the primary/overflow
table; **no horizontal overflow** at either viewport; console clean of
app errors (only Brave-shields analytics blocks + pre-existing
IPFS-gateway 403 thumbnails).

## Out of scope, flagged separately

- **Pre-existing bug (reproduced on develop with this PR's changes
stashed)**: opening Submit Work from the Hub header leaves the LeftSheet
parked off-screen (`translateX(-427px)`, spring never runs); work-detail
opens fine and direct URL loads render in place. Spawned as its own task
with full diagnostics.
- The admin `tsc --noEmit -p tsconfig.json` gate is a no-op (`files: []`
solution config) — it's how the dead `AdminFilterChip` props survived.
Worth a follow-up on the build script.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Author: Oba-One

packages/admin/src/__tests__/components/Garden/memberRoles.test.ts

@@ -1,5 +1,5 @@
 /**
- * GardenMembersList role-derivation tests
+ * GardenMembersPanel role-derivation tests
  *
  * Pins the role-set construction + per-address role lookup that drives the
  * cleanup A5 chip strip on the Garden Members tab. Lowercase normalization +
@@ -13,7 +13,7 @@ import { describe, expect, it } from "vitest";
 import {
   buildMemberRoleSets,
   memberRolesForAddress,
-} from "@/views/Garden/components/GardenWorkspaceContent";
+} from "@/views/Garden/components/GardenMembersPanel";
 import type { Address } from "@green-goods/shared";
 
 const A_LOWER = "0xaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" as Address;

packages/admin/src/__tests__/components/PageTransition.test.tsx

@@ -24,7 +24,6 @@ import { renderWithProviders, screen, userEvent, waitFor } from "../test-utils";
 const mockOrchestrator = vi.hoisted(() => ({
   activeSheet: null as "left" | "right" | null,
   activeContentId: null as string | null,
-  isReceded: false,
   openSheet: vi.fn(),
   closeSheet: vi.fn(),
   onNavigateAway: vi.fn().mockResolvedValue(undefined),
@@ -142,7 +141,6 @@ describe("PageTransition", () => {
     vi.clearAllMocks();
     mockOrchestrator.activeSheet = null;
     mockOrchestrator.activeContentId = null;
-    mockOrchestrator.isReceded = false;
     mockOrchestrator.onNavigateAway.mockResolvedValue(undefined);
     mockOrchestrator.onNavigateArrive.mockReturnValue(null);
   });
@@ -182,7 +180,6 @@ describe("PageTransition", () => {
     // Sheet is open on initial render
     mockOrchestrator.activeSheet = "right";
     mockOrchestrator.activeContentId = "members";
-    mockOrchestrator.isReceded = true;
 
     renderPageTransition();
     const user = userEvent.setup();
@@ -375,4 +372,47 @@ describe("PageTransition", () => {
     // startViewTransition should not be called for same-path navigation
     expect(mockStartViewTransition).not.toHaveBeenCalled();
   });
+
+  it("swaps instantly without a cross-fade for same-view tab changes", async () => {
+    // Both paths live under the same top-level view (/hub/*), i.e. a tab change.
+    renderPageTransition("/hub/history", ["/hub/history", "/hub/work/item-7"]);
+    const user = userEvent.setup();
+
+    await user.click(screen.getByTestId("nav-/hub/work/item-7"));
+
+    // Outlet still swaps and arrive bookkeeping runs, but no View Transitions
+    // cross-fade fires for an intra-view tab change.
+    await waitFor(() => {
+      expect(mockOrchestrator.onNavigateArrive).toHaveBeenCalledWith("/hub/work/item-7");
+    });
+    expect(mockStartViewTransition).not.toHaveBeenCalled();
+  });
+
+  it("resets scroll to top on a view change but not on a same-view tab change", async () => {
+    const main = document.createElement("main");
+    main.id = "main-content";
+    const scrollTo = vi.fn();
+    main.scrollTo = scrollTo as unknown as typeof main.scrollTo;
+    document.body.appendChild(main);
+
+    try {
+      renderPageTransition("/hub/history", ["/hub/history", "/hub/work/item-7", "/page-b"]);
+      const user = userEvent.setup();
+
+      // Same view (hub → hub): scroll position is preserved.
+      await user.click(screen.getByTestId("nav-/hub/work/item-7"));
+      await waitFor(() => {
+        expect(mockOrchestrator.onNavigateArrive).toHaveBeenCalledWith("/hub/work/item-7");
+      });
+      expect(scrollTo).not.toHaveBeenCalled();
+
+      // Cross view (hub → page-b): the new view lands at the top.
+      await user.click(screen.getByTestId("nav-/page-b"));
+      await waitFor(() => {
+        expect(scrollTo).toHaveBeenCalledWith({ top: 0 });
+      });
+    } finally {
+      document.body.removeChild(main);
+    }
+  });
 });

packages/admin/src/components/AdminViewActions.stories.tsx

@@ -1,10 +1,4 @@
-import {
-  RiAddLine,
-  RiExternalLinkLine,
-  RiRefreshLine,
-  RiSettings3Line,
-  RiUserAddLine,
-} from "@remixicon/react";
+import { RiAddLine, RiCheckLine, RiExternalLinkLine, RiMedalLine } from "@remixicon/react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "storybook/test";
 import { withAdminPrimitiveFrame } from "../../../shared/.storybook/decorators";
@@ -19,7 +13,7 @@ const meta: Meta<typeof AdminViewActions> = {
     docs: {
       description: {
         component:
-          "Desktop view-action row for admin workspaces. It keeps the primary action rightmost and folds lower-priority actions into a Radix overflow menu.",
+          "Desktop view-action row for admin workspaces — the stable-trio grammar. The workspace's actions render in declaration order on every tab; only the active tab's action carries the filled variant, so button positions never shift while the emphasis moves with the tab.",
       },
     },
   },
@@ -28,75 +22,78 @@ const meta: Meta<typeof AdminViewActions> = {
 export default meta;
 type Story = StoryObj<typeof AdminViewActions>;
 
-const baseActions = [
-  {
-    id: "refresh",
-    label: "Refresh",
-    labelId: "app.common.refresh",
-    icon: RiRefreshLine,
-    onClick: fn(),
-    variant: "ghost" as const,
-  },
-  {
-    id: "invite",
-    label: "Invite member",
-    shortLabel: "Invite",
-    labelId: "admin.community.inviteMember",
-    icon: RiUserAddLine,
-    onClick: fn(),
-    variant: "secondary" as const,
-  },
-  {
-    id: "create",
-    label: "Create action",
-    shortLabel: "Create",
-    labelId: "admin.actions.create",
-    icon: RiAddLine,
-    onClick: fn(),
-    variant: "primary" as const,
-    primary: true,
-  },
-];
+/** The Hub trio with a different tab active per story — positions identical,
+ *  only the fill moves. */
+function hubTrio(activeId: "submit-work" | "create-assessment" | "create-hypercert" | "none") {
+  return [
+    {
+      id: "submit-work",
+      label: "Submit Work",
+      labelId: "cockpit.hub.action.submitWork",
+      icon: RiAddLine,
+      onClick: fn(),
+      variant: (activeId === "submit-work" ? "primary" : "secondary") as "primary" | "secondary",
+      primary: activeId === "submit-work",
+    },
+    {
+      id: "create-assessment",
+      label: "Create Assessment",
+      labelId: "cockpit.hub.action.createAssessment",
+      icon: RiCheckLine,
+      onClick: fn(),
+      variant: (activeId === "create-assessment" ? "primary" : "secondary") as
+        | "primary"
+        | "secondary",
+      primary: activeId === "create-assessment",
+    },
+    {
+      id: "create-hypercert",
+      label: "Create Hypercert",
+      labelId: "cockpit.hub.action.createHypercert",
+      icon: RiMedalLine,
+      onClick: fn(),
+      variant: (activeId === "create-hypercert" ? "primary" : "secondary") as
+        | "primary"
+        | "secondary",
+      primary: activeId === "create-hypercert",
+    },
+  ];
+}
 
-export const InlineActions: Story = {
-  args: {
-    items: baseActions,
-  },
+export const WorkTabActive: Story = {
+  args: { items: hubTrio("submit-work") },
+};
+
+export const CertifyTabActive: Story = {
+  args: { items: hubTrio("create-hypercert") },
 };
 
-export const Overflow: Story = {
+/** Read surfaces (Hub History, Garden Activity…) keep the trio outlined —
+ *  no filled action, no FAB on mobile. */
+export const ReadSurfaceAllOutlined: Story = {
+  args: { items: hubTrio("none") },
+};
+
+export const WithGhostLink: Story = {
   args: {
     items: [
       {
-        id: "open-public",
-        label: "Open public page",
-        labelId: "admin.garden.openPublic",
+        id: "view-public",
+        label: "View public",
+        labelId: "cockpit.garden.action.viewPublic",
         icon: RiExternalLinkLine,
         onClick: fn(),
         variant: "ghost",
       },
-      {
-        id: "settings",
-        label: "Garden settings",
-        shortLabel: "Settings",
-        labelId: "admin.garden.settings",
-        icon: RiSettings3Line,
-        onClick: fn(),
-        variant: "secondary",
-      },
-      ...baseActions,
+      ...hubTrio("submit-work").slice(0, 2),
     ],
   },
 };
 
 export const DisabledAction: Story = {
   args: {
-    items: [
-      {
-        ...baseActions[1],
-        disabled: true,
-      },
-      baseActions[2],
-    ],
+    items: hubTrio("submit-work").map((action) =>
+      action.id === "create-assessment" ? { ...action, disabled: true } : action
+    ),
   },
 };

packages/admin/src/components/AdminViewActions.tsx

@@ -1,15 +1,8 @@
-import { type ViewAction, cn } from "@green-goods/shared";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import { RiMoreLine } from "@remixicon/react";
+import type { ViewAction } from "@green-goods/shared";
 import { AdminButton } from "./AdminButton";
 
 interface AdminViewActionsProps {
   items: ViewAction[];
-  /**
-   * Maximum buttons rendered inline before the rest fold into an overflow menu.
-   * Defaults to 3 (matches the design reference: ghost + secondary + primary).
-   */
-  maxInline?: number;
 }
 
 const VARIANT_TO_ADMIN_BUTTON = {
@@ -20,30 +13,23 @@ const VARIANT_TO_ADMIN_BUTTON = {
 } as const;
 
 /**
- * Renders the desktop view-action row. Maps `ViewAction` variants to
- * `AdminButton` variants, keeps the primary action rightmost, and folds
- * any actions beyond `maxInline` into an overflow kebab.
+ * Renders the desktop view-action row — the stable-trio grammar: a
+ * workspace's actions render in declaration order on every tab, and only the
+ * active tab's action carries the filled (`primary`) variant. No overflow
+ * menu and no reordering, so button positions never shift between tabs.
  *
  * Pair with `useViewActions` so the same `ViewAction[]` drives both this
  * component (desktop) and the FAB speed-dial (tablet/mobile).
  */
-export function AdminViewActions({ items, maxInline = 3 }: AdminViewActionsProps) {
+export function AdminViewActions({ items }: AdminViewActionsProps) {
   if (items.length === 0) return null;
 
-  // The hook hands us actions in left-to-right order with the primary last.
-  // When overflow is needed, keep the primary inline (rightmost) and push
-  // the lowest-priority secondaries into the overflow menu.
-  const inlineCount = Math.min(items.length, maxInline);
-  const inline = items.length <= maxInline ? items : items.slice(items.length - inlineCount);
-  const overflow = items.length <= maxInline ? [] : items.slice(0, items.length - inlineCount);
-
   return (
     <div
       className="flex flex-shrink-0 flex-wrap items-center justify-end gap-2"
       data-component="AdminViewActions"
     >
-      {overflow.length > 0 ? <OverflowMenu items={overflow} /> : null}
-      {inline.map((action) => (
+      {items.map((action) => (
         <AdminViewActionButton key={action.id} action={action} />
       ))}
     </div>
@@ -68,63 +54,3 @@ function AdminViewActionButton({ action }: { action: ViewAction }) {
     </AdminButton>
   );
 }
-
-function OverflowMenu({ items }: { items: ViewAction[] }) {
-  return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <button
-          type="button"
-          className={cn(
-            "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-full",
-            "border border-[rgb(var(--m3-outline))] text-[rgb(var(--m3-on-surface))]",
-            "hover:bg-[rgb(var(--m3-on-surface)/0.06)] active:bg-[rgb(var(--m3-on-surface)/0.10)]",
-            "transition-colors duration-[var(--spring-spatial-fast-duration)] ease-[var(--spring-spatial-fast-easing)]",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--m3-primary))]"
-          )}
-          aria-label="More actions"
-          title="More actions"
-          data-component="AdminViewActions"
-          data-slot="overflow-trigger"
-        >
-          <RiMoreLine className="h-5 w-5" />
-        </button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          side="bottom"
-          align="end"
-          sideOffset={6}
-          className={cn(
-            "z-overlay min-w-[200px] rounded-2xl bg-bg-white p-1.5 shadow-lg",
-            "border border-stroke-soft",
-            "animate-in fade-in-0 zoom-in-95"
-          )}
-        >
-          {items.map((action) => {
-            const Icon = action.icon;
-            const isDanger = action.variant === "danger";
-            return (
-              <DropdownMenu.Item
-                key={action.id}
-                onSelect={action.onClick}
-                disabled={action.disabled}
-                data-action-id={action.id}
-                className={cn(
-                  "flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-2 text-sm outline-none",
-                  isDanger
-                    ? "text-error-base hover:bg-error-lighter focus:bg-error-lighter"
-                    : "text-text-sub hover:bg-bg-weak focus:bg-bg-weak",
-                  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
-                )}
-              >
-                <Icon className="h-4 w-4 shrink-0" />
-                {action.label}
-              </DropdownMenu.Item>
-            );
-          })}
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
-  );
-}

packages/admin/src/components/Garden/GardenSettingsEditor.stories.tsx

@@ -31,7 +31,7 @@ const meta: Meta<typeof GardenSettingsEditor> = {
     docs: {
       description: {
         component:
-          "Real `GardenSettingsEditor` rendered against the Storybook mock wagmi connector and `DevAuthProvider`. The banner field is an upload-to-IPFS control with a live preview (PRD-513); the other fields use inline `EditableField` save. The underlying update mutations (`useUpdateGardenName`, `useUpdateGarden{Description,Location,BannerImage}`, `useSetOpenJoining`, `useSetMaxGardeners`) are wired but inert — actions trigger the real mutation which fails silently against the mock transport. Render states (view / edit / read-only) reflect the live component.",
+          "Real `GardenSettingsEditor` rendered against the Storybook mock wagmi connector and `DevAuthProvider`. Explicit-save form: every field (name, description, location, banner, open joining, max gardeners) edits a local draft; the pinned footer shows the dirty state with Save changes / Cancel. Banner selection shows a local object-URL preview and uploads to IPFS only during Save. The underlying mutations (`useUpdateGardenName`, `useUpdateGarden{Description,Location,BannerImage}`, `useSetOpenJoining`, `useSetMaxGardeners`) are wired but inert against the mock transport. Render states (editable / read-only / dirty footer) reflect the live component.",
       },
     },
   },