🦆

Author: am9zZWY

client/src/components/SearchResult.vue

@@ -24,15 +24,18 @@
               class="px-3 py-1 bg-primary-100 text-primary-600 rounded-full text-xs font-medium">
           {{ tag }}
         </span>
-        <span class="px-3 py-1 bg-primary-100 text-primary-600 rounded-full text-xs font-medium" v-if="result.score">
+        <!-- <span class="px-3 py-1 bg-primary-100 text-primary-600 rounded-full text-xs font-medium" v-if="result.score">
           {{ Math.round((result.score ?? 0) * 100) / 100 }}%
-        </span>
+        </span> -->
       </div>
       <div class="mt-4">
-        <button @click="toggleSummary"
+        <button @click="toggleSummary" :disabled="loadingSummary"
                 class="text-sm text-primary-600 hover:text-primary-700 font-medium focus:outline-none">
           {{ showSummary ? 'Hide' : 'Show' }} Summary
         </button>
+        <div v-if="loadingSummary"
+             class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-primary-500 mx-2">
+        </div>
       </div>
       <transition
         enter-active-class="transition ease-out duration-200"
@@ -74,12 +77,9 @@ interface SearchResultProps {
 
 const { result } = defineProps<SearchResultProps>()
 
-const showSummary = ref(false)
-const summary = ref('')
 
 const showPreview = ref(false)
 const preview = ref('')
-
 const togglePreview = async () => {
   showPreview.value = !showPreview.value
   if (preview.value) {
@@ -90,14 +90,23 @@ const togglePreview = async () => {
   preview.value = URL.createObjectURL(await response.blob())
 }
 
+const loadingSummary = ref(false)
+const showSummary = ref(false)
+const summary = ref('')
 const toggleSummary = async () => {
+  loadingSummary.value = true
   showSummary.value = !showSummary.value
-  if (result.summary) {
+  if (summary.value) {
+    loadingSummary.value = false
     return
   }
 
-  const response = await fetch(`${ENGINE_ENDPOINT}/summary/${result.id}`)
-  summary.value = await response.text()
+  summary.value = await fetch(`${ENGINE_ENDPOINT}/summary/${result.id}`)
+    .then((res) => res.json())
+    .then((data) => {
+      loadingSummary.value = false
+      return data.summary
+    })
 }
 
 //watch(() => result.url, downloadPreview, { immediate: true })

client/src/stores/search.ts

@@ -24,6 +24,7 @@ const dummyResults: SearchResult[] = [
 export const useSearchStore = defineStore('search', () => {
   const localStore = useLocal()
 
+  const lastQuery = ref('')
   const internalResults = ref<SearchResult[]>([])
   const results = computed(() => {
     const results = internalResults.value
@@ -35,10 +36,12 @@ export const useSearchStore = defineStore('search', () => {
 
   function search(query: string) {
     if (query === '') {
-      internalResults.value = dummyResults
+      internalResults.value = []
       return
     }
 
+    lastQuery.value = query
+
     return fetch(`${ENGINE_ENDPOINT}/search?query=${query}`)
       .then((response) => response.json())
       .then((data: ApiSearchResultsResponse) => {
@@ -51,6 +54,7 @@ export const useSearchStore = defineStore('search', () => {
   return {
     results,
     lastSearches,
+    lastQuery,
     search
   }
 })

client/src/views/SearchView.vue

@@ -38,6 +38,9 @@
           {{ lastSearch }}
         </span>
       </div>
+      <div v-if="searched && results.length > 0" class="text-gray-600 mt-8">
+        Found {{ results.length }} {{ results.length === 0 ? 'door' : 'doors' }} for "{{ lastQuery }}"
+      </div>
       <div v-if="loading" class="text-center text-gray-600 mt-8">
         <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-tertiary-500 mx-auto"></div>
         <p class="mt-4">{{ TITLE }}</p>
@@ -56,7 +59,7 @@
           </li>
         </transition-group>
         <p v-else-if="searched && results.length === 0" class="text-center text-gray-600 mt-8">
-          No results found. Try another search term.
+          No doors found for "{{ lastQuery }}". Try another search term.
         </p>
       </div>
     </div>
@@ -73,7 +76,7 @@ import { gsap } from 'gsap'
 import SearchResult from '@/components/SearchResult.vue'
 
 const searchStore = useSearchStore()
-const { results, lastSearches } = storeToRefs(searchStore)
+const { results, lastSearches, lastQuery } = storeToRefs(searchStore)
 
 const loading = false