semem/src/frontend/js/components/tabs.js

Semantic Memory for Intelligent Agents

/**
 * Tab navigation functionality
 */

/**
 * Initialize tab navigation
 */
export function initTabs() {
    console.log('Initializing tab navigation');
    
    const tabButtons = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');
    const innerTabButtons = document.querySelectorAll('.tab-inner-btn');
    
    // Main tabs
    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            const tabId = button.getAttribute('data-tab');
            
            // Update button states
            tabButtons.forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');
            
            // Update content visibility
            tabContents.forEach(content => content.classList.remove('active'));
            document.getElementById(`${tabId}-tab`).classList.add('active');
            
            // Trigger settings initialization when settings tab is activated
            if (tabId === 'settings') {
                // Dispatch custom event for settings tab activation
                window.dispatchEvent(new CustomEvent('settingsTabActivated'));
            }
        });
    });
    
    // Inner tabs
    innerTabButtons.forEach(button => {
        button.addEventListener('click', () => {
            const parentTab = button.closest('.tab-content');
            const innerTabId = button.getAttribute('data-inner-tab');
            
            // Update button states within this parent tab
            parentTab.querySelectorAll('.tab-inner-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            button.classList.add('active');
            
            // Update content visibility within this parent tab
            parentTab.querySelectorAll('.inner-tab-content').forEach(content => {
                content.classList.remove('active');
            });
            parentTab.querySelector(`#${innerTabId}`).classList.add('active');
        });
    });
}