How to Clone Notion

Create a full-stack Notion-style workspace app called Stackpad using Next.js (App Router), TypeScript, Tailwind CSS, Prisma and SQLite (swappable to Postgres).

## What to build
A block-based docs + databases workspace: nested pages in a sidebar tree, a slash-command editor, and databases with table and kanban views. Single workspace per user for the MVP, with page-level public sharing.

## Key screens
- App layout: left sidebar (page tree with nesting, new page button, search trigger) + main editor pane
- Editor: title field + block list. '/' opens a command menu to insert: paragraph, h1, h2, h3, bulleted list, numbered list, todo (with checkbox), divider, image (URL input). Blocks are reorderable via drag handle (use dnd-kit)
- Database view: when a page is a database, render a toolbar (view switcher: Table | Board, add-column button, add-row button) and the active view. Board groups rows by the first select column with drag-between-columns
- Cmd+K search dialog querying page titles and block text
- Public page route /p/[token]: read-only render of a shared page
- Auth: email + password with NextAuth (credentials); each user gets a default workspace with a welcome page on signup

## Schema (Prisma)
User (id, name, email, passwordHash), Workspace (id, name, ownerId), Page (id, workspaceId, parentId?, title, iconEmoji?, isDatabase, publicToken?, deletedAt?, updatedAt), Block (id, pageId, type, content Json, order Float), Column (id, pageId, name, type, options Json, order Int), Row (id, pageId, values Json, order Float)

## Logic that must work
- Page tree: recursive fetch of pages by parentId, rendered as a collapsible tree; moving a page updates parentId
- Block ordering uses fractional indexing (order as float, insert between neighbors) so reorders are single-row updates
- Autosave: debounce block mutations 800ms client-side, persist via server actions, optimistic UI updates
- Soft delete: deletedAt set on page and descendants; trash page lists and restores them
- Todo blocks toggle a checked flag inside content JSON; select column options store {id, label, color}
- Public token pages bypass auth but render with editing disabled and no sidebar

## Keyboard & interaction details
- Enter at the end of a block creates a new paragraph block below; Backspace at the start of an empty block deletes it and focuses the previous one
- Cmd+K opens search, Esc closes any open menu, arrow keys navigate the slash-command menu with Enter to insert
- Checkbox click on a todo block toggles checked without entering edit mode
- Sidebar rows show hover-only '+' (add child page) and '...' (rename, delete, copy link) buttons

## Style
Notion-minimal: white canvas, #191919 text, #F7F7F5 sidebar, #2383E2 accent, Inter font, 720px max-width editor column, hover-only block handles, smooth 150ms transitions. Dark mode toggle stored in localStorage.

Seed with a demo user ([email protected] / password123) whose workspace contains: a 'Team Wiki' page with two sub-pages, a 'Projects' database with columns (Name text, Status select: Backlog/Doing/Done, Due date, Done checkbox) and 8 rows, and a 'Welcome' page using every block type so the editor is instantly demoable.

You are building a production-quality Notion clone called Stackpad. Work iteratively: scaffold, then implement feature by feature, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript strict, Tailwind CSS, shadcn/ui
- Tiptap (ProseMirror) for the block editor with custom extensions
- PostgreSQL via Prisma; Supabase for auth (email + Google OAuth) and file storage
- Yjs + Hocuspocus server for realtime collaboration (step 7 - do not start here)
- Zod for all input validation; dnd-kit for sidebar and board drag-and-drop

## Architecture requirements
- Route groups: (marketing), (app). The (app) layout owns the sidebar tree and is a server component; the editor is a client island
- Editor architecture: one Tiptap document per page. Custom extensions: SlashCommand (suggestion plugin), DragHandle, TodoItem, and a Database node that renders a React NodeView
- All mutations are server actions with Zod schemas; authorization checked per workspace membership on every action - never trust pageId from the client without verifying workspace ownership
- lib/blocks.ts defines the block content schema (discriminated union by type) shared between editor serialization and API validation; unit-test the (de)serializers
- Fractional indexing (lib/order.ts) for block, page and row ordering - test edge cases (insert at head, tail, between equal neighbors)

