Finalize Profiles UX

[aeschli]

I like the profile functionality, but don't like the profile selector at all. It's too prominent, confusing as it looks generic.

• I don't associate this with profiles, nor with settings. 'Default' is not enough, nor is the icon meaningful to me.
  A better icon would be the settings gear icon

• The right side of the status bar is typically for workspace related information (git branch, warning.errors). Settings related information belong to the bottom of the activity bar.

• Instead of using the status bar, I suggest to use the settings gear in the activity bar. It should look different if a profile is active. Maybe a letter icon as an overlay (the first letter of the profile name, T for testing) or a short text below it. The rich hover should then show more information and would even some links to configure the profile.

• Don't show any information when in the default profile. IMO profiles are an advanced feature.

[sandy081]

Don't show any information when in the default profile. IMO profiles are an advanced feature.

Default profile is shown only when you have more than one profile. You can always hide the profiles status bar entry in the default profile if you do not want default profile to be shown.

[daviddossett]

Thanks for the feedback—I agree that the status bar still doesn't feel like the aboslute correct place for this.

We have actually explored variations of that proposal re: the settings gear. Ignoring the actual styling of this (we were exploring giving users the choice to use an image) one obvious challenge here is the conflict with the update badge:

@sandy081 I think it's worth digging into this one more now that I've had some time away from it. I think it would be a valid option if we can figure out a clean way to work around the update badge.

[daviddossett]

This is a really rough idea but it could be a unique activity entry just below the settings icon.

We could use the first two letters if the profile name is a single word (e.g. CS50 -> CS). If there are 2+ words, we could use the first letters of the each words (e.g. Web Development -> WD).

Profile names with many words would eventually need to overflow (e.g. React Native Test Settings):

[sandy081]

Above mock up seems promising. It would fit very well as a label badge on settings gear icon. But I see the issue when there are multiple badges (say update number badge). I also think settings profile as a separate action item under settings gear icon is worth an option too. Lets also get the feedback from the UX sync call.

[aeschli]

Cool, looks good!
Maybe move it a bit closer to the gear so the appear as one?
I wouldn't use the overflow. Two (or a max of 3) letters will be enough to distinguish the profiles. Hovering over the marker would show the full name.

[daviddossett]

If they are separate elements, this is about as close as they can get given the activity bar item's footprint. Haven't yet found a clean way to integrate it with the settings gear without stomping on the update badge.

I'm fine with the two letters 👍

[daviddossett]

Played around with this a bit more:

With update badge:

[daviddossett]

Presented some ideas at the ux sync. Here's where I've arrived:

• Adds special activity bar item below the settings gear
• Users can change the color of the item (see: terminal colors for similar experience)
• Themes can override color defaults (e.g. profile.blue)

CleanShot.2022-08-10.at.11.30.19.mp4

cc @misolori