Improve language autodetection UX

[dpordomingo]

The language autodetection UX should be improved as it was suggested by @bzz at #124 (comment)

Current problem:

Right now the dropdown serves 2 purposes: - allowing the user to choose a mode of language detection: auto/manual AND it's also a feedback to the user about the language, detected in Auto mode. Thus confusion.

Proposal:

To keep just ["Autodetect", "Python", "Java", "PHP", ...] and then, add another "label" (a non-interactive UI element) with the current language

[dpordomingo]

To help understanding the necessity, I suggested at #124 (comment), the following mockup, splitting the current option "auto", and the language detected by the server.

( just an example, not a design at all → we need @ricardobaeta assistance )

[ricardobaeta]

Hi @dpordomingo !

The contextual copy should be placed, inside its parent container, and as close as possible to the correspondent meaningful information. I would say to display this copy inside the left building block, because it relates more directly, as such. What do you think?

#dd7a39 (font & border colour)

[dpordomingo]

Your rationale makes sense, for sure !!!

In my case, when I tried to think about the problem, I considered the following other pov:

• left panel → data wrote by the user
• right panel → data returned by the server

That's why I added the language label on the right panel.

But you know... just playing 😉