Refactor form dialogs with DialogForm and add Button isPending prop (#870)

### Summary & Motivation

`DialogContent` is a bounded flex column that relies on `DialogHeader`,
`DialogBody`, and `DialogFooter` being its direct flex children —
`DialogBody` is the scroll region (`flex min-h-0 flex-1
overflow-y-auto`). A plain `<Form>` interposed between `DialogContent`
and `DialogBody` had no flex classes of its own, so the scroll chain
broke: multi-field dialogs overflowed past the max-height and pushed the
footer out of view. The InviteUserDialog example in the rules worked
only because it had a single field.

- Add a `DialogForm` helper in
`application/shared-webapp/ui/components/Dialog.tsx` that pre-applies
`flex min-h-0 flex-1 flex-col`, wires `FormValidationContext`, and
defaults `noValidate` from `validationBehavior="aria"`. It replaces
`<Form>` inside dialogs; the wrapper still owns `DialogContent` and
`DialogHeader`.
- Migrate InviteUserDialog, ChangeUserRoleDialog, EditBillingInfoDialog,
ShareRecipeDialog, and the three RecipeEditor wizard steps to
`DialogForm`.
- Update `.claude/rules/frontend/frontend.md` and
`.claude/rules/frontend/form-with-validation.md` with the scroll-chain
rationale, an anti-pattern note ("`<Form>` inside a dialog breaks
scroll"), and a multi-field example.

To make submitting feedback visible, add an `isPending` prop to `Button`
that auto-disables and prepends a `<Spinner />`. Call sites change
`disabled={mutation.isPending}` to `isPending={mutation.isPending}` and
get the spinner for free. Cancel and Close buttons keep
`disabled={mutation.isPending}` because they do not trigger mutations.

- Extend `application/shared-webapp/ui/components/Button.tsx` with the
`isPending` prop.
- Apply it to mutation CTAs across the account self-contained system
(login, signup, welcome setup, profile, account settings, verification
code resend, user invite/role-change/delete, billing
subscribe/upgrade/downgrade/reactivate/cancel/retry/payment-method/billing-info,
plan cards, invitation accept/decline, component preview dialogs).
- Extract `PlanAction` from `PlanCard` into its own file because the
added props pushed `PlanCard` past the per-function and per-file line
caps.
- Document the pattern in `form-with-validation.md`, the dialog example
in `frontend.md`, and the Button divergence row in the component README.

### Checklist

- [x] I have added tests, or done manual regression tests
- [x] I have updated the documentation, if necessary

Author: tjementum

.claude/rules/frontend/form-with-validation.md

@@ -7,35 +7,41 @@ description: Rules for forms with validation using ShadCN 2.0 components
 
 ## Form wiring
 
-- `api.useMutation` (or TanStack `useMutation` for multi-call flows) + `mutationSubmitter` on `<Form>`.
-- Server validation via `<Form validationErrors={mutation.error?.errors} validationBehavior="aria">`. Fields read their own errors from `FormValidationContext` by `name`.
-- Submit button: `disabled={mutation.isPending}` only. No client-side `isValid` gate — server validates.
-- If the backend can't return field-level errors (e.g. non-nullable `DateOnly` fails JSON deserialization on `""`), fix the backend: make it nullable + `NotNull` FluentValidation rule.
+- In dialogs use `<DialogForm>` (from `@repo/ui/components/Dialog`); outside dialogs use `<Form>`. A plain `<Form>` between `DialogContent` and `DialogBody` breaks the scroll chain — `DialogForm` pre-applies `flex min-h-0 flex-1 flex-col` so `DialogBody`'s `flex-1 min-h-0 overflow-y-auto` still works.
+- `api.useMutation` (or TanStack `useMutation` for multi-call flows) + `mutationSubmitter` on the form.
+- Server validation: `validationErrors={mutation.error?.errors}` on the form. Fields read their own errors from `FormValidationContext` by `name`. `DialogForm` defaults `validationBehavior` to `"aria"`; `Form` requires you to set it.
+- Mutation CTAs: `isPending={mutation.isPending}` on `<Button>` (auto-disables, prepends `<Spinner />`). Cancel/Close keep `disabled={...}` — they are not CTAs, no spinner.
+- No client-side `isValid` gate — the server validates, and gating client-side hides the real errors from the user.
+- If the backend can't return field-level errors (e.g. non-nullable `DateOnly` fails JSON deserialization on `""`), fix the backend: make it nullable + add a `NotNull` FluentValidation rule.
 
 ## Dialog wrapper/body split
 
 Every form dialog has two components in the same file:
 
 - **Wrapper** (`XxxDialog`): receives `isOpen` / `onOpenChange`. Contains only `DirtyDialog` + `DialogContent` + `DialogHeader`. No state, no mutation, no dirty tracking.
-- **Body** (`XxxDialogBody`): child of `<DialogContent>`. Owns all state, mutation, `Form`, `DialogBody`, `DialogFooter`. Signals dirtiness via `useDialogSetDirty()` in field `onChange` handlers.
+- **Body** (`XxxDialogBody`): child of `<DialogContent>`. Owns state, mutation, the form, `DialogBody`, and `DialogFooter`. Signals dirtiness via `useDialogSetDirty()` (from `@repo/ui/components/DirtyDialogContext`) in field `onChange` handlers.
 
-**Why this split:** `DialogContent` unmounts its children on close, so the body is recreated on every open. Form state, mutation errors, dirty flag — all reset automatically because the components holding them no longer exist. No `handleCloseComplete`, no `mutation.reset()`, no `setIsFormDirty(false)` anywhere.
+`DialogContent` unmounts children on close, so the body is recreated on every open. Form state, mutation errors, and the dirty flag reset automatically — never write `handleCloseComplete`, `mutation.reset()`, or `setIsFormDirty(false)`.
 
-## DirtyDialog API
+Wizard state (`step`, intermediate values) also lives in the body — unmount resets the wizard to step 0 on reopen.
 
-- Props: `open`, `onOpenChange`, `trackingTitle`, optional label overrides. That's it.
-- Body calls `useDialogSetDirty()(true)` on any field change. The wrapper tracks the flag internally and clears it when `open` flips false.
-- Cancel button: `<DialogClose render={<Button type="reset" ... />}>` — `type="reset"` bypasses the unsaved warning.
-- Close on success: call `onClose` passed from the wrapper. Do not reset anything manually.
+## DirtyDialog
+
+- Props: `open`, `onOpenChange`, `trackingTitle` (+ optional label overrides). All state lives in the body.
+- Cancel button: `<DialogClose render={<Button type="reset" ... />}>`. `type="reset"` bypasses the unsaved-changes warning.
+- Close on success: call `onClose` passed from the wrapper. Do not reset anything manually — unmount does it.
 
 ## Anti-patterns
 
+- `<Form>` inside a dialog — breaks the `DialogBody` scroll chain. Use `<DialogForm>`.
 - State (`useState`, `useMutation`, refs) in the wrapper — persists across close/reopen. Always in the body.
 - `isValid`-gated submit button — hides server errors from the user.
-- `handleCloseComplete` / `mutation.reset()` / `setIsFormDirty(false)` — symptoms of state in the wrong place.
+- `handleCloseComplete`, `mutation.reset()`, `setIsFormDirty(false)` — symptoms of state living in the wrong component.
 - `<FormErrorMessage>` — deprecated. Use `validationErrors`.
 
-Note: .NET endpoints generate an `*.Api.json` on backend build; `openapi-typescript` turns it into `api.generated.d.ts`. Backend contract changes need both builds.
+## Multi-call submits
+
+Compose `api.useMutation` calls inside a TanStack `useMutation({ mutationFn: async (d) => { ... } })`, then pass its `error?.errors` into `validationErrors`.
 
 ## Example
 
@@ -61,27 +67,21 @@ function InviteUserDialogBody({ onClose }: { onClose: () => void }) {
   });
 
   return (
-    <Form
-      onSubmit={mutationSubmitter(inviteMutation)}
-      validationErrors={inviteMutation.error?.errors}
-      validationBehavior="aria"
-    >
+    <DialogForm onSubmit={mutationSubmitter(inviteMutation)} validationErrors={inviteMutation.error?.errors}>
       <DialogBody>
-        <TextField autoFocus name="email" label={t`Email`} onChange={() => setDirty(true)} />
+        <TextField autoFocus required name="email" label={t`Email`} onChange={() => setDirty(true)} />
       </DialogBody>
       <DialogFooter>
         <DialogClose render={<Button type="reset" variant="secondary" disabled={inviteMutation.isPending} />}>
           <Trans>Cancel</Trans>
         </DialogClose>
-        <Button type="submit" disabled={inviteMutation.isPending}>
+        <Button type="submit" isPending={inviteMutation.isPending}>
           {inviteMutation.isPending ? <Trans>Sending...</Trans> : <Trans>Send invite</Trans>}
         </Button>
       </DialogFooter>
-    </Form>
+    </DialogForm>
   );
 }
 ```
 
-Multi-step dialogs: wizard state (`step`, intermediate values) also lives in the body — unmount resets the wizard to step 0 on reopen.
-
-Multi-call submits: compose `api.useMutation` calls inside a TanStack `useMutation({ mutationFn: async (d) => { ... } })`, pass its `error?.errors` into `<Form validationErrors>`.
+Note: .NET endpoints generate `*.Api.json` on backend build; `openapi-typescript` turns it into `api.generated.d.ts`. Backend contract changes need both builds.

.claude/rules/frontend/frontend.md

@@ -38,6 +38,7 @@ Use browser MCP tools to test at `[APP_URL]`. Use `UNLOCK` as OTP verification c
 4. **API Integration**:
    - API client auto-generated from OpenAPI spec
    - Located in `shared/lib/api/client.ts`
+   - A SPA only calls its own self-contained system's endpoints via that system's generated OpenAPI client. Prefixes: `main` → `/api/*`, `account` → `/api/account/*`, `back-office` → `/api/back-office/*`, etc. Cross-system needs go backend-to-backend via `/internal-api/...`, exposed to the SPA through a facade endpoint in its own system
    - Never make direct fetch calls
    - Server state lives in TanStack Query only
    - Use `queryClient.invalidateQueries()` to refresh data after mutations
@@ -130,6 +131,7 @@ Use browser MCP tools to test at `[APP_URL]`. Use `UNLOCK` as OTP verification c
    - Split every dialog into two components in the same file: wrapper owns only `isOpen` + `DirtyDialog`/`DialogContent`/`DialogHeader` shell, body lives inside `<DialogContent>` and owns all state/mutation/form. Body unmounts on close, so state auto-resets on reopen — no `handleCloseComplete`, no `mutation.reset()`
    - Body signals dirtiness with `useDialogSetDirty()` from `@repo/ui/components/DirtyDialogContext`. `DirtyDialog` tracks the flag internally and clears it on close
    - `DialogBody` between `DialogHeader` and `DialogFooter` (scroll container)
+   - In dialogs use `DialogForm` (not `Form`); a `<Form>` between `DialogContent` and `DialogBody` breaks the scroll chain
    - Cancel button: `<DialogClose render={<Button type="reset" ... />}>` — `type="reset"` skips the unsaved-changes warning
    - Close on success: call `onClose` from the wrapper. Do not reset anything by hand — unmount does it
 
@@ -182,23 +184,22 @@ function InviteUserDialogBody({ onClose }: { onClose: () => void }) { // ✅ Bod
   });
 
   return (
-    <Form
+    <DialogForm // ✅ DialogForm (not Form) preserves the DialogBody scroll chain
       onSubmit={mutationSubmitter(inviteMutation)}
       validationErrors={inviteMutation.error?.errors}
-      validationBehavior="aria"
     >
       <DialogBody> // ✅ Always wrap content in DialogBody
         <TextField autoFocus required name="email" label={t`Email`} onChange={() => setDirty(true)} />
       </DialogBody>
       <DialogFooter>
-        <DialogClose render={<Button type="reset" variant="secondary" disabled={inviteMutation.isPending} />}> // ✅ type="reset" bypasses warning
+        <DialogClose render={<Button type="reset" variant="secondary" disabled={inviteMutation.isPending} />}> // ✅ type="reset" bypasses warning; disabled (not isPending) — no spinner on Cancel
           <Trans>Cancel</Trans>
         </DialogClose>
-        <Button type="submit" disabled={inviteMutation.isPending}> // ✅ disabled for pending
+        <Button type="submit" isPending={inviteMutation.isPending}> // ✅ isPending auto-disables and prepends <Spinner />
           {inviteMutation.isPending ? <Trans>Sending...</Trans> : <Trans>Send invite</Trans>}
         </Button>
       </DialogFooter>
-    </Form>
+    </DialogForm>
   );
 }
 

.claude/rules/frontend/translations.md

@@ -14,7 +14,7 @@ Guidelines for implementing translations and internationalization in the fronten
 3. Always use plain English text in translation markers
 4. Don't hardcode text without proper translation wrappers
 5. Use "Sentence case" for everything (buttons, menus, headings, etc.)
-6. **Lingui macros work in `shared-webapp/ui` components**. The SWC plugin runs in source-build mode across all workspace packages, and each SCS's `createLinguiConfig()` includes `shared-webapp/ui/**/*.{ts,tsx}` in its extraction scope. This means every shared UI component auto-generates catalog entries in every SCS (main, account, back-office) independently. Prefer macros over threading translatable text through props -- only accept a text prop when a consumer genuinely needs to override the default (e.g., context-specific wording). Note: shared strings must be translated in every SCS's `*.po` files -- translation workflow must keep all three SCSs in sync
+6. **Lingui macros work in `shared-webapp/ui` components**. The SWC plugin runs in source-build mode across all workspace packages, and each self-contained system's `createLinguiConfig()` includes `shared-webapp/ui/**/*.{ts,tsx}` in its extraction scope. This means every shared UI component auto-generates catalog entries in every self-contained system (main, account, back-office) independently. Prefer macros over threading translatable text through props -- only accept a text prop when a consumer genuinely needs to override the default (e.g., context-specific wording). Note: shared strings must be translated in every self-contained system's `*.po` files -- translation workflow must keep all three self-contained systems in sync
 7. Translation workflow:
    - Translation files are in `shared/translations/locale/` (e.g., `da-DK.po`, `en-US.po`)
    - After adding/changing `<Trans>` or t\`\` markers, the `*.po` files are auto-generated/updated by the build system

application/account/WebApp/federated-modules/common/AcceptInvitationDialog.tsx

@@ -74,11 +74,17 @@ export function AcceptInvitationDialog({
           <Button
             variant="destructive"
             onClick={handleDeclineInvitation}
-            disabled={isLoading || declineInvitationMutation.isPending}
+            isPending={declineInvitationMutation.isPending}
+            disabled={isLoading}
           >
             {declineInvitationMutation.isPending ? <Trans>Declining...</Trans> : <Trans>Decline</Trans>}
           </Button>
-          <Button variant="default" onClick={onAccept} disabled={isLoading || declineInvitationMutation.isPending}>
+          <Button
+            variant="default"
+            onClick={onAccept}
+            isPending={isLoading}
+            disabled={declineInvitationMutation.isPending}
+          >
             {isLoading ? <Trans>Accepting...</Trans> : <Trans>Accept invitation</Trans>}
           </Button>
         </DialogFooter>

application/account/WebApp/routes/-components/OtpVerificationForm.tsx

@@ -91,7 +91,7 @@ export function OtpVerificationForm({
             </p>
           )}
         </div>
-        <Button type="submit" className="mt-4 w-full text-center" disabled={isSubmitDisabled}>
+        <Button type="submit" className="mt-4 w-full text-center" isPending={isSubmitting} disabled={isSubmitDisabled}>
           {isSubmitting ? <Trans>Verifying...</Trans> : <Trans>Verify</Trans>}
         </Button>
       </div>

application/account/WebApp/routes/-components/VerificationFooter.tsx

@@ -42,7 +42,7 @@ export function VerificationFooter({
             validationErrors={resendMutation.error?.errors}
             className="inline"
           >
-            <Button type="submit" variant="link" disabled={resendMutation.isPending} className="h-auto p-0 text-sm">
+            <Button type="submit" variant="link" isPending={resendMutation.isPending} className="h-auto p-0 text-sm">
               <Trans>Request a new code</Trans>
             </Button>
           </Form>

application/account/WebApp/routes/account/billing/-components/CancelDowngradeDialog.tsx

@@ -62,7 +62,7 @@ export function CancelDowngradeDialog({
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel disabled={isPending}>{t`Keep downgrade`}</AlertDialogCancel>
-          <AlertDialogAction onClick={onConfirm} disabled={isPending}>
+          <AlertDialogAction onClick={onConfirm} isPending={isPending}>
             {isPending ? t`Processing...` : t`Cancel downgrade`}
           </AlertDialogAction>
         </AlertDialogFooter>

application/account/WebApp/routes/account/billing/-components/CancelSubscriptionDialog.tsx

@@ -141,7 +141,8 @@ export function CancelSubscriptionDialog({
                 onConfirm(reason, feedback.trim() || null);
               }
             }}
-            disabled={isPending || reason === null}
+            isPending={isPending}
+            disabled={reason === null}
           >
             {isPending ? t`Cancelling...` : t`Cancel subscription`}
           </AlertDialogAction>

application/account/WebApp/routes/account/billing/-components/DowngradeConfirmationDialog.tsx

@@ -59,7 +59,7 @@ export function DowngradeConfirmationDialog({
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel disabled={isPending}>{t`Cancel`}</AlertDialogCancel>
-          <AlertDialogAction onClick={onConfirm} disabled={isPending}>
+          <AlertDialogAction onClick={onConfirm} isPending={isPending}>
             {isPending ? t`Processing...` : t`Confirm downgrade`}
           </AlertDialogAction>
         </AlertDialogFooter>

application/account/WebApp/routes/account/billing/-components/EditBillingInfoDialog.tsx

@@ -9,12 +9,12 @@ import {
   DialogContent,
   DialogDescription,
   DialogFooter,
+  DialogForm,
   DialogHeader,
   DialogTitle
 } from "@repo/ui/components/Dialog";
 import { DirtyDialog } from "@repo/ui/components/DirtyDialog";
 import { useDialogSetDirty } from "@repo/ui/components/DirtyDialogContext";
-import { Form } from "@repo/ui/components/Form";
 import { mutationSubmitter } from "@repo/ui/forms/mutationSubmitter";
 import { useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
@@ -113,11 +113,7 @@ function EditBillingInfoDialogBody({
   const markDirty = () => setDirty(true);
 
   return (
-    <Form
-      onSubmit={mutationSubmitter(mutation)}
-      validationErrors={mutation.error?.errors}
-      className="flex min-h-0 flex-1 flex-col"
-    >
+    <DialogForm onSubmit={mutationSubmitter(mutation)} validationErrors={mutation.error?.errors}>
       <DialogBody>
         <BillingInfoFormFields
           billingInfo={billingInfo}
@@ -136,10 +132,10 @@ function EditBillingInfoDialogBody({
         <DialogClose render={<Button type="reset" variant="secondary" disabled={mutation.isPending} />}>
           <Trans>Cancel</Trans>
         </DialogClose>
-        <Button type="submit" disabled={mutation.isPending}>
+        <Button type="submit" isPending={mutation.isPending}>
           {mutation.isPending ? (pendingLabel ?? t`Saving...`) : (submitLabel ?? t`Save`)}
         </Button>
       </DialogFooter>
-    </Form>
+    </DialogForm>
   );
 }