Thumbnails/Icons for Collections/Globals

[christian-reichart]

I have a Payload project that has gotten pretty complex with many globals and collections.
For a better UX I've been thinking about adding some sort of thumbnails like it's possible with blocks.

I have two main ideas here:

Adding the option to upload a thumbnail picture (similar to blocks) that shows on the dashboard

Something like this for collections & globals:

imageURL: '/path/img.png',
imageAltText: 'alt',

Adding the option to choose a predefined icon that comes from an icon system provided by Payload

Some single colored SVG icons that work with dark mode. They could then also be shown in the sidebar, which doesn't make sense for thumbnail images i think.

Could be an option like:

icon: 'document',

where it allows predefined, enum like strings.

Maybe it could also be a combination of the two? Option two would definitely add some more work. We could also think about allowing own SVG uploads but would have to assure some way to make them fit for dark mode. We could inject CSS variables or 'currentColor' in some sort of pipeline I think (something along the lines of what I did here).

What do you think about this?