admin/SuperCharged-Claude-Code-Upgrade
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d774621200680946d987bdee0758c12a49e2e230
SuperCharged-Claude-Code-Up…/docs/plans/2025-01-19-simplified-landing-design.md
uroma 0dd2083556 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>
2026-01-19 16:29:44 +00:00

7.3 KiB
Raw Blame History

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:

{
  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 View Git Blame Copy Permalink