# 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.