Add realtime support to merge request homepage

On the new merge request homepage it would be nice if each list could be realtime in that merge requests get added/removed whenever they are removed/added to a list.

We do need to consider here is how to visibly show what merge requests have been updated

Details of interaction

• The green background feedback.success.background.color is what we will go forward with.
  • I am acknowledging that the gray badges look washed out on this background. However after trying to find a better visual way to express this I conceded that although not perfect the green background conveys the main purpose that this row has been added.
• When collapsed the list header needs visual feedback - going to go with a UI element with the label +2 new, where "2" is the number of merge requests added.
  • Considered using a badge but this page already has many badges that this element could get lost.
  • Blue dot is one alternative approach but we would need to explain via tooltip what that means
  • This is using the diff addition styling with extra padding and bolded text.
  • Placing the element to the right
    • Did consider placing it next to the counter but couldn't find a way to make it work
    • On the right aligns it closer to the accordion expand/collapse button
    • On the right is cleaner approach as you can scan down the list in the same position if you had multiple lists collapsed

When does the green background disappear?

The green background disappears once the user has seen that there are new items

1. When page refreshes
2. When the list expands then collapses again.

Here is an example of how this might work

update-indicators

When would we display these indicators that something has changed?

I believe we should only display when merge requests are "added" to the list. This aligns with the concept that something that needs my attention because I need to action it.

In the scenario of a merge request being removed, I believe it is extra information that is not needed to be displayed. For example, I finished a review, then that review moves to an inactive list "approved by you". I think it would be distracting to have that information displayed that "1 removed" from "Review requested".

Would we need to do this for the inactive lists too?

For the sake of consistency yes. This means we would have to add counters to the inactive lists too !180976.

• Neutral badge for active lists
• Neutral-muted badge for inactive lists
• Muted display of the "new" indicator when an inactive list is collapsed