search redesing

assets/scripts/search.js

@@ -2,45 +2,37 @@ 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 searchForm = searchInput?.closest("form");
+const searchContainer = searchInput?.closest(".site-actions");
 
-const modal = document.createElement("div");
-modal.id = "search-modal";
-modal.setAttribute("aria-hidden", "true");
-modal.innerHTML = `
-  <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>
+const searchPanel = document.createElement("section");
+searchPanel.id = "search-inline-panel";
+searchPanel.className = "search-inline-panel";
+searchPanel.setAttribute("aria-hidden", "true");
+searchPanel.setAttribute("aria-labelledby", "search-pane-title");
+searchPanel.innerHTML = `
+  <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-inline-results" class="search-pane-results" role="listbox" aria-label="Search results"></div>
+  <div class="search-pane-help" aria-hidden="true">
+    <span>Up/down Navigate</span>
+    <span>Enter Open</span>
+    <span>Esc Close</span>
+  </div>
 `;
-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");
+if (searchContainer) {
+  searchContainer.appendChild(searchPanel);
+}
+
+const inlineResults = searchPanel.querySelector("#search-inline-results");
+const paneCount = searchPanel.querySelector("#search-pane-count");
 
 function extractDocuments(node, currentPath = "") {
   if (node.type === "folder" && node.children) {
@@ -80,7 +72,7 @@ async function initSearch() {
     extractDocuments(json);
     buildIndex();
     searchReady = true;
-    if (isSearchOpen()) renderResults(paneInput.value);
+    if (isSearchOpen()) renderResults(searchInput.value);
   } catch (error) {
     console.warn("Search index could not be loaded", error);
     if (paneCount) paneCount.textContent = "Search is unavailable right now.";
@@ -115,14 +107,14 @@ function buildSnippet(content, terms, radius = 90) {
   }
 
   if (index === -1) {
-    return content.slice(0, radius * 2) + "…";
+    return content.slice(0, radius * 2) + "...";
   }
 
   const start = Math.max(0, index - radius);
   const end = Math.min(content.length, index + matchedTerm.length + radius);
 
-  const prefix = start > 0 ? "…" : "";
-  const suffix = end < content.length ? "…" : "";
+  const prefix = start > 0 ? "..." : "";
+  const suffix = end < content.length ? "..." : "";
 
   return prefix + content.slice(start, end) + suffix;
 }
@@ -179,66 +171,41 @@ function search(query) {
     .filter(Boolean);
 }
 
-function setHeaderSearchValue(value, dispatchInput = false) {
-  if (!searchInput) return;
+function isSearchOpen() {
+  return searchContainer?.classList.contains("search-inline-open");
+}
 
-  isSyncingHeaderInput = true;
-  searchInput.value = value;
-  isSyncingHeaderInput = false;
+function openSearchPane(initialValue = null, focusInput = true) {
+  if (!searchContainer || !searchInput) return;
 
-  if (dispatchInput) {
-    searchInput.dispatchEvent(new Event("input", { bubbles: true }));
+  if (initialValue !== null) {
+    searchInput.value = initialValue;
+  }
+
+  searchContainer.classList.add("search-inline-open");
+  searchPanel.setAttribute("aria-hidden", "false");
+  searchBtn?.setAttribute("aria-expanded", "true");
+  renderResults(searchInput.value);
+
+  if (focusInput) {
+    searchInput.focus({ preventScroll: true });
+    try {
+      searchInput.setSelectionRange(searchInput.value.length, searchInput.value.length);
+    } catch (_) {}
   }
 }
 
-function isSearchOpen() {
-  return modal.classList.contains("is-open");
-}
-
-function focusPaneInput() {
-  if (!isSearchOpen()) return;
-  paneInput.focus({ preventScroll: true });
-  try {
-    paneInput.setSelectionRange(paneInput.value.length, paneInput.value.length);
-  } catch (_) {}
-}
-
-function schedulePaneInputFocus() {
-  focusPaneInput();
-  window.requestAnimationFrame(() => {
-    focusPaneInput();
-    window.requestAnimationFrame(focusPaneInput);
-  });
-}
-
-function openSearchPane(initialValue = "") {
-  const value = initialValue || searchInput?.value || paneInput?.value || "";
-
-  modal.classList.add("is-open");
-  modal.setAttribute("aria-hidden", "false");
-  document.documentElement.classList.add("search-open");
-
-  paneInput.value = value;
-  setHeaderSearchValue(value);
-  renderResults(value);
-
-  schedulePaneInputFocus();
-}
-
 function closeSearchPane() {
-  modal.classList.remove("is-open");
-  modal.setAttribute("aria-hidden", "true");
-  document.documentElement.classList.remove("search-open");
+  if (!searchContainer) return;
+
+  searchContainer.classList.remove("search-inline-open");
+  searchPanel.setAttribute("aria-hidden", "true");
+  searchBtn?.setAttribute("aria-expanded", "false");
   activeIndex = -1;
-  suppressHeaderFocus = true;
-  searchInput?.focus();
-  window.setTimeout(() => {
-    suppressHeaderFocus = false;
-  }, 0);
 }
 
 function getResultItems() {
-  return Array.from(modalResults.querySelectorAll(".search-modal-result"));
+  return Array.from(inlineResults.querySelectorAll(".search-result"));
 }
 
 function updateActiveResult(focusActive = false) {
@@ -255,7 +222,7 @@ function updateActiveResult(focusActive = false) {
       block: "nearest",
       behavior: "smooth",
     });
-    if (focusActive) focusPaneInput();
+    if (focusActive) searchInput?.focus({ preventScroll: true });
   }
 }
 
@@ -282,11 +249,11 @@ function renderResults(query) {
   const trimmed = query.trim();
   currentResults = trimmed.length >= 2 ? search(trimmed) : [];
   activeIndex = currentResults.length ? 0 : -1;
-  modalResults.innerHTML = "";
+  inlineResults.innerHTML = "";
 
   if (!trimmed) {
     paneCount.textContent = "Start typing to search your notes.";
-    modalResults.innerHTML = `
+    inlineResults.innerHTML = `
       <div class="search-empty">
         Try a topic, page title, or phrase from a note.
       </div>
@@ -296,7 +263,7 @@ function renderResults(query) {
 
   if (trimmed.length < 2) {
     paneCount.textContent = "Keep typing.";
-    modalResults.innerHTML = `
+    inlineResults.innerHTML = `
       <div class="search-empty">
         Use at least two characters.
       </div>
@@ -306,7 +273,7 @@ function renderResults(query) {
 
   if (!searchReady) {
     paneCount.textContent = "Loading search index.";
-    modalResults.innerHTML = `
+    inlineResults.innerHTML = `
       <div class="search-empty">
         Loading results...
       </div>
@@ -316,7 +283,7 @@ function renderResults(query) {
 
   if (!currentResults.length) {
     paneCount.textContent = "No results found.";
-    modalResults.innerHTML = `
+    inlineResults.innerHTML = `
       <div class="search-empty">
         No matches for "${escapeHtml(trimmed)}".
       </div>
@@ -328,26 +295,28 @@ function renderResults(query) {
 
   currentResults.slice(0, 20).forEach((result, i) => {
     const item = document.createElement("a");
-    item.className = "search-modal-result";
+    item.className = "search-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>
+      <span class="search-result-title">${result.title}</span>
+      <span class="search-result-preview">${result.preview}</span>
+      <span class="search-result-path">${escapeHtml(result.path)}</span>
     `;
 
     item.addEventListener("mouseenter", () => setActiveResult(i));
