✨feature: Add prompt import from json

public/import-sample.json

@@ -0,0 +1,9 @@
+[
+  {
+    "type": "Task or System (ONLY one)",
+    "title": "ActiveCollab Github Action",
+    "description": "This is your prompt content.",
+    "tags": "{These,Are,Tags}",
+    "notes": "This is your prompt description."
+  }
+]

src/components/SidebarAdd.astro

@@ -1,5 +1,18 @@
 ---
 // Sidebar.astro
+
+import { Code } from 'astro:components';
+
+const code = `[
+  {
+    "type": "System or Task (ONLY one)",
+    "title": "Example Prompt",
+    "description": "This is an example prompt.",
+    "tags": ["example", "test"],
+    "notes": "The prompt description."
+  }
+]
+`;
 ---
 
 <aside class="w-64 border-r h-full p-4 text-gray-100">
@@ -7,9 +20,12 @@
 
   <p class="text-sm">Use the form to add a new AI prompt to 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">All fields marked with <span class="text-red-600">*</span> are required.</p>
 
-  <!-- <p class="text-sm mt-2">You can also add notes for your own reference.</p> -->
+  <h2 class="text-lg font-semibold mt-6 mb-4">Import</h2>
+  <p class="text-sm">To import prompts from a JSON file, upload a JSON file formatted as below, or download a sample <a class="underline" download href="/import-sample.json">here</a>.</p>
+
+  <Code class="bg-gray-700 rounded text-sm p-2 mt-4" code={code} lang="json" wrap />
 
   <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

src/pages/add.astro

@@ -21,7 +21,7 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
 
     <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>
+      <p class="text-sm mt-1">Add or import new AI prompts to the catalog</p>
     </div>
 
     <div class="flex h-screen">
@@ -36,14 +36,14 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
 
           <form id="add-form" class="space-y-4">
             <div>
-              <label for="title" class="block text-md font-semibold mb-1">Title</label>
+              <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 sm:grid-cols-2 gap-4">
               <div>
-                <label for="type" class="block text-md font-semibold mb-1">Type</label>
+                <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>
@@ -57,18 +57,28 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
             </div>
 
             <div>
-              <label for="description" class="block text-md font-semibold mb-1">Prompt</label>
+              <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</label>
+              <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>
+              <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>
           </form>
         </main>
       </div>
@@ -123,6 +133,51 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
           }
         });
       });
+
+      document.getElementById('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';
+        }
+      });
     </script>
   </body>
 </html>