How to Clone Things 3

Create a Things 3-style premium to-do app called Cleartask as a Next.js (App Router) + Tailwind + Prisma + SQLite project. One-time purchase model, no subscription.

## Product
A polished GTD task manager: Inbox capture, Projects, Areas, and the smart lists Today / Upcoming / Anytime / Someday. The product's whole identity is speed and craft, bought once.

## Screens
- Marketing landing: clean hero, 'pay once, no subscription' badge, feature cards, pricing ($29 lifetime), FAQ accordion
- App shell: left sidebar (Inbox, Today, Upcoming, Anytime, Someday + Areas with nested Projects), main list pane, right slide-over for task detail
- Inbox: fast quick-add bar, flat task list
- Today: 'Today' and 'This Evening' groups, check-off animation
- Upcoming: date-grouped scheduled tasks
- Project view: notes header, headings, tasks, a completion progress ring
- Task detail slide-over: title, notes, when picker, due date, tags, checklist sub-items

## Prisma schema
User (id, email, name, hasPro), Area (id, userId, name, position), Project (id, userId, areaId, title, notes, status, position), Task (id, userId, projectId, heading, title, notes, whenType, scheduledDate, dueDate, status, position), Tag (id, userId, name), TaskTag (taskId, tagId), ChecklistItem (id, taskId, title, done, position)

## Logic
- Quick-add defaults to Inbox; when added inside a project or dated list it inherits that context
- Today query: whenType in (today, evening) OR scheduledDate <= today, status = open
- Optimistic UI: completing a task updates the store immediately and persists in the background; a project offers to auto-complete when its last task is done
- Drag-and-drop reordering writes a fractional/position value; keep it simple but stable
- Free tier caps projects at 3; the one-time '$29 Lifetime' purchase sets hasPro and removes the cap (mock checkout, structured so Stripe can replace it)

## Keyboard & quick-entry
- A global quick-add (e.g. pressing 'n') opens a one-field entry that lands in the Inbox
- Enter creates and keeps adding; arrow keys move selection; space/enter toggles complete - make the app fast without a mouse

## Style
Bright and minimal: off-white #FAFAF8, one blue accent, crisp Inter typography, generous spacing, spring animations on check-off and reorder, subtle row hover. Light theme primary with a dark variant. Mobile-first, three-pane on desktop.
- Empty states should feel calm and rewarding ('Nothing for today. Enjoy.')

Seed: 3 areas, 5 projects with headings and progress, ~25 tasks across all smart lists, 4 tags, one demo user.

Build a production-quality Things 3-style to-do app. The whole bar here is polish and speed; treat it as a craft project. Mobile-first PWA now, native port later - keep the data/domain layer platform-agnostic.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa
- Local-first: a normalized client store (Zustand) is the source of truth for the UI; writes are optimistic and sync in the background
- Supabase Postgres for persistence + auth (email + Apple/Google OAuth); structure a sync layer (or PowerSync/Electric) so multi-device sync can be added without rewrites
- RevenueCat (non-consumable IAP) for the one-time unlock on mobile; Stripe for a web license - NO subscription
- Zod at every boundary

## Critical architecture
- Instant feel: every mutation hits the local store first and renders synchronously; the network is fire-and-forget with reconciliation. The app must never block on a request to check off a task.
- Ordering: use fractional indexing (or a stable position scheme) for drag-and-drop reordering across projects and lists so reorders are O(1) writes and don't renumber siblings.
- Smart-list logic in one pure module: deriving Today / Upcoming / Anytime / Someday from tasks must be a single tested function, not scattered queries - this is where to-do apps rot.
- Entitlements: hasPro is a server-verified flag from the IAP receipt; gate the project cap server-side, never trust the client.

## Schema
profiles (id, has_pro), areas (id, user_id, name, position), projects (id, user_id, area_id, title, notes, status, position), tasks (id, user_id, project_id, heading, title, notes, when_type enum, scheduled_date, due_date, status enum, position), tags + task_tags, checklist_items. RLS on every table.

## Implementation order
1. Scaffold, Supabase schema + RLS, auth, the normalized client store and optimistic-write plumbing
2. Core lists: app shell with sidebar, Inbox + quick-add, Today, the smart-list derivation module (write its tests first)
3. Projects & areas: project view with headings and a progress ring, areas in the sidebar, drag-and-drop with fractional indexing
4. Task detail: slide-over with when-picker, dates, tags, checklist sub-items; natural-language date parsing ('tomorrow 5pm')
5. Animation pass: check-off, reorder and slide-over springs - this is the product, budget real time
6. Monetization: one-time unlock (RevenueCat/Stripe), restore purchase, server-gated project cap; PWA manifest + offline

