How to Clone Opal

Create an Opal-style focus and screen-time app called Sundial as a Next.js (App Router) + Tailwind + Prisma + SQLite project.

## Product
Subscription focus app: timed focus sessions with intentions and website blocklists, a daily Focus Score (0–100), gems, streaks, and accountability friends. Freemium - short sessions free, deep focus and schedules premium with a 7-day trial.

## Screens
- Marketing landing: dark hero with glowing gold accents, 'Take back 2 hours a day.', animated counter of total focused hours, pricing toggle (monthly $9.99 / yearly $59.99 highlighted with 'save 50%'), testimonials, FAQ accordion
- Onboarding quiz: 4-step wizard (distraction type, daily phone hours, goal, schedule preference) ending in a paywall screen with trial CTA
- Focus home (authed): Focus Score ring + streak flame header, intention input, duration picker (25/50/90/custom), blocklist chip selector, large Start button
- Active session: full-screen timer with rotating dial animation, intention displayed, end-early friction modal (60s countdown + typed confirmation), confetti + gem toast on completion
- Stats: 30-day score sparkline, weekly minutes bar chart, totals row (gems, best streak, hours reclaimed)
- Friends: list with score/streak/live-focusing badge, invite-link generation, nudge action
- Settings: blocklist CRUD (named lists of domains), reminder time, plan management
- Admin (role-gated): users table and preset blocklist CRUD

## Prisma schema
User (id, email, name, goal, dailyPhoneHours, isPremium, trialEndsAt, streakCount, lastSessionDate, gemsBalance, focusScore, role), FocusSession (id, userId, intention, plannedMinutes, actualMinutes, startedAt, endedAt, completed, wasDeepFocus, blocklistId), Blocklist (id, userId, name, isPreset) with BlocklistItem (blocklistId, domain), Friendship (userId, friendId, status), GemEntry (userId, amount, reason, createdAt)

## Logic
- Session timer runs client-side with the end time persisted server-side at start, so a refresh resumes correctly; completion is computed server-side from timestamps
- Completing a session: gems += plannedMinutes, streak +1 if first completion today (reset on gaps), recompute focusScore = min(100, 0.6*minutesToday + 25*completionRate + 1.5*streak)
- Ending early: actualMinutes recorded, no gems, completionRate drops; deep-focus sessions require the friction modal before the end action is enabled
- Free users capped at 25-minute sessions and one blocklist; gates open a paywall modal; 'Start free trial' sets isPremium with trialEndsAt = now + 7 days (mock checkout, structured so Stripe can replace it)
- A simple /api/blocked?domain= endpoint returns whether a domain is blocked for the current user's active session (this is what a browser extension would poll)

## Style
Dark and purposeful: navy #0A1228 base, gold #F5A623 accents, subtle grain texture, glass cards, rounded-2xl, Space Grotesk headings + Inter body, smooth 300ms transitions. Mobile-first PWA layout with a bottom tab bar (Focus, Stats, Friends, Settings).

Seed: 3 preset blocklists (Social, News, Video) with realistic domains, demo user with a 6-day streak, 80 gems and 14 days of varied session history, plus 2 friends (one currently 'focusing').

## Stretch goals (only if the core works)
- Scheduled routines: a Schedule model (userId, days, startTime, endTime, blocklistId) that auto-creates sessions; premium-gated
- Weekly recap page at /recap/[week] with score trend and hours reclaimed, designed to be screenshotted
- Interruption tracking: use the Page Visibility API during active sessions; 3+ tab-switches flags the session 'distracted' and reduces gems by half
- A /leaderboard among accepted friends ranked by weekly Focus Score, with an opt-out toggle in settings

Build a production-quality Opal-style focus app. Mobile-first PWA now; the repo should be structured so a React Native app with a native Swift Screen Time module can share the API and domain logic later.

## Stack
- Next.js 14 App Router + TypeScript + Tailwind + shadcn/ui, next-pwa for installability
- Supabase: Postgres, Auth (email + Apple/Google OAuth), Realtime for live friend presence
- Stripe Billing: monthly + yearly prices, 7-day trial on yearly, customer portal for cancellation
- Zustand for the active-session store; Zod everywhere inputs cross a boundary

