Search spelling suggestions across every list

plugins/printers/frontend/views/PrintersList.vue

@@ -68,6 +68,7 @@
               <tr v-if="printers.length === 0">
                 <td colspan="7" style="text-align: center; color: var(--text-light);">
                   No printers found
+                  <SearchSuggestion :suggestion="suggestion" @pick="applySuggestion" />
                 </td>
               </tr>
             </tbody>
@@ -92,12 +93,24 @@ import { ref, onMounted } from 'vue'
 import { printersApi } from '@/api'
 import PaginationBar from '@/components/PaginationBar.vue'
 import { useListQuery } from '@/composables/listQuery'
+import SearchSuggestion from '@/components/SearchSuggestion.vue'
 
 const printers = ref([])
 const printerTypes = ref([])
 const typeFilter = ref('')
 const loading = ref(true)
-const { page, search, setPage, setSearch } = useListQuery({ onChange: loadPrinters })
+const { page, search, setPage, setSearch, suggestion, reportCount } = useListQuery({ onChange: loadPrinters })
+
+// Take the offered spelling: put it in the box and search it, so what was
+// searched is what the person sees.
+function applySuggestion(word) {
+  search.value = word
+  setSearch(word)
+  // setSearch only syncs the URL, and the watcher that reloads is suppressed
+  // because search.value already holds the new term - the same trap the global
+  // search page documents. Load directly.
+  loadPrinters()
+}
 const totalPages = ref(1)
 const perPage = ref(20)
 
@@ -125,6 +138,7 @@ async function loadPrinters() {
 
     const response = await printersApi.list(params)
     printers.value = response.data.data || []
+    reportCount(printers.value.length)
     totalPages.value = response.data.meta?.pagination?.totalpages || response.data.meta?.pagination?.total_pages || 1
   } catch (error) {
     console.error('Error loading printers:', error)