Library Home Page - "Bare Bones"

[bradenmacdonald]

Designs: Mid-Fi Figma link

✅ In Scope:

1. Create a new page in the Course Authoring MFE for v2 libraries (see designs link above).
2. Display the library name, and an (i) button that does nothing (it's for the sidebar, in a future story)
   
3. Include the keyword search field.
4. Include the Home / Components / Collections tabs. (Exclude "Units")
5. Clicking on "Components" or "Collections" should change the URL, and the browser's BACK button should return to the previous tab, if applicable.
6. Clicking on "Components" or "Collections" tabs should display a refined view of the content, ie refined to components on the components tab and refined to collections on the collections tab.
7. When the Library Authoring MFE is not installed/enabled, clicking on a v2 library from the Libraries Tab of Studio Home (v2) #1033 should go to this new page.
8. Use the (existing) Meilisearch API to get the count of how many components the library has, filtered by the search keywords.
9. Display an empty state for the "Home" tab: for now, same as "Components" (see next item)
10. Display an empty state for the "Components" tab:
    a. If there are no components in the library and no search keyword specified, display the message shown in the design ("This library is currently empty. Use the NEW button to add content.") - the NEW button should be a real button but clicking it won't do anything yet.
    b. If there is a keyword specified, but no components match, display the message "No matching components found in this library."
    c. Otherwise, display the count of components - "There are X components in this library"
11. For the "Collections" tab, also just put "Coming soon"

🛑 Out of Scope:

1. Do not implement the sidebar.
   
2. Do not implement the filters or sorting.
   
3. Do not implement the "New Component" workflow.

[ChrisChV]

7. Display an empty state for the "Home" tab: for now, same as "Components" (see next item)
8. Display an empty state for the "Components" tab:
   a. If there are no components in the library and no search keyword specified, display the message shown in the design ("This library is currently empty. Use the NEW button to add content.") - the NEW button should be a real button but clicking it won't do anything yet.
   b. If there is a keyword specified, but no components match, display the message "No matching components found in this library."
   c. Otherwise, display the count of components - "There are X components in this library"

@bradenmacdonald I only found this mockups for "Home" tab. I think it would be better to put it the other way around:

7. Display an empty state for the "Home" tab: 
    a. If there are no components in the library and no search keyword specified, display the message shown in the design ("This library is currently empty. Use the NEW button to add content.") - the NEW button should be a real button but clicking it won't do anything yet.
    b. If there is a keyword specified, but no components match, display the message "No matching components found in this library."
    c. Otherwise, display the count of components - "There are X components in this library"
8. Display an empty state for the "Components" tab: same as "Home" tab

[bradenmacdonald]

@ChrisChV This is the home tab:

And this is the components tab:

I put it that way because that describes the final "empty state" of the Components tab. But for the home tab, it's just a temporary thing - later, the "empty state" of the home tab will look different, since that tab is split into three sections.