chore: tune the ui of the status badges

[jeremydw]

the basic problem this fixes is space saving in the document list

• consolidate "draft + published" into a single "changed" badge to save horizontal space
• tune the ui to use smaller badges to save space
• add more detailed tooltips and clean up the tooltips
• add proper truncation when the release badges are too wide for their container
• clicking the status badges now shows the version history or diff (depending on the badge)

this mainly aims to clean up a ui like this:

with a proposed ui like this:

[jeremydw]

/preview

[jeremydw]

/preview

[jeremydw]

/preview

[jeremydw]

/preview

[jeremydw]

/preview

[jeremydw]

@stevenle Could you take a look and send any feedback? The biggest non-visual change is the creation of a new "Changed" status (to save room primarily, and secondarily to be consistent with other systems).

By the way, I chose a shield icon for "Locked" because some people get confused and think "Locked" means no edits are allowed (it's more like publish protection or an embargo, though).

[stevenle]

this is too big of a ui deviation, let's revert this PR or get it looking closer to the original.

[jeremydw]

/preview

[jeremydw]

/preview

[github-actions]

rootjs.dev Preview

Preview URL: https://rootjs-dev--pr-1268-yphhldr1.web.app
Commit: 9017333

This preview is built from the PR head and expires in 2 days.

[jeremydw]

@stevenle

Ready for another look - https://rootjs-dev--pr-1268-yphhldr1.web.app/cms/content/Pages

I reverted the coloring/style changes and eliminated the "changed" badges; kept the tooltip polish, and new "Show unpublished changes" modal, and the fixes for the alignment between the badges and column sizing.

The compact view is still difficult when you have a lot of badges visible and a small screen size but maybe we address that in a separate PR

[stevenle]

this is looking better, thanks.

i'm wondering whether we should reverse our decision about having releases be its own column. when the statuses column has a few badges, the releases column creates more room than is necessary, example:

one thing we could potentially do is collapse the releases badge from the id to instead be "release" if there's only 1, although i'm not sure what the best way to handle is if there are two or more releases (maybe having it say "2 releases" and having it link to a filtered list view of the releases page).

[stevenle]

in the case of a lot of badges, would you be opposed to having them wrap to the next line (same with the title column)? that would create more room for smaller viewports, although traditionally our css hasn't accounted much for non-desktop sizes.

[stevenle]

@jeremydw is this ready for me to re-review?