✨feature: Add prompt export

src/components/SidebarAdd.astro

@@ -23,10 +23,17 @@ const code = `[
   <p class="text-sm mt-2">All fields marked with <span class="text-red-600">*</span> are required.</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 />
 
+  <h2 class="text-lg font-semibold mt-6 mb-4">Export</h2>
+
+  <p class="text-sm">To export prompts to a JSON file, select the prompts using the checkboxes, and click the button below.</p>
+
+  <p class="text-sm mt-2">To export all prompts, leave all checkboxes unchecked.</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>

src/pages/add.astro

@@ -41,7 +41,7 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
               <input type="hidden" name="slug" id="slug" />
             </div>
 
-            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <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">
@@ -72,12 +72,29 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
 
             <hr class="my-6 border-gray-600" />
 
-            <div>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
-              <label for="importFile" class="block text-md font-semibold mb-1">Import Prompts from JSON</label>
+              <div>
-              <input type="file" id="importFile" accept="application/json" class="border p-2 w-full rounded bg-gray-800 text-white" />
+                <h2 class="text-lg font-semibold mb-2">Import Prompts</h2>
-              <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">
+                <p class="text-sm text-gray-400 mb-2">Upload a JSON file to import prompts.</p>
-                Import Prompts
+
-              </button>
+                <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 Selected Prompts
+                </button>
+              </div>
             </div>
           </form>
         </main>
@@ -178,6 +195,70 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
           errorBox.style.display = 'block';
         }
       });
+
+      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('');
+      }
+
+      document.getElementById('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('*');
+
+        const successBox = document.getElementById('success');
+        const errorBox = document.getElementById('error');
+        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'
+        });
+
+        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);
+      });
+
+      // Load checkboxes on DOM load
+      loadPromptCheckboxes();
     </script>
   </body>
 </html>