P5.js-web-editor: Internationalize mobile text

[ghalestrilo]

Currently, all texts on mobile views are hard-coded.
Use i18n to move these values to the translations file.
Bonus: Provide missing translations

[catarak]

btw, you can access the translations on desktop by adding the env variable TRANSLATIONS_ENABLED=true to your .env file.

[catarak]

I did some thinking about the design for switching the language, and this is what I have so far:

I was thinking it could be in the dropdown menu, which would then open a popup that is similar to this:

I'm not totally happy with this but I wanted a jumping off point. I was also messing around with the Desktop design to see if that would help generate ideas, which I've settled upon this right now (I'm gonna open a PR and ask Andrew and Omar for feedback):

In the mobile design, if possible, I would like to (1) have it be clear which language is selected, and (2) not have to open an additional popup.

[ghalestrilo]

I think adding a translation icon is very helpful

[catarak]

I think adding a translation icon is very helpful

Okay! How would the icon fit into the design?

[ghalestrilo]

I think to the left of the language name / dropdown title is a good idea!
On mobile, it can go to the left of the Language dropdown item

Edit: The <Dropdown /> Component has a <MaybeIcon /> component inside meant for this use case exactly. It was commented out because the styling isn't quite there yet, but you can use it!

[catarak]

Just throwing out another language selection idea :)

[ghalestrilo]

I love it!! Looks super nice ✨