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);
 }

assets/styles/style.css

@@ -174,48 +174,175 @@ body, p, li, td, th, span, div {
 }
 
 /* Search */
-.banner-search { position: relative; max-width: 18rem; }
+.banner-search {
+  position: relative;
+  flex: 0 0 auto;
+}
 
-#search-box {
-  width: 100%;
-  padding: 0.35rem 0.7rem;
-  font-size: 0.8rem;
+.search-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.75rem;
+  min-width: 11rem;
+  height: 30px;
+  padding: 0 0.45rem 0 0.7rem;
+  font-size: 0.78rem;
   font-family: var(--font-body);
+  color: var(--fg-dim);
   background: var(--surface);
-  color: var(--fg);
   border: 1px solid var(--border);
   border-radius: 5px;
-  outline: none;
-  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
+  cursor: pointer;
+  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
 }
-#search-box:focus {
+.search-trigger:hover,
+.search-trigger:focus-visible {
+  color: var(--fg);
   border-color: var(--accent-dim);
+  background: var(--surface-2);
   box-shadow: 0 0 0 3px var(--accent-sub);
+  outline: none;
 }
-#search-box::placeholder { color: var(--fg-faint); font-style: italic; }
-
-#search-results {
-  position: absolute;
-  top: calc(100% + 6px); left: 0; right: 0;
+.search-trigger kbd {
+  min-width: 1.25rem;
+  height: 1.25rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font: 0.7rem var(--font-mono);
+  color: var(--fg-faint);
   background: var(--bg);
   border: 1px solid var(--border-2);
-  border-radius: 6px;
-  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
-  max-height: 20rem;
-  overflow-y: auto;
-  z-index: 1000;
+  border-radius: 4px;
 }
-#search-results > * {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.82rem;
-  line-height: 1.4;
-  cursor: pointer;
+
+.search-modal[hidden] { display: none; }
+.search-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+}
+.search-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.58);
+  backdrop-filter: blur(3px);
+}
+.search-dialog {
+  position: relative;
+  min-height: 100%;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+}
+.search-panel {
+  width: min(42rem, calc(100vw - 2rem));
+  max-height: min(34rem, calc(100dvh - 4rem));
+  overflow: hidden;
+  background: var(--bg);
+  border: 1px solid var(--border-2);
+  border-radius: 8px;
+  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58);
+}
+.search-input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.75rem;
   border-bottom: 1px solid var(--border);
-  transition: background var(--dur-fast);
 }
-#search-results > *:last-child { border-bottom: none; }
-#search-results > *:hover,
-#search-results > *.active { background: var(--accent-sub); color: var(--fg); }
+.search-icon {
+  flex: 0 0 auto;
+  color: var(--accent);
+  font-size: 1rem;
+}
+#search-box {
+  width: 100%;
+  min-width: 0;
+  padding: 0.35rem 0;
+  font-size: 1rem;
+  font-family: var(--font-body);
+  background: transparent;
+  color: var(--fg);
+  border: 0;
+  outline: none;
+}
+#search-box::placeholder { color: var(--fg-faint); }
+.search-close {
+  flex: 0 0 auto;
+  width: 1.8rem;
+  height: 1.8rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fg-dim);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1.1rem;
+  line-height: 1;
+  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
+}
+.search-close:hover,
+.search-close:focus-visible {
+  color: var(--fg);
+  border-color: var(--border-2);
+  background: var(--surface);
+  outline: none;
+}
+.search-title {
+  padding: 0.55rem 0.8rem 0.4rem;
+  color: var(--fg-faint);
+  font: 0.68rem var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0;
+}
+#search-results {
+  max-height: min(24rem, calc(100dvh - 11rem));
+  overflow-y: auto;
+}
+.search-result {
+  width: 100%;
+  display: grid;
+  gap: 0.15rem;
+  padding: 0.62rem 0.8rem;
+  text-align: left;
+  color: var(--fg);
+  background: transparent;
+  border: 0;
+  border-top: 1px solid var(--border);
+  cursor: pointer;
+  transition: background var(--dur-fast), color var(--dur-fast);
+}
+.search-result:hover,
+.search-result.active {
+  background: var(--accent-sub);
+}
+.search-result-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.88rem;
+  line-height: 1.35;
+}
+.search-result-path {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fg-faint);
+  font: 0.68rem var(--font-mono);
+  line-height: 1.35;
+}
+.search-empty {
+  padding: 1.2rem 0.8rem 1.35rem;
+  color: var(--fg-dim);
+  border-top: 1px solid var(--border);
+  font-size: 0.86rem;
+  text-align: center;
+}
+.search-empty[hidden] { display: none; }
 
 /* Actions */
 .banner-actions { display: flex; align-items: center; gap: var(--r2); }