## Quality bar
- Checking off a task is visually instant with zero perceptible latency, even offline
- Reordering 200 tasks doesn't lag and doesn't rewrite every row
- The smart-list module has unit tests covering today/evening/scheduled/overdue edge cases

Start with step 1 and show me the store shape and the smart-list derivation function before moving on.

Design the complete UI for a Things 3-style premium to-do app called Cleartask. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: bright, calm, ultra-minimal - off-white (#FAFAF8) background, generous whitespace, a single friendly blue accent, crisp system-style typography, subtle spring micro-interactions. The feeling is 'expensive and effortless'.

## Screens

### 1. Marketing landing
- Clean hero with a sharp three-pane app screenshot, serif-tinged headline 'Your to-dos, beautifully done.', a small pill badge 'Pay once. No subscription.', subline
- Three feature cards (Capture, Organize, Focus) with light line icons, a pricing card ($29 Lifetime, single button), a short FAQ, a quiet footer

### 2. App shell (desktop three-pane)
- Left sidebar: smart lists (Inbox with a badge count, Today with a star, Upcoming, Anytime, Someday) then a divider, then Areas (Work, Personal, Health) with nested projects each showing a tiny progress ring
- Center: the active list. Right: a task-detail slide-over

### 3. Today
- A 'Today' section and a 'This Evening' section, each a list of tasks with circular checkboxes; checking one shows a satisfying fill-and-strike animation; an empty state with a calm illustration and 'Nothing for today. Enjoy.'

### 4. Project view
- A large project title with a circular completion ring beside it, an optional notes line, collapsible Headings, and tasks beneath; a subtle '+ New To-Do' inline add

### 5. Task detail slide-over
- Title field, multiline notes, a 'When' picker (Today / This Evening / a date / Someday) as a clean popover with a mini calendar, a Deadline row, a tags row of soft pills, and a checklist of sub-items with their own small checkboxes

### 6. Quick-add
- A floating quick-entry card (triggered by a + button) with a single title field, an inline date and tag chip, and a hint 'Adds to Inbox' - fast and keyboard-friendly

### 7. Mobile layouts
- A bottom-or-hamburger nav that opens the sidebar as a drawer; the list pane is full-width; the task detail opens as a bottom sheet that slides up

### 8. Pricing & upsell
- A tasteful 'Cleartask Lifetime - $29, no subscription' card and a gentle in-app nudge when a free user hits the 3-project limit

### 9. Upcoming timeline
- A date-grouped view (Tomorrow, this week, later) with light section headers and the same circular checkboxes

Fully responsive: a clean three-pane on desktop that collapses to a sidebar-drawer + single list on mobile. Use realistic content: projects like 'Launch personal site', 'Plan trip to Lisbon', tasks like 'Email the accountant', tags like @errand, @calls. Include a tasteful dark variant.

Build a premium GTD-style to-do app (Things 3 model) called Cleartask. One-time purchase, no subscription.

## Entities
- Area: name, position
- Project: area reference, title, notes, status (active/completed), position
- Task: project reference (optional), heading, title, notes, whenType (inbox/today/evening/scheduled/anytime/someday), scheduledDate, dueDate, status (open/completed), position
- Tag: name; tasks can have many tags
- ChecklistItem: task reference, title, done (boolean), position
- UserProfile: hasPro (boolean)

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: can create up to 3 projects and unlimited tasks within them
- Pro user (after one-time purchase): unlimited projects and areas
- Admin: sees a dashboard (total users, pro conversions, tasks created)

## Pages
1. Landing: hero, 'pay once' pricing ($29 lifetime), FAQ
2. App: left sidebar with smart lists (Inbox, Today, Upcoming, Anytime, Someday) and Areas containing Projects; a main list pane; a task-detail panel
3. Inbox: quick-add bar and a flat list
4. Today: tasks due/scheduled today, grouped into Today and This Evening
5. Upcoming: date-grouped scheduled tasks
6. Project: notes header, headings, tasks, completion progress
7. Admin: dashboard

## Rules
- Quick-add lands in the Inbox unless created inside a project or dated list
- Today list = tasks with whenType today/evening OR scheduledDate on/before today, status open
- Completing all tasks in a project offers to mark the project complete
- Free users are limited to 3 projects; the one-time purchase sets hasPro and removes the limit

## Look & feel
Bright, minimal, premium: off-white background, one blue accent, crisp typography, generous whitespace, satisfying check-off animation. Mobile-first, three-pane on desktop.

Seed with 3 areas, 5 projects with headings, ~25 tasks across all smart lists, 4 tags, one admin user and one demo user.