class ProjectManager extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.projects = [
{ id: 'projet1', name: 'Espace Codage - Projet 1', active: true },
{ id: 'projet2', name: 'Espace Codage - Projet 2', active: false }
];
this.tools = [
{ name: 'La Baleine IA', icon: 'image', href: 'baleine.html', description: 'Générateur multimédia IA' },
{ name: 'Rosalinda IA', icon: 'message-circle', href: 'rosalinda.html', description: 'Assistante conversationnelle' },
{ name: 'Bibliothèque', icon: 'book', href: '#', description: 'Ressources et templates' },
{ name: 'Paramètres', icon: 'settings', href: '#', description: 'Configuration du workspace' }
];
this.currentProject = this.projects[0];
}
connectedCallback() {
this.render();
this.setupEventListeners();
}
render() {
this.shadowRoot.innerHTML = `
`;
feather.replace();
}
setupEventListeners() {
this.shadowRoot.querySelectorAll('.project').forEach(project => {
project.addEventListener('click', () => {
this.projects.forEach(p => p.active = false);
const selectedProject = this.projects.find(p => p.id === project.dataset.id);
if (selectedProject) {
selectedProject.active = true;
this.currentProject = selectedProject;
this.render();
// Dispatch event to update other components
this.dispatchEvent(new CustomEvent('project-changed', {
detail: {
project: selectedProject,
tools: this.tools
}
}));
}
});
});
}
}
customElements.define('project-manager', ProjectManager);