✨feature: Filtered card list, connected to Supabase

src/components/PromptCard.astro

@@ -1,12 +1,25 @@
 ---
 const {
+  slug,
   title,
   type,
   description,
   tags = [],
-  createdAt,
-  updatedAt
+  created_at,
+  updated_at
 } = Astro.props;
+
+const formatDate = (dateStr: string | undefined) => {
+  if (!dateStr) return "–";
+  const date = new Date(dateStr);
+  return isNaN(date.getTime())
+    ? "Invalid date"
+    : date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+      });
+};
 ---
 
 <div class="border rounded p-4 bg-gray-400 text-gray-800 shadow-sm flex flex-col gap-2">
@@ -22,12 +35,16 @@ const {
   <p class="text-sm text-gray-700">{description}</p>
 
   <div class="flex flex-wrap gap-2 mt-2">
-    {tags.map(tag => (
+    {tags.map((tag: string) => (
       <span class="text-xs bg-gray-200 text-gray-800 px-2 py-0.5 rounded">{tag}</span>
     ))}
   </div>
 
-  <div class="text-xs text-gray-800 mt-auto pt-2 border-t">
-    Created: {createdAt} • Updated: {updatedAt}
-  </div>
+  <details name="prompt-details">
+    <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> {formatDate(created_at)} &bull; <strong>Updated:</strong> {formatDate(updated_at)}</p>
+      <p class="mt-2">📝 Misc data, unused currently</p>
+    </div>
+  </details>
 </div>