Function initToolsPage

website/src/scripts/pages/tools.ts:133–208

()

}

export async function initToolsPage(): Promise<void> {
  if (initialized) return;
  initialized = true;

  const categoryFilter = document.getElementById(
    "filter-category"
  ) as HTMLSelectElement;
  const clearFiltersBtn = document.getElementById("clear-filters");
  const sortSelect = document.getElementById("sort-select") as HTMLSelectElement;

  const data = await fetchData<ToolsData>("tools.json");
  if (!data || !data.items) {
    const container = document.getElementById("tools-list");
    if (container)
      container.innerHTML =
        '<div class="empty-state"><h3>Failed to load tools</h3></div>';
    return;
  }

  // Map items to include title for FuzzySearch
  allItems = data.items.map((item) => ({
    ...item,
    title: item.name, // FuzzySearch uses title
  }));

  // Populate category filter
  if (categoryFilter && data.filters.categories) {
    categoryFilter.innerHTML =
      '<option value="">All Categories</option>' +
      data.filters.categories
        .map(
          (c) => `<option value="${c}">${c}</option>`
        )
        .join("");

    const initialCategory = getQueryParam("category");
    if (initialCategory && data.filters.categories.includes(initialCategory)) {
      currentFilters.categories = [initialCategory];
      categoryFilter.value = initialCategory;
    }

    categoryFilter.addEventListener("change", () => {
      currentFilters.categories = categoryFilter.value
        ? [categoryFilter.value]
        : [];
      applyFiltersAndRender();
      syncUrlState();
    });
  }

  const initialSort = getQueryParam("sort");
  if (initialSort === "title") {
    currentSort = initialSort;
    if (sortSelect) sortSelect.value = initialSort;
  }
  sortSelect?.addEventListener("change", () => {
    currentSort = sortSelect.value as ToolSortOption;
    applyFiltersAndRender();