🐞 fix: Format prompt text

app/public/scripts/fetch-prompts.js

@@ -9,10 +9,24 @@ const supabase = createClient(supabaseUrl, supabaseKey);
 const promptContainer = document.getElementById('prompt-container');
 const errorBox = document.getElementById('prompt-error');
 
+const formatDate = (dateStr) => {
+if (!dateStr) return "–";
+  const date = new Date(dateStr);
+  return isNaN(date.getTime())
+    ? "Invalid date"
+    : date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+      });
+};
+
 function renderPromptCard(prompt) {
   const tagSpans = (prompt.tags ?? []).map(tag =>
     `<span class="text-sm bg-gray-200 text-gray-800 px-2 py-1 pt-0 rounded">${tag}</span>`
   ).join('');
+  const escapedDescription = (prompt.description ?? '').replace(/\n/g, '<br />');
+  const notes = prompt.notes ?? '';
 
   return `
     <div class="prompt-card border border-gray-400 rounded p-4 bg-gray-700 text-gray-200 shadow-sm flex flex-col gap-2 min-h-[12rem]"
@@ -25,8 +39,23 @@ function renderPromptCard(prompt) {
             : 'bg-green-100 text-green-700'
         }">${prompt.type}</span>
       </div>
-      <p class="text-md">${prompt.notes ?? ''}</p>
+      <p class="text-md">${notes}</p>
       <div class="flex flex-wrap gap-2 mt-2">${tagSpans}</div>
+      <details name="prompt-details">
+        <summary class="cursor-pointer font-semibold mt-2 text-lg">View Details</summary>
+        <div class="text-md border-t mt-2 pt-2">
+          <div class="flex justify-between mx-2 items-center border-b border-b-gray-400 pb-2 mb-2">
+            <h3 class="text-xl font-semibold">Prompt</h3>
+
+            <a class="bg-green-600 text-white px-2 py-0 rounded text-sm hover:bg-green-700 transition-colors duration-300" href="/edit?slug=${prompt.slug}">Edit</a>
+          </div>
+
+          <p class="my-2 px-2 text-balance">${escapedDescription}</p>
+
+          <hr class="my-2" />
+          <p class="text-sm"><strong>Created:</strong> ${formatDate(prompt.created_at)} &bull; <strong>Updated:</strong> ${formatDate(prompt.updated_at)}</p>
+        </div>
+      </details>
     </div>
   `;
 }