# Simplified Landing Page Design **Date:** 2025-01-19 **Status:** Approved **Author:** Claude (with user collaboration) ## Overview Create a Google-simple landing page that provides immediate access to create new projects or continue existing ones. The design philosophy is **speed and simplicity** - minimize friction for developers who want to get from idea → code as quickly as possible. ## Visual Layout ### Hero Section (Top Half) **Centered Input Field** - Large, prominent input (600px wide) - Font size: 18-20px - Placeholder: "What project are you working on?" - Subtle border with blue glow on focus - Auto-complete suggests existing project names - Press Enter → creates session immediately **Page Header** - Title: "Claude Code" - Subtitle: "Start coding" - Minimal, clean branding **No Templates** - Templates removed from this view - Users can type "React todo app" or similar in the input - Keeps the page ultra-clean and focused ### Projects List (Bottom Half) **Table Layout:** ``` | Project Name | Last Activity | Status | Actions | |--------------------|---------------|----------|----------------| | My React App | 2 hours ago | Active | [Continue] [⋮]| | API Server | 3 days ago | Done | [Continue] [⋮]| | Portfolio Website | 1 week ago | Archived | [Continue] [⋮]| ``` **Columns:** 1. **Project Name**: Session's `metadata.project` or fallback 2. **Last Activity**: Relative time (2 hours ago, 3 days ago) 3. **Status**: Badge showing "Active", "Done", or "Archived" 4. **Actions**: "Continue" button + ⋮ menu **Interactions:** - Click "Continue" button → go to IDE - Click ⋮ menu → Rename, Duplicate, Delete options - Click anywhere on row → also continues to IDE - Full row is clickable for speed **Empty State:** - Text: "No projects yet. Type above to create your first one." ## Visual Design **Color Scheme:** - Dark theme matching existing app - Background: #0d0d0d or similar - Table borders: subtle (#333) - Row hover: slightly lighter (#1a1a1a) **Typography:** - Project names: Bold, 16px - Last activity: 14px, gray - Status badges: 12px, rounded **Status Badge Colors:** - Active: Green (#51cf66) - Done: Gray (#888) - Archived: Orange (#ffa94d) **Buttons:** - Continue: Gradient (blue #4a9eff → purple #a78bfa) - Menu (⋮): Gray, circular, minimal **Responsive Design:** - Desktop (>768px): Full table - Tablet (≤768px): Columns collapse, simpler layout - Mobile (≤480px): Cards instead of table ## User Flow ### Create New Project 1. User types project name in input field 2. User presses Enter (or clicks Start button) 3. Show "Creating..." overlay (300-800ms minimum) 4. Redirect to `/claude/ide?session={new-id}` 5. User can immediately chat with Claude ### Continue Existing Project 1. User clicks Continue button or project row 2. Show "Opening..." overlay (300-800ms minimum) 3. Redirect to `/claude/ide?session={existing-id}` 4. User resumes where they left off ### Quick Actions (⋮ Menu) - **Rename**: Inline edit the project name - **Duplicate**: Create copy of session - **Delete**: Remove session with confirmation ## Technical Implementation ### Page Structure ```

Claude Code

Start coding

Project Name Last Activity Status Actions
``` ### Data Requirements **API Endpoints:** - `GET /claude/api/claude/sessions` - List all sessions (already exists) - `POST /claude/api/claude/sessions` - Create new session (already exists) - `PATCH /claude/api/claude/sessions/:id` - Update metadata (already exists) - `POST /claude/api/claude/sessions/:id/duplicate` - Duplicate (already exists) - `DELETE /claude/api/claude/sessions/:id` - Delete (already exists) **Session Object Structure:** ```javascript { id: "session-xxx", metadata: { project: "My Project Name", type: "chat", source: "web-ide" }, lastActivity: "2025-01-19T10:30:00Z", status: "running" | "terminated", createdAt: "2025-01-19T09:00:00Z" } ``` ### Behavior Requirements **Input Field:** - Focus on page load - Create on Enter key - Auto-complete with existing project names - Validation: No invalid characters (`/ \ < > : " | ? *`) - Max length: 50 characters **Projects Table:** - Sort by last activity (newest first) - Show all sessions (active and historical) - Status derived from `session.status` - Relative time calculated from `lastActivity` or `createdAt` **Loading States:** - Overlay with spinner - Messages: "Creating project..." or "Opening workspace..." - Minimum 300ms display for perceived smoothness **Error Handling:** - Network failures: Show toast error - Validation errors: Show inline message - Empty project name: Disable Start button ## Success Criteria 1. ✅ Users can create a project in one action (type name + Enter) 2. ✅ Users can continue a project in one click 3. ✅ Navigation to IDE takes < 1 second perceived time 4. ✅ Page is visually clean and minimal (Google-like) 5. ✅ All existing functionality preserved (rename, duplicate, delete) 6. ✅ Mobile-responsive design ## Files to Modify 1. **HTML**: `/public/claude-landing.html` - Replace current layout with new hero + table structure 2. **CSS**: `/public/claude-ide/sessions-landing.css` - Add hero section styles - Add table/grid layout styles - Remove old card-based styles 3. **JavaScript**: `/public/claude-ide/sessions-landing.js` - Simplify to render table instead of cards - Add input focus handler - Keep existing API calls and logic ## Implementation Notes **YAGNI Principle:** - Remove template cards (React, Node.js, etc.) - not needed - Remove "Create New Project" vs "Load Existing Project" separation - Single input field = simpler UX - Table view = cleaner than cards **Performance:** - Minimal DOM manipulation - Table rows render quickly - No complex animations - Fast page load **Accessibility:** - Keyboard navigation (Tab through table, Enter to continue) - ARIA labels on buttons - Focus indicators visible - Screen reader friendly ## Migration from Current Design **What's Removed:** - Template quick-start cards - "Create New Project" section with cards - "Load Existing Project" section header - Divider ("or") - SessionCard component (replaced by table rows) **What's Kept:** - All API endpoints - All session data - Rename, duplicate, delete functionality - Loading overlays - Toast notifications - Input validation logic **What's Simplified:** - Single create flow (just type and go) - Unified projects list (no active/historical separation needed visually) - Cleaner visual hierarchy