-    modalResults.appendChild(item);
+    inlineResults.appendChild(item);
   });
 
   updateActiveResult();
 }
 
 function handleSearchKeydown(e) {
+  if (!isSearchOpen()) return;
+
   const items = getResultItems();
 
   switch (e.key) {
@@ -376,13 +345,16 @@ function handleSearchKeydown(e) {
       break;
 
     case "Enter":
-      e.preventDefault();
-      openActiveResult();
+      if (items.length) {
+        e.preventDefault();
+        openActiveResult();
+      }
       break;
 
     case "Escape":
       e.preventDefault();
       closeSearchPane();
+      searchInput?.focus({ preventScroll: true });
       break;
   }
 }
@@ -397,69 +369,48 @@ function shouldUseSlashShortcut(event) {
   return event.key === "/" && !isEditable && !event.metaKey && !event.ctrlKey && !event.altKey;
 }
 
-if (searchInput && searchBtn && paneInput && modalResults && paneCount) {
-  const keepFocusForModal = (e) => e.preventDefault();
-  const openFromHeaderControl = (e) => {
-    e.preventDefault();
-    openSearchPane(searchInput.value);
-  };
+if (searchInput && searchBtn && searchContainer && inlineResults && paneCount) {
+  searchBtn.setAttribute("aria-controls", "search-inline-panel");
+  searchBtn.setAttribute("aria-expanded", "false");
 
-  searchInput.addEventListener("pointerdown", keepFocusForModal);
   searchInput.addEventListener("focus", () => {
-    if (!suppressHeaderFocus) openSearchPane(searchInput.value);
+    openSearchPane(null, false);
   });
-  searchInput.addEventListener("click", openFromHeaderControl);
 
   searchInput.addEventListener("input", () => {
-    if (isSyncingHeaderInput) return;
-    if (!isSearchOpen()) openSearchPane(searchInput.value);
-    paneInput.value = searchInput.value;
-    renderResults(searchInput.value);
+    openSearchPane(null, false);
   });
 
-  paneInput.addEventListener("input", () => {
-    setHeaderSearchValue(paneInput.value, true);
-    renderResults(paneInput.value);
+  searchInput.addEventListener("keydown", handleSearchKeydown);
+  inlineResults.addEventListener("keydown", handleSearchKeydown);
+
+  searchBtn.addEventListener("click", (e) => {
+    e.preventDefault();
+    openSearchPane(null, true);
   });
 
-  paneInput.addEventListener("keydown", handleSearchKeydown);
-  modalResults.addEventListener("keydown", handleSearchKeydown);
-
-  searchBtn.addEventListener("pointerdown", keepFocusForModal);
-  searchBtn.addEventListener("click", openFromHeaderControl);
-
-  modal.addEventListener("click", (e) => {
-    if (e.target.hasAttribute("data-search-close")) {
-      closeSearchPane();
-    }
-  });
-
-  pane.addEventListener("click", (e) => {
-    if (e.target.closest("[data-search-close]")) closeSearchPane();
-    e.stopPropagation();
+  document.addEventListener("click", (e) => {
+    if (!isSearchOpen()) return;
+    if (!searchContainer.contains(e.target)) closeSearchPane();
   });
 
   document.addEventListener("keydown", (e) => {
     if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
       e.preventDefault();
-      openSearchPane(searchInput.value);
+      openSearchPane(null, true);
       return;
     }
 
     if (shouldUseSlashShortcut(e)) {
       e.preventDefault();
-      openSearchPane("");
-    }
-
-    if (e.key === "Escape" && isSearchOpen()) {
-      closeSearchPane();
+      openSearchPane("", true);
     }
   });
 
   window.addEventListener("pageshow", () => {
     searchInput.value = "";
-    paneInput.value = "";
     renderResults("");
+    closeSearchPane();
   });
 
   window.addEventListener("beforeunload", () => {
@@ -469,7 +420,8 @@ if (searchInput && searchBtn && paneInput && modalResults && paneCount) {
   if (searchForm) {
     searchForm.addEventListener("submit", (e) => {
       e.preventDefault();
-      openSearchPane(searchInput.value);
+      openSearchPane(null, true);
+      openActiveResult();
     });
   }
 }