Search spelling suggestions across every list

frontend/src/components/SearchSuggestion.vue

@@ -0,0 +1,42 @@
+<template>
+  <!-- Renders nothing at all when there is no suggestion, so a list can drop
+       this in beside its empty state without an extra v-if of its own. -->
+  <p v-if="suggestion" class="search-suggestion">
+    Did you mean
+    <button type="button" class="linklike" @click="$emit('pick', suggestion)">
+      {{ suggestion }}
+    </button>?
+  </p>
+</template>
+
+<script setup>
+defineProps({
+  suggestion: { type: String, default: null },
+})
+defineEmits(['pick'])
+</script>
+
+<style scoped>
+.search-suggestion {
+  margin: 0.5rem 0 0;
+  color: var(--text-light, #666);
+  font-size: 0.9rem;
+}
+
+/* A button, not an anchor: it re-runs the search in place rather than
+   navigating, and a link that does not link is a lie to anyone using a
+   keyboard or a screen reader. */
+.linklike {
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: var(--primary, #0066cc);
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.linklike:hover {
+  text-decoration: none;
+}
+</style>