keith/Prompt_Catalog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨feature: Update layout to have footer, update export button for all/selected prompt export text

Browse Source
This commit is contained in:
Keith Solomon
2025-07-27 09:59:09 -05:00
parent ba333343c6
commit fb5093a529
6 changed files with 75 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
src/pages/add.astro
View File

@@ -19,16 +19,16 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
hidden
></div>
<div class="border-b p-4">
<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>
</div>
</header>
<div class="flex h-screen">
<main class="flex">
<Sidebar />
<div class="flex-1 flex flex-col overflow-hidden">
<main class="flex-1 overflow-y-auto p-4">
<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>
@@ -92,14 +92,18 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
<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
Export All Prompts
</button>
</div>
</div>
</form>
</main>
</div>
</div>
</div>
</main>
<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';
@@ -109,11 +113,48 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('add-form');
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');
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();
}
// Load checkboxes on DOM load
loadPromptCheckboxes();
function updateExportBtnText() {
const checkboxes = Array.from(document.querySelectorAll('#prompt-list input[type="checkbox"]'));
const checkedCount = checkboxes.filter(cb => cb.checked).length;
exportBtn.textContent = checkedCount > 0 ? 'Export Selected Prompts' : 'Export All Prompts';
}
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('title').addEventListener('input', (e) => {
const value = e.target.value
.toLowerCase()
@@ -151,7 +192,7 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
});
});
document.getElementById('importBtn').addEventListener('click', async () => {
importBtn.addEventListener('click', async () => {
const fileInput = document.getElementById('importFile');
const file = fileInput.files[0];
@@ -196,36 +237,13 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
}
});
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"]'));
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('*');
const successBox = document.getElementById('success');
const errorBox = document.getElementById('error');
successBox.style.display = 'none';
errorBox.style.display = 'none';
@@ -256,9 +274,6 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
link.click();
URL.revokeObjectURL(url);
});
// Load checkboxes on DOM load
loadPromptCheckboxes();
</script>
</body>
</html>