message: Minor highlighting refactor.
diff: @@ -130,20 +130,25 @@ const Row = React.memo(
  isPhonePortrait: boolean;
  isTabAutocompleteItem: boolean;
  onClick(e: React.MouseEvent, item: SearchItem): void;
  - }) => (
  - <>
  - <AppIcon className={styles.menuItemIcon} icon={searchItemIcons[item.type]} />
  - <p className={styles.menuItemQuery}>
  - {item.query.header && item.highlightRange?.section === 'header' ? (
  + }) => {
  + function highlight(text: string, section: string) {
  + return item.highlightRange?.section === section ? (
  <HighlightedText
  - text={item.query.header}
  + text={text}
  startIndex={item.highlightRange.range[0]}
  endIndex={item.highlightRange.range[1]}
  className={styles.textHighlight}
  />
  ) : (
  - item.query.header
  - )}
  + text
  + );
  + }
  +
  + return (
  + <>
  + <AppIcon className={styles.menuItemIcon} icon={searchItemIcons[item.type]} />
  + <p className={styles.menuItemQuery}>
  + {item.query.header && highlight(item.query.header, 'header')}
  {item.type === SearchItemType.Help ? (
  t('Header.FilterHelpMenuItem')
  ) : (
  @@ -152,16 +157,7 @@ const Row = React.memo(
  [styles.namedQueryBody]: item.query.header !== undefined,
  })}
  >
  - {item.highlightRange?.section === 'body' ? (
  - <HighlightedText
  - text={item.query.body}
  - startIndex={item.highlightRange.range[0]}
  - endIndex={item.highlightRange.range[1]}
  - className={styles.textHighlight}
  - />
  - ) : (
  - item.query.body
  - )}
  + {highlight(item.query.body, 'body')}
  </span>
  )}
  </p>
  @@ -181,7 +177,8 @@ const Row = React.memo(
  </button>
  )}
  </>
  - )
  + );
  + }
  );
  // TODO: break filter autocomplete into its own object/helpers... with tests
  