From a28ac0b16a7ea5a9ab98cb338b1d9ffb506033ca Mon Sep 17 00:00:00 2001
From: Keith Solomon <keith@vincentdesign.ca>
Date: Sun, 27 Jul 2025 11:07:16 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20fix:=20Update=20templates=20to?=
 =?UTF-8?q?=20use=20MainLayout=20and=20set=20page=20title=20via=20paramete?=
 =?UTF-8?q?r?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/MainLayout.astro |   4 +-
 src/pages/add.astro          | 475 +++++++++++++++++------------------
 src/pages/edit.astro         | 236 +++++++++--------
 src/pages/index.astro        |   6 +-
 4 files changed, 355 insertions(+), 366 deletions(-)
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index d73d9b1..ddbf2ce 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -2,14 +2,14 @@
 // MainLayout.astro
 import "../styles/global.css";
 
-const { children } = Astro.props;
+const page = Astro.props.page;
 ---
 
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Prompt Catalog</title>
+    <title>Prompt Catalog - {page}</title>
   </head>
 
   <body class="font-sans antialiased bg-gray-800 text-gray-100">
diff --git a/src/pages/add.astro b/src/pages/add.astro
index b12c18f..85919a9 100644
--- a/src/pages/add.astro
+++ b/src/pages/add.astro
@@ -1,279 +1,274 @@
 ---
-import "../styles/global.css";
+import MainLayout from '../layouts/MainLayout.astro';
 import Sidebar from "../components/SidebarAdd.astro";
 
 const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL;
 const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
 ---
 
-<html>
-  <head>
-    <title>Prompt Catalog - Add New Prompt</title>
-  </head>
+<MainLayout page="Add Prompt">
+  <div
+    id="supabase-env"
+    data-url={supabaseUrl}
+    data-key={supabaseKey}
+    hidden
+  ></div>
 
-  <body class="font-sans antialiased bg-gray-800 text-gray-100">
-    <div
-      id="supabase-env"
-      data-url={supabaseUrl}
-      data-key={supabaseKey}
-      hidden
-    ></div>
+  <header class="border-b p-4">
+    <h1 class="text-2xl font-bold"><a href="/">Prompt Catalog - Add New Prompt</a></h1>
+    <p class="text-sm mt-1">Add or import new AI prompts to the catalog</p>
+  </header>
 
-    <header class="border-b p-4">
-      <h1 class="text-2xl font-bold">Prompt Catalog - Add New Prompt</h1>
-      <p class="text-sm mt-1">Add or import new AI prompts to the catalog</p>
-    </header>
+  <main class="flex">
+    <Sidebar />
 
