Implement complete JavaScript functionality for the projects management page:
- State management for projects array and current editing project
- loadProjects() - Fetch projects from /api/projects
- renderProjects(filter) - Render project cards with search/filter support
- setupEventListeners() - Wire up all interactive elements
- openProject(projectId) - Navigate to sessions page for selected project
- openProjectModal(project) - Open modal for create/edit operations
- closeProjectModal() - Close modal and reset form
- handleProjectSubmit(e) - Validate and save project data
- showProjectMenu(projectId, event) - Display context menu
- deleteProject(projectId) - Soft delete with confirmation
- openRecycleBinModal() - Display deleted projects
- restoreProject(projectId) - Restore from recycle bin
- permanentDeleteProject(projectId) - Delete forever with confirmation
- escapeHtml(text) - XSS prevention for user-generated content
- formatDate(dateString) - Human-readable relative timestamps
- showToast(message, type) - Toast notifications with animations
Features:
- Async/await for all API calls
- Comprehensive error handling
- Real-time search filtering
- Context menu for project actions
- Responsive modal system
- Toast notifications for user feedback
- Keyboard shortcuts (Escape to close)
- Click outside to close menus/modals
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
