Add picker for interface language to Settings

[jolierabideau]

User Story
As a user, I want to be able to select a language so that I can easily manipulate settings that handle language.

Description

• Investigate possible language dropdown someone in SIL has already made - John Hatton might know...?

  • Make sure you can select multiple languages and type your own language code in
  • Shadcn Combobox is probably a good place to start if SIL doesn't have a fitting one

• Add this component to the settings as a special case for the specific settings that handle language? Look at the data type and use this if the setting default value is an array of strings that includes the string 'en'...?

Implementation idea

• Interface Language picker that displays language name as it would be seen in the language it refers to and only for languages whose localizations exist (will have to add something to localization service to get list of languages with localization files)
• Look into multiselectable orderable combobox (if anything)

See the links below for UX design doc and mockup:

• Platform Settings – FigJam
• Combined Settings – v0 by Vercel

[Sebastian-ubs]

Please show language names both in English (or the current language?) and the language it describes (like in Paratext 9).

[irahopkinson]

Please show language names both in English (or the current language?) and the language it describes (like in Paratext 9).

Including English like in P9 makes that dropdown far more cluttered than it needs to be. If you know and can read a language it is much easier to find without the English. Including English certainly helps the majority culture but no one else.

[merchako]

For a first go, a simple Select input is likely sufficient.

A bit of an upgrade would be a multiselect, orderable combo box like

• Shadcn/ui Expansions
• Shadcn/ui Extension

Later on we'll need ways for people to localize. We'll also need a more complex picker for content language.

[Sebastian-ubs]

UX conclusion for the presentation of languages:

Using the full foreign name of the languages (how they’re written in each particular language that they apply to) is better than showing them in the current language, i.e. Deutsch, English, 中文

In settings the currently selected value should show up in the dropdown placeholder.
Usage on a toolbar is not finally confirmed. A language icon should look close to this, but should ideally not be used alone.

UX task to evaluate existing SIL language picker is here: https://github.com/paranext/ux/issues/169
Does anybody have a link to that language picker?

[merchako]

Does anybody have a link to that language picker?

Bloom's EthnoLib Language picker (Storybook Demo)

• Design (Figma—permission restricted)
• Readme
• MUI React Language Chooser
• Monorepo

[tombogle]

Since we're talking about a "simple" UI language chooser, presumably, we would not want anything like the Ethnolib Language picker, since the list is never likely to contain hundreds of choices requiring a complex search. Ian mentioned today that the need to choose ordered fallback languages is a fairly special case and we wouldn't want that need to eclipse the basic need of a user to select the one primary UI language (with English as the automatic fallback).
So I think maybe the first crack at this should just be a single-select dropdown.

[tombogle]

For a first go, a simple Select input is likely sufficient.

A bit of an upgrade would be a multiselect, orderable combo box like

• Shadcn/ui Expansions
• Shadcn/ui Extension

Later on we'll need ways for people to localize. We'll also need a more complex picker for content language.

Neither of these really offer a convenient way to sort the selected options. User has to select them in the desired order.

[tjcouch-sil]

Interesting note: the Ethnolib Language picker shows stuff in English even when I type 日本語 (Japanese in Japanese):

[merchako]

@tjcouch-sil , I'm guessing they're using the ISO 639 reference name, a canonical anglicized name (as described by Ethnologue). Either that or it's based on the interface language, but I don't think we have non-English localization information for language names.

@tombogle agreed. I suggest a progressive design and development approach. It would even be fine to separate the tasks of selecting one language versus many.

something like…

1. Select an interface language from the (short) list of localized languages
2. Select multiple languages, preserving the order in which they're chosen. Prefer UI language based on this order.
3. Select multiple languages, reorderable
4. Also choose languages that haven't been localized (e.g., to localize them later)
5. Localization feature

[tjcouch-sil]

Hmm interesting. It looks like it's not always the anglicized name 🤔:

Maybe Japanese just doesn't have this native-first name in whatever data set they're using. Sorry, this is probably a distraction. I just wanted to clarify that I found something that indicates it isn't necessarily suffering from a really big problem according to our needs.

[merchako]

There might be some missing data—like an autonym for Japanese.

[merchako]

I talked to john_hatton@sil.org, and they're currently improving it—about to ship. I documented some issues for them.

[Sebastian-ubs]

I've started a thread in Discord about this topic. Wasn't recognizing discussion was happening in here.

[tombogle]

