Lab: The screens

Build week one: by the end of this lab, Replyable looks real — three screens, navigation between them, your variant's words everywhere — all running on five fake messages. Work screen by screen; commit after each.

1. 1Create the mock data first: ask the assistant for lib/mock-data.ts exporting 5 sample messages matching your spec's exact columns — including one long body, one emoji-only body (🔥🔥🔥 counts as customer feedback), one replied, one done, and one received today (so you can see date formatting handle 'today' vs. dates). Realistic mocks make every later step honest.
2. 2Build the Inbox (app/page.tsx + a MessageCard component): list newest-first, unread (new) bold, StatusBadge, filter tabs (All / New / Replied / Done) working via state, and the empty state (filter to a status with no messages to see it). Your assistant will add a "use client" line at the top of components that hold state — ask it to explain why: pages run on the server unless marked for the browser, and that directive is the second piece of framework magic worth understanding (the [id] folder is the first). Iterate the visuals in small rounds until it looks like something you'd show someone — because in Module 8, you will.
3. 3Build the Thread (app/messages/[id]/page.tsx): full message, a replies section (mock one reply on one message), the reply textarea with a character count, and two buttons — 'Send reply' (just updates state for now) and a disabled 'Draft with AI' placeholder wearing its Module 5 promise. Clicking a card in the inbox navigates here; a back link returns. Navigation is Next.js routing doing its job — ask the assistant to explain the [id] folder name; it's the one piece of framework magic this week worth understanding.
4. 4Build Settings-lite (app/settings/page.tsx): a tone picker (friendly / professional / brief) stored in state, and a note where the API key section will live ('server-side, Module 5'). Five minutes; it exists so the app's shape is complete.
5. 5The responsive pass: shrink the window to phone width. Fix what breaks with one iteration round per screen ('stack the filter tabs', 'let cards wrap'). Then the commit ritual: three screens, three commits, and a git log that reads like progress — because it is.