## Critical architecture
- Sessions are server-authoritative: POST /sessions stores started_at and planned end; completion is validated server-side from timestamps so clients can't fake gems, streaks or Focus Score
- ActiveSessionProvider: persists session state to localStorage AND server; on reload, reconciles with the server record; uses the Page Visibility API to count 'interruptions' (tab switches) against the score
- Focus Score computed in a Postgres function (recompute_focus_score) triggered on session insert/update - single source of truth, mirrored nowhere
- Friend presence via Supabase Realtime channels: broadcast 'focusing' status with the intention, throttled, premium-only nudges
- Blocking abstraction: a BlockingProvider interface with a WebExtensionDriver (polls /api/blocked) and a stub NativeScreenTimeDriver - document that real iOS app blocking requires FamilyControls entitlements and ships in the RN phase

## Schema
profiles (id, goal, daily_phone_hours, is_premium, trial_ends_at, streak_count, last_session_date, gems_balance, focus_score, role), focus_sessions (id, user_id, intention, planned_minutes, actual_minutes, started_at, ended_at, completed, was_deep_focus, interruptions, blocklist_id), blocklists + blocklist_items, friendships (user_id, friend_id, status), gem_entries (user_id, amount, reason). RLS on every table; friends can read each other's score/streak/presence but never session intentions history.

## Implementation order
1. Scaffold, Supabase schema + RLS policies, auth flows
2. Session engine: start/complete/abandon endpoints, server-side validation, gems + streak + score function with unit tests on edge cases (midnight rollover, timezone, refresh mid-session)
3. Focus home + active session UI: timer, dial animation, deep-focus friction flow (60s + typed confirmation), completion celebration
4. Stats: 30-day score chart and weekly minutes (build with CSS/SVG, no heavy chart lib), 'hours reclaimed' calc vs onboarding baseline
5. Onboarding quiz → paywall: wizard stores answers on profile, Stripe Checkout with trial on yearly, webhook updates is_premium
6. Friends: invite links, presence channel, nudge with rate limiting
7. PWA + extension hook: manifest, offline shell, and the /api/blocked endpoint contract documented for a future MV3 extension

## Quality bar
- The session must survive refresh, tab close/reopen and laptop sleep without losing state or double-awarding gems
- Paywall conversion events to PostHog (trial_started, deep_focus_gate_hit, paywall_dismissed)
- Seed script: 3 preset blocklists, demo user with 14 days of history, 2 friends, one active session

## Stretch (after the quality bar passes)
- Scheduled routines table + a cron (Vercel cron or Supabase pg_cron) that opens sessions automatically and notifies via web push
- Friend leaderboard as a Postgres view over weekly scores, RLS-scoped to accepted friendships
- Interruption scoring: Page Visibility events batched to the session record; expose an 'undistracted' badge on clean sessions
- Export-my-data endpoint (CSV of sessions) - cheap trust win for a productivity audience

Start with step 1 and show me the RLS policies and the score function before moving on.

