static/js/ui_toggle.js

// UI Enhancement Setup - No Toggle (Always Enhanced UI)
document.addEventListener('DOMContentLoaded', function() {
  // Add classes to control panels for easier selection
  const controlPanels = document.querySelectorAll('.control-panel');
  for (let i = 0; i < controlPanels.length; i++) {
    if (i % 2 === 0) {
      controlPanels[i].classList.add('original-ui');
    } else {
      controlPanels[i].classList.add('enhanced-ui');
    }
  }
  
  const originalControls = document.querySelectorAll('.original-ui');
  const enhancedControls = document.querySelectorAll('.enhanced-ui');
  const originalTabs = document.getElementById('dataTabs');
  const enhancedTabs = document.getElementById('dataTabsEnhanced');
  
  // Function to set UI to enhanced mode permanently
  function setEnhancedUI() {
    // Hide original UI elements
    originalControls.forEach(panel => {
      panel.style.display = 'none';
    });
    
    // Show enhanced UI elements
    enhancedControls.forEach(panel => {
      panel.style.display = 'block';
    });
    
    // Hide original tabs and show enhanced tabs
    originalTabs.classList.add('d-none');
    enhancedTabs.classList.remove('d-none');

    // Show appropriate info cards
    document.querySelectorAll('.tab-pane .card').forEach(card => {
      card.style.display = 'block';
    });
    
    // Apply enhanced styles to buttons
    document.querySelectorAll('.btn').forEach(btn => {
      if (!btn.classList.contains('btn-close')) {
        btn.classList.add('rounded-pill', 'fw-semibold');
      }
    });
  }
  
  // Set enhanced UI immediately when page loads
  setEnhancedUI();
});