components/timeline-sidebar.js

class TimelineSidebar extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.render();
    this.setupEventListeners();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          position: fixed;
          right: 0;
          top: 0;
          height: 100vh;
          width: 300px;
          background: #1f2937;
          border-left: 1px solid #374151;
          z-index: 30;
          transform: translateX(100%);
          transition: transform 0.3s ease;
          overflow-y: auto;
        }

        :host(.open) {
          transform: translateX(0);
        }

        .header {
          padding: 1rem;
          border-bottom: 1px solid #374151;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background: #1f2937;
        }

        .timeline-container {
          padding: 1rem;
        }

        .timeline-hour {
          position: relative;
          min-height: 60px;
          border-bottom: 1px solid #374151;
          padding-left: 50px;
        }

        .hour-label {
          position: absolute;
          left: 10px;
          top: 5px;
          font-size: 12px;
          color: #9ca3af;
        }

        .task-drop-area {
          height: 100%;
          min-height: 60px;
          border-radius: 4px;
          transition: background-color 0.2s ease;
        }

        .task-drop-area:hover {
          background-color: #37415170;
        }

        .task-block {
          background: #374151;
          border-left: 3px solid #f97316;
          padding: 0.5rem;
          margin: 0.5rem 0;
          border-radius: 4px;
          font-size: 14px;
          cursor: pointer;
          margin-bottom: 4px;
          transition: all 0.2s ease;
        }

        .task-block:hover {
          background: #4b5563;
          transform: scale(1.02);
        }

        .toggle-btn {
          position: fixed;
          right: 300px;
          top: 50%;
          transform: translateY(-50%);
          background: #1f2937;
          border: 1px solid #374151;
          border-right: none;
          padding: 1rem 0.5rem;
          border-radius: 5px 0 0 5px;
          cursor: pointer;
          z-index: 30;
          color: white;
        }

        .toggle-btn:hover {
          background: #374151;
        }

        .current-time {
          background: #ef444420;
          border-left: 2px solid #ef4444;
        }
      </style>

      <button class="toggle-btn">
        <i data-feather="chevron-left"></i>
      </button>

      <div class="header">
        <h3>Timeline</h3>
        <button id="close-timeline">
          <i data-feather="x"></i>
        </button>
      </div>

      <div class="timeline-container" id="timeline-hours">
        ${Array.from({ length: 24 }, (_, i) => `
          <div class="timeline-hour" data-hour="${i}">
            <span class="hour-label">${i.toString().padStart(2, '0')}:00</span>
            <div class="task-drop-area" data-hour="${i}"></div>
          </div>
        `).join('')}
      </div>
    `;
  }

  setupEventListeners() {
    const toggleBtn = this.shadowRoot.querySelector('.toggle-btn');
    toggleBtn.addEventListener('click', () => {
      this.classList.toggle('open');
      const icon = toggleBtn.querySelector('i');
      if (this.classList.contains('open')) {
      } else {
      }
    });

    // Setup drag and drop
    this.shadowRoot.addEventListener('dragover', (e) => {
      if (e.target.classList.contains('task-drop-area')) {
        e.preventDefault();
        e.target.style.backgroundColor = '#37415170';
      }
    });

    this.shadowRoot.addEventListener('dragleave', (e) => {
      if (e.target.classList.contains('task-drop-area')) {
        e.target.style.backgroundColor = '';
      }
    });

    this.shadowRoot.addEventListener('drop', (e) => {
      if (e.target.classList.contains('task-drop-area')) {
        e.preventDefault();
        e.target.style.backgroundColor = '';
        
        const taskId = e.dataTransfer.getData('text/plain');
        const hour = parseInt(e.target.dataset.hour);
        
        this.dispatchEvent(new CustomEvent('task-dropped', {
          detail: { taskId, hour }
        }));
      }
    });

    // Initialize timeline
    setTimeout(() => {
      this.updateTimeline();
    }, 100);
  }

  updateTimeline() {
    const today = new Date().toDateString();
    const scheduledTasks = state.timelineTasks.filter(t => 
      new Date(t.date).toDateString() === today
    );

    const container = this.shadowRoot.querySelector('.timeline-container');
    container.querySelectorAll('.task-block').forEach(el => el.remove());

    scheduledTasks.forEach(timelineTask => {
      const task = state.tasks.find(t => t.id === timelineTask.taskId);
      if (!task || task.completed) return;
      
      const startTime = new Date(timelineTask.startTime);
      const hour = startTime.getHours();
      const minute = startTime.getMinutes();
      
      const hourEl = this.shadowRoot.querySelector(`.timeline-hour[data-hour="${hour}"]`);
      if (hourEl) {
        const taskEl = document.createElement('div');
        taskEl.className = 'task-block';
        taskEl.innerHTML = `
          <div class="task-title">${task.title}</div>
          <div class="task-time">${formatTime(task.estimatedTime)}</div>
        `;
        taskEl.draggable = true;
        taskEl.dataset.taskId = task.id;
        
        hourEl.appendChild(taskEl);
      }
    });
  }
}

customElements.define('timeline-sidebar', TimelineSidebar);