[Course Search] Search Modal: Filters

[bradenmacdonald]

"As a course author, when searching for content, I want to be able to filter the results by content type or tag"

Figma designs

Requirements:

Implement everything shown in Figma that's in this part of the search modal:

1. (If currently in a course) the toggle to choose "This course" or "All courses" (and apply the appropriate filter to the search so that this toggle works).
   • (If not currently in a course) the toggle only has the option for "All courses"
2. The keyword box
3. The "Content" filter dropdown for refining based on content type. It becomes a chip that shows which filters are applied.
4. The "Tags" filter dropdown. It becomes a chip that shows which filters are applied.
5. "If the user selects a content filter and a tag filter, each result must be (content type 1 OR content type 2) AND (tag 1 AND tag 2)."
   • See relevant docs
6. The "Search Tips" dropdown, though it should only say 'Enclose phrases in quotes like "solar eclipse" for an exact search.' because like Algolia, Meilisearch doesn't support boolean operators in the keywords.

Notes:

• Formatting the results themselves is excluded from this ticket (see [Course Search] Search Modal: Results #200).
• Lean heavily on the InstantSearch UI components like HierarchicalMenu that already provide most of the functionality we need. To customize them to integrate with Paragon widgets, use the "hook" versions of each, e.g. useHierarchicalMenu