-    <main class="flex">
-      <Sidebar />
-
-      <div class="border-l flex-1 flex flex-col overflow-hidden">
-        <div class="flex-1 overflow-y-auto p-4">
-          <div id="success" class="bg-green-100 text-green-700 p-4 rounded mb-4 hidden">
-            Prompt added successfully!
-          </div>
-          <div id="error" class="bg-red-100 text-red-700 p-4 rounded mb-4 hidden"></div>
-
-          <form id="add-form" class="space-y-4">
-            <div>
-              <label for="title" class="block text-md font-semibold mb-1">Title<span class="text-red-600">*</span></label>
-              <input name="title" id="title" required class="border p-2 w-full rounded" />
-              <input type="hidden" name="slug" id="slug" />
-            </div>
-
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-              <div>
-                <label for="type" class="block text-md font-semibold mb-1">Type<span class="text-red-600">*</span></label>
-                <select name="type" id="type" required class="border border-gray-100 p-2 rounded w-full bg-gray-800">
-                  <option value="System">System</option>
-                  <option value="Task">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" class="border p-2 pt-1 w-full rounded" />
-              </div>
-            </div>
-
-            <div>
-              <label for="description" class="block text-md font-semibold mb-1">Prompt<span class="text-red-600">*</span></label>
-              <textarea name="description" id="description" rows="6" required class="border p-2 w-full rounded"></textarea>
-            </div>
-
-            <div>
-              <label for="notes" class="block text-md font-semibold mb-1">Description<span class="text-red-600">*</span></label>
-              <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 hover:bg-blue-700 transition-colors duration-300 cursor-pointer">
-              Add Prompt
-            </button>
-
-            <hr class="my-6 border-gray-600" />
-
-            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-              <div>
-                <h2 class="text-lg font-semibold mb-2">Import Prompts</h2>
-                <p class="text-sm text-gray-400 mb-2">Upload a JSON file to import prompts.</p>
-
-                <label for="importFile" class="block text-md font-semibold mb-1">Import Prompts from JSON</label>
-                <input type="file" id="importFile" accept="application/json" class="border p-2 w-full rounded bg-gray-800 text-white" />
-                <button type="button" id="importBtn" class="mt-2 bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition-colors duration-300 cursor-pointer">
-                  Import Prompts
-                </button>
-              </div>
-
-              <div id="export-section">
-                <h2 class="text-lg font-semibold mb-2">Export Prompts</h2>
-                <p class="text-sm text-gray-400 mb-2">Select prompts to export, or leave all unchecked to export everything.</p>
-
-                <label class="block text-md font-semibold mb-1">Export Prompts to JSON</label>
-                <div id="prompt-list" class="max-h-64 overflow-y-auto mb-4 border py-1 pb-2 px-3 rounded flex flex-wrap gap-x-4 gap-y-1"></div>
-
-                <button type="button" id="exportBtn" class="bg-yellow-600 text-white px-4 py-2 rounded hover:bg-yellow-700 transition-colors duration-300 cursor-pointer">
-                  Export All Prompts
-                </button>
-              </div>
-            </div>
-          </form>
+    <div class="border-l flex-1 flex flex-col overflow-hidden">
+      <div class="flex-1 overflow-y-auto p-4">
+        <div id="success" class="bg-green-100 text-green-700 p-4 rounded mb-4 hidden">
+          Prompt added successfully!
         </div>
+        <div id="error" class="bg-red-100 text-red-700 p-4 rounded mb-4 hidden"></div>
+
+        <form id="add-form" class="space-y-4">
+          <div>
+            <label for="title" class="block text-md font-semibold mb-1">Title<span class="text-red-600">*</span></label>
+            <input name="title" id="title" required class="border p-2 w-full rounded" />
+            <input type="hidden" name="slug" id="slug" />
+          </div>
+
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <div>
+              <label for="type" class="block text-md font-semibold mb-1">Type<span class="text-red-600">*</span></label>
+              <select name="type" id="type" required class="border border-gray-100 p-2 rounded w-full bg-gray-800">
+                <option value="System">System</option>
+                <option value="Task">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" class="border p-2 pt-1 w-full rounded" />
+            </div>
+          </div>
+
+          <div>
+            <label for="description" class="block text-md font-semibold mb-1">Prompt<span class="text-red-600">*</span></label>
+            <textarea name="description" id="description" rows="6" required class="border p-2 w-full rounded"></textarea>
+          </div>
+
+          <div>
+            <label for="notes" class="block text-md font-semibold mb-1">Description<span class="text-red-600">*</span></label>
+            <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 hover:bg-blue-700 transition-colors duration-300 cursor-pointer">
+            Add Prompt
+          </button>
+
+          <hr class="my-6 border-gray-600" />
+
+          <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            <div>
+              <h2 class="text-lg font-semibold mb-2">Import Prompts</h2>
+              <p class="text-sm text-gray-400 mb-2">Upload a JSON file to import prompts.</p>
+
+              <label for="importFile" class="block text-md font-semibold mb-1">Import Prompts from JSON</label>
+              <input type="file" id="importFile" accept="application/json" class="border p-2 w-full rounded bg-gray-800 text-white" />
+              <button type="button" id="importBtn" class="mt-2 bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition-colors duration-300 cursor-pointer">
+                Import Prompts
+              </button>
+            </div>
+
+            <div id="export-section">
+              <h2 class="text-lg font-semibold mb-2">Export Prompts</h2>
+              <p class="text-sm text-gray-400 mb-2">Select prompts to export, or leave all unchecked to export everything.</p>
+
+              <label class="block text-md font-semibold mb-1">Export Prompts to JSON</label>
+              <div id="prompt-list" class="max-h-64 overflow-y-auto mb-4 border py-1 pb-2 px-3 rounded flex flex-wrap gap-x-4 gap-y-1"></div>
+
+              <button type="button" id="exportBtn" class="bg-yellow-600 text-white px-4 py-2 rounded hover:bg-yellow-700 transition-colors duration-300 cursor-pointer">
+                Export All Prompts
+              </button>
+            </div>
+          </div>
+        </form>
       </div>
