Remove API key manager component loading and simplify tab initialization

Author: ralyodio

public/js/page-initializers.js

@@ -517,35 +517,6 @@ export async function initApiKeysPage() {
 
   // Initialize API keys page
   console.log('JWT token found, initializing API keys page');
-  
-  // Ensure the api-key-manager component is loaded
-  try {
-    // Import the api-key-manager component
-    await import('./components/api-key-manager.js');
-    console.log("API key manager component imported in page initializer");
-    
-    // Make sure the component is defined and registered
-    if (!customElements.get('api-key-manager')) {
-      console.error("API key manager component not registered in page initializer");
-    } else {
-      console.log("API key manager component is registered in page initializer");
-      
-      // Force re-render of the component if it exists
-      const apiKeyManager = document.querySelector('api-key-manager');
-      if (apiKeyManager) {
-        console.log("Found api-key-manager element in page initializer, forcing render");
-        // If the component has a render method, call it
-        if (typeof apiKeyManager.render === 'function') {
-          apiKeyManager.render();
-        }
-      } else {
-        console.log("No api-key-manager element found in page initializer");
-        // The component might not be in the DOM yet, the view-specific JS will handle this
-      }
-    }
-  } catch (error) {
-    console.error("Error loading api-key-manager component in page initializer:", error);
-  }
 }
 
 /**

public/js/views/api-keys.js

@@ -1,54 +1,7 @@
 /**
  * Initialize the API keys page
  */
-async function initApiKeysPage() {
-  console.log("Initializing API keys page");
-  
-  // Ensure the api-key-manager component is loaded
-  try {
-    // Import the api-key-manager component
-    await import('../components/api-key-manager.js');
-    console.log("API key manager component imported");
-    
-    // Make sure the component is defined and registered
-    if (!customElements.get('api-key-manager')) {
-      console.error("API key manager component not registered");
-    } else {
-      console.log("API key manager component is registered");
-    }
-    
-    // Force re-render of the component if it exists
-    const apiKeyManager = document.querySelector('api-key-manager');
-    if (apiKeyManager) {
-      console.log("Found api-key-manager element, forcing render");
-      // If the component has a render method, call it
-      if (typeof apiKeyManager.render === 'function') {
-        apiKeyManager.render();
-      }
-      // Otherwise, try to re-initialize it by removing and re-adding it
-      else {
-        const container = document.getElementById('api-key-container');
-        if (container) {
-          const newManager = document.createElement('api-key-manager');
-          container.innerHTML = '';
-          container.appendChild(newManager);
-          console.log("Re-created api-key-manager element");
-        }
-      }
-    } else {
-      console.log("No api-key-manager element found, creating one");
-      const container = document.getElementById('api-key-container');
-      if (container) {
-        const newManager = document.createElement('api-key-manager');
-        container.innerHTML = '';
-        container.appendChild(newManager);
-        console.log("Created new api-key-manager element");
-      }
-    }
-  } catch (error) {
-    console.error("Error loading api-key-manager component:", error);
-  }
-  
+function initApiKeysPage() {
   // Set up tab switching
   const tabButtons = document.querySelectorAll(".tab-button");
   tabButtons.forEach((button) => {
@@ -78,6 +31,12 @@ async function initApiKeysPage() {
       }
     });
   });
+  
+  // Make sure the first tab content is visible by default
+  const firstTabContent = document.getElementById("manage-tab");
+  if (firstTabContent) {
+    firstTabContent.style.display = "block";
+  }
 }
 
 // Initialize the page when the DOM is loaded