Separate user-added and configured items in the workspace catalog

[ggeisler]

This ticket assumes that we’ve eliminated the “(Added from URL)” message from the catalog items as suggested in #3270. However, we still need to clearly distinguish configured items from items the user adds via the Add Resource action or opening an item via navigating a collection.

The proposal here is to do this by separating the two item types into two distinct sections of the catalog. This also enables us to keep the layout of the item cards of each type the same (versus finding some other way to show the (Added from URL) message).

Initial display of the catalog

These examples use the main Mirador 3 demo instance. Because the user hasn’t added any items yet, the catalog looks very similar to the current version.

The main difference is that the Add Resource button, and associated input panel, are now displayed at the top of catalog. I’ll explain why below.

Catalog after user has added several items

In the example below the user has used the Add Resource panel to open two items via manifest URL and has navigated through a collection to open one item in the collection. We consider all of these “user-added.”

Since we now have both the initially configured items and at least one user-added item, when we display the catalog we separate those two types into separate lists, each list with its own header:

As shown in the example above, moving the Add Resource button and associated input panel to the top of the catalog makes more sense now, since it keeps the button physically closer to the part of the catalog where the added resources are displayed (when there are added resources, but obviously we want to display the button in a stable location, so it would go at the top even when there isn’t an Added Resources section to display, as in the first mockup of this ticket).

Styling details

• Headings Added resources and Catalog resources are h2s.
• Headings use the Headline 2 class styling
• Background color of the heading section should be the same as the adjacent workspace toolbar background color
• Spacing for the heading section is about padding: 20px; (can vary a few pixels if necessary to match the closest MUI spacing convention)
• Add resource panel opens down from top, rather the up from bottom

[cbeer]

This is potentially low-hanging fruit for a first pass at least. I'm a little worried it devolves into support for grouping the catalog manifests into folders for some more advanced use cases, though.