From 20f0bf29bfda0a1f162805de642f1de08b52fd9a Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Tue, 22 Jul 2025 10:05:57 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feature:=20Set=20up=20post=20editing,?=
 =?UTF-8?q?=20modify=20add=20for=20proper=20sidebar.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PromptCard.astro               |   6 +-
 .../{Sidebar.astro => SidebarAdd.astro}       |   0
 src/components/SidebarEdit.astro              |  17 ++
 src/pages/add.astro                           |   6 +-
 src/pages/edit.astro                          | 156 ++++++++++++++++++
 5 files changed, 181 insertions(+), 4 deletions(-)
 rename src/components/{Sidebar.astro => SidebarAdd.astro} (100%)
 create mode 100644 src/components/SidebarEdit.astro
 create mode 100644 src/pages/edit.astro

diff --git a/src/components/PromptCard.astro b/src/components/PromptCard.astro
index b6bd4f2..db22a3a 100644
--- a/src/components/PromptCard.astro
+++ b/src/components/PromptCard.astro
@@ -44,7 +44,11 @@ const formatDate = (dateStr: string | undefined) => {
   <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">
-      <h3 class="text-xl font-semibold px-2">Prompt</h3>
+      <div class="flex justify-between items-center">
+        <h3 class="text-xl font-semibold px-2">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=${slug}`}>Edit</a>
+      </div>
       <p class="my-2 px-2 text-balance">{description}</p>
       <hr class="my-2" />
       <p class="text-sm"><strong>Created:</strong> {formatDate(created_at)} &bull; <strong>Updated:</strong> {formatDate(updated_at)}</p>
diff --git a/src/components/Sidebar.astro b/src/components/SidebarAdd.astro
similarity index 100%
rename from src/components/Sidebar.astro
rename to src/components/SidebarAdd.astro
diff --git a/src/components/SidebarEdit.astro b/src/components/SidebarEdit.astro
new file mode 100644
index 0000000..e6e4e89
--- /dev/null
+++ b/src/components/SidebarEdit.astro
@@ -0,0 +1,17 @@
+---
+// Sidebar.astro
+---
+
+<aside class="w-64 border-r h-full p-4 text-gray-100">
+  <h2 class="text-lg font-semibold mb-4">Edit a prompt</h2>
+
+  <p class="text-sm">Use the form to edit an AI prompt in the catalog.</p>
+
+  <!-- <p class="text-sm mt-2">Make sure to include a title, type, description, and any relevant tags.</p> -->
+
+  <!-- <p class="text-sm mt-2">You can also add notes for your own reference.</p> -->
+
+  <a href="/" id="home" class="block w-fit bg-green-600 text-white px-4 py-2 mt-4 rounded hover:bg-green-700 transition-colors duration-300">
+    Go Back
+  </a>
+</aside>
diff --git a/src/pages/add.astro b/src/pages/add.astro
index 70f8831..50c9a78 100644
--- a/src/pages/add.astro
+++ b/src/pages/add.astro
@@ -1,6 +1,6 @@
 ---
 import "../styles/global.css";
-import Sidebar from "../components/Sidebar.astro";
+import Sidebar from "../components/SidebarAdd.astro";
 
 const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL;
 const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
@@ -58,7 +58,7 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
 
             <div>
               <label for="description" class="block text-md font-semibold mb-1">Prompt</label>
-              <textarea name="description" id="description" rows="4" required class="border p-2 w-full rounded"></textarea>
+              <textarea name="description" id="description" rows="6" required class="border p-2 w-full rounded"></textarea>
             </div>
 
             <div>
@@ -66,7 +66,7 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
               <textarea name="notes" id="notes" rows="3" required class="border p-2 w-full rounded"></textarea>
             </div>
 
-            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">
+            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors duration-300 cursor-pointer">
               Add Prompt
             </button>
           </form>
diff --git a/src/pages/edit.astro b/src/pages/edit.astro
new file mode 100644
index 0000000..636a3b7
--- /dev/null
+++ b/src/pages/edit.astro
@@ -0,0 +1,156 @@
+---
+import "../styles/global.css";
+import Sidebar from "../components/SidebarEdit.astro";
+
+const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL;
+const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
+---
+
+<html lang="en">
+  <head>
+    <title>Prompt Catalog - Edit Prompt</title>
+  </head>
+
+  <body class="font-sans antialiased bg-gray-800 text-gray-100">
+    <div
+      id="supabase-env"
+      data-url={supabaseUrl}
+      data-key={supabaseKey}
+      hidden
+    ></div>
+
+    <div class="border-b p-4">
+      <h1 class="text-2xl font-bold">Prompt Catalog - Add New Prompt</h1>
+      <p class="text-sm mt-1">Add a new AI prompt to the catalog</p>
+    </div>
+
+    <div class="flex h-screen">
+      <Sidebar />
+
+      <div class="flex-1 flex flex-col overflow-hidden">
+        <main class="flex-1 overflow-y-auto p-4">
+          <div id="edit-root">Loading...</div>
+        </main>
+      </div>
+    </div>
+
+    <script type="module">
+      import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
+
+      const env = document.getElementById('supabase-env').dataset;
+      const supabase = createClient(env.url, env.key);
+      const slug = new URLSearchParams(window.location.search).get('slug');
+
+      const root = document.getElementById('edit-root');
+
+      if (!slug) {
+        root.innerHTML = `<p class="text-red-600 font-medium">❌ No slug provided.</p>`;
+      } else {
+        const { data, error } = await supabase
+          .from('prompts')
+          .select('*')
+          .eq('slug', slug)
+          .limit(1);
+
+        const prompt = data?.[0];
+
+        if (error || !prompt) {
+          root.innerHTML = `<p class="text-red-600 font-medium">❌ Prompt not found or error loading it.</p>`;
+        } else {
+          root.innerHTML = `
+            <form id="edit-form" class="space-y-4">
+              <input type="hidden" name="slug" value="${prompt.slug}" />
+
+              <div>
+                <label for="title"  class="block text-md font-semibold mb-1">Title</label>
+                <input name="title" id="title" value="${prompt.title}" required class="border p-2 w-full rounded" />
+              </div>
+
+              <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <label for="type"  class="block text-md font-semibold mb-1">Type</label>
+                  <select name="type" id="type" required class="border p-2 w-full rounded">
+                    <option value="System" ${prompt.type === 'System' ? 'selected' : ''}>System</option>
+                    <option value="Task" ${prompt.type === 'Task' ? 'selected' : ''}>Task</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label for="tags"  class="block text-md font-semibold mb-1">Tags (comma-separated)</label>
+                  <input name="tags" id="tags" value="${(prompt.tags ?? []).join(', ')}" class="border p-2 pt-1 w-full rounded" />
+                </div>
+              </div>
+
+              <div>
+                <label for="description"  class="block text-md font-semibold mb-1">Prompt</label>
+                <textarea name="description" id="description" rows="6" required class="border p-2 w-full rounded">${prompt.description}</textarea>
+              </div>
+
+              <div>
+                <label for="notes"  class="block text-md font-semibold mb-1">Description</label>
+                <textarea name="notes" id="notes" rows="3" class="border p-2 w-full rounded">${prompt.notes ?? ''}</textarea>
+              </div>
+
+              <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors duration-300 cursor-pointer">
+                Save Changes
+              </button>
+
+              <div class="flex justify-between items-center pt-4 border-t mt-6">
+                <span class="text-lg text-red-400 font-bold">Be careful!  Deletion is permanent.</span>
+                <button
+                  id="delete-btn"
+                  type="button"
+                  class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition-colors duration-300 cursor-pointer"
+                >
+                  Delete Prompt
+                </button>
+              </div>
+            </form>
+
+            <div id="success" class="text-green-600 mt-4 hidden">Prompt Updated.</div>
+            <div id="error" class="text-red-600 mt-4 hidden"></div>
+          `;
+
+          document.getElementById('edit-form').addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const formData = new FormData(e.target);
+            const payload = {
+              title: formData.get('title'),
+              type: formData.get('type'),
+              description: formData.get('description'),
+              tags: formData.get('tags')?.split(',').map(t => t.trim()).filter(Boolean),
+              notes: formData.get('notes')
+            };
+
+            const { error: updateError } = await supabase
+              .from('prompts')
+              .update(payload)
+              .eq('slug', slug);
+
+            document.getElementById('success').style.display = updateError ? 'none' : 'block';
+            document.getElementById('error').innerText = updateError?.message || '';
+            document.getElementById('error').style.display = updateError ? 'block' : 'none';
+          });
+
+          document.getElementById('delete-btn').addEventListener('click', async () => {
+            const confirmed = window.confirm("Are you sure you want to delete this prompt? This cannot be undone.");
+
+            if (!confirmed) return;
+
+            const { error: deleteError } = await supabase
+              .from('prompts')
+              .delete()
+              .eq('slug', slug);
+
+            if (deleteError) {
+              document.getElementById('error').innerText = deleteError.message;
+              document.getElementById('error').style.display = 'block';
+            } else {
+              window.location.href = '/';
+            }
+          });
+        }
+      }
+    </script>
+  </body>
+</html>