Library Collections Tab

[jmakowski1123]

Designs: Mid-Fi Figma link

Implement the grid/card view of collections in the library that match the current keyword search.

Collections Cards:

Display the collection name, description and tag icon with tag count (see tagging epic).
Note: We will probably descope the three-dot menu from collections cards on the Collections tab and where collections cards are displayed on the Library home.

The description field is populated at the time of the collection creation, or can be added later from the Collections sidebar. If a collection contains no description, the space can be left empty.

The Collection card contains a count of how many pieces of content are contained within the collection. If there are no pieces of content in the collection, the count should not display at all.

Card should be color-coded based on type.

details TBD
Long titles/descriptions/types should be truncated with an ellipsis as shown in the mockups.

Icons should match the icons we're using in the courseware search modal, and should be sharing the same code.

Implement Infinite scroll (Hint: useInfiniteQuery)

Keep the empty states for when there are no collections in the library or no collections matching the search.