Initial commit: Obsidian Web Interface for Claude Code
- Full IDE with terminal integration using xterm.js - Session management with local and web sessions - HTML preview functionality - Multi-terminal support with session picker Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
uroma
253
docs/plans/2025-01-19-simplified-landing-design.md
Normal file
253
docs/plans/2025-01-19-simplified-landing-design.md
Normal file
@@ -0,0 +1,253 @@
|
||||
# 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
|
||||
|
||||
```
|
||||
<body>
|
||||
<div class="landing-container">
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<h1>Claude Code</h1>
|
||||
<p class="subtitle">Start coding</p>
|
||||
<input type="text" class="project-input" placeholder="What project are you working on?" />
|
||||
</section>
|
||||
|
||||
<!-- Projects Section -->
|
||||
<section class="projects">
|
||||
<table class="projects-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Project Name</th>
|
||||
<th>Last Activity</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Project rows -->
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
</body>
|
||||
```
|
||||
|
||||
### 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
|
||||
Reference in New Issue
Block a user