Profile, email change, alerts, and not-found #48

2026-04-29T02:22:37Z

an.di commented

2026-04-29 02:22:37 +00:00

Overview

This branch delivers an authenticated profile experience with rules surfaced in the UI, a secure email-change flow (request + verify) backed by API routes and persistence, sharper alert/create modal behavior (including accessibility hooks and a reusable dialog/frame pattern), navigation/link and layout polish (Footer, TopNav, new Link and Divider utilities), and a redesigned App Router not-found page with localized copy and refreshed E2E snapshots. Supporting updates include create-flow/session integration where needed, docs, and Cursor rules touches.

Changes

Profile & rules

Profile route and client/container pattern: app/(app)/profile/*, rule cards (RuleCard), list layout (List, ListEntry, listSizeLayout), icons and branding assets (Icon, logo).
Backend-oriented APIs under committed history: /api/rules/* (rule by id, duplicate, /rules/me), /api/user/me, session/mail/helpers as in the merge diff.

Email change

POST/related handlers for /api/user/email-change/request and /api/user/email-change/verify.
Validation (userEmailChangeSchemas), Prisma migration and schema updates for pending email-change state.
New/updated Vitest suites for user/rule/email-change routes.

Modals & shell

Alert, Create (modal frame view + useCreateModalA11y), new Dialog module; LoginForm tweaks; Footer, HeaderLockup; new navigation/Link and utility/Divider with Storybook and tests.

404

app/not-found.tsx, messages/en/pages/notFoundPage.json, app/tailwind.css additions, Playwright screenshots for the 404 case.

Other

lib/create/api.ts and related create-flow/session pieces; localized strings (messages/en, including profile and completed flows); docs (docs/create-flow.md, Figma/backend guides); tooling/config (next.config.mjs).

Screenshots

[Screenshot 2026-04-28 at 8.22.19 PM]

How to Test

npx vitest run — especially tests/unit/userEmailChange* rulesById*, rulesMeRoute, profile/component tests referenced in the diff.
Profile & auth — sign in; open /profile; confirm lists/cards render; spot-check rule links and logout/footer behavior if applicable.
Email change — from profile/settings flow that triggers request/verify, complete request → email link/mock verify path per env; confirm validation errors and success paths.
Modals — open Create login modal and alerts from surfaces that still use them; confirm focus trap / a11y (keyboard) matches expectations.
404 — visit a bogus app URL; confirm new layout/copy and responsiveness.
E2E (if CI didn’t) — ./node_modules/.bin/playwright test or project script for suites that reference 404-* snapshots, if applicable.

## Overview This branch delivers an authenticated profile experience with rules surfaced in the UI, a secure email-change flow (request + verify) backed by API routes and persistence, sharper alert/create modal behavior (including accessibility hooks and a reusable dialog/frame pattern), navigation/link and layout polish (Footer, TopNav, new `Link` and `Divider` utilities), and a redesigned App Router `not-found` page with localized copy and refreshed E2E snapshots. Supporting updates include create-flow/session integration where needed, docs, and Cursor rules touches. ## Changes **Profile & rules** - Profile route and client/container pattern: `app/(app)/profile/*`, rule cards (`RuleCard`), list layout (`List`, `ListEntry`, `listSizeLayout`), icons and branding assets (`Icon`, logo). - Backend-oriented APIs under committed history: `/api/rules/*` (rule by id, duplicate, `/rules/me`), `/api/user/me`, session/mail/helpers as in the merge diff. **Email change** - `POST`/related handlers for `/api/user/email-change/request` and `/api/user/email-change/verify`. - Validation (`userEmailChangeSchemas`), Prisma migration and schema updates for pending email-change state. - New/updated Vitest suites for user/rule/email-change routes. **Modals & shell** - `Alert`, `Create` (modal frame view + `useCreateModalA11y`), new `Dialog` module; `LoginForm` tweaks; `Footer`, `HeaderLockup`; new `navigation/Link` and `utility/Divider` with Storybook and tests. **404** - `app/not-found.tsx`, `messages/en/pages/notFoundPage.json`, `app/tailwind.css` additions, Playwright screenshots for the 404 case. **Other** - `lib/create/api.ts` and related create-flow/session pieces; localized strings (`messages/en`, including profile and completed flows); docs (`docs/create-flow.md`, Figma/backend guides); tooling/config (`next.config.mjs`). ## Screenshots <img width="1013" alt="Screenshot 2026-04-28 at 8.15.11 PM.png" src="attachments/2c924e33-041d-4b11-8471-c9d359ec8100"> <img width="883" alt="Screenshot 2026-04-28 at 8.19.43 PM.png" src="attachments/693f7abc-1cf9-4435-bafd-435785a3b0ea"> <img width="1267" alt="Screenshot 2026-04-28 at 8.21.26 PM.png" src="attachments/6225d79d-a694-4795-be7b-f6e8e067fa52">[Screenshot 2026-04-28 at 8.22.19 PM] ## How to Test 1. **`npx vitest run`** — especially `tests/unit/userEmailChange*` `rulesById*`, `rulesMeRoute`, profile/component tests referenced in the diff. 2. **Profile & auth** — sign in; open `/profile`; confirm lists/cards render; spot-check rule links and logout/footer behavior if applicable. 3. **Email change** — from profile/settings flow that triggers request/verify, complete request → email link/mock verify path per env; confirm validation errors and success paths. 4. **Modals** — open Create login modal and alerts from surfaces that still use them; confirm focus trap / a11y (keyboard) matches expectations. 5. **404** — visit a bogus app URL; confirm new layout/copy and responsiveness. 6. **E2E (if CI didn’t)** — `./node_modules/.bin/playwright test` or project script for suites that reference `404-*` snapshots, if applicable.

Screenshot 2026-04-28 at 8.15.11 PM.png

976 KiB

Screenshot 2026-04-28 at 8.19.43 PM.png

174 KiB

Screenshot 2026-04-28 at 8.21.13 PM.png

254 KiB

Screenshot 2026-04-28 at 8.21.26 PM.png

480 KiB

Screenshot 2026-04-28 at 8.22.09 PM.png

496 KiB