From f5f443abb81910210911b50bf9c9f16357168960 Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Tue, 29 Jul 2025 10:02:24 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=20Format=20prompt=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/public/scripts/fetch-prompts.js | 31 ++++++++++++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/app/public/scripts/fetch-prompts.js b/app/public/scripts/fetch-prompts.js
index 72573da..8936f84 100644
--- a/app/public/scripts/fetch-prompts.js
+++ b/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>
   `;
 }