Add search count indication

This commit is contained in:
Andrew
2026-07-09 18:59:11 +08:00
parent 4626f328e4
commit 3dfa83e407
3 changed files with 17 additions and 3 deletions

View File

@@ -23,6 +23,7 @@
<svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><line x1="5" y1="5" x2="11" y2="11"/><line x1="11" y1="5" x2="5" y2="11"/></svg> <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><line x1="5" y1="5" x2="11" y2="11"/><line x1="11" y1="5" x2="5" y2="11"/></svg>
</button> </button>
</div> </div>
<div class="dial-count" id="count" hidden></div>
</div> </div>
<div class="dial-list" id="list"></div> <div class="dial-list" id="list"></div>
</div> </div>

View File

@@ -18,7 +18,7 @@ function NormChar(ch) {
} }
// element handles, assigned in OnInit (kept null so load-time touches no DOM) // element handles, assigned in OnInit (kept null so load-time touches no DOM)
var qEl = null, listEl = null, favEl = null, clearEl = null, eyeEl = null; var qEl = null, listEl = null, favEl = null, clearEl = null, eyeEl = null, countEl = null;
// ---- pure helpers (no DOM; unit-tested) ------------------------------------- // ---- pure helpers (no DOM; unit-tested) -------------------------------------
function fuzzyRanges(text, query) { function fuzzyRanges(text, query) {
@@ -239,16 +239,22 @@ function renderList() {
// non-empty query with zero hits earns the "No actions match" message. // non-empty query with zero hits earns the "No actions match" message.
if (!q) { if (!q) {
listEl.className = "dial-list empty"; listEl.className = "dial-list empty";
if (countEl) countEl.hidden = true;
return; return;
} }
listEl.className = "dial-list" + (!arr.length ? " empty" : ""); listEl.className = "dial-list" + (!arr.length ? " empty" : "");
if (!arr.length) { if (!arr.length) {
if (countEl) countEl.hidden = true;
var empty = document.createElement("div"); var empty = document.createElement("div");
empty.className = "dial-empty"; empty.className = "dial-empty";
empty.textContent = "No actions match"; empty.textContent = "No actions match (Total: " + ACTIONS.length + ")";
listEl.appendChild(empty); listEl.appendChild(empty);
return; return;
} }
if (countEl) {
countEl.hidden = false;
countEl.textContent = "Showing " + arr.length + " of " + ACTIONS.length + " actions";
}
arr.forEach(function (a, i) { arr.forEach(function (a, i) {
var on = FAVS.indexOf(a.id) !== -1; var on = FAVS.indexOf(a.id) !== -1;
var row = document.createElement("div"); var row = document.createElement("div");
@@ -361,7 +367,7 @@ function focusInput() { setTimeout(function () { qEl.focus(); }, 0); }
// ---- init -------------------------------------------------------------------- // ---- init --------------------------------------------------------------------
function OnInit() { function OnInit() {
qEl = $("q"); listEl = $("list"); favEl = $("favBar"); clearEl = $("clear"); eyeEl = $("favEyebrow"); qEl = $("q"); listEl = $("list"); favEl = $("favBar"); clearEl = $("clear"); eyeEl = $("favEyebrow"); countEl = $("count");
syncClearButton(); syncClearButton();
$("clear").onclick = function () { $("clear").onclick = function () {

View File

@@ -86,6 +86,13 @@ body {
background: rgba(127,127,127,.20); background: rgba(127,127,127,.20);
} }
.plugin-search-clear[hidden] { display: none; } .plugin-search-clear[hidden] { display: none; }
.dial-count {
padding: 4px 4px 0;
text-align: left;
font-size: 11px;
color: var(--muted, var(--orca-muted, #6b7280));
}
.dial-count[hidden] { display: none; }
.dial-list { .dial-list {
flex: 0 1 auto; flex: 0 1 auto;
min-height: 0; min-height: 0;