✨feature: Filtered card list, connected to Supabase

src/pages/index.astro

@@ -2,18 +2,31 @@
 import MainLayout from '../layouts/MainLayout.astro';
 import Sidebar from '../components/Sidebar.astro';
 import SearchBar from '../components/SearchBar.astro';
-import PromptList from '../components/PromptList.astro';
+// import PromptList from '../components/PromptList.astro';
+import FilteredPromptList from '../components/FilteredPromptList.astro';
+import { supabase } from '../lib/supabase';
+
+const { data: prompts, error } = await supabase
+  .from('prompts')
+  .select('*')
+  .order('created_at', { ascending: false });
+
+const allTags = Array.from(
+  new Set(
+    prompts?.flatMap((p) => p.tags ?? [])
+  )
+).sort();
 ---
 
 <MainLayout>
   <div class="flex h-screen bg-gray-800 text-gray-100">
-    <Sidebar />
+    <SearchBar allTags={allTags} />
 
     <div class="flex-1 flex flex-col overflow-hidden">
-      <SearchBar />
-
       <main class="flex-1 overflow-y-auto p-4">
-        <PromptList />
+        {error
+        ? <p class="text-red-500">Supabase error: {error.message}</p>
+        : <FilteredPromptList prompts={prompts} />}
       </main>
     </div>
   </div>

src/pages/ping.endtype.ts

@@ -0,0 +1,5 @@
+export const GET = async () => {
+  return new Response("pong", {
+    headers: { 'Content-Type': 'text/plain' }
+  });
+};

src/pages/prompt-details/test.endpoint.ts

@@ -0,0 +1,48 @@
+import type { APIRoute } from 'astro';
+
+const data = {
+  "summarize-document": {
+    createdAt: "2025-06-01",
+    updatedAt: "2025-07-10",
+    notes: "Summarizes input using GPT-4 with smart chunking."
+  },
+  "translate-text": {
+    createdAt: "2025-05-15",
+    updatedAt: "2025-06-22",
+    notes: "Uses multilingual model for more accurate translation."
+  },
+  "generate-code": {
+    createdAt: "2025-06-05",
+    updatedAt: "2025-07-01",
+    notes: "Includes language detection and function wrapping."
+  }
+};
+
+export const GET: APIRoute = async ({ params, request }) => {
+  console.log("HTMX request received for:", request.url);
+  console.log("Slug param is:", params.slug);
+
+  const slug = params.slug!;
+  const prompt = data[slug as keyof typeof data];
+
+  if (!prompt) {
+    return new Response(`<details open><summary>View Details</summary><p>Prompt not found.</p></details>`, {
+      status: 404,
+      headers: { 'Content-Type': 'text/html' }
+    });
+  }
+
+  const html = `
+    <details name="prompt-details" open>
+      <summary class="cursor-pointer font-semibold mt-2">View Details</summary>
+      <div class="text-sm text-gray-800 border-t mt-2 pt-2">
+        <p><strong>Created:</strong> ${prompt.createdAt} &bull; <strong>Updated:</strong> ${prompt.updatedAt}</p>
+        <p class="mt-2">📝 ${prompt.notes}</p>
+      </div>
+    </details>
+  `;
+
+  return new Response(html, {
+    headers: { 'Content-Type': 'text/html' }
+  });
+};