Improve the layout of the sidebar

[huihuisang]

Modification reason: The sidebar UI layout looks a bit crowded and asymmetric. ( Maybe it's just my personal subjective feeling. :) )

This PR makes the following changes:

1. Added a default icon with transparency to distinguish between downloaded and undownloaded states, and eliminate the blank space on the left when not downloaded.
2. When not downloaded, the version name is centered.
3. Moved platforms to the upper left corner to reduce the display of mismatched buttons at the bottom.

Before:

After:

[rtharston]

Because the platforms window is completely separate, having at the top toolbar doesn't make sense as that toolbar filters, searches, etc the list.

That is a fair point, but it is a bit large and feels a little out of place. Maybe instead of putting the button in the left section of the toolbar, it could go on the right section, near the account and settings buttons. The settings button also opens a new window.

What do you think?

[MattKiazyk]

Because the platforms window is completely separate, having at the top toolbar doesn't make sense as that toolbar filters, searches, etc the list.

That is a fair point, but it is a bit large and feels a little out of place. Maybe instead of putting the button in the left section of the toolbar, it could go on the right section, near the account and settings buttons. The settings button also opens a new window.

What do you think?

I'm still leaning towards having it on the left side vs having another icon on the right. Perhaps smaller?

[rtharston]

Hmm... I'm not UI designer, so I don't have the tools to mock up some options.

I think my main issue with the current Platforms button is that it is alone and feels out of place. Making it big makes it easy to spot, but why is it in the list of Xcode versions? 🤷‍♂️

Thinking about that gave me another thought. Why do the platforms need to be a different window? Could there be a tab selector instead that switched between Xcode and Platform in the left column? The platforms window is just showing a list after all, and that list could fit there. That then leads to the question of what to put in the detail view when a platform is selected.

Okay, sanity check. I just opened Xcodes to remind myself what is in the Platforms window. It is only the installed platforms. I think my tabbed left column idea only makes sense if it shows all available platforms, similar to the Xcode list.

Probably best to revert it for this PR, as you suggest, and discuss this elsewhere so the approved parts can get merged.

[huihuisang]

@huihuisang thanks for the work you've done. Totally love the new icons and how it looks.

Can I ask that you leave the platforms button as it was in the bottom left vs at the top toolbar.

Because the platforms window is completely separate, having at the top toolbar doesn't make sense as that toolbar filters, searches, etc the list.

Thanks!

Thank you for your reply. Actually, I don't have a better idea of where this feature should be placed either. The initial modification was just because I felt it looked a bit awkward and took up space at the bottom of the list. Putting it in the top-left corner was to solve this issue. Initially, I also considered that putting it together with the filter button in the top-left corner might not be appropriate. Since I don't have a better idea for now, based on your suggestion, I'll put it back in its original position and make some minor style adjustments so that it doesn't look too abrupt.

[MattKiazyk]

Thanks for the back and forth and the changes - appreciate it!

I may change the Installed Platforms later as I'm working on that platforms view to be more then just the installed ones, but for now 👍

[MattKiazyk]

Another Change that would be awesome now is that putting that same default icon on the xcode detail view.

[huihuisang]

Another Change that would be awesome now is that putting that same default icon on the xcode detail view.

👌 I'll add it later～