UI overhaul

src/components/TargetedScenarios.astro

@@ -68,40 +68,59 @@ const displayedScenarios = scenarios.slice(0, maxDisplayed);
 <script define:vars={{ allScenarios: scenarios, maxDisplay: maxDisplayed }}>
   let showingAllScenarios = false;
 
-  // Apply scenario search using existing search functionality
+
   window.applyScenarioSearch = function(scenarioId) {
     console.log(`Applying scenario search: ${scenarioId}`);
     
-    // Find the main search input (existing)
+    const clickedChip = document.querySelector(`[data-scenario-id="${scenarioId}"]`);
     const mainSearchInput = document.getElementById('search-input');
-    if (mainSearchInput) {
-      // Use scenario ID as search term (it should match tool tags)
-      mainSearchInput.value = scenarioId;
+    
+    if (!mainSearchInput) return;
+    
+    // Check if this scenario is already active (allow deselection)
+    if (clickedChip && clickedChip.classList.contains('active')) {
+      // Deselect: clear search and remove active state
+      mainSearchInput.value = '';
+      document.querySelectorAll('.suggestion-chip').forEach(chip => {
+        chip.classList.remove('active');
+      });
       
-      // Trigger existing search functionality
+      // Clear the targeted search input too
+      const targetedInput = document.getElementById('targeted-search-input');
+      if (targetedInput) {
+        targetedInput.value = '';
+      }
+      
+      // Trigger search to show all results
       const inputEvent = new Event('input', { bubbles: true });
       mainSearchInput.dispatchEvent(inputEvent);
       
-      // Switch to grid view
-      const gridToggle = document.querySelector('.view-toggle[data-view="grid"]');
-      if (gridToggle && !gridToggle.classList.contains('active')) {
-        gridToggle.click();
-      }
-      
-      // Scroll to results
-      setTimeout(() => {
-        const toolsGrid = document.getElementById('tools-grid');
-        if (toolsGrid) {
-          toolsGrid.scrollIntoView({ behavior: 'smooth', block: 'start' });
-        }
-      }, 200);
+      return;
+    }
+    
+    // Apply new search
+    mainSearchInput.value = scenarioId;
+    
+    // Trigger existing search functionality
+    const inputEvent = new Event('input', { bubbles: true });
+    mainSearchInput.dispatchEvent(inputEvent);
+    
+    // Switch to grid view
+    const gridToggle = document.querySelector('.view-toggle[data-view="grid"]');
+    if (gridToggle && !gridToggle.classList.contains('active')) {
+      gridToggle.click();
     }
     
     // Visual feedback
     document.querySelectorAll('.suggestion-chip').forEach(chip => {
       chip.classList.remove('active');
     });
-    document.querySelector(`[data-scenario-id="${scenarioId}"]`)?.classList.add('active');
+    if (clickedChip) {
+      clickedChip.classList.add('active');
+    }
+    
+    // Scroll to results with better positioning
+    window.scrollToElementById('tools-grid');
   };
 
   // Toggle showing all scenarios
@@ -149,18 +168,14 @@ const displayedScenarios = scenarios.slice(0, maxDisplayed);
       
       targetedInput.addEventListener('keydown', (e) => {
         if (e.key === 'Enter') {
-          e.preventDefault();
-          // Switch to grid view and scroll to results
-          const gridToggle = document.querySelector('.view-toggle[data-view="grid"]');
-          if (gridToggle) {
+            e.preventDefault();
+            // Switch to grid view and scroll to results
+            const gridToggle = document.querySelector('.view-toggle[data-view="grid"]');
+            if (gridToggle) {
             gridToggle.click();
-            setTimeout(() => {
-              const toolsGrid = document.getElementById('tools-grid');
-              if (toolsGrid) {
-                toolsGrid.scrollIntoView({ behavior: 'smooth' });
-              }
-            }, 100);
-          }
+            // Use consolidated scroll utility
+            window.scrollToElementById('tools-grid');
+            }
         }
       });
     }