Hindi Internationalization (#1914)

* get basic hindi support to work

* get web app language switcher in

* Refactor i18n implementation and remove unused
code

* add missing strings

* add dropdowns and modals missing strings

* complete all hindi translations

* fix merge conflicts

* fix legeacy persisted state

* fix data in RecommendedFeeds

* fix lint

src/state/persisted/legacy.ts

@@ -94,6 +94,8 @@ export function transform(legacy: Partial<LegacySchema>): Schema {
       postLanguageHistory:
         legacy.preferences?.postLanguageHistory ||
         defaults.languagePrefs.postLanguageHistory,
+      appLanguage:
+        legacy.preferences?.postLanguage || defaults.languagePrefs.appLanguage,
     },
     requireAltTextEnabled:
       legacy.preferences?.requireAltTextEnabled ||

src/state/persisted/schema.ts

@@ -30,6 +30,7 @@ export const schema = z.object({
     contentLanguages: z.array(z.string()), // should move to server
     postLanguage: z.string(), // should move to server
     postLanguageHistory: z.array(z.string()),
+    appLanguage: z.string(),
   }),
   requireAltTextEnabled: z.boolean(), // should move to server
   mutedThreads: z.array(z.string()), // should move to server
@@ -58,6 +59,7 @@ export const defaults: Schema = {
     postLanguageHistory: (deviceLocales || [])
       .concat(['en', 'ja', 'pt', 'de'])
       .slice(0, 6),
+    appLanguage: deviceLocales[0] || 'en',
   },
   requireAltTextEnabled: false,
   mutedThreads: [],

src/state/preferences/languages.tsx

@@ -11,6 +11,7 @@ type ApiContext = {
   toggleContentLanguage: (code2: string) => void
   togglePostLanguage: (code2: string) => void
   savePostLanguageToHistory: () => void
+  setAppLanguage: (code2: string) => void
 }
 
 const stateContext = React.createContext<StateContext>(
@@ -22,6 +23,7 @@ const apiContext = React.createContext<ApiContext>({
   toggleContentLanguage: (_: string) => {},
   togglePostLanguage: (_: string) => {},
   savePostLanguageToHistory: () => {},
+  setAppLanguage: (_: string) => {},
 })
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
@@ -104,6 +106,9 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
             .slice(0, 6),
         }))
       },
+      setAppLanguage(code2: string) {
+        setStateWrapped(s => ({...s, appLanguage: code2}))
+      },
     }),
     [state, setStateWrapped],
   )