search improvements

assets/scripts/search.js

@@ -1,27 +1,47 @@
 let lunrIndex;
 let documents = [];
 let activeIndex = -1;
+let currentResults = [];
+let isSyncingHeaderInput = false;
+let suppressHeaderFocus = false;
+let searchReady = false;
+
 const searchInput = document.getElementById("search-input");
 const searchBtn = document.getElementById("search-btn");
-const resultsBox = document.createElement("div");
-const searchForm = searchInput.closest("form");
+const searchForm = searchInput?.closest("form");
+
 const modal = document.createElement("div");
-const modalResults = modal.querySelector("#search-modal-results");
-
-resultsBox.id = "search-results";
-document.body.appendChild(resultsBox);
-
 modal.id = "search-modal";
+modal.setAttribute("aria-hidden", "true");
 modal.innerHTML = `
-  <div class="search-modal-backdrop"></div>
-  <div class="search-modal-content">
-    <h2>Search results</h2>
-    <div id="search-modal-results"></div>
-  </div>
+  <div class="search-modal-backdrop" data-search-close></div>
+  <section class="search-modal-content" role="dialog" aria-modal="true" aria-labelledby="search-pane-title">
+    <div class="search-pane-head">
+      <label class="search-pane-field" for="search-pane-input">
+        <span class="search-pane-icon" aria-hidden="true">⌕</span>
+        <input type="search" id="search-pane-input" placeholder="Search notes" autocomplete="off" spellcheck="false" />
+      </label>
+      <button class="search-pane-close" type="button" aria-label="Close search" data-search-close>×</button>
+    </div>
+    <div class="search-pane-meta">
+      <h2 id="search-pane-title">Search</h2>
+      <span id="search-pane-count">Start typing to search your notes.</span>
+    </div>
+    <div id="search-modal-results" class="search-pane-results" role="listbox" aria-label="Search results"></div>
+    <div class="search-pane-help" aria-hidden="true">
+      <span>↑↓ Navigate</span>
+      <span>Enter Open</span>
+      <span>Esc Close</span>
+    </div>
+  </section>
 `;
-
 document.body.appendChild(modal);
 
