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

🐞 fix: Wire up filtering and count after switch to client-side pull for prompts

Browse Source
This commit is contained in:
Keith Solomon
2025-07-29 08:48:12 -05:00
parent be91357b6f
commit c61a2cb2b7
3 changed files with 129 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
app/src/pages/index.astro
View File

@@ -1,35 +1,37 @@
---
// index.astro
import MainLayout from '../layouts/MainLayout.astro';
import SearchBar from '../components/SearchBar.astro';
import FilteredPromptList from '../components/FilteredPromptList.astro';
import { supabase } from '../lib/supabase';
const { data: prompts, error } = await supabase
.from('prompts')
.select('*')
.order('title', { ascending: true });
const allTags = Array.from(
new Set(
prompts?.flatMap((p) => p.tags ?? [])
)
).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL;
const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
---
<MainLayout page="Home">
<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</a></h1>
<p class="text-sm mt-1">Save and explore AI prompts</p>
</header>
<main class="flex flex-col lg:flex-row">
<SearchBar allTags={allTags} />
<SearchBar allTags={[]} /> <!-- leave empty, we'll hydrate it in JS -->
<div class="border-b lg:border-l flex-1 flex flex-col overflow-hidden">
<div class="border-b lg:border-b-0 lg:border-l flex-1 flex flex-col overflow-hidden">
<div class="flex-1 overflow-y-auto px-4 lg:px-6 pt-2 pb-4">
{error
? <p class="text-red-500">Supabase error: {error.message}</p>
: <FilteredPromptList prompts={prompts} />}
<div id="prompt-error" class="text-red-500 hidden"></div>
<div class="border-b mb-4 flex justify-between items-center">
<h2 id="prompt-count" class="text-xl font-semibold text-gray-300 mb-2"></h2>
<a href="#filters" class="block lg:hidden bg-blue-600 text-white px-2 py-0 pb-1 mb-2 rounded cursor-pointer hover:bg-blue-700 transition-colors duration-300">Filters &downarrow;</a>
</div>
<div id="prompt-container" class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">Loading prompts…</div>
</div>
</div>
</main>
@@ -37,4 +39,6 @@ const allTags = Array.from(
<footer class="border-t p-4 text-center text-sm">
&copy; {new Date().getFullYear()} Prompt Catalog
</footer>
<script type="module" src="/scripts/fetch-prompts.js"></script>
</MainLayout>

18
app/src/scripts/fetch-prompts.js
View File

@@ -1,18 +0,0 @@
// app/src/scripts/fetch-prompts.js
import { createClient } from '@supabase/supabase-js';
const supabase = createClient(import.meta.env.PUBLIC_SUPABASE_URL, import.meta.env.PUBLIC_SUPABASE_ANON_KEY);
async function loadPrompts() {
const { data, error } = await supabase.from('prompts').select('*');
if (error) {
console.error(error);
return;
}
// Now render them in the DOM
const container = document.getElementById('prompt-list');
container.innerHTML = data.map(prompt => `<li>${prompt.title}</li>`).join('');
}
document.addEventListener('DOMContentLoaded', loadPrompts);