bookhoard/web/src/docs.ts

import { Alpine } from "./alpine";

function toggleSidebar(): void {
  const sidebar = document.getElementById("docs-sidebar");
  const overlay = document.getElementById("docs-overlay");

  if (sidebar && overlay) {
    sidebar.classList.toggle("translate-x-0");
    sidebar.classList.toggle("-translate-x-full");
    overlay.classList.toggle("hidden");
  }
}

function initializeDocsSearch(): void {
  const searchInput = document.getElementById(
    "docs-search",
  ) as HTMLInputElement;
  const searchResults = document.getElementById("docs-search-results");

  if (!searchInput || !searchResults) return;

  let docsSearchTimeout: ReturnType<typeof setTimeout> | null = null;

  searchInput.addEventListener("input", () => {
    const query = searchInput.value.trim();

    if (docsSearchTimeout) {
      clearTimeout(docsSearchTimeout);
    }

    if (query.length < 2) {
      searchResults.innerHTML = "";
      searchResults.classList.add("hidden");
      return;
    }

    docsSearchTimeout = setTimeout(() => {
      performDocsSearch(query);
    }, 300);
  });
}

function performDocsSearch(query: string): void {
  const searchResults = document.getElementById("docs-search-results");
  if (!searchResults) return;

  if (!(window as any).lunr) {
    console.warn("Lunr.js not loaded");
    return;
  }

  try {
    const idx = (window as any).lunrIndex;
    if (!idx) {
      searchResults.innerHTML =
        '<p class="p-2 text-sm" style="color: var(--text-secondary)">Search index not loaded</p>';
      searchResults.classList.remove("hidden");
      return;
    }

    const results = idx.search(query);

    if (results.length === 0) {
      searchResults.innerHTML =
        '<p class="p-2 text-sm" style="color: var(--text-secondary)">No results found</p>';
    } else {
      searchResults.innerHTML = results
        .slice(0, 10)
        .map((result: { ref: string }) => {
          const doc = (window as any).docsData?.[result.ref];
          if (!doc) return "";

          return `
                    <a href="${result.ref}" class="block p-2 hover:bg-opacity-50 transition-colors" style="background-color: var(--bg-secondary)">
                        <p class="font-medium text-sm" style="color: var(--text-primary)">${doc.title || result.ref}</p>
                        ${doc.section ? `<p class="text-xs" style="color: var(--text-secondary)">${doc.section}</p>` : ""}
                    </a>
                `;
        })
        .join("");
    }

    searchResults.classList.remove("hidden");
  } catch (error) {
    console.error("Search error:", error);
    searchResults.innerHTML =
      '<p class="p-2 text-sm" style="color: var(--text-secondary)">Search error</p>';
    searchResults.classList.remove("hidden");
  }
}

document.addEventListener("DOMContentLoaded", () => {
  initializeDocsSearch();
});

Alpine.global("docs", {
  toggleSidebar,
  initializeSearch: initializeDocsSearch,
});

export { toggleSidebar, initializeDocsSearch };

Alpine.global("docs", {
  toggleSidebar,
  initializeSearch: initializeDocsSearch,
});