feat(core): indicate when search results are from redirects

For REST API, search results will now indicate if they are from redirects.
The current implementation is that it will always show up, the logic to
trim redundant info will come later

Related: T303013

resources/skins.citizen.search/gateway/mwRestApi.js

@@ -30,6 +30,12 @@ function convertDataToResults( data ) {
 			title: data[ i ].title,
 			description: data[ i ].description
 		};
+		// Redirect title
+		// Since 1.38
+		if ( data[ i ].matched_title ) {
+			results[ i ].matchedTitle = data[ i ].matched_title;
+		}
+
 		if ( data[ i ].thumbnail && data[ i ].thumbnail.url ) {
 			results[ i ].thumbnail = data[ i ].thumbnail.url;
 		}

resources/skins.citizen.search/skins.citizen.search.less

@@ -38,12 +38,21 @@
 		}
 
 		&__title {
+			display: flex;
+			align-items: center;
 			color: var( --color-base--emphasized );
 			font-weight: 700;
+			gap: 0.25rem;
+		}
 
-			&__highlight {
-				color: var( --color-base--subtle );
-			}
+		&__highlight {
+			color: var( --color-base--subtle );
+			font-weight: 500;
+		}
+
+		&__redirect {
+			color: var( --color-base );
+			font-size: 0.8125rem;
 		}
 
 		&__description {

resources/skins.citizen.search/typeahead.js

@@ -145,18 +145,24 @@ function clearSuggestions() {
  */
 function getSuggestions( searchQuery ) {
 	const renderSuggestions = ( results ) => {
-		const prefix = 'citizen-typeahead-suggestion',
+		const
+			prefix = 'citizen-typeahead-suggestion',
 			template = document.getElementById( prefix + '-template' ),
 			fragment = document.createDocumentFragment(),
 			suggestionLinkPrefix = config.wgScriptPath + '/index.php?title=Special:Search&search=',
 			sanitizedSearchQuery = mw.html.escape( mw.util.escapeRegExp( searchQuery ) ),
 			regex = new RegExp( sanitizedSearchQuery, 'i' );
 
+		const highlightTitle = ( text ) => {
+			return text.replace( regex, '<span class="' + prefix + '__highlight">$&</span>' );
+		};
+
 		// Maybe there is a cleaner way?
 		// Maybe there is a faster way compared to multiple querySelector?
 		// Should I just use regular for loop for faster performance?
 		results.forEach( ( result ) => {
-			const suggestion = template.content.cloneNode( true ),
+			const
+				suggestion = template.content.cloneNode( true ),
 				suggestionLink = suggestion.querySelector( '.' + prefix ),
 				suggestionThumbnail = suggestion.querySelector( '.' + prefix + '__thumbnail img' ),
 				suggestionTitle = suggestion.querySelector( '.' + prefix + '__title' ),
@@ -170,8 +176,18 @@ function getSuggestions( searchQuery ) {
 				suggestionThumbnail.setAttribute( 'src', result.thumbnail );
 			}
 
-			// Highlight title
-			suggestionTitle.innerHTML = result.title.replace( regex, '<span class="' + prefix + '__title__highlight">$&</span>' );
+			// Result is a redirect
+			// Show the redirect title and highlight it
+			if ( result.matchedTitle ) {
+				suggestionTitle.innerHTML = result.title +
+					'<span class="' + prefix + '__redirect">' +
+					mw.message( 'search-redirect', highlightTitle( result.matchedTitle ) ).plain() +
+					'</span>';
+			} else {
+				// Highlight title
+				suggestionTitle.innerHTML = highlightTitle( result.title );
+			}
+
 			suggestionDescription.textContent = result.description;
 
 			fragment.append( suggestion );

skin.json

@@ -231,7 +231,8 @@
 			],
 			"messages": [
 				"citizen-search-fulltext",
-				"citizen-search-fulltext-empty"
+				"citizen-search-fulltext-empty",
+				"search-redirect"
 			],
 			"targets": [
 				"desktop",