When the user selects a (primary) UI language, we want the dropdown to close, correct? (Apparently the default behavior for a Shadcn Select is to keep it open.)

[Sebastian-ubs]

According to what I can see on the website, the Select closes after selection as expected: https://ui.shadcn.com/docs/components/select
Same is true for our PBR components

• shadcn-ui > Select
• basics > Combobox,

but not closing for the new advanced > MultiSelectCombobox as expected.

[ianhewubs]

In an effort to make this less complicated, here are some thoughts:

User stories

1. As a consultant who sometimes uses Paratext in different UI languages, I need to pick the UI language I want to see right now. Multiple fallback languages may be undesirable for me and for the team I am working with.
   • e.g. The Portuguese team whose consultant is screen sharing doesn't want to occasionally see French (which is another of the consultant's preferred UI languages) when the Portuguese localization is incomplete. Fall-back to English is preferred.
2. As a user who reads one language well and another reasonably (but I don't read English), I need Paratext to display the UI in the language I choose and fall back to just one language which I choose. Fall back to English where nothing useful is available.
   • e.g. Assuming there is a mostly complete Traditional Chinese localization and a Simplified Chinese localization with only 50 UI items: A Chinese reader will probably prefer Paratext falls back to Traditional Chinese than English.
   • However, a user who is trying to troubleshoot the Simplified Chinese localization might not know whether the Traditional Chinese localization or the Simplified Chinese localization is in error or incomplete if Paratext is sometimes falling back to Traditional Chinese. This user may prefer that Paratext falls back to English (or anything other than Traditional Chinese).

For either user story:

1. It should be simple to control what Primary UI language is displayed.
2. Paratext shouldn't try to decide for the user what fallback language is best.

Therefore the UI should have two components:

1. Picker for preferred language to use right now.
   • Show recently used languages in a way that makes selecting them later easy (e.g. Float to top of list above a divider, show as badges, ...).
   • Let user remove recently used languages from the remembered list (I picked Dansk accidentally instead of Deutsch, and I don't read Danish).
2. Picker for fallback language (default to English). Allow only one fallback language to be selected at any time.
   (Fall back to English if both preferred and fallback languages are incomplete.)

Rationale:

• The main UI language I want to see is not something the program can predict, it depends on the project, location or team I am working with.
• Fallback languages are sometimes helpful and sometimes not at all helpful.
  • It should be possible to prevent Paratext from using special fallback languages when it would be confusing.
  • A fallback language I pick for working with one team might be different to a fallback language for another team.
  • Picking a fallback language should be as simple and controllable as picking the main language.

[tombogle]

@ianhewubs I think you're stories cover 99.99% of the need. I could still see a possible rare edge case for a user who wants to use a very incomplete local language, followed by a regional LWC, followed by a national language. So if we can come up with a UI for that that doesn't really make the more common cases harder, that would be sweet. If we just used a multi-select for the fallback language(s), that might be simple enough, but we'd probably have to test that theory.
One other thing to ponder is what to do with the existing fallback language when the primary language changes: clear it, leave it, or somehow prompt or otherwise call the user's attention to it.
Maybe we can come up with a way of determining favorites that doesn't require the user to manage them consciously. For example, a language doesn't become a favorite until you've used it for more than a day or more than once. And it stops being a favorite if you haven't used it in a year.
Maybe for fallback languages, we can pick up to one automatic "favorite" for each language to be considered as the obvious fallback for that language.

[Sebastian-ubs]

Could those be described as phases, where we would implement the first or second now and the rest later?
This seems to fit into the "keep it simple" theme of Glenn and we can make more thoughts about improvements later.

1. be able to select a language and fall back to English
2. be able to pick the fallback language
3. have "preferred languages" and be able to prevent a fallback language
4. have more than 1 fallback language

[merchako]

Changing the interface language currently requires an application restart before taking effect. I've created https://github.com/paranext/ux/issues/208 to meet the need for a flow to ask the user if they want to restart.

[roopa0222]

Testing Repo Steps:

1. Open Platform.Bible > Projects > Settings
2. Confirm that Settings Dialog is opened
3. Platform Settings > Interface Language > 'English' (Single dropdown)
4. Change the Interface Language to 'Espanol' from the dropdown
5. The default fallback language at this time of testing is English
6. Restart the PB application
7. Confirm that the PB application has an interface language to Spanish. (Some of the menu items are in Spanish)