diff --git a/docs/superpowers/specs/2026-06-07-toast-notifications-design.md b/docs/superpowers/specs/2026-06-07-toast-notifications-design.md new file mode 100644 index 0000000..42d8e9e --- /dev/null +++ b/docs/superpowers/specs/2026-06-07-toast-notifications-design.md @@ -0,0 +1,123 @@ +# Toast Notifications + Consistent Mutation Feedback — Design + +**Date:** 2026-06-07 +**Status:** Approved (brainstorming) — ready for implementation planning. +**Issue:** #47. + +## Context + +Mutations across the app communicate **success only** by side effects (navigation, a dialog +closing) — a curator doing bulk cataloguing can't tell whether a save landed, which invites +double-submits and re-checking. **Errors** are inconsistent: inline `

` in the +forms, in-dialog for deletes, three message kinds in `publish-control`, and some mutation +failures surface nowhere. There is no toast/notification system (no `toast`/`sonner` dep). + +### Facts established during exploration +- The `QueryClient` is created at **module scope** in `web/src/main.tsx` (outside React), with + `defaultOptions.queries` only — no mutation defaults yet. +- **Base UI ships a `toast` primitive** (`@base-ui/react/toast`) — no new dependency. It exports + `createToastManager()`, an **out-of-React manager** you pass to `` and can + `.add()` from anywhere — the clean bridge to the module-scope queryClient handlers. +- The `i18n` singleton (`web/src/i18n`) exposes `i18n.t(...)`, callable **outside React**. +- Existing typed mutation errors (`web/src/api/queries.ts`): `InUseError` (409 + count), + `FieldRejection` (422 field), `HttpError` (status), `VisibilityError`. The object form shows + 422 as a field highlight; the delete dialogs catch errors and show them inline. + +### Decisions (from brainstorming) +1. **Base UI Toast**, bridged via a module-scope `createToastManager()` (no new dep, consistent + with the combobox/tooltip/drawer wrappers). +2. **Wiring: global `MutationCache` + per-mutation `meta`.** A global `onError` is a catch-all + safety net (no silent failures); a global `onSuccess` shows a toast only when a mutation + declares `meta.successMessage`. Mutations that report errors inline opt out via + `meta.suppressErrorToast`. +3. **Keep inline field/dialog errors** (422 highlight, 409 "in use") — toasts add success + confirmations + a catch-all for otherwise-silent failures, not a replacement. + +## Components + +### `ui/toast.tsx` (new) + the manager +- Module scope (alongside the QueryClient — `main.tsx` or a small `web/src/toast/` module): + `export const toastManager = Toast.createToastManager();` +- `web/src/components/ui/toast.tsx` — wrap the Base UI Toast parts (Provider / Viewport / + Portal / Positioner / Root / Title / Description / Close) in the established `ui/*` style + (`data-slot`, `cn()`, mirror `ui/alert-dialog.tsx`). Provide a `` that renders + `Toast.Provider` (with `toastManager`) + a `Toast.Viewport` listing the active toasts (mapped + from `useToastManager().toasts`), styled as stacked cards (success vs error variant via the + toast's `type`/`data`). The viewport must be an `aria-live` region (Base UI handles the live + semantics; confirm). **Base UI Toast is novel in this repo → the exact part tree + manager API + (`createToastManager`, `manager.add({ title?, description, type })`, `useToastManager`) must be + validated by running** (as the combobox/drawer/tooltip were). +- Mount `` in `main.tsx` inside the provider tree (so it's on every screen). + +### Global mutation feedback (`main.tsx` / queryClient) +```ts +const queryClient = new QueryClient({ + defaultOptions: { queries: { retry: false, refetchOnWindowFocus: false } }, + mutationCache: new MutationCache({ + onError: (error, _vars, _ctx, mutation) => { + if (mutation.meta?.suppressErrorToast) return; + toastManager.add({ type: "error", description: errorMessage(error, mutation) }); + }, + onSuccess: (_data, _vars, _ctx, mutation) => { + const key = mutation.meta?.successMessage; + if (key) toastManager.add({ type: "success", description: i18n.t(key) }); + }, + }), +}); +``` +- `errorMessage(error, mutation)`: `mutation.meta?.errorMessage ? i18n.t(...)` else a type-aware + default — `InUseError` → `i18n.t("actions.inUse", { count })`, `HttpError` 503 → + `i18n.t("search.unavailable")`, otherwise `i18n.t("toast.error")`. +- `meta` is typed via a module augmentation of `@tanstack/react-query`'s `Register` interface so + `meta.successMessage`/`meta.errorMessage`/`meta.suppressErrorToast` are type-checked (no + `any`). + +### Per-mutation meta (`web/src/api/queries.ts`) +- **`meta.successMessage`** (a `toast.*` key) on the discrete actions: object create/update/ + delete, set-visibility/publish, vocabulary create/rename/delete, term create/update/delete, + authority create/update/delete, field-definition create/update/delete. +- **`meta.suppressErrorToast: true`** on mutations that surface errors inline: the object form's + create/update + `useSetFields` (422 field highlight), `useLogin`, and the delete hooks (the + `DeleteConfirmDialog`/`DeleteObjectDialog` show the 409/rejection inline). These keep success + toasts. + +## Data flow +A mutation runs → react-query's `MutationCache` fires the global `onSuccess`/`onError` → reads +`mutation.meta` → `toastManager.add(...)` (message via `i18n.t`) → `` (subscribed +to the manager) renders the toast in its portal/viewport → auto-dismisses (Base UI default) or +on Close. Inline field/dialog errors render as before (unaffected). + +## Error handling / edges +- A mutation with neither `meta` nor inline handling → still gets the catch-all error toast on + failure (the safety net); silent success (no `successMessage`) is intentional where navigation + already signals it. +- No double-report: inline-handling mutations set `suppressErrorToast`. +- `i18n.t` outside React uses the singleton's current language (already synced via the locale + hook); a missing key falls back to the generic `toast.error`. +- Toasts stack + auto-dismiss; an error toast may stay longer / be dismissible (Base UI config). + +## Testing +- **Vitest + RTL + MSW:** a mutation declaring `meta.successMessage` shows a success toast + (query `within(document.body)`); a failing mutation (MSW 500) shows an error toast; a + `suppressErrorToast` mutation does **not** add a toast on error (no double-report) while its + inline error still renders; the toast region is present and `aria-live`. Drive these through a + real screen action (e.g. create a vocabulary → "Created" toast; a 500 → error toast). +- **Storybook:** a `ui/toast` story rendering a success + an error toast (via the manager), per + the standing preference; verify the Base UI composition by running. +- Reuse existing screens' MSW handlers (`web/src/test/handlers.ts`). + +## Acceptance criteria +1. A Base UI toast region is mounted app-wide; `toastManager` (out-of-React) is `.add`-able from + the queryClient handlers. No new npm dependency. +2. Global `MutationCache`: `onError` toasts a catch-all (type-aware) message unless + `meta.suppressErrorToast`; `onSuccess` toasts `meta.successMessage` when present. +3. The discrete CRUD/publish mutations declare `meta.successMessage`; inline-error mutations + (object form, login, deletes) set `meta.suppressErrorToast` and keep their inline UX. +4. `meta` is type-checked (react-query `Register` augmentation); no `any`/`eslint-disable`. +5. en/sv parity for the `toast.*` keys; a toast Storybook story; `pnpm typecheck`/`lint`/`test`/ + `build` green; `check:size` within 180 KB gz; no codename. + +## Out of scope → follow-ups +- Replacing the inline 422 field-highlight / 409 "in use" UX with toasts. +- Undo/action toasts, queued/grouped toasts, per-account toast preferences. +- Toasting query (read) errors — this milestone covers mutations (the silent-write problem).