## Data model
workspaces, workspace_members (role enum), pages (parent_id self-relation, is_database, public_token unique nullable, deleted_at), blocks (content jsonb), database_columns (type enum, options jsonb), database_rows (values jsonb), page_permissions. Indexes: pages(workspace_id, parent_id), blocks(page_id, sort_order), GIN index on blocks(content) for search.

## Implementation order
1. Scaffold + Prisma schema + Supabase auth with middleware-protected (app) routes; signup creates workspace + welcome page
2. Sidebar page tree: recursive server fetch, optimistic create/rename/delete, drag-to-reparent with dnd-kit
3. Tiptap editor: paragraph, headings, lists, todo, divider, image upload to Supabase storage; slash menu; debounced autosave via server action diffing block lists
4. Databases: column CRUD with typed cells (text, number, select, date, checkbox, person), table view with inline editing, board view grouped by select column
5. Filters and sorts persisted per view in a views table; URL reflects active view
6. Search: Postgres tsvector over page titles + block text, Cmd+K dialog with debounced query and keyboard navigation
7. Realtime: Hocuspocus websocket server (separate process, deploy to Fly.io), Yjs binding for the editor, presence avatars; fall back to polling for database views
8. Sharing: public read-only token route with ISR, per-page guest invites, workspace member management UI

## Quality bar
- Editor must never lose data: autosave retries with exponential backoff and an unsaved-changes warning on navigation
- loading.tsx skeletons (sidebar tree + editor shimmer) and error.tsx boundaries on every async route
- Keyboard-first: Cmd+K search, Cmd+N new page, Enter/Backspace block semantics matching Notion (Enter splits block, Backspace at start merges)
- SEO on public pages: generateMetadata from page title + first text block, og:image from first image block
- Seed script: npx prisma db seed creates 2 users, 1 shared workspace, a wiki tree 3 levels deep, and 2 databases with 10+ rows each

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

Design the complete UI for a Notion-style workspace app called Stackpad. React + Tailwind, shadcn/ui components, lucide-react icons. Calm document aesthetic: white background, #191919 text, #F7F7F5 panels, #2383E2 accent, Inter font, hover-revealed controls everywhere.

## Screens to generate

