dss/admin-ui/js/components/layout/ds-activity-bar.js

/**
 * ds-activity-bar.js
 * Activity bar component - team/project switcher
 */

class DSActivityBar extends HTMLElement {
  constructor() {
    super();
    this.currentTeam = 'ui';
    this.advancedMode = this.loadAdvancedMode();
    this.teams = [
      { id: 'ui', label: 'UI', icon: '🎨' },
      { id: 'ux', label: 'UX', icon: '👁️' },
      { id: 'qa', label: 'QA', icon: '🔍' },
      { id: 'admin', label: 'Admin', icon: '🛡️' }
    ];
  }

  loadAdvancedMode() {
    try {
      return localStorage.getItem('dss-advanced-mode') === 'true';
    } catch (e) {
      return false;
    }
  }

  saveAdvancedMode() {
    try {
      localStorage.setItem('dss-advanced-mode', this.advancedMode.toString());
    } catch (e) {
      console.error('Failed to save advanced mode preference:', e);
    }
  }

  connectedCallback() {
    this.render();
    this.setupEventListeners();
  }

  render() {
    this.innerHTML = `
      ${this.teams.map(team => `
        <div class="activity-item ${team.id === this.currentTeam ? 'active' : ''}"
             data-team="${team.id}"
             title="${team.label} Team">
          <span style="font-size: 20px;">${team.icon}</span>
        </div>
      `).join('')}

      <div style="flex: 1;"></div>

      <div class="activity-item"
           data-action="chat"
           title="AI Chat">
        <span style="font-size: 18px;">💬</span>
      </div>

      <div class="activity-item ${this.advancedMode ? 'active' : ''}"
           data-action="advanced-mode"
           title="Advanced Mode: ${this.advancedMode ? 'ON' : 'OFF'}">
        <span style="font-size: 18px;">🔧</span>
      </div>

      <div class="activity-item"
           data-action="settings"
           title="Settings">
        <span style="font-size: 18px;">⚙️</span>
      </div>
    `;
  }

  setupEventListeners() {
    this.querySelectorAll('.activity-item[data-team]').forEach(item => {
      item.addEventListener('click', (e) => {
        const teamId = e.currentTarget.dataset.team;
        this.switchTeam(teamId);
      });
    });

    this.querySelector('.activity-item[data-action="chat"]')?.addEventListener('click', () => {
      // Toggle chat sidebar visibility
      const chatSidebar = document.querySelector('ds-ai-chat-sidebar');
      if (chatSidebar && chatSidebar.toggleCollapse) {
        chatSidebar.toggleCollapse();
      }
    });

    this.querySelector('.activity-item[data-action="advanced-mode"]')?.addEventListener('click', () => {
      this.toggleAdvancedMode();
    });

    this.querySelector('.activity-item[data-action="settings"]')?.addEventListener('click', () => {
      // Dispatch settings-open event to parent shell
      this.dispatchEvent(new CustomEvent('settings-open', {
        bubbles: true,
        detail: { action: 'open-settings' }
      }));
    });
  }

  toggleAdvancedMode() {
    this.advancedMode = !this.advancedMode;
    this.saveAdvancedMode();
    this.render();
    this.setupEventListeners();

    // Dispatch advanced-mode-change event to parent shell
    this.dispatchEvent(new CustomEvent('advanced-mode-change', {
      bubbles: true,
      detail: { advancedMode: this.advancedMode }
    }));
  }

  switchTeam(teamId) {
    if (teamId === this.currentTeam) return;

    this.currentTeam = teamId;

    // Update active state
    this.querySelectorAll('.activity-item[data-team]').forEach(item => {
      item.classList.toggle('active', item.dataset.team === teamId);
    });

    // Dispatch team-switch event to parent shell
    this.dispatchEvent(new CustomEvent('team-switch', {
      bubbles: true,
      detail: { team: teamId }
    }));
  }
}

customElements.define('ds-activity-bar', DSActivityBar);