How to Clone Slack

Create a full-stack Slack-style team-chat app called ChatNest using Next.js (App Router), Tailwind CSS, Prisma and SQLite (swappable to Postgres), with realtime messaging via Pusher or Supabase Realtime.

## What to build
A workspace with channels and DMs where members chat in real time, react with emoji, mention each other and search history. Per-seat plans gate member count and history length.

## Key screens
- Auth + create/join workspace
- Three-column app shell: left sidebar (channels, DMs, unread badges, create button), center message pane (header, message list, composer), right panel (members / channel info / threads)
- Channel view: realtime messages, reactions, @mentions, edit/delete own
- DM view: 1:1 and group private chats
- Search bar across messages
- Settings: profile, notifications, members, billing (Free / Pro / Business)

## Schema (Prisma)
- User (id, name, email, image, status)
- Workspace (id, ownerId, name, plan)
- Membership (id, workspaceId, userId, role)
- Channel (id, workspaceId, name, isPrivate, topic)
- ChannelMember (id, channelId, userId)
- Message (id, channelId?, dmId?, authorId, body, parentId?, editedAt, createdAt)
- Reaction (id, messageId, userId, emoji)

## Logic that must work
- New messages broadcast to everyone in the channel over the realtime channel and append without refresh
- Persist each message to the database first, then broadcast; the sender shows it optimistically and reconciles with the saved copy
- Authorization: private channels and DMs only load for their members; check membership server-side, not just in the UI
- @mentions and @channel create unread/notification state for recipients
- Users edit/delete only their own messages; threads attach via parentId
- Load history with cursor-based pagination (older messages on scroll up), not all at once
- Free plan: cap 10 members and 90 days of visible history; enforce on invite and on query

