org_roam/assets/scripts/search.js

/* =========================================================
   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");
const empty = document.getElementById("search-empty");

fetch("/search-index.json")
  .then(r => r.json())
  .then(data => {
    index = Array.isArray(data) ? data : [];
  })
  .catch(err => {
    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;

/* =========================================================
   MODAL STATE
   ========================================================= */

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("button");
    row.type = "button";
    row.className = "search-result";
    row.dataset.index = i;
    row.dataset.url = entry.url;
    row.setAttribute("role", "option");

    const title = document.createElement("span");
    title.className = "search-result-title";
    title.textContent = entry.title || "Untitled note";

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

    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 moveActive(direction) {
  if (!currentResults.length) return;
  const next = activeIndex < 0
    ? 0
    : (activeIndex + direction + currentResults.length) % currentResults.length;
  setActive(next);
}

function setActive(index) {
  const items = [...results.children];

  items.forEach(item => {
    item.classList.remove("active");
    item.setAttribute("aria-selected", "false");
  });

  if (items[index]) {
    items[index].classList.add("active");
    items[index].setAttribute("aria-selected", "true");
    items[index].scrollIntoView({ block: "nearest" });
    activeIndex = index;
  }
}

function clearResults() {
  results.innerHTML = "";
  currentResults = [];
  activeIndex = -1;
}

function clearSearch() {
  box.value = "";
  clearResults();
  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;

  for (let ti = 0; ti < text.length && qi < query.length; ti++) {
    if (text[ti] === query[qi]) {
      qi++;
      consecutive++;
      score += 5 + consecutive * 2;
    } else {
      consecutive = 0;
    }
  }

  if (qi !== query.length) return 0;

  return score + Math.max(0, 20 - text.length);
}