+const pane = modal.querySelector(".search-modal-content");
+const paneInput = modal.querySelector("#search-pane-input");
+const modalResults = modal.querySelector("#search-modal-results");
+const paneCount = modal.querySelector("#search-pane-count");
+
 function extractDocuments(node, currentPath = "") {
   if (node.type === "folder" && node.children) {
     const nextPath = currentPath ? `${currentPath}/${node.name}` : node.name;
@@ -53,11 +73,18 @@ function buildIndex() {
 }
 
 async function initSearch() {
-  const response = await fetch("/test.json");
-  const json = await response.json();
+  try {
+    const response = await fetch("/test.json");
+    const json = await response.json();
 
-  extractDocuments(json);
-  buildIndex();
+    extractDocuments(json);
+    buildIndex();
+    searchReady = true;
+    if (isSearchOpen()) renderResults(paneInput.value);
+  } catch (error) {
+    console.warn("Search index could not be loaded", error);
+    if (paneCount) paneCount.textContent = "Search is unavailable right now.";
+  }
 }
 
 initSearch();
@@ -71,7 +98,7 @@ function buildExactQuery(query) {
     .join(" ");
 }
 
-function buildSnippet(content, terms, radius = 80) {
+function buildSnippet(content, terms, radius = 90) {
   if (!content || terms.length === 0) return "";
 
   const lower = content.toLowerCase();
@@ -107,14 +134,23 @@ function getSearchTerms(query) {
     .filter((t) => t.length > 2);
 }
 
+function escapeHtml(text) {
+  return String(text || "")
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
 function highlight(text, terms) {
-  if (!text || terms.length === 0) return text;
+  const escapedText = escapeHtml(text);
+  if (!escapedText || terms.length === 0) return escapedText;
 
-  const escaped = terms.map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+  const escapedTerms = terms.map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+  const regex = new RegExp(`(${escapedTerms.join("|")})`, "gi");
 
-  const regex = new RegExp(`(${escaped.join("|")})`, "gi");
-
-  return text.replace(regex, "<mark>$1</mark>");
+  return escapedText.replace(regex, "<mark>$1</mark>");
 }
 
 function search(query) {
@@ -143,187 +179,272 @@ function search(query) {
     .filter(Boolean);
 }
 
-function showResults(results) {
-  resultsBox.innerHTML = "";
-  activeIndex = -1;
+function setHeaderSearchValue(value, dispatchInput = false) {
+  if (!searchInput) return;
 
-  if (results.length === 0) {
-    resultsBox.style.display = "none";
-    return;
+  isSyncingHeaderInput = true;
+  searchInput.value = value;
+  isSyncingHeaderInput = false;
+
+  if (dispatchInput) {
+    searchInput.dispatchEvent(new Event("input", { bubbles: true }));
   }
+}
 
-  const rect = searchInput.getBoundingClientRect();
-  resultsBox.style.top = `${rect.bottom + window.scrollY}px`;
-  resultsBox.style.left = `${rect.left + window.scrollX}px`;
-  resultsBox.style.width = `${rect.width}px`;
+function isSearchOpen() {
+  return modal.classList.contains("is-open");
+}
 
-  results.forEach((result, i) => {
-    const item = document.createElement("div");
-    item.className = "search-result";
-    item.dataset.index = i;
+function openSearchPane(initialValue = "") {
+  const value = initialValue || searchInput?.value || paneInput?.value || "";
 
-    item.innerHTML = `
-      <div class="search-result-title">${result.title}</div>
-      <div class="search-result-preview">${result.preview}</div>
-    `;
+  modal.classList.add("is-open");
+  modal.setAttribute("aria-hidden", "false");
+  document.documentElement.classList.add("search-open");
 
-    item.onclick = () => {
-      window.location.href = result.path;
-    };
+  paneInput.value = value;
+  setHeaderSearchValue(value);
+  renderResults(value);
 
-    resultsBox.appendChild(item);
-  });
+  window.setTimeout(() => {
+    paneInput.focus();
+    paneInput.setSelectionRange(paneInput.value.length, paneInput.value.length);
+  }, 0);
+}
 
-  resultsBox.style.display = "block";
+function closeSearchPane() {
+  modal.classList.remove("is-open");
+  modal.setAttribute("aria-hidden", "true");
+  document.documentElement.classList.remove("search-open");
+  activeIndex = -1;
+  suppressHeaderFocus = true;
+  searchInput?.focus();
+  window.setTimeout(() => {
+    suppressHeaderFocus = false;
+  }, 0);
+}
+
+function getResultItems() {
+  return Array.from(modalResults.querySelectorAll(".search-modal-result"));
 }
 
 function updateActiveResult() {
-  const items = resultsBox.querySelectorAll(".search-result");
+  const items = getResultItems();
 
-  items.forEach((item) => item.classList.remove("active"));
+  items.forEach((item, index) => {
+    const isActive = index === activeIndex;
+    item.classList.toggle("active", isActive);
+    item.setAttribute("aria-selected", String(isActive));
+  });
 
   if (activeIndex >= 0 && activeIndex < items.length) {
-    const activeItem = items[activeIndex];
-
-    activeItem.classList.add("active");
-
-    activeItem.scrollIntoView({
+    items[activeIndex].scrollIntoView({
       block: "nearest",
       behavior: "smooth",
     });
   }
 }
 
-function openSearchModal(results) {
-  const modal = document.getElementById("search-modal");
-  const modalResults = modal?.querySelector("#search-modal-results");
-  modal.tabIndex = -1;
-
-  if (!modal || !modalResults) {
-    console.warn("Search modal not available");
+function setActiveResult(index) {
+  const items = getResultItems();
+  if (!items.length) {
+    activeIndex = -1;
     return;
   }
 
+  activeIndex = Math.max(0, Math.min(index, items.length - 1));
+  updateActiveResult();
+}
+
+function openActiveResult() {
+  const items = getResultItems();
+  if (!items.length) return;
+
+  const index = activeIndex >= 0 ? activeIndex : 0;
+  items[index]?.click();
+}
+
+function renderResults(query) {
+  const trimmed = query.trim();
+  currentResults = trimmed.length >= 2 ? search(trimmed) : [];
+  activeIndex = currentResults.length ? 0 : -1;
   modalResults.innerHTML = "";
 
-  if (results.length === 0) {
-    modalResults.innerHTML = "<p>No results found.</p>";
+  if (!trimmed) {
+    paneCount.textContent = "Start typing to search your notes.";
+    modalResults.innerHTML = `
+      <div class="search-empty">
+        Try a topic, page title, or phrase from a note.
+      </div>
+    `;
+    return;
   }
 
-  results.forEach((result) => {
-    const item = document.createElement("div");
-    item.className = "search-modal-result";
-    item.innerHTML = `
-      <div class="search-modal-title">${result.title}</div>
-      <div class="search-modal-preview">${result.preview}</div>
+  if (trimmed.length < 2) {
+    paneCount.textContent = "Keep typing.";
+    modalResults.innerHTML = `
+      <div class="search-empty">
+        Use at least two characters.
+      </div>
     `;
-    item.onclick = () => (window.location.href = result.path);
+    return;
+  }
+
+  if (!searchReady) {
+    paneCount.textContent = "Loading search index.";
+    modalResults.innerHTML = `
+      <div class="search-empty">
+        Loading results...
+      </div>
+    `;
+    return;
+  }
+
+  if (!currentResults.length) {
+    paneCount.textContent = "No results found.";
+    modalResults.innerHTML = `
+      <div class="search-empty">
+        No matches for "${escapeHtml(trimmed)}".
+      </div>
+    `;
+    return;
+  }
+
+  paneCount.textContent = `${currentResults.length} result${currentResults.length === 1 ? "" : "s"}`;
+
+  currentResults.slice(0, 20).forEach((result, i) => {
+    const item = document.createElement("a");
+    item.className = "search-modal-result";
+    item.href = result.path;
+    item.dataset.index = i;
+    item.setAttribute("role", "option");
+    item.setAttribute("aria-selected", String(i === activeIndex));
+
+    item.innerHTML = `
+      <span class="search-modal-title">${result.title}</span>
+      <span class="search-modal-preview">${result.preview}</span>
+      <span class="search-modal-path">${escapeHtml(result.path)}</span>
+    `;
+
+    item.addEventListener("mouseenter", () => setActiveResult(i));
     modalResults.appendChild(item);
   });
 
-  modal.style.display = "block";
-  modal.focus();
+  updateActiveResult();
 }
 
-function submitSearch() {
-  const q = searchInput.value.trim();
-  if (!q) return;
-  openSearchModal(search(q));
-}
-
-/* EVENTS */
-searchInput.addEventListener("keydown", (e) => {
-  const items = resultsBox.querySelectorAll(".search-result");
-  if (!items.length) return;
+function handleSearchKeydown(e) {
+  const items = getResultItems();
 
   switch (e.key) {
     case "ArrowDown":
       e.preventDefault();
-      if (activeIndex < items.length - 1) {
-        activeIndex++;
-        updateActiveResult();
-      }
+      if (items.length) setActiveResult(activeIndex + 1);
       break;
 
     case "ArrowUp":
       e.preventDefault();
-      if (activeIndex > 0) {
-        activeIndex--;
-        updateActiveResult();
+      if (items.length) setActiveResult(activeIndex <= 0 ? items.length - 1 : activeIndex - 1);
+      break;
+
+    case "Home":
+      if (items.length) {
+        e.preventDefault();
+        setActiveResult(0);
+      }
+      break;
+
+    case "End":
+      if (items.length) {
+        e.preventDefault();
+        setActiveResult(items.length - 1);
       }
       break;
 
     case "Enter":
       e.preventDefault();
-      if (activeIndex >= 0 && activeIndex < items.length) {
-        items[activeIndex].click();
-      } else {
-        submitSearch();
-      }
+      openActiveResult();
       break;
 
     case "Escape":
-      resultsBox.style.display = "none";
-      activeIndex = -1;
+      e.preventDefault();
+      closeSearchPane();
       break;
   }
-});
+}
 
-document.addEventListener("click", (e) => {
-  if (
-    !resultsBox.contains(e.target) &&
-    e.target !== searchInput &&
-    e.target !== searchBtn
-  ) {
-    resultsBox.style.display = "none";
-  }
-});
+function shouldUseSlashShortcut(event) {
+  const target = event.target;
+  const isEditable =
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLTextAreaElement ||
+    target?.isContentEditable;
 
-modal.addEventListener("click", (e) => {
-  if (e.target.classList.contains("search-modal-backdrop")) {
-    modal.style.display = "none";
-  }
-});
-modal.addEventListener("keydown", (e) => {
-  if (e.key === "Escape") {
-    modal.style.display = "none";
-    searchInput.focus();
-  }
-});
+  return event.key === "/" && !isEditable && !event.metaKey && !event.ctrlKey && !event.altKey;
+}
 
-window.addEventListener("pageshow", () => {
-  searchInput.value = "";
-  resultsBox.style.display = "none";
-});
-window.addEventListener("beforeunload", () => {
-  searchInput.value = "";
-});
-
-if (searchForm) {
-  searchForm.addEventListener("submit", (e) => {
-    e.preventDefault();
-    submitSearch();
+if (searchInput && searchBtn && paneInput && modalResults && paneCount) {
+  searchInput.addEventListener("focus", () => {
+    if (!suppressHeaderFocus) openSearchPane(searchInput.value);
   });
-}
+  searchInput.addEventListener("click", () => openSearchPane(searchInput.value));
 
-searchBtn.addEventListener("click", submitSearch);
+  searchInput.addEventListener("input", () => {
+    if (isSyncingHeaderInput) return;
+    if (!isSearchOpen()) openSearchPane(searchInput.value);
+    paneInput.value = searchInput.value;
+    renderResults(searchInput.value);
+  });
 
-searchInput.addEventListener("input", () => {
-  const q = searchInput.value.trim();
+  paneInput.addEventListener("input", () => {
+    setHeaderSearchValue(paneInput.value, true);
+    renderResults(paneInput.value);
+  });
 
-  if (q.length < 3) {
-    resultsBox.style.display = "none";
-    return;
+  paneInput.addEventListener("keydown", handleSearchKeydown);
+  modalResults.addEventListener("keydown", handleSearchKeydown);
+
+  searchBtn.addEventListener("click", () => openSearchPane(searchInput.value));
+
+  modal.addEventListener("click", (e) => {
+    if (e.target.hasAttribute("data-search-close")) {
+      closeSearchPane();
+    }
+  });
+
+  pane.addEventListener("click", (e) => e.stopPropagation());
+
+  document.addEventListener("keydown", (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+      e.preventDefault();
+      openSearchPane(searchInput.value);
+      return;
+    }
+
+    if (shouldUseSlashShortcut(e)) {
+      e.preventDefault();
+      openSearchPane("");
+    }
+
+    if (e.key === "Escape" && isSearchOpen()) {
+      closeSearchPane();
+    }
+  });
+
+  window.addEventListener("pageshow", () => {
+    searchInput.value = "";
+    paneInput.value = "";
+    renderResults("");
+  });
+
+  window.addEventListener("beforeunload", () => {
+    searchInput.value = "";
+  });
+
+  if (searchForm) {
+    searchForm.addEventListener("submit", (e) => {
+      e.preventDefault();
+      openSearchPane(searchInput.value);
+    });
   }
-  showResults(search(q));
-});
-
-/*  OLD FUNCTIONS */
-function buildFuzzyQuery(query) {
-  return query
-    .toLowerCase()
-    .split(/\s+/)
-    .filter((term) => term.length > 2)
-    .map((term) => `${term}~1`)
-    .join(" ");
 }