Design the complete UI for an Opal-style focus and screen-time app called Sundial. React + Tailwind + shadcn/ui + lucide-react. Aesthetic: dark and purposeful - deep navy (#0A1228) base, luminous gold (#F5A623) accents like sunlight on a dial, glass cards with subtle grain, rounded-2xl, Space Grotesk headings with Inter body, smooth confident motion.

## Screens

### 1. Marketing landing
- Full-viewport hero: slowly rotating minimal sundial illustration casting a gold gradient, headline 'Take back 2 hours a day.', subline, glowing CTA button
- Animated stat strip ('1,204,332 focused hours reclaimed'), three feature cards (Block, Score, Streak) with soft gold icons, pricing toggle (monthly $9.99 / yearly $59.99 with SAVE 50% badge), FAQ accordion, dark footer

### 2. Onboarding quiz (4 steps)
- Progress dots top, one large question per screen ('What steals your time?'), big tappable option cards with emoji icons (📱 social, 📰 news, 📺 video, 🎮 games), slider for daily phone hours with a live 'that's 91 days a year' callout, final paywall screen: blurred dashboard behind a glass card listing premium benefits with 'Start 7-day free trial' CTA and a small 'continue limited' link

### 3. Focus home
- Header: Focus Score ring (0–100, gold arc) beside a streak flame pill
- Centered intention input ('What are you focusing on?') above a duration segmented control (25 / 50 / 90 / custom)
- Blocklist chips row (Social, News, Video, + New) with lock icons on premium-only lists
- Oversized circular 'Start Focus' button with a soft pulsing gold glow
- Bottom tab bar (Focus, Stats, Friends, Settings) with gold glow on active

### 4. Active session
- Near-black full-screen, huge thin-numeral countdown, the intention in serif italics beneath, a fine gold dial ring sweeping with elapsed time
- Tiny 'End early' ghost button bottom-center; tapping opens a friction modal: 60-second countdown ring plus a text field requiring 'I choose distraction over my goal' typed exactly
- Completion state: gem burst animation, '+50 gems' toast, streak flame incrementing, share card preview

### 5. Stats
- Headline number 'You reclaimed 6h 40m this week', 30-day Focus Score area chart in gold, weekly minutes bar chart, stat cards (best streak, total gems, sessions completed), calendar heat map of focus days

### 6. Friends
- Friend cards: avatar, name, score ring mini, streak, live 'Focusing now · 32 min left' badge in green; nudge bell button per card; empty state with invite-link copy field and playful illustration

### 7. Paywall modal
- Glass card over blurred app: benefit checklist (Deep Focus, Schedules, Unlimited lists, Full history), plan selector with yearly preselected and savings badge, trial timeline graphic (Today → Day 5 reminder → Day 7 charged), primary gold CTA, restore link

Fully responsive, mobile-first - this is primarily a phone experience. Use realistic content: intentions like 'Finish the pitch deck', scores like 78, streaks like 6 days, friend names that sound real.

### 8. States & details
- Empty states: Friends (illustration + invite-link card), Stats before first session ('Your first focus session starts your story')
- Loading: skeleton shimmer on stat cards and friend rows in navy tones, never spinners
- Streak-lost state: a kind, non-punishing card ('Streaks end. Focus doesn't. Start again today.') instead of red alarm UI
- Settings screen: blocklist manager with domain chips and an add field, reminder time picker, plan card showing trial days remaining

Build a focus and screen-time subscription app (Opal model) called Sundial.

## Entities
- FocusSession: user, intention, plannedMinutes, actualMinutes, startedAt, endedAt, completed (boolean), wasDeepFocus (boolean), blocklist reference
- Blocklist: user, name, isPreset (boolean); BlocklistItem: blocklist reference, domain
- Friendship: user, friend reference, status (pending/accepted)
- GemEntry: user, amount, reason, createdAt
- UserProfile: goal (study/work/sleep/presence), dailyPhoneHours, isPremium, trialEndsAt, streakCount, lastSessionDate, gemsBalance, focusScore

## Roles & permissions
- Visitor: sees landing page and pricing only
- Free user: sessions up to 25 minutes, one blocklist, 7 days of stats; hitting any premium gate opens the paywall
- Premium user: deep-focus sessions, unlimited blocklists, scheduled sessions, full stats history, friend nudges
- Admin: full CRUD on preset blocklists, sees a dashboard (total users, premium count, total focused hours, average Focus Score)

## Pages
1. Landing: dark hero with gold accents, 'Take back 2 hours a day.', pricing (monthly $9.99 / yearly $59.99 with 7-day trial), FAQ
2. Onboarding quiz after signup: distraction type → daily phone hours → goal → schedule, ending on the paywall with 'Start 7-day free trial'
3. Focus home: Focus Score ring and streak in the header, intention input, duration picker, blocklist selector, big Start button
4. Active session: full-screen countdown with the intention shown; 'End early' requires a friction step (wait 60 seconds, then type a confirmation sentence); completion awards gems and updates the streak
5. Stats: score trend, weekly focused minutes, best streak, gems total, hours reclaimed
6. Friends: invite by link, cards with score/streak/'Focusing now' status, nudge button (premium)
7. Settings: blocklist management, reminder time, subscription status
8. Admin: preset blocklist CRUD and metrics dashboard

## Rules
- Gems earned = planned minutes, only when a session completes fully; abandoned sessions earn nothing
- Streak +1 on first completed session each day; reset to 0 after a missed day
- Focus Score (0–100) recomputed after every session from today's minutes, completion rate and streak; store it on the profile
- Deep Focus sessions cannot be ended without the friction flow
- Trial sets isPremium true and trialEndsAt = now + 7 days; after expiry user reverts to free (check on login)
- A web app cannot block other native apps - blocking here means flagged domains during active sessions; note this honestly in the settings copy

## Look & feel
Dark navy theme with luminous gold accents, glass cards, rounded corners, confident geometric headings. The active session screen should feel like a calm ritual, not a stopwatch. Mobile-first.

Seed with 3 preset blocklists (Social, News, Video) with realistic domains, one admin user, and one demo user with a 6-day streak, 80 gems, two friends and 14 days of session history.