feat: vary search result title based on type of search

Author: themightychris

src/App.vue

@@ -5,7 +5,7 @@ import SearchBox from './components/SearchBox.vue'
 import MapView from './components/MapView.vue'
 import SearchResults from './components/SearchResults.vue'
 
-const searchResults = ref({ matches: [], divisions: [] })
+const searchResults = ref({ matches: [], divisions: [], searchTerm: '' })
 const isResultsExpanded = ref(false)
 
 function handleSearch(results) {
@@ -17,7 +17,8 @@ function handleExpandedChange(expanded) {
 }
 
 function handleMapSearch(results) {
-  searchResults.value = results
+  // For map searches, ensure we clear any previous search term
+  searchResults.value = { ...results, searchTerm: '' }
   isResultsExpanded.value = true
 }
 </script>

src/components/SearchBox.vue

@@ -33,7 +33,7 @@ watch(searchQuery, debounce(async (newQuery) => {
     await handleSearch()
   } else {
     console.log('Query too short, clearing results')
-    emit('search', { matches: [], divisions: [] })
+    emit('search', { matches: [], divisions: [], searchTerm: '' })
   }
 }, 300))
 
@@ -62,7 +62,8 @@ async function handleSearch() {
 
     emit('search', {
       matches: data,
-      divisions: divisions
+      divisions: divisions,
+      searchTerm: searchQuery.value
     })
   } catch (err) {
     console.error('Search error:', err)

src/components/SearchResults.vue

@@ -4,7 +4,7 @@ import { ref, computed, watch } from 'vue'
 const props = defineProps({
   results: {
     type: Object,
-    default: () => ({ matches: [], divisions: [] })
+    default: () => ({ matches: [], divisions: [], searchTerm: '' })
   }
 })
 
@@ -16,6 +16,26 @@ const sortedResults = computed(() => {
   return [...props.results.matches].sort((a, b) => a.name.localeCompare(b.name))
 })
 
+// Compute the results title based on the type of search
+const resultsTitle = computed(() => {
+  if (props.results.matches.length === 0) {
+    return 'No Results'
+  }
+
+  // If there's a search term, it's a text-based search
+  if (props.results.searchTerm) {
+    return `Search Results for "${props.results.searchTerm}" - ${props.results.matches.length} Results`
+  }
+
+  // If there's exactly one division, it's from a map click
+  if (props.results.divisions.length === 1) {
+    return `Division ${props.results.divisions[0]} - ${props.results.matches.length} Results`
+  }
+
+  // Default case
+  return `${props.results.matches.length} Results`
+})
+
 // Watch for changes in results to auto-expand/collapse
 watch(() => props.results.matches.length, (newCount) => {
   // Auto-expand if there are any results
@@ -37,7 +57,7 @@ const toggleExpand = () => {
 <template>
   <div class="search-results" :class="{ expanded: isExpanded }">
     <div class="results-header" @click="toggleExpand">
-      <span class="result-count">{{ props.results.matches.length }} Results</span>
+      <span class="result-count">{{ resultsTitle }}</span>
       <button class="expand-button">
         {{ isExpanded ? '▼' : '▲' }}
       </button>