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
-
-
+
+
+ 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;