fix(search): Improve syntax highlighting of search history entries (#63271)

Currently queries are assumed to be 'literal', but in the current apps
we mostly use 'keyword' and 'standard'. Ideally we could pass the
pattern type that was used for each history entry, but we don't have
that information and cannot pass it easily.
Defaulting to the 'standard' or 'keyword' type is the next best option
to ensure that regex literal in the query are properly highlighted.

I defaulted to 'standard' in the React app because it's still possible
to opt out of keyword search.

client/branded/src/search-ui/input/experimental/Suggestions.tsx

@@ -4,6 +4,7 @@ import { mdiInformationOutline } from '@mdi/js'
 import classNames from 'classnames'
 
 import { isSafari } from '@sourcegraph/common'
+import { SearchPatternType } from '@sourcegraph/shared/src/graphql-operations'
 import { shortcutDisplayName } from '@sourcegraph/shared/src/keyboardShortcuts'
 import { Icon, useWindowSize } from '@sourcegraph/wildcard'
 
@@ -224,7 +225,7 @@ const FilterOption: FC<{ option: Option }> = ({ option }) => {
  */
 const QueryOption: FC<{ option: Option }> = ({ option: { label, matches } }) => {
     const tokens = useMemo(() => {
-        const decorations = decorateQuery(label)
+        const decorations = decorateQuery(label, SearchPatternType.standard)
 
         return decorations
             ? decorations.map(({ value, key, className, token }) => (

client/web-sveltekit/src/lib/search/SyntaxHighlightedQuery.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
     import { decorateQuery } from '$lib/branded'
+    import type { SearchPatternType } from '@sourcegraph/web/src/graphql-operations'
     import EmphasizedLabel from './EmphasizedLabel.svelte'
 
     export let query: string
+    export let patternType: SearchPatternType | undefined = undefined
     export let matches: Set<number> | null = null
 
-    $: decorations = decorateQuery(query)
+    $: decorations = decorateQuery(query, patternType)
 </script>
 
 <code class="search-query-link">

client/web-sveltekit/src/lib/search/input/SuggestionOption.svelte

@@ -8,6 +8,7 @@
 
 <script lang="ts">
     import { type Option, type Action, RenderAs } from '$lib/branded'
+    import { SearchPatternType } from '$lib/graphql-types'
     import SVGIcon from '$lib/SVGIcon.svelte'
 
     import EmphasizedLabel from '../EmphasizedLabel.svelte'
@@ -64,7 +65,15 @@
                         {/if}
                     </span>
                 {:else if option.render === RenderAs.QUERY}
-                    <SyntaxHighlightedQuery query={option.label} matches={option.matches} />
+                    <!--
+                        The keyword pattern type is the default pattern type.
+                        It will match most queries.
+                    -->
+                    <SyntaxHighlightedQuery
+                        query={option.label}
+                        matches={option.matches}
+                        patternType={SearchPatternType.keyword}
+                    />
                 {:else}
                     <EmphasizedLabel label={option.label} matches={option.matches} />
                 {/if}