Improve discoverability of the language status pin/unpin interaction

[daviddossett]

There are a couple of potential usability improvements to be made on the language status bar item with regards to pinning:

1. Make it easier for users to understand that an item can be added/pinned to the status bar in the first place.
2. Make it easier to unpin—currently the pinned item and its counterpart in the context menu are often hard to match.

Current state

Pinning

One potential issue here is correlating the pin icon with the actual out come of adding it to the status bar. Not sure yet if other users have found this confusing.

Unpinning

A more obvious issue here is knowing which item to pick. Could there be a "Unpin this item" action at the top when right clicking on the item? Probably other ideas to explore as well.

Design explorations to come 🤘 cc @misolori @lychung7

[daviddossett]

Here's a proposal that includes a few tweaks:

• The language status hover always lists all status items regardless of state
• The pinning action moves to a state toggle model vs. the current "move from here to status bar" model
• Update pin/unpin action icons to more clearly reflect the state and action

CleanShot.2022-01-12.at.10.19.41.mp4

As the recording shows, I also explored moving the "Unpin" action to the top of context menu to avoid the action being hidden under the context menu's fold—this is a problem on macOS, not on windows/web from what I can tell. The downside here would be the action moving further away from the user's mouse as @bpasero pointed out. It would also mean we would have to change that behavior for all status bar items. Probably not a necessary change if the pinned state is primarily maintained in the language status hover.

This also pointed out the potential confusion between show/hide vs. pinned/unpinned concepts since we use both across regular status bar items and these language status items. Something to think about.

[daviddossett]

Closed via @jrieken's changes here. Some related issues still pending fixes as described in #140851

[jrieken]

To Verify

• open a TS file
• in its language hover pin/unpin items
• make sure the item stays despite being pinned