diff --git a/docs/superpowers/plans/2026-06-07-toast-notifications.md b/docs/superpowers/plans/2026-06-07-toast-notifications.md new file mode 100644 index 0000000..67405d8 --- /dev/null +++ b/docs/superpowers/plans/2026-06-07-toast-notifications.md @@ -0,0 +1,218 @@ +# Toast Notifications + Consistent Mutation Feedback — Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans. Steps use checkbox (`- [ ]`) syntax. + +**Goal:** Add a Base UI toast system bridged to the out-of-React `QueryClient`, so every mutation gives consistent feedback — a per-mutation success toast (opt-in via `meta.successMessage`) and a catch-all error toast (unless `meta.suppressErrorToast`) — while keeping the existing inline 422/409 UX. + +**Architecture:** A module-scope `createToastManager()` is passed to a `` (`Toast.Provider` + portaled viewport) mounted app-wide, and `.add()`-ed from a `MutationCache` on the `QueryClient` (`onError`/`onSuccess` read `mutation.meta` + `i18n.t` outside React). The 18 mutation hooks declare `meta`. `meta` is type-checked via a react-query `Register` augmentation. + +**Tech Stack:** React 19 + TS + pnpm, `@base-ui/react` toast (already a dep), TanStack Query, react-i18next, Vitest+RTL+MSW, Storybook 10. + +**Conventions:** pnpm; **no `any`/`eslint-disable`/`@ts-ignore`**; component source double-quote+semicolon, stories single-quote+no-semicolon; en/sv parity; no codename; portal queries via `within(document.body)`; `check:size` ≤ 180 KB gz. + +**Spec:** `docs/superpowers/specs/2026-06-07-toast-notifications-design.md` + +**Base UI Toast facts (validated from the d.ts):** `createToastManager()` → `{ add(opts) => id, close, update, promise }` (works outside React; `add({ title?, description?, type?, timeout?, priority? })`, `type` is a free-form string, re-`add` with same `id` updates in place). `Toast.Provider` accepts `toastManager`. Render: `const { toasts } = Toast.useToastManager(); toasts.map(t => …)`. Parts: Provider / Viewport / Portal / Positioner / Root(requires `toast` prop) / Title(`

`) / Description(`

`) / Close(`