### 1. App shell
- Left sidebar (260px, #F7F7F5): workspace switcher row (emoji avatar, name, chevron), Search and Settings rows with icons, 'Private' section header, then a nested page tree - each row has an expand chevron, emoji icon, title, and hover-only '+' and '...' buttons; active page row has a darker background
- Collapsible: a hover rail reveals a collapse button; collapsed state shows a thin strip with an expand affordance
- Bottom of sidebar: 'New page' button with plus icon and a subtle upgrade banner card ('Unlock unlimited members')

### 2. Page editor
- Breadcrumb row (parent / child / current) top-left, Share button, comment and star icons, '...' menu top-right
- Full-width cover image area with a 'Change cover' hover button, overlapping emoji icon (64px) above the title
- Title: 40px bold placeholder 'Untitled'; below it the block editor at 720px max width
- Render example blocks: heading 1, paragraph, bulleted list, a to-do list with two checked items, a divider, an image block with caption, and a callout block (gray background, emoji left)
- One block in hover state showing the left drag-handle (six dots) and '+' button; one open slash-command menu listing block types with icons and descriptions

### 3. Database page - table view
- Toolbar: view tabs (Table active, Board, List, + Add view), then right-aligned Filter, Sort, Search icon and a blue 'New' button
- Table: column headers with type icons (Aa text, # number, tag select, calendar date, checkbox), rows with colored select tags (green 'Done', yellow 'Doing', gray 'Backlog'), avatars in a Person column, checkbox column, hover row highlight, '+ New' ghost row at bottom
- One open cell editor popover: a select cell showing tag options with colored dots and a 'Create' option

### 4. Database page - board view
- Three columns (Backlog, Doing, Done) with colored dot headers and counts, cards with title + due-date chip + assignee avatar, '+ New' button per column, one card mid-drag with rotation and shadow

### 5. Search modal (Cmd+K)
- Centered dialog: large input with search icon, 'Recent' section label, result rows (emoji, title, breadcrumb path, timestamp), keyboard hint footer (arrows to navigate, enter to open)

### 6. Share popover
- Tabs: Share / Publish. Share tab: email input + Invite button, member rows with access dropdowns (Full access / Can edit / Can view). Publish tab: toggle, copyable public URL field, 'Anyone with the link can view' caption

### 7. Settings page
- Two-pane modal: left nav (Account, Workspace, Members, Plans), right content showing the Members pane - search input, member table rows (avatar, name, email, role dropdown, remove icon) and an 'Invite members' button top-right
- Plans pane variant: Free and Pro cards side by side, Pro with a blue border and 'Upgrade' button, feature checklist rows with check icons

Make every screen fully responsive. On mobile: sidebar becomes a slide-over drawer with a hamburger trigger, the table view scrolls horizontally with a sticky first column, and the board view becomes horizontally snap-scrolling columns. Use realistic placeholder content - a product team workspace with pages like 'Q3 Roadmap', 'Design System', 'Hiring Pipeline'.

Build an all-in-one docs + databases workspace app (Notion model) called Stackpad.

## Entities
- Workspace: name, iconEmoji, plan (free/pro), owner (user reference)
- Membership: workspace reference, user, role (admin/member)
- Page: workspace reference, parentPage (self reference, nullable), title, iconEmoji, isDatabase (boolean), isPublic (boolean), publicToken, deletedAt (nullable), createdBy, updatedAt
- Block: page reference, type (paragraph/heading1/heading2/heading3/bulletList/numberList/todo/divider/image/callout), content (json: text, checked, imageUrl, emoji), sortOrder (number)
- DatabaseColumn: page reference, name, type (text/number/select/date/checkbox/person), options (json list of {label, color}), sortOrder
- DatabaseRow: page reference, values (json keyed by column id), sortOrder

## Roles & permissions
- Users only see workspaces they belong to; all queries scoped by membership
- Members can create, edit and delete pages and database rows in their workspace
- Admins can additionally invite/remove members, rename the workspace and manage the plan
- Public pages: anyone with the publicToken link can view (never edit) that single page
- Free plan limit: maximum 3 members per workspace - block the 4th invite with an upgrade message

## Pages
1. Workspace home: sidebar with nested page tree (expand/collapse, new page, drag to reorder), main pane shows the selected page
2. Page editor: title + emoji picker, block list with an insert menu ('/' or a + button) for all block types, checkbox toggling on todo blocks, autosave on edit
3. Database page: table view with typed columns and inline cell editing; board view grouping rows by the first select column with drag between groups; add column and add row buttons
4. Search: modal searching page titles and block text across the workspace, recent pages listed by default
5. Trash: soft-deleted pages with restore and delete-forever actions
6. Workspace settings: name/icon editing, members table with role dropdown and remove button, invite-by-email form, plan card with upgrade button
7. Public page view: clean read-only render at /p/{publicToken} with no sidebar

## Rules
- Deleting a page also soft-deletes all of its descendant pages; restoring restores the subtree
- A page cannot be moved into one of its own descendants (prevent tree cycles)
- Select column options keep their color when rows reference them; deleting an option clears it from rows
- Todo blocks store checked state; checked items render with strikethrough
- Every edit updates the page's updatedAt and shows a 'Saved' indicator

## Look & feel
Notion-inspired minimalism: white background, #191919 text, light-gray (#F7F7F5) sidebar, blue (#2383E2) accent, Inter font, emoji page icons, hover-revealed controls, 720px-wide editor column. Mobile responsive with a drawer sidebar.

Seed with a demo workspace containing a 'Team Wiki' page with 2 sub-pages, a 'Project Tracker' database (Status select column with Backlog/Doing/Done, Due date, Owner person) holding 8 rows, and a 'Getting Started' page that uses every block type so all features are visible immediately.