-    </main>
+    </div>
+  </main>
 
-    <footer class="border-t p-4 text-center text-sm">
-      &copy; {new Date().getFullYear()} Prompt Catalog
-    </footer>
+  <footer class="border-t p-4 text-center text-sm">
+    &copy; {new Date().getFullYear()} Prompt Catalog
+  </footer>
 
-    <script type="module">
-      import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
+  <script type="module">
+    import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
 
-      const SUPABASE_URL = document.getElementById('supabase-env').dataset.url;
-      const SUPABASE_ANON_KEY = document.getElementById('supabase-env').dataset.key;
+    const SUPABASE_URL = document.getElementById('supabase-env').dataset.url;
+    const SUPABASE_ANON_KEY = document.getElementById('supabase-env').dataset.key;
 
-      const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+    const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
 
-      const form = document.getElementById('add-form');
-      const importBtn = document.getElementById('importBtn');
-      const exportBtn = document.getElementById('exportBtn');
-      const successBox = document.getElementById('success');
-      const errorBox = document.getElementById('error');
+    const form = document.getElementById('add-form');
+    const importBtn = document.getElementById('importBtn');
+    const exportBtn = document.getElementById('exportBtn');
+    const successBox = document.getElementById('success');
+    const errorBox = document.getElementById('error');
 
