Use on-device translation on mobile when available (#9930)

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
This commit is contained in:
DS Boyce
2026-02-27 16:59:19 -08:00
committed by GitHub
parent 7c9f05a2af
commit 9bbcb472ef
17 changed files with 4620 additions and 608 deletions
+30 -24
View File
@@ -8,7 +8,7 @@ import {
type CommonNavigatorParams,
type NativeStackScreenProps,
} from '#/lib/routes/types'
import {languageName, sanitizeAppLanguageSetting} from '#/locale/helpers'
import {sanitizeAppLanguageSetting} from '#/locale/helpers'
import {APP_LANGUAGES, LANGUAGES} from '#/locale/languages'
import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
import {atoms as a, web} from '#/alf'
@@ -144,8 +144,11 @@ export function LanguageSettingsScreen({}: Props) {
<Select.ItemText>{label}</Select.ItemText>
</Select.Item>
)}
items={DEDUPED_LANGUAGES.map(l => ({
label: languageName(l, langPrefs.appLanguage),
items={DEDUPED_LANGUAGES.sort(
(a, b) =>
a.name.localeCompare(b.name, langPrefs.appLanguage), // Localized sort
).map(l => ({
label: l.name, // Pre-generated name using Intl.DisplayNames
value: l.code2,
}))}
/>
@@ -177,32 +180,35 @@ export function LanguageSettingsScreen({}: Props) {
values={langPrefs.contentLanguages}
onChange={setLangPrefs.setContentLanguages}>
<Toggle.PanelGroup>
{possibleLanguages.map((language, index) => {
const name = languageName(language, langPrefs.appLanguage)
return (
<Toggle.Item
key={language.code2}
name={language.code2}
label={name}>
{({selected}) => (
<Toggle.Panel
active={selected}
adjacent={index === 0 ? 'trailing' : 'both'}>
<Toggle.Checkbox />
<Toggle.PanelText>{name}</Toggle.PanelText>
</Toggle.Panel>
)}
</Toggle.Item>
{possibleLanguages
.sort(
(a, b) =>
a.name.localeCompare(b.name, langPrefs.appLanguage), // Localized sort
)
})}
.map((language, index) => {
const name = language.name // Pre-generated name using Intl.DisplayNames
return (
<Toggle.Item
key={language.code2}
name={language.code2}
label={name}>
{({selected}) => (
<Toggle.Panel
active={selected}
adjacent={index === 0 ? 'trailing' : 'both'}>
<Toggle.Checkbox />
<Toggle.PanelText>{name}</Toggle.PanelText>
</Toggle.Panel>
)}
</Toggle.Item>
)
})}
<Button
label={_(msg`Add more languages...`)}
label={_(msg`Add more languages`)}
onPress={contentLanguagePrefsControl.open}>
<Toggle.Panel adjacent="leading">
<Toggle.PanelIcon icon={PlusIcon} />
<Toggle.PanelText>
Add more languages...
</Toggle.PanelText>
<Toggle.PanelText>Add more languages</Toggle.PanelText>
</Toggle.Panel>
</Button>
</Toggle.PanelGroup>