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

🐞 fix: Order tag pills, make closed cards not expand to fill row when one is opened

Browse Source
This commit is contained in:
Keith Solomon
2025-07-29 10:38:17 -05:00
parent f5f443abb8
commit 3c5b52c294
2 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,16 +22,19 @@ if (!dateStr) return "–";
}; };
function renderPromptCard(prompt) { function renderPromptCard(prompt) {
const tagSpans = (prompt.tags ?? []).map(tag => const sortedTags = (prompt.tags ?? []).slice().sort((a, b) =>
a.toLowerCase().localeCompare(b.toLowerCase())
);
const tagSpans = sortedTags.map(tag =>
`<span class="text-sm bg-gray-200 text-gray-800 px-2 py-1 pt-0 rounded">${tag}</span>` `<span class="text-sm bg-gray-200 text-gray-800 px-2 py-1 pt-0 rounded">${tag}</span>`
).join(''); ).join('');
const escapedDescription = (prompt.description ?? '').replace(/\n/g, '<br />'); const escapedDescription = (prompt.description ?? '').replace(/\n/g, '<br />');
const notes = prompt.notes ?? ''; const notes = prompt.notes ?? '';
return ` return `
<div class="prompt-card border border-gray-400 rounded p-4 bg-gray-700 text-gray-200 shadow-sm flex flex-col gap-2 min-h-[12rem]" <div class="prompt-card border border-gray-400 rounded p-4 bg-gray-700 text-gray-200 shadow-sm flex flex-col gap-2 min-h-[12rem] max-h-fit"
data-type="${prompt.type}" data-tags="${(prompt.tags ?? []).join(',')}"> data-type="${prompt.type}" data-tags="${(prompt.tags ?? []).join(',')}">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between mb-2">
<h3 class="text-xl font-semibold">${prompt.title}</h3> <h3 class="text-xl font-semibold">${prompt.title}</h3>
<span class="text-sm font-medium px-2 py-1 rounded ${ <span class="text-sm font-medium px-2 py-1 rounded ${
prompt.type === 'System' prompt.type === 'System'
@@ -39,8 +42,8 @@ function renderPromptCard(prompt) {
: 'bg-green-100 text-green-700' : 'bg-green-100 text-green-700'
}">${prompt.type}</span> }">${prompt.type}</span>
</div> </div>
<p class="text-md">${notes}</p> <p class="text-md mb-4">${notes}</p>
<div class="flex flex-wrap gap-2 mt-2">${tagSpans}</div> <div class="flex flex-wrap gap-2 mt-2 mb-4">${tagSpans}</div>
<details name="prompt-details"> <details name="prompt-details">
<summary class="cursor-pointer font-semibold mt-2 text-lg">View Details</summary> <summary class="cursor-pointer font-semibold mt-2 text-lg">View Details</summary>
<div class="text-md border-t mt-2 pt-2"> <div class="text-md border-t mt-2 pt-2">
@@ -61,7 +64,10 @@ function renderPromptCard(prompt) {
} }
function updateFiltersFromTags(prompts) { function updateFiltersFromTags(prompts) {
const tagSet = new Set(prompts.flatMap(p => p.tags ?? [])); const sortedTags = Array.from(new Set(
prompts.flatMap(p => p.tags ?? [])
)).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
const tagSet = new Set(sortedTags);
const tagContainer = document.querySelector('#filters fieldset > div'); const tagContainer = document.querySelector('#filters fieldset > div');
if (!tagContainer) return; if (!tagContainer) return;

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

@@ -31,7 +31,7 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
<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> <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>
<div id="prompt-container" class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">Loading prompts…</div> <div id="prompt-container" class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3 items-start">Loading prompts…</div>
</div> </div>
</div> </div>
</main> </main>