Improve UX of Language Selector in Profile

[MichaelKohler]

Currently the profile has a standard dropdown to list all languages. This is currently how the dropdown looks on the "Profile" page:

The dropdown is built here: https://github.com/common-voice/sentence-collector/blob/0ea738a73a558b5508e7a7d6c58248642930d115/web/src/components/language-selector.tsx

This could be improved with a combobox that allows searching, see https://omnilingo.xyz/ for an example. This then would make it easier to search for a language and users wouldn't need to scroll through the whole dropdown. Preferably this would use an already existing dropdown available through npm, rather than building our own.

One thing to note here is that the same dropdown is also used for the "Add" and "Review" sections. For those it should still be a dropdown with a selection to make it easier to choose. Therefore I think it would be great if the dropdown implementation would support a "list" (like a normal dropdown) and a search for it.

Thanks @ftyers for suggesting this.

[venkateshprabhu2]

Can I work on this? How do I get started?

[MichaelKohler]

Yes, this is free to be worked on. Here's the approach I would suggest:

• Set up the local environment as outlined in the README
• Look at the issue description, make sure you can find the necessary parts of the website locally and fully understand what should be implemented here
• Find a dropdown UI library that is well maintained, regularly updated, and fulfills the requirements here (happy to verify if we want to use a certain library once you found one, just post here to get feedback!)
• Implement what is needed
• Test it locally and verify that your changes fix the issue
• Make sure that the automated tests pass locally (see the README for how to run the tests)

You might want to start with the other issue you commented on first though, as this one here might not be a super easy task at first.

If you have any questions and run into issues, feel free to either post here or join our Matrix chat.

[venkateshprabhu2]

I will work on this during next week.

[MichaelKohler]

@venkateshprabhu2 how is it going? Are you still interested in working on this? Is there any blocker I could help you with?

[venkateshprabhu2]

@venkateshprabhu2 how is it going? Are you still interested in working on this? Is there any blocker I could help you with?

@MichaelKohler Sorry about the delay. Office work took over. Give me until the end of this week and I will get back on this.

[MichaelKohler]

Absolutely understandable, we are volunteers here and sometimes we don't have time. No need to be sorry about the delay!

[venkateshprabhu2]

Thanks for understanding, Michael. Running a bit more late. You will have an update by end of this week.

[venkateshprabhu2]

I came across https://react.semantic-ui.com/modules/dropdown/ as a top result. Is it good to use?

[MichaelKohler]

Thanks for looking into this. Functionality-wise this looks pretty good to me. Is there a way we could us this without the remaining parts of Semantic UI? What would the impact on the final main.js file be? (You can include it and run npm run build to generate that file and then compare against the file generated currently without modifications)

In the end I'd like to avoid including something that would be blowing up the bundle size just for a dropdown, but can't really say if it would be bad without knowing that number (and I don't currently have time to compare it myself).