Language settings updates, new primary language setting (#1471)

* move content languages to screen

* add dropdown library, style primary lang select

* update settings button

* show selected langauges in button

* use primary language in translator link

* update copy

* lint

1 files changed, 15 insertions, 0 deletions

diff --git a/src/state/models/ui/preferences.ts b/src/state/models/ui/preferences.ts
index 5e07685ca..5ae391670 100644
--- a/src/state/models/ui/preferences.ts
+++ b/src/state/models/ui/preferences.ts
@@ -44,6 +44,7 @@ export class LabelPreferencesModel {
 
 export class PreferencesModel {
   adultContentEnabled = false
+  primaryLanguage: string = deviceLocales[0] || 'en'
   contentLanguages: string[] = deviceLocales || []
   postLanguage: string = deviceLocales[0] || 'en'
   postLanguageHistory: string[] = DEFAULT_LANG_CODES
@@ -78,6 +79,7 @@ export class PreferencesModel {
 
   serialize() {
     return {
+      primaryLanguage: this.primaryLanguage,
       contentLanguages: this.contentLanguages,
       postLanguage: this.postLanguage,
       postLanguageHistory: this.postLanguageHistory,
@@ -105,6 +107,15 @@ export class PreferencesModel {
    */
   hydrate(v: unknown) {
     if (isObj(v)) {
+      if (
+        hasProp(v, 'primaryLanguage') &&
+        typeof v.primaryLanguage === 'string'
+      ) {
+        this.primaryLanguage = v.primaryLanguage
+      } else {
+        // default to the device languages
+        this.primaryLanguage = deviceLocales[0] || 'en'
+      }
       // check if content languages in preferences exist, otherwise default to device languages
       if (
         hasProp(v, 'contentLanguages') &&
@@ -542,6 +553,10 @@ export class PreferencesModel {
     this.requireAltTextEnabled = !this.requireAltTextEnabled
   }
 
+  setPrimaryLanguage(lang: string) {
+    this.primaryLanguage = lang
+  }
+
   getFeedTuners(
     feedType: 'home' | 'following' | 'author' | 'custom' | 'likes',
   ) {