components/project-manager.js

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 = `
      <style>
        :host {
          display: block;
          width: 100%;
          height: 100%;
          background: var(--bg-color, #1e293b);
          color: var(--text-color, #f8fafc);
        }
        .sidebar {
          padding: 1rem;
          height: 100%;
          display: flex;
          flex-direction: column;
        }
        .project-info {
          padding: 1rem;
          margin-bottom: 1rem;
          border-radius: 0.5rem;
          background: rgba(255, 255, 255, 0.05);
        }
        .project-title {
          font-weight: 600;
          margin-bottom: 0.5rem;
        }
        .project-status {
          font-size: 0.75rem;
          color: rgba(156, 163, 175, 1);
        }
        .projects {
          flex-grow: 1;
          overflow-y: auto;
        }
        .project {
          padding: 0.75rem 1rem;
          margin-bottom: 0.5rem;
          border-radius: 0.5rem;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 0.75rem;
          border: 1px solid transparent;
          transition: all 0.2s ease;
        }
        .project:hover {
          background: rgba(255, 255, 255, 0.05);
        }
        .project.active {
          background: rgba(59, 130, 246, 0.1);
          border-color: rgba(59, 130, 246, 0.2);
          color: rgba(191, 219, 254, 1);
        }
        .project-icon {
          width: 1.5rem;
          height: 1.5rem;
          border-radius: 0.375rem;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(255, 255, 255, 0.1);
        }
        .tools {
          margin-top: 1rem;
          padding-top: 1rem;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        .tool {
          padding: 0.75rem 1rem;
          margin-bottom: 0.5rem;
          border-radius: 0.5rem;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 0.75rem;
          transition: all 0.2s ease;
        }
        .tool:hover {
          background: rgba(255, 255, 255, 0.05);
        }
        .tool-description {
          font-size: 0.75rem;
          color: rgba(156, 163, 175, 1);
          margin-top: 0.25rem;
        }
        h3 {
          margin: 0 0 1rem 0;
          font-size: 0.875rem;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.05em;
          color: rgba(156, 163, 175, 1);
        }
      </style>
      <div class="sidebar">
        <div class="project-info">
          <div class="project-title">${this.currentProject.name}</div>
          <div class="project-status">Modifié il y a 2 heures</div>
        </div>
        
        <div class="projects">
          <h3>Projets</h3>
          ${this.projects.map(project => `
            <div class="project ${project.active ? 'active' : ''}" data-id="${project.id}">
              <div class="project-icon">
                <i data-feather="folder"></i>
              </div>
              <span>${project.name}</span>
            </div>
          `).join('')}
        </div>
        
        <div class="tools">
          <h3>Outils IA</h3>
          ${this.tools.map(tool => `
            <a href="${tool.href}" class="tool">
              <div class="project-icon">
                <i data-feather="${tool.icon}"></i>
              </div>
              <div>
                <div>${tool.name}</div>
                <div class="tool-description">${tool.description}</div>
              </div>
            </a>
          `).join('')}
        </div>
      </div>
    `;
    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);