95 lines
2.4 KiB
Markdown
95 lines
2.4 KiB
Markdown
# Lovable — Settings Page UX Kit (Micro-App)
|
||
|
||
Before you start: read and follow `DESIGN_SYSTEM_BRIEF.md`, `UX_TOKEN_CONTRACT.md`, `REPO_SCOPING_RULES.md`, and `ACCEPTANCE_CHECKLIST.md`.
|
||
|
||
## Goal
|
||
|
||
Build a **UI/UX-rich settings dashboard** micro-app demonstrating premium settings patterns that we can reuse across dashboards and product web apps.
|
||
|
||
This is design-led: prioritize spacing, typography, states, and interaction polish.
|
||
|
||
## Constraints
|
||
|
||
- Only modify files in this repository.
|
||
- pnpm only.
|
||
- Next.js 16 App Router, React 19, TypeScript strict.
|
||
- TailwindCSS v4.
|
||
- No network calls.
|
||
- No `console.log`.
|
||
- No hardcoded colors — use `--ux-*` CSS variables from `UX_TOKEN_CONTRACT.md`.
|
||
- Avoid unnecessary dependencies. If you add a dependency, justify why it is required.
|
||
|
||
## Must-have routes
|
||
|
||
- `/` overview landing
|
||
- `/settings` main settings dashboard
|
||
- `/settings/account` account settings section
|
||
- `/settings/notifications` notifications settings section
|
||
- `/settings/privacy` privacy settings section
|
||
- `/settings/appearance` appearance settings section
|
||
|
||
## App shell / IA
|
||
|
||
- Left settings nav (section list)
|
||
- Main content area
|
||
- Sticky top header with:
|
||
- search settings (filters visible settings rows)
|
||
- “Reset changes” (revert local edits)
|
||
- save status indicator (Saved / Saving / Error)
|
||
|
||
## Core UX requirements
|
||
|
||
### Settings layout patterns
|
||
|
||
- Section headers with description
|
||
- Rows with:
|
||
- label
|
||
- description
|
||
- control (toggle/select/input)
|
||
- optional inline error
|
||
|
||
### Autosave behavior (local-only)
|
||
|
||
- Changes persist to localStorage
|
||
- Simulate async save:
|
||
- show “Saving…” for 400–800ms
|
||
- then “Saved”
|
||
- provide a demo toggle to simulate “Save failed” state
|
||
|
||
### Danger zone
|
||
|
||
- “Delete local profile” action
|
||
- confirm dialog (destructive)
|
||
- requires typing a confirmation word (e.g. DELETE)
|
||
|
||
### Accessibility
|
||
|
||
- Full keyboard navigation
|
||
- Correct labels for inputs
|
||
- Focus rings are token-driven
|
||
|
||
## Visual / UX bar
|
||
|
||
- Premium spacing/typography
|
||
- Subtle animations
|
||
- Mobile responsive (nav collapses to drawer on small screens)
|
||
|
||
## Deliverables
|
||
|
||
- Full Next.js app with scripts:
|
||
- `dev`
|
||
- `check` (must run `tsc --noEmit` + `eslint`)
|
||
- `build` (must run `next build --webpack`)
|
||
|
||
## Verification
|
||
|
||
From repo root:
|
||
|
||
- `pnpm install`
|
||
- `pnpm run check`
|
||
- `pnpm run build`
|
||
|
||
## Output expectation
|
||
|
||
Open a PR that only changes files in this repo.
|