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 (state.searchMode === "name") {
-  if (localAuthority) params.append("local_authority", localAuthority);
+    // Name search mode
-  if (type) params.append("school_type", type);
+    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 (state.searchMode === "name") {
-  if (search) params.append("search", search);
+    const search = elements.schoolSearch.value.trim();
+    if (search) params.append("search", search);
 
-  const localAuthority = elements.localAuthorityFilter.value;
+    const localAuthority = elements.localAuthorityFilter.value;
-  if (localAuthority) params.append("local_authority", localAuthority);
+    if (localAuthority) params.append("local_authority", localAuthority);
 
-  const type = elements.typeFilter.value;
+    const type = elements.typeFilter.value;
-  if (type) params.append("school_type", type);
+    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;

frontend/index.html

@@ -45,16 +45,44 @@
             </div>
 
             <div class="search-section">
-                <div class="search-container">
+                <div class="search-mode-toggle">
-                    <input type="text" id="school-search" class="search-input" placeholder="Search primary schools by name...">
+                    <button class="search-mode-btn active" data-mode="name">
-                    <div class="search-icon">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
-                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <circle cx="11" cy="11" r="8"/>
                             <path d="M21 21l-4.35-4.35"/>
                         </svg>
+                        Find by Name
+                    </button>
+                    <button class="search-mode-btn" data-mode="location">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+                            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
+                            <circle cx="12" cy="10" r="3"/>
+                        </svg>
+                        Find by Location
+                    </button>
+                </div>
+
+                <div id="name-search-panel" class="search-panel active">
+                    <div class="search-container">
+                        <input type="text" id="school-search" class="search-input" placeholder="Search primary schools by name...">
+                        <div class="search-icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <circle cx="11" cy="11" r="8"/>
+                                <path d="M21 21l-4.35-4.35"/>
+                            </svg>
+                        </div>
+                    </div>
+                    <div class="filter-row">
+                        <select id="local-authority-filter" class="filter-select">
+                            <option value="">All Areas</option>
+                        </select>
+                        <select id="type-filter" class="filter-select">
+                            <option value="">All School Types</option>
+                        </select>
                     </div>
                 </div>
-                <div class="location-search">
+
+                <div id="location-search-panel" class="search-panel">
                     <div class="location-input-group">
                         <input type="text" id="postcode-search" class="search-input postcode-input" placeholder="Enter postcode (e.g. SW18 4TF)">
                         <select id="radius-select" class="filter-select radius-select">
@@ -65,16 +93,12 @@
                             <option value="20">20 miles</option>
                         </select>
                         <button id="location-search-btn" class="btn btn-primary location-btn">Find Nearby</button>
-                        <button id="clear-location-btn" class="btn location-clear-btn" style="display: none;">Clear</button>
                     </div>
-                </div>
+                    <div class="filter-row">
-                <div class="filter-row">
+                        <select id="type-filter-location" class="filter-select">
-                    <select id="local-authority-filter" class="filter-select">
+                            <option value="">All School Types</option>
-                        <option value="">All Areas</option>
+                        </select>
-                    </select>
+                    </div>
-                    <select id="type-filter" class="filter-select">
-                        <option value="">All School Types</option>
-                    </select>
                 </div>
             </div>
 

frontend/styles.css

@@ -198,6 +198,62 @@ body {
     margin: 2rem auto 3rem;
 }
 
+/* Search Mode Toggle */
+.search-mode-toggle {
+    display: flex;
+    justify-content: center;
+    gap: 0;
+    margin-bottom: 1.5rem;
+    background: var(--bg-card);
+    border: 2px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: 4px;
+    max-width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.search-mode-btn {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    font-size: 0.95rem;
+    font-family: inherit;
+    font-weight: 500;
+    border: none;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.search-mode-btn:hover {
+    color: var(--text-primary);
+}
+
+.search-mode-btn.active {
+    background: var(--accent-coral);
+    color: white;
+    box-shadow: 0 2px 8px rgba(224, 114, 86, 0.3);
+}
+
+.search-mode-btn svg {
+    flex-shrink: 0;
+}
+
+/* Search Panels */
+.search-panel {
+    display: none;
+}
+
+.search-panel.active {
+    display: block;
+}
+
 .search-container {
     position: relative;
     margin-bottom: 1rem;
@@ -258,11 +314,8 @@ body {
 }
 
 /* Location Search */
-.location-search {
-    margin-bottom: 1rem;
-}
-
 .location-input-group {
+    margin-bottom: 1rem;
     display: flex;
     gap: 0.75rem;
     align-items: center;