Match Highlight

<!-- Match Highlight — wrap matching characters in <b> tags -->
<div class="nuda-match">
  <p class="nuda-match__row"><b>O</b>p<b>e</b>n <b>S</b>ettings</p>
  <p class="nuda-match__row"><b>O</b>nlin<b>e</b> <b>S</b>tatus</p>
  <p class="nuda-match__row">G<b>e</b>t Started</p>
</div>

/* Match Highlight
   Bolded + glowing matching letters per row.
   Customize: --match-accent */

.nuda-match {
  --match-accent: #e4ff54;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px;
  width: 100%;
  max-width: 320px;
}

.nuda-match__row {
  padding: 7px 10px;
  font: 500 0.875rem ui-sans-serif, system-ui, sans-serif;
  color: #a1a1aa;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin: 0;
}

.nuda-match__row:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fafafa;
}

.nuda-match__row b {
  color: var(--match-accent);
  font-weight: 700;
  text-shadow: 0 0 4px rgba(228, 255, 84, 0.3);
}

/* Match Highlight — wrap matching letters in <b> as the user types. */

(function () {
  // Simple subsequence match: highlights chars in 'text' that appear in 'query'
  // (in order). Replace with fzf/fuse for fuzzy ranking in production.
  function highlight(text, query) {
    if (!query) return text;
    var q = query.toLowerCase();
    var i = 0;
    var out = '';
    for (var c = 0; c < text.length; c++) {
      var ch = text[c];
      if (i < q.length && ch.toLowerCase() === q[i]) {
        out += '<b>' + ch + '</b>';
        i++;
      } else {
        out += ch;
      }
    }
    return out;
  }

  // Example: re-render rows when the query changes.
  var input = document.querySelector('.nuda-spotlight__query');
  var rows = document.querySelectorAll('.nuda-match__row');
  if (!input || !rows.length) return;

  var originals = Array.from(rows).map(function (r) { return r.textContent; });

  input.addEventListener('input', function () {
    rows.forEach(function (row, idx) {
      row.innerHTML = highlight(originals[idx], input.value);
    });
  });
})();