Merge pull request #1959 from dgageot/improve-docs-search

Improve docs search

Author: dgageot

docs/css/style.css

@@ -831,24 +831,38 @@ body {
   padding: 8px;
 }
 .search-result {
-  padding: 12px 16px;
+  display: block;
+  padding: 10px 16px;
   border-radius: var(--radius);
   cursor: pointer;
   transition: background 0.15s;
+  text-decoration: none;
+  color: var(--text);
 }
 .search-result:hover,
 .search-result:focus {
   background: var(--bg-hover);
   outline: none;
+  text-decoration: none;
 }
 .search-result-title {
-  font-weight: 600;
+  font-weight: 500;
   font-size: 0.9rem;
   color: var(--text);
 }
-.search-result-section {
-  font-size: 0.8rem;
+.search-result-group {
+  padding: 12px 16px 4px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
   color: var(--text-muted);
+  user-select: none;
+}
+.search-result-group:not(:first-child) {
+  margin-top: 4px;
+  border-top: 1px solid var(--border-light);
+  padding-top: 12px;
 }
 .search-result-match {
   font-size: 0.78rem;

docs/js/app.js

@@ -169,12 +169,19 @@ function renderSearchResults(query) {
     return;
   }
 
-  $searchResults.innerHTML = results.map(r => `
-    <a class="search-result" href="${r.url}" tabindex="0" role="option">
+  // Group results by section to avoid repeating section names
+  let html = '';
+  let lastSection = '';
+  for (const r of results) {
+    if (r.section && r.section !== lastSection) {
+      html += `<div class="search-result-group">${r.section}</div>`;
+      lastSection = r.section;
+    }
+    html += `<a class="search-result" href="${r.url}" tabindex="0" role="option">
       <div class="search-result-title">${r.title}</div>
-      ${r.section ? `<div class="search-result-section">${r.section}</div>` : ''}
-    </a>
-  `).join('');
+    </a>`;
+  }
+  $searchResults.innerHTML = html;
 
   $searchResults.querySelectorAll('.search-result').forEach(el => {
     el.addEventListener('click', () => closeSearch());