a0fd70418f
Bug fixes: - Add missing showLoadingOverlay/hideLoadingOverlay functions to ide.js (previously only existed in sessions-landing.js, causing continueSessionInChat to fail) - Add loading overlay CSS styles to main style.css - Fix Projects button URL: /projects -> /claude/ide?view=projects - Add ?view= URL parameter handling in ide.js initialization - Add missing Native mode button to chat view (now has 3 modes: Chat, Native, Terminal) These fixes resolve: 1. "Continue in Chat" button not working in sessions view 2. Projects button in landing page nav taking to wrong URL 3. Missing "Native" mode button (user referred to as "Full Stack mode") 4. Loading overlay not displaying in IDE Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
177 lines
5.2 KiB
HTML
177 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Claude Code</title>
|
|
<link rel="stylesheet" href="/claude/css/style.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/sessions-landing.css">
|
|
<style>
|
|
/* Navigation Header Styles */
|
|
.nav-header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(13, 13, 13, 0.95);
|
|
backdrop-filter: blur(10px);
|
|
border-bottom: 1px solid #333;
|
|
padding: 16px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.nav-logo {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #4a9eff 0%, #a78bfa 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.nav-link {
|
|
padding: 8px 16px;
|
|
background: transparent;
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
color: #e0e0e0;
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
background: #252525;
|
|
border-color: #4a9eff;
|
|
color: #4a9eff;
|
|
}
|
|
|
|
.nav-link.active {
|
|
background: rgba(74, 158, 255, 0.15);
|
|
border-color: #4a9eff;
|
|
color: #4a9eff;
|
|
}
|
|
|
|
.nav-logout {
|
|
padding: 8px 16px;
|
|
background: transparent;
|
|
border: none;
|
|
color: #888;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.nav-logout:hover {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
/* Adjust hero section for fixed header */
|
|
.hero-section {
|
|
padding-top: 100px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-header {
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.nav-logo {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.nav-link {
|
|
padding: 6px 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.hero-section {
|
|
padding-top: 80px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="sessions-page">
|
|
<!-- Navigation Header -->
|
|
<nav class="nav-header">
|
|
<div class="nav-logo">Claude Code</div>
|
|
<div class="nav-links">
|
|
<a href="/claude/" class="nav-link active">Sessions</a>
|
|
<a href="/claude/ide?view=projects" class="nav-link">Projects</a>
|
|
<button class="nav-logout" onclick="logout()">Logout</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="hero-section">
|
|
<h1 class="hero-title">Claude Code</h1>
|
|
<p class="hero-subtitle">Start coding</p>
|
|
<input
|
|
type="text"
|
|
id="project-input"
|
|
class="project-input"
|
|
placeholder="What project are you working on?"
|
|
maxlength="50"
|
|
autocomplete="off"
|
|
/>
|
|
<div id="input-status" class="input-status"></div>
|
|
</section>
|
|
|
|
<!-- Projects Section -->
|
|
<section class="projects-section">
|
|
<div class="projects-header">
|
|
<h2 class="projects-title">Projects</h2>
|
|
<button class="btn-refresh" onclick="refreshSessions()">
|
|
<span>🔄</span> Refresh
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div id="projects-empty" class="projects-empty" style="display: none;">
|
|
No projects yet. Type above to create your first one.
|
|
</div>
|
|
|
|
<!-- Projects Table -->
|
|
<div class="projects-table-wrapper">
|
|
<table id="projects-table" class="projects-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-name">Project Name</th>
|
|
<th class="col-activity">Last Activity</th>
|
|
<th class="col-status">Status</th>
|
|
<th class="col-actions">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="projects-tbody">
|
|
<!-- Rows rendered dynamically -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<script src="/claude/js/app.js"></script>
|
|
<script src="/claude/claude-ide/sessions-landing.js"></script>
|
|
<script>
|
|
async function logout() {
|
|
try {
|
|
await fetch('/claude/api/logout', { method: 'POST' });
|
|
window.location.href = '/claude/';
|
|
} catch (error) {
|
|
console.error('Logout failed:', error);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|