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) {
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>`
).join('');
const escapedDescription = (prompt.description ?? '').replace(/\n/g, '<br />');
const notes = prompt.notes ?? '';
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(',')}">
<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>
<span class="text-sm font-medium px-2 py-1 rounded ${
prompt.type === 'System'
@@ -39,8 +42,8 @@ function renderPromptCard(prompt) {
: 'bg-green-100 text-green-700'
}">${prompt.type}</span>
</div>
<p class="text-md">${notes}</p>
<div class="flex flex-wrap gap-2 mt-2">${tagSpans}</div>
<p class="text-md mb-4">${notes}</p>
<div class="flex flex-wrap gap-2 mt-2 mb-4">${tagSpans}</div>
<details name="prompt-details">
<summary class="cursor-pointer font-semibold mt-2 text-lg">View Details</summary>
<div class="text-md border-t mt-2 pt-2">
@@ -61,7 +64,10 @@ function renderPromptCard(prompt) {
}
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');
if (!tagContainer) return;