From 1ce3a6d65c6f5cc56547f8555bca571278c3b16d Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Mon, 15 Jun 2026 15:12:18 -0400 Subject: [PATCH] feat: barre de recherche epuree + barre flottante de resultats - Header: retire Aa/wd/.*, compteur 0/0, fleches nav (reste filtre + clear) - Nouvelle barre flottante sticky en bas du content-area - Style pill arrondi, fond semi-transparent, ombre legere - Contient: compteur, nav prev/next, toggles Aa/wd/.* - Apparait seulement quand des resultats sont affiches - Disparait au clear ou retour dashboard - Mobile: filtre + clear restent visibles - IDs renommes rb-* pour eviter collisions --- frontend/index.html | 57 +++++++----------------------------- frontend/js/search.js | 25 ++++++++++------ frontend/style.css | 67 +++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 91 insertions(+), 58 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index ca997c8..65f23f7 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -294,31 +294,6 @@ autocomplete="off" />
- - - - - - 0/0 - -
+ + diff --git a/frontend/js/search.js b/frontend/js/search.js index 72ffec2..6cfec4a 100644 --- a/frontend/js/search.js +++ b/frontend/js/search.js @@ -510,15 +510,19 @@ function _triggerAdvancedSearch(rawQuery) { export function initSearch() { const input = document.getElementById("search-input"); if (!input) return; - const caseBtn = document.getElementById("search-case-btn"); - const wordBtn = document.getElementById("search-word-btn"); - const regexBtn = document.getElementById("search-regex-btn"); + const caseBtn = document.getElementById("rb-case"); + const wordBtn = document.getElementById("rb-word"); + const regexBtn = document.getElementById("rb-regex"); const filterBtn = document.getElementById("search-filter-btn"); const clearBtn = document.getElementById("search-clear-btn"); const filterRow = document.getElementById("search-filter-row"); - const prevBtn = document.getElementById("search-prev-btn"); - const nextBtn = document.getElementById("search-next-btn"); - const countEl = document.getElementById("search-match-count"); + const prevBtn = document.getElementById("rb-prev"); + const nextBtn = document.getElementById("rb-next"); + const countEl = document.getElementById("rb-count"); + const resultsBar = document.getElementById("results-bar"); + + function _showResultsBar() { if (resultsBar) resultsBar.style.display = 'flex'; } + function _hideResultsBar() { if (resultsBar) resultsBar.style.display = 'none'; } function _updateToggleUI() { caseBtn.classList.toggle("active", state.searchCaseSensitive); @@ -544,7 +548,7 @@ export function initSearch() { if (_searchResultIdx >= 0 && _searchResultIdx < _searchResultItems.length) { _searchResultItems[_searchResultIdx].scrollIntoView({ block: "nearest", behavior: "smooth" }); } - const countEl = document.getElementById("search-match-count"); + const countEl = document.getElementById("rb-count"); if (countEl) countEl.textContent = _searchResultIdx >= 0 ? `${_searchResultIdx + 1}/${_searchResultItems.length}` : `0/${_searchResultItems.length}`; } @@ -552,6 +556,7 @@ export function initSearch() { _searchResultItems = Array.from(document.querySelectorAll(".search-result-item")); _searchResultIdx = _searchResultItems.length > 0 ? 0 : -1; _updateResultHighlight(); + if (_searchResultItems.length > 0) _showResultsBar(); else _hideResultsBar(); } window.navigateSearchResults = function(delta) { @@ -702,6 +707,7 @@ export function initSearch() { state.searchWholeWord = false; state.searchRegex = false; _updateToggleUI(); + _hideResultsBar(); SearchChips.clear(); AutocompleteDropdown.hide(); showWelcome(); @@ -897,8 +903,11 @@ export function renderAdvancedSearchResults(data, query, tagFilter) { area.innerHTML = ""; // Update match counter - const countEl = document.getElementById("search-match-count"); + const countEl = document.getElementById("rb-count"); if (countEl) countEl.textContent = `${data.total > 0 ? "1" : "0"}/${data.total}`; + // Show floating results bar + var rb = document.getElementById('results-bar'); + if (rb) rb.style.display = 'flex'; // Header with result count and sort controls const header = el("div", { class: "search-results-header" }); diff --git a/frontend/style.css b/frontend/style.css index 5704d4a..b960ed8 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -3081,12 +3081,11 @@ body.resizing-v { height: 18px !important; } - /* Mobile: hide advanced search toggles by default, show only clear */ + /* Mobile: keep only filter + clear visible in header search */ .search-actions .tog, - .search-actions .icon-only:not(#search-clear-btn), .search-actions .search-sep, .search-actions .search-count { display: none; } - .search-actions { gap: 0; } + .search-actions { gap: 4px; } .search-actions .search-btn#search-clear-btn { display: flex; } .search-dropdown { @@ -6687,6 +6686,68 @@ body.popup-mode .content-area { } .search-filter-input:focus { border-color: var(--accent); } .search-filter-input::placeholder { color: var(--text-muted); } + +/* ── Floating Results Bar ── */ +.results-bar { + position: sticky; + bottom: 16px; + display: flex; + align-items: center; + gap: 2px; + margin: 0 auto; + padding: 6px 10px; + background: var(--bg-secondary); + border: 1px solid var(--border-md, var(--border)); + border-radius: 10px; + box-shadow: 0 2px 16px rgba(0,0,0,0.35); + width: fit-content; + max-width: 95%; + z-index: 50; + backdrop-filter: blur(8px); +} +.results-bar-count { + font-size: 10px; + color: var(--text-muted); + font-family: var(--mono); + white-space: nowrap; + min-width: 28px; + text-align: center; + padding: 0 4px; +} +.results-bar-btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + border: 1px solid transparent; + border-radius: 4px; + background: transparent; + color: var(--text-secondary); + cursor: pointer; + font-size: 12px; + transition: background 0.15s, color 0.15s, border-color 0.15s; +} +.results-bar-btn:hover { background: var(--bg-hover); color: var(--text-primary); } +.results-bar-btn.tog { + font-family: var(--mono); + font-size: 10px; + font-weight: 600; + width: auto; + padding: 2px 5px; +} +.results-bar-btn.tog.active { + color: var(--accent); + border-color: var(--accent); + background: rgba(99,102,241,0.12); +} +.results-bar-sep { + width: 1px; + height: 16px; + background: var(--border); + margin: 0 6px; + align-self: center; +} .search-replace-btn { padding: 4px 10px; font-size: 11px;