Highlight matching text and show matching ID when relevant

The ID is only shown when there is a match with the ID, but not with the
name.

src/components/general/GlobalSearchComponent.vue

@@ -44,7 +44,10 @@
                 :key="item.raw.id"
                 @click="itemClick(item.raw)"
               >
-                {{ item.raw.name }}
+                <HighlightMatch :value="item.raw.name" :query="search" />
+                <span class="id-match" v-if="showId(item.raw)">
+                  ID: <HighlightMatch :value="item.raw.id" :query="search" />
+                </span>
               </v-list-item>
             </v-list>
           </template>
@@ -70,15 +73,27 @@ import {
   useGlobalSearchState,
 } from '@/stores/globalSearch'
 
+import HighlightMatch from './HighlightMatch.vue'
+
 const { mobile } = useDisplay()
 const state = useGlobalSearchState()
-const search = ref('')
+const search = ref<string | undefined>()
 
 function itemClick(item: any) {
   state.selectedItem = item
   state.active = false
 }
 
+function showId(item: GlobalSearchItem): boolean {
+  const query = search.value
+  if (!query) return false
+
+  const isMatchingName = containsSubstring(item.name, query)
+  const isMatchingId = containsSubstring(item.id, query)
+  // Only show the ID if the search query matches the ID but not the name.
+  return isMatchingId && !isMatchingName
+}
+
 function isMatchingItem(
   id: string,
   query: string,

src/components/general/HighlightMatch.vue

@@ -0,0 +1,19 @@
+<template>
+  <span>{{ match.before }}</span>
+  <span class="font-weight-bold">{{ match.match }}</span>
+  <span>{{ match.after }}</span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { findMatchingParts } from '@/lib/search'
+
+interface Props {
+  value: string
+  query?: string
+}
+const props = defineProps<Props>()
+
+const match = computed(() => findMatchingParts(props.value, props.query ?? ''))
+</script>