refactor: use existing functions and panels map (#3)

* chore: use this.panels instead of DOM querying

* chore: remove debounce functionality

- removes isToggling and lastToggleTime

* refactor: togglePanel uses panel map

* refactor: cleanupOrphanedPanels calls

- add cleanUpOrphanedPanels() to initialization
- add cleanupOrphanedPanels() to closeAllPanels()

* refactor: use existing functions in togglePanel

* style: formatting and removing redundant comments

---------

Co-authored-by: dustin-jw <dustin@heysparkbox.com>

Author: marissahuysentruyt

src/core/ExtensionManager.js

@@ -1,14 +1,13 @@
-// Import Panel class
 import { Panel } from './Panel.js';
 
-// Core extension management class
 class ExtensionManager {
   constructor(browserAPI = null) {
     this.browserAPI = browserAPI || (typeof browser !== 'undefined' ? browser : chrome);
     this.panels = new Map();
     this.initialized = false;
-    this.isToggling = false;
-    this.lastToggleTime = 0;
+
+    // TODO: Set the other panel types in the panels map
+    this.panels.set('welcome', new Panel('welcome', {}, this.browserAPI));
   }
 
   async initialize() {
@@ -26,6 +25,10 @@ class ExtensionManager {
       });
     }
 
+    await this.loadCoreCSS();
+
+    this.cleanupOrphanedPanels();
+
     this.initialized = true;
   }
 
@@ -42,53 +45,47 @@ class ExtensionManager {
           await this.openPanel(message.panelType || 'welcome', message.data);
           break;
         default:
-
           break;
       }
     } catch (error) {
       console.error(error);
     }
   }
 
+  async loadCoreCSS() {
+    if (document.getElementById('carbon-visualizer-core-css')) return;
 
-  async togglePanel(panelType) {
-    const now = Date.now();
-
-    if (now - this.lastToggleTime < 500) {
-      return;
-    }
-
-    if (this.isToggling) {
-      return;
+    try {
+      const cssUrl = this.browserAPI.runtime.getURL('src/styles/core.css');
+      const response = await fetch(cssUrl);
+      const css = await response.text();
+
+      const style = document.createElement('style');
+      style.id = 'carbon-visualizer-core-css';
+      style.textContent = css;
+      document.head.appendChild(style);
+    } catch (error) {
+      console.error(error);
     }
+  }
 
-    this.isToggling = true;
-    this.lastToggleTime = now;
-
+  async togglePanel(panelType) {
     try {
-      const existingPanelInDOM = document.querySelector('.cv-panel--welcome');
-
-      if (existingPanelInDOM) {
-        existingPanelInDOM.classList.remove('cv-panel--visible');
-        // exit animation completes and then remove panel from DOM
-        setTimeout(() => {
-          existingPanelInDOM.remove();
-        }, 300);
+      const panel = this.panels.get(panelType);
+
+      if (panel && panel.isVisible) {
+        this.closePanel(panelType);
       } else {
         await this.openPanel(panelType);
       }
-    } finally {
-
-      setTimeout(() => {
-        this.isToggling = false;
-      }, 100);
+    } catch (error) {
+      console.error('Error in togglePanel():', error);
     }
   }
 
   cleanupOrphanedPanels() {
-    // Remove any orphaned panels from DOM
     const orphanedPanels = document.querySelectorAll('.cv-panel');
-    orphanedPanels.forEach(panel => {
+    orphanedPanels.forEach((panel) => {
       panel.remove();
     });
 
@@ -103,41 +100,34 @@ class ExtensionManager {
   async openPanel(panelType, data = {}) {
     let panel = this.panels.get(panelType);
 
-    // Always create a fresh panel to avoid state issues
+    // Create a new panel if one does not already exist
     if (!panel) {
       panel = new Panel(panelType, data, this.browserAPI);
       this.panels.set(panelType, panel);
     }
 
     // Always reinitialize to ensure clean state
     await panel.initialize();
-
-    // Show the panel
     await panel.show();
   }
 
   closePanel(panelType) {
     const panel = this.panels.get(panelType);
     if (panel) {
       panel.hide();
-      // Don't delete from map - keep for reuse
     }
   }
 
   closeAllPanels() {
-    // Hide all tracked panels immediately
     for (const [type, panel] of this.panels) {
       if (panel && panel.container) {
         panel.hideImmediate();
       }
     }
-    this.panels.clear();
 
-    // Also remove any orphaned panels from DOM
-    const existingPanels = document.querySelectorAll('.cv-panel');
-    existingPanels.forEach(panel => {
-      panel.remove();
-    });
+    // Clear the panels map and remove orphaned panels from DOM
+    this.panels.clear();
+    this.cleanupOrphanedPanels();
   }
 
   // TODO: Assessment workflow methods will be added later
@@ -146,5 +136,4 @@ class ExtensionManager {
   // async showResults(assessmentData) { ... }
 }
 
-// Export the class for dynamic imports
 export { ExtensionManager };