-      async function loadPromptCheckboxes() {
-        const promptList = document.getElementById('prompt-list');
-        const { data, error } = await supabase.from('prompts').select('id, title');
+    async function loadPromptCheckboxes() {
+      const promptList = document.getElementById('prompt-list');
+      const { data, error } = await supabase.from('prompts').select('id, title');
 
-        if (error) {
-          promptList.innerHTML = `<p class="text-red-400">Failed to load prompts: ${error.message}</p>`;
-          return;
-        }
-
-        promptList.innerHTML = data
-          .map(
-            prompt => `
-            <label class="block mb-0">
-              <input type="checkbox" value="${prompt.id}" class="mr-0" />
-              ${prompt.title}
-            </label>`
-          )
-          .join('');
-
-        // After rendering, attach change listeners to checkboxes
-        const checkboxes = Array.from(document.querySelectorAll('#prompt-list input[type="checkbox"]'));
-        checkboxes.forEach(cb => cb.addEventListener('change', updateExportBtnText));
-        updateExportBtnText();
+      if (error) {
+        promptList.innerHTML = `<p class="text-red-400">Failed to load prompts: ${error.message}</p>`;
+        return;
       }
 
-      // Load checkboxes on DOM load
-      loadPromptCheckboxes();
+      promptList.innerHTML = data
+        .map(
+          prompt => `
+          <label class="block mb-0">
+            <input type="checkbox" value="${prompt.id}" class="mr-0" />
+            ${prompt.title}
+          </label>`
+        )
+        .join('');
 
-      function updateExportBtnText() {
-        const checkboxes = Array.from(document.querySelectorAll('#prompt-list input[type="checkbox"]'));
-        const checkedCount = checkboxes.filter(cb => cb.checked).length;
+      // After rendering, attach change listeners to checkboxes
+      const checkboxes = Array.from(document.querySelectorAll('#prompt-list input[type="checkbox"]'));
+      checkboxes.forEach(cb => cb.addEventListener('change', updateExportBtnText));
+      updateExportBtnText();
+    }
 
-        exportBtn.textContent = checkedCount > 0 ? 'Export Selected Prompts' : 'Export All Prompts';
-      }
+    // Load checkboxes on DOM load
+    loadPromptCheckboxes();
 
-      document.addEventListener('DOMContentLoaded', () => {
-        document.getElementById('title').addEventListener('input', (e) => {
-          const value = e.target.value
-            .toLowerCase()
-            .replace(/[^\w\s-]/g, '')
-            .replace(/\s+/g, '-')
-            .trim();
-          document.getElementById('slug').value = value;
-        });
+    function updateExportBtnText() {
+      const checkboxes = Array.from(document.querySelectorAll('#prompt-list input[type="checkbox"]'));
+      const checkedCount = checkboxes.filter(cb => cb.checked).length;
 
-        form.addEventListener('submit', async (e) => {
-          e.preventDefault();
+      exportBtn.textContent = checkedCount > 0 ? 'Export Selected Prompts' : 'Export All Prompts';
+    }
 
-          successBox.style.display = 'none';
-          errorBox.style.display = 'none';
-
-          const formData = new FormData(form);
-          const payload = {
-            title: formData.get('title'),
-            slug: formData.get('slug'),
-            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 } = await supabase.from('prompts').insert([payload]);
-
-          if (error) {
-            errorBox.innerText = error.message;
-            errorBox.style.display = 'block';
-          } else {
-            successBox.style.display = 'block';
-            form.reset();
-          }
-        });
+    document.addEventListener('DOMContentLoaded', () => {
+      document.getElementById('title').addEventListener('input', (e) => {
+        const value = e.target.value
+          .toLowerCase()
+          .replace(/[^\w\s-]/g, '')
+          .replace(/\s+/g, '-')
+          .trim();
+        document.getElementById('slug').value = value;
       });
 
-      importBtn.addEventListener('click', async () => {
-        const fileInput = document.getElementById('importFile');
-        const file = fileInput.files[0];
-
-        if (!file) {
-          alert('Please select a JSON file.');
-          return;
-        }
-
-        const successBox = document.getElementById('success');
-        const errorBox = document.getElementById('error');
-
-        try {
-          const text = await file.text();
-          const prompts = JSON.parse(text);
-
-          const formatted = prompts.map(p => ({
-            type: p.type.charAt(0).toUpperCase() + p.type.slice(1), // normalize to "System"/"Task"
-            title: p.title,
-            description: p.description,
-            tags: p.tags.replace(/[{}"]/g, '').split(',').map(t => t.trim()), // parse tag string
-            notes: p.notes,
-            slug: p.title
-              .toLowerCase()
-              .replace(/[^\w\s-]/g, '')
-              .replace(/\s+/g, '-')
-              .trim()
-          }));
-
-          const { error } = await supabase.from('prompts').insert(formatted);
-
-          if (error) {
-            errorBox.innerText = `Import failed: ${error.message}`;
-            errorBox.style.display = 'block';
-          } else {
-            successBox.innerText = 'Prompts imported successfully!';
-            successBox.style.display = 'block';
-            fileInput.value = '';
-          }
-        } catch (err) {
-          errorBox.innerText = `Error: ${err.message}`;
-          errorBox.style.display = 'block';
-        }
-      });
-
-      exportBtn.addEventListener('click', async () => {
-        const selectedIds = checkboxes.filter(cb => cb.checked).map(cb => cb.value);
-
-        const { data, error } = selectedIds.length > 0
-          ? await supabase.from('prompts').select('*').in('id', selectedIds)
-          : await supabase.from('prompts').select('*');
+      form.addEventListener('submit', async (e) => {
+        e.preventDefault();
 
         successBox.style.display = 'none';
         errorBox.style.display = 'none';
 
-        if (error) {
-          errorBox.innerText = `Export failed: ${error.message}`;
-          errorBox.style.display = 'block';
-          return;
-        }
+        const formData = new FormData(form);
+        const payload = {
+          title: formData.get('title'),
+          slug: formData.get('slug'),
+          type: formData.get('type'),
+          description: formData.get('description'),
+          tags: formData.get('tags')?.split(',').map(t => t.trim()).filter(Boolean),
+          notes: formData.get('notes')
+        };
 
-        const output = data.map(p => ({
-          id: p.id,
-          type: p.type.toLowerCase(),
+        const { error } = await supabase.from('prompts').insert([payload]);
+
+        if (error) {
+          errorBox.innerText = error.message;
+          errorBox.style.display = 'block';
+        } else {
+          successBox.style.display = 'block';
+          form.reset();
+        }
+      });
+    });
+
+    importBtn.addEventListener('click', async () => {
+      const fileInput = document.getElementById('importFile');
+      const file = fileInput.files[0];
+
+      if (!file) {
+        alert('Please select a JSON file.');
+        return;
+      }
+
+      const successBox = document.getElementById('success');
+      const errorBox = document.getElementById('error');
+
+      try {
+        const text = await file.text();
+        const prompts = JSON.parse(text);
+
+        const formatted = prompts.map(p => ({
+          type: p.type.charAt(0).toUpperCase() + p.type.slice(1), // normalize to "System"/"Task"
           title: p.title,
           description: p.description,
-          tags: `{${(p.tags || []).join(',')}}`,
-          createdat: p.createdat,
-          notes: p.notes || ''
+          tags: p.tags.replace(/[{}"]/g, '').split(',').map(t => t.trim()), // parse tag string
+          notes: p.notes,
+          slug: p.title
+            .toLowerCase()
+            .replace(/[^\w\s-]/g, '')
+            .replace(/\s+/g, '-')
+            .trim()
         }));
 
-        const blob = new Blob([JSON.stringify(output, null, 2)], {
-          type: 'application/json'
-        });
+        const { error } = await supabase.from('prompts').insert(formatted);
 
-        const url = URL.createObjectURL(blob);
-        const link = document.createElement('a');
-        link.href = url;
-        link.download = selectedIds.length > 0 ? 'selected-prompts.json' : 'all-prompts.json';
-        link.click();
-        URL.revokeObjectURL(url);
+        if (error) {
+          errorBox.innerText = `Import failed: ${error.message}`;
+          errorBox.style.display = 'block';
+        } else {
+          successBox.innerText = 'Prompts imported successfully!';
+          successBox.style.display = 'block';
+          fileInput.value = '';
+        }
+      } catch (err) {
+        errorBox.innerText = `Error: ${err.message}`;
+        errorBox.style.display = 'block';
+      }
+    });
+
+    exportBtn.addEventListener('click', async () => {
+      const checkboxes = Array.from(document.querySelectorAll('#prompt-list input[type="checkbox"]'));
+      const selectedIds = checkboxes.filter(cb => cb.checked).map(cb => cb.value);
+
+      const { data, error } = selectedIds.length > 0
+        ? await supabase.from('prompts').select('*').in('id', selectedIds)
+        : await supabase.from('prompts').select('*');
+
+      successBox.style.display = 'none';
+      errorBox.style.display = 'none';
+
+      if (error) {
+        errorBox.innerText = `Export failed: ${error.message}`;
+        errorBox.style.display = 'block';
+        return;
+      }
+
+      const output = data.map(p => ({
+        id: p.id,
+        type: p.type.toLowerCase(),
+        title: p.title,
+        description: p.description,
+        tags: `{${(p.tags || []).join(',')}}`,
+        createdat: p.createdat,
+        notes: p.notes || ''
+      }));
+
+      const blob = new Blob([JSON.stringify(output, null, 2)], {
+        type: 'application/json'
       });
-    </script>
-  </body>
-</html>
+
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = selectedIds.length > 0 ? 'selected-prompts.json' : 'all-prompts.json';
+      link.click();
+      URL.revokeObjectURL(url);
+    });
+  </script>
+</MainLayout>
diff --git a/src/pages/edit.astro b/src/pages/edit.astro
index ba20cf6..af23999 100644
--- a/src/pages/edit.astro
+++ b/src/pages/edit.astro
@@ -1,160 +1,154 @@
 ---
-import "../styles/global.css";
+import MainLayout from '../layouts/MainLayout.astro';
 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
+<MainLayout page="Edit Prompt">
+  <div
       id="supabase-env"
       data-url={supabaseUrl}
       data-key={supabaseKey}
       hidden
-    ></div>
+  ></div>
 
-    <header 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>
-    </header>
+  <header class="border-b p-4">
+    <h1 class="text-2xl font-bold"><a href="/">Prompt Catalog - Edit Prompt</a></h1>
+    <p class="text-sm mt-1">Edit an existing AI prompt in the catalog</p>
+  </header>
 
-    <main class="flex">
-      <Sidebar />
+  <main class="flex">
+    <Sidebar />
 
-      <div class="border-l flex-1 flex flex-col overflow-hidden">
-        <main class="flex-1 overflow-y-auto p-4">
-          <div id="edit-root">Loading...</div>
-        </main>
-      </div>
-    </main>
+    <div class="border-l flex-1 flex flex-col overflow-hidden">
+      <main class="flex-1 overflow-y-auto p-4">
+        <div id="edit-root">Loading...</div>
+      </main>
+    </div>
+  </main>
 
-    <footer class="border-t p-4 text-center text-sm">
-      &copy; {new Date().getFullYear()} Prompt Catalog
-    </footer>
+  <footer class="border-t p-4 text-center text-sm">
+    &copy; {new Date().getFullYear()} Prompt Catalog
+  </footer>
 
-    <script type="module">
-      import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
+  <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 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');
+    const root = document.getElementById('edit-root');
 
-      if (!slug) {
-        root.innerHTML = `<p class="text-red-600 font-medium">❌ No slug provided.</p>`;
+    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 {
-        const { data, error } = await supabase
-          .from('prompts')
-          .select('*')
-          .eq('slug', slug)
-          .limit(1);
+        root.innerHTML = `
+          <form id="edit-form" class="space-y-4">
+            <input type="hidden" name="slug" value="${prompt.slug}" />
 
-        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="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>
+                <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="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>
+                <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="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>
+            <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>
 
-              <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
+            <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 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>
+        `;
 
-            <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')
+          };
 
-          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);
 
-            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('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.");
 
-          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;
 
-            if (!confirmed) return;
+          const { error: deleteError } = await supabase
+            .from('prompts')
+            .delete()
+            .eq('slug', slug);
 
-            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 = '/';
-            }
-          });
-        }
+          if (deleteError) {
+            document.getElementById('error').innerText = deleteError.message;
+            document.getElementById('error').style.display = 'block';
+          } else {
+            window.location.href = '/';
+          }
+        });
       }
-    </script>
-  </body>
-</html>
+    }
+  </script>
+</MainLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 31e2af4..4f7813c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -16,10 +16,10 @@ const allTags = Array.from(
 ).sort();
 ---
 
-<MainLayout>
+<MainLayout page="Home">
   <header class="border-b p-4">
-    <h1 class="text-2xl font-bold">Prompt Catalog</h1>
-    <p class="text-sm mt-1">Explore and filter AI prompts</p>
+    <h1 class="text-2xl font-bold"><a href="/">Prompt Catalog</a></h1>
+    <p class="text-sm mt-1">Save and explore AI prompts</p>
   </header>
 
   <main class="flex">
