feat: Refine by XBlock type too

src/header/SearchModal.tsx

@@ -21,6 +21,8 @@ interface Props {
 const SearchModal: React.FC<Props> = ({courseId, ...props}) => {
   const intl = useIntl();
 
+  // Load the Meilisearch connection details from the LMS: the URL to use, the index name, and an API key specific
+  // to us (to the current user) that allows us to search all content we have permission to view.
   const {
     data: searchEndpointData,
     isLoading

src/header/SearchUI.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import {
-  InstantSearch,
-  InfiniteHits,
   HierarchicalMenu,
+  Highlight,
+  InfiniteHits,
+  InstantSearch,
+  RefinementList,
   SearchBox,
   Stats,
-  Highlight
 } from "react-instantsearch-dom";
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
@@ -28,6 +29,9 @@ const SearchUI: React.FC<Props> = (props) => {
       <InstantSearch indexName={props.indexName} searchClient={searchClient}>
         <Stats />
         <SearchBox />
+        <strong>Refine by component type:</strong>
+        <RefinementList attribute="block_type" />
+        <strong>Refine by tag:</strong>
         <HierarchicalMenu
             attributes={[
                 "tags.taxonomy",