Redesign Email Server settings + managed domain flow (#1373)

## Summary

Rewrites the **Email Server** section of the project email settings page
and the managed-domain setup flow. Replaces the dropdown +
conditional-fields layout with a visual four-card picker, a clearer
unsaved-state model, a stepper dialog for managed-domain onboarding, and
a consistent tracked-domains list. Also fixes two data-correctness bugs
in the managed-domain backend.

## Walkthrough (2×, dead-frames trimmed)


![walkthrough](https://raw.githubusercontent.com/stack-auth/stack-auth/pr-assets-email-ui/pr-assets-walkthrough.gif)

## Before

The saved state was a minimal dropdown, but choosing Custom SMTP /
Resend revealed a long conditional form with a hidden gear toggle for
server config, no clear "what is saved" signal, and a separate dialog
pattern for managed domains.

| Saved (Managed) | Custom SMTP selected |
|---|---|
|
![before-managed](https://raw.githubusercontent.com/stack-auth/stack-auth/pr-assets-email-ui/pr-assets-01-before-shared.png)
|
![before-smtp](https://raw.githubusercontent.com/stack-auth/stack-auth/pr-assets-email-ui/pr-assets-02-before-smtp.png)
|

## After — Provider cards

Four visual cards (Stack Shared, Managed Domain, Resend, Custom SMTP)
with updated copy. The saved provider shows a green **Current** pill;
the card the user is previewing shows an amber dashed **Draft** pill. An
amber unsaved-changes banner appears between the picker and the form
when state diverges from saved, so it is unambiguous that a click is not
yet committed.

| Saved state | Previewing a different provider |
|---|---|
|
![after-saved](https://raw.githubusercontent.com/stack-auth/stack-auth/pr-assets-email-ui/pr-assets-03-after-saved.png)
|
![after-draft](https://raw.githubusercontent.com/stack-auth/stack-auth/pr-assets-email-ui/pr-assets-04-after-draft.png)
|

Copy changes:
- **Stack Shared** — "Only default emails — no custom templates, themes,
or sender identity." (was: "Shared (noreply@stackframe.co)")
- **Managed Domain** — "Bring your own domain. You add DNS records; we
handle signing & delivery." (was: "Managed (via managed domain setup)")
- **Resend** uses the official Resend brand mark (light/dark variants in
`apps/dashboard/public/assets/`)

## After — Managed domain list + stepper dialog

Selecting **Managed Domain** immediately shows the tracked-domain list
with an **Add domain** button. Each row reflects real status (Active /
Verified / Waiting for DNS / Verifying / Failed). Exactly one domain can
be **Active** — the one matching the saved email config; every other
verified/applied domain shows a **Use this domain** button so switching
is always possible.

Adding a domain opens a 3-stage dialog with a horizontal stepper (Verify
is right-aligned for the final step). Stage 2 replaces the old bare
NS-list with a proper **Type / Name / Content** DNS records table with
per-row copy buttons.

| Tracked domains list | DNS records table |
|---|---|
|
![after-list](https://raw.githubusercontent.com/stack-auth/stack-auth/pr-assets-email-ui/pr-assets-05-after-managed-list.png)
|
![after-dns-table](https://raw.githubusercontent.com/stack-auth/stack-auth/pr-assets-email-ui/pr-assets-06-after-dns-table.png)
|

## Bug fixes

- **Backend: applying a managed domain did not demote previously-applied
ones.** Multiple rows could end up with status `APPLIED` even though
only one could be in the saved config. New helper
`demoteOtherAppliedManagedEmailDomains({ tenancyId, keepId })` runs
inside `applyManagedEmailProvider` to demote all other applied rows in
the tenancy back to `VERIFIED` before marking the new one.
- **Frontend: "Use this domain" only appeared for `status ===
verified`.** A domain that had been applied then replaced could never be
re-applied from the UI. Button now appears for any `verified` or
`applied` row that is not currently in use; the **Active** label is
derived from config match instead of DB status.
- **Dev mock onboarding now mirrors production timing.**
`shouldUseMockManagedEmailOnboarding()` used to insert domains as
`verified` synchronously. Now the domain is created as
`pending_verification`, and a fire-and-forget `runAsynchronously(() =>
wait(1000))` updates it to `verified` — mirroring the real Resend
webhook flow so the UI states (pending → verifying → verified) are
exercised in local dev.

## Test plan
- [ ] Cards: clicking each card shows `Draft` pill + amber banner;
Discard restores; Save commits and flips `Current` to the new card
- [ ] Managed: Add domain → stage 1 input → stage 2 DNS table + copy →
Check verification flips to stage 3 → Use this domain sets it Active and
demotes the previously-active domain in the list
- [ ] Managed: clicking **Use this domain** on a non-active verified row
makes it Active and the previously-active row back to Verified
- [ ] Shared / Resend / SMTP: existing save + test-email flows still
work (logic preserved verbatim)
- [ ] `pnpm typecheck` (dashboard + backend) and `pnpm lint` pass

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Redesigned email domain setup flow with multi-step verification dialog
  * Added copy-to-clipboard for DNS records
* Enhanced provider selection interface with improved visual
presentation
* Onboarding now shows initial "pending verification" state and
completes verification asynchronously

* **Bug Fixes**
* Ensures only one managed domain becomes active when applying a domain
  * Improved error handling for email configuration saves

* **Tests**
  * Updated end-to-end tests to reflect async verification timing
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: BilalG1

apps/backend/src/lib/managed-email-domains.tsx

@@ -181,6 +181,22 @@ export async function updateManagedEmailDomainWebhookStatus(options: {
   return mapRow(rows[0]!);
 }
 
+export async function demoteOtherAppliedManagedEmailDomains(options: {
+  tenancyId: string,
+  keepId: string,
+}): Promise<void> {
+  await globalPrismaClient.$queryRaw(Prisma.sql`
+    UPDATE "ManagedEmailDomain"
+    SET
+      "status" = 'VERIFIED'::"ManagedEmailDomainStatus",
+      "appliedAt" = NULL,
+      "updatedAt" = CURRENT_TIMESTAMP
+    WHERE "tenancyId" = ${options.tenancyId}
+      AND "id" <> ${options.keepId}
+      AND "status" = 'APPLIED'::"ManagedEmailDomainStatus"
+  `);
+}
+
 export async function markManagedEmailDomainApplied(id: string): Promise<ManagedEmailDomain> {
   const rows = await globalPrismaClient.$queryRaw<ManagedEmailDomainRow[]>(Prisma.sql`
     UPDATE "ManagedEmailDomain"

apps/backend/src/lib/managed-email-onboarding.tsx

@@ -3,6 +3,7 @@ import {
   ManagedEmailDomain,
   ManagedEmailDomainStatus,
   createManagedEmailDomain,
+  demoteOtherAppliedManagedEmailDomains,
   getManagedEmailDomainByResendDomainId,
   getManagedEmailDomainByTenancyAndSubdomain,
   listManagedEmailDomainsForTenancy,
@@ -12,6 +13,7 @@ import {
 import { Tenancy } from "@/lib/tenancies";
 import { getNodeEnvironment, getEnvVariable } from "@stackframe/stack-shared/dist/utils/env";
 import { StackAssertionError, StatusError } from "@stackframe/stack-shared/dist/utils/errors";
+import { runAsynchronously, wait } from "@stackframe/stack-shared/dist/utils/promises";
 
 type ResendDomainRecord = {
   record: string,
@@ -543,7 +545,16 @@ export async function setupManagedEmailProvider(options: { subdomain: string, se
       senderLocalPart: options.senderLocalPart,
       resendDomainId: `managed_mock_${options.tenancy.id}_${normalizedSubdomain}`.replace(/[^a-zA-Z0-9_-]/g, "_"),
       nameServerRecords: ["ns1.dnsimple.com", "ns2.dnsimple.com"],
-      status: "verified",
+      status: "pending_verification",
+    });
+    runAsynchronously(async () => {
+      await wait(1000);
+      await updateManagedEmailDomainWebhookStatus({
+        resendDomainId: row.resendDomainId,
+        providerStatusRaw: "verified",
+        status: "verified",
+        lastError: null,
+      });
     });
     return managedDomainToSetupResult(row);
   }
@@ -631,6 +642,10 @@ export async function applyManagedEmailProvider(options: {
     senderLocalPart: domain.senderLocalPart,
   });
 
+  await demoteOtherAppliedManagedEmailDomains({
+    tenancyId: options.tenancy.id,
+    keepId: domain.id,
+  });
   await markManagedEmailDomainApplied(domain.id);
   return { status: "applied" };
 }