feat: add session context menu for project reassignment
Implemented smart suggestions UI with visual indicators for moving sessions between projects. Features: - Right-click context menu on session rows - Fetches smart project suggestions from API - Displays top 3 suggestions with match scores and reasons - Visual indicators: 🎯 (90+), 📂 (50-89), 💡 (10-49) - "Open in IDE" option for quick navigation - "Show All Projects" modal for full project list - "Move to Unassigned" to remove project association - Smooth animations and hover effects - Click outside to close menu - Responsive design for mobile devices Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
uroma
@@ -359,6 +359,12 @@ function createSessionRow(session) {
|
||||
showProjectMenu(e, session);
|
||||
});
|
||||
|
||||
// Add right-click context menu
|
||||
tr.addEventListener('contextmenu', (e) => {
|
||||
e.preventDefault();
|
||||
showSessionContextMenu(e, session.id);
|
||||
});
|
||||
|
||||
return tr;
|
||||
}
|
||||
|
||||
@@ -789,3 +795,260 @@ function escapeHtml(text) {
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show session context menu for project reassignment
|
||||
*/
|
||||
async function showSessionContextMenu(event, sessionId) {
|
||||
event.preventDefault();
|
||||
hideSessionContextMenu();
|
||||
|
||||
// Create context menu element
|
||||
const menu = document.createElement('div');
|
||||
menu.id = 'sessionContextMenu';
|
||||
menu.className = 'session-context-menu';
|
||||
|
||||
// Fetch project suggestions
|
||||
let suggestions = [];
|
||||
try {
|
||||
const res = await fetch(`/api/projects/suggestions?sessionId=${sessionId}`);
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
suggestions = data.suggestions || [];
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching suggestions:', error);
|
||||
}
|
||||
|
||||
// Build menu HTML
|
||||
let menuHtml = `
|
||||
<div class="context-menu-item" data-action="open">
|
||||
<span class="context-menu-icon">🚀</span>
|
||||
<span class="context-menu-text">Open in IDE</span>
|
||||
</div>
|
||||
<div class="context-menu-divider"></div>
|
||||
<div class="context-menu-label">Move to Project</div>
|
||||
`;
|
||||
|
||||
// Add top 3 suggestions
|
||||
const topSuggestions = suggestions.slice(0, 3);
|
||||
topSuggestions.forEach(suggestion => {
|
||||
const icon = getMatchIcon(suggestion.score);
|
||||
const project = window.projectsMap?.get(suggestion.projectId);
|
||||
if (project) {
|
||||
menuHtml += `
|
||||
<div class="context-menu-item context-menu-suggestion" data-action="move" data-project-id="${suggestion.projectId}">
|
||||
<span class="context-menu-icon">${icon}</span>
|
||||
<div class="context-menu-suggestion-content">
|
||||
<span class="context-menu-text">${escapeHtml(project.name)}</span>
|
||||
<span class="context-menu-reason">${escapeHtml(suggestion.reason)}</span>
|
||||
</div>
|
||||
<span class="context-menu-score">${Math.round(suggestion.score)}%</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
// Add "Show All Projects" option
|
||||
menuHtml += `
|
||||
<div class="context-menu-item" data-action="show-all">
|
||||
<span class="context-menu-icon">📂</span>
|
||||
<span class="context-menu-text">Show All Projects...</span>
|
||||
</div>
|
||||
<div class="context-menu-divider"></div>
|
||||
<div class="context-menu-item" data-action="unassigned">
|
||||
<span class="context-menu-icon">📄</span>
|
||||
<span class="context-menu-text">Move to Unassigned</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
menu.innerHTML = menuHtml;
|
||||
document.body.appendChild(menu);
|
||||
|
||||
// Position menu at mouse coordinates
|
||||
const x = event.clientX;
|
||||
const y = event.clientY;
|
||||
|
||||
// Ensure menu doesn't go off screen
|
||||
const menuRect = menu.getBoundingClientRect();
|
||||
const maxX = window.innerWidth - menuRect.width - 10;
|
||||
const maxY = window.innerHeight - menuRect.height - 10;
|
||||
|
||||
menu.style.left = `${Math.min(x, maxX)}px`;
|
||||
menu.style.top = `${Math.min(y, maxY)}px`;
|
||||
|
||||
// Store session ID for event handlers
|
||||
menu.dataset.sessionId = sessionId;
|
||||
|
||||
// Add event listeners
|
||||
menu.addEventListener('click', handleContextMenuClick);
|
||||
|
||||
// Close menu when clicking outside
|
||||
setTimeout(() => {
|
||||
document.addEventListener('click', hideSessionContextMenu, { once: true });
|
||||
}, 10);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle context menu item clicks
|
||||
*/
|
||||
async function handleContextMenuClick(event) {
|
||||
const menu = document.getElementById('sessionContextMenu');
|
||||
if (!menu) return;
|
||||
|
||||
const target = event.target.closest('.context-menu-item');
|
||||
if (!target) return;
|
||||
|
||||
const action = target.dataset.action;
|
||||
const sessionId = menu.dataset.sessionId;
|
||||
|
||||
hideSessionContextMenu();
|
||||
|
||||
switch (action) {
|
||||
case 'open':
|
||||
continueToSession(sessionId);
|
||||
break;
|
||||
case 'move':
|
||||
const projectId = target.dataset.projectId;
|
||||
await moveSessionToProject(sessionId, projectId);
|
||||
break;
|
||||
case 'show-all':
|
||||
showAllProjectsModal(sessionId);
|
||||
break;
|
||||
case 'unassigned':
|
||||
await moveSessionToProject(sessionId, null);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get match icon based on score
|
||||
*/
|
||||
function getMatchIcon(score) {
|
||||
if (score >= 90) return '🎯';
|
||||
if (score >= 50) return '📂';
|
||||
return '💡';
|
||||
}
|
||||
|
||||
/**
|
||||
* Move session to project
|
||||
*/
|
||||
async function moveSessionToProject(sessionId, projectId) {
|
||||
try {
|
||||
showLoadingOverlay('Moving session...');
|
||||
|
||||
const res = await fetch(`/api/projects/sessions/${sessionId}/move`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ projectId })
|
||||
});
|
||||
|
||||
if (!res.ok) throw new Error('Request failed');
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (data.success) {
|
||||
hideLoadingOverlay();
|
||||
showToast('Session moved successfully', 'success');
|
||||
await loadSessionsAndProjects();
|
||||
} else {
|
||||
throw new Error(data.error || 'Failed to move session');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error moving session:', error);
|
||||
hideLoadingOverlay();
|
||||
showToast(error.message || 'Failed to move session', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show all projects modal
|
||||
*/
|
||||
function showAllProjectsModal(sessionId) {
|
||||
// Create modal overlay
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'modal-overlay';
|
||||
overlay.id = 'allProjectsModal';
|
||||
|
||||
// Create modal content
|
||||
const modal = document.createElement('div');
|
||||
modal.className = 'all-projects-modal';
|
||||
|
||||
// Build projects list
|
||||
const projects = Array.from(window.projectsMap?.values() || []);
|
||||
let projectsHtml = '';
|
||||
|
||||
if (projects.length === 0) {
|
||||
projectsHtml = '<div class="no-projects">No projects available</div>';
|
||||
} else {
|
||||
projectsHtml = '<div class="projects-list">';
|
||||
projects.forEach(project => {
|
||||
projectsHtml += `
|
||||
<div class="project-option" data-project-id="${project.id}">
|
||||
<span class="project-option-icon">${escapeHtml(project.icon || '📁')}</span>
|
||||
<span class="project-option-name">${escapeHtml(project.name)}</span>
|
||||
<span class="project-option-arrow">→</span>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
projectsHtml += '</div>';
|
||||
}
|
||||
|
||||
modal.innerHTML = `
|
||||
<div class="modal-header">
|
||||
<h2>All Projects</h2>
|
||||
<button class="modal-close" onclick="closeAllProjectsModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p class="modal-info">Select a project to move this session to</p>
|
||||
${projectsHtml}
|
||||
</div>
|
||||
`;
|
||||
|
||||
overlay.appendChild(modal);
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
// Add click handlers
|
||||
modal.querySelectorAll('.project-option').forEach(option => {
|
||||
option.addEventListener('click', async () => {
|
||||
const projectId = option.dataset.projectId;
|
||||
closeAllProjectsModal();
|
||||
await moveSessionToProject(sessionId, projectId);
|
||||
});
|
||||
});
|
||||
|
||||
// Close on overlay click
|
||||
overlay.addEventListener('click', (e) => {
|
||||
if (e.target === overlay) {
|
||||
closeAllProjectsModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Trigger animation
|
||||
setTimeout(() => {
|
||||
overlay.classList.add('visible');
|
||||
}, 10);
|
||||
}
|
||||
|
||||
/**
|
||||
* Close all projects modal
|
||||
*/
|
||||
function closeAllProjectsModal() {
|
||||
const modal = document.getElementById('allProjectsModal');
|
||||
if (modal) {
|
||||
modal.classList.remove('visible');
|
||||
setTimeout(() => {
|
||||
modal.remove();
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide session context menu
|
||||
*/
|
||||
function hideSessionContextMenu() {
|
||||
const menu = document.getElementById('sessionContextMenu');
|
||||
if (menu) {
|
||||
menu.remove();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user