filtering working

src/pages/homelab/index.astro

@@ -8,6 +8,11 @@ import { services } from "./services.ts";
 
 <Layout>
   <Fragment slot="head">
+    <script is:inline>
+      document.addEventListener('alpine:init', () => {
+        // No global store needed
+      });
+    </script>
     <title>{GLOBAL.username} • {GLOBAL.shortDescription}</title>
     <meta name="description" content={GLOBAL.longDescription} />
     <meta property="og:title" content={`${GLOBAL.username} • ${GLOBAL.shortDescription}`} />
@@ -24,12 +29,45 @@ import { services } from "./services.ts";
   </Fragment>
 
   <Section class="my-8">
+    <div x-data="{ searchQuery: '' }" x-init="
+      $watch('searchQuery', (query) => {
+        query = query.toLowerCase();
+        document.querySelectorAll('.app-card').forEach(card => {
+          const appName = card.getAttribute('data-app-name').toLowerCase();
+          if (query === '' || appName.includes(query)) {
+            card.style.display = '';
+          } else {
+            card.style.display = 'none';
+          }
+        });
+      })
+    ">
       <div class="flex items-center gap-4 pt-8 pb-4">
         <h1 class="font-display text-3xl sm:text-4xl leading-loose">Homelab</h1>
       </div>
       
+      <div class="mb-6">
+        <div class="relative">
+          <input 
+            type="text" 
+            x-model="searchQuery" 
+            placeholder="Search apps..." 
+            class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 zag-bg zag-text"
+          />
+          <button 
+            x-show="searchQuery" 
+            @click="searchQuery = ''" 
+            class="absolute right-3 top-1/2 transform -translate-y-1/2"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
       {Object.entries(services).map(([category, apps], index) => (
-      <div class="mb-8" x-data="{ open: true }" key={index}>
+        <div class="mb-8" x-data="{ open: true }">
           <button
             @click="open = !open"
             class="text-xl font-semibold mb-4 w-full text-left flex items-center justify-between"
@@ -50,13 +88,14 @@ import { services } from "./services.ts";
             <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
               {apps.length > 0 ? (
                 apps.map(app => (
+                  <div class="app-card" data-app-name={app.name.toLowerCase()}>
                     <ServiceCard
                       name={app.name}
                       href={app.link}
                       img={app.icon}
                       alt={app.name}
-                  key={app.link}
                     />
+                  </div>
                 ))
               ) : (
                 <p class="text-center col-span-full">Coming soon...</p>
@@ -66,5 +105,6 @@ import { services } from "./services.ts";
         </div>
       ))}
     
+    </div>
   </Section>
 </Layout>