In our case, less is more. We decided to not do any of that, and were a bit paranoid that maybe we were going against a 'best practice' somehow?
All we do is look at navigator.language to get the language code:
const userLanguage = navigator.language.split('-')[0]
and if we support that language then we will change the "Translate" button label to that language and default behavior to shortcut to that language version (you can still get the full list).Thats it. Keep it simple.
Example: https://restofworld.org/2024/filipino-ai-chatbot-launches-20...
(translation UI in the byline area, under lead image)