# Bookwiz.io - Prototype Version

## Overview
A simple prototype to test the core UI concept of Bookwiz.io - a 3-column writing interface similar to code editors. This version focuses only on the layout and basic interaction patterns without any backend functionality.

## Features
- Clean 3-column layout (File Explorer | Editor | Chat)
- Mock file tree with sample structure
- Basic text editor (textarea or simple Monaco setup)
- Static chat interface mockup
- Responsive design
- No authentication, database, or AI integration

## Tech Stack
- Next.js 14 (App Router)
- Tailwind CSS
- React
- TypeScript (optional)

## Quick Start

### Prerequisites
- Node.js 18+ 
- npm or yarn

### Installation
```bash
# Create Next.js project
npx create-next-app@latest bookwiz-prototype --typescript --tailwind --eslint --app

# Navigate to project
cd bookwiz-prototype

# Install additional dependencies (if using Monaco)
npm install @monaco-editor/react

# Start development server
npm run dev
```

## Project Structure
```
bookwiz-prototype/
├── app/
│   ├── globals.css
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   ├── FileExplorer.tsx
│   ├── Editor.tsx
│   ├── ChatPanel.tsx
│   └── Layout.tsx
└── lib/
    └── mockData.ts
```

## Implementation Checklist

### Phase 1: Basic Setup
- [ ] Create Next.js project with Tailwind CSS
- [ ] Set up TypeScript (optional)
- [ ] Create basic folder structure
- [ ] Set up globals.css with base styles

### Phase 2: Layout Implementation
- [ ] Create main 3-column layout component
- [ ] Implement responsive grid/flexbox layout
- [ ] Add column resizing (optional)
- [ ] Test on different screen sizes

### Phase 3: File Explorer
- [ ] Create mock file tree data structure
- [ ] Build file explorer component
- [ ] Add file/folder icons
- [ ] Implement expand/collapse for folders
- [ ] Add file selection highlighting

### Phase 4: Editor
- [ ] Create basic text editor component (textarea)
- [ ] OR integrate Monaco Editor
- [ ] Add basic styling and focus states
- [ ] Show selected file name in editor
- [ ] Add word count display

### Phase 5: Chat Panel
- [ ] Create static chat interface
- [ ] Add mock messages for demonstration
- [ ] Style chat bubbles (user vs AI)
- [ ] Add input field (non-functional)
- [ ] Add model selector dropdown (static)

### Phase 6: Polish
- [ ] Add hover states and transitions
- [ ] Implement dark theme (optional)
- [ ] Add loading states
- [ ] Test user interactions
- [ ] Mobile responsiveness

## Component Examples

### Main Layout Structure
```tsx
export default function Layout() {
  return (
    <div className="h-screen flex">
      {/* File Explorer */}
      <div className="w-64 bg-gray-100 border-r">
        <FileExplorer />
      </div>
      
      {/* Editor */}
      <div className="flex-1 flex flex-col">
        <div className="h-12 bg-white border-b flex items-center px-4">
          <span className="text-sm text-gray-600">chapter-1</span>
        </div>
        <div className="flex-1">
          <Editor />
        </div>
      </div>
      
      {/* Chat Panel */}
      <div className="w-80 bg-gray-50 border-l">
        <ChatPanel />
      </div>
    </div>
  );
}
```

### Mock Data Structure
```tsx
// lib/mockData.ts
export const mockProject = {
  name: "My Novel",
  files: [
    {
      id: 1,
      name: "outline",
      type: "file",
      content: "# Story Outline\n\n## Chapter 1\n- Introduction of main character\n- Setting the scene\n\n## Chapter 2\n- First conflict..."
    },
    {
      id: 2,
      name: "chapters",
      type: "folder",
      expanded: true,
      children: [
        {
          id: 3,
          name: "chapter-1",
          type: "file",
          content: "# Chapter 1: The Beginning\n\nIt was a dark and stormy night..."
        },
        {
          id: 4,
          name: "chapter-2",
          type: "file",
          content: "# Chapter 2: The Plot Thickens\n\nThe next morning brought new challenges..."
        }
      ]
    },
    {
      id: 5,
      name: "characters",
      type: "folder",
      children: [
        {
          id: 6,
          name: "protagonist",
          type: "file",
          content: "# Main Character\n\n**Name:** Sarah Chen\n**Age:** 28\n**Background:** Software engineer..."
        }
      ]
    }
  ]
};

export const mockMessages = [
  {
    id: 1,
    type: "user",
    content: "Help me improve the dialogue in chapter 1"
  },
  {
    id: 2,
    type: "ai",
    content: "I'd be happy to help improve the dialogue! Here are some suggestions for making it more natural and engaging..."
  }
];
```


## Notes
- This is a static prototype for concept validation
- No backend functionality required
- Focus on UI/UX and user workflow
- Keep it simple and fast to implement
- Prioritize getting feedback quickly