## Style
Slack-like: dark aubergine (#3F0E40) sidebar, white message pane, purple primary, compact dense rows, Inter font, green presence dots, bold unread channels. Responsive - sidebar collapses to a drawer on mobile.

## Seed & fallback
Seed 1 workspace, 5 channels, 2 DMs, 4 users and a realistic message backlog with a couple of threads and reactions. If a realtime provider key isn't available, fall back to short-interval polling so the app still updates live-ish.

You are building a production-quality team-chat app (a focused Slack clone). Work iteratively: scaffold, build the data + REST layer, then add realtime, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui
- PostgreSQL via Prisma; Supabase for auth (email + Google) and Realtime (or Pusher) for sockets
- Zod for validation; S3/R2 for file uploads

## Architecture requirements
- Multi-tenant by workspace: scope every query by workspace_id and verify membership on every read/write; private channels and DMs must never leak
- Realtime layer is for delivery only - persist every message to Postgres first, then broadcast; clients reconcile optimistic sends with the server copy
- Channel/DM access: a server-side guard resolves whether the caller is a member before subscribing or fetching history
- Message model handles channel messages, DMs and threads (parentId) in one table with proper indexes
- Pagination: cursor-based history (load older on scroll up); never load an entire channel at once

## Data model
users, workspaces, memberships(role), channels(isPrivate), channel_members, dms, dm_members, messages(channelId?, dmId?, parentId?), reactions, read_state(user, channel, last_read_at). Index messages(channelId, createdAt) and messages(parentId).

## Implementation order
1. Scaffold + Prisma schema + Supabase auth; create/join workspace flow with the three-column app shell
2. Channels: create public/private channels, join/leave, channel list with membership checks
3. Messaging (persisted): post/edit/delete messages, cursor-paginated history, composer with markdown
4. Realtime: subscribe per channel, broadcast new/edited/deleted messages, presence and typing indicators
5. Reactions, @mentions and @channel; unread badges via read_state and last_read_at
6. Threads: reply panel off any message; thread reply counts in the channel
7. DMs: 1:1 and group; search across messages (Postgres full-text)
8. Settings, notification prefs, member management, and plan limits (members + history window)

## Quality bar
- Optimistic message send with reconciliation; handle socket reconnects and missed-message backfill
- Strict authorization on every channel/DM subscription and history fetch
- Loading/error boundaries; virtualized message list for long histories
- Seed script: 1 workspace, 4 users, 5 channels, 2 DMs, ~80 messages with threads and reactions

Start with step 1. After each step, tell me exactly what to verify in the browser before moving on.

Design the complete UI for a Slack-style team-chat app called ChatNest. React + Tailwind, shadcn/ui components, lucide-react icons. Aesthetic: dark aubergine sidebar (#3F0E40), white message pane, a purple accent, compact dense rows, Inter font, green presence dots.

## Screens to generate

### 1. Main app shell (the hero screen) - three columns
- Far-left rail: workspace icon, plus a few workspace switch icons and a profile avatar at the bottom
- Left sidebar (aubergine): workspace name with a dropdown caret, a search box, collapsible sections - Channels (# names, unread ones bold with a count badge), Direct Messages (avatar + name + presence dot), and a 'Add channel' + button
- Center message pane: channel header (# name, topic, member count, call/info icons), a scrollable message list (avatar, bold name, timestamp, message body, hover toolbar with react/reply/more, emoji reaction chips under messages), and a bottom composer with formatting icons, an emoji button, attach and send
- Right panel (collapsible): tabbed Thread / Channel details / Member list

### 2. Thread panel
- Slide-in right panel showing the parent message at top and threaded replies below with their own composer

### 3. Search results
- Modal/overlay with a query bar, filter chips (In channel, From person, Date) and result rows showing the channel, author, snippet with the match highlighted

### 4. Settings & profile
- Profile editor (avatar, display name, status with emoji), notification preferences (all / mentions / nothing, DND schedule), and a member-management table with role pills

### 5. Pricing
- Three plan cards (Free, Pro, Business) with feature lists; the middle card highlighted

## Components to include
- A message row component with hover toolbar (emoji react, reply in thread, more menu) and a reaction-chip strip beneath
- A composer with formatting buttons, an emoji picker popover, attach, and send
- An @mention autocomplete dropdown that appears while typing a name
- A 'New messages' divider line in the message list and a jump-to-latest pill

## Responsive behavior
Make it responsive. On mobile, the left sidebar becomes a slide-over drawer reachable from a hamburger, the right panel becomes a full-screen overlay, and the composer sticks to the bottom above the keyboard.

Use realistic placeholder data - channel names (#general, #design, #random), people's names, message snippets, timestamps and reaction counts.

Build a team-chat app (Slack model, scoped to communities/teams) called ChatNest.

## Entities
- Workspace: name, plan (free/pro/business), owner (user reference), createdAt
- Membership: workspace reference, user reference, role (owner/admin/member/guest)
- Channel: workspace reference, name, isPrivate (boolean), topic, createdAt
- ChannelMember: channel reference, user reference
- Message: channel reference (optional), dm reference (optional), author (user), body, parent (message reference, for threads), editedAt, createdAt
- Reaction: message reference, user reference, emoji

## Roles & permissions
- Owner: manages the workspace, members and billing
- Admin: creates channels, moderates, removes members
- Member: joins channels, posts messages, sends DMs
- Guest: restricted to specific channels
- Private channels and DMs are visible only to their members

## Pages
1. Auth + create/join workspace
2. Main app: three-column layout - sidebar (channels, DMs, unread badges), center message pane with composer, right panel (members / channel info / thread)
3. Channel: real-time messages, emoji reactions, @mentions, edit/delete own messages
4. Direct messages: 1:1 and group private chats
5. Search: across messages and channels
6. Settings: profile (avatar, status), notification preferences, member management, billing tiers

## Rules
- Messages appear in real time for everyone in the channel when supported
- Access control: only members can read a private channel or DM; verify membership on every read and write
- @mention and @channel produce unread badges/notifications for recipients
- Users may edit or delete only their own messages; replies attach to a parent message as a thread
- Free plan: up to 10 members and 90 days of history; prompt to upgrade beyond that

## Look & feel
Slack-inspired: dark aubergine (#3F0E40) sidebar, white message pane, purple accent, compact rows, green presence dots, bold unread channels, clean sans-serif. Mobile responsive with the sidebar as a slide-over drawer.

Seed with 1 workspace, 5 channels, 2 DMs, 4 sample users and a realistic backlog of messages including a couple of threads and reactions so every view has content.