Fix folder explorer error reporting and add logging
- Show actual server error message when project creation fails - Add console logging to debug project creation Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
uroma
1201
public/claude-ide/components/folder-explorer-modal.js
Normal file
1201
public/claude-ide/components/folder-explorer-modal.js
Normal file
File diff suppressed because it is too large
Load Diff
663
public/claude-ide/components/session-picker-modal.js
Normal file
663
public/claude-ide/components/session-picker-modal.js
Normal file
@@ -0,0 +1,663 @@
|
||||
/**
|
||||
* Session Picker Modal
|
||||
* Shows when user clicks a project - allows resuming or creating sessions
|
||||
* Following CodeNomad's design pattern
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
let currentModal = null;
|
||||
let currentProject = null;
|
||||
|
||||
/**
|
||||
* Show session picker modal for a project
|
||||
* @param {Object} project - Project object
|
||||
*/
|
||||
async function showSessionPicker(project) {
|
||||
// Close existing modal if open
|
||||
closeSessionPicker();
|
||||
|
||||
currentProject = project;
|
||||
|
||||
// Create modal overlay
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'modal-overlay';
|
||||
overlay.id = 'session-picker-overlay';
|
||||
|
||||
// Create modal content
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'session-picker-modal';
|
||||
modal.id = 'session-picker-modal';
|
||||
|
||||
modal.innerHTML = `
|
||||
<div class="session-picker-header">
|
||||
<h2 class="session-picker-title">Claude Code • ${escapeHtml(project.name)}</h2>
|
||||
<button class="session-picker-close" onclick="window.SessionPicker.close()">×</button>
|
||||
</div>
|
||||
|
||||
<div class="session-picker-content" id="session-picker-content">
|
||||
<div class="session-picker-loading">Loading sessions...</div>
|
||||
</div>
|
||||
|
||||
<div class="session-picker-footer">
|
||||
<button class="btn-secondary" onclick="window.SessionPicker.close()">Cancel</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
overlay.appendChild(modal);
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
// Prevent body scroll
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
// Trigger animation
|
||||
setTimeout(() => {
|
||||
overlay.classList.add('visible');
|
||||
modal.classList.add('visible');
|
||||
}, 10);
|
||||
|
||||
// Load sessions
|
||||
await loadSessionsForProject(project.id);
|
||||
|
||||
// Close on overlay click
|
||||
overlay.addEventListener('click', (e) => {
|
||||
if (e.target === overlay) {
|
||||
closeSessionPicker();
|
||||
}
|
||||
});
|
||||
|
||||
// Close on Escape key
|
||||
const escapeHandler = (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
closeSessionPicker();
|
||||
document.removeEventListener('keydown', escapeHandler);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', escapeHandler);
|
||||
|
||||
currentModal = { overlay, escapeHandler };
|
||||
}
|
||||
|
||||
/**
|
||||
* Load sessions for a project
|
||||
*/
|
||||
async function loadSessionsForProject(projectId) {
|
||||
const content = document.getElementById('session-picker-content');
|
||||
|
||||
try {
|
||||
console.log('[SessionPicker] Loading sessions for project:', projectId);
|
||||
const res = await fetch(`/api/projects/${projectId}/sessions`, {
|
||||
credentials: 'same-origin'
|
||||
});
|
||||
|
||||
console.log('[SessionPicker] Response status:', res.status);
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`Failed to load sessions (HTTP ${res.status})`);
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
console.log('[SessionPicker] Response data:', data);
|
||||
|
||||
if (data.sessions && data.sessions.length > 0) {
|
||||
renderSessionList(data.sessions);
|
||||
} else {
|
||||
renderEmptyState();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[SessionPicker] Error loading sessions:', error);
|
||||
console.error('[SessionPicker] Error details:', {
|
||||
message: error.message,
|
||||
stack: error.stack,
|
||||
projectId: projectId
|
||||
});
|
||||
content.innerHTML = `
|
||||
<div class="session-picker-error">
|
||||
Failed to load sessions. Please try again.
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render list of sessions
|
||||
*/
|
||||
function renderSessionList(sessions) {
|
||||
const content = document.getElementById('session-picker-content');
|
||||
|
||||
const sessionsHtml = sessions.map(session => {
|
||||
const title = session.title || session.metadata?.project || 'Untitled Session';
|
||||
const relativeTime = getRelativeTime(session.updatedAt || session.created_at || session.lastActivity);
|
||||
const agent = session.agent || session.metadata?.agent || 'claude';
|
||||
|
||||
return `
|
||||
<button
|
||||
class="session-item"
|
||||
onclick="window.SessionPicker.resumeSession('${session.id}')"
|
||||
>
|
||||
<div class="session-item-content">
|
||||
<span class="session-item-title">${escapeHtml(title)}</span>
|
||||
<span class="session-item-meta">
|
||||
<span class="session-agent">${escapeHtml(agent)}</span>
|
||||
<span class="session-time">${relativeTime}</span>
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
content.innerHTML = `
|
||||
<div class="session-section">
|
||||
<h3 class="session-section-title">
|
||||
Resume a session (${sessions.length}):
|
||||
</h3>
|
||||
<div class="session-list">
|
||||
${sessionsHtml}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="session-divider">
|
||||
<span class="session-divider-text">or</span>
|
||||
</div>
|
||||
|
||||
<div class="session-section">
|
||||
<h3 class="session-section-title">Start new session:</h3>
|
||||
<div class="new-session-form">
|
||||
<button
|
||||
class="btn-primary"
|
||||
onclick="window.SessionPicker.createNewSession()"
|
||||
>
|
||||
<span class="btn-icon">+</span>
|
||||
Create Session
|
||||
<kbd class="kbd">⌘↵</kbd>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render empty state (no existing sessions)
|
||||
*/
|
||||
function renderEmptyState() {
|
||||
const content = document.getElementById('session-picker-content');
|
||||
|
||||
content.innerHTML = `
|
||||
<div class="session-empty-state">
|
||||
<div class="empty-state-icon">💬</div>
|
||||
<h3 class="empty-state-title">No previous sessions</h3>
|
||||
<p class="empty-state-subtitle">Start a new conversation in this project</p>
|
||||
</div>
|
||||
|
||||
<div class="session-divider">
|
||||
<span class="session-divider-text">or</span>
|
||||
</div>
|
||||
|
||||
<div class="session-section">
|
||||
<h3 class="session-section-title">Start new session:</h3>
|
||||
<div class="new-session-form">
|
||||
<button
|
||||
class="btn-primary"
|
||||
onclick="window.SessionPicker.createNewSession()"
|
||||
>
|
||||
<span class="btn-icon">+</span>
|
||||
Create Session
|
||||
<kbd class="kbd">⌘↵</kbd>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resume an existing session
|
||||
*/
|
||||
async function resumeSession(sessionId) {
|
||||
if (!currentProject) return;
|
||||
|
||||
try {
|
||||
showLoadingOverlay('Opening workspace...');
|
||||
|
||||
// Navigate to IDE with session
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
window.location.href = `/claude/ide?session=${sessionId}`;
|
||||
} catch (error) {
|
||||
console.error('Error resuming session:', error);
|
||||
hideLoadingOverlay();
|
||||
showToast('Failed to open session', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new session in the project
|
||||
*/
|
||||
async function createNewSession() {
|
||||
if (!currentProject) return;
|
||||
|
||||
try {
|
||||
showLoadingOverlay('Creating session...');
|
||||
|
||||
const res = await fetch(`/api/projects/${currentProject.id}/sessions`, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
metadata: {
|
||||
type: 'chat',
|
||||
source: 'web-ide',
|
||||
project: currentProject.name
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error('Failed to create session');
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (data.success && data.session) {
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
window.location.href = `/claude/ide?session=${data.session.id}`;
|
||||
} else {
|
||||
throw new Error(data.error || 'Failed to create session');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating session:', error);
|
||||
hideLoadingOverlay();
|
||||
showToast('Failed to create session', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the modal
|
||||
*/
|
||||
function closeSessionPicker() {
|
||||
const overlay = document.getElementById('session-picker-overlay');
|
||||
if (!overlay) return;
|
||||
|
||||
overlay.classList.remove('visible');
|
||||
|
||||
const modal = document.getElementById('session-picker-modal');
|
||||
if (modal) modal.classList.remove('visible');
|
||||
|
||||
setTimeout(() => {
|
||||
if (currentModal && currentModal.escapeHandler) {
|
||||
document.removeEventListener('keydown', currentModal.escapeHandler);
|
||||
}
|
||||
overlay.remove();
|
||||
document.body.style.overflow = '';
|
||||
currentModal = null;
|
||||
currentProject = null;
|
||||
}, 300);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get relative time string
|
||||
*/
|
||||
function getRelativeTime(timestamp) {
|
||||
const date = new Date(timestamp);
|
||||
const now = new Date();
|
||||
const diffMins = Math.floor((now - date) / 60000);
|
||||
const diffHours = Math.floor((now - date) / 3600000);
|
||||
const diffDays = Math.floor((now - date) / 86400000);
|
||||
|
||||
if (diffMins < 1) return 'just now';
|
||||
if (diffMins < 60) return `${diffMins}m ago`;
|
||||
if (diffHours < 24) return `${diffHours}h ago`;
|
||||
if (diffDays < 7) return `${diffDays}d ago`;
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape HTML to prevent XSS
|
||||
*/
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Export to global scope
|
||||
window.SessionPicker = {
|
||||
show: showSessionPicker,
|
||||
close: closeSessionPicker,
|
||||
resumeSession,
|
||||
createNewSession
|
||||
};
|
||||
|
||||
// Add CSS styles
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
/* Modal Overlay */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-overlay.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Session Picker Modal */
|
||||
.session-picker-modal {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
max-height: 80vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: scale(0.95);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.session-picker-modal.visible {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.session-picker-header {
|
||||
padding: 24px;
|
||||
border-bottom: 1px solid #333;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.session-picker-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.session-picker-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.session-picker-close:hover {
|
||||
background: #252525;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
.session-picker-content {
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Session Section */
|
||||
.session-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.session-section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
/* Session List */
|
||||
.session-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.session-item {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 16px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.session-item:hover {
|
||||
background: #252525;
|
||||
border-color: #4a9eff;
|
||||
}
|
||||
|
||||
.session-item-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.session-item-title {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #e0e0e0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.session-item-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.session-agent {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
background: #252525;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.session-time {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* Divider */
|
||||
.session-divider {
|
||||
position: relative;
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.session-divider::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.session-divider-text {
|
||||
position: relative;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
background: #1a1a1a;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
/* New Session Form */
|
||||
.new-session-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
padding: 14px 20px;
|
||||
background: linear-gradient(135deg, #4a9eff 0%, #a78bfa 100%);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(74, 158, 255, 0.4);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
padding: 12px 24px;
|
||||
background: transparent;
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
color: #e0e0e0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #252525;
|
||||
border-color: #4a9eff;
|
||||
}
|
||||
|
||||
/* Keyboard Hint */
|
||||
.kbd {
|
||||
background: #252525;
|
||||
border: 1px solid #444;
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
color: #888;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.session-empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-state-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.empty-state-subtitle {
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Loading State */
|
||||
.session-picker-loading {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* Error State */
|
||||
.session-picker-error {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.session-picker-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #333;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.session-picker-modal {
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
.session-picker-header,
|
||||
.session-picker-content,
|
||||
.session-picker-footer {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.session-item {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.session-item-content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.session-item-meta {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
document.head.appendChild(style);
|
||||
|
||||
console.log('[SessionPicker] Module loaded');
|
||||
})();
|
||||
419
public/claude-ide/projects-landing.css
Normal file
419
public/claude-ide/projects-landing.css
Normal file
@@ -0,0 +1,419 @@
|
||||
/**
|
||||
* Projects Landing Page - CodeNomad Style
|
||||
* Clean, centered hero + project cards grid
|
||||
*/
|
||||
|
||||
body.sessions-page {
|
||||
background: #0d0d0d;
|
||||
min-height: 100vh;
|
||||
padding-top: 70px; /* Space for fixed nav */
|
||||
}
|
||||
|
||||
/* === Hero Section (CodeNomad style) === */
|
||||
.hero-section {
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120px 20px 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-logo {
|
||||
font-size: 64px;
|
||||
font-weight: 700;
|
||||
margin: 0 0 24px 0;
|
||||
background: linear-gradient(135deg, #4a9eff 0%, #a78bfa 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 18px;
|
||||
color: #888;
|
||||
margin: 0 0 48px 0;
|
||||
}
|
||||
|
||||
.btn-select-folder {
|
||||
padding: 16px 32px;
|
||||
background: linear-gradient(135deg, #4a9eff 0%, #a78bfa 100%);
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
box-shadow: 0 4px 20px rgba(74, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-select-folder:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 30px rgba(74, 158, 255, 0.5);
|
||||
}
|
||||
|
||||
.btn-select-folder:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn-select-folder .icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.keyboard-hint {
|
||||
margin-top: 24px;
|
||||
font-size: 14px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.keyboard-hint kbd {
|
||||
background: #252525;
|
||||
border: 1px solid #444;
|
||||
border-radius: 6px;
|
||||
padding: 4px 10px;
|
||||
font-family: monospace;
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
.example-hint {
|
||||
margin-top: 16px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* === Projects Section === */
|
||||
.projects-section {
|
||||
padding: 60px 20px 80px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.projects-section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.projects-section-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* === Projects Grid === */
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* === Project Card === */
|
||||
.project-card {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
background: #222;
|
||||
border-color: #4a9eff;
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.project-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.project-icon {
|
||||
font-size: 40px;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.project-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.project-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
margin: 0 0 4px 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.project-path {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
font-family: monospace;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.meta-item .icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.session-count {
|
||||
background: #252525;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.last-activity {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.project-sources {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.source-badge {
|
||||
font-size: 11px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.source-badge.cli {
|
||||
background: rgba(74, 158, 255, 0.15);
|
||||
color: #4a9eff;
|
||||
}
|
||||
|
||||
.source-badge.web {
|
||||
background: rgba(167, 139, 250, 0.15);
|
||||
color: #a78bfa;
|
||||
}
|
||||
|
||||
.source-badge.both {
|
||||
background: rgba(81, 207, 102, 0.15);
|
||||
color: #51cf66;
|
||||
}
|
||||
|
||||
/* === Empty States === */
|
||||
.projects-empty {
|
||||
text-align: center;
|
||||
padding: 80px 40px;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 24px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.empty-subtitle {
|
||||
font-size: 16px;
|
||||
color: #888;
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
|
||||
/* === Loading State === */
|
||||
.projects-loading {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid #333;
|
||||
border-top-color: #4a9eff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* === Error State === */
|
||||
.projects-error {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
/* === Responsive === */
|
||||
@media (max-width: 768px) {
|
||||
.hero-logo {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.projects-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.projects-section-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.btn-select-folder {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-section {
|
||||
padding: 100px 16px 60px;
|
||||
}
|
||||
|
||||
.project-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* === Navigation (keep existing) === */
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
443
public/claude-ide/projects-landing.js
Normal file
443
public/claude-ide/projects-landing.js
Normal file
@@ -0,0 +1,443 @@
|
||||
/**
|
||||
* Projects Landing Page JavaScript
|
||||
* CodeNomad-style: Shows projects, clicking opens session picker
|
||||
*/
|
||||
|
||||
// State
|
||||
let projects = [];
|
||||
let isLoading = false;
|
||||
|
||||
// Load on page load
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
checkAuth();
|
||||
initializeHero();
|
||||
loadProjects();
|
||||
initializeKeyboardShortcuts();
|
||||
});
|
||||
|
||||
// Check authentication
|
||||
async function checkAuth() {
|
||||
try {
|
||||
const res = await fetch('/claude/api/auth/status');
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error('Request failed');
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (!data.authenticated) {
|
||||
window.location.href = '/claude/login.html';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Auth check failed:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize hero section
|
||||
*/
|
||||
function initializeHero() {
|
||||
const selectFolderBtn = document.getElementById('select-folder-btn');
|
||||
if (selectFolderBtn) {
|
||||
selectFolderBtn.addEventListener('click', async () => {
|
||||
await showFolderExplorer();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show folder explorer modal
|
||||
*/
|
||||
async function showFolderExplorer() {
|
||||
try {
|
||||
// Load the folder explorer modal if not already loaded
|
||||
if (!window.FolderExplorer) {
|
||||
await loadScript('/claude/claude-ide/components/folder-explorer-modal.js');
|
||||
}
|
||||
|
||||
// Show folder explorer
|
||||
if (window.FolderExplorer) {
|
||||
window.FolderExplorer.show();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error showing folder explorer:', error);
|
||||
showToast('Failed to open folder explorer', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load all projects from server
|
||||
*/
|
||||
async function loadProjects() {
|
||||
const grid = document.getElementById('projects-grid');
|
||||
const empty = document.getElementById('projects-empty');
|
||||
const loading = document.getElementById('projects-loading');
|
||||
const error = document.getElementById('projects-error');
|
||||
|
||||
if (grid) grid.style.display = 'none';
|
||||
if (empty) empty.style.display = 'none';
|
||||
if (error) error.style.display = 'none';
|
||||
if (loading) loading.style.display = 'block';
|
||||
|
||||
try {
|
||||
console.log('[Projects] Starting to load projects...');
|
||||
const res = await fetch('/api/projects', {
|
||||
credentials: 'same-origin'
|
||||
});
|
||||
|
||||
console.log('[Projects] Response status:', res.status, res.statusText);
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`Failed to load projects (HTTP ${res.status})`);
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
console.log('[Projects] Response data:', data);
|
||||
projects = data.projects || [];
|
||||
|
||||
if (loading) loading.style.display = 'none';
|
||||
|
||||
if (projects.length === 0) {
|
||||
if (empty) empty.style.display = 'block';
|
||||
} else {
|
||||
if (grid) {
|
||||
grid.style.display = 'grid';
|
||||
renderProjectsGrid(projects);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('[Projects] Error loading projects:', err);
|
||||
console.error('[Projects] Error stack:', err.stack);
|
||||
console.error('[Projects] Error details:', {
|
||||
message: err.message,
|
||||
name: err.name,
|
||||
toString: err.toString()
|
||||
});
|
||||
|
||||
// Report to error monitoring
|
||||
if (typeof reportError === 'function') {
|
||||
reportError({
|
||||
type: 'console',
|
||||
url: window.location.href,
|
||||
message: 'Error loading projects: ' + err.message,
|
||||
stack: err.stack
|
||||
});
|
||||
}
|
||||
|
||||
if (loading) loading.style.display = 'none';
|
||||
if (error) error.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render projects grid
|
||||
*/
|
||||
function renderProjectsGrid(projects) {
|
||||
const grid = document.getElementById('projects-grid');
|
||||
if (!grid) return;
|
||||
|
||||
grid.innerHTML = projects.map(project => createProjectCard(project)).join('');
|
||||
|
||||
// Add click handlers
|
||||
grid.querySelectorAll('.project-card').forEach(card => {
|
||||
const projectId = card.dataset.projectId;
|
||||
const project = projects.find(p => p.id == projectId);
|
||||
|
||||
if (project) {
|
||||
card.addEventListener('click', () => openProject(project));
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a project card HTML
|
||||
*/
|
||||
function createProjectCard(project) {
|
||||
const name = escapeHtml(project.name);
|
||||
const path = escapeHtml(shortenPath(project.path || ''));
|
||||
const sessionCount = project.sessionCount || 0;
|
||||
const relativeTime = getRelativeTime(project.lastActivity);
|
||||
const icon = project.icon || '📁';
|
||||
|
||||
// Determine which sources have been used
|
||||
const sources = project.sources || [];
|
||||
const hasCli = sources.includes('cli');
|
||||
const hasWeb = sources.includes('web');
|
||||
|
||||
let sourcesHtml = '';
|
||||
if (hasCli && hasWeb) {
|
||||
sourcesHtml = `<span class="source-badge both">CLI + Web</span>`;
|
||||
} else if (hasCli) {
|
||||
sourcesHtml = `<span class="source-badge cli">CLI</span>`;
|
||||
} else if (hasWeb) {
|
||||
sourcesHtml = `<span class="source-badge web">Web</span>`;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="project-card" data-project-id="${project.id}">
|
||||
<div class="project-card-header">
|
||||
<div class="project-icon">${icon}</div>
|
||||
<div class="project-info">
|
||||
<h3 class="project-name">${name}</h3>
|
||||
<div class="project-path">${path}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="project-meta">
|
||||
<div class="meta-item session-count">
|
||||
<span class="icon">💬</span>
|
||||
<span>${sessionCount} session${sessionCount !== 1 ? 's' : ''}</span>
|
||||
</div>
|
||||
<div class="meta-item last-activity">
|
||||
<span class="icon">🕐</span>
|
||||
<span>${relativeTime}</span>
|
||||
</div>
|
||||
<div class="project-sources">
|
||||
${sourcesHtml}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Open project - show session picker modal
|
||||
*/
|
||||
async function openProject(project) {
|
||||
try {
|
||||
// Load the session picker modal if not already loaded
|
||||
if (!window.SessionPicker) {
|
||||
await loadScript('/claude/claude-ide/components/session-picker-modal.js');
|
||||
}
|
||||
|
||||
// Show session picker for this project
|
||||
if (window.SessionPicker) {
|
||||
window.SessionPicker.show(project);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error opening project:', error);
|
||||
showToast('Failed to open project', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show create project modal
|
||||
*/
|
||||
function showCreateProjectModal() {
|
||||
// For now, use a simple prompt
|
||||
// TODO: Replace with proper modal dialog
|
||||
const name = prompt('Enter project name:');
|
||||
if (!name) return;
|
||||
|
||||
const path = prompt('Enter folder path (e.g., ~/projects/my-app):');
|
||||
if (!path) return;
|
||||
|
||||
createProject(name, path);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a new project
|
||||
*/
|
||||
async function createProject(name, path) {
|
||||
try {
|
||||
showLoadingOverlay('Creating project...');
|
||||
|
||||
const res = await fetch('/api/projects', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, path })
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error('Failed to create project');
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (data.success) {
|
||||
hideLoadingOverlay();
|
||||
showToast('Project created successfully', 'success');
|
||||
await loadProjects(); // Reload projects list
|
||||
} else {
|
||||
throw new Error(data.error || 'Failed to create project');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error creating project:', error);
|
||||
hideLoadingOverlay();
|
||||
showToast(error.message || 'Failed to create project', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize keyboard shortcuts
|
||||
*/
|
||||
function initializeKeyboardShortcuts() {
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Cmd/Ctrl + N - New project / Select folder
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'n') {
|
||||
e.preventDefault();
|
||||
showFolderExplorer();
|
||||
}
|
||||
|
||||
// Cmd/Ctrl + R - Refresh projects
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === 'r') {
|
||||
e.preventDefault();
|
||||
loadProjects();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Get relative time string
|
||||
*/
|
||||
function getRelativeTime(timestamp) {
|
||||
if (!timestamp) return 'Never';
|
||||
|
||||
const date = new Date(timestamp);
|
||||
const now = new Date();
|
||||
const diffMins = Math.floor((now - date) / 60000);
|
||||
const diffHours = Math.floor((now - date) / 3600000);
|
||||
const diffDays = Math.floor((now - date) / 86400000);
|
||||
|
||||
if (diffMins < 1) return 'Just now';
|
||||
if (diffMins < 60) return `${diffMins}m ago`;
|
||||
if (diffHours < 24) return `${diffHours}h ago`;
|
||||
if (diffDays < 7) return `${diffDays}d ago`;
|
||||
return date.toLocaleDateString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Shorten file path for display
|
||||
*/
|
||||
function shortenPath(fullPath) {
|
||||
if (!fullPath) return '';
|
||||
|
||||
// Show last 3 parts of path
|
||||
const parts = fullPath.split('/');
|
||||
if (parts.length > 3) {
|
||||
return '...' + fullPath.slice(fullPath.indexOf('/', fullPath.length - 40));
|
||||
}
|
||||
|
||||
return fullPath;
|
||||
}
|
||||
|
||||
/**
|
||||
* Load a script dynamically
|
||||
*/
|
||||
function loadScript(src) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const script = document.createElement('script');
|
||||
script.src = src;
|
||||
script.onload = resolve;
|
||||
script.onerror = reject;
|
||||
document.head.appendChild(script);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show toast notification
|
||||
*/
|
||||
function showToast(message, type = 'info', duration = 3000) {
|
||||
const existingToasts = document.querySelectorAll('.toast-notification');
|
||||
existingToasts.forEach(toast => toast.remove());
|
||||
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast-notification toast-${type}`;
|
||||
toast.innerHTML = `
|
||||
<span class="toast-icon">${getToastIcon(type)}</span>
|
||||
<span class="toast-message">${escapeHtml(message)}</span>
|
||||
`;
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.add('visible');
|
||||
}, 10);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('visible');
|
||||
setTimeout(() => {
|
||||
toast.remove();
|
||||
}, 300);
|
||||
}, duration);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get toast icon based on type
|
||||
*/
|
||||
function getToastIcon(type) {
|
||||
const icons = {
|
||||
success: '✓',
|
||||
error: '✕',
|
||||
info: 'ℹ',
|
||||
warning: '⚠'
|
||||
};
|
||||
return icons[type] || icons.info;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show loading overlay
|
||||
*/
|
||||
function showLoadingOverlay(message = 'Loading...') {
|
||||
let overlay = document.getElementById('loading-overlay');
|
||||
|
||||
if (!overlay) {
|
||||
overlay = document.createElement('div');
|
||||
overlay.id = 'loading-overlay';
|
||||
overlay.className = 'loading-overlay';
|
||||
overlay.innerHTML = `
|
||||
<div class="loading-spinner"></div>
|
||||
<p class="loading-text">${escapeHtml(message)}</p>
|
||||
`;
|
||||
document.body.appendChild(overlay);
|
||||
} else {
|
||||
const textElement = overlay.querySelector('.loading-text');
|
||||
if (textElement) {
|
||||
textElement.textContent = message;
|
||||
}
|
||||
}
|
||||
|
||||
overlay.classList.remove('hidden');
|
||||
setTimeout(() => {
|
||||
overlay.classList.add('visible');
|
||||
}, 10);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide loading overlay
|
||||
*/
|
||||
function hideLoadingOverlay() {
|
||||
const overlay = document.getElementById('loading-overlay');
|
||||
if (overlay) {
|
||||
overlay.classList.remove('visible');
|
||||
setTimeout(() => {
|
||||
overlay.classList.add('hidden');
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape HTML to prevent XSS
|
||||
*/
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Refresh projects function (called from refresh button)
|
||||
function refreshProjects() {
|
||||
loadProjects();
|
||||
}
|
||||
|
||||
// Logout function
|
||||
async function logout() {
|
||||
try {
|
||||
await fetch('/claude/api/logout', { method: 'POST' });
|
||||
window.location.href = '/claude/';
|
||||
} catch (error) {
|
||||
console.error('Logout failed:', error);
|
||||
}
|
||||
}
|
||||
@@ -5,173 +5,68 @@
|
||||
<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>
|
||||
<link rel="stylesheet" href="/claude/claude-ide/projects-landing.css">
|
||||
</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>
|
||||
<a href="/claude/" class="nav-link active">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>
|
||||
<h1 class="hero-logo">Claude Code</h1>
|
||||
<p class="hero-subtitle">Start coding with AI</p>
|
||||
|
||||
<button id="select-folder-btn" class="btn-select-folder">
|
||||
<span class="icon">📁</span>
|
||||
Select Folder
|
||||
</button>
|
||||
|
||||
<p class="keyboard-hint">
|
||||
Keyboard shortcut: <kbd>⌘</kbd><kbd>N</kbd>
|
||||
</p>
|
||||
|
||||
<p class="example-hint">Browse folders or create a new project</p>
|
||||
</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 class="projects-section-header">
|
||||
<h2 class="projects-section-title">Recent Projects</h2>
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div id="projects-loading" class="projects-loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Loading projects...</p>
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div id="projects-error" class="projects-error" style="display: none;">
|
||||
<p>Failed to load projects. Please try again.</p>
|
||||
<button class="btn-secondary" onclick="refreshProjects()" style="margin-top: 16px;">Retry</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 class="empty-icon">📁</div>
|
||||
<h3 class="empty-title">No projects yet</h3>
|
||||
<p class="empty-subtitle">Select a folder to start coding with AI</p>
|
||||
</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>
|
||||
<!-- Projects Grid -->
|
||||
<div id="projects-grid" class="projects-grid" style="display: none;">
|
||||
<!-- Project cards rendered dynamically -->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="/claude/claude-ide/error-monitor.js"></script>
|
||||
<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>
|
||||
<script src="/claude/claude-ide/projects-landing.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user