search key nav fixes

assets/scripts/script.js

@@ -124,7 +124,11 @@ function initSidebarRail() {
 
     btn.addEventListener('click', () => {
       if (action === 'search') {
-        document.getElementById('search-box')?.focus();
+        if (typeof window.openSearchModal === 'function') {
+          window.openSearchModal();
+        } else {
+          document.getElementById('search-box')?.focus();
+        }
         return;
       }
       const isExpanded = sidebar.classList.contains('expanded');
@@ -882,6 +886,7 @@ function hookSearchResults() {
         e.stopPropagation();
         resultsBox.innerHTML = '';
         if (searchBox) searchBox.value = '';
+        window.closeSearchModal?.();
 
         let resolved;
         try { resolved = new URL(url, location.href); } catch { return; }
@@ -907,6 +912,7 @@ function hookSearchResults() {
       if (!url) return;
       resultsBox.innerHTML = '';
       searchBox.value = '';
+      window.closeSearchModal?.();
       let resolved;
       try { resolved = new URL(url, location.href); } catch { return; }
       openNote(resolved.pathname, active.textContent.trim(), resolved.hash);

assets/scripts/search.js

@@ -1,16 +1,16 @@
 /* =========================================================
-   STATE
+   MODAL SEARCH
    ========================================================= */
 
 let index = [];
 let activeIndex = -1;
+let currentResults = [];
 
+const openButton = document.getElementById("search-open");
+const modal = document.getElementById("search-modal");
 const box = document.getElementById("search-box");
 const results = document.getElementById("search-results");
-
-/* =========================================================
-   LOAD SEARCH INDEX
-   ========================================================= */
+const empty = document.getElementById("search-empty");
 
 fetch("/search-index.json")
   .then(r => r.json())
@@ -21,143 +21,233 @@ fetch("/search-index.json")
     console.error("Failed to load search index:", err);
   });
 
+if (openButton && modal && box && results) {
+  openButton.addEventListener("click", openSearchModal);
+
+  modal.addEventListener("click", event => {
+    const clickedOutsidePanel = !event.target.closest(".search-panel");
+
+    if (clickedOutsidePanel || event.target.closest("[data-search-close]")) {
+      closeSearchModal();
+    }
+  });
+
+  box.addEventListener("input", () => {
+    updateResults(box.value);
+  });
+
+  box.addEventListener("keydown", event => {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        moveActive(1);
+        break;
+
+      case "ArrowUp":
+        event.preventDefault();
+        moveActive(-1);
+        break;
+
+      case "Enter":
+        if (activeIndex >= 0 && currentResults[activeIndex]) {
+          event.preventDefault();
+          openResult(currentResults[activeIndex]);
+        }
+        break;
+
+      case "Escape":
+        event.preventDefault();
+        closeSearchModal();
+        break;
+    }
+  });
+
+  document.addEventListener("keydown", event => {
+    if (event.key === "Escape" && isSearchOpen()) {
+      event.preventDefault();
+      closeSearchModal();
+    }
+  });
+}
+
+window.openSearchModal = openSearchModal;
+window.closeSearchModal = closeSearchModal;
+
 /* =========================================================
-   RENDER RESULTS
+   MODAL STATE
    ========================================================= */
 
-function renderResults(items) {
+function openSearchModal() {
+  if (!modal || !box) return;
+
+  modal.hidden = false;
+  document.body.classList.add("search-modal-open");
+  openButton?.setAttribute("aria-expanded", "true");
+
+  requestAnimationFrame(() => {
+    box.focus();
+    box.select();
+    updateResults(box.value);
+  });
+}
+
+function closeSearchModal() {
+  if (!modal || !box) return;
+
+  modal.hidden = true;
+  document.body.classList.remove("search-modal-open");
+  openButton?.setAttribute("aria-expanded", "false");
+  clearSearch();
+  openButton?.focus();
+}
+
+function isSearchOpen() {
+  return Boolean(modal && !modal.hidden);
+}
+
+/* =========================================================
+   RESULTS
+   ========================================================= */
+
+function updateResults(value) {
+  const query = value.trim().toLowerCase();
   clearResults();
 
+  if (query.length < 2) {
+    setEmptyMessage("Type at least 2 characters to search.");
+    return;
+  }
+
+  currentResults = index
+    .map(entry => ({
+      ...entry,
+      score: fuzzyScore(query, entry.title || "")
+    }))
+    .filter(entry => entry.score > 0)
+    .sort((a, b) => b.score - a.score)
+    .slice(0, 20);
+
+  if (!currentResults.length) {
+    setEmptyMessage("No matching notes.");
+    return;
+  }
+
+  empty.hidden = true;
+  renderResults(currentResults);
+  setActive(0);
+}
+
+function renderResults(items) {
+  const fragment = document.createDocumentFragment();
+
   items.forEach((entry, i) => {
-    const row = document.createElement("div");
+    const row = document.createElement("button");
+    row.type = "button";
+    row.className = "search-result";
     row.dataset.index = i;
+    row.dataset.url = entry.url;
+    row.setAttribute("role", "option");
 
-    const link = document.createElement("a");
-    link.href = entry.url;
-    link.textContent = entry.title;
+    const title = document.createElement("span");
+    title.className = "search-result-title";
+    title.textContent = entry.title || "Untitled note";
 
-    link.addEventListener("click", ev => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      clearSearch();
-      pushPane(entry.url);
-    });
-
-    row.appendChild(link);
+    const path = document.createElement("span");
+    path.className = "search-result-path";
+    path.textContent = entry.url || "";
 
+    row.append(title, path);
+    row.addEventListener("click", () => openResult(entry));
     row.addEventListener("mouseenter", () => setActive(i));
-    row.addEventListener("mouseleave", clearActive);
 
-    results.appendChild(row);
+    fragment.appendChild(row);
   });
+
+  results.appendChild(fragment);
+}
+
+function openResult(entry) {
+  if (!entry?.url) return;
+
+  closeSearchModal();
+
+  let resolved;
+  try {
+    resolved = new URL(entry.url, location.href);
+  } catch {
+    return;
+  }
+
+  if (resolved.origin !== location.origin) {
+    window.open(entry.url, "_blank");
+    return;
+  }
+
+  if (typeof openNote === "function" && resolved.pathname.endsWith(".html")) {
+    openNote(resolved.pathname, entry.title || filenameToTitle(resolved.pathname), resolved.hash);
+    return;
+  }
+
+  window.location.href = resolved.href;
 }
 
 /* =========================================================
    ACTIVE ITEM HANDLING
    ========================================================= */
 
-function setActive(i) {
-  const items = [...results.children];
-
-  items.forEach(el => el.classList.remove("active"));
-
-  if (items[i]) {
-    items[i].classList.add("active");
-    activeIndex = i;
-  }
+function moveActive(direction) {
+  if (!currentResults.length) return;
+  const next = activeIndex < 0
+    ? 0
+    : (activeIndex + direction + currentResults.length) % currentResults.length;
+  setActive(next);
 }
 
-function clearActive() {
-  [...results.children].forEach(el => el.classList.remove("active"));
-  activeIndex = -1;
-}
-
-/* =========================================================
-   INPUT HANDLER
-   ========================================================= */
-
-box.addEventListener("input", () => {
-  const query = box.value.trim().toLowerCase();
-
-  clearResults();
-  if (query.length < 2) return;
-
-  const matches = index
-    .map(entry => ({
-      ...entry,
-      score: fuzzyScore(query, entry.title)
-    }))
-    .filter(entry => entry.score > 0)
-    .sort((a, b) => b.score - a.score)
-    .slice(0, 20); // optional cap
-
-  renderResults(matches);
-});
-
-/* =========================================================
-   KEYBOARD NAVIGATION
-   ========================================================= */
-
-box.addEventListener("keydown", e => {
+function setActive(index) {
   const items = [...results.children];
-  if (!items.length) return;
 
-  switch (e.key) {
-    case "ArrowDown":
-      e.preventDefault();
-      setActive((activeIndex + 1) % items.length);
-      break;
+  items.forEach(item => {
+    item.classList.remove("active");
+    item.setAttribute("aria-selected", "false");
+  });
 
-    case "ArrowUp":
-      e.preventDefault();
-      setActive((activeIndex - 1 + items.length) % items.length);
-      break;
-
-    case "Enter":
-      if (activeIndex < 0) return;
-
-      e.preventDefault();
-      e.stopPropagation();
-
-      const link = items[activeIndex].querySelector("a");
-      if (link) {
-        clearSearch();
-        pushPane(link.getAttribute("href"));
-      }
-      break;
-
-    case "Escape":
-      clearSearch();
-      break;
+  if (items[index]) {
+    items[index].classList.add("active");
+    items[index].setAttribute("aria-selected", "true");
+    items[index].scrollIntoView({ block: "nearest" });
+    activeIndex = index;
   }
-});
-
-/* =========================================================
-   CLICK OUTSIDE TO CLOSE
-   ========================================================= */
-
-document.addEventListener("click", e => {
-  if (!e.target.closest(".banner-search")) {
-    clearSearch();
-  }
-});
-
-/* =========================================================
-   HELPERS
-   ========================================================= */
+}
 
 function clearResults() {
   results.innerHTML = "";
+  currentResults = [];
+  activeIndex = -1;
 }
 
 function clearSearch() {
+  box.value = "";
   clearResults();
-  activeIndex = -1;
+  setEmptyMessage("Type at least 2 characters to search.");
 }
+
+function setEmptyMessage(message) {
+  empty.textContent = message;
+  empty.hidden = false;
+}
+
+/* =========================================================
+   SCORING
+   ========================================================= */
+
 function fuzzyScore(query, text) {
   query = query.toLowerCase();
   text = text.toLowerCase();
 
+  if (text.includes(query)) {
+    return 100 - text.indexOf(query);
+  }
+
   let score = 0;
   let qi = 0;
   let consecutive = 0;
@@ -166,7 +256,7 @@ function fuzzyScore(query, text) {
     if (text[ti] === query[qi]) {
       qi++;
       consecutive++;
-      score += 5 + consecutive * 2; // reward runs
+      score += 5 + consecutive * 2;
     } else {
       consecutive = 0;
     }
@@ -174,7 +264,5 @@ function fuzzyScore(query, text) {
 
   if (qi !== query.length) return 0;
 
-  score += Math.max(0, 20 - text.length);
-
-  return score;
+  return score + Math.max(0, 20 - text.length);
 }