Add segmented control to switch between name and location search

Replace the confusing combined search interface with a clear toggle
between "Find by Name" and "Find by Location" modes. Each mode shows
only its relevant controls, and switching modes clears the other
mode's state to prevent confusion.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/app.js

@@ -17,6 +17,7 @@ const state = {
   metrics: null, // Cached metric definitions
   pagination: { page: 1, pageSize: 50, total: 0, totalPages: 0 },
   isShowingFeatured: true, // Whether showing featured schools vs search results
+  searchMode: "name", // "name" or "location"
   locationSearch: {
     active: false,
     postcode: null,
@@ -52,13 +53,21 @@ const CHART_COLORS = [
 // =============================================================================
 
 const elements = {
+  // Search mode toggle
+  searchModeToggle: document.querySelector(".search-mode-toggle"),
+  searchModeBtns: document.querySelectorAll(".search-mode-btn"),
+  nameSearchPanel: document.getElementById("name-search-panel"),
+  locationSearchPanel: document.getElementById("location-search-panel"),
+  // Name search
   schoolSearch: document.getElementById("school-search"),
   localAuthorityFilter: document.getElementById("local-authority-filter"),
   typeFilter: document.getElementById("type-filter"),
+  // Location search
   postcodeSearch: document.getElementById("postcode-search"),
   radiusSelect: document.getElementById("radius-select"),
   locationSearchBtn: document.getElementById("location-search-btn"),
-  clearLocationBtn: document.getElementById("clear-location-btn"),
+  typeFilterLocation: document.getElementById("type-filter-location"),
+  // Schools grid
   schoolsGrid: document.getElementById("schools-grid"),
   compareSearch: document.getElementById("compare-search"),
   compareResults: document.getElementById("compare-results"),
@@ -265,12 +274,18 @@ function populateFilters(data) {
     elements.localAuthorityFilter.appendChild(option);
   });
 
-  // Populate school type filter
+  // Populate school type filter (both name and location panels)
   data.school_types.forEach((type) => {
     const option = document.createElement("option");
     option.value = type;
     option.textContent = type;
     elements.typeFilter.appendChild(option);
+
+    // Also add to location panel's type filter
+    const optionLocation = document.createElement("option");
+    optionLocation.value = type;
+    optionLocation.textContent = type;
+    elements.typeFilterLocation.appendChild(optionLocation);
   });
 
   // Populate ranking area dropdown
@@ -298,27 +313,37 @@ function populateFilters(data) {
 // =============================================================================
 
 async function loadSchools() {
-  const search = elements.schoolSearch.value.trim();
-  const localAuthority = elements.localAuthorityFilter.value;
-  const type = elements.typeFilter.value;
-  const { active: locationActive, postcode, radius } = state.locationSearch;
-
-  // If no search query (or less than 2 chars) and no filters and no location search, show featured schools
-  if (search.length < 2 && !localAuthority && !type && !locationActive) {
-    await loadFeaturedSchools();
-    return;
-  }
-
   const params = new URLSearchParams();
 
-  if (search.length >= 2) params.append("search", search);
-  if (localAuthority) params.append("local_authority", localAuthority);
-  if (type) params.append("school_type", type);
+  if (state.searchMode === "name") {
+    // Name search mode
+    const search = elements.schoolSearch.value.trim();
+    const localAuthority = elements.localAuthorityFilter.value;
+    const type = elements.typeFilter.value;
+
+    // If no search query (or less than 2 chars) and no filters, show featured schools
+    if (search.length < 2 && !localAuthority && !type) {
+      await loadFeaturedSchools();
+      return;
+    }
+
+    if (search.length >= 2) params.append("search", search);
+    if (localAuthority) params.append("local_authority", localAuthority);
+    if (type) params.append("school_type", type);
+  } else {
+    // Location search mode
+    const { active: locationActive, postcode, radius } = state.locationSearch;
+    const type = elements.typeFilterLocation.value;
+
+    // If no location search active, show featured schools
+    if (!locationActive) {
+      await loadFeaturedSchools();
+      return;
+    }
 
-  // Add location search params
-  if (locationActive && postcode) {
     params.append("postcode", postcode);
     params.append("radius", radius);
+    if (type) params.append("school_type", type);
   }
 
   params.append("page", state.pagination.page);
@@ -421,32 +446,10 @@ async function searchByLocation() {
   };
   state.pagination.page = 1;
 
-  // Show clear button
-  elements.clearLocationBtn.style.display = "inline-flex";
-
   // Load schools with location filter
   await loadSchools();
 }
 
-function clearLocationSearch() {
-  state.locationSearch = {
-    active: false,
-    postcode: null,
-    radius: 5,
-  };
-  state.pagination.page = 1;
-
-  // Clear input
-  elements.postcodeSearch.value = "";
-  elements.radiusSelect.value = "5";
-
-  // Hide clear button
-  elements.clearLocationBtn.style.display = "none";
-
-  // Reload schools (will show featured if no other filters)
-  loadSchools();
-}
-
 function renderFeaturedSchools(schools) {
   elements.schoolsGrid.innerHTML = `
         <div class="featured-header">
@@ -629,14 +632,25 @@ async function loadMoreSchools() {
   state.pagination.page++;
   const params = new URLSearchParams();
 
-  const search = elements.schoolSearch.value.trim();
-  if (search) params.append("search", search);
+  if (state.searchMode === "name") {
+    const search = elements.schoolSearch.value.trim();
+    if (search) params.append("search", search);
 
-  const localAuthority = elements.localAuthorityFilter.value;
-  if (localAuthority) params.append("local_authority", localAuthority);
+    const localAuthority = elements.localAuthorityFilter.value;
+    if (localAuthority) params.append("local_authority", localAuthority);
 
-  const type = elements.typeFilter.value;
-  if (type) params.append("school_type", type);
+    const type = elements.typeFilter.value;
+    if (type) params.append("school_type", type);
+  } else {
+    const { postcode, radius } = state.locationSearch;
+    if (postcode) {
+      params.append("postcode", postcode);
+      params.append("radius", radius);
+    }
+
+    const type = elements.typeFilterLocation.value;
+    if (type) params.append("school_type", type);
+  }
 
   params.append("page", state.pagination.page);
   params.append("page_size", state.pagination.pageSize);
@@ -1148,7 +1162,48 @@ function setupEventListeners() {
     });
   });
 
-  // Search and filters
+  // Search mode toggle
+  elements.searchModeBtns.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const mode = btn.dataset.mode;
+      if (mode === state.searchMode) return;
+
+      // Update state
+      state.searchMode = mode;
+      state.pagination.page = 1;
+
+      // Update toggle buttons
+      elements.searchModeBtns.forEach((b) => b.classList.remove("active"));
+      btn.classList.add("active");
+
+      // Update panels
+      elements.nameSearchPanel.classList.toggle("active", mode === "name");
+      elements.locationSearchPanel.classList.toggle(
+        "active",
+        mode === "location",
+      );
+
+      // Clear the inactive mode's state
+      if (mode === "name") {
+        // Clear location search state
+        state.locationSearch = { active: false, postcode: null, radius: 5 };
+        elements.postcodeSearch.value = "";
+        elements.radiusSelect.value = "5";
+        elements.typeFilterLocation.value = "";
+        updateLocationInfoBanner(null);
+      } else {
+        // Clear name search state
+        elements.schoolSearch.value = "";
+        elements.localAuthorityFilter.value = "";
+        elements.typeFilter.value = "";
+      }
+
+      // Reload schools (will show featured if no active search)
+      loadSchools();
+    });
+  });
+
+  // Name search and filters
   let searchTimeout;
   elements.schoolSearch.addEventListener("input", () => {
     clearTimeout(searchTimeout);
@@ -1169,9 +1224,6 @@ function setupEventListeners() {
   if (elements.locationSearchBtn) {
     elements.locationSearchBtn.addEventListener("click", searchByLocation);
   }
-  if (elements.clearLocationBtn) {
-    elements.clearLocationBtn.addEventListener("click", clearLocationSearch);
-  }
   if (elements.postcodeSearch) {
     elements.postcodeSearch.addEventListener("keydown", (e) => {
       if (e.key === "Enter") {
@@ -1180,6 +1232,14 @@ function setupEventListeners() {
       }
     });
   }
+  if (elements.typeFilterLocation) {
+    elements.typeFilterLocation.addEventListener("change", () => {
+      if (state.locationSearch.active) {
+        state.pagination.page = 1;
+        loadSchools();
+      }
+    });
+  }
 
   // Compare search
   let compareSearchTimeout;