Hide Service Categories lacking search results

src/pages/homelab/index.astro

@@ -32,6 +32,8 @@ import { services } from "./services.ts";
     <div x-data="{ searchQuery: '' }" x-init="
       $watch('searchQuery', (query) => {
         query = query.toLowerCase();
+        
+        // First, process all app cards
         document.querySelectorAll('.app-card').forEach(card => {
           const appName = card.getAttribute('data-app-name').toLowerCase();
           if (query === '' || appName.includes(query)) {
@@ -40,6 +42,21 @@ import { services } from "./services.ts";
             card.style.display = 'none';
           }
         });
+        
+        // Then, check each category to see if it has any visible apps
+        document.querySelectorAll('.category-section').forEach(category => {
+          const categoryName = category.getAttribute('data-category');
+          const hasVisibleApps = Array.from(
+            category.querySelectorAll('.app-card')
+          ).some(card => card.style.display !== 'none');
+          
+          // Show/hide the category based on whether it has visible apps
+          if (query === '' || hasVisibleApps) {
+            category.style.display = '';
+          } else {
+            category.style.display = 'none';
+          }
+        });
       })
     ">
       <div class="flex items-center gap-4 pt-8 pb-4">
@@ -67,7 +84,7 @@ import { services } from "./services.ts";
       </div>
 
       {Object.entries(services).map(([category, apps], index) => (
-        <div class="mb-8" x-data="{ open: true }">
+        <div class="mb-8 category-section" data-category={category} x-data="{ open: true }">
           <button
             @click="open = !open"
             class="text-xl font-semibold mb-4 w-full text-left flex items-center justify-between"