fix the matrix

src/components/ToolFilters.astro

@@ -771,18 +771,35 @@ const sortedTags = Object.entries(tagFrequency)
       btn.addEventListener('click', () => {
         const view = btn.getAttribute('data-view');
         
+        // Update active states
         elements.viewToggles.forEach(b => {
           b.classList.toggle('active', b.getAttribute('data-view') === view);
         });
         
-        window.dispatchEvent(new CustomEvent('viewChanged', { detail: view }));
-        
-        if (view === 'hosted') {
-          const hosted = window.toolsData.filter(tool => isToolHosted(tool));        
-          window.dispatchEvent(new CustomEvent('toolsFiltered', { detail: hosted }));
+        // Call the global switchToView function
+        if (window.switchToView) {
+          window.switchToView(view);
         } else {
-          filterTools();
+          console.error('switchToView function not available');
         }
+        
+        // Dispatch view changed event  
+        window.dispatchEvent(new CustomEvent('viewChanged', { 
+          detail: view,
+          triggeredByButton: true 
+        }));
+        
+        // Handle filtering after view switch
+        setTimeout(() => {
+          if (view === 'matrix') {
+            // Ensure matrix gets populated by triggering filter
+            filterTools();
+          } else if (view === 'grid') {
+            // Standard filtering for grid view
+            filterTools();
+          }
+          // AI view doesn't need filtering from here
+        }, 100); // Slightly longer delay to ensure view switch completes
       });
     });
     

src/components/ToolMatrix.astro

@@ -772,19 +772,24 @@ domains.forEach((domain: any) => {
   window.addEventListener('viewChanged', (event) => {
     const view = event.detail;
     if (view === 'matrix') {
-      setTimeout(updateMatrixHighlighting, 100);
+      setTimeout(() => {
+        if (window.filterTools && typeof window.filterTools === 'function') {
+          window.filterTools();
+        } else {
+          const allTools = window.toolsData || [];
+          window.dispatchEvent(new CustomEvent('toolsFiltered', {
+            detail: {
+              tools: allTools,
+              semanticSearch: false
+            }
+          }));
+        }
+      }, 100);
     }
   });
 
   window.addEventListener('toolsFiltered', (event) => {
-    const currentView = document.querySelector('.view-toggle.active')?.getAttribute('data-view');
-    if (currentView === 'matrix') {
-      setTimeout(updateMatrixHighlighting, 50);
-    }
-  });
-
-  window.addEventListener('toolsFiltered', (event) => {
-    const filtered = event.detail;
+    const { tools: filtered, semanticSearch } = event.detail; // ✅ Correct destructuring
     const currentView = document.querySelector('.view-toggle.active')?.getAttribute('data-view');
     
     if (currentView === 'matrix') {
@@ -827,6 +832,7 @@ domains.forEach((domain: any) => {
                                 hasValidProjectUrl ? 'tool-chip-hosted' : 
                                 tool.license !== 'Proprietary' ? 'tool-chip-oss' : '';
                 chip.className = `tool-chip ${chipClass}`;
+                chip.setAttribute('data-tool-name', tool.name);
                 chip.setAttribute('title', `${tool.name}${tool.knowledgebase === true ? ' (KB verfügbar)' : ''}`);
                 chip.innerHTML = `${tool.name}${tool.knowledgebase === true ? '<span style="margin-left: 0.25rem; font-size: 0.6875rem;">📖</span>' : ''}`;
                 chip.onclick = () => window.showToolDetails(tool.name);