diff --git a/frontend/index.html b/frontend/index.html index 30b476f..2b2bbda 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -838,13 +838,18 @@ role="tabpanel" aria-labelledby="sidebar-tab-saved" > +
+ + + +
- Aucune recherche sauvegardée + Aucune recherche sauvegardee
diff --git a/frontend/js/legacy.js b/frontend/js/legacy.js index 9a8d045..3e29b2b 100644 --- a/frontend/js/legacy.js +++ b/frontend/js/legacy.js @@ -347,16 +347,19 @@ async function loadSavedSearches() { if (s.exclude_paths) pathFilters.push(`\u{1F4E4} ${escapeHtml(s.exclude_paths)}`); const vaultStr = s.vault && s.vault !== "all" ? `\u{1F4C1} ${escapeHtml(s.vault)}` : ""; return ` -
+
${displayQuery}
${badges.join("")} ${vaultStr} ${typeIcon}
${pathFilters.length ? '
' + pathFilters.join(" ") + '
' : ""} - +
`}).join(""); + // Apply saved filter + init filter bar + if (typeof _applySavedFilter === 'function') _applySavedFilter(); + if (typeof _initSavedFilter === 'function') _initSavedFilter(); list.querySelectorAll(".saved-search-item").forEach(item => { item.addEventListener("click", (e) => { if (e.target.classList.contains("saved-search-delete")) return; diff --git a/frontend/js/viewer.js b/frontend/js/viewer.js index 8986d71..9319663 100644 --- a/frontend/js/viewer.js +++ b/frontend/js/viewer.js @@ -1054,7 +1054,7 @@ export async function loadSavedSearches() { if (s.exclude_paths) pathFilters.push(`📤 ${escapeHtml(s.exclude_paths)}`); const vaultStr = s.vault && s.vault !== "all" ? `📁 ${escapeHtml(s.vault)}` : ""; return ` -
+
${displayQuery}
${badges.join("")} ${vaultStr} @@ -1064,6 +1064,10 @@ export async function loadSavedSearches() {
`}).join(""); + // Apply saved filter + _applySavedFilter(); + // Set up filter bar (once) + _initSavedFilter(); list.querySelectorAll(".saved-search-item").forEach(item => { item.addEventListener("click", (e) => { if (e.target.classList.contains("saved-search-delete")) return; @@ -1453,7 +1457,40 @@ function _renderSyncPanel(panel) { }); html += `
`; } +} +// ── Saved searches filter ── +var _savedFilterType = 'all'; +var _savedFilterInitDone = false; + +function _initSavedFilter() { + if (_savedFilterInitDone) return; + var bar = document.getElementById('saved-filter-bar'); + if (!bar) return; + bar.querySelectorAll('.saved-filter-pill').forEach(function(btn) { + btn.addEventListener('click', function() { + bar.querySelectorAll('.saved-filter-pill').forEach(function(b) { b.classList.remove('active'); }); + btn.classList.add('active'); + _savedFilterType = btn.dataset.filter; + _applySavedFilter(); + }); + }); + _savedFilterInitDone = true; +} + +function _applySavedFilter() { + var items = document.querySelectorAll('.saved-search-item'); + var hasVisible = false; + items.forEach(function(item) { + var type = item.dataset.type; + var show = _savedFilterType === 'all' || type === _savedFilterType; + item.style.display = show ? '' : 'none'; + if (show) hasVisible = true; + }); + // Show/hide empty state + var empty = document.getElementById('saved-searches-empty'); + if (empty) empty.style.display = hasVisible ? 'none' : ''; +} panel.innerHTML = html; } diff --git a/frontend/style.css b/frontend/style.css index 3f152d9..86ba58c 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -2094,6 +2094,29 @@ select { flex-shrink: 0; opacity: 0.6; } +/* Saved filter bar */ +.saved-filter-bar { + display: flex; + gap: 6px; + padding: 8px 10px 10px; +} +.saved-filter-pill { + padding: 3px 10px; + font-size: 0.7rem; + font-weight: 500; + border: 1px solid var(--border); + border-radius: 12px; + background: transparent; + color: var(--text-secondary); + cursor: pointer; + transition: background 0.15s, color 0.15s, border-color 0.15s; +} +.saved-filter-pill:hover { background: var(--bg-hover); color: var(--text-primary); } +.saved-filter-pill.active { + background: var(--accent-bg, rgba(99,102,241,0.12)); + color: var(--accent); + border-color: var(--accent); +} .saved-search-vault { font-size: 0.65rem; color: var(--text-muted);