export function initTabs()

in gemini/mcp/adk_multiagent_mcp_app/static/tabs.js [20:69]


export function initTabs() {
  const tabButtons = document.querySelectorAll(".tab-button");
  const tabPanels = document.querySelectorAll(".tab-panel");

  if (!tabButtons.length || !tabPanels.length) {
    console.warn(
      "Tab elements (buttons or panels) not found. Skipping tab initialization.",
    );
    return;
  }

  tabButtons.forEach((button) => {
    button.addEventListener("click", () => {
      const targetPanelId = button.getAttribute("data-tab");
      if (!targetPanelId) {
        console.error("Tab button is missing 'data-tab' attribute:", button);
        return;
      }
      const targetPanel = document.getElementById(targetPanelId);

      // Deactivate all buttons and panels
      tabButtons.forEach((btn) => btn.classList.remove("active"));
      tabPanels.forEach((panel) => panel.classList.remove("active"));

      // Activate the clicked button and corresponding panel
      button.classList.add("active");
      if (targetPanel) {
        targetPanel.classList.add("active");
        console.log(`Switched to tab: ${targetPanelId}`);
      } else {
        console.error(`Target panel with ID '${targetPanelId}' not found.`);
      }
    });
  });

  // Set the initial active tab (optional, based on HTML having 'active' class)
  const initialActiveButton = document.querySelector(".tab-button.active");
  if (initialActiveButton) {
    const initialPanelId = initialActiveButton.getAttribute("data-tab");
    const initialPanel = document.getElementById(initialPanelId);
    if (initialPanel) initialPanel.classList.add("active");
    else console.warn(`Initial active panel '${initialPanelId}' not found.`);
  } else if (tabButtons.length > 0) {
    // Fallback: activate the first tab if none are marked active
    tabButtons[0].click();
    console.log("No initial active tab set, activating the first one.");
  }

  console.log("Tab switching logic initialized.");
}