This commit is contained in:
Mateusz Gruszczyński
2026-09-02 10:35:19 +02:00
parent 5e5bd4ad3a
commit 154b54d452
3 changed files with 11 additions and 7 deletions
+2 -2
View File
@@ -650,7 +650,7 @@ function renderFlowPresetPreview(preset) {
const reqMarkup = req.requirements.length
? req.requirements.map(item => `<span class="flow-template-requirement ${item.ok ? 'ok' : 'missing'} ${item.info ? 'info' : ''}">${item.ok ? '✓' : '!' } ${esc(item.label)}</span>`).join('')
: `<span class="flow-template-requirement ok">✓ ${esc(tr('flow.templateRequirementsReady'))}</span>`;
host.innerHTML = `<div class="flow-template-preview-head"><div><span class="eyebrow">${esc(tr('flow.templatePreview'))}</span><h3>${esc(flowPresetText(preset.name) || preset.id)}</h3></div><button type="button" class="flow-template-favorite ${favorite ? 'active' : ''}" data-flow-template-favorite="${esc(preset.id)}" title="${esc(favorite ? tr('flow.templateFavoriteRemove') : tr('flow.templateFavoriteAdd'))}" aria-label="${esc(favorite ? tr('flow.templateFavoriteRemove') : tr('flow.templateFavoriteAdd'))}"></button></div>
host.innerHTML = `<div class="flow-template-preview-head"><div><span class="eyebrow">${esc(tr('flow.templatePreview'))}</span><h3>${esc(flowPresetText(preset.name) || preset.id)}</h3></div><button type="button" class="flow-template-favorite ${favorite ? 'active' : ''}" data-flow-template-favorite="${esc(preset.id)}" title="${esc(favorite ? tr('flow.templateFavoriteRemove') : tr('flow.templateFavoriteAdd'))}" aria-label="${esc(favorite ? tr('flow.templateFavoriteRemove') : tr('flow.templateFavoriteAdd'))}">${favorite ? '★' : '☆'}</button></div>
<p>${esc(flowPresetText(preset.description))}</p>
<div class="flow-template-preview-stats"><span>${esc(tr('flow.templateNodesCount', { count:preset.flow.nodes.length }))}</span><span>${esc(tr('flow.templateEdgesCount', { count:preset.flow.edges.length }))}</span></div>
${flowPresetPreviewGraph(preset)}
@@ -686,7 +686,7 @@ function renderFlowPresetBrowser(category = '') {
const emptyKey = query ? 'flow.templateNoResults' : flowPresetActiveCategory === 'favorites' ? 'flow.templateNoFavorites' : flowPresetActiveCategory === 'recent' ? 'flow.templateNoRecent' : 'flow.templateNoResults';
const cards = active.map(preset => {
const isFavorite = favorites.has(preset.id), selected = preset.id === flowPresetPreviewId;
return `<article class="flow-template-card ${selected ? 'selected' : ''}"><button type="button" class="flow-template-card-main" data-flow-template-preview="${esc(preset.id)}"><strong>${esc(flowPresetText(preset.name) || preset.id)}</strong><span>${esc(flowPresetText(preset.description))}</span></button><button type="button" class="flow-template-favorite ${isFavorite ? 'active' : ''}" data-flow-template-favorite="${esc(preset.id)}" title="${esc(isFavorite ? tr('flow.templateFavoriteRemove') : tr('flow.templateFavoriteAdd'))}" aria-label="${esc(isFavorite ? tr('flow.templateFavoriteRemove') : tr('flow.templateFavoriteAdd'))}"></button></article>`;
return `<article class="flow-template-card ${selected ? 'selected' : ''}"><button type="button" class="flow-template-card-main" data-flow-template-preview="${esc(preset.id)}"><strong>${esc(flowPresetText(preset.name) || preset.id)}</strong><span>${esc(flowPresetText(preset.description))}</span></button><button type="button" class="flow-template-favorite ${isFavorite ? 'active' : ''}" data-flow-template-favorite="${esc(preset.id)}" title="${esc(isFavorite ? tr('flow.templateFavoriteRemove') : tr('flow.templateFavoriteAdd'))}" aria-label="${esc(isFavorite ? tr('flow.templateFavoriteRemove') : tr('flow.templateFavoriteAdd'))}">${isFavorite ? '★' : '☆'}</button></article>`;
}).join('');
host.innerHTML = `<section class="flow-template-category-single"><div class="flow-template-category-head"><strong>${esc(flowPresetCategoryLabel(flowPresetActiveCategory))}</strong><span>${esc(flowPresetCategoryHint(flowPresetActiveCategory))}</span></div>${cards ? `<div class="flow-template-category-grid">${cards}</div>` : `<div class="empty compact"><span>${esc(tr(emptyKey))}</span></div>`}</section>`;
if (!active.some(preset => preset.id === flowPresetPreviewId)) flowPresetPreviewId = active[0]?.id || '';
+7 -3
View File
@@ -6360,9 +6360,13 @@ body.flow-editor-open { overflow:hidden; }
.flow-template-card.selected { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-border); }
.flow-template-card-main { display:grid; gap:7px; width:100%; min-height:118px; border:0; background:transparent; color:var(--text); padding:14px 42px 14px 14px; text-align:left; align-content:start; cursor:pointer; }
.flow-template-card-main span { color:var(--muted); font-size:.86rem; line-height:1.4; }
.flow-template-favorite { width:34px; height:34px; border:0; border-radius:50%; background:transparent; color:var(--muted); cursor:pointer; font-size:1.15rem; line-height:1; }
.flow-template-card > .flow-template-favorite { position:absolute; right:7px; top:7px; }
.flow-template-favorite.active { color:var(--accent); background:var(--accent-soft); }
.flow-template-favorite { width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:var(--muted); cursor:pointer; font-size:1.22rem; line-height:1; opacity:.72; transition:color .15s ease, background .15s ease, opacity .15s ease, transform .15s ease; }
.flow-template-card > .flow-template-favorite { position:absolute; right:8px; top:8px; }
.flow-template-favorite:hover { color:var(--text); background:var(--surface); opacity:1; }
.flow-template-favorite:focus-visible { outline:2px solid var(--accent); outline-offset:2px; opacity:1; }
.flow-template-favorite.active { color:var(--accent); background:transparent; opacity:1; }
.flow-template-favorite.active:hover { background:var(--accent-soft); }
.flow-template-favorite:active { transform:scale(.92); }
.flow-template-preview .form-actions { margin-top:0; padding-top:10px; border-top:1px solid var(--line); }